:root {
  --ink: #111111;
  --muted: #666666;
  --paper: #f7f7f7;
  --card: #ffffff;
  --card-alt: #eeeeee;
  --line: #d1d1d1;
  --accent: #c89a00;
  --accent-strong: #9d7900;
  --accent-soft: #fff3bd;
  --accent-contrast: #050505;
  --red: #a13a32;
  --shadow: 0 16px 42px rgba(5, 5, 5, .1);
}
html[data-theme="dark"] {
  --ink: #f7f7f7;
  --muted: #a9a9a9;
  --paper: #050505;
  --card: #111111;
  --card-alt: #191919;
  --line: #303030;
  --accent: #ffc400;
  --accent-strong: #ffd84d;
  --accent-soft: #2c2400;
  --accent-contrast: #050505;
  --red: #ff746b;
  --shadow: 0 18px 48px rgba(0, 0, 0, .34);
  color-scheme: dark;
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: Inter, system-ui, -apple-system, Segoe UI, sans-serif; background-image: radial-gradient(circle at 50% -20%, rgba(255,196,0,.08), transparent 35%), linear-gradient(rgba(255,196,0,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,196,0,.025) 1px, transparent 1px); background-size: auto, 32px 32px, 32px 32px; }
button, input, select { font: inherit; }
button { cursor: pointer; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 0; font-family: "Arial Black", "Segoe UI", sans-serif; font-size: clamp(1.45rem, 4vw, 2.1rem); letter-spacing: -.045em; text-transform: uppercase; }
h2 { margin-bottom: .4rem; font-family: Georgia, serif; font-size: 1.45rem; letter-spacing: -.015em; }
.eyebrow { margin-bottom: .28rem; color: var(--accent); font-size: .68rem; font-weight: 900; letter-spacing: .15em; }
.muted { color: var(--muted); }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .75rem max(1rem, calc((100vw - 1100px) / 2)); background: linear-gradient(110deg, color-mix(in srgb, var(--card) 96%, transparent), color-mix(in srgb, var(--paper) 92%, transparent)); border-bottom: 1px solid var(--line); box-shadow: inset 0 -3px var(--accent); }
.brand-lockup { display: flex; align-items: center; gap: .8rem; min-width: 0; }
.brand-logo { width: 72px; height: 72px; object-fit: contain; flex: 0 0 auto; filter: drop-shadow(0 5px 12px rgba(0,0,0,.28)); }
.brand-tagline { margin: .16rem 0 0; color: var(--accent); font-size: .72rem; font-weight: 750; letter-spacing: .035em; }
.user { display: flex; align-items: center; gap: .65rem; font-size: .9rem; font-weight: 700; }
.tabs { position: sticky; top: 0; z-index: 5; display: flex; justify-content: center; gap: .25rem; padding: .6rem 1rem; background: color-mix(in srgb, var(--paper) 94%, transparent); border-bottom: 1px solid var(--line); backdrop-filter: blur(10px); }
.tabs button { padding: .65rem .9rem; border: 0; border-radius: 999px; color: var(--muted); background: transparent; font-weight: 700; }
.tabs button.active { color: var(--accent-contrast); background: var(--accent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 75%, white), 0 6px 18px rgba(255,196,0,.18); }
main { width: min(1100px, calc(100% - 2rem)); margin: 1.2rem auto 4rem; }
.tab { display: none; }
.tab.active { display: block; }
.panel { padding: clamp(1rem, 3vw, 1.6rem); background: linear-gradient(145deg, var(--card), color-mix(in srgb, var(--card) 94%, var(--accent))); border: 1px solid color-mix(in srgb, var(--line) 82%, var(--accent)); border-radius: 18px; box-shadow: var(--shadow); }
.search-grid { display: grid; gap: 1rem; max-width: 760px; margin: 0 auto; }
.section-title, .results-head { display: flex; justify-content: space-between; align-items: end; gap: 1rem; margin: 1.8rem 0 1rem; }
label, legend { color: var(--ink); font-size: .82rem; font-weight: 750; }
.field-help { display: block; margin-top: .38rem; color: var(--muted); font-size: .72rem; font-weight: 500; }
input, select { width: 100%; margin-top: .38rem; padding: .82rem .9rem; color: var(--ink); background: color-mix(in srgb, var(--card) 75%, var(--paper)); border: 1px solid var(--line); border-radius: 10px; outline: none; }
input:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255,196,0,.16); }
fieldset { padding: 0; border: 0; }
.checks { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: .55rem; }
.state-presets { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .55rem; }
.state-presets button { padding: .45rem .62rem; color: var(--muted); background: var(--card-alt); border: 1px solid var(--line); border-radius: 999px; font-size: .7rem; font-weight: 800; }
.state-presets button.active { color: var(--accent-contrast); background: var(--accent); border-color: var(--accent); }
.state-checks { max-height: 175px; overflow-y: auto; padding: .2rem .15rem .35rem; scrollbar-width: thin; }
.check { display: flex; align-items: center; gap: .35rem; padding: .58rem .72rem; background: color-mix(in srgb, var(--card) 80%, var(--paper)); border: 1px solid var(--line); border-radius: 10px; }
.check input { width: auto; margin: 0; accent-color: var(--accent); }
.check.disabled { color: var(--muted); opacity: .68; cursor: not-allowed; }
.source-connection { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-top: .65rem; padding: .7rem .8rem; background: var(--card-alt); border: 1px solid var(--line); border-radius: 10px; }
.source-connection.connected { border-color: color-mix(in srgb, #28b875 55%, var(--line)); }
.source-connection strong { font-size: .78rem; }
.source-connection p { margin: .18rem 0 0; font-size: .72rem; font-weight: 500; }
.source-connection .ghost { flex: 0 0 auto; }
.two-cols { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.primary, .secondary, .ghost { padding: .82rem 1rem; border-radius: 10px; border: 0; font-weight: 800; }
.primary { color: var(--accent-contrast); background: var(--accent); box-shadow: 0 6px 18px rgba(255,196,0,.16); }
.primary:hover { background: var(--accent-strong); }
.secondary { color: var(--accent-contrast); background: var(--accent); }
.ghost { padding: .5rem .65rem; color: var(--accent); background: transparent; border: 1px solid var(--line); }
.ghost:hover { border-color: var(--accent); background: var(--accent-soft); }
.full { width: 100%; }
.status-panel { max-width: 760px; margin: 1rem auto; }
.status-line { display: flex; justify-content: space-between; }
.progress { height: 10px; margin: .8rem 0; overflow: hidden; background: var(--card-alt); border-radius: 999px; }
.progress span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-strong)); transition: width .35s ease; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(285px, 1fr)); gap: .85rem; }
.load-more { display: grid; justify-items: center; gap: .55rem; margin: 1rem 0; }
.load-more[hidden] { display: none; }
.load-more p { margin: 0; font-size: .78rem; }
.load-more .ghost { min-width: 210px; }
.source-status { display: flex; flex-wrap: wrap; gap: .55rem; margin: 0 0 1rem; }
.source-pill { padding: .55rem .7rem; border: 1px solid var(--line); border-radius: 10px; background: var(--card); font-size: .78rem; }
.source-pill.ok { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); background: var(--accent-soft); }
.source-pill.error { color: var(--red); border-color: #deb4b0; background: #f7e9e7; }
.source-pill.bloqueada { color: var(--red); border-color: color-mix(in srgb, var(--red) 55%, var(--line)); background: color-mix(in srgb, var(--red) 10%, var(--card)); }
.source-pill small { display: block; margin-top: .2rem; color: inherit; opacity: .8; }
.result-tabs, .radar-tabs { display: flex; flex-wrap: wrap; gap: .55rem; margin: .3rem 0 .5rem; }
.result-tabs button, .radar-tabs button { padding: .68rem .85rem; color: var(--muted); background: var(--card); border: 1px solid var(--line); border-radius: 999px; font-weight: 800; }
.result-tabs button span, .radar-tabs button span { display: inline-grid; min-width: 1.6rem; margin-left: .25rem; padding: .12rem .35rem; place-items: center; color: var(--ink); background: var(--card-alt); border-radius: 999px; }
.result-tabs button.active, .radar-tabs button.active { color: var(--accent-contrast); background: var(--accent); border-color: var(--accent); }
.result-tabs button.active span, .radar-tabs button.active span { color: var(--accent-contrast); background: rgba(255,255,255,.38); }
.category-note { margin: 0 0 1rem; color: var(--muted); font-size: .78rem; }
.radar-tools { display: grid; grid-template-columns: repeat(5, minmax(130px, 1fr)); gap: .8rem; margin-bottom: 1rem; padding: 1rem; }
.radar-actions { display: flex; grid-column: 1 / -1; gap: .6rem; }
.radar-actions .secondary { flex: 1; }
.radar-filter-count { align-self: center; grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: .78rem; font-weight: 750; }
.vehicle-card { display: flex; flex-direction: column; padding: 1rem; background: var(--card); border: 1px solid var(--line); border-radius: 15px; box-shadow: 0 8px 24px rgba(28, 43, 35, .05); }
.vehicle-card.manual-review { border-color: color-mix(in srgb, var(--red) 45%, var(--line)); }
.vehicle-card.strong-fipe { border-color: #28b875; box-shadow: 0 0 0 1px rgba(40,184,117,.24), 0 10px 28px rgba(40,184,117,.12); animation: oportunidade-real 2.8s ease-in-out infinite; }
.card-top { display: flex; justify-content: space-between; gap: .6rem; }
.source { color: var(--accent); font-size: .7rem; font-weight: 850; letter-spacing: .08em; }
.score { max-width: 58%; padding: .3rem .5rem; color: var(--accent); background: var(--accent-soft); border-radius: 999px; font-size: .72rem; font-weight: 800; line-height: 1.25; text-align: right; }
.logistics-badge { align-self: flex-start; margin-top: .55rem; padding: .28rem .52rem; border: 1px solid var(--line); border-radius: 999px; font-size: .7rem; font-weight: 850; }
.logistics-badge.base { color: #1f8f5f; border-color: color-mix(in srgb, #28b875 55%, var(--line)); background: color-mix(in srgb, #28b875 12%, var(--card)); }
.logistics-badge.norte { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); background: var(--accent-soft); }
.logistics-badge.nacional { color: var(--muted); background: var(--card-alt); }
.vehicle-card h3 { margin: .65rem 0; font-size: 1rem; line-height: 1.35; }
.price { margin: 0 0 .5rem; font-family: Georgia, serif; font-size: 1.45rem; font-weight: 800; }
.facts { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .7rem; color: var(--muted); font-size: .8rem; }
.facts span { padding: .25rem .42rem; background: var(--card-alt); border-radius: 6px; }
.comparison { min-height: 2.5rem; color: var(--muted); font-size: .78rem; }
.fipe-box { display: grid; gap: .2rem; margin: .15rem 0 .65rem; padding: .65rem .7rem; background: var(--card-alt); border-left: 3px solid var(--accent); border-radius: 8px; font-size: .78rem; }
.fipe-box strong { color: var(--accent); font-size: .86rem; }
.strong-fipe .fipe-box { border-left-color: #28b875; }
.strong-fipe .fipe-box strong { color: #28b875; }
.fipe-box small { color: var(--muted); }
.price-history { display: grid; gap: .18rem; margin: 0 0 .65rem; padding: .58rem .68rem; background: var(--card-alt); border-left: 3px solid var(--line); border-radius: 8px; font-size: .74rem; }
.price-history strong { color: var(--muted); }
.price-history small { color: var(--muted); }
.price-history.price-drop { border-left-color: #28b875; background: color-mix(in srgb, #28b875 9%, var(--card)); }
.price-history.price-drop strong { color: #28b875; }
.indicators { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0 0 .65rem; }
.indicators span { padding: .25rem .42rem; color: var(--muted); background: var(--card-alt); border-radius: 6px; font-size: .7rem; }
.review-reasons { margin: 0 0 .75rem; padding: .65rem .7rem .65rem 1.7rem; color: var(--red); background: color-mix(in srgb, var(--red) 10%, var(--card)); border-radius: 8px; font-size: .76rem; }
.empty-results { grid-column: 1 / -1; color: var(--muted); text-align: center; }
.vehicle-card a { margin-top: auto; padding: .7rem; color: var(--accent-contrast); background: var(--accent); border-radius: 9px; text-align: center; text-decoration: none; font-weight: 800; }
.card-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: auto; }
.card-actions a, .card-actions button { margin: 0; padding: .7rem; border: 0; border-radius: 9px; font-weight: 800; text-align: center; }
.card-actions button { color: var(--accent); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--line)); }
.history-list { display: grid; gap: .65rem; }
.history-item { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem; background: var(--card); border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.history-item strong { text-transform: capitalize; }
.analytics { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.monitoring-panel { margin-top: 1rem; }
.monitoring-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem; }
.monitoring-list { display: grid; gap: .5rem; margin-top: .55rem; }
.monitoring-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .65rem; padding: .7rem; background: var(--card-alt); border: 1px solid var(--line); border-radius: 10px; }
.monitoring-item h3 { margin: .25rem 0; font-size: .8rem; line-height: 1.3; }
.monitoring-item p, .monitoring-item small { margin: 0; color: var(--muted); font-size: .68rem; }
.monitoring-price { display: grid; align-content: start; justify-items: end; gap: .18rem; white-space: nowrap; }
.monitoring-price span { color: var(--muted); font-size: .7rem; font-weight: 800; }
.monitoring-price .drop { color: #28b875; }
.monitoring-price .rise { color: var(--red); }
.monitoring-price a { color: var(--accent); font-size: .7rem; font-weight: 800; }
.funnel-summary { display: flex; flex-wrap: wrap; gap: .55rem; margin-bottom: 1rem; }
.funnel-summary span { padding: .55rem .7rem; border: 1px solid var(--line); border-radius: 999px; background: var(--card); font-size: .78rem; text-transform: capitalize; }
.funnel-list { display: grid; gap: .8rem; }
.funnel-group { overflow: hidden; background: color-mix(in srgb, var(--card) 94%, var(--paper)); border: 1px solid var(--line); border-radius: 15px; }
.funnel-group summary { display: flex; justify-content: space-between; align-items: center; padding: .85rem 1rem; color: var(--ink); cursor: pointer; font-weight: 850; text-transform: uppercase; letter-spacing: .04em; }
.funnel-group summary b { display: inline-grid; min-width: 1.8rem; padding: .2rem .45rem; place-items: center; color: var(--accent-contrast); background: var(--accent); border-radius: 999px; }
.funnel-group-list { display: grid; gap: .8rem; padding: 0 .8rem .8rem; }
.funnel-group-list > .muted { margin: .2rem; }
.funnel-item { display: grid; grid-template-columns: minmax(220px, 1.2fr) minmax(150px, .55fr) minmax(220px, 1fr); gap: .8rem; padding: 1rem; background: var(--card); border: 1px solid var(--line); border-radius: 14px; }
.funnel-pipeline { display: flex; grid-column: 1 / -1; gap: .25rem; overflow-x: auto; padding-bottom: .35rem; scrollbar-width: thin; }
.funnel-pipeline span { flex: 1 0 96px; padding: .48rem .55rem; color: var(--muted); background: var(--card-alt); border: 1px solid var(--line); border-radius: 999px; font-size: .66rem; font-weight: 800; text-align: center; }
.funnel-pipeline span.done { color: #28b875; border-color: color-mix(in srgb, #28b875 50%, var(--line)); }
.funnel-pipeline span.current { color: var(--accent-contrast); background: var(--accent); border-color: var(--accent); }
.funnel-pipeline.discarded span { color: white; background: var(--red); border-color: var(--red); }
.funnel-move-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; margin-top: .65rem; }
.funnel-move-buttons:has(> :only-child) { grid-template-columns: 1fr; }
.funnel-item h3 { margin: 0 0 .35rem; font-size: .95rem; }
.funnel-item .price { font-size: 1.1rem; }
.funnel-edit { display: grid; gap: .5rem; }
.funnel-buttons { display: grid; grid-template-columns: 1fr auto; gap: .5rem; }
.safety-checklist { display: grid; gap: .45rem; margin-top: .35rem; padding: .75rem; border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line)); border-radius: 10px; background: var(--accent-soft); }
.safety-checklist[hidden] { display: none; }
.safety-checklist legend { padding: 0 .3rem; color: var(--accent); font-size: .78rem; }
.safety-checklist p { margin: 0 0 .15rem; color: var(--muted); font-size: .72rem; }
.safety-check { display: flex; align-items: flex-start; gap: .45rem; font-size: .75rem; line-height: 1.3; }
.safety-check input { width: auto; margin: .1rem 0 0; accent-color: var(--accent); }
.ghost.danger { color: var(--red); }
.ghost.danger.confirming { color: white; background: var(--red); border-color: var(--red); }
.funnel-edit textarea { width: 100%; min-height: 68px; padding: .65rem; color: var(--ink); background: color-mix(in srgb, var(--card) 75%, var(--paper)); border: 1px solid var(--line); border-radius: 9px; resize: vertical; }
.funnel-meta { color: var(--muted); font-size: .75rem; }
.rank-list { margin: .4rem 0 0; padding: 0; list-style: none; }
.rank-list li { display: flex; justify-content: space-between; padding: .45rem 0; border-bottom: 1px solid var(--line); text-transform: capitalize; }
.fallback { display: block; margin: 1.2rem auto; color: var(--accent); text-align: center; font-weight: 750; }
.notice { padding: .8rem; color: var(--accent); background: var(--accent-soft); border-radius: 10px; }
.error { color: var(--red); }
.toast { position: fixed; right: 1rem; bottom: 1rem; z-index: 10; max-width: 320px; padding: .9rem 1rem; color: white; background: var(--ink); border-radius: 10px; box-shadow: var(--shadow); }
.timestamp-note { margin: .3rem 0 0; color: var(--muted); font-size: .72rem; }
.login-page { display: grid; min-height: 100vh; place-items: center; padding: 1rem; background: radial-gradient(circle at 50% 12%, rgba(255,196,0,.2), transparent 27%), linear-gradient(135deg, #050505, #111111 60%, #050505); }
.login-card { width: min(410px, 100%); padding: 1.6rem 2rem 2rem; overflow: hidden; background: linear-gradient(155deg, #151515, #090909); border: 1px solid #333333; border-top-color: var(--accent); border-radius: 20px; box-shadow: 0 24px 70px rgba(0,0,0,.5); text-align: center; }
.login-logo { display: block; width: min(210px, 70%); height: auto; margin: -.35rem auto .4rem; filter: drop-shadow(0 10px 22px rgba(0,0,0,.45)); }
.login-tagline { margin: .55rem auto 0; color: var(--accent); font-family: Georgia, serif; font-size: 1rem; font-weight: 700; letter-spacing: .025em; }
.login-card form { display: grid; gap: 1rem; margin-top: 1.5rem; }
.login-card label { text-align: left; }
.password-field { position: relative; display: block; }
.password-field input { padding-right: 5.2rem; }
.password-toggle { position: absolute; right: .45rem; bottom: .42rem; padding: .42rem .55rem; color: var(--accent); background: transparent; border: 0; border-radius: 7px; font-size: .72rem; font-weight: 800; }
.password-toggle:hover, .password-toggle:focus-visible { background: var(--accent-soft); outline: none; }
.login-status { margin: 1rem 0 0; color: var(--muted); font-size: .68rem; letter-spacing: .025em; }
@keyframes oportunidade-real {
  0%, 100% { box-shadow: 0 0 0 1px rgba(40,184,117,.2), 0 10px 28px rgba(40,184,117,.1); }
  50% { box-shadow: 0 0 0 2px rgba(40,184,117,.38), 0 12px 34px rgba(40,184,117,.18); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}
@media (max-width: 620px) {
  .topbar { align-items: flex-start; padding-top: .65rem; }
  .brand-logo { width: 56px; height: 56px; }
  .brand-tagline { display: none; }
  .user { flex-direction: column; align-items: flex-end; }
  .tabs { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs button { flex: 0 0 auto; }
  .two-cols, .analytics, .monitoring-grid { grid-template-columns: 1fr; }
  .results-head { align-items: stretch; flex-direction: column; }
  .results-head button { width: 100%; }
  .history-item { flex-direction: column; }
  .source-connection { align-items: stretch; flex-direction: column; }
  .source-connection .ghost { width: 100%; }
  .funnel-item { grid-template-columns: 1fr; }
  .funnel-pipeline { grid-column: 1; }
  .funnel-buttons { grid-template-columns: 1fr; }
  .radar-tools { grid-template-columns: 1fr 1fr; }
  .radar-actions { flex-direction: column; }
  .radar-actions button { width: 100%; }
}
