/* Trevisan Store — visual do protótipo aprovado, convertido para classes. */

@font-face {
  font-family: 'FE-Engschrift';
  font-display: swap;
  src: url('fe-engschrift.woff2') format('woff2');
}

html, body { margin: 0; padding: 0; background: #07090c; -webkit-font-smoothing: antialiased; }
body { font-family: 'Archivo', system-ui, sans-serif; color: #f4f6f8; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
a { color: #7ea0ff; text-decoration: none; }
a:hover { color: #b3c6ff; }
input, textarea, button { font-family: inherit; }
button { cursor: pointer; }
input::placeholder { color: #4d5661; }
input { caret-color: #4a7bff; }
[hidden] { display: none !important; }
::-webkit-scrollbar { width: 0; height: 0; }

@keyframes tvGlow { 0%, 100% { box-shadow: 0 14px 40px rgba(74,123,255,.32); } 50% { box-shadow: 0 20px 60px rgba(74,123,255,.55); } }
@keyframes tvIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes tvSpin { to { transform: rotate(360deg); } }
@keyframes tvBlink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.shell {
  min-height: 100vh; width: 100%; display: flex; justify-content: center;
  background: #07090c;
  background-image: radial-gradient(120% 60% at 50% -8%, rgba(38,70,150,.45) 0%, rgba(11,15,22,0) 60%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.022) 0 1px, transparent 1px 44px);
}
.app { width: 100%; max-width: 1080px; min-height: 100vh; display: flex; flex-direction: column; position: relative; }
.screen { flex: 1; display: flex; flex-direction: column; animation: tvIn .3s ease both; }
.page { flex: 1; padding: clamp(18px,4vw,30px) 16px 40px; animation: tvIn .3s ease both; }
.page--center { display: flex; justify-content: center; padding: clamp(18px,4vw,32px) 16px 44px; }

.display { font-family: 'Archivo Black', sans-serif; }
.h-title { font-family: 'Archivo Black', sans-serif; font-size: clamp(24px,5.2vw,36px); line-height: 1.05; }
.lead { color: #8b949e; font-size: 16px; margin-top: 8px; }
.eyebrow { font-size: 11px; letter-spacing: .16em; color: #7d8894; text-transform: uppercase; }

/* ── Botões base ─────────────────────────────────────────────────────────── */
.btn-primary {
  width: 100%; border: 0; border-radius: 18px; padding: 23px;
  background: linear-gradient(180deg,#4a7bff,#2246c8); color: #fff;
  font-family: 'Archivo Black', sans-serif; font-size: 18px; letter-spacing: .05em; text-transform: uppercase;
}
.btn-primary.is-disabled { background: rgba(255,255,255,.1); }
.btn-success {
  width: 100%; max-width: 480px; border: 0; border-radius: 18px; padding: 22px;
  background: linear-gradient(180deg,#39c07a,#1d8a55); color: #fff;
  font-family: 'Archivo Black', sans-serif; font-size: 17px; letter-spacing: .05em; text-transform: uppercase;
}
.btn-outline {
  display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid rgba(255,255,255,.14);
  background: none; color: #c3cbd4; border-radius: 14px; padding: 13px 16px; font-size: 14px;
}
.btn-danger {
  display: flex; align-items: center; gap: 8px; border: 1px solid rgba(255,90,100,.28);
  background: rgba(255,90,100,.08); color: #ff9aa2; border-radius: 14px; padding: 13px 16px; font-size: 14px;
}
.btn-quiet { background: none; border: 1px solid rgba(255,255,255,.12); color: #8b949e; border-radius: 18px; padding: 18px; font-size: 15px; }

/* ── Home ────────────────────────────────────────────────────────────────── */
.home { flex: 1; display: flex; flex-direction: column; animation: tvIn .4s ease both; }
.home__top { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; }
.home__logo { height: 34px; width: auto; }
.pill-btn {
  background: none; border: 1px solid rgba(255,255,255,.12); color: #8b949e; border-radius: 999px;
  padding: 10px 16px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; min-height: 44px;
}
.home__hero {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(22px,4vw,34px); padding: clamp(18px,4vw,40px) 20px 44px; text-align: center;
}
.live-badge {
  display: inline-flex; align-items: center; gap: 9px; padding: 9px 16px; border-radius: 999px;
  border: 1px solid rgba(126,160,255,.28); background: rgba(59,109,245,.1); color: #9db6ff;
  font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
}
.live-badge__dot { width: 7px; height: 7px; border-radius: 50%; background: #4fd68a; animation: tvBlink 1.8s infinite; }
.home h1, .home p { margin: 0; }
#home-error:empty { display: none; }
h1.live-badge { font-weight: 400; }
.home__title { font-family: 'Archivo Black', sans-serif; font-size: clamp(34px,8vw,68px); line-height: .96; letter-spacing: -.02em; }
.home__title span {
  background: linear-gradient(180deg,#fff 0%,#93aeff 60%,#3b6df5 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.home__sub { color: #9aa3ad; font-size: clamp(15px,2.6vw,19px); max-width: 520px; }
.home__plates { width: 100%; max-width: 620px; display: flex; flex-direction: column; gap: 12px; }
.home__plate1 { transform: rotate(-2deg); }
.home__plate2 { transform: rotate(1.6deg); padding: 0 clamp(0px,6vw,60px); }
.btn-start {
  border: 0; animation: tvGlow 3s ease-in-out infinite; width: 100%; max-width: 480px;
  display: flex; align-items: center; justify-content: center; gap: 12px; padding: clamp(20px,4vw,26px);
  border-radius: 18px; background: linear-gradient(180deg,#4a7bff 0%,#2246c8 100%); color: #fff;
  font-family: 'Archivo Black', sans-serif; font-size: clamp(18px,3.4vw,24px); letter-spacing: .05em; text-transform: uppercase;
}
.home__features { width: 100%; display: grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap: 12px; max-width: 760px; text-align: left; }
.feature { display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: 16px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.025); }
.feature__title { font-size: 15px; }
.feature__sub { color: #8b949e; font-size: 13px; }

/* ── Cabeçalho do fluxo ─────────────────────────────────────────────────── */
.flow-header {
  position: sticky; top: 0; z-index: 8; display: flex; flex-direction: column; gap: 10px;
  padding: 12px clamp(12px,3vw,18px); background: rgba(8,11,16,.94); backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.flow-header__row { display: flex; align-items: center; gap: clamp(10px,2vw,14px); }
.icon-btn {
  flex: none; min-width: 60px; height: 60px; padding: 0 16px; display: flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 16px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); color: #e6eaee; font-size: 15px;
}
.flow-header__info { flex: 1; min-width: 0; }
.flow-header__step { font-size: 11px; letter-spacing: .16em; color: #7d8894; text-transform: uppercase; }
.flow-header__title {
  font-family: 'Archivo Black', sans-serif; font-size: clamp(15px,3.6vw,20px); letter-spacing: .02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.exit-btn {
  flex: none; height: 60px; padding: 0 clamp(16px,3vw,22px); display: flex; align-items: center; gap: 9px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.14); color: #c3cbd4; border-radius: 16px; font-size: 15px;
}
.steps { display: flex; gap: 6px; }
.steps span { flex: 1; height: 6px; border-radius: 999px; background: rgba(255,255,255,.14); }
.steps span.on { background: #4a7bff; }

/* ── Escolha do modelo ──────────────────────────────────────────────────── */
.model-title { font-family: 'Archivo Black', sans-serif; font-size: clamp(24px,5.2vw,38px); line-height: 1.05; }
.model-lead { color: #8b949e; font-size: 16px; margin: 8px 0 22px; max-width: 520px; }
.model-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr)); gap: 16px; align-items: stretch; }
.model-card { display: flex; flex-direction: column; gap: 16px; border: 1px solid rgba(255,255,255,.08); background: #11151b; border-radius: 24px; padding: 18px; }
.model-card--colecao { border-color: rgba(242,184,7,.22); background: linear-gradient(180deg,#14161c,#0e1116); }
.model-card__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.model-card__name { font-family: 'Archivo Black', sans-serif; font-size: 22px; letter-spacing: .04em; text-transform: uppercase; }
.tag { padding: 7px 12px; border-radius: 999px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; background: rgba(126,160,255,.14); color: #7ea0ff; }
.model-card--colecao .tag { background: rgba(242,184,7,.14); color: #f2b807; }
.model-card__features { display: flex; flex-direction: column; gap: 9px; color: #c3cbd4; font-size: 15px; }
.model-card__features div { display: flex; align-items: center; gap: 10px; }
.model-card__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.model-card__size { font-size: 12px; color: #8b949e; letter-spacing: .1em; text-transform: uppercase; }
.model-card__price { font-family: 'Archivo Black', sans-serif; font-size: 30px; letter-spacing: -.01em; }
.btn-personalize {
  border: 0; border-radius: 16px; padding: 17px 22px; background: linear-gradient(180deg,#4a7bff,#2246c8); color: #fff;
  font-family: 'Archivo Black', sans-serif; font-size: 15px; letter-spacing: .06em; text-transform: uppercase;
}

.banner {
  width: 100%; display: flex; align-items: center; gap: 16px; text-align: left; color: #fff;
  border-radius: 22px; padding: clamp(18px,3.4vw,24px);
}
.banner--green {
  margin-top: 22px; border: 2px solid rgba(79,214,138,.5); background: linear-gradient(135deg,rgba(79,214,138,.2),rgba(79,214,138,.06));
  box-shadow: 0 12px 34px rgba(79,214,138,.18);
}
.banner--green:hover { border-color: #4fd68a; }
.banner--blue {
  margin-top: 16px; border: 2px solid rgba(126,160,255,.55); background: linear-gradient(135deg,rgba(59,109,245,.22),rgba(59,109,245,.08));
  box-shadow: 0 12px 34px rgba(59,109,245,.22);
}
.banner--blue:hover { border-color: #7ea0ff; }
.banner__icon { flex: none; width: 54px; height: 54px; border-radius: 16px; display: flex; align-items: center; justify-content: center; }
.banner--green .banner__icon { background: #2fa96a; box-shadow: 0 8px 20px rgba(79,214,138,.35); }
.banner--blue .banner__icon { background: #3b6df5; box-shadow: 0 8px 20px rgba(59,109,245,.45); }
.banner__text { flex: 1; min-width: 0; }
.banner__title { display: block; font-family: 'Archivo Black', sans-serif; font-size: clamp(16px,3.2vw,19px); letter-spacing: .02em; }
.banner--blue .banner__title { font-size: clamp(17px,3.4vw,20px); letter-spacing: .03em; text-transform: uppercase; }
.banner__sub { display: block; font-size: 14px; margin-top: 3px; }
.banner--green .banner__sub { color: #9fe6c1; }
.banner--blue .banner__sub { color: #b9cbff; }

/* ── Editor ─────────────────────────────────────────────────────────────── */
.editor__grid {
  display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,420px),1fr));
  gap: clamp(14px,3vw,26px); padding: clamp(14px,3vw,26px) 16px 30px; align-items: start;
}
.editor__preview { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 112px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.chip { padding: 8px 13px; border-radius: 999px; border: 1px solid rgba(255,255,255,.1); color: #9aa3ad; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.editor__controls { display: flex; flex-direction: column; gap: 20px; }
.field-label { font-size: 11px; letter-spacing: .16em; color: #7d8894; text-transform: uppercase; margin-bottom: 9px; }
.plate-input {
  width: 100%; height: 64px; padding: 0 18px; border-radius: 16px; border: 2px solid rgba(255,255,255,.1);
  background: #11151b; color: #f4f6f8; font-family: 'Archivo Black', sans-serif; font-size: 24px; letter-spacing: .06em;
  text-transform: uppercase; outline: none;
}
.plate-input:focus { border-color: #4a7bff; }
.symbols { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.sym-btn { min-width: 52px; height: 52px; padding: 0 12px; border-radius: 14px; border: 1px solid rgba(255,255,255,.1); background: #181d25; color: #f4f6f8; font-size: 20px; }
.clear-btn { height: 52px; padding: 0 16px; border-radius: 14px; border: 1px solid rgba(255,90,100,.28); background: rgba(255,90,100,.08); color: #ff9aa2; font-size: 14px; letter-spacing: .08em; }
.swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.swatch {
  width: 56px; height: 56px; border-radius: 16px; border: 2px solid rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
  font-size: 20px; color: transparent;
}
.swatch.is-on { border-color: #4a7bff; }
.bottom-bar {
  position: sticky; bottom: 0; z-index: 7; display: flex; gap: 12px; align-items: center; padding: 14px 16px;
  background: rgba(8,11,16,.95); backdrop-filter: blur(12px); border-top: 1px solid rgba(255,255,255,.07);
}
.bottom-bar__info { flex: 1; min-width: 0; }
.bottom-bar__label { font-size: 11px; color: #7d8894; letter-spacing: .14em; text-transform: uppercase; }
.bottom-bar__price { font-family: 'Archivo Black', sans-serif; font-size: 24px; }
.confirm-btn {
  flex: none; border: 0; border-radius: 16px; padding: 19px 26px; background: linear-gradient(180deg,#4a7bff,#2246c8); color: #fff;
  font-family: 'Archivo Black', sans-serif; font-size: 16px; letter-spacing: .06em; text-transform: uppercase;
  display: flex; align-items: center; gap: 10px;
}
.confirm-btn.is-disabled { background: rgba(255,255,255,.1); }

/* ── Carrinho ───────────────────────────────────────────────────────────── */
.cart-lead { color: #8b949e; font-size: 16px; margin: 8px 0 20px; }
.cart-list { display: flex; flex-direction: column; gap: 14px; }
.cart-item {
  border: 1px solid rgba(255,255,255,.08); background: #11151b; border-radius: 22px; padding: 16px;
  display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,260px),1fr)); gap: 16px; align-items: center;
}
.cart-item__info { display: flex; flex-direction: column; gap: 12px; }
.cart-item__model { font-family: 'Archivo Black', sans-serif; font-size: 17px; letter-spacing: .04em; text-transform: uppercase; }
.cart-item__extras { color: #8b949e; font-size: 14px; margin-top: 3px; }
.cart-item__price { font-family: 'Archivo Black', sans-serif; font-size: 22px; margin-top: 8px; }
.cart-item__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.summary { margin-top: 20px; border-radius: 22px; border: 1px solid rgba(255,255,255,.08); background: #0e1217; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.summary__row { display: flex; justify-content: space-between; color: #c3cbd4; font-size: 15px; }
.summary__row .ok { color: #4fd68a; }
.summary__sep { height: 1px; background: rgba(255,255,255,.08); margin: 4px 0; }
.summary__total { display: flex; justify-content: space-between; align-items: baseline; }
.summary__total span:first-child { font-size: 17px; }
.summary__total span:last-child { font-family: 'Archivo Black', sans-serif; font-size: 30px; }
/* Aviso de cupom vindo por link (tela inicial) */
.coupon-banner {
  display: flex; align-items: center; justify-content: center; gap: 10px; text-align: left;
  padding: 14px 18px; border-radius: 18px; border: 1px solid rgba(79,214,138,.4);
  background: linear-gradient(135deg, rgba(79,214,138,.18), rgba(79,214,138,.06));
  color: #9fe6c1; font-size: clamp(14px,2.4vw,16px); box-shadow: 0 10px 28px rgba(79,214,138,.14);
}
.coupon-banner svg { flex: none; }
.coupon-banner b { color: #f4f6f8; }

/* Cupom de desconto */
.coupon { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 8px 10px 8px 14px; border-radius: 16px; border: 1px solid rgba(255,255,255,.1); background: #11151b; }
.coupon__icon { display: flex; color: #7d8894; }
.coupon__input { flex: 1; min-width: 0; height: 46px; background: none; border: 0; color: #f4f6f8; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; outline: none; }
.coupon__apply { flex: none; border: 0; border-radius: 12px; padding: 12px 18px; background: rgba(59,109,245,.18); color: #9db6ff; font-size: 14px; min-height: 44px; }
.coupon__apply[disabled] { opacity: .6; }
.coupon--on { border-color: rgba(79,214,138,.4); background: rgba(79,214,138,.08); color: #9fe6c1; justify-content: space-between; padding: 14px; }
.coupon--on span { display: inline-flex; align-items: center; gap: 8px; }
.coupon--on b { color: #f4f6f8; letter-spacing: .06em; }
.coupon__remove { background: none; border: 0; color: #9fe6c1; text-decoration: underline; font-size: 13px; padding: 4px; }
.coupon__error { color: #ff9aa2; font-size: 13px; margin-top: 8px; }
.coupon__note { color: #9aa3ad; font-size: 13px; margin-top: 8px; }

.mt16 { margin-top: 16px; }
.btn-finish { padding: 23px; font-size: 19px; }

/* ── Formulários (dados do cliente, cartão, login) ─────────────────────── */
.narrow { width: 100%; max-width: 520px; display: flex; flex-direction: column; gap: 22px; }
.form-title { font-family: 'Archivo Black', sans-serif; font-size: clamp(24px,5.2vw,34px); line-height: 1.05; }
.form-title--sm { font-size: clamp(22px,4.8vw,32px); }
.form-card { border: 1px solid rgba(255,255,255,.08); background: #11151b; border-radius: 24px; padding: clamp(18px,3.4vw,24px); display: flex; flex-direction: column; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 9px; }
.field__label { font-size: 11px; letter-spacing: .16em; color: #7d8894; text-transform: uppercase; }
.input-wrap { position: relative; display: block; }
.input-icon { position: absolute; left: 18px; top: 0; bottom: 0; display: flex; align-items: center; pointer-events: none; color: #5d6874; }
.text-input {
  width: 100%; height: 66px; padding: 0 18px 0 56px; border-radius: 16px; border: 2px solid rgba(255,255,255,.1);
  background: #0f1319; color: #f4f6f8; font-size: 19px; letter-spacing: .01em; outline: none;
}
.text-input:focus { border-color: #4a7bff; background: #11161d; }
.text-input.is-invalid { border-color: rgba(255,90,100,.6); }
.field__error { color: #ff9aa2; font-size: 13px; }
.field__hint { color: #7ea0ff; font-size: 12.5px; min-height: 16px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field-row--uf { grid-template-columns: 2fr 1fr; }
@media (max-width: 420px) { .field-row { grid-template-columns: 1fr; } .field-row--uf { grid-template-columns: 2fr 1fr; } }
.info-box {
  display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: 18px;
  border: 1px solid rgba(79,214,138,.22); background: rgba(79,214,138,.06); color: #c3cbd4; font-size: 14px;
}
.info-box svg { flex: none; }
.footnote { text-align: center; color: #5d6874; font-size: 13px; }
.alert {
  display: flex; gap: 10px; align-items: flex-start; padding: 16px; border-radius: 18px; text-align: left;
  border: 1px solid rgba(255,90,100,.32); background: rgba(255,90,100,.08); color: #ffb3b9; font-size: 15px;
}
.alert--info { border-color: rgba(126,160,255,.32); background: rgba(59,109,245,.1); color: #b9cbff; }
.alert--warn { border-color: rgba(242,184,7,.35); background: rgba(242,184,7,.1); color: #f5d98a; font-size: 14px; }
.alert--warn b { color: #f2b807; }

/* ── Pagamento ──────────────────────────────────────────────────────────── */
.pay-wrap { width: 100%; max-width: 760px; display: flex; flex-direction: column; gap: clamp(20px,4vw,30px); }
.pay-head { text-align: center; }
.pay-head strong { color: #f4f6f8; font-weight: 600; }
.pay-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,260px),1fr)); gap: clamp(14px,3vw,20px); }
.pay-option {
  border-radius: 26px; padding: clamp(26px,5vw,38px) 22px; color: #f4f6f8;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px;
}
.pay-option--pix { border: 1px solid rgba(79,214,138,.25); background: linear-gradient(180deg,rgba(79,214,138,.1),rgba(17,21,27,.9)); }
.pay-option--pix:hover { border-color: rgba(79,214,138,.6); }
.pay-grid--3 { grid-template-columns: repeat(auto-fit,minmax(min(100%,230px),1fr)); }
.pay-option--express { border: 1px solid rgba(242,184,7,.28); background: linear-gradient(180deg,rgba(242,184,7,.1),rgba(17,21,27,.9)); }
.pay-option--express:hover { border-color: rgba(242,184,7,.6); }
.pay-option--express .pay-option__icon { background: rgba(242,184,7,.12); box-shadow: 0 14px 34px rgba(242,184,7,.15); }
.pay-option--express .pay-option__tag { background: rgba(242,184,7,.14); color: #f2b807; }
.ship-line {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; border-radius: 16px; border: 1px solid rgba(255,255,255,.1); background: #11151b; color: #c3cbd4; font-size: 14px;
}
.ship-line span { display: inline-flex; align-items: center; gap: 8px; }
.ship-line b { color: #f4f6f8; }
.ship-line__change { background: none; border: 0; color: #7ea0ff; font-size: 14px; text-decoration: underline; padding: 4px; }
.pay-option--card { border: 1px solid rgba(126,160,255,.25); background: linear-gradient(180deg,rgba(59,109,245,.12),rgba(17,21,27,.9)); }
.pay-option--card:hover { border-color: rgba(126,160,255,.6); }
.pay-option__icon { width: clamp(92px,18vw,120px); height: clamp(92px,18vw,120px); border-radius: 30px; display: flex; align-items: center; justify-content: center; }
.pay-option--pix .pay-option__icon { background: rgba(79,214,138,.12); box-shadow: 0 14px 34px rgba(79,214,138,.18); }
.pay-option--card .pay-option__icon { background: rgba(126,160,255,.12); box-shadow: 0 14px 34px rgba(59,109,245,.18); }
.pay-option__name { font-family: 'Archivo Black', sans-serif; font-size: clamp(22px,4.6vw,28px); letter-spacing: .08em; }
.pay-option--card .pay-option__name { font-size: clamp(20px,4.2vw,26px); letter-spacing: .04em; }
.pay-option__desc { color: #9aa3ad; font-size: 15px; }
.pay-option__tag { margin-top: 4px; padding: 9px 18px; border-radius: 999px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
.pay-option--pix .pay-option__tag { background: rgba(79,214,138,.14); color: #4fd68a; }
.pay-option--card .pay-option__tag { background: rgba(126,160,255,.14); color: #7ea0ff; }

/* ── PIX ────────────────────────────────────────────────────────────────── */
.pix { flex: 1; padding: clamp(18px,4vw,30px) 16px 40px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; animation: tvIn .3s ease both; }
.pix__title { font-family: 'Archivo Black', sans-serif; font-size: clamp(22px,4.8vw,32px); }
.pix__lead { color: #8b949e; font-size: 16px; max-width: 420px; }
.qr-box { background: #fff; padding: 14px; border-radius: 22px; box-shadow: 0 20px 50px rgba(0,0,0,.5); }
.qr-box img { display: block; width: min(70vw,250px); aspect-ratio: 1; image-rendering: pixelated; }
.pix__total { font-family: 'Archivo Black', sans-serif; font-size: clamp(26px,6vw,34px); }
.pix-code {
  width: 100%; max-width: 480px; border: 1px solid rgba(255,255,255,.09); background: #11151b; border-radius: 16px; padding: 14px;
  font-size: 12px; color: #8b949e; word-break: break-all; text-align: left; font-family: inherit;
}
.pix-code__hint { display: block; margin-top: 8px; color: #7ea0ff; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.waiting { display: flex; align-items: center; gap: 10px; color: #4fd68a; font-size: 15px; }
.waiting__dot { width: 10px; height: 10px; border-radius: 50%; background: #4fd68a; animation: tvBlink 1.4s infinite; }
.pix .alert, .pix .btn-primary { max-width: 480px; }

/* ── Cartão ─────────────────────────────────────────────────────────────── */
.card-preview {
  position: relative; overflow: hidden; border-radius: 22px; padding: clamp(20px,4vw,26px); min-height: 190px;
  display: flex; flex-direction: column; justify-content: space-between;
  background: linear-gradient(135deg,#243b7a 0%,#152245 55%,#0d1220 100%); box-shadow: 0 18px 44px rgba(0,0,0,.5);
}
.card-preview__glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 80% at 110% -20%, rgba(126,160,255,.35), rgba(0,0,0,0) 60%); }
.card-preview__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.card-chip { width: 46px; height: 34px; border-radius: 7px; background: linear-gradient(135deg,#f3d27a,#c9a227 60%,#8f6f12); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.card-preview__brand { font-family: 'Archivo Black', sans-serif; font-size: 15px; letter-spacing: .14em; color: rgba(255,255,255,.85); }
.card-preview__num { font-family: 'Archivo Black', sans-serif; font-size: clamp(20px,5vw,26px); letter-spacing: .1em; color: #fff; }
.card-preview__bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; }
.card-preview__holder { min-width: 0; }
.card-preview__lbl { font-size: 10px; letter-spacing: .18em; color: rgba(255,255,255,.5); text-transform: uppercase; }
.card-preview__val { font-size: 15px; color: #fff; letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-preview__exp { text-align: right; flex: none; }
.secure-note { display: flex; align-items: center; justify-content: center; gap: 9px; color: #5d6874; font-size: 13px; }
/* Selo de segurança do pagamento (tela do cartão) */
.secure-box { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 16px; border-radius: 18px; border: 1px solid rgba(255,255,255,.08); background: #0e1217; }
.secure-box__logos { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; padding: 10px 16px; border-radius: 12px; background: rgba(255,255,255,.94); }
.secure-box__logos img { display: block; height: 34px; width: auto; }
.secure-box__title { display: flex; align-items: center; gap: 9px; color: #c3cbd4; font-size: 14px; font-weight: 600; text-align: center; }
.secure-box__text { margin: 0; color: #8b949e; font-size: 13px; line-height: 1.45; text-align: center; max-width: 420px; }

/* ── Overlays ───────────────────────────────────────────────────────────── */
.overlay { position: fixed; inset: 0; z-index: 30; background: rgba(7,9,12,.94); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 20px; text-align: center; }
.spinner { width: 62px; height: 62px; border-radius: 50%; border: 5px solid rgba(255,255,255,.12); border-top-color: #4a7bff; animation: tvSpin .9s linear infinite; }
.overlay__title { font-family: 'Archivo Black', sans-serif; font-size: 19px; letter-spacing: .06em; }
.overlay__sub { color: #8b949e; }
.idle-overlay { position: fixed; inset: 0; z-index: 40; background: rgba(7,9,12,.93); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 20px; }
.idle-card {
  width: 100%; max-width: 460px; border: 1px solid rgba(255,255,255,.1); background: #11151b; border-radius: 26px;
  padding: clamp(22px,5vw,32px); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 18px;
}
.idle-ring {
  width: 110px; height: 110px; border-radius: 50%; border: 6px solid rgba(255,255,255,.08); border-top-color: #f2b807;
  display: flex; align-items: center; justify-content: center; font-family: 'Archivo Black', sans-serif; font-size: 40px; color: #f2b807;
}
.idle-card__title { font-family: 'Archivo Black', sans-serif; font-size: clamp(20px,4.4vw,26px); }
.idle-card__text { color: #9aa3ad; font-size: 16px; }
.idle-card__cancel { background: none; border: 1px solid rgba(255,255,255,.14); color: #8b949e; border-radius: 16px; padding: 16px 22px; font-size: 15px; }
.idle-card .btn-primary { padding: 22px; }

/* ── Confirmação ────────────────────────────────────────────────────────── */
.success { flex: 1; padding: clamp(24px,5vw,44px) 16px 44px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; animation: tvIn .35s ease both; }
.success__check { width: 92px; height: 92px; border-radius: 50%; background: rgba(79,214,138,.12); display: flex; align-items: center; justify-content: center; }
.success__title { font-family: 'Archivo Black', sans-serif; font-size: clamp(26px,5.6vw,40px); }
.success__lead { color: #9aa3ad; font-size: 17px; max-width: 460px; }
.success__col { width: 100%; max-width: 500px; }
.order-box { border: 1px solid rgba(255,255,255,.09); background: #11151b; border-radius: 22px; padding: 22px; text-align: left; }
.order-box__code { font-family: 'Archivo Black', sans-serif; font-size: clamp(34px,8vw,46px); letter-spacing: .06em; margin: 6px 0 16px; }
.order-box__row { display: flex; justify-content: space-between; gap: 12px; color: #c3cbd4; font-size: 15px; margin-bottom: 7px; }
.order-box__total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 10px; }
.order-box__total span:first-child { font-size: 17px; }
.order-box__total span:last-child { font-family: 'Archivo Black', sans-serif; font-size: 24px; }
.success__actions { display: flex; flex-direction: column; gap: 12px; }
.success__actions .btn-primary { padding: 22px; }
.countdown { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.countdown__text { display: flex; align-items: center; justify-content: center; gap: 10px; color: #8b949e; font-size: 14px; }
.countdown__text b { font-family: 'Archivo Black', sans-serif; color: #f4f6f8; font-size: 16px; font-weight: 400; }
.progress { height: 6px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.progress__bar { height: 100%; background: linear-gradient(90deg,#4a7bff,#7ea0ff); transition: width 1s linear; }

/* ── Placa Mercosul ─────────────────────────────────────────────────────── */
.plate { width: 100%; container-type: inline-size; user-select: none; }
.plate__frame {
  width: 100%; aspect-ratio: 3.08; padding: 1.3cqw; border-radius: 2.8cqw;
  background: linear-gradient(160deg,#fdfdfd 0%,#cfd4da 38%,#8f959d 62%,#e7eaed 100%);
  box-shadow: 0 1.4cqw 3.2cqw rgba(0,0,0,.5), inset 0 0 0 .25cqw rgba(255,255,255,.55);
}
.plate--colecao .plate__frame { background: linear-gradient(160deg,#6d7681 0%,#20242a 40%,#0d0f12 62%,#4b535c 100%); }
.plate__body {
  position: relative; width: 100%; height: 100%; border-radius: 2cqw; overflow: hidden; display: flex; flex-direction: column;
  background: var(--plate-bg); box-shadow: inset 0 0 0 .3cqw rgba(0,0,0,.4);
}
.plate__band {
  height: 23%; flex: none; display: flex; align-items: center; justify-content: space-between; gap: 1cqw; padding: 0 1.4cqw;
  background: linear-gradient(180deg,#2e51ab 0%,#1a3372 100%); color: #fff;
}
.plate__mercosul { flex: none; width: 12cqw; display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.plate__stars { font-size: 1.7cqw; letter-spacing: .3em; }
.plate__merc { font-size: 1.4cqw; letter-spacing: .08em; opacity: .9; }
.plate__band-text {
  flex: 1; min-width: 0; text-align: center; font-family: 'Archivo Black', sans-serif; font-size: 3.3cqw; letter-spacing: .12em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.plate__flag-wrap { flex: none; width: 12cqw; display: flex; justify-content: flex-end; }
.plate__flag { width: 7.6cqw; height: 5.3cqw; border-radius: .5cqw; background: #009c3b; position: relative; overflow: hidden; box-shadow: inset 0 0 0 .18cqw rgba(0,0,0,.25); }
.plate__diamond { position: absolute; inset: 0; margin: auto; width: 3.8cqw; height: 3.8cqw; background: #ffdf00; transform: rotate(45deg); }
.plate__globe { position: absolute; inset: 0; margin: auto; width: 1.9cqw; height: 1.9cqw; border-radius: 50%; background: #002776; }
.plate__main { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; gap: 1.2cqw; padding: 0 2cqw; }
.plate__br { flex: none; font-family: 'Archivo Black', sans-serif; font-size: 2.3cqw; color: var(--plate-br); writing-mode: vertical-rl; transform: rotate(180deg); letter-spacing: .1em; }
.plate__text {
  flex: 1; min-width: 0; text-align: center; font-family: 'FE-Engschrift', 'Oswald', 'Archivo Black', sans-serif; font-weight: 600;
  font-size: var(--plate-fs); line-height: 1; letter-spacing: .06em; white-space: nowrap; color: var(--plate-fg);
}
.plate__shine {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(112deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 32%, rgba(255,255,255,0) 68%, rgba(255,255,255,.1) 100%);
}

/* ── Painel administrativo ─────────────────────────────────────────────── */
.admin-top {
  position: sticky; top: 0; z-index: 6; display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  background: rgba(8,11,16,.94); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255,255,255,.07);
}
.admin-top__logo { height: 26px; width: auto; }
.admin-top__title { flex: 1; font-size: 12px; letter-spacing: .18em; color: #7d8894; text-transform: uppercase; }
.admin-top__exit {
  display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(255,255,255,.12); background: none;
  color: #8b949e; border-radius: 12px; padding: 11px 14px; font-size: 13px; min-height: 44px;
}
.admin-top__exit:hover { color: #e6eaee; border-color: rgba(255,255,255,.22); }
.admin-body { padding: clamp(16px,3vw,24px) 16px 40px; display: flex; flex-direction: column; gap: 18px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,160px),1fr)); gap: 12px; }
.kpi { border: 1px solid rgba(255,255,255,.08); background: #11151b; border-radius: 20px; padding: 16px; }
.kpi__label { font-size: 11px; letter-spacing: .14em; color: #7d8894; text-transform: uppercase; }
.kpi__value { font-family: 'Archivo Black', sans-serif; font-size: 26px; margin-top: 6px; }
/* Busca e filtro de período */
.admin-search { position: relative; display: flex; align-items: center; }
.admin-search__icon { position: absolute; left: 16px; display: flex; color: #5d6874; pointer-events: none; }
.admin-search__input {
  width: 100%; height: 52px; padding: 0 48px 0 44px; border-radius: 16px; border: 1px solid rgba(255,255,255,.1);
  background: #11151b; color: #f4f6f8; font-size: 15px; outline: none;
}
.admin-search__input:focus { border-color: #4a7bff; }
.admin-search__input::-webkit-search-cancel-button { display: none; }
.admin-search__clear {
  position: absolute; right: 9px; width: 34px; height: 34px; border-radius: 50%; border: 0;
  background: rgba(255,255,255,.06); color: #8b949e; font-size: 14px;
}
.date-range {
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.1); background: #11151b; color-scheme: dark;
}
.date-input { background: none; border: 0; color: #f4f6f8; font-family: inherit; font-size: 13px; padding: 8px 2px; min-height: 36px; }
.date-input:focus { outline: none; color: #7ea0ff; }
.date-range__sep { color: #7d8894; font-size: 12px; }
.range-summary { color: #8b949e; font-size: 13px; }

.filters { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }
.filter-chip {
  display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(255,255,255,.1); background: #11151b;
  color: #f4f6f8; border-radius: 999px; padding: 12px 18px; font-size: 14px;
}
.filter-chip svg { color: #7d8894; }
.filter-chip.is-on svg { color: #7ea0ff; }
.filter-chip.is-on { border-color: #4a7bff; background: rgba(59,109,245,.16); }
.orders { display: flex; flex-direction: column; gap: 12px; }
.orders__empty { color: #8b949e; text-align: center; padding: 40px 16px; border: 1px dashed rgba(255,255,255,.1); border-radius: 20px; }
/* Carregando: cartões "fantasma" no formato dos pedidos */
@keyframes skShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.sk {
  display: block; height: 14px; border-radius: 8px; background-size: 200% 100%;
  background-image: linear-gradient(90deg, rgba(255,255,255,.05) 25%, rgba(255,255,255,.13) 37%, rgba(255,255,255,.05) 63%);
  animation: skShimmer 1.4s ease-in-out infinite;
}
.sk-card { pointer-events: none; }
.sk--code { width: 62px; height: 18px; flex: none; }
.sk--name { width: 55%; height: 15px; }
.sk--meta { width: 72%; height: 12px; margin-top: 8px; }
.sk--pill { width: 88px; height: 27px; border-radius: 999px; flex: none; }
.sk--total { width: 74px; height: 18px; flex: none; }
.orders__loading { color: #7d8894; font-size: 13px; text-align: center; padding: 4px 0 2px; }
@media (prefers-reduced-motion: reduce) { .sk { animation: none; } }
.order-card { border: 1px solid rgba(255,255,255,.08); background: #11151b; border-radius: 20px; overflow: hidden; }
.order-card.is-open { border-color: rgba(126,160,255,.35); }
.order-card__head { width: 100%; text-align: left; border: 0; background: none; color: #f4f6f8; padding: 16px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.order-card__code { font-family: 'Archivo Black', sans-serif; font-size: 17px; letter-spacing: .04em; flex: none; }
.order-card__who { flex: 1; min-width: 150px; }
.order-card__name { font-size: 16px; }
.order-card__meta { color: #8b949e; font-size: 13px; }
.order-card__total { flex: none; font-family: 'Archivo Black', sans-serif; font-size: 17px; }
.status-pill { flex: none; padding: 8px 13px; border-radius: 999px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; background: rgba(255,255,255,.08); color: #9aa3ad; }
.status-pill--pago { background: rgba(79,214,138,.14); color: #4fd68a; }
.status-pill--em_producao { background: rgba(126,160,255,.16); color: #7ea0ff; }
.status-pill--pronto { background: rgba(242,184,7,.16); color: #f2b807; }
.order-card__detail { border-top: 1px solid rgba(255,255,255,.07); padding: 16px; display: flex; flex-direction: column; gap: 14px; background: #0d1117; }
.order-card__info { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,190px),1fr)); gap: 10px; color: #c3cbd4; font-size: 14px; }
.order-card__info span { color: #7d8894; }
.wa-link { display: inline-flex; align-items: center; gap: 6px; color: #4fd68a; text-decoration: none; }
.wa-link:hover { color: #7fe0ad; text-decoration: underline; }
.ship-box { border: 1px solid rgba(126,160,255,.25); background: rgba(59,109,245,.08); border-radius: 16px; padding: 12px 14px; }
.ship-box__head { display: flex; align-items: center; gap: 8px; color: #9db6ff; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 6px; }
.ship-box__addr { color: #e6eaee; font-size: 14px; line-height: 1.5; }
.order-item { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,240px),1fr)); gap: 14px; align-items: center; border: 1px solid rgba(255,255,255,.07); border-radius: 18px; padding: 12px; }
.order-item__info { color: #c3cbd4; font-size: 14px; }
.order-item__model { font-family: 'Archivo Black', sans-serif; font-size: 15px; text-transform: uppercase; color: #f4f6f8; }
/* Linha do tempo do pedido */
.timeline { list-style: none; margin: 0; padding: 0; }
.tl { position: relative; display: flex; gap: 12px; padding-bottom: 14px; }
.tl:last-child { padding-bottom: 0; }
.tl::before { content: ''; position: absolute; left: 15px; top: 34px; bottom: 0; width: 2px; background: rgba(255,255,255,.1); }
.tl:last-child::before { display: none; }
.tl--done::before { background: rgba(79,214,138,.35); }
.tl__icon {
  position: relative; z-index: 1; flex: none; width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.12); background: #11151b; color: #7d8894;
}
.tl--done .tl__icon { border-color: rgba(79,214,138,.45); background: rgba(79,214,138,.14); color: #4fd68a; }
.tl--current .tl__icon { border-color: #4a7bff; background: rgba(59,109,245,.18); color: #7ea0ff; box-shadow: 0 0 0 4px rgba(59,109,245,.12); }
.tl__body { padding-top: 4px; }
.tl__label { font-size: 14px; color: #8b949e; }
.tl--done .tl__label { color: #f4f6f8; }
.tl--current .tl__label { color: #f4f6f8; font-weight: 600; }
.tl__time { color: #7d8894; font-size: 12.5px; margin-top: 2px; }

.order-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.act--danger { border: 1px solid rgba(255,90,100,.32); background: rgba(255,90,100,.08); color: #ff9aa2; }
.act.is-off { opacity: .4; cursor: not-allowed; }
.order-danger { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding-top: 12px; border-top: 1px dashed rgba(255,255,255,.08); }
.danger-note { display: inline-flex; align-items: center; gap: 8px; color: #ff9aa2; font-size: 13px; }
.danger-note--fail { padding: 8px 12px; border-radius: 12px; background: rgba(255,90,100,.08); border: 1px solid rgba(255,90,100,.25); }
.status-pill--cancelado { background: rgba(255,90,100,.14); color: #ff9aa2; }
.status-pill--alerta { background: rgba(242,184,7,.16); color: #f2b807; }
.tl__reason { color: #9aa3ad; font-size: 12.5px; margin-top: 3px; font-style: italic; }
.modal__field { display: flex; flex-direction: column; gap: 7px; }
.modal__field span { font-size: 11px; letter-spacing: .14em; color: #7d8894; text-transform: uppercase; }
.modal__textarea {
  width: 100%; resize: vertical; min-height: 66px; padding: 12px 14px; border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12); background: #0d1117; color: #f4f6f8; font-family: inherit; font-size: 14px; outline: none;
}
.modal__textarea:focus { border-color: #4a7bff; }
.tl--cancel .tl__icon { border-color: rgba(255,90,100,.45); background: rgba(255,90,100,.12); color: #ff9aa2; }
.tl--cancel .tl__label { color: #ff9aa2; }

/* Confirmação de cancelamento / estorno */
.modal { position: fixed; inset: 0; z-index: 50; background: rgba(7,9,12,.82); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal__card {
  width: 100%; max-width: 460px; max-height: 90vh; overflow: auto; display: flex; flex-direction: column; gap: 14px;
  border: 1px solid rgba(255,255,255,.1); background: #11151b; border-radius: 24px; padding: clamp(20px,4vw,26px);
  box-shadow: 0 24px 60px rgba(0,0,0,.6); animation: tvIn .2s ease both;
}
.modal__icon {
  width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(255,90,100,.12); color: #ff9aa2;
}
.modal__icon svg { width: 24px; height: 24px; }
.modal__title { font-family: 'Archivo Black', sans-serif; font-size: 20px; line-height: 1.2; }
.modal__order { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 16px; background: #0d1117; border: 1px solid rgba(255,255,255,.07); }
.modal__order > div { display: flex; justify-content: space-between; gap: 14px; font-size: 14px; }
.modal__order span { color: #7d8894; flex: none; }
.modal__order b { color: #f4f6f8; font-weight: 600; text-align: right; }
.modal__items b { font-family: 'Archivo Black', sans-serif; font-size: 13px; letter-spacing: .04em; line-height: 1.5; }
.modal__total { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.modal__total span { color: #8b949e; font-size: 15px; }
.modal__total strong { font-family: 'Archivo Black', sans-serif; font-size: 28px; font-weight: 400; }
.modal__warn { margin: 0; color: #9aa3ad; font-size: 13.5px; line-height: 1.5; }
.modal__actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.modal__actions .act { justify-content: center; }
.btn-danger-solid {
  border: 0; border-radius: 14px; padding: 14px 20px; background: linear-gradient(180deg,#e2545f,#b3232f); color: #fff;
  font-family: 'Archivo Black', sans-serif; font-size: 14px; letter-spacing: .03em; text-transform: uppercase; min-height: 44px;
}
.btn-danger-solid[disabled] { opacity: .6; }
.act.is-off:hover { filter: none; }
.act { display: flex; align-items: center; gap: 8px; border-radius: 14px; padding: 14px 18px; font-size: 14px; text-decoration: none; min-height: 44px; }
.act--blue { border: 1px solid rgba(126,160,255,.32); background: rgba(59,109,245,.1); color: #7ea0ff; }
.act--yellow { border: 1px solid rgba(242,184,7,.32); background: rgba(242,184,7,.1); color: #f2b807; }
.act--green { border: 1px solid rgba(79,214,138,.32); background: rgba(79,214,138,.08); color: #4fd68a; }
.act--green.is-done { background: rgba(79,214,138,.22); }
.act--neutral { border: 1px solid rgba(255,255,255,.12); background: none; color: #c3cbd4; }
.act:hover { filter: brightness(1.15); }
.act[disabled] { opacity: .5; }

/* Preços e frete */
.settings-card { border: 1px solid rgba(255,255,255,.08); background: #11151b; border-radius: 20px; padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.settings-card__title { font-family: 'Archivo Black', sans-serif; font-size: 17px; letter-spacing: .03em; text-transform: uppercase; }
.settings-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,220px),1fr)); gap: 14px; }
.settings-field { display: flex; flex-direction: column; gap: 7px; }
.settings-field > span { font-size: 11px; letter-spacing: .14em; color: #7d8894; text-transform: uppercase; }
.money-input { display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; border-radius: 14px; border: 1px solid rgba(255,255,255,.12); background: #0d1117; }
.money-input i { color: #7d8894; font-style: normal; font-size: 13px; }
.money-input input { width: 100%; min-width: 70px; height: 46px; background: none; border: 0; color: #f4f6f8; font-size: 15px; font-family: inherit; outline: none; }
.money-input:focus-within { border-color: #4a7bff; }
/* Campo de código com o botão "gerar" dentro */
.code-input { padding-right: 5px; }
.code-input__field { text-transform: uppercase; letter-spacing: .08em; }
.code-gen {
  flex: none; height: 34px; min-height: 0; padding: 0 12px; border: 0; border-radius: 10px;
  background: rgba(59,109,245,.18); color: #9db6ff; font-family: inherit; font-size: 13px; line-height: 1;
}
.code-gen:hover { background: rgba(59,109,245,.28); }

.select-input {
  width: 100%; height: 48px; padding: 0 12px; border-radius: 14px; border: 1px solid rgba(255,255,255,.12);
  background: #0d1117; color: #f4f6f8; font-family: inherit; font-size: 15px; outline: none;
}
.select-input:focus { border-color: #4a7bff; }
.rates__sub { color: #7d8894; font-size: 12px; margin-top: 2px; }
.filter-tag {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 14px; border-radius: 14px;
  border: 1px solid rgba(126,160,255,.3); background: rgba(59,109,245,.1); color: #b9cbff; font-size: 14px;
}
.filter-tag b { color: #f4f6f8; letter-spacing: .06em; }
.filter-tag button { margin-left: auto; background: none; border: 0; color: #7ea0ff; font-size: 13px; text-decoration: underline; padding: 4px; }
.rates__acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.rates__acts .act { padding: 9px 14px; font-size: 13px; min-height: 38px; }
.settings-bulk { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; padding-bottom: 4px; border-bottom: 1px dashed rgba(255,255,255,.08); }
.settings-note { color: #7d8894; font-size: 13px; }
.rates-wrap { overflow-x: auto; }
.rates { width: 100%; border-collapse: collapse; }
.rates th { text-align: left; padding: 6px 10px 10px; font-size: 11px; letter-spacing: .14em; color: #7d8894; text-transform: uppercase; }
.rates td { padding: 5px 10px; border-top: 1px solid rgba(255,255,255,.05); }
.rates__uf { font-family: 'Archivo Black', sans-serif; font-size: 14px; letter-spacing: .06em; }
.settings-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.btn-save {
  border: 0; border-radius: 14px; padding: 14px 22px; background: linear-gradient(180deg,#4a7bff,#2246c8); color: #fff;
  font-family: 'Archivo Black', sans-serif; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; min-height: 44px;
}
.alert--ok { border-color: rgba(79,214,138,.32); background: rgba(79,214,138,.1); color: #9fe6c1; }

.login { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px 16px; animation: tvIn .3s ease both; }
.login__logo { height: 34px; width: auto; align-self: center; }

#print-area { display: none; }

/* Ordem de produção — A4 retrato */
@media print {
  @page { size: A4 portrait; margin: 10mm; }
  html, body { background: #fff !important; color: #111; }
  body > *:not(#print-area) { display: none !important; }
  #print-area {
    display: block; font-family: 'Archivo', Arial, sans-serif; color: #111; font-size: 10pt;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .po-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 6mm; border-bottom: 2px solid #111; padding-bottom: 3mm; }
  .po-brand { font-family: 'Archivo Black', Arial, sans-serif; font-size: 16pt; letter-spacing: .04em; }
  .po-sub { font-size: 8pt; letter-spacing: .14em; text-transform: uppercase; color: #555; margin-top: 1mm; }
  .po-code { font-family: 'Archivo Black', Arial, sans-serif; font-size: 32pt; line-height: 1; }
  .po-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3mm 6mm; margin: 4mm 0; padding: 3mm 4mm; border: 1px solid #bbb; border-radius: 2mm; }
  .po-meta span, .po-label { display: block; font-size: 7pt; letter-spacing: .14em; text-transform: uppercase; color: #666; margin-bottom: .5mm; }
  .po-meta b { font-size: 11pt; font-weight: 700; }
  .po-meta .po-due { font-family: 'Archivo Black', Arial, sans-serif; font-size: 14pt; font-weight: 400; }
  .po-ship { break-inside: avoid; border: 1.5px dashed #111; border-radius: 3mm; padding: 4mm; margin-bottom: 4mm; }
  .po-ship__addr { font-size: 12pt; line-height: 1.55; }
  .po-item { break-inside: avoid; page-break-inside: avoid; border: 1.5px solid #111; border-radius: 3mm; padding: 4mm; margin-bottom: 4mm; }
  .po-item__head { display: flex; justify-content: space-between; font-family: 'Archivo Black', Arial, sans-serif; font-size: 10.5pt; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 3mm; }
  .po-item__body { display: grid; grid-template-columns: 92mm 1fr; gap: 6mm; align-items: center; }
  .po-item .plate { width: 92mm; }
  .po-item .plate__frame { box-shadow: none; }
  .po-spec { width: 100%; border-collapse: collapse; font-size: 10pt; }
  .po-spec th { text-align: left; width: 26mm; padding: 1.4mm 0; font-size: 7pt; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #666; vertical-align: middle; }
  .po-spec td { padding: 1.4mm 0; border-bottom: 1px dotted #bbb; }
  .po-swatch { display: inline-block; width: 5mm; height: 5mm; border: 1px solid #111; border-radius: 1mm; vertical-align: -1.2mm; margin-right: 2mm; }
  .po-text { font-family: 'FE-Engschrift', 'Oswald', 'Archivo Black', sans-serif; font-weight: 600; font-size: 30pt; letter-spacing: .06em; line-height: 1.1; margin-top: 4mm; }
  .po-chars { display: flex; flex-wrap: wrap; gap: 1mm; margin-top: 2mm; }
  .po-chars span { position: relative; width: 9mm; height: 10mm; border: 1px solid #111; border-radius: .8mm; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13pt; }
  .po-chars small { position: absolute; top: .3mm; left: .7mm; font-size: 5pt; font-weight: 400; color: #888; }
  .po-chars .is-space { background: repeating-linear-gradient(45deg, #ddd 0 .8mm, #fff .8mm 1.8mm); }
  .po-checks { display: flex; flex-wrap: wrap; gap: 3mm 7mm; margin-top: 4mm; font-size: 9.5pt; }
  .po-checks span::before { content: ''; display: inline-block; width: 4mm; height: 4mm; border: 1.5px solid #111; border-radius: .6mm; margin-right: 1.8mm; vertical-align: -1mm; }
  .po-foot { break-inside: avoid; page-break-inside: avoid; display: grid; grid-template-columns: 1fr 70mm; gap: 8mm; margin-top: 2mm; }
  .po-lines { border-bottom: 1px solid #999; height: 8mm; }
  .po-printed { margin-top: 4mm; font-size: 7pt; color: #888; text-align: right; }
}