:root{
  --bg:#0A0F1A;
  --card:#0f172a;
  --text:#e2e8f0;
  --muted:#94a3b8;
  --primary:#22d3ee;
  --danger:#ef4444;
  --success:#10b981;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --radius:18px;

  --sb-bg:rgba(13,19,35,.92);
  --sb-border:rgba(255,255,255,.10);
  --sb-width:320px;

  /* neon padrão (sobrescrito por tema) */
  --accent-neon: var(--primary);
  --accent-neon-soft: rgba(34,211,238,.35);

  /* borda gradiente dos botões (sobrescrito por tema) */
  --btn-grad-a:#FFD84D;
  --btn-grad-b:#22D3EE;

  /* vidro/blur (cada tema sobrescreve a cor) */
  --card-glass-bg: rgba(10,10,15,.60);
  --card-border-color: rgba(255,255,255,.22);

  /* escala automática da sidebar (JS ajusta) */
  --sb-scale: 1;
}

*{box-sizing:border-box}
html,body{height:100%}

/* Transição global – 0.4s */
html{ transition: background-color .4s ease, color .4s ease }
body{
  margin:0; color:var(--text); background:var(--bg);
  font:500 16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;
  overflow:hidden;
  transition: background-color .4s ease, color .4s ease;
}

/* Suaviza switch de tema */
.theme-switching body,
.theme-switching .neon-card,
.theme-switching .popup-card,
.theme-switching .card{
  transition: all .4s ease !important;
}

a{color:inherit; text-decoration:none}
#bg-canvas{position:fixed; inset:0; z-index:0}

/* ===== QUADROS (cards/painéis/popups) ===== */
.neon-card,
.login-card,
.popup-card,
.card,
.maintenance,
.panel,
.box,
.section-card,
[class*="card-"],
[data-card],
[data-panel]{
  background:
    radial-gradient(120% 180% at 10% -10%, rgba(255,255,255,.06), transparent 60%),
    var(--card-glass-bg);
  border:1px solid var(--card-border-color);
  border-radius:16px;
  box-shadow:
    var(--shadow),
    0 0 0 1px var(--accent-neon) inset,
    0 0 18px 0 var(--accent-neon-soft);
  position:relative;
  overflow:hidden;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform .25s ease, box-shadow .25s ease, background .4s ease, border-color .4s ease;
}

/* Microtraços “circuito” */
.neon-card::before,
.login-card::before,
.popup-card::before,
.card::before,
.maintenance::before,
.panel::before,
.box::before,
.section-card::before,
[class*="card-"]::before,
[data-card]::before,
[data-panel]::before{
  content:"";
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(90deg, transparent 0 48%, currentColor 50%, transparent 52%) 0 0 / 240% 2px no-repeat,
    linear-gradient(90deg, transparent 0 48%, currentColor 50%, transparent 52%) 0 100% / 240% 2px no-repeat,
    linear-gradient(0deg,  transparent 0 48%, currentColor 50%, transparent 52%) 0 0 / 2px 240% no-repeat,
    linear-gradient(0deg,  transparent 0 48%, currentColor 50%, transparent 52%) 100% 0 / 2px 240% no-repeat;
  color: rgba(255,255,255,.26);
  mix-blend-mode: screen;
  animation: circuit-run 5s linear infinite;
  opacity:.55;
}
@keyframes circuit-run{
  0%{ background-position: 0 0, 0 100%, 0 0, 100% 0 }
  50%{ background-position: 120% 0, -120% 100%, 0 -120%, 100% 120% }
  100%{ background-position: 240% 0, -240% 100%, 0 -240%, 100% 240% }
}

/* Hover global – menos “zoom” */
.neon-card:hover,
.login-card:hover,
.popup-card:hover,
.card:hover,
.maintenance:hover,
.panel:hover,
.box:hover,
.section-card:hover,
[class*="card-"]:hover,
[data-card]:hover,
[data-panel]:hover{
  transform: scale(1.02);
  box-shadow:
    var(--shadow),
    0 0 0 1px var(--accent-neon) inset,
    0 0 22px 4px var(--accent-neon-soft);
}

/* ===== LOGIN / POPUP ===== */
.login-wrap{
  position:relative; z-index:1;
  height:100%; display:flex; align-items:center; justify-content:center; padding:24px
}
.login-card{
  width:min(420px, 92vw);
  padding:28px; transform: translateZ(0)
}
.logo-wrap{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px}
.logo-wrap img{height:44px; filter:drop-shadow(0 4px 12px rgba(0,0,0,.45))}
.theme-btn{
  border:1px solid rgba(255,255,255,.2); background:transparent; color:var(--text);
  padding:10px 12px; border-radius:12px; cursor:pointer; transition: all .2s ease; position:relative;
}
.theme-btn:hover{box-shadow:0 0 18px var(--accent-neon); transform: translateY(-1px)}
.theme-btn svg{ width:22px; height:22px; display:block; position:relative }
.theme-btn svg::after{
  content:""; position:absolute; inset:-6px; border-radius:999px; pointer-events:none;
  box-shadow: 0 0 0 0 rgba(255, 216, 77, 0);
  transition: box-shadow .35s ease;
}

