:root{
  --bg:#020504;
  --panel:#07120f;
  --panel2:#0b1b17;
  --text:#eefcf6;
  --muted:#9ab7ad;
  --yellow:#00ff7a;
  --yellow2:#00e5ff;
  --green:#00ff7a;
  --blue:#00e5ff;
  --orange:#f5b942;
  --red:#ff647c;
  --line:rgba(0,229,255,.22);
  --lineY:rgba(0,255,122,.25);
  --shadow:0 24px 80px rgba(0,0,0,.55);
  --radius:22px;
  --sidebar:268px;
  --sans:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',monospace;
}

html,body{background:#010403}
body{
  position:relative;
  font-family:var(--sans);
  background:
    radial-gradient(circle at 100% 0%,rgba(0,229,255,.08),transparent 32%),
    radial-gradient(circle at 0% 100%,rgba(0,255,122,.07),transparent 32%),
    #010403;
}

#matrixCanvas{
  position:fixed;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  pointer-events:none;
  background:#010403;
}
.matrix-overlay{
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(2,5,4,.30),rgba(2,5,4,.88)),
    radial-gradient(circle at top right,rgba(0,229,255,.12),transparent 34%),
    radial-gradient(circle at bottom left,rgba(0,255,122,.10),transparent 38%);
}
.login-view,.app{
  position:relative;
  z-index:2;
}

/* Pop-ups precisam ficar fora da camada do painel principal. */
#modalHost{
  position:fixed;
  inset:0;
  z-index:3000;
  pointer-events:none;
  isolation:isolate;
}
#modalHost:empty{display:none}
#modalHost .modal-backdrop{
  z-index:3000;
  pointer-events:auto;
}
#modalHost .modal{
  position:relative;
  z-index:1;
}
.toast-host{
  position:fixed;
  z-index:4000;
}
body.modal-open{overflow:hidden}

.eyebrow,
.nav-button,
.vehicle-tab,
.sync-indicator,
.badge,
.login-access,
.back-site-link{
  font-family:var(--mono);
}
.eyebrow{color:var(--green)}
.lead{color:#d4e8df}

.login-card{
  border-color:rgba(0,229,255,.24);
  background:linear-gradient(145deg,rgba(7,18,15,.97),rgba(10,27,22,.95));
  box-shadow:var(--shadow),inset 0 0 0 1px rgba(255,255,255,.025);
}
.login-card::before,
.card::before{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(135deg,rgba(0,229,255,.055),transparent 38%,rgba(0,255,122,.04));
}
.login-card{position:relative;overflow:hidden}
.login-card>*{position:relative;z-index:1}

.brand-symbol{
  color:#00140c;
  background:linear-gradient(135deg,var(--green),var(--blue));
  box-shadow:0 0 34px rgba(0,255,122,.22);
}
.system-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:0 0 12px;
  padding:7px 10px;
  color:var(--green);
  border:1px solid rgba(0,255,122,.25);
  border-radius:999px;
  background:rgba(0,255,122,.07);
  font:700 .66rem var(--mono);
  letter-spacing:.08em;
}
.system-pill span{
  width:7px;height:7px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 14px var(--green);
}

