:root{--bg:#0f172a;--panel:#fff;--soft:#f8fafc;--border:#e2e8f0;--text:#0f172a;--muted:#64748b;--primary:#2563eb;--danger:#dc2626}
*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#eef2f7;color:var(--text)}
button,input,select{font:inherit}.topbar{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:16px 22px;background:var(--bg);color:#fff;position:sticky;top:0;z-index:20}
.brand h1{margin:0;font-size:22px}.brand h1 span{font-size:12px;background:#1d4ed8;padding:4px 8px;border-radius:999px}.brand p{margin:3px 0 0;color:#cbd5e1;font-size:13px}
.top-actions{display:flex;gap:8px;flex-wrap:wrap}.workspace{min-height:calc(100vh - 86px);display:grid;grid-template-columns:270px minmax(360px,1fr) 300px;gap:14px;padding:14px}
.panel{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:16px;box-shadow:0 3px 12px rgba(15,23,42,.05);align-self:start}
.panel h2{font-size:16px;margin:0 0 10px}.panel label{display:block;margin:12px 0 5px;font-size:12px;font-weight:bold;color:#475569}.panel input,.panel select{width:100%;padding:10px;border:1px solid #cbd5e1;border-radius:8px;background:#fff}
.hint{font-size:12px;color:var(--muted)}.component-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.component-btn{min-height:70px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;border:1px solid #dbeafe;background:#eff6ff;border-radius:10px;cursor:grab}
.component-btn:hover{background:#dbeafe}.component-btn span{font-size:12px;font-weight:bold}.btn{border:none;border-radius:9px;padding:10px 13px;font-weight:bold;cursor:pointer}.primary{background:var(--primary);color:#fff}.secondary{background:#e2e8f0;color:#0f172a}.danger{background:#fee2e2;color:var(--danger)}
.subtle-danger{width:100%;margin-top:10px}.file-btn{display:inline-flex;align-items:center}.row-between{display:flex;justify-content:space-between;gap:8px;align-items:center}.mini-btn{border:0;border-radius:8px;padding:7px 9px;background:#dbeafe;color:#1d4ed8;cursor:pointer;font-weight:bold;font-size:12px}
.screens-list{display:flex;flex-direction:column;gap:7px}.screen-item{display:flex;align-items:center;justify-content:space-between;padding:9px 10px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;cursor:pointer}.screen-item.active{background:#dbeafe;border-color:#93c5fd}.screen-item span{font-size:12px;color:#64748b}
.project-summary{display:grid;grid-template-columns:1fr 1fr;gap:8px}.project-summary div{background:#f8fafc;border-radius:10px;padding:12px;text-align:center}.project-summary strong{display:block;font-size:20px}.project-summary span{display:block;font-size:11px;color:#64748b;margin-top:3px}
.canvas-area{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:12px;min-width:0}.canvas-toolbar{width:min(100%,680px);display:flex;justify-content:space-between;gap:16px;align-items:center;padding:10px 14px;background:#fff;border:1px solid var(--border);border-radius:10px;font-size:12px;color:#64748b}.canvas-toolbar strong{color:#0f172a;font-size:14px}
.phone{width:340px;height:670px;padding:10px;background:#111827;border-radius:38px;box-shadow:0 16px 38px rgba(15,23,42,.22);position:relative}.phone-notch{position:absolute;top:13px;left:50%;transform:translateX(-50%);width:120px;height:25px;background:#111827;border-radius:0 0 16px 16px;z-index:3}
.phone-screen{width:100%;height:100%;border-radius:29px;overflow:hidden;background:#fff}.statusbar{height:42px;padding:13px 16px 0;font-size:11px;background:#f8fafc;display:flex;justify-content:space-between}.app-preview{padding:18px 14px 40px;height:calc(100% - 42px);overflow:auto;min-height:400px}.app-preview.drop-over{outline:3px dashed #60a5fa;outline-offset:-6px}
.preview-item{margin:9px 0;padding:8px;border:2px solid transparent;border-radius:9px;cursor:pointer;position:relative}.preview-item.selected{border-color:#60a5fa;background:#eff6ff}.preview-item.dragging{opacity:.45}.preview-text{word-break:break-word}.preview-button{display:block;padding:12px 16px;border:0;border-radius:9px;background:#2563eb;color:#fff;cursor:pointer}.preview-input{padding:11px;border:1px solid #cbd5e1;border-radius:8px}.preview-image{min-height:130px;display:flex;align-items:center;justify-content:center;border:1px dashed #94a3b8;background:#f8fafc;color:#64748b;border-radius:8px}.preview-card{border:1px solid #e2e8f0;border-radius:12px;padding:16px;background:#fff;box-shadow:0 4px 12px rgba(15,23,42,.06)}.preview-spacer{min-height:35px;border:1px dashed #cbd5e1;color:#94a3b8;display:flex;align-items:center;justify-content:center;font-size:11px}
.preview-actions{display:flex;gap:8px}.empty-state{padding:18px 10px;color:var(--muted);background:var(--soft);border-radius:9px}.hidden{display:none!important}.status{font-size:12px;background:#f8fafc;padding:10px;border-radius:8px;color:#475569}.property-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}.property-actions .danger{grid-column:1/-1}hr{border:0;border-top:1px solid var(--border);margin:18px 0}
.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%) translateY(20px);background:#0f172a;color:#fff;padding:10px 16px;border-radius:999px;opacity:0;pointer-events:none;transition:.2s;z-index:50;font-size:13px}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}.preview-mode .preview-item{border-color:transparent!important;background:transparent!important;cursor:default}
@media(max-width:1050px){.workspace{grid-template-columns:1fr}.panel,.canvas-toolbar{max-width:760px;width:100%;margin:auto}.phone{width:320px;height:640px}}