/* Cartiez components v1.0 (2026-10-23). Requer ../tokens/tokens.css antes deste arquivo.
   Extraído de ng-style/base.css + pranchas 01-06. Prefixo .cz-  */
*{box-sizing:border-box}
.cz{background:var(--cz-base-black);color:var(--cz-base-white);font-family:var(--cz-font-display);-webkit-font-smoothing:antialiased}
.cz-light{background:var(--cz-base-white);color:var(--cz-base-black)}
.cz-mono{font-family:var(--cz-font-mono)}
.cz-ui{font-family:var(--cz-font-ui)}
.cz-num{font-family:var(--cz-font-ui);font-style:italic;font-weight:800;letter-spacing:-.02em}
.cz-num .cur{font-size:.36em;color:var(--cz-neutral-300);margin-right:.18em}
.cz-kicker{font-family:var(--cz-font-display);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:400}
.cz-muted{color:var(--cz-neutral-350)}

/* 1. Wordmark (texto vivo; para arte final use assets/logo/svg/*.svg (logo v2.0.0)) */
.cz-wm{font-family:var(--cz-font-display);font-weight:600;letter-spacing:-.055em;line-height:.8;display:inline-block;position:relative}
.cz-wm .i{position:relative;display:inline-block}
.cz-wm .i svg{position:absolute;left:50%;top:-.008em;width:.27em;height:.27em;transform:translateX(-50%)}