input,select,textarea{
  color:var(--text);
  border-color:rgba(0,229,255,.17);
  background:rgba(2,12,9,.86);
}
input:focus,select:focus,textarea:focus{
  border-color:rgba(0,255,122,.62);
  box-shadow:0 0 0 3px rgba(0,255,122,.07);
}
.field>span{color:#d8eee5}

.btn.primary{
  color:#00130b;
  background:linear-gradient(135deg,var(--green),var(--blue));
  box-shadow:0 10px 28px rgba(0,255,122,.14);
}
.btn.primary:hover{box-shadow:0 14px 34px rgba(0,255,122,.23)}
.btn.secondary,
.icon-button{
  color:var(--text);
  background:rgba(255,255,255,.045);
  border-color:rgba(0,229,255,.18);
}
.btn.ghost{border-color:rgba(0,255,122,.16)}

.sidebar{
  border-right-color:rgba(0,229,255,.18);
  background:linear-gradient(180deg,rgba(3,12,9,.97),rgba(5,18,14,.96));
  box-shadow:18px 0 55px rgba(0,0,0,.22);
}
.sidebar-brand strong{font-family:var(--mono);letter-spacing:.02em}
.nav-button{letter-spacing:.015em}
.nav-button:hover,.nav-button.active{
  color:var(--green);
  background:linear-gradient(90deg,rgba(0,255,122,.11),rgba(0,229,255,.05));
  box-shadow:inset 3px 0 0 var(--green);
}
.sidebar-user{border-top-color:rgba(0,229,255,.17)}
.back-site-link{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  color:var(--muted);
  border:1px solid rgba(0,229,255,.15);
  border-radius:11px;
  text-decoration:none;
  font-size:.67rem;
  letter-spacing:.08em;
  transition:.2s ease;
}
.back-site-link:hover{
  color:var(--green);
  border-color:rgba(0,255,122,.30);
  background:rgba(0,255,122,.05);
}

.topbar{
  border-bottom-color:rgba(0,229,255,.17);
  background:rgba(2,8,6,.84);
}
.topbar h2{letter-spacing:-.025em}
.sync-indicator{
  border-color:rgba(0,229,255,.18);
  background:rgba(0,229,255,.035);
}
.sync-indicator.ok{color:var(--green)}
.sync-indicator.running{color:var(--blue)}

.card{
  position:relative;
  overflow:hidden;
  border-color:rgba(0,229,255,.18);
  background:linear-gradient(145deg,rgba(7,18,15,.95),rgba(10,25,21,.92));
  box-shadow:0 18px 55px rgba(0,0,0,.32),inset 0 0 0 1px rgba(255,255,255,.018);
}
.card>*{position:relative;z-index:1}
.card-head h3,.card h3{color:#f2fff9}
.stat-card strong{
  background:linear-gradient(90deg,#fff,var(--green));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.data-item,
.document-row,
.history-row,
.log-row{
  border-color:rgba(0,229,255,.13);
  background:rgba(0,229,255,.025);
}
.data-item span{color:#82aaa0}

.vehicle-card .plate,.vehicle-header .plate{color:var(--green)}
.vehicle-tab.active,.vehicle-tab:hover{
  color:var(--green);
  background:linear-gradient(90deg,rgba(0,255,122,.10),rgba(0,229,255,.04));
}
.vehicle-menu{border-color:rgba(0,229,255,.18)}

.progress,.bar-track{background:#03100c}
.progress>span,.bar-track i{
  background:linear-gradient(90deg,var(--green),var(--blue));
  box-shadow:0 0 16px rgba(0,255,122,.34);
}

.total-panel{
  border-color:rgba(0,255,122,.25);
  background:linear-gradient(90deg,rgba(0,255,122,.08),rgba(0,229,255,.04));
}
.total-panel strong{color:var(--green)}

.badge.stock{color:#8dffc1;background:rgba(0,255,122,.08);border-color:rgba(0,255,122,.18)}
.badge.sold{color:#9af4ff;background:rgba(0,229,255,.08);border-color:rgba(0,229,255,.18)}
.badge.pending{color:#ffe19a;background:rgba(245,185,66,.09)}
.badge.canceled{color:#ffacb8;background:rgba(255,100,124,.09)}

table tr:hover td{background:rgba(0,229,255,.025)}
th{color:#b9ddd2;font-family:var(--mono)}
.raw-code{border-color:rgba(0,229,255,.18);background:#010806;color:#cfe9df}
.empty-state{border-color:rgba(0,229,255,.18)}

.modal{
  border-color:rgba(0,229,255,.22);
  background:linear-gradient(145deg,#06130f,#091c17);
}
.modal-backdrop{background:rgba(0,5,3,.78)}
.toast{background:#071510;border-color:rgba(0,229,255,.20)}

.qr-box{border-color:rgba(0,229,255,.22)}
.pix-key{
  color:var(--green);
  border-color:rgba(0,255,122,.25);
  background:rgba(0,255,122,.06);
}

@media(max-width:850px){
  .sidebar{background:rgba(3,12,9,.98)}
}


.desktop-only-view{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:24px;
}
.desktop-only-card{
  width:min(520px,100%);
  padding:30px;
  border:1px solid rgba(0,229,255,.24);
  border-radius:26px;
  background:linear-gradient(145deg,rgba(7,18,15,.97),rgba(10,27,22,.96));
  box-shadow:0 24px 80px rgba(0,0,0,.55);
  text-align:center;
}
.desktop-only-card .brand-symbol{margin:0 auto 18px}
.desktop-only-card h1{margin:0 0 12px;font-size:1.6rem}
.desktop-only-card p:not(.eyebrow){
  margin:0 auto 20px;
  max-width:430px;
  color:#b8d2c8;
  line-height:1.6;
}
body.desktop-access-blocked{
  overflow:hidden;
}
body.desktop-access-blocked #matrixCanvas{
  opacity:.45;
}

.fixed-source-url,
.fixed-url-box{
  font-family:var(--mono, "JetBrains Mono", monospace);
  word-break:break-all;
}
.fixed-url-box{
  margin-top:14px;
  padding:13px 14px;
  border:1px solid rgba(0,229,255,.2);
  border-radius:14px;
  background:rgba(0,0,0,.28);
  color:#bfffe0;
  font-size:.76rem;
  line-height:1.55;
}
.source-rule-list{display:grid;gap:10px}
.source-rule-row{
  display:grid;
  gap:5px;
  padding:14px;
  border:1px solid rgba(0,229,255,.16);
  border-radius:15px;
  background:rgba(0,0,0,.2);
}
.source-rule-row strong{color:#00ff7a;font-size:.82rem}
.source-rule-row span{color:#a8c3ba;font-size:.78rem;line-height:1.55}
.stock-card{overflow:hidden}
.stock-photo{
  height:185px;
  margin:-18px -18px 16px;
  overflow:hidden;
  background:#020806;
  border-bottom:1px solid rgba(0,229,255,.15);
}
.stock-photo img{width:100%;height:100%;display:block;object-fit:cover}
.stock-source-card{position:relative;overflow:hidden}
.stock-source-card::after{
  content:"";
  position:absolute;
  width:180px;height:180px;
  right:-80px;top:-80px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(0,255,122,.13),transparent 70%);
  pointer-events:none;
}


/* V7.2 — correção do menu individual e das camadas da interface */
.vehicle-layout{
  position:relative;
  align-items:start;
  isolation:isolate;
}
.vehicle-menu{
  z-index:5;
  width:100%;
  min-width:0;
  background:linear-gradient(145deg,rgba(5,20,15,.99),rgba(7,27,21,.98));
  box-shadow:0 18px 48px rgba(0,0,0,.36),inset 0 0 0 1px rgba(255,255,255,.018);
}
#vehicleTabContent{
  position:relative;
  z-index:1;
  min-width:0;
  width:100%;
}
#vehicleTabContent > :first-child{margin-top:0}
.modal-backdrop{
  overscroll-behavior:contain;
}
.modal{
  overscroll-behavior:contain;
}
@media(max-width:1040px){
  .vehicle-menu{
    z-index:1;
    background:linear-gradient(145deg,rgba(5,20,15,.98),rgba(7,27,21,.97));
  }
}