.navbar-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #4c4c4c;
    color: white;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
  }


  /* ==== Dashboard page = body[data-page="index"] ==== */
body[data-page="index"] {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    background: radial-gradient(circle at top, #111827 0%, #020617 55%, #020617 100%);
    min-height: 100vh;
    color: #e5e7eb;
  }
  
  /* Dashboard container ko transparent + center me rakho */
  body[data-page="index"] .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
  }
  
  /* Stats + cards ko background transparent rakhne ke liye */
  body[data-page="index"] .card,
  body[data-page="index"] .stats .stat {
    background: rgba(15, 23, 42, 0.95);
    border-radius: 20px;
    box-shadow: 0 22px 50px rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(148, 163, 184, 0.35);
    color: #e5e7eb;
  }
  /* Sidebar action buttons (Make same style as quizzes glass cards) */
body[data-page="index"] .qa .btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(148, 163, 184, 0.25);
    color: #e5e7eb;
    backdrop-filter: blur(8px);
    border-radius: 12px;
    padding: 0.9rem 1.2rem;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
  }
  
  body[data-page="index"] .qa .btn:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.35);
    transform: translateY(-2px);
  }
  body[data-page="index"] .list .item {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 14px;
    padding: 1rem 1.2rem;
    margin-bottom: 1rem;
    backdrop-filter: blur(6px);
  }
  body[data-page="index"] .stat {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    backdrop-filter: blur(6px);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  }
  body[data-page="index"] .list .item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 1rem 1.2rem;
    margin-bottom: 1rem;
    backdrop-filter: blur(8px);
    transition: background 0.2s ease, border-color 0.2s ease;
  }
  
  body[data-page="index"] .list .item:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
  }
  body[data-page="index"] .qa .btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 14px;
    padding: 0.85rem 1.2rem;
    color: #e5e7eb;
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.25s ease;
  }
  
  body[data-page="index"] .qa .btn:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
  }
  body[data-page="index"] {
    background: radial-gradient(circle at top, #111827 0%, #020617 55%, #020617 100%);
    color: #e5e7eb;
  }
  body[data-page="index"] .stat {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 16px;
    backdrop-filter: blur(12px);
    box-shadow:
      0 8px 18px rgba(0, 0, 0, 0.35),
      inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  }
  body[data-page="index"] .list .item {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 1.1rem 1.3rem;
    backdrop-filter: blur(14px);
    box-shadow:
      0 6px 15px rgba(0, 0, 0, 0.40),
      inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  }
  body[data-page="index"] .qa .btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 0.9rem 1.2rem;
    backdrop-filter: blur(16px);
    box-shadow:
      0 8px 20px rgba(0, 0, 0, 0.35),
      inset 0 0 0 1px rgba(255, 255, 255, 0.06);
    color: #e5e7eb;
    transition: all 0.25s ease;
  }
  
  body[data-page="index"] .qa .btn:hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.18);
    transform: translateY(-2px);
  }
  body[data-page="index"] .container {
    max-width: 980px;
    margin: 0 auto;
    padding-top: 40px;
  }
  /* Tighter stat cards like quizzes */
body[data-page="index"] .stat {
    height: 110px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 0 22px;
  
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 18px;
    backdrop-filter: blur(14px);
    box-shadow:
      0 8px 24px rgba(0, 0, 0, 0.45),
      inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  }
  
  body[data-page="index"] .stat .v {
    font-size: 22px;
    font-weight: 700;
    color: #e5e7eb;
  }
  
  body[data-page="index"] .stat .t {
    font-size: 13px;
    opacity: 0.75;
  }
  body[data-page="index"] .qa .btn {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    backdrop-filter: blur(12px);
    padding: 12px 20px;
  
    box-shadow:
      0 7px 18px rgba(0, 0, 0, 0.45),
      inset 0 0 1px rgba(255, 255, 255, 0.07);
  
    transition: 0.25s ease;
  }
  
  body[data-page="index"] .qa .btn:hover {
    background: rgba(255, 255, 255, 0.10);
    transform: translateY(-2px);
  }
  body[data-page="index"] .list .item {
    width: 100%;
    max-width: 900px;
  }
  body[data-page="index"] .h1 {
    margin-bottom: 2px;
  }
  
  body[data-page="index"] .sub {
    margin-top: 0;
    margin-bottom: 22px;
    opacity: 0.9;
  }
  /* Dashboard: hide container until data is ready */