.login-form label{display:block; margin:.5rem 0 .25rem; color:var(--muted)}
.login-form input{
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid rgba(255,255,255,.15);
  background:rgba(0,0,0,.25); color:var(--text); outline:0; transition: box-shadow .2s, transform .12s;
}
.login-form input:hover{box-shadow:0 0 0 2px rgba(255,255,255,.08) inset}
.login-form input:focus{box-shadow:0 0 0 2px var(--accent-neon) inset}

.actions{display:flex; gap:10px; margin-top:16px}
.btn-primary,.btn-secondary,.btn-chip{
  cursor:pointer; border:0; border-radius:12px; padding:12px 16px; transition:.2s; font-weight:700; position:relative; overflow:hidden;
}
.btn-secondary{background:rgba(255,255,255,.12); color:var(--text)}
.btn-secondary:hover{box-shadow:0 8px 22px rgba(0,0,0,.35); transform:translateY(-1px)}
.btn-chip{background:rgba(255,255,255,.10); color:var(--text)}
.btn-chip:hover{box-shadow:0 0 18px rgba(255,255,255,.25)}

/* Botão com borda gradiente */
.btn-primary{ background:#000; color:#e2e8f0 }
.btn-primary::before{
  content:""; position:absolute; inset:0; padding:2px; border-radius:12px;
  background: linear-gradient(90deg, var(--btn-grad-a), var(--btn-grad-b));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.btn-primary:hover{ transform:translateY(-1px); box-shadow: 0 8px 22px var(--accent-neon-soft) }

.alert{
  background:rgba(239,68,68,.15); border:1px solid rgba(239,68,68,.45); color:#fecaca;
  padding:10px 12px; border-radius:10px; margin-bottom:12px; font-size:.95rem;
}
.note{color:var(--muted)}

.popup{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(12,16,28,.78); z-index:100
}
.popup.hidden{display:none}
.popup-card{
  width:min(560px, 96vw); max-height:86vh; overflow:auto;
  padding:22px 20px
}
.popup-card h3{margin:0 0 8px}
.popup-close{ float:right; background:transparent; border:0; color:var(--text); font-size:18px; cursor:pointer }
.inline-help{color:var(--muted); margin:6px 0 10px}
.method-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:12px}
.code-row{display:flex; gap:8px; align-items:center}
.code-row input{flex:1}
.popup-card label{display:block; margin:.5rem 0 .25rem; color:var(--muted)}
.popup-card input{
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid rgba(255,255,255,.14);
  background:#0b1224; color:var(--text); outline:0;
}
.popup-card input:focus{box-shadow:0 0 0 2px var(--accent-neon) inset}
.tiny-tip{color:var(--muted); font-size:.85rem; margin-top:6px}
.popup-msg{margin-top:12px; color:var(--muted)}
input:disabled, button:disabled{opacity:.55; cursor:not-allowed; filter:grayscale(10%)}

/* ===== APP + SIDEBAR ===== */
.app-wrap{position:relative; z-index:1; height:100vh; display:flex}

/* Sidebar: SEM rolagem visível + escala automática para caber tudo */
.sidebar{
  position:fixed; left:0; top:0; bottom:0; width:var(--sb-width);
  background:var(--sb-bg); border-right:1px solid var(--sb-border);
  padding:12px;                    /* um pouco mais compacto */
  overflow:hidden;                 /* nada de barra */
  -webkit-overflow-scrolling: touch;
  box-shadow:var(--shadow);
}
.sidebar-inner{
  transform: scale(var(--sb-scale));
  transform-origin: top left;
}

/* tamanhos mais compactos */
.logo-line{display:flex; align-items:center; justify-content:space-between; gap:10px}
.logo{height:34px}
.avatar-row{
  display:flex; align-items:center; gap:10px;
  width:100%; background:transparent; border:1px solid rgba(255,255,255,.10);
  padding:8px; border-radius:12px; margin-top:10px; cursor:pointer; text-align:left;
}
.avatar{width:38px; height:38px; border-radius:50%; object-fit:cover; border:2px solid rgba(255,255,255,.18)}
.me .name{display:block}
.me .role{color:var(--muted); font-size:.9rem}

.sb-nav{display:flex; flex-direction:column; gap:6px; margin-top:10px}
.item{
  padding:8px 10px; border-radius:10px; border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.08); transition:.22s; font-weight:600; position:relative;
}
.item:hover{transform:translateY(-2px)}
.item.active{
  box-shadow:0 0 0 2px var(--accent-neon) inset, 0 0 16px var(--accent-neon-soft);
  transform:none;
}
.item.danger{border-color:rgba(239,68,68,.5); color:#fecaca; background:rgba(239,68,68,.1)}
.item svg{ width:18px; height:18px; margin-right:8px; vertical-align:-3px; position:relative }

.divider{height:1px; margin:4px 0; background:linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent)}

