/* Supreme Pro — Android App Builder UI */
.ab-wrap{max-width:1600px;margin:0 auto;padding:0 14px}
.ab{--b:#1b86ea;background:#fff;border:1px solid #dfe4f3;border-radius:18px;overflow:hidden;position:relative;box-shadow:0 20px 50px -30px rgba(20,30,90,.55);font-family:'DM Sans',system-ui,sans-serif;color:#0f1226}
.ab button{font:600 13px/1 'DM Sans',system-ui,sans-serif;cursor:pointer}
.ab-top{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:10px 12px;background:#0f1530;color:#fff}
.ab-grp{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.ab-top button{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.14);padding:9px 12px;border-radius:10px}
.ab-top .ab-run{background:linear-gradient(135deg,#16a34a,#22c55e);border-color:transparent}.ab-top .ab-build{background:linear-gradient(135deg,#1b86ea,#6c4de6);border-color:transparent}
.ab-name{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:#fff;border-radius:10px;padding:9px 12px;font:700 14px 'DM Sans',sans-serif;min-width:150px}
.ab-main{display:grid;grid-template-columns:230px minmax(0,1fr) 390px;height:clamp(560px,78vh,820px)}
.ab-files{background:#f6f7fc;border-right:1px solid #e3e6f2;display:flex;flex-direction:column;min-height:0}
.ab-fh{display:flex;justify-content:space-between;align-items:center;padding:10px 10px 6px;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:#5d6380}.ab-fh button{background:#fff;border:1px solid #dfe4f3;border-radius:8px;padding:5px 7px;margin-left:3px;font-size:12px}
.ab-tree{overflow:auto;flex:1;padding-bottom:12px;font-size:13px}
.ab-n{padding:5px 8px;cursor:pointer;white-space:nowrap;display:flex;align-items:center;gap:5px;user-select:none}.ab-n:hover{background:#e9eefc}.ab-n.on{background:#dbe8ff;font-weight:700}.ab-n i{font-style:normal;width:10px;color:#6b7390}
.ab-fa{margin-left:auto;display:none}.ab-n:hover .ab-fa{display:inline}.ab-fa button{border:0;background:transparent;padding:2px 4px;font-size:12px}
.ab-ed{display:flex;flex-direction:column;min-width:0;min-height:0;background:#101426}
.ab-tabs{display:flex;overflow-x:auto;background:#0b0f20;min-height:36px}
.ab-tab{padding:9px 12px;color:#9aa3c7;font-size:12.5px;cursor:pointer;white-space:nowrap;border-right:1px solid #1a2040;display:flex;gap:8px;align-items:center}.ab-tab.on{background:#101426;color:#fff;box-shadow:inset 0 2px 0 var(--b)}.ab-tab b{opacity:.6;font-size:15px}.ab-tab b:hover{opacity:1;color:#ff6b6b}
.ab-edbody{flex:1;display:flex;min-height:0;position:relative}
.ab-ln{width:44px;padding:12px 6px 12px 0;text-align:right;color:#5b6490;font:13px/20px ui-monospace,Menlo,Consolas,monospace;overflow:hidden;white-space:pre;user-select:none;background:#0d1124}
.ab-cw{position:relative;flex:1;min-width:0}
.ab-hl,.ab-ta{position:absolute;inset:0;margin:0;padding:12px;border:0;font:13px/20px ui-monospace,Menlo,Consolas,monospace;tab-size:2;white-space:pre;overflow:auto;box-sizing:border-box}
.ab-hl{color:#d6dcff;pointer-events:none;background:transparent}
.ab-ta{background:transparent;color:transparent;caret-color:#fff;resize:none;outline:none;-webkit-text-fill-color:transparent}
.ab-ta::selection{background:rgba(80,130,255,.4);-webkit-text-fill-color:transparent}
.ab-hl .hc{color:#6f7aa8;font-style:italic}.ab-hl .hs{color:#8be28b}.ab-hl .ht{color:#ff8fb0}.ab-hl .hn{color:#ffc27a}.ab-hl .hk{color:#7db4ff}
.ab-status{background:#1b86ea;color:#fff;font-size:11.5px;padding:4px 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ab-empty,.ab-bin{margin:auto;color:#9aa3c7;text-align:center;padding:20px}.ab-bin img{max-width:80%;max-height:60vh;background:repeating-conic-gradient(#222a4a 0 25%,#181e38 0 50%) 0 0/16px 16px;border-radius:8px}
.ab-prev{background:#e9ecf6;border-left:1px solid #e3e6f2;display:flex;flex-direction:column;min-height:0}
.ab-ph{display:flex;gap:6px;align-items:center;padding:8px;background:#f6f7fc;border-bottom:1px solid #e3e6f2}.ab-ph select{flex:1;padding:7px;border:1px solid #dfe4f3;border-radius:8px;font:500 13px 'DM Sans',sans-serif}.ab-ph button{background:#fff;border:1px solid #dfe4f3;border-radius:8px;padding:7px 10px}.ab-live{font-size:12px;display:flex;gap:4px;align-items:center}
.ab-stage{flex:1;overflow:hidden;display:flex;justify-content:center;align-items:center;padding:10px;min-height:0}
.ab-pwrap{flex:none;position:relative}
.ab-phone{position:absolute;left:0;top:0;transform-origin:top left;background:linear-gradient(145deg,#2a2f45,#0b0e1a 55%,#1c2136);border-radius:44px;padding:14px;box-sizing:border-box;box-shadow:0 22px 44px -18px rgba(0,0,0,.65),inset 0 0 0 2px #3a4160,inset 0 0 0 5px #0b0e1a}
.ab-phone.tab{border-radius:28px}
.ab-screen{position:relative;width:100%;height:100%;background:#fff;border-radius:32px;overflow:hidden;display:flex;flex-direction:column}
.ab-phone.tab .ab-screen{border-radius:16px}
.ab-sbar{flex:none;height:26px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;font:700 11.5px 'DM Sans',system-ui,sans-serif;color:#111;background:#fff;position:relative;z-index:2}
.ab-cam{position:absolute;left:50%;top:7px;transform:translateX(-50%);width:11px;height:11px;border-radius:50%;background:#0b0e1a;box-shadow:0 0 0 2px #1a1f33}
.ab-sic{font-size:7px;letter-spacing:2px;color:#111}
.ab-phone iframe{flex:none;display:block;border:0;background:#fff;border-radius:0}
.ab-home{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);width:34%;height:4px;border-radius:4px;background:rgba(0,0,0,.55);z-index:3;pointer-events:none}
.ab-btn{position:absolute;right:-3px;width:3px;border-radius:2px;background:#2c3350}.ab-b1{top:22%;height:7%}.ab-b2{top:32%;height:12%}.ab-b3{left:-3px;right:auto;top:26%;height:9%}
.ab-phone.ls .ab-sbar{padding:0 28px}
.ab-cons{height:130px;background:#0b0f20;color:#d6dcff;display:flex;flex-direction:column;font:12px/1.4 ui-monospace,Menlo,monospace}
.ab-ch{display:flex;justify-content:space-between;padding:4px 8px;background:#151a33}.ab-ch button{background:transparent;border:0;color:#9aa3c7;font-size:11px}
.ab-cons>div:last-child{overflow:auto;flex:1;padding:4px 8px}.ab-l{white-space:pre-wrap;word-break:break-all;border-bottom:1px solid #1a2040;padding:2px 0}.ab-l.error{color:#ff7b7b}.ab-l.warn{color:#ffd166}
.ab-mtabs{display:none}
.ab-modal{position:absolute;inset:0;background:rgba(10,14,34,.65);display:flex;align-items:center;justify-content:center;z-index:30;padding:14px}.ab-modal[hidden]{display:none}
.ab-box{background:#fff;border-radius:18px;padding:22px;width:min(680px,100%);max-height:100%;overflow:auto;position:relative}.ab-box h3{margin:0 0 8px;font:800 22px 'Sora','DM Sans',sans-serif}.ab-box h4{margin:16px 0 8px}
.ab-x{position:absolute;right:12px;top:12px;border:0;background:#eef1fb;border-radius:50%;width:34px;height:34px}
.ab-sm{font-size:13px;color:#5d6380;line-height:1.55}.ab-2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ab-f{display:grid;gap:5px;margin:0 0 10px;font-size:12.5px;font-weight:600;color:#3a4266}.ab-f input,.ab-f select{width:100%;box-sizing:border-box;padding:8px 10px;border:1px solid #dfe4f3;border-radius:9px;font:500 14px 'DM Sans',sans-serif;background:#fff;color:#0f1226}
.ab-row,.ab-exp{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}.ab-row button,.ab-exp button{flex:1;padding:12px;border-radius:12px;border:1px solid #dfe4f3;background:#f9faff;color:#0f1226}.ab-row .p,.ab-exp .p{background:linear-gradient(135deg,#1b86ea,#6c4de6);color:#fff;border-color:transparent}.ab-exp button.done{outline:2px solid #16a34a}
.ab-steps{font-size:13px;color:#4a5273;line-height:1.7;padding-left:20px}
.ab-pl{display:grid;gap:6px}.ab-pi{display:flex;gap:6px}.ab-pi>button:first-child{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;padding:10px 12px;border:1px solid #dfe4f3;border-radius:12px;background:#f9faff;color:#0f1226}.ab-pi.on>button:first-child{border-color:var(--b);background:#eef6ff}.ab-pi span{font-weight:500;font-size:12px;color:#6b7390}.ab-pi .bad{border:1px solid #f3c3c6;border-radius:12px;background:#fff;padding:0 12px}
.ab-tpl{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}.ab-tpl button{display:flex;flex-direction:column;gap:5px;align-items:flex-start;text-align:left;padding:14px;border-radius:14px;border:1px solid #dfe4f3;background:#f9faff;color:#0f1226}.ab-tpl button:hover{border-color:var(--b)}.ab-tpl i{font-style:normal;font-size:26px}.ab-tpl span{font-weight:500;font-size:12px;color:#5d6380}
@media(max-width:1100px){.ab-main{grid-template-columns:200px minmax(0,1fr) 330px}}
@media(max-width:900px){.ab-mtabs{display:flex;background:#0b0f20}.ab-mtabs button{flex:1;padding:11px;background:transparent;color:#9aa3c7;border:0;border-bottom:3px solid transparent}.ab-mtabs button.on{color:#fff;border-color:var(--b)}
.ab-main{display:block;height:74vh}.ab-main>aside,.ab-main>section{display:none;height:100%}.ab-main[data-view=files]>.ab-files,.ab-main[data-view=code]>.ab-ed,.ab-main[data-view=prev]>.ab-prev{display:flex}.ab-files,.ab-prev{border:0}.ab-2{grid-template-columns:1fr}}

.ab .ab-ta{border:0!important;padding:12px!important;margin:0!important;background:transparent!important;box-shadow:none!important;border-radius:0!important;height:100%!important;width:100%!important;min-height:0!important;max-width:none!important;outline:none!important;font:13px/20px ui-monospace,Menlo,Consolas,monospace!important;color:transparent!important}
.ab .ab-name{width:230px!important;max-width:100%!important;background:rgba(255,255,255,.08)!important;color:#fff!important;border:1px solid rgba(255,255,255,.16)!important;border-radius:10px!important;padding:9px 12px!important;margin:0!important;height:auto!important;box-shadow:none!important}
.ab .ab-ph select,.ab .ab-f input,.ab .ab-f select{height:auto!important;margin:0!important}
.ab .ab-live input{width:auto!important;height:auto!important}

.ab-log{max-height:220px;overflow:auto;background:#0b1020;color:#c9d4ff;border-radius:10px;padding:10px;font:12px/1.45 ui-monospace,Menlo,Consolas,monospace;white-space:pre-wrap;word-break:break-word}