:root { --bg:#0b0b0c; --panel:#121214; --ink:#f5f5f7; --muted:#a1a1aa; --accent:#1a73e8; }
*{box-sizing:border-box}
body{margin:0; font-family:Inter,system-ui,Arial; color:var(--ink); background:var(--bg);}
header{display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid #1f1f22; background:#0e0e10; position:sticky; top:0; z-index:2;}
header .actions button{margin-left:8px;}
main{display:flex; gap:12px; padding:12px; align-items:flex-start;}
#left{flex:0 0 420px; display:flex; justify-content:center;}
#phone{position:relative; width:390px; height:844px; border:1px solid #2a2a2e; border-radius:24px; overflow:hidden; background:#000;}
#screen{width:100%; height:100%; object-fit:contain; display:block;}
#hotspots{position:absolute; inset:0;}
.hotspot{position:absolute; border:2px dashed rgba(26,115,232,0.5); border-radius:12px; cursor:pointer;}
#right{flex:1; background:var(--panel); border:1px solid #1f1f22; border-radius:12px; padding:12px; min-height:860px;}
h1{font-size:16px; margin:0; color:var(--ink);}
button{background:var(--accent); border:none; color:white; padding:8px 12px; border-radius:10px; cursor:pointer; font-weight:600}
button.secondary{background:transparent; color:var(--accent); border:1px solid var(--accent);}
#hotspot-list{list-style:none; padding-left:16px; margin-top:8px}
#hotspot-list li{padding:6px 0; border-bottom:1px dashed #2a2a2e; cursor:pointer; color:#d4d4d8;}
#hotspot-list li:hover{color:white}
.controls{display:flex; gap:8px; margin:8px 0 16px}
.help{font-size:13px; color:var(--muted);}