:root {
  --bg: #090b0e;
  --surface: rgba(19, 22, 27, .78);
  --surface-solid: #12151a;
  --surface-2: #191d24;
  --line: rgba(255,255,255,.09);
  --line-strong: rgba(255,255,255,.16);
  --text: #f5f7fa;
  --muted: #9da5b2;
  --accent: #6aa8ff;
  --accent-2: #9b7bff;
  --warm: #ffbf69;
  --danger: #ff7d87;
  --radius: 22px;
  --shadow: 0 24px 80px rgba(0,0,0,.32);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background: var(--bg);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
button, input, select { font: inherit; }
button { color: inherit; }
svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.ambient { position: fixed; inset: auto; pointer-events: none; filter: blur(90px); opacity: .2; border-radius: 50%; z-index: -1; }
.ambient-one { width: 420px; height: 420px; background: var(--accent-2); top: -170px; right: -130px; }
.ambient-two { width: 520px; height: 520px; background: #2164b8; left: -300px; top: 38vh; opacity: .14; }
.topbar {
  width: min(1160px, calc(100% - 40px));
  margin: 0 auto;
  padding: 26px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; }
.brand-mark { width: 38px; height: 38px; border: 1px solid var(--line-strong); border-radius: 12px; display: grid; place-items: center; background: linear-gradient(145deg, rgba(255,255,255,.1), rgba(255,255,255,.02)); box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
.brand-mark span { width: 15px; height: 23px; border: 2px solid var(--text); border-radius: 4px; position: relative; }
.brand-mark span::after { content: ""; position: absolute; left: 4px; right: 4px; bottom: 2px; height: 1px; background: var(--text); opacity: .6; }
.brand-copy { display: flex; flex-direction: column; line-height: 1; gap: 5px; }
.brand-copy strong { font-size: .86rem; letter-spacing: .15em; }
.brand-copy small { color: var(--muted); font-size: .72rem; }
.icon-button { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line); background: rgba(255,255,255,.04); border-radius: 12px; cursor: pointer; transition: .2s ease; }
.icon-button:hover { background: rgba(255,255,255,.09); border-color: var(--line-strong); transform: translateY(-1px); }
.icon-button svg { width: 20px; }
main { width: min(1160px, calc(100% - 40px)); margin: 0 auto; }
.hero { padding: 70px 0 72px; max-width: 880px; }
.eyebrow, .section-kicker { margin: 0 0 16px; text-transform: uppercase; letter-spacing: .15em; font-size: .72rem; font-weight: 700; color: var(--muted); }
.eyebrow { display: flex; align-items: center; gap: 9px; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px rgba(106,168,255,.12); }
h1 { margin: 0; font-size: clamp(3rem, 7.5vw, 6.8rem); line-height: .91; letter-spacing: -.072em; font-weight: 680; }
h1 span { color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.65); }
.hero > p { margin: 28px 0 32px; max-width: 610px; color: var(--muted); font-size: clamp(1rem, 2vw, 1.15rem); line-height: 1.65; }
.search-shell { position: relative; display: flex; align-items: center; min-height: 72px; max-width: 790px; border: 1px solid var(--line-strong); border-radius: 20px; background: rgba(17,20,25,.82); backdrop-filter: blur(20px); box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.08); transition: border-color .2s, box-shadow .2s, transform .2s; }
.search-shell:focus-within { border-color: rgba(106,168,255,.62); box-shadow: 0 24px 90px rgba(0,0,0,.4), 0 0 0 5px rgba(106,168,255,.09); transform: translateY(-1px); }
.search-icon { width: 24px; margin-left: 22px; color: var(--muted); flex: none; }
.search-shell input { width: 100%; height: 70px; border: 0; outline: 0; background: transparent; color: var(--text); padding: 0 64px 0 17px; font-size: 1.06rem; }
.search-shell input::placeholder { color: #777f8c; }
.search-shell input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
kbd { position: absolute; right: 20px; border: 1px solid var(--line-strong); border-bottom-color: rgba(255,255,255,.23); border-radius: 7px; color: var(--muted); padding: 4px 8px; font-size: .72rem; background: rgba(255,255,255,.04); }
.clear-search { position: absolute; right: 15px; width: 40px; height: 40px; border: 0; background: rgba(255,255,255,.07); border-radius: 11px; cursor: pointer; display: grid; place-items: center; }
.clear-search svg { width: 18px; }
.clear-search[hidden] { display: none; }
.search-shell.has-value kbd { display: none; }
.quick-searches { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--muted); font-size: .8rem; }
.quick-searches button, .recent-searches button { border: 1px solid var(--line); background: rgba(255,255,255,.035); color: #c9ced7; border-radius: 999px; padding: 7px 11px; cursor: pointer; transition: .18s; }
.quick-searches button:hover, .recent-searches button:hover { border-color: rgba(106,168,255,.45); color: var(--text); background: rgba(106,168,255,.08); }
.catalog { border-top: 1px solid var(--line); padding: 46px 0 16px; }
.catalog-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; }
.section-kicker { margin-bottom: 9px; }
h2 { margin: 0; font-size: clamp(1.55rem, 3.2vw, 2.35rem); letter-spacing: -.04em; font-weight: 650; }
.result-summary { margin: 10px 0 0; color: var(--muted); font-size: .92rem; }
.secondary-button { display: inline-flex; align-items: center; gap: 9px; border: 1px solid var(--line-strong); background: rgba(255,255,255,.045); border-radius: 13px; padding: 11px 15px; cursor: pointer; white-space: nowrap; transition: .2s; }
.secondary-button:hover { background: rgba(255,255,255,.09); transform: translateY(-1px); }
.secondary-button svg { width: 17px; }
.filters { margin-top: 25px; display: flex; gap: 14px; align-items: center; justify-content: space-between; }
.filters[hidden] { display: none; }
.filter-scroll { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.filter-scroll::-webkit-scrollbar { display: none; }
.filter-chip { border: 1px solid var(--line); background: rgba(255,255,255,.025); color: var(--muted); border-radius: 999px; padding: 9px 13px; cursor: pointer; white-space: nowrap; font-size: .82rem; transition: .18s; }
.filter-chip:hover { color: var(--text); border-color: var(--line-strong); }
.filter-chip.active { color: #07101d; background: var(--accent); border-color: var(--accent); font-weight: 750; }
select { min-width: 185px; border: 1px solid var(--line); background: var(--surface-solid); color: var(--text); border-radius: 12px; padding: 10px 34px 10px 12px; outline: none; }
.recent-wrap { margin: 24px 0 0; display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: .78rem; }
.recent-wrap[hidden] { display: none; }
.recent-searches { display: flex; gap: 7px; overflow: auto; scrollbar-width: none; }
.results { display: grid; gap: 14px; margin-top: 28px; }
.result-card { position: relative; overflow: hidden; border: 1px solid var(--line); background: linear-gradient(145deg, rgba(24,28,34,.88), rgba(15,18,22,.88)); border-radius: var(--radius); padding: 24px; box-shadow: 0 18px 55px rgba(0,0,0,.15); animation: cardIn .32s both; }
.result-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--accent); opacity: .85; }
.result-card:hover { border-color: rgba(255,255,255,.15); }
@keyframes cardIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.card-top { display: flex; justify-content: space-between; gap: 18px; align-items: start; }
.card-labels { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.tag { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; padding: 5px 9px; font-size: .68rem; letter-spacing: .04em; color: var(--muted); background: rgba(255,255,255,.025); }
.tag.evidence-ALTA { color: #b9d7ff; border-color: rgba(106,168,255,.28); background: rgba(106,168,255,.08); }
.tag.evidence-MÉDIA { color: #ffd49b; border-color: rgba(255,191,105,.28); background: rgba(255,191,105,.08); }
.tag.evidence-BAIXA { color: #ffb5bc; border-color: rgba(255,125,135,.3); background: rgba(255,125,135,.08); }
.result-card h3 { margin: 0; font-size: clamp(1.35rem, 2.5vw, 1.78rem); letter-spacing: -.035em; }
.result-card h3 small { display: block; margin-bottom: 6px; color: var(--muted); font-size: .71rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 650; }
.card-actions { display: flex; gap: 8px; }
.action-button { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line); background: rgba(255,255,255,.035); border-radius: 11px; cursor: pointer; transition: .18s; }
.action-button:hover { background: rgba(255,255,255,.09); }
.action-button svg { width: 18px; }
.compat-block { margin-top: 21px; padding-top: 18px; border-top: 1px solid var(--line); }
.compat-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 11px; color: var(--muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .11em; font-weight: 700; }
.model-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.model-chip { display: inline-flex; align-items: center; min-height: 34px; padding: 7px 11px; border-radius: 10px; background: rgba(255,255,255,.055); color: #d8dde5; font-size: .84rem; border: 1px solid transparent; }
.model-chip.matched { background: rgba(106,168,255,.12); border-color: rgba(106,168,255,.38); color: #e7f1ff; box-shadow: inset 0 0 0 1px rgba(106,168,255,.05); }
.model-chip mark { color: inherit; background: rgba(255,255,255,.14); border-radius: 4px; padding: 0 2px; }
.details-grid { display: grid; grid-template-columns: minmax(180px, .7fr) 1.3fr; gap: 14px; margin-top: 17px; }
.detail { border: 1px solid var(--line); background: rgba(255,255,255,.025); border-radius: 14px; padding: 14px 15px; }
.detail span { display: block; color: var(--muted); font-size: .69rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 7px; font-weight: 700; }
.detail p { margin: 0; color: #c7cdd6; font-size: .86rem; line-height: 1.55; }
.match-reason { margin-top: 16px; display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .76rem; }
.match-reason svg { width: 15px; color: var(--accent); }
.empty-state { min-height: 380px; display: grid; place-items: center; align-content: center; text-align: center; padding: 60px 20px; }
.empty-state[hidden] { display: none; }
.empty-visual { position: relative; width: 110px; height: 100px; margin-bottom: 22px; }
.screen-layer { position: absolute; width: 52px; height: 76px; border: 1px solid var(--line-strong); border-radius: 10px; background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.015)); left: 19px; top: 8px; transform-origin: bottom center; }
.layer-one { transform: rotate(-14deg) translateX(-12px); opacity: .35; }
.layer-two { transform: rotate(10deg) translateX(22px); opacity: .45; }
.layer-three { transform: translateX(10px); }
.empty-visual svg { position: absolute; width: 33px; right: 3px; bottom: 0; color: var(--accent); padding: 8px; border-radius: 50%; background: #10141b; border: 1px solid rgba(106,168,255,.28); box-sizing: content-box; }
.empty-state h3 { margin: 0; font-size: 1.28rem; }
.empty-state > p { max-width: 460px; margin: 10px auto 0; color: var(--muted); line-height: 1.55; }
.stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 22px; }
.stat { border: 1px solid var(--line); background: rgba(255,255,255,.025); border-radius: 11px; padding: 9px 12px; color: var(--muted); font-size: .78rem; }
.stat strong { color: var(--text); margin-right: 4px; }
.no-results { min-height: 330px; display: grid; place-items: center; text-align: center; border: 1px dashed var(--line-strong); border-radius: var(--radius); padding: 40px; }
.no-results h3 { margin: 0 0 8px; }
.no-results p { margin: 0; color: var(--muted); max-width: 480px; line-height: 1.55; }
.safety-note { margin: 42px 0 28px; display: flex; align-items: start; gap: 16px; border: 1px solid rgba(255,191,105,.18); background: linear-gradient(110deg, rgba(255,191,105,.07), rgba(255,255,255,.02)); border-radius: 18px; padding: 20px; }
.safety-icon { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px; color: var(--warm); background: rgba(255,191,105,.09); }
.safety-icon svg { width: 22px; }
.safety-note strong { display: block; margin: 2px 0 5px; }
.safety-note p { margin: 0; color: var(--muted); line-height: 1.55; font-size: .87rem; }
footer { width: min(1160px, calc(100% - 40px)); margin: 0 auto; padding: 22px 0 40px; border-top: 1px solid var(--line); color: #777f8a; font-size: .75rem; display: flex; justify-content: space-between; gap: 15px; }
dialog { width: min(610px, calc(100% - 28px)); border: 0; padding: 0; background: transparent; color: var(--text); }
dialog::backdrop { background: rgba(2,4,7,.74); backdrop-filter: blur(7px); }
.dialog-card { border: 1px solid var(--line-strong); border-radius: 24px; background: #12161c; box-shadow: var(--shadow); padding: 25px; }
.dialog-head { display: flex; justify-content: space-between; align-items: start; gap: 18px; }
.dialog-card ol { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 10px; }
.dialog-card li { display: flex; gap: 14px; align-items: start; border: 1px solid var(--line); border-radius: 15px; padding: 15px; background: rgba(255,255,255,.025); }
.dialog-card li > span { color: var(--accent); font-size: .72rem; letter-spacing: .08em; font-weight: 800; margin-top: 3px; }
.dialog-card li strong { font-size: .91rem; }
.dialog-card li p { margin: 4px 0 0; color: var(--muted); font-size: .82rem; line-height: 1.45; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); z-index: 20; background: #f3f6fa; color: #11151b; border-radius: 12px; padding: 11px 15px; box-shadow: 0 18px 45px rgba(0,0,0,.35); font-size: .84rem; font-weight: 650; opacity: 0; pointer-events: none; transition: .25s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 760px) {
  .topbar, main, footer { width: min(100% - 28px, 1160px); }
  .topbar { padding: 18px 0; }
  .hero { padding: 44px 0 54px; }
  h1 { font-size: clamp(3.05rem, 15vw, 5.2rem); }
  .hero > p { margin-top: 22px; }
  .search-shell { min-height: 64px; border-radius: 17px; }
  .search-shell input { height: 62px; padding-right: 52px; font-size: .98rem; }
  .search-icon { margin-left: 17px; width: 21px; }
  kbd { display: none; }
  .catalog { padding-top: 35px; }
  .catalog-head { align-items: start; }
  .secondary-button { padding: 10px 12px; }
  .secondary-button svg { margin: 0; }
  .filters { align-items: stretch; flex-direction: column; }
  select { width: 100%; }
  .result-card { padding: 19px; border-radius: 18px; }
  .card-top { gap: 10px; }
  .details-grid { grid-template-columns: 1fr; }
  .card-actions { flex-direction: column; }
  .recent-wrap { align-items: start; flex-direction: column; }
  .safety-note { padding: 17px; }
  footer { flex-direction: column; padding-bottom: 28px; }
}
@media (max-width: 430px) {
  .quick-searches span { width: 100%; }
  .secondary-button { width: 43px; height: 43px; padding: 0; justify-content: center; overflow: hidden; font-size: 0; }
  .secondary-button svg { width: 18px; }
  .result-card h3 { font-size: 1.3rem; }
  .model-chip { font-size: .78rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Edição 2.0 — seletor de categoria e compatibilidade de baterias */
body[data-mode="baterias"] {
  --accent: #ffae57;
  --accent-2: #ff6f61;
}
body[data-mode="baterias"] .ambient-two { background: #8b451f; }
body[data-mode="baterias"] .live-dot { box-shadow: 0 0 0 5px rgba(255,174,87,.12); }
body[data-mode="baterias"] .search-shell:focus-within {
  border-color: rgba(255,174,87,.62);
  box-shadow: 0 24px 90px rgba(0,0,0,.4), 0 0 0 5px rgba(255,174,87,.09);
}
body[data-mode="baterias"] .quick-searches button:hover,
body[data-mode="baterias"] .recent-searches button:hover {
  border-color: rgba(255,174,87,.45);
  background: rgba(255,174,87,.08);
}
body[data-mode="baterias"] .tag.evidence-ALTA {
  color: #ffd6ad;
  border-color: rgba(255,174,87,.3);
  background: rgba(255,174,87,.08);
}
body[data-mode="baterias"] .model-chip.matched,
body[data-mode="baterias"] .device-code.matched {
  background: rgba(255,174,87,.12);
  border-color: rgba(255,174,87,.4);
  color: #fff0df;
}

.mode-switch {
  width: fit-content;
  display: grid;
  grid-template-columns: repeat(2, minmax(168px, 1fr));
  gap: 5px;
  margin-bottom: 38px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.025);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.mode-button {
  min-height: 61px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 14px 9px 10px;
  border: 1px solid transparent;
  border-radius: 13px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  text-align: left;
  transition: background .2s, border-color .2s, color .2s, transform .2s;
}
.mode-button:hover { color: var(--text); background: rgba(255,255,255,.035); }
.mode-button.active {
  color: var(--text);
  border-color: var(--line-strong);
  background: linear-gradient(145deg, rgba(255,255,255,.095), rgba(255,255,255,.035));
  box-shadow: 0 9px 25px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.08);
}
.mode-button:active { transform: scale(.985); }
.mode-button > span:last-child { display: flex; flex-direction: column; gap: 4px; line-height: 1; }
.mode-button strong { font-size: .86rem; letter-spacing: -.01em; }
.mode-button small { color: var(--muted); font-size: .68rem; }
.mode-icon {
  width: 39px;
  height: 39px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: rgba(255,255,255,.045);
  border: 1px solid var(--line);
  color: var(--muted);
}
.mode-icon svg { width: 20px; }
.mode-button.active .mode-icon {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}

.code-tag { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.code-tag mark { color: inherit; background: rgba(255,255,255,.14); border-radius: 3px; padding: 0 2px; }
.device-code-block { margin-top: 15px; }
.device-code-block > span {
  display: block;
  margin-bottom: 9px;
  color: var(--muted);
  font-size: .69rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 700;
}
.device-codes { display: flex; flex-wrap: wrap; gap: 7px; }
.device-code {
  display: inline-flex;
  align-items: center;
  min-height: 29px;
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,.025);
  color: #b8c0cb;
  font: .74rem/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.device-code mark { color: inherit; background: rgba(255,255,255,.14); border-radius: 3px; padding: 0 2px; }
.details-grid.has-three { grid-template-columns: minmax(145px,.52fr) minmax(180px,.75fr) 1.3fr; }

body[data-mode="baterias"] .screen-layer {
  width: 67px;
  height: 48px;
  top: 20px;
  border-radius: 9px;
}
body[data-mode="baterias"] .screen-layer::after {
  content: "";
  position: absolute;
  top: 15px;
  right: -7px;
  width: 6px;
  height: 17px;
  border-radius: 0 4px 4px 0;
  background: rgba(255,255,255,.16);
}

@media (max-width: 760px) {
  .mode-switch { margin-bottom: 30px; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; max-width: 430px; }
  .mode-button { min-width: 0; padding-right: 10px; }
  .details-grid.has-three { grid-template-columns: 1fr; }
}
@media (max-width: 430px) {
  .mode-switch { gap: 4px; padding: 4px; border-radius: 16px; }
  .mode-button { min-height: 56px; gap: 8px; padding: 7px; }
  .mode-icon { width: 35px; height: 35px; border-radius: 10px; }
  .mode-button small { display: none; }
}

/* ===== Refinamento visual + instalação PWA (Edição 2.1) ===== */
:root {
  --bg: #080b10;
  --surface: rgba(24, 29, 37, .88);
  --surface-solid: #151a22;
  --surface-2: #1d2430;
  --line: rgba(255,255,255,.13);
  --line-strong: rgba(255,255,255,.24);
  --text: #ffffff;
  --muted: #c2cad6;
  --accent: #73b1ff;
  --accent-2: #aa8cff;
  --shadow: 0 26px 90px rgba(0,0,0,.42);
}
body {
  background:
    radial-gradient(circle at 82% 8%, rgba(107,83,188,.13), transparent 31rem),
    radial-gradient(circle at 8% 55%, rgba(39,105,192,.10), transparent 34rem),
    var(--bg);
}
.ambient { opacity: .29; }
.ambient-two { opacity: .20; }
.brand-mark {
  overflow: hidden;
  background: #fff;
  border-color: rgba(255,255,255,.34);
  box-shadow: 0 8px 26px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.75);
}
.brand-mark img { width: 100%; height: 100%; object-fit: cover; display: block; }
.brand-copy small,
.eyebrow,
.section-kicker,
.result-summary,
.quick-searches,
.recent-wrap,
.compat-title,
.detail > span,
.device-code-block > span { color: var(--muted); }
.top-actions { display: flex; align-items: center; gap: 9px; }
.install-button {
  position: relative;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 14px;
  border: 1px solid rgba(115,177,255,.42);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(115,177,255,.20), rgba(115,177,255,.09));
  color: #f4f9ff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 9px 26px rgba(0,0,0,.15);
  cursor: pointer;
  font-weight: 720;
  font-size: .82rem;
  transition: .2s ease;
}
.install-button:hover {
  border-color: rgba(115,177,255,.72);
  background: linear-gradient(145deg, rgba(115,177,255,.30), rgba(115,177,255,.14));
  transform: translateY(-1px);
}
.install-button svg { width: 18px; }
.install-button.is-ready::after {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #75d6a0;
  box-shadow: 0 0 0 4px rgba(117,214,160,.12);
}
.install-button[hidden] { display: none; }
h1 {
  font-weight: 720;
  text-wrap: balance;
}
h1 span {
  color: #f7f9fd;
  -webkit-text-stroke: 0;
  text-shadow: 0 1px 0 rgba(255,255,255,.14), 0 22px 80px rgba(88,152,245,.13);
}
#heroLine2 { color: #dce8f7; }
.hero > p { color: #c4ccd8; }
.search-shell {
  border-color: rgba(115,177,255,.44);
  background: rgba(19,24,32,.94);
  box-shadow: 0 24px 80px rgba(0,0,0,.42), 0 0 0 4px rgba(115,177,255,.06), inset 0 1px 0 rgba(255,255,255,.11);
}
.search-shell:focus-within {
  border-color: rgba(115,177,255,.90);
  box-shadow: 0 28px 95px rgba(0,0,0,.48), 0 0 0 5px rgba(115,177,255,.15), inset 0 1px 0 rgba(255,255,255,.11);
}
.search-shell input::placeholder { color: #aeb8c6; opacity: 1; }
.search-icon { color: #c5ceda; }
.quick-searches button,
.recent-searches button { color: #e1e6ed; background: rgba(255,255,255,.055); }
.mode-switch { background: rgba(17,21,28,.90); border-color: rgba(255,255,255,.15); }
.mode-button { color: #c0c8d4; }
.mode-button.active {
  background: linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.065));
  border-color: rgba(255,255,255,.30);
  box-shadow: 0 13px 34px rgba(0,0,0,.23), inset 0 1px 0 rgba(255,255,255,.16);
}
.mode-button small { color: #aeb7c4; }
.mode-button.active small { color: #cbd3de; }
.catalog { border-color: rgba(255,255,255,.14); }
.result-card {
  border-color: rgba(255,255,255,.14);
  background: linear-gradient(145deg, rgba(30,36,46,.95), rgba(17,21,28,.94));
  box-shadow: 0 20px 66px rgba(0,0,0,.23), inset 0 1px 0 rgba(255,255,255,.04);
}
.result-card:hover { border-color: rgba(115,177,255,.34); }
.model-chip { color: #eef2f7; background: rgba(255,255,255,.08); }
.device-code { color: #d1d8e2; background: rgba(255,255,255,.055); }
.detail p { color: #e9edf3; }
.safety-note { background: rgba(24,29,37,.76); border-color: rgba(255,255,255,.14); }
.empty-state p { color: #bdc6d2; }

.install-dialog-card { max-width: 580px; }
.install-intro {
  display: grid;
  grid-template-columns: 72px 1fr;
  align-items: center;
  gap: 16px;
  margin: 12px 0 20px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255,255,255,.035);
}
.install-intro img {
  width: 72px;
  height: 72px;
  border-radius: 17px;
  box-shadow: 0 12px 30px rgba(0,0,0,.26);
}
.install-intro p { margin: 0; color: #d5dce6; line-height: 1.58; }
.install-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}
.install-steps li {
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: start;
  gap: 12px;
  padding: 12px 13px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(255,255,255,.025);
  color: #e5eaf1;
  line-height: 1.45;
}
.install-steps li > span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(115,177,255,.13);
  border: 1px solid rgba(115,177,255,.25);
  color: #bcd9ff;
  font-size: .74rem;
  font-weight: 800;
}

@media (max-width: 600px) {
  .topbar { width: min(100% - 28px, 1160px); padding: 18px 0; }
  main { width: min(100% - 28px, 1160px); }
  .install-button { width: 40px; padding: 0; }
  .install-button > span { display: none; }
  .install-button.is-ready::after { position: absolute; transform: translate(14px,-14px); }
  .brand-copy strong { font-size: .78rem; }
  .brand-copy small { font-size: .66rem; }
  h1 { font-size: clamp(2.65rem, 15vw, 4.35rem); line-height: .94; letter-spacing: -.065em; }
  .hero { padding-top: 42px; }
  .install-intro { grid-template-columns: 58px 1fr; }
  .install-intro img { width: 58px; height: 58px; border-radius: 14px; }
}


/* ===== Futuristic refresh (Edição 2.2) ===== */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(circle at 35% 28%, rgba(0,0,0,.9), transparent 78%);
  -webkit-mask-image: radial-gradient(circle at 35% 28%, rgba(0,0,0,.9), transparent 78%);
  opacity: .12;
  z-index: -2;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 80%, rgba(0,180,255,.10), transparent 28%),
    radial-gradient(circle at 86% 14%, rgba(170,140,255,.15), transparent 22%),
    linear-gradient(120deg, transparent 0 43%, rgba(255,255,255,.045) 50%, transparent 57%);
  opacity: .75;
  animation: sweepGlow 18s linear infinite;
  z-index: -1;
}
@keyframes sweepGlow {
  0% { transform: translate3d(-6%, 0, 0); }
  50% { transform: translate3d(4%, 2%, 0); }
  100% { transform: translate3d(-6%, 0, 0); }
}
.topbar {
  position: relative;
  z-index: 2;
}
.brand {
  padding: 8px 12px 8px 8px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 14px 38px rgba(0,0,0,.14);
}
.brand-mark {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  box-shadow: 0 0 0 1px rgba(115,177,255,.18), 0 10px 30px rgba(0,0,0,.36), 0 0 20px rgba(115,177,255,.12);
}
.brand-copy strong {
  font-size: .9rem;
  letter-spacing: .16em;
}
.icon-button,
.install-button {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.install-button {
  overflow: hidden;
}
.install-button::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,.16), transparent 36%, transparent 68%, rgba(255,255,255,.10));
  opacity: .65;
  pointer-events: none;
}
.install-button:hover {
  box-shadow: 0 0 0 1px rgba(115,177,255,.36), 0 14px 38px rgba(0,0,0,.26), 0 0 28px rgba(115,177,255,.18);
}
.hero {
  position: relative;
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 312px);
  column-gap: 44px;
  align-items: start;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 8px 328px 14px -18px;
  border: 1px solid rgba(115,177,255,.13);
  border-radius: 32px;
  background: linear-gradient(180deg, rgba(255,255,255,.035), transparent 32%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02), 0 20px 70px rgba(0,0,0,.18);
  pointer-events: none;
}
.hero > *:not(.hero-aside) {
  grid-column: 1;
  position: relative;
  z-index: 1;
}
.hero-aside {
  grid-column: 2;
  grid-row: 1 / span 10;
  align-self: start;
  padding-top: 18px;
}
.eyebrow {
  margin-top: 6px;
}
.live-dot {
  box-shadow: 0 0 0 6px rgba(115,177,255,.10), 0 0 16px rgba(115,177,255,.45);
}
h1 {
  letter-spacing: -.082em;
}
h1 span {
  background: linear-gradient(180deg, #ffffff 0%, #e9f2ff 58%, #b5cfff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 24px rgba(115,177,255,.08), 0 18px 60px rgba(74,121,255,.10);
}
#heroLine2 {
  background: linear-gradient(180deg, #edf5ff 0%, #dbe8ff 55%, #c0d1ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero > p {
  max-width: 640px;
}
.search-shell {
  overflow: hidden;
}
.search-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(115,177,255,.06) 20%, rgba(170,140,255,.09) 50%, rgba(115,177,255,.06) 80%, transparent 100%);
  transform: translateX(-100%);
  animation: inputSweep 9s ease-in-out infinite;
  pointer-events: none;
}
.search-shell::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  opacity: .6;
}
@keyframes inputSweep {
  0%, 18% { transform: translateX(-100%); opacity: 0; }
  28% { opacity: 1; }
  55% { transform: translateX(100%); opacity: 1; }
  70%, 100% { transform: translateX(140%); opacity: 0; }
}
.mode-switch {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 22px 45px rgba(0,0,0,.18);
}
.mode-switch::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(255,255,255,.06), transparent 35%, transparent 65%, rgba(255,255,255,.05));
  pointer-events: none;
}
.mode-button.active {
  box-shadow: 0 12px 32px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.16), 0 0 0 1px rgba(115,177,255,.12);
}
.mode-button.active .mode-icon {
  box-shadow: 0 0 0 1px rgba(115,177,255,.18), 0 0 18px rgba(115,177,255,.18);
}
.quick-searches {
  margin-top: 18px;
}
.hero-hud {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.hud-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  background: rgba(255,255,255,.045);
  color: #e7edf5;
  font-size: .78rem;
  letter-spacing: .02em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.hud-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #79c2ff;
  box-shadow: 0 0 0 0 rgba(121,194,255,.45);
  animation: hudPulse 2.4s infinite;
}
@keyframes hudPulse {
  0% { box-shadow: 0 0 0 0 rgba(121,194,255,.45); }
  70% { box-shadow: 0 0 0 9px rgba(121,194,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(121,194,255,0); }
}
.hero-panel {
  position: sticky;
  top: 22px;
  overflow: hidden;
  padding: 20px;
  border: 1px solid rgba(115,177,255,.16);
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(18,23,31,.92), rgba(10,14,20,.92));
  box-shadow: 0 28px 70px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(255,255,255,.02);
}
.hero-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: .08;
  pointer-events: none;
}
.hero-panel::after {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  right: -70px;
  top: -60px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(115,177,255,.25), transparent 65%);
  pointer-events: none;
}
.panel-line, .panel-matrix, .panel-caption, .panel-bar {
  position: relative;
  z-index: 1;
}
.panel-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.panel-label {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .13em;
  font-size: .68rem;
  font-weight: 700;
}
#panelModeLabel {
  font-size: 1.1rem;
  letter-spacing: -.03em;
}
.panel-matrix {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.panel-matrix div {
  padding: 12px 10px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  background: rgba(255,255,255,.035);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.panel-matrix small {
  display: block;
  margin-bottom: 6px;
  color: #9ca8b7;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .62rem;
}
.panel-matrix strong {
  display: block;
  font-size: .94rem;
  letter-spacing: .02em;
}
.panel-bar {
  height: 8px;
  margin: 18px 0 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  overflow: hidden;
}
.panel-bar span {
  display: block;
  width: 68%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #6cc1ff, #86a4ff 48%, #be8cff);
  box-shadow: 0 0 18px rgba(115,177,255,.35);
  animation: barMove 4.4s ease-in-out infinite alternate;
}
@keyframes barMove {
  from { width: 42%; }
  to { width: 86%; }
}
.panel-caption {
  margin: 0;
  color: #c6d0dd;
  line-height: 1.6;
  font-size: .86rem;
}
.results {
  gap: 16px;
}
.result-card {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.result-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(255,255,255,.06), transparent 22%, transparent 78%, rgba(255,255,255,.04));
  pointer-events: none;
}
.result-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 24px 74px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.05), 0 0 0 1px rgba(115,177,255,.10);
}
.action-button, .secondary-button, .filter-chip, select, .model-chip, .device-code, .tag, .safety-note, .dialog-card {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.safety-note {
  position: relative;
  overflow: hidden;
}
.safety-note::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255,191,105,.08), transparent 45%, rgba(115,177,255,.05));
  pointer-events: none;
}
footer {
  position: relative;
  color: #a2acba;
}
@media (max-width: 980px) {
  .hero {
    grid-template-columns: 1fr;
    row-gap: 18px;
  }
  .hero::before {
    inset: 8px -8px 12px -8px;
  }
  .hero-aside {
    grid-column: 1;
    grid-row: auto;
    padding-top: 4px;
  }
  .hero-panel {
    position: relative;
    top: auto;
  }
}
@media (max-width: 760px) {
  body::before { opacity: .08; background-size: 40px 40px; }
  .brand { padding: 6px 10px 6px 6px; }
  .hero::before { border-radius: 24px; }
  .hero-hud { gap: 8px; }
  .hud-chip { font-size: .74rem; }
  .panel-matrix { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .hero-aside { display: none; }
  .hero::before { inset: 8px -8px 12px -8px; }
}
body[data-mode="baterias"] .hero::before { border-color: rgba(255,174,87,.15); }
body[data-mode="baterias"] .search-shell::before { background: linear-gradient(90deg, transparent 0%, rgba(255,174,87,.06) 20%, rgba(255,111,97,.09) 50%, rgba(255,174,87,.06) 80%, transparent 100%); }
body[data-mode="baterias"] .hero-panel::after { background: radial-gradient(circle, rgba(255,174,87,.24), transparent 65%); }
body[data-mode="baterias"] .panel-bar span { background: linear-gradient(90deg, #ffbc6a, #ff8c69 48%, #ffc57d); box-shadow: 0 0 18px rgba(255,174,87,.34); }
body[data-mode="baterias"] h1 span { background: linear-gradient(180deg, #fff8f0 0%, #ffe9ca 58%, #ffc57d 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
body[data-mode="baterias"] #heroLine2 { background: linear-gradient(180deg, #fff3e6 0%, #ffd7aa 55%, #ffbf82 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
body[data-mode="baterias"] .hud-pulse { background: #ffbc6a; }


/* ===== Phone live preview (Edição 2.3) ===== */
.hero-aside {
  display: flex;
  justify-content: center;
}
.phone-preview-wrap {
  position: relative;
  width: 100%;
  min-height: 560px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.floating-badge {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(16,22,31,.82);
  color: #e7eef7;
  font-size: .78rem;
  letter-spacing: .02em;
  box-shadow: 0 14px 35px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.floating-badge-one { top: 78px; left: 8px; }
.floating-badge-two { right: 0; top: 148px; }
.phone-3d {
  position: relative;
  width: 280px;
  height: 560px;
  border-radius: 42px;
  padding: 14px;
  background: linear-gradient(160deg, #121723 0%, #05070c 34%, #141b29 100%);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow:
    0 40px 80px rgba(0,0,0,.42),
    0 0 0 1px rgba(115,177,255,.08),
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(255,255,255,.04);
  transform: perspective(1400px) rotateY(-19deg) rotateX(10deg) rotateZ(-4deg);
  transform-style: preserve-3d;
}
.phone-3d::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 42px;
  background: linear-gradient(135deg, rgba(255,255,255,.18), transparent 24%, transparent 78%, rgba(255,255,255,.08));
  pointer-events: none;
}
.phone-3d::after {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: -18px;
  height: 24px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(95,150,255,.28), rgba(0,0,0,0) 70%);
  filter: blur(10px);
}
.phone-camera {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: 108px;
  height: 28px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(7,10,16,.98), rgba(18,23,31,.95));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 3px 8px rgba(0,0,0,.3);
  z-index: 3;
}
.phone-side-button {
  position: absolute;
  right: -3px;
  width: 4px;
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.04));
}
.side-button-top { top: 120px; height: 72px; }
.side-button-bottom { top: 205px; height: 108px; }
.phone-screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 31px;
  overflow: hidden;
  padding: 48px 16px 18px;
  background:
    radial-gradient(circle at top right, rgba(168,140,255,.15), transparent 24%),
    radial-gradient(circle at bottom left, rgba(88,165,255,.18), transparent 28%),
    linear-gradient(180deg, rgba(11,15,22,.98), rgba(7,10,15,.96));
  border: 1px solid rgba(255,255,255,.05);
}
.phone-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: .12;
  pointer-events: none;
}
.phone-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.08), transparent 10%, transparent 84%, rgba(255,255,255,.03));
  pointer-events: none;
}
.phone-ui-top,
.phone-ui-searchline,
.phone-result-card,
.phone-ui-footer {
  position: relative;
  z-index: 1;
}
.phone-ui-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.phone-app-mini {
  color: #eef4ff;
  letter-spacing: .18em;
  font-size: .62rem;
  font-weight: 800;
}
.phone-mode-pill {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.11);
  color: #dce8fb;
  font-size: .68rem;
  font-weight: 700;
}
.phone-ui-searchline {
  margin-top: 18px;
  padding: 12px 13px;
  border-radius: 18px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
}
.phone-ui-searchline span {
  display: block;
  color: #91a0b4;
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.phone-ui-searchline strong {
  display: block;
  margin-top: 6px;
  color: #f2f6fb;
  font-size: .95rem;
  line-height: 1.28;
  min-height: 2.4em;
}
.phone-result-card {
  margin-top: 16px;
  min-height: 312px;
  padding: 14px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.phone-empty-state,
.phone-no-match {
  height: 100%;
  min-height: 284px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.phone-empty-icon {
  width: 46px;
  height: 46px;
  border-radius: 15px;
  background: linear-gradient(145deg, rgba(115,177,255,.20), rgba(170,140,255,.20));
  box-shadow: 0 0 0 1px rgba(115,177,255,.12), inset 0 1px 0 rgba(255,255,255,.10);
  margin-bottom: 14px;
}
.phone-empty-state strong,
.phone-no-match strong {
  color: #f2f6fc;
  font-size: 1rem;
}
.phone-empty-state p,
.phone-no-match p {
  margin: 8px 0 0;
  color: #a4b0c2;
  font-size: .83rem;
  line-height: 1.55;
}
.phone-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #74b7ff;
  box-shadow: 0 0 0 6px rgba(116,183,255,.12);
  margin-bottom: 14px;
}
.phone-status-dot.warning {
  background: #ffb364;
  box-shadow: 0 0 0 6px rgba(255,179,100,.12);
}
.phone-result-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.phone-brand-tag,
.phone-evidence-tag {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: .65rem;
  font-weight: 700;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  color: #e9eff8;
}
.phone-evidence-tag.evidence-ALTA { color: #badaff; }
.phone-evidence-tag.evidence-MÉDIA { color: #ffd5a6; }
.phone-evidence-tag.evidence-BAIXA { color: #ffb9c0; }
.phone-reference-kicker {
  margin-top: 14px;
  color: #8c9bb1;
  text-transform: uppercase;
  letter-spacing: .13em;
  font-size: .62rem;
}
.phone-reference-title {
  margin-top: 8px;
  color: #ffffff;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.1;
}
.phone-code-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 10px;
}
.phone-code-row span {
  color: #d7e6ff;
  font: .78rem/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.phone-code-row small {
  color: #93a5bb;
  font-size: .72rem;
}
.phone-compat-label {
  margin-top: 15px;
  color: #a0aec0;
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.phone-model-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.phone-model-grid span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  color: #edf2fb;
  font-size: .73rem;
}
.phone-meta-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.phone-meta-line small {
  color: #8f9fb5;
  font-size: .66rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.phone-meta-line strong {
  color: #eef4ff;
  font-size: .82rem;
}
.phone-note-line {
  margin-top: 14px;
  color: #b9c4d3;
  font-size: .76rem;
  line-height: 1.45;
}
.phone-ui-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
  color: #90a2b7;
  font-size: .7rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
body[data-mode="baterias"] .phone-mode-pill {
  color: #fff0e0;
}
body[data-mode="baterias"] .phone-empty-icon {
  background: linear-gradient(145deg, rgba(255,174,87,.24), rgba(255,111,97,.20));
}
body[data-mode="baterias"] .phone-3d {
  box-shadow: 0 40px 80px rgba(0,0,0,.42), 0 0 0 1px rgba(255,174,87,.10), inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(255,255,255,.04);
}
body[data-mode="baterias"] .phone-3d::after {
  background: radial-gradient(ellipse at center, rgba(255,174,87,.28), rgba(0,0,0,0) 70%);
}
body[data-mode="baterias"] .floating-badge {
  color: #fff0e0;
}
@media (max-width: 980px) {
  .phone-preview-wrap {
    min-height: 420px;
  }
  .phone-3d {
    width: 246px;
    height: 494px;
    transform: perspective(1200px) rotateY(-15deg) rotateX(8deg) rotateZ(-3deg);
  }
  .floating-badge-one { top: 26px; left: 18px; }
  .floating-badge-two { right: 18px; top: 86px; }
}
@media (max-width: 560px) {
  .hero-aside {
    display: none;
  }
}


/* ===== Refino smartphone + card menor (Edição 2.4) ===== */
.hero {
  grid-template-columns: minmax(0, 1fr) minmax(240px, 278px);
  column-gap: 30px;
}
.hero::before {
  inset: 12px 296px 22px -8px;
  border-radius: 28px;
}
.search-shell {
  max-width: 720px;
  min-height: 66px;
  border-radius: 18px;
}
.search-shell input {
  height: 64px;
  font-size: 1rem;
  padding-right: 58px;
}
.phone-preview-wrap {
  min-height: 520px;
}
.floating-badge {
  min-height: 30px;
  padding: 6px 10px;
  font-size: .72rem;
}
.floating-badge-one { top: 86px; left: 4px; }
.floating-badge-two { right: 6px; top: 150px; }
.phone-3d {
  width: 246px;
  height: 512px;
  padding: 12px;
  border-radius: 44px;
  background: linear-gradient(160deg, #171d2a 0%, #080b12 34%, #171f2e 100%);
  box-shadow:
    0 34px 72px rgba(0,0,0,.44),
    0 0 0 1px rgba(255,255,255,.05),
    0 0 0 2px rgba(115,177,255,.08),
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(255,255,255,.04);
  transform: perspective(1400px) rotateY(-10deg) rotateX(5deg) rotateZ(-2deg);
}
.phone-3d::before {
  inset: 0;
  border-radius: 44px;
  background: linear-gradient(135deg, rgba(255,255,255,.14), transparent 20%, transparent 82%, rgba(255,255,255,.07));
}
.phone-camera {
  top: 14px;
  width: 112px;
  height: 30px;
  border-radius: 999px;
}
.phone-side-button {
  width: 3px;
  border-radius: 3px;
}
.side-button-top { top: 118px; height: 66px; }
.side-button-bottom { top: 196px; height: 96px; }
.phone-3d .phone-side-button.left-button {
  left: -3px;
  right: auto;
  top: 156px;
  height: 54px;
}
.phone-screen {
  border-radius: 34px;
  padding: 50px 14px 16px;
  border: 1px solid rgba(255,255,255,.06);
}
.phone-ui-searchline {
  margin-top: 16px;
  padding: 11px 12px;
  border-radius: 16px;
}
.phone-ui-searchline strong {
  font-size: .9rem;
}
.phone-result-card {
  margin-top: 14px;
  min-height: 272px;
  padding: 12px;
  border-radius: 22px;
}
.phone-empty-state,
.phone-no-match {
  min-height: 246px;
}
.phone-reference-title {
  font-size: 1.08rem;
}
.phone-model-grid {
  gap: 6px;
}
.phone-model-grid span {
  min-height: 26px;
  padding: 5px 9px;
  font-size: .7rem;
}
.phone-note-line {
  margin-top: 12px;
  font-size: .72rem;
}
.phone-ui-footer {
  margin-top: 12px;
  font-size: .66rem;
}
body[data-mode="baterias"] .phone-3d {
  box-shadow:
    0 34px 72px rgba(0,0,0,.44),
    0 0 0 1px rgba(255,255,255,.05),
    0 0 0 2px rgba(255,174,87,.10),
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(255,255,255,.04);
}
@media (max-width: 1200px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) 248px;
    column-gap: 20px;
  }
  .hero::before {
    inset: 12px 266px 20px -6px;
  }
  .search-shell {
    max-width: 680px;
  }
}
@media (max-width: 980px) {
  .hero::before {
    inset: 8px -8px 12px -8px;
  }
  .search-shell {
    max-width: 100%;
  }
  .phone-preview-wrap {
    min-height: 390px;
  }
  .phone-3d {
    width: 222px;
    height: 462px;
    transform: perspective(1200px) rotateY(-8deg) rotateX(4deg) rotateZ(-2deg);
  }
  .phone-result-card {
    min-height: 240px;
  }
}


/* ===== Rebalance premium smartphone + compact search (Edição 2.5) ===== */
.hero {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 340px);
  column-gap: 26px;
  align-items: center;
}
.hero::before {
  inset: 14px 356px 24px -10px;
  border-radius: 30px;
}
.hero > p {
  max-width: 590px;
}
.search-shell {
  max-width: 610px;
  min-height: 60px;
  border-radius: 18px;
}
.search-shell input {
  height: 58px;
  font-size: .97rem;
  padding: 0 56px 0 15px;
}
.search-icon {
  width: 22px;
  margin-left: 16px;
}
.clear-search {
  width: 40px;
  height: 40px;
  right: 10px;
}
.quick-searches {
  max-width: 620px;
}
.hero-hud {
  max-width: 620px;
}
.phone-preview-wrap {
  min-height: 640px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.floating-badge {
  min-height: 32px;
  padding: 7px 11px;
  font-size: .72rem;
}
.floating-badge-one {
  top: 112px;
  left: -6px;
}
.floating-badge-two {
  right: -4px;
  top: 194px;
}
.phone-3d {
  width: 312px;
  height: 640px;
  padding: 12px;
  border-radius: 48px;
  background: linear-gradient(180deg, #202632 0%, #0a0d14 42%, #1d2430 100%);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow:
    0 40px 90px rgba(0,0,0,.50),
    0 0 0 1px rgba(255,255,255,.05),
    0 0 0 2px rgba(115,177,255,.08),
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(255,255,255,.04);
  transform: perspective(1600px) rotateY(-4deg) rotateX(1.5deg) rotateZ(-0.8deg);
  transform-style: preserve-3d;
}
.phone-3d::before {
  inset: 0;
  border-radius: 48px;
  background: linear-gradient(135deg, rgba(255,255,255,.15), transparent 18%, transparent 82%, rgba(255,255,255,.05));
}
.phone-3d::after {
  left: 28px;
  right: 28px;
  bottom: -18px;
  height: 32px;
  background: radial-gradient(ellipse at center, rgba(89,146,255,.28), rgba(0,0,0,0) 72%);
  filter: blur(12px);
}
.phone-camera {
  top: 14px;
  width: 122px;
  height: 32px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(7,10,16,.98), rgba(18,23,31,.95));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), inset 0 -1px 0 rgba(255,255,255,.05), 0 3px 10px rgba(0,0,0,.34);
}
.phone-side-button {
  width: 4px;
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.04));
}
.side-button-top {
  top: 138px;
  height: 76px;
  right: -3px;
}
.side-button-bottom {
  top: 226px;
  height: 118px;
  right: -3px;
}
.phone-3d .phone-side-button.left-button {
  left: -3px;
  right: auto;
  top: 176px;
  height: 58px;
}
.phone-screen {
  border-radius: 38px;
  padding: 54px 17px 16px;
  background:
    radial-gradient(circle at top right, rgba(168,140,255,.16), transparent 24%),
    radial-gradient(circle at bottom left, rgba(88,165,255,.18), transparent 28%),
    linear-gradient(180deg, rgba(11,15,22,.99), rgba(7,10,15,.98));
}
.phone-screen::before {
  opacity: .09;
}
.phone-app-mini {
  font-size: .64rem;
}
.phone-mode-pill {
  min-height: 28px;
  padding: 5px 10px;
  font-size: .7rem;
}
.phone-ui-searchline {
  margin-top: 18px;
  padding: 12px 13px;
  border-radius: 18px;
}
.phone-ui-searchline strong {
  font-size: 1rem;
  min-height: 2.5em;
}
.phone-result-card {
  margin-top: 15px;
  min-height: 352px;
  padding: 15px;
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
}
.phone-empty-state,
.phone-no-match {
  min-height: 320px;
}
.phone-empty-icon {
  width: 52px;
  height: 52px;
  border-radius: 18px;
}
.phone-reference-kicker {
  margin-top: 12px;
}
.phone-reference-title {
  font-size: 1.28rem;
  line-height: 1.08;
}
.phone-code-row span {
  font-size: .8rem;
}
.phone-code-row small {
  font-size: .72rem;
}
.phone-model-grid {
  gap: 7px;
}
.phone-model-grid span {
  min-height: 28px;
  padding: 6px 10px;
  font-size: .72rem;
}
.phone-note-line {
  font-size: .75rem;
}
.phone-ui-footer {
  margin-top: 14px;
  font-size: .68rem;
}
body[data-mode="baterias"] .phone-3d {
  box-shadow:
    0 40px 90px rgba(0,0,0,.50),
    0 0 0 1px rgba(255,255,255,.05),
    0 0 0 2px rgba(255,174,87,.10),
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(255,255,255,.04);
}
body[data-mode="baterias"] .phone-3d::after {
  background: radial-gradient(ellipse at center, rgba(255,174,87,.28), rgba(0,0,0,0) 72%);
}
@media (max-width: 1260px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 312px);
  }
  .hero::before {
    inset: 14px 324px 24px -8px;
  }
  .search-shell {
    max-width: 590px;
  }
  .phone-3d {
    width: 286px;
    height: 590px;
  }
  .phone-result-card {
    min-height: 324px;
  }
}
@media (max-width: 980px) {
  .hero {
    grid-template-columns: 1fr;
  }
  .hero::before {
    inset: 8px -8px 12px -8px;
  }
  .search-shell,
  .quick-searches,
  .hero-hud,
  .hero > p {
    max-width: 100%;
  }
  .phone-preview-wrap {
    min-height: 470px;
  }
  .phone-3d {
    width: 256px;
    height: 520px;
    transform: perspective(1400px) rotateY(-3deg) rotateX(1deg) rotateZ(-0.6deg);
  }
  .phone-result-card {
    min-height: 286px;
  }
  .floating-badge-one { top: 34px; left: 10px; }
  .floating-badge-two { top: 110px; right: 10px; }
}


