/* ============================================================
   AGENDA CNH — design system
   Linguagem visual: sinalização viária brasileira.
   Verde de placa rodoviária, amarelo de faixa central,
   "placas" com borda grossa, linha tracejada como assinatura.
   ============================================================ */
:root{
  --asfalto:#101411;
  --asfalto-2:#1B211C;
  --pista:#F1F3EE;
  --surface:#FFFFFF;
  --ink:#141A16;
  --muted:#5D6A61;
  --line:#DCE3DC;
  --verde:#0E7A52;
  --verde-escuro:#0A5C3E;
  --verde-suave:#E2F2EA;
  --faixa:#FFC400;
  --faixa-escura:#8A6A00;
  --faixa-suave:#FFF3CC;
  --vermelho:#D7263D;
  --vermelho-suave:#FBE3E7;
  --azul:#1F5FBF;
  --azul-suave:#E3ECFA;
  --radius:14px;
  --radius-sm:9px;
  --shadow:0 10px 30px rgba(16,20,17,.10);
  --shadow-soft:0 2px 10px rgba(16,20,17,.06);
  --font-display:"Archivo",system-ui,sans-serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--pista);color:var(--ink);
  font-family:var(--font-body);font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font:inherit;color:inherit}
img{max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:var(--font-display);line-height:1.15;margin:0}
h1{font-weight:850;font-size:clamp(22px,3vw,30px);letter-spacing:-.01em}
h2{font-weight:800;font-size:19px}
h3{font-weight:700;font-size:15px}
p{margin:0}
.muted{color:var(--muted)}
small{color:var(--muted)}
::selection{background:var(--faixa);color:var(--asfalto)}

