/* Mel Atalho PWA — guia de instalação */
.mel-pwa-guia,.mel-pwa-hint,.mel-pwa-modal,.mel-pwa-btn{
  --mel-ink:#1F1A12;--mel-muted:#6F6250;--mel-line:#ECE3D1;--mel-tint:#FBF6EA;--mel-sys:#F2F2F7;--mel-ios:#007AFF;
}
.mel-pwa-guia{box-sizing:border-box;max-width:460px;margin:24px auto;padding:22px 20px 16px;border:1px solid var(--mel-line);border-radius:20px;background:#fff;color:var(--mel-ink);font:inherit;text-align:left;line-height:1.45}
.mel-pwa-guia *{box-sizing:border-box}
.mel-pwa-guia p{margin:0}
.mel-pwa-guia button{font:inherit}

/* Cabeçalho: o ícone real do app, como vai aparecer na tela inicial */
.mel-pwa-head{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.mel-pwa-tile{flex:none;width:60px;height:60px;border-radius:14px;overflow:hidden;display:grid;place-items:center;background:var(--mel-accent);color:var(--mel-on-accent);font-size:28px;font-weight:700;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.1)}
.mel-pwa-tile img{display:block;width:100%;height:100%;object-fit:cover}
.mel-pwa-title{font-size:1.2rem;font-weight:700;line-height:1.25}
.mel-pwa-sub{margin-top:3px!important;color:var(--mel-muted);font-size:.95rem}

/* Corpo */
.mel-pwa-body{animation:mel-pwa-in .25s ease-out}
@keyframes mel-pwa-in{from{opacity:0}to{opacity:1}}
.mel-pwa-lede{margin-bottom:14px!important}
.mel-pwa-note{margin-top:10px!important;color:var(--mel-muted);font-size:.9rem}

/* Passos */
.mel-pwa-steps{list-style:none;margin:0;padding:0;counter-reset:mel}
.mel-pwa-steps>li{counter-increment:mel;display:grid;grid-template-columns:26px 1fr;gap:12px;align-items:start;margin:0;padding:12px 0;border-top:1px solid var(--mel-line)}
.mel-pwa-steps>li::before{content:counter(mel);display:grid;place-items:center;width:26px;height:26px;margin-top:1px;border-radius:50%;background:var(--mel-accent);color:var(--mel-on-accent);font-size:.85rem;font-weight:700}
.mel-pwa-steps b{font-weight:700}

/* Réplicas da interface do celular (em fonte do sistema, para reconhecer de relance) */
.mel-ui{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif}
.mel-ui-key{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:30px;margin:0 3px;padding:0 6px;border-radius:9px;background:var(--mel-sys);color:#3C3C43;vertical-align:middle}
.mel-ui-key.is-ios{color:var(--mel-ios)}
.mel-ui-key svg{width:20px;height:20px}
.mel-ui-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px;padding:11px 14px;border-radius:11px;background:var(--mel-sys);color:#000;font-size:15px;line-height:1.2}
.mel-ui-row svg{flex:none;width:20px;height:20px;color:#3C3C43}
.mel-ui-alt{display:block;margin-top:6px;color:var(--mel-muted);font-size:.85rem}

/* Botões */
.mel-pwa-cta{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:54px;padding:0 18px;border:0;border-radius:14px;background:var(--mel-accent);color:var(--mel-on-accent)!important;font-weight:700!important;font-size:1.05rem!important;text-decoration:none!important;cursor:pointer;transition:transform .1s}
.mel-pwa-cta:active{transform:scale(.98)}
.mel-pwa-cta svg{width:22px;height:22px}
.mel-pwa-ghost{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;margin-top:10px;padding:0 16px;border:1px solid var(--mel-line);border-radius:14px;background:#fff;color:var(--mel-ink);font-weight:600;cursor:pointer}
.mel-pwa-ghost svg{width:18px;height:18px}
.mel-pwa-ghost.is-done{border-color:#2E7D32;color:#2E7D32}
.mel-pwa-guia :focus-visible,.mel-pwa-modal :focus-visible,.mel-pwa-btn:focus-visible{outline:3px solid var(--mel-accent);outline-offset:2px}

/* Escolha da página que o app abre */
.mel-pwa-pick{display:grid;gap:10px}
.mel-pwa-opt{display:flex;align-items:center;gap:12px;width:100%;min-height:64px;padding:12px 14px 12px 16px;border:1.5px solid var(--mel-line);border-radius:14px;background:#fff;color:var(--mel-ink);text-align:left;cursor:pointer;transition:border-color .15s,background .15s}
.mel-pwa-opt:hover{border-color:var(--mel-accent);background:var(--mel-tint)}
.mel-pwa-opt:active{transform:scale(.99)}
.mel-pwa-opt[aria-pressed="true"]{border-color:var(--mel-accent);background:var(--mel-tint)}
.mel-pwa-opt-tx{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.mel-pwa-opt-tx b{font-size:1.05rem;font-weight:700;line-height:1.25}
.mel-pwa-opt-tx small{color:var(--mel-muted);font-size:.88rem;line-height:1.3}
.mel-pwa-opt svg{flex:none;width:20px;height:20px;color:var(--mel-muted)}
.mel-pwa-start{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;padding:9px 12px;border-radius:12px;background:var(--mel-tint);font-size:.92rem}
.mel-pwa-start button{flex:none;padding:4px 8px;border:0;background:none;color:var(--mel-ink);font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* Troca de aparelho */
.mel-pwa-switch{display:flex;gap:4px;margin-top:16px;padding:4px;border-radius:12px;background:var(--mel-tint)}
.mel-pwa-switch button{flex:1;min-height:36px;padding:6px 4px;border:0;border-radius:9px;background:none;color:var(--mel-muted);font-size:.85rem!important;cursor:pointer}
.mel-pwa-switch button[aria-pressed="true"]{background:#fff;color:var(--mel-ink);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.08)}

/* Computador: QR code */
.mel-pwa-qrwrap{display:flex;align-items:center;gap:16px}
.mel-pwa-qr{flex:none;width:132px;height:132px;padding:8px;border:1px solid var(--mel-line);border-radius:12px;background:#fff}
.mel-pwa-qr svg{display:block;width:100%;height:100%}
.mel-pwa-qr:empty{background:var(--mel-tint)}

/* Sucesso */
.mel-pwa-ok{display:flex;align-items:center;gap:10px;padding:14px;border-radius:12px;background:#EDF7EE;color:#1E5E22;font-weight:600}
.mel-pwa-ok svg{flex:none;width:22px;height:22px}

/* Indicador "toque aqui" apontando para o botão real do navegador */
.mel-pwa-hint{position:fixed;z-index:100000;display:flex;align-items:center;gap:8px;width:max-content;padding:10px 14px;border-radius:14px;background:var(--mel-ink);color:#fff;font:600 15px/1.2 -apple-system,BlinkMacSystemFont,system-ui,sans-serif;box-shadow:0 8px 24px rgba(0,0,0,.25);cursor:pointer;animation:mel-pwa-nudge 1.1s ease-in-out 4}
.mel-pwa-hint[hidden]{display:none}
.mel-pwa-hint svg{width:20px;height:20px}
.mel-pwa-hint::after{content:"";position:absolute;width:14px;height:14px;background:inherit;border-radius:2px;transform:rotate(45deg)}
.mel-pwa-hint.is-bc{left:0;right:0;margin:auto;bottom:calc(12px + env(safe-area-inset-bottom))}
.mel-pwa-hint.is-bc::after{bottom:-6px;left:calc(50% - 7px)}
.mel-pwa-hint.is-br{right:8px;bottom:calc(12px + env(safe-area-inset-bottom))}
.mel-pwa-hint.is-br::after{bottom:-6px;right:18px}
.mel-pwa-hint.is-tr{right:8px;top:10px;--mel-dir:-1}
.mel-pwa-hint.is-tr::after{top:-6px;right:14px}
@keyframes mel-pwa-nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(calc(6px * var(--mel-dir,1)))}}

/* Janela (botão flutuante e links) */
.mel-pwa-modal{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(31,26,18,.5)}
.mel-pwa-modal[hidden]{display:none!important}
.mel-pwa-dialog{position:relative;width:min(440px,100%);max-height:calc(100vh - 32px);overflow:auto;border-radius:22px;background:#fff;box-shadow:0 24px 70px rgba(0,0,0,.3)}
.mel-pwa-dialog .mel-pwa-guia{margin:0;border:0;max-width:none}
.mel-pwa-dialog .mel-pwa-head{padding-right:34px}
.mel-pwa-x{position:absolute;top:12px;right:12px;z-index:1;display:grid;place-items:center;width:34px;height:34px;border:0;border-radius:50%;background:var(--mel-sys);color:#3C3C43;cursor:pointer}
.mel-pwa-x svg{width:16px;height:16px}

/* Botão flutuante */
.mel-pwa-btn{position:fixed;z-index:99998;display:flex;align-items:center;gap:7px;padding:9px 14px 9px 11px;border:1px solid var(--mel-line);border-radius:999px;background:#fff;color:var(--mel-ink);box-shadow:0 3px 14px rgba(0,0,0,.12);font:600 13px/1 -apple-system,BlinkMacSystemFont,system-ui,sans-serif;cursor:pointer}
.mel-pwa-btn span{color:var(--mel-accent);font-size:19px;line-height:1}
.mel-pwa-btn[hidden]{display:none}.mel-pwa-btn.top-right{top:18px;right:18px}.mel-pwa-btn.top-left{top:18px;left:18px}.mel-pwa-btn.bottom-right{bottom:18px;right:18px}.mel-pwa-btn.bottom-left{bottom:18px;left:18px}

@media (prefers-reduced-motion:reduce){.mel-pwa-hint,.mel-pwa-body{animation:none}.mel-pwa-cta{transition:none}}