body[data-page="index"] .container {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 220ms ease-out, transform 220ms ease-out;
  }
  
  /* JS se ye class add hogi jab data load ho jayega */
  body[data-page="index"].dashboard-loaded .container {
    opacity: 1;
    transform: translateY(0);
  }
  /* =====================================
   PREMIUM MOBILE BURGER + DRAWER
   ===================================== */

/* ---- Burger (3-line icon) ---- */
.al-burger {
    display: none;
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.25s ease;
    box-shadow: 0 6px 20px rgba(0,0,0,0.35);
  }
  
  .al-burger:hover {
    transform: scale(1.05);
    background: rgba(255,255,255,0.12);
  }
  
  .al-burger span {
    width: 22px;
    height: 2.6px;
    border-radius: 999px;
    background: #e5e7eb;
    transition: 0.22s ease;
  }
  
  .al-burger span + span {
    margin-top: 5px;
  }
  
  /* morph → X */
  .al-burger.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .al-burger.active span:nth-child(2) {
    opacity: 0;
  }
  .al-burger.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
  
  /* ------------------------------------------------------------------
     BACKDROP
  ------------------------------------------------------------------ */
  .al-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    z-index: 900;
  }
  
  .al-drawer-backdrop.show {
    opacity: 1;
    pointer-events: auto;
  }
  
  /* ------------------------------------------------------------------
     DRAWER PANEL
  ------------------------------------------------------------------ */
  .al-drawer {
    position: fixed;
    top: 0;
    left: 0;
    width: 80vw;
    max-width: 360px;
    height: 100dvh;
    padding: 22px 22px 32px;
  
    background: rgba(14, 22, 40, 0.68);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border-right: 1px solid rgba(255,255,255,0.12);
  
    transform: translateX(-105%);
    transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
    z-index: 1100;
  
    display: flex;
    flex-direction: column;
  
    box-shadow: 8px 0px 40px rgba(0,0,0,0.55);
  }
  
  .al-drawer.open {
    transform: translateX(0);
  }
  
  /* ------------------------------------------------------------------
     HEADER
  ------------------------------------------------------------------ */
  .al-drawer-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 22px;
  }
  
  .al-drawer-head h3 {
    margin: 0;
    color: #f8fafc;
    font-size: 1.15rem;
    font-weight: 600;
  }
  
  .al-drawer-close {
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: rgba(255,255,255,0.10);
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    backdrop-filter: blur(12px);
    transition: 0.22s ease;
  }
  
  .al-drawer-close:hover {
    background: rgba(255,255,255,0.18);
  }
  
  /* ------------------------------------------------------------------
     LINK BUTTONS (Glass + Holographic border)
  ------------------------------------------------------------------ */
  .al-drawer-links a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
  
    padding: 14px 18px;
    border-radius: 14px;
  
    font-size: 1rem;
    text-decoration: none;
    color: #e0e7ff;
  
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255,255,255,0.10);
  
    box-shadow: 0 8px 18px rgba(0,0,0,0.35);
    backdrop-filter: blur(14px);
  
    transition: 0.22s ease;
  }
  
  .al-drawer-links a + a {
    margin-top: 12px;
  }
  
  /* Hover → slight lift + glow */
  .al-drawer-links a:hover {
    transform: translateY(-2px);
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.18);
    box-shadow: 0 12px 26px rgba(0,0,0,0.45);
  }
  
  /* ------------------------------------------------------------------
     LOGOUT BUTTON INSIDE DRAWER
  ------------------------------------------------------------------ */
  .al-drawer .logout-btn {
    width: 100%;
    margin-top: 20px;
    border-radius: 14px;
  }
  
  
  /* ------------------------------------------------------------------
     RESPONSIVE BEHAVIOR
  ------------------------------------------------------------------ */
  
  @media (min-width: 861px) {
    .al-burger,
    .al-drawer,
    .al-drawer-backdrop {
      display: none !important;
    }
  }
  
  @media (max-width: 860px) {
    .nav .links { display: none !important; }
    .al-burger { display: flex; }
  }
  /* Fix header layout */
