.app-header{display:flex;justify-content:space-between;align-items:center;padding:0 24px;background:linear-gradient(135deg,#667eea,#764ba2);border-bottom:none;box-shadow:0 4px 20px #00000026;position:relative;overflow:hidden}.app-header:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(45deg,rgba(255,255,255,.1) 0%,transparent 50%);pointer-events:none}.app-title{margin:0;font-size:20px;font-weight:700;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.3)}.toolbar{display:flex;align-items:center;gap:12px}.canvas-area{background:linear-gradient(135deg,#f8fafc,#e2e8f0,#cbd5e1);display:flex;justify-content:center;align-items:flex-start;position:relative;min-height:100%;padding:40px 20px 20px}.canvas-wrapper{background:#fff;border:2px solid #f1f5f9;border-radius:20px;overflow:hidden;box-shadow:0 25px 50px #0000001f,0 12px 24px #00000014,inset 0 1px #ffffffe6;position:relative;transition:all .3s ease}.canvas-wrapper:hover{box-shadow:0 25px 50px #00000026,0 12px 24px #00000014;transform:translateY(-2px)}.sidebar{background:linear-gradient(180deg,#fefefe,#f8fafc);padding:20px;overflow-y:auto;box-shadow:2px 0 16px #0000001a,inset -1px 0 #fffc}.sidebar::-webkit-scrollbar,.ant-layout-sider::-webkit-scrollbar{width:6px}.sidebar::-webkit-scrollbar-track,.ant-layout-sider::-webkit-scrollbar-track{background:#f1f1f1;border-radius:3px}.sidebar::-webkit-scrollbar-thumb,.ant-layout-sider::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:3px}.sidebar::-webkit-scrollbar-thumb:hover,.ant-layout-sider::-webkit-scrollbar-thumb:hover{background:#a8a8a8}.tool-section{margin-bottom:20px}.sample-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.sample-image{width:100%;height:70px;object-fit:cover;cursor:pointer;border-radius:8px;border:2px solid transparent;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 8px #0000001a}.sample-image:hover{border-color:#1890ff;transform:scale(1.05) translateY(-2px);box-shadow:0 8px 25px #1890ff4d}.empty-state{text-align:center;color:#999;padding:60px 20px;font-size:14px;background:linear-gradient(135deg,#f8f9fa,#e9ecef);border-radius:12px;border:2px dashed #dee2e6}.layer-controls{padding:12px;background:linear-gradient(135deg,#f8f9fa,#e9ecef);border-radius:8px;margin-top:12px;border:1px solid #e9ecef}.zoom-controls{display:flex;align-items:center;gap:6px}.tool-card{background:#fff;border-radius:12px;box-shadow:0 4px 12px #00000014;border:1px solid #f0f0f0;transition:all .3s ease;overflow:hidden}.tool-card:hover{box-shadow:0 8px 25px #0000001f;transform:translateY(-2px)}.tool-card .ant-card-head{background:linear-gradient(135deg,#f8f9fa,#e9ecef);border-bottom:1px solid #e9ecef}.gradient-button{border:none;border-radius:8px;font-weight:500;transition:all .3s ease;box-shadow:0 2px 8px #0000001a}.gradient-button:hover{transform:translateY(-1px);box-shadow:0 4px 15px #0003}.gradient-button-primary{background:linear-gradient(135deg,#74b9ff,#0984e3);color:#fff}.gradient-button-secondary{background:linear-gradient(135deg,#fd79a8,#e84393);color:#fff}.gradient-button-success{background:linear-gradient(135deg,#55efc4,#00b894);color:#fff}.status-indicator{position:absolute;top:12px;left:12px;background:#000c;color:#fff;padding:8px 16px;border-radius:20px;font-size:12px;font-weight:500;display:flex;align-items:center;gap:8px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1)}.status-dot{width:8px;height:8px;border-radius:50%;background:#52c41a;animation:pulse 2s infinite}@keyframes pulse{0%{box-shadow:0 0 #52c41ab3}70%{box-shadow:0 0 0 10px #52c41a00}to{box-shadow:0 0 #52c41a00}}.mode-card{background:linear-gradient(135deg,#e3f2fd,#f3e5f5);border:none;border-radius:12px;box-shadow:0 4px 12px #00000014;transition:all .3s ease}.mode-card:hover{transform:translateY(-1px);box-shadow:0 6px 20px #0000001f}.shape-preview{width:100%;height:45px;cursor:pointer;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:700;text-shadow:1px 1px 2px rgba(0,0,0,.3);transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 8px #00000026;position:relative;overflow:hidden}.shape-preview: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}.shape-preview:hover:before{left:100%}.shape-preview:hover{transform:scale(1.05) translateY(-2px);box-shadow:0 8px 25px #00000040}.image-preview-container{position:relative;border-radius:12px;overflow:hidden;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 12px #0000001a}.image-preview-container:hover{transform:scale(1.05) translateY(-3px);box-shadow:0 12px 30px #0003}.image-preview-overlay{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,#000c);color:#fff;padding:12px 8px 6px;font-size:11px;font-weight:500;transform:translateY(100%);transition:transform .3s ease}.image-preview-container:hover .image-preview-overlay{transform:translateY(0)}@media (max-width: 1200px){.app-header{padding:0 16px}.sidebar,.canvas-area{padding:16px}}@media (max-width: 768px){.app-header{flex-direction:column;gap:12px;padding:12px}.toolbar{flex-wrap:wrap;justify-content:center}.sample-grid{grid-template-columns:1fr}}.loading-spinner{display:inline-block;width:20px;height:20px;border:3px solid rgba(255,255,255,.3);border-radius:50%;border-top-color:#fff;animation:spin 1s ease-in-out infinite}@keyframes spin{to{transform:rotate(360deg)}}.success-indicator{color:#52c41a;font-weight:500}.error-indicator{color:#ff4d4f;font-weight:500}.ant-tooltip-inner{background:#000000d9;border-radius:6px;font-size:12px}.ant-select-dropdown{border-radius:8px;box-shadow:0 8px 30px #0000001f}.ant-select-item-option-content{padding:8px 0}.card-title-with-icon{display:flex;align-items:center;gap:8px;font-weight:600}.custom-badge{background:linear-gradient(135deg,#667eea,#764ba2);border:none;box-shadow:0 2px 8px #667eea4d}*{box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(135deg,#f5f7fa,#c3cfe2);min-height:100vh}#root{min-height:100vh;height:auto}.ant-layout{background:transparent!important}.ant-layout-sider{background:#fafafa!important;box-shadow:2px 0 12px #00000014!important}.ant-layout-header{background:linear-gradient(135deg,#667eea,#764ba2)!important;border-bottom:none!important;box-shadow:0 4px 20px #00000026!important}.ant-layout-content{background:transparent!important}.ant-card{border-radius:12px!important;box-shadow:0 4px 12px #00000014!important;border:1px solid #f0f0f0!important;transition:all .3s ease!important}.ant-card:hover{box-shadow:0 8px 25px #0000001f!important;transform:translateY(-2px)!important}.ant-card-head{background:linear-gradient(135deg,#f8f9fa,#e9ecef)!important;border-bottom:1px solid #e9ecef!important;border-radius:12px 12px 0 0!important}.ant-card-head-title{font-weight:600!important;color:#262626!important}.ant-card-body{padding:16px!important}.ant-btn{border-radius:8px!important;font-weight:500!important;transition:all .3s ease!important;box-shadow:0 2px 4px #0000001a!important}.ant-btn:hover{transform:translateY(-1px)!important;box-shadow:0 4px 12px #00000026!important}.ant-btn-primary{background:linear-gradient(135deg,#1890ff,#096dd9)!important;border:none!important}.ant-btn-primary:hover{background:linear-gradient(135deg,#40a9ff,#1890ff)!important}.ant-btn-lg{height:48px!important;padding:0 24px!important;font-size:16px!important}.ant-select{border-radius:8px!important}.ant-select-selector{border-radius:8px!important;border:2px solid #d9d9d9!important;transition:all .3s ease!important}.ant-select-focused .ant-select-selector{border-color:#1890ff!important;box-shadow:0 0 0 2px #1890ff33!important}.ant-select-dropdown{border-radius:12px!important;box-shadow:0 8px 30px #0000001f!important;border:1px solid #f0f0f0!important}.ant-select-item{border-radius:6px!important;margin:4px 8px!important;transition:all .2s ease!important}.ant-select-item-option-selected{background:linear-gradient(135deg,#e6f7ff,#bae7ff)!important;color:#1890ff!important;font-weight:500!important}.ant-upload{width:100%!important}.ant-upload.ant-upload-drag{border-radius:12px!important;border:2px dashed #d9d9d9!important;background:linear-gradient(135deg,#fafafa,#f5f5f5)!important;transition:all .3s ease!important}.ant-upload.ant-upload-drag:hover{border-color:#1890ff!important;background:linear-gradient(135deg,#e6f7ff,#bae7ff)!important}.ant-space-compact .ant-btn{border-radius:0!important}.ant-space-compact .ant-btn:first-child{border-radius:8px 0 0 8px!important}.ant-space-compact .ant-btn:last-child{border-radius:0 8px 8px 0!important}.ant-tooltip-inner{background:#000000d9!important;border-radius:8px!important;font-size:12px!important;padding:8px 12px!important}.ant-tooltip-arrow:before{background:#000000d9!important}.ant-badge-count{background:linear-gradient(135deg,#ff4d4f,#cf1322)!important;border:none!important;box-shadow:0 2px 8px #ff4d4f4d!important}.ant-divider-vertical{border-color:#ffffff4d!important;height:30px!important}.ant-avatar{box-shadow:0 2px 8px #00000026!important;transition:all .3s ease!important}.ant-avatar:hover{transform:scale(1.05)!important;box-shadow:0 4px 15px #0003!important}.canvas-container{position:relative;overflow:hidden;background:#fff;border-radius:16px;box-shadow:0 20px 40px #0000001a,0 8px 16px #0000000f}.layer-item{transition:all .3s ease!important;border-radius:8px!important;margin:4px 0!important;padding:8px!important;border:2px solid transparent!important}.layer-item:hover{background:linear-gradient(135deg,#f0f9ff,#e0f2fe)!important;border-color:#bae7ff!important;transform:translate(4px)!important}.layer-item.selected{background:linear-gradient(135deg,#e6f7ff,#bae7ff)!important;border-color:#1890ff!important;box-shadow:0 4px 12px #1890ff33!important}.zoom-indicator{position:absolute;bottom:16px;right:16px;background:#000c;color:#fff;padding:8px 16px;border-radius:20px;font-size:12px;font-weight:500;z-index:1000;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);box-shadow:0 4px 12px #0000004d}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}::-webkit-scrollbar-thumb{background:linear-gradient(135deg,#c1c1c1,#a8a8a8);border-radius:4px;transition:all .3s ease}::-webkit-scrollbar-thumb:hover{background:linear-gradient(135deg,#a8a8a8,#909090)}::selection{background:#1890ff33;color:#1890ff}::-moz-selection{background:#1890ff33;color:#1890ff}*:focus{outline:2px solid rgba(24,144,255,.5);outline-offset:2px}.fade-in{animation:fadeIn .3s ease-in-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.slide-in-left{animation:slideInLeft .3s ease-out}@keyframes slideInLeft{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}.slide-in-right{animation:slideInRight .3s ease-out}@keyframes slideInRight{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}@media (max-width: 768px){body{font-size:14px}.ant-card-head-title{font-size:14px!important}.ant-btn-lg{height:40px!important;font-size:14px!important}}@media (prefers-contrast: high){.ant-card,.ant-btn{border:2px solid #000!important}}@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@media print{.ant-layout-sider,.ant-layout-header{display:none!important}.ant-layout-content{margin:0!important;padding:0!important}}@keyframes float{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-20px) rotate(180deg)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes borderGlow{0%,to{opacity:1}50%{opacity:.5}}@keyframes titleGlow{0%,to{text-shadow:0 4px 20px rgba(0,0,0,.3)}50%{text-shadow:0 4px 30px rgba(255,255,255,.5),0 0 40px rgba(255,255,255,.3)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.animated-element{will-change:transform,opacity;transform-style:preserve-3d;backface-visibility:hidden}@media (max-width: 768px){.grid-layout{grid-template-columns:1fr!important}}