:root { --bg:#101113; --surface:#1b1d21; --surface-soft:#25282e; --line:#393d45; --text:#f6f7f8; --muted:#aeb3bd; --accent:#d6ff00; --danger:#ff7e75; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; background:radial-gradient(circle at 80% 0,#2a3040 0,transparent 35%),var(--bg); color:var(--text); font-family:Arial,sans-serif; }
.page-shell { width:min(1080px,calc(100% - 32px)); margin:0 auto; padding:64px 0 40px; }
.hero { margin-bottom:34px; }
.eyebrow,.step { color:var(--accent); font-weight:800; letter-spacing:.13em; font-size:.72rem; }
h1,h2 { margin:0; font-family:Impact,"Arial Narrow",sans-serif; text-transform:uppercase; }
h1 { font-size:clamp(2.9rem,8vw,5.7rem); line-height:.87; letter-spacing:-.035em; }
h1 span { color:var(--accent); }
.subtitle { margin:17px 0 0; color:var(--muted); font-size:1rem; }
.app-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.card { padding:28px; border:1px solid var(--line); border-radius:16px; background:linear-gradient(145deg,rgba(37,40,46,.96),rgba(24,26,30,.96)); box-shadow:0 16px 40px rgba(0,0,0,.2); }
.section-heading { display:flex; gap:13px; align-items:flex-start; margin-bottom:24px; }
.section-heading h2 { font-size:1.8rem; line-height:1; }
.section-heading p { margin:5px 0 0; color:var(--muted); font-size:.77rem; line-height:1.4; }
label { display:block; margin:16px 0 7px; font-size:.76rem; font-weight:700; color:#e8eaed; }
label span,.helper { color:var(--muted); font-weight:400; }
input,select { width:100%; min-height:45px; padding:11px 12px; color:var(--text); background:#121417; border:1px solid #464b55; border-radius:8px; font:inherit; font-size:.88rem; outline:none; }
select { cursor:pointer; }
input:focus,select:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(214,255,0,.1); }
.field-row { display:grid; grid-template-columns:minmax(0,1fr) 130px; gap:13px; }
.field-row.prices { grid-template-columns:1fr 1fr; }
.helper { margin:7px 0 0; font-size:.72rem; line-height:1.4; }
.manual-final-price.hidden,.coupon-calculation.hidden { display:none; }
.coupon-final-price { margin:13px 0 0; padding:10px 12px; border:1px solid rgba(214,255,0,.32); border-radius:8px; color:var(--accent); font-size:.82rem; font-weight:700; }
.primary-button,.secondary-button { width:100%; min-height:47px; border:0; border-radius:8px; cursor:pointer; font-family:Impact,"Arial Narrow",sans-serif; font-size:1.1rem; font-weight:800; letter-spacing:.04em; transition:transform .15s,background .15s; }
.primary-button { margin-top:24px; background:var(--accent); color:#101113; }
.primary-button:hover { transform:translateY(-1px); background:#e2ff48; }
.primary-button span { margin-left:8px; }
.offer-output { min-height:304px; padding:22px; white-space:pre-wrap; border:1px solid var(--line); border-radius:10px; background:#101215; color:#f8f8f8; font-size:.92rem; line-height:1.7; }
.offer-output.empty { display:grid; place-items:center; color:var(--muted); text-align:center; white-space:normal; }
.secondary-button { margin-top:15px; background:transparent; border:1px solid var(--accent); color:var(--accent); }
.secondary-button:hover:not(:disabled) { background:rgba(214,255,0,.1); }
.secondary-button:disabled { opacity:.4; cursor:not-allowed; }
.feedback,.copy-feedback { min-height:18px; margin:9px 0 0; font-size:.75rem; }
.feedback { color:var(--danger); }.copy-feedback { color:var(--accent); text-align:center; }
.notice { margin-top:20px; padding:14px 17px; border-left:3px solid var(--accent); color:var(--muted); background:rgba(255,255,255,.03); font-size:.78rem; line-height:1.5; }.notice strong { color:var(--text); }
.product-data { margin-bottom:14px; padding:14px; border:1px solid rgba(214,255,0,.32); border-radius:10px; background:rgba(214,255,0,.05); }.product-data.hidden { display:none; }.data-label { margin:0 0 6px; color:var(--accent); font-size:.67rem; font-weight:800; letter-spacing:.09em; }.data-title { margin:0; font-weight:700; font-size:.86rem; line-height:1.4; }.product-data dl { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:13px 0 0; }.product-data dl div { padding-top:8px; border-top:1px solid rgba(255,255,255,.1); }.product-data dt { color:var(--muted); font-size:.68rem; }.product-data dd { margin:3px 0 0; font-size:.78rem; font-weight:700; }
@media (max-width:760px) { .page-shell { padding-top:42px; }.app-grid { grid-template-columns:1fr; }.offer-output { min-height:260px; } }
@media (max-width:430px) { .card { padding:21px; }.field-row,.field-row.prices { grid-template-columns:1fr; gap:0; } }

/* Amazon offer pages (2026-09-02) */
.offer-card { max-width:480px; margin:0 auto; text-align:center; }
.offer-image { width:100%; max-height:340px; object-fit:contain; border-radius:10px; background:#fff; display:block; }
.offer-image-wrap { position:relative; margin-bottom:18px; }
.offer-image-whatsapp { position:absolute; right:10px; bottom:10px; width:36px; height:36px; border-radius:50%; background:#25D366; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 10px rgba(0,0,0,.35); }
.offer-original-price { margin:0; color:var(--muted); font-size:.95rem; }
.offer-original-price s { color:var(--danger); }
.offer-price { margin:2px 0 18px; font-family:Impact,"Arial Narrow",sans-serif; font-size:2.2rem; color:var(--accent); }
.offer-cta { display:block; text-decoration:none; text-align:center; }
.offer-coupon { margin:0 0 16px; font-size:.9rem; }
.offer-coupon strong { color:var(--accent); }
.offer-coupon-box { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 8px; padding:14px 16px; border:1.5px dashed var(--accent); border-radius:10px; background:rgba(214,255,0,.06); }
.offer-coupon-box span { font-weight:800; letter-spacing:.03em; color:var(--text); }
.offer-coupon-copy { border:0; background:none; color:var(--accent); font-weight:800; font-size:.8rem; letter-spacing:.03em; cursor:pointer; padding:0; }
.offer-description { margin:24px 0 0; padding-top:20px; border-top:1px solid var(--line); text-align:left; }
.offer-description-heading { font-size:.95rem; margin:0 0 8px; color:var(--accent); }
.offer-description p { margin:0; color:var(--muted); font-size:.85rem; line-height:1.6; }
.amazon-disclosure { margin:18px 0 0; color:var(--muted); font-size:.62rem; line-height:1.4; opacity:.65; }
.site-footer { margin-top:28px; text-align:center; font-size:.75rem; }
.site-footer a { color:var(--muted); }
.offer-list { display:flex; flex-direction:column; gap:12px; }
.offer-list-item { display:flex; align-items:center; gap:14px; text-decoration:none; color:inherit; }
.offer-list-thumb { width:56px; height:56px; object-fit:contain; background:#fff; border-radius:8px; flex-shrink:0; }
.offer-list-title { margin:0; font-weight:700; font-size:.9rem; }
.offer-list-price { margin:4px 0 0; color:var(--accent); font-weight:700; }

/* Home page photo-forward card grid (2026-09-06, explicit user request,
   reference: achadosdalisi.com.br) — scoped under .offer-grid so it never
   touches the plain horizontal-row .offer-list-item used by Top 10 da
   semana just above, which keeps its original layout untouched. */
.offer-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; }
.offer-grid .offer-list-item { flex-direction:column; align-items:stretch; gap:0; padding:0; overflow:hidden; }
.offer-list-thumb-wrap { position:relative; background:#fff; }
.offer-grid .offer-list-thumb { width:100%; height:160px; border-radius:0; }
.offer-list-thumb-emoji { display:flex; align-items:center; justify-content:center; height:160px; font-size:3.2rem; background:var(--surface-soft); }
.discount-badge { position:absolute; top:10px; left:10px; background:#101113; color:#fff; font-weight:800; font-size:.72rem; padding:4px 8px; border-radius:6px; }
.offer-list-body { padding:14px; display:flex; flex-direction:column; gap:6px; }
.offer-list-meta { display:flex; align-items:center; gap:8px; }
.offer-list-time { color:var(--muted); font-size:.68rem; }
.offer-list-description { margin:0; color:var(--muted); font-size:.76rem; line-height:1.45; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.offer-list-prices { margin:2px 0 0; display:flex; align-items:baseline; gap:8px; }
.offer-list-original-price { color:var(--muted); font-size:.78rem; }
.store-badge { display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; background:#fff; flex-shrink:0; }
/* The real Mercado Livre badge is a squared-off yellow tile, not a circle
   (confirmed against the real logo image, 2026-09-06) — the SVG itself
   already paints its own background over the full icon, so this variant
   drops the shared circular clip/white fill instead of fighting them. */
.store-badge-meli { border-radius:4px; background:none; }
.amazon-badge { color:#101113; font-family:Arial,sans-serif; font-weight:800; font-size:.72rem; box-shadow:inset 0 -3px 0 -1px #FF9900; }

/* Store filter pills (2026-09-06, explicit user request, reference:
   achadosdalisi.com.br's own "Filtrar por loja" row) — the Radar bot now
   ingests both Mercado Livre and Amazon offers into this same page (see
   /api/offers/ingest in server.js), so a way to narrow the grid to one
   store at a time earns its place here. */
.store-filter { display:flex; gap:10px; margin:0 0 20px; overflow-x:auto; }
.store-filter-pill { display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border:1px solid var(--line); border-radius:999px; background:var(--surface-soft); color:var(--text); font-weight:700; font-size:.82rem; white-space:nowrap; cursor:pointer; flex-shrink:0; }
.store-filter-pill.active { border-color:var(--accent); background:rgba(214,255,0,.1); color:var(--accent); }
.store-filter-pill .store-badge { width:18px; height:18px; }
.offer-store-row { display:flex; align-items:center; gap:8px; justify-content:center; margin-bottom:14px; color:var(--muted); font-size:.78rem; }
.offer-store-row strong { color:var(--text); }

/* WhatsApp promo banner (2026-09-06, explicit user request, reference:
   achadosdalisi.com.br's own top banner) — deliberately breaks out of
   .page-shell's max-width to read as a full-bleed strip, and cancels the
   shell's own top padding so it sits flush at the very top of the page. */
.whatsapp-banner { display:flex; align-items:center; justify-content:space-between; gap:16px; width:100vw; margin:-64px calc(50% - 50vw) 28px; padding:16px 20px; background:linear-gradient(90deg,#0a0f0a,#123018); text-decoration:none; }
.whatsapp-banner-text { color:#fff; font-weight:700; font-size:.85rem; }
.whatsapp-banner-cta { display:inline-flex; align-items:center; gap:8px; background:#25D366; color:#0a2e17; font-weight:800; font-size:.82rem; padding:10px 18px; border-radius:999px; white-space:nowrap; }
@media (max-width:600px) { .whatsapp-banner { flex-wrap:wrap; margin-top:-42px; } }
.top10-rank { font-family:Impact,"Arial Narrow",sans-serif; font-size:1.4rem; color:var(--accent); width:32px; text-align:center; flex-shrink:0; }
.top10-count { color:var(--muted); font-size:.78rem; white-space:nowrap; flex-shrink:0; }

/* Redirect-with-branding page (2026-09-02) */
.redirect-page { max-width:380px; margin:80px auto 0; text-align:center; padding:0 16px; }
.redirect-logo { width:140px; height:140px; object-fit:contain; border-radius:16px; margin-bottom:28px; }
.redirect-progress-track { width:100%; height:8px; border-radius:4px; background:var(--surface-soft); overflow:hidden; margin-bottom:18px; }
.redirect-progress-fill { width:0; height:100%; background:var(--accent); transition:width 3s linear; }
.redirect-message { margin:0 0 22px; font-size:.95rem; color:var(--text); }
.redirect-coupon-box { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:22px; padding:12px 16px; border:1px dashed var(--line); border-radius:10px; font-size:.9rem; }
.redirect-coupon-box strong { color:var(--accent); }
