:root{--bg: #f0f3f8;--bg-card: rgba(255,255,255,.7);--border: rgba(0,0,0,.055);--border-subtle: rgba(0,0,0,.04);--text: #171923;--text-secondary: #5a6170;--text-muted: #99a0b0;--blue: #3b6df0;--blue-hover: #2b56d8;--blue-bg: rgba(59,109,240,.06);--purple: #7c5cfc;--gradient: linear-gradient(135deg, #3b6df0 0%, #6c4ef8 100%);--gradient-subtle: linear-gradient(135deg, rgba(59,109,240,.05), rgba(108,78,248,.03));--shadow-xs: 0 1px 2px rgba(0,0,0,.03);--shadow-sm: 0 1px 3px rgba(0,0,0,.04), 0 2px 8px rgba(0,0,0,.04);--shadow: 0 2px 4px rgba(0,0,0,.03), 0 6px 20px rgba(0,0,0,.06);--radius-sm: 8px;--radius: 12px;--radius-lg: 16px;--ease: .2s cubic-bezier(.4,0,.2,1)}body.ant-app-dark,[data-theme=dark]{--bg: #111318;--bg-card: rgba(30,33,42,.8);--border: rgba(255,255,255,.07);--border-subtle: rgba(255,255,255,.05);--text: #e8eaf0;--text-secondary: #b0b5c0;--text-muted: #6b7080}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{touch-action:manipulation;height:100%}body{min-height:100vh;font-family:-apple-system,SF Pro Display,PingFang SC,Microsoft YaHei,Noto Sans SC,sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased}#root{min-height:100vh}.ant-card{border-radius:var(--radius-lg)}.ant-card-head-title{font-size:12px;font-weight:600;letter-spacing:-.01em;padding:10px 0}.ant-card-head-title:before{content:"";display:inline-block;width:3px;height:13px;border-radius:2px;background:var(--gradient);margin-right:7px;vertical-align:middle;position:relative;top:-1px}.ant-card-small>.ant-card-head>.ant-card-head-title{font-size:12px;padding:9px 0}.ant-btn-primary{background:var(--gradient);border:none;box-shadow:0 2px 6px #3b6df033}.ant-btn-primary:hover{opacity:.92;box-shadow:0 4px 14px #3b6df04d}.ant-btn-primary:disabled{opacity:.4;box-shadow:none}.ant-slider-track{background:var(--blue)}.ant-slider-handle{border-color:var(--blue)}.ant-layout{background:transparent}.ant-table{font-size:11px}.app-shell{display:flex;gap:12px;align-items:stretch;padding:12px;min-height:calc(100vh - 48px)}.app-sidebar{width:280px;flex-shrink:0;display:flex;flex-direction:column;gap:10px}.app-content{flex:1;min-width:0;display:flex;gap:10px;align-items:stretch}.main-center{flex:3;min-width:0;display:flex}.main-center>.ant-card{flex:1;display:flex;flex-direction:column;width:100%}.main-center>.ant-card>.ant-card-body{flex:1;display:flex;flex-direction:column;overflow:hidden}.main-right{flex:2;min-width:0;display:flex;flex-direction:column;gap:8px}.main-right-row{display:flex;gap:8px}.main-right-row>.ant-card{flex:1;min-width:0}.main-right-preview{flex:1;min-height:260px;display:flex}.main-right-preview>.ant-card{flex:1;display:flex;flex-direction:column}.main-right-preview>.ant-card>.ant-card-body{flex:1;padding:0!important;overflow:hidden}.preview-3d-container{width:100%;height:100%;border-radius:var(--radius);overflow:hidden;background:linear-gradient(145deg,#e7ecf6,#dde3f0 40%,#e3e9f5);position:relative}.preview-3d-container canvas{display:block;width:100%!important;height:100%!important}.editor-toolbar{display:flex;align-items:center;gap:4px;padding:6px 10px;background:#00000005;border:1px solid var(--border-subtle);border-radius:var(--radius-sm);flex-shrink:0;flex-wrap:wrap}.toolbar-group{display:flex;align-items:center;gap:3px}.toolbar-sep{width:1px;height:22px;background:var(--border);margin:0 2px;flex-shrink:0}.toolbar-mode{display:inline-flex;align-items:center;gap:4px;height:27px;padding:0 9px;border-radius:6px;border:1px solid var(--border);background:#fff;font-size:11px;color:var(--text-secondary);cursor:pointer;transition:all var(--ease);font-family:inherit}.toolbar-mode:hover{border-color:var(--blue);color:var(--blue)}.toolbar-mode.on{background:var(--blue-bg);border-color:var(--blue);color:var(--blue);font-weight:500}.toolbar-swatches{flex:1;min-width:0;overflow-x:auto;overflow-y:hidden;flex-wrap:nowrap}.toolbar-swatches::-webkit-scrollbar{height:2px}.grid-canvas-wrap{flex:1;display:flex;justify-content:center;align-items:flex-start;overflow:auto;border-radius:var(--radius);border:1px solid var(--border);background:#f9fafc;min-height:0;padding:8px}.grid-canvas-wrap canvas{cursor:pointer;border-radius:4px}.swatch{width:22px;height:22px;border-radius:5px;cursor:pointer;border:2px solid transparent;transition:all var(--ease);flex-shrink:0}.swatch:hover{border-color:#ffffff4d;transform:scale(1.12)}.swatch.selected{border-color:var(--blue);box-shadow:0 0 0 2px #3b6df02e}.swatch-custom{background:conic-gradient(red,#ff0,#0f0,#0ff,#00f,#f0f,red);border:1px dashed rgba(0,0,0,.15)}.upload-dragger.ant-upload-drag{border:1.5px dashed rgba(59,109,240,.18)!important;border-radius:var(--radius)!important;background:#3b6df004!important}.upload-dragger.ant-upload-drag:hover{border-color:#3b6df066!important;background:#3b6df00a!important}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#00000014;border-radius:2px}::-webkit-scrollbar-thumb:hover{background:#00000026}@media(max-width:1200px){.app-shell{flex-direction:column}.app-sidebar{width:100%;flex-direction:row;flex-wrap:wrap;gap:8px}.app-sidebar>*{flex:1 1 260px;min-width:240px}.app-content{flex-direction:column}}@media(max-width:768px){.app-shell{padding:8px;gap:8px}.app-sidebar{flex-direction:column}.app-sidebar>*{flex:1 1 auto}.app-content{flex-direction:column}}