*{box-sizing:border-box}html,body{margin:0;height:100%;font-family:"Google Sans","Product Sans","Noto Sans Thai",Inter,system-ui,-apple-system,sans-serif;color:#1d1b22;background:#efedf3}button,textarea{font:inherit}button{cursor:pointer}body{overflow:hidden}.hidden{display:none!important}.shell{display:grid;grid-template-columns:58px 236px 1fr;height:100vh}.rail{background:#19181d;color:#fff;display:flex;flex-direction:column;align-items:center;padding:10px 0;gap:8px;border-right:1px solid #2b2930}.logo,.avatar{border:0;width:38px;height:38px;border-radius:12px;font-weight:700}.logo{background:linear-gradient(135deg,#e0d9ff,#876fff);color:#1e1830;margin-bottom:8px}.avatar{background:#343139;color:#eee;font-size:11px}.railbtn{border:0;background:transparent;color:#8e8996;width:38px;height:38px;border-radius:11px;font-size:16px;transition:.2s}.railbtn:hover,.railbtn.active{color:white;background:#302e35;transform:translateY(-1px)}.railspace{flex:1}.sidebar{background:#f8f7fa;border-right:1px solid #ddd9e4;padding:14px 12px;overflow:auto}.brand{display:flex;align-items:center;justify-content:space-between;padding:2px 6px 13px}.brand div{display:grid}.brand b{font-size:14px}.brand span{font-size:11px;color:#888291;margin-top:2px}.v2{font-size:8px!important;background:#ece7ff;color:#644ddd!important;border-radius:999px;padding:4px 6px}.newbtn{width:100%;border:0;background:#202026;color:#fff;padding:10px 12px;border-radius:11px;text-align:left;font-size:12px;box-shadow:0 2px 8px #0001}.sideTitle{font-size:9px;color:#9e98a8;margin:19px 8px 8px;letter-spacing:.11em}.rowTitle{display:flex;justify-content:space-between;align-items:center}.rowTitle em{font-style:normal;letter-spacing:0;font-size:8px}.project{display:flex;gap:9px;align-items:center;padding:9px;border-radius:10px;color:#6a6570}.project.active{background:#ebe8f1;color:#28252e}.project div{display:grid;flex:1}.project b{font-size:11px;font-weight:600}.project small{font-size:9px;color:#99929f;margin-top:2px}.dot{width:7px;height:7px;border-radius:50%}.violet{background:#8069ff}.screenNav{display:grid;gap:3px;max-height:280px;overflow:auto}.screenNav button{border:0;background:none;text-align:left;padding:7px 8px;border-radius:8px;color:#625d69;display:flex;align-items:center;gap:8px;font-size:9px}.screenNav button:hover,.screenNav button.active{background:#eeebf3;color:#332c44}.screenNav i{font-style:normal;width:22px;height:22px;border-radius:7px;background:#fff;border:1px solid #e2dee6;display:grid;place-items:center;font-size:8px}.screenNav span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.navEmpty{padding:11px 8px;color:#aaa3b1;font-size:9px}.sideLink{display:flex;align-items:center;gap:8px;width:100%;border:0;background:none;padding:8px 9px;border-radius:9px;text-align:left;color:#595460;font-size:11px}.sideLink:hover{background:#efedf3}.sideLink em{margin-left:auto;font-style:normal;color:#999}.online{display:inline-block;width:6px;height:6px;background:#47bd76;border-radius:50%;box-shadow:0 0 0 3px #47bd7621}.sideCard{margin-top:18px;border:1px solid #dfdbe5;background:#fff;border-radius:13px;padding:11px;display:grid;gap:3px}.sideCard span{font-size:8px;color:#999}.sideCard b{font-size:10px}.sideCard p{font-size:8px;color:#888;margin:3px 0 0;line-height:1.5}.workspace{display:grid;grid-template-rows:50px 1fr 270px;min-width:0}.topbar{height:50px;background:#fbfafc;border-bottom:1px solid #dcd9e1;display:flex;align-items:center;justify-content:space-between;padding:0 14px}.crumb{display:flex;gap:8px;align-items:center;font-size:11px}.crumb span{color:#8d8794}.crumb i{font-style:normal;color:#bbb}.crumb b{font-weight:600}.crumb .saved{font-size:9px;padding:3px 6px;background:#edf8f0;color:#43825b;border-radius:6px}.topactions{display:flex;gap:6px;align-items:center}.seg{display:flex;background:#eeecf1;padding:3px;border-radius:9px}.seg button{border:0;background:none;border-radius:7px;padding:5px 8px;font-size:9px;color:#777}.seg button.active{background:#fff;color:#222;box-shadow:0 1px 4px #0001}.share,.export{border:1px solid #ddd9e2;background:#fff;border-radius:9px;height:30px;padding:0 10px;font-size:10px}.export{background:#1d1b21;color:#fff;border-color:#1d1b21}.canvasWrap{min-height:0;background:radial-gradient(circle at 20% 0,#fbfaff 0,#efedf4 38%,#e7e4eb 100%);position:relative;overflow:auto}.canvasToolbar{height:34px;position:sticky;top:8px;z-index:8;margin:8px auto 0;width:max-content;display:flex;align-items:center;gap:3px;padding:3px 5px;border:1px solid #d9d5df;background:#ffffffdc;backdrop-filter:blur(16px);box-shadow:0 5px 20px #51466310;border-radius:10px}.canvasToolbar button{border:0;background:transparent;padding:5px 8px;border-radius:7px;font-size:9px;color:#736d78}.canvasToolbar button.active{background:#242229;color:#fff}.canvasToolbar>span:not(.canvasStatus){width:1px;height:16px;background:#ddd}.canvasStatus{font-size:8px;color:#9b95a2;padding:0 6px}.stage{min-height:100%;padding:48px 36px 64px}.emptyState{min-height:420px;display:grid;place-content:center;text-align:center;padding:30px;color:#6e6874}.spark{width:56px;height:56px;border-radius:18px;background:linear-gradient(135deg,#eeeaff,#d7efff);display:grid;place-items:center;margin:0 auto 12px;color:#7057ff;font-size:24px;box-shadow:inset 0 0 0 1px #6f57ff15}.fullBadge{font-size:8px;letter-spacing:.14em;color:#745ee4;margin-bottom:7px}.emptyState h2{font-size:18px;margin:0;color:#2c2931;letter-spacing:-.02em}.emptyState>p{font-size:10px;line-height:1.5;max-width:550px;margin:8px auto 15px}.examples{display:grid;gap:6px;width:min(610px,90vw)}.examples button{border:1px solid #e2dee7;background:#faf9fb;border-radius:11px;padding:9px 11px;font-size:9px;color:#6e6874;text-align:left}.examples button:hover{border-color:#baaefb;color:#5541c5;background:#fff}.appCanvas{--accent:#7057ff;--surface:#f7f6fb;--ink:#17151f;max-width:1480px;margin:auto;animation:reveal .35s ease}.appSummary{display:flex;align-items:center;gap:16px;margin-bottom:14px;padding:0 4px}.appSummary .appIcon{width:42px;height:42px;border-radius:14px;background:var(--accent);color:white;display:grid;place-items:center;font-weight:700;box-shadow:0 10px 25px color-mix(in srgb,var(--accent) 30%,transparent)}.appSummary div{display:grid}.appSummary b{font-size:14px}.appSummary span{font-size:9px;color:#817b88;margin-top:2px}.appSummary em{margin-left:auto;font-style:normal;font-size:8px;color:#6253bd;background:#eeeaff;border:1px solid #dcd4ff;border-radius:999px;padding:5px 8px}.flowStrip{display:flex;gap:6px;overflow:auto;margin-bottom:13px;padding:2px 4px}.flowPill{white-space:nowrap;border:1px solid #ddd8e4;background:#ffffffa8;border-radius:999px;padding:6px 9px;font-size:8px;color:#6c6574}.flowPill b{color:#423759;font-weight:600}.screensGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px;align-items:start}.screenCard{position:relative;animation:screenIn .38s both}.screenCard:hover .phoneFrame{transform:translateY(-4px);box-shadow:0 25px 55px #312a3b24}.screenLabel{display:flex;align-items:center;margin-bottom:6px;padding:0 3px;gap:6px}.screenLabel b{font-size:9px;font-weight:600}.screenLabel span{font-size:7px;color:#9a94a0;text-transform:uppercase}.screenLabel em{font-style:normal;margin-left:auto;font-size:7px;color:#8d8795}.phoneFrame{background:#fff;border:1px solid #d5d0da;border-radius:24px;padding:6px;box-shadow:0 14px 38px #302b3820;transition:.25s;cursor:pointer;overflow:hidden}.screenCard.desktop .phoneFrame{border-radius:12px}.screenUI{background:var(--surface,#f8f7fb);color:var(--ink,#17151f);height:410px;border-radius:19px;overflow:hidden;position:relative;display:flex;flex-direction:column}.screenCard.desktop .screenUI{height:270px;border-radius:8px}.screenTop{display:flex;align-items:center;padding:13px 13px 8px;gap:8px}.screenTop .back{font-size:11px;color:var(--muted,#777)}.screenTop strong{font-size:10px;font-weight:650}.screenTop .more{margin-left:auto;font-size:11px}.screenContent{padding:4px 13px 58px;overflow:hidden;flex:1}.screenHero{margin:4px 0 12px}.screenHero small{font-size:7px;color:var(--accent);text-transform:uppercase;letter-spacing:.08em}.screenHero h3{font-size:18px;letter-spacing:-.035em;margin:5px 0 3px;line-height:1.05}.screenHero p{font-size:7px;color:var(--muted,#777);line-height:1.4;margin:0}.uiSection{margin:9px 0}.uiSectionTitle{font-size:7px;color:#8b8491;margin-bottom:5px;display:flex;justify-content:space-between}.metricMini{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.metricMini div{background:#fff;border:1px solid color-mix(in srgb,var(--ink) 8%,transparent);border-radius:10px;padding:7px}.metricMini b{display:block;font-size:10px}.metricMini span{font-size:6px;color:#8c8692}.actionMini{display:flex;gap:5px}.actionMini span{flex:1;text-align:center;background:color-mix(in srgb,var(--accent) 10%,#fff);color:color-mix(in srgb,var(--accent) 75%,#222);border-radius:9px;padding:8px 4px;font-size:6px}.listMini{display:grid;gap:4px}.listRow{background:#fff;border:1px solid color-mix(in srgb,var(--ink) 7%,transparent);border-radius:9px;padding:7px;display:flex;align-items:center;gap:6px}.listRow i{font-style:normal;width:20px;height:20px;border-radius:7px;background:color-mix(in srgb,var(--accent) 12%,#fff);display:grid;place-items:center;color:var(--accent);font-size:7px}.listRow div{display:grid;min-width:0}.listRow b{font-size:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.listRow span{font-size:6px;color:#98919d}.searchMini{height:26px;background:#fff;border:1px solid #e0dce4;border-radius:9px;display:flex;align-items:center;padding:0 8px;font-size:6px;color:#a19aa7}.chipsMini{display:flex;gap:4px;overflow:hidden}.chipsMini span{border-radius:999px;border:1px solid #ded9e5;background:#fff;padding:4px 7px;font-size:6px;white-space:nowrap}.fieldMini{display:grid;gap:5px}.fieldMini label{font-size:6px;color:#87808d}.fieldMini div{height:27px;border:1px solid #ded9e5;background:#fff;border-radius:8px;margin-top:2px}.successMini{display:grid;place-items:center;text-align:center;padding:14px}.successMini i{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#eaf8ef;color:#3d9a60;font-style:normal;font-size:18px}.primaryMini{position:absolute;left:13px;right:13px;bottom:47px;background:var(--accent);color:#fff;border-radius:10px;text-align:center;padding:8px;font-size:7px}.bottomNav{position:absolute;left:0;right:0;bottom:0;height:40px;background:#ffffffed;border-top:1px solid #e6e2e8;display:flex;align-items:center;justify-content:space-around;backdrop-filter:blur(10px)}.bottomNav span{font-size:6px;color:#8c8691;display:grid;place-items:center;gap:1px}.bottomNav span.active{color:var(--accent)}.bottomNav i{font-style:normal;font-size:10px}.focusCanvas{max-width:1100px;margin:auto}.focusHeader{display:flex;justify-content:space-between;align-items:end;margin-bottom:14px}.focusHeader span{font-size:8px;letter-spacing:.11em;color:#7a64e7}.focusHeader h2{font-size:20px;margin:4px 0 2px}.focusHeader p{font-size:9px;color:#8a8390;margin:0;max-width:620px}.focusHeader button{border:0;background:#211f24;color:#fff;border-radius:10px;padding:9px 12px;font-size:9px}.focusBody{display:grid;grid-template-columns:minmax(320px,560px) 1fr;gap:20px;align-items:start}.devicePreview{display:grid;place-items:center;min-height:560px;background:#e9e6ed;border:1px solid #dbd7e0;border-radius:20px;padding:22px}.devicePreview .phoneFrame{width:330px}.devicePreview .screenUI{height:620px}.devicePreview.desktop .phoneFrame{width:min(720px,100%);border-radius:13px}.devicePreview.desktop .screenUI{height:440px;border-radius:8px}.screenInspector{background:#fbfafc;border:1px solid #ddd9e2;border-radius:16px;padding:14px}.inspectBlock{padding:10px 0;border-bottom:1px solid #ebe7ee}.inspectBlock:last-child{border:0}.inspectBlock span{font-size:7px;color:#9b94a1;text-transform:uppercase;letter-spacing:.09em}.inspectBlock p,.inspectBlock li{font-size:9px;line-height:1.45;color:#625b68}.inspectBlock ul{padding-left:16px}.flowsCanvas{max-width:1200px;margin:auto;display:grid;gap:14px}.flowCard{background:#fbfafc;border:1px solid #dcd7e2;border-radius:16px;padding:15px}.flowCard>div:first-child{display:flex;align-items:center;justify-content:space-between}.flowCard b{font-size:11px}.flowCard>div:first-child span{font-size:8px;color:#928b99}.flowNodes{display:flex;align-items:center;gap:7px;overflow:auto;margin-top:12px}.flowNode{min-width:120px;background:#fff;border:1px solid #ddd8e3;border-radius:11px;padding:9px;font-size:8px}.arrow{color:#9f98a5}.codeView{max-width:1200px;height:620px;margin:auto;background:#17161b;color:#dcd7e5;padding:24px;border-radius:16px;overflow:auto;font:10px/1.65 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap}.composer{background:#f9f8fb;border-top:1px solid #d9d5df;padding:10px 14px;overflow:hidden}.agentHead{display:flex;align-items:center;justify-content:space-between;font-size:11px}.agentHead>div{display:flex;gap:7px;align-items:center}.agentMark{width:22px;height:22px;border-radius:8px;background:#eae5ff;color:#6f56ee;display:grid;place-items:center}.agentMode{font-size:7px;color:#715adf;background:#f0ecff;border-radius:999px;padding:3px 6px}.agentHead button{border:0;background:none;color:#999;font-size:9px}.activity{height:64px;overflow:auto;margin:6px 0}.agentMsg{display:flex;gap:7px;align-items:flex-start;font-size:9px;color:#6e6874}.agentMsg>span{color:#765df2}.agentMsg p{margin:1px 0;line-height:1.45}.step{display:flex;align-items:center;gap:8px;padding:2px 0;color:#6f6875;font-size:9px}.step i{width:13px;height:13px;border-radius:50%;border:1px solid #d5d0dc;display:grid;place-items:center;font-style:normal;font-size:7px}.step.done i{background:#6e58ef;color:white;border-color:#6e58ef}.step.running i{border-color:#7d68ef;border-top-color:transparent;animation:spin .7s linear infinite}.controlRow{display:flex;align-items:center;gap:8px}.buildSwitch,.quick{display:flex;gap:4px}.buildSwitch{padding:3px;background:#eeebf1;border-radius:9px}.buildSwitch button{border:0;background:none;border-radius:7px;padding:5px 8px;font-size:8px;color:#777}.buildSwitch button.active{background:#fff;color:#29252f;box-shadow:0 1px 4px #0001}.quick button{border:1px solid #dfdbe5;background:#fff;color:#77717f;border-radius:999px;font-size:8px;padding:5px 8px}.quick button.active{border-color:#907cf1;color:#5e48cf;background:#f1edff}.promptBox{border:1px solid #d6d1df;background:#fff;border-radius:14px;padding:8px 10px;box-shadow:0 8px 24px #332b4510;margin-top:7px}.promptBox textarea{width:100%;border:0;outline:0;resize:none;color:#28242d;font-size:10px;line-height:1.45;min-height:32px}.promptActions{display:flex;align-items:center;gap:5px}.promptActions button{border:0;background:#f0edf3;height:28px;min-width:28px;border-radius:8px;font-size:9px}.promptActions span{margin-left:auto;font-size:8px;color:#9b95a2}.promptActions .send{padding:0 13px;background:#232027;color:#fff;border-radius:9px}.promptActions .send.loading{opacity:.62;pointer-events:none}.hint{display:flex;gap:14px;font-size:7px;color:#a19aa8;padding:5px 3px 0}.hint b{font-weight:600;color:#756d7e}.mcpPanel{position:fixed;right:18px;top:18px;width:350px;max-height:calc(100vh - 36px);overflow:auto;background:#fbfafc;border:1px solid #d8d3df;border-radius:18px;box-shadow:0 24px 80px #27213040;padding:14px;z-index:30;transform:translateX(390px);opacity:0;transition:.35s cubic-bezier(.2,.8,.2,1)}.mcpPanel.open{transform:none;opacity:1}.mcpHead{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.mcpHead>div{display:grid}.mcpHead b{font-size:13px}.mcpHead span{font-size:9px;color:#999;margin-top:2px}.mcpHead button{border:0;background:#efedf2;width:26px;height:26px;border-radius:8px}.mcpTools{display:grid;grid-template-columns:1fr 1fr;gap:6px}.mcpTool{display:flex;align-items:center;gap:7px;border:1px solid #e2dee7;background:#fff;padding:8px;border-radius:11px;min-width:0}.mcpTool>i{font-style:normal;width:25px;height:25px;background:#f0ecff;color:#644ddb;border-radius:8px;display:grid;place-items:center;flex:0 0 auto}.mcpTool div{display:grid;min-width:0}.mcpTool b{font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mcpTool span{font-size:6px;color:#999;margin-top:2px}.mcpTool em{display:none}.endpoint{margin-top:10px;background:#242229;color:white;border-radius:12px;padding:10px;display:grid;gap:5px}.endpoint span{font-size:8px;color:#aaa}.endpoint code{font-size:8px;word-break:break-all}.endpoint button{justify-self:start;border:0;background:#3a3740;color:white;border-radius:7px;padding:5px 8px;font-size:8px}.modal{position:fixed;inset:0;background:#18151e55;backdrop-filter:blur(6px);z-index:40;display:grid;place-items:center}.modalCard{width:min(620px,92vw);max-height:80vh;overflow:auto;background:#fbfafc;border:1px solid #d9d5df;border-radius:18px;box-shadow:0 35px 90px #211b2b55;padding:16px}.modalHead{display:flex;justify-content:space-between;align-items:center}.modalHead b{font-size:14px}.modalHead button{border:0;background:#eeebf1;width:28px;height:28px;border-radius:8px}.tokenGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:12px}.tokenCard{border:1px solid #e0dce5;background:#fff;border-radius:12px;padding:10px}.tokenCard span{font-size:7px;color:#999}.tokenCard b{font-size:9px;display:block;margin-top:3px}.componentTags{display:flex;gap:5px;flex-wrap:wrap;margin-top:10px}.componentTags span{font-size:8px;border:1px solid #ddd8e3;border-radius:999px;padding:5px 7px;background:#fff}.toast{position:fixed;left:50%;bottom:20px;transform:translate(-50%,20px);background:#201e23;color:#fff;padding:7px 12px;border-radius:9px;font-size:9px;opacity:0;transition:.25s;z-index:50}.toast.show{opacity:1;transform:translate(-50%,0)}@keyframes spin{to{transform:rotate(360deg)}}@keyframes reveal{from{opacity:.15;transform:scale(.99)}to{opacity:1;transform:none}}@keyframes screenIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
body.dark{color:#eee;background:#1d1b20}body.dark .sidebar,body.dark .topbar,body.dark .composer{background:#222126;color:#eee;border-color:#343139}body.dark .canvasWrap{background:radial-gradient(circle at 20% 0,#29262f,#1f1d23 55%,#1b1a1f)}body.dark .sideCard,body.dark .promptBox,body.dark .quick button,body.dark .buildSwitch button.active,body.dark .seg button.active,body.dark .screenInspector,body.dark .flowCard,body.dark .modalCard{background:#2b2930;color:#ddd;border-color:#39363f}body.dark .project.active{background:#302d35;color:#fff}body.dark .sideLink{color:#b5afbd}body.dark .topbar .crumb b{color:#eee}body.dark .screenNav button.active{background:#332f3a;color:#fff}
@media(max-width:1100px){.shell{grid-template-columns:52px 1fr}.sidebar{display:none}.workspace{grid-column:2}.screensGrid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}.focusBody{grid-template-columns:1fr}.screenInspector{display:none}}@media(max-width:720px){.shell{grid-template-columns:1fr}.rail{display:none}.workspace{grid-column:1;grid-template-rows:48px 1fr 300px}.topbar{padding:0 8px}.topactions .share{display:none}.buildTop{display:none}.stage{padding:44px 12px 50px}.screensGrid{grid-template-columns:repeat(2,minmax(150px,1fr));gap:11px}.screenUI{height:310px}.screenHero h3{font-size:14px}.appSummary em{display:none}.flowStrip{margin-right:-8px}.controlRow{overflow:auto}.quick{white-space:nowrap}.promptActions span{display:none}.mcpPanel{right:8px;left:8px;width:auto}.mcpTools{grid-template-columns:1fr 1fr}.focusBody{display:block}.devicePreview{padding:10px}.devicePreview .phoneFrame{width:min(330px,100%)} }