:root{
  --bg:#0b0b0c; --txt:#e7e7ec; --muted:#a7a7b3; --line:#24242c;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--txt);font-family:system-ui,Segoe UI,Inter,Roboto,Arial}
#app{display:flex;flex-direction:column;min-height:100vh;max-width:460px;margin:0 auto}
#page{flex:1;display:flex;align-items:flex-start;justify-content:center;padding:10px 8px 88px}

#artboard{position:relative;width:100%;max-width:460px;background:#000;border:1px solid #1a1a20;border-radius:14px;overflow:hidden}
#artboard img{display:block;width:100%;height:auto}
#hotspots{position:absolute;left:0;top:0;right:0;bottom:0}
.hotspot{position:absolute;border:none;padding:0;margin:0;background:transparent;cursor:pointer}
.hotspot:focus{outline:2px dashed rgba(255,255,255,.3);outline-offset:2px}

/* debug mode: показываем рамки */
.debug .hotspot{background:rgba(0,255,120,0.12);border:1px dashed rgba(0,255,120,.65)}
.debug #artboard{box-shadow:0 0 0 2px rgba(0,255,120,.25)}

#navbar{position:fixed;left:50%;transform:translateX(-50%);bottom:10px;width:min(460px,94%);display:grid;grid-template-columns:repeat(6,1fr);gap:6px;background:rgba(12,13,18,.92);border:1px solid #242838;border-radius:16px;padding:8px 6px;backdrop-filter:blur(6px);z-index:10}
#navbar button{display:flex;flex-direction:column;gap:4px;align-items:center;justify-content:center;padding:8px 2px;background:transparent;border:0;color:var(--muted);font-size:11px;border-radius:12px}
#navbar button.active{color:#dbdbe8;background:linear-gradient(180deg,#121723,#0e1219);border:1px solid #2d364a;box-shadow:inset 0 0 12px rgba(0,0,0,.3)}
#navbar img{width:18px;height:18px;opacity:.9}