*{margin:0;padding:0;box-sizing:border-box}html{min-height:100%}body{font-family:var(--font);background:var(--bg-page);color:var(--text-2);line-height:1.7;font-size:15px;min-height:100%;-webkit-font-smoothing:antialiased;overflow-x:hidden}#app{display:flex;flex-direction:column;min-height:100vh;position:relative}#main-app{display:flex;flex-direction:column;flex:1;min-height:0}body:before{content:"";position:fixed;inset:0;background:radial-gradient(ellipse at 20% 50%,rgba(0,150,199,.06) 0%,transparent 50%),radial-gradient(ellipse at 80% 20%,rgba(72,202,228,.05) 0%,transparent 40%),radial-gradient(ellipse at 50% 100%,rgba(173,232,244,.08) 0%,transparent 50%);pointer-events:none;z-index:0}@keyframes bubbleFloat{0%{transform:translateY(100vh) scale(0);opacity:0}10%{opacity:.4}90%{opacity:.1}to{transform:translateY(-10vh) scale(1);opacity:0}}.ocean-bubbles{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:hidden}.ocean-bubbles span{position:absolute;bottom:-20px;width:6px;height:6px;background:#0096c71f;border-radius:50%;animation:bubbleFloat linear infinite}.ocean-bubbles span:nth-child(1){left:10%;width:4px;height:4px;animation-duration:12s;animation-delay:0s}.ocean-bubbles span:nth-child(2){left:25%;width:6px;height:6px;animation-duration:15s;animation-delay:2s}.ocean-bubbles span:nth-child(3){left:45%;width:3px;height:3px;animation-duration:18s;animation-delay:4s}.ocean-bubbles span:nth-child(4){left:60%;width:8px;height:8px;animation-duration:14s;animation-delay:1s}.ocean-bubbles span:nth-child(5){left:75%;width:5px;height:5px;animation-duration:16s;animation-delay:3s}.ocean-bubbles span:nth-child(6){left:90%;width:4px;height:4px;animation-duration:20s;animation-delay:5s}.ocean-bubbles span:nth-child(7){left:35%;width:7px;height:7px;animation-duration:13s;animation-delay:6s}.ocean-bubbles span:nth-child(8){left:55%;width:3px;height:3px;animation-duration:17s;animation-delay:7s}@keyframes waveShift{0%{background-position-x:0}to{background-position-x:1000px}}.topbar{position:sticky;top:12px;z-index:100;max-width:720px;width:calc(100% - 32px);margin:12px auto 0;background:#ffffffd9;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-radius:var(--radius-full);padding:6px 8px 6px 16px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 4px 24px #0000000f,0 0 0 1px #0096c714;transition:box-shadow .3s}.topbar-brand{display:flex;align-items:center;gap:8px;color:var(--text-heading);font-weight:800;font-size:.95rem;text-decoration:none;flex-shrink:0}.topbar-brand .dot{display:none}.topbar-brand .brand-avatar{width:28px;height:28px;border-radius:50%;object-fit:contain;background:#fff;flex-shrink:0}.topbar-nav{display:flex;gap:4px;align-items:center;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}.topbar-nav::-webkit-scrollbar{display:none}.topbar-nav a{color:var(--text-3);text-decoration:none;font-size:.8rem;font-weight:600;padding:7px 14px;border-radius:var(--radius-full);transition:var(--transition);white-space:nowrap}.topbar-nav a:hover{color:var(--text-1);background:#0096c714}.topbar-nav a.active{color:var(--primary);background:#0096c71a}@media(max-width:768px){.topbar{top:8px;padding:5px 6px 5px 12px}.topbar-brand{font-size:.88rem;gap:6px}.topbar-brand .brand-avatar{width:24px;height:24px}.topbar-nav a{padding:6px 10px;font-size:.75rem}}@media(max-width:480px){.topbar{top:6px;width:calc(100% - 16px)}.topbar-brand{font-size:.82rem}.topbar-nav a{padding:5px 8px;font-size:.72rem}}.main{flex:1;max-width:960px;width:100%;margin:0 auto;padding:36px 24px 60px;position:relative;z-index:1}.main--wide{max-width:1200px}.main--chat{display:flex;flex-direction:column;max-width:720px;padding:24px 24px 16px;height:calc(100dvh - 72px);overflow:hidden}.main--studio{display:grid;grid-template-columns:380px 1fr;max-width:100%;padding:0;height:calc(100dvh - 72px);max-height:calc(100dvh - 72px);overflow:hidden;gap:0;flex:0 0 auto}.studio-chat{display:flex;flex-direction:column;border-right:1px solid var(--border);background:var(--bg-page);overflow:hidden;padding:16px 14px 12px;height:100%;max-height:100%}.studio-chat .chat-area{flex:1;min-height:0;overflow-y:auto}.studio-chat .chat-input-wrap{flex-shrink:0}.studio-chat .generate-panel{flex-shrink:0;overflow-y:auto;max-height:40%}.studio-chat .chat-history-panel{flex:1;min-height:0;overflow-y:auto}.studio-preview{display:flex;flex-direction:column;background:#fff;overflow:hidden}.studio-preview-toolbar{display:flex;align-items:center;gap:8px;padding:8px 16px;border-bottom:1px solid var(--border);background:var(--bg-page);flex-shrink:0}.studio-preview-toolbar .screen-tabs{display:flex;gap:0;overflow-x:auto;flex:1}.studio-preview-toolbar .screen-tab{padding:6px 16px;border:none;background:none;font-size:.78rem;font-weight:600;cursor:pointer;font-family:var(--font);color:var(--text-3);border-bottom:2px solid transparent;white-space:nowrap;transition:var(--transition)}.studio-preview-toolbar .screen-tab:hover{color:var(--text-1)}.studio-preview-toolbar .screen-tab.active{color:var(--primary);border-bottom-color:var(--primary)}.studio-preview-toolbar .screen-tab.uncached{color:var(--text-4);font-style:italic;border-bottom-style:dashed}.studio-preview-toolbar .screen-tab.uncached:hover{color:var(--primary-light);border-bottom-color:var(--primary-light)}.studio-preview-iframe{flex:1;width:100%;border:none;min-height:0}.studio-gjs-wrap{flex:1;width:100%;min-height:0;position:relative;display:none}.studio-gjs-wrap.active{display:flex;flex-direction:column}.studio-gjs-wrap .gjs-one-bg{background-color:#f8fafc}.studio-gjs-wrap .gjs-two-color{color:#0d1b2a}.studio-gjs-wrap .gjs-editor,.studio-gjs-wrap .gjs-cv-canvas{flex:1;min-height:0}.studio-gjs-wrap .gjs-frame-wrapper{height:100%!important}.studio-gjs-wrap .gjs-pn-panel{background:var(--bg-page);border-color:var(--border)}.studio-gjs-wrap .gjs-pn-views-container,.studio-gjs-wrap .gjs-pn-views{background:var(--bg-page)}.studio-gjs-wrap .gjs-sm-sector-title,.studio-gjs-wrap .gjs-layer-name{color:var(--text-1)}.studio-gjs-wrap .gjs-pn-views-container{width:240px}.studio-gjs-wrap .gjs-pn-options{display:flex;gap:2px}.studio-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:var(--text-4);gap:12px}.studio-empty-icon{width:64px;height:64px;opacity:.3}.studio-empty-text{font-size:.9rem}.studio-skeleton{padding:32px;display:flex;flex-direction:column;gap:20px;height:100%;overflow:hidden}.skeleton-block{background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;animation:skeletonShimmer 1.5s infinite;border-radius:8px}.skeleton-hero{height:200px}.skeleton-text{height:16px;width:80%}.skeleton-text-short{height:16px;width:50%}.skeleton-cards{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}.skeleton-card{height:120px;border-radius:8px}@keyframes skeletonShimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.studio-generating{display:flex;align-items:center;gap:8px;padding:8px 16px;background:#0096c70f;border-bottom:1px solid var(--border);font-size:.8rem;color:var(--primary);font-weight:500;flex-shrink:0}.studio-cta-banner{position:fixed;bottom:0;right:0;z-index:100;background:linear-gradient(135deg,#ff6b35,#e85d2c 40%,#0096c7);padding:20px 32px;display:flex;align-items:center;justify-content:center;gap:24px;box-shadow:0 -6px 40px #00000059,inset 0 1px #ffffff26;animation:bannerSlideUp .7s cubic-bezier(.22,1,.36,1),bannerPulse 3s ease-in-out 2s infinite;border-top:1px solid rgba(255,255,255,.1)}.studio-cta-banner-text{flex:1;min-width:0}.studio-cta-banner-title{color:#fff;font-size:1.1rem;font-weight:800;text-shadow:0 1px 4px rgba(0,0,0,.2)}.studio-cta-banner-sub{color:#ffffffe6;font-size:.84rem;margin-top:4px;line-height:1.5}.studio-cta-banner-btn{background:#fff;color:#0d1b2a;padding:14px 40px;border-radius:12px;font-size:1rem;font-weight:800;border:none;cursor:pointer;white-space:nowrap;box-shadow:0 4px 20px #00000040;transition:transform .2s,box-shadow .2s}.studio-cta-banner-btn:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 8px 28px #0000004d}.studio-cta-banner-close{background:none;border:none;color:#ffffff80;font-size:1.4rem;cursor:pointer;padding:0 4px;line-height:1;flex-shrink:0;transition:color .2s}.studio-cta-banner-close:hover{color:#fff}@keyframes bannerSlideUp{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes bannerPulse{0%,to{box-shadow:0 -6px 40px #00000059;transform:translateY(0)}50%{box-shadow:0 -10px 60px #ff6b35cc,0 0 30px #0096c766;transform:translateY(-3px)}}.studio-cta-mini{position:fixed;bottom:20px;right:20px;z-index:100;background:linear-gradient(135deg,#ff6b35,#0096c7);color:#fff;border:none;border-radius:50px;padding:12px 20px;font-size:.82rem;font-weight:700;cursor:pointer;box-shadow:0 4px 24px #ff6b3566;display:flex;align-items:center;gap:8px;animation:miniPop .4s cubic-bezier(.22,1,.36,1),miniPulse 3s ease-in-out 2s infinite;transition:transform .2s,box-shadow .2s}.studio-cta-mini:hover{transform:scale(1.05);box-shadow:0 6px 32px #ff6b3580}@keyframes miniPop{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}@keyframes miniPulse{0%,to{box-shadow:0 4px 24px #ff6b3566}50%{box-shadow:0 4px 32px #ff6b35b3}}.studio-mobile-toggle{display:none;position:fixed;bottom:16px;left:50%;transform:translate(-50%);z-index:90;background:var(--chrome);border:1px solid var(--border);border-radius:12px;padding:4px;gap:0;box-shadow:0 4px 20px #00000026}.studio-mobile-toggle button{padding:10px 32px;border:none;background:none;font-size:.82rem;font-weight:600;cursor:pointer;border-radius:8px;color:var(--text-3);font-family:var(--font);transition:all .2s;white-space:nowrap}.studio-mobile-toggle button.active{background:var(--primary);color:#fff}@media(max-width:768px){.main--studio{grid-template-columns:1fr;grid-template-rows:1fr}.studio-chat{border-right:none;height:calc(100dvh - 72px);max-height:calc(100dvh - 72px)}.studio-preview{height:calc(100dvh - 72px);max-height:calc(100dvh - 72px)}.main--studio .studio-preview,.main--studio.show-preview .studio-chat{display:none}.main--studio.show-preview .studio-preview,.studio-mobile-toggle.visible{display:flex}.main--studio .studio-chat,.main--studio .studio-preview{padding-bottom:52px}.studio-preview-toolbar{padding:6px 10px}.studio-preview-toolbar .screen-tab{padding:5px 10px;font-size:.72rem}#studio-preview-btns{top:4px;right:6px}#studio-preview-btns button{padding:4px 8px;font-size:.65rem}.studio-cta-mini{bottom:12px;right:12px;padding:10px 16px;font-size:.78rem}.studio-cta-banner{left:0!important;padding:12px 14px;gap:10px;flex-direction:column;text-align:center;bottom:52px}.studio-cta-banner-title{font-size:.9rem}.studio-cta-banner-sub{font-size:.7rem}.studio-cta-banner-btn{padding:10px 24px;font-size:.85rem;width:100%}.studio-cta-banner-close{position:absolute;top:6px;right:8px}}.app-footer{text-align:center;padding:24px;font-size:.78rem;color:var(--text-4)}.app-footer a{color:var(--text-3);text-decoration:none;margin:0 10px;transition:color var(--transition)}.app-footer a:hover{color:var(--primary)}@media(max-width:768px){.main{padding:20px 14px 40px}.main--chat{padding:16px 12px 12px;height:calc(100dvh - 52px)}.app-footer{padding:16px;font-size:.72rem}}@media(max-width:480px){.main{padding:16px 10px 32px}.main--chat{padding:12px 8px 8px}}.login-wrap{max-width:380px;margin:80px auto;text-align:center;background:#fffffff2;backdrop-filter:blur(20px);border-radius:var(--radius-lg);padding:48px 36px;box-shadow:0 8px 40px #00000014,0 0 60px #0096c70d;border:1px solid rgba(0,150,199,.1)}@media(max-width:480px){.login-wrap{margin:40px 16px;padding:32px 20px;border-radius:var(--radius-md)}}.login-logo{width:64px;height:64px;margin:0 auto 20px;display:flex;align-items:center;justify-content:center;font-size:2rem;animation:floatBob 4s ease-in-out infinite}@keyframes floatBob{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}