:focus-visible{outline:3px solid var(--faixa);outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ---------- assinatura: faixa tracejada ---------- */
.faixa-divisoria{
  height:4px;border:0;margin:0;
  background-image:linear-gradient(90deg,var(--faixa) 0 38px,transparent 38px 62px);
  background-size:62px 4px;background-repeat:repeat-x;
}

/* ---------- placa (badge estilo placa de trânsito) ---------- */
.plate{
  display:inline-flex;align-items:center;gap:6px;
  border:2px solid var(--ink);border-radius:7px;background:var(--surface);
  font-family:var(--font-display);font-weight:800;font-size:12px;
  letter-spacing:.06em;text-transform:uppercase;
  padding:2px 9px;line-height:1.4;white-space:nowrap;
}
.plate.verde{border-color:var(--verde-escuro);background:var(--verde);color:#fff}
.plate.amarela{border-color:var(--ink);background:var(--faixa);color:var(--ink)}
.plate.vazada{background:transparent;border-color:currentColor}

.eyebrow{
  font-family:var(--font-display);font-weight:800;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--verde);
}

/* ============================================================
   TELA DE ENTRADA — escolha de pista (aluno / instrutor)
   ============================================================ */
#role-screen{
  min-height:100svh;display:flex;flex-direction:column;
  background:
    radial-gradient(1200px 500px at 50% -10%,rgba(14,122,82,.35),transparent 60%),
    var(--asfalto);
  color:#F4F6F2;
}
.role-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:22px clamp(18px,4vw,44px);
}
.brand{display:inline-flex;align-items:center;gap:12px;font-family:var(--font-display)}
.brand-plate{
  display:grid;place-items:center;width:54px;height:40px;
  border:3px solid #F4F6F2;border-radius:8px;background:var(--verde);
  font-weight:900;font-size:14px;letter-spacing:.05em;color:#fff;
  box-shadow:0 3px 0 rgba(0,0,0,.35);
}
.brand strong{font-weight:850;font-size:17px;letter-spacing:.01em}
.brand small{display:block;color:rgba(244,246,242,.6);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.role-hero{
  text-align:center;padding:clamp(14px,4vh,40px) 20px 8px;
}
.role-hero h1{
  font-size:clamp(30px,5.4vw,54px);font-weight:900;letter-spacing:-.015em;
  font-variation-settings:"wdth" 112;
  margin:0 auto;max-width:760px;
}
.role-hero h1 em{font-style:normal;color:var(--faixa)}
.role-hero p{margin:14px auto 0;max-width:560px;color:rgba(244,246,242,.72)}

.lanes{
  flex:1;display:grid;grid-template-columns:1fr 4px 1fr;gap:0;
  width:min(1060px,calc(100% - 36px));margin:30px auto 46px;align-items:stretch;
}
.lane-divider{
  background-image:linear-gradient(180deg,var(--faixa) 0 34px,transparent 34px 58px);
  background-size:4px 58px;background-repeat:repeat-y;border-radius:2px;
}
.lane{
  position:relative;display:flex;flex-direction:column;gap:14px;
  margin:0 clamp(14px,3vw,40px);padding:clamp(22px,3vw,34px);
  background:var(--asfalto-2);
  border:1px solid rgba(244,246,242,.12);border-radius:18px;
  text-align:left;cursor:pointer;color:inherit;
  transition:transform .18s ease,border-color .18s ease,background .18s ease;
}
.lane:hover{transform:translateY(-4px);border-color:var(--faixa);background:#20281F}
.lane .plate{margin-right:auto}
.lane h2{font-size:clamp(20px,2.4vw,26px);font-weight:850;color:#fff}
.lane p{color:rgba(244,246,242,.66);font-size:14px}
.lane ul{margin:4px 0 0;padding:0;list-style:none;display:grid;gap:7px;font-size:13.5px;color:rgba(244,246,242,.8)}
.lane li::before{content:"—";color:var(--faixa);margin-right:8px;font-weight:700}
.lane .lane-cta{
  margin-top:auto;display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-display);font-weight:800;font-size:14px;color:var(--faixa);
}
.role-footer{padding:0 20px 26px;text-align:center;color:rgba(244,246,242,.45);font-size:12.5px}
@media (max-width:760px){
  .lanes{grid-template-columns:1fr;gap:22px}
  .lane{margin:0}
  .lane-divider{height:4px;background-image:linear-gradient(90deg,var(--faixa) 0 34px,transparent 34px 58px);background-size:58px 4px;background-repeat:repeat-x}
}

/* ============================================================
   APP SHELL
   ============================================================ */
#app-root{display:none;min-height:100svh}
#app-root.active{display:grid;grid-template-columns:248px 1fr}
.sidebar{
  position:sticky;top:0;height:100svh;display:flex;flex-direction:column;gap:18px;
  background:var(--asfalto);color:#EDF1EB;padding:20px 16px;z-index:30;
}
.sidebar .brand-plate{width:46px;height:34px;font-size:12px;border-width:2.5px}
.sidebar-nav{display:flex;flex-direction:column;gap:4px;margin-top:6px}
.nav-item{
  display:flex;align-items:center;gap:11px;width:100%;
  background:none;border:0;border-radius:10px;padding:10px 12px;
  font-weight:600;font-size:14px;color:rgba(237,241,235,.72);
  cursor:pointer;text-align:left;position:relative;
  transition:background .15s ease,color .15s ease;
}
.nav-item svg{width:19px;height:19px;flex:none;stroke:currentColor}
.nav-item:hover{background:rgba(255,255,255,.07);color:#fff}
.nav-item.active{background:rgba(255,196,0,.13);color:var(--faixa)}
.nav-item.active::before{
  content:"";position:absolute;left:-16px;top:9px;bottom:9px;width:4px;
  background:var(--faixa);border-radius:0 4px 4px 0;
}
.sidebar-footer{margin-top:auto;display:grid;gap:10px}
.plan-card[hidden]{display:none}
.plan-card{
  border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:13px;
  background:rgba(255,255,255,.05);display:grid;gap:7px;font-size:12.5px;
}
.plan-card strong{font-family:var(--font-display);font-size:13.5px}
.plan-card .bar{height:6px;border-radius:99px;background:rgba(255,255,255,.14);overflow:hidden}
.plan-card .bar i{display:block;height:100%;background:var(--faixa);border-radius:99px}
.switch-role{
  background:none;border:1px solid rgba(255,255,255,.2);border-radius:10px;
  color:rgba(237,241,235,.8);padding:9px;font-size:12.5px;font-weight:600;cursor:pointer;
}
.switch-role:hover{border-color:var(--faixa);color:var(--faixa)}

.content-shell{display:flex;flex-direction:column;min-width:0}
.topbar{
  position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:14px;
  padding:14px clamp(16px,3vw,30px);
  background:rgba(241,243,238,.86);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.topbar-titles{min-width:0}
.topbar-actions{margin-left:auto;display:flex;gap:9px;flex-wrap:wrap;justify-content:flex-end}
.menu-button{display:none}
.main-view{padding:clamp(16px,3vw,30px);display:grid;gap:18px;align-content:start}

/* ---------- botões ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:10px;border:0;padding:10px 16px;cursor:pointer;
  font-weight:700;font-size:13.5px;font-family:var(--font-display);letter-spacing:.01em;
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--verde);color:#fff;box-shadow:0 2px 0 var(--verde-escuro)}
.btn-primary:hover{background:var(--verde-escuro)}
.btn-faixa{background:var(--faixa);color:var(--asfalto);box-shadow:0 2px 0 #C79A00}
.btn-faixa:hover{filter:brightness(1.05)}
.btn-ghost{background:transparent;border:1.5px solid var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--verde);color:var(--verde)}
.btn-danger{background:transparent;border:1.5px solid var(--vermelho);color:var(--vermelho)}
.btn-danger:hover{background:var(--vermelho-suave)}
.btn-sm{padding:6px 11px;font-size:12.5px;border-radius:8px}
.icon-btn{
  display:grid;place-items:center;width:34px;height:34px;border-radius:9px;
  border:1.5px solid var(--line);background:var(--surface);cursor:pointer;font-size:16px;
}
.icon-btn:hover{border-color:var(--verde);color:var(--verde)}

/* ---------- painéis e grids ---------- */
.panel{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-soft);
}
.panel.pad{padding:clamp(16px,2.4vw,22px)}
.section-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin-bottom:14px;
}
.grid{display:grid;gap:14px}
.cols-2{grid-template-columns:repeat(2,1fr)}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1100px){.cols-4{grid-template-columns:repeat(2,1fr)}.cols-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.cols-2,.cols-3,.cols-4{grid-template-columns:1fr}}
.split{display:grid;grid-template-columns:1.5fr 1fr;gap:18px;align-items:start}
@media (max-width:980px){.split{grid-template-columns:1fr}}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:10px}
.actions{display:flex;gap:8px;flex-wrap:wrap}

