body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.DraftEditor-editorContainer,.DraftEditor-root,.public-DraftEditor-content{height:inherit;text-align:left;text-align:initial}.public-DraftEditor-content[contenteditable=true]{-webkit-user-modify:read-write-plaintext-only}.DraftEditor-root{position:relative}.DraftEditor-editorContainer{background-color:#fff0;border-left:.1px solid #0000;position:relative;z-index:1}.public-DraftEditor-block{position:relative}.DraftEditor-alignLeft .public-DraftStyleDefault-block{text-align:left}.DraftEditor-alignLeft .public-DraftEditorPlaceholder-root{left:0;text-align:left}.DraftEditor-alignCenter .public-DraftStyleDefault-block{text-align:center}.DraftEditor-alignCenter .public-DraftEditorPlaceholder-root{margin:0 auto;text-align:center;width:100%}.DraftEditor-alignRight .public-DraftStyleDefault-block{text-align:right}.DraftEditor-alignRight .public-DraftEditorPlaceholder-root{right:0;text-align:right}.public-DraftEditorPlaceholder-root{color:#9197a3;position:absolute;width:100%;z-index:1}.public-DraftEditorPlaceholder-hasFocus{color:#bdc1c9}.DraftEditorPlaceholder-hidden{display:none}.public-DraftStyleDefault-block{position:relative;white-space:pre-wrap}.public-DraftStyleDefault-ltr{direction:ltr;text-align:left}.public-DraftStyleDefault-rtl{direction:rtl;text-align:right}.public-DraftStyleDefault-listLTR{direction:ltr}.public-DraftStyleDefault-listRTL{direction:rtl}.public-DraftStyleDefault-ol,.public-DraftStyleDefault-ul{margin:16px 0;padding:0}.public-DraftStyleDefault-depth0.public-DraftStyleDefault-listLTR{margin-left:1.5em}.public-DraftStyleDefault-depth0.public-DraftStyleDefault-listRTL{margin-right:1.5em}.public-DraftStyleDefault-depth1.public-DraftStyleDefault-listLTR{margin-left:3em}.public-DraftStyleDefault-depth1.public-DraftStyleDefault-listRTL{margin-right:3em}.public-DraftStyleDefault-depth2.public-DraftStyleDefault-listLTR{margin-left:4.5em}.public-DraftStyleDefault-depth2.public-DraftStyleDefault-listRTL{margin-right:4.5em}.public-DraftStyleDefault-depth3.public-DraftStyleDefault-listLTR{margin-left:6em}.public-DraftStyleDefault-depth3.public-DraftStyleDefault-listRTL{margin-right:6em}.public-DraftStyleDefault-depth4.public-DraftStyleDefault-listLTR{margin-left:7.5em}.public-DraftStyleDefault-depth4.public-DraftStyleDefault-listRTL{margin-right:7.5em}.public-DraftStyleDefault-unorderedListItem{list-style-type:square;position:relative}.public-DraftStyleDefault-unorderedListItem.public-DraftStyleDefault-depth0{list-style-type:disc}.public-DraftStyleDefault-unorderedListItem.public-DraftStyleDefault-depth1{list-style-type:circle}.public-DraftStyleDefault-orderedListItem{list-style-type:none;position:relative}.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-listLTR:before{left:-36px;position:absolute;text-align:right;width:30px}.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-listRTL:before{position:absolute;right:-36px;text-align:left;width:30px}.public-DraftStyleDefault-orderedListItem:before{content:counter(ol0) ". ";counter-increment:ol0}.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth1:before{content:counter(ol1,lower-alpha) ". ";counter-increment:ol1}.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth2:before{content:counter(ol2,lower-roman) ". ";counter-increment:ol2}.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth3:before{content:counter(ol3) ". ";counter-increment:ol3}.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth4:before{content:counter(ol4,lower-alpha) ". ";counter-increment:ol4}.public-DraftStyleDefault-depth0.public-DraftStyleDefault-reset{counter-reset:ol0}.public-DraftStyleDefault-depth1.public-DraftStyleDefault-reset{counter-reset:ol1}.public-DraftStyleDefault-depth2.public-DraftStyleDefault-reset{counter-reset:ol2}.public-DraftStyleDefault-depth3.public-DraftStyleDefault-reset{counter-reset:ol3}.public-DraftStyleDefault-depth4.public-DraftStyleDefault-reset{counter-reset:ol4}:root{--primary:#007aff;--secondary:#5856d6;--background:#fff;--background-secondary:#f2f2f7;--text:#000;--text-secondary:#6c6c6c;--border:#e5e5ea;--hover:#f5f5f5;--accent:#0e639c;--accentHover:#17b;--error:#f48771;--success:#89d185}body{background-color:linear-gradient(135deg,#6e8efb,#a777e3);color:#000;color:var(--text)}.main-window{background-color:#fff;background-color:var(--background);display:flex;height:100vh;overflow:auto;width:100vw}.left-panel{height:100%;min-width:0;overflow:auto}.right-panel{border-left:1px solid #e5e5ea;border-left:1px solid var(--border);flex:0 0 300px}.left-panel,.right-panel{display:flex;flex-direction:column;overflow:hidden}.left-panel{border-right:1px solid #e5e5ea;border-right:1px solid var(--border)}.right-panel{flex:1 1}.app-controls,.right-panel{background-color:var(--secondaryBackground)}.app-controls{border-bottom:1px solid #e5e5ea;border-bottom:1px solid var(--border);flex-shrink:0;padding:8px}.app-button{background-color:var(--tertiaryBackground);border:1px solid #e5e5ea;border:1px solid var(--border);border-radius:4px;color:#000;color:var(--text);padding:6px 12px}.app-button:hover{background-color:var(--secondaryBackground)}.app-button.active{background-color:#0e639c;background-color:var(--accent);border-color:#0e639c;border-color:var(--accent)}.preview-content{color:#000;color:var(--text);overflow:auto}.browser-header,.preview-content{background-color:var(--secondaryBackground)}.browser-header{align-items:center;border-bottom:1px solid #e5e5ea;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;padding:16px}.section-title{color:#000;color:var(--text);font-size:13px;font-weight:400;letter-spacing:.5px;margin:0;text-transform:uppercase}.history-count{background-color:var(--tertiaryBackground);border-radius:4px;color:var(--secondaryText);font-size:12px;padding:2px 8px}.app-list{padding:8px}.app-item{background-color:var(--secondaryBackground);border:1px solid #e5e5ea;border:1px solid var(--border);border-radius:6px;cursor:pointer;margin:4px 0;transition:background-color .2s ease}.app-item:hover{background-color:var(--tertiaryBackground)}.app-prompt-container{padding:12px}.component-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:8px}.component-name{background-color:var(--backgroundSecondary);border-radius:4px;color:#0e639c;color:var(--accent);font-family:Consolas,Monaco,monospace;font-size:13px;font-weight:bolder;max-width:200px;overflow:hidden;padding:4px 8px;text-overflow:ellipsis;white-space:nowrap;width:100%}.button-group{display:flex;gap:6px}.load-button{align-items:center;background-color:#0e639c;background-color:var(--accent);border:none;border-radius:4px;color:#fff;cursor:pointer;display:flex;font-size:12px;gap:4px;padding:4px 8px}.load-button:hover{background-color:#17b;background-color:var(--accentHover)}.delete-button{border:none;border-radius:4px;color:#d4d4d4;cursor:pointer;font-size:12px;opacity:.8;padding:4px 8px;transition:background-color .2s ease}.delete-button,.delete-button:hover{background-color:#f48771;background-color:var(--error)}.delete-button:hover{opacity:1}.app-prompt{-webkit-line-clamp:3;-webkit-box-orient:vertical;display:-webkit-box;font-size:12px;line-height:1.4;margin:0;overflow:hidden;white-space:pre-wrap}.app-prompt,.timestamp{color:var(--secondaryText)}.timestamp{font-size:11px;margin-top:8px}.empty-history{align-items:center;color:var(--secondaryText);display:flex;flex-direction:column;height:100%;justify-content:center;padding:24px;text-align:center}.empty-history-icon{font-size:24px;margin-bottom:12px;opacity:.5}.empty-history-text{font-size:13px}.build-editor{background-color:#fff;background-color:var(--background);display:flex;flex-direction:column;height:100%}.component-name-container{background-color:var(--secondaryBackground);border-bottom:1px solid #e5e5ea;border-bottom:1px solid var(--border);padding:8px}.component-name-input{background-color:var(--tertiaryBackground);border:1px solid #e5e5ea;border:1px solid var(--border);border-radius:4px;color:#000;color:var(--text);font-family:Consolas,Monaco,monospace;padding:8px 12px;width:200px}.editor-container{flex:1 1;overflow-y:auto;padding:16px}.DraftEditor-root{color:#000;color:var(--text);font-family:Consolas,Monaco,monospace;font-size:14px;line-height:1.5}.build-actions{background-color:var(--secondaryBackground);border-top:1px solid #e5e5ea;border-top:1px solid var(--border);display:flex;gap:8px;justify-content:flex-end;padding:12px}.magic-button{background-color:#0e639c;background-color:var(--accent);border:none;border-radius:4px;color:#fff;cursor:pointer;padding:8px 16px}.magic-button:hover{background-color:#17b;background-color:var(--accentHover)}.secondary-button{background-color:var(--tertiaryBackground);border:1px solid #e5e5ea;border:1px solid var(--border);color:#000;color:var(--text)}.preview-error{margin:8px}.build-processing{align-items:center;background-color:var(--secondaryBackground);border-top:1px solid #e5e5ea;border-top:1px solid var(--border);color:#000;color:var(--text);display:flex;gap:8px;padding:8px 12px}.react-live-preview{overflow:hidden}.chat-interface{display:flex;flex-direction:column;height:100%}.tab-header{background-color:var(--secondaryBackground);border-bottom:1px solid #e5e5ea;border-bottom:1px solid var(--border);display:flex;height:35px;padding-top:2px}.tab{align-items:center;background-color:var(--tertiaryBackground);border:none;color:var(--secondaryText);cursor:pointer;display:flex;font-size:13px;gap:6px;height:33px;justify-content:center;margin-right:1px;min-width:100px;padding:0 16px;position:relative;-webkit-user-select:none;user-select:none}.tab.active{background-color:#fff;background-color:var(--background);color:#000;color:var(--text)}.tab:hover:not(.active){background-color:#2d2d2d}.tab.active:before{background-color:#0e639c;background-color:var(--accent);content:"";height:2px;left:0;position:absolute;right:0;top:0}.tab-icon{font-size:14px;opacity:.8}.tab.active .tab-icon{opacity:1}.tab-content{background-color:#1e1e1e;flex:1 1;overflow:auto}.tab:after{background-color:#007acc;border-radius:50%;content:"";height:6px;opacity:0;position:absolute;right:10px;top:50%;transform:translateY(-50%);width:6px}.tab.modified:after{opacity:1}.chat-container{flex-direction:column;height:100%}.chat-container,.messages-container{background-color:#fff;background-color:var(--background);display:flex}.messages-container{flex:1 1;flex-direction:column;gap:16px;overflow-y:auto;padding:16px}.message{align-items:flex-start;display:flex;gap:8px;max-width:80%;padding:4px 0}.message.user{align-self:flex-end;flex-direction:row-reverse}.message.assistant{align-self:flex-start}.message-avatar{align-items:center;border-radius:50%;display:flex;flex-shrink:0;font-size:14px;height:28px;justify-content:center;width:28px}.message.user .message-avatar{background-color:#0e639c;color:#fff}.message.assistant .message-avatar{background-color:#4ec9b0;color:#1e1e1e}.message-content{word-wrap:break-word;background-color:var(--tertiaryBackground);border-radius:12px;color:#000;color:var(--text);font-size:14px;line-height:1.5;padding:8px 12px;position:relative;white-space:pre-wrap}.message.user .message-content{background-color:#0e639c;background-color:var(--accent);border-top-right-radius:4px;color:#fff}.message.assistant .message-content{background-color:#2d2d2d;border-top-left-radius:4px;color:#d4d4d4}.message-content pre{background-color:#1e1e1e;border-radius:4px;margin:8px 0;overflow-x:auto;padding:8px}.message.user .message-content pre{background-color:#0000004d}.message-content code{font-family:Consolas,Monaco,monospace;font-size:13px}.chat-input-container{background-color:var(--secondaryBackground);border-top:1px solid #e5e5ea;border-top:1px solid var(--border);padding:16px}.chat-input-wrapper{display:flex;gap:8px}.chat-input{background-color:var(--tertiaryBackground);border:1px solid #e5e5ea;border:1px solid var(--border);border-radius:8px;color:#000;color:var(--text);flex:1 1;font-size:14px;line-height:1.5;max-height:120px;min-height:40px;padding:10px 12px;resize:none}.chat-input:focus{border-color:#0e639c;border-color:var(--accent);outline:none}.send-button{align-items:center;align-self:flex-end;background-color:#0e639c;border:none;border-radius:8px;color:#fff;cursor:pointer;display:flex;font-size:14px;gap:6px;height:40px;padding:8px 16px}.send-button:hover{background-color:#17b}.send-button:disabled{background-color:#2d2d2d;cursor:not-allowed}.typing-indicator{align-self:flex-start;background-color:var(--tertiaryBackground);border-radius:12px;border-top-left-radius:4px;display:flex;gap:4px;margin-left:36px;padding:12px}.toolbar{border-right:1px solid #e5e5ea;border-right:1px solid var(--border);justify-content:space-between}.toolbar-bottom,.toolbar-top{align-items:center;display:flex;flex-direction:column;gap:8px}.delete-all-button{align-items:center;border:none;color:#fff;display:flex;font-size:12px;gap:4px;height:32px;opacity:.8;padding:6px 12px;transition:background-color .2s ease}.delete-all-button,.delete-all-button:hover{background-color:#f48771;background-color:var(--error)}.delete-all-button:hover{opacity:1}.settings-button{align-items:center;display:flex;justify-content:center;padding:8px}.settings-button:hover{background-color:var(--tertiaryBackground);color:#0e639c;color:var(--accent)}.settings-button svg{height:16px;width:16px}.settings-overlay{align-items:center;background-color:#00000080;bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:1000}.settings-panel{background-color:#fff;background-color:var(--background);border:1px solid #e5e5ea;border:1px solid var(--border);border-radius:6px;box-shadow:0 4px 24px #0000004d;max-height:90vh;max-width:90vw;overflow:auto;width:600px}.settings-header{align-items:center;border-bottom:1px solid #e5e5ea;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;padding:16px}.settings-header h2{color:#000;color:var(--text);font-size:16px;margin:0}.close-button{background:none;border:none;color:var(--secondaryText);cursor:pointer;padding:4px}.close-button:hover{color:#000;color:var(--text)}.settings-content{padding:16px}.settings-section h3{font-size:14px;margin:0 0 16px}.theme-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}.theme-option{border:2px solid #0000;transition:border-color .2s ease}.theme-option.active{border-color:#0e639c;border-color:var(--accent)}.theme-preview{height:80px}.preview-header{background-color:var(--theme-secondary);height:20%}.preview-sidebar{background-color:var(--theme-secondary);bottom:0;left:0;position:absolute;top:20%;width:30%}.preview-content{background-color:var(--theme-bg);bottom:0;right:0;top:20%}.theme-name{display:block;font-size:12px;padding:8px;text-align:center}.theme-option{background-color:var(--secondaryBackground);border-radius:6px;overflow:hidden;padding-bottom:8px}.theme-info{display:flex;flex-direction:column;gap:8px;padding:8px}.theme-name{font-size:13px;font-weight:500}.theme-select-button{align-items:center;background-color:var(--tertiaryBackground);border:1px solid #e5e5ea;border:1px solid var(--border);border-radius:4px;color:#000;color:var(--text);cursor:pointer;display:flex;font-size:12px;gap:6px;justify-content:center;padding:6px 12px;transition:all .2s ease;width:100%}.theme-select-button:hover:not(.selected){background-color:#0e639c;background-color:var(--accent);border-color:#0e639c;border-color:var(--accent);color:#fff}.theme-select-button.selected{background-color:#89d185;background-color:var(--success);border-color:#89d185;border-color:var(--success);color:#fff;cursor:default}.theme-select-button svg{font-size:10px}.theme-grid{grid-gap:16px;display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));padding:4px}.theme-preview{background-color:var(--theme-bg);border:1px solid #e5e5ea;border:1px solid var(--border);border-radius:4px;height:100px;margin-bottom:8px;overflow:hidden;position:relative}.left-panel{background-color:#fff;background-color:var(--background);display:flex;flex:2 1;flex-direction:column;height:100vh}.panel-content,.preview-container{display:flex;flex:1 1;flex-direction:column;height:100%;overflow:auto;padding:16px;width:100%}.preview-container{align-items:center;background-color:var(--backgroundSecondary);border-radius:8px;justify-content:center;margin:0}.preview-content{margin:0 auto;max-width:800px;width:100%}.preview-error{background-color:color-mix(in srgb,#f48771 15%,#0000);background-color:color-mix(in srgb,var(--error) 15%,#0000);border:1px solid #f48771;border:1px solid var(--error);border-radius:4px;color:#f48771;color:var(--error);margin:16px;padding:12px}.app-browser{background-color:#fff;background-color:var(--background);display:flex;flex:1 1;flex-direction:column;height:100%}.app-list{flex:1 1;overflow-y:auto;padding:16px}.react-live-preview{-ms-overflow-style:none;background-color:#fff;background-color:var(--background);color:#000;color:var(--text);flex:1 1;height:100%;overflow-y:scroll;scrollbar-width:none;width:100%}.react-live-error{background-color:color-mix(in srgb,#f48771 15%,#0000);background-color:color-mix(in srgb,var(--error) 15%,#0000);border:1px solid #f48771;border:1px solid var(--error);border-radius:4px;bottom:16px;color:#f48771;color:var(--error);left:16px;padding:12px;position:absolute;right:16px;z-index:100}.react-live-preview::-webkit-scrollbar{display:none}.preview-content>div,.preview-content>div>div{-ms-overflow-style:none;overflow-y:scroll;scrollbar-width:none}.preview-container::-webkit-scrollbar{height:10px;width:10px}.preview-container::-webkit-scrollbar-track{background:#fff;background:var(--background)}.preview-container::-webkit-scrollbar-thumb{background:var(--tertiaryBackground);border:2px solid #fff;border:2px solid var(--background);border-radius:5px}.preview-container::-webkit-scrollbar-thumb:hover{background:var(--secondaryText)}.preview-container{scrollbar-color:var(--tertiaryBackground) #fff;scrollbar-color:var(--tertiaryBackground) var(--background);scrollbar-width:thin}.preview-content>div,.preview-content>div>div{margin:0;min-height:100%;padding:0;width:100%}.editor-view{background-color:#fff;background-color:var(--background);border-bottom:1px solid #e5e5ea;border-bottom:1px solid var(--border);padding:16px}.editor-view textarea{background-color:var(--tertiaryBackground)!important;border-radius:4px;color:#000!important;color:var(--text)!important;font-family:Consolas,Monaco,monospace!important;padding:12px!important}.components-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}.component-tile{border:1px solid var(--backgroundSecondary)}.component-tile-preview{padding:16px}.component-name{background:var(--backgroundSecondary)}.delete-tile-button{background:#0000;border:none;color:#000;color:var(--text);cursor:pointer;opacity:0;position:absolute;right:8px;top:8px;transition:opacity .2s}.component-tile:hover .delete-tile-button{opacity:1}.key-value-section{background-color:var(--tertiaryBackground);border-radius:8px;display:flex;flex-direction:column;gap:16px;padding:16px}.key-value-input{display:flex;gap:8px}.key-input,.value-input{background-color:#fff;background-color:var(--background);border:1px solid #e5e5ea;border:1px solid var(--border);border-radius:4px;color:#000;color:var(--text);flex:1 1;padding:8px 12px}.key-input:focus,.value-input:focus{border-color:#0e639c;border-color:var(--accent);outline:none}.add-pair-button,.delete-pair-button{align-items:center;background-color:#fff;background-color:var(--background);border:1px solid #e5e5ea;border:1px solid var(--border);border-radius:4px;color:#000;color:var(--text);cursor:pointer;display:flex;justify-content:center;padding:8px}.add-pair-button:hover{background-color:#0e639c;background-color:var(--accent);color:#fff}.delete-pair-button:hover{background-color:#f48771;background-color:var(--error);color:#fff}.add-pair-button:disabled{cursor:not-allowed;opacity:.5}.key-value-list{display:flex;flex-direction:column;gap:8px}.key-value-item{align-items:center;background-color:#fff;background-color:var(--background);border-radius:4px;display:flex;gap:8px;padding:8px 12px}.key-label{color:#0e639c;color:var(--accent);font-weight:500}.value-label{color:#000;color:var(--text);flex:1 1}.settings-section{margin-bottom:24px}.settings-section h3{color:#000;color:var(--text);font-size:1.1em;margin-bottom:16px}.themes-section{margin-bottom:24px}.theme-select{background-color:var(--tertiaryBackground);border-radius:8px;display:flex;flex-direction:column;gap:8px;padding:8px}.theme-option{align-items:center;background-color:#fff;background-color:var(--background);border-radius:4px;cursor:pointer;display:flex;gap:12px;padding:8px;transition:background-color .2s ease}.theme-option:hover{background-color:var(--secondaryBackground)}.theme-option.active{background-color:color-mix(in srgb,#0e639c 10%,#fff);background-color:color-mix(in srgb,var(--accent) 10%,var(--background))}.theme-color-preview{border-radius:4px;height:32px;overflow:hidden;position:relative;width:32px}.color-accent{bottom:0;height:4px;left:0;position:absolute;right:0}.theme-name{color:#000;color:var(--text);flex:1 1}.theme-check{color:#0e639c;color:var(--accent);font-size:14px}.theme-grid{display:none}.no-pairs{color:var(--secondaryText);font-style:italic;padding:16px;text-align:center}.left-panel{-ms-overflow-style:none;scrollbar-width:none}.left-panel::-webkit-scrollbar{display:none}.right-panel{-ms-overflow-style:none;scrollbar-width:none}.right-panel::-webkit-scrollbar{display:none}.panel-content{-ms-overflow-style:none;scrollbar-width:none}.panel-content::-webkit-scrollbar{display:none}.header{padding:16px}.header-title{flex:1 1}.header-title h1{color:#000;color:var(--text);font-size:24px;margin:0}.settings-button,.toggle-panel-button{align-items:center;background:none;border:none;border-radius:4px;color:#000;color:var(--text);cursor:pointer;display:flex;justify-content:center;padding:8px;transition:background-color .2s}.settings-button:hover,.toggle-panel-button:hover{background-color:#f5f5f5;background-color:var(--hover)}.right-panel.hidden{display:none}.logo{padding-left:200px;text-align:center}.main-editor-container{min-height:200px}.main-editor-container .DraftEditor-root{border:1px solid #e5e5ea;border:1px solid var(--border);border-radius:8px;margin:20px;min-height:130px;padding:20px}.editor-wrapper{align-items:center;display:flex;flex-direction:column;margin:10px auto;width:600px}.main-editor-container{justify-content:center;min-height:150px;width:100%}.main-editor-container .DraftEditor-root{color:#000;color:var(--text);font-family:Consolas,Monaco,monospace;font-size:14px;line-height:1.5;min-height:180px}.main-editor-container .public-DraftEditorPlaceholder-root{color:var(--textSecondary);pointer-events:none;position:absolute}.build-button{background-color:#007aff;background-color:var(--primary);border:none;border-radius:4px;color:#fff;cursor:pointer;font-size:14px;font-weight:500;margin-top:16px;padding:8px 24px;transition:background-color .2s;width:30%}.build-button:disabled{cursor:not-allowed;opacity:.7}.build-button:hover:not(:disabled){background-color:#f5f5f5;background-color:var(--hover)}.example-prompts h3{color:#000;color:var(--text);font-size:1rem;margin-bottom:16px;text-align:center}.prompt-grid{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(4,auto);padding:2px}.prompt-card{border-radius:2px;width:100%}.prompt-card h4{color:#000;color:var(--text);font-size:.9rem;font-weight:400;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.prompt-card p{color:var(--textSecondary);font-size:.8rem;line-height:.8;margin:0}.prompt-grid{-webkit-overflow-scrolling:touch;-ms-overflow-style:none;scroll-behavior:smooth;scrollbar-width:none}.prompt-grid::-webkit-scrollbar{display:none}.login-container{align-items:center;background:linear-gradient(135deg,#fff 0,var(--backgroundSecondary) 100%);background:linear-gradient(135deg,var(--background) 0,var(--backgroundSecondary) 100%);color:#000;color:var(--text);display:flex;flex-direction:column;justify-content:center;min-height:100vh;padding:20px}.login-container h1{color:#000;color:var(--text);font-size:2.5rem;margin-bottom:1rem}.login-container p{color:var(--textSecondary);margin-bottom:2rem}.google-signin-container{margin-top:1rem}.header-controls{gap:12px;margin-left:auto;padding-right:16px}.header-controls,.profile-picture-container{align-items:center;display:flex}.profile-picture:hover{cursor:pointer;transform:scale(1.1)}.settings-icon{color:#6c6c6c;color:var(--text-secondary);cursor:pointer;font-size:20px;transition:color .2s ease}.settings-icon:hover{color:#000;color:var(--text)}.profile-menu-container{position:relative}.profile-picture{border:2px solid #e5e5ea;border:2px solid var(--border);border-radius:50%;height:32px;object-fit:cover;transition:transform .2s ease;width:32px}.profile-picture:hover{transform:scale(1.05)}.profile-info{display:flex;flex-direction:column;gap:4px}.profile-email{color:var(--textSecondary)}.dropdown-item{align-items:center;background:none;border:none;color:#000;color:var(--text);cursor:pointer;display:flex;font-size:14px;padding:8px 16px;text-align:left;transition:background-color .2s ease;width:100%}.dropdown-item:hover{background-color:#f5f5f5;background-color:var(--hover)}.dropdown-item svg{font-size:16px;margin-right:8px}.profile-dropdown{background-color:#fff;background-color:var(--background);border:1px solid #e5e5ea;border:1px solid var(--border);border-radius:8px;box-shadow:0 2px 10px #0000001a;margin-top:8px;min-width:200px;position:absolute;right:0;top:100%;z-index:1000}.profile-info{border-bottom:1px solid #e5e5ea;border-bottom:1px solid var(--border);padding:12px 16px}.profile-name{color:#000;color:var(--text);display:block;font-weight:500;margin-bottom:4px}.profile-email{color:#6c6c6c;color:var(--text-secondary);display:block;font-size:12px}.login-container{background:linear-gradient(135deg,#fff 0,var(--backgroundSecondary) 50%,#007aff 100%);background:linear-gradient(135deg,var(--background) 0,var(--backgroundSecondary) 50%,var(--primary) 100%);background:radial-gradient(circle at top right,#007aff 0,#fff 50%,var(--backgroundSecondary) 100%);background:radial-gradient(circle at top right,var(--primary) 0,var(--background) 50%,var(--backgroundSecondary) 100%);background:linear-gradient(45deg,#fff 0,var(--backgroundSecondary) 25%,#007aff 50%,var(--backgroundSecondary) 75%,#fff 100%);background:linear-gradient(45deg,var(--background) 0,var(--backgroundSecondary) 25%,var(--primary) 50%,var(--backgroundSecondary) 75%,var(--background) 100%)}.components-grid{grid-gap:1rem;box-sizing:border-box;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));padding:1rem;width:100%}.component-tile{background:#fff;background:var(--background);border:1px solid #e5e5ea;border:1px solid var(--border);min-height:150px}.component-tile-preview{align-items:center;display:flex;justify-content:center;padding:1rem;transition:opacity .2s ease}.editor-grid{grid-gap:20px;display:grid;gap:20px;grid-template-columns:1fr 300px;height:100%;padding:16px}.main-editor-container{background-color:var(--backgroundSecondary);border-radius:8px;padding:16px;width:600px}.example-prompts{height:100%;overflow-y:auto}.prompt-grid{grid-gap:2px;display:grid;gap:2px;grid-template-columns:1fr;height:fit-content;padding-top:36px}.prompt-card{background-color:var(--backgroundSecondary);border:1px solid #e5e5ea;border:1px solid var(--border);border-radius:8px;cursor:pointer;min-width:0;min-width:auto;padding:6px;transition:transform .2s,border-color .2s;width:200px}.prompt-card:hover{border-color:#007aff;border-color:var(--primary);transform:translateY(-2px)}.main-editor-container{display:flex;flex-direction:column}.main-editor-container>div:last-child{display:flex;justify-content:center;margin-top:10px;width:100%}.toolbar{background-color:#fff;background-color:var(--background);border-left:1px solid #e5e5ea;border-left:1px solid var(--border);flex-direction:column;flex-shrink:0;padding:16px 0;width:64px}.toolbar,.toolbar-button{align-items:center;display:flex}.toolbar-button{background:none;border:none;border-radius:8px;color:#6c6c6c;color:var(--text-secondary);cursor:pointer;height:40px;justify-content:center;margin-bottom:8px;transition:all .2s;width:40px}.toolbar-button:hover{background-color:#f5f5f5;background-color:var(--hover);color:#000;color:var(--text)}.toolbar-button.active{background-color:#007aff;background-color:var(--primary);color:#fff}.profile-actions{border-top:1px solid #e5e5ea;border-top:1px solid var(--border);padding:8px 0}.profile-action-button{align-items:center;background:none;border:none;color:#000;color:var(--text);cursor:pointer;display:flex;font-size:14px;gap:12px;padding:8px 16px;transition:background-color .2s;width:100%}.profile-action-button:hover{background-color:var(--backgroundSecondary)}.profile-action-button svg{color:var(--textSecondary)}.profile-action-button span{flex:1 1;text-align:left}.header{align-items:center;background-color:#fff;background-color:var(--background);border-bottom:1px solid #e5e5ea;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;padding:8px 16px}.logo{color:#000;color:var(--text);font-size:20px;font-weight:500}.user-profile{align-items:center;display:flex;position:relative}.user-profile img{border-radius:50%;cursor:pointer;height:32px;transition:transform .2s ease;width:32px}.user-profile img:hover{transform:scale(1.05)}.component-tile{background:var(--backgroundSecondary);border:1px solid #000;border:1px solid var(--text);border-radius:8px;display:flex;flex-direction:column;height:400px;overflow:hidden;padding-right:16px;position:relative}.component-tile-preview{cursor:pointer;flex:1 1;overflow:hidden;position:relative}.preview-wrapper{height:300%;left:0;pointer-events:none;position:absolute;top:0;transform:scale(.33);transform-origin:0 0;width:300%}.preview-wrapper>div{align-items:center;display:flex;height:100%;justify-content:center;width:100%}.component-name{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:rgba(var(--backgroundSecondary-rgb),.9);border-top:1px solid #e5e5ea;border-top:1px solid var(--border);bottom:0;color:#000;color:var(--text);font-size:14px;left:0;padding:8px;position:absolute;right:0;text-align:center}.components-grid{grid-gap:16px;display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(450px,1fr));height:auto;margin-right:16px;overflow:visible;padding:16px}