:root{
  --app-safe-top: env(safe-area-inset-top, 0px);
  --app-safe-right: env(safe-area-inset-right, 0px);
  --app-safe-bottom: env(safe-area-inset-bottom, 0px);
  --app-safe-left: env(safe-area-inset-left, 0px);
  --app-shell-max: 1120px;
  --app-shell-gutter: clamp(12px, 3.5vw, 22px);
  --app-radius-xs: 12px;
  --app-radius-sm: 16px;
  --app-radius-md: 22px;
  --app-radius-lg: 30px;
  --app-shadow-sm: 0 10px 24px rgba(41,31,21,.08);
  --app-shadow-md: 0 18px 38px rgba(41,31,21,.12);
  --app-shadow-lg: 0 24px 60px rgba(41,31,21,.16);
  --app-text: #1f2937;
  --app-text-soft: #7b6b5d;
  --app-line: rgba(215,196,178,.82);
  --app-line-strong: rgba(215,196,178,.96);
  --app-surface: rgba(255,255,255,.92);
  --app-surface-soft: rgba(255,250,245,.86);
  --app-hero-grad: linear-gradient(180deg, #fff8f2 0%, #f7efe6 100%);
  --app-brand-grad: linear-gradient(180deg, #e8a35f 0%, #d68b43 100%);
  --app-title-1: clamp(1.5rem, 2vw + 1rem, 2.25rem);
  --app-title-2: clamp(1.15rem, 1vw + .95rem, 1.5rem);
  --app-body: clamp(.95rem, .2vw + .9rem, 1rem);
  --app-caption: clamp(.74rem, .15vw + .72rem, .82rem);
}
html,body{
  min-height:100%;
  overscroll-behavior-y:none;
}
body.sba-app,
body.transportador-cadastro{
  font-family: Inter, Poppins, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  color: var(--app-text);
  background:
    radial-gradient(circle at top right, rgba(225,153,81,.18), transparent 24%),
    radial-gradient(circle at top left, rgba(255,255,255,.88), transparent 22%),
    linear-gradient(180deg,#fff8f2 0%, #f4ece4 100%) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.sba-app.app-shell,
body.transportador-cadastro.app-shell{
  min-height:100svh;
}
body.logged{
  --app-content-bottom: calc(var(--app-safe-bottom) + var(--tabbar-height, 76px) + 24px);
}
a,button,input,select,textarea{
  font: inherit;
}
button,
.btn,
[role="button"]{
  min-height: 46px;
}
button:focus-visible,
.btn:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:none;
  box-shadow: 0 0 0 4px rgba(225,153,81,.14) !important;
}
header{
  padding-top: calc(8px + var(--app-safe-top)) !important;
  padding-left: max(12px, var(--app-safe-left)) !important;
  padding-right: max(12px, var(--app-safe-right)) !important;
}
body.logged header{
  backdrop-filter: blur(14px) saturate(170%);
  -webkit-backdrop-filter: blur(14px) saturate(170%);
}
main.container,
#homeHost,
#app,
#cadastroView,
#chamadasView,
#mapaChamadaView,
#callMaps,
#perfilView,
#sobreView,
#novoCadastroView,
#novosAlunosView,
#reativarAlunosView,
#desativarAlunosView,
#revisaoPagamentosView,
#docManagerView,
#diarioBordoView,
#routesView,
#bizPremiumView,
#meuAppView,
#relatoriosView,
#aniversariosView,
#pixRespView,
#ajudaView,
#linkCadastroView,
#paxEditorView,
#termosView{
  width: min(100%, var(--app-shell-max));
  margin-left:auto !important;
  margin-right:auto !important;
}
body.logged #homeHost,
body.logged #app,
body.logged [id$="View"],
body.logged #callMaps{
  animation: sba-enter .32s cubic-bezier(.22,1,.36,1);
}
@keyframes sba-enter{
  from{opacity:0; transform:translateY(10px) scale(.992)}
  to{opacity:1; transform:translateY(0) scale(1)}
}
body.has-tabbar #app,
body.has-tabbar #homeHost,
body.has-tabbar [id$="View"],
body.has-tabbar #callMaps{
  padding-bottom: calc(var(--app-safe-bottom) + var(--tabbar-height, 76px) + 28px) !important;
}
#toast{
  max-width: min(92vw, 520px);
  margin-inline:auto;
}
#toast.show{
  animation: sba-toast-in .22s ease both;
}
@keyframes sba-toast-in{
  from{opacity:0; transform:translateY(-8px)}
  to{opacity:1; transform:translateY(0)}
}
#loading-overlay,
#success-overlay,
#transportador-signup-modal,
#uiTabsOverlay{
  padding:
    max(16px, var(--app-safe-top))
    max(16px, var(--app-safe-right))
    max(16px, var(--app-safe-bottom))
    max(16px, var(--app-safe-left));
  box-sizing:border-box;
}
#transportador-signup-modal,
#uiTabsOverlay{
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
#transportador-signup-shell{
  border: 1px solid rgba(215,196,178,.76);
  border-radius: 32px;
  background: rgba(255,255,255,.92);
  box-shadow: var(--app-shadow-lg);
  overflow: hidden;
}
.tr-iframe-header{
  position: sticky;
  top: 0;
  z-index: 5;
  background: rgba(255,255,255,.86);
  border-bottom: 1px solid rgba(215,196,178,.68);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.container-cover,
.container-wizard{
  border-radius: 30px !important;
  border: 1px solid rgba(215,196,178,.78) !important;
  background: rgba(255,255,255,.94) !important;
  box-shadow: var(--app-shadow-lg) !important;
}
.mensagem-inicial h1{
  font-size: clamp(1.55rem, 1rem + 1.6vw, 2.35rem);
  line-height: 1.06;
  letter-spacing: -.03em;
  font-weight: 900;
  color: #1f2937;
}
.mensagem-inicial p,
.mensagem-inicial li,
.transportador-cadastro .form-label,
.transportador-cadastro .form-text{
  color: #5f5246;
}
.transportador-cadastro .step-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 1.2rem;
  border-bottom: 1px solid rgba(215,196,178,.66);
  font-size: clamp(1.1rem, .65rem + 1vw, 1.4rem);
  font-weight: 900;
  color: #1f2937;
}
.transportador-cadastro .step-title::after{
  content:"";
  flex:1;
  height:8px;
  max-width:120px;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(225,153,81,.9), rgba(225,153,81,.15));
}
.transportador-cadastro .form-control,
.transportador-cadastro .form-select,
.transportador-cadastro textarea{
  min-height: 52px;
  border-radius: 16px !important;
  border: 1px solid rgba(215,196,178,.9) !important;
  background: rgba(255,255,255,.96) !important;
  box-shadow: 0 8px 20px rgba(41,31,21,.05);
}
.transportador-cadastro textarea{ min-height: 120px; }
.transportador-cadastro .btn,
.transportador-cadastro button{
  border-radius: 18px !important;
  font-weight: 800 !important;
}
.transportador-cadastro .button-group{
  gap: 14px;
  flex-wrap: wrap;
}
.transportador-cadastro .button-group > *{
  flex: 1 1 220px;
}
#schools-list .list-group-item{
  border:1px solid rgba(215,196,178,.82) !important;
  background: linear-gradient(180deg,#fffefe 0%,#fff9f5 100%) !important;
  box-shadow: var(--app-shadow-sm);
}
#schools-list .list-group-item button{
  border-radius: 999px !important;
  font-weight: 800;
}
.login-wrap{
  padding:
    max(18px, var(--app-safe-top))
    max(16px, var(--app-safe-right))
    max(22px, var(--app-safe-bottom))
    max(16px, var(--app-safe-left)) !important;
}
.login{
  width: min(100%, 440px);
  padding: 26px 20px 20px;
  border-radius: 30px;
  background: rgba(255,255,255,.26);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.login-title{
  margin: 0;
  font-size: clamp(1.5rem, 1rem + 1.4vw, 2rem);
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -.03em;
  color:#2c2016;
}
.login::before{
  content:"Acesse sua conta";
  width:100%;
  display:block;
  text-align:center;
  margin-top:-4px;
  margin-bottom:4px;
  color:#8d735f;
  font-size: .92rem;
  font-weight:600;
}
#login-form .small,
#forgot-password-link{
  color:#8b745f !important;
}
#login-form .ghost,
#show-signup-btn{
  min-height: 54px !important;
  border-radius: 18px !important;
  box-shadow: 0 10px 22px rgba(41,31,21,.08);
}
#sideMenu,
.menu-item,
#sba-tabbar .bar,
#sba-tabbar button,
.home-card,
.add-cards-modal{
  will-change: transform;
}
#sideMenu .menu-item,
#sideMenu .mi,
#sideMenu .mi-btn{
  border-radius: 18px;
}
#sba-tabbar .bar{
  background: rgba(255,255,255,.86) !important;
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
}
#sba-tabbar button .ico,
.home-card .ic,
.add-cards-item > span:first-child,
#sideMenu .mi-ico,
#sideMenu .menu-item .emoji{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  background: linear-gradient(180deg, #fff8f1 0%, #fff1e2 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 8px 18px rgba(205,137,71,.12);
}
.home-smart-panel{
  display:grid;
  gap:12px;
  margin: 0 0 18px;
}
.smart-card{
  border:1px solid rgba(215,196,178,.76);
  border-radius: 22px;
  background: linear-gradient(180deg,#fffefe 0%,#fffaf6 100%);
  box-shadow: 0 12px 24px rgba(41,31,21,.08);
  padding: 16px;
}
.smart-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.smart-title{
  font-weight: 900;
  color:#1f2937;
  letter-spacing:-.02em;
  margin:0;
}
.smart-subtitle{
  margin:4px 0 0;
  color:#7b6b5d;
  font-size:.92rem;
  line-height:1.45;
}
.smart-badge{
  padding:7px 11px;
  border-radius:999px;
  background:#fff2e3;
  color:#b56d2b;
  font-weight:800;
  white-space:nowrap;
  font-size:.78rem;
}
.smart-metrics{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.smart-metric{
  border-radius: 16px;
  background: rgba(255,247,239,.88);
  border:1px solid rgba(215,196,178,.62);
  padding: 11px 12px;
}
.smart-metric strong{
  display:block;
  font-size: 1.15rem;
  line-height:1;
  color:#1f2937;
  font-weight:900;
}
.smart-metric span{
  display:block;
  margin-top:6px;
  color:#7b6b5d;
  font-size:.84rem;
  font-weight:700;
}
.smart-priority{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-top:12px;
  padding:12px 14px;
  border-radius:18px;
  background: linear-gradient(180deg,#fff8f1 0%,#fff0df 100%);
  border:1px solid rgba(225,153,81,.34);
  cursor:pointer;
}
.smart-priority:active{ transform: scale(.99); }
.smart-priority b{ display:block; color:#6d4a2c; margin-bottom:3px; }
.smart-priority span{ color:#8a705a; font-size:.88rem; }
.smart-arrow{
  min-width: 38px;
  height: 38px;
  border-radius: 12px;
  display:grid;
  place-items:center;
  background:#fff;
  color:#c27733;
  font-size:1.1rem;
  box-shadow: 0 8px 16px rgba(205,137,71,.12);
}
.home-empty-state{
  text-align:center;
  color:#8a705a;
  padding: 10px 8px;
}
/* Legacy view normalization */
#novosAlunosView,
#reativarAlunosView,
#desativarAlunosView,
#novoCadastroView,
#revisaoPagamentosView,
#docManagerView,
#bizPremiumView,
#routesView,
#cadastroView,
#chamadasView,
#mapaChamadaView,
#callMaps,
#ajudaView,
#aniversariosView,
#perfilView,
#sobreView,
#pixRespView,
#relatoriosView,
#meuAppView{
  padding-left: clamp(12px, 3vw, 18px) !important;
  padding-right: clamp(12px, 3vw, 18px) !important;
}
#novosAlunosView,
#reativarAlunosView,
#desativarAlunosView{
  font-family: Inter, Poppins, system-ui, sans-serif !important;
}
#bizPremiumView{
  background: transparent !important;
  color: var(--app-text) !important;
}
#bizPremiumView .biz-summary-card,
#bizPremiumView .biz-card,
#bizPremiumView .biz-chart-card,
#bizPremiumView .biz-filter-card,
#bizPremiumView .biz-insight-card,
#bizPremiumView .biz-loader-box{
  border-radius: 24px !important;
  border: 1px solid rgba(215,196,178,.8) !important;
  background: rgba(255,255,255,.92) !important;
  box-shadow: var(--app-shadow-md) !important;
}
@media (max-width: 640px){
  .smart-metrics{ grid-template-columns: 1fr 1fr; }
  .smart-priority{ align-items:flex-start; }
  .smart-priority .smart-arrow{ margin-top: 2px; }
  #transportador-signup-shell{ border-radius: 24px; }
  .container-cover,
  .container-wizard{ padding: 20px 16px !important; border-radius: 24px !important; }
  .login{ padding: 22px 16px 16px; border-radius: 24px; }
}
@media (max-width: 420px){
  .smart-metrics{ grid-template-columns: 1fr; }
  .smart-card{ padding: 14px; }
  .login-title{ font-size: 1.6rem; }
}
@media (prefers-reduced-motion: reduce){
  body.logged #homeHost,
  body.logged #app,
  body.logged [id$="View"],
  body.logged #callMaps,
  #toast.show{
    animation:none !important;
  }
}