@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,600;0,6..96,700;1,6..96,400;1,6..96,600&family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');
/* ── component layer (from Blue Moon Pattern Maker v55, re-tokenised) ── */


*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:15px;scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--B);-webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100vh}

/* ── Top bar ── */
/* v6 header rule removed */
#bmf-logo{height:36px;max-width:150px;object-fit:contain;filter:brightness(0)invert(1);flex-shrink:0}
.top-divider{width:1px;height:30px;background:rgba(255,255,255,.2);flex-shrink:0}
.top-brand{flex:1;min-width:0}
.top-brand-name{font-family:var(--D);font-size:17px;font-weight:600;color:#fff;letter-spacing:-.01em;line-height:1.1}
.top-brand-sub{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-top:1px}
.top-actions{display:flex;gap:8px;flex-shrink:0;align-items:center}
.btn-export{padding:8px 16px;border-radius:var(--r3);background:var(--surface);color:var(--blue2);border:none;font-size:12px;font-weight:800;cursor:pointer;font-family:var(--B);letter-spacing:.02em;transition:var(--transition)}
.btn-export:hover{background:var(--gold2);color:var(--ink2)}
.project-badge{padding:5px 12px;border-radius:var(--r3);background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.25);color:rgba(255,255,255,.9);font-size:10px;font-weight:700;cursor:pointer;font-family:var(--B);display:flex;align-items:center;gap:5px;transition:var(--transition)}
.project-badge:hover{background:rgba(255,255,255,.2)}
.proj-dot{width:6px;height:6px;border-radius:50%;background:var(--gold2);flex-shrink:0}

