.lunaria-loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;padding:2rem}.lunaria-spinner{position:relative;display:flex;align-items:center;justify-content:center}.lunaria-spinner-small{width:60px;height:60px}.lunaria-spinner-medium{width:100px;height:100px}.lunaria-spinner-large{width:140px;height:140px}.lunaria-spinner-ring{position:absolute;border-radius:50%;border:2px solid transparent}.outer-ring{width:100%;height:100%;border-width:3px;background:linear-gradient(45deg,transparent 50%,var(--accent-gold, #d4af37) 50%);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#fff calc(100% - 3px));mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#fff calc(100% - 3px));animation:rotate-ring-slow 3s cubic-bezier(.4,0,.2,1) infinite;opacity:.8}.middle-ring{width:75%;height:75%;border-width:2px;border-top-color:var(--accent-gold-dark, #b8964b);border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;animation:rotate-ring-fast 1.8s cubic-bezier(.68,-.55,.265,1.55) infinite reverse;opacity:.6}.lunaria-logo-container{position:absolute;width:50%;height:50%;display:flex;align-items:center;justify-content:center;animation:logo-breathe 2s ease-in-out infinite;filter:drop-shadow(0 0 10px rgba(212,175,55,.3));clip-path:circle(50% at 50% 50%);overflow:hidden}.lunaria-logo{width:100%;height:100%;object-fit:contain;background:transparent!important;mix-blend-mode:normal}.particle{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--accent-gold, #d4af37);opacity:0;animation:particle-orbit 3s ease-in-out infinite}.particle-1{animation-delay:0s}.particle-2{animation-delay:1s}.particle-3{animation-delay:2s}.lunaria-loading-text{font-size:1rem;color:var(--text-secondary, #8a8a8a);font-weight:500;letter-spacing:.5px;animation:text-fade 1.5s ease-in-out infinite}@keyframes rotate-ring-slow{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes rotate-ring-fast{0%{transform:rotate(0);opacity:.6}50%{opacity:.9}to{transform:rotate(360deg);opacity:.6}}@keyframes logo-breathe{0%,to{transform:scale(1);filter:drop-shadow(0 0 10px rgba(212,175,55,.3))}50%{transform:scale(1.1);filter:drop-shadow(0 0 20px rgba(212,175,55,.5))}}@keyframes particle-orbit{0%{transform:rotate(0) translate(50px) rotate(0);opacity:0}10%{opacity:1}90%{opacity:1}to{transform:rotate(360deg) translate(50px) rotate(-360deg);opacity:0}}@keyframes text-fade{0%,to{opacity:.5}50%{opacity:1}}@media (prefers-color-scheme: dark){.lunaria-logo-container{filter:drop-shadow(0 0 15px rgba(212,175,55,.4))}.lunaria-loading-text{color:var(--text-secondary, #b0b0b0)}}@media (prefers-reduced-motion: reduce){.lunaria-spinner-ring,.particle,.lunaria-logo-container{animation:none}.outer-ring,.middle-ring{opacity:.5}.lunaria-logo-container{opacity:1}.lunaria-loading-text{animation:none;opacity:1}}.navigation-breadcrumb{position:sticky;top:0;left:0;right:0;z-index:1000;background:var(--app-bg-white, white);border-bottom:1px solid var(--app-border, #e0e0e0);padding:.75rem 1.5rem;display:flex;align-items:center;justify-content:space-between;box-shadow:0 1px 3px #0000000d;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#fffffff2}.breadcrumb-container{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;flex:1}.breadcrumb-item{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .75rem;background:transparent;border:none;border-radius:6px;font-size:.95rem;font-weight:500;color:var(--app-text-secondary, #666);cursor:pointer;transition:all .2s ease;white-space:nowrap;max-width:250px}.breadcrumb-item:hover:not(:disabled){background:var(--app-bg-hover, #f5f5f5);color:var(--app-text-primary, #2c3e50)}.breadcrumb-item:active:not(:disabled){transform:scale(.98)}.breadcrumb-item.active{color:var(--app-text-primary, #2c3e50);font-weight:600;cursor:default;background:var(--app-bg-secondary, #f8f9fa)}.breadcrumb-item:disabled{cursor:default}.breadcrumb-home{color:#3498db;font-weight:600}.breadcrumb-home:hover{background:#3498db1a;color:#2980b9}.breadcrumb-icon{font-size:1.1rem;line-height:1}.breadcrumb-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.breadcrumb-separator{color:var(--app-border, #ccc);font-size:.9rem;-webkit-user-select:none;user-select:none;margin:0 .25rem}.breadcrumb-info{display:flex;align-items:center;gap:.5rem}.depth-badge{display:inline-flex;align-items:center;padding:.35rem .75rem;background:linear-gradient(135deg,#3498db,#2980b9);color:#fff;border-radius:20px;font-size:.8rem;font-weight:600;box-shadow:0 2px 4px #3498db33}@media (max-width: 768px){.navigation-breadcrumb{padding:.5rem 1rem}.breadcrumb-item{padding:.4rem .6rem;font-size:.85rem;max-width:150px}.breadcrumb-icon{font-size:1rem}.breadcrumb-text{display:none}.breadcrumb-item.active .breadcrumb-text{display:inline}.depth-badge{font-size:.75rem;padding:.25rem .6rem}}.navigation-breadcrumb{animation:breadcrumbSlideIn .3s ease}@keyframes breadcrumbSlideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.home-screen{min-height:100vh;padding:2rem;overflow-y:auto;position:relative;z-index:1}.home-container{max-width:1400px;margin:0 auto}.home-header{display:none}.home-header h1{font-size:3rem;margin:0 0 1rem;font-weight:800;color:#fff;text-shadow:0 0 20px rgba(212,175,118,.8),0 0 40px rgba(212,175,118,.6),0 2px 4px rgba(0,0,0,.3);filter:drop-shadow(0 4px 12px rgba(212,175,118,.7));letter-spacing:1px}:root:not(.dark-mode) .home-header h1{color:#667eea;text-shadow:0 0 20px rgba(102,126,234,.5),0 0 40px rgba(102,126,234,.3),0 2px 4px rgba(0,0,0,.1);filter:drop-shadow(0 4px 12px rgba(102,126,234,.4))}.home-subtitle{font-size:1.3rem;color:#d4af76;margin:0;font-weight:600;letter-spacing:.5px;text-shadow:0 2px 8px rgba(212,175,118,.6)}.home-navigation{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-bottom:3rem;margin-top:2rem}@media (max-width: 1400px){.home-navigation{grid-template-columns:1fr}}.nav-card{background:linear-gradient(135deg,#1a1a2e,#16213e);border-radius:24px;padding:2.5rem;box-shadow:0 12px 40px #0006,0 0 0 1px #d4af7633,inset 0 1px #ffffff1a;transition:all .4s cubic-bezier(.4,0,.2,1);cursor:pointer;position:relative;animation:fadeInUp .6s ease-out;animation-fill-mode:both;display:flex;flex-direction:column;overflow:hidden;border:2px solid rgba(102,126,234,.3)}.nav-card:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at top right,rgba(102,126,234,.1) 0%,transparent 50%);pointer-events:none}.nav-card:nth-child(2){animation-delay:.1s}.nav-card:nth-child(3){animation-delay:.2s}.nav-card:hover{transform:translateY(-10px) scale(1.01);box-shadow:0 24px 64px #00000080,0 0 0 1px #667eea80,inset 0 1px #ffffff26;border-color:#667eea99}:root:not(.dark-mode) .nav-card{background:linear-gradient(135deg,#fff,#f8f9ff);border:2px solid rgba(102,126,234,.25);box-shadow:0 8px 32px #667eea26,0 2px 8px #0000001a,inset 0 1px #fffc}:root:not(.dark-mode) .nav-card:before{background:radial-gradient(circle at top right,rgba(102,126,234,.08) 0%,transparent 50%)}:root:not(.dark-mode) .nav-card:hover{transform:translateY(-10px) scale(1.01);box-shadow:0 20px 48px #667eea33,0 4px 12px #00000026,inset 0 1px #ffffffe6;border-color:#667eea80}:root:not(.dark-mode) .nav-card h2{color:#1a202c!important;text-shadow:none!important;font-weight:700!important}:root:not(.dark-mode) .nav-card>p{color:#4a5568!important;font-weight:600!important}:root:not(.dark-mode) .nav-card-features li{color:#2d3748!important;border-bottom:1px solid rgba(102,126,234,.15)!important;font-weight:600!important}:root:not(.dark-mode) .nav-card-features li:hover{color:#1a202c!important;border-bottom-color:#667eea4d!important;padding-left:.5rem}:root:not(.dark-mode) .nav-card-badge{background:#667eea26!important;color:#667eea!important;font-weight:700!important}:root:not(.dark-mode) .nav-card-cta{background:linear-gradient(135deg,#667eea,#764ba2)!important;color:#fff!important;font-weight:600!important}:root:not(.dark-mode) .nav-card-cta:hover{transform:translateY(-2px);box-shadow:0 8px 24px #667eea66!important}.nav-card-icon{font-size:4rem;margin-bottom:1rem;filter:drop-shadow(0 0 16px rgba(102,126,234,.6));font-weight:300;position:relative;z-index:1}.nav-card h2{margin:0 0 .75rem;font-size:1.8rem;color:#fff;font-weight:700;text-shadow:0 2px 12px rgba(102,126,234,.3);position:relative;z-index:1}.nav-card>p{color:#fffc;font-size:1.05rem;margin:0 0 1.5rem;line-height:1.5;position:relative;z-index:1}.nav-card-features{list-style:none;padding:0;margin:0 0 2rem;position:relative;z-index:1}.nav-card-features li{padding:.75rem 0;color:#ffffffd9;font-size:.95rem;line-height:1.6;border-bottom:1px solid rgba(255,255,255,.1);transition:all .2s ease}.nav-card-features li:hover{color:#fff;padding-left:.5rem;border-bottom-color:#667eea4d}.nav-card-features li:last-child{border-bottom:none}.nav-card-badge{position:absolute;top:1.5rem;right:1.5rem;background:linear-gradient(135deg,#a68556,#8b6f47);color:#fff;padding:.5rem 1.125rem;border-radius:24px;font-size:.85rem;font-weight:700;letter-spacing:.5px;box-shadow:0 4px 12px #d4af7666,inset 0 1px #ffffff4d;border:1.5px solid rgba(255,255,255,.3);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:2;text-shadow:0 1px 2px rgba(0,0,0,.2)}.nav-card-btn{width:100%;padding:1.125rem 2rem;background:linear-gradient(135deg,#a68556,#8b6f47);color:#fff;border:none;border-radius:14px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 6px 20px #d4af7666,0 2px 8px #0000004d,inset 0 1px #ffffff4d;margin-top:auto;position:relative;z-index:1;overflow:hidden;border:2px solid rgba(255,255,255,.2);text-shadow:0 1px 2px rgba(0,0,0,.2);letter-spacing:.3px}.nav-card-btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:left .5s ease}.nav-card-btn:hover:before{left:100%}.nav-card-btn:hover{transform:translateY(-3px) scale(1.01);box-shadow:0 10px 28px #d4af7680,0 4px 12px #0006,inset 0 1px #fff6;background:linear-gradient(135deg,#b89968,#a68556)}.home-info{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem;animation:fadeIn .8s ease-out .4s;animation-fill-mode:both}.info-card{background:linear-gradient(135deg,#1a1a2e,#16213e);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:16px;padding:1.75rem;display:flex;gap:1.25rem;align-items:flex-start;box-shadow:0 6px 20px #0000004d,0 0 0 1px #d4af7633,inset 0 1px #ffffff1a;border:1.5px solid rgba(212,175,118,.25);transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.info-card:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at top left,rgba(212,175,118,.08) 0%,transparent 50%);pointer-events:none}.info-card:hover{transform:translateY(-4px);box-shadow:0 10px 28px #0006,0 0 0 1px #d4af7666,inset 0 1px #ffffff26;border-color:#d4af7666}:root:not(.dark-mode) .info-card{background:linear-gradient(135deg,#fff,#fafbff)!important;border:2px solid rgba(102,126,234,.3)!important;box-shadow:0 4px 16px #667eea1f,0 1px 4px #00000014,inset 0 1px #ffffffe6!important}:root:not(.dark-mode) .info-card:before{background:radial-gradient(circle at top left,rgba(102,126,234,.06) 0%,transparent 50%)!important}:root:not(.dark-mode) .info-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px #667eea2e,0 2px 8px #0000001a,inset 0 1px #ffffffe6!important;border-color:#667eea80!important}:root:not(.dark-mode) .info-icon{color:#667eea!important;filter:drop-shadow(0 0 8px rgba(102,126,234,.5))!important;background:#667eea1a!important;border-radius:50%;padding:.5rem}:root:not(.dark-mode) .info-card strong{color:#1a202c!important;text-shadow:none!important;font-weight:700!important}:root:not(.dark-mode) .info-card p{color:#4a5568!important;font-weight:600!important}.info-icon{font-size:2.25rem;flex-shrink:0;color:#d4af76;filter:drop-shadow(0 0 12px rgba(212,175,118,.8));position:relative;z-index:1;font-weight:400}.info-card strong{display:block;color:#fff;font-size:1.05rem;margin-bottom:.35rem;position:relative;z-index:1;text-shadow:0 1px 4px rgba(212,175,118,.2)}.info-card p{margin:0;color:#fffc;font-size:.9rem;line-height:1.6;position:relative;z-index:1}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 768px){.home-screen{padding:1rem}.header-content{flex-direction:column;gap:1rem}.header-text{align-items:center;text-align:center}.logo-image{height:60px}.home-header h1{font-size:1.8rem}.header-slogan{font-size:.95rem;text-align:center}.home-subtitle{font-size:1rem}.nav-card{padding:1.5rem}.nav-card h2{font-size:1.5rem}.home-info{grid-template-columns:1fr}}.delete-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:10000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fadeIn .2s ease-in}.delete-modal{background:var(--app-card-bg, #ffffff);border-radius:16px;box-shadow:0 20px 60px #0000004d;width:90%;max-width:480px;padding:2rem;animation:slideUp .3s ease-out;border:1px solid var(--app-border-light, rgba(0, 0, 0, .1))}@keyframes slideUp{0%{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.delete-modal-icon{display:flex;justify-content:center;margin-bottom:1.5rem}.delete-icon-circle{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,#ef44441a,#dc262626);display:flex;align-items:center;justify-content:center;color:#dc2626;animation:scaleIn .4s cubic-bezier(.34,1.56,.64,1)}@keyframes scaleIn{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}.delete-modal-content{text-align:center;margin-bottom:2rem}.delete-modal-title{font-size:1.5rem;font-weight:700;color:var(--app-text-primary, #1f2937);margin:0 0 .75rem}.delete-modal-message{font-size:1rem;color:var(--app-text-secondary, #6b7280);margin:0 0 1rem;line-height:1.5}.delete-modal-message strong{color:var(--app-text-primary, #1f2937);font-weight:600}.delete-modal-warning{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem 1rem;background:#ef444414;border-left:3px solid #ef4444;border-radius:6px;font-size:.9rem;color:#dc2626;margin:0;font-weight:500}.delete-modal-actions{display:flex;gap:.75rem;justify-content:flex-end}.delete-modal-btn{padding:.75rem 1.5rem;border-radius:8px;font-size:.95rem;font-weight:600;cursor:pointer;transition:all .2s ease;border:none;display:flex;align-items:center;gap:.5rem}.delete-modal-btn-cancel{background:var(--app-bg-secondary, #f3f4f6);color:var(--app-text-primary, #374151);border:2px solid var(--app-border, #e5e7eb)}.delete-modal-btn-cancel:hover{background:var(--app-bg-tertiary, #e5e7eb);transform:translateY(-1px)}.delete-modal-btn-delete{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;box-shadow:0 4px 12px #ef44444d}.delete-modal-btn-delete:hover{background:linear-gradient(135deg,#dc2626,#b91c1c);transform:translateY(-2px);box-shadow:0 6px 16px #ef444466}.delete-modal-btn-delete:active{transform:translateY(0)}.dark-mode .delete-modal{background:var(--app-card-bg, #1f2937);border-color:#ffffff1a}.dark-mode .delete-modal-title{color:var(--app-text-primary, #f9fafb)}.dark-mode .delete-modal-message{color:var(--app-text-secondary, #d1d5db)}.dark-mode .delete-modal-message strong{color:var(--app-text-primary, #f9fafb)}.dark-mode .delete-modal-btn-cancel{background:#374151;color:#f9fafb;border-color:#4b5563}.dark-mode .delete-modal-btn-cancel:hover{background:#4b5563}.dark-mode .delete-icon-circle{background:linear-gradient(135deg,#ef444426,#dc262633)}@media (max-width: 640px){.delete-modal{padding:1.5rem}.delete-icon-circle{width:64px;height:64px}.delete-icon-circle svg{width:36px;height:36px}.delete-modal-title{font-size:1.25rem}.delete-modal-message{font-size:.9rem}.delete-modal-actions{flex-direction:column-reverse}.delete-modal-btn{width:100%;justify-content:center}}.info-tooltip-bar{position:relative;width:100%;margin-bottom:1.5rem;border-radius:12px;overflow:hidden;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 8px #00000014;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.info-tooltip-bar.variant-default{background:linear-gradient(135deg,#667eea14,#764ba214);border:2px solid rgba(102,126,234,.2)}.info-tooltip-bar.variant-designs{background:linear-gradient(135deg,#9c27b014,#7b1fa214);border:2px solid rgba(156,39,176,.2)}.info-tooltip-bar.variant-projects{background:linear-gradient(135deg,#4caf5014,#388e3c14);border:2px solid rgba(76,175,80,.2)}.info-tooltip-bar.variant-inspirations{background:linear-gradient(135deg,#ff980014,#f57c0014);border:2px solid rgba(255,152,0,.2)}.info-tooltip-bar.expanded{box-shadow:0 4px 16px #0000001f}.tooltip-toggle{width:100%;padding:1rem 1.5rem;background:transparent;border:none;cursor:pointer;transition:all .2s ease;display:block}.tooltip-toggle:hover{background:#ffffff1a}.toggle-content{display:flex;align-items:center;gap:.75rem;justify-content:flex-start}.toggle-icon{font-size:1.4rem;line-height:1;flex-shrink:0}.toggle-text{font-size:1rem;font-weight:600;color:var(--app-text-primary, #2c3e50);flex:1;text-align:left}.toggle-arrow{font-size:.8rem;color:var(--app-text-secondary, #666);transition:transform .3s ease;flex-shrink:0}.toggle-arrow.up,.toggle-arrow.down{transform:rotate(0)}.tooltip-content{padding:0 1.5rem 1.5rem;animation:fadeIn .25s ease-in-out}.tooltip-list{list-style:none;padding:0;margin:0;display:grid;gap:.75rem}.tooltip-item{display:flex;align-items:flex-start;gap:.75rem;padding:.5rem;border-radius:6px;transition:all .2s ease}.tooltip-item:hover{background:#ffffff80;transform:translate(4px)}.tooltip-check{font-weight:700;font-size:1rem;flex-shrink:0;line-height:1.5}.variant-default .tooltip-check{color:#667eea}.variant-designs .tooltip-check{color:#9c27b0}.variant-projects .tooltip-check{color:#4caf50}.variant-inspirations .tooltip-check{color:#ff9800}.tooltip-text{font-size:.95rem;color:var(--app-text-secondary, #666);line-height:1.5;flex:1}.dark-mode .info-tooltip-bar.variant-default{background:linear-gradient(135deg,#667eea26,#764ba226);border-color:#667eea4d}.dark-mode .info-tooltip-bar.variant-designs{background:linear-gradient(135deg,#9c27b026,#7b1fa226);border-color:#9c27b04d}.dark-mode .info-tooltip-bar.variant-projects{background:linear-gradient(135deg,#4caf5026,#388e3c26);border-color:#4caf504d}.dark-mode .info-tooltip-bar.variant-inspirations{background:linear-gradient(135deg,#ff980026,#f57c0026);border-color:#ff98004d}.dark-mode .tooltip-toggle:hover{background:#0003}.dark-mode .tooltip-item:hover{background:#0000004d}.dark-mode .toggle-text{color:#d4af76f2}.dark-mode .toggle-arrow{color:#d4af76b3}.dark-mode .tooltip-text{color:#d4af76cc}@media (max-width: 768px){.tooltip-toggle{padding:.875rem 1.25rem}.toggle-text{font-size:.95rem}.tooltip-content{padding:0 1.25rem 1.25rem}.tooltip-item{padding:.4rem}.tooltip-text{font-size:.9rem}}@media (max-width: 480px){.toggle-content{gap:.5rem}.toggle-icon{font-size:1.2rem}.toggle-text{font-size:.9rem}}.unified-dialog-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:999999;display:flex;align-items:center;justify-content:center;padding:3rem 1.5rem;animation:fadeIn .2s ease-out}.unified-dialog{width:90vw;max-width:1100px;max-height:90vh;background:#fff;border-radius:16px;box-shadow:0 20px 60px #0000004d;display:flex;flex-direction:column;overflow:hidden;animation:slideUp .3s ease-out}.unified-header{padding:1.5rem 2rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;display:flex;justify-content:space-between;align-items:center}.unified-header h2{margin:0;font-size:1.5rem;font-weight:700}.unified-header .btn-close{background:#fff3;border:none;color:#fff;width:36px;height:36px;border-radius:50%;font-size:1.25rem;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center}.unified-header .btn-close:hover{background:#ffffff4d;transform:scale(1.1)}.mode-toggle{display:flex;background:#f8f9fa;border-bottom:2px solid #e9ecef;padding:.5rem;gap:.5rem}.mode-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:.5rem;padding:1rem 1.5rem;background:none;border:none;font-size:1rem;font-weight:600;color:#6c757d;cursor:pointer;transition:all .2s;position:relative;border-radius:8px}.mode-btn:hover{background:#667eea0d;color:#667eea}.mode-btn.active{color:#667eea;background:#fff;box-shadow:0 2px 8px #00000014}.mode-icon{font-size:1.25rem}.mode-label{font-size:1rem}.unified-content{flex:1;overflow-y:auto;display:flex;gap:2rem;padding:2rem}.settings-panel{flex:1;min-width:320px;max-width:400px}.settings-panel>h3{margin:0 0 1.5rem;font-size:1.2rem;font-weight:700;color:#2c3e50}.setting-section{margin-bottom:1.5rem;padding-bottom:1.5rem;border-bottom:1px solid #e9ecef}.setting-section:last-child{border-bottom:none}.setting-section h4{margin:0 0 1rem;font-size:1rem;font-weight:600;color:#2c3e50}.setting-checkbox{display:flex;align-items:flex-start;gap:.75rem;padding:1rem;background:#f8f9fa;border-radius:8px;margin-bottom:.75rem;cursor:pointer;transition:all .2s;border:2px solid transparent}.setting-checkbox:hover{background:#e9ecef;border-color:#667eea}.setting-checkbox input[type=checkbox]{margin:.25rem 0 0;width:18px;height:18px;cursor:pointer;accent-color:#667eea;flex-shrink:0}.checkbox-content{flex:1;display:flex;flex-direction:column;gap:.25rem}.checkbox-label{font-size:.95rem;font-weight:600;color:#2c3e50}.checkbox-hint{font-size:.85rem;color:#6c757d;line-height:1.4}.setting-checkbox input[type=checkbox]:checked~.checkbox-content .checkbox-label{color:#667eea}.setting-radio{display:flex;align-items:center;padding:.75rem 1rem;background:#f8f9fa;border-radius:8px;margin-bottom:.5rem;cursor:pointer;transition:all .2s;border:2px solid transparent}.setting-radio:hover{background:#e9ecef;border-color:#667eea}.setting-radio input[type=radio]{margin:0 .75rem 0 0;width:18px;height:18px;cursor:pointer;accent-color:#667eea}.setting-radio input[type=radio]:checked+span{font-weight:600;color:#667eea}.setting-radio span{flex:1;font-size:.95rem;color:#2c3e50}.setting-select{width:100%;padding:.75rem 1rem;background:#f8f9fa;border:2px solid transparent;border-radius:8px;font-size:.95rem;color:#2c3e50;cursor:pointer;transition:all .2s}.setting-select:hover{background:#e9ecef;border-color:#667eea}.setting-select:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.color-picker-group{margin-top:1rem;padding:1rem;background:#f8f9fa;border-radius:8px}.color-label{display:block;font-size:.85rem;font-weight:600;color:#6c757d;margin-bottom:.5rem}.color-input-wrapper{display:flex;gap:.5rem}.color-picker{width:50px;height:40px;border:none;border-radius:6px;cursor:pointer;box-shadow:0 2px 4px #0000001a}.color-text{flex:1;padding:.5rem 1rem;border:2px solid #e9ecef;border-radius:6px;font-size:.9rem;font-family:Courier New,monospace;transition:all .2s}.color-text:focus{outline:none;border-color:#667eea}.btn-primary{width:100%;padding:1rem 1.5rem;background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:12px;color:#fff;font-size:1.05rem;font-weight:700;cursor:pointer;transition:all .3s;box-shadow:0 4px 15px #667eea66;margin-top:1rem;margin-bottom:1rem}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #667eea80}.btn-primary:active:not(:disabled){transform:translateY(0)}.btn-secondary{width:100%;padding:.875rem 1.25rem;background:#f8f9fa;border:2px solid #e9ecef;border-radius:10px;color:#2c3e50;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s}.btn-secondary:hover{background:#e9ecef;border-color:#667eea;color:#667eea}.success-message{margin-top:1rem;padding:.875rem 1.25rem;background:#d4edda;border:1px solid #c3e6cb;border-radius:8px;color:#155724;font-size:.95rem;font-weight:600;text-align:center}.error-message{margin-top:1rem;padding:.875rem 1.25rem;background:#f8d7da;border:1px solid #f5c6cb;border-radius:8px;color:#721c24;font-size:.95rem;font-weight:600;text-align:center}.preview-panel{flex:1;min-width:400px}.preview-panel h3{margin:0 0 1.5rem;font-size:1.2rem;font-weight:700;color:#2c3e50}.preview-container{background:#f8f9fa;border-radius:12px;padding:2rem;box-shadow:inset 0 2px 8px #0000000d}.preview-canvas{width:100%;height:auto;border-radius:8px;box-shadow:0 4px 12px #0000001a;background:#fff}.preview-info{display:flex;justify-content:center;align-items:center;gap:.75rem;margin-top:1rem}.preview-badge{font-size:.85rem;font-weight:600;color:#667eea;background:#667eea1a;padding:.375rem .875rem;border-radius:12px}.preview-badge.quality{color:#764ba2;background:#764ba21a}.preview-hint{margin:1rem 0 0;font-size:.9rem;color:#6c757d;line-height:1.5;text-align:center}.share-options{display:flex;flex-direction:column;gap:1.5rem}.share-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem;background:#f8f9fa;border-radius:12px;text-align:center;min-height:300px}.placeholder-icon{font-size:4rem;margin-bottom:1rem;opacity:.5}.share-placeholder p{font-size:1rem;color:#6c757d;line-height:1.6;max-width:400px}.share-link-box{background:#f8f9fa;border-radius:12px;padding:1.5rem;border:2px solid #e9ecef}.share-link-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.share-link-label{font-size:.9rem;font-weight:700;color:#2c3e50;text-transform:uppercase;letter-spacing:.5px}.share-expiry{font-size:.85rem;color:#6c757d;background:#fff;padding:.25rem .75rem;border-radius:8px}.share-link-input-group{display:flex;gap:.75rem}.share-link-input{flex:1;padding:.875rem 1rem;background:#fff;border:2px solid #e9ecef;border-radius:8px;font-size:.9rem;color:#2c3e50;font-family:Courier New,monospace}.share-link-input:focus{outline:none;border-color:#667eea}.btn-copy{padding:.875rem 1.5rem;background:#fff;border:2px solid #667eea;border-radius:8px;color:#667eea;font-size:.95rem;font-weight:600;cursor:pointer;transition:all .2s;white-space:nowrap}.btn-copy:hover{background:#667eea;color:#fff}.qr-code-section{display:flex;flex-direction:column;gap:1rem}.qr-code-container{display:flex;flex-direction:column;align-items:center;padding:2rem;background:#fff;border-radius:12px;box-shadow:0 2px 8px #00000014}.qr-code-container svg{border-radius:8px}.qr-hint{margin:1rem 0 0;font-size:.9rem;color:#6c757d;text-align:center}.social-share-section h4{margin:0 0 1rem;font-size:1rem;font-weight:700;color:#2c3e50}.social-buttons{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.75rem}.social-btn{display:flex;align-items:center;justify-content:center;padding:.875rem 1rem;border-radius:8px;font-size:.9rem;font-weight:600;text-decoration:none;transition:all .2s;border:2px solid transparent}.social-btn.whatsapp{background:#25d366;color:#fff}.social-btn.whatsapp:hover{background:#20ba5a;transform:translateY(-2px);box-shadow:0 4px 12px #25d3664d}.social-btn.email{background:#ea4335;color:#fff}.social-btn.email:hover{background:#d93025;transform:translateY(-2px);box-shadow:0 4px 12px #ea43354d}.social-btn.telegram{background:#08c;color:#fff}.social-btn.telegram:hover{background:#0077b5;transform:translateY(-2px);box-shadow:0 4px 12px #0088cc4d}.social-btn.facebook{background:#1877f2;color:#fff}.social-btn.facebook:hover{background:#0c66d8;transform:translateY(-2px);box-shadow:0 4px 12px #1877f24d}.social-btn.twitter{background:#1da1f2;color:#fff}.social-btn.twitter:hover{background:#0c8fdb;transform:translateY(-2px);box-shadow:0 4px 12px #1da1f24d}.material-hint{font-size:.85rem;color:#6c757d;line-height:1.5;margin:0 0 1rem}.material-preview-note{padding:.75rem 1rem;background:#fff3cd;border:2px solid #ffc107;border-radius:8px;color:#856404;font-size:.85rem;font-weight:600;margin-bottom:1rem;text-align:center}.material-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:.75rem;margin-bottom:1rem}.material-option{position:relative;aspect-ratio:1;border-radius:8px;overflow:hidden;cursor:pointer;border:2px solid #e9ecef;transition:all .2s;background:#fff}.material-option:hover{transform:scale(1.05);box-shadow:0 4px 12px #00000026}.material-option.selected{border-color:#667eea;box-shadow:0 4px 12px #667eea4d}.material-preview{width:100%;height:100%;background-size:cover;background-position:center;background-repeat:no-repeat}.material-name{position:absolute;bottom:0;left:0;right:0;padding:.5rem .25rem;background:linear-gradient(to top,rgba(0,0,0,.7),transparent);color:#fff;font-size:.75rem;font-weight:600;text-align:center;pointer-events:none}.material-checkmark{position:absolute;top:.25rem;right:.25rem;width:24px;height:24px;border-radius:50%;background:#667eea;color:#fff;display:flex;align-items:center;justify-content:center;font-size:.875rem;font-weight:700;box-shadow:0 2px 8px #0000004d;pointer-events:none}.material-warning{padding:.75rem 1rem;background:#f8d7da;border:2px solid #f5c6cb;border-radius:8px;color:#721c24;font-size:.85rem;font-weight:600;text-align:center}.toggle-switch-wrapper{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;background:#f8f9fa;border-radius:12px;margin-bottom:.75rem;cursor:pointer;transition:all .2s;border:2px solid transparent}.toggle-switch-wrapper:hover{background:#e9ecef;border-color:#667eea}.toggle-switch-content{flex:1;display:flex;flex-direction:column;gap:.25rem;margin-right:1rem}.toggle-label{font-size:.95rem;font-weight:600;color:#2c3e50}.toggle-hint{font-size:.85rem;color:#6c757d;line-height:1.4}.toggle-switch{position:relative;width:52px;height:28px;flex-shrink:0}.toggle-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#cbd5e0;transition:all .3s;border-radius:34px}.toggle-slider:before{position:absolute;content:"";height:20px;width:20px;left:4px;bottom:4px;background-color:#fff;transition:all .3s;border-radius:50%;box-shadow:0 2px 4px #0003}.toggle-switch-wrapper.active .toggle-label{color:#667eea}.collapsible-section{margin-bottom:1rem;border:2px solid #e9ecef;border-radius:12px;overflow:hidden;background:#fff;transition:all .2s}.collapsible-section:hover{border-color:#667eea}.collapsible-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;cursor:pointer;background:#f8f9fa;transition:all .2s;-webkit-user-select:none;user-select:none}.collapsible-header:hover{background:#e9ecef}.collapsible-header.active{background:linear-gradient(135deg,#667eea1a,#764ba21a)}.collapsible-title{display:flex;align-items:center;gap:.5rem;font-size:1rem;font-weight:700;color:#2c3e50}.collapsible-title-icon{font-size:1.25rem}.collapsible-arrow{font-size:1.25rem;color:#6c757d;transition:transform .3s}.collapsible-arrow.open{transform:rotate(180deg)}.collapsible-content{max-height:0;overflow:hidden;transition:max-height .3s ease-out,padding .3s ease-out}.collapsible-content.open{max-height:2000px;padding:1.25rem}.collapsible-content-inner{display:flex;flex-direction:column;gap:.75rem}@media (max-width: 768px){.unified-content{flex-direction:column}.settings-panel,.preview-panel{min-width:auto;max-width:none}.unified-dialog{width:95vw;max-height:95vh}.mode-toggle{flex-direction:column;padding:.5rem}.mode-btn{width:100%}.social-buttons{grid-template-columns:1fr}.material-grid{grid-template-columns:repeat(3,1fr)}}.material-hint{font-size:.9rem!important;color:#2c3e50!important;font-weight:500;background:#f8f9fa;padding:.75rem 1rem;border-radius:8px;border-left:4px solid #667eea}.material-preview-switcher{margin:1rem 0;padding:1rem;background:#f8f9fa;border-radius:12px;border:2px solid #e9ecef}.switcher-label{display:block;font-size:.85rem;font-weight:600;color:#6c757d;margin-bottom:.75rem;text-transform:uppercase;letter-spacing:.5px}.material-tabs{display:flex;gap:.5rem;flex-wrap:wrap}.material-tab{padding:.625rem 1rem;background:#fff;border:2px solid #e9ecef;border-radius:8px;color:#6c757d;font-size:.875rem;font-weight:600;cursor:pointer;transition:all .2s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}.material-tab:hover{background:#f8f9fa;border-color:#667eea;color:#667eea}.material-tab.active{background:linear-gradient(135deg,#667eea,#764ba2);border-color:#667eea;color:#fff;box-shadow:0 2px 8px #667eea4d}.material-preview-info{margin:.75rem 0;padding:.75rem 1rem;background:#f8f9fa;border-radius:8px;border-left:4px solid #667eea;font-size:.9rem;font-weight:600;color:#2c3e50;text-align:center}.share-info-box{display:flex;gap:1rem;padding:1rem 1.25rem;background:linear-gradient(135deg,#e3f2fd,#f3e5f5);border-radius:12px;border:2px solid #bbdefb;margin-bottom:1rem}.share-info-icon{font-size:1.5rem;flex-shrink:0;line-height:1}.share-info-content{flex:1}.share-info-content strong{display:block;font-size:.9rem;color:#1976d2;margin-bottom:.25rem;font-weight:700}.share-info-content p{margin:0;font-size:.85rem;color:#424242;line-height:1.5}.btn-copy{padding:.875rem 1.5rem;background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:8px;color:#fff;font-size:.95rem;font-weight:600;cursor:pointer;transition:all .2s;white-space:nowrap;box-shadow:0 2px 8px #667eea4d}.btn-copy:hover{transform:translateY(-2px);box-shadow:0 4px 12px #667eea66}.btn-copy:active{transform:translateY(0)}.unified-dialog-overlay{padding:2rem 1.5rem!important}.unified-dialog{max-height:88vh!important}@media (max-height: 700px){.unified-dialog-overlay{padding:1rem!important}.unified-dialog{max-height:95vh!important}}.design-library{width:100%;max-width:1400px;margin:0 auto;padding:2rem;min-height:100vh;position:relative;z-index:1}.library-header{display:flex;flex-direction:column;width:100%;margin-bottom:3rem}.header-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;padding-bottom:1.5rem;border-bottom:2px solid var(--app-border, #e0e0e0);width:100%}.header-top h2{margin:0;font-size:2.5rem;color:var(--app-text-primary, #2c3e50);font-weight:700;line-height:1.2}.btn-create-new{padding:.9rem 2rem;background:linear-gradient(135deg,#4caf50,#45a049);color:#fff;border:none;border-radius:10px;font-size:1.05rem;font-weight:700;cursor:pointer;transition:all .2s;box-shadow:0 2px 8px #4caf504d;text-shadow:0 1px 2px rgba(0,0,0,.2)}.btn-create-new:hover{transform:translateY(-2px);box-shadow:0 6px 20px #4caf5066;background:linear-gradient(135deg,#45a049,#388e3c)}.search-section{margin-bottom:2rem;display:block;width:100%;clear:both}.search-box-modern{position:relative;width:100%;max-width:100%;display:block}.library-controls-modern{display:flex;justify-content:space-between;align-items:center;gap:2rem;padding:1.25rem 1.75rem;background:var(--app-hover-bg, #f8f9fa);border-radius:10px;margin-bottom:2.5rem;border:1px solid var(--app-border, #e0e0e0);width:100%;clear:both}.stat-item{font-size:1rem;color:var(--app-text-secondary, #666);display:inline-flex;align-items:baseline;gap:.35rem;font-weight:500}.stat-item strong{color:var(--app-text-primary, #2c3e50);font-size:1.3rem;font-weight:700;line-height:1}.sort-box-modern{display:flex;align-items:center;gap:.75rem;background:var(--app-card-bg, white);padding:.5rem 1rem;border-radius:50px;box-shadow:0 2px 8px #0000000d;border:1px solid var(--app-border, #e0e0e0)}.sort-label{font-size:.9rem;color:var(--app-text-secondary, #666);font-weight:500}.sort-select-modern{padding:.4rem .75rem;border:none;background:transparent;font-size:.95rem;color:var(--app-text-primary, #2c3e50);cursor:pointer;font-weight:500;outline:none}.sort-select-modern option{background:var(--app-card-bg, white);color:var(--app-text-primary, #2c3e50)}.view-mode-toggle{display:flex;gap:.5rem;border:none;border-radius:8px;padding:.25rem;background:var(--app-card-bg, white);box-shadow:0 2px 8px #0000000d}.view-btn{padding:.5rem .75rem;background:none;border:none;border-radius:6px;font-size:1.2rem;cursor:pointer;transition:background-color .2s}.view-btn:hover{background:var(--app-hover-bg, #f5f5f5)}.view-btn.active{background:#667eea;color:#fff}.empty-state{text-align:center;padding:5rem 3rem;max-width:900px;margin:0 auto}.empty-icon{font-size:5rem;margin-bottom:1.5rem}.empty-state h3{font-size:1.8rem;color:var(--app-text-primary, #2c3e50);margin-bottom:.75rem;font-weight:600}.empty-state p{color:var(--app-text-secondary, #666666);font-size:1.15rem;margin-bottom:2.5rem;line-height:1.6;font-weight:500}.btn-large{padding:1.2rem 2.5rem;font-size:1.15rem;margin:0 auto;display:inline-block;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:12px;font-weight:600;cursor:pointer;transition:all .2s;box-shadow:0 4px 12px #667eea4d}.btn-large:hover{transform:translateY(-2px);box-shadow:0 6px 20px #667eea66}.empty-tips{margin-top:3rem;text-align:left;background:var(--app-hover-bg, #f8f9fa);padding:2.5rem;border-radius:16px;max-width:700px;margin-left:auto;margin-right:auto}.empty-tips h4{margin-top:0;color:var(--app-text-primary, #2c3e50);font-size:1.2rem;margin-bottom:1rem}.empty-tips ul{list-style:none;padding:0}.empty-tips li{padding:.6rem 0;color:var(--app-text-secondary, #666);line-height:1.5}.empty-tips li:before{content:"✓ ";color:#667eea;font-weight:700;margin-right:.5rem}.no-results{text-align:center;padding:3rem;color:var(--app-text-secondary, #666)}.dark-mode .header-top{border-bottom-color:#d4af7633}.dark-mode .library-header h2{color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.3)}.dark-mode .library-controls-modern{background:linear-gradient(135deg,#1a1a2e99,#16213e99);border:1px solid rgba(212,175,118,.15)}.dark-mode .stat-item{color:#d4af76b3}.dark-mode .sort-box-modern{background:#0000004d;border:1px solid rgba(212,175,118,.2)}.dark-mode .sort-label{color:#d4af76cc}.dark-mode .sort-select-modern{color:var(--app-text-primary, #2c3e50)}.dark-mode .sort-select-modern option{background:var(--app-card-bg, white);color:var(--app-text-primary, #2c3e50)}.dark-mode .design-card{background:linear-gradient(135deg,#1a1a2e,#16213e);border:1px solid rgba(212,175,118,.2)}.dark-mode .design-card:hover{box-shadow:0 8px 24px #d4af764d;border-color:#d4af7666}.dark-mode .empty-tips{background:#1e1e1e99;border:1px solid rgba(255,255,255,.1)}.dark-mode .empty-tips h4{color:#e0e0e0}.dark-mode .empty-tips li{color:#b0b0b0}.dark-mode .empty-tips li:before{color:#8b9eea}.dark-mode .empty-state h3{color:#fff}.dark-mode .empty-state p{color:#d4af76d9}.dark-mode .empty-state{background:linear-gradient(135deg,#1a1a2ecc,#16213ecc);border:2px solid rgba(212,175,118,.2);border-radius:16px;box-shadow:0 8px 24px #0006}.designs-container{display:grid;gap:1.5rem;margin-bottom:2rem}.designs-container.grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}.designs-container.list{grid-template-columns:1fr}.design-card{background:var(--app-card-bg, white);border-radius:12px;overflow:hidden;box-shadow:0 4px 16px #00000014;transition:transform .2s,box-shadow .2s;display:flex;flex-direction:column;border:1px solid var(--app-border-medium, #e0e0e0)}.design-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px #667eea33;border-color:#667eea}.design-thumbnail{width:100%;aspect-ratio:4/3;background:linear-gradient(135deg,#f8f9fa,#e9ecef);display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.design-thumbnail.clickable{cursor:pointer}.design-thumbnail img,.design-thumbnail .design-preview{width:100%;height:100%;object-fit:cover}.thumbnail-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:#667eead9;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;transition:opacity .2s ease;gap:.5rem}.design-thumbnail.clickable:hover .thumbnail-overlay{opacity:1}.overlay-icon{font-size:2rem}.overlay-text{color:#fff;font-weight:600;font-size:1rem}.design-content{padding:1rem 1.25rem 1.25rem;display:flex;flex-direction:column;gap:.5rem;min-height:180px}.design-name{margin:0;font-size:1.1rem;color:#111827;font-weight:600;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.design-meta{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}.design-meta-horizontal{display:flex;gap:.5rem;align-items:center;justify-content:center;margin:.75rem 0}.meta-item{font-size:.85rem;color:var(--app-text-secondary, #666);display:inline-flex;align-items:center;gap:.3rem;padding:.25rem .5rem;background:var(--app-hover-bg, #f8f9fa);border-radius:6px;white-space:nowrap}.design-date{font-size:.75rem;color:var(--app-text-tertiary, #999)}.design-actions-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-top:.75rem;padding-top:.75rem;border-top:1px solid var(--app-border, #eee)}.btn-apply-product{flex:1;padding:.6rem 1rem;background:linear-gradient(135deg,#4caf50,#45a049);color:#fff;border:none;border-radius:8px;font-size:.85rem;font-weight:600;cursor:pointer;transition:all .2s}.btn-apply-product:hover{transform:translateY(-1px);box-shadow:0 4px 12px #4caf504d}.btn-more-actions{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--app-hover-bg, #f5f5f5);border:1px solid var(--app-border, #e0e0e0);border-radius:10px;cursor:pointer;transition:all .2s ease}.btn-more-actions:hover{background:#e8e8e8;border-color:#ccc}.btn-more-actions .dots{font-size:1.2rem;font-weight:700;color:var(--app-text-secondary, #666);letter-spacing:1px}.dropdown-menu{position:absolute;right:0;bottom:calc(100% + 8px);min-width:200px;background:var(--app-card-bg, white);border-radius:12px;box-shadow:0 8px 24px #00000026;border:1px solid var(--app-border, #e0e0e0);z-index:100;animation:dropdownFadeIn .15s ease-out;overflow:hidden}@keyframes dropdownFadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.dropdown-item{display:flex;align-items:center;gap:.75rem;width:100%;padding:.85rem 1.25rem;border:none;background:none;text-align:left;cursor:pointer;font-size:.95rem;color:var(--app-text-primary, #2c3e50);transition:all .15s ease}.dropdown-item:hover{background:var(--app-hover-bg, #f5f5f5)}.dropdown-item-danger{color:#e74c3c}.dropdown-item-danger:hover{background:#fff5f5}.dropdown-icon{font-size:1.1rem;width:24px;text-align:center}.dropdown-text{font-weight:500}.dropdown-divider{height:1px;background:var(--app-border, #e0e0e0);margin:.25rem 0}.secondary-actions{display:flex;gap:.25rem}.btn-icon{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:var(--app-hover-bg, #f5f5f5);border:none;border-radius:8px;cursor:pointer;font-size:1rem;transition:all .2s}.btn-icon:hover{background:#e0e0e0;transform:scale(1.05)}.btn-icon.btn-delete:hover{background:#ffebee}.design-info{padding:1.25rem;flex:1}.design-actions{padding:1rem 1.25rem;border-top:1px solid var(--app-border, #f0f0f0);display:flex;gap:.5rem;align-items:center}.btn-action{flex:1;padding:.6rem 1rem;border:none;border-radius:6px;font-size:.9rem;cursor:pointer;transition:all .2s;font-weight:500}.btn-edit{background:#f0f4ff;color:#667eea}.btn-edit:hover{background:#667eea;color:#fff}.btn-apply{background:#e8f5e9;color:#4caf50}.btn-apply:hover{background:#4caf50;color:#fff}.load-more-section{text-align:center;padding:2rem}.load-more-info{color:var(--app-text-secondary, #666);margin-bottom:1rem}.btn-load-more{padding:.75rem 2rem;background:var(--app-card-bg, white);border:2px solid #667eea;color:#667eea;border-radius:8px;cursor:pointer;font-size:1rem;font-weight:500;transition:all .2s}.btn-load-more:hover{background:#667eea;color:#fff}@media (max-width: 1024px){.library-controls-modern{flex-direction:column;align-items:flex-start;gap:1.25rem}.filter-group-modern{width:100%;justify-content:flex-start}}@media (max-width: 768px){.header-top{flex-direction:column;align-items:flex-start;gap:1.5rem;padding-bottom:1.25rem}.header-top h2{font-size:2rem}.header-actions{width:100%;flex-direction:column}.header-actions button{width:100%}.library-controls-modern{padding:1.25rem}.stats-summary{flex-direction:column;align-items:flex-start;gap:.75rem;width:100%}.filter-group-modern{flex-direction:column;align-items:stretch}.sort-box-modern,.view-mode-toggle{width:100%}.sort-box-modern{justify-content:space-between}.designs-container.grid{grid-template-columns:1fr}}.design-actions-modern{display:flex;align-items:center;gap:.5rem;margin-top:1rem;padding-top:1rem;border-top:1px solid rgba(0,0,0,.08)}.action-buttons-primary{display:flex;flex:1;gap:.5rem;flex-wrap:wrap}.btn-action-modern{display:flex;align-items:center;gap:.4rem;padding:.6rem 1rem;border-radius:8px;border:1px solid rgba(0,0,0,.12);background:#fff;color:#2c3e50;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);white-space:nowrap}.btn-action-modern svg{flex-shrink:0;transition:transform .2s ease}.btn-action-modern:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001f}.btn-action-modern:active{transform:translateY(0)}.btn-edit{border-color:#667eea;color:#667eea}.btn-edit:hover{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-color:transparent}.btn-share{border-color:#f093fb;color:#c471ed}.btn-share:hover{background:linear-gradient(135deg,#f093fb,#f5576c);color:#fff;border-color:transparent}.btn-export-share{border-color:#a8e063;color:#56ab2f}.btn-export-share:hover{background:linear-gradient(135deg,#a8e063,#56ab2f);color:#fff;border-color:transparent}.btn-action-modern.btn-apply{border-color:#4facfe;color:#00a8ff}.btn-action-modern.btn-apply:hover{background:linear-gradient(135deg,#4facfe,#00f2fe);color:#fff;border-color:transparent}.btn-export{border-color:#a8e063;color:#56ab2f}.btn-export:hover{background:linear-gradient(135deg,#a8e063,#56ab2f);color:#fff;border-color:transparent}.btn-more{padding:.6rem;border-color:#0000001f;color:#666}.btn-more:hover{background:#f5f5f5;border-color:#0003}.dropdown-menu-modern{position:absolute;top:100%;right:0;margin-top:.5rem;min-width:180px;background:#fff;border:1px solid rgba(0,0,0,.1);border-radius:10px;box-shadow:0 8px 24px #0000001f;z-index:100;padding:.5rem;animation:dropdownFadeIn .2s ease}.dropdown-item-modern{display:flex;align-items:center;gap:.75rem;width:100%;padding:.75rem 1rem;border:none;background:transparent;color:#2c3e50;font-size:.875rem;font-weight:500;text-align:left;cursor:pointer;border-radius:6px;transition:all .2s ease}.dropdown-item-modern svg{flex-shrink:0}.dropdown-item-modern:hover{background:#667eea1a;color:#667eea}.dropdown-item-danger:hover{background:#f443361a;color:#f44336}.dropdown-divider-modern{height:1px;background:#00000014;margin:.5rem 0}@keyframes dropdownFadeIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.dark-mode .design-actions-modern{border-top-color:#ffffff1a}.dark-mode .btn-action-modern{background:#ffffff0d;border-color:#ffffff26;color:#e0e0e0}.dark-mode .btn-action-modern:hover{background:#ffffff1a}.dark-mode .dropdown-menu-modern{background:#1a1a2e;border-color:#d4af7633}.dark-mode .dropdown-item-modern{color:#e0e0e0}.dark-mode .dropdown-item-modern:hover{background:#d4af761a;color:#d4af76}.dark-mode .dropdown-divider-modern{background:#ffffff1a}@media (max-width: 768px){.action-buttons-primary{flex-direction:column;width:100%}.btn-action-modern{width:100%;justify-content:center}}.btn-action-modern{min-width:140px;flex:1;justify-content:center;padding:.65rem 1.25rem}.btn-more{min-width:auto;flex:0 0 auto;width:40px;padding:.65rem}.dropdown-container{position:relative}.dropdown-menu-modern{z-index:1000!important;position:absolute!important}.design-card,.design-content{overflow:visible!important}.editor-panel{display:flex;flex-direction:column;height:100%;background:var(--app-card-bg, white);color:var(--app-text, #1a1a1a)}.editor-header{padding:1rem 1.5rem;border-bottom:2px solid var(--app-border, #e0e0e0);background:var(--app-hover-bg, #f8f9fa)}.editor-header h3{margin:0;font-size:1.1rem;font-weight:600;color:var(--app-text, #1a1a1a)}.panel-body{flex:1;overflow-y:auto;padding:1.5rem}.control-group{margin-bottom:1.5rem}.control-group label{display:block;margin-bottom:.5rem;font-weight:600;font-size:.9rem;color:var(--app-text, #1a1a1a)}.control-label-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.label-text{font-weight:600;font-size:.9rem;color:var(--app-text, #1a1a1a);display:flex;align-items:center;gap:.25rem}.value-display{font-size:.85rem;color:var(--app-text-secondary, #666);font-weight:500}.text-input,.text-textarea,.select-input{width:100%;padding:.6rem;border:2px solid var(--app-border-medium, #e0e0e0);border-radius:6px;font-size:1rem;font-family:inherit;background:var(--app-card-bg, white);color:var(--app-text, #1a1a1a);transition:border-color .2s}.text-input:focus,.text-textarea:focus,.select-input:focus{outline:none;border-color:#667eea}.text-textarea{resize:vertical;min-height:80px}input[type=range]{width:100%;height:6px;border-radius:3px;background:var(--app-border, #e0e0e0);outline:none;-webkit-appearance:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,#667eea,#764ba2);cursor:pointer;box-shadow:0 2px 4px #0003}input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,#667eea,#764ba2);cursor:pointer;border:none;box-shadow:0 2px 4px #0003}.checkbox-label{display:flex;align-items:center;gap:.5rem;cursor:pointer;font-weight:400!important;margin-bottom:0!important}.checkbox-input{width:18px;height:18px;cursor:pointer}.btn-group{flex:1;padding:.6rem;border:2px solid var(--app-border-medium, #e0e0e0);background:var(--app-card-bg, white);color:var(--app-text, #1a1a1a);border-radius:6px;cursor:pointer;font-size:1.2rem;transition:all .2s}.btn-group:hover{border-color:#667eea;background:#667eea1a}.btn-group.active{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-color:#667eea}.btn-delete{padding:.75rem 1.5rem;background:linear-gradient(135deg,#f56565,#e53e3e);color:#fff;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center}.btn-delete:hover{transform:translateY(-2px);box-shadow:0 4px 12px #f5656566}.info-note{background:#667eea1a;border-left:4px solid #667eea;padding:1rem;border-radius:6px;margin-top:1rem}.info-note p{margin:0;font-size:.85rem;color:var(--app-text, #1a1a1a);line-height:1.5}.tooltip-icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:var(--app-border-medium, #e0e0e0);color:var(--app-text-secondary, #666);font-size:.7rem;font-weight:700;cursor:help;position:relative;margin-left:.25rem}.tooltip-bubble{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%);background:#000000e6;color:#fff;padding:.5rem .75rem;border-radius:6px;font-size:.75rem;font-weight:400;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .2s;z-index:1000}.tooltip-icon:hover .tooltip-bubble{opacity:1}.tooltip-bubble:after{content:"";position:absolute;top:100%;left:50%;transform:translate(-50%);border:5px solid transparent;border-top-color:#000000e6}[data-theme=dark] .editor-panel,.dark-mode .editor-panel{background:linear-gradient(135deg,#1a1a2ef2,#16213ef2);color:#d4af76f2}[data-theme=dark] .editor-header,.dark-mode .editor-header{background:#d4af760d;border-bottom-color:#d4af7633}[data-theme=dark] .editor-header h3,.dark-mode .editor-header h3{color:#d4af76f2}[data-theme=dark] .label-text,[data-theme=dark] .control-group label,.dark-mode .label-text,.dark-mode .control-group label{color:#d4af76e6}[data-theme=dark] .value-display,.dark-mode .value-display{color:#d4af76b3}[data-theme=dark] .text-input,[data-theme=dark] .text-textarea,[data-theme=dark] .select-input,.dark-mode .text-input,.dark-mode .text-textarea,.dark-mode .select-input{background:#d4af760d;border-color:#d4af7633;color:#d4af76f2}[data-theme=dark] .text-input:focus,[data-theme=dark] .text-textarea:focus,[data-theme=dark] .select-input:focus,.dark-mode .text-input:focus,.dark-mode .text-textarea:focus,.dark-mode .select-input:focus{border-color:#d4af7699}[data-theme=dark] input[type=range],.dark-mode input[type=range]{background:#d4af7633}[data-theme=dark] .btn-group,.dark-mode .btn-group{background:#d4af760d;border-color:#d4af7633;color:#d4af76e6}[data-theme=dark] .btn-group:hover,.dark-mode .btn-group:hover{border-color:#d4af7699;background:#d4af7626}[data-theme=dark] .btn-group.active,.dark-mode .btn-group.active{background:linear-gradient(135deg,#d4af764d,#d4af7633);border-color:#d4af7699;color:#d4af76}[data-theme=dark] .info-note,.dark-mode .info-note{background:#d4af761a;border-left-color:#d4af7699}[data-theme=dark] .info-note p,.dark-mode .info-note p{color:#d4af76e6}[data-theme=dark] .tooltip-icon,.dark-mode .tooltip-icon{background:#d4af7633;color:#d4af76e6}.warning-tag{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;border-radius:6px;font-size:.85rem;font-weight:500;margin-top:.75rem;margin-bottom:0;border:2px solid;transition:all .2s ease;width:100%!important;clear:both;flex-wrap:wrap;position:relative;float:none!important}.warning-tag-icon{font-size:1rem;font-weight:700;flex-shrink:0}.warning-tag-label{font-weight:700;text-transform:uppercase;font-size:.75rem;letter-spacing:.5px;flex-shrink:0}.warning-tag-message{flex:1;line-height:1.3}.warning-tag-ok{background:#4caf501a;border-color:#4caf50;color:#2e7d32}.warning-tag-ok .warning-tag-icon,.warning-tag-ok .warning-tag-label{color:#2e7d32}.warning-tag-warning{background:#ffc10726;border-color:#ffc107;color:#f57c00}.warning-tag-warning .warning-tag-icon,.warning-tag-warning .warning-tag-label{color:#f57c00}.warning-tag-critical{background:#f443361a;border-color:#f44336;color:#c62828}.warning-tag-critical .warning-tag-icon,.warning-tag-critical .warning-tag-label{color:#c62828}.warning-tag-ok:hover{background:#4caf5026;box-shadow:0 2px 6px #4caf5033}.warning-tag-warning:hover{background:#ffc10733;box-shadow:0 2px 6px #ffc1074d}.warning-tag-critical:hover{background:#f4433626;box-shadow:0 2px 6px #f443364d}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000bf;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:999999;padding:1rem;animation:fadeIn .2s ease-in-out}.dark-mode .modal-overlay{background:#000000d9;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.modal-content{background:var(--app-card-bg, white);border-radius:16px;box-shadow:0 20px 60px #0006;width:100%;height:auto;max-height:90vh;display:flex;flex-direction:column;animation:slideUp .3s ease-out;overflow:hidden}.dark-mode .modal-content{background:linear-gradient(135deg,#1a1a2efa,#16213efa);border:2px solid rgba(212,175,118,.3);box-shadow:0 20px 60px #0009,0 0 0 1px #d4af761a}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem 2rem;border-bottom:2px solid var(--app-border, #f0f0f0);background:var(--app-hover-bg, #f8f9fa)}.modal-header h2{margin:0;font-size:1.5rem;color:var(--app-text-primary, #2c3e50);font-weight:700}.modal-close-btn,.modal-close{background:none;border:none;font-size:1.5rem;color:var(--app-text-secondary, #666);cursor:pointer;padding:.25rem .5rem;border-radius:4px;transition:all .2s;line-height:1}.modal-close-btn:hover,.modal-close:hover{background:var(--app-border-medium, #e0e0e0);color:var(--app-text-primary, #2c3e50);transform:scale(1.1)}.dark-mode .modal-header{background:#0000004d;border-bottom-color:#d4af7633}.dark-mode .modal-header h2{color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.4)}.dark-mode .modal-close-btn,.dark-mode .modal-close{color:#d4af76cc}.dark-mode .modal-close-btn:hover,.dark-mode .modal-close:hover{background:#d4af7633;color:#d4af76}.modal-body{padding:0;overflow-y:auto;flex:1}@media (max-width: 768px){.modal-overlay{padding:0}.modal-content{border-radius:0;max-height:100vh;height:100vh}.modal-header{padding:1rem 1.5rem}}.pattern-category-tabs{display:flex;gap:.5rem;padding:1.5rem 1.5rem 1rem;border-bottom:2px solid var(--app-border, #e0e0e0);overflow-x:auto}.category-tab{display:flex;flex-direction:column;align-items:center;gap:.35rem;padding:.75rem 1rem;background:var(--app-hover-bg, #f8f9fa);border:2px solid var(--app-border, #e0e0e0);border-radius:8px;cursor:pointer;transition:all .2s ease;min-width:90px}.category-tab:hover{background:var(--app-accent-light, #e8f0fe);border-color:var(--app-accent, #667eea);transform:translateY(-2px)}.category-tab.active{background:linear-gradient(135deg,#667eea,#764ba2);border-color:#667eea;color:#fff;box-shadow:0 4px 12px #667eea4d}.tab-icon{font-size:1.5rem}.tab-label{font-size:.8rem;font-weight:600;text-align:center}.category-description{padding:1rem 1.5rem;margin:0;font-size:.9rem;color:var(--app-text-secondary, #666);background:var(--app-hover-bg, #f8f9fa);border-bottom:1px solid var(--app-border, #e0e0e0)}.pattern-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:1rem;padding:1.5rem}.pattern-card{background:var(--app-card-bg, white);border:2px solid var(--app-border, #e0e0e0);border-radius:8px;padding:.75rem;cursor:pointer;transition:all .2s ease;position:relative}.pattern-card:hover{border-color:#667eea;transform:translateY(-4px);box-shadow:0 6px 16px #667eea33}.pattern-preview{width:100%;aspect-ratio:1;background:#f5f5f5;border-radius:4px;overflow:hidden;margin-bottom:.5rem;display:flex;align-items:center;justify-content:center}.pattern-preview svg{width:100%;height:100%}.pattern-name{font-size:.85rem;font-weight:600;color:var(--app-text-primary, #2c3e50);text-align:center;line-height:1.3;min-height:2.6em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.pattern-warning{position:absolute;top:.5rem;right:.5rem;width:24px;height:24px;background:#ffc107e6;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.9rem}.no-patterns{padding:3rem 1.5rem;text-align:center;color:var(--app-text-secondary, #666)}.dark-mode .pattern-category-tabs{border-bottom-color:#d4af7633}.dark-mode .category-tab{background:#d4af761a;border-color:#d4af7633;color:#d4af76e6}.dark-mode .category-tab:hover{background:#d4af7633;border-color:#d4af7666}.dark-mode .category-tab.active{background:linear-gradient(135deg,#d4af76cc,#d4af7699);border-color:#d4af76cc;color:#fff;box-shadow:0 4px 12px #d4af764d}.dark-mode .category-description{color:#d4af76cc;background:#0000004d;border-bottom-color:#d4af7633}.dark-mode .pattern-card{background:#1a1a2e99;border-color:#d4af7633}.dark-mode .pattern-card:hover{border-color:#d4af7680;box-shadow:0 6px 16px #d4af764d}.dark-mode .pattern-name{color:#d4af76f2}.dark-mode .no-patterns{color:#d4af76b3}.image-comparison-slider{position:relative;width:100%;max-width:800px;margin:0 auto;aspect-ratio:16 / 9;overflow:hidden;border-radius:12px;box-shadow:0 10px 40px #00000026;cursor:ew-resize;user-select:none;-webkit-user-select:none}.image-comparison-slider.dragging{cursor:grabbing}.comparison-image{position:absolute;top:0;left:0;width:100%;height:100%}.comparison-image img{width:100%;height:100%;object-fit:contain;background:#f5f5f5;pointer-events:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}.before-image{z-index:1}.after-image{z-index:2}.image-label{position:absolute;top:1rem;padding:.5rem 1rem;background:#000000b3;color:#fff;font-size:.875rem;font-weight:600;border-radius:6px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:3;pointer-events:none}.before-label{left:1rem}.after-label{right:1rem}.slider-handle{position:absolute;top:0;bottom:0;width:4px;z-index:4;transform:translate(-50%);pointer-events:none;display:flex;flex-direction:column;align-items:center}.handle-line{flex:1;width:4px;background:#fff;box-shadow:0 0 20px #0000004d}.handle-button{width:48px;height:48px;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px #0000004d;color:#1a1a1a;flex-shrink:0;margin:0;transition:all .2s ease}.image-comparison-slider:hover .handle-button,.image-comparison-slider.dragging .handle-button{transform:scale(1.1);box-shadow:0 6px 30px #0006}.handle-button svg{width:24px;height:24px}@media (max-width: 768px){.image-comparison-slider{aspect-ratio:4 / 3}.handle-button{width:40px;height:40px}.image-label{font-size:.75rem;padding:.375rem .75rem}}@media (max-width: 480px){.image-comparison-slider{aspect-ratio:1 / 1}.handle-button{width:36px;height:36px}.handle-button svg{width:20px;height:20px}}@media (hover: none) and (pointer: coarse){.handle-button{width:56px;height:56px}}.comparison-image.material-sim{position:relative;overflow:hidden}.comparison-image.material-sim .material-background{position:absolute;top:0;left:0;right:0;bottom:0;z-index:1}.comparison-image.material-sim img.on-material{position:relative;z-index:2;mix-blend-mode:multiply;opacity:.95;background:none}.comparison-image.material-buche .material-background{background:linear-gradient(135deg,wheat,#e8d4a8,#dcc499)}.comparison-image.material-eiche .material-background{background:linear-gradient(135deg,#d4a574,#c19a6b,#a67c52)}.comparison-image.material-nussbaum .material-background{background:linear-gradient(135deg,#6b563c,#5d4e37 40%,#4a3c2a)}.comparison-image.material-birke .material-background{background:linear-gradient(135deg,#fdfcf8,#f8f4e6,#f0ebd8)}.comparison-image.material-sperrholz .material-background{background:linear-gradient(135deg,#d9c2a3,tan,#c4a876)}.comparison-image.material-nussbaum img.on-material{filter:brightness(1.05)}.tooltip-container{position:relative;display:inline-block}.tooltip{position:absolute;z-index:1000;background:var(--bg-primary, #ffffff);border:1px solid var(--border-color, #E0E0E0);border-radius:8px;padding:1rem 1.25rem;box-shadow:0 4px 16px var(--shadow-md, rgba(0, 0, 0, .15));font-size:.875rem;line-height:1.5;color:var(--text-primary, #1A1A1A);white-space:normal;max-width:420px;min-width:200px;pointer-events:none;animation:tooltipFadeIn .2s ease-out}@keyframes tooltipFadeIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.tooltip-top{bottom:100%;left:50%;transform:translate(-50%);margin-bottom:8px}.tooltip-top:after{content:"";position:absolute;top:100%;left:50%;transform:translate(-50%);border:6px solid transparent;border-top-color:var(--bg-primary, #ffffff)}.tooltip-bottom{top:100%;left:50%;transform:translate(-50%);margin-top:8px}.tooltip-bottom:after{content:"";position:absolute;bottom:100%;left:50%;transform:translate(-50%);border:6px solid transparent;border-bottom-color:var(--bg-primary, #ffffff)}.tooltip-left{right:100%;top:50%;transform:translateY(-50%);margin-right:8px}.tooltip-left:after{content:"";position:absolute;left:100%;top:50%;transform:translateY(-50%);border:6px solid transparent;border-left-color:var(--bg-primary, #ffffff)}.tooltip-right{left:100%;top:50%;transform:translateY(-50%);margin-left:8px}.tooltip-right:after{content:"";position:absolute;right:100%;top:50%;transform:translateY(-50%);border:6px solid transparent;border-right-color:var(--bg-primary, #ffffff)}.tooltip strong{display:block;margin-bottom:.5rem;color:var(--accent-gold, #C9A56E);font-weight:600;font-size:.95rem}.tooltip p{margin:0;color:var(--text-secondary, #666666);font-size:.85rem}.tooltip ul{margin:.5rem 0 0;padding-left:1.25rem;list-style-type:disc}.tooltip li{margin-bottom:.25rem;color:var(--text-secondary, #666666);font-size:.85rem}.dark-mode .tooltip{background:var(--bg-secondary, #2a2a2a);border-color:var(--border-color, #404040)}.dark-mode .tooltip-top:after{border-top-color:var(--bg-secondary, #2a2a2a)}.dark-mode .tooltip-bottom:after{border-bottom-color:var(--bg-secondary, #2a2a2a)}.dark-mode .tooltip-left:after{border-left-color:var(--bg-secondary, #2a2a2a)}.dark-mode .tooltip-right:after{border-right-color:var(--bg-secondary, #2a2a2a)}.engrave-preview-modal-overlay,.engrave-preview-modal,.engrave-preview,.engrave-preview *{color-scheme:light!important}html.dark-mode .engrave-preview-modal-overlay,html.dark-mode .engrave-preview-modal,html.dark-mode .engrave-preview,body.dark-mode .engrave-preview-modal-overlay,body.dark-mode .engrave-preview-modal,body.dark-mode .engrave-preview{background:#fff!important;color:#212529!important}@media (prefers-color-scheme: dark){.engrave-preview-modal-overlay,.engrave-preview-modal,.engrave-preview{background:#fff!important;color:#212529!important;color-scheme:light!important}.engrave-preview *{color-scheme:light!important}}.engrave-preview-modal-overlay{position:fixed!important;top:0!important;left:0!important;right:0!important;bottom:0!important;background:#fffffff2;z-index:2147483647!important;display:flex;align-items:center;justify-content:center;padding:2rem;animation:fadeIn .2s ease-in;--bg-primary: #ffffff;--bg-secondary: #f8f9fa;--bg-tertiary: #e9ecef;--text-primary: #212529;--text-secondary: #495057;--text-tertiary: #6c757d;--border-color: #dee2e6;--border-color-light: #e9ecef;--shadow-sm: rgba(0, 0, 0, .1);--shadow-md: rgba(0, 0, 0, .15);--shadow-lg: rgba(0, 0, 0, .2)}.engrave-preview-modal-overlay{background:#fffffff2!important}.dark-mode .engrave-preview-modal-overlay,.dark-mode .engrave-preview-modal,.dark-mode .engrave-preview{background:#fff!important;color:#212529!important}.force-light-mode,.force-light-mode *{--bg-primary: #ffffff !important;--bg-secondary: #f8f9fa !important;--bg-tertiary: #e9ecef !important;--text-primary: #212529 !important;--text-secondary: #495057 !important;--text-tertiary: #6c757d !important;--border-color: #dee2e6 !important;--border-color-light: #e9ecef !important;--shadow-sm: rgba(0, 0, 0, .1) !important;--shadow-md: rgba(0, 0, 0, .15) !important;--shadow-lg: rgba(0, 0, 0, .2) !important;background-color:#fff!important;color:#212529!important;border-color:#dee2e6!important}.engrave-preview-modal{background:#fff!important;border-radius:16px;box-shadow:0 8px 24px #0000001f;max-width:95vw;width:1600px;max-height:90vh;overflow-y:scroll;position:relative;animation:slideUp .3s ease-out}@keyframes slideUp{0%{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}.engrave-preview{max-width:100%;margin:0;padding:2rem;background:#fff!important;color:#212529!important}.preview-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;gap:2rem}.preview-header>div{flex:1}.preview-header h2{font-size:1.8rem;color:#212529;margin-bottom:.5rem}.preview-header p{color:#495057;font-size:1rem}.preview-actions-top{display:flex;gap:1rem;align-items:center;justify-content:flex-end}.preview-title-with-method{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}.preview-title-with-method h2{margin:0;display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.method-badge-header{display:inline-block;padding:.5rem 1rem;background:linear-gradient(135deg,#c9a56e26,#c9a56e14);color:#8b7355;border:1px solid rgba(201,165,110,.3);border-radius:8px;font-size:1rem;font-weight:600;letter-spacing:.3px;box-shadow:0 1px 3px #00000014;transition:all .2s ease}.method-badge-ai{display:inline-block;padding:.35rem .75rem;background:linear-gradient(135deg,#c9a56e,#b8935e);color:#fff;border-radius:6px;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;box-shadow:0 2px 8px #c9a56e4d}.auto-optimize-info-compact{background:linear-gradient(135deg,#c9a56e1f,#c9a56e0f,#c9a56e1f);border:2px solid rgba(201,165,110,.3);border-radius:12px;padding:1.25rem;margin-bottom:1rem;font-size:.9rem;box-shadow:0 4px 12px #c9a56e26;transition:all .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.auto-optimize-info-compact:hover{box-shadow:0 6px 20px #c9a56e40;border-color:#c9a56e80;background:linear-gradient(135deg,#c9a56e26,#c9a56e14,#c9a56e26)}.auto-optimize-info-compact .detection-badge{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid rgba(201,165,110,.2);font-size:.95rem}.auto-optimize-info-compact .badge-label{color:#c9a56ecc;font-weight:600;text-transform:uppercase;font-size:.75rem;letter-spacing:.8px}.auto-optimize-info-compact .badge-value{color:#212529;font-weight:700;font-size:1.05rem}.auto-optimize-info-compact .badge-separator{color:#c9a56e66;font-weight:300;margin:0 .25rem}.auto-optimize-info-compact .badge-confidence{color:#d4af7a;font-weight:700;font-size:.95rem}.auto-optimize-info-compact .auto-recommendations{color:#212529;font-size:.9rem;line-height:1.6}.auto-optimize-info-compact .recommendations-header{color:#c9a56ee6;font-weight:700;font-size:.8rem;text-transform:uppercase;letter-spacing:.8px;margin-bottom:.75rem}.auto-optimize-info-compact .recommendations-list{margin:0;padding-left:1.25rem;list-style:none}.auto-optimize-info-compact .recommendations-list li{margin-bottom:.5rem;color:#495057;line-height:1.6;position:relative;padding-left:.5rem}.auto-optimize-info-compact .recommendations-list li:before{content:"✓";position:absolute;left:-1rem;color:#d4af7a;font-weight:700;font-size:1.1rem}.preview-top-row{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-bottom:1.5rem}.preview-main-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:1.5rem;margin-bottom:1.5rem;align-items:start}.preview-main-left,.preview-sidebar-right{display:flex;flex-direction:column;gap:1rem}.preview-carousel-section{background:#fff;border:2px solid #dee2e6;border-radius:8px;padding:.75rem 1rem;margin-bottom:1.25rem}.carousel-section-title{font-size:.95rem;font-weight:600;color:#212529;margin-bottom:.6rem;text-align:left}.preview-carousel-horizontal-wrapper{position:relative;display:flex;align-items:center;gap:1rem}.carousel-arrow{flex-shrink:0;width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#d4af7a,#b89968);border:none;color:#fff;font-size:1.2rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;box-shadow:0 3px 10px #0003;z-index:10}.carousel-arrow:hover{transform:scale(1.1);box-shadow:0 6px 16px #0000004d}.carousel-arrow:disabled{opacity:.3;cursor:not-allowed;transform:scale(1)}.preview-carousel-horizontal{flex:1;display:flex;gap:1rem;overflow-x:hidden;scroll-behavior:smooth;padding:.5rem 0}.carousel-option-horizontal{flex-shrink:0;width:100px;background:#e9ecef;border:2px solid transparent;border-radius:8px;padding:.5rem;cursor:pointer;transition:all .3s ease;opacity:.7;transform:scale(.92)}.carousel-option-horizontal:hover{opacity:.9;transform:scale(.96);border-color:#d4af7a}.carousel-option-horizontal.selected{width:140px;background:linear-gradient(135deg,#d4af7a,#b89968);border-color:#d4af7a;opacity:1;transform:scale(1);box-shadow:0 6px 18px #c9a56e66}.carousel-thumbnail-horizontal{width:100%;aspect-ratio:4/3;border-radius:8px;overflow:hidden;background:#fff;border:2px solid #e9ecef;margin-bottom:.5rem;position:relative}.carousel-option-horizontal.selected .carousel-thumbnail-horizontal{border-color:#fff}.carousel-thumbnail-horizontal img{width:100%;height:100%;object-fit:cover}.carousel-option-horizontal .carousel-label{font-size:.75rem;font-weight:500;color:#212529;text-align:center;margin-bottom:.15rem;line-height:1.2}.carousel-option-horizontal.selected .carousel-label{font-size:.9rem;font-weight:700;color:#fff}.carousel-option-horizontal .carousel-badge-small{font-size:.65rem;color:#495057;text-align:center;line-height:1.2}.carousel-option-horizontal.selected .carousel-badge-small{color:#ffffffe6}.selected-indicator{position:absolute;top:.5rem;right:.5rem;width:32px;height:32px;background:#fff;color:#d4af7a;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.2rem;font-weight:700;box-shadow:0 2px 8px #0000004d}.preview-carousel-vertical,.carousel-option-vertical{display:none}.carousel-thumbnail-vertical{position:relative;width:60px;height:60px;flex-shrink:0;border-radius:6px;overflow:hidden;background:#fff}.carousel-thumbnail-vertical img{width:100%;height:100%;object-fit:cover}.carousel-info-vertical{display:flex;flex-direction:column;justify-content:center;flex:1;min-width:0}.carousel-option-vertical.selected .carousel-label,.carousel-option-vertical.selected .carousel-badge-small{color:#fff}.carousel-label{font-size:.85rem;font-weight:600;color:#212529;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.carousel-badge-small{font-size:.65rem;background:#d4af7a;color:#fff;padding:.1rem .4rem;border-radius:4px;align-self:flex-start;margin-top:.2rem}.material-selector-visual{background:#fff;border:2px solid #dee2e6;border-radius:12px;padding:1rem;min-height:450px;display:flex;flex-direction:column}.material-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.material-selector-visual h4{font-size:1rem;font-weight:600;color:#212529;margin:0}.toggle-label-inline{display:flex;align-items:center;gap:.65rem;cursor:pointer;font-size:.75rem;color:#495057;white-space:nowrap;flex-direction:row-reverse}.toggle-label-inline .toggle-text{font-weight:500}.toggle-label-inline .toggle-checkbox{width:36px;height:18px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#ccc;border-radius:9px;position:relative;cursor:pointer;transition:all .3s;flex-shrink:0}.toggle-label-inline .toggle-checkbox:checked{background:#4caf50}.toggle-label-inline .toggle-checkbox:after{content:"";position:absolute;width:14px;height:14px;border-radius:7px;background:#fff;top:50%;left:2px;transform:translateY(-50%);transition:all .3s;box-shadow:0 1px 3px #0003}.toggle-label-inline .toggle-checkbox:checked:after{left:calc(100% - 16px);transform:translateY(-50%)}.material-list{display:flex;flex-direction:column;gap:.75rem;flex:1;overflow-y:auto;overflow-x:hidden;margin-bottom:1rem}.material-list::-webkit-scrollbar{width:6px}.material-list::-webkit-scrollbar-track{background:#f8f9fa;border-radius:3px}.material-list::-webkit-scrollbar-thumb{background:#d4af7a;border-radius:3px}.material-list::-webkit-scrollbar-thumb:hover{background:#b89968}.material-category{display:flex;flex-direction:column;gap:.5rem}.material-category-title{font-size:.75rem;font-weight:600;color:#495057;text-transform:uppercase;letter-spacing:.5px;margin-bottom:.25rem}.material-item-visual{display:flex;align-items:center;gap:.75rem;padding:.75rem;border-radius:8px;cursor:pointer;transition:all .2s ease;background:#fff;border:2px solid transparent;position:relative;overflow:hidden}.material-item-visual:hover{background:#c9a56e14;border-color:#c9a56e66;box-shadow:0 2px 8px #0000001a}.material-item-visual.selected{border-color:#c9a56e;background:#c9a56e26;box-shadow:0 3px 10px #c9a56e33}.material-name-visual{flex:1;font-size:.95rem;color:#999;font-weight:600}.dark-mode .engrave-preview *,.dark-mode .engrave-preview-modal *{color:inherit}.dark-mode .material-item-visual{background:#f8f9fa!important}.dark-mode .material-item-visual.selected .material-name-visual{color:#000!important}.material-sim-toggle{padding-top:.75rem;border-top:1px solid #dee2e6}.toggle-label{display:flex;align-items:center;gap:.5rem;cursor:pointer;font-size:.85rem;color:#212529}.toggle-checkbox{width:16px;height:16px}.toggle-text{font-weight:500}.preview-carousel-section-old{background:#fff;border:2px solid #dee2e6;border-radius:12px;padding:1.5rem;margin-bottom:1.5rem}.carousel-section-title{font-size:1.25rem;color:#212529;margin:0 0 .5rem;font-weight:600;text-align:center}.carousel-section-description{text-align:center;color:#495057;font-size:.95rem;margin:0 0 1.5rem}.preview-carousel-container{display:flex;align-items:center;gap:1.5rem;padding:1rem 0}.carousel-arrow{flex-shrink:0;width:50px;height:50px;background:linear-gradient(135deg,#d4af7a,#b89968);color:#fff;border:none;border-radius:50%;font-size:1.5rem;cursor:pointer;transition:all .2s ease;box-shadow:0 4px 12px #0000001a;display:flex;align-items:center;justify-content:center}.carousel-arrow:hover{transform:scale(1.1);box-shadow:0 6px 20px #00000026}.carousel-arrow:active{transform:scale(.95)}.preview-carousel{flex:1;display:flex;gap:1rem;justify-content:flex-start;align-items:center;overflow-x:auto;overflow-y:hidden;padding:1rem;scroll-behavior:smooth;scroll-padding:0 50%}.preview-carousel::-webkit-scrollbar{height:4px}.preview-carousel::-webkit-scrollbar-track{background:transparent}.preview-carousel::-webkit-scrollbar-thumb{background:#c9a56e4d;border-radius:2px}.preview-carousel::-webkit-scrollbar-thumb:hover{background:#c9a56e80}.carousel-option{background:#fff;border:3px solid #dee2e6;border-radius:12px;padding:.75rem;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 8px #0000001a;-webkit-user-select:none;user-select:none;flex-shrink:0}.carousel-option{width:130px;opacity:.6;transform:scale(.85)}.carousel-option.selected{width:220px;opacity:1;transform:scale(1);border-color:#d4af7a;border-width:4px;box-shadow:0 8px 32px #00000026;background:#f8f9fa}.carousel-option:hover:not(.selected){opacity:.85;transform:scale(.9);border-color:#d4af7a}.carousel-thumbnail{position:relative;width:100%;border-radius:8px;overflow:hidden;background:#f8f9fa;margin-bottom:.5rem;border:2px solid #e9ecef}.carousel-option .carousel-thumbnail{height:90px}.carousel-option.selected .carousel-thumbnail{height:160px}.carousel-thumbnail img{width:100%;height:100%;object-fit:cover}.selected-indicator{position:absolute;top:6px;right:6px;background:#c9a56e;color:#fff;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;animation:popIn .3s cubic-bezier(.68,-.55,.265,1.55);box-shadow:0 2px 8px #0003}@keyframes popIn{0%{transform:scale(0) rotate(-180deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}.carousel-info{text-align:center;display:flex;flex-direction:column;align-items:center;gap:.25rem}.carousel-label{font-weight:600;font-size:.85rem;color:#212529;letter-spacing:-.01em}.carousel-option.selected .carousel-label{font-size:1.05rem;font-weight:700}.carousel-badge{display:inline-block;padding:.15rem .5rem;background:#d4af7a;color:#fff;font-size:.6rem;font-weight:700;letter-spacing:.05em;border-radius:3px;text-transform:uppercase}.carousel-desc{font-size:.75rem;color:#495057;margin-top:.25rem;animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.preview-main{background:#fff;border-radius:16px;padding:2rem;box-shadow:0 4px 24px #0000001a;margin-bottom:2rem}.preview-controls{margin-bottom:1rem}.preview-title-header{display:flex;align-items:center;gap:.75rem;margin-bottom:.4rem}.preview-title h3{font-size:1.1rem;color:#212529;margin:0;font-weight:600;letter-spacing:-.02em}.method-badge{display:inline-block;padding:.2rem .6rem;background:linear-gradient(135deg,#d4af7a,#b89968);color:#fff;font-size:.65rem;font-weight:700;letter-spacing:.05em;border-radius:4px;text-transform:uppercase}.preview-description{color:#495057;margin-bottom:.5rem;font-size:.85rem}.suitable-badge{display:inline-block;background:#e8f5e9;color:#2e7d32;padding:.4rem .75rem;border-radius:6px;font-size:.8rem;font-weight:500}.preview-canvas-main{background:#f8f9fa;border:2px solid #E0E0E0;border-radius:12px;padding:1.5rem;width:100%;height:600px;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.preview-canvas-main.material-sim{overflow:hidden}.preview-canvas-main.material-sim .material-background{position:absolute;top:0;left:0;right:0;bottom:0;z-index:1;border-radius:12px;background-size:cover;background-position:center;background-repeat:no-repeat}.preview-canvas-main.material-sim img.on-material{position:relative;z-index:2;mix-blend-mode:multiply;opacity:.95;background:none}.preview-comparison-section{background:#fff;border:2px solid #dee2e6;border-radius:12px;padding:1rem;margin-top:1rem}.comparison-title{font-size:.95rem;color:#212529;margin:0 0 .75rem;text-align:left;font-weight:600}.style-parameters-section{background:#f8f9fa;border:2px solid #dee2e6;border-radius:12px;padding:1rem}.parameters-title{font-size:.95rem;color:#212529;margin:0 0 .2rem;font-weight:600;letter-spacing:-.01em}.parameters-description{color:#495057;font-size:.75rem;margin:0 0 1rem;line-height:1.3}.parameters-grid{display:grid;grid-template-columns:1fr;gap:.75rem;margin-bottom:1rem}@media (max-width: 768px){.parameters-grid{grid-template-columns:1fr}}.parameter-control{display:flex;flex-direction:column;gap:.5rem}.parameter-label-row{display:flex;justify-content:space-between;align-items:center}.parameter-label-row label{font-size:.85rem;font-weight:600;color:#212529}.parameter-value{font-size:.95rem;font-weight:700;color:#c9a56e;min-width:45px;text-align:right}.modern-slider{width:100%;height:8px;border-radius:4px;background:linear-gradient(to right,#e0e0e0,#c9a56e,#a88554);outline:none;-moz-appearance:none;appearance:none;-webkit-appearance:none;cursor:pointer;position:relative}.modern-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:28px;height:28px;border-radius:50%;background:#fff;border:3px solid #C9A56E;cursor:grab;box-shadow:0 2px 8px #0003;transition:all .15s ease}.modern-slider::-webkit-slider-thumb:hover{transform:scale(1.15);box-shadow:0 4px 12px #c9a56e66}.modern-slider::-webkit-slider-thumb:active{cursor:grabbing;transform:scale(1.05);box-shadow:0 2px 6px #c9a56e99}.modern-slider::-moz-range-thumb{width:28px;height:28px;border-radius:50%;background:#fff;border:3px solid #C9A56E;cursor:grab;box-shadow:0 2px 8px #0003;transition:all .15s ease}.modern-slider::-moz-range-thumb:hover{transform:scale(1.15);box-shadow:0 4px 12px #c9a56e66}.modern-slider::-moz-range-thumb:active{cursor:grabbing;transform:scale(1.05)}.parameter-hints{display:flex;justify-content:space-between;font-size:.75rem;color:#495057;padding:0 .25rem}.parameters-actions{display:flex;flex-direction:column;gap:.5rem;margin-top:1rem}.btn-ai-optimize{padding:.6rem 1rem;background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:6px;color:#fff;font-size:.8rem;font-weight:600;cursor:pointer;transition:all .2s ease;letter-spacing:-.01em;box-shadow:0 3px 10px #667eea4d;white-space:nowrap}.btn-ai-optimize:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 16px #667eea66}.btn-ai-optimize:active:not(:disabled){transform:translateY(0)}.btn-ai-optimize:disabled{opacity:.7;cursor:not-allowed}.btn-reset-params{padding:.6rem 1rem;background:#fff;border:1.5px solid #dee2e6;border-radius:6px;color:#495057;font-size:.8rem;font-weight:500;cursor:pointer;transition:all .2s ease;letter-spacing:-.01em}.btn-reset-params:hover{background:#f8f9fa;border-color:#d4af7a;color:#212529}.customizing-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:#ffffffe6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;border-radius:8px}.spinner-small{width:40px;height:40px;border:4px solid #f3f3f3;border-top:4px solid #C9A56E;border-radius:50%;animation:spin 1s linear infinite}.single-preview{max-width:100%;width:100%;height:100%;text-align:center;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}.preview-image{max-width:95%;max-height:520px;width:auto!important;height:auto!important;object-fit:contain;border-radius:8px;display:block;margin:0 auto}.preview-image.clickable-crop{border-radius:0}.preview-comparison-section-top{background:#fff;border:2px solid #dee2e6;border-radius:12px;padding:1rem}.comparison-preview{display:flex;gap:2rem;width:100%;align-items:center;justify-content:center}.preview-info-box{background:linear-gradient(135deg,#e8f4f8,#f0f8e8);border-left:3px solid #D4AF7A;border-radius:8px;padding:1rem;margin-top:1rem}.preview-info-box .preview-description{color:#212529;font-size:.9rem;margin-bottom:.5rem;line-height:1.5}.preview-info-box .suitable-badge{display:inline-block;background:#4caf5026;color:#2e7d32;padding:.4rem .75rem;border-radius:6px;font-size:.85rem;font-weight:500}.comparison-side{flex:1;text-align:center}.comparison-label{font-size:.9rem;font-weight:600;color:#495057;margin-bottom:1rem;text-transform:uppercase;letter-spacing:.5px}.comparison-divider{display:flex;align-items:center;justify-content:center;flex-shrink:0}.divider-icon{font-size:2rem;color:#c9a56e;animation:pulse 2s ease-in-out infinite}.preview-tips{background:#fff8e1;border-left:4px solid #FFC107;padding:1rem 1.5rem;border-radius:8px}.preview-tips h4{margin-bottom:.5rem;color:#f57f17;font-size:1rem}.preview-tips ul{margin:0;padding-left:1.5rem}.preview-tips li{color:#495057;margin-bottom:.25rem;line-height:1.6}.preview-footer{display:flex;justify-content:space-between;gap:1rem}.btn-primary,.btn-secondary{padding:1rem 2rem;font-size:1rem;font-weight:600;border:none;border-radius:8px;cursor:pointer;transition:all .2s ease;display:inline-flex;align-items:center;gap:.5rem}.btn-primary{background:linear-gradient(135deg,#c9a56e,#a68b5b);color:#fff;box-shadow:0 4px 12px #c9a56e4d}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px #c9a56e66}.btn-secondary{background:linear-gradient(135deg,#c9a56e14,#c9a56e1f);color:#8b7355;border:2px solid rgba(201,165,110,.3);box-shadow:0 2px 8px #c9a56e26}.btn-secondary:hover{background:linear-gradient(135deg,#c9a56e26,#c9a56e40);border-color:#d4af7a;color:#b89968;box-shadow:0 4px 12px #c9a56e40;transform:translateY(-1px)}.loading-popup{background:#fff;border-radius:20px;padding:2rem;box-shadow:0 20px 60px #00000080;animation:slideUp .3s ease-out;display:flex;align-items:center;justify-content:center;min-width:200px;min-height:160px}.loading-spinner{display:flex;align-items:center;justify-content:center;min-height:120px}.spinner-elegant{position:relative;width:80px;height:80px}.spinner-ring{position:absolute;width:100%;height:100%;border-radius:50%;border:3px solid transparent;border-top-color:#d4af7a;animation:spin-elegant 1.5s cubic-bezier(.68,-.55,.265,1.55) infinite}.spinner-ring:nth-child(1){width:80px;height:80px;border-width:3px;animation-delay:0s;opacity:1}.spinner-ring:nth-child(2){width:60px;height:60px;top:10px;left:10px;border-width:3px;border-top-color:#b89968;animation-delay:-.5s;opacity:.7}.spinner-ring:nth-child(3){width:40px;height:40px;top:20px;left:20px;border-width:2px;border-top-color:#d4af7a;animation-delay:-1s;opacity:.5}@keyframes spin-elegant{0%{transform:rotate(0);border-top-color:#d4af7a}50%{border-top-color:#b89968}to{transform:rotate(360deg);border-top-color:#d4af7a}}.spinner{width:60px;height:60px;border:4px solid #dee2e6;border-top:4px solid #D4AF7A;border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 1.5rem}.engrave-preview.error{display:flex;align-items:center;justify-content:center;min-height:400px}.error-box{background:#fff;border:2px solid #F44336;border-radius:12px;padding:2rem;text-align:center;max-width:500px}.error-box h3{color:#f44336;margin-bottom:1rem}.error-box p{color:#495057;margin-bottom:1.5rem;line-height:1.6}@media (max-width: 768px){.engrave-preview{padding:1rem}.preview-header h2{font-size:1.4rem}.preview-options{gap:.5rem}.preview-option{flex:0 0 120px}.preview-main{padding:1rem}.preview-controls{flex-direction:column}.comparison-preview{flex-direction:column;gap:1rem}.comparison-divider{transform:rotate(90deg)}.preview-footer{flex-direction:column}.btn-primary,.btn-secondary{width:100%;justify-content:center}}.material-selector{margin-top:1.5rem;padding:1rem;background:#e9ecef;border-radius:8px;display:flex;align-items:center;gap:1rem;justify-content:center}.material-selector label{color:#212529;font-size:1rem;white-space:nowrap}.material-dropdown{padding:.75rem 1.25rem;font-size:1rem;font-weight:500;border:2px solid #e0e0e0;border-radius:8px;background:#fff;color:#212529;cursor:pointer;transition:all .2s ease;min-width:250px;box-shadow:0 2px 4px #0000000d}.material-dropdown:hover{border-color:#c9a56e;box-shadow:0 4px 8px #c9a56e26}.material-dropdown:focus{outline:none;border-color:#c9a56e;box-shadow:0 0 0 4px #c9a56e26}.material-dropdown optgroup{font-weight:700;color:#2c3e50;font-size:.9rem;padding:.5rem 0;background:#f8f9fa}.material-dropdown option{padding:.75rem 1rem;font-weight:400;color:#212529;background:#fff}.auto-optimize-info{margin-top:.75rem;padding:.75rem;background:linear-gradient(135deg,#e8f4f8,#f0f8e8);border-left:3px solid #4CAF50;border-radius:6px}.detection-badge{display:flex;align-items:center;gap:.4rem;margin-bottom:.5rem;font-size:.85rem}.detection-badge strong{color:#2e7d32}.detection-badge .confidence{color:#495057;font-size:.75rem;font-weight:400}.auto-recommendations{margin-top:.5rem}.auto-recommendations strong{display:block;margin-bottom:.4rem;color:#2e7d32;font-size:.85rem}.auto-recommendations ul{margin:0;padding-left:1.25rem;list-style-type:"✓ ";font-size:.8rem}.auto-recommendations li{color:#212529;margin-bottom:.2rem;line-height:1.4}.auto-recommendations li::marker{color:#4caf50;font-weight:700}.single-preview{position:relative;display:inline-block;max-width:100%;max-height:100%;border-radius:12px}.material-background{position:absolute;top:0;left:0;right:0;bottom:0;z-index:0;border-radius:8px}.single-preview img{position:relative;z-index:1;max-width:95%;max-height:520px;height:auto;width:auto;display:block;background:#fff;border-radius:8px;box-shadow:0 4px 12px #0003;object-fit:contain;margin:0 auto}.material-label{text-align:center;margin-top:1rem;padding:.75rem;background:#0000000d;border-radius:8px;font-size:.95rem;font-weight:600;color:#333}.material-controls-row{display:flex;align-items:center;gap:1.5rem;margin-top:1rem;padding:.75rem;background:#e9ecef;border-radius:8px;flex-wrap:wrap}.material-sim-toggle-inline{display:flex;align-items:center}.toggle-label-compact{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;font-size:.95rem;font-weight:500;color:#212529}.toggle-label{display:inline-flex;align-items:center;gap:.75rem;cursor:pointer;font-size:1.1rem;font-weight:600;color:#2c3e50}.toggle-checkbox{width:50px;height:26px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#ccc;border-radius:13px;position:relative;cursor:pointer;transition:all .3s}.toggle-checkbox:checked{background:#4caf50}.toggle-checkbox:after{content:"";position:absolute;width:22px;height:22px;border-radius:11px;background:#fff;top:2px;left:2px;transition:all .3s;box-shadow:0 2px 4px #0003}.toggle-checkbox:checked:after{left:26px}.toggle-hint{margin-top:.75rem;font-size:.9rem;color:#555;line-height:1.5}.material-info-box{margin-top:1rem;padding:.75rem;background:#4caf501a;border-left:4px solid #4CAF50;border-radius:6px}.material-info-box strong{display:block;color:#2e7d32;margin-bottom:.25rem;font-size:.95rem}.material-info-box p{margin:0;font-size:.85rem;color:#555;line-height:1.4}.material-selector-inline{margin-top:1rem;padding:.75rem;background:#e9ecef;border-radius:8px;display:flex;align-items:center;gap:.75rem}.material-selector-inline label{color:#2c3e50;font-size:.95rem;white-space:nowrap}.material-selector-inline .material-dropdown{flex:1;min-width:0}.single-preview.no-material{padding:40px;background:transparent;border:none;border-radius:12px;display:flex;align-items:center;justify-content:center;min-height:450px;max-height:600px}.single-preview.no-material .preview-image{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;box-shadow:0 4px 12px #00000026;border-radius:8px;border:none;background:none;cursor:default}.single-preview.material-sim{padding:40px;border-radius:12px;position:relative;min-height:450px;max-height:600px;display:flex;align-items:center;justify-content:center;overflow:hidden}.single-preview.material-sim .material-background{position:absolute;top:0;left:0;right:0;bottom:0;z-index:1;border-radius:12px;background-size:cover;background-position:center;background-repeat:no-repeat}.single-preview.material-sim .preview-image{position:relative;z-index:2;max-width:100%;max-height:100%;width:auto!important;height:auto!important;object-fit:contain;background:none;padding:0;border:none;border-radius:0;box-shadow:none;cursor:default;mix-blend-mode:multiply;opacity:.95;margin:0 auto}.material-info-label{margin-top:1rem;padding:.75rem;background:#4caf501a;border-left:4px solid #4CAF50;border-radius:4px;font-size:.95rem;color:#2c3e50}.material-desc{color:#495057;font-size:.9rem}.preview-main-grid-new{display:grid;grid-template-columns:300px 1fr 420px;gap:1.5rem;margin-bottom:1.5rem;align-items:start}.preview-sidebar-left-new{display:flex;flex-direction:column;gap:1rem}.preview-main-center-new{display:flex;flex-direction:column;gap:1rem;position:relative;z-index:999}.preview-sidebar-right-new{display:flex;flex-direction:column;gap:1rem}.preview-carousel-section-compact{background:#fff;border:2px solid #dee2e6;border-radius:12px;padding:1rem}.preview-carousel-vertical-wrapper{max-height:450px;overflow-y:scroll;overflow-x:hidden;margin-top:.5rem;scrollbar-width:thin;scrollbar-color:#D4AF7A #f8f9fa;scrollbar-gutter:stable;width:100%;box-sizing:border-box}.preview-carousel-vertical-wrapper::-webkit-scrollbar{width:8px}.preview-carousel-vertical-wrapper::-webkit-scrollbar-track{background:#f8f9fa;border-radius:3px}.preview-carousel-vertical-wrapper::-webkit-scrollbar-thumb{background:#d4af7a;border-radius:3px}.preview-carousel-vertical-wrapper::-webkit-scrollbar-thumb:hover{background:#b89968}.preview-carousel-vertical-scroll{display:flex;flex-direction:column;gap:.75rem;padding-right:4px;box-sizing:border-box;width:100%}.carousel-option-vertical{display:flex;align-items:center;gap:.75rem;padding:.5rem;background:#f8f9fa;border:2px solid #dee2e6;border-radius:8px;cursor:pointer;transition:all .2s ease;height:76px;flex-shrink:0;box-sizing:border-box;width:100%}.carousel-option-vertical:hover{border-color:#d4af7a;background:#c9a56e26}.carousel-option-vertical.selected{background:#d4af7a;border-color:#b89968;box-shadow:0 2px 8px #c9a56e66}.carousel-option-vertical.selected .carousel-label-vertical{color:#000!important;font-weight:700}.carousel-option-vertical.selected .carousel-badge-tiny{background:#00000026;color:#000}.carousel-thumbnail-vertical-new{position:relative;width:60px;height:60px;flex-shrink:0;border-radius:6px;overflow:hidden;background:#f5f5f5}.carousel-thumbnail-vertical-new img{width:100%;height:100%;object-fit:cover}.selected-indicator-vertical{position:absolute;top:3px;right:3px;background:#d4af7a;color:#fff;font-size:.7rem;font-weight:700;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 4px #0003}.carousel-info-vertical{flex:1;display:flex;flex-direction:column;gap:.25rem}.carousel-label-vertical{font-size:.85rem;font-weight:600;color:#212529;line-height:1.2}.carousel-badge-tiny{display:inline-block;background:#4caf5026;color:#2e7d32;padding:.15rem .4rem;border-radius:4px;font-size:.65rem;font-weight:600;align-self:flex-start}.carousel-badge-recommended{display:inline-block;background:#c9a56e33;color:#b89968;padding:.15rem .4rem;border-radius:4px;font-size:.65rem;font-weight:600;align-self:flex-start;border:1px solid rgba(201,165,110,.4)}.carousel-option-vertical.selected .carousel-badge-recommended{background:#00000026;color:#000;border-color:#0003}.preview-info-box-compact{background:linear-gradient(135deg,#2196f314,#2196f31f);border-left:3px solid #2196F3;border-radius:8px;padding:.85rem;border:1px solid rgba(33,150,243,.2)}.preview-info-box-compact .info-header{display:flex;align-items:center;gap:.5rem;margin-bottom:.75rem}.preview-info-box-compact .info-icon{font-size:1.2rem;flex-shrink:0}.preview-info-box-compact .info-title{margin:0;font-size:.95rem;font-weight:700;color:#212529;text-transform:uppercase;letter-spacing:.5px}.preview-info-box-compact .info-content{display:flex;flex-direction:column;gap:.35rem}.info-description-compact{color:#212529;font-size:.82rem;margin:0;line-height:1.4;font-weight:500}.info-suitable-compact{display:inline-block;background:#fff;color:#2e7d32;padding:.3rem .6rem;border-radius:5px;font-size:.72rem;font-weight:600;align-self:flex-start;border:1.5px solid #4CAF50;box-shadow:0 1px 3px #0000001a}.preview-comparison-section-compact{background:#fff;border:2px solid #dee2e6;border-radius:12px;padding:1rem}.comparison-header-with-toggle{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.comparison-title-compact{font-size:.9rem;color:#212529;margin:0;font-weight:600}.comparison-preview-compact{width:100%}.preview-info-box-wide{background:#f8f9fa;border:2px solid #dee2e6;border-radius:12px;padding:1.25rem;margin-top:1rem}.preview-description-wide{color:#212529;font-size:1rem;line-height:1.6;margin:0 0 .75rem}.suitable-badge-wide{display:inline-block;background:#d4af7a;color:#fff;padding:.35rem .85rem;border-radius:6px;font-size:.85rem;font-weight:600}.single-preview.no-material .preview-image,.single-preview.material-sim .preview-image{border:none!important}.unsaved-warning-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;z-index:10001;display:flex;align-items:center;justify-content:center;animation:fadeIn .2s ease-in}.unsaved-warning-modal{background:#fff;border-radius:12px;padding:2rem;max-width:650px;width:90%;box-shadow:0 20px 60px #00000080;animation:slideUp .3s ease-out}.unsaved-warning-modal h3{color:#212529;margin:0 0 1rem;font-size:1.5rem}.unsaved-warning-modal p{color:#495057;margin:0 0 1.5rem;line-height:1.6;font-size:1rem}.unsaved-warning-actions{display:flex;gap:.75rem;flex-wrap:wrap}.unsaved-warning-actions button{flex:1;min-width:140px;padding:.85rem 1.25rem;display:flex;align-items:center;justify-content:center;text-align:center}.tools-container{display:block;margin-top:1rem;width:100%;position:relative;z-index:999}.basic-tools-box{background:#fff;border:2px solid #dee2e6;border-radius:12px;padding:1.25rem}.basic-tools-box h4{font-size:1rem;font-weight:600;color:#212529;margin:0 0 1rem;display:flex;align-items:center;gap:.5rem}.basic-tools-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.75rem}.basic-tool-btn{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:8px;padding:1rem;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s;display:flex;flex-direction:column;align-items:center;gap:.5rem}.basic-tool-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 12px #667eea66}.basic-tool-btn:disabled{opacity:.5;cursor:not-allowed}.basic-tool-btn-active{background:linear-gradient(135deg,#4caf50,#45a049);box-shadow:0 0 0 3px #4caf504d;animation:pulse-active 2s ease-in-out infinite}@keyframes pulse-active{0%,to{box-shadow:0 0 0 3px #4caf504d}50%{box-shadow:0 0 0 6px #4caf5033}}.basic-tool-icon{font-size:1.5rem}.basic-tool-label{font-size:.85rem}.assistant-box{background:linear-gradient(135deg,#f8f9fa,#e9ecef);border:2px solid #d4af76;border-radius:12px;padding:1.25rem}.assistant-box h4{font-size:1rem;font-weight:600;color:#1e293b;margin:0 0 1rem;display:flex;align-items:center;gap:.5rem}.assistant-content{background:#fff;border-radius:8px;padding:1rem}.assistant-recommendation{display:flex;flex-direction:column;gap:.75rem}.assistant-icon{font-size:2rem;text-align:center}.assistant-title{font-size:.95rem;font-weight:700;color:#1e293b;margin:0}.assistant-message{font-size:.85rem;color:#475569;line-height:1.5;margin:0}.assistant-action-btn{background:linear-gradient(135deg,#d4af76,#c9a56e);color:#fff;border:none;border-radius:8px;padding:.75rem 1.25rem;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s;width:100%;margin-top:.5rem}.assistant-action-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 12px #d4af7666}.assistant-action-btn:disabled{opacity:.5;cursor:not-allowed}.assistant-analyzing{text-align:center;padding:1rem;color:#64748b;font-style:italic}.assistant-options{display:flex;flex-direction:column;gap:.5rem;margin-top:.75rem}.assistant-option-btn{background:#fff;border:2px solid #e2e8f0;border-radius:6px;padding:.65rem;font-size:.85rem;font-weight:500;cursor:pointer;transition:all .2s;text-align:left}.assistant-option-btn:hover{border-color:#d4af76;background:#fef3e7}.image-tools-box{background:#fff;border:2px solid #dee2e6;border-radius:12px;padding:1rem;margin-top:1rem;width:100%}.image-tools-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:0;padding-bottom:1rem;border-bottom:2px solid #dee2e6}.image-tools-header h4{font-size:1rem;font-weight:600;color:#212529;margin:0;flex:1}.header-controls{display:flex;align-items:center;gap:.5rem;flex:1;justify-content:center}.undo-redo-btn{background:#f8f9fa;border:2px solid #dee2e6;color:#212529;font-size:.85rem;font-weight:600;cursor:pointer;padding:.5rem .75rem;border-radius:6px;transition:all .2s ease;white-space:nowrap}.undo-redo-btn:hover:not(:disabled){background:#e9ecef;border-color:#d4af7a;color:#d4af7a;transform:translateY(-1px)}.undo-redo-btn:disabled{opacity:.4;cursor:not-allowed}.toggle-wrapper{flex:1;display:flex;justify-content:flex-end}.toggle-tools-btn{background:none;border:none;color:#d4af7a;font-size:.9rem;font-weight:600;cursor:pointer;padding:.5rem;transition:all .2s ease}.toggle-tools-btn:hover{color:#b89968;transform:translate(3px)}.recommendation-box{display:flex;align-items:flex-start;gap:1rem;padding:1rem;margin:1rem 0;border-radius:8px;position:relative;animation:slideInDown .4s ease}@keyframes slideInDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.recommendation-suggestion{background:linear-gradient(135deg,#d4af7626,#d4af7614);border:2px solid #D4AF7A;box-shadow:0 4px 12px #d4af7633}.recommendation-info{background:linear-gradient(135deg,#667eea26,#667eea14);border:2px solid rgba(102,126,234,.5);box-shadow:0 4px 12px #667eea33}.recommendation-tip{background:linear-gradient(135deg,#96969626,#96969614);border:2px solid rgba(150,150,150,.5);box-shadow:0 4px 12px #0000001a}.recommendation-icon{font-size:2rem;flex-shrink:0;line-height:1;filter:drop-shadow(0 2px 4px rgba(0,0,0,.2))}.recommendation-content{flex:1}.recommendation-content h4{margin:0 0 .5rem;font-size:1rem;font-weight:600;color:#212529}.recommendation-content p{margin:0 0 .75rem;font-size:.9rem;line-height:1.5;color:#495057}.recommendation-action-btn{background:#d4af7a;color:#1a1a1a;border:none;padding:.6rem 1.2rem;border-radius:6px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 8px #d4af764d}.recommendation-action-btn:hover{background:#b89968;transform:translateY(-2px);box-shadow:0 4px 12px #d4af7666}.close-recommendation{position:absolute;top:.75rem;right:.75rem;background:#0000004d;border:none;color:#495057;width:24px;height:24px;border-radius:50%;font-size:1rem;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;line-height:1}.close-recommendation:hover{background:#00000080;color:#212529;transform:rotate(90deg)}.image-tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.5rem;margin-top:1rem}.tool-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:1rem;background:#f8f9fa;border:2px solid #dee2e6;border-radius:8px;cursor:pointer;transition:all .2s ease;font-family:inherit;min-height:100px}.tool-btn:hover:not(:disabled){background:#c9a56e1a;border-color:#d4af7a;transform:translateY(-2px);box-shadow:0 4px 12px #c9a56e33}.tool-btn:disabled{opacity:.5;cursor:not-allowed}.tool-icon{font-size:2rem;color:#d4af7a;line-height:1}.tool-label{font-size:.85rem;font-weight:600;color:#212529;text-align:center;line-height:1.3}.tool-btn-highlight{border-color:#c9a56e80;background:linear-gradient(135deg,#c9a56e0d,#c9a56e1a)}.tool-btn-highlight:hover:not(:disabled){background:linear-gradient(135deg,#c9a56e26,#c9a56e40);border-color:#d4af7a;transform:translateY(-3px);box-shadow:0 6px 16px #c9a56e4d}.preview-info-box-header{display:flex;align-items:flex-start;gap:.75rem;padding:.75rem 1rem;background:linear-gradient(135deg,#c9a56e14,#c9a56e1f);border-left:4px solid #D4AF7A;border-radius:8px;margin:0 1.5rem 1.5rem;box-shadow:0 2px 8px #0000000d}.preview-info-box-header .info-icon{font-size:1.25rem;flex-shrink:0;margin-top:.1rem}.preview-info-box-header .info-content{flex:1;display:flex;flex-direction:column;gap:.25rem}.preview-info-box-header .info-description{margin:0;font-size:.9rem;color:#212529;line-height:1.4}.preview-info-box-header .info-suitable{font-size:.8rem;color:#495057;font-weight:600}.magic-eraser-active{position:relative}.clickable-eraser{cursor:crosshair!important;transition:filter .2s ease}.clickable-eraser:hover{filter:brightness(1.1)}.magic-eraser-hint{position:absolute;top:20px;left:50%;transform:translate(-50%);background:#9b59b6f2;color:#fff;padding:12px 24px;border-radius:8px;font-size:14px;font-weight:600;box-shadow:0 4px 16px #9b59b666;z-index:10;animation:slideInDown .3s ease;pointer-events:none}.tool-btn-active{background:linear-gradient(135deg,#9b59b640,#9b59b626)!important;border-color:#9b59b6!important;box-shadow:0 0 0 3px #9b59b633!important}.tool-btn-active .tool-icon{color:#9b59b6!important;animation:pulse 1.5s ease-in-out infinite}.crop-controls-external{background:#fff;border:2px solid #D4AF7A;border-radius:12px;padding:16px 20px;margin-bottom:16px;display:flex;align-items:center;justify-content:space-between;gap:24px;box-shadow:0 4px 20px #d4af3733;animation:slideInDown .3s ease;position:relative;z-index:999}.crop-size-display{display:flex;align-items:center;gap:20px;flex:1}.crop-size-label{font-size:14px;font-weight:700;color:#212529;margin-right:8px}.crop-size-display label{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:#212529}.crop-size-display input{width:70px;padding:8px 12px;border:2px solid #dee2e6;border-radius:8px;background:#f8f9fa;color:#212529;font-size:14px;font-weight:600;text-align:center;transition:all .2s}.crop-size-display input:focus{outline:none;border-color:#d4af7a;box-shadow:0 0 0 3px #d4af371a}.crop-action-buttons-external{display:flex;gap:12px}.crop-mode-ui-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#ffffff80;z-index:998;display:flex;align-items:flex-start;justify-content:center;padding-top:20px;pointer-events:none}.crop-mode-ui-overlay .crop-mode-hint{pointer-events:auto}.crop-mode-hint{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:12px 24px;border-radius:12px;font-size:15px;font-weight:600;box-shadow:0 8px 32px #667eea66;animation:slideInDown .3s ease}.disabled-during-crop{opacity:.4;pointer-events:none;filter:blur(2px)}.rectangle-crop-active{position:relative}.clickable-crop{cursor:crosshair!important;user-select:none;-webkit-user-select:none}.rectangle-crop-hint{position:absolute;top:20px;left:50%;transform:translate(-50%);background:#3498dbf2;color:#fff;padding:12px 24px;border-radius:8px;font-size:14px;font-weight:600;box-shadow:0 4px 16px #3498db66;z-index:10;animation:slideInDown .3s ease;pointer-events:none}.crop-rectangle-overlay{box-sizing:border-box}.professional-crop-overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1000;pointer-events:none}.professional-crop-overlay *{pointer-events:auto}.crop-controls-bar{position:absolute;top:-60px;left:50%;transform:translate(-50%);background:#fff;border:2px solid #dee2e6;border-radius:10px;padding:12px 16px;display:flex;align-items:center;gap:20px;box-shadow:0 4px 20px #0003;z-index:1001}.crop-size-inputs{display:flex;gap:16px;align-items:center}.crop-size-inputs label{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:#212529}.crop-size-inputs input{width:60px;padding:6px 8px;border:1px solid #dee2e6;border-radius:6px;background:#f8f9fa;color:#212529;font-size:13px;text-align:center}.crop-action-buttons{display:flex;gap:8px}.crop-btn-apply,.crop-btn-cancel{padding:8px 16px;border:none;border-radius:6px;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s}.crop-btn-apply{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.crop-btn-apply:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px #667eea66}.crop-btn-apply:disabled{opacity:.5;cursor:not-allowed}.crop-btn-cancel{background:#f8f9fa;border:1px solid #dee2e6;color:#212529}.crop-btn-cancel:hover{background:#e74c3c;color:#fff;border-color:#e74c3c}.crop-rectangle{position:relative;box-sizing:border-box}.crop-handle{position:absolute;width:14px;height:14px;background:#667eea;border:3px solid white;border-radius:50%;box-shadow:0 2px 8px #0006;z-index:1002;transition:all .2s cubic-bezier(.4,0,.2,1)}.crop-handle:hover{transform:scale(1.4);background:#764ba2;box-shadow:0 4px 12px #764ba299}.crop-handle:active{transform:scale(1.15)}.crop-dimensions-label{position:absolute;top:-40px;left:50%;transform:translate(-50%);background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:8px 16px;border-radius:8px;font-size:14px;font-weight:700;white-space:nowrap;box-shadow:0 4px 12px #0000004d,0 0 0 2px #fff3;z-index:1003;pointer-events:none;letter-spacing:.5px}.crop-overlay-dark{transition:all .15s ease-out}.style-specific-parameters-section{background:#fff;border:2px solid #dee2e6;border-radius:12px;padding:1rem;margin-top:1rem}.parameters-description-small{font-size:.8rem;color:#495057;margin:-.5rem 0 1rem}.parameters-grid-compact{display:flex;flex-direction:column;gap:1rem}.parameter-control-compact{display:flex;flex-direction:column;gap:.5rem}.parameter-label-row-compact{display:flex;justify-content:space-between;align-items:center;font-size:.9rem}.parameter-label-row-compact label{font-weight:600;color:#212529}.parameter-value-compact{font-size:.9rem;font-weight:600;color:#667eea}.modern-slider-compact{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:6px;border-radius:3px;background:linear-gradient(to right,#e0e0e0,#667eea);outline:none;cursor:pointer}.modern-slider-compact::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:#667eea;cursor:pointer;box-shadow:0 2px 6px #0003;transition:all .2s}.modern-slider-compact::-webkit-slider-thumb:hover{background:#764ba2;transform:scale(1.2)}.modern-slider-compact::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#667eea;cursor:pointer;box-shadow:0 2px 6px #0003;border:none;transition:all .2s}.modern-slider-compact::-moz-range-thumb:hover{background:#764ba2;transform:scale(1.2)}.parameter-hint-text{font-size:.75rem;color:#495057;margin:0;font-style:italic}.parameter-select{padding:.5rem;border:1px solid #dee2e6;border-radius:6px;background:#f8f9fa;color:#212529;font-size:.9rem;cursor:pointer}.smart-tips-box{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:12px;padding:1.25rem;margin-top:1.5rem;box-shadow:0 4px 12px #667eea33;color:#fff}.tips-header{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem}.tips-header h4{margin:0;font-size:1.1rem;font-weight:700;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.1)}.tips-icon{font-size:1.5rem;animation:pulse-glow 2s ease-in-out infinite}@keyframes pulse-glow{0%,to{transform:scale(1);filter:drop-shadow(0 0 2px rgba(255,255,255,.5))}50%{transform:scale(1.1);filter:drop-shadow(0 0 8px rgba(255,255,255,.8))}}.tips-content{display:flex;flex-direction:column;gap:.75rem}.tip-text{margin:0;font-size:.9rem;line-height:1.5;color:#fffffff2;padding-left:1rem;border-left:3px solid rgba(255,255,255,.4);background:#ffffff1a;padding:.75rem .75rem .75rem 1rem;border-radius:6px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.qr-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:10000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fadeIn .2s ease-in}.qr-modal{background:var(--app-card-bg, white);border-radius:16px;box-shadow:0 20px 60px #0000004d;width:90%;max-width:700px;max-height:85vh;display:flex;flex-direction:column;animation:slideUp .3s ease-out}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.qr-modal-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem 2rem;border-bottom:2px solid var(--app-border, #e0e0e0)}.qr-modal-header h2{margin:0;font-size:1.5rem;color:var(--app-text-primary, #2c3e50);font-weight:700}.qr-modal-close{width:36px;height:36px;border:none;background:transparent;font-size:1.5rem;color:var(--app-text-primary, #2c3e50);cursor:pointer;border-radius:8px;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.qr-modal-close:hover{background:#0000000d;color:#667eea}.dark-mode .qr-modal-close:hover{background:#ffffff1a}.qr-modal-content{flex:1;overflow-y:auto;padding:2rem}.qr-modal-content::-webkit-scrollbar{width:8px}.qr-modal-content::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.qr-modal-content::-webkit-scrollbar-thumb{background:#c9a56e;border-radius:4px}.qr-type-selector{margin-bottom:2rem}.qr-type-selector h3{margin:0 0 1rem;font-size:1.1rem;color:var(--app-text-primary, #2c3e50);font-weight:600}.qr-type-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.75rem}.qr-type-btn{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1rem;border:2px solid var(--app-border, #e0e0e0);border-radius:10px;background:var(--app-bg-white, white);cursor:pointer;transition:all .2s ease;font-size:.85rem;font-weight:500;color:var(--app-text-secondary, #666)}.qr-type-btn:hover{border-color:#c9a56e;background:#c9a56e0d;transform:translateY(-2px);box-shadow:0 4px 12px #c9a56e33}.qr-type-btn.active{border-color:#c9a56e;background:linear-gradient(135deg,#c9a56e26,#c9a56e14);color:var(--app-text-primary, #2c3e50);box-shadow:0 4px 12px #c9a56e4d}.qr-type-icon{font-size:2rem}.qr-type-label{text-align:center;line-height:1.3}.qr-form{display:flex;flex-direction:column;gap:1rem}.qr-form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}.qr-form-group{display:flex;flex-direction:column;gap:.5rem}.qr-form-group label{font-size:.9rem;font-weight:600;color:var(--app-text-primary, #2c3e50)}.qr-form-group input,.qr-form-group select,.qr-form-group textarea{padding:.75rem;border:2px solid var(--app-border, #e0e0e0);border-radius:8px;font-size:.95rem;font-family:inherit;transition:all .2s ease;background:var(--app-bg-white, white);color:var(--app-text-primary, #2c3e50)}.qr-form-group input:focus,.qr-form-group select:focus,.qr-form-group textarea:focus{outline:none;border-color:#c9a56e;box-shadow:0 0 0 3px #c9a56e1a}.qr-form-group textarea{resize:vertical;min-height:80px}.qr-hint{font-size:.85rem;color:var(--app-text-secondary, #666);margin:.5rem 0 0;padding:.75rem;background:#c9a56e14;border-radius:6px;border-left:3px solid #c9a56e}.qr-modal-footer{display:flex;justify-content:flex-end;gap:1rem;padding:1.5rem 2rem;border-top:2px solid var(--app-border, #e0e0e0)}.qr-btn{padding:.75rem 1.5rem;border:none;border-radius:8px;font-size:.95rem;font-weight:600;cursor:pointer;transition:all .2s ease}.qr-btn-secondary{background:linear-gradient(135deg,#f0f4f8,#e2e8f0);color:#475569;border:2px solid #cbd5e1;box-shadow:0 2px 8px #64748b1f}.qr-btn-secondary:hover{background:linear-gradient(135deg,#e2e8f0,#cbd5e1);color:#1e293b;border-color:#94a3b8;transform:translateY(-1px);box-shadow:0 4px 12px #64748b33}.qr-btn-primary{background:linear-gradient(135deg,#c9a56e,#b8935a);color:#fff;box-shadow:0 4px 12px #c9a56e4d}.qr-btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 16px #c9a56e66}.qr-btn-primary:disabled{opacity:.5;cursor:not-allowed}.login-prompt-modal{background:#fff;border-radius:16px;padding:2rem;max-width:480px;width:90%;position:relative;box-shadow:0 20px 60px #0000004d;text-align:center;max-height:90vh;overflow-y:auto}.login-prompt-modal .modal-close{position:absolute;top:1rem;right:1rem;background:transparent;border:none;font-size:1.5rem;color:#999;cursor:pointer;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .2s}.login-prompt-modal .modal-close:hover{background:#f0f0f0;color:#333}.modal-icon{font-size:4rem;margin-bottom:1rem;animation:bounceIn .6s ease-out}@keyframes bounceIn{0%{transform:scale(0);opacity:0}50%{transform:scale(1.1)}to{transform:scale(1);opacity:1}}.login-prompt-modal h2{margin:0 0 .5rem;color:#2c3e50;font-size:1.75rem;font-weight:700}.modal-description{color:#666;margin-bottom:1.5rem;line-height:1.6;font-size:1rem}.benefits{display:flex;gap:1rem;justify-content:center;margin-bottom:2rem;flex-wrap:wrap}.benefit{display:flex;flex-direction:column;align-items:center;gap:.5rem;font-size:.875rem;color:#555;flex:1;min-width:100px}.benefit-icon{font-size:1.75rem}.login-options{display:flex;flex-direction:column;gap:.75rem;margin-bottom:1.5rem}.btn-google,.btn-shopify{padding:.875rem 1.5rem;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.75rem;transition:all .2s}.btn-google{background:#fff;border:2px solid #4285f4;color:#4285f4}.btn-google:hover{background:#4285f4;color:#fff;transform:translateY(-2px);box-shadow:0 4px 12px #4285f44d}.btn-google svg{width:20px;height:20px;flex-shrink:0}.btn-google:hover svg path{fill:#fff}.btn-shopify{background:linear-gradient(135deg,#96bf48,#7ab317);color:#fff;border:none}.btn-shopify:hover{transform:translateY(-2px);box-shadow:0 4px 12px #96bf4866}.divider{position:relative;text-align:center;margin:1.5rem 0;color:#999;font-size:.875rem}.divider span{background:#fff;padding:0 1rem;position:relative;z-index:1}.divider:before{content:"";position:absolute;top:50%;left:0;right:0;height:1px;background:#ddd;z-index:0}.btn-guest{padding:.75rem 1.5rem;background:transparent;border:1px solid #ddd;border-radius:8px;color:#666;font-size:.875rem;cursor:pointer;transition:all .2s;font-weight:500}.btn-guest:hover{background:#f5f5f5;border-color:#999;color:#333}.guest-warning{display:block;margin-top:1rem;color:#e67e22;font-size:.75rem;line-height:1.4;padding:.5rem;background:#fff3e0;border-radius:6px}@media (max-width: 480px){.login-prompt-modal{padding:1.5rem}.modal-icon{font-size:3rem}.login-prompt-modal h2{font-size:1.5rem}.benefits{gap:.5rem}.benefit{font-size:.8rem}.benefit-icon{font-size:1.5rem}}@media (max-width: 1399px){.product-config-toolbar{display:flex;gap:.75rem;padding:1rem;background:var(--app-card-bg, white);border-radius:12px;margin-bottom:1rem;box-shadow:0 2px 8px #00000014;flex-wrap:wrap}}.config-btn{flex:1;min-width:150px;padding:.875rem 1rem;background:linear-gradient(135deg,#f8f9fa,#fff);border:2px solid #dee2e6;border-radius:10px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;gap:.75rem;box-shadow:0 2px 4px #0000000d;text-align:left}.config-btn.active{border-color:#c9a56e;background:linear-gradient(135deg,#fff9f0,#fff5e6)}.config-icon{font-size:1.5rem;line-height:1;flex-shrink:0}.config-content{display:flex;flex-direction:column;gap:.25rem;flex:1;min-width:0}.config-label{font-size:.7rem;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.5px;line-height:1}.config-value{font-size:.9rem;font-weight:600;color:#1a252f;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (max-width: 600px){.product-config-toolbar{flex-direction:column}.config-btn{min-width:100%}}.dark-mode .product-config-toolbar{background:var(--app-card-bg, #2a2a2a)}.dark-mode .config-btn.active{background:linear-gradient(135deg,#3a2f1a,#2f2515);border-color:#c9a56e}.config-popup-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#0009;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:10000;padding:1rem;animation:fadeIn .2s ease}.config-popup-content{background:var(--app-card-bg, #ffffff);border-radius:16px;box-shadow:0 20px 60px #0000004d;max-width:600px;width:100%;max-height:85vh;display:flex;flex-direction:column;animation:slideUp .3s ease;position:relative}.config-popup-content.geometry-popup{max-width:500px}.config-popup-content.backside-popup{max-width:480px}.popup-header{padding:1.5rem 1.75rem;border-bottom:2px solid var(--border-color, #e5e7eb);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}.popup-header h3{margin:0;font-size:1.25rem;font-weight:700;color:var(--text-primary, #1a252f);display:flex;align-items:center;gap:.5rem}.popup-close-btn{background:transparent;border:none;font-size:1.5rem;color:var(--text-secondary, #64748b);cursor:pointer;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:6px;transition:all .2s ease;padding:0;line-height:1}.popup-close-btn:hover{background:var(--hover-bg, #f1f5f9);color:var(--text-primary, #1a252f)}.popup-body{padding:1.5rem 1.75rem;overflow-y:auto;flex:1}.popup-body::-webkit-scrollbar{width:8px}.popup-body::-webkit-scrollbar-track{background:var(--app-card-bg, #f8f9fa);border-radius:4px}.popup-body::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb, #cbd5e1);border-radius:4px}.popup-body::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, #94a3b8)}.popup-footer{padding:1rem 1.75rem;border-top:2px solid var(--border-color, #e5e7eb);display:flex;gap:.75rem;justify-content:flex-end;flex-shrink:0}.popup-btn-primary,.popup-btn-secondary{padding:.625rem 1.25rem;border-radius:8px;font-weight:600;font-size:.9rem;cursor:pointer;transition:all .2s ease;border:2px solid transparent}.popup-btn-primary{background:linear-gradient(135deg,#d4af7a,#c19a6b);color:#fff;border-color:#d4af7a}.popup-btn-primary:hover:not(:disabled){background:linear-gradient(135deg,#c19a6b,#a8895b);transform:translateY(-1px);box-shadow:0 4px 12px #d4af7a4d}.popup-btn-primary:disabled{opacity:.5;cursor:not-allowed;background:#e5e7eb;border-color:#e5e7eb;color:#94a3b8}.popup-btn-secondary{background:var(--app-card-bg, #ffffff);color:var(--text-primary, #1a252f);border-color:var(--border-color, #e5e7eb)}.popup-btn-secondary:hover{background:var(--hover-bg, #f8f9fa);border-color:#cbd5e1}.material-simulation-toggle{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;background:var(--hover-bg, #f8f9fa);border-radius:8px;cursor:pointer;transition:all .2s ease}.material-simulation-toggle:hover{background:var(--border-color, #e5e7eb)}.material-simulation-toggle input[type=checkbox]{cursor:pointer;width:16px;height:16px}.material-simulation-toggle span{font-size:.85rem;font-weight:500;color:var(--text-secondary, #64748b)}.material-list-vertical{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.875rem}.material-item-visual{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1rem;border:2px solid var(--border-color, #e5e7eb);border-radius:12px;cursor:pointer;transition:all .2s ease;background:var(--app-card-bg, #ffffff)}.material-item-visual:hover{border-color:#d4af7a;transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.material-item-visual.selected{border-color:#d4af7a;background:linear-gradient(135deg,#d4af7a1a,#c19a6b0d);box-shadow:0 0 0 3px #d4af7a33}.material-color-circle{width:80px;height:80px;border-radius:8px;border:3px solid var(--border-color, #e5e7eb);background-size:cover;background-position:center;flex-shrink:0}.material-item-visual.selected .material-color-circle{border-color:#d4af7a;box-shadow:0 4px 12px #d4af7a4d}.material-name-visual{font-size:.9rem;font-weight:600;color:var(--text-primary, #1a252f);text-align:center}.geometry-selector{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin-bottom:1.5rem}.geometry-option{padding:1rem;border:2px solid var(--border-color, #e5e7eb);border-radius:10px;background:var(--app-card-bg, #ffffff);cursor:pointer;transition:all .2s ease;text-align:center;display:flex;flex-direction:column;align-items:center;gap:.5rem}.geometry-option:hover{border-color:#d4af7a;transform:translateY(-2px)}.geometry-option.selected{border-color:#d4af7a;background:linear-gradient(135deg,#d4af7a1a,#c19a6b0d);box-shadow:0 0 0 3px #d4af7a33}.geometry-icon{font-size:2rem}.geometry-label{font-size:.85rem;font-weight:600;color:var(--text-primary, #1a252f)}.size-inputs{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-bottom:1.5rem}.size-inputs.single-input{grid-template-columns:1fr}.input-group{display:flex;flex-direction:column;gap:.5rem}.input-group label{font-size:.85rem;font-weight:600;color:var(--text-secondary, #64748b)}.input-group input[type=number]{padding:.75rem;border:2px solid var(--border-color, #e5e7eb);border-radius:8px;font-size:.95rem;background:var(--app-card-bg, #ffffff);color:var(--text-primary, #1a252f);transition:all .2s ease}.input-group input[type=number]:focus{outline:none;border-color:#d4af7a;box-shadow:0 0 0 3px #d4af7a1a}.border-radius-control{display:flex;flex-direction:column;gap:.5rem}.border-radius-control label{font-size:.85rem;font-weight:600;color:var(--text-secondary, #64748b);display:flex;justify-content:space-between;align-items:center}.border-radius-value{color:#d4af7a;font-weight:700}.border-radius-control input[type=range]{width:100%;height:6px;border-radius:3px;background:var(--border-color, #e5e7eb);outline:none;-webkit-appearance:none}.border-radius-control input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:#d4af7a;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 6px #0003}.border-radius-control input[type=range]::-webkit-slider-thumb:hover{background:#c19a6b;transform:scale(1.1)}.border-radius-control input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#d4af7a;cursor:pointer;border:none;transition:all .2s ease;box-shadow:0 2px 6px #0003}.border-radius-control input[type=range]::-moz-range-thumb:hover{background:#c19a6b;transform:scale(1.1)}.backside-config-section{display:flex;flex-direction:column;gap:1.5rem}.backside-info{padding:1rem;background:var(--hover-bg, #f8f9fa);border-radius:10px;border-left:4px solid #D4AF7A}.backside-info p{margin:0;font-size:.9rem;color:var(--text-secondary, #64748b);line-height:1.6}.backside-toggle-section{display:flex;justify-content:center}.backside-toggle-btn{display:flex;align-items:center;gap:1rem;padding:1.25rem 2rem;border:2px solid var(--border-color, #e5e7eb);border-radius:12px;background:var(--app-card-bg, #ffffff);cursor:pointer;transition:all .2s ease;min-width:200px}.backside-toggle-btn:hover{border-color:#d4af7a;transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.backside-toggle-btn.enabled{border-color:#d4af7a;background:linear-gradient(135deg,#d4af7a1a,#c19a6b0d)}.toggle-icon{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.5rem;flex-shrink:0;transition:all .2s ease}.backside-toggle-btn.enabled .toggle-icon{background:linear-gradient(135deg,#d4af7a,#c19a6b);color:#fff}.backside-toggle-btn.disabled .toggle-icon{background:var(--border-color, #e5e7eb);color:var(--text-secondary, #64748b)}.toggle-content{display:flex;flex-direction:column;gap:.25rem}.toggle-label{font-size:.75rem;font-weight:600;color:var(--text-secondary, #64748b);text-transform:uppercase;letter-spacing:.5px}.toggle-status{font-size:1rem;font-weight:700;color:var(--text-primary, #1a252f)}.backside-toggle-btn.enabled .toggle-status{color:#d4af7a}.backside-hint{padding:.875rem 1rem;background:#d4af7a1a;border-radius:8px;border:1px solid rgba(212,175,122,.3)}.backside-hint small{font-size:.85rem;color:var(--text-secondary, #64748b);line-height:1.5}.dark-mode .config-popup-overlay{background:#000c}.dark-mode .config-popup-content{background:var(--app-card-bg, #1e293b);box-shadow:0 20px 60px #0009}.dark-mode .popup-header{border-bottom-color:var(--border-color, #334155)}.dark-mode .popup-header h3{color:var(--text-primary, #f1f5f9)}.dark-mode .popup-close-btn{color:var(--text-secondary, #94a3b8)}.dark-mode .popup-close-btn:hover{background:var(--hover-bg, #334155);color:var(--text-primary, #f1f5f9)}.dark-mode .popup-footer{border-top-color:var(--border-color, #334155)}.dark-mode .popup-btn-secondary{background:var(--app-card-bg, #1e293b);color:var(--text-primary, #f1f5f9);border-color:var(--border-color, #334155)}.dark-mode .popup-btn-secondary:hover{background:var(--hover-bg, #334155);border-color:#475569}.dark-mode .material-item-visual,.dark-mode .geometry-option,.dark-mode .backside-toggle-btn{background:var(--app-card-bg, #1e293b);border-color:var(--border-color, #334155)}.dark-mode .material-item-visual:hover,.dark-mode .geometry-option:hover,.dark-mode .backside-toggle-btn:hover{border-color:#d4af7a}.dark-mode .input-group input[type=number]{background:var(--app-card-bg, #1e293b);color:var(--text-primary, #f1f5f9);border-color:var(--border-color, #334155)}.dark-mode .backside-info{background:var(--hover-bg, #334155)}.dark-mode .backside-hint{background:#d4af7a26;border-color:#d4af7a66}@media (max-width: 600px){.config-popup-content{max-width:100%;max-height:90vh;border-radius:12px}.popup-header,.popup-body{padding:1.25rem 1rem}.popup-footer{padding:1rem;flex-direction:column-reverse}.popup-btn-primary,.popup-btn-secondary{width:100%}.material-list-vertical{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:.5rem}.material-color-circle{width:60px;height:60px;border-radius:6px}.geometry-selector,.size-inputs{grid-template-columns:1fr}}.product-placement,.product-placement-page{width:100%;min-height:100vh;padding:0;margin:0;position:relative;z-index:1}.project-name-banner{background:linear-gradient(135deg,#667eea,#764ba2);padding:1rem 2rem;margin-top:0;margin-bottom:0;border-radius:0;box-shadow:0 4px 12px #667eea4d;display:flex;justify-content:space-between;align-items:center;gap:2rem;position:sticky;top:0;z-index:90;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.banner-left{display:flex;align-items:center;gap:1rem;flex:1;min-width:0}.project-name-content{display:flex;align-items:center;gap:.75rem;flex:1;min-width:0;max-width:500px}.project-name-content label{font-size:1rem;font-weight:700;color:#fff;white-space:nowrap;text-shadow:0 2px 4px rgba(0,0,0,.2)}.project-name-input-large{flex:1;padding:.75rem 1rem;font-size:1.1rem;font-weight:600;border:3px solid rgba(255,255,255,.3);border-radius:8px;background:#fffffff2;color:#1a252f;transition:all .2s ease}.project-name-input-large:focus{outline:none;border-color:#fff;box-shadow:0 0 0 4px #ffffff4d;background:#fff}.project-name-input-large::placeholder{color:#999}.unsaved-indicator-left{color:#ff4757;font-size:1.5rem;animation:pulse 2s ease-in-out infinite;text-shadow:0 0 8px rgba(255,71,87,.6)}.btn-back-integrated{width:40px;height:40px;border:2px solid rgba(255,255,255,.4);background:#fff3;border-radius:8px;color:#fff;font-size:1.5rem;font-weight:700;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;padding:0;margin-right:.5rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);flex-shrink:0}.btn-back-integrated:hover{background:#ffffff4d;border-color:#fff;transform:translateY(-2px);box-shadow:0 4px 12px #0000004d}.btn-back-integrated:active{transform:translateY(0);box-shadow:0 2px 6px #0003}.banner-actions{display:flex;gap:1rem;align-items:center;flex-shrink:0}.btn-banner-secondary,.btn-banner-primary{padding:.75rem 1.5rem;font-size:1rem;font-weight:600;border-radius:8px;cursor:pointer;transition:all .2s ease;border:none;white-space:nowrap}.btn-banner-secondary{background:#fff3;color:#fff;border:2px solid rgba(255,255,255,.4);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.btn-banner-secondary:hover{background:#ffffff4d;border-color:#fff;transform:translateY(-1px);box-shadow:0 4px 12px #0003}.btn-banner-primary{background:#fff;color:#667eea;box-shadow:0 4px 12px #0003}.btn-banner-primary:hover{background:#f0f0f0;transform:translateY(-1px);box-shadow:0 6px 16px #0000004d}.btn-banner-template{display:flex;align-items:center;gap:.5rem;padding:.6rem 1rem;font-size:.95rem;font-weight:600;border-radius:8px;cursor:pointer;transition:all .2s ease;border:2px solid rgba(255,255,255,.4);background:#ffffff26;color:#fff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);white-space:nowrap}.btn-banner-template:hover:not(:disabled){background:#ffffff40;border-color:#fff;transform:translateY(-1px);box-shadow:0 4px 12px #0003}.btn-banner-template:disabled{opacity:.5;cursor:not-allowed}.btn-banner-template.has-template{background:#27ae604d;border-color:#27ae6099}.btn-banner-template.has-template:hover{background:#27ae6066;border-color:#27ae60}.btn-banner-template .template-icon{font-size:1.1rem}.btn-banner-template .template-label{font-size:.9rem}.btn-banner-form{display:flex;align-items:center;gap:.4rem;padding:.6rem 1rem;font-size:.9rem;font-weight:600;border-radius:8px;cursor:pointer;transition:all .2s ease;border:2px solid rgba(16,185,129,.5);background:#10b98133;color:#fff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);white-space:nowrap}.btn-banner-form:hover{background:#10b98159;border-color:#10b981;transform:translateY(-1px);box-shadow:0 4px 12px #10b9814d}.btn-banner-save-template{display:flex;align-items:center;gap:.4rem;padding:.6rem 1rem;font-size:.9rem;font-weight:600;border-radius:8px;cursor:pointer;transition:all .2s ease;border:2px solid rgba(212,175,118,.5);background:#d4af7633;color:#fff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);white-space:nowrap}.btn-banner-save-template:hover{background:#d4af7659;border-color:#d4af76;transform:translateY(-1px);box-shadow:0 4px 12px #d4af764d}.placement-header{background:linear-gradient(135deg,#1a1a2e,#16213e);padding:1.25rem 2rem;box-shadow:0 4px 16px #0000004d;display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;border-radius:12px;border:1px solid rgba(212,175,118,.2)}.placement-header h2{font-size:1.5rem;font-weight:600;color:#fff;margin:0}.placement-header p{color:#ffffffb3;margin:0}.design-reference{font-size:.9rem;margin-top:.25rem}.header-left{flex:1;display:flex;flex-direction:column;gap:.75rem}.project-name-input-container{display:flex;align-items:center;gap:.75rem}.project-name-input-container label{font-size:.9rem;font-weight:600;color:#d4af76e6;white-space:nowrap}.project-name-input{flex:1;max-width:400px;padding:.5rem .75rem;font-size:.95rem;border:2px solid rgba(212,175,118,.3);border-radius:6px;background:#0000004d;color:#fff;transition:all .2s ease}.project-name-input:focus{outline:none;border-color:#d4af7699;box-shadow:0 0 0 3px #d4af761a;background:#0006}.project-name-input::placeholder{color:#fff6}.unsaved-indicator{color:#e74c3c;font-size:1.25rem;animation:pulse 2s ease-in-out infinite}.header-actions{display:flex;gap:1rem;align-items:center}.header-actions .btn-secondary,.header-actions .btn-primary{padding:.75rem 1.5rem;font-size:1rem;font-weight:600;border-radius:8px;cursor:pointer;transition:all .2s ease;border:none}.header-actions .btn-secondary{background:var(--app-bg-secondary, #f8f9fa);color:var(--app-text-primary, #2c3e50);border:2px solid var(--app-border, #e0e0e0)}.header-actions .btn-secondary:hover{background:var(--app-bg-hover, #e9ecef);transform:translateY(-1px)}.header-actions .btn-primary{background:linear-gradient(135deg,#3498db,#2980b9);color:#fff;box-shadow:0 4px 12px #3498db4d}.header-actions .btn-primary:hover{background:linear-gradient(135deg,#2980b9,#21618c);transform:translateY(-1px);box-shadow:0 6px 16px #3498db66}.panel-backside-toggle{background:var(--app-card-gradient, var(--app-card-bg, white));border-radius:12px;padding:1.25rem;box-shadow:var(--app-card-shadow, 0 2px 8px rgba(0, 0, 0, .08));margin-bottom:1.5rem;border:1px solid var(--app-border, rgba(255,255,255,.1))}.panel-backside-toggle h3{font-size:1.1rem;font-weight:600;color:var(--app-text-primary, #2c3e50);margin:0 0 1rem}.backside-toggle-container{display:flex;align-items:center;gap:1rem;padding:1rem;border-radius:8px;background:linear-gradient(135deg,#f5f5f5,#e8e8e8);border:2px solid #ddd;transition:all .3s ease}.backside-toggle-container:has(input:checked){background:linear-gradient(135deg,#e8f5e9,#c8e6c9);border-color:#4caf50}.panel-side-switcher{background:linear-gradient(135deg,#fff,#f8fafc);border:2px solid #e2e8f0;border-radius:12px;padding:1rem;box-shadow:0 2px 8px #00000014}.panel-side-switcher h3{font-size:.95rem;font-weight:700;color:#1e293b;margin:0 0 .75rem;padding-bottom:.5rem;border-bottom:2px solid #e2e8f0}.side-switcher-buttons{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}.side-btn{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:.5rem;padding:.6rem .75rem;background:#f1f5f9;border:2px solid #cbd5e1;border-radius:8px;cursor:pointer;transition:all .2s ease;color:#475569;font-weight:600;position:relative}.side-btn:hover{background:#e2e8f0;border-color:#94a3b8;transform:translateY(-1px);box-shadow:0 2px 6px #0000001a}.side-btn.active{background:linear-gradient(135deg,#667eea,#764ba2);border-color:#667eea;color:#fff;box-shadow:0 3px 12px #667eea4d}.side-btn.active:hover{transform:translateY(-1px);box-shadow:0 4px 16px #667eea66}.side-icon{font-size:1.25rem;display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:#0000000f;flex-shrink:0}.side-btn.active .side-icon{background:#fff3;color:#fff}.side-label{font-size:.85rem;font-weight:700}.toggle-switch{position:relative;display:inline-block;width:52px;height:28px;flex-shrink:0}.toggle-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;transition:.3s;border-radius:28px}.toggle-slider:before{position:absolute;content:"";height:20px;width:20px;left:4px;bottom:4px;background-color:#fff;transition:.3s;border-radius:50%}.toggle-switch input:checked+.toggle-slider{background-color:#3498db}.toggle-switch input:checked+.toggle-slider:before{transform:translate(24px)}.toggle-switch input:focus+.toggle-slider{box-shadow:0 0 4px #3498db}.toggle-info{flex:1}.toggle-label{font-size:.95rem;font-weight:600;color:#2c3e50;text-shadow:0 1px 2px rgba(255,255,255,.8)}.backside-toggle-container:has(input:checked) .toggle-label{color:#2e7d32;font-weight:700}.toggle-hint{font-size:.8rem;color:#666;display:block;margin-top:.25rem;text-shadow:0 1px 1px rgba(255,255,255,.8)}.backside-toggle-container:has(input:checked) .toggle-hint{color:#388e3c}.backside-side-selector{margin-top:1.25rem;padding-top:1.25rem;border-top:2px solid var(--app-border, #e0e0e0)}.side-selector-label{display:block;font-size:.9rem;font-weight:600;color:var(--app-text-primary, #2c3e50);margin-bottom:.75rem}.multi-product-badge{display:flex;align-items:center;gap:.75rem;background:linear-gradient(135deg,#e8f4f8,#d4e7f0);border:2px solid #4CAF50;border-radius:8px;padding:.75rem 1rem;margin-top:1rem}.badge-icon{font-size:1.5rem}.badge-text{flex:1;font-size:.95rem;color:var(--app-text-primary, #1A1A1A)}.badge-text strong{color:#4caf50;font-weight:700}.btn-toggle-products{padding:.5rem 1rem;background:#fff;border:2px solid #4CAF50;border-radius:6px;color:#4caf50;font-size:.875rem;font-weight:600;cursor:pointer;transition:all .2s ease}.btn-toggle-products:hover{background:#4caf50;color:#fff}.multi-product-list{display:flex;flex-direction:column;gap:.5rem;margin-top:1rem;padding:1rem;background:#f8f9fa;border-radius:8px;max-height:250px;overflow-y:auto}.multi-product-item{display:flex;align-items:center;gap:.75rem;padding:.75rem;background:#fff;border:2px solid #E0E0E0;border-radius:6px;transition:all .2s ease}.multi-product-item:hover{border-color:#c9a56e;box-shadow:0 2px 8px #c9a56e33}.product-icon-small{font-size:1.5rem}.product-name-small{flex:1;font-size:.95rem;font-weight:600;color:var(--app-text-primary, #1A1A1A)}.product-dims-small{font-size:.875rem;color:var(--app-text-secondary, #666)}.current-badge{padding:.25rem .75rem;background:#c9a56e;color:#fff;border-radius:12px;font-size:.75rem;font-weight:600}.btn-remove-product{width:24px;height:24px;border-radius:50%;border:none;background:#f443361a;color:#f44336;font-size:1.25rem;line-height:1;cursor:pointer;transition:all .2s ease}.btn-remove-product:hover{background:#f44336;color:#fff}.product-item-compact.in-multi-select{border-color:#4caf50;box-shadow:0 0 0 2px #4caf5033}.multi-select-count{position:absolute;top:4px;left:4px;background:#4caf50;color:#fff;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700}.btn-link{background:none;border:none;color:#c9a56e;text-decoration:underline;cursor:pointer;font-size:.95rem;padding:.5rem 1rem}.btn-link:hover{color:#a88554}.product-categories{max-width:1400px;margin:0 auto}.product-category{margin-bottom:3rem}.product-category h3{font-size:1.5rem;color:var(--app-text-primary, #2C3E50);margin-bottom:1.5rem;display:flex;align-items:center;gap:.75rem}.category-icon{font-size:1.75rem}.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem}.product-card{background:linear-gradient(135deg,#1a1a2e,#16213e);border-radius:12px;padding:2rem;box-shadow:0 4px 16px #0000004d;cursor:pointer;transition:all .3s ease;text-align:center;border:2px solid rgba(212,175,118,.2)}.product-card:hover{transform:translateY(-4px);box-shadow:0 8px 30px #d4af7666;border:2px solid rgba(212,175,118,.5)}.product-icon{font-size:3rem;margin-bottom:1rem}.product-card h4{font-size:1.25rem;color:#fff;margin:0 0 .5rem}.product-dimensions{font-size:.875rem;color:#c9a56e;font-weight:600;margin:.5rem 0}.product-description{font-size:.875rem;color:var(--app-text-secondary, #666);line-height:1.5;margin:.75rem 0 0}.placement-workspace{display:flex;gap:1.5rem;margin-bottom:2rem;padding-top:1.5rem;max-width:100%;align-items:start}.template-form-column{width:320px;flex-shrink:0;height:100%;max-height:calc(100vh - 250px);position:sticky;top:190px}.product-selector-sidebar{width:300px;flex-shrink:0;display:flex;flex-direction:column;gap:1rem}.placement-main-center{flex:1;display:flex;flex-direction:column;gap:1rem;min-height:600px;min-width:300px}.placement-sidebar-right{width:380px;flex-shrink:0;display:flex;flex-direction:column;gap:1rem;max-height:calc(100vh - 180px);overflow-y:auto}.column-resizer{display:none}.column-resizer:active:before{background:#a68b5b;height:80px}.placement-sidebar-left{display:flex;flex-direction:column;gap:1rem}.placement-sidebar-right>*{width:100%}.placement-sidebar-right.old-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;position:sticky;top:2rem;max-height:calc(100vh - 4rem);overflow-y:auto;align-items:start}.placement-sidebar-right>.material-selector-visual,.placement-sidebar-right>.panel-design-controls,.placement-sidebar-right>.panel-text-editor{grid-column:span 2}.placement-sidebar-right>.panel-product-info,.placement-sidebar-right>.panel-text-controls{grid-column:span 1}@media (max-width: 1400px){.placement-sidebar-right{grid-template-columns:1fr}.placement-sidebar-right>*{grid-column:span 1!important}}.product-selector-sidebar>*{background:var(--app-card-gradient, var(--app-card-bg, white));border-radius:12px;padding:1rem;box-shadow:var(--app-card-shadow, 0 2px 8px rgba(0, 0, 0, .08));border:1px solid var(--app-border, rgba(255,255,255,.1))}.product-selector-sidebar h3{font-size:.95rem;font-weight:700;color:var(--app-text-primary, #1a252f);margin:0 0 1rem;padding-bottom:.75rem;border-bottom:2px solid var(--app-border, #f0f0f0)}.product-list{display:flex;flex-direction:column;gap:1.5rem}.product-category-compact h4{font-size:.875rem;color:var(--app-text-secondary, #666);text-transform:uppercase;letter-spacing:.5px;margin:0 0 .75rem;display:flex;align-items:center;gap:.5rem}.product-category-compact .category-icon{font-size:1rem}.product-item-compact{display:flex;align-items:center;gap:.75rem;padding:.75rem;border-radius:8px;border:2px solid var(--app-border-medium, #E0E0E0);background:var(--app-card-bg, white);cursor:pointer;transition:all .2s ease;position:relative;margin-bottom:.5rem}.product-item-compact:hover{border-color:#c9a56e;transform:translate(4px);box-shadow:0 2px 8px #c9a56e33}.product-item-compact.selected{border-color:#c9a56e;border-width:3px;background:var(--app-accent-light, rgba(201, 165, 110, .15));box-shadow:0 4px 12px #c9a56e40}.product-preview-mini{flex-shrink:0;width:50px;height:50px;display:flex;align-items:center;justify-content:center;overflow:hidden}.mini-canvas{width:100%;height:100%;background:linear-gradient(135deg,#f5e6d3,#e8d5b5);border:1px solid #C9A56E;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.mini-canvas.shape-rectangle{border-radius:4px}.mini-canvas.shape-circle{border-radius:50%}.mini-canvas.shape-roundedRectangle{border-radius:8px}.design-preview-img{width:70%;height:70%;object-fit:contain;opacity:.8}.product-info-compact{flex:1;min-width:0}.product-name-compact{font-size:.875rem;font-weight:600;color:var(--app-text-primary, #2c3e50);margin-bottom:.25rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.product-dimensions-compact{font-size:.75rem;color:var(--app-text-secondary, #666)}.product-item-compact.selected .product-name-compact,.product-item-compact.selected .product-dimensions-compact{color:var(--app-text-primary, #1a252f);font-weight:600}.selected-indicator-check{position:absolute;top:4px;right:4px;background:#4caf50;color:#fff;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}.selected-product-compact{margin-bottom:1rem}.selected-product-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.selected-product-header h3{font-size:.95rem;font-weight:700;color:var(--app-text-primary, #2c3e50);margin:0;padding:0;border:none}.project-info-badge{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;background:linear-gradient(135deg,#e3f2fd,#bbdefb);border:2px solid rgba(102,126,234,.3);border-radius:8px;margin-bottom:.75rem;font-size:.85rem;font-weight:600;color:#1976d2}.btn-change-product{padding:.4rem .8rem;font-size:.85rem;background:var(--app-accent, #667eea);color:#fff;border:none;border-radius:6px;cursor:pointer;transition:all .2s;font-weight:600}.btn-change-product:hover{background:#764ba2;transform:translateY(-1px);box-shadow:0 2px 6px #667eea4d}.product-list-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;padding-bottom:.75rem;border-bottom:2px solid var(--app-border, #f0f0f0)}.product-list-header h3{font-size:.95rem;font-weight:700;color:var(--app-text-primary, #2c3e50);margin:0}.btn-collapse-list{padding:.4rem .8rem;font-size:.85rem;background:#667eea14;color:var(--app-text-primary, #2c3e50);border:2px solid rgba(102,126,234,.2);border-radius:6px;cursor:pointer;transition:all .2s;font-weight:600}.btn-collapse-list:hover{background:#667eea26;border-color:#667eea;color:#667eea;transform:translateY(-1px)}.material-selector-sidebar{margin-top:1rem;padding:1rem;background:var(--app-card-bg, white);border-radius:12px;box-shadow:0 2px 8px var(--app-card-shadow, rgba(0, 0, 0, .08))}.material-selector-sidebar h3{font-size:.95rem;font-weight:700;color:var(--app-text-primary, #2c3e50);margin:0 0 1rem;padding-bottom:.75rem;border-bottom:2px solid var(--app-border, #f0f0f0)}.material-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;padding-bottom:.75rem;border-bottom:2px solid var(--app-border, #f0f0f0)}.material-header h3{margin:0;padding:0;border:none;font-size:.95rem;font-weight:700;color:var(--app-text-primary, #2c3e50)}.material-simulation-toggle{display:flex;align-items:center;gap:.5rem}.material-simulation-toggle label{font-size:.75rem;font-weight:600;color:var(--app-text-secondary, #666);white-space:nowrap}.material-simulation-toggle .toggle-switch{width:44px;height:24px}.material-simulation-toggle .toggle-slider:before{height:16px;width:16px;left:4px;bottom:4px}.material-simulation-toggle .toggle-switch input:checked+.toggle-slider:before{transform:translate(20px)}.no-product-selected{flex:1;display:flex;align-items:center;justify-content:center;background:var(--app-card-bg, white);border-radius:12px;padding:4rem 2rem;box-shadow:0 2px 8px var(--app-card-shadow, rgba(0, 0, 0, .08));min-height:500px}.no-product-message{text-align:center;color:var(--app-text-secondary, #666)}.no-product-icon{font-size:4rem;display:block;margin-bottom:1rem;animation:pointLeft 2s ease-in-out infinite}@keyframes pointLeft{0%,to{transform:translate(0)}50%{transform:translate(-10px)}}.no-product-message h3{font-size:1.5rem;color:var(--app-text-primary, #2c3e50);margin-bottom:.5rem}.no-product-message p{font-size:1rem;color:var(--app-text-secondary, #666)}.placement-sidebar{width:320px;flex-shrink:0;display:flex;flex-direction:column;gap:1rem;max-height:calc(100vh - 200px);overflow-y:auto;padding-right:.5rem}.placement-sidebar::-webkit-scrollbar{width:6px}.placement-sidebar::-webkit-scrollbar-track{background:#f1f1f1;border-radius:3px}.placement-sidebar::-webkit-scrollbar-thumb{background:#c9a56e;border-radius:3px}.panel{background:var(--app-card-gradient, var(--app-card-bg, white));border-radius:12px;padding:1.25rem;box-shadow:var(--app-card-shadow, 0 2px 8px rgba(0, 0, 0, .08));border:1px solid var(--app-border, rgba(255,255,255,.1))}.panel h3{font-size:1.1rem;font-weight:600;color:var(--app-text-primary, #2c3e50);margin:0 0 1rem;padding-bottom:.75rem;border-bottom:2px solid var(--app-border, #f0f0f0)}.panel-layers{background:var(--app-card-bg, white);border-radius:12px;padding:1.25rem;box-shadow:0 2px 8px var(--app-card-shadow, rgba(0, 0, 0, .08))}.panel-layers h3{font-size:1.1rem;font-weight:600;color:var(--app-text-primary, #2c3e50);margin:0 0 1rem;padding-bottom:.75rem;border-bottom:2px solid var(--app-border, #f0f0f0)}[data-theme=dark] .panel h3,[data-theme=dark] .panel-layers h3,[data-theme=dark] .panel-toolbox h3,.dark-mode .panel h3,.dark-mode .panel-layers h3,.dark-mode .panel-toolbox h3{color:#fff;font-weight:700}.layers-list{display:flex;flex-direction:column;gap:.5rem;max-height:300px;overflow-y:auto;overflow-x:hidden}.layer-item{display:flex;align-items:center;gap:.75rem;padding:.75rem;border-radius:6px;border:2px solid transparent;cursor:pointer;transition:all .2s ease;background:#00000014;color:#1a252f;font-weight:500}.layer-item:hover{background:#0000001f;cursor:grab}.layer-item:active{cursor:grabbing}.layer-item.dragging{opacity:.5;cursor:grabbing}.layer-item.drag-over{border-top:3px solid #C9A56E}[data-theme=dark] .layer-item,.dark-mode .layer-item{background:#fff3;color:#000;font-weight:600}[data-theme=dark] .layer-item:hover,.dark-mode .layer-item:hover{background:#ffffff4d;color:#000}[data-theme=dark] .layer-item.selected,.dark-mode .layer-item.selected{background:#c9a56e80;border-color:#e0c28e;color:#000}.layer-item.selected{background:#c9a56e59;border-color:#c9a56e;box-shadow:0 2px 8px #c9a56e4d;color:#000;font-weight:600}.panel-toolbox .toolbox-buttons{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem}.toolbox-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:1rem .5rem;background:linear-gradient(135deg,#667eea,#764ba2);border:2px solid transparent;border-radius:8px;cursor:pointer;transition:all .2s ease;color:#fff;font-size:.85rem;font-weight:600;box-shadow:0 2px 6px #667eea33}.toolbox-btn:hover{background:linear-gradient(135deg,#5568d3,#6c4298);border-color:transparent;transform:translateY(-2px);box-shadow:0 4px 12px #667eea66}.toolbox-btn:active{transform:translateY(0)}.toolbox-icon{display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;color:#fff}.toolbox-icon svg{width:100%;height:100%;color:currentColor}.toolbox-label{font-size:.9rem;font-weight:700;text-align:center;color:#fff}[data-theme=dark] .toolbox-btn,.dark-mode .toolbox-btn{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-color:transparent}[data-theme=dark] .toolbox-icon,[data-theme=dark] .toolbox-label,.dark-mode .toolbox-icon,.dark-mode .toolbox-label{color:#fff;font-weight:700}[data-theme=dark] .toolbox-btn:hover,.dark-mode .toolbox-btn:hover{background:linear-gradient(135deg,#d4af7640,#d4af7626);border:2px solid rgba(212,175,118,.6);color:#d4af76f2;box-shadow:0 4px 16px #d4af764d}[data-theme=dark] .toolbox-btn:hover .toolbox-icon,[data-theme=dark] .toolbox-btn:hover .toolbox-label,.dark-mode .toolbox-btn:hover .toolbox-icon,.dark-mode .toolbox-btn:hover .toolbox-label{color:#d4af76f2}.material-selector-visual{background:var(--app-card-bg, white);border-radius:12px;padding:1.25rem;box-shadow:0 2px 8px var(--app-card-shadow, rgba(0, 0, 0, .08))}.material-selector-visual h3{font-size:1.1rem;font-weight:600;color:var(--app-text-primary, #2c3e50);margin:0 0 1rem;padding-bottom:.75rem;border-bottom:2px solid var(--app-border, #f0f0f0)}.material-list-vertical{display:flex;flex-direction:column;gap:.75rem;max-height:400px;overflow-y:auto;overflow-x:hidden}.material-category-group{margin-bottom:.5rem}.material-category-title{font-size:.75rem;font-weight:700;color:var(--app-text-secondary, #666);text-transform:uppercase;letter-spacing:.5px;margin-bottom:.5rem;padding-left:.5rem}.material-item-visual{display:flex;align-items:center;gap:.75rem;padding:.75rem;border-radius:8px;cursor:pointer;transition:all .2s ease;background:linear-gradient(135deg,color-mix(in srgb,var(--material-color, #ddd) 15%,#F5F5F5),color-mix(in srgb,var(--material-color, #ddd) 8%,#F5F5F5));border:2px solid color-mix(in srgb,var(--material-color, #ddd) 30%,#E0E0E0);position:relative;overflow:hidden}.material-item-visual:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--material-color, #ddd);transition:width .2s ease}.material-item-visual:hover{background:linear-gradient(135deg,color-mix(in srgb,var(--material-color, #ddd) 25%,#F5F5F5),color-mix(in srgb,var(--material-color, #ddd) 15%,#F5F5F5));border-color:color-mix(in srgb,var(--material-color, #ddd) 50%,#C9A56E);box-shadow:0 2px 8px #0000001a}.material-item-visual:hover:before{width:6px}.material-item-visual.selected{border-color:color-mix(in srgb,var(--material-color, #C9A56E) 70%,#C9A56E);background:linear-gradient(135deg,color-mix(in srgb,var(--material-color, #ddd) 35%,#F5F5F5),color-mix(in srgb,var(--material-color, #ddd) 20%,#F5F5F5));box-shadow:0 3px 10px color-mix(in srgb,var(--material-color, #C9A56E) 30%,rgba(201,165,110,.2))}.material-item-visual.selected:before{width:6px;background:#c9a56e}.material-color-circle{width:28px;height:28px;border-radius:50%;flex-shrink:0;border:2px solid #E0E0E0;box-shadow:inset 0 1px 3px #0000001a;background:var(--material-color, #ddd)}.material-item-visual.selected .material-color-circle{border-color:#c9a56e;border-width:3px;box-shadow:0 0 0 2px #c9a56e33,inset 0 1px 3px #0000001a}.material-name-visual{flex:1;font-size:.95rem;color:#666;font-weight:600}.material-item-visual.selected .material-name-visual{color:#000;font-weight:800}.dark-mode .material-item-visual.selected .material-name-visual{color:#fff}.btn-custom-dimensions{width:100%;margin-top:1rem;padding:.75rem 1rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:8px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 2px 8px #667eea4d}.btn-custom-dimensions:hover{transform:translateY(-2px);box-shadow:0 4px 12px #667eea66;background:linear-gradient(135deg,#5568d3,#6c4298)}.btn-custom-dimensions:active{transform:translateY(0);box-shadow:0 2px 6px #667eea4d}.info-grid{display:flex;flex-direction:column;gap:.75rem}.info-grid>div{display:flex;justify-content:space-between;align-items:center}.info-grid .label{font-size:.85rem;color:var(--app-text-secondary, #666);font-weight:500}.info-grid .value{font-size:.85rem;color:var(--app-text-primary, #2c3e50);font-weight:600}.no-selection-info{text-align:center;padding:3rem 2rem}.no-selection-info .info-icon{font-size:3rem;margin-bottom:1rem}.no-selection-info .info-text{color:var(--app-text-secondary, #666);line-height:1.6;font-size:.95rem}.no-selection-info .info-text strong{color:var(--app-text-primary, #2c3e50);display:block;margin-bottom:.5rem}.editor-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:2px solid var(--app-border, #f0f0f0)}.editor-header h3{margin:0;padding:0;border:none;font-size:1.2rem;font-weight:600;color:var(--app-text-primary, #2c3e50)}.btn-delete{background:#e74c3c;color:#fff;border:none;padding:.5rem 1rem;border-radius:6px;cursor:pointer;font-size:.85rem;font-weight:600;transition:all .2s ease}.btn-delete:hover{background:#c0392b;transform:translateY(-1px);box-shadow:0 2px 8px #e74c3c4d}.control-group{margin-bottom:1.25rem;padding:0;display:block;width:100%}.control-group:last-child{margin-bottom:0}.control-group .warning-tag{display:flex!important;width:100%!important;margin-top:.75rem;clear:both;float:none!important}.control-label-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem;gap:.75rem}.control-label-row .label-text{display:flex;align-items:center;gap:.4rem;font-size:.9rem;font-weight:500;color:var(--app-text-primary, #2c3e50);flex:1;min-width:0;white-space:nowrap}.control-label-row .value-display{font-size:.9rem;font-weight:600;color:var(--app-accent, #C9A56E);min-width:55px;text-align:right;flex-shrink:0;margin:0}.control-group label{display:block;font-size:.9rem;font-weight:500;color:var(--app-text-primary, #2c3e50);margin-bottom:.5rem}.control-group .control-label-row+input[type=range]+.value-display{display:none!important}.control-group input[type=range]{width:100%;height:8px;border-radius:4px;background:linear-gradient(to right,#e0e0e0,#c9a56e,#a88554);outline:none;-moz-appearance:none;appearance:none;-webkit-appearance:none;cursor:pointer;transition:all .15s ease}.control-group input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:28px;height:28px;border-radius:50%;background:#fff;border:3px solid #C9A56E;cursor:grab;box-shadow:0 2px 8px #0003;transition:all .15s ease}.control-group input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15);box-shadow:0 4px 12px #c9a56e66}.control-group input[type=range]::-webkit-slider-thumb:active{cursor:grabbing;transform:scale(1.05);box-shadow:0 2px 6px #c9a56e99}.control-group input[type=range]::-moz-range-thumb{width:28px;height:28px;border-radius:50%;background:#fff;border:3px solid #C9A56E;cursor:grab;box-shadow:0 2px 8px #0003;transition:all .15s ease;border:none}.control-group input[type=range]::-moz-range-thumb:hover{transform:scale(1.15);box-shadow:0 4px 12px #c9a56e66}.control-group input[type=range]::-moz-range-thumb:active{cursor:grabbing;transform:scale(1.05)}.value-display{display:block;width:100%;text-align:center;margin-top:.5rem;margin-bottom:0;font-size:.85rem;font-weight:500;color:var(--app-text-secondary, #666);clear:both}.control-label-row .value-display{display:inline-block;width:auto;margin-top:0;text-align:right}.text-input,.select-input{width:100%;padding:.6rem;border:2px solid var(--app-border-medium, #e0e0e0);border-radius:6px;font-size:.9rem;background:var(--app-card-bg, white);color:var(--app-text-primary, #2c3e50);transition:all .2s ease}.text-input:focus,.select-input:focus{outline:none;border-color:var(--app-accent, #667eea);box-shadow:0 0 0 3px #667eea1a}.text-elements-list{margin-top:1rem;display:flex;flex-direction:column;gap:.5rem}.text-element-item{display:flex;justify-content:space-between;align-items:center;padding:.75rem;background:var(--app-hover-bg, #f8f9fa);border-radius:8px;border:2px solid transparent;cursor:pointer;transition:all .2s ease}.text-element-item:hover{background:var(--app-border-medium, #e9ecef)}.text-element-item.selected{background:var(--app-accent-light, #e8f0fe);border-color:var(--app-accent, #667eea);color:var(--app-text-primary, #2c3e50)}.btn-icon-delete{width:24px;height:24px;border-radius:50%;border:none;background:#f443361a;color:#f44336;font-size:1.25rem;line-height:1;cursor:pointer;transition:all .2s ease}.btn-icon-delete:hover{background:#f44336;color:#fff}.tips-panel{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.tips-panel h3{color:#fff;border-color:#fff3}.tips-panel ul{margin:0;padding-left:1.25rem;list-style-type:"✓ "}.tips-panel li{margin:.5rem 0;line-height:1.5;font-size:.875rem}.tips-panel li::marker{color:gold;font-weight:700}.placement-canvas{flex:1;display:flex;flex-direction:column;gap:1rem;background:var(--app-card-gradient, var(--app-card-bg, white));border-radius:12px;padding:1.5rem;box-shadow:var(--app-card-shadow, 0 2px 8px rgba(0, 0, 0, .08));min-height:600px;border:1px solid var(--app-border, rgba(255,255,255,.1))}.canvas-controls{display:flex;justify-content:flex-end;align-items:center;gap:1rem}.undo-redo-controls{display:flex;align-items:center;gap:.5rem;margin-right:auto}.undo-btn,.redo-btn{width:36px;height:36px;border:2px solid #667eea;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:8px;font-size:1.6rem;line-height:1;cursor:pointer;transition:all .2s ease;color:#fff;display:flex;align-items:center;justify-content:center;padding:0;box-shadow:0 2px 6px #667eea4d;font-weight:700}.undo-btn:hover:not(:disabled),.redo-btn:hover:not(:disabled){background:linear-gradient(135deg,#5568d3,#6a3f91);border-color:#5568d3;transform:translateY(-2px);box-shadow:0 4px 12px #667eea80}.undo-btn:active:not(:disabled),.redo-btn:active:not(:disabled){transform:translateY(0);box-shadow:0 2px 6px #667eea4d}.undo-btn:disabled,.redo-btn:disabled{opacity:.4;cursor:not-allowed;background:#e0e0e0;border-color:#bdbdbd;color:#9ca3af;box-shadow:none}.ruler-toggle{display:flex;align-items:center;gap:.5rem}.ruler-toggle label{font-size:.85rem;font-weight:600;color:var(--app-text-primary, #2c3e50);white-space:nowrap}.ruler-toggle .toggle-switch{width:44px;height:24px}.ruler-toggle .toggle-slider:before{height:16px;width:16px;left:4px;bottom:4px}.ruler-toggle .toggle-switch input:checked+.toggle-slider:before{transform:translate(20px)}.grid-intensity-control{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;background:#c9a56e14;border-radius:6px;border:1px solid rgba(201,165,110,.2)}.grid-intensity-control label{font-size:.8rem;font-weight:600;color:var(--app-text-primary, #2c3e50);white-space:nowrap}.grid-intensity-slider{width:80px;height:4px;border-radius:2px;background:linear-gradient(to right,#c9a56e4d,#c9a56e);outline:none;-moz-appearance:none;appearance:none;-webkit-appearance:none;cursor:pointer}.grid-intensity-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:#c9a56e;cursor:grab;box-shadow:0 1px 4px #0000004d;transition:all .15s ease}.grid-intensity-slider::-webkit-slider-thumb:hover{transform:scale(1.2);box-shadow:0 2px 6px #c9a56e80}.grid-intensity-slider::-webkit-slider-thumb:active{cursor:grabbing;transform:scale(1.05)}.grid-intensity-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#c9a56e;cursor:grab;border:none;box-shadow:0 1px 4px #0000004d}.grid-intensity-value{font-size:.75rem;font-weight:600;color:#c9a56e;min-width:35px;text-align:right}.zoom-controls{display:flex;align-items:center;gap:.4rem;padding:.4rem .6rem;background:#667eea14;border-radius:6px;border:1px solid rgba(102,126,234,.2)}.zoom-btn{width:28px;height:28px;border:none;border-radius:4px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;font-size:1.2rem;font-weight:600;line-height:1;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 4px #667eea4d}.zoom-btn:hover{transform:translateY(-1px);box-shadow:0 3px 8px #667eea66}.zoom-btn:active{transform:translateY(0);box-shadow:0 1px 3px #667eea4d}.zoom-btn:disabled{opacity:.4;cursor:not-allowed;background:linear-gradient(135deg,#ccc,#999)}.zoom-btn:disabled:hover{transform:none;box-shadow:0 2px 4px #667eea4d}.zoom-level{font-size:.75rem;font-weight:600;color:#667eea;min-width:40px;text-align:center;-webkit-user-select:none;user-select:none}.btn-link-price{background:none;border:none;color:#667eea;text-decoration:underline;cursor:pointer;font-size:.9rem;font-weight:500;padding:0;transition:all .2s ease}.btn-link-price:hover{color:#764ba2;text-decoration-thickness:2px}.canvas-wrapper{flex:1;display:flex;align-items:flex-start;justify-content:flex-start;overflow:visible;position:relative;scroll-behavior:smooth;padding:2.5rem;max-width:100%;box-sizing:border-box;background:linear-gradient(135deg,#f0f4f8,#e2e8f0);border:3px solid #C9A56E;border-radius:12px;box-shadow:0 0 0 1px #c9a56e4d,0 0 20px #d4af7626,inset 0 1px #fff9,inset 0 -1px #c9a56e33}.canvas-wrapper::-webkit-scrollbar{width:12px;height:12px}.canvas-wrapper::-webkit-scrollbar-track{background:#f1f1f1;border-radius:6px}.canvas-wrapper::-webkit-scrollbar-thumb{background:linear-gradient(135deg,#c9a56e,#a88554);border-radius:6px;border:2px solid #f1f1f1}.canvas-wrapper::-webkit-scrollbar-thumb:hover{background:linear-gradient(135deg,#b8935a,#967744)}.canvas-container{position:relative;width:100%;margin:0!important;padding:0!important;transform-style:preserve-3d;will-change:transform;backface-visibility:hidden}.canvas-ruler{background:linear-gradient(135deg,#f8f9fa,#e9ecef);border:1px solid #dee2e6;z-index:10;box-shadow:0 1px 3px #00000014;position:relative;image-rendering:crisp-edges;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.dark-mode .canvas-ruler{background:linear-gradient(135deg,#2c2c2c,#3a3a3a);border-color:#555}.canvas-ruler.ruler-horizontal{height:30px;border-bottom:2px solid #c9a56e}.canvas-ruler.ruler-vertical{width:30px;border-right:2px solid #c9a56e}.ruler-axis-label{position:absolute;font-size:.75rem;font-weight:800;color:#c9a56e;font-family:Courier New,monospace;text-shadow:0 1px 2px rgba(0,0,0,.1)}.canvas-ruler.ruler-horizontal .ruler-axis-label{right:6px;top:50%;transform:translateY(-50%)}.canvas-ruler.ruler-vertical .ruler-axis-label{bottom:6px;left:50%;transform:translate(-50%)}.dark-mode .ruler-axis-label{color:#d4a76a;text-shadow:0 1px 2px rgba(0,0,0,.5)}.ruler-mark{position:absolute;top:0;left:0;height:100%;width:100%;pointer-events:none}.canvas-ruler.ruler-horizontal .ruler-mark{height:100%;width:1px}.canvas-ruler.ruler-vertical .ruler-mark{width:100%;height:1px}.ruler-tick{background:#6c757d;position:absolute;transition:background .2s}.ruler-tick.major{background:#495057}.ruler-tick.minor{background:#adb5bd}.dark-mode .ruler-tick.major{background:#d4d4d4}.dark-mode .ruler-tick.minor{background:#888}.canvas-ruler.ruler-horizontal .ruler-tick{left:0;bottom:0;width:1px}.canvas-ruler.ruler-horizontal .ruler-tick.major{height:12px;width:1.5px}.canvas-ruler.ruler-horizontal .ruler-tick.minor{height:6px}.canvas-ruler.ruler-vertical .ruler-tick{right:0;top:0;height:1px}.canvas-ruler.ruler-vertical .ruler-tick.major{width:12px;height:1.5px}.canvas-ruler.ruler-vertical .ruler-tick.minor{width:6px}.ruler-label{position:absolute;font-size:.65rem;font-weight:700;color:#495057;font-family:Courier New,monospace;text-shadow:0 1px 1px rgba(255,255,255,.8)}.dark-mode .ruler-label{color:#d4d4d4;text-shadow:0 1px 2px rgba(0,0,0,.5)}.canvas-ruler.ruler-horizontal .ruler-label{left:2px;top:2px}.canvas-ruler.ruler-vertical .ruler-label{right:2px;top:2px;writing-mode:vertical-rl;text-orientation:mixed}.ruler-unit-label{display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:800;color:#fff;background:linear-gradient(135deg,#c9a56e,#b8935a);border:2px solid #b8935a;box-shadow:0 2px 6px #c9a56e66;z-index:15;font-family:Courier New,monospace;letter-spacing:1px;text-shadow:0 1px 2px rgba(0,0,0,.2)}.product-canvas{position:relative;width:100%;height:100%;background:linear-gradient(135deg,#f5e6d3,#e8d5b5);border:3px solid #C9A56E;box-shadow:0 10px 40px #00000026;overflow:visible;transition:transform .2s ease-out;box-sizing:border-box}.product-canvas.shape-rectangle{border-radius:0}.product-canvas.shape-circle,.product-canvas.shape-roundedRectangle{border-radius:8px}.gravable-area{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;background:linear-gradient(135deg,#fff8e7,#f5e6d3);transition:background .3s ease}.shape-circle .gravable-area{background:linear-gradient(135deg,#fff,#f8f8f8)!important;border-radius:50%}.shape-square .gravable-area{border-radius:8px}.shape-rectangle .gravable-area{border-radius:0}.shape-roundedRectangle .gravable-area{border-radius:16px}.shape-oval .gravable-area{border-radius:50%}.shape-triangle .gravable-area,.shape-hexagon .gravable-area,.shape-star .gravable-area,.shape-heart .gravable-area,.shape-tannenbaum .gravable-area,.shape-schneeflocke .gravable-area{border-radius:0}.gravable-area.material-simulation{background-position:center}.gravable-area.material-simulation.color-fallback{background-size:auto}.design-element{position:absolute;cursor:grab;-webkit-user-select:none;user-select:none;min-width:20px;min-height:20px}.design-element:active{cursor:grabbing}.design-element img{width:100%;height:100%;object-fit:contain;pointer-events:none}.text-element{position:absolute;cursor:grab;white-space:nowrap;-webkit-user-select:none;user-select:none;padding:.25rem .5rem;border:2px solid transparent;border-radius:4px;transition:all .2s ease;min-width:30px;min-height:20px;touch-action:none}.text-element:active{cursor:grabbing}.text-element:hover{border-color:#c9a56e80;background:#c9a56e1a}.text-element.selected{border-color:#c9a56e;background:#c9a56e26;box-shadow:0 2px 8px #c9a56e4d;cursor:move!important}.qr-element.selected,.pattern-element.selected,.image-element.selected,.design-element.selected{cursor:move!important}.resize-handle{position:absolute;width:20px;height:20px;background:#fff;border:3px solid #3498db;border-radius:50%;cursor:pointer;z-index:1000;box-shadow:0 2px 8px #0006;transition:all .2s ease}.resize-handle:hover{width:26px;height:26px;background:#3498db;border-color:#fff;box-shadow:0 4px 12px #3498db99}.resize-handle-nw{top:-10px;left:-10px;cursor:nw-resize}.resize-handle-nw:hover{top:-13px;left:-13px}.resize-handle-ne{top:-10px;right:-10px;cursor:ne-resize}.resize-handle-ne:hover{top:-13px;right:-13px}.resize-handle-sw{bottom:-10px;left:-10px;cursor:sw-resize}.resize-handle-sw:hover{bottom:-13px;left:-13px}.resize-handle-se{bottom:-10px;right:-10px;cursor:se-resize}.resize-handle-se:hover{bottom:-13px;right:-13px}.resize-handle-n{top:-10px;left:50%;transform:translate(-50%);cursor:n-resize}.resize-handle-n:hover{top:-13px;transform:translate(-50%)}.resize-handle-e{right:-10px;top:50%;transform:translateY(-50%);cursor:e-resize}.resize-handle-e:hover{right:-13px;transform:translateY(-50%)}.resize-handle-s{bottom:-10px;left:50%;transform:translate(-50%);cursor:s-resize}.resize-handle-s:hover{bottom:-13px;transform:translate(-50%)}.resize-handle-w{left:-10px;top:50%;transform:translateY(-50%);cursor:w-resize}.resize-handle-w:hover{left:-13px;transform:translateY(-50%)}.guidelines{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none}.guideline{position:absolute;background:#c9a56e4d;pointer-events:none}.guideline.horizontal{width:100%;height:1px}.guideline.vertical{height:100%;width:1px}.canvas-grid{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:5}.grid-line{position:absolute;background:#c9a56e26;pointer-events:none;transform:translateZ(0);will-change:transform;backface-visibility:hidden}.grid-line.horizontal{width:100%;height:1px;transform:translateY(-.5px) translateZ(0)}.grid-line.vertical{height:100%;width:1px;transform:translate(-.5px) translateZ(0)}.element-lock-indicator{position:absolute;top:-24px;right:-24px;width:20px;height:20px;background:linear-gradient(135deg,#e74c3c,#c0392b);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;box-shadow:0 2px 6px #0000004d;z-index:1001;cursor:help}.text-element.locked{cursor:not-allowed!important;opacity:.9}.text-textarea{resize:vertical;min-height:60px;font-family:inherit;line-height:1.4}.button-group{display:flex;gap:.5rem}.btn-group{flex:1;padding:.5rem;background:var(--app-bg-secondary, #f8f9fa);border:2px solid var(--app-border, #e0e0e0);border-radius:6px;cursor:pointer;transition:all .2s ease;font-size:1.1rem;font-weight:600;color:var(--app-text-secondary, #666)}.btn-group:hover{border-color:var(--app-accent, #667eea);background:var(--app-accent-light, rgba(102, 126, 234, .1));transform:translateY(-1px)}.btn-group.active{background:linear-gradient(135deg,#667eea,#764ba2);border-color:#667eea;color:#fff;box-shadow:0 2px 6px #667eea4d}.dimensions-display{position:absolute;top:100%;left:0;right:0;height:40px;display:flex;align-items:center;justify-content:center}.dimension{font-size:.875rem;font-weight:600;color:#666;margin:0 1rem}.action-buttons{display:flex;justify-content:space-between;gap:1rem;max-width:1600px;margin:2rem auto 0}.btn-secondary,.btn-primary{padding:.75rem 1.5rem;font-size:1rem;font-weight:600;border-radius:8px;border:none;cursor:pointer;transition:all .2s ease}.btn-secondary{background:#667eea14;color:var(--app-text-primary, #2c3e50);border:2px solid rgba(102,126,234,.2);font-weight:600}.btn-secondary:hover{border-color:var(--app-accent, #667eea);color:var(--app-accent, #667eea);background:#667eea26;transform:translateY(-1px);box-shadow:0 2px 8px #667eea33}.btn-primary{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;box-shadow:0 2px 8px #667eea4d}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 4px 12px #667eea66;background:linear-gradient(135deg,#5568d3,#6c4298)}.btn-edit-design{width:100%;padding:.75rem 1.25rem;margin-bottom:1.5rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:8px;font-size:.95rem;font-weight:600;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 8px #667eea4d}.btn-edit-design:hover{transform:translateY(-2px);box-shadow:0 6px 16px #667eea66}@media (max-width: 1200px){.placement-workspace{flex-direction:column}.placement-sidebar{width:100%;max-height:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem}}@media (max-width: 768px){.product-placement{padding:1rem}.placement-header{flex-direction:column;align-items:flex-start;gap:1rem}.product-grid,.placement-sidebar{grid-template-columns:1fr}.action-buttons{flex-direction:column-reverse}.btn-secondary,.btn-primary{width:100%}}.material-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:1rem;margin-top:1rem}.material-option{display:flex;flex-direction:column;align-items:center;padding:.75rem;border:2px solid #e9ecef;border-radius:8px;cursor:pointer;transition:all .2s;background:#fff}.material-option:hover{border-color:#667eea;box-shadow:0 2px 8px #667eea33;transform:translateY(-2px)}.material-option.selected{border-color:#667eea;background:linear-gradient(135deg,#667eea1a,#764ba21a);box-shadow:0 4px 12px #667eea4d}.material-preview{width:60px;height:60px;border-radius:8px;overflow:hidden;margin-bottom:.5rem;box-shadow:0 2px 4px #0000001a;border:1px solid rgba(0,0,0,.1)}.material-info{display:flex;flex-direction:column;align-items:center;text-align:center}.material-name{font-weight:600;color:var(--app-text-primary, #1a252f);font-size:.9rem;text-shadow:0 1px 2px rgba(255,255,255,.8)}.dark-mode .material-name{text-shadow:0 1px 2px rgba(0,0,0,.5)}.material-desc{font-size:.75rem;color:var(--app-text-secondary, #6c757d);margin-top:.25rem}@media (max-width: 768px){.material-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:.75rem}.material-preview{width:50px;height:50px}}.no-design-warning{background:linear-gradient(135deg,#fff3cd,#ffe69c);border:2px solid #ffc107;border-radius:8px;padding:1.5rem;text-align:center;margin-bottom:1rem}.no-design-warning .warning-icon{font-size:3rem;margin:0}.no-design-warning .warning-text{color:#856404;font-size:.95rem;line-height:1.5;margin:.75rem 0}.no-design-warning .warning-text strong{color:#664d03;font-size:1.05rem}.panel-product-info{min-width:100%}.info-note{background:linear-gradient(135deg,#e8f4f8,#d4e7f0);border-left:4px solid #3498db;border-radius:6px;padding:.75rem 1rem;margin-top:1rem}.info-note p{margin:0;font-size:.9rem;line-height:1.6;color:#1a252f;font-weight:500}.info-note strong{color:#2c3e50;font-weight:700}[data-theme=dark] .info-note{background:linear-gradient(135deg,#3498db26,#3498db40);border-left-color:#5dade2}[data-theme=dark] .info-note p{color:#e8f4f8;font-weight:500}[data-theme=dark] .info-note strong{color:#fff;font-weight:700}.checkbox-label{display:flex;align-items:center;gap:.75rem;cursor:pointer;font-size:.95rem;color:var(--app-text-primary, #2c3e50);font-weight:500;margin-bottom:0}.checkbox-label span{flex:1;line-height:1.3}.checkbox-input{width:20px;height:20px;cursor:pointer;accent-color:#3498db;flex-shrink:0}.tooltip-icon{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:#3498db;color:#fff;font-size:.7rem;font-weight:700;cursor:help;flex-shrink:0;margin-left:.4rem;position:relative;-webkit-user-select:none;user-select:none;opacity:.4;transition:all .2s ease}.tooltip-icon:hover{background:#2980b9;transform:scale(1.1);opacity:1}.tooltip-icon .tooltip-bubble{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%);background:#2c3e50;color:#fff;padding:.6rem .8rem;border-radius:6px;font-size:.8rem;font-weight:400;line-height:1.4;white-space:normal;width:220px;text-align:left;box-shadow:0 4px 12px #0003;z-index:1000;opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s;pointer-events:none}.tooltip-icon .tooltip-bubble:after{content:"";position:absolute;top:100%;left:50%;transform:translate(-50%);border:6px solid transparent;border-top-color:#2c3e50}.tooltip-icon:hover .tooltip-bubble{opacity:1;visibility:visible}.control-hint{display:none}.tools-section{margin-bottom:1.5rem}.tools-section h3{font-size:.95rem;font-weight:700;color:var(--app-text-primary, #2c3e50);margin:0 0 .75rem;padding-bottom:.5rem;border-bottom:2px solid var(--app-border-light, #f0f0f0)}.tool-buttons{display:flex;flex-direction:column;gap:.5rem}.tool-btn{width:100%;padding:.75rem 1rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:8px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;gap:.5rem}.tool-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #667eea66}.tool-btn:active{transform:translateY(0)}.element-properties{margin-bottom:1.5rem;padding:1rem;background:var(--app-hover-bg, #f8f9fa);border-radius:8px}.properties-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.properties-header h3{font-size:.95rem;font-weight:700;color:var(--app-text-primary, #2c3e50);margin:0}.btn-delete-element{padding:.5rem .75rem;background:#dc3545;color:#fff;border:none;border-radius:6px;cursor:pointer;transition:all .2s;font-size:.9rem}.btn-delete-element:hover{background:#c82333;transform:scale(1.05)}.pattern-properties label,.image-properties label{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem;font-size:.85rem;font-weight:600;color:var(--app-text-primary, #2c3e50)}.pattern-properties input[type=number],.image-properties input[type=number]{padding:.5rem;border:2px solid var(--app-border, #e0e0e0);border-radius:6px;font-size:.9rem}.pattern-properties input[type=range],.image-properties input[type=range]{width:100%}.layers-section{margin-top:auto;padding-top:1rem;border-top:2px solid var(--app-border-light, #f0f0f0)}.layers-section h3{font-size:.95rem;font-weight:700;color:var(--app-text-primary, #2c3e50);margin:0 0 .75rem}.layers-list{display:flex;flex-direction:column;gap:.5rem;max-height:300px;overflow-y:auto}.layer-item{display:flex;align-items:center;gap:.75rem;padding:.75rem;background:var(--app-card-bg, white);border:2px solid var(--app-border, #e0e0e0);border-radius:8px;cursor:pointer;transition:all .2s ease}.layer-item:hover{background:var(--app-hover-bg, #f8f9fa);border-color:#667eea}.layer-item.selected{background:linear-gradient(135deg,#667eea1a,#764ba21a);border-color:#667eea;box-shadow:0 2px 8px #667eea33}.layer-icon{font-size:1.2rem;flex-shrink:0}.layer-name{font-size:.85rem;font-weight:500;color:var(--app-text-primary, #2c3e50);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.empty-layers{text-align:center;padding:2rem 1rem;color:var(--app-text-secondary, #666);font-size:.9rem}.canvas-element{box-sizing:border-box}.canvas-element.selected{outline:2px solid #667eea;outline-offset:2px}.canvas-element.selected:after{content:"";position:absolute;top:-4px;left:-4px;right:-4px;bottom:-4px;border:2px dashed #667eea;pointer-events:none}.design-info-box{background:linear-gradient(135deg,#d4af7614,#d4af760d);border:2px solid rgba(212,175,118,.3);border-radius:12px;padding:1rem;margin-top:1rem}.design-info-box h4{margin:0 0 .5rem;font-size:.95rem;font-weight:700;color:var(--app-text-primary, #2c3e50)}.design-info-box p{margin:0;font-size:.85rem;line-height:1.5;color:var(--app-text-secondary, #666)}.canvas-controls-bar{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;background:var(--app-card-bg, white);border-radius:8px;margin-bottom:1rem;box-shadow:0 2px 8px #0000000f}.controls-left,.controls-right{display:flex;align-items:center;gap:.5rem}.control-btn{display:flex;align-items:center;gap:.35rem;padding:.5rem .75rem;background:var(--app-hover-bg, #f8f9fa);border:2px solid var(--app-border, #e0e0e0);border-radius:6px;cursor:pointer;font-size:.85rem;font-weight:500;color:var(--app-text-primary, #2c3e50);transition:all .2s ease}.control-btn:hover:not(:disabled){background:var(--app-accent-light, #e8f0fe);border-color:var(--app-accent, #667eea);transform:translateY(-1px)}.control-btn:disabled{opacity:.4;cursor:not-allowed}.control-btn.active{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-color:#667eea;box-shadow:0 2px 8px #667eea4d}.control-divider{width:1px;height:24px;background:var(--app-border, #e0e0e0);margin:0 .25rem}.zoom-display{font-size:.85rem;font-weight:600;color:var(--app-text-primary, #2c3e50);min-width:42px;text-align:center}.zoom-btn{padding:.35rem .65rem;background:var(--app-hover-bg, #f8f9fa);border:2px solid var(--app-border, #e0e0e0);border-radius:6px;cursor:pointer;font-size:1rem;font-weight:600;color:var(--app-text-primary, #2c3e50);transition:all .2s ease;line-height:1}.zoom-btn:hover{background:var(--app-accent-light, #e8f0fe);border-color:var(--app-accent, #667eea)}.zoom-reset-btn{padding:.35rem .65rem;background:var(--app-accent, #667eea);border:2px solid var(--app-accent, #667eea);border-radius:6px;cursor:pointer;font-size:.8rem;font-weight:600;color:#fff;transition:all .2s ease}.zoom-reset-btn:hover{background:#5568d3;border-color:#5568d3;transform:translateY(-1px)}.panel-toolbox .toolbox-buttons{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem}.toolbox-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:1rem .75rem;background:var(--app-card-bg, white);border:2px solid var(--app-border, #e0e0e0);border-radius:8px;cursor:pointer;transition:all .2s ease;min-height:90px}.toolbox-btn:hover{background:linear-gradient(135deg,#667eea14,#764ba214);border-color:#667eea;transform:translateY(-2px);box-shadow:0 4px 12px #667eea33}.toolbox-icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;color:var(--app-accent, #667eea)}.toolbox-btn:hover .toolbox-icon{color:#764ba2}.toolbox-label{font-size:.85rem;font-weight:600;color:var(--app-text-primary, #2c3e50);text-align:center;line-height:1.2}.panel{background:var(--app-card-bg, white);border-radius:12px;padding:1.25rem;margin-bottom:1rem;box-shadow:0 2px 8px #0000000f}.panel h3{font-size:1rem;font-weight:700;color:var(--app-text-primary, #2c3e50);margin:0 0 1rem;padding-bottom:.75rem;border-bottom:2px solid var(--app-border, #f0f0f0)}.panel:last-child{margin-bottom:0}.panel-layers,.panel-toolbox,.panel-price-box{max-height:400px}.panel-element-editor{flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:400px}.panel-element-editor>*:not(h3):not(.no-selection-info){flex:1;overflow:visible;padding-bottom:1rem}.panel-layers .layers-list{max-height:330px}.panel-toolbox{overflow:visible}.panel-element-editor .no-selection-info{text-align:center;padding:2rem 1rem}.panel-element-editor .editor-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;padding-bottom:.75rem;border-bottom:2px solid var(--app-border, #f0f0f0)}.value-display{font-size:.85rem;font-weight:600;color:var(--app-accent, #667eea);min-width:50px;text-align:right}.control-group input[type=range]{width:100%;height:6px;background:var(--app-border, #e0e0e0);border-radius:3px;outline:none;cursor:pointer}.control-group input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:50%;cursor:pointer;box-shadow:0 2px 6px #667eea66}.control-group input[type=range]::-moz-range-thumb{width:18px;height:18px;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:50%;cursor:pointer;box-shadow:0 2px 6px #667eea66;border:none}.panel-layers .no-layers-info{text-align:center;padding:2rem 1rem}.btn-delete{padding:.5rem 1rem;background:#fee;border:2px solid #fcc;border-radius:6px;color:#e74c3c;font-weight:600;cursor:pointer;transition:all .2s ease}.btn-delete:hover{background:#e74c3c;color:#fff;border-color:#e74c3c;transform:translateY(-1px)}.unsaved-indicator-left{font-size:1.5rem;line-height:1;animation:pulse 2s ease-in-out infinite}.project-name-input-large{flex:1;padding:.6rem 1rem;border:2px solid rgba(255,255,255,.3);border-radius:8px;background:#fff3;color:#fff;font-size:1.1rem;font-weight:600;transition:all .2s ease}.project-name-input-large::placeholder{color:#ffffffb3}.project-name-input-large:focus{outline:none;background:#ffffff4d;border-color:#ffffff80}.banner-actions{display:flex;align-items:center;gap:1rem}.btn-banner-primary{padding:.75rem 1.5rem;background:#fff;border:2px solid white;border-radius:8px;color:#667eea;font-size:1rem;font-weight:700;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 8px #00000026}.btn-banner-primary:hover{background:#fffffff2;transform:translateY(-2px);box-shadow:0 4px 12px #0003}.btn-banner-success{padding:.75rem 1.5rem;background:linear-gradient(135deg,#4facfe,#00f2fe);border:none;border-radius:8px;color:#fff;font-size:1rem;font-weight:700;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 8px #4facfe4d}.btn-banner-success:hover{background:linear-gradient(135deg,#00f2fe,#4facfe);transform:translateY(-2px);box-shadow:0 4px 12px #4facfe66}.canvas-area{background:var(--app-card-bg, white);border-radius:12px;padding:1rem;box-shadow:0 2px 8px #0000000f;display:flex;flex-direction:column;flex:1;width:100%}.canvas{box-shadow:0 2px 12px #0000001a;background-color:#f5f5f5;margin:0 auto}.canvas-element{cursor:move;-webkit-user-select:none;user-select:none;border:2px solid transparent;transition:border-color .2s ease}.canvas-element.selected{border-color:#667eea;box-shadow:0 0 0 2px #667eea33}.canvas-element:hover{border-color:#667eea80}.grid-intensity-control{display:flex;align-items:center;gap:.5rem}.grid-intensity-control label{font-size:.8rem;font-weight:500;color:var(--app-text-secondary, #666);white-space:nowrap}.grid-intensity-slider{width:80px;height:4px;background:var(--app-border, #e0e0e0);outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:2px}.grid-intensity-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:14px;height:14px;background:var(--app-accent, #667eea);border-radius:50%;cursor:pointer}.grid-intensity-slider::-moz-range-thumb{width:14px;height:14px;background:var(--app-accent, #667eea);border-radius:50%;cursor:pointer;border:none}.grid-intensity-value{font-size:.75rem;font-weight:600;color:var(--app-text-primary, #2c3e50);min-width:35px;text-align:right}.zoom-controls{display:flex;align-items:center;gap:.35rem}.layer-item{display:flex;align-items:center;gap:.5rem;padding:.75rem;background:var(--app-hover-bg, #f8f9fa);border:2px solid transparent;border-radius:8px;cursor:pointer;transition:all .2s ease}.layer-item:hover{background:var(--app-accent-light, #e8f0fe);border-color:var(--app-accent, #667eea)}.layer-item.selected{background:var(--app-accent-light, #e8f0fe);border-color:var(--app-accent, #667eea);box-shadow:0 2px 8px #667eea33}.no-layers-info{text-align:center;padding:2rem 1rem;color:var(--app-text-secondary, #666)}.no-selection-info{text-align:center;padding:3rem 1.5rem}.info-icon{font-size:3rem;margin-bottom:1rem;opacity:.5}.info-text{font-size:.95rem;color:var(--app-text-secondary, #666);line-height:1.6}.control-groups{display:flex;flex-direction:column;gap:1.25rem}.control-group{display:flex;flex-direction:column;gap:.5rem}.control-label-row{display:flex;justify-content:space-between;align-items:center}.control-label-row label{font-size:.9rem;font-weight:600;color:var(--app-text-primary, #2c3e50)}.value-display{font-size:.85rem;font-weight:600;color:var(--app-accent, #667eea)}.control-group input[type=range]{width:100%;height:6px;background:var(--app-border, #e0e0e0);border-radius:3px;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.control-group input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;background:var(--app-accent, #667eea);border-radius:50%;cursor:pointer;box-shadow:0 2px 4px #0003}.control-group input[type=range]::-moz-range-thumb{width:18px;height:18px;background:var(--app-accent, #667eea);border-radius:50%;cursor:pointer;border:none;box-shadow:0 2px 4px #0003}.editor-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.btn-delete{padding:.5rem 1rem;background:#e74c3c1a;border:2px solid #e74c3c;border-radius:6px;color:#e74c3c;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s ease}.btn-delete:hover{background:#e74c3c;color:#fff;transform:translateY(-1px);box-shadow:0 4px 12px #e74c3c4d}.grouped-design-overlay-wrapper{position:fixed;top:0;left:0;right:0;bottom:0;z-index:2000;display:flex;align-items:center;justify-content:center;background:#00000080}.canvas-size-config{background:linear-gradient(135deg,#f8f9ff,#f0f4ff);border:2px solid #e0e7ff;border-radius:8px;padding:12px;margin:12px 0;box-sizing:border-box}.canvas-size-config h4{margin:0 0 12px;font-size:14px;font-weight:600;color:#4f46e5}.size-inputs{display:flex;align-items:center;gap:6px;margin-bottom:8px}.size-input-group{display:flex;flex-direction:column;gap:4px;flex:1;position:relative;min-width:0}.size-input-group label{font-size:11px;font-weight:500;color:#6b7280}.size-input-group input{padding:6px 28px 6px 6px;border:2px solid #d1d5db;border-radius:6px;font-size:13px;font-weight:600;text-align:center;background:#fff;width:100%;box-sizing:border-box}.size-input-group input:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.size-input-group .unit{position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:10px;color:#9ca3af;font-weight:500;pointer-events:none;margin-top:12px}.size-separator{font-size:18px;font-weight:300;color:#9ca3af;margin-top:18px}.size-hint{margin:8px 0 0;font-size:11px;color:#6b7280;line-height:1.4}.dark-mode .canvas-size-config{background:linear-gradient(135deg,#1f2937,#111827);border-color:#374151}.dark-mode .canvas-size-config h4{color:#818cf8}.dark-mode .size-input-group label{color:#d1d5db}.dark-mode .size-input-group input{background:#1f2937;border-color:#374151;color:#f9fafb}.dark-mode .size-input-group input:focus{border-color:#818cf8;box-shadow:0 0 0 3px #818cf81a}.dark-mode .size-hint{color:#9ca3af}.btn-apply-size{width:100%;padding:10px 16px;border-radius:6px;font-size:14px;font-weight:600;border:2px solid;cursor:pointer;transition:all .2s ease;margin:12px 0 8px}.btn-apply-size.active{background:linear-gradient(135deg,#667eea,#764ba2);border-color:#667eea;color:#fff;box-shadow:0 4px 12px #667eea4d}.btn-apply-size.active:hover{transform:translateY(-2px);box-shadow:0 6px 16px #667eea66}.btn-apply-size.disabled{background:#e5e7eb;border-color:#d1d5db;color:#9ca3af;cursor:not-allowed}.dark-mode .btn-apply-size.disabled{background:#374151;border-color:#4b5563;color:#6b7280}.panel-price-box-horizontal{margin:0 auto 1.5rem;max-width:calc(880px + 1.5rem);padding:1.5rem 2rem;background:linear-gradient(135deg,#faf5ff,#f3e8ff);border-radius:12px;border:1px solid #e9d5ff;box-shadow:0 2px 12px #7c3aed26}.price-box-main{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap}.price-box-main-price{flex:0 0 auto}.price-box-label{font-size:.75rem;font-weight:600;margin-bottom:.5rem;color:#7c3aed;text-transform:uppercase;letter-spacing:.5px}.price-box-amount{font-size:2.5rem;font-weight:700;color:#7c3aed;line-height:1}.price-box-breakdown{flex:1 1 auto;display:flex;gap:1.5rem;align-items:center;font-size:.95rem;color:#64748b;flex-wrap:wrap}.price-box-item{display:flex;align-items:center;gap:.5rem}.price-box-item-label{font-weight:500}.price-box-item-value{font-weight:600;color:#7c3aed}.price-box-actions{flex:0 0 auto}.dark-mode .panel-price-box-horizontal{background:linear-gradient(135deg,#1f2937,#111827);border-color:#374151}.dark-mode .price-box-label,.dark-mode .price-box-amount{color:#a78bfa}.dark-mode .price-box-breakdown{color:#9ca3af}.dark-mode .price-box-item-value{color:#a78bfa}@media (max-width: 1399px){.product-selector-sidebar{display:none}.placement-main-center{flex:1}}.product-config-toolbar{display:none}@media (max-width: 1399px){.product-config-toolbar{display:flex;gap:.75rem;padding:1rem;background:#fff;border-radius:12px;margin-bottom:1rem;box-shadow:0 2px 8px #00000014;flex-wrap:wrap}}@media (max-width: 1199px){.placement-sidebar-right{width:320px}}@media (max-width: 999px){.placement-sidebar-right{width:280px}.placement-main-center{min-width:250px}}@media (max-width: 767px){.placement-sidebar-right{display:none}.placement-main-center{flex:1;min-width:100%}}.config-btn{flex:1;min-width:150px;padding:.875rem 1rem;background:linear-gradient(135deg,#f8f9fa,#fff);border:2px solid #dee2e6;border-radius:10px;cursor:pointer;transition:all .2s ease;display:flex;flex-direction:column;align-items:flex-start;gap:.25rem;box-shadow:0 2px 4px #0000000d}.config-btn:hover{border-color:#d4af7a;transform:translateY(-2px);box-shadow:0 4px 12px #d4af7a33}.config-btn:active{transform:translateY(0)}.config-icon{font-size:1.25rem;line-height:1}.config-label{font-size:.75rem;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.5px}.config-value{font-size:.9rem;font-weight:600;color:#1a252f;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dark-mode .config-btn{background:linear-gradient(135deg,#2a2a2a,#1e1e1e);border-color:#404040}.dark-mode .config-btn:hover{border-color:#d4af7a}.dark-mode .config-label{color:#9ca3af}.dark-mode .config-value{color:#e0e0e0}.mobile-controls-fab{position:fixed;top:100px;left:20px;z-index:999;display:none;flex-direction:column;gap:12px}.fab-button{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#667eea,#764ba2);border:none;box-shadow:0 4px 12px #667eea66;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.5rem;color:#fff;transition:all .3s ease}.fab-button:hover{transform:scale(1.1);box-shadow:0 6px 20px #667eea99}.fab-button:active{transform:scale(.95)}.mobile-settings-modal{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;z-index:10000;display:flex;align-items:flex-start;justify-content:center;padding:2rem 1rem;overflow-y:auto}.mobile-settings-content{background:#fff;border-radius:16px;max-width:500px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px #0000004d;animation:slideInDown .3s ease}.mobile-settings-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem;border-bottom:2px solid #e5e7eb;position:sticky;top:0;background:#fff;z-index:1}.mobile-settings-header h2{margin:0;font-size:1.5rem;color:#1a252f}.mobile-settings-close{width:40px;height:40px;border-radius:50%;border:none;background:#f3f4f6;cursor:pointer;font-size:1.5rem;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.mobile-settings-close:hover{background:#e5e7eb;transform:rotate(90deg)}.mobile-settings-body{padding:1.5rem}@keyframes slideInDown{0%{opacity:0;transform:translateY(-50px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 1200px){.mobile-controls-fab{display:flex}.product-selector-sidebar{display:none!important}.placement-workspace{grid-template-columns:1fr!important}.placement-canvas{max-width:100%!important}.canvas-wrapper{padding:1rem!important}}@media (max-width: 768px){.mobile-controls-fab{top:80px;left:10px}.fab-button{width:48px;height:48px;font-size:1.25rem}.canvas-controls{flex-wrap:wrap;gap:.5rem;padding:.5rem}.zoom-controls{gap:.25rem}.zoom-btn{width:32px;height:32px;font-size:1rem}.zoom-level{font-size:.85rem;padding:0 .5rem}.ruler-toggle label{font-size:.75rem}.canvas-wrapper{padding:.5rem!important}.mobile-settings-modal{padding:0}.mobile-settings-content{max-width:100%;width:100%;max-height:100vh;border-radius:0}.mobile-settings-header,.mobile-settings-body{padding:1rem}}.export-dialog{max-width:700px;max-height:90vh;overflow-y:auto}.export-option{background:#f8f9fa;border:2px solid #e0e0e0;border-radius:12px;padding:1.5rem;margin-bottom:1.5rem;transition:all .3s ease}.export-option:hover{border-color:#667eea;box-shadow:0 4px 12px #667eea1a}.export-option-header{display:flex;align-items:flex-start;gap:1rem;margin-bottom:1rem}.export-icon{font-size:2.5rem;line-height:1}.export-option-header h3{margin:0 0 .25rem;font-size:1.3rem;color:#2c3e50}.export-option-header p{margin:0;font-size:.95rem;color:#666}.export-option-details{margin-bottom:1.25rem;padding-left:3.5rem}.export-option-details h4{margin:0 0 .5rem;font-size:1rem;color:#667eea;font-weight:600}.export-option-details ul{margin:0 0 1rem;padding-left:1.25rem;list-style:none}.export-option-details ul li{margin-bottom:.5rem;font-size:.9rem;color:#2c3e50;position:relative;padding-left:1rem}.export-option-details ul li:before{content:"✓";position:absolute;left:0;color:#667eea;font-weight:700}.export-option-details ul li strong{color:#2c3e50;font-weight:600}.info-box{background:#e8f4fd;border-left:4px solid #2196F3;padding:.75rem 1rem;border-radius:4px;margin-top:1rem}.info-box p{margin:0;font-size:.9rem;color:#0d47a1;line-height:1.5}.export-btn{width:100%;padding:.85rem 1.5rem;font-size:1rem;font-weight:600;border:none;border-radius:8px;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;gap:.5rem}.export-btn:disabled{opacity:.6;cursor:not-allowed}.btn-primary.export-btn{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.btn-primary.export-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #667eea66}.btn-secondary.export-btn{background:#fff;color:#667eea;border:2px solid #667eea}.btn-secondary.export-btn:hover:not(:disabled){background:#667eea;color:#fff;transform:translateY(-2px);box-shadow:0 6px 20px #667eea4d}.alert{padding:1rem;border-radius:8px;margin-bottom:1.5rem;font-size:.95rem;line-height:1.5}@media (max-width: 768px){.export-dialog{max-width:95%;margin:1rem}.export-option-header{flex-direction:column;gap:.75rem}.export-option-details{padding-left:0}.export-icon{font-size:2rem}}.confirm-modal{max-width:450px;width:90%}.confirm-modal .modal-body{padding:1.5rem}.confirm-message{font-size:1rem;line-height:1.6;color:var(--app-text-primary, #2c3e50);margin:0}.confirm-modal .modal-footer{padding:1rem 1.5rem;border-top:1px solid var(--app-border-light, #e5e7eb);display:flex;gap:.75rem;justify-content:flex-end}.btn-danger{background:linear-gradient(135deg,#e74c3c,#c0392b);color:#fff;border:none;padding:.75rem 1.25rem;border-radius:8px;font-weight:600;cursor:pointer;transition:all .2s ease;font-size:.95rem}.btn-danger:hover{transform:translateY(-2px);box-shadow:0 4px 12px #e74c3c66}.btn-danger:active{transform:translateY(0)}.dark-mode .confirm-message{color:#d4af76e6}.dark-mode .confirm-modal .modal-footer{border-top-color:#d4af7633;background:#0003}.dark-mode .btn-secondary{background:#d4af761a;color:#d4af76e6;border:2px solid rgba(212,175,118,.3)}.dark-mode .btn-secondary:hover{background:#d4af7633;color:#d4af76;border-color:#d4af7680}.dark-mode .btn-primary{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;box-shadow:0 4px 12px #667eea4d}.dark-mode .btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px #667eea66}.input-modal{max-width:500px;width:90%}.input-modal .modal-body{padding:1.5rem}.input-message{font-size:.95rem;line-height:1.5;color:var(--app-text-secondary, #6b7280);margin:0 0 1rem}.input-field{width:100%;padding:.75rem;border:2px solid var(--app-border-medium, #d1d5db);border-radius:8px;font-size:1rem;transition:all .2s ease;background:var(--app-bg-primary, #ffffff);color:var(--app-text-primary, #2c3e50)}.input-field:focus{outline:none;border-color:var(--app-accent-primary, #667eea);box-shadow:0 0 0 3px #667eea1a}.input-field::placeholder{color:var(--app-text-disabled, #9ca3af)}.input-modal .modal-footer{padding:1rem 1.5rem;border-top:1px solid var(--app-border-light, #e5e7eb);display:flex;gap:.75rem;justify-content:flex-end}.input-modal .btn-primary:disabled{opacity:.5;cursor:not-allowed}.template-editor-modal{max-width:1000px;max-height:90vh;width:95vw}.template-editor-body{max-height:calc(90vh - 180px);overflow-y:auto}.editor-section{margin-bottom:2rem;padding-bottom:2rem;border-bottom:2px solid var(--app-border, #e0e0e0)}.editor-section:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}.editor-section h3{font-size:1.2rem;color:var(--app-text-primary, #1a202c);margin:0 0 1rem;font-weight:600}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.section-header h3{margin:0}.form-group{margin-bottom:1.25rem}.form-group label{display:block;font-weight:600;color:var(--app-text-primary, #1a202c);margin-bottom:.5rem;font-size:.9rem}.form-group small{display:block;margin-top:.5rem;font-size:.85rem;color:var(--app-text-secondary, #666);font-style:italic}.form-input{width:100%;padding:.75rem;border:2px solid var(--app-border, #e0e0e0);border-radius:8px;font-size:1rem;font-family:inherit;color:var(--app-text-primary, #1a202c);background:var(--app-card-bg, white);transition:all .2s}.form-input:focus{outline:none;border-color:var(--app-accent, #667eea);box-shadow:0 0 0 3px #667eea1a}.btn-add-field{display:flex;align-items:center;gap:.5rem;padding:.6rem 1rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:8px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s}.btn-add-field:hover{transform:translateY(-2px);box-shadow:0 4px 12px #667eea4d}.fields-empty-state{padding:2rem;text-align:center;background:var(--app-hover-bg, #f8f9fa);border-radius:10px;border:2px dashed var(--app-border, #e0e0e0)}.fields-empty-state p{margin:.5rem 0;color:var(--app-text-secondary, #666)}.fields-empty-state .hint{font-size:.9rem;color:var(--app-text-tertiary, #999);font-style:italic}.fields-list{display:flex;flex-direction:column;gap:1rem}.field-item{background:var(--app-card-bg, white);border:2px solid var(--app-border, #e0e0e0);border-radius:10px;padding:1rem;transition:all .2s}.field-item.editing{border-color:var(--app-accent, #667eea);box-shadow:0 4px 16px #667eea26}.field-item-header{display:flex;justify-content:space-between;align-items:center;gap:1rem}.field-item-info{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;flex:1}.field-number{font-weight:700;color:var(--app-text-tertiary, #999);font-size:.85rem}.field-item-info strong{font-weight:600;color:var(--app-text-primary, #1a202c);font-size:1rem}.required-badge,.target-badge{padding:.25rem .5rem;border-radius:4px;font-size:.75rem;font-weight:600}.required-badge{background:#ff6b6b26;color:#ff6b6b;border:1px solid rgba(255,107,107,.3)}.target-badge{background:var(--app-accent-light, #e0e7ff);color:var(--app-accent, #667eea);border:1px solid var(--app-accent, #667eea)}.field-item-actions{display:flex;gap:.25rem}.btn-field-action{width:32px;height:32px;border:none;border-radius:6px;background:var(--app-hover-bg, #f8f9fa);color:var(--app-text-primary, #1a202c);cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;font-size:.9rem}.btn-field-action:hover:not(:disabled){background:var(--app-accent-light, #e0e7ff);color:var(--app-accent, #667eea);transform:translateY(-2px)}.btn-field-action:disabled{opacity:.3;cursor:not-allowed}.btn-field-action.btn-delete:hover{background:#ff6b6b26;color:#ff6b6b}.field-editor{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--app-border, #e0e0e0)}.field-editor-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem}@media (max-width: 768px){.field-editor-row{grid-template-columns:1fr}}.dark-mode .template-editor-modal{background:linear-gradient(135deg,#1a1a2efa,#16213efa);border-color:#d4af764d}.dark-mode .editor-section{border-bottom-color:#d4af7633}.dark-mode .editor-section h3{color:#d4af76f2}.dark-mode .form-input{background:#d4af7614;border-color:#d4af764d;color:#d4af76f2}.dark-mode .form-input:focus{border-color:#d4af7699;box-shadow:0 0 0 3px #d4af7626}.dark-mode .form-input::placeholder{color:#d4af7680}.dark-mode .btn-add-field{background:linear-gradient(135deg,#d4af7640,#d4af7626);color:#d4af76;border:2px solid rgba(212,175,118,.4)}.dark-mode .btn-add-field:hover{background:linear-gradient(135deg,#d4af7659,#d4af7640);box-shadow:0 4px 12px #d4af764d}.dark-mode .fields-empty-state{background:#d4af760d;border-color:#d4af7633}.dark-mode .fields-empty-state p{color:#d4af76b3}.dark-mode .fields-empty-state .hint{color:#d4af7699}.dark-mode .field-item{background:#d4af760d;border-color:#d4af7633}.dark-mode .field-item.editing{border-color:#d4af7680;box-shadow:0 4px 16px #d4af7633}.dark-mode .field-number{color:#d4af7699}.dark-mode .field-item-info strong{color:#d4af76f2}.dark-mode .target-badge{background:#d4af7626;color:#d4af76;border-color:#d4af7666}.dark-mode .btn-field-action{background:#d4af761a;color:#d4af76e6}.dark-mode .btn-field-action:hover:not(:disabled){background:#d4af7633;color:#d4af76}.dark-mode .field-editor{border-top-color:#d4af7633}.template-management-modal{max-width:900px;max-height:85vh}.template-test-modal{max-width:700px;max-height:85vh}.modal-subtitle{color:var(--app-text-secondary, #666);font-size:.9rem;font-weight:400;margin-top:.25rem}.template-create-section{margin-bottom:1.5rem;padding-bottom:1.5rem;border-bottom:2px solid var(--app-border, #e0e0e0)}.btn-create-template{display:flex;align-items:center;gap:.75rem;width:100%;padding:1rem 1.5rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:10px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s;box-shadow:0 4px 12px #667eea4d}.btn-create-template:hover{transform:translateY(-2px);box-shadow:0 6px 20px #667eea66}.templates-empty-state{padding:3rem 2rem;text-align:center;background:var(--app-hover-bg, #f8f9fa);border-radius:12px;border:2px dashed var(--app-border, #e0e0e0)}.templates-empty-state .empty-icon{font-size:4rem;margin-bottom:1rem;opacity:.5}.templates-empty-state h3{font-size:1.25rem;color:var(--app-text-primary, #1a202c);margin-bottom:.5rem}.templates-empty-state p{color:var(--app-text-secondary, #666);font-size:.95rem}.templates-list{display:flex;flex-direction:column;gap:1rem}.template-item{background:var(--app-card-bg, white);border:2px solid var(--app-border, #e0e0e0);border-radius:12px;padding:1.25rem;transition:all .2s}.template-item:hover{border-color:var(--app-accent, #667eea);box-shadow:0 4px 12px #667eea26}.template-item-header{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:1rem}.template-item-info{flex:1}.template-item-name{font-size:1.1rem;font-weight:600;color:var(--app-text-primary, #1a202c);margin:0 0 .5rem}.template-item-description{font-size:.9rem;color:var(--app-text-secondary, #666);margin:0 0 .75rem;line-height:1.4}.template-item-meta{display:flex;gap:1rem;font-size:.85rem;color:var(--app-text-tertiary, #999)}.template-field-count{font-weight:600;color:var(--app-accent, #667eea)}.template-date{color:var(--app-text-tertiary, #999)}.template-item-actions{display:flex;gap:.5rem}.btn-template-action{width:40px;height:40px;border:none;border-radius:8px;font-size:1.2rem;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;background:var(--app-hover-bg, #f8f9fa)}.btn-template-action:hover{transform:translateY(-2px);box-shadow:0 4px 8px #0000001a}.btn-template-action.btn-edit{background:linear-gradient(135deg,#667eea22,#764ba222);color:#667eea}.btn-template-action.btn-edit:hover{background:linear-gradient(135deg,#667eea33,#764ba233)}.btn-template-action.btn-test{background:linear-gradient(135deg,#f093fb22,#f5576c22);color:#f5576c}.btn-template-action.btn-test:hover{background:linear-gradient(135deg,#f093fb33,#f5576c33)}.btn-template-action.btn-delete{background:#ff6b6b26;color:#ff6b6b}.btn-template-action.btn-delete:hover{background:#ff6b6b40}.template-fields-preview{display:flex;flex-wrap:wrap;gap:.5rem}.template-field-chip{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .75rem;background:var(--app-hover-bg, #f8f9fa);border:1px solid var(--app-border, #e0e0e0);border-radius:6px;font-size:.85rem}.template-field-chip .field-label{font-weight:600;color:var(--app-text-primary, #1a202c)}.template-field-chip .field-required{color:#ff6b6b;font-weight:700}.template-field-chip .field-target{color:var(--app-text-tertiary, #999);font-size:.8rem}.template-field-chip.more-fields{background:var(--app-accent-light, #e0e7ff);color:var(--app-accent, #667eea);font-weight:600;border-color:var(--app-accent, #667eea)}.template-test-preview{padding:1rem 0}.template-test-preview h3{font-size:1.3rem;color:var(--app-text-primary, #1a202c);margin-bottom:.5rem}.template-test-description{color:var(--app-text-secondary, #666);margin-bottom:2rem}.template-form-preview{background:var(--app-hover-bg, #f8f9fa);padding:1.5rem;border-radius:10px;border:1px solid var(--app-border, #e0e0e0)}.template-form-preview h4{font-size:1rem;color:var(--app-text-primary, #1a202c);margin:0 0 1rem}.template-field-preview{margin-bottom:1.5rem}.template-field-preview:last-child{margin-bottom:0}.template-field-preview label{display:block;font-weight:600;color:var(--app-text-primary, #1a202c);margin-bottom:.5rem}.dark-mode .template-management-modal,.dark-mode .template-test-modal{background:linear-gradient(135deg,#1a1a2efa,#16213efa);border-color:#d4af764d}.dark-mode .modal-subtitle{color:#d4af76b3}.dark-mode .template-create-section{border-bottom-color:#d4af7633}.dark-mode .btn-create-template{background:linear-gradient(135deg,#d4af7640,#d4af7626);color:#d4af76;border:2px solid rgba(212,175,118,.4);box-shadow:0 4px 12px #d4af764d}.dark-mode .btn-create-template:hover{background:linear-gradient(135deg,#d4af7659,#d4af7640);box-shadow:0 6px 20px #d4af7666}.dark-mode .templates-empty-state{background:#d4af760d;border-color:#d4af7633}.dark-mode .templates-empty-state h3{color:#d4af76f2}.dark-mode .templates-empty-state p{color:#d4af76b3}.dark-mode .template-item{background:#d4af760d;border-color:#d4af7633}.dark-mode .template-item:hover{border-color:#d4af7680;box-shadow:0 4px 12px #d4af7633}.dark-mode .template-item-name{color:#d4af76f2}.dark-mode .template-item-description{color:#d4af76b3}.dark-mode .template-field-count{color:#d4af76}.dark-mode .template-date{color:#d4af7699}.dark-mode .btn-template-action{background:#d4af761a;color:#d4af76e6}.dark-mode .btn-template-action:hover{background:#d4af7633;color:#d4af76}.dark-mode .template-field-chip{background:#d4af7614;border-color:#d4af7633}.dark-mode .template-field-chip .field-label{color:#d4af76f2}.dark-mode .template-field-chip .field-target{color:#d4af7699}.dark-mode .template-field-chip.more-fields{background:#d4af7626;color:#d4af76;border-color:#d4af7666}.dark-mode .template-test-preview h3{color:#d4af76f2}.dark-mode .template-test-description{color:#d4af76b3}.dark-mode .template-form-preview{background:#d4af760d;border-color:#d4af7633}.dark-mode .template-form-preview h4{color:#d4af76f2}.dark-mode .template-field-preview label{color:#d4af76e6}.dark-mode .template-field-preview input,.dark-mode .template-field-preview textarea{background:#d4af7614;border-color:#d4af764d;color:#d4af76f2}.dark-mode .template-field-preview input::placeholder,.dark-mode .template-field-preview textarea::placeholder{color:#d4af7680}.projects-view{width:100%;max-width:1400px;margin:0 auto;padding:2rem;min-height:100vh;position:relative;z-index:1}.projects-header{margin-bottom:2rem}.projects-header .header-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}.projects-header .header-top h2{margin:0;font-size:2rem;color:var(--app-text-primary, #2c3e50)}.btn-import{padding:.9rem 2rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:10px;font-size:1.05rem;font-weight:700;cursor:pointer;transition:all .2s;box-shadow:0 2px 8px #667eea4d;text-shadow:0 1px 2px rgba(0,0,0,.2)}.btn-import:hover{transform:translateY(-2px);box-shadow:0 6px 20px #667eea66;background:linear-gradient(135deg,#5568d3,#6b3fa3)}.alert{padding:1rem 1.5rem;margin-bottom:1.5rem;border-radius:8px;font-size:.95rem;line-height:1.5;animation:slideDown .3s ease-out}.alert-success{background:#d4edda;color:#155724;border:1px solid #c3e6cb}.alert-error{background:#f8d7da;color:#721c24;border:1px solid #f5c6cb}.search-section{margin-bottom:1.5rem}.search-box-modern{position:relative;width:100%;max-width:600px;margin:0 auto}.search-icon-modern{position:absolute;left:1.25rem;top:50%;transform:translateY(-50%);font-size:1.2rem;color:var(--app-text-secondary, #666);pointer-events:none;z-index:1}.search-input-modern{width:100%;padding:1rem 3rem 1rem 3.5rem;border:2px solid var(--app-border-medium, #e0e0e0);border-radius:50px;font-size:1rem;background:var(--app-card-bg, white);color:var(--app-text-primary, #2c3e50);transition:all .3s ease;box-shadow:0 2px 8px #0000000d}.search-input-modern:focus{outline:none;border-color:#667eea;box-shadow:0 4px 16px #667eea26}.btn-clear-search-modern{position:absolute;right:1.25rem;top:50%;transform:translateY(-50%);background:none;border:none;color:#999;cursor:pointer;font-size:1.3rem;padding:.25rem .5rem;transition:color .2s}.btn-clear-search-modern:hover{color:#666}.projects-controls-modern{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;padding:1rem;background:var(--app-hover-bg, #f8f9fa);border-radius:12px;margin-bottom:2rem}.stats-summary{display:flex;gap:1.5rem;align-items:center}.stat-item{font-size:.95rem;color:var(--app-text-secondary, #666)}.stat-item strong{color:var(--app-text-primary, #2c3e50);font-size:1.1rem;margin-right:.35rem}.stat-item.search-result{color:#667eea;font-weight:500}.filter-group-modern{display:flex;gap:1rem;align-items:center}.filter-box-modern,.sort-box-modern{display:flex;align-items:center;gap:.75rem;background:var(--app-card-bg, white);padding:.5rem 1rem;border-radius:50px;box-shadow:0 2px 8px #0000000d}.filter-label,.sort-label{font-size:.9rem;color:var(--app-text-secondary, #666);font-weight:500}.filter-select-modern,.sort-select-modern{padding:.4rem .75rem;border:none;background:transparent;font-size:.95rem;color:var(--app-text-primary, #2c3e50);cursor:pointer;font-weight:500;outline:none}.filter-select-modern option,.sort-select-modern option{background:var(--app-card-bg, white);color:var(--app-text-primary, #2c3e50)}.projects-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem;margin-bottom:2rem}.project-card{background:var(--app-card-bg, white);border-radius:12px;overflow:hidden;box-shadow:0 4px 16px #00000014;transition:transform .2s,box-shadow .2s;display:flex;flex-direction:column;border:2px solid transparent;position:relative}.project-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px #0000001f}.design-card{border-color:#9c27b033;background:linear-gradient(to bottom,rgba(156,39,176,.03) 0%,var(--app-card-bg, white) 20%)}.design-card:hover{border-color:#9c27b066;box-shadow:0 8px 24px #9c27b033}.project-card.project-card{border-color:#667eea33;background:linear-gradient(to bottom,rgba(102,126,234,.03) 0%,var(--app-card-bg, white) 20%)}.project-card.project-card:hover{border-color:#667eea66;box-shadow:0 8px 24px #667eea33}.card-type-badge{position:absolute;top:12px;left:12px;z-index:10;padding:.4rem .75rem;border-radius:20px;font-size:.8rem;font-weight:600;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 2px 8px #00000026}.design-badge{background:#9c27b0e6;color:#fff}.project-badge{background:#667eeae6;color:#fff}.template-count-badge{position:absolute;top:12px;right:12px;z-index:10;padding:.4rem .75rem;border-radius:20px;font-size:.8rem;font-weight:600;background:#ffc107f2;color:#1a202c;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 2px 8px #ffc1074d;cursor:help;transition:all .2s}.template-count-badge:hover{transform:scale(1.05);box-shadow:0 4px 12px #ffc10766}.project-thumbnail{width:100%;aspect-ratio:4/3;background:var(--app-hover-bg, #f8f9fa);display:flex;align-items:center;justify-content:center;overflow:hidden}.project-info{padding:1.25rem;flex:1}.project-name{margin:0 0 .75rem;font-size:1.15rem;color:var(--app-text-primary, #2c3e50);font-weight:600}.project-meta{display:flex;gap:1rem;margin-bottom:.75rem;flex-wrap:wrap;align-items:center}.material-preview-item{display:flex;align-items:center;gap:.5rem}.material-icon{width:32px;height:32px;border-radius:50%;border:2px solid var(--app-border-light, #e0e0e0);box-shadow:0 2px 4px #0000001a}.project-design-ref{font-size:.85rem;color:var(--app-accent, #667eea);margin-bottom:.5rem}.project-date{font-size:.8rem;color:var(--app-text-tertiary, #999)}.project-actions{padding:1rem 1.25rem;border-top:1px solid var(--app-border, #f0f0f0);display:flex;gap:.5rem;align-items:center}.btn-action{flex:1;padding:.65rem 1.1rem;border:2px solid transparent;border-radius:8px;font-size:.9rem;cursor:pointer;transition:all .2s ease;font-weight:600;display:flex;align-items:center;justify-content:center;gap:.5rem}.btn-edit{background:linear-gradient(135deg,#f0f4ff,#e8eeff);color:#667eea;border-color:transparent}.btn-edit:hover{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;transform:translateY(-2px);box-shadow:0 4px 12px #667eea4d}.btn-reorder{background:linear-gradient(135deg,#fff3e0,#ffe0b2);color:#ff9800;border-color:transparent}.btn-reorder:hover{background:linear-gradient(135deg,#ff9800,#f57c00);color:#fff;transform:translateY(-2px);box-shadow:0 4px 12px #ff98004d}.more-actions{position:relative}.btn-more{padding:.6rem .75rem;background:var(--app-hover-bg, #f5f5f5);border:none;border-radius:6px;cursor:pointer;font-size:1.2rem;color:var(--app-text-secondary, #666)}.btn-more:hover{background:var(--app-border-medium, #e0e0e0)}.more-menu{position:absolute;right:0;bottom:100%;margin-bottom:.5rem;background:var(--app-card-bg, white);border-radius:8px;box-shadow:0 4px 12px var(--app-card-shadow, rgba(0, 0, 0, .15));border:1px solid var(--app-border, #f0f0f0);min-width:150px;z-index:100;animation:fadeIn .15s ease-in-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}.more-menu button{display:block;width:100%;padding:.75rem 1rem;border:none;background:none;text-align:left;cursor:pointer;font-size:.9rem;color:var(--app-text-primary, #2c3e50)}.more-menu button:hover{background:var(--app-hover-bg, #f5f5f5)}.more-menu button.delete-action{color:#e74c3c}.more-menu button.delete-action:hover{background:#ffebee}@media (max-width: 768px){.search-box-modern{max-width:100%}.search-input-modern{padding:.875rem 2.5rem .875rem 3rem}.projects-controls-modern,.filter-group-modern{flex-direction:column;align-items:stretch}.filter-box-modern,.sort-box-modern{justify-content:space-between}.projects-container{grid-template-columns:1fr}}.projects-view .empty-state{text-align:center;padding:5rem 3rem;max-width:900px;margin:0 auto}.projects-view .empty-icon{font-size:5rem;margin-bottom:1.5rem}.projects-view .empty-state h3{font-size:1.8rem;color:var(--app-text-primary, #2c3e50);margin-bottom:.75rem;font-weight:600}.projects-view .empty-state p{color:var(--app-text-secondary, #666666);font-size:1.15rem;margin-bottom:2.5rem;line-height:1.6;font-weight:500}.projects-view .empty-tips{margin-top:3rem;text-align:left;background:var(--app-hover-bg, #f8f9fa);padding:2.5rem;border-radius:16px;max-width:700px;margin-left:auto;margin-right:auto}.projects-view .empty-tips h4{margin-top:0;color:var(--app-text-primary, #2c3e50);font-size:1.2rem;margin-bottom:1rem}.projects-view .empty-tips ul{list-style:none;padding:0}.projects-view .empty-tips li{padding:.6rem 0;color:var(--app-text-secondary, #666);line-height:1.5}.projects-view .empty-tips li:before{content:"✓ ";color:#667eea;font-weight:700;margin-right:.5rem}.projects-view .no-results{text-align:center;padding:4rem 2rem;max-width:600px;margin:0 auto}.dark-mode .projects-header h2{color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.3)}.dark-mode .filter-box-modern{background:#0000004d;border:1px solid rgba(212,175,118,.2)}.dark-mode .filter-label{color:#d4af76cc}.dark-mode .filter-select-modern{color:var(--app-text-primary, #2c3e50)}.dark-mode .filter-select-modern option{background:var(--app-card-bg, white);color:var(--app-text-primary, #2c3e50)}.dark-mode .projects-view .empty-state h3{color:#fff}.dark-mode .projects-view .empty-state p{color:#d4af76d9}.dark-mode .projects-view .empty-state{background:linear-gradient(135deg,#1a1a2ecc,#16213ecc);border:2px solid rgba(212,175,118,.2);border-radius:16px;box-shadow:0 8px 24px #0006}.dark-mode .projects-view .empty-tips{background:#1e1e1e99;border:1px solid rgba(255,255,255,.1)}.dark-mode .projects-view .empty-tips h4{color:#e0e0e0}.dark-mode .projects-view .empty-tips li{color:#b0b0b0}.dark-mode .projects-view .empty-tips li:before{color:#8b9eea}.dark-mode .template-count-badge{background:#d4af76f2;color:#1a1a2ef2;box-shadow:0 2px 8px #d4af7666}.dark-mode .template-count-badge:hover{box-shadow:0 4px 12px #d4af7680}.custom-dimensions-modal{max-width:600px;width:90%;max-height:90vh;overflow-y:auto}.modal-intro{background:linear-gradient(135deg,#e8f4f8,#d4e7f0);border-left:4px solid #4CAF50;padding:1rem;border-radius:8px;margin-bottom:1.5rem;color:var(--app-text-primary, #1A1A1A)}.modal-intro strong{color:#4caf50}.custom-dimensions-form{display:flex;flex-direction:column;gap:1.5rem}.form-section{background:var(--app-bg-secondary, #F8F9FA);padding:1.25rem;border-radius:8px;border:1px solid var(--app-border-light, #F0F0F0)}.form-section h3{font-size:1rem;font-weight:600;color:#1a1a1a;margin:0 0 1rem;padding-bottom:.5rem;border-bottom:2px solid var(--app-border-medium, #E0E0E0)}.form-group{margin-bottom:1rem}.form-group:last-child{margin-bottom:0}.form-group label{display:block;font-size:.875rem;font-weight:600;color:#1a1a1a;margin-bottom:.5rem}.form-input,.form-textarea{width:100%;padding:.75rem;border:2px solid var(--app-border-medium, #E0E0E0);border-radius:6px;font-size:.95rem;font-family:inherit;transition:all .2s ease;background:#fff;color:var(--app-text-primary, #1A1A1A)}.form-input:focus,.form-textarea:focus{outline:none;border-color:#c9a56e;box-shadow:0 0 0 3px #c9a56e1a}.form-input.disabled{background:var(--app-bg-tertiary, #F0F0F0);color:var(--app-text-secondary, #666);cursor:not-allowed}.form-textarea{resize:vertical;min-height:100px}.form-hint{display:block;font-size:.75rem;color:#555;margin-top:.25rem;font-style:italic}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.form-actions{display:flex;justify-content:flex-end;gap:.75rem;padding-top:1rem;border-top:2px solid var(--app-border-light, #F0F0F0)}.form-actions .btn-secondary,.form-actions .btn-primary{padding:.75rem 1.5rem;font-size:.95rem;font-weight:600}@media (max-width: 768px){.custom-dimensions-modal{width:95%;max-height:95vh}.form-row{grid-template-columns:1fr}.form-actions{flex-direction:column}.form-actions .btn-secondary,.form-actions .btn-primary{width:100%}}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:10000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.design-selection-modal{background:var(--app-bg-white, white);border-radius:16px;width:95%;max-width:1400px;max-height:90vh;display:flex;flex-direction:column;box-shadow:0 20px 60px #0000004d}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem 2rem;border-bottom:2px solid var(--app-border, #e0e0e0)}.modal-header h2{margin:0;font-size:1.5rem;font-weight:600;color:var(--app-text-primary, #2c3e50)}.modal-close{background:none;border:none;font-size:1.5rem;color:var(--app-text-secondary, #666);cursor:pointer;padding:.5rem;line-height:1;transition:color .2s ease}.modal-close:hover{color:var(--app-text-primary, #2c3e50)}.modal-body{padding:2rem;overflow-y:auto;flex:1}.empty-state{text-align:center;padding:3rem 2rem}.empty-text{font-size:1.25rem;font-weight:600;color:var(--app-text-primary, #2c3e50);margin-bottom:.5rem}.empty-hint{color:var(--app-text-secondary, #666);font-size:.95rem}.design-card{position:relative;background:var(--app-card-bg, white);border:2px solid var(--app-border, #e0e0e0);border-radius:12px;padding:1rem;cursor:pointer;transition:all .2s ease}.design-card:hover{border-color:#3498db;transform:translateY(-2px);box-shadow:0 4px 12px #3498db33}.design-card.selected{border-color:#3498db;background:#3498db0d;box-shadow:0 4px 16px #3498db4d}.design-preview{width:100%;height:220px;border-radius:8px;overflow:hidden;background:var(--app-bg-secondary, #f8f9fa);margin-bottom:.75rem;display:flex;align-items:center;justify-content:center;padding:.5rem}.design-preview img{max-width:100%;max-height:100%;object-fit:contain;object-position:center}.design-preview.empty{background:var(--app-bg-secondary, #f8f9fa)}.preview-icon{font-size:3rem;opacity:.3}.design-info{display:flex;flex-direction:column;gap:.25rem}.design-name{font-size:1rem;font-weight:600;color:var(--app-text-primary, #2c3e50);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.design-meta{font-size:.85rem;color:var(--app-text-secondary, #666);margin:0}.selected-indicator{position:absolute;top:.75rem;right:.75rem;width:32px;height:32px;background:#3498db;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.25rem;font-weight:700;box-shadow:0 2px 8px #3498db66}.modal-footer{display:flex;justify-content:flex-end;gap:1rem;padding:1.5rem 2rem;border-top:2px solid var(--app-border, #e0e0e0)}.modal-footer .btn-secondary,.modal-footer .btn-primary{padding:.75rem 1.5rem;font-size:1rem;font-weight:600;border-radius:8px;cursor:pointer;transition:all .2s ease;border:none}.modal-footer .btn-secondary{background:var(--app-bg-secondary, #f8f9fa);color:var(--app-text-primary, #2c3e50);border:2px solid var(--app-border, #e0e0e0)}.modal-footer .btn-secondary:hover{background:var(--app-bg-hover, #e9ecef)}.modal-footer .btn-primary{background:linear-gradient(135deg,#3498db,#2980b9);color:#fff;box-shadow:0 4px 12px #3498db4d}.modal-footer .btn-primary:hover:not(:disabled){background:linear-gradient(135deg,#2980b9,#21618c);transform:translateY(-1px);box-shadow:0 6px 16px #3498db66}.modal-footer .btn-primary:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}@media (max-width: 768px){.design-selection-modal{width:95%;max-height:90vh}.designs-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1rem}.modal-header,.modal-footer{padding:1rem 1.5rem}.modal-body{padding:1.5rem}}.template-selection-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:10000;padding:20px;animation:fadeIn .2s ease-in-out}.template-selection-modal{background:var(--app-card-bg, white);border-radius:16px;box-shadow:0 20px 60px #0000004d;max-width:1000px;width:100%;max-height:85vh;display:flex;flex-direction:column;animation:slideUp .3s cubic-bezier(.4,0,.2,1)}@keyframes slideUp{0%{opacity:0;transform:translateY(30px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.template-modal-header{padding:1.5rem 2rem;border-bottom:2px solid var(--app-border, #e0e0e0);display:flex;justify-content:space-between;align-items:center}.template-modal-header h2{margin:0;font-size:1.6rem;color:var(--app-text-primary, #2c3e50);font-weight:700}.btn-close-modal{background:none;border:none;font-size:1.8rem;color:var(--app-text-secondary, #666);cursor:pointer;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .2s}.btn-close-modal:hover{background:var(--app-hover-bg, #f5f5f5);color:var(--app-text-primary, #2c3e50);transform:rotate(90deg)}.template-modal-content{flex:1;overflow-y:auto;padding:2rem}.template-loading{text-align:center;padding:4rem 2rem}.loading-spinner{font-size:3rem;margin-bottom:1rem;animation:spin 2s linear infinite}.template-loading p{color:var(--app-text-secondary, #666);font-size:1.1rem}.template-error{text-align:center;padding:4rem 2rem}.error-icon{font-size:3rem;margin-bottom:1rem;color:#e74c3c}.template-error p{color:var(--app-text-secondary, #666);font-size:1.1rem;margin-bottom:1.5rem}.btn-retry{padding:.75rem 1.5rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s}.btn-retry:hover{transform:translateY(-2px);box-shadow:0 4px 12px #667eea4d}.template-empty{text-align:center;padding:4rem 2rem}.empty-icon{font-size:4rem;margin-bottom:1.5rem;opacity:.5}.template-empty h3{font-size:1.5rem;color:var(--app-text-primary, #2c3e50);margin-bottom:.75rem}.template-empty p{color:var(--app-text-secondary, #666);font-size:1.05rem;margin-bottom:.5rem;line-height:1.6}.empty-hint{color:var(--app-text-tertiary, #999);font-size:.95rem;font-style:italic}.template-filter{margin-bottom:2rem;display:flex;align-items:center;gap:1rem}.template-filter label{font-weight:600;color:var(--app-text-secondary, #666);font-size:.95rem}.category-pills{display:flex;gap:.5rem;flex-wrap:wrap}.category-pill{padding:.5rem 1rem;background:var(--app-hover-bg, #f5f5f5);border:2px solid transparent;border-radius:50px;font-size:.9rem;font-weight:500;color:var(--app-text-secondary, #666);cursor:pointer;transition:all .2s}.category-pill:hover{background:var(--app-border-medium, #e0e0e0)}.category-pill.active{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-color:#667eea}.template-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem}.template-card{position:relative;background:var(--app-card-bg, white);border:2px solid var(--app-border, #e0e0e0);border-radius:12px;overflow:hidden;transition:all .3s;display:flex;flex-direction:column;box-shadow:0 2px 8px #0000000d}.template-thumbnail{width:100%;aspect-ratio:4/3;background:var(--app-hover-bg, #f8f9fa);overflow:hidden;position:relative}.template-placeholder{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;color:var(--app-text-tertiary, #999)}.placeholder-icon{font-size:3rem}.placeholder-text{font-size:.85rem;color:var(--app-text-secondary, #666)}.template-info{padding:1.25rem;flex:1;display:flex;flex-direction:column;gap:.75rem}.template-name{margin:0;font-size:1.1rem;font-weight:700;color:var(--app-text-primary, #2c3e50);line-height:1.3}.template-description{margin:0;font-size:.9rem;color:var(--app-text-secondary, #666);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.template-category-badge{display:inline-block;padding:.25rem .75rem;background:linear-gradient(135deg,#667eea20,#764ba220);color:#667eea;border-radius:50px;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.template-meta{display:flex;flex-direction:column;gap:.5rem;margin-top:auto}.template-field-count{font-size:.85rem;color:var(--app-text-secondary, #666);font-weight:500}.template-tags{display:flex;gap:.5rem;flex-wrap:wrap}.template-tag{font-size:.75rem;color:var(--app-text-tertiary, #999);background:var(--app-hover-bg, #f5f5f5);padding:.2rem .6rem;border-radius:4px}.btn-select-template{width:100%;padding:.75rem 1.25rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s;margin-top:.5rem}.btn-select-template:hover{transform:translateY(-2px);box-shadow:0 4px 12px #667eea66}.btn-select-template:active{transform:translateY(0)}.template-no-results{text-align:center;padding:3rem 2rem;color:var(--app-text-secondary, #666);font-style:italic}.template-modal-footer{padding:1.25rem 2rem;border-top:2px solid var(--app-border, #e0e0e0);background:var(--app-hover-bg, #f8f9fa)}.template-modal-hint{margin:0;font-size:.9rem;color:var(--app-text-secondary, #666);line-height:1.5}.dark-mode .template-selection-modal{background:linear-gradient(135deg,#1a1a2efa,#16213efa)}.dark-mode .template-modal-header{border-bottom-color:#d4af7633}.dark-mode .template-modal-header h2{color:#fff}.dark-mode .btn-close-modal{color:#d4af76b3}.dark-mode .btn-close-modal:hover{background:#d4af761a;color:#d4af76}.dark-mode .template-card{background:linear-gradient(135deg,#1a1a2ecc,#16213ecc);border-color:#d4af7633}.dark-mode .template-name{color:#fff}.dark-mode .template-description{color:#d4af76cc}.dark-mode .template-category-badge{background:#d4af7633;color:#d4af76}.dark-mode .template-field-count{color:#d4af76b3}.dark-mode .template-tag{background:#d4af761a;color:#d4af76b3}.dark-mode .category-pill{background:#d4af761a;color:#d4af76cc;border-color:#d4af7633}.dark-mode .category-pill:hover{background:#d4af7633}.dark-mode .template-modal-footer{border-top-color:#d4af7633;background:#0000004d}@media (max-width: 768px){.template-selection-modal{max-height:95vh;max-width:95vw;margin:10px}.template-modal-header{padding:1.25rem 1.5rem}.template-modal-header h2{font-size:1.3rem}.template-modal-content{padding:1.5rem}.template-grid{grid-template-columns:1fr;gap:1.25rem}.template-filter{flex-direction:column;align-items:flex-start}.category-pills{width:100%}.category-pill{flex:1;text-align:center}}.currently-loaded-badge{position:absolute;top:10px;right:10px;background:linear-gradient(135deg,#27ae60,#229954);color:#fff;padding:.4rem .75rem;border-radius:20px;font-size:.75rem;font-weight:700;box-shadow:0 2px 8px #27ae6066;z-index:2;display:flex;align-items:center;gap:.25rem}.template-card.currently-loaded{border-color:#27ae60;box-shadow:0 4px 16px #27ae6033;background:linear-gradient(135deg,#27ae600d,#27ae6005)}.btn-select-template.reload{background:#95a5a6;cursor:not-allowed;opacity:.6}.btn-select-template.reload:hover{transform:none;box-shadow:none;background:#95a5a6}.dark-mode .currently-loaded-badge{background:linear-gradient(135deg,#229954,#1e8449)}.dark-mode .template-card.currently-loaded{border-color:#229954;box-shadow:0 4px 16px #2299544d;background:linear-gradient(135deg,#2299541a,#2299540d)}.template-type-badge{display:inline-flex;align-items:center;gap:.35rem;padding:.3rem .75rem;border-radius:20px;font-size:.8rem;font-weight:600}.template-type-badge.type-form{background:linear-gradient(135deg,#667eea26,#764ba226);color:#667eea;border:1px solid rgba(102,126,234,.3)}.template-type-badge.type-inspiration{background:linear-gradient(135deg,#f59e0b26,#ea580c26);color:#f59e0b;border:1px solid rgba(245,158,11,.3)}.dark-mode .template-type-badge.type-form{background:#667eea33;color:#a78bfa;border-color:#667eea66}.dark-mode .template-type-badge.type-inspiration{background:#f59e0b33;color:#fbbf24;border-color:#f59e0b66}.template-modal-hints{display:flex;flex-direction:column;gap:.5rem}.template-modal-hint{display:flex;align-items:center;gap:.5rem;margin:0;font-size:.85rem;color:var(--app-text-secondary, #666)}.template-modal-hint .hint-icon{font-size:1rem;flex-shrink:0}.template-modal-hint strong{color:var(--app-text-primary, #333);font-weight:600}.dark-mode .template-modal-hint{color:#d4af76b3}.dark-mode .template-modal-hint strong{color:#d4af76e6}@media (max-width: 768px){.template-modal-hints{gap:.75rem}.template-modal-hint{font-size:.8rem}}.template-form-panel{width:100%;height:100%;display:flex;flex-direction:column;background:var(--app-card-bg, white);border-left:2px solid var(--app-border, #e0e0e0);overflow:hidden}.tfp-header{background:var(--app-hover-bg, #f8f9fa);border-bottom:2px solid var(--app-border, #e0e0e0);padding:1.25rem 1.5rem;position:sticky;top:0;z-index:10;box-shadow:0 2px 8px #0000000d}.tfp-header-content{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.tfp-header h3{margin:0;font-size:1.3rem;font-weight:700;color:var(--app-text-primary, #2c3e50)}.tfp-close-btn{background:none;border:none;font-size:1.5rem;color:var(--app-text-secondary, #666);cursor:pointer;padding:.25rem .5rem;border-radius:50%;transition:all .2s;width:32px;height:32px;display:flex;align-items:center;justify-content:center}.tfp-close-btn:hover{background:var(--app-border-medium, #e0e0e0);color:var(--app-text-primary, #2c3e50);transform:rotate(90deg)}.tfp-description{margin:0;font-size:.9rem;color:var(--app-text-secondary, #666);line-height:1.5}.tfp-body{flex:1;overflow-y:auto;padding:1.5rem}.tfp-field{margin-bottom:1.5rem}.tfp-field label{display:block;font-size:.95rem;font-weight:600;color:var(--app-text-primary, #2c3e50);margin-bottom:.5rem}.tfp-required{color:#e74c3c;margin-left:.25rem}.tfp-hint{display:block;font-size:.85rem;color:var(--app-text-tertiary, #999);margin-bottom:.5rem;font-style:italic}.tfp-field input[type=text],.tfp-field input[type=email],.tfp-field input[type=tel],.tfp-field input[type=url],.tfp-field textarea,.tfp-field select{width:100%;padding:.75rem;border:2px solid var(--app-border, #e0e0e0);border-radius:8px;font-size:.95rem;color:var(--app-text-primary, #2c3e50);background:var(--app-card-bg, white);transition:all .2s;font-family:inherit}.tfp-field input:focus,.tfp-field textarea:focus,.tfp-field select:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.tfp-field textarea{resize:vertical;min-height:80px}.tfp-error{border-color:#e74c3c!important}.tfp-error-text{display:block;font-size:.85rem;color:#e74c3c;margin-top:.5rem;font-weight:500}.tfp-char-count{display:block;font-size:.8rem;color:var(--app-text-tertiary, #999);margin-top:.5rem;text-align:right}.tfp-checkbox-field{margin-bottom:1rem}.tfp-checkbox-label{display:flex;align-items:center;gap:.75rem;cursor:pointer;font-weight:500!important;margin-bottom:0!important}.tfp-checkbox-label input[type=checkbox]{width:18px;height:18px;cursor:pointer;accent-color:#667eea}.tfp-checkbox-field .tfp-hint{margin-left:2rem;margin-top:.25rem}.tfp-actions{margin-top:2rem;padding-top:1.5rem;border-top:2px solid var(--app-border, #e0e0e0)}.tfp-apply-btn{width:100%;padding:1rem 1.5rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:10px;font-size:1.05rem;font-weight:600;cursor:pointer;transition:all .2s;box-shadow:0 4px 12px #667eea4d}.tfp-apply-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #667eea66}.tfp-apply-btn:active:not(:disabled){transform:translateY(0)}.tfp-apply-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.tfp-live-hint{display:block;text-align:center;font-size:.85rem;color:var(--app-text-tertiary, #999);margin-top:.75rem;font-style:italic}.tfp-hidden-fields-notice{padding:.75rem 1rem;background:#f59e0b1a;border:1px solid rgba(245,158,11,.3);border-radius:8px;margin-bottom:1rem;color:#d97706;font-size:.85rem;text-align:center}.tfp-no-fields{padding:2rem 1rem;text-align:center;color:var(--app-text-secondary, #666)}.tfp-no-fields p{margin:0;font-size:.9rem}.dark-mode .template-form-panel{background:linear-gradient(135deg,#1a1a2ef2,#16213ef2);border-left-color:#d4af764d}.dark-mode .tfp-header{background:#0006;border-bottom-color:#d4af7633}.dark-mode .tfp-header h3{color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.4)}.dark-mode .tfp-close-btn{color:#d4af76cc}.dark-mode .tfp-close-btn:hover{background:#d4af7633;color:#d4af76}.dark-mode .tfp-description{color:#d4af76b3}.dark-mode .tfp-field label{color:#d4af76f2}.dark-mode .tfp-hint{color:#d4af7699}.dark-mode .tfp-field input,.dark-mode .tfp-field textarea,.dark-mode .tfp-field select{background:#0000004d;border-color:#d4af764d;color:#d4af76f2}.dark-mode .tfp-field input:focus,.dark-mode .tfp-field textarea:focus,.dark-mode .tfp-field select:focus{border-color:#d4af7699;box-shadow:0 0 0 3px #d4af761a}.dark-mode .tfp-field input::placeholder,.dark-mode .tfp-field textarea::placeholder{color:#d4af7666}.dark-mode .tfp-char-count{color:#d4af7680}.dark-mode .tfp-actions{border-top-color:#d4af7633}.dark-mode .tfp-live-hint{color:#d4af7699}.tfp-body::-webkit-scrollbar{width:8px}.tfp-body::-webkit-scrollbar-track{background:var(--app-hover-bg, #f8f9fa)}.tfp-body::-webkit-scrollbar-thumb{background:var(--app-border-medium, #d0d0d0);border-radius:4px}.tfp-body::-webkit-scrollbar-thumb:hover{background:var(--app-text-secondary, #999)}.dark-mode .tfp-body::-webkit-scrollbar-track{background:#0000004d}.dark-mode .tfp-body::-webkit-scrollbar-thumb{background:#d4af764d}.dark-mode .tfp-body::-webkit-scrollbar-thumb:hover{background:#d4af7680}@media (max-width: 1200px){.tfp-header,.tfp-body{padding:1rem}.tfp-header h3{font-size:1.1rem}}.design-group-overlay{position:fixed;top:0;left:0;right:0;bottom:0;z-index:2000;display:flex;align-items:center;justify-content:center;background:#0009;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.dgo-modal{background:#fff;border-radius:16px;box-shadow:0 20px 60px #0000004d;max-width:900px;width:95%;max-height:90vh;display:flex;flex-direction:column;overflow:hidden}.dgo-modal-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.dgo-modal-header h3{margin:0;font-size:1.1rem;font-weight:600}.dgo-close-btn{width:32px;height:32px;border:none;background:#fff3;color:#fff;border-radius:8px;font-size:16px;cursor:pointer;transition:background .2s}.dgo-close-btn:hover{background:#ffffff4d}.dgo-modal-body{display:flex;gap:20px;padding:20px;overflow:auto}.dgo-preview-section{flex:1;display:flex;flex-direction:column;align-items:center;gap:12px}.dgo-design-area{position:relative;background:#f0f0f0;border:2px solid #ddd;border-radius:8px;overflow:hidden}.dgo-grid{position:absolute;top:0;left:0;right:0;bottom:0;background-image:linear-gradient(to right,rgba(0,0,0,.05) 1px,transparent 1px),linear-gradient(to bottom,rgba(0,0,0,.05) 1px,transparent 1px);background-size:20px 20px;pointer-events:none}.dgo-group-box{position:absolute;border:2px dashed #667eea;background:#667eea1a;border-radius:4px;cursor:grab;transition:box-shadow .2s,border-style .2s;-webkit-user-select:none;user-select:none}.dgo-group-box:hover{box-shadow:0 0 0 3px #667eea33}.dgo-group-box.dragging{cursor:grabbing;border-style:solid;box-shadow:0 4px 16px #667eea66}.dgo-preview{position:relative;width:100%;height:100%;overflow:hidden}.dgo-preview-element{position:absolute;pointer-events:none}.dgo-preview-element.text{color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:90%;font-family:sans-serif}.dgo-preview-element.qr{background:#0000001a;border:1px solid rgba(0,0,0,.2);display:flex;align-items:center;justify-content:center;font-size:8px;color:#666}.dgo-preview-element.image{background:#0000000d;border:1px solid rgba(0,0,0,.1);overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:8px;color:#666}.dgo-preview-element.image img{width:100%;height:100%;object-fit:contain}.dgo-group-label{position:absolute;bottom:100%;left:50%;transform:translate(-50%);margin-bottom:4px;padding:3px 10px;background:#667eea;color:#fff;font-size:11px;font-weight:600;border-radius:4px;white-space:nowrap}.dgo-dimensions-info{font-size:12px;color:#666}.dgo-controls-section{width:280px;flex-shrink:0;display:flex;flex-direction:column;gap:16px}.dgo-info-box{display:flex;align-items:center;gap:8px;padding:12px;background:#667eea14;border:1px solid rgba(102,126,234,.2);border-radius:8px;font-size:13px;color:#333}.dgo-info-icon{font-size:18px}.dgo-control-group{display:flex;flex-direction:column;gap:8px}.dgo-control-group label{font-size:13px;font-weight:500;color:#333}.dgo-scale-slider-wrapper{display:flex;align-items:center;gap:8px}.dgo-scale-btn{width:32px;height:32px;border:none;background:#f0f0f0;border-radius:6px;font-size:18px;font-weight:600;cursor:pointer;transition:background .2s;color:#333}.dgo-scale-btn:hover{background:#e0e0e0}.dgo-scale-slider{flex:1;height:6px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#e0e0e0;border-radius:3px;outline:none}.dgo-scale-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;background:#667eea;border-radius:50%;cursor:pointer;box-shadow:0 2px 6px #667eea66}.dgo-scale-slider::-moz-range-thumb{width:18px;height:18px;background:#667eea;border-radius:50%;cursor:pointer;border:none}.dgo-position-info{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px 12px;background:#f8f9fa;border-radius:6px}.dgo-position-info span{font-size:11px;color:#666;font-family:monospace}.dgo-quick-positions{display:flex;justify-content:center;gap:6px}.dgo-quick-positions button{width:40px;height:40px;border:2px solid #e0e0e0;background:#fff;border-radius:8px;font-size:16px;cursor:pointer;transition:all .2s}.dgo-quick-positions button:hover{border-color:#667eea;background:#667eea0d}.dgo-quick-positions button.center{background:#667eea;border-color:#667eea;color:#fff}.dgo-quick-positions button.center:hover{background:#5a6fd6}.dgo-hint{margin:0;padding:12px;background:#10b98114;border:1px solid rgba(16,185,129,.2);border-radius:6px;font-size:12px;color:#555;line-height:1.4}.dgo-modal-footer{display:flex;justify-content:flex-end;gap:12px;padding:16px 20px;background:#f8f9fa;border-top:1px solid #e0e0e0}.dgo-btn-cancel,.dgo-btn-confirm{padding:10px 24px;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s}.dgo-btn-cancel{background:#fff;border:2px solid #e0e0e0;color:#666}.dgo-btn-cancel:hover{border-color:#999;color:#333}.dgo-btn-confirm{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;min-width:160px}.dgo-btn-confirm:hover{transform:translateY(-1px);box-shadow:0 4px 12px #667eea66}@media (max-width: 768px){.dgo-modal{max-width:100%;width:100%;height:100%;max-height:100%;border-radius:0}.dgo-modal-body{flex-direction:column;padding:16px}.dgo-controls-section{width:100%}.dgo-design-area{max-width:100%}.dgo-quick-positions button{width:36px;height:36px;font-size:14px}}.unsaved-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000d9;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;z-index:10000;animation:fadeIn .2s ease}.unsaved-modal-content{background:linear-gradient(135deg,#2a2a2a,#1e1e1e);border:2px solid #505050;border-radius:16px;box-shadow:0 20px 60px #00000080,0 0 0 1px #ffffff0d,inset 0 1px #ffffff1a;max-width:700px;width:90%;animation:slideUp .3s ease}.unsaved-modal-header{display:flex;align-items:flex-start;gap:1rem;padding:2rem 2rem 1.5rem;border-bottom:2px solid #404040}.unsaved-modal-icon-wrapper{flex-shrink:0;width:48px;height:48px;background:linear-gradient(135deg,#f39c12,#e67e22);border-radius:12px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px #f39c124d}.unsaved-modal-icon{width:28px;height:28px;color:#fff;stroke-width:2.5}.unsaved-modal-header-text{flex:1}.unsaved-modal-header h3{margin:0 0 .5rem;font-size:1.4rem;font-weight:700;color:#e0e0e0;letter-spacing:-.02em}.unsaved-modal-subtitle{margin:0;font-size:.95rem;color:#b0b0b0;font-weight:500}.unsaved-modal-body{padding:2rem}.unsaved-modal-body p{margin:0 0 .75rem;font-size:1.05rem;color:#e0e0e0;line-height:1.6}.unsaved-modal-hint{display:block;margin-top:1rem!important;padding-top:1rem;border-top:1px solid rgba(255,255,255,.1);font-size:.95rem;color:#b0b0b0;font-weight:500}.unsaved-modal-hint:before{content:"💡 Tipp: ";color:#f39c12;font-weight:700}.unsaved-modal-actions{display:flex;flex-direction:column;gap:.75rem;padding:1.5rem 2rem 2rem}.btn-save-and-continue{padding:1rem 1.5rem;background:linear-gradient(135deg,#4caf50,#45a049);border:none;border-radius:10px;color:#fff;font-size:1.05rem;font-weight:600;cursor:pointer;transition:all .2s ease;box-shadow:0 4px 12px #4caf504d;letter-spacing:-.01em}.btn-save-and-continue:hover{transform:translateY(-2px);box-shadow:0 6px 20px #4caf5066}.btn-save-and-continue:active{transform:translateY(0)}.btn-continue-without-saving{padding:.875rem 1.5rem;background:#2a2a2a;border:2px solid #404040;border-radius:10px;color:#b0b0b0;font-size:.95rem;font-weight:600;cursor:pointer;transition:all .2s ease}.btn-continue-without-saving:hover{background:#333;border-color:#f39c12;color:#f39c12;transform:translateY(-1px)}.btn-cancel-modal{padding:.875rem 1.5rem!important;background:linear-gradient(135deg,#1e1e1e,#2a2a2a)!important;border:2px solid #D4AF76!important;border-radius:10px!important;color:#d4af76!important;font-size:.95rem!important;font-weight:700!important;cursor:pointer!important;transition:all .2s ease!important;box-shadow:0 2px 8px #d4af7633!important;text-shadow:0 1px 2px rgba(0,0,0,.3)!important}.btn-cancel-modal:hover{background:linear-gradient(135deg,#d4af76,#b8935a)!important;border-color:#e5c896!important;color:#fff!important;transform:translateY(-2px)!important;box-shadow:0 4px 16px #d4af7666!important;text-shadow:0 2px 4px rgba(0,0,0,.4)!important}.btn-cancel-modal:active{transform:translateY(0)!important;box-shadow:0 2px 8px #d4af7633!important}@media (max-width: 600px){.unsaved-modal-content{width:95%;max-width:none}.unsaved-modal-header{padding:1rem 1rem .75rem}.unsaved-modal-body{padding:1rem}.unsaved-modal-actions{padding:.75rem 1rem 1rem}}.save-project-modal{max-width:550px;width:90%}.save-project-modal .modal-body{padding:1.5rem;max-height:70vh;overflow-y:auto}.form-group label{display:block;font-weight:600;margin-bottom:.5rem;color:var(--app-text-primary, #2c3e50);font-size:.95rem}.form-input{width:100%;padding:.75rem;border:2px solid var(--app-border-medium, #d1d5db);border-radius:8px;font-size:1rem;transition:all .2s ease;background:var(--app-bg-primary, #ffffff);color:var(--app-text-primary, #2c3e50)}.form-input:focus{outline:none;border-color:var(--app-accent-primary, #667eea);box-shadow:0 0 0 3px #667eea1a}.form-input::placeholder{color:var(--app-text-disabled, #9ca3af)}.quantity-input{max-width:120px}.form-hint{display:block;margin-top:.4rem;font-size:.85rem;color:var(--app-text-secondary, #6b7280)}.form-divider{height:1px;background:var(--app-border-light, #e5e7eb);margin:1.5rem 0}.checkbox-group{margin-bottom:1rem}.checkbox-label{display:flex;align-items:flex-start;gap:.75rem;cursor:pointer;font-weight:500}.checkbox-label input[type=checkbox]{margin-top:.2rem;width:18px;height:18px;cursor:pointer;accent-color:var(--app-accent-primary, #667eea)}.checkbox-label span{flex:1}.template-name-group{animation:slideDown .2s ease-out;padding-left:1.5rem;border-left:3px solid var(--app-accent-primary, #667eea);margin-bottom:1rem}.save-project-modal .modal-footer{padding:1rem 1.5rem;border-top:1px solid var(--app-border-light, #e5e7eb);display:flex;gap:.75rem;justify-content:flex-end}.save-project-modal .modal-footer button{min-width:120px}.btn-accent{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:.75rem 1.25rem;border-radius:8px;font-weight:600;cursor:pointer;transition:all .2s ease;font-size:.95rem}.btn-accent:hover{transform:translateY(-2px);box-shadow:0 4px 12px #667eea66}.btn-accent:active{transform:translateY(0)}@media (max-width: 600px){.save-project-modal .modal-footer{flex-direction:column}.save-project-modal .modal-footer button{width:100%}}.bc-template-helper-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;display:flex;justify-content:center;align-items:center;z-index:10000;padding:2rem;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.bc-template-helper{background:linear-gradient(135deg,#fff,#f8f9fa);border-radius:16px;box-shadow:0 20px 60px #0000004d;max-width:800px;width:100%;max-height:90vh;overflow-y:auto;position:relative;animation:bcSlideIn .3s ease-out}@keyframes bcSlideIn{0%{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:translateY(0)}}.bc-helper-header{position:sticky;top:0;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:2rem;border-radius:16px 16px 0 0;text-align:center;z-index:10;box-shadow:0 4px 12px #667eea4d}.bc-helper-header h2{margin:0 0 .5rem;font-size:1.8rem;font-weight:700}.bc-helper-subtitle{margin:0;font-size:.95rem;opacity:.95;font-weight:400}.bc-btn-close{position:absolute;top:1rem;right:1rem;background:#fff3;border:none;border-radius:50%;width:36px;height:36px;font-size:1.5rem;color:#fff;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.bc-btn-close:hover{background:#ffffff4d;transform:rotate(90deg)}.bc-helper-form{padding:2rem}.bc-form-section{margin-bottom:2rem;padding-bottom:2rem;border-bottom:2px solid #e9ecef}.bc-form-section:last-of-type{border-bottom:none}.bc-form-section h3{margin:0 0 1.5rem;color:#2c3e50;font-size:1.2rem;font-weight:600;display:flex;align-items:center;gap:.5rem}.bc-form-group{margin-bottom:1.5rem}.bc-form-group label{display:block;margin-bottom:.5rem;color:#495057;font-weight:500;font-size:.9rem}.bc-form-group input,.bc-form-group select{width:100%;padding:.75rem 1rem;border:2px solid #dee2e6;border-radius:8px;font-size:1rem;transition:all .2s ease;background:#fff;color:#2c3e50}.bc-form-group input:focus,.bc-form-group select:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.bc-form-group input.error{border-color:#e74c3c}.bc-form-group input::placeholder{color:#adb5bd}.bc-form-group small{display:block;margin-top:.5rem;color:#6c757d;font-size:.85rem}.bc-form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.bc-error-text{display:block;color:#e74c3c;font-size:.85rem;margin-top:.5rem;font-weight:500}.bc-error-banner{padding:.75rem 1rem;background:#fee;border-left:4px solid #e74c3c;border-radius:4px;color:#c0392b;margin-bottom:1rem;font-size:.9rem}.bc-checkbox-label{display:flex;align-items:center;gap:.75rem;cursor:pointer}.bc-checkbox-label input[type=checkbox]{width:auto;cursor:pointer;accent-color:#667eea}.bc-checkbox-label span{font-size:1rem;color:#212529;font-weight:500}.bc-style-selector{display:flex;gap:1rem;flex-wrap:wrap}.bc-style-card{flex:1;min-width:200px;padding:1.25rem;border:3px solid #dee2e6;border-radius:12px;cursor:pointer;transition:all .2s ease;background:#fff;position:relative}.bc-style-card:hover{border-color:#667eea;box-shadow:0 4px 12px #667eea26;transform:translateY(-2px)}.bc-style-card.selected{border-color:#667eea;background:linear-gradient(135deg,#f8f9ff,#fff);box-shadow:0 6px 20px #667eea33}.bc-style-card input[type=radio]{position:absolute;opacity:0;pointer-events:none}.bc-style-info strong{display:block;margin-bottom:.5rem;color:#2c3e50;font-size:1rem}.bc-style-info p{margin:0;color:#6c757d;font-size:.85rem;line-height:1.4}.bc-style-card.selected .bc-style-info strong{color:#667eea}.bc-helper-actions{display:flex;gap:1rem;justify-content:flex-end;padding-top:1.5rem;border-top:2px solid #e9ecef}.bc-btn-primary,.bc-btn-secondary{padding:.875rem 2rem;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s ease;display:inline-flex;align-items:center;gap:.5rem}.bc-btn-primary{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;box-shadow:0 4px 12px #667eea4d}.bc-btn-primary:hover{box-shadow:0 6px 20px #667eea66;transform:translateY(-2px)}.bc-btn-secondary{background:#e9ecef;color:#495057}.bc-btn-secondary:hover{background:#dee2e6}@media (max-width: 768px){.bc-template-helper-overlay{padding:1rem}.bc-template-helper{max-height:95vh}.bc-helper-header{padding:1.5rem}.bc-helper-header h2{font-size:1.4rem}.bc-helper-subtitle{font-size:.85rem}.bc-helper-form{padding:1.5rem}.bc-form-row{grid-template-columns:1fr}.bc-style-selector,.bc-helper-actions{flex-direction:column}.bc-btn-primary,.bc-btn-secondary{width:100%;justify-content:center}}.dark-mode .bc-template-helper{background:linear-gradient(135deg,#2c2c2c,#3a3a3a)}.dark-mode .bc-form-section{border-bottom-color:#444}.dark-mode .bc-form-section h3{color:#e9ecef}.dark-mode .bc-form-group label{color:#ced4da}.bc-form-group input,.dark-mode .bc-form-group select{background:#2c2c2c;border-color:#495057;color:#e9ecef}.bc-form-group input:focus,.dark-mode .bc-form-group select:focus{border-color:#667eea;background:#333}.dark-mode .bc-form-group input::placeholder{color:#6c757d}.dark-mode .bc-style-card{background:#2c2c2c;border-color:#495057}.dark-mode .bc-style-card.selected{background:linear-gradient(135deg,#3a3a5a,#2c2c2c)}.dark-mode .bc-style-info strong{color:#e9ecef}.dark-mode .bc-style-card.selected .bc-style-info strong{color:#818cf8}.dark-mode .bc-style-info p{color:#adb5bd}.dark-mode .bc-helper-actions{border-top-color:#444}.dark-mode .bc-btn-secondary{background:#495057;color:#e9ecef}.dark-mode .bc-btn-secondary:hover{background:#5a6268}.dark-mode .bc-checkbox-label span{color:#e9ecef}.dark-mode .bc-form-group small{color:#adb5bd}.share-modal{max-width:600px;width:90%}.share-description{font-size:1rem;color:var(--app-text-secondary, #666);margin-bottom:1.5rem;line-height:1.6;text-align:center}.share-error{padding:1rem;background:#fee;border:1px solid #f88;border-radius:6px;color:#c33;margin-bottom:1rem;font-weight:500}.share-loading{text-align:center;padding:2rem}.share-loading .spinner{width:40px;height:40px;margin:0 auto 1rem;border:4px solid #f3f3f3;border-top:4px solid #667eea;border-radius:50%;animation:spin 1s linear infinite}.share-loading p{color:var(--app-text-secondary, #666);font-size:.95rem}.share-success{display:flex;flex-direction:column;gap:1.5rem}.share-link-box{display:flex;flex-direction:column;gap:.5rem}.share-link-box label{font-weight:600;color:var(--app-text-primary, #2c3e50);font-size:.9rem}.share-link-input-wrapper{position:relative;display:flex;align-items:center;background:linear-gradient(135deg,#f8f9fa,#fff);border:2px solid #e0e0e0;border-radius:12px;overflow:hidden;transition:all .3s ease;margin-bottom:1rem}.share-link-input-wrapper:hover{border-color:#667eea;box-shadow:0 4px 16px #667eea26}.share-link-input{width:100%;padding:1rem 1.25rem;border:none;font-size:.9rem;font-family:Courier New,monospace;background:transparent;color:var(--app-text-primary, #2c3e50);cursor:text;-webkit-user-select:all;user-select:all}.share-link-input:focus{outline:none;background:#667eea0d}.share-link-input-group{position:relative;display:flex;align-items:center;background:linear-gradient(135deg,#f8f9fa,#fff);border:2px solid #e0e0e0;border-radius:12px;overflow:hidden;transition:all .3s ease}.share-link-input-group:hover{border-color:#667eea;box-shadow:0 4px 16px #667eea26}.share-link-input-group.copied{border-color:#28a745;animation:successPulse .6s ease}@keyframes successPulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}.btn-copy{display:flex;align-items:center;gap:.5rem;padding:1rem 1.75rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-left:2px solid rgba(255,255,255,.2);font-weight:600;font-size:.9rem;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);white-space:nowrap;position:relative;overflow:hidden}.btn-copy:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:#ffffff4d;transform:translate(-50%,-50%);transition:width .6s,height .6s}.btn-copy:hover:before{width:300px;height:300px}.btn-copy:hover{background:linear-gradient(135deg,#764ba2,#667eea);transform:translate(4px)}.btn-copy:active{transform:translate(2px) scale(.98)}.btn-copy.success{background:linear-gradient(135deg,#28a745,#20c997);animation:copySuccess .6s ease}.btn-copy svg{position:relative;z-index:1;transition:transform .3s ease}.btn-copy:hover svg{transform:scale(1.1) rotate(-5deg)}.btn-copy.success svg{animation:checkmark .4s ease}@keyframes checkmark{0%{transform:scale(0)}50%{transform:scale(1.2)}to{transform:scale(1)}}.share-expiry{text-align:center;padding:.75rem;background:#fff3cd;border:1px solid #ffc107;border-radius:6px}.share-expiry small{color:#856404;font-size:.85rem;font-weight:500}.share-qr-section{display:flex;flex-direction:column;align-items:center;gap:1rem}.btn-toggle-qr{padding:.6rem 1.2rem;background:#fff;border:2px solid #667eea;color:#667eea;border-radius:6px;font-weight:600;cursor:pointer;transition:all .2s ease}.btn-toggle-qr:hover{background:#667eea;color:#fff}.qr-code-container{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1.5rem;background:#fff;border:2px solid #e0e0e0;border-radius:8px;box-shadow:0 2px 8px #0000001a}.qr-code-container p{margin:0;color:var(--app-text-secondary, #666);font-size:.85rem}.share-native{text-align:center;padding-bottom:1rem;border-bottom:1px solid #e0e0e0}.btn-native-share{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:8px;font-weight:600;font-size:1rem;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 8px #667eea4d}.btn-native-share:hover{transform:translateY(-2px);box-shadow:0 4px 16px #667eea66}.share-social{border-top:1px solid #e0e0e0;padding-top:1.5rem}.share-social h4{font-size:.95rem;font-weight:600;color:var(--app-text-primary, #2c3e50);margin:0 0 1rem;text-align:center}.share-social-buttons{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.75rem}.share-social-btn{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem 1rem;border-radius:8px;text-decoration:none;font-weight:600;font-size:.9rem;transition:all .2s ease;cursor:pointer;color:#fff;box-shadow:0 2px 6px #0000001a}.share-social-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0003}.share-social-btn svg{flex-shrink:0}.share-social-btn.whatsapp{background:#25d366}.share-social-btn.whatsapp:hover{background:#20ba5a}.share-social-btn.facebook{background:#1877f2}.share-social-btn.facebook:hover{background:#0e65d8}.share-social-btn.twitter{background:#000}.share-social-btn.twitter:hover{background:#1a1a1a}.share-social-btn.linkedin{background:#0a66c2}.share-social-btn.linkedin:hover{background:#084d92}.share-social-btn.telegram{background:#26a5e4}.share-social-btn.telegram:hover{background:#1e8bc3}.share-social-btn.pinterest{background:#e60023}.share-social-btn.pinterest:hover{background:#c8001c}.share-social-btn.email{background:#667eea}.share-social-btn.email:hover{background:#5568d3}.share-info{padding:1rem;background:#e8f4fd;border:1px solid #bee5eb;border-radius:6px;font-size:.85rem;color:#0c5460;line-height:1.6}.share-info p{margin:0}.share-info strong{font-weight:700}@media (max-width: 768px){.share-modal{width:95%}.share-link-input-group{flex-direction:column}.btn-copy{width:100%}.share-social-buttons{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}.share-social-btn{padding:.65rem .75rem;font-size:.85rem}.share-social-btn span{display:inline}.qr-code-container svg{width:150px!important;height:150px!important}.btn-native-share{width:100%}}@media (max-width: 480px){.share-social-buttons{grid-template-columns:1fr 1fr}.share-social-btn{flex-direction:column;gap:.25rem;padding:.6rem .5rem}.share-social-btn span{font-size:.75rem}}.dark-mode .share-link-input-group{background:linear-gradient(135deg,#ffffff0d,#ffffff05);border-color:#d4af764d}.dark-mode .share-link-input-group:hover{border-color:#d4af7680;box-shadow:0 4px 16px #d4af7633}.dark-mode .share-link-input-group.copied{border-color:#28a745}.dark-mode .share-link-input{color:#e0e0e0}.dark-mode .share-link-input:focus{background:#d4af761a}.dark-mode .btn-copy{background:linear-gradient(135deg,#d4af76,#b8975f);border-left-color:#0003}.dark-mode .btn-copy:hover{background:linear-gradient(135deg,#b8975f,#d4af76)}.dark-mode .btn-copy.success{background:linear-gradient(135deg,#28a745,#20c997)}.btn-copy-modern{display:flex;align-items:center;justify-content:center;gap:.75rem;width:100%;padding:1rem 1.5rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:12px;font-weight:600;font-size:1rem;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 16px #667eea4d}.btn-copy-modern:hover{background:linear-gradient(135deg,#764ba2,#667eea);transform:translateY(-2px);box-shadow:0 6px 20px #667eea66}.btn-copy-modern:active{transform:translateY(0)}.btn-copy-modern.success{background:linear-gradient(135deg,#28a745,#20c997);box-shadow:0 4px 16px #28a7454d;animation:copySuccess .6s ease}@keyframes copySuccess{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}.btn-copy-modern svg{flex-shrink:0;transition:transform .3s ease}.btn-copy-modern:hover svg{transform:scale(1.1)}.btn-copy-modern.success svg{animation:checkmark .4s ease}@keyframes checkmark{0%{transform:scale(0) rotate(0)}50%{transform:scale(1.2) rotate(10deg)}to{transform:scale(1) rotate(0)}}.btn-copy-modern span{white-space:nowrap;font-size:1rem}.btn-copy{min-width:130px!important;justify-content:center!important;padding:1rem 1.25rem!important;font-size:.875rem!important}.btn-copy span{white-space:nowrap}.btn-copy svg{flex-shrink:0}.pricing-modal{background:#fff;border-radius:12px;max-width:700px;width:90%;max-height:90vh;overflow-y:auto;box-shadow:0 10px 40px #0003;display:flex;flex-direction:column}.pricing-modal-header{padding:20px 24px;border-bottom:1px solid #e0e0e0;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;background:#fff;z-index:10;border-radius:12px 12px 0 0}.pricing-modal-header h3{margin:0;font-size:1.25rem;color:#2c3e50}.btn-close-modal{background:none;border:none;font-size:1.5rem;cursor:pointer;color:#666;padding:4px 8px;transition:color .2s}.btn-close-modal:hover{color:#e74c3c}.pricing-modal-body{padding:24px;flex:1;overflow-y:auto}.pricing-modal-footer{padding:16px 24px;border-top:1px solid #e0e0e0;display:flex;justify-content:flex-end;position:sticky;bottom:0;background:#fff;border-radius:0 0 12px 12px}.pricing-table-container{margin-bottom:32px}.pricing-table-container h4{margin:0 0 12px;font-size:1rem;color:#34495e}.pricing-table{width:100%;border-collapse:collapse;border:1px solid #e0e0e0;border-radius:8px;overflow:hidden}.pricing-table thead{background:#f8f9fa}.pricing-table th{padding:12px 16px;text-align:left;font-weight:600;font-size:.875rem;color:#2c3e50;border-bottom:2px solid #e0e0e0}.pricing-table tbody tr{border-bottom:1px solid #f0f0f0;transition:background-color .2s}.pricing-table tbody tr:hover{background-color:#f8f9fa}.pricing-table tbody tr:last-child{border-bottom:none}.pricing-table td{padding:14px 16px;font-size:.9rem}.tier-range{font-weight:500;color:#34495e}.tier-price{color:#27ae60;font-weight:600;font-size:1rem}.tier-price-backside{color:#3498db;font-weight:600;font-size:1rem}.tier-discount{text-align:center}.discount-badge{display:inline-block;padding:4px 10px;background:#e8f5e9;color:#27ae60;border-radius:12px;font-weight:600;font-size:.85rem}.no-discount{color:#bdc3c7}.pricing-hint{margin:0 0 16px;font-size:.875rem;color:#7f8c8d;font-style:italic}.loading-prices{padding:40px 20px;text-align:center;color:#7f8c8d;font-size:.9rem}.pricing-table-materials .current-material{background:#e3f2fd;border-left:3px solid #3498db}.pricing-table-materials .current-material:hover{background:#d0e8f9}.material-name{font-weight:500;color:#2c3e50;display:flex;align-items:center;gap:12px}.current-badge{display:inline-block;padding:2px 8px;background:#3498db;color:#fff;border-radius:10px;font-size:.75rem;font-weight:600}.material-price{color:#27ae60;font-weight:600;font-size:1rem;text-align:right}.price-na{color:#bdc3c7;font-style:italic}.quantity-calculator{padding:20px;background:#f8f9fa;border-radius:8px;border:1px solid #e0e0e0}.quantity-calculator h4{margin:0 0 8px;font-size:1rem;color:#34495e}.calculator-hint{margin:0 0 16px;font-size:.875rem;color:#7f8c8d}.calculator-inputs{display:flex;gap:20px;align-items:flex-end;margin-bottom:20px;flex-wrap:wrap}.input-group{flex:1;min-width:200px}.input-group label{display:block;margin-bottom:6px;font-weight:500;font-size:.875rem;color:#2c3e50}.quantity-input{width:100%;padding:10px 12px;border:1px solid #d0d0d0;border-radius:6px;font-size:1rem;font-weight:600;color:#2c3e50;transition:border-color .2s}.quantity-input:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.input-suffix{margin-left:8px;color:#7f8c8d;font-size:.9rem}.backside-toggle{display:flex;align-items:center}.checkbox-label{display:flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none}.checkbox-label span{font-size:.9rem;color:#2c3e50}.calculated-result{background:#fff;padding:16px;border-radius:6px;border:1px solid #e0e0e0}.result-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid #f0f0f0}.result-row:last-child{border-bottom:none}.result-label{font-size:.9rem;color:#7f8c8d}.result-value{font-size:.95rem;color:#2c3e50}.result-total{margin-top:8px;padding-top:12px;border-top:2px solid #e0e0e0}.result-grand-total{border-top:2px solid #3498db;background:#e3f2fd;padding:12px;margin:12px -16px -16px;border-radius:0 0 6px 6px}.result-grand-price{font-size:1.25rem;color:#3498db}.savings-badge{margin-top:12px;padding:10px 16px;background:#e8f5e9;color:#27ae60;border-radius:6px;text-align:center;font-weight:600;font-size:.9rem}@media (max-width: 600px){.pricing-modal{width:95%;max-height:95vh}.pricing-modal-header,.pricing-modal-body,.pricing-modal-footer{padding:16px}.pricing-table th,.pricing-table td{padding:10px 12px;font-size:.85rem}.calculator-inputs{flex-direction:column;align-items:stretch}.input-group{min-width:100%}}.lampshade-editor{min-height:100vh;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;flex-direction:column}.lampshade-editor .editor-header{background:var(--app-bg-white, white);padding:1.5rem;box-shadow:0 2px 10px var(--app-card-shadow, rgba(0, 0, 0, .1));display:flex;justify-content:space-between;align-items:center;gap:1rem}.lampshade-editor .header-left{display:flex;align-items:center;gap:1rem;flex:1}.lampshade-editor .btn-back{background:#ecf0f1;border:none;padding:.5rem 1rem;border-radius:6px;cursor:pointer;font-size:1rem;transition:background .2s}.lampshade-editor .btn-back:hover{background:#bdc3c7}.lampshade-editor .design-name-input{padding:.5rem 1rem;border:2px solid var(--app-border-medium, #e0e0e0);border-radius:6px;font-size:1.1rem;min-width:300px;background:var(--app-card-bg, white);color:var(--app-text-primary, #2c3e50)}.lampshade-editor .editor-workspace{flex:1;display:grid;grid-template-columns:280px 1fr;gap:1.5rem;padding:1.5rem}.lampshade-editor .editor-sidebar{display:flex;flex-direction:column;gap:1rem}.lampshade-editor .panel{background:var(--app-card-bg, white);border-radius:12px;padding:1.5rem;box-shadow:0 2px 8px var(--app-card-shadow, rgba(0, 0, 0, .1))}.lampshade-editor .panel h3{margin:0 0 1rem;color:var(--app-text-primary, #2c3e50);font-size:1.1rem}.lampshade-editor .property-group{margin-bottom:1rem}.lampshade-editor .property-group label{display:block;margin-bottom:.5rem;font-weight:600;color:var(--app-text-primary, #34495e);font-size:.9rem}.lampshade-editor .property-group input[type=number]{width:100%;padding:.5rem;border:2px solid var(--app-border-medium, #e0e0e0);border-radius:6px;font-size:1rem;background:var(--app-card-bg, white);color:var(--app-text-primary, #2c3e50)}.lampshade-editor .hint-text{font-size:.85rem;color:var(--app-text-secondary, #7f8c8d);margin-top:.25rem;margin-bottom:0}.lampshade-editor .tip-item{font-size:.9rem;color:#555;margin:.5rem 0;line-height:1.4}.lampshade-editor .editor-canvas{background:#fff;border-radius:12px;padding:2rem;box-shadow:0 2px 8px #0000001a;display:flex;flex-direction:column;align-items:center;overflow:auto}.lampshade-editor .editor-canvas h3{margin:0 0 1.5rem;color:#2c3e50}.lampshade-preview{border:3px solid #34495e;background:#f8f9fa;position:relative;box-shadow:0 4px 12px #00000026;margin-bottom:1.5rem}.canvas-background{position:absolute;top:0;left:0;width:100%;height:100%;background-image:linear-gradient(45deg,#f0f0f0 25%,transparent 25%),linear-gradient(-45deg,#f0f0f0 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#f0f0f0 75%),linear-gradient(-45deg,transparent 75%,#f0f0f0 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0px;opacity:.3;z-index:0}.glue-zone{pointer-events:none}.glue-zone-label{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-90deg);background:#ff8800e6;color:#fff;padding:4px 8px;border-radius:4px;font-size:10px;font-weight:700;white-space:nowrap}.side-divider{pointer-events:none}.side-label{position:absolute;top:-25px;left:50%;transform:translate(-50%);background:#0af;color:#fff;padding:4px 8px;border-radius:4px;font-size:11px;font-weight:700;white-space:nowrap}.side-number{pointer-events:none;-webkit-user-select:none;user-select:none}.design-layer{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10}.design-element{transition:transform .1s}.design-element.selected{outline:3px solid #3498db;outline-offset:4px}.design-element:hover{outline:2px dashed #95a5a6;outline-offset:4px}.dimensions-info{background:#ecf0f1;padding:1rem 1.5rem;border-radius:8px;width:100%;max-width:600px}.dimensions-info p{margin:.5rem 0;color:#2c3e50;font-size:.95rem}.dimensions-info strong{color:#34495e}.dropzone-compact{border:2px dashed #bdc3c7;border-radius:8px;padding:1.5rem;text-align:center;cursor:pointer;transition:all .2s;background:#f8f9fa}.dropzone-compact:hover,.dropzone-compact.active{border-color:#3498db;background:#e3f2fd}.dropzone-icon{font-size:2rem;display:block;margin-bottom:.5rem}.dropzone-compact p{margin:0;color:#7f8c8d;font-size:.9rem}.btn-block{width:100%;padding:.75rem;border:none;border-radius:6px;font-size:1rem;cursor:pointer;transition:background .2s}.btn-primary{background:#3498db;color:#fff;padding:.75rem 1.5rem;border:none;border-radius:6px;font-size:1rem;cursor:pointer;transition:background .2s}.btn-primary:hover{background:#2980b9}@media (max-width: 1024px){.lampshade-editor .editor-workspace{grid-template-columns:1fr}.lampshade-editor .editor-sidebar{order:2}.lampshade-editor .editor-canvas{order:1}}.inspiration-gallery{padding:2rem;max-width:1400px;margin:0 auto;animation:fadeIn .3s ease-in;min-height:100vh;position:relative;z-index:1}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.gallery-header{display:flex;flex-direction:column;gap:1.5rem;margin-bottom:2rem}.header-content{text-align:center}.gallery-header h1{font-size:2.5rem;margin-bottom:.5rem;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.gallery-header .subtitle{font-size:1.1rem;color:var(--app-text-secondary, #666);margin:0}.search-bar{position:relative;max-width:600px;margin:0 auto}.search-input{width:100%;padding:1rem 3rem 1rem 1.5rem;font-size:1rem;border:2px solid var(--app-border, #e0e0e0);border-radius:50px;background:var(--app-card-bg, white);color:var(--app-text-primary, #2c3e50);transition:all .3s ease}.search-input:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 4px #667eea1a}.search-icon{position:absolute;right:1.5rem;top:50%;transform:translateY(-50%);font-size:1.2rem;color:var(--app-text-secondary, #666);pointer-events:none}.categories-carousel{position:relative;margin-bottom:2rem;padding:0 52px}.categories-nav{display:flex;gap:.75rem;overflow-x:auto;padding:1rem 0;border-bottom:2px solid var(--app-border-light, #f0f0f0);scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none}.categories-nav::-webkit-scrollbar{display:none}.carousel-arrow{position:absolute;top:1.5rem;width:40px;height:40px;border-radius:8px;background:var(--app-card-bg, white);border:1px solid var(--app-border, #e0e0e0);color:var(--app-text-primary, #2c3e50);cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px #00000014;z-index:10;padding:0;margin:0}.carousel-arrow:disabled{opacity:.4;cursor:not-allowed;background:var(--app-card-bg, white);border-color:var(--app-border-light, #f0f0f0);color:var(--app-text-tertiary, #ccc)}.carousel-arrow:not(:disabled):hover{background:linear-gradient(135deg,#667eea,#764ba2);border-color:#667eea;color:#fff;box-shadow:0 4px 12px #667eea4d;transform:translateY(-2px)}.carousel-arrow:not(:disabled):active{transform:translateY(-1px);box-shadow:0 2px 8px #667eea40}.carousel-arrow-left{left:0}.carousel-arrow-right{right:0}.category-btn{display:flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;border:2px solid var(--app-border, #e0e0e0);background:var(--app-card-bg, white);color:var(--app-text-primary, #2c3e50);border-radius:50px;cursor:pointer;transition:all .3s ease;white-space:nowrap;font-size:.95rem;font-weight:500}.category-btn:hover{border-color:#667eea;background:#667eea0d;transform:translateY(-2px)}.category-btn.active{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-color:transparent;box-shadow:0 4px 12px #667eea4d}.category-icon{font-size:1.2rem}.templates-section{margin-bottom:2rem}.templates-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}.templates-header h2{font-size:1.8rem;color:var(--app-text-primary, #2c3e50);margin:0}.template-count{color:var(--app-text-secondary, #666);font-size:.95rem;font-weight:500}.templates-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.25rem}.template-card{background:var(--app-card-bg, white);border:2px solid var(--app-border-medium, #e0e0e0);border-radius:16px;overflow:hidden;cursor:pointer;transition:all .3s ease;display:flex;flex-direction:column;box-shadow:0 4px 16px #00000014}.template-card:hover{border-color:#667eea;box-shadow:0 8px 24px #667eea33;transform:translateY(-4px)}.template-thumbnail{position:relative;width:100%;aspect-ratio:3/2;background:linear-gradient(135deg,#f8f9fa,#e9ecef);display:flex;align-items:center;justify-content:center;overflow:hidden}.template-thumbnail img{width:100%;height:100%;object-fit:cover}.placeholder-thumbnail{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#667eea1a,#764ba21a)}.placeholder-icon{font-size:4rem;opacity:.5;color:var(--app-text-tertiary, #999)}.featured-badge{position:absolute;top:.75rem;left:.75rem;padding:.35rem .75rem;background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;border-radius:50px;font-size:.7rem;font-weight:700;box-shadow:0 2px 8px #f59e0b66;z-index:3;text-transform:uppercase;letter-spacing:.5px}.type-badge{position:absolute;bottom:.75rem;right:.75rem;padding:.35rem .75rem;color:#fff;border-radius:50px;font-size:.7rem;font-weight:600;z-index:2;letter-spacing:.3px}.type-badge.form{background:linear-gradient(135deg,#667eea,#764ba2);box-shadow:0 2px 8px #667eea66}.type-badge.inspiration{background:linear-gradient(135deg,#10b981,#059669);box-shadow:0 2px 8px #10b98166}.template-card.featured{border-color:#f59e0b;box-shadow:0 4px 16px #f59e0b26}.template-card.featured:hover{border-color:#d97706;box-shadow:0 8px 24px #f59e0b40}.form-fields-info{margin-top:.25rem}.fields-count{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .6rem;background:#667eea1a;color:#667eea;border-radius:4px;font-size:.75rem;font-weight:500}.form-assistant-badge{position:absolute;top:.75rem;left:.75rem;padding:.4rem .9rem;background:linear-gradient(135deg,#4caf50,#45a049);color:#fff;border-radius:50px;font-size:.8rem;font-weight:600;box-shadow:0 2px 8px #4caf5066;z-index:2;text-transform:uppercase;letter-spacing:.5px}.template-info{padding:1rem;flex:1;display:flex;flex-direction:column;gap:.5rem}.template-name{font-size:1.1rem;font-weight:600;color:var(--app-text-primary, #2c3e50);margin:0}.template-description{font-size:.85rem;color:var(--app-text-secondary, #666);margin:0;line-height:1.4}.template-tags{display:flex;flex-wrap:wrap;gap:.5rem;padding-top:.75rem;margin-top:.75rem;border-top:1px solid var(--app-border-light, #f0f0f0)}.tag{padding:.4rem .85rem;background:#667eea1a;color:#667eea;border-radius:50px;font-size:.8rem;font-weight:500}.recommended-products{display:flex;align-items:center;gap:.5rem;padding-top:.75rem;margin-top:.75rem;border-top:1px solid var(--app-border-light, #f0f0f0);font-size:.85rem}.recommended-label{color:var(--app-text-secondary, #666)}.product-count{color:#667eea;font-weight:600}.template-actions{padding:0 1rem 1rem}.btn-use-template{width:100%;padding:.75rem 1.25rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:8px;font-size:.95rem;font-weight:600;cursor:pointer;transition:all .3s ease}.btn-use-template:hover{transform:translateY(-2px);box-shadow:0 4px 12px #667eea66}.no-templates{text-align:center;padding:4rem 2rem;color:var(--app-text-secondary, #666)}.no-templates p{font-size:1.1rem;margin:.5rem 0}.no-templates .hint{font-size:.95rem;color:var(--app-text-tertiary, #999)}.info-box{margin-top:3rem;text-align:left;background:var(--app-hover-bg, #f8f9fa);padding:2.5rem;border-radius:16px;max-width:700px;margin-left:auto;margin-right:auto}.info-box h3{margin-top:0;color:var(--app-text-primary, #2c3e50);font-size:1.2rem;margin-bottom:1rem}.info-box ul{list-style:none;padding:0}.info-box li{padding:.6rem 0;color:var(--app-text-secondary, #666);line-height:1.5}.info-box li:before{content:"✓ ";color:#667eea;font-weight:700;margin-right:.5rem}.dark-mode .gallery-header h1{background:linear-gradient(135deg,#fff,#d4af76);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 2px 8px rgba(212,175,118,.4))}.dark-mode .template-card{background:linear-gradient(135deg,#1a1a2e,#16213e);border:2px solid rgba(212,175,118,.2);box-shadow:0 4px 16px #0000004d}.dark-mode .template-card:hover{border-color:#d4af7680;box-shadow:0 8px 24px #d4af764d}.dark-mode .template-thumbnail{background:linear-gradient(135deg,#2c2c2c,#3a3a3a)}.dark-mode .placeholder-thumbnail{background:linear-gradient(135deg,#667eea26,#764ba226)}.dark-mode .info-box{background:#1e1e1e99;border:1px solid rgba(255,255,255,.1)}.dark-mode .info-box h3{color:#e0e0e0}.dark-mode .info-box li{color:#b0b0b0}.dark-mode .info-box li:before{color:#8b9eea}.loading-state{text-align:center;padding:4rem 2rem;color:var(--app-text-secondary, #666)}.loading-spinner{width:50px;height:50px;margin:0 auto 1.5rem;border:4px solid rgba(102,126,234,.1);border-top-color:#667eea;border-radius:50%;animation:spin 1s linear infinite}.loading-state p{font-size:1.1rem;font-weight:500;margin:0;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}@media (max-width: 768px){.inspiration-gallery{padding:1rem}.gallery-header h1{font-size:2rem}.templates-grid{grid-template-columns:1fr}.categories-nav{gap:.5rem}.category-btn{padding:.6rem 1.2rem;font-size:.9rem}.templates-header{flex-direction:column;align-items:flex-start;gap:.5rem}}@media (max-width: 480px){.search-input{padding:.875rem 2.5rem .875rem 1rem;font-size:.95rem}.search-icon{right:1rem}}.lunaria-links-panel{max-width:1200px;margin:0 auto;padding:2rem}.panel-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;padding-bottom:1rem;border-bottom:2px solid #e5e7eb}.panel-header h2{margin:0;color:#1e293b;font-size:1.75rem}.quota-badge{padding:.5rem 1rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-radius:20px;font-size:.9rem;font-weight:600}.loading{text-align:center;padding:4rem 2rem;color:#64748b;font-size:1.2rem}.empty-state{text-align:center;padding:4rem 2rem;color:#64748b}.empty-icon{font-size:4rem;margin-bottom:1rem;opacity:.5}.empty-state h3{color:#1e293b;margin-bottom:.5rem}.empty-state p{max-width:500px;margin:0 auto;line-height:1.6}.links-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:1.5rem;margin-bottom:2rem}.link-card{background:#fff;border:2px solid #e5e7eb;border-radius:12px;padding:1.5rem;transition:all .2s ease;box-shadow:0 2px 8px #0000000d}.link-card:hover{border-color:#667eea;box-shadow:0 4px 12px #667eea26;transform:translateY(-2px)}.link-card.inactive{opacity:.6;background:#f8f9fa}.link-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.link-title{font-size:1.1rem;font-weight:600;color:#1e293b;flex:1}.inactive-badge{padding:.25rem .75rem;background:#ef4444;color:#fff;border-radius:12px;font-size:.75rem;font-weight:600}.link-url{display:flex;align-items:center;gap:.5rem;padding:.75rem;background:#f8f9fa;border-radius:8px;margin-bottom:1rem}.link-url code{flex:1;font-size:.9rem;color:#667eea;font-family:Courier New,monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.btn-icon{padding:.25rem .5rem;background:transparent;border:1px solid #e5e7eb;border-radius:6px;cursor:pointer;transition:all .2s;font-size:1rem}.btn-icon:hover{background:#667eea;border-color:#667eea;transform:scale(1.1)}.link-target{padding:.75rem;background:#f1f5f9;border-radius:8px;margin-bottom:1rem;font-size:.85rem}.link-target .label{color:#64748b;font-weight:600;display:block;margin-bottom:.25rem}.target-link{color:#667eea;text-decoration:none;word-break:break-all}.target-link:hover{text-decoration:underline}.link-meta{display:flex;gap:1rem;margin-bottom:1rem;font-size:.85rem}.meta-item{display:flex;flex-direction:column;gap:.25rem}.meta-label{color:#64748b;font-weight:600}.meta-value{color:#1e293b}.link-actions{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}.btn{padding:.75rem 1rem;border:none;border-radius:8px;cursor:pointer;font-size:.9rem;font-weight:600;transition:all .2s;text-align:center}.btn-edit{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.btn-edit:hover{transform:translateY(-1px);box-shadow:0 4px 12px #667eea4d}.btn-delete{background:#fee;color:#dc2626;border:1px solid #fecaca}.btn-delete:hover{background:#dc2626;color:#fff}.quota-warning{padding:1rem 1.5rem;background:#fef3c7;border:2px solid #f59e0b;border-radius:12px;color:#92400e;font-size:.9rem;text-align:center}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:10000;padding:1rem}.modal{background:#fff;border-radius:16px;max-width:600px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px #0000004d}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem;border-bottom:2px solid #e5e7eb}.modal-header h3{margin:0;color:#1e293b;font-size:1.5rem}.modal-close{background:transparent;border:none;font-size:1.5rem;cursor:pointer;color:#64748b;padding:.5rem;line-height:1}.modal-close:hover{color:#1e293b}.modal-content{padding:1.5rem}.link-info{padding:1rem;background:#f8f9fa;border-radius:8px;margin-bottom:1.5rem;font-size:.9rem}.link-info strong{display:block;margin-bottom:.5rem;color:#64748b}.link-info code{color:#667eea;font-size:1rem;font-family:Courier New,monospace}.form-group label{display:block;margin-bottom:.5rem;font-weight:600;color:#1e293b;font-size:.9rem}.form-group input,.form-group textarea{width:100%;padding:.75rem;border:2px solid #e5e7eb;border-radius:8px;font-size:.95rem;transition:all .2s;box-sizing:border-box}.form-group input:focus,.form-group textarea:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.form-group small{display:block;margin-top:.5rem;color:#f59e0b;font-size:.85rem}.form-group-checkbox{margin-bottom:1rem}.form-group-checkbox label{display:flex;align-items:center;gap:.75rem;cursor:pointer}.form-group-checkbox input[type=checkbox]{width:1.25rem;height:1.25rem;cursor:pointer}.form-group-checkbox span{font-size:.95rem;color:#1e293b}.stats-box{padding:1rem;background:linear-gradient(135deg,#667eea15,#764ba215);border:2px solid #667eea;border-radius:12px;margin-bottom:1.5rem}.stats-box h4{margin:0 0 .75rem;color:#667eea;font-size:.95rem}.stats-grid{display:grid;gap:.75rem}.stat{display:flex;justify-content:space-between;padding:.5rem;background:#fff;border-radius:6px;font-size:.85rem}.stat-label{color:#64748b;font-weight:600}.stat-value{color:#1e293b;font-weight:600}.modal-actions{display:flex;gap:1rem;justify-content:flex-end;padding-top:1rem;border-top:2px solid #e5e7eb}.btn-cancel{background:#f1f5f9;color:#64748b}.btn-cancel:hover{background:#e2e8f0;color:#1e293b}.btn-save{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.btn-save:hover{transform:translateY(-1px);box-shadow:0 4px 12px #667eea4d}@media (max-width: 768px){.lunaria-links-panel{padding:1rem}.links-grid{grid-template-columns:1fr}.panel-header{flex-direction:column;align-items:flex-start;gap:1rem}.link-actions{grid-template-columns:1fr}.modal{margin:1rem}}.onboarding-container{max-width:900px;margin:0 auto;padding:2rem}.onboarding-hero{text-align:center;margin-bottom:3rem}.onboarding-icon{font-size:5rem;margin-bottom:1rem;animation:float 3s ease-in-out infinite}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-20px)}}.onboarding-hero h1{font-size:2.5rem;color:#1e293b;margin:0 0 .5rem;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.onboarding-subtitle{font-size:1.25rem;color:#64748b;margin:0}.onboarding-features{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem;margin-bottom:3rem}.feature-card{padding:1.5rem;background:#fff;border:2px solid #e5e7eb;border-radius:12px;text-align:center;transition:all .3s ease}.feature-card:hover{transform:translateY(-5px);box-shadow:0 10px 25px #667eea26;border-color:#667eea}.feature-icon{font-size:3rem;margin-bottom:.75rem}.feature-card h3{font-size:1.1rem;color:#1e293b;margin:0 0 .5rem}.feature-card p{font-size:.9rem;color:#64748b;margin:0;line-height:1.5}.onboarding-example{background:linear-gradient(135deg,#f8f9fa,#e9ecef);padding:2rem;border-radius:12px;margin-bottom:2rem}.onboarding-example h3{text-align:center;color:#1e293b;margin:0 0 1.5rem}.example-scenario{display:flex;flex-direction:column;gap:1rem}.example-step{display:flex;align-items:center;gap:1rem;background:#fff;padding:1rem;border-radius:8px}.step-number{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-radius:50%;font-weight:700;font-size:1.2rem;flex-shrink:0}.example-step strong{display:block;color:#1e293b;margin-bottom:.25rem}.example-step p{margin:0;color:#64748b;font-size:.9rem}.onboarding-cta{text-align:center;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:2rem;border-radius:12px;margin-bottom:2rem}.onboarding-cta p{margin:0;font-size:1.1rem}.onboarding-footer{text-align:center;padding:1rem}.filter-bar{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:2rem;flex-wrap:wrap}.filter-buttons{display:flex;gap:.5rem}.filter-buttons button{padding:.5rem 1rem;background:#fff;border:2px solid #e5e7eb;border-radius:8px;cursor:pointer;font-size:.9rem;transition:all .2s}.filter-buttons button.active{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-color:#667eea}.filter-buttons button:hover:not(.active){border-color:#667eea;background:#f8f9fa}.search-input{padding:.5rem 1rem;border:2px solid #e5e7eb;border-radius:8px;font-size:.9rem;min-width:250px;transition:border-color .2s}.project-assignment{margin-top:.75rem;padding:.75rem;background:#f8f9fa;border-radius:6px}.project-assignment .label{font-size:.75rem;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.5px;margin-bottom:.25rem}.project-name{font-weight:600;color:#1e293b;margin-bottom:.25rem}.project-date{font-size:.85rem;color:#64748b}.project-assignment.unused{background:#fef3c7;border:1px dashed #f59e0b}.unused-badge{color:#f59e0b;font-weight:600;font-size:.9rem}.header-subtitle{margin:.25rem 0 0;color:#64748b;font-size:.95rem;font-weight:400}.loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem 2rem;color:#64748b}.spinner{width:40px;height:40px;border:4px solid #e5e7eb;border-top-color:#667eea;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:1rem}@keyframes spin{to{transform:rotate(360px)}}@media (max-width: 768px){.onboarding-hero h1{font-size:2rem}.onboarding-features{grid-template-columns:1fr}.filter-bar{flex-direction:column;align-items:stretch}.search-input{min-width:100%}}.view-mode-bar{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;margin-bottom:2rem;flex-wrap:wrap}.view-mode-buttons{display:flex;gap:1rem;flex-wrap:wrap}.view-mode-btn{display:flex;align-items:center;gap:.75rem;padding:.75rem 1.25rem;background:#fff;border:2px solid #e5e7eb;border-radius:12px;cursor:pointer;transition:all .3s ease;min-width:140px}.view-mode-btn:hover{border-color:#667eea;transform:translateY(-2px);box-shadow:0 4px 12px #667eea26}.view-mode-btn.active{background:linear-gradient(135deg,#667eea,#764ba2);border-color:#667eea;color:#fff;box-shadow:0 4px 12px #667eea4d}.view-icon{font-size:1.5rem}.view-label{font-size:.85rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-bottom:.25rem}.view-count{font-size:1.25rem;font-weight:700}.link-card.inactive{opacity:.7;border-color:#f59e0b;background:linear-gradient(135deg,#fef3c7,#fffbeb)}.link-status-badge{position:absolute;top:-10px;right:10px;z-index:10}.status-active{background:linear-gradient(135deg,#10b981,#059669);color:#fff;padding:.35rem .75rem;border-radius:20px;font-size:.75rem;font-weight:600;box-shadow:0 2px 8px #10b9814d}.status-inactive{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;padding:.35rem .75rem;border-radius:20px;font-size:.75rem;font-weight:600;box-shadow:0 2px 8px #f59e0b4d}.target-url-section{margin-top:.75rem;padding:.75rem;background:#f8f9fa;border-radius:8px}.target-url-section .label{font-size:.75rem;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.5px;margin-bottom:.5rem}.url-display{display:flex;align-items:center;gap:.5rem}.url-link{flex:1;color:#667eea;text-decoration:none;font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.url-link:hover{text-decoration:underline}.btn-edit-url{padding:.35rem .6rem;background:#667eea;color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:.85rem;transition:all .2s}.btn-edit-url:hover{background:#5568d3;transform:scale(1.05)}.url-edit-inline{display:flex;align-items:center;gap:.5rem}.url-input{flex:1;padding:.5rem;border:2px solid #667eea;border-radius:6px;font-size:.9rem;outline:none}.url-input:focus{border-color:#5568d3;box-shadow:0 0 0 3px #667eea1a}.btn-save,.btn-cancel{padding:.5rem .75rem;border:none;border-radius:6px;cursor:pointer;font-size:1rem;font-weight:600;transition:all .2s}.btn-save{background:#10b981;color:#fff}.btn-save:hover{background:#059669;transform:scale(1.05)}.btn-cancel{background:#ef4444;color:#fff}.btn-cancel:hover{background:#dc2626;transform:scale(1.05)}.link-quick-actions{margin-top:1rem;padding-top:1rem;border-top:1px solid #e5e7eb}.btn-toggle{width:100%;padding:.75rem;border:2px solid;border-radius:8px;font-weight:600;cursor:pointer;transition:all .3s ease}.btn-activate{background:#fff;border-color:#10b981;color:#10b981}.btn-activate:hover{background:#10b981;color:#fff;transform:translateY(-2px);box-shadow:0 4px 12px #10b98133}.btn-deactivate{background:#fff;border-color:#f59e0b;color:#f59e0b}.btn-deactivate:hover{background:#f59e0b;color:#fff;transform:translateY(-2px);box-shadow:0 4px 12px #f59e0b33}@media (max-width: 768px){.view-mode-bar{flex-direction:column;align-items:stretch}.view-mode-buttons{flex-direction:column;gap:.75rem}.view-mode-btn{min-width:100%}.url-edit-inline{flex-direction:column}.btn-save,.btn-cancel{width:100%}}.dark-mode-toggle{position:fixed!important;top:1.5rem!important;right:1.5rem!important;z-index:999999!important;background:transparent;border:none;cursor:pointer;padding:0;transition:transform .2s ease;opacity:1!important;visibility:visible!important;display:block!important;pointer-events:all!important}.dark-mode-toggle:hover{transform:scale(1.05)}.dark-mode-toggle:active{transform:scale(.95)}.toggle-track{width:60px;height:32px;background:#f8f9fa!important;border:2px solid #343a40!important;border-radius:16px;padding:3px;transition:all .3s ease;box-shadow:0 4px 12px #0000004d!important}.toggle-thumb{width:24px;height:24px;background:linear-gradient(135deg,#f39c12,#e67e22);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 4px #0003}.toggle-thumb.dark{transform:translate(28px)}.toggle-thumb.light{transform:translate(0)}@media (max-width: 768px){.dark-mode-toggle{top:1rem;right:1rem}.toggle-track{width:50px;height:28px}.toggle-thumb{width:20px;height:20px}.toggle-thumb.dark{transform:translate(22px)}.toggle-thumb svg{width:12px;height:12px}}.toast-container{position:fixed;top:20px;right:20px;z-index:10000;display:flex;flex-direction:column;gap:12px;max-width:420px;pointer-events:none}.toast{display:flex;align-items:flex-start;gap:12px;background:#fff;border-radius:8px;padding:16px;box-shadow:0 4px 12px #00000026;pointer-events:all;min-width:300px;max-width:420px;border-left:4px solid #ccc;animation:slideIn .3s ease-out}.toast-exit{animation:slideOut .3s ease-in forwards}.toast-success{border-left-color:#10b981}.toast-error{border-left-color:#ef4444}.toast-warning{border-left-color:#f59e0b}.toast-info{border-left-color:#3b82f6}.toast-icon{font-size:24px;line-height:1;flex-shrink:0}.toast-content{flex:1;color:#374151;font-size:14px;line-height:1.5}.toast-content p{margin:0}.toast-content strong{display:block;font-weight:600;margin-bottom:4px;color:#111827}.toast-content ul{margin:8px 0 0;padding-left:20px}.toast-content li{margin:4px 0}.toast-close{background:none;border:none;color:#9ca3af;font-size:18px;cursor:pointer;padding:0;line-height:1;flex-shrink:0;transition:color .2s}.toast-close:hover{color:#374151}@keyframes slideIn{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@keyframes slideOut{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(100%)}}@media (max-width: 768px){.toast-container{top:10px;right:10px;left:10px;max-width:none}.toast{min-width:auto;max-width:none}}.material-image-gallery{padding:0}.image-gallery-empty,.image-gallery-loading{padding:40px 20px;text-align:center;background:#f9f9f9;border-radius:8px;border:2px dashed #d0d0d0;color:#666}.gallery-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.gallery-header h4{margin:0;font-size:16px;font-weight:600;color:#1a252f}.btn-upload{display:inline-flex;align-items:center;gap:6px;padding:10px 16px;background:#667eea;color:#fff;border-radius:6px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.btn-upload:hover{background:#5568d3;transform:translateY(-1px);box-shadow:0 2px 8px #667eea4d}.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}.gallery-item{background:var(--app-surface, white);border:2px solid #e0e0e0;border-radius:10px;overflow:hidden;transition:all .2s ease}.gallery-item:hover{border-color:#667eea;box-shadow:0 4px 12px #667eea26}.gallery-item.active{border-color:#28a745;box-shadow:0 4px 12px #28a74533}.gallery-image-wrapper{position:relative;width:100%;height:160px;background:#f5f5f5;overflow:hidden}.gallery-image-wrapper img{width:100%;height:100%;object-fit:cover}.active-badge{position:absolute;top:8px;right:8px;background:#28a745;color:#fff;padding:4px 10px;border-radius:4px;font-size:12px;font-weight:600;box-shadow:0 2px 6px #0003}.gallery-item-info{padding:10px 12px;background:#fafafa;border-bottom:1px solid #e0e0e0}.gallery-filename{margin:0 0 4px;font-size:12px;font-weight:500;color:#333;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gallery-filesize{font-size:11px;color:#999}.gallery-item-actions{display:flex;gap:6px;padding:10px}.btn-gallery-action{flex:1;padding:8px 10px;border:none;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s ease}.btn-activate{background:#667eea;color:#fff}.btn-activate:hover{background:#5568d3}.btn-delete{background:#dc3545;color:#fff}.btn-delete:hover{background:#c82333}.btn-gallery-action:hover{transform:translateY(-1px);box-shadow:0 2px 6px #00000026}.gallery-empty{padding:40px 20px;text-align:center;background:#f9f9f9;border-radius:8px;border:2px dashed #d0d0d0}.gallery-empty p{margin:0 0 6px;color:#666;font-size:14px}.gallery-empty small{color:#999;font-size:12px}.delete-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:10000;animation:fadeIn .2s ease}.delete-modal{background:#fff;border-radius:16px;padding:2rem;max-width:420px;width:90%;box-shadow:0 20px 60px #0000004d;animation:slideUp .3s ease}.delete-modal-icon{font-size:3.5rem;text-align:center;margin-bottom:1rem;filter:drop-shadow(0 4px 8px rgba(220,53,69,.3))}.delete-modal h3{margin:0 0 1rem;font-size:1.5rem;color:#1a202c;text-align:center;font-weight:700}.delete-modal-message{color:#4a5568;text-align:center;margin:0 0 1rem;font-size:1rem;line-height:1.6}.delete-modal-message strong{color:#1a202c;font-weight:600}.delete-modal-warning{background:#fff3cd;border-left:4px solid #ffc107;padding:.75rem 1rem;border-radius:6px;color:#856404;font-size:.9rem;margin:1rem 0 1.5rem;font-weight:500}.delete-modal-actions{display:flex;gap:.75rem;margin-top:1.5rem}.btn-modal-cancel,.btn-modal-delete{flex:1;padding:.75rem 1.5rem;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s ease}.btn-modal-cancel{background:#f3f4f6;color:#4a5568;border:2px solid #e5e7eb}.btn-modal-cancel:hover{background:#e5e7eb;border-color:#d1d5db;color:#1a202c}.btn-modal-delete{background:linear-gradient(135deg,#dc3545,#c82333);color:#fff;box-shadow:0 4px 12px #dc35454d}.btn-modal-delete:hover{transform:translateY(-2px);box-shadow:0 6px 16px #dc354566}.dark-mode .gallery-header h4{color:#d4af76f2}.dark-mode .gallery-item{background:#1a1a2e66;border-color:#d4af7633}.dark-mode .gallery-item:hover{border-color:#d4af7680}.dark-mode .gallery-item.active{border-color:#28a745}.dark-mode .gallery-image-wrapper{background:#0000004d}.dark-mode .gallery-item-info{background:#1a1a2e4d;border-color:#d4af7633}.dark-mode .gallery-filename{color:#d4af76e6}.dark-mode .gallery-filesize{color:#d4af7699}.gallery-empty,.image-gallery-empty,.dark-mode .image-gallery-loading{background:#1a1a2e4d;border-color:#d4af7633;color:#d4af76cc}.dark-mode .delete-modal{background:#1a1a2e;color:#d4af76f2}.dark-mode .delete-modal h3{color:#d4af76f2}.dark-mode .delete-modal-message{color:#d4af76cc}.dark-mode .delete-modal-message strong{color:#d4af76f2}.dark-mode .delete-modal-warning{background:#ffc10733;border-left-color:#ffc107;color:#d4af76e6}.dark-mode .btn-modal-cancel{background:#d4af761a;color:#d4af76e6;border-color:#d4af764d}.dark-mode .btn-modal-cancel:hover{background:#d4af7633;color:#d4af76}:root:not(.dark-mode) .delete-modal-overlay{background:#0009}.material-library{padding:20px;max-width:1800px;margin:0 auto;width:100%}.library-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px}.subtitle{margin:0;color:#666;font-size:14px;flex:1}.materials-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:28px;margin-bottom:40px}.material-card{background:var(--app-surface, white);border:2px solid #e0e0e0;border-radius:12px;overflow:hidden;transition:all .3s ease;display:flex;flex-direction:column;min-height:460px;box-shadow:0 2px 4px #0000000d;cursor:pointer}.material-card:hover{border-color:#667eea;box-shadow:0 8px 20px #667eea40;transform:translateY(-3px)}.material-card.inactive{opacity:.6}.material-preview{width:100%;height:200px;overflow:hidden;background:#f5f5f5;flex-shrink:0;position:relative;cursor:pointer}.material-preview:hover{opacity:.95}.material-preview img{width:100%;height:100%;object-fit:cover}.material-color{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center}.material-color:after{content:"🌳";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:56px;opacity:.25}.no-image-text{position:relative;z-index:1;background:#ffffffe6;padding:6px 12px;border-radius:6px;font-size:13px;font-weight:600;color:#666}.material-info{padding:14px;flex:1;display:flex;flex-direction:column;gap:8px}.material-info h4{margin:0 0 4px;font-size:17px;font-weight:600;color:#1a252f;line-height:1.3}.material-name-en{margin:0 0 8px;color:#999;font-size:13px;font-style:italic}.material-id{margin:0 0 8px;font-family:SF Mono,Consolas,Monaco,monospace;font-size:12px;font-weight:500;color:#667eea;background:#f0f2ff;padding:5px 10px;border-radius:6px;display:inline-block;width:fit-content}.material-meta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:8px}.meta-item{font-size:13px;color:#666;background:#f5f5f5;padding:4px 8px;border-radius:4px}.meta-item.price-default{background:#e3f2fd;color:#1565c0;font-weight:600}.usage-info{margin:8px 0 0;font-size:12px;color:#999}.material-actions{display:flex;flex-direction:column;gap:10px;padding:14px 16px;border-top:1px solid #e0e0e0;background:#fafafa;flex-shrink:0;margin-top:auto}.material-actions button{width:100%;padding:14px 18px;border:none;border-radius:8px;font-size:15px;font-weight:600;cursor:pointer;transition:all .2s ease;white-space:nowrap;min-height:50px;display:flex;align-items:center;justify-content:center;gap:8px}.material-actions button:hover{transform:translateY(-1px);box-shadow:0 2px 8px #0000001a}.btn-toggle{background:#e0e0e0;color:#666}.btn-toggle.active{background:#28a745;color:#fff}.btn-toggle.active:hover{background:#218838}.btn-toggle.inactive{background:#dc3545;color:#fff}.btn-toggle.inactive:hover{background:#c82333}.btn-edit{background:#667eea;color:#fff}.btn-edit:hover{background:#5568d3}.empty-icon{font-size:64px;margin-bottom:20px}.empty-state h3{margin:0 0 12px;color:#1a252f}.empty-state p{margin:0 0 24px;color:#666}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}.modal-content{background:var(--app-surface, white);border-radius:12px;max-width:600px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 10px 40px #0003}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:1px solid #e0e0e0}.modal-header h2{margin:0;font-size:20px}.btn-close{background:none;border:none;font-size:24px;cursor:pointer;color:#999;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:all .2s}.btn-close:hover{background:#f0f0f0;color:#333}.material-form form{padding:20px}.form-group label{display:block;margin-bottom:6px;font-weight:600;color:#1a252f;font-size:14px}.form-group input[type=text],.form-group input[type=url],.form-group input[type=number],.form-group textarea{width:100%;padding:10px 12px;border:2px solid #e0e0e0;border-radius:6px;font-size:14px;transition:border-color .2s}.form-group input:focus,.form-group textarea:focus{outline:none;border-color:#667eea}.form-group input:disabled{background:#f5f5f5;cursor:not-allowed}.form-group small{display:block;margin-top:4px;font-size:12px;color:#999}.color-input-group{display:flex;gap:12px}.color-input-group input[type=color]{width:60px;height:42px;border:2px solid #e0e0e0;border-radius:6px;cursor:pointer}.color-input-group input[type=text]{flex:1}.image-preview{margin-top:12px;max-width:200px;height:120px;object-fit:cover;border-radius:6px;border:2px solid #e0e0e0}.checkbox-label{display:flex;align-items:center;gap:8px;cursor:pointer;font-weight:400}.form-actions{display:flex;gap:12px;margin-top:30px;padding-top:20px;border-top:1px solid #e0e0e0}.form-actions button{flex:1;padding:12px 24px;border:none;border-radius:6px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s}.btn-primary:hover:not(:disabled){background:#5568d3}.btn-secondary:hover{background:#d0d0d0}.material-library.loading{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:400px}.spinner{width:40px;height:40px;border:4px solid #f3f3f3;border-top:4px solid #667eea;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:12px}.error-banner{background:#fef2f2;border:2px solid #fecaca;border-radius:10px;padding:16px 20px;margin-bottom:24px;color:#991b1b;display:flex;justify-content:space-between;align-items:center;gap:16px;box-shadow:0 2px 6px #ef44441a}.btn-retry{background:#dc3545;color:#fff;border:none;padding:8px 16px;border-radius:6px;cursor:pointer;font-size:13px}@media (max-width: 768px){.materials-grid{grid-template-columns:1fr}.library-header{flex-direction:column;gap:16px}}.dark-mode .material-library{background:transparent}.dark-mode .material-card:hover{border-color:#d4af7680;box-shadow:0 4px 12px #d4af7626}.dark-mode .material-card.inactive{opacity:.5}.dark-mode .material-preview{background:#0000004d}.dark-mode .material-info h4{color:#d4af76f2}.dark-mode .material-name-en{color:#d4af7699}.dark-mode .material-id{color:#d4af76e6;background:#d4af7626}.dark-mode .meta-item{color:#d4af76cc;background:#0000004d}.dark-mode .meta-item.price-default{background:#2196f333;color:#90caf9}.dark-mode .usage-info{color:#d4af7699}.dark-mode .material-actions{border-top-color:#d4af7633;background:#0003}.dark-mode .btn-toggle{background:#d4af7633;color:#d4af76e6}.dark-mode .btn-toggle.active{background:#4caf504d;color:#81c784}.dark-mode .btn-toggle.inactive{background:#f443364d;color:#ef9a9a}.dark-mode .btn-edit{background:#d4af764d;color:#d4af76}.dark-mode .btn-edit:hover{background:#d4af7666}.dark-mode .empty-state{background:#0003;border-color:#d4af764d}.dark-mode .empty-state h3{color:#d4af76f2}.dark-mode .empty-state p{color:#d4af76b3}.dark-mode .modal-overlay{background:#000000b3}.dark-mode .modal-content{background:#1a1a2efa}.dark-mode .modal-header h2{color:#d4af76f2}.dark-mode .btn-close:hover{background:#d4af7626;color:#d4af76}.dark-mode .form-group label{color:#d4af76f2}.dark-mode .form-group input[type=text],.dark-mode .form-group input[type=url],.dark-mode .form-group input[type=number],.dark-mode .form-group textarea{background:#0000004d;border-color:#d4af764d;color:#d4af76f2}.dark-mode .form-group input:focus,.dark-mode .form-group textarea:focus{border-color:#d4af7699}.dark-mode .form-group input:disabled{background:#0006}.dark-mode .form-group small{color:#d4af7699}.dark-mode .color-input-group input[type=color],.dark-mode .image-preview{border-color:#d4af764d}.dark-mode .checkbox-label{color:#d4af76e6}.dark-mode .btn-primary:disabled{opacity:.4}.dark-mode .btn-secondary:hover{background:#d4af7633}.dark-mode .material-library.loading{color:#d4af76e6}.toggle-group{display:flex;flex-direction:column;gap:.5rem}.toggle-button{display:flex;align-items:center;gap:.75rem;padding:.75rem 1.25rem;border:2px solid #e0e0e0;border-radius:10px;background:#f5f5f5;cursor:pointer;transition:all .3s ease;font-size:15px;font-weight:600;width:fit-content}.toggle-button:hover{border-color:silver;background:#ebebeb;transform:translateY(-1px)}.toggle-button.active{background:linear-gradient(135deg,#10b981,#059669);border-color:#059669;color:#fff}.toggle-button.active:hover{background:linear-gradient(135deg,#059669,#047857);border-color:#047857}.toggle-button:not(.active){color:#666}.toggle-icon{font-size:18px;font-weight:700;display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:#ffffff4d}.toggle-button.active .toggle-icon{background:#ffffff40}.toggle-label{font-weight:600}.toggle-hint{color:#666;font-size:13px;display:block;margin-top:.25rem;line-height:1.4}.dark-mode .toggle-button{background:#1a1a2e66;border-color:#d4af7633;color:#d4af76e6}.dark-mode .toggle-button:hover{background:#1a1a2e99;border-color:#d4af764d}.dark-mode .toggle-button.active{background:linear-gradient(135deg,#10b981,#059669);border-color:#059669;color:#fff}.dark-mode .toggle-button.active:hover{background:linear-gradient(135deg,#059669,#047857)}.dark-mode .toggle-hint{color:#d4af76b3}.btn-primary.btn-success{background:linear-gradient(135deg,#10b981,#059669)!important;border-color:#059669!important;animation:successPulse .4s ease}@keyframes successPulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}.dark-mode .btn-primary.btn-success{background:linear-gradient(135deg,#10b981,#059669)!important;box-shadow:0 4px 12px #10b98166}.texture-dimensions-section{background:linear-gradient(135deg,#fff,#f9fafb);border:2px solid #e5e7eb;border-radius:12px;padding:20px;margin:20px 0;box-shadow:0 2px 8px #0000000d}.texture-dimensions-section>label{font-size:16px;font-weight:700;color:#1f2937;margin-bottom:8px;display:block}.field-hint{font-size:13px;color:#4b5563;margin:8px 0 16px;line-height:1.6;background:#f3f4f6;padding:12px;border-radius:8px;border-left:4px solid #6366f1}.field-hint strong{color:#1f2937;font-weight:600}.texture-size-inputs{margin-bottom:20px}.size-input-row{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}.size-input-field{display:flex;flex-direction:column;gap:4px;flex:1;min-width:100px}.size-input-field label{font-size:12px;font-weight:500;color:#6b7280;margin:0}.size-input-field input{padding:10px 12px;border:2px solid #d1d5db;border-radius:8px;font-size:16px;font-weight:600;text-align:center;transition:all .2s ease}.size-input-field input:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.size-separator{font-size:24px;font-weight:300;color:#9ca3af;padding-bottom:8px}.size-unit-field{display:flex;flex-direction:column;gap:4px;min-width:80px}.size-unit-field label{font-size:12px;font-weight:500;color:#6b7280;margin:0}.size-unit-field select{padding:10px 12px;border:2px solid #d1d5db;border-radius:8px;font-size:16px;font-weight:600;background:#fff;cursor:pointer;transition:all .2s ease}.size-unit-field select:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.texture-size-preview{background:#fff;border-radius:8px;padding:16px;box-shadow:0 2px 8px #0000001a}.preview-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;flex-wrap:wrap;gap:8px}.preview-label{font-size:14px;font-weight:600;color:#374151}.preview-hint{font-size:12px;color:#9ca3af}.preview-canvas-wrapper{position:relative;width:200px;height:200px;margin:0 auto;background:#f9fafb;border-radius:8px;overflow:hidden}.preview-canvas{display:block;width:100%;height:100%;image-rendering:auto}.preview-no-image{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#f9fafbe6;color:#9ca3af;font-size:13px}.preview-placeholder{padding:40px 20px;text-align:center;color:#9ca3af;font-size:14px}.preview-info{margin-top:12px;text-align:center}.preview-info small{font-size:12px;color:#6b7280;line-height:1.5}.dark-mode .texture-dimensions-section{background:linear-gradient(135deg,#1f2937,#111827);border-color:#374151}.dark-mode .texture-dimensions-section label{color:#818cf8}.dark-mode .field-hint{color:#9ca3af}.size-input-field label,.dark-mode .size-unit-field label{color:#d1d5db}.size-input-field input,.dark-mode .size-unit-field select{background:#1f2937;border-color:#374151;color:#f9fafb}.size-input-field input:focus,.dark-mode .size-unit-field select:focus{border-color:#818cf8;box-shadow:0 0 0 3px #818cf81a}.dark-mode .texture-size-preview{background:#1f2937;box-shadow:0 2px 8px #0000004d}.dark-mode .preview-label{color:#f9fafb}.dark-mode .preview-hint{color:#9ca3af}.dark-mode .preview-canvas-wrapper{background:#111827}.dark-mode .preview-no-image{background:#111827e6;color:#6b7280}.dark-mode .preview-placeholder{color:#6b7280}.dark-mode .preview-info small{color:#9ca3af}.toast-container{position:fixed;top:24px;right:24px;z-index:10000;display:flex;flex-direction:column;gap:12px;pointer-events:none}.toast{display:flex;align-items:center;gap:12px;min-width:300px;max-width:500px;padding:16px 20px;background:#fff;border-radius:12px;box-shadow:0 8px 24px #00000026,0 0 0 1px #0000000d;animation:slideIn .3s ease-out;pointer-events:auto;transition:all .3s ease}.toast:hover{transform:translateY(-2px);box-shadow:0 12px 32px #0003}.toast-exit{animation:slideOut .3s ease-out forwards}.toast-success{border-left:4px solid #10b981}.toast-error{border-left:4px solid #ef4444}.toast-warning{border-left:4px solid #f59e0b}.toast-info{border-left:4px solid #3b82f6}.toast-icon{font-size:24px;flex-shrink:0}.toast-message{flex:1;font-size:14px;font-weight:500;color:#111827;line-height:1.5;word-break:break-word}.toast-close{flex-shrink:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:50%;color:#6b7280;font-size:18px;cursor:pointer;transition:all .2s ease;padding:0}.toast-close:hover{background:#f3f4f6;color:#111827}@keyframes slideIn{0%{transform:translate(400px);opacity:0}to{transform:translate(0);opacity:1}}@keyframes slideOut{0%{transform:translate(0);opacity:1}to{transform:translate(400px);opacity:0}}@media (max-width: 640px){.toast-container{top:16px;right:16px;left:16px}.toast{min-width:100%;max-width:100%}}.variant-overview{padding:2rem;max-width:1600px;margin:0 auto}.overview-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:2rem}.overview-header h2{margin:0 0 .5rem;font-size:1.8rem;color:#333}.overview-subtitle{margin:0;color:#666;font-size:.95rem}.variant-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;margin-bottom:2rem}.stat-card{background:#fff;border:2px solid #e0e0e0;border-radius:12px;padding:1.5rem;text-align:center;transition:all .2s}.stat-card:hover{border-color:#667eea;box-shadow:0 4px 12px #667eea1a}.stat-card.stat-success{border-color:#4caf50;background:linear-gradient(135deg,#e8f5e9,#fff)}.stat-card.stat-error{border-color:#f44336;background:linear-gradient(135deg,#ffebee,#fff)}.stat-value{font-size:2.5rem;font-weight:700;color:#333;margin-bottom:.5rem}.stat-label{font-size:.9rem;color:#666;font-weight:500}.variant-filters{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:1rem;margin-bottom:2rem;padding:1.5rem;background:#fff;border-radius:12px;border:2px solid #e0e0e0}.filter-group label{font-size:.85rem;font-weight:600;color:#555}.filter-input,.filter-select{padding:.75rem;border:2px solid #ddd;border-radius:8px;font-size:.95rem;transition:border-color .2s}.filter-input:focus,.filter-select:focus{outline:none;border-color:#667eea}.variants-grouped{display:flex;flex-direction:column;gap:2rem}.variant-group{background:#fff;border:2px solid #e0e0e0;border-radius:12px;overflow:hidden}.group-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.group-header h3{margin:0;font-size:1.2rem}.group-count{background:#fff3;padding:.5rem 1rem;border-radius:20px;font-size:.9rem;font-weight:600}.variants-table-wrapper{overflow-x:auto}.variants-table{width:100%;border-collapse:collapse}.variants-table thead{background:#f5f5f5}.variants-table th{padding:1rem;text-align:left;font-weight:600;color:#555;font-size:.9rem;border-bottom:2px solid #e0e0e0}.variants-table td{padding:1rem;border-bottom:1px solid #f0f0f0}.variants-table tr:hover{background:#f9f9f9}.variants-table tr.inactive{opacity:.6;background:#fafafa}.status-badge{display:inline-block;padding:.4rem .8rem;border-radius:20px;font-size:.85rem;font-weight:600}.status-badge.active{background:#e8f5e9;color:#2e7d32}.status-badge.inactive{background:#ffebee;color:#c62828}.material-badge{display:inline-block;padding:.4rem .8rem;background:#fff3e0;color:#e65100;border-radius:6px;font-size:.85rem;font-weight:500}.backside-badge{display:inline-block;padding:.4rem .8rem;border-radius:6px;font-size:.85rem;font-weight:500}.backside-badge.single{background:#e3f2fd;color:#1976d2}.backside-badge.double{background:#f3e5f5;color:#7b1fa2}.geometry-badge{display:inline-block;padding:.4rem .8rem;background:#f5f5f5;color:#555;border-radius:6px;font-size:.85rem;font-weight:500}.size-badge{display:inline-block;margin-left:.25rem;padding:.2rem .5rem;background:#e3f2fd;color:#1976d2;border-radius:4px;font-size:.75rem;font-weight:600}.price-value{font-weight:600;color:#2e7d32;font-size:.95rem}.sync-status{display:inline-block;padding:.4rem .8rem;border-radius:6px;font-size:.85rem;font-weight:500}.sync-status.status-synced{background:#e8f5e9;color:#2e7d32}.sync-status.status-pending{background:#fff3e0;color:#e65100}.sync-status.status-error{background:#ffebee;color:#c62828}.sync-status.status-unknown{background:#f5f5f5;color:#757575}.sync-error{margin-top:.25rem;font-size:.75rem;color:#c62828}.variant-id{font-family:monospace;font-size:.85rem;color:#666}.product-cell{display:flex;flex-direction:column;gap:.25rem}.product-name{font-weight:500;color:#333}.empty-state{text-align:center;padding:4rem 2rem;background:#fff;border:2px dashed #e0e0e0;border-radius:12px}.empty-state p{margin:0 0 1rem;font-size:1.1rem;color:#666}.overview-footer{margin-top:2rem;padding:1rem 1.5rem;background:#f5f5f5;border-radius:8px;text-align:center}.overview-footer p{margin:0;font-size:.9rem;color:#666}.footer-warning{color:#f44336;font-weight:600}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem 2rem}.spinner{width:48px;height:48px;border:4px solid #f3f3f3;border-top:4px solid #667eea;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:1rem}.error-banner{padding:1rem 1.5rem;background:#ffebee;border:2px solid #f44336;border-radius:8px;color:#c62828;margin-bottom:1rem;font-weight:500}.btn{padding:.75rem 1.5rem;border:none;border-radius:8px;font-size:.95rem;font-weight:600;cursor:pointer;transition:all .2s}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 4px 12px #667eea4d}@media (max-width: 1200px){.variant-filters{grid-template-columns:1fr 1fr}}@media (max-width: 768px){.variant-overview{padding:1rem}.overview-header{flex-direction:column;gap:1rem}.variant-stats{grid-template-columns:repeat(2,1fr)}.variant-filters{grid-template-columns:1fr}.variants-table{font-size:.85rem}.variants-table th,.variants-table td{padding:.75rem .5rem}}.sync-overview-panel{background:linear-gradient(135deg,#eff6ff,#dbeafe);border:2px solid #3b82f6;border-radius:12px;padding:20px;margin-bottom:24px}.sync-overview-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.sync-overview-header h3{margin:0;font-size:18px;font-weight:700;color:#1e40af}.sync-summary-stats{display:flex;gap:16px}.sync-stat{padding:4px 12px;border-radius:16px;font-size:13px;font-weight:600}.sync-stat.synced{background:#d1fae5;color:#065f46}.sync-stat.issues{background:#fee2e2;color:#991b1b}.sync-overview-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.sync-direction-mini{display:flex;align-items:center;gap:8px}.sync-direction-mini label{font-size:13px;font-weight:600;color:#1e40af}.sync-direction-select{padding:6px 12px;border:1px solid #3b82f6;border-radius:6px;background:#fff;font-size:13px;cursor:pointer}.sync-empty-state{padding:24px;text-align:center;color:#6b7280;font-size:14px}.group-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}.group-title-section{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.product-sync-badge{padding:4px 12px;border-radius:16px;font-size:12px;font-weight:600;white-space:nowrap}.product-sync-badge.synced{background:#d1fae5;color:#065f46;border:1px solid #10b981}.product-sync-badge.issues{background:#fee2e2;color:#991b1b;border:1px solid #ef4444;animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}.group-actions{display:flex;gap:8px}.btn-sm{padding:6px 12px;font-size:13px;font-weight:600;border-radius:6px;border:none;cursor:pointer;transition:all .2s ease}.btn-fix{background:#3b82f6;color:#fff}.btn-fix:hover:not(:disabled){background:#2563eb;transform:translateY(-1px)}.btn-fix:disabled{background:#9ca3af;cursor:not-allowed;opacity:.5}.btn-details{background:#fff;color:#3b82f6;border:1px solid #3b82f6}.btn-details:hover{background:#eff6ff}.sync-details-panel{background:#fff;border:2px solid #e5e7eb;border-radius:8px;padding:16px;margin:12px 0}.sync-details-content{display:flex;flex-direction:column;gap:16px}.sync-direction-control{display:flex;flex-direction:column;gap:8px;padding:14px;background:linear-gradient(135deg,#f0f9ff,#e0f2fe);border:2px solid #0ea5e9;border-radius:8px}.sync-direction-control label{font-size:13px;color:#0c4a6e;margin:0}.sync-direction-control .sync-direction-select{padding:10px 14px;border:2px solid #0ea5e9;border-radius:6px;font-size:14px;font-weight:500;background:#fff;color:#0c4a6e;cursor:pointer;transition:all .2s}.sync-direction-control .sync-direction-select:hover{border-color:#0284c7;background:#f0f9ff}.sync-direction-control .sync-direction-select:focus{outline:none;border-color:#0284c7;box-shadow:0 0 0 3px #0ea5e91a}.sync-direction-hint{font-size:12px;color:#0c4a6e;font-style:italic;margin-top:4px}.sync-details-stats{display:flex;gap:16px;flex-wrap:wrap}.stat-mini{display:flex;flex-direction:column;gap:4px;padding:8px 12px;background:#f9fafb;border-radius:6px;min-width:120px}.stat-mini .label{font-size:11px;font-weight:600;color:#6b7280;text-transform:uppercase}.stat-mini .value{font-size:20px;font-weight:700;color:#111827}.stat-mini.error .value{color:#dc2626}.stat-mini.warning .value{color:#f59e0b}.sync-issues-compact{padding:12px;background:#fef2f2;border-left:4px solid #ef4444;border-radius:6px}.sync-issues-compact strong{display:block;margin-bottom:8px;color:#991b1b;font-size:13px}.sync-issues-compact ul{margin:0;padding-left:20px;color:#7f1d1d;font-size:12px}.sync-issues-compact li{margin-bottom:4px}.sync-recommendations{padding:12px;background:#eff6ff;border-left:4px solid #3b82f6;border-radius:6px}.sync-recommendations strong{display:block;margin-bottom:4px;color:#1e40af;font-size:13px}.sync-recommendations p{margin:0;color:#1e3a8a;font-size:13px}.variants-table tr.inactive{background:#f3f4f6!important;opacity:.7}.variants-table tr.inactive td{color:#6b7280;text-decoration:line-through}.variants-table tr.inactive .status-badge.inactive{background:#9ca3af;color:#fff}.variants-table tr.inactive td .action-buttons button{text-decoration:none}.variants-table tr.inactive:hover{background:#e5e7eb!important;opacity:.85}.analytics-dashboard{padding:24px;max-width:1800px;margin:0 auto;width:100%}.dashboard-header h2{margin:0 0 8px;font-size:28px;color:#1a252f}.dashboard-header .subtitle{margin:0;color:#555;font-size:14px}.time-range-selector{display:flex;gap:8px;background:#f5f5f5;padding:4px;border-radius:8px}.range-btn{padding:8px 16px;border:none;background:transparent;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;color:#444}.range-btn:hover{background:#667eea1a;color:#667eea}.range-btn.active{background:#667eea;color:#fff}.metrics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-bottom:32px}.metric-card{background:var(--app-surface, white);border:2px solid #e0e0e0;border-radius:12px;padding:20px;display:flex;gap:16px;transition:all .2s}.metric-card:hover{border-color:#667eea;box-shadow:0 4px 12px #667eea1a}.metric-icon{font-size:36px;width:56px;height:56px;display:flex;align-items:center;justify-content:center;background:#f0f2ff;border-radius:12px;flex-shrink:0}.metric-content{flex:1}.metric-label{font-size:13px;color:#555;font-weight:500;margin-bottom:4px}.metric-value{font-size:28px;font-weight:700;color:#1a252f;margin-bottom:4px}.metric-change{font-size:13px;font-weight:600;display:flex;align-items:center;gap:4px}.metric-change.positive{color:#28a745}.metric-change.negative{color:#dc3545}.metric-change.neutral{color:#999}.metric-subtitle{font-weight:400;color:#999}.analytics-section{background:var(--app-surface, white);border:2px solid #e0e0e0;border-radius:12px;padding:24px;margin-bottom:24px}.analytics-section h3{margin:0 0 20px;font-size:20px;color:#1a252f}.analytics-table{width:100%;border-collapse:collapse}.analytics-table thead{background:#f5f5f5}.analytics-table th{padding:12px 16px;text-align:left;font-size:13px;font-weight:600;color:#444;text-transform:uppercase;letter-spacing:.5px}.analytics-table td{padding:16px;border-top:1px solid #e0e0e0;font-size:14px;color:#1a252f}.analytics-table tr:hover{background:#f9f9f9}.analytics-table small{color:#999;font-size:12px}.badge{display:inline-block;padding:4px 10px;border-radius:12px;font-size:12px;font-weight:600}.badge.success{background:#d4edda;color:#155724}.badge.warning{background:#fff3cd;color:#856404}.badge.danger{background:#f8d7da;color:#721c24}.materials-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}.material-stat-card{background:#f9f9f9;border-radius:8px;padding:16px}.material-stat-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.material-name{font-weight:600;color:#1a252f;font-size:14px}.material-count{font-size:18px;font-weight:700;color:#667eea}.material-stat-bar{height:8px;background:#e0e0e0;border-radius:4px;overflow:hidden;margin-bottom:8px}.material-stat-fill{height:100%;background:#667eea;border-radius:4px;transition:width .3s ease}.material-stat-meta{font-size:12px;color:#999}.templates-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}.template-stat-card{background:#f9f9f9;border-radius:8px;padding:16px;display:flex;gap:12px;align-items:center}.template-rank{font-size:24px;font-weight:700;color:#667eea;min-width:40px}.template-thumb{width:60px;height:60px;object-fit:cover;border-radius:6px;border:2px solid #e0e0e0}.template-stat-info{flex:1}.template-stat-info strong{display:block;font-size:14px;color:#1a252f;margin-bottom:4px}.template-stat-meta{font-size:12px;color:#555;display:flex;align-items:center;gap:6px}.separator{color:#d0d0d0}.activity-timeline{display:flex;flex-direction:column;gap:16px}.activity-item{display:flex;gap:12px;padding:12px;background:#f9f9f9;border-radius:8px;transition:all .2s}.activity-item:hover{background:#f0f0f0}.activity-icon{font-size:24px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--app-surface, white);border-radius:8px;flex-shrink:0}.activity-content{flex:1}.activity-content strong{display:block;font-size:14px;color:#1a252f;margin-bottom:4px}.activity-content p{margin:0 0 4px;font-size:13px;color:#555}.activity-content small{font-size:12px;color:#999}.empty-state-small p{margin:0}.analytics-dashboard.loading,.analytics-dashboard.error{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:400px;padding:40px}.spinner{width:40px;height:40px;border:4px solid #f3f3f3;border-top:4px solid #667eea;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:16px}.error-message{text-align:center;padding:40px;color:#c33}.btn-retry{padding:10px 20px;background:#dc3545;color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:14px;margin-top:16px}.btn-retry:hover{background:#c82333}.dark-mode .dashboard-header h2{color:#d4af76f2}.dark-mode .dashboard-header .subtitle{color:#d4af76b3}.dark-mode .time-range-selector{background:#0000004d}.dark-mode .range-btn{color:#d4af76cc}.dark-mode .range-btn:hover{background:#d4af7626;color:#d4af76}.dark-mode .range-btn.active{background:#d4af764d;color:#d4af76}.dark-mode .metric-card{background:#1a1a2e99;border-color:#d4af7633}.dark-mode .metric-card:hover{border-color:#d4af7680;box-shadow:0 4px 12px #d4af7626}.dark-mode .metric-icon{background:#d4af7626}.dark-mode .metric-label{color:#d4af76bf}.dark-mode .metric-value{color:#d4af76f2}.dark-mode .metric-change.positive{color:#4caf50e6}.dark-mode .metric-change.negative{color:#ef4444e6}.dark-mode .metric-change.neutral,.dark-mode .metric-subtitle{color:#d4af7699}.dark-mode .analytics-section{background:#1a1a2e99;border-color:#d4af7633}.dark-mode .analytics-section h3{color:#d4af76f2}.dark-mode .analytics-table thead{background:#0000004d}.dark-mode .analytics-table th{color:#d4af76d9}.dark-mode .analytics-table td{border-top-color:#d4af7626;color:#d4af76e6}.dark-mode .analytics-table tr:hover{background:#d4af7614}.dark-mode .analytics-table small{color:#d4af7699}.dark-mode .badge.success{background:#4caf5040;color:#a5d6a7}.dark-mode .badge.warning{background:#ffc10740;color:#ffee58}.dark-mode .badge.danger{background:#f4433640;color:#ef9a9a}.dark-mode .material-stat-card{background:#0000004d}.dark-mode .material-count{color:#d4af76e6}.dark-mode .material-stat-bar{background:#0006}.dark-mode .material-stat-fill{background:#d4af7699}.dark-mode .material-stat-meta{color:#d4af7699}.dark-mode .template-stat-card{background:#0000004d}.dark-mode .template-rank{color:#d4af76e6}.dark-mode .template-thumb{border-color:#d4af764d}.dark-mode .template-stat-info strong{color:#d4af76f2}.dark-mode .template-stat-meta{color:#d4af76bf}.dark-mode .separator{color:#d4af764d}.dark-mode .activity-item{background:#0000004d}.dark-mode .activity-item:hover{background:#d4af761a}.dark-mode .activity-icon{background:#1a1a2ecc}.dark-mode .activity-content strong{color:#d4af76f2}.dark-mode .activity-content p{color:#d4af76cc}.dark-mode .activity-content small{color:#d4af7699}.dark-mode .empty-state-small{color:#d4af76b3}.dark-mode .analytics-dashboard.loading,.dark-mode .analytics-dashboard.error{color:#d4af76cc}.dark-mode .btn-retry{background:#f443364d;color:#ef9a9a}.dark-mode .btn-retry:hover{background:#f4433666}@media (max-width: 768px){.dashboard-header{flex-direction:column;gap:20px}.metrics-grid,.materials-grid,.templates-grid{grid-template-columns:1fr}.time-range-selector{width:100%}.range-btn{flex:1;font-size:12px;padding:8px 12px}}.shape-manager{min-height:100vh;background:linear-gradient(135deg,#f5f7fa,#c3cfe2);padding:2rem}.shape-manager-header{text-align:center;margin-bottom:3rem}.shape-manager-header h1{font-size:2.5rem;color:#2c3e50;margin-bottom:.5rem}.shape-manager-header p{font-size:1.1rem;color:#7f8c8d}.alert{padding:1rem 1.5rem;border-radius:8px;margin-bottom:1.5rem;display:flex;align-items:center;justify-content:space-between;animation:slideIn .3s ease-out}@keyframes slideIn{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.alert-error{background:#fee;border-left:4px solid #e74c3c;color:#c0392b}.alert-success{background:#efe;border-left:4px solid #27ae60;color:#229954}.alert button{background:none;border:none;font-size:1.5rem;cursor:pointer;opacity:.6;transition:opacity .2s}.alert button:hover{opacity:1}.shape-manager-content{display:flex;flex-direction:column;gap:2rem;max-width:1600px;margin:0 auto}.upload-section{display:grid;grid-template-columns:1.5fr 1fr;gap:2rem;background:#fff;border-radius:12px;padding:2rem;box-shadow:0 4px 6px #0000001a}.upload-section>*{min-width:0}.upload-section h2{font-size:1.5rem;color:#2c3e50;margin-bottom:1.5rem;display:flex;align-items:center;gap:.5rem;grid-column:span 2}.upload-form{display:flex;flex-direction:column;gap:1.5rem}.form-group{display:flex;flex-direction:column;gap:.5rem}.form-group label{font-weight:600;color:#34495e;font-size:.9rem}.file-input,.text-input,.text-area{padding:.75rem;border:2px solid #e0e0e0;border-radius:8px;font-size:1rem;transition:border-color .2s}.file-input:hover,.text-input:hover,.text-area:hover{border-color:#3498db}.file-input:focus,.text-input:focus,.text-area:focus{outline:none;border-color:#3498db;box-shadow:0 0 0 3px #3498db1a}.file-info{padding:.75rem;background:#f8f9fa;border-radius:6px;font-size:.9rem;color:#555}.checkbox-label{display:flex;align-items:center;gap:.5rem;font-weight:400!important;cursor:pointer}.btn{padding:.75rem 1.5rem;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s;display:inline-flex;align-items:center;justify-content:center;gap:.5rem}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 12px #667eea66}.btn-secondary{background:#95a5a6;color:#fff}.btn-secondary:hover{background:#7f8c8d}.btn-danger{background:#e74c3c;color:#fff}.btn-danger:hover{background:#c0392b}.btn-sm{padding:.5rem 1rem;font-size:.875rem}.info-box{padding:1.5rem;background:#e8f4f8;border-left:4px solid #3498db;border-radius:8px;align-self:start;position:sticky;top:2rem}.info-box h3{color:#2980b9;margin-bottom:1rem}.info-box ol{margin-left:1.5rem;color:#34495e;line-height:1.8}.info-box .tip{margin-top:1rem;padding:.75rem;background:#fff;border-radius:6px;font-size:.9rem;color:#555}.shapes-section{background:#fff;border-radius:12px;padding:2rem;box-shadow:0 4px 6px #0000001a}.shapes-section h2{font-size:1.5rem;color:#2c3e50;margin-bottom:1.5rem}.loading,.empty-state{text-align:center;padding:3rem;color:#7f8c8d;font-size:1.1rem}.shapes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem}.shape-card{background:#fff;border:2px solid #e0e0e0;border-radius:12px;padding:1.5rem;cursor:pointer;transition:all .2s;position:relative}.shape-card:hover{border-color:#3498db;transform:translateY(-4px);box-shadow:0 8px 16px #0000001a}.shape-card.selected{border-color:#667eea;background:#f8f9ff;box-shadow:0 0 0 3px #667eea1a}.shape-preview{width:100%;height:180px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f5f7fa,#c3cfe2);border-radius:8px;margin-bottom:1rem;overflow:hidden}.shape-preview img{max-width:90%;max-height:90%;object-fit:contain}.shape-info h3{font-size:1.1rem;color:#2c3e50;margin-bottom:.5rem}.shape-id{font-size:.75rem;color:#95a5a6;font-family:Courier New,monospace;margin-bottom:.5rem}.shape-description{font-size:.9rem;color:#7f8c8d;margin-bottom:.75rem;line-height:1.4}.shape-meta{display:flex;gap:1rem;font-size:.85rem;color:#95a5a6;margin-bottom:1rem}.shape-actions{display:flex;gap:.5rem;justify-content:flex-end}.shape-details{position:fixed;top:0;right:0;width:400px;height:100vh;background:#fff;box-shadow:-4px 0 12px #00000026;overflow-y:auto;animation:slideInRight .3s ease-out;z-index:1000}@keyframes slideInRight{0%{transform:translate(100%)}to{transform:translate(0)}}.details-header{display:flex;align-items:center;justify-content:space-between;padding:1.5rem;border-bottom:2px solid #e0e0e0;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.details-header h2{font-size:1.5rem;margin:0}.btn-close{background:none;border:none;font-size:2rem;color:#fff;cursor:pointer;opacity:.8;transition:opacity .2s;padding:0;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%}.btn-close:hover{opacity:1;background:#fff3}.details-content{padding:1.5rem}.detail-section{margin-bottom:2rem}.detail-section h3{font-size:1.1rem;color:#2c3e50;margin-bottom:1rem;border-bottom:2px solid #e0e0e0;padding-bottom:.5rem}.large-preview{width:100%;height:250px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f5f7fa,#c3cfe2);border-radius:8px;overflow:hidden}.large-preview img{max-width:90%;max-height:90%;object-fit:contain}.details-table{width:100%;border-collapse:collapse}.details-table tr{border-bottom:1px solid #f0f0f0}.details-table td{padding:.75rem 0;font-size:.9rem}.details-table td:first-child{font-weight:600;color:#7f8c8d;width:100px}.details-table code{background:#f8f9fa;padding:.25rem .5rem;border-radius:4px;font-size:.85rem;color:#e74c3c;font-family:Courier New,monospace}.clip-path-preview{display:inline-block;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dimension-list{list-style:none;padding:0}.dimension-list li{padding:.5rem;background:#f8f9fa;border-radius:6px;margin-bottom:.5rem;font-size:.9rem}.action-buttons{display:flex;flex-direction:column;gap:.75rem}.action-buttons .btn{width:100%}@media (max-width: 1200px){.upload-section{grid-template-columns:1fr}.upload-section h2{grid-column:span 1}.info-box{position:static}.shape-details{width:90%}}@media (max-width: 768px){.shape-manager{padding:1rem}.upload-section{padding:1.5rem}.shapes-grid{grid-template-columns:1fr}.shape-details{width:100%}}.storage-monitoring{max-width:1400px;margin:0 auto;padding:2rem;background:#f5f5f5;min-height:100vh}.monitoring-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;background:var(--app-surface, white);padding:1.5rem;border-radius:12px;box-shadow:0 2px 8px #0000001a}.monitoring-header h2{margin:0;font-size:1.8rem;color:#333}.btn-refresh{padding:.75rem 1.5rem;background:#d4af76;color:#fff;border:none;border-radius:8px;font-size:1rem;cursor:pointer;transition:all .3s ease}.btn-refresh:hover:not(:disabled){background:#c39c5f;transform:translateY(-2px);box-shadow:0 4px 12px #d4af7666}.monitoring-tabs{display:flex;gap:1rem;margin-bottom:2rem;background:var(--app-surface, white);padding:1rem;border-radius:12px;box-shadow:0 2px 8px #0000001a}.tab{padding:.75rem 1.5rem;background:transparent;color:#666;border:2px solid transparent;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease}.tab:hover{background:#f5f5f5;color:#333}.tab.active{background:#d4af76;color:#fff;border-color:#d4af76}.monitoring-content{background:var(--app-surface, white);padding:2rem;border-radius:12px;box-shadow:0 2px 8px #0000001a;min-height:500px}.loading-state,.error-state{text-align:center;padding:4rem 2rem}.spinner{width:50px;height:50px;margin:0 auto 1rem;border:4px solid #f3f3f3;border-top:4px solid #d4af76;border-radius:50%;animation:spin 1s linear infinite}.overview-tab h3{margin:0 0 1.5rem;font-size:1.5rem;color:#333}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem;margin-bottom:2rem}.stat-card{background:linear-gradient(135deg,#f8f8f8,#fff);padding:1.5rem;border-radius:12px;border:2px solid #e0e0e0;display:flex;align-items:center;gap:1rem;transition:all .3s ease}.stat-card:hover{transform:translateY(-4px);box-shadow:0 8px 16px #0000001a;border-color:#d4af76}.stat-card-large{grid-column:span 2}.stat-icon{font-size:2.5rem;flex-shrink:0}.stat-value{font-size:2rem;font-weight:700;color:#333;margin-bottom:.25rem}.stat-label{font-size:.9rem;color:#666;text-transform:uppercase;letter-spacing:.5px}.stat-sublabel{font-size:.85rem;color:#999;margin-top:.5rem}.stat-progress{width:100%;height:8px;background:#e0e0e0;border-radius:4px;overflow:hidden;margin-top:.75rem}.stat-progress-bar{height:100%;background:linear-gradient(90deg,#4caf50,#8bc34a);transition:width .5s ease}.stat-card.highlight-green{border-color:#4caf50;background:linear-gradient(135deg,#e8f5e9,#fff)}.stat-card.highlight-yellow{border-color:#ffc107;background:linear-gradient(135deg,#fff8e1,#fff)}.stat-card.highlight-blue{border-color:#2196f3;background:linear-gradient(135deg,#e3f2fd,#fff)}.warning-banner{padding:1rem 1.5rem;background:linear-gradient(135deg,#fff3cd,#ffebcd);border:2px solid #ffc107;border-radius:8px;color:#856404;font-size:1rem;margin-top:1.5rem}.warning-banner strong{font-weight:700}.top-users-tab h3{margin:0 0 .5rem;font-size:1.5rem;color:#333}.tab-description{color:#666;margin-bottom:1.5rem}.users-table-container{overflow-x:auto;border-radius:8px;border:1px solid #e0e0e0}.users-table{width:100%;border-collapse:collapse;font-size:.95rem}.users-table thead{background:linear-gradient(135deg,#d4af76,#c39c5f);color:#fff}.users-table th{padding:1rem;text-align:left;font-weight:600;text-transform:uppercase;letter-spacing:.5px;font-size:.85rem}.users-table tbody tr{border-bottom:1px solid #e0e0e0;transition:background .2s ease}.users-table tbody tr:hover{background:#f8f8f8}.users-table td{padding:1rem;color:#333}.user-identifier{display:flex;align-items:center;gap:.5rem}.user-badge,.session-badge{padding:.25rem .5rem;border-radius:4px;font-size:.75rem;font-weight:700}.user-badge{background:#4caf50;color:#fff}.session-badge{background:#2196f3;color:#fff}code{background:#f5f5f5;padding:.25rem .5rem;border-radius:4px;font-family:Courier New,monospace;font-size:.85rem}.cleanup-tab h3{margin:0 0 .5rem;font-size:1.5rem;color:#333}.cleanup-stats{display:flex;gap:2rem;margin-bottom:1.5rem;padding:1rem;background:#f8f8f8;border-radius:8px}.cleanup-stat{display:flex;align-items:center;gap:.5rem}.cleanup-stat-label{color:#666;font-size:.9rem}.cleanup-stat strong{font-size:1.1rem;color:#333}.cleanup-table-container{overflow-x:auto;border-radius:8px;border:1px solid #e0e0e0}.cleanup-table{width:100%;border-collapse:collapse;font-size:.95rem}.cleanup-table thead{background:linear-gradient(135deg,#333,#555);color:#fff}.cleanup-table th{padding:1rem;text-align:left;font-weight:600;text-transform:uppercase;letter-spacing:.5px;font-size:.85rem}.cleanup-table tbody tr{border-bottom:1px solid #e0e0e0;transition:background .2s ease}.cleanup-table tbody tr.status-delete{background:#ffebee}.cleanup-table tbody tr.status-warn{background:#fff8e1}.cleanup-table tbody tr:hover{opacity:.8}.cleanup-table td{padding:1rem;color:#333}.status-badge{padding:.25rem .75rem;border-radius:16px;font-size:.75rem;font-weight:700;white-space:nowrap}.empty-state{text-align:center;padding:3rem 1rem;color:#999;font-size:1.1rem}.empty-state.success{color:#4caf50}.dark-mode .storage-monitoring{background:#0f0f1980}.dark-mode .monitoring-header{background:#1a1a2e99;border:2px solid rgba(212,175,118,.2)}.dark-mode .monitoring-header h2{color:#d4af76f2}.dark-mode .btn-refresh:hover:not(:disabled){background:linear-gradient(135deg,#d4af7666,#d4af764d);box-shadow:0 4px 12px #d4af764d}.dark-mode .monitoring-tabs{background:#1a1a2e99;border:2px solid rgba(212,175,118,.2)}.dark-mode .tab{color:#d4af76b3}.dark-mode .tab:hover{background:#d4af761a;color:#d4af76f2}.dark-mode .tab.active{background:linear-gradient(135deg,#d4af764d,#d4af7633);color:#d4af76;border-color:#d4af7666}.dark-mode .monitoring-content{background:#1a1a2e99;border:2px solid rgba(212,175,118,.2)}.dark-mode .loading-state,.dark-mode .error-state{color:#d4af76cc}.dark-mode .overview-tab h3,.dark-mode .top-users-tab h3,.dark-mode .cleanup-tab h3{color:#d4af76f2}.dark-mode .tab-description{color:#d4af76b3}.dark-mode .stat-card{background:#1a1a2e99;border-color:#d4af7633}.dark-mode .stat-card:hover{border-color:#d4af7680;box-shadow:0 8px 16px #d4af7626}.dark-mode .stat-icon{opacity:.9}.dark-mode .stat-sublabel{color:#d4af7699}.dark-mode .stat-progress{background:#d4af7626}.dark-mode .stat-progress-bar{background:linear-gradient(90deg,#4caf50cc,#8bc34acc)}.dark-mode .stat-card.highlight-green{border-color:#4caf5080;background:#4caf501a}.dark-mode .stat-card.highlight-yellow{border-color:#ffc10780;background:#ffc1071a}.dark-mode .stat-card.highlight-blue{border-color:#2196f380;background:#2196f31a}.dark-mode .warning-banner{background:#ffc10726;border-color:#ffc10780;color:#ffdc78f2}.dark-mode .users-table-container,.dark-mode .cleanup-table-container{border-color:#d4af7633}.dark-mode .users-table thead{background:linear-gradient(135deg,#d4af764d,#d4af7633)}.dark-mode .users-table tbody tr{border-bottom-color:#d4af7626}.dark-mode .users-table tbody tr:hover{background:#d4af7614}.dark-mode .users-table td{color:#d4af76e6}.dark-mode .cleanup-table thead{background:linear-gradient(135deg,#d4af764d,#d4af7633)}.dark-mode .cleanup-table tbody tr{border-bottom-color:#d4af7626}.dark-mode .cleanup-table tbody tr.status-delete{background:#e74c3c26}.dark-mode .cleanup-table tbody tr.status-warn{background:#ffc10726}.dark-mode .cleanup-table td{color:#d4af76e6}.dark-mode code{background:#0000004d;color:#d4af76f2}.dark-mode .cleanup-stats{background:#1a1a2e66}.dark-mode .cleanup-stat-label{color:#d4af76b3}.dark-mode .cleanup-stat strong{color:#d4af76f2}.dark-mode .empty-state.success{color:#4caf50cc}.dark-mode .user-badge{background:#4caf50cc}.dark-mode .session-badge{background:#2196f3cc}@media (max-width: 768px){.storage-monitoring{padding:1rem}.monitoring-header{flex-direction:column;gap:1rem;text-align:center}.monitoring-tabs{flex-direction:column}.stats-grid{grid-template-columns:1fr}.stat-card-large{grid-column:span 1}.users-table,.cleanup-table{font-size:.85rem}.users-table th,.users-table td,.cleanup-table th,.cleanup-table td{padding:.75rem .5rem}.cleanup-stats{flex-direction:column;gap:1rem}}.preview-image-selector{display:flex;flex-direction:column;gap:24px;padding:16px 0}.preview-image-selector.loading,.preview-image-selector.error{text-align:center;padding:40px;color:#666}.error-message{color:#d32f2f;font-size:14px;margin:8px 0}.current-preview-section{background:#f5f5f5;padding:16px;border-radius:8px}.current-preview-section h4{margin:0 0 12px;font-size:14px;font-weight:600;color:#333}.current-preview-display{display:flex;align-items:center;justify-content:center;background:var(--app-surface, white);border:2px solid #e0e0e0;border-radius:8px;padding:16px;min-height:200px}.current-preview-display .preview-image{max-width:100%;max-height:300px;object-fit:contain;border-radius:4px}.no-preview-placeholder{display:flex;align-items:center;justify-content:center;width:100%;height:200px}.geometric-shape{background:linear-gradient(135deg,#f5e6d3,#e8d5b5);border:2px solid #C9A56E;border-radius:8px;padding:60px 80px;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:280px;min-height:200px;gap:12px}.geometric-shape span:first-child{color:#8b7355;font-size:64px;line-height:1}.geometric-shape span:last-child{color:#8b7355;font-size:16px;font-weight:500;text-align:center}.current-preview-info{margin-top:8px;font-size:12px;color:#666;text-align:center}.image-selection-section{background:var(--app-surface, white);padding:16px;border:1px solid #e0e0e0;border-radius:8px}.image-selection-section h4{margin:0 0 16px;font-size:14px;font-weight:600;color:#333}.no-images-message{text-align:center;color:#999;padding:40px 20px;font-size:14px}.images-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;margin-bottom:16px}.image-card{position:relative;border:2px solid #e0e0e0;border-radius:8px;overflow:hidden;cursor:pointer;transition:all .2s ease;background:var(--app-surface, white);aspect-ratio:1}.image-card:hover{border-color:#2196f3;box-shadow:0 2px 8px #2196f333}.image-card.selected{border-color:#2196f3;border-width:3px;box-shadow:0 4px 12px #2196f34d}.image-card img{width:100%;height:100%;object-fit:cover;display:block}.geometric-shape-preview{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(135deg,#f5e6d3,#e8d5b5);padding:20px;text-align:center;gap:8px}.geometric-shape-preview span:first-child{font-size:48px;color:#8b7355;line-height:1}.geometric-shape-preview span:nth-child(2){font-size:12px;font-weight:600;color:#8b7355}.geometric-shape-preview small{font-size:10px;color:#a08060}.image-card-footer{position:absolute;bottom:0;left:0;right:0;background:#000000b3;color:#fff;padding:4px 8px;font-size:11px;display:flex;justify-content:space-between;align-items:center}.featured-badge{background:#ffa726;color:#fff;padding:2px 6px;border-radius:3px;font-size:10px;font-weight:600;text-transform:uppercase}.image-index{font-size:10px;opacity:.8}.action-buttons{display:flex;gap:12px;margin-top:16px}.btn{padding:10px 20px;border:none;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease}.btn-primary{background:#2196f3;color:#fff}.btn-primary:hover:not(:disabled){background:#1976d2}.btn-secondary{background:#e0e0e0;color:#333}.btn-secondary:hover:not(:disabled){background:#bdbdbd}.unsaved-changes-warning{color:#ff9800;font-size:13px;margin-top:8px;font-weight:500;text-align:center}@media (max-width: 768px){.images-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:8px}.action-buttons{flex-direction:column}.btn{width:100%}}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.section-header h4{margin:0}.btn-upload-image{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;background:#667eea;color:#fff;border-radius:8px;cursor:pointer;font-size:14px;font-weight:500;transition:all .2s ease;border:none}.btn-upload-image:hover{background:#5568d3;transform:translateY(-1px);box-shadow:0 2px 8px #667eea4d}.btn-upload-primary{margin-top:16px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.no-images-message{text-align:center;padding:40px 20px;color:#666}.no-images-message p{margin-bottom:16px}@media (max-width: 768px){.section-header{flex-direction:column;align-items:flex-start;gap:12px}.btn-upload-image{width:100%;justify-content:center}}.dark-mode .preview-image-selector.loading,.dark-mode .preview-image-selector.error{color:#d4af76cc}.dark-mode .error-message{color:#ef9a9a}.dark-mode .current-preview-section{background:#0000004d}.dark-mode .current-preview-section h4{color:#d4af76f2}.dark-mode .current-preview-display{background:#1a1a2e99;border-color:#d4af7633}.dark-mode .geometric-shape{background:linear-gradient(135deg,#d4af764d,#b691584d);border-color:#d4af7680}.dark-mode .geometric-shape span{color:#d4af76f2}.dark-mode .current-preview-info{color:#d4af76b3}.dark-mode .image-selection-section{background:#1a1a2e99;border-color:#d4af7633}.dark-mode .image-selection-section h4{color:#d4af76f2}.dark-mode .no-images-message{color:#d4af76b3}.dark-mode .image-card:hover{border-color:#d4af7680;box-shadow:0 2px 8px #d4af7633}.dark-mode .image-card.selected{border-color:#d4af76cc;box-shadow:0 4px 12px #d4af764d}.dark-mode .geometric-shape-preview{background:linear-gradient(135deg,#d4af764d,#b691584d)}.dark-mode .geometric-shape-preview span{color:#d4af76f2}.dark-mode .geometric-shape-preview small{color:#d4af76bf}.dark-mode .btn-secondary:hover:not(:disabled){background:#d4af7640}.dark-mode .unsaved-changes-warning{color:#ff9800e6}.dark-mode .btn-upload-image{background:#d4af764d;color:#d4af76}.dark-mode .btn-upload-image:hover{background:#d4af7666;box-shadow:0 2px 8px #d4af764d}.geometry-size-manager{border:1px solid #e0e0e0;border-radius:6px;margin-bottom:0;overflow:visible;transition:all .2s;position:relative;background:#fff;z-index:auto}.geometry-size-manager:hover{border-color:#667eea}.size-manager-header{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;background:transparent;cursor:pointer;transition:background .2s;position:relative;z-index:1;border-radius:6px}.size-manager-header:hover{background:#f8f8f8}.header-info{display:flex;align-items:center;gap:.75rem;flex:1;min-width:0;position:relative;z-index:2}.geometry-label{font-weight:600;font-size:.9rem;color:#333}.size-count{background:#667eea;color:#fff;padding:.2rem .6rem;border-radius:10px;font-size:.8rem;font-weight:600;position:relative;z-index:3;flex-shrink:0}.btn-expand{background:none;border:none;font-size:1rem;color:#666;cursor:pointer;padding:.25rem .5rem;transition:transform .2s;flex-shrink:0;min-width:auto;width:auto;display:inline-flex;align-items:center;justify-content:center}.btn-expand:hover{color:#333}.size-manager-content{padding:1rem;background:#fff;position:relative;z-index:auto}.sizes-list{display:flex;flex-direction:column;gap:.75rem;margin-bottom:1rem}.size-item{display:flex;justify-content:space-between;align-items:center;padding:1rem;border:2px solid #e0e0e0;border-radius:8px;transition:all .2s}.size-item:hover{border-color:#667eea;box-shadow:0 2px 8px #667eea1a}.size-item.is-default{border-color:#4caf50;background:linear-gradient(135deg,#e8f5e9,#fff)}.size-info{flex:1}.size-label{font-weight:600;font-size:.95rem;color:#333;margin-bottom:.25rem;display:flex;align-items:center;gap:.5rem}.default-badge{background:#4caf50;color:#fff;padding:.2rem .6rem;border-radius:12px;font-size:.75rem;font-weight:600}.size-dimensions{font-size:.85rem;color:#666;font-family:monospace}.size-actions{display:flex;gap:.5rem}.btn-action{background:#fff;border:2px solid #e0e0e0;border-radius:6px;padding:.5rem .75rem;font-size:1rem;cursor:pointer;transition:all .2s}.btn-action:hover{transform:translateY(-2px);box-shadow:0 2px 8px #0000001a}.btn-set-default{border-color:#ffc107}.btn-set-default:hover{background:#ffc107}.btn-edit{border-color:#2196f3}.btn-edit:hover{background:#2196f3}.btn-delete{border-color:#f44336}.btn-delete:hover{background:#f44336}.btn-add-size{width:100%;padding:.75rem 1.5rem;background:#fff;border:2px dashed #667eea;border-radius:8px;color:#667eea;font-weight:600;font-size:.95rem;cursor:pointer;transition:all .2s}.btn-add-size:hover{background:#667eea;color:#fff;border-style:solid}.size-edit-modal{position:fixed;top:0;left:0;right:0;bottom:0;z-index:10000;display:flex;align-items:center;justify-content:center}.modal-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.modal-content{position:relative;background:#fff;border-radius:12px;box-shadow:0 8px 32px #0003;max-width:600px;width:90%;max-height:90vh;overflow-y:auto;z-index:10001}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem;border-bottom:2px solid #f0f0f0}.modal-header h3{margin:0;font-size:1.3rem;color:#333}.btn-close{background:none;border:none;font-size:1.5rem;color:#666;cursor:pointer;padding:.5rem;transition:color .2s}.btn-close:hover{color:#333}.modal-body{padding:1.5rem}.form-group label{display:block;font-weight:600;margin-bottom:.5rem;color:#333;font-size:.9rem}.form-control{width:100%;padding:.75rem;border:2px solid #e0e0e0;border-radius:6px;font-size:.95rem;transition:border-color .2s}.form-control:focus{outline:none;border-color:#667eea}.form-hint{display:block;margin-top:.5rem;font-size:.85rem;color:#666;line-height:1.4}.dimensions-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem}.dimension-label{display:block;font-size:.85rem;font-weight:600;margin-bottom:.5rem;color:#555}.checkbox-label{display:flex;align-items:center;gap:.75rem;cursor:pointer;font-weight:400}.modal-footer{display:flex;justify-content:flex-end;gap:1rem;padding:1.5rem;border-top:2px solid #f0f0f0}.btn{padding:.75rem 1.5rem;border:none;border-radius:6px;font-weight:600;font-size:.95rem;cursor:pointer;transition:all .2s}.btn-primary:disabled{opacity:.5;cursor:not-allowed}.btn-secondary:hover{background:#f5f5f5}@media (max-width: 768px){.modal-content{width:95%;max-height:95vh}.dimensions-grid{grid-template-columns:1fr}.size-item{flex-direction:column;align-items:flex-start;gap:1rem}.size-actions{width:100%;justify-content:flex-end}}.mapping-editor{max-width:900px;margin:0 auto;padding:20px;background:#fff;border-radius:8px;box-shadow:0 2px 12px #0000001a}.mapping-editor.loading{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:400px}.editor-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:30px;padding-bottom:20px;border-bottom:2px solid #e0e0e0}.editor-header-content{display:flex;align-items:center;gap:16px}.product-image-preview{width:60px;height:60px;object-fit:cover;border-radius:8px;border:2px solid #e0e0e0;box-shadow:0 2px 4px #0000001a}.editor-header h2{margin:0 0 8px;font-size:24px;color:#333}.editor-subtitle{margin:0;color:#666;font-size:14px}.btn-close{padding:8px 12px;background:#f5f5f5;border:none;border-radius:4px;cursor:pointer;font-size:18px;color:#666;transition:all .2s}.btn-close:hover{background:#e0e0e0;color:#333}.error-banner{padding:12px 16px;margin-bottom:20px;background:#ffebee;color:#c62828;border-radius:4px;border-left:4px solid #c62828}.editor-form{margin-bottom:30px}.form-section{margin-bottom:30px;padding:20px;background:#f8f9fa;border-radius:6px}.form-section h3{margin:0 0 8px;font-size:18px;color:#333}.section-hint{margin:0 0 20px;font-size:13px;color:#666}.form-group label{display:block;margin-bottom:6px;font-size:14px;font-weight:600;color:#555}.form-control{width:100%;padding:10px 12px;border:1px solid #d0d0d0;border-radius:4px;font-size:14px;font-family:inherit;transition:border-color .2s}.form-control:focus{outline:none;border-color:#5c6ac4;box-shadow:0 0 0 2px #5c6ac41a}textarea.form-control{resize:vertical;min-height:80px}.form-hint{display:block;margin-top:4px;font-size:12px;color:#888}.dimensions-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px}.materials-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px;margin-bottom:16px}.material-card{position:relative;padding:12px;background:var(--app-surface, #fff);border:2px solid #e0e0e0;border-radius:8px;cursor:pointer;transition:all .2s;text-align:center;display:flex;flex-direction:column;gap:8px;min-height:200px}.material-card:hover{border-color:#5c6ac4;box-shadow:0 2px 8px #0000001a}.material-card.selected{border-color:#5c6ac4;background:#f0f2ff}.material-image{width:100%;height:120px;object-fit:cover;border-radius:6px;box-shadow:0 2px 4px #0000001a}.material-color{width:100%;height:120px;border-radius:6px}.material-name{font-size:15px;font-weight:600;color:#333;margin:0;line-height:1.3;flex-grow:1}.material-selected-badge{display:flex;align-items:center;gap:6px;padding:6px 12px;background:linear-gradient(135deg,#5c6ac4,#4c5ab8);color:#fff;border-radius:20px;font-size:13px;font-weight:600;margin-top:auto;box-shadow:0 2px 4px #5c6ac44d}.material-selected-badge svg{flex-shrink:0}.template-list{display:flex;flex-direction:column;gap:8px;padding:12px;background:var(--app-surface, #fff);border-radius:4px;border:1px solid #e0e0e0;max-height:200px;overflow-y:auto}.template-item label{display:flex;align-items:center;gap:8px;padding:6px;cursor:pointer;font-weight:400;transition:background .2s}.template-item label:hover{background:#f5f5f5;border-radius:4px}.template-item input[type=checkbox]{width:16px;height:16px;cursor:pointer}.editor-actions{display:flex;justify-content:flex-end;gap:12px;padding-top:20px;border-top:2px solid #e0e0e0}.btn{padding:10px 20px;font-size:14px;font-weight:600;border:none;border-radius:4px;cursor:pointer;transition:all .2s}.btn-primary:hover:not(:disabled){background:#4c59b3}.btn-secondary{background:#f5f5f5;color:#333}.btn-secondary:hover:not(:disabled){background:#e0e0e0}.step-number{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-radius:50%;font-size:14px;font-weight:700;margin-right:10px;flex-shrink:0}.form-section h3{display:flex;align-items:center}.geometry-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:16px;margin-top:12px}.geometry-card{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px 16px;background:var(--app-surface, white);border:2px solid #e0e0e0;border-radius:12px;cursor:pointer;transition:all .2s ease;text-align:center}.geometry-card:hover{border-color:#667eea;transform:translateY(-2px);box-shadow:0 4px 12px #667eea26}.geometry-card.selected{border-color:#667eea;background:linear-gradient(135deg,#667eea14,#764ba214);box-shadow:0 4px 12px #667eea33}.geometry-icon{font-size:36px;margin-bottom:8px;line-height:1}.geometry-name{font-size:14px;font-weight:600;color:#333}.geometry-card.selected .geometry-name{color:#667eea}.advanced-settings{margin-bottom:30px}.advanced-settings-toggle{display:block;padding:16px 20px;background:#f8f9fa;border-radius:8px;cursor:pointer;font-size:16px;font-weight:600;color:#555;transition:all .2s}.advanced-settings-toggle:hover{background:#e9ecef}.advanced-settings[open] .advanced-settings-toggle{border-radius:8px 8px 0 0;margin-bottom:0}.advanced-settings[open]>.form-section:first-of-type{border-radius:0 0 8px 8px;margin-top:0}.section-header-pro{display:flex;align-items:center;gap:12px;margin-bottom:8px}.section-header-pro h3{margin:0}.pro-badge{padding:3px 8px;background:linear-gradient(135deg,#f093fb,#f5576c);color:#fff;font-size:10px;font-weight:700;text-transform:uppercase;border-radius:4px;letter-spacing:.5px}.dimension-preview{margin-top:1rem;padding:1rem;background:var(--app-hover-bg, #f5f5f5);border-radius:8px;text-align:center}.step-hint{margin-top:1rem;padding:1rem;background:#667eea1a;border-radius:8px;text-align:center;color:#667eea;font-weight:500}.material-price-default{font-size:13px;color:#1565c0;margin-top:6px;font-weight:600;background:#e3f2fd;padding:4px 8px;border-radius:4px;display:inline-block}.material-hint{display:block;font-size:11px;color:#9ca3af;margin-top:6px;font-style:italic}.dark-mode .mapping-editor{background:#1a1a2e99;border-color:#d4af7633;box-shadow:0 2px 12px #0006}.dark-mode .editor-header{border-bottom-color:#d4af7633}.dark-mode .editor-header h2{color:#d4af76f2}.dark-mode .editor-subtitle{color:#d4af76b3}.dark-mode .product-image-preview{border-color:#d4af764d}.dark-mode .btn-close{background:#d4af761a;color:#d4af76e6}.dark-mode .btn-close:hover{background:#d4af7633;color:#d4af76}.dark-mode .error-banner{background:#f4433626;border-color:#ef9a9a66;color:#ef9a9a}.dark-mode .form-section{background:#0003}.dark-mode .form-section h3{color:#d4af76f2}.dark-mode .section-hint{color:#d4af76b3}.dark-mode .form-control:focus{border-color:#d4af7699;box-shadow:0 0 0 2px #d4af7633}.dark-mode .material-card{background:#1a1a2e99;border-color:#d4af7633}.dark-mode .material-card:hover{border-color:#d4af7680;box-shadow:0 2px 8px #d4af7633}.dark-mode .material-card.selected{border-color:#d4af76b3;background:#d4af7626}.dark-mode .material-name{color:#d4af76f2}.dark-mode .material-price-default{color:#d4af76b3}.dark-mode .material-hint{color:#d4af7680}.dark-mode .template-list{background:#0000004d;border-color:#d4af7633}.dark-mode .template-item label:hover{background:#d4af761a}.dark-mode .editor-actions{border-top-color:#d4af7633}.dark-mode .btn-primary{background:#d4af764d;color:#d4af76}.dark-mode .btn-primary:hover:not(:disabled){background:#d4af7666}.dark-mode .btn-secondary{background:#d4af761a;color:#d4af76e6}.dark-mode .btn-secondary:hover:not(:disabled){background:#d4af7633}.dark-mode .geometry-card{background:#1a1a2e99;border-color:#d4af7633}.dark-mode .geometry-card:hover{border-color:#d4af7680;box-shadow:0 4px 12px #d4af7633}.dark-mode .geometry-card.selected{border-color:#d4af76b3;background:#d4af7626}.dark-mode .geometry-name{color:#d4af76f2}.dark-mode .geometry-card.selected .geometry-name{color:#d4af76}.dark-mode .advanced-settings-toggle{background:#0003;color:#d4af76e6}.dark-mode .advanced-settings-toggle:hover{background:#0000004d}.dark-mode .dimension-preview{background:#0000004d;color:#d4af76e6}.dark-mode .step-hint{background:#d4af7626;color:#d4af76f2}.dark-mode .toggle-button-container{background:#1a1a2e99;border-color:#d4af7633}.dark-mode .toggle-button-container:hover{border-color:#d4af7680}.dark-mode .toggle-button-container.active{border-color:#d4af76b3;background:#d4af7626}.dark-mode .toggle-label-content .label-title{color:#d4af76f2}.dark-mode .toggle-label-content .label-description{color:#d4af76b3}.dark-mode .toggle-status-badge.inactive{background:#d4af761a;color:#d4af7699}.toggle-button-container{display:flex;align-items:center;gap:16px;padding:16px;background:var(--app-surface, white);border:2px solid #e0e0e0;border-radius:8px;transition:all .2s}.toggle-button-container:hover{border-color:#5c6ac4}.toggle-button-container.active{border-color:#5c6ac4;background:#f0f2ff}.toggle-switch{position:relative;width:56px;height:28px;flex-shrink:0}.toggle-switch input[type=checkbox]{opacity:0;width:0;height:0;position:absolute}.toggle-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;transition:.3s;border-radius:28px;box-shadow:inset 0 1px 3px #0003}.toggle-slider:before{position:absolute;content:"";height:22px;width:22px;left:3px;bottom:3px;background-color:#fff;transition:.3s;border-radius:50%;box-shadow:0 2px 4px #0003}.toggle-switch input:checked+.toggle-slider{background:linear-gradient(135deg,#667eea,#764ba2)}.toggle-switch input:checked+.toggle-slider:before{transform:translate(28px)}.toggle-switch input:focus+.toggle-slider{box-shadow:inset 0 1px 3px #0003,0 0 0 3px #667eea33}.toggle-label-content{flex:1;display:flex;flex-direction:column;gap:4px}.toggle-label-content .label-title{font-size:15px;font-weight:600;color:#333;margin:0}.toggle-label-content .label-description{font-size:13px;color:#666;margin:0;line-height:1.4}.toggle-status-badge{padding:4px 12px;border-radius:4px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.toggle-status-badge.active{background:linear-gradient(135deg,#667eea26,#764ba226);color:#667eea}.toggle-status-badge.inactive{background:#f5f5f5;color:#999}@media (max-width: 768px){.mapping-editor{padding:15px}.dimensions-grid{grid-template-columns:1fr}.materials-grid{grid-template-columns:repeat(auto-fill,minmax(120px,140px))}.geometry-cards{grid-template-columns:repeat(2,1fr);gap:12px}.geometry-card{padding:16px 12px}.geometry-icon{font-size:28px}.geometry-name{font-size:12px}.editor-actions{flex-direction:column-reverse}.btn{width:100%}}.structured-pricing-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:10000;padding:20px}.structured-pricing-modal{background:#fff;border-radius:16px;width:100%;max-width:900px;max-height:90vh;display:flex;flex-direction:column;box-shadow:0 20px 60px #0000004d;animation:slideUp .3s ease-out}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.structured-pricing-modal .modal-header{padding:24px 28px;border-bottom:2px solid #f0f0f0;display:flex;justify-content:space-between;align-items:flex-start}.structured-pricing-modal .modal-header h2{margin:0 0 4px;font-size:1.5rem;color:#1a1a1a;font-weight:700}.structured-pricing-modal .modal-subtitle{margin:0;font-size:.95rem;color:#666;font-weight:500}.structured-pricing-modal .modal-close-btn{background:none;border:none;font-size:1.8rem;color:#999;cursor:pointer;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:8px;transition:all .2s}.structured-pricing-modal .modal-close-btn:hover{background:#f5f5f5;color:#333}.structured-pricing-modal .modal-content{flex:1;overflow-y:auto;padding:24px 28px}.structured-pricing-modal .modal-loading,.structured-pricing-modal .modal-error{padding:60px 20px;text-align:center}.structured-pricing-modal .spinner{width:48px;height:48px;border:4px solid #f0f0f0;border-top-color:#667eea;border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 16px}.sync-status-banner{display:flex;gap:16px;padding:16px 20px;border-radius:12px;margin-bottom:24px;border-left:4px solid;animation:slideIn .3s ease-out}.sync-status-banner.in-sync{background:linear-gradient(135deg,#d4edda,#c3e6cb);border-left-color:#28a745}.sync-status-banner.out-of-sync{background:linear-gradient(135deg,#fff3cd,#ffe5a0);border-left-color:#ffc107}.sync-status-banner.unknown{background:linear-gradient(135deg,#f8d7da,#f5c6cb);border-left-color:#dc3545}@keyframes slideIn{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}.sync-icon{font-size:2rem;flex-shrink:0}.sync-message strong{display:block;color:#1a1a1a;font-size:1.05rem;margin-bottom:2px}.sync-message p{margin:0;color:#555;line-height:1.5}.info-banner{display:flex;gap:16px;padding:16px 20px;background:linear-gradient(135deg,#e3f2fd,#f3e5f5);border-radius:12px;border-left:4px solid #667eea;margin-bottom:32px}.info-banner .info-icon{font-size:2rem;flex-shrink:0}.info-banner strong{display:block;color:#1a1a1a;font-size:1.05rem;margin-bottom:6px}.info-banner p{margin:0 0 4px;color:#555;font-size:.9rem;line-height:1.6}.info-banner code{background:#667eea26;padding:2px 8px;border-radius:4px;font-family:Courier New,monospace;font-size:.85rem;color:#667eea;font-weight:600}.pricing-section{margin-bottom:32px;padding-bottom:32px;border-bottom:2px solid #f5f5f5}.pricing-section:last-of-type{border-bottom:none;padding-bottom:0}.pricing-section h3{margin:0 0 8px;font-size:1.25rem;color:#1a1a1a;font-weight:700}.pricing-section .section-description{margin:0 0 20px;color:#666;font-size:.9rem;line-height:1.5}.price-input-large{display:flex;align-items:center;gap:12px;max-width:300px}.price-input-large input{flex:1;padding:14px 16px;font-size:1.5rem;font-weight:700;border:2px solid #e0e0e0;border-radius:10px;transition:all .2s;text-align:right}.price-input-large input:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.price-input-large .currency{font-size:1.5rem;font-weight:700;color:#667eea}.pricing-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}.pricing-item{background:#f8f9fa;padding:16px;border-radius:12px;border:2px solid transparent;transition:all .2s;display:flex;flex-direction:column}.pricing-item:hover{border-color:#667eea;background:#fff}.item-label{display:block;font-weight:600;color:#1a1a1a;font-size:1rem;text-transform:capitalize;margin-bottom:12px;min-height:24px;line-height:1.4;word-break:break-word;padding:4px 0;width:100%}.size-label{display:flex;flex-direction:column;gap:4px;margin-bottom:12px;min-height:64px;width:100%}.size-name{font-weight:600;color:#1a1a1a;font-size:1rem;text-transform:capitalize;display:block;line-height:1.4}.size-dimensions{font-size:.85rem;color:#666;font-weight:500;font-family:Courier New,monospace}.geometry-badge{display:inline-block;padding:3px 10px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;font-size:.75rem;font-weight:600;border-radius:12px;text-transform:uppercase;letter-spacing:.5px;margin-top:2px;align-self:flex-start}.size-count{margin-left:8px;font-size:.85rem;color:#999;font-weight:400}.price-input-group{display:flex;align-items:center;gap:8px}.price-input-group input{flex:1;padding:10px 12px;font-size:1.1rem;font-weight:600;border:2px solid #e0e0e0;border-radius:8px;transition:all .2s;text-align:right}.price-input-group input:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.price-input-group .currency{font-size:1.1rem;font-weight:600;color:#667eea}.price-preview{margin-top:10px;font-size:.9rem;color:#667eea;font-weight:600;text-align:right;padding-top:8px;border-top:1px solid #e0e0e0}.preview-section{background:linear-gradient(135deg,#fff9e6,#ffe6f0);padding:24px!important;border-radius:12px;border:2px solid #ffd700}.price-examples{display:flex;flex-direction:column;gap:16px}.price-example{background:#fff;padding:16px 20px;border-radius:10px;border:2px solid #e0e0e0;transition:all .2s}.price-example:hover{border-color:#667eea;box-shadow:0 4px 12px #0000001a}.price-example.highlight{background:linear-gradient(135deg,#fff,#f0f4ff);border-color:#667eea;border-width:3px}.example-config{font-size:1.05rem;color:#333;margin-bottom:8px}.example-config strong{color:#667eea;text-transform:capitalize}.example-calculation{font-size:.9rem;color:#666;font-family:Courier New,monospace;margin-bottom:8px;padding:8px 12px;background:#f8f9fa;border-radius:6px}.example-total{font-size:1.2rem;color:#27ae60;text-align:right}.example-total strong{font-weight:700}.structured-pricing-modal .modal-footer{padding:20px 28px;border-top:2px solid #f0f0f0;display:flex;justify-content:flex-end;gap:12px}.structured-pricing-modal .btn-cancel,.structured-pricing-modal .btn-save{padding:12px 28px;border-radius:8px;font-size:1rem;font-weight:600;border:none;cursor:pointer;transition:all .2s}.structured-pricing-modal .btn-cancel{background:#f5f5f5;color:#666}.structured-pricing-modal .btn-cancel:hover:not(:disabled){background:#e0e0e0;color:#333}.structured-pricing-modal .btn-save{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.structured-pricing-modal .btn-save:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 20px #667eea66}.structured-pricing-modal .btn-save:disabled,.structured-pricing-modal .btn-cancel:disabled{opacity:.5;cursor:not-allowed}.btn-retry{padding:10px 24px;background:#667eea;color:#fff;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s;margin-top:16px}.btn-retry:hover{background:#5568d3;transform:translateY(-2px)}.result-dialog-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:100000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.result-dialog{background:#fff;border-radius:16px;box-shadow:0 20px 60px #0000004d;max-width:600px;width:90%;max-height:80vh;overflow:hidden;display:flex;flex-direction:column}.result-header{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:24px;text-align:center}.result-header h3{margin:0;font-size:1.5rem;font-weight:700}.result-content{padding:24px;overflow-y:auto;flex:1}.result-summary{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px}.result-stat{background:#f8f9fa;padding:16px;border-radius:12px;text-align:center;border:2px solid transparent}.result-stat.success{border-color:#28a745;background:linear-gradient(135deg,#d4edda,#c3e6cb)}.result-stat.failed{border-color:#dc3545;background:linear-gradient(135deg,#f8d7da,#f5c6cb)}.stat-label{display:block;font-size:.9rem;color:#666;margin-bottom:8px;font-weight:600}.stat-value{display:block;font-size:2rem;font-weight:700;color:#1a1a1a}.result-success-details{margin-top:20px;border-top:2px solid #e0e0e0;padding-top:20px}.result-success-details h4{margin:0 0 12px;font-size:1rem;color:#28a745}.success-list{display:flex;flex-direction:column;gap:8px;max-height:200px;overflow-y:auto;margin-bottom:8px}.success-item{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:#f0f8f4;border-radius:6px;border-left:3px solid #28a745}.success-info{font-size:.9rem;color:#333}.success-price{font-weight:600;color:#28a745;font-size:.95rem}.more-info{text-align:center;color:#666;font-size:.85rem;font-style:italic;padding:4px}.result-errors{margin-top:24px;border-top:2px solid #e0e0e0;padding-top:24px}.result-errors h4{margin:0 0 16px;font-size:1.1rem;color:#dc3545}.error-list{display:flex;flex-direction:column;gap:12px;max-height:300px;overflow-y:auto}.error-item{background:#fff5f5;border:2px solid #dc3545;border-radius:8px;padding:12px}.error-variant{font-size:.9rem;color:#666;margin-bottom:8px}.error-details{font-size:.9rem;line-height:1.6}.error-details code{background:#f8d7da;padding:2px 6px;border-radius:4px;font-family:Courier New,monospace;color:#721c24;display:inline-block;margin-top:4px}.result-footer{padding:20px 24px;border-top:2px solid #e0e0e0;display:flex;gap:12px;justify-content:center;align-items:center}.btn-copy-report{padding:12px 24px;background:#28a745;color:#fff;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s}.btn-copy-report:hover{background:#218838;transform:translateY(-2px)}.btn-close-dialog{padding:12px 32px;background:#667eea;color:#fff;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s}.btn-close-dialog:hover{background:#5568d3;transform:translateY(-2px)}@media (max-width: 768px){.structured-pricing-modal{max-width:100%;max-height:100vh;border-radius:0}.pricing-grid{grid-template-columns:1fr}.price-input-large{max-width:100%}.result-dialog{width:95%;max-height:90vh}.result-summary{grid-template-columns:1fr}}.confirm-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:10000;animation:fadeIn .2s ease-in-out}.confirm-modal{background:#fff;border-radius:12px;box-shadow:0 20px 60px #0000004d;max-width:500px;width:90%;max-height:80vh;overflow:hidden;animation:slideUp .3s ease-out}.confirm-modal-header{padding:1.5rem;border-bottom:1px solid #e5e7eb;display:flex;align-items:center;gap:1rem}.confirm-modal-header.confirm{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff}.confirm-modal-header.success{background:linear-gradient(135deg,#10b981,#059669);color:#fff}.confirm-modal-header.error{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff}.confirm-modal-header.alert{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff}.confirm-modal-header.info{background:linear-gradient(135deg,#6366f1,#4f46e5);color:#fff}.confirm-modal-icon{font-size:1.75rem;line-height:1}.confirm-modal-title{margin:0;font-size:1.25rem;font-weight:600}.confirm-modal-body{padding:1.5rem;max-height:400px;overflow-y:auto}.confirm-modal-message{margin:0;color:#374151;font-size:1rem;line-height:1.6;white-space:pre-line}.confirm-modal-footer{padding:1rem 1.5rem;border-top:1px solid #e5e7eb;display:flex;gap:.75rem;justify-content:flex-end;background:#f9fafb}.modal-btn{padding:.625rem 1.5rem;border:none;border-radius:6px;font-weight:500;font-size:.95rem;cursor:pointer;transition:all .2s;min-width:100px}.modal-btn-cancel{background:#fff;color:#374151;border:1px solid #d1d5db}.modal-btn-cancel:hover{background:#f9fafb;border-color:#9ca3af}.modal-btn-confirm{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;box-shadow:0 2px 8px #3b82f64d}.modal-btn-confirm:hover{background:linear-gradient(135deg,#2563eb,#1d4ed8);box-shadow:0 4px 12px #3b82f666;transform:translateY(-1px)}.dark-mode .confirm-modal{background:#1f2937}.dark-mode .confirm-modal-header{border-bottom-color:#374151}.dark-mode .confirm-modal-body{color:#e5e7eb}.dark-mode .confirm-modal-message{color:#d1d5db}.dark-mode .confirm-modal-footer{background:#111827;border-top-color:#374151}.dark-mode .modal-btn-cancel{background:#374151;color:#e5e7eb;border-color:#4b5563}.dark-mode .modal-btn-cancel:hover{background:#4b5563;border-color:#6b7280}@media (max-width: 640px){.confirm-modal{width:95%;margin:1rem}.confirm-modal-footer{flex-direction:column}.modal-btn{width:100%;min-width:unset}}.product-browser{padding:20px;background:var(--app-surface, #fff);border-radius:8px;box-shadow:0 2px 8px #0000001a}.product-browser-header{margin-bottom:30px;padding-bottom:20px;border-bottom:2px solid #e0e0e0}.product-browser-header h2{margin:0 0 8px;font-size:24px;color:#333}.header-subtitle{margin:0;color:#666;font-size:14px}.product-browser-filters{margin-bottom:24px;padding:16px;background:#f8f9fa;border-radius:6px}:root:not(.dark-mode) .search-input,:root:not(.dark-mode) .filter-select{padding:8px 12px;border:1px solid #d0d0d0;border-radius:4px;font-size:14px;min-width:180px;background:#fff;color:#1a202c}:root:not(.dark-mode) .search-input{min-width:300px;flex:1}:root:not(.dark-mode) .search-input:focus,:root:not(.dark-mode) .filter-select:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea26}:root:not(.dark-mode) .search-input::placeholder{color:#a0aec0}.search-input,.filter-select{padding:8px 12px;border:1px solid #d0d0d0;border-radius:4px;font-size:14px;min-width:180px;background:#fff;color:#1a202c}.search-input:focus,.filter-select:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea26}.filter-stats{display:flex;gap:20px;padding-top:12px;border-top:1px solid #e0e0e0;font-size:13px;color:#666}.stat-item strong{color:#333;font-weight:600}.quick-filters{display:flex;gap:8px;flex-wrap:wrap}.quick-filter-btn{padding:6px 12px;border:1px solid #d0d0d0;border-radius:4px;background:#fff;font-size:13px;cursor:pointer;transition:all .2s ease;white-space:nowrap}.quick-filter-btn:hover{background:#f0f0f0;border-color:#b0b0b0}.quick-filter-btn.active{background:#5c6ac4;color:#fff;border-color:#5c6ac4;font-weight:600}.quick-filter-btn.active:hover{background:#4c5ab4;border-color:#4c5ab4}.stat-item.stat-mapped strong{color:#2196f3}.stat-item.stat-enabled strong{color:#4caf50}.stat-item.stat-configured strong{color:#9c27b0}.loading-state,.error-state{padding:60px 20px;text-align:center}.spinner{width:40px;height:40px;margin:0 auto 16px;border:3px solid #f3f3f3;border-top:3px solid #5c6ac4;border-radius:50%;animation:spin 1s linear infinite}.error-state{color:#d72c0d}.btn-retry{margin-top:12px;padding:8px 16px;background:#5c6ac4;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:14px}.btn-retry:hover{background:#4c59b3}.products-table-container{overflow-x:auto;margin-bottom:20px}.products-table{width:100%;border-collapse:collapse;background:var(--app-surface, #fff)}.products-table thead{background:#f5f6f7;border-bottom:2px solid #e0e0e0}.products-table th{padding:12px;text-align:left;font-size:12px;font-weight:600;color:#555;text-transform:uppercase;white-space:nowrap}.products-table td{padding:12px;border-bottom:1px solid #f0f0f0;font-size:14px}.product-row:hover{background:#f9fafb}.product-image-cell{width:60px}.product-thumbnail{width:50px;height:50px;object-fit:cover;border-radius:4px;border:1px solid #e0e0e0}.product-thumbnail-placeholder{width:50px;height:50px;display:flex;align-items:center;justify-content:center;background:#f5f5f5;border-radius:4px;font-size:24px}.product-title{font-weight:600;color:#333;margin-bottom:4px}.product-type{font-size:12px;color:#555}.product-handle-cell code{font-size:12px;padding:2px 6px;background:#f5f5f5;border-radius:3px;color:#444}.badge{display:inline-block;padding:5px 12px;font-size:12px;font-weight:700;border-radius:12px;white-space:nowrap;border:1px solid transparent}.badge-success{background:#d4edda;color:#155724;border-color:#c3e6cb}.badge-default{background:#e2e3e5;color:#383d41;border-color:#d6d8db}.status-badge{display:inline-block;padding:5px 12px;font-size:11px;font-weight:700;border-radius:12px;text-transform:uppercase;border:1px solid transparent}.status-active{background:#2e7d32;color:#fff;font-weight:700}.status-draft{background:#fff3cd;color:#856404;border-color:#ffeeba}.status-archived{background:#e2e3e5;color:#383d41;border-color:#d6d8db}.status-deleted{background:#f8d7da;color:#721c24;border-color:#f5c6cb}.toggle-switch{position:relative;display:inline-block;width:44px;height:24px}.toggle-switch input{opacity:0;width:0;height:0}.toggle-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;transition:.3s;border-radius:24px}.toggle-slider:before{position:absolute;content:"";height:18px;width:18px;left:3px;bottom:3px;background-color:#fff;transition:.3s;border-radius:50%}input:checked+.toggle-slider{background-color:#5c6ac4}input:checked+.toggle-slider:before{transform:translate(20px)}input:disabled+.toggle-slider{opacity:.4;cursor:not-allowed}.action-buttons{display:flex;gap:8px}.btn-action{padding:6px 12px;font-size:13px;border:none;border-radius:4px;cursor:pointer;font-weight:500;transition:all .2s}.btn-primary{background:#5c6ac4;color:#fff}.btn-primary:hover{background:#4c59b3}.btn-danger{background:#d72c0d;color:#fff}.btn-danger:hover{background:#b71f0d}.empty-state{padding:60px 20px;text-align:center;color:#555}.empty-state p{margin:8px 0}.empty-subtitle{font-size:13px;color:#777}.pagination{display:flex;justify-content:center;align-items:center;gap:20px;padding:20px;border-top:1px solid #e0e0e0}.pagination-btn{padding:8px 16px;background:#5c6ac4;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:14px;font-weight:500}.pagination-btn:hover:not(:disabled){background:#4c59b3}.pagination-btn:disabled{background:#ccc;cursor:not-allowed}.pagination-info{font-size:14px;color:#666;font-weight:500}.dark-mode .product-browser{background:#1a1a2e99;box-shadow:0 2px 8px #0000004d}.dark-mode .product-browser-header{border-bottom-color:#d4af7633}.dark-mode .product-browser-header h2{color:#d4af76f2}.dark-mode .header-subtitle{color:#d4af76b3}.dark-mode .product-browser-filters{background:#0003}.dark-mode .search-input:focus,.dark-mode .filter-select:focus{border-color:#d4af7699;box-shadow:0 0 0 2px #d4af7633}.dark-mode .filter-stats{border-top-color:#d4af7633;color:#d4af76b3}.dark-mode .stat-item strong{color:#d4af76f2}.dark-mode .products-table{background:#0003}.dark-mode .products-table thead{background:#0000004d;border-bottom-color:#d4af7633}.dark-mode .products-table th{color:#d4af76e6}.dark-mode .products-table td{border-bottom-color:#d4af761a;color:#d4af76d9}.dark-mode .product-row:hover{background:#d4af7614}.dark-mode .product-thumbnail{border-color:#d4af764d}.dark-mode .product-thumbnail-placeholder{background:#0000004d}.dark-mode .product-title{color:#d4af76f2}.dark-mode .product-type{color:#d4af76b3}.dark-mode .product-handle-cell code{background:#0000004d;color:#d4af76d9}.dark-mode .badge-success{background:#4caf5040;color:#a5d6a7;border-color:#4caf5066}.dark-mode .badge-default{background:#d4af7633;color:#d4af76f2;border-color:#d4af764d}.dark-mode .status-active{background:#4caf5040;color:#a5d6a7;border-color:#4caf5066}.dark-mode .status-draft{background:#ffc10740;color:#ffee58;border-color:#ffc10766}.dark-mode .status-archived{background:#d4af7633;color:#d4af76e6;border-color:#d4af764d}.dark-mode .status-deleted{background:#f4433640;color:#ef9a9a;border-color:#f4433666}.dark-mode .toggle-slider{background-color:#d4af764d}.dark-mode input:checked+.toggle-slider{background-color:#d4af7699}.dark-mode .empty-subtitle{color:#d4af7699}.dark-mode .pagination{border-top-color:#d4af7633}.dark-mode .pagination-btn{background:#d4af764d;color:#d4af76}.dark-mode .pagination-btn:hover:not(:disabled){background:#d4af7666}.dark-mode .pagination-btn:disabled{background:#d4af7626;color:#d4af7680}.dark-mode .pagination-info{color:#d4af76cc}.dark-mode .error-state{color:#ef9a9a}.header-title-row{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}.header-actions{display:flex;gap:12px;align-items:center}.btn-sync-products{padding:10px 20px;background:linear-gradient(135deg,#43a047,#2e7d32);color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s;white-space:nowrap}.btn-sync-products:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px #43a04766}.btn-sync-products:disabled{opacity:.6;cursor:not-allowed}.btn-create-product{padding:10px 20px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s;white-space:nowrap}.btn-create-product:hover{transform:translateY(-1px);box-shadow:0 4px 12px #667eea4d}.create-product-form{margin-bottom:24px;padding:24px;background:linear-gradient(135deg,#667eea14,#764ba214);border:2px solid rgba(102,126,234,.2);border-radius:12px}.create-product-form h3{margin:0 0 8px;font-size:18px;color:#333}.create-product-form .form-hint{margin:0 0 20px;font-size:13px;color:#666}.form-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin-bottom:20px}.form-grid .form-group{display:flex;flex-direction:column;gap:6px}.form-grid .form-group.full-width{grid-column:1 / -1}.form-grid .form-group label{font-size:13px;font-weight:600;color:#555}.form-grid .form-group input,.form-grid .form-group select,.form-grid .form-group textarea{padding:10px 12px;border:1px solid #d0d0d0;border-radius:6px;font-size:14px;font-family:inherit;transition:border-color .2s,box-shadow .2s}.form-grid .form-group input:focus,.form-grid .form-group select:focus,.form-grid .form-group textarea:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea26}.form-grid .form-group textarea{resize:vertical;min-height:80px}.form-actions{display:flex;justify-content:flex-end;gap:12px;padding-top:16px;border-top:1px solid rgba(102,126,234,.2)}.form-actions .btn-secondary{padding:10px 20px;background:#f5f5f5;color:#333;border:1px solid #d0d0d0;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s}.form-actions .btn-secondary:hover:not(:disabled){background:#e8e8e8}.form-actions .btn-primary{padding:10px 20px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:6px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s}.form-actions .btn-primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px #667eea4d}.form-actions .btn-primary:disabled,.form-actions .btn-secondary:disabled{opacity:.6;cursor:not-allowed;transform:none}.dark-mode .btn-sync-products{background:linear-gradient(135deg,#43a047b3,#2e7d32b3)}.dark-mode .btn-sync-products:hover:not(:disabled){box-shadow:0 4px 12px #43a04766}.dark-mode .btn-create-product{background:linear-gradient(135deg,#d4af7699,#b6915899)}.dark-mode .btn-create-product:hover{box-shadow:0 4px 12px #d4af764d}.dark-mode .create-product-form{background:linear-gradient(135deg,#d4af7614,#b6915814);border-color:#d4af764d}.dark-mode .create-product-form h3{color:#d4af76f2}.dark-mode .create-product-form .form-hint{color:#d4af76b3}.dark-mode .form-grid .form-group label{color:#d4af76e6}.dark-mode .form-grid .form-group input,.dark-mode .form-grid .form-group select,.dark-mode .form-grid .form-group textarea{background:#0000004d;border-color:#d4af764d;color:#d4af76f2}.dark-mode .form-grid .form-group input::placeholder,.dark-mode .form-grid .form-group textarea::placeholder{color:#d4af7680}.dark-mode .form-grid .form-group input:focus,.dark-mode .form-grid .form-group select:focus,.dark-mode .form-grid .form-group textarea:focus{border-color:#d4af7699;box-shadow:0 0 0 3px #d4af7626}.dark-mode .form-actions .btn-secondary{background:#d4af7633;color:#d4af76f2;border-color:#d4af764d}.dark-mode .form-actions .btn-secondary:hover:not(:disabled){background:#d4af764d}.dark-mode .form-actions .btn-primary{background:linear-gradient(135deg,#d4af7699,#b6915899)}.dark-mode .form-actions .btn-primary:hover:not(:disabled){box-shadow:0 4px 12px #d4af764d}@media (max-width: 768px){.header-title-row{flex-direction:column;gap:12px}.header-actions{width:100%;flex-direction:column}.btn-sync-products,.btn-create-product{width:100%}.form-grid{grid-template-columns:1fr}.form-actions{flex-direction:column-reverse}.form-actions button{width:100%}}.pattern-warnings-settings{max-width:900px;margin:0 auto}.settings-intro{background:var(--app-hover-bg, #f8f9fa);border-left:4px solid var(--app-accent, #667eea);padding:1.25rem;margin-bottom:2rem;border-radius:8px}.settings-intro p{margin:0;color:var(--app-text-secondary, #666);line-height:1.6}.settings-groups{display:flex;flex-direction:column;gap:2rem;margin-bottom:2rem}.settings-group{background:var(--app-card-bg, white);border:2px solid var(--app-border, #e0e0e0);border-radius:12px;padding:1.5rem}.settings-group h3{font-size:1.1rem;color:var(--app-text-primary, #1a202c);margin:0 0 1.5rem;font-weight:600}.setting-item{margin-bottom:1.5rem}.setting-item:last-child{margin-bottom:0}.setting-item label{display:block;font-weight:600;color:var(--app-text-primary, #1a202c);margin-bottom:.5rem}.checkbox-label{display:flex;align-items:center;gap:.75rem;cursor:pointer;font-weight:500}.checkbox-label input[type=checkbox]{width:20px;height:20px;cursor:pointer}.setting-description{margin:.5rem 0 0;font-size:.9rem;color:var(--app-text-secondary, #666);font-style:italic}.setting-input{width:100%;padding:.75rem;border:2px solid var(--app-border, #e0e0e0);border-radius:8px;font-size:1rem;font-family:inherit;color:var(--app-text-primary, #1a202c);background:var(--app-card-bg, white);margin-top:.5rem}.setting-input:focus{outline:none;border-color:var(--app-accent, #667eea);box-shadow:0 0 0 3px #667eea1a}.setting-range{width:calc(100% - 60px);margin:.5rem 0}.range-value{display:inline-block;width:50px;text-align:right;font-weight:600;color:var(--app-accent, #667eea);margin-left:10px}.settings-actions{display:flex;justify-content:flex-end;padding:1.5rem 0}.btn-save-settings{padding:.9rem 2rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:10px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s;box-shadow:0 4px 12px #667eea4d}.btn-save-settings:hover{transform:translateY(-2px);box-shadow:0 6px 16px #667eea66}.dark-mode .settings-intro{background:#d4af7614;border-left-color:#d4af7699}.dark-mode .settings-intro p{color:#d4af76b3}.dark-mode .settings-group{background:#d4af760d;border-color:#d4af7633}.dark-mode .setting-item label{color:#d4af76e6}.dark-mode .setting-description{color:#d4af7699}.dark-mode .setting-input{background:#d4af7614;border-color:#d4af764d;color:#d4af76f2}.dark-mode .setting-input:focus{border-color:#d4af7699;box-shadow:0 0 0 3px #d4af7626}.dark-mode .range-value{color:#d4af76}.dark-mode .btn-save-settings{background:linear-gradient(135deg,#d4af7640,#d4af7626);color:#d4af76;border:2px solid rgba(212,175,118,.4);box-shadow:0 4px 12px #d4af764d}.dark-mode .btn-save-settings:hover{background:linear-gradient(135deg,#d4af7659,#d4af7640);box-shadow:0 6px 16px #d4af7666}.delete-confirm-modal{max-width:550px;width:90%}.delete-confirm-modal .modal-body{padding:24px}.account-info{background:#f8f9fa;border-radius:8px;padding:16px;margin-bottom:20px}.account-details{font-size:14px;line-height:1.8}.account-details strong{color:#495057;margin-right:8px}.deletion-scope{margin-bottom:20px}.deletion-scope h4{font-size:15px;margin-bottom:12px;color:#495057}.deletion-list{list-style:none;padding:0;margin:0}.deletion-list li{display:flex;align-items:flex-start;padding:12px;margin-bottom:8px;background:#fff;border:1px solid #e9ecef;border-radius:6px;transition:all .2s ease}.deletion-list li:hover{border-color:#dc3545;background:#fff5f5}.deletion-item-icon{font-size:20px;margin-right:12px;flex-shrink:0}.deletion-item-content{flex:1}.deletion-item-content strong{display:block;font-size:14px;color:#212529;margin-bottom:2px}.deletion-item-content small{display:block;font-size:12px;color:#6c757d}.blocklist-option{margin-bottom:20px;padding:16px;background:#fff3cd;border:1px solid #ffc107;border-radius:8px}.blocklist-checkbox{display:flex;align-items:flex-start;cursor:pointer;-webkit-user-select:none;user-select:none}.blocklist-checkbox input[type=checkbox]{width:18px;height:18px;margin-right:12px;margin-top:2px;cursor:pointer;flex-shrink:0}.blocklist-checkbox input[type=checkbox]:disabled{cursor:not-allowed;opacity:.5}.checkbox-label{flex:1}.checkbox-label strong{display:block;font-size:14px;color:#856404;margin-bottom:4px}.checkbox-label small{display:block;font-size:12px;color:#856404;opacity:.8}.danger-warning{display:flex;align-items:flex-start;padding:16px;background:#f8d7da;border:2px solid #dc3545;border-radius:8px;margin-bottom:0}.danger-warning .warning-icon{font-size:24px;margin-right:12px;flex-shrink:0}.danger-warning .warning-content{flex:1}.danger-warning strong{display:block;color:#721c24;font-size:14px;margin-bottom:6px;text-transform:uppercase;letter-spacing:.5px}.danger-warning p{margin:0;color:#721c24;font-size:13px}.self-deletion-warning{text-align:center;padding:40px 20px}.self-deletion-warning .warning-icon{font-size:64px;margin-bottom:20px;opacity:.5}.self-deletion-warning h4{font-size:18px;color:#495057;margin-bottom:12px}.self-deletion-warning p{color:#6c757d;font-size:14px;line-height:1.6;margin:0}.delete-confirm-modal .modal-footer{padding:16px 24px;border-top:1px solid #e9ecef;display:flex;justify-content:flex-end;gap:12px}.btn-danger{background:#dc3545;color:#fff;border:none;padding:10px 20px;border-radius:6px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:all .2s ease}.btn-danger:active:not(:disabled){transform:translateY(0);box-shadow:0 2px 4px #dc354533}.btn-danger:disabled{opacity:.6;cursor:not-allowed}.spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite}@media (max-width: 600px){.delete-confirm-modal{max-width:95%}.deletion-list li{flex-direction:column;align-items:flex-start}.deletion-item-icon{margin-bottom:8px}}.team-management{padding:2rem;max-width:1800px;margin:0 auto;width:100%}.team-header{margin-bottom:2rem}.team-header h2{margin:0 0 .5rem;font-size:2rem;color:#2c3e50}.team-header p{margin:0;color:#666;font-size:1rem}.team-tabs{display:flex;gap:1rem;margin-bottom:2rem;border-bottom:2px solid #e0e0e0}.team-tab{padding:1rem 2rem;background:none;border:none;border-bottom:3px solid transparent;cursor:pointer;font-size:1rem;font-weight:500;color:#666;transition:all .2s}.team-tab:hover{color:#667eea;background:#667eea0d}.team-tab.active{color:#667eea;border-bottom-color:#667eea;background:#667eea1a}.team-content{margin-top:2rem}.team-actions{display:flex;gap:1rem;justify-content:flex-end;margin-bottom:2rem}.btn-invite{padding:.75rem 1.5rem;background:#667eea;color:#fff;border:none;border-radius:8px;font-size:1rem;font-weight:500;cursor:pointer;transition:all .2s}.btn-invite:hover{background:#5568d3;transform:translateY(-1px);box-shadow:0 4px 12px #667eea4d}.team-list{display:grid;gap:1rem}.team-member-card{display:flex;justify-content:space-between;align-items:center;padding:1.5rem;background:var(--app-surface, white);border:2px solid #e0e0e0;border-radius:12px;transition:all .2s}.team-member-card:hover{border-color:#667eea;box-shadow:0 4px 12px #0000000d}.member-info{display:flex;align-items:center;gap:1rem;flex:1}.member-avatar{width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:700;flex-shrink:0}.member-details{flex:1}.member-details h3{margin:0 0 .25rem;font-size:1.1rem;color:#2c3e50;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.you-badge{font-size:.75rem;padding:.2rem .6rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-radius:12px;font-weight:600;display:inline-flex;align-items:center;gap:.25rem;animation:pulse-you 2s infinite}@keyframes pulse-you{0%,to{box-shadow:0 0 #667eeab3}50%{box-shadow:0 0 0 4px #667eea00}}.member-email{margin:0 0 .5rem;color:#666;font-size:.9rem}.member-meta{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}.role-badge{padding:.25rem .75rem;border-radius:20px;font-size:.85rem;font-weight:500}.role-superadmin{background:linear-gradient(135deg,#f093fb,#f5576c);color:#fff}.role-admin{background:linear-gradient(135deg,#4facfe,#00f2fe);color:#fff}.role-designer{background:linear-gradient(135deg,#43e97b,#38f9d7);color:#fff}.auth-provider-badge{padding:.25rem .75rem;border-radius:20px;font-size:.85rem;font-weight:500;display:inline-flex;align-items:center;gap:.25rem}.provider-google{background:linear-gradient(135deg,#ea4335,#fbbc05);color:#fff}.provider-email{background:#f0f0f0;color:#666;border:1px solid #ddd}.provider-shopify{background:linear-gradient(135deg,#95bf47,#7ab55c);color:#fff}.auth-warning-badge{padding:.35rem .85rem;border-radius:6px;font-size:.8rem;font-weight:600;display:inline-flex;align-items:center;gap:.35rem;background:linear-gradient(135deg,#fbbf24,#f59e0b);color:#78350f;border:1px solid #f59e0b;box-shadow:0 2px 8px #fbbf244d;margin-left:.5rem}.last-login{color:#999;font-size:.85rem}.member-actions{display:flex;gap:.5rem}.btn-action{padding:.5rem 1rem;border:none;border-radius:6px;font-size:.9rem;cursor:pointer;transition:all .2s;font-weight:500}.btn-reset{background:#f0f0f0;color:#666}.btn-reset:hover{background:#667eea;color:#fff}.btn-remove{background:#ffe0e0;color:#e74c3c}.btn-block{background:#fff3cd;color:#856404}.btn-block:hover:not(:disabled){background:#ffc107;color:#212529;transform:translateY(-2px);box-shadow:0 4px 8px #ffc1074d}.btn-delete{background:#f8d7da;color:#721c24}.btn-delete:hover:not(:disabled){background:#dc3545;color:#fff;transform:translateY(-2px);box-shadow:0 4px 8px #dc35454d}.btn-resend{background:#d1ecf1;color:#0c5460}.btn-resend:hover:not(:disabled){background:#17a2b8;color:#fff}.customers-content{margin-top:2rem}.customer-search{display:flex;gap:1rem;margin-bottom:2rem}.search-input{flex:1;padding:.75rem 1rem;border:2px solid #e0e0e0;border-radius:8px;font-size:1rem;transition:border-color .2s}.btn-search{padding:.75rem 1.5rem;background:#667eea;color:#fff;border:none;border-radius:8px;font-size:1rem;cursor:pointer;transition:all .2s}.btn-search:hover{background:#5568d3}.customers-table{background:var(--app-surface, white);border:2px solid #e0e0e0;border-radius:12px;overflow:hidden}.customers-table table{width:100%;border-collapse:collapse}.customers-table thead{background:#f8f9fa}.customers-table th{padding:1rem;text-align:left;font-weight:600;color:#2c3e50;border-bottom:2px solid #e0e0e0}.customers-table td{padding:1rem;border-bottom:1px solid #f0f0f0;color:#666}.customers-table tbody tr:hover{background:#667eea0d}.customers-table .text-center{text-align:center}.empty-state{text-align:center;padding:4rem 2rem;color:#999}.empty-state p{margin:0 0 1rem;font-size:1.1rem}.empty-state small{color:#bbb;font-size:.9rem}.empty-state button{margin-top:1rem;padding:.75rem 1.5rem;background:#667eea;color:#fff;border:none;border-radius:8px;font-size:1rem;cursor:pointer}.empty-state button:hover{background:#5568d3}.loading{text-align:center;padding:3rem;color:#999;font-size:1.1rem}.modal{background:var(--app-surface, white);border-radius:12px;max-width:500px;width:90%;max-height:90vh;overflow-y:auto}.invite-form{padding:1.5rem}.form-group label{display:block;margin-bottom:.5rem;font-weight:500;color:#2c3e50}.form-hint{display:block;margin-top:.5rem;color:#666;font-size:.85rem;line-height:1.5}.form-actions{display:flex;gap:1rem;justify-content:flex-end;padding:1.5rem;border-top:2px solid #e0e0e0}.btn-secondary{padding:.75rem 1.5rem;background:#f0f0f0;color:#666;border:none;border-radius:8px;font-size:1rem;cursor:pointer;transition:all .2s}.btn-secondary:hover{background:#e0e0e0}.btn-primary{padding:.75rem 1.5rem;background:#667eea;color:#fff;border:none;border-radius:8px;font-size:1rem;cursor:pointer;transition:all .2s}.btn-primary:hover{background:#5568d3}.invitation-token{margin:1.5rem;padding:1.5rem;background:#f0f7ff;border:2px solid #667eea;border-radius:8px}.invitation-token p{margin:0 0 .75rem}.invitation-token code{display:block;padding:.75rem;background:var(--app-surface, white);border:1px solid #e0e0e0;border-radius:6px;font-family:Courier New,monospace;font-size:.9rem;word-break:break-all;margin:.5rem 0}.invitation-token small{color:#666;font-size:.85rem}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1.5rem}.form-row .form-group{margin-bottom:0}@media (max-width: 480px){.form-row{grid-template-columns:1fr}}.invite-info{margin:1.5rem 0;padding:1rem 1.25rem;background:linear-gradient(135deg,#667eea1a,#764ba21a);border:1px solid rgba(102,126,234,.3);border-radius:8px}.invite-info p{margin:0;font-size:.9rem;color:#555;line-height:1.5}.invite-info p:first-child{font-weight:500;color:#333;margin-bottom:.25rem}.btn-primary:disabled,.btn-secondary:disabled{opacity:.6;cursor:not-allowed}.btn-resend{background:#fff3e0;color:#e65100}.btn-resend:hover:not(:disabled){background:#e65100;color:#fff}.customer-actions{display:flex;gap:.5rem;justify-content:flex-end}.btn-promote{background:linear-gradient(135deg,#43e97b,#38f9d7);color:#fff}.btn-promote:hover{transform:translateY(-1px);box-shadow:0 4px 12px #43e97b4d}.btn-revoke{background:#fff0e0;color:#e65100}.btn-revoke:hover{background:#e65100;color:#fff}.role-standard{background:#f0f0f0;color:#666}.promote-form{padding:1.5rem}.promote-user-info{display:flex;align-items:center;gap:1rem;padding:1.5rem;background:linear-gradient(135deg,#667eea0d,#764ba20d);border-radius:12px;margin-bottom:1.5rem}.promote-avatar{width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:700;flex-shrink:0}.promote-details h4{margin:0 0 .25rem;font-size:1.1rem;color:#2c3e50}.promote-details p{margin:0;color:#666;font-size:.9rem}.promote-warning{margin:1.5rem 0;padding:1rem;background:#fff8e1;border:1px solid #ffcc02;border-radius:8px}.promote-warning p{margin:0;color:#8a6d3b;font-size:.9rem}.auth-badge{padding:.2rem .6rem;border-radius:12px;font-size:.8rem;font-weight:500;white-space:nowrap}.auth-google{background:#e3f2fd;color:#1976d2}.auth-shopify{background:#e8f5e9;color:#388e3c}.auth-supabase{background:#f3e5f5;color:#7b1fa2}.btn-promote{padding:.75rem 1.5rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:8px;font-size:.95rem;font-weight:600;cursor:pointer;transition:all .2s}.btn-promote:hover{transform:translateY(-2px);box-shadow:0 4px 12px #667eea4d}.promotion-modal{max-width:700px;max-height:80vh;overflow-y:auto}.promotion-content{padding:1.5rem}.promotion-description{margin:0 0 1.5rem;padding:1rem;background:var(--app-surface, #f8f9fa);border-left:4px solid #667eea;border-radius:4px;color:var(--app-text, #374151)}.search-section{margin-bottom:2rem}.search-input-group{display:flex;gap:.75rem;margin-bottom:.5rem}.search-input{flex:1;padding:.75rem 1rem;border:2px solid #e0e0e0;border-radius:8px;font-size:1rem;transition:border-color .2s;background:var(--app-surface, white);color:var(--app-text, #374151)}.search-input:focus{outline:none;border-color:#667eea}.btn-search{padding:.75rem 1.5rem;background:#667eea;color:#fff;border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:all .2s}.btn-search:hover:not(:disabled){background:#5568d3}.btn-search:disabled{opacity:.5;cursor:not-allowed}.search-hint{display:block;color:var(--app-text-secondary, #6b7280);font-size:.85rem;margin-left:.5rem}.search-results{margin-top:1.5rem}.search-results h4{margin:0 0 1rem;color:var(--app-text, #2c3e50);font-size:1.1rem}.results-list{display:flex;flex-direction:column;gap:1rem}.result-item{padding:1rem;background:var(--app-surface, white);border:2px solid #e0e0e0;border-radius:12px;transition:all .2s}.result-item:hover{border-color:#667eea;box-shadow:0 2px 8px #667eea1a}.user-info{margin-bottom:1rem}.user-email{font-size:1.05rem;font-weight:600;color:var(--app-text, #2c3e50);margin-bottom:.25rem}.user-name{font-size:.9rem;color:var(--app-text-secondary, #6b7280);margin-bottom:.5rem}.user-role{font-size:.85rem;color:var(--app-text-secondary, #6b7280)}.user-role strong{color:#667eea;text-transform:uppercase;font-size:.8rem;padding:.2rem .5rem;background:#667eea1a;border-radius:4px}.promotion-actions{display:flex;gap:1rem;flex-wrap:wrap}.btn-promote-action,.btn-demote-action{padding:.5rem 1rem;border:2px solid transparent;border-radius:6px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s}.btn-promote-action{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.btn-promote-action:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 8px #667eea4d}.btn-demote-action{background:#f3f4f6;color:#374151;border-color:#d1d5db}.btn-demote-action:hover:not(:disabled){background:#e5e7eb;border-color:#9ca3af}.btn-promote-action:disabled,.btn-demote-action:disabled{opacity:.5;cursor:not-allowed}.promoting-indicator{margin-top:.75rem;padding:.5rem;background:#fff3e0;color:#f57c00;border-radius:4px;text-align:center;font-size:.9rem;font-weight:500}.no-results{padding:2rem;text-align:center;color:var(--app-text-secondary, #6b7280);background:var(--app-surface, #f8f9fa);border-radius:8px}.no-results p{margin:0;font-size:1rem}.modal-footer{padding:1rem 1.5rem;border-top:1px solid #e0e0e0;display:flex;justify-content:flex-end}.team-header h2,.dark-mode .modal-header h3{color:#d4af76f2}.team-header p,.dark-mode .promotion-description{color:#d4af76cc;background:#1a1a2e66}.dark-mode .member-details h3{color:#d4af76f2}.dark-mode .member-email{color:#d4af76b3}.dark-mode .last-login{color:#d4af7699}.btn-invite,.dark-mode .btn-promote{background:linear-gradient(135deg,#d4af764d,#d4af7633);color:#d4af76;border:2px solid rgba(212,175,118,.4)}.btn-invite:hover,.dark-mode .btn-promote:hover{background:linear-gradient(135deg,#d4af7666,#d4af764d);box-shadow:0 4px 12px #d4af764d}.dark-mode .btn-reset{background:#d4af761a;color:#d4af76e6}.dark-mode .btn-reset:hover{background:#d4af7633;color:#d4af76}.dark-mode .btn-remove{background:#e74c3c33;color:#ff6b6b}.dark-mode .btn-remove:hover{background:#e74c3c4d;color:#ff8787}.dark-mode .btn-resend{background:#e6510033;color:#ff9f5a}.dark-mode .btn-resend:hover:not(:disabled){background:#e651004d;color:#ffb380}.dark-mode .modal{background:#1a1a2efa;border:2px solid rgba(212,175,118,.2)}.dark-mode .modal-header{border-bottom-color:#d4af7633}.dark-mode .btn-close{color:#d4af76b3}.dark-mode .btn-close:hover{background:#d4af761a;color:#d4af76}.form-group input,.form-group select,.dark-mode .search-input{background:#0000004d;border-color:#d4af764d;color:#d4af76f2}.form-group input:focus,.form-group select:focus,.dark-mode .search-input:focus{border-color:#d4af7699;box-shadow:0 0 0 3px #d4af761a}.dark-mode .invite-info{background:#d4af7614;border-color:#d4af764d}.dark-mode .invite-info p{color:#d4af76d9}.dark-mode .invite-info p:first-child{color:#d4af76f2}.dark-mode .result-item{background:#1a1a2e99;border-color:#d4af7633}.dark-mode .result-item:hover{border-color:#d4af7680;box-shadow:0 2px 8px #d4af7626}.dark-mode .user-email{color:#d4af76f2}.dark-mode .user-name,.dark-mode .user-role{color:#d4af76b3}.dark-mode .user-role strong{color:#d4af76;background:#d4af7626}.dark-mode .btn-promote-action{background:linear-gradient(135deg,#d4af764d,#d4af7633);color:#d4af76;border-color:#d4af7666}.dark-mode .btn-promote-action:hover:not(:disabled){background:linear-gradient(135deg,#d4af7666,#d4af764d);box-shadow:0 4px 8px #d4af764d}.dark-mode .btn-demote-action{background:#d4af7614;color:#d4af76e6;border-color:#d4af764d}.dark-mode .btn-demote-action:hover:not(:disabled){background:#d4af7626;border-color:#d4af7680}.dark-mode .btn-search{background:linear-gradient(135deg,#d4af764d,#d4af7633);color:#d4af76;border:2px solid rgba(212,175,118,.4)}.dark-mode .btn-search:hover:not(:disabled){background:linear-gradient(135deg,#d4af7666,#d4af764d)}.dark-mode .promoting-indicator{background:#d4af7626;color:#d4af76}.dark-mode .no-results{background:#1a1a2e66;color:#d4af76cc}.dark-mode .no-results p{color:#d4af76cc}.dark-mode .empty-state small{color:#d4af7699}.dark-mode .loading{color:#d4af76b3}.dark-mode .search-hint{color:#d4af7699}.dark-mode .search-results h4{color:#d4af76f2}.dark-mode .team-management{background:transparent}.dark-mode .team-header h2{color:#d4af76f2}.dark-mode .team-header p{color:#d4af76b3}.dark-mode .team-tabs{border-bottom-color:#d4af7633}.dark-mode .team-tab{color:#d4af76b3}.dark-mode .team-tab:hover{color:#d4af76;background:#d4af761a}.dark-mode .team-tab.active{color:#d4af76;border-bottom-color:#d4af76cc;background:#d4af7626}.dark-mode .btn-invite{background:#d4af764d;color:#d4af76}.dark-mode .btn-invite:hover{background:#d4af7666;box-shadow:0 4px 12px #d4af764d}.dark-mode .team-member-card{background:#1a1a2e99;border-color:#d4af7633}.dark-mode .team-member-card:hover{border-color:#d4af7680;box-shadow:0 4px 12px #d4af7626}.role-selector{display:flex;align-items:center;gap:.5rem}.role-label{font-size:.85rem;color:#666;font-weight:500}.role-select{padding:.4rem .8rem;border:2px solid #e0e0e0;border-radius:8px;font-size:.85rem;font-weight:600;cursor:pointer;transition:all .2s;background:#fff;color:#2c3e50}.role-select:hover:not(:disabled){border-color:#667eea}.role-select:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.role-select:disabled{opacity:.6;cursor:not-allowed}.role-select.role-superadmin{border-color:#f093fb;background:linear-gradient(135deg,#f093fb20,#f5576c20);color:#7b1fa2;font-weight:700}.role-select.role-admin{border-color:#4facfe;background:linear-gradient(135deg,#4facfe20,#00f2fe20);color:#0277bd;font-weight:700}.role-select.role-designer{border-color:#43e97b;background:linear-gradient(135deg,#43e97b20,#38f9d720);color:#1b5e20;font-weight:700}.dark-mode .role-select{background:#1a1a2e99;color:#d4af76f2;border-color:#d4af764d}.dark-mode .role-label{color:#d4af76b3}.dark-mode .confirm-message,.dark-mode .alert-message{color:#d4af76f2}.customer-management{padding:20px;max-width:1800px;margin:0 auto;width:100%}.customer-management.loading{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:400px;gap:1rem}.loading-spinner{width:40px;height:40px;border:3px solid var(--app-border, #e0e0e0);border-top-color:var(--app-accent, #667eea);border-radius:50%;animation:spin 1s linear infinite}.cm-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;flex-wrap:wrap;gap:16px}.cm-header-title{display:flex;align-items:center;gap:12px}.cm-header-title h2{margin:0;font-size:24px;color:var(--app-text-primary, #333)}.customer-count{padding:4px 12px;background:var(--app-hover-bg, #f5f5f5);border-radius:20px;font-size:13px;color:var(--app-text-secondary, #666)}.cm-header-actions{display:flex;gap:12px}.error-banner{padding:12px 16px;margin-bottom:20px;background:#ffebee;color:#c62828;border-radius:8px;border-left:4px solid #c62828}.cm-search{margin-bottom:20px}.search-input{width:100%;max-width:400px;padding:12px 16px;border:2px solid var(--app-border, #e0e0e0);border-radius:8px;font-size:14px;transition:all .2s}.search-input:focus{outline:none;border-color:var(--app-accent, #667eea);box-shadow:0 0 0 3px #667eea1a}.customer-form-section{background:var(--app-hover-bg, #f8f9fa);border-radius:12px;padding:24px;margin-bottom:24px}.customer-form-section h3{margin:0 0 20px;font-size:18px;color:var(--app-text-primary, #333)}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}.form-group{margin-bottom:16px}.form-group label{display:block;margin-bottom:6px;font-size:14px;font-weight:600;color:var(--app-text-secondary, #555)}.form-group input,.form-group textarea{width:100%;padding:10px 12px;border:2px solid var(--app-border, #e0e0e0);border-radius:6px;font-size:14px;font-family:inherit;transition:all .2s;background:var(--app-surface, white)}.form-group input:focus,.form-group textarea:focus{outline:none;border-color:var(--app-accent, #667eea);box-shadow:0 0 0 3px #667eea1a}.form-group input:disabled{background:var(--app-hover-bg, #f5f5f5);cursor:not-allowed}.checkbox-group{margin-top:8px}.checkbox-label{display:flex;align-items:center;gap:8px;cursor:pointer;font-weight:400!important}.form-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:20px;padding-top:20px;border-top:1px solid var(--app-border, #e0e0e0)}.btn{padding:10px 20px;font-size:14px;font-weight:600;border:none;border-radius:6px;cursor:pointer;transition:all .2s}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:linear-gradient(135deg,var(--app-accent, #667eea) 0%,#764ba2 100%);color:#fff}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 12px #667eea4d}.btn-secondary{background:var(--app-hover-bg, #f5f5f5);color:var(--app-text-primary, #333)}.btn-secondary:hover:not(:disabled){background:var(--app-border, #e0e0e0)}.customer-table-container{background:var(--app-surface, white);border-radius:12px;overflow:hidden;box-shadow:0 2px 8px #0000000d;border:1px solid var(--app-border, #e0e0e0)}.customer-table{width:100%;border-collapse:collapse}.customer-table th{background:var(--app-hover-bg, #f8f9fa);padding:14px 16px;text-align:left;font-size:12px;font-weight:600;text-transform:uppercase;color:var(--app-text-secondary, #666);border-bottom:2px solid var(--app-border, #e0e0e0)}.customer-table td{padding:14px 16px;border-bottom:1px solid var(--app-border-light, #f0f0f0);font-size:14px;color:var(--app-text-primary, #333)}.customer-table tbody tr:hover{background:var(--app-hover-bg, #f8f9fa)}.customer-table tbody tr.synced{background:#667eea08}.customer-name{display:flex;align-items:center;gap:12px}.customer-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--app-accent, #667eea) 0%,#764ba2 100%);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:14px;flex-shrink:0}.customer-name-details{display:flex;flex-direction:column;gap:4px}.customer-tags{display:flex;gap:4px;flex-wrap:wrap}.tag{padding:2px 8px;background:var(--app-hover-bg, #f0f0f0);border-radius:10px;font-size:11px;color:var(--app-text-secondary, #666)}.customer-table td a{color:var(--app-accent, #667eea);text-decoration:none}.customer-table td a:hover{text-decoration:underline}.verified-badge{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;background:#27ae60;color:#fff;border-radius:50%;font-size:10px;margin-left:6px;vertical-align:middle}.text-center{text-align:center}.text-right{text-align:right}.sync-status{display:inline-block;padding:4px 10px;border-radius:20px;font-size:12px;font-weight:500}.sync-status.synced{background:#e8f5e9;color:#2e7d32}.sync-status.not-synced{background:#fff3e0;color:#e65100}.actions{display:flex;gap:8px}.btn-icon{width:32px;height:32px;padding:0;border:none;border-radius:6px;background:var(--app-hover-bg, #f5f5f5);color:var(--app-text-secondary, #666);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;transition:all .2s;text-decoration:none}.btn-icon:hover{background:var(--app-border, #e0e0e0);color:var(--app-text-primary, #333)}.btn-icon.btn-sync{color:var(--app-accent, #667eea)}.btn-icon.btn-sync:hover{background:#667eea1a}.btn-icon.btn-promote{background:#fff3cd;color:#856404}.btn-icon.btn-promote:hover:not(:disabled){background:#ffc107;color:#212529;transform:translateY(-2px) scale(1.05)}.btn-icon.btn-block{background:#ffe0e0;color:#dc3545}.btn-icon.btn-block:hover:not(:disabled){background:#ffc107;color:#212529;transform:translateY(-2px) scale(1.05)}.btn-icon.btn-delete{background:#f8d7da;color:#721c24}.btn-icon.btn-delete:hover:not(:disabled){background:#dc3545;color:#fff;transform:translateY(-2px) scale(1.05)}.btn-icon:disabled{opacity:.5;cursor:not-allowed}.empty-state{text-align:center;padding:40px 20px!important;color:var(--app-text-secondary, #666)}.alert{padding:12px 16px;border-radius:8px;margin-bottom:16px}.alert-error{background:#ffebee;color:#c62828;border:1px solid #ffcdd2}@media (max-width: 1024px){.customer-table-container{overflow-x:auto}.customer-table{min-width:900px}}@media (max-width: 768px){.cm-header{flex-direction:column;align-items:stretch}.cm-header-actions{justify-content:flex-end}.form-row{grid-template-columns:1fr}.search-input{max-width:none}}.dark-mode .customer-management{background:transparent}.dark-mode .cm-header-title h2{color:#f0e6d3}.dark-mode .customer-count{background:#d4af7626;color:#d4af76e6}.dark-mode .search-input{background:#1e1e32e6;border-color:#d4af764d;color:#f0e6d3}.dark-mode .search-input::placeholder{color:#d4af7680}.dark-mode .customer-form-section{background:#1e1e32e6;border:1px solid rgba(212,175,118,.2)}.dark-mode .customer-form-section h3{color:#f0e6d3}.dark-mode .form-group input,.dark-mode .form-group textarea{background:#1a1a2ecc;border-color:#d4af764d;color:#f0e6d3}.dark-mode .form-group input:disabled{background:#1a1a2e80}.dark-mode .form-actions{border-top-color:#d4af7633}.dark-mode .btn-secondary{background:#d4af7626;color:#d4af76e6}.dark-mode .customer-table-container{background:#1e1e32e6;border-color:#d4af7633}.dark-mode .customer-table th{background:#1a1a2ee6;color:#d4af76e6;border-bottom-color:#d4af764d}.dark-mode .customer-table td{color:#d4af76e6;border-bottom-color:#d4af761a}.dark-mode .customer-table tbody tr:hover{background:#d4af761a}.dark-mode .tag,.dark-mode .btn-icon{background:#d4af7626;color:#d4af76e6}.dark-mode .btn-icon:hover{background:#d4af7640}.dark-mode .empty-state{color:#d4af76b3}.dark-mode .loading-spinner{border-color:#d4af7633;border-top-color:#d4af76cc}.cm-tabs{display:flex;gap:8px;margin-bottom:24px;border-bottom:2px solid var(--app-border, #e0e0e0);padding-bottom:0}.cm-tab{padding:12px 24px;background:none;border:none;border-bottom:3px solid transparent;font-size:15px;font-weight:500;color:var(--app-text-secondary, #666);cursor:pointer;transition:all .2s ease;position:relative;bottom:-2px}.cm-tab:hover{color:var(--app-accent, #667eea);background:var(--app-hover-bg, rgba(102, 126, 234, .05))}.cm-tab.active{color:var(--app-accent, #667eea);border-bottom-color:var(--app-accent, #667eea);font-weight:600}.sync-status-tab{padding:20px 0}.loading-spinner-container{display:flex;flex-direction:column;align-items:center;gap:16px;padding:60px 20px}.sync-overview{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-bottom:32px}.sync-card{display:flex;align-items:center;gap:16px;padding:20px;background:var(--app-bg-secondary, #f8f9fa);border:1px solid var(--app-border, #e0e0e0);border-radius:12px;transition:transform .2s ease,box-shadow .2s ease}.sync-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.sync-card.success{background:linear-gradient(135deg,#d4f1dd,#e8f5e9);border-color:#81c784}.sync-card-icon{font-size:32px;line-height:1}.sync-card-content{flex:1}.sync-card-value{font-size:28px;font-weight:700;color:var(--app-text-primary, #2c3e50);line-height:1.2}.sync-card-label{font-size:13px;color:var(--app-text-secondary, #666);margin-top:4px}.sync-issue-section{margin-bottom:32px;padding:24px;background:var(--app-bg-secondary, #fff);border:1px solid var(--app-border, #e0e0e0);border-radius:12px}.sync-issue-section h3{margin:0 0 8px;font-size:18px;color:var(--app-text-primary, #2c3e50)}.issue-description{margin:0 0 16px;font-size:14px;color:var(--app-text-secondary, #666)}.sync-issue-table{width:100%;border-collapse:collapse;font-size:14px}.sync-issue-table thead{background:var(--app-bg-tertiary, #f8f9fa)}.sync-issue-table th{padding:12px;text-align:left;font-weight:600;border-bottom:2px solid var(--app-border, #e0e0e0)}.sync-issue-table td{padding:12px;border-bottom:1px solid var(--app-border, #e0e0e0)}.sync-issue-table code{padding:2px 6px;background:var(--app-bg-tertiary, #f1f3f5);border-radius:4px;font-family:Courier New,monospace;font-size:12px}.sync-success-message{text-align:center;padding:60px 20px}.success-icon{font-size:64px;margin-bottom:16px}.sync-success-message h3{margin:0 0 8px;color:#4caf50;font-size:24px}.sync-success-message p{margin:0;color:var(--app-text-secondary, #666);font-size:15px}.test-tools-tab{padding:20px 0}.test-tools-tab h3{margin:0 0 8px;font-size:22px;color:var(--app-text-primary, #2c3e50)}.tab-description{margin:0 0 32px;font-size:14px;color:var(--app-text-secondary, #666)}.tool-section{margin-bottom:24px;padding:24px;background:var(--app-bg-secondary, #fff);border:1px solid var(--app-border, #e0e0e0);border-radius:12px}.tool-section h4{margin:0 0 8px;font-size:16px;color:var(--app-text-primary, #2c3e50)}.tool-section>p{margin:0 0 16px;font-size:14px;color:var(--app-text-secondary, #666)}.tool-placeholder{padding:32px;text-align:center;background:var(--app-bg-tertiary, #f8f9fa);border:2px dashed var(--app-border, #e0e0e0);border-radius:8px}.tool-placeholder p{margin:0 0 4px;font-size:15px;font-weight:500;color:var(--app-text-secondary, #666)}.tool-placeholder small{font-size:13px;color:var(--app-text-tertiary, #999)}.btn-details{font-size:14px;font-weight:700;transition:transform .2s ease}.btn-details.active{color:var(--app-accent, #667eea);transform:rotate(0)}.customer-row.expanded{background:#667eea0d}.user-details-row{background:var(--app-bg-secondary, #f8f9fa);border-top:2px solid var(--app-accent, #667eea)}.user-details-row td{padding:0!important}.user-details-panel{padding:24px;animation:slideDown .3s ease}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.loading-stats{display:flex;flex-direction:column;align-items:center;gap:12px;padding:40px}.user-stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:24px}.stat-card{display:flex;align-items:center;gap:16px;padding:20px;background:var(--app-bg-primary, #fff);border:2px solid var(--app-border, #e0e0e0);border-radius:12px;transition:all .2s ease}.stat-card:hover{border-color:var(--app-accent, #667eea);transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.stat-icon{font-size:32px;width:56px;height:56px;display:flex;align-items:center;justify-content:center;background:#667eea1a;border-radius:12px}.stat-content{flex:1}.stat-value{font-size:24px;font-weight:700;color:var(--app-text-primary, #2c3e50);margin-bottom:4px}.stat-label{font-size:13px;color:var(--app-text-secondary, #666);text-transform:uppercase;letter-spacing:.5px}.user-sync-section{margin-bottom:24px;padding:20px;background:var(--app-bg-primary, #fff);border:2px solid var(--app-border, #e0e0e0);border-radius:12px}.user-sync-section h4{margin:0 0 16px;font-size:16px;color:var(--app-text-primary, #2c3e50)}.sync-badges{display:flex;flex-wrap:wrap;gap:12px}.sync-badge{padding:8px 16px;border-radius:6px;font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:6px}.sync-badge.success{background:#d4edda;color:#155724;border:1px solid #c3e6cb}.sync-badge.error{background:#f8d7da;color:#721c24;border:1px solid #f5c6cb}.sync-warnings{margin-top:16px;padding-top:16px;border-top:1px solid var(--app-border, #e0e0e0)}.warning-item{padding:8px 12px;background:#fff3cd;color:#856404;border-left:3px solid #ffc107;border-radius:4px;margin-bottom:8px;font-size:13px}.user-actions-section{padding:20px;background:var(--app-bg-primary, #fff);border:2px solid var(--app-border, #e0e0e0);border-radius:12px}.user-actions-section h4{margin:0 0 16px;font-size:16px;color:var(--app-text-primary, #2c3e50)}.action-buttons{display:flex;flex-wrap:wrap;gap:12px}.btn-danger-outline{padding:10px 20px;background:transparent;color:#dc3545;border:2px solid #dc3545;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.btn-danger-outline:hover:not(:disabled){background:#dc3545;color:#fff;transform:translateY(-1px);box-shadow:0 4px 8px #dc35454d}.btn-danger-outline:disabled{opacity:.5;cursor:not-allowed}.tool-active{padding:20px;background:var(--app-bg-tertiary, #f8f9fa);border-radius:8px}.tool-description{margin:0 0 16px;font-size:14px;color:var(--app-text-secondary, #666);line-height:1.5}.tool-warning{display:inline-block;margin-top:8px;padding:6px 12px;background:#fff3cd;color:#856404;border-radius:4px;font-size:13px;font-weight:500}.tool-input{width:100%;max-width:500px;padding:12px 16px;border:2px solid var(--app-border, #e0e0e0);border-radius:8px;font-size:14px;transition:all .2s;background:var(--app-bg-primary, #fff);color:var(--app-text-primary, #333)}.tool-input:focus{outline:none;border-color:var(--app-accent, #667eea);box-shadow:0 0 0 3px #667eea1a}.tool-input:disabled{opacity:.6;cursor:not-allowed}.btn-danger{margin-top:12px;padding:12px 24px;background:#dc3545;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s}.btn-danger:hover:not(:disabled){background:#c82333;transform:translateY(-1px);box-shadow:0 4px 8px #dc35454d}.btn-danger:active:not(:disabled){transform:translateY(0)}.btn-danger:disabled{opacity:.5;cursor:not-allowed}.delete-result{margin-top:20px;padding:16px;border-radius:8px;border-left:4px solid}.delete-result.success{background:#d4edda;border-color:#28a745;color:#155724}.delete-result.error{background:#f8d7da;border-color:#dc3545;color:#721c24}.result-header{font-weight:600;font-size:15px;margin-bottom:12px}.result-details{font-size:14px;line-height:1.6}.result-details ul{margin:8px 0;padding-left:20px}.result-details li{margin:4px 0}.warning-list{margin-top:12px;padding-top:12px;border-top:1px solid rgba(0,0,0,.1)}.error-item{padding:4px 0}.dark-mode .cm-tabs{border-bottom-color:#d4af7633}.dark-mode .cm-tab{color:#d4af7699}.dark-mode .cm-tab:hover{color:#d4af76e6;background:#d4af761a}.dark-mode .cm-tab.active{color:#d4af76;border-bottom-color:#d4af76cc}.dark-mode .sync-card{background:#d4af760d;border-color:#d4af7633}.dark-mode .sync-card.success{background:#81c7841a;border-color:#81c7844d}.dark-mode .sync-issue-section,.dark-mode .tool-section{background:#d4af7608;border-color:#d4af7633}.dark-mode .sync-issue-table th{background:#d4af760d;border-bottom-color:#d4af7633}.dark-mode .sync-issue-table td{border-bottom-color:#d4af761a}.dark-mode .sync-issue-table code{background:#d4af761a;color:#d4af76e6}.dark-mode .tool-placeholder{background:#d4af760d;border-color:#d4af7633}.dark-mode .tool-active{background:#d4af760d}.dark-mode .tool-description{color:#d4af76cc}.dark-mode .tool-warning{background:#ffc10733;color:#ffc107}.dark-mode .tool-input{background:#d4af760d;border-color:#d4af764d;color:#d4af76f2}.dark-mode .tool-input:focus{border-color:#d4af7699;box-shadow:0 0 0 3px #d4af761a}.dark-mode .delete-result.success{background:#81c78426;border-color:#81c78480;color:#81c784}.dark-mode .delete-result.error{background:#dc354526;border-color:#dc354580;color:#f48fb1}.dark-mode .customer-row.expanded{background:#d4af7614}.dark-mode .user-details-row{background:#d4af7608;border-top-color:#d4af7699}.dark-mode .stat-card{background:#d4af760d;border-color:#d4af764d}.dark-mode .stat-card:hover{border-color:#d4af7699}.dark-mode .stat-icon{background:#d4af7626}.dark-mode .stat-label{color:#d4af76b3}.dark-mode .user-sync-section,.dark-mode .user-actions-section{background:#d4af760d;border-color:#d4af764d}.dark-mode .user-sync-section h4,.dark-mode .user-actions-section h4{color:#d4af76f2}.dark-mode .sync-badge.success{background:#81c78433;color:#81c784;border-color:#81c78466}.dark-mode .sync-badge.error{background:#dc354533;color:#f48fb1;border-color:#dc354566}.dark-mode .warning-item{background:#ffc10726;color:#ffc107;border-left-color:#ffc107}.dark-mode .btn-danger-outline{color:#f48fb1;border-color:#f48fb1}.dark-mode .btn-danger-outline:hover:not(:disabled){background:#dc354533;color:#f48fb1;border-color:#dc3545}.blocklist-manager{padding:20px;max-width:1400px;margin:0 auto}.blocklist-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:24px;padding-bottom:16px;border-bottom:2px solid #e9ecef}.blocklist-title h2{margin:0 0 8px;font-size:24px;color:#212529}.blocklist-title p{margin:0;color:#6c757d;font-size:14px}.blocklist-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:24px}.stat-card{background:#fff;border:1px solid #e9ecef;border-radius:8px;padding:20px;text-align:center;transition:all .2s ease}.stat-card:hover{border-color:#dc3545;box-shadow:0 4px 8px #00000014;transform:translateY(-2px)}.stat-value{font-size:32px;font-weight:700;color:#dc3545;margin-bottom:8px}.stat-label{font-size:13px;color:#6c757d;text-transform:uppercase;letter-spacing:.5px}.add-form-section{background:#f8f9fa;border:2px dashed #dee2e6;border-radius:8px;padding:24px;margin-bottom:24px}.add-form-section h3{margin:0 0 16px;font-size:18px;color:#495057}.add-form-section .form-group{margin-bottom:16px}.add-form-section label{display:block;margin-bottom:8px;font-weight:600;color:#495057;font-size:14px}.add-form-section input[type=text],.add-form-section textarea{width:100%;padding:10px 12px;border:1px solid #ced4da;border-radius:6px;font-size:14px;font-family:Consolas,Monaco,Courier New,monospace;transition:border-color .2s}.add-form-section input[type=text]:focus,.add-form-section textarea:focus{outline:none;border-color:#dc3545;box-shadow:0 0 0 3px #dc35451a}.add-form-section textarea{resize:vertical}.form-hint{display:block;margin-top:6px;font-size:12px;color:#6c757d;line-height:1.5}.form-hint code{background:#fff;padding:2px 6px;border-radius:3px;border:1px solid #e9ecef;font-family:Consolas,Monaco,Courier New,monospace;font-size:11px}.form-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:20px}.blocklist-filters{display:flex;gap:16px;align-items:center;margin-bottom:20px;padding:16px;background:#fff;border:1px solid #e9ecef;border-radius:8px}.filter-search{flex:1;max-width:400px}.search-input{width:100%;padding:10px 14px;border:1px solid #ced4da;border-radius:6px;font-size:14px;transition:border-color .2s}.search-input:focus{outline:none;border-color:#dc3545;box-shadow:0 0 0 3px #dc35451a}.filter-type{min-width:180px}.filter-select{width:100%;padding:10px 14px;border:1px solid #ced4da;border-radius:6px;font-size:14px;background:#fff;cursor:pointer;transition:border-color .2s}.filter-select:focus{outline:none;border-color:#dc3545}.filter-info{font-size:13px;color:#6c757d;white-space:nowrap}.blocklist-table-container{background:#fff;border:1px solid #e9ecef;border-radius:8px;overflow:hidden}.blocklist-table{width:100%;border-collapse:collapse}.blocklist-table thead{background:#f8f9fa;border-bottom:2px solid #e9ecef}.blocklist-table th{padding:14px 16px;text-align:left;font-size:13px;font-weight:600;color:#495057;text-transform:uppercase;letter-spacing:.5px}.blocklist-table tbody tr{border-bottom:1px solid #e9ecef;transition:background .2s}.blocklist-table tbody tr:hover{background:#f8f9fa}.blocklist-table tbody tr:last-child{border-bottom:none}.blocklist-table td{padding:16px;font-size:14px;color:#212529}.pattern-cell code{background:#f8f9fa;padding:6px 10px;border-radius:4px;border:1px solid #e9ecef;font-family:Consolas,Monaco,Courier New,monospace;font-size:13px;color:#dc3545;font-weight:600}.type-badge{display:inline-block;padding:4px 10px;border-radius:12px;font-size:12px;font-weight:600}.type-email{background:#d1ecf1;color:#0c5460}.type-domain{background:#fff3cd;color:#856404}.reason-cell{max-width:300px}.no-reason{color:#adb5bd;font-size:13px}.activity-cell{display:flex;flex-direction:column;gap:4px}.activity-badge{display:inline-block;padding:4px 8px;border-radius:4px;font-size:11px;font-weight:600}.activity-none{background:#e9ecef;color:#6c757d}.activity-low{background:#d1ecf1;color:#0c5460}.activity-medium{background:#fff3cd;color:#856404}.activity-high{background:#f8d7da;color:#721c24}.block-count,.last-blocked{font-size:11px;color:#6c757d}.date-cell{color:#6c757d;font-size:13px;white-space:nowrap}.actions-cell{text-align:center}.btn-action{background:none;border:1px solid #e9ecef;padding:6px 12px;border-radius:4px;cursor:pointer;font-size:16px;transition:all .2s}.btn-action:hover:not(:disabled){border-color:#dc3545;background:#fff5f5;transform:scale(1.1)}.btn-action:disabled{opacity:.5;cursor:not-allowed}.btn-remove:hover:not(:disabled){border-color:#dc3545;background:#f8d7da}.empty-state{padding:60px 20px;text-align:center}.empty-icon{font-size:64px;margin-bottom:20px;opacity:.3}.empty-state h3{margin:0 0 12px;font-size:20px;color:#495057}.empty-state p{margin:0;color:#6c757d;font-size:14px}.blocklist-manager.loading{padding:60px 20px;text-align:center}.loading-spinner{width:40px;height:40px;border:4px solid #e9ecef;border-top-color:#dc3545;border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 20px}.alert{padding:12px 16px;border-radius:6px;margin-bottom:16px;font-size:14px}.alert-error{background:#f8d7da;border:1px solid #f5c6cb;color:#721c24}@media (max-width: 1200px){.blocklist-table{font-size:13px}.blocklist-table th,.blocklist-table td{padding:12px}}@media (max-width: 768px){.blocklist-header{flex-direction:column;gap:16px}.blocklist-filters{flex-direction:column;align-items:stretch}.filter-search,.filter-type{max-width:none}.blocklist-table{display:block;overflow-x:auto}.blocklist-stats{grid-template-columns:repeat(2,1fr)}}.production-dashboard{padding:1.5rem;max-width:1800px;margin:0 auto;width:100%}.production-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1.5rem}.header-title h2{margin:0;font-size:1.5rem;color:var(--text-color, #333)}.header-title .subtitle{margin:.25rem 0 0;color:var(--text-secondary, #666);font-size:.9rem}.btn-refresh{padding:.5rem 1rem;border:none;border-radius:8px;background:var(--bg-secondary, #f0f0f0);color:var(--text-color, #333);cursor:pointer;font-size:.9rem;transition:background .2s}.btn-refresh:hover:not(:disabled){background:var(--bg-tertiary, #e0e0e0)}.btn-refresh:disabled{opacity:.6;cursor:not-allowed}.error-message{display:flex;align-items:center;justify-content:space-between;padding:1rem;background:#fee2e2;border:1px solid #fecaca;border-radius:8px;margin-bottom:1rem;color:#b91c1c}.error-message button{padding:.5rem 1rem;border:none;border-radius:6px;background:#dc2626;color:#fff;cursor:pointer}.status-tabs{display:flex;gap:.5rem;margin-bottom:1rem;flex-wrap:wrap}.status-tab{padding:.5rem 1rem;border:2px solid transparent;border-radius:8px;background:var(--bg-secondary, #f0f0f0);color:var(--text-color, #333);cursor:pointer;font-size:.85rem;transition:all .2s}.status-tab:hover{background:var(--bg-tertiary, #e0e0e0)}.status-tab.active{border-color:var(--tab-color, #667eea);background:var(--tab-color, #667eea);color:#fff}.search-sort-bar{display:flex;gap:1rem;margin-bottom:1.5rem}.search-input{flex:1;position:relative}.search-input .search-icon{position:absolute;left:1rem;top:50%;transform:translateY(-50%);color:var(--text-secondary, #888)}.search-input input{width:100%;padding:.75rem 2.5rem;border:2px solid var(--border-color, #ddd);border-radius:8px;font-size:.95rem;background:var(--bg-primary, white);color:var(--text-color, #333)}.search-input input:focus{outline:none;border-color:#667eea}.clear-search{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);border:none;background:none;color:var(--text-secondary, #888);cursor:pointer;font-size:1rem;padding:.25rem}.sort-select{padding:.75rem 1rem;border:2px solid var(--border-color, #ddd);border-radius:8px;background:var(--bg-primary, white);color:var(--text-color, #333);font-size:.9rem;cursor:pointer}.loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem 2rem;color:var(--text-secondary, #666)}.spinner{width:40px;height:40px;border:3px solid var(--border-color, #ddd);border-top-color:#667eea;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:1rem}.empty-state{text-align:center;padding:4rem 2rem;color:var(--text-secondary, #666)}.empty-icon{font-size:4rem;margin-bottom:1rem}.empty-state h3{margin:0 0 .5rem;color:var(--text-color, #333)}.empty-state p{margin:0}.designs-list{display:flex;flex-direction:column;gap:1rem}.design-card{display:flex;gap:1rem;padding:1rem;background:var(--bg-primary, white);border:1px solid var(--border-color, #e0e0e0);border-radius:12px;transition:box-shadow .2s}.design-card:hover{box-shadow:0 4px 12px #0000001a}.design-thumbnail{flex-shrink:0;width:100px;height:100px;border-radius:8px;overflow:hidden;background:var(--bg-secondary, #f5f5f5)}.thumbnail-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:2rem;color:var(--text-secondary, #888)}.design-info{flex:1;min-width:0}.design-header{display:flex;align-items:center;gap:.75rem;margin-bottom:.75rem}.design-header h4{margin:0;font-size:1rem;color:var(--text-color, #333);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.status-badge{padding:.25rem .5rem;border-radius:4px;font-size:.75rem;font-weight:600;color:#fff;white-space:nowrap}.design-meta{display:flex;flex-direction:column;gap:.35rem}.meta-row{display:flex;align-items:center;gap:.5rem;font-size:.85rem}.meta-label{color:var(--text-secondary, #888);white-space:nowrap}.meta-value{color:var(--text-color, #333);overflow:hidden;text-overflow:ellipsis}.order-link{color:#667eea;text-decoration:none;font-weight:500}.order-link:hover{text-decoration:underline}.external-icon{font-size:.75em;margin-left:.25rem}.order-id{font-family:monospace;font-size:.8rem;color:var(--text-secondary, #888)}.design-actions{display:flex;flex-direction:column;gap:.75rem;align-items:flex-end;justify-content:center}.download-buttons{display:flex;gap:.5rem}.btn-download,.btn-generate{padding:.4rem .75rem;border:1px solid var(--border-color, #ddd);border-radius:6px;background:var(--bg-primary, white);color:var(--text-color, #333);font-size:.8rem;cursor:pointer;text-decoration:none;transition:all .2s}.btn-download:hover,.btn-generate:hover{background:var(--bg-secondary, #f0f0f0);border-color:#667eea}.btn-next-status{padding:.5rem 1rem;border:none;border-radius:6px;color:#fff;font-size:.85rem;font-weight:500;cursor:pointer;transition:opacity .2s,transform .2s}.btn-next-status:hover{opacity:.9;transform:translate(2px)}@media (max-width: 768px){.design-card{flex-direction:column}.design-thumbnail{width:100%;height:150px}.design-actions{flex-direction:row;align-items:center;justify-content:space-between;width:100%}.status-tabs{overflow-x:auto;flex-wrap:nowrap;padding-bottom:.5rem}.search-sort-bar{flex-direction:column}}.dark-mode .production-dashboard{--bg-primary: #1e1e1e;--bg-secondary: #2d2d2d;--bg-tertiary: #3d3d3d;--text-color: #e0e0e0;--text-secondary: #a0a0a0;--border-color: #404040}.abbr-manager{padding:0}.abbr-manager.loading{padding:60px 20px;text-align:center;color:#666}.abbr-header{margin-bottom:40px}.abbr-header h2{margin:0 0 12px;font-size:24px;color:#1a252f}.abbr-subtitle{margin:0;font-size:14px;color:#666;line-height:1.6}.abbr-subtitle strong{color:#333;font-weight:600}.abbr-subtitle code{background:#f5f5f5;padding:2px 6px;border-radius:4px;font-family:SF Mono,Consolas,Monaco,monospace;font-size:13px;color:#667eea}.abbr-section{margin-bottom:48px}.abbr-section h3{margin:0 0 8px;font-size:18px;font-weight:600;color:#1a252f}.section-hint{margin:0 0 20px;font-size:13px;color:#999;font-style:italic}.abbr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px}.abbr-card{background:var(--app-surface, white);border:2px solid #e0e0e0;border-radius:10px;padding:18px;transition:all .2s ease}.abbr-card:hover{border-color:#667eea;box-shadow:0 4px 12px #667eea26}.abbr-card.product{border-left:4px solid #667eea}.abbr-card.material{border-left:4px solid #28a745}.abbr-card.template{border-left:4px solid #f39c12}.abbr-card-header{margin-bottom:14px}.abbr-card-header h4{margin:0 0 4px;font-size:15px;font-weight:600;color:#1a252f}.abbr-card-id{font-size:12px;font-family:SF Mono,Consolas,Monaco,monospace;color:#999}.abbr-card-input{position:relative;margin-bottom:12px}.abbr-input{width:100%;padding:10px 50px 10px 12px;border:2px solid #d0d0d0;border-radius:6px;font-size:16px;font-weight:600;font-family:SF Mono,Consolas,Monaco,monospace;text-transform:uppercase;transition:all .2s ease}.abbr-input:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.abbr-input.invalid{border-color:#dc3545}.abbr-length{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:12px;font-weight:600;color:#999;pointer-events:none}.abbr-save-btn{width:100%;padding:10px;border:none;border-radius:6px;background:#667eea;color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.abbr-save-btn:hover:not(:disabled){background:#5568d3;transform:translateY(-1px);box-shadow:0 2px 8px #667eea4d}.abbr-save-btn:disabled{opacity:.6;cursor:not-allowed}.abbr-saved{padding:8px;text-align:center;color:#28a745;font-size:13px;font-weight:600}.abbr-hint{padding:8px;text-align:center;color:#999;font-size:12px;font-style:italic}.empty-state-small{padding:30px 20px;background:#f9f9f9;border-radius:8px;border:2px dashed #d0d0d0;text-align:center}.empty-state-small p{margin:0 0 6px;color:#666;font-size:14px}.empty-state-small small{color:#999;font-size:12px}.dark-mode .abbr-manager.loading{color:#d4af76cc}.dark-mode .abbr-header h2,.dark-mode .abbr-section h3,.dark-mode .abbr-card-header h4{color:#d4af76f2}.dark-mode .abbr-subtitle,.dark-mode .section-hint{color:#d4af76b3}.dark-mode .abbr-subtitle strong{color:#d4af76e6}.dark-mode .abbr-subtitle code{background:#1a1a2e99;color:#d4af76e6}.dark-mode .abbr-card{background:#1a1a2e99;border-color:#d4af7633}.dark-mode .abbr-card:hover{border-color:#d4af7680;box-shadow:0 4px 12px #d4af7626}.dark-mode .abbr-card.product{border-left-color:#667eeacc}.dark-mode .abbr-card.material{border-left-color:#28a745cc}.dark-mode .abbr-card.template{border-left-color:#f39c12cc}.dark-mode .abbr-card-id{color:#d4af7699}.dark-mode .abbr-input{background:#0000004d;border-color:#d4af764d;color:#d4af76f2}.dark-mode .abbr-input:focus{border-color:#d4af7699;box-shadow:0 0 0 3px #d4af761a}.dark-mode .abbr-input.invalid{border-color:#dc3545cc}.dark-mode .abbr-length{color:#d4af7699}.dark-mode .abbr-save-btn{background:#d4af764d;color:#d4af76}.dark-mode .abbr-save-btn:hover:not(:disabled){background:#d4af7666;box-shadow:0 2px 8px #d4af764d}.dark-mode .abbr-saved{color:#4caf50e6}.dark-mode .abbr-hint{color:#d4af7699}.dark-mode .empty-state-small{background:#1a1a2e4d;border-color:#d4af7633}.dark-mode .empty-state-small p{color:#d4af76cc}.dark-mode .empty-state-small small{color:#d4af7699}.template-editor-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000bf;display:flex;align-items:center;justify-content:center;z-index:10000;padding:20px;animation:fadeIn .2s ease}.template-editor{background:linear-gradient(135deg,#f8f9fa,#fff);border-radius:16px;box-shadow:0 20px 60px #0000004d;width:95vw;max-width:1600px;height:90vh;display:flex;flex-direction:column;overflow:hidden}.template-editor-header{padding:24px 32px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid rgba(255,255,255,.2)}.template-editor-header h2{margin:0;font-size:24px;font-weight:700}.template-editor-subtitle{margin:4px 0 0;font-size:14px;opacity:.9}.header-actions{display:flex;gap:12px}.template-editor-tabs{display:flex;background:var(--app-surface, white);border-bottom:2px solid #e0e0e0;padding:0 32px;gap:4px}.tab-btn{padding:16px 24px;background:transparent;border:none;border-bottom:3px solid transparent;cursor:pointer;font-size:15px;font-weight:600;color:#666;transition:all .2s ease;display:flex;align-items:center;gap:8px;position:relative}.tab-btn:hover{color:#667eea;background:#667eea0d}.tab-btn.active{color:#667eea;border-bottom-color:#667eea;background:#667eea14}.tab-badge{background:#667eea;color:#fff;border-radius:12px;padding:2px 8px;font-size:12px;font-weight:700}.tab-btn.active .tab-badge{background:var(--app-surface, white);color:#667eea}.template-editor-content{flex:1;overflow-y:auto;padding:32px;background:#f8f9fa}.general-tab{max-width:900px;margin:0 auto}.form-section{background:var(--app-surface, white);border-radius:12px;padding:24px;margin-bottom:24px;box-shadow:0 2px 8px #00000014}.form-section h3{margin:0 0 20px;color:#2c3e50;font-size:18px;font-weight:700;padding-bottom:12px;border-bottom:2px solid #f0f0f0}.form-group{margin-bottom:20px}.form-group label{display:block;margin-bottom:8px;font-weight:600;color:#2c3e50;font-size:14px}.form-group input[type=text],.form-group input[type=email],.form-group input[type=url],.form-group input[type=number],.form-group textarea,.form-group select{width:100%;padding:12px 16px;border:2px solid #e0e0e0;border-radius:8px;font-size:15px;transition:all .2s ease;font-family:inherit}.form-group input:focus,.form-group textarea:focus,.form-group select:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.form-group small{display:block;margin-top:6px;color:#666;font-size:13px}.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}.hint-text{color:#666;font-size:14px;margin-bottom:16px;line-height:1.5}.checkbox-label{display:flex;align-items:center;gap:10px;cursor:pointer;font-weight:500}.checkbox-label input[type=checkbox]{width:18px;height:18px;cursor:pointer}.products-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin-top:16px}.product-card-checkbox{display:flex;flex-direction:column;align-items:center;padding:16px;border:2px solid #e0e0e0;border-radius:10px;cursor:pointer;transition:all .2s ease;background:var(--app-surface, white)}.product-card-checkbox:hover{border-color:#667eea;transform:translateY(-2px);box-shadow:0 4px 12px #667eea26}.product-card-checkbox.selected{border-color:#667eea;background:#667eea14}.product-card-checkbox input[type=checkbox]{margin-bottom:8px}.product-icon{font-size:32px;margin-bottom:8px}.product-name{font-size:13px;font-weight:600;color:#2c3e50;text-align:center}.fields-tab{display:grid;grid-template-columns:400px 1fr;gap:24px;height:100%}.fields-list-panel,.element-editor-panel,.field-editor-panel{background:var(--app-surface, white);border-radius:12px;padding:24px;box-shadow:0 2px 8px #00000014;overflow-y:auto}.panel-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:16px;border-bottom:2px solid #f0f0f0}.panel-header h3{margin:0;font-size:18px;color:#2c3e50}.btn-add-small{padding:8px 16px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.btn-add-small:hover{transform:translateY(-2px);box-shadow:0 4px 12px #667eea4d}.fields-list{display:flex;flex-direction:column;gap:8px}.field-item{padding:14px;background:#f8f9fa;border:2px solid #e0e0e0;border-radius:8px;cursor:pointer;transition:all .2s ease}.field-item:hover{border-color:#667eea;background:#667eea0d}.field-item.active{border-color:#667eea;background:#667eea1a;box-shadow:0 2px 8px #667eea33}.field-item-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.field-item-info{display:flex;align-items:center;gap:8px;flex:1}.field-type-badge{padding:4px 10px;background:#667eea;color:#fff;border-radius:6px;font-size:11px;font-weight:700;text-transform:uppercase}.field-label{font-weight:600;color:#2c3e50;font-size:14px}.required-badge{color:#e74c3c;font-weight:700;font-size:16px}.field-item-actions{display:flex;gap:4px}.btn-icon{padding:4px 8px;background:var(--app-surface, white);border:1px solid #e0e0e0;border-radius:4px;cursor:pointer;font-size:14px;transition:all .2s ease}.btn-icon:hover:not(:disabled){background:#f0f0f0;border-color:#667eea}.btn-icon:disabled{opacity:.3;cursor:not-allowed}.btn-icon.btn-danger:hover:not(:disabled){background:#fee;border-color:#e74c3c}.field-item-meta{font-size:11px;color:#999}.field-item-meta code{background:var(--app-surface, white);padding:2px 6px;border-radius:4px;font-family:Courier New,monospace}.empty-state-small{text-align:center;padding:40px 20px;color:#999}.btn-primary-small{margin-top:16px;padding:10px 20px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer}.field-editor{display:flex;flex-direction:column;height:100%}.field-editor-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:16px;border-bottom:2px solid #f0f0f0}.field-editor-header h4{margin:0;font-size:18px;color:#2c3e50}.btn-close-small{padding:6px 12px;background:#f0f0f0;border:none;border-radius:6px;cursor:pointer;font-size:16px;transition:all .2s ease}.btn-close-small:hover{background:#e0e0e0}.field-editor-form{flex:1;overflow-y:auto}.input-disabled{background:#f8f9fa!important;cursor:not-allowed;color:#999}.options-list{display:flex;flex-direction:column;gap:8px;margin-top:8px}.option-item{display:flex;gap:8px;align-items:center}.btn-danger-icon{padding:8px 12px;background:#fee;border:1px solid #e74c3c;color:#e74c3c;border-radius:6px;cursor:pointer;font-size:14px;transition:all .2s ease}.btn-danger-icon:hover{background:#e74c3c;color:#fff}.btn-secondary-small{padding:8px 16px;background:var(--app-surface, white);border:2px solid #e0e0e0;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease;margin-top:8px}.btn-secondary-small:hover{border-color:#667eea;background:#667eea0d}.elements-tab{display:grid;grid-template-columns:500px 1fr;gap:24px;height:100%}.elements-list-panel{background:var(--app-surface, white);border-radius:12px;padding:24px;box-shadow:0 2px 8px #00000014;overflow-y:auto}.elements-sides{display:flex;flex-direction:column;gap:24px}.elements-side h4{margin:0 0 12px;font-size:16px;color:#2c3e50;padding:8px 12px;background:linear-gradient(135deg,#667eea1a,#764ba21a);border-radius:6px}.elements-list{display:flex;flex-direction:column;gap:8px}.element-item{position:relative;padding:14px;background:#f8f9fa;border:2px solid #e0e0e0;border-radius:8px;cursor:pointer;transition:all .2s ease}.element-item:hover{border-color:#764ba2;background:#764ba20d}.element-item.active{border-color:#764ba2;background:#764ba21a;box-shadow:0 2px 8px #764ba233}.element-item-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.element-type-badge{padding:4px 10px;background:#764ba2;color:#fff;border-radius:6px;font-size:11px;font-weight:700;text-transform:uppercase}.element-position{font-size:12px;color:#666;font-family:Courier New,monospace}.element-item-mapping{font-size:13px;color:#555;margin-bottom:4px}.element-item-condition{font-size:12px;color:#f39c12;font-weight:600}.btn-delete-element{position:absolute;top:8px;right:8px;padding:4px 8px;background:#fee;border:1px solid #e74c3c;border-radius:4px;cursor:pointer;font-size:14px;opacity:0;transition:all .2s ease}.element-item:hover .btn-delete-element{opacity:1}.btn-delete-element:hover{background:#e74c3c;color:#fff}.element-editor{display:flex;flex-direction:column;height:100%}.element-editor-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:16px;border-bottom:2px solid #f0f0f0}.element-editor-header h4{margin:0;font-size:18px;color:#2c3e50}.element-editor-form{flex:1;overflow-y:auto}.element-editor-form h5{margin:20px 0 12px;font-size:15px;color:#764ba2;font-weight:700}.hint-text-small{font-size:13px;color:#666;margin-bottom:12px}.mapping-tab{display:flex;flex-direction:column;height:100%}.mapping-instructions{background:var(--app-surface, white);border-radius:12px;padding:24px;margin-bottom:24px;box-shadow:0 2px 8px #00000014}.mapping-instructions h3{margin:0 0 12px;font-size:20px;color:#2c3e50}.mapping-instructions p{margin:0 0 16px;color:#666;line-height:1.6}.mapping-mode{padding:12px;background:#f8f9fa;border-radius:8px}.mapping-workspace{display:grid;grid-template-columns:1fr 1fr;gap:24px;flex:1;overflow:hidden}.mapping-panel{background:var(--app-surface, white);border-radius:12px;padding:24px;box-shadow:0 2px 8px #00000014;display:flex;flex-direction:column}.mapping-panel h4{margin:0 0 16px;font-size:18px;color:#2c3e50;padding-bottom:12px;border-bottom:2px solid #f0f0f0}.fields-mapping-list,.elements-mapping-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:12px}.field-mapping-item{padding:16px;background:#f8f9fa;border:2px solid #e0e0e0;border-radius:10px;transition:all .2s ease}.field-mapping-item.clickable{cursor:pointer}.field-mapping-item.clickable:hover{border-color:#667eea;background:#667eea0d;transform:translate(4px)}.field-mapping-item.mapped{border-color:#28a745;background:#28a7451a;box-shadow:0 0 0 3px #28a7451a}.field-mapping-header{display:flex;align-items:center;gap:10px;margin-bottom:8px}.field-type-badge-small{padding:3px 8px;background:#667eea;color:#fff;border-radius:4px;font-size:10px;font-weight:700;text-transform:uppercase}.field-label-small{font-weight:600;color:#2c3e50;font-size:14px}.field-mapping-info{font-size:12px;color:#28a745;font-weight:600}.element-mapping-item{padding:16px;background:#f8f9fa;border:2px solid #e0e0e0;border-radius:10px;cursor:pointer;transition:all .2s ease}.element-mapping-item:hover{border-color:#764ba2;background:#764ba20d;transform:translate(-4px)}.element-mapping-item.selected{border-color:#764ba2;background:#764ba226;box-shadow:0 0 0 4px #764ba226}.element-mapping-header{display:flex;align-items:center;gap:8px;margin-bottom:8px}.element-type-badge-small{padding:3px 8px;background:#764ba2;color:#fff;border-radius:4px;font-size:10px;font-weight:700;text-transform:uppercase}.element-side-badge{padding:3px 8px;background:#95a5a6;color:#fff;border-radius:4px;font-size:10px;font-weight:700}.element-mapping-position{font-size:12px;color:#666;margin-bottom:8px;font-family:Courier New,monospace}.element-mapping-fields strong{display:block;font-size:12px;color:#555;margin-bottom:6px}.mapped-fields-list{display:flex;flex-wrap:wrap;gap:6px}.mapped-field-tag{padding:4px 10px;background:#28a745;color:#fff;border-radius:6px;font-size:11px;font-weight:600}.element-mapping-empty{font-size:12px;color:#e74c3c;font-weight:600}.mapping-active-info{margin-top:16px;padding:16px;background:linear-gradient(135deg,#764ba21a,#667eea1a);border-radius:8px;border-left:4px solid #764ba2;font-size:14px;color:#2c3e50}.empty-hint{text-align:center;padding:40px 20px;color:#999;font-style:italic}.preview-tab{display:flex;flex-direction:column;height:100%}.preview-controls{background:var(--app-surface, white);border-radius:12px;padding:24px;margin-bottom:24px;box-shadow:0 2px 8px #00000014;display:flex;justify-content:space-between;align-items:center}.preview-controls h3{margin:0;font-size:20px;color:#2c3e50}.preview-side-toggle{display:flex;gap:8px}.side-btn{padding:10px 20px;background:var(--app-surface, white);border:2px solid #e0e0e0;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.side-btn:hover{border-color:#667eea;background:#667eea0d}.side-btn.active{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-color:transparent}.preview-workspace{display:grid;grid-template-columns:400px 1fr;gap:24px;flex:1;overflow:hidden}.preview-form-panel,.preview-design-panel{background:var(--app-surface, white);border-radius:12px;padding:24px;box-shadow:0 2px 8px #00000014;overflow-y:auto}.preview-form-panel h4,.preview-design-panel h4{margin:0 0 20px;font-size:18px;color:#2c3e50;padding-bottom:12px;border-bottom:2px solid #f0f0f0}.preview-form{display:flex;flex-direction:column;gap:20px}.preview-form-field label{display:block;margin-bottom:8px;font-weight:600;color:#2c3e50;font-size:14px}.preview-form-field .required{color:#e74c3c;margin-left:4px}.preview-form-field input,.preview-form-field textarea,.preview-form-field select{width:100%;padding:10px 14px;border:2px solid #e0e0e0;border-radius:8px;font-size:14px;font-family:inherit}.preview-form-field input:focus,.preview-form-field textarea:focus,.preview-form-field select:focus{outline:none;border-color:#667eea}.preview-form-field small{display:block;margin-top:6px;color:#666;font-size:12px}.preview-canvas{position:relative;width:100%;height:600px;background:var(--app-surface, white);border:2px solid #e0e0e0;border-radius:12px;overflow:hidden}.preview-element{pointer-events:none}.preview-text{white-space:pre-wrap;word-wrap:break-word}.preview-qr{border:2px solid #000;background:var(--app-surface, white)}.preview-image img{display:block}.preview-empty{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#999;font-size:16px;font-style:italic}.btn-primary{padding:12px 24px;background:linear-gradient(135deg,#28a745,#20c997);color:#fff;border:none;border-radius:8px;font-size:15px;font-weight:600;cursor:pointer;transition:all .2s ease}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px #28a7454d}.btn-secondary{padding:12px 24px;background:var(--app-surface, white);color:#666;border:2px solid #e0e0e0;border-radius:8px;font-size:15px;font-weight:600;cursor:pointer;transition:all .2s ease}.btn-secondary:hover{border-color:#667eea;color:#667eea;background:#667eea0d}.btn-thumbnail{padding:12px 24px;background:linear-gradient(135deg,#f39c12,#e67e22);color:#fff;border:none;border-radius:8px;font-size:15px;font-weight:600;cursor:pointer;transition:all .2s ease}.btn-thumbnail:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #f39c124d}.btn-thumbnail:disabled{opacity:.5;cursor:not-allowed;transform:none}.thumbnail-preview{position:relative;max-width:400px;margin-top:16px}.thumbnail-preview img{width:100%;height:auto;border-radius:12px;border:2px solid #e0e0e0;box-shadow:0 4px 12px #0000001a}.btn-remove-thumbnail{margin-top:12px;padding:8px 16px;background:#fee;border:2px solid #e74c3c;color:#e74c3c;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.btn-remove-thumbnail:hover{background:#e74c3c;color:#fff}.thumbnail-placeholder{padding:40px 20px;background:#f8f9fa;border:2px dashed #d0d0d0;border-radius:12px;text-align:center;margin-top:16px}.thumbnail-placeholder p{margin:0 0 8px;color:#999;font-weight:600}.thumbnail-placeholder small{color:#666;font-size:13px}.dark-mode .template-editor{background:linear-gradient(135deg,#2d2d2d,#1e1e1e)}.dark-mode .template-editor-content{background:#1e1e1e}.dark-mode .template-editor-tabs{background:#2d2d2d;border-bottom-color:#3d3d3d}.dark-mode .tab-btn{color:#adb5bd}.dark-mode .tab-btn:hover{color:#a3b8ff;background:#667eea1a}.dark-mode .tab-btn.active{color:#a3b8ff;background:#667eea26}.dark-mode .form-section,.dark-mode .fields-list-panel,.dark-mode .element-editor-panel,.dark-mode .field-editor-panel,.dark-mode .elements-list-panel,.dark-mode .mapping-panel,.dark-mode .mapping-instructions,.dark-mode .preview-controls,.dark-mode .preview-form-panel,.dark-mode .preview-design-panel{background:#2d2d2d;border-color:#3d3d3d}.dark-mode .form-section h3,.dark-mode .panel-header h3,.dark-mode .field-editor-header h4,.dark-mode .element-editor-header h4,.dark-mode .mapping-panel h4,.dark-mode .mapping-instructions h3,.dark-mode .preview-controls h3,.dark-mode .preview-form-panel h4,.dark-mode .preview-design-panel h4{color:#e0e0e0;border-bottom-color:#3d3d3d}.dark-mode .form-group label,.dark-mode .field-label,.dark-mode .preview-form-field label{color:#e0e0e0}.dark-mode .form-group input,.dark-mode .form-group textarea,.dark-mode .form-group select,.dark-mode .preview-form-field input,.dark-mode .preview-form-field textarea,.dark-mode .preview-form-field select,.dark-mode .css-editor-textarea{background:#1e1e1e;border-color:#3d3d3d;color:#e0e0e0}.dark-mode .form-group input:focus,.dark-mode .form-group textarea:focus,.dark-mode .form-group select:focus,.dark-mode .preview-form-field input:focus,.dark-mode .preview-form-field textarea:focus,.dark-mode .preview-form-field select:focus{border-color:#667eea;background:#1e1e1e}.dark-mode .form-group small,.dark-mode .hint-text,.dark-mode .hint-text-small,.dark-mode .preview-form-field small{color:#adb5bd}.dark-mode .input-disabled{background:#1a1a1a!important;color:#6c757d}.dark-mode .product-card-checkbox{background:#1e1e1e;border-color:#3d3d3d}.dark-mode .product-card-checkbox:hover{border-color:#667eea;background:#2a2a3a}.dark-mode .product-card-checkbox.selected{background:#667eea26}.dark-mode .product-name{color:#e0e0e0}.dark-mode .field-item,.dark-mode .element-item{background:#1e1e1e;border-color:#3d3d3d}.dark-mode .field-item:hover,.dark-mode .element-item:hover{background:#667eea1a}.dark-mode .field-item.active,.dark-mode .element-item.active{background:#667eea33}.dark-mode .field-label{color:#e0e0e0}.dark-mode .field-item-meta,.dark-mode .element-position{color:#6c757d}.dark-mode .field-item-meta code{background:#2d2d2d;color:#e0e0e0}.dark-mode .element-item-mapping{color:#adb5bd}.dark-mode .btn-icon{background:#1e1e1e;border-color:#3d3d3d;color:#e0e0e0}.dark-mode .btn-icon:hover:not(:disabled){background:#2d2d2d}.dark-mode .btn-close-small{background:#1e1e1e;color:#e0e0e0}.dark-mode .btn-close-small:hover{background:#2d2d2d}.dark-mode .btn-secondary-small{background:#1e1e1e;border-color:#3d3d3d;color:#e0e0e0}.dark-mode .btn-secondary-small:hover{background:#2a2a3a;border-color:#667eea}.dark-mode .side-btn{background:#1e1e1e;border-color:#3d3d3d;color:#e0e0e0}.dark-mode .side-btn:hover{background:#2a2a3a;border-color:#667eea}.dark-mode .btn-secondary{background:#1e1e1e;border-color:#3d3d3d;color:#e0e0e0}.dark-mode .btn-secondary:hover{background:#2a2a3a;border-color:#667eea;color:#a3b8ff}.dark-mode .mapping-mode{background:#1e1e1e}.dark-mode .field-mapping-item,.dark-mode .element-mapping-item{background:#1e1e1e;border-color:#3d3d3d}.dark-mode .field-mapping-item.clickable:hover{background:#667eea1a}.dark-mode .field-mapping-item.mapped{border-color:#4caf50;background:#4caf5026}.dark-mode .field-label-small{color:#e0e0e0}.dark-mode .field-mapping-info{color:#51cf66}.dark-mode .element-mapping-item:hover{background:#764ba21a}.dark-mode .element-mapping-item.selected{background:#764ba233}.dark-mode .element-mapping-position,.dark-mode .element-mapping-fields strong{color:#adb5bd}.dark-mode .element-mapping-empty{color:#ff6b6b}.dark-mode .mapping-active-info{background:linear-gradient(135deg,#764ba226,#667eea26);border-left-color:#a3b8ff;color:#e0e0e0}.dark-mode .empty-hint,.dark-mode .empty-state-small{color:#6c757d}.dark-mode .preview-canvas{background:#1e1e1e;border-color:#3d3d3d}.dark-mode .preview-empty{color:#6c757d}.dark-mode .thumbnail-placeholder{background:#1e1e1e;border-color:#3d3d3d}.dark-mode .thumbnail-placeholder p{color:#6c757d}.dark-mode .thumbnail-placeholder small{color:#adb5bd}.dark-mode .element-editor-form h5{color:#ce93d8}.dark-mode .panel-header,.dark-mode .field-editor-header,.dark-mode .element-editor-header{border-bottom-color:#3d3d3d}.dark-mode .mapping-instructions p{color:#adb5bd}@media (max-width: 1400px){.fields-tab,.elements-tab{grid-template-columns:350px 1fr}}@media (max-width: 1024px){.template-editor{width:98vw;height:95vh}.template-editor-header,.template-editor-content{padding:20px}.fields-tab,.elements-tab,.mapping-workspace,.preview-workspace{grid-template-columns:1fr}.field-editor-panel,.element-editor-panel{position:fixed;top:0;left:0;right:0;bottom:0;z-index:1000;border-radius:0}}.category-checkboxes{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:.5rem}.category-checkbox-label{display:flex;align-items:center;gap:.5rem;cursor:pointer;padding:.5rem .75rem;border:1px solid #ddd;border-radius:8px;background:#fff;transition:all .2s ease}.category-checkbox-label:hover{background:#f8f9fa;border-color:#667eea}.category-checkbox-label input[type=checkbox]{width:auto;margin:0;cursor:pointer}.category-badge{padding:.25rem .75rem;border-radius:6px;color:#fff;font-size:.9rem;font-weight:600;white-space:nowrap}.form-hint{display:block;margin-top:.5rem;color:#6c757d;font-size:.875rem;font-style:italic}.template-management{padding:1rem;max-width:100%}.template-management.loading,.template-management.error{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:300px;gap:1rem}.loading-spinner{width:40px;height:40px;border:3px solid var(--app-border, #e0e0e0);border-top-color:var(--app-primary, #667eea);border-radius:50%;animation:spin 1s linear infinite}.btn-retry{padding:.5rem 1rem;background:var(--app-primary, #667eea);color:#fff;border:none;border-radius:6px;cursor:pointer}.tm-stats-bar{display:flex;gap:1rem;margin-bottom:1.5rem;padding:1rem;background:var(--app-card-bg, white);border-radius:12px;box-shadow:0 2px 8px #0000000f}.tm-stat{display:flex;flex-direction:column;align-items:center;padding:.75rem 1.5rem;border-radius:8px;background:#00000005}.tm-stat .stat-value{font-size:1.75rem;font-weight:700;color:var(--app-text-primary, #1a1a1a)}.tm-stat .stat-label{font-size:.75rem;color:var(--app-text-secondary, #666);text-transform:uppercase;letter-spacing:.5px;margin-top:.25rem}.tm-stat.featured .stat-value{color:#f59e0b}.tm-stat.form .stat-value{color:#667eea}.tm-stat.inspiration .stat-value{color:#10b981}.tm-toolbar{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.5rem;flex-wrap:wrap}.tm-toolbar-left{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}.tm-toolbar-right{display:flex;align-items:center;gap:.75rem}.tm-view-toggle{display:flex;background:var(--app-card-bg, white);border-radius:8px;padding:4px;box-shadow:0 2px 4px #0000000f;margin-right:1rem}.view-toggle-btn{padding:.6rem 1.2rem;border:none;background:transparent;color:var(--app-text-secondary, #666);font-size:.9rem;font-weight:600;cursor:pointer;border-radius:6px;transition:all .2s;white-space:nowrap}.view-toggle-btn:hover{background:#0000000a}.view-toggle-btn.active{background:linear-gradient(135deg,#d4af76,#b8935a);color:#fff;box-shadow:0 2px 8px #d4af764d}.tm-filter-buttons{display:flex;background:var(--app-card-bg, white);border-radius:8px;padding:4px;box-shadow:0 2px 4px #0000000f}.filter-btn{padding:.5rem 1rem;border:none;background:transparent;color:var(--app-text-secondary, #666);font-size:.875rem;font-weight:500;cursor:pointer;border-radius:6px;transition:all .2s;white-space:nowrap}.filter-btn:hover{background:#0000000a}.filter-btn.active{background:var(--app-primary, #667eea);color:#fff}.tm-search{position:relative}.tm-search input{padding:.6rem 2.5rem .6rem 1rem;border:2px solid var(--app-border, #e0e0e0);border-radius:8px;font-size:.9rem;width:250px;transition:border-color .2s}.tm-search input:focus{outline:none;border-color:var(--app-primary, #667eea)}.search-clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--app-text-secondary, #666);cursor:pointer;padding:4px}.tm-sort-select{padding:.6rem 1rem;border:2px solid var(--app-border, #e0e0e0);border-radius:8px;font-size:.9rem;background:var(--app-card-bg, white);cursor:pointer}.btn-convert-template{padding:.6rem 1.25rem;background:var(--app-surface, white);color:var(--app-primary, #667eea);border:2px solid var(--app-primary, #667eea);border-radius:8px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s;white-space:nowrap}.btn-convert-template:hover{background:var(--app-primary, #667eea);color:#fff}.btn-create-template{padding:.6rem 1.25rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:8px;font-size:.9rem;font-weight:600;cursor:pointer;transition:transform .2s,box-shadow .2s;white-space:nowrap}.btn-create-template:hover{transform:translateY(-1px);box-shadow:0 4px 12px #667eea59}.tm-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem 2rem;text-align:center;background:var(--app-card-bg, white);border-radius:12px;box-shadow:0 2px 8px #0000000f}.tm-empty-state .empty-icon{font-size:4rem;margin-bottom:1rem;opacity:.5}.tm-empty-state h3{margin:0 0 .5rem;color:var(--app-text-primary, #1a1a1a)}.tm-empty-state p{color:var(--app-text-secondary, #666);margin-bottom:1.5rem}.tm-empty-state .btn-primary{padding:.75rem 1.5rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:8px;font-weight:600;cursor:pointer}.tm-template-list{display:grid;gap:1rem}.tm-template-card{display:grid;grid-template-columns:120px 1fr auto;gap:1rem;padding:1rem;background:var(--app-card-bg, white);border-radius:12px;box-shadow:0 2px 8px #0000000f;transition:box-shadow .2s,transform .2s}.tm-template-card:hover{box-shadow:0 4px 16px #0000001a}.tm-template-card.disabled{opacity:.6}.tc-thumbnail{position:relative;width:120px;height:90px;border-radius:8px;overflow:hidden;background:var(--app-bg, #f5f5f5);cursor:pointer}.tc-thumbnail img{width:100%;height:100%;object-fit:cover}.tc-thumbnail-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:2rem;background:linear-gradient(135deg,#f0f0f0,#e0e0e0)}.tc-featured-badge{position:absolute;top:6px;left:6px;padding:2px 8px;background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;font-size:.65rem;font-weight:700;text-transform:uppercase;border-radius:4px}.tc-type-badge{position:absolute;bottom:6px;right:6px;padding:2px 8px;font-size:.65rem;font-weight:600;text-transform:uppercase;border-radius:4px;background:#000000b3;color:#fff}.tc-type-badge[data-type=form]{background:#667eeae6}.tc-type-badge[data-type=inspiration]{background:#10b981e6}.tc-info{display:flex;flex-direction:column;gap:.5rem;min-width:0}.tc-header{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}.tc-name{margin:0;font-size:1.1rem;font-weight:600;color:var(--app-text-primary, #1a1a1a);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tc-name:hover{color:var(--app-primary, #667eea)}.tc-toggles{display:flex;gap:.25rem;flex-shrink:0}.toggle-btn{width:28px;height:28px;padding:0;border:2px solid var(--app-border, #e0e0e0);background:var(--app-card-bg, white);border-radius:6px;cursor:pointer;font-size:.9rem;color:var(--app-text-tertiary, #999);transition:all .2s}.toggle-btn:hover{border-color:var(--app-primary, #667eea)}.toggle-btn.active{background:var(--app-primary, #667eea);border-color:var(--app-primary, #667eea);color:#fff}.toggle-btn.star.active{background:#f59e0b;border-color:#f59e0b}.tc-description{margin:0;font-size:.875rem;color:var(--app-text-secondary, #666);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.tc-meta{display:flex;gap:1rem;flex-wrap:wrap}.tc-meta-item{font-size:.8rem;color:var(--app-text-tertiary, #999)}.tc-products{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.tc-products-label{font-size:.75rem;color:var(--app-text-tertiary, #999)}.tc-product-tag{padding:2px 8px;background:#667eea1a;color:var(--app-primary, #667eea);font-size:.75rem;font-weight:500;border-radius:4px}.tc-product-more{font-size:.75rem;color:var(--app-text-tertiary, #999)}.tc-tags{display:flex;gap:.5rem;flex-wrap:wrap}.tc-tag{padding:2px 8px;background:#0000000a;color:var(--app-text-secondary, #666);font-size:.7rem;border-radius:4px}.tc-actions{display:flex;flex-direction:column;gap:.5rem;position:relative}.tc-actions button{width:36px;height:36px;padding:0;border:none;background:transparent;border-radius:8px;cursor:pointer;font-size:1rem;transition:background .2s}.tc-actions button:hover{background:#0000000f}.tc-actions .btn-edit:hover{color:#667eea}.tc-actions .btn-duplicate:hover{color:#10b981}.tc-actions-dropdown{position:absolute;top:100%;right:0;z-index:100;min-width:180px;padding:.5rem 0;background:var(--app-card-bg, white);border-radius:8px;box-shadow:0 8px 24px #00000026}.tc-actions-dropdown button{width:100%;padding:.6rem 1rem;text-align:left;font-size:.875rem;height:auto;border-radius:0}.tc-actions-dropdown button:hover{background:#0000000a}.tc-actions-dropdown button.danger{color:#ef4444}.tc-actions-dropdown hr{margin:.5rem 0;border:none;border-top:1px solid var(--app-border, #e0e0e0)}.tm-header{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:1.5rem}.tm-header h2{margin:0;font-size:1.5rem;color:var(--app-text-primary, #1a1a1a)}.tm-subtitle{margin:.25rem 0 0;color:var(--app-text-secondary, #666);font-size:.9rem}.tm-template-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.5rem}.tm-template-card{display:flex;flex-direction:column;background:var(--app-card-bg, white);border-radius:12px;box-shadow:0 2px 8px #0000000f;overflow:hidden;transition:box-shadow .2s,transform .2s}.tm-template-card:hover{box-shadow:0 8px 24px #0000001f;transform:translateY(-2px)}.tc-thumbnail{position:relative;width:100%;height:160px;background:var(--app-bg, #f5f5f5);cursor:pointer}.tc-badge{position:absolute;padding:4px 10px;font-size:.75rem;font-weight:600;border-radius:4px}.tc-badge.featured{top:8px;left:8px;background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff}.tc-badge.type-inspiration{bottom:8px;right:8px;background:#6366f1e6;color:#fff}.tc-badge.type-form{bottom:8px;right:8px;background:#10b981e6;color:#fff}.tc-info{padding:1rem;flex:1}.tc-name{margin:0 0 .5rem;font-size:1rem;cursor:pointer}.tc-meta{display:flex;gap:.75rem;margin-top:.75rem;font-size:.8rem;color:var(--app-text-tertiary, #999)}.tc-actions{display:flex;gap:.5rem;padding:.75rem 1rem;border-top:1px solid var(--app-border, #e5e5e5);background:var(--app-bg, #f9f9f9);align-items:center}.tc-actions .toggle-btn{padding:.4rem .75rem;font-size:.8rem;border-radius:6px;border:1px solid var(--app-border, #ddd);background:#fff;cursor:pointer;transition:all .2s}.tc-actions .toggle-btn:hover{border-color:var(--app-primary, #667eea)}.tc-actions .toggle-btn.active{background:#10b981;border-color:#10b981;color:#fff}.tc-actions .btn-action{width:32px;height:32px;padding:0;border:1px solid var(--app-border, #ddd);background:#fff;border-radius:6px;cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center;transition:all .2s}.tc-actions .btn-action:hover{border-color:var(--app-primary, #667eea);transform:translateY(-1px);box-shadow:0 2px 4px #0000001a}.tc-actions .btn-action.featured{background:#f59e0b;border-color:#f59e0b;color:#fff}.tc-actions .btn-action.featured:hover{background:#d97706;border-color:#d97706}.tc-actions .btn-action.btn-danger:hover{border-color:#ef4444;color:#ef4444}.create-wizard{padding:1rem;max-width:1200px;margin:0 auto}.wizard-progress{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-bottom:2rem;padding:1.5rem;background:var(--app-card-bg, white);border-radius:12px}.progress-step{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border-radius:8px;opacity:.5}.progress-step.active{opacity:1;background:#667eea1a}.progress-step.completed{opacity:1}.progress-step.completed .step-number{background:#10b981}.step-number{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:var(--app-primary, #667eea);color:#fff;font-size:.875rem;font-weight:600;border-radius:50%}.step-label{font-size:.9rem;font-weight:500}.progress-line{width:60px;height:2px;background:var(--app-border, #e5e5e5)}.wizard-step{background:var(--app-card-bg, white);border-radius:12px;padding:2rem}.step-header{margin-bottom:1.5rem;text-align:center}.step-header h3{margin:0 0 .5rem;font-size:1.25rem}.step-header p{margin:0;color:var(--app-text-secondary, #666)}.project-filters{display:flex;gap:1rem;margin-bottom:1.5rem}.project-filters select,.project-filters input{padding:.6rem 1rem;border:1px solid var(--app-border, #ddd);border-radius:8px;font-size:.9rem}.project-filters input{flex:1}.project-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem;max-height:450px;overflow-y:auto;padding:.5rem}.project-card{display:flex;flex-direction:column;background:var(--app-bg, #f9f9f9);border:2px solid transparent;border-radius:10px;overflow:hidden;cursor:pointer;transition:border-color .2s,transform .2s}.project-card:hover{border-color:var(--app-primary, #667eea)}.project-card.selected{border-color:var(--app-primary, #667eea);background:#667eea0d}.project-thumbnail{position:relative;height:140px;background:var(--app-border, #e5e5e5)}.project-thumbnail img{width:100%;height:100%;object-fit:cover}.project-thumbnail .thumbnail-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:2.5rem;opacity:.5}.project-thumbnail .selected-badge{position:absolute;top:8px;right:8px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:var(--app-primary, #667eea);color:#fff;font-weight:700;border-radius:50%}.project-info{padding:.75rem}.project-info h4{margin:0 0 .25rem;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.project-meta{display:flex;gap:.5rem;font-size:.75rem;color:var(--app-text-secondary, #666)}.project-meta span{padding:2px 6px;background:#0000000d;border-radius:4px}.project-creator{display:flex;align-items:center;gap:.5rem;margin-top:.5rem;font-size:.75rem;color:var(--app-text-tertiary, #999)}.admin-badge{padding:2px 6px;background:#667eea26;color:var(--app-primary, #667eea);font-weight:600;border-radius:4px}.settings-layout{display:grid;grid-template-columns:280px 1fr;gap:2rem}.template-preview{background:var(--app-bg, #f9f9f9);border-radius:10px;overflow:hidden}.template-preview .preview-thumbnail{height:180px;background:var(--app-border, #e5e5e5)}.template-preview .preview-thumbnail img{width:100%;height:100%;object-fit:cover}.template-preview .preview-info{padding:1rem;display:flex;flex-direction:column;gap:.5rem;font-size:.85rem;color:var(--app-text-secondary, #666)}.settings-form{display:flex;flex-direction:column;gap:1rem}.form-group label{display:block;margin-bottom:.4rem;font-size:.85rem;font-weight:500;color:var(--app-text-secondary, #666)}.form-group input,.form-group textarea,.form-group select{width:100%;padding:.6rem .75rem;border:1px solid var(--app-border, #ddd);border-radius:8px;font-size:.9rem}.form-row{display:flex;gap:1rem}.form-row .form-group{flex:1}.form-group.checkboxes{display:flex;flex-direction:column;gap:.5rem}.checkbox-label{display:flex;align-items:center;gap:.5rem;font-size:.9rem;cursor:pointer}.checkbox-label input{width:auto}.step-actions{display:flex;justify-content:space-between;align-items:center;margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--app-border, #e5e5e5)}.action-group{display:flex;gap:.75rem}.btn-secondary{padding:.6rem 1.25rem;background:transparent;border:1px solid var(--app-border, #ddd);border-radius:8px;cursor:pointer;font-size:.9rem}.btn-primary{padding:.6rem 1.25rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:.9rem;font-weight:500}.form-builder{display:grid;grid-template-columns:1fr 1fr;gap:2rem}.fb-elements,.fb-preview{background:var(--app-bg, #f9f9f9);border-radius:10px;padding:1rem}.fb-elements h4,.fb-preview h4{margin:0 0 .25rem;font-size:1rem}.fb-elements .hint{margin:0 0 1rem;font-size:.8rem;color:var(--app-text-secondary, #666)}.elements-list{display:flex;flex-direction:column;gap:.5rem}.element-item{display:flex;align-items:flex-start;gap:.75rem;padding:.75rem;background:var(--app-card-bg, white);border-radius:8px;border:1px solid var(--app-border, #e5e5e5)}.element-item.selected{border-color:var(--app-primary, #667eea);background:#667eea08}.element-preview{flex:1}.element-preview .side-badge{display:inline-block;padding:2px 6px;background:#0000000f;font-size:.7rem;border-radius:3px;margin-right:.5rem}.element-text{font-size:.85rem;color:var(--app-text-secondary, #555)}.field-config{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.5rem}.field-config input,.field-config select{padding:.4rem .6rem;font-size:.8rem;border:1px solid var(--app-border, #ddd);border-radius:6px}.field-config input{flex:1;min-width:120px}.checkbox-small{display:flex;align-items:center;gap:.25rem;font-size:.8rem}.fb-preview .empty-preview{padding:2rem;text-align:center;color:var(--app-text-secondary, #666)}.preview-form{display:flex;flex-direction:column;gap:1rem}.preview-field label{display:block;font-size:.85rem;margin-bottom:.25rem}.preview-field .required{color:#ef4444;margin-left:.25rem}.preview-field input,.preview-field textarea{width:100%;padding:.5rem;border:1px solid var(--app-border, #ddd);border-radius:6px;background:#fff}.empty-state{padding:3rem;text-align:center;color:var(--app-text-secondary, #666)}.empty-state .hint{font-size:.85rem;opacity:.7;margin-top:.5rem}.dark-mode .template-management,.dark-mode .create-wizard,.dark-mode .tm-header h2,.dark-mode .wizard-step h3,.dark-mode .tc-name,.dark-mode .project-info h4{color:#f0e6d3}.dark-mode .tm-stats-bar,.dark-mode .tm-toolbar,.dark-mode .tm-template-card,.dark-mode .wizard-progress,.dark-mode .wizard-step{background:#1e1e1ef2;border:1px solid rgba(212,175,118,.2)}.dark-mode .project-card,.dark-mode .element-item,.dark-mode .fb-elements,.dark-mode .fb-preview,.dark-mode .template-preview{background:#282828cc;border-color:#d4af7626}.dark-mode .project-card.selected{background:#d4af761a;border-color:#d4af7680}.dark-mode .tc-actions{background:#141414cc;border-color:#d4af7626}.dark-mode .tc-actions .toggle-btn,.dark-mode .tc-actions .btn-action{background:#282828cc;border-color:#d4af7633;color:#f0e6d3}.dark-mode .tc-actions .toggle-btn.active{background:#10b981;border-color:#10b981;color:#fff}.dark-mode .tc-actions .btn-action.featured{background:#f59e0b;border-color:#f59e0b;color:#fff}.dark-mode .btn-secondary{background:#323232cc;border-color:#d4af764d;color:#f0e6d3}.dark-mode .form-group input,.dark-mode .form-group textarea,.dark-mode .form-group select,.dark-mode .project-filters input,.dark-mode .project-filters select{background:#282828cc;border-color:#d4af7633;color:#f0e6d3}@media (max-width: 1024px){.settings-layout,.form-builder{grid-template-columns:1fr}}@media (max-width: 768px){.tm-header{flex-direction:column}.tm-stats-bar{flex-wrap:wrap;justify-content:center}.tm-toolbar{flex-direction:column;align-items:stretch}.tm-toolbar-left,.tm-toolbar-right{flex-wrap:wrap;justify-content:center}.tm-search input{width:100%}.tm-template-grid,.project-grid{grid-template-columns:1fr}.wizard-progress{flex-wrap:wrap}.progress-line{display:none}}.webhook-manager{display:flex;flex-direction:column;gap:1.5rem}.webhook-tabs{display:flex;gap:.5rem;border-bottom:2px solid var(--app-border, #e5e5e5);padding-bottom:0}.webhook-tabs .tab-btn{padding:.75rem 1.25rem;background:transparent;border:none;border-bottom:3px solid transparent;margin-bottom:-2px;color:var(--app-text-secondary, #666);font-weight:500;cursor:pointer;transition:all .2s ease}.webhook-tabs .tab-btn:hover{color:var(--app-text-primary, #333);background:var(--app-bg-hover, #f5f5f5)}.webhook-tabs .tab-btn.active{color:var(--app-primary, #007bff);border-bottom-color:var(--app-primary, #007bff)}.webhook-content{padding:1rem 0}.overview-tab{display:flex;flex-direction:column;gap:2rem}.status-card{background:var(--app-bg-card, #fff);border:1px solid var(--app-border, #e5e5e5);border-radius:12px;padding:1.5rem;display:flex;align-items:center;gap:1.5rem}.status-card h3{margin:0;font-size:1rem;color:var(--app-text-secondary, #666)}.status-indicator{display:flex;align-items:center;gap:.5rem;flex:1}.status-dot{width:12px;height:12px;border-radius:50%;animation:pulse 2s infinite}.status-indicator.online .status-dot{background:#22c55e;box-shadow:0 0 8px #22c55e80}.status-indicator.offline .status-dot{background:#ef4444;box-shadow:0 0 8px #ef444480}.status-indicator.checking .status-dot{background:#f59e0b;box-shadow:0 0 8px #f59e0b80}.status-text{font-weight:600;font-size:1.1rem}.status-indicator.online .status-text{color:#22c55e}.status-indicator.offline .status-text{color:#ef4444}.status-indicator.checking .status-text{color:#f59e0b}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.btn-refresh{padding:.5rem 1rem;background:var(--app-bg-hover, #f5f5f5);border:1px solid var(--app-border, #e5e5e5);border-radius:8px;cursor:pointer;transition:all .2s ease}.btn-refresh:hover:not(:disabled){background:var(--app-bg-active, #eee)}.btn-refresh:disabled{opacity:.5;cursor:not-allowed}.quick-actions h3,.summary-stats h3{margin:0 0 1rem;font-size:1.1rem;color:var(--app-text-primary, #333)}.action-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem}.action-card{display:flex;align-items:center;gap:1rem;padding:1.25rem;background:var(--app-bg-card, #fff);border:1px solid var(--app-border, #e5e5e5);border-radius:12px;cursor:pointer;transition:all .2s ease}.action-card:hover{border-color:var(--app-primary, #007bff);box-shadow:0 4px 12px #00000014;transform:translateY(-2px)}.action-icon{font-size:2rem;width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:var(--app-bg-hover, #f5f5f5);border-radius:10px}.action-info{flex:1}.action-info h4{margin:0 0 .25rem;font-size:1rem;color:var(--app-text-primary, #333)}.action-info p{margin:0;font-size:.85rem;color:var(--app-text-secondary, #666)}.action-arrow{font-size:1.25rem;color:var(--app-primary, #007bff)}.action-badge{font-size:.7rem;padding:.25rem .5rem;background:var(--app-bg-hover, #f5f5f5);border-radius:4px;color:var(--app-text-secondary, #666)}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem}.stat-card{background:var(--app-bg-card, #fff);border:1px solid var(--app-border, #e5e5e5);border-radius:12px;padding:1.5rem;text-align:center}.stat-value{display:block;font-size:2.5rem;font-weight:700;color:var(--app-primary, #007bff)}.stat-label{display:block;font-size:.85rem;color:var(--app-text-secondary, #666);margin-top:.5rem}.workflow-tab{display:flex;flex-direction:column;gap:2rem}.workflow-intro h3{margin:0 0 .5rem}.workflow-intro p{color:var(--app-text-secondary, #666);margin:0}.pipeline-visualization{display:flex;flex-direction:column;gap:0}.pipeline-step{display:flex;gap:1.5rem;padding:1.5rem;background:var(--app-bg-card, #fff);border:1px solid var(--app-border, #e5e5e5);border-radius:12px;position:relative}.pipeline-step.final{border-color:var(--app-primary, #007bff);background:linear-gradient(135deg,#007bff0d,#007bff05)}.step-number{width:40px;height:40px;background:var(--app-primary, #007bff);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.1rem;flex-shrink:0}.step-content{flex:1}.step-content h4{margin:0 0 .5rem;font-size:1.1rem}.step-content>p{margin:0 0 1rem;color:var(--app-text-secondary, #666)}.step-details{background:var(--app-bg-hover, #f5f5f5);border-radius:8px;padding:1rem}.step-details code{display:block;background:var(--app-bg-code, #2d2d2d);color:#f8f8f2;padding:.5rem .75rem;border-radius:4px;font-size:.85rem;margin-bottom:.75rem}.step-details ul{margin:0;padding-left:1.25rem}.step-details li{font-size:.9rem;color:var(--app-text-secondary, #666);margin-bottom:.25rem}.pipeline-connector{display:flex;justify-content:center;padding:.5rem;color:var(--app-text-secondary, #666);font-size:1.25rem}.workflow-actions{display:flex;justify-content:center;padding-top:1rem}.btn-primary.large{padding:1rem 2rem;font-size:1.1rem;background:var(--app-primary, #007bff);color:#fff;border:none;border-radius:10px;cursor:pointer;transition:all .2s ease}.btn-primary.large:hover{background:var(--app-primary-dark, #0056b3);transform:translateY(-2px);box-shadow:0 4px 12px #007bff4d}.endpoints-tab{display:flex;flex-direction:column;gap:2rem}.endpoints-tab>h3{margin:0}.endpoint-group{background:var(--app-bg-card, #fff);border:1px solid var(--app-border, #e5e5e5);border-radius:12px;padding:1.5rem}.endpoint-group h4{margin:0 0 .5rem;font-size:1.1rem}.group-description{color:var(--app-text-secondary, #666);margin:0 0 1.5rem;font-size:.9rem}.endpoint-card{background:var(--app-bg-hover, #f5f5f5);border-radius:8px;padding:1rem;margin-bottom:1rem}.endpoint-card:last-child{margin-bottom:0}.endpoint-header{display:flex;align-items:center;gap:.75rem;margin-bottom:.5rem}.method{padding:.25rem .5rem;border-radius:4px;font-size:.75rem;font-weight:700;text-transform:uppercase}.method.post{background:#22c55e;color:#fff}.method.get{background:#3b82f6;color:#fff}.method.put{background:#f59e0b;color:#fff}.method.delete{background:#ef4444;color:#fff}.endpoint-header code{font-size:.9rem;font-weight:600}.endpoint-card>p{margin:0 0 1rem;font-size:.9rem;color:var(--app-text-secondary, #666)}.endpoint-params,.endpoint-response{margin-top:1rem}.endpoint-params strong,.endpoint-response strong{display:block;font-size:.85rem;margin-bottom:.5rem}.endpoint-params pre,.endpoint-response pre{background:var(--app-bg-code, #2d2d2d);color:#f8f8f2;padding:.75rem 1rem;border-radius:6px;font-size:.8rem;overflow-x:auto;margin:0}.endpoint-auth{display:flex;align-items:center;gap:1rem;margin-top:.75rem;padding:.75rem;background:#f59e0b1a;border:1px solid rgba(245,158,11,.3);border-radius:6px}.auth-badge{background:#f59e0b;color:#fff;padding:.25rem .5rem;border-radius:4px;font-size:.75rem;font-weight:600}.endpoint-auth code{font-size:.85rem;color:var(--app-text-secondary, #666)}.endpoint-list{display:flex;flex-direction:column;gap:.5rem}.endpoint-item{display:flex;align-items:center;gap:.75rem;padding:.5rem 0;border-bottom:1px solid var(--app-border, #e5e5e5)}.endpoint-item:last-child{border-bottom:none}.n8n-tab{display:flex;flex-direction:column;gap:2rem}.n8n-intro h3{margin:0 0 .5rem}.n8n-intro p{margin:0;color:var(--app-text-secondary, #666)}.setup-guide{background:var(--app-bg-card, #fff);border:1px solid var(--app-border, #e5e5e5);border-radius:12px;padding:1.5rem}.setup-guide h4{margin:0 0 1.5rem;font-size:1.1rem}.setup-step{display:flex;gap:1rem;margin-bottom:1.5rem}.setup-step:last-child{margin-bottom:0}.setup-number{width:32px;height:32px;background:var(--app-primary, #007bff);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem;flex-shrink:0}.setup-content{flex:1}.setup-content h5{margin:0 0 .5rem;font-size:1rem}.setup-content p{margin:0;font-size:.9rem;color:var(--app-text-secondary, #666)}.setup-content pre{background:var(--app-bg-code, #2d2d2d);color:#f8f8f2;padding:.75rem 1rem;border-radius:6px;font-size:.8rem;margin-top:.5rem;overflow-x:auto}.use-cases h4{margin:0 0 1rem;font-size:1.1rem}.use-case-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}.use-case-card{background:var(--app-bg-card, #fff);border:1px solid var(--app-border, #e5e5e5);border-radius:12px;padding:1.25rem;text-align:center}.use-case-icon{font-size:2rem;margin-bottom:.75rem}.use-case-card h5{margin:0 0 .5rem;font-size:1rem}.use-case-card p{margin:0;font-size:.85rem;color:var(--app-text-secondary, #666)}.api-key-info{background:var(--app-bg-card, #fff);border:1px solid var(--app-border, #e5e5e5);border-radius:12px;padding:1.5rem}.api-key-info h4{margin:0 0 1rem;font-size:1.1rem}.info-box{display:flex;gap:1rem;padding:1rem;border-radius:8px;margin-bottom:1rem}.info-box.warning{background:#f59e0b1a;border:1px solid rgba(245,158,11,.3)}.info-icon{font-size:1.5rem;flex-shrink:0}.info-box p{margin:0 0 .5rem;font-size:.9rem}.info-box p:last-child{margin-bottom:0}.info-box code{background:#0000001a;padding:.15rem .4rem;border-radius:3px;font-size:.85rem}.api-key-note{font-size:.9rem;color:var(--app-text-secondary, #666);margin:0}.api-key-note code{background:var(--app-bg-hover, #f5f5f5);padding:.15rem .4rem;border-radius:3px}@media (max-width: 768px){.webhook-tabs{flex-wrap:wrap}.webhook-tabs .tab-btn{flex:1;min-width:120px;text-align:center}.status-card{flex-direction:column;text-align:center}.action-cards{grid-template-columns:1fr}.pipeline-step{flex-direction:column;align-items:flex-start}.use-case-cards{grid-template-columns:1fr}}.dark-mode .webhook-tabs{border-bottom-color:#d4af7633}.dark-mode .webhook-tabs .tab-btn{color:#d4af76b3}.dark-mode .webhook-tabs .tab-btn:hover{color:#d4af76f2;background:#d4af761a}.dark-mode .webhook-tabs .tab-btn.active{color:#d4af76;border-bottom-color:#d4af76cc}.dark-mode .status-card{background:#1a1a2e99;border-color:#d4af7633}.dark-mode .status-card h3{color:#d4af76b3}.dark-mode .status-text{color:#d4af76e6}.dark-mode .status-indicator.online .status-dot{background:#22c55ee6}.dark-mode .status-indicator.offline .status-dot{background:#ef4444e6}.dark-mode .status-indicator.checking .status-dot{background:#f59e0be6}.media-library{padding:2rem;max-width:1600px;margin:0 auto}.media-library.loading{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:400px}.spinner{border:4px solid #f3f3f3;border-top:4px solid #667eea;border-radius:50%;width:50px;height:50px;animation:spin 1s linear infinite}.library-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:2rem;padding-bottom:1.5rem;border-bottom:2px solid #e0e0e0}.header-left h2{margin:0 0 .5rem;font-size:2rem;color:var(--app-text, #2c3e50)}.subtitle{margin:0 0 1rem;color:var(--app-text-secondary, #6b7280);font-size:1rem}.stats-row{display:flex;gap:2rem;margin-top:1rem}.stat-item{display:flex;flex-direction:column;align-items:center;gap:.25rem}.stat-value{font-size:1.5rem;font-weight:700;color:var(--app-text, #2c3e50)}.stat-label{font-size:.85rem;color:var(--app-text-secondary, #9ca3af);text-transform:uppercase;letter-spacing:.5px}.header-actions{display:flex;gap:1rem}.btn-refresh{padding:.75rem 1.5rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:8px;font-size:.95rem;font-weight:600;cursor:pointer;transition:all .2s}.btn-refresh:hover{transform:translateY(-2px);box-shadow:0 4px 12px #667eea4d}.library-tabs{display:flex;gap:0;margin-bottom:2rem;border-bottom:2px solid #e0e0e0}.tab-button{position:relative;padding:1rem 2rem;background:transparent;border:none;border-bottom:3px solid transparent;font-size:1rem;font-weight:600;color:#6b7280;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:.5rem}.tab-button:hover{color:#667eea;background:#667eea0d}.tab-button.active{color:#667eea;border-bottom-color:#667eea;background:#667eea14}.tab-count{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 8px;background:#667eea26;border-radius:12px;font-size:.75rem;font-weight:700;color:#667eea}.tab-button.active .tab-count{background:#667eea;color:#fff}.library-filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-bottom:1.5rem;padding:1.5rem;background:var(--app-surface, white);border-radius:12px;border:1px solid #e0e0e0}.filter-group{display:flex;flex-direction:column;gap:.5rem}.filter-group label{font-size:.9rem;font-weight:600;color:var(--app-text, #374151)}.search-input,.filter-select{padding:.75rem;border:2px solid #e0e0e0;border-radius:8px;font-size:.95rem;background:var(--app-surface, white);color:var(--app-text, #2c3e50);transition:border-color .2s}.search-input:focus,.filter-select:focus{outline:none;border-color:#667eea}.toggle-group{justify-content:center}.toggle-label{display:flex;align-items:center;gap:.5rem;cursor:pointer;-webkit-user-select:none;user-select:none}.toggle-label input[type=checkbox]{width:18px;height:18px;cursor:pointer}.results-info{margin-bottom:1rem;padding:.75rem 1rem;background:#667eea1a;border-radius:8px;color:#667eea;font-weight:600;text-align:center}.images-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem}.image-card{background:var(--app-surface, white);border:2px solid #e0e0e0;border-radius:12px;overflow:hidden;transition:all .2s}.image-card:hover{border-color:#667eea;box-shadow:0 4px 12px #667eea26;transform:translateY(-2px)}.image-preview{position:relative;width:100%;height:200px;background:#f5f5f5;cursor:pointer;overflow:hidden}.image-preview img{width:100%;height:100%;object-fit:cover;transition:transform .2s}.image-preview:hover img{transform:scale(1.05)}.image-type-badge{position:absolute;top:10px;right:10px;background:#000000b3;color:#fff;padding:.5rem;border-radius:50%;font-size:1.2rem;line-height:1}.image-info{padding:1rem}.image-filename{margin:0 0 .5rem;font-size:.95rem;font-weight:600;color:var(--app-text, #2c3e50);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.image-context{margin:.25rem 0;font-size:.85rem;color:var(--app-text-secondary, #6b7280);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.image-meta{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.75rem}.meta-tag{padding:.25rem .5rem;background:#f0f2ff;color:#667eea;border-radius:4px;font-size:.75rem;font-weight:600}.image-actions{display:flex;gap:.5rem;padding:1rem;border-top:1px solid #e0e0e0}.btn-view,.btn-delete{flex:1;padding:.5rem;border:none;border-radius:6px;font-size:1rem;cursor:pointer;transition:all .2s}.btn-view{background:#eff6ff;color:#667eea}.btn-view:hover{background:#dbeafe}.btn-delete{background:#fee2e2;color:#dc2626}.btn-delete:hover{background:#fecaca}.empty-state{padding:4rem 2rem;text-align:center;background:var(--app-surface, #f8f9fa);border:2px dashed #d1d5db;border-radius:12px}.empty-state p{margin:0 0 1rem;color:var(--app-text-secondary, #6b7280);font-size:1.1rem}.image-modal{position:fixed;top:0;left:0;right:0;bottom:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:10000;padding:2rem}.modal-content{position:relative;background:var(--app-surface, white);border-radius:16px;max-width:900px;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px #0000004d}.modal-close{position:absolute;top:1rem;right:1rem;width:40px;height:40px;background:#00000080;color:#fff;border:none;border-radius:50%;font-size:1.5rem;cursor:pointer;z-index:1;transition:background .2s}.modal-close:hover{background:#000000b3}.modal-image{max-height:60vh;display:flex;align-items:center;justify-content:center;background:#000;border-radius:16px 16px 0 0}.modal-image img{max-width:100%;max-height:60vh;object-fit:contain}.modal-info{padding:2rem}.modal-info h3{margin:0 0 1rem;font-size:1.5rem;color:var(--app-text, #2c3e50)}.modal-info p{margin:.5rem 0;color:var(--app-text-secondary, #6b7280)}.modal-meta{margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid #e0e0e0}.meta-row{display:flex;justify-content:space-between;padding:.5rem 0}.meta-label{font-weight:600;color:var(--app-text, #374151)}.meta-value{color:var(--app-text-secondary, #6b7280)}.modal-actions{display:flex;gap:1rem;margin-top:1.5rem}.btn-primary,.btn-secondary,.btn-danger{flex:1;padding:.75rem 1.5rem;border:none;border-radius:8px;font-size:.95rem;font-weight:600;cursor:pointer;transition:all .2s;text-align:center;text-decoration:none;display:inline-block}.btn-primary{background:#667eea;color:#fff}.btn-primary:hover{background:#5568d3;transform:translateY(-1px)}.btn-secondary{background:#e5e7eb;color:#374151}.btn-secondary:hover{background:#d1d5db}.btn-danger{background:#ef4444;color:#fff}.btn-danger:hover{background:#dc2626;transform:translateY(-1px)}.dark-mode .library-header{border-bottom-color:#d4af7633}.dark-mode .header-left h2{color:#d4af76f2}.dark-mode .stat-value{color:#d4af76f2}.dark-mode .stat-label{color:#d4af7699}.dark-mode .btn-refresh{background:linear-gradient(135deg,#d4af764d,#d4af7633);color:#d4af76;border:2px solid rgba(212,175,118,.4)}.dark-mode .btn-refresh:hover{background:linear-gradient(135deg,#d4af7666,#d4af764d);box-shadow:0 4px 12px #d4af764d}.dark-mode .library-filters{background:#1a1a2e99;border-color:#d4af7633}.dark-mode .filter-group label{color:#d4af76e6}.search-input,.dark-mode .filter-select{background:#0000004d;border-color:#d4af764d;color:#d4af76f2}.search-input:focus,.dark-mode .filter-select:focus{border-color:#d4af7699;box-shadow:0 0 0 3px #d4af761a}.dark-mode .results-info{background:#d4af7626;color:#d4af76}.dark-mode .image-card{background:#1a1a2e99;border-color:#d4af7633}.dark-mode .image-card:hover{border-color:#d4af7680;box-shadow:0 4px 12px #d4af7633}.dark-mode .image-preview{background:#0006}.dark-mode .image-filename{color:#d4af76f2}.dark-mode .image-context{color:#d4af76b3}.dark-mode .meta-tag{background:#d4af7626;color:#d4af76}.dark-mode .image-actions{border-top-color:#d4af7633}.dark-mode .btn-view{background:#d4af7626;color:#d4af76}.dark-mode .btn-view:hover{background:#d4af7640}.dark-mode .btn-delete{background:#e74c3c33;color:#ff6b6b}.dark-mode .btn-delete:hover{background:#e74c3c4d;color:#ff8787}.dark-mode .empty-state{background:#1a1a2e66;border-color:#d4af7633}.dark-mode .empty-state p{color:#d4af76cc}.dark-mode .modal-content{background:#1a1a2efa;border:2px solid rgba(212,175,118,.2)}.dark-mode .modal-info h3{color:#d4af76f2}.dark-mode .modal-info p{color:#d4af76cc}.dark-mode .modal-meta{border-top-color:#d4af7633}.dark-mode .meta-label{color:#d4af76e6}.dark-mode .meta-value{color:#d4af76b3}.dark-mode .btn-primary{background:linear-gradient(135deg,#d4af764d,#d4af7633);color:#d4af76;border:2px solid rgba(212,175,118,.4)}.dark-mode .btn-primary:hover{background:linear-gradient(135deg,#d4af7666,#d4af764d);box-shadow:0 4px 12px #d4af764d}.dark-mode .btn-secondary{background:#d4af7614;color:#d4af76e6;border:1px solid rgba(212,175,118,.2)}.dark-mode .btn-secondary:hover{background:#d4af7626;color:#d4af76}.dark-mode .btn-danger{background:#ef44444d;color:#ff6b6b;border:2px solid rgba(239,68,68,.4)}.dark-mode .btn-danger:hover{background:#ef444466;color:#ff8787;box-shadow:0 4px 12px #ef44444d}.dark-mode .spinner{border-color:#d4af7633;border-top-color:#d4af76cc}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:10000}.modal{background:#fff;border-radius:12px;max-width:500px;width:90%;max-height:90vh;overflow-y:auto}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem;border-bottom:2px solid #e0e0e0}.modal-header h3{margin:0;font-size:1.5rem;color:#2c3e50}.btn-close{background:none;border:none;font-size:1.5rem;color:#999;cursor:pointer;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .2s}.btn-close:hover{background:#f0f0f0;color:#666}.modal-body{padding:1.5rem 2rem}.modal-footer{padding:1rem 1.5rem;border-top:1px solid #e0e0e0;display:flex;justify-content:flex-end;gap:1rem}.confirm-modal,.alert-modal{max-width:500px;animation:modalSlideIn .2s ease-out}.confirm-modal .modal-body,.alert-modal .modal-body{padding:1.5rem 2rem}.confirm-message,.alert-message{font-size:1rem;line-height:1.6;color:#333;margin:0;white-space:pre-line}.alert-modal.alert-success .modal-header{background:linear-gradient(135deg,#d1fae5,#a7f3d0);border-bottom:2px solid #6ee7b7}.alert-modal.alert-success .modal-header h3{color:#065f46}.alert-modal.alert-error .modal-header{background:linear-gradient(135deg,#fee2e2,#fecaca);border-bottom:2px solid #fca5a5}.alert-modal.alert-error .modal-header h3{color:#991b1b}.confirm-modal .modal-footer{justify-content:flex-end}@media (max-width: 1024px){.library-filters{grid-template-columns:1fr 1fr}.images-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}}@media (max-width: 768px){.media-library{padding:1rem}.library-header{flex-direction:column;gap:1rem}.stats-row{flex-wrap:wrap;gap:1rem}.library-filters,.images-grid{grid-template-columns:1fr}.modal-content{max-width:100%;margin:1rem}.modal-actions{flex-direction:column}}.category-management{padding:2rem;max-width:1400px;margin:0 auto}.category-header{margin-bottom:2rem}.category-header h2{font-size:1.8rem;margin-bottom:.5rem;color:#333}.category-description{color:#666;font-size:.95rem}.message-box{padding:1rem 1.5rem;border-radius:8px;margin-bottom:1rem;display:flex;align-items:center;justify-content:space-between;animation:slideIn .3s ease-out}.message-box.error{background:#fee;border-left:4px solid #e53935;color:#c62828}.message-box.success{background:#e8f5e9;border-left:4px solid #4caf50;color:#2e7d32}.btn-close-message{background:none;border:none;font-size:1.2rem;cursor:pointer;opacity:.6;transition:opacity .2s}.btn-close-message:hover{opacity:1}.sync-status-banner{display:flex;gap:1rem;padding:1.25rem;background:linear-gradient(135deg,#f8f9fc,#e8ecf5);border-radius:12px;border:2px solid #e0e5ed;margin-bottom:1.5rem;box-shadow:0 2px 8px #0000000d}.sync-stat{flex:1;display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:.75rem;background:#fff;border-radius:8px;border:2px solid #e0e5ed;transition:all .2s}.sync-stat:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.sync-stat.success{border-color:#4caf50;background:linear-gradient(135deg,#f1f8f4,#e8f5e9)}.sync-stat.warning{border-color:#ff9800;background:linear-gradient(135deg,#fff8e1,#ffecb3)}.sync-stat.error{border-color:#f44336;background:linear-gradient(135deg,#ffebee,#ffcdd2)}.stat-label{font-size:.8rem;color:#666;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.stat-value{font-size:1.8rem;font-weight:700;color:#333}.sync-stat.success .stat-value{color:#2e7d32}.sync-stat.warning .stat-value{color:#f57c00}.sync-stat.error .stat-value{color:#c62828}.action-bar{display:flex;gap:1rem;margin-bottom:2rem}.btn-sync{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:.75rem 1.5rem;border-radius:8px;cursor:pointer;font-weight:600;transition:all .2s;display:flex;align-items:center;gap:.5rem}.btn-sync:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 12px #667eea66}.btn-sync:disabled{opacity:.6;cursor:not-allowed}.btn-primary{background:#4caf50;color:#fff;border:none;padding:.75rem 1.5rem;border-radius:8px;cursor:pointer;font-weight:600;transition:all .2s}.btn-primary:hover:not(:disabled){background:#45a049;transform:translateY(-2px);box-shadow:0 4px 12px #4caf5066}.btn-primary:disabled{opacity:.6;cursor:not-allowed}.category-form-modal{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .3s}.category-form-content{background:#fff;padding:2rem;border-radius:12px;max-width:500px;width:90%;max-height:90vh;overflow-y:auto;animation:slideUp .3s}.category-form-content h3{margin-bottom:1.5rem;color:#333}.form-group label{display:block;margin-bottom:.5rem;font-weight:600;color:#555}.form-group input,.form-group select{width:100%;padding:.75rem;border:2px solid #e0e0e0;border-radius:8px;font-size:1rem;transition:border-color .2s}.form-group input:focus,.form-group select:focus{outline:none;border-color:#667eea}.field-hint{display:block;margin-top:.5rem;font-size:.85rem;color:#888}.form-actions{display:flex;gap:1rem;margin-top:2rem}.btn-save,.btn-secondary{flex:1;padding:.75rem;border-radius:8px;font-weight:600;cursor:pointer;transition:all .2s}.btn-save{background:#4caf50;color:#fff;border:none}.btn-save:hover{background:#45a049}.btn-secondary,.btn-cancel{background:#f5f5f5;color:#666;border:2px solid #e0e0e0}.btn-secondary:hover,.btn-cancel:hover{background:#ebebeb}.categories-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.5rem;margin-bottom:2rem}.category-card{background:#fff;border:2px solid #e0e0e0;border-radius:12px;padding:1.5rem;transition:all .2s}.category-card:hover{border-color:#667eea;box-shadow:0 4px 12px #0000001a}.category-header-row{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem;flex-wrap:wrap}.category-icon{font-size:2rem}.category-header-row h3{margin:0;font-size:1.2rem;color:#333;flex:1}.sync-badge{font-size:.7rem;padding:.3rem .65rem;border-radius:12px;font-weight:600;display:inline-flex;align-items:center;gap:.25rem;cursor:help;transition:all .2s;white-space:nowrap}.sync-badge.synced{background:linear-gradient(135deg,#d1fae5,#a7f3d0);color:#065f46;border:1px solid #6ee7b7;box-shadow:0 2px 4px #10b98133}.sync-badge.synced:hover{transform:scale(1.05);box-shadow:0 4px 8px #10b9814d}.sync-badge.error{background:linear-gradient(135deg,#fee2e2,#fecaca);color:#991b1b;border:1px solid #fca5a5;animation:pulse-error-badge 2s infinite}.sync-badge.pending{background:linear-gradient(135deg,#fef3c7,#fde68a);color:#92400e;border:1px solid #fcd34d;animation:pulse-warning-badge 2s infinite}@keyframes pulse-error-badge{0%,to{box-shadow:0 2px 4px #ef444433}50%{box-shadow:0 4px 12px #ef444466}}@keyframes pulse-warning-badge{0%,to{box-shadow:0 2px 4px #f59e0b33}50%{box-shadow:0 4px 12px #f59e0b66}}.category-details{margin-bottom:1rem}.detail-row{display:flex;justify-content:space-between;padding:.5rem 0;border-bottom:1px solid #f0f0f0}.detail-row .label{font-weight:600;color:#666;font-size:.9rem}.detail-row .value{color:#333;font-size:.9rem}.shopify-tag{background:#f3e5f5;padding:.25rem .75rem;border-radius:12px;color:#7b1fa2;font-weight:600;font-size:.85rem}.category-actions{display:flex;gap:.5rem;margin-top:1rem;justify-content:center}.category-actions .btn-sync,.btn-edit,.btn-delete{background:none;border:2px solid #e0e0e0;padding:.5rem 1rem;border-radius:8px;cursor:pointer;font-size:1.2rem;transition:all .2s;min-width:50px}.category-actions .btn-sync:hover:not(:disabled){border-color:#667eea;background:linear-gradient(135deg,#667eea1a,#764ba21a);transform:translateY(-1px)}.category-actions .btn-sync:disabled{opacity:.5;cursor:not-allowed}.btn-edit:hover{border-color:#2196f3;background:#e3f2fd}.btn-delete:hover{border-color:#f44336;background:#ffebee}.category-edit-form{animation:fadeIn .3s}.category-edit-form .form-group{margin-bottom:1rem}.category-edit-form .form-group label{font-size:.85rem}.category-edit-form .form-group input,.category-edit-form .form-group select{padding:.5rem;font-size:.9rem}.loading-state{text-align:center;padding:3rem;color:#666;font-size:1.1rem}.empty-state{text-align:center;padding:3rem;color:#999;grid-column:1 / -1}.empty-state p{margin-bottom:.5rem}.empty-hint{font-size:.9rem;color:#bbb}.info-box{background:#f5f9ff;border-left:4px solid #2196f3;padding:1.5rem;border-radius:8px;margin-top:2rem}.info-box h4{margin-bottom:1rem;color:#1976d2}.info-box ul{list-style:none;padding:0;margin:0}.info-box li{padding:.5rem 0;color:#555;line-height:1.6}.info-box li strong{color:#1976d2;font-weight:600}@keyframes slideIn{0%{transform:translate(-20px);opacity:0}to{transform:translate(0);opacity:1}}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}@media (max-width: 768px){.category-management{padding:1rem}.categories-grid{grid-template-columns:1fr}.action-bar{flex-direction:column}.category-form-content{width:95%;padding:1.5rem}}.health-tab{width:100%;height:100%;overflow-y:auto;padding:1.5rem}.role-badge{display:inline-block;padding:.25rem .75rem;border-radius:12px;font-size:.875rem;font-weight:600;text-transform:capitalize}.role-superadmin{background:linear-gradient(135deg,#fbbf24,#f59e0b);color:#78350f;box-shadow:0 2px 8px #fbbf244d}.role-admin{background:linear-gradient(135deg,#60a5fa,#3b82f6);color:#fff;box-shadow:0 2px 8px #3b82f64d}.role-designer{background:linear-gradient(135deg,#c084fc,#a855f7);color:#fff;box-shadow:0 2px 8px #a855f74d}.role-standard{background:#e5e7eb;color:#6b7280}.health-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:2rem;padding-bottom:1rem;border-bottom:2px solid var(--app-border, #e5e7eb)}.health-subtitle{margin-top:.5rem;color:var(--app-text-secondary, #6b7280);font-size:.95rem}.health-actions{display:flex;gap:.75rem;flex-wrap:wrap}.btn-refresh,.btn-download{padding:.625rem 1.25rem;border:1px solid var(--app-border, #e5e7eb);border-radius:6px;background:#fff;color:#111827;cursor:pointer;font-weight:500;font-size:.9rem;transition:all .2s}.btn-copy,.btn-backend-diag{padding:.625rem 1.25rem;border:1px solid #3b82f6;border-radius:6px;color:#fff;cursor:pointer;font-weight:500;font-size:.9rem;transition:all .2s}.btn-refresh:hover,.btn-download:hover{background:#f9fafb;border-color:#d1d5db}.btn-copy,.btn-backend-diag{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border-color:#3b82f6;box-shadow:0 2px 8px #3b82f64d}.btn-copy:hover:not(:disabled),.btn-backend-diag:hover:not(:disabled){background:linear-gradient(135deg,#2563eb,#1d4ed8);border-color:#2563eb;box-shadow:0 2px 6px #3b82f666;transform:translateY(-1px)}.btn-copy.copied,.btn-backend-diag.copied{background:linear-gradient(135deg,#10b981,#059669);border-color:#10b981;box-shadow:0 2px 8px #10b9814d}.btn-copy:disabled,.btn-backend-diag:disabled{opacity:.5;cursor:not-allowed}.health-loading,.health-empty{text-align:center;padding:3rem 1rem;color:var(--app-text-secondary, #6b7280);font-size:1rem}.health-summary{margin-bottom:2rem}.summary-card{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;padding:1.5rem;background:#f9fafb;border-radius:8px;margin-bottom:1rem}.summary-stat{text-align:center}.summary-stat .stat-value{display:block;font-size:2rem;font-weight:700;margin-bottom:.25rem}.summary-stat .stat-label{display:block;font-size:.875rem;color:var(--app-text-secondary, #6b7280);text-transform:uppercase;letter-spacing:.05em}.summary-stat.success .stat-value{color:#10b981}.summary-stat.error .stat-value{color:#ef4444}.info-box,.error-box{padding:1rem 1.25rem;border-radius:6px;margin-bottom:1rem}.info-box{background:#dbeafe;border-left:4px solid #3b82f6;color:#1e40af}.error-box{background:#fee2e2;border-left:4px solid #ef4444;color:#991b1b}.health-error-summary{background:#fee2e2;border:2px solid #ef4444;border-radius:8px;padding:1.5rem;margin-bottom:2rem}.health-error-summary h3{margin:0 0 1rem;color:#991b1b;font-size:1.1rem}.health-error-summary ul{margin:0;padding-left:1.5rem;color:#991b1b}.health-error-summary li{margin-bottom:.5rem;line-height:1.5}.health-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem}.health-card{background:#fff;border:2px solid #e5e7eb;border-radius:8px;padding:1rem;transition:all .2s}.health-card:hover{box-shadow:0 4px 12px #0000001a}.health-card.status-ok{border-color:#10b981;background:#f0fdf4}.health-card.status-error{border-color:#ef4444;background:#fef2f2}.health-card-header{display:flex;align-items:center;gap:.75rem;margin-bottom:.75rem}.health-icon{font-size:1.5rem}.health-card-title{font-weight:600;font-size:1rem;color:var(--app-text-primary, #111827)}.health-card-body{display:flex;flex-direction:column;gap:.5rem;margin-bottom:.75rem}.health-stat{display:flex;justify-content:space-between;font-size:.875rem}.health-stat .stat-label{color:var(--app-text-secondary, #6b7280)}.health-stat .stat-value{font-weight:600;color:var(--app-text-primary, #111827)}.health-stat .stat-value.masked{font-family:Courier New,monospace;background:#f3f4f6;padding:.125rem .5rem;border-radius:4px}.health-card-message{font-size:.875rem;color:var(--app-text-secondary, #6b7280);padding:.5rem;background:#f9fafb;border-radius:4px}.health-card-error{font-size:.875rem;color:#dc2626;padding:.5rem;background:#fef2f2;border-radius:4px;margin-top:.5rem}.health-detail-card{background:#fff;border:2px solid #e5e7eb;border-radius:8px;padding:1.5rem;margin-bottom:1.5rem}.health-detail-card.large{max-width:600px}.detail-card-header{display:flex;align-items:center;gap:1.5rem;margin-bottom:1.5rem}.detail-card-icon{font-size:3rem}.detail-card-info h3{margin:0 0 .5rem;font-size:1.25rem}.detail-status{display:flex;align-items:center;gap:.5rem}.status-dot{width:12px;height:12px;border-radius:50%}.status-text{font-weight:500;color:var(--app-text-primary, #111827)}.detail-card-body{display:flex;flex-direction:column;gap:.75rem;margin-bottom:1rem}.detail-row{display:flex;justify-content:space-between;padding:.5rem 0;border-bottom:1px solid #f3f4f6}.detail-label{color:var(--app-text-secondary, #6b7280);font-weight:500}.detail-value{color:var(--app-text-primary, #111827);font-weight:600}.detail-card-warning{background:#fef3c7;border-left:4px solid #f59e0b;padding:1rem;border-radius:4px;margin-top:1rem}.detail-card-warning ul{margin:.5rem 0 0 1.5rem}.detail-card-error{background:#fee2e2;border-left:4px solid #ef4444;padding:1rem;border-radius:4px;margin-top:1rem}.health-banner{display:flex;align-items:center;gap:1rem;padding:1.25rem 1.5rem;border-radius:8px;margin-bottom:2rem;font-size:1.1rem}.health-banner.status-healthy,.health-banner.status-ok{background:#d1fae5;border:2px solid #10b981;color:#065f46}.health-banner.status-degraded{background:#fef3c7;border:2px solid #f59e0b;color:#92400e}.health-banner.status-unhealthy,.health-banner.status-error{background:#fee2e2;border:2px solid #ef4444;color:#991b1b}.banner-icon{font-size:2rem}.banner-text{flex:1}.banner-error{font-weight:400;opacity:.8}.health-overview-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem;margin-bottom:2rem}.overview-card{background:#fff;border:2px solid #e5e7eb;border-radius:8px;padding:1.5rem;transition:all .2s}.overview-card:hover{box-shadow:0 4px 12px #0000001a;transform:translateY(-2px)}.overview-card.status-ok,.overview-card.status-connected{border-color:#10b981}.overview-card.status-error,.overview-card.status-unhealthy{border-color:#ef4444}.overview-card-header{display:flex;align-items:center;gap:1rem;margin-bottom:1rem}.overview-icon{font-size:2rem}.overview-card-header h3{margin:0;font-size:1.1rem}.overview-card-status{display:flex;align-items:center;gap:.5rem;margin-bottom:.75rem;font-weight:500}.overview-card-detail{font-size:.875rem;color:var(--app-text-secondary, #6b7280)}.overview-card-detail.error{color:#dc2626;font-weight:500}.debug-report-container{background:#1f2937;border-radius:8px;padding:1.5rem;margin-bottom:1.5rem;overflow-x:auto}.debug-report-text{margin:0;color:#f3f4f6;font-family:Courier New,Courier,monospace;font-size:.875rem;line-height:1.6;white-space:pre}.debug-report-info{padding:1rem 1.25rem;background:#dbeafe;border-radius:6px;border-left:4px solid #3b82f6;color:#1e40af;font-size:.9rem}.debug-report-info strong{display:block;margin-bottom:.25rem}.health-section{margin-bottom:2.5rem}.health-section h3{margin:0 0 1rem;font-size:1.1rem;color:var(--app-text-primary, #111827)}.health-items{display:flex;flex-direction:column;gap:.75rem}.health-item{background:#fff;border:1px solid #e5e7eb;border-radius:6px;padding:1rem;transition:all .2s}.health-item:hover{box-shadow:0 2px 8px #00000014}.health-item.status-ok{border-left:4px solid #10b981}.health-item.status-error,.health-item.status-missing{border-left:4px solid #ef4444;background:#fef2f2}.item-header{display:flex;align-items:center;gap:.75rem}.item-icon{font-size:1.25rem}.item-name{flex:1;font-weight:600;color:var(--app-text-primary, #111827)}.item-status{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em}.item-badge{font-size:.875rem;padding:.25rem .75rem;background:#f3f4f6;border-radius:4px;color:var(--app-text-secondary, #6b7280)}.item-error{margin-top:.75rem;padding:.75rem;background:#fee2e2;border-radius:4px;color:#991b1b;font-size:.875rem;font-weight:500}.item-detail{margin-top:.5rem;font-size:.875rem;color:var(--app-text-secondary, #6b7280)}.health-info-box{background:#f9fafb;border:1px solid #e5e7eb;border-radius:6px;padding:1rem}.info-row{display:flex;justify-content:space-between;padding:.5rem 0;border-bottom:1px solid #e5e7eb}.info-row:last-child{border-bottom:none}.info-label{color:var(--app-text-secondary, #6b7280);font-weight:500}.info-value{color:var(--app-text-primary, #111827);font-weight:600}.banner-detail{opacity:.9;font-weight:400}.health-timestamp{text-align:center;padding:1rem;color:var(--app-text-secondary, #6b7280);font-size:.875rem;border-top:1px solid #e5e7eb;margin-top:2rem}:root:not(.dark-mode) .health-tab{background:transparent;color:#1a202c}:root:not(.dark-mode) .health-header h2{color:#1a202c;font-weight:700}:root:not(.dark-mode) .health-subtitle{color:#4a5568;font-weight:500}.btn-refresh,:root:not(.dark-mode) .btn-download{background:#fff;color:#2d3748;border:2px solid rgba(102,126,234,.3)}.btn-refresh:hover,:root:not(.dark-mode) .btn-download:hover{background:#667eea1a;border-color:#667eea;color:#667eea}:root:not(.dark-mode) .btn-copy{background:#667eea;color:#fff}:root:not(.dark-mode) .btn-copy:hover{background:#5568d3}.health-card,.health-detail-card,:root:not(.dark-mode) .overview-card{background:#fff;border-color:#667eea33}.health-card-title,.detail-card-info h3,.overview-card-header h3,:root:not(.dark-mode) .item-name{color:#1a202c;font-weight:600}.health-stat .stat-label,:root:not(.dark-mode) .detail-label{color:#4a5568;font-weight:500}.health-stat .stat-value,:root:not(.dark-mode) .detail-value{color:#1a202c;font-weight:600}:root:not(.dark-mode) .overview-card-detail{color:#4a5568}:root:not(.dark-mode) .summary-card{background:#fff;border:2px solid rgba(102,126,234,.15)}:root:not(.dark-mode) .summary-stat .stat-label{color:#4a5568}:root:not(.dark-mode) .health-item{background:#fff;border-color:#667eea33}:root:not(.dark-mode) .info-box{background:#e7f3ff;border-left-color:#667eea;color:#004085}.error-box,:root:not(.dark-mode) .detail-card-error{background:#fee2e2;border-left-color:#ef4444;color:#991b1b}:root:not(.dark-mode) .detail-card-warning{background:#fff8e7;border-left-color:#f59e0b;color:#92400e}:root:not(.dark-mode) .health-error-summary{background:#fee2e2;border-color:#ef4444;color:#991b1b}.health-banner.status-healthy,:root:not(.dark-mode) .health-banner.status-ok{background:#d1fae5;border-color:#10b981;color:#065f46}:root:not(.dark-mode) .health-banner.status-degraded{background:#fef3c7;border-color:#f59e0b;color:#92400e}.health-banner.status-unhealthy,:root:not(.dark-mode) .health-banner.status-error{background:#fee2e2;border-color:#ef4444;color:#991b1b}:root:not(.dark-mode) .debug-report-container{background:#1a202c}:root:not(.dark-mode) .debug-report-text{color:#f3f4f6}:root:not(.dark-mode) .debug-report-info{background:#e7f3ff;border-left-color:#667eea;color:#004085}:root:not(.dark-mode) .health-timestamp{color:#4a5568;border-top-color:#667eea33}:root:not(.dark-mode) .health-card-message{background:#f8f9fc;color:#4a5568}:root:not(.dark-mode) .item-detail{color:#4a5568}:root:not(.dark-mode) .item-badge{background:#f3f4f6;color:#4a5568}:root:not(.dark-mode) .info-row{border-bottom-color:#667eea26}:root:not(.dark-mode) .info-label{color:#4a5568}:root:not(.dark-mode) .info-value{color:#1a202c}@media (max-width: 768px){.health-tab{padding:1rem}.health-header{flex-direction:column;gap:1rem}.health-actions{width:100%;flex-direction:column}.btn-refresh,.btn-copy,.btn-download{width:100%}.health-grid,.health-overview-grid,.summary-card{grid-template-columns:1fr}.debug-report-text{font-size:.75rem}}.copy-button{padding:8px 16px;background:#f3f4f6;border:1px solid #d1d5db;border-radius:6px;color:#374151;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s ease;display:inline-flex;align-items:center;gap:6px}.copy-button:hover{background:#e5e7eb;border-color:#9ca3af;transform:translateY(-1px)}.copy-button.copied{background:#d1fae5;border-color:#10b981;color:#065f46}.copy-button:active{transform:translateY(0)}.download-button{padding:8px 16px;background:#3b82f6;border:none;border-radius:6px;color:#fff;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s ease;display:inline-flex;align-items:center;gap:6px}.download-button:hover{background:#2563eb;transform:translateY(-1px);box-shadow:0 4px 12px #3b82f64d}.download-button:active{transform:translateY(0)}.error-log-viewer{padding:20px;max-width:1800px;margin:0 auto}.log-viewer-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:30px;padding-bottom:20px;border-bottom:2px solid #e0e0e0}.log-viewer-header h2{margin:0 0 8px;font-size:24px;color:#333}.subtitle{margin:0;color:#666;font-size:14px}.header-stats{display:flex;gap:16px}.stat-badge{display:flex;flex-direction:column;align-items:center;padding:12px 20px;background:#f8f9fa;border-radius:8px;border:2px solid #e0e0e0;min-width:80px}.stat-badge.error{background:#fff5f5;border-color:#fecaca}.stat-badge.warning{background:#fffbf0;border-color:#fde68a}.stat-badge.audit{background:#f0f9ff;border-color:#bfdbfe}.stat-badge .stat-value{font-size:24px;font-weight:700;color:#333;line-height:1;margin-bottom:4px}.stat-badge .stat-label{font-size:11px;color:#666;text-transform:uppercase;font-weight:600}.log-filters{background:#f8f9fa;padding:16px;border-radius:8px;margin-bottom:20px}.filter-row{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:12px}.filter-group{display:flex;align-items:center;gap:8px}.filter-group label{font-size:13px;font-weight:600;color:#555;white-space:nowrap}.search-input,.filter-select{padding:8px 12px;border:1px solid #d0d0d0;border-radius:4px;font-size:14px}.search-input{min-width:300px;flex:1}.filter-select{min-width:150px}.search-input:focus,.filter-select:focus{outline:none;border-color:#5c6ac4;box-shadow:0 0 0 2px #5c6ac41a}.filter-actions{display:flex;gap:12px;padding-top:12px;border-top:1px solid #e0e0e0}.btn-export,.btn-clear{padding:8px 16px;border:none;border-radius:6px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s}.btn-export{background:#17a2b8;color:#fff}.btn-export:hover:not(:disabled){background:#138496}.btn-clear{background:#dc3545;color:#fff}.btn-clear:hover:not(:disabled){background:#c82333}.btn-export:disabled,.btn-clear:disabled{opacity:.5;cursor:not-allowed}.results-info{margin-bottom:16px;padding:10px 16px;background:#e9ecef;border-radius:6px;font-size:14px;font-weight:600;color:#495057}.empty-state{text-align:center;padding:60px 20px;background:#fafafa;border-radius:12px;border:2px dashed #d0d0d0}.empty-icon{font-size:64px;margin-bottom:16px}.empty-state p{margin:0 0 20px;color:#666;font-size:16px}.logs-container{display:flex;flex-direction:column;gap:12px}.log-entry{background:#fff;border:2px solid #e0e0e0;border-radius:8px;overflow:hidden;transition:all .2s}.log-entry.error{border-left:4px solid #dc3545}.log-entry.warning{border-left:4px solid #ffc107}.log-entry.info{border-left:4px solid #17a2b8}.log-entry:hover{box-shadow:0 4px 12px #0000001a}.log-entry.expanded{border-color:#5c6ac4}.log-summary{display:flex;align-items:center;gap:16px;padding:16px;cursor:pointer;transition:background .2s}.log-summary:hover{background:#f8f9fa}.log-icon{font-size:24px;flex-shrink:0}.log-main{flex:1;min-width:0}.log-message{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-size:15px;color:#212529}.log-message strong{font-weight:600}.log-badge{padding:2px 8px;font-size:11px;font-weight:600;border-radius:12px;text-transform:uppercase}.log-badge.audit{background:#d1ecf1;color:#0c5460}.log-badge.backend{background:#e2e3e5;color:#383d41}.log-badge.category{background:#e7e9fc;color:#4c5ab8}.log-meta{display:flex;flex-wrap:wrap;gap:12px;font-size:12px;color:#6c757d}.log-meta span{display:flex;align-items:center;gap:4px}.meta-timestamp{font-weight:600}.meta-route,.meta-component,.meta-modal{padding:2px 6px;background:#e9ecef;border-radius:4px;font-family:SF Mono,Consolas,monospace;font-size:11px}.log-actions{display:flex;gap:8px;flex-shrink:0}.btn-copy,.btn-expand{width:36px;height:36px;padding:0;border:1px solid #d0d0d0;background:#fff;border-radius:6px;cursor:pointer;font-size:16px;transition:all .2s;display:flex;align-items:center;justify-content:center}.btn-copy:hover,.btn-expand:hover{background:#f8f9fa;border-color:#5c6ac4}.log-details{padding:20px;background:#f8f9fa;border-top:2px solid #e0e0e0}.details-section{margin-bottom:20px;padding:16px;background:#fff;border-radius:6px;border:1px solid #dee2e6}.details-section:last-child{margin-bottom:0}.details-section h4{margin:0 0 12px;font-size:14px;font-weight:600;color:#495057}.details-section summary h4{display:inline;cursor:pointer}.details-content{display:flex;flex-direction:column;gap:8px}.detail-row{display:grid;grid-template-columns:150px 1fr;gap:12px;font-size:13px}.detail-label{font-weight:600;color:#6c757d}.detail-value{color:#212529;word-break:break-word}.detail-value.code{font-family:SF Mono,Consolas,monospace;font-size:11px;background:#f1f3f5;padding:4px 8px;border-radius:4px}.detail-json,.detail-stack{background:#212529;color:#f8f9fa;padding:12px;border-radius:6px;font-family:SF Mono,Consolas,monospace;font-size:12px;overflow-x:auto;margin:0;line-height:1.5}.detail-stack{color:#ff6b6b;max-height:300px;overflow-y:auto}@media (max-width: 768px){.log-viewer-header{flex-direction:column;gap:20px}.header-stats{flex-wrap:wrap}.filter-row{flex-direction:column}.search-input{min-width:100%}.log-summary{flex-wrap:wrap}.log-actions{width:100%;justify-content:flex-end}.detail-row{grid-template-columns:1fr;gap:4px}}.dark-mode .error-log-viewer{color:#d4af76f2}.dark-mode .log-viewer-header{border-bottom-color:#d4af7633}.dark-mode .log-viewer-header h2{color:#d4af76f2}.dark-mode .subtitle{color:#d4af76b3}.dark-mode .stat-badge{background:#0000004d;border-color:#d4af764d}.dark-mode .stat-badge .stat-value{color:#d4af76f2}.dark-mode .log-filters{background:#0003}.dark-mode .search-input,.dark-mode .filter-select{background:#0000004d;border-color:#d4af764d;color:#d4af76f2}.dark-mode .log-entry{background:#1a1a2e99;border-color:#d4af7633}.dark-mode .log-summary:hover{background:#d4af7614}.dark-mode .log-details{background:#0000004d;border-top-color:#d4af7633}.dark-mode .details-section{background:#0000004d;border-color:#d4af7633}.dark-mode .btn-copy,.dark-mode .btn-expand{background:#0000004d;border-color:#d4af764d;color:#d4af76e6}.dark-mode .btn-copy:hover,.dark-mode .btn-expand:hover{background:#d4af7626;border-color:#d4af7699}.status-card{background:#fff;border-radius:12px;padding:20px;box-shadow:0 1px 3px #0000001a;transition:all .3s ease;border:2px solid transparent;display:flex;flex-direction:column;gap:12px}.status-card:hover{box-shadow:0 4px 12px #00000026;transform:translateY(-2px)}.status-card.priority{border-width:3px;box-shadow:0 4px 16px #0003}.status-card.status-ok,.status-card.status-healthy,.status-card.status-connected{border-color:#10b981}.status-card.status-warning,.status-card.status-degraded{border-color:#f59e0b}.status-card.status-error,.status-card.status-critical,.status-card.status-unhealthy{border-color:#ef4444}.status-card.status-loading{border-color:#9ca3af}.status-card-header{display:flex;align-items:center;gap:12px}.status-card-icon{font-size:32px;line-height:1}.status-card-title{font-size:16px;font-weight:600;color:#111827;margin:0}.status-card-status{display:flex;align-items:center;gap:8px;font-size:14px;color:#6b7280}.status-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.status-icon{font-size:16px;line-height:1}.status-text{flex:1;font-weight:500}.status-card-metric{font-size:24px;font-weight:700;color:#111827;margin:4px 0}.status-card-dual-sync{display:flex;gap:12px;margin-top:8px;padding-top:12px;border-top:1px solid #e5e7eb}.sync-status{flex:1;display:flex;align-items:center;gap:6px;padding:8px 12px;border-radius:8px;background:#f9fafb;font-size:13px}.sync-icon{font-size:16px}.sync-label{flex:1;font-weight:500;color:#6b7280}.sync-indicator{font-size:14px}.sync-status.sync-ok,.sync-status.sync-healthy{background:#d1fae5;color:#065f46}.sync-status.sync-warning{background:#fef3c7;color:#92400e}.sync-status.sync-error{background:#fee2e2;color:#991b1b}.status-card-error-details{margin-top:8px;padding-top:12px;border-top:1px solid #e5e7eb}.btn-expand{width:100%;padding:8px 12px;background:#f3f4f6;border:1px solid #d1d5db;border-radius:6px;color:#374151;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s ease}.btn-expand:hover{background:#e5e7eb;border-color:#9ca3af}.error-details-content{padding:12px;background:#fef2f2;border:1px solid #fecaca;border-radius:8px;font-size:13px;display:flex;flex-direction:column;gap:8px}.error-message{font-weight:600;color:#991b1b}.error-code{font-family:Courier New,monospace;color:#7f1d1d;font-size:12px}.error-location{color:#991b1b;font-size:12px}.affected-systems{margin-top:8px;padding-top:8px;border-top:1px solid #fecaca}.affected-systems strong{display:block;margin-bottom:4px;color:#7f1d1d}.affected-systems ul{margin:0;padding-left:20px;color:#991b1b}.affected-systems li{margin:4px 0}.btn-collapse{padding:6px 12px;background:#fff;border:1px solid #fca5a5;border-radius:6px;color:#991b1b;font-size:12px;font-weight:500;cursor:pointer;transition:all .2s ease;align-self:flex-start}.btn-collapse:hover{background:#fef2f2;border-color:#f87171}.status-card-action{width:100%;padding:10px 16px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease;border:none;margin-top:8px}.btn-error{background:#ef4444;color:#fff}.btn-error:hover{background:#dc2626;transform:translateY(-1px);box-shadow:0 4px 12px #ef44444d}.btn-warning{background:#f59e0b;color:#fff}.btn-warning:hover{background:#d97706;transform:translateY(-1px);box-shadow:0 4px 12px #f59e0b4d}.btn-secondary{background:#f3f4f6;color:#374151;border:1px solid #d1d5db}.btn-secondary:hover{background:#e5e7eb;border-color:#9ca3af}@media (max-width: 768px){.status-card{padding:16px}.status-card-icon{font-size:28px}.status-card-title{font-size:14px}.status-card-metric{font-size:20px}.status-card-dual-sync{flex-direction:column;gap:8px}}.breadcrumb{display:flex;align-items:center;gap:8px;padding:12px 20px;background:#fff;border-bottom:1px solid #e5e7eb;font-size:14px;overflow-x:auto;white-space:nowrap}.breadcrumb-item{display:inline-flex;align-items:center;gap:6px;color:#6b7280;transition:all .2s ease}.breadcrumb-link{background:none;border:none;padding:6px 10px;border-radius:6px;cursor:pointer;font-size:14px;font-family:inherit}.breadcrumb-link:hover{background:#f3f4f6;color:#111827}.breadcrumb-link:hover .breadcrumb-icon{transform:scale(1.1)}.breadcrumb-current{color:#111827;font-weight:600;padding:6px 10px}.breadcrumb-icon{font-size:16px;transition:transform .2s ease}.breadcrumb-separator{color:#d1d5db;font-size:16px;-webkit-user-select:none;user-select:none}@media (max-width: 768px){.breadcrumb{padding:8px 12px;font-size:13px}.breadcrumb-label{max-width:120px;overflow:hidden;text-overflow:ellipsis}.breadcrumb-item:not(:nth-last-child(-n+4)){display:none}.breadcrumb-separator:not(:nth-last-child(-n+3)){display:none}}.admin-dashboard{min-height:100vh;background:#f9fafb}.admin-dashboard.loading,.admin-dashboard.error{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px}.spinner{width:48px;height:48px;border:4px solid #e5e7eb;border-top-color:#3b82f6;border-radius:50%;animation:spin .8s linear infinite}.error-banner{background:#fee2e2;border:1px solid #fca5a5;color:#991b1b;padding:16px 20px;border-radius:8px;margin-bottom:16px;font-weight:500}.btn-retry{padding:10px 20px;background:#3b82f6;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.btn-retry:hover{background:#2563eb;transform:translateY(-1px)}.dashboard-content{padding:24px;max-width:1400px;margin:0 auto}.dashboard-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:32px}.dashboard-header h1{font-size:32px;font-weight:700;color:#111827;margin:0 0 8px}.dashboard-subtitle{font-size:16px;color:#6b7280;margin:0}.btn-refresh{padding:10px 20px;background:#fff;border:1px solid #d1d5db;border-radius:8px;color:#374151;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.btn-refresh:hover{background:#f9fafb;border-color:#9ca3af;transform:translateY(-1px)}.dashboard-section{margin-bottom:40px}.section-title{font-size:20px;font-weight:700;color:#111827;margin:0 0 20px;display:flex;align-items:center;gap:10px}.status-cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-bottom:20px}@media (min-width: 1024px){.status-cards-grid{grid-template-columns:repeat(4,1fr)}}@media (max-width: 768px){.status-cards-grid{grid-template-columns:1fr}}.quick-stats{background:#fff;border-radius:12px;padding:24px;box-shadow:0 1px 3px #0000001a;display:flex;flex-direction:column;gap:16px}.stat-item{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid #e5e7eb}.stat-item:last-child{border-bottom:none}.stat-label{font-size:14px;color:#6b7280;font-weight:500;min-width:140px}.stat-value{flex:1;font-size:14px;color:#111827;font-weight:600}.stat-value.error{color:#dc2626}.stat-icon{font-size:18px;line-height:1}.stat-action{padding:6px 16px;background:#ef4444;color:#fff;border:none;border-radius:6px;font-size:12px;font-weight:700;cursor:pointer;transition:all .2s ease}.stat-action:hover{background:#dc2626;transform:translateY(-1px)}.admin-actions{display:flex;gap:12px;flex-wrap:wrap}.btn-admin-action{padding:12px 24px;background:#fff;border:1px solid #d1d5db;border-radius:8px;color:#374151;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.btn-admin-action:hover{background:#f9fafb;border-color:#9ca3af;transform:translateY(-1px);box-shadow:0 2px 8px #0000001a}@media (max-width: 768px){.dashboard-content{padding:16px}.dashboard-header{flex-direction:column;gap:16px}.dashboard-header h1{font-size:24px}.section-title{font-size:18px}.quick-stats{padding:16px}.stat-label{min-width:100px;font-size:13px}.stat-value{font-size:13px}.admin-actions{flex-direction:column}.btn-admin-action{width:100%}}.admin-panel-v2-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;z-index:10000;display:flex;align-items:center;justify-content:center;animation:fadeIn .2s ease-out}.admin-panel-v2{width:95vw;height:90vh;max-width:1800px;background:var(--app-bg, #f8f9fc);border-radius:16px;box-shadow:0 20px 60px #0000004d;display:flex;overflow:hidden;animation:slideUp .3s ease-out}.admin-sidebar{width:280px;background:linear-gradient(135deg,#1a1a2efa,#16213efa);border-right:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;transition:width .3s ease}.admin-sidebar.collapsed{width:70px}.sidebar-header{padding:1.5rem;border-bottom:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;align-items:center}.sidebar-header-left{display:flex;align-items:center;gap:.75rem}.sidebar-header h2{margin:0;font-size:1.3rem;color:#fff;font-weight:700}.admin-sidebar.collapsed .sidebar-header h2{display:none}.sidebar-health-indicator{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:6px;border:2px solid;cursor:pointer;transition:all .2s ease;background:#ffffff1a;padding:0}.sidebar-health-indicator:hover{transform:scale(1.1);background:#ffffff26}.sidebar-health-indicator.status-ok,.sidebar-health-indicator.status-healthy{border-color:#10b981}.sidebar-health-indicator.status-ok .health-dot,.sidebar-health-indicator.status-healthy .health-dot{background:#10b981;box-shadow:0 0 8px #10b98199}.sidebar-health-indicator.status-degraded{border-color:#f59e0b}.sidebar-health-indicator.status-degraded .health-dot{background:#f59e0b;box-shadow:0 0 8px #f59e0b99;animation:pulse-warning 2s infinite}.sidebar-health-indicator.status-error,.sidebar-health-indicator.status-unhealthy{border-color:#ef4444}.sidebar-health-indicator.status-error .health-dot,.sidebar-health-indicator.status-unhealthy .health-dot{background:#ef4444;box-shadow:0 0 8px #ef444499;animation:pulse-error 1s infinite}.sidebar-health-indicator.status-unknown{border-color:#6b7280}.sidebar-health-indicator.status-unknown .health-dot{background:#6b7280}.sidebar-health-indicator .health-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0}.btn-collapse{background:#ffffff1a;border:none;color:#fff;width:32px;height:32px;border-radius:6px;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;font-size:1rem}.btn-collapse:hover{background:#fff3}.sidebar-nav{flex:1;overflow-y:auto;padding:1rem 0}.nav-category{margin-bottom:.25rem;border-bottom:2px solid rgba(255,255,255,.08);padding-bottom:0}.nav-category:last-child{border-bottom:none}.category-header{display:flex;align-items:center;gap:.6rem;padding:.85rem 1.5rem;color:#ffffffe6;cursor:pointer;transition:all .2s;font-weight:700;font-size:.9rem;text-transform:uppercase;letter-spacing:.8px;justify-content:flex-start;margin-bottom:0}.admin-sidebar.collapsed .category-header{justify-content:center;padding:.9rem 0}.category-header:hover{background:#ffffff14;color:#fffffff2}.category-header.active{background:linear-gradient(135deg,#667eea4d,#764ba24d);color:#fff;border-left:3px solid #667eea}.category-icon{font-size:1.2rem;flex-shrink:0}.admin-sidebar.collapsed .category-label{display:none}.category-sections{padding-left:1.25rem;background:#00000040;border-left:3px solid rgba(102,126,234,.3);margin-left:1.5rem;margin-top:0;padding-top:.25rem;padding-bottom:.5rem;box-shadow:inset 0 2px 4px #0000001a}.section-btn{display:flex;align-items:center;gap:.7rem;width:100%;padding:.65rem 1rem;background:none;border:none;color:#ffffffb3;cursor:pointer;transition:all .2s;font-size:.85rem;text-align:left;font-weight:500;border-radius:4px;margin:.15rem 0}.section-btn:hover{background:#ffffff1f;color:#fff;transform:translate(2px)}.section-btn.active{background:linear-gradient(90deg,#667eea4d,#764ba233);color:#fff;font-weight:600;border-left:3px solid #667eea;box-shadow:0 2px 8px #667eea4d}.section-icon{font-size:1rem;flex-shrink:0}.sidebar-footer{padding:1rem;border-top:1px solid rgba(255,255,255,.1)}.btn-view-toggle{width:100%;padding:.75rem 1rem;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#fff;border-radius:8px;cursor:pointer;transition:all .2s;font-weight:600;font-size:.9rem}.btn-view-toggle:hover{background:#ffffff26}.btn-view-toggle.active{background:linear-gradient(135deg,#667eea,#764ba2);border-color:transparent;box-shadow:0 4px 12px #667eea66}.admin-sidebar.collapsed .btn-view-toggle{padding:.75rem .5rem;font-size:1.2rem}.admin-sidebar.collapsed .btn-view-toggle:not(.active){font-size:0}.admin-sidebar.collapsed .btn-view-toggle:before{content:attr(title);font-size:1.2rem}.admin-main{flex:1;display:flex;flex-direction:column;overflow:hidden}.admin-main-header{background:var(--app-card-bg, white);border-bottom:2px solid var(--app-border, #e0e0e0);padding:1.25rem 2rem;display:flex;justify-content:space-between;align-items:center}.header-left-section{display:flex;align-items:center;gap:1.5rem}.system-health-indicator{display:flex;align-items:center;gap:.5rem;padding:.6rem 1rem;border-radius:8px;border:2px solid;cursor:pointer;transition:all .2s ease;font-weight:600;font-size:.9rem;background:#fff}.system-health-indicator:hover{transform:translateY(-1px);box-shadow:0 4px 12px #00000026}.system-health-indicator.status-ok,.system-health-indicator.status-healthy{border-color:#10b981;color:#059669}.system-health-indicator.status-ok .health-dot,.system-health-indicator.status-healthy .health-dot{background:#10b981;box-shadow:0 0 8px #10b98180}.system-health-indicator.status-degraded{border-color:#f59e0b;color:#d97706}.system-health-indicator.status-degraded .health-dot{background:#f59e0b;box-shadow:0 0 8px #f59e0b80;animation:pulse-warning 2s infinite}.system-health-indicator.status-error,.system-health-indicator.status-unhealthy{border-color:#ef4444;color:#dc2626}.system-health-indicator.status-error .health-dot,.system-health-indicator.status-unhealthy .health-dot{background:#ef4444;box-shadow:0 0 8px #ef444480;animation:pulse-error 1s infinite}.system-health-indicator.status-unknown{border-color:#6b7280;color:#4b5563}.system-health-indicator.status-unknown .health-dot{background:#6b7280}.health-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}.health-text{white-space:nowrap}@keyframes pulse-warning{0%,to{opacity:1}50%{opacity:.5}}@keyframes pulse-error{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.1)}}.breadcrumb{display:flex;align-items:center;gap:.5rem;font-size:.9rem}.breadcrumb-item{color:var(--app-text-secondary, #666);font-weight:500}.breadcrumb-item.active{color:#667eea;font-weight:600}.breadcrumb-separator{color:var(--app-text-tertiary, #999);font-weight:300}.header-actions{display:flex;align-items:center;gap:1rem}.btn-close{padding:.7rem 1.5rem;background:transparent;border:2px solid var(--app-border, #e0e0e0);color:var(--app-text-primary, #1a202c);border-radius:8px;cursor:pointer;font-weight:600;font-size:.9rem;transition:all .2s}.btn-close:hover{background:var(--app-hover-bg, #f1f5f9);border-color:var(--app-accent, #667eea);color:var(--app-accent, #667eea)}.admin-main-content{flex:1;overflow-y:auto;padding:2rem;background:var(--app-bg, #f8f9fc)}.section-wrapper{max-width:1400px;margin:0 auto}.section-wrapper>h2{font-size:1.8rem;color:var(--app-text-primary, #1a202c);margin:0 0 1.5rem;font-weight:700}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;gap:2rem;flex-wrap:wrap}.section-header h2{margin:0;font-size:1.8rem;color:var(--app-text-primary, #1a202c);font-weight:700}.section-tabs{display:flex;gap:.5rem;background:var(--app-card-bg, white);padding:.5rem;border-radius:10px;border:2px solid var(--app-border, #e0e0e0)}.tab-btn{padding:.7rem 1.25rem;background:transparent;border:none;color:var(--app-text-secondary, #444);border-radius:6px;cursor:pointer;font-weight:600;font-size:.9rem;transition:all .2s}.tab-btn:hover{background:#667eea1a;color:var(--app-text-primary, #1a202c)}.tab-btn.active{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;box-shadow:0 2px 8px #667eea4d}.settings-info{background:var(--app-card-bg, white);border:2px solid var(--app-border, #e0e0e0);border-radius:12px;padding:2rem;margin-top:1rem}.settings-info p{margin:.5rem 0;color:var(--app-text-primary, #1a202c);line-height:1.6}.settings-content{display:flex;flex-direction:column;gap:2rem}.settings-group{padding:1.5rem;background:#fff;border-radius:12px;border:1px solid #e5e7eb;box-shadow:0 1px 3px #0000000d}.settings-group h3{margin:0 0 .5rem;font-size:1.2rem;color:var(--app-text-primary, #1a202c);font-weight:600}.settings-description{margin:0 0 1.5rem;color:var(--app-text-secondary, #6b7280);font-size:.95rem}.form-group{margin-bottom:1.5rem}.form-group label{display:block;margin-bottom:.5rem;font-weight:600;color:var(--app-text-primary, #374151);font-size:.9rem}.form-control{width:100%;padding:.75rem 1rem;font-size:.95rem;border:1px solid #d1d5db;border-radius:6px;background:#fff;transition:all .2s}.form-control:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.form-hint{display:block;margin-top:.5rem;font-size:.85rem;color:var(--app-text-secondary, #6b7280)}.checkbox-group{display:flex;align-items:center;gap:.5rem}.checkbox-group input[type=checkbox]{width:18px;height:18px;cursor:pointer}.checkbox-group label{margin:0;font-weight:400;cursor:pointer}.btn-primary{padding:.75rem 1.5rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:8px;font-weight:600;font-size:.95rem;cursor:pointer;transition:all .2s;box-shadow:0 2px 6px #667eea4d}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 12px #667eea66}.placeholder-section{padding:3rem 2rem;background:#f9fafb;border-radius:12px;border:2px dashed #d1d5db;text-align:center}.placeholder-section p{margin:.5rem 0;color:var(--app-text-secondary, #6b7280);font-size:1rem}.dark-mode .admin-panel-v2{background:#0f0f19fa}.dark-mode .admin-sidebar{background:linear-gradient(135deg,#1a1a2efa,#16213efa);border-right-color:#d4af7633}.dark-mode .sidebar-header{border-bottom-color:#d4af7633}.dark-mode .category-header.active{background:linear-gradient(135deg,#d4af7640,#d4af7626);border-left-color:#d4af76cc}.dark-mode .btn-view-toggle.active{background:linear-gradient(135deg,#d4af764d,#d4af7633);color:#d4af76;box-shadow:0 4px 12px #d4af764d}.dark-mode .admin-main-header{background:#1a1a2e99;border-bottom-color:#d4af7633}.dark-mode .system-health-indicator{background:#1a1a2ecc}.dark-mode .system-health-indicator.status-ok,.dark-mode .system-health-indicator.status-healthy{border-color:#10b981;color:#34d399}.dark-mode .system-health-indicator.status-degraded{border-color:#f59e0b;color:#fbbf24}.dark-mode .system-health-indicator.status-error,.dark-mode .system-health-indicator.status-unhealthy{border-color:#ef4444;color:#f87171}.dark-mode .system-health-indicator.status-unknown{border-color:#6b7280;color:#9ca3af}.dark-mode .breadcrumb-item{color:#d4af76d9;font-weight:600}.dark-mode .breadcrumb-item.active{color:#d4af76;font-weight:700;text-shadow:0 0 10px rgba(212,175,118,.3)}.dark-mode .breadcrumb-separator{color:#d4af7699;font-weight:400}.dark-mode .btn-close{background:#d4af7614;border-color:#d4af764d;color:#d4af76e6}.dark-mode .btn-close:hover{background:#d4af7626;border-color:#d4af7680;color:#d4af76}.dark-mode .admin-main-content{background:#0f0f1980}.dark-mode .section-wrapper>h2,.dark-mode .section-header h2{color:#d4af76f2}.dark-mode .section-tabs{background:#d4af7614;border-color:#d4af7633}.dark-mode .tab-btn{color:#d4af76b3}.dark-mode .tab-btn:hover{background:#d4af761f;color:#d4af76f2}.dark-mode .tab-btn.active{background:linear-gradient(135deg,#d4af7640,#d4af7626);color:#d4af76;border:2px solid rgba(212,175,118,.4);box-shadow:0 2px 8px #d4af764d}.dark-mode .settings-info{background:#d4af760d;border-color:#d4af7633}.dark-mode .settings-info p{color:#d4af76e6}.dark-mode .settings-group{background:#1a1a2e99;border-color:#d4af7633}.dark-mode .settings-group h3{color:#d4af76f2}.dark-mode .settings-description{color:#d4af76b3}.dark-mode .form-group label{color:#d4af76e6}.dark-mode .form-control{background:#0000004d;border-color:#d4af764d;color:#d4af76f2}.dark-mode .form-control:focus{border-color:#d4af7699;box-shadow:0 0 0 3px #d4af7626}.dark-mode .form-hint{color:#d4af7699}.dark-mode .placeholder-section{background:#0003;border-color:#d4af7633}.dark-mode .placeholder-section p{color:#d4af76cc}@media (max-width: 1200px){.admin-panel-v2{width:98vw;height:95vh}.admin-sidebar{width:240px}.admin-sidebar.collapsed{width:60px}}@media (max-width: 768px){.admin-sidebar:not(.collapsed){position:absolute;z-index:100;height:100%}}:root:not(.dark-mode) .admin-sidebar{background:linear-gradient(135deg,#fff,#f8f9ff);border-right:2px solid rgba(102,126,234,.15)}:root:not(.dark-mode) .sidebar-header{border-bottom:1px solid rgba(102,126,234,.15)}:root:not(.dark-mode) .sidebar-header h2{color:#1a202c;font-weight:700}:root:not(.dark-mode) .nav-category{border-bottom:1px solid rgba(102,126,234,.08)}:root:not(.dark-mode) .category-header{color:#2d3748}:root:not(.dark-mode) .category-header:hover{background:#667eea14;color:#1a202c}:root:not(.dark-mode) .category-header.active{background:linear-gradient(135deg,#667eea26,#667eea14);color:#1a202c;border-left:4px solid #667eea;font-weight:700}:root:not(.dark-mode) .category-sections{background:#667eea0d!important;border-left-color:#667eea33!important}:root:not(.dark-mode) .section-btn{color:#4a5568!important;font-weight:500!important}:root:not(.dark-mode) .section-btn:hover{background:#667eea1a!important;color:#1a202c!important}:root:not(.dark-mode) .section-btn.active{background:#667eea33!important;color:#1a202c!important;font-weight:700!important;border-left-color:#667eea!important}:root:not(.dark-mode) .nav-item{color:#4a5568}:root:not(.dark-mode) .nav-item:hover{background:#667eea14;color:#1a202c}:root:not(.dark-mode) .nav-item.active{background:#667eea26;color:#1a202c;font-weight:600;border-left:3px solid #667eea}:root:not(.dark-mode) .btn-collapse{background:#667eea1a;color:#667eea}:root:not(.dark-mode) .btn-collapse:hover{background:#667eea33;color:#667eea}:root:not(.dark-mode) .btn-view-toggle{background:#667eea14;color:#4a5568;border-color:#667eea33}:root:not(.dark-mode) .btn-view-toggle:hover{background:#667eea1f;color:#1a202c;border-color:#667eea4d}:root:not(.dark-mode) .btn-view-toggle.active{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-color:#667eea;box-shadow:0 4px 12px #667eea4d}:root:not(.dark-mode) .admin-main-header{background:#ffffffe6;border-bottom:2px solid rgba(102,126,234,.15);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}:root:not(.dark-mode) .system-health-indicator{background:#fffffff2;border-color:#667eea33}:root:not(.dark-mode) .system-health-indicator:hover{background:#fff;box-shadow:0 4px 12px #667eea26}:root:not(.dark-mode) .breadcrumb-item{color:#4a5568;font-weight:600}:root:not(.dark-mode) .breadcrumb-item.active{color:#667eea;font-weight:700}:root:not(.dark-mode) .breadcrumb-separator{color:#a0aec0}:root:not(.dark-mode) .btn-close{background:transparent;border:2px solid rgba(102,126,234,.25);color:#2d3748}:root:not(.dark-mode) .btn-close:hover{background:#667eea1a;border-color:#667eea;color:#667eea}:root:not(.dark-mode) .admin-main-content{background:linear-gradient(135deg,#f8f9fc,#f0f4ff)}.section-wrapper>h2,:root:not(.dark-mode) .section-header h2{color:#1a202c;font-weight:700}:root:not(.dark-mode) .section-tabs{background:#fff;border:2px solid rgba(102,126,234,.2);box-shadow:0 2px 8px #667eea14}:root:not(.dark-mode) .tab-btn{color:#4a5568;font-weight:600}:root:not(.dark-mode) .tab-btn:hover{background:#667eea1a;color:#1a202c}:root:not(.dark-mode) .tab-btn.active{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;box-shadow:0 4px 12px #667eea66}:root:not(.dark-mode) .settings-info{background:#fff;border:2px solid rgba(102,126,234,.2);box-shadow:0 2px 12px #667eea14}:root:not(.dark-mode) .settings-info p{color:#2d3748;font-weight:500}:root:not(.dark-mode) .settings-group{background:#fff;border:2px solid rgba(102,126,234,.15);box-shadow:0 2px 8px #667eea14}:root:not(.dark-mode) .settings-group h3{color:#1a202c;font-weight:700}:root:not(.dark-mode) .settings-description{color:#4a5568;font-weight:500}:root:not(.dark-mode) .form-group label{color:#2d3748;font-weight:600}:root:not(.dark-mode) .form-control{background:#fff;border:2px solid rgba(102,126,234,.2);color:#1a202c}:root:not(.dark-mode) .form-control:focus{border-color:#667eea;box-shadow:0 0 0 3px #667eea26}:root:not(.dark-mode) .form-control::placeholder{color:#a0aec0}:root:not(.dark-mode) .form-hint{color:#4a5568;font-weight:500}:root:not(.dark-mode) .placeholder-section{background:#667eea0d;border:2px dashed rgba(102,126,234,.3)}:root:not(.dark-mode) .placeholder-section p{color:#4a5568;font-weight:500}:root:not(.dark-mode) .sidebar-health-indicator{background:#fff3;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}:root:not(.dark-mode) .sidebar-health-indicator:hover{background:#ffffff4d}.admin-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:20px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease;-webkit-user-select:none;user-select:none}.admin-badge__icon{font-size:16px;line-height:1}.admin-badge__text{line-height:1}.admin-badge--admin{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;box-shadow:0 2px 8px #667eea4d}.admin-badge--admin:hover{transform:translateY(-1px);box-shadow:0 4px 12px #667eea66}.admin-badge--superadmin{background:linear-gradient(135deg,#f093fb,#f5576c);color:#fff;box-shadow:0 2px 8px #f093fb4d}.admin-badge--superadmin:hover{transform:translateY(-1px);box-shadow:0 4px 12px #f093fb66}.admin-badge:active{transform:translateY(0)}.admin-badge--compact{padding:8px;border-radius:50%}.admin-badge--compact .admin-badge__text{display:none}.view-mode-banner{position:fixed;top:0;left:0;right:0;z-index:9999;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:12px 20px;box-shadow:0 2px 8px #00000026;animation:slideDown .3s ease-out}@keyframes slideDown{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}.view-mode-banner__content{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:center;gap:12px}.view-mode-banner__icon{font-size:20px}.view-mode-banner__text{font-weight:600;font-size:14px}.view-mode-banner__button{background:#fff3;color:#fff;border:1px solid rgba(255,255,255,.4);padding:6px 16px;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s ease}.view-mode-banner__button:hover{background:#ffffff4d;border-color:#fff9;transform:translateY(-1px)}.view-mode-banner__button:active{transform:translateY(0)}body:has(.view-mode-banner) .app-header{margin-top:48px}.dark-mode .view-mode-banner{background:linear-gradient(135deg,#4a5568,#2d3748)}.introduction-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:radial-gradient(ellipse at center,#d4af7626,#000000d9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;z-index:10000;padding:2rem;animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.introduction-modal{background:var(--app-bg, #ffffff);border-radius:24px;box-shadow:0 30px 90px #0006,0 0 0 1px #d4af7633,inset 0 1px #ffffff4d;max-width:1100px;width:92%;max-height:90vh;overflow:hidden;position:relative;animation:slideUp .4s ease;display:flex;flex-direction:column}.introduction-content::-webkit-scrollbar{width:10px}.introduction-content::-webkit-scrollbar-track{background:linear-gradient(135deg,#d4af760d,#d4af761a);border-radius:5px;border:1px solid rgba(212,175,118,.1)}.introduction-content::-webkit-scrollbar-thumb{background:linear-gradient(135deg,#d4af76,#b8935a);border-radius:5px;border:2px solid rgba(255,255,255,.3);box-shadow:0 2px 8px #d4af764d}.introduction-content::-webkit-scrollbar-thumb:hover{background:linear-gradient(135deg,#d4b886,#d4af76);box-shadow:0 4px 12px #d4af7680}@keyframes slideUp{0%{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}.introduction-header{background:linear-gradient(135deg,#1a1a2e,#0f0f1e);color:#fff;padding:1.25rem 1.75rem;text-align:center;border-radius:24px 24px 0 0;flex-shrink:0;position:relative;overflow:hidden}.introduction-header:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,rgba(212,175,118,.15) 0%,transparent 50%,rgba(212,175,118,.1) 100%);pointer-events:none}.introduction-header:after{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent 0%,#D4AF76 50%,transparent 100%)}.introduction-header h1{margin:0 0 .35rem;font-size:2rem;font-weight:800;text-shadow:0 2px 20px rgba(212,175,118,.5);background:linear-gradient(135deg,#fff,#d4af76);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;position:relative;z-index:1}.introduction-subtitle{margin:0;font-size:1rem;color:#d4af76e6;font-weight:500;letter-spacing:.5px;position:relative;z-index:1}.introduction-content{padding:1.25rem 1.75rem;flex:1;overflow-y:auto;min-height:0}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:1.25rem}.feature-card{background:linear-gradient(135deg,#1a1a2e,#16213e);border-radius:14px;padding:1.5rem;border:2px solid rgba(102,126,234,.4);transition:all .4s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;box-shadow:0 8px 24px #0000004d}.feature-card:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at top right,rgba(102,126,234,.1) 0%,transparent 50%);pointer-events:none}.feature-card:hover{transform:translateY(-6px);box-shadow:0 16px 40px #667eea4d;border-color:#667eeab3}.feature-icon{font-size:3.5rem;margin-bottom:1rem;display:block;filter:drop-shadow(0 0 12px rgba(102,126,234,.6));font-weight:300;line-height:1;padding:.25rem 0}.feature-card h3{margin:0 0 .5rem;font-size:1.2rem;color:#fff;text-shadow:0 2px 8px rgba(102,126,234,.3)}.feature-card p{margin:0 0 .75rem;color:#fffc;line-height:1.5;font-size:.9rem}.feature-highlights li{padding:.35rem 0;color:#ffffffe6;display:flex;align-items:center;gap:.5rem;font-size:.875rem}.feature-highlights li:before{color:#667eea;text-shadow:0 0 8px rgba(102,126,234,.6)}.feature-card-premium{background:linear-gradient(135deg,#1a1a2e,#16213e);border:2px solid #D4AF76;box-shadow:0 8px 24px #d4af7640;position:relative}.feature-card-premium:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at top right,rgba(212,175,118,.1) 0%,transparent 50%);pointer-events:none}.feature-card-premium:after{content:"◆ PREMIUM";position:absolute;top:1rem;right:1rem;font-size:.7rem;font-weight:700;letter-spacing:1.5px;color:#d4b886;background:#d4af7633;padding:.35rem .65rem;border-radius:6px;border:1.5px solid rgba(212,175,118,.5);box-shadow:0 2px 8px #d4af764d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.feature-card-premium .feature-icon{filter:drop-shadow(0 0 12px rgba(212,175,118,.7))}.feature-card-premium h3{color:#fff;text-shadow:0 2px 8px rgba(212,175,118,.3)}.feature-card-premium p{color:#fffc}.feature-card-premium .feature-highlights li{color:#ffffffe6}.feature-card-premium .feature-highlights li:before{color:#d4af76;text-shadow:0 0 8px rgba(212,175,118,.6)}.feature-card-premium:hover{transform:translateY(-6px) scale(1.02);box-shadow:0 16px 40px #d4af7659;border-color:#d4b886}.feature-highlights{list-style:none;padding:0;margin:0}.feature-highlights li:before{content:"✓";font-weight:700;font-size:1.2rem}.tips-section{background:linear-gradient(135deg,#1a1a2e,#16213e);border-radius:14px;padding:1.25rem;border:2px solid rgba(212,175,118,.4);box-shadow:0 8px 24px #d4af7626;position:relative;overflow:hidden}.tips-section:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at bottom left,rgba(212,175,118,.08) 0%,transparent 50%);pointer-events:none}.tips-section h3{margin:0 0 .875rem;font-size:1.1rem;color:#fff;text-shadow:0 2px 8px rgba(212,175,118,.3);position:relative;z-index:1}.tips-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem}.tip-item{display:flex;align-items:center;gap:.65rem;padding:.75rem 1rem;background:#ffffff0d;border-radius:10px;border:1px solid rgba(212,175,118,.25);transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 8px #0003;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.tip-item:hover{transform:translate(6px);border-color:#d4af7699;box-shadow:0 4px 12px #d4af7640;background:#ffffff1a}.tip-icon{font-size:1.5rem;flex-shrink:0;color:#d4af76e6;font-weight:300}.tip-item span:last-child{color:#ffffffe6;font-size:.875rem;line-height:1.4}.introduction-footer{padding:1.25rem 1.75rem;border-top:1px solid rgba(212,175,118,.3);background:linear-gradient(135deg,#1a1a2e,#16213e);display:flex;flex-direction:column;align-items:center;gap:1rem;flex-shrink:0;position:relative;border-radius:0 0 24px 24px}.introduction-footer:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 0%,rgba(212,175,118,.5) 50%,transparent 100%)}.checkbox-container label{display:flex;align-items:center;gap:.5rem;cursor:pointer;font-size:.95rem;color:#fffc;-webkit-user-select:none;user-select:none}.checkbox-container input[type=checkbox]{width:18px;height:18px;cursor:pointer;accent-color:#D4AF76}.action-buttons{display:flex;gap:1rem}.introduction-footer .btn-secondary,.introduction-footer .btn-primary{padding:1rem 2rem;font-size:1rem;font-weight:600;border-radius:12px;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);border:none;white-space:nowrap;position:relative;overflow:hidden;letter-spacing:.3px;text-align:center;display:flex;align-items:center;justify-content:center}.introduction-footer .btn-secondary{background:linear-gradient(135deg,#ffffff1f,#ffffff14);color:#fff;border:2px solid rgba(255,255,255,.3);box-shadow:0 4px 12px #00000040,inset 0 1px #fff3;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);position:relative;overflow:hidden}.introduction-footer .btn-secondary:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);transition:left .5s ease}.introduction-footer .btn-secondary:hover:before{left:100%}.introduction-footer .btn-secondary:hover{background:linear-gradient(135deg,#fff3,#ffffff26);border-color:#ffffff80;box-shadow:0 6px 20px #ffffff26,0 2px 8px #0000004d,inset 0 1px #ffffff4d;transform:translateY(-2px) scale(1.02);color:#fff}html:not(.dark-mode) .introduction-overlay{background:radial-gradient(ellipse at center,#d4af7614,#fffffff2)}html:not(.dark-mode) .introduction-modal{background:#fff;box-shadow:0 30px 90px #00000026,0 0 0 1px #d4af7633,inset 0 1px #fff}html:not(.dark-mode) .introduction-header{background:linear-gradient(135deg,#fff,#f8f8f8);border-bottom:2px solid rgba(212,175,118,.3)}html:not(.dark-mode) .introduction-header h1{background:linear-gradient(135deg,#d4af76,#b8935a);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:none}html:not(.dark-mode) .introduction-subtitle{color:#d4af76e6}html:not(.dark-mode) .introduction-content{background:#fff}html:not(.dark-mode) .feature-card{background:linear-gradient(135deg,#fff,#fafafa);border:2px solid rgba(212,175,118,.2);box-shadow:0 8px 24px #00000014}html:not(.dark-mode) .feature-card:before{background:radial-gradient(circle at top right,rgba(212,175,118,.06) 0%,transparent 50%)}html:not(.dark-mode) .feature-card:hover{border-color:#d4af7666;box-shadow:0 16px 40px #d4af7626;background:linear-gradient(135deg,#fff,#f5f5f5)}html:not(.dark-mode) .feature-card h3{color:#1a202c;text-shadow:none}html:not(.dark-mode) .feature-card p{color:#4a5568}html:not(.dark-mode) .feature-highlights li{color:#2d3748}html:not(.dark-mode) .feature-highlights li:before{color:#d4af76}html:not(.dark-mode) .feature-card-premium{background:linear-gradient(135deg,#fffbf5,#fff7ed);border:2px solid #D4AF76;box-shadow:0 8px 24px #d4af7633}html:not(.dark-mode) .feature-card-premium:hover{box-shadow:0 16px 40px #d4af7640}html:not(.dark-mode) .tips-section{background:linear-gradient(135deg,#fafafa,#f5f5f5);border:2px solid rgba(212,175,118,.2)}html:not(.dark-mode) .tip-item{background:#ffffffe6;border:1px solid rgba(212,175,118,.2)}html:not(.dark-mode) .tip-icon{color:#d4af76}html:not(.dark-mode) .tip-item span:last-child{color:#2d3748}html:not(.dark-mode) .introduction-footer{background:linear-gradient(135deg,#fafafa,#fff);border-top:1px solid rgba(212,175,118,.2)}html:not(.dark-mode) .introduction-footer .btn-primary{background:linear-gradient(135deg,#d4af76,#b8935a);color:#fff;box-shadow:0 8px 24px #d4af7659;border:2px solid rgba(255,255,255,.3)}html:not(.dark-mode) .introduction-footer .btn-primary:hover{background:linear-gradient(135deg,#e0bc87,#d4af76);box-shadow:0 12px 32px #d4af7666}html:not(.dark-mode) .introduction-footer .btn-secondary{background:linear-gradient(135deg,#fff,#f8f8f8);color:#d4af76;border:2px solid rgba(212,175,118,.3);box-shadow:0 4px 12px #00000014}html:not(.dark-mode) .introduction-footer .btn-secondary:hover{background:linear-gradient(135deg,#f8f8f8,#f0f0f0);border-color:#d4af7680;box-shadow:0 6px 20px #d4af7633;color:#b8935a}html:not(.dark-mode) .btn-close-modal{border:2px solid rgba(212,175,118,.3);background:#fffffff2;color:#d4af76;box-shadow:0 4px 12px #00000014}html:not(.dark-mode) .btn-close-modal:hover{background:#d4af76;color:#fff;border-color:#d4af7680;box-shadow:0 6px 20px #d4af764d}html:not(.dark-mode) .introduction-content::-webkit-scrollbar-track{background:linear-gradient(135deg,#d4af7608,#d4af760d);border:1px solid rgba(212,175,118,.1)}html:not(.dark-mode) .introduction-content::-webkit-scrollbar-thumb{background:linear-gradient(135deg,#d4af76,#b8935a);border:2px solid rgba(255,255,255,.5);box-shadow:0 2px 8px #d4af764d}html:not(.dark-mode) .introduction-content::-webkit-scrollbar-thumb:hover{background:linear-gradient(135deg,#e0bc87,#d4af76);box-shadow:0 4px 12px #d4af7680}html:not(.dark-mode) .checkbox-container label{color:#4a5568}html:not(.dark-mode) .checkbox-container input[type=checkbox]{accent-color:#D4AF76}.introduction-footer .btn-primary{background:linear-gradient(135deg,#d4af76,#b8935a);color:#fff;box-shadow:0 8px 24px #d4af7666,0 2px 8px #0000004d,inset 0 1px #ffffff4d;border:2px solid rgba(255,255,255,.3);text-shadow:0 2px 4px rgba(0,0,0,.3);position:relative}.introduction-footer .btn-primary:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transition:left .6s ease}.introduction-footer .btn-primary:hover:before{left:100%}.introduction-footer .btn-primary:after{content:"";position:absolute;top:-2px;left:-2px;right:-2px;bottom:-2px;background:linear-gradient(135deg,#d4b886,#d4af76);border-radius:12px;z-index:-1;opacity:0;transition:opacity .3s ease}.introduction-footer .btn-primary:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 12px 32px #d4af7680,0 4px 12px #0006,inset 0 1px #fff6}.introduction-footer .btn-primary:hover:after{opacity:1}.btn-close-modal{position:absolute;top:1.5rem;right:1.5rem;width:44px;height:44px;border-radius:50%;border:2px solid rgba(212,175,118,.3);background:#ffffff26;color:#d4af76;font-size:1.5rem;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:center;z-index:10;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 4px 12px #00000026}.btn-close-modal:hover{background:#d4af76e6;color:#fff;border-color:#ffffff80;transform:rotate(90deg) scale(1.1);box-shadow:0 6px 20px #d4af7666}@media (max-width: 1200px){.feature-grid{grid-template-columns:repeat(3,1fr)}.tips-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 900px){.introduction-modal{max-width:95%}.feature-grid{grid-template-columns:1fr;gap:1rem}.tips-grid{grid-template-columns:1fr}}@media (max-width: 768px){.introduction-overlay{padding:1rem}.introduction-header{padding:1.25rem 1rem}.introduction-header h1{font-size:1.5rem}.introduction-subtitle{font-size:.9rem}.introduction-content{padding:1rem}.feature-grid,.tips-grid{grid-template-columns:1fr}.introduction-footer{flex-direction:column;align-items:stretch;padding:1rem}.action-buttons{justify-content:center}}html.dark-mode .introduction-overlay{background:radial-gradient(ellipse at center,#667eea26,#000000d9)}html.dark-mode .introduction-modal{background:#1a1a2e}html.dark-mode .introduction-header{background:linear-gradient(135deg,#1a1a2e,#0f0f1e);color:#fff}html.dark-mode .introduction-header h1{background:linear-gradient(135deg,#fff,#d4af76);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:0 2px 20px rgba(212,175,118,.5)}html.dark-mode .introduction-subtitle{color:#d4af76e6}html.dark-mode .introduction-content{background:#1a1a2e}html.dark-mode .feature-card{background:linear-gradient(135deg,#1a1a2e,#16213e);border:2px solid rgba(102,126,234,.4);box-shadow:0 8px 24px #0000004d}html.dark-mode .feature-card:before{background:radial-gradient(circle at top right,rgba(102,126,234,.1) 0%,transparent 50%)}html.dark-mode .feature-card:hover{border-color:#667eea99;box-shadow:0 16px 40px #667eea33;background:linear-gradient(135deg,#16213e,#1a2847)}html.dark-mode .feature-card h3{color:#fff;text-shadow:0 2px 10px rgba(102,126,234,.3)}html.dark-mode .feature-card p{color:#fffc}html.dark-mode .feature-highlights li{color:#ffffffe6}html.dark-mode .feature-highlights li:before{color:#667eea}html.dark-mode .feature-card-premium{background:linear-gradient(135deg,#1a1a2e,#16213e);border:2px solid #D4AF76}html.dark-mode .tips-section{background:linear-gradient(135deg,#16213e,#1a2847);border:2px solid rgba(102,126,234,.3)}html.dark-mode .tip-item{background:#ffffff0d;border:1px solid rgba(102,126,234,.3)}html.dark-mode .tip-icon{color:#667eea}html.dark-mode .tip-item span:last-child{color:#ffffffe6}html.dark-mode .introduction-footer{background:linear-gradient(135deg,#16213e,#1a1a2e);border-top:1px solid rgba(102,126,234,.3)}html.dark-mode .introduction-footer .btn-primary{background:linear-gradient(135deg,#d4af76,#b8935a)!important;color:#fff!important;box-shadow:0 8px 24px #d4af7666,0 2px 8px #0000004d,inset 0 1px #ffffff4d!important;border:2px solid rgba(255,255,255,.3)!important}html.dark-mode .introduction-footer .btn-primary:hover{background:linear-gradient(135deg,#e0bc87,#d4af76)!important;transform:translateY(-2px) scale(1.02);box-shadow:0 12px 32px #d4af7680,0 4px 12px #0006,inset 0 1px #fff6!important}html.dark-mode .introduction-footer .btn-secondary{background:linear-gradient(135deg,#ffffff1f,#ffffff14)!important;color:#fff!important;border:2px solid rgba(255,255,255,.3)!important;box-shadow:0 4px 12px #0000004d,inset 0 1px #fff3!important}html.dark-mode .introduction-footer .btn-secondary:hover{background:linear-gradient(135deg,#fff3,#ffffff26)!important;border-color:#ffffff80!important;box-shadow:0 6px 20px #ffffff26,0 2px 8px #0000004d,inset 0 1px #ffffff4d!important}html.dark-mode .btn-close-modal{background:#ffffff26;color:#d4af76;border-color:#d4af764d}html.dark-mode .btn-close-modal:hover{background:#d4af76e6;color:#fff}html.dark-mode .checkbox-container label{color:#ffffffe6}html.dark-mode .checkbox-container input[type=checkbox]{accent-color:#667eea}.user-menu-container{position:relative}.user-menu-button{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:var(--app-card-bg, white);border:1px solid var(--app-border, #e0e0e0);border-radius:8px;cursor:pointer;font-size:.9rem;color:var(--app-text-primary, #1a202c);font-weight:500;transition:all .2s}.user-menu-button:hover{background:var(--app-hover-bg, #f1f5f9);border-color:var(--app-accent, #667eea);box-shadow:0 2px 8px #667eea26}.user-menu-button.login-button{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-color:transparent;font-weight:600;box-shadow:0 4px 12px #667eea4d}.user-menu-button.login-button:hover{transform:translateY(-2px);box-shadow:0 6px 16px #667eea66}.user-icon{font-size:1.2rem}.user-name{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.role-badge{font-size:.7rem;padding:.2rem .5rem;border-radius:4px;font-weight:500;text-transform:uppercase}.role-badge.admin{background:#ff6b6b;color:#fff}.role-badge.designer{background:#4ecdc4;color:#fff}.menu-overlay{position:fixed;top:0;left:0;right:0;bottom:0;z-index:9998;background:transparent}.user-menu-dropdown{position:fixed;background:var(--app-card-bg, white);border:1px solid var(--app-border, #e2e8f0);border-radius:12px;box-shadow:0 12px 32px #0000001f,0 4px 8px #00000014;min-width:250px;z-index:9999;overflow:hidden}.user-menu-header{display:flex;align-items:center;gap:1rem;padding:1.25rem;background:var(--app-hover-bg, #f1f5f9);border-bottom:1px solid var(--app-border, #e2e8f0)}.user-avatar{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:1.25rem;box-shadow:0 4px 8px #667eea40}.user-info{flex:1;min-width:0}.user-info .user-name{font-weight:600;font-size:.95rem;color:var(--app-text-primary, #1a202c);max-width:none;margin-bottom:.25rem}.user-email{font-size:.8rem;color:var(--app-text-secondary, #475569);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.user-menu-divider{height:1px;background:var(--app-border, #e2e8f0);margin:0}.user-menu-item{display:flex;align-items:center;gap:.75rem;width:100%;padding:.875rem 1.25rem;background:none;border:none;color:var(--app-text-primary, #1a202c);font-size:.9rem;font-weight:500;cursor:pointer;transition:all .2s;text-align:left}.user-menu-item:hover{background:var(--app-hover-bg, #f1f5f9);color:var(--app-accent, #667eea)}.user-menu-item.logout{color:#ff6b6b}.user-menu-item.logout:hover{background:#ff6b6b1a}.user-menu-item span{font-size:1.1rem}.dark-mode .user-menu-button{background:#d4af7614;border-color:#d4af7633;color:#d4af76f2}.dark-mode .user-menu-button:hover{background:#d4af7626;border-color:#d4af7680;box-shadow:0 4px 12px #d4af7633}.dark-mode .user-menu-button.login-button{background:linear-gradient(135deg,#d4af7640,#d4af7626);border-color:#d4af7666;color:#d4af76;box-shadow:0 4px 12px #d4af764d}.dark-mode .user-menu-button.login-button:hover{background:linear-gradient(135deg,#d4af7659,#d4af7640);box-shadow:0 6px 16px #d4af7666}.dark-mode .user-menu-dropdown{background:linear-gradient(135deg,#1a1a2efa,#16213efa);border-color:#d4af764d;box-shadow:0 12px 32px #0009,0 0 0 1px #d4af7633}.dark-mode .user-menu-header{background:#d4af7614;border-bottom-color:#d4af7633}.dark-mode .user-avatar{background:linear-gradient(135deg,#d4af7666,#d4af764d);color:#d4af76;box-shadow:0 4px 12px #d4af764d}.dark-mode .user-info .user-name{color:#d4af76f2}.dark-mode .user-email{color:#d4af76b3}.dark-mode .user-menu-divider{background:#d4af7633}.dark-mode .user-menu-item{color:#d4af76e6}.dark-mode .user-menu-item:hover{background:#d4af761f;color:#d4af76}.dark-mode .user-menu-item.logout{color:#ff8585}.dark-mode .user-menu-item.logout:hover{background:#ff6b6b26;color:#f99}.customer-dashboard{padding:2rem;max-width:1200px;margin:0 auto}.dashboard-header{display:flex;justify-content:space-between;align-items:start;margin-bottom:2rem}.dashboard-header h2{font-size:1.8rem;color:#2c3e50;margin:0}.dashboard-subtitle{color:var(--text-secondary);font-size:1rem;margin-top:.5rem}.close-button{background:var(--background-secondary);border:1px solid var(--border-color);border-radius:50%;width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1.2rem;color:var(--text-secondary);transition:all .2s}.close-button:hover{background:var(--background-tertiary);color:var(--text-primary)}.dashboard-filters{display:flex;gap:.5rem;margin-bottom:2rem}.filter-button{padding:.5rem 1rem;background:var(--background-secondary);border:1px solid var(--border-color);border-radius:6px;cursor:pointer;font-size:.9rem;color:var(--text-primary);transition:all .2s}.filter-button:hover{background:var(--background-tertiary)}.filter-button.active{background:var(--primary-color);color:#fff;border-color:var(--primary-color)}.dashboard-content{min-height:400px}.loading,.empty-state{text-align:center;padding:3rem;color:var(--text-secondary)}.empty-state p{margin-bottom:1.5rem}.designs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem}.design-card{background:var(--background-secondary);border:1px solid var(--border-color);border-radius:8px;overflow:hidden;transition:all .2s}.design-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.design-thumbnail{width:100%;height:180px;background:#f7fafc;display:flex;align-items:center;justify-content:center;overflow:hidden}.design-thumbnail img{width:100%;height:100%;object-fit:cover}.design-info{padding:1rem}.design-name{font-size:1rem;font-weight:500;color:#111827;margin:0 0 .5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.design-meta{font-size:.85rem;color:var(--text-secondary);margin:0 0 .25rem}.design-date{font-size:.8rem;color:var(--text-tertiary);margin:0 0 .5rem}.status-badge{display:inline-block;padding:.25rem .5rem;font-size:.75rem;font-weight:500;border-radius:4px;text-transform:uppercase}.status-badge.saved{background:#e3f2fd;color:#1976d2}.status-badge.ordered{background:#fff3e0;color:#f57c00}.status-badge.in_production{background:#f3e5f5;color:#7b1fa2}.status-badge.shipped{background:#e8f5e9;color:#388e3c}.design-actions{display:flex;gap:.5rem;padding:.75rem 1rem;border-top:1px solid var(--border-color)}.btn-icon{flex:1;padding:.5rem;background:var(--background-primary);border:1px solid var(--border-color);border-radius:6px;cursor:pointer;font-size:1.1rem;transition:all .2s}.btn-icon:hover{background:var(--background-tertiary);transform:scale(1.05)}.btn-icon.delete:hover{background:#ff6b6b1a;border-color:#ff6b6b}.dark-mode .dashboard-header h2{color:#e0e0e0}.tour-overlay-root{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10000000;pointer-events:none}.tour-overlay-svg{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:auto}.spotlight-animating{transition:all .3s cubic-bezier(.4,0,.2,1)}.tour-highlight-ring{position:absolute;border:3px solid #D4AF76;border-radius:12px;box-shadow:0 0 0 4px #d4af764d,0 0 30px #d4af7666,0 0 60px #d4af7633,inset 0 0 20px #ffffff1a;pointer-events:none;transition:all .3s cubic-bezier(.4,0,.2,1);animation:pulse-ring 2s ease-in-out infinite}.tour-highlight-ring.animating{opacity:0;transform:scale(.95)}@keyframes pulse-ring{0%,to{box-shadow:0 0 0 4px #d4af764d,0 0 30px #d4af7666,0 0 60px #d4af7633,inset 0 0 20px #ffffff1a}50%{box-shadow:0 0 0 6px #d4af7666,0 0 40px #d4af7680,0 0 80px #d4af764d,inset 0 0 25px #ffffff26}}.tour-popover{position:fixed;bottom:32px;left:50%;transform:translate(-50%);width:90%;max-width:440px;background:linear-gradient(145deg,#1c1c1c,#262626);border:1px solid rgba(212,175,118,.4);border-radius:16px;box-shadow:0 20px 60px #0009,0 0 0 1px #ffffff0d,0 0 40px #d4af7626;pointer-events:auto;animation:popover-enter .3s cubic-bezier(.34,1.56,.64,1)}.tour-popover.animating{animation:popover-step .25s cubic-bezier(.4,0,.2,1)}@keyframes popover-enter{0%{opacity:0;transform:translate(-50%) translateY(20px) scale(.95)}to{opacity:1;transform:translate(-50%) translateY(0) scale(1)}}@keyframes popover-step{0%{opacity:.8;transform:translate(-50%) scale(.98)}to{opacity:1;transform:translate(-50%) scale(1)}}.tour-close-btn{position:absolute;top:14px;right:14px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:#ffffff0f;border:1px solid rgba(255,255,255,.1);border-radius:8px;color:#ffffff80;cursor:pointer;transition:all .2s ease}.tour-close-btn:hover{background:#d4af7626;border-color:#d4af7666;color:#d4af76;transform:scale(1.05)}.tour-popover-title{padding:20px 50px 8px 24px;font-size:18px;font-weight:600;color:#d4af76;letter-spacing:-.01em;line-height:1.3}.tour-popover-description{padding:0 24px 20px;font-size:15px;line-height:1.65;color:#fffc}.tour-popover-footer{display:flex;align-items:center;justify-content:center;gap:16px;padding:16px 24px;background:#00000040;border-top:1px solid rgba(255,255,255,.06);border-radius:0 0 16px 16px}.tour-nav-btn{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:12px;border:none;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1)}.tour-prev-btn{background:#ffffff14;border:1px solid rgba(255,255,255,.12);color:#ffffffb3}.tour-prev-btn:hover:not(.disabled){background:#ffffff1f;border-color:#d4af7666;color:#d4af76;transform:translate(-2px)}.tour-prev-btn.disabled{opacity:.3;cursor:not-allowed}.tour-next-btn{background:linear-gradient(135deg,#d4af76,#b8935a);color:#1a1a1a;box-shadow:0 4px 12px #d4af764d}.tour-next-btn:hover{background:linear-gradient(135deg,#e5c896,#d4af76);transform:translate(2px);box-shadow:0 6px 20px #d4af7666}.tour-done-btn{background:linear-gradient(135deg,#4caf50,#45a049);box-shadow:0 4px 12px #4caf504d}.tour-done-btn:hover{background:linear-gradient(135deg,#5bc95e,#4caf50);box-shadow:0 6px 20px #4caf5066}.tour-progress{display:flex;align-items:center;gap:4px;font-size:14px;font-weight:500;min-width:50px;justify-content:center}.tour-progress-current{color:#d4af76;font-weight:600}.tour-progress-separator{color:#ffffff4d}.tour-progress-total{color:#ffffff80}@media (max-width: 600px){.tour-popover{bottom:16px;width:94%;max-width:none;border-radius:14px}.tour-popover-title{font-size:17px;padding:18px 44px 6px 18px}.tour-popover-description{font-size:14px;padding:0 18px 16px}.tour-popover-footer{padding:14px 18px;gap:12px}.tour-nav-btn{width:44px;height:44px;border-radius:10px}.tour-close-btn{top:12px;right:12px;width:28px;height:28px}}@media (max-width: 380px){.tour-popover{bottom:12px;width:96%}.tour-nav-btn{width:40px;height:40px}.tour-progress{font-size:13px}}html:not(.dark-mode) .tour-popover{background:linear-gradient(145deg,#fff,#f8f8f8);border:1px solid rgba(212,175,118,.3);box-shadow:0 20px 60px #00000026,0 0 0 1px #d4af761a,0 0 40px #d4af761a}html:not(.dark-mode) .tour-popover-title{color:#b8935a}html:not(.dark-mode) .tour-popover-description{color:#000000bf}html:not(.dark-mode) .tour-popover-footer{background:#d4af760d;border-top:1px solid rgba(212,175,118,.15)}html:not(.dark-mode) .tour-close-btn{background:#0000000a;border:1px solid rgba(0,0,0,.1);color:#00000080}html:not(.dark-mode) .tour-close-btn:hover{background:#d4af761a;border-color:#d4af7666;color:#b8935a}html:not(.dark-mode) .tour-prev-btn{background:#0000000a;border:1px solid rgba(0,0,0,.1);color:#0009}html:not(.dark-mode) .tour-prev-btn:hover:not(.disabled){background:#00000014;border-color:#d4af7666;color:#b8935a}html:not(.dark-mode) .tour-progress-current{color:#b8935a}html:not(.dark-mode) .tour-progress-separator{color:#0000004d}html:not(.dark-mode) .tour-progress-total{color:#0006}.driver-popover{background:linear-gradient(135deg,#1a1a1a,#2d2d2d);color:#f0f0f0;border-radius:12px;box-shadow:0 10px 40px #0009,0 0 0 1px #daa5204d,inset 0 1px #ffffff1a;border:1px solid rgba(218,165,32,.4);max-width:420px;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.driver-popover.driver-popover-arrow-side-left .driver-popover-arrow,.driver-popover.driver-popover-arrow-side-right .driver-popover-arrow,.driver-popover.driver-popover-arrow-side-top .driver-popover-arrow,.driver-popover.driver-popover-arrow-side-bottom .driver-popover-arrow{border-color:#daa52066}.driver-popover .driver-popover-arrow-side-left.driver-popover-arrow,.driver-popover .driver-popover-arrow-side-right.driver-popover-arrow,.driver-popover .driver-popover-arrow-side-top.driver-popover-arrow,.driver-popover .driver-popover-arrow-side-bottom.driver-popover-arrow{background:linear-gradient(135deg,#1a1a1a,#2d2d2d)}.driver-popover-title{background:linear-gradient(135deg,#daa52033,#daa5201a);color:#daa520;font-size:18px;font-weight:700;padding:16px 20px;margin:0;border-bottom:1px solid rgba(218,165,32,.3);border-radius:12px 12px 0 0;text-shadow:0 1px 2px rgba(0,0,0,.3)}.driver-popover-description{color:#e0e0e0;font-size:15px;line-height:1.6;padding:18px 20px;margin:0}.driver-popover-footer{background:#0003;padding:14px 20px;border-top:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:space-between;gap:12px;border-radius:0 0 12px 12px}.driver-popover-progress-text{color:#aaa;font-size:13px;font-weight:500}.driver-popover-footer-buttons{display:flex;gap:10px}.driver-popover-btn{padding:14px 28px;border-radius:10px;font-size:16px;font-weight:700;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);border:none;outline:none;text-shadow:0 2px 4px rgba(0,0,0,.3);letter-spacing:.5px;text-transform:none;min-width:120px}.driver-popover-prev-btn{background:#ffffff1f;color:#daa520e6;border:2px solid rgba(218,165,32,.4);box-shadow:0 4px 12px #0003}.driver-popover-prev-btn:hover{background:#fff3;border-color:#daa520b3;transform:translateY(-3px);box-shadow:0 8px 20px #daa5204d;color:#daa520}.driver-popover-prev-btn:active{transform:translateY(-1px);box-shadow:0 4px 12px #daa52033}.driver-popover-next-btn{background:linear-gradient(135deg,#d4af76,#b8935a);color:#fff;border:2px solid rgba(255,255,255,.3);box-shadow:0 6px 20px #d4af7680,0 2px 8px #0000004d,inset 0 1px #ffffff4d;text-shadow:0 2px 4px rgba(0,0,0,.4)}.driver-popover-next-btn:hover{background:linear-gradient(135deg,#e5c896,#d4af76);transform:translateY(-3px) scale(1.02);box-shadow:0 10px 30px #d4af7699,0 4px 12px #0006,inset 0 1px #fff6;border-color:#ffffff80}.driver-popover-next-btn:active{transform:translateY(-1px) scale(1);box-shadow:0 6px 20px #d4af7666,0 2px 8px #0000004d}.driver-popover-close-btn{position:absolute;top:12px;right:12px;width:28px;height:28px;border-radius:50%;background:#ffffff1a;color:#daa520;border:1px solid rgba(218,165,32,.3);font-size:18px;line-height:1;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;padding:0}.driver-popover-close-btn:hover{background:#daa52033;border-color:#daa52080;transform:rotate(90deg) scale(1.1)}.driver-overlay{background:#000000f5!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;z-index:9999999!important}.driver-popover-stage{background:#fff!important;border-radius:12px;box-shadow:0 0 0 5000px #000000f5,0 0 0 8px #d4af76,0 0 80px #d4af76,0 0 140px #d4af76cc,inset 0 0 30px #fff;z-index:10000000!important;pointer-events:none;animation:pulse-glow 2s ease-in-out infinite}@keyframes pulse-glow{0%,to{box-shadow:0 0 0 5000px #000000f5,0 0 0 8px #d4af76,0 0 80px #d4af76,0 0 140px #d4af76cc,inset 0 0 30px #fff}50%{box-shadow:0 0 0 5000px #000000f5,0 0 0 10px #e5c896,0 0 100px #d4af76,0 0 160px #d4af76e6,inset 0 0 40px #fff}}.driver-active-element{outline:none!important;box-shadow:0 0 0 4px #fff,0 0 30px #d4af76!important;z-index:10000001!important;position:relative;background:#fff!important;filter:none!important;opacity:1!important;border-radius:8px}.driver-active-element,.driver-active-element *{filter:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}.dark-mode .driver-active-element{background:#fffffff2!important;color:#1a1a1a!important}.dark-mode .driver-active-element *{color:inherit!important}@keyframes driver-fade-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.driver-popover{animation:driver-fade-in .3s ease}.dark-mode .driver-popover{background:linear-gradient(135deg,#0f0f0f,#1a1a1a);border-color:#daa52080}.dark-mode .driver-popover-description{color:#f0f0f0}@media (max-width: 768px){.driver-popover{max-width:90vw;margin:10px}.driver-popover-title{font-size:17px;padding:16px 18px}.driver-popover-description{font-size:15px;padding:16px 18px}.driver-popover-footer{padding:14px 18px;flex-direction:column;align-items:stretch}.driver-popover-footer-buttons{width:100%;flex-direction:column;gap:12px}.driver-popover-btn{width:100%;justify-content:center;padding:16px 28px;font-size:17px}.driver-popover-progress-text{text-align:center;margin-bottom:12px;font-size:14px}}.driver-popover[data-step-index="0"] .driver-popover-title{background:linear-gradient(135deg,#daa5204d,#daa52026)}.driver-popover:has(.driver-popover-next-btn:only-child) .driver-popover-next-btn{background:linear-gradient(135deg,#4caf50,#45a049)}.driver-popover:has(.driver-popover-next-btn:only-child) .driver-popover-next-btn:hover{background:linear-gradient(135deg,#5bc95e,#4caf50)}:root{--app-bg: #f8f9fc;--app-bg-white: #ffffff;--app-text-primary: #1a202c;--app-text-secondary: #475569;--app-text-tertiary: #64748b;--app-border: #e2e8f0;--app-border-medium: #cbd5e1;--app-card-bg: #ffffff;--app-card-gradient: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);--app-card-shadow: 0 4px 12px rgba(0, 0, 0, .08);--app-accent: #667eea;--app-accent-hover: #5568d3;--app-accent-light: #e0e7ff;--app-hover-bg: #f1f5f9;--logo-filter: brightness(0) saturate(100%);--info-box-bg: linear-gradient(135deg, rgba(102, 126, 234, .08) 0%, rgba(118, 75, 162, .05) 100%);--info-box-border: rgba(102, 126, 234, .2)}.dark-mode{--app-bg: #0f172a;--app-bg-white: #1e293b;--app-text-primary: #f8fafc;--app-text-secondary: #cbd5e1;--app-text-tertiary: #94a3b8;--app-border: #334155;--app-border-medium: #475569;--app-card-bg: #1e293b;--app-card-gradient: linear-gradient(135deg, #1e293b 0%, #334155 100%);--app-card-shadow: 0 4px 16px rgba(0, 0, 0, .5);--app-accent: #818cf8;--app-accent-light: #1e293b;--app-hover-bg: #2d3a4f;--logo-filter: brightness(0) invert(1) drop-shadow(0 0 3px rgba(255, 255, 255, .3));--info-box-bg: linear-gradient(135deg, rgba(102, 126, 234, .15) 0%, rgba(118, 75, 162, .12) 100%);--info-box-border: rgba(102, 126, 234, .35)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--app-bg);min-height:100vh;color:var(--app-text-primary);transition:background-color .3s ease,color .3s ease}.app-container{display:flex;flex-direction:column;min-height:100vh;background:var(--app-bg)}.app-header{background:linear-gradient(135deg,#fff,#f8f9fa);box-shadow:0 4px 20px #00000014,0 0 0 1px #0000000d,inset 0 1px #fffc;z-index:100;position:sticky;top:0;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);isolation:isolate}.dark-mode .app-header{background:linear-gradient(135deg,#0f0f1e,#16213e);box-shadow:0 4px 20px #0009,0 0 0 1px #d4af7659,inset 0 1px #ffffff14}.dark-mode .header-brand{border-bottom:1px solid rgba(212,175,118,.25)}.dark-mode .header-logo-img{filter:brightness(0) invert(1) drop-shadow(0 0 6px rgba(255,255,255,.4)) drop-shadow(0 2px 4px rgba(255,255,255,.2));opacity:1}.dark-mode .header-logo-img:hover{filter:brightness(0) invert(1) drop-shadow(0 0 12px rgba(102,126,234,.9)) drop-shadow(0 0 24px rgba(102,126,234,.6)) drop-shadow(0 0 32px rgba(212,175,118,.4)) drop-shadow(0 4px 8px rgba(212,175,118,.5))}.dark-mode .header-brand h1{background:linear-gradient(135deg,#fff,#d4af76);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 2px 8px rgba(212,175,118,.4))}.dark-mode .main-tabs{background:#0003}.dark-mode .tab-button{color:#ffffffb3}.dark-mode .tab-button:before{background:#ffffff0d}.dark-mode .tab-button:hover{color:#d4af76;background:#d4af761a}.dark-mode .tab-button.active{color:#d4af76;border-bottom-color:#d4af76;background:#d4af7626;box-shadow:0 2px 12px #d4af764d,inset 0 1px #ffffff1a}.dark-mode .tab-badge{background:#667eea4d;color:#ffffffe6;border:1px solid rgba(102,126,234,.4)}.dark-mode .tab-button.active .tab-badge{background:linear-gradient(135deg,#d4af76,#b8935a);color:#0f0f1e;border-color:#d4af7699;box-shadow:0 2px 8px #d4af7666}.header-brand{padding:1.25rem 2rem .75rem;border-bottom:1px solid rgba(0,0,0,.1);display:flex;justify-content:space-between;align-items:center}.header-brand-content{display:flex;align-items:center;gap:1rem;cursor:pointer}.header-logo-img{height:38px;width:38px;object-fit:contain;filter:brightness(0) drop-shadow(0 0 6px rgba(0,0,0,.2)) drop-shadow(0 2px 4px rgba(0,0,0,.1));transition:all .3s cubic-bezier(.4,0,.2,1);opacity:.8;cursor:pointer}.header-logo-img:hover{transform:scale(1.08) rotate(-5deg);filter:brightness(0) drop-shadow(0 0 12px rgba(102,126,234,.6)) drop-shadow(0 0 24px rgba(102,126,234,.4));opacity:1}.header-brand h1{margin:0;font-size:1.75rem;font-weight:800;background:linear-gradient(135deg,#2c3e50,#667eea);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 1px 2px rgba(0,0,0,.1));transition:transform .2s ease}.header-brand h1:hover{transform:scale(1.02)}.header-brand .header-actions{display:flex;gap:.5rem;align-items:center;margin-right:5.5rem}.main-tabs{display:flex;gap:.25rem;padding:0 2rem;background:#00000008}.tab-button{position:relative;padding:1rem 1.5rem;background:none;border:none;border-bottom:3px solid transparent;font-size:1rem;font-weight:600;color:#0009;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;gap:.5rem}.tab-button:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:#667eea0d;opacity:0;transition:opacity .3s ease}.tab-button:hover{color:#667eea;background:#667eea14;transform:translateY(-2px)}.tab-button:hover:before{opacity:1}.tab-button.active{color:#667eea;border-bottom-color:#667eea;background:#667eea1f;box-shadow:0 2px 12px #667eea33,inset 0 1px #667eea1a}.tab-badge{display:inline-flex;align-items:center;justify-content:center;min-width:1.5rem;height:1.5rem;padding:0 .5rem;background:#667eea26;color:#667eea;border-radius:12px;font-size:.75rem;font-weight:700;border:1px solid rgba(102,126,234,.3)}.tab-button.active .tab-badge{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-color:#667eea99;box-shadow:0 2px 8px #667eea4d}.cart-tab.has-items{color:#ff9800}.cart-tab.has-items .cart-badge{background:#ff9800;color:#fff;animation:pulse 2s infinite}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.app-main{flex:1;overflow-y:auto;background:var(--app-bg);position:relative}.app-main:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background-image:radial-gradient(circle at 20% 50%,rgba(102,126,234,.02) 0%,transparent 50%),radial-gradient(circle at 80% 80%,rgba(212,175,118,.02) 0%,transparent 50%);pointer-events:none;z-index:0}.dark-mode .app-main{background:radial-gradient(ellipse at top left,rgba(212,175,118,.08) 0%,transparent 50%),radial-gradient(ellipse at bottom right,rgba(102,126,234,.08) 0%,transparent 50%),linear-gradient(135deg,#0f0f1e,#1a1a2e,#16213e)}.dark-mode .app-main:before{background-image:radial-gradient(circle at 20% 50%,rgba(212,175,118,.02) 0%,transparent 50%),radial-gradient(circle at 80% 80%,rgba(102,126,234,.02) 0%,transparent 50%)}.products-start-view{display:flex;align-items:center;justify-content:center;min-height:70vh;padding:2rem}.start-content{text-align:center;max-width:600px}.start-content h2{font-size:2rem;color:var(--app-text-primary);margin-bottom:1rem}.start-content p{font-size:1.1rem;color:var(--app-text-secondary);margin-bottom:2rem}.quick-actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-bottom:2rem}.btn-large{padding:1.25rem 2.5rem;font-size:1.15rem;border-radius:12px;font-weight:600;cursor:pointer;transition:all .2s;border:none}.btn-primary{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 20px #667eea66}.btn-secondary:hover{background:#667eea;color:#fff}:root:not(.dark-mode) .btn-secondary{background:#f5f5f5;color:#2d3748;border:2px solid #d0d0d0}:root:not(.dark-mode) .btn-secondary:hover{background:#e0e0e0;color:#1a202c;border-color:#a0aec0}.recent-designs-hint{padding:1.5rem;background:var(--app-hover-bg);border-radius:12px;margin-top:2rem}.hint-text{color:var(--app-text-secondary);font-size:1rem}.hint-text strong{color:var(--app-accent)}.cart-view{max-width:900px;margin:0 auto;padding:2rem}.cart-header{margin-bottom:2rem}.cart-header h2{font-size:2rem;color:var(--app-text-primary);margin-bottom:.5rem}.cart-count{color:var(--app-text-secondary);font-size:1.05rem}.empty-cart{text-align:center;padding:4rem 2rem;display:flex;flex-direction:column;align-items:center;justify-content:center}.empty-cart .empty-icon{font-size:4rem;margin-bottom:1rem}.empty-cart h3{font-size:1.5rem;color:var(--app-text-primary);margin-bottom:.5rem}.empty-cart p{color:var(--app-text-secondary);margin-bottom:2rem}.empty-cart .btn-primary{margin:0 auto;display:inline-flex;align-items:center;justify-content:center;min-width:200px}.cart-items{display:flex;flex-direction:column;gap:1rem}.cart-item{display:flex;gap:1.5rem;align-items:center;padding:1.5rem;background:var(--app-card-bg);border-radius:12px;box-shadow:0 2px 8px var(--app-card-shadow)}.item-preview{width:100px;height:100px;border-radius:8px;overflow:hidden;background:var(--app-hover-bg);flex-shrink:0}.item-preview img{width:100%;height:100%;object-fit:cover}.item-info{flex:1}.item-info h4{margin:0 0 .5rem;color:var(--app-text-primary);font-size:1.15rem}.item-details{color:var(--app-text-secondary);font-size:.95rem}.btn-remove{padding:.5rem 1rem;background:#ffebee;color:#e74c3c;border:none;border-radius:6px;cursor:pointer;font-size:1.2rem;font-weight:700;transition:all .2s}.btn-remove:hover{background:#e74c3c;color:#fff}.cart-actions{display:flex;gap:1rem;justify-content:space-between;margin-top:2rem;padding-top:2rem;border-top:2px solid var(--app-border)}.btn-checkout{background:linear-gradient(135deg,#4caf50,#45a049)}.btn-checkout:hover{box-shadow:0 8px 20px #4caf5066}.app-footer{padding:1.5rem 2rem;background:linear-gradient(135deg,#fff,#f8f9fa);border-top:1px solid var(--app-border);box-shadow:0 -2px 10px #0000000d;position:relative;z-index:5}.footer-stats{display:flex;gap:2rem;justify-content:center;font-size:.9rem;color:var(--app-text-secondary);font-weight:500}.footer-stats span{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:#667eea14;border-radius:20px;border:1px solid rgba(102,126,234,.2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:all .3s ease;color:var(--app-text-primary)}.footer-stats span:hover{background:#667eea1f;border-color:#667eea4d;transform:translateY(-2px)}.dark-mode .app-footer{background:linear-gradient(135deg,#1a1a2e,#16213e);border-top:1px solid rgba(212,175,118,.2);box-shadow:0 -2px 10px #0000004d}.dark-mode .footer-stats{color:#d4af76cc}.dark-mode .footer-stats span{background:#d4af761a;border:1px solid rgba(212,175,118,.2);color:#d4af76e6}.dark-mode .footer-stats span:hover{background:#d4af7626;border-color:#d4af764d}@media (max-width: 768px){.header-logo-img{height:35px}.header-brand h1{font-size:1.3rem}.main-tabs{overflow-x:auto;padding:0 1rem}.tab-button{padding:.75rem 1rem;font-size:.9rem;white-space:nowrap}.quick-actions{flex-direction:column}.btn-large{width:100%}.cart-item{flex-direction:column;text-align:center}.cart-actions{flex-direction:column}.footer-stats{flex-direction:column;gap:.75rem;align-items:center}}.btn-block{width:100%}button{font-family:inherit}button:focus{outline:2px solid #667eea;outline-offset:2px}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--app-hover-bg)}::-webkit-scrollbar-thumb{background:var(--app-text-tertiary);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--app-text-secondary)}.header-brand{display:flex;align-items:center;gap:1rem}.btn-back-to-shop{background:#667eea14;color:#667eea;border:2px solid rgba(102,126,234,.3);padding:.5rem 1rem;border-radius:10px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);text-decoration:none;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 2px 8px #00000014;white-space:nowrap}.btn-back-to-shop:hover{transform:translateY(-2px) scale(1.05);box-shadow:0 6px 16px #667eea4d;background:#667eea26;border-color:#667eea80}.btn-back-to-shop:active{transform:translateY(0) scale(1)}.dark-mode .btn-back-to-shop{background:#0000004d;color:#d4af76;border:2px solid rgba(212,175,118,.4);box-shadow:0 2px 8px #0000004d}.dark-mode .btn-back-to-shop:hover{box-shadow:0 6px 16px #d4af7680;background:#d4af7633;border-color:#d4af7699}.btn-help{background:#667eea14;color:#667eea;border:2px solid rgba(102,126,234,.3);padding:.5rem .75rem;border-radius:10px;font-size:1.2rem;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 2px 8px #00000014}.btn-help:hover{transform:translateY(-2px) scale(1.05);box-shadow:0 6px 16px #667eea4d;background:#667eea26;border-color:#667eea80}.btn-help:active{transform:translateY(0) scale(1)}.dark-mode .btn-help{background:#0000004d;color:#d4af76;border:2px solid rgba(212,175,118,.4);box-shadow:0 2px 8px #0000004d}.dark-mode .btn-help:hover{box-shadow:0 6px 16px #d4af7680;background:#d4af7633;border-color:#d4af7699}.btn-admin{background:#667eea14;color:#667eea;border:2px solid rgba(102,126,234,.3);padding:.5rem .75rem;border-radius:10px;font-size:1.2rem;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 2px 8px #00000014}.btn-admin:hover{transform:translateY(-2px) scale(1.05);box-shadow:0 6px 16px #667eea4d;background:#667eea26;border-color:#667eea80}.btn-admin-exit-user-view{background:linear-gradient(135deg,#667eea26,#764ba21a);color:#667eea;border:2px solid rgba(102,126,234,.4);font-weight:600;gap:.5rem;animation:pulse-subtle 2s ease-in-out infinite}.btn-admin-exit-user-view:hover{background:linear-gradient(135deg,#667eea40,#764ba233);border-color:#667eea99;transform:translateY(-2px) scale(1.05);box-shadow:0 8px 20px #667eea66}@keyframes pulse-subtle{0%,to{box-shadow:0 2px 8px #667eea33}50%{box-shadow:0 4px 12px #667eea66}}.dark-mode .btn-admin-exit-user-view{background:linear-gradient(135deg,#818cf833,#8b5cf626);color:#a5b4fc;border-color:#818cf866}.dark-mode .btn-admin-exit-user-view:hover{background:linear-gradient(135deg,#818cf84d,#8b5cf640);border-color:#818cf899;box-shadow:0 8px 20px #818cf866}.btn-admin:active{transform:translateY(0) scale(1)}.dark-mode .btn-admin{background:#0000004d;color:#d4af76;border:2px solid rgba(212,175,118,.4);box-shadow:0 2px 8px #0000004d}.dark-mode .btn-admin:hover{box-shadow:0 6px 16px #d4af7680;background:#d4af7633;border-color:#d4af7699}.btn-shortcuts{background:#667eea14;color:#667eea;border:2px solid rgba(102,126,234,.3);padding:.5rem .75rem;border-radius:10px;font-size:1.2rem;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 2px 8px #00000014}.btn-shortcuts:hover{transform:translateY(-2px) scale(1.05);box-shadow:0 6px 16px #667eea4d;background:#667eea26;border-color:#667eea80}.btn-shortcuts:active{transform:translateY(0) scale(1)}.dark-mode .btn-shortcuts{background:#0000004d;color:#d4af76;border:2px solid rgba(212,175,118,.4);box-shadow:0 2px 8px #0000004d}.dark-mode .btn-shortcuts:hover{box-shadow:0 6px 16px #d4af7680;background:#d4af7633;border-color:#d4af7699}.dark-mode .btn-primary{background:linear-gradient(135deg,#d4af764d,#d4af7633);color:#d4af76;border:2px solid rgba(212,175,118,.5);box-shadow:0 2px 8px #d4af7633}.dark-mode .btn-primary:hover{background:linear-gradient(135deg,#d4af7666,#d4af764d);border-color:#d4af76b3;box-shadow:0 4px 12px #d4af764d;transform:translateY(-2px)}.dark-mode .btn-secondary{background:#1a1a2ecc;color:#d4af76f2;border:2px solid rgba(212,175,118,.4)}.dark-mode .btn-secondary:hover{background:linear-gradient(135deg,#d4af7640,#d4af7626);color:#d4af76;border-color:#d4af7699}.shortcuts-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000d9;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;z-index:10000;padding:2rem;animation:fadeIn .3s ease}.shortcuts-modal{background:#1a1a2e;border-radius:24px;box-shadow:0 30px 90px #0006,0 0 0 1px #d4af7633;max-width:700px;width:90%;max-height:85vh;overflow:hidden;animation:slideUp .4s ease}.shortcuts-header{background:linear-gradient(135deg,#1a1a2e,#0f0f1e);padding:1.5rem 2rem;border-bottom:2px solid rgba(212,175,118,.2);display:flex;justify-content:space-between;align-items:center}.shortcuts-header h2{margin:0;font-size:1.5rem;color:#fff;background:linear-gradient(135deg,#fff,#d4af76);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.btn-close-shortcuts{background:#ffffff1a;border:2px solid rgba(212,175,118,.3);color:#d4af76;width:40px;height:40px;border-radius:50%;font-size:1.5rem;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center}.btn-close-shortcuts:hover{background:#d4af764d;border-color:#d4af76;transform:rotate(90deg)}.shortcuts-content{padding:2rem;max-height:calc(85vh - 80px);overflow-y:auto}.shortcuts-section{margin-bottom:2rem}.shortcuts-section:last-child{margin-bottom:0}.shortcuts-section h3{color:#d4af76;font-size:1.1rem;margin:0 0 1rem;font-weight:600}.shortcut-list{display:flex;flex-direction:column;gap:.75rem}.shortcut-item{display:flex;align-items:center;gap:1rem;padding:.75rem 1rem;background:#ffffff0d;border:1px solid rgba(212,175,118,.2);border-radius:8px;transition:all .2s ease}.shortcut-item:hover{background:#d4af761a;border-color:#d4af7666}.shortcut-item kbd{background:linear-gradient(135deg,#2a2a3e,#1f1f2e);border:2px solid rgba(212,175,118,.3);border-radius:6px;padding:.4rem .8rem;font-family:Segoe UI,sans-serif;font-size:.9rem;font-weight:600;color:#d4af76;box-shadow:0 2px 4px #0000004d;min-width:3rem;text-align:center}.shortcut-item span{flex:1;color:#ffffffe6;font-size:.95rem}.shortcut-coming-soon .shortcut-item{opacity:.6}.shortcut-coming-soon .shortcut-item kbd{border-color:#9696964d;color:#999}.shortcut-coming-soon .shortcut-item span{color:#ffffff80;font-style:italic}.dark-mode .btn-primary{background:linear-gradient(135deg,#d4af76e6,#d4af76b3);color:#1a1a2e;border:2px solid rgba(212,175,118,.4);font-weight:700;box-shadow:0 4px 12px #d4af764d}.dark-mode .btn-primary:hover{background:linear-gradient(135deg,#d4af76,#d4af76cc);border-color:#d4af7699;box-shadow:0 6px 16px #d4af7680;transform:translateY(-2px)}.dark-mode .btn-secondary{background:#d4af761a;color:#d4af76e6;border:2px solid rgba(212,175,118,.3);font-weight:600}.dark-mode .btn-secondary:hover{background:#d4af7633;border-color:#d4af7680;color:#d4af76;box-shadow:0 4px 12px #d4af764d}.shared-project-view{min-height:100vh;background:linear-gradient(135deg,#f5f7fa,#c3cfe2);display:flex;flex-direction:column}.shared-header{background:#fff;box-shadow:0 2px 8px #0000001a;position:sticky;top:0;z-index:100}.shared-header-content{max-width:1200px;margin:0 auto;padding:1rem 2rem;display:flex;justify-content:space-between;align-items:center}.shared-logo{display:flex;align-items:center;gap:1rem}.shared-logo img{height:40px;width:auto}.shared-logo span{font-size:1.1rem;font-weight:600;color:#2c3e50}.btn-header-cta{padding:.75rem 1.5rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:8px;font-weight:600;font-size:.95rem;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 8px #667eea4d}.btn-header-cta:hover{transform:translateY(-2px);box-shadow:0 4px 16px #667eea66}.shared-main{flex:1;padding:3rem 2rem}.shared-container{max-width:1200px;margin:0 auto}.shared-loading{text-align:center;padding:4rem 2rem;background:#fff;border-radius:16px;box-shadow:0 4px 16px #0000001a}.spinner-large{width:60px;height:60px;margin:0 auto 2rem;border:4px solid #f3f3f3;border-top:4px solid #667eea;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.shared-loading h2{font-size:1.5rem;color:#2c3e50;margin:0 0 .5rem}.shared-loading p{color:#666;font-size:1rem}.shared-error{text-align:center;padding:4rem 2rem;background:#fff;border-radius:16px;box-shadow:0 4px 16px #0000001a}.error-icon{font-size:4rem;margin-bottom:1rem}.shared-error h2{font-size:1.75rem;color:#2c3e50;margin:0 0 1rem}.error-message{color:#e74c3c;font-size:1rem;margin-bottom:2rem;font-weight:500}.error-actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}.shared-title-section{text-align:center;margin-bottom:3rem}.shared-title-section h1{font-size:2.5rem;color:#2c3e50;margin:0 0 .5rem;font-weight:700}.shared-subtitle{color:#666;font-size:1rem;margin:0}.view-count{color:#667eea;font-weight:600}.shared-preview-section{margin-bottom:3rem}.shared-preview-card{background:#fff;border-radius:16px;box-shadow:0 4px 16px #0000001a;overflow:hidden}.preview-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem 2rem;border-bottom:2px solid #f0f0f0}.preview-header h2{font-size:1.5rem;color:#2c3e50;margin:0}.preview-badge{padding:.4rem 1rem;background:#e8f4fd;color:#0c5460;border-radius:20px;font-size:.85rem;font-weight:600}.preview-canvas-container{padding:2rem;background:#f8f9fa;min-height:400px;display:flex;align-items:center;justify-content:center;overflow-x:auto}.preview-placeholder{text-align:center;color:#666}.preview-icon{font-size:3rem;margin-bottom:1rem}.preview-placeholder p{font-size:1.1rem;margin:0 0 .5rem;font-weight:600}.preview-placeholder small{font-size:.9rem;color:#999}.project-info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;padding:2rem;border-top:2px solid #f0f0f0}.info-item{display:flex;flex-direction:column;gap:.5rem}.info-label{font-size:.85rem;color:#999;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.info-value{font-size:1.1rem;color:#2c3e50;font-weight:600}.shared-cta-section{margin-bottom:3rem}.cta-card{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:3rem 2rem;border-radius:16px;text-align:center;box-shadow:0 8px 24px #667eea4d}.cta-icon{font-size:3rem;margin-bottom:1rem}.cta-card h3{font-size:2rem;margin:0 0 1rem}.cta-card p{font-size:1.1rem;line-height:1.6;margin:0 0 2rem;opacity:.95;max-width:600px;margin-left:auto;margin-right:auto}.btn-cta-large{padding:1rem 2.5rem;background:#fff;color:#667eea;border:none;border-radius:8px;font-weight:700;font-size:1.1rem;cursor:pointer;transition:all .2s ease;box-shadow:0 4px 16px #0003}.btn-cta-large:hover{transform:translateY(-2px);box-shadow:0 6px 20px #0000004d}.shared-footer-info{background:#fff;padding:2rem;border-radius:12px;margin-bottom:2rem;border-left:4px solid #667eea}.shared-footer-info p{margin:0 0 .75rem;color:#666;line-height:1.6}.shared-footer-info p:last-child{margin-bottom:0}.expiry-info{color:#e67e22;font-weight:600}.shared-footer{background:#2c3e50;color:#fff;padding:2rem 2rem 1.5rem;margin-top:auto}.footer-content{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}.footer-content p{margin:0;color:#fffc;font-size:.9rem}.footer-links{display:flex;gap:1.5rem}.footer-links a{color:#fffc;text-decoration:none;font-size:.9rem;transition:color .2s ease}.footer-links a:hover{color:#fff}.fork-error-banner{display:flex;align-items:center;gap:.75rem;padding:1rem 1.5rem;background:#fff5f5;border:1px solid #fed7d7;border-radius:8px;margin-bottom:2rem;color:#c53030}.fork-error-banner .error-icon{font-size:1.25rem;margin:0}.fork-error-banner .dismiss-btn{margin-left:auto;background:none;border:none;font-size:1.25rem;color:#c53030;cursor:pointer;padding:.25rem .5rem;line-height:1}.fork-error-banner .dismiss-btn:hover{background:#c530301a;border-radius:4px}.preview-badge-interactive{background:#e8f5e9;color:#2e7d32}.cta-card-primary{background:linear-gradient(135deg,#27ae60,#2ecc71);box-shadow:0 8px 24px #27ae604d}.btn-cta-primary{background:#fff;color:#27ae60}.btn-cta-primary:hover{background:#f8f9fa}.btn-cta-primary:disabled{opacity:.7;cursor:not-allowed;transform:none}.cta-hint{font-size:.9rem!important;opacity:.8!important;margin-top:1rem!important;margin-bottom:0!important}.spinner-small{display:inline-block;width:16px;height:16px;border:2px solid rgba(39,174,96,.3);border-top-color:#27ae60;border-radius:50%;animation:spin .8s linear infinite;margin-right:.5rem;vertical-align:middle}.shared-secondary-cta{text-align:center;margin-bottom:2rem}.shared-secondary-cta p{color:#666;margin:0 0 .5rem}.btn-secondary-link{background:none;border:none;color:#667eea;font-weight:600;font-size:1rem;cursor:pointer;padding:.5rem 1rem;transition:all .2s ease}.btn-secondary-link:hover{color:#764ba2;text-decoration:underline}.btn-primary,.btn-secondary{padding:.75rem 2rem;border-radius:8px;font-weight:600;font-size:1rem;cursor:pointer;transition:all .2s ease;text-decoration:none;display:inline-block}.btn-primary{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;box-shadow:0 2px 8px #667eea4d}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 4px 16px #667eea66}.btn-secondary{background:#fff;color:#667eea;border:2px solid #667eea}.btn-secondary:hover{background:#f8f9fa}@media (max-width: 768px){.shared-header-content{padding:1rem;flex-direction:column;gap:1rem}.shared-logo span{font-size:1rem}.btn-header-cta{width:100%}.shared-main{padding:2rem 1rem}.shared-title-section h1{font-size:1.75rem}.preview-header{padding:1rem;flex-direction:column;gap:.75rem;align-items:flex-start}.preview-canvas-container{padding:1rem;min-height:300px}.project-info-grid{grid-template-columns:1fr;padding:1rem}.cta-card{padding:2rem 1rem}.cta-card h3{font-size:1.5rem}.cta-card p{font-size:1rem}.footer-content{flex-direction:column;text-align:center}.footer-links{flex-direction:column;gap:.75rem}.error-actions{flex-direction:column}.btn-primary,.btn-secondary{width:100%}}.shared-marketing-view{min-height:100vh;display:flex;flex-direction:column;background:linear-gradient(135deg,#f8f5f2,#ece7e2);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.shared-marketing-container{max-width:900px;margin:0 auto;padding:0 24px;width:100%}.shared-marketing-header{background:#fff;box-shadow:0 2px 8px #00000014;position:sticky;top:0;z-index:100}.shared-marketing-header-content{max-width:1200px;margin:0 auto;padding:16px 24px;display:flex;justify-content:space-between;align-items:center}.shared-marketing-logo{display:flex;align-items:center;gap:12px}.shared-marketing-logo img{height:40px;width:auto}.shared-marketing-logo span{font-size:1.25rem;font-weight:600;color:#2d3748}.btn-header-cta{background:linear-gradient(135deg,#8b5a2b,sienna);color:#fff;border:none;padding:10px 20px;border-radius:8px;font-weight:600;cursor:pointer;transition:all .2s ease}.btn-header-cta:hover{transform:translateY(-2px);box-shadow:0 4px 12px #8b5a2b4d}.shared-marketing-main{flex:1;padding:48px 0}.shared-marketing-welcome{text-align:center;margin-bottom:48px}.company-greeting{display:inline-block;background:linear-gradient(135deg,#8b5a2b,sienna);color:#fff;padding:8px 20px;border-radius:20px;font-size:.9rem;margin-bottom:16px}.shared-marketing-welcome h1{font-size:2.5rem;font-weight:700;color:#2d3748;margin-bottom:16px;line-height:1.2}.shared-marketing-subtitle{font-size:1.125rem;color:#64748b;max-width:600px;margin:0 auto;line-height:1.6}.shared-marketing-preview-section{margin-bottom:32px}.preview-card{background:#fff;border-radius:16px;box-shadow:0 8px 32px #0000001a;overflow:hidden}.preview-tabs{display:flex;border-bottom:1px solid #e2e8f0}.preview-tab{flex:1;padding:16px;background:none;border:none;font-size:1rem;font-weight:500;color:#64748b;cursor:pointer;transition:all .2s ease;position:relative}.preview-tab:hover{background:#f8fafc}.preview-tab.active{color:#8b5a2b}.preview-tab.active:after{content:"";position:absolute;bottom:-1px;left:0;right:0;height:3px;background:linear-gradient(135deg,#8b5a2b,sienna);border-radius:3px 3px 0 0}.preview-image-container{position:relative;background:#f8f5f2;display:flex;align-items:center;justify-content:center;min-height:400px;padding:32px}.preview-image{max-width:100%;max-height:400px;border-radius:8px;box-shadow:0 4px 16px #00000026}.preview-overlay{position:absolute;top:16px;right:16px}.preview-badge{background:#0009;color:#fff;padding:6px 12px;border-radius:6px;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.preview-info{display:flex;border-top:1px solid #e2e8f0}.preview-info-item{flex:1;padding:20px;display:flex;flex-direction:column;align-items:center;gap:4px;border-right:1px solid #e2e8f0}.preview-info-item:last-child{border-right:none}.info-icon{font-size:1.5rem}.info-label{font-size:.75rem;color:#94a3b8;text-transform:uppercase;letter-spacing:.5px}.info-value{font-size:1rem;font-weight:600;color:#2d3748}.shared-marketing-actions{display:flex;gap:16px;justify-content:center;margin-bottom:48px}.btn-action-primary{background:linear-gradient(135deg,#8b5a2b,sienna);color:#fff;border:none;padding:16px 32px;border-radius:12px;font-size:1.125rem;font-weight:600;cursor:pointer;transition:all .2s ease}.btn-action-primary:hover{transform:translateY(-2px);box-shadow:0 8px 24px #8b5a2b59}.btn-action-secondary{background:#fff;color:#64748b;border:2px solid #e2e8f0;padding:14px 28px;border-radius:12px;font-size:1rem;font-weight:500;cursor:pointer;transition:all .2s ease}.btn-action-secondary:hover{border-color:#8b5a2b;color:#8b5a2b}.shared-marketing-benefits{margin-bottom:48px}.shared-marketing-benefits h3{text-align:center;font-size:1.5rem;font-weight:600;color:#2d3748;margin-bottom:32px}.benefits-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}.benefit-item{background:#fff;padding:24px;border-radius:12px;text-align:center;box-shadow:0 2px 8px #0000000f;transition:all .2s ease}.benefit-item:hover{transform:translateY(-4px);box-shadow:0 8px 24px #0000001a}.benefit-icon{font-size:2rem;display:block;margin-bottom:12px}.benefit-item h4{font-size:1rem;font-weight:600;color:#2d3748;margin-bottom:8px}.benefit-item p{font-size:.875rem;color:#64748b;line-height:1.5}.shared-marketing-cta{margin-bottom:48px}.cta-box{background:linear-gradient(135deg,#2d3748,#1a202c);color:#fff;padding:48px;border-radius:20px;text-align:center}.cta-box h3{font-size:1.75rem;font-weight:700;margin-bottom:16px}.cta-box p{font-size:1.125rem;color:#a0aec0;margin-bottom:24px;max-width:500px;margin-left:auto;margin-right:auto}.btn-cta-large{background:linear-gradient(135deg,#8b5a2b,sienna);color:#fff;border:none;padding:18px 48px;border-radius:12px;font-size:1.25rem;font-weight:700;cursor:pointer;transition:all .2s ease}.btn-cta-large:hover{transform:scale(1.05);box-shadow:0 8px 32px #8b5a2b66}.cta-note{font-size:.875rem!important;color:#718096!important;margin-top:16px!important;margin-bottom:0!important}.shared-marketing-footer-info{text-align:center;color:#94a3b8;font-size:.875rem;margin-bottom:32px}.expiry-info{margin-bottom:8px}.views-info{color:#cbd5e1}.shared-marketing-footer{background:#fff;border-top:1px solid #e2e8f0;padding:24px 0}.footer-content{display:flex;justify-content:space-between;align-items:center;color:#64748b;font-size:.875rem}.footer-links{display:flex;gap:24px}.footer-links a{color:#64748b;text-decoration:none;transition:color .2s ease}.footer-links a:hover{color:#8b5a2b}.shared-marketing-loading{text-align:center;padding:120px 24px}.spinner-large{width:48px;height:48px;border:4px solid #e2e8f0;border-top-color:#8b5a2b;border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 24px}@keyframes spin{to{transform:rotate(360deg)}}.shared-marketing-loading h2{font-size:1.5rem;color:#2d3748;margin-bottom:8px}.shared-marketing-loading p{color:#64748b}.shared-marketing-error{text-align:center;padding:120px 24px}.error-icon{font-size:4rem;margin-bottom:24px}.shared-marketing-error h2{font-size:1.5rem;color:#2d3748;margin-bottom:12px}.error-message{color:#64748b;margin-bottom:32px}.error-actions{display:flex;gap:16px;justify-content:center}.btn-primary{background:linear-gradient(135deg,#8b5a2b,sienna);color:#fff;border:none;padding:12px 24px;border-radius:8px;font-weight:600;cursor:pointer;text-decoration:none;display:inline-block}.btn-secondary{background:#fff;color:#64748b;border:2px solid #e2e8f0;padding:10px 22px;border-radius:8px;font-weight:500;cursor:pointer;text-decoration:none;display:inline-block}@media (max-width: 768px){.shared-marketing-header-content{flex-direction:column;gap:16px}.shared-marketing-welcome h1{font-size:1.75rem}.shared-marketing-subtitle{font-size:1rem}.preview-image-container{min-height:280px;padding:24px}.preview-image{max-height:280px}.preview-info{flex-direction:column}.preview-info-item{border-right:none;border-bottom:1px solid #e2e8f0;flex-direction:row;justify-content:space-between;padding:16px 20px}.preview-info-item:last-child{border-bottom:none}.shared-marketing-actions{flex-direction:column}.benefits-grid{grid-template-columns:1fr}.cta-box{padding:32px 24px}.btn-cta-large{padding:16px 32px;font-size:1.125rem}.footer-content{flex-direction:column;gap:16px;text-align:center}.error-actions{flex-direction:column}}.btn-action-claim{background:linear-gradient(135deg,#059669,#10b981);color:#fff;border:none;padding:16px 32px;border-radius:12px;font-size:1.125rem;font-weight:600;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;gap:8px}.btn-action-claim:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 24px #10b98159}.btn-action-claim:disabled{opacity:.7;cursor:not-allowed}.spinner-small{width:20px;height:20px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}.claim-success-banner{background:linear-gradient(135deg,#d1fae5,#a7f3d0);border:2px solid #10b981;border-radius:16px;padding:24px;margin-bottom:32px;display:flex;gap:20px;align-items:flex-start}.claim-success-icon{font-size:2.5rem;flex-shrink:0}.claim-success-content{flex:1}.claim-success-content h3{font-size:1.25rem;font-weight:700;color:#065f46;margin-bottom:8px}.claim-success-content p{color:#047857;margin-bottom:16px}.claim-success-actions{display:flex;gap:12px;flex-wrap:wrap}.btn-success-primary{background:linear-gradient(135deg,#059669,#10b981);color:#fff;border:none;padding:12px 24px;border-radius:8px;font-weight:600;cursor:pointer;transition:all .2s ease}.btn-success-primary:hover{transform:translateY(-2px);box-shadow:0 4px 12px #10b9814d}.btn-success-secondary{background:#fff;color:#059669;border:2px solid #10b981;padding:10px 22px;border-radius:8px;font-weight:600;cursor:pointer;transition:all .2s ease}.btn-success-secondary:hover{background:#ecfdf5}.claim-error-banner{background:#fef2f2;border:1px solid #f87171;border-radius:12px;padding:16px 20px;margin-bottom:24px;display:flex;align-items:center;gap:12px}.claim-error-icon{font-size:1.25rem}.claim-error-text{flex:1;color:#b91c1c;font-weight:500}.claim-error-close{background:none;border:none;color:#b91c1c;cursor:pointer;padding:4px 8px;font-size:1rem}.login-hint-box{background:#eff6ff;border:1px solid #93c5fd;border-radius:12px;padding:16px 20px;margin-bottom:32px;text-align:center}.login-hint-box p{color:#1e40af;margin:0}.login-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}.login-modal{background:#fff;border-radius:20px;width:100%;max-width:420px;position:relative;animation:modalSlideIn .3s ease}@keyframes modalSlideIn{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.login-modal-close{position:absolute;top:16px;right:16px;background:none;border:none;font-size:1.25rem;color:#94a3b8;cursor:pointer;padding:4px 8px;transition:color .2s ease}.login-modal-close:hover{color:#64748b}.login-modal-content{padding:40px 32px;text-align:center}.login-modal-icon{font-size:3rem;margin-bottom:16px}.login-modal-content h2{font-size:1.5rem;font-weight:700;color:#2d3748;margin-bottom:12px}.login-modal-content>p{color:#64748b;margin-bottom:24px;line-height:1.5}.login-modal-actions{display:flex;flex-direction:column;gap:16px}.btn-login-google{display:flex;align-items:center;justify-content:center;gap:12px;background:#fff;color:#2d3748;border:2px solid #e2e8f0;padding:14px 24px;border-radius:12px;font-size:1rem;font-weight:600;cursor:pointer;text-decoration:none;transition:all .2s ease}.btn-login-google:hover{border-color:#4285f4;background:#f8fafc}.google-icon{font-weight:700;font-size:1.25rem;background:linear-gradient(135deg,#4285f4,#34a853,#fbbc05,#ea4335);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.login-divider{display:flex;align-items:center;gap:16px;color:#94a3b8;font-size:.875rem}.login-divider:before,.login-divider:after{content:"";flex:1;height:1px;background:#e2e8f0}.btn-login-email{display:block;background:linear-gradient(135deg,#8b5a2b,sienna);color:#fff;padding:14px 24px;border-radius:12px;font-size:1rem;font-weight:600;cursor:pointer;text-decoration:none;transition:all .2s ease}.btn-login-email:hover{transform:translateY(-2px);box-shadow:0 4px 12px #8b5a2b4d}.login-modal-note{font-size:.875rem!important;color:#94a3b8!important;margin-top:20px!important;margin-bottom:0!important}@media (max-width: 768px){.claim-success-banner{flex-direction:column;text-align:center;align-items:center}.claim-success-actions{justify-content:center;width:100%}.btn-success-primary,.btn-success-secondary{width:100%}.login-modal{margin:20px}.login-modal-content{padding:32px 24px}}.webhook-test-page{min-height:100vh;background:#f5f5f5;padding:20px}.test-header{text-align:center;margin-bottom:30px;padding:20px;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:12px;color:#fff}.test-header h1{margin:0 0 10px;font-size:28px}.test-header p{margin:0;opacity:.9}.test-layout{display:grid;grid-template-columns:350px 1fr;gap:20px;max-width:1400px;margin:0 auto}.test-input-panel{background:#fff;border-radius:12px;padding:20px;box-shadow:0 2px 8px #0000001a;height:fit-content;position:sticky;top:20px}.input-section{margin-bottom:25px;padding-bottom:20px;border-bottom:1px solid #eee}.input-section:last-child{border-bottom:none}.input-section h2{font-size:16px;color:#333;margin:0 0 15px}.input-group{margin-bottom:15px}.input-group label{display:block;font-size:13px;color:#666;margin-bottom:5px}.input-group input[type=url],.input-group input[type=text],.input-group select{width:100%;padding:10px 12px;border:1px solid #ddd;border-radius:6px;font-size:14px;box-sizing:border-box}.input-group input[type=url]:focus,.input-group input[type=text]:focus,.input-group select:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.input-group input[type=file]{width:100%;padding:8px;border:2px dashed #ddd;border-radius:6px;cursor:pointer}.input-group input[type=range]{width:100%;height:8px;border-radius:4px;-webkit-appearance:none;background:#ddd}.input-group input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:#667eea;cursor:pointer}.input-divider{text-align:center;color:#999;font-size:12px;margin:15px 0}.logo-preview-small{margin-top:10px;padding:10px;background:#f9f9f9;border-radius:6px;text-align:center}.logo-preview-small img{max-width:100%;max-height:100px;border-radius:4px}.action-buttons h2{margin-bottom:15px}.step-buttons{display:flex;flex-direction:column;gap:8px;margin-bottom:15px}.step-btn{padding:10px 15px;background:#f0f0f0;border:1px solid #ddd;border-radius:6px;font-size:13px;cursor:pointer;transition:all .2s;text-align:left}.step-btn:hover:not(:disabled){background:#e0e0e0;border-color:#ccc}.step-btn:disabled{opacity:.5;cursor:not-allowed}.full-pipeline-btn{width:100%;padding:14px 20px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:8px;font-size:15px;font-weight:600;cursor:pointer;transition:all .2s;margin-bottom:10px}.full-pipeline-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 15px #667eea66}.full-pipeline-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.reset-btn{width:100%;padding:10px;background:transparent;border:1px solid #ddd;border-radius:6px;color:#666;cursor:pointer}.reset-btn:hover{background:#f5f5f5}.error-message{margin-top:15px;padding:12px;background:#fff0f0;border:1px solid #ffccc7;border-radius:6px;color:#cf1322;font-size:13px}.loading-indicator{margin-top:15px;padding:12px;background:#e6f7ff;border:1px solid #91d5ff;border-radius:6px;color:#1890ff;font-size:13px;text-align:center}.test-results-panel{display:flex;flex-direction:column;gap:20px}.result-card{background:#fff;border-radius:12px;padding:20px;box-shadow:0 2px 8px #0000001a}.result-card h3{margin:0 0 15px;padding-bottom:10px;border-bottom:2px solid #667eea;color:#333;font-size:16px}.result-content{display:flex;gap:20px;flex-wrap:wrap}.result-info{flex:1;min-width:200px}.result-info p{margin:8px 0;font-size:13px;color:#555}.result-info strong{color:#333}.result-info hr{margin:15px 0;border:none;border-top:1px dashed #ddd}.result-info ul{margin:5px 0;padding-left:20px}.result-info ul li{font-size:13px;color:#555;margin:3px 0}.result-image{display:flex;flex-direction:column;align-items:center;gap:8px}.result-image img{max-width:200px;max-height:200px;border:1px solid #ddd;border-radius:8px;background:#f9f9f9}.result-image.large img{max-width:350px;max-height:350px}.result-image span{font-size:12px;color:#888}.result-images-compare{display:flex;gap:20px;flex-wrap:wrap}.result-card.full-result{border:2px solid #667eea}.pipeline-steps{display:flex;gap:10px;margin-bottom:20px;flex-wrap:wrap}.pipeline-step{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#f5f5f5;border-radius:6px;font-size:13px}.pipeline-step.success{background:#f6ffed;border:1px solid #b7eb8f}.pipeline-step.failed{background:#fff1f0;border:1px solid #ffa39e}.pipeline-step .step-number{width:22px;height:22px;display:flex;align-items:center;justify-content:center;background:#667eea;color:#fff;border-radius:50%;font-size:12px;font-weight:700}.pipeline-step .step-status{font-weight:700}.pipeline-step.success .step-status{color:#52c41a}.pipeline-step.failed .step-status{color:#f5222d}.final-previews{margin-top:20px;padding-top:20px;border-top:1px solid #eee}.final-previews h4{margin:0 0 15px;color:#333;font-size:14px}.optimized-logo{margin-top:20px}.optimized-logo h4{margin:0 0 10px;color:#333;font-size:14px}.optimized-logo img{max-width:150px;max-height:150px;border:1px solid #ddd;border-radius:6px}.test-note{margin-top:20px;padding:12px;background:#fffbe6;border:1px solid #ffe58f;border-radius:6px;font-size:13px;color:#614700}.empty-state{background:#fff;border-radius:12px;padding:60px 40px;text-align:center;box-shadow:0 2px 8px #0000001a}.empty-state h3{margin:0 0 15px;color:#333}.empty-state p{margin:8px 0;color:#888;font-size:14px}@media (max-width: 900px){.test-layout{grid-template-columns:1fr}.test-input-panel{position:static}.result-content{flex-direction:column}.result-images-compare{justify-content:center}}:root{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;line-height:1.5;font-weight:400;color-scheme:light;--global-bg: #ffffff;--global-bg-alt: #f8f9fa;--global-text: #1a1a1a;--global-text-secondary: #666666;--global-text-tertiary: #999999;--global-border: #e0e0e0;--global-shadow: rgba(0, 0, 0, .1);color:var(--global-text);background-color:var(--global-bg);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}.dark-mode{color-scheme:dark;--global-bg: #1a1a1a;--global-bg-alt: #2a2a2a;--global-text: #e0e0e0;--global-text-secondary: #b0b0b0;--global-text-tertiary: #808080;--global-border: #3a3a3a;--global-shadow: rgba(0, 0, 0, .3)}.dark-mode body{background-color:var(--global-bg);color:var(--global-text)}*{margin:0;padding:0;box-sizing:border-box}body{margin:0;display:flex;min-width:320px;min-height:100vh}#root{width:100%}h1,h2,h3,h4,h5,h6{font-weight:600;line-height:1.2}a{color:#3498db;text-decoration:none}a:hover{text-decoration:underline}button{cursor:pointer;font-family:inherit}button:disabled{cursor:not-allowed;opacity:.6}html,body,#root,.app{color-scheme:light!important;background:#fff!important;color:#212529!important}@media (prefers-color-scheme: dark){html,body,#root,.app,*{color-scheme:light!important}}html.dark-mode,body.dark-mode,.dark-mode,html.p-theme-dark,body.p-theme-dark{color-scheme:light!important}