:root{
    --bg:#10141b; --surface:#1a2029; --surface2:#222a35;
    --text:#f2f5f9; --muted:#98a6b6; --line:#2c3541;
    --action:#2563eb; --pin:#ff2d55; --cad:#ffb020; --ok:#22c55e;
    --r:14px;
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
    color:var(--text);overscroll-behavior:none}
  #app{display:flex;flex-direction:column;height:100dvh}

  /* ---------- top bar ---------- */
  header{background:var(--bg);border-bottom:1px solid var(--line);
    padding:calc(env(safe-area-inset-top) + 10px) 12px 10px;z-index:20}
  .brandrow{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
  .brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:19px;letter-spacing:.2px}
  .brandtxt{display:flex;flex-direction:column;line-height:1.05}
  .brandtxt b{font-weight:600;font-size:13px;color:var(--muted);letter-spacing:.3px}
  .brandtxt .l1 em{font-style:normal;font-size:13px;font-weight:600;color:var(--muted)}
  .qrbox{background:#fff;border-radius:16px;padding:16px;max-width:280px;margin:4px auto 14px;display:block}
  .qrbox svg{display:block;width:100%;height:auto}
  .shareurl{word-break:break-all;text-align:center;font-size:13px;color:var(--muted);
    background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px;margin-bottom:12px}
  .sharegrid{display:flex;gap:10px}
  .sharegrid button{flex:1;height:50px;border-radius:12px;border:none;font-weight:800;font-size:14px;
    display:flex;align-items:center;justify-content:center;gap:6px}
  .b-wa{background:#25D366;color:#0a2a17}
  .b-copy{background:var(--surface2);color:var(--text);border:1px solid var(--line)!important}
  .b-share{background:var(--action);color:#fff}
  .sharenote{display:none;font-size:12px;color:#ffdf9e;background:rgba(255,176,32,.14);
    border:1px solid rgba(255,176,32,.4);border-radius:10px;padding:9px 11px;margin-bottom:12px;line-height:1.4}
  #foot{position:fixed;left:0;right:0;bottom:calc(env(safe-area-inset-bottom) + 2px);text-align:center;
    font-size:14px;letter-spacing:.5px;color:rgba(255,255,255,.55);pointer-events:none;z-index:4}
  .dot{width:11px;height:11px;border-radius:50%;background:var(--pin);animation:online 1.8s ease-in-out infinite}
  @keyframes online{0%,100%{box-shadow:0 0 0 0 rgba(255,45,85,.5)}50%{box-shadow:0 0 0 6px rgba(255,45,85,0)}}
  .menubtn{width:42px;height:42px;border:1px solid var(--line);background:var(--surface);
    border-radius:11px;color:var(--text);font-size:20px;display:grid;place-items:center}
  .menubtn:active{background:var(--surface2)}

  .search{display:flex;gap:8px}
  .fld{flex:1;position:relative}
  .fld label{position:absolute;top:4px;left:10px;font-size:12px;letter-spacing:.5px;
    text-transform:uppercase;color:var(--muted);pointer-events:none;font-weight:700}
  .fld input{width:100%;height:52px;padding:19px 10px 4px;background:var(--surface);
    border:1px solid var(--line);border-radius:11px;color:var(--text);
    font-size:20px;font-weight:700;outline:none}
  .fld input::placeholder{font-size:13px;font-weight:600;color:var(--muted)}
  #q.pulse{animation:qpulse 1.1s ease-in-out infinite}
  #q.pulse::placeholder{color:#7fa2ff}
  @keyframes qpulse{0%,100%{border-color:var(--line);box-shadow:0 0 0 0 rgba(47,107,255,0)}
    50%{border-color:var(--action);box-shadow:0 0 0 4px rgba(47,107,255,.28)}}
  .fld input:focus{border-color:var(--action)}
  .go{height:52px;min-width:62px;padding:0 14px;border:none;border-radius:11px;
    background:var(--action);color:#fff;font-size:15px;font-weight:800;letter-spacing:.3px}
  .go:active{filter:brightness(.9)}

  /* ---------- cadastro banner ---------- */
  #cadBar{display:none;align-items:center;gap:8px;margin-top:10px;padding:9px 12px;
    background:rgba(255,176,32,.14);border:1px solid rgba(255,176,32,.5);
    border-radius:11px;font-size:13px;color:#ffdf9e;line-height:1.35}
  body.cad #cadBar{display:flex}
  body.cad header{box-shadow:inset 0 3px 0 var(--cad)}
  #cadBar b{color:#fff}

  /* ---------- map ---------- */
  #viewport{flex:1;position:relative;overflow:hidden;background:#000;touch-action:none}
  #maplogo{position:absolute;top:10px;left:10px;z-index:6;pointer-events:none;
    background:rgba(0,0,0,.72);border:1px solid rgba(255,255,255,.12);border-radius:12px;
    padding:7px 9px;display:flex;align-items:center}
  #maplogo img{width:62px;height:auto;display:block;opacity:.96}
  #portaria{position:absolute;left:931px;top:1188px;z-index:8;pointer-events:none;
    transform-origin:0 0;display:flex;align-items:center;gap:4px;white-space:nowrap}
  #portaria .ppin{height:34px;width:auto;display:block;filter:drop-shadow(0 2px 3px rgba(0,0,0,.55))}
  #salao,#churras{position:absolute;z-index:8;pointer-events:none;transform-origin:0 0;display:flex;align-items:center;gap:3px;white-space:nowrap}
  #salao{left:1575px;top:320px}
  #churras{left:1512px;top:451px}
  #salao.flip,#churras.flip{flex-direction:row-reverse}
  .poi-dot{width:12px;height:12px;border-radius:50%;border:2px solid #fff;box-shadow:0 1px 2px rgba(0,0,0,.5);flex:0 0 auto}
  .poi-red{background:#e5342b}
  .poi-orange{background:#f08a10}
  .poi-lab{font-size:13px;font-weight:800;color:#fff;background:rgba(0,0,0,.78);padding:2px 8px;border-radius:6px;line-height:1.35}
  .poi-btns{display:flex;gap:8px;margin-top:8px}
  .poi-btn{flex:1;height:38px;border:1px solid var(--line);background:var(--surface2);color:var(--text);border-radius:11px;font-size:13px;font-weight:700}
  .poi-btn:active{filter:brightness(1.25)}
  #portaria .plab{font-weight:800;font-size:14px;color:#000;background:rgba(255,255,255,.85);
    padding:2px 7px;border-radius:6px}
  #world{position:absolute;top:0;left:0;transform-origin:0 0;will-change:transform}
  #map{display:block;user-select:none;-webkit-user-drag:none;pointer-events:none}
  /* bolinha azul discreta do lote cadastrado (escala junto com o mapa) */
  .dot-marker{position:absolute;transform:translate(-50%,-50%);pointer-events:none;z-index:3;
    display:grid;place-items:center;width:17px;height:17px;border-radius:50%;
    background:rgba(38,99,235,.9);color:#fff;font-size:8px;font-weight:700;line-height:1;
    border:1px solid rgba(255,255,255,.9);box-shadow:0 1px 3px rgba(0,0,0,.35)}
  /* pino vermelho do lote buscado (tamanho fixo na tela) */
  .rpin{position:absolute;transform-origin:50% 100%;pointer-events:none;z-index:9;transform:translate(-50%,-100%)}
  .rpin svg{display:block;filter:drop-shadow(0 3px 5px rgba(0,0,0,.5))}
  .rpin.drop svg{animation:drop .45s cubic-bezier(.2,1.3,.4,1)}
  @keyframes drop{0%{transform:translateY(-26px);opacity:0}100%{transform:translateY(0);opacity:1}}
  .plabel{position:absolute;left:50%;bottom:calc(100% + 3px);transform:translateX(-50%);
    background:#000c;border:1px solid #ffffff30;padding:3px 8px;border-radius:7px;
    font-size:11px;font-weight:700;white-space:nowrap}

  /* ---------- result chip ---------- */
  #chip{position:absolute;left:12px;right:12px;bottom:calc(env(safe-area-inset-bottom) + 12px);
    display:none;align-items:center;gap:12px;background:var(--surface);
    border:1px solid var(--line);border-radius:14px;padding:12px 14px;
    box-shadow:0 10px 30px #0008;z-index:15}
  #chip.show{display:flex}
  #chip .close{position:absolute;top:-13px;right:-6px;width:34px;height:34px;border-radius:50%;
    border:1px solid var(--line);background:var(--surface2);color:var(--text);font-size:19px;
    line-height:1;display:grid;place-items:center;box-shadow:0 4px 12px #0007}
  #chip .close:active{background:#39424f}
  body.has-chip #zoom{bottom:calc(env(safe-area-inset-bottom) + 200px)}
  #chip .pinico{width:34px;height:34px;border-radius:9px;background:rgba(255,45,85,.15);
    display:grid;place-items:center;flex:0 0 auto}
  #chip .txt{flex:1;min-width:0}
  #chip .txt .big{font-size:17px;font-weight:800}
  #chip .txt .sub{font-size:12px;color:var(--muted);margin-top:1px}
  #chip .re{height:40px;padding:0 14px;border:1px solid var(--line);background:var(--surface2);
    color:var(--text);border-radius:10px;font-weight:700;font-size:13px}
  #chip .del{width:40px;padding:0;font-size:17px}
  #chip .del.armed{width:auto;padding:0 12px;font-size:13px;background:#3a1518;color:#ff7a86;border-color:#ff2d5540}

  /* zoom buttons */
  #zoom{position:absolute;right:12px;bottom:calc(env(safe-area-inset-bottom) + 84px);
    display:flex;flex-direction:column;gap:8px;z-index:14}
  #zoom button{width:46px;height:46px;border:1px solid var(--line);background:var(--surface);
    color:var(--text);border-radius:12px;font-size:24px;font-weight:700;box-shadow:0 4px 12px #0006}
  #zoom button:active{background:var(--surface2)}

  /* ---------- sheet / modal ---------- */
  #scrim{position:fixed;inset:0;background:#000a;display:none;z-index:40}
  #scrim.show{display:block}
  .sheet{position:fixed;left:0;right:0;bottom:0;background:var(--surface);z-index:41;
    border-radius:20px 20px 0 0;border-top:1px solid var(--line);
    padding:8px 16px calc(env(safe-area-inset-bottom) + 18px);transform:translateY(100%);
    transition:transform .25s ease;max-height:88dvh;overflow:auto}
  .sheet.show{transform:translateY(0)}
  .grab{width:40px;height:4px;border-radius:3px;background:#ffffff30;margin:8px auto 14px}
  .sheet h2{margin:0 0 4px;font-size:18px}
  .sheet p.hint{margin:0 0 16px;color:var(--muted);font-size:13px;line-height:1.45}
  .rowbtn{width:100%;display:flex;align-items:center;gap:13px;padding:15px 14px;margin-bottom:10px;
    background:var(--surface2);border:1px solid var(--line);border-radius:13px;color:var(--text);
    font-size:15px;font-weight:600;text-align:left}
  .rowbtn:active{filter:brightness(1.15)}
  .rowbtn .ic{width:26px;text-align:center;font-size:19px}
  .rowbtn .d{font-size:12px;color:var(--muted);font-weight:400;margin-top:2px}
  .rowbtn.on{border-color:var(--cad);background:rgba(255,176,32,.13)}
  .rowbtn.on .ic{color:var(--cad)}
  .switch{margin-left:auto;width:46px;height:28px;border-radius:20px;background:#3a4553;position:relative;flex:0 0 auto}
  .switch::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:.2s}
  .rowbtn.on .switch{background:var(--cad)}
  .rowbtn.on .switch::after{left:21px}
  textarea{width:100%;height:150px;background:var(--bg);border:1px solid var(--line);
    border-radius:12px;color:var(--text);font-family:ui-monospace,Menlo,monospace;font-size:16px;padding:11px;resize:none}
  .sheet .act{display:flex;gap:10px;margin-top:12px}
  .sheet .act button{flex:1;height:50px;border-radius:12px;border:none;font-weight:800;font-size:15px}
  .btn-primary{background:var(--action);color:#fff}
  .btn-ghost{background:var(--surface2);color:var(--text);border:1px solid var(--line)!important}
  .btn-danger{background:#3a1518;color:#ff7a86;border:1px solid #ff2d5540!important}
  .backlink{background:none;border:none;color:var(--muted);font-size:14px;padding:6px 0;margin-bottom:6px}
  .pinfield{width:100%;height:56px;background:var(--bg);border:1px solid var(--line);border-radius:12px;
    color:var(--text);font-size:24px;font-weight:800;text-align:center;letter-spacing:6px;outline:none;margin-bottom:12px}
  .pinfield:focus{border-color:var(--action)}

  .count{font-size:13px;color:var(--muted);text-align:center;margin-top:2px}
  .count b{color:var(--ok)}

  /* toast */
  #toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 90px);transform:transl-x(-50%) translateY(20px);
    transform:translate(-50%,20px);background:#000d;border:1px solid #ffffff25;color:#fff;
    padding:11px 16px;border-radius:12px;font-size:14px;font-weight:600;opacity:0;
    transition:.25s;z-index:60;pointer-events:none;max-width:82vw;text-align:center}
  #toast.show{opacity:1;transform:translate(-50%,0)}