/* --- GLOBAL HEADER LAYOUT --- */
.nav-inner {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* sab left se start */
    gap: 16px;
  }
  
  /* Avatar by default right side push hone ke liye */
  .navbar-avatar {
    margin-left: auto;
  }
  
  /* Burger default hidden (sirf mobile pe dikhayenge) */
  #al-burger {
    display: none;
    margin-left: 8px;
  }
  
  @media (min-width: 861px) {
    .nav .links {
      display: flex;
      align-items: center;
      gap: 20px;
    }
  
    .navbar-avatar {
      margin-left: 16px;
    }
  
    #al-burger {
      display: none !important; /* desktop pe burger off */
    }
  }
  @media (max-width: 860px) {
    .nav .links {
      display: none !important;   /* menu hide */
    }
  
    /* brand left, avatar right */
    .navbar-avatar {
      margin-left: auto;          /* brand ke baad jitni space hai le lega */
    }
  
    #al-burger {
      display: flex !important;   /* burger visible */
      align-items: center;
      justify-content: center;
    }
  }
  /* Default (desktop) */
.nav-inner {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
  }
  
  .navbar-avatar {
    margin-left: auto;
  }
  
  #al-burger {
    display: none; /* desktop me hidden */
  }
  
  
  /* ----------- MOBILE FIX ----------- */
  @media (max-width: 860px) {
  
    /* hide desktop nav */
    .nav .links {
      display: none !important;
    }
  
    /* HEADER FIX: logo left, avatar right, burger right */
    .nav-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;  /* logo left — avatar+burger right */
      gap: 0;
    }
  
    /* avatar right side */
    .navbar-avatar {
      margin-left: 0;
      margin-right: 12px;
      order: 2;   /* right side */
    }
  
    /* burger right side */
    #al-burger {
      display: flex !important;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 4px;
      width: 32px;
      height: 32px;
      cursor: pointer;
      order: 3;   /* right-right side */
    }
  
    /* burger lines */
    #al-burger span {
      display: block;
      width: 22px;
      height: 3px;
      background: #fff;
      border-radius: 3px;
    }
  
    /* brand always left side */
    .brand {
      order: 1;
    }
  
  }
  /* ======== DESKTOP HEADER (default) ======== */
.nav-inner {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
  }
  
  /* logo container */
  .brand {
    display: flex;
    align-items: center;
  }
  
  /* desktop par links dikhengi, avatar right side par */
  .nav .links {
    display: flex;
    align-items: center;
    gap: 18px;
  }
  
  .navbar-avatar {
    margin-left: auto;
  }
  
  /* burger desktop me hidden */
  #al-burger {
    display: none;
  }
  
  
  /* ======== MOBILE HEADER (<= 860px) ======== */
  @media (max-width: 860px) {
  
    /* desktop nav hide */
    .nav .links {
      display: none !important;
    }
  
    /* header: logo left, avatar + burger right */
    .nav-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0;
    }
  
    /* logo always left */
    .brand {
      order: 1;
      margin-right: auto;
    }
  
    /* avatar right side (before burger) */
    .navbar-avatar {
      order: 2;
      margin-left: auto;
      margin-right: 10px;
    }
  
    /* burger bilkul right corner */
    #al-burger {
      order: 3;
      display: flex !important;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 4px;
      width: 28px;
      height: 28px;
      cursor: pointer;
    }
  
    #al-burger span {
      display: block;
      width: 20px;
      height: 3px;
      background: #ffffff;
      border-radius: 999px;
    }
  }

  /* Main header row */
.nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }
  
  /* Right section: avatar + burger side-by-side */
  .nav-right {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  
  /* By default burger hidden (desktop) */
  .al-burger {
    display: none;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    border: none;
    outline: none;
    background: rgba(15, 23, 42, 0.95);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
  }
  
  /* burger lines */
  .al-burger span {
    display: block;
    width: 16px;
    height: 2px;
    border-radius: 999px;
    background: #e5e7eb;
    margin: 2px 0;
  }
  
  /* Avatar style (same as pehle) */
  .navbar-avatar {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    background: #4c4c4c;
    color: white;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
  }
  
  /* MOBILE: links hide, burger show */
  @media (max-width: 860px) {
    .links {
      display: none;
    }
  
    .al-burger {
      display: inline-flex; /* avatar ke just right me */
    }
  }
  
  /* DESKTOP: burger hide, links show (safety) */
  @media (min-width: 861px) {
    .al-burger {
      display: none;
    }
    .links {
      display: flex;
      gap: 24px;
      align-items: center;
    }
  }
  .nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between !important;  /* THIS FIXES IT */
    gap: 16px;
  }
  .nav-right {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  @media (max-width: 860px) {
    .links {
      display: none !important;
    }
    .al-burger {
      display: inline-flex !important;
    }
  }
  @media (min-width: 861px) {
    .al-burger {
      display: none !important;
    }
    .links {
      display: flex !important;
    }
  }
  /* =========================
   CLEAN + FINAL HEADER LAYOUT
   ========================= */

.nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between; /* <-- MAGIC */
    padding: 0 12px;
    height: 64px;
  }
  
  /* --- BRAND / LOGO --- */
  .brand {
    display: flex;
    align-items: center;
  }
  
  /* --- RIGHT SIDE: Avatar + Burger --- */
  .nav-right {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  
  /* --- Avatar --- */
  .navbar-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #4c4c4c;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    user-select: none;
  }
  
  /* --- BURGER BUTTON --- */
  .al-burger {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 10px;
    background: rgba(255,255,255,0.08);
    display: none; /* Desktop default */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    cursor: pointer;
  }
  
  .al-burger span {
    width: 20px;
    height: 2px;
    background: #fff;
    border-radius: 999px;
  }
  
  /* --- DESKTOP MODE --- */
  @media (min-width: 861px) {
    .links {
      display: flex !important;
      gap: 22px;
      align-items: center;
    }
  
    .al-burger {
      display: none !important;
    }
  }
  
  /* --- MOBILE MODE --- */
  @media (max-width: 860px) {
  
    /* Hide desktop nav */
    .links {
      display: none !important;
    }
  
    /* Show burger */
    .al-burger {
      display: flex !important;
    }
  }
  /* === FINAL HEADER ALIGNMENT FIX (MOBILE) === */
@media (max-width: 860px) {
    .nav-inner {
      display: flex;
      align-items: center;
      padding: 0 12px;
    }
  
    /* Logo always left */
    .brand {
      order: 1;
    }
  
    /* Avatar + burger always right */
    .nav-right {
      order: 2;
      margin-left: auto;
      display: flex;
      align-items: center;
      gap: 10px;        /* avatar aur burger ke beech thoda gap */
    }
  
    /* Desktop links hide already – just safety */
    .nav .links {
      display: none !important;
    }
  
    /* Burger size thoda tight */
    .al-burger {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: rgba(15, 23, 42, 0.95);
      display: inline-flex;
      justify-content: center;
      align-items: center;
      padding: 0;
    }
  
    .al-burger span {
      width: 18px;
      height: 2px;
      border-radius: 999px;
      background: #e5e7eb;
      margin: 2px 0;
    }
  }

  /* ============= MOBILE NAV ONLY ============= */

