/* PANDA-LITE — estilo base. REGRA Nº1: responsivo/proporcional em mobile, desktop e tablet. */
:root{
  --bg:#070711; --panel:#0b0b12; --panel2:#11111c;
  --txt:#e2e8f0; --muted:#94a3b8; --muted2:#64748b;
  --cyan:#67e8f9; --green:#34d399; --red:#f87171;
  --rgb:linear-gradient(120deg,#04d9ff,#00f2ff,#bc13fe,#ff00de);
  --radius:16px; --gut:16px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--txt);
  font-family:Inter,-apple-system,system-ui,"Segoe UI",Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; line-height:1.5;
}
a{color:var(--cyan);text-decoration:none}
button{font-family:inherit;cursor:pointer}

/* ---- caixa neon (mesma identidade do PandaChat) ---- */
.rgbbox{
  border:1px solid transparent; border-radius:var(--radius);
  background:linear-gradient(var(--panel),var(--panel)) padding-box, var(--rgb) border-box;
  box-shadow:0 0 22px -8px #00f2ff66, 0 0 44px -22px #bc13fe66;
}
.btn-rgb{
  width:100%; border:0; border-radius:12px; padding:14px; font-size:15px; font-weight:800;
  color:#000; background:var(--rgb); transition:filter .15s;
}
.btn-rgb:hover{filter:brightness(1.1)}
.btn-rgb:disabled{opacity:.6;cursor:not-allowed}