.app-main{
  margin-left:var(--sb-width);
  flex:1; min-width:0; height:100vh; position:relative; display:flex; align-items:center; justify-content:center; padding:24px;
}

.maintenance{ font-size:clamp(22px, 4vw, 48px); text-align:center; padding:20px 24px }

/* Extra: telas muito baixas ficam ainda mais compactas */
@media (max-height: 820px){
  .logo{height:30px}
  .avatar{width:34px; height:34px}
  .item{padding:7px 9px}
}

/* Acessibilidade: reduzir movimento */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important }
}
/* ===== Scroll sempre visível e áreas que precisam rolar ===== */
html, body { height: 100%; }
body { overflow: auto !important; }

/* a coluna principal precisa poder rolar */
.app-main { overflow: auto !important; -webkit-overflow-scrolling: touch; }

/* páginas internas/containers */
.page-wrap, .wrap { min-height: 100%; overflow: visible; }

/* cards de texto longos (já tinha, reforço) */
.r-body { overflow: auto; }

/* popups grandes: limita a altura e ativa rolagem dentro */
.popup        { overflow-y: auto; }
.popup-card   { max-height: calc(100vh - 80px); overflow: auto; }
.cal-popup .popup-card { max-height: calc(100vh - 80px); overflow: auto; }

/* Deixa a barra de rolagem aparecer (webkit + firefox) */
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.35) transparent; }
*::-webkit-scrollbar        { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb  { background: rgba(255,255,255,.35); border-radius: 10px; }
*::-webkit-scrollbar-track  { background: rgba(255,255,255,.08); }
:root{
  --bg:#0A0F1A;
  --card:#0f172a;
  --text:#e2e8f0;
  --muted:#94a3b8;
  --primary:#22d3ee;
  --danger:#ef4444;
  --success:#10b981;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --radius:18px;

  --sb-bg:rgba(13,19,35,.92);
  --sb-border:rgba(255,255,255,.10);
  --sb-width:320px;

  --accent-neon: var(--primary);
  --accent-neon-soft: rgba(34,211,238,.35);

  --btn-grad-a:#FFD84D;
  --btn-grad-b:#22D3EE;

  --card-glass-bg: rgba(10,10,15,.60);
  --card-border-color: rgba(255,255,255,.22);

  --sb-scale: 1;

  /* defaults p/ motor de partículas (cada theme_* pode sobrescrever) */
  --particles-main: 255,216,77;  /* amarelo */
  --particles-alt:  34,211,238;  /* ciano */
}

*{box-sizing:border-box}
html,body{height:100%}

html{ transition: background-color .4s ease, color .4s ease }
body{
  margin:0; color:var(--text); background:var(--bg);
  font:500 16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;
  overflow:hidden;
  transition: background-color .4s ease, color .4s ease;
}

.theme-switching body,
.theme-switching .neon-card,
.theme-switching .popup-card,
.theme-switching .card{
  transition: all .4s ease !important;
}

a{color:inherit; text-decoration:none}
#bg-canvas{position:fixed; inset:0; z-index:0}
/* alias usado nas telas do CRM */
#bg-particles{position:fixed; inset:0; z-index:0; pointer-events:none}

/* ===== (restante IGUAL ao ATUAL) ===== */

/* Hover global … (idem)… */
/* Login/Popup … (idem)… */
/* App/Sidebar … (idem)… */

/* ===== Scroll/overflow ===== */
html, body { height: 100%; }
body { overflow: auto !important; }
.app-main { overflow: auto !important; -webkit-overflow-scrolling: touch; }
.page-wrap, .wrap { min-height: 100%; overflow: visible; }
.r-body { overflow: auto; }
.popup      { overflow-y: auto; }
.popup-card { max-height: calc(100vh - 80px); overflow: auto; }
.cal-popup .popup-card { max-height: calc(100vh - 80px); overflow: auto; }

* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.35) transparent; }
*::-webkit-scrollbar        { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb  { background: rgba(255,255,255,.35); border-radius: 10px; }
*::-webkit-scrollbar-track  { background: rgba(255,255,255,.08); }