/* Burger base */
.al-burger {
    display: none;           /* desktop par hidden */
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: none;
    background: rgba(15, 23, 42, 0.9);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    margin-left: 12px;
  }
  
  /* three lines */
  .al-burger span {
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 999px;
    background: #e5e7eb;
    transition: transform 0.22s ease, opacity 0.22s ease, background 0.22s ease;
  }
  
  .al-burger span + span {
    margin-top: 4px;
  }
  
  /* morph to X when active */
  .al-burger.active span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }
  .al-burger.active span:nth-child(2) {
    opacity: 0;
  }
  .al-burger.active span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }
  
  /* Drawer backdrop */
  .al-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
    z-index: 900;
  }
  
  /* Drawer panel */
  .al-drawer {
    position: fixed;
    top: 0;
    left: 0;
    width: 78vw;
    max-width: 340px;
    height: 100dvh;
    background: radial-gradient(circle at top, #020617 0%, #020617 40%, #020617 100%);
    box-shadow: 8px 0 30px rgba(0, 0, 0, 0.7);
    transform: translateX(-105%);
    transition: transform 0.22s ease;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    padding: 16px 18px 24px;
  }
  
  .al-drawer.open {
    transform: translateX(0);
  }
  
  .al-drawer-backdrop.show {
    opacity: 1;
    pointer-events: auto;
  }
  
  /* Drawer header */
  .al-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
  }
  
  .al-drawer-head h3 {
    margin: 0;
    font-size: 1.05rem;
    color: #e5e7eb;
  }
  
  .al-drawer-close {
    border: none;
    background: rgba(15, 23, 42, 0.9);
    color: #e5e7eb;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    cursor: pointer;
  }
  
  /* Drawer links */
  .al-drawer-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  
  .al-drawer-links a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 12px;
    text-decoration: none;
    color: #e5e7eb;
    font-size: 0.98rem;
    background: rgba(15, 23, 42, 0.9);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.5);
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  }
  
  .al-drawer-links a:hover {
    transform: translateY(-1px);
    background: rgba(30, 64, 175, 0.85);
    box-shadow: 0 12px 24px rgba(30, 64, 175, 0.6);
  }
  
  /* Logout inside drawer reuse same .logout-btn style from your CSS */
  .al-drawer .logout-btn {
    width: 100%;
    justify-content: center;
  }
  
  /* ====== RESPONSIVE BEHAVIOUR ====== */
  
  /* Desktop: no burger, no drawer */
  @media (min-width: 861px) {
    .al-burger {
      display: none !important;
    }
    .al-drawer,
    .al-drawer-backdrop {
      display: none !important;
    }
  }
  
  /* Mobile: hide big nav links, show burger */
  @media (max-width: 860px) {
    .nav .links {
      display: none;
    }
    .al-burger {
      display: flex;
    }
  }
  
  /* =========================
     FINAL HEADER LAYOUT
     (burger LEFT, logo CENTER, avatar RIGHT on mobile)
     ========================= */
  
  /* Base layout (desktop first) */
  .nav-inner {
    display: flex;
    align-items: center;
    height: 64px;
    padding: 0 16px;
  }
  
  /* Elements order (desktop) */
  #al-burger {
    order: 1;
    margin-right: 12px;
  }
  
  .brand {
    order: 2;
    display: flex;
    align-items: center;
  }
  
  .links {
    order: 3;
    display: flex;
    align-items: center;
    gap: 20px;
    margin-left: 24px;
  }
  
  .navbar-avatar {
    order: 4;
    margin-left: auto;
  }
  
  /* Burger look (common) */
  .al-burger {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    border: none;
    background: rgba(15, 23, 42, 0.9);
    display: none;          /* desktop me hidden, mobile me dikhayenge */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    padding: 0;
    cursor: pointer;
  }
  
  .al-burger span {
    width: 20px;
    height: 2px;
    border-radius: 999px;
    background: #e5e7eb;
  }
  
  /* ---------- Desktop (>= 861px) ---------- */
  @media (min-width: 861px) {
    .links {
      display: flex !important;
    }
    #al-burger,
    .al-burger {
      display: none !important;
    }
  }
  
  /* ---------- Mobile (<= 860px) ---------- */
  @media (max-width: 860px) {
  
    /* Desktop nav hide */
    .links {
      display: none !important;
    }
  
    /* Order: burger LEFT, logo CENTER, avatar RIGHT */
    #al-burger,
    .al-burger {
      display: flex !important;
      order: 1;
      margin: right 0;
    }
  
    .brand {
      order: 2;
      margin: 0 auto;      /* center logo */
    }
  
    .navbar-avatar {
      order: 3;
      margin-left: 0;
    }
  }
  /* FINAL HEADER LAYOUT OVERRIDE  */
