:root{--ok:#12a150;--ok-dark:#0b7a3b}
body{background:var(--page)}
.mp-header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.mp-header-in{max-width:880px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:12px}
.mp-header img{width:42px;height:42px;border-radius:12px;object-fit:cover}
.mp-header h1{font-size:18px;font-weight:800;flex:1}
.mp-back{display:inline-flex;align-items:center;gap:6px;color:var(--primary-dark);font-weight:700;text-decoration:none;font-size:14px;padding:9px 14px;border-radius:999px;background:var(--primary-soft)}
.mp-wrap{max-width:880px;margin:0 auto;padding:18px 16px 90px}
.mp-sec-title{font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:22px 4px 10px}
.mp-card{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:16px;margin-bottom:12px;border:1px solid var(--line)}
.mp-card.link{cursor:pointer;transition:transform .15s}.mp-card.link:active{transform:scale(.99)}
.mp-row{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.mp-num{font-weight:800;font-size:18px}
.mp-muted{color:var(--muted);font-size:13px}
.mp-total{font-weight:800;font-size:17px}
.badge{display:inline-block;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:800}
.b-wait{background:#fff4dc;color:#8a5a00}.b-ok{background:var(--green-soft);color:var(--ok-dark)}.b-prep{background:var(--primary-soft);color:var(--primary-dark)}
.b-ready{background:#efe7ff;color:#5b34b0}.b-out{background:#ffe9d6;color:#b25400}.b-done{background:#e7ecef;color:#44525d}.b-bad{background:var(--red-soft);color:var(--red)}
.mp-items{margin:10px 0 0;border-top:1px dashed var(--line);padding-top:10px}
.mp-item{display:flex;justify-content:space-between;gap:10px;padding:5px 0;font-size:14px}
.mp-item small{display:block;color:var(--muted);font-size:12px}
.mp-sum div{display:flex;justify-content:space-between;padding:3px 0;font-size:14px}
.mp-sum .tot{font-weight:800;font-size:17px;border-top:1px solid var(--line);margin-top:6px;padding-top:8px}
.mp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:14px;padding:13px 18px;font-weight:800;font-size:15px;cursor:pointer;background:var(--primary);color:#fff;text-decoration:none}
.mp-btn.sec{background:var(--primary-soft);color:var(--primary-dark)}.mp-btn.ghost{background:transparent;border:1.5px solid var(--line);color:var(--text)}
.mp-btn.full{width:100%}.mp-btn:disabled{opacity:.55;cursor:default}
.mp-empty{text-align:center;padding:40px 16px;color:var(--muted)}.mp-empty span{font-size:46px;display:block;margin-bottom:8px}
.mp-alert{border-radius:14px;padding:12px 14px;font-size:14px;margin-bottom:12px}
.mp-alert.err{background:var(--red-soft);color:var(--red)}.mp-alert.info{background:var(--primary-soft);color:var(--primary-dark)}.mp-alert.ok{background:var(--green-soft);color:var(--ok-dark)}

/* Pix */
.pix-box{text-align:center}
.pix-box h3{font-size:18px;margin-bottom:2px}
.pix-amount{font-size:30px;font-weight:800;color:var(--ok-dark);margin:6px 0}
.pix-qr{width:230px;height:230px;margin:10px auto;border:1px solid var(--line);border-radius:16px;padding:10px;background:#fff;display:block;image-rendering:pixelated}
.pix-code{width:100%;font-family:Consolas,monospace;font-size:12px;border:1.5px dashed var(--line);border-radius:12px;padding:10px;resize:none;background:var(--surface-soft);height:84px;word-break:break-all}
.pix-wait{display:flex;align-items:center;justify-content:center;gap:10px;color:#8a5a00;background:#fff4dc;border-radius:12px;padding:10px;margin:12px 0;font-weight:700;font-size:14px}
.spin{width:16px;height:16px;border:3px solid #f0c36a;border-top-color:#b77900;border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Linha do tempo */
.tl{list-style:none;margin:6px 0 0;padding:0}
.tl li{position:relative;display:flex;gap:14px;padding:0 0 18px}
.tl li:last-child{padding-bottom:0}
.tl li:not(:last-child)::before{content:"";position:absolute;left:19px;top:40px;bottom:0;width:3px;background:var(--line);border-radius:2px}
.tl li.done:not(:last-child)::before{background:var(--ok)}
.tl .ico{flex:0 0 40px;height:40px;border-radius:50%;display:grid;place-items:center;font-size:19px;background:var(--surface-soft);border:2px solid var(--line);position:relative;z-index:1}
.tl li.done .ico{background:var(--ok);border-color:var(--ok);color:#fff}
.tl li.current .ico{background:#fff;border-color:var(--primary);animation:pulse 1.8s ease-in-out infinite}
.tl li.current.done .ico{background:var(--ok);border-color:var(--ok)}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(7,136,202,.45)}50%{box-shadow:0 0 0 9px rgba(7,136,202,0)}}
.tl .txt{padding-top:2px}.tl .txt b{display:block;font-size:15px}.tl .txt small{color:var(--muted)}
.tl li.todo .txt b{color:var(--muted);font-weight:600}
.cancelled-box{background:var(--red-soft);color:var(--red);border-radius:16px;padding:16px;text-align:center}
.cancelled-box b{font-size:18px;display:block}

/* Tela verde de pagamento confirmado */
.paid-screen{position:fixed;inset:0;z-index:100;background:linear-gradient(160deg,#0fa958 0%,#0b7a3b 100%);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:28px;animation:fadeIn .45s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.paid-circle{width:128px;height:128px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 0 0 0 rgba(255,255,255,.5);animation:ring 1.8s ease-out .6s 2,pop .6s cubic-bezier(.2,1.4,.4,1)}
@keyframes pop{from{transform:scale(.2);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(255,255,255,.55)}100%{box-shadow:0 0 0 38px rgba(255,255,255,0)}}
.paid-circle svg{width:70px;height:70px;fill:none;stroke:var(--ok);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.paid-circle path{stroke-dasharray:60;stroke-dashoffset:60;animation:draw .6s ease .55s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.paid-screen h2{font-family:"Baloo 2","Segoe UI",sans-serif;font-size:34px;margin:24px 0 6px;animation:up .6s ease .5s both}
.paid-screen p.sub{font-size:17px;opacity:.95;max-width:340px;animation:up .6s ease .65s both}
.paid-info{margin:22px 0;background:rgba(255,255,255,.16);border-radius:18px;padding:14px 22px;min-width:270px;animation:up .6s ease .8s both}
.paid-info div{display:flex;justify-content:space-between;gap:24px;padding:5px 0;font-size:15px}
.paid-info strong{font-size:16px}
.paid-btn{background:#fff;color:var(--ok-dark);border:0;border-radius:16px;padding:15px 30px;font-weight:800;font-size:16px;cursor:pointer;animation:up .6s ease .95s both}
@keyframes up{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}

.recovery{background:var(--surface-soft);border-radius:14px;padding:14px;font-size:14px}
.recovery code{display:inline-block;font-size:20px;font-weight:800;letter-spacing:.12em;background:#fff;border:1px solid var(--line);border-radius:10px;padding:6px 12px;margin:6px 0}
.mp-form label{display:block;font-weight:700;font-size:14px;margin-bottom:12px}
.mp-form input{width:100%;margin-top:6px;padding:13px 14px;border:1.5px solid var(--line);border-radius:12px;font-size:16px}
.mp-stars button{background:none;border:0;font-size:34px;color:#d5dde3;cursor:pointer}.mp-stars button.on{color:var(--yellow)}
.mp-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#14324a;color:#fff;padding:12px 18px;border-radius:14px;z-index:120;font-size:14px;max-width:90%;box-shadow:var(--shadow-lg)}
.notif-banner{position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:110;background:#fff;border-left:5px solid var(--ok);border-radius:14px;padding:12px 16px;box-shadow:var(--shadow-lg);max-width:92%;animation:up .4s ease}
.hidden{display:none!important}