:root{--bg:#f7faf7;--card:#ffffff;--line:#e5efe6;--text:#0b3d2e;--muted:#2c775a;--accent:#2dbf7a;--shadow:0 2px 10px rgba(0,0,0,.06);--radius:12px}*{box-sizing:border-box}html,body,#root{height:100%;margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,sans-serif}.builder-frame{display:grid;grid-template-columns:260px 260px 1fr auto;height:100%;overflow:hidden;position:relative}.builder-root{display:grid;grid-template-columns:340px 1fr 360px;height:calc(100vh - 50px);position:relative;overflow:hidden}.builder-left{grid-column:1 / span 2;display:grid;grid-template-columns:260px 260px;height:100%;overflow:hidden;background:#f3faf5;align-content:stretch}.left-panels-row{display:flex;flex-direction:row;gap:10px}.left-panel-block{border-right:1px solid var(--line);height:100%;overflow-y:auto;padding:12px;display:flex;flex-direction:column}.left-panel-header{display:flex;justify-content:space-between;align-items:center;padding:4px 0;cursor:pointer}.left-panel-body{overflow-y:auto;max-height:380px}.builder-center{overflow:auto;background:#f9fbfa;display:flex;justify-content:center;align-items:flex-start;padding:20px}.canvas-root{width:1600px;min-height:1200px;background-size:20px 20px;background-image:linear-gradient(to right,#eef4f1 1px,transparent 1px),linear-gradient(to bottom,#eef4f1 1px,transparent 1px);border-radius:8px;position:relative}.builder-right{background:#fcfffd;border-left:1px solid var(--line);width:360px;overflow-y:auto;padding:12px;position:relative;z-index:10}.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:12px}.button{background:var(--accent);border:none;color:#fff;padding:8px 12px;border-radius:10px;cursor:pointer;font-size:14px;font-weight:500;transition:all .2s}.button:hover{opacity:.9;transform:translateY(-1px)}.button-danger{background:#ef4444;border:none;color:#fff;padding:6px 12px;border-radius:8px;cursor:pointer;font-size:13px;font-weight:500;transition:all .2s}.button-danger:hover{background:#dc2626;transform:translateY(-1px)}.button-secondary{background:#f5f5f5;border:1px solid #ddd;color:#666;padding:8px 12px;border-radius:10px;cursor:pointer;font-size:14px;font-weight:500;transition:all .2s}.button-secondary:hover{background:#e5e5e5;border-color:#ccc}.pill{padding:4px 8px;border-radius:999px;background:#e6f7ee;color:#177b53;font-size:12px}.left-col{background:#f3faf5;border-right:1px solid #dfe7e3;overflow-y:auto;padding:12px}.palette-col{background:#f7fbf9;border-right:1px solid #dfe7e3;overflow-y:auto;padding:12px}.canvas-col{height:100%;overflow:hidden;display:flex;flex-direction:column;background:#fafcfa}.canvas-scroll{flex:1;overflow:auto;padding:40px;background:#f8faf9}.canvas-area{position:relative;width:100%;min-width:1600px;min-height:1200px;background-size:20px 20px;background-image:linear-gradient(to right,#eef4f1 1px,transparent 1px),linear-gradient(to bottom,#eef4f1 1px,transparent 1px)}.canvas-widget{background:#fff;border-radius:8px;box-shadow:0 2px 6px #0000000f;border:1px solid #e4ece8;overflow:hidden;cursor:move}.canvas-widget-wrapper{position:absolute;overflow:hidden}.canvas-widget-wrapper.selected{border:2px solid var(--accent)!important;z-index:10}.runtime-widget-wrapper{position:absolute;overflow:visible}.handle{position:absolute;width:10px;height:10px;background:var(--accent);border-radius:2px}.handle.e{right:-5px;top:50%;transform:translateY(-50%);cursor:ew-resize}.handle.s{bottom:-5px;left:50%;transform:translate(-50%);cursor:ns-resize}.handle.se{right:-5px;bottom:-5px;cursor:nwse-resize}.inspector-col{width:0;min-width:0;overflow:hidden;background:#fff;border-left:1px solid #dfe7e3;transition:width .25s ease;position:relative}.inspector-col.open{width:320px!important;min-width:320px!important;overflow-y:auto}.inspector-toggle{position:absolute;top:8px;right:8px;background:var(--accent);color:#fff;border:none;border-radius:6px;width:32px;height:32px;cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;z-index:10;transition:all .2s;box-shadow:0 2px 8px #0000001a}.inspector-toggle:hover{background:#25a869;transform:scale(1.05)}.inspector{padding:16px}.prop-row{margin-bottom:12px}.prop-row label{display:block;font-size:13px;font-weight:500;margin-bottom:4px;color:var(--muted)}.prop-row input,.prop-row select,.prop-row textarea{width:100%}.divider{height:1px;background:var(--line);margin:16px 0}h4{margin:12px 0 8px;font-size:14px;font-weight:600;color:var(--text)}.pane-title{margin-top:0;font-size:16px;font-weight:600;color:#0b3d2e}.toolbar{background:#fff;border-bottom:1px solid var(--line);padding:12px 16px;display:flex;gap:10px;align-items:center;box-shadow:0 1px 3px #0000000d}.input{padding:8px 12px;border:1px solid var(--line);border-radius:8px;font-size:14px;outline:none}.input:focus{border-color:var(--accent)}.grid{display:grid;gap:10px}.grid.cols-1{grid-template-columns:1fr}.widget-title{font-weight:600;font-size:14px;margin-bottom:4px}.small{font-size:12px;color:var(--muted);opacity:.7}.login-root{display:flex;gap:40px;padding:40px;height:calc(100vh - 40px);align-items:center;justify-content:center;background:#f3f6f7}.login-left{flex:0 0 520px;height:80vh;border-radius:22px;background:linear-gradient(180deg,#0f5c73,#063a45);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 40px #031b2440}.login-left-inner{padding:48px}.sparkle{font-size:30px;margin-bottom:24px;opacity:.95}.ai-title{font-size:56px;margin:0 0 8px;font-weight:700}.ai-sub{margin:0 0 6px;font-size:16px;opacity:.95}.ai-small{margin-top:8px;opacity:.9}.login-right{width:520px;padding:36px;display:flex;flex-direction:column;gap:10px}.brand{display:flex;justify-content:flex-start;margin-bottom:8px}.welcome{margin:8px 0 0;font-size:32px}.welcome-sub{margin:0 0 12px;color:#6b7a78}.label{font-size:14px;color:#1b3b36;margin-top:8px;margin-bottom:6px}.login-input{padding:14px;border-radius:12px;box-shadow:0 6px 12px #0000000f;border:1px solid #e7efec}.login-button{margin-top:12px;background:linear-gradient(180deg,#0b4f62,#043a4a);padding:14px;border-radius:12px;font-size:16px}.conversation-container{display:flex;height:100%;width:100%;background:#f5f7f9}.conversation-sidebar{width:260px;background:#f8f9fa;border-right:1px solid #e0e5eb;display:flex;flex-direction:column;padding:16px 12px;gap:16px}.conversation-logo-section{padding:8px 12px;display:flex;align-items:center}.conversation-logo-section img{height:38px;width:auto;max-width:100%;display:block}.conversation-search-box{padding:0 4px}.conversation-search-input{width:100%;padding:10px 12px;border:1px solid #d0d8e0;border-radius:8px;font-size:13px;outline:none;background:#fff;box-shadow:0 1px 2px #00000008}.conversation-nav{display:flex;flex-direction:column;gap:4px;flex:1;list-style:none;margin:0;padding:0}.conversation-nav-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border:none;background:transparent;cursor:pointer;border-radius:6px;font-size:13px;color:#445a6f;font-weight:500;transition:all .2s}.conversation-nav-item:hover{background:#e8f0f7}.conversation-nav-icon{font-size:16px}.conversation-nav-label{flex:1;text-align:left}.conversation-user-section{display:flex;align-items:center;gap:12px;padding:12px;background:#e8f0f7;border-radius:8px;margin-top:auto}.conversation-user-avatar{width:40px;height:40px;border-radius:50%;background:#c5d9e8;display:flex;align-items:center;justify-content:center;font-size:18px}.conversation-user-name{font-size:13px;font-weight:500;color:#2c3e50}.conversation-main-content{flex:1;display:flex;flex-direction:column}.conversation-top-bar{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;background:#fff;border-bottom:1px solid #e0e5eb}.conversation-clear-chat-link{background:none;border:none;color:#c30;font-size:13px;font-weight:500;cursor:pointer;padding:4px 8px;border-radius:4px;text-decoration:underline;transition:color .2s,background .2s}.conversation-clear-chat-link:hover{color:#991f00;background:#fde8e8;text-decoration:none}.conversation-new-chat-button{display:flex;align-items:center;gap:6px;padding:8px 16px;background:#06c;color:#fff;border:none;border-radius:6px;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s}.conversation-new-chat-button:hover{background:#0052a3}.conversation-messages-container{flex:1;overflow:auto;padding:20px;display:flex;flex-direction:column}.conversation-welcome-area{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;text-align:center;padding:40px 20px}.conversation-welcome-icon{margin-bottom:20px;color:#06c}.conversation-greeting{font-size:14px;color:#445a6f;margin:0 0 8px}.conversation-welcome-title{font-size:28px;font-weight:600;color:#0f3a6f;margin:0 0 30px;max-width:500px}.conversation-welcome-title span{color:#06c}.conversation-input-form{width:100%;max-width:600px;margin-bottom:20px}.conversation-input-form-bottom{width:100%;margin-top:auto;padding-top:12px}.conversation-input-wrapper{display:flex;align-items:flex-end;gap:8px;background:#fff;border-radius:12px;border:1px solid #d0d8e0;padding:8px 12px;box-shadow:0 4px 12px #0000000f}.conversation-attach-button,.conversation-send-button{background:transparent;border:none;cursor:pointer;font-size:18px;opacity:.7;transition:opacity .2s;padding:4px}.conversation-attach-button:hover,.conversation-send-button:hover{opacity:1}.conversation-input{flex:1;border:none;outline:none;font-size:14px;font-family:inherit;resize:none;max-height:100px;background:transparent}.conversation-subtext{font-size:12px;color:#9ca8b3;margin:12px 0 24px}.conversation-suggestions-area{width:100%;max-width:600px}.conversation-suggestions-title{font-size:13px;color:#445a6f;font-weight:500;margin:0 0 12px}.conversation-suggestions-list{display:flex;flex-direction:column;gap:8px}.conversation-suggestion-button{padding:12px 16px;background:#f0f4f9;border:1px solid #d0d8e0;border-radius:8px;font-size:13px;color:#445a6f;cursor:pointer;transition:all .2s;text-align:center}.conversation-suggestion-button:hover{background:#e0e8f0;border-color:#06c}.conversation-typing-indicator{display:flex;gap:4px;padding:12px}.conversation-typing-dot{width:8px;height:8px;border-radius:50%;background:#999;animation:bounce 1.4s infinite}@keyframes bounce{0%,80%,to{transform:scale(1);opacity:.7}40%{transform:scale(1.2);opacity:1}}