/* ---- LOGIN ---- */
.login-wrap{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:var(--gut)}
.login-card{width:100%;max-width:400px;padding:30px 26px}
.brand{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:6px}
.brand .mark{width:34px;height:34px;border-radius:9px;object-fit:cover;display:inline-block;flex-shrink:0}
.brand h1{font-size:22px;font-weight:900;margin:0;letter-spacing:-.01em}
.login-sub{text-align:center;color:var(--muted);font-size:13px;margin:0 0 22px}
.field{margin-bottom:14px}
.field label{display:block;font-size:12px;color:var(--muted);margin-bottom:6px;font-weight:600}
.field input{
  width:100%;padding:13px 14px;border-radius:11px;border:1px solid #ffffff1a;
  background:var(--panel2);color:var(--txt);font-size:15px;outline:none;transition:border-color .15s;
}
.field input:focus{border-color:#00f2ff88}
.err{background:#f8717118;border:1px solid #f8717144;color:#fca5a5;padding:11px 13px;border-radius:11px;font-size:13px;margin-bottom:14px}
.login-foot{text-align:center;color:var(--muted2);font-size:11px;margin-top:18px}

/* ---- SHELL do app (sidebar + conteúdo) ---- */
.shell{display:flex;min-height:100dvh}
.sidebar{width:232px;flex-shrink:0;background:var(--panel);border-right:1px solid #ffffff12;padding:14px 10px;display:flex;flex-direction:column;height:100dvh;position:sticky;top:0;overflow:hidden}
.side-brand{display:flex;align-items:center;gap:10px;padding:6px 10px 12px;flex-shrink:0}
.side-brand h1{font-size:18px;font-weight:900;margin:0}
.nav{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:2px;scrollbar-width:thin;scrollbar-color:#ffffff22 transparent}
.nav::-webkit-scrollbar{width:6px}.nav::-webkit-scrollbar-thumb{background:#ffffff22;border-radius:3px}
.side-foot{flex-shrink:0;padding-top:8px;margin-top:4px;border-top:1px solid #ffffff12}
.content{flex:1;min-width:0;padding:24px;max-width:1180px;margin:0 auto;width:100%}
.page-head{margin-bottom:20px}
.page-h{font-size:22px;font-weight:900;margin:0}
.page-sub{color:var(--muted);font-size:13px;margin:2px 0 0}
.nav-item{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:10px;color:var(--muted);font-size:14px;font-weight:600}
.nav-item:hover{background:#ffffff0d;color:var(--txt)}
.nav-item.active{background:#ffffff14;color:var(--txt)}
.nav-item .ic{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0}
.nav-item svg,.hero-stats svg{display:block}
/* ---- submenu colapsável (setinha) ---- */
.nav-group{display:flex;flex-direction:column}
.nav-grouphead{display:flex;align-items:center;gap:2px}
.nav-grouphead .nav-item{flex:1 1 auto}
.nav-arrow{background:transparent;border:0;color:var(--muted2);cursor:pointer;padding:9px 8px;display:inline-flex;align-items:center;border-radius:9px;flex-shrink:0;transition:.15s}
.nav-arrow:hover{color:var(--txt);background:#ffffff0d}
.nav-arrow svg{display:block;transition:transform .2s ease}
.nav-group.open>.nav-grouphead .nav-arrow svg{transform:rotate(180deg)}
.subnav{display:none;flex-direction:column;gap:1px;margin:2px 0 4px 26px;padding-left:10px;border-left:1px solid #ffffff14}
.nav-group.open>.subnav{display:flex}
.nav-subitem{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;color:var(--muted);font-size:13px;font-weight:600;text-decoration:none}
.nav-subitem .ic{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0}
.nav-subitem svg{display:block}
.nav-subitem:hover{background:#ffffff0d;color:var(--txt)}
.nav-subitem.active{background:#ffffff14;color:var(--txt)}
/* pai só-toggle (abre o submenu, não navega) */
.nav-grouptoggle{width:100%;text-align:left;background:transparent;border:0;cursor:pointer;font-family:inherit}
.nav-grouptoggle .lbl{flex:1 1 auto}
.nav-grouptoggle.hasactive{color:var(--txt)}
.nav-chev{display:inline-flex;align-items:center;color:var(--muted2);flex-shrink:0}
.nav-chev svg{display:block;transition:transform .2s ease}
.nav-group.open .nav-grouptoggle .nav-chev svg{transform:rotate(180deg)}
.hero-stats span{display:inline-flex;align-items:center;gap:7px}
.topbar{display:none;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--panel);border-bottom:1px solid #ffffff12;position:sticky;top:0;z-index:20}
.burger{background:none;border:0;color:var(--txt);font-size:22px;line-height:1}

/* ---- TABLET (menu compacto só ícones) ---- */
@media (max-width:1024px){
  .content{padding:18px}
  .sidebar{width:74px;padding:14px 8px}
  .nav-item span.lbl{display:none}
  .nav-item{justify-content:center}
  .side-brand h1{display:none}
  .side-brand{justify-content:center;padding:6px 0 12px}
  /* submenu em modo só-ícones: sem setinha, subitens sempre visíveis como ícones */
  .nav-arrow,.nav-chev{display:none}
  .nav-grouptoggle{justify-content:center}
  .subnav{display:flex!important;margin:0;padding:0;border:0;gap:2px}
  .nav-subitem span.lbl{display:none}
  .nav-subitem{justify-content:center;padding:11px 12px}
  .nav-subitem .ic{width:20px;height:20px}
}
/* ---- MOBILE (menu em gaveta) ---- */
@media (max-width:640px){
  :root{--gut:14px}
  .shell{flex-direction:column}
  .topbar{display:flex}
  .sidebar{position:fixed;inset:0 28% 0 0;width:72%;z-index:30;transform:translateX(-100%);transition:transform .2s;padding:14px 10px}
  .nav-open .sidebar{transform:translateX(0)}
  .sidebar .nav-item span.lbl{display:inline}
  .sidebar .nav-item{justify-content:flex-start}
  .sidebar .side-brand{justify-content:flex-start;padding:6px 10px 12px}
  .sidebar .side-brand h1{display:inline}
  /* na gaveta mobile: volta o submenu colapsável com rótulos */
  .sidebar .nav-arrow,.sidebar .nav-chev{display:inline-flex}
  .sidebar .nav-grouptoggle{justify-content:flex-start}
  .sidebar .subnav{display:none;margin:2px 0 4px 26px;padding-left:10px;border-left:1px solid #ffffff14;gap:1px}
  .sidebar .nav-group.open>.subnav{display:flex}
  .sidebar .nav-subitem span.lbl{display:inline}
  .sidebar .nav-subitem{justify-content:flex-start;padding:9px 10px}
  .sidebar .nav-subitem .ic{width:16px;height:16px}
  .content{padding:14px}
  .scrim{display:none;position:fixed;inset:0;background:#000a;z-index:25}
  .nav-open .scrim{display:block}
}