@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=DM+Serif+Display&family=Playfair+Display&family=Montserrat:wght@400;600&family=Poppins:wght@400;600&family=Libre+Baskerville&family=Caveat:wght@400;600&display=swap');
*{box-sizing:border-box;margin:0;padding:0}body{font-family:'DM Sans',system-ui,sans-serif;color:#1e3448}.header{padding:28px 32px 20px;background:linear-gradient(180deg,#ccdee8 0%,#dce8f0 100%)}.header h1{font-family:'DM Serif Display',serif;font-size:32px;font-weight:400;color:#1e3448;margin-bottom:4px}.header p{font-size:14px;color:#5a7a90}.divider{height:1px;background:#b8ceda;margin:0 0 20px}.container{padding:0 20px 40px}.tab-bar{display:grid;grid-template-columns:1fr 1fr 1fr;background:#c8dde8;border-radius:16px;padding:6px;margin-bottom:20px;gap:4px}.tab-btn{padding:12px;border:none;border-radius:12px;font-family:'DM Sans',sans-serif;font-size:15px;font-weight:500;cursor:pointer;background:transparent;color:#6a90a8;transition:all 0.2s}.tab-btn.active{background:#fff;color:#1e3448;box-shadow:0 2px 8px rgba(0,0,0,0.08)}.card{background:#fff;border-radius:16px;padding:20px;margin-bottom:16px}.upload-zone{border:2px dashed #a8c4d4;border-radius:14px;padding:32px 20px;text-align:center;background:#f5fafd;transition:all 0.2s;position:relative;cursor:pointer}.upload-zone:hover,.upload-zone.drag-over{border-color:#4a7a9b;background:#eaf4f9}.upload-zone h3{font-size:17px;font-weight:600;color:#1e3448;margin-bottom:6px}.upload-zone p{font-size:13px;color:#7a9ab0}.upload-zone input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}.scale-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.pattern-thumb{width:64px;height:64px;border-radius:10px;border:1px solid #d0e4ef;flex-shrink:0;background:#f0f7fb}.scale-info{flex:1;min-width:160px}.scale-label{font-size:15px;font-weight:600;color:#1e3448;margin-bottom:8px}.slider-row{display:flex;align-items:center;gap:10px}.slider-row input[type=range]{flex:1;accent-color:#2d5a7a;cursor:pointer}.scale-num-wrap{display:flex;align-items:center;gap:4px;border:1.5px solid #d0e0ea;border-radius:10px;padding:6px 10px}.scale-num-wrap input{width:44px;border:none;font-size:14px;font-weight:600;color:#1e3448;text-align:center;outline:none;font-family:'DM Sans',sans-serif}.scale-num-wrap span{font-size:13px;color:#7a9ab0}.btn-change{padding:10px 20px;border-radius:10px;border:1.5px solid #d0e0ea;background:#fff;font-family:'DM Sans',sans-serif;font-size:14px;font-weight:500;color:#1e3448;cursor:pointer;position:relative;flex-shrink:0;overflow:hidden}.btn-change input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}.btn-dl{padding:10px 20px;border-radius:10px;border:none;background:#dfe9f2;color:#1e3448;font-family:'DM Sans',sans-serif;font-size:14px;font-weight:600;cursor:pointer;flex-shrink:0}.btn-dl:hover{background:#cfdde9}.hint-text{text-align:center;font-size:13px;color:#7a9ab0;font-style:italic;margin-bottom:12px}.mockup-wrap{border-radius:16px;overflow:hidden;cursor:grab;user-select:none}.mockup-wrap:active{cursor:grabbing}.mockup-wrap canvas{display:block;width:100%;height:auto}.pin-sub-tabs{display:flex;gap:8px;margin-bottom:16px}.pin-sub-btn{padding:10px 20px;border-radius:10px;border:1.5px solid #d0e0ea;background:#fff;font-family:'DM Sans',sans-serif;font-size:14px;font-weight:500;color:#6a90a8;cursor:pointer}.pin-sub-btn.active{background:#dfe9f2;color:#1e3448;border-color:#dfe9f2}.pin-layout{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}.pin-controls{display:flex;flex-direction:column;gap:14px}.field-label{font-size:13px;font-weight:600;color:#1e3448;margin-bottom:6px}.text-input{width:100%;padding:10px 14px;border:1.5px solid #d0e0ea;border-radius:10px;font-family:'DM Sans',sans-serif;font-size:14px;color:#1e3448;outline:none;background:#fff}.text-input:focus{border-color:#4a7a9b}.font-options{display:flex;gap:6px;flex-wrap:wrap}.font-btn{padding:7px 12px;border-radius:8px;border:1.5px solid #d0e0ea;background:#fff;cursor:pointer;font-size:12px;color:#4a6a80;transition:all 0.15s}.font-btn.active{background:#dfe9f2;color:#1e3448;border-color:#dfe9f2}.toggle-row{display:grid;grid-template-columns:1fr 1fr;gap:6px}.toggle-row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}.toggle-btn{padding:10px;border-radius:10px;border:1.5px solid #d0e0ea;background:#fff;font-family:'DM Sans',sans-serif;font-size:13px;font-weight:500;color:#6a90a8;cursor:pointer;text-align:center;transition:all 0.15s}.toggle-btn.active{background:#dfe9f2;color:#1e3448;border-color:#dfe9f2}.color-swatches{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.swatch{width:30px;height:30px;border-radius:8px;cursor:pointer;border:2px solid transparent;flex-shrink:0;transition:all 0.15s}.swatch.active{border-color:#1e3448;transform:scale(1.1)}.swatch-custom{width:30px;height:30px;border-radius:8px;border:1.5px solid #d0e0ea;overflow:hidden;flex-shrink:0;position:relative;background:#fff}.swatch-custom.rainbow{background:linear-gradient(135deg,#ff4d4d,#ffb84d,#ffe44d,#4dff88,#4dd2ff,#7a5cff,#ff66cc)}.swatch-custom .picker-icon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}.swatch-custom .picker-icon::before{content:'';width:18px;height:18px;border-radius:4px;background:conic-gradient(#ff4d4d,#ff9f1a,#ffe14d,#57d957,#33d1ff,#596dff,#b05cff,#ff66c4,#ff4d4d);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.65)}.swatch-custom input[type=color]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:none;background:transparent;-webkit-appearance:none;appearance:none}.swatch-custom input[type=color]::-webkit-color-swatch-wrapper{padding:0}.swatch-custom input[type=color]::-webkit-color-swatch{border:none;border-radius:0;background:transparent}.swatch-custom input[type=color]::-moz-color-swatch{border:none;background:transparent}.hex-input{padding:7px 10px;border:1.5px solid #d0e0ea;border-radius:8px;font-family:'DM Sans',sans-serif;font-size:12px;color:#1e3448;width:82px;outline:none}.slider-full{width:100%;accent-color:#2d5a7a;cursor:pointer}.add-logo-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:10px;border:1.5px solid #d0e0ea;background:#fff;font-family:'DM Sans',sans-serif;font-size:14px;font-weight:500;color:#1e3448;cursor:pointer;position:relative;overflow:hidden}.add-logo-btn input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}.logo-small{width:36px;height:36px;border-radius:6px;object-fit:contain;border:1px solid #d0e0ea;display:none}.btn-dl-full{width:100%;padding:14px;border-radius:12px;border:none;background:#dfe9f2;color:#1e3448;font-family:'DM Sans',sans-serif;font-size:15px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:background 0.2s}.btn-dl-full:hover{background:#cfdde9}.pin-preview-col{display:flex;flex-direction:column;align-items:center;gap:8px}.pin-preview-col canvas{border-radius:12px;box-shadow:0 4px 16px rgba(0,0,0,0.12);cursor:grab;display:block;width:100%;height:auto;aspect-ratio:2/3;max-width:100%}.pin-preview-col canvas:active{cursor:grabbing}.pin-tab-shell{display:grid;grid-template-columns:minmax(340px,440px) minmax(0,1fr);gap:20px;align-items:start}.pin-settings-stack{display:flex;flex-direction:column;gap:16px;align-self:start;min-width:0}.pin-controls-shell{background:#fff;border:1px solid #dbe7ef;border-radius:16px;padding:0;overflow:hidden}.pin-controls-header{padding:16px 20px;border-bottom:1px solid #e7f0f5;font-size:14px;font-weight:600;color:#1e3448;background:#f8fbfd}.pin-controls{max-height:68vh;overflow-y:auto;padding:20px;scrollbar-width:thin;scrollbar-color:#b8ceda #f5fafd;display:flex;flex-direction:column;gap:14px}.logo-controls{display:flex;flex-direction:column;gap:14px}.pin-controls::-webkit-scrollbar{width:10px}.pin-controls::-webkit-scrollbar-track{background:#f5fafd;border-radius:999px}.pin-controls::-webkit-scrollbar-thumb{background:#b8ceda;border-radius:999px;border:2px solid #f5fafd}.pin-preview-col{position:sticky;top:20px;align-self:start}.ig-preview-wrap{display:flex;justify-content:center;margin-bottom:16px}.ig-preview-wrap canvas{border-radius:16px;box-shadow:0 4px 20px rgba(0,0,0,0.12);cursor:grab;display:block;width:320px !important;height:400px !important;aspect-ratio:4/5;background:#fff}.ig-preview-wrap canvas:active{cursor:grabbing}@media(max-width:900px){.pin-tab-shell{grid-template-columns:1fr}.pin-preview-col{position:static}.pin-controls{max-height:none;overflow:visible;padding:20px}.pin-controls-shell{overflow:visible}}@media(max-width:600px){.pin-layout{grid-template-columns:1fr}.header{padding:20px}.header h1{font-size:24px}}#pattern-mockup-app{max-width:1200px;margin:40px auto !important;display:block !important;visibility:visible !important}#pattern-mockup-app .tab-bar{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:4px !important;align-items:stretch !important}#pattern-mockup-app .tab-bar .tab-btn{display:block !important;width:100% !important;appearance:none !important;-webkit-appearance:none !important}#pattern-mockup-app .pin-sub-tabs{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr)) !important}#pattern-mockup-app input[type=color]{appearance:auto !important;-webkit-appearance:auto !important;background:none !important;padding:0 !important;border:none !important}.logo-controls{display:grid;grid-template-columns:1fr 1fr;gap:10px}.text-format-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.range-caption{display:flex;justify-content:space-between;font-size:12px;color:#7a9ab0;margin-top:4px}.mini-note{font-size:12px;color:#7a9ab0;margin-top:6px}.drop-active{outline:3px dashed #7aa0b9;outline-offset:6px;border-radius:18px}.logo-controls .full{grid-column:1 / -1}.control-help{font-size:12px;color:#7a9ab0;margin-top:4px}.rainbow{background:conic-gradient(#ff4d4d,#ff9f1a,#ffe14d,#57d957,#33d1ff,#596dff,#b05cff,#ff66c4,#ff4d4d)}textarea.text-input{min-height:92px;resize:vertical;line-height:1.4}.align-btn{display:flex;align-items:center;justify-content:center;min-height:42px}.align-icon{display:inline-flex;flex-direction:column;gap:4px;width:20px}.align-icon i{display:block;height:2px;border-radius:2px;background:currentColor}.align-left i:nth-child(1){width:16px}.align-left i:nth-child(2){width:12px}.align-left i:nth-child(3){width:16px}.align-center{align-items:center}.align-center i:nth-child(1){width:16px}.align-center i:nth-child(2){width:12px}.align-center i:nth-child(3){width:16px}.align-right{align-items:flex-end}.align-right i:nth-child(1){width:16px}.align-right i:nth-child(2){width:12px}.align-right i:nth-child(3){width:16px}@media(max-width:700px){.logo-controls{grid-template-columns:1fr}}.mockup-grid{display:grid;grid-template-columns:minmax(260px,320px) minmax(0,1fr);gap:20px;align-items:start}.mockup-left-col,.mockup-right-col{min-width:0}.upload-card-side,.mockup-left-col #scale-card{margin-bottom:16px}.upload-card-side .upload-zone{min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center}.mockup-wrap canvas{display:block;width:100%;max-width:760px;height:auto;margin:0 auto}.swap-zone{display:flex;align-items:center;justify-content:center;text-align:center;min-height:140px;border:2px dashed #a8c4d4;border-radius:14px;background:#f5fafd;color:#5a7a90;padding:20px;cursor:pointer;position:relative;font-size:14px;line-height:1.5;margin-top:16px}.swap-zone:hover,.swap-zone.drag-over{border-color:#4a7a9b;background:#eaf4f9}.swap-zone input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}@media(max-width:900px){.mockup-grid{grid-template-columns:1fr}.upload-card-side .upload-zone{min-height:160px}}#mockup-canvas,#pin-canvas,#ig-canvas{touch-action:none;-ms-touch-action:none}.mockup-wrap,.pin-preview-col,.ig-preview-wrap{touch-action:none;-ms-touch-action:none}.pin-tab-shell{display:grid;grid-template-columns:minmax(0,1fr) clamp(220px,30vw,340px) !important;gap:20px;align-items:start}.pin-settings-stack{min-width:0}.pin-preview-col{min-width:0;width:100%;max-width:clamp(220px,30vw,340px) !important;justify-self:end;position:sticky;top:20px}.pin-preview-col canvas{width:100% !important;height:auto !important;aspect-ratio:2/3;max-width:100% !important;display:block}@media (max-width:1200px){.pin-tab-shell{grid-template-columns:minmax(0,1fr) clamp(200px,28vw,300px) !important}.pin-preview-col{max-width:clamp(200px,28vw,300px) !important}}@media (max-width:1024px){.pin-tab-shell{grid-template-columns:minmax(0,1fr) clamp(180px,26vw,260px) !important}.pin-preview-col{max-width:clamp(180px,26vw,260px) !important}}@media (max-width:900px){.pin-tab-shell{grid-template-columns:1fr !important}.pin-preview-col{position:static;top:auto;justify-self:center;width:min(100%,340px);max-width:min(100%,340px) !important}}
/* --- MMM extra controls + fit-to-view mockup --- */
.mm-extra{margin-top:6px}
.halfdrop-row{display:flex;align-items:center;gap:8px;font-size:14px;margin:8px 0;cursor:pointer;user-select:none}
.halfdrop-row input{width:16px;height:16px;margin:0;cursor:pointer}
.dl-options{margin:8px 0 4px}
.dl-row-2{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.dl-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}
.dl-info{font-size:12px;color:#7a9ab0;margin-top:8px;line-height:1.4}
.mockup-wrap canvas{width:auto;max-width:100%;max-height:78vh;height:auto;margin:0 auto}
/* Instagram two-column preview (matches Pinterest layout) */
.ig-preview-col{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0;width:100%;justify-self:end;position:sticky;top:20px}
.ig-preview-col .ig-preview-wrap{margin-bottom:0;width:100%}
.ig-preview-col .ig-preview-wrap canvas{width:100% !important;height:auto !important;aspect-ratio:4/5;max-width:100% !important}
@media(max-width:900px){.ig-preview-col{position:static;justify-self:center;width:min(100%,360px)}}
/* ---- Responsive: keep controls + preview side-by-side, shrink before stacking ---- */
@media (max-width:900px){.mockup-grid{grid-template-columns:minmax(205px,280px) minmax(0,1fr) !important;gap:16px}.pin-tab-shell{grid-template-columns:minmax(0,1fr) clamp(180px,32vw,300px) !important;gap:16px}.pin-preview-col{position:sticky;top:12px;justify-self:end;max-width:none !important;width:100%}.ig-preview-col{position:sticky;top:12px;justify-self:end;width:100%}.pin-controls{max-height:82vh;overflow-y:auto}}
@media (max-width:680px){.mockup-grid{grid-template-columns:minmax(160px,220px) minmax(0,1fr) !important;gap:12px}.pin-tab-shell{grid-template-columns:minmax(0,1fr) clamp(150px,34vw,230px) !important;gap:12px}#pattern-mockup-app{font-size:13px}}
@media (max-width:540px){.mockup-grid{grid-template-columns:1fr !important}.pin-tab-shell{grid-template-columns:1fr !important}.pin-preview-col,.ig-preview-col{position:static;justify-self:center;width:min(100%,360px);max-width:min(100%,360px) !important}}
/* Rotate prompt - toggled by JS on REAL device orientation (iframe-safe); always dismissible */
#mmm-rotate{display:none}
#mmm-rotate.show{display:flex;position:fixed;inset:0;z-index:99999;background:#eef5fb;color:#1e3448;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:32px;gap:14px;font-family:'DM Sans',sans-serif}
#mmm-rotate .mmm-rot-icon{font-size:46px;line-height:1}
#mmm-rotate p{margin:0;font-size:17px;font-weight:600;max-width:340px}
#mmm-rotate span{font-size:14px;color:#5a7286;max-width:340px}
#mmm-rotate .mmm-rot-btn{margin-top:6px;padding:10px 22px;border:1.5px solid #b8ceda;background:#fff;color:#1e3448;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;font-family:'DM Sans',sans-serif}
/* iOS: never darken buttons on tap, and don't let :hover stick on touch */
#pattern-mockup-app button,#pattern-mockup-app .btn-change,#pattern-mockup-app .dz-up,#pattern-mockup-app .swap-zone{-webkit-tap-highlight-color:transparent}
@media(hover:none){#pattern-mockup-app .btn-dl:hover,#pattern-mockup-app .btn-dl-full:hover{background:#dfe9f2}}
/* per-zone (drape) upload panel */
.dz-panel{padding:14px;margin-bottom:16px}
.dz-title{font-size:14px;font-weight:600;color:#1e3448;margin-bottom:12px}
.dz-row{margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid #eef4f8}
.dz-row-top{display:flex;align-items:center;gap:10px}
.dz-paste{display:none;margin-top:8px;padding:9px 12px;border-radius:8px;border:2px dashed #a8c4d4;color:#7a9ab0;font-size:12px;text-align:center;outline:none;-webkit-user-select:text;user-select:text;cursor:text;-webkit-tap-highlight-color:transparent}
@media(pointer:coarse){.dz-paste{display:block}}
.dz-thumb{width:44px;height:44px;border-radius:8px;border:1px solid #d0e0ea;background:#f6fafc;flex:none}
.dz-info{flex:1;min-width:0}
.dz-name{font-size:13px;font-weight:600;color:#2d3f56;margin-bottom:5px}
.dz-scale{width:100%;margin:0}
.dz-up{position:relative;overflow:hidden;display:inline-block;padding:8px 14px;border:1.5px solid #d0e0ea;border-radius:8px;font-size:13px;font-weight:600;color:#2d3f56;cursor:pointer;background:#fff;flex:none}
.dz-up input{position:absolute;inset:0;opacity:0;cursor:pointer}
.dz-note{font-size:12px;color:#7a9ab0;line-height:1.4;margin-top:4px}