@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,600&display=swap');

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  
  /* CUSTOM SCROLLBARS & MODULE SCROLLERS */
  * {
    scrollbar-width: thin;
    scrollbar-color: rgba(99, 102, 241, 0.35) transparent;
  }
  body[data-theme="dark"] * {
    scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
  }

  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  ::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 4px;
  }
  ::-webkit-scrollbar-thumb {
    background: rgba(99, 102, 241, 0.3);
    border-radius: 4px;
    transition: background 0.2s ease;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: rgba(99, 102, 241, 0.6);
  }
  body[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
  }
  body[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.45);
  }

  /* BRIGHT HIGH-CONTRAST TOPBAR PROFILE AVATAR */
  .topbar-right,
  .topbar-actions {
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .avatar {
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    font-size: 15px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.55), 0 0 0 2px rgba(255, 255, 255, 0.35) !important;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    letter-spacing: 0.8px;
    user-select: none;
    flex-shrink: 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  }

  .avatar:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 24px rgba(99, 102, 241, 0.8), 0 0 0 3px rgba(255, 255, 255, 0.6) !important;
  }

  .avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
  }

  /* HIGH-CONTRAST THEME TOGGLE BUTTON */
  .theme-toggle-btn {
    padding: 8px 18px !important;
    border-radius: 20px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15) !important;
    user-select: none !important;
    -webkit-user-select: none !important;
  }

  body[data-theme="dark"] .theme-toggle-btn,
  body:not([data-theme="light"]) .theme-toggle-btn {
    background: #1e293b !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
  }

  body[data-theme="dark"] .theme-toggle-btn:hover,
  body:not([data-theme="light"]) .theme-toggle-btn:hover {
    background: #334155 !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
  }

  body[data-theme="light"] .theme-toggle-btn {
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1.5px solid #475569 !important;
    font-weight: 800 !important;
  }

  body[data-theme="light"] .theme-toggle-btn:hover {
    background: #f1f5f9 !important;
    border-color: #0f172a !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2) !important;
  }

  /* Universal Custom Scroller Helper Class */
  .custom-scroller,
  .module-scroller {
    overflow-y: auto !important;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
  }
  .custom-scroller::-webkit-scrollbar,
  .module-scroller::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  .custom-scroller::-webkit-scrollbar-thumb,
  .module-scroller::-webkit-scrollbar-thumb {
    background: var(--accent);
    opacity: 0.5;
    border-radius: 4px;
  }

  /* Quill Rich Text Editor Scroller */
  .ql-editor {
    max-height: 320px;
    overflow-y: auto !important;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
  }
  .ql-editor::-webkit-scrollbar {
    width: 6px;
  }
  .ql-editor::-webkit-scrollbar-thumb {
    background: rgba(99, 102, 241, 0.4);
    border-radius: 3px;
  }

  /* COMPACT RESPONSIVE MODULE CONTENT IMAGES */
  .ql-editor img,
  .accordion-body img,
  .module-content img,
  #course-modules-accordion img,
  .dash-content p img,
  .dash-content div img {
    max-width: 360px !important;
    max-height: 200px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    border-radius: 8px !important;
    border: 1px solid var(--border) !important;
    background: var(--bg2) !important;
    display: block !important;
    margin: 10px 0 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
    cursor: pointer !important;
  }

  .ql-editor img:hover,
  .accordion-body img:hover,
  .module-content img:hover,
  #course-modules-accordion img:hover {
    transform: scale(1.03) !important;
    box-shadow: 0 6px 18px rgba(99, 102, 241, 0.25) !important;
  }


  :root {
    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Plus Jakarta Sans', sans-serif;
    --font-desc: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif;
    --bg: #ffffff;
    --bg2: #f8fafc;
    --bg3: #e2e8f0;
    --text: #0f172a;
    --text2: #475569;
    --text3: #64748b;
    --accent: #6366f1;
    --accent2: #8b5cf6;
    --accent3: #06b6d4;
    --gold: #f59e0b;
    --green: #10b981;
    --red: #ef4444;
    --card: #ffffff;
    --card2: #f8fafc;
    --border: #e2e8f0;
    --radius: 12px;
  }

  /* ELEGANT DESCRIPTION FONT STYLE */
  .campaign-desc,
  .hero-sub,
  .path-desc,
  .dash-sub,
  .course-hero-info p,
  .login-box p,
  .login-sub,
  .modal-desc,
  .description-text,
  p.desc,
  .dropdown-desc,
  .ql-editor p,
  #editCourseDescModal,
  #courseDesc,
  #settingsBio {
    font-family: var(--font-desc) !important;
    font-weight: 400;
    line-height: 1.65;
    letter-spacing: 0.015em;
  }

  /* DARK MODE */
  body[data-theme="dark"] {
    --bg: #0f172a;
    --bg2: #1e293b;
    --bg3: #334155;
    --text: #f8fafc;
    --text2: #cbd5e1;
    --text3: #94a3b8;
    --card: #1e293b;
    --card2: #0f172a;
    --border: #334155;
  }
  
  body[data-theme="dark"] .sidebar, 
  body[data-theme="dark"] .dash-main,
  body[data-theme="dark"] .metric,
  body[data-theme="dark"] .course-card {
    background: #1e293b;
    border-color: rgba(255,255,255,0.05);
  }
  
  body[data-theme="dark"] .dash-topbar,
  body[data-theme="dark"] .nav {
    background: rgba(30, 41, 59, 0.95);
  }
  
  body[data-theme="dark"] .search-box {
    background: #0f172a;
    color: #fff;
  }
  body {
    background-color: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
  }
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }
  .lms {
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--text);
    height: 100vh;
    overflow: hidden;
    position: relative;
  }
  .lms h1, .lms h2, .lms h3, .lms h4, .lms h5, .lms h6,
  .lms .logo, .lms .nav-logo, .lms .sidebar-logo, .lms .cert-logo,
  .lms .plan-name {
    font-family: var(--font-heading);
    letter-spacing: -0.02em;
  }
  .screen {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    animation: fadeIn 0.4s ease;
  }
  .screen.active {
    display: flex;
  }
  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(8px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* NAV */
  .nav {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(15, 23, 42, 0.05);
    padding: 0 40px;
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 10;
    width: 100%;
  }
  .nav-logo {
    font-size: 24px;
    font-weight: 700;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .nav-actions {
    display: flex;
    align-items: center;
    gap: 16px;
  }
  .nav-btn {
    background: none;
    border: none;
    color: var(--text);
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    cursor: pointer;
    transition: 0.2s;
  }
  .nav-btn:hover {
    background: rgba(15, 23, 42, 0.05);
  }
  .nav-btn.primary {
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    border: none;
    color: #fff;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
  }
  .nav-btn.primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(99, 102, 241, 0.3);
  }
  .badge {
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    color: #fff;
    padding: 2px 7px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 600;
  }

  /* LANDING */
  #landing {
    flex-direction: column;
    background: var(--bg);
  }
  .hero {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
    text-align: center;
    position: relative;
    overflow: hidden;
  }
  .blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.25;
  }
  .blob1 {
    width: 300px;
    height: 300px;
    background: var(--accent);
    top: -80px;
    left: -80px;
    animation: drift 8s ease-in-out infinite;
  }
  .blob2 {
    width: 250px;
    height: 250px;
    background: var(--accent2);
    bottom: -60px;
    right: -60px;
    animation: drift 10s ease-in-out infinite reverse;
  }
  .blob3 {
    width: 180px;
    height: 180px;
    background: var(--accent3);
    top: 40%;
    left: 50%;
    animation: drift 12s ease-in-out infinite;
  }
  @keyframes drift {
    0%,
    100% {
      transform: translate(0, 0) scale(1);
    }
    50% {
      transform: translate(20px, -20px) scale(1.08);
    }
  }
  .eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent3);
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
  }
  .hero-h1 {
    font-size: 38px;
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 14px;
    position: relative;
    z-index: 1;
    letter-spacing: -0.02em;
  }
  .hero-h1 span {
    background: linear-gradient(
      135deg,
      var(--accent),
      var(--accent2),
      var(--accent3)
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .hero-sub {
    font-size: 15px;
    color: var(--text2);
    max-width: 420px;
    line-height: 1.6;
    margin-bottom: 28px;
    position: relative;
    z-index: 1;
  }
  .hero-btns {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    position: relative;
    z-index: 1;
  }
  .btn-primary {
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    color: #fff;
    border: none;
    padding: 11px 22px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.35);
  }
  .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(99, 102, 241, 0.45);
  }
  .btn-outline {
    background: none;
    color: var(--text);
    border: 1px solid var(--border);
    padding: 11px 22px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: 0.2s;
  }
  .btn-outline:hover {
    background: var(--bg2);
    border-color: var(--text3);
  }
  .stats-row {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
    padding: 20px 24px;
    border-top: 1px solid var(--border);
    background: var(--bg2);
  }
  .stat {
    text-align: center;
    padding: 0 12px;
  }
  .stat-n {
    font-size: 22px;
    font-weight: 800;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .stat-l {
    font-size: 11px;
    color: var(--text3);
    margin-top: 2px;
  }

  /* PATH SELECTION */
  #paths {
    flex-direction: column;
    background: var(--bg);
  }
  .paths-body {
    flex: 1;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .paths-title {
    text-align: center;
    margin: 16px 0 24px;
  }
  .paths-title h2 {
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 6px;
  }
  .paths-title p {
    color: var(--text2);
    font-size: 14px;
  }
  .paths-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    width: 100%;
    max-width: 600px;
  }
  .path-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px;
    cursor: pointer;
    transition: 0.3s;
    position: relative;
    overflow: hidden;
  }
  .path-card:hover {
    transform: translateY(-4px);
    border-color: var(--accent);
  }
  .path-card.junior:hover {
    border-color: var(--accent3);
  }
  .path-card .card-glow {
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    filter: blur(40px);
    opacity: 0.2;
    top: -20px;
    right: -20px;
    transition: 0.3s;
  }
  .path-card.junior .card-glow {
    background: var(--accent3);
  }
  .path-card.senior .card-glow {
    background: var(--accent2);
  }
  .path-card:hover .card-glow {
    opacity: 0.4;
  }
  .path-icon {
    font-size: 36px;
    margin-bottom: 12px;
  }
  .path-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text3);
    margin-bottom: 4px;
  }
  .path-name {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 8px;
  }
  .path-desc {
    font-size: 12px;
    color: var(--text2);
    line-height: 1.5;
    margin-bottom: 16px;
  }
  .path-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
  }
  .path-tag {
    background: var(--bg3);
    color: var(--text2);
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 10px;
  }
  .path-btn {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
  }
  .junior .path-btn {
    background: linear-gradient(135deg, #06b6d4, #3b82f6);
    color: #fff;
  }
  .senior .path-btn {
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    color: #fff;
  }

  /* DASHBOARD */
  #dashboard {
    background: var(--bg2); /* Soft light-grey background */
  }
  .dash-layout {
    display: flex;
    flex: 1;
    height: 100vh;
    gap: 20px;
    padding: 20px;
    box-sizing: border-box;
    overflow: hidden;
  }
  .sidebar {
    width: 260px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(15, 23, 42, 0.03);
    border-radius: 32px;
    padding: 28px 0;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 40px rgba(15, 23, 42, 0.04);
  }
  .sidebar-logo {
    padding: 0 24px 24px;
    font-size: 22px;
    font-weight: 700;
    border-bottom: 1px solid rgba(15, 23, 42, 0.05);
    margin-bottom: 16px;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .sb-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 24px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text2);
    cursor: pointer;
    transition: all 0.25s ease;
    margin: 4px 16px;
    border-radius: 16px;
    position: relative;
    overflow: hidden;
  }
  .sb-item:hover {
    background: rgba(99, 102, 241, 0.04);
    color: var(--text);
  }
  .sb-item.active {
    background: linear-gradient(135deg, #4f46e5, #6366f1);
    color: #ffffff !important;
    box-shadow: 0 8px 20px rgba(79, 70, 229, 0.28);
  }
  .sb-icon {
    font-size: 18px;
    width: 20px;
    text-align: center;
  }
  .sb-section {
    padding: 12px 24px 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text3);
  }
  .dash-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 32px;
    border: 1px solid rgba(15, 23, 42, 0.03);
    box-shadow: 0 10px 40px rgba(15, 23, 42, 0.04);
  }
  .dash-topbar {
    padding: 20px 32px;
    display: flex;
    align-items: center;
    gap: 16px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.05);
    position: sticky;
    top: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    z-index: 10;
    border-radius: 24px 24px 0 0;
  }
  .search-box {
    flex: 1;
    background: var(--bg2);
    border: none;
    border-radius: 20px;
    padding: 12px 20px;
    font-size: 14px;
    color: var(--text);
    outline: none;
    max-width: 360px;
    transition: all 0.2s ease;
  }
  .search-box:focus {
    background: #fff;
    box-shadow: 0 0 0 2px var(--accent);
  }
  .search-box::placeholder {
    color: var(--text3);
  }
  .topbar-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 16px;
  }
  .topbar-right .nav-btn {
    background: none;
    border: none;
    color: var(--text);
    font-weight: 600;
    cursor: pointer;
    font-size: 14px;
    padding: 8px 16px;
    border-radius: 20px;
    transition: background 0.2s;
  }
  .topbar-right .nav-btn:hover {
    background: rgba(15, 23, 42, 0.05);
  }
  .topbar-right .nav-btn.primary {
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    color: white;
  }
  .topbar-right .nav-btn.primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
  }
  .avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
  }
  .dash-content {
    padding: 32px;
    flex: 1;
  }
  .dash-greeting {
    font-family: var(--font-heading);
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 4px;
    letter-spacing: -0.02em;
  }
  .dash-sub {
    color: var(--text2);
    font-size: 14px;
    margin-bottom: 32px;
  }
  .metrics {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    margin-bottom: 32px;
  }
  .metric {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 22px 24px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.03);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
  }
  .metric::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: 20px 20px 0 0;
  }
  .metric.emerald::before { background: linear-gradient(90deg, #10b981, #059669); }
  .metric.blue::before { background: linear-gradient(90deg, #f97316, #ef4444); }
  .metric.purple::before { background: linear-gradient(90deg, #06b6d4, #3b82f6); }
  .metric.cyan::before { background: linear-gradient(90deg, #8b5cf6, #6366f1); }
  .metric.gold::before { background: linear-gradient(90deg, #f59e0b, #eab308); }

  .metric:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08);
  }

  .metric.blue { background: linear-gradient(145deg, var(--card), rgba(249, 115, 22, 0.03)); }
  .metric.purple { background: linear-gradient(145deg, var(--card), rgba(6, 182, 212, 0.03)); }
  .metric.cyan { background: linear-gradient(145deg, var(--card), rgba(99, 102, 241, 0.03)); }
  .metric.gold { background: linear-gradient(145deg, var(--card), rgba(245, 158, 11, 0.03)); }

  .metric-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
  }
  .metric-icon {
    font-size: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
  }
  .metric.blue .metric-icon { background: linear-gradient(135deg, #ff7e5f, #feb47b); color: #fff; }
  .metric.purple .metric-icon { background: linear-gradient(135deg, #06b6d4, #3b82f6); color: #fff; }
  .metric.cyan .metric-icon { background: linear-gradient(135deg, #8b5cf6, #6366f1); color: #fff; }
  .metric.gold .metric-icon { background: linear-gradient(135deg, #f59e0b, #eab308); color: #fff; }

  .metric-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 12px;
    letter-spacing: 0.02em;
  }
  .metric.blue .metric-badge { background: rgba(249, 115, 22, 0.12); color: #ea580c; }
  .metric.purple .metric-badge { background: rgba(6, 182, 212, 0.12); color: #0284c7; }
  .metric.cyan .metric-badge { background: rgba(99, 102, 241, 0.12); color: #4f46e5; }
  .metric.gold .metric-badge { background: rgba(245, 158, 11, 0.12); color: #d97706; }

  .metric-n {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 2px;
    font-family: var(--font-heading);
    letter-spacing: -0.03em;
    line-height: 1.1;
  }
  .metric.blue .metric-n { color: #ea580c; }
  .metric.purple .metric-n { color: #0284c7; }
  .metric.cyan .metric-n { color: #4f46e5; }
  .metric.gold .metric-n { color: #d97706; }

  .metric-l {
    font-size: 11px;
    font-weight: 700;
    color: var(--text3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .section-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
  }
  .section-hdr h3 {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text);
  }
  .see-all {
    font-size: 13px;
    font-weight: 700;
    color: var(--accent);
    background: rgba(99, 102, 241, 0.08);
    border: none;
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  .see-all:hover {
    background: rgba(99, 102, 241, 0.15);
  }
  .courses-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 32px;
  }
  .course-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.03);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease;
    display: flex;
    flex-direction: column;
  }
  .course-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08);
    border-color: rgba(99, 102, 241, 0.4);
  }
  .course-thumb {
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 44px;
    position: relative;
    overflow: hidden;
  }
  .course-category-tag {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(8px);
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 10px;
    letter-spacing: 0.03em;
    border: 1px solid rgba(255, 255, 255, 0.15);
  }
  .course-info {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
  }
  .course-name {
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--text);
    line-height: 1.3;
  }
  .course-meta {
    font-size: 12px;
    color: var(--text3);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .course-progress {
    height: 6px;
    background: var(--bg3);
    border-radius: 6px;
    margin-bottom: 14px;
    overflow: hidden;
  }
  .course-bar {
    height: 100%;
    border-radius: 6px;
    background: linear-gradient(90deg, #6366f1, #a855f7);
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .course-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px dashed var(--border);
  }
  .stars {
    color: var(--gold);
    font-weight: 700;
    font-size: 12px;
  }
  .diff-badge {
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.03em;
  }
  .diff-badge.beg {
    background: rgba(16, 185, 129, 0.15);
    color: var(--green);
  }
    color: var(--green);
  }
  .diff-badge.int {
    background: rgba(99, 102, 241, 0.15);
    color: var(--accent);
  }
  .diff-badge.adv {
    background: rgba(139, 92, 246, 0.15);
    color: var(--accent2);
  }
  .streak-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 20px;
  }
  .streak-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px;
  }
  .streak-card h4 {
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--text2);
  }
  .streak-days {
    display: flex;
    gap: 4px;
  }
  .day-dot {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 600;
  }
  .day-dot.done {
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    color: #fff;
  }
  .day-dot.today {
    background: var(--bg3);
    border: 2px solid var(--accent);
    color: var(--accent);
  }
  .day-dot.miss {
    background: var(--bg3);
    color: var(--text3);
  }
  .activity-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .activity-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: var(--bg2);
    border-radius: 8px;
    font-size: 12px;
  }
  .act-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
  }

  /* COURSE DETAIL */
  #courseDetail {
    flex-direction: column;
    background: var(--bg);
  }
  .course-hero {
    background: linear-gradient(135deg, #1e1e24 0%, #0a0a0c 100%);
    padding: 40px 60px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    gap: 32px;
    align-items: center;
    color: #fff;
  }
  .course-hero-icon {
    font-size: 64px;
    width: 120px;
    height: 120px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
    flex-shrink: 0;
  }
  .course-hero-info {
    flex: 1;
  }
  .course-breadcrumb {
    font-size: 12px;
    color: #a1a1aa;
    margin-bottom: 12px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
  }
  .course-hero-info h2 {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 12px;
    color: #fff;
    letter-spacing: -0.02em;
  }
  .course-hero-info p {
    color: #a1a1aa;
    font-size: 15px;
    margin-bottom: 24px;
    line-height: 1.6;
    max-width: 700px;
  }
  .course-hero-meta {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
  }
  .meta-pill {
    font-size: 12px;
    color: #e2e8f0;
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.1);
    padding: 6px 12px;
    border-radius: 20px;
    font-weight: 500;
  }
  .tabs {
    display: flex;
    border-bottom: 1px solid var(--border);
    padding: 0 24px;
    background: var(--bg2);
    gap: 0;
  }
  .tab {
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text3);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: 0.15s;
  }
  .tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
  }
  .tab:hover:not(.active) {
    color: var(--text2);
  }
  .tab-content {
    padding: 20px 24px;
  }
  .module-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .module-item {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px;
    cursor: pointer;
    transition: 0.2s;
  }
  .module-item:hover {
    border-color: var(--accent);
  }
  .module-hdr {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .module-num {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
  }
  .module-title {
    font-size: 13px;
    font-weight: 500;
    flex: 1;
  }
  .module-meta {
    font-size: 11px;
    color: var(--text3);
  }
  .module-lock {
    font-size: 14px;
    color: var(--gold);
  }
  .premium-banner {
    background: linear-gradient(
      135deg,
      rgba(99, 102, 241, 0.1),
      rgba(139, 92, 246, 0.1)
    );
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    margin: 16px 0;
  }
  .premium-banner h4 {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
  }
  .premium-banner p {
    font-size: 12px;
    color: var(--text2);
    margin-bottom: 12px;
  }
  .btn-upgrade {
    background: linear-gradient(135deg, var(--gold), #f97316);
    color: #000;
    border: none;
    padding: 9px 20px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.2s;
  }
  .btn-upgrade:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.35);
  }
  
  /* ACCORDION */
  .accordion-item {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 12px;
    overflow: hidden;
    transition: all 0.2s ease;
  }
  .accordion-item:hover {
    border-color: var(--accent);
  }
  .accordion-header {
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    background: var(--bg2);
  }
  .accordion-header h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    margin: 0;
  }
  .accordion-icon {
    font-size: 14px;
    color: var(--text3);
    transition: transform 0.3s ease;
  }
  .accordion-item.open .accordion-icon {
    transform: rotate(180deg);
  }
  .accordion-item.open .accordion-header {
    border-bottom: 1px solid var(--border);
  }
  .accordion-body {
    max-height: 0;
    overflow: hidden;
    background: var(--card);
    color: var(--text2);
    line-height: 1.6;
    font-size: 14px;
    padding: 0 20px;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), padding 0.35s ease;
  }
  .accordion-item.open {
    border-color: var(--accent) !important;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.12);
  }
  .accordion-item.open .accordion-body {
    padding: 20px;
  }
  .accordion-body p {
    margin-bottom: 16px;
  }
  .accordion-body ul {
    margin-left: 20px;
  }
  .accordion-body li {
    margin-bottom: 8px;
  }

  /* PRICING */
  #pricing {
    flex-direction: column;
    background: var(--bg);
  }
  .pricing-body {
    padding: 24px;
    flex: 1;
  }
  .pricing-title {
    text-align: center;
    margin-bottom: 24px;
  }
  .pricing-title h2 {
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 6px;
  }
  .pricing-title p {
    color: var(--text2);
    font-size: 14px;
  }
  .pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 24px;
  }
  .price-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 20px;
    position: relative;
    transition: 0.2s;
  }
  .price-card:hover {
    transform: translateY(-4px);
  }
  .price-card.popular {
    border-color: var(--accent);
    background: linear-gradient(
      135deg,
      rgba(99, 102, 241, 0.08),
      rgba(139, 92, 246, 0.08)
    );
  }
  .popular-badge {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    color: #fff;
    padding: 3px 12px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
  }
  .plan-name {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text3);
    margin-bottom: 6px;
  }
  .plan-price {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 2px;
  }
  .plan-price span {
    font-size: 14px;
    font-weight: 400;
    color: var(--text3);
  }
  .plan-period {
    font-size: 11px;
    color: var(--text3);
    margin-bottom: 16px;
  }
  .plan-features {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 18px;
    font-size: 12px;
  }
  .plan-features li {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text2);
  }
  .plan-features li::before {
    content: "✓";
    color: var(--green);
    font-weight: 700;
    font-size: 11px;
  }
  .plan-features li.no {
    color: var(--text3);
  }
  .plan-features li.no::before {
    content: "–";
    color: var(--text3);
  }
  .plan-btn {
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
    border: none;
  }
  .plan-btn.outline {
    background: none;
    border: 1px solid var(--border);
    color: var(--text);
  }
  .plan-btn.outline:hover {
    border-color: var(--accent);
  }
  .plan-btn.filled {
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    color: #fff;
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.3);
  }
  .plan-btn.gold-btn {
    background: linear-gradient(135deg, var(--gold), #f97316);
    color: #000;
  }

  /* CERTIFICATE */
  #certificate {
    flex-direction: column;
    background: var(--bg);
    align-items: center;
    justify-content: center;
    padding: 24px;
  }
  .cert-wrapper {
    max-width: 520px;
    width: 100%;
  }
  .cert-card {
    background: linear-gradient(135deg, #0f172a, #1e293b);
    border: 2px solid;
    border-image: linear-gradient(
        135deg,
        var(--gold),
        var(--accent),
        var(--accent2)
      )
      1;
    border-radius: 16px;
    padding: 32px;
    text-align: center;
    position: relative;
    overflow: hidden;
  }
  .cert-bg {
    position: absolute;
    inset: 0;
    opacity: 0.04;
    background: repeating-linear-gradient(
      45deg,
      var(--accent) 0,
      var(--accent) 1px,
      transparent 0,
      transparent 50%
    );
    background-size: 20px 20px;
  }
  .cert-eyebrow {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
  }
  .cert-logo {
    font-size: 42px;
    font-weight: 800;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
  }
  .cert-title {
    font-size: 13px;
    color: var(--text3);
    margin-bottom: 8px;
    position: relative;
    z-index: 1;
  }
  .cert-name {
    font-size: 28px;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 12px;
    position: relative;
    z-index: 1;
  }
  .cert-course {
    font-size: 16px;
    font-weight: 600;
    color: var(--accent3);
    margin-bottom: 6px;
    position: relative;
    z-index: 1;
  }
  .cert-instructor {
    font-size: 12px;
    color: var(--text3);
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
  }
  .cert-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 1;
  }
  .cert-id {
    font-size: 10px;
    color: var(--text3);
    font-family: monospace;
  }
  .cert-date {
    font-size: 10px;
    color: var(--text3);
  }
  .qr-placeholder {
    width: 44px;
    height: 44px;
    background: var(--bg3);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
  }
  .cert-actions {
    display: flex;
    gap: 10px;
    margin-top: 16px;
    justify-content: center;
  }

/* NEW LANDING PAGE STYLES */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 40px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.02);
  transition: all 0.3s ease;
}
.logo {
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: transform 0.2s ease;
}
.logo:hover {
  transform: scale(1.02);
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 8px;
}
.nav-links a {
  text-decoration: none;
  color: var(--text2);
  font-weight: 500;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 20px;
  transition: all 0.2s ease;
}
.nav-links a:hover {
  color: var(--accent);
  background: rgba(99, 102, 241, 0.06);
}

