*{box-sizing:border-box;margin:0;padding:0}:root{--bg: #0f1115;--surface: #171a21;--surface-hover: #1e222b;--surface-active: #252a36;--text: #f1f5f9;--text-sub: #94a3b8;--text-muted: #64748b;--accent: #6366f1;--accent-hover: #4f46e5;--success: #10b981;--danger: #ef4444;--radius: 12px;--radius-sm: 8px}html,body,#root{height:100%;width:100%;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,PingFang SC,Helvetica Neue,sans-serif;font-size:13px;-webkit-font-smoothing:antialiased;overflow:hidden}button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit;border:none;outline:none;background:none}button{cursor:pointer}.spin{animation:tpl-spin .9s linear infinite}@keyframes tpl-spin{to{transform:rotate(360deg)}}.studio-img-shell{position:relative;width:100%;height:100%;overflow:hidden;background:var(--surface)}.studio-img-el{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .2s ease}.studio-img-skeleton{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:var(--surface);color:var(--text-muted)}.loginwrap{height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg)}.loginbox{width:340px;padding:32px;border-radius:16px;background:var(--surface);display:flex;flex-direction:column;gap:12px}.loginbox h1{font-size:18px;font-weight:700}.loginbox .sub{color:var(--text-sub);font-size:12px;margin-bottom:8px}.loginbox label{color:var(--text-sub);font-size:12px}.loginbox input{height:38px;padding:0 12px;border-radius:var(--radius-sm);background:var(--bg);color:var(--text)}.loginbox .submit{margin-top:8px;height:40px;border-radius:var(--radius-sm);background:var(--accent);color:#fff;font-weight:600;display:flex;align-items:center;justify-content:center;gap:6px}.loginbox .err{padding:8px 12px;border-radius:var(--radius-sm);background:#ef444426;color:#fca5a5;font-size:12px}.tpl-shell{display:grid;grid-template-columns:240px 1fr;height:100vh;width:100vw;gap:12px;padding:12px;background:var(--bg)}.tpl-sidebar{background:var(--surface);border-radius:var(--radius);display:flex;flex-direction:column;padding:14px;gap:12px;overflow:hidden}.tpl-sidebar-head{display:flex;align-items:center;justify-content:space-between}.tpl-brand{font-size:15px;font-weight:700;letter-spacing:.02em}.tpl-new-btn{display:inline-flex;align-items:center;gap:4px;padding:5px 10px;border-radius:var(--radius-sm);background:var(--surface-active);color:var(--text);font-size:12px;font-weight:600}.tpl-new-btn:hover{background:var(--accent);color:#fff}.tpl-search-box{display:flex;align-items:center;gap:8px;height:34px;padding:0 10px;border-radius:var(--radius-sm);background:var(--bg);color:var(--text-sub)}.tpl-search-box input{flex:1;width:100%;color:var(--text)}.tpl-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:4px}.tpl-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--radius-sm);cursor:pointer;transition:background .15s ease}.tpl-item:hover{background:var(--surface-hover)}.tpl-item.active{background:var(--surface-active)}.tpl-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}.tpl-item-body{flex:1;min-width:0}.tpl-item-title{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tpl-item-sub{font-size:11px;color:var(--text-muted);margin-top:2px}.tpl-item-count{font-size:11px;color:var(--text-sub);background:var(--bg);padding:2px 7px;border-radius:99px}.tpl-sidebar-foot{display:flex;align-items:center;justify-content:space-between;padding-top:4px;color:var(--text-muted);font-size:12px}.tpl-icon-btn{padding:6px;border-radius:var(--radius-sm);color:var(--text-sub)}.tpl-icon-btn:hover{background:var(--surface-hover);color:var(--text)}.tpl-main{background:var(--surface);border-radius:var(--radius);display:flex;flex-direction:column;overflow:hidden}.tpl-header{display:flex;align-items:center;justify-content:flex-start;gap:18px;padding:14px 20px;background:var(--surface)}.tpl-header-title{display:flex;align-items:baseline;gap:10px}.tpl-header-title h1{font-size:16px;font-weight:700}.tpl-header-tag{font-size:11px;color:var(--text-muted)}.tpl-tabs{display:flex;gap:4px;background:var(--bg);padding:4px;border-radius:var(--radius-sm)}.tpl-tab{padding:6px 18px;border-radius:6px;font-size:13px;font-weight:600;color:var(--text-sub);transition:all .15s ease}.tpl-tab:hover{color:var(--text)}.tpl-tab.active{background:var(--accent);color:#fff}.tpl-stage{flex:1;overflow-y:auto;padding:0 20px 24px}.tpl-primary-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:var(--radius-sm);background:var(--accent);color:#fff;font-weight:600}.tpl-primary-btn:hover{background:var(--accent-hover)}.tpl-ghost-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:var(--radius-sm);background:var(--bg);color:var(--text-sub);font-weight:500}.tpl-ghost-btn:hover{background:var(--surface-active);color:var(--text)}.tpl-ghost-btn.danger:hover{color:#fca5a5}.tab-basic{display:flex;flex-direction:column;gap:16px}.basic-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.basic-card{background:var(--bg);padding:14px 16px;border-radius:var(--radius-sm)}.basic-label{font-size:11px;color:var(--text-muted);margin-bottom:6px}.basic-val{font-size:14px;font-weight:600}.basic-suitability{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}.suit-block{background:var(--bg);padding:14px 16px;border-radius:var(--radius-sm)}.suit-text{font-size:13px;line-height:1.5;color:var(--text)}.suit-tags{display:flex;flex-wrap:wrap;gap:6px}.suit-tag{padding:3px 9px;border-radius:6px;background:var(--surface-active);font-size:12px;color:var(--text-sub)}.basic-preview-head{display:flex;align-items:center;justify-content:space-between;padding-top:4px;color:var(--text-sub);font-weight:600}.basic-hero-row{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.basic-hero-card,.basic-detail-card{background:var(--bg);padding:8px;border-radius:var(--radius-sm)}.basic-hero-canvas{position:relative;width:100%;aspect-ratio:1 / 1;border-radius:6px;overflow:hidden;background:#fff}.basic-hero-img,.basic-hero-ov{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover}.basic-hero-caption{margin-top:6px;font-size:11px;color:var(--text-sub);text-align:center}.basic-detail-row{display:flex;flex-direction:column;gap:10px;width:100%;max-width:460px;margin:0 auto}.basic-detail-svg{width:100%;border-radius:6px;overflow:hidden;display:block}.tab-sku{display:flex;flex-direction:column;gap:12px}.sku-list-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px}.sku-search-mini{display:flex;align-items:center;gap:8px;width:280px;height:36px;padding:0 12px;border-radius:var(--radius-sm);background:var(--bg);color:var(--text-sub)}.sku-search-mini input{width:100%;color:var(--text)}.sku-list-summary{font-size:12px;color:var(--text-muted)}.sku-list-container{display:flex;flex-direction:column;gap:6px}.sku-list-row{display:flex;align-items:center;gap:14px;padding:10px 14px;border-radius:var(--radius-sm);background:var(--bg);cursor:pointer;transition:background .15s ease}.sku-list-row:hover{background:var(--surface-hover)}.sku-list-row.active{background:var(--surface-active)}.sku-row-thumb{width:44px;height:44px;border-radius:8px;overflow:hidden;background:var(--surface);display:flex;align-items:center;justify-content:center;flex-shrink:0}.sku-row-img{width:100%;height:100%;object-fit:cover}.sku-row-code-fallback{font-size:11px;font-weight:700;color:var(--text-muted)}.sku-row-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}.sku-row-title{display:flex;align-items:center;gap:8px}.sku-row-code{font-size:14px;font-weight:700;color:var(--text)}.sku-row-rep{font-size:11px;color:var(--text-muted);background:var(--surface);padding:2px 6px;border-radius:4px}.sku-row-name{font-size:13px;color:var(--text-sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sku-row-meta{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--text-muted)}.sku-badge{padding:2px 7px;border-radius:4px;font-size:11px;font-weight:600}.sku-badge.pinned{background:#6366f12e;color:#a5b4fc}.sku-badge.matched{background:var(--surface);color:var(--text-sub)}.sku-badge.done{background:#10b98129;color:var(--success)}.sku-row-actions{display:flex;align-items:center;gap:8px}.sku-modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;background:#080a0ec2;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:20px}.sku-modal-panel{width:min(1360px,96vw);height:min(900px,92vh);background:var(--surface);border-radius:16px;display:flex;flex-direction:column;overflow:hidden}.sku-modal-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 20px;background:var(--surface)}.sku-modal-title-group{display:flex;align-items:center;gap:10px}.sku-modal-code{padding:4px 9px;border-radius:6px;background:var(--accent);color:#fff;font-weight:700;font-size:12px}.sku-modal-title-group h2{font-size:15px;font-weight:700}.sku-modal-tpl-tag{padding:3px 8px;border-radius:6px;background:var(--bg);color:var(--text-sub);font-size:11px}.sku-modal-close{width:32px;height:32px;border-radius:8px;background:var(--bg);color:var(--text-sub);display:inline-flex;align-items:center;justify-content:center}.sku-modal-close:hover{background:var(--surface-hover);color:var(--text)}.sku-modal-subbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 20px 12px}.sku-modal-body{flex:1;overflow-y:auto;padding:0 20px 24px;display:flex;flex-direction:column;gap:18px}.sku-action-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.sku-variant-pills{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.var-pill{padding:5px 10px;border-radius:6px;background:var(--bg);color:var(--text-sub);font-size:12px;font-weight:500}.var-pill.active{background:var(--surface-active);color:#fff;font-weight:600}.sku-action-right{display:flex;align-items:center;gap:8px}.palette-pills{display:flex;align-items:center;gap:4px;background:var(--bg);padding:4px;border-radius:var(--radius-sm)}.pal-pill{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:6px;font-size:12px;color:var(--text-sub)}.pal-pill.active{background:var(--surface-active);color:#fff;font-weight:600}.pal-swatch{width:8px;height:8px;border-radius:50%}.ai-gen-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:var(--radius-sm);background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;font-weight:700}.ai-gen-btn:hover:not(:disabled){opacity:.94}.ai-gen-btn:disabled{opacity:.6;cursor:default}.sku-facts-strip{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-radius:var(--radius-sm);background:var(--bg);color:var(--text-sub);font-size:12px}.sku-gen-badge{color:var(--success);font-weight:600}.suite-workspace{display:flex;flex-direction:column;gap:16px}.hero-grid-6{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}.hero-card{background:var(--bg);padding:6px;border-radius:var(--radius-sm)}.hero-canvas{position:relative;width:100%;aspect-ratio:1 / 1;border-radius:6px;overflow:hidden;background:#fff}.hero-img,.hero-ov{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover}.video-zoom{animation:hero-kenburns 5s ease-in-out infinite alternate}@keyframes hero-kenburns{0%{transform:scale(1)}to{transform:scale(1.06)}}.hero-tag{position:absolute;left:6px;bottom:6px;padding:3px 7px;border-radius:5px;background:#0f1115c7;color:#fff;font-size:11px;font-weight:600}.hero-hover-btn{position:absolute;top:6px;right:6px;width:26px;height:26px;border-radius:6px;background:#0f1115bf;color:#fff;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s ease}.hero-canvas:hover .hero-hover-btn{opacity:1}.detail-flow-wrap{display:grid;grid-template-columns:minmax(0,480px) 280px;gap:20px;align-items:start;justify-content:center;margin:0 auto}.detail-long-stream{display:flex;flex-direction:column;gap:8px;border-radius:var(--radius-sm);overflow:hidden}.detail-screen-item{width:100%;background:var(--bg);border-radius:var(--radius-sm);overflow:hidden}.sku-side-facts{display:flex;flex-direction:column;gap:12px;position:sticky;top:0}.side-block{background:var(--bg);padding:14px;border-radius:var(--radius-sm);display:flex;flex-direction:column;gap:8px}.side-title{font-size:12px;font-weight:700;color:var(--text-sub);margin-bottom:2px}.side-kv{display:flex;justify-content:space-between;font-size:12px}.side-kv span{color:var(--text-muted)}.side-kv strong{font-weight:600;color:var(--text)}.side-point{padding:8px 10px;border-radius:6px;background:var(--surface)}.side-point-t{font-size:12px;font-weight:700}.side-point-s{font-size:11px;color:var(--text-sub);margin-top:2px}.tab-adjust{display:grid;grid-template-columns:1fr 420px;gap:16px;align-items:start}.adjust-left{display:flex;flex-direction:column;gap:14px}.adjust-actions{display:flex;align-items:center;gap:8px}.save-toast{color:var(--success);font-size:12px;font-weight:600;margin-left:6px}.adjust-form{display:flex;flex-direction:column;gap:12px}.form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}.adjust-form label{display:flex;flex-direction:column;gap:6px}.adjust-form label span{font-size:11px;color:var(--text-muted)}.adjust-form input,.adjust-form select{height:36px;padding:0 12px;border-radius:var(--radius-sm);background:var(--bg);color:var(--text)}.svg-editor-box{display:flex;flex-direction:column;gap:8px;margin-top:4px}.svg-screen-tabs{display:flex;gap:4px;background:var(--bg);padding:4px;border-radius:var(--radius-sm)}.svg-tab{padding:5px 10px;border-radius:6px;font-size:12px;color:var(--text-sub)}.svg-tab.active{background:var(--surface-active);color:#fff;font-weight:600}.svg-textarea{width:100%;height:280px;padding:12px;border-radius:var(--radius-sm);background:var(--bg);color:#cbd5e1;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;line-height:1.5;resize:vertical}.adjust-preview{background:var(--bg);padding:12px;border-radius:var(--radius-sm)}.adjust-svg-canvas{margin-top:8px;border-radius:6px;overflow:hidden}