@import "https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:wght@300;400;500;600;700;800&family=Oswald:wght@300;400;500;600;700&family=Outfit:wght@300;400;500;600;700;800&family=Playfair+Display:wght@400;500;600;700&family=Poppins:wght@300;400;500;600;700;800&display=swap";*,:before,:after{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{font-family:Segoe UI,Inter,Helvetica Neue,Arial,sans-serif;line-height:1.4}button,input{font:inherit}.top-nav{background-color:var(--panel-bg);border-bottom:1px solid var(--border-color);z-index:100;flex-shrink:0;justify-content:space-between;align-items:center;height:70px;padding:0 40px;display:flex}.nav-brand{align-items:center;line-height:0;text-decoration:none;transition:opacity .2s;display:flex}.nav-brand:hover{opacity:.8}.nav-brand-logo{width:auto;height:34px;display:block}.nav-actions{align-items:center;gap:20px;height:100%;display:flex}.manager-link{color:var(--text-secondary);border-radius:var(--radius-sm);background:var(--bg-color);border:1px solid var(--border-color);padding:8px 16px;font-size:14px;font-weight:600;text-decoration:none;transition:all .2s}.manager-link:hover{background:var(--panel-bg-hover);color:var(--text-primary);border-color:var(--text-secondary)}.landing-page-wrapper{background:#fff;min-height:100vh}.hero-section{background:radial-gradient(circle at 100% 0,#f8fafc 0%,#fff 50%);justify-content:center;padding:120px 40px;display:flex;position:relative;overflow:hidden}.hero-content{grid-template-columns:1fr 1.2fr;align-items:center;gap:80px;width:100%;max-width:1300px;display:grid}.hero-title{letter-spacing:-4px;color:var(--text-primary);flex-direction:column;margin-bottom:32px;font-size:84px;font-weight:900;line-height:1;display:flex}.reveal-word{height:1.1em;display:block;overflow:hidden}.reveal-word:after{content:attr(data-text);display:block}.hero-title span{animation:.8s cubic-bezier(.16,1,.3,1) both revealUp}.hero-title span:nth-child(2){animation-delay:.1s}.hero-title span:nth-child(3){animation-delay:.2s}@keyframes revealUp{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}.hero-subtitle{color:var(--text-secondary);max-width:500px;margin-bottom:48px;font-size:20px;line-height:1.6;animation:1s .4s both fadeIn}.hero-actions{gap:20px;animation:1s .6s both fadeIn;display:flex}.hero-visual-area{position:relative}.floating-mockup-card{background:#fff;border:1px solid #fffc;border-radius:32px;padding:20px;animation:6s ease-in-out infinite float;position:relative;box-shadow:0 50px 100px -20px #00000026}@keyframes float{0%,to{transform:translateY(0)rotate(0)}50%{transform:translateY(-20px)rotate(1deg)}}.hero-main-img{border-radius:20px;width:100%;display:block}.status-badge{color:#fff;background:#10b981;border-radius:99px;padding:8px 16px;font-size:12px;font-weight:700;position:absolute;top:40px;right:-20px;box-shadow:0 10px 20px #10b9814d}.status-badge.animated{animation:2s infinite pulse}@keyframes pulse{0%{transform:scale(1);box-shadow:0 0 #10b98166}70%{transform:scale(1.05);box-shadow:0 0 0 15px #10b98100}to{transform:scale(1);box-shadow:0 0 #10b98100}}.features-grid-section{text-align:center;background:#f8fafc;padding:120px 40px}.section-intro{margin-bottom:80px}.badge-text{text-transform:uppercase;color:var(--accent-color);letter-spacing:2px;margin-bottom:16px;font-size:12px;font-weight:800;display:block}.section-heading{letter-spacing:-1.5px;font-size:48px;font-weight:800}.features-container{grid-template-columns:repeat(3,1fr);gap:40px;max-width:1200px;margin:0 auto;display:grid}.feature-card{text-align:left;background:#fff;border:1px solid #e2e8f0;border-radius:24px;padding:48px;transition:all .3s}.feature-card:hover{border-color:var(--accent-color);transform:translateY(-10px);box-shadow:0 20px 40px #0000000d}.feature-icon{margin-bottom:24px;font-size:32px}.feature-card h3{margin-bottom:16px;font-size:20px;font-weight:700}.feature-card p{color:var(--text-secondary);line-height:1.6}.management-showcase{justify-content:center;padding:120px 40px;display:flex}.showcase-content{grid-template-columns:1.2fr 1fr;align-items:center;gap:100px;max-width:1200px;display:grid}.mockup-stack{height:500px;position:relative}.stack-img-1,.stack-img-2{border:4px solid #fff;border-radius:24px;width:80%;position:absolute;box-shadow:0 30px 60px #0000001a}.stack-img-1{z-index:2;top:0;left:0}.stack-img-2{z-index:1;opacity:.5;bottom:0;right:0;transform:scale(.9)rotate(-5deg)}.showcase-title{margin-bottom:24px;font-size:40px;font-weight:800}.check-list{margin:32px 0;padding:0;list-style:none}.check-list li{color:#10b981;align-items:center;gap:12px;margin-bottom:16px;font-weight:600;display:flex}.text-link-btn{color:var(--accent-color);cursor:pointer;background:0 0;border:none;padding:0;font-size:16px;font-weight:700}.landing-footer{background:var(--text-primary);color:#fff;text-align:center;padding:120px 40px}.footer-content h2{margin-bottom:40px;font-size:48px}.large-cta{padding:20px 48px;font-size:20px}.copyright{opacity:.5;margin-top:60px;font-size:14px}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.manager-layout{background:#f8fafc;grid-template-columns:280px minmax(0,1fr);width:100%;min-height:100%;display:grid;overflow:hidden}.manager-sidebar{background:#fff;border-right:1px solid #e2e8f0;flex-direction:column;gap:18px;height:calc(100vh - 70px);padding:22px;display:flex;position:sticky;top:0;overflow-y:auto}.manager-sidebar-brand{border-bottom:1px solid #eef2f7;align-items:center;gap:12px;padding-bottom:16px;display:flex}.manager-brand-mark{color:#fff;background:#0f766e;border-radius:12px;justify-content:center;align-items:center;width:40px;height:40px;font-size:18px;font-weight:950;display:inline-flex}.manager-sidebar-brand div,.manager-user-card{flex-direction:column;display:flex}.manager-sidebar-brand span,.manager-user-card span,.manager-sidebar-label{color:#64748b;letter-spacing:.08em;text-transform:uppercase;font-size:11px;font-weight:900}.manager-sidebar-brand strong,.manager-user-card strong{color:#0f172a;font-size:17px;font-weight:950}.manager-user-card{background:#eff6ff;border:1px solid #dbeafe;border-radius:14px;gap:4px;padding:14px}.manager-sidebar-nav,.manager-sidebar-jobs{flex-direction:column;gap:9px;display:flex}.manager-sidebar-label{margin-top:4px}.manager-nav-button,.manager-job-button,.manager-logout-button{text-align:left;width:100%}.manager-nav-button{color:#0f172a;background:#fff;border:1px solid #e2e8f0;border-radius:12px;flex-direction:column;gap:2px;padding:12px 13px;display:flex}.manager-nav-button strong{font-size:13px;font-weight:950}.manager-nav-button small{color:#64748b;font-size:11px;font-weight:700}.manager-nav-button:hover,.manager-nav-button.active{background:#f0fdfa;border-color:#0f766e}.manager-nav-button.accent-orange:hover,.manager-nav-button.accent-orange.active{background:#fff7ed;border-color:#fb923c}.manager-nav-button.accent-teal:hover,.manager-nav-button.accent-teal.active{background:#f0fdfa;border-color:#14b8a6}.manager-job-button{color:#334155;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;min-height:36px;padding:0 12px;font-size:12px;font-weight:850}.manager-job-button.active,.manager-job-button:hover{color:#fff;background:#0f172a;border-color:#0f172a}.manager-logout-button{color:#be123c;text-align:center;background:#fff1f2;border:1px solid #fecdd3;border-radius:12px;min-height:42px;margin-top:auto;padding:0 14px;font-size:13px;font-weight:950}.manager-logout-button:hover{color:#fff;background:#be123c}.manager-main-panel{min-width:0;padding:28px;overflow:hidden auto}.manager-hero{background:#fff;border:1px solid #e2e8f0;border-radius:18px;justify-content:space-between;align-items:flex-end;gap:24px;padding:24px;display:flex;box-shadow:0 18px 44px #0f172a0f}.manager-hero>div:first-child{max-width:720px}.manager-hero span{color:#0f766e;letter-spacing:.12em;text-transform:uppercase;font-size:11px;font-weight:950}.manager-hero h1{color:#0f172a;letter-spacing:0;margin:4px 0 8px;font-size:32px;font-weight:950}.manager-hero p{color:#64748b;margin:0;font-size:14px;font-weight:650;line-height:1.5}.manager-stat-strip{grid-template-columns:repeat(3,92px);gap:10px;display:grid}.manager-stat-strip div{text-align:center;background:#f8fafc;border:1px solid #e2e8f0;border-radius:14px;padding:12px}.manager-stat-strip strong{color:#0f172a;font-size:22px;font-weight:950;display:block}.manager-stat-strip span{color:#64748b;font-size:10px}.manager-view{flex-direction:column;gap:28px;padding:28px 0 60px;display:flex}.create-form{border-radius:var(--radius-lg);border:1px solid var(--border-color);max-width:760px;box-shadow:var(--shadow-md);background:#fff;flex-direction:column;gap:24px;margin:0;padding:40px;display:flex}.create-form.aop-new-form{max-width:980px}.create-form label{color:var(--text-primary);flex-direction:column;gap:8px;font-size:14px;font-weight:700;display:flex}.create-form input[type=text]{border:1px solid var(--border-color);border-radius:var(--radius-sm);transition:var(--transition);padding:12px 16px;font-size:15px}.create-form input[type=text]:focus{border-color:var(--text-primary);outline:none;box-shadow:0 0 0 4px #0000000d}.create-form input[type=file]{border-radius:var(--radius-sm);cursor:pointer;background:#f8fafc;border:1px dashed #cbd5e1;padding:10px}.create-form .form-actions{gap:16px;margin-top:8px;display:flex}.create-form .form-actions .primary-button{flex:2;height:48px}.create-form .form-actions .secondary-button{flex:1;height:48px}.create-form .form-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;display:grid}.create-form .form-row.aop-product-row{grid-template-columns:repeat(3,minmax(0,1fr))}.form-error{color:#e11d48;border-radius:var(--radius-sm);background:#fff1f2;border:1px solid #ffe4e6;padding:10px;font-size:13px;font-weight:600}.designer-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:30px;width:100%;max-width:none;margin:0;display:grid}.designer-card{border-radius:var(--radius-lg);border:1px solid var(--border-color);transition:var(--transition);cursor:pointer;background:#fff;flex-direction:column;display:flex;position:relative;overflow:hidden}.designer-card:hover{box-shadow:var(--shadow-lg);border-color:var(--text-primary);transform:translateY(-8px)}.designer-card-preview{aspect-ratio:16/10;background:#f8fafc;justify-content:center;align-items:center;padding:20px;display:flex}.designer-card-preview img{object-fit:contain;mix-blend-mode:multiply;filter:drop-shadow(0 10px 20px #0000000d);max-width:100%;max-height:100%}.designer-card-info{border-top:1px solid var(--border-color);padding:24px}.designer-card-info h3{margin-bottom:8px;font-size:18px;font-weight:800}.card-actions{gap:12px;margin-top:16px;display:flex}.designer-select-btn{background:var(--text-primary);color:#fff;border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition);border:none;flex:1;padding:10px;font-size:13px;font-weight:700}.designer-select-btn:hover{background:#334155}.delete-product-btn{color:#e11d48;border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition);background:#fff1f2;border:1px solid #ffe4e6;padding:10px 16px;font-size:13px;font-weight:700}.delete-product-btn:hover{color:#fff;background:#e11d48;border-color:#e11d48}.create-product-actions{align-items:center;gap:10px;display:flex}.aop-create-btn{background:linear-gradient(135deg,#f97316 0%,#ea580c 100%)!important;border-color:#ea580c!important}.aop-create-btn:hover{background:linear-gradient(135deg,#ea580c 0%,#c2410c 100%)!important}.aop-create-btn.aop-active{background:linear-gradient(135deg,#c2410c 0%,#9a3412 100%)!important}.aop-new-create-btn{background:linear-gradient(135deg,#0f766e 0%,#115e59 100%)!important;border-color:#0f766e!important}.aop-new-create-btn:hover,.aop-new-create-btn.aop-new-active{background:linear-gradient(135deg,#115e59 0%,#134e4a 100%)!important}.product-type-badge{letter-spacing:.06em;text-transform:uppercase;border-radius:999px;align-items:center;padding:3px 10px;font-size:11px;font-weight:900;display:inline-flex}.product-type-badge.normal{color:#0369a1;background:#e0f2fe}.product-type-badge.aop{color:#c2410c;background:#ffedd5}.card-badge{position:absolute;top:10px;right:10px}.aop-card{border-color:#fed7aa}.aop-card:hover{border-color:#f97316}.aop-card-placeholder{color:#ea580c;flex-direction:column;align-items:center;gap:8px;font-size:13px;font-weight:700;display:flex}.aop-placeholder-icon{opacity:.5;font-size:40px;line-height:1}.create-form-header{border-bottom:1px solid var(--border-color);align-items:center;gap:12px;padding-bottom:12px;display:flex}.create-form-header p{color:var(--text-secondary);margin:0;font-size:13px}.form-hint{color:#16a34a;border-radius:var(--radius-sm);background:#f0fdf4;border:1px solid #bbf7d0;margin:0;padding:10px 14px;font-size:13px}.aop-parts-section{border-radius:var(--radius-md);background:linear-gradient(135deg,#f0fdfaeb,#fffffff5),radial-gradient(circle at 100% 0,#14b8a629,#0000 36%);border:1px solid #ccfbf1;flex-direction:column;gap:18px;padding:22px;display:flex}.aop-parts-header{justify-content:space-between;align-items:flex-start;gap:18px;display:flex}.aop-parts-header h3{color:#0f172a;margin:0 0 4px;font-size:17px;font-weight:900}.aop-parts-header p{color:#64748b;max-width:620px;margin:0;font-size:13px;line-height:1.45}.small-part-btn{color:#0f766e;border-color:#99f6e4;flex:none;padding:10px 14px}.aop-parts-list{flex-direction:column;gap:12px;display:flex}.aop-part-row{background:#ffffffe6;border:1px solid #dbeafe;border-radius:16px;grid-template-columns:42px minmax(160px,1fr) minmax(240px,1.3fr) auto;align-items:end;gap:14px;padding:14px;display:grid;box-shadow:0 10px 24px #0f172a0a}.aop-part-number{color:#fff;background:#0f766e;border-radius:999px;justify-content:center;align-self:center;align-items:center;width:34px;height:34px;font-size:13px;font-weight:900;display:inline-flex}.remove-part-btn{border-radius:var(--radius-sm);color:#e11d48;background:#fff1f2;border:1px solid #fecdd3;height:42px;padding:0 14px;font-size:12px;font-weight:800}.remove-part-btn:disabled{opacity:.45;cursor:not-allowed}@media (width<=900px){.manager-layout{grid-template-columns:1fr;overflow:auto}.manager-sidebar{border-bottom:1px solid #e2e8f0;border-right:none;height:auto;position:relative}.manager-main-panel{padding:18px}.manager-hero{flex-direction:column;align-items:stretch}.manager-stat-strip{grid-template-columns:repeat(3,minmax(0,1fr))}.create-form .form-row,.aop-part-row{grid-template-columns:1fr}.aop-part-number{align-self:flex-start}.aop-parts-header{flex-direction:column}}.template-upload-btn.active,.template-upload-btn:hover,.pattern-upload-btn.active,.pattern-upload-btn:hover,.logo-clipart-upload-btn.active,.logo-clipart-upload-btn:hover{color:#fff;background:#0f172a;border-color:#0f172a}.product-type-badge.template{color:#3730a3;background:#eef2ff}.product-type-badge.pattern{color:#047857;background:#ecfdf5}.product-type-badge.logo-clipart{color:#c2410c;background:#fff7ed}.template-upload-form{max-width:760px}.template-upload-success{color:#047857;border-radius:var(--radius-sm);background:#ecfdf5;border:1px solid #a7f3d0;padding:10px 12px;font-size:13px;font-weight:750}.manager-dialog-overlay{z-index:1200;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#0206178c;justify-content:center;align-items:center;padding:24px;display:flex;position:fixed;inset:0}.manager-dialog-card{width:min(760px,100%);max-height:calc(100vh - 48px);margin:0;overflow-y:auto}.aop-manager-shell{background:var(--bg-color);flex-direction:column;min-height:100vh;display:flex}.aop-manager-header{border-bottom:1px solid var(--border-color);z-index:100;background:#fff;justify-content:space-between;align-items:center;gap:16px;padding:16px 40px;display:flex;position:sticky;top:0;box-shadow:0 2px 10px #0000000a}.aop-header-left{align-items:center;gap:20px;display:flex}.aop-product-badge{color:#c2410c;letter-spacing:.06em;text-transform:uppercase;background:#ffedd5;border-radius:999px;margin-bottom:4px;padding:2px 10px;font-size:11px;font-weight:900;display:inline-block}.aop-product-title{color:var(--text-primary);margin:0;font-size:20px;font-weight:800}.aop-header-actions{align-items:center;gap:12px;display:flex}.save-msg{color:#16a34a;font-size:13px;font-weight:700}.aop-add-panel-form{background:#fff7ed;border-bottom:1px solid #fed7aa;padding:20px 40px}.aop-add-panel-form h3{color:#c2410c;text-transform:uppercase;letter-spacing:.06em;margin:0 0 14px;font-size:14px;font-weight:800}.aop-add-panel-row{align-items:flex-start;gap:16px;display:flex}.aop-add-panel-row label{color:var(--text-secondary);flex-direction:column;flex:1;gap:6px;font-size:12px;font-weight:700;display:flex}.aop-add-panel-row input,.aop-add-panel-row select{border:1px solid var(--border-color);border-radius:var(--radius-sm);background:#fff;padding:10px 12px;font-size:14px}.aop-panels-grid{grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:24px;padding:40px;display:grid}.aop-panel-card{border-radius:var(--radius-lg);border:1px solid var(--border-color);background:#fff;flex-direction:column;transition:box-shadow .2s,border-color .2s;display:flex;overflow:hidden}.aop-panel-card.editing{border-color:#f97316;box-shadow:0 0 0 3px #f9731626}.aop-panel-preview{aspect-ratio:3/4;background:#f8fafc;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.aop-panel-preview img{object-fit:contain;max-width:100%;max-height:100%}.aop-panel-empty-preview{color:#94a3b8;border:2px dashed #e2e8f0;border-radius:8px;justify-content:center;align-items:center;width:calc(100% - 40px);height:100%;margin:20px;font-size:13px;font-weight:600;display:flex}.aop-panel-key-badge{color:#fff;letter-spacing:.06em;text-transform:uppercase;background:#000000a6;border-radius:999px;padding:3px 8px;font-size:10px;font-weight:800;position:absolute;top:8px;left:8px}.aop-panel-info{flex-direction:column;flex:1;gap:12px;padding:20px;display:flex}.aop-panel-name{color:var(--text-primary);margin:0;font-size:16px;font-weight:800}.aop-panel-meta{color:var(--text-secondary);gap:14px;font-size:12px;font-weight:600;display:flex}.aop-panel-actions{flex-wrap:wrap;gap:8px;display:flex}.aop-panel-actions .designer-select-btn{flex:1;padding:8px 12px;font-size:12px}.upload-panel-btn{color:#c2410c;cursor:pointer;background:#fff7ed;border:1px solid #fed7aa;border-radius:10px;justify-content:center;align-items:center;min-height:36px;padding:8px 12px;font-size:12px;font-weight:900;transition:background .16s,border-color .16s,transform .16s;display:inline-flex}.upload-panel-btn:hover{background:#ffedd5;border-color:#fb923c;transform:translateY(-1px)}.upload-panel-btn.ghost{color:#1d4ed8;background:#eff6ff;border-color:#dbeafe;min-height:30px;padding:6px 10px}.upload-panel-btn.ghost:hover{background:#dbeafe;border-color:#93c5fd}.upload-panel-btn input{display:none}.aop-preview-assets{grid-template-columns:1fr;gap:10px;margin-top:2px;display:grid}.aop-preview-asset-card{background:linear-gradient(#fff,#f8fafc);border:1px solid #e2e8f0;border-radius:14px;grid-template-columns:78px 1fr;align-items:center;gap:12px;padding:10px;display:grid}.aop-preview-asset-thumb{background-color:#fff;background-image:linear-gradient(45deg,#f8fafc 25%,#0000 25%),linear-gradient(-45deg,#f8fafc 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#f8fafc 75%),linear-gradient(-45deg,#0000 75%,#f8fafc 75%),none;background-position:0 0,0 8px,8px -8px,-8px 0;background-repeat:repeat,repeat,repeat,repeat,repeat;background-size:16px 16px;background-attachment:scroll,scroll,scroll,scroll,scroll;background-origin:padding-box,padding-box,padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box,border-box,border-box;border:1px dashed #cbd5e1;border-radius:12px;justify-content:center;align-items:center;width:78px;height:78px;display:flex;overflow:hidden}.aop-preview-asset-thumb.mask{background:#f1f5f9}.aop-preview-asset-thumb img{object-fit:contain;width:100%;height:100%}.aop-preview-asset-thumb span{color:#94a3b8;text-align:center;max-width:58px;font-size:10px;font-weight:800;line-height:1.25}.aop-preview-asset-copy{flex-direction:column;gap:5px;min-width:0;display:flex}.aop-preview-asset-copy strong{color:#0f172a;font-size:12px;font-weight:950}.aop-preview-asset-copy small{color:#64748b;font-size:11px;font-weight:650;line-height:1.35}.aop-preview-asset-actions{flex-wrap:wrap;align-items:center;gap:8px;margin-top:2px;display:flex}.aop-final-preview-assets{background:radial-gradient(circle at 0 0,#2563eb14,#0000 38%),#f8fbff;border:1px solid #dbeafe;border-radius:16px;flex-direction:column;gap:10px;margin-top:14px;padding:12px;display:flex}.aop-final-preview-heading{flex-direction:column;gap:3px;display:flex}.aop-final-preview-heading strong{color:#0f172a;font-size:13px;font-weight:950}.aop-final-preview-heading small{color:#64748b;font-size:11px;font-weight:700;line-height:1.4}.aop-final-preview-slots{grid-template-columns:1fr;gap:10px;display:grid}.aop-final-preview-slot{background:#ffffffdb;border:1px solid #e2e8f0;border-radius:14px;flex-direction:column;gap:8px;padding:10px;display:flex}.aop-final-preview-slot-title{color:#1e293b;justify-content:space-between;align-items:center;gap:8px;font-size:12px;font-weight:950;display:flex}.aop-final-preview-slot-title em{color:#15803d;background:#dcfce7;border-radius:999px;padding:3px 7px;font-size:10px;font-style:normal;font-weight:900}.aop-final-preview-slot-assets{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;display:grid}.aop-final-preview-mini-card{grid-template-columns:62px 1fr;align-items:center;gap:8px;display:grid}.aop-final-preview-mini-thumb{background:#fff;border:1px dashed #bfdbfe;border-radius:12px;justify-content:center;align-items:center;width:62px;height:62px;display:flex;overflow:hidden}.aop-final-preview-mini-thumb.mask{background:#f1f5f9}.aop-final-preview-mini-thumb img{object-fit:contain;width:100%;height:100%}.aop-final-preview-mini-thumb span{color:#94a3b8;text-align:center;max-width:48px;font-size:9px;font-weight:900;line-height:1.2}.aop-final-preview-mini-actions{flex-wrap:wrap;align-items:center;gap:6px;min-width:0;display:flex}.aop-final-preview-mini-actions strong{color:#334155;flex-basis:100%;font-size:10px;font-weight:950}.aop-final-preview-align{border-top:1px solid #e2e8f0;grid-template-columns:1.35fr repeat(3,minmax(0,.8fr)) auto;align-items:end;gap:8px;padding-top:8px;display:grid}.aop-final-preview-align label{color:#64748b;flex-direction:column;gap:4px;min-width:0;font-size:10px;font-weight:900;display:flex}.aop-final-preview-align input,.aop-final-preview-align select{color:#0f172a;border:1px solid #cbd5e1;border-radius:8px;width:100%;min-width:0;height:30px;padding:4px 7px;font-size:11px;font-weight:850}.mini-secondary-btn{color:#475569;cursor:pointer;background:#fff;border:1px solid #cbd5e1;border-radius:9px;min-height:30px;padding:6px 10px;font-size:11px;font-weight:900}.mini-danger-btn{color:#be123c;cursor:pointer;background:#fff1f2;border:1px solid #fecaca;border-radius:9px;min-height:30px;padding:6px 10px;font-size:11px;font-weight:900}.mini-danger-btn:hover{background:#ffe4e6;border-color:#fb7185}.aop-panel-actions .designer-select-btn:disabled{opacity:.4;cursor:not-allowed}.aop-panel-actions .delete-product-btn{padding:8px 12px;font-size:12px}.aop-panel-help{color:#64748b;background:#f8fafc;border-radius:12px;margin:0;padding:10px 12px;font-size:12px;line-height:1.45}.aop-panel-config{border-top:1px solid var(--border-color);flex-direction:column;gap:14px;margin-top:4px;padding-top:16px;display:flex}.config-row label{color:var(--text-secondary);flex-direction:column;gap:6px;font-size:12px;font-weight:700;display:flex}.config-row input,.config-row select{border:1px solid var(--border-color);border-radius:var(--radius-sm);background:#f8fafc;padding:10px;font-size:14px}.config-section-title{letter-spacing:.08em;text-transform:uppercase;color:#64748b;font-size:11px;font-weight:900}.config-2col{grid-template-columns:1fr 1fr;gap:10px;display:grid}.config-3col{grid-template-columns:1fr 1fr 1fr;gap:10px;display:grid}.config-2col label,.config-3col label{color:var(--text-secondary);flex-direction:column;gap:5px;font-size:11px;font-weight:700;display:flex}.config-2col input,.config-3col input{border:1px solid var(--border-color);border-radius:var(--radius-sm);background:#f8fafc;width:100%;padding:9px;font-size:13px}.aop-empty-panels{text-align:center;color:var(--text-secondary);padding:60px 20px}.aop-all-areas-preview{border-top:1px solid var(--border-color);background:#fff;padding:40px}.aop-all-areas-preview h2{letter-spacing:.08em;text-transform:uppercase;color:#64748b;margin:0 0 20px;font-size:14px;font-weight:800}.aop-preview-strip{gap:16px;padding-bottom:8px;display:flex;overflow-x:auto}.aop-preview-thumb{flex-direction:column;align-items:center;gap:8px;min-width:100px;display:flex}.aop-preview-thumb img{object-fit:contain;border:1px solid var(--border-color);background:#f8fafc;border-radius:8px;width:100px;height:130px}.aop-preview-empty{color:#94a3b8;border:2px dashed #e2e8f0;border-radius:8px;justify-content:center;align-items:center;width:100px;height:130px;font-size:11px;display:flex}.aop-preview-thumb span{color:var(--text-secondary);text-align:center;font-size:11px;font-weight:700}.svg-mapper-shell{background-color:#f8fafc;background-image:radial-gradient(circle at 1px 1px,#94a3b859 1px,#0000 0),none;background-position:0 0,0 0;background-repeat:repeat,repeat;background-size:28px 28px;background-attachment:scroll,scroll;background-origin:padding-box,padding-box;background-clip:border-box,border-box;flex-direction:column;min-height:100vh;display:flex}.svg-mapper-header{z-index:50;border-bottom:1px solid var(--border-color);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#ffffffeb;justify-content:space-between;align-items:center;gap:20px;padding:18px 34px;display:flex;position:sticky;top:0;box-shadow:0 8px 28px #0f172a0f}.svg-mapper-header h1{color:var(--text-primary);margin:4px 0;font-size:22px}.svg-mapper-header p{color:#64748b;margin:0;font-size:13px;font-weight:600}.svg-mapper-actions{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.svg-mapper-main{flex:1;grid-template-columns:minmax(0,1fr) 340px;gap:24px;min-height:0;padding:28px 34px 34px;display:grid}.svg-mapper-stage{background:#fff;border:1px solid #dbe4f0;border-radius:28px;justify-content:center;align-items:center;min-width:0;min-height:640px;padding:28px;display:flex;overflow:auto;box-shadow:0 20px 60px #0f172a14}.svg-map-preview{justify-content:center;align-items:center;width:100%;height:100%;min-height:580px;display:flex;position:relative}.svg-map-inline{justify-content:center;align-items:center;width:100%;height:100%;min-height:580px;display:flex}.svg-map-preview svg{width:100%;max-width:100%;height:100%;max-height:78vh;overflow:visible}.svg-map-hotspot-layer{z-index:850;pointer-events:none;position:absolute;inset:0}.svg-map-area-hotspot{color:#0f172a;cursor:crosshair;pointer-events:auto;background:0 0;border:0;border-radius:8px;justify-content:flex-start;align-items:flex-start;padding:0;transition:border-color .14s,background .14s,box-shadow .14s;display:flex;position:absolute}.svg-map-area-hotspot:hover{box-shadow:none;background:0 0}.svg-map-area-hotspot.selected{z-index:2;box-shadow:none;background:0 0;border:0}.svg-map-area-hotspot.recommended{background:0 0}.svg-map-area-hotspot.role-panel-outline:not(.selected){pointer-events:none}.svg-map-area-hotspot span{color:#fff;white-space:nowrap;background:#ef4444;border-radius:999px;padding:6px 9px;font-size:11px;font-weight:900;line-height:1;display:none;position:absolute;top:-31px;left:-3px;box-shadow:0 10px 24px #ef444447}.svg-map-area-hotspot:hover span,.svg-map-area-hotspot.selected span{display:none}.svg-map-preview .svg-map-node{cursor:crosshair;transition:stroke .14s,stroke-width .14s,filter .14s,opacity .14s}.svg-map-preview .svg-map-node.is-auto-detected{filter:drop-shadow(0 0 3px #0ea5e94d);stroke:#0ea5e9!important;stroke-width:2px!important}.svg-map-preview .svg-map-node:hover{filter:drop-shadow(0 0 4px #0f766e66);stroke:#0f766e!important;stroke-width:2.5px!important}.svg-map-preview .svg-map-node.is-selected{filter:drop-shadow(0 0 5px #ef444473);stroke:#ef4444!important;stroke-width:3px!important}.svg-map-preview .svg-map-selection-outline{filter:drop-shadow(0 0 5px #ef44448c)}.svg-map-preview .svg-map-selection-clone,.svg-map-preview .svg-map-selection-clone *{vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 6px #ef4444bf);stroke:#ef4444!important;stroke-width:4px!important;fill:none!important;opacity:1!important;pointer-events:none!important}.svg-map-screen-selection-layer{z-index:900;pointer-events:none;filter:drop-shadow(0 0 8px #ef4444a6);width:100%;height:100%;position:absolute;inset:0;overflow:visible}.svg-map-exact-selection-layer{z-index:920;pointer-events:none;filter:drop-shadow(0 0 3px #fffffff2)drop-shadow(0 0 8px #ef4444bf);width:100%;max-width:100%;height:100%;max-height:78vh;position:absolute;inset:0;overflow:visible}.svg-map-exact-selection-layer,.svg-map-exact-selection-layer *{pointer-events:none!important}.svg-map-exact-selection-layer path,.svg-map-exact-selection-layer rect,.svg-map-exact-selection-layer circle,.svg-map-exact-selection-layer ellipse,.svg-map-exact-selection-layer line,.svg-map-exact-selection-layer polyline,.svg-map-exact-selection-layer polygon,.svg-map-exact-selection-layer use{vector-effect:non-scaling-stroke;stroke:#ef4444!important;stroke-width:4px!important;fill:none!important;opacity:1!important}.svg-map-screen-selection-layer,.svg-map-screen-selection-layer *{vector-effect:non-scaling-stroke;stroke:#ef4444!important;stroke-width:4px!important;fill:none!important;opacity:1!important;pointer-events:none!important}.svg-map-html-selection-outline{z-index:999;pointer-events:none;background:#ef44441f;border:4px solid #ef4444;border-radius:8px;animation:1.1s ease-in-out infinite svgSelectionPulse;position:absolute;box-shadow:0 0 0 5px #fffffff2,0 0 0 9px #ef444438,0 0 30px #ef4444bf}.svg-map-html-selection-outline:before,.svg-map-html-selection-outline:after{content:"";background:#ef4444;border:2px solid #fff;border-radius:999px;width:12px;height:12px;position:absolute;box-shadow:0 0 12px #ef4444a6}.svg-map-html-selection-outline:before{top:-8px;left:-8px}.svg-map-html-selection-outline:after{bottom:-8px;right:-8px}.svg-map-html-selection-outline span{color:#fff;white-space:nowrap;background:#ef4444;border-radius:999px;padding:7px 10px;font-size:12px;font-weight:900;position:absolute;top:-36px;left:-4px;box-shadow:0 10px 24px #ef444452}@keyframes svgSelectionPulse{0%,to{box-shadow:0 0 0 5px #fffffff2,0 0 0 9px #ef44442e,0 0 28px #ef4444a6}50%{box-shadow:0 0 0 5px #fffffff2,0 0 0 13px #ef44444d,0 0 38px #ef4444d9}}.svg-mapper-sidebar{flex-direction:column;gap:16px;display:flex}.svg-mapper-card{border:1px solid var(--border-color);background:#fffffff5;border-radius:22px;padding:20px;box-shadow:0 16px 40px #0f172a12}.svg-mapper-card.muted{background:#f8fafc}.svg-mapper-card h2{color:#0f172a;letter-spacing:.06em;text-transform:uppercase;margin:0 0 14px;font-size:14px;font-weight:900}.svg-role-list{flex-direction:column;gap:9px;display:flex}.svg-role-btn{color:#0f172a;text-align:left;cursor:pointer;background:#f8fafc;border:1px solid #dbeafe;border-radius:14px;flex-direction:column;align-items:flex-start;gap:4px;width:100%;padding:12px;transition:border-color .14s,background .14s,box-shadow .14s,transform .14s;display:flex}.svg-role-btn:hover{background:#fff7ed;border-color:#fb7185;transform:translateY(-1px)}.svg-role-btn.active{background:#fff1f2;border-color:#ef4444;box-shadow:0 0 0 3px #ef444424}.svg-role-btn strong{font-size:13px;font-weight:900}.svg-role-btn span,.svg-role-btn em{font-size:11px;line-height:1.35}.svg-role-btn span{color:#64748b}.svg-role-btn em{color:#dc2626;font-style:normal;font-weight:900}.role-help{margin-top:12px}.detected-area-list{flex-direction:column;gap:10px;display:flex}.detected-area-btn{color:#0f172a;text-align:left;cursor:pointer;background:#f8fafc;border:1px solid #dbeafe;border-radius:14px;flex-direction:column;align-items:flex-start;gap:4px;width:100%;padding:12px;display:flex}.detected-area-btn:hover{background:#f0f9ff;border-color:#0ea5e9}.detected-area-btn.active,.detected-area-btn.recommended.active{background:#fff1f2;border-color:#ef4444;box-shadow:0 0 0 3px #ef444424}.detected-area-btn.recommended{background:linear-gradient(135deg,#f0fdfa 0%,#fff 100%);border-color:#14b8a6}.detected-area-btn.active strong,.detected-area-btn.recommended.active strong,.detected-area-btn.active em,.detected-area-btn.recommended.active em{color:#dc2626}.detected-area-btn strong{font-size:13px;font-weight:900}.detected-area-btn span{color:#64748b;font-size:11px;line-height:1.35}.detected-area-btn em{color:#0f766e;font-size:11px;font-style:normal;font-weight:900}.svg-measure-list{flex-direction:column;gap:10px;margin:0;display:flex}.svg-measure-list div{border-bottom:1px solid #e2e8f0;grid-template-columns:92px 1fr;align-items:start;gap:10px;padding-bottom:10px;display:grid}.svg-measure-list div:last-child{border-bottom:0;padding-bottom:0}.svg-measure-list dt{color:#64748b;letter-spacing:.06em;text-transform:uppercase;font-size:11px;font-weight:900}.svg-measure-list dd{color:#0f172a;word-break:break-word;margin:0;font-size:13px;font-weight:800}.mapper-apply-btn{width:100%;margin-top:18px}.svg-mapper-empty{color:#64748b;margin:0;font-size:13px;line-height:1.55}.svg-mapper-error{color:#be123c;text-align:center;background:#fff1f2;border:1px solid #fecdd3;border-radius:18px;max-width:520px;padding:18px 22px;font-weight:800}@media (width<=980px){.svg-mapper-header,.svg-mapper-main{padding-left:18px;padding-right:18px}.svg-mapper-header{flex-direction:column;align-items:flex-start}.svg-mapper-main{grid-template-columns:1fr}}.loading-view{justify-content:center;align-items:center;height:50vh;display:flex}.loading-content{text-align:center;color:var(--text-secondary)}.loading-title{margin-bottom:15px}.mockup-detail-container{box-shadow:none;background:0 0;border:none;padding:0}.nested-form{background:var(--bg-color);border-radius:var(--radius-md);border:1px solid var(--border-color);margin-bottom:20px;padding:20px}.nested-form h4{color:var(--text-primary);margin-bottom:15px}.form-row{grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px;display:grid}.form-row label{flex-direction:column;gap:8px;font-size:14px;font-weight:500;display:flex}.locations-list{flex-direction:column;gap:15px;display:flex}.location-row-item{background:var(--bg-color);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:20px}.location-summary{align-items:center;gap:20px;display:flex}.location-thumb{object-fit:contain;border:1px solid var(--border-color);background:#fff;border-radius:8px;width:60px;height:60px;padding:5px}.location-name{flex:1;font-size:16px;font-weight:600}.location-stats{color:var(--text-secondary);background:var(--panel-bg);border:1px solid var(--border-color);border-radius:20px;gap:20px;padding:8px 16px;font-size:13px;display:flex}.location-actions-row{gap:10px;display:flex}.color-form{border-top:1px dashed var(--border-color);background:0 0;border-bottom:none;border-left:none;border-right:none;margin-top:20px;padding:20px 0 0}.manager-login-page{background:linear-gradient(135deg,#0f172a0a,#14b8a614),#f8fafc;place-items:center;min-height:100%;padding:42px 20px;display:grid}.manager-login-panel{background:#fffffff0;border:1px solid #94a3b84d;border-radius:22px;flex-direction:column;gap:26px;width:min(460px,100%);padding:34px;display:flex;box-shadow:0 26px 70px #0f172a1f}.manager-login-brand{justify-content:space-between;align-items:center;gap:16px;display:flex}.manager-login-brand img{width:auto;height:36px}.manager-login-brand span{color:#1d4ed8;letter-spacing:.08em;text-transform:uppercase;background:#eff6ff;border:1px solid #dbeafe;border-radius:999px;padding:7px 11px;font-size:11px;font-weight:900}.manager-login-copy h1{color:#0f172a;letter-spacing:0;margin:0 0 8px;font-size:30px;font-weight:950;line-height:1.05}.manager-login-copy p{color:#64748b;margin:0;font-size:14px;font-weight:650;line-height:1.55}.manager-login-form{flex-direction:column;gap:16px;display:flex}.manager-login-form label{color:#334155;flex-direction:column;gap:8px;font-size:13px;font-weight:850;display:flex}.manager-login-form input{color:#0f172a;height:46px;font:inherit;background:#fff;border:1px solid #cbd5e1;border-radius:10px;padding:0 14px;font-size:14px}.manager-login-form input:focus{border-color:#0f766e;outline:none;box-shadow:0 0 0 4px #0f766e1f}.manager-login-form button{color:#fff;background:#0f766e;border-radius:10px;height:48px;font-size:14px;font-weight:900}.manager-login-form button:hover:not(:disabled){background:#115e59;transform:translateY(-1px)}.manager-login-form button:disabled{cursor:not-allowed;opacity:.65}.manager-login-error{color:#be123c;background:#fff1f2;border:1px solid #fecdd3;border-radius:10px;margin:0;padding:10px 12px;font-size:13px;font-weight:800}.editor-shell{background:var(--bg-color);z-index:200;flex-direction:column;display:flex;position:absolute;inset:0}.editor-main{background-image:radial-gradient(circle at 1px 1px,#e2e8f0 1.5px,#0000 0);background-size:32px 32px;flex:1;grid-template-columns:1fr 340px;gap:30px;min-height:0;padding:0 40px 40px;display:grid}.canvas-section{flex-direction:column;gap:20px;min-height:0;display:flex}.canvas-wrapper{min-height:0;transition:var(--transition);background:0 0;flex:1;justify-content:center;align-items:center;padding:30px;display:flex;position:relative;overflow:hidden}.mockup-canvas{justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:relative}.mockup-canvas img{object-fit:contain;mix-blend-mode:multiply;filter:drop-shadow(0 10px 30px #0000001a);width:auto;max-width:100%;height:auto;max-height:100%;display:block}.control-card{border-radius:var(--radius-lg);border:1px solid var(--border-color);box-shadow:var(--shadow-sm);background:#fff;flex-direction:column;height:fit-content;padding:0;display:flex;overflow:hidden}.sidebar-toolbar{border-bottom:1px solid var(--border-color);background:#f8fafc;flex-direction:column;gap:12px;padding:20px;display:flex}.toolbar-actions{grid-template-columns:1fr 1fr;gap:10px;display:grid}.sidebar-content{padding:24px}.toolbar-btn{border:1px solid var(--border-color);width:100%;color:var(--text-primary);cursor:pointer;background:#fff;border-radius:8px;padding:12px;font-size:13px;font-weight:700}.toolbar-btn.active{background:var(--text-primary);color:#fff;border-color:var(--text-primary)}.toolbar-hint{color:#64748b;margin:0;font-size:12px;line-height:1.45}.control-card h2{border-bottom:1px solid var(--border-color);color:var(--text-primary);margin-bottom:20px;padding-bottom:12px;font-size:15px;font-weight:800}.control-grid{flex-direction:column;gap:14px;display:flex}.control-section{background:#fff;border:1px solid #e2e8f0;border-radius:14px;flex-direction:column;gap:12px;padding:14px;display:flex}.highlight-section{background:linear-gradient(135deg,#f8fbff 0%,#eef6ff 100%);border-color:#bfdbfe}.section-title-row{justify-content:space-between;align-items:center;gap:10px;display:flex}.control-subtitle{color:#334155;letter-spacing:.08em;text-transform:uppercase;margin:0;font-size:11px;font-weight:800;line-height:1.2}.unit-pill{color:#075985;letter-spacing:.04em;text-transform:uppercase;background:#e0f2fe;border-radius:999px;flex:none;padding:4px 8px;font-size:10px;font-weight:900}.print-type-grid{grid-template-columns:1fr;gap:10px;display:grid}.print-type-option{text-align:left;color:#0f172a;cursor:pointer;background:#f8fafc;border:1px solid #dbe4f0;border-radius:12px;flex-direction:column;gap:4px;width:100%;padding:12px;transition:border-color .16s,background .16s,box-shadow .16s;display:flex}.print-type-option strong{font-size:13px;font-weight:900}.print-type-option span{color:#64748b;font-size:11px;line-height:1.35}.print-type-option.active{background:#eff6ff;border-color:#2563eb;box-shadow:0 0 0 3px #2563eb1f}.control-helper{color:#64748b;margin:0;font-size:12px;line-height:1.45}.form-row{grid-template-columns:1fr 1fr;gap:12px;display:grid}.control-grid label{color:#64748b;flex-direction:column;gap:6px;font-size:11px;font-weight:700;display:flex}.control-grid input,.control-grid select{border:1px solid var(--border-color);color:var(--text-primary);background:#f8fafc;border-radius:6px;width:100%;padding:12px;font-size:14px}.control-actions{flex-direction:column;gap:10px;margin-top:10px;display:flex}.save-btn{background:var(--text-primary)!important;color:#fff!important;padding:14px!important;font-weight:700!important}.delete-button{color:#e11d48;cursor:pointer;background:#fff1f2;border:1px solid #fecdd3;border-radius:8px;width:100%;padding:12px;font-size:13px;font-weight:600}.imprint-area{border:2px dotted var(--accent-color);cursor:grab;z-index:5;transform-origin:50%;will-change:transform;background:#3b82f60d;padding:0;position:absolute;overflow:visible}.imprint-area.dragging{cursor:grabbing;z-index:100;transition:none!important}.imprint-area.selected{border:2px dotted var(--text-primary);z-index:10;background:#3b82f61f}.imprint-area.aop-area{background:#f9731614;border:2px dashed #f97316}.imprint-area.aop-area.selected{background:#f973161f;border-color:#c2410c}.imprint-area.aop-area .imprint-label,.imprint-area.aop-area .imprint-measurement{background:#c2410c}.imprint-area.resizing{cursor:nwse-resize;z-index:100;transition:none!important}.snap-guide-v,.snap-guide-h{background:var(--success-color);z-index:100;pointer-events:none;display:none;position:absolute}.snap-guide-v{background:var(--success-color);width:1.5px;top:0;bottom:0;left:50%;box-shadow:0 0 8px #10b98166}.snap-guide-h{background:var(--success-color);height:1.5px;top:50%;left:0;right:0;box-shadow:0 0 8px #10b98166}.imprint-label{background:var(--accent-color);color:#fff;border-radius:4px;padding:2px 8px;font-size:11px;font-weight:700;position:absolute;top:-24px;left:0}.imprint-measurement{color:#fff;white-space:nowrap;pointer-events:none;background:#0f172a;border-radius:999px;padding:5px 9px;font-size:11px;font-weight:800;line-height:1;position:absolute;bottom:-30px;left:50%;transform:translate(-50%);box-shadow:0 8px 18px #0f172a2e}.draft-measurement{background:#2563eb}.imprint-resize-handle{z-index:2;background:#2563eb;border:2px solid #fff;border-radius:999px;width:14px;height:14px;position:absolute;box-shadow:0 2px 8px #0f172a38}.imprint-resize-handle.tl{cursor:nwse-resize;top:-8px;left:-8px}.imprint-resize-handle.tr{cursor:nesw-resize;top:-8px;right:-8px}.imprint-resize-handle.bl{cursor:nesw-resize;bottom:-8px;left:-8px}.imprint-resize-handle.br{cursor:nwse-resize;bottom:-8px;right:-8px}.empty-selection{text-align:center;border:1px dashed var(--border-color);background:#f8fafc;border-radius:12px;padding:40px 20px}.designer-view{background-color:#fff;background-image:radial-gradient(#e2e8f0 1.2px,#0000 1.2px);background-size:40px 40px;min-height:100vh;padding:60px 40px}.designer-view .grid-header{text-align:center;max-width:800px;margin:0 auto 40px}.designer-view .page-title{letter-spacing:-2px;background:var(--accent-gradient);-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin-bottom:8px;font-size:42px;font-weight:900}.designer-view .header-subtitle{color:var(--text-secondary);font-size:16px;line-height:1.5}.designer-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:40px;max-width:1400px;margin:0 auto;display:grid}.designer-card{border:1px solid var(--border-color);cursor:pointer;background:#fff;border-radius:40px;transition:all .6s cubic-bezier(.16,1,.3,1);position:relative;overflow:hidden;box-shadow:0 4px 6px -1px #0000000d}.designer-card:hover{border-color:var(--accent-color);transform:translateY(-20px)scale(1.02);box-shadow:0 50px 100px -20px #0000001f}.designer-card-preview{aspect-ratio:1;background:#f8fafc;justify-content:center;align-items:center;padding:24px;display:flex;position:relative;overflow:hidden}.designer-card-preview img{object-fit:contain;mix-blend-mode:multiply;width:100%;height:100%;transition:transform .8s var(--transition);filter:drop-shadow(0 15px 30px #00000014)}.designer-card:hover .designer-card-preview img{transform:scale(1.1)rotate(1deg)}.aop-card-placeholder{color:#0f766e;background:radial-gradient(circle at top,#14b8a629,#0000 42%);flex-direction:column;justify-content:center;align-items:center;gap:10px;width:100%;height:100%;font-size:14px;font-weight:800;display:flex}.aop-placeholder-icon{color:#115e59;letter-spacing:.08em;background:#ccfbf1;border-radius:28px;justify-content:center;align-items:center;width:78px;height:78px;font-size:18px;display:inline-flex;box-shadow:0 18px 38px #0f766e29}.designer-card-info{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-top:1px solid var(--border-color);background:#fffc;padding:24px;position:relative}.designer-card-info h3{color:var(--text-primary);letter-spacing:-.5px;margin-bottom:8px;font-size:24px;font-weight:800}.designer-card-info .muted-text{color:var(--text-secondary);margin-bottom:24px;font-size:14px;font-weight:500}.start-design-btn{background:var(--text-primary);color:#fff;cursor:pointer;border:none;border-radius:28px;justify-content:center;align-items:center;gap:12px;width:100%;height:56px;font-size:14px;font-weight:800;transition:all .3s;display:flex}.designer-card:hover .start-design-btn{background:var(--accent-color);box-shadow:0 10px 20px var(--accent-glow)}.badge-new{background:var(--accent-color);color:#fff;text-transform:uppercase;letter-spacing:1px;z-index:10;box-shadow:0 4px 12px var(--accent-glow);border-radius:99px;padding:6px 14px;font-size:11px;font-weight:800;position:absolute;top:30px;right:30px}.empty-state-container{text-align:center;background:#f8fafc;border:2px dashed #e2e8f0;border-radius:40px;grid-column:1/-1;padding:100px}.empty-state-container h2{color:var(--text-primary);margin-bottom:12px;font-size:24px}.template-picker-overlay{z-index:2000;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#0f172a94;justify-content:center;align-items:center;padding:28px;display:flex;position:fixed;inset:0}.template-picker-modal{background:#fff;border:1px solid #e2e8f0e6;border-radius:26px;flex-direction:column;width:min(960px,100%);max-height:min(760px,100vh - 48px);display:flex;overflow:hidden;box-shadow:0 30px 90px #0f172a47}.template-picker-header{border-bottom:1px solid #e2e8f0;justify-content:space-between;align-items:flex-start;gap:20px;padding:26px 28px 20px;display:flex}.template-picker-kicker{color:#f97316;letter-spacing:.16em;text-transform:uppercase;font-size:11px;font-weight:950}.template-picker-header h2{color:#0f172a;letter-spacing:-.04em;margin:4px 0 6px;font-size:30px;font-weight:950}.template-picker-header p{color:#64748b;margin:0;font-size:14px;font-weight:650}.template-picker-close{color:#0f172a;cursor:pointer;background:#f8fafc;border:1px solid #e2e8f0;border-radius:999px;padding:9px 14px;font-weight:850}.template-picker-state{color:#64748b;text-align:center;background:#f8fafc;border-radius:18px;margin:24px;padding:24px;font-weight:750}.template-picker-state.error{color:#be123c;background:#fff1f2}.template-picker-grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:18px;padding:24px 28px 30px;display:grid;overflow-y:auto}.template-picker-card{cursor:pointer;text-align:left;background:#fff;border:1px solid #e2e8f0;border-radius:18px;flex-direction:column;gap:10px;min-width:0;padding:14px;transition:transform .18s,border-color .18s,box-shadow .18s;display:flex}.template-picker-card:hover{border-color:#f97316;transform:translateY(-3px);box-shadow:0 18px 34px #0f172a1f}.template-picker-preview{aspect-ratio:1;background-color:#fff;background-image:linear-gradient(45deg,#f8fafc 25%,#0000 25%),linear-gradient(-45deg,#f8fafc 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#f8fafc 75%),linear-gradient(-45deg,#0000 75%,#f8fafc 75%),none;background-position:0 0,0 9px,9px -9px,-9px 0;background-repeat:repeat,repeat,repeat,repeat,repeat;background-size:18px 18px;background-attachment:scroll,scroll,scroll,scroll,scroll;background-origin:padding-box,padding-box,padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box,border-box,border-box;border:1px solid #e2e8f0;border-radius:14px;justify-content:center;align-items:center;display:flex;overflow:hidden}.template-picker-preview img{object-fit:contain;max-width:86%;max-height:86%}.template-file-placeholder{color:#fff;letter-spacing:.08em;background:#0f172a;border-radius:16px;justify-content:center;align-items:center;width:58px;height:58px;font-size:12px;font-weight:950;display:inline-flex}.template-picker-name{color:#0f172a;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:900;overflow:hidden}.template-picker-file{color:#64748b;text-overflow:ellipsis;white-space:nowrap;font-size:11px;font-weight:700;overflow:hidden}.template-picker-anchor{position:relative}.template-picker-dropdown{z-index:2600;background:#fff;border:1px solid #e2e8f0f2;border-radius:18px;flex-direction:column;width:min(420px,100vw - 32px);max-height:min(540px,100vh - 32px);display:flex;position:fixed;overflow:hidden;box-shadow:0 22px 58px #0f172a33}.template-picker-dropdown .template-picker-header{gap:12px;padding:16px 16px 12px}.template-picker-dropdown .template-picker-kicker{font-size:9px}.template-picker-dropdown .template-picker-header h2{letter-spacing:-.02em;margin:3px 0;font-size:18px}.template-picker-dropdown .template-picker-header p{font-size:11px;line-height:1.35}.template-picker-dropdown .template-picker-close{justify-content:center;align-items:center;width:28px;height:28px;padding:0;display:inline-flex}.template-picker-dropdown .template-picker-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:14px}.template-picker-dropdown .template-picker-card{border-radius:14px;gap:7px;padding:9px}.template-picker-dropdown .template-picker-preview{border-radius:10px}.template-picker-dropdown .template-picker-name{font-size:12px}.template-picker-dropdown .template-picker-file{font-size:10px}.template-picker-dropdown .template-picker-state{margin:14px;padding:16px;font-size:12px}.template-picker-anchor>.action-btn,.template-picker-anchor>.aop-template-btn{width:100%}.template-picker-sheet-overlay{z-index:3000;pointer-events:none;background:0 0;justify-content:stretch;align-items:flex-end;display:flex;position:fixed;inset:0}.template-picker-sheet{pointer-events:auto;background:#fff;border:1px solid #e2e8f0f2;border-radius:24px 24px 0 0;flex-direction:column;width:100%;height:clamp(360px,58vh,540px);max-height:58vh;animation:.22s cubic-bezier(.2,.8,.2,1) both templateSheetIn;display:flex;overflow:hidden;box-shadow:0 -28px 80px #0f172a38}.template-picker-sheet .template-picker-header{z-index:2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fffffff5;padding:18px 18px 14px;position:sticky;top:0}.template-picker-sheet .template-picker-header h2{font-size:24px}.template-picker-sheet .template-picker-header p{font-size:12px;line-height:1.45}.template-picker-sheet .template-picker-close{min-width:58px}.template-picker-sheet .template-picker-grid{padding:16px 16px calc(24px + env(safe-area-inset-bottom));grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.template-picker-sheet .template-picker-card{border-radius:15px;padding:10px}.template-picker-sheet .template-picker-preview{border-radius:12px}.template-picker-sheet .template-picker-name{font-size:12px}.template-picker-sheet .template-picker-file{font-size:10px}.template-picker-sheet .template-picker-state{margin:16px}@keyframes templateSheetIn{0%{opacity:.5;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}.designer-interface{background:var(--bg-color);flex-direction:column;height:100vh;display:flex}.designer-header{border-bottom:1px solid var(--border-color);z-index:100;background:#fff;justify-content:space-between;align-items:center;padding:10px 40px;display:flex;box-shadow:0 2px 10px #00000005}.header-actions{align-items:center;gap:12px;display:flex}.persist-status{color:var(--text-secondary);margin-right:16px;font-size:13px;font-weight:600;animation:.3s fadeIn}.header-left{align-items:center;gap:16px;display:flex}.designer-header-logo{cursor:pointer;width:auto;height:28px;transition:opacity .2s;display:block}.designer-header-logo:hover{opacity:.8}.designer-header-divider{background-color:var(--border-color);width:1px;height:20px}.designer-header h2{letter-spacing:-.5px;white-space:nowrap;font-size:16px;font-weight:800}.designer-layout{flex:1;grid-template-columns:1fr 360px;display:grid;overflow:hidden}.designer-main{background-image:radial-gradient(circle at 1px 1px,#e2e8f0 1.5px,#0000 0);background-size:32px 32px;flex-direction:column;padding:40px;display:flex;overflow:hidden}.canvas-container{background:0 0;flex:1;justify-content:center;align-items:center;padding:40px;display:flex;position:relative;overflow:hidden}.design-canvas-wrapper{width:100%;height:100%;transition:var(--transition);justify-content:center;align-items:center;display:flex;position:relative}.mockup-inner-container{transform-origin:50%;will-change:transform;backface-visibility:hidden;width:100%;height:100%;transform-style:preserve-3d;justify-content:center;align-items:center;transition:transform .42s cubic-bezier(.22,1,.36,1);display:flex;position:relative}.mockup-base-image{object-fit:contain;filter:drop-shadow(0 20px 50px #0000001a);backface-visibility:hidden;width:auto;max-width:100%;height:auto;max-height:100%;display:block;transform:translateZ(0)}.hide-areas .design-slot{background:0 0;border-color:#0000}.design-slot{cursor:pointer;transition:var(--transition);background:0 0;border:1.5px dotted #0f172a66;justify-content:center;align-items:center;display:flex;position:absolute;overflow:hidden}.design-slot:hover{border-color:var(--accent-color);background:#3b82f605}.design-slot.active{box-shadow:none;background:0 0;border:1.5px dotted #0f172a}.design-slot.aop-slot{background:#f9731609;border-style:dashed;border-color:#f97316a6}.design-slot.aop-slot.active{background:#f973160f;border-color:#c2410c}.slot-type-badge{z-index:35;pointer-events:none;color:#fff;letter-spacing:.06em;text-transform:uppercase;background:#0f172adb;border-radius:999px;padding:4px 8px;font-size:10px;font-weight:900;position:absolute;top:8px;left:8px}.design-slot.aop-slot .slot-type-badge{background:#c2410c}.design-canvas-wrapper.is-file-dragging .design-slot.file-drag-active{background:#3b82f60f;border-style:dashed;border-color:#1d4ed88c}.design-slot.file-drag-over{background:radial-gradient(circle,#60a5fa33 0%,#60a5fa0f 54%,#60a5fa00 100%);border-width:2px;border-color:#2563eb;animation:1.05s ease-in-out infinite fileDropPulse;box-shadow:inset 0 0 0 1px #bfdbfee6,0 0 0 14px #93c5fd2e}.file-drop-hint{color:#1d4ed8;letter-spacing:.06em;text-transform:uppercase;opacity:0;pointer-events:none;z-index:60;background:#ffffffe0;border:1px solid #3b82f659;border-radius:999px;padding:8px 12px;font-size:11px;font-weight:800;transition:opacity .18s,transform .18s;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)scale(.96)}.file-drop-hint.visible{opacity:1;transform:translate(-50%,-50%)scale(1)}.design-canvas-wrapper.is-focus-mode .design-slot{opacity:0;background:0 0;border-color:#0000;transition:opacity .18s}.design-canvas-wrapper.is-focus-mode .design-slot.active{opacity:1;border:1.5px dashed #0f172a73}.design-canvas-wrapper.is-focus-mode .mockup-base-image{filter:drop-shadow(0 14px 30px #00000014)}.aop-guides-overlay{pointer-events:none;z-index:10;width:100%;height:100%;position:absolute;top:0;left:0}.aop-guide{pointer-events:none;border-style:dashed;border-width:1px;position:absolute}.aop-guide.cut-line{border-color:#f0f}.aop-guide.safe-area{border-color:#0f0}.aop-guide.seam-warning{border-color:#00f}@keyframes fileDropPulse{0%{box-shadow:inset 0 0 0 1px #bfdbfee6,0 0 0 8px #93c5fd2e}50%{box-shadow:inset 0 0 0 1px #bfdbfee6,0 0 0 16px #93c5fd1f}to{box-shadow:inset 0 0 0 1px #bfdbfee6,0 0 0 8px #93c5fd2e}}.slot-image{object-fit:contain;width:100%;height:100%}.location-selector{border-radius:var(--radius-md);background:#f1f5f9;justify-content:center;gap:8px;padding:4px;display:flex}.location-tab{border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition);background:0 0;border:1px solid #0000;align-items:center;gap:10px;padding:6px 16px;display:flex}.location-tab:hover{background:#ffffff80}.location-tab.active{border-color:var(--border-color);box-shadow:var(--shadow-sm);background:#fff}.location-tab img{object-fit:contain;mix-blend-mode:multiply;border-radius:4px;width:24px;height:24px}.location-tab span{text-transform:uppercase;color:var(--text-primary);font-size:12px;font-weight:700}.design-element{cursor:move;pointer-events:auto;-webkit-user-select:none;user-select:none;z-index:20;will-change:left, top;justify-content:center;align-items:center;display:flex;position:absolute}.design-element.dragging{transition:none!important}.design-element-content{transform-origin:50%;justify-content:center;align-items:center;display:flex;position:relative}.design-element span{white-space:nowrap;pointer-events:none;font-weight:700}.design-element.is-inline-editing span{pointer-events:auto;cursor:text;background:#ffffffd9;border-radius:4px;outline:1px dashed #3b82f6;min-width:12px;padding:2px 4px}.selection-action-dock{z-index:80;pointer-events:auto;-webkit-user-select:none;user-select:none;touch-action:none;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#fffffff2;border:1px solid #d8e1ef;border-radius:14px;flex-direction:column;align-items:flex-start;gap:10px;min-width:250px;padding:12px;display:flex;position:absolute;box-shadow:0 14px 30px #0f172a29}.selection-action-dock.dragging{cursor:grabbing}.selection-action-title-bar{cursor:grab;justify-content:space-between;align-items:center;gap:10px;width:100%;display:flex}.selection-action-title-group{flex-direction:column;gap:2px;display:flex}.selection-action-title{letter-spacing:.07em;text-transform:uppercase;color:#0f172a;font-size:11px;font-weight:800}.selection-action-subtitle{color:#64748b;font-size:11px;font-weight:600}.selection-action-drag-handle{gap:3px;display:inline-flex}.selection-action-drag-handle span{background:#94a3b8;border-radius:3px;width:4px;height:12px}.selection-action-row{flex-wrap:wrap;align-items:center;gap:6px;width:100%;display:flex}.mini-action-btn{color:#1e293b;letter-spacing:.02em;cursor:pointer;background:#f8fafc;border:1px solid #d8e1ef;border-radius:10px;justify-content:center;align-items:center;min-width:36px;height:32px;padding:0 8px;font-size:11px;font-weight:800;display:inline-flex}.mini-action-btn:hover{color:#1d4ed8;background:#eef4ff;border-color:#93c5fd}.mini-action-icon{flex:none;width:16px;height:16px;display:block}.mini-action-btn.danger{color:#b91c1c;background:#fff5f5;border-color:#fecaca}.mini-action-btn.danger:hover{color:#991b1b;background:#fee2e2;border-color:#fca5a5}.dock-text-controls{width:100%}.dock-color-picker{flex-direction:column;gap:6px;width:100%;display:flex}.dock-color-label{letter-spacing:.04em;text-transform:uppercase;color:#64748b;font-size:11px;font-weight:700}.dock-color-input-wrap{background:#f8fafc;border:1px solid #d8e1ef;border-radius:10px;align-items:center;gap:8px;width:100%;padding:6px 8px;display:flex}.dock-color-input-wrap input[type=color]{cursor:pointer;background:0 0;border:0;border-radius:6px;width:28px;height:24px;padding:0}.dock-color-input-wrap span{color:#0f172a;letter-spacing:.03em;font-size:12px;font-weight:700}.resize-handle{z-index:30;background:#fff;border:1px solid #3b82f6;border-radius:999px;width:11px;height:11px;position:absolute;box-shadow:0 0 0 1px #fffc}.resize-handle.tl{cursor:nwse-resize;top:-6px;left:-6px}.resize-handle.tr{cursor:nesw-resize;top:-6px;right:-6px}.resize-handle.bl{cursor:nesw-resize;bottom:-6px;left:-6px}.resize-handle.br{cursor:nwse-resize;bottom:-6px;right:-6px}.bbox-border{pointer-events:none;z-index:10;opacity:.6;border:1px dashed #3b82f6;position:absolute;inset:-2px}.internal-snap-v,.internal-snap-h{background:var(--success-color);opacity:.8;z-index:50;pointer-events:none;position:absolute}.internal-snap-v{width:1.5px;top:0;bottom:0;left:50%}.internal-snap-h{height:1.5px;top:50%;left:0;right:0}.designer-sidebar{background:#fff;border-left:1px solid #e2e8f0;flex-direction:column;gap:32px;width:360px;padding:32px;display:flex;overflow-y:auto}.sidebar-section{width:100%}.sidebar-section h3{text-transform:uppercase;letter-spacing:.1em;color:#64748b;margin-bottom:16px;font-size:11px;font-weight:700}.settings-group{flex-direction:column;gap:8px;display:flex}.section-header{justify-content:space-between;align-items:center;width:100%;padding:12px 0;display:flex}.add-elements-note{color:#64748b;margin:-6px 0 14px;font-size:12px;line-height:1.45}.quick-actions{grid-template-columns:1fr 1fr;gap:12px;display:grid}.action-btn{text-align:left;cursor:pointer;color:#1e293b;background:linear-gradient(#fff 0%,#f8fafc 100%);border:1px solid #d8e2ef;border-radius:14px;flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:10px;min-height:126px;padding:14px 14px 12px;font-size:14px;font-weight:700;transition:transform .16s,box-shadow .16s,border-color .16s;display:flex;box-shadow:0 4px 14px #0f172a0d}.action-btn:hover{border-color:#93c5fd;transform:translateY(-1px);box-shadow:0 8px 20px #3b82f61f}.action-btn:active{transform:translateY(0)}.btn-icon{color:#1e293b;background:#fff;border:1px solid #e2e8f0;border-radius:12px;flex-shrink:0;justify-content:center;align-items:center;width:46px;height:46px;display:flex}.btn-icon svg{width:22px;height:22px}.action-btn-title{color:#0f172a;font-size:15px;font-weight:800;line-height:1.15}.action-btn-subtitle{color:#64748b;font-size:12px;font-weight:600;line-height:1.35}.add-text-btn .btn-icon{color:#1d4ed8;background:#eef6ff;border-color:#d5e8ff}.add-art-btn .btn-icon{color:#047857;background:#ecfdf5;border-color:#ccf0df}.element-editor{background:#f8fafc;border:1px solid #e2e8f0;border-radius:16px;flex-direction:column;gap:20px;padding:24px;display:none}.element-editor.active{display:flex}.element-editor h3{color:#0f172a;text-transform:none;letter-spacing:normal;margin-bottom:4px;font-size:16px;font-weight:700}.input-group label{color:#64748b;margin-bottom:8px;font-size:12px;font-weight:700;display:block}.input-group input[type=text]{color:#1e293b;background:#fff;border:1px solid #cbd5e1;border-radius:8px;width:100%;padding:12px;font-size:14px}.input-group input[type=text]:focus{border-color:#3b82f6;outline:none;box-shadow:0 0 0 3px #3b82f61a}.text-style-grid{grid-template-columns:1fr 1fr;gap:10px;display:grid}.text-style-grid label{color:#64748b;flex-direction:column;gap:6px;font-size:12px;font-weight:700;display:flex}.text-style-grid input,.text-style-grid select{color:#1e293b;background:#fff;border:1px solid #cbd5e1;border-radius:8px;width:100%;padding:10px 11px;font-size:13px}.text-style-grid select{appearance:none;background-image:linear-gradient(45deg,#0000 50%,#64748b 50%),linear-gradient(135deg,#64748b 50%,#0000 50%),linear-gradient(90deg,#fff,#fff);background-position:calc(100% - 16px) calc(50% - 3px),calc(100% - 11px) calc(50% - 3px),0 0;background-repeat:no-repeat;background-size:6px 6px,6px 6px,100% 100%;padding-right:36px}.text-style-grid select optgroup{color:#334155;font-weight:700}.font-family-control{width:100%}.font-family-trigger{color:#1e293b;cursor:pointer;text-align:left;background:#fff;border:1px solid #cbd5e1;border-radius:8px;justify-content:space-between;align-items:center;gap:10px;width:100%;padding:10px 11px;font-size:13px;display:flex}.font-family-trigger:focus{border-color:#3b82f6;outline:none;box-shadow:0 0 0 3px #3b82f61a}.font-family-caret{color:#64748b;font-size:12px}.font-family-menu{z-index:12000;background:#fff;border:1px solid #d4dce8;border-radius:12px;max-height:72vh;padding:8px;position:fixed;overflow-y:auto;box-shadow:0 24px 45px #0f172a2e}.font-family-group+.font-family-group{border-top:1px solid #edf2f7;margin-top:8px;padding-top:8px}.font-family-group-title{letter-spacing:.08em;text-transform:uppercase;color:#64748b;padding:4px 8px 6px;font-size:11px;font-weight:800}.font-family-group-list{flex-direction:column;gap:4px;display:flex}.font-family-option{color:#0f172a;text-align:left;cursor:pointer;background:#fff;border:1px solid #0000;border-radius:8px;padding:8px 10px;font-size:14px;transition:all .15s}.font-family-option:hover{background:#f8fafc;border-color:#d5deeb}.font-family-option.active{color:#1e3a8a;background:#eef2ff;border-color:#a5b4fc}.text-style-grid input:focus,.text-style-grid select:focus{border-color:#3b82f6;outline:none;box-shadow:0 0 0 3px #3b82f61a}.text-color-label{grid-column:1/-1}.text-color-row{grid-template-columns:52px 1fr;gap:8px;display:grid}.text-color-row input[type=color]{border-radius:8px;height:38px;padding:4px}.control-grid{background:#fff;border:1px solid #f1f5f9;border-radius:12px;padding:16px}.field-hint{color:#64748b;margin-top:8px;font-size:11px;line-height:1.4;display:block}input[type=range]{-webkit-appearance:none;background:#e2e8f0;border-radius:10px;width:100%;height:6px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;cursor:pointer;width:20px;height:20px;box-shadow:var(--shadow-sm);background:#3b82f6;border:2px solid #fff;border-radius:50%}.delete-btn-full{color:#ef4444;cursor:pointer;background:#fff;border:1px solid #fecaca;border-radius:10px;margin-top:10px;padding:12px;font-size:13px;font-weight:700;transition:all .2s}.delete-btn-full:hover{background:#fef2f2;border-color:#ef4444}.design-canvas-wrapper.hide-areas .design-slot{background:0 0;border-color:#0000}.design-canvas-wrapper.hide-areas .design-slot:hover{border-color:var(--accent-color);background:#3b82f60d}.design-canvas-wrapper.hide-areas .slot-placeholder{opacity:0}.design-canvas-wrapper.hide-areas .design-slot:hover .slot-placeholder{opacity:1}.section-header{justify-content:space-between;align-items:center;display:flex}.ios-toggle-container{align-items:center;gap:12px;display:flex}.toggle-label{color:var(--text-secondary);font-size:13px;font-weight:700}.ios-toggle{width:44px;height:24px;display:inline-block;position:relative}.toggle-slider{cursor:pointer;background-color:#e2e8f0;border-radius:24px;transition:all .4s;position:absolute;inset:0}.toggle-slider:before{content:"";background-color:#fff;border-radius:50%;width:20px;height:20px;transition:all .4s;position:absolute;bottom:2px;left:2px;box-shadow:0 2px 4px #0000001a}.ios-toggle input:checked+.toggle-slider{background-color:#10b981}.help-text-mini{color:#94a3b8;margin-top:6px;font-size:11px;font-style:italic}.template-library-btn .btn-icon{color:#3730a3;background:#eef2ff}@media (width<=900px){.designer-layout{grid-template-rows:auto auto;grid-template-columns:1fr;max-height:calc(100vh - 64px);overflow-y:auto}.designer-sidebar{box-sizing:border-box;border-top:1px solid #e2e8f0;border-left:none;gap:24px;width:100%;padding:20px}.designer-main{box-sizing:border-box;width:100%;min-height:450px;padding:16px}.canvas-container{box-sizing:border-box;width:100%;padding:16px}}.export-modal-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:10000;background:#0f172a73;justify-content:center;align-items:center;padding:24px;animation:.24s fadeIn;display:flex;position:fixed;inset:0}.export-modal{background:#fff;border-radius:28px;width:min(560px,100%);max-height:calc(100vh - 48px);padding:28px;animation:.32s cubic-bezier(.16,1,.3,1) slideUp;position:relative;overflow:auto;box-shadow:0 28px 70px #0f172a3d}.export-close-btn{color:#475569;cursor:pointer;background:#f1f5f9;border-radius:999px;justify-content:center;align-items:center;width:30px;height:30px;font-size:14px;font-weight:800;transition:all .2s;display:flex;position:absolute;top:14px;right:14px}.export-close-btn:hover{color:#0f172a;background:#e2e8f0}.export-brand{align-items:center;gap:14px;margin-bottom:18px;display:flex}.export-brand-logo{object-fit:contain;width:110px;height:auto}.export-brand-copy h2{letter-spacing:-.8px;margin:0;font-size:24px}.export-brand-copy p{color:var(--text-secondary);margin:4px 0 0;font-size:14px}.export-toggle-row{background:#f8fafc;border:1px solid #e2e8f0;border-radius:14px;justify-content:space-between;align-items:center;gap:16px;margin-top:18px;padding:14px 16px;display:flex}.export-preview-grid{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px;display:grid}.export-preview-card{border:1px solid var(--border-color);background:#f8fafc;border-radius:20px;overflow:hidden}.export-preview-meta{color:#334155;text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid #e2e8f0;justify-content:space-between;align-items:center;padding:12px 14px;font-size:12px;display:flex}.export-preview-meta strong{color:#0f172a}.export-preview-stage{background-image:radial-gradient(#dbe5f1 1px,#0000 1px);background-size:18px 18px;justify-content:center;align-items:center;min-height:260px;padding:16px;display:flex}.export-preview-mockup{aspect-ratio:16/10;width:min(95%,520px);position:relative}.export-preview-base{object-fit:contain;filter:drop-shadow(0 10px 20px #0f172a1a);width:100%;height:100%;display:block}.export-preview-slot{pointer-events:none;border:none;position:absolute;overflow:hidden}.export-preview-element{transform-origin:50%;position:absolute}.export-preview-element.is-image img{object-fit:contain;width:100%;height:auto;display:block}.export-preview-element.is-text span{white-space:nowrap;font-weight:700}.export-preview-empty{text-align:center;color:#64748b;background:#f8fafc;border:1px dashed #cbd5e1;border-radius:16px;grid-column:1/-1;padding:28px}.export-save-actions{grid-template-columns:1fr;gap:10px;margin-top:14px;display:grid}.export-save-btn{color:#0f172a;cursor:pointer;background:#fff;border:1px solid #cbd5e1;border-radius:12px;padding:12px 10px;font-size:13px;font-weight:700;transition:all .2s}.export-save-btn:hover:not(:disabled){border-color:#0f172a;transform:translateY(-1px);box-shadow:0 8px 20px #0f172a14}.export-save-btn:disabled{opacity:.55;cursor:not-allowed}.export-save-btn.test-print{color:#0f172a;background:#f8fafc;border-color:#cbd5e1;min-height:46px}.export-save-btn.full{color:#fff;background:#0f172a;border-color:#0f172a;grid-column:1/-1;min-height:52px;font-size:14px}.spinner{border:2px solid #cbd5e1;border-top-color:#0f172a;border-radius:50%;width:22px;height:22px;margin:0 auto 10px;animation:.8s linear infinite spin}@media (width<=680px){.export-modal{border-radius:20px;padding:18px}.export-brand{flex-direction:column;align-items:flex-start;gap:10px}.export-save-actions{grid-template-columns:1fr}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes slideUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.aop-workspace{height:100vh;max-height:100vh;font-family:var(--font-primary,"Inter", sans-serif);background:#fff;flex-direction:column;display:flex;overflow:hidden}.aop-workspace-header{color:#fff;z-index:200;background:#0f172a;justify-content:space-between;align-items:center;gap:16px;min-height:56px;padding:10px 24px;display:flex;position:sticky;top:0;box-shadow:0 2px 16px #0000004d}.aop-ws-header-left{flex:none;align-items:center;gap:16px;display:flex}.aop-header-logo{cursor:pointer;width:auto;height:28px;transition:opacity .2s;display:block}.aop-header-logo:hover{opacity:.8}.aop-header-divider{background-color:#cbd5e1;width:1px;height:20px}.aop-ws-header-left .text-button{color:#ffffffb3}.aop-ws-header-left .text-button:hover{color:#fff}.aop-ws-title{color:#fff;white-space:nowrap;font-size:15px;font-weight:800}.aop-ws-header-center{flex-wrap:wrap;flex:1;justify-content:center;align-items:center;gap:4px;display:flex}.aop-tab-btn{color:#ffffffa6;cursor:pointer;white-space:nowrap;background:0 0;border:1px solid #ffffff26;border-radius:8px;padding:6px 14px;font-size:12px;font-weight:700;transition:background .15s,color .15s}.aop-tab-btn.active{color:#0f172a;background:#fff}.aop-tab-btn.all-areas.active{color:#fff;background:#f97316;border-color:#f97316}.aop-ws-header-right{flex:none;align-items:center;gap:10px;display:flex}.aop-persist-msg{color:#fff9;font-size:12px}.aop-all-areas-view{flex:1;padding:40px;overflow-y:auto}.aop-all-areas-view h2{letter-spacing:.08em;text-transform:uppercase;color:#64748b;margin:0 0 24px;font-size:13px;font-weight:800}.aop-all-areas-grid{flex-wrap:wrap;gap:20px;display:flex}.aop-all-area-panel{cursor:pointer;flex-direction:column;align-items:center;gap:8px;display:flex;position:relative}.aop-all-area-canvas{background:#f8fafc;border:2px solid #e2e8f0;border-radius:10px;width:140px;height:180px;transition:border-color .2s;position:relative;overflow:hidden}.aop-all-area-bg{z-index:1;object-fit:fill;pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.aop-all-area-artwork-layer{z-index:2;pointer-events:none;position:absolute;inset:0;overflow:hidden}.aop-all-area-art{display:block}.aop-all-area-text{white-space:nowrap;line-height:1}.aop-all-area-label{color:#334155;font-size:12px;font-weight:700}.aop-all-area-empty{color:#f97316;background:#ffedd5e6;border-radius:99px;padding:2px 6px;font-size:10px;font-weight:700;position:absolute;bottom:4px;left:50%;transform:translate(-50%)}.aop-editor-body{flex:1;grid-template-columns:1fr 320px;min-height:0;display:grid;overflow:hidden}.aop-editor-workspace-split{background:#fff;flex:1;grid-template-columns:1fr 1fr;min-height:0;display:grid;overflow:hidden}.aop-live-mockup-area{background:#fff;border-left:none;flex-direction:column;justify-content:center;align-items:center;min-height:0;padding:32px;display:flex;position:relative;overflow:hidden}.aop-mockup-preview-view.is-live-split{background:0 0;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;padding:0;display:flex;overflow:hidden}.aop-mockup-preview-view.is-live-split .aop-mockup-stage-shell{background:0 0;justify-content:center;align-items:center;width:100%;padding:0;display:flex;box-shadow:none!important;border:none!important}.aop-mockup-preview-view.is-live-split .aop-product-mockup-stage{border-radius:12px;max-width:100%;box-shadow:none!important;border:none!important}.aop-mockup-preview-view.is-live-split .aop-product-mockup-base{max-height:calc(100vh - 140px)}.aop-mockup-preview-view.is-live-split .aop-mockup-stage-frame{--aop-live-mockup-image-scale:1;width:100%;max-width:calc((100vh - 180px) * var(--aop-preview-ratio,.75));transform-origin:50%;transform:scale(.92)}.aop-mockup-preview-view.is-live-split .aop-mockup-stage-frame .aop-product-mockup-stage{max-width:none;max-height:none}.aop-mockup-preview-view.is-live-split .aop-mockup-stage-frame .aop-product-mockup-base{object-fit:contain;width:100%;max-width:none;height:100%;max-height:none}.aop-canvas-area{background:#fff;flex-direction:column;justify-content:center;align-items:center;gap:12px;min-height:0;padding:32px;display:flex;position:relative;overflow:hidden}.aop-warnings{flex-direction:column;gap:6px;width:100%;max-width:700px;display:flex}.aop-warning-item{color:#92400e;background:#fffbeb;border:1px solid #fde68a;border-radius:8px;padding:8px 14px;font-size:12px;font-weight:700}.aop-panel-canvas-frame{width:100%;max-width:calc((100vh - 180px) * var(--aop-ui-preview-ratio,.75));aspect-ratio:var(--aop-ui-preview-ratio,.75);transform:scale(var(--aop-editor-visual-scale,1));transform-origin:50%;background:0 0;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.aop-panel-canvas{width:min(100%, calc(100% * var(--canvas-ratio,.75) / var(--aop-ui-preview-ratio,.75)));max-width:none;aspect-ratio:var(--canvas-ratio,.75);cursor:crosshair;background:0 0;border-radius:0;position:relative;overflow:hidden;box-shadow:none!important;border:none!important}.aop-panel-canvas.is-color-drop-target:before{content:"Drop color to fill object";z-index:80;color:#1d4ed8;letter-spacing:.02em;pointer-events:none;background:#eff6fff5;border:1px solid #2563eb47;border-radius:999px;padding:8px 14px;font-size:12px;font-weight:900;position:absolute;top:18px;left:50%;transform:translate(-50%);box-shadow:0 14px 32px #2563eb24}.aop-panel-canvas.is-color-drop-target .aop-guide-overlay{filter:drop-shadow(0 0 10px #2563eb73)}.aop-panel-bg{z-index:10;object-fit:fill;-webkit-user-select:none;user-select:none;pointer-events:none;width:100%;height:100%;display:block;position:absolute;inset:0}.aop-artwork-layer{z-index:5;pointer-events:none;position:absolute;inset:0;overflow:hidden}.aop-artwork-clip-frame{z-index:5;pointer-events:auto;width:100%;height:100%;position:absolute;inset:0;overflow:visible}.aop-artwork-clip-frame foreignObject{overflow:visible}.aop-artwork-clip-frame .aop-artwork-layer{z-index:auto;width:100%;height:100%;position:relative;inset:auto;overflow:visible}.aop-artwork-layer [data-element-id]{pointer-events:auto}.aop-object-color-fill{z-index:0;pointer-events:none;position:absolute;inset:0}.aop-element-scale-handle{cursor:nwse-resize;width:18px;height:18px;transform:scale(var(--aop-inverse-scale,1));transform-origin:50%;background:#2563eb;border:2px solid #fff;border-radius:999px;position:absolute;bottom:-14px;right:-14px;box-shadow:0 8px 18px #2563eb52}.aop-element-scale-handle:after{content:"";border-bottom:2px solid #fff;border-right:2px solid #fff;position:absolute;inset:4px}.aop-panel-no-template{color:#94a3b8;border:2px dashed #e2e8f0;border-radius:8px;justify-content:center;align-items:center;height:100%;margin:20px;font-size:13px;font-weight:600;display:flex}.aop-canvas-meta{z-index:60;color:#64748b;letter-spacing:.02em;background:#ffffffeb;border:1px solid #e2e8f0;border-radius:999px;padding:8px 12px;font-size:11px;font-weight:800;position:absolute;top:18px;right:24px;box-shadow:0 10px 26px #0f172a14}.aop-element-lock-badge{pointer-events:none;font-size:12px;position:absolute;top:-14px;right:-14px}.aop-guide{pointer-events:none;position:absolute}.aop-shape-border{width:100%;height:100%;position:absolute;inset:0;overflow:visible}.aop-shape-border polygon{fill:none;stroke:#2563eb;stroke-width:1.5px;stroke-dasharray:4 3;vector-effect:non-scaling-stroke}.aop-shape-border-fallback{border:1.5px dashed #2563eb;position:absolute}.aop-sidebar{overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#cbd5e1 #f1f5f9;background:linear-gradient(#fff 0%,#fbfcfe 100%);border-left:1px solid #e2e8f0;flex-direction:column;gap:0;height:100%;min-height:0;display:flex;overflow:hidden auto}.aop-sidebar::-webkit-scrollbar{width:6px}.aop-sidebar::-webkit-scrollbar-track{background:#f1f5f9}.aop-sidebar::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:99px}.aop-sidebar-section{border-bottom:1px solid #e2e8f0b3;flex-direction:column;gap:14px;padding:24px 20px;transition:all .2s;display:flex}.aop-sidebar-section-title{letter-spacing:.08em;text-transform:uppercase;color:#4f46e5;align-items:center;gap:8px;margin-bottom:2px;font-size:11px;font-weight:800;display:flex}.aop-sidebar-section-title:before{content:"";background:linear-gradient(#6366f1 0%,#4f46e5 100%);border-radius:2px;width:4px;height:12px;display:inline-block}.aop-toggle-row{color:#334155;justify-content:space-between;align-items:center;font-size:13.5px;font-weight:600;display:flex}.ios-toggle{cursor:pointer;width:44px;height:24px;display:inline-block;position:relative}.ios-toggle input{opacity:0;width:0;height:0}.toggle-slider{background:#cbd5e1;border-radius:99px;transition:all .2s cubic-bezier(.4,0,.2,1);position:absolute;inset:0}.toggle-slider:before{content:"";background:#fff;border-radius:50%;width:18px;height:18px;transition:all .2s cubic-bezier(.4,0,.2,1);position:absolute;top:3px;left:3px;box-shadow:0 1px 3px #00000026}.ios-toggle input:checked+.toggle-slider{background:linear-gradient(135deg,#6366f1 0%,#4f46e5 100%)}.ios-toggle input:checked+.toggle-slider:before{transform:translate(20px)}.aop-clear-design-btn{color:#dc2626;cursor:pointer;background:linear-gradient(#fff7f7 0%,#fff1f2 100%);border:1px solid #fca5a5;border-radius:10px;width:100%;padding:11px 16px;font-size:12px;font-weight:800;transition:all .2s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 4px #dc26260a}.aop-clear-design-btn:hover:not(:disabled){background:#fef2f2;border-color:#ef4444;transform:translateY(-1px);box-shadow:0 4px 12px #dc26261f}.aop-clear-design-btn:active:not(:disabled){transform:translateY(0)scale(.98)}.aop-clear-design-btn:disabled{cursor:not-allowed;opacity:.4;color:#94a3b8;box-shadow:none;background:#f8fafc;border-color:#e2e8f0}.aop-quick-actions{grid-template-columns:1fr 1fr;gap:12px;margin-bottom:8px;display:grid}.aop-action-btn{text-align:left;cursor:pointer;color:#1e293b;box-sizing:border-box;background:linear-gradient(#fff 0%,#f8fafc 100%);border:1px solid #d8e2ef;border-radius:14px;flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:10px;width:100%;min-height:124px;padding:14px 14px 12px;transition:transform .18s cubic-bezier(.4,0,.2,1),box-shadow .18s cubic-bezier(.4,0,.2,1),border-color .18s cubic-bezier(.4,0,.2,1);display:flex;box-shadow:0 4px 14px #0f172a08}.aop-action-btn:hover{border-color:#93c5fd;transform:translateY(-2px);box-shadow:0 8px 24px #3b82f61f}.aop-action-btn:active{transform:translateY(0)scale(.98)}.aop-btn-icon{border-radius:12px;flex-shrink:0;justify-content:center;align-items:center;width:42px;height:42px;transition:all .2s;display:flex}.aop-action-btn:hover .aop-btn-icon{transform:scale(1.08)}.aop-btn-icon.upload{color:#7c3aed;background:#f5f3ff;border:1px solid #e0dbfe}.aop-btn-icon.text{color:#0284c7;background:#f0f9ff;border:1px solid #e0f2fe}.aop-btn-icon.templates{color:#059669;background:#ecfdf5;border:1px solid #d1fae5}.aop-btn-icon.patterns{color:#4f46e5;background:#eef2ff;border:1px solid #e0e7ff}.aop-btn-icon.logos{color:#d97706;background:#fffbeb;border:1px solid #fef3c7}.aop-btn-title{color:#0f172a;font-size:13px;font-weight:800;line-height:1.25}.aop-btn-subtitle{color:#64748b;font-size:10.5px;font-weight:600;line-height:1.3}.aop-object-colors{background:linear-gradient(135deg,#fff 0%,#f8fafc 100%);border:1px solid #e2e8f0cc;border-radius:16px;flex-direction:column;gap:12px;margin-top:4px;padding:18px;display:flex;box-shadow:0 4px 20px #00000005}.aop-object-colors-head{justify-content:space-between;align-items:center;display:flex}.aop-object-colors-head span{color:#1e293b;letter-spacing:-.01em;font-size:13px;font-weight:750}.aop-clear-color-btn{color:#ef4444;cursor:pointer;background:0 0;border:none;border-radius:4px;padding:2px 6px;font-size:11px;font-weight:800;transition:background .15s}.aop-clear-color-btn:hover{background:#fef2f2}.aop-object-colors p{color:#64748b;margin:0;font-size:11.5px;font-weight:500;line-height:1.45}.aop-color-swatch-grid{grid-template-columns:repeat(5,1fr);gap:10px;margin-top:4px;display:grid}.aop-color-swatch{aspect-ratio:1;cursor:grab;border:1.5px solid #e2e8f0cc;border-radius:50%;min-height:auto;transition:all .2s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 6px #0f172a0d}.aop-color-swatch:hover{z-index:2;transform:scale(1.15)translateY(-1px);box-shadow:0 8px 16px #0f172a1f}.aop-color-swatch:active{cursor:grabbing;transform:scale(.95)}.aop-color-swatch.active{border-color:#4f46e5;transform:scale(1.1);box-shadow:0 0 0 3px #4f46e540,0 4px 10px #0f172a1a}.aop-custom-color{color:#475569;border-top:1px solid #f1f5f9;justify-content:space-between;align-items:center;gap:12px;margin-top:6px;padding-top:12px;font-size:12px;font-weight:700;display:flex}.aop-custom-color input[type=color]{appearance:none;cursor:pointer;background:0 0;border:1px solid #cbd5e1;border-radius:6px;width:50px;height:28px;padding:0;overflow:hidden}.aop-custom-color input[type=color]::-webkit-color-swatch-wrapper{padding:0}.aop-custom-color input[type=color]::-webkit-color-swatch{border:none;border-radius:5px}.aop-fit-object-btn{cursor:pointer;color:#0891b2;background:#ecfeff;border:1px solid #a5f3fc;border-radius:10px;width:100%;padding:11px 16px;font-size:12px;font-weight:800;transition:all .2s cubic-bezier(.4,0,.2,1)}.aop-fit-object-btn:hover{background:#cffafe;border-color:#67e8f9;transform:translateY(-1px)}.aop-fit-object-btn:active{transform:translateY(0)scale(.98)}.aop-apply-all-btn{cursor:pointer;color:#ea580c;background:#fff7ed;border:1px solid #ffedd5;border-radius:10px;width:100%;padding:11px 16px;font-size:12px;font-weight:800;transition:all .2s cubic-bezier(.4,0,.2,1)}.aop-apply-all-btn:hover{background:#ffedd5;border-color:#fed7aa;transform:translateY(-1px)}.aop-apply-all-btn:active{transform:translateY(0)scale(.98)}.aop-make-pattern-btn{cursor:pointer;color:#4338ca;background:#eef2ff;border:1px solid #c7d2fe;border-radius:10px;width:100%;padding:11px 16px;font-size:12px;font-weight:800;transition:all .2s cubic-bezier(.4,0,.2,1)}.aop-make-pattern-btn:hover{background:#e0e7ff;border-color:#a5b4fc;transform:translateY(-1px)}.aop-make-pattern-btn:active{transform:translateY(0)scale(.98)}.aop-make-pattern-btn:disabled{opacity:.56;cursor:not-allowed;transform:none}.aop-make-pattern-btn:disabled:hover,.aop-make-pattern-btn:disabled:active{background:#eef2ff;border-color:#c7d2fe;transform:none}.aop-make-pattern-btn.applying{animation:.9s ease-in-out infinite aopPatternApplyPulse}.aop-artwork-item.aop-pattern-item-enter{animation:.6s cubic-bezier(.2,.8,.2,1) aopPatternItemEnter}@keyframes aopPatternApplyPulse{0%{box-shadow:0 0 #6366f16b}to{box-shadow:0 0 0 12px #6366f100}}@keyframes aopPatternItemEnter{0%{opacity:.15;filter:saturate(1.8)brightness(1.2)}to{opacity:1;filter:saturate()brightness()}}.aop-ctrl-label{color:#475569;letter-spacing:-.01em;flex-direction:column;gap:6px;font-size:11.5px;font-weight:700;display:flex}.aop-ctrl-label input[type=text],.aop-ctrl-label input[type=number],.aop-ctrl-label select{color:#0f172a;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;width:100%;padding:10px 12px;font-size:13px;font-weight:550;transition:all .2s}.aop-ctrl-label input[type=text]:focus,.aop-ctrl-label input[type=number]:focus,.aop-ctrl-label select:focus{background:#fff;border-color:#4f46e5;outline:none;box-shadow:0 0 0 3px #4f46e51f}.aop-ctrl-label input[type=range]{accent-color:#4f46e5;cursor:pointer;background:#e2e8f0;border-radius:3px;outline:none;width:100%;height:6px}.aop-ctrl-2col{grid-template-columns:1fr 1fr;gap:8px;display:grid}.aop-print-size-box{color:#1e3a8a;background:linear-gradient(135deg,#eff6ff 0%,#dbeafe 100%);border:1px solid #bfdbfe;border-radius:14px;flex-direction:column;gap:10px;padding:16px;display:flex;box-shadow:0 4px 12px #2563eb08}.aop-print-size-box>span{letter-spacing:.08em;text-transform:uppercase;color:#1d4ed8;font-size:10px;font-weight:900}.aop-print-size-box>strong{color:#1e293b;font-size:15px;font-weight:800}.aop-print-size-box small{color:#475569;font-size:11px;font-weight:500;line-height:1.45}.aop-el-action-row{grid-template-columns:repeat(2,1fr);gap:8px;margin-top:8px;display:grid}.aop-el-btn{cursor:pointer;color:#334155;text-align:center;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:9px 12px;font-size:11.5px;font-weight:700;transition:all .16s}.aop-el-btn:hover{background:#f1f5f9;border-color:#cbd5e1;transform:translateY(-1px)}.aop-el-btn:active{transform:translateY(0)}.aop-el-btn.danger{color:#fff;background:linear-gradient(135deg,#ef4444 0%,#dc2626 100%);border-color:#0000;grid-column:span 2;box-shadow:0 4px 12px #dc262626}.aop-el-btn.danger:hover{color:#fff;background:linear-gradient(135deg,#dc2626 0%,#b91c1c 100%);box-shadow:0 6px 16px #dc262640}.aop-mobile-toolrail,.aop-mobile-sheet-backdrop{display:none}.aop-mobile-empty-sheet{color:#64748b;text-align:center;background:#fee2e2;border:1px dashed #cbd5e1;border-radius:18px;padding:22px;font-size:13px;font-weight:800}.aop-guide-legend{background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;flex-direction:column;gap:8px;padding:14px;display:flex}.aop-legend-item{color:#475569;align-items:center;gap:10px;font-size:12px;font-weight:600;display:flex}.aop-legend-color{border-radius:3px;width:16px;height:6px;display:inline-block}.aop-legend-color.bleed{background:#2563eb}.aop-legend-color.safe{background:#22c55e}.aop-legend-color.seam{background:#3b82f6}.aop-legend-status{text-align:center;border-radius:8px;margin-top:6px;padding:6px 12px;font-size:11px;font-weight:800;display:inline-block}.aop-legend-note{color:#94a3b8;margin:6px 0 0;font-size:11px;line-height:1.4}.aop-workspace-header{background:#fff;border-bottom:1px solid #e2e8f0;grid-template-columns:minmax(210px,.8fr) minmax(360px,1.5fr) minmax(260px,.9fr);align-items:center;gap:18px;min-height:64px;padding:12px 28px;display:grid;box-shadow:0 1px 3px #00000005}.aop-ws-header-left{gap:14px;min-width:0}.aop-back-button{color:#475569;cursor:pointer;background:0 0;border:none;align-items:center;gap:6px;padding:8px 12px;font-size:13px;font-weight:700;transition:color .18s,transform .18s;display:inline-flex}.aop-back-button:hover{color:#0f172a;transform:translate(-2px)}.aop-title-stack{flex-direction:column;gap:2px;min-width:0;display:flex}.aop-product-kicker{letter-spacing:.12em;text-transform:uppercase;color:#64748b;font-size:10px;font-weight:800}.aop-ws-title{color:#0f172a;text-overflow:ellipsis;font-size:16px;font-weight:800;line-height:1.1;overflow:hidden}.aop-ws-header-center{background:#f1f5f9;border-radius:999px;flex-wrap:nowrap;justify-content:center;align-items:center;gap:2px;width:fit-content;max-width:100%;margin:0 auto;padding:4px;display:flex;overflow:hidden}.aop-tab-btn{color:#475569;text-transform:uppercase;letter-spacing:.05em;cursor:pointer;white-space:nowrap;background:0 0;border:none;border-radius:999px;flex:none;align-items:center;gap:6px;min-height:32px;padding:6px 16px;font-size:12px;font-weight:700;transition:all .2s cubic-bezier(.4,0,.2,1);display:inline-flex}.aop-tab-btn:hover{color:#0f172a;background:#0f172a0a}.aop-tab-btn.active,.aop-tab-btn.all-areas.active,.aop-tab-btn.mockup-preview.active{color:#0f172a;background:#fff;box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f}.aop-ws-header-right{justify-content:flex-end;min-width:0}.aop-ws-header-right .secondary-button{color:#334155;background:#fff;border:1px solid #cbd5e1;border-radius:999px;min-height:38px;padding:0 18px;font-size:13px;font-weight:700;transition:all .18s;box-shadow:0 1px 2px #0000000d}.aop-ws-header-right .secondary-button:hover{color:#0f172a;background:#f8fafc;border-color:#94a3b8;transform:translateY(-1px)}.aop-ws-header-right .mockup-preview-toggle.active{color:#fff;background:#0f172a;border-color:#0f172a;box-shadow:0 4px 10px #0f172a1f}.aop-ws-header-right .mockup-preview-toggle.active:hover{color:#fff;background:#1e293b;border-color:#1e293b;transform:translateY(-1px)}.aop-ws-header-right .primary-button{color:#fff;background:#0f172a;border:none;border-radius:999px;min-height:38px;padding:0 18px;font-size:13px;font-weight:700;transition:all .18s;box-shadow:0 4px 10px #0f172a1f}.aop-ws-header-right .primary-button:hover{background:#1e293b;transform:translateY(-1px);box-shadow:0 6px 14px #0f172a2e}.aop-view-transition{animation:.26s cubic-bezier(.2,.8,.2,1) both aopViewIn}@keyframes aopViewIn{0%{opacity:0;transform:translateY(12px)scale(.985)}to{opacity:1;transform:translateY(0)scale(1)}}.aop-all-areas-view{background:radial-gradient(circle at 10% 10%,#3b82f614,#0000 28%),radial-gradient(circle at 90% 5%,#f973161a,#0000 25%),#eef3f9;padding:34px clamp(24px,4vw,56px) 48px}.aop-section-heading{flex-direction:column;gap:6px;max-width:720px;margin-bottom:26px;display:flex}.aop-section-heading span{color:#f97316;letter-spacing:.16em;text-transform:uppercase;font-size:11px;font-weight:950}.aop-section-heading h2{color:#0f172a;letter-spacing:-.04em;text-transform:none;margin:0;font-size:clamp(28px,4vw,44px);font-weight:950}.aop-section-heading p{color:#64748b;margin:0;font-size:14px;font-weight:650;line-height:1.55}.aop-all-areas-grid{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));align-items:stretch;gap:22px;display:grid}.aop-all-area-panel{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#ffffffd1;border:1px solid #94a3b842;border-radius:22px;padding:20px 18px 18px;transition:transform .2s,box-shadow .2s,border-color .2s;box-shadow:0 18px 40px #0f172a14}.aop-all-area-panel:hover{border-color:#f973167a;transform:translateY(-4px);box-shadow:0 24px 55px #0f172a24}.aop-all-area-panel:hover .aop-all-area-canvas{border-color:#0000}.aop-all-area-canvas{background:linear-gradient(#f8fafcd9,#f1f5f9e6);border:1px solid #94a3b838;border-radius:18px;overflow:visible;box-shadow:inset 0 0 0 1px #ffffffb8}.aop-all-area-object{z-index:1;border-radius:4px;position:absolute;inset:0;overflow:hidden}.aop-all-area-object:after{content:"";pointer-events:none;background:linear-gradient(135deg,#ffffff29,#0000 42%);position:absolute;inset:0}.aop-all-area-shape-border{z-index:4;pointer-events:none;filter:drop-shadow(0 8px 14px #2563eb1f);width:100%;height:100%;position:absolute;inset:0;overflow:visible}.aop-all-area-shape-border polygon{fill:none;stroke:#2563eb;stroke-width:1.5px;stroke-dasharray:4 3;vector-effect:non-scaling-stroke}.aop-all-area-label{color:#0f172a;letter-spacing:.03em;margin-top:8px;font-size:13px;font-weight:950}.aop-all-area-empty{bottom:16px}@media (width<=1120px){.aop-workspace-header{grid-template-columns:1fr;justify-items:stretch}.aop-ws-header-center,.aop-ws-header-right{justify-content:flex-start}}.aop-all-area-artwork-layer{z-index:1}.aop-all-area-color-fill{z-index:0;pointer-events:none;position:absolute;inset:0}.aop-mockup-preview-view{background:radial-gradient(circle at 8% 8%,#14b8a61a,#0000 26%),radial-gradient(circle at 88% 12%,#f973161a,#0000 24%),#eef3f9;flex:1;min-height:0;padding:34px clamp(24px,4vw,56px) 48px;overflow:auto}.aop-mockup-stage-shell{background:#ffffffc7;border:1px solid #94a3b847;border-radius:28px;flex-direction:column;align-items:center;gap:14px;padding:clamp(18px,3vw,34px);display:flex;box-shadow:0 24px 70px #0f172a1a}.aop-product-mockup-stage{background:0 0;border-radius:18px;max-width:min(820px,100%);line-height:0;display:inline-block;position:relative;overflow:hidden}.aop-product-mockup-base{z-index:1;object-fit:contain;-webkit-user-select:none;user-select:none;pointer-events:none;width:auto;max-width:100%;max-height:calc(100vh - 230px);display:block;position:relative}.aop-mockup-shading-overlay{z-index:3;object-fit:fill;pointer-events:none;-webkit-user-select:none;user-select:none;mix-blend-mode:multiply;opacity:.34;filter:grayscale()contrast(1.42)brightness(1.08);-webkit-mask-mode:alpha;width:100%;height:100%;position:absolute;inset:0;-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-source-type:alpha;mask-mode:alpha}.aop-mockup-stage-frame{width:min(820px,100%);aspect-ratio:var(--aop-preview-ratio,.75);background:0 0;position:relative;overflow:hidden}.aop-mockup-stage-frame .aop-product-mockup-stage{transform:scale(var(--aop-live-mockup-image-scale,1));transform-origin:50%;position:absolute;overflow:hidden}.aop-mockup-stage-frame .aop-product-mockup-base{object-fit:contain;width:100%;max-width:none;height:100%;max-height:none;display:block}.aop-final-mockup-gallery{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));align-items:start;gap:22px;display:grid}.aop-final-mockup-card{flex-direction:column;gap:12px;min-width:0;display:flex}.aop-final-mockup-card-head{justify-content:space-between;align-items:center;gap:12px;padding:0 6px;display:flex}.aop-final-mockup-card-head strong{color:#0f172a;font-size:14px;font-weight:950}.aop-final-mockup-card-head span{color:#64748b;text-align:right;font-size:11px;font-weight:850}.aop-final-mockup-card .aop-mockup-stage-shell{padding:clamp(14px,2vw,24px)}.aop-final-mockup-card .aop-product-mockup-stage{max-width:100%}.aop-final-mockup-card .aop-product-mockup-base{max-height:min(72vh,760px)}.aop-mockup-artwork-mask{mix-blend-mode:normal;z-index:2;-webkit-mask-mode:alpha;pointer-events:none;position:absolute;inset:0;overflow:hidden;-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-source-type:alpha;mask-mode:alpha}.aop-product-mockup-stage:not(.has-mask) .aop-mockup-artwork-mask{opacity:.95}.aop-mockup-artboard{transform-origin:50%;line-height:normal;position:absolute;overflow:hidden}.aop-mockup-color-fill{z-index:0;position:absolute;inset:-1px}.aop-mockup-art{-webkit-user-select:none;user-select:none;display:block}.aop-mockup-text{white-space:nowrap;-webkit-user-select:none;user-select:none;line-height:1;display:inline-block}.aop-mockup-preview-note{color:#475569;text-align:center;font-size:12px;font-weight:800}.aop-mockup-empty-state{color:#64748b;text-align:center;background:#ffffffc7;border:1px dashed #64748b57;border-radius:28px;flex-direction:column;justify-content:center;align-items:center;gap:8px;min-height:320px;display:flex}.aop-mockup-empty-state strong{color:#0f172a;font-size:20px;font-weight:950}.aop-mockup-empty-state span{max-width:420px;font-size:13px;font-weight:700;line-height:1.5}.aop-all-area-bg{z-index:2}.aop-center-snap-v,.aop-center-snap-h{z-index:75;pointer-events:none;background:#2563ebb8;position:absolute;box-shadow:0 0 0 1px #ffffffd9,0 0 18px #2563eb52}.aop-center-snap-v{width:1px;top:0;bottom:0;transform:translate(-50%)}.aop-center-snap-h{height:1px;left:0;right:0;transform:translateY(-50%)}@media (width<=900px){.aop-workspace-header{grid-template-columns:1fr;align-items:stretch;gap:10px;min-height:auto;padding:10px 12px;display:grid}.aop-ws-header-left{justify-content:space-between;gap:8px}.aop-header-divider,.aop-product-kicker{display:none}.aop-header-logo{height:22px}.aop-back-button{padding:6px 8px;font-size:12px}.aop-ws-title{max-width:42vw;font-size:13px}.aop-ws-header-center{scroll-snap-type:x proximity;touch-action:pan-x;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;border-radius:18px;flex-wrap:nowrap;justify-content:flex-start;gap:4px;width:100%;max-width:100%;margin:0;padding:5px;overflow:auto hidden}.aop-ws-header-center::-webkit-scrollbar{display:none}.aop-tab-btn{scroll-snap-align:start;flex:none;min-width:max-content;min-height:34px;padding:0 13px;font-size:10px;line-height:1}.aop-ws-header-right{overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;justify-content:flex-start;gap:8px;width:100%;overflow:auto hidden}.aop-ws-header-right::-webkit-scrollbar{display:none}.aop-ws-header-right .secondary-button{flex:none;min-height:34px;padding:0 13px;font-size:11px}.aop-ws-header-right .secondary-button:not(.mockup-preview-toggle){display:none}.aop-ws-header-right .mockup-preview-toggle{min-width:max-content}.aop-editor-body{--aop-mobile-preview-height:clamp(230px, 31dvh, 290px);--aop-mobile-preview-slot:calc(var(--aop-mobile-preview-height) + 24px);max-height:none;padding-bottom:calc(86px + env(safe-area-inset-bottom));grid-template-rows:1fr;grid-template-columns:1fr;overflow:hidden auto}.aop-editor-workspace-split{grid-template-columns:1fr;grid-template-rows:repeat(2, var(--aop-mobile-preview-slot));align-content:start;height:auto;min-height:0;overflow:visible}.aop-canvas-area{height:var(--aop-mobile-preview-slot);min-height:var(--aop-mobile-preview-slot);box-sizing:border-box;width:100%;padding:10px;overflow:hidden}.aop-panel-canvas-frame{max-width:min(92vw, calc(var(--aop-mobile-preview-height) * var(--aop-ui-preview-ratio,.75)), 360px);width:min(92vw, calc(var(--aop-mobile-preview-height) * var(--aop-ui-preview-ratio,.75)), 360px)}.aop-panel-canvas{max-width:none;width:min(100%, calc(100% * var(--canvas-ratio,.75) / var(--aop-ui-preview-ratio,.75)))}.aop-live-mockup-area{height:var(--aop-mobile-preview-slot);min-height:var(--aop-mobile-preview-slot);box-sizing:border-box;background:#fff;border-top:1px solid #f1f5f9;width:100%;padding:10px;display:flex;overflow:hidden}.aop-mockup-preview-view.is-live-split{height:100%;min-height:0}.aop-mockup-preview-view.is-live-split .aop-mockup-stage-frame{width:min(92vw, calc(var(--aop-mobile-preview-height) * var(--aop-preview-ratio,.75)), 360px);max-width:min(92vw, calc(var(--aop-mobile-preview-height) * var(--aop-preview-ratio,.75)), 360px);transform-origin:50%;transform:scale(.92)}.aop-mockup-preview-view.is-live-split .aop-mockup-stage-shell{width:100%;height:auto}.aop-mockup-preview-view.is-live-split .aop-mockup-stage-frame .aop-product-mockup-stage{transform:scale(var(--aop-live-mockup-image-scale,1));transform-origin:50%}.aop-mockup-preview-view.is-live-split .aop-mockup-shading-overlay{opacity:.46;filter:grayscale()contrast(1.65)brightness(1.04)}.aop-sidebar{display:none}.aop-mobile-toolrail{z-index:2300;padding:10px 10px calc(10px + env(safe-area-inset-bottom));-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#fffffff5;border-top:1px solid #e2e8f0e6;display:block;position:fixed;bottom:0;left:0;right:0;box-shadow:0 -14px 40px #0f172a1f}.aop-mobile-toolrail-scroll{overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;gap:8px;padding-bottom:2px;display:flex;overflow:auto hidden}.aop-mobile-toolrail-scroll::-webkit-scrollbar{display:none}.aop-mobile-toolrail.is-selection-mode{background:#f8fafcf7;border-top-color:#6366f13d}.aop-mobile-tool-btn{color:#0f172a;cursor:pointer;scroll-snap-align:start;background:#fff;border:1px solid #e2e8f0;border-radius:16px;flex-direction:column;flex:none;justify-content:center;align-items:center;gap:5px;min-width:72px;min-height:62px;padding:8px 10px;font-size:10px;font-weight:900;display:inline-flex;box-shadow:0 8px 18px #0f172a0f}.aop-mobile-tool-btn:disabled{opacity:.45;cursor:not-allowed}.aop-mobile-tool-btn.danger{color:#be123c;background:#fff1f2;border-color:#fecdd3}.aop-mobile-tool-icon{letter-spacing:-.02em;border-radius:11px;justify-content:center;align-items:center;width:28px;height:28px;font-size:9px;font-weight:950;display:inline-flex}.aop-mobile-tool-icon svg{width:16px;height:16px;display:block}.aop-mobile-tool-icon.upload{color:#7c3aed;background:#f5f3ff}.aop-mobile-tool-icon.text{color:#0284c7;background:#f0f9ff}.aop-mobile-tool-icon.templates{color:#059669;background:#ecfdf5}.aop-mobile-tool-icon.patterns{color:#4f46e5;background:#eef2ff}.aop-mobile-tool-icon.logos{color:#d97706;background:#fffbeb}.aop-mobile-tool-icon.colors{color:#dc2626;background:#fef2f2}.aop-mobile-tool-icon.back{color:#334155;background:#e2e8f0}.aop-mobile-tool-icon.make{color:#4338ca;background:#eef2ff}.aop-mobile-tool-icon.edit{color:#334155;background:#f8fafc}.aop-mobile-tool-icon.scale{color:#16a34a;background:#f0fdf4}.aop-mobile-tool-icon.rotate{color:#a21caf;background:#fdf4ff}.aop-mobile-tool-icon.delete{color:#be123c;background:#ffe4e6}.aop-mobile-tool-icon.fit{color:#0891b2;background:#ecfeff}.aop-mobile-tool-icon.apply{color:#ea580c;background:#fff7ed}.aop-mobile-tool-icon.clear{color:#be123c;background:#ffe4e6}.aop-mobile-sheet-backdrop{z-index:3000;pointer-events:none;background:0 0;justify-content:stretch;align-items:flex-end;display:flex;position:fixed;inset:0}.aop-mobile-sheet{pointer-events:auto;background:#fff;border-radius:24px 24px 0 0;flex-direction:column;width:100%;height:clamp(360px,58vh,540px);max-height:58vh;animation:.22s cubic-bezier(.2,.8,.2,1) both aopMobileSheetIn;display:flex;overflow:hidden;box-shadow:0 -28px 80px #0f172a38}.aop-mobile-sheet.is-compact{height:clamp(230px,34vh,340px);max-height:42vh}.aop-mobile-sheet-header{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fffffff5;border-bottom:1px solid #e2e8f0;justify-content:space-between;align-items:flex-start;gap:16px;padding:18px 18px 14px;display:flex}.aop-mobile-sheet-header span{color:#f97316;letter-spacing:.14em;text-transform:uppercase;font-size:10px;font-weight:950}.aop-mobile-sheet-header h3{color:#0f172a;letter-spacing:-.03em;margin:4px 0 0;font-size:22px;font-weight:950}.aop-mobile-sheet-header button{color:#0f172a;background:#f8fafc;border:1px solid #e2e8f0;border-radius:999px;min-height:34px;padding:0 14px;font-size:12px;font-weight:900}.aop-mobile-sheet-content{min-height:0;padding:16px 16px calc(22px + env(safe-area-inset-bottom));flex:1;overflow-y:auto}.aop-mobile-sheet-content .aop-object-colors{margin:0}.aop-mobile-edit-stack{flex-direction:column;gap:14px;display:flex}.aop-mobile-transform-sheet{flex-direction:column;gap:16px;display:flex}.aop-mobile-transform-actions{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;display:grid}.aop-mobile-transform-actions button{color:#0f172a;background:#f8fafc;border:1px solid #e2e8f0;border-radius:14px;min-height:42px;font-size:13px;font-weight:900}@keyframes aopMobileSheetIn{0%{opacity:.5;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}}@media (width<=520px){.aop-workspace-header{gap:8px;padding:8px 10px 10px}.aop-ws-header-left{min-height:32px}.aop-ws-title{max-width:48vw}.aop-ws-header-center{border-radius:16px;padding:4px}.aop-tab-btn{letter-spacing:.045em;min-height:32px;padding:0 11px;font-size:9px}.aop-ws-header-right .secondary-button{min-height:32px;padding:0 12px;font-size:10px}}:root{--bg-color:#fcfdfe;--panel-bg:#fff;--border-color:#e2e8f0;--text-primary:#0f172a;--text-secondary:#64748b;--accent-color:#0f172a;--accent-soft:#0f172a0d;--accent-glow:#0f172a26;--success-color:#10b981;--danger-color:#ef4444;--warning-color:#f59e0b;--accent-gradient:linear-gradient(135deg, #0f172a 0%, #334155 100%);--radius-sm:8px;--radius-md:14px;--radius-lg:24px;--shadow-sm:0 2px 8px #0000000a;--shadow-md:0 12px 30px #0000000f;--shadow-lg:0 20px 50px #0000001a;--transition:all .3s cubic-bezier(.4, 0, .2, 1)}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-color);color:var(--text-primary);-webkit-font-smoothing:antialiased;font-family:Outfit,sans-serif;line-height:1.5}.app-shell{flex-direction:column;height:100vh;display:flex;overflow:hidden}.main-content{background-image:radial-gradient(#e2e8f0 .8px,#0000 .8px);background-size:32px 32px;flex-direction:column;flex:1;display:flex;position:relative;overflow-y:auto}button{cursor:pointer;transition:var(--transition);border:none;font-family:inherit}.primary-button{background:var(--text-primary);color:#fff;border-radius:var(--radius-sm);justify-content:center;align-items:center;gap:8px;padding:12px 24px;font-size:14px;font-weight:700;display:flex}.primary-button:hover{opacity:.9;transform:translateY(-2px);box-shadow:0 10px 20px #0000001a}.secondary-button{color:var(--text-primary);border:1px solid var(--border-color);border-radius:var(--radius-sm);background:#fff;padding:12px 24px;font-size:14px;font-weight:600}.secondary-button:hover{border-color:var(--text-primary);background:#f8fafc}.text-button{color:var(--text-secondary);background:0 0;padding:8px 12px;font-size:14px;font-weight:600}.text-button:hover{color:var(--text-primary)}.page-header{border-bottom:1px solid var(--border-color);background:#fff;justify-content:space-between;align-items:center;padding:24px 40px;display:flex}.page-title{letter-spacing:-.5px;font-size:22px;font-weight:800}.status-line{background:var(--text-primary);color:#fff;box-shadow:var(--shadow-lg);z-index:9999;border-radius:99px;padding:10px 24px;font-size:13px;font-weight:700;animation:.4s cubic-bezier(.175,.885,.32,1.275) slideDown;position:fixed;top:24px;left:50%;transform:translate(-50%)}@keyframes slideDown{0%{opacity:0;top:-50px}to{opacity:1;top:24px}}