/* 2. Pílulas (header / CTA) — cantos 10px, NÃO arredondar total */
.cz-pill{display:inline-flex;align-items:center;justify-content:center;background:#fff;color:#000;border-radius:var(--cz-radius-pill);font-family:var(--cz-font-display);font-weight:400;font-size:15px;padding:0 18px;height:36px;white-space:nowrap}
.cz-pill-lime{display:inline-flex;align-items:center;justify-content:center;background:var(--cz-accent-lime-pill);color:#000;border-radius:var(--cz-radius-pill);font-family:var(--cz-font-display);font-weight:500;font-size:15px;padding:0 20px;height:38px;box-shadow:0 0 0 1px rgba(0,0,0,.4);white-space:nowrap}
.cz-pill-dark{display:inline-flex;align-items:center;justify-content:center;background:var(--cz-neutral-750);color:#fff;border-radius:var(--cz-radius-pill);font-family:var(--cz-font-display);font-size:15px;padding:0 20px;height:44px;box-shadow:inset 0 0 0 1px var(--cz-neutral-650)}

/* 3. Botão de app com sombra deslocada */
.cz-btn{display:inline-flex;align-items:center;justify-content:center;background:#fff;color:#000;border:2px solid #000;border-radius:var(--cz-radius-button);font-family:var(--cz-font-ui);font-weight:700;font-size:15px;height:44px;padding:0 26px;box-shadow:3px 4px 0 0 #fff,3px 4px 0 2px #000;white-space:nowrap}
.cz-light .cz-btn{box-shadow:3px 4px 0 0 #fff,3px 4px 0 2px #000}

/* 4. Card branco de valor (saldo / vendas) */
.cz-value{background:#fff;color:#000;border-radius:var(--cz-radius-card-value);padding:16px 18px;text-align:center;box-shadow:var(--cz-shadow-card-float)}
.cz-value.tilt{transform:rotate(-2deg)}
.cz-value .lbl{font-size:12px;color:var(--cz-neutral-400)}
.cz-value .amt{display:flex;align-items:baseline;justify-content:center;gap:6px}
.cz-value .amt .cur{font-family:var(--cz-font-ui);font-style:italic;font-weight:800;font-size:18px;color:#999}
.cz-value .amt .v{font-family:var(--cz-font-ui);font-style:italic;font-weight:800;font-size:50px;line-height:1;letter-spacing:-.02em}
.cz-linkpill{display:inline-flex;background:var(--cz-accent-violet-tint);color:var(--cz-accent-violet-ui);border-radius:14px;font-size:13px;padding:6px 16px;font-family:var(--cz-font-ui);font-style:italic;font-weight:500;margin-top:10px}

/* 5. Bento escuro */
.cz-bento{background:var(--cz-gradient-bento);border-radius:var(--cz-radius-bento);position:relative;overflow:hidden;padding:22px}
.cz-bento .k{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#fff}
.cz-bento .cap{font-size:19px;font-weight:300;line-height:1.3}

/* 6. Tag contorno caixa alta (mono) */
.cz-tag{display:inline-flex;align-items:center;gap:.4em;font-family:var(--cz-font-mono);font-weight:700;font-size:10px;letter-spacing:.08em;text-transform:uppercase;border:1.5px solid currentColor;border-radius:3px;padding:2px 6px;line-height:1.2;white-space:nowrap}

/* 7. Status pills (só PAGO tem cor) */
.cz-st-paid{background:var(--cz-accent-lime);color:var(--cz-accent-lime-ink);border-color:var(--cz-accent-lime-ink)}
.cz .cz-st-paid{border-color:var(--cz-accent-lime)}
.cz-st-pending{color:#fff}
.cz-light .cz-st-pending{color:#000}
.cz-st-shipped{color:var(--cz-neutral-300);border-color:var(--cz-neutral-550)}
.cz-light .cz-st-shipped{color:#000;background:var(--cz-neutral-100);border-color:#000}
.cz-st-cancelled{color:#5a5a5a;border-color:var(--cz-neutral-650)}

/* nota interna removida no sync */
.cz-rail{position:relative;padding-left:30px}
.cz-rail:before{content:'';position:absolute;left:12px;top:12px;bottom:42px;width:2px;background:#fff}
.cz-rail .st{position:relative;height:54px}
.cz-rail .st:before{content:'';position:absolute;left:-23px;top:6px;width:12px;height:12px;border-radius:50%;background:#000;box-shadow:0 0 0 2px #fff}
.cz-rail .st.done:before{background:#fff}
.cz-rail .st.paid:before{background:var(--cz-accent-lime);box-shadow:var(--cz-shadow-glow-paid)}
.cz-rail .t{font-family:var(--cz-font-ui);font-weight:600;font-size:14px}
.cz-rail .st.paid .t{font-weight:700;color:var(--cz-accent-lime)}
.cz-rail .h{font-family:var(--cz-font-mono);font-size:11px;color:var(--cz-neutral-400)}
/* variante horizontal (checkout: dados · entrega · pagamento) */
.cz-steps{display:flex;justify-content:space-between;position:relative}
.cz-steps:before{content:'';position:absolute;left:8px;right:8px;top:7px;height:2px;background:#000}
.cz-steps .s{display:flex;flex-direction:column;align-items:center;gap:6px;z-index:1;font-family:var(--cz-font-mono);font-size:11px}
.cz-steps .s i{width:16px;height:16px;border-radius:50%;background:#000}
.cz-steps .s.now i{background:#fff;box-shadow:0 0 0 2px #000,inset 0 0 0 4px #fff,inset 0 0 0 8px #000}

/* 9. Marquee vazado */
.cz-marquee{white-space:nowrap;overflow:hidden;font-family:var(--cz-font-display);font-weight:300;font-size:118px;letter-spacing:.01em;text-transform:uppercase;line-height:1;color:transparent;-webkit-text-stroke:1.6px var(--cz-neutral-450)}

/* 10. Brilho-estrela (4 pontas). Use o SVG inline: <svg class="cz-star" viewBox="-1 -1 2 2"><path d="M0,-1C.1,-.1 .1,-.1 1,0C.1,.1 .1,.1 0,1C-.1,.1 -.1,.1 -1,0C-.1,-.1 -.1,-.1 0,-1Z"/></svg> */
.cz-star{display:inline-block;width:32px;height:32px;fill:#fff}
.cz-star.lime{fill:var(--cz-accent-lime)}

/* 11. Skin da loja (card com padrão do lojista + barra) */
.cz-skin{position:relative;width:270px;height:410px;border-radius:20px;background:var(--cz-neutral-925);overflow:hidden;box-shadow:0 0 0 1.5px var(--cz-neutral-650),0 30px 70px rgba(0,0,0,.7)}
.cz-skin .pat{position:absolute;inset:0;background-position:center;background-size:330px auto;opacity:.85}
.cz-skin .badge{position:absolute;left:14px;top:14px;background:#000;border-radius:8px;padding:6px 8px 8px}
.cz-skin .tg{position:absolute;right:16px;top:20px}
.cz-skin .bar{position:absolute;left:0;right:0;bottom:0;padding:16px 18px;background:linear-gradient(0deg,#000 60%,rgba(0,0,0,0))}
.cz-skin .bar .n{font-weight:600;font-size:18px}
.cz-skin .bar .h{font-family:var(--cz-font-mono);font-size:11px;color:var(--cz-accent-lime);margin-top:4px}

/* Fundos */
.cz-dots{background-image:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1.3px);background-size:14px 14px}
.cz-dots-dark{background-image:radial-gradient(rgba(0,0,0,.18) 1px,transparent 1.3px);background-size:14px 14px}
.cz-paid-bg{background:var(--cz-gradient-paid-radial)}
.cz-icon-sq{width:50px;height:50px;border-radius:14px;background:var(--cz-neutral-850);box-shadow:inset 0 0 0 1px var(--cz-neutral-680);display:flex;align-items:center;justify-content:center}
.cz-chip{border-radius:20px;font-size:12px;padding:6px 14px;box-shadow:inset 0 0 0 1px var(--cz-neutral-200)}
.cz-chip.on{background:#000;color:#fff;box-shadow:none}