/* full width row */
.nav {
    width: 100%;
  }
  
  /* ---- main header row ---- */
  .nav-inner {
    width: 100%;
    max-width: none !important;
    margin: 0 !important;
  
    padding: 0 16px;
  
    display: flex;
    align-items: center;
    justify-content: space-between;   /* LEFT | CENTER | RIGHT */
  }
  
  /* LEFT: burger (fixed width) */
  .al-burger {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: none;
    background: rgba(15, 23, 42, 0.95);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }
  
  .al-burger span {
    width: 22px;
    height: 3px;
    margin: 3px 0;
    border-radius: 999px;
    background: #ffffff;
  }
  
  /* CENTER: logo exactly middle (because left + right items same width) */
  .brand {
    display: flex;
    justify-content: center;
    flex: 1;                    /* middle ka area occupy kare */
  }
  
  .brand-logo-svg {
    height: 34px;
  }
  
  /* RIGHT: avatar fixed width (same as burger) */
  .navbar-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, #a855f7, #ec4899);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
  }
  
  /* mobile/desktop visibility */
  @media (max-width: 860px) {
    .links { display: none !important; }
    .al-burger { display: flex !important; }
  }
  
  @media (min-width: 861px) {
    .al-burger { display: none !important; }  /* desktop pe chhupa sakte ho agar chaho */
  }

  /* ---- Burger final style override ---- */
.al-burger {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: radial-gradient(circle at 30% 0%,
                rgba(148, 163, 184, 0.40),
                rgba(15, 23, 42, 0.95));
    box-shadow:
      0 10px 25px rgba(0, 0, 0, 0.65),
      0 0 0 1px rgba(15, 23, 42, 0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0;
    cursor: pointer;
  }
  
  /* 3 white lines clearly visible */
  .al-burger span {
    display: block;
    width: 20px;
    height: 3px;
    border-radius: 999px;
    background: #f9fafb;      /* pure white-ish */
    opacity: 0.95;
  }
  /* Drawer Logout (fix ugly white button) */
.al-drawer .logout-btn {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #f1f5f9 !important;
    padding: 12px;
    width: 100%;
    border-radius: 16px;
    text-align: center;
    font-weight: 600;
    backdrop-filter: blur(14px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.35);
  }
  
  /* Hover */
  .al-drawer .logout-btn:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    transform: translateY(-2px);
  }
  /* ===== DESKTOP NAVBAR FIX ===== */
@media (min-width: 861px) {

    .nav-inner {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      height: 72px;
      padding: 0 32px;
    }
  
    /* Logo left */
    .brand {
      justify-self: start;
      display: flex;
      align-items: center;
      gap: 10px;
    }
  
    /* Center links with spacing */
    .links {
      justify-self: center;
      display: flex !important;
      gap: 38px !important;
      align-items: center;
    }
  
    /* Avatar + Logout right side */
    .nav-right-desktop {
      justify-self: end;
      display: flex;
      align-items: center;
      gap: 18px;
    }
  
    /* Styled logout button */
    .logout-btn-desktop {
      background: rgba(255,255,255,0.10);
      border: 1px solid rgba(255,255,255,0.25);
      color: #fff;
      padding: 8px 18px;
      border-radius: 10px;
      cursor: pointer;
      font-size: 14px;
      transition: 0.25s ease;
    }
  
    .logout-btn-desktop:hover {
      background: rgba(255,255,255,0.22);
      border-color: rgba(255,255,255,0.35);
      transform: translateY(-2px);
    }
  
  }
  /* ===== DESKTOP LOGOUT BUTTON ===== */
.logout-btn-desktop {
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    padding: 8px 18px;
    border-radius: 12px;
    font-size: 14px;
    cursor: pointer;
    transition: 0.25s ease;
    backdrop-filter: blur(12px);
}

.logout-btn-desktop:hover {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.35);
    transform: translateY(-2px);
}
.logout-btn-desktop {
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    padding: 10px 22px;
    border-radius: 14px;
    font-size: 16px;         /* INCREASED */
    font-weight: 600;        /* BOLDER TEXT */
    letter-spacing: 0.3px;   /* PREMIUM LOOK */
    cursor: pointer;
    transition: 0.25s ease;
    backdrop-filter: blur(12px);
}