/* ===== Harmonia total do layout (Edição 3.0) ===== */
.topbar {
  max-width: 1320px;
  margin: 0 auto;
  padding: 30px 32px 10px;
}
main {
  max-width: 1320px;
  margin: 0 auto;
  padding: 12px 32px 64px;
}
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(340px, 410px);
  gap: 26px;
  align-items: stretch;
  padding: 0;
}
.hero::before {
  display: none;
}
.hero-copy {
  position: relative;
  padding: 34px 32px 28px;
  border: 1px solid rgba(115,177,255,.12);
  border-radius: 32px;
  background: linear-gradient(180deg, rgba(14,18,26,.88), rgba(8,11,17,.92));
  box-shadow: 0 26px 70px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.05);
  overflow: hidden;
}
.hero-copy::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 36px 36px;
  opacity: .12;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.85), transparent 92%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.85), transparent 92%);
  pointer-events: none;
}
.hero-copy > * {
  position: relative;
  z-index: 1;
}
.mode-switch {
  margin-bottom: 30px;
}
.eyebrow {
  margin-top: 0;
}
h1 {
  margin-top: 16px;
  margin-bottom: 18px;
  max-width: 9.8ch;
  font-size: clamp(3.7rem, 5vw, 6.25rem);
  line-height: .94;
}
.hero-copy > p {
  max-width: 570px;
  margin-bottom: 28px;
  font-size: 1rem;
  line-height: 1.6;
}
.search-shell {
  max-width: 560px;
  min-height: 58px;
  border-radius: 18px;
}
.search-shell input {
  height: 58px;
  padding: 0 58px 0 16px;
  font-size: .98rem;
}
.search-icon {
  width: 20px;
  margin-left: 16px;
}
.clear-search {
  right: 10px;
  width: 38px;
  height: 38px;
}
.quick-searches,
.hero-hud {
  max-width: 560px;
}
.hero-hud {
  margin-top: 18px;
}
.hero-aside {
  grid-column: 2;
  grid-row: 1;
  padding-top: 0;
  align-self: stretch;
}
.floating-badge {
  display: none;
}
.phone-preview-wrap {
  position: relative;
  min-height: 100%;
  padding: 30px 24px 28px;
  border: 1px solid rgba(115,177,255,.12);
  border-radius: 32px;
  background: linear-gradient(180deg, rgba(14,18,26,.90), rgba(8,11,17,.95));
  box-shadow: 0 26px 70px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.05);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.phone-preview-wrap::before {
  content: "Prévia em tempo real";
  position: absolute;
  top: 26px;
  left: 24px;
  color: #eef4ff;
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: -.01em;
}
.phone-preview-wrap::after {
  content: none;
  position: absolute;
  top: 50px;
  left: 24px;
  right: 24px;
  color: #95a1b1;
  font-size: .82rem;
  line-height: 1.5;
}
.phone-3d {
  width: 318px;
  height: 646px;
  margin-top: 44px;
  padding: 12px;
  border-radius: 48px;
  background: linear-gradient(180deg, #1f2631 0%, #0b0f16 48%, #1b2230 100%);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow:
    0 38px 90px rgba(0,0,0,.52),
    0 0 0 1px rgba(255,255,255,.05),
    0 0 0 2px rgba(115,177,255,.08),
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(255,255,255,.04);
  transform: perspective(1600px) rotateY(-2deg) rotateX(1deg) rotateZ(-0.45deg);
}
.phone-3d::before {
  inset: 0;
  border-radius: 48px;
  background: linear-gradient(135deg, rgba(255,255,255,.14), transparent 18%, transparent 82%, rgba(255,255,255,.04));
}
.phone-3d::after {
  left: 28px;
  right: 28px;
  bottom: -18px;
  height: 30px;
  background: radial-gradient(ellipse at center, rgba(86,144,255,.26), rgba(0,0,0,0) 70%);
}
.phone-camera {
  top: 14px;
  width: 122px;
  height: 32px;
  border-radius: 999px;
}
.phone-screen {
  border-radius: 38px;
  padding: 54px 17px 16px;
}
.phone-ui-top {
  margin-bottom: 12px;
}
.phone-app-mini {
  font-size: .64rem;
}
.phone-mode-pill {
  min-height: 28px;
  padding: 5px 10px;
}
.phone-ui-searchline {
  margin-top: 0;
  padding: 12px 13px;
  border-radius: 18px;
}
.phone-ui-searchline strong {
  font-size: .98rem;
  min-height: 2.45em;
}
.phone-result-card {
  margin-top: 14px;
  min-height: 352px;
  padding: 15px;
  border-radius: 26px;
}
.phone-empty-state,
.phone-no-match {
  min-height: 320px;
}
.phone-reference-title {
  font-size: 1.26rem;
  line-height: 1.08;
}
.phone-model-grid span {
  min-height: 28px;
  padding: 6px 10px;
}
.phone-ui-footer {
  margin-top: 14px;
}
.catalog {
  margin-top: 28px;
}
body[data-mode="baterias"] .hero-copy,
body[data-mode="baterias"] .phone-preview-wrap {
  border-color: rgba(255,174,87,.14);
}
body[data-mode="baterias"] .phone-3d {
  box-shadow:
    0 38px 90px rgba(0,0,0,.52),
    0 0 0 1px rgba(255,255,255,.05),
    0 0 0 2px rgba(255,174,87,.10),
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(255,255,255,.04);
}
body[data-mode="baterias"] .phone-preview-wrap::before {
  color: #fff3e2;
}
@media (max-width: 1180px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(310px, 360px);
    gap: 20px;
  }
  .hero-copy {
    padding: 30px 28px 26px;
  }
  h1 {
    font-size: clamp(3.4rem, 4.8vw, 5.6rem);
  }
  .search-shell,
  .quick-searches,
  .hero-hud {
    max-width: 520px;
  }
  .phone-3d {
    width: 286px;
    height: 582px;
  }
  .phone-result-card {
    min-height: 308px;
  }
}
@media (max-width: 980px) {
  .topbar,
  main {
    padding-left: 20px;
    padding-right: 20px;
  }
  .hero {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .hero-copy,
  .phone-preview-wrap {
    border-radius: 28px;
  }
  .hero-aside {
    grid-column: 1;
  }
  .hero-copy {
    padding: 26px 22px 22px;
  }
  h1 {
    max-width: none;
    font-size: clamp(3rem, 10vw, 4.8rem);
  }
  .hero-copy > p,
  .search-shell,
  .quick-searches,
  .hero-hud {
    max-width: 100%;
  }
  .phone-preview-wrap {
    min-height: auto;
    padding: 78px 18px 22px;
  }
  .phone-preview-wrap::before {
    top: 22px;
    left: 18px;
  }
  .phone-preview-wrap::after {
    top: 46px;
    left: 18px;
    right: 18px;
  }
  .phone-3d {
    width: 268px;
    height: 546px;
    margin-top: 0;
    transform: none;
  }
  .phone-result-card {
    min-height: 294px;
  }
}
@media (max-width: 560px) {
  .mode-switch {
    width: 100%;
    grid-template-columns: 1fr 1fr;
  }
  .mode-button {
    min-height: 58px;
    padding-right: 10px;
  }
  .hero-copy {
    padding: 22px 16px 18px;
  }
  .search-shell input {
    font-size: .94rem;
  }
  .hero-aside {
    display: block;
  }
  .phone-preview-wrap {
    padding: 72px 14px 16px;
  }
  .phone-3d {
    width: 236px;
    height: 486px;
    border-radius: 40px;
  }
  .phone-screen {
    border-radius: 30px;
    padding: 50px 14px 14px;
  }
  .phone-result-card {
    min-height: 258px;
    padding: 12px;
    border-radius: 22px;
  }
  .phone-empty-state,
  .phone-no-match {
    min-height: 230px;
  }
}


/* ===== Estilo alinhado à página principal (Edição 3.1) ===== */
:root {
  --main-bg: #f5f7fb;
  --surface-white: #ffffff;
  --soft-line: #e7edf4;
  --soft-text: #5f6877;
  --heading-dark: #0e1116;
  --blue-main: #1f8ef1;
  --blue-soft: #e9f4ff;
  --green-main: #28d962;
  --green-soft: #eafff0;
}
body.theme-mainpage {
  background: linear-gradient(180deg, #f9fbff 0%, #f4f7fb 100%);
  color: var(--heading-dark);
}
body.theme-mainpage::before,
body.theme-mainpage::after,
body.theme-mainpage .ambient { display: none; }
body.theme-mainpage .topbar {
  max-width: 1360px;
  padding: 18px 32px 14px;
  align-items: center;
  gap: 20px;
  border-bottom: 1px solid rgba(15, 23, 42, .06);
}
body.theme-mainpage .brand {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  gap: 14px;
}
body.theme-mainpage .brand-mark {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 8px 24px rgba(15,23,42,.08);
}
body.theme-mainpage .brand-copy strong {
  color: #111316;
  font-size: 1.25rem;
  letter-spacing: -.03em;
}
body.theme-mainpage .brand-copy small {
  color: #697384;
  font-size: .82rem;
}
.main-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 34px;
  margin-left: auto;
}
.main-nav a {
  color: #303744;
  text-decoration: none;
  font-weight: 600;
  font-size: .98rem;
}
.main-nav a:hover { color: var(--blue-main); }
body.theme-mainpage .top-actions {
  gap: 10px;
  margin-left: 8px;
}
.status-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #63d46b;
  box-shadow: 0 0 0 7px rgba(99,212,107,.12);
}
.nav-pill {
  min-height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  border: 1px solid #d9e7f7;
  background: #f7fbff;
  color: #116fc8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: 700;
  box-shadow: 0 8px 18px rgba(31,142,241,.08);
}
.nav-pill.whatsapp {
  background: var(--green-main);
  color: #0b120f;
  border-color: transparent;
  box-shadow: 0 10px 22px rgba(40,217,98,.22);
}
.install-mini,
.help-mini {
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #e5ebf4;
  box-shadow: 0 8px 16px rgba(15,23,42,.06);
  color: #495567;
}
.install-mini span { display: none; }
body.theme-mainpage main {
  max-width: 1360px;
  padding: 28px 32px 70px;
}
body.theme-mainpage .hero {
  grid-template-columns: minmax(0, 1.08fr) minmax(340px, 430px);
  gap: 28px;
  align-items: stretch;
}
body.theme-mainpage .hero-copy,
body.theme-mainpage .phone-preview-wrap {
  border: 0;
  background: #fff;
  box-shadow: 0 18px 40px rgba(15,23,42,.06);
}
body.theme-mainpage .hero-copy {
  padding: 42px 42px 34px;
  border-radius: 34px;
}
body.theme-mainpage .hero-copy::before { display: none; }
body.theme-mainpage .hero-copy {
  display: flex;
  flex-direction: column;
}
body.theme-mainpage .mode-switch { order: 4; margin-top: 18px; margin-bottom: 22px; }
body.theme-mainpage .eyebrow { order: 1; color: var(--blue-main); font-weight: 800; letter-spacing: .14em; }
body.theme-mainpage .live-dot { display: none; }
body.theme-mainpage h1 { order: 2; max-width: 9ch; margin: 18px 0 18px; font-size: clamp(3.3rem, 5.7vw, 5.8rem); }
body.theme-mainpage h1 span,
body.theme-mainpage #heroLine2 {
  color: var(--heading-dark);
  background: none;
  -webkit-text-fill-color: initial;
  text-shadow: none;
}
body.theme-mainpage #heroLine2 {
  color: var(--blue-main);
}
body.theme-mainpage .hero-copy > p {
  order: 3;
  max-width: 630px;
  color: var(--soft-text);
  font-size: 1.02rem;
  line-height: 1.7;
}
body.theme-mainpage .search-shell { order: 5; max-width: 640px; min-height: 66px; background: #fff; border: 1px solid #d9e3ee; box-shadow: none; }
body.theme-mainpage .search-shell::before,
body.theme-mainpage .search-shell::after { display: none; }
body.theme-mainpage .search-shell:focus-within { border-color: #a9cef7; box-shadow: 0 0 0 5px rgba(31,142,241,.08); }
body.theme-mainpage .search-shell input,
body.theme-mainpage .search-shell input::placeholder { color: #536173; }
body.theme-mainpage .search-icon { color: #8a96a8; }
body.theme-mainpage .clear-search { background: #f1f6fb; color: #4f5b6c; }
body.theme-mainpage .quick-searches { order: 6; max-width: 640px; }
body.theme-mainpage .quick-searches span { color: #7a8595; }
body.theme-mainpage .quick-searches button { background: #f4f8fc; border-color: #dde7f0; color: #344154; }
.hero-cta-row {
  order: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 8px 0 10px;
}
.cta-primary,
.cta-secondary {
  min-height: 54px;
  padding: 0 24px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: 800;
  font-size: 1rem;
}
.cta-primary {
  background: var(--green-main);
  color: #0e120f;
  box-shadow: 0 12px 24px rgba(40,217,98,.18);
}
.cta-secondary {
  background: #fff;
  color: #156fc5;
  border: 1px solid #cfe0f1;
}
body.theme-mainpage .hero-copy > p { margin-bottom: 0; }
body.theme-mainpage .hero-hud { order: 7; max-width: 640px; margin-top: 16px; }
body.theme-mainpage .hud-chip {
  background: #f6f9fc;
  border-color: #e3ebf4;
  color: #435165;
  box-shadow: none;
}
body.theme-mainpage .hud-pulse { background: var(--blue-main); }
body.theme-mainpage .phone-preview-wrap {
  padding: 76px 22px 26px;
  border-radius: 34px;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 8% 92%, rgba(31,142,241,.08), transparent 25%),
    linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
}
body.theme-mainpage .phone-preview-wrap::before {
  content: 'COMPATIBILIDADE EM TEMPO REAL';
  top: 34px;
  left: 26px;
  color: var(--blue-main);
  font-weight: 800;
  letter-spacing: .14em;
  font-size: .78rem;
}
body.theme-mainpage .phone-preview-wrap::after {
  content: none;
  top: 58px;
  left: 26px;
  right: 26px;
  color: #738094;
  font-size: .88rem;
}
body.theme-mainpage .phone-3d {
  width: 316px;
  height: 644px;
  margin-top: 20px;
  transform: none;
  border-radius: 46px;
  background: linear-gradient(180deg, #20242d 0%, #090c11 42%, #20242d 100%);
  box-shadow: 0 28px 60px rgba(15,23,42,.22), 0 0 0 1px rgba(0,0,0,.07), 0 0 0 5px rgba(255,255,255,.78);
}
body.theme-mainpage .phone-3d::after { background: radial-gradient(ellipse at center, rgba(31,142,241,.16), rgba(0,0,0,0) 70%); }
body.theme-mainpage .phone-screen {
  background: linear-gradient(180deg, #131821 0%, #0b0f16 100%);
  border-radius: 36px;
}
body.theme-mainpage .phone-screen::before { opacity: .05; }
body.theme-mainpage .phone-screen::after { opacity: .04; }
body.theme-mainpage .phone-ui-searchline,
body.theme-mainpage .phone-result-card {
  background: rgba(255,255,255,.045);
  border-color: rgba(255,255,255,.08);
}
body.theme-mainpage .catalog {
  margin-top: 26px;
  padding: 26px 28px 30px;
  border-radius: 30px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(15,23,42,.06);
}
body.theme-mainpage .section-kicker { color: var(--blue-main); }
body.theme-mainpage .catalog-head h2,
body.theme-mainpage .result-summary,
body.theme-mainpage .empty-state h3,
body.theme-mainpage .empty-state p,
body.theme-mainpage .detail p,
body.theme-mainpage .compat-title,
body.theme-mainpage .detail span,
body.theme-mainpage .safety-note p,
body.theme-mainpage footer {
  color: #3b4657;
}
body.theme-mainpage .catalog-head h2,
body.theme-mainpage .result-card h3,
body.theme-mainpage .empty-state h3,
body.theme-mainpage .safety-note strong { color: var(--heading-dark); }
body.theme-mainpage .secondary-button,
body.theme-mainpage select,
body.theme-mainpage .filter-chip,
body.theme-mainpage .action-button,
body.theme-mainpage .model-chip,
body.theme-mainpage .device-code,
body.theme-mainpage .tag,
body.theme-mainpage .stats .stat,
body.theme-mainpage .recent-searches button {
  background: #f7faff;
  border-color: #dde6f0;
  color: #334255;
  box-shadow: none;
}
body.theme-mainpage .filter-chip.active,
body.theme-mainpage .secondary-button:hover {
  background: #edf6ff;
  border-color: #bdd9f7;
  color: #146fc7;
}
body.theme-mainpage .result-card {
  background: #fff;
  border-color: #e8eef5;
  box-shadow: 0 12px 26px rgba(15,23,42,.04);
}
body.theme-mainpage .result-card::after { display: none; }
body.theme-mainpage .result-card:hover { box-shadow: 0 18px 34px rgba(15,23,42,.07); }
body.theme-mainpage .tag.code-tag { background: #eef6ff; color: #136fc5; border-color: #d0e4fb; }
body.theme-mainpage .tag.evidence-ALTA { background: #eef9f2; color: #168749; border-color: #caecd8; }
body.theme-mainpage .tag.evidence-MÉDIA { background: #fff7e9; color: #bc7a10; border-color: #f4dfb2; }
body.theme-mainpage .tag.evidence-BAIXA { background: #fff0f1; color: #c15467; border-color: #f0c2c9; }
body.theme-mainpage .no-results,
body.theme-mainpage .empty-state,
body.theme-mainpage .safety-note {
  background: #fff;
  border-color: #e8eef5;
  box-shadow: 0 12px 26px rgba(15,23,42,.04);
}
body.theme-mainpage .safety-note {
  margin-top: 24px;
  padding: 22px 24px;
  border-radius: 24px;
}
body.theme-mainpage .safety-icon {
  background: #ecf6ff;
  color: #1f8ef1;
}
body.theme-mainpage footer {
  max-width: 1360px;
  margin: 18px auto 0;
  padding: 0 32px 28px;
}
@media (max-width: 1180px) {
  .main-nav { gap: 20px; }
  body.theme-mainpage .hero { grid-template-columns: 1fr; }
  body.theme-mainpage .phone-preview-wrap { min-height: auto; }
  body.theme-mainpage .phone-3d { width: 300px; height: 610px; }
}
@media (max-width: 980px) {
  body.theme-mainpage .topbar {
    flex-wrap: wrap;
    padding: 14px 20px 12px;
  }
  .main-nav {
    order: 3;
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 14px 18px;
    margin-left: 0;
    padding-top: 6px;
  }
  body.theme-mainpage main,
  body.theme-mainpage footer { padding-left: 20px; padding-right: 20px; }
  body.theme-mainpage .hero-copy,
  body.theme-mainpage .phone-preview-wrap,
  body.theme-mainpage .catalog { border-radius: 24px; }
  body.theme-mainpage .hero-copy { padding: 28px 22px 24px; }
  body.theme-mainpage h1 { font-size: clamp(2.8rem, 10vw, 4.6rem); }
  body.theme-mainpage .search-shell,
  body.theme-mainpage .quick-searches,
  body.theme-mainpage .hero-hud { max-width: 100%; }
}
@media (max-width: 640px) {
  .nav-pill { min-height: 44px; padding: 0 16px; font-size: .92rem; }
  .status-dot { display: none; }
  body.theme-mainpage .top-actions { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
  .install-mini,
  .help-mini { width: 40px; height: 40px; }
  body.theme-mainpage .phone-preview-wrap { padding: 74px 14px 16px; }
  body.theme-mainpage .phone-3d { width: 244px; height: 500px; }
  body.theme-mainpage .catalog { padding: 22px 16px 24px; }
}


/* ===== Correção de referência visual (Edição 3.2) ===== */
.main-nav,
.status-dot,
.nav-pill,
.hero-cta-row {
  display: none !important;
}
body.theme-mainpage .topbar {
  max-width: 1320px;
  padding: 22px 32px 14px;
  border-bottom: 1px solid rgba(15,23,42,.06);
}
body.theme-mainpage .brand {
  gap: 12px;
}
body.theme-mainpage .brand-mark {
  width: 48px;
  height: 48px;
}
body.theme-mainpage .brand-copy strong {
  font-size: 1rem;
  letter-spacing: .08em;
}
body.theme-mainpage .brand-copy small {
  font-size: .76rem;
}
body.theme-mainpage .top-actions {
  margin-left: auto;
  gap: 9px;
}
body.theme-mainpage .install-button {
  width: auto;
  min-width: 0;
  height: 44px;
  padding: 0 16px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid #dce6f0;
  color: #2f3c50;
  box-shadow: 0 8px 18px rgba(15,23,42,.06);
}
body.theme-mainpage .install-button span {
  display: inline;
}
body.theme-mainpage .icon-button {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid #dce6f0;
  color: #2f3c50;
  box-shadow: 0 8px 18px rgba(15,23,42,.06);
}
body.theme-mainpage .hero-copy {
  display: block;
}
body.theme-mainpage .mode-switch {
  order: initial;
  margin-top: 0;
  margin-bottom: 28px;
}
body.theme-mainpage .eyebrow,
body.theme-mainpage h1,
body.theme-mainpage .hero-copy > p,
body.theme-mainpage .search-shell,
body.theme-mainpage .quick-searches,
body.theme-mainpage .hero-hud {
  order: initial;
}
body.theme-mainpage .eyebrow {
  color: var(--blue-main);
}
body.theme-mainpage h1 {
  margin-top: 16px;
}
body.theme-mainpage .hero-copy > p {
  margin-bottom: 28px;
}
@media (max-width: 980px) {
  body.theme-mainpage .topbar {
    flex-wrap: nowrap;
  }
}
@media (max-width: 640px) {
  body.theme-mainpage .topbar {
    padding-left: 16px;
    padding-right: 16px;
  }
  body.theme-mainpage .install-button {
    width: 42px;
    padding: 0;
  }
  body.theme-mainpage .install-button span {
    display: none;
  }
}


/* ===== Abas integradas ao card hero (Edição 3.3) ===== */
body.theme-mainpage .hero-copy {
  position: relative;
  padding-top: 146px;
}
body.theme-mainpage .mode-switch {
  position: absolute;
  top: 26px;
  left: 28px;
  margin: 0;
  padding: 6px;
  min-width: 372px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, #2a303a 0%, #232934 100%);
  box-shadow: 0 16px 28px rgba(15,23,42,.16), inset 0 1px 0 rgba(255,255,255,.06);
}
body.theme-mainpage .mode-button {
  min-height: 58px;
  border-radius: 16px;
}
body.theme-mainpage .mode-button.active {
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05));
  border-color: rgba(255,255,255,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 18px rgba(0,0,0,.12);
}
body.theme-mainpage .mode-button small {
  color: rgba(255,255,255,.68);
}
body.theme-mainpage .mode-button strong {
  color: #ffffff;
}
body.theme-mainpage .mode-button:not(.active) strong {
  color: #d7deea;
}
body.theme-mainpage .mode-icon {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.10);
}
body.theme-mainpage .mode-button.active .mode-icon {
  background: rgba(31,142,241,.16);
  border-color: rgba(114,177,255,.22);
}
@media (max-width: 980px) {
  body.theme-mainpage .hero-copy {
    padding-top: 138px;
  }
  body.theme-mainpage .mode-switch {
    left: 22px;
    top: 22px;
    min-width: calc(100% - 44px);
  }
}
@media (max-width: 560px) {
  body.theme-mainpage .hero-copy {
    padding-top: 126px;
  }
  body.theme-mainpage .mode-switch {
    left: 16px;
    top: 16px;
    min-width: calc(100% - 32px);
    width: calc(100% - 32px);
    border-radius: 18px;
  }
  body.theme-mainpage .mode-button {
    min-height: 54px;
    padding-left: 8px;
    padding-right: 8px;
  }
  body.theme-mainpage .mode-button strong {
    font-size: .82rem;
  }
  body.theme-mainpage .mode-button small {
    font-size: .64rem;
  }
}


/* ===== Tabs reais + loading no smartphone (Edição 3.4) ===== */
body.theme-mainpage .hero-copy {
  padding-top: 122px;
}
body.theme-mainpage .mode-switch {
  position: absolute;
  top: -1px;
  left: 24px;
  min-width: 388px;
  padding: 5px;
  border-radius: 0 0 22px 22px;
  background: linear-gradient(180deg, #2c323d 0%, #242a35 100%);
  box-shadow: 0 18px 30px rgba(15,23,42,.16), inset 0 1px 0 rgba(255,255,255,.06);
}
body.theme-mainpage .mode-switch::before {
  display: none;
}
body.theme-mainpage .mode-button {
  min-height: 60px;
  border-radius: 16px;
}
body.theme-mainpage .mode-button.active {
  background: linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,.06));
}
body.theme-mainpage .mode-button small {
  color: rgba(255,255,255,.72);
}
body.theme-mainpage .mode-button strong {
  color: #fff;
}
body.theme-mainpage .mode-button:not(.active) {
  background: transparent;
}
body.theme-mainpage .mode-button:not(.active) strong {
  color: #dce3ee;
}
body.theme-mainpage .mode-button:not(.active):hover {
  background: rgba(255,255,255,.04);
}
.phone-loading-state {
  justify-content: flex-start;
}
.phone-loading-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.phone-loading-spinner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.18);
  border-top-color: #5ea4ff;
  animation: phoneSpin .9s linear infinite;
}
.phone-loading-state p {
  max-width: 220px;
}
.phone-loading-skeleton {
  display: grid;
  gap: 10px;
  width: 100%;
  margin-top: 14px;
}
.phone-loading-skeleton span {
  display: block;
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,.06) 25%, rgba(255,255,255,.14) 50%, rgba(255,255,255,.06) 75%);
  background-size: 220% 100%;
  animation: phoneShimmer 1.4s infinite linear;
}
.phone-loading-skeleton span:nth-child(1) { width: 88%; }
.phone-loading-skeleton span:nth-child(2) { width: 62%; }
.phone-loading-skeleton span:nth-child(3) { width: 76%; }
@keyframes phoneSpin { to { transform: rotate(360deg); } }
@keyframes phoneShimmer { from { background-position: 200% 0; } to { background-position: -20% 0; } }
@media (max-width: 980px) {
  body.theme-mainpage .hero-copy {
    padding-top: 132px;
  }
  body.theme-mainpage .mode-switch {
    left: 18px;
    min-width: calc(100% - 36px);
    width: calc(100% - 36px);
  }
}
@media (max-width: 560px) {
  body.theme-mainpage .hero-copy {
    padding-top: 126px;
  }
  body.theme-mainpage .mode-switch {
    left: 14px;
    min-width: calc(100% - 28px);
    width: calc(100% - 28px);
    border-radius: 0 0 18px 18px;
  }
  body.theme-mainpage .mode-button {
    min-height: 54px;
  }
}


/* ===== Tabs integradas visualmente ao card (Edição 3.5) ===== */
body.theme-mainpage .hero-copy {
  padding-top: 120px;
}
body.theme-mainpage .mode-switch {
  position: absolute;
  top: 0;
  left: 22px;
  min-width: 388px;
  padding: 8px 8px 0;
  border-radius: 0 0 22px 22px;
  border: 1px solid #e6edf5;
  border-top: 0;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  box-shadow: 0 12px 24px rgba(15,23,42,.06);
  overflow: visible;
}
body.theme-mainpage .mode-switch::before {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  bottom: -1px;
  height: 14px;
  border-left: 1px solid #e6edf5;
  border-right: 1px solid #e6edf5;
  border-bottom: 1px solid #e6edf5;
  border-radius: 0 0 22px 22px;
  background: #ffffff;
  z-index: 0;
}
body.theme-mainpage .mode-button {
  position: relative;
  z-index: 1;
  min-height: 58px;
  margin-bottom: -1px;
  border-radius: 16px 16px 0 0;
  border: 1px solid transparent;
  border-bottom: 0;
  background: #f2f6fa;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
body.theme-mainpage .mode-button.active {
  background: #ffffff;
  border-color: #d9e4ef;
  box-shadow: 0 -1px 0 #ffffff, 0 6px 12px rgba(15,23,42,.04);
}
body.theme-mainpage .mode-button:not(.active) {
  background: linear-gradient(180deg, #f1f4f8 0%, #e9eef5 100%);
  border-color: #e1e8f0;
}
body.theme-mainpage .mode-button:not(.active):hover {
  background: #eef3f8;
}
body.theme-mainpage .mode-button strong {
  color: #111827;
}
body.theme-mainpage .mode-button small {
  color: #6f7b8d;
}
body.theme-mainpage .mode-button:not(.active) strong {
  color: #334155;
}
body.theme-mainpage .mode-icon {
  background: #f7fbff;
  border-color: #d6e5f6;
  color: #1f8ef1;
}
body.theme-mainpage .mode-button.active .mode-icon {
  background: #edf6ff;
  border-color: #cbe1f7;
  box-shadow: none;
}
body.theme-mainpage .mode-button + .mode-button {
  margin-left: 6px;
}
@media (max-width: 980px) {
  body.theme-mainpage .hero-copy {
    padding-top: 128px;
  }
  body.theme-mainpage .mode-switch {
    left: 18px;
    min-width: calc(100% - 36px);
    width: calc(100% - 36px);
  }
}
@media (max-width: 560px) {
  body.theme-mainpage .hero-copy {
    padding-top: 122px;
  }
  body.theme-mainpage .mode-switch {
    left: 14px;
    min-width: calc(100% - 28px);
    width: calc(100% - 28px);
    padding: 6px 6px 0;
    border-radius: 0 0 18px 18px;
  }
  body.theme-mainpage .mode-switch::before {
    border-radius: 0 0 18px 18px;
  }
  body.theme-mainpage .mode-button {
    min-height: 52px;
    border-radius: 14px 14px 0 0;
  }
  body.theme-mainpage .mode-button + .mode-button {
    margin-left: 4px;
  }
}


/* ===== Refino final das tabs como abas reais (Edição 3.6) ===== */
body.theme-mainpage .hero-copy {
  padding-top: 104px;
}
body.theme-mainpage .mode-switch {
  position: absolute;
  top: 0;
  left: 26px;
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(182px, max-content));
  gap: 8px;
  width: auto;
  min-width: 0;
  max-width: calc(100% - 52px);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
body.theme-mainpage .mode-switch::before {
  display: none;
}
body.theme-mainpage .mode-button {
  position: relative;
  z-index: 1;
  min-height: 58px;
  margin: 0;
  padding: 10px 16px 10px 14px;
  border-radius: 0 0 18px 18px;
  border: 1px solid #e3eaf2;
  border-top: 0;
  background: linear-gradient(180deg, #f3f6fa 0%, #edf2f7 100%);
  box-shadow: 0 10px 22px rgba(15,23,42,.05);
}
body.theme-mainpage .mode-button.active {
  background: #ffffff;
  border-color: #dde6f0;
  box-shadow: 0 12px 24px rgba(15,23,42,.06);
}
body.theme-mainpage .mode-button.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: #ffffff;
}
body.theme-mainpage .mode-button:not(.active) {
  background: linear-gradient(180deg, #f1f4f8 0%, #e8edf4 100%);
}
body.theme-mainpage .mode-button:not(.active):hover {
  background: linear-gradient(180deg, #f6f9fc 0%, #eef3f8 100%);
}
body.theme-mainpage .mode-button + .mode-button {
  margin-left: 0;
}
body.theme-mainpage h1 {
  margin-top: 6px;
}
body.theme-mainpage .eyebrow {
  margin-top: 8px;
}
@media (max-width: 980px) {
  body.theme-mainpage .hero-copy {
    padding-top: 112px;
  }
  body.theme-mainpage .mode-switch {
    left: 22px;
    max-width: calc(100% - 44px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: calc(100% - 44px);
  }
}
@media (max-width: 560px) {
  body.theme-mainpage .hero-copy {
    padding-top: 106px;
  }
  body.theme-mainpage .mode-switch {
    left: 16px;
    width: calc(100% - 32px);
    max-width: calc(100% - 32px);
    gap: 6px;
  }
  body.theme-mainpage .mode-button {
    min-height: 54px;
    padding: 9px 10px 9px 10px;
    border-radius: 0 0 14px 14px;
  }
}

/* Administração da base — Edição 4.0 */
.admin-link { text-decoration: none; }


/* ===== Admin package active-tab emphasis (Edição 4.1) ===== */
body.theme-mainpage .mode-button {
  transition: background .22s ease, box-shadow .22s ease, border-color .22s ease, opacity .22s ease;
  overflow: hidden;
}
body.theme-mainpage .mode-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 16px;
  right: 16px;
  height: 4px;
  border-radius: 0 0 999px 999px;
  background: transparent;
}
body.theme-mainpage .mode-button.active {
  background: #ffffff;
  border-color: #cfe1f5;
  box-shadow: 0 14px 28px rgba(31,142,241,.10), 0 6px 16px rgba(15,23,42,.04);
}
body.theme-mainpage .mode-button.active::before {
  background: linear-gradient(90deg, #1f8ef1 0%, #63b3ff 100%);
}
body.theme-mainpage .mode-button.active strong {
  color: #0f172a;
}
body.theme-mainpage .mode-button.active small {
  color: #1f8ef1;
  font-weight: 700;
}
body.theme-mainpage .mode-button.active .mode-icon {
  background: #edf6ff;
  border-color: #c9def6;
  color: #1f8ef1;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95);
}
body.theme-mainpage .mode-button:not(.active) {
  opacity: .88;
}
body.theme-mainpage .mode-button:not(.active) strong {
  color: #425268;
}
body.theme-mainpage .mode-button:not(.active) small {
  color: #8692a4;
}
body.theme-mainpage .mode-button:not(.active) .mode-icon {
  background: #f7fafc;
  border-color: #dbe5ef;
  color: #5f6f85;
}
body.theme-mainpage .mode-button:not(.active):hover {
  opacity: 1;
}


/* ===== Windows Chrome title fix (Edição 4.2) ===== */
body.theme-mainpage h1 {
  width: 100%;
  max-width: none;
  font-size: clamp(3.1rem, 4.85vw, 5.2rem);
  line-height: .94;
  letter-spacing: -.075em;
}
body.theme-mainpage #heroLine1,
body.theme-mainpage #heroLine2 {
  display: inline-block;
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
}
@media (max-width: 1180px) {
  body.theme-mainpage h1 {
    font-size: clamp(3rem, 5.15vw, 4.8rem);
  }
}
@media (max-width: 980px) {
  body.theme-mainpage h1 {
    font-size: clamp(2.8rem, 8.4vw, 4.35rem);
  }
}
@media (max-width: 560px) {
  body.theme-mainpage h1 {
    font-size: clamp(2.35rem, 11.4vw, 3.55rem);
    letter-spacing: -.065em;
  }
}


/* ===== Limpeza de textos auxiliares (Edição 5.1) ===== */
.phone-preview-wrap::after,
body.theme-mainpage .phone-preview-wrap::after {
  display: none !important;
  content: none !important;
}
body.theme-mainpage .phone-preview-wrap {
  padding-top: 64px;
}


/* ===== Refinos importação PDF e destaque visual (Edição 5.2) ===== */
.phone-preview-wrap::after,
body.theme-mainpage .phone-preview-wrap::after {
  content: none !important;
  display: none !important;
}
body.theme-mainpage .mode-button {
  transition: background .22s ease, box-shadow .22s ease, border-color .22s ease, transform .22s ease, opacity .22s ease;
}
body.theme-mainpage .mode-button.active {
  background: #ffffff !important;
  border-color: #c9ddf3 !important;
  box-shadow: 0 16px 28px rgba(31,142,241,.12), 0 8px 18px rgba(15,23,42,.05) !important;
  transform: translateY(-1px);
}
body.theme-mainpage .mode-button.active::before {
  background: linear-gradient(90deg, #1f8ef1 0%, #63b4ff 100%) !important;
}
body.theme-mainpage .mode-button.active strong {
  color: #0f172a !important;
}
body.theme-mainpage .mode-button.active small {
  color: #1f8ef1 !important;
  font-weight: 700;
}
body.theme-mainpage .mode-button.active .mode-icon {
  background: #edf6ff !important;
  border-color: #c9def6 !important;
  color: #1f8ef1 !important;
  box-shadow: 0 6px 14px rgba(31,142,241,.10);
}
body.theme-mainpage .mode-button:not(.active) {
  opacity: .78;
}
body.theme-mainpage .mode-button:not(.active):hover {
  opacity: .96;
}
.phone-loading-state {
  justify-content: center;
  align-items: center;
  text-align: center;
}
.phone-boot-logo {
  width: 92px;
  height: 92px;
  border-radius: 28px;
  display: grid;
  place-items: center;
  margin: 0 auto 18px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.16), rgba(255,255,255,.04)), linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 18px 36px rgba(0,0,0,.26), 0 0 34px rgba(31,142,241,.18);
  animation: phoneBootPulse 2.2s ease-in-out infinite;
}
.phone-boot-logo img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.22));
}
.phone-loading-row {
  justify-content: center;
}
.phone-loading-state p {
  max-width: 220px;
  margin-left: auto;
  margin-right: auto;
}
.phone-loading-skeleton {
  width: 82%;
  margin-left: auto;
  margin-right: auto;
}
@keyframes phoneBootPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 18px 36px rgba(0,0,0,.26), 0 0 22px rgba(31,142,241,.12); }
  50% { transform: scale(1.03); box-shadow: 0 0 0 1px rgba(255,255,255,.10), 0 22px 40px rgba(0,0,0,.30), 0 0 42px rgba(31,142,241,.22); }
}


/* ===== Boot premium do smartphone (Edição 5.3) ===== */
.phone-loading-state {
  justify-content: center;
  align-items: center;
  text-align: center;
}
.phone-loading-state .phone-loading-row,
.phone-loading-state .phone-loading-spinner,
.phone-loading-state .phone-loading-skeleton,
.phone-loading-state .phone-boot-logo,
.phone-loading-state p {
  display: none !important;
}
.phone-boot-sequence {
  position: relative;
  width: 100%;
  min-height: 288px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 8px 4px;
}
.phone-boot-sequence::before,
.phone-boot-sequence::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.phone-boot-sequence::before {
  width: 168px;
  height: 168px;
  background: radial-gradient(circle, rgba(40,120,255,.20) 0%, rgba(40,120,255,.08) 32%, rgba(40,120,255,0) 70%);
  filter: blur(10px);
  animation: bootAura 2.8s ease-in-out infinite;
}
.phone-boot-sequence::after {
  width: 206px;
  height: 206px;
  border: 1px solid rgba(96,150,255,.12);
  box-shadow: inset 0 0 18px rgba(96,150,255,.05);
  animation: bootRing 3.6s linear infinite;
}
.phone-boot-core {
  position: relative;
  width: 124px;
  height: 124px;
  border-radius: 34px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  box-shadow: 0 20px 42px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.12), 0 0 0 1px rgba(255,255,255,.05);
  backdrop-filter: blur(10px);
}
.phone-boot-core::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(7,12,20,.96), rgba(19,27,43,.96));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.phone-boot-core::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 35px;
  background: linear-gradient(135deg, rgba(117,177,255,.45), rgba(91,129,255,0) 30%, rgba(91,129,255,0) 70%, rgba(117,177,255,.26));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 1px;
  opacity: .65;
}
.phone-boot-logo-frame {
  position: relative;
  z-index: 1;
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(243,246,252,.94));
  box-shadow: 0 14px 28px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,1), 0 0 24px rgba(84,144,255,.12);
}
.phone-boot-logo-frame img {
  width: 52px;
  height: 52px;
  object-fit: contain;
}
.phone-boot-brand {
  margin-top: 10px;
  color: #f7fbff;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: .26em;
}
.phone-boot-subtitle {
  color: #98a8bc;
  font-size: .76rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.phone-boot-progress {
  width: 86%;
  max-width: 208px;
  height: 8px;
  margin-top: 8px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  overflow: hidden;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.06), inset 0 -1px 1px rgba(0,0,0,.26);
}
.phone-boot-progress span {
  display: block;
  width: 48%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2b87ff, #63b6ff 55%, #cde4ff);
  box-shadow: 0 0 16px rgba(53,136,255,.36);
  animation: bootProgress 2.4s ease-in-out infinite;
}
.phone-boot-status {
  color: #c8d4e4;
  font-size: .78rem;
  line-height: 1.45;
  max-width: 220px;
}
.phone-boot-pulses {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}
.phone-boot-pulses i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #76b6ff;
  box-shadow: 0 0 10px rgba(118,182,255,.38);
  animation: bootDots 1.1s infinite ease-in-out;
}
.phone-boot-pulses i:nth-child(2) { animation-delay: .14s; }
.phone-boot-pulses i:nth-child(3) { animation-delay: .28s; }
@keyframes bootAura {
  0%,100% { transform: scale(.94); opacity: .72; }
  50% { transform: scale(1.06); opacity: 1; }
}
@keyframes bootRing {
  from { transform: scale(.92); opacity: .24; }
  50% { opacity: .42; }
  to { transform: scale(1.04); opacity: .12; }
}
@keyframes bootProgress {
  0% { width: 22%; opacity: .85; }
  55% { width: 74%; opacity: 1; }
  100% { width: 48%; opacity: .92; }
}
@keyframes bootDots {
  0%,80%,100% { transform: scale(.75); opacity: .45; }
  40% { transform: scale(1.18); opacity: 1; }
}


