:root{
  --brand:#0f766e; --brand-d:#0b5a54; --brand-2:#b45309;
  --brand-l:#e6f3f1;
  --ink:#12211f; --muted:#5b6b68; --line:#e3e9e8; --bg:#f5f7f6; --card:#fff;
  --ok:#15803d; --ok-l:#e7f5ec; --warn:#b45309; --warn-l:#fdf1e3; --dang:#b91c1c; --dang-l:#fdecec;
  --radius:14px;
}
/* ===== TEMAS (o cliente escolhe; a cor --brand vem do config) ===== */
:root[data-theme="escuro"]{
  --bg:#0f1512; --card:#161d1a; --ink:#e8efec; --muted:#93a29d; --line:#243029; --brand-l:#12312c;
  --ok-l:#12301f; --warn-l:#31220f; --dang-l:#311616;
}
:root[data-theme="neon"]{
  --bg:#07100e; --card:#0b1512; --ink:#eafff7; --muted:#6fb3a3; --line:#12463a; --brand-l:#0c2b26;
  --ok-l:#0c2b1a; --warn-l:#2b1f0c; --dang-l:#2b1010;
}
:root[data-theme="neon"] .topbar{box-shadow:0 4px 22px -8px var(--brand)}
:root[data-theme="neon"] .btn{box-shadow:0 0 16px -3px var(--brand)}
:root[data-theme="neon"] .metric .val{text-shadow:0 0 10px var(--brand)}
:root[data-theme="neon"] .tab.on{text-shadow:0 0 8px var(--brand)}
/* seletor de tema */
.tema-switch{display:flex;gap:8px}
.tema-switch button{flex:1;padding:10px;border:1.5px solid var(--line);background:var(--card);color:var(--ink);border-radius:10px;font-weight:600;font-size:13px;cursor:pointer}
.tema-switch button.on{border-color:var(--brand);color:var(--brand)}
*{box-sizing:border-box} html,body{margin:0;padding:0}
body{font-family:-apple-system,"Segoe UI",Roboto,Arial,sans-serif;background:var(--bg);color:var(--ink);line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%} a{color:inherit}

/* Topbar / wrap / tabbar */
.topbar{position:sticky;top:0;z-index:20;background:var(--brand);color:#fff;padding-top:env(safe-area-inset-top,0)}
.topbar-in{max-width:760px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:12px 16px}
.brand{display:flex;align-items:center;gap:9px;color:#fff;text-decoration:none;font-weight:700;font-size:18px}
.top-actions{display:flex;align-items:center;gap:10px;position:relative}
.top-ic{background:rgba(255,255,255,.16);border:none;color:#fff;width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.top-ic:active{transform:scale(.95)}
.avatar{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.18);color:#fff;display:flex;align-items:center;justify-content:center;text-decoration:none}
.tema-menu{position:absolute;top:48px;right:0;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:6px;display:none;flex-direction:column;gap:2px;min-width:160px;box-shadow:0 10px 30px rgba(0,0,0,.25);z-index:40}
.tema-menu.open{display:flex}
.tema-menu button{background:transparent;border:none;text-align:left;padding:10px 12px;border-radius:8px;color:var(--ink);font-weight:600;font-size:14px;cursor:pointer}
.tema-menu button.on{color:var(--brand);background:var(--brand-l)}
.avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover}
/* Foto de perfil (Conta) */
.foto-wrap{position:relative;display:inline-block;cursor:pointer}
.foto-perfil{width:96px;height:96px;border-radius:50%;object-fit:cover;display:inline-flex;align-items:center;justify-content:center;background:var(--brand-l);color:var(--brand);font-size:36px;font-weight:800}
.foto-edit{position:absolute;bottom:0;right:0;width:30px;height:30px;border-radius:50%;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;border:2px solid var(--card)}
/* Alertas (broadcast) */
.alerta-overlay{position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;padding:20px}
.alerta-box{background:var(--card);border-radius:16px;max-width:400px;width:100%;padding:24px;text-align:center}
.alerta-ic{font-size:40px;line-height:1}
.alerta-item{text-align:left;margin:12px 0;padding:12px 14px;background:var(--brand-l);border-radius:12px}
.alerta-item h3{margin:0 0 4px;font-size:16px;color:var(--ink)} .alerta-item p{margin:0;font-size:14px;color:var(--ink)}
.wrap{max-width:760px;margin:0 auto;padding:16px 16px calc(84px + env(safe-area-inset-bottom,0))}
.wrap-public,.wrap-auth{max-width:1060px;padding-bottom:24px}
.wrap-auth{max-width:420px}
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--card);border-top:1px solid var(--line);display:flex;padding-bottom:env(safe-area-inset-bottom,0);overflow:visible}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:9px 0 7px;color:var(--muted);text-decoration:none;font-size:11px;font-weight:600}
.tab svg{width:22px;height:22px} .tab.on{color:var(--brand)}
.tab-fab{flex:1;display:flex;flex-direction:column;align-items:center;text-decoration:none;padding-bottom:7px}
.fab-circle{width:52px;height:52px;border-radius:50%;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;margin-top:-20px;box-shadow:0 6px 18px -5px var(--brand);border:3px solid var(--card)}
.fab-circle svg{width:26px;height:26px} .fab-lbl{font-size:10px;font-weight:700;color:var(--brand);margin-top:3px}
.rodape-mini{text-align:center;font-size:11px;color:var(--muted);padding:10px 0 calc(70px + env(safe-area-inset-bottom,0))}

