.visualizer-page{flex:1;display:flex;flex-direction:column;background:#f0f3f8;color:#1a1c1f}.visualizer-hero{background:#0a0f1e;padding:32px 32px 28px;position:relative;overflow:hidden;isolation:isolate}.visualizer-hero:after,.visualizer-hero:before{display:none}.visualizer-hero-aurora{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}.visualizer-hero-aurora span{position:absolute;border-radius:50%;filter:blur(60px) saturate(1.4);opacity:.75}.vha-1{width:45vw;height:45vw;background:rgba(30,120,255,1);top:-20%;left:-10%;animation:vha-float-1 7s ease-in-out infinite}.vha-2{width:35vw;height:35vw;background:rgba(180,0,255,1);top:10%;right:-5%;animation:vha-float-2 6s ease-in-out infinite}.vha-3{width:30vw;height:30vw;background:rgba(0,230,130,1);bottom:-20%;left:15%;animation:vha-float-3 9s ease-in-out infinite}.vha-4{width:28vw;height:28vw;background:rgba(255,40,40,1);top:-15%;right:20%;animation:vha-float-4 7s ease-in-out infinite reverse}.vha-5{width:32vw;height:32vw;background:rgba(255,150,0,1);bottom:-10%;right:5%;animation:vha-float-5 10s ease-in-out infinite}.vha-6{width:25vw;height:25vw;background:rgba(0,210,255,1);top:30%;left:35%;animation:vha-float-6 5s ease-in-out infinite reverse}.vha-7{width:22vw;height:22vw;background:rgba(60,255,60,1);top:50%;left:-5%;animation:vha-float-7 11s ease-in-out infinite}.vha-8{width:26vw;height:26vw;background:rgba(255,0,180,1);bottom:0;right:35%;animation:vha-float-8 8s ease-in-out infinite reverse}.vha-9{width:30vw;height:30vw;background:rgba(255,220,0,1);top:20%;left:55%;animation:vha-float-9 6s ease-in-out infinite}.vha-10{width:28vw;height:28vw;background:rgba(40,0,255,1);bottom:10%;left:40%;animation:vha-float-10 9s ease-in-out infinite reverse}.vha-11{width:24vw;height:24vw;background:rgba(150,255,0,1);top:-10%;left:60%;animation:vha-float-11 7s ease-in-out infinite}.vha-12{width:26vw;height:26vw;background:rgba(255,60,100,1);bottom:-15%;left:70%;animation:vha-float-12 8s ease-in-out infinite reverse}.vha-13{width:29vw;height:29vw;background:rgba(0,240,220,1);top:40%;right:30%;animation:vha-float-13 6s ease-in-out infinite}.vha-14{width:27vw;height:27vw;background:rgba(255,0,200,1);top:-5%;left:30%;animation:vha-float-14 9s ease-in-out infinite reverse}.vha-15{width:23vw;height:23vw;background:rgba(255,120,0,1);bottom:5%;left:20%;animation:vha-float-15 6s ease-in-out infinite}.vha-16{width:25vw;height:25vw;background:rgba(120,0,255,1);top:60%;right:10%;animation:vha-float-16 8s ease-in-out infinite reverse}@keyframes vha-float-9{0%,to{transform:translate(0) scale(1)}35%{transform:translate(-9vw,5vh) scale(1.12)}70%{transform:translate(5vw,-7vh) scale(.9)}}@keyframes vha-float-10{0%,to{transform:translate(0) scale(1)}40%{transform:translate(7vw,-6vh) scale(1.08)}75%{transform:translate(-5vw,8vh) scale(.93)}}@keyframes vha-float-11{0%,to{transform:translate(0) scale(1)}30%{transform:translate(-6vw,9vh) scale(1.15)}65%{transform:translate(8vw,3vh) scale(.88)}}@keyframes vha-float-12{0%,to{transform:translate(0) scale(1)}45%{transform:translate(6vw,-5vh) scale(1.1)}80%{transform:translate(-7vw,6vh) scale(.92)}}@keyframes vha-float-13{0%,to{transform:translate(0) scale(1)}30%{transform:translate(8vw,6vh) scale(1.13)}65%{transform:translate(-5vw,-8vh) scale(.9)}}@keyframes vha-float-14{0%,to{transform:translate(0) scale(1)}40%{transform:translate(-7vw,7vh) scale(1.1)}70%{transform:translate(9vw,-4vh) scale(.87)}}@keyframes vha-float-15{0%,to{transform:translate(0) scale(1)}35%{transform:translate(5vw,-9vh) scale(1.14)}70%{transform:translate(-8vw,5vh) scale(.91)}}@keyframes vha-float-16{0%,to{transform:translate(0) scale(1)}45%{transform:translate(-6vw,-6vh) scale(1.12)}80%{transform:translate(7vw,8vh) scale(.89)}}@keyframes vha-float-1{0%,to{transform:translate(0) scale(1)}30%{transform:translate(8vw,4vh) scale(1.1)}60%{transform:translate(-4vw,8vh) scale(.9)}}@keyframes vha-float-2{0%,to{transform:translate(0) scale(1)}40%{transform:translate(-10vw,5vh) scale(1.15)}70%{transform:translate(5vw,-6vh) scale(.92)}}@keyframes vha-float-3{0%,to{transform:translate(0) scale(1)}25%{transform:translate(6vw,-7vh) scale(1.08)}55%{transform:translate(-8vw,-3vh) scale(.95)}}@keyframes vha-float-4{0%,to{transform:translate(0) scale(1)}35%{transform:translate(-6vw,8vh) scale(1.12)}65%{transform:translate(9vw,3vh) scale(.88)}}@keyframes vha-float-5{0%,to{transform:translate(0) scale(1)}40%{transform:translate(-7vw,-6vh) scale(1.1)}70%{transform:translate(4vw,5vh) scale(.9)}}@keyframes vha-float-6{0%,to{transform:translate(0) scale(1)}30%{transform:translate(5vw,6vh) scale(1.2)}60%{transform:translate(-6vw,-4vh) scale(.85)}}@keyframes vha-float-7{0%,to{transform:translate(0) scale(1)}50%{transform:translate(10vw,-5vh) scale(1.15)}}@keyframes vha-float-8{0%,to{transform:translate(0) scale(1)}45%{transform:translate(-8vw,4vh) scale(1.1)}80%{transform:translate(5vw,-8vh) scale(.92)}}.visualizer-hero-inner{position:relative;z-index:1;max-width:720px;margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center}.visualizer-hero-badge{display:inline-flex;align-items:center;gap:7px;padding:5px 13px 5px 10px;background:rgba(74,144,226,.18);border:1px solid rgba(74,144,226,.35);border-radius:999px;font-size:12px;font-weight:600;color:#7dc0ff;letter-spacing:.04em;text-transform:uppercase;margin-bottom:16px}.visualizer-hero-badge-dot{width:6px;height:6px;border-radius:50%;background:#4a90e2;box-shadow:0 0 6px rgba(74,144,226,.9);animation:visualizer-pulse 2s ease-in-out infinite}@keyframes visualizer-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(.8)}}.visualizer-page-header{padding:24px 28px 8px}.visualizer-slim-header{display:flex;align-items:center;gap:12px;padding:10px 24px;background:#fff;border-bottom:1px solid #e5e7eb}.visualizer-slim-title{font-size:16px;font-weight:700;color:#0d1121;margin:0;white-space:nowrap}.visualizer-slim-tagline{font-size:13px;color:#6b7280;margin:0}.visualizer-page-title{font-size:26px;font-weight:700;margin:0;letter-spacing:-.02em;color:#0d1117;line-height:1.15}.visualizer-page-tagline{margin:6px 0 0;color:#4a5568;font-size:15px;line-height:1.5}.visualizer-hero .visualizer-page-title{font-size:32px;font-weight:800;letter-spacing:-.02em;color:#ffffff;text-shadow:0 2px 16px rgba(0,0,0,.5),0 1px 4px rgba(0,0,0,.4)}.visualizer-hero .visualizer-page-tagline{margin-top:10px;color:#ffffff;font-size:16px;text-shadow:0 1px 8px rgba(0,0,0,.45)}.visualizer-feature-chip{text-shadow:0 1px 4px rgba(0,0,0,.3);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22)}.visualizer-hero-features{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}.visualizer-feature-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:999px;font-size:13px;font-weight:500;color:#ffffff}.visualizer-how-it-works{display:flex;align-items:center;justify-content:center;gap:0;padding:20px 32px;background:#ffffff;border-top:1px solid #e0e6ed}.visualizer-how-step{display:flex;align-items:center;gap:10px;padding:0 24px}.visualizer-how-number{font-size:22px;font-weight:800;color:#d0dae8;letter-spacing:-.02em;line-height:1}.visualizer-how-label{font-size:13px;font-weight:500;color:#3d4f63;line-height:1.3;max-width:120px}.visualizer-how-divider{width:40px;height:1px;background:linear-gradient(90deg,#c5d3e0,#a0b4c8,#c5d3e0);flex-shrink:0}.visualizer-shell{padding:12px 24px 24px;gap:12px;min-height:0}.visualizer-shell,.visualizer-uploader{flex:1;display:flex;flex-direction:column}.visualizer-uploader{min-height:60vh;align-items:center;justify-content:center;gap:16px;padding:24px}.visualizer-uploader-dropzone{width:min(620px,100%);border:2px dashed #8cb8e8;background:linear-gradient(145deg,#f4f8ff,#ffffff 70%);border-radius:24px;padding:64px 48px;cursor:pointer;transition:border-color .15s ease,background .15s ease,transform .15s ease,box-shadow .15s ease;color:#1a1c1f;box-shadow:0 4px 20px rgba(74,144,226,.1),0 1px 4px rgba(0,0,0,.06)}.visualizer-uploader-dropzone:hover{border-color:#4a90e2;background:linear-gradient(145deg,#e8f2ff,#f8fbff 70%);transform:translateY(-2px);box-shadow:0 8px 28px rgba(74,144,226,.18),0 2px 8px rgba(0,0,0,.08)}.visualizer-uploader-dropzone.is-dragging{border-color:#1a73e8;background:linear-gradient(145deg,#ddeeff,#eef6ff 70%);transform:translateY(-3px);box-shadow:0 12px 36px rgba(26,115,232,.22)}.visualizer-uploader-inner{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}.visualizer-uploader-icon{color:#1a73e8;filter:drop-shadow(0 3px 8px rgba(26,115,232,.35))}.visualizer-uploader-icon svg{width:clamp(36px,8vw,56px);height:clamp(36px,8vw,56px)}.visualizer-uploader-title{font-size:24px;font-weight:700;color:#0d1117;letter-spacing:-.01em}.visualizer-uploader-subtitle{color:#3d4f63;font-size:16px;max-width:380px}.visualizer-uploader-hint{color:#7a8899;font-size:13px;padding:5px 14px;background:#eef2f7;border-radius:999px}.visualizer-uploader-dropzone.is-loading{border-color:#4a90e2;background:linear-gradient(145deg,#e8f2ff,#f5f9ff 70%);cursor:default;box-shadow:0 8px 32px rgba(74,144,226,.2)}.visualizer-upload-spinner{width:52px;height:52px;border-radius:50%;border:3px solid rgba(74,144,226,.2);border-top-color:#1a73e8;animation:visualizer-spin .8s linear infinite}.visualizer-upload-progress-dots{display:flex;gap:6px;margin-top:4px}.visualizer-upload-progress-dots span{width:7px;height:7px;border-radius:50%;background:#4a90e2;animation:visualizer-dot-bounce 1.4s ease-in-out infinite}.visualizer-upload-progress-dots span:nth-child(2){animation-delay:.2s}.visualizer-upload-progress-dots span:nth-child(3){animation-delay:.4s}@keyframes visualizer-dot-bounce{0%,80%,to{transform:scale(.6);opacity:.4}40%{transform:scale(1);opacity:1}}.visualizer-hidden-input{display:none}.visualizer-warning-inline{padding:10px 14px;background:#fff7e0;border:1px solid #f0c14b;border-radius:8px;color:#6a4a00;font-size:13px;max-width:560px;text-align:center}.visualizer-error-inline{padding:10px 14px;background:#fdecec;border:1px solid #e0a4a4;border-radius:8px;color:#8a2020;font-size:13px}.visualizer-loading{flex:1;display:flex;align-items:center;justify-content:center;min-height:60vh}.visualizer-loading-inner{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;padding:32px}.visualizer-loading-title{font-size:16px;font-weight:500;color:#1a1c1f}.visualizer-loading-hint{color:#5a6470;font-size:13px}.visualizer-spinner{width:42px;height:42px;border-radius:50%;border:3px solid #d6dbe1;border-top-color:#4a90e2;animation:visualizer-spin .9s linear infinite}@keyframes visualizer-spin{to{transform:rotate(1turn)}}.visualizer-progress{width:260px;height:6px;background:#dfe4ea;border-radius:999px;overflow:hidden}.visualizer-progress-bar{height:100%;background:#4a90e2;transition:width .12s ease}.visualizer-warning{font-size:12px;color:#705400;background:#fff7e0;padding:6px 10px;border-radius:6px}.vtb-bar{display:flex;align-items:center;gap:10px;padding:10px 14px;background:#ffffff;border-radius:16px;box-shadow:0 4px 20px rgba(15,23,42,.08),0 0 0 1px rgba(15,23,42,.05);flex-wrap:wrap}.vtb-sep{display:none}.vtb-spacer{flex:1}.vtb-group{display:flex;align-items:center;gap:2px;padding:4px;background:#f1f5f9;border-radius:14px}.vtb-btn{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:10px;padding:9px 14px;background:transparent;color:#334155;font-size:14px;font-weight:600;cursor:pointer;line-height:1;transition:background .12s ease,color .12s ease,box-shadow .12s ease,transform 80ms ease;white-space:nowrap}.vtb-btn svg{flex-shrink:0}.vtb-btn:active:not(:disabled){transform:scale(.96)}.vtb-btn:disabled{opacity:.35;cursor:not-allowed}.vtb-btn:focus-visible{outline:2px solid #2563eb;outline-offset:2px}.vtb-btn-icon,.vtb-btn-neutral{background:transparent;color:#334155}.vtb-btn-icon{padding:9px 10px}.vtb-btn-icon:hover:not(:disabled),.vtb-btn-neutral:hover:not(:disabled){background:#ffffff;color:#0f172a;box-shadow:0 1px 3px rgba(15,23,42,.14)}.vtb-btn-active{background:#2563eb;color:#ffffff;box-shadow:0 2px 8px rgba(37,99,235,.35)}.vtb-btn-active:hover:not(:disabled){background:#1d4ed8}.vtb-btn-danger{background:transparent;color:#b91c1c}.vtb-btn-danger:hover:not(:disabled){background:#ffffff;color:#991b1b;box-shadow:0 1px 3px rgba(185,28,28,.2)}.vtb-btn-primary{background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#ffffff;padding:11px 22px;border-radius:12px;box-shadow:0 4px 14px rgba(37,99,235,.35)}.vtb-btn-primary:hover:not(:disabled){background:linear-gradient(135deg,#1d4ed8,#1e40af);box-shadow:0 6px 18px rgba(37,99,235,.45)}.vtb-btn-primary:disabled{background:#93c5fd;box-shadow:none;opacity:1;cursor:not-allowed}.vtb-btn-layers{position:relative;background:#f1f5f9;color:#334155;padding:9px 12px;border-radius:12px}.vtb-btn-layers:hover:not(:disabled){background:#e2e8f0;color:#0f172a}.vtb-layers-badge{position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;padding:0 4px;background:#2563eb;color:#fff;font-size:10px;font-weight:700;line-height:17px;text-align:center;border-radius:9px;pointer-events:none}.vtb-btn-eraser-active{background:#dc2626;color:#ffffff;box-shadow:0 2px 8px rgba(220,38,38,.35)}.vtb-btn-eraser-active:hover:not(:disabled){background:#b91c1c}.vtb-brush-size{display:flex;align-items:center;gap:6px;padding:0 4px}.vtb-slider{width:88px;height:4px;accent-color:#1d4ed8;cursor:pointer}.vtb-brush-px{font-size:12px;color:#6b7280;min-width:26px;text-align:right}.vtb-shape-toggle{display:flex;align-items:center;gap:3px}.vtb-shape-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:1.5px solid #d1d5db;background:#f4f6f9;color:#6b7280;cursor:pointer;transition:background .12s,color .12s,border-color .12s}.vtb-shape-btn:first-child{border-radius:50%}.vtb-shape-btn:last-child{border-radius:3px}.vtb-shape-btn:hover{background:#eff6ff;border-color:#93c5fd;color:#1d4ed8}.vtb-shape-btn.is-active{background:#eff6ff;border-color:#1d4ed8;color:#1d4ed8}.visualizer-button{display:inline-flex;align-items:center;gap:6px;border-radius:8px;border:1px solid transparent;padding:8px 14px;font-size:14px;font-weight:500;cursor:pointer;transition:background-color .12s ease,border-color .12s ease,color .12s ease;background:#ffffff;color:#1a1c1f;line-height:1}.visualizer-button:disabled{opacity:.5;cursor:not-allowed}.visualizer-button-primary{background:#1a73e8;color:#fff;border-color:#1a73e8}.visualizer-button-primary:hover:not(:disabled){background:#1665cc;border-color:#1665cc}.visualizer-button-ghost{background:transparent;border-color:#d6dbe1;color:#1a1c1f}.visualizer-button-ghost:hover:not(:disabled){background:#f2f4f7;border-color:#c0c7ce}.visualizer-icon-button{background:transparent;border:1px solid transparent;padding:4px 8px;border-radius:6px;cursor:pointer;color:#4a5461;font-size:14px}.visualizer-icon-button:hover{background:#f2f4f7;color:#1a1c1f}.visualizer-icon-button.is-danger:hover{background:#fdecec;color:#8a2020}.visualizer-body{display:grid;grid-template-columns:1fr 540px;grid-template-rows:1fr;gap:12px;height:calc(100dvh - 200px);min-height:400px}.visualizer-canvas-wrap{display:flex;flex-direction:column;gap:8px;min-height:0}.visualizer-canvas-stage{flex:1;position:relative;background:#ffffff;border:1px solid #e2e6ec;border-radius:12px;overflow:hidden;min-height:320px}.visualizer-zoom-controls{position:absolute;bottom:12px;right:12px;display:flex;align-items:center;gap:2px;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border:1px solid #e2e6ec;border-radius:10px;padding:4px 6px;box-shadow:0 2px 8px rgba(0,0,0,.1);z-index:20}.visualizer-zoom-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;background:transparent;border-radius:6px;font-size:16px;font-weight:600;color:#374151;cursor:pointer;line-height:1;transition:background .1s}.visualizer-zoom-btn:hover{background:#f1f3f6}.visualizer-zoom-fit{font-size:11px;font-weight:600;width:auto;padding:0 6px;color:#6b7280}.visualizer-zoom-level{font-size:12px;font-weight:600;color:#374151;min-width:38px;text-align:center}.visualizer-canvas-inner,.visualizer-canvas-inner canvas,.visualizer-canvas-stage.is-tool{touch-action:none}.visualizer-canvas-inner{position:absolute;touch-action:none;user-select:none}.visualizer-canvas-inner.is-busy{filter:brightness(.9) saturate(.9)}.visualizer-canvas-image,.visualizer-canvas-overlay{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}.visualizer-canvas-overlay{mix-blend-mode:normal;opacity:.85}.visualizer-prompt-dot{position:absolute;width:20px;height:20px;border-radius:999px;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;color:#ffffff;font-size:15px;font-weight:700;pointer-events:none;border:2px solid #ffffff;box-shadow:0 1px 4px rgba(0,0,0,.4)}.visualizer-prompt-dot.is-include{background:#1a73e8}.visualizer-prompt-dot.is-exclude{background:#d63b3b}.visualizer-instructions{font-size:13px;color:#4a5461;padding:6px 4px}.visualizer-instructions strong{color:#1a1c1f}.visualizer-brush-cursor{position:absolute;border:1.5px solid rgba(255,255,255,.9);box-shadow:0 0 0 1px rgba(0,0,0,.55);pointer-events:none;z-index:10}.visualizer-brush-cursor--circle{border-radius:50%!important}.visualizer-brush-cursor--square{border-radius:3px!important}.visualizer-brush-cursor.is-eraser{border-color:rgba(255,90,70,.95);box-shadow:0 0 0 1px rgba(160,30,10,.5)}.visualizer-brush-controls{display:flex;align-items:center;gap:8px;padding:6px 4px;flex-wrap:wrap}.visualizer-brush-label{font-size:13px;color:#4a5461}.visualizer-brush-size{font-size:13px;color:#1a1c1f;min-width:32px}.visualizer-brush-slider{width:100px;accent-color:#1a73e8;cursor:pointer}.visualizer-mode-bar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:8px 12px;background:#ffffff;border:1px solid #e0e5eb;border-radius:10px}.visualizer-mode-toggle{display:inline-flex;border:1px solid #d6dbe1;border-radius:8px;overflow:hidden}.visualizer-mode-button{padding:8px 14px;background:#ffffff;cursor:pointer;font-size:13px;color:#1a1c1f;border:none;border-right:1px solid #d6dbe1}.visualizer-mode-button:last-child{border-right:none}.visualizer-mode-button.is-active{background:#1a73e8;color:#ffffff}.visualizer-mode-actions{display:flex;gap:6px;align-items:center;margin-left:auto}.visualizer-sidebar{display:flex;flex-direction:column;gap:8px;min-height:0;overflow:hidden}.visualizer-surfaces-toggle{display:flex;align-items:center;gap:8px;padding:10px 14px;background:#fff;border:1px solid #e0e5eb;border-radius:12px;font-size:13px;font-weight:600;color:#374151;cursor:pointer;flex-shrink:0;transition:background .12s,border-color .12s}.visualizer-surfaces-toggle:hover{background:#f4f6f9;border-color:#d1d5db}.visualizer-surfaces-badge{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:#1d4ed8;color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}.visualizer-drawer-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:40}.visualizer-drawer{position:fixed;top:0;right:0;bottom:0;width:320px;background:#fff;box-shadow:-4px 0 24px rgba(0,0,0,.15);z-index:50;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .26s cubic-bezier(.4,0,.2,1)}.visualizer-drawer.is-open{transform:translateX(0)}.visualizer-drawer-header{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid #e5e7eb;flex-shrink:0}.visualizer-drawer-title{font-size:15px;font-weight:700;color:#0d1121}.visualizer-drawer-close{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:none;background:#f4f6f9;border-radius:8px;color:#374151;cursor:pointer;transition:background .12s}.visualizer-drawer-close:hover{background:#e5e7eb}.visualizer-drawer-body{flex:1;overflow-y:auto;padding:12px}.visualizer-panel-title{font-size:13px;font-weight:600;text-transform:uppercase;color:#4a5461;letter-spacing:.04em}.visualizer-region-list{background:#ffffff;border:1px solid #e0e5eb;border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:8px}.visualizer-region-list ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:4px}.visualizer-region-list li{display:flex;gap:4px;align-items:center;padding:4px;border-radius:8px;border:1px solid transparent}.visualizer-region-list li.is-selected{background:#eef4ff;border-color:#b4d0f5}.visualizer-region-item{flex:1;display:flex;gap:10px;align-items:center;padding:6px 8px;border-radius:6px;background:transparent;border:none;text-align:left;cursor:pointer;color:#1a1c1f}.visualizer-region-item:hover{background:#f2f4f7}.visualizer-region-swatch{width:24px;height:24px;border-radius:6px;border:1px solid rgba(0,0,0,.12);flex-shrink:0}.visualizer-region-meta{display:flex;flex-direction:column;min-width:0}.visualizer-region-name{font-size:14px;font-weight:500}.visualizer-region-color{font-size:12px;color:#5a6470}.visualizer-region-actions{display:flex;gap:2px}.visualizer-region-empty{font-size:13px;color:#5a6470;padding:8px 4px}.visualizer-palette{background:#ffffff;border:1px solid #e0e5eb;border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:10px}.visualizer-palette-header{display:flex;flex-direction:column;gap:8px}.visualizer-input{padding:8px 12px;border-radius:8px;border:1px solid #d6dbe1;font-size:14px;color:#1a1c1f;background:#ffffff}.visualizer-input:focus{outline:2px solid #a6c8ff;outline-offset:-1px;border-color:#4a90e2}.visualizer-palette-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.visualizer-swatch{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:6px;border-radius:10px;border:2px solid transparent;padding:10px;min-height:70px;cursor:pointer;transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease;text-align:left}.visualizer-swatch:hover{transform:translateY(-1px);box-shadow:0 3px 10px rgba(15,22,32,.15)}.visualizer-swatch.is-selected{border-color:#1a73e8;box-shadow:0 0 0 2px #a6c8ff}.visualizer-swatch-label{display:flex;flex-direction:column;gap:2px}.visualizer-swatch-name{font-size:13px;font-weight:600}.visualizer-swatch-code{font-size:11px;opacity:.75}.visualizer-swatch-check{align-self:flex-start;font-size:14px;font-weight:700}.visualizer-palette-empty{padding:12px;text-align:center;color:#5a6470;font-size:13px}.visualizer-palette-note{font-size:11px;color:#8a95a1;border-top:1px solid #eef1f5;padding-top:8px}.vpal{background:#ffffff;border:1px solid #e0e5eb;border-radius:14px;display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}.vpal-filters{flex-shrink:0;display:flex;flex-direction:column;gap:6px;padding:8px 10px 7px;border-bottom:1px solid #f0f2f5}.vpal-body{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding:8px 10px 10px}.vpal-search-wrap{position:relative}.vpal-search-icon{position:absolute;left:9px;top:50%;transform:translateY(-50%);color:#9ca3af;pointer-events:none;width:13px;height:13px}.vpal-search{width:100%;padding:6px 10px 6px 30px;border-radius:8px;border:1.5px solid #e0e5eb;font-size:12px;color:#1a1c1f;background:#f9fafb;box-sizing:border-box;transition:border-color .12s,box-shadow .12s}.vpal-search:focus{outline:none;border-color:#93c5fd;background:#fff;box-shadow:0 0 0 3px rgba(59,130,246,.12)}.vpal-search:disabled{opacity:.5}.vpal-surface-row{display:flex;gap:6px}.vpal-surf{flex:1;padding:4px 6px;border-radius:7px;border:1.5px solid #e5e7eb;background:#f4f6f9;font-size:11px;font-weight:500;color:#4b5563;cursor:pointer;transition:background .1s,border-color .1s,color .1s}.vpal-surf:hover{background:#eaecf1;border-color:#d1d5db}.vpal-surf.is-active{background:#1d4ed8;border-color:#1d4ed8;color:#fff}.vpal-cats{display:flex;gap:5px;overflow-x:auto;padding-bottom:3px;scrollbar-width:none}.vpal-cats::-webkit-scrollbar{display:none}.vpal-cat{flex-shrink:0;padding:3px 9px;border-radius:20px;border:1.5px solid #e5e7eb;background:#f4f6f9;font-size:11px;font-weight:500;color:#4b5563;cursor:pointer;white-space:nowrap;transition:background .1s,border-color .1s,color .1s}.vpal-cat:hover{background:#eaecf1;border-color:#d1d5db}.vpal-cat.is-active{background:#eff6ff;border-color:#93c5fd;color:#1d4ed8;font-weight:600}.vpal-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.vpal-swatch{position:relative;display:flex;flex-direction:column;border-radius:10px;border:2px solid transparent;overflow:hidden;cursor:pointer;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.09);transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease;text-align:left;padding:0}.vpal-swatch:hover{transform:translateY(-2px);box-shadow:0 5px 14px rgba(0,0,0,.14)}.vpal-swatch:disabled{opacity:.4;cursor:not-allowed;transform:none}.vpal-swatch.is-selected{border-color:#1d4ed8;box-shadow:0 0 0 3px #bfdbfe}.vpal-swatch-bg{display:block;height:72px;width:100%}.vpal-swatch-check{position:absolute;top:4px;right:4px;width:16px;height:16px;background:#1d4ed8;color:#fff;border-radius:50%;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center}.vpal-swatch-info{position:absolute;bottom:0;left:0;right:0;padding:4px 5px;display:flex;flex-direction:column;gap:0}.vpal-swatch-name{display:none}.vpal-swatch-code{font-size:9px;font-weight:700;color:rgba(0,0,0,.55)}.vpal-load-more{width:100%;padding:14px;border-radius:10px;border:none;background:#1e40af;font-size:16px;font-weight:600;color:#ffffff;cursor:pointer;transition:background .15s}.vpal-load-more:hover{background:#1d3a9e}.vpal-loading{display:flex;align-items:center;gap:8px;justify-content:center;padding:12px;font-size:13px;color:#6b7280}.vpal-spinner{width:16px;height:16px;border:2px solid #e5e7eb;border-top-color:#1d4ed8;border-radius:50%;animation:vpal-spin .7s linear infinite;flex-shrink:0}@keyframes vpal-spin{to{transform:rotate(1turn)}}.vpal-empty{grid-column:1/-1;padding:20px;text-align:center;color:#6b7280;font-size:13px}.vpal-note{font-size:11px;color:#8a95a1;border-top:1px solid #eef1f5;padding-top:8px;margin:0}.visualizer-error-block{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:40px;text-align:center}.visualizer-error-title{font-size:18px;font-weight:600}.visualizer-error-message{color:#5a6470;max-width:400px}.visualizer-before-after-overlay{position:fixed;inset:0;background:rgba(10,12,16,.85);z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;gap:16px}.visualizer-before-after-header{display:flex;align-items:center;justify-content:space-between;width:min(1000px,100%);color:#ffffff;font-size:16px;font-weight:500}.visualizer-before-after-header .visualizer-button-ghost{color:#ffffff;border-color:rgba(255,255,255,.4);background:transparent}.visualizer-before-after-header .visualizer-button-ghost:hover{background:rgba(255,255,255,.1)}.visualizer-before-after{position:relative;width:min(1000px,100%);max-height:80vh;border-radius:12px;overflow:hidden;background:#000;user-select:none;cursor:ew-resize}.visualizer-before-after-image{width:100%;height:100%;object-fit:contain}.visualizer-before-after-clip,.visualizer-before-after-image{position:absolute;inset:0;pointer-events:none}.visualizer-before-after-handle{position:absolute;top:0;bottom:0;width:2px;transform:translateX(-50%);pointer-events:none}.visualizer-before-after-line{width:2px;height:100%;background:#ffffff;box-shadow:0 0 6px rgba(0,0,0,.6)}.visualizer-before-after-knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#ffffff;color:#1a1c1f;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;box-shadow:0 2px 8px rgba(0,0,0,.5)}.visualizer-before-after-label{position:absolute;top:12px;padding:4px 10px;border-radius:999px;background:rgba(0,0,0,.55);color:#ffffff;font-size:12px;letter-spacing:.04em;text-transform:uppercase}.visualizer-before-after-label.is-left{left:12px}.visualizer-before-after-label.is-right{right:12px}@media (max-width:900px){.visualizer-hero{padding:36px 24px 28px}.visualizer-hero .visualizer-page-title{font-size:30px}.visualizer-hero .visualizer-page-tagline{font-size:15px}.visualizer-hero-features{gap:8px}.visualizer-feature-chip{font-size:12px;padding:5px 11px}.visualizer-how-it-works{padding:16px}.visualizer-how-step{padding:0 12px}.visualizer-how-label{font-size:12px}.visualizer-uploader-dropzone{padding:48px 32px}.visualizer-body{grid-template-columns:1fr;height:auto;min-height:0}.visualizer-sidebar{max-height:none}.visualizer-palette-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.visualizer-toolbar-group:last-child{margin-left:0}.visualizer-hero-aurora span{filter:blur(50px);opacity:.65}}@media (max-width:640px){.visualizer-hero{padding:28px 16px 22px}.visualizer-hero .visualizer-page-title{font-size:26px;letter-spacing:-.02em}.visualizer-hero .visualizer-page-tagline{font-size:14px;margin-top:8px}.visualizer-hero-features{gap:6px;justify-content:center}.visualizer-feature-chip{font-size:11px;padding:5px 10px;gap:4px}.visualizer-how-it-works{flex-direction:column;align-items:flex-start;gap:0;padding:0}.visualizer-how-step{padding:14px 20px;width:100%;border-bottom:1px solid #e8edf3}.visualizer-how-step:last-child{border-bottom:none}.visualizer-how-divider{display:none}.visualizer-how-number{font-size:18px;min-width:28px}.visualizer-how-label{font-size:13px;max-width:none}.visualizer-uploader{padding:16px;min-height:50vh}.visualizer-uploader-dropzone{padding:36px 20px;border-radius:18px}.visualizer-uploader-title{font-size:18px}.visualizer-uploader-subtitle{font-size:14px}.visualizer-shell{padding:8px 12px 16px}.visualizer-hero-aurora span{filter:blur(40px);opacity:.6}.vha-1,.vha-11,.vha-13,.vha-15,.vha-3,.vha-5,.vha-7,.vha-9{width:70vw;height:70vw}.vha-10,.vha-12,.vha-14,.vha-16,.vha-2,.vha-4,.vha-6,.vha-8{width:55vw;height:55vw}}@media (max-width:400px){.visualizer-hero .visualizer-page-title{font-size:22px}.visualizer-hero-features{flex-wrap:wrap}.visualizer-uploader-dropzone{padding:28px 16px}.visualizer-uploader-title{font-size:16px}.visualizer-uploader-subtitle{font-size:13px}.visualizer-page-header{padding:12px 16px 0}.visualizer-palette-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.visualizer-toolbar{padding:6px 8px}.visualizer-toolbar-group+.visualizer-toolbar-group{padding-left:8px}.visualizer-button{padding:6px 10px;font-size:13px}.vtb-bar{padding:5px 8px;gap:2px;border-radius:10px}.vtb-btn span{display:none}.vtb-btn-primary span{display:inline}.vtb-slider{width:64px}}.vpal-cat-select{display:none}@media (max-width:640px){.vtb-bar{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;padding:8px;border-radius:14px}.vtb-group{display:contents}.vtb-sep,.vtb-spacer{display:none}.vtb-bar .vtb-btn{justify-content:center;min-height:44px;padding:0;border-radius:10px}.vtb-bar .vtb-btn span{display:none}.vtb-bar .vtb-btn-layers{padding:0}.vtb-bar{gap:4px;padding:6px;border-radius:16px;box-shadow:0 4px 18px rgba(15,23,42,.08),0 0 0 1px rgba(15,23,42,.04)}.vtb-bar .vtb-btn-danger,.vtb-bar .vtb-btn-icon,.vtb-bar .vtb-btn-layers,.vtb-bar .vtb-btn-neutral{background:transparent;border-color:transparent;box-shadow:none;color:#334155;border-radius:12px}.vtb-bar .vtb-btn-icon:active:not(:disabled),.vtb-bar .vtb-btn-layers:active:not(:disabled),.vtb-bar .vtb-btn-neutral:active:not(:disabled){background:#eef2ff;color:#1d4ed8}.vtb-bar .vtb-btn-danger{color:#dc2626}.vtb-bar .vtb-btn-danger:active:not(:disabled){background:#fef2f2}.vtb-bar .vtb-btn:disabled{opacity:.3}.vtb-bar .vtb-btn svg{width:22px;height:22px}.vtb-bar .vtb-btn-active{background:#eff6ff;color:#1d4ed8;box-shadow:inset 0 0 0 1.5px #bfdbfe}.vtb-bar .vtb-btn-primary{border-radius:14px;background:linear-gradient(135deg,#2563eb,#1d4ed8);box-shadow:0 6px 16px rgba(37,99,235,.3);margin-top:2px}.vtb-bar .vtb-btn-primary:disabled{background:#bfdbfe;box-shadow:none}.vtb-bar .vtb-btn-primary{grid-column:1/-1;padding:0 16px;min-height:46px}.vtb-bar .vtb-btn-primary span{display:inline}.vtb-bar .vtb-brush-size{grid-column:1/-1}.vtb-bar .vtb-slider{width:100%;flex:1}.visualizer-canvas-stage{min-height:240px}.vpal-cats{display:none}.vpal-cat-select{display:block;width:100%;height:42px;padding:0 12px;border:1.5px solid #e5e7eb;border-radius:8px;background:#f4f6f9;font-size:12px;color:#1f2937}.vpal-surf{padding:8px 6px;font-size:12px}.vpal-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.vpal-swatch-bg{height:64px}.vpal-swatch-code{font-size:10px;color:rgba(0,0,0,.7);text-shadow:0 0 3px rgba(255,255,255,.9)}}