/* ===== Ajuste logo boot sem fundo branco (Edição 5.4) ===== */
.phone-boot-logo-frame {
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.12), rgba(255,255,255,.04) 52%, rgba(255,255,255,.02) 100%);
  box-shadow: 0 14px 28px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.18), 0 0 24px rgba(84,144,255,.12);
}
.phone-boot-logo-frame img {
  width: 58px;
  height: 58px;
  object-fit: contain;
  filter: drop-shadow(0 5px 12px rgba(0,0,0,.18));
}


/* ===== Ajuste final boot + remoção de título lateral (Edição 5.5) ===== */
.phone-preview-wrap::before,
body.theme-mainpage .phone-preview-wrap::before {
  content: none !important;
  display: none !important;
}
.phone-preview-wrap,
body.theme-mainpage .phone-preview-wrap {
  padding-top: 28px !important;
}
.phone-boot-sequence::before {
  width: 188px;
  height: 188px;
  background: radial-gradient(circle, rgba(40,120,255,.18) 0%, rgba(40,120,255,.07) 34%, rgba(40,120,255,0) 72%);
}
.phone-boot-sequence::after {
  width: 210px;
  height: 210px;
  border: 1px solid rgba(96,150,255,.10);
}
.phone-boot-core {
  width: 134px;
  height: 134px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, rgba(255,255,255,.12), rgba(255,255,255,.03) 55%, rgba(255,255,255,.02) 100%);
  box-shadow: 0 22px 44px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.10), 0 0 0 1px rgba(255,255,255,.04);
}
.phone-boot-core::before {
  inset: 12px;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(7,12,20,.98), rgba(19,27,43,.98));
}
.phone-boot-core::after {
  inset: -2px;
  border-radius: 50%;
  padding: 2px;
  opacity: .58;
}
.phone-boot-logo-frame {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 28%, rgba(255,255,255,.98), rgba(245,248,253,.94) 60%, rgba(235,241,248,.92) 100%);
  box-shadow: 0 16px 28px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,1), 0 0 18px rgba(84,144,255,.10);
}
.phone-boot-logo-frame img {
  width: 54px;
  height: 54px;
  border-radius: 50%;
}
.phone-boot-brand {
  margin-top: 14px;
  letter-spacing: .24em;
}
.phone-boot-subtitle {
  max-width: 220px;
  line-height: 1.35;
}