/* Dropdown Menu Styles */
.nav-dropdown {
  position: relative;
}
.dropdown-trigger {
  cursor: pointer;
}
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 280px;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 1000;
}
.nav-dropdown:hover .dropdown-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(6px);
}
.dropdown-menu a {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.2s ease;
  width: 100%;
}
.dropdown-menu a:hover {
  background: rgba(99, 102, 241, 0.06);
}
.dropdown-icon {
  font-size: 18px;
  background: rgba(99, 102, 241, 0.08);
  padding: 6px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dropdown-info {
  display: flex;
  flex-direction: column;
}
.dropdown-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
}
.dropdown-desc {
  font-size: 11px;
  color: var(--text3);
  margin-top: 2px;
  white-space: normal;
  line-height: 1.4;
  text-align: left;
}

/* RESPONSIVE STYLES */
@media (max-width: 1024px) {
  .dash-layout {
    flex-direction: column;
    padding: 12px;
    gap: 12px;
    height: auto;
    overflow: visible;
  }
  .sidebar {
    width: 100%;
    flex-direction: row;
    padding: 12px;
    border-radius: 20px;
    overflow-x: auto;
  }
  .sidebar-logo {
    border-bottom: none;
    border-right: 1px solid rgba(15, 23, 42, 0.05);
    padding: 0 16px 0 0;
    margin: 0 16px 0 0;
    font-size: 18px;
    display: flex;
    align-items: center;
  }
  .sb-section {
    display: none;
  }
  .sb-item {
    margin: 0;
    padding: 10px 16px;
    white-space: nowrap;
  }
  .metrics, .courses-grid, .streak-row, .categories-grid, .pricing-grid, .book-grid {
    grid-template-columns: 1fr;
  }
  .course-hero {
    flex-direction: column;
    text-align: center;
    padding: 24px;
  }
  .course-hero-meta {
    justify-content: center;
  }
  .dash-topbar {
    padding: 16px;
  }

  /* Landing Page Header */
  .header,
  header.header {
    padding: 0 16px !important;
    min-height: 60px !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  .nav-links {
    display: none !important;
  }

  .nav-right {
    gap: 8px !important;
  }

  .nav-right .login-link {
    font-size: 12px !important;
    padding: 6px 12px !important;
  }

  .nav-right .btn-dark {
    font-size: 12px !important;
    padding: 8px 14px !important;
  }

  /* Landing Campaign Hero — Stack vertically */
  .campaign-hero {
    flex-direction: column !important;
    margin: 30px auto !important;
    padding: 0 16px !important;
    gap: 28px !important;
    align-items: flex-start !important;
  }

  .hero-content {
    max-width: 100% !important;
  }

  .campaign-title {
    font-size: 38px !important;
  }

  .campaign-desc {
    font-size: 14px !important;
  }

  .hero-images {
    width: 100% !important;
    justify-content: center !important;
  }

  .book-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .book {
    width: auto !important;
    height: 120px !important;
    transform: none !important;
  }

  .b1, .b3, .b5 {
    transform: none !important;
  }

  /* Categories grid — mobile */
  .categories-grid {
    grid-template-columns: 1fr !important;
    padding: 0 16px !important;
  }

  .cat-cards {
    grid-template-columns: 1fr 1fr !important;
  }
}


/* Landing Page Header/Navbar */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  min-height: 72px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(15, 23, 42, 0.05);
  position: sticky;
  top: 0;
  z-index: 100;
  box-sizing: border-box;
  width: 100%;
}