.logout-btn-desktop:hover {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.35);
    transform: translateY(-2px);
}
/* Desktop nav link size bigger */
@media (min-width: 861px) {
    .nav .links a {
      font-size: 20px !important;   /* size bada */
      font-weight: 600 !important;  /* bold smooth */
      letter-spacing: 0.3px !important;
      color: #d1d5db !important;    /* thoda soft white */
    }
  }
  /* Make mobile drawer ALWAYS on top of everything */
.al-drawer {
    z-index: 9999 !important;
  }
  
  .al-drawer-backdrop {
    z-index: 9998 !important;
  }
  
  /* Burger khud header me hi rahe */
  .al-burger {
    z-index: 9999; /* optional, but safe */
  }
  /* ✅ Global mobile drawer fix: make links scrollable so Logout never gets cut */
.al-drawer{
  height: 100vh;
}

.al-drawer .al-drawer-links{
  display: flex;
  flex-direction: column;
  height: calc(100vh - 70px); /* drawer head approx height */
  overflow-y: auto;
  padding-bottom: 16px;
  -webkit-overflow-scrolling: touch;
}

/* ✅ keep logout visible like a normal menu row */
.al-drawer .logout-btn{
  flex: 0 0 auto;
  width: 100%;
  margin-top: 14px;
}
/* ===== NAVBAR HARD LOCK (paste at END of index.css) ===== */
header.nav{
  height:72px !important;
  position: sticky !important;
  top:0 !important;
  z-index:9999 !important;
}

header.nav .nav-inner{
  height:72px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:18px !important;
  padding:0 22px !important;
  max-width:1350px !important;
  margin:0 auto !important;
}

header.nav .brand-logo-svg{ height:28px !important; }

header.nav .navbar-avatar{
  width:40px !important;
  height:40px !important;
  flex:0 0 auto !important;
}

@media (max-width:860px){
  header.nav .links{ display:none !important; }
  header.nav #al-burger{ display:inline-flex !important; }
}
/* ===== NAV TEXT COLOR (match screenshot style) ===== */

:root{
  --nav-text: rgba(226,232,240,0.78);   /* soft white/gray */
  --nav-text-hover: rgba(248,250,252,0.96);
  --nav-text-active: rgba(248,250,252,1);
  --nav-accent: rgba(129,140,248,0.85);
}

/* Your tabs/buttons */
.nav-tab{
  color: var(--nav-text) !important;
}

.nav-tab:hover{
  color: var(--nav-text-hover) !important;
}

.nav-tab.active{
  color: var(--nav-text-active) !important;
  border-bottom-color: var(--nav-accent) !important;
}

/* If you also have anchor based header links anywhere */
.nav .links a,
.navbar a{
  color: var(--nav-text) !important;
}

.nav .links a:hover,
.navbar a:hover{
  color: var(--nav-text-hover) !important;
}
/* ===============================
   DESKTOP HEADER = PERFECT SPACING
   =============================== */
   @media (min-width: 861px){

    header.nav .nav-inner{
      max-width: 1350px !important;
      margin: 0 auto !important;
      padding: 0 26px !important;
  
      display: grid !important;
      grid-template-columns: auto 1fr auto auto; /* brand | links | logout | avatar */
      align-items: center !important;
      column-gap: 18px !important;
    }
  
    /* Brand left */
    header.nav .brand{
      justify-self: start;
    }
  
    /* Links center with equal spacing */
    header.nav .links{
      justify-self: center;
      display: flex !important;
      align-items: center !important;
  
      /* MAGIC: equal feel + responsive */
      gap: clamp(22px, 4vw, 54px) !important;
      padding: 0 10px;
    }
  
    /* Logout + avatar right (not glued) */
    header.nav .logout-btn-desktop{
      justify-self: end;
      margin-right: 6px;
    }
  
    header.nav .navbar-avatar{
      justify-self: end;
      margin-left: 10px !important;
    }
  
    /* Optional: thoda breathing for each link */
    header.nav .links a,
    header.nav .nav-tab{
      padding: 10px 16px !important;
    }
  }