* { box-sizing: border-box; }
  body { margin:0; min-height:100vh; background:#f1f6f3; color:#1b1f27; font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
  .card { width:100%; max-width:380px; background:#fff; border:1px solid #e4e7ec; border-radius:16px; padding:26px 24px; box-shadow:0 6px 24px rgba(11,110,79,.08); }
  .brand { display:flex; align-items:center; justify-content:center; gap:10px; font-size:26px; font-weight:700; color:#0b6e4f; margin-bottom:4px; }
  .brand img { border-radius:10px; }
  p.sub { text-align:center; color:#667085; margin:0 0 18px; font-size:14px; }
  label { display:block; font-size:13px; color:#667085; margin-bottom:12px; }
  input { display:block; width:100%; margin-top:4px; padding:11px 12px; font:inherit; color:#1b1f27; border:1px solid #cfd6d2; border-radius:10px; background:#fff; }
  input:focus { outline:2px solid #0b6e4f; outline-offset:1px; }
  button { width:100%; padding:12px; margin-top:6px; font:inherit; font-weight:600; color:#fff; background:#0b6e4f; border:0; border-radius:10px; cursor:pointer; }
  button:disabled { opacity:.6; cursor:wait; }
  .passo2 { margin:0 0 14px; font-size:14px; color:#475467; }
  .chave { display:block; margin:8px 0 14px; padding:10px 12px; font:600 17px/1.3 ui-monospace,Menlo,Consolas,monospace; letter-spacing:.06em; word-break:break-all; background:#f1f6f3; border:1px dashed #b7c9bf; border-radius:10px; user-select:all; }
  .codigos { display:grid; grid-template-columns:1fr 1fr; gap:6px 12px; margin:10px 0 14px; padding:12px; font:600 15px/1.3 ui-monospace,Menlo,Consolas,monospace; background:#fffbeb; border:1px solid #f5d98b; border-radius:10px; user-select:all; }
  .qr { display:flex; justify-content:center; margin:6px 0 12px; }
  .qr svg { width:100%; max-width:240px; height:auto; border:1px solid #e4e7ec; border-radius:10px; }
  details.passo2 summary { cursor:pointer; color:#0b6e4f; }
  button.sec { background:#fff; color:#0b6e4f; border:1px solid #0b6e4f; }
  .err { margin-top:12px; padding:10px 12px; border-radius:10px; background:#fef3f2; color:#b42318; font-size:14px; }

  .lg { min-height:100vh; display:grid; grid-template-columns:minmax(380px,.9fr) 1.2fr; }
  .lg-l { background-image:radial-gradient(rgba(11,110,79,.09) 1.2px,transparent 1.4px); background-size:22px 22px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; padding:24px 16px; background-color:#eef5f1; }
  .brand { justify-content:flex-start; }
  .brand img { max-height:40px; width:auto; object-fit:contain; }
  .hi { margin:14px 0 0; font-size:20px; font-weight:700; }
  p.sub { text-align:left; margin:2px 0 18px; }
  .pw { position:relative; }
  .pw input { padding-right:84px; }
  button.ver { position:absolute; right:6px; top:31px; width:auto; margin:0; padding:6px 10px; font-size:13px; font-weight:600; color:#0b6e4f; background:transparent; border:0; }
  .lg-r { position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; gap:24px; padding:44px; color:#fff; background:linear-gradient(150deg,#0b6e4f,#064733); }
  .lg-map { position:absolute; inset:0; width:100%; height:100%; }
  .lg-map .grelha path { fill:none; stroke:rgba(255,255,255,.12); stroke-width:1.5; }
  .lg-map .rota { fill:none; stroke:rgba(255,255,255,.35); stroke-width:4; stroke-dasharray:2 14; stroke-linecap:round; }
  .lg-map .par circle { fill:#fff; fill-opacity:.3; }
  .lg-map .par circle:first-child { fill-opacity:1; }
  .lg-map .camiao rect { fill:#fff; }
  .lg-map .camiao .cab { fill:#d1fadf; }
  .lg-map .camiao circle { fill:#064733; stroke:#fff; stroke-width:3; }
  .lg-txt, .dica { position:relative; }
  .lg-txt h2 { margin:0 0 6px; font-size:30px; line-height:1.15; text-wrap:balance; }
  .lg-txt p { margin:0; max-width:420px; opacity:.85; }
  .dica { max-width:460px; padding:14px 16px; font-size:14px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); border-radius:14px; transition:opacity .4s; }
  .dica.some { opacity:0; }
  .dica b { display:block; margin-bottom:4px; font-size:12px; letter-spacing:.08em; text-transform:uppercase; opacity:.75; }
  @media (max-width:800px) { .lg { grid-template-columns:1fr; } .lg-r { display:none; } }
  @media (prefers-reduced-motion:reduce) { .dica { transition:none; } }
  .card { margin:0; }
  .powered { display:inline-flex; align-items:center; gap:7px; font-size:13px; color:#667085; text-decoration:none; }
  .powered:hover { color:#0b6e4f; }
  .powered img { border-radius:4px; }
  .lg-l .card { max-width:420px; padding:34px 32px; border-radius:20px; box-shadow:0 18px 50px rgba(11,110,79,.14); }
  .lg-map .grelha .av { stroke:rgba(255,255,255,.07); stroke-width:10; }
  .lg-map .rota { stroke:rgba(255,255,255,.55); stroke-width:5; }
  .lg-map .camiao .sombra { fill:rgba(0,0,0,.25); stroke:none; }
  .lg-map .camiao .esc { transform:scale(1.25); }
  .lg-r { padding:56px; }
  .lg-txt h2 { font-size:34px; }