/* ---------- métricas ---------- */
.metric{
  position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:16px 18px;display:grid;gap:4px;overflow:hidden;
}
.metric::after{
  content:"";position:absolute;left:18px;right:18px;bottom:0;height:3px;
  background-image:linear-gradient(90deg,var(--faixa) 0 18px,transparent 18px 30px);
  background-size:30px 3px;background-repeat:repeat-x;opacity:.9;
}
.metric h3{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.metric strong{font-family:var(--font-display);font-weight:850;font-size:25px;letter-spacing:-.01em}
.metric small{font-size:12px}

/* ---------- formulários ---------- */
.field{display:grid;gap:6px}
.field label{font-size:12.5px;font-weight:600;color:var(--muted)}
.field input,.field select,.field textarea,
.toolbar input,.toolbar select{
  width:100%;border:1.5px solid var(--line);border-radius:10px;
  background:var(--surface);padding:10px 12px;font-size:14px;
  transition:border-color .12s ease;
}
.field textarea{min-height:90px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus,
.toolbar input:focus,.toolbar select:focus{border-color:var(--verde);outline:none}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.form-grid .full{grid-column:1/-1}
@media (max-width:640px){.form-grid{grid-template-columns:1fr}}
.cat-plate{
  display:grid;place-items:center;width:38px;height:32px;cursor:pointer;
  border:2px solid var(--line);border-radius:7px;background:var(--surface);
  font-family:var(--font-display);font-weight:850;font-size:14px;color:var(--muted);
  transition:all .12s ease;
}
.cat-plate.active{border-color:var(--ink);background:var(--faixa);color:var(--ink)}
.cat-plate input{display:none}
.cat-mini{
  display:inline-grid;place-items:center;min-width:24px;height:22px;padding:0 4px;
  border:1.5px solid var(--ink);border-radius:5px;background:var(--surface);
  font-family:var(--font-display);font-weight:800;font-size:11.5px;
}

/* ---------- listas de aula / aluno ---------- */
.lesson-item{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px 14px;
  background:var(--surface);
}
.lesson-time{
  display:grid;place-items:center;min-width:62px;padding:7px 6px;
  border:2px solid var(--ink);border-radius:8px;background:var(--surface);
  font-family:var(--font-display);font-weight:850;font-size:15px;line-height:1.1;
}
.lesson-time small{font-size:10px;font-weight:700;letter-spacing:.06em;color:var(--muted)}
.lesson-info{flex:1;min-width:170px;display:grid;gap:2px}
.lesson-info strong{font-size:14.5px}
.lesson-info small{font-size:12.5px}
.status{
  display:inline-flex;align-items:center;gap:6px;border-radius:99px;
  padding:3px 11px;font-size:11.5px;font-weight:700;letter-spacing:.03em;
}
.status::before{content:"";width:7px;height:7px;border-radius:99px;background:currentColor}
.status.scheduled{background:var(--azul-suave);color:var(--azul)}
.status.done{background:var(--verde-suave);color:var(--verde-escuro)}
.status.missed{background:var(--faixa-suave);color:var(--faixa-escura)}
.status.cancelled{background:var(--vermelho-suave);color:var(--vermelho)}
.pay-pill{
  border:1.5px solid var(--line);border-radius:99px;padding:4px 12px;
  font-size:11.5px;font-weight:700;background:var(--surface);cursor:pointer;
}
.pay-pill.paid{border-color:var(--verde);color:var(--verde-escuro);background:var(--verde-suave)}
.pay-pill.pending{border-color:var(--faixa-escura);color:var(--faixa-escura);background:var(--faixa-suave)}

.student-card{display:grid;gap:11px;padding:16px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.avatar{
  display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:12px;
  background:var(--verde-suave);color:var(--verde-escuro);
  font-family:var(--font-display);font-weight:850;font-size:15px;
}
.avatar.small{width:36px;height:36px;font-size:13px;border-radius:10px}
.progress{display:grid;gap:5px}
.progress .track{height:8px;border-radius:99px;background:var(--pista);border:1px solid var(--line);overflow:hidden}
.progress .fill{
  height:100%;border-radius:99px;background:
    repeating-linear-gradient(90deg,var(--faixa) 0 10px,#E8B400 10px 16px);
}
.progress small{display:flex;justify-content:space-between;font-size:11.5px}

/* ---------- tabela ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-sm)}
table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:680px}
th{
  text-align:left;padding:10px 13px;font-family:var(--font-display);font-weight:800;
  font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
  border-bottom:2px solid var(--line);background:#FAFBF8;
}
td{padding:11px 13px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:0}
.chip-filter{
  border:1.5px solid var(--line);background:var(--surface);border-radius:99px;
  padding:6px 14px;font-size:12.5px;font-weight:700;cursor:pointer;
}
.chip-filter.active{border-color:var(--ink);background:var(--ink);color:var(--faixa)}

/* ---------- agenda mensal ---------- */
.month-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.month-grid .dow{font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);text-align:center;padding:4px 0;font-family:var(--font-display)}
.day-cell{
  position:relative;display:grid;gap:3px;align-content:start;min-height:58px;
  border:1px solid var(--line);border-radius:8px;padding:6px 7px;background:var(--surface);
  cursor:pointer;font-size:12px;transition:border-color .12s ease;
}
.day-cell:hover{border-color:var(--verde)}
.day-cell.other{opacity:.38;cursor:default}
.day-cell.today{border-color:var(--faixa);border-width:2px}
.day-cell.selected{border-color:var(--verde);border-width:2px;background:var(--verde-suave)}
.day-cell .n{font-family:var(--font-display);font-weight:800;font-size:12.5px}
.day-cell .count{
  justify-self:start;border-radius:99px;background:var(--asfalto);color:var(--faixa);
  font-size:10px;font-weight:800;padding:1px 7px;
}
@media (max-width:640px){.day-cell{min-height:44px;padding:4px 5px}.day-cell .count{padding:1px 5px}}

/* ---------- marketplace ---------- */
.toolbar{display:grid;grid-template-columns:1.4fr .8fr .8fr .9fr;gap:10px;margin-bottom:6px}
@media (max-width:880px){.toolbar{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.toolbar{grid-template-columns:1fr}}
.instructor-card{
  position:relative;display:grid;gap:12px;padding:18px;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);
  transition:transform .15s ease,box-shadow .15s ease;
}
.instructor-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.instructor-card.sponsored{border:2px solid var(--faixa)}
.sponsored-flag{
  position:absolute;top:-11px;left:14px;
  background:var(--faixa);color:var(--asfalto);border:2px solid var(--asfalto);
  border-radius:6px;font-family:var(--font-display);font-weight:850;font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;padding:1px 8px;
}
.rating{display:inline-flex;align-items:center;gap:5px;font-weight:700;font-size:13px}
.rating .star{color:var(--faixa-escura)}
.slot-chip{
  border:1.5px solid var(--verde);border-radius:8px;background:var(--verde-suave);
  color:var(--verde-escuro);padding:5px 11px;font-size:12px;font-weight:700;cursor:pointer;
}
.slot-chip:hover{background:var(--verde);color:#fff}
.price-tag{font-family:var(--font-display);font-weight:850;font-size:21px}
.price-tag small{font-size:11px;font-weight:600;color:var(--muted)}

/* ---------- chat ---------- */
.chat-layout{display:grid;grid-template-columns:280px 1fr;gap:16px;align-items:start}
@media (max-width:860px){.chat-layout{grid-template-columns:1fr}}
.chat-thread{
  display:grid;gap:3px;width:100%;text-align:left;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:11px 13px;cursor:pointer;
}
.chat-thread.active{border-color:var(--verde);border-width:2px;background:var(--verde-suave)}
.chat-thread small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.messages{
  display:grid;gap:9px;max-height:430px;overflow-y:auto;padding:6px 2px;
  align-content:start;
}
.msg{
  max-width:75%;border-radius:13px;padding:9px 13px;font-size:13.5px;line-height:1.45;
  position:relative;
}
.msg.them{justify-self:start;background:var(--pista);border:1px solid var(--line);border-bottom-left-radius:4px}
.msg.me{justify-self:end;background:var(--verde);color:#fff;border-bottom-right-radius:4px}
.msg time{display:block;font-size:10px;opacity:.65;margin-top:3px}
.chat-form{display:flex;gap:9px;margin-top:12px}
.chat-form input{flex:1;border:1.5px solid var(--line);border-radius:10px;padding:10px 13px}
.chat-form input:focus{border-color:var(--verde);outline:none}

/* ---------- planos ---------- */
.plan-option{
  display:grid;gap:7px;border:1.5px solid var(--line);border-radius:var(--radius-sm);
  padding:14px;background:var(--surface);
}
.plan-option.current{border-color:var(--verde);border-width:2px;background:var(--verde-suave)}
.plan-option .price{font-family:var(--font-display);font-weight:850;font-size:17px}

/* ---------- avaliações ---------- */
.review{display:grid;gap:5px;border:1px solid var(--line);border-radius:var(--radius-sm);padding:13px;background:var(--surface)}
.stars{color:var(--faixa-escura);letter-spacing:2px;font-size:13px}

/* ---------- estados vazios ---------- */
.empty{
  display:grid;gap:6px;justify-items:center;text-align:center;
  border:2px dashed var(--line);border-radius:var(--radius);padding:34px 18px;color:var(--muted);
}
.empty strong{color:var(--ink);font-family:var(--font-display)}

/* ---------- dialog ---------- */
.dialog{border:0;border-radius:18px;padding:0;max-width:560px;width:calc(100% - 32px);box-shadow:var(--shadow)}
.dialog::backdrop{background:rgba(16,20,17,.55);backdrop-filter:blur(3px)}
.dialog-card{display:grid;gap:16px;padding:22px;margin:0}
.dialog-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.dialog-foot{display:flex;justify-content:flex-end;gap:9px}

/* ---------- toast ---------- */
.toast{
  position:fixed;left:50%;bottom:24px;transform:translate(-50%,16px);
  background:var(--asfalto);color:#fff;border-left:5px solid var(--faixa);
  border-radius:11px;padding:12px 18px;font-size:13.5px;font-weight:600;
  opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;
  z-index:90;max-width:min(420px,calc(100% - 32px));box-shadow:var(--shadow);
}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- mobile ---------- */
@media (max-width:860px){
  #app-root.active{grid-template-columns:1fr}
  .sidebar{
    position:fixed;inset:0 auto 0 0;width:min(280px,82vw);
    transform:translateX(-105%);transition:transform .22s ease;
    box-shadow:var(--shadow);
  }
  .sidebar.open{transform:translateX(0)}
  .menu-button{
    display:grid;place-items:center;width:38px;height:38px;flex:none;
    border:1.5px solid var(--line);border-radius:10px;background:var(--surface);cursor:pointer;
  }
  .scrim{position:fixed;inset:0;background:rgba(16,20,17,.4);z-index:25;opacity:0;pointer-events:none;transition:opacity .2s}
  .scrim.show{opacity:1;pointer-events:auto}
}
@media (min-width:861px){.scrim{display:none}}

/* ============================================================
   PRODUÇÃO — landing, autenticação e estados de carregamento
   ============================================================ */
.landing-sections{background:var(--asfalto);color:#F4F6F2}
.landing-section{width:min(1060px,calc(100% - 36px));margin:0 auto;padding:54px 0}
.landing-section h2{color:#fff;font-size:clamp(22px,3vw,30px);font-weight:850;margin-bottom:8px}
.landing-section > p{color:rgba(244,246,242,.66);max-width:560px;margin-bottom:24px}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:880px){.feature-grid{grid-template-columns:1fr}}
.feature{
  display:grid;gap:8px;padding:20px;border:1px solid rgba(244,246,242,.12);
  border-radius:16px;background:var(--asfalto-2);
}
.feature strong{font-family:var(--font-display);font-size:15.5px;color:#fff}
.feature p{font-size:13.5px;color:rgba(244,246,242,.66)}
.feature .plate{margin-right:auto}

/* ---------- autenticação ---------- */
.auth-card{max-width:430px}
.auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.auth-tab{
  border:1.5px solid var(--line);border-radius:10px;background:var(--surface);
  padding:9px;font-weight:700;font-size:13.5px;cursor:pointer;font-family:var(--font-display);
}
.auth-tab.active{border-color:var(--ink);background:var(--ink);color:var(--faixa)}
.role-pick{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.role-pick label{
  display:grid;gap:3px;border:1.5px solid var(--line);border-radius:10px;
  padding:11px 12px;cursor:pointer;font-size:13px;
}
.role-pick label.active{border-color:var(--verde);border-width:2px;background:var(--verde-suave)}
.role-pick input{display:none}
.role-pick strong{font-family:var(--font-display);font-size:13.5px}
.auth-error{
  display:none;border:1.5px solid var(--vermelho);background:var(--vermelho-suave);
  color:var(--vermelho);border-radius:10px;padding:10px 13px;font-size:13px;font-weight:600;
}
.auth-error.show{display:block}
.auth-info{
  display:none;border:1.5px solid var(--verde);background:var(--verde-suave);
  color:var(--verde-escuro);border-radius:10px;padding:10px 13px;font-size:13px;font-weight:600;
}
.auth-info.show{display:block}

/* ---------- carregamento ---------- */
.loading{
  display:grid;justify-items:center;gap:12px;padding:60px 20px;color:var(--muted);
}
.spinner{
  width:38px;height:38px;border-radius:99px;
  border:4px solid var(--line);border-top-color:var(--faixa);
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.config-warning{
  margin:20px auto;width:min(620px,calc(100% - 36px));
  border:2px solid var(--faixa);border-radius:14px;background:var(--faixa-suave);
  padding:18px 20px;display:grid;gap:8px;font-size:14px;color:var(--ink);
}
.config-warning strong{font-family:var(--font-display)}
.config-warning code{
  background:#fff;border:1px solid var(--line);border-radius:6px;padding:1px 6px;font-size:12.5px;
}
.badge-count{
  display:inline-grid;place-items:center;min-width:19px;height:19px;padding:0 5px;
  border-radius:99px;background:var(--vermelho);color:#fff;font-size:10.5px;font-weight:800;
  margin-left:auto;
}