* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; background: #111; font-family: -apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif; color: #fff; }
body { min-height: 100vh; display: flex; justify-content: center; align-items: flex-start; padding: 12px; }
.phone-wrap { width: min(96vw, 430px); }
.phone { position: relative; width: 100%; background: #000; border-radius: 24px; overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,.35); }
#screenImage { display: block; width: 100%; height: auto; background: #222; }
#hotspotLayer { position: absolute; inset: 0; }
.hotspot { position: absolute; background: rgba(255,255,255,0.02); border: 2px dashed rgba(255,255,255,.9); border-radius: 10px; cursor: pointer; }
.hotspot::after { content: attr(data-label); position: absolute; left: 0; top: -24px; background: rgba(0,0,0,.78); color: #fff; font-size: 10px; line-height: 1; padding: 5px 7px; border-radius: 999px; white-space: nowrap; }
.toolbar { display: flex; gap: 8px; justify-content: center; margin-top: 10px; }
.toolbar button { border: 0; border-radius: 999px; padding: 10px 14px; background: #fff; color: #111; font-size: 14px; }
.toolbar button:active, .action-btn:active { transform: scale(.98); }
.actions-panel { margin-top: 12px; background: #1b1b1b; border: 1px solid rgba(255,255,255,.08); border-radius: 16px; padding: 12px; }
.actions-title { font-size: 13px; font-weight: 700; margin-bottom: 10px; color: rgba(255,255,255,.92); }
.action-list { display: flex; flex-wrap: wrap; gap: 8px; }
.action-btn { border: 0; border-radius: 999px; padding: 10px 12px; background: #2c2c2c; color: #fff; font-size: 12px; }
.empty-tip { color: rgba(255,255,255,.68); font-size: 12px; line-height: 1.6; }