/* ── Tab nav ── */
#bmf-tabs{display:flex;background:var(--card);border-bottom:2px solid var(--border);overflow-x:auto;-ms-overflow-style:none;scrollbar-width:none;position:sticky;top:0;z-index:190;box-shadow:0 2px 12px rgba(10,14,36,.06)}
#bmf-tabs::-webkit-scrollbar{display:none}
.btab{flex:0 0 auto;padding:13px 16px 10px;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink4);cursor:pointer;border:none;background:none;font-family:var(--B);border-bottom:3px solid transparent;margin-bottom:-2px;transition:var(--transition);white-space:nowrap;position:relative}
.btab:hover{color:var(--blue);background:var(--blue5)}
.btab.on{color:var(--blue2);border-bottom-color:var(--blue2);font-weight:800;background:var(--blue5)}
.btab .tab-num{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:var(--border);font-size:9px;font-weight:800;margin-right:5px;transition:var(--transition)}
.btab.on .tab-num{background:var(--blue2);color:#fff}

/* ── Pages ── */
.bpage{display:none;padding:20px 16px 40px;max-width:980px;margin:0 auto;min-height:70vh}
.bpage.show{display:block}
.pg-header{margin-bottom:20px}
.pg-title{font-family:var(--D);font-size:28px;font-weight:600;color:var(--ink);line-height:1.2;margin-bottom:4px}
.pg-title em{font-style:italic;color:var(--blue3)}
.pg-sub{font-size:13px;color:var(--ink4);font-weight:500;line-height:1.6}

/* ── Garment grid ── */
#bgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:16px}
@media(min-width:400px){#bgrid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:560px){#bgrid{grid-template-columns:repeat(4,1fr)}}
@media(min-width:720px){#bgrid{grid-template-columns:repeat(5,1fr)}}
@media(min-width:920px){#bgrid{grid-template-columns:repeat(6,1fr)}}
.gc{background:var(--card);border:2px solid var(--border);border-radius:var(--r);padding:14px 8px 12px;cursor:pointer;transition:var(--transition);text-align:center;font-family:var(--B);display:flex;flex-direction:column;align-items:center;gap:5px;position:relative;overflow:hidden}
.gc::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,var(--blue5),transparent);opacity:0;transition:var(--transition)}
.gc:hover{border-color:var(--blue4);transform:translateY(-2px);box-shadow:var(--shadow2)}
.gc:hover::before{opacity:1}
.gc.on{border-color:var(--blue3);box-shadow:0 0 0 3px rgba(18,85,176,.2);background:linear-gradient(135deg,var(--surface-2),var(--surface-2))}
.gc.on::before{opacity:0}
.gc-ico{width:68px;height:68px;display:flex;align-items:center;justify-content:center;position:relative;z-index:1}
.gc-ico svg{width:64px;height:64px}
.gc-name{font-size:10px;font-weight:800;color:var(--ink);letter-spacing:.03em;position:relative;z-index:1}
.gc-sub{font-size:8px;color:var(--ink5);position:relative;z-index:1;line-height:1.4}
.gc-new{position:absolute;top:5px;right:5px;background:var(--gold);color:#fff;font-size:7px;font-weight:900;padding:2px 5px;border-radius:4px;letter-spacing:.05em;text-transform:uppercase}

/* ── Design grid ── */
#designGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:12px}
@media(min-width:460px){#designGrid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:680px){#designGrid{grid-template-columns:repeat(4,1fr)}}
.dcard{background:var(--card);border:2px solid var(--border);border-radius:var(--r2);padding:12px 8px 10px;cursor:pointer;transition:var(--transition);text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px}
.dcard:hover{border-color:var(--blue4);transform:translateY(-1px);box-shadow:var(--shadow)}
.dcard.on{border-color:var(--blue3);box-shadow:0 0 0 3px rgba(18,85,176,.18);background:var(--blue5)}
.dcard-ico svg{width:52px;height:52px}
.dcard-name{font-size:11px;font-weight:800;color:var(--ink)}
.dcard-sub{font-size:9px;color:var(--ink5)}

/* ── AI desc box ── */
.ai-desc-card{background:linear-gradient(135deg,var(--surface-2),var(--surface-2));border:2px solid var(--border2);border-radius:var(--r);padding:16px;margin-bottom:14px}
.ai-desc-label{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--blue2);margin-bottom:10px;display:flex;align-items:center;gap:6px}
.ai-desc-wrap{position:relative}
#aiDescInput{width:100%;border:2px solid var(--border2);border-radius:var(--r2);color:var(--ink);font-family:var(--B);font-size:14px;padding:13px 60px 13px 14px;outline:none;resize:none;height:56px;background:var(--surface);transition:var(--transition)}
#aiDescInput:focus{border-color:var(--blue3);box-shadow:0 0 0 3px rgba(18,85,176,.12)}
#aiDescBtn{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:linear-gradient(135deg,var(--blue2),var(--blue3));border:none;border-radius:var(--r2);padding:8px 13px;color:#fff;font-size:12px;cursor:pointer;font-weight:800;font-family:var(--B)}
#aiDescResult{background:var(--surface);border:2px solid var(--blue4);border-radius:var(--r2);padding:12px 14px;font-size:13px;color:var(--ink2);line-height:1.65;display:none;margin-top:8px}
#aiDescResult.show{display:block}

/* ── Tip card ── */
.tip-card{background:linear-gradient(135deg,var(--blue5),var(--surface-2));border:2px solid var(--border2);border-radius:var(--r);padding:14px 16px;margin-bottom:14px;font-size:13px;color:var(--ink3);line-height:1.7;display:none}

/* ── Cards & sections ── */
.bcard{background:var(--card);border:2px solid var(--border);border-radius:var(--r);padding:16px 18px;margin-bottom:12px;box-shadow:var(--shadow)}
.bcard-accent{border-color:var(--border2);background:var(--blue5)}
.bcard-gold{border-color:var(--gold2);background:var(--gold3)}
.sec-label{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);margin-bottom:8px;display:block}

/* ── Measurement fields ── */
.mrow2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.mrow1{margin-bottom:10px}
.mfl{font-size:11px;font-weight:700;color:var(--ink2);display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.mfl-hint{font-size:9px;color:var(--ink5);font-style:italic}
.req{color:var(--red);font-size:10px;font-weight:800}
.opt{color:var(--ink5);font-size:9px}
.mi{width:100%;background:var(--surface);border:2px solid var(--border2);border-radius:var(--r2);color:var(--ink);font-family:var(--B);font-size:15px;font-weight:600;padding:11px 13px;outline:none;-webkit-appearance:none;transition:var(--transition)}
.mi:focus{border-color:var(--blue3);box-shadow:0 0 0 3px rgba(18,85,176,.1)}
select.mi{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8'%3E%3Cpath d='M0 0l7 8 7-8z' fill='%231255b0'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center;padding-right:32px}

/* ── Feature chips ── */
#schips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:4px}
.chip{padding:7px 13px;border-radius:var(--r3);font-size:11px;font-weight:700;border:2px solid var(--border);background:var(--card);color:var(--ink3);cursor:pointer;font-family:var(--B);transition:var(--transition)}
.chip:hover{border-color:var(--blue4);color:var(--blue)}
.chip.on{background:var(--blue2);border-color:var(--blue2);color:#fff}

/* ── Grain / Options controls ── */
.option-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:4px}
.opt-btn{flex:1;min-width:80px;padding:10px 6px;border-radius:var(--r2);font-size:11px;font-weight:700;border:2px solid var(--border);background:var(--card);color:var(--ink3);cursor:pointer;font-family:var(--B);transition:var(--transition);text-align:center}
.opt-btn:hover{border-color:var(--blue4);color:var(--blue)}
.opt-btn.on{background:var(--blue2);border-color:var(--blue2);color:#fff}
.sl-row{display:flex;align-items:center;gap:10px;padding:4px 0 10px}
.sl-lbl{font-size:11px;font-weight:600;color:var(--ink4);white-space:nowrap;min-width:28px}
.sl-val{font-size:14px;font-weight:800;min-width:40px;text-align:right}
.sl-blue{color:var(--blue2)}
.sl-green{color:var(--green)}
.sl{flex:1;-webkit-appearance:none;height:5px;border-radius:3px;background:var(--border);outline:none;cursor:pointer}
.sl::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;cursor:pointer;border:3px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.sl-b::-webkit-slider-thumb{background:var(--blue3)}
.sl-g::-webkit-slider-thumb{background:var(--green)}
select.miw{width:100%;background:var(--surface);border:2px solid var(--border2);border-radius:var(--r2);color:var(--ink);font-family:var(--B);font-size:14px;padding:11px 32px 11px 13px;outline:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8'%3E%3Cpath d='M0 0l7 8 7-8z' fill='%231255b0'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center;margin-bottom:10px;transition:var(--transition)}
select.miw:focus{border-color:var(--blue3);box-shadow:0 0 0 3px rgba(18,85,176,.1)}

/* ── Primary actions ── */
#genBtn{width:100%;padding:16px;border-radius:var(--r);background:linear-gradient(135deg,#060f28,var(--blue2),var(--blue3));color:#fff;border:none;font-size:16px;font-weight:800;cursor:pointer;font-family:var(--B);box-shadow:0 6px 24px rgba(18,85,176,.4);margin-top:8px;letter-spacing:.02em;transition:var(--transition);position:relative;overflow:hidden}
#genBtn:hover{box-shadow:0 10px 40px rgba(18,85,176,.55);transform:translateY(-1px)}
#genBtn:active{transform:translateY(0)}
#genBtn:disabled{background:var(--border);color:var(--ink4);cursor:not-allowed;box-shadow:none;transform:none}
.nav-row{display:flex;gap:10px;margin-top:8px}
.btn-back{flex:1;padding:13px;border-radius:var(--r);background:var(--card);border:2px solid var(--border);color:var(--ink3);font-size:13px;font-weight:700;cursor:pointer;font-family:var(--B);transition:var(--transition)}
.btn-back:hover{border-color:var(--border2);color:var(--ink)}
.btn-next{flex:2;padding:13px;border-radius:var(--r);background:var(--blue2);color:#fff;border:none;font-size:14px;font-weight:800;cursor:pointer;font-family:var(--B);transition:var(--transition);letter-spacing:.02em}
.btn-next:hover{background:var(--blue);box-shadow:0 4px 16px rgba(18,85,176,.3)}

/* ── Canvas toolbar ── */
#ctbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:10px 0;margin-bottom:8px;border-bottom:1.5px solid var(--border)}
.ct-btn{padding:7px 12px;border-radius:var(--r2);font-size:10px;font-weight:700;border:2px solid var(--border);background:var(--card);color:var(--ink3);cursor:pointer;font-family:var(--B);transition:var(--transition);letter-spacing:.04em;text-transform:uppercase}
.ct-btn:hover{border-color:var(--blue4);color:var(--blue)}
.ct-btn.on{background:var(--blue2);border-color:var(--blue2);color:#fff}
.ct-sep{width:1.5px;height:24px;background:var(--border);flex-shrink:0}
#zlbl{margin-left:auto;font-size:11px;font-weight:700;color:var(--ink4)}
.action-row{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.act-btn{flex:1;min-width:100px;padding:12px 8px;border-radius:var(--r);font-size:12px;font-weight:800;cursor:pointer;font-family:var(--B);border:none;display:flex;align-items:center;justify-content:center;gap:6px;transition:var(--transition);letter-spacing:.02em}
.act-btn:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.act-nest{background:linear-gradient(135deg,#065030,var(--green));color:#fff}
.act-dxf{background:linear-gradient(135deg,var(--surface-2),var(--surface-3));color:#fff}
.act-svg{background:linear-gradient(135deg,#2d1a0e,#8b4513);color:#fff}
.act-png{background:linear-gradient(135deg,#0e1a2d,var(--blue2));color:#fff}

/* ── Canvas ── */
#cwrap{width:100%;background:var(--card);border:2px solid var(--border);border-radius:var(--r);overflow:auto;position:relative;min-height:460px;max-height:72vh;margin-bottom:12px;box-shadow:var(--shadow);-webkit-overflow-scrolling:touch;overscroll-behavior:contain;scroll-behavior:smooth}
#cwrap::-webkit-scrollbar{width:14px;height:14px}
#cwrap::-webkit-scrollbar-thumb{background:var(--blue4);border-radius:8px;border:3px solid var(--card)}
#cwrap::-webkit-scrollbar-thumb:hover{background:var(--blue2)}
#cwrap::-webkit-scrollbar-track{background:var(--bg2,#f0f4fa);border-radius:8px}
.zbig{font-size:16px!important;padding:8px 16px!important;min-width:44px;font-weight:800!important}
#cnv{display:block;background:var(--surface-2)}
#emp{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--surface-2),var(--bg));transition:opacity .3s}
#emp.gone{opacity:0;pointer-events:none}
.emp-ico{font-size:48px;margin-bottom:12px;opacity:.6}
.emp-h{font-family:var(--D);font-size:22px;color:var(--ink3);margin-bottom:4px}
.emp-p{font-size:12px;color:var(--ink5);text-align:center;max-width:260px;line-height:1.7}
#aiovl{position:absolute;inset:0;background:rgba(238,242,255,.96);display:none;flex-direction:column;align-items:center;justify-content:center;z-index:20;backdrop-filter:blur(8px);border-radius:var(--r)}
#aiovl.show{display:flex}
.ai-spin{width:48px;height:48px;border:4px solid var(--border2);border-top-color:var(--blue3);border-radius:50%;animation:spin .7s linear infinite;margin-bottom:16px}
@keyframes spin{to{transform:rotate(360deg)}}
#aiH{font-family:var(--D);font-size:22px;font-weight:600;color:var(--blue2);margin-bottom:4px}
#aiP{font-size:12px;color:var(--ink4)}

/* ── Pieces list ── */
.pc{background:var(--card);border:2px solid var(--border);border-radius:var(--r2);padding:13px 15px;margin-bottom:8px;cursor:pointer;transition:var(--transition)}
.pc:hover{border-color:var(--border2);box-shadow:var(--shadow)}
.pc.sel{border-color:var(--blue3);background:var(--blue5);box-shadow:0 0 0 3px rgba(18,85,176,.15)}
.pc-top{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.pc-dot{width:20px;height:20px;border-radius:5px;flex-shrink:0}
.pc-nm{font-size:14px;font-weight:800;flex:1}
.pc-qty{font-size:9px;background:var(--bg);border:1.5px solid var(--border);padding:3px 8px;border-radius:4px;color:var(--ink4);font-weight:700}
.pc-dim{font-size:11px;color:var(--ink4);font-weight:500}

/* ── Stats ── */
.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:14px}
@media(min-width:500px){.stats-grid{grid-template-columns:repeat(3,1fr)}}
.stat-card{background:var(--card);border:2px solid var(--border);border-radius:var(--r2);padding:14px;text-align:center}
.stat-v{font-family:var(--D);font-size:28px;font-weight:600;color:var(--blue2);margin-bottom:2px}
.stat-l{font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink4)}
.ebar{height:10px;background:var(--bg);border-radius:5px;overflow:hidden;margin:10px 0 4px;border:1.5px solid var(--border)}
.efill{height:100%;border-radius:5px;transition:width .8s cubic-bezier(.4,0,.2,1)}
.ai-notes-card{background:linear-gradient(135deg,var(--blue5),var(--surface-2));border:2px solid var(--border2);border-radius:var(--r);padding:16px;margin-bottom:12px}
.ai-notes-label{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--blue2);margin-bottom:8px}

/* ── Fabric picker ── */
#fabricSearch{width:100%;border:2px solid var(--border2);border-radius:var(--r2);padding:11px 14px;font-size:14px;color:var(--ink);font-family:var(--B);outline:none;margin-bottom:10px;transition:var(--transition)}
#fabricSearch:focus{border-color:var(--blue3);box-shadow:0 0 0 3px rgba(18,85,176,.1)}
.fab-cats{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.fab-cat{padding:6px 13px;border-radius:var(--r3);font-size:11px;font-weight:700;border:2px solid var(--border);background:var(--card);color:var(--ink3);cursor:pointer;font-family:var(--B);transition:var(--transition)}
.fab-cat:hover{border-color:var(--blue4)}
.fab-cat.on{background:var(--blue2);border-color:var(--blue2);color:#fff}
.live-coll{padding:6px 12px;border:1.4px solid var(--blue3,var(--border));background:var(--blue5,var(--surface-2));color:var(--blue,var(--accent));border-radius:14px;font-size:12px;font-weight:800;cursor:pointer;transition:all .15s}
.live-coll.on{background:var(--blue);color:#fff;border-color:var(--blue)}
.live-coll:hover{border-color:var(--blue)}
#fabricGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:16px;max-height:440px;overflow-y:auto}
@media(min-width:480px){#fabricGrid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:700px){#fabricGrid{grid-template-columns:repeat(4,1fr)}}
.fab-card{background:var(--card);border-radius:var(--r);overflow:hidden;border:2px solid var(--border);cursor:pointer;transition:var(--transition)}
.fab-card:hover{border-color:var(--blue4);transform:translateY(-2px);box-shadow:var(--shadow)}
.fab-card.on{border-color:var(--blue3);box-shadow:0 0 0 3px rgba(18,85,176,.2)}
.fab-swatch{height:68px}
.fab-name{font-size:10px;font-weight:800;padding:7px 8px 2px;color:var(--ink)}
.fab-price{font-size:9px;color:var(--ink4);padding:0 8px 8px}
.mockup-card{background:var(--card);border:2px solid var(--border);border-radius:var(--r);padding:18px;margin-bottom:12px}
.mockup-header{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--blue2);margin-bottom:14px}
#mockupSvg{width:100%;max-width:280px;display:block;margin:0 auto;border-radius:var(--r2)}
.mock-info{background:var(--blue5);border:1.5px solid var(--border2);border-radius:var(--r2);padding:11px 14px;margin-top:12px;font-size:12px;font-weight:700;color:var(--blue2);display:flex;align-items:center;gap:10px}
.mock-swatch{width:28px;height:28px;border-radius:5px;border:2px solid var(--border);flex-shrink:0}

/* ── Upload / Project tab ── */
.upload-hero{background:linear-gradient(135deg,#060f28,#0d2060,var(--accent-deep));border-radius:var(--r);padding:28px 24px;margin-bottom:20px;color:#fff;position:relative;overflow:hidden}
.upload-hero::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")}
.upload-hero-title{font-family:var(--D);font-size:26px;font-weight:600;margin-bottom:6px;position:relative}
.upload-hero-sub{font-size:13px;color:rgba(255,255,255,.75);line-height:1.7;position:relative;max-width:560px}
.upload-hero-badge{display:inline-flex;align-items:center;gap:6px;margin-top:14px;padding:7px 14px;border-radius:var(--r3);background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.2);font-size:11px;font-weight:700;color:rgba(255,255,255,.9);position:relative}
#uploadZone{border:3px dashed var(--border2);border-radius:var(--r);padding:36px 24px;text-align:center;cursor:pointer;background:var(--card);margin-bottom:16px;position:relative;transition:var(--transition)}
#uploadZone:hover,#uploadZone.drag{border-color:var(--blue3);background:var(--blue5)}
#uploadZone input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.uz-ico{font-size:40px;margin-bottom:12px;opacity:.7}
.uz-title{font-family:var(--D);font-size:20px;font-weight:600;color:var(--ink2);margin-bottom:6px}
.uz-sub{font-size:12px;color:var(--ink4);line-height:1.7}
#uploadPreview{display:none;margin-bottom:14px;border-radius:var(--r);overflow:hidden;border:2px solid var(--border)}
#uploadPreview img{width:100%;max-height:240px;object-fit:contain;background:var(--bg);padding:12px}
.upload-result{display:none;background:var(--card);border:2px solid var(--green);border-radius:var(--r);padding:18px;margin-bottom:14px}
.upload-result.show{display:block}
.upload-result-header{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.upload-result-ico{width:40px;height:40px;border-radius:50%;background:var(--green2);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.upload-result-title{font-size:15px;font-weight:800;color:var(--green)}
.upload-result-sub{font-size:12px;color:var(--ink4)}
.upload-fields{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:12px 0}
.uf{background:var(--bg);border:1.5px solid var(--border);border-radius:var(--r2);padding:10px 12px}
.uf-l{font-size:9px;font-weight:800;text-transform:uppercase;color:var(--ink4);margin-bottom:3px}
.uf-v{font-size:15px;font-weight:700;color:var(--blue2)}
#uploadSpinner{display:none;text-align:center;padding:24px}
#uploadSpinner.show{display:block}
.spin-ring{width:44px;height:44px;border:4px solid var(--border2);border-top-color:var(--blue3);border-radius:50%;animation:spin .7s linear infinite;margin:0 auto 12px}
.proj-apply-btn{width:100%;padding:14px;border-radius:var(--r);background:linear-gradient(135deg,var(--green),#0a9456);color:#fff;border:none;font-size:14px;font-weight:800;cursor:pointer;font-family:var(--B);display:none;margin-top:4px;transition:var(--transition);letter-spacing:.02em}
.proj-apply-btn:hover{transform:translateY(-1px);box-shadow:0 6px 24px rgba(10,112,64,.35)}
.proj-apply-btn.show{display:block}

/* ── Project panel (in Upload tab) ── */
.project-section{background:var(--gold3);border:2px solid var(--gold2);border-radius:var(--r);padding:18px;margin-top:20px}
.project-section-title{font-family:var(--D);font-size:18px;font-weight:600;color:var(--ink2);margin-bottom:4px;display:flex;align-items:center;gap:8px}
.project-section-sub{font-size:12px;color:var(--ink4);margin-bottom:14px;line-height:1.6}
#projectList{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.proj-open-hint{font-size:11px;font-weight:800;color:var(--blue);background:var(--blue5);padding:4px 9px;border-radius:12px;white-space:nowrap;margin-right:2px}
.proj-item{cursor:pointer;transition:var(--transition)}
.proj-item:hover{border-color:var(--blue3);box-shadow:var(--shadow);transform:translateY(-1px)}
.proj-item:hover .proj-open-hint{background:var(--blue2);color:#fff}
.proj-item{background:var(--surface);border:2px solid var(--gold2);border-radius:var(--r2);padding:13px 15px;display:flex;align-items:center;gap:12px;cursor:pointer;transition:var(--transition)}
.proj-item:hover{border-color:var(--gold);box-shadow:var(--shadow)}
.proj-item.active{border-color:var(--gold);background:linear-gradient(135deg,#fffaf0,var(--gold-soft))}
.proj-ico{width:36px;height:36px;border-radius:8px;background:var(--gold3);border:2px solid var(--gold2);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.proj-name{font-size:13px;font-weight:800;color:var(--ink)}
.proj-meta{font-size:10px;color:var(--ink4);margin-top:1px}
.proj-status{margin-left:auto;font-size:9px;font-weight:700;padding:3px 8px;border-radius:var(--r3)}
.proj-status.draft{background:var(--bg);color:var(--ink4);border:1.5px solid var(--border)}
.proj-status.active{background:var(--green2);color:var(--green);border:1.5px solid var(--green)}
.new-proj-btn{width:100%;padding:12px;border-radius:var(--r2);background:none;border:2px dashed var(--gold2);color:var(--gold);font-size:12px;font-weight:700;cursor:pointer;font-family:var(--B);transition:var(--transition)}
.new-proj-btn:hover{background:var(--gold3);border-style:solid}

/* ── Editorial / Info section ── */
.editorial{margin-top:24px;padding-top:24px;border-top:2px solid var(--border)}
.editorial-title{font-family:var(--D);font-size:22px;font-weight:600;color:var(--ink);margin-bottom:16px}
.info-cards{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:600px){.info-cards{grid-template-columns:1fr 1fr}}
.info-card{background:var(--card);border:2px solid var(--border);border-radius:var(--r);padding:18px;position:relative;overflow:hidden}
.info-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px}
.info-card.blue::before{background:linear-gradient(90deg,var(--blue2),var(--blue4))}
.info-card.green::before{background:linear-gradient(90deg,var(--green),#0a9456)}
.info-card.gold::before{background:linear-gradient(90deg,var(--gold),var(--gold2))}
.info-card.purple::before{background:linear-gradient(90deg,#6a1b9a,#9c27b0)}
.info-card-ico{font-size:28px;margin-bottom:10px}
.info-card-title{font-family:var(--D);font-size:17px;font-weight:600;color:var(--ink);margin-bottom:6px}
.info-card-body{font-size:12px;color:var(--ink4);line-height:1.8}
.info-card-body strong{color:var(--ink2)}

/* ── Print modal ── */
#printModal{display:none;position:fixed;inset:0;z-index:500;background:rgba(6,15,40,.8);align-items:center;justify-content:center;backdrop-filter:blur(6px);padding:18px}
#printModal.show{display:flex}
.pm-box{background:var(--surface);border-radius:16px;padding:28px;max-width:500px;width:100%;max-height:90vh;overflow-y:auto}
.pm-title{font-family:var(--D);font-size:26px;font-weight:600;margin-bottom:4px}
.pm-sub{font-size:12px;color:var(--ink4);margin-bottom:20px}
.pm-tabs{display:flex;gap:8px;margin-bottom:18px}
.pm-tab{flex:1;padding:11px 6px;border-radius:var(--r2);font-size:11px;font-weight:800;border:2px solid var(--border);background:var(--card);color:var(--ink3);cursor:pointer;font-family:var(--B);text-align:center;transition:var(--transition)}
.pm-tab.on{background:var(--blue2);border-color:var(--blue2);color:#fff}
.pm-panel{display:none}.pm-panel.show{display:block}
.pm-btn{width:100%;padding:14px;border-radius:var(--r2);border:none;font-size:14px;font-weight:800;cursor:pointer;font-family:var(--B);margin-bottom:8px;display:flex;align-items:center;justify-content:center;gap:8px;transition:var(--transition);letter-spacing:.02em}
.pm-btn:hover{transform:translateY(-1px)}
.pm-print{background:linear-gradient(135deg,var(--blue2),var(--blue3));color:#fff}
.pm-dxf{background:linear-gradient(135deg,var(--surface-2),var(--surface-3));color:#fff}
.pm-svg{background:linear-gradient(135deg,#2d1a0e,#8b4513);color:#fff}
.pm-png{background:linear-gradient(135deg,#065030,var(--green));color:#fff}
.pm-cancel{width:100%;padding:11px;background:none;border:2px solid var(--border);border-radius:var(--r2);color:var(--ink4);font-size:12px;font-weight:700;cursor:pointer;font-family:var(--B);margin-top:4px}

/* ── Toast ── */
#toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--ink);color:#fff;border-radius:var(--r3);padding:12px 24px;font-size:12px;font-weight:700;z-index:300;transition:transform .22s cubic-bezier(.4,0,.2,1);pointer-events:none;white-space:nowrap;max-width:92vw;text-align:center;box-shadow:var(--shadow3)}
#toast.show{transform:translateX(-50%) translateY(0)}

/* ── Sel card ── */
#selCard{display:none;border-left:4px solid var(--blue3);background:var(--blue5)}

/* ── Nest panel ── */
#nestPanel{background:var(--card);border:2px solid var(--border2);border-radius:var(--r);padding:18px;margin-bottom:12px}

/* ── Print media ── */
@media print{#bmf-top,#bmf-tabs,#ctbar,.action-row,#printModal,#toast{display:none!important}body{background:var(--surface)}#cwrap{border:none;box-shadow:none}}
@media(max-width:380px){.gc-ico{width:56px;height:56px}.btab{padding:12px 10px}}

/* Back to store */
.back-to-store{display:inline-flex;align-items:center;font-size:11px;font-weight:700;color:rgba(255,255,255,.8);text-decoration:none;letter-spacing:.04em;padding:5px 10px;border-radius:20px;border:1px solid rgba(255,255,255,.25);transition:all .15s;flex-shrink:0}
.back-to-store:hover{color:#fff;background:rgba(255,255,255,.12)}
/* Toolbar */
#ctbar{display:flex;align-items:center;gap:5px;flex-wrap:nowrap;padding:8px 0;margin-bottom:8px;border-bottom:1.5px solid var(--border);overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
#ctbar::-webkit-scrollbar{display:none}
.action-row{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:10px}
/* dcard improvements */
.dcard{background:var(--card);border:1.5px solid var(--border);border-radius:12px;padding:14px 8px 12px;cursor:pointer;transition:all .18s ease;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}
.dcard:hover{border-color:var(--blue3);transform:translateY(-2px);box-shadow:0 4px 16px rgba(18,85,176,.15);background:var(--blue5)}
.dcard.on{border-color:var(--blue3);border-width:2px;box-shadow:0 0 0 3px rgba(18,85,176,.18);background:var(--blue5)}
.dcard-ico{width:68px;height:68px;background:var(--blue5);border-radius:10px;display:flex;align-items:center;justify-content:center;margin:0 auto 2px}
.dcard-ico svg{width:60px;height:60px;display:block}
@keyframes spin{to{transform:rotate(360deg)}}


/* ═══ HEADER v7 — hero logo layout ═══ */
#bmf-top{display:block;height:auto;background:linear-gradient(160deg,var(--ink) 0%,#0e2a6b 55%,#123a8f 100%);padding:0 0 2px;position:relative;box-shadow:0 4px 32px rgba(6,15,40,.4)}
.top-row-actions{display:flex;justify-content:space-between;align-items:center;padding:10px 14px 0}
.top-actions{display:flex;gap:8px;align-items:center}
.project-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:20px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);color:rgba(255,255,255,.85);font-size:11px;font-weight:700;cursor:pointer}
.proj-dot{width:6px;height:6px;border-radius:50%;background:var(--ok)}
.btn-export{padding:5px 11px;border-radius:20px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);color:rgba(255,255,255,.85);font-size:11px;font-weight:700;cursor:pointer}
.top-logo-hero{text-align:center;padding:14px 20px 4px}
.top-logo-hero a{display:inline-block;text-decoration:none}
#bmf-logo{height:60px;max-width:230px;width:auto;display:block;margin:0 auto;filter:brightness(0) invert(1)}
.top-subtitle{font-size:9px;font-weight:800;letter-spacing:.32em;color:rgba(255,255,255,.55);margin-top:8px;text-transform:uppercase}
#gen-counter{display:flex;align-items:center;justify-content:center;gap:8px;padding:8px 20px 12px}
#gen-count-txt{font-size:10px;font-weight:700;color:rgba(255,255,255,.7);letter-spacing:.06em}
#gc-track{width:70px;height:4px;background:rgba(255,255,255,.15);border-radius:2px;overflow:hidden}
#gc-fill{height:100%;width:100%;background:linear-gradient(90deg,#3b82f6,#60a5fa);border-radius:2px;transition:width .3s}


/* ═══ MOBILE HEADER + LAYOUT ═══ */
@media(max-width:480px){
  #bmf-logo{height:46px;max-width:180px}
  .top-logo-hero{padding:10px 16px 2px}
  .top-subtitle{font-size:8px;letter-spacing:.26em;margin-top:6px}
  .top-row-actions{padding:8px 10px 0}
  .back-to-store{font-size:10px;padding:4px 8px}
  .project-badge,.btn-export{font-size:10px;padding:4px 9px}
  #gen-counter{padding:6px 16px 10px}
  .bpage{padding:12px 12px 40px}
}
@media(max-width:360px){
  #bmf-logo{height:40px}
  .top-actions{gap:5px}
}
/* Canvas + panels never overflow viewport */
#cwrap{max-width:100%;overflow:auto}
#bmfYieldPanel{max-width:100%;box-sizing:border-box}


/* ═══ FASHION HERO ═══ */
#bmf-top{display:block;height:auto;background:radial-gradient(120% 160% at 50% -20%,var(--surface-3) 0%,var(--surface-2) 42%,var(--bg) 100%);overflow:hidden}
.hero-glow{position:absolute;border-radius:50%;filter:blur(46px);pointer-events:none}
.hero-glow.g1{width:280px;height:280px;background:rgba(94,140,255,.16);top:-120px;left:-70px}
.hero-glow.g2{width:220px;height:220px;background:rgba(201,169,97,.12);bottom:-100px;right:-50px}
.top-logo-hero{position:relative;text-align:center;padding:10px 20px 6px}
#bmf-logo{filter:drop-shadow(0 0 16px rgba(190,210,255,.45));animation:logoShine 5s ease-in-out infinite}
@keyframes logoShine{0%,100%{filter:drop-shadow(0 0 12px rgba(190,210,255,.35))}50%{filter:drop-shadow(0 0 30px rgba(232,213,163,.75))}}
.top-subtitle{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:17px;font-weight:600;letter-spacing:.14em;color:var(--gold-2);margin-top:4px;text-shadow:0 0 14px rgba(232,213,163,.35);text-transform:none}
.hero-gift{font-size:9.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.82);margin-top:7px}
.hero-rule{display:flex;align-items:center;justify-content:center;gap:10px;margin:7px auto;max-width:250px}
.hero-rule::before,.hero-rule::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(201,169,97,.55))}
.hero-rule::after{background:linear-gradient(90deg,rgba(201,169,97,.55),transparent)}
.hero-diamond{font-size:7px;color:var(--gold)}
.back-to-store,.project-badge,.btn-export{border-color:rgba(201,169,97,.35)!important}
/* ═══ EDITORIAL THUMBNAILS ═══ */
.gc{background:linear-gradient(178deg,var(--surface) 0%,var(--surface-2) 100%);border:1px solid var(--border);border-radius:14px;box-shadow:0 1px 3px rgba(60,45,20,.06);position:relative;overflow:hidden}
.gc::after{content:'';position:absolute;left:22%;right:22%;bottom:9px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:0;transition:opacity .25s}
.gc:hover{transform:translateY(-4px);border-color:var(--gold);box-shadow:0 12px 28px rgba(60,45,20,.14)}
.gc:hover::after{opacity:.9}
.gc.on{border-color:var(--gold);background:linear-gradient(178deg,var(--surface-2) 0%,var(--surface-3) 100%);box-shadow:0 8px 24px rgba(160,125,50,.18)}
.gc.on::after{opacity:1}
.gc-ico{transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.gc:hover .gc-ico{transform:scale(1.1) rotate(-2deg)}
.gc-ico svg{filter:drop-shadow(0 3px 6px rgba(60,45,20,.18))}
.gc-name{font-family:'Cormorant Garamond',Georgia,serif;font-size:13.5px;font-weight:700;letter-spacing:.02em;color:var(--ink)}
.dcard{background:linear-gradient(178deg,var(--surface) 0%,var(--surface-2) 100%);border:1px solid var(--border);border-radius:14px;box-shadow:0 1px 3px rgba(60,45,20,.06)}
.dcard:hover{transform:translateY(-3px);border-color:var(--gold);box-shadow:0 10px 24px rgba(60,45,20,.13)}
.dcard.on{border-color:var(--gold);background:linear-gradient(178deg,var(--surface-2) 0%,var(--surface-3) 100%)}
.dcard-ico svg{filter:drop-shadow(0 3px 6px rgba(60,45,20,.16))}
.dcard-name{font-family:'Cormorant Garamond',Georgia,serif;font-size:13px;font-weight:700;color:var(--ink)}
.dcard-sub{color:var(--gold)}
.fab-card{border-radius:14px;border:1px solid var(--border)}
.fab-card:hover{border-color:var(--gold);box-shadow:0 10px 24px rgba(60,45,20,.13)}
.fab-card.on{border-color:var(--gold)}
.pg-title{font-family:'Cormorant Garamond',Georgia,serif;font-size:26px;letter-spacing:.01em}
.pg-title em{color:var(--gold)}
@media(max-width:480px){
  #bmf-logo{height:54px!important}
  .top-subtitle{font-size:14px}
  .hero-gift{font-size:8px;letter-spacing:.12em}
  .gc-name{font-size:12px}
}


.dcard-ico{position:relative}
.dcard-ico-off::before{content:'';position:absolute;inset:6% 22%;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 60"><circle cx="20" cy="4" r="2" fill="%23d9cbb4"/><path d="M13 9 C11.5 14 11 19 13.5 24 C15 27.5 14.5 31 13.5 34 C16 36.5 24 36.5 26.5 34 C25.5 31 25 27.5 26.5 24 C29 19 28.5 14 27 9 C24 7 16 7 13 9 Z" fill="%23e8ddc8" stroke="%23c9b998" stroke-width="1"/><rect x="19.4" y="36" width="1.2" height="16" fill="%23c9b998"/><ellipse cx="20" cy="54" rx="7" ry="1.6" fill="%23d9cbb4"/></svg>') no-repeat center/contain;opacity:.5;z-index:0}
.dcard-ico svg{position:relative;z-index:1}


#advisorPanel{display:none;background:linear-gradient(178deg,var(--surface),var(--surface-2));border:1.5px solid var(--border-2);border-radius:14px;padding:16px;margin:14px 0;box-shadow:0 4px 18px rgba(140,110,40,.1)}
.adv-trend{background:var(--surface-warm);border-radius:9px;padding:10px 12px;font-size:11.5px;line-height:1.6;color:var(--ink-2);margin-bottom:10px}
.adv-row{display:flex;gap:10px;padding:7px 0;border-bottom:1px solid var(--border);font-size:11.5px;line-height:1.55}
.adv-row:last-child{border-bottom:none}
.adv-k{flex:0 0 74px;font-weight:800;color:var(--gold);font-size:9.5px;text-transform:uppercase;letter-spacing:.07em;padding-top:2px}
.adv-v{color:var(--ink-2)}


/* ═══ EDITORIAL TYPE: pattern + statistics pages ═══ */
.stat-card{background:linear-gradient(178deg,var(--surface),var(--surface-2));border:1px solid var(--border);border-radius:14px}
.stat-v{font-family:'Cormorant Garamond',Georgia,serif;font-size:30px;font-weight:700;color:var(--accent-2);letter-spacing:.01em}
.stat-l{font-size:8.5px;font-weight:700;letter-spacing:.16em;color:var(--gold)}
#pg5 .bcard,#pg7 .bcard{background:linear-gradient(178deg,var(--surface),var(--surface-2));border:1px solid var(--border);border-radius:14px}
.act-btn{font-family:'Inter',system-ui,sans-serif;font-size:10.5px;font-weight:800;letter-spacing:.05em;border-radius:12px}
#plist .pl-name,#pieceList .pl-name{font-family:'Cormorant Garamond',Georgia,serif;font-size:14px;font-weight:700;color:var(--ink)}
#ctbar button{font-weight:700;letter-spacing:.03em}
.ai-notes-label{font-family:'Cormorant Garamond',Georgia,serif;font-size:15px;font-weight:700;letter-spacing:.02em;color:var(--ink)}
.nest-title,#nestPanel .np-h{font-family:'Cormorant Garamond',Georgia,serif;font-size:16px;font-weight:700;color:var(--ink)}
#sDesign{font-family:'Cormorant Garamond',Georgia,serif;font-size:15px}
.ebar{border-radius:8px;overflow:hidden;background:var(--surface-warm)}


/* ═══ KNOWLEDGE BASE ═══ */
.kb-hero{background:radial-gradient(120% 160% at 50% -20%,var(--surface-3) 0%,var(--surface-2) 42%,var(--bg) 100%);border-radius:16px;padding:26px 22px;text-align:center;margin-bottom:18px}
.kb-hero-t{font-family:'Cormorant Garamond',Georgia,serif;font-size:24px;font-weight:700;color:#fff;margin-bottom:6px}
.kb-hero-s{font-size:12px;color:var(--gold-2);font-style:italic;font-family:Georgia,serif}
.kb-step{display:flex;gap:14px;padding:15px 0;border-bottom:1px solid var(--border)}
.kb-num{flex-shrink:0;width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--gold),#a8873f);color:#fff;font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center;font-family:Georgia,serif}
.kb-step-t{font-family:'Cormorant Garamond',Georgia,serif;font-size:16px;font-weight:700;color:var(--ink);margin-bottom:3px}
.kb-step-b{font-size:12px;color:var(--ink-3);line-height:1.7}
.kb-ico{flex-shrink:0;width:44px;height:44px;background:linear-gradient(178deg,var(--surface),var(--surface-2));border:1px solid var(--border);border-radius:10px;display:flex;align-items:center;justify-content:center}
.kb-ico svg{width:38px;height:38px}
.faq-sec{margin-top:24px}
.faq-h{font-family:'Cormorant Garamond',Georgia,serif;font-size:22px;font-weight:700;color:var(--ink);margin-bottom:4px}
.faq-sub{font-size:11.5px;color:var(--gold);margin-bottom:14px}
details.faq{background:linear-gradient(178deg,var(--surface),var(--surface-2));border:1px solid var(--border);border-radius:12px;margin-bottom:8px;overflow:hidden}
details.faq summary{padding:14px 16px;font-size:13px;font-weight:800;color:var(--ink);cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;font-family:'Cormorant Garamond',Georgia,serif;font-size:15px}
details.faq summary::after{content:'+';color:var(--gold);font-size:18px;font-weight:400}
details.faq[open] summary::after{content:'\2212'}
details.faq .faq-a{padding:0 16px 14px;font-size:12px;color:var(--ink-3);line-height:1.75}
.kb-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0}
.kb-gallery img{width:100%;border-radius:12px;border:1px solid var(--border);display:block}
.kb-cite{margin-top:20px;padding:16px;background:var(--surface-warm);border-radius:12px;font-size:11px;color:var(--ink-3);line-height:1.8;text-align:center}


/* ═══ MOBILE-FRIENDLY PATTERN CONTROLS ═══ */
.pctrl{margin-bottom:12px}
.pctrl-primary{display:flex;gap:8px;align-items:center;margin-bottom:12px;flex-wrap:wrap}
.pc-toggle{flex:0 0 auto;display:flex;align-items:center;gap:7px;padding:11px 15px;border-radius:12px;border:2px solid var(--border);background:var(--card);color:var(--ink2);font-family:var(--B);font-size:13px;font-weight:700;cursor:pointer;min-height:44px;transition:var(--transition)}
.pc-toggle:hover{border-color:var(--blue4);color:var(--blue)}
.pc-toggle.on{background:var(--blue2);border-color:var(--blue2);color:#fff}
.pc-toggle .pc-ico{font-size:16px;line-height:1}
.pc-zoom{display:flex;align-items:center;gap:4px;margin-left:auto;background:var(--card);border:2px solid var(--border);border-radius:12px;padding:3px}
.pc-zbtn{min-width:40px;min-height:38px;border:none;background:transparent;color:var(--ink2);font-size:18px;font-weight:800;cursor:pointer;border-radius:9px;transition:var(--transition)}
.pc-zbtn:hover{background:var(--blue5);color:var(--blue)}
.pc-zbtn.pc-fit{font-size:12px;min-width:44px;letter-spacing:.04em}
.pc-zlbl{font-size:12px;font-weight:800;color:var(--ink3);min-width:42px;text-align:center;font-family:var(--B)}

.pc-sec{border:1.5px solid var(--border);border-radius:14px;margin-bottom:10px;overflow:hidden;background:var(--card)}
.pc-head{display:flex;align-items:center;gap:9px;padding:14px 16px;font-family:var(--B);font-size:13px;font-weight:800;color:var(--ink);cursor:pointer;letter-spacing:.02em;list-style:none;user-select:none;-webkit-tap-highlight-color:transparent}
.pc-head::-webkit-details-marker{display:none}
.pc-h-ico{font-size:17px;line-height:1}
.pc-chev{margin-left:auto;font-size:20px;color:var(--ink4);transition:transform .22s ease;line-height:1}
.pc-sec[open] .pc-chev{transform:rotate(90deg)}
.pc-body{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 12px 12px}
@media(max-width:420px){.pc-body{grid-template-columns:1fr}}

.pc-chip{display:flex;align-items:center;gap:10px;padding:12px 13px;border-radius:11px;border:2px solid var(--border);background:var(--card);cursor:pointer;text-align:left;min-height:52px;transition:var(--transition);font-family:var(--B)}
.pc-chip:hover{border-color:var(--blue4)}
.pc-chip.on{border-color:var(--blue2);background:var(--blue5)}
.pc-chip .pc-c-ico{font-size:18px;line-height:1;flex-shrink:0;width:22px;text-align:center;color:var(--ink3)}
.pc-chip.on .pc-c-ico{color:var(--blue2)}
.pc-c-txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.pc-c-txt b{font-size:12.5px;font-weight:800;color:var(--ink);line-height:1.2}
.pc-c-txt small{font-size:10.5px;color:var(--ink4);font-weight:600;line-height:1.2}
.pc-chip.on .pc-c-txt small{color:var(--blue)}

.pc-action{display:flex;align-items:center;gap:11px;padding:13px 14px;border-radius:11px;border:2px solid var(--border);background:var(--card);cursor:pointer;text-align:left;min-height:56px;transition:var(--transition);font-family:var(--B);width:100%}
.pc-action:hover{border-color:var(--blue2);transform:translateY(-1px);box-shadow:var(--shadow)}
.pc-action .pc-a-ico{font-size:21px;line-height:1;flex-shrink:0;width:26px;text-align:center}
.pc-a-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.pc-a-txt b{font-size:13.5px;font-weight:800;color:var(--ink);line-height:1.2}
.pc-a-txt small{font-size:11px;color:var(--ink4);font-weight:600;line-height:1.25}
.pc-dl .pc-a-ico{color:var(--blue2)}



/* ═══════════════════════════════════════════════════════════════════
   PATTERN STUDIO — Atelier Noir theme
   Dark editorial · magenta / violet accents · gilt hairlines
   Loaded after the legacy component layer; tokens below re-skin it.
   ═══════════════════════════════════════════════════════════════════ */


:root{
  /* ── new palette ── */
  --bg:#0b0a10;            /* stage */
  --bg-2:#110f18;
  --surface:#17141f;       /* cards */
  --surface-2:#1f1b2a;     /* inset panels, inputs */
  --surface-3:#282334;     /* hover */
  --surface-warm:#1f1a18;  /* parchment-tinted panels (sketch, guide) */
  --paper:#f6f1e7;         /* drafting paper — pattern canvas, sketch host */
  --border:rgba(255,255,255,.09);
  --border-2:rgba(255,255,255,.16);
  --ink:#f3eee6;           /* primary text (ivory) */
  --ink-2:#ddd6cb;
  --ink-3:#a9a197;
  --ink-4:#8c857b;
  --ink-5:#7d766d;
  --accent:#ff2d87;        /* magenta */
  --accent-2:#9b6bff;      /* violet */
  --accent-deep:#c2186a;
  --accent-soft:rgba(255,45,135,.14);
  --violet-soft:rgba(155,107,255,.16);
  --gold:#e2c275;
  --gold-2:#f1dca3;
  --gold-soft:rgba(226,194,117,.14);
  --ok:#c7f55a;            /* lime — success / generate */
  --ok-bg:rgba(199,245,90,.12);
  --danger:#ff5c7a;
  --danger-bg:rgba(255,92,122,.12);
  --warn:#ffb454;
  --warn-bg:rgba(255,180,84,.12);
  --grad:linear-gradient(120deg,#ff2d87 0%,#b84dff 55%,#9b6bff 100%);
  --grad-gold:linear-gradient(120deg,#e2c275,#f7e7b8 50%,#cfae63);
  --shadow:0 2px 18px rgba(0,0,0,.35);
  --shadow2:0 12px 40px rgba(0,0,0,.45);
  --shadow3:0 30px 90px rgba(0,0,0,.6);
  --glow:0 0 0 1px rgba(255,45,135,.35),0 8px 30px rgba(255,45,135,.25);
  --r:14px;--r2:9px;--r3:999px;
  --D:'Bodoni Moda',Didot,'Playfair Display',Georgia,serif;
  --B:'Inter',system-ui,-apple-system,sans-serif;
  --M:'Space Grotesk','Inter',monospace;
  --transition:all .22s cubic-bezier(.4,0,.2,1);

  /* ── legacy aliases (the component layer and engine still read these) ── */
  --ink2:var(--ink-2);--ink3:var(--ink-3);--ink4:var(--ink-4);--ink5:var(--ink-5);
  --blue:var(--accent);--blue2:var(--accent-deep);--blue3:var(--accent-2);--blue4:var(--accent-2);--blue5:var(--accent-soft);
  --navy:var(--ink);--gold2:var(--gold-2);--gold3:var(--gold-soft);
  --green:var(--ok);--green2:var(--ok-bg);--red:var(--danger);--red2:var(--danger-bg);
  --app-bg:var(--bg);--bg2:var(--bg-2);--off:var(--surface-2);--txt3:var(--ink-3);--card:var(--surface);--card2:var(--surface-2);--border2:var(--border-2);
}

html,body{background:var(--bg)!important;color:var(--ink);}
body{font-family:var(--B);-webkit-font-smoothing:antialiased;margin:0;min-height:100vh;
  background:
    radial-gradient(1200px 600px at 85% -10%,rgba(155,107,255,.18),transparent 60%),
    radial-gradient(900px 500px at -10% 10%,rgba(255,45,135,.14),transparent 60%),
    var(--bg)!important;}
#bmf-root{position:relative;inset:auto;width:auto;height:auto;overflow:visible;max-width:1180px;margin:0 auto;padding:0 clamp(12px,3vw,32px) 110px;background:transparent;color:var(--ink);}
#bmf-root>*{color:inherit}
::selection{background:var(--accent);color:#fff}
a{color:var(--accent-2)}

/* ─────────────── Header ─────────────── */
.ps-top{position:relative;overflow:hidden;padding:18px 0 10px;background:transparent;border:0;box-shadow:none;margin:0}
.ps-noise{position:absolute;inset:0;pointer-events:none;opacity:.35;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .08 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");}
.ps-glow{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;opacity:.55}
.ps-glow-a{width:420px;height:420px;right:-120px;top:-180px;background:radial-gradient(circle,#9b6bff,transparent 65%)}
.ps-glow-b{width:360px;height:360px;left:-140px;top:40px;background:radial-gradient(circle,#ff2d87,transparent 65%)}
.ps-bar{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 4px}
.ps-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.ps-brand-mark{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--surface);border:1px solid var(--border-2);box-shadow:var(--shadow)}
.ps-brand-word{font-family:var(--D);font-weight:600;font-size:22px;letter-spacing:.02em;line-height:1}
.ps-brand-word em{font-style:italic;font-weight:400;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;margin-left:2px}
.ps-brand-by{font-family:var(--M);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-4);margin-left:8px;padding-left:10px;border-left:1px solid var(--border-2)}
.ps-actions{display:flex;gap:8px}
#bmf-root .project-badge,#bmf-root .btn-export{background:var(--surface);border:1px solid var(--border-2);color:var(--ink-2);font-family:var(--M);font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:9px 14px;border-radius:var(--r3);cursor:pointer;transition:var(--transition);display:flex;align-items:center;gap:7px}
#bmf-root .project-badge:hover,#bmf-root .btn-export:hover{border-color:var(--accent);color:#fff;box-shadow:var(--glow)}
#bmf-root .btn-export{background:var(--grad);border-color:transparent;color:#fff}
#bmf-root .proj-dot{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 10px var(--ok)}

.ps-hero{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:10px;padding:18px 10px 10px;max-width:1120px;margin:0 auto;text-align:left}
.ps-hero-copy{position:relative;z-index:2}
.ps-hero .ps-lede{margin-left:0}
.ps-hero .ps-stats{justify-content:flex-start}
.ps-links{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px}
.ps-links a{font-size:12px;font-weight:600;color:var(--ink-3);text-decoration:none;padding:7px 12px;border:1px solid var(--border-2);border-radius:var(--r3);transition:var(--transition)}
.ps-links a:hover{color:#fff;border-color:var(--accent);background:var(--accent-soft)}
.ps-3d{position:relative;height:470px;pointer-events:none;mask-image:radial-gradient(70% 70% at 50% 50%,#000 55%,transparent 100%);-webkit-mask-image:radial-gradient(70% 70% at 50% 50%,#000 55%,transparent 100%)}
.ps-3d canvas{display:block;width:100%!important;height:100%!important}
body.ps-compact .ps-3d,body.ps-compact .ps-links{display:none}
body.ps-compact .ps-hero{grid-template-columns:1fr;text-align:center}
body.ps-compact .ps-hero .ps-title{text-align:center}
#bmf-root .gc::after,#bmf-root .dcard::after{content:'';position:absolute;inset:0;background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.10),transparent 60%);opacity:0;transition:opacity .25s;pointer-events:none;border-radius:inherit}
#bmf-root .gc:hover::after,#bmf-root .dcard:hover::after{opacity:1}
#bmf-root .gc,#bmf-root .dcard{will-change:transform;transition:transform .18s ease-out,border-color .22s,box-shadow .22s}
.ps-eyebrow{display:inline-flex;align-items:center;gap:12px;font-family:var(--M);font-size:10.5px;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);margin-bottom:18px}
.ps-eyebrow i{width:22px;height:1px;background:var(--gold);opacity:.6}
.ps-title{font-family:var(--D);font-weight:600;font-size:clamp(38px,6.4vw,74px);line-height:.98;letter-spacing:-.015em;margin:0 0 16px;color:var(--ink)}
.ps-title em{font-style:italic;font-weight:400;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.ps-lede{font-size:clamp(14px,1.6vw,17px);line-height:1.6;color:var(--ink-3);margin:0 auto 22px;max-width:620px}
.ps-stats{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 26px;font-family:var(--M);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4)}
.ps-stats b{color:var(--ink);font-weight:700;margin-right:4px}
#gen-counter[hidden]{display:none!important}

/* compact header on inner steps */
body.ps-compact .ps-hero{padding:10px 10px 12px}
body.ps-compact .ps-title{font-size:clamp(22px,3vw,30px);margin-bottom:0}
body.ps-compact .ps-eyebrow,body.ps-compact .ps-lede,body.ps-compact .ps-stats{display:none}
body.ps-compact .ps-glow{opacity:.3}

/* ─────────────── Runway tab rail ─────────────── */
#bmf-root #bmf-tabs{position:sticky;top:0;z-index:40;display:flex;gap:4px;align-items:center;overflow-x:auto;scrollbar-width:none;padding:10px 6px;margin:4px -6px 22px;background:rgba(11,10,16,.72);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);border:1px solid var(--border);border-radius:var(--r3);box-shadow:var(--shadow)}
#bmf-tabs::-webkit-scrollbar{display:none}
#bmf-root .btab{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;padding:10px 15px;border-radius:var(--r3);border:1px solid transparent;background:transparent;color:var(--ink-3);font-family:var(--B);font-weight:600;font-size:12.5px;letter-spacing:.02em;cursor:pointer;transition:var(--transition);white-space:nowrap}
#bmf-root .btab:hover{color:var(--ink);background:var(--surface-2)}
#bmf-root .btab.on{color:#fff;background:var(--surface-3);border-color:var(--border-2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.04),0 6px 18px rgba(0,0,0,.35)}
#bmf-root .btab .tab-num{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;font-family:var(--M);font-size:10.5px;font-weight:700;background:var(--surface-2);color:var(--ink-3);border:1px solid var(--border-2)}
#bmf-root .btab.on .tab-num{background:var(--grad);color:#fff;border-color:transparent}
.tab-sep{flex:0 0 1px;height:22px;background:var(--border-2);margin:0 6px}

/* ─────────────── Render on model (Fabric step) ─────────────── */
#psRenderBox{margin:0 0 14px}
.ps-croquis{border-top:1px solid rgba(226,194,117,.3);padding-top:10px}
.ps-croquis summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 4px;color:var(--ink-2);font-weight:700;font-size:13px}
.ps-croquis summary::-webkit-details-marker{display:none}
.ps-croquis summary i{font-style:normal;font-family:var(--M);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4)}
.ps-croquis summary::after{content:'+';font-family:var(--D);font-size:22px;color:var(--gold);margin-left:8px}
.ps-croquis[open] summary::after{content:'–'}
.ps-render-cta{margin-bottom:12px}
.ps-render-cta .btn-next{font-family:var(--D);font-style:italic;font-size:20px;padding:16px 30px}
.ps-render-stage .ps-render-empty{padding:34px 16px}
.ps-render-head{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:flex-end;margin-bottom:12px}
.ps-render-title{font-family:var(--D);font-size:20px;font-weight:600;color:var(--ink)}
.ps-render-sub{font-size:11.5px;color:var(--ink-3);margin-top:3px;max-width:520px;line-height:1.5}
.ps-render-ctl{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.ps-gender{display:inline-flex;background:var(--surface-2);border:1px solid var(--border-2);border-radius:var(--r3);padding:3px;gap:2px}
.ps-gender button{border:0;background:transparent;color:var(--ink-3);font-family:var(--B);font-weight:700;font-size:12px;padding:7px 14px;border-radius:var(--r3);cursor:pointer;transition:var(--transition)}
.ps-gender button.on{background:var(--grad);color:#fff;box-shadow:0 4px 14px rgba(255,45,135,.3)}
.ps-gender button:disabled{opacity:.35;cursor:not-allowed}
.ps-render-ctl .mi{padding:9px 12px;font-size:12px;width:auto}
.ps-render-ctl .btn-next{padding:11px 20px;font-size:13px}
.ps-render-stage{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r);min-height:120px;display:grid;place-items:center;overflow:hidden}
.ps-render-empty{padding:28px 16px;text-align:center;color:var(--ink-3);font-size:12.5px}
.ps-render-loading{display:flex;flex-direction:column;align-items:center;gap:14px;padding:40px 16px;color:var(--ink-2);font-size:13px}
.ps-render-loading .ai-spin{width:34px;height:34px;border:3px solid var(--surface-3);border-top-color:var(--accent);border-radius:50%;animation:psSpin .9s linear infinite}
@keyframes psSpin{to{transform:rotate(360deg)}}
.ps-render-img{display:block;width:100%;max-width:560px;height:auto;margin:0 auto;border-radius:6px;box-shadow:var(--shadow2)}
.ps-render-meta{width:100%;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 14px;font-family:var(--M);font-size:11px;letter-spacing:.04em;color:var(--ink-3);border-top:1px solid var(--border)}
.ps-render-meta .btn-back{padding:7px 12px;font-size:11px}

/* ─────────────── Pages & headers ─────────────── */
#bmf-root .bpage{display:none;animation:none;background:transparent;padding:0;max-width:none}
#bmf-root .bpage.show{display:block;animation:psIn .35s cubic-bezier(.2,.7,.2,1)}
@keyframes psIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
#bmf-root .pg-header{margin:6px 0 20px;padding:0 0 16px;border-bottom:1px solid var(--border)}
#bmf-root .pg-title{font-family:var(--D);font-size:clamp(28px,4vw,42px);font-weight:600;letter-spacing:-.01em;color:var(--ink);line-height:1.05}
#bmf-root .pg-title em{font-style:italic;font-weight:400;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
#bmf-root .pg-sub{color:var(--ink-3);font-size:13.5px;margin-top:8px;line-height:1.55}
#bmf-root .sec-label{display:block;font-family:var(--M);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin:22px 0 12px}

/* ─────────────── Cards ─────────────── */
#bmf-root .bcard,#bmf-root .tip-card,#bmf-root .ai-desc-card,#bmf-root .mockup-card,#bmf-root .ai-notes-card,#bmf-root .stat-card,#bmf-root .info-card,#bmf-root .project-section,#bmf-root .upload-hero,#bmf-root #nestPanel,#bmf-root #sketchPanel,#bmf-root #selCard,#bmf-root .editorial{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow);color:var(--ink-2)}
#bmf-root .bcard-accent,#bmf-root #selCard{border-color:rgba(255,45,135,.35);background:linear-gradient(135deg,rgba(255,45,135,.10),rgba(155,107,255,.08)),var(--surface)}
#bmf-root .bcard-gold{border-color:rgba(226,194,117,.4);background:linear-gradient(135deg,rgba(226,194,117,.10),transparent 60%),var(--surface)}
#bmf-root .tip-card{border-left:3px solid var(--gold);background:var(--surface-warm);color:var(--ink-2)}
#bmf-root .ai-desc-card{background:linear-gradient(135deg,rgba(155,107,255,.14),rgba(255,45,135,.08)),var(--surface);border-color:rgba(155,107,255,.35)}
#bmf-root .ai-desc-label{color:var(--accent-2);font-family:var(--M);letter-spacing:.14em;text-transform:uppercase;font-size:11px}
#bmf-root #aiDescInput{background:var(--surface-2);color:var(--ink);border:1px solid var(--border-2);border-radius:var(--r2)}
#bmf-root #aiDescInput:focus{border-color:var(--accent-2);box-shadow:0 0 0 3px var(--violet-soft);outline:none}
#bmf-root #aiDescBtn{background:var(--grad);color:#fff;border:0;border-radius:var(--r2)}
#bmf-root #aiDescResult{background:var(--surface-2);color:var(--ink-2);border:1px solid var(--border)}

/* ─────────────── Garment grid (runway cards) ─────────────── */
#bmf-root #bgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
#bmf-root .gc{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:18px 12px 14px;text-align:center;cursor:pointer;transition:var(--transition);overflow:hidden;color:var(--ink-2)}
#bmf-root .gc::before{content:'';position:absolute;inset:0;background:var(--grad);opacity:0;transition:var(--transition)}
#bmf-root .gc:hover{transform:translateY(-3px);border-color:var(--border-2);box-shadow:var(--shadow2)}
#bmf-root .gc:hover::before{opacity:.08}
#bmf-root .gc.on{border-color:var(--accent);box-shadow:var(--glow)}
#bmf-root .gc.on::before{opacity:.14}
#bmf-root .gc-ico{position:relative;width:68px;height:68px;margin:0 auto 10px;filter:drop-shadow(0 6px 14px rgba(0,0,0,.45))}
#bmf-root .gc-name{position:relative;font-family:var(--D);font-size:16px;font-weight:600;color:var(--ink);letter-spacing:.01em}
#bmf-root .gc-sub{position:relative;font-size:10.5px;color:var(--ink-4);margin-top:3px;font-family:var(--M);letter-spacing:.04em}
#bmf-root .gc-new{background:var(--grad);color:#fff}

/* ─────────────── Design grid ─────────────── */
#bmf-root #designGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
#bmf-root .dcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:14px;cursor:pointer;transition:var(--transition);color:var(--ink-2)}
#bmf-root .dcard:hover{transform:translateY(-3px);border-color:var(--border-2);box-shadow:var(--shadow2)}
#bmf-root .dcard.on{border-color:var(--accent-2);background:linear-gradient(160deg,var(--violet-soft),transparent 70%),var(--surface);box-shadow:0 0 0 1px rgba(155,107,255,.4),0 10px 30px rgba(155,107,255,.25)}
#bmf-root .dcard-ico{background:var(--surface-2);border-radius:10px;padding:8px;border:1px solid var(--border)}
#bmf-root .dcard-name{font-family:var(--D);font-size:15.5px;font-weight:600;color:var(--ink)}
#bmf-root .dcard-sub{font-size:11px;color:var(--ink-4)}

/* ─────────────── Inputs, chips, option buttons ─────────────── */
#bmf-root .mi,#bmf-root select.mi,#bmf-root select.miw,#bmf-root #fabricSearch,#bmf-root input[type=text],#bmf-root input[type=number],#bmf-root input[type=search],#bmf-root textarea,#bmf-root select{background:var(--surface-2);color:var(--ink);border:1px solid var(--border-2);border-radius:var(--r2);font-family:var(--B);color-scheme:dark}
#bmf-root .mi:focus,#bmf-root select.miw:focus,#bmf-root #fabricSearch:focus,#bmf-root textarea:focus,#bmf-root select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);outline:none}
#bmf-root .mfl{color:var(--ink-2)}
#bmf-root .mfl-hint{color:var(--ink-4)}
#bmf-root .req{color:var(--accent)}
#bmf-root .opt{color:var(--ink-4)}
#bmf-root .chip,#bmf-root .opt-btn,#bmf-root .fab-cat,#bmf-root .live-coll,#bmf-root .ct-btn,#bmf-root .pm-tab{background:var(--surface-2);color:var(--ink-2);border:1px solid var(--border-2);border-radius:var(--r3);font-weight:600;transition:var(--transition)}
#bmf-root .chip:hover,#bmf-root .opt-btn:hover,#bmf-root .fab-cat:hover,#bmf-root .live-coll:hover,#bmf-root .ct-btn:hover{border-color:var(--accent-2);color:#fff;background:var(--surface-3)}
#bmf-root .chip.on,#bmf-root .opt-btn.on,#bmf-root .fab-cat.on,#bmf-root .live-coll.on,#bmf-root .ct-btn.on,#bmf-root .pm-tab.on{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 6px 18px rgba(255,45,135,.3)}
#bmf-root .sl-lbl{color:var(--ink-2)}#bmf-root .sl-val{color:var(--gold);font-family:var(--M)}
#bmf-root .sl{accent-color:var(--accent)}
#bmf-root .gbtn{background:var(--surface-2);color:var(--ink-2);border:1px solid var(--border-2)}
#bmf-root .gbtn.on{background:var(--grad);color:#fff;border-color:transparent}

/* ─────────────── Buttons ─────────────── */
#bmf-root .btn-next,#bmf-root #genBtn,#bmf-root .proj-apply-btn,#bmf-root .new-proj-btn,#bmf-root .pm-btn{background:var(--grad);color:#fff;border:0;border-radius:var(--r3);font-weight:700;letter-spacing:.02em;cursor:pointer;box-shadow:0 10px 26px rgba(255,45,135,.28);transition:var(--transition)}
#bmf-root .btn-next:hover,#bmf-root #genBtn:hover{transform:translateY(-1px);box-shadow:0 14px 34px rgba(255,45,135,.4);filter:saturate(1.1)}
#bmf-root .btn-next:disabled,#bmf-root #genBtn:disabled{opacity:.4;filter:grayscale(.6);box-shadow:none;cursor:not-allowed;transform:none}
#bmf-root #genBtn{font-family:var(--D);font-size:20px;font-style:italic;font-weight:600;letter-spacing:.01em;padding:18px 28px}
#bmf-root .btn-back,#bmf-root .pm-cancel{background:transparent;color:var(--ink-2);border:1px solid var(--border-2);border-radius:var(--r3);font-weight:600;cursor:pointer;transition:var(--transition)}
#bmf-root .btn-back:hover{border-color:var(--ink-3);color:#fff;background:var(--surface-2)}
#bmf-root .nav-row{display:flex;gap:10px;justify-content:space-between;margin:22px 0 6px}
#bmf-root .act-btn{background:var(--surface-2);color:var(--ink);border:1px solid var(--border-2);border-radius:var(--r3);font-weight:700}
#bmf-root .act-btn:hover{border-color:var(--accent-2)}
#bmf-root .act-nest{background:var(--grad);border-color:transparent;color:#fff}
#bmf-root .act-dxf{background:var(--gold);color:#1a1408;border-color:transparent}
#bmf-root .act-svg,#bmf-root .act-png{background:var(--surface-3)}
#bmf-root button{font-family:var(--B)}

/* ─────────────── Pattern canvas: drafting paper on a dark table ─────────────── */
#bmf-root #ctbar{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow)}
#bmf-root .ct-sep{background:var(--border-2)}
#bmf-root #zlbl{color:var(--gold);font-family:var(--M)}
#bmf-root #cwrap{background:#0e0c14;border:1px solid var(--border-2);border-radius:var(--r);box-shadow:inset 0 0 0 1px rgba(255,255,255,.03),var(--shadow2);
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:36px 36px}
#bmf-root #cnv{background:var(--paper);box-shadow:0 20px 60px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.4);border-radius:3px}
#bmf-root #emp{color:var(--ink-3)}#bmf-root .emp-h{color:var(--ink);font-family:var(--D);font-size:24px}#bmf-root .emp-p{color:var(--ink-4)}
#bmf-root #aiovl{background:rgba(11,10,16,.82);backdrop-filter:blur(8px)}
#bmf-root #aiH{color:var(--ink);font-family:var(--D);font-size:26px;font-style:italic}
#bmf-root #aiP{color:var(--ink-3)}
#bmf-root .ai-spin{border-color:var(--surface-3);border-top-color:var(--accent)}
#bmf-root .pctrl{background:var(--surface);border:1px solid var(--border);border-radius:var(--r)}

/* ─────────────── Pieces, stats ─────────────── */
#bmf-root .pc{background:var(--surface);border:1px solid var(--border);border-radius:var(--r2);color:var(--ink-2)}
#bmf-root .pc:hover{border-color:var(--border-2)}#bmf-root .pc.sel{border-color:var(--accent);box-shadow:var(--glow)}
#bmf-root .pc-nm{color:var(--ink)}#bmf-root .pc-qty,#bmf-root .pc-dim{color:var(--ink-4);font-family:var(--M)}
#bmf-root .stat-v{font-family:var(--D);font-size:34px;font-weight:600;color:var(--ink)}
#bmf-root .stat-l{font-family:var(--M);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-4)}
#bmf-root .ebar{background:var(--surface-2)}#bmf-root .efill{background:var(--grad)}
#bmf-root .ai-notes-label{color:var(--accent-2);font-family:var(--M);letter-spacing:.14em;text-transform:uppercase;font-size:11px}

/* ─────────────── Fabric & sketch ─────────────── */
#bmf-root #fabricGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
#bmf-root .fab-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r2);color:var(--ink-2);transition:var(--transition)}
#bmf-root .fab-card:hover{transform:translateY(-2px);border-color:var(--border-2)}
#bmf-root .fab-card.on{border-color:var(--accent);box-shadow:var(--glow)}
#bmf-root .fab-swatch,#bmf-root .fab-swatch-solid{height:74px;border-bottom:1px solid var(--border)}
#bmf-root .fab-name{color:var(--ink);padding:8px 10px 0;font-size:12px;font-weight:700}
#bmf-root .fab-price{padding:2px 10px 10px;font-size:10.5px}#bmf-root .fab-price{color:var(--gold);font-family:var(--M)}
#bmf-root .mockup-header{color:var(--ink);font-family:var(--D);font-size:18px}
#bmf-root #mockupSvg{background:var(--paper);border-radius:10px}
#bmf-root #sketchPanel{border:1px solid rgba(226,194,117,.35)!important;background:var(--surface-warm)!important;box-shadow:var(--shadow2)!important}
#bmf-root #sketchSvgHost{background:var(--paper)!important;border:6px double rgba(226,194,117,.55);border-radius:6px!important;padding:10px!important}

/* ─────────────── Projects / upload ─────────────── */
#bmf-root #uploadZone{background:var(--surface-2);border:2px dashed var(--border-2);color:var(--ink-3)}
#bmf-root #uploadZone:hover,#bmf-root #uploadZone.drag{border-color:var(--accent);background:var(--accent-soft)}
#bmf-root .proj-item{background:var(--surface-2);border:1px solid var(--border);color:var(--ink-2)}
#bmf-root .proj-item:hover,#bmf-root .proj-item.active{border-color:var(--accent-2)}
#bmf-root .proj-name{color:var(--ink)}#bmf-root .proj-meta{color:var(--ink-4)}
#bmf-root .upload-hero-title,#bmf-root .project-section-title{font-family:var(--D);color:var(--ink)}

/* ─────────────── Print modal, toast ─────────────── */
#bmf-root #printModal{background:rgba(5,4,8,.78);backdrop-filter:blur(10px)}
#bmf-root .pm-box{background:var(--surface);border:1px solid var(--border-2);border-radius:var(--r);box-shadow:var(--shadow3);color:var(--ink-2)}
#bmf-root .pm-title{font-family:var(--D);color:var(--ink)}
#bmf-root .pm-panel{background:var(--surface-2);border:1px solid var(--border)}
#bmf-root #toast{background:var(--ink);color:var(--bg);font-weight:700;border-radius:var(--r3);box-shadow:var(--shadow2)}

/* ─────────────── Sticky Back / Next bar ─────────────── */
#bmfNavBar{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:10px;padding:8px 8px 8px 18px;background:rgba(23,20,31,.86);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);border:1px solid var(--border-2);border-radius:var(--r3);box-shadow:var(--shadow3);max-width:calc(100vw - 24px)}
#bmfNavBar button{border:0;border-radius:var(--r3);padding:11px 18px;font-weight:700;font-size:13px;cursor:pointer;transition:var(--transition);font-family:var(--B)}
#bmfNavBar button:first-child{background:var(--surface-3);color:var(--ink-2);border:1px solid var(--border-2)}
#bmfNavBar button:last-child{background:var(--accent);color:#fff;box-shadow:0 8px 22px rgba(255,45,135,.35)}
#bmfNavBar button[style*="--ok"]{color:#121407!important;box-shadow:0 8px 22px rgba(199,245,90,.35)}
#bmf-root .btn-next[style*="--ok"],#bmf-root button[style*="background:var(--ok)"]{color:#121407!important}
#bmfPageLabel{font-family:var(--M);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40vw}

/* ─────────────── Footer ─────────────── */
.ps-foot{margin:60px auto 0;padding:26px 0 0;border-top:1px solid var(--border);display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:space-between;align-items:center;color:var(--ink-4);font-size:12px}
.ps-foot a{color:var(--ink-3);text-decoration:none}.ps-foot a:hover{color:var(--ink)}
.ps-foot .ps-brand-word{font-size:16px}

/* ─────────────── Legacy inline-style neutralisers ─────────────── */
#bmf-root [style*="color:#fff"]{color:#fff}
#bmf-root .pg-header button,#bmf-root .bpage>div>button{font-family:var(--B)}

/* ─────────────── Responsive ─────────────── */
@media(max-width:820px){.ps-hero{grid-template-columns:1fr;text-align:center}.ps-hero .ps-stats,.ps-links{justify-content:center}.ps-3d{height:300px;order:-1;margin-top:-10px}}
@media(max-width:640px){
  .ps-brand-by{display:none}
  .ps-3d{height:240px}
  .ps-hero{padding:26px 4px 18px}
  .ps-stats{gap:6px 16px;font-size:10.5px}
  #bmf-root #bmf-tabs{margin:0 -4px 16px;border-radius:16px;padding:8px}
  #bmf-root .btab{padding:9px 12px;font-size:12px}
  #bmf-root #bgrid{grid-template-columns:repeat(auto-fill,minmax(124px,1fr));gap:9px}
  #bmf-root .gc{padding:14px 8px 12px}
  #bmf-root .gc-ico{width:54px;height:54px}
  #bmfNavBar{bottom:10px;padding:6px 6px 6px 12px;gap:6px}
  #bmfPageLabel{max-width:34vw;font-size:10px}
  #bmf-root{padding-bottom:96px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ─────────────── Accounts, pricing, projects ─────────────── */
#psAcct{display:flex;gap:8px;align-items:center}
.ps-pro-btn{background:var(--grad);color:#fff;border:0;border-radius:var(--r3);padding:9px 14px;font-family:var(--M);font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;cursor:pointer;box-shadow:0 8px 22px rgba(255,45,135,.3)}
.ps-user{position:relative}
.ps-avatar{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--grad);color:#fff;font-weight:800;font-size:11px}
.ps-plan{font-family:var(--M);font-size:10px;letter-spacing:.08em}
.ps-plan.pro{color:var(--gold)}
.ps-menu{display:none;position:absolute;right:0;top:calc(100% + 8px);min-width:230px;background:var(--surface);border:1px solid var(--border-2);border-radius:var(--r);box-shadow:var(--shadow3);padding:6px;z-index:80}
.ps-menu.open{display:block}
.ps-menu-mail{font-size:11px;color:var(--ink-4);padding:8px 10px;border-bottom:1px solid var(--border);margin-bottom:4px;word-break:break-all}
.ps-menu button,.ps-menu a{display:block;width:100%;text-align:left;background:none;border:0;color:var(--ink-2);padding:9px 10px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;text-decoration:none;font-family:var(--B)}
.ps-menu button:hover,.ps-menu a:hover{background:var(--surface-2);color:#fff}
.ps-menu button.hot{color:var(--accent)}
.ps-modal{position:fixed;inset:0;z-index:99998;background:rgba(5,4,8,.78);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;padding:20px}
.ps-modal-box{position:relative;background:var(--surface);border:1px solid var(--border-2);border-radius:18px;box-shadow:var(--shadow3);padding:28px;max-width:440px;width:100%;color:var(--ink-2)}
.ps-modal-x{position:absolute;top:10px;right:12px;background:none;border:0;color:var(--ink-4);font-size:24px;cursor:pointer}
.ps-modal-eyebrow{font-family:var(--M);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.ps-modal-box h3{font-family:var(--D);font-size:28px;font-weight:600;color:var(--ink);margin:0 0 10px;line-height:1.1}
.ps-modal-box h3 em{font-style:italic;font-weight:400;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.ps-modal-box p{font-size:13.5px;line-height:1.6;color:var(--ink-3);margin:0 0 16px}
.ps-modal-box form{display:grid;gap:10px}
.ps-modal-box .btn-next{padding:14px 18px}
.ps-note{font-size:12px;color:var(--ink-3);margin-top:12px;line-height:1.5}
.ps-perks{list-style:none;padding:0;margin:0 0 18px;display:grid;gap:9px}
.ps-perks li{padding-left:24px;position:relative;font-size:13.5px;color:var(--ink-2);line-height:1.45}
.ps-perks li::before{content:'✦';position:absolute;left:0;color:var(--accent)}
.ps-cta{width:100%;font-family:var(--D);font-style:italic;font-size:20px}
.ps-proj-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px;font-size:12.5px;color:var(--ink-3)}
.ps-proj-head a{color:var(--accent-2)}
.ps-proj-head .btn-next{padding:10px 16px;font-size:13px}
.ps-proj-empty{text-align:center;padding:44px 20px;background:var(--surface);border:1px dashed var(--border-2);border-radius:var(--r)}
.ps-proj-empty-ico{font-size:34px;color:var(--gold);margin-bottom:8px}
.ps-proj-empty b{display:block;font-family:var(--D);font-size:22px;color:var(--ink);margin-bottom:6px}
.ps-proj-empty p{color:var(--ink-3);font-size:13px;max-width:420px;margin:0 auto 16px}
.ps-proj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.ps-proj{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;cursor:pointer;transition:var(--transition)}
.ps-proj:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:var(--glow)}
.ps-proj img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover}
.ps-proj-ph{aspect-ratio:3/4;display:grid;place-items:center;background:var(--surface-2)}
.ps-proj-ph svg{width:70px;height:70px}
.ps-proj-body{padding:12px 14px 14px}
.ps-proj-name{font-family:var(--D);font-size:16px;font-weight:600;color:var(--ink);line-height:1.2}
.ps-proj-meta{font-family:var(--M);font-size:10.5px;letter-spacing:.04em;color:var(--ink-4);margin-top:4px}
.ps-proj-del{position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:50%;border:0;background:rgba(11,10,16,.7);color:#fff;font-size:18px;line-height:1;cursor:pointer;opacity:0;transition:var(--transition)}
.ps-proj:hover .ps-proj-del{opacity:1}
@media(max-width:640px){.ps-pro-btn{display:none}}