/* Mel Atalho PWA — guia de instalação */
.mel-pwa-guia,.mel-pwa-hint,.mel-pwa-modal,.mel-pwa-btn,.mel-pwa-dock{
  --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-family:inherit;font-weight:600;font-size:15px;line-height:1.2;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 (fonte do tema) */
.mel-pwa-btn{display:flex;align-items:center;gap:7px;margin:0;padding:9px 14px 9px 11px;border:1px solid var(--mel-line);border-radius:999px;background:#fff;color:var(--mel-ink);font-family:inherit;font-weight:600;font-size:13px;line-height:1;text-transform:none;letter-spacing:normal;min-height:0;cursor:pointer}
.mel-pwa-btn span{color:var(--mel-accent);font-size:19px;line-height:1}
.mel-pwa-btn[hidden]{display:none}
/* Sempre visível */
.mel-pwa-btn.is-fixed{position:fixed;z-index:99998;box-shadow:0 3px 14px rgba(0,0,0,.12)}
.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}

/* Escondido na borda: só a aba com a setinha aparece; o botão desliza para dentro ao tocar */
.mel-pwa-dock{--tab:22px;position:fixed;z-index:99998;top:var(--mel-y,50%);display:flex;align-items:stretch;background:#fff;border:1px solid var(--mel-line);box-shadow:0 3px 14px rgba(0,0,0,.14);transition:transform .28s cubic-bezier(.2,.8,.2,1);touch-action:pan-y}
.mel-pwa-dock[hidden]{display:none}
.mel-pwa-dock.is-right{right:0;border-right:0;border-radius:14px 0 0 14px;transform:translate(calc(100% - var(--tab)),-50%)}
.mel-pwa-dock.is-left{left:0;border-left:0;border-radius:0 14px 14px 0;flex-direction:row-reverse;transform:translate(calc(-100% + var(--tab)),-50%)}
.mel-pwa-dock[data-mel-open="true"]{transform:translate(0,-50%)}
.mel-pwa-tab{flex:none;display:grid;place-items:center;width:var(--tab);min-height:46px;margin:0;padding:0;border:0;border-radius:inherit;background:none;color:var(--mel-accent);cursor:pointer;line-height:1;min-width:0;box-shadow:none}
.mel-pwa-tab svg{width:16px;height:16px;transition:transform .28s}
.mel-pwa-dock.is-left .mel-pwa-tab svg{transform:rotate(180deg)}
.mel-pwa-dock.is-right[data-mel-open="true"] .mel-pwa-tab svg{transform:rotate(180deg)}
.mel-pwa-dock.is-left[data-mel-open="true"] .mel-pwa-tab svg{transform:none}
.mel-pwa-dock .mel-pwa-btn{border:0;border-radius:0;background:none;padding:9px 14px 9px 4px}
.mel-pwa-dock.is-left .mel-pwa-btn{padding:9px 4px 9px 14px}
.mel-pwa-dock.is-peek:not([data-mel-open="true"]){animation:mel-pwa-peek-r 1.6s ease-in-out .8s 2}
.mel-pwa-dock.is-right.is-peek:not([data-mel-open="true"]){animation-name:mel-pwa-peek-r}
.mel-pwa-dock.is-left.is-peek:not([data-mel-open="true"]){animation-name:mel-pwa-peek-l}
@keyframes mel-pwa-peek-r{0%,100%{right:0}50%{right:8px}}
@keyframes mel-pwa-peek-l{0%,100%{left:0}50%{left:8px}}

/* Aberto pelo app instalado: some o botão de atalho e os links "Instalar no celular" */
html.mel-pwa-app .mel-pwa-btn,html.mel-pwa-app .mel-pwa-dock,html.mel-pwa-app .mel-pwa-link{display:none!important}
@media (display-mode:standalone),(display-mode:fullscreen),(display-mode:minimal-ui){.mel-pwa-btn,.mel-pwa-dock,.mel-pwa-link{display:none!important}}

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