/* Cartões / textos */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin-bottom:14px}
.card h2{margin:0 0 4px;font-size:17px}
.muted{color:var(--muted)} .small{font-size:13px}
.empty{text-align:center;padding:30px 18px}.empty .big{font-size:40px;line-height:1}.empty h3{margin:12px 0 4px}
.metrics{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.metric{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px}
.metric .lbl{font-size:12px;color:var(--muted);font-weight:600}.metric .val{font-size:24px;font-weight:700}.metric.ok .val{color:var(--ok)}
.pill-free{background:var(--brand-l);color:var(--brand-d);font-size:11px;font-weight:700;padding:2px 8px;border-radius:8px}

/* Botões / campos / flash */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:14px 18px;border:none;border-radius:12px;background:var(--brand);color:#fff;font-size:16px;font-weight:600;cursor:pointer;text-decoration:none}
.btn:active{background:var(--brand-d)} .btn-ghost{background:transparent;color:var(--brand);border:1.5px solid var(--brand)}
.btn-sm{width:auto;padding:9px 14px;font-size:14px;border-radius:10px}
.field{margin-bottom:14px}.field label{display:block;font-size:13px;font-weight:600;color:var(--muted);margin-bottom:6px}
.field input,.field textarea{width:100%;padding:13px 14px;border:1.5px solid var(--line);border-radius:12px;font-size:16px;background:var(--card);color:var(--ink)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--brand)}
.flash{padding:12px 14px;border-radius:12px;margin-bottom:14px;font-size:14px;font-weight:500}
.flash-ok{background:var(--ok-l);color:var(--ok)}.flash-erro{background:var(--dang-l);color:var(--dang)}.flash-info{background:var(--brand-l);color:var(--brand-d)}
.zona-perigo{margin-top:16px}.zona-perigo summary{color:var(--muted);font-size:13px;cursor:pointer}

/* Auth */
.auth{max-width:400px;margin:0 auto;padding-top:10px}
.auth-logo{text-align:center;margin-bottom:14px}.auth-logo img{width:76px;height:76px;border-radius:20px;display:inline-block}
.auth h1{text-align:center;font-size:22px;margin:6px 0 2px}.auth-sub{text-align:center;color:var(--muted);font-size:14px;margin:0 0 20px}
.auth-alt{text-align:center;margin-top:18px;font-size:14px}.auth-alt a{color:var(--brand);font-weight:600;text-decoration:none}

/* Doc / Sobre */
.doc{max-width:720px;margin:0 auto}.doc-logo{text-align:center;margin-bottom:14px}.doc-logo img{height:48px;display:inline-block}
.doc h1{font-size:24px;margin:8px 0 2px}.doc-h{font-size:16px;color:var(--brand);margin-bottom:6px}
.sobre-axb{max-width:640px;margin:0 auto;padding-top:8px}.sobre-logo{text-align:center;margin-bottom:8px}.sobre-logo img{width:min(60vw,240px)}

