.home-container{min-height:100vh;padding:0;background:linear-gradient(180deg,#09090b,#0c0c10 50%,#09090b);position:relative}.home-container:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background-image:linear-gradient(rgba(139,92,246,.03) 1px,transparent 0),linear-gradient(90deg,rgba(139,92,246,.03) 1px,transparent 0);background-size:60px 60px;pointer-events:none}.home-header{justify-content:space-between;padding:.875rem 2rem;border-bottom:1px solid hsla(0,0%,100%,.06);background:rgba(9,9,11,.8);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);position:-webkit-sticky;position:sticky;top:0;z-index:100}.header-logo,.home-header{display:flex;align-items:center}.header-logo{gap:.625rem;text-decoration:none;transition:opacity .2s}.header-logo:hover{opacity:.8}.header-logo img{border-radius:8px}.header-logo span{font-size:1.25rem;font-weight:700;color:#fff;letter-spacing:-.02em}.header-actions{display:flex;align-items:center;gap:.75rem}.studio-badge{font-size:.75rem;font-weight:600;color:#8b5cf6;background:rgba(139,92,246,.15);border:1px solid rgba(139,92,246,.3);padding:.25rem .625rem;border-radius:6px;text-transform:uppercase;letter-spacing:.05em}.settings-toggle{padding:.625rem 1rem;background:hsla(0,0%,100%,.05);border:1px solid hsla(0,0%,100%,.08);border-radius:8px;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s;color:#a1a1aa}.settings-toggle:hover{background:hsla(0,0%,100%,.08);border-color:rgba(139,92,246,.3);color:#fff}.settings-panel{margin:0;background:#18181b;position:relative;z-index:50}.settings-header,.settings-panel{border-bottom:1px solid hsla(0,0%,100%,.06)}.settings-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 2rem}.settings-header h3{font-size:.875rem;font-weight:600;color:#fff;margin:0}.close-button{width:28px;height:28px;border:none;background:hsla(0,0%,100%,.05);font-size:1.25rem;color:#71717a;cursor:pointer;border-radius:6px;display:flex;align-items:center;justify-content:center;transition:all .2s}.close-button:hover{background:hsla(0,0%,100%,.1);color:#fff}.settings-content{padding:1.25rem 2rem;display:flex;flex-direction:column;gap:.75rem}.settings-row{display:flex;gap:1rem;align-items:flex-end}.settings-content .form-group{display:flex;flex-direction:column;gap:.5rem}.settings-content .provider-group{min-width:180px}.settings-content .api-key-group{flex:1 1;min-width:280px}.settings-content .form-group label{font-size:.75rem;font-weight:500;color:#a1a1aa;text-transform:uppercase;letter-spacing:.05em}.settings-content .form-group input,.settings-content .form-group select{background:#09090b;border:1px solid hsla(0,0%,100%,.1);border-radius:8px;color:#fff;height:42px;padding:0 .875rem;font-size:.875rem;transition:all .2s}.settings-content .form-group input:focus,.settings-content .form-group select:focus{outline:none;border-color:rgba(139,92,246,.5);box-shadow:0 0 0 3px rgba(139,92,246,.1)}.api-key-input{display:flex;gap:.5rem}.api-key-input input{flex:1 1}.toggle-visibility{padding:0 .75rem;background:hsla(0,0%,100%,.05);border:1px solid hsla(0,0%,100%,.1);border-radius:8px;cursor:pointer;font-size:1rem;height:42px;display:flex;align-items:center;justify-content:center;transition:all .2s}.toggle-visibility:hover{background:hsla(0,0%,100%,.08)}.settings-content>.help-text{font-size:.8rem;color:#71717a;margin-left:calc(180px + 1rem)}.help-text a{color:#8b5cf6;text-decoration:none;transition:color .2s}.help-text a:hover{color:#a78bfa;text-decoration:underline}.save-settings-button{padding:0 1.25rem;background:linear-gradient(135deg,#8b5cf6,#6366f1);color:#fff;border:none;border-radius:8px;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s;height:42px;white-space:nowrap}.save-settings-button:hover{opacity:.9;transform:translateY(-1px);box-shadow:0 4px 12px rgba(139,92,246,.3)}@media (max-width:768px){.settings-row{flex-direction:column;align-items:stretch}.settings-content .api-key-group,.settings-content .provider-group{min-width:100%}.settings-content>.help-text{margin-left:0}}.home-main{max-width:1200px;margin:0 auto;padding:2.5rem 2rem;position:relative;z-index:1}.create-section{background:linear-gradient(135deg,rgba(139,92,246,.1),rgba(99,102,241,.1));border:1px solid rgba(139,92,246,.2);border-radius:16px;padding:2rem;margin-bottom:3rem;position:relative;overflow:hidden}.create-section:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(139,92,246,.5),transparent)}.create-section h2{font-size:1.25rem;font-weight:600;margin-bottom:1.5rem;color:#fff;display:flex;align-items:center;gap:.5rem}.create-section h2:before{content:"✨"}.create-form{display:grid;grid-template-columns:1fr 1fr;grid-gap:1rem;gap:1rem}.create-form .form-group:nth-child(2){grid-column:1/-1}.form-group{display:flex;flex-direction:column;gap:.5rem}.create-section .form-group label{font-size:.75rem;font-weight:500;color:#a1a1aa;text-transform:uppercase;letter-spacing:.05em}.form-group input,.form-group select,.form-group textarea{padding:.75rem 1rem;border:1px solid hsla(0,0%,100%,.1);border-radius:8px;font-size:.875rem;font-family:inherit;transition:all .2s;background:rgba(9,9,11,.6);color:#fff}.form-group input::placeholder,.form-group textarea::placeholder{color:#52525b}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:rgba(139,92,246,.5);box-shadow:0 0 0 3px rgba(139,92,246,.1);background:rgba(9,9,11,.8)}.form-group textarea{resize:vertical;min-height:100px}.create-button{grid-column:1/-1;padding:.875rem 1.5rem;background:linear-gradient(135deg,#8b5cf6,#6366f1);color:#fff;border:none;border-radius:8px;font-size:.9375rem;font-weight:600;cursor:pointer;transition:all .2s;margin-top:.5rem}.create-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 24px rgba(139,92,246,.4)}.create-button:disabled{opacity:.5;cursor:not-allowed}@media (max-width:640px){.create-form{grid-template-columns:1fr}.create-button,.create-form .form-group:nth-child(2){grid-column:1}}.designs-section{margin-top:2rem}.designs-section h2{font-size:1.125rem;font-weight:600;margin-bottom:1.25rem;color:#fff;display:flex;align-items:center;gap:.5rem}.designs-section h2:before{content:"📁"}.empty-state,.loading{text-align:center;padding:4rem 2rem;color:#71717a;background:hsla(0,0%,100%,.02);border:1px dashed hsla(0,0%,100%,.1);border-radius:12px}.empty-state p:first-child{font-size:1rem;color:#a1a1aa;margin-bottom:.5rem}.designs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));grid-gap:1rem;gap:1rem}.design-card{background:hsla(0,0%,100%,.02);border:1px solid hsla(0,0%,100%,.06);border-radius:12px;padding:1.25rem;transition:all .2s;display:block;position:relative;overflow:hidden}.design-card:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,#8b5cf6,#6366f1);opacity:0;transition:opacity .2s}.design-card:hover{background:hsla(0,0%,100%,.04);border-color:rgba(139,92,246,.3);transform:translateY(-2px)}.design-card:hover:before{opacity:1}.design-card-header{display:flex;justify-content:space-between;align-items:start;margin-bottom:.75rem}.design-card-header h3{font-size:1rem;font-weight:600;color:#fff;line-height:1.4}.design-id{font-size:.75rem;color:#52525b;font-family:SF Mono,Fira Code,monospace;background:hsla(0,0%,100%,.05);padding:.25rem .5rem;border-radius:4px}.design-card-meta{font-size:.8125rem;color:#71717a}