html, body { margin:0; height:100%; font-family: system-ui, -apple-system, sans-serif; background:#f4f4f4; }
.shell { min-height:100%; display:flex; gap:24px; align-items:flex-start; justify-content:center; padding:24px; box-sizing:border-box; }
.phone-frame { width:390px; height:844px; position:relative; border-radius:28px; overflow:hidden; background:#ddd; box-shadow:0 8px 32px rgba(0,0,0,.18); }
#map { position:absolute; inset:0; }
.panel { width:min(480px, 90vw); background:white; padding:20px; border-radius:16px; box-shadow:0 4px 20px rgba(0,0,0,.08); }
.notice { font-size:13px; background:#fff7d6; padding:10px; border-radius:8px; }
.grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
label { display:flex; flex-direction:column; gap:6px; font-size:13px; }
label:has(input[type=checkbox]) { flex-direction:row; align-items:center; }
.actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
button { padding:8px 12px; }
pre { white-space:pre-wrap; font-size:12px; max-height:360px; overflow:auto; background:#111; color:#eee; padding:12px; border-radius:8px; }
.blocker { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; padding:30px; background:rgba(255,255,255,.94); z-index:10; font-weight:700; }
.hidden { display:none; }
@media (max-width: 960px) { .shell { flex-direction:column; align-items:center; } }