:root{--ink:#161a22;--muted:#717986;--line:#e1e5ea;--blue:#2563eb;--nav:#111318}*{box-sizing:border-box}body{margin:0;background:#f4f5f7;color:var(--ink);font:14px Inter,system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}button,input,textarea,select{font:inherit}button{cursor:pointer}.hidden{display:none!important}.brand{display:flex;align-items:center;gap:9px;font-size:18px}.brand i{width:30px;height:30px;border-radius:8px;background:#2563eb;color:#fff;display:grid;place-items:center;font-style:normal}.brand b{letter-spacing:-.04em}.auth-shell{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}.auth-brand{background:#111318;color:#fff;padding:44px 8vw;display:flex;flex-direction:column}.auth-brand>div:nth-child(2){margin:auto 0}.auth-brand>div>span{font-size:10px;letter-spacing:.18em;color:#6f91d6}.auth-brand h1{font-size:52px;line-height:1.05;letter-spacing:-.05em;max-width:540px;margin:16px 0}.auth-brand p{color:#8e96a3;line-height:1.7;max-width:490px}.auth-brand ul{list-style:none;padding:18px 0}.auth-brand li{margin:12px 0;color:#b4bac4}.auth-brand li:before{content:"✓";color:#64a0ff;margin-right:10px}.auth-brand>small{color:#5f6671}.auth-form{display:grid;place-items:center;padding:30px}.auth-card{width:390px;max-width:100%}.auth-card h2{font-size:28px;letter-spacing:-.04em;margin:0}.auth-card>p{color:#7a818d}.auth-card label,.modal label{display:block;font-size:11px;font-weight:650;margin-top:14px}.auth-card input,.modal input,.modal textarea,.modal select{width:100%;border:1px solid #d9dde3;border-radius:8px;background:#fff;margin-top:6px;padding:0 11px;outline:none}.auth-card input,.modal input,.modal select{height:42px}.modal textarea{height:80px;padding-top:10px;resize:vertical}.auth-card input:focus,.modal input:focus,.modal textarea:focus,.modal select:focus{border-color:#7ba1ef;box-shadow:0 0 0 3px #2563eb12}.auth-card form>button{width:100%;height:42px;border:0;border-radius:8px;background:#1b1e24;color:#fff;margin-top:20px;font-weight:700}.switch{text-align:center;font-size:12px!important}.switch button{border:0;background:none;color:#2563eb}.error{padding:10px;background:#fff0f0;color:#b64646;border-radius:7px;margin-top:10px;font-size:11px}.app{height:100vh;display:flex;overflow:hidden}.sidebar{width:224px;background:var(--nav);color:#fff;display:flex;flex-direction:column;padding:18px 12px 12px}.sidebar>.brand{padding:0 7px 20px}.new{height:36px;border:0;border-radius:8px;background:#fff;color:#171a20;padding:0 10px;display:flex;align-items:center;font-size:11px;font-weight:650}.new kbd{margin-left:auto;color:#9298a1;font-size:9px}.sidebar nav>small,.project-nav>small{display:block;color:#636973;font-size:8px;letter-spacing:.12em;margin:22px 9px 7px}.sidebar nav>button,.project-nav button{width:100%;height:34px;border:0;border-radius:7px;background:transparent;color:#8d949f;display:flex;align-items:center;gap:9px;padding:0 9px;text-align:left;font-size:10px}.sidebar nav>button:hover,.sidebar nav>button.active,.project-nav button:hover{background:#1f2229;color:#fff}.project-nav button i{width:6px;height:6px;border-radius:2px;background:#4e83ee}.side-fill{flex:1}.usage{border-top:1px solid #272a31;border-bottom:1px solid #272a31;padding:11px 9px;margin-top:8px}.usage div{display:flex;justify-content:space-between;color:#9298a2;font-size:9px}.usage>i{height:3px;background:#30343c;display:block;margin:8px 0 6px}.usage>i em{display:block;width:72%;height:100%;background:#4c80e9}.usage>small{font-size:8px;color:#646a75}.settings-nav{margin-bottom:7px}.settings-nav button i{margin-left:auto;width:6px;height:6px;border-radius:50%;background:#36bd76}.profile{border-top:1px solid #272a31;display:flex;align-items:center;gap:8px;padding:12px 5px 0}.profile>i{width:29px;height:29px;border-radius:8px;background:#25375d;color:#a8c2f8;display:grid;place-items:center;font-style:normal;font-size:8px}.profile>div{flex:1}.profile b,.profile small{display:block}.profile b{font-size:10px}.profile small{font-size:8px;color:#6c737e}.profile button{border:0;background:none;color:#7a808a}.workspace{flex:1;min-width:0;display:flex;flex-direction:column}.workspace>header{height:58px;background:#fff;border-bottom:1px solid var(--line);padding:0 15px;display:flex;align-items:center;justify-content:space-between}.project-heading{display:flex;align-items:center;gap:9px}.project-heading>i{width:30px;height:30px;border-radius:8px;background:#eaf0ff;color:#285fcf;display:grid;place-items:center;font-style:normal;font-weight:700}.project-heading b,.project-heading small{display:block}.project-heading b{font-size:11px}.project-heading small{font-size:8px;color:#8a919b}.project-heading small span{display:inline-block;width:5px;height:5px;border-radius:50%;background:#36b975;margin-right:3px}.workspace>header>div:last-child{display:flex;gap:7px}.subtle,.primary{height:32px;border-radius:7px;padding:0 11px;font-size:10px;font-weight:650}.subtle{background:#fff;border:1px solid #dfe2e7;color:#4e5560}.primary{background:#1a1d23;color:#fff;border:1px solid #1a1d23}.dashboard{padding:34px;overflow:auto}.welcome{background:#fff;border:1px solid var(--line);border-radius:13px;padding:28px;display:flex;align-items:center;justify-content:space-between}.welcome small{color:#2563eb;font-size:8px;letter-spacing:.14em}.welcome h1{font-size:30px;letter-spacing:-.045em;margin:8px 0}.welcome p{color:#747c88;max-width:620px}.welcome button{height:39px;border:0;border-radius:8px;background:#2563eb;color:#fff;padding:0 14px;font-weight:650}.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-top:18px}.project-card{background:#fff;border:1px solid var(--line);border-radius:11px;padding:16px;display:flex;gap:11px;text-align:left;min-height:110px}.project-card:hover{border-color:#b9c7df;box-shadow:0 9px 24px #17223a0c}.project-card>i{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;font-style:normal;font-weight:700}.project-card b,.project-card small,.project-card span{display:block}.project-card small{color:#858c96;font-size:9px;margin:5px 0}.project-card span{font-size:7px;color:#a0a6ae}.empty{text-align:center;padding:55px;color:#7d8591;grid-column:1/-1}.empty i,.empty b{display:block}.empty i{font-style:normal;color:#2563eb;font-size:23px}.builder{flex:1;min-height:0;display:grid;grid-template-columns:390px 1fr}.conversation{background:#fff;border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0}.conversation>header{height:44px;border-bottom:1px solid #eceff2;display:flex;align-items:center;justify-content:space-between;padding:0 15px;font-size:10px}.messages{flex:1;overflow:auto;padding:18px}.day{text-align:center;font-size:7px;color:#a1a7af}.user-message{margin:16px 0 16px 35px;background:#f0f2f5;border-radius:11px 11px 3px 11px;padding:11px;font-size:10px;line-height:1.55}.ai-message{font-size:10px;line-height:1.6;color:#525965}.ai-message header{display:flex;align-items:center;gap:6px}.ai-message header i{width:23px;height:23px;border-radius:7px;background:#eaf0ff;color:#2563eb;display:grid;place-items:center;font-style:normal}.empty-chat{text-align:center;color:#818894;margin-top:100px}.prompt{border:1px solid #ccd1d8;border-radius:11px;margin:8px 14px 0;padding:9px}.prompt textarea{width:100%;height:58px;border:0;resize:none;outline:none;font-size:10px}.prompt>div{display:flex;justify-content:space-between}.model-button{height:27px;border:0;border-radius:6px;background:#f1f3f6;color:#555d68;font-size:8px}.send{width:28px;height:28px;border:0;border-radius:7px;background:#2563eb;color:#fff}.conversation>small{text-align:center;color:#9aa0a9;font-size:7px;padding:6px 0 11px}.canvas{display:flex;flex-direction:column;min-width:0}.canvas>header{height:44px;background:#fff;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 10px}.tabs,.devices{display:flex;background:#f1f3f5;border-radius:7px;padding:3px;width:max-content}.tabs button,.devices button{height:26px;border:0;background:transparent;border-radius:5px;color:#7b828c;font-size:8px;padding:0 8px}.tabs button.active,.devices button.active{background:#fff;color:#252a33;box-shadow:0 1px 3px #1118271b}.devices{justify-self:center}.canvas>header>#refresh-preview{justify-self:end;height:28px;border:1px solid #dfe2e7;background:#fff;border-radius:6px;font-size:8px}.preview-wrap{flex:1;min-height:0;padding:20px;background-color:#eef0f2;background-image:radial-gradient(#d3d6dc 1px,transparent 1px);background-size:18px 18px;display:grid;place-items:center}.preview-wrap iframe{width:100%;height:100%;border:1px solid #d4d9e0;background:#fff;border-radius:8px}.preview-wrap iframe.tablet{width:75%}.preview-wrap iframe.mobile{width:375px}.code-area{flex:1;min-height:0;display:grid;grid-template-columns:190px 1fr;position:relative;background:#111318}.code-area aside{border-right:1px solid #292c34;padding:12px 0}.code-area aside>b{display:block;color:#747b86;font-size:7px;padding:0 11px 10px}.code-area aside button{width:100%;height:28px;border:0;background:transparent;color:#8c939e;text-align:left;padding:0 14px;font-size:8px}.code-area aside button.active{background:#23262e;color:#fff}.code-area textarea{border:0;resize:none;outline:none;background:#15171d;color:#a8c7fa;padding:20px;font:10px/1.7 ui-monospace,monospace}.code-area>#save-file{position:absolute;right:12px;bottom:12px;height:29px;border:0;border-radius:6px;background:#2563eb;color:#fff;font-size:8px}.modal{position:fixed;inset:0;background:#10141c70;backdrop-filter:blur(4px);z-index:20;display:grid;place-items:center;padding:15px}.modal>section{width:440px;max-width:100%;background:#fff;border-radius:13px;padding:21px;max-height:92vh;overflow:auto}.modal>section.wide{width:570px}.modal section>header{display:flex;justify-content:space-between}.modal h2{font-size:18px;margin:0}.modal header p{font-size:9px;color:#838b96}.modal header>button{border:0;background:transparent;font-size:20px}.modal form>.primary{width:100%;height:38px;margin-top:18px}.secure-note{background:#f1f6ff;border:1px solid #dbe7fc;color:#2660ca;border-radius:8px;padding:10px;display:flex;gap:8px;margin:12px 0}.secure-note b,.secure-note small{display:block}.provider-form{display:grid;grid-template-columns:1fr 1fr;gap:0 10px}.provider-form .full,.provider-form>.primary{grid-column:1/-1}.provider-form .check{display:flex;align-items:center;gap:6px}.provider-form .check input{width:14px;height:14px;margin:0}.saved-provider{display:flex;align-items:center;gap:9px;border-bottom:1px solid #edf0f2;padding:9px}.saved-provider>i{width:30px;height:30px;border-radius:8px;background:#111827;color:#fff;display:grid;place-items:center;font-style:normal}.saved-provider div{flex:1}.saved-provider b,.saved-provider small{display:block}.saved-provider small{font-size:7px;color:#858d98}.saved-provider>span{font-size:7px;color:#278458;background:#eaf7ef;padding:4px 6px;border-radius:8px}.admin-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.admin-stats article{border:1px solid var(--line);border-radius:8px;padding:12px}.admin-stats small,.admin-stats b{display:block}.admin-stats b{font-size:24px}.toast{position:fixed;right:20px;bottom:20px;background:#17201b;color:#fff;padding:11px 14px;border-radius:8px;font-size:10px;z-index:30}.toast.bad{background:#8e3434}@media(max-width:900px){.sidebar{width:190px}.builder{grid-template-columns:340px 1fr}.project-grid{grid-template-columns:1fr 1fr}}@media(max-width:720px){.sidebar{display:none}.builder{grid-template-columns:1fr}.canvas{display:none}.project-grid{grid-template-columns:1fr}.dashboard{padding:18px}.welcome{align-items:flex-start;flex-direction:column}.auth-shell{grid-template-columns:1fr}.auth-brand{display:none}.auth-form{min-height:100vh}}