:root{--c-bg: #faf8fc;--c-surface: #ffffff;--c-surface-2: #faf7fd;--c-border: #ece4f3;--c-border-2: #f5f0fa;--c-text: #1c1430;--c-text-2: #5e5575;--c-text-3: #9b91ad}[data-theme=dark]{--c-bg: #14111c;--c-surface: #1d1828;--c-surface-2: #221d2e;--c-border: #2d2640;--c-border-2: #3a3252;--c-text: #f3edff;--c-text-2: #c8b3ec;--c-text-3: #8978a8}:root{--c-primary: #7c3aed;--c-primary-hover: #6d28d9;--c-primary-soft: #f3ebff;--c-primary-soft-2: #e9dcff;--c-accent: #ec4899;--c-pro: #f59e0b;--c-danger: #e11d48;--shadow-sm: 0 1px 2px rgba(0,0,0,.04);--shadow-md: 0 2px 8px rgba(0,0,0,.06);--shadow-lg: 0 8px 24px rgba(0,0,0,.08);--radius: 6px;--radius-md: 8px;--radius-lg: 12px;--header-h: 56px;--rail-w: 76px;--left-w: 320px;--right-w: 280px;--transition: .15s ease}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;padding:0;height:100vh;overflow:hidden;font-family:Pretendard,Pretendard Variable,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:var(--c-text);background:var(--c-bg);font-feature-settings:"ss01","ss02";-webkit-font-smoothing:antialiased}button{font-family:inherit}#app{display:grid;grid-template-columns:var(--rail-w) var(--left-w) 1fr var(--right-w);grid-template-rows:var(--header-h) 1fr;grid-template-areas:"toolbar toolbar toolbar toolbar" "rail    left    canvas  right";height:calc(100vh - var(--site-header-h, 48px));transition:grid-template-columns .22s ease}#app.left-collapsed{grid-template-columns:var(--rail-w) 0 1fr var(--right-w)}#app.right-collapsed{grid-template-columns:var(--rail-w) var(--left-w) 1fr 0}#app.left-collapsed.right-collapsed{grid-template-columns:var(--rail-w) 0 1fr 0}#app.left-collapsed #left-panel,#app.right-collapsed #right-panel{border-width:0;overflow:hidden}.panel-toggle{position:absolute;z-index:5;width:22px;height:36px;background:var(--c-surface);border:1px solid var(--c-border);display:grid;place-items:center;cursor:pointer;font-size:12px;color:var(--c-text-2);transition:all var(--transition);box-shadow:var(--shadow-sm)}.panel-toggle:hover{background:var(--c-primary);color:#fff;border-color:var(--c-primary)}.panel-toggle.flipped svg{transform:rotate(180deg)}.panel-toggle.left{left:var(--rail-w);top:50%;transform:translateY(-50%);margin-left:var(--left-w);border-radius:0 6px 6px 0;border-left:0;transition:margin-left .22s ease,all var(--transition)}#app.left-collapsed .panel-toggle.left{margin-left:0}.panel-toggle.right{right:var(--right-w);top:50%;transform:translateY(-50%);border-radius:6px 0 0 6px;border-right:0;transition:right .22s ease,all var(--transition)}#app.right-collapsed .panel-toggle.right{right:0}#toolbar{grid-area:toolbar;background:var(--c-surface);border-bottom:1px solid var(--c-border);display:flex;align-items:center;padding:0 16px;gap:4px;z-index:10;box-shadow:var(--shadow-sm)}.tb-logo{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:16px;color:var(--c-primary);margin-right:16px;padding:6px 10px;border-radius:var(--radius);letter-spacing:-.02em;text-decoration:none;transition:background var(--transition)}.tb-logo:hover{background:var(--c-primary-soft)}.tb-divider{width:1px;height:24px;background:var(--c-border);margin:0 8px}.tb-sep{width:1px;height:20px;background:var(--c-border);margin:0 6px}.tb-btn{background:transparent;border:0;border-radius:var(--radius);padding:6px 10px;cursor:pointer;font-size:13px;color:var(--c-text);transition:background var(--transition);display:inline-flex;align-items:center;gap:4px;height:32px}.tb-btn:hover{background:var(--c-border-2)}.tb-btn:disabled{opacity:.4;cursor:not-allowed}.tb-btn-icon{width:38px;padding:0;justify-content:center;font-size:16px;line-height:1}.tb-title-input{border:0;background:transparent;font-size:13px;color:var(--c-text);padding:6px 10px;border-radius:var(--radius);outline:none;width:200px;max-width:240px;font-family:inherit}.tb-title-input:hover,.tb-title-input:focus{background:var(--c-border-2)}.tb-size{font-size:12.5px;font-weight:600;color:var(--c-primary);padding:6px 12px;background:var(--c-primary-soft);border:1px solid transparent;border-radius:var(--radius);cursor:pointer;font-family:inherit;transition:all var(--transition);display:inline-flex;align-items:center;gap:5px}.tb-size:before{content:"📐";font-size:13px}.tb-size:hover{background:var(--c-primary);color:#fff;border-color:var(--c-primary);transform:translateY(-1px)}.tb-pill{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;padding:6px 10px;background:var(--c-surface);border:1px solid var(--c-border);color:var(--c-text-1);border-radius:7px;cursor:pointer;font-family:inherit;transition:background .12s,color .12s,border-color .12s;white-space:nowrap}.tb-pill svg{width:var(--ic-sm);height:var(--ic-sm);flex-shrink:0;stroke-width:2}.tb-pill:hover{background:var(--c-primary-soft);border-color:var(--c-primary);color:var(--c-primary)}.tb-pill-ai{color:var(--c-primary);background:linear-gradient(135deg,#f9f5ff,#fff5fc);border-color:#e2d6f5}.tb-pill-ai:hover{background:linear-gradient(135deg,#f0e5ff,#ffe5f8);border-color:var(--c-primary)}.tb-pill-present{background:#1f2937;border-color:#1f2937;color:#fff}.tb-pill-present:hover{background:#111827;border-color:#111827;color:#fff}.tb-pill-bg{position:relative;padding-right:6px}.tb-pill-bg input[type=color]{width:22px;height:22px;border:1px solid var(--c-border);border-radius:4px;padding:0;background:transparent;cursor:pointer;-moz-appearance:none;appearance:none;-webkit-appearance:none}.tb-pill-bg input[type=color]::-webkit-color-swatch-wrapper{padding:0}.tb-pill-bg input[type=color]::-webkit-color-swatch{border:0;border-radius:3px}.tb-pill .tb-pill-label{display:none!important}.tb-pill{padding:6px 8px;gap:0}.similar-fonts{background:linear-gradient(90deg,var(--c-primary-soft),transparent 90%);padding:8px 10px;border-radius:8px;border-left:3px solid var(--c-primary);margin:8px 0;display:flex;flex-wrap:wrap;gap:4px}.similar-fonts .similar-empty{font-size:12px;color:var(--c-text-2);padding:4px 0;width:100%}.similar-fonts .similar-chip,.similar-fonts .similar-font-btn{display:inline-block;padding:5px 10px;background:#fff;border:1px solid var(--c-border);border-radius:6px;font-size:12.5px;cursor:pointer;transition:all var(--transition);color:var(--c-text-1)}.similar-fonts .similar-chip:hover,.similar-fonts .similar-font-btn:hover{background:var(--c-primary);color:#fff;border-color:var(--c-primary);transform:translateY(-1px)}.tb-right{margin-left:auto;display:flex;align-items:center;gap:8px}.save-status{font-size:12px;color:var(--c-text-2);transition:color .2s}.save-indicator{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:14px;background:transparent;transition:background .2s}.save-indicator .save-dot{width:8px;height:8px;border-radius:50%;background:#cbd5e1;transition:all .2s;flex-shrink:0}.save-indicator.saving{background:#fff7ed}.save-indicator.saving .save-dot{background:#f59e0b;animation:pulse-soft 1s infinite}.save-indicator.saving .save-status{color:#b45309}.save-indicator.saved{background:#ecfdf5}.save-indicator.saved .save-dot{background:#10b981}.save-indicator.saved .save-status{color:#047857}.save-indicator.error{background:#fef2f2}.save-indicator.error .save-dot{background:#ef4444}.save-indicator.error .save-status{color:#b91c1c}.tb-btn-pro{background:linear-gradient(135deg,#7c3aed,#ec4899);color:#fff;padding:6px 14px;font-weight:600}.tb-btn-pro:hover{filter:brightness(.95)}.tb-btn-primary{background:var(--c-primary);color:#fff;padding:6px 16px;font-weight:600;border-radius:var(--radius);display:inline-flex;align-items:center;gap:6px}.tb-btn-primary:hover{background:var(--c-primary-hover)}.tb-btn-primary svg{width:var(--ic-md);height:var(--ic-md);stroke-width:2}.tb-btn-icon{padding:8px}.tb-btn-icon svg{width:var(--ic-lg);height:var(--ic-lg);stroke-width:1.9}.tb-btn svg{width:var(--ic-lg);height:var(--ic-lg);stroke-width:1.9}.tb-logo svg{flex-shrink:0}.tb-label{display:none!important}.save-status{display:none}.save-indicator{padding:6px 8px}.tb-logo{padding:6px 8px;margin-right:8px}.tb-btn{padding:8px 10px;gap:0}.tb-btn-primary{padding:8px 12px;gap:6px}.tb-bg-color{padding:4px 6px!important}.topbar.is-cramped .tb-label{display:none!important}.topbar.is-cramped .save-status{display:none}.topbar.is-cramped .tb-divider{margin:0 4px}.topbar.is-cramped .tb-sep{margin:0 2px}@media (max-width: 1180px){.tb-title-input{width:140px}.tb-divider{margin:0 4px}}@media (max-width: 900px){.tb-title-input{width:100px;max-width:120px}.tb-sep,.tb-divider{margin:0 2px}}.cat-btn-icon svg{width:var(--ic-xl);height:var(--ic-xl);stroke-width:1.8}.zoom-btn svg{width:var(--ic-md);height:var(--ic-md);stroke-width:2}.layer-icon svg,.layer-act svg{width:var(--ic-sm);height:var(--ic-sm);stroke-width:1.9}.typo-tg svg{width:var(--ic-md);height:var(--ic-md);stroke-width:2}.tb-avatar{width:32px;height:32px;border-radius:50%;background:var(--c-primary);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:600;cursor:pointer}#category-rail{grid-area:rail;background:var(--c-surface);border-right:1px solid var(--c-border);padding:12px 8px;display:flex;flex-direction:column;gap:4px}.cat-btn{width:64px;padding:12px 4px;background:transparent;border:0;border-radius:var(--radius);cursor:pointer;transition:all var(--transition);display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--c-text-2);font-size:11px;font-weight:500}.cat-btn:hover{background:var(--c-border-2)}.cat-btn.active{background:var(--c-primary-soft);color:var(--c-primary)}.cat-btn-icon{width:var(--ic-xl);height:var(--ic-xl);display:grid;place-items:center;font-size:18px;line-height:1}#left-panel{grid-area:left;background:var(--c-surface);border-right:1px solid var(--c-border);display:flex;flex-direction:column;overflow:hidden;contain:strict;will-change:width}#left-panel>.left-header,#left-panel>#asset-panel{width:var(--left-w);min-width:var(--left-w);flex-shrink:0}.left-header{padding:16px 16px 12px;border-bottom:1px solid var(--c-border-2)}.left-header h2{margin:0;font-size:15px;font-weight:600;color:var(--c-text)}.left-search{margin-top:10px;padding:8px 12px;border:1px solid var(--c-border);border-radius:var(--radius);background:var(--c-surface-2);width:100%;font-size:13px;outline:none}.left-search:focus{border-color:var(--c-primary)}#asset-panel{flex:1;overflow:hidden;display:flex;flex-direction:column}.asset-tabs{display:flex;gap:4px;padding:8px 12px;border-bottom:1px solid var(--c-border-2);flex-wrap:wrap}.asset-tab{padding:6px 10px;border:0;background:transparent;cursor:pointer;font-size:12px;border-radius:var(--radius);color:var(--c-text-2);transition:all var(--transition)}.asset-tab:hover{background:var(--c-border-2);color:var(--c-text)}.asset-tab.active{background:var(--c-primary);color:#fff}.asset-body{flex:1;overflow-y:auto;padding:12px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;align-content:start}.asset-tile{aspect-ratio:1;background:var(--c-surface-2);border-radius:var(--radius);display:grid;place-items:center;cursor:pointer;padding:10px;transition:all var(--transition);border:1px solid transparent}.asset-tile:hover{background:var(--c-primary-soft);border-color:var(--c-primary);transform:translateY(-1px)}.asset-tile img{max-width:100%;max-height:100%}.asset-row{padding:10px 12px;cursor:pointer;border-radius:var(--radius);grid-column:1 / -1;transition:background var(--transition)}.asset-row:hover{background:var(--c-border-2)}.tpl-group-header{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--c-text-2);font-weight:600;text-transform:uppercase;letter-spacing:.05em;margin:12px 0 4px;padding:4px 0;border-bottom:1px solid var(--c-border-2)}.tpl-count{background:var(--c-primary-soft);color:var(--c-primary);padding:2px 8px;border-radius:10px;font-size:10px;text-transform:none;letter-spacing:0}.asset-tpl{grid-column:span 3;cursor:pointer;padding:4px;border-radius:var(--radius);transition:all var(--transition);border:1px solid transparent}.asset-tpl[data-shape=portrait],.asset-tpl[data-shape=square]{grid-column:span 2}.asset-tpl[data-shape=landscape]{grid-column:span 3}.asset-tpl:hover{background:var(--c-primary-soft);border-color:var(--c-primary-soft-2);transform:translateY(-1px)}.tpl-frame{width:100%;border:1px solid var(--c-border);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden;background-size:cover;background-position:center}.tpl-name{font-size:12px;margin-top:6px;text-align:center;color:var(--c-text);font-weight:500}.tpl-dim{font-size:10px;text-align:center;color:var(--c-text-3);margin-top:2px;font-family:Inter,monospace}.block-card{padding:8px;border:1px solid var(--c-border);border-radius:var(--radius);background:#fff}.block-card:hover{border-color:var(--c-primary);background:var(--c-primary-soft)}.block-thumb{background:var(--c-surface-2);border-radius:6px;padding:12px;min-height:60px;display:flex;flex-direction:column;gap:4px;overflow:hidden}.block-preview{display:flex;flex-direction:column;gap:4px}.filter-chip{padding:4px 10px;border:1px solid var(--c-border);background:var(--c-surface);border-radius:14px;cursor:pointer;font-size:11px;color:var(--c-text-2);transition:all var(--transition);font-family:inherit}.filter-chip:hover{background:var(--c-primary-soft);color:var(--c-primary);border-color:var(--c-primary-soft-2)}.filter-chip.active{background:var(--c-primary);color:#fff;border-color:var(--c-primary)}.tpl-favwrap{position:relative}.tpl-fav{position:absolute;top:8px;right:8px;width:24px;height:24px;border:0;background:#ffffffd9;border-radius:50%;cursor:pointer;font-size:14px;color:#cbd5e1;display:grid;place-items:center;padding:0;z-index:1;transition:all var(--transition);opacity:0}.tpl-favwrap:hover .tpl-fav,.tpl-fav.on{opacity:1}.tpl-fav:hover{background:#fff;color:#f59e0b;transform:scale(1.1)}.tpl-fav.on{color:#f59e0b;background:#fff}mark{background:#f59e0b40;color:var(--c-primary);padding:0 2px;border-radius:3px;font-weight:600}#tpl-hover-preview{position:fixed;pointer-events:none;z-index:1000;background:#fff;border-radius:12px;box-shadow:0 12px 48px #7c3aed40;border:1px solid var(--c-border);display:none;overflow:hidden;transition:opacity .12s}#tpl-hover-preview.show{display:block}#tpl-hover-preview .preview-img{display:block;max-width:360px;max-height:360px;background-size:cover;background-position:center}#tpl-hover-preview .preview-meta{padding:8px 12px;background:var(--c-surface-2);font-size:12px;color:var(--c-text);border-top:1px solid var(--c-border)}#tpl-hover-preview .preview-dim{color:var(--c-text-3);font-size:11px;margin-top:2px;font-family:Inter,monospace}.asset-upload{grid-column:1 / -1;padding:14px;border:1px dashed var(--c-border);border-radius:var(--radius-md);cursor:pointer;text-align:center;font-size:13px;color:var(--c-text-2);margin-bottom:8px;transition:all var(--transition)}.asset-upload:hover{background:var(--c-primary-soft);color:var(--c-primary);border-color:var(--c-primary)}.asset-grid{grid-column:1 / -1;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.asset-grid-list{grid-template-columns:1fr;gap:6px}.asset-row-upload{display:grid;grid-template-columns:56px 1fr auto;gap:10px;padding:8px;background:var(--c-surface-2);border:1px solid transparent;border-radius:var(--radius);align-items:center;cursor:pointer;transition:all var(--transition)}.asset-row-upload:hover{background:var(--c-primary-soft);border-color:var(--c-primary);transform:translateY(-1px)}.asset-row-upload .aru-thumb{width:56px;height:56px;border-radius:8px;overflow:hidden;background:#fff;display:flex;align-items:center;justify-content:center;border:1px solid var(--c-border-2)}.asset-row-upload .aru-thumb img{max-width:100%;max-height:100%;object-fit:contain}.asset-row-upload .aru-meta{min-width:0;display:flex;flex-direction:column;gap:2px}.asset-row-upload .aru-name{font-size:12.5px;color:var(--c-text-1);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.asset-row-upload .aru-sub{font-size:10.5px;color:var(--c-text-3);font-variant-numeric:tabular-nums}.asset-tile-del{width:24px;height:24px;border-radius:50%;background:#ffffffeb;border:1px solid var(--c-border-2);color:var(--c-text-2);display:inline-flex;align-items:center;justify-content:center;font-size:16px;line-height:1;cursor:pointer;padding:0;flex-shrink:0;transition:all var(--transition);box-shadow:0 1px 3px #00000014}.asset-tile-del:hover{background:#dc2626;color:#fff;border-color:#dc2626;transform:scale(1.05)}.asset-tile-upload{position:relative}.asset-tile-upload .asset-tile-del{position:absolute;top:4px;right:4px;width:22px;height:22px;font-size:14px}.widget-list{grid-column:1 / -1;display:flex;flex-direction:column;gap:6px}.widget-item{padding:12px 14px;background:var(--c-surface-2);border-radius:var(--radius-md);cursor:pointer;font-size:13px;transition:all var(--transition);border:1px solid var(--c-border-2);display:flex;align-items:center;gap:10px}.widget-item:hover{background:var(--c-primary-soft);border-color:var(--c-primary);color:var(--c-primary)}.widget-icon{font-size:18px;display:inline-flex}.widget-icon svg{width:var(--ic-xl);height:var(--ic-xl);color:var(--c-primary);stroke-width:1.8}.bg-tile{aspect-ratio:1;border-radius:var(--radius);cursor:pointer;border:1px solid var(--c-border);transition:transform var(--transition);background-size:40px 40px}.bg-tile:hover{transform:scale(1.05);border-color:var(--c-primary)}.prop-row.prop-row-full{grid-template-columns:1fr}.font-picker{position:relative;width:100%;box-sizing:border-box}.font-picker-trigger{width:100%;box-sizing:border-box;padding:8px 12px;background:var(--c-surface-2);border:1px solid var(--c-border);border-radius:var(--radius);cursor:pointer;font-size:13px;color:var(--c-text);display:flex;align-items:center;justify-content:space-between;font-family:inherit;gap:6px;transition:border-color .12s}.font-picker-trigger:hover{border-color:var(--c-primary)}.font-picker-trigger.active{border-color:var(--c-primary);box-shadow:0 0 0 3px var(--c-primary-soft)}.fp-current-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}.fp-caret{color:var(--c-text-3);font-size:10px;flex-shrink:0}.font-picker-popup{position:fixed;width:280px;box-sizing:border-box;background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius);box-shadow:0 12px 32px #1c14303d;z-index:1100;display:flex;flex-direction:column;max-height:420px;overflow:hidden}.font-picker-popup[hidden]{display:none!important}.fp-search-wrap{position:relative;border-bottom:1px solid var(--c-border-2)}.fp-search-wrap:before{content:"🔍";position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:12px;opacity:.5;pointer-events:none}.fp-search{width:100%;box-sizing:border-box;padding:10px 12px 10px 34px;border:0;border-radius:0;font-size:13px;font-family:inherit;outline:none;background:transparent;color:var(--c-text)}.fp-search:focus{background:var(--c-surface-2)}.fp-list{overflow-y:auto;max-height:320px;padding:4px 0}.fp-list::-webkit-scrollbar{width:8px}.fp-list::-webkit-scrollbar-thumb{background:var(--c-border);border-radius:4px}.fp-item{display:block;width:100%;box-sizing:border-box;padding:9px 14px;border:0;background:transparent;text-align:left;cursor:pointer;font-size:14px;color:var(--c-text);transition:background .1s;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:inherit}.fp-item:hover{background:var(--c-border-2)}.fp-item.active{background:var(--c-primary-soft);color:var(--c-primary);font-weight:600}.fp-item.highlighted{background:var(--c-primary-soft)}.fp-empty{padding:16px;text-align:center;color:var(--c-text-3);font-size:13px}.translate-modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;background:#1c14308c;display:grid;place-items:center;animation:fadeIn .15s ease-out}.translate-modal-card{background:var(--c-surface);border-radius:14px;width:min(540px,92vw);max-height:86vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 20px 60px #1c143040}.translate-modal-head{padding:16px 20px;border-bottom:1px solid var(--c-border-2);display:flex;justify-content:space-between;align-items:center}.translate-modal-head h3{margin:0;font-size:16px;font-weight:700}.translate-modal-close{background:transparent;border:0;cursor:pointer;font-size:22px;color:var(--c-text-3);width:32px;height:32px;border-radius:6px}.translate-modal-close:hover{background:var(--c-border-2);color:var(--c-text)}.translate-modal-body{padding:20px;overflow-y:auto}.translate-info{font-size:13px;color:var(--c-text);margin-bottom:8px;line-height:1.5}.translate-info-sub{font-size:12px;color:var(--c-text-2);margin-bottom:16px;line-height:1.45}.translate-langs{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.translate-lang{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:10px;background:var(--c-surface-2);border:1px solid var(--c-border);cursor:pointer;font-family:inherit;font-size:13px;text-align:left;transition:all .12s}.translate-lang:hover:not(:disabled){background:var(--c-primary-soft);border-color:var(--c-primary);color:var(--c-primary);transform:translateY(-1px)}.translate-lang:disabled{opacity:.45;cursor:wait}.translate-lang .flag{font-size:22px;line-height:1}.translate-lang .lname{flex:1;font-weight:600}.translate-lang .lcode{font-size:11px;color:var(--c-text-3);font-family:Inter,monospace}.translate-status{margin-top:16px;padding:12px 14px;border-radius:8px;font-size:13px;line-height:1.5}.translate-status.loading{background:var(--c-primary-soft);color:var(--c-primary)}.translate-status.success{background:#ecfdf5;color:#16a34a}.translate-status.error{background:#fef2f2;color:var(--c-danger)}.similar-fonts{display:flex;flex-wrap:wrap;gap:4px;padding:2px 0 6px}.similar-chip{font-size:12px;padding:5px 10px;border-radius:999px;border:1px solid var(--c-border);background:var(--c-surface-2);color:var(--c-text);cursor:pointer;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:all .12s}.similar-chip:hover{background:var(--c-primary-soft);border-color:var(--c-primary);color:var(--c-primary)}.similar-empty{font-size:11px;color:var(--c-text-3)}.fp-section-label{padding:8px 14px 4px;font-size:10px;color:var(--c-text-3);text-transform:uppercase;letter-spacing:.05em;font-weight:600;background:var(--c-surface-2);border-top:1px solid var(--c-border-2)}.typo-select{width:100%;padding:8px 10px;border:1px solid var(--c-border);border-radius:var(--radius);font-size:13px;outline:none;background:var(--c-surface);font-family:inherit;cursor:pointer}.typo-select:focus{border-color:var(--c-primary)}.style-presets{display:grid;grid-template-columns:repeat(2,1fr);gap:4px;margin-bottom:8px}.style-preset{padding:8px 10px;border:1px solid var(--c-border);background:var(--c-surface-2);border-radius:var(--radius);cursor:pointer;transition:all var(--transition);text-align:center;color:var(--c-text)}.style-preset:hover{background:var(--c-primary-soft);border-color:var(--c-primary);color:var(--c-primary)}.typo-size-row{display:flex;gap:4px;align-items:center;margin-bottom:6px}.typo-size-btn{width:28px;height:32px;border:1px solid var(--c-border);background:var(--c-surface);border-radius:var(--radius);cursor:pointer;font-size:16px;display:grid;place-items:center;color:var(--c-text);transition:all var(--transition)}.typo-size-btn:hover{background:var(--c-border-2)}.typo-size-input{flex:1;padding:6px 8px;height:32px;border:1px solid var(--c-border);border-radius:var(--radius);font-size:13px;outline:none;text-align:center;font-family:inherit}.typo-size-input:focus{border-color:var(--c-primary)}.typo-weight{width:90px;height:32px;padding:6px 8px;font-size:12px}.typo-size-presets{display:flex;gap:3px;flex-wrap:wrap;margin-bottom:10px}.typo-size-pre{padding:4px 8px;border:1px solid var(--c-border);background:var(--c-surface-2);border-radius:var(--radius);cursor:pointer;font-size:11px;color:var(--c-text-2);transition:all var(--transition)}.typo-size-pre:hover{background:var(--c-primary);color:#fff;border-color:var(--c-primary)}.typo-toggle-row{display:flex;gap:3px;margin-bottom:8px;align-items:center}.typo-tg{width:32px;height:32px;border:1px solid var(--c-border);background:var(--c-surface);border-radius:var(--radius);cursor:pointer;font-size:13px;display:grid;place-items:center;color:var(--c-text);transition:all var(--transition)}.typo-tg:hover{background:var(--c-border-2)}.typo-tg.active{background:var(--c-primary);color:#fff;border-color:var(--c-primary)}.typo-val{font-size:11px;color:var(--c-text-2);min-width:30px;text-align:right}.color-swatches{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;margin-bottom:8px}.swatch{aspect-ratio:1;border:1px solid var(--c-border);border-radius:4px;cursor:pointer;padding:0;transition:transform var(--transition)}.swatch:hover{transform:scale(1.15);border-color:var(--c-primary);box-shadow:var(--shadow-sm)}.bk-head{display:flex;align-items:center;justify-content:space-between}.bk-add{border:1px solid var(--c-border);background:#fff;border-radius:6px;width:22px;height:22px;cursor:pointer;font-size:14px;line-height:1;color:var(--c-primary);padding:0}.bk-add:hover{background:var(--c-primary);color:#fff;border-color:var(--c-primary)}.bk-swatch-wrap{position:relative;aspect-ratio:1}.bk-swatch-wrap .swatch{width:100%;height:100%}.bk-del,.bk-save{position:absolute;top:-6px;right:-6px;width:16px;height:16px;border-radius:50%;border:1px solid var(--c-border);background:#fff;cursor:pointer;padding:0;font-size:10px;line-height:1;display:none;align-items:center;justify-content:center;box-shadow:var(--shadow-sm)}.bk-swatch-wrap:hover .bk-del,.bk-swatch-wrap:hover .bk-save{display:flex}.bk-del{color:#ef4444}.bk-del:hover{background:#ef4444;color:#fff;border-color:#ef4444}.bk-save{color:var(--c-primary)}.bk-save:hover{background:var(--c-primary);color:#fff;border-color:var(--c-primary)}.toast-host{position:fixed;bottom:24px;right:24px;z-index:1100;display:flex;flex-direction:column;gap:8px;pointer-events:none}.toast-msg{padding:12px 18px;background:var(--c-text);color:#fff;border-radius:8px;font-size:13px;font-weight:500;box-shadow:0 8px 24px #0000002e;opacity:0;transform:translate(20px);transition:all .25s;pointer-events:auto;max-width:320px}.toast-msg.show{opacity:1;transform:translate(0)}.toast-info{background:#1c1430}.toast-success{background:#10b981}.toast-error{background:#ef4444}.toast-warning{background:#f59e0b;color:#fff}.qs-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#1c143073;z-index:1000;display:grid;place-items:start center;padding-top:12vh;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.qs-card{background:#fff;width:min(560px,90vw);border-radius:12px;box-shadow:0 20px 60px #00000040;overflow:hidden}.qs-input{width:100%;padding:16px 20px;font-size:15px;border:0;outline:0;background:transparent;border-bottom:1px solid var(--c-border-2);font-family:inherit}.qs-list{max-height:60vh;overflow-y:auto;padding:6px}.qs-section{font-size:11px;color:var(--c-text-3);text-transform:uppercase;font-weight:700;padding:8px 12px 4px;letter-spacing:.5px}.qs-item{display:flex;align-items:center;justify-content:space-between;width:100%;padding:10px 12px;border:0;background:transparent;cursor:pointer;font-size:14px;color:var(--c-text);border-radius:6px;text-align:left;font-family:inherit}.qs-item:hover,.qs-item.active{background:var(--c-primary-soft);color:var(--c-primary)}.qs-meta{font-size:11px;color:var(--c-text-3);font-family:Inter,monospace}.qs-empty{padding:20px;text-align:center;color:var(--c-text-3);font-size:13px}.grid-overlay{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:5;background-image:linear-gradient(to right,rgba(124,58,237,.1) 1px,transparent 1px),linear-gradient(to bottom,rgba(124,58,237,.1) 1px,transparent 1px);background-size:28px 28px;background-position:0 0}.canvas-fab{position:absolute;top:12px;z-index:6;width:32px;height:32px;border-radius:6px;border:1px solid var(--c-border);background:#fff;cursor:pointer;font-size:16px;line-height:1;padding:0;display:grid;place-items:center;color:var(--c-text-2);box-shadow:var(--shadow-sm);transition:all .12s}.canvas-fab[hidden]{display:none}.canvas-fab:hover,.canvas-fab.active{background:var(--c-primary);color:#fff;border-color:var(--c-primary)}.grid-toggle{right:12px}#preview-original-btn{right:54px}#compare-original-btn{right:96px}#mark-issue-btn{right:138px}#mark-ok-btn{right:180px}#mark-ok-btn.is-marked{background:#2eb85c;color:#fff;border-color:#2eb85c}#mark-issue-btn.is-marked{background:#f59f0a;color:#fff;border-color:#f59f0a}.compare-modal-card{max-width:min(96vw,1200px)!important}.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:18px;background:var(--c-surface-2);overflow:auto}@media (max-width: 720px){.compare-grid{grid-template-columns:1fr}}.compare-pane{background:var(--c-surface);border-radius:8px;padding:12px;display:flex;flex-direction:column;gap:8px;border:1px solid var(--c-border-2)}.compare-pane h4{margin:0;font-size:12px;font-weight:700;color:var(--c-text);display:flex;align-items:center;gap:8px}.compare-pane h4 .pane-tag{font-size:10px;padding:2px 8px;border-radius:10px;font-weight:700}.compare-pane.original h4 .pane-tag{background:var(--c-primary-soft);color:var(--c-primary)}.compare-pane.current h4 .pane-tag{background:#fef3c7;color:#b45309}.compare-pane img,.compare-pane canvas{display:block;width:100%;height:auto;max-height:64vh;object-fit:contain;border-radius:6px;background:#fff;box-shadow:0 2px 8px #0000000f}.compare-pane .pane-caption{font-size:11px;color:var(--c-text-3);text-align:center}.preview-modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;background:#0f091ea6;display:grid;place-items:center;animation:fadeIn .15s ease;padding:24px}.preview-modal[hidden]{display:none}.preview-modal-card{background:var(--c-surface);border-radius:12px;max-width:min(92vw,720px);max-height:92vh;display:flex;flex-direction:column;box-shadow:0 24px 64px #0006;overflow:hidden}.preview-modal-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--c-border-2)}.preview-modal-head h3{margin:0;font-size:14px;font-weight:600;color:var(--c-text);display:flex;align-items:center;gap:8px}.preview-modal-head .badge{font-size:10px;padding:2px 8px;border-radius:10px;background:var(--c-primary-soft);color:var(--c-primary);font-weight:700}.preview-modal-close{width:36px;height:36px;border:0;background:transparent;border-radius:8px;cursor:pointer;color:var(--c-text-2);display:grid;place-items:center}.preview-modal-close:hover{background:var(--c-border-2);color:var(--c-text)}.preview-modal-close svg{width:var(--ic-md);height:var(--ic-md);stroke-width:2}.preview-modal-body{padding:18px;overflow:auto;background:var(--c-surface-2);display:grid;place-items:center}.preview-modal-img{display:block;max-width:100%;max-height:70vh;border-radius:8px;background:#fff;box-shadow:0 4px 18px #0000001f}.preview-modal-meta{padding:10px 18px;font-size:11px;color:var(--c-text-3);border-top:1px solid var(--c-border-2);background:var(--c-surface);display:flex;justify-content:space-between;gap:12px}.preview-modal-loading,.preview-modal-error{font-size:13px;color:var(--c-text-2);padding:40px 0;text-align:center}.preview-modal-error{color:#b91c1c}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.ruler-h,.ruler-v{position:absolute;pointer-events:none;z-index:6;background-color:#fffffff2;background-image:linear-gradient(to right,rgba(124,58,237,.45) 1px,transparent 1px),linear-gradient(to right,rgba(124,58,237,.18) 1px,transparent 1px);background-size:100px 100%,20px 100%;border-bottom:1px solid rgba(124,58,237,.25);font-size:9px;color:var(--c-text-3)}.ruler-h{top:0;left:18px;right:0;height:18px}.ruler-v{top:18px;left:0;bottom:0;width:18px;background-image:linear-gradient(to bottom,rgba(124,58,237,.45) 1px,transparent 1px),linear-gradient(to bottom,rgba(124,58,237,.18) 1px,transparent 1px);background-size:100% 100px,100% 20px;border-right:1px solid rgba(124,58,237,.25)}.ruler-corner{position:absolute;top:0;left:0;width:18px;height:18px;background:#7c3aed1a;z-index:7;pointer-events:none}.canvas-hint{position:absolute;pointer-events:none;z-index:4;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;color:var(--c-text-3);font-size:14px;opacity:.55;transition:opacity .25s}.canvas-hint .big{font-size:36px;margin-bottom:8px;opacity:.6}.canvas-hint kbd{background:#7c3aed1a;padding:2px 6px;border-radius:4px;font-family:Inter,monospace;font-size:11px;color:var(--c-primary);border:1px solid rgba(124,58,237,.2)}.canvas-hint.hidden{opacity:0}.size-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:6px}.size-tile{padding:8px;background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius);cursor:pointer;transition:all var(--transition);text-align:center;font-family:inherit}.size-tile:hover{background:var(--c-primary-soft);border-color:var(--c-primary)}.size-frame{background:var(--c-border-2);border:1px solid var(--c-border);border-radius:4px;max-height:60px;margin:0 auto 6px;width:auto;max-width:100%}.size-name{font-size:12px;color:var(--c-text);font-weight:500}.size-dim{font-size:10px;color:var(--c-text-3);margin-top:2px}#canvas-area{grid-area:canvas;position:relative;display:grid;place-items:center;overflow:auto;padding:64px 32px 80px;background:var(--c-bg);contain:layout}#design-canvas{background:#fff;box-shadow:var(--shadow-lg);will-change:transform}.canvas-container,.upper-canvas,.lower-canvas,#design-canvas{transition:opacity .25s ease}#canvas-area.cv-loading .canvas-container,#canvas-area.cv-loading .upper-canvas,#canvas-area.cv-loading .lower-canvas,#canvas-area.cv-loading #design-canvas{opacity:0}#canvas-area .cv-spinner{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:none;align-items:center;gap:8px;background:var(--c-surface);padding:10px 16px;border-radius:999px;border:1px solid var(--c-border);font-size:13px;color:var(--c-text-2);box-shadow:var(--shadow-md);z-index:4;pointer-events:none}#canvas-area.cv-loading .cv-spinner{display:inline-flex}.cv-spinner:before{content:"";width:14px;height:14px;border-radius:50%;border:2px solid var(--c-border);border-top-color:var(--c-primary);animation:cv-spin .7s linear infinite}@keyframes cv-spin{to{transform:rotate(360deg)}}#canvas-area.drop-active{background:var(--c-primary-soft);outline:2px dashed var(--c-primary);outline-offset:-8px}.dragging-source{opacity:.5}.asset-tile[draggable=true]{cursor:grab}.asset-tile[draggable=true]:active{cursor:grabbing}#zoom-control{position:absolute;right:16px;bottom:16px;background:var(--c-surface);border:1px solid var(--c-border);border-radius:8px;display:flex;align-items:center;gap:2px;padding:4px;box-shadow:var(--shadow-md);z-index:5}.zoom-btn{width:28px;height:28px;border:0;background:transparent;border-radius:4px;cursor:pointer;font-size:14px;color:var(--c-text-2);display:grid;place-items:center;transition:all var(--transition)}.zoom-btn:hover{background:var(--c-border-2);color:var(--c-text)}.zoom-display{min-width:56px;text-align:center;font-size:12px;color:var(--c-text);font-weight:500;padding:0 4px}.zoom-select{margin-left:4px;padding:4px 8px;height:28px;border:0;background:transparent;border-left:1px solid var(--c-border);cursor:pointer;font-size:12px;outline:none;font-family:inherit;color:var(--c-text)}#right-panel{grid-area:right;background:var(--c-surface);border-left:1px solid var(--c-border);display:flex;flex-direction:column;overflow:hidden;contain:strict;will-change:width}#right-panel>#pages-panel,#right-panel>.right-tabs,#right-panel>.rt-panel{width:var(--right-w);min-width:var(--right-w);flex-shrink:0}#pages-panel{padding:8px 10px;overflow-x:auto;overflow-y:hidden;border-bottom:1px solid var(--c-border-2);flex-shrink:0;white-space:nowrap;background:var(--c-surface-2)}#pages-panel::-webkit-scrollbar{height:6px}#pages-panel::-webkit-scrollbar-thumb{background:var(--c-border);border-radius:3px}.right-tabs{display:flex;flex-shrink:0;border-bottom:1px solid var(--c-border-2);background:var(--c-surface)}.rt-tab{flex:1;padding:10px 8px;border:0;background:transparent;cursor:pointer;font-size:13px;font-weight:500;color:var(--c-text-2);font-family:inherit;border-bottom:2px solid transparent;transition:all .12s;display:inline-flex;align-items:center;justify-content:center;gap:4px}.rt-tab:hover{color:var(--c-text);background:var(--c-border-2)}.rt-tab.active{color:var(--c-primary);font-weight:700;border-bottom-color:var(--c-primary);background:var(--c-surface)}.rt-count{font-size:10px;padding:1px 6px;border-radius:8px;background:var(--c-border-2);color:var(--c-text-3);font-family:Inter,monospace;font-weight:600;min-width:18px;text-align:center}.rt-tab.active .rt-count{background:var(--c-primary-soft);color:var(--c-primary)}.rt-panel{flex:1;overflow:auto}.rt-panel[hidden]{display:none}#property-panel{padding:14px 12px}#layers-panel{padding:0}.page-thumb{display:inline-block;vertical-align:middle;width:60px;height:60px;background:#fff;border:2px solid var(--c-border);border-radius:var(--radius);margin:0 6px 0 0;cursor:pointer;font-size:11px;color:var(--c-text-2);position:relative;transition:all var(--transition);box-shadow:var(--shadow-sm);overflow:hidden;background-position:center;background-size:cover}.page-num{position:absolute;top:4px;left:6px;background:#ffffffe6;color:var(--c-text);padding:1px 6px;border-radius:8px;font-size:10px;font-weight:700;z-index:1}.page-thumb:hover{border-color:var(--c-primary)}.page-thumb.active{border-color:var(--c-primary);box-shadow:0 0 0 3px var(--c-primary-soft)}.page-thumb.dragging{opacity:.4}.page-thumb.drag-over{box-shadow:0 0 0 3px var(--c-primary);transform:scale(1.05)}.page-thumb .actions{position:absolute;top:4px;right:4px;display:none;gap:2px}.page-thumb:hover .actions{display:flex}.page-thumb .actions button{width:20px;height:20px;border:0;background:#fffffff2;border-radius:4px;cursor:pointer;font-size:11px;padding:0;box-shadow:var(--shadow-sm)}.page-thumb .actions button:hover{background:var(--c-primary);color:#fff}.page-add{display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;width:60px;height:60px;padding:0;background:transparent;border:1px dashed var(--c-border);border-radius:var(--radius);cursor:pointer;font-size:22px;line-height:1;color:var(--c-text-2);transition:all var(--transition);flex-shrink:0}.page-add:hover{background:var(--c-primary-soft);border-color:var(--c-primary);color:var(--c-primary)}.pages-header{display:inline-flex;vertical-align:middle;align-items:center;gap:6px;margin-right:10px;padding:2px 6px;font-size:11px;color:var(--c-text-3)}.layers-header{font-size:12px;color:var(--c-text-1);font-weight:700;letter-spacing:.02em;padding:10px 12px 6px;display:flex;align-items:center;gap:8px}.layers-header .layers-count{display:inline-flex;align-items:center;justify-content:center;min-width:22px;padding:0 6px;height:18px;background:var(--c-primary-soft);color:var(--c-primary);border-radius:9px;font-size:11px;font-weight:700}.layers-toolbar{display:flex;flex-direction:column;gap:8px;padding:4px 12px 8px;border-bottom:1px solid var(--c-border-2)}.layers-search-wrap{position:relative}.layers-search-icon{position:absolute;left:9px;top:50%;transform:translateY(-50%);width:var(--ic-sm);height:var(--ic-sm);color:var(--c-text-3);pointer-events:none;display:inline-flex;align-items:center}.layers-search-icon svg{width:var(--ic-sm);height:var(--ic-sm);stroke-width:2}.layers-search{width:100%;box-sizing:border-box;padding:6px 8px 6px 30px;border:1px solid var(--c-border);border-radius:6px;font-size:12.5px;font-family:inherit;background:var(--c-surface-2);outline:none;transition:border-color .12s,background .12s}.layers-search:focus{border-color:var(--c-primary);background:#fff}.layers-filters{display:flex;gap:4px}.layer-filter{padding:4px 10px;border:1px solid var(--c-border);border-radius:12px;background:transparent;color:var(--c-text-2);cursor:pointer;font-family:inherit;font-size:11px;font-weight:600;transition:all .12s}.layer-filter:hover{background:var(--c-border-2);color:var(--c-text-1)}.layer-filter.active{background:var(--c-primary);border-color:var(--c-primary);color:#fff}.layers-list{display:flex;flex-direction:column;gap:1px;padding:4px 6px 12px}.layer-row{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:6px;cursor:pointer;transition:background .12s,border-color .12s;font-size:12.5px;color:var(--c-text-1);border:1px solid transparent;position:relative}.layer-row .layer-grip{width:var(--ic-sm);height:var(--ic-sm);color:var(--c-text-3);opacity:0;transition:opacity .12s;cursor:grab;flex-shrink:0;display:inline-flex;align-items:center}.layer-row:hover .layer-grip{opacity:.6}.layer-row .layer-grip:active{cursor:grabbing}.layer-row .layer-grip svg{width:var(--ic-sm);height:var(--ic-sm)}.layer-row .layer-icon{width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;background:var(--c-border-2);border-radius:6px;flex-shrink:0}.layer-row .layer-icon svg{width:var(--ic-sm);height:var(--ic-sm);stroke-width:1.9}.layer-kind-text .layer-icon{background:#e8effc;color:#2258c3}.layer-kind-image .layer-icon{background:#e0f5eb;color:#2d8659}.layer-kind-shape .layer-icon{background:#f1ebfa;color:#7139c6}.layer-kind-group .layer-icon{background:#fbebda;color:#c37322}.layer-row .layer-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}.layer-row .layer-act{width:30px;height:30px;border:0;background:transparent;color:var(--c-text-3);border-radius:6px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;opacity:0;transition:opacity .12s,background .12s,color .12s;flex-shrink:0}.layer-row .layer-act svg{width:var(--ic-sm);height:var(--ic-sm);stroke-width:1.9}.layer-row:hover .layer-act,.layer-row.active .layer-act,.layer-row.is-hidden .layer-act,.layer-row.locked .layer-act{opacity:1}.layer-row .layer-act:hover{background:var(--c-border-2);color:var(--c-text-1)}.layer-row:hover{background:var(--c-surface-2)}.layer-row.active{background:var(--c-primary-soft);border-color:var(--c-primary);color:var(--c-primary);font-weight:700;box-shadow:inset 3px 0 0 0 var(--c-primary),0 1px 3px #7c3aed2e}.layer-row.active .layer-icon{background:#fff;color:var(--c-primary)}.layer-row.active .layer-label{color:var(--c-primary)}.layer-row.dragging{opacity:.5}.layer-row.locked .layer-label{color:var(--c-text-3)}.layer-row.locked .layer-act[data-act=lock]{color:var(--c-primary)}.layer-row.is-hidden{opacity:.55}.layer-row.is-hidden .layer-act[data-act=visibility]{color:#d14747}.layer-row.locked:before{content:"🔒";position:absolute;left:4px;top:50%;transform:translateY(-50%);font-size:9px;opacity:.7}.layer-row.hidden .layer-label,.layer-row.hidden .layer-icon{opacity:.4}.layer-row{position:relative}.layer-row.drag-over{border-color:var(--c-primary);border-style:dashed}.layer-icon{width:22px;height:22px;display:grid;place-items:center;font-size:13px;flex-shrink:0;background:var(--c-surface-2);border-radius:4px}.layer-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.layer-name-input{flex:1;padding:2px 4px;font-size:12px;border:1px solid var(--c-primary);border-radius:3px;outline:none;font-family:inherit}.layer-act{width:22px;height:22px;border:0;background:transparent;cursor:pointer;border-radius:3px;font-size:12px;opacity:.5;display:grid;place-items:center;transition:all var(--transition)}.layer-row:hover .layer-act{opacity:1}.layer-act:hover{background:var(--c-border-2);opacity:1}.prop-empty{color:var(--c-text-3);font-size:13px;text-align:center;padding:20px 0}.prop-tabs{display:flex;gap:0;margin-bottom:16px;border-bottom:1px solid var(--c-border-2)}.prop-tab{padding:8px 12px;border:0;background:transparent;cursor:pointer;font-size:12px;border-bottom:2px solid transparent;color:var(--c-text-2);font-weight:500;transition:all var(--transition)}.prop-tab:hover{color:var(--c-text)}.prop-tab.active{border-color:var(--c-primary);color:var(--c-primary)}.prop-h4{font-size:11px;color:var(--c-text-2);margin:0 0 10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}.prop-btn{width:100%;padding:7px 10px;border:1px solid var(--c-border);background:var(--c-surface-2);border-radius:var(--radius);font-size:12px;color:var(--c-text);cursor:pointer;font-family:inherit;transition:all .12s}.prop-btn:hover{background:var(--c-primary-soft);border-color:var(--c-primary);color:var(--c-primary)}.prop-tf-btn{padding:5px 10px;min-width:32px;background:#fff;border:1px solid var(--c-border);border-radius:6px;cursor:pointer;font-size:12px;color:var(--c-text-1);font-family:inherit;transition:all .12s}.prop-tf-btn:hover{background:var(--c-primary-soft);border-color:var(--c-primary);color:var(--c-primary)}.prop-section{font-size:11px;color:var(--c-text-2);margin:14px 0 6px;font-weight:600;text-transform:uppercase;letter-spacing:.05em}.prop-section.collapsible{display:flex;align-items:center;gap:8px;padding:9px 10px;margin:6px -4px 0;cursor:pointer;-webkit-user-select:none;user-select:none;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--c-text-2);text-transform:none;letter-spacing:.01em;font-size:12.5px;font-weight:600;transition:background .15s ease,color .15s ease,border-color .15s ease}.prop-section.collapsible:first-child{margin-top:0}.prop-section.collapsible:hover{background:#f6f6f6;color:var(--c-text-1)}.prop-section.collapsible[data-open="1"]{background:var(--c-primary-soft, hsl(264 100% 97%));color:var(--c-primary, #6d28d9);border-color:#ddd1f0}.prop-section.collapsible .ps-icon{width:var(--ic-md);height:var(--ic-md);flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;color:inherit}.prop-section.collapsible .ps-icon svg{width:var(--ic-md);height:var(--ic-md);stroke-width:1.9}.prop-section.collapsible .ps-label{flex:1;line-height:1}.prop-section.collapsible .ps-caret{width:var(--ic-sm);height:var(--ic-sm);flex-shrink:0;color:var(--c-text-3);transition:transform .2s ease,color .15s ease}.prop-section.collapsible[data-open="1"] .ps-caret{color:var(--c-primary);transform:rotate(180deg)}.prop-section.collapsible[data-open="0"] .ps-caret{transform:rotate(0)}.prop-block{margin:4px 4px 8px;padding:8px 4px 4px;animation:prop-fade .18s ease}@keyframes prop-fade{0%{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:translateY(0)}}.prop-panel-toolbar{display:flex;align-items:center;gap:4px;padding:6px 4px 8px;margin:0 -4px 6px;border-bottom:1px solid var(--c-border)}.prop-panel-toolbar button{display:inline-flex;align-items:center;gap:4px;padding:5px 8px;font-size:11px;font-weight:600;color:var(--c-text-2);background:transparent;border:1px solid transparent;border-radius:6px;cursor:pointer;transition:background .12s,color .12s,border-color .12s}.prop-panel-toolbar button:hover{background:#f6f6f6;color:var(--c-text-1);border-color:var(--c-border)}.prop-panel-toolbar button svg{width:var(--ic-sm);height:var(--ic-sm);stroke-width:2}.prop-row{display:grid;grid-template-columns:60px 1fr;gap:8px;align-items:center;margin-bottom:8px;font-size:12px}.prop-row label{color:var(--c-text-2)}.prop-row input[type=number],.prop-row input[type=text],.prop-row input[type=color]{width:100%;padding:6px 8px;border:1px solid var(--c-border);border-radius:var(--radius);font-size:12px;outline:none;font-family:inherit}.prop-row input[type=number]:focus,.prop-row input[type=text]:focus{border-color:var(--c-primary)}.prop-row input[type=color]{height:30px;cursor:pointer;padding:2px}.prop-row input[type=range]{width:100%}.grad-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:8px}.grad-grid-compact{grid-template-columns:repeat(7,1fr)}.grad-tile{aspect-ratio:1;border-radius:var(--radius);cursor:pointer;transition:all var(--transition);border:0;padding:0}.grad-tile:hover{transform:scale(1.15);box-shadow:var(--shadow-sm);z-index:2}.prop-mini-btn{flex:1;padding:5px 8px;font-size:11px;border:1px solid var(--c-border);background:var(--c-surface-2);border-radius:var(--radius);cursor:pointer;font-family:inherit;transition:all var(--transition)}.prop-mini-btn:hover{background:var(--c-primary-soft);color:var(--c-primary);border-color:var(--c-primary)}.prop-mini-btn.active{background:var(--c-primary);color:#fff;border-color:var(--c-primary)}.shadow-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 8px;margin-top:4px}.shadow-grid .prop-row{margin-bottom:0}.shadow-presets,.filter-presets{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-bottom:8px}.shadow-pre,.filter-pre{padding:6px 8px;font-size:11px;border:1px solid var(--c-border);background:var(--c-surface-2);border-radius:var(--radius);cursor:pointer;text-transform:capitalize;transition:all var(--transition)}.shadow-pre:hover,.filter-pre:hover{background:var(--c-primary-soft);color:var(--c-primary);border-color:var(--c-primary)}#widget-modal-root{position:fixed;top:0;right:0;bottom:0;left:0;display:none;z-index:1000}#widget-modal-root.open{display:block}.modal-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;background:#16181d80;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.modal-card{position:relative;max-width:480px;margin:80px auto;background:var(--c-surface);border-radius:var(--radius-lg);padding:28px;box-shadow:var(--shadow-lg)}.modal-card h3{margin:0 0 20px;font-size:18px;font-weight:600;color:var(--c-text)}.modal-card label{display:block;font-size:12px;color:var(--c-text-2);margin:14px 0 4px;font-weight:500}.modal-card input,.modal-card textarea{width:100%;padding:10px 12px;border:1px solid var(--c-border);border-radius:var(--radius);font-size:13px;outline:none;box-sizing:border-box;font-family:inherit;transition:border var(--transition)}.modal-card input:focus,.modal-card textarea:focus{border-color:var(--c-primary)}.modal-card textarea{font-family:ui-monospace,monospace}.modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:24px}.btn-primary{padding:10px 20px;background:var(--c-primary);color:#fff;border:0;border-radius:var(--radius);cursor:pointer;font-size:13px;font-weight:500;transition:background var(--transition)}.btn-primary:hover{background:var(--c-primary-hover)}.btn-secondary{padding:10px 20px;background:var(--c-surface);color:var(--c-text);border:1px solid var(--c-border);border-radius:var(--radius);cursor:pointer;font-size:13px;transition:background var(--transition)}.btn-secondary:hover{background:var(--c-border-2)}.tb-dropdown{position:relative}.tb-menu{position:absolute;top:100%;right:0;background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);z-index:100;min-width:200px;padding:6px;margin-top:6px}.tb-menu button{display:block;width:100%;text-align:left;padding:8px 12px;border:0;background:transparent;cursor:pointer;font-size:13px;border-radius:var(--radius);color:var(--c-text);transition:background var(--transition)}.tb-menu button:hover{background:var(--c-border-2)}.tb-menu-sep{height:1px;background:var(--c-border);margin:4px 0}.tb-menu-import{display:block;padding:8px 12px;font-size:13px;border-radius:var(--radius);cursor:pointer;color:var(--c-primary);font-weight:600;transition:background var(--transition)}.tb-menu-import:hover{background:var(--c-primary-soft)}#hotkey-modal-root{position:fixed;top:0;right:0;bottom:0;left:0;display:none;z-index:1500}#hotkey-modal-root.open{display:block}.hotkey-card{max-width:720px!important;max-height:80vh;overflow-y:auto}@media (max-width: 600px){.hotkey-grid{grid-template-columns:1fr}}.hotkey-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:8px}.hotkey-group h4{font-size:12px;color:var(--c-text-2);text-transform:uppercase;letter-spacing:.05em;margin:0 0 8px;font-weight:600}.hotkey-group ul{list-style:none;padding:0;margin:0}.hotkey-group li{display:flex;justify-content:space-between;align-items:center;padding:6px 0;font-size:13px;border-bottom:1px solid var(--c-border-2)}.kbd{font-family:Inter,monospace;font-size:11px;background:var(--c-surface-2);border:1px solid var(--c-border);border-radius:4px;padding:2px 6px;color:var(--c-text)}#context-menu{position:fixed;z-index:2000;background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);padding:4px;min-width:220px}.cm-item{display:flex;justify-content:space-between;align-items:center;width:100%;padding:8px 12px;border:0;background:transparent;cursor:pointer;font-size:13px;border-radius:var(--radius);color:var(--c-text);font-family:inherit;text-align:left;transition:background var(--transition)}.cm-item:hover{background:var(--c-primary-soft);color:var(--c-primary)}.cm-item.danger{color:var(--c-danger)}.cm-item.danger:hover{background:#fee2e2;color:var(--c-danger)}.cm-shortcut{font-size:11px;color:var(--c-text-3);font-family:Inter,monospace;padding-left:16px}.cm-sep{height:1px;background:var(--c-border);margin:4px 0}@keyframes fade-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes scale-in{0%{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}@keyframes slide-in-right{0%{opacity:0;transform:translate(8px)}to{opacity:1;transform:translate(0)}}@keyframes pulse-soft{0%,to{opacity:1}50%{opacity:.6}}.asset-body{animation:fade-in .18s ease}.tpl-group-header,.asset-tpl,.asset-tile,.widget-item,.asset-row{animation:fade-in .22s ease both}.asset-tpl:nth-child(2){animation-delay:.02s}.asset-tpl:nth-child(3){animation-delay:.04s}.asset-tpl:nth-child(4){animation-delay:.06s}.asset-tpl:nth-child(5){animation-delay:.08s}.cat-btn.active{animation:scale-in .18s ease}.cat-btn,.asset-tile,.asset-tpl,.widget-item{transition:all .18s cubic-bezier(.4,0,.2,1)}#widget-modal-root.open .modal-card,#hotkey-modal-root.open .hotkey-card{animation:scale-in .22s cubic-bezier(.34,1.56,.64,1)}#widget-modal-root.open .modal-backdrop,#hotkey-modal-root.open .modal-backdrop{animation:fade-in .18s ease}#context-menu{animation:scale-in .12s ease;transform-origin:top left}.page-thumb{animation:slide-in-right .2s ease both}.page-thumb:nth-child(2){animation-delay:.04s}.page-thumb:nth-child(3){animation-delay:.08s}.layer-row{animation:fade-in .18s ease both}.save-status{transition:color .2s ease}.save-status:not(:empty){animation:fade-in .2s ease}#zoom-control{animation:fade-in .3s ease .1s both}*::-webkit-scrollbar{width:8px;height:8px}*::-webkit-scrollbar-track{background:transparent}*::-webkit-scrollbar-thumb{background:var(--c-border);border-radius:4px}*::-webkit-scrollbar-thumb:hover{background:var(--c-text-3)}:root{--mobile-toolbar-h: 48px;--mobile-tabbar-h: 60px;--mobile-pagestrip-h: 56px}@media (max-width: 767px){html,body{height:100dvh}#app,#app.left-collapsed,#app.right-collapsed,#app.left-collapsed.right-collapsed{grid-template-columns:1fr;grid-template-rows:var(--mobile-toolbar-h) 1fr;grid-template-areas:"toolbar" "canvas";height:calc(100dvh - var(--site-header-h, 48px));transition:none}#category-rail,#left-panel,#right-panel,.panel-toggle,#canvas-area .canvas-fab,#canvas-area .canvas-hint,#canvas-area #zoom-control,#right-tabs{display:none!important}#canvas-area{grid-area:canvas;padding-top:8px;padding-bottom:calc(var(--mobile-tabbar-h) + var(--mobile-pagestrip-h) + env(safe-area-inset-bottom) + 8px)}#toolbar{grid-area:toolbar;position:relative;height:var(--mobile-toolbar-h);padding:0 8px;gap:4px;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}#toolbar::-webkit-scrollbar{display:none}#toolbar .tb-divider,#toolbar .tb-sep{display:none!important}#toolbar .tb-btn,#toolbar .tb-pill{position:relative;padding:8px;height:40px;min-width:40px;flex-shrink:0}#toolbar .tb-btn:before,#toolbar .tb-pill:before{content:"";position:absolute;top:-2px;right:-2px;bottom:-2px;left:-2px}#toolbar .tb-label,#toolbar .tb-pill-label,#toolbar .save-status{display:none!important}#toolbar .tb-title-input{flex:1 0 100px;min-width:80px;max-width:160px;font-size:13px;padding:4px 8px;border:0;background:transparent;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}#toolbar .tb-title-input:focus{border:1px solid #d8cfe6;background:#fff;outline:none}#toolbar .tb-right{position:sticky;right:0;display:inline-flex;align-items:center;gap:2px;flex-shrink:0;background:#fff;padding-left:8px;box-shadow:-8px 0 8px -8px #140e282e;z-index:2}#toolbar .save-indicator{width:24px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}#mobile-page-strip{position:fixed;left:0;right:0;bottom:calc(var(--mobile-tabbar-h) + env(safe-area-inset-bottom));height:var(--mobile-pagestrip-h);background:#fafaf9;border-top:1px solid #ece4f3;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;z-index:55;padding:6px 12px;display:flex;align-items:center;gap:8px}#mobile-page-strip::-webkit-scrollbar{display:none}#mobile-page-strip .pages-header,#mobile-page-strip .page-thumb .actions{display:none!important}#mobile-page-strip .page-thumb{flex:0 0 auto;width:64px;height:48px;border-radius:6px;position:relative}#mobile-page-strip .page-thumb .page-num{font-size:11px;padding:1px 4px}#mobile-page-strip .page-add{flex:0 0 auto;width:48px;height:48px;border-radius:6px;font-size:18px}#canvas-area{z-index:1;position:relative}}@media (min-width: 768px){#mobile-page-strip{display:none}}.rb-sheet{position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--z-sheet, 800);pointer-events:none}.rb-sheet-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;background:#140e2873;opacity:0;transition:opacity .2s ease;pointer-events:none}.rb-sheet-panel{position:absolute;left:0;right:0;bottom:0;height:100dvh;pointer-events:auto;background:#fff;border-top-left-radius:16px;border-top-right-radius:16px;box-shadow:0 -12px 32px #140e282e;display:flex;flex-direction:column;will-change:transform;padding-bottom:env(safe-area-inset-bottom,0)}.rb-sheet-handle{flex:0 0 auto;padding:14px 0 8px;display:flex;justify-content:center;cursor:grab;touch-action:none}.rb-sheet-grip{display:block;width:36px;height:4px;background:#d6cae6;border-radius:999px}.rb-sheet-body{flex:1 1 auto;overflow-y:auto;padding:8px 16px 16px;-webkit-overflow-scrolling:touch}.rb-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;align-items:stretch;justify-content:space-evenly;gap:0;background:#fff;border-top:1px solid #ece4f3;height:var(--mobile-tabbar-h, 60px);padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -2px 12px #0000000a;font-family:inherit}.rb-tabbar-btn{flex:1 1 0;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:6px 4px;background:transparent;border:0;color:#5e5575;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color .15s ease,background .15s ease;min-width:0}.rb-tabbar-btn:active{background:#7c3aed1f}.rb-tabbar-btn.is-active{color:#7c3aed}.rb-tabbar-icon{display:inline-flex;align-items:center;justify-content:center;font-size:22px;line-height:1;width:30px;height:30px}.rb-tabbar-icon svg{width:var(--ic-xl, 28px);height:var(--ic-xl, 28px);display:block;stroke-width:2}.rb-tabbar-label{font-size:12px;font-weight:600;line-height:1.2;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}@media (min-width: 768px){.rb-tabbar{display:none}}