.header[data-v-57b44184]{position:relative;background:linear-gradient(135deg,#667eea,#764ba2);border-bottom:1px solid rgba(255,255,255,.1);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.header[data-v-57b44184]:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,#667eeae6,#764ba2e6);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.header-container[data-v-57b44184]{position:relative;display:flex;justify-content:center;align-items:center;padding:20px 32px;max-width:1600px;margin:0 auto}.logo[data-v-57b44184]{display:flex;align-items:center;gap:14px;cursor:default;transition:transform .2s ease}.logo[data-v-57b44184]:hover{transform:translateY(-1px)}.logo-icon[data-v-57b44184]{display:flex;align-items:center;justify-content:center;width:44px;height:44px;background:#fff3;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:12px;border:1px solid rgba(255,255,255,.3);box-shadow:0 4px 6px #0000001a;transition:all .3s ease}.logo-icon svg[data-v-57b44184]{width:24px;height:24px;color:#fff}.logo:hover .logo-icon[data-v-57b44184]{background:#ffffff4d;transform:scale(1.05);box-shadow:0 6px 12px #00000026}.logo-text[data-v-57b44184]{display:flex;flex-direction:column;gap:2px}.logo-title[data-v-57b44184]{margin:0;font-size:22px;font-weight:700;color:#fff;letter-spacing:-.02em;text-shadow:0 2px 4px rgba(0,0,0,.1)}.logo-subtitle[data-v-57b44184]{margin:0;font-size:12px;font-weight:500;color:#ffffffd9;letter-spacing:.02em}@media(max-width:1024px){.header-container[data-v-57b44184]{padding:16px 20px}.logo-subtitle[data-v-57b44184]{display:none}}@media(max-width:640px){.header-container[data-v-57b44184]{padding:12px 16px}.logo[data-v-57b44184]{gap:10px}.logo-title[data-v-57b44184]{font-size:18px}.logo-icon[data-v-57b44184]{width:36px;height:36px}.logo-icon svg[data-v-57b44184]{width:18px;height:18px}}.template-switcher[data-v-f769eef4]{width:100%}.options-grid[data-v-f769eef4]{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px;max-height:1000px;overflow:hidden;opacity:1;transition:max-height .3s cubic-bezier(.4,0,.2,1),opacity .2s ease,margin .3s ease}.options-grid.collapsed[data-v-f769eef4]{max-height:0;opacity:0;margin-top:0;margin-bottom:0}.option-card[data-v-f769eef4]{position:relative;display:flex;flex-direction:column;gap:4px;padding:12px 14px;border:2px solid #e5e7eb;border-radius:8px;background:#fff;cursor:pointer;transition:all .2s ease}.option-card[data-v-f769eef4]:hover{border-color:#667eea;background:#f9fafb;transform:translateY(-1px);box-shadow:0 2px 4px #667eea1a}.option-card.active[data-v-f769eef4]{border-color:#667eea;background:linear-gradient(135deg,#667eea1a,#764ba20d);box-shadow:0 0 0 1px #667eea33}.option-card input[type=radio][data-v-f769eef4]{position:absolute;opacity:0;pointer-events:none}.option-name[data-v-f769eef4]{font-size:14px;font-weight:600;color:#1f2937}.option-desc[data-v-f769eef4]{font-size:12px;color:#6b7280;line-height:1.4}.option-card.active .option-name[data-v-f769eef4]{color:#667eea}@media(max-width:768px){.options-grid[data-v-f769eef4]{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}.option-card[data-v-f769eef4]{padding:10px 12px}.option-name[data-v-f769eef4]{font-size:13px}.option-desc[data-v-f769eef4]{font-size:11px}}.theme-switcher[data-v-eb07469b]{width:100%}.options-grid[data-v-eb07469b]{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px;max-height:1000px;overflow:hidden;opacity:1;transition:max-height .3s cubic-bezier(.4,0,.2,1),opacity .2s ease,margin .3s ease}.options-grid.collapsed[data-v-eb07469b]{max-height:0;opacity:0;margin-top:0;margin-bottom:0}.option-card[data-v-eb07469b]{position:relative;display:flex;align-items:center;padding:10px 12px;border:2px solid #e5e7eb;border-radius:8px;background:#fff;cursor:pointer;transition:all .2s ease}.option-card[data-v-eb07469b]:hover{border-color:#667eea;background:#f9fafb;transform:translateY(-1px);box-shadow:0 2px 4px #667eea1a}.option-card.active[data-v-eb07469b]{border-color:#667eea;background:linear-gradient(135deg,#667eea1a,#764ba20d);box-shadow:0 0 0 1px #667eea33}.option-card input[type=radio][data-v-eb07469b]{position:absolute;opacity:0;pointer-events:none}.option-content[data-v-eb07469b]{display:flex;align-items:center;gap:10px;width:100%}.color-indicator[data-v-eb07469b]{width:20px;height:20px;border-radius:4px;border:1px solid rgba(0,0,0,.1);flex-shrink:0}.option-name[data-v-eb07469b]{font-size:14px;font-weight:600;color:#1f2937}.option-card.active .option-name[data-v-eb07469b]{color:#667eea}@media(max-width:768px){.options-grid[data-v-eb07469b]{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:6px}.option-card[data-v-eb07469b]{padding:8px 10px}.color-indicator[data-v-eb07469b]{width:18px;height:18px}.option-name[data-v-eb07469b]{font-size:13px}}.toolbar[data-v-f48a5a5d]{display:flex;gap:4px;padding:8px;background:#f9fafb;border-bottom:1px solid #e5e7eb;flex-wrap:wrap}.toolbar-btn[data-v-f48a5a5d]{display:flex;align-items:center;justify-content:center;padding:8px;border:1px solid #d1d5db;background:#fff;border-radius:6px;cursor:pointer;color:#374151;transition:all .15s}.toolbar-btn[data-v-f48a5a5d]:hover{background:#f3f4f6;border-color:#9ca3af;color:#111827}.toolbar-btn[data-v-f48a5a5d]:active{transform:scale(.95);background:#e5e7eb}.theme-customizer[data-v-8460d3e3]{position:relative}.customizer-btn[data-v-8460d3e3]{display:flex;align-items:center;gap:6px;padding:8px 16px;border:1px solid rgba(255,255,255,.3);border-radius:8px;background:#fffffff2;font-size:13px;font-weight:600;color:#374151;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 4px #0000001a}.customizer-btn[data-v-8460d3e3]:hover{background:#fff;border-color:#ffffff80;transform:translateY(-1px);box-shadow:0 4px 8px #00000026}.overlay[data-v-8460d3e3]{position:fixed;top:0;left:0;right:0;bottom:0;background:#0000004d;z-index:999}.customizer-panel[data-v-8460d3e3]{position:fixed;top:10vh;left:50%;transform:translate(-50%);background:#fff;border-radius:8px;box-shadow:0 10px 40px #0003;z-index:1000;width:90%;max-width:550px;max-height:80vh;display:flex;flex-direction:column}.customizer-panel.inline[data-v-8460d3e3]{position:static;transform:none;width:100%;max-width:none;max-height:none;box-shadow:none;border-radius:0;flex:1;overflow-y:auto}.customizer-header[data-v-8460d3e3]{display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:1px solid #e5e7eb}.customizer-header h3[data-v-8460d3e3]{margin:0;font-size:18px;font-weight:600;color:#111827}.close-btn[data-v-8460d3e3]{display:flex;align-items:center;justify-content:center;padding:4px;border:none;background:none;color:#6b7280;cursor:pointer;transition:all .15s;border-radius:4px}.close-btn[data-v-8460d3e3]:hover{color:#111827;background:#f3f4f6}.customizer-content[data-v-8460d3e3]{padding:20px;overflow-y:auto;flex:1}.color-field[data-v-8460d3e3]{margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid #f3f4f6}.color-field[data-v-8460d3e3]:last-of-type{border-bottom:none}.field-info[data-v-8460d3e3]{margin-bottom:8px}.field-info label[data-v-8460d3e3]{display:block;font-size:14px;font-weight:600;color:#111827;margin-bottom:2px}.field-description[data-v-8460d3e3]{display:block;font-size:12px;color:#6b7280}.color-input-group[data-v-8460d3e3]{display:flex;gap:8px;align-items:center}.color-picker[data-v-8460d3e3]{width:60px;height:40px;border:1px solid #d1d5db;border-radius:6px;cursor:pointer;padding:2px}.color-text[data-v-8460d3e3]{flex:1;padding:10px 12px;border:1px solid #d1d5db;border-radius:6px;font-size:14px;font-family:Monaco,monospace;color:#111827;transition:all .15s}.color-text[data-v-8460d3e3]:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.font-field[data-v-8460d3e3]{margin-bottom:16px}.font-field label[data-v-8460d3e3]{display:block;margin-bottom:6px;font-size:14px;font-weight:500;color:#374151}.font-select[data-v-8460d3e3]{width:100%;padding:10px 12px;border:1px solid #d1d5db;border-radius:6px;font-size:14px;color:#111827;background:#fff;cursor:pointer;transition:all .15s}.font-select[data-v-8460d3e3]:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.reset-btn[data-v-8460d3e3]{width:100%;padding:10px 16px;margin-top:8px;border:1px solid #d1d5db;border-radius:6px;background:#fff;font-size:14px;font-weight:500;color:#6b7280;cursor:pointer;transition:all .15s}.reset-btn[data-v-8460d3e3]:hover{background:#f9fafb;color:#374151}@media(max-width:640px){.customizer-btn[data-v-8460d3e3]{font-size:12px;padding:6px 12px}.customizer-btn span[data-v-8460d3e3]{display:none}.customizer-panel[data-v-8460d3e3]{width:95%;max-height:85vh}}.template-settings[data-v-f9b8eda0]{position:relative}.settings-btn[data-v-f9b8eda0]{display:flex;align-items:center;gap:6px;padding:8px 16px;border:1px solid rgba(255,255,255,.3);border-radius:8px;background:#fffffff2;font-size:13px;font-weight:600;color:#374151;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 4px #0000001a}.settings-btn[data-v-f9b8eda0]:hover{background:#fff;border-color:#ffffff80;transform:translateY(-1px);box-shadow:0 4px 8px #00000026}.overlay[data-v-f9b8eda0]{position:fixed;top:0;left:0;right:0;bottom:0;background:#0000004d;z-index:999}.settings-panel[data-v-f9b8eda0]{position:fixed;top:10vh;left:50%;transform:translate(-50%);background:#fff;border-radius:8px;box-shadow:0 10px 40px #0003;z-index:1000;width:90%;max-width:500px;max-height:80vh;display:flex;flex-direction:column}.settings-panel.inline[data-v-f9b8eda0]{position:static;transform:none;width:100%;max-width:none;max-height:none;box-shadow:none;border-radius:0;flex:1;overflow-y:auto}.settings-header[data-v-f9b8eda0]{display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:1px solid #e5e7eb}.settings-header h3[data-v-f9b8eda0]{margin:0;font-size:18px;font-weight:600;color:#111827}.close-btn[data-v-f9b8eda0]{display:flex;align-items:center;justify-content:center;padding:4px;border:none;background:none;color:#6b7280;cursor:pointer;transition:all .15s;border-radius:4px}.close-btn[data-v-f9b8eda0]:hover{color:#111827;background:#f3f4f6}.settings-content[data-v-f9b8eda0]{padding:20px;overflow-y:auto;flex:1}.help-text[data-v-f9b8eda0]{margin-bottom:20px;padding:12px;background:#eff6ff;border:1px solid #bfdbfe;border-radius:6px;font-size:13px;color:#1e40af}.setting-field[data-v-f9b8eda0]{margin-bottom:16px}.setting-field label[data-v-f9b8eda0]{display:block;margin-bottom:6px;font-size:14px;font-weight:500;color:#374151}.setting-input[data-v-f9b8eda0]{width:100%;padding:10px 12px;border:1px solid #d1d5db;border-radius:6px;font-size:14px;color:#111827;transition:all .15s}.setting-input[data-v-f9b8eda0]:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.reset-btn[data-v-f9b8eda0]{width:100%;padding:10px 16px;margin-top:8px;border:1px solid #d1d5db;border-radius:6px;background:#fff;font-size:14px;font-weight:500;color:#6b7280;cursor:pointer;transition:all .15s}.reset-btn[data-v-f9b8eda0]:hover{background:#f9fafb;color:#374151}@media(max-width:640px){.settings-btn[data-v-f9b8eda0]{font-size:12px;padding:6px 12px}.settings-btn span[data-v-f9b8eda0]{display:none}.settings-panel[data-v-f9b8eda0]{width:95%;max-height:85vh}}.editor[data-v-6b8bf1a8]{display:flex;flex-direction:column;height:100%;background:#fff;border-right:1px solid #e5e7eb}.editor-header[data-v-6b8bf1a8]{display:flex;justify-content:space-between;align-items:center;padding:0;min-height:49px;border-bottom:1px solid #e5e7eb;background:#fff}.header-tabs[data-v-6b8bf1a8]{display:flex;align-items:stretch;height:100%}.tab[data-v-6b8bf1a8]{padding:12px 20px;border:none;background:transparent;font-size:14px;font-weight:600;color:#6b7280;cursor:pointer;transition:all .2s;border-bottom:3px solid transparent;position:relative}.tab[data-v-6b8bf1a8]:hover{color:#374151;background:#f9fafb}.tab.active[data-v-6b8bf1a8]{color:#667eea;border-bottom-color:#667eea;background:linear-gradient(to bottom,rgba(102,126,234,.05) 0%,transparent 100%)}.header-right[data-v-6b8bf1a8]{display:flex;align-items:center;gap:12px;padding:0 16px}.char-count[data-v-6b8bf1a8]{font-size:12px;color:#6b7280}.reset-btn[data-v-6b8bf1a8]{padding:6px 8px;background:#f3f4f6;border:1px solid #e5e7eb;border-radius:6px;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;color:#6b7280}.reset-btn[data-v-6b8bf1a8]:hover{background:#e5e7eb;color:#374151}.reset-btn[data-v-6b8bf1a8]:hover svg{transform:rotate(-90deg)}.reset-btn[data-v-6b8bf1a8]:active{transform:scale(.95)}.editor-textarea[data-v-6b8bf1a8]{flex:1;padding:16px;border:none;outline:none;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:14px;line-height:1.6;resize:none;color:#1f2937}.editor-textarea[data-v-6b8bf1a8]::placeholder{color:#9ca3af}.export-toolbar[data-v-ff1dfce8]{display:flex;gap:4px;padding:8px;background:#f9fafb;border-bottom:1px solid #e5e7eb;flex-wrap:wrap}.toolbar-btn[data-v-ff1dfce8]{display:flex;align-items:center;gap:6px;padding:8px 12px;border:1px solid #d1d5db;background:#fff;border-radius:4px;cursor:pointer;font-size:13px;font-weight:500;color:#374151;transition:all .15s;white-space:nowrap}.toolbar-btn[data-v-ff1dfce8]:hover{background:#f3f4f6;border-color:#9ca3af;color:#111827}.toolbar-btn[data-v-ff1dfce8]:active{transform:scale(.95);background:#e5e7eb}.toolbar-btn.success[data-v-ff1dfce8]{background:#d1fae5;border-color:#6ee7b7;color:#065f46}.toolbar-btn.success[data-v-ff1dfce8]:hover{background:#a7f3d0;border-color:#34d399}@media(max-width:768px){.export-toolbar[data-v-ff1dfce8]{padding:6px 8px;gap:4px}.toolbar-btn[data-v-ff1dfce8]{flex:1;justify-content:center;padding:8px 10px;font-size:12px}.toolbar-btn span[data-v-ff1dfce8]{display:none}}@media(max-width:480px){.toolbar-btn[data-v-ff1dfce8]{padding:8px;min-width:40px}}.preview[data-v-ad805551]{display:flex;flex-direction:column;height:100%;background:#f9fafb}.preview-header[data-v-ad805551]{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;min-height:55px;background:#fff;border-bottom:1px solid #e5e7eb}.header-left[data-v-ad805551],.header-right[data-v-ad805551]{display:flex;align-items:center;gap:12px}.preview-header h3[data-v-ad805551]{margin:0;font-size:14px;font-weight:600;color:#111827}.status[data-v-ad805551]{font-size:12px;font-weight:500}.compiling[data-v-ad805551]{color:#f59e0b}.errors[data-v-ad805551]{color:#ef4444;cursor:help}.success[data-v-ad805551]{color:#10b981}.preview-container[data-v-ad805551]{flex:1;padding:20px;overflow:auto}.preview-iframe[data-v-ad805551]{width:100%;height:100%;border:1px solid #e5e7eb;border-radius:4px;background:#fff;box-shadow:0 1px 3px #0000001a}.app[data-v-070527f0]{display:flex;flex-direction:column;height:100vh;overflow:hidden;background:linear-gradient(to bottom,#f8fafc,#e2e8f0)}.controls-section[data-v-070527f0]{background:#fff;border-bottom:1px solid #e5e7eb;box-shadow:0 2px 4px #0000000d}.controls-header[data-v-070527f0]{max-width:1600px;margin:0 auto;padding:12px 32px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e5e7eb}.current-info[data-v-070527f0]{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.info-item[data-v-070527f0]{display:flex;align-items:center;gap:6px;color:#374151}.info-label[data-v-070527f0]{font-size:13px;font-weight:600;color:#6b7280}.info-value[data-v-070527f0]{font-size:13px;font-weight:600;color:#1f2937}.separator[data-v-070527f0]{color:#d1d5db;font-weight:300}.color-dot[data-v-070527f0]{width:14px;height:14px;border-radius:3px;border:1px solid rgba(0,0,0,.1);flex-shrink:0}.global-toggle-btn[data-v-070527f0]{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#667eea,#764ba2);border:none;color:#fff;cursor:pointer;padding:8px;border-radius:8px;transition:all .2s ease;box-shadow:0 2px 4px #667eea4d}.global-toggle-btn[data-v-070527f0]:hover{transform:translateY(-1px);box-shadow:0 4px 8px #667eea66}.global-toggle-btn[data-v-070527f0]:active{transform:translateY(0)}.controls-container[data-v-070527f0]{max-width:1600px;margin:0 auto;padding:20px 32px;display:grid;grid-template-columns:1fr 1fr;gap:32px;max-height:2000px;overflow:hidden;opacity:1;transition:max-height .3s cubic-bezier(.4,0,.2,1),opacity .2s ease,padding .3s ease}.controls-container.collapsed[data-v-070527f0]{max-height:0;opacity:0;padding-top:0;padding-bottom:0}.mobile-tabs[data-v-070527f0]{display:none}.main[data-v-070527f0]{flex:1;overflow:hidden;padding:16px}.split-view[data-v-070527f0]{display:grid;grid-template-columns:1fr 1fr;gap:16px;height:100%;overflow:hidden}.split-pane[data-v-070527f0]{overflow:hidden;background:#fff;border-radius:12px;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;transition:box-shadow .3s ease}.split-pane[data-v-070527f0]:hover{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.footer[data-v-070527f0]{padding:16px 32px;background:linear-gradient(135deg,#667eeaf2,#764ba2f2);border-top:1px solid rgba(255,255,255,.1);text-align:center;box-shadow:0 -4px 6px -1px #0000001a}.footer p[data-v-070527f0]{margin:0;font-size:13px;font-weight:500;color:#ffffffe6;text-shadow:0 1px 2px rgba(0,0,0,.1)}.footer a[data-v-070527f0]{color:#fff;text-decoration:none;font-weight:600;transition:all .2s ease;border-bottom:1px solid rgba(255,255,255,.3)}.footer a[data-v-070527f0]:hover{border-bottom-color:#fff;text-shadow:0 0 8px rgba(255,255,255,.5)}@media(max-width:1024px){.controls-header[data-v-070527f0]{padding:14px 20px 10px}.controls-container[data-v-070527f0]{padding:16px 20px;gap:24px}.main[data-v-070527f0]{padding:12px}.split-view[data-v-070527f0]{gap:12px}}@media(max-width:768px){.controls-header[data-v-070527f0]{padding:12px 16px}.current-info[data-v-070527f0]{gap:12px;font-size:12px}.info-label[data-v-070527f0],.info-value[data-v-070527f0]{font-size:12px}.separator[data-v-070527f0]{display:none}.info-item[data-v-070527f0]{gap:4px}.controls-container[data-v-070527f0]{grid-template-columns:1fr;gap:20px;padding:16px}.mobile-tabs[data-v-070527f0]{display:flex;background:#fff;border-bottom:2px solid #e5e7eb;padding:0}.tab-btn[data-v-070527f0]{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:14px 16px;border:none;background:transparent;font-size:14px;font-weight:600;color:#6b7280;cursor:pointer;transition:all .2s;border-bottom:3px solid transparent;position:relative}.tab-btn[data-v-070527f0]:active{transform:scale(.98)}.tab-btn.active[data-v-070527f0]{color:#667eea;border-bottom-color:#667eea;background:linear-gradient(to bottom,rgba(102,126,234,.05) 0%,transparent 100%)}.split-view[data-v-070527f0]{grid-template-columns:1fr;grid-template-rows:1fr;gap:0}.split-pane[data-v-070527f0]{grid-column:1;grid-row:1}.split-pane.mobile-hidden[data-v-070527f0]{display:none}.main[data-v-070527f0]{padding:0}.footer[data-v-070527f0]{padding:12px 16px}}*,*:before,*:after{box-sizing:border-box}*{margin:0;padding:0}html,body{height:100%}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#1f2937;background:linear-gradient(to bottom,#f8fafc,#e2e8f0);font-feature-settings:"cv02","cv03","cv04","cv11"}#app{height:100%}:root{--primaryColor: #3b82f6;--backgroundColor: #ffffff;--textColor: #1f2937;--fontFamily: Arial, Helvetica, sans-serif;--fontSize: 16px;--linkColor: #3b82f6;--borderColor: #e5e7eb}::-webkit-scrollbar{width:12px;height:12px}::-webkit-scrollbar-track{background:#f1f5f980;border-radius:10px}::-webkit-scrollbar-thumb{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:10px;border:2px solid rgba(241,245,249,.5);transition:all .3s ease}::-webkit-scrollbar-thumb:hover{background:linear-gradient(135deg,#5568d3,#6a3f8f);border-width:1px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}