/* App do Instagram: peças comuns às telas desta pasta (usa só tokens do ../design.css). */
.ic{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none;display:block}
[data-ic]{display:inline-flex;font-style:normal}

/* status do celular */
.phone-status .st-icons{display:flex;align-items:center;gap:6px}
.phone-status .st-icons svg{height:12px;width:auto;display:block}
.phone-screen.over .phone-status{position:absolute;top:0;left:0;right:0}

/* topo das telas internas */
.app-top{display:flex;align-items:center;gap:12px;padding:6px 20px 14px}
.app-top h2{font-size:17px;font-weight:700;flex:1}
.back{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line-2);background:rgba(255,255,255,.04);flex:none}
.back .ic{width:18px;height:18px}
.sec{padding:0 20px}
.h-sec{font-size:20px;font-weight:700;line-height:1.2;margin:4px 0 6px}
.sub{font-size:13.5px;color:var(--muted);line-height:1.5;margin:0}
.small{font-size:12px;color:var(--muted-2);line-height:1.45}

/* indicador de etapas */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:0 20px 18px}
.steps span{font-size:10.5px;font-weight:600;color:var(--muted-2);letter-spacing:.02em}
.steps span:before{content:"";display:block;height:3px;border-radius:9px;background:rgba(255,255,255,.08);margin-bottom:7px}
.steps span.done{color:var(--muted)}
.steps span.done:before{background:rgba(227,177,95,.45)}
.steps span.on{color:var(--gold-2)}
.steps span.on:before{background:linear-gradient(90deg,var(--gold-deep),var(--gold-2))}

/* rodapé fixo e barra inferior (ficam fora do .phone-body) */
.app-foot{flex:none;padding:14px 20px 26px;border-top:1px solid var(--line-2);background:rgba(8,12,24,.96);display:flex;align-items:center;gap:14px}
.tabbar{flex:none;display:grid;grid-template-columns:repeat(5,1fr);padding:9px 6px 24px;border-top:1px solid var(--line-2);background:rgba(7,11,22,.97)}
.tabbar a{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:10.5px;font-weight:500;color:var(--muted-2)}
.tabbar a .ic{width:22px;height:22px}
.tabbar a.on{color:var(--gold-2)}
.tabbar .lia-orb{--s:22px;box-shadow:0 0 10px rgba(227,177,95,.35)}
.tabbar a.on .lia-orb{box-shadow:0 0 14px rgba(227,177,95,.6),0 0 0 2px rgba(244,213,148,.4)}

/* caixas */
.box{border-radius:16px;border:1px solid var(--line-2);background:linear-gradient(170deg,var(--panel),#0b1121);padding:16px}
.tip{display:flex;gap:12px;align-items:flex-start;padding:13px 14px;border-radius:14px;font-size:13px;line-height:1.45}
.tip .ic{width:18px;height:18px;margin-top:1px}
.tip.gold{background:rgba(227,177,95,.08);border:1px solid rgba(227,177,95,.25);color:var(--gold-2)}
.tip.green{background:rgba(79,209,139,.09);border:1px solid rgba(79,209,139,.28);color:var(--green)}
.tip.amber{background:rgba(245,181,74,.08);border:1px solid rgba(245,181,74,.28);color:var(--amber)}
.tip.blue{background:rgba(106,168,255,.08);border:1px solid rgba(106,168,255,.25);color:#a9cbff}
.tip b{color:var(--text);font-weight:600}
.qr{background:#fff;border-radius:14px;padding:10px}
.qr svg{display:block;width:100%;height:auto}

/* app publicado: tela cheia no celular, coluna central no computador */
.app-solo{min-height:100dvh;display:flex;justify-content:center;background:var(--bg)}
.app-solo .phone-screen{max-width:460px;height:100dvh;border-radius:0}
.app-solo .phone-screen.over .phone-body{padding-top:0}
.app-solo .phone-body{padding-top:env(safe-area-inset-top)}
.qr svg{display:block;width:100%;height:auto}