/* Landing */
.ln-top{max-width:1060px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:6px 4px 18px}
.ln-logo{height:44px} .ln-top-actions{display:flex;gap:10px;align-items:center}
.ln-entrar{color:var(--brand);font-weight:600;text-decoration:none;padding:9px 18px;border:1.5px solid var(--brand);border-radius:10px}
.ln-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 26px;border-radius:12px;font-weight:600;font-size:16px;text-decoration:none;border:none;cursor:pointer}
.ln-btn-white{background:#fff;color:var(--brand-d)} .ln-btn-brand{background:var(--brand);color:#fff;width:100%}
.ln-btn-ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.6)} .ln-btn-solid{background:var(--brand);color:#fff}
.ln-hero{background:linear-gradient(135deg,var(--brand),var(--brand-d));color:#fff;border-radius:22px;padding:44px 26px 48px;text-align:center;margin-bottom:12px}
.ln-hero h1{font-size:34px;line-height:1.2;font-weight:800;letter-spacing:-.5px;margin:0 auto;max-width:16em}
.ln-sub{font-size:18px;opacity:.95;margin:14px auto 24px;max-width:32em}
.ln-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.ln-selo{margin-top:18px;font-size:14px;opacity:.9}
.ln-sec{padding:48px 8px;text-align:center}.ln-alt{background:var(--card);border-radius:22px}
.ln-sec h2{font-size:26px;font-weight:800;margin:0 0 6px}.ln-lead{color:var(--muted);max-width:36em;margin:0 auto 28px}
.ln-feats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:920px;margin:0 auto}
.ln-feat .ln-ic{font-size:30px}.ln-feat h4{margin:8px 0 4px;font-size:16px}.ln-feat p{font-size:14px;color:var(--muted);margin:0}
.ln-planos{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:660px;margin:0 auto}
.ln-planos-3{grid-template-columns:repeat(3,1fr);max-width:900px}
.ln-plano{border:1px solid var(--line);border-radius:16px;padding:24px;background:var(--bg);text-align:center;position:relative}
.ln-plano.ln-pro{border:2px solid var(--brand);background:var(--card)}
.ln-tag{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--brand);color:#fff;font-size:12px;font-weight:700;padding:4px 12px;border-radius:20px}
.ln-plano h3{font-size:18px}.ln-preco{font-size:30px;font-weight:800;margin:6px 0}.ln-preco span{font-size:15px;color:var(--muted);font-weight:600}
.ln-plano ul{list-style:none;padding:0;font-size:14px;color:#3a4744;margin:12px 0 18px;text-align:left}
.ln-plano li{padding:4px 0 4px 22px;position:relative}.ln-plano li::before{content:"✓";position:absolute;left:0;color:var(--brand);font-weight:700}
.ln-final{background:linear-gradient(135deg,var(--brand),var(--brand-d));color:#fff;border-radius:22px;text-align:center;padding:44px 22px;margin-top:12px}
.ln-final h2{color:#fff;font-size:26px;margin:0 0 6px}.ln-final p{opacity:.95;margin:0 0 22px}

/* Rodapé AXB */
.axb-footer{background:#0b1a18;color:#cdddd9;padding:40px 0 26px;margin-top:16px;border-radius:22px 22px 0 0}
.axb-footer-in{max-width:1060px;margin:0 auto;padding:0 20px}
.axb-footer-grid{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:22px}
.axb-marca{font-size:18px;font-weight:800;color:#fff}.axb-marca span{color:#2dd4bf}
.axb-tag{color:#8fa8a3;margin-top:4px;max-width:22em;font-size:14px}
.axb-links{display:flex;gap:24px;flex-wrap:wrap;font-size:14px}.axb-links a{color:#cdddd9;text-decoration:none}
.axb-base{border-top:1px solid #1c2f2c;padding-top:16px;color:#8fa8a3;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13px}

/* ===== Responsivo padrão: PC (default) · Tablet · Celular ===== */
img,video,canvas{max-width:100%;height:auto}
table{max-width:100%}
/* Tablet (paisagem/menores) */
@media(max-width:1000px){
  .ln-feats{grid-template-columns:1fr 1fr}
}
/* Tablet retrato */
@media(max-width:820px){
  .ln-planos,.ln-planos-3{grid-template-columns:1fr;max-width:440px}
  .ln-top{flex-wrap:wrap;gap:10px;justify-content:center;text-align:center}
  .ln-hero h1{font-size:30px}.ln-sec h2{font-size:23px}
  .axb-footer-grid{flex-direction:column;gap:14px}
}
/* Celular */
@media(max-width:560px){
  .ln-hero{padding:34px 18px 40px}.ln-hero h1{font-size:25px}.ln-sub{font-size:16px}
  .ln-cta{flex-direction:column}.ln-cta .ln-btn{width:100%}
  .ln-final{padding:36px 18px}
  .metrics{gap:8px}
  .brand span{font-size:16px}
}

/* ---- Avatar com anel de nível (gamificação) ---- */
.avring{display:inline-grid;place-items:center;border-radius:50%;padding:2.5px;background:var(--ring,#8a9ba8);flex:none;line-height:0;vertical-align:middle}
.avring-i{width:var(--sz,40px);height:var(--sz,40px);border-radius:50%;overflow:hidden;display:grid;place-items:center;background:var(--brand);color:#fff;font-weight:800;font-size:calc(var(--sz,40px)*.42)}
.avring-i img{width:100%;height:100%;object-fit:cover}