:root{--c-bg:#0a0a0f;--c-bg-2:#12121a;--c-bg-3:#1a1a26;--c-surface:#1e1e2e;--c-surface-2:#262638;--c-border:#ffffff0f;--c-border-hover:#ffffff24;--c-text:#e8e8f0;--c-text-2:#9898b0;--c-text-3:#6a6a82;--c-accent:#7c5cfc;--c-accent-2:#a78bfa;--c-accent-glow:#7c5cfc40;--c-cyan:#22d3ee;--c-green:#34d399;--c-rose:#f472b6;--c-amber:#fbbf24;--grad-hero:linear-gradient(135deg, #7c5cfc 0%, #22d3ee 50%, #34d399 100%);--grad-btn:linear-gradient(135deg, #7c5cfc 0%, #a78bfa 100%);--font-sans:"Inter", -apple-system, BlinkMacSystemFont, sans-serif;--font-mono:"JetBrains Mono", "Fira Code", monospace;--nav-h:64px;--radius-sm:8px;--radius-md:12px;--radius-lg:20px;--radius-full:9999px;--shadow-sm:0 2px 8px #0000004d;--shadow-md:0 8px 32px #0006;--shadow-lg:0 16px 64px #00000080;--shadow-glow:0 0 40px var(--c-accent-glow);--ease-out:cubic-bezier(.22, 1, .36, 1);--dur:.3s}[data-theme=light]{--c-bg:#f4f4f8;--c-bg-2:#eaeaf0;--c-bg-3:#dddde6;--c-surface:#fff;--c-surface-2:#f0f0f6;--c-border:#00000014;--c-border-hover:#00000029;--c-text:#1a1a2e;--c-text-2:#5a5a78;--c-text-3:#8a8aa0;--c-accent-glow:#7c5cfc1f}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:var(--c-surface-2) transparent}body{font-family:var(--font-sans);background:var(--c-bg);color:var(--c-text);-webkit-font-smoothing:antialiased;min-height:100vh;line-height:1.6;overflow-x:hidden}::selection{background:var(--c-accent);color:#fff}#topnav{height:var(--nav-h);-webkit-backdrop-filter:blur(20px)saturate(180%);border-bottom:1px solid var(--c-border);z-index:1000;background:#0a0a0fcc;justify-content:space-between;align-items:center;padding:0 2rem;display:flex;position:fixed;top:0;left:0;right:0}[data-theme=light] #topnav{background:#f4f4f8d9}.nav-brand{align-items:center;gap:.5rem;font-size:1.25rem;font-weight:800;display:flex}.brand-icon{font-size:1.4rem}.brand-accent{color:var(--c-accent)}.nav-links{align-items:center;gap:.75rem;display:flex}.nav-btn-text{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-full);color:var(--c-text-2);font-size:.85rem;font-weight:500;font-family:var(--font-sans);cursor:pointer;transition:all var(--dur) var(--ease-out);align-items:center;gap:.4rem;padding:.5rem 1rem;display:inline-flex}.nav-btn-text:hover{border-color:var(--c-accent);color:var(--c-accent)}.nav-btn-text.configured{border-color:var(--c-green);color:var(--c-green)}.nav-btn{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-full);cursor:pointer;width:40px;height:40px;transition:all var(--dur) var(--ease-out);place-items:center;font-size:1.1rem;display:grid}.nav-btn:hover{border-color:var(--c-border-hover);box-shadow:var(--shadow-sm)}.modal-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:2000;background:#0009;place-items:center;animation:.2s fadeIn;display:grid;position:fixed;inset:0}.modal-overlay.hidden{display:none}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-lg);width:92%;max-width:540px;box-shadow:var(--shadow-lg);animation:slideUp .3s var(--ease-out);padding:2rem}@keyframes slideUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.modal h2{margin-bottom:.5rem;font-size:1.3rem}.modal>p{color:var(--c-text-2);margin-bottom:1.25rem;font-size:.9rem;line-height:1.5}.modal a{color:var(--c-accent);text-decoration:underline}.provider-grid{grid-template-columns:repeat(4,1fr);gap:.5rem;margin-bottom:1.25rem;display:grid}.provider-option{background:var(--c-bg-3);border:2px solid var(--c-border);border-radius:var(--radius-sm);cursor:pointer;font-family:var(--font-sans);color:var(--c-text-2);transition:all var(--dur) var(--ease-out);align-items:center;gap:.5rem;padding:.6rem .75rem;font-size:.82rem;font-weight:600;display:flex;position:relative}.provider-option:hover{border-color:var(--c-border-hover);color:var(--c-text);background:var(--c-surface-2)}.provider-option.active{border-color:var(--c-accent);color:var(--c-text);background:#7c5cfc14}.provider-dot{border-radius:50%;flex-shrink:0;width:10px;height:10px}.provider-dot.gemini{background:#4285f4}.provider-dot.groq{background:#f55036}.provider-dot.openai{background:#10a37f}.provider-dot.openrouter{background:linear-gradient(135deg,#8b5cf6,#06b6d4)}.provider-dot.xai{border:1px solid var(--c-text-3);background:#1d1d1f}.provider-dot.mistral{background:#ff7000}.provider-dot.fireworks{background:linear-gradient(135deg,#f97316,#ef4444)}.provider-dot.kora{background:var(--c-cyan);box-shadow:0 0 6px #22d3ee80}.provider-dot.custom{background:conic-gradient(#7c5cfc,#22d3ee,#34d399,#fbbf24,#f472b6,#7c5cfc)}[data-theme=light] .provider-dot.xai{background:#1d1d1f}.provider-name{text-align:left;white-space:nowrap;flex:1}.provider-tag{border-radius:var(--radius-full);background:var(--c-surface);color:var(--c-text-3);text-transform:uppercase;letter-spacing:.04em;padding:.15rem .4rem;font-size:.65rem;font-weight:700}.provider-tag.free{color:var(--c-green);background:#34d39926}.provider-tag.local{color:var(--c-cyan);background:#22d3ee26}.modal-label{color:var(--c-text-2);margin-bottom:.4rem;font-size:.85rem;font-weight:600;display:block}.modal input[type=password],.modal input[type=text]{background:var(--c-bg);width:100%;color:var(--c-text);border:2px solid var(--c-border);border-radius:var(--radius-sm);font-family:var(--font-mono);transition:border-color var(--dur);outline:none;margin-bottom:.5rem;padding:.75rem 1rem;font-size:.9rem}.modal input:focus{border-color:var(--c-accent)}.custom-config{margin-top:1rem}.custom-config.hidden{display:none}.custom-config .modal-label{margin-top:.75rem}.custom-config .modal-label:first-child{margin-top:0}.format-toggle{background:var(--c-bg-3);border-radius:var(--radius-sm);gap:4px;padding:3px;display:flex}.format-btn{cursor:pointer;color:var(--c-text-3);font-size:.8rem;font-weight:600;font-family:var(--font-sans);transition:all var(--dur) var(--ease-out);background:0 0;border:none;border-radius:6px;flex:1;padding:.45rem .8rem}.format-btn.active{background:var(--c-surface);color:var(--c-accent);box-shadow:var(--shadow-sm)}.format-btn:hover:not(.active){color:var(--c-text-2)}.key-hint{color:var(--c-text-3);margin-top:.4rem;margin-bottom:0;font-size:.8rem}.modal-actions{gap:.75rem;margin-top:1.25rem;display:flex}.btn-primary{background:var(--grad-btn);color:#fff;border-radius:var(--radius-sm);font-family:var(--font-sans);cursor:pointer;transition:all var(--dur) var(--ease-out);border:none;padding:.65rem 1.5rem;font-size:.9rem;font-weight:600}.btn-primary:hover{box-shadow:var(--shadow-glow);transform:translateY(-1px)}.btn-ghost{color:var(--c-text-2);border:1px solid var(--c-border);border-radius:var(--radius-sm);font-family:var(--font-sans);cursor:pointer;transition:all var(--dur);background:0 0;padding:.65rem 1.5rem;font-size:.9rem;font-weight:500}.btn-ghost:hover{border-color:var(--c-border-hover);color:var(--c-text)}.modal-note{color:var(--c-text-3)!important;margin-top:1rem!important;margin-bottom:0!important;font-size:.78rem!important}#hero{text-align:center;min-height:50vh;padding:calc(var(--nav-h) + 3rem) 2rem 2rem;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.hero-glow{background:radial-gradient(circle, var(--c-accent-glow) 0%, transparent 70%);pointer-events:none;border-radius:50%;width:600px;height:600px;animation:4s ease-in-out infinite alternate pulse-glow;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@keyframes pulse-glow{0%{opacity:.5;transform:translate(-50%,-50%)scale(.8)}to{opacity:1;transform:translate(-50%,-50%)scale(1.2)}}.hero-content{z-index:1;max-width:720px;position:relative}.hero-badge{border-radius:var(--radius-full);background:var(--c-surface);border:1px solid var(--c-border);color:var(--c-accent-2);letter-spacing:.06em;text-transform:uppercase;margin-bottom:1.5rem;padding:.35rem 1rem;font-size:.8rem;font-weight:600;display:inline-block}#hero h1{margin-bottom:1.5rem;font-size:clamp(2rem,5vw,3.5rem);font-weight:900;line-height:1.1}.gradient-text{background:var(--grad-hero);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.hero-sub{color:var(--c-text-2);max-width:560px;margin:0 auto;font-size:1.1rem;line-height:1.7}.hero-sub em{color:var(--c-accent-2);font-style:normal;font-weight:600}#upload-section{max-width:800px;margin:0 auto;padding:0 2rem 3rem}.drop-zone{border:2px dashed var(--c-border-hover);border-radius:var(--radius-lg);background:var(--c-surface);cursor:pointer;min-height:320px;transition:all var(--dur) var(--ease-out);justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.drop-zone:hover,.drop-zone.drag-over{border-color:var(--c-accent);box-shadow:var(--shadow-glow);background:#7c5cfc0a}.drop-zone.drag-over{border-style:solid;transform:scale(1.01)}.drop-zone:focus-visible{outline:3px solid var(--c-accent);outline-offset:2px}.drop-zone-content{text-align:center;padding:2rem}.drop-zone-content.hidden{display:none}.upload-icon{color:var(--c-text-3);transition:color var(--dur);margin-bottom:1rem}.drop-zone:hover .upload-icon{color:var(--c-accent)}.drop-zone-content h2{margin-bottom:.5rem;font-size:1.4rem}.drop-zone-content p{color:var(--c-text-2);font-size:.95rem}.drop-hint{color:var(--c-text-3)!important;margin-top:1rem!important;font-size:.85rem!important}.image-preview{justify-content:center;align-items:center;width:100%;height:100%;min-height:320px;padding:1rem;display:flex;position:relative}.image-preview.hidden{display:none}.image-preview img{border-radius:var(--radius-md);max-width:100%;max-height:400px;box-shadow:var(--shadow-md);object-fit:contain}.clear-btn{color:#fff;cursor:pointer;width:36px;height:36px;transition:all var(--dur);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#0009;border:none;border-radius:50%;place-items:center;font-size:1rem;display:grid;position:absolute;top:12px;right:12px}.clear-btn:hover{background:var(--c-rose);transform:scale(1.1)}.generate-row{text-align:center;margin-top:1.5rem}.generate-group{flex-direction:column;align-items:center;gap:.75rem;display:inline-flex}.generate-btn{background:var(--grad-btn);color:#fff;font-size:1.1rem;font-weight:700;font-family:var(--font-sans);border-radius:var(--radius-full);cursor:pointer;box-shadow:var(--shadow-glow), var(--shadow-md);transition:all var(--dur) var(--ease-out);border:none;align-items:center;gap:.6rem;padding:1rem 2.5rem;display:inline-flex}.generate-btn:hover:not(:disabled){box-shadow:0 0 60px var(--c-accent-glow), var(--shadow-lg);transform:translateY(-2px)}.generate-btn:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}.generate-btn .gen-loading.hidden,.generate-btn.loading .gen-text,.generate-btn.loading .gen-icon{display:none}.generate-btn.loading .gen-loading{align-items:center;gap:.5rem;display:inline-flex}.spinner{border:2px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:18px;height:18px;animation:.6s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.active-provider{color:var(--c-text-3);align-items:center;gap:.4rem;font-size:.8rem;font-weight:500;display:inline-flex}.active-provider.hidden{display:none}.active-dot{background:var(--c-green);border-radius:50%;width:8px;height:8px;animation:2s infinite blink}@keyframes blink{0%,to{opacity:1}50%{opacity:.4}}.status-text{color:var(--c-text-2);min-height:1.5em;margin-top:.75rem;font-size:.9rem}.status-text.error{color:var(--c-rose)}.status-text.success{color:var(--c-green)}#workspace{max-width:1400px;margin:0 auto;padding:2rem 2rem 4rem}#workspace.hidden{display:none}.section-title{text-align:center;margin-bottom:2rem;font-size:1.8rem;font-weight:800}.toolbar{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-md) var(--radius-md) 0 0;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;padding:.75rem 1rem;display:flex}.toolbar-left,.toolbar-right{align-items:center;gap:.5rem;display:flex}.toolbar-btn{font-size:.85rem;font-weight:600;font-family:var(--font-sans);border:1px solid var(--c-border);border-radius:var(--radius-sm);background:var(--c-bg-3);color:var(--c-text);cursor:pointer;transition:all var(--dur) var(--ease-out);align-items:center;gap:.5rem;padding:.55rem 1.1rem;display:inline-flex}.toolbar-btn:hover{border-color:var(--c-border-hover);background:var(--c-surface-2)}.toolbar-btn.success{background:var(--c-green);color:#0a0a0f;border-color:#0000}.toolbar-btn.success:hover{filter:brightness(1.1);transform:translateY(-1px)}.view-toggle{background:var(--c-bg-3);border-radius:var(--radius-sm);gap:2px;padding:3px;display:flex}.view-btn{cursor:pointer;color:var(--c-text-3);font-size:.8rem;font-weight:500;font-family:var(--font-sans);transition:all var(--dur) var(--ease-out);background:0 0;border:none;border-radius:6px;align-items:center;gap:.4rem;padding:.4rem .8rem;display:inline-flex}.view-btn.active{background:var(--c-surface);color:var(--c-accent);box-shadow:var(--shadow-sm)}.view-btn:hover:not(.active){color:var(--c-text-2)}.panels{border:1px solid var(--c-border);border-radius:0 0 var(--radius-md) var(--radius-md);border-top:none;height:600px;display:flex;overflow:hidden}.panels.split-view .panel-code,.panels.split-view .panel-preview{flex:1}.panels.code-view .panel-preview{display:none}.panels.code-view .panel-code{flex:1}.panels.preview-view .panel-code{display:none}.panels.preview-view .panel-preview{flex:1}.panel{flex-direction:column;min-width:0;display:flex}.panel-header{background:var(--c-bg-2);border-bottom:1px solid var(--c-border);flex-shrink:0;justify-content:space-between;align-items:center;padding:.6rem 1rem;display:flex}.panel-label{color:var(--c-text-2);font-size:.8rem;font-weight:600}.panel-meta{color:var(--c-text-3);font-size:.75rem;font-family:var(--font-mono)}.device-switcher{gap:4px;display:flex}.device-btn{cursor:pointer;width:32px;height:28px;transition:all var(--dur);background:0 0;border:1px solid #0000;border-radius:6px;place-items:center;font-size:.85rem;display:grid}.device-btn.active{background:var(--c-surface);border-color:var(--c-border)}.device-btn:hover:not(.active){background:#ffffff0a}.preview-wrap{transition:padding var(--dur);background:#fff;flex:1;justify-content:center;display:flex;overflow:hidden}.preview-wrap.tablet-mode,.preview-wrap.mobile-mode{background:var(--c-bg-2);padding:1rem}#previewFrame{width:100%;height:100%;transition:all var(--dur) var(--ease-out);border:none}.preview-wrap.tablet-mode #previewFrame{border-radius:var(--radius-md);max-width:768px;box-shadow:var(--shadow-lg)}.preview-wrap.mobile-mode #previewFrame{border-radius:var(--radius-md);max-width:375px;box-shadow:var(--shadow-lg)}.code-output{background:var(--c-bg);color:var(--c-text);font-family:var(--font-mono);white-space:pre-wrap;word-break:break-word;flex:1;margin:0;padding:1rem;font-size:.82rem;line-height:1.7;overflow:auto}#footer{text-align:center;border-top:1px solid var(--c-border);padding:3rem 2rem}.footer-inner{max-width:600px;margin:0 auto}#footer p{font-size:1rem;font-weight:600}.footer-sub{color:var(--c-text-3);margin-top:.5rem;font-size:.85rem!important;font-weight:400!important}@media (width<=768px){#topnav{padding:0 1rem}.nav-btn-text span{display:none}#hero{min-height:40vh}#hero h1{font-size:1.8rem}.hero-sub{font-size:.95rem}.provider-grid{grid-template-columns:repeat(2,1fr)}.provider-name{font-size:.75rem}.toolbar{flex-direction:column;align-items:stretch}.toolbar-left,.toolbar-right{flex-wrap:wrap;justify-content:center}.panels{flex-direction:column;height:auto}.panel-preview,.panel-code{height:400px}.toolbar-btn span,.view-btn span{display:none}}@media (width<=480px){.provider-grid{grid-template-columns:1fr 1fr}}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--c-surface-2);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--c-text-3)}