@import"https://fonts.googleapis.com/css2?family=Inter:wght@100;300;400;500;600;700;800;900&display=swap";:root{--bg-primary: #0A0A0A;--bg-surface: #141414;--bg-elevated: #1C1C1E;--bg-input: #2C2C2E;--text-primary: #FFFFFF;--text-secondary: #8E8E93;--text-tertiary: #636366;--border: #2C2C2E;--accent: #BF5AF2;--accent-hover: #DA8FFF;--red: #FF2D55;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 20px;--font: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;--transition: .2s cubic-bezier(.25, .1, .25, 1)}*{margin:0;padding:0;box-sizing:border-box}body{background:var(--bg-primary);color:var(--text-primary);font-family:var(--font);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}.app-nav{display:flex;align-items:center;gap:32px;padding:0 24px;height:56px;background:#0a0a0ad9;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100}.app-logo{font-size:18px;font-weight:800;color:var(--text-primary);text-decoration:none;letter-spacing:-.5px}.app-nav-links{display:flex;gap:4px}.nav-link{font-size:13px;font-weight:500;color:var(--text-secondary);text-decoration:none;padding:6px 14px;border-radius:var(--radius-sm);transition:var(--transition);cursor:pointer}.nav-link:hover,.nav-link.active{color:var(--text-primary);background:var(--bg-elevated)}.nav-link.disabled{opacity:.35;pointer-events:none}.home-page{min-height:100vh;padding-bottom:80px}.home-rows{padding:0 0 40px}.hero-banner{position:relative;height:420px;overflow:hidden;cursor:pointer;margin-bottom:8px}.hero-canvas-wrap{position:absolute;top:0;right:0;bottom:0;left:0;opacity:.6}.hero-canvas-wrap canvas{object-fit:cover;width:100%;height:100%}.hero-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to right,#0a0a0af2,#0a0a0ab3,#0a0a0a4d);display:flex;flex-direction:column;justify-content:center;padding:0 48px;gap:12px}.hero-tag{font-size:11px;font-weight:700;letter-spacing:3px;color:var(--accent);text-transform:uppercase}.hero-title{font-size:42px;font-weight:800;letter-spacing:-1px;line-height:1.1}.hero-desc{font-size:15px;color:var(--text-secondary);font-weight:400}.hero-cta{margin-top:8px;align-self:flex-start;padding:12px 28px;font-size:14px;font-weight:700;color:#fff;background:var(--accent);border:none;border-radius:var(--radius-xl);cursor:pointer;transition:var(--transition);font-family:var(--font);letter-spacing:.3px}.hero-cta:hover{background:var(--accent-hover);transform:scale(1.03)}.template-row{padding:28px 0 0}.template-row-header{display:flex;align-items:center;justify-content:space-between;padding:0 24px 14px}.template-row-title{font-size:20px;font-weight:700;letter-spacing:-.3px}.template-row-subtitle{font-size:13px;color:var(--text-tertiary);margin-left:10px;font-weight:500}.template-row-arrows{display:flex;gap:6px}.row-arrow{width:32px;height:32px;border-radius:50%;border:1px solid var(--border);background:var(--bg-elevated);color:var(--text-secondary);font-size:18px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--transition);font-family:var(--font)}.row-arrow:hover{background:var(--bg-input);color:var(--text-primary)}.template-row-scroll{display:flex;gap:16px;overflow-x:auto;padding:0 24px 4px;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none}.template-row-scroll::-webkit-scrollbar{display:none}.template-card{transition:transform var(--transition)}.template-card:hover{transform:scale(1.05)}.template-card-canvas-wrap{box-shadow:0 4px 24px #0006;border:1px solid rgba(255,255,255,.06)}.template-card-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#00000080;opacity:0;transition:opacity var(--transition);display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md)}.template-card:hover .template-card-overlay{opacity:1}.template-card-edit-label{padding:8px 20px;font-size:13px;font-weight:600;color:#fff;background:var(--accent);border-radius:var(--radius-xl);letter-spacing:.5px}.template-card-name{margin-top:10px;font-size:13px;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.template-card-size{font-size:11px;color:var(--text-tertiary);margin-top:2px}.editor-page{display:flex;flex-direction:column;height:calc(100vh - 56px);overflow:hidden}.editor-topbar{display:flex;align-items:center;padding:0 20px;height:52px;background:var(--bg-surface);border-bottom:1px solid var(--border);gap:16px;flex-shrink:0}.editor-back{display:flex;align-items:center;gap:4px;font-size:14px;font-weight:500;color:var(--accent);background:none;border:none;cursor:pointer;font-family:var(--font);transition:var(--transition);padding:6px 10px;border-radius:var(--radius-sm)}.editor-back:hover{background:var(--bg-elevated)}.back-arrow{font-size:20px;line-height:1;margin-right:2px}.editor-template-name{font-size:15px;font-weight:600;color:var(--text-primary);flex:1}.editor-topbar-actions{display:flex;gap:8px}.editor-btn-primary{padding:8px 20px;font-size:13px;font-weight:600;color:#fff;background:var(--accent);border:none;border-radius:var(--radius-sm);cursor:pointer;font-family:var(--font);transition:var(--transition)}.editor-btn-primary:hover{background:var(--accent-hover)}.editor-btn-secondary{padding:8px 16px;font-size:13px;font-weight:500;color:var(--text-secondary);background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;font-family:var(--font);transition:var(--transition)}.editor-btn-secondary:hover{background:var(--bg-input);color:var(--text-primary)}.editor-body{display:flex;flex:1;overflow:hidden}.editor-preview{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;background:#080808;min-width:0}.editor-canvas-frame{max-width:100%;width:auto;border-radius:var(--radius-md);overflow:hidden;box-shadow:0 8px 40px #0009;border:1px solid rgba(255,255,255,.05)}.editor-canvas-size{margin-top:12px;font-size:12px;color:var(--text-tertiary);font-weight:500}.editor-controls{width:340px;flex-shrink:0;background:var(--bg-surface);border-left:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden}.editor-tabs{display:flex;padding:12px 16px 0;gap:4px;border-bottom:1px solid var(--border)}.editor-tab{flex:1;padding:10px 0;font-size:13px;font-weight:600;color:var(--text-tertiary);background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;font-family:var(--font);transition:var(--transition)}.editor-tab:hover{color:var(--text-secondary)}.editor-tab.active{color:var(--text-primary);border-bottom-color:var(--accent)}.editor-tab-content{flex:1;overflow-y:auto;padding:16px;scrollbar-width:thin;scrollbar-color:var(--bg-input) transparent}.editor-tab-content::-webkit-scrollbar{width:6px}.editor-tab-content::-webkit-scrollbar-thumb{background:var(--bg-input);border-radius:3px}.controls-section{display:flex;flex-direction:column;gap:20px}.control-group{display:flex;flex-direction:column;gap:8px}.control-label{font-size:12px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px}.control-input,.control-textarea,.control-select{width:100%;padding:10px 12px;font-size:14px;color:var(--text-primary);background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm);font-family:var(--font);outline:none;transition:var(--transition)}.control-input:focus,.control-textarea:focus,.control-select:focus{border-color:var(--accent);box-shadow:0 0 0 3px #bf5af226}.control-textarea{resize:vertical;line-height:1.5}.control-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238E8E93' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}.control-range{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:4px;background:var(--bg-input);border-radius:2px;outline:none}.control-range::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--accent);cursor:pointer;border:2px solid var(--bg-surface);box-shadow:0 1px 4px #0006}.range-value{font-size:12px;color:var(--text-tertiary);font-weight:500;font-variant-numeric:tabular-nums}.color-row{display:flex;align-items:center;gap:10px}.color-picker{width:36px;height:36px;border:2px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;padding:0;background:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.color-picker::-webkit-color-swatch-wrapper{padding:2px}.color-picker::-webkit-color-swatch{border-radius:4px;border:none}.color-hex{font-size:12px;color:var(--text-tertiary);font-family:SF Mono,Fira Code,monospace;font-weight:500}.color-presets{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}.color-preset{width:28px;height:28px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:var(--transition)}.color-preset:hover{border-color:var(--text-primary);transform:scale(1.15)}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--bg-input);border-radius:4px}@keyframes spin{to{transform:rotate(360deg)}}