*{box-sizing:border-box}:root{--bg:#080b14;--panel:#111728;--panel2:#171e32;--text:#f4f7ff;--muted:#94a0bb;--accent:#6d8cff;--border:#27314a;--danger:#ff6f80}body.light{--bg:#f4f6fb;--panel:#fff;--panel2:#eef2fa;--text:#111827;--muted:#64748b;--border:#dce2ef}*{font-family:system-ui,-apple-system,sans-serif}body{margin:0;background:var(--bg);color:var(--text)}header{height:68px;padding:10px 16px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--bg);z-index:30}.brand{display:flex;gap:10px;align-items:center}.brand>b{width:42px;height:42px;display:grid;place-items:center;background:linear-gradient(135deg,#6d8cff,#a56dff);border-radius:13px}.brand strong{display:block}.brand i{color:var(--accent);font-style:normal;font-size:10px}.brand small{color:var(--muted);font-size:10px}button{color:inherit;font:inherit;cursor:pointer}header button{border:0;background:none;font-size:24px}.page{display:none;max-width:1200px;margin:auto;padding:20px 15px 90px}.page.active{display:block}.hero{padding:26px;border:1px solid var(--border);border-radius:24px;background:radial-gradient(circle at top right,#233a85,transparent 45%),var(--panel)}.hero p,.title small,.builderhead small,.studiohead small{color:var(--accent);font-size:10px;font-weight:bold;letter-spacing:1.3px}.hero h1{max-width:650px;margin:8px 0;font-size:30px}.hero span{color:var(--muted)}.primary{background:var(--accent);color:white;border:0;border-radius:13px;padding:12px 17px;font-weight:700}.hero .primary{display:block;margin-top:20px}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0}.stats div,.card{background:var(--panel);border:1px solid var(--border);padding:16px;border-radius:17px}.stats b{font-size:22px;display:block}.stats small{color:var(--muted)}h3{margin-top:28px}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:11px}.project{background:var(--panel);border:1px solid var(--border);border-radius:18px;padding:17px;cursor:pointer;position:relative}.project:hover{border-color:var(--accent)}.project h3{margin:9px 0 5px}.project p,.project small{color:var(--muted);font-size:12px}.badge{font-size:10px;color:var(--accent);background:var(--panel2);padding:5px 8px;border-radius:99px}.del{position:absolute;right:10px;top:9px;border:0;background:none;color:var(--danger)}.title{display:flex;justify-content:space-between;align-items:center}.empty{text-align:center;padding:70px 20px;background:var(--panel);border:1px dashed var(--border);border-radius:20px;color:var(--muted)}nav{position:fixed;bottom:0;left:0;right:0;background:var(--panel);border-top:1px solid var(--border);display:flex;z-index:40}nav button{flex:1;border:0;background:none;padding:9px 3px;color:var(--muted);font-size:17px}nav span{display:block;font-size:9px}nav .active{color:var(--accent)}.studiohead{display:flex;align-items:center;gap:10px;margin-bottom:12px}.studiohead h2{margin:3px 0}.studiohead>button:first-child{background:none;border:0;font-size:24px}.studiohead .small{margin-left:auto;padding:9px 12px}.studio{display:grid;grid-template-columns:260px 1fr;min-height:580px;border:1px solid var(--border);border-radius:20px;overflow:hidden;background:var(--panel)}aside{border-right:1px solid var(--border);overflow:auto}.asidebar{display:flex;justify-content:space-between;padding:14px;border-bottom:1px solid var(--border);font-size:10px;color:var(--muted)}.asidebar button{background:none;border:0;color:var(--accent)}.treeitem{display:flex;gap:7px;align-items:center;padding:9px 10px;font-size:12px;cursor:pointer}.treeitem:hover,.treeitem.selected{background:var(--panel2)}.treeitem .actions{margin-left:auto}.mini{background:none;border:0;color:var(--muted)}.indent1{padding-left:28px}.indent2{padding-left:44px}.editorarea{min-width:0;display:flex;flex-direction:column}#tabs{height:43px;display:flex;overflow:auto;background:var(--panel2)}.tab{white-space:nowrap;border:0;background:transparent;padding:11px 14px;border-right:1px solid var(--border);color:var(--muted)}.tab.active{background:var(--panel);color:var(--text);border-top:2px solid var(--accent)}.toolbar{display:flex;gap:7px;padding:8px;border-bottom:1px solid var(--border);overflow:auto}.toolbar span{margin-right:auto;color:var(--muted);font-size:11px;padding:8px}.toolbar button{border:1px solid var(--border);background:var(--panel2);border-radius:8px;padding:6px 10px;font-size:11px}.codewrap{display:flex;flex:1;min-height:440px;background:#0a0e19}.codewrap pre{margin:0;padding:14px 8px;text-align:right;color:#68738c;background:#0d1220;min-width:48px;user-select:none;font:13px/1.6 ui-monospace,monospace;overflow:hidden}.codewrap textarea{flex:1;resize:none;border:0;outline:0;padding:14px;background:transparent;color:#e7ebf5;font:13px/1.6 ui-monospace,monospace}.status{display:flex;justify-content:space-between;padding:7px 11px;font-size:10px;color:var(--muted);border-top:1px solid var(--border)}.modalbg{position:fixed;inset:0;background:#0009;display:none;align-items:end;justify-content:center;z-index:60}.modalbg.show{display:flex}.modal{background:var(--panel);width:min(600px,100%);padding:22px;border-radius:25px 25px 0 0}.modalhead{display:flex;justify-content:space-between}.modalhead h2{margin:4px 0 15px}.modalhead small{color:var(--accent)}.close,.closeFile{background:none;border:0;font-size:25px}label{display:block;font-size:12px;margin:12px 0;font-weight:600}input,select{display:block;width:100%;margin-top:6px;padding:13px;border-radius:11px;border:1px solid var(--border);background:var(--panel2);color:var(--text)}.modal .primary{width:100%;margin-top:8px}.findbar{position:fixed;top:75px;right:15px;z-index:50;background:var(--panel);border:1px solid var(--border);padding:10px;border-radius:14px;display:none;gap:6px}.findbar.show{display:flex}.findbar input{width:140px;margin:0;padding:8px}.findbar button{border:0;background:var(--panel2);border-radius:8px;padding:7px 9px}
/* UI BUILDER */.builderhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.builderhead h1{margin:3px 0}.builderhead button{border:1px solid var(--border);background:var(--panel2);padding:10px 12px;border-radius:10px;margin-left:5px}.builderhead .primary{border:0}.builderLayout{display:grid;grid-template-columns:210px 1fr 240px;border:1px solid var(--border);border-radius:20px;overflow:hidden;min-height:680px;background:var(--panel)}.palette,.properties{padding:14px;border-right:1px solid var(--border)}.properties{border-right:0;border-left:1px solid var(--border)}.palette h3,.properties h3{font-size:10px;color:var(--muted);letter-spacing:1px;margin:0 0 12px}.component-list{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:28px}.component-list button{background:var(--panel2);border:1px solid var(--border);border-radius:10px;padding:10px 5px;font-size:17px}.component-list span{display:block;font-size:9px;margin-top:3px}.canvasArea{display:flex;flex-direction:column;min-width:0;background:var(--panel2)}.screen-tabs{height:45px;padding:7px;display:flex;gap:6px;border-bottom:1px solid var(--border);overflow:auto}.screen-tab{background:var(--panel);border:1px solid var(--border);padding:6px 11px;border-radius:8px;font-size:11px;white-space:nowrap}.screen-tab.active{border-color:var(--accent);color:var(--accent)}.canvasWrap{flex:1;display:grid;place-items:center;padding:25px;overflow:auto}.phone{width:290px;min-height:560px;background:#05070d;border:7px solid #05070d;border-radius:31px;box-shadow:0 12px 35px #0008;position:relative}.notch{width:100px;height:20px;background:#05070d;border-radius:0 0 15px 15px;position:absolute;left:50%;transform:translateX(-50%);z-index:3}.canvas{background:#fff;color:#171717;min-height:546px;border-radius:25px;padding:32px 14px 18px;display:flex;flex-direction:column;gap:10px}.canvas.drop{outline:3px dashed #6d8cff;outline-offset:-6px}.ui-item{min-height:32px;position:relative;cursor:pointer;border:1px dashed transparent}.ui-item.selected{outline:2px solid #6d8cff;outline-offset:2px}.ui-text{font-size:18px;font-weight:600}.ui-button{background:#5f7ff5;color:#fff;border:0;border-radius:8px;padding:11px}.ui-input{border:1px solid #d5d9e5;border-radius:7px;padding:11px;background:#fafafa}.ui-image{height:110px;background:#e7ebf5;border-radius:8px;display:grid;place-items:center;color:#73809b}.ui-card{background:#fff;border:1px solid #e1e4eb;border-radius:12px;padding:18px;box-shadow:0 2px 6px #0001}.ui-row{display:flex;gap:8px;min-height:45px;border:1px dashed #b6bfce;padding:8px}.ui-column{display:flex;flex-direction:column;gap:7px;min-height:60px;border:1px dashed #b6bfce;padding:8px}.ui-divider{height:1px;background:#d9dde6}.tree-ui{font-size:11px}.tree-ui-item{padding:7px;border-bottom:1px solid var(--border);cursor:pointer}.tree-ui-item.selected{color:var(--accent);background:var(--panel2)}.propempty{font-size:12px;color:var(--muted);line-height:1.5}.prop label{font-size:10px;color:var(--muted);margin:12px 0 4px}.prop input,.prop select{font-size:12px;padding:9px}.prop button{margin-top:14px;width:100%;background:var(--danger);border:0;border-radius:9px;padding:9px;color:#fff}.prop .hint{font-size:10px;color:var(--muted);margin-top:10px}@media(max-width:900px){.builderLayout{grid-template-columns:160px 1fr}.properties{grid-column:1/-1;border-left:0;border-top:1px solid var(--border)}.properties #props{max-width:500px}.component-list{grid-template-columns:1fr}.phone{transform:scale(.9);margin:-25px 0}.builderLayout{min-height:600px}}@media(max-width:650px){.studio{grid-template-columns:1fr}.studio aside{max-height:210px;border-right:0;border-bottom:1px solid var(--border)}.codewrap{min-height:360px}.hero h1{font-size:25px}.builderLayout{grid-template-columns:100px 1fr}.palette{padding:9px}.palette h3{font-size:8px}.component-list{grid-template-columns:1fr;gap:4px}.component-list button{padding:7px 2px}.component-list span{font-size:8px}.phone{width:260px;transform:scale(.9);transform-origin:center}.canvas{min-height:546px}.findbar{left:8px;right:8px;top:72px}.findbar input{width:100%}}

/* PHASE 5 — ANDROID PROJECT GENERATOR */
.generator-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.gen-card,.generated-panel{background:var(--panel);border:1px solid var(--border);border-radius:18px;padding:18px}
.gen-card h3,.generated-panel h3{margin:0 0 14px;font-size:15px}
.gen-status{display:flex;justify-content:space-between;align-items:center;background:var(--panel2);padding:14px;border-radius:12px;font-size:12px}
.gen-status b{color:var(--accent)}
.gen-progress{height:8px;background:var(--panel2);border-radius:99px;overflow:hidden;margin:15px 0}
#progressBar{height:100%;width:0;background:linear-gradient(90deg,var(--accent),#a56dff);transition:width .35s}
.muted{color:var(--muted);font-size:12px;line-height:1.6}
.gen-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:15px}
.gen-actions button{background:var(--panel2);border:1px solid var(--border);padding:10px;border-radius:10px;font-size:12px}
.generated-panel{margin-top:14px}
.panel-title{display:flex;justify-content:space-between;align-items:center;gap:10px}
.panel-title span{font-size:9px;letter-spacing:1px;color:var(--muted);border:1px solid var(--border);padding:5px 8px;border-radius:99px}
#generatedTree,.source-preview{background:#090d17;border:1px solid var(--border);border-radius:12px;padding:15px;color:#d7def0;min-height:180px;max-height:380px;overflow:auto;font:12px/1.6 ui-monospace,monospace;white-space:pre-wrap}
.source-preview{min-height:240px}
#generatedFileSelect{width:auto;max-width:52%;padding:8px;margin:0;font-size:11px}
@media(max-width:700px){.generator-grid{grid-template-columns:1fr}.panel-title{align-items:flex-start}.panel-title h3{font-size:13px}}


/* PHASE 6 — LIVE PREVIEW & TESTING */
.preview-actions{display:flex;gap:7px;flex-wrap:wrap}.preview-actions button{border:1px solid var(--border);background:var(--panel2);padding:10px 12px;border-radius:10px;font-size:12px}.preview-actions .primary{border:0}
.preview-layout{display:grid;grid-template-columns:190px 1fr 290px;min-height:650px;border:1px solid var(--border);border-radius:20px;overflow:hidden;background:var(--panel)}
.preview-sidebar{padding:14px;border-right:1px solid var(--border)}.preview-sidebar h3,.debug-panel h3{font-size:10px;letter-spacing:1px;color:var(--muted);margin:0 0 10px}
.preview-screen-btn{width:100%;text-align:left;border:1px solid transparent;background:none;color:var(--text);padding:10px;border-radius:9px;font-size:11px;margin-bottom:4px}.preview-screen-btn.active{background:var(--panel2);border-color:var(--accent);color:var(--accent)}
.test-tool{width:100%;text-align:left;background:var(--panel2);border:1px solid var(--border);padding:10px;border-radius:9px;margin:4px 0;font-size:11px}
.runtime-card{margin-top:20px;padding:13px;background:var(--panel2);border-radius:12px}.runtime-card small{display:block;color:var(--muted);font-size:9px}.runtime-card b{display:block;margin:5px 0;font-size:12px}.runtime-card span{font:18px ui-monospace,monospace;color:var(--accent)}
.device-stage{background:var(--panel2);display:flex;flex-direction:column;align-items:center;padding:15px;min-width:0}.device-toolbar{width:100%;display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--muted);margin-bottom:8px}.online-dot{width:8px;height:8px;border-radius:50%;background:#667085}.online-dot.running{background:#38c989;box-shadow:0 0 10px #38c989}
.preview-phone{width:310px;height:590px;background:#05070d;border:8px solid #05070d;border-radius:34px;position:relative;box-shadow:0 15px 45px #0008;overflow:hidden}.preview-notch{position:absolute;width:100px;height:20px;background:#05070d;border-radius:0 0 14px 14px;left:50%;transform:translateX(-50%);z-index:3}.preview-statusbar{height:29px;background:#fff;color:#333;padding:8px 14px;font-size:9px;display:flex;justify-content:space-between}.preview-canvas{height:510px;background:#fff;color:#171717;padding:16px;overflow:auto;display:flex;flex-direction:column;gap:10px}.preview-navbar{height:35px;background:#fff;color:#333;text-align:center;padding-top:7px;font-size:13px;border-top:1px solid #eee}
.pv-text{font-weight:600}.pv-button{background:#5f7ff5;color:white;border:0;border-radius:8px;padding:12px}.pv-input{border:1px solid #d5d9e5;border-radius:8px;padding:12px;color:#7d8799}.pv-image{height:120px;background:#e7ebf5;border-radius:9px;display:grid;place-items:center;color:#73809b}.pv-card{background:#fff;border:1px solid #e2e5ed;border-radius:12px;padding:18px;box-shadow:0 2px 7px #0001}.pv-row{display:flex;gap:8px;min-height:48px;border:1px dashed #bbc4d2;padding:8px}.pv-column{display:flex;flex-direction:column;gap:7px;min-height:60px;border:1px dashed #bbc4d2;padding:8px}.pv-divider{height:1px;background:#d8dde7}
.debug-panel{border-left:1px solid var(--border);display:flex;flex-direction:column;min-height:0}.debug-head{padding:14px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}.debug-head h3{margin:0}.debug-head span{font-size:9px;color:var(--muted)}.console-filters{padding:8px;border-bottom:1px solid var(--border);display:flex;gap:4px;overflow:auto}.console-filters button{border:0;background:transparent;color:var(--muted);font-size:9px;padding:6px;white-space:nowrap}.console-filters button.active{color:var(--accent);background:var(--panel2);border-radius:7px}.console-output{padding:10px;overflow:auto;flex:1;background:#090d17;font:10px/1.55 ui-monospace,monospace;min-height:400px}.log{margin-bottom:7px;border-left:2px solid #637083;padding-left:7px;color:#cbd3e2}.log .time{color:#68738c}.log.info{border-color:#6d8cff}.log.warn{border-color:#f5b942;color:#f0d59b}.log.error{border-color:#ff6f80;color:#ffb0b9}.test-results{margin-top:14px;background:var(--panel);border:1px solid var(--border);border-radius:18px;padding:15px}.results-body{display:grid;gap:8px}.test-row{display:flex;justify-content:space-between;gap:15px;padding:11px;background:var(--panel2);border-radius:9px;font-size:11px}.pass{color:#42c98c}.fail{color:#ff7182}.result-empty{color:var(--muted);font-size:12px;padding:12px 0}
@media(max-width:1000px){.preview-layout{grid-template-columns:160px 1fr}.debug-panel{grid-column:1/-1;border-left:0;border-top:1px solid var(--border);min-height:300px}.console-output{min-height:230px}.preview-phone{transform:scale(.92);margin:-22px 0}}
@media(max-width:620px){.preview-layout{grid-template-columns:100px 1fr}.preview-sidebar{padding:9px}.preview-sidebar h3{font-size:8px}.test-tool{font-size:9px;padding:8px}.preview-phone{width:270px;transform:scale(.86);margin:-42px -20px}.preview-actions{justify-content:flex-end}.preview-actions button{padding:8px;font-size:10px}.debug-panel{grid-column:1/-1}.console-filters button{font-size:8px}}

/* PHASE 7 — ANDROID BUILD ENVIRONMENT */
.build-top-actions{display:flex;gap:8px}.build-top-actions button,#saveBuildConfig,#clearBuildLogs{padding:10px 13px;border:1px solid var(--border);background:var(--panel2);border-radius:10px;font-size:11px}.build-top-actions .primary{border:0}
.build-dashboard{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:14px}.build-card,.build-queue-panel,.build-log-panel,.diagnostics-panel{background:var(--panel);border:1px solid var(--border);border-radius:18px;padding:16px}.build-card h3{margin:0 0 14px;font-size:14px}.build-config label{font-size:10px;color:var(--muted);display:block;margin-bottom:9px}.build-config input,.build-config select{margin-top:5px}.build-config button{width:100%;margin-top:4px}
.card-head{display:flex;justify-content:space-between;align-items:center}.card-head button{font-size:10px;padding:7px 9px;border-radius:8px;background:var(--panel2);border:1px solid var(--border)}
.dep-row{display:flex;gap:6px;align-items:center;padding:8px;background:var(--panel2);border-radius:9px;margin-bottom:6px;font:10px ui-monospace,monospace}.dep-row span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dep-row button{border:0;background:transparent;color:#ff7887}
.build-status-box{display:flex;align-items:center;gap:12px;background:var(--panel2);padding:14px;border-radius:12px}.build-orb{width:45px;height:45px;border-radius:50%;display:grid;place-items:center;background:#151d35;font-size:20px}.build-orb.building{animation:spin 1s linear infinite;color:var(--accent)}@keyframes spin{to{transform:rotate(360deg)}}.build-status-box b{display:block;font-size:13px}.build-status-box span{display:block;color:var(--muted);font-size:10px;margin-top:4px}
.build-progress{height:8px;background:var(--panel2);border-radius:99px;overflow:hidden;margin:15px 0}.build-progress div{height:100%;width:0;background:linear-gradient(90deg,var(--accent),#a56dff);transition:width .4s}.build-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.build-stats div{background:var(--panel2);padding:10px;border-radius:9px;text-align:center}.build-stats small{display:block;font-size:8px;color:var(--muted)}.build-stats b{font-size:15px;color:var(--accent)}.build-output-path{margin-top:12px;color:var(--muted);font-size:9px}.build-output-path code{color:#9bb0ff}
.build-queue-panel,.build-log-panel,.diagnostics-panel{margin-top:14px}.build-queue{display:grid;gap:7px}.queue-empty{font-size:11px;color:var(--muted);padding:8px 0}.queue-row{display:flex;align-items:center;gap:10px;padding:10px;background:var(--panel2);border-radius:9px;font-size:11px}.queue-icon{width:22px;text-align:center}.queue-row span{flex:1}.queue-row small{color:var(--muted)}.queue-done{color:#42c98c}.queue-active{color:var(--accent)}
.build-log-toolbar{display:flex;justify-content:space-between;padding:9px 0;color:var(--muted);font:10px ui-monospace,monospace}.build-logs{min-height:300px;max-height:460px;overflow:auto;background:#080c15;border:1px solid var(--border);border-radius:12px;padding:13px;font:10px/1.65 ui-monospace,monospace;color:#cbd4e6}.build-line{margin-bottom:3px}.build-line.info{color:#cbd4e6}.build-line.warn{color:#f0cc83}.build-line.error{color:#ff9aa7}.build-line.success{color:#67d7a0}.diagnostics-body{display:grid;gap:7px}.diag-row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;background:var(--panel2);padding:11px;border-radius:9px;font-size:11px}.diag-row small{color:var(--muted);display:block;margin-top:4px}
@media(max-width:900px){.build-dashboard{grid-template-columns:1fr 1fr}.build-status-card{grid-column:1/-1}}@media(max-width:600px){.build-dashboard{grid-template-columns:1fr}.build-status-card{grid-column:auto}.build-top-actions{margin-top:8px}.builderhead{flex-wrap:wrap}}

/* PHASE 8 — ADVANCED PROJECT SYSTEM */
.hub-actions{display:flex;gap:8px;flex-wrap:wrap}.hub-actions button,.file-actions button,.export-stack button{border:1px solid var(--border);background:var(--panel2);padding:9px 11px;border-radius:10px;font-size:11px}.hub-actions .primary{border:0}
.hub-grid{display:grid;grid-template-columns:1.4fr .8fr;gap:14px}.hub-card,.advanced-panel,.backup-panel{background:var(--panel);border:1px solid var(--border);border-radius:18px;padding:16px}.card-head span{font-size:9px;color:var(--muted);border:1px solid var(--border);padding:4px 7px;border-radius:99px}
.template-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.advanced-template{background:var(--panel2);border:1px solid var(--border);border-radius:12px;padding:12px;text-align:left}.advanced-template b{display:block;font-size:11px}.advanced-template small{display:block;color:var(--muted);font-size:9px;margin:5px 0 9px}.advanced-template button{font-size:9px;padding:6px 8px;border:0;border-radius:7px;background:#1b2545;color:var(--accent)}
.export-stack{display:grid;gap:8px}.export-stack button{text-align:left;padding:13px}.advanced-layout{display:grid;grid-template-columns:1.5fr .8fr;gap:14px;margin-top:14px}.file-workspace{display:grid;grid-template-columns:220px 1fr;min-height:400px;border:1px solid var(--border);border-radius:12px;overflow:hidden}.advanced-file-tree{background:#090d17;padding:10px;overflow:auto}.tree-item{width:100%;text-align:left;background:none;border:0;color:#b8c3d9;padding:7px;border-radius:6px;font:10px ui-monospace,monospace}.tree-item:hover,.tree-item.active{background:#18203a;color:#fff}.tree-item.folder{color:#92a5dc}.tree-empty{color:var(--muted);font-size:10px;padding:8px}.virtual-editor-wrap{display:flex;flex-direction:column;background:#080c15}.virtual-path{padding:9px 12px;border-bottom:1px solid var(--border);font:10px ui-monospace,monospace;color:#8fa2d9}.virtual-editor-wrap textarea{flex:1;width:100%;resize:none;border:0;border-radius:0;background:#080c15;color:#d8e0f0;padding:13px;font:11px/1.6 ui-monospace,monospace;outline:0}.virtual-editor-wrap button{border:0;border-top:1px solid var(--border);background:#121a2d;color:var(--accent);padding:10px;font-size:11px}
.version-history{display:grid;gap:7px;max-height:400px;overflow:auto}.version-item{padding:11px;background:var(--panel2);border-radius:10px;font-size:10px}.version-item b{display:block;font-size:11px}.version-item small{color:var(--muted);display:block;margin:4px 0 7px}.version-item button{font-size:9px;padding:5px 7px;background:#1a2442;border:0;border-radius:6px;color:var(--accent)}
.backup-panel{margin-top:14px}.backup-list{display:grid;gap:8px}.backup-row{display:flex;align-items:center;gap:10px;padding:11px;background:var(--panel2);border-radius:10px;font-size:11px}.backup-row span{flex:1}.backup-row small{color:var(--muted)}.backup-row button{font-size:9px;padding:6px 8px;border:1px solid var(--border);background:#151c30;border-radius:7px}
@media(max-width:800px){.hub-grid,.advanced-layout{grid-template-columns:1fr}.file-workspace{grid-template-columns:150px 1fr}.template-grid{grid-template-columns:1fr 1fr}}@media(max-width:500px){.file-workspace{grid-template-columns:110px 1fr}.advanced-file-tree{padding:5px}.tree-item{font-size:8px}.hub-actions{margin-top:8px}}

/* PHASE 9 — AI DEVELOPMENT ASSISTANT */
.ai-top-actions{display:flex;gap:8px}.ai-top-actions button{border:1px solid var(--border);background:var(--panel2);padding:9px 11px;border-radius:9px;font-size:10px}
.ai-layout{display:grid;grid-template-columns:185px 1fr 330px;min-height:620px;border:1px solid var(--border);border-radius:20px;overflow:hidden;background:var(--panel)}
.ai-sidebar{padding:14px;border-right:1px solid var(--border)}.ai-sidebar h3{font-size:9px;letter-spacing:1px;color:var(--muted);margin:3px 0 9px}.ai-sidebar>button{width:100%;text-align:left;background:transparent;border:1px solid transparent;color:var(--text);padding:9px;border-radius:8px;font-size:11px}.ai-sidebar>button:hover{background:var(--panel2);border-color:var(--border);color:var(--accent)}
.ai-context-card{background:var(--panel2);padding:10px;border-radius:10px;margin-bottom:18px}.ai-context-card b{display:block;font-size:10px}.ai-context-card small{display:block;color:var(--muted);font-size:8px;margin-top:4px}.quick-prompts{display:grid;gap:5px}.quick-prompts button{font-size:9px;text-align:left;padding:7px;background:#121a2d;border:1px solid var(--border);border-radius:7px;color:#aeb9d0}
.ai-chat-panel{display:flex;flex-direction:column;min-width:0}.ai-chat-header{padding:15px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between}.ai-chat-header b{font-size:13px}.ai-chat-header small{display:block;color:var(--muted);font-size:9px;margin-top:3px}.ai-status{font-size:9px;color:#63d59b}.ai-status i{display:inline-block;width:7px;height:7px;background:#42c98c;border-radius:50%;margin-right:4px}
.ai-messages{flex:1;min-height:370px;max-height:470px;overflow:auto;padding:16px;background:#0a0e18;display:flex;flex-direction:column;gap:11px}.ai-message{max-width:86%;padding:11px 13px;border-radius:12px;font-size:11px;line-height:1.55}.ai-message.user{align-self:flex-end;background:#263b78;color:#eef3ff;border-bottom-right-radius:3px}.ai-message.assistant{align-self:flex-start;background:#141c30;border:1px solid var(--border);border-bottom-left-radius:3px}.ai-message.system{align-self:center;background:#101522;color:var(--muted);font-size:9px}.ai-message pre{white-space:pre-wrap;margin:8px 0 0;background:#080b12;padding:9px;border-radius:7px;color:#a9c4ff;font:9px/1.5 ui-monospace,monospace}
.ai-suggestion-row{padding:8px;border-top:1px solid var(--border);display:flex;gap:5px;overflow:auto}.ai-suggestion-row button{white-space:nowrap;background:var(--panel2);border:1px solid var(--border);color:var(--muted);padding:6px 8px;border-radius:99px;font-size:8px}
.ai-input-wrap{padding:11px;border-top:1px solid var(--border);display:flex;gap:8px;background:var(--panel)}.ai-input-wrap textarea{resize:none;flex:1;background:var(--panel2);border:1px solid var(--border);border-radius:10px;padding:10px;color:var(--text);font:11px sans-serif;outline:0}.ai-input-wrap button{border:0;border-radius:10px;padding:0 14px;font-size:10px}
.ai-workspace{border-left:1px solid var(--border);display:flex;flex-direction:column}.ai-workspace .panel-title{padding:14px;border-bottom:1px solid var(--border)}.ai-workspace .panel-title h3{font-size:10px}.ai-workspace .panel-title button{font-size:9px;padding:6px 8px;background:#1a2442;border:0;border-radius:7px;color:var(--accent)}.ai-tabs{display:flex;border-bottom:1px solid var(--border)}.ai-tabs button{flex:1;border:0;background:transparent;color:var(--muted);padding:9px;font-size:9px}.ai-tabs button.active{color:var(--accent);border-bottom:2px solid var(--accent)}.ai-workspace-content{padding:13px;overflow:auto;flex:1;background:#080c15;font:10px/1.6 ui-monospace,monospace}.ai-code-block{white-space:pre-wrap;color:#b8c8ef}.ai-plan-item,.ai-issue-item{padding:9px;background:#111827;border-radius:8px;margin-bottom:7px;font:10px/1.4 sans-serif}.ai-issue-item.ok{border-left:2px solid #42c98c}.ai-issue-item.warn{border-left:2px solid #f5b942}
.ai-footer-panels{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}.ai-info-panel{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:14px}.ai-info-panel h3{font-size:12px;margin:0 0 12px}.ai-capabilities{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.ai-capabilities div{background:var(--panel2);padding:10px;border-radius:9px}.ai-capabilities span{color:#5bd39a;display:block}.ai-capabilities b{display:block;font-size:9px;margin:4px 0}.ai-capabilities small{color:var(--muted);font-size:8px}.ai-action-history{font-size:10px;color:var(--muted);line-height:1.7}
@media(max-width:1000px){.ai-layout{grid-template-columns:150px 1fr}.ai-workspace{grid-column:1/-1;border-left:0;border-top:1px solid var(--border);min-height:280px}.ai-footer-panels{grid-template-columns:1fr}.ai-capabilities{grid-template-columns:repeat(2,1fr)}}@media(max-width:600px){.ai-layout{grid-template-columns:95px 1fr}.ai-sidebar{padding:8px}.ai-sidebar>button{font-size:8px;padding:7px}.ai-context-card{padding:6px}.ai-context-card b{font-size:8px}.quick-prompts button{font-size:7px}.ai-top-actions{margin-top:8px}.ai-workspace{grid-column:1/-1}.ai-message{font-size:10px;max-width:94%}}

/* PHASE 10 — ADVANCED ANDROID FEATURES */
.android-actions{display:flex;gap:8px}.android-actions button{padding:9px 12px;border:1px solid var(--border);background:var(--panel2);border-radius:9px;font-size:10px}.android-actions .primary{border:0}
.android-feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.native-card,.android-preview-panel,.android-validation-panel{background:var(--panel);border:1px solid var(--border);border-radius:18px;padding:16px}.native-card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.native-card-head>div{display:flex;gap:8px;align-items:center}.native-card-head span{font-size:17px}.native-card-head h3{margin:0;font-size:13px}.native-card-head small{font-size:8px;color:var(--muted);border:1px solid var(--border);padding:4px 7px;border-radius:99px}
.native-card label{display:block;font-size:10px;color:var(--muted);margin:8px 0}.native-card input,.native-card select{margin-top:5px}.native-check{display:flex!important;gap:7px;align-items:center}.native-check input{width:auto;margin:0!important}
.permission-list{display:grid;gap:5px}.permission-row{display:flex;align-items:center;gap:8px;padding:8px;background:var(--panel2);border-radius:8px;font-size:10px}.permission-row input{width:auto;margin:0}.permission-row small{margin-left:auto;color:var(--muted);font-size:8px}
.icon-preview-row{display:flex;gap:10px;align-items:center;background:var(--panel2);padding:11px;border-radius:10px;margin-bottom:10px}.app-icon-preview{width:48px;height:48px;background:linear-gradient(135deg,var(--accent),#a56dff);display:grid;place-items:center;color:white;font-weight:800;font-size:15px;border-radius:14px}.app-icon-preview.circle{border-radius:50%}.app-icon-preview.square{border-radius:4px}.icon-preview-row b{display:block;font-size:11px}.icon-preview-row small{font-size:9px;color:var(--muted)}
.theme-options{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-bottom:8px}.theme-options button{border:1px solid var(--border);background:var(--panel2);padding:8px 4px;border-radius:8px;color:var(--muted);font-size:9px}.theme-options button.active{border-color:var(--accent);color:var(--accent);background:#15203d}
.navigation-routes{display:grid;gap:5px;margin-top:10px}.route-row{display:flex;gap:7px;align-items:center;padding:8px;background:var(--panel2);border-radius:8px;font-size:10px}.route-row span{color:var(--accent)}.native-toggles{display:grid;grid-template-columns:1fr 1fr;gap:5px}.native-toggles label{background:var(--panel2);padding:8px;border-radius:7px;margin:0!important;color:var(--text)!important;font-size:9px!important}.native-toggles input{width:auto;margin-right:5px!important}
.android-preview-panel,.android-validation-panel{margin-top:14px}.android-config-preview{display:grid;grid-template-columns:1.3fr .7fr;gap:12px}.manifest-mini,.resource-mini{background:#080c15;border:1px solid var(--border);border-radius:11px;overflow:hidden}.mini-head{padding:9px 11px;border-bottom:1px solid var(--border);font:10px ui-monospace,monospace;color:#8da1d6}.manifest-mini pre{margin:0;padding:12px;min-height:230px;white-space:pre-wrap;color:#c5d4f5;font:9px/1.6 ui-monospace,monospace}.resource-mini>div:last-child{padding:12px;font-size:10px;color:#b9c4d9}.resource-row{padding:8px;background:#111827;border-radius:7px;margin-bottom:6px}.resource-row small{display:block;color:var(--muted);margin-top:3px}
@media(max-width:950px){.android-feature-grid{grid-template-columns:1fr 1fr}.android-config-preview{grid-template-columns:1fr}}@media(max-width:580px){.android-feature-grid{grid-template-columns:1fr}.android-actions{margin-top:8px}.native-toggles{grid-template-columns:1fr}}

/* PHASE 11 — APP LOGIC & WORKFLOW SYSTEM */
.logic-actions{display:flex;gap:8px}.logic-actions button{padding:9px 11px;border:1px solid var(--border);background:var(--panel2);border-radius:9px;font-size:10px}.logic-actions .primary{border:0}
.logic-grid{display:grid;grid-template-columns:.8fr .8fr 1.4fr;gap:14px}.logic-panel{background:var(--panel);border:1px solid var(--border);border-radius:18px;padding:14px}.logic-panel .panel-title{margin-bottom:10px}.logic-panel .panel-title button{font-size:9px;padding:6px 8px;border:1px solid var(--border);background:var(--panel2);color:var(--text);border-radius:7px}.logic-list{display:grid;gap:7px;min-height:160px}.logic-item{display:flex;align-items:center;gap:7px;background:var(--panel2);padding:9px;border-radius:9px;font-size:10px}.logic-item b{flex:1}.logic-item small{color:var(--muted)}.logic-item button{border:0;background:#202a45;color:#b9c8f2;padding:5px 7px;border-radius:6px;font-size:8px}
.workflow-list{display:grid;gap:7px}.workflow-item{display:flex;align-items:center;gap:8px;padding:10px;background:var(--panel2);border:1px solid transparent;border-radius:9px;font-size:10px;cursor:pointer}.workflow-item.active{border-color:var(--accent);background:#14203a}.workflow-item b{flex:1}.workflow-item small{color:var(--muted)}
.logic-editor-layout{display:grid;grid-template-columns:190px 1fr 270px;gap:14px;margin-top:14px;min-height:430px}.action-library{display:flex;flex-direction:column;gap:6px}.action-library>button{background:var(--panel2);border:1px solid var(--border);color:var(--text);padding:10px;text-align:left;border-radius:8px;font-size:10px}.action-library>button:hover{border-color:var(--accent);color:var(--accent)}
.workflow-canvas{display:flex;flex-direction:column}.workflow-steps{flex:1;display:flex;flex-direction:column;gap:8px;background:#080c15;border:1px dashed var(--border);border-radius:11px;padding:14px;min-height:300px}.workflow-step{display:flex;align-items:center;gap:9px;background:#121b30;border:1px solid var(--border);border-radius:10px;padding:10px;cursor:pointer}.workflow-step.active{border-color:var(--accent);box-shadow:0 0 0 1px #283f83}.step-number{width:22px;height:22px;display:grid;place-items:center;background:#263b78;border-radius:50%;font-size:9px}.workflow-step b{font-size:10px;flex:1}.workflow-step small{font-size:8px;color:var(--muted)}.workflow-step button{font-size:8px;padding:5px 6px;border:0;background:#252d42;color:#e3e9f5;border-radius:5px}
.action-config-body label{display:block;font-size:10px;color:var(--muted);margin-bottom:10px}.action-config-body input,.action-config-body select{margin-top:5px}.action-config-body button{width:100%;padding:9px;border:0;background:#1b2a52;color:var(--accent);border-radius:8px;font-size:10px}
.logic-bottom-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:14px;margin-top:14px}.logic-simulation{display:grid;grid-template-columns:200px 1fr;gap:12px}.sim-phone{min-height:280px;border:6px solid #171d2d;border-radius:22px;background:#0a0e18;overflow:hidden}.sim-status{padding:9px;text-align:center;font-size:8px;color:#8da1d6;border-bottom:1px solid var(--border)}.sim-screen{min-height:185px;display:grid;place-items:center;padding:15px;text-align:center;font-size:11px}.sim-message{margin:8px;padding:8px;background:#17213b;border-radius:8px;font-size:9px;min-height:18px}.logic-console{background:#080c15;border:1px solid var(--border);border-radius:10px;padding:11px;color:#9db3dd;font:9px/1.6 ui-monospace,monospace;white-space:pre-wrap;overflow:auto;max-height:280px}
@media(max-width:1000px){.logic-grid{grid-template-columns:1fr 1fr}.workflow-panel{grid-column:1/-1}.logic-editor-layout{grid-template-columns:150px 1fr}.action-config{grid-column:1/-1}.logic-bottom-grid{grid-template-columns:1fr}}@media(max-width:600px){.logic-grid,.logic-editor-layout{grid-template-columns:1fr}.workflow-panel,.action-config{grid-column:auto}.logic-simulation{grid-template-columns:1fr}.logic-actions{margin-top:8px}}

/* PHASE 12 — ADVANCED COMPONENTS & UI SYSTEM */
.component-actions{display:flex;gap:8px}.component-actions button{padding:9px 11px;border:1px solid var(--border);background:var(--panel2);border-radius:9px;font-size:10px}.component-actions .primary{border:0}
.component-layout{display:grid;grid-template-columns:210px 1fr 280px;gap:14px;min-height:600px}.component-library,.component-workspace,.component-properties,.reusable-section,.component-preview-section{background:var(--panel);border:1px solid var(--border);border-radius:18px;padding:14px}.component-category{margin:10px 0}.component-category>b{display:block;color:var(--muted);font-size:9px;margin-bottom:5px}.component-category button{width:100%;text-align:left;margin:2px 0;padding:8px;border:1px solid transparent;background:var(--panel2);color:var(--text);border-radius:7px;font-size:10px}.component-category button:hover{border-color:var(--accent);color:var(--accent)}
.component-canvas{min-height:530px;background:#080c15;border:1px dashed var(--border);border-radius:13px;padding:14px;display:flex;flex-direction:column;gap:9px}.canvas-component{position:relative;border:1px solid #26324e;background:#101827;border-radius:10px;padding:12px;cursor:pointer;min-height:38px}.canvas-component.active{border-color:var(--accent);box-shadow:0 0 0 1px #29417f}.canvas-component .type-tag{position:absolute;right:7px;top:6px;font-size:7px;color:#7183ad}.canvas-component .component-remove{position:absolute;right:7px;bottom:6px;border:0;background:#29334a;color:#e4e8f1;border-radius:5px;font-size:8px;padding:3px 6px}.component-render{font-size:11px}.render-button{display:inline-block;padding:8px 14px;background:var(--accent);color:white;border-radius:7px}.render-card{padding:13px;background:#17213a;border-radius:10px}.render-input{padding:9px;background:#0b1020;border:1px solid #2b3857;border-radius:7px;color:#657394}.render-list div{padding:7px;border-bottom:1px solid #28334b}.render-tabs{display:flex;gap:6px}.render-tabs span{padding:6px 9px;background:#1b2741;border-radius:6px}.render-dialog{padding:12px;background:#1c2740;border:1px solid #526ba8;border-radius:9px}.render-bottomsheet{margin-top:25px;padding:14px;background:#202a3d;border-radius:12px}.render-loading{font-size:20px;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.component-properties label{display:block;font-size:10px;color:var(--muted);margin:8px 0}.component-properties input,.component-properties select,.component-properties textarea{margin-top:5px;width:100%;background:var(--panel2);border:1px solid var(--border);color:var(--text);border-radius:7px;padding:8px;font-size:10px}.component-properties textarea{height:70px;resize:vertical}.component-properties button{width:100%;margin-top:8px;padding:9px;border:0;background:#1b2a52;color:var(--accent);border-radius:8px;font-size:10px}
.reusable-section,.component-preview-section{margin-top:14px}.reusable-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.reusable-card{background:var(--panel2);border:1px solid var(--border);border-radius:10px;padding:12px}.reusable-card b{font-size:11px;display:block}.reusable-card small{font-size:9px;color:var(--muted);display:block;margin:5px 0}.reusable-card button{font-size:8px;padding:5px 7px;border:0;background:#24304a;color:#d7e0f5;border-radius:5px;margin-right:4px}.advanced-preview{min-height:260px;background:#090d17;border-radius:12px;border:1px solid var(--border);padding:18px;display:flex;flex-direction:column;gap:10px}
@media(max-width:1050px){.component-layout{grid-template-columns:180px 1fr}.component-properties{grid-column:1/-1}.reusable-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:620px){.component-layout{grid-template-columns:1fr}.component-properties{grid-column:auto}.reusable-grid{grid-template-columns:1fr}.component-actions{margin-top:8px}}

/* PHASE 13 — DATA & API CONFIGURATION */
.data-actions{display:flex;gap:8px}.data-actions button,.data-toolbar button,.schema-toolbar button{padding:9px 11px;border:1px solid var(--border);background:var(--panel2);color:var(--text);border-radius:9px;font-size:10px}.data-actions .primary{border:0}
.data-tabs{display:flex;gap:6px;margin:14px 0}.data-tabs button{padding:9px 13px;background:var(--panel2);border:1px solid var(--border);color:var(--muted);border-radius:8px;font-size:10px}.data-tabs button.active{color:var(--accent);border-color:var(--accent);background:#14203a}.data-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.data-toolbar span{font-size:9px;color:var(--muted)}
.data-studio-grid,.collection-layout{display:grid;grid-template-columns:300px 1fr;gap:14px}.data-list-panel,.data-editor-panel,.schema-editor,.binding-layout,.data-panel,.schema-layout{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:14px}.studio-list{display:grid;gap:7px}.studio-item{padding:11px;background:var(--panel2);border:1px solid transparent;border-radius:9px;cursor:pointer}.studio-item.active{border-color:var(--accent);background:#14203a}.studio-item b{font-size:10px;display:block}.studio-item small{font-size:8px;color:var(--muted)}.studio-item .method{float:right;font-size:8px;color:var(--accent)}
.data-editor-panel label,.schema-editor label{display:block;font-size:10px;color:var(--muted);margin:9px 0}.data-editor-panel input,.data-editor-panel select,.data-editor-panel textarea,.schema-editor input,.schema-editor select{width:100%;margin-top:5px;background:var(--panel2);border:1px solid var(--border);color:var(--text);border-radius:7px;padding:8px;font-size:10px}.data-editor-panel textarea{height:80px;resize:vertical}.api-editor-grid{display:grid;grid-template-columns:120px 1fr;gap:8px}.header-row,.field-row,.binding-row{display:grid;grid-template-columns:1fr 1fr 70px;gap:7px;margin:6px 0}.header-row button,.field-row button{border:0;background:#29344d;color:#e3e8f4;border-radius:6px;font-size:8px}.section-label{font-size:9px;color:#8494b8;margin-top:12px}
.collection-layout{min-height:360px}.schema-toolbar{display:flex;gap:8px;margin-bottom:12px}.schema-toolbar select{flex:1}.schema-fields{display:grid;gap:7px}.field-row{grid-template-columns:1fr 120px 80px 45px}.schema-preview{margin-top:14px;background:#080c15;border:1px solid var(--border);border-radius:10px;padding:12px;font:9px/1.6 ui-monospace,monospace;color:#c5d4f5;white-space:pre-wrap}.binding-list{display:grid;gap:8px}.binding-row{grid-template-columns:1fr 1fr 110px;padding:10px;background:var(--panel2);border-radius:9px;align-items:center}.binding-row b{font-size:10px}.binding-row small{font-size:8px;color:var(--muted)}.binding-row select{background:#0d1322;border:1px solid var(--border);color:var(--text);padding:7px;border-radius:6px;font-size:9px}
.data-bottom-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}.json-preview{margin:0;min-height:210px;background:#080c15;border:1px solid var(--border);border-radius:10px;padding:12px;color:#b9cdf5;font:9px/1.6 ui-monospace,monospace;white-space:pre-wrap;overflow:auto}
@media(max-width:800px){.data-studio-grid,.collection-layout,.data-bottom-grid{grid-template-columns:1fr}.field-row{grid-template-columns:1fr 100px 70px 40px}}@media(max-width:520px){.data-tabs{overflow:auto}.data-actions{margin-top:8px}}

/* =========================================================
   PHASE 14 — FINAL FRONTEND POLISH & MOBILE OPTIMIZATION
========================================================= */
:root{--touch:44px}
button,input,select,textarea{touch-action:manipulation}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.page{animation:dfPageIn .22s ease both}
@keyframes dfPageIn{from{opacity:.35;transform:translateY(4px)}to{opacity:1;transform:none}}
.df-toast{position:fixed;left:50%;bottom:20px;transform:translate(-50%,20px);z-index:9999;max-width:min(92vw,480px);padding:11px 15px;border:1px solid var(--border);background:#151d30;color:var(--text);border-radius:11px;font-size:11px;box-shadow:0 14px 40px #0008;opacity:0;pointer-events:none;transition:.22s}.df-toast.show{opacity:1;transform:translate(-50%,0)}
.df-loading{position:fixed;inset:0;z-index:10000;background:#070a12cc;backdrop-filter:blur(5px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;color:var(--text);font-size:11px}.df-loader{width:34px;height:34px;border:3px solid #263450;border-top-color:var(--accent);border-radius:50%;animation:dfSpin .75s linear infinite}@keyframes dfSpin{to{transform:rotate(360deg)}}
.frontend-health-card{margin:16px 0;padding:16px;border:1px solid var(--border);border-radius:16px;background:linear-gradient(135deg,var(--panel),#111a2b);display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center}.frontend-health-card small{font-size:9px;color:var(--accent)}.frontend-health-card h3{margin:5px 0;font-size:15px}.frontend-health-card p{margin:0;color:var(--muted);font-size:10px}.frontend-health-card button{padding:10px 14px}.frontend-health-results{grid-column:1/-1;display:none;gap:7px}.frontend-health-results.show{display:grid}.health-row{display:flex;justify-content:space-between;gap:10px;padding:9px 10px;background:var(--panel2);border-radius:8px;font-size:10px}.health-row small{color:var(--muted)}.health-ok{color:#70d6a4}.health-warn{color:#ffcc72}

/* Better mobile interaction and safe areas */
@media(max-width:760px){
 body{padding-bottom:env(safe-area-inset-bottom)}
 .sidebar{transition:transform .22s ease;will-change:transform}
 .topbar,.header,.builderhead{gap:10px}
 .builderhead{flex-wrap:wrap}
 .builderhead h1{font-size:20px}
 button{min-height:36px}
 .primary{min-height:40px}
 .panel-title{flex-wrap:wrap;gap:7px}
 .logic-actions,.component-actions,.data-actions{width:100%;overflow:auto;padding-bottom:2px}
 .logic-actions button,.component-actions button,.data-actions button{white-space:nowrap;flex:0 0 auto}
 .component-library,.action-library{max-height:340px;overflow:auto}
 .logic-console,.json-preview{font-size:10px}
 .empty{padding:30px 18px}
 .empty h2{font-size:21px}
 .frontend-health-card{grid-template-columns:1fr}
 .frontend-health-card button{width:100%}
}
@media(max-width:420px){
 .data-tabs button{padding:8px 10px;font-size:9px}
 .logic-panel,.component-library,.component-workspace,.component-properties,.data-panel,.schema-layout,.binding-layout{border-radius:13px;padding:11px}
 .sim-phone{max-width:100%}
}

/* Reduced motion accessibility */
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}
}

/* Scrollbars */
*{scrollbar-width:thin;scrollbar-color:#33415f transparent}
::-webkit-scrollbar{width:7px;height:7px}::-webkit-scrollbar-thumb{background:#33415f;border-radius:8px}


/* =========================================================
   PHASE 15 — RESPONSIVE LAYOUT ENGINE
========================================================= */
html,body{width:100%;max-width:100%;overflow-x:hidden}body{padding-bottom:76px}
#dfBottomNav{height:68px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:stretch;padding:4px max(4px,env(safe-area-inset-left)) calc(4px + env(safe-area-inset-bottom)) max(4px,env(safe-area-inset-right));gap:2px;overflow:hidden}
#dfBottomNav button{min-width:0;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:5px 2px;border-radius:10px;font-size:18px;line-height:1}
#dfBottomNav button span{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9px;line-height:1.2}
#dfBottomNav button.active{background:#172344;color:var(--accent)}
.df-more-menu{position:fixed;left:10px;right:10px;bottom:76px;z-index:55;background:var(--panel);border:1px solid var(--border);border-radius:20px;box-shadow:0 18px 50px #0009;padding:12px;max-height:min(72vh,620px);overflow:auto;transform:translateY(12px);opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease}
.df-more-menu.show{transform:translateY(0);opacity:1;pointer-events:auto}
.df-more-head{display:flex;justify-content:space-between;align-items:center;padding:3px 4px 11px}.df-more-head small{display:block;color:var(--accent);font-size:8px;letter-spacing:1px}.df-more-head b{font-size:14px}.df-more-head button{border:0;background:var(--panel2);border-radius:10px;width:36px;height:36px;font-size:22px}
.df-more-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.df-more-grid button{min-width:0;border:1px solid var(--border);background:var(--panel2);border-radius:12px;padding:11px 8px;display:flex;align-items:center;gap:8px;font-size:17px;text-align:left}.df-more-grid button span{font-size:10px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(min-width:900px){body{padding-bottom:78px}.df-more-menu{left:50%;right:auto;width:min(680px,calc(100vw - 32px));transform:translate(-50%,12px)}.df-more-menu.show{transform:translate(-50%,0)}.df-more-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.df-more-grid button{flex-direction:column;text-align:center;gap:5px}}
@media(max-width:760px){.page{padding:16px 12px 86px}.hero{padding:22px 18px;border-radius:22px}.hero h1{font-size:clamp(25px,7vw,34px);line-height:1.18}.hero span{display:block;font-size:14px;line-height:1.45}.stats{gap:8px}.stats div{padding:14px 10px}.stats b{font-size:20px}.builderLayout,.component-layout,.logic-layout,.data-studio-grid,.collection-layout{min-width:0}.palette,.component-library{overscroll-behavior:contain}.component-list button,[data-add-component]{-webkit-tap-highlight-color:transparent;touch-action:manipulation}.canvasWrap{padding:14px 8px;overscroll-behavior:contain}.phone{max-width:100%;transform:none;margin:0}.canvas{min-height:520px}.properties{min-width:0}.df-toast{bottom:82px}}
@media(orientation:landscape) and (max-height:560px){body{padding-bottom:66px}header{height:56px;padding:7px 14px}.brand>b{width:38px;height:38px}.page{padding:12px 16px 74px;max-width:1400px}.hero{padding:18px 24px;border-radius:18px}.hero h1{font-size:clamp(24px,3.5vw,40px);max-width:900px;margin:5px 0}.hero p{margin:0 0 4px}.hero span{font-size:14px}.hero .primary{margin-top:13px}.stats{margin:10px 0}.stats div{padding:11px 14px}.stats b{font-size:19px}#dfBottomNav{height:58px;padding-top:2px;padding-bottom:2px}.df-more-menu{bottom:64px;max-height:calc(100vh - 72px);left:12px;right:12px}.df-more-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.df-more-grid button{padding:8px 6px;font-size:15px}.builderLayout{min-height:calc(100vh - 150px)}.canvasWrap{padding:10px}.phone{transform:scale(.78);margin:-60px 0}.component-layout{min-height:calc(100vh - 170px)}}
@media(max-width:360px){#dfBottomNav button span{font-size:8px}.df-more-grid{grid-template-columns:1fr}.hero h1{font-size:24px}}
@media(prefers-reduced-motion:reduce){.df-more-menu{transition:none!important}}

/* =========================================================
   DROIDFORGE V15.3 — MOBILE BUILDER INTERACTION REDESIGN
   Mobile properties are now a fixed bottom sheet, not a page section.
========================================================= */
.mobile-props-sheet{position:fixed;inset:0;z-index:1000;display:none;pointer-events:none}
.mobile-props-sheet.open{display:block;pointer-events:auto}
.mobile-props-backdrop{position:absolute;inset:0;background:rgba(5,8,16,.52);opacity:0;transition:opacity .2s ease}
.mobile-props-sheet.open .mobile-props-backdrop{opacity:1}
.mobile-props-panel{position:absolute;left:0;right:0;bottom:0;max-height:min(72vh,650px);background:var(--panel);border:1px solid var(--border);border-bottom:0;border-radius:24px 24px 0 0;box-shadow:0 -16px 40px #0006;transform:translateY(105%);transition:transform .24s ease;display:flex;flex-direction:column;padding:8px 16px calc(18px + env(safe-area-inset-bottom))}
.mobile-props-sheet.open .mobile-props-panel{transform:translateY(0)}
.mobile-props-handle{width:42px;height:4px;border-radius:10px;background:var(--border);margin:3px auto 12px}
.mobile-props-header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);padding:0 2px 12px;margin-bottom:12px}.mobile-props-header small{font-size:9px;letter-spacing:1.3px;color:var(--muted)}.mobile-props-header h3{font-size:18px;margin:4px 0 0}.mobile-props-header button{width:38px;height:38px;border:1px solid var(--border);background:var(--panel2);color:var(--text);border-radius:12px;font-size:26px;line-height:1}
.mobile-props-body{overflow:auto;padding:0 2px 6px}.mobile-props-body .prop{max-width:620px;margin:auto}.mobile-props-body label{display:block;font-size:11px;color:var(--muted);margin:14px 0 6px}.mobile-props-body input{width:100%;box-sizing:border-box;font-size:15px;padding:13px;border-radius:12px}.mobile-props-body .hint{font-size:11px;color:var(--muted);line-height:1.5}.prop-actions{display:grid;gap:10px;margin-top:16px}.prop .saveComponent,.mobile-props-body .saveComponent{width:100%;margin-top:0;background:var(--accent);border:0;border-radius:12px;padding:14px;color:#fff;font-size:15px}.prop .deleteUI,.mobile-props-body .deleteUI{width:100%;margin-top:0;background:var(--danger);border:0;border-radius:12px;padding:14px;color:#fff;font-size:15px}
body.df-props-open{overflow:hidden;touch-action:pan-x}
@media(max-width:760px){
  #builder.builder-page,.page#builder{padding-bottom:92px}
  .builderhead{position:sticky;top:0;z-index:20;background:var(--bg);padding:6px 0 10px;margin-bottom:8px}
  .builderhead h1{font-size:24px}.builderhead>div:last-child{display:flex;gap:6px}.builderhead button{padding:9px 10px;margin-left:0;font-size:11px}
  .builderLayout{display:flex;flex-direction:column;min-height:0;border-radius:18px;overflow:visible;background:transparent;border:0;gap:10px}
  .palette{order:1;border:1px solid var(--border);border-radius:16px;padding:10px;background:var(--panel);overflow:visible}
  .palette>h3:first-child{margin:0 0 8px}.palette>h3:nth-of-type(2),#uiTree{display:none}
  .component-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin:0}
  .component-list button{padding:9px 3px;min-height:58px;border-radius:11px;font-size:15px}.component-list span{font-size:8px}
  .canvasArea{order:2;border:1px solid var(--border);border-radius:18px;overflow:hidden;min-height:520px}
  .screen-tabs{height:42px;padding:6px}.canvasWrap{padding:12px 4px;align-items:flex-start;overflow:hidden}
  .phone{width:min(290px,92vw);min-height:520px;border-width:6px;border-radius:28px;transform:none;margin:0 auto}.canvas{min-height:508px;border-radius:22px;padding:30px 12px 16px}
  .properties{display:none!important}
  .mobile-props-sheet{display:none}.mobile-props-sheet.open{display:block}
  .tree-ui-item{font-size:10px}
}
@media(max-width:420px){.component-list{grid-template-columns:repeat(4,minmax(0,1fr))}.component-list button{font-size:14px;min-height:56px}.phone{width:calc(100vw - 56px)}}
@media(orientation:landscape) and (max-height:560px) and (max-width:950px){
  .mobile-props-panel{max-width:520px;left:auto;border-radius:20px 0 0 0}.mobile-props-backdrop{background:rgba(5,8,16,.36)}
}

/* V15.8: HTML hidden attribute must always win for the loading overlay */
.df-loading[hidden]{display:none !important;}