:root,[data-theme=dark]{--font-sans:"Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-heading:"Outfit", "Space Grotesk", var(--font-sans);--bg-dark:#090d16;--bg-surface:#121827;--bg-surface-elevated:#1a2236;--bg-glass:#121827bf;--bg-glass-card:#1a2236a6;--border-glass:#ffffff14;--border-glow:#6366f159;--primary:#6366f1;--primary-hover:#4f46e5;--primary-glow:#6366f166;--secondary:#a855f7;--secondary-glow:#a855f759;--cyan:#06b6d4;--emerald:#10b981;--amber:#f59e0b;--rose:#f43f5e;--text-main:#f8fafc;--text-muted:#94a3b8;--text-subtle:#64748b;--radius-sm:8px;--radius-md:14px;--radius-lg:20px;--radius-full:9999px;--shadow-glass:0 8px 32px 0 #0006;--shadow-neon:0 0 25px #6366f140;--transition-fast:.18s cubic-bezier(.16, 1, .3, 1);--transition-smooth:.3s cubic-bezier(.16, 1, .3, 1)}[data-theme=light]{--bg-dark:#f1f5f9;--bg-surface:#fff;--bg-surface-elevated:#f8fafc;--bg-glass:#ffffffd9;--bg-glass-card:#fffffff2;--border-glass:#00000014;--border-glow:#6366f140;--text-main:#0f172a;--text-muted:#475569;--text-subtle:#94a3b8;--shadow-glass:0 8px 30px #0f172a14;--shadow-neon:0 4px 20px #6366f126}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{background-color:var(--bg-dark);width:100%;max-width:100vw;height:100%;color:var(--text-main);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition:background-color .3s,color .3s;overflow-x:hidden}body:before{content:"";z-index:-1;pointer-events:none;filter:blur(60px);background:radial-gradient(circle,#6366f11f 0%,#0000 70%);width:600px;height:600px;position:fixed;top:-15%;left:20%}body:after{content:"";z-index:-1;pointer-events:none;filter:blur(60px);background:radial-gradient(circle,#a855f71a 0%,#0000 70%);width:550px;height:550px;position:fixed;bottom:-10%;right:15%}.app-container{flex-direction:column;max-width:100vw;min-height:100vh;display:flex;overflow-x:hidden}.main-content{box-sizing:border-box;flex:1;width:100%;max-width:1380px;margin:0 auto;padding:2rem 1.5rem 4rem}.navbar{background:var(--bg-glass);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--border-glass);z-index:40;box-sizing:border-box;justify-content:space-between;align-items:center;width:100%;padding:.9rem 1.5rem;transition:background .3s,border-color .3s;display:flex;position:sticky;top:0}.brand{flex-shrink:0;align-items:center;gap:.65rem;text-decoration:none;display:flex}.brand-icon{border-radius:var(--radius-md);background:linear-gradient(135deg, var(--primary), var(--secondary));color:#fff;flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;display:flex;box-shadow:0 0 20px #6366f180}.brand-title{font-family:var(--font-heading);letter-spacing:-.02em;background:linear-gradient(135deg, var(--text-main) 40%, var(--text-muted));-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-size:1.3rem;font-weight:800}.brand-badge{border-radius:var(--radius-full);color:var(--primary);text-transform:uppercase;letter-spacing:.05em;background:#6366f126;border:1px solid #6366f14d;padding:.18rem .55rem;font-size:.68rem;font-weight:600}.nav-actions{flex-wrap:wrap;align-items:center;gap:.6rem;display:flex}.btn-glass{background:var(--bg-surface-elevated);border:1px solid var(--border-glass);border-radius:var(--radius-md);min-height:38px;color:var(--text-main);cursor:pointer;transition:var(--transition-fast);touch-action:manipulation;white-space:nowrap;align-items:center;gap:.45rem;padding:.55rem .95rem;font-size:.86rem;font-weight:500;display:inline-flex}.btn-glass:hover{background:var(--bg-surface);border-color:var(--primary);transform:translateY(-1px)}.btn-primary{background:linear-gradient(135deg, var(--primary), var(--secondary));border-radius:var(--radius-md);color:#fff;cursor:pointer;min-height:44px;box-shadow:0 4px 20px var(--primary-glow);transition:var(--transition-fast);touch-action:manipulation;border:none;justify-content:center;align-items:center;gap:.55rem;padding:.75rem 1.5rem;font-size:.95rem;font-weight:600;display:inline-flex}.btn-primary:hover{filter:brightness(1.1);transform:translateY(-2px);box-shadow:0 6px 25px #6366f180}.hero-header{text-align:center;margin-bottom:2rem;padding:0 .5rem}.hero-header h1{font-family:var(--font-heading);letter-spacing:-.03em;color:var(--text-main);margin-bottom:.6rem;font-size:2.2rem;font-weight:800;line-height:1.2}.hero-header p{color:var(--text-muted);max-width:600px;margin:0 auto;font-size:1rem}.workspace-grid{grid-template-columns:1.35fr 1fr;grid-template-areas:"url preview""studio preview";align-items:start;gap:1.75rem;width:100%;display:grid}.mobile-order-1{grid-area:url}.mobile-order-2{grid-area:preview}.mobile-order-3{grid-area:studio}.glass-panel{background:var(--bg-glass);-webkit-backdrop-filter:blur(16px);border:1px solid var(--border-glass);border-radius:var(--radius-lg);box-shadow:var(--shadow-glass);box-sizing:border-box;width:100%;max-width:100%;padding:1.5rem;transition:background .3s,border-color .3s;overflow:hidden}.section-title{font-family:var(--font-heading);color:var(--text-main);align-items:center;gap:.6rem;margin-bottom:1.25rem;font-size:1.15rem;font-weight:700;display:flex}.section-title svg{color:var(--primary)}.url-input-container{flex-direction:column;gap:.75rem;margin-bottom:1.25rem;display:flex}.url-input-card{background:var(--bg-surface-elevated);border:2px solid var(--border-glass);border-radius:var(--radius-md);transition:var(--transition-fast);flex-direction:column;gap:.6rem;padding:.75rem;display:flex}.url-input-card:focus-within{border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-glow)}.url-input-top-bar{justify-content:space-between;align-items:center;gap:.5rem;display:flex}.url-protocol-select{background:var(--bg-surface);border:1px solid var(--border-glass);border-radius:var(--radius-sm);color:var(--primary);cursor:pointer;outline:none;padding:.3rem .6rem;font-size:.88rem;font-weight:700}.test-link-btn{min-height:28px;padding:.3rem .65rem;font-size:.78rem}.url-input-field-row{width:100%}.url-input-main{width:100%;color:var(--text-main);font-size:16px;font-family:var(--font-sans);background:0 0;border:none;outline:none;padding:.2rem 0;font-weight:500}.url-input-main::placeholder{color:var(--text-subtle)}.url-validation-status{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.4rem;font-size:.82rem;display:flex}.status-badge{border-radius:var(--radius-full);align-items:center;gap:.4rem;padding:.25rem .65rem;font-size:.78rem;font-weight:600;display:inline-flex}.status-badge.valid{color:var(--emerald);background:#10b98126;border:1px solid #10b9814d}.status-badge.invalid{color:var(--rose);background:#f43f5e26;border:1px solid #f43f5e4d}.presets-group{flex-wrap:wrap;gap:.45rem;margin-top:.4rem;display:flex}.preset-chip{background:var(--bg-surface-elevated);border:1px solid var(--border-glass);border-radius:var(--radius-full);min-height:34px;color:var(--text-muted);cursor:pointer;transition:var(--transition-fast);touch-action:manipulation;align-items:center;gap:.35rem;padding:.35rem .75rem;font-size:.78rem;font-weight:500;display:inline-flex}.preset-chip:hover{color:var(--text-main);background:#6366f126;border-color:#6366f166}.tabs-nav{background:var(--bg-surface);border-radius:var(--radius-md);border:1px solid var(--border-glass);-webkit-overflow-scrolling:touch;scrollbar-width:none;box-sizing:border-box;gap:.4rem;width:100%;max-width:100%;margin-bottom:1.25rem;padding:.35rem;display:flex;overflow-x:auto}.tabs-nav::-webkit-scrollbar{display:none}.tab-btn{border-radius:var(--radius-sm);min-width:fit-content;min-height:38px;color:var(--text-muted);cursor:pointer;transition:var(--transition-fast);white-space:nowrap;touch-action:manipulation;background:0 0;border:none;flex:1;justify-content:center;align-items:center;gap:.45rem;padding:.55rem .85rem;font-size:.85rem;font-weight:600;display:inline-flex}.tab-btn:hover{color:var(--text-main);background:var(--bg-surface-elevated)}.tab-btn.active{background:var(--primary);color:#fff;box-shadow:0 2px 10px var(--primary-glow)}.control-group{box-sizing:border-box;flex-direction:column;gap:.6rem;width:100%;max-width:100%;margin-bottom:1.25rem;display:flex}.control-label{color:var(--text-main);justify-content:space-between;align-items:center;font-size:.86rem;font-weight:600;display:flex}.control-hint{color:var(--text-muted);font-size:.78rem;font-weight:400}.style-options-grid{box-sizing:border-box;grid-template-columns:repeat(4,1fr);gap:.65rem;width:100%;max-width:100%;display:grid}.placement-options-grid{box-sizing:border-box;grid-template-columns:repeat(2,1fr);gap:.5rem;width:100%;max-width:100%;display:grid}.style-card{background:var(--bg-surface-elevated);border:1px solid var(--border-glass);border-radius:var(--radius-md);cursor:pointer;transition:var(--transition-fast);text-align:center;touch-action:manipulation;box-sizing:border-box;flex-direction:column;align-items:center;gap:.45rem;width:100%;min-width:0;padding:.75rem .35rem;display:flex;overflow:hidden}.style-card:hover{background:#6366f11a;border-color:#6366f180}.style-card.selected{border-color:var(--primary);box-shadow:0 0 15px var(--primary-glow);background:#6366f12e}.style-icon{width:28px;height:28px;color:var(--primary);justify-content:center;align-items:center;display:flex}.style-label{color:var(--text-main);white-space:normal;word-break:break-word;text-align:center;width:100%;font-size:.72rem;font-weight:600;line-height:1.2}.logo-grid{box-sizing:border-box;grid-template-columns:repeat(5,1fr);gap:.65rem;width:100%;max-width:100%;margin-bottom:1rem;display:grid}.logo-option-card{background:var(--bg-surface-elevated);border:1px solid var(--border-glass);border-radius:var(--radius-md);cursor:pointer;transition:var(--transition-fast);box-sizing:border-box;flex-direction:column;justify-content:center;align-items:center;width:100%;min-width:0;padding:.75rem .35rem;display:flex;overflow:hidden}.logo-option-card:hover{border-color:var(--primary)}.logo-option-card.selected{border-color:var(--primary);box-shadow:0 0 15px var(--primary-glow);background:#6366f133}.logo-icon-wrapper{justify-content:center;align-items:center;width:26px;height:26px;display:flex}.logo-icon-wrapper svg{width:100%;height:100%}.file-upload-zone{background:var(--bg-surface-elevated);border:2px dashed var(--border-glass);border-radius:var(--radius-md);cursor:pointer;transition:var(--transition-fast);color:var(--text-muted);text-align:center;box-sizing:border-box;justify-content:center;align-items:center;gap:.65rem;width:100%;padding:.85rem;font-size:.84rem;display:flex}.file-upload-zone:hover{border-color:var(--primary);color:var(--text-main);background:#6366f114}.color-picker-grid{box-sizing:border-box;grid-template-columns:repeat(2,1fr);gap:.75rem;width:100%;display:grid}.color-input-box{background:var(--bg-surface-elevated);border-radius:var(--radius-md);border:1px solid var(--border-glass);box-sizing:border-box;align-items:center;gap:.75rem;min-width:0;padding:.55rem .75rem;display:flex}.color-swatch-input{appearance:none;border-radius:var(--radius-sm);cursor:pointer;background:0 0;border:none;flex-shrink:0;width:30px;height:30px}.color-swatch-input::-webkit-color-swatch-wrapper{padding:0}.color-swatch-input::-webkit-color-swatch{border-radius:var(--radius-sm);border:1px solid #00000026}.color-value-text{color:var(--text-main);flex:1;font-family:monospace;font-size:.85rem}.palette-list{box-sizing:border-box;grid-template-columns:repeat(3,1fr);gap:.5rem;width:100%;margin-top:.5rem;display:grid}.palette-btn{background:var(--bg-surface-elevated);border:1px solid var(--border-glass);border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition-fast);color:var(--text-muted);box-sizing:border-box;align-items:center;gap:.4rem;min-width:0;padding:.45rem .65rem;font-size:.78rem;display:flex}.palette-btn:hover{border-color:var(--primary);color:var(--text-main)}.palette-preview-dots{flex-shrink:0;gap:3px;display:flex}.palette-dot{border-radius:50%;width:10px;height:10px}.range-slider{appearance:none;background:var(--bg-surface-elevated);border-radius:var(--radius-full);outline:none;width:100%;height:8px}.range-slider::-webkit-slider-thumb{appearance:none;background:var(--primary);cursor:pointer;width:22px;height:22px;box-shadow:0 0 10px var(--primary-glow);transition:var(--transition-fast);border-radius:50%}.range-slider::-webkit-slider-thumb:hover{transform:scale(1.15)}.preview-panel-sticky{flex-direction:column;gap:1.25rem;width:100%;display:flex;position:sticky;top:80px}.preview-card-container{background:var(--bg-surface-elevated);border:1px solid var(--border-glass);border-radius:var(--radius-lg);box-sizing:border-box;flex-direction:column;justify-content:center;align-items:center;width:100%;padding:2rem 1.25rem;display:flex;position:relative;overflow:hidden}.canvas-preview-wrapper{filter:drop-shadow(0 15px 30px #00000026);justify-content:center;align-items:center;width:100%;max-width:320px;transition:transform .3s;display:flex}.canvas-preview-wrapper canvas{border-radius:var(--radius-md);max-width:100%;height:auto}.download-actions-grid{grid-template-columns:1fr 1fr;gap:.65rem;width:100%;margin-top:.85rem;display:grid}.res-selector{background:var(--bg-surface-elevated);border-radius:var(--radius-md);border:1px solid var(--border-glass);justify-content:space-between;align-items:center;width:100%;margin-bottom:.65rem;padding:.5rem .75rem;font-size:.82rem;display:flex}.res-select-dropdown{color:var(--primary);cursor:pointer;background:0 0;border:none;outline:none;font-size:.82rem;font-weight:700}.metrics-row{background:var(--bg-surface);border-radius:var(--radius-md);border:1px solid var(--border-glass);box-sizing:border-box;justify-content:space-between;align-items:center;width:100%;padding:.75rem 1rem;font-size:.82rem;display:flex}.metric-item{flex-direction:column;gap:.15rem;display:flex}.metric-label{color:var(--text-subtle);text-transform:uppercase;letter-spacing:.05em;font-size:.72rem}.metric-value{color:var(--text-main);font-weight:700}.drawer-backdrop{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:50;background:#000000a6;justify-content:flex-end;animation:.25s fadeIn;display:flex;position:fixed;inset:0}.drawer-panel{background:var(--bg-surface);border-left:1px solid var(--border-glass);box-sizing:border-box;flex-direction:column;gap:1.15rem;width:100%;max-width:440px;height:100%;padding:1.5rem;animation:.3s cubic-bezier(.16,1,.3,1) slideInRight;display:flex;box-shadow:-10px 0 30px #0000004d}.history-item-card{background:var(--bg-surface-elevated);border:1px solid var(--border-glass);border-radius:var(--radius-md);transition:var(--transition-fast);justify-content:space-between;align-items:center;padding:.75rem .85rem;display:flex}.history-item-card:hover{border-color:var(--primary)}.toast-container{z-index:100;flex-direction:column;gap:.5rem;display:flex;position:fixed;bottom:2rem;right:2rem}.toast{background:var(--bg-surface-elevated);border:1px solid var(--border-glow);border-radius:var(--radius-md);color:var(--text-main);align-items:center;gap:.6rem;padding:.75rem 1.15rem;font-size:.88rem;font-weight:500;animation:.3s cubic-bezier(.16,1,.3,1) toastUp;display:inline-flex;box-shadow:0 10px 30px #0003}@media (width<=1024px){.workspace-grid{flex-direction:column;gap:1.25rem;display:flex}.preview-panel-sticky{position:relative;top:0}}@media (width<=640px){.main-content{width:100%!important;max-width:100vw!important;padding:.75rem .5rem 3rem!important}.navbar{padding:.65rem .6rem!important}.brand-title{font-size:1.1rem}.brand-badge,.status-badge-hide-mobile{display:none!important}.hero-header{margin-bottom:1rem}.hero-header h1{font-size:1.35rem}.hero-header p{font-size:.82rem}.glass-panel{border-radius:var(--radius-md);box-sizing:border-box!important;width:100%!important;max-width:100%!important;padding:.75rem!important}.style-options-grid{grid-template-columns:repeat(2,1fr)!important;gap:.4rem!important;width:100%!important}.placement-options-grid{grid-template-columns:1fr!important;gap:.4rem!important;width:100%!important}.logo-grid{grid-template-columns:repeat(3,1fr)!important;gap:.45rem!important;width:100%!important}.color-picker-grid{grid-template-columns:1fr!important}.palette-list{grid-template-columns:repeat(2,1fr)!important}.download-actions-grid{grid-template-columns:1fr!important}.metrics-row{flex-direction:column;align-items:flex-start;gap:.65rem}.toast-container{bottom:1rem;left:.6rem;right:.6rem}.toast{justify-content:center;width:100%}.drawer-panel{max-width:100%;padding:1rem}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideInRight{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes toastUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}