/* ========== BASE ========== */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; font-family: "Lato", sans-serif; background: #0f1113; color: #fff; overflow-y: hidden;}

/* ========== NAVBAR ========== */
.site-header { position: sticky; top: 0; z-index: 100; }
.nav { display: flex; align-items: center; justify-content: space-between; padding: 0 24px; height: 60px; background: #16171c; font-weight: 700; }
.nav-left { display: flex; align-items: center; gap: 12px; }
.brand-logo { height: 80px; }
.brand { font-weight: 700; font-size: 1.25rem; color: #fff; margin: 0; }
.nav-center { display: flex; gap: 24px; align-items: center; }
.nav-center > a { text-decoration: none; color: white; }
.nav-item { position: relative; font-size: 0.95rem; cursor: pointer; padding: 0 8px; line-height: 60px; transition: .2s; font-weight: 700; }
.nav-item:hover { color: #00aaff; }
.nav-item:hover::after { content: ''; position: absolute; bottom: 12px; left: 0; width: 100%; height: 2px; background: #00aaff; border-radius: 1px; }

/* Dropdown submenu */
.nav-item.with-submenu { position: relative; }
.submenu { display: none; position: absolute; top: 100%; left: 0; flex-direction: column; background: #16171c; min-width: 160px; border-radius: 6px; box-shadow: 0 12px 24px rgba(0,0,0,0.6); z-index: 50; }
.with-submenu:hover .submenu { display: flex; }
.submenu a { padding: 10px 16px; text-decoration: none; color: #fff; font-size: 0.95rem; font-weight: 700; border-radius: 6px; transition: 0.2s; line-height: 1.4; }
.submenu a:hover { background: #222; color: #00aaff; }

/* Right buttons */
.nav-right { display: flex; align-items: center; gap: 12px; }
.login-btn { background: #5865F2; color: #fff; padding: 6px 16px; border-radius: 6px; font-weight: 700; text-decoration: none; transition: .2s; }
.login-btn img { font-size: 18px; margin-right: 8px; vertical-align: middle; color: white; height: 25px; width: auto; }
.login-btn:hover { background: #4752c4; }
.premium-btn { background: #FFD700; color: #000; padding: 6px 16px; border-radius: 6px; font-weight: 700; text-decoration: none; transition: .2s; }
.premium-btn:hover { background: #e6c200; }

/* Hamburger (mobile) */
.hamburger { display: none; flex-direction: column; justify-content: center; gap: 4px; background: transparent; border: none; cursor: pointer; }
.hamburger span { width: 22px; height: 3px; background: #fff; border-radius: 2px; }

/* ========== MOBILE DRAWER ========== */
.mobile-drawer { position: fixed; right: -100%; top: 0; width: 280px; height: 100vh; background: #16171c; color: #fff; transition: right .25s ease; z-index: 110; display: flex; flex-direction: column; border-left: 1px solid #222; box-shadow: -4px 0 24px rgba(0,0,0,0.6); font-weight: 700; }
.mobile-drawer.open { right: 0; }
.mobile-header { display: flex; justify-content: space-between; align-items: center; padding: 16px; border-bottom: 1px solid #222; }
.mobile-brand { display: flex; align-items: center; gap: 12px; }
.mobile-brand img { height: 60px; }
.mobile-links { padding: 16px; display: flex; flex-direction: column; gap: 8px; overflow: auto; }

/* Mobile links & submenu */
.mobile-links a, .mobile-sub-menu a { padding: 10px 16px; text-decoration: none; color: #fff; border-radius: 6px; transition: 0.2s; font-weight: 700; }
.mobile-links a:hover, .mobile-sub-menu a:hover { background: #222; color: #00aaff; }
.mobile-sub { display: flex; flex-direction: column; }
.mobile-sub-menu { display: none; flex-direction: column; padding-left: 0; background: #16171c; margin-top: 4px; border-radius: 6px; box-shadow: 0 8px 16px rgba(0,0,0,0.5); }
.mobile-sub.open .mobile-sub-menu { display: flex; animation: fadeIn 0.2s ease forwards; }
@keyframes fadeIn { 0% { opacity: 0; transform: translateY(-5px); } 100% { opacity: 1; transform: translateY(0); } }

/* Submenu toggle button */
.mobile-sub-toggle { width: 100%; text-align: left; padding: 10px 16px; background: none; border: none; color: #fff; font-size: 0.95rem; cursor: pointer; display: flex; justify-content: space-between; align-items: center; border-radius: 6px; transition: 0.2s; font-weight: 700; }
.mobile-sub-toggle:hover { background: #222; color: #00aaff; }

/* Modern close button */
.mobile-close { background: #ff4d4d; color: #fff; border: none; font-size: 1.25rem; font-weight: 700; padding: 6px 12px; border-radius: 50%; cursor: pointer; transition: 0.2s; }
.mobile-close:hover { background: #a63232; }

/* ========== DOCS LAYOUT & SIDEBAR ========== */
.docs-layout { display: flex; height: calc(100vh - 60px); background: #0f1113; color: #fff; }
.docs-sidebar { width: 260px; background: #16171c; border-right: 1px solid #222; padding: 1rem; overflow-y: auto; position: sticky; top: 60px; height: calc(100vh - 60px); }
.docs-sidebar h3 { margin-bottom: 1rem; font-size: 1.1rem; }
.docs-sidebar ul { list-style: none; padding: 0; margin: 0; }

/* Search bar */
#doc-search { width: 100%; padding: 8px 10px; margin-bottom: 1rem; border-radius: 6px; border: 1px solid #222; background: #1a1c20; color: white; font-weight: 600; }
#doc-search:focus { outline: none; border-color: #00aaff; box-shadow: 0 0 2px #00aaff; }

/* Docs groups + toggles + slide animation */
.docs-group { margin-bottom: 1rem; }
.docs-group-toggle { width: 100%; background: none; border: none; color: #fff; font-weight: 700; font-size: 0.95rem; padding: 8px 4px; text-align: left; cursor: pointer; transition: color .2s; display: flex; justify-content: space-between; align-items: center; }
.docs-group-toggle:hover { color: #00aaff; }
.docs-group-toggle .arrow { display: inline-block; transition: transform .25s ease; }

/* Collapsible sublist with slide effect */
.docs-sub { list-style: none; padding-left: 12px; margin: 6px 0; overflow: hidden; max-height: 0; opacity: 0; transition: max-height .3s ease, opacity .22s ease; }
.docs-sub.expanded { max-height: 400px; opacity: 1; }

/* Links inside sidebar */
.docs-sub li a { display: block; padding: 4px 0; text-decoration: none; color: #cfcfcf; transition: .2s; font-weight: 600; }
.docs-sub li a:hover { color: #00aaff; }
.docs-sidebar li a { display: block; padding: .5rem; border-radius: 6px; text-decoration: none; color: #cfcfcf; font-weight: 600; transition: .2s; }
.docs-sidebar li a:hover { background: #222; color: #00aaff; }

/* Docs content */
.docs-toggle-btn {display: none; width: 100%; padding: 14px; margin-top: 1rem; background: #16171c; border: 1px solid #222; color: white; font-size: 1rem; font-weight: 700; text-align: center; cursor: pointer;}
.docs-toggle-btn:hover {background: #1b1d21;}

.section-divider {width: 100%; max-width: auto; margin: 2rem auto; height: 1px; background: rgba(255,255,255,0.1); border-radius: 2px;}
.mini-section-divider {width: 50%; margin: 2rem auto; height: 1px; background: rgba(255,255,255,0.1); border-radius: 2px;}
.alert {padding: 20px; background-color: rgba(141, 0, 0, 0.5); color: white; margin-bottom: 15px;}
#intro p a {color: #00aaff;}
.doc-table {width: 100%; border-collapse: collapse; margin: 2rem 0; font-size: 0.95rem; background: #131517; border: 1px solid #1f2225; border-radius: 8px; overflow: hidden;}
.doc-table thead th {background: #1c1f23; padding: 12px 14px; text-align: left; font-weight: 800; color: #fff; border-bottom: 1px solid #222;}
.doc-table tbody td {padding: 12px 14px; color: #d1d1d1; border-bottom: 1px solid #1f2225;}
.doc-table tbody tr:last-child td {border-bottom: none;}
.doc-table tbody tr:hover {background: #1a1d20;}
.doc-table code {background: #00000033; padding: 2px 6px; border-radius: 4px; font-family: monospace; color: #00aaff; font-size: 0.9rem;}
.docs-content { flex: 1; padding: 2rem 3rem; overflow-y: auto; }
.docs-content h1, .docs-content h2 { margin-top: 2rem; font-weight: 800; }
pre { background: #1b1d21; padding: 1rem; border-radius: 8px; overflow-x: auto; font-family: "Lato", sans-serif;}
pre li {margin-left: 25px;}

/* ========== FOOTERS ========== */
.footer-cta {background: #16171c; padding: 4rem 2rem; text-align: center; color: white;}
.footer-cta h2 {font-size: 2.4rem; font-weight: 700; margin-bottom: 2rem;}
.footer-cta .cta-btn {display: inline-block; background: #fff; color: #4c6fff; padding: 14px 26px; border-radius: 10px; font-weight: 700; font-size: 1rem; text-decoration: none; transition: .2s;}
.footer-cta .cta-btn:hover {transform: translateY(-2px); opacity: .9;}

.footer {background: #16171c; padding: 4rem 2rem 2rem;}
.footer-inner {max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; gap: 4rem;}
.footer-brand img {height: 60px; margin-bottom: 1.2rem;}
.footer-brand p {max-width: 260px; color: #cfcfcf; margin-bottom: 1.4rem; line-height: 1.5;}
.footer-links {display: flex; gap: 4rem;}
.footer-col h4 {margin-bottom: 1rem; font-weight: 700; font-size: 1.05rem;}
.footer-col a {display: block; text-decoration: none; color: #cfcfcf; margin-bottom: .55rem; font-size: .9rem; transition: .2s;}
.footer-col a:hover {color: #fff;}
.footer-bottom {text-align: center; color: #636363; padding-top: 2rem; margin-top: 2rem; border-top: 1px solid #232427; font-size: .85rem;}

/* ========== RESPONSIVE ========== */
@media(max-width:900px) {
  .docs-toggle-btn {display: block;}
  .docs-side

  .docs-layout { flex-direction: column; }
  .docs-sidebar {position: fixed; left: -100%; top: 60px; height: calc(100vh - 60px); width: 260px; z-index: 200; transition: left .25s ease;}
  .docs-sidebar.open {left: 0;}
  .docs-content { padding: 1rem; }
  .nav-center, .premium-btn, .brand { display: none; }
  .hamburger { display: flex; }
  .footer-inner { flex-direction: column; text-align: center; }
  .footer-links { flex-direction: column; gap: 2rem; }
  .footer-brand p { margin: 0 auto; }
}