body[data-theme="dark"] .header {
  background: rgba(15, 23, 42, 0.95);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 24px;
}

.nav-links a {
  text-decoration: none;
  color: var(--text2);
  font-weight: 600;
  font-size: 14px;
  transition: color 0.2s;
}

.nav-links a:hover {
  color: var(--accent);
}

.nav-right { display: flex; gap: 16px; align-items: center; }

.login-link {
  text-decoration: none;
  color: var(--text2);
  font-weight: 600;
  font-size: 13px;
  padding: 8px 16px;
  border-radius: 20px;
  transition: all 0.2s ease;
}
.login-link:hover {
  color: var(--text);
  background: rgba(15, 23, 42, 0.05);
}
.btn-dark {
  background: #0f172a;
  color: #fff;
  padding: 10px 22px;
  border-radius: 24px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 13px;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-dark:hover {
  background: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.3);
}
.btn-light { background: #fff; color: #1a1a1a; padding: 10px 20px; border-radius: 8px; font-weight: 600; font-size: 13px; border: none; cursor: pointer; }

.campaign-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 60px auto;
  padding: 0 20px;
  gap: 40px;
}
.hero-content { flex: 1; max-width: 500px; }
.discount-text { font-family: var(--font-heading); color: #ef4444; font-weight: 700; font-size: 16px; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 16px; }
.campaign-title { font-family: var(--font-heading); font-size: 56px; font-weight: 900; color: var(--text); line-height: 1.1; margin-bottom: 24px; letter-spacing: -0.03em; }
.campaign-desc { font-size: 16px; color: var(--text3); line-height: 1.6; margin-bottom: 32px; font-weight: 400; }

.hero-images { flex: 1; display: flex; justify-content: flex-end; }
.book-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.book { width: 140px; height: 190px; border-radius: 8px; box-shadow: 0 10px 20px rgba(0,0,0,0.1); display: flex; align-items: center; justify-content: center; text-align: center; padding: 16px; font-weight: 700; font-size: 14px; color: #1a1a1a; }
.b1 { background: #facc15; transform: translateY(40px); }
.b2 { background: #a78bfa; }
.b3 { background: #60a5fa; transform: translateY(20px); }
.b4 { background: #f472b6; }
.b5 { background: #fb923c; transform: translateY(40px); }
.b6 { background: #4ade80; }

.categories-header { text-align: center; max-width: 600px; margin: 80px auto 40px; padding: 0 20px; }
.categories-header h2 { font-size: 36px; font-weight: 800; color: var(--text); margin-bottom: 16px; }
.categories-header p { font-size: 16px; color: var(--text3); line-height: 1.6; }

.categories-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 24px; max-width: 1200px; margin: 0 auto 80px; padding: 0 20px; }
.cat-bestseller { background: #27272a; color: #fff; padding: 40px; border-radius: 16px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; text-align: left; }
.cat-discount { font-size: 12px; font-weight: 600; letter-spacing: 1px; color: #a1a1aa; margin-bottom: 24px; text-transform: uppercase; }
.cat-bestseller h3 { font-size: 28px; font-weight: 700; margin-bottom: 20px; }
.cat-bestseller p { font-size: 15px; color: #a1a1aa; line-height: 1.6; margin-bottom: 40px; max-width: 300px; }

.cat-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.cat-card { background: #1a1a1a; border-radius: 16px; position: relative; overflow: hidden; min-height: 200px; display: flex; flex-direction: column; justify-content: space-between; padding: 24px; color: #fff; }
.fiction { background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.8)), url('https://images.unsplash.com/photo-1512820790803-83ca734da794?w=500&q=80'); background-size: cover; background-position: center; }
.nonfiction { background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.8)), url('https://images.unsplash.com/photo-1532012197267-da84d127e765?w=500&q=80'); background-size: cover; background-position: center; }
.school { background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.8)), url('https://images.unsplash.com/photo-1503676260728-1c00da094a0b?w=500&q=80'); background-size: cover; background-position: center; }
.fantasy { background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.8)), url('cat_cyber_security.jpg'); background-size: cover; background-position: center; }

.cat-icon { width: 32px; height: 32px; background: rgba(255,255,255,0.2); backdrop-filter: blur(4px); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.cat-info h4 { font-size: 20px; font-weight: 700; margin-bottom: 4px; }
.cat-info span { font-size: 12px; color: rgba(255,255,255,0.7); font-weight: 500; }

/* Scroll Trigger Animations */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}
.reveal.active {
  opacity: 1;
  transform: translateY(0);
}
.reveal.delay-1 { transition-delay: 0.1s; }
.reveal.delay-2 { transition-delay: 0.2s; }
.reveal.delay-3 { transition-delay: 0.3s; }

/* Scroll Reveal Text Animations */
.scroll-reveal-text {
  display: block;
}
.reveal-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(16px) translateZ(0);
  filter: blur(4px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), 
              filter 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--word-index) * 35ms);
  will-change: opacity, transform, filter;
}
.scroll-reveal-text.active .reveal-word {
  opacity: 1;
  transform: translateY(0) translateZ(0);
  filter: blur(0);
}

