.auth-toggle-box::before { pointer-events: none; }

/* ======= Base (dashboard) ======= */
html, body { height: 100%; }
body {
  font-family: 'Google Sans', 'Poppins', sans-serif;
  background: #f8f9fa;
  display: flex;
  flex-direction: column;
}
main { flex: 1; }
footer {
  background: #fff;
  border-top: 1px solid #dee2e6;
  padding: .75rem 0;
  text-align: center;
  font-size: .875rem;
  color: #6c757d;
}

.btn-lucide i,
.btn-lucide svg { vertical-align: text-bottom; margin-right: .25rem; }
.card { transition: .2s; }
.card:hover { transform: translateY(-2px); }
.toast-container { position: fixed; top: 20px; right: 20px; z-index: 1100; }
#createBotModal .modal-body { padding: 1.5rem; }
.app-topbar { gap: .5rem; }
.app-topbar .user-pill { font-size: .875rem; }

/* ======= AUTH VIEW ======= */
.auth-screen {
  display: flex; /* default visible; JS will hide it when logged in */
  align-items: center; justify-content: center; min-height: 100vh;
  background: linear-gradient(90deg, #e2e2e2, #c9d6ff);
}
.auth-container{
  position: relative; width: 850px; height: 550px; background: #fff; margin: 20px; border-radius: 30px;
  box-shadow: 0 0 30px rgba(0,0,0,.2); overflow: hidden;
}
.auth-container h1{ font-size: 36px; margin: -10px 0; font-family: 'Poppins', sans-serif; }
.auth-container p{ font-size: 14.5px; margin: 15px 0; }

.auth-form-box{
  position: absolute; right: 0; width: 50%; height: 100%; background: #fff; display: flex; align-items: center;
  color: #333; text-align: center; padding: 40px; z-index: 1;
  transition: .6s ease-in-out 1.2s, visibility 0s 1s;
}
.auth-container.active .auth-form-box{ right: 50%; }
.auth-form-box.register{ visibility: hidden; }
.auth-container.active .auth-form-box.register{ visibility: visible; }
.auth-input-box{ position: relative; margin: 30px 0; }
.auth-input-box input{
  width: 100%; padding: 13px 50px 13px 20px; background: #eee; border-radius: 8px; border: none; outline: none;
  font-size: 16px; color: #333; font-weight: 500;
}
.auth-input-box input::placeholder{ color: #888; font-weight: 400; }
.auth-input-box i{ position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 20px; }
.auth-forgot{ margin: -15px 0 15px; }
.auth-forgot a{ font-size: 14.5px; color: #333; }
.auth-btn{
  width: 100%; height: 48px; background: #7494ec; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,.1);
  border: none; cursor: pointer; font-size: 16px; color: #fff; font-weight: 600;
}
.auth-social{ display: flex; justify-content: center; gap: 8px; }
.auth-social a{
  display: inline-flex; padding: 10px; border: 2px solid #ccc; border-radius: 8px;
  font-size: 24px; color: #333;
}
.auth-toggle-box{ position: absolute; width: 100%; height: 100%; }
.auth-toggle-box::before{
  content: ''; position: absolute; left: -250%; width: 300%; height: 100%; background: #7494ec;
  border-radius: 150px; z-index: 2; transition: 1.8s ease-in-out;
}
.auth-container.active .auth-toggle-box::before{ left: 50%; }
.auth-toggle-panel{
  position: absolute; width: 50%; height: 100%; color: #fff; display: flex; flex-direction: column;
  justify-content: center; align-items: center; z-index: 2; transition: .6s ease-in-out;
}
.auth-toggle-panel.toggle-left{ left: 0; transition-delay: 1.2s; }
.auth-container.active .auth-toggle-panel.toggle-left{ left: -50%; transition-delay: .6s; }
.auth-toggle-panel.toggle-right{ right: -50%; transition-delay: .6s; }
.auth-container.active .auth-toggle-panel.toggle-right{ right: 0; transition-delay: 1.2s; }
.auth-toggle-panel p{ margin-bottom: 20px; }
.auth-toggle-panel .auth-btn{
  width: 160px; height: 46px; background: transparent; border: 2px solid #fff; box-shadow: none;
}

@media (max-width: 650px){
  .auth-container{ height: calc(100vh - 40px); }
  .auth-form-box{ bottom: 0; width: 100%; height: 70%; right: 0 !important; transition: .6s ease-in-out; }
  .auth-container.active .auth-form-box{ right: 0; bottom: 30%; }
  .auth-toggle-box::before{ left: 0; top: -270%; width: 100%; height: 300%; border-radius: 20vw; }
  .auth-container.active .auth-toggle-box::before{ left: 0; top: 70%; }
  .auth-container.active .auth-toggle-panel.toggle-left{ left: 0; top: -30%; }
  .auth-toggle-panel{ width: 100%; height: 30%; }
  .auth-toggle-panel.toggle-left{ top: 0; }
  .auth-toggle-panel.toggle-right{ right: 0; bottom: -30%; }
  .auth-container.active .auth-toggle-panel.toggle-right{ bottom: 0; }
}
@media (max-width: 400px){
  .auth-form-box { padding: 20px; }
  .auth-toggle-panel h1{ font-size: 30px; }
}
/* ===== Acme-like Header ===== */
.site-header {
  position: sticky; top: 0; z-index: 1030;
  background: rgba(255,255,255,0.78);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid #e9ecef;
}
.site-header__inner {
  display:flex; align-items:center; justify-content:space-between;
  height:60px;
}
.brand { display:inline-flex; align-items:center; gap:.5rem; text-decoration:none; }
.brand-logo { display:inline-grid; place-items:center; width:28px; height:28px; border-radius:8px; background:#6f42c1; color:#fff; font-weight:700; }
.brand-name { font-weight:700; font-size:1.05rem; color:#111; }

.main-nav ul { display:flex; align-items:center; gap:1rem; list-style:none; margin:0; padding:0; }
.main-nav a { text-decoration:none; color:#333; font-weight:500; padding:.25rem .5rem; border-radius:.5rem; }
.main-nav a:hover { background:#f1f3f5; }

.dropdown { position:relative; }
.dropdown-toggle {
  display:flex; align-items:center; gap:.25rem;
  border:0; background:transparent; padding:.25rem .5rem; border-radius:.5rem; font-weight:500;
}
.dropdown-toggle:hover { background:#f1f3f5; cursor:pointer; }
.dropdown-menu {
  position:absolute; top:120%; left:0; min-width:180px;
  background:#fff; border:1px solid #e9ecef; border-radius:.75rem;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
  padding:.5rem; display:none;
}
.dropdown-menu a { display:block; padding:.5rem .75rem; border-radius:.5rem; color:#333; text-decoration:none; }
.dropdown-menu a:hover { background:#f8f9fa; }

@media (max-width:768px){
  .main-nav ul { gap:.5rem; }
  .brand-name { display:none; }
}
/* --- Simple nav layout (keeps your current header look) --- */
.main-nav .nav-list { display:flex; align-items:center; gap:1.25rem; margin:0; padding:0; list-style:none; }
.main-nav .nav-list > li { display:inline-flex; align-items:center; }
.main-nav a { text-decoration:none; color:#333; font-weight:500; padding:.25rem .5rem; border-radius:.5rem; }
.main-nav a:hover { background:#f1f3f5; }

/* --- Dropdown base --- */
.dropdown { position:relative; }
.dropdown-toggle {
  display:inline-flex; align-items:center; gap:.25rem;
  border:0; background:transparent; padding:.25rem .5rem; border-radius:.5rem; font-weight:500;
}
.dropdown-toggle:hover { background:#f1f3f5; cursor:pointer; }


/* --- Screenshot-style sections --- */
.dropdown-wide { padding:.5rem; }
.menu-section { padding:.25rem 0; }
.menu-label {
  font-size:.72rem; font-weight:700; color:#8a8f98;
  padding:.25rem .75rem; text-transform:uppercase; letter-spacing:.05em;
}
.menu-sep { height:1px; background:#edf1f3; margin:.35rem .5rem; }
.dropdown-menu a {
  display:block; padding:.6rem .75rem; border-radius:.5rem; color:#2f3337; text-decoration:none;
}
.dropdown-menu a:hover { background:#f8f9fa; }
/* Brand image + version pill */
.brand-img {
  height: 28px;
  width: auto;
  margin-right: 8px;
  display: inline-block;
}
.brand-badge {
  margin-left: 8px;
  padding: 2px 8px;
  font-size: .72rem;
  font-weight: 600;
  color: #fff;
  background: #6c757d;       /* neutral gray like your screenshot */
  border-radius: 999px;       /* pill */
  line-height: 1.2;
}

/* If you kept the <i> chevron and want to hide Bootstrap's caret instead, use this: */
/* .main-nav .dropdown-toggle::after { display: none !important; content: none !important; } */
/* Bigger, responsive, still tidy */

.brand-img { height: 60px; width: auto; margin-right: 8px; display:inline-block; }
.brand-img--square { aspect-ratio: 1 / 1; object-fit: contain; }

/* Brand text and version pill you already use */
.brand-badge { margin-left: 8px; padding: 2px 8px; font-size: .72rem; font-weight: 600;
  color:#fff; background:#6c757d; border-radius:999px; line-height:1.2; }

  /* Dropdown visibility controlled via class (no inline styles) */
.dropdown-menu { display: none; z-index: 1050; }
.dropdown-menu.is-open { display: block; }

/* Optional alignment: left for Explore, right for Help */
#exploreMenu { left: 0; right: auto; }
#helpMenu    { right: 0; left: auto; }