:root{--bg-color: #0d0d0d;--panel-bg: rgba(25, 25, 25, .7);--accent-color: #3b82f6;--accent-glow: rgba(59, 130, 246, .5);--text-main: #f3f4f6;--text-dim: #9ca3af;--border-color: rgba(255, 255, 255, .1);--glass-effect: blur(12px) saturate(180%)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background-color:var(--bg-color);color:var(--text-main);overflow:hidden;height:100vh;width:100vw}#root{height:100%}.app-container{display:flex;height:100vh;width:100vw;background:radial-gradient(circle at 50% 50%,#1a1a1a,#0d0d0d);overflow:hidden}.sidebar{width:280px;min-width:280px;background:var(--panel-bg);-webkit-backdrop-filter:var(--glass-effect);backdrop-filter:var(--glass-effect);border-right:1px solid var(--border-color);display:flex;flex-direction:column;padding:1.25rem;z-index:10;overflow-y:auto}.sidebar-right{border-right:none;border-left:1px solid var(--border-color)}.main-content{flex:1;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;padding:2.5rem;background-image:radial-gradient(circle at 50% 50%,rgba(59,130,246,.05) 0%,transparent 70%),linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);background-size:100% 100%,40px 40px,40px 40px}.upload-zone{width:100%;max-width:600px;height:100%;max-height:400px;border:2px dashed var(--border-color);border-radius:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;cursor:pointer;background:#ffffff08;transition:all .3s ease;color:var(--text-dim)}.upload-zone:hover{background:#ffffff0d;border-color:var(--accent-color);color:var(--text-main);box-shadow:0 0 30px var(--accent-glow)}.canvas-container{display:flex;align-items:center;justify-content:center;width:100%;height:100%;position:relative;background:#0003;border-radius:20px}.preview-wrapper{position:relative;max-width:100%;max-height:100%;display:flex;align-items:center;justify-content:center}.vector-preview,.preview-canvas{max-width:100%;max-height:80vh;border-radius:12px;box-shadow:0 10px 40px #00000080;transition:all .3s ease}.vector-preview{display:flex;align-items:center;justify-content:center;background:#fff;border:2px solid #00cc99;overflow:hidden}.vector-preview svg{width:100%!important;height:100%!important;display:block;margin:0;padding:0}.vector-preview path{transition:stroke-width .1s ease;stroke:#000!important;fill:none!important;stroke-linecap:round;stroke-linejoin:round;stroke-width:var(--svg-stroke-width, 1.5px)}.preview-canvas{object-fit:contain;border:2px solid transparent}.app-title{display:flex;align-items:center;gap:.75rem;margin-bottom:2rem}.app-title h1{font-size:1.25rem;font-weight:700;background:linear-gradient(135deg,#fff,#0c9);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.tool-group{margin-bottom:1.5rem}.glass-panel{background:var(--panel-bg);-webkit-backdrop-filter:var(--glass-effect);backdrop-filter:var(--glass-effect);border:1px solid var(--border-color);border-radius:12px;padding:1.25rem}.control-item{margin-bottom:1.25rem}.control-item:last-child{margin-bottom:0}.btn{padding:.75rem 1rem;border-radius:8px;border:none;font-weight:600;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;gap:.5rem;color:#fff}.btn:active{transform:scale(.98)}.btn-primary{background:var(--accent-color)}.btn-primary:hover{box-shadow:0 0 15px var(--accent-glow)}.btn-secondary{background:#ffffff0d;border:1px solid var(--border-color)}.btn-secondary:hover{background:#ffffff1a}.preset-btn{flex:1;font-size:.85rem}.custom-select{width:100%;background:#ffffff0d;border:1px solid var(--border-color);color:var(--text-main);padding:.6rem;border-radius:8px;cursor:pointer;outline:none}input[type=range]{width:100%;height:4px;background:#ffffff1a;border-radius:2px;appearance:none;margin-top:.5rem}input[type=range]::-webkit-slider-thumb{appearance:none;width:16px;height:16px;background:var(--accent-color);border-radius:50%;cursor:pointer;box-shadow:0 0 10px var(--accent-glow)}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}