@import "https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap";:root{--font-title:"Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-body:"Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--bg-app:#f8fafc;--glass-bg:#fff;--glass-bg-hover:#f1f5f9;--glass-border:#0f172a14;--glass-border-active:#ff8b13;--text-main:#0f172a;--text-muted:#475569;--text-light:#94a3b8;--primary:#ff8b13;--primary-hover:#d97000;--secondary:#0d9488;--accent:#d97706;--pink:#db2777;--danger:#ef4444;--success:#10b981;--shadow-base:0 4px 16px #0f172a08;--shadow-hover:0 12px 32px #ff8b130f, 0 4px 12px #0f172a05;--shadow-inset:inset 0 1.5px 3px #0f172a08;--radius-sm:8px;--radius-md:12px;--radius-lg:20px;--radius-full:9999px;--nav-bg:#ffffffbf;--nav-border:#fff9;--nav-inset-shadow:inset 0 1px 0 #ffffff80;--nav-btn-hover-bg:#0f172a0a;--kbd-inactive-bg:#0f172a0d;--kbd-inactive-border:#0f172a14;--kbd-bg:#fff;--kbd-border:#ff8b1340;--input-bg:#fff;--input-border:#0f172a1f;--input-bg-focus:#fff;--slider-track-bg:#1c191714;--scrollbar-thumb-bg:#00000014;--scrollbar-thumb-hover-bg:#0000002e;--btn-secondary-bg:#fff;--btn-secondary-border:#0f172a1f;--btn-secondary-border-hover:#0f172a40;--modal-bg:#fffcf9;--modal-backdrop:#2b252066;--widget-add-btn-hover-bg:#fff9f5;--widget-add-btn-icon-bg:#0f172a0d}body.dark-theme{--bg-app:#090d16;--glass-bg:#141b2dd9;--glass-bg-hover:#1e2945e6;--glass-border:#ffffff14;--glass-border-active:#ff8b13;--text-main:#f1f5f9;--text-muted:#94a3b8;--text-light:#64748b;--shadow-base:0 4px 20px #0006;--shadow-hover:0 12px 36px #ff8b131f, 0 4px 16px #0000004d;--shadow-inset:inset 0 1.5px 3px #0000004d;--nav-bg:#141b2dbf;--nav-border:#ffffff1a;--nav-inset-shadow:inset 0 1px 0 #ffffff0d;--nav-btn-hover-bg:#ffffff0d;--kbd-inactive-bg:#ffffff14;--kbd-inactive-border:#ffffff1a;--kbd-bg:#334155;--kbd-border:#ff8b1359;--input-bg:#1e293b;--input-border:#ffffff26;--input-bg-focus:#1e293b;--slider-track-bg:#ffffff1a;--scrollbar-thumb-bg:#ffffff26;--scrollbar-thumb-hover-bg:#ffffff40;--btn-secondary-bg:#1e293b;--btn-secondary-border:#ffffff26;--btn-secondary-border-hover:#ffffff4d;--modal-bg:#1e293b;--modal-backdrop:#0009;--widget-add-btn-hover-bg:#ff8b131a;--widget-add-btn-icon-bg:#ffffff14}.rainbow-text{background:linear-gradient(90deg,#ef4444,#f97316,#eab308,#22c55e,#3b82f6,#6366f1,#a855f7);-webkit-text-fill-color:transparent;background-size:200%;-webkit-background-clip:text;animation:5s linear infinite rainbow-shift}@keyframes rainbow-shift{to{background-position:200%}}.top-nav-wrapper{grid-template-columns:290px 1fr 330px;gap:16px;width:100%;margin-top:4px;margin-bottom:2px;padding:0 16px;display:grid}.top-nav-container{background:var(--nav-bg);-webkit-backdrop-filter:blur(20px);border:1px solid var(--nav-border);box-shadow:0 4px 16px #0f172a0a, 0 1px 3px #0f172a05, var(--nav-inset-shadow);z-index:95;border-radius:9999px;grid-column:2;place-self:center;gap:6px;padding:6px 8px;display:flex}.top-nav-container .nav-tab-btn{color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:9999px;align-items:center;gap:8px;padding:8px 18px;font-size:13px;font-weight:600;transition:all .25s cubic-bezier(.4,0,.2,1);display:flex;border-bottom:none!important}.top-nav-container .nav-tab-btn:hover{color:var(--text-main);background:var(--nav-btn-hover-bg);transform:translateY(-1px)}.top-nav-container .nav-tab-btn.active{background:linear-gradient(135deg,#ff9f3a,#ff8b13);transform:translateY(-1px);box-shadow:0 4px 14px #ff8b1359,0 1px 2px #ff8b1326;color:#fff!important;border-bottom:none!important}.top-nav-container .nav-tab-btn.active:hover{background:linear-gradient(135deg,#ff8b13,#d97000);transform:translateY(-1.5px);box-shadow:0 6px 18px #ff8b1373,0 1px 2px #ff8b1326}.top-nav-container .nav-tab-btn:active{transform:translateY(0)scale(.96)}.top-nav-container kbd{border-radius:4px;margin-left:6px;padding:1px 4px;font-family:monospace;font-size:9px;font-weight:700;transition:all .2s}.top-nav-container .nav-tab-btn.active kbd{color:#fff;background:#fff3;border:1px solid #ffffff40}.top-nav-container .nav-tab-btn:not(.active) kbd{background:var(--kbd-inactive-bg);color:var(--text-muted);border:1px solid var(--kbd-inactive-border)}*{box-sizing:border-box;-webkit-font-smoothing:antialiased;margin:0;padding:0}body{font-family:var(--font-body);background-color:var(--bg-app);color:var(--text-main);min-height:100vh;position:relative;overflow:hidden}body:before{content:"";opacity:.06;pointer-events:none;z-index:9999;background-image:linear-gradient(90deg,#ff8b1326 1px,#0000 1px),linear-gradient(#ff8b1326 1px,#0000 1px);background-size:32px 32px;width:100vw;height:100vh;position:fixed;top:0;left:0}kbd{font-family:var(--font-body);background:var(--kbd-bg);border:1px solid var(--kbd-border);color:var(--primary);vertical-align:middle;text-transform:uppercase;border-bottom:2px solid #ff8b1366;border-radius:4px;justify-content:center;align-items:center;margin-left:6px;padding:2px 6px;font-size:8px;font-weight:800;line-height:1;display:inline-flex;box-shadow:0 1px 3px #ff8b1314}h1,h2,h3,h4,h5,h6{font-family:var(--font-title);color:var(--text-main);font-weight:600}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb-bg);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover-bg)}.app-container{flex-direction:column;width:100vw;height:100vh;display:flex;overflow:hidden}.glass-panel{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius-md);box-shadow:var(--shadow-base);transition:all .3s cubic-bezier(.4,0,.2,1)}.glass-panel-hover:hover{background:var(--glass-bg-hover);border-color:var(--glass-border-active);box-shadow:var(--shadow-hover);transform:translateY(-1px)}.app-header{z-index:100;border:1px solid var(--glass-border);border-radius:var(--radius-md);background:var(--glass-bg);height:70px;min-height:70px;box-shadow:var(--shadow-base);justify-content:space-between;align-items:center;gap:16px;margin:12px 16px 4px;padding:0 24px;display:flex}.logo-section{align-items:center;gap:12px;display:flex}.logo-icon{border-radius:var(--radius-sm);color:var(--primary);background:#3730a30f;border:1px solid #3730a326;justify-content:center;align-items:center;padding:8px;display:flex}.logo-text-title{font-family:var(--font-title);letter-spacing:-.5px;color:var(--text-main);font-size:20px;font-weight:700}.logo-text-subtitle{color:var(--text-muted);letter-spacing:1.5px;font-size:9px;font-weight:700}.nav-tabs-container{border-radius:var(--radius-md);background:#0f172a0a;border:1px solid #0f172a14;padding:4px;display:flex}.nav-tab-btn{border-radius:var(--radius-sm) var(--radius-sm) 0 0;color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-bottom:2px solid #0000;align-items:center;gap:6px;padding:8px 18px;font-size:12px;font-weight:700;transition:all .2s;display:flex}.nav-tab-btn:hover{color:var(--text-main)}.nav-tab-btn.active{background:var(--glass-bg-hover);color:var(--primary);border-bottom:2px solid var(--primary);box-shadow:0 4px 12px #0f172a08}.header-actions-group{align-items:center;gap:10px;display:flex}.connection-pill{border-radius:var(--radius-md);background:#0f172a0a;border:1px solid #0f172a14;align-items:center;gap:8px;padding:4px 4px 4px 12px;transition:all .2s;display:flex}.connection-pill:focus-within{border-color:var(--glass-border-active);background:#fff}.wifi-label-icon{color:var(--secondary);align-items:center;display:flex}.app-workspace{flex:1;padding:8px 16px 16px;overflow:hidden}.studio-grid-layout{grid-template-columns:290px 1fr 330px;gap:16px;width:100%;height:100%;display:grid}.workspace-panel{flex-direction:column;height:100%;padding:20px;display:flex;overflow:hidden}.panel-header{font-family:var(--font-title);color:var(--text-main);text-transform:none;letter-spacing:normal;border-bottom:1px dashed var(--glass-border);justify-content:space-between;align-items:center;margin-bottom:16px;padding-bottom:8px;font-size:14px;font-weight:700;display:flex}.scrollable-content{flex:1;padding-right:4px;overflow-y:auto}.scene-dropdown-group{gap:8px;margin-bottom:24px;display:flex}.widget-adder-grid{grid-template-columns:1fr 1fr 1fr;gap:7px;margin-bottom:24px;display:grid}.widget-add-btn{background:var(--btn-secondary-bg);border:1px solid var(--btn-secondary-border);border-radius:var(--radius-sm);text-transform:uppercase;letter-spacing:.3px;color:var(--text-muted);cursor:pointer;box-shadow:var(--shadow-base);flex-direction:column;align-items:center;gap:6px;padding:10px 6px 8px;font-size:9px;font-weight:700;transition:all .2s;display:flex;position:relative;overflow:visible}.widget-add-btn .btn-icon-wrap{background:var(--widget-add-btn-icon-bg);border-radius:8px;justify-content:center;align-items:center;width:30px;height:30px;transition:background .2s;display:flex}.widget-add-btn:hover .btn-icon-wrap{color:var(--primary);background:#ff8b131a}.widget-add-btn:hover{background:var(--widget-add-btn-hover-bg);color:var(--primary);z-index:10;border-color:#ff8b134d;transform:translateY(-2px);box-shadow:0 4px 12px #ff8b131a}.widget-add-btn .btn-tooltip{color:#f8fafc;text-transform:none;letter-spacing:0;white-space:nowrap;pointer-events:none;opacity:0;z-index:9999;background:#1e293b;border-radius:6px;padding:6px 10px;font-size:10px;font-weight:500;transition:all .18s;position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%)scale(.85);box-shadow:0 4px 12px #00000040}.widget-add-btn .btn-tooltip:after{content:"";border:5px solid #0000;border-top-color:#1e293b;position:absolute;top:100%;left:50%;transform:translate(-50%)}.widget-add-btn:hover .btn-tooltip{opacity:1;transform:translate(-50%)scale(1)}.widget-add-btn:nth-child(3n+1) .btn-tooltip{left:0;transform:scale(.85)}.widget-add-btn:nth-child(3n+1):hover .btn-tooltip{transform:scale(1)}.widget-add-btn:nth-child(3n+1) .btn-tooltip:after{left:38px;transform:none}.widget-add-btn:nth-child(3n) .btn-tooltip{left:auto;right:0;transform:scale(.85)}.widget-add-btn:nth-child(3n):hover .btn-tooltip{transform:scale(1)}.widget-add-btn:nth-child(3n) .btn-tooltip:after{left:auto;right:38px;transform:none}.layers-list-group{flex-direction:column;gap:6px;display:flex}.layer-list-item{background:var(--btn-secondary-bg);border:1px solid var(--btn-secondary-border);border-radius:var(--radius-sm);color:var(--text-muted);cursor:pointer;justify-content:space-between;align-items:center;padding:10px 12px;font-size:12px;font-weight:600;transition:all .2s;display:flex}.layer-list-item:hover{border-color:var(--btn-secondary-border-hover);background:var(--glass-bg-hover)}.layer-list-item.selected{border-color:var(--primary);color:var(--text-main);background:#ff8b130d;box-shadow:0 0 10px #ff8b130d}.layer-item-tag{text-transform:uppercase;color:var(--primary);background:#ff8b1314;border-radius:4px;padding:2px 6px;font-size:9px;font-weight:700}.layer-list-item.selected .layer-item-tag{background:var(--primary);color:#fff}.glass-input{background:var(--input-bg);border:1px solid var(--input-border);border-radius:var(--radius-sm);width:100%;color:var(--text-main);outline:none;padding:10px 14px;font-size:13px;font-weight:500;transition:all .2s}.glass-input:focus{background:var(--input-bg-focus);border-color:var(--glass-border-active);box-shadow:0 0 0 3px #ff8b131a}.slider-input{background:var(--slider-track-bg);border-radius:var(--radius-full);appearance:none;cursor:pointer;outline:none;width:100%;height:6px}.slider-input::-webkit-slider-thumb{appearance:none;border-radius:var(--radius-full);background:var(--glass-border-active);width:14px;height:14px;transition:all .15s}.slider-input::-webkit-slider-thumb:hover{transform:scale(1.2)}.btn{border-radius:var(--radius-sm);cursor:pointer;white-space:nowrap;border:none;justify-content:center;align-items:center;gap:8px;padding:10px 20px;font-size:12px;font-weight:700;text-decoration:none;transition:all .2s cubic-bezier(.4,0,.2,1);display:inline-flex}.btn-primary{background:var(--primary);color:#fff;border:1px solid #00000026;box-shadow:0 2px 4px #3730a326}.btn-primary:hover{background:var(--primary-hover);transform:translateY(-1px);box-shadow:0 4px 8px #3730a340}.btn-secondary{background:var(--btn-secondary-bg);color:var(--text-main);border:1px solid var(--btn-secondary-border);box-shadow:0 1px 2px #0f172a05}.btn-secondary:hover{background:var(--glass-bg-hover);border-color:var(--btn-secondary-border-hover);box-shadow:0 2px 4px #0f172a0a}.btn-danger{color:var(--danger);background:#991b1b0f;border:1px solid #991b1b33}.btn-danger:hover{background:var(--danger);color:#fff;box-shadow:0 2px 4px #991b1b26}.btn-accent{background:var(--accent);color:#fff;border:1px solid #00000026;box-shadow:0 2px 4px #b4530926}.btn-accent:hover{background:#9a3412;transform:translateY(-1px)}.btn-pill{border-radius:var(--radius-full)}.center-canvas-area{flex-direction:column;justify-content:flex-start;align-items:center;padding:24px;display:flex}.properties-form-group{flex-direction:column;gap:14px;display:flex}.prop-field{flex-direction:column;gap:6px;display:flex}.prop-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;font-size:11px;font-weight:700}.prop-coordinate-row{grid-template-columns:1fr 1fr 1fr;gap:8px;display:grid}.color-input-picker-box{align-items:center;gap:10px;display:flex}.color-picker-input-native{border-radius:var(--radius-sm);border:1px solid var(--glass-border);cursor:pointer;background:0 0;width:36px;height:36px;padding:0;transition:border-color .2s;overflow:hidden}.color-picker-input-native:hover{border-color:var(--glass-border-active)}.color-picker-input-native::-webkit-color-swatch-wrapper{padding:0}.color-picker-input-native::-webkit-color-swatch{border-radius:var(--radius-sm);border:none}.builder-layout-grid{grid-template-columns:290px 1fr 330px;gap:16px;width:100%;height:100%;display:grid}.builder-workspace-card{flex-direction:column;justify-content:center;align-items:center;display:flex}.pixel-canvas-grid-box{border-radius:var(--radius-md);border:2px solid var(--glass-border-active);box-shadow:var(--shadow-base);background:#0f172a;justify-content:center;align-items:center;padding:10px;display:flex}.palette-swatches-row{flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;display:flex}.color-swatch-circle{border-radius:var(--radius-full);cursor:pointer;border:2px solid #fff;width:28px;height:28px;transition:all .15s;box-shadow:0 2px 6px #00000026}.color-swatch-circle:hover{transform:scale(1.15)}.color-swatch-circle.selected{box-shadow:0 0 0 2px var(--glass-border-active);transform:scale(1.1)}.saved-items-scrollbar-box{flex-direction:column;gap:8px;max-height:280px;display:flex;overflow-y:auto}.saved-asset-card{background:var(--btn-secondary-bg);border:1px solid var(--btn-secondary-border);border-radius:var(--radius-sm);cursor:pointer;color:var(--text-main);justify-content:space-between;align-items:center;padding:10px;transition:all .2s;display:flex}.saved-asset-card:hover{background:var(--glass-bg-hover);border-color:var(--glass-border-active)}.community-container{flex-direction:column;gap:24px;max-width:1024px;height:100%;margin:0 auto;padding:32px 16px;display:flex;overflow-y:auto}.community-header-box{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;display:flex}.community-gallery-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;display:grid}.community-asset-card{cursor:pointer;border:1px solid #1c19171f;flex-direction:column;justify-content:flex-start;height:auto;min-height:auto;padding:16px;display:flex}.community-preview-wrapper{border-radius:8px;width:100%;position:relative;overflow:hidden}.preview-hover-overlay{-webkit-backdrop-filter:blur(1.5px);backdrop-filter:blur(1.5px);opacity:0;pointer-events:none;background:#0f172a73;border-radius:8px;justify-content:center;align-items:center;transition:opacity .2s cubic-bezier(.4,0,.2,1);display:flex;position:absolute;inset:0}.community-asset-card:hover .preview-hover-overlay{opacity:1}.modal-backdrop-layer{background:var(--modal-backdrop);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:999;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.modal-dialog-box{background:var(--modal-bg);border:2px solid var(--glass-border-active);border-radius:var(--radius-md);width:100%;max-width:480px;box-shadow:var(--shadow-hover);flex-direction:column;gap:20px;padding:28px;animation:.3s cubic-bezier(.16,1,.3,1) modalSlideUp;display:flex}.credentials-inputs-grid{grid-template-columns:1fr 1fr;gap:12px;display:grid}.credentials-inputs-grid .full-span-grid{grid-column:span 2}@keyframes modalSlideUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.hide-scrollbar::-webkit-scrollbar{display:none}.hide-scrollbar{-ms-overflow-style:none;scrollbar-width:none}.app-footer{background:var(--glass-bg);border-top:1px solid var(--glass-border);color:var(--text-muted);z-index:90;justify-content:space-between;align-items:center;height:38px;min-height:38px;padding:10px 24px;font-size:14px;display:flex}.app-footer a{color:var(--primary);font-weight:500;text-decoration:none;transition:color .2s}.app-footer a:hover{color:var(--primary-hover);text-decoration:underline}@media (width<=768px){.app-footer{text-align:center;flex-direction:column;gap:6px;height:auto;margin-bottom:0;padding:12px}}.skeleton-shimmer{background:linear-gradient(90deg,#0f172a08 25%,#0f172a14 50%,#0f172a08 75%) 0 0/200% 100%;animation:1.5s linear infinite shimmer}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}