/* ADVANCED FEATURES */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(10px);
  z-index: 9999;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 10vh;
  animation: fadeIn 0.2s ease;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: transparent;
}

/* COMMAND PALETTE */
.command-modal {
  width: 100%;
  max-width: 600px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.1);
  overflow: hidden;
}
.cmd-header {
  display: flex;
  align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border);
}
.cmd-icon {
  font-size: 20px;
  color: var(--text3);
  margin-right: 16px;
}
#cmd-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 18px;
  color: var(--text);
  outline: none;
}
.cmd-esc {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 10px;
  font-weight: 700;
  color: var(--text3);
  cursor: pointer;
}
.cmd-body {
  padding: 12px;
}
.cmd-section-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text3);
  margin: 12px 12px 8px;
}
.cmd-item {
  display: flex;
  align-items: center;
  padding: 12px;
  border-radius: 12px;
  cursor: pointer;
  transition: 0.1s;
}
.cmd-item:hover, .cmd-item.active {
  background: rgba(99, 102, 241, 0.1);
}
.cmd-item-icon {
  font-size: 20px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
}
.cmd-item-text div {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.cmd-item-text span {
  font-size: 11px;
  color: var(--text3);
}

/* COURSE FILTERS */
.course-filters {
  display: flex;
  gap: 12px;
}
.filter-pill {
  background: var(--bg2);
  border: 1px solid var(--border);
  color: var(--text2);
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.filter-pill:hover {
  border-color: var(--accent);
}
.filter-pill.active {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}
.course-card.hide {
  display: none;
}
.search-box-wrapper {
  flex: 1;
  max-width: 360px;
  cursor: text;
}
.search-box {
  width: 100%;
  background: var(--bg2);
  border: 1px solid transparent;
  border-radius: 20px;
  padding: 12px 20px;
  font-size: 14px;
  color: var(--text3);
  transition: all 0.2s ease;
  cursor: text;
}
.search-box:hover {
  background: var(--bg);
  border-color: var(--border);
}

/* VIDEO MODAL */
#video-modal {
  padding-top: 5vh;
}
.video-modal-content {
  width: 100%;
  max-width: 900px;
  background: #000;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
}
.video-header {
  padding: 20px 24px;
  background: #111;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 1px solid #333;
}
.video-player {
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, #1e1e24 0%, #0a0a0c 100%);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.play-btn-large {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: #fff;
  cursor: pointer;
  transition: transform 0.2s;
}
.play-btn-large:hover {
  transform: scale(1.1);
  background: var(--accent);
}
.video-controls {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px 24px;
  background: linear-gradient(transparent, rgba(0,0,0,0.8));
  display: flex;
  align-items: center;
  gap: 16px;
  color: #fff;
  font-size: 13px;
}
.video-progress {
  flex: 1;
  height: 6px;
  background: rgba(255,255,255,0.2);
  border-radius: 3px;
  cursor: pointer;
}
.video-progress-fill {
  width: 45%;
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
}

.module-play {
  background: rgba(99, 102, 241, 0.1);
  color: var(--accent);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 10px;
}

/* Spinner and loading state */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* Inline video player / PDF viewer styles */
.inline-video-container {
  margin-top: 15px;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.inline-pdf-container {
  margin-top: 15px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.pdf-iframe {
  width: 100%;
  height: 500px;
  border: none;
  background: var(--bg3);
}

/* ============================================================
   MODAL SYSTEM — Scrollable, Flexible, Responsive
   ============================================================ */

/* Backdrop overlay — all modals */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  /* Allow the overlay itself to scroll when modal content is taller than viewport */
  overflow-y: auto;
}

/* Generic inner modal box */
.video-modal-content {
  position: relative;
  background: var(--card);
  border-radius: 16px;
  border: 1px solid var(--border);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.25);
  width: 100%;
  /* Flexible: expands to content but never overflows viewport */
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  overflow-x: hidden;
  /* Smooth entry animation */
  animation: modalSlideIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Slide-in animation */
@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Nice thin scrollbar inside modals */
.video-modal-content::-webkit-scrollbar {
  width: 6px;
}
.video-modal-content::-webkit-scrollbar-track {
  background: transparent;
}
.video-modal-content::-webkit-scrollbar-thumb {
  background: rgba(99, 102, 241, 0.3);
  border-radius: 3px;
}
.video-modal-content::-webkit-scrollbar-thumb:hover {
  background: rgba(99, 102, 241, 0.6);
}

/* Sticky modal header so title/close always visible while scrolling */
.modal-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--card);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px 16px;
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(10px);
}

