:root{
  --bg:#071823;
  --bg2:#0a2230;
  --panel:rgba(7,32,46,.88);
  --panel2:rgba(11,43,59,.94);
  --panel3:rgba(17,61,79,.78);
  --line:#31b9de;
  --line-soft:rgba(49,185,222,.28);
  --line-faint:rgba(131,211,234,.14);
  --cyan:#51d9ff;
  --cyan2:#24a8ca;
  --teal:#49d9c4;
  --red:#e45b73;
  --text:#f4f8fb;
  --muted:#9eb1bd;
  --muted2:#7693a3;
  --shadow:0 16px 42px rgba(0,0,0,.30);
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;min-height:100%}
body{
  min-height:100svh;
  color:var(--text);
  font-family:"Bahnschrift","Segoe UI",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  background:
    linear-gradient(180deg,rgba(4,18,28,.46),rgba(4,19,29,.88)),
    url("../assets/painel-gestor-bg.webp") center/cover fixed no-repeat;
}
button,input,select{font:inherit}
button{-webkit-tap-highlight-color:transparent}
svg{stroke-linecap:round;stroke-linejoin:round}
.mobile-page{
  width:100%;
  max-width:430px;
  min-height:100svh;
  margin:0 auto;
  padding:
    max(18px,env(safe-area-inset-top))
    16px
    calc(96px + env(safe-area-inset-bottom));
}
.glass{
  border:1px solid var(--line-soft);
  background:
    linear-gradient(145deg,rgba(15,53,70,.92),rgba(5,28,41,.94));
  box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.035);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.bottom-nav{
  position:fixed;
  z-index:100;
  left:50%;
  bottom:max(10px,env(safe-area-inset-bottom));
  transform:translateX(-50%);
  width:min(calc(100% - 24px),406px);
  height:70px;
  padding:7px 8px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:4px;
  border:1px solid rgba(49,185,222,.24);
  border-radius:18px;
  background:rgba(5,27,40,.95);
  box-shadow:0 20px 46px rgba(0,0,0,.38);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.bottom-nav a{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  color:#7594a4;
  text-decoration:none;
  border-radius:12px;
  font-size:8px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.bottom-nav a svg{width:21px;height:21px;stroke:currentColor;stroke-width:1.75}
.bottom-nav a.active{
  color:#effbff;
  background:linear-gradient(180deg,rgba(44,156,190,.24),rgba(26,96,123,.16));
  box-shadow:inset 0 0 0 1px rgba(81,217,255,.18);
}
.bottom-nav a.active::before{
  content:"";
  position:absolute;
  top:4px;
  width:18px;height:2px;border-radius:4px;
  background:#51d9ff;
  box-shadow:0 0 10px rgba(81,217,255,.65);
}

/* =========================================================
   V8 — TIPOGRAFIA MOBILE LEGÍVEL
   Escala global inspirada em aplicativos financeiros:
   nenhuma informação operacional depende de microtipografia.
   ========================================================= */
body{font-size:15px;line-height:1.45}
.bottom-nav{height:76px;padding:7px 8px}
.bottom-nav a{gap:5px;font-size:11px;line-height:1.05;letter-spacing:.035em}
.bottom-nav a svg{width:23px;height:23px}
.mobile-page{padding-bottom:calc(104px + env(safe-area-inset-bottom))}