*{box-sizing:border-box}body{color:#f8fafc;background:#070b14;margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif}.appShell{grid-template-columns:280px 1fr 330px;min-height:100vh;display:grid}.leftPanel,.rightPanel{background:linear-gradient(#0f172a,#090d18);border-right:1px solid #ffffff14;padding:18px;overflow:auto}.rightPanel{border-left:1px solid #ffffff14;border-right:0}.brand{align-items:center;gap:12px;margin-bottom:20px;display:flex}.brand span{color:#94a3b8;font-size:12px;display:block}.logo{color:#101827;background:#ff7a18;border-radius:14px;place-items:center;width:42px;height:42px;display:grid;box-shadow:0 18px 40px #ff7a183d}h3{color:#cbd5e1;align-items:center;gap:8px;margin:22px 0 10px;font-size:14px;display:flex}label{color:#94a3b8;margin:10px 0;font-size:12px;display:block}input,select{color:#f8fafc;background:#0b1220;border:1px solid #263247;border-radius:12px;outline:none;width:100%;margin-top:6px;padding:11px}button{cursor:pointer;color:#e5e7eb;background:#172033;border:0;border-radius:14px;justify-content:center;align-items:center;gap:8px;padding:11px 13px;font-weight:750;transition:transform .16s,background .16s;display:inline-flex}button:hover{background:#21304c;transform:translateY(-1px)}.primary{color:#111827;background:#ff7a18;width:100%;box-shadow:0 18px 40px #ff7a182e}.ghost{color:#cbd5e1;background:0 0;border:1px dashed #334155;width:100%}.danger{color:#fecaca;background:#3a1420;width:100%}.navBtn{justify-content:flex-start;width:100%;margin:5px 0}.navBtn.active{color:#fff;background:#24334f;box-shadow:inset 3px 0 #ff7a18}.check{color:#dbeafe;align-items:center;gap:8px;display:flex}.check input{width:auto;margin:0}.canvasArea{background:radial-gradient(circle at top,#172033 0,#080b12 55%);padding:18px}.topBar{justify-content:space-between;align-items:center;margin-bottom:18px;display:flex}.topBar span{align-items:center;gap:8px;display:flex}.pill{color:#fdba74;background:#ff7a181f;border:1px solid #ff7a1842;border-radius:999px;padding:8px 11px;font-size:12px}.phoneFrame{border:10px solid #111827;border-radius:42px;width:min(420px,95%);min-height:760px;margin:0 auto;padding:24px;overflow:auto;box-shadow:0 30px 90px #00000073}.preview-text,.preview-card,.preview-button,.preview-image,.preview-input,.preview-map{width:100%;margin-bottom:14px}.preview-text{border-radius:12px;padding:8px}.preview-button{padding:15px;font-weight:900}.preview-card{padding:18px;line-height:1.45}.preview-image,.preview-map{color:#cbd5e1;background:#263247;place-items:center;gap:8px;display:grid}.preview-map small{opacity:.75}.preview-input{color:#fff;background:#111827;border:1px solid #334155;padding:14px}.empty{color:#64748b;border:1px dashed #334155;border-radius:24px;place-items:center;height:280px;display:grid}.componentGrid{grid-template-columns:1fr 1fr;gap:8px;display:grid}.componentGrid button{font-size:12px}.muted,.note{color:#94a3b8;font-size:13px;line-height:1.45}.props{background:#ffffff09;border:1px solid #ffffff12;border-radius:18px;padding:12px}.selectedType{color:#fdba74;font-weight:900}.secret{margin-bottom:8px}.note{background:#0b1220;border:1px solid #1f2937;border-radius:14px;gap:8px;margin-top:14px;padding:12px;display:flex}@media (width<=1050px){.appShell{grid-template-columns:1fr}.leftPanel,.rightPanel{border:0}.phoneFrame{min-height:520px}}