/* Notifications modal — aligned top-right, also scrollable */
#notifications-modal .video-modal-content,
#notifications-modal > div {
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  width: 360px;
  max-width: calc(100vw - 32px);
}

/* Settings modal — wider */
#settings-modal .video-modal-content {
  max-width: 560px;
}

/* Course detail modal — large */
#video-modal .video-modal-content {
  max-width: 900px;
  background: #0f172a;
}

/* Upload / Edit / Live-class modals — medium */
#upload-modal .video-modal-content,
#edit-modal .video-modal-content,
#live-class-modal .video-modal-content,
#edit-course-modal .video-modal-content {
  max-width: 520px;
}

/* Command palette — top-center */
#command-palette {
  align-items: flex-start;
  padding-top: 60px;
}
.command-modal {
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  width: 100%;
  max-width: 580px;
  border-radius: 16px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.25);
  animation: modalSlideIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Responsive: on small screens modals go full-width */
@media (max-width: 600px) {
  .modal-overlay {
    padding: 8px;
    align-items: flex-end;
  }
  .video-modal-content {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    max-height: 92vh;
    max-width: 100% ;
  }
}

/* ==========================================================================
   STUDENT PAGE & GENERAL MOBILE RESPONSIVE SYSTEM
   ========================================================================== */

/* Fix screen height clipping & scrolling for all screens on mobile */
@media (max-width: 1024px) {
  html, body {
    overflow-x: hidden !important;
    position: relative !important;
    height: auto !important;
    min-height: 100% !important;
  }

  .lms {
    height: auto !important;
    min-height: 100vh !important;
    overflow: visible !important;
  }

  .screen {
    display: none !important;
  }

  .screen.active,
  #dashboard.active,
  #tutorDashboard.active,
  #superDashboard.active {
    display: block !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    height: auto !important;
    min-height: 100vh !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
  }

  /* Student Dashboard Layout */
  .dash-layout {
    display: flex !important;
    flex-direction: column !important;
    padding: 12px 10px !important;
    gap: 12px !important;
    height: auto !important;
    min-height: 100vh !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  /* Student Sidebar Nav */
  .sidebar {
    width: 100% !important;
    height: auto !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 8px 12px !important;
    border-radius: 18px !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    gap: 8px !important;
    position: relative !important;
    top: auto !important;
    z-index: auto !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08) !important;
    box-sizing: border-box !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .sidebar-logo {
    border-bottom: none !important;
    border-right: 1px solid var(--border) !important;
    padding: 0 12px 0 0 !important;
    margin: 0 4px 0 0 !important;
    flex-shrink: 0 !important;
  }

  .sidebar-logo img {
    height: 38px !important;
  }

  .sb-section {
    display: none !important;
  }

  .sb-item {
    margin: 0 !important;
    padding: 8px 14px !important;
    font-size: 13px !important;
    border-radius: 12px !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  /* Sidebar Bottom Container (Dark mode & Logout) */
  .sidebar > div[style*="margin-top: auto"] {
    margin-top: 0 !important;
    padding: 0 8px !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
  }

  .sidebar > div[style*="margin-top: auto"] .nav-btn {
    width: auto !important;
    padding: 6px 12px !important;
    font-size: 12px !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
  }

  /* Student Main Container */
  .dash-main {
    flex: 1 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
    border-radius: 20px !important;
    box-sizing: border-box !important;
  }

  /* Student Topbar — single compact row on mobile */
  .dash-topbar {
    padding: 10px 14px !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    border-radius: 18px 18px 0 0 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    border-bottom: 1px solid var(--border) !important;
  }

  .search-box-wrapper {
    flex: 1 !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  .search-box {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    font-size: 12px !important;
    padding: 8px 14px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .topbar-right {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-left: 0 !important;
    flex-shrink: 0 !important;
    flex-wrap: nowrap !important;
  }

  .avatar {
    width: 32px !important;
    height: 32px !important;
    font-size: 11px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Student Content Area */
  .dash-content {
    padding: 14px 12px 24px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  /* Student Hero Banner */
  .dash-hero-banner {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 20px 16px !important;
    gap: 16px !important;
    border-radius: 20px !important;
  }

  .dash-hero-banner > div[style*="background: rgba(255, 255, 255, 0.96)"] {
    width: 100% !important;
    box-sizing: border-box !important;
    justify-content: flex-start !important;
  }

  .dash-greeting {
    font-size: 22px !important;
  }

  .dash-sub {
    font-size: 13px !important;
    margin-bottom: 20px !important;
  }

  /* Metrics Cards Grid */
  .metrics {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    margin-bottom: 20px !important;
  }

  .metric {
    padding: 14px 12px !important;
    border-radius: 16px !important;
  }

  .metric-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
  }

  .metric-n {
    font-size: 22px !important;
  }

  .metric-badge {
    font-size: 10px !important;
    padding: 2px 8px !important;
  }

  /* Streak / Learning Analytics Row */
  .streak-row {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .streak-card {
    padding: 16px !important;
    border-radius: 18px !important;
  }

  .streak-card div[style*="height: 160px"] {
    height: 180px !important;
  }

  .streak-card div[style*="border-top: 1px dashed"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
  }

  /* Explore Courses Section */
  .section-hdr {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  .course-filters {
    width: 100% !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    display: flex !important;
    gap: 8px !important;
    padding-bottom: 8px !important;
    -webkit-overflow-scrolling: touch;
  }

  .filter-pill {
    padding: 8px 16px !important;
    font-size: 12px !important;
    flex-shrink: 0 !important;
  }

  .courses-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Landing Page Hero & Category Grids */
  .hero-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  .hero-content {
    align-items: center !important;
    text-align: center !important;
  }

  .hero-ctas {
    justify-content: center !important;
  }

  .book-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
  }

  .categories-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Mobile Devices (< 600px) */
@media (max-width: 600px) {
  .book-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  .book {
    height: 140px !important;
  }

  .metrics {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  .metric {
    padding: 12px 10px !important;
  }

  .metric-header {
    margin-bottom: 6px !important;
  }

  .metric-icon {
    width: 32px !important;
    height: 32px !important;
    font-size: 16px !important;
  }

  .metric-n {
    font-size: 20px !important;
  }

  .metric-l {
    font-size: 10px !important;
  }

  /* Modals on Mobile */
  .modal-overlay {
    padding: 8px !important;
    align-items: flex-end !important;
  }

  .video-modal-content {
    border-radius: 20px 20px 0 0 !important;
    max-height: 92vh !important;
    width: 100% !important;
    padding: 18px 14px !important;
    box-sizing: border-box !important;
  }

  /* Course Detail Mobile */
  .course-hero {
    flex-direction: column !important;
    text-align: center !important;
    padding: 20px 14px !important;
  }

  .course-hero-meta {
    justify-content: center !important;
  }
}

/* Extra Small Phones (< 380px) */
@media (max-width: 380px) {
  .metrics {
    grid-template-columns: 1fr !important;
  }

  .dash-greeting {
    font-size: 18px !important;
  }

  .dash-hero-banner {
    padding: 14px !important;
  }
}

/* ==========================================================================
   MASTER SUPER MOBILE RESPONSIVENESS SYSTEM (EVERY PART TOUCH-OPTIMIZED)
   ========================================================================== */

/* Anti-Overflow Global Safety */
html, body {
  max-width: 100vw !important;
  overflow-x: hidden !important;
}

*, *::before, *::after {
  box-sizing: border-box !important;
}

/* Tablet & Mobile Screens (< 992px) */
@media (max-width: 992px) {
  .app-container, .main-layout, .dash-layout {
    flex-direction: column !important;
    display: block !important;
  }

  /* Off-Canvas Mobile Drawer Sidebar */
  .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: -300px !important;
    width: 280px !important;
    height: 100vh !important;
    z-index: 9999 !important;
    background: var(--bg) !important;
    border-right: 1px solid var(--border) !important;
    box-shadow: 10px 0 30px rgba(0,0,0,0.3) !important;
    transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
    overflow-y: auto !important;
  }

  .sidebar.open, .sidebar.active, body.menu-open .sidebar {
    left: 0 !important;
  }

  .sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 9998;
    display: none;
  }
  body.menu-open .sidebar-backdrop {
    display: block !important;
  }

  .main-content {
    margin-left: 0 !important;
    width: 100% !important;
    padding: 12px 14px 40px !important;
  }

  /* Mobile Topbar */
  .topbar, .user-header {
    padding: 10px 14px !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
  }

  .topbar .search-bar, .topbar input[type="text"] {
    width: 100% !important;
    order: 3 !important;
    margin-top: 6px !important;
  }

  /* Mobile Stacking Grids */
  .streak-row, .grid-2col, .grid-3col, .tutor-stats-grid, .courses-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
}

/* Mobile Viewports (< 768px) */
@media (max-width: 768px) {
  /* Header typography & spacing */
  h1, .dash-greeting { font-size: 22px !important; }
  h2 { font-size: 20px !important; }
  h3 { font-size: 18px !important; }
  h4 { font-size: 16px !important; }
  p, span, div { font-size: 13px; }

  /* Touch Horizontal Scroll Filter Pills */
  .course-filters, .tabs-wrap, .filter-pills-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 8px !important;
    gap: 8px !important;
    scrollbar-width: none !important;
  }
  .course-filters::-webkit-scrollbar, .tabs-wrap::-webkit-scrollbar {
    display: none !important;
  }

  .filter-pill, .tab-btn {
    flex-shrink: 0 !important;
    padding: 8px 14px !important;
    font-size: 12px !important;
  }

  /* All Modals Super Mobile Friendly */
  .modal-content, .upload-modal-content, .edit-modal-content, .add-modal-content {
    width: 95vw !important;
    max-width: 95vw !important;
    margin: 10px auto !important;
    padding: 16px 14px !important;
    border-radius: 16px !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
  }

  .modal-content input, .modal-content select, .modal-content textarea, .modal-content .ql-container {
    font-size: 14px !important; /* Prevents iOS auto-zoom */
    min-height: 44px !important;
  }

  .modal-actions, .modal-footer {
    flex-direction: column !important;
    gap: 10px !important;
  }

  .modal-actions button, .modal-footer button {
    width: 100% !important;
  }

  /* Accordion & Lesson Module Touch Adjustments */
  .accordion-header {
    padding: 14px 12px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  .accordion-body {
    padding: 14px 12px !important;
  }

  .accordion-body .nav-btn, .accordion-body button {
    width: 100% !important;
    justify-content: center !important;
    margin-top: 6px !important;
  }

  /* Responsive Embedded Videos & Images */
  .inline-video-placeholder iframe, .inline-video-placeholder video, .ql-editor img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  /* Touch Tables for Submissions */
  .table-responsive, .submissions-table-wrap {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    margin-bottom: 12px !important;
  }
}

/* Small Smartphone Viewports (< 480px) */
@media (max-width: 480px) {
  .topbar {
    padding: 8px 10px !important;
  }

  .avatar {
    width: 36px !important;
    height: 36px !important;
    font-size: 13px !important;
  }

  .theme-toggle-btn {
    padding: 6px 12px !important;
    font-size: 12px !important;
  }

  .metrics {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  .metric {
    padding: 10px 8px !important;
  }

  .btn-primary, .nav-btn, button[type="submit"] {
    min-height: 44px !important;
    font-size: 13px !important;
  }
}

/* ==========================================================================
   STUNNING HERO CTA BUTTONS WITH ADVANCED GLOW & SHIMMER EFFECTS
   ========================================================================== */
.hero-btn-primary {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 32px;
  border-radius: 12px;
  border: none;
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #ffffff !important;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
  background-size: 200% 200%;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 10px 25px -5px rgba(99, 102, 241, 0.5), 0 0 18px rgba(236, 72, 153, 0.35);
  transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  animation: heroGradientPulse 4s ease infinite;
}

.hero-btn-primary::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    60deg,
    transparent 30%,
    rgba(255, 255, 255, 0.4) 50%,
    transparent 70%
  );
  transform: rotate(25deg);
  transition: all 0.6s ease;
  animation: heroShimmerSweep 3.5s infinite;
}

.hero-btn-primary:hover {
  transform: translateY(-4px) scale(1.04);
  box-shadow: 0 16px 35px -5px rgba(99, 102, 241, 0.65), 0 0 28px rgba(236, 72, 153, 0.5);
  background-position: right center;
}

.hero-btn-primary:active {
  transform: translateY(-1px) scale(0.98);
  box-shadow: 0 6px 18px rgba(99, 102, 241, 0.4);
}

.hero-btn-primary .btn-sparkle {
  display: inline-block;
  animation: sparkleRotate 2s linear infinite;
}

.hero-btn-secondary {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: 12px;
  border: 2px solid transparent;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--text) !important;
  background: linear-gradient(var(--bg2), var(--bg2)) padding-box,
              linear-gradient(135deg, #6366f1, #06b6d4) border-box;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.hero-btn-secondary:hover {
  transform: translateY(-3px);
  background: linear-gradient(var(--bg), var(--bg)) padding-box,
              linear-gradient(135deg, #ec4899, #6366f1) border-box;
  box-shadow: 0 10px 25px -5px rgba(99, 102, 241, 0.25);
  color: var(--accent) !important;
}

.hero-btn-secondary:active {
  transform: translateY(0);
}

@keyframes heroGradientPulse {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes heroShimmerSweep {
  0% { left: -100%; }
  25%, 100% { left: 200%; }
}

@keyframes sparkleRotate {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.2); }
  100% { transform: rotate(360deg) scale(1); }
}