@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Poppins:wght@600;700;800&display=swap');

:root{
  --primary:#4f46e5;
  --primary-2:#7c3aed;

  --text:#172033;
  --muted:#64748b;

  --bg:#f8fafc;
  --card:#ffffff;
  --soft:#f1f5f9;

  --border:#e5e7eb;

  --shadow:
    0 18px 50px rgba(15,23,42,.08);
}


/* =========================================
   BASIC RESET
========================================= */

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html{
  scroll-behavior:smooth;
}

body{
  font-family:"Inter",sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
}

a{
  text-decoration:none;
  color:inherit;
}

button,
input,
select{
  font:inherit;
}

button{
  cursor:pointer;
}

.shell{
  width:min(1180px,92%);
  margin:auto;
}

.section{
  padding:76px 0;
}

.soft{
  background:var(--soft);
}


/* =========================================
   HEADER
========================================= */

.topbar{
  position:sticky;
  top:0;
  z-index:1000;

  background:rgba(255,255,255,.92);

  border-bottom:
    1px solid rgba(226,232,240,.85);

  backdrop-filter:blur(18px);
}

.nav-wrap{
  min-height:76px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:20px;
}


/* BRAND */

.brand{
  display:flex;
  align-items:center;

  gap:11px;
}

.brand-mark{
  width:43px;
  height:43px;

  display:grid;
  place-items:center;

  border-radius:14px;

  color:#fff;

  font-weight:800;
  font-size:22px;

  background:
    linear-gradient(
      135deg,
      #2563eb,
      #7c3aed
    );

  box-shadow:
    0 9px 22px
    rgba(79,70,229,.28);
}

.brand strong{
  display:block;

  font-family:"Poppins";

  font-size:17px;
  line-height:1.15;
}

.brand small{
  display:block;

  margin-top:3px;

  font-size:9px;
  letter-spacing:.8px;

  color:var(--muted);
}


/* DESKTOP NAV */

.desktop-nav{
  display:flex;
  align-items:center;

  gap:27px;
}

.desktop-nav a{
  position:relative;

  color:#475569;

  font-size:13px;
  font-weight:700;
}

.desktop-nav a:hover,
.desktop-nav a.active{
  color:var(--primary);
}

.desktop-nav a.active::after{
  content:"";

  position:absolute;

  left:0;
  right:0;

  bottom:-27px;

  height:3px;

  border-radius:999px;

  background:var(--primary);
}


/* HEADER BUTTONS */

.nav-actions{
  display:flex;
  align-items:center;

  gap:9px;
}

.icon-btn,
.menu-btn{
  width:40px;
  height:40px;

  border:
    1px solid var(--border);

  border-radius:12px;

  background:var(--card);
  color:var(--text);
}

.menu-btn{
  display:none;
}

.login-btn{
  padding:10px 18px;

  border-radius:12px;

  color:#fff;

  font-size:13px;
  font-weight:800;

  background:
    linear-gradient(
      135deg,
      var(--primary),
      var(--primary-2)
    );

  transition:.25s;
}

.login-btn:hover{
  transform:translateY(-2px);
}


/* MOBILE MENU */

.mobile-menu{
  display:none;

  padding:10px 0 16px;
}

.mobile-menu.show{
  display:block;
}

.mobile-menu a{
  display:block;

  padding:11px 14px;

  border-radius:10px;

  font-size:13px;
  font-weight:700;
}

.mobile-menu a:hover{
  background:#eef2ff;
  color:var(--primary);
}


/* =========================================
   HERO
========================================= */

.hero{
  position:relative;

  overflow:hidden;

  padding:88px 0 70px;

  background:
    radial-gradient(
      circle at 0% 0%,
      #dbeafe 0,
      transparent 36%
    ),
    radial-gradient(
      circle at 100% 100%,
      #ede9fe 0,
      transparent 42%
    ),
    #fff;
}

.hero-grid{
  position:relative;

  z-index:2;

  display:grid;

  grid-template-columns:
    1.06fr .94fr;

  align-items:center;

  gap:70px;
}


/* HERO TEXT */

.eyebrow,
.section-kicker{
  display:inline-block;

  color:var(--primary);

  font-size:11px;
  font-weight:800;

  letter-spacing:1.2px;
}

.eyebrow{
  margin-bottom:22px;

  padding:8px 13px;

  border:
    1px solid #c7d2fe;

  border-radius:999px;

  background:#eef2ff;

  letter-spacing:0;
}

.hero h1{
  margin-bottom:20px;

  font-family:"Poppins";

  font-size:
    clamp(44px,5vw,68px);

  line-height:1.08;

  letter-spacing:-2px;
}

.hero h1 span{
  display:block;

  color:transparent;

  background:
    linear-gradient(
      90deg,
      #2563eb,
      #7c3aed,
      #db2777
    );

  -webkit-background-clip:text;
  background-clip:text;
}

.hero-copy > p{
  max-width:650px;

  margin-bottom:28px;

  color:var(--muted);

  font-size:16px;
}


/* HERO BUTTONS */

.hero-actions{
  display:flex;
  flex-wrap:wrap;

  gap:12px;

  margin-bottom:38px;
}

.btn{
  display:inline-flex;

  align-items:center;
  justify-content:center;

  padding:13px 20px;

  border:0;
  border-radius:13px;

  font-size:13px;
  font-weight:800;

  transition:.25s;
}

.btn:hover{
  transform:translateY(-2px);
}

.btn-primary{
  color:#fff;

  background:
    linear-gradient(
      135deg,
      #2563eb,
      #7c3aed
    );

  box-shadow:
    0 12px 28px
    rgba(79,70,229,.22);
}

.btn-light{
  background:#fff;

  border:
    1px solid var(--border);

  color:#334155;
}

.btn-white{
  background:#fff;

  color:#4338ca;
}

.btn-outline{
  border:
    1px solid
    rgba(255,255,255,.5);

  color:#fff;
}


/* HERO TRUST */

.trust-row{
  display:flex;
  flex-wrap:wrap;

  gap:30px;
}

.trust-row div{
  display:flex;
  flex-direction:column;
}

.trust-row strong{
  font-size:15px;
}

.trust-row span{
  color:var(--muted);

  font-size:11px;
}


/* =========================================
   DASHBOARD PREVIEW
========================================= */

.preview-card{
  padding:24px;

  border:
    1px solid
    rgba(226,232,240,.9);

  border-radius:28px;

  background:
    rgba(255,255,255,.86);

  backdrop-filter:
    blur(20px);

  box-shadow:
    0 28px 80px
    rgba(79,70,229,.14);

  transform:
    rotate(1deg);
}

.preview-head{
  display:flex;
  align-items:center;
  justify-content:space-between;

  margin-bottom:20px;
}

.preview-head small{
  color:var(--muted);
}

.preview-head h3{
  font-size:18px;
}

.avatar{
  width:44px;
  height:44px;

  display:grid;
  place-items:center;

  border-radius:50%;

  background:#ede9fe;

  color:#6d28d9;

  font-weight:800;
}


/* SELECTED PROFILE */

.preview-course{
  margin-bottom:16px;

  padding:20px;

  border-radius:18px;

  color:#fff;

  background:
    linear-gradient(
      135deg,
      #2563eb,
      #7c3aed
    );
}

.preview-course small{
  display:block;

  opacity:.85;
}

.preview-course strong{
  display:block;

  margin:5px 0 12px;
}

.progress-track{
  height:7px;

  margin-bottom:8px;

  overflow:hidden;

  border-radius:99px;

  background:
    rgba(255,255,255,.25);
}

.progress-track span{
  display:block;

  width:62%;
  height:100%;

  background:#fff;
}


/* DASHBOARD ITEMS */

.preview-grid{
  display:grid;

  grid-template-columns:
    repeat(5,1fr);

  gap:9px;

  margin-bottom:14px;
}

.preview-grid a{
  padding:13px 6px;

  text-align:center;

  border-radius:14px;

  background:#f8fafc;

  font-size:11px;
  font-weight:800;

  transition:.2s;
}

.preview-grid a:hover{
  transform:translateY(-2px);

  background:#eef2ff;
}

.preview-grid span{
  display:block;

  margin-bottom:3px;

  font-size:20px;
}


/* DASHBOARD NOTICE */

.preview-update{
  display:flex;
  align-items:center;

  gap:10px;

  padding:13px;

  border-radius:14px;

  background:#fff7ed;
}

.preview-update > span{
  font-size:20px;
}

.preview-update small,
.preview-update strong{
  display:block;
}

.preview-update small{
  color:#9a3412;

  font-size:10px;
}

.preview-update strong{
  font-size:11px;
}


/* =========================================
   STUDY FINDER
========================================= */

.finder-section{
  position:relative;

  z-index:4;

  margin-top:-28px;
}

.finder-card{
  padding:30px;

  border:
    1px solid var(--border);

  border-radius:24px;

  background:var(--card);

  box-shadow:var(--shadow);
}

.finder-heading{
  display:flex;
  align-items:end;
  justify-content:space-between;

  gap:30px;

  margin-bottom:22px;
}

.finder-heading h2{
  font-family:"Poppins";

  font-size:30px;
}

.finder-heading p{
  max-width:460px;

  color:var(--muted);

  font-size:12px;
}


/* DIPLOMA / BTECH BUTTON */

.program-switch{
  display:flex;

  gap:8px;

  margin-bottom:18px;
}

.program-btn{
  padding:11px 16px;

  border:
    1px solid var(--border);

  border-radius:11px;

  background:var(--card);

  color:var(--text);

  font-weight:800;
}

.program-btn.active{
  background:#eef2ff;

  border-color:#c7d2fe;

  color:#4338ca;
}


/* FINDER INPUTS */

.finder-grid{
  display:grid;

  grid-template-columns:
    repeat(4,1fr);

  gap:12px;
}

.finder-grid label span{
  display:block;

  margin-bottom:6px;

  color:var(--muted);

  font-size:10px;
  font-weight:800;

  text-transform:uppercase;

  letter-spacing:.5px;
}

.finder-grid select{
  width:100%;

  padding:12px 11px;

  border:
    1px solid var(--border);

  border-radius:11px;

  outline:none;

  background:var(--card);

  color:var(--text);
}

.finder-grid select:focus{
  border-color:#818cf8;

  box-shadow:
    0 0 0 3px
    rgba(99,102,241,.1);
}

.finder-action{
  margin-top:16px;
}

.finder-message{
  margin-top:10px;

  color:var(--primary);

  font-size:12px;
  font-weight:700;
}


/* =========================================
   SECTION HEADING
========================================= */

.section-head{
  display:flex;
  align-items:end;
  justify-content:space-between;

  gap:24px;

  margin-bottom:30px;
}

.section-head h2,
.center-head h2{
  font-family:"Poppins";

  font-size:
    clamp(27px,3vw,37px);

  line-height:1.2;
}

.section-head > a{
  color:var(--primary);

  font-size:12px;
  font-weight:800;
}

.section-note{
  max-width:390px;

  color:var(--muted);

  font-size:12px;
}

.center-head{
  max-width:720px;

  margin:
    0 auto 34px;

  text-align:center;
}


/* =========================================
   BRANCH CARDS
========================================= */

.branch-grid{
  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:14px;
}

.branch-card{
  display:grid;

  grid-template-columns:
    auto 1fr auto;

  align-items:center;

  gap:14px;

  padding:19px;

  border:
    1px solid var(--border);

  border-radius:18px;

  background:var(--card);

  transition:.25s;
}

.branch-card:hover{
  transform:
    translateY(-4px);

  border-color:#c7d2fe;

  box-shadow:
    0 15px 35px
    rgba(15,23,42,.07);
}

.branch-icon{
  width:48px;
  height:48px;

  display:grid;
  place-items:center;

  border-radius:14px;

  background:#eef2ff;

  font-size:22px;
}

.branch-card h3{
  margin-bottom:2px;

  font-size:14px;
}

.branch-card p{
  color:var(--muted);

  font-size:11px;
}

.arrow{
  color:var(--primary);

  font-weight:800;
}


/* =========================================
   QUICK ACCESS
========================================= */

.quick-grid{
  display:grid;

  grid-template-columns:
    repeat(4,1fr);

  gap:14px;
}

.quick-card{
  padding:22px;

  border:
    1px solid var(--border);

  border-radius:19px;

  background:var(--card);

  transition:.25s;
}

.quick-card:hover{
  transform:
    translateY(-4px);

  box-shadow:
    0 16px 36px
    rgba(15,23,42,.07);
}

.quick-card > span{
  display:block;

  margin-bottom:10px;

  font-size:27px;
}

.quick-card h3{
  margin-bottom:6px;

  font-size:15px;
}

.quick-card p{
  min-height:43px;

  margin-bottom:10px;

  color:var(--muted);

  font-size:11px;
}

.quick-card b{
  color:var(--primary);

  font-size:11px;
}


/* =========================================
   NOTICE BOARD
========================================= */

.notice-board{
  display:flex;
  flex-direction:column;

  gap:10px;
}

.notice-item{
  display:grid;

  grid-template-columns:
    auto 1fr auto;

  align-items:center;

  gap:14px;

  padding:17px 18px;

  border:
    1px solid var(--border);

  border-radius:16px;

  background:var(--card);
}

.notice-item h3{
  font-size:14px;
}

.notice-item p{
  color:var(--muted);

  font-size:11px;
}

.notice-item time{
  color:var(--muted);

  font-size:10px;
}

.tag{
  padding:4px 8px;

  border-radius:99px;

  color:#fff;

  font-size:8px;
  font-weight:800;
}

.tag.green{
  background:#16a34a;
}

.tag.red{
  background:#dc2626;
}

.tag.amber{
  background:#d97706;
}


/* =========================================
   RESOURCE SOURCE SYSTEM
========================================= */

.source-grid{
  display:grid;

  grid-template-columns:
    repeat(5,1fr);

  gap:13px;
}

.source-grid article{
  padding:20px;

  border:
    1px solid var(--border);

  border-radius:18px;

  background:var(--card);

  text-align:center;

  transition:.25s;
}

.source-grid article:hover{
  transform:
    translateY(-4px);

  box-shadow:
    0 15px 35px
    rgba(15,23,42,.06);
}

.source-grid span{
  display:block;

  margin-bottom:8px;

  font-size:27px;
}

.source-grid h3{
  margin-bottom:4px;

  font-size:13px;
}

.source-grid p{
  color:var(--muted);

  font-size:10px;
}


/* =========================================
   LIVE BANNER
========================================= */

.live-banner{
  display:grid;

  grid-template-columns:
    1.1fr .9fr;

  align-items:center;

  gap:50px;

  padding:46px;

  border-radius:28px;

  color:#fff;

  background:
    linear-gradient(
      135deg,
      #4338ca,
      #7c3aed,
      #db2777
    );

  box-shadow:
    0 25px 60px
    rgba(79,70,229,.22);
}

.live-label{
  padding:6px 9px;

  border-radius:99px;

  background:
    rgba(255,255,255,.14);

  font-size:10px;
  font-weight:800;
}

.live-banner h2{
  margin:11px 0 9px;

  font-family:"Poppins";

  font-size:32px;
}

.live-banner p{
  max-width:620px;

  margin-bottom:20px;

  font-size:13px;

  opacity:.82;
}


/* PLAYER PREVIEW */

.screen-card{
  min-height:220px;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  text-align:center;

  border:
    1px solid
    rgba(255,255,255,.22);

  border-radius:22px;

  background:
    rgba(15,23,42,.2);
}

.screen-dot{
  width:8px;
  height:8px;

  margin-bottom:15px;

  border-radius:50%;

  background:#ef4444;

  box-shadow:
    0 0 0 8px
    rgba(239,68,68,.15);
}

.play{
  width:58px;
  height:58px;

  display:grid;
  place-items:center;

  margin-bottom:12px;

  border-radius:50%;

  background:#fff;

  color:#4f46e5;

  font-size:20px;
}

.screen-card small{
  opacity:.7;
}


/* =========================================
   FEATURE CARDS
========================================= */

.feature-grid{
  display:grid;

  grid-template-columns:
    repeat(4,1fr);

  gap:14px;
}

.feature-grid article{
  padding:23px;

  border:
    1px solid var(--border);

  border-radius:18px;

  background:var(--card);

  text-align:center;
}

.feature-grid span{
  display:block;

  margin-bottom:9px;

  font-size:27px;
}

.feature-grid h3{
  margin-bottom:4px;

  font-size:14px;
}

.feature-grid p{
  color:var(--muted);

  font-size:11px;
}


/* =========================================
   CTA
========================================= */

.cta{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:28px;

  padding:42px;

  border-radius:26px;

  color:#fff;

  background:
    linear-gradient(
      135deg,
      #0f172a,
      #1e3a8a
    );
}

.cta > div > span{
  font-size:9px;
  font-weight:800;

  letter-spacing:1px;

  opacity:.65;
}

.cta h2{
  margin:5px 0 6px;

  font-family:"Poppins";

  font-size:28px;
}

.cta p{
  max-width:650px;

  font-size:12px;

  opacity:.72;
}

.cta-actions{
  display:flex;

  gap:9px;

  flex-shrink:0;
}


/* =========================================
   FOOTER
========================================= */

.footer{
  padding:58px 0 90px;

  background:#0f172a;

  color:#94a3b8;
}

.footer-grid{
  display:grid;

  grid-template-columns:
    2fr 1fr 1fr 1fr;

  gap:42px;
}

.footer-brand strong{
  color:#fff;
}

.footer-grid > div:first-child p{
  max-width:420px;

  margin-top:16px;

  font-size:12px;
}

.footer h4{
  margin-bottom:12px;

  color:#fff;
}

.footer-grid
> div:not(:first-child) a{
  display:block;

  margin-bottom:8px;

  font-size:11px;
}

.footer-grid a:hover{
  color:#fff;
}

.footer-bottom{
  display:flex;
  justify-content:space-between;

  padding-top:20px;
  margin-top:40px;

  border-top:
    1px solid #1e293b;

  font-size:10px;
}


/* =========================================
   MOBILE BOTTOM NAV
========================================= */

.bottom-nav{
  display:none;
}


/* =========================================
   DARK MODE
========================================= */

body.dark{
  --text:#f8fafc;
  --muted:#94a3b8;

  --bg:#0b1120;
  --card:#111827;
  --soft:#0e1728;

  --border:#253149;
}

body.dark .topbar{
  background:
    rgba(15,23,42,.92);
}

body.dark .hero{
  background:#0b1120;
}

body.dark .preview-card{
  background:
    rgba(17,24,39,.88);
}

body.dark .preview-grid a{
  background:#162033;
}

body.dark .preview-update{
  background:#21180c;
}

body.dark .mobile-menu{
  background:var(--card);
}


/* =========================================
   TABLET
========================================= */

@media(max-width:980px){

  .desktop-nav{
    display:none;
  }

  .menu-btn{
    display:block;
  }

  .hero-grid{
    grid-template-columns:1fr;

    gap:42px;
  }

  .hero-copy{
    text-align:center;
  }

  .hero-copy > p{
    margin-left:auto;
    margin-right:auto;
  }

  .hero-actions,
  .trust-row{
    justify-content:center;
  }

  .student-preview{
    max-width:650px;

    margin:auto;
  }

  .finder-grid{
    grid-template-columns:
      repeat(2,1fr);
  }

  .branch-grid{
    grid-template-columns:
      repeat(2,1fr);
  }

  .quick-grid{
    grid-template-columns:
      repeat(2,1fr);
  }

  .source-grid{
    grid-template-columns:
      repeat(3,1fr);
  }

  .live-banner{
    grid-template-columns:1fr;
  }

  .feature-grid{
    grid-template-columns:
      repeat(2,1fr);
  }

  .footer-grid{
    grid-template-columns:
      2fr 1fr 1fr;
  }

}


/* =========================================
   MOBILE
========================================= */

@media(max-width:650px){

  body{
    padding-bottom:65px;
  }

  .shell{
    width:min(94%,560px);
  }


  /* HEADER */

  .nav-wrap{
    min-height:67px;
  }

  .brand-mark{
    width:38px;
    height:38px;

    font-size:18px;
  }

  .brand strong{
    font-size:14px;
  }

  .brand small{
    font-size:8px;
  }

  .login-btn{
    display:none;
  }

  .mobile-menu{
    position:absolute;

    left:3%;
    right:3%;

    top:68px;

    padding:10px;

    border:
      1px solid var(--border);

    border-radius:16px;

    background:var(--card);

    box-shadow:var(--shadow);
  }


  /* HERO */

  .hero{
    padding:58px 0 56px;
  }

  .hero h1{
    font-size:39px;

    letter-spacing:-1px;
  }

  .hero-copy > p{
    font-size:13px;
  }

  .hero-actions{
    flex-direction:column;
  }

  .hero-actions .btn{
    width:100%;
  }

  .trust-row{
    gap:20px;

    justify-content:center;
  }


  /* PREVIEW */

  .preview-card{
    padding:17px;

    border-radius:22px;

    transform:none;
  }

  .preview-grid{
    grid-template-columns:
      repeat(2,1fr);
  }


  /* FINDER */

  .finder-card{
    padding:21px;

    border-radius:20px;
  }

  .finder-heading{
    align-items:flex-start;
    flex-direction:column;

    gap:8px;
  }

  .finder-heading h2{
    font-size:25px;
  }

  .program-switch{
    display:grid;

    grid-template-columns:
      1fr 1fr;
  }

  .program-btn{
    padding:10px 8px;
  }

  .finder-grid{
    grid-template-columns:
      1fr 1fr;

    gap:10px;
  }

  .finder-grid label span{
    font-size:8px;
  }

  .finder-grid select{
    font-size:11px;
  }

  .finder-action{
    width:100%;
  }


  /* SECTIONS */

  .section{
    padding:56px 0;
  }

  .section-head{
    align-items:flex-start;
    flex-direction:column;

    gap:8px;

    margin-bottom:23px;
  }


  /* BRANCH */

  .branch-grid{
    grid-template-columns:1fr;
  }

  .branch-card{
    padding:16px;
  }


  /* QUICK */

  .quick-grid{
    grid-template-columns:
      1fr 1fr;

    gap:10px;
  }

  .quick-card{
    padding:16px;
  }

  .quick-card p{
    min-height:auto;
  }


  /* NOTICE */

  .notice-item{
    grid-template-columns:
      auto 1fr;
  }

  .notice-item time{
    grid-column:2;
  }


  /* SOURCE */

  .source-grid{
    grid-template-columns:
      1fr 1fr;
  }

  .source-grid article{
    padding:16px;
  }


  /* LIVE */

  .live-banner{
    padding:27px 21px;
  }

  .live-banner h2{
    font-size:24px;
  }

  .screen-card{
    min-height:175px;
  }


  /* FEATURES */

  .feature-grid{
    grid-template-columns:
      1fr 1fr;

    gap:10px;
  }

  .feature-grid article{
    padding:16px 11px;
  }


  /* CTA */

  .cta{
    align-items:flex-start;
    flex-direction:column;

    padding:27px 21px;
  }

  .cta h2{
    font-size:23px;
  }

  .cta-actions{
    width:100%;

    flex-direction:column;
  }

  .cta-actions .btn{
    width:100%;
  }


  /* FOOTER */

  .footer-grid{
    grid-template-columns:
      1fr 1fr;
  }

  .footer-grid
  > div:first-child{
    grid-column:1/-1;
  }

  .footer-bottom{
    align-items:center;
    flex-direction:column;

    gap:6px;
  }


  /* MOBILE BOTTOM NAVIGATION */

  .bottom-nav{
    position:fixed;

    left:0;
    right:0;
    bottom:0;

    z-index:1100;

    height:64px;

    display:grid;

    grid-template-columns:
      repeat(5,1fr);

    border-top:
      1px solid var(--border);

    background:
      rgba(255,255,255,.96);

    backdrop-filter:
      blur(16px);
  }

  body.dark .bottom-nav{
    background:
      rgba(15,23,42,.96);
  }

  .bottom-nav a{
    display:flex;

    flex-direction:column;
    align-items:center;
    justify-content:center;

    gap:2px;

    color:#64748b;

    font-size:8px;
    font-weight:800;
  }

  .bottom-nav a span{
    font-size:16px;
  }

  .bottom-nav a.active{
    color:var(--primary);
  }

}


/* =========================================
   EXTRA SMALL MOBILE
========================================= */

@media(max-width:390px){

  .finder-grid,
  .quick-grid,
  .source-grid,
  .feature-grid{
    grid-template-columns:1fr;
  }

}

/* =====================================================
   EXPLORE PAGE
===================================================== */

.explore-hero{
  padding:70px 0 46px;

  background:
    radial-gradient(
      circle at top left,
      #dbeafe 0,
      transparent 36%
    ),
    radial-gradient(
      circle at top right,
      #ede9fe 0,
      transparent 38%
    ),
    var(--card);
}

.explore-hero-content{
  max-width:820px;
}

.explore-hero h1{
  margin-top:10px;

  font-family:"Poppins";

  font-size:
    clamp(36px,5vw,58px);

  line-height:1.1;

  letter-spacing:-1.5px;
}

.explore-hero h1 span{
  display:block;

  color:transparent;

  background:
    linear-gradient(
      90deg,
      #2563eb,
      #7c3aed
    );

  -webkit-background-clip:text;
  background-clip:text;
}

.explore-hero p{
  max-width:680px;

  margin-top:17px;

  color:var(--muted);

  font-size:15px;
}


/* =====================================================
   ACADEMIC PATH
===================================================== */

.academic-path-section{
  padding:22px 0;

  border-top:
    1px solid var(--border);

  border-bottom:
    1px solid var(--border);

  background:var(--card);
}

.academic-path{
  display:flex;
  align-items:center;
  justify-content:center;

  gap:14px;
}

.path-item{
  display:flex;
  align-items:center;

  gap:9px;
}

.path-item > span{
  width:34px;
  height:34px;

  display:grid;
  place-items:center;

  border-radius:50%;

  background:#f1f5f9;

  color:#64748b;

  font-size:12px;
  font-weight:800;
}

.path-item.active > span{
  background:
    linear-gradient(
      135deg,
      #2563eb,
      #7c3aed
    );

  color:#fff;
}

.path-item div{
  display:flex;
  flex-direction:column;
}

.path-item small{
  color:var(--muted);

  font-size:8px;
  font-weight:800;

  letter-spacing:.7px;
}

.path-item strong{
  font-size:12px;
}

.path-line{
  width:55px;
  height:1px;

  background:var(--border);
}


/* =====================================================
   EXPLORER LAYOUT
===================================================== */

.explorer-layout{
  display:grid;

  grid-template-columns:
    310px 1fr;

  gap:28px;

  align-items:start;
}


/* =====================================================
   SIDEBAR
===================================================== */

.explorer-sidebar{
  position:sticky;

  top:98px;
}

.sidebar-card{
  padding:22px;

  border:
    1px solid var(--border);

  border-radius:20px;

  background:var(--card);

  box-shadow:
    0 10px 30px
    rgba(15,23,42,.04);
}

.sidebar-card + .sidebar-card{
  margin-top:16px;
}

.sidebar-title{
  display:flex;
  align-items:center;

  gap:11px;

  margin-bottom:22px;
}

.sidebar-title > span{
  width:43px;
  height:43px;

  display:grid;
  place-items:center;

  border-radius:13px;

  background:#eef2ff;

  font-size:20px;
}

.sidebar-title small{
  display:block;

  color:var(--primary);

  font-size:8px;
  font-weight:800;

  letter-spacing:.8px;
}

.sidebar-title h2{
  font-family:"Poppins";

  font-size:17px;
}


/* =====================================================
   EXPLORE FORM FIELDS
===================================================== */

.explore-field{
  margin-bottom:15px;
}

.explore-field label{
  display:block;

  margin-bottom:6px;

  color:var(--muted);

  font-size:10px;
  font-weight:800;

  letter-spacing:.3px;

  text-transform:uppercase;
}

.explore-field select{
  width:100%;

  padding:12px 11px;

  border:
    1px solid var(--border);

  border-radius:11px;

  outline:none;

  background:var(--card);

  color:var(--text);

  font-size:12px;
}

.explore-field select:focus{
  border-color:#818cf8;

  box-shadow:
    0 0 0 3px
    rgba(99,102,241,.1);
}

.explore-submit{
  width:100%;

  margin-top:4px;
}

.reset-filter-btn{
  width:100%;

  margin-top:9px;

  padding:10px 15px;

  border:
    1px solid var(--border);

  border-radius:11px;

  background:transparent;

  color:var(--muted);

  font-size:11px;
  font-weight:700;
}

.reset-filter-btn:hover{
  color:var(--primary);

  border-color:#c7d2fe;

  background:#eef2ff;
}


/* =====================================================
   QUICK ACCESS SIDEBAR
===================================================== */

.small-card h3{
  margin-bottom:12px;

  font-size:13px;
}

.small-card a{
  display:flex;
  align-items:center;

  gap:10px;

  padding:10px 8px;

  border-radius:10px;

  color:var(--muted);

  font-size:11px;
  font-weight:700;

  transition:.2s;
}

.small-card a:hover{
  background:#eef2ff;

  color:var(--primary);
}

.small-card a span{
  font-size:16px;
}


/* =====================================================
   SELECTED PROFILE
===================================================== */

.selected-profile-card{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:20px;

  padding:26px;

  margin-bottom:30px;

  border-radius:22px;

  color:#fff;

  background:
    linear-gradient(
      135deg,
      #2563eb,
      #7c3aed
    );

  box-shadow:
    0 18px 45px
    rgba(79,70,229,.18);
}

.selected-profile-card .section-kicker{
  color:#e0e7ff;
}

.selected-profile-card h2{
  margin-top:4px;

  font-family:"Poppins";

  font-size:24px;
}

.selected-profile-card p{
  margin-top:3px;

  font-size:12px;

  opacity:.8;
}

.selected-profile-icon{
  width:65px;
  height:65px;

  display:grid;
  place-items:center;

  flex-shrink:0;

  border-radius:18px;

  background:
    rgba(255,255,255,.15);

  font-size:29px;
}


/* =====================================================
   SUBJECT HEADER
===================================================== */

.subject-header{
  margin-bottom:18px;
}


/* =====================================================
   SUBJECT SEARCH
===================================================== */

.subject-search{
  display:flex;
  align-items:center;

  gap:10px;

  margin-bottom:19px;

  padding:10px 14px;

  border:
    1px solid var(--border);

  border-radius:14px;

  background:var(--card);
}

.subject-search span{
  font-size:17px;
}

.subject-search input{
  width:100%;

  padding:5px 0;

  border:none;
  outline:none;

  background:transparent;

  color:var(--text);

  font-size:12px;
}

.subject-search input::placeholder{
  color:#94a3b8;
}


/* =====================================================
   SUBJECT GRID
===================================================== */

.subject-grid{
  display:grid;

  grid-template-columns:
    repeat(2,1fr);

  gap:14px;
}

.subject-card{
  position:relative;

  display:flex;
  align-items:center;

  gap:14px;

  padding:18px;

  overflow:hidden;

  border:
    1px solid var(--border);

  border-radius:18px;

  background:var(--card);

  cursor:pointer;

  transition:.25s;
}

.subject-card:hover{
  transform:
    translateY(-4px);

  border-color:#c7d2fe;

  box-shadow:
    0 15px 34px
    rgba(15,23,42,.07);
}

.subject-card-icon{
  width:48px;
  height:48px;

  display:grid;
  place-items:center;

  flex-shrink:0;

  border-radius:14px;

  background:#eef2ff;

  font-size:21px;
}

.subject-card-content{
  flex:1;
}

.subject-card small{
  display:block;

  margin-bottom:2px;

  color:var(--primary);

  font-size:8px;
  font-weight:800;

  text-transform:uppercase;

  letter-spacing:.5px;
}

.subject-card h3{
  font-size:14px;

  line-height:1.35;
}

.subject-card p{
  margin-top:4px;

  color:var(--muted);

  font-size:10px;
}

.subject-card-arrow{
  color:var(--primary);

  font-size:16px;
  font-weight:800;
}


/* =====================================================
   SUBJECT BADGE
===================================================== */

.subject-count{
  display:inline-flex;

  margin-top:8px;

  padding:3px 7px;

  border-radius:99px;

  background:#f1f5f9;

  color:#64748b;

  font-size:8px;
  font-weight:800;
}


/* =====================================================
   EMPTY SUBJECT
===================================================== */

.subject-empty{
  padding:50px 20px;

  border:
    1px dashed var(--border);

  border-radius:20px;

  background:var(--card);

  text-align:center;
}

.subject-empty span{
  display:block;

  margin-bottom:8px;

  font-size:35px;
}

.subject-empty h3{
  font-size:15px;
}

.subject-empty p{
  margin-top:3px;

  color:var(--muted);

  font-size:11px;
}

.hidden{
  display:none !important;
}


/* =====================================================
   RESOURCE TYPE GRID
===================================================== */

.resource-type-grid{
  display:grid;

  grid-template-columns:
    repeat(6,1fr);

  gap:12px;
}

.resource-type-grid article{
  padding:20px 13px;

  border:
    1px solid var(--border);

  border-radius:17px;

  background:var(--card);

  text-align:center;

  transition:.25s;
}

.resource-type-grid article:hover{
  transform:
    translateY(-4px);

  box-shadow:
    0 14px 32px
    rgba(15,23,42,.06);
}

.resource-type-grid article > a{
  display:block;
  height:100%;
}

.resource-type-grid span{
  display:block;

  margin-bottom:8px;

  font-size:24px;
}

.resource-type-grid h3{
  font-size:13px;
}

.resource-type-grid p{
  margin-top:4px;

  color:var(--muted);

  font-size:9px;
}


/* =====================================================
   HELP CARD
===================================================== */

.explore-help-card{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:30px;

  padding:34px;

  border:
    1px solid var(--border);

  border-radius:24px;

  background:var(--card);
}

.explore-help-card h2{
  max-width:680px;

  margin-top:5px;

  font-family:"Poppins";

  font-size:25px;
}

.explore-help-card p{
  max-width:650px;

  margin-top:6px;

  color:var(--muted);

  font-size:12px;
}


/* =====================================================
   DARK MODE - EXPLORE
===================================================== */

body.dark .explore-hero{
  background:#0b1120;
}

body.dark .path-item > span{
  background:#182235;

  color:#94a3b8;
}

body.dark .path-item.active > span{
  color:#fff;

  background:
    linear-gradient(
      135deg,
      #2563eb,
      #7c3aed
    );
}

body.dark .subject-count{
  background:#182235;

  color:#94a3b8;
}

body.dark .reset-filter-btn:hover,
body.dark .small-card a:hover{
  background:#182235;
}


/* =====================================================
   TABLET - EXPLORE
===================================================== */

@media(max-width:980px){

  .explorer-layout{
    grid-template-columns:1fr;
  }

  .explorer-sidebar{
    position:static;
  }

  .sidebar-card:first-child{
    display:grid;

    grid-template-columns:
      repeat(2,1fr);

    gap:12px;
  }

  .sidebar-title{
    grid-column:1/-1;

    margin-bottom:5px;
  }

  .explore-field{
    margin-bottom:0;
  }

  .explore-submit,
  .reset-filter-btn{
    margin-top:0;
  }

  .small-card{
    display:none;
  }

  .resource-type-grid{
    grid-template-columns:
      repeat(3,1fr);
  }

}


/* =====================================================
   MOBILE - EXPLORE
===================================================== */

@media(max-width:650px){

  .explore-hero{
    padding:48px 0 36px;
  }

  .explore-hero-content{
    text-align:center;
  }

  .explore-hero h1{
    font-size:36px;
  }

  .explore-hero p{
    font-size:12px;
  }


  /* PATH */

  .academic-path{
    overflow-x:auto;

    justify-content:flex-start;

    padding-bottom:3px;
  }

  .path-item{
    flex-shrink:0;
  }

  .path-item div{
    display:none;
  }

  .path-line{
    width:35px;

    flex-shrink:0;
  }


  /* SIDEBAR */

  .sidebar-card:first-child{
    grid-template-columns:1fr;
  }

  .sidebar-title{
    grid-column:auto;
  }


  /* PROFILE */

  .selected-profile-card{
    padding:20px;
  }

  .selected-profile-card h2{
    font-size:18px;
  }

  .selected-profile-icon{
    width:50px;
    height:50px;

    border-radius:14px;

    font-size:23px;
  }


  /* SUBJECT */

  .subject-grid{
    grid-template-columns:1fr;
  }

  .subject-card{
    padding:15px;
  }

  .subject-card-icon{
    width:43px;
    height:43px;

    font-size:19px;
  }


  /* RESOURCE TYPES */

  .resource-type-grid{
    grid-template-columns:
      repeat(2,1fr);

    gap:10px;
  }

  .resource-type-grid article{
    padding:16px 10px;
  }


  /* HELP */

  .explore-help-card{
    align-items:flex-start;
    flex-direction:column;

    padding:24px 20px;
  }

  .explore-help-card h2{
    font-size:21px;
  }

  .explore-help-card .btn{
    width:100%;
  }

}


/* =====================================================
   SMALL MOBILE - EXPLORE
===================================================== */

@media(max-width:390px){

  .resource-type-grid{
    grid-template-columns:1fr;
  }

}

/* =====================================================
   SUBJECT PAGE
===================================================== */

.subject-top{
  padding:18px 0;

  border-bottom:
    1px solid var(--border);

  background:var(--card);
}


/* =====================================================
   BREADCRUMB
===================================================== */

.breadcrumb{
  display:flex;
  align-items:center;
  flex-wrap:wrap;

  gap:8px;

  color:var(--muted);

  font-size:11px;
}

.breadcrumb a{
  font-weight:700;

  transition:.2s;
}

.breadcrumb a:hover{
  color:var(--primary);
}

.breadcrumb span:last-child{
  color:var(--text);

  font-weight:700;
}


/* =====================================================
   SUBJECT HERO
===================================================== */

.subject-hero{
  padding:38px 0 20px;

  background:
    radial-gradient(
      circle at top left,
      #dbeafe 0,
      transparent 34%
    ),
    radial-gradient(
      circle at top right,
      #ede9fe 0,
      transparent 38%
    ),
    var(--bg);
}

.subject-hero-card{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:25px;

  padding:30px;

  border:
    1px solid var(--border);

  border-radius:24px;

  background:var(--card);

  box-shadow:
    0 18px 45px
    rgba(15,23,42,.06);
}

.subject-hero-main{
  display:flex;
  align-items:center;

  gap:18px;
}

.subject-main-icon{
  width:72px;
  height:72px;

  display:grid;
  place-items:center;

  flex-shrink:0;

  border-radius:20px;

  background:
    linear-gradient(
      135deg,
      #eef2ff,
      #ede9fe
    );

  font-size:32px;
}

.subject-hero h1{
  margin-top:5px;

  font-family:"Poppins";

  font-size:
    clamp(26px,3vw,38px);

  line-height:1.2;
}

.subject-hero p{
  margin-top:5px;

  color:var(--muted);

  font-size:12px;
}


/* SUBJECT ACTIONS */

.subject-hero-actions{
  display:flex;
  align-items:center;

  gap:9px;

  flex-shrink:0;
}

.subject-save-btn,
.subject-change-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:11px 15px;

  border-radius:11px;

  font-size:11px;
  font-weight:800;

  transition:.2s;
}

.subject-save-btn{
  border:
    1px solid var(--border);

  background:var(--card);

  color:var(--text);
}

.subject-save-btn:hover{
  border-color:#c7d2fe;

  background:#eef2ff;

  color:var(--primary);
}

.subject-save-btn.saved{
  border-color:#fecdd3;

  background:#fff1f2;

  color:#e11d48;
}

.subject-change-btn{
  border:
    1px solid #c7d2fe;

  background:#eef2ff;

  color:#4338ca;
}


/* =====================================================
   SUBJECT SUMMARY
===================================================== */

.subject-summary-section{
  padding:15px 0 25px;
}

.subject-summary-grid{
  display:grid;

  grid-template-columns:
    repeat(4,1fr);

  gap:12px;
}

.subject-summary-grid div{
  display:flex;
  flex-direction:column;

  padding:17px;

  border:
    1px solid var(--border);

  border-radius:16px;

  background:var(--card);

  text-align:center;
}

.subject-summary-grid strong{
  font-family:"Poppins";

  font-size:22px;

  color:var(--primary);
}

.subject-summary-grid span{
  color:var(--muted);

  font-size:10px;
  font-weight:700;
}


/* =====================================================
   SUBJECT RESOURCE MENU
===================================================== */

.subject-resource-menu{
  display:grid;

  grid-template-columns:
    repeat(4,1fr);

  gap:12px;
}

.subject-resource-tab{
  display:flex;
  align-items:center;

  gap:11px;

  padding:16px;

  border:
    1px solid var(--border);

  border-radius:16px;

  background:var(--card);

  color:var(--text);

  text-align:left;

  transition:.22s;
}

.subject-resource-tab:hover{
  transform:
    translateY(-3px);

  border-color:#c7d2fe;

  box-shadow:
    0 12px 28px
    rgba(15,23,42,.05);
}

.subject-resource-tab.active{
  border-color:#a5b4fc;

  background:#eef2ff;

  color:#4338ca;
}

.subject-resource-tab > span{
  width:41px;
  height:41px;

  display:grid;
  place-items:center;

  flex-shrink:0;

  border-radius:12px;

  background:#f8fafc;

  font-size:19px;
}

.subject-resource-tab.active > span{
  background:#fff;
}

.subject-resource-tab div{
  display:flex;
  flex-direction:column;
}

.subject-resource-tab strong{
  font-size:12px;
}

.subject-resource-tab small{
  color:var(--muted);

  font-size:9px;
}


/* =====================================================
   RESOURCE LIST SECTION
===================================================== */

.subject-resource-list-section{
  padding:
    0 0 76px;
}

.resource-toolbar{
  display:grid;

  grid-template-columns:
    1fr 190px 190px;

  gap:10px;

  margin-bottom:18px;
}


/* SEARCH */

.resource-search-box{
  display:flex;
  align-items:center;

  gap:9px;

  padding:10px 13px;

  border:
    1px solid var(--border);

  border-radius:13px;

  background:var(--card);
}

.resource-search-box input{
  width:100%;

  border:none;
  outline:none;

  background:transparent;

  color:var(--text);

  font-size:12px;
}

.resource-search-box input::placeholder{
  color:#94a3b8;
}


/* FILTER SELECT */

.resource-toolbar select{
  padding:11px;

  border:
    1px solid var(--border);

  border-radius:13px;

  outline:none;

  background:var(--card);

  color:var(--text);

  font-size:11px;
}

.resource-toolbar select:focus{
  border-color:#818cf8;

  box-shadow:
    0 0 0 3px
    rgba(99,102,241,.08);
}


/* =====================================================
   RESOURCE CARDS
===================================================== */

.subject-resource-list{
  display:grid;

  grid-template-columns:
    repeat(2,1fr);

  gap:14px;
}

.resource-item{
  display:flex;

  gap:14px;

  padding:18px;

  border:
    1px solid var(--border);

  border-radius:18px;

  background:var(--card);

  transition:.25s;
}

.resource-item:hover{
  transform:
    translateY(-3px);

  border-color:#c7d2fe;

  box-shadow:
    0 14px 32px
    rgba(15,23,42,.06);
}

.resource-item-icon{
  width:50px;
  height:50px;

  display:grid;
  place-items:center;

  flex-shrink:0;

  border-radius:14px;

  background:#eef2ff;

  font-size:22px;
}

.resource-item-main{
  flex:1;

  min-width:0;
}

.resource-item-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;

  gap:10px;
}

.resource-item-type{
  display:inline-block;

  margin-bottom:4px;

  color:var(--primary);

  font-size:8px;
  font-weight:800;

  letter-spacing:.6px;

  text-transform:uppercase;
}

.resource-item h3{
  font-size:14px;

  line-height:1.4;
}

.resource-item p{
  margin-top:4px;

  color:var(--muted);

  font-size:10px;
}


/* RESOURCE META */

.resource-item-meta{
  display:flex;
  flex-wrap:wrap;

  gap:7px;

  margin-top:11px;
}

.resource-meta-pill{
  display:inline-flex;
  align-items:center;

  gap:4px;

  padding:4px 7px;

  border-radius:99px;

  background:#f1f5f9;

  color:#64748b;

  font-size:8px;
  font-weight:700;
}


/* ACCESS BADGES */

.access-badge{
  flex-shrink:0;

  padding:4px 7px;

  border-radius:99px;

  font-size:8px;
  font-weight:800;

  text-transform:uppercase;
}

.access-badge.free{
  background:#dcfce7;

  color:#166534;
}

.access-badge.login{
  background:#dbeafe;

  color:#1d4ed8;
}

.access-badge.premium{
  background:#fef3c7;

  color:#92400e;
}


/* RESOURCE BUTTON AREA */

.resource-item-actions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;

  gap:7px;

  margin-top:13px;
}

.resource-view-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:8px 11px;

  border:none;
  border-radius:9px;

  background:
    linear-gradient(
      135deg,
      #2563eb,
      #7c3aed
    );

  color:#fff;

  font-size:9px;
  font-weight:800;

  cursor:pointer;
}

.resource-secondary-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:8px 11px;

  border:
    1px solid var(--border);

  border-radius:9px;

  background:transparent;

  color:var(--text);

  font-size:9px;
  font-weight:800;
}


/* =====================================================
   SOURCE BADGES
===================================================== */

.source-badge{
  display:inline-flex;
  align-items:center;

  gap:4px;

  padding:4px 7px;

  border-radius:99px;

  font-size:8px;
  font-weight:700;
}

.source-badge.google-drive{
  background:#ecfdf5;

  color:#047857;
}

.source-badge.youtube{
  background:#fef2f2;

  color:#b91c1c;
}

.source-badge.google-meet{
  background:#eff6ff;

  color:#1d4ed8;
}

.source-badge.cloudflare-r2{
  background:#fff7ed;

  color:#c2410c;
}

.source-badge.external{
  background:#f1f5f9;

  color:#475569;
}


/* =====================================================
   EMPTY RESOURCE STATE
===================================================== */

.resource-empty{
  padding:55px 20px;

  border:
    1px dashed var(--border);

  border-radius:20px;

  background:var(--card);

  text-align:center;
}

.resource-empty span{
  display:block;

  margin-bottom:8px;

  font-size:36px;
}

.resource-empty h3{
  font-size:15px;
}

.resource-empty p{
  max-width:450px;

  margin:
    5px auto 0;

  color:var(--muted);

  font-size:11px;
}


/* =====================================================
   UNIVERSAL VIEWER FEATURES
===================================================== */

.viewer-feature-grid{
  display:grid;

  grid-template-columns:
    repeat(6,1fr);

  gap:12px;
}

.viewer-feature-grid article{
  padding:19px 12px;

  border:
    1px solid var(--border);

  border-radius:17px;

  background:var(--card);

  text-align:center;

  transition:.25s;
}

.viewer-feature-grid article:hover{
  transform:
    translateY(-4px);

  box-shadow:
    0 14px 30px
    rgba(15,23,42,.06);
}

.viewer-feature-grid span{
  display:block;

  margin-bottom:8px;

  font-size:25px;
}

.viewer-feature-grid h3{
  font-size:12px;
}

.viewer-feature-grid p{
  margin-top:4px;

  color:var(--muted);

  font-size:9px;
}


/* =====================================================
   STUDY TIP
===================================================== */

.study-tip-card{
  display:grid;

  grid-template-columns:
    auto 1fr auto;

  align-items:center;

  gap:20px;

  padding:30px;

  border:
    1px solid var(--border);

  border-radius:22px;

  background:var(--card);
}

.study-tip-icon{
  width:58px;
  height:58px;

  display:grid;
  place-items:center;

  border-radius:17px;

  background:#fffbeb;

  font-size:27px;
}

.study-tip-card h2{
  margin-top:4px;

  font-family:"Poppins";

  font-size:21px;
}

.study-tip-card p{
  max-width:650px;

  margin-top:4px;

  color:var(--muted);

  font-size:11px;
}


/* =====================================================
   FUTURE RESOURCE VIEWER MODAL
===================================================== */

.viewer-modal{
  position:fixed;

  inset:0;

  z-index:3000;

  display:none;

  align-items:center;
  justify-content:center;

  padding:20px;

  background:
    rgba(2,6,23,.78);

  backdrop-filter:
    blur(8px);
}

.viewer-modal.show{
  display:flex;
}

.viewer-dialog{
  width:min(1000px,100%);

  max-height:92vh;

  overflow:hidden;

  border-radius:20px;

  background:var(--card);

  box-shadow:
    0 30px 90px
    rgba(0,0,0,.35);
}

.viewer-header{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:15px;

  padding:15px 17px;

  border-bottom:
    1px solid var(--border);
}

.viewer-header h3{
  font-size:13px;
}

.viewer-close{
  width:34px;
  height:34px;

  border:
    1px solid var(--border);

  border-radius:9px;

  background:var(--card);

  color:var(--text);

  cursor:pointer;
}

.viewer-body{
  position:relative;

  min-height:500px;

  background:#0f172a;
}

.viewer-body iframe{
  width:100%;
  height:70vh;

  display:block;

  border:none;
}


/* =====================================================
   PREMIUM LOCK
===================================================== */

.resource-lock{
  padding:30px;

  text-align:center;
}

.resource-lock span{
  display:block;

  margin-bottom:8px;

  font-size:35px;
}

.resource-lock h3{
  margin-bottom:5px;

  font-size:17px;
}

.resource-lock p{
  max-width:450px;

  margin:
    0 auto 15px;

  color:var(--muted);

  font-size:11px;
}


/* =====================================================
   DARK MODE
===================================================== */

body.dark .subject-hero{
  background:#0b1120;
}

body.dark .subject-resource-tab.active{
  background:#182235;

  color:#a5b4fc;
}

body.dark .subject-resource-tab > span,
body.dark .resource-meta-pill,
body.dark .source-badge.external{
  background:#182235;
}

body.dark .subject-save-btn:hover{
  background:#182235;
}

body.dark .study-tip-icon{
  background:#2a210c;
}


/* =====================================================
   TABLET
===================================================== */

@media(max-width:980px){

  .subject-resource-menu{
    grid-template-columns:
      repeat(2,1fr);
  }

  .viewer-feature-grid{
    grid-template-columns:
      repeat(3,1fr);
  }

  .subject-resource-list{
    grid-template-columns:1fr;
  }

  .resource-toolbar{
    grid-template-columns:
      1fr 1fr;
  }

  .resource-search-box{
    grid-column:1/-1;
  }

}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:650px){

  .subject-top{
    padding:13px 0;
  }

  .breadcrumb{
    font-size:9px;
  }


  /* HERO */

  .subject-hero{
    padding:25px 0 15px;
  }

  .subject-hero-card{
    align-items:flex-start;
    flex-direction:column;

    padding:21px;
  }

  .subject-hero-main{
    align-items:flex-start;
  }

  .subject-main-icon{
    width:55px;
    height:55px;

    border-radius:16px;

    font-size:25px;
  }

  .subject-hero h1{
    font-size:23px;
  }

  .subject-hero p{
    font-size:10px;
  }

  .subject-hero-actions{
    width:100%;
  }

  .subject-save-btn,
  .subject-change-btn{
    flex:1;
  }


  /* SUMMARY */

  .subject-summary-grid{
    grid-template-columns:
      repeat(2,1fr);
  }


  /* RESOURCE MENU */

  .subject-resource-menu{
    grid-template-columns:
      1fr 1fr;

    gap:9px;
  }

  .subject-resource-tab{
    align-items:flex-start;

    padding:13px 10px;
  }

  .subject-resource-tab > span{
    width:36px;
    height:36px;

    font-size:17px;
  }

  .subject-resource-tab strong{
    font-size:10px;
  }

  .subject-resource-tab small{
    font-size:8px;
  }


  /* TOOLBAR */

  .resource-toolbar{
    grid-template-columns:1fr;
  }

  .resource-search-box{
    grid-column:auto;
  }

  .resource-toolbar select{
    width:100%;
  }


  /* RESOURCE ITEM */

  .resource-item{
    padding:15px;
  }

  .resource-item-icon{
    width:43px;
    height:43px;

    border-radius:12px;

    font-size:19px;
  }

  .resource-item h3{
    font-size:12px;
  }


  /* VIEWER FEATURE */

  .viewer-feature-grid{
    grid-template-columns:
      repeat(2,1fr);
  }


  /* STUDY TIP */

  .study-tip-card{
    grid-template-columns:auto 1fr;

    align-items:flex-start;

    padding:22px 18px;
  }

  .study-tip-card .btn{
    grid-column:1/-1;

    width:100%;
  }

  .study-tip-card h2{
    font-size:17px;
  }


  /* VIEWER */

  .viewer-modal{
    padding:8px;
  }

  .viewer-dialog{
    border-radius:15px;
  }

  .viewer-body{
    min-height:420px;
  }

  .viewer-body iframe{
    height:72vh;
  }

}


/* =====================================================
   EXTRA SMALL MOBILE
===================================================== */

@media(max-width:390px){

  .subject-resource-menu,
  .viewer-feature-grid{
    grid-template-columns:1fr;
  }

  .subject-summary-grid{
    grid-template-columns:
      1fr 1fr;
  }

}

/* =====================================================
   RESOURCE VIEWER PAGE
===================================================== */

.resource-viewer-top{
  padding:16px 0;
  border-bottom:1px solid var(--border);
  background:var(--card);
}

.resource-viewer-breadcrumb{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  font-size:10px;
  color:var(--muted);
}

.resource-viewer-breadcrumb a,
.resource-viewer-breadcrumb button{
  border:none;
  background:transparent;
  color:var(--muted);
  font-size:10px;
  font-weight:700;
  cursor:pointer;
}

.resource-viewer-breadcrumb a:hover,
.resource-viewer-breadcrumb button:hover{
  color:var(--primary);
}

.resource-viewer-breadcrumb span:last-child{
  color:var(--text);
  font-weight:700;
}


/* =====================================================
   RESOURCE INFO
===================================================== */

.resource-info-section{
  padding:28px 0 16px;
}

.resource-info-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;

  padding:24px;

  border:1px solid var(--border);
  border-radius:22px;

  background:var(--card);

  box-shadow:
    0 12px 35px rgba(15,23,42,.05);
}

.resource-info-main{
  display:flex;
  align-items:center;
  gap:16px;
}

.resource-view-main-icon{
  width:66px;
  height:66px;

  display:grid;
  place-items:center;

  flex-shrink:0;

  border-radius:18px;

  background:
    linear-gradient(
      135deg,
      #eef2ff,
      #ede9fe
    );

  font-size:30px;
}

.resource-info-text{
  min-width:0;
}

.resource-viewer-labels{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:7px;
  margin-bottom:5px;
}

.resource-page-badge,
.resource-page-access{
  display:inline-flex;
  align-items:center;

  padding:4px 8px;

  border-radius:99px;

  font-size:8px;
  font-weight:800;
  letter-spacing:.4px;
  text-transform:uppercase;
}

.resource-page-badge{
  background:#eef2ff;
  color:#4338ca;
}

.resource-page-access.free{
  background:#dcfce7;
  color:#166534;
}

.resource-page-access.login{
  background:#dbeafe;
  color:#1d4ed8;
}

.resource-page-access.premium{
  background:#fef3c7;
  color:#92400e;
}

.resource-info-card h1{
  font-family:"Poppins";
  font-size:clamp(22px,3vw,32px);
  line-height:1.2;
}

.resource-info-card p{
  margin-top:5px;
  color:var(--muted);
  font-size:11px;
}

.resource-info-actions{
  display:flex;
  align-items:center;
  gap:9px;
  flex-shrink:0;
}

.resource-save-page-btn,
.resource-share-btn{
  padding:10px 14px;

  border:1px solid var(--border);
  border-radius:11px;

  background:var(--card);
  color:var(--text);

  font-size:10px;
  font-weight:800;

  cursor:pointer;
}

.resource-save-page-btn:hover,
.resource-share-btn:hover{
  border-color:#c7d2fe;
  background:#eef2ff;
  color:var(--primary);
}

.resource-save-page-btn.saved{
  background:#fff1f2;
  border-color:#fecdd3;
  color:#e11d48;
}


/* =====================================================
   MAIN VIEWER LAYOUT
===================================================== */

.main-viewer-section{
  padding:10px 0 32px;
}

.main-viewer-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 290px;
  gap:20px;
  align-items:start;
}

.main-viewer-card{
  position:relative;
  overflow:hidden;

  border:1px solid var(--border);
  border-radius:20px;

  background:var(--card);

  box-shadow:
    0 14px 40px rgba(15,23,42,.06);
}


/* =====================================================
   VIEWER TOOLBAR
===================================================== */

.main-viewer-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:15px;

  padding:13px 15px;

  border-bottom:1px solid var(--border);

  background:var(--card);
}

.main-viewer-toolbar > div:first-child{
  display:flex;
  align-items:center;
  gap:9px;
}

.viewer-source-icon{
  width:36px;
  height:36px;

  display:grid;
  place-items:center;

  border-radius:10px;

  background:#eef2ff;

  font-size:17px;
}

.main-viewer-toolbar small{
  display:block;
  color:var(--muted);
  font-size:7px;
  font-weight:800;
  letter-spacing:.6px;
}

.main-viewer-toolbar strong{
  display:block;
  font-size:11px;
}

.viewer-toolbar-actions{
  display:flex;
  gap:7px;
}

.viewer-toolbar-actions button{
  width:34px;
  height:34px;

  border:1px solid var(--border);
  border-radius:9px;

  background:var(--card);
  color:var(--text);

  cursor:pointer;
}

.viewer-toolbar-actions button:hover{
  color:var(--primary);
  border-color:#c7d2fe;
}


/* =====================================================
   ACTUAL VIEWER AREA
===================================================== */

.main-resource-viewer{
  position:relative;

  min-height:620px;

  background:#0f172a;
}

.main-resource-viewer iframe{
  width:100%;
  height:620px;

  display:block;
  border:none;
}

.main-resource-viewer video{
  width:100%;
  max-height:620px;

  display:block;

  background:#000;
}

.viewer-loading,
.viewer-placeholder,
.viewer-access-lock,
.viewer-error-state,
.viewer-meet-state{
  min-height:620px;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  gap:8px;

  padding:30px;

  text-align:center;

  color:#fff;
}

.viewer-loading span,
.viewer-placeholder span,
.viewer-access-lock > span,
.viewer-error-state > span,
.viewer-meet-state > span{
  display:block;
  font-size:42px;
}

.viewer-loading h3,
.viewer-placeholder h3,
.viewer-access-lock h3,
.viewer-error-state h3,
.viewer-meet-state h3{
  font-size:17px;
}

.viewer-placeholder p,
.viewer-access-lock p,
.viewer-error-state p,
.viewer-meet-state p{
  max-width:520px;
  color:#cbd5e1;
  font-size:11px;
}


/* =====================================================
   VIEWER WATERMARK
===================================================== */

.viewer-watermark{
  position:absolute;

  left:50%;
  top:50%;

  z-index:5;

  transform:
    translate(-50%,-50%)
    rotate(-28deg);

  pointer-events:none;

  color:rgba(255,255,255,.16);

  font-size:clamp(22px,4vw,48px);
  font-weight:800;

  letter-spacing:2px;

  white-space:nowrap;
}


/* =====================================================
   RESOURCE SIDE PANEL
===================================================== */

.resource-side-panel{
  display:flex;
  flex-direction:column;
  gap:13px;
}

.resource-side-card{
  padding:18px;

  border:1px solid var(--border);
  border-radius:17px;

  background:var(--card);
}

.resource-side-card h3{
  margin-bottom:13px;
  font-size:13px;
}

.resource-side-card > p{
  color:var(--muted);
  font-size:10px;
}

.resource-detail-row{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:15px;

  padding:9px 0;

  border-bottom:1px solid var(--border);

  font-size:10px;
}

.resource-detail-row:last-child{
  border-bottom:none;
}

.resource-detail-row span{
  color:var(--muted);
}

.resource-detail-row strong{
  text-align:right;
  font-size:10px;
}


/* =====================================================
   SIDE ACTIONS
===================================================== */

.side-action-btn{
  width:100%;

  display:flex;
  align-items:center;

  gap:9px;

  padding:10px;

  border:1px solid var(--border);
  border-radius:10px;

  background:transparent;
  color:var(--text);

  font-size:10px;
  font-weight:700;

  cursor:pointer;
}

.side-action-btn + .side-action-btn{
  margin-top:8px;
}

.side-action-btn:hover{
  border-color:#c7d2fe;
  background:#eef2ff;
  color:var(--primary);
}

.side-action-btn.completed{
  background:#ecfdf5;
  border-color:#bbf7d0;
  color:#15803d;
}


/* =====================================================
   SECURITY CARD
===================================================== */

.resource-security-card{
  display:flex;
  align-items:flex-start;
  gap:10px;

  padding:15px;

  border:1px solid #c7d2fe;
  border-radius:15px;

  background:#eef2ff;
}

.resource-security-card > span{
  font-size:20px;
}

.resource-security-card strong{
  display:block;
  color:#3730a3;
  font-size:10px;
}

.resource-security-card p{
  margin-top:2px;
  color:#6366f1;
  font-size:9px;
}


/* =====================================================
   PREVIOUS / NEXT
===================================================== */

.resource-navigation-section{
  padding:0 0 50px;
}

.resource-navigation{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.resource-nav-btn{
  display:flex;
  align-items:center;
  gap:12px;

  padding:16px 18px;

  border:1px solid var(--border);
  border-radius:15px;

  background:var(--card);
  color:var(--text);

  text-align:left;

  cursor:pointer;
}

.resource-nav-btn.next{
  justify-content:flex-end;
  text-align:right;
}

.resource-nav-btn:hover{
  border-color:#c7d2fe;
  color:var(--primary);
}

.resource-nav-btn > span{
  font-size:18px;
}

.resource-nav-btn small{
  display:block;
  color:var(--muted);
  font-size:7px;
  font-weight:800;
  letter-spacing:.5px;
}

.resource-nav-btn strong{
  font-size:11px;
}


/* =====================================================
   RELATED RESOURCES
===================================================== */

.related-view-all-btn{
  border:none;
  background:transparent;
  color:var(--primary);

  font-size:11px;
  font-weight:800;

  cursor:pointer;
}

.related-resource-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:13px;
}

.related-resource-card{
  padding:18px;

  border:1px solid var(--border);
  border-radius:17px;

  background:var(--card);

  cursor:pointer;

  transition:.22s;
}

.related-resource-card:hover{
  transform:translateY(-3px);
  border-color:#c7d2fe;
  box-shadow:
    0 12px 30px rgba(15,23,42,.05);
}

.related-resource-card > span{
  display:block;
  margin-bottom:8px;
  font-size:22px;
}

.related-resource-card small{
  color:var(--primary);
  font-size:8px;
  font-weight:800;
  text-transform:uppercase;
}

.related-resource-card h3{
  margin-top:3px;
  font-size:12px;
}

.related-resource-card p{
  margin-top:3px;
  color:var(--muted);
  font-size:9px;
}


/* =====================================================
   REPORT MODAL
===================================================== */

.report-modal{
  position:fixed;
  inset:0;

  z-index:3500;

  display:none;
  align-items:center;
  justify-content:center;

  padding:20px;

  background:rgba(2,6,23,.78);

  backdrop-filter:blur(7px);
}

.report-modal.show{
  display:flex;
}

.report-dialog{
  width:min(480px,100%);

  border-radius:18px;

  background:var(--card);

  box-shadow:
    0 30px 80px rgba(0,0,0,.3);
}

.report-dialog-header{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:15px;

  padding:16px 18px;

  border-bottom:1px solid var(--border);
}

.report-dialog-header h3{
  font-size:14px;
}

.report-dialog-header button{
  width:32px;
  height:32px;

  border:1px solid var(--border);
  border-radius:9px;

  background:var(--card);
  color:var(--text);

  cursor:pointer;
}

.report-dialog-body{
  padding:18px;
}

.report-dialog-body label{
  display:block;

  margin-bottom:14px;

  font-size:10px;
  font-weight:800;
}

.report-dialog-body select,
.report-dialog-body textarea{
  width:100%;

  margin-top:6px;
  padding:11px;

  border:1px solid var(--border);
  border-radius:10px;

  outline:none;

  background:var(--card);
  color:var(--text);

  font-size:11px;
}

.report-dialog-body textarea{
  resize:vertical;
}

.report-dialog-body .btn{
  width:100%;
}

.report-status{
  margin-top:10px;
  text-align:center;
  color:var(--primary);
  font-size:10px;
  font-weight:700;
}


/* =====================================================
   FULLSCREEN VIEWER
===================================================== */

.main-viewer-card.viewer-fullscreen{
  position:fixed;

  inset:0;

  z-index:5000;

  border:none;
  border-radius:0;

  background:var(--card);
}

.main-viewer-card.viewer-fullscreen
.main-resource-viewer{
  height:
    calc(100vh - 61px);

  min-height:0;
}

.main-viewer-card.viewer-fullscreen
.main-resource-viewer iframe{
  height:
    calc(100vh - 61px);
}

.main-viewer-card.viewer-fullscreen
.main-resource-viewer video{
  height:
    calc(100vh - 61px);

  max-height:none;

  object-fit:contain;
}


/* =====================================================
   DARK MODE
===================================================== */

body.dark .resource-security-card{
  background:#17204a;
  border-color:#3730a3;
}

body.dark .resource-security-card strong{
  color:#c7d2fe;
}

body.dark .resource-security-card p{
  color:#a5b4fc;
}

body.dark .side-action-btn:hover,
body.dark .resource-save-page-btn:hover,
body.dark .resource-share-btn:hover{
  background:#182235;
}


/* =====================================================
   TABLET
===================================================== */

@media(max-width:980px){

  .main-viewer-layout{
    grid-template-columns:1fr;
  }

  .resource-side-panel{
    display:grid;
    grid-template-columns:
      repeat(2,1fr);
  }

  .resource-security-card{
    grid-column:1/-1;
  }

  .related-resource-grid{
    grid-template-columns:
      repeat(2,1fr);
  }

}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:650px){

  .resource-info-card{
    align-items:flex-start;
    flex-direction:column;

    padding:19px;
  }

  .resource-info-main{
    align-items:flex-start;
  }

  .resource-view-main-icon{
    width:52px;
    height:52px;

    border-radius:15px;

    font-size:23px;
  }

  .resource-info-card h1{
    font-size:20px;
  }

  .resource-info-actions{
    width:100%;
  }

  .resource-save-page-btn,
  .resource-share-btn{
    flex:1;
  }


  /* VIEWER */

  .main-viewer-layout{
    gap:14px;
  }

  .main-resource-viewer,
  .viewer-loading,
  .viewer-placeholder,
  .viewer-access-lock,
  .viewer-error-state,
  .viewer-meet-state{
    min-height:480px;
  }

  .main-resource-viewer iframe{
    height:480px;
  }

  .main-resource-viewer video{
    max-height:480px;
  }


  /* SIDE PANEL */

  .resource-side-panel{
    grid-template-columns:1fr;
  }

  .resource-security-card{
    grid-column:auto;
  }


  /* NAV */

  .resource-navigation{
    grid-template-columns:1fr;
  }


  /* RELATED */

  .related-resource-grid{
    grid-template-columns:1fr;
  }


  /* WATERMARK */

  .viewer-watermark{
    font-size:24px;
  }

}


/* =====================================================
   EXTRA SMALL MOBILE
===================================================== */

@media(max-width:390px){

  .main-viewer-toolbar{
    padding:11px;
  }

  .viewer-source-icon{
    width:32px;
    height:32px;
  }

}

/* =====================================================
   AUTH / LOGIN PAGE
===================================================== */

.auth-page{
  position:relative;
  overflow:hidden;

  min-height:
    calc(100vh - 70px);

  padding:60px 0;

  background:
    linear-gradient(
      180deg,
      var(--bg),
      #f8faff
    );
}


/* =====================================================
   BACKGROUND DECORATION
===================================================== */

.auth-background-shape{
  position:absolute;

  border-radius:50%;

  pointer-events:none;

  filter:blur(4px);

  opacity:.55;
}

.auth-shape-one{
  width:360px;
  height:360px;

  top:-120px;
  left:-120px;

  background:
    radial-gradient(
      circle,
      #bfdbfe,
      transparent 70%
    );
}

.auth-shape-two{
  width:430px;
  height:430px;

  right:-150px;
  bottom:-170px;

  background:
    radial-gradient(
      circle,
      #ddd6fe,
      transparent 70%
    );
}


/* =====================================================
   AUTH MAIN LAYOUT
===================================================== */

.auth-shell{
  position:relative;

  z-index:2;

  display:grid;

  grid-template-columns:
    1fr 460px;

  gap:70px;

  align-items:center;
}


/* =====================================================
   LEFT INFO PANEL
===================================================== */

.auth-info-panel{
  max-width:650px;
}

.auth-back-link{
  display:inline-flex;
  align-items:center;

  margin-bottom:32px;

  color:var(--muted);

  font-size:11px;
  font-weight:800;

  transition:.2s;
}

.auth-back-link:hover{
  color:var(--primary);

  transform:
    translateX(-3px);
}

.auth-info-panel h1{
  max-width:620px;

  margin-top:10px;

  font-family:"Poppins";

  font-size:
    clamp(38px,5vw,62px);

  line-height:1.08;

  letter-spacing:-1.8px;
}

.auth-info-panel h1 span{
  display:block;

  color:transparent;

  background:
    linear-gradient(
      90deg,
      #2563eb,
      #7c3aed
    );

  -webkit-background-clip:text;
  background-clip:text;
}

.auth-info-panel > p{
  max-width:580px;

  margin-top:18px;

  color:var(--muted);

  font-size:14px;

  line-height:1.75;
}


/* =====================================================
   AUTH FEATURE LIST
===================================================== */

.auth-feature-list{
  display:grid;

  grid-template-columns:
    repeat(2,1fr);

  gap:12px;

  margin-top:30px;
}

.auth-feature-list > div{
  display:flex;
  align-items:flex-start;

  gap:11px;

  padding:14px;

  border:
    1px solid var(--border);

  border-radius:15px;

  background:
    rgba(255,255,255,.64);

  backdrop-filter:
    blur(10px);
}

.auth-feature-list > div > span{
  width:38px;
  height:38px;

  display:grid;
  place-items:center;

  flex-shrink:0;

  border-radius:11px;

  background:#eef2ff;

  font-size:17px;
}

.auth-feature-list strong{
  display:block;

  font-size:11px;
}

.auth-feature-list small{
  display:block;

  margin-top:3px;

  color:var(--muted);

  font-size:9px;

  line-height:1.45;
}


/* =====================================================
   SECURITY NOTE
===================================================== */

.auth-security-note{
  display:flex;
  align-items:flex-start;

  gap:11px;

  margin-top:18px;

  padding:14px 16px;

  border:
    1px solid #bbf7d0;

  border-radius:15px;

  background:#f0fdf4;
}

.auth-security-note > span{
  font-size:20px;
}

.auth-security-note strong{
  display:block;

  color:#166534;

  font-size:10px;
}

.auth-security-note p{
  margin-top:2px;

  color:#15803d;

  font-size:9px;

  line-height:1.5;
}


/* =====================================================
   AUTH CARD
===================================================== */

.auth-card{
  padding:30px;

  border:
    1px solid var(--border);

  border-radius:26px;

  background:
    rgba(255,255,255,.88);

  backdrop-filter:
    blur(18px);

  box-shadow:
    0 30px 80px
    rgba(15,23,42,.10);
}

.auth-card-header{
  display:flex;
  align-items:flex-start;

  gap:13px;

  margin-bottom:27px;
}

.auth-card-icon{
  width:48px;
  height:48px;

  display:grid;
  place-items:center;

  flex-shrink:0;

  border-radius:14px;

  background:
    linear-gradient(
      135deg,
      #eef2ff,
      #ede9fe
    );

  font-size:21px;
}

.auth-card-header small{
  display:block;

  color:var(--primary);

  font-size:8px;
  font-weight:800;

  letter-spacing:.7px;
}

.auth-card-header h2{
  margin-top:2px;

  font-family:"Poppins";

  font-size:21px;
}

.auth-card-header p{
  margin-top:3px;

  color:var(--muted);

  font-size:10px;
}


/* =====================================================
   AUTH FORM
===================================================== */

.auth-form{
  display:flex;
  flex-direction:column;

  gap:16px;
}

.auth-field label{
  display:block;

  margin-bottom:6px;

  color:var(--text);

  font-size:10px;
  font-weight:800;
}

.auth-label-row{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:15px;
}

.auth-label-row a{
  margin-bottom:6px;

  color:var(--primary);

  font-size:9px;
  font-weight:700;
}


/* =====================================================
   AUTH INPUT
===================================================== */

.auth-input-wrap{
  display:flex;
  align-items:center;

  gap:9px;

  padding:0 12px;

  border:
    1px solid var(--border);

  border-radius:12px;

  background:var(--card);

  transition:.2s;
}

.auth-input-wrap:focus-within{
  border-color:#818cf8;

  box-shadow:
    0 0 0 4px
    rgba(99,102,241,.09);
}

.auth-input-wrap > span{
  flex-shrink:0;

  color:#64748b;

  font-size:14px;
}

.auth-input-wrap input{
  width:100%;

  padding:12px 0;

  border:none;
  outline:none;

  background:transparent;

  color:var(--text);

  font-size:11px;
}

.auth-input-wrap input::placeholder{
  color:#94a3b8;
}


/* =====================================================
   PASSWORD BUTTON
===================================================== */

.password-toggle-btn{
  width:33px;
  height:33px;

  display:grid;
  place-items:center;

  flex-shrink:0;

  border:none;

  background:transparent;

  cursor:pointer;

  font-size:13px;
}


/* =====================================================
   VALIDATION
===================================================== */

.auth-field-error{
  display:block;

  min-height:14px;

  margin-top:4px;

  color:#dc2626;

  font-size:8px;
  font-weight:700;
}

.auth-input-wrap.error{
  border-color:#fca5a5;

  background:#fef2f2;
}

.auth-input-wrap.success{
  border-color:#86efac;
}


/* =====================================================
   AUTH OPTIONS
===================================================== */

.auth-options{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:15px;
}

.remember-check{
  display:flex !important;
  align-items:center;

  gap:7px;

  margin:0 !important;

  cursor:pointer;
}

.remember-check input{
  width:14px;
  height:14px;

  accent-color:var(--primary);
}

.remember-check span{
  color:var(--muted);

  font-size:9px;
  font-weight:700;
}


/* =====================================================
   SUBMIT BUTTON
===================================================== */

.auth-submit-btn{
  width:100%;

  display:flex;
  align-items:center;
  justify-content:center;

  gap:10px;

  padding:13px 18px;

  border:none;
  border-radius:12px;

  background:
    linear-gradient(
      135deg,
      #2563eb,
      #7c3aed
    );

  color:#fff;

  font-size:11px;
  font-weight:800;

  cursor:pointer;

  box-shadow:
    0 12px 25px
    rgba(79,70,229,.20);

  transition:.22s;
}

.auth-submit-btn:hover{
  transform:
    translateY(-2px);

  box-shadow:
    0 17px 32px
    rgba(79,70,229,.26);
}

.auth-submit-btn:disabled{
  opacity:.7;

  cursor:not-allowed;

  transform:none;
}


/* =====================================================
   AUTH STATUS
===================================================== */

.auth-status{
  padding:10px 12px;

  border-radius:10px;

  font-size:9px;
  font-weight:700;

  text-align:center;
}

.auth-status.success{
  border:
    1px solid #bbf7d0;

  background:#f0fdf4;

  color:#15803d;
}

.auth-status.error{
  border:
    1px solid #fecaca;

  background:#fef2f2;

  color:#dc2626;
}


/* =====================================================
   DIVIDER
===================================================== */

.auth-divider{
  position:relative;

  margin:22px 0;

  text-align:center;
}

.auth-divider::before{
  content:"";

  position:absolute;

  top:50%;
  left:0;

  width:100%;
  height:1px;

  background:var(--border);
}

.auth-divider span{
  position:relative;

  z-index:1;

  padding:0 10px;

  background:var(--card);

  color:var(--muted);

  font-size:9px;
  font-weight:700;
}


/* =====================================================
   SECONDARY AUTH BUTTON
===================================================== */

.auth-secondary-btn{
  width:100%;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:12px 16px;

  border:
    1px solid var(--border);

  border-radius:12px;

  background:transparent;

  color:var(--text);

  font-size:10px;
  font-weight:800;

  transition:.2s;
}

.auth-secondary-btn:hover{
  border-color:#c7d2fe;

  background:#eef2ff;

  color:var(--primary);
}


/* =====================================================
   DEVELOPMENT BOX
===================================================== */

.auth-demo-box{
  margin-top:18px;

  padding:12px 13px;

  border:
    1px dashed #fbbf24;

  border-radius:11px;

  background:#fffbeb;
}

.auth-demo-box strong{
  display:block;

  color:#92400e;

  font-size:9px;
}

.auth-demo-box p{
  margin-top:3px;

  color:#a16207;

  font-size:8px;

  line-height:1.5;
}


/* =====================================================
   AUTH FOOTER
===================================================== */

.auth-footer{
  padding-top:0;
}


/* =====================================================
   DARK MODE - AUTH
===================================================== */

body.dark .auth-page{
  background:#0b1120;
}

body.dark .auth-card,
body.dark .auth-feature-list > div{
  background:
    rgba(15,23,42,.88);
}

body.dark .auth-security-note{
  border-color:#14532d;

  background:#10281d;
}

body.dark .auth-security-note strong{
  color:#86efac;
}

body.dark .auth-security-note p{
  color:#4ade80;
}

body.dark .auth-demo-box{
  border-color:#854d0e;

  background:#2a210c;
}

body.dark .auth-demo-box strong{
  color:#fde68a;
}

body.dark .auth-demo-box p{
  color:#facc15;
}

body.dark .auth-secondary-btn:hover{
  background:#182235;
}

body.dark .auth-input-wrap.error{
  background:#321b22;
}


/* =====================================================
   TABLET
===================================================== */

@media(max-width:980px){

  .auth-shell{
    grid-template-columns:
      1fr 420px;

    gap:35px;
  }

  .auth-info-panel h1{
    font-size:42px;
  }

  .auth-feature-list{
    grid-template-columns:1fr;
  }

}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:760px){

  .auth-page{
    padding:35px 0 50px;
  }

  .auth-shell{
    grid-template-columns:1fr;

    gap:32px;
  }

  .auth-info-panel{
    max-width:none;

    text-align:center;
  }

  .auth-back-link{
    margin-bottom:22px;
  }

  .auth-info-panel h1{
    margin-left:auto;
    margin-right:auto;

    font-size:38px;
  }

  .auth-info-panel > p{
    margin-left:auto;
    margin-right:auto;

    font-size:12px;
  }

  .auth-feature-list{
    grid-template-columns:
      repeat(2,1fr);

    text-align:left;
  }

  .auth-security-note{
    text-align:left;
  }

  .auth-card{
    width:100%;

    max-width:500px;

    margin:0 auto;

    padding:25px 21px;
  }

}


/* =====================================================
   SMALL MOBILE
===================================================== */

@media(max-width:480px){

  .auth-info-panel h1{
    font-size:32px;
  }

  .auth-feature-list{
    grid-template-columns:1fr;
  }

  .auth-card-header h2{
    font-size:18px;
  }

  .auth-card{
    border-radius:20px;
  }

}


/* =====================================================
   EXTRA SMALL MOBILE
===================================================== */

@media(max-width:360px){

  .auth-card{
    padding:20px 16px;
  }

}

/* =====================================================
   REGISTRATION PAGE
===================================================== */

.register-page{
  padding-top:50px;
  padding-bottom:70px;
}

.register-auth-shell{
  grid-template-columns:
    minmax(0,1fr) 500px;

  align-items:start;
}

.register-card{
  padding:28px;
}


/* =====================================================
   REGISTRATION ACADEMIC GRID
===================================================== */

.register-academic-grid{
  display:grid;

  grid-template-columns:
    repeat(2,1fr);

  gap:14px;
}


/* =====================================================
   AUTH SELECT
===================================================== */

.auth-select-wrap{
  position:relative;

  border:
    1px solid var(--border);

  border-radius:12px;

  background:var(--card);

  transition:.2s;
}

.auth-select-wrap:focus-within{
  border-color:#818cf8;

  box-shadow:
    0 0 0 4px
    rgba(99,102,241,.09);
}

.auth-select-wrap::after{
  content:"⌄";

  position:absolute;

  top:50%;
  right:12px;

  transform:
    translateY(-55%);

  pointer-events:none;

  color:var(--muted);

  font-size:13px;
  font-weight:800;
}

.auth-select-wrap select{
  width:100%;

  padding:12px 36px 12px 12px;

  border:none;
  outline:none;

  appearance:none;
  -webkit-appearance:none;

  background:transparent;

  color:var(--text);

  font-size:10px;

  cursor:pointer;
}


/* =====================================================
   TERMS & CONDITIONS
===================================================== */

.register-terms{
  display:flex !important;
  align-items:flex-start;

  gap:9px;

  margin:2px 0 0 !important;

  cursor:pointer;
}

.register-terms input{
  width:15px;
  height:15px;

  flex-shrink:0;

  margin-top:2px;

  accent-color:var(--primary);
}

.register-terms span{
  color:var(--muted);

  font-size:9px;

  line-height:1.55;
}

.register-terms a{
  color:var(--primary);

  font-weight:800;
}

.register-terms a:hover{
  text-decoration:underline;
}


/* =====================================================
   REGISTER CARD SMALL IMPROVEMENTS
===================================================== */

.register-card .auth-form{
  gap:14px;
}

.register-card .auth-field-error{
  min-height:11px;
}

.register-card .auth-card-header{
  margin-bottom:23px;
}


/* =====================================================
   OPTIONAL MOBILE NUMBER STYLE
===================================================== */

#registerMobile{
  letter-spacing:.4px;
}


/* =====================================================
   SELECT DISABLED STATE
===================================================== */

.auth-select-wrap select:disabled{
  opacity:.55;

  cursor:not-allowed;
}


/* =====================================================
   DARK MODE - REGISTRATION
===================================================== */

body.dark .auth-select-wrap{
  background:var(--card);
}

body.dark .auth-select-wrap select{
  color:var(--text);
}

body.dark .auth-select-wrap select option{
  background:#0f172a;

  color:#e2e8f0;
}


/* =====================================================
   TABLET - REGISTRATION
===================================================== */

@media(max-width:1050px){

  .register-auth-shell{
    grid-template-columns:
      minmax(0,1fr) 450px;

    gap:35px;
  }

}


/* =====================================================
   TABLET / MOBILE
===================================================== */

@media(max-width:820px){

  .register-auth-shell{
    grid-template-columns:1fr;
  }

  .register-card{
    width:100%;

    max-width:560px;

    margin:0 auto;
  }

}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:600px){

  .register-page{
    padding-top:32px;
  }

  .register-card{
    padding:23px 19px;
  }

  .register-academic-grid{
    grid-template-columns:1fr;
  }

}


/* =====================================================
   SMALL MOBILE
===================================================== */

@media(max-width:380px){

  .register-card{
    padding:20px 15px;
  }

}

/* =====================================================
   STUDENT DASHBOARD PAGE
===================================================== */

.dashboard-page{
  min-height:100vh;
  background:var(--bg);
}


/* =====================================================
   HEADER PROFILE BUTTON
===================================================== */

.dashboard-profile-btn{
  display:flex;
  align-items:center;
  gap:8px;

  padding:6px 10px 6px 6px;

  border:1px solid var(--border);
  border-radius:99px;

  background:var(--card);
  color:var(--text);

  cursor:pointer;
}

.dashboard-profile-btn > span{
  width:30px;
  height:30px;

  display:grid;
  place-items:center;

  border-radius:50%;

  background:
    linear-gradient(
      135deg,
      #2563eb,
      #7c3aed
    );

  color:#fff;

  font-size:10px;
  font-weight:800;
}

.dashboard-profile-btn strong{
  font-size:9px;
}

.mobile-logout-btn{
  width:100%;

  padding:11px;

  border:1px solid #fecaca;
  border-radius:10px;

  background:#fef2f2;
  color:#dc2626;

  font-size:10px;
  font-weight:800;

  cursor:pointer;
}


/* =====================================================
   DASHBOARD HERO
===================================================== */

.dashboard-hero{
  padding:38px 0 18px;

  background:
    radial-gradient(
      circle at top left,
      #dbeafe 0,
      transparent 35%
    ),
    radial-gradient(
      circle at top right,
      #ede9fe 0,
      transparent 35%
    ),
    var(--bg);
}

.dashboard-welcome-card{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:25px;

  padding:30px;

  border:1px solid var(--border);
  border-radius:24px;

  background:var(--card);

  box-shadow:
    0 18px 45px
    rgba(15,23,42,.06);
}

.dashboard-welcome-card h1{
  margin-top:5px;

  font-family:"Poppins";

  font-size:
    clamp(26px,4vw,40px);

  line-height:1.15;
}

.dashboard-welcome-card h1 span{
  color:var(--primary);
}

.dashboard-welcome-card p{
  margin-top:7px;

  color:var(--muted);

  font-size:11px;
}

.dashboard-hero-actions{
  display:flex;
  align-items:center;
  gap:9px;

  flex-shrink:0;
}


/* =====================================================
   DASHBOARD STATS
===================================================== */

.dashboard-stats-section{
  padding:0 0 24px;
}

.dashboard-stats-grid{
  display:grid;

  grid-template-columns:
    repeat(4,1fr);

  gap:12px;
}

.dashboard-stats-grid article{
  display:flex;
  align-items:center;

  gap:12px;

  padding:17px;

  border:1px solid var(--border);
  border-radius:17px;

  background:var(--card);

  transition:.22s;
}

.dashboard-stats-grid article:hover{
  transform:translateY(-3px);

  border-color:#c7d2fe;

  box-shadow:
    0 12px 30px
    rgba(15,23,42,.05);
}

.dashboard-stat-icon{
  width:43px;
  height:43px;

  display:grid;
  place-items:center;

  flex-shrink:0;

  border-radius:13px;

  background:#eef2ff;

  font-size:19px;
}

.dashboard-stats-grid strong{
  display:block;

  font-family:"Poppins";

  font-size:19px;

  color:var(--primary);
}

.dashboard-stats-grid p{
  color:var(--muted);

  font-size:9px;
  font-weight:700;
}


/* =====================================================
   MAIN DASHBOARD LAYOUT
===================================================== */

.dashboard-main-section{
  padding:0 0 70px;
}

.dashboard-main-layout{
  display:grid;

  grid-template-columns:
    minmax(0,1fr) 310px;

  gap:22px;

  align-items:start;
}

.dashboard-content{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.dashboard-sidebar{
  position:sticky;

  top:92px;

  display:flex;
  flex-direction:column;
  gap:13px;
}


/* =====================================================
   DASHBOARD PANEL
===================================================== */

.dashboard-panel{
  padding:22px;

  border:1px solid var(--border);
  border-radius:20px;

  background:var(--card);
}

.dashboard-panel-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;

  gap:15px;

  margin-bottom:17px;
}

.dashboard-panel-head h2{
  margin-top:3px;

  font-family:"Poppins";

  font-size:19px;
}

.dashboard-panel-head > a{
  color:var(--primary);

  font-size:9px;
  font-weight:800;
}


/* =====================================================
   CONTINUE STUDY
===================================================== */

.continue-study-card{
  display:grid;

  grid-template-columns:
    auto 1fr auto;

  align-items:center;

  gap:15px;

  padding:18px;

  border-radius:17px;

  background:
    linear-gradient(
      135deg,
      #eef2ff,
      #f5f3ff
    );
}

.continue-study-icon{
  width:50px;
  height:50px;

  display:grid;
  place-items:center;

  border-radius:14px;

  background:#fff;

  font-size:22px;
}

.continue-study-card small{
  display:block;

  color:#6366f1;

  font-size:7px;
  font-weight:800;
  letter-spacing:.5px;
}

.continue-study-card h3{
  margin-top:2px;

  font-size:13px;
}

.continue-study-card p{
  margin-top:3px;

  color:#64748b;

  font-size:9px;
}

.continue-study-btn{
  padding:9px 12px;

  border-radius:9px;

  background:#fff;

  color:#4338ca;

  font-size:9px;
  font-weight:800;
}


/* =====================================================
   QUICK ACCESS
===================================================== */

.dashboard-quick-grid{
  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:11px;
}

.dashboard-quick-grid a{
  display:flex;
  flex-direction:column;

  min-height:120px;

  padding:16px;

  border:1px solid var(--border);
  border-radius:16px;

  background:var(--card);

  transition:.22s;
}

.dashboard-quick-grid a:hover{
  transform:translateY(-3px);

  border-color:#c7d2fe;

  box-shadow:
    0 12px 28px
    rgba(15,23,42,.05);
}

.dashboard-quick-grid a > span{
  display:block;

  margin-bottom:13px;

  font-size:23px;
}

.dashboard-quick-grid strong{
  font-size:11px;
}

.dashboard-quick-grid small{
  margin-top:3px;

  color:var(--muted);

  font-size:8px;
}


/* =====================================================
   DASHBOARD SAVED RESOURCES
===================================================== */

.dashboard-resource-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.dashboard-resource-item{
  display:flex;
  align-items:center;

  gap:12px;

  padding:13px;

  border:1px solid var(--border);
  border-radius:14px;

  background:var(--card);

  cursor:pointer;

  transition:.2s;
}

.dashboard-resource-item:hover{
  border-color:#c7d2fe;

  background:#f8faff;
}

.dashboard-resource-item-icon{
  width:41px;
  height:41px;

  display:grid;
  place-items:center;

  flex-shrink:0;

  border-radius:11px;

  background:#eef2ff;

  font-size:18px;
}

.dashboard-resource-item-main{
  flex:1;
  min-width:0;
}

.dashboard-resource-item-main small{
  display:block;

  color:var(--primary);

  font-size:7px;
  font-weight:800;
  text-transform:uppercase;
}

.dashboard-resource-item-main h3{
  margin-top:2px;

  overflow:hidden;

  text-overflow:ellipsis;
  white-space:nowrap;

  font-size:11px;
}

.dashboard-resource-item-main p{
  margin-top:2px;

  color:var(--muted);

  font-size:8px;
}

.dashboard-resource-item > span:last-child{
  color:var(--primary);

  font-size:15px;
  font-weight:800;
}


/* =====================================================
   DASHBOARD EMPTY STATE
===================================================== */

.dashboard-empty-state{
  padding:35px 15px;

  border:1px dashed var(--border);
  border-radius:15px;

  text-align:center;
}

.dashboard-empty-state > span{
  display:block;

  margin-bottom:7px;

  font-size:30px;
}

.dashboard-empty-state h3{
  font-size:12px;
}

.dashboard-empty-state p{
  margin-top:4px;

  color:var(--muted);

  font-size:9px;
}


/* =====================================================
   DASHBOARD PROGRESS
===================================================== */

.dashboard-progress-card{
  display:grid;

  grid-template-columns:
    auto 1fr;

  align-items:center;

  gap:22px;

  padding:19px;

  border-radius:17px;

  background:#f8fafc;
}

.progress-ring-wrap{
  flex-shrink:0;
}

.dashboard-progress-ring{
  width:92px;
  height:92px;

  display:grid;
  place-items:center;

  border-radius:50%;

  background:
    conic-gradient(
      #6366f1 0deg,
      #e2e8f0 0deg
    );

  position:relative;
}

.dashboard-progress-ring::before{
  content:"";

  position:absolute;

  width:70px;
  height:70px;

  border-radius:50%;

  background:var(--card);
}

.dashboard-progress-ring span{
  position:relative;

  z-index:1;

  font-family:"Poppins";

  font-size:15px;
  font-weight:800;
}

.dashboard-progress-info h3{
  font-size:14px;
}

.dashboard-progress-info p{
  margin-top:4px;

  color:var(--muted);

  font-size:9px;
}

.dashboard-progress-bar{
  width:100%;
  height:7px;

  margin-top:12px;

  overflow:hidden;

  border-radius:99px;

  background:#e2e8f0;
}

.dashboard-progress-bar span{
  display:block;

  height:100%;

  border-radius:inherit;

  background:
    linear-gradient(
      90deg,
      #2563eb,
      #7c3aed
    );

  transition:width .35s ease;
}


/* =====================================================
   DASHBOARD SIDE CARDS
===================================================== */

.dashboard-side-card{
  padding:18px;

  border:1px solid var(--border);
  border-radius:17px;

  background:var(--card);
}

.profile-summary-top{
  display:flex;
  align-items:center;

  gap:11px;

  margin-bottom:14px;
}

.dashboard-large-avatar{
  width:45px;
  height:45px;

  display:grid;
  place-items:center;

  flex-shrink:0;

  border-radius:50%;

  background:
    linear-gradient(
      135deg,
      #2563eb,
      #7c3aed
    );

  color:#fff;

  font-size:14px;
  font-weight:800;
}

.profile-summary-top h3{
  font-size:12px;
}

.profile-summary-top p{
  margin-top:2px;

  color:var(--muted);

  font-size:8px;

  word-break:break-all;
}

.profile-plan-row{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:10px;

  padding:11px 0;

  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}

.profile-plan-row > span{
  color:var(--muted);

  font-size:9px;
}

.dashboard-plan-badge{
  padding:4px 7px;

  border-radius:99px;

  font-size:7px;
  font-weight:800;
}

.dashboard-plan-badge.free{
  background:#f1f5f9;

  color:#475569;
}

.dashboard-plan-badge.premium{
  background:#fef3c7;

  color:#92400e;
}

.dashboard-profile-link,
.dashboard-side-link{
  display:inline-block;

  margin-top:12px;

  color:var(--primary);

  font-size:9px;
  font-weight:800;
}


/* =====================================================
   ACADEMIC DETAIL
===================================================== */

.dashboard-side-title{
  display:flex;
  align-items:center;

  gap:8px;

  margin-bottom:13px;
}

.dashboard-side-title > span{
  font-size:18px;
}

.dashboard-side-title h3{
  font-size:12px;
}

.dashboard-detail-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;

  gap:12px;

  padding:8px 0;

  border-bottom:1px solid var(--border);

  font-size:9px;
}

.dashboard-detail-row:last-of-type{
  border-bottom:none;
}

.dashboard-detail-row span{
  color:var(--muted);
}

.dashboard-detail-row strong{
  max-width:160px;

  text-align:right;

  font-size:8px;
}


/* =====================================================
   LIVE DASHBOARD CARD
===================================================== */

.live-dashboard-card{
  background:
    linear-gradient(
      145deg,
      #fff,
      #fff7f7
    );
}

.live-small-badge{
  display:inline-flex;

  padding:4px 7px;

  border-radius:99px;

  background:#fee2e2;

  color:#dc2626;

  font-size:7px;
  font-weight:800;
}

.live-dashboard-card h3{
  margin-top:8px;

  font-size:12px;
}

.live-dashboard-card p{
  margin-top:4px;

  color:var(--muted);

  font-size:9px;

  line-height:1.5;
}


/* =====================================================
   PREMIUM CARD
===================================================== */

.dashboard-premium-card{
  padding:20px;

  border-radius:18px;

  color:#fff;

  background:
    linear-gradient(
      135deg,
      #4338ca,
      #7c3aed
    );

  box-shadow:
    0 15px 35px
    rgba(79,70,229,.18);
}

.dashboard-premium-card > span{
  display:block;

  margin-bottom:8px;

  font-size:25px;
}

.dashboard-premium-card h3{
  font-size:14px;
}

.dashboard-premium-card p{
  margin-top:5px;

  color:#e0e7ff;

  font-size:9px;

  line-height:1.5;
}

.dashboard-premium-card a{
  display:inline-block;

  margin-top:13px;

  color:#fff;

  font-size:9px;
  font-weight:800;
}

.dashboard-premium-card.active-premium{
  background:
    linear-gradient(
      135deg,
      #047857,
      #059669
    );
}


/* =====================================================
   LOGOUT BUTTON
===================================================== */

.dashboard-logout-btn{
  width:100%;

  padding:11px;

  border:1px solid #fecaca;
  border-radius:12px;

  background:#fef2f2;
  color:#dc2626;

  font-size:9px;
  font-weight:800;

  cursor:pointer;

  transition:.2s;
}

.dashboard-logout-btn:hover{
  background:#fee2e2;
}


/* =====================================================
   DARK MODE DASHBOARD
===================================================== */

body.dark .dashboard-hero{
  background:#0b1120;
}

body.dark .continue-study-card{
  background:#182235;
}

body.dark .continue-study-icon,
body.dark .continue-study-btn{
  background:#0f172a;
}

body.dark .continue-study-card p{
  color:#94a3b8;
}

body.dark .dashboard-progress-card{
  background:#111c30;
}

body.dark .dashboard-progress-bar{
  background:#253247;
}

body.dark .dashboard-resource-item:hover{
  background:#182235;
}

body.dark .live-dashboard-card{
  background:#171822;
}

body.dark .dashboard-logout-btn{
  border-color:#7f1d1d;

  background:#30191f;

  color:#fca5a5;
}


/* =====================================================
   TABLET
===================================================== */

@media(max-width:1050px){

  .dashboard-main-layout{
    grid-template-columns:
      minmax(0,1fr) 280px;
  }

  .dashboard-quick-grid{
    grid-template-columns:
      repeat(2,1fr);
  }

}


/* =====================================================
   SMALL TABLET
===================================================== */

@media(max-width:850px){

  .dashboard-main-layout{
    grid-template-columns:1fr;
  }

  .dashboard-sidebar{
    position:static;

    display:grid;

    grid-template-columns:
      repeat(2,1fr);
  }

  .dashboard-logout-btn{
    grid-column:1/-1;
  }

  .dashboard-stats-grid{
    grid-template-columns:
      repeat(2,1fr);
  }

  .dashboard-profile-btn strong{
    display:none;
  }

}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:650px){

  .dashboard-hero{
    padding:25px 0 15px;
  }

  .dashboard-welcome-card{
    align-items:flex-start;
    flex-direction:column;

    padding:21px;
  }

  .dashboard-welcome-card h1{
    font-size:25px;
  }

  .dashboard-hero-actions{
    width:100%;
  }

  .dashboard-hero-actions .btn{
    flex:1;
  }


  /* STATS */

  .dashboard-stats-grid{
    grid-template-columns:
      repeat(2,1fr);

    gap:9px;
  }

  .dashboard-stats-grid article{
    padding:13px;

    gap:9px;
  }

  .dashboard-stat-icon{
    width:37px;
    height:37px;

    font-size:17px;
  }

  .dashboard-stats-grid strong{
    font-size:16px;
  }


  /* PANEL */

  .dashboard-panel{
    padding:18px;
  }

  .dashboard-panel-head h2{
    font-size:16px;
  }


  /* CONTINUE */

  .continue-study-card{
    grid-template-columns:
      auto 1fr;

    align-items:flex-start;
  }

  .continue-study-btn{
    grid-column:1/-1;

    width:100%;

    text-align:center;
  }


  /* QUICK */

  .dashboard-quick-grid{
    grid-template-columns:
      repeat(2,1fr);

    gap:9px;
  }

  .dashboard-quick-grid a{
    min-height:110px;

    padding:13px;
  }


  /* PROGRESS */

  .dashboard-progress-card{
    grid-template-columns:1fr;

    text-align:center;
  }

  .progress-ring-wrap{
    display:flex;
    justify-content:center;
  }


  /* SIDEBAR */

  .dashboard-sidebar{
    grid-template-columns:1fr;
  }

  .dashboard-logout-btn{
    grid-column:auto;
  }

}


/* =====================================================
   EXTRA SMALL MOBILE
===================================================== */

@media(max-width:390px){

  .dashboard-stats-grid,
  .dashboard-quick-grid{
    grid-template-columns:1fr;
  }

}

/* =====================================================
   STUDENT PROFILE PAGE
===================================================== */

.profile-page{
  min-height:100vh;

  background:var(--bg);
}


/* =====================================================
   PROFILE HERO
===================================================== */

.profile-hero{
  padding:38px 0 20px;

  background:
    radial-gradient(
      circle at top left,
      #dbeafe 0,
      transparent 35%
    ),
    radial-gradient(
      circle at top right,
      #ede9fe 0,
      transparent 38%
    ),
    var(--bg);
}

.profile-hero-card{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:25px;

  padding:28px;

  border:1px solid var(--border);

  border-radius:24px;

  background:var(--card);

  box-shadow:
    0 18px 45px
    rgba(15,23,42,.06);
}

.profile-hero-main{
  display:flex;
  align-items:center;

  gap:17px;
}

.profile-large-avatar{
  width:72px;
  height:72px;

  display:grid;
  place-items:center;

  flex-shrink:0;

  border-radius:50%;

  background:
    linear-gradient(
      135deg,
      #2563eb,
      #7c3aed
    );

  color:#fff;

  font-family:"Poppins";
  font-size:24px;
  font-weight:800;

  box-shadow:
    0 12px 30px
    rgba(79,70,229,.22);
}

.profile-hero-card h1{
  margin-top:4px;

  font-family:"Poppins";

  font-size:
    clamp(26px,4vw,38px);
}

.profile-hero-card p{
  margin-top:3px;

  color:var(--muted);

  font-size:11px;
}


/* =====================================================
   PROFILE PLAN
===================================================== */

.profile-hero-plan{
  display:flex;
  flex-direction:column;
  align-items:flex-end;

  gap:5px;
}

.profile-hero-plan small{
  color:var(--muted);

  font-size:7px;
  font-weight:800;

  letter-spacing:.7px;
}

.profile-plan-badge{
  display:inline-flex;
  align-items:center;

  padding:7px 11px;

  border-radius:99px;

  font-size:9px;
  font-weight:800;
}

.profile-plan-badge.free{
  background:#f1f5f9;

  color:#475569;
}

.profile-plan-badge.premium{
  background:#fef3c7;

  color:#92400e;
}


/* =====================================================
   MAIN PROFILE LAYOUT
===================================================== */

.profile-main-section{
  padding:0 0 70px;
}

.profile-layout{
  display:grid;

  grid-template-columns:
    260px minmax(0,1fr);

  gap:22px;

  align-items:start;
}

.profile-sidebar{
  position:sticky;

  top:92px;

  display:flex;
  flex-direction:column;

  gap:13px;
}

.profile-content{
  min-width:0;
}


/* =====================================================
   PROFILE SIDEBAR CARD
===================================================== */

.profile-side-card{
  padding:13px;

  border:1px solid var(--border);

  border-radius:18px;

  background:var(--card);
}


/* =====================================================
   PROFILE MENU
===================================================== */

.profile-menu-item{
  width:100%;

  display:flex;
  align-items:center;

  gap:10px;

  padding:11px 12px;

  border:none;
  border-radius:11px;

  background:transparent;

  color:var(--muted);

  text-align:left;

  font-size:9px;
  font-weight:800;

  cursor:pointer;

  transition:.2s;
}

.profile-menu-item + .profile-menu-item{
  margin-top:4px;
}

.profile-menu-item > span{
  width:30px;
  height:30px;

  display:grid;
  place-items:center;

  flex-shrink:0;

  border-radius:9px;

  background:#f1f5f9;

  font-size:14px;
}

.profile-menu-item:hover{
  background:#f8faff;

  color:var(--primary);
}

.profile-menu-item.active{
  background:#eef2ff;

  color:#4338ca;
}

.profile-menu-item.active > span{
  background:#fff;
}


/* =====================================================
   PROFILE STATUS CARD
===================================================== */

.profile-status-card{
  padding:18px;
}

.profile-status-card > span{
  display:block;

  margin-bottom:8px;

  font-size:24px;
}

.profile-status-card h3{
  font-size:13px;
}

.profile-status-card p{
  margin-top:5px;

  color:var(--muted);

  font-size:9px;

  line-height:1.55;
}

.profile-status-card a{
  display:inline-block;

  margin-top:11px;

  color:var(--primary);

  font-size:9px;
  font-weight:800;
}

.profile-status-card.premium-active{
  color:#fff;

  border-color:transparent;

  background:
    linear-gradient(
      135deg,
      #047857,
      #059669
    );
}

.profile-status-card.premium-active p{
  color:#d1fae5;
}

.profile-status-card.premium-active a{
  color:#fff;
}


/* =====================================================
   PROFILE SECTION CARD
===================================================== */

.profile-section-card{
  padding:26px;

  border:1px solid var(--border);

  border-radius:21px;

  background:var(--card);

  box-shadow:
    0 12px 35px
    rgba(15,23,42,.04);
}

.profile-section-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;

  gap:20px;

  padding-bottom:20px;

  margin-bottom:22px;

  border-bottom:1px solid var(--border);
}

.profile-section-head h2{
  margin-top:3px;

  font-family:"Poppins";

  font-size:21px;
}

.profile-section-head p{
  margin-top:4px;

  color:var(--muted);

  font-size:10px;
}


/* =====================================================
   PROFILE FORM
===================================================== */

.profile-form{
  display:flex;
  flex-direction:column;

  gap:20px;
}

.profile-form-grid{
  display:grid;

  grid-template-columns:
    repeat(2,1fr);

  gap:15px;
}

.profile-form .btn{
  align-self:flex-start;
}


/* =====================================================
   READONLY FIELD
===================================================== */

.profile-form input[readonly]{
  color:#64748b;

  cursor:not-allowed;
}


/* =====================================================
   ACCOUNT INFORMATION LIST
===================================================== */

.profile-account-list{
  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:12px;
}

.profile-account-list article{
  display:flex;
  align-items:center;

  gap:10px;

  padding:15px;

  border:1px solid var(--border);

  border-radius:15px;

  background:#f8fafc;
}

.profile-account-list article > span{
  width:38px;
  height:38px;

  display:grid;
  place-items:center;

  flex-shrink:0;

  border-radius:11px;

  background:#eef2ff;

  font-size:17px;
}

.profile-account-list small{
  display:block;

  color:var(--muted);

  font-size:7px;
  font-weight:800;

  letter-spacing:.5px;
}

.profile-account-list strong{
  display:block;

  margin-top:2px;

  font-size:10px;

  word-break:break-word;
}


/* =====================================================
   SECURITY ACTIONS
===================================================== */

.profile-security-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:20px;

  padding:17px 0;

  border-bottom:1px solid var(--border);
}

.profile-security-actions:first-of-type{
  margin-top:22px;

  border-top:1px solid var(--border);
}

.profile-security-actions h3{
  font-size:12px;
}

.profile-security-actions p{
  max-width:520px;

  margin-top:3px;

  color:var(--muted);

  font-size:9px;

  line-height:1.5;
}

.profile-outline-btn{
  flex-shrink:0;

  padding:9px 12px;

  border:1px solid var(--border);

  border-radius:10px;

  background:var(--card);

  color:var(--text);

  font-size:9px;
  font-weight:800;

  cursor:pointer;

  transition:.2s;
}

.profile-outline-btn:hover{
  border-color:#c7d2fe;

  background:#eef2ff;

  color:var(--primary);
}


/* =====================================================
   PROFILE STATUS MESSAGE
===================================================== */

.profile-form .auth-status{
  margin-top:-7px;
}


/* =====================================================
   DARK MODE - PROFILE
===================================================== */

body.dark .profile-hero{
  background:#0b1120;
}

body.dark .profile-menu-item > span{
  background:#182235;
}

body.dark .profile-menu-item:hover{
  background:#182235;
}

body.dark .profile-menu-item.active{
  background:#1e293b;

  color:#a5b4fc;
}

body.dark .profile-menu-item.active > span{
  background:#0f172a;
}

body.dark .profile-account-list article{
  background:#111c30;
}

body.dark .profile-outline-btn:hover{
  background:#182235;
}


/* =====================================================
   TABLET
===================================================== */

@media(max-width:950px){

  .profile-layout{
    grid-template-columns:
      220px minmax(0,1fr);
  }

  .profile-account-list{
    grid-template-columns:1fr;
  }

}


/* =====================================================
   SMALL TABLET
===================================================== */

@media(max-width:780px){

  .profile-layout{
    grid-template-columns:1fr;
  }

  .profile-sidebar{
    position:static;
  }

  .profile-side-card:first-child{
    display:grid;

    grid-template-columns:
      repeat(3,1fr);

    gap:7px;
  }

  .profile-menu-item,
  .profile-menu-item + .profile-menu-item{
    margin:0;
  }

  .profile-menu-item{
    justify-content:center;

    flex-direction:column;

    text-align:center;
  }

  .profile-status-card,
  .profile-sidebar .dashboard-logout-btn{
    display:none;
  }

}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:650px){

  .profile-hero{
    padding:25px 0 15px;
  }

  .profile-hero-card{
    align-items:flex-start;
    flex-direction:column;

    padding:20px;
  }

  .profile-large-avatar{
    width:56px;
    height:56px;

    font-size:18px;
  }

  .profile-hero-card h1{
    font-size:23px;
  }

  .profile-hero-plan{
    width:100%;

    align-items:flex-start;

    padding-top:13px;

    border-top:1px solid var(--border);
  }


  /* MENU */

  .profile-side-card:first-child{
    overflow-x:auto;

    display:flex;

    padding:8px;
  }

  .profile-menu-item{
    min-width:120px;

    flex-shrink:0;

    padding:9px;
  }


  /* PROFILE SECTION */

  .profile-section-card{
    padding:20px 17px;
  }

  .profile-section-head h2{
    font-size:18px;
  }


  /* FORMS */

  .profile-form-grid{
    grid-template-columns:1fr;
  }

  .profile-form .btn{
    width:100%;
  }


  /* ACCOUNT */

  .profile-account-list{
    grid-template-columns:1fr;
  }


  /* SECURITY */

  .profile-security-actions{
    align-items:flex-start;
    flex-direction:column;
  }

  .profile-outline-btn{
    width:100%;
  }

}


/* =====================================================
   EXTRA SMALL MOBILE
===================================================== */

@media(max-width:390px){

  .profile-section-card{
    padding:18px 14px;
  }

  .profile-large-avatar{
    width:50px;
    height:50px;

    font-size:16px;
  }

}
/* =====================================================
   BOOKMARKS PAGE
===================================================== */

.bookmarks-page{
  min-height:100vh;
  background:var(--bg);
}


/* =====================================================
   BOOKMARKS HERO
===================================================== */

.bookmarks-hero{
  padding:38px 0 20px;

  background:
    radial-gradient(
      circle at top left,
      #dbeafe 0,
      transparent 35%
    ),
    radial-gradient(
      circle at top right,
      #ede9fe 0,
      transparent 38%
    ),
    var(--bg);
}

.bookmarks-hero-card{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:24px;

  padding:30px;

  border:1px solid var(--border);
  border-radius:24px;

  background:var(--card);

  box-shadow:
    0 18px 45px
    rgba(15,23,42,.06);
}

.bookmarks-hero-card h1{
  margin-top:4px;

  font-family:"Poppins";

  font-size:
    clamp(28px,4vw,42px);
}

.bookmarks-hero-card p{
  max-width:620px;

  margin-top:6px;

  color:var(--muted);

  font-size:11px;
}

.bookmarks-hero-icon{
  width:72px;
  height:72px;

  display:grid;
  place-items:center;

  flex-shrink:0;

  border-radius:20px;

  background:
    linear-gradient(
      135deg,
      #eef2ff,
      #ede9fe
    );

  font-size:31px;
}


/* =====================================================
   BOOKMARK SUMMARY
===================================================== */

.bookmarks-summary-section{
  padding:0 0 25px;
}

.bookmarks-summary-grid{
  display:grid;

  grid-template-columns:
    repeat(4,1fr);

  gap:12px;
}

.bookmarks-summary-grid article{
  display:flex;
  align-items:center;

  gap:12px;

  padding:17px;

  border:1px solid var(--border);
  border-radius:17px;

  background:var(--card);

  transition:.22s;
}

.bookmarks-summary-grid article:hover{
  transform:translateY(-3px);

  border-color:#c7d2fe;

  box-shadow:
    0 12px 30px
    rgba(15,23,42,.05);
}

.bookmarks-summary-grid article > span{
  width:43px;
  height:43px;

  display:grid;
  place-items:center;

  flex-shrink:0;

  border-radius:13px;

  background:#eef2ff;

  font-size:19px;
}

.bookmarks-summary-grid strong{
  display:block;

  font-family:"Poppins";

  color:var(--primary);

  font-size:19px;
}

.bookmarks-summary-grid small{
  display:block;

  color:var(--muted);

  font-size:8px;
  font-weight:700;
}


/* =====================================================
   BOOKMARKS MAIN SECTION
===================================================== */

.bookmarks-main-section{
  padding:0 0 70px;
}


/* =====================================================
   TOOLBAR
===================================================== */

.bookmarks-toolbar{
  display:grid;

  grid-template-columns:
    1fr 190px 190px;

  gap:10px;

  margin-bottom:24px;
}

.bookmarks-search{
  display:flex;
  align-items:center;

  gap:9px;

  padding:10px 13px;

  border:1px solid var(--border);
  border-radius:13px;

  background:var(--card);
}

.bookmarks-search input{
  width:100%;

  border:none;
  outline:none;

  background:transparent;

  color:var(--text);

  font-size:11px;
}

.bookmarks-search input::placeholder{
  color:#94a3b8;
}

.bookmarks-toolbar select{
  padding:11px;

  border:1px solid var(--border);
  border-radius:13px;

  outline:none;

  background:var(--card);
  color:var(--text);

  font-size:10px;
}

.bookmarks-toolbar select:focus{
  border-color:#818cf8;

  box-shadow:
    0 0 0 3px
    rgba(99,102,241,.08);
}


/* =====================================================
   BOOKMARK SECTION HEADER
===================================================== */

.bookmarks-section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;

  gap:15px;

  margin-bottom:17px;
}

.bookmarks-section-head h2{
  margin-top:3px;

  font-family:"Poppins";

  font-size:20px;
}

.clear-bookmarks-btn{
  padding:8px 11px;

  border:1px solid #fecaca;
  border-radius:10px;

  background:#fef2f2;
  color:#dc2626;

  font-size:9px;
  font-weight:800;

  cursor:pointer;
}

.clear-bookmarks-btn:hover{
  background:#fee2e2;
}


/* =====================================================
   BOOKMARK RESOURCE GRID
===================================================== */

.bookmark-resource-grid{
  display:grid;

  grid-template-columns:
    repeat(2,1fr);

  gap:13px;
}

.bookmark-card{
  position:relative;

  display:flex;

  gap:13px;

  padding:18px;

  border:1px solid var(--border);
  border-radius:18px;

  background:var(--card);

  transition:.22s;
}

.bookmark-card:hover{
  transform:translateY(-3px);

  border-color:#c7d2fe;

  box-shadow:
    0 14px 32px
    rgba(15,23,42,.06);
}

.bookmark-card-icon{
  width:48px;
  height:48px;

  display:grid;
  place-items:center;

  flex-shrink:0;

  border-radius:14px;

  background:#eef2ff;

  font-size:21px;
}

.bookmark-card-main{
  flex:1;
  min-width:0;
}

.bookmark-card-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;

  gap:10px;
}

.bookmark-card small{
  display:block;

  color:var(--primary);

  font-size:7px;
  font-weight:800;
  letter-spacing:.5px;
  text-transform:uppercase;
}

.bookmark-card h3{
  margin-top:3px;

  font-size:13px;

  line-height:1.4;
}

.bookmark-card p{
  margin-top:4px;

  color:var(--muted);

  font-size:9px;

  line-height:1.5;
}


/* =====================================================
   BOOKMARK META
===================================================== */

.bookmark-meta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;

  gap:6px;

  margin-top:10px;
}

.bookmark-meta span{
  display:inline-flex;
  align-items:center;

  padding:4px 7px;

  border-radius:99px;

  background:#f1f5f9;

  color:#64748b;

  font-size:7px;
  font-weight:700;
}


/* =====================================================
   BOOKMARK ACTIONS
===================================================== */

.bookmark-actions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;

  gap:7px;

  margin-top:12px;
}

.bookmark-open-btn{
  padding:8px 11px;

  border:none;
  border-radius:9px;

  background:
    linear-gradient(
      135deg,
      #2563eb,
      #7c3aed
    );

  color:#fff;

  font-size:8px;
  font-weight:800;

  cursor:pointer;
}

.bookmark-remove-btn{
  padding:8px 10px;

  border:1px solid #fecaca;
  border-radius:9px;

  background:#fff;

  color:#dc2626;

  font-size:8px;
  font-weight:800;

  cursor:pointer;
}

.bookmark-remove-btn:hover{
  background:#fef2f2;
}


/* =====================================================
   BOOKMARK ACCESS BADGE
===================================================== */

.bookmark-access-badge{
  flex-shrink:0;

  padding:4px 7px;

  border-radius:99px;

  font-size:7px;
  font-weight:800;

  text-transform:uppercase;
}

.bookmark-access-badge.free{
  background:#dcfce7;
  color:#166534;
}

.bookmark-access-badge.login{
  background:#dbeafe;
  color:#1d4ed8;
}

.bookmark-access-badge.premium{
  background:#fef3c7;
  color:#92400e;
}


/* =====================================================
   EMPTY STATE
===================================================== */

.bookmark-empty-state{
  padding:55px 20px;

  border:1px dashed var(--border);
  border-radius:20px;

  background:var(--card);

  text-align:center;
}

.bookmark-empty-state > span{
  display:block;

  margin-bottom:8px;

  font-size:37px;
}

.bookmark-empty-state h3{
  font-size:15px;
}

.bookmark-empty-state p{
  max-width:470px;

  margin:5px auto 16px;

  color:var(--muted);

  font-size:10px;
}


/* =====================================================
   SAVED SUBJECTS
===================================================== */

.bookmark-subject-grid{
  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:12px;
}

.bookmark-subject-card{
  padding:17px;

  border:1px solid var(--border);
  border-radius:17px;

  background:var(--card);

  cursor:pointer;

  transition:.22s;
}

.bookmark-subject-card:hover{
  transform:translateY(-3px);

  border-color:#c7d2fe;

  box-shadow:
    0 12px 30px
    rgba(15,23,42,.05);
}

.bookmark-subject-card > span{
  display:block;

  margin-bottom:8px;

  font-size:23px;
}

.bookmark-subject-card small{
  color:var(--primary);

  font-size:7px;
  font-weight:800;
  text-transform:uppercase;
}

.bookmark-subject-card h3{
  margin-top:3px;

  font-size:12px;
}

.bookmark-subject-card p{
  margin-top:4px;

  color:var(--muted);

  font-size:8px;

  line-height:1.5;
}

.bookmark-subject-card .bookmark-subject-remove{
  margin-top:11px;

  padding:7px 9px;

  border:1px solid #fecaca;
  border-radius:8px;

  background:transparent;

  color:#dc2626;

  font-size:7px;
  font-weight:800;

  cursor:pointer;
}

.bookmark-subject-empty{
  padding:25px;

  border:1px dashed var(--border);
  border-radius:17px;

  text-align:center;

  color:var(--muted);
}

.bookmark-subject-empty > span{
  display:block;

  margin-bottom:5px;

  font-size:28px;
}

.bookmark-subject-empty p{
  font-size:9px;
}


/* =====================================================
   DARK MODE
===================================================== */

body.dark .bookmarks-hero{
  background:#0b1120;
}

body.dark .bookmark-meta span{
  background:#182235;
}

body.dark .bookmark-remove-btn{
  background:#0f172a;
}

body.dark .bookmark-remove-btn:hover{
  background:#30191f;
}

body.dark .clear-bookmarks-btn{
  border-color:#7f1d1d;

  background:#30191f;

  color:#fca5a5;
}


/* =====================================================
   TABLET
===================================================== */

@media(max-width:950px){

  .bookmarks-toolbar{
    grid-template-columns:
      1fr 1fr;
  }

  .bookmarks-search{
    grid-column:1/-1;
  }

  .bookmark-subject-grid{
    grid-template-columns:
      repeat(2,1fr);
  }

}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:650px){

  .bookmarks-hero{
    padding:25px 0 15px;
  }

  .bookmarks-hero-card{
    padding:21px;
  }

  .bookmarks-hero-card h1{
    font-size:25px;
  }

  .bookmarks-hero-icon{
    width:52px;
    height:52px;

    border-radius:15px;

    font-size:23px;
  }


  /* SUMMARY */

  .bookmarks-summary-grid{
    grid-template-columns:
      repeat(2,1fr);

    gap:9px;
  }

  .bookmarks-summary-grid article{
    padding:13px;

    gap:8px;
  }

  .bookmarks-summary-grid article > span{
    width:37px;
    height:37px;

    font-size:16px;
  }

  .bookmarks-summary-grid strong{
    font-size:16px;
  }


  /* TOOLBAR */

  .bookmarks-toolbar{
    grid-template-columns:1fr;
  }

  .bookmarks-search{
    grid-column:auto;
  }


  /* RESOURCE */

  .bookmark-resource-grid{
    grid-template-columns:1fr;
  }

  .bookmark-card{
    padding:15px;
  }

  .bookmark-card-icon{
    width:43px;
    height:43px;

    border-radius:12px;

    font-size:19px;
  }


  /* HEADER */

  .bookmarks-section-head{
    align-items:flex-start;
    flex-direction:column;
  }


  /* SUBJECTS */

  .bookmark-subject-grid{
    grid-template-columns:1fr;
  }

}


/* =====================================================
   EXTRA SMALL MOBILE
===================================================== */

@media(max-width:390px){

  .bookmarks-summary-grid{
    grid-template-columns:1fr;
  }

  .bookmarks-hero-icon{
    display:none;
  }

}

/* =====================================================
   LEARNING PROGRESS PAGE
===================================================== */

.progress-page{
  min-height:100vh;
  background:var(--bg);
}


/* =====================================================
   PROGRESS HERO
===================================================== */

.progress-hero{
  padding:38px 0 20px;

  background:
    radial-gradient(
      circle at top left,
      #dbeafe 0,
      transparent 35%
    ),
    radial-gradient(
      circle at top right,
      #ede9fe 0,
      transparent 38%
    ),
    var(--bg);
}

.progress-hero-card{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:24px;

  padding:30px;

  border:1px solid var(--border);
  border-radius:24px;

  background:var(--card);

  box-shadow:
    0 18px 45px
    rgba(15,23,42,.06);
}

.progress-hero-card h1{
  margin-top:4px;

  font-family:"Poppins";

  font-size:
    clamp(28px,4vw,42px);
}

.progress-hero-card p{
  max-width:620px;

  margin-top:6px;

  color:var(--muted);

  font-size:11px;

  line-height:1.6;
}

.progress-hero-icon{
  width:72px;
  height:72px;

  display:grid;
  place-items:center;

  flex-shrink:0;

  border-radius:20px;

  background:
    linear-gradient(
      135deg,
      #eef2ff,
      #ede9fe
    );

  font-size:31px;
}


/* =====================================================
   OVERALL PROGRESS
===================================================== */

.progress-overview-section{
  padding:0 0 24px;
}

.progress-overview-card{
  display:grid;

  grid-template-columns:
    auto 1fr;

  align-items:center;

  gap:30px;

  padding:28px;

  border:1px solid var(--border);
  border-radius:22px;

  background:var(--card);

  box-shadow:
    0 14px 38px
    rgba(15,23,42,.05);
}


/* =====================================================
   BIG PROGRESS RING
===================================================== */

.progress-big-ring-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
}

.progress-big-ring{
  position:relative;

  width:145px;
  height:145px;

  display:grid;
  place-items:center;

  border-radius:50%;

  background:
    conic-gradient(
      #6366f1 0deg,
      #e2e8f0 0deg
    );
}

.progress-big-ring::before{
  content:"";

  position:absolute;

  width:112px;
  height:112px;

  border-radius:50%;

  background:var(--card);
}

.progress-big-ring > div{
  position:relative;

  z-index:2;

  text-align:center;
}

.progress-big-ring strong{
  display:block;

  font-family:"Poppins";

  font-size:25px;

  color:var(--primary);
}

.progress-big-ring small{
  display:block;

  margin-top:1px;

  color:var(--muted);

  font-size:7px;
  font-weight:800;

  letter-spacing:.8px;
}


/* =====================================================
   OVERVIEW CONTENT
===================================================== */

.progress-overview-content h2{
  margin-top:4px;

  font-family:"Poppins";

  font-size:24px;
}

.progress-overview-content > p{
  max-width:650px;

  margin-top:5px;

  color:var(--muted);

  font-size:10px;

  line-height:1.55;
}


/* =====================================================
   MAIN PROGRESS BAR
===================================================== */

.progress-overview-bar{
  width:100%;
  height:9px;

  margin-top:18px;

  overflow:hidden;

  border-radius:99px;

  background:#e2e8f0;
}

.progress-overview-bar span{
  display:block;

  height:100%;

  border-radius:inherit;

  background:
    linear-gradient(
      90deg,
      #2563eb,
      #7c3aed
    );

  transition:
    width .4s ease;
}

.progress-overview-meta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;

  gap:18px;

  margin-top:11px;
}

.progress-overview-meta span{
  color:var(--muted);

  font-size:9px;
}

.progress-overview-meta strong{
  color:var(--text);

  font-size:10px;
}


/* =====================================================
   PROGRESS STATS
===================================================== */

.progress-stats-section{
  padding:0 0 24px;
}

.progress-stats-grid{
  display:grid;

  grid-template-columns:
    repeat(4,1fr);

  gap:12px;
}

.progress-stats-grid article{
  display:flex;
  align-items:center;

  gap:11px;

  padding:16px;

  border:1px solid var(--border);
  border-radius:17px;

  background:var(--card);

  transition:.22s;
}

.progress-stats-grid article:hover{
  transform:translateY(-3px);

  border-color:#c7d2fe;

  box-shadow:
    0 12px 30px
    rgba(15,23,42,.05);
}

.progress-stats-grid article > span{
  width:43px;
  height:43px;

  display:grid;
  place-items:center;

  flex-shrink:0;

  border-radius:13px;

  background:#eef2ff;

  font-size:19px;
}

.progress-stats-grid strong{
  display:block;

  font-family:"Poppins";

  color:var(--primary);

  font-size:18px;
}

.progress-stats-grid small{
  display:block;

  color:var(--muted);

  font-size:8px;
  font-weight:700;
}


/* =====================================================
   MAIN PROGRESS LAYOUT
===================================================== */

.progress-main-section{
  padding:0 0 70px;
}

.progress-main-layout{
  display:grid;

  grid-template-columns:
    minmax(0,1fr) 300px;

  gap:22px;

  align-items:start;
}

.progress-main-content{
  display:flex;
  flex-direction:column;

  gap:18px;
}

.progress-sidebar{
  position:sticky;

  top:92px;

  display:flex;
  flex-direction:column;

  gap:13px;
}


/* =====================================================
   PROGRESS PANEL
===================================================== */

.progress-panel{
  padding:22px;

  border:1px solid var(--border);
  border-radius:20px;

  background:var(--card);
}

.progress-panel-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;

  gap:15px;

  margin-bottom:17px;
}

.progress-panel-head h2{
  margin-top:3px;

  font-family:"Poppins";

  font-size:19px;
}

.progress-panel-head > a{
  color:var(--primary);

  font-size:9px;
  font-weight:800;
}


/* =====================================================
   COMPLETED RESOURCE LIST
===================================================== */

.completed-resource-list{
  display:flex;
  flex-direction:column;

  gap:10px;
}

.completed-resource-item{
  display:flex;
  align-items:center;

  gap:12px;

  padding:13px;

  border:1px solid var(--border);
  border-radius:14px;

  background:var(--card);

  transition:.2s;
}

.completed-resource-item:hover{
  border-color:#c7d2fe;

  background:#f8faff;
}

.completed-resource-icon{
  width:42px;
  height:42px;

  display:grid;
  place-items:center;

  flex-shrink:0;

  border-radius:11px;

  background:#ecfdf5;

  font-size:18px;
}

.completed-resource-main{
  flex:1;

  min-width:0;
}

.completed-resource-main small{
  display:block;

  color:#059669;

  font-size:7px;
  font-weight:800;

  text-transform:uppercase;
}

.completed-resource-main h3{
  margin-top:2px;

  overflow:hidden;

  text-overflow:ellipsis;

  white-space:nowrap;

  font-size:11px;
}

.completed-resource-main p{
  margin-top:2px;

  color:var(--muted);

  font-size:8px;
}

.completed-resource-open{
  padding:7px 10px;

  border:1px solid var(--border);
  border-radius:9px;

  background:transparent;

  color:var(--primary);

  font-size:8px;
  font-weight:800;

  cursor:pointer;
}


/* =====================================================
   SUBJECT PROGRESS
===================================================== */

.subject-progress-list{
  display:flex;
  flex-direction:column;

  gap:11px;
}

.subject-progress-item{
  padding:14px;

  border:1px solid var(--border);
  border-radius:15px;

  background:var(--card);
}

.subject-progress-top{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:12px;
}

.subject-progress-name{
  display:flex;
  align-items:center;

  gap:9px;
}

.subject-progress-name > span{
  width:37px;
  height:37px;

  display:grid;
  place-items:center;

  flex-shrink:0;

  border-radius:10px;

  background:#eef2ff;

  font-size:16px;
}

.subject-progress-name h3{
  font-size:11px;
}

.subject-progress-name p{
  margin-top:2px;

  color:var(--muted);

  font-size:8px;
}

.subject-progress-percent{
  color:var(--primary);

  font-size:10px;
  font-weight:800;
}

.subject-mini-progress{
  width:100%;
  height:6px;

  margin-top:11px;

  overflow:hidden;

  border-radius:99px;

  background:#e2e8f0;
}

.subject-mini-progress span{
  display:block;

  height:100%;

  border-radius:inherit;

  background:
    linear-gradient(
      90deg,
      #2563eb,
      #7c3aed
    );
}


/* =====================================================
   STUDY ACTIVITY
===================================================== */

.study-activity-list{
  display:flex;
  flex-direction:column;

  gap:10px;
}

.study-activity-item{
  display:grid;

  grid-template-columns:
    auto 1fr auto;

  align-items:center;

  gap:11px;

  padding:12px 0;

  border-bottom:1px solid var(--border);
}

.study-activity-item:last-child{
  border-bottom:none;
}

.study-activity-icon{
  width:38px;
  height:38px;

  display:grid;
  place-items:center;

  border-radius:10px;

  background:#eef2ff;

  font-size:16px;
}

.study-activity-item h3{
  font-size:10px;
}

.study-activity-item p{
  margin-top:2px;

  color:var(--muted);

  font-size:8px;
}

.study-activity-time{
  color:var(--muted);

  font-size:7px;

  white-space:nowrap;
}


/* =====================================================
   PROGRESS EMPTY STATE
===================================================== */

.progress-empty-state{
  padding:40px 15px;

  border:1px dashed var(--border);
  border-radius:16px;

  text-align:center;
}

.progress-empty-state > span{
  display:block;

  margin-bottom:7px;

  font-size:31px;
}

.progress-empty-state h3{
  font-size:12px;
}

.progress-empty-state p{
  max-width:430px;

  margin:4px auto 14px;

  color:var(--muted);

  font-size:9px;

  line-height:1.55;
}


/* =====================================================
   PROGRESS SIDEBAR
===================================================== */

.progress-side-card{
  padding:18px;

  border:1px solid var(--border);
  border-radius:17px;

  background:var(--card);
}

.progress-side-title{
  display:flex;
  align-items:center;

  gap:8px;

  margin-bottom:13px;
}

.progress-side-title > span{
  font-size:18px;
}

.progress-side-title h3{
  font-size:12px;
}

.progress-detail-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;

  gap:12px;

  padding:8px 0;

  border-bottom:1px solid var(--border);

  font-size:9px;
}

.progress-detail-row:last-of-type{
  border-bottom:none;
}

.progress-detail-row span{
  color:var(--muted);
}

.progress-detail-row strong{
  max-width:160px;

  text-align:right;

  font-size:8px;
}

.progress-side-description{
  color:var(--muted);

  font-size:9px;

  line-height:1.55;
}


/* =====================================================
   STUDY GOAL
===================================================== */

.goal-progress-bar{
  width:100%;
  height:7px;

  margin-top:14px;

  overflow:hidden;

  border-radius:99px;

  background:#e2e8f0;
}

.goal-progress-bar span{
  display:block;

  height:100%;

  border-radius:inherit;

  background:
    linear-gradient(
      90deg,
      #2563eb,
      #7c3aed
    );
}

.goal-progress-text{
  margin-top:7px;

  color:var(--muted);

  font-size:8px;
}


/* =====================================================
   NEXT ACTION CARD
===================================================== */

.progress-next-card{
  padding:20px;

  border-radius:18px;

  color:#fff;

  background:
    linear-gradient(
      135deg,
      #2563eb,
      #7c3aed
    );

  box-shadow:
    0 15px 35px
    rgba(79,70,229,.18);
}

.progress-next-card > span{
  display:block;

  margin-bottom:8px;

  font-size:25px;
}

.progress-next-card h3{
  font-size:13px;
}

.progress-next-card p{
  margin-top:5px;

  color:#e0e7ff;

  font-size:9px;

  line-height:1.55;
}

.progress-next-card a{
  display:inline-block;

  margin-top:12px;

  color:#fff;

  font-size:9px;
  font-weight:800;
}


/* =====================================================
   DARK MODE
===================================================== */

body.dark .progress-hero{
  background:#0b1120;
}

body.dark .progress-overview-bar,
body.dark .goal-progress-bar,
body.dark .subject-mini-progress{
  background:#253247;
}

body.dark .completed-resource-item:hover{
  background:#182235;
}

body.dark .progress-stats-grid article > span,
body.dark .subject-progress-name > span,
body.dark .study-activity-icon{
  background:#182235;
}


/* =====================================================
   TABLET
===================================================== */

@media(max-width:1000px){

  .progress-main-layout{
    grid-template-columns:
      minmax(0,1fr) 270px;
  }

  .progress-overview-card{
    gap:22px;
  }

}


/* =====================================================
   SMALL TABLET
===================================================== */

@media(max-width:850px){

  .progress-main-layout{
    grid-template-columns:1fr;
  }

  .progress-sidebar{
    position:static;

    display:grid;

    grid-template-columns:
      repeat(2,1fr);
  }

  .progress-next-card{
    grid-column:1/-1;
  }

  .progress-stats-grid{
    grid-template-columns:
      repeat(2,1fr);
  }

}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:650px){

  .progress-hero{
    padding:25px 0 15px;
  }

  .progress-hero-card{
    padding:21px;
  }

  .progress-hero-card h1{
    font-size:25px;
  }

  .progress-hero-icon{
    width:52px;
    height:52px;

    border-radius:15px;

    font-size:23px;
  }


  /* OVERVIEW */

  .progress-overview-card{
    grid-template-columns:1fr;

    text-align:center;

    padding:22px 18px;
  }

  .progress-big-ring-wrap{
    justify-content:center;
  }

  .progress-big-ring{
    width:130px;
    height:130px;
  }

  .progress-big-ring::before{
    width:100px;
    height:100px;
  }

  .progress-overview-content h2{
    font-size:19px;
  }

  .progress-overview-meta{
    justify-content:center;
  }


  /* STATS */

  .progress-stats-grid{
    grid-template-columns:
      repeat(2,1fr);

    gap:9px;
  }

  .progress-stats-grid article{
    padding:13px;

    gap:8px;
  }

  .progress-stats-grid article > span{
    width:37px;
    height:37px;

    font-size:16px;
  }

  .progress-stats-grid strong{
    font-size:16px;
  }


  /* PANELS */

  .progress-panel{
    padding:18px;
  }

  .progress-panel-head h2{
    font-size:16px;
  }


  /* ACTIVITY */

  .study-activity-item{
    grid-template-columns:
      auto 1fr;
  }

  .study-activity-time{
    grid-column:2;

    text-align:left;
  }


  /* SIDEBAR */

  .progress-sidebar{
    grid-template-columns:1fr;
  }

  .progress-next-card{
    grid-column:auto;
  }

}


/* =====================================================
   EXTRA SMALL MOBILE
===================================================== */

@media(max-width:390px){

  .progress-stats-grid{
    grid-template-columns:1fr;
  }

  .progress-hero-icon{
    display:none;
  }

  .progress-big-ring{
    width:115px;
    height:115px;
  }

  .progress-big-ring::before{
    width:87px;
    height:87px;
  }

}

/* =====================================================
   COMMON RESOURCE LIBRARY
   Notes / PYQ / Syllabus / Books / Suggestions
===================================================== */

.resource-library-page{
  min-height:100vh;
  background:var(--bg);
}


/* =====================================================
   RESOURCE LIBRARY HERO
===================================================== */

.resource-library-hero{
  padding:38px 0 20px;

  background:
    radial-gradient(
      circle at top left,
      #dbeafe 0,
      transparent 35%
    ),
    radial-gradient(
      circle at top right,
      #ede9fe 0,
      transparent 38%
    ),
    var(--bg);
}

.resource-library-hero-card{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:25px;

  padding:30px;

  border:1px solid var(--border);
  border-radius:24px;

  background:var(--card);

  box-shadow:
    0 18px 45px
    rgba(15,23,42,.06);
}

.resource-library-hero-content{
  min-width:0;
}

.resource-library-hero-card h1{
  margin-top:4px;

  font-family:"Poppins";

  font-size:
    clamp(28px,4vw,42px);
}

.resource-library-hero-card p{
  max-width:620px;

  margin-top:6px;

  color:var(--muted);

  font-size:11px;

  line-height:1.6;
}

.resource-library-hero-icon{
  width:76px;
  height:76px;

  display:grid;
  place-items:center;

  flex-shrink:0;

  border-radius:21px;

  background:
    linear-gradient(
      135deg,
      #eef2ff,
      #ede9fe
    );

  font-size:33px;

  box-shadow:
    inset 0 0 0 1px
    rgba(99,102,241,.08);
}


/* =====================================================
   HERO TAGS
===================================================== */

.resource-library-hero-tags{
  display:flex;
  align-items:center;
  flex-wrap:wrap;

  gap:7px;

  margin-top:15px;
}

.resource-library-hero-tags span{
  display:inline-flex;
  align-items:center;

  padding:6px 9px;

  border:1px solid var(--border);
  border-radius:99px;

  background:#f8fafc;

  color:#475569;

  font-size:8px;
  font-weight:700;
}


/* =====================================================
   ACADEMIC FILTER SECTION
===================================================== */

.resource-filter-section{
  padding:0 0 18px;
}

.resource-filter-card{
  padding:23px;

  border:1px solid var(--border);
  border-radius:21px;

  background:var(--card);

  box-shadow:
    0 12px 35px
    rgba(15,23,42,.04);
}

.resource-filter-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;

  gap:20px;

  padding-bottom:17px;

  margin-bottom:18px;

  border-bottom:1px solid var(--border);
}

.resource-filter-heading h2{
  margin-top:3px;

  font-family:"Poppins";

  font-size:19px;
}

.resource-filter-reset{
  padding:8px 11px;

  border:1px solid var(--border);
  border-radius:10px;

  background:var(--card);

  color:var(--muted);

  font-size:8px;
  font-weight:800;

  cursor:pointer;

  transition:.2s;
}

.resource-filter-reset:hover{
  border-color:#c7d2fe;

  background:#eef2ff;

  color:var(--primary);
}


/* =====================================================
   RESOURCE FILTER FIELDS
===================================================== */

.resource-filter-grid{
  display:grid;

  grid-template-columns:
    repeat(4,1fr);

  gap:12px;
}

.resource-filter-field{
  display:flex;
  flex-direction:column;

  gap:6px;
}

.resource-filter-subject{
  grid-column:span 2;
}

.resource-filter-field label{
  color:var(--text);

  font-size:8px;
  font-weight:800;
}

.resource-filter-field select{
  width:100%;

  padding:11px 12px;

  border:1px solid var(--border);
  border-radius:12px;

  outline:none;

  background:var(--card);

  color:var(--text);

  font-size:9px;

  transition:.2s;
}

.resource-filter-field select:focus{
  border-color:#818cf8;

  box-shadow:
    0 0 0 3px
    rgba(99,102,241,.08);
}

.resource-filter-field select:disabled{
  opacity:.58;

  cursor:not-allowed;
}

.resource-load-btn{
  margin-top:17px;
}


/* =====================================================
   CURRENT SELECTION
===================================================== */

.resource-selection-section{
  padding:0 0 18px;
}

.resource-selection-card{
  display:flex;
  align-items:center;

  gap:12px;

  padding:15px 18px;

  border:1px solid var(--border);
  border-radius:16px;

  background:var(--card);
}

.resource-selection-icon{
  width:43px;
  height:43px;

  display:grid;
  place-items:center;

  flex-shrink:0;

  border-radius:12px;

  background:#eef2ff;

  font-size:19px;
}

.resource-selection-card small{
  display:block;

  color:var(--muted);

  font-size:7px;
  font-weight:800;

  letter-spacing:.5px;
}

.resource-selection-card strong{
  display:block;

  margin-top:2px;

  font-size:11px;
}

.resource-selection-card p{
  margin-top:3px;

  color:var(--muted);

  font-size:8px;

  line-height:1.5;
}


/* =====================================================
   RESOURCE LIBRARY MAIN
===================================================== */

.resource-library-main{
  padding:0 0 65px;
}


/* =====================================================
   LIBRARY TOOLBAR
===================================================== */

.resource-library-toolbar{
  display:grid;

  grid-template-columns:
    1fr 185px 185px;

  gap:10px;

  margin-bottom:22px;
}

.resource-library-search{
  display:flex;
  align-items:center;

  gap:9px;

  padding:10px 13px;

  border:1px solid var(--border);
  border-radius:13px;

  background:var(--card);
}

.resource-library-search input{
  width:100%;

  border:none;
  outline:none;

  background:transparent;

  color:var(--text);

  font-size:10px;
}

.resource-library-search input::placeholder{
  color:#94a3b8;
}

.resource-library-toolbar select{
  padding:11px;

  border:1px solid var(--border);
  border-radius:13px;

  outline:none;

  background:var(--card);
  color:var(--text);

  font-size:9px;
}

.resource-library-toolbar select:focus{
  border-color:#818cf8;

  box-shadow:
    0 0 0 3px
    rgba(99,102,241,.08);
}


/* =====================================================
   LIBRARY SECTION HEADER
===================================================== */

.resource-library-section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;

  gap:20px;

  margin-bottom:16px;
}

.resource-library-section-head h2{
  margin-top:3px;

  font-family:"Poppins";

  font-size:20px;
}

.resource-library-section-head p{
  margin-top:4px;

  color:var(--muted);

  font-size:9px;
}

.resource-library-count{
  width:48px;
  height:48px;

  display:grid;
  place-items:center;

  flex-shrink:0;

  border-radius:14px;

  background:
    linear-gradient(
      135deg,
      #2563eb,
      #7c3aed
    );

  color:#fff;

  font-family:"Poppins";

  font-size:17px;
  font-weight:800;

  box-shadow:
    0 10px 24px
    rgba(79,70,229,.16);
}


/* =====================================================
   RESOURCE GRID
===================================================== */

.resource-library-grid{
  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:13px;
}


/* =====================================================
   RESOURCE LIBRARY CARD
===================================================== */

.library-resource-card{
  position:relative;

  display:flex;
  flex-direction:column;

  min-width:0;

  padding:17px;

  border:1px solid var(--border);
  border-radius:18px;

  background:var(--card);

  transition:
    transform .22s,
    border-color .22s,
    box-shadow .22s;
}

.library-resource-card:hover{
  transform:translateY(-4px);

  border-color:#c7d2fe;

  box-shadow:
    0 15px 34px
    rgba(15,23,42,.06);
}

.library-resource-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;

  gap:10px;
}

.library-resource-icon{
  width:47px;
  height:47px;

  display:grid;
  place-items:center;

  flex-shrink:0;

  border-radius:13px;

  background:#eef2ff;

  font-size:21px;
}


/* =====================================================
   ACCESS BADGES
===================================================== */

.library-access-badge{
  display:inline-flex;
  align-items:center;

  padding:4px 7px;

  border-radius:99px;

  font-size:7px;
  font-weight:800;

  text-transform:uppercase;
}

.library-access-badge.free{
  background:#dcfce7;
  color:#166534;
}

.library-access-badge.login{
  background:#dbeafe;
  color:#1d4ed8;
}

.library-access-badge.premium{
  background:#fef3c7;
  color:#92400e;
}


/* =====================================================
   RESOURCE CARD CONTENT
===================================================== */

.library-resource-card-content{
  margin-top:13px;
}

.library-resource-card-content > small{
  display:block;

  color:var(--primary);

  font-size:7px;
  font-weight:800;

  letter-spacing:.5px;

  text-transform:uppercase;
}

.library-resource-card-content h3{
  margin-top:4px;

  font-size:12px;

  line-height:1.45;
}

.library-resource-card-content p{
  margin-top:5px;

  color:var(--muted);

  font-size:8px;

  line-height:1.55;
}


/* =====================================================
   RESOURCE META
===================================================== */

.library-resource-meta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;

  gap:6px;

  margin-top:12px;
}

.library-resource-meta span{
  display:inline-flex;
  align-items:center;

  padding:4px 7px;

  border-radius:99px;

  background:#f1f5f9;

  color:#64748b;

  font-size:7px;
  font-weight:700;
}


/* =====================================================
   RESOURCE CARD ACTIONS
===================================================== */

.library-resource-actions{
  display:flex;
  align-items:center;

  gap:7px;

  margin-top:auto;
  padding-top:15px;
}

.library-open-resource-btn{
  flex:1;

  padding:9px 10px;

  border:none;
  border-radius:10px;

  background:
    linear-gradient(
      135deg,
      #2563eb,
      #7c3aed
    );

  color:#fff;

  font-size:8px;
  font-weight:800;

  cursor:pointer;

  transition:.2s;
}

.library-open-resource-btn:hover{
  transform:translateY(-1px);

  box-shadow:
    0 8px 18px
    rgba(79,70,229,.18);
}

.library-save-resource-btn{
  width:36px;
  height:36px;

  display:grid;
  place-items:center;

  flex-shrink:0;

  border:1px solid var(--border);
  border-radius:10px;

  background:var(--card);

  color:var(--text);

  cursor:pointer;

  transition:.2s;
}

.library-save-resource-btn:hover{
  border-color:#c7d2fe;

  background:#eef2ff;
}

.library-save-resource-btn.saved{
  border-color:#c7d2fe;

  background:#eef2ff;

  color:#4f46e5;
}


/* =====================================================
   PREMIUM LOCK CARD
===================================================== */

.library-resource-card.is-locked::after{
  content:"";

  position:absolute;

  inset:0;

  border-radius:inherit;

  pointer-events:none;

  box-shadow:
    inset 0 0 0 1px
    rgba(245,158,11,.18);
}

.library-resource-card.is-locked
.library-open-resource-btn{
  background:
    linear-gradient(
      135deg,
      #d97706,
      #f59e0b
    );
}


/* =====================================================
   EMPTY STATES
===================================================== */

.resource-library-empty{
  padding:55px 20px;

  border:1px dashed var(--border);
  border-radius:20px;

  background:var(--card);

  text-align:center;
}

.resource-library-empty > span{
  display:block;

  margin-bottom:8px;

  font-size:37px;
}

.resource-library-empty h3{
  font-size:14px;
}

.resource-library-empty p{
  max-width:500px;

  margin:5px auto 0;

  color:var(--muted);

  font-size:9px;

  line-height:1.55;
}


/* =====================================================
   RESOURCE TYPE SHORTCUTS
===================================================== */

.resource-type-shortcuts{
  display:grid;

  grid-template-columns:
    repeat(4,1fr);

  gap:12px;
}

.resource-type-shortcuts a{
  display:flex;
  flex-direction:column;

  gap:4px;

  padding:18px;

  border:1px solid var(--border);
  border-radius:17px;

  background:var(--card);

  transition:.22s;
}

.resource-type-shortcuts a:hover{
  transform:translateY(-3px);

  border-color:#c7d2fe;

  box-shadow:
    0 12px 30px
    rgba(15,23,42,.05);
}

.resource-type-shortcuts a > span{
  display:block;

  margin-bottom:4px;

  font-size:24px;
}

.resource-type-shortcuts strong{
  color:var(--text);

  font-size:11px;
}

.resource-type-shortcuts small{
  color:var(--muted);

  font-size:8px;
}


/* =====================================================
   DARK MODE
===================================================== */

body.dark .resource-library-hero{
  background:#0b1120;
}

body.dark .resource-library-hero-tags span{
  background:#182235;

  color:#cbd5e1;
}

body.dark .resource-selection-icon,
body.dark .library-resource-icon{
  background:#182235;
}

body.dark .library-resource-meta span{
  background:#182235;

  color:#cbd5e1;
}

body.dark .library-save-resource-btn:hover,
body.dark .library-save-resource-btn.saved,
body.dark .resource-filter-reset:hover{
  background:#182235;
}


/* =====================================================
   DESKTOP SMALL
===================================================== */

@media(max-width:1050px){

  .resource-library-grid{
    grid-template-columns:
      repeat(2,1fr);
  }

  .resource-filter-grid{
    grid-template-columns:
      repeat(3,1fr);
  }

  .resource-filter-subject{
    grid-column:span 2;
  }

}


/* =====================================================
   TABLET
===================================================== */

@media(max-width:850px){

  .resource-filter-grid{
    grid-template-columns:
      repeat(2,1fr);
  }

  .resource-filter-subject{
    grid-column:span 1;
  }

  .resource-library-toolbar{
    grid-template-columns:
      1fr 1fr;
  }

  .resource-library-search{
    grid-column:1/-1;
  }

  .resource-type-shortcuts{
    grid-template-columns:
      repeat(2,1fr);
  }

}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:650px){

  .resource-library-hero{
    padding:25px 0 15px;
  }

  .resource-library-hero-card{
    padding:21px;
  }

  .resource-library-hero-card h1{
    font-size:25px;
  }

  .resource-library-hero-icon{
    width:53px;
    height:53px;

    border-radius:15px;

    font-size:23px;
  }

  .resource-library-hero-tags{
    gap:5px;
  }

  .resource-library-hero-tags span{
    padding:5px 7px;
  }


  /* FILTER */

  .resource-filter-card{
    padding:18px;
  }

  .resource-filter-heading{
    align-items:flex-start;
  }

  .resource-filter-heading h2{
    font-size:17px;
  }

  .resource-filter-grid{
    grid-template-columns:1fr;
  }

  .resource-filter-subject{
    grid-column:auto;
  }

  .resource-load-btn{
    width:100%;
  }


  /* SELECTION */

  .resource-selection-card{
    align-items:flex-start;
  }


  /* TOOLBAR */

  .resource-library-toolbar{
    grid-template-columns:1fr;
  }

  .resource-library-search{
    grid-column:auto;
  }


  /* HEADER */

  .resource-library-section-head{
    align-items:flex-start;
  }


  /* RESOURCE GRID */

  .resource-library-grid{
    grid-template-columns:1fr;
  }


  /* SHORTCUTS */

  .resource-type-shortcuts{
    grid-template-columns:
      repeat(2,1fr);
  }

}


/* =====================================================
   EXTRA SMALL MOBILE
===================================================== */

@media(max-width:390px){

  .resource-library-hero-icon{
    display:none;
  }

  .resource-library-section-head{
    flex-direction:column;
  }

  .resource-library-count{
    width:42px;
    height:42px;

    font-size:15px;
  }

  .resource-type-shortcuts{
    grid-template-columns:1fr;
  }

}

/* =====================================================
   COURSES PAGE
===================================================== */

.courses-page{
  min-height:100vh;
  background:var(--bg);
}


/* =====================================================
   COURSES HERO
===================================================== */

.courses-hero{
  padding:38px 0 20px;

  background:
    radial-gradient(
      circle at top left,
      #dbeafe 0,
      transparent 35%
    ),
    radial-gradient(
      circle at top right,
      #ede9fe 0,
      transparent 38%
    ),
    var(--bg);
}

.courses-hero-card{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:25px;

  padding:30px;

  border:1px solid var(--border);
  border-radius:24px;

  background:var(--card);

  box-shadow:
    0 18px 45px
    rgba(15,23,42,.06);
}

.courses-hero-content{
  min-width:0;
}

.courses-hero-card h1{
  margin-top:4px;

  font-family:"Poppins";

  font-size:
    clamp(28px,4vw,42px);
}

.courses-hero-card p{
  max-width:650px;

  margin-top:6px;

  color:var(--muted);

  font-size:11px;

  line-height:1.6;
}

.courses-hero-icon{
  width:78px;
  height:78px;

  display:grid;
  place-items:center;

  flex-shrink:0;

  border-radius:22px;

  background:
    linear-gradient(
      135deg,
      #eef2ff,
      #ede9fe
    );

  font-size:34px;

  box-shadow:
    inset 0 0 0 1px
    rgba(99,102,241,.08);
}


/* =====================================================
   HERO TAGS
===================================================== */

.courses-hero-tags{
  display:flex;
  align-items:center;
  flex-wrap:wrap;

  gap:7px;

  margin-top:15px;
}

.courses-hero-tags span{
  display:inline-flex;
  align-items:center;

  padding:6px 9px;

  border:1px solid var(--border);
  border-radius:99px;

  background:#f8fafc;

  color:#475569;

  font-size:8px;
  font-weight:700;
}


/* =====================================================
   COURSE SUMMARY
===================================================== */

.courses-summary-section{
  padding:0 0 24px;
}

.courses-summary-grid{
  display:grid;

  grid-template-columns:
    repeat(4,1fr);

  gap:12px;
}

.courses-summary-grid article{
  display:flex;
  align-items:center;

  gap:11px;

  padding:16px;

  border:1px solid var(--border);
  border-radius:17px;

  background:var(--card);

  transition:.22s;
}

.courses-summary-grid article:hover{
  transform:translateY(-3px);

  border-color:#c7d2fe;

  box-shadow:
    0 12px 30px
    rgba(15,23,42,.05);
}

.courses-summary-grid article > span{
  width:43px;
  height:43px;

  display:grid;
  place-items:center;

  flex-shrink:0;

  border-radius:13px;

  background:#eef2ff;

  font-size:19px;
}

.courses-summary-grid strong{
  display:block;

  font-family:"Poppins";

  color:var(--primary);

  font-size:18px;
}

.courses-summary-grid small{
  display:block;

  color:var(--muted);

  font-size:8px;
  font-weight:700;
}


/* =====================================================
   COURSE FILTER
===================================================== */

.courses-filter-section{
  padding:0 0 18px;
}

.courses-filter-card{
  padding:22px;

  border:1px solid var(--border);
  border-radius:20px;

  background:var(--card);

  box-shadow:
    0 12px 35px
    rgba(15,23,42,.04);
}

.courses-filter-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;

  gap:15px;

  padding-bottom:16px;

  margin-bottom:16px;

  border-bottom:1px solid var(--border);
}

.courses-filter-head h2{
  margin-top:3px;

  font-family:"Poppins";

  font-size:19px;
}

.courses-filter-grid{
  display:grid;

  grid-template-columns:
    1fr 190px 190px;

  gap:10px;
}

.courses-search{
  display:flex;
  align-items:center;

  gap:9px;

  padding:10px 13px;

  border:1px solid var(--border);
  border-radius:13px;

  background:var(--card);
}

.courses-search input{
  width:100%;

  border:none;
  outline:none;

  background:transparent;

  color:var(--text);

  font-size:10px;
}

.courses-search input::placeholder{
  color:#94a3b8;
}

.courses-filter-grid select{
  padding:11px;

  border:1px solid var(--border);
  border-radius:13px;

  outline:none;

  background:var(--card);

  color:var(--text);

  font-size:9px;
}

.courses-filter-grid select:focus{
  border-color:#818cf8;

  box-shadow:
    0 0 0 3px
    rgba(99,102,241,.08);
}


/* =====================================================
   CONTINUE COURSE
===================================================== */

.continue-course-section{
  padding:0 0 20px;
}

.continue-course-card{
  display:grid;

  grid-template-columns:
    auto 1fr auto;

  align-items:center;

  gap:16px;

  padding:20px;

  border:1px solid #c7d2fe;
  border-radius:19px;

  background:
    linear-gradient(
      135deg,
      #eef2ff,
      #f5f3ff
    );

  box-shadow:
    0 12px 30px
    rgba(79,70,229,.06);
}

.continue-course-icon{
  width:52px;
  height:52px;

  display:grid;
  place-items:center;

  flex-shrink:0;

  border-radius:15px;

  background:
    linear-gradient(
      135deg,
      #2563eb,
      #7c3aed
    );

  color:#fff;

  font-size:21px;
}

.continue-course-main{
  min-width:0;
}

.continue-course-main h2{
  margin-top:3px;

  font-family:"Poppins";

  font-size:17px;
}

.continue-course-main p{
  margin-top:3px;

  color:#64748b;

  font-size:9px;
}

.continue-course-progress{
  width:100%;
  height:6px;

  margin-top:10px;

  overflow:hidden;

  border-radius:99px;

  background:#dbeafe;
}

.continue-course-progress span{
  display:block;

  height:100%;

  border-radius:inherit;

  background:
    linear-gradient(
      90deg,
      #2563eb,
      #7c3aed
    );

  transition:width .35s ease;
}

.continue-course-main > small{
  display:block;

  margin-top:5px;

  color:#64748b;

  font-size:7px;
  font-weight:700;
}


/* =====================================================
   COURSE LIST SECTION
===================================================== */

.courses-main-section{
  padding:0 0 70px;
}

.courses-section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;

  gap:20px;

  margin-bottom:17px;
}

.courses-section-head h2{
  margin-top:3px;

  font-family:"Poppins";

  font-size:20px;
}

.courses-section-head p{
  margin-top:4px;

  color:var(--muted);

  font-size:9px;
}


/* =====================================================
   COURSE GRID
===================================================== */

.course-grid{
  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:14px;
}


/* =====================================================
   COURSE CARD
===================================================== */

.course-card{
  position:relative;

  display:flex;
  flex-direction:column;

  overflow:hidden;

  border:1px solid var(--border);
  border-radius:19px;

  background:var(--card);

  transition:
    transform .22s,
    border-color .22s,
    box-shadow .22s;
}

.course-card:hover{
  transform:translateY(-4px);

  border-color:#c7d2fe;

  box-shadow:
    0 16px 35px
    rgba(15,23,42,.07);
}


/* =====================================================
   COURSE THUMBNAIL
===================================================== */

.course-thumbnail{
  position:relative;

  height:155px;

  display:flex;
  align-items:center;
  justify-content:center;

  overflow:hidden;

  background:
    linear-gradient(
      135deg,
      #dbeafe,
      #ede9fe
    );
}

.course-thumbnail img{
  width:100%;
  height:100%;

  object-fit:cover;
}

.course-thumbnail-placeholder{
  font-size:43px;
}

.course-play-icon{
  position:absolute;

  width:46px;
  height:46px;

  display:grid;
  place-items:center;

  border-radius:50%;

  background:rgba(15,23,42,.78);

  color:#fff;

  font-size:16px;

  backdrop-filter:blur(8px);
}


/* =====================================================
   COURSE ACCESS BADGE
===================================================== */

.course-access-badge{
  position:absolute;

  top:12px;
  right:12px;

  display:inline-flex;
  align-items:center;

  padding:5px 8px;

  border-radius:99px;

  font-size:7px;
  font-weight:800;

  text-transform:uppercase;

  z-index:2;
}

.course-access-badge.free{
  background:#dcfce7;
  color:#166534;
}

.course-access-badge.login{
  background:#dbeafe;
  color:#1d4ed8;
}

.course-access-badge.premium{
  background:#fef3c7;
  color:#92400e;
}


/* =====================================================
   COURSE CONTENT
===================================================== */

.course-card-content{
  display:flex;
  flex-direction:column;

  flex:1;

  padding:17px;
}

.course-card-content > small{
  display:block;

  color:var(--primary);

  font-size:7px;
  font-weight:800;

  letter-spacing:.5px;

  text-transform:uppercase;
}

.course-card-content h3{
  margin-top:4px;

  font-size:13px;

  line-height:1.45;
}

.course-card-content > p{
  margin-top:5px;

  color:var(--muted);

  font-size:8px;

  line-height:1.55;
}


/* =====================================================
   COURSE META
===================================================== */

.course-meta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;

  gap:6px;

  margin-top:11px;
}

.course-meta span{
  display:inline-flex;
  align-items:center;

  padding:4px 7px;

  border-radius:99px;

  background:#f1f5f9;

  color:#64748b;

  font-size:7px;
  font-weight:700;
}


/* =====================================================
   COURSE TEACHER
===================================================== */

.course-teacher{
  display:flex;
  align-items:center;

  gap:7px;

  margin-top:12px;
}

.course-teacher-avatar{
  width:28px;
  height:28px;

  display:grid;
  place-items:center;

  flex-shrink:0;

  border-radius:50%;

  background:#eef2ff;

  font-size:11px;
  font-weight:800;
}

.course-teacher div{
  min-width:0;
}

.course-teacher small{
  display:block;

  color:var(--muted);

  font-size:6px;
}

.course-teacher strong{
  display:block;

  margin-top:1px;

  overflow:hidden;

  text-overflow:ellipsis;

  white-space:nowrap;

  font-size:8px;
}


/* =====================================================
   COURSE PROGRESS
===================================================== */

.course-card-progress{
  margin-top:13px;
}

.course-card-progress-top{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:10px;

  margin-bottom:5px;

  color:var(--muted);

  font-size:7px;
}

.course-card-progress-top strong{
  color:var(--primary);
}

.course-card-progress-bar{
  width:100%;
  height:6px;

  overflow:hidden;

  border-radius:99px;

  background:#e2e8f0;
}

.course-card-progress-bar span{
  display:block;

  height:100%;

  border-radius:inherit;

  background:
    linear-gradient(
      90deg,
      #2563eb,
      #7c3aed
    );
}


/* =====================================================
   COURSE ACTIONS
===================================================== */

.course-card-actions{
  display:flex;
  align-items:center;

  gap:7px;

  margin-top:auto;
  padding-top:15px;
}

.course-view-btn{
  flex:1;

  padding:9px 10px;

  border:none;
  border-radius:10px;

  background:
    linear-gradient(
      135deg,
      #2563eb,
      #7c3aed
    );

  color:#fff;

  font-size:8px;
  font-weight:800;

  cursor:pointer;

  text-align:center;
}

.course-view-btn:hover{
  box-shadow:
    0 8px 18px
    rgba(79,70,229,.18);
}

.course-secondary-btn{
  padding:9px 10px;

  border:1px solid var(--border);
  border-radius:10px;

  background:var(--card);

  color:var(--text);

  font-size:8px;
  font-weight:800;

  cursor:pointer;
}


/* =====================================================
   COURSE ENROLLED BADGE
===================================================== */

.course-enrolled-badge{
  display:inline-flex;
  align-items:center;

  margin-top:10px;

  padding:5px 8px;

  border-radius:99px;

  background:#ecfdf5;

  color:#047857;

  font-size:7px;
  font-weight:800;
}


/* =====================================================
   PREMIUM / LOCKED COURSE
===================================================== */

.course-card.is-locked{
  border-color:#fde68a;
}

.course-card.is-locked .course-view-btn{
  background:
    linear-gradient(
      135deg,
      #d97706,
      #f59e0b
    );
}


/* =====================================================
   DARK MODE
===================================================== */

body.dark .courses-hero{
  background:#0b1120;
}

body.dark .courses-hero-tags span{
  background:#182235;
  color:#cbd5e1;
}

body.dark .courses-summary-grid article > span{
  background:#182235;
}

body.dark .course-meta span{
  background:#182235;
  color:#cbd5e1;
}

body.dark .course-teacher-avatar{
  background:#182235;
}

body.dark .course-card-progress-bar{
  background:#253247;
}

body.dark .continue-course-card{
  border-color:#334155;

  background:
    linear-gradient(
      135deg,
      #111827,
      #172033
    );
}

body.dark .continue-course-main p,
body.dark .continue-course-main > small{
  color:#94a3b8;
}

body.dark .continue-course-progress{
  background:#253247;
}


/* =====================================================
   SMALL DESKTOP
===================================================== */

@media(max-width:1050px){

  .course-grid{
    grid-template-columns:
      repeat(2,1fr);
  }

}


/* =====================================================
   TABLET
===================================================== */

@media(max-width:850px){

  .courses-summary-grid{
    grid-template-columns:
      repeat(2,1fr);
  }

  .courses-filter-grid{
    grid-template-columns:
      1fr 1fr;
  }

  .courses-search{
    grid-column:1/-1;
  }

}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:650px){

  .courses-hero{
    padding:25px 0 15px;
  }

  .courses-hero-card{
    padding:21px;
  }

  .courses-hero-card h1{
    font-size:25px;
  }

  .courses-hero-icon{
    width:53px;
    height:53px;

    border-radius:15px;

    font-size:23px;
  }


  /* SUMMARY */

  .courses-summary-grid{
    grid-template-columns:
      repeat(2,1fr);

    gap:9px;
  }

  .courses-summary-grid article{
    padding:13px;

    gap:8px;
  }

  .courses-summary-grid article > span{
    width:37px;
    height:37px;

    font-size:16px;
  }

  .courses-summary-grid strong{
    font-size:16px;
  }


  /* FILTER */

  .courses-filter-card{
    padding:18px;
  }

  .courses-filter-head{
    align-items:flex-start;
  }

  .courses-filter-grid{
    grid-template-columns:1fr;
  }

  .courses-search{
    grid-column:auto;
  }


  /* CONTINUE */

  .continue-course-card{
    grid-template-columns:
      auto 1fr;

    padding:17px;
  }

  .continue-course-card > .btn{
    grid-column:1/-1;

    width:100%;
  }


  /* COURSE GRID */

  .course-grid{
    grid-template-columns:1fr;
  }

  .course-thumbnail{
    height:180px;
  }


  /* SECTION HEAD */

  .courses-section-head{
    align-items:flex-start;
  }

}


/* =====================================================
   EXTRA SMALL MOBILE
===================================================== */

@media(max-width:390px){

  .courses-hero-icon{
    display:none;
  }

  .courses-summary-grid{
    grid-template-columns:1fr;
  }

  .courses-section-head{
    flex-direction:column;
  }

}

/* =====================================================
   COURSE DETAILS PAGE
===================================================== */

.course-details-page{
  min-height:100vh;
  background:var(--bg);
}


/* =====================================================
   BREADCRUMB
===================================================== */

.course-breadcrumb-section{
  padding:24px 0 12px;
}

.course-breadcrumb{
  display:flex;
  align-items:center;
  flex-wrap:wrap;

  gap:7px;

  color:var(--muted);

  font-size:8px;
}

.course-breadcrumb a{
  color:var(--muted);
}

.course-breadcrumb a:hover{
  color:var(--primary);
}

.course-breadcrumb strong{
  color:var(--text);
}


/* =====================================================
   COURSE DETAILS HERO
===================================================== */

.course-details-hero{
  padding:0 0 24px;
}

.course-details-hero-card{
  display:grid;

  grid-template-columns:
    minmax(0,1fr) 340px;

  gap:28px;

  align-items:center;

  padding:30px;

  border:1px solid var(--border);
  border-radius:24px;

  background:var(--card);

  box-shadow:
    0 18px 45px
    rgba(15,23,42,.06);
}

.course-details-hero-content{
  min-width:0;
}


/* =====================================================
   COURSE BADGES
===================================================== */

.course-details-badges{
  display:flex;
  align-items:center;
  flex-wrap:wrap;

  gap:7px;

  margin-bottom:12px;
}

.course-details-badges > span{
  display:inline-flex;
  align-items:center;

  padding:5px 8px;

  border-radius:99px;

  background:#f1f5f9;

  color:#64748b;

  font-size:7px;
  font-weight:800;
}

.course-details-access.free{
  background:#dcfce7;
  color:#166534;
}

.course-details-access.login{
  background:#dbeafe;
  color:#1d4ed8;
}

.course-details-access.premium{
  background:#fef3c7;
  color:#92400e;
}


/* =====================================================
   COURSE HERO TEXT
===================================================== */

.course-details-hero-content h1{
  font-family:"Poppins";

  font-size:
    clamp(27px,4vw,41px);

  line-height:1.15;
}

.course-details-hero-content > p{
  max-width:700px;

  margin-top:10px;

  color:var(--muted);

  font-size:10px;

  line-height:1.65;
}


/* =====================================================
   COURSE META
===================================================== */

.course-details-meta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;

  gap:11px;

  margin-top:20px;
}

.course-details-meta > div{
  display:flex;
  align-items:center;

  gap:8px;

  min-width:135px;

  padding:11px 12px;

  border:1px solid var(--border);
  border-radius:13px;

  background:#f8fafc;
}

.course-details-meta > div > span{
  font-size:17px;
}

.course-details-meta small{
  display:block;

  color:var(--muted);

  font-size:6px;
  font-weight:800;
  letter-spacing:.5px;
}

.course-details-meta strong{
  display:block;

  margin-top:2px;

  font-size:8px;
}


/* =====================================================
   COURSE TEACHER
===================================================== */

.course-details-teacher{
  display:flex;
  align-items:center;

  gap:9px;

  margin-top:18px;
}

.course-details-teacher-avatar{
  width:38px;
  height:38px;

  display:grid;
  place-items:center;

  flex-shrink:0;

  border-radius:50%;

  background:
    linear-gradient(
      135deg,
      #2563eb,
      #7c3aed
    );

  color:#fff;

  font-size:13px;
  font-weight:800;
}

.course-details-teacher small{
  display:block;

  color:var(--muted);

  font-size:6px;
  font-weight:800;
}

.course-details-teacher strong{
  display:block;

  margin-top:2px;

  font-size:9px;
}


/* =====================================================
   COURSE PREVIEW CARD
===================================================== */

.course-preview-card{
  overflow:hidden;

  border:1px solid var(--border);
  border-radius:20px;

  background:var(--card);

  box-shadow:
    0 15px 35px
    rgba(15,23,42,.07);
}

.course-preview-visual{
  position:relative;

  min-height:190px;

  display:grid;
  place-items:center;

  overflow:hidden;

  background:
    linear-gradient(
      135deg,
      #dbeafe,
      #ede9fe
    );
}

.course-preview-visual > span{
  font-size:60px;
}

.course-preview-visual button{
  position:absolute;

  width:54px;
  height:54px;

  display:grid;
  place-items:center;

  border:none;
  border-radius:50%;

  background:rgba(15,23,42,.82);

  color:#fff;

  font-size:18px;

  cursor:pointer;

  backdrop-filter:blur(8px);

  transition:.2s;
}

.course-preview-visual button:hover{
  transform:scale(1.06);
}

.course-preview-content{
  padding:18px;
}

.course-preview-info{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:10px;

  font-size:8px;

  color:var(--muted);
}

.course-preview-info strong{
  color:var(--primary);

  font-size:10px;
}

.course-preview-progress{
  width:100%;
  height:7px;

  margin-top:8px;

  overflow:hidden;

  border-radius:99px;

  background:#e2e8f0;
}

.course-preview-progress span{
  display:block;

  height:100%;

  border-radius:inherit;

  background:
    linear-gradient(
      90deg,
      #2563eb,
      #7c3aed
    );
}

.course-primary-action{
  width:100%;

  margin-top:15px;
}

.course-preview-content > p{
  margin-top:8px;

  color:var(--muted);

  text-align:center;

  font-size:7px;

  line-height:1.5;
}


/* =====================================================
   MAIN COURSE DETAILS LAYOUT
===================================================== */

.course-details-main-section{
  padding:0 0 70px;
}

.course-details-layout{
  display:grid;

  grid-template-columns:
    minmax(0,1fr) 300px;

  gap:22px;

  align-items:start;
}

.course-details-main-content{
  display:flex;
  flex-direction:column;

  gap:18px;
}

.course-details-sidebar{
  position:sticky;

  top:92px;

  display:flex;
  flex-direction:column;

  gap:13px;
}


/* =====================================================
   COURSE PANEL
===================================================== */

.course-details-panel{
  padding:23px;

  border:1px solid var(--border);
  border-radius:20px;

  background:var(--card);
}

.course-panel-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;

  gap:15px;

  margin-bottom:16px;
}

.course-panel-head h2{
  margin-top:3px;

  font-family:"Poppins";

  font-size:19px;
}

.course-panel-head p{
  margin-top:4px;

  color:var(--muted);

  font-size:8px;
}

.course-details-panel > p{
  color:var(--muted);

  font-size:9px;

  line-height:1.7;
}


/* =====================================================
   WHAT YOU'LL LEARN
===================================================== */

.course-learning-points{
  margin-top:20px;
}

.course-learning-points h3{
  margin-bottom:11px;

  font-size:11px;
}

.course-learning-grid{
  display:grid;

  grid-template-columns:
    repeat(2,1fr);

  gap:9px;
}

.course-learning-item{
  display:flex;
  align-items:flex-start;

  gap:8px;

  padding:11px;

  border:1px solid var(--border);
  border-radius:12px;

  background:#f8fafc;
}

.course-learning-item > span{
  color:#059669;

  font-size:12px;
}

.course-learning-item p{
  color:var(--text);

  font-size:8px;

  line-height:1.45;
}


/* =====================================================
   CURRICULUM COUNT
===================================================== */

.course-curriculum-count{
  display:inline-flex;
  align-items:center;

  padding:6px 9px;

  border-radius:99px;

  background:#eef2ff;

  color:#4f46e5;

  font-size:7px;
  font-weight:800;
}


/* =====================================================
   COURSE LESSON LIST
===================================================== */

.course-lesson-list{
  display:flex;
  flex-direction:column;

  gap:9px;
}

.course-lesson-item{
  display:grid;

  grid-template-columns:
    auto 1fr auto;

  align-items:center;

  gap:11px;

  padding:13px;

  border:1px solid var(--border);
  border-radius:14px;

  background:var(--card);

  transition:.2s;
}

.course-lesson-item:hover{
  border-color:#c7d2fe;

  background:#f8faff;
}

.course-lesson-number{
  width:36px;
  height:36px;

  display:grid;
  place-items:center;

  flex-shrink:0;

  border-radius:10px;

  background:#eef2ff;

  color:#4f46e5;

  font-size:8px;
  font-weight:800;
}

.course-lesson-info{
  min-width:0;
}

.course-lesson-info small{
  display:block;

  color:var(--muted);

  font-size:6px;
  font-weight:800;

  text-transform:uppercase;
}

.course-lesson-info h3{
  margin-top:2px;

  overflow:hidden;

  text-overflow:ellipsis;

  white-space:nowrap;

  font-size:10px;
}

.course-lesson-status{
  display:flex;
  align-items:center;

  gap:7px;
}

.course-lesson-status span{
  display:inline-flex;
  align-items:center;

  padding:4px 7px;

  border-radius:99px;

  background:#f1f5f9;

  color:#64748b;

  font-size:6px;
  font-weight:800;
}

.course-lesson-status span.completed{
  background:#dcfce7;

  color:#166534;
}

.course-lesson-status span.locked{
  background:#fef3c7;

  color:#92400e;
}

.course-lesson-open-btn{
  padding:7px 9px;

  border:1px solid var(--border);
  border-radius:9px;

  background:var(--card);

  color:var(--primary);

  font-size:7px;
  font-weight:800;

  cursor:pointer;
}

.course-lesson-open-btn:hover{
  border-color:#c7d2fe;

  background:#eef2ff;
}

.course-lesson-open-btn:disabled{
  opacity:.5;

  cursor:not-allowed;
}


/* =====================================================
   COMPLETION PANEL
===================================================== */

.course-completion-panel{
  display:flex;
  align-items:center;

  gap:15px;

  padding:22px;

  border:1px solid #bbf7d0;
  border-radius:20px;

  background:#f0fdf4;
}

.course-completion-panel > div:first-child{
  font-size:36px;
}

.course-completion-panel h2{
  margin-top:3px;

  font-family:"Poppins";

  font-size:18px;

  color:#166534;
}

.course-completion-panel p{
  margin-top:3px;

  color:#15803d;

  font-size:9px;
}


/* =====================================================
   COURSE SIDEBAR CARD
===================================================== */

.course-side-card{
  padding:18px;

  border:1px solid var(--border);
  border-radius:17px;

  background:var(--card);
}

.course-side-title{
  display:flex;
  align-items:center;

  gap:8px;

  margin-bottom:13px;
}

.course-side-title > span{
  font-size:17px;
}

.course-side-title h3{
  font-size:11px;
}

.course-side-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;

  gap:12px;

  padding:8px 0;

  border-bottom:1px solid var(--border);
}

.course-side-row:last-child{
  border-bottom:none;
}

.course-side-row span{
  color:var(--muted);

  font-size:8px;
}

.course-side-row strong{
  max-width:160px;

  text-align:right;

  font-size:8px;

  line-height:1.4;
}


/* =====================================================
   SIDEBAR PROGRESS
===================================================== */

.course-side-progress-number{
  display:flex;
  align-items:flex-end;

  gap:5px;
}

.course-side-progress-number strong{
  font-family:"Poppins";

  color:var(--primary);

  font-size:23px;
}

.course-side-progress-number span{
  padding-bottom:3px;

  color:var(--muted);

  font-size:7px;
}

.course-side-progress-bar{
  width:100%;
  height:7px;

  margin-top:10px;

  overflow:hidden;

  border-radius:99px;

  background:#e2e8f0;
}

.course-side-progress-bar span{
  display:block;

  height:100%;

  border-radius:inherit;

  background:
    linear-gradient(
      90deg,
      #2563eb,
      #7c3aed
    );
}

.course-side-card > p{
  margin-top:8px;

  color:var(--muted);

  font-size:8px;

  line-height:1.5;
}


/* =====================================================
   ACCESS SIDEBAR
===================================================== */

.course-access-side-card{
  border-color:#c7d2fe;

  background:
    linear-gradient(
      135deg,
      #f8faff,
      #f5f3ff
    );
}

.course-side-access-btn{
  display:block;

  width:100%;

  margin-top:13px;

  padding:9px 11px;

  border-radius:10px;

  background:
    linear-gradient(
      135deg,
      #2563eb,
      #7c3aed
    );

  color:#fff;

  text-align:center;

  font-size:8px;
  font-weight:800;
}


/* =====================================================
   PREMIUM ACCESS CARD
===================================================== */

.course-access-side-card.premium{
  border-color:#fde68a;

  background:#fffbeb;
}

.course-access-side-card.premium
.course-side-access-btn{
  background:
    linear-gradient(
      135deg,
      #d97706,
      #f59e0b
    );
}


/* =====================================================
   DARK MODE
===================================================== */

body.dark .course-details-meta > div,
body.dark .course-learning-item{
  background:#182235;
}

body.dark .course-preview-progress,
body.dark .course-side-progress-bar{
  background:#253247;
}

body.dark .course-lesson-item:hover{
  background:#182235;
}

body.dark .course-lesson-number{
  background:#182235;

  color:#a5b4fc;
}

body.dark .course-lesson-status span{
  background:#182235;

  color:#cbd5e1;
}

body.dark .course-lesson-open-btn:hover{
  background:#182235;
}

body.dark .course-access-side-card{
  background:#111827;

  border-color:#334155;
}

body.dark .course-access-side-card.premium{
  background:#2a2112;

  border-color:#78350f;
}

body.dark .course-completion-panel{
  background:#102419;

  border-color:#166534;
}

body.dark .course-completion-panel h2{
  color:#86efac;
}

body.dark .course-completion-panel p{
  color:#6ee7b7;
}


/* =====================================================
   TABLET
===================================================== */

@media(max-width:1000px){

  .course-details-hero-card{
    grid-template-columns:
      minmax(0,1fr) 300px;
  }

  .course-details-layout{
    grid-template-columns:
      minmax(0,1fr) 270px;
  }

}


/* =====================================================
   SMALL TABLET
===================================================== */

@media(max-width:850px){

  .course-details-hero-card{
    grid-template-columns:1fr;
  }

  .course-preview-card{
    max-width:520px;
  }

  .course-details-layout{
    grid-template-columns:1fr;
  }

  .course-details-sidebar{
    position:static;

    display:grid;

    grid-template-columns:
      repeat(2,1fr);
  }

  .course-access-side-card{
    grid-column:1/-1;
  }

}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:650px){

  .course-breadcrumb-section{
    padding-top:18px;
  }

  .course-details-hero-card{
    padding:20px;
  }

  .course-details-hero-content h1{
    font-size:25px;
  }

  .course-details-meta{
    display:grid;

    grid-template-columns:1fr;
  }

  .course-details-meta > div{
    min-width:0;
  }


  /* PREVIEW */

  .course-preview-visual{
    min-height:165px;
  }

  .course-preview-visual > span{
    font-size:48px;
  }


  /* PANELS */

  .course-details-panel{
    padding:18px;
  }

  .course-panel-head{
    align-items:flex-start;
    flex-direction:column;
  }

  .course-panel-head h2{
    font-size:17px;
  }


  /* LEARNING POINTS */

  .course-learning-grid{
    grid-template-columns:1fr;
  }


  /* LESSON */

  .course-lesson-item{
    grid-template-columns:
      auto 1fr;
  }

  .course-lesson-status{
    grid-column:2;

    justify-content:flex-start;

    flex-wrap:wrap;
  }


  /* SIDEBAR */

  .course-details-sidebar{
    grid-template-columns:1fr;
  }

  .course-access-side-card{
    grid-column:auto;
  }

}


/* =====================================================
   EXTRA SMALL MOBILE
===================================================== */

@media(max-width:390px){

  .course-details-hero-card{
    padding:17px;
  }

  .course-preview-content{
    padding:15px;
  }

  .course-details-panel{
    padding:16px;
  }

  .course-completion-panel{
    align-items:flex-start;
  }

}

/* =====================================================
   LESSON PAGE
===================================================== */

.lesson-page{
  min-height:100vh;
  background:var(--bg);
}


/* =====================================================
   BREADCRUMB
===================================================== */

.lesson-breadcrumb-section{
  padding:24px 0 12px;
}


/* =====================================================
   LESSON HEADER
===================================================== */

.lesson-header-section{
  padding:0 0 18px;
}

.lesson-header-card{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:20px;

  padding:20px 22px;

  border:1px solid var(--border);
  border-radius:19px;

  background:var(--card);

  box-shadow:
    0 12px 32px
    rgba(15,23,42,.04);
}

.lesson-header-card h1{
  margin-top:3px;

  font-family:"Poppins";

  font-size:
    clamp(21px,3vw,29px);
}

.lesson-header-card p{
  margin-top:3px;

  color:var(--muted);

  font-size:9px;
}


/* =====================================================
   LESSON MAIN LAYOUT
===================================================== */

.lesson-main-section{
  padding:0 0 70px;
}

.lesson-layout{
  display:grid;

  grid-template-columns:
    minmax(0,1fr) 310px;

  gap:22px;

  align-items:start;
}

.lesson-main-content{
  display:flex;
  flex-direction:column;

  gap:17px;
}

.lesson-sidebar{
  position:sticky;

  top:92px;

  display:flex;
  flex-direction:column;

  gap:13px;
}


/* =====================================================
   VIDEO PLAYER CARD
===================================================== */

.lesson-player-card{
  overflow:hidden;

  border:1px solid var(--border);
  border-radius:20px;

  background:var(--card);

  box-shadow:
    0 15px 38px
    rgba(15,23,42,.05);
}


/* =====================================================
   VIDEO PLAYER
===================================================== */

.lesson-video-player{
  position:relative;

  width:100%;

  aspect-ratio:16 / 9;

  overflow:hidden;

  background:#0f172a;
}

.lesson-video-player iframe,
.lesson-video-player video{
  width:100%;
  height:100%;

  border:0;

  object-fit:contain;
}


/* =====================================================
   VIDEO PLACEHOLDER
===================================================== */

.lesson-video-placeholder{
  width:100%;
  height:100%;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  padding:25px;

  text-align:center;

  color:#fff;

  background:
    radial-gradient(
      circle at top left,
      rgba(99,102,241,.35),
      transparent 40%
    ),
    linear-gradient(
      135deg,
      #0f172a,
      #1e293b
    );
}

.lesson-video-placeholder > span{
  display:block;

  margin-bottom:8px;

  font-size:48px;
}

.lesson-video-placeholder h2{
  font-family:"Poppins";

  font-size:18px;
}

.lesson-video-placeholder p{
  margin-top:5px;

  color:#cbd5e1;

  font-size:9px;
}


/* =====================================================
   PLAYER INFO
===================================================== */

.lesson-player-info{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:15px;

  padding:16px 18px;
}

.lesson-player-info > div{
  min-width:0;
}

.lesson-player-info small{
  display:block;

  color:var(--primary);

  font-size:7px;
  font-weight:800;

  letter-spacing:.6px;
}

.lesson-player-info h2{
  margin-top:3px;

  overflow:hidden;

  text-overflow:ellipsis;

  white-space:nowrap;

  font-family:"Poppins";

  font-size:15px;
}


/* =====================================================
   LESSON ACTION / COMPLETION
===================================================== */

.lesson-action-card{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:20px;

  padding:18px 20px;

  border:1px solid var(--border);
  border-radius:18px;

  background:var(--card);
}

.lesson-complete-info{
  display:flex;
  align-items:center;

  gap:11px;
}

.lesson-complete-icon{
  width:43px;
  height:43px;

  display:grid;
  place-items:center;

  flex-shrink:0;

  border-radius:13px;

  background:#f1f5f9;

  color:#64748b;

  font-size:16px;
  font-weight:900;

  transition:.2s;
}

.lesson-complete-info small{
  display:block;

  color:var(--muted);

  font-size:6px;
  font-weight:800;

  letter-spacing:.5px;
}

.lesson-complete-info h3{
  margin-top:2px;

  font-size:11px;
}

.lesson-complete-info p{
  margin-top:2px;

  color:var(--muted);

  font-size:8px;
}


/* =====================================================
   COMPLETED LESSON STATE
===================================================== */

.lesson-action-card.completed{
  border-color:#bbf7d0;

  background:#f0fdf4;
}

.lesson-action-card.completed
.lesson-complete-icon{
  background:#dcfce7;

  color:#166534;
}

.lesson-action-card.completed
.lesson-complete-info h3{
  color:#166534;
}

.lesson-action-card.completed
#markLessonCompleteBtn{
  background:#059669;
}


/* =====================================================
   LESSON INFO GRID
===================================================== */

.lesson-info-grid{
  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:10px;

  margin-top:18px;
}

.lesson-info-grid article{
  display:flex;
  align-items:center;

  gap:9px;

  padding:13px;

  border:1px solid var(--border);
  border-radius:13px;

  background:#f8fafc;
}

.lesson-info-grid article > span{
  width:34px;
  height:34px;

  display:grid;
  place-items:center;

  flex-shrink:0;

  border-radius:10px;

  background:#eef2ff;

  font-size:15px;
}

.lesson-info-grid small{
  display:block;

  color:var(--muted);

  font-size:6px;
  font-weight:800;

  letter-spacing:.4px;
}

.lesson-info-grid strong{
  display:block;

  margin-top:2px;

  font-size:8px;

  line-height:1.4;
}


/* =====================================================
   PREVIOUS / NEXT LESSON
===================================================== */

.lesson-navigation-card{
  display:grid;

  grid-template-columns:
    repeat(2,1fr);

  gap:11px;
}

.lesson-navigation-btn{
  display:flex;
  flex-direction:column;
  align-items:flex-start;

  gap:3px;

  min-width:0;

  padding:15px;

  border:1px solid var(--border);
  border-radius:15px;

  background:var(--card);

  color:var(--text);

  text-align:left;

  cursor:pointer;

  transition:.2s;
}

.lesson-navigation-btn.next{
  align-items:flex-end;

  text-align:right;
}

.lesson-navigation-btn:hover{
  transform:translateY(-2px);

  border-color:#c7d2fe;

  background:#f8faff;
}

.lesson-navigation-btn small{
  color:var(--primary);

  font-size:6px;
  font-weight:800;
}

.lesson-navigation-btn strong{
  max-width:100%;

  overflow:hidden;

  text-overflow:ellipsis;

  white-space:nowrap;

  font-size:9px;
}

.lesson-navigation-btn:disabled{
  opacity:.45;

  cursor:not-allowed;

  transform:none;
}


/* =====================================================
   CURRICULUM SIDEBAR
===================================================== */

.lesson-curriculum-card{
  max-height:520px;

  overflow:hidden;
}

.lesson-curriculum-list{
  max-height:430px;

  overflow-y:auto;

  padding-right:3px;
}

.lesson-curriculum-list::-webkit-scrollbar{
  width:5px;
}

.lesson-curriculum-list::-webkit-scrollbar-thumb{
  border-radius:99px;

  background:#cbd5e1;
}


/* =====================================================
   CURRICULUM ITEM
===================================================== */

.lesson-curriculum-item{
  display:grid;

  grid-template-columns:
    auto 1fr auto;

  align-items:center;

  gap:8px;

  padding:10px 7px;

  border-bottom:1px solid var(--border);

  cursor:pointer;

  transition:.2s;
}

.lesson-curriculum-item:last-child{
  border-bottom:none;
}

.lesson-curriculum-item:hover{
  background:#f8faff;
}

.lesson-curriculum-item.active{
  margin:3px 0;

  border-bottom:none;
  border-radius:11px;

  background:#eef2ff;
}

.lesson-curriculum-number{
  width:28px;
  height:28px;

  display:grid;
  place-items:center;

  flex-shrink:0;

  border-radius:8px;

  background:#f1f5f9;

  color:#64748b;

  font-size:7px;
  font-weight:800;
}

.lesson-curriculum-item.active
.lesson-curriculum-number{
  background:#fff;

  color:#4f46e5;
}

.lesson-curriculum-info{
  min-width:0;
}

.lesson-curriculum-info small{
  display:block;

  color:var(--muted);

  font-size:6px;
}

.lesson-curriculum-info strong{
  display:block;

  margin-top:2px;

  overflow:hidden;

  text-overflow:ellipsis;

  white-space:nowrap;

  font-size:8px;
}

.lesson-curriculum-status{
  flex-shrink:0;

  font-size:11px;
}

.lesson-curriculum-status.completed{
  color:#059669;
}


/* =====================================================
   ACCESS LOCK
===================================================== */

.lesson-player-card.is-locked
.lesson-video-player{
  min-height:340px;

  aspect-ratio:auto;
}

.lesson-access-lock{
  width:100%;
  min-height:340px;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  padding:30px;

  text-align:center;

  background:
    radial-gradient(
      circle at top,
      rgba(99,102,241,.18),
      transparent 45%
    ),
    #0f172a;

  color:#fff;
}

.lesson-access-lock > span{
  margin-bottom:9px;

  font-size:40px;
}

.lesson-access-lock h2{
  font-size:17px;
}

.lesson-access-lock p{
  max-width:430px;

  margin:5px auto 14px;

  color:#cbd5e1;

  font-size:9px;

  line-height:1.55;
}

.lesson-access-lock a{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:9px 13px;

  border-radius:10px;

  background:#fff;

  color:#312e81;

  font-size:8px;
  font-weight:800;
}


/* =====================================================
   DARK MODE
===================================================== */

body.dark .lesson-info-grid article{
  background:#182235;
}

body.dark .lesson-info-grid article > span{
  background:#111827;
}

body.dark .lesson-complete-icon{
  background:#182235;

  color:#cbd5e1;
}

body.dark .lesson-navigation-btn:hover,
body.dark .lesson-curriculum-item:hover{
  background:#182235;
}

body.dark .lesson-curriculum-item.active{
  background:#1e293b;
}

body.dark
.lesson-curriculum-item.active
.lesson-curriculum-number{
  background:#0f172a;

  color:#a5b4fc;
}

body.dark .lesson-action-card.completed{
  border-color:#166534;

  background:#102419;
}

body.dark
.lesson-action-card.completed
.lesson-complete-info h3{
  color:#86efac;
}


/* =====================================================
   TABLET
===================================================== */

@media(max-width:1000px){

  .lesson-layout{
    grid-template-columns:
      minmax(0,1fr) 280px;
  }

}


/* =====================================================
   SMALL TABLET
===================================================== */

@media(max-width:850px){

  .lesson-layout{
    grid-template-columns:1fr;
  }

  .lesson-sidebar{
    position:static;

    display:grid;

    grid-template-columns:
      repeat(2,1fr);
  }

  .lesson-curriculum-card{
    grid-row:span 2;

    max-height:none;
  }

}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:650px){

  .lesson-breadcrumb-section{
    padding-top:18px;
  }

  .lesson-header-card{
    align-items:flex-start;
    flex-direction:column;

    padding:17px;
  }

  .lesson-header-card h1{
    font-size:21px;
  }

  .lesson-header-card > a{
    width:100%;

    text-align:center;
  }


  /* PLAYER */

  .lesson-player-info{
    align-items:flex-start;
    flex-direction:column;
  }

  .lesson-player-info
  .profile-outline-btn{
    width:100%;
  }


  /* ACTION */

  .lesson-action-card{
    align-items:flex-start;
    flex-direction:column;
  }

  .lesson-action-card > .btn{
    width:100%;
  }


  /* INFO */

  .lesson-info-grid{
    grid-template-columns:1fr;
  }


  /* NAVIGATION */

  .lesson-navigation-card{
    grid-template-columns:1fr;
  }

  .lesson-navigation-btn.next{
    align-items:flex-start;

    text-align:left;
  }


  /* SIDEBAR */

  .lesson-sidebar{
    grid-template-columns:1fr;
  }

  .lesson-curriculum-card{
    grid-row:auto;
  }

  .lesson-curriculum-list{
    max-height:420px;
  }

}


/* =====================================================
   EXTRA SMALL MOBILE
===================================================== */

@media(max-width:390px){

  .lesson-player-info{
    padding:14px;
  }

  .lesson-action-card,
  .course-details-panel{
    padding:16px;
  }

  .lesson-video-placeholder > span{
    font-size:38px;
  }

  .lesson-video-placeholder h2{
    font-size:15px;
  }

}

/* =====================================================
   GLOBAL READABILITY UPGRADE
   Gourav Study Zone 2.0
===================================================== */

/* Small labels / meta text */
.section-kicker,
.course-card-content > small,
.course-teacher small,
.course-details-meta small,
.course-details-teacher small,
.course-learning-item small,
.course-lesson-info small,
.course-side-title small,
.course-side-row span,
.course-curriculum-count,
.lesson-player-info small,
.lesson-complete-info small,
.lesson-info-grid small,
.lesson-navigation-btn small,
.lesson-curriculum-info small,
.resource-library-count,
.course-access-badge,
.course-details-badges > span{
  font-size:10px;
}


/* Normal small text */
.course-card-content > p,
.course-meta span,
.course-teacher strong,
.course-details-hero-content > p,
.course-details-panel > p,
.course-learning-item p,
.course-panel-head p,
.course-side-row strong,
.course-side-card > p,
.lesson-header-card p,
.lesson-video-placeholder p,
.lesson-complete-info p,
.lesson-info-grid strong,
.lesson-curriculum-info strong,
.courses-section-head p,
.courses-summary-grid small,
.resource-library-section-head p{
  font-size:12px;
}


/* Course curriculum lesson title */
.course-lesson-info h3{
  font-size:14px;
  line-height:1.45;
}


/* Curriculum sidebar lesson title */
.lesson-curriculum-info strong{
  font-size:12px;
  line-height:1.4;
}


/* Course card title */
.course-card-content h3{
  font-size:16px;
  line-height:1.45;
}


/* Sidebar titles */
.course-side-title h3{
  font-size:14px;
}


/* Lesson status */
.course-lesson-status span{
  font-size:10px;
}


/* Buttons */
.course-lesson-open-btn,
.course-view-btn,
.course-secondary-btn,
.course-side-access-btn{
  font-size:11px;
}


/* Filters */
.courses-search input,
.courses-filter-grid select,
.resource-filter-field select,
.resource-filter-field label{
  font-size:12px;
}


/* Main paragraphs */
.courses-hero-card p,
.resource-library-hero-card p{
  font-size:13px;
  line-height:1.65;
}


/* Keep mobile readable */
@media(max-width:650px){

  .course-card-content > p,
  .course-details-panel > p,
  .course-side-card > p,
  .lesson-complete-info p{
    font-size:12px;
  }

  .course-lesson-info h3{
    font-size:13px;
  }

  .course-card-content h3{
    font-size:15px;
  }

}

/* =====================================================
   GLOBAL WIDE SCREEN LAYOUT FIX
===================================================== */

.shell{
  width:calc(100% - 40px);
  max-width:1720px;
  margin-left:auto;
  margin-right:auto;
}


/* Laptop */
@media(max-width:1400px){

  .shell{
    width:calc(100% - 36px);
  }

}


/* Tablet */
@media(max-width:900px){

  .shell{
    width:calc(100% - 28px);
  }

}


/* Mobile */
@media(max-width:600px){

  .shell{
    width:calc(100% - 22px);
  }

}

/* =====================================================
   LIVE CLASSES PAGE
===================================================== */

.live-page{
  min-height:100vh;
  background:var(--bg);
}


/* =====================================================
   LIVE HERO
===================================================== */

.live-hero{
  padding:34px 0 20px;

  background:
    radial-gradient(
      circle at top left,
      rgba(239,68,68,.10),
      transparent 34%
    ),
    radial-gradient(
      circle at top right,
      rgba(99,102,241,.12),
      transparent 36%
    ),
    var(--bg);
}

.live-hero-card{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:28px;

  padding:30px;

  border:1px solid var(--border);
  border-radius:24px;

  background:var(--card);

  box-shadow:
    0 18px 45px
    rgba(15,23,42,.06);
}

.live-hero-content{
  min-width:0;
  flex:1;
}

.live-hero-content h1{
  margin-top:5px;

  font-family:"Poppins";

  font-size:
    clamp(30px,4vw,42px);

  line-height:1.15;
}

.live-hero-content p{
  max-width:720px;

  margin-top:9px;

  color:var(--muted);

  font-size:14px;

  line-height:1.65;
}


/* =====================================================
   LIVE HERO TAGS
===================================================== */

.live-hero-tags{
  display:flex;
  align-items:center;
  flex-wrap:wrap;

  gap:8px;

  margin-top:16px;
}

.live-hero-tags span{
  display:inline-flex;
  align-items:center;

  padding:7px 10px;

  border:1px solid var(--border);
  border-radius:99px;

  background:#f8fafc;

  color:#475569;

  font-size:11px;
  font-weight:700;
}


/* =====================================================
   LIVE HERO VISUAL
===================================================== */

.live-hero-visual{
  width:180px;
  min-width:180px;
  height:150px;

  position:relative;

  display:grid;
  place-items:center;

  border-radius:22px;

  background:
    linear-gradient(
      135deg,
      #fee2e2,
      #eef2ff
    );

  overflow:hidden;
}

.live-hero-icon{
  font-size:52px;
}

.live-signal{
  position:absolute;

  top:14px;
  left:14px;

  display:inline-flex;
  align-items:center;

  gap:6px;

  padding:6px 9px;

  border-radius:99px;

  background:#fff;

  color:#dc2626;

  font-size:10px;
  font-weight:800;

  box-shadow:
    0 8px 18px
    rgba(15,23,42,.08);
}

.live-signal span{
  width:8px;
  height:8px;

  border-radius:50%;

  background:#ef4444;

  box-shadow:
    0 0 0 5px
    rgba(239,68,68,.10);

  animation:
    livePulse 1.4s infinite;
}

@keyframes livePulse{

  0%{
    transform:scale(1);
    opacity:1;
  }

  50%{
    transform:scale(1.35);
    opacity:.65;
  }

  100%{
    transform:scale(1);
    opacity:1;
  }

}


/* =====================================================
   LIVE SUMMARY
===================================================== */

.live-summary-section{
  padding:0 0 22px;
}

.live-summary-grid{
  display:grid;

  grid-template-columns:
    repeat(4,1fr);

  gap:12px;
}

.live-summary-grid article{
  display:flex;
  align-items:center;

  gap:11px;

  padding:16px;

  border:1px solid var(--border);
  border-radius:17px;

  background:var(--card);

  transition:.22s;
}

.live-summary-grid article:hover{
  transform:translateY(-3px);

  border-color:#c7d2fe;

  box-shadow:
    0 12px 30px
    rgba(15,23,42,.05);
}

.live-summary-grid article > span{
  width:44px;
  height:44px;

  display:grid;
  place-items:center;

  flex-shrink:0;

  border-radius:13px;

  background:#f1f5f9;

  font-size:20px;
}

.live-summary-grid strong{
  display:block;

  font-family:"Poppins";

  color:var(--primary);

  font-size:20px;
}

.live-summary-grid small{
  display:block;

  margin-top:1px;

  color:var(--muted);

  font-size:11px;
  font-weight:700;
}


/* =====================================================
   LIVE FILTER
===================================================== */

.live-filter-section{
  padding:0 0 20px;
}

.live-filter-card{
  padding:22px;

  border:1px solid var(--border);
  border-radius:20px;

  background:var(--card);

  box-shadow:
    0 12px 35px
    rgba(15,23,42,.04);
}

.live-filter-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;

  gap:16px;

  padding-bottom:15px;
  margin-bottom:15px;

  border-bottom:1px solid var(--border);
}

.live-filter-head h2{
  margin-top:4px;

  font-family:"Poppins";

  font-size:21px;
}

.live-filter-grid{
  display:grid;

  grid-template-columns:
    minmax(280px,1fr)
    180px
    180px
    180px;

  gap:10px;
}

.live-search-box{
  display:flex;
  align-items:center;

  gap:9px;

  padding:11px 13px;

  border:1px solid var(--border);
  border-radius:13px;

  background:var(--card);
}

.live-search-box input{
  width:100%;

  border:none;
  outline:none;

  background:transparent;

  color:var(--text);

  font-size:12px;
}

.live-search-box input::placeholder{
  color:#94a3b8;
}

.live-filter-grid select{
  padding:11px;

  border:1px solid var(--border);
  border-radius:13px;

  outline:none;

  background:var(--card);

  color:var(--text);

  font-size:12px;
}

.live-filter-grid select:focus,
.live-search-box:focus-within{
  border-color:#818cf8;

  box-shadow:
    0 0 0 3px
    rgba(99,102,241,.08);
}


/* =====================================================
   LIVE SECTIONS
===================================================== */

.live-now-section,
.live-upcoming-section{
  padding:0 0 28px;
}

.live-section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;

  gap:20px;

  margin-bottom:16px;
}

.live-section-head h2{
  margin-top:4px;

  font-family:"Poppins";

  font-size:22px;
}

.live-section-head p{
  margin-top:4px;

  color:var(--muted);

  font-size:12px;
}

.live-kicker{
  color:#dc2626;
}


/* =====================================================
   LIVE CLASS GRID
===================================================== */

.live-class-grid{
  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:14px;
}


/* =====================================================
   LIVE CLASS CARD
===================================================== */

.live-class-card{
  position:relative;

  display:flex;
  flex-direction:column;

  overflow:hidden;

  border:1px solid var(--border);
  border-radius:19px;

  background:var(--card);

  transition:
    transform .22s,
    border-color .22s,
    box-shadow .22s;
}

.live-class-card:hover{
  transform:translateY(-4px);

  border-color:#c7d2fe;

  box-shadow:
    0 16px 36px
    rgba(15,23,42,.07);
}


/* =====================================================
   CLASS VISUAL
===================================================== */

.live-class-visual{
  position:relative;

  height:150px;

  display:grid;
  place-items:center;

  overflow:hidden;

  background:
    linear-gradient(
      135deg,
      #dbeafe,
      #ede9fe
    );
}

.live-class-visual > span{
  font-size:44px;
}

.live-class-status{
  position:absolute;

  top:12px;
  left:12px;

  display:inline-flex;
  align-items:center;

  gap:5px;

  padding:5px 8px;

  border-radius:99px;

  font-size:10px;
  font-weight:800;

  text-transform:uppercase;
}

.live-class-status.live{
  background:#fee2e2;
  color:#b91c1c;
}

.live-class-status.upcoming{
  background:#dbeafe;
  color:#1d4ed8;
}

.live-class-status.recorded{
  background:#dcfce7;
  color:#166534;
}

.live-class-access{
  position:absolute;

  top:12px;
  right:12px;

  padding:5px 8px;

  border-radius:99px;

  font-size:10px;
  font-weight:800;
}

.live-class-access.free{
  background:#dcfce7;
  color:#166534;
}

.live-class-access.login{
  background:#dbeafe;
  color:#1d4ed8;
}

.live-class-access.premium{
  background:#fef3c7;
  color:#92400e;
}


/* =====================================================
   LIVE CLASS CONTENT
===================================================== */

.live-class-content{
  display:flex;
  flex-direction:column;

  flex:1;

  padding:17px;
}

.live-class-content > small{
  color:var(--primary);

  font-size:10px;
  font-weight:800;

  text-transform:uppercase;

  letter-spacing:.4px;
}

.live-class-content h3{
  margin-top:5px;

  font-size:16px;

  line-height:1.45;
}

.live-class-content > p{
  margin-top:6px;

  color:var(--muted);

  font-size:12px;

  line-height:1.6;
}


/* =====================================================
   LIVE CLASS META
===================================================== */

.live-class-meta{
  display:grid;

  grid-template-columns:
    repeat(2,1fr);

  gap:8px;

  margin-top:13px;
}

.live-class-meta div{
  padding:9px;

  border:1px solid var(--border);
  border-radius:11px;

  background:#f8fafc;
}

.live-class-meta small{
  display:block;

  color:var(--muted);

  font-size:10px;
  font-weight:700;
}

.live-class-meta strong{
  display:block;

  margin-top:2px;

  font-size:11px;
}


/* =====================================================
   CLASS PLATFORM
===================================================== */

.live-platform-row{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:10px;

  margin-top:12px;
}

.live-platform{
  display:flex;
  align-items:center;

  gap:7px;

  color:var(--muted);

  font-size:11px;
}

.live-platform strong{
  color:var(--text);
}


/* =====================================================
   CLASS ACTION
===================================================== */

.live-class-actions{
  display:flex;
  align-items:center;

  gap:8px;

  margin-top:auto;
  padding-top:15px;
}

.live-join-btn{
  flex:1;

  padding:10px 11px;

  border:none;
  border-radius:10px;

  background:
    linear-gradient(
      135deg,
      #2563eb,
      #7c3aed
    );

  color:#fff;

  text-align:center;

  font-size:11px;
  font-weight:800;

  cursor:pointer;
}

.live-join-btn.live{
  background:
    linear-gradient(
      135deg,
      #dc2626,
      #ef4444
    );
}

.live-secondary-btn{
  padding:10px 11px;

  border:1px solid var(--border);
  border-radius:10px;

  background:var(--card);

  color:var(--text);

  font-size:11px;
  font-weight:800;

  cursor:pointer;
}


/* =====================================================
   LOCKED CLASS
===================================================== */

.live-class-card.is-locked{
  border-color:#fde68a;
}


/* =====================================================
   DARK MODE
===================================================== */

body.dark .live-hero{
  background:#0b1120;
}

body.dark .live-hero-tags span{
  background:#182235;
  color:#cbd5e1;
}

body.dark .live-summary-grid article > span{
  background:#182235;
}

body.dark .live-class-meta div{
  background:#182235;
}

body.dark .live-search-box{
  background:var(--card);
}

body.dark .live-hero-visual{
  background:
    linear-gradient(
      135deg,
      #351d28,
      #1e293b
    );
}

body.dark .live-signal{
  background:#111827;
}


/* =====================================================
   LARGE TABLET / SMALL DESKTOP
===================================================== */

@media(max-width:1100px){

  .live-class-grid{
    grid-template-columns:
      repeat(2,1fr);
  }

  .live-filter-grid{
    grid-template-columns:
      1fr 1fr;
  }

  .live-search-box{
    grid-column:1/-1;
  }

}


/* =====================================================
   TABLET
===================================================== */

@media(max-width:850px){

  .live-summary-grid{
    grid-template-columns:
      repeat(2,1fr);
  }

  .live-hero-visual{
    width:145px;
    min-width:145px;
  }

}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:650px){

  .live-hero{
    padding:24px 0 15px;
  }

  .live-hero-card{
    align-items:flex-start;

    padding:21px;
  }

  .live-hero-content h1{
    font-size:27px;
  }

  .live-hero-content p{
    font-size:13px;
  }

  .live-hero-visual{
    width:80px;
    min-width:80px;
    height:90px;
  }

  .live-hero-icon{
    font-size:31px;
  }

  .live-signal{
    top:8px;
    left:8px;

    padding:4px 6px;

    font-size:8px;
  }


  /* SUMMARY */

  .live-summary-grid{
    grid-template-columns:
      repeat(2,1fr);

    gap:9px;
  }

  .live-summary-grid article{
    padding:13px;

    gap:8px;
  }

  .live-summary-grid article > span{
    width:38px;
    height:38px;

    font-size:17px;
  }


  /* FILTER */

  .live-filter-card{
    padding:18px;
  }

  .live-filter-head{
    align-items:flex-start;
  }

  .live-filter-grid{
    grid-template-columns:1fr;
  }

  .live-search-box{
    grid-column:auto;
  }


  /* GRID */

  .live-class-grid{
    grid-template-columns:1fr;
  }

  .live-class-visual{
    height:180px;
  }


  /* SECTION HEAD */

  .live-section-head{
    align-items:flex-start;
  }

}


/* =====================================================
   EXTRA SMALL MOBILE
===================================================== */

@media(max-width:390px){

  .live-hero-visual{
    display:none;
  }

  .live-summary-grid{
    grid-template-columns:1fr;
  }

  .live-section-head{
    flex-direction:column;
  }

}

/* =====================================================
   EXAMS HUB PAGE
===================================================== */

.exams-page{
  min-height:100vh;
  background:var(--bg);
}


/* =====================================================
   EXAMS HERO
===================================================== */

.exams-hero{
  padding:34px 0 20px;

  background:
    radial-gradient(
      circle at top left,
      rgba(37,99,235,.10),
      transparent 34%
    ),
    radial-gradient(
      circle at top right,
      rgba(124,58,237,.12),
      transparent 36%
    ),
    var(--bg);
}

.exams-hero-card{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:28px;

  padding:30px;

  border:1px solid var(--border);
  border-radius:24px;

  background:var(--card);

  box-shadow:
    0 18px 45px
    rgba(15,23,42,.06);
}

.exams-hero-content{
  min-width:0;
  flex:1;
}

.exams-hero-content h1{
  margin-top:5px;

  font-family:"Poppins";

  font-size:
    clamp(30px,4vw,42px);

  line-height:1.15;
}

.exams-hero-content p{
  max-width:760px;

  margin-top:10px;

  color:var(--muted);

  font-size:14px;

  line-height:1.7;
}


/* =====================================================
   HERO TAGS
===================================================== */

.exams-hero-tags{
  display:flex;
  align-items:center;
  flex-wrap:wrap;

  gap:8px;

  margin-top:17px;
}

.exams-hero-tags span{
  display:inline-flex;
  align-items:center;

  padding:7px 10px;

  border:1px solid var(--border);
  border-radius:99px;

  background:#f8fafc;

  color:#475569;

  font-size:11px;
  font-weight:700;
}


/* =====================================================
   HERO VISUAL
===================================================== */

.exams-hero-visual{
  width:170px;
  min-width:170px;
  height:145px;

  display:grid;
  place-items:center;

  border-radius:22px;

  background:
    linear-gradient(
      135deg,
      #dbeafe,
      #ede9fe
    );

  box-shadow:
    inset 0 0 0 1px
    rgba(99,102,241,.08);
}

.exams-hero-visual span{
  font-size:58px;
}


/* =====================================================
   EXAM SUMMARY
===================================================== */

.exam-summary-section{
  padding:0 0 22px;
}

.exam-summary-grid{
  display:grid;

  grid-template-columns:
    repeat(4,1fr);

  gap:12px;
}

.exam-summary-grid article{
  display:flex;
  align-items:center;

  gap:11px;

  padding:16px;

  border:1px solid var(--border);
  border-radius:17px;

  background:var(--card);

  transition:.22s;
}

.exam-summary-grid article:hover{
  transform:translateY(-3px);

  border-color:#c7d2fe;

  box-shadow:
    0 12px 30px
    rgba(15,23,42,.05);
}

.exam-summary-grid article > span{
  width:44px;
  height:44px;

  display:grid;
  place-items:center;

  flex-shrink:0;

  border-radius:13px;

  background:#eef2ff;

  font-size:20px;
}

.exam-summary-grid strong{
  display:block;

  font-family:"Poppins";

  color:var(--primary);

  font-size:20px;
}

.exam-summary-grid small{
  display:block;

  margin-top:2px;

  color:var(--muted);

  font-size:11px;
  font-weight:700;
}


/* =====================================================
   EXAM FILTER
===================================================== */

.exam-filter-section{
  padding:0 0 20px;
}

.exam-filter-card{
  padding:22px;

  border:1px solid var(--border);
  border-radius:20px;

  background:var(--card);

  box-shadow:
    0 12px 35px
    rgba(15,23,42,.04);
}

.exam-filter-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;

  gap:16px;

  padding-bottom:15px;
  margin-bottom:15px;

  border-bottom:1px solid var(--border);
}

.exam-filter-head h2{
  margin-top:4px;

  font-family:"Poppins";

  font-size:21px;
}

.exam-filter-grid{
  display:grid;

  grid-template-columns:
    minmax(280px,1fr)
    210px
    210px;

  gap:10px;
}


/* =====================================================
   SEARCH
===================================================== */

.exam-search-box{
  display:flex;
  align-items:center;

  gap:9px;

  padding:11px 13px;

  border:1px solid var(--border);
  border-radius:13px;

  background:var(--card);
}

.exam-search-box input{
  width:100%;

  border:none;
  outline:none;

  background:transparent;

  color:var(--text);

  font-size:12px;
}

.exam-search-box input::placeholder{
  color:#94a3b8;
}

.exam-filter-grid select{
  padding:11px;

  border:1px solid var(--border);
  border-radius:13px;

  outline:none;

  background:var(--card);

  color:var(--text);

  font-size:12px;
}

.exam-search-box:focus-within,
.exam-filter-grid select:focus{
  border-color:#818cf8;

  box-shadow:
    0 0 0 3px
    rgba(99,102,241,.08);
}


/* =====================================================
   EXAM MAIN SECTION
===================================================== */

.exam-main-section{
  padding:0 0 60px;
}

.exam-section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;

  gap:20px;

  margin-bottom:17px;
}

.exam-section-head h2{
  margin-top:4px;

  font-family:"Poppins";

  font-size:22px;
}

.exam-section-head p{
  margin-top:5px;

  color:var(--muted);

  font-size:12px;

  line-height:1.6;
}


/* =====================================================
   EXAM GRID
===================================================== */

.exam-grid{
  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:14px;
}


/* =====================================================
   EXAM CARD
===================================================== */

.exam-card{
  display:flex;
  flex-direction:column;

  min-height:100%;

  padding:19px;

  border:1px solid var(--border);
  border-radius:19px;

  background:var(--card);

  transition:
    transform .22s,
    border-color .22s,
    box-shadow .22s;
}

.exam-card:hover{
  transform:translateY(-4px);

  border-color:#c7d2fe;

  box-shadow:
    0 16px 36px
    rgba(15,23,42,.07);
}


/* =====================================================
   CARD TOP
===================================================== */

.exam-card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:10px;

  margin-bottom:15px;
}

.exam-card-icon{
  width:50px;
  height:50px;

  display:grid;
  place-items:center;

  border-radius:15px;

  background:
    linear-gradient(
      135deg,
      #eef2ff,
      #e0e7ff
    );

  font-size:23px;
}


/* =====================================================
   ACCESS BADGE
===================================================== */

.exam-access-badge{
  display:inline-flex;
  align-items:center;

  padding:6px 9px;

  border-radius:99px;

  font-size:10px;
  font-weight:800;

  text-transform:uppercase;
}

.exam-access-badge.free{
  background:#dcfce7;
  color:#166534;
}

.exam-access-badge.login{
  background:#dbeafe;
  color:#1d4ed8;
}

.exam-access-badge.premium{
  background:#fef3c7;
  color:#92400e;
}


/* =====================================================
   CARD CONTENT
===================================================== */

.exam-card-content{
  display:flex;
  flex-direction:column;

  flex:1;
}

.exam-card-content > small{
  color:var(--primary);

  font-size:10px;
  font-weight:800;

  letter-spacing:.5px;

  text-transform:uppercase;
}

.exam-card-content h3{
  margin-top:5px;

  font-family:"Poppins";

  font-size:20px;
}

.exam-card-content > p{
  margin-top:7px;

  color:var(--muted);

  font-size:13px;

  line-height:1.65;
}


/* =====================================================
   EXAM TAGS
===================================================== */

.exam-card-tags{
  display:flex;
  align-items:center;
  flex-wrap:wrap;

  gap:7px;

  margin-top:15px;
}

.exam-card-tags span{
  display:inline-flex;
  align-items:center;

  padding:6px 8px;

  border-radius:99px;

  background:#f1f5f9;

  color:#64748b;

  font-size:10px;
  font-weight:700;
}


/* =====================================================
   CARD ACTION
===================================================== */

.exam-card-actions{
  display:flex;
  align-items:center;

  gap:8px;

  margin-top:auto;
  padding-top:18px;
}

.exam-primary-btn{
  display:flex;
  align-items:center;
  justify-content:center;

  width:100%;

  padding:10px 12px;

  border-radius:11px;

  background:
    linear-gradient(
      135deg,
      #2563eb,
      #7c3aed
    );

  color:#fff;

  font-size:11px;
  font-weight:800;

  text-align:center;

  transition:.2s;
}

.exam-primary-btn:hover{
  transform:translateY(-1px);

  box-shadow:
    0 8px 18px
    rgba(79,70,229,.18);
}


/* =====================================================
   FUTURE EXAM CARD
===================================================== */

.future-exam-card{
  border-style:dashed;

  background:
    linear-gradient(
      135deg,
      rgba(248,250,252,.9),
      rgba(238,242,255,.8)
    );
}

.future-exam-card .exam-card-icon{
  background:#fff;
}


/* =====================================================
   DARK MODE
===================================================== */

body.dark .exams-hero{
  background:#0b1120;
}

body.dark .exams-hero-tags span{
  background:#182235;
  color:#cbd5e1;
}

body.dark .exams-hero-visual{
  background:
    linear-gradient(
      135deg,
      #172033,
      #1e293b
    );
}

body.dark .exam-summary-grid article > span{
  background:#182235;
}

body.dark .exam-card-icon{
  background:#182235;
}

body.dark .exam-card-tags span{
  background:#182235;
  color:#cbd5e1;
}

body.dark .future-exam-card{
  background:
    linear-gradient(
      135deg,
      #111827,
      #172033
    );
}

body.dark .future-exam-card .exam-card-icon{
  background:#0f172a;
}


/* =====================================================
   SMALL DESKTOP
===================================================== */

@media(max-width:1050px){

  .exam-grid{
    grid-template-columns:
      repeat(2,1fr);
  }

  .exam-filter-grid{
    grid-template-columns:
      1fr 1fr;
  }

  .exam-search-box{
    grid-column:1/-1;
  }

}


/* =====================================================
   TABLET
===================================================== */

@media(max-width:850px){

  .exam-summary-grid{
    grid-template-columns:
      repeat(2,1fr);
  }

  .exams-hero-visual{
    width:140px;
    min-width:140px;
    height:130px;
  }

}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:650px){

  .exams-hero{
    padding:24px 0 15px;
  }

  .exams-hero-card{
    align-items:flex-start;

    padding:21px;
  }

  .exams-hero-content h1{
    font-size:27px;
  }

  .exams-hero-content p{
    font-size:13px;
  }

  .exams-hero-visual{
    width:80px;
    min-width:80px;
    height:90px;
  }

  .exams-hero-visual span{
    font-size:35px;
  }


  /* SUMMARY */

  .exam-summary-grid{
    grid-template-columns:
      repeat(2,1fr);

    gap:9px;
  }

  .exam-summary-grid article{
    padding:13px;
  }

  .exam-summary-grid article > span{
    width:38px;
    height:38px;

    font-size:17px;
  }


  /* FILTER */

  .exam-filter-card{
    padding:18px;
  }

  .exam-filter-head{
    align-items:flex-start;
  }

  .exam-filter-grid{
    grid-template-columns:1fr;
  }

  .exam-search-box{
    grid-column:auto;
  }


  /* EXAM GRID */

  .exam-grid{
    grid-template-columns:1fr;
  }

  .exam-card{
    padding:17px;
  }


  /* SECTION HEAD */

  .exam-section-head{
    align-items:flex-start;
  }

}


/* =====================================================
   EXTRA SMALL MOBILE
===================================================== */

@media(max-width:390px){

  .exams-hero-visual{
    display:none;
  }

  .exam-summary-grid{
    grid-template-columns:1fr;
  }

  .exam-section-head{
    flex-direction:column;
  }

}

/* =====================================================
   DYNAMIC EXAM DETAILS PAGE
===================================================== */

.exam-details-page{
  min-height:100vh;
  background:var(--bg);
}


/* =====================================================
   BREADCRUMB
===================================================== */

.exam-detail-breadcrumb-section{
  padding:22px 0 12px;
}


/* =====================================================
   EXAM HERO
===================================================== */

.exam-detail-hero{
  padding:0 0 22px;
}

.exam-detail-hero-card{
  display:grid;

  grid-template-columns:
    minmax(0,1fr) 330px;

  gap:26px;

  align-items:center;

  padding:28px;

  border:1px solid var(--border);
  border-radius:24px;

  background:var(--card);

  box-shadow:
    0 18px 45px
    rgba(15,23,42,.06);
}

.exam-detail-hero-content{
  min-width:0;
}


/* =====================================================
   HERO BADGES
===================================================== */

.exam-detail-badges{
  display:flex;
  align-items:center;
  flex-wrap:wrap;

  gap:8px;

  margin-bottom:14px;
}

.exam-detail-badges > span{
  display:inline-flex;
  align-items:center;

  padding:6px 9px;

  border-radius:99px;

  background:#f1f5f9;

  color:#64748b;

  font-size:10px;
  font-weight:800;
}


/* =====================================================
   TITLE
===================================================== */

.exam-detail-title-row{
  display:flex;
  align-items:center;

  gap:14px;
}

.exam-detail-main-icon{
  width:60px;
  height:60px;

  display:grid;
  place-items:center;

  flex-shrink:0;

  border-radius:17px;

  background:
    linear-gradient(
      135deg,
      #eef2ff,
      #e0e7ff
    );

  font-size:27px;
}

.exam-detail-title-row h1{
  font-family:"Poppins";

  font-size:
    clamp(29px,4vw,42px);

  line-height:1.1;
}

.exam-detail-title-row h2{
  margin-top:4px;

  color:var(--muted);

  font-size:14px;
  font-weight:600;

  line-height:1.5;
}

.exam-detail-hero-content > p{
  max-width:720px;

  margin-top:14px;

  color:var(--muted);

  font-size:14px;

  line-height:1.7;
}


/* =====================================================
   QUICK TAGS
===================================================== */

.exam-detail-quick-tags{
  display:flex;
  align-items:center;
  flex-wrap:wrap;

  gap:8px;

  margin-top:16px;
}

.exam-detail-quick-tags span{
  display:inline-flex;
  align-items:center;

  padding:7px 10px;

  border:1px solid var(--border);
  border-radius:99px;

  background:#f8fafc;

  color:#475569;

  font-size:10px;
  font-weight:700;
}


/* =====================================================
   HERO SUMMARY
===================================================== */

.exam-detail-summary-card{
  padding:20px;

  border:1px solid var(--border);
  border-radius:19px;

  background:
    linear-gradient(
      135deg,
      #f8faff,
      #f5f3ff
    );
}

.exam-detail-resource-total{
  margin-top:7px;
}

.exam-detail-resource-total strong{
  display:block;

  font-family:"Poppins";

  color:var(--primary);

  font-size:34px;
}

.exam-detail-resource-total span{
  display:block;

  margin-top:1px;

  color:var(--muted);

  font-size:11px;
}

.exam-detail-summary-grid{
  display:grid;

  grid-template-columns:
    repeat(2,1fr);

  gap:9px;

  margin-top:16px;
}

.exam-detail-summary-grid div{
  padding:12px;

  border:1px solid var(--border);
  border-radius:12px;

  background:rgba(255,255,255,.75);
}

.exam-detail-summary-grid strong{
  display:block;

  color:var(--primary);

  font-size:17px;
}

.exam-detail-summary-grid small{
  display:block;

  margin-top:2px;

  color:var(--muted);

  font-size:10px;
  font-weight:700;
}


/* =====================================================
   QUICK NAVIGATION
===================================================== */

.exam-detail-nav-section{
  padding:0 0 20px;
}

.exam-detail-nav{
  display:flex;
  align-items:center;

  gap:8px;

  padding:9px;

  overflow-x:auto;

  border:1px solid var(--border);
  border-radius:15px;

  background:var(--card);

  scrollbar-width:none;
}

.exam-detail-nav::-webkit-scrollbar{
  display:none;
}

.exam-detail-nav a{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  flex-shrink:0;

  padding:8px 11px;

  border-radius:9px;

  color:var(--muted);

  font-size:11px;
  font-weight:700;

  transition:.2s;
}

.exam-detail-nav a:hover{
  background:#eef2ff;

  color:var(--primary);
}


/* =====================================================
   MAIN LAYOUT
===================================================== */

.exam-detail-main-section{
  padding:0 0 70px;
}

.exam-detail-layout{
  display:grid;

  grid-template-columns:
    minmax(0,1fr) 300px;

  gap:22px;

  align-items:start;
}

.exam-detail-content{
  display:flex;
  flex-direction:column;

  gap:17px;
}

.exam-detail-sidebar{
  position:sticky;

  top:92px;

  display:flex;
  flex-direction:column;

  gap:13px;
}


/* =====================================================
   PANEL
===================================================== */

.exam-detail-panel{
  padding:23px;

  border:1px solid var(--border);
  border-radius:20px;

  background:var(--card);
}

.exam-detail-panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:15px;

  padding-bottom:14px;
  margin-bottom:16px;

  border-bottom:1px solid var(--border);
}

.exam-detail-panel-head h2{
  margin-top:3px;

  font-family:"Poppins";

  font-size:20px;
}

.exam-section-icon{
  width:42px;
  height:42px;

  display:grid;
  place-items:center;

  flex-shrink:0;

  border-radius:12px;

  background:#eef2ff;

  font-size:18px;
}


/* =====================================================
   GENERAL TEXT
===================================================== */

.exam-detail-text{
  color:var(--muted);

  font-size:13px;

  line-height:1.75;
}

.exam-detail-text p + p{
  margin-top:10px;
}

.exam-detail-text ul,
.exam-detail-text ol{
  padding-left:20px;

  margin-top:10px;
}

.exam-detail-text li{
  margin:6px 0;
}


/* =====================================================
   IMPORTANT DATES
===================================================== */

.exam-date-list{
  display:flex;
  flex-direction:column;

  gap:9px;
}

.exam-date-item{
  display:grid;

  grid-template-columns:
    130px 1fr auto;

  align-items:center;

  gap:12px;

  padding:13px;

  border:1px solid var(--border);
  border-radius:13px;

  background:#f8fafc;
}

.exam-date-item-date{
  color:var(--primary);

  font-size:12px;
  font-weight:800;
}

.exam-date-item-content strong{
  display:block;

  font-size:13px;
}

.exam-date-item-content p{
  margin-top:2px;

  color:var(--muted);

  font-size:11px;
}

.exam-date-status{
  display:inline-flex;
  align-items:center;

  padding:5px 8px;

  border-radius:99px;

  background:#eef2ff;

  color:#4f46e5;

  font-size:9px;
  font-weight:800;
}


/* =====================================================
   EXAM PATTERN
===================================================== */

.exam-pattern-container{
  overflow-x:auto;
}

.exam-pattern-table{
  width:100%;

  border-collapse:collapse;

  min-width:580px;
}

.exam-pattern-table th,
.exam-pattern-table td{
  padding:11px 12px;

  border-bottom:1px solid var(--border);

  text-align:left;

  font-size:11px;
}

.exam-pattern-table th{
  background:#f8fafc;

  color:var(--text);

  font-weight:800;
}

.exam-pattern-table td{
  color:var(--muted);
}


/* =====================================================
   EXAM RESOURCE GRID
===================================================== */

.exam-resource-grid{
  display:grid;

  grid-template-columns:
    repeat(2,1fr);

  gap:10px;
}

.exam-resource-card{
  display:flex;
  align-items:center;

  gap:11px;

  padding:14px;

  border:1px solid var(--border);
  border-radius:14px;

  background:#f8fafc;

  transition:.2s;
}

.exam-resource-card:hover{
  transform:translateY(-2px);

  border-color:#c7d2fe;

  background:#f8faff;
}

.exam-resource-card-icon{
  width:42px;
  height:42px;

  display:grid;
  place-items:center;

  flex-shrink:0;

  border-radius:12px;

  background:#eef2ff;

  font-size:18px;
}

.exam-resource-card-content{
  min-width:0;
  flex:1;
}

.exam-resource-card-content small{
  display:block;

  color:var(--primary);

  font-size:9px;
  font-weight:800;
}

.exam-resource-card-content strong{
  display:block;

  margin-top:2px;

  font-size:13px;

  line-height:1.45;
}

.exam-resource-card-content p{
  margin-top:3px;

  color:var(--muted);

  font-size:11px;
}

.exam-resource-card-action{
  flex-shrink:0;

  color:var(--primary);

  font-size:18px;
}


/* =====================================================
   PREPARATION GRID
===================================================== */

.exam-preparation-grid{
  display:grid;

  grid-template-columns:
    repeat(2,1fr);

  gap:10px;
}

.exam-preparation-card{
  display:flex;
  align-items:center;

  gap:11px;

  padding:15px;

  border:1px solid var(--border);
  border-radius:14px;

  background:#f8fafc;

  color:var(--text);

  text-align:left;

  cursor:pointer;

  transition:.2s;
}

.exam-preparation-card:hover{
  transform:translateY(-2px);

  border-color:#c7d2fe;

  background:#eef2ff;
}

.exam-preparation-card > span{
  width:42px;
  height:42px;

  display:grid;
  place-items:center;

  flex-shrink:0;

  border-radius:12px;

  background:#fff;

  font-size:18px;
}

.exam-preparation-card strong{
  display:block;

  font-size:13px;
}

.exam-preparation-card small{
  display:block;

  margin-top:2px;

  color:var(--muted);

  font-size:10px;
}


/* =====================================================
   NOTIFICATION LIST
===================================================== */

.exam-notification-list{
  display:flex;
  flex-direction:column;

  gap:9px;
}

.exam-notification-item{
  display:grid;

  grid-template-columns:
    auto 1fr auto;

  align-items:start;

  gap:11px;

  padding:13px;

  border:1px solid var(--border);
  border-radius:13px;

  background:#f8fafc;
}

.exam-notification-icon{
  width:38px;
  height:38px;

  display:grid;
  place-items:center;

  border-radius:11px;

  background:#eef2ff;

  font-size:16px;
}

.exam-notification-content strong{
  display:block;

  font-size:13px;
}

.exam-notification-content p{
  margin-top:3px;

  color:var(--muted);

  font-size:11px;

  line-height:1.55;
}

.exam-notification-date{
  color:var(--muted);

  font-size:9px;
  font-weight:700;

  white-space:nowrap;
}


/* =====================================================
   SMALL EMPTY STATE
===================================================== */

.exam-detail-empty-small{
  padding:20px;

  border:1px dashed var(--border);
  border-radius:13px;

  background:#f8fafc;

  color:var(--muted);

  text-align:center;

  font-size:11px;
}


/* =====================================================
   SIDEBAR QUICK LINKS
===================================================== */

.exam-side-links{
  display:flex;
  flex-direction:column;

  gap:6px;
}

.exam-side-links a{
  display:flex;
  align-items:center;

  gap:8px;

  padding:9px 10px;

  border-radius:9px;

  color:var(--text);

  font-size:11px;
  font-weight:700;

  transition:.2s;
}

.exam-side-links a:hover{
  background:#eef2ff;

  color:var(--primary);
}


/* =====================================================
   OFFICIAL LINKS
===================================================== */

.exam-official-links{
  display:flex;
  flex-direction:column;

  gap:7px;
}

.exam-official-links p{
  color:var(--muted);

  font-size:11px;

  line-height:1.55;
}

.exam-official-link{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:8px;

  padding:9px 10px;

  border:1px solid var(--border);
  border-radius:9px;

  color:var(--text);

  font-size:10px;
  font-weight:700;
}

.exam-official-link:hover{
  border-color:#c7d2fe;

  color:var(--primary);
}


/* =====================================================
   FOLLOW EXAM
===================================================== */

.exam-follow-card{
  padding:19px;

  border:1px solid #c7d2fe;
  border-radius:17px;

  background:
    linear-gradient(
      135deg,
      #eef2ff,
      #f5f3ff
    );
}

.exam-follow-card > span{
  display:block;

  margin-bottom:6px;

  font-size:26px;
}

.exam-follow-card h3{
  font-size:14px;
}

.exam-follow-card p{
  margin-top:5px;

  color:var(--muted);

  font-size:11px;

  line-height:1.55;
}

.exam-follow-card .btn{
  width:100%;

  margin-top:13px;
}


/* =====================================================
   FOLLOWED STATE
===================================================== */

.exam-follow-card.followed{
  border-color:#bbf7d0;

  background:#f0fdf4;
}

.exam-follow-card.followed .btn{
  background:#059669;
}


/* =====================================================
   LOCKED EXAM PAGE
===================================================== */

.exam-detail-lock{
  padding:30px;

  border:1px solid #fde68a;
  border-radius:20px;

  background:#fffbeb;

  text-align:center;
}

.exam-detail-lock > span{
  display:block;

  font-size:42px;
}

.exam-detail-lock h2{
  margin-top:7px;

  font-size:19px;
}

.exam-detail-lock p{
  max-width:520px;

  margin:5px auto 14px;

  color:var(--muted);

  font-size:12px;

  line-height:1.6;
}


/* =====================================================
   DARK MODE
===================================================== */

body.dark .exam-detail-main-icon,
body.dark .exam-section-icon{
  background:#182235;
}

body.dark .exam-detail-quick-tags span{
  background:#182235;

  color:#cbd5e1;
}

body.dark .exam-detail-summary-card{
  background:
    linear-gradient(
      135deg,
      #111827,
      #172033
    );
}

body.dark .exam-detail-summary-grid div{
  background:#182235;
}

body.dark .exam-detail-nav a:hover{
  background:#182235;
}

body.dark .exam-date-item,
body.dark .exam-resource-card,
body.dark .exam-preparation-card,
body.dark .exam-notification-item,
body.dark .exam-detail-empty-small{
  background:#182235;
}

body.dark .exam-pattern-table th{
  background:#182235;
}

body.dark .exam-preparation-card > span{
  background:#111827;
}

body.dark .exam-preparation-card:hover,
body.dark .exam-side-links a:hover{
  background:#1e293b;
}

body.dark .exam-follow-card{
  background:#111827;

  border-color:#334155;
}

body.dark .exam-follow-card.followed{
  background:#102419;

  border-color:#166534;
}


/* =====================================================
   SMALL DESKTOP
===================================================== */

@media(max-width:1050px){

  .exam-detail-hero-card{
    grid-template-columns:
      minmax(0,1fr) 290px;
  }

  .exam-detail-layout{
    grid-template-columns:
      minmax(0,1fr) 270px;
  }

}


/* =====================================================
   TABLET
===================================================== */

@media(max-width:850px){

  .exam-detail-hero-card{
    grid-template-columns:1fr;
  }

  .exam-detail-summary-card{
    max-width:520px;
  }

  .exam-detail-layout{
    grid-template-columns:1fr;
  }

  .exam-detail-sidebar{
    position:static;

    display:grid;

    grid-template-columns:
      repeat(2,1fr);
  }

  .exam-follow-card{
    grid-column:1/-1;
  }

}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:650px){

  .exam-detail-breadcrumb-section{
    padding-top:17px;
  }

  .exam-detail-hero-card{
    padding:20px;
  }

  .exam-detail-title-row{
    align-items:flex-start;
  }

  .exam-detail-main-icon{
    width:50px;
    height:50px;

    border-radius:14px;

    font-size:22px;
  }

  .exam-detail-title-row h1{
    font-size:26px;
  }

  .exam-detail-title-row h2{
    font-size:12px;
  }

  .exam-detail-hero-content > p{
    font-size:13px;
  }


  /* SUMMARY */

  .exam-detail-summary-card{
    padding:17px;
  }


  /* PANELS */

  .exam-detail-panel{
    padding:18px;
  }

  .exam-detail-panel-head h2{
    font-size:18px;
  }


  /* DATES */

  .exam-date-item{
    grid-template-columns:1fr;
  }

  .exam-date-status{
    width:max-content;
  }


  /* RESOURCE */

  .exam-resource-grid{
    grid-template-columns:1fr;
  }


  /* PREPARATION */

  .exam-preparation-grid{
    grid-template-columns:1fr;
  }


  /* NOTIFICATIONS */

  .exam-notification-item{
    grid-template-columns:
      auto 1fr;
  }

  .exam-notification-date{
    grid-column:2;
  }


  /* SIDEBAR */

  .exam-detail-sidebar{
    grid-template-columns:1fr;
  }

  .exam-follow-card{
    grid-column:auto;
  }

}


/* =====================================================
   EXTRA SMALL MOBILE
===================================================== */

@media(max-width:390px){

  .exam-detail-title-row{
    flex-direction:column;
  }

  .exam-detail-summary-grid{
    grid-template-columns:1fr;
  }

  .exam-detail-panel{
    padding:16px;
  }

}

/* =====================================================
   UNIVERSAL SEARCH PAGE
===================================================== */

.search-page{
  min-height:100vh;
  background:var(--bg);
}


/* =====================================================
   SEARCH HERO
===================================================== */

.search-hero{
  padding:34px 0 22px;

  background:
    radial-gradient(
      circle at top left,
      rgba(37,99,235,.10),
      transparent 34%
    ),
    radial-gradient(
      circle at top right,
      rgba(124,58,237,.10),
      transparent 34%
    ),
    var(--bg);
}

.search-hero-card{
  display:grid;

  grid-template-columns:
    minmax(0,1fr) 180px;

  align-items:center;

  gap:28px;

  padding:30px;

  border:1px solid var(--border);
  border-radius:24px;

  background:var(--card);

  box-shadow:
    0 18px 45px
    rgba(15,23,42,.06);
}

.search-hero-content{
  min-width:0;
}

.search-hero-content h1{
  margin-top:5px;

  font-family:"Poppins";

  font-size:
    clamp(30px,4vw,43px);

  line-height:1.15;
}

.search-hero-content > p{
  max-width:760px;

  margin-top:10px;

  color:var(--muted);

  font-size:14px;

  line-height:1.7;
}


/* =====================================================
   MAIN GLOBAL SEARCH BOX
===================================================== */

.global-search-box{
  display:grid;

  grid-template-columns:
    auto minmax(0,1fr) auto;

  align-items:center;

  gap:10px;

  max-width:850px;

  margin-top:20px;

  padding:7px 7px 7px 15px;

  border:1px solid var(--border);
  border-radius:16px;

  background:var(--bg);

  transition:.2s;
}

.global-search-box:focus-within{
  border-color:#818cf8;

  box-shadow:
    0 0 0 4px
    rgba(99,102,241,.09);
}

.global-search-icon{
  font-size:18px;
}

.global-search-box input{
  width:100%;

  padding:9px 2px;

  border:none;
  outline:none;

  background:transparent;

  color:var(--text);

  font-size:13px;
}

.global-search-box input::placeholder{
  color:#94a3b8;
}

.global-search-box button{
  padding:11px 18px;

  border:none;
  border-radius:11px;

  background:
    linear-gradient(
      135deg,
      #2563eb,
      #7c3aed
    );

  color:#fff;

  font-size:11px;
  font-weight:800;

  cursor:pointer;

  transition:.2s;
}

.global-search-box button:hover{
  transform:translateY(-1px);

  box-shadow:
    0 8px 18px
    rgba(79,70,229,.18);
}


/* =====================================================
   POPULAR SEARCH
===================================================== */

.search-popular-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;

  gap:7px;

  margin-top:13px;
}

.search-popular-row small{
  margin-right:2px;

  color:var(--muted);

  font-size:10px;
  font-weight:700;
}

.search-popular-row button{
  padding:6px 9px;

  border:1px solid var(--border);
  border-radius:99px;

  background:#f8fafc;

  color:#475569;

  font-size:10px;
  font-weight:700;

  cursor:pointer;

  transition:.2s;
}

.search-popular-row button:hover{
  border-color:#c7d2fe;

  background:#eef2ff;

  color:var(--primary);
}


/* =====================================================
   SEARCH HERO VISUAL
===================================================== */

.search-hero-visual{
  width:160px;
  height:145px;

  display:grid;
  place-items:center;

  justify-self:end;

  border-radius:22px;

  background:
    linear-gradient(
      135deg,
      #dbeafe,
      #ede9fe
    );

  box-shadow:
    inset 0 0 0 1px
    rgba(99,102,241,.08);
}

.search-hero-visual span{
  font-size:56px;
}


/* =====================================================
   SECTION HEAD
===================================================== */

.search-section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;

  gap:16px;

  margin-bottom:15px;
}

.search-section-head h2{
  margin-top:4px;

  font-family:"Poppins";

  font-size:21px;
}


/* =====================================================
   QUICK SEARCH
===================================================== */

.search-quick-section{
  padding:0 0 22px;
}

.search-quick-grid{
  display:grid;

  grid-template-columns:
    repeat(6,1fr);

  gap:10px;
}

.search-quick-card{
  display:flex;
  align-items:center;

  gap:9px;

  min-width:0;

  padding:14px;

  border:1px solid var(--border);
  border-radius:15px;

  background:var(--card);

  color:var(--text);

  text-align:left;

  cursor:pointer;

  transition:
    transform .2s,
    border-color .2s,
    background .2s,
    box-shadow .2s;
}

.search-quick-card:hover{
  transform:translateY(-3px);

  border-color:#c7d2fe;

  background:#f8faff;

  box-shadow:
    0 10px 24px
    rgba(15,23,42,.05);
}

.search-quick-card.active{
  border-color:#818cf8;

  background:#eef2ff;
}

.search-quick-card > span{
  width:39px;
  height:39px;

  display:grid;
  place-items:center;

  flex-shrink:0;

  border-radius:11px;

  background:#eef2ff;

  font-size:17px;
}

.search-quick-card div{
  min-width:0;
}

.search-quick-card strong{
  display:block;

  font-size:12px;

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.search-quick-card small{
  display:block;

  margin-top:2px;

  color:var(--muted);

  font-size:9px;

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}


/* =====================================================
   FILTER SECTION
===================================================== */

.search-filter-section{
  padding:0 0 22px;
}

.search-filter-card{
  padding:21px;

  border:1px solid var(--border);
  border-radius:19px;

  background:var(--card);

  box-shadow:
    0 12px 35px
    rgba(15,23,42,.04);
}

.search-filter-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;

  gap:15px;

  padding-bottom:14px;
  margin-bottom:15px;

  border-bottom:1px solid var(--border);
}

.search-filter-head h2{
  margin-top:3px;

  font-family:"Poppins";

  font-size:20px;
}


/* =====================================================
   FILTER GRID
===================================================== */

.search-filter-grid{
  display:grid;

  grid-template-columns:
    repeat(4,1fr);

  gap:10px;
}

.search-filter-field{
  display:flex;
  flex-direction:column;

  gap:5px;
}

.search-filter-field label{
  color:var(--muted);

  font-size:10px;
  font-weight:800;
}

.search-filter-field select{
  width:100%;

  padding:11px;

  border:1px solid var(--border);
  border-radius:12px;

  outline:none;

  background:var(--card);

  color:var(--text);

  font-size:11px;
}

.search-filter-field select:focus{
  border-color:#818cf8;

  box-shadow:
    0 0 0 3px
    rgba(99,102,241,.08);
}


/* =====================================================
   RESULTS SECTION
===================================================== */

.search-results-section{
  padding:0 0 25px;
}

.search-results-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;

  gap:18px;

  margin-bottom:16px;
}

.search-results-head h2{
  margin-top:4px;

  font-family:"Poppins";

  font-size:22px;
}

.search-results-head p{
  margin-top:4px;

  color:var(--muted);

  font-size:11px;

  line-height:1.6;
}


/* =====================================================
   RESULT COUNT
===================================================== */

.search-result-count-box{
  min-width:82px;

  padding:11px 14px;

  border:1px solid var(--border);
  border-radius:13px;

  background:var(--card);

  text-align:center;
}

.search-result-count-box strong{
  display:block;

  color:var(--primary);

  font-family:"Poppins";

  font-size:20px;
}

.search-result-count-box span{
  display:block;

  margin-top:1px;

  color:var(--muted);

  font-size:9px;
  font-weight:700;
}


/* =====================================================
   SEARCH STATE
===================================================== */

.search-state-card{
  padding:42px 20px;

  border:1px dashed var(--border);
  border-radius:18px;

  background:var(--card);

  text-align:center;
}

.search-state-card > span{
  display:block;

  margin-bottom:8px;

  font-size:38px;
}

.search-state-card h3{
  font-family:"Poppins";

  font-size:17px;
}

.search-state-card p{
  max-width:480px;

  margin:5px auto 0;

  color:var(--muted);

  font-size:11px;

  line-height:1.6;
}


/* =====================================================
   RESULTS GRID
===================================================== */

.search-results-grid{
  display:grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:12px;
}


/* =====================================================
   SEARCH RESULT CARD
===================================================== */

.search-result-card{
  display:flex;
  flex-direction:column;

  min-height:100%;

  padding:16px;

  border:1px solid var(--border);
  border-radius:17px;

  background:var(--card);

  transition:
    transform .2s,
    border-color .2s,
    box-shadow .2s;
}

.search-result-card:hover{
  transform:translateY(-3px);

  border-color:#c7d2fe;

  box-shadow:
    0 12px 28px
    rgba(15,23,42,.06);
}

.search-result-card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:8px;

  margin-bottom:11px;
}

.search-result-icon{
  width:42px;
  height:42px;

  display:grid;
  place-items:center;

  flex-shrink:0;

  border-radius:12px;

  background:#eef2ff;

  font-size:18px;
}

.search-result-badges{
  display:flex;
  align-items:center;
  flex-wrap:wrap;

  justify-content:flex-end;

  gap:5px;
}

.search-result-type-badge,
.search-result-access-badge{
  display:inline-flex;
  align-items:center;

  padding:5px 7px;

  border-radius:99px;

  font-size:9px;
  font-weight:800;
}

.search-result-type-badge{
  background:#eef2ff;
  color:#4f46e5;
}

.search-result-access-badge.free{
  background:#dcfce7;
  color:#166534;
}

.search-result-access-badge.login{
  background:#dbeafe;
  color:#1d4ed8;
}

.search-result-access-badge.premium{
  background:#fef3c7;
  color:#92400e;
}


/* =====================================================
   RESULT CARD CONTENT
===================================================== */

.search-result-card-content{
  display:flex;
  flex-direction:column;

  flex:1;
}

.search-result-card-content small{
  color:var(--primary);

  font-size:9px;
  font-weight:800;

  text-transform:uppercase;
}

.search-result-card-content h3{
  margin-top:4px;

  font-family:"Poppins";

  font-size:15px;

  line-height:1.4;
}

.search-result-card-content p{
  margin-top:5px;

  color:var(--muted);

  font-size:11px;

  line-height:1.6;
}

.search-result-path{
  display:flex;
  align-items:center;
  flex-wrap:wrap;

  gap:5px;

  margin-top:10px;
}

.search-result-path span{
  padding:4px 6px;

  border-radius:7px;

  background:#f1f5f9;

  color:#64748b;

  font-size:9px;
  font-weight:700;
}


/* =====================================================
   SEARCH RESULT ACTION
===================================================== */

.search-result-actions{
  display:flex;
  align-items:center;

  gap:7px;

  margin-top:auto;
  padding-top:13px;
}

.search-result-open-btn{
  display:flex;
  align-items:center;
  justify-content:center;

  width:100%;

  padding:9px 10px;

  border:none;
  border-radius:10px;

  background:
    linear-gradient(
      135deg,
      #2563eb,
      #7c3aed
    );

  color:#fff;

  font-size:10px;
  font-weight:800;

  cursor:pointer;

  transition:.2s;
}

.search-result-open-btn:hover{
  transform:translateY(-1px);
}


/* =====================================================
   SEARCH SUMMARY
===================================================== */

.search-summary-section{
  padding:0 0 55px;
}

.search-summary-grid{
  display:grid;

  grid-template-columns:
    repeat(5,1fr);

  gap:10px;
}

.search-summary-grid article{
  display:flex;
  align-items:center;

  gap:9px;

  padding:14px;

  border:1px solid var(--border);
  border-radius:14px;

  background:var(--card);
}

.search-summary-grid article > span{
  width:39px;
  height:39px;

  display:grid;
  place-items:center;

  flex-shrink:0;

  border-radius:11px;

  background:#eef2ff;

  font-size:17px;
}

.search-summary-grid strong{
  display:block;

  color:var(--primary);

  font-family:"Poppins";

  font-size:17px;
}

.search-summary-grid small{
  display:block;

  margin-top:1px;

  color:var(--muted);

  font-size:9px;
  font-weight:700;
}


/* =====================================================
   HIGHLIGHT SEARCH TERM
===================================================== */

.search-highlight{
  padding:0 2px;

  border-radius:3px;

  background:#fef08a;

  color:#713f12;

  font-weight:700;
}


/* =====================================================
   LOADING STATE
===================================================== */

.search-loading{
  display:flex;
  align-items:center;
  justify-content:center;

  gap:9px;

  padding:35px;

  color:var(--muted);

  font-size:11px;
}

.search-loading-spinner{
  width:20px;
  height:20px;

  border:2px solid var(--border);
  border-top-color:var(--primary);

  border-radius:50%;

  animation:
    searchSpinner .7s linear infinite;
}

@keyframes searchSpinner{

  to{
    transform:rotate(360deg);
  }

}


/* =====================================================
   DARK MODE
===================================================== */

body.dark .search-hero{
  background:#0b1120;
}

body.dark .search-hero-visual{
  background:
    linear-gradient(
      135deg,
      #172033,
      #1e293b
    );
}

body.dark .search-popular-row button,
body.dark .search-result-path span{
  background:#182235;

  color:#cbd5e1;
}

body.dark .search-popular-row button:hover,
body.dark .search-quick-card:hover,
body.dark .search-quick-card.active{
  background:#1e293b;
}

body.dark .search-quick-card > span,
body.dark .search-result-icon,
body.dark .search-summary-grid article > span{
  background:#182235;
}

body.dark .search-highlight{
  background:#854d0e;

  color:#fef9c3;
}


/* =====================================================
   SMALL DESKTOP
===================================================== */

@media(max-width:1100px){

  .search-quick-grid{
    grid-template-columns:
      repeat(3,1fr);
  }

  .search-results-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

}


/* =====================================================
   TABLET
===================================================== */

@media(max-width:850px){

  .search-hero-card{
    grid-template-columns:
      minmax(0,1fr) 130px;
  }

  .search-hero-visual{
    width:125px;
    height:125px;
  }

  .search-hero-visual span{
    font-size:45px;
  }

  .search-filter-grid{
    grid-template-columns:
      repeat(2,1fr);
  }

  .search-summary-grid{
    grid-template-columns:
      repeat(3,1fr);
  }

}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:650px){

  .search-hero{
    padding:24px 0 17px;
  }

  .search-hero-card{
    grid-template-columns:1fr;

    padding:20px;
  }

  .search-hero-visual{
    display:none;
  }

  .search-hero-content h1{
    font-size:27px;
  }

  .search-hero-content > p{
    font-size:13px;
  }


  /* GLOBAL SEARCH */

  .global-search-box{
    grid-template-columns:
      auto minmax(0,1fr);

    padding:8px 10px;
  }

  .global-search-box button{
    grid-column:1/-1;

    width:100%;

    margin-top:2px;
  }


  /* QUICK */

  .search-quick-grid{
    grid-template-columns:
      repeat(2,1fr);
  }


  /* FILTER */

  .search-filter-card{
    padding:17px;
  }

  .search-filter-head{
    align-items:flex-start;
  }

  .search-filter-grid{
    grid-template-columns:1fr;
  }


  /* RESULT */

  .search-results-head{
    align-items:flex-start;
  }

  .search-results-grid{
    grid-template-columns:1fr;
  }


  /* SUMMARY */

  .search-summary-grid{
    grid-template-columns:
      repeat(2,1fr);
  }

}


/* =====================================================
   EXTRA SMALL MOBILE
===================================================== */

@media(max-width:390px){

  .search-quick-grid{
    grid-template-columns:1fr;
  }

  .search-results-head{
    flex-direction:column;
  }

  .search-result-count-box{
    width:100%;
  }

  .search-summary-grid{
    grid-template-columns:1fr;
  }

}

/* =====================================================
   GOURAV STUDY ZONE 2.0
   GLOBAL READABLE TYPOGRAPHY SYSTEM

   PURPOSE:
   - Stable readable text on every page
   - No tiny 8px / 9px / 10px text
   - Better desktop + laptop + tablet + mobile reading
   - Applies to existing and future student pages
===================================================== */


/* =====================================================
   BASE TEXT
===================================================== */

html{
  font-size:16px;
}

body{
  font-size:16px;
  line-height:1.6;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}


/* =====================================================
   NORMAL PARAGRAPH / CONTENT
===================================================== */

p,
li,
.exam-detail-text,
.course-description,
.resource-description,
.search-result-card-content p,
.exam-card-content > p,
.exam-detail-hero-content > p,
.search-hero-content > p,
.exams-hero-content p,
.search-results-head p,
.exam-section-head p{
  font-size:14px !important;
  line-height:1.65 !important;
}


/* =====================================================
   SMALL TEXT / META
===================================================== */

small,
label,
.section-kicker,
.search-filter-field label,
.exam-card-content > small,
.search-result-card-content small,
.course-card small,
.library-resource-card small{
  font-size:12px !important;
  line-height:1.45 !important;
}


/* =====================================================
   NAVIGATION
===================================================== */

.desktop-nav a,
.mobile-menu a{
  font-size:14px !important;
  font-weight:700;
}

.brand strong{
  font-size:18px;
}

.brand small{
  font-size:12px !important;
}


/* =====================================================
   FORM CONTROLS

   VERY IMPORTANT:
   Search filters, dropdowns, inputs etc.
===================================================== */

input,
select,
textarea,
button{
  font-size:14px !important;
}

input,
select,
textarea{
  line-height:1.45;
}

select{
  min-height:46px;
}

input{
  min-height:44px;
}

textarea{
  min-height:100px;
}


/* =====================================================
   BUTTON TEXT
===================================================== */

.btn,
.login-btn,
.exam-primary-btn,
.search-result-open-btn,
.resource-filter-reset,
.global-search-box button,
.exam-preparation-card,
.exam-official-link{
  font-size:14px !important;
  font-weight:700;
}


/* =====================================================
   CARD TITLES
===================================================== */

.exam-card-content h3,
.search-result-card-content h3,
.library-resource-card h3,
.course-card h3,
.live-card h3,
.resource-card h3,
.exam-preparation-card strong{
  font-size:17px !important;
  line-height:1.4 !important;
}


/* =====================================================
   CARD SECONDARY TEXT
===================================================== */

.exam-card-tags span,
.search-result-path span,
.exam-detail-quick-tags span,
.exams-hero-tags span,
.search-popular-row button,
.exam-date-item-content p,
.exam-notification-content p,
.exam-preparation-card small,
.exam-detail-summary-grid small,
.exam-summary-grid small,
.search-summary-grid small,
.search-result-count-box span{
  font-size:12px !important;
}


/* =====================================================
   BADGES
===================================================== */

.exam-access-badge,
.search-result-type-badge,
.search-result-access-badge,
.exam-date-status,
.course-access-badge,
.resource-access-badge,
.live-access-badge{
  font-size:11px !important;
  line-height:1.3;
}


/* =====================================================
   FILTER / SELECT AREAS
===================================================== */

.search-filter-field select,
.exam-filter-grid select,
.library-filter-grid select,
.course-filter-grid select,
.live-filter-grid select{
  font-size:14px !important;
  min-height:46px;
}


/* =====================================================
   SEARCH INPUTS
===================================================== */

.global-search-box input,
.exam-search-box input,
.library-search-box input,
.course-search-box input,
.live-search-box input{
  font-size:14px !important;
}


/* =====================================================
   SECTION HEADINGS
===================================================== */

.section-head h2,
.search-section-head h2,
.search-filter-head h2,
.search-results-head h2,
.exam-filter-head h2,
.exam-section-head h2,
.exam-detail-panel-head h2{
  font-size:24px !important;
  line-height:1.3 !important;
}


/* =====================================================
   NORMAL H3
===================================================== */

h3{
  line-height:1.4;
}


/* =====================================================
   TABLE TEXT
===================================================== */

table,
table th,
table td,
.exam-pattern-table th,
.exam-pattern-table td{
  font-size:13px !important;
  line-height:1.5;
}


/* =====================================================
   SIDEBAR
===================================================== */

.course-side-title h3,
.exam-detail-sidebar h3{
  font-size:16px !important;
}

.course-side-row span,
.course-side-row strong,
.exam-side-links a,
.exam-official-links p{
  font-size:13px !important;
}


/* =====================================================
   MOBILE BOTTOM NAV
===================================================== */

.bottom-nav a{
  font-size:12px !important;
}


/* =====================================================
   TABLET
===================================================== */

@media(max-width:900px){

  body{
    font-size:15px;
  }

  p,
  li{
    font-size:14px !important;
  }

  .desktop-nav a{
    font-size:13px !important;
  }

}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:650px){

  html{
    font-size:16px;
  }

  body{
    font-size:15px;
  }

  p,
  li{
    font-size:14px !important;
  }

  small,
  label,
  .section-kicker{
    font-size:12px !important;
  }

  input,
  select,
  textarea,
  button,
  .btn{
    font-size:14px !important;
  }

  .section-head h2,
  .search-section-head h2,
  .search-filter-head h2,
  .search-results-head h2,
  .exam-filter-head h2,
  .exam-section-head h2,
  .exam-detail-panel-head h2{
    font-size:21px !important;
  }

}


/* =====================================================
   VERY SMALL MOBILE
===================================================== */

@media(max-width:390px){

  body{
    font-size:15px;
  }

  input,
  select,
  textarea,
  button{
    font-size:14px !important;
  }

}

/* =====================================================
   GOURAV STUDY ZONE 2.0
   NOTIFICATIONS PAGE
   RESPONSIVE + READABLE TYPOGRAPHY
===================================================== */

.notifications-page{
  min-height:100vh;
  background:var(--bg);
}


/* =====================================================
   HERO
===================================================== */

.notification-hero{
  padding:34px 0 22px;

  background:
    radial-gradient(
      circle at top left,
      rgba(37,99,235,.10),
      transparent 34%
    ),
    radial-gradient(
      circle at top right,
      rgba(124,58,237,.10),
      transparent 34%
    ),
    var(--bg);
}


.notification-hero-card{
  display:grid;

  grid-template-columns:
    minmax(0,1fr) 180px;

  align-items:center;

  gap:28px;

  padding:30px;

  border:1px solid var(--border);
  border-radius:24px;

  background:var(--card);

  box-shadow:
    0 18px 45px
    rgba(15,23,42,.06);
}


.notification-hero-content{
  min-width:0;
}


.notification-hero-content h1{
  margin-top:5px;

  font-family:"Poppins";

  font-size:
    clamp(30px,4vw,43px);

  line-height:1.15;
}


.notification-hero-content > p{
  max-width:760px;

  margin-top:10px;

  color:var(--muted);

  font-size:14px !important;

  line-height:1.7;
}


/* =====================================================
   HERO TAGS
===================================================== */

.notification-hero-tags{
  display:flex;
  align-items:center;
  flex-wrap:wrap;

  gap:8px;

  margin-top:16px;
}


.notification-hero-tags span{
  display:inline-flex;
  align-items:center;

  padding:7px 10px;

  border:1px solid var(--border);
  border-radius:99px;

  background:#f8fafc;

  color:#475569;

  font-size:12px !important;
  font-weight:700;
}


/* =====================================================
   HERO VISUAL
===================================================== */

.notification-hero-visual{
  width:160px;
  height:145px;

  display:grid;
  place-items:center;

  justify-self:end;

  border-radius:22px;

  background:
    linear-gradient(
      135deg,
      #dbeafe,
      #ede9fe
    );
}


.notification-hero-visual span{
  font-size:55px;
}


/* =====================================================
   SUMMARY
===================================================== */

.notification-summary-section{
  padding:0 0 22px;
}


.notification-summary-grid{
  display:grid;

  grid-template-columns:
    repeat(4,1fr);

  gap:12px;
}


.notification-summary-grid article{
  display:flex;
  align-items:center;

  gap:12px;

  padding:16px;

  border:1px solid var(--border);
  border-radius:16px;

  background:var(--card);

  transition:.2s;
}


.notification-summary-grid article:hover{
  transform:translateY(-3px);

  border-color:#c7d2fe;

  box-shadow:
    0 12px 28px
    rgba(15,23,42,.05);
}


.notification-summary-grid article > span{
  width:44px;
  height:44px;

  display:grid;
  place-items:center;

  flex-shrink:0;

  border-radius:13px;

  background:#eef2ff;

  font-size:20px;
}


.notification-summary-grid strong{
  display:block;

  color:var(--primary);

  font-family:"Poppins";

  font-size:20px;
}


.notification-summary-grid small{
  display:block;

  margin-top:2px;

  color:var(--muted);

  font-size:12px !important;
  font-weight:700;
}


/* =====================================================
   FILTER SECTION
===================================================== */

.notification-filter-section{
  padding:0 0 22px;
}


.notification-filter-card{
  padding:22px;

  border:1px solid var(--border);
  border-radius:20px;

  background:var(--card);

  box-shadow:
    0 12px 35px
    rgba(15,23,42,.04);
}


.notification-filter-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;

  gap:16px;

  padding-bottom:15px;
  margin-bottom:15px;

  border-bottom:1px solid var(--border);
}


.notification-filter-head h2{
  margin-top:4px;

  font-family:"Poppins";

  font-size:24px !important;
}


/* =====================================================
   FILTER GRID
===================================================== */

.notification-filter-grid{
  display:grid;

  grid-template-columns:
    minmax(280px,1fr)
    200px
    180px
    190px;

  gap:10px;
}


/* =====================================================
   SEARCH BOX
===================================================== */

.notification-search-box{
  display:flex;
  align-items:center;

  gap:9px;

  min-height:46px;

  padding:10px 13px;

  border:1px solid var(--border);
  border-radius:13px;

  background:var(--card);
}


.notification-search-box:focus-within{
  border-color:#818cf8;

  box-shadow:
    0 0 0 3px
    rgba(99,102,241,.08);
}


.notification-search-box input{
  width:100%;

  min-height:auto;

  border:none;
  outline:none;

  background:transparent;

  color:var(--text);

  font-size:14px !important;
}


.notification-search-box input::placeholder{
  color:#94a3b8;
}


/* =====================================================
   FILTER SELECT
===================================================== */

.notification-filter-grid select{
  width:100%;

  min-height:46px;

  padding:10px 12px;

  border:1px solid var(--border);
  border-radius:13px;

  outline:none;

  background:var(--card);

  color:var(--text);

  font-size:14px !important;
}


.notification-filter-grid select:focus{
  border-color:#818cf8;

  box-shadow:
    0 0 0 3px
    rgba(99,102,241,.08);
}


/* =====================================================
   SECTION HEAD
===================================================== */

.notification-section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;

  gap:18px;

  margin-bottom:16px;
}


.notification-section-head h2{
  margin-top:4px;

  font-family:"Poppins";

  font-size:24px !important;
}


.notification-section-head p{
  margin-top:5px;

  color:var(--muted);

  font-size:14px !important;

  line-height:1.6;
}


/* =====================================================
   IMPORTANT / PINNED
===================================================== */

.notification-important-section{
  padding:0 0 24px;
}


.notification-important-grid{
  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:12px;
}


/* =====================================================
   PINNED CARD
===================================================== */

.notification-important-card{
  position:relative;

  display:flex;
  flex-direction:column;

  min-height:100%;

  padding:18px;

  border:1px solid #c7d2fe;
  border-radius:18px;

  background:
    linear-gradient(
      135deg,
      #f8faff,
      #f5f3ff
    );

  transition:.2s;
}


.notification-important-card:hover{
  transform:translateY(-3px);

  box-shadow:
    0 14px 30px
    rgba(79,70,229,.08);
}


.notification-pin-badge{
  display:inline-flex;
  align-items:center;

  width:max-content;

  padding:6px 9px;

  border-radius:99px;

  background:#eef2ff;

  color:#4f46e5;

  font-size:12px !important;
  font-weight:800;
}


.notification-important-card h3{
  margin-top:10px;

  font-family:"Poppins";

  font-size:18px !important;

  line-height:1.4;
}


.notification-important-card p{
  margin-top:7px;

  color:var(--muted);

  font-size:14px !important;

  line-height:1.65;
}


/* =====================================================
   LIST SECTION
===================================================== */

.notification-list-section{
  padding:0 0 60px;
}


/* =====================================================
   RESULT COUNT
===================================================== */

.notification-count-box{
  min-width:86px;

  padding:11px 14px;

  border:1px solid var(--border);
  border-radius:13px;

  background:var(--card);

  text-align:center;
}


.notification-count-box strong{
  display:block;

  color:var(--primary);

  font-family:"Poppins";

  font-size:20px;
}


.notification-count-box span{
  display:block;

  margin-top:1px;

  color:var(--muted);

  font-size:12px !important;
  font-weight:700;
}


/* =====================================================
   ACTION BAR
===================================================== */

.notification-action-bar{
  display:flex;
  align-items:center;
  justify-content:flex-end;

  flex-wrap:wrap;

  gap:8px;

  margin-bottom:13px;
}


.notification-action-bar button{
  min-height:40px;

  padding:9px 12px;

  border:1px solid var(--border);
  border-radius:10px;

  background:var(--card);

  color:var(--text);

  font-size:14px !important;
  font-weight:700;

  cursor:pointer;

  transition:.2s;
}


.notification-action-bar button:hover{
  border-color:#c7d2fe;

  background:#eef2ff;

  color:var(--primary);
}


/* =====================================================
   NOTIFICATION LIST
===================================================== */

.notification-list{
  display:flex;
  flex-direction:column;

  gap:10px;
}


/* =====================================================
   NOTIFICATION ITEM
===================================================== */

.notification-item{
  position:relative;

  display:grid;

  grid-template-columns:
    auto minmax(0,1fr) auto;

  align-items:start;

  gap:14px;

  padding:17px;

  border:1px solid var(--border);
  border-radius:16px;

  background:var(--card);

  transition:.2s;
}


.notification-item:hover{
  transform:translateY(-2px);

  border-color:#c7d2fe;

  box-shadow:
    0 10px 25px
    rgba(15,23,42,.05);
}


.notification-item.unread{
  border-left:4px solid var(--primary);

  background:
    linear-gradient(
      90deg,
      rgba(99,102,241,.04),
      var(--card)
    );
}


/* =====================================================
   ICON
===================================================== */

.notification-item-icon{
  width:46px;
  height:46px;

  display:grid;
  place-items:center;

  flex-shrink:0;

  border-radius:13px;

  background:#eef2ff;

  font-size:20px;
}


/* =====================================================
   CONTENT
===================================================== */

.notification-item-content{
  min-width:0;
}


.notification-item-meta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;

  gap:6px;

  margin-bottom:5px;
}


.notification-category-badge,
.notification-access-badge,
.notification-new-badge{
  display:inline-flex;
  align-items:center;

  padding:5px 8px;

  border-radius:99px;

  font-size:11px !important;
  font-weight:800;
}


.notification-category-badge{
  background:#eef2ff;
  color:#4f46e5;
}


.notification-access-badge.free{
  background:#dcfce7;
  color:#166534;
}


.notification-access-badge.login{
  background:#dbeafe;
  color:#1d4ed8;
}


.notification-access-badge.premium{
  background:#fef3c7;
  color:#92400e;
}


.notification-new-badge{
  background:#fee2e2;
  color:#b91c1c;
}


.notification-item-content h3{
  font-family:"Poppins";

  font-size:17px !important;

  line-height:1.4;
}


.notification-item-content p{
  margin-top:5px;

  color:var(--muted);

  font-size:14px !important;

  line-height:1.65;
}


/* =====================================================
   NOTIFICATION DATE / RIGHT
===================================================== */

.notification-item-side{
  display:flex;
  flex-direction:column;

  align-items:flex-end;

  gap:8px;
}


.notification-item-date{
  color:var(--muted);

  font-size:12px !important;
  font-weight:700;

  white-space:nowrap;
}


.notification-open-btn{
  padding:8px 11px;

  border:none;
  border-radius:9px;

  background:
    linear-gradient(
      135deg,
      #2563eb,
      #7c3aed
    );

  color:#fff;

  font-size:13px !important;
  font-weight:800;

  cursor:pointer;
}


/* =====================================================
   READ STATE
===================================================== */

.notification-item.read{
  opacity:.82;
}


.notification-item.read .notification-new-badge{
  display:none;
}


/* =====================================================
   EMPTY STATE
===================================================== */

.notification-empty-state{
  padding:40px 20px;

  border:1px dashed var(--border);
  border-radius:18px;

  background:var(--card);

  text-align:center;
}


.notification-empty-state > span{
  display:block;

  margin-bottom:8px;

  font-size:38px;
}


.notification-empty-state h3{
  font-family:"Poppins";

  font-size:18px !important;
}


.notification-empty-state p{
  max-width:470px;

  margin:5px auto 0;

  color:var(--muted);

  font-size:14px !important;

  line-height:1.6;
}


/* =====================================================
   DARK MODE
===================================================== */

body.dark .notification-hero{
  background:#0b1120;
}


body.dark .notification-hero-tags span{
  background:#182235;

  color:#cbd5e1;
}


body.dark .notification-hero-visual{
  background:
    linear-gradient(
      135deg,
      #172033,
      #1e293b
    );
}


body.dark .notification-summary-grid article > span,
body.dark .notification-item-icon{
  background:#182235;
}


body.dark .notification-important-card{
  background:
    linear-gradient(
      135deg,
      #111827,
      #172033
    );

  border-color:#334155;
}


body.dark .notification-action-bar button:hover{
  background:#1e293b;
}


/* =====================================================
   SMALL DESKTOP
===================================================== */

@media(max-width:1100px){

  .notification-filter-grid{
    grid-template-columns:
      repeat(2,1fr);
  }


  .notification-search-box{
    grid-column:1/-1;
  }

}


/* =====================================================
   TABLET
===================================================== */

@media(max-width:850px){

  .notification-hero-card{
    grid-template-columns:
      minmax(0,1fr) 130px;
  }


  .notification-hero-visual{
    width:125px;
    height:125px;
  }


  .notification-summary-grid{
    grid-template-columns:
      repeat(2,1fr);
  }


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

}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:650px){

  .notification-hero{
    padding:24px 0 17px;
  }


  .notification-hero-card{
    grid-template-columns:1fr;

    padding:20px;
  }


  .notification-hero-visual{
    display:none;
  }


  .notification-hero-content h1{
    font-size:27px;
  }


  .notification-hero-content > p{
    font-size:14px !important;
  }


  /* SUMMARY */

  .notification-summary-grid{
    grid-template-columns:
      repeat(2,1fr);

    gap:9px;
  }


  .notification-summary-grid article{
    padding:13px;
  }


  /* FILTER */

  .notification-filter-card{
    padding:18px;
  }


  .notification-filter-head{
    align-items:flex-start;
  }


  .notification-filter-grid{
    grid-template-columns:1fr;
  }


  .notification-search-box{
    grid-column:auto;
  }


  /* SECTION HEAD */

  .notification-section-head{
    align-items:flex-start;
  }


  /* NOTIFICATION ITEM */

  .notification-item{
    grid-template-columns:
      auto minmax(0,1fr);
  }


  .notification-item-side{
    grid-column:2;

    align-items:flex-start;

    flex-direction:row;
    flex-wrap:wrap;
  }


  /* ACTION BAR */

  .notification-action-bar{
    justify-content:flex-start;
  }

}


/* =====================================================
   EXTRA SMALL MOBILE
===================================================== */

@media(max-width:390px){

  .notification-summary-grid{
    grid-template-columns:1fr;
  }


  .notification-section-head{
    flex-direction:column;
  }


  .notification-count-box{
    width:100%;
  }


  .notification-item{
    grid-template-columns:1fr;
  }


  .notification-item-icon{
    width:42px;
    height:42px;
  }


  .notification-item-side{
    grid-column:auto;
  }


  .notification-action-bar button{
    width:100%;
  }

}

/* =====================================================
   GOURAV STUDY ZONE 2.0
   PREMIUM PAGE
   RESPONSIVE + READABLE TYPOGRAPHY
===================================================== */

.premium-page{
  min-height:100vh;
  background:var(--bg);
}


/* =====================================================
   PREMIUM HERO
===================================================== */

.premium-hero{
  padding:34px 0 22px;

  background:
    radial-gradient(
      circle at 10% 0%,
      rgba(245,158,11,.13),
      transparent 32%
    ),
    radial-gradient(
      circle at 90% 10%,
      rgba(124,58,237,.12),
      transparent 30%
    ),
    var(--bg);
}


.premium-hero-card{
  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    330px;

  align-items:center;

  gap:30px;

  padding:34px;

  border:1px solid var(--border);
  border-radius:26px;

  background:var(--card);

  box-shadow:
    0 18px 48px
    rgba(15,23,42,.07);
}


.premium-hero-content{
  min-width:0;
}


.premium-label{
  display:inline-flex;
  align-items:center;

  padding:7px 11px;

  border-radius:999px;

  background:#fef3c7;

  color:#92400e;

  font-size:12px !important;
  font-weight:900;

  letter-spacing:.04em;
}


.premium-hero-content h1{
  margin:12px 0 0;

  font-family:"Poppins";

  font-size:
    clamp(34px,5vw,52px);

  line-height:1.08;
}


.premium-hero-content > p{
  max-width:720px;

  margin:15px 0 0;

  color:var(--muted);

  font-size:15px !important;

  line-height:1.7;
}


/* =====================================================
   HERO POINTS
===================================================== */

.premium-hero-points{
  display:flex;
  align-items:center;
  flex-wrap:wrap;

  gap:8px;

  margin-top:18px;
}


.premium-hero-points span{
  display:inline-flex;
  align-items:center;

  padding:7px 10px;

  border:1px solid var(--border);
  border-radius:999px;

  background:#f8fafc;

  color:#475569;

  font-size:12px !important;
  font-weight:700;
}


/* =====================================================
   HERO ACTIONS
===================================================== */

.premium-hero-actions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;

  gap:10px;

  margin-top:22px;
}


/* =====================================================
   HERO VISUAL
===================================================== */

.premium-hero-visual{
  min-height:250px;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  padding:24px;

  border-radius:22px;

  background:
    linear-gradient(
      145deg,
      #fff7d6,
      #ede9fe
    );

  text-align:center;

  box-shadow:
    inset 0 0 0 1px
    rgba(245,158,11,.12);
}


.premium-crown{
  width:100px;
  height:100px;

  display:grid;
  place-items:center;

  border-radius:28px;

  background:rgba(255,255,255,.8);

  font-size:52px;

  box-shadow:
    0 15px 35px
    rgba(146,64,14,.08);
}


.premium-hero-visual strong{
  margin-top:16px;

  font-family:"Poppins";

  font-size:20px;
}


.premium-hero-visual > span{
  margin-top:3px;

  color:var(--muted);

  font-size:13px !important;
}


/* =====================================================
   CURRENT PREMIUM STATUS
===================================================== */

.premium-status-section{
  padding:0 0 24px;
}


.premium-status-card{
  display:grid;

  grid-template-columns:
    auto
    minmax(0,1fr)
    auto;

  align-items:center;

  gap:15px;

  padding:20px;

  border:1px solid var(--border);
  border-radius:18px;

  background:var(--card);

  box-shadow:
    0 10px 30px
    rgba(15,23,42,.04);
}


.premium-status-icon{
  width:50px;
  height:50px;

  display:grid;
  place-items:center;

  border-radius:14px;

  background:#eef2ff;

  font-size:22px;
}


.premium-status-content h2{
  margin:3px 0 0;

  font-family:"Poppins";

  font-size:20px !important;
}


.premium-status-content p{
  margin:4px 0 0;

  color:var(--muted);

  font-size:14px !important;
}


.premium-current-plan-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-width:90px;

  padding:8px 12px;

  border-radius:999px;

  background:#eef2ff;

  color:#4f46e5;

  font-size:12px !important;
  font-weight:900;
}


/* PREMIUM STATUS */

.premium-status-card.is-premium{
  border-color:#fde68a;

  background:
    linear-gradient(
      135deg,
      #fffdf5,
      #fff7ed
    );
}


.premium-status-card.is-premium
.premium-current-plan-badge{
  background:#fef3c7;

  color:#92400e;
}


/* =====================================================
   PREMIUM BENEFITS
===================================================== */

.premium-benefits-grid{
  display:grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:14px;
}


.premium-benefit-card{
  padding:20px;

  border:1px solid var(--border);
  border-radius:18px;

  background:var(--card);

  transition:
    transform .2s,
    border-color .2s,
    box-shadow .2s;
}


.premium-benefit-card:hover{
  transform:translateY(-3px);

  border-color:#fde68a;

  box-shadow:
    0 14px 30px
    rgba(146,64,14,.06);
}


.premium-benefit-icon{
  width:50px;
  height:50px;

  display:grid;
  place-items:center;

  border-radius:14px;

  background:
    linear-gradient(
      135deg,
      #fef3c7,
      #ede9fe
    );

  font-size:22px;
}


.premium-benefit-card h3{
  margin:12px 0 0;

  font-family:"Poppins";

  font-size:18px !important;

  line-height:1.4;
}


.premium-benefit-card p{
  margin:6px 0 0;

  color:var(--muted);

  font-size:14px !important;

  line-height:1.65;
}


/* =====================================================
   PLAN SECTION
===================================================== */

.premium-plans-section{
  padding:35px 0 55px;

  background:
    linear-gradient(
      180deg,
      rgba(245,158,11,.035),
      rgba(124,58,237,.035)
    );
}


.premium-plan-layout{
  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:16px;

  max-width:1000px;

  margin:0 auto;
}


/* =====================================================
   PLAN CARD
===================================================== */

.premium-plan-card{
  position:relative;

  display:flex;
  flex-direction:column;

  padding:25px;

  border:1px solid var(--border);
  border-radius:22px;

  background:var(--card);

  box-shadow:
    0 14px 35px
    rgba(15,23,42,.05);
}


.premium-plan-card.featured{
  border-color:#fbbf24;

  box-shadow:
    0 18px 45px
    rgba(245,158,11,.11);
}


.premium-popular-label{
  position:absolute;

  top:-12px;
  right:20px;

  padding:6px 10px;

  border-radius:999px;

  background:
    linear-gradient(
      135deg,
      #f59e0b,
      #f97316
    );

  color:#fff;

  font-size:11px !important;
  font-weight:900;
}


/* =====================================================
   PLAN HEADER
===================================================== */

.premium-plan-header{
  display:flex;
  align-items:center;

  gap:12px;
}


.premium-plan-icon{
  width:50px;
  height:50px;

  display:grid;
  place-items:center;

  flex-shrink:0;

  border-radius:14px;

  background:#eef2ff;

  font-size:22px;
}


.premium-plan-icon.premium{
  background:
    linear-gradient(
      135deg,
      #fef3c7,
      #ffedd5
    );
}


.premium-plan-header h3{
  margin:2px 0 0;

  font-family:"Poppins";

  font-size:19px !important;
}


/* =====================================================
   PRICE
===================================================== */

.premium-price{
  display:flex;
  align-items:flex-end;

  gap:6px;

  margin-top:18px;
}


.premium-price strong{
  font-family:"Poppins";

  font-size:36px;

  line-height:1;
}


.premium-price span{
  padding-bottom:3px;

  color:var(--muted);

  font-size:13px !important;
}


.premium-plan-card > p{
  margin:14px 0 0;

  color:var(--muted);

  font-size:14px !important;

  line-height:1.65;
}


/* =====================================================
   FEATURE LIST
===================================================== */

.premium-feature-list{
  display:flex;
  flex-direction:column;

  gap:9px;

  margin:18px 0 0;
  padding:0;

  list-style:none;
}


.premium-feature-list li{
  padding:9px 10px;

  border-radius:10px;

  background:#f8fafc;

  color:#475569;

  font-size:14px !important;
  font-weight:600;
}


.premium-plan-button{
  width:100%;

  margin-top:auto;
  padding-top:12px;
  padding-bottom:12px;
}


/* =====================================================
   PREMIUM PROCESS
===================================================== */

.premium-process-grid{
  display:grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap:12px;
}


.premium-process-grid article{
  display:flex;
  align-items:flex-start;

  gap:12px;

  padding:18px;

  border:1px solid var(--border);
  border-radius:17px;

  background:var(--card);
}


.premium-process-grid article > span{
  width:38px;
  height:38px;

  display:grid;
  place-items:center;

  flex-shrink:0;

  border-radius:50%;

  background:
    linear-gradient(
      135deg,
      #2563eb,
      #7c3aed
    );

  color:#fff;

  font-size:14px !important;
  font-weight:900;
}


.premium-process-grid h3{
  margin:0;

  font-size:17px !important;
}


.premium-process-grid p{
  margin:4px 0 0;

  color:var(--muted);

  font-size:14px !important;

  line-height:1.6;
}


/* =====================================================
   SECURITY
===================================================== */

.premium-security-card{
  display:flex;
  align-items:center;

  gap:18px;

  padding:24px;

  border:1px solid var(--border);
  border-radius:20px;

  background:var(--card);
}


.premium-security-icon{
  width:65px;
  height:65px;

  display:grid;
  place-items:center;

  flex-shrink:0;

  border-radius:18px;

  background:#eef2ff;

  font-size:28px;
}


.premium-security-card h2{
  margin:3px 0 0;

  font-family:"Poppins";

  font-size:24px !important;
}


.premium-security-card p{
  max-width:850px;

  margin:6px 0 0;

  color:var(--muted);

  font-size:14px !important;

  line-height:1.7;
}


/* =====================================================
   FAQ
===================================================== */

.premium-faq-list{
  display:flex;
  flex-direction:column;

  gap:10px;
}


.premium-faq-list details{
  padding:16px 18px;

  border:1px solid var(--border);
  border-radius:15px;

  background:var(--card);
}


.premium-faq-list summary{
  cursor:pointer;

  color:var(--text);

  font-size:15px !important;
  font-weight:800;
}


.premium-faq-list details p{
  margin:10px 0 0;

  color:var(--muted);

  font-size:14px !important;

  line-height:1.7;
}


/* =====================================================
   DARK MODE
===================================================== */

body.dark .premium-hero{
  background:#0b1120;
}


body.dark .premium-label{
  background:#422006;

  color:#fde68a;
}


body.dark .premium-hero-points span,
body.dark .premium-feature-list li{
  background:#182235;

  color:#cbd5e1;
}


body.dark .premium-hero-visual{
  background:
    linear-gradient(
      145deg,
      #292113,
      #211b35
    );
}


body.dark .premium-crown{
  background:#111827;
}


body.dark .premium-status-icon,
body.dark .premium-security-icon{
  background:#182235;
}


body.dark .premium-status-card.is-premium{
  background:
    linear-gradient(
      135deg,
      #251d0e,
      #211a12
    );

  border-color:#66501b;
}


body.dark .premium-benefit-icon{
  background:
    linear-gradient(
      135deg,
      #33270e,
      #211b35
    );
}


body.dark .premium-plans-section{
  background:#0b1120;
}


/* =====================================================
   SMALL DESKTOP
===================================================== */

@media(max-width:1050px){

  .premium-hero-card{
    grid-template-columns:
      minmax(0,1fr)
      280px;
  }


  .premium-process-grid{
    grid-template-columns:
      repeat(2,1fr);
  }

}


/* =====================================================
   TABLET
===================================================== */

@media(max-width:850px){

  .premium-hero-card{
    grid-template-columns:1fr;
  }


  .premium-hero-visual{
    min-height:190px;
  }


  .premium-benefits-grid{
    grid-template-columns:
      repeat(2,1fr);
  }


  .premium-plan-layout{
    grid-template-columns:1fr;

    max-width:650px;
  }

}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:650px){

  .premium-hero{
    padding:24px 0 18px;
  }


  .premium-hero-card{
    padding:21px;
  }


  .premium-hero-content h1{
    font-size:30px;
  }


  .premium-hero-content > p{
    font-size:14px !important;
  }


  .premium-hero-visual{
    display:none;
  }


  /* STATUS */

  .premium-status-card{
    grid-template-columns:
      auto
      minmax(0,1fr);
  }


  .premium-status-side{
    grid-column:2;
  }


  /* BENEFITS */

  .premium-benefits-grid{
    grid-template-columns:1fr;
  }


  /* PLANS */

  .premium-plan-card{
    padding:21px;
  }


  /* PROCESS */

  .premium-process-grid{
    grid-template-columns:1fr;
  }


  /* SECURITY */

  .premium-security-card{
    align-items:flex-start;
  }


  .premium-security-card h2{
    font-size:21px !important;
  }

}


/* =====================================================
   EXTRA SMALL MOBILE
===================================================== */

@media(max-width:390px){

  .premium-status-card{
    grid-template-columns:1fr;
  }


  .premium-status-side{
    grid-column:auto;
  }


  .premium-security-card{
    flex-direction:column;
  }


  .premium-price strong{
    font-size:32px;
  }

}

/* =====================================================
   GOURAV STUDY ZONE 2.0
   COURSES PAGE - COMPLETE UI FIX
   Matches current courses.html + courses.js
===================================================== */


/* =====================================================
   PAGE
===================================================== */

.courses-page{
  min-height:100vh;
  background:var(--bg);
}


/* =====================================================
   HERO
===================================================== */

.courses-hero{
  padding:34px 0 22px;

  background:
    radial-gradient(
      circle at 10% 0%,
      rgba(37,99,235,.10),
      transparent 32%
    ),
    radial-gradient(
      circle at 90% 10%,
      rgba(124,58,237,.10),
      transparent 30%
    ),
    var(--bg);
}


.courses-hero-card{
  display:grid;

  grid-template-columns:
    minmax(0,1fr) 260px;

  align-items:center;

  gap:28px;

  padding:30px;

  border:1px solid var(--border);
  border-radius:24px;

  background:var(--card);

  box-shadow:
    0 18px 45px
    rgba(15,23,42,.06);
}


.courses-hero-content h1{
  margin:7px 0 0;

  font-family:"Poppins",sans-serif;

  font-size:
    clamp(32px,4vw,44px);

  line-height:1.15;
}


.courses-hero-content > p{
  max-width:760px;

  margin:12px 0 0;

  color:var(--muted);

  font-size:15px !important;

  line-height:1.7;
}


/* =====================================================
   HERO TAGS
===================================================== */

.courses-hero-tags{
  display:flex;
  align-items:center;
  flex-wrap:wrap;

  gap:8px;

  margin-top:17px;
}


.courses-hero-tags span{
  display:inline-flex;
  align-items:center;

  padding:7px 10px;

  border:1px solid var(--border);
  border-radius:999px;

  background:#f8fafc;

  color:#475569;

  font-size:12px !important;
  font-weight:700;
}


/* =====================================================
   HERO VISUAL
===================================================== */

.courses-hero-visual{
  width:220px;
  height:190px;

  display:grid;
  place-items:center;

  justify-self:end;

  border-radius:22px;

  background:
    linear-gradient(
      135deg,
      #dbeafe,
      #ede9fe
    );
}


.courses-hero-visual span{
  font-size:64px;
}


/* =====================================================
   SUMMARY
===================================================== */

.course-summary-section{
  padding:0 0 22px;
}


.course-summary-grid{
  display:grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap:12px;
}


.course-summary-grid article{
  display:flex;
  align-items:center;

  gap:12px;

  padding:16px;

  border:1px solid var(--border);
  border-radius:16px;

  background:var(--card);

  transition:.2s;
}


.course-summary-grid article:hover{
  transform:translateY(-3px);

  border-color:#c7d2fe;

  box-shadow:
    0 12px 28px
    rgba(15,23,42,.05);
}


.course-summary-grid article > span{
  width:44px;
  height:44px;

  display:grid;
  place-items:center;

  flex-shrink:0;

  border-radius:13px;

  background:#eef2ff;

  font-size:20px;
}


.course-summary-grid article strong{
  display:block;

  color:var(--primary);

  font-family:"Poppins",sans-serif;

  font-size:21px;
}


.course-summary-grid article small{
  display:block;

  margin-top:2px;

  color:var(--muted);

  font-size:12px !important;
  font-weight:700;
}


/* =====================================================
   CONTINUE LEARNING
===================================================== */

.continue-course-section{
  padding:0 0 24px;
}


.continue-course-card{
  display:grid;

  grid-template-columns:
    auto
    minmax(0,1fr)
    auto;

  align-items:center;

  gap:18px;

  padding:22px 24px;

  border:1px solid #c7d2fe;
  border-radius:20px;

  background:
    linear-gradient(
      135deg,
      #f3f6ff,
      #f5f3ff
    );

  box-shadow:
    0 14px 32px
    rgba(79,70,229,.06);
}


.continue-course-icon{
  width:60px;
  height:60px;

  display:grid;
  place-items:center;

  flex-shrink:0;

  border-radius:16px;

  background:
    linear-gradient(
      135deg,
      #2563eb,
      #7c3aed
    );

  color:#fff;

  font-size:24px;
}


.continue-course-content{
  min-width:0;
}


.continue-course-content h2{
  margin:3px 0 0;

  font-family:"Poppins",sans-serif;

  font-size:23px !important;
}


.continue-course-content > p{
  margin:4px 0 0;

  color:var(--text);

  font-size:14px !important;
}


.continue-course-progress{
  display:flex;
  align-items:center;

  gap:12px;

  margin-top:12px;
}


.continue-course-progress-bar{
  flex:1;

  height:8px;

  overflow:hidden;

  border-radius:999px;

  background:#dbe7fb;
}


.continue-course-progress-bar span{
  display:block;

  height:100%;

  border-radius:999px;

  background:
    linear-gradient(
      90deg,
      #2563eb,
      #7c3aed
    );
}


.continue-course-progress strong{
  min-width:95px;

  color:var(--primary);

  font-size:12px !important;
}


/* =====================================================
   FILTER SECTION
===================================================== */

.course-filter-section{
  padding:0 0 25px;
}


.course-filter-card{
  padding:22px;

  border:1px solid var(--border);
  border-radius:20px;

  background:var(--card);

  box-shadow:
    0 12px 35px
    rgba(15,23,42,.04);
}


.course-filter-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;

  gap:15px;

  padding-bottom:15px;
  margin-bottom:15px;

  border-bottom:1px solid var(--border);
}


.course-filter-head h2{
  margin:4px 0 0;

  font-family:"Poppins",sans-serif;

  font-size:24px !important;
}


/* =====================================================
   FILTER GRID
===================================================== */

.course-filter-grid{
  display:grid;

  grid-template-columns:
    minmax(300px,1fr)
    minmax(180px,.35fr)
    minmax(180px,.35fr);

  gap:11px;

  align-items:end;
}


/* =====================================================
   SEARCH BOX
===================================================== */

.course-search-box{
  display:flex;
  align-items:center;

  gap:9px;

  min-height:48px;

  padding:0 13px;

  border:1px solid var(--border);
  border-radius:13px;

  background:var(--card);
}


.course-search-box:focus-within{
  border-color:#818cf8;

  box-shadow:
    0 0 0 3px
    rgba(99,102,241,.08);
}


.course-search-box input{
  width:100%;

  min-height:46px;

  padding:10px 0;

  border:none !important;

  outline:none;

  background:transparent;

  color:var(--text);

  font-size:14px !important;

  box-shadow:none !important;
}


/* =====================================================
   FILTER FIELD
===================================================== */

.course-filter-field{
  display:flex;
  flex-direction:column;

  gap:6px;
}


.course-filter-field label{
  color:#475569;

  font-size:13px !important;
  font-weight:800;
}


.course-filter-field select{
  width:100%;

  min-height:48px;

  padding:10px 12px;

  border:1px solid var(--border);
  border-radius:13px;

  outline:none;

  background:var(--card);

  color:var(--text);

  font-size:14px !important;
}


.course-filter-field select:focus{
  border-color:#818cf8;

  box-shadow:
    0 0 0 3px
    rgba(99,102,241,.08);
}


/* =====================================================
   RESET BUTTON
===================================================== */

.resource-filter-reset{
  min-height:40px;

  padding:8px 13px;

  border:1px solid var(--border);
  border-radius:10px;

  background:var(--card);

  color:var(--text);

  font-size:13px !important;
  font-weight:800;

  cursor:pointer;
}


.resource-filter-reset:hover{
  background:#eef2ff;

  color:var(--primary);

  border-color:#c7d2fe;
}


/* =====================================================
   COURSE LIST SECTION
===================================================== */

.course-list-section{
  padding:0 0 45px;
}


.course-section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;

  gap:20px;

  margin-bottom:16px;
}


.course-section-head h2{
  margin:4px 0 0;

  font-family:"Poppins",sans-serif;

  font-size:25px !important;
}


.course-section-head p{
  margin:5px 0 0;

  color:var(--muted);

  font-size:14px !important;
}


/* =====================================================
   RESULT COUNT
===================================================== */

.course-result-count-box{
  min-width:90px;

  padding:11px 14px;

  border:1px solid var(--border);
  border-radius:14px;

  background:var(--card);

  text-align:center;
}


.course-result-count-box strong{
  display:block;

  color:var(--primary);

  font-family:"Poppins",sans-serif;

  font-size:21px;
}


.course-result-count-box span{
  display:block;

  color:var(--muted);

  font-size:12px !important;
  font-weight:700;
}


/* =====================================================
   COURSE GRID
===================================================== */

.course-grid{
  display:grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:16px;
}


/* =====================================================
   COURSE CARD
===================================================== */

.course-card{
  position:relative;

  overflow:hidden;

  display:flex;
  flex-direction:column;

  min-width:0;

  border:1px solid var(--border);
  border-radius:20px;

  background:var(--card);

  transition:
    transform .2s,
    border-color .2s,
    box-shadow .2s;
}


.course-card:hover{
  transform:translateY(-4px);

  border-color:#c7d2fe;

  box-shadow:
    0 16px 35px
    rgba(15,23,42,.07);
}


.course-card.is-locked{
  border-color:#e5e7eb;
}


/* =====================================================
   COURSE THUMBNAIL
===================================================== */

.course-thumbnail{
  position:relative;

  height:180px;

  overflow:hidden;

  background:
    linear-gradient(
      135deg,
      #dbeafe,
      #ede9fe
    );
}


.course-thumbnail img{
  width:100%;
  height:100%;

  object-fit:cover;
}


.course-thumbnail-placeholder{
  width:100%;
  height:100%;

  display:grid;
  place-items:center;

  font-size:58px;
}


.course-play-icon{
  position:absolute;

  left:50%;
  top:50%;

  transform:
    translate(-50%,-50%);

  width:50px;
  height:50px;

  display:grid;
  place-items:center;

  border-radius:50%;

  background:#172033;

  color:#fff;

  font-size:17px;

  box-shadow:
    0 10px 25px
    rgba(15,23,42,.18);
}


/* =====================================================
   ACCESS BADGE
===================================================== */

.course-access-badge{
  position:absolute;

  top:12px;
  left:12px;

  display:inline-flex;
  align-items:center;

  padding:6px 9px;

  border-radius:999px;

  font-size:11px !important;
  font-weight:900;
}


.course-access-badge.free{
  background:#dcfce7;
  color:#166534;
}


.course-access-badge.login{
  background:#dbeafe;
  color:#1d4ed8;
}


.course-access-badge.premium{
  background:#fef3c7;
  color:#92400e;
}


/* =====================================================
   COURSE CARD CONTENT
===================================================== */

.course-card-content{
  display:flex;
  flex-direction:column;

  flex:1;

  padding:18px;
}


.course-card-content > small{
  color:var(--primary);

  font-size:12px !important;
  font-weight:800;
}


.course-card-content h3{
  margin:6px 0 0;

  font-family:"Poppins",sans-serif;

  font-size:18px !important;

  line-height:1.4;
}


.course-card-content > p{
  margin:7px 0 0;

  color:var(--muted);

  font-size:14px !important;

  line-height:1.65;
}


/* =====================================================
   META
===================================================== */

.course-meta{
  display:flex;
  flex-wrap:wrap;

  gap:6px;

  margin-top:12px;
}


.course-meta span{
  display:inline-flex;
  align-items:center;

  padding:5px 8px;

  border-radius:999px;

  background:#f1f5f9;

  color:#64748b;

  font-size:11px !important;
  font-weight:700;
}


/* =====================================================
   TEACHER
===================================================== */

.course-teacher{
  display:flex;
  align-items:center;

  gap:9px;

  padding-top:14px;
  margin-top:14px;

  border-top:1px solid var(--border);
}


.course-teacher-avatar{
  width:38px;
  height:38px;

  display:grid;
  place-items:center;

  flex-shrink:0;

  border-radius:50%;

  background:
    linear-gradient(
      135deg,
      #2563eb,
      #7c3aed
    );

  color:#fff;

  font-size:13px;
  font-weight:900;
}


.course-teacher small{
  display:block;

  color:var(--muted);

  font-size:11px !important;
  font-weight:700;
}


.course-teacher strong{
  display:block;

  margin-top:1px;

  font-size:13px !important;
}


/* =====================================================
   ENROLLED
===================================================== */

.course-enrolled-badge{
  display:inline-flex;

  width:max-content;

  margin-top:12px;

  padding:6px 9px;

  border-radius:999px;

  background:#dcfce7;

  color:#166534;

  font-size:11px !important;
  font-weight:900;
}


/* =====================================================
   CARD PROGRESS
===================================================== */

.course-card-progress{
  margin-top:12px;
}


.course-card-progress-top{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:10px;

  margin-bottom:6px;

  font-size:12px !important;
}


.course-card-progress-top span{
  color:var(--muted);
}


.course-card-progress-top strong{
  color:var(--primary);
}


.course-card-progress-bar{
  height:7px;

  overflow:hidden;

  border-radius:999px;

  background:#e2e8f0;
}


.course-card-progress-bar span{
  display:block;

  height:100%;

  border-radius:999px;

  background:
    linear-gradient(
      90deg,
      #2563eb,
      #7c3aed
    );
}


/* =====================================================
   CARD ACTIONS
===================================================== */

.course-card-actions{
  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    auto;

  gap:8px;

  margin-top:auto;
  padding-top:16px;
}


.course-view-btn,
.course-secondary-btn{
  min-height:43px;

  padding:9px 13px;

  border-radius:11px;

  font-size:13px !important;
  font-weight:800;

  cursor:pointer;
}


.course-view-btn{
  border:none;

  background:
    linear-gradient(
      135deg,
      #2563eb,
      #7c3aed
    );

  color:#fff;
}


.course-secondary-btn{
  border:1px solid var(--border);

  background:var(--card);

  color:var(--text);
}


.course-secondary-btn:hover{
  background:#eef2ff;

  color:var(--primary);
}


/* =====================================================
   INFO SECTION
===================================================== */

.course-info-grid{
  display:grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap:12px;
}


.course-info-grid article{
  padding:18px;

  border:1px solid var(--border);
  border-radius:17px;

  background:var(--card);
}


.course-info-icon{
  width:38px;
  height:38px;

  display:grid;
  place-items:center;

  border-radius:50%;

  background:
    linear-gradient(
      135deg,
      #2563eb,
      #7c3aed
    );

  color:#fff;

  font-size:14px;
  font-weight:900;
}


.course-info-grid h3{
  margin:10px 0 0;

  font-size:17px !important;
}


.course-info-grid p{
  margin:5px 0 0;

  color:var(--muted);

  font-size:14px !important;

  line-height:1.6;
}


/* =====================================================
   EMPTY STATE
===================================================== */

.resource-library-empty{
  padding:42px 20px;

  border:1px dashed var(--border);
  border-radius:18px;

  background:var(--card);

  text-align:center;
}


.resource-library-empty > span{
  display:block;

  font-size:40px;
}


.resource-library-empty h3{
  margin:8px 0 0;

  font-size:18px !important;
}


.resource-library-empty p{
  margin:5px 0 0;

  color:var(--muted);

  font-size:14px !important;
}


/* =====================================================
   DARK MODE
===================================================== */

body.dark .courses-hero{
  background:#0b1120;
}


body.dark .courses-hero-tags span,
body.dark .course-meta span{
  background:#182235;

  color:#cbd5e1;
}


body.dark .courses-hero-visual,
body.dark .course-thumbnail{
  background:
    linear-gradient(
      135deg,
      #172033,
      #211b35
    );
}


body.dark .course-summary-grid article > span{
  background:#182235;
}


body.dark .continue-course-card{
  background:
    linear-gradient(
      135deg,
      #141d32,
      #1b1830
    );

  border-color:#394563;
}


body.dark .course-secondary-btn:hover,
body.dark .resource-filter-reset:hover{
  background:#182235;
}


/* =====================================================
   RESPONSIVE - SMALL DESKTOP
===================================================== */

@media(max-width:1100px){

  .course-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }


  .course-info-grid{
    grid-template-columns:
      repeat(2,1fr);
  }

}


/* =====================================================
   TABLET
===================================================== */

@media(max-width:850px){

  .courses-hero-card{
    grid-template-columns:
      minmax(0,1fr) 160px;
  }


  .courses-hero-visual{
    width:150px;
    height:150px;
  }


  .course-summary-grid{
    grid-template-columns:
      repeat(2,1fr);
  }


  .course-filter-grid{
    grid-template-columns:
      repeat(2,1fr);
  }


  .course-search-box{
    grid-column:1/-1;
  }


  .continue-course-card{
    grid-template-columns:
      auto minmax(0,1fr);
  }


  .continue-course-card > .btn{
    grid-column:2;

    justify-self:start;
  }

}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:650px){

  .courses-hero{
    padding:24px 0 18px;
  }


  .courses-hero-card{
    grid-template-columns:1fr;

    padding:21px;
  }


  .courses-hero-visual{
    display:none;
  }


  .courses-hero-content h1{
    font-size:29px;
  }


  .courses-hero-content > p{
    font-size:14px !important;
  }


  .course-summary-grid{
    grid-template-columns:
      repeat(2,1fr);
  }


  .continue-course-card{
    grid-template-columns:1fr;

    padding:19px;
  }


  .continue-course-card > .btn{
    grid-column:auto;

    width:100%;
  }


  .continue-course-progress{
    align-items:flex-start;

    flex-direction:column;
  }


  .continue-course-progress-bar{
    width:100%;
  }


  .course-filter-card{
    padding:18px;
  }


  .course-filter-head{
    align-items:flex-start;
  }


  .course-filter-grid{
    grid-template-columns:1fr;
  }


  .course-search-box{
    grid-column:auto;
  }


  .course-grid{
    grid-template-columns:1fr;
  }


  .course-section-head{
    align-items:flex-start;
  }


  .course-info-grid{
    grid-template-columns:1fr;
  }

}


/* =====================================================
   VERY SMALL MOBILE
===================================================== */

@media(max-width:390px){

  .course-summary-grid{
    grid-template-columns:1fr;
  }


  .course-section-head{
    flex-direction:column;
  }


  .course-result-count-box{
    width:100%;
  }


  .course-card-actions{
    grid-template-columns:1fr;
  }


  .course-view-btn,
  .course-secondary-btn{
    width:100%;
  }

}

/* =====================================================
   GOURAV STUDY ZONE 2.0
   QUIZ PAGE
   RESPONSIVE + READABLE TYPOGRAPHY
===================================================== */


/* =====================================================
   PAGE
===================================================== */

.quiz-page{
  min-height:100vh;
  background:var(--bg);
}


/* =====================================================
   HERO
===================================================== */

.quiz-hero{
  padding:34px 0 22px;

  background:
    radial-gradient(
      circle at 10% 0%,
      rgba(37,99,235,.10),
      transparent 32%
    ),
    radial-gradient(
      circle at 90% 10%,
      rgba(124,58,237,.10),
      transparent 30%
    ),
    var(--bg);
}


.quiz-hero-card{
  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    240px;

  align-items:center;

  gap:28px;

  padding:30px;

  border:1px solid var(--border);
  border-radius:24px;

  background:var(--card);

  box-shadow:
    0 18px 45px
    rgba(15,23,42,.06);
}


.quiz-hero-content h1{
  margin:7px 0 0;

  font-family:"Poppins",sans-serif;

  font-size:
    clamp(32px,4vw,44px);

  line-height:1.15;
}


.quiz-hero-content > p{
  max-width:760px;

  margin:12px 0 0;

  color:var(--muted);

  font-size:15px !important;

  line-height:1.7;
}


/* =====================================================
   HERO TAGS
===================================================== */

.quiz-hero-tags{
  display:flex;
  align-items:center;
  flex-wrap:wrap;

  gap:8px;

  margin-top:17px;
}


.quiz-hero-tags span{
  display:inline-flex;
  align-items:center;

  padding:7px 10px;

  border:1px solid var(--border);
  border-radius:999px;

  background:#f8fafc;

  color:#475569;

  font-size:12px !important;
  font-weight:700;
}


/* =====================================================
   HERO VISUAL
===================================================== */

.quiz-hero-visual{
  width:200px;
  height:180px;

  display:grid;
  place-items:center;

  justify-self:end;

  border-radius:22px;

  background:
    linear-gradient(
      135deg,
      #dbeafe,
      #ede9fe
    );
}


.quiz-hero-visual span{
  font-size:62px;
}


/* =====================================================
   SUMMARY
===================================================== */

.quiz-summary-section{
  padding:0 0 22px;
}


.quiz-summary-grid{
  display:grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap:12px;
}


.quiz-summary-grid article{
  display:flex;
  align-items:center;

  gap:12px;

  padding:16px;

  border:1px solid var(--border);
  border-radius:16px;

  background:var(--card);

  transition:.2s;
}


.quiz-summary-grid article:hover{
  transform:translateY(-3px);

  border-color:#c7d2fe;

  box-shadow:
    0 12px 28px
    rgba(15,23,42,.05);
}


.quiz-summary-grid article > span{
  width:44px;
  height:44px;

  display:grid;
  place-items:center;

  flex-shrink:0;

  border-radius:13px;

  background:#eef2ff;

  font-size:20px;
}


.quiz-summary-grid strong{
  display:block;

  color:var(--primary);

  font-family:"Poppins",sans-serif;

  font-size:21px;
}


.quiz-summary-grid small{
  display:block;

  margin-top:2px;

  color:var(--muted);

  font-size:12px !important;
  font-weight:700;
}


/* =====================================================
   FILTER SECTION
===================================================== */

.quiz-filter-section{
  padding:0 0 24px;
}


.quiz-filter-card{
  padding:22px;

  border:1px solid var(--border);
  border-radius:20px;

  background:var(--card);

  box-shadow:
    0 12px 35px
    rgba(15,23,42,.04);
}


.quiz-filter-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;

  gap:15px;

  padding-bottom:15px;
  margin-bottom:15px;

  border-bottom:1px solid var(--border);
}


.quiz-filter-head h2{
  margin:4px 0 0;

  font-family:"Poppins",sans-serif;

  font-size:24px !important;
}


/* =====================================================
   FILTER GRID
===================================================== */

.quiz-filter-grid{
  display:grid;

  grid-template-columns:
    minmax(280px,1fr)
    minmax(170px,.35fr)
    minmax(190px,.4fr)
    minmax(180px,.35fr);

  gap:11px;

  align-items:end;
}


/* =====================================================
   SEARCH
===================================================== */

.quiz-search-box{
  display:flex;
  align-items:center;

  gap:9px;

  min-height:48px;

  padding:0 13px;

  border:1px solid var(--border);
  border-radius:13px;

  background:var(--card);
}


.quiz-search-box:focus-within{
  border-color:#818cf8;

  box-shadow:
    0 0 0 3px
    rgba(99,102,241,.08);
}


.quiz-search-box input{
  width:100%;

  min-height:46px;

  padding:10px 0;

  border:none !important;

  outline:none;

  background:transparent;

  color:var(--text);

  font-size:14px !important;

  box-shadow:none !important;
}


/* =====================================================
   FILTER FIELD
===================================================== */

.quiz-filter-field{
  display:flex;
  flex-direction:column;

  gap:6px;
}


.quiz-filter-field label{
  color:#475569;

  font-size:13px !important;
  font-weight:800;
}


.quiz-filter-field select{
  width:100%;

  min-height:48px;

  padding:10px 12px;

  border:1px solid var(--border);
  border-radius:13px;

  background:var(--card);

  color:var(--text);

  font-size:14px !important;

  outline:none;
}


.quiz-filter-field select:focus{
  border-color:#818cf8;

  box-shadow:
    0 0 0 3px
    rgba(99,102,241,.08);
}


/* =====================================================
   LIST SECTION
===================================================== */

.quiz-list-section{
  padding:0 0 45px;
}


.quiz-section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;

  gap:20px;

  margin-bottom:16px;
}


.quiz-section-head h2{
  margin:4px 0 0;

  font-family:"Poppins",sans-serif;

  font-size:25px !important;
}


.quiz-section-head p{
  margin:5px 0 0;

  color:var(--muted);

  font-size:14px !important;
}


/* =====================================================
   RESULT COUNT
===================================================== */

.quiz-result-count-box{
  min-width:90px;

  padding:11px 14px;

  border:1px solid var(--border);
  border-radius:14px;

  background:var(--card);

  text-align:center;
}


.quiz-result-count-box strong{
  display:block;

  color:var(--primary);

  font-family:"Poppins",sans-serif;

  font-size:21px;
}


.quiz-result-count-box span{
  display:block;

  color:var(--muted);

  font-size:12px !important;
  font-weight:700;
}


/* =====================================================
   QUIZ GRID
===================================================== */

.quiz-grid{
  display:grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:16px;
}


/* =====================================================
   QUIZ CARD
===================================================== */

.quiz-card{
  position:relative;

  display:flex;
  flex-direction:column;

  min-width:0;

  padding:19px;

  border:1px solid var(--border);
  border-radius:19px;

  background:var(--card);

  transition:
    transform .2s,
    border-color .2s,
    box-shadow .2s;
}


.quiz-card:hover{
  transform:translateY(-4px);

  border-color:#c7d2fe;

  box-shadow:
    0 16px 35px
    rgba(15,23,42,.07);
}


.quiz-card.is-locked{
  border-color:#e5e7eb;
}


/* =====================================================
   QUIZ CARD TOP
===================================================== */

.quiz-card-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;

  gap:12px;
}


.quiz-card-icon{
  width:48px;
  height:48px;

  display:grid;
  place-items:center;

  flex-shrink:0;

  border-radius:14px;

  background:
    linear-gradient(
      135deg,
      #dbeafe,
      #ede9fe
    );

  font-size:22px;
}


.quiz-card-badges{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;

  gap:6px;
}


/* =====================================================
   ACCESS BADGES
===================================================== */

.quiz-access-badge,
.quiz-completed-badge{
  display:inline-flex;
  align-items:center;

  padding:5px 8px;

  border-radius:999px;

  font-size:11px !important;
  font-weight:900;
}


.quiz-access-badge.free{
  background:#dcfce7;
  color:#166534;
}


.quiz-access-badge.login{
  background:#dbeafe;
  color:#1d4ed8;
}


.quiz-access-badge.premium{
  background:#fef3c7;
  color:#92400e;
}


.quiz-completed-badge{
  background:#ecfdf3;
  color:#047857;
}


/* =====================================================
   QUIZ CARD CONTENT
===================================================== */

.quiz-card-content{
  display:flex;
  flex-direction:column;

  flex:1;

  margin-top:14px;
}


.quiz-card-content > small{
  color:var(--primary);

  font-size:12px !important;
  font-weight:800;
}


.quiz-card-content h3{
  margin:5px 0 0;

  font-family:"Poppins",sans-serif;

  font-size:18px !important;

  line-height:1.4;
}


.quiz-card-content > p{
  margin:7px 0 0;

  color:var(--muted);

  font-size:14px !important;

  line-height:1.65;
}


/* =====================================================
   QUIZ META
===================================================== */

.quiz-card-meta{
  display:flex;
  flex-wrap:wrap;

  gap:6px;

  margin-top:12px;
}


.quiz-card-meta span{
  display:inline-flex;
  align-items:center;

  padding:5px 8px;

  border-radius:999px;

  background:#f1f5f9;

  color:#64748b;

  font-size:11px !important;
  font-weight:700;
}


/* =====================================================
   QUIZ CARD RESULT
===================================================== */

.quiz-last-result{
  margin-top:13px;

  padding:11px;

  border-radius:12px;

  background:#f8fafc;
}


.quiz-last-result span{
  display:block;

  color:var(--muted);

  font-size:11px !important;
  font-weight:700;
}


.quiz-last-result strong{
  display:block;

  margin-top:2px;

  color:var(--text);

  font-size:14px !important;
}


/* =====================================================
   QUIZ BUTTON
===================================================== */

.quiz-card-action{
  width:100%;

  min-height:44px;

  margin-top:auto;
  padding:10px 14px;

  border:none;
  border-radius:11px;

  background:
    linear-gradient(
      135deg,
      #2563eb,
      #7c3aed
    );

  color:#fff;

  font-size:14px !important;
  font-weight:800;

  cursor:pointer;
}


/* =====================================================
   ACTIVE QUIZ
===================================================== */

.active-quiz-section{
  padding:30px 0 55px;

  background:
    linear-gradient(
      180deg,
      rgba(99,102,241,.035),
      transparent
    );
}


/* =====================================================
   ACTIVE HEADER
===================================================== */

.active-quiz-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;

  gap:20px;

  margin-bottom:18px;
}


.active-quiz-header h2{
  margin:4px 0 0;

  font-family:"Poppins",sans-serif;

  font-size:28px !important;
}


.active-quiz-header p{
  margin:6px 0 0;

  color:var(--muted);

  font-size:14px !important;
}


/* =====================================================
   QUIZ STATUS
===================================================== */

.active-quiz-status{
  display:grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap:10px;

  margin-bottom:14px;
}


.active-quiz-status > div{
  padding:13px 15px;

  border:1px solid var(--border);
  border-radius:14px;

  background:var(--card);
}


.active-quiz-status span{
  display:block;

  color:var(--muted);

  font-size:12px !important;
  font-weight:700;
}


.active-quiz-status strong{
  display:block;

  margin-top:2px;

  color:var(--text);

  font-size:15px !important;
}


/* =====================================================
   QUIZ PROGRESS
===================================================== */

.quiz-progress-wrap{
  padding:16px;

  border:1px solid var(--border);
  border-radius:15px;

  background:var(--card);

  margin-bottom:16px;
}


.quiz-progress-info{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:10px;

  margin-bottom:7px;
}


.quiz-progress-info span{
  color:var(--muted);

  font-size:12px !important;
  font-weight:700;
}


.quiz-progress-info strong{
  color:var(--primary);

  font-size:13px !important;
}


.quiz-progress-bar{
  height:9px;

  overflow:hidden;

  border-radius:999px;

  background:#e2e8f0;
}


.quiz-progress-bar span{
  display:block;

  height:100%;

  border-radius:999px;

  background:
    linear-gradient(
      90deg,
      #2563eb,
      #7c3aed
    );

  transition:width .25s ease;
}


/* =====================================================
   QUESTION CARD
===================================================== */

.quiz-question-card{
  padding:24px;

  border:1px solid var(--border);
  border-radius:20px;

  background:var(--card);

  box-shadow:
    0 14px 35px
    rgba(15,23,42,.05);
}


.quiz-question-top{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:12px;
}


.quiz-question-number,
.quiz-question-marks{
  display:inline-flex;
  align-items:center;

  padding:6px 9px;

  border-radius:999px;

  font-size:12px !important;
  font-weight:800;
}


.quiz-question-number{
  background:#eef2ff;

  color:#4f46e5;
}


.quiz-question-marks{
  background:#f1f5f9;

  color:#64748b;
}


.quiz-question-card h3{
  margin:18px 0 0;

  font-family:"Poppins",sans-serif;

  font-size:21px !important;

  line-height:1.5;
}


/* =====================================================
   OPTIONS
===================================================== */

.quiz-options{
  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:11px;

  margin-top:20px;
}


.quiz-option{
  display:flex;
  align-items:flex-start;

  gap:11px;

  min-height:65px;

  padding:14px;

  border:1px solid var(--border);
  border-radius:14px;

  background:var(--card);

  color:var(--text);

  text-align:left;

  cursor:pointer;

  transition:.2s;
}


.quiz-option:hover{
  border-color:#a5b4fc;

  background:#f8faff;
}


.quiz-option.selected{
  border-color:#6366f1;

  background:#eef2ff;

  box-shadow:
    0 0 0 2px
    rgba(99,102,241,.08);
}


.quiz-option-letter{
  width:32px;
  height:32px;

  display:grid;
  place-items:center;

  flex-shrink:0;

  border-radius:9px;

  background:#f1f5f9;

  color:#475569;

  font-size:13px !important;
  font-weight:900;
}


.quiz-option.selected
.quiz-option-letter{
  background:#4f46e5;

  color:#fff;
}


.quiz-option-text{
  padding-top:4px;

  font-size:14px !important;

  line-height:1.55;
}


/* =====================================================
   NAVIGATION
===================================================== */

.quiz-navigation{
  display:grid;

  grid-template-columns:
    auto
    minmax(0,1fr)
    auto;

  align-items:center;

  gap:12px;

  margin-top:16px;
}


.quiz-question-navigator{
  display:flex;
  align-items:center;
  justify-content:center;

  flex-wrap:wrap;

  gap:6px;
}


.quiz-question-nav-btn{
  width:34px;
  height:34px;

  display:grid;
  place-items:center;

  border:1px solid var(--border);
  border-radius:9px;

  background:var(--card);

  color:var(--text);

  font-size:12px !important;
  font-weight:800;

  cursor:pointer;
}


.quiz-question-nav-btn.active{
  border-color:#6366f1;

  background:#4f46e5;

  color:#fff;
}


.quiz-question-nav-btn.answered:not(.active){
  background:#dcfce7;

  color:#166534;

  border-color:#bbf7d0;
}


/* =====================================================
   SUBMIT AREA
===================================================== */

.quiz-submit-area{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:18px;

  margin-top:18px;
  padding:18px;

  border:1px solid var(--border);
  border-radius:17px;

  background:var(--card);
}


.quiz-submit-area h3{
  margin:0;

  font-size:17px !important;
}


.quiz-submit-area p{
  margin:4px 0 0;

  color:var(--muted);

  font-size:13px !important;
}


.quiz-submit-btn{
  min-height:46px;

  padding:10px 17px;

  border:none;
  border-radius:12px;

  background:
    linear-gradient(
      135deg,
      #059669,
      #0d9488
    );

  color:#fff;

  font-size:14px !important;
  font-weight:900;

  cursor:pointer;
}


/* =====================================================
   TIPS
===================================================== */

.quiz-tips-grid{
  display:grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap:12px;
}


.quiz-tips-grid article{
  display:flex;
  align-items:flex-start;

  gap:11px;

  padding:17px;

  border:1px solid var(--border);
  border-radius:16px;

  background:var(--card);
}


.quiz-tips-grid article > span{
  width:36px;
  height:36px;

  display:grid;
  place-items:center;

  flex-shrink:0;

  border-radius:50%;

  background:
    linear-gradient(
      135deg,
      #2563eb,
      #7c3aed
    );

  color:#fff;

  font-size:13px !important;
  font-weight:900;
}


.quiz-tips-grid h3{
  margin:0;

  font-size:16px !important;
}


.quiz-tips-grid p{
  margin:4px 0 0;

  color:var(--muted);

  font-size:13px !important;

  line-height:1.6;
}


/* =====================================================
   DARK MODE
===================================================== */

body.dark .quiz-hero{
  background:#0b1120;
}


body.dark .quiz-hero-tags span,
body.dark .quiz-card-meta span,
body.dark .quiz-last-result{
  background:#182235;

  color:#cbd5e1;
}


body.dark .quiz-hero-visual,
body.dark .quiz-card-icon{
  background:
    linear-gradient(
      135deg,
      #172033,
      #211b35
    );
}


body.dark .quiz-summary-grid article > span{
  background:#182235;
}


body.dark .quiz-option:hover{
  background:#151d2d;
}


body.dark .quiz-option.selected{
  background:#1e1b4b;
}


body.dark .quiz-option-letter{
  background:#182235;

  color:#cbd5e1;
}


/* =====================================================
   SMALL DESKTOP
===================================================== */

@media(max-width:1100px){

  .quiz-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }


  .quiz-filter-grid{
    grid-template-columns:
      repeat(2,1fr);
  }


  .quiz-search-box{
    grid-column:1/-1;
  }


  .quiz-tips-grid{
    grid-template-columns:
      repeat(2,1fr);
  }

}


/* =====================================================
   TABLET
===================================================== */

@media(max-width:850px){

  .quiz-hero-card{
    grid-template-columns:
      minmax(0,1fr)
      150px;
  }


  .quiz-hero-visual{
    width:140px;
    height:140px;
  }


  .quiz-summary-grid{
    grid-template-columns:
      repeat(2,1fr);
  }


  .active-quiz-status{
    grid-template-columns:
      repeat(2,1fr);
  }


  .quiz-options{
    grid-template-columns:1fr;
  }


  .quiz-navigation{
    grid-template-columns:
      1fr 1fr;
  }


  .quiz-question-navigator{
    grid-column:1/-1;
    grid-row:1;

    justify-content:flex-start;
  }

}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:650px){

  .quiz-hero{
    padding:24px 0 18px;
  }


  .quiz-hero-card{
    grid-template-columns:1fr;

    padding:21px;
  }


  .quiz-hero-visual{
    display:none;
  }


  .quiz-hero-content h1{
    font-size:29px;
  }


  .quiz-hero-content > p{
    font-size:14px !important;
  }


  .quiz-summary-grid{
    grid-template-columns:
      repeat(2,1fr);
  }


  .quiz-filter-card{
    padding:18px;
  }


  .quiz-filter-head{
    align-items:flex-start;
  }


  .quiz-filter-grid{
    grid-template-columns:1fr;
  }


  .quiz-search-box{
    grid-column:auto;
  }


  .quiz-grid{
    grid-template-columns:1fr;
  }


  .quiz-section-head{
    align-items:flex-start;
  }


  .active-quiz-header{
    flex-direction:column;
  }


  .active-quiz-header h2{
    font-size:24px !important;
  }


  .active-quiz-status{
    grid-template-columns:
      repeat(2,1fr);
  }


  .quiz-question-card{
    padding:19px;
  }


  .quiz-question-card h3{
    font-size:18px !important;
  }


  .quiz-navigation{
    grid-template-columns:1fr 1fr;
  }


  .quiz-navigation > button{
    width:100%;
  }


  .quiz-submit-area{
    flex-direction:column;
    align-items:flex-start;
  }


  .quiz-submit-btn{
    width:100%;
  }


  .quiz-tips-grid{
    grid-template-columns:1fr;
  }

}


/* =====================================================
   VERY SMALL MOBILE
===================================================== */

@media(max-width:390px){

  .quiz-summary-grid{
    grid-template-columns:1fr;
  }


  .quiz-section-head{
    flex-direction:column;
  }


  .quiz-result-count-box{
    width:100%;
  }


  .active-quiz-status{
    grid-template-columns:1fr;
  }


  .quiz-navigation{
    grid-template-columns:1fr;
  }


  .quiz-question-navigator{
    grid-column:auto;
    grid-row:auto;
  }

}

/* =====================================================
   GOURAV STUDY ZONE 2.0
   QUIZ RESULT PAGE
===================================================== */


/* =====================================================
   PAGE
===================================================== */

.quiz-result-page{
  min-height:100vh;
  background:var(--bg);
}


/* =====================================================
   HERO
===================================================== */

.quiz-result-hero{
  padding:34px 0 22px;

  background:
    radial-gradient(
      circle at 10% 0%,
      rgba(37,99,235,.10),
      transparent 32%
    ),
    radial-gradient(
      circle at 90% 10%,
      rgba(16,185,129,.10),
      transparent 30%
    ),
    var(--bg);
}


.quiz-result-hero-card{
  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    210px;

  align-items:center;

  gap:28px;

  padding:30px;

  border:1px solid var(--border);
  border-radius:24px;

  background:var(--card);

  box-shadow:
    0 18px 45px
    rgba(15,23,42,.06);
}


.quiz-result-hero-content h1{
  margin:7px 0 0;

  font-family:"Poppins",sans-serif;

  font-size:
    clamp(30px,4vw,42px);

  line-height:1.2;
}


.quiz-result-hero-content > p{
  max-width:720px;

  margin:10px 0 0;

  color:var(--muted);

  font-size:15px !important;

  line-height:1.7;
}


/* =====================================================
   RESULT META
===================================================== */

.quiz-result-meta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;

  gap:8px;

  margin-top:16px;
}


.quiz-result-meta span{
  padding:7px 10px;

  border:1px solid var(--border);
  border-radius:999px;

  background:#f8fafc;

  color:#475569;

  font-size:12px !important;
  font-weight:700;
}


/* =====================================================
   SCORE CIRCLE
===================================================== */

.quiz-result-score-circle{
  width:175px;
  height:175px;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  justify-self:end;

  border:10px solid #e0e7ff;
  border-radius:50%;

  background:
    linear-gradient(
      145deg,
      #ffffff,
      #f8fafc
    );

  text-align:center;

  box-shadow:
    0 14px 32px
    rgba(79,70,229,.10);
}


.quiz-result-score-circle span{
  color:var(--muted);

  font-size:11px !important;
  font-weight:900;
  letter-spacing:.8px;
}


.quiz-result-score-circle strong{
  margin-top:2px;

  color:var(--primary);

  font-family:"Poppins",sans-serif;

  font-size:37px;
  line-height:1.1;
}


.quiz-result-score-circle small{
  margin-top:5px;

  color:var(--text);

  font-size:12px !important;
  font-weight:800;
}


/* =====================================================
   SUMMARY
===================================================== */

.quiz-result-summary-section{
  padding:0 0 22px;
}


.quiz-result-summary-grid{
  display:grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap:12px;
}


.quiz-result-summary-grid article{
  display:flex;
  align-items:center;

  gap:12px;

  padding:16px;

  border:1px solid var(--border);
  border-radius:16px;

  background:var(--card);

  transition:.2s;
}


.quiz-result-summary-grid article:hover{
  transform:translateY(-3px);

  border-color:#c7d2fe;

  box-shadow:
    0 12px 28px
    rgba(15,23,42,.05);
}


.quiz-result-summary-icon{
  width:44px;
  height:44px;

  display:grid;
  place-items:center;

  flex-shrink:0;

  border-radius:13px;

  background:#eef2ff;

  font-size:19px;
}


.quiz-result-summary-grid small{
  display:block;

  color:var(--muted);

  font-size:11px !important;
  font-weight:800;
}


.quiz-result-summary-grid strong{
  display:block;

  margin-top:2px;

  color:var(--text);

  font-family:"Poppins",sans-serif;

  font-size:20px;
}


/* =====================================================
   MAIN LAYOUT
===================================================== */

.quiz-result-performance-section{
  padding:0 0 55px;
}


.quiz-result-layout{
  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    330px;

  gap:18px;

  align-items:start;
}


.quiz-result-main{
  display:flex;
  flex-direction:column;

  gap:18px;
}


/* =====================================================
   PANEL
===================================================== */

.quiz-result-panel{
  padding:22px;

  border:1px solid var(--border);
  border-radius:20px;

  background:var(--card);

  box-shadow:
    0 12px 35px
    rgba(15,23,42,.04);
}


.quiz-result-panel-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;

  gap:18px;

  margin-bottom:18px;
}


.quiz-result-panel-head h2{
  margin:4px 0 0;

  font-family:"Poppins",sans-serif;

  font-size:24px !important;
}


.quiz-result-panel-head p{
  margin:5px 0 0;

  color:var(--muted);

  font-size:14px !important;

  line-height:1.6;
}


/* =====================================================
   STATUS BADGE
===================================================== */

.quiz-result-status-badge{
  display:inline-flex;
  align-items:center;

  padding:7px 10px;

  border-radius:999px;

  background:#dcfce7;

  color:#166534;

  font-size:12px !important;
  font-weight:900;
}


.quiz-result-status-badge.excellent{
  background:#dcfce7;
  color:#166534;
}


.quiz-result-status-badge.good{
  background:#dbeafe;
  color:#1d4ed8;
}


.quiz-result-status-badge.average{
  background:#fef3c7;
  color:#92400e;
}


.quiz-result-status-badge.needs-practice{
  background:#fee2e2;
  color:#991b1b;
}


/* =====================================================
   PERFORMANCE PROGRESS
===================================================== */

.quiz-result-progress-block{
  padding:16px;

  border:1px solid var(--border);
  border-radius:15px;

  background:#f8fafc;
}


.quiz-result-progress-info{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:12px;

  margin-bottom:8px;
}


.quiz-result-progress-info span{
  color:var(--muted);

  font-size:13px !important;
  font-weight:700;
}


.quiz-result-progress-info strong{
  color:var(--primary);

  font-size:14px !important;
  font-weight:900;
}


.quiz-result-progress-bar{
  height:10px;

  overflow:hidden;

  border-radius:999px;

  background:#e2e8f0;
}


.quiz-result-progress-bar span{
  display:block;

  height:100%;

  border-radius:999px;

  background:
    linear-gradient(
      90deg,
      #2563eb,
      #7c3aed,
      #059669
    );

  transition:width .3s ease;
}


/* =====================================================
   RESULT MESSAGE
===================================================== */

.quiz-result-message-box{
  display:flex;
  align-items:flex-start;

  gap:13px;

  margin-top:15px;
  padding:17px;

  border:1px solid #c7d2fe;
  border-radius:16px;

  background:
    linear-gradient(
      135deg,
      #f5f7ff,
      #f8fafc
    );
}


.quiz-result-message-box > span{
  width:44px;
  height:44px;

  display:grid;
  place-items:center;

  flex-shrink:0;

  border-radius:13px;

  background:#eef2ff;

  font-size:21px;
}


.quiz-result-message-box h3{
  margin:0;

  font-size:17px !important;
}


.quiz-result-message-box p{
  margin:4px 0 0;

  color:var(--muted);

  font-size:14px !important;

  line-height:1.6;
}


/* =====================================================
   QUESTION COUNT
===================================================== */

.quiz-result-question-count{
  display:inline-flex;
  align-items:center;

  padding:7px 10px;

  border:1px solid var(--border);
  border-radius:999px;

  background:#f8fafc;

  color:#475569;

  font-size:12px !important;
  font-weight:800;
}


/* =====================================================
   ANSWER REVIEW
===================================================== */

.quiz-answer-review{
  display:flex;
  flex-direction:column;

  gap:13px;
}


/* =====================================================
   REVIEW ITEM
===================================================== */

.quiz-review-item{
  overflow:hidden;

  border:1px solid var(--border);
  border-radius:16px;

  background:var(--card);
}


.quiz-review-item.correct{
  border-color:#bbf7d0;
}


.quiz-review-item.incorrect{
  border-color:#fecaca;
}


.quiz-review-item.unanswered{
  border-color:#fde68a;
}


/* =====================================================
   REVIEW HEADER
===================================================== */

.quiz-review-head{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:12px;

  padding:13px 15px;

  border-bottom:1px solid var(--border);

  background:#f8fafc;
}


.quiz-review-head span:first-child{
  color:var(--primary);

  font-size:12px !important;
  font-weight:900;
}


.quiz-review-status{
  display:inline-flex;
  align-items:center;

  padding:5px 8px;

  border-radius:999px;

  font-size:11px !important;
  font-weight:900;
}


.quiz-review-status.correct{
  background:#dcfce7;
  color:#166534;
}


.quiz-review-status.incorrect{
  background:#fee2e2;
  color:#991b1b;
}


.quiz-review-status.unanswered{
  background:#fef3c7;
  color:#92400e;
}


/* =====================================================
   REVIEW CONTENT
===================================================== */

.quiz-review-content{
  padding:16px;
}


.quiz-review-content h3{
  margin:0;

  font-size:16px !important;

  line-height:1.55;
}


/* =====================================================
   REVIEW ANSWERS
===================================================== */

.quiz-review-answers{
  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:10px;

  margin-top:13px;
}


.quiz-review-answer{
  padding:11px 12px;

  border:1px solid var(--border);
  border-radius:12px;

  background:#f8fafc;
}


.quiz-review-answer small{
  display:block;

  color:var(--muted);

  font-size:11px !important;
  font-weight:800;
}


.quiz-review-answer strong{
  display:block;

  margin-top:4px;

  color:var(--text);

  font-size:13px !important;

  line-height:1.5;
}


.quiz-review-answer.correct-answer{
  border-color:#bbf7d0;

  background:#f0fdf4;
}


.quiz-review-answer.wrong-answer{
  border-color:#fecaca;

  background:#fef2f2;
}


/* =====================================================
   SIDEBAR
===================================================== */

.quiz-result-sidebar{
  display:flex;
  flex-direction:column;

  gap:14px;
}


.quiz-result-side-card{
  padding:18px;

  border:1px solid var(--border);
  border-radius:18px;

  background:var(--card);

  box-shadow:
    0 10px 28px
    rgba(15,23,42,.04);
}


.quiz-result-side-title{
  display:flex;
  align-items:center;

  gap:8px;

  padding-bottom:12px;
  margin-bottom:4px;

  border-bottom:1px solid var(--border);
}


.quiz-result-side-title h3{
  margin:0;

  font-size:17px !important;
}


.quiz-result-side-card > p{
  color:var(--muted);

  font-size:13px !important;

  line-height:1.65;
}


/* =====================================================
   SIDE ROWS
===================================================== */

.quiz-result-side-row{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:15px;

  padding:10px 0;

  border-bottom:1px solid var(--border);
}


.quiz-result-side-row:last-child{
  border-bottom:none;
}


.quiz-result-side-row span{
  color:var(--muted);

  font-size:13px !important;
}


.quiz-result-side-row strong{
  color:var(--text);

  font-size:13px !important;

  text-align:right;
}


/* =====================================================
   ACTION BUTTONS
===================================================== */

.quiz-result-action-btn{
  width:100%;

  margin-top:12px;

  text-align:center;
}


.quiz-result-secondary-action{
  display:flex;
  align-items:center;
  justify-content:center;

  width:100%;

  min-height:42px;

  margin-top:8px;
  padding:9px 12px;

  border:1px solid var(--border);
  border-radius:11px;

  background:var(--card);

  color:var(--text);

  font-size:13px !important;
  font-weight:800;

  text-decoration:none;
}


.quiz-result-secondary-action:hover{
  background:#eef2ff;

  border-color:#c7d2fe;

  color:var(--primary);
}


/* =====================================================
   NO RESULT
===================================================== */

.quiz-no-result-section{
  padding:70px 0;
}


.quiz-no-result-card{
  max-width:620px;

  margin:0 auto;
  padding:38px;

  border:1px solid var(--border);
  border-radius:22px;

  background:var(--card);

  text-align:center;

  box-shadow:
    0 16px 40px
    rgba(15,23,42,.06);
}


.quiz-no-result-card > span{
  display:block;

  font-size:54px;
}


.quiz-no-result-card h2{
  margin:12px 0 0;

  font-family:"Poppins",sans-serif;

  font-size:25px !important;
}


.quiz-no-result-card p{
  max-width:460px;

  margin:8px auto 18px;

  color:var(--muted);

  font-size:14px !important;

  line-height:1.7;
}


/* =====================================================
   DARK MODE
===================================================== */

body.dark .quiz-result-hero{
  background:#0b1120;
}


body.dark .quiz-result-meta span,
body.dark .quiz-result-question-count,
body.dark .quiz-result-progress-block,
body.dark .quiz-review-head,
body.dark .quiz-review-answer{
  background:#182235;

  color:#cbd5e1;
}


body.dark .quiz-result-score-circle{
  background:#111827;

  border-color:#29344c;
}


body.dark .quiz-result-message-box{
  background:
    linear-gradient(
      135deg,
      #151d2d,
      #171c2c
    );

  border-color:#394563;
}


body.dark .quiz-result-message-box > span{
  background:#182235;
}


body.dark .quiz-review-answer.correct-answer{
  background:#12261d;

  border-color:#235f40;
}


body.dark .quiz-review-answer.wrong-answer{
  background:#2a1717;

  border-color:#633333;
}


body.dark .quiz-result-secondary-action:hover{
  background:#182235;
}


/* =====================================================
   SMALL DESKTOP
===================================================== */

@media(max-width:1050px){

  .quiz-result-layout{
    grid-template-columns:
      minmax(0,1fr)
      280px;
  }

}


/* =====================================================
   TABLET
===================================================== */

@media(max-width:850px){

  .quiz-result-hero-card{
    grid-template-columns:
      minmax(0,1fr)
      150px;
  }


  .quiz-result-score-circle{
    width:145px;
    height:145px;

    border-width:8px;
  }


  .quiz-result-score-circle strong{
    font-size:30px;
  }


  .quiz-result-summary-grid{
    grid-template-columns:
      repeat(2,1fr);
  }


  .quiz-result-layout{
    grid-template-columns:1fr;
  }


  .quiz-result-sidebar{
    display:grid;

    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }


  .quiz-result-sidebar
  .quiz-result-side-card:first-child{
    grid-column:1/-1;
  }

}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:650px){

  .quiz-result-hero{
    padding:24px 0 18px;
  }


  .quiz-result-hero-card{
    grid-template-columns:1fr;

    padding:21px;
  }


  .quiz-result-score-circle{
    width:145px;
    height:145px;

    justify-self:start;

    margin-top:5px;
  }


  .quiz-result-hero-content h1{
    font-size:29px;
  }


  .quiz-result-summary-grid{
    grid-template-columns:
      repeat(2,1fr);
  }


  .quiz-result-panel{
    padding:18px;
  }


  .quiz-result-panel-head{
    flex-direction:column;
  }


  .quiz-result-panel-head h2{
    font-size:21px !important;
  }


  .quiz-review-answers{
    grid-template-columns:1fr;
  }


  .quiz-result-sidebar{
    display:flex;
  }

}


/* =====================================================
   VERY SMALL MOBILE
===================================================== */

@media(max-width:390px){

  .quiz-result-summary-grid{
    grid-template-columns:1fr;
  }


  .quiz-result-meta{
    flex-direction:column;
    align-items:flex-start;
  }


  .quiz-result-score-circle{
    width:135px;
    height:135px;
  }


  .quiz-result-score-circle strong{
    font-size:27px;
  }


  .quiz-result-panel{
    padding:16px;
  }

}

/* =====================================================
   QUIZ PREVIOUS BUTTON FIX
===================================================== */

.quiz-navigation .secondary-btn{

  min-height:46px;

  padding:10px 17px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  border:1px solid #d8deea;
  border-radius:12px;

  background:#ffffff;

  color:#172033;

  font-size:14px !important;
  font-weight:800;

  cursor:pointer;

  transition:
    background .2s ease,
    color .2s ease,
    border-color .2s ease,
    transform .2s ease;
}


.quiz-navigation .secondary-btn:hover{

  background:#eef2ff;

  color:#4f46e5;

  border-color:#a5b4fc;

  transform:translateY(-1px);
}


.quiz-navigation .secondary-btn:disabled{

  opacity:.45;

  cursor:not-allowed;

  transform:none;

  background:#f8fafc;

  color:#94a3b8;
}


/* DARK MODE */

body.dark
.quiz-navigation
.secondary-btn{

  background:#111827;

  color:#e5e7eb;

  border-color:#334155;
}


body.dark
.quiz-navigation
.secondary-btn:hover{

  background:#182235;

  color:#a5b4fc;

  border-color:#6366f1;
}


/* MOBILE */

@media(max-width:650px){

  .quiz-navigation .secondary-btn{
    min-height:44px;
    font-size:14px !important;
  }

}

/* =====================================================
   QUIZ SECONDARY BUTTON - FINAL FIX
   Exit Quiz + Previous Button
===================================================== */

.quiz-page .secondary-btn{

  min-height:44px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  gap:7px;

  padding:10px 16px;

  border:1px solid #d8deea;
  border-radius:12px;

  background:#ffffff;

  color:#172033;

  font-size:14px !important;
  font-weight:800;

  font-family:inherit;

  cursor:pointer;

  box-shadow:
    0 4px 12px
    rgba(15,23,42,.04);

  transition:
    background .2s ease,
    color .2s ease,
    border-color .2s ease,
    box-shadow .2s ease,
    transform .2s ease;
}


.quiz-page .secondary-btn:hover{

  background:#eef2ff;

  color:#4f46e5;

  border-color:#a5b4fc;

  box-shadow:
    0 7px 18px
    rgba(79,70,229,.10);

  transform:translateY(-1px);
}


.quiz-page .secondary-btn:active{

  transform:translateY(0);

}


/* =====================================================
   DISABLED PREVIOUS
===================================================== */

.quiz-page .secondary-btn:disabled{

  opacity:.45;

  cursor:not-allowed;

  transform:none;

  box-shadow:none;

  background:#f8fafc;

  color:#94a3b8;

  border-color:#e2e8f0;
}


/* =====================================================
   EXIT QUIZ BUTTON
===================================================== */

.active-quiz-header #exitQuizBtn{

  flex-shrink:0;

  min-width:115px;

  color:#dc2626;

  border-color:#fecaca;

  background:#fffafa;
}


.active-quiz-header #exitQuizBtn:hover{

  color:#b91c1c;

  background:#fef2f2;

  border-color:#fca5a5;

  box-shadow:
    0 7px 18px
    rgba(220,38,38,.10);
}


/* =====================================================
   PREVIOUS BUTTON
===================================================== */

.quiz-navigation #previousQuestionBtn{

  min-width:115px;

}


/* =====================================================
   DARK MODE
===================================================== */

body.dark
.quiz-page
.secondary-btn{

  background:#111827;

  color:#e5e7eb;

  border-color:#334155;
}


body.dark
.quiz-page
.secondary-btn:hover{

  background:#182235;

  color:#a5b4fc;

  border-color:#6366f1;
}


body.dark
.active-quiz-header
#exitQuizBtn{

  background:#251718;

  color:#fca5a5;

  border-color:#633333;
}


body.dark
.active-quiz-header
#exitQuizBtn:hover{

  background:#321a1c;

  color:#fecaca;

  border-color:#ef4444;
}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:650px){

  .active-quiz-header #exitQuizBtn{

    min-width:0;

    width:100%;

  }


  .quiz-navigation #previousQuestionBtn{

    min-width:0;

  }

}

/* =====================================================
   GOURAV STUDY ZONE 2.0
   CAREER & PLACEMENT PAGE
===================================================== */


/* =====================================================
   PAGE
===================================================== */

.career-page{
  min-height:100vh;
  background:var(--bg);
}


/* =====================================================
   HERO
===================================================== */

.career-hero{
  padding:34px 0 22px;

  background:
    radial-gradient(
      circle at 12% 0%,
      rgba(37,99,235,.10),
      transparent 32%
    ),
    radial-gradient(
      circle at 90% 12%,
      rgba(16,185,129,.10),
      transparent 30%
    ),
    var(--bg);
}


.career-hero-card{
  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    240px;

  align-items:center;

  gap:28px;

  padding:30px;

  border:1px solid var(--border);
  border-radius:24px;

  background:var(--card);

  box-shadow:
    0 18px 45px
    rgba(15,23,42,.06);
}


.career-hero-content h1{
  margin:7px 0 0;

  font-family:"Poppins",sans-serif;

  font-size:
    clamp(32px,4vw,44px);

  line-height:1.15;
}


.career-hero-content > p{
  max-width:760px;

  margin:12px 0 0;

  color:var(--muted);

  font-size:15px !important;
  line-height:1.7;
}


/* =====================================================
   HERO TAGS
===================================================== */

.career-hero-tags{
  display:flex;
  align-items:center;
  flex-wrap:wrap;

  gap:8px;

  margin-top:17px;
}


.career-hero-tags span{
  display:inline-flex;
  align-items:center;

  padding:7px 10px;

  border:1px solid var(--border);
  border-radius:999px;

  background:#f8fafc;

  color:#475569;

  font-size:12px !important;
  font-weight:700;
}


/* =====================================================
   HERO VISUAL
===================================================== */

.career-hero-visual{
  width:200px;
  height:180px;

  display:grid;
  place-items:center;

  justify-self:end;

  border-radius:22px;

  background:
    linear-gradient(
      135deg,
      #dbeafe,
      #dcfce7
    );
}


.career-hero-visual span{
  font-size:62px;
}


/* =====================================================
   SUMMARY
===================================================== */

.career-summary-section{
  padding:0 0 22px;
}


.career-summary-grid{
  display:grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap:12px;
}


.career-summary-grid article{
  display:flex;
  align-items:center;

  gap:12px;

  padding:16px;

  border:1px solid var(--border);
  border-radius:16px;

  background:var(--card);

  transition:.2s;
}


.career-summary-grid article:hover{
  transform:translateY(-3px);

  border-color:#c7d2fe;

  box-shadow:
    0 12px 28px
    rgba(15,23,42,.05);
}


.career-summary-grid article > span{
  width:44px;
  height:44px;

  display:grid;
  place-items:center;

  flex-shrink:0;

  border-radius:13px;

  background:#eef2ff;

  font-size:20px;
}


.career-summary-grid article strong{
  display:block;

  color:var(--primary);

  font-family:"Poppins",sans-serif;

  font-size:21px;
}


.career-summary-grid article small{
  display:block;

  margin-top:2px;

  color:var(--muted);

  font-size:12px !important;
  font-weight:700;
}


/* =====================================================
   FILTER SECTION
===================================================== */

.career-filter-section{
  padding:0 0 24px;
}


.career-filter-card{
  padding:22px;

  border:1px solid var(--border);
  border-radius:20px;

  background:var(--card);

  box-shadow:
    0 12px 35px
    rgba(15,23,42,.04);
}


.career-filter-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;

  gap:15px;

  padding-bottom:15px;
  margin-bottom:15px;

  border-bottom:1px solid var(--border);
}


.career-filter-head h2{
  margin:4px 0 0;

  font-family:"Poppins",sans-serif;

  font-size:24px !important;
}


/* =====================================================
   FILTER GRID
===================================================== */

.career-filter-grid{
  display:grid;

  grid-template-columns:
    minmax(300px,1fr)
    minmax(210px,.45fr)
    minmax(180px,.35fr);

  gap:11px;

  align-items:end;
}


/* =====================================================
   SEARCH
===================================================== */

.career-search-box{
  display:flex;
  align-items:center;

  gap:9px;

  min-height:48px;

  padding:0 13px;

  border:1px solid var(--border);
  border-radius:13px;

  background:var(--card);
}


.career-search-box:focus-within{
  border-color:#818cf8;

  box-shadow:
    0 0 0 3px
    rgba(99,102,241,.08);
}


.career-search-box input{
  width:100%;

  min-height:46px;

  padding:10px 0;

  border:none !important;

  outline:none;

  background:transparent;

  color:var(--text);

  font-size:14px !important;

  box-shadow:none !important;
}


/* =====================================================
   FILTER FIELD
===================================================== */

.career-filter-field{
  display:flex;
  flex-direction:column;

  gap:6px;
}


.career-filter-field label{
  color:#475569;

  font-size:13px !important;
  font-weight:800;
}


.career-filter-field select{
  width:100%;

  min-height:48px;

  padding:10px 12px;

  border:1px solid var(--border);
  border-radius:13px;

  outline:none;

  background:var(--card);

  color:var(--text);

  font-size:14px !important;
}


.career-filter-field select:focus{
  border-color:#818cf8;

  box-shadow:
    0 0 0 3px
    rgba(99,102,241,.08);
}


/* =====================================================
   CATEGORY SECTION
===================================================== */

.career-category-section{
  padding:0 0 45px;
}


.career-section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;

  gap:20px;

  margin-bottom:16px;
}


.career-section-head h2{
  margin:4px 0 0;

  font-family:"Poppins",sans-serif;

  font-size:25px !important;
}


.career-section-head p{
  margin:5px 0 0;

  color:var(--muted);

  font-size:14px !important;
}


/* =====================================================
   RESULT COUNT
===================================================== */

.career-result-count{
  min-width:90px;

  padding:11px 14px;

  border:1px solid var(--border);
  border-radius:14px;

  background:var(--card);

  text-align:center;
}


.career-result-count strong{
  display:block;

  color:var(--primary);

  font-family:"Poppins",sans-serif;

  font-size:21px;
}


.career-result-count span{
  display:block;

  color:var(--muted);

  font-size:12px !important;
  font-weight:700;
}


/* =====================================================
   CATEGORY GRID
===================================================== */

.career-category-grid{
  display:grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap:14px;
}


/* =====================================================
   CATEGORY CARD
===================================================== */

.career-category-card{
  display:flex;
  flex-direction:column;

  min-width:0;

  padding:18px;

  border:1px solid var(--border);
  border-radius:18px;

  background:var(--card);

  transition:
    transform .2s,
    border-color .2s,
    box-shadow .2s;
}


.career-category-card:hover{
  transform:translateY(-4px);

  border-color:#c7d2fe;

  box-shadow:
    0 16px 35px
    rgba(15,23,42,.07);
}


.career-category-card.is-locked{
  border-color:#e5e7eb;
}


.career-category-icon{
  width:48px;
  height:48px;

  display:grid;
  place-items:center;

  border-radius:14px;

  background:
    linear-gradient(
      135deg,
      #dbeafe,
      #ede9fe
    );

  font-size:22px;
}


.career-category-card small{
  display:block;

  margin-top:13px;

  color:var(--primary);

  font-size:12px !important;
  font-weight:800;
}


.career-category-card h3{
  margin:5px 0 0;

  font-family:"Poppins",sans-serif;

  font-size:17px !important;

  line-height:1.4;
}


.career-category-card p{
  margin:7px 0 0;

  color:var(--muted);

  font-size:14px !important;
  line-height:1.6;
}


/* =====================================================
   CATEGORY META
===================================================== */

.career-card-meta{
  display:flex;
  flex-wrap:wrap;

  gap:6px;

  margin-top:12px;
}


.career-card-meta span{
  display:inline-flex;
  align-items:center;

  padding:5px 8px;

  border-radius:999px;

  background:#f1f5f9;

  color:#64748b;

  font-size:11px !important;
  font-weight:700;
}


/* =====================================================
   ACCESS BADGES
===================================================== */

.career-access-badge{
  display:inline-flex;
  align-items:center;

  width:max-content;

  margin-top:12px;

  padding:5px 8px;

  border-radius:999px;

  font-size:11px !important;
  font-weight:900;
}


.career-access-badge.free{
  background:#dcfce7;
  color:#166534;
}


.career-access-badge.login{
  background:#dbeafe;
  color:#1d4ed8;
}


.career-access-badge.premium{
  background:#fef3c7;
  color:#92400e;
}


/* =====================================================
   CATEGORY BUTTON
===================================================== */

.career-card-btn{
  width:100%;

  min-height:43px;

  margin-top:auto;
  padding:10px 13px;

  border:none;
  border-radius:11px;

  background:
    linear-gradient(
      135deg,
      #2563eb,
      #7c3aed
    );

  color:#fff;

  font-size:13px !important;
  font-weight:800;

  cursor:pointer;
}


/* =====================================================
   TECHNICAL SUBJECTS
===================================================== */

.career-technical-grid{
  display:grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:14px;
}


.career-topic-card{
  display:block;

  padding:18px;

  border:1px solid var(--border);
  border-radius:17px;

  background:var(--card);

  color:var(--text);

  text-decoration:none;

  transition:
    transform .2s,
    border-color .2s,
    box-shadow .2s;
}


.career-topic-card:hover{
  transform:translateY(-3px);

  border-color:#a5b4fc;

  box-shadow:
    0 14px 30px
    rgba(15,23,42,.06);
}


.career-topic-card > span{
  width:44px;
  height:44px;

  display:grid;
  place-items:center;

  border-radius:13px;

  background:
    linear-gradient(
      135deg,
      #2563eb,
      #7c3aed
    );

  color:#fff;

  font-size:13px !important;
  font-weight:900;
}


.career-topic-card h3{
  margin:11px 0 0;

  font-size:17px !important;
}


.career-topic-card p{
  margin:6px 0 0;

  color:var(--muted);

  font-size:14px !important;
  line-height:1.6;
}


/* =====================================================
   COMPANY SECTION
===================================================== */

.career-company-section{
  padding:45px 0;

  background:
    linear-gradient(
      180deg,
      rgba(99,102,241,.035),
      transparent
    );
}


.career-company-grid{
  display:grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:14px;
}


/* =====================================================
   COMPANY CARD
===================================================== */

.career-company-card{
  display:flex;
  align-items:center;

  gap:13px;

  padding:16px;

  border:1px solid var(--border);
  border-radius:17px;

  background:var(--card);

  transition:.2s;
}


.career-company-card:hover{
  transform:translateY(-3px);

  border-color:#c7d2fe;

  box-shadow:
    0 12px 28px
    rgba(15,23,42,.06);
}


.career-company-logo{
  width:48px;
  height:48px;

  display:grid;
  place-items:center;

  flex-shrink:0;

  border-radius:14px;

  background:#eef2ff;

  color:#4f46e5;

  font-size:14px !important;
  font-weight:900;
}


.career-company-content{
  min-width:0;
  flex:1;
}


.career-company-content h3{
  margin:0;

  font-size:16px !important;
}


.career-company-content p{
  margin:4px 0 0;

  color:var(--muted);

  font-size:13px !important;
}


.career-company-open{
  min-width:38px;
  height:38px;

  display:grid;
  place-items:center;

  flex-shrink:0;

  border:none;
  border-radius:10px;

  background:#eef2ff;

  color:#4f46e5;

  font-size:16px;

  cursor:pointer;
}


/* =====================================================
   ROADMAP
===================================================== */

.career-roadmap-grid{
  display:grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:13px;
}


.career-roadmap-grid article{
  display:flex;
  align-items:flex-start;

  gap:12px;

  padding:18px;

  border:1px solid var(--border);
  border-radius:17px;

  background:var(--card);
}


.career-roadmap-grid article > span{
  width:38px;
  height:38px;

  display:grid;
  place-items:center;

  flex-shrink:0;

  border-radius:50%;

  background:
    linear-gradient(
      135deg,
      #2563eb,
      #7c3aed
    );

  color:#fff;

  font-size:13px !important;
  font-weight:900;
}


.career-roadmap-grid h3{
  margin:0;

  font-size:16px !important;
}


.career-roadmap-grid p{
  margin:5px 0 0;

  color:var(--muted);

  font-size:13px !important;

  line-height:1.6;
}


/* =====================================================
   ADMIN READY / UPDATE CARD
===================================================== */

.career-admin-ready-section{
  padding:0 0 55px;
}


.career-admin-ready-card{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:22px;

  padding:24px;

  border:1px solid #c7d2fe;
  border-radius:20px;

  background:
    linear-gradient(
      135deg,
      #f5f7ff,
      #f0fdf4
    );
}


.career-admin-ready-card h2{
  margin:4px 0 0;

  font-family:"Poppins",sans-serif;

  font-size:22px !important;
}


.career-admin-ready-card p{
  max-width:750px;

  margin:6px 0 0;

  color:var(--muted);

  font-size:14px !important;
  line-height:1.65;
}


/* =====================================================
   DARK MODE
===================================================== */

body.dark .career-hero{
  background:#0b1120;
}


body.dark .career-hero-tags span,
body.dark .career-card-meta span{
  background:#182235;

  color:#cbd5e1;
}


body.dark .career-hero-visual,
body.dark .career-category-icon{
  background:
    linear-gradient(
      135deg,
      #172033,
      #211b35
    );
}


body.dark .career-summary-grid article > span,
body.dark .career-company-logo,
body.dark .career-company-open{
  background:#182235;
}


body.dark .career-admin-ready-card{
  background:
    linear-gradient(
      135deg,
      #141d32,
      #13251e
    );

  border-color:#394563;
}


/* =====================================================
   SMALL DESKTOP
===================================================== */

@media(max-width:1100px){

  .career-category-grid{
    grid-template-columns:
      repeat(3,minmax(0,1fr));
  }


  .career-technical-grid,
  .career-company-grid,
  .career-roadmap-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

}


/* =====================================================
   TABLET
===================================================== */

@media(max-width:850px){

  .career-hero-card{
    grid-template-columns:
      minmax(0,1fr)
      150px;
  }


  .career-hero-visual{
    width:140px;
    height:140px;
  }


  .career-summary-grid{
    grid-template-columns:
      repeat(2,1fr);
  }


  .career-filter-grid{
    grid-template-columns:
      repeat(2,1fr);
  }


  .career-search-box{
    grid-column:1/-1;
  }


  .career-category-grid{
    grid-template-columns:
      repeat(2,1fr);
  }

}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:650px){

  .career-hero{
    padding:24px 0 18px;
  }


  .career-hero-card{
    grid-template-columns:1fr;

    padding:21px;
  }


  .career-hero-visual{
    display:none;
  }


  .career-hero-content h1{
    font-size:29px;
  }


  .career-hero-content > p{
    font-size:14px !important;
  }


  .career-summary-grid{
    grid-template-columns:
      repeat(2,1fr);
  }


  .career-filter-card{
    padding:18px;
  }


  .career-filter-head{
    align-items:flex-start;
  }


  .career-filter-grid{
    grid-template-columns:1fr;
  }


  .career-search-box{
    grid-column:auto;
  }


  .career-section-head{
    align-items:flex-start;
  }


  .career-category-grid,
  .career-technical-grid,
  .career-company-grid,
  .career-roadmap-grid{
    grid-template-columns:1fr;
  }


  .career-admin-ready-card{
    flex-direction:column;
    align-items:flex-start;
  }


  .career-admin-ready-card .btn{
    width:100%;
    text-align:center;
  }

}


/* =====================================================
   VERY SMALL MOBILE
===================================================== */

@media(max-width:390px){

  .career-summary-grid{
    grid-template-columns:1fr;
  }


  .career-section-head{
    flex-direction:column;
  }


  .career-result-count{
    width:100%;
  }

}

/* =====================================================
   GOURAV STUDY ZONE 2.0
   ADMIN LOGIN PAGE
===================================================== */


/* =====================================================
   PAGE
===================================================== */

.admin-auth-page{
  min-height:100vh;
  margin:0;

  background:
    radial-gradient(
      circle at 10% 10%,
      rgba(79,70,229,.12),
      transparent 34%
    ),
    radial-gradient(
      circle at 90% 90%,
      rgba(14,165,233,.10),
      transparent 32%
    ),
    #f7f9fc;

  color:#172033;
}


/* =====================================================
   MAIN WRAPPER
===================================================== */

.admin-login-wrapper{
  width:100%;
  min-height:100vh;

  display:grid;
  grid-template-columns:
    minmax(420px,540px)
    minmax(0,1fr);

  align-items:stretch;
}


/* =====================================================
   LEFT LOGIN CARD
===================================================== */

.admin-login-card{
  min-height:100vh;

  display:flex;
  flex-direction:column;
  justify-content:center;

  padding:
    clamp(34px,5vw,72px);

  background:#ffffff;

  border-right:1px solid #e7eaf0;
}


/* =====================================================
   BRAND
===================================================== */

.admin-login-brand{
  margin-bottom:42px;
}


.admin-login-logo{
  display:inline-flex;
  align-items:center;

  gap:12px;

  color:#172033;

  text-decoration:none;
}


.admin-login-logo-mark{
  width:50px;
  height:50px;

  display:grid;
  place-items:center;

  flex-shrink:0;

  border-radius:15px;

  background:
    linear-gradient(
      135deg,
      #2563eb,
      #7c3aed
    );

  color:#ffffff;

  font-size:22px !important;
  font-weight:900;

  box-shadow:
    0 10px 24px
    rgba(79,70,229,.22);
}


.admin-login-logo strong{
  display:block;

  font-size:18px !important;
  font-weight:900;
}


.admin-login-logo small{
  display:block;

  margin-top:2px;

  color:#64748b;

  font-size:12px !important;
  font-weight:600;
}


/* =====================================================
   HEADING
===================================================== */

.admin-login-heading{
  margin-bottom:28px;
}


.admin-login-heading h1{
  margin:7px 0 0;

  font-size:
    clamp(30px,4vw,38px) !important;

  line-height:1.2;
}


.admin-login-heading p{
  margin:8px 0 0;

  color:#64748b;

  font-size:15px !important;
  line-height:1.65;
}


/* =====================================================
   FORM
===================================================== */

.admin-login-form{
  display:flex;
  flex-direction:column;

  gap:18px;
}


.admin-login-field{
  display:flex;
  flex-direction:column;

  gap:7px;
}


.admin-login-field label{
  color:#334155;

  font-size:14px !important;
  font-weight:800;
}


/* =====================================================
   INPUT
===================================================== */

.admin-login-input{
  min-height:52px;

  display:flex;
  align-items:center;

  gap:10px;

  padding:0 14px;

  border:1px solid #dfe4ec;
  border-radius:14px;

  background:#ffffff;

  transition:
    border-color .2s ease,
    box-shadow .2s ease;
}


.admin-login-input:focus-within{
  border-color:#6366f1;

  box-shadow:
    0 0 0 4px
    rgba(99,102,241,.09);
}


.admin-login-input > span{
  flex-shrink:0;

  font-size:17px;
}


.admin-login-input input{
  width:100%;

  min-width:0;

  min-height:50px;

  border:none !important;
  outline:none !important;

  background:transparent !important;

  color:#172033;

  font-family:inherit;
  font-size:14px !important;

  box-shadow:none !important;
}


.admin-login-input input::placeholder{
  color:#94a3b8;
}


/* =====================================================
   PASSWORD TOGGLE
===================================================== */

.admin-password-toggle{
  width:38px;
  height:38px;

  display:grid;
  place-items:center;

  flex-shrink:0;

  border:none;
  border-radius:10px;

  background:transparent;

  cursor:pointer;

  font-size:16px;

  transition:
    background .2s ease,
    transform .2s ease;
}


.admin-password-toggle:hover{
  background:#f1f5f9;

  transform:scale(1.04);
}


/* =====================================================
   REMEMBER
===================================================== */

.admin-login-options{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:10px;
}


.admin-remember-row{
  display:inline-flex;
  align-items:center;

  gap:8px;

  color:#475569;

  font-size:13px !important;
  font-weight:700;

  cursor:pointer;
}


.admin-remember-row input{
  width:17px;
  height:17px;

  accent-color:#4f46e5;
}


/* =====================================================
   LOGIN MESSAGE
===================================================== */

.admin-login-message{
  padding:11px 13px;

  border-radius:11px;

  font-size:13px !important;
  font-weight:700;
}


.admin-login-message.error{
  border:1px solid #fecaca;

  background:#fef2f2;

  color:#b91c1c;
}


.admin-login-message.success{
  border:1px solid #bbf7d0;

  background:#f0fdf4;

  color:#15803d;
}


/* =====================================================
   LOGIN BUTTON
===================================================== */

.admin-login-submit{
  width:100%;

  min-height:52px;

  margin-top:2px;

  border:none;
  border-radius:14px;

  background:
    linear-gradient(
      135deg,
      #2563eb,
      #7c3aed
    );

  color:#ffffff;

  font-size:14px !important;
  font-weight:900;

  cursor:pointer;

  box-shadow:
    0 12px 26px
    rgba(79,70,229,.20);

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}


.admin-login-submit:hover{
  transform:translateY(-2px);

  box-shadow:
    0 16px 32px
    rgba(79,70,229,.28);
}


/* =====================================================
   SECURITY BOX
===================================================== */

.admin-login-security{
  display:flex;
  align-items:flex-start;

  gap:11px;

  margin-top:26px;

  padding:14px;

  border:1px solid #e2e8f0;
  border-radius:14px;

  background:#f8fafc;
}


.admin-login-security > span{
  width:38px;
  height:38px;

  display:grid;
  place-items:center;

  flex-shrink:0;

  border-radius:11px;

  background:#eef2ff;
}


.admin-login-security strong{
  display:block;

  font-size:13px !important;
  font-weight:900;
}


.admin-login-security p{
  margin:3px 0 0;

  color:#64748b;

  font-size:12px !important;
  line-height:1.5;
}


/* =====================================================
   BACK LINK
===================================================== */

.admin-login-back{
  margin-top:22px;

  text-align:center;
}


.admin-login-back a{
  color:#475569;

  font-size:13px !important;
  font-weight:800;

  text-decoration:none;
}


.admin-login-back a:hover{
  color:#4f46e5;
}


/* =====================================================
   RIGHT PREVIEW
===================================================== */

.admin-login-preview{
  min-height:100vh;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:
    clamp(40px,6vw,90px);

  overflow:hidden;

  position:relative;

  background:
    linear-gradient(
      135deg,
      #172554 0%,
      #312e81 50%,
      #581c87 100%
    );

  color:#ffffff;
}


/* Decorative glow */

.admin-login-preview::before,
.admin-login-preview::after{
  content:"";

  position:absolute;

  border-radius:50%;

  filter:blur(5px);
}


.admin-login-preview::before{
  width:300px;
  height:300px;

  top:-100px;
  right:-80px;

  background:
    rgba(56,189,248,.18);
}


.admin-login-preview::after{
  width:260px;
  height:260px;

  left:-80px;
  bottom:-90px;

  background:
    rgba(168,85,247,.20);
}


/* =====================================================
   PREVIEW CONTENT
===================================================== */

.admin-login-preview-content{
  width:100%;
  max-width:680px;

  position:relative;
  z-index:2;
}


.admin-preview-badge{
  display:inline-flex;
  align-items:center;

  padding:7px 12px;

  border:1px solid
    rgba(255,255,255,.18);

  border-radius:999px;

  background:
    rgba(255,255,255,.10);

  font-size:12px !important;
  font-weight:900;

  letter-spacing:.08em;
}


.admin-login-preview-content > h2{
  max-width:620px;

  margin:18px 0 0;

  color:#ffffff;

  font-size:
    clamp(32px,4vw,48px) !important;

  line-height:1.16;
}


.admin-login-preview-content > p{
  max-width:600px;

  margin:14px 0 0;

  color:
    rgba(255,255,255,.78);

  font-size:15px !important;
  line-height:1.7;
}


/* =====================================================
   FEATURE LIST
===================================================== */

.admin-preview-list{
  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:12px;

  margin-top:30px;
}


.admin-preview-list article{
  display:flex;
  align-items:center;

  gap:11px;

  padding:14px;

  border:1px solid
    rgba(255,255,255,.14);

  border-radius:15px;

  background:
    rgba(255,255,255,.08);

  backdrop-filter:
    blur(12px);

  transition:
    transform .2s ease,
    background .2s ease;
}


.admin-preview-list article:hover{
  transform:translateY(-3px);

  background:
    rgba(255,255,255,.13);
}


.admin-preview-list article > span{
  width:42px;
  height:42px;

  display:grid;
  place-items:center;

  flex-shrink:0;

  border-radius:12px;

  background:
    rgba(255,255,255,.12);

  font-size:19px;
}


.admin-preview-list strong{
  display:block;

  color:#ffffff;

  font-size:14px !important;
  font-weight:900;
}


.admin-preview-list small{
  display:block;

  margin-top:3px;

  color:
    rgba(255,255,255,.68);

  font-size:11px !important;
  line-height:1.4;
}


/* =====================================================
   DARK MODE COMPATIBILITY
===================================================== */

body.dark.admin-auth-page{
  background:#080d18;

  color:#e5e7eb;
}


body.dark .admin-login-card{
  background:#0f172a;

  border-color:#263248;
}


body.dark .admin-login-logo{
  color:#f8fafc;
}


body.dark .admin-login-heading p,
body.dark .admin-login-logo small{
  color:#94a3b8;
}


body.dark .admin-login-field label{
  color:#cbd5e1;
}


body.dark .admin-login-input{
  background:#111827;

  border-color:#334155;
}


body.dark .admin-login-input input{
  color:#f8fafc;
}


body.dark .admin-password-toggle:hover{
  background:#1e293b;
}


body.dark .admin-login-security{
  background:#111827;

  border-color:#334155;
}


body.dark .admin-login-back a{
  color:#cbd5e1;
}


/* =====================================================
   TABLET
===================================================== */

@media(max-width:1000px){

  .admin-login-wrapper{
    grid-template-columns:
      minmax(360px,480px)
      minmax(0,1fr);
  }


  .admin-preview-list{
    grid-template-columns:1fr;
  }

}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:760px){

  .admin-login-wrapper{
    display:block;
  }


  .admin-login-card{
    min-height:100vh;

    padding:
      32px 22px;
  }


  .admin-login-brand{
    margin-bottom:34px;
  }


  .admin-login-preview{
    display:none;
  }


  .admin-login-heading h1{
    font-size:30px !important;
  }

}


/* =====================================================
   VERY SMALL MOBILE
===================================================== */

@media(max-width:400px){

  .admin-login-card{
    padding:
      26px 18px;
  }


  .admin-login-logo-mark{
    width:46px;
    height:46px;
  }


  .admin-login-heading h1{
    font-size:28px !important;
  }

}

/* =====================================================
   GOURAV STUDY ZONE 2.0
   ADMIN DASHBOARD
===================================================== */


/* =====================================================
   PAGE
===================================================== */

.admin-dashboard-page{
  margin:0;
  min-height:100vh;
  background:#f6f8fc;
  color:#172033;
}


/* =====================================================
   APP LAYOUT
===================================================== */

.admin-app{
  min-height:100vh;
  display:flex;
}


/* =====================================================
   SIDEBAR
===================================================== */

.admin-sidebar{
  width:270px;
  min-width:270px;
  height:100vh;

  position:fixed;
  left:0;
  top:0;

  display:flex;
  flex-direction:column;

  padding:18px 14px;

  background:#111827;

  color:#ffffff;

  overflow-y:auto;

  z-index:1000;

  transition:
    transform .25s ease;
}


/* =====================================================
   SIDEBAR BRAND
===================================================== */

.admin-sidebar-brand{
  padding:4px 6px 18px;

  border-bottom:
    1px solid rgba(255,255,255,.08);
}


.admin-sidebar-brand a{
  display:flex;
  align-items:center;

  gap:11px;

  color:#ffffff;
  text-decoration:none;
}


.admin-brand-mark{
  width:44px;
  height:44px;

  display:grid;
  place-items:center;

  flex-shrink:0;

  border-radius:13px;

  background:
    linear-gradient(
      135deg,
      #2563eb,
      #7c3aed
    );

  font-size:19px !important;
  font-weight:900;
}


.admin-sidebar-brand strong{
  display:block;

  font-size:15px !important;
  font-weight:900;
}


.admin-sidebar-brand small{
  display:block;

  margin-top:2px;

  color:#94a3b8;

  font-size:11px !important;
}


/* =====================================================
   SIDEBAR NAV
===================================================== */

.admin-sidebar-nav{
  display:flex;
  flex-direction:column;

  gap:4px;

  margin-top:15px;
}


.admin-nav-label{
  margin:
    18px 9px
    7px;

  color:#64748b;

  font-size:10px !important;
  font-weight:900;

  letter-spacing:.12em;
}


.admin-sidebar-nav a{
  min-height:44px;

  display:flex;
  align-items:center;

  gap:11px;

  padding:10px 12px;

  border-radius:11px;

  color:#cbd5e1;

  text-decoration:none;

  transition:
    background .2s ease,
    color .2s ease,
    transform .2s ease;
}


.admin-sidebar-nav a > span{
  width:24px;

  flex-shrink:0;

  text-align:center;

  font-size:16px;
}


.admin-sidebar-nav a strong{
  font-size:13px !important;
  font-weight:700;
}


.admin-sidebar-nav a:hover{
  background:
    rgba(255,255,255,.07);

  color:#ffffff;

  transform:translateX(2px);
}


.admin-sidebar-nav a.active{
  background:
    linear-gradient(
      135deg,
      #2563eb,
      #7c3aed
    );

  color:#ffffff;

  box-shadow:
    0 8px 18px
    rgba(79,70,229,.25);
}


/* =====================================================
   SIDEBAR BOTTOM
===================================================== */

.admin-sidebar-bottom{
  margin-top:auto;

  padding-top:16px;

  border-top:
    1px solid rgba(255,255,255,.08);
}


.admin-sidebar-bottom a,
.admin-sidebar-bottom button{
  width:100%;

  min-height:42px;

  display:flex;
  align-items:center;

  gap:10px;

  padding:9px 11px;

  border:none;
  border-radius:10px;

  background:transparent;

  color:#cbd5e1;

  font-family:inherit;
  font-size:13px !important;
  font-weight:700;

  text-align:left;
  text-decoration:none;

  cursor:pointer;
}


.admin-sidebar-bottom a:hover,
.admin-sidebar-bottom button:hover{
  background:
    rgba(255,255,255,.07);

  color:#ffffff;
}


/* =====================================================
   MAIN AREA
===================================================== */

.admin-main{
  width:
    calc(100% - 270px);

  min-height:100vh;

  margin-left:270px;

  display:flex;
  flex-direction:column;
}


/* =====================================================
   ADMIN TOPBAR
===================================================== */

.admin-topbar{
  min-height:70px;

  position:sticky;
  top:0;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:18px;

  padding:
    11px 24px;

  border-bottom:
    1px solid #e5e7eb;

  background:
    rgba(255,255,255,.94);

  backdrop-filter:
    blur(14px);

  z-index:800;
}


.admin-topbar-left{
  display:flex;
  align-items:center;

  gap:12px;
}


.admin-topbar-left small{
  display:block;

  color:#6366f1;

  font-size:10px !important;
  font-weight:900;

  letter-spacing:.09em;
}


.admin-topbar-left strong{
  display:block;

  margin-top:2px;

  font-size:17px !important;
}


.admin-sidebar-toggle{
  display:none;

  width:42px;
  height:42px;

  border:1px solid #e2e8f0;
  border-radius:11px;

  background:#ffffff;

  font-size:18px;

  cursor:pointer;
}


/* =====================================================
   TOPBAR ACTIONS
===================================================== */

.admin-topbar-actions{
  display:flex;
  align-items:center;

  gap:14px;
}


.admin-view-site-btn{
  min-height:40px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:8px 13px;

  border:1px solid #dbe1ea;
  border-radius:10px;

  background:#ffffff;

  color:#334155;

  font-size:12px !important;
  font-weight:800;

  text-decoration:none;
}


.admin-view-site-btn:hover{
  border-color:#a5b4fc;
  color:#4f46e5;
}


.admin-topbar-profile{
  display:flex;
  align-items:center;

  gap:9px;
}


.admin-top-avatar{
  width:40px;
  height:40px;

  display:grid;
  place-items:center;

  border-radius:12px;

  background:
    linear-gradient(
      135deg,
      #2563eb,
      #7c3aed
    );

  color:#ffffff;

  font-size:15px !important;
  font-weight:900;
}


.admin-topbar-profile strong{
  display:block;

  font-size:13px !important;
}


.admin-topbar-profile small{
  display:block;

  margin-top:2px;

  color:#64748b;

  font-size:11px !important;
}


/* =====================================================
   CONTENT
===================================================== */

.admin-content{
  width:100%;

  flex:1;

  padding:24px;
}


/* =====================================================
   WELCOME CARD
===================================================== */

.admin-welcome-card{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:24px;

  padding:24px;

  border:1px solid #e4e8ef;
  border-radius:20px;

  background:
    linear-gradient(
      135deg,
      #ffffff,
      #f8faff
    );

  box-shadow:
    0 12px 32px
    rgba(15,23,42,.05);
}


.admin-welcome-card h1{
  margin:5px 0 0;

  font-size:
    clamp(27px,3vw,35px) !important;
}


.admin-welcome-card h1 span{
  color:#4f46e5;
}


.admin-welcome-card p{
  max-width:720px;

  margin:8px 0 0;

  color:#64748b;

  font-size:14px !important;
  line-height:1.6;
}


.admin-welcome-actions{
  display:flex;
  align-items:center;

  gap:9px;

  flex-shrink:0;
}


/* =====================================================
   STATS
===================================================== */

.admin-stats-grid{
  display:grid;

  grid-template-columns:
    repeat(6,minmax(0,1fr));

  gap:12px;

  margin-top:20px;
}


.admin-stats-grid article{
  display:flex;
  align-items:center;

  gap:11px;

  min-width:0;

  padding:15px;

  border:1px solid #e4e8ef;
  border-radius:15px;

  background:#ffffff;

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}


.admin-stats-grid article:hover{
  transform:
    translateY(-3px);

  box-shadow:
    0 12px 25px
    rgba(15,23,42,.06);
}


.admin-stat-icon{
  width:42px;
  height:42px;

  display:grid;
  place-items:center;

  flex-shrink:0;

  border-radius:12px;

  background:#eef2ff;

  font-size:18px;
}


.admin-stats-grid strong{
  display:block;

  color:#4f46e5;

  font-size:20px !important;
  font-weight:900;
}


.admin-stats-grid p{
  margin:2px 0 0;

  color:#64748b;

  font-size:12px !important;
  font-weight:700;
}


/* =====================================================
   DASHBOARD PANEL
===================================================== */

.admin-dashboard-panel{
  margin-top:20px;

  padding:20px;

  border:1px solid #e4e8ef;
  border-radius:18px;

  background:#ffffff;

  box-shadow:
    0 10px 28px
    rgba(15,23,42,.035);
}


.admin-panel-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:15px;

  margin-bottom:16px;
}


.admin-panel-heading h2{
  margin:4px 0 0;

  font-size:21px !important;
}


/* =====================================================
   MANAGEMENT GRID
===================================================== */

.admin-management-grid{
  display:grid;

  grid-template-columns:
    repeat(5,minmax(0,1fr));

  gap:12px;
}


.admin-management-grid > a{
  min-width:0;

  display:flex;
  align-items:flex-start;

  gap:11px;

  position:relative;

  padding:16px;

  border:1px solid #e5e7eb;
  border-radius:15px;

  background:#fbfcff;

  color:#172033;

  text-decoration:none;

  transition:
    transform .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;
}


.admin-management-grid > a:hover{
  transform:
    translateY(-3px);

  border-color:#a5b4fc;

  box-shadow:
    0 12px 26px
    rgba(79,70,229,.07);
}


.admin-management-grid > a > span{
  width:42px;
  height:42px;

  display:grid;
  place-items:center;

  flex-shrink:0;

  border-radius:12px;

  background:#eef2ff;

  font-size:18px;
}


.admin-management-grid > a div{
  min-width:0;
}


.admin-management-grid strong{
  display:block;

  font-size:14px !important;
  font-weight:900;
}


.admin-management-grid p{
  margin:4px 0 0;

  color:#64748b;

  font-size:12px !important;
  line-height:1.5;
}


.admin-management-grid b{
  position:absolute;

  right:12px;
  bottom:10px;

  color:#6366f1;

  font-size:16px;
}


/* =====================================================
   LOWER GRID
===================================================== */

.admin-dashboard-lower-grid{
  display:grid;

  grid-template-columns:
    minmax(0,1.35fr)
    minmax(320px,.65fr);

  gap:18px;
}


/* =====================================================
   EMPTY STATE
===================================================== */

.admin-empty-state{
  padding:28px 18px;

  text-align:center;
}


.admin-empty-state > span{
  display:block;

  font-size:30px;
}


.admin-empty-state h3{
  margin:8px 0 0;

  font-size:15px !important;
}


.admin-empty-state p{
  margin:5px 0 0;

  color:#64748b;

  font-size:13px !important;
}


/* =====================================================
   STATUS LIST
===================================================== */

.admin-status-list{
  display:flex;
  flex-direction:column;
}


.admin-status-list article{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:16px;

  min-height:44px;

  padding:9px 0;

  border-bottom:
    1px solid #edf0f4;
}


.admin-status-list article:last-child{
  border-bottom:none;
}


.admin-status-list span{
  color:#475569;

  font-size:13px !important;
  font-weight:700;
}


.admin-status-list strong{
  font-size:12px !important;
  font-weight:900;
}


.admin-status-good{
  color:#16a34a;
}


.admin-status-pending{
  color:#d97706;
}


/* =====================================================
   CURRENT ADMIN
===================================================== */

.admin-current-user-card{
  display:flex;
  align-items:center;

  gap:13px;

  padding:15px;

  border:1px solid #e5e7eb;
  border-radius:14px;

  background:#f8fafc;
}


.admin-account-avatar{
  width:48px;
  height:48px;

  display:grid;
  place-items:center;

  flex-shrink:0;

  border-radius:14px;

  background:
    linear-gradient(
      135deg,
      #2563eb,
      #7c3aed
    );

  color:#ffffff;

  font-size:17px !important;
  font-weight:900;
}


.admin-current-user-card > div:nth-child(2){
  min-width:0;
  flex:1;
}


.admin-current-user-card strong{
  display:block;

  font-size:14px !important;
}


.admin-current-user-card p{
  margin:3px 0 0;

  color:#64748b;

  font-size:12px !important;
}


.admin-role-badge{
  display:inline-flex;
  align-items:center;

  padding:6px 9px;

  border-radius:999px;

  background:#ede9fe;

  color:#6d28d9;

  font-size:10px !important;
  font-weight:900;
}


/* =====================================================
   FOOTER
===================================================== */

.admin-footer{
  min-height:54px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:15px;

  padding:
    12px 24px;

  border-top:
    1px solid #e5e7eb;

  color:#64748b;

  font-size:12px !important;
}


/* =====================================================
   MOBILE SIDEBAR OVERLAY
===================================================== */

.admin-sidebar-overlay{
  display:none;

  position:fixed;
  inset:0;

  background:
    rgba(15,23,42,.48);

  z-index:900;
}


.admin-sidebar-overlay.show{
  display:block;
}


/* =====================================================
   TABLET / SMALL DESKTOP
===================================================== */

@media(max-width:1400px){

  .admin-stats-grid{
    grid-template-columns:
      repeat(3,minmax(0,1fr));
  }


  .admin-management-grid{
    grid-template-columns:
      repeat(3,minmax(0,1fr));
  }

}


@media(max-width:1050px){

  .admin-sidebar{
    transform:
      translateX(-100%);
  }


  .admin-sidebar.show{
    transform:
      translateX(0);
  }


  .admin-main{
    width:100%;
    margin-left:0;
  }


  .admin-sidebar-toggle{
    display:grid;
    place-items:center;
  }


  .admin-management-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }


  .admin-dashboard-lower-grid{
    grid-template-columns:1fr;
  }

}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:700px){

  .admin-content{
    padding:16px;
  }


  .admin-topbar{
    padding:
      10px 15px;
  }


  .admin-view-site-btn{
    display:none;
  }


  .admin-topbar-profile > div{
    display:none;
  }


  .admin-welcome-card{
    flex-direction:column;
    align-items:flex-start;

    padding:20px;
  }


  .admin-welcome-actions{
    width:100%;
  }


  .admin-welcome-actions .btn{
    flex:1;

    text-align:center;
  }


  .admin-stats-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }


  .admin-management-grid{
    grid-template-columns:1fr;
  }


  .admin-dashboard-panel{
    padding:16px;
  }


  .admin-current-user-card{
    flex-wrap:wrap;
  }


  .admin-role-badge{
    margin-left:61px;
  }


  .admin-footer{
    flex-direction:column;
    justify-content:center;

    text-align:center;
  }

}


/* =====================================================
   VERY SMALL MOBILE
===================================================== */

@media(max-width:420px){

  .admin-stats-grid{
    grid-template-columns:1fr;
  }


  .admin-welcome-actions{
    flex-direction:column;
  }


  .admin-welcome-actions .btn{
    width:100%;
  }

}

/* =====================================================
   GOURAV STUDY ZONE 2.0
   ADMIN ACADEMIC MANAGEMENT
===================================================== */


/* =====================================================
   PAGE HEADER
===================================================== */

.admin-academic-page{
  position:relative;
}


.admin-page-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:24px;

  padding:24px;

  border:1px solid #e4e8ef;
  border-radius:20px;

  background:
    linear-gradient(
      135deg,
      #ffffff,
      #f8faff
    );

  box-shadow:
    0 10px 28px
    rgba(15,23,42,.04);
}


.admin-page-heading h1{
  margin:6px 0 0;

  font-size:
    clamp(27px,3vw,36px) !important;

  line-height:1.2;
}


.admin-page-heading p{
  max-width:760px;

  margin:8px 0 0;

  color:#64748b;

  font-size:14px !important;
  line-height:1.65;
}


.admin-page-heading > .btn{
  flex-shrink:0;
}


/* =====================================================
   SUMMARY CARDS
===================================================== */

.admin-academic-summary-grid{
  display:grid;

  grid-template-columns:
    repeat(5,minmax(0,1fr));

  gap:13px;

  margin-top:20px;
}


.admin-academic-summary-grid article{
  min-width:0;

  display:flex;
  align-items:center;

  gap:12px;

  padding:17px;

  border:1px solid #e4e8ef;
  border-radius:16px;

  background:#ffffff;

  box-shadow:
    0 8px 22px
    rgba(15,23,42,.035);

  transition:
    transform .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;
}


.admin-academic-summary-grid article:hover{
  transform:translateY(-3px);

  border-color:#c7d2fe;

  box-shadow:
    0 14px 30px
    rgba(79,70,229,.07);
}


.admin-academic-summary-grid article > span{
  width:45px;
  height:45px;

  display:grid;
  place-items:center;

  flex-shrink:0;

  border-radius:13px;

  background:
    linear-gradient(
      135deg,
      #eef2ff,
      #f5f3ff
    );

  font-size:20px;
}


.admin-academic-summary-grid strong{
  display:block;

  color:#4f46e5;

  font-size:22px !important;
  font-weight:900;
}


.admin-academic-summary-grid small{
  display:block;

  margin-top:2px;

  color:#64748b;

  font-size:12px !important;
  font-weight:700;

  line-height:1.35;
}


/* =====================================================
   ACADEMIC FLOW
===================================================== */

.admin-academic-flow{
  display:grid;

  grid-template-columns:
    minmax(130px,1fr)
    auto
    minmax(150px,1fr)
    auto
    minmax(140px,1fr)
    auto
    minmax(130px,1fr)
    auto
    minmax(130px,1fr);

  align-items:center;

  gap:10px;
}


.admin-academic-flow > div{
  min-height:125px;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  gap:5px;

  padding:16px;

  border:1px solid #e2e8f0;
  border-radius:16px;

  background:
    linear-gradient(
      145deg,
      #ffffff,
      #f8faff
    );

  text-align:center;
}


.admin-academic-flow > div > span{
  width:34px;
  height:34px;

  display:grid;
  place-items:center;

  margin-bottom:3px;

  border-radius:10px;

  background:
    linear-gradient(
      135deg,
      #2563eb,
      #7c3aed
    );

  color:#ffffff;

  font-size:13px !important;
  font-weight:900;
}


.admin-academic-flow > div strong{
  font-size:14px !important;
  font-weight:900;
}


.admin-academic-flow > div small{
  color:#64748b;

  font-size:12px !important;
  line-height:1.45;
}


.admin-academic-flow > b{
  color:#8b5cf6;

  font-size:22px;
  font-weight:900;
}


/* =====================================================
   FILTER GRID
===================================================== */

.admin-academic-filter-grid{
  display:grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap:14px;
}


.admin-academic-filter-grid > div{
  min-width:0;
}


.admin-academic-filter-grid label{
  display:block;

  margin-bottom:7px;

  color:#334155;

  font-size:13px !important;
  font-weight:800;
}


.admin-academic-filter-grid select{
  width:100%;
  min-height:48px;

  padding:0 13px;

  border:1px solid #dce2ea;
  border-radius:12px;

  outline:none;

  background:#ffffff;

  color:#172033;

  font-family:inherit;
  font-size:14px !important;

  transition:
    border-color .2s ease,
    box-shadow .2s ease;
}


.admin-academic-filter-grid select:focus{
  border-color:#6366f1;

  box-shadow:
    0 0 0 4px
    rgba(99,102,241,.09);
}


/* =====================================================
   RESET BUTTON
===================================================== */

.admin-academic-page .resource-filter-reset{
  min-height:38px;

  padding:7px 12px;

  border:1px solid #dbe1ea;
  border-radius:10px;

  background:#ffffff;

  color:#475569;

  font-family:inherit;
  font-size:12px !important;
  font-weight:800;

  cursor:pointer;
}


.admin-academic-page .resource-filter-reset:hover{
  border-color:#a5b4fc;

  color:#4f46e5;

  background:#f8faff;
}


/* =====================================================
   SEARCH
===================================================== */

.admin-academic-search{
  width:min(100%,320px);
  min-height:43px;

  display:flex;
  align-items:center;

  gap:8px;

  padding:0 12px;

  border:1px solid #dce2ea;
  border-radius:11px;

  background:#ffffff;
}


.admin-academic-search:focus-within{
  border-color:#6366f1;

  box-shadow:
    0 0 0 4px
    rgba(99,102,241,.08);
}


.admin-academic-search > span{
  flex-shrink:0;
}


.admin-academic-search input{
  width:100%;
  min-width:0;
  min-height:41px;

  border:none !important;
  outline:none !important;

  background:transparent !important;

  color:#172033;

  font-family:inherit;
  font-size:14px !important;

  box-shadow:none !important;
}


.admin-academic-search input::placeholder{
  color:#94a3b8;
}


/* =====================================================
   TABLE WRAPPER
===================================================== */

.admin-table-wrap{
  width:100%;

  overflow-x:auto;

  border:1px solid #e5e7eb;
  border-radius:14px;
}


/* =====================================================
   DATA TABLE
===================================================== */

.admin-data-table{
  width:100%;

  min-width:980px;

  border-collapse:collapse;

  background:#ffffff;
}


.admin-data-table thead{
  background:#f8fafc;
}


.admin-data-table th{
  padding:13px 14px;

  border-bottom:1px solid #e5e7eb;

  color:#475569;

  font-size:12px !important;
  font-weight:900;

  text-align:left;
  white-space:nowrap;
}


.admin-data-table td{
  padding:14px;

  border-bottom:1px solid #edf0f4;

  color:#334155;

  font-size:13px !important;
  line-height:1.45;

  vertical-align:middle;
}


.admin-data-table tbody tr:last-child td{
  border-bottom:none;
}


.admin-data-table tbody tr:not(:has(.admin-table-empty)):hover{
  background:#fbfcff;
}


/* =====================================================
   TABLE EMPTY
===================================================== */

.admin-table-empty{
  min-height:210px;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  padding:30px 20px;

  text-align:center;
}


.admin-table-empty > span{
  display:block;

  font-size:34px;
}


.admin-table-empty strong{
  display:block;

  margin-top:9px;

  color:#172033;

  font-size:15px !important;
  font-weight:900;
}


.admin-table-empty p{
  max-width:420px;

  margin:6px auto 0;

  color:#64748b;

  font-size:13px !important;
  line-height:1.55;
}


/* =====================================================
   TABLE STATUS BADGES
   Used later by admin-academic.js
===================================================== */

.admin-status-badge{
  display:inline-flex;
  align-items:center;

  min-height:26px;

  padding:4px 9px;

  border-radius:999px;

  font-size:11px !important;
  font-weight:900;
}


.admin-status-badge.published{
  background:#dcfce7;

  color:#15803d;
}


.admin-status-badge.unpublished{
  background:#f1f5f9;

  color:#64748b;
}


/* =====================================================
   TABLE ACTION BUTTONS
===================================================== */

.admin-table-actions{
  display:flex;
  align-items:center;

  gap:6px;
}


.admin-table-action-btn{
  min-height:34px;

  padding:6px 9px;

  border:1px solid #dfe4ec;
  border-radius:8px;

  background:#ffffff;

  color:#475569;

  font-family:inherit;
  font-size:11px !important;
  font-weight:800;

  cursor:pointer;

  transition:
    border-color .2s ease,
    color .2s ease,
    background .2s ease;
}


.admin-table-action-btn:hover{
  border-color:#a5b4fc;

  color:#4f46e5;

  background:#f8faff;
}


.admin-table-action-btn.delete{
  border-color:#fecaca;

  color:#dc2626;

  background:#fffafa;
}


.admin-table-action-btn.delete:hover{
  border-color:#f87171;

  background:#fef2f2;
}


/* =====================================================
   MODAL
===================================================== */

.admin-modal{
  position:fixed;

  inset:0;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:20px;

  z-index:5000;
}


.admin-modal.hidden{
  display:none !important;
}


.admin-modal-backdrop{
  position:absolute;

  inset:0;

  background:
    rgba(15,23,42,.58);

  backdrop-filter:
    blur(3px);
}


.admin-modal-card{
  width:min(100%,620px);

  max-height:
    calc(100vh - 40px);

  position:relative;
  z-index:2;

  overflow-y:auto;

  padding:22px;

  border:1px solid #e2e8f0;
  border-radius:20px;

  background:#ffffff;

  box-shadow:
    0 28px 70px
    rgba(15,23,42,.25);

  animation:
    adminModalOpen .2s ease;
}


@keyframes adminModalOpen{

  from{
    opacity:0;
    transform:
      translateY(12px)
      scale(.98);
  }

  to{
    opacity:1;
    transform:
      translateY(0)
      scale(1);
  }

}


/* =====================================================
   MODAL HEAD
===================================================== */

.admin-modal-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;

  gap:16px;

  margin-bottom:20px;
}


.admin-modal-head h2{
  margin:5px 0 0;

  font-size:22px !important;
}


.admin-modal-close{
  width:40px;
  height:40px;

  display:grid;
  place-items:center;

  flex-shrink:0;

  border:1px solid #e2e8f0;
  border-radius:11px;

  background:#ffffff;

  color:#475569;

  cursor:pointer;

  font-size:15px;
}


.admin-modal-close:hover{
  border-color:#fecaca;

  color:#dc2626;

  background:#fef2f2;
}


/* =====================================================
   ADMIN FORM
===================================================== */

#academicItemForm{
  display:flex;
  flex-direction:column;

  gap:15px;
}


.admin-form-field{
  display:flex;
  flex-direction:column;

  gap:7px;
}


.admin-form-field.hidden{
  display:none !important;
}


.admin-form-field label{
  color:#334155;

  font-size:13px !important;
  font-weight:800;
}


.admin-form-field input,
.admin-form-field select,
.admin-form-field textarea{
  width:100%;

  min-height:48px;

  padding:10px 13px;

  border:1px solid #dce2ea;
  border-radius:12px;

  outline:none;

  background:#ffffff;

  color:#172033;

  font-family:inherit;
  font-size:14px !important;

  transition:
    border-color .2s ease,
    box-shadow .2s ease;
}


.admin-form-field input:focus,
.admin-form-field select:focus,
.admin-form-field textarea:focus{
  border-color:#6366f1;

  box-shadow:
    0 0 0 4px
    rgba(99,102,241,.09);
}


/* =====================================================
   MODAL ACTIONS
===================================================== */

.admin-modal-actions{
  display:flex;
  justify-content:flex-end;

  gap:9px;

  margin-top:8px;

  padding-top:17px;

  border-top:1px solid #edf0f4;
}


/* =====================================================
   DARK MODE SUPPORT
===================================================== */

body.dark.admin-dashboard-page{
  background:#080d18;

  color:#e5e7eb;
}


body.dark .admin-page-heading,
body.dark .admin-academic-summary-grid article,
body.dark .admin-dashboard-panel,
body.dark .admin-modal-card{
  background:#0f172a;

  border-color:#273449;
}


body.dark .admin-page-heading{
  background:
    linear-gradient(
      135deg,
      #0f172a,
      #111c33
    );
}


body.dark .admin-page-heading p,
body.dark .admin-academic-flow small,
body.dark .admin-academic-summary-grid small,
body.dark .admin-table-empty p{
  color:#94a3b8;
}


body.dark .admin-academic-flow > div{
  background:#111827;

  border-color:#334155;
}


body.dark .admin-academic-filter-grid label,
body.dark .admin-form-field label{
  color:#cbd5e1;
}


body.dark .admin-academic-filter-grid select,
body.dark .admin-academic-search,
body.dark .admin-academic-search input,
body.dark .admin-form-field input,
body.dark .admin-form-field select,
body.dark .admin-form-field textarea,
body.dark .admin-modal-close,
body.dark .admin-table-action-btn{
  background:#111827 !important;

  border-color:#334155;

  color:#f8fafc;
}


body.dark .admin-table-wrap{
  border-color:#334155;
}


body.dark .admin-data-table{
  background:#0f172a;
}


body.dark .admin-data-table thead{
  background:#111827;
}


body.dark .admin-data-table th{
  border-color:#334155;

  color:#cbd5e1;
}


body.dark .admin-data-table td{
  border-color:#273449;

  color:#e2e8f0;
}


body.dark .admin-data-table tbody tr:not(:has(.admin-table-empty)):hover{
  background:#111827;
}


body.dark .admin-table-empty strong{
  color:#f8fafc;
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media(max-width:1400px){

  .admin-academic-summary-grid{
    grid-template-columns:
      repeat(3,minmax(0,1fr));
  }


  .admin-academic-flow{
    grid-template-columns:
      repeat(5,minmax(145px,1fr));

    overflow-x:auto;

    padding-bottom:5px;
  }


  .admin-academic-flow > b{
    display:none;
  }

}


@media(max-width:1000px){

  .admin-academic-filter-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }


  .admin-academic-summary-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

}


@media(max-width:700px){

  .admin-page-heading{
    flex-direction:column;
    align-items:flex-start;

    padding:20px;
  }


  .admin-page-heading > .btn{
    width:100%;
    text-align:center;
  }


  .admin-academic-summary-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }


  .admin-academic-summary-grid article{
    padding:14px;
  }


  .admin-academic-flow{
    grid-template-columns:
      repeat(5,minmax(170px,1fr));
  }


  .admin-academic-filter-grid{
    grid-template-columns:1fr;
  }


  .admin-panel-heading{
    align-items:flex-start;
    flex-direction:column;
  }


  .admin-academic-search{
    width:100%;
  }


  .admin-modal{
    padding:12px;
  }


  .admin-modal-card{
    max-height:
      calc(100vh - 24px);

    padding:18px;

    border-radius:17px;
  }


  .admin-modal-actions{
    flex-direction:column-reverse;
  }


  .admin-modal-actions .btn{
    width:100%;
    text-align:center;
  }

}


@media(max-width:450px){

  .admin-academic-summary-grid{
    grid-template-columns:1fr;
  }


  .admin-page-heading h1{
    font-size:27px !important;
  }

}

/* Explore disabled controls */

#loadSubjectsBtn:disabled{
  opacity:.5;
  cursor:not-allowed;
  box-shadow:none;
  transform:none;
}

#subjectSearchInput:disabled{
  opacity:.65;
  cursor:not-allowed;
  background:#f8fafc !important;
}

#exploreAuthority:disabled,
#exploreBranch:disabled,
#exploreSemester:disabled{
  opacity:.65;
  cursor:not-allowed;
  background:#f8fafc;
}

/* =====================================================
   GOURAV STUDY ZONE 2.0
   HOME SMART SYSTEM STATUS — FINAL
===================================================== */


/* =====================================================
   BASE
===================================================== */

#homeSystemPreview{
  position:relative;
  isolation:isolate;
}


#homeSystemPreview .preview-card{
  position:relative;
  z-index:2;

  transition:
    transform .35s ease,
    box-shadow .35s ease,
    border-color .35s ease;
}


/* =====================================================
   BRAND AREA
===================================================== */

#homeSystemPreview .home-system-brand{
  display:flex;
  align-items:center;
  gap:10px;
}


#homeSystemPreview .home-system-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height:27px;

  padding:5px 10px;

  border-radius:999px;

  font-size:11px !important;
  font-weight:900;

  white-space:nowrap;
}


#homeSystemPreview .home-system-badge.checking{
  background:#f1f5f9;
  color:#64748b;
}


#homeSystemPreview .home-system-badge.online{
  background:#dcfce7;
  color:#15803d;
}


#homeSystemPreview .home-system-badge.simple{
  background:#f1f5f9;
  color:#64748b;
}


/* =====================================================
   STATUS ROW
===================================================== */

#homeSystemPreview .home-system-status-row{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:12px;

  margin-bottom:10px;
}


#homeSystemPreview .home-system-indicator{
  display:inline-flex;
  align-items:center;

  padding:5px 9px;

  border-radius:999px;

  font-size:11px !important;
  font-weight:900;
}


#homeSystemPreview .home-system-indicator.checking{
  background:rgba(255,255,255,.14);
  color:#ffffff;
}


#homeSystemPreview .home-system-indicator.online{
  background:rgba(34,197,94,.20);
  color:#dcfce7;
}


#homeSystemPreview .home-system-indicator.simple{
  background:#eef2f7;
  color:#64748b;
}


/* =====================================================
   CHECKING MODE
===================================================== */

#homeSystemPreview[data-system-status="checking"]
.home-system-progress span{
  width:62%;
}


#homeSystemPreview[data-system-status="checking"]
.preview-card{
  box-shadow:
    0 18px 45px
    rgba(79,70,229,.08);
}


/* =====================================================
   ONLINE — OUTER REAL GLOW

   This is outside preview-card.
   Much more visible.
===================================================== */

#homeSystemPreview[data-system-status="online"]::before{
  content:"";

  position:absolute;

  inset:-18px;

  z-index:-1;

  border-radius:34px;

  background:
    linear-gradient(
      120deg,
      rgba(37,99,235,.75),
      rgba(124,58,237,.75),
      rgba(6,182,212,.65),
      rgba(99,102,241,.75)
    );

  background-size:300% 300%;

  filter:blur(32px);

  opacity:.62;

  pointer-events:none;

  animation:
    gszHomeOuterGlow
    5s ease-in-out infinite;
}


/* SECOND SOFT HALO */

#homeSystemPreview[data-system-status="online"]::after{
  content:"";

  position:absolute;

  inset:8% 5%;

  z-index:-1;

  border-radius:40px;

  background:
    radial-gradient(
      circle,
      rgba(139,92,246,.55),
      rgba(37,99,235,.25) 45%,
      transparent 72%
    );

  filter:blur(45px);

  opacity:.8;

  pointer-events:none;

  animation:
    gszHomeHalo
    4s ease-in-out infinite alternate;
}


/* =====================================================
   ONLINE MAIN PREVIEW CARD
===================================================== */

#homeSystemPreview[data-system-status="online"]
.preview-card{
  border:
    1px solid
    rgba(124,58,237,.38) !important;

  box-shadow:
    0 20px 50px
    rgba(37,99,235,.22),

    0 0 35px
    rgba(124,58,237,.22),

    0 0 0 1px
    rgba(255,255,255,.65)
    inset !important;

  animation:
    gszHomeCardFloat
    4.5s ease-in-out infinite !important;
}


/* =====================================================
   ONLINE MAIN BLUE CARD
===================================================== */

#homeSystemPreview[data-system-status="online"]
.home-system-main-card{
  position:relative;

  overflow:hidden;

  background:
    linear-gradient(
      120deg,
      #2563eb,
      #4f46e5,
      #7c3aed,
      #0891b2,
      #2563eb
    ) !important;

  background-size:
    350% 350% !important;

  color:#ffffff !important;

  box-shadow:
    0 16px 38px
    rgba(79,70,229,.32) !important;

  animation:
    gszHomeGradientMove
    6s ease infinite !important;
}


#homeSystemPreview[data-system-status="online"]
.home-system-main-card strong{
  color:#ffffff !important;
}


#homeSystemPreview[data-system-status="online"]
.home-system-main-card small{
  color:
    rgba(255,255,255,.82) !important;
}


/* =====================================================
   MOVING LIGHT SHINE
===================================================== */

#homeSystemPreview[data-system-status="online"]
.home-system-main-card::before{
  content:"";

  position:absolute;

  width:55%;
  height:220%;

  top:-65%;
  left:-90%;

  transform:
    rotate(23deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.20),
      transparent
    );

  pointer-events:none;

  animation:
    gszHomeShine
    4.8s ease-in-out infinite;
}


/* =====================================================
   ONLINE PROGRESS
===================================================== */

#homeSystemPreview[data-system-status="online"]
.home-system-progress{
  overflow:hidden;

  background:
    rgba(255,255,255,.20) !important;
}


#homeSystemPreview[data-system-status="online"]
.home-system-progress span{
  width:100% !important;

  background:
    linear-gradient(
      90deg,
      #ffffff,
      #bfdbfe,
      #ffffff
    ) !important;

  background-size:
    200% 100% !important;

  animation:
    gszHomeProgress
    2s linear infinite !important;
}


/* =====================================================
   ONLINE GS AVATAR
===================================================== */

#homeSystemPreview[data-system-status="online"]
.avatar{
  box-shadow:
    0 0 0 0
    rgba(124,58,237,.5);

  animation:
    gszHomeAvatarPulse
    2.3s ease-out infinite !important;
}


/* =====================================================
   ONLINE QUICK LINKS
===================================================== */

#homeSystemPreview[data-system-status="online"]
.preview-grid a{
  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease;
}


#homeSystemPreview[data-system-status="online"]
.preview-grid a:hover{
  transform:
    translateY(-5px);

  border-color:
    rgba(99,102,241,.28);

  box-shadow:
    0 12px 28px
    rgba(79,70,229,.15);
}


/* =====================================================
   ONLINE BOTTOM MESSAGE
===================================================== */

#homeSystemPreview[data-system-status="online"]
.home-system-update{
  border:
    1px solid
    rgba(34,197,94,.20);

  background:
    linear-gradient(
      135deg,
      #f0fdf4,
      #eff6ff,
      #f5f3ff
    );

  box-shadow:
    0 9px 26px
    rgba(34,197,94,.09);
}


/* =====================================================
   SIMPLE MODE
===================================================== */

#homeSystemPreview[data-system-status="simple"]::before,
#homeSystemPreview[data-system-status="simple"]::after{
  display:none;
}


#homeSystemPreview[data-system-status="simple"]
.preview-card{
  animation:none !important;

  border-color:#e5e7eb !important;

  box-shadow:
    0 15px 40px
    rgba(15,23,42,.06) !important;
}


#homeSystemPreview[data-system-status="simple"]
.home-system-main-card{
  background:
    linear-gradient(
      135deg,
      #f8fafc,
      #f1f5f9
    ) !important;

  color:#172033 !important;

  box-shadow:none !important;

  animation:none !important;
}


#homeSystemPreview[data-system-status="simple"]
.home-system-main-card strong{
  color:#172033 !important;
}


#homeSystemPreview[data-system-status="simple"]
.home-system-main-card small{
  color:#64748b !important;
}


#homeSystemPreview[data-system-status="simple"]
.home-system-progress{
  background:#e2e8f0 !important;
}


#homeSystemPreview[data-system-status="simple"]
.home-system-progress span{
  width:35% !important;

  background:#94a3b8 !important;

  animation:none !important;
}


/* =====================================================
   ANIMATIONS
===================================================== */

@keyframes gszHomeOuterGlow{

  0%{
    background-position:
      0% 50%;

    opacity:.48;
  }


  50%{
    background-position:
      100% 50%;

    opacity:.78;
  }


  100%{
    background-position:
      0% 50%;

    opacity:.48;
  }

}


@keyframes gszHomeHalo{

  from{
    transform:
      scale(.92);

    opacity:.48;
  }


  to{
    transform:
      scale(1.10);

    opacity:.85;
  }

}


@keyframes gszHomeGradientMove{

  0%{
    background-position:
      0% 50%;
  }


  50%{
    background-position:
      100% 50%;
  }


  100%{
    background-position:
      0% 50%;
  }

}


@keyframes gszHomeShine{

  0%{
    left:-90%;
  }


  42%{
    left:145%;
  }


  100%{
    left:145%;
  }

}


@keyframes gszHomeProgress{

  from{
    background-position:
      200% 0;
  }


  to{
    background-position:
      -200% 0;
  }

}


@keyframes gszHomeAvatarPulse{

  0%{
    box-shadow:
      0 0 0 0
      rgba(124,58,237,.45);
  }


  70%{
    box-shadow:
      0 0 0 15px
      rgba(124,58,237,0);
  }


  100%{
    box-shadow:
      0 0 0 0
      rgba(124,58,237,0);
  }

}


@keyframes gszHomeCardFloat{

  0%,
  100%{
    transform:
      translateY(0);
  }


  50%{
    transform:
      translateY(-5px);
  }

}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:600px){

  #homeSystemPreview
  .home-system-brand{
    flex-direction:column;
    align-items:flex-end;

    gap:6px;
  }


  #homeSystemPreview
  .home-system-status-row{
    flex-direction:column;
    align-items:flex-start;

    gap:7px;
  }


  #homeSystemPreview
  .home-system-badge{
    font-size:10px !important;
  }


  #homeSystemPreview[data-system-status="online"]::before{
    inset:-8px;

    filter:blur(22px);
  }

}

/* =====================================================
   STRONG ONLINE HIGHLIGHT
===================================================== */

#homeSystemPreview[data-system-status="online"] .home-system-main-card{
  border: 2px solid rgba(255,255,255,.18);
  box-shadow:
    0 0 18px rgba(37,99,235,.45),
    0 0 36px rgba(124,58,237,.35),
    0 0 70px rgba(99,102,241,.28),
    0 18px 50px rgba(79,70,229,.35) !important;
  animation:
    gszHomeGradientMove 6s ease infinite,
    gszMainCardPulse 2.2s ease-in-out infinite !important;
}

#homeSystemPreview[data-system-status="online"] .home-system-indicator.online{
  background: rgba(34,197,94,.18);
  color: #dcfce7;
  box-shadow:
    0 0 12px rgba(34,197,94,.35),
    0 0 25px rgba(34,197,94,.18);
  animation: gszOnlineBadgePulse 1.8s ease-in-out infinite;
}

#homeSystemPreview[data-system-status="online"] .home-system-badge.online{
  box-shadow:
    0 0 12px rgba(34,197,94,.28),
    0 0 24px rgba(34,197,94,.18);
  animation: gszOnlineBadgePulse 1.8s ease-in-out infinite;
}

#homeSystemPreview[data-system-status="online"] .home-system-update{
  box-shadow:
    0 0 20px rgba(99,102,241,.10),
    0 12px 30px rgba(79,70,229,.10);
}

#homeSystemPreview[data-system-status="online"]{
  animation: gszWholePreviewGlow 3s ease-in-out infinite;
}

@keyframes gszMainCardPulse{
  0%,100%{
    transform: scale(1);
  }
  50%{
    transform: scale(1.01);
  }
}

@keyframes gszOnlineBadgePulse{
  0%,100%{
    transform: scale(1);
    opacity: 1;
  }
  50%{
    transform: scale(1.06);
    opacity: .95;
  }
}

@keyframes gszWholePreviewGlow{
  0%,100%{
    filter: drop-shadow(0 0 10px rgba(99,102,241,.12));
  }
  50%{
    filter: drop-shadow(0 0 22px rgba(124,58,237,.20));
  }
}

/* =====================================================
   GOURAV STUDY ZONE 2.0
   ADMIN STUDY RESOURCES
===================================================== */


/* =====================================================
   SUMMARY GRID
===================================================== */

.resource-summary-grid{
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
}


/* =====================================================
   RESOURCE TYPE CARDS
===================================================== */

.admin-resource-type-grid{
  display:grid;

  grid-template-columns:
    repeat(5, minmax(0, 1fr));

  gap:16px;

  margin-top:20px;
}


.admin-resource-type-card{
  min-width:0;

  padding:20px 16px;

  border:
    1px solid #e5e7eb;

  border-radius:18px;

  background:#ffffff;

  color:#172033;

  text-align:left;

  cursor:pointer;

  transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease,
    background .25s ease;
}


.admin-resource-type-card:hover{
  transform:
    translateY(-4px);

  border-color:
    rgba(99,102,241,.30);

  box-shadow:
    0 12px 28px
    rgba(79,70,229,.10);
}


.admin-resource-type-card.active{
  border-color:
    rgba(99,102,241,.45);

  background:
    linear-gradient(
      135deg,
      #eef2ff,
      #f5f3ff
    );

  box-shadow:
    0 10px 24px
    rgba(79,70,229,.10);
}


.admin-resource-type-card > span{
  display:flex;
  align-items:center;
  justify-content:center;

  width:48px;
  height:48px;

  margin-bottom:14px;

  border-radius:14px;

  background:#f3f4f6;

  font-size:24px;
}


.admin-resource-type-card strong{
  display:block;

  margin-bottom:5px;

  font-size:16px;
  font-weight:800;
}


.admin-resource-type-card small{
  display:block;

  color:#64748b;

  font-size:12px;
  font-weight:600;
}


/* =====================================================
   FILTER GRID
===================================================== */

.admin-resource-filter-grid{
  display:grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap:16px;

  margin-top:20px;
}


.admin-resource-filter-grid label{
  display:flex;
  flex-direction:column;

  gap:7px;

  min-width:0;
}


.admin-resource-filter-grid label > span{
  color:#475569;

  font-size:12px;
  font-weight:800;

  text-transform:uppercase;

  letter-spacing:.03em;
}


.admin-resource-filter-grid select{
  width:100%;
  min-height:46px;

  padding:0 13px;

  border:
    1px solid #dbe2ea;

  border-radius:12px;

  background:#ffffff;

  color:#172033;

  font-size:14px;

  outline:none;

  transition:
    border-color .2s ease,
    box-shadow .2s ease;
}


.admin-resource-filter-grid select:focus{
  border-color:#6366f1;

  box-shadow:
    0 0 0 3px
    rgba(99,102,241,.10);
}


/* =====================================================
   RESOURCE SEARCH
===================================================== */

.admin-resource-search{
  display:flex;
  align-items:center;

  gap:10px;

  width:100%;

  margin-top:18px;
  padding:0 15px;

  border:
    1px solid #dbe2ea;

  border-radius:14px;

  background:#ffffff;

  transition:
    border-color .2s ease,
    box-shadow .2s ease;
}


.admin-resource-search:focus-within{
  border-color:#6366f1;

  box-shadow:
    0 0 0 3px
    rgba(99,102,241,.10);
}


.admin-resource-search > span{
  flex:0 0 auto;

  font-size:17px;
}


.admin-resource-search input{
  width:100%;
  min-height:50px;

  border:0;

  background:transparent;

  color:#172033;

  font-size:14px;

  outline:none;
}


.admin-resource-search input::placeholder{
  color:#94a3b8;
}


/* =====================================================
   RESULT TEXT
===================================================== */

.admin-result-text{
  display:inline-flex;
  align-items:center;

  min-height:31px;

  padding:6px 11px;

  border-radius:999px;

  background:#f1f5f9;

  color:#64748b;

  font-size:12px;
  font-weight:800;
}


/* =====================================================
   RESOURCE TABLE
===================================================== */

.resource-admin-table{
  min-width:1050px;
}


.resource-admin-table th:nth-child(1){
  min-width:230px;
}


.resource-admin-table th:nth-child(2){
  min-width:250px;
}


.resource-admin-table th:nth-child(7){
  min-width:190px;
}


/* =====================================================
   TABLE RESOURCE TITLE
===================================================== */

.admin-resource-title{
  display:flex;
  align-items:flex-start;

  gap:11px;
}


.admin-resource-title-icon{
  display:flex;
  align-items:center;
  justify-content:center;

  flex:0 0 auto;

  width:40px;
  height:40px;

  border-radius:11px;

  background:#f1f5f9;

  font-size:19px;
}


.admin-resource-title-text{
  min-width:0;
}


.admin-resource-title-text strong{
  display:block;

  color:#172033;

  font-size:14px;
  font-weight:800;

  line-height:1.4;
}


.admin-resource-title-text small{
  display:block;

  margin-top:4px;

  color:#64748b;

  font-size:12px;

  line-height:1.45;
}


/* =====================================================
   ACADEMIC MAPPING CELL
===================================================== */

.admin-resource-mapping{
  display:flex;
  flex-direction:column;

  gap:3px;
}


.admin-resource-mapping strong{
  color:#334155;

  font-size:13px;
  font-weight:800;
}


.admin-resource-mapping small{
  color:#64748b;

  font-size:12px;

  line-height:1.4;
}


/* =====================================================
   BADGES
===================================================== */

.resource-type-badge,
.resource-source-badge,
.resource-access-badge,
.resource-status-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height:28px;

  padding:5px 9px;

  border-radius:999px;

  font-size:11px;
  font-weight:900;

  white-space:nowrap;
}


/* TYPE */

.resource-type-badge{
  background:#eef2ff;
  color:#4f46e5;
}


/* SOURCE */

.resource-source-badge{
  background:#f1f5f9;
  color:#475569;
}


/* FREE */

.resource-access-badge.free{
  background:#dcfce7;
  color:#15803d;
}


/* LOGIN */

.resource-access-badge.login{
  background:#dbeafe;
  color:#1d4ed8;
}


/* PREMIUM */

.resource-access-badge.premium{
  background:#f3e8ff;
  color:#7e22ce;
}


/* PUBLISHED */

.resource-status-badge.published{
  background:#dcfce7;
  color:#15803d;
}


/* UNPUBLISHED */

.resource-status-badge.unpublished{
  background:#f1f5f9;
  color:#64748b;
}


/* =====================================================
   TABLE ACTIONS
===================================================== */

.admin-resource-actions{
  display:flex;
  align-items:center;

  gap:7px;

  flex-wrap:wrap;
}


.admin-resource-actions button{
  min-height:33px;

  padding:6px 9px;

  border:
    1px solid #dbe2ea;

  border-radius:9px;

  background:#ffffff;

  color:#475569;

  font-size:11px;
  font-weight:800;

  cursor:pointer;

  transition:
    background .2s ease,
    color .2s ease,
    border-color .2s ease,
    transform .2s ease;
}


.admin-resource-actions button:hover{
  transform:
    translateY(-1px);

  border-color:#c7d2fe;

  background:#eef2ff;

  color:#4f46e5;
}


.admin-resource-actions
.delete-resource-btn:hover{
  border-color:#fecaca;

  background:#fef2f2;

  color:#dc2626;
}


/* =====================================================
   EMPTY STATE
===================================================== */

.resource-admin-table
.admin-empty-state{
  padding:44px 20px;
}


.resource-admin-table
.admin-empty-state > span{
  display:block;

  margin-bottom:10px;

  font-size:36px;
}


.resource-admin-table
.admin-empty-state strong{
  display:block;

  margin-bottom:6px;

  color:#172033;

  font-size:16px;
  font-weight:800;
}


.resource-admin-table
.admin-empty-state p{
  margin:0;

  color:#64748b;

  font-size:13px;
}


/* =====================================================
   RESOURCE MODAL SIZE
===================================================== */

.resource-modal-dialog{
  width:min(
    900px,
    calc(100% - 30px)
  );

  max-height:
    calc(100vh - 36px);

  overflow-y:auto;
}


/* =====================================================
   FORM SECTIONS
===================================================== */

.admin-form-section{
  margin-bottom:24px;
  padding:20px;

  border:
    1px solid #e5e7eb;

  border-radius:17px;

  background:#ffffff;
}


.admin-form-section-head{
  display:flex;
  align-items:center;

  gap:12px;

  margin-bottom:19px;
}


.admin-form-section-head > span{
  display:flex;
  align-items:center;
  justify-content:center;

  flex:0 0 auto;

  width:36px;
  height:36px;

  border-radius:11px;

  background:
    linear-gradient(
      135deg,
      #2563eb,
      #7c3aed
    );

  color:#ffffff;

  font-size:14px;
  font-weight:900;

  box-shadow:
    0 7px 18px
    rgba(79,70,229,.18);
}


.admin-form-section-head strong{
  display:block;

  color:#172033;

  font-size:15px;
  font-weight:800;
}


.admin-form-section-head small{
  display:block;

  margin-top:2px;

  color:#64748b;

  font-size:12px;
}


/* =====================================================
   FORM GRID
===================================================== */

.admin-form-grid{
  display:grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap:16px;
}


.admin-form-full{
  grid-column:
    1 / -1;
}


.admin-form-grid label{
  display:flex;
  flex-direction:column;

  gap:7px;

  min-width:0;
}


.admin-form-grid label > span{
  color:#475569;

  font-size:12px;
  font-weight:800;
}


.admin-form-grid input,
.admin-form-grid select,
.admin-form-grid textarea{
  width:100%;

  border:
    1px solid #dbe2ea;

  border-radius:11px;

  background:#ffffff;

  color:#172033;

  font-family:inherit;
  font-size:14px;

  outline:none;

  transition:
    border-color .2s ease,
    box-shadow .2s ease,
    background .2s ease;
}


.admin-form-grid input,
.admin-form-grid select{
  min-height:45px;

  padding:0 12px;
}


.admin-form-grid textarea{
  min-height:90px;

  padding:12px;

  resize:vertical;
}


.admin-form-grid input:focus,
.admin-form-grid select:focus,
.admin-form-grid textarea:focus{
  border-color:#6366f1;

  box-shadow:
    0 0 0 3px
    rgba(99,102,241,.10);
}


.admin-form-grid select:disabled{
  cursor:not-allowed;

  opacity:.58;

  background:#f8fafc;
}


/* =====================================================
   FORM MESSAGE
===================================================== */

.admin-form-message{
  min-height:20px;

  margin:5px 0 0;

  font-size:12px;
  font-weight:700;
}


.admin-form-message.success{
  color:#15803d;
}


.admin-form-message.error{
  color:#dc2626;
}


/* =====================================================
   MODAL ACTIONS
===================================================== */

.resource-modal-dialog
.admin-modal-actions{
  position:sticky;

  bottom:0;

  z-index:5;

  margin-top:20px;
  padding-top:15px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.70),
      #ffffff 30%
    );
}


/* =====================================================
   DARK MODE SUPPORT
===================================================== */

body.dark-mode
.admin-resource-type-card,
body.dark-mode
.admin-resource-search,
body.dark-mode
.admin-resource-filter-grid select,
body.dark-mode
.admin-form-section,
body.dark-mode
.admin-form-grid input,
body.dark-mode
.admin-form-grid select,
body.dark-mode
.admin-form-grid textarea{
  border-color:#2d3748;

  background:#151c2b;

  color:#e5e7eb;
}


body.dark-mode
.admin-resource-type-card strong,
body.dark-mode
.admin-form-section-head strong,
body.dark-mode
.admin-resource-title-text strong,
body.dark-mode
.resource-admin-table
.admin-empty-state strong{
  color:#f8fafc;
}


body.dark-mode
.admin-resource-type-card small,
body.dark-mode
.admin-form-section-head small,
body.dark-mode
.admin-resource-title-text small,
body.dark-mode
.admin-resource-mapping small{
  color:#94a3b8;
}


body.dark-mode
.admin-resource-filter-grid label > span,
body.dark-mode
.admin-form-grid label > span,
body.dark-mode
.admin-resource-mapping strong{
  color:#cbd5e1;
}


body.dark-mode
.admin-resource-search input{
  color:#f8fafc;
}


body.dark-mode
.admin-resource-type-card > span{
  background:#20293a;
}


body.dark-mode
.admin-form-grid select:disabled{
  background:#111827;
}


/* =====================================================
   TABLET
===================================================== */

@media(max-width:1200px){

  .resource-summary-grid{
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }


  .admin-resource-type-grid{
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }


  .admin-resource-filter-grid{
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:700px){

  .resource-summary-grid{
    grid-template-columns:
      1fr;
  }


  .admin-resource-type-grid{
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap:11px;
  }


  .admin-resource-type-card{
    padding:16px 13px;
  }


  .admin-resource-type-card > span{
    width:43px;
    height:43px;

    font-size:21px;
  }


  .admin-resource-filter-grid{
    grid-template-columns:
      1fr;
  }


  .admin-form-grid{
    grid-template-columns:
      1fr;
  }


  .admin-form-full{
    grid-column:auto;
  }


  .admin-form-section{
    padding:16px;
  }


  .resource-modal-dialog{
    width:
      calc(100% - 18px);

    max-height:
      calc(100vh - 18px);
  }

}


/* =====================================================
   VERY SMALL MOBILE
===================================================== */

@media(max-width:430px){

  .admin-resource-type-grid{
    grid-template-columns:
      1fr;
  }

}
/* =====================================================
   ADMIN RESOURCES — SUMMARY + SIDEBAR FIX
===================================================== */


/* SUMMARY GRID */

.resource-summary-grid{
  display:grid !important;

  grid-template-columns:
    repeat(4, minmax(0, 1fr)) !important;

  gap:16px !important;

  margin:0 0 24px !important;
}


/* SUMMARY CARDS */

.resource-summary-grid > article{
  display:flex !important;
  align-items:center !important;

  gap:14px !important;

  min-width:0;

  padding:20px !important;

  border:1px solid #e5e7eb !important;

  border-radius:18px !important;

  background:#ffffff !important;

  box-shadow:
    0 8px 24px
    rgba(15,23,42,.05) !important;

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease;
}


.resource-summary-grid > article:hover{
  transform:translateY(-3px);

  border-color:
    rgba(99,102,241,.25) !important;

  box-shadow:
    0 14px 30px
    rgba(79,70,229,.09) !important;
}


/* ICON */

.resource-summary-grid > article > span{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  flex:0 0 auto;

  width:48px !important;
  height:48px !important;

  border-radius:14px !important;

  background:
    linear-gradient(
      135deg,
      #eef2ff,
      #f5f3ff
    ) !important;

  font-size:23px !important;
}


/* TEXT */

.resource-summary-grid article div{
  min-width:0;
}


.resource-summary-grid article small{
  display:block !important;

  margin-bottom:5px !important;

  color:#64748b !important;

  font-size:11px !important;
  font-weight:800 !important;

  letter-spacing:.04em;
}


.resource-summary-grid article strong{
  display:block !important;

  color:#172033 !important;

  font-size:25px !important;
  font-weight:900 !important;

  line-height:1;
}


/* =====================================================
   ADMIN SIDEBAR NAV FIX
===================================================== */

.admin-sidebar .admin-nav{
  display:flex;
  flex-direction:column;

  gap:5px;
}


.admin-sidebar .admin-nav > a{
  display:flex !important;
  align-items:center !important;

  gap:11px !important;

  width:100%;

  padding:11px 13px !important;

  border-radius:11px;

  font-size:14px !important;
  line-height:1.3 !important;

  text-decoration:none;
}


.admin-sidebar .admin-nav > a > span{
  flex:0 0 22px;

  width:22px;

  text-align:center;
}


/* ACTIVE */

.admin-sidebar .admin-nav > a.active{
  background:
    linear-gradient(
      135deg,
      rgba(37,99,235,.18),
      rgba(124,58,237,.18)
    );

  color:#ffffff;
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media(max-width:1200px){

  .resource-summary-grid{
    grid-template-columns:
      repeat(2, minmax(0,1fr)) !important;
  }

}


@media(max-width:650px){

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

}

/* =====================================================
   ADMIN RESOURCES
   MATCH ACADEMIC ADMIN DESIGN
===================================================== */


/* =====================================================
   PAGE SPACING
===================================================== */

.admin-resources-page{
  display:flex;
  flex-direction:column;
  gap:24px;
}


/* =====================================================
   SUMMARY — SAME DESIGN AS ACADEMIC PAGE
===================================================== */

.admin-resources-page
.resource-summary-grid{
  display:grid !important;

  grid-template-columns:
    repeat(4, minmax(0, 1fr)) !important;

  gap:16px !important;

  margin:0 !important;
}


.admin-resources-page
.resource-summary-grid > article{
  display:flex !important;

  align-items:center !important;

  gap:15px !important;

  min-height:108px;

  padding:20px !important;

  border:
    1px solid #e2e8f0 !important;

  border-radius:18px !important;

  background:#ffffff !important;

  box-shadow:
    0 8px 24px
    rgba(15,23,42,.04) !important;
}


.admin-resources-page
.resource-summary-grid > article > span{
  display:flex !important;

  align-items:center !important;

  justify-content:center !important;

  flex:0 0 auto;

  width:54px !important;

  height:54px !important;

  border-radius:15px !important;

  background:
    linear-gradient(
      135deg,
      #eef2ff,
      #f5f3ff
    ) !important;

  font-size:24px !important;
}


.admin-resources-page
.resource-summary-grid article div{
  min-width:0;
}


.admin-resources-page
.resource-summary-grid article strong{
  display:block !important;

  margin:0 0 6px !important;

  color:#4f46e5 !important;

  font-size:28px !important;

  font-weight:900 !important;

  line-height:1 !important;
}


.admin-resources-page
.resource-summary-grid article small{
  display:block !important;

  margin:0 !important;

  color:#64748b !important;

  font-size:12px !important;

  font-weight:800 !important;

  letter-spacing:0 !important;

  text-transform:none !important;
}


/* =====================================================
   ADMIN PANELS
===================================================== */

.admin-resources-page
.admin-dashboard-panel{
  margin:0 !important;

  padding:24px !important;

  border:
    1px solid #e2e8f0;

  border-radius:20px;

  background:#ffffff;

  box-shadow:
    0 8px 26px
    rgba(15,23,42,.035);
}


/* =====================================================
   PANEL HEADINGS
===================================================== */

.admin-resources-page
.admin-panel-heading{
  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:20px;

  margin-bottom:20px;
}


.admin-resources-page
.admin-panel-heading h2{
  margin:6px 0 0;

  color:#172033;

  font-size:24px;

  font-weight:850;

  line-height:1.2;
}


/* =====================================================
   RESOURCE TYPE CARDS
===================================================== */

.admin-resources-page
.admin-resource-type-grid{
  margin-top:0 !important;
}


.admin-resources-page
.admin-resource-type-card{
  min-height:150px;

  border:
    1px solid #e2e8f0;

  border-radius:17px;

  box-shadow:none;
}


.admin-resources-page
.admin-resource-type-card:hover{
  border-color:#c7d2fe;

  box-shadow:
    0 10px 25px
    rgba(79,70,229,.08);
}


/* =====================================================
   FILTERS
===================================================== */

.admin-resources-page
.admin-resource-filter-grid{
  margin-top:0 !important;
}


.admin-resources-page
.admin-resource-filter-grid select{
  min-height:48px;

  border-radius:12px;
}


.admin-resources-page
.admin-resource-search{
  margin-top:20px;

  min-height:52px;
}


/* =====================================================
   RESOURCE TABLE
===================================================== */

.admin-resources-page
.admin-table-wrap{
  overflow-x:auto;

  border:
    1px solid #e2e8f0;

  border-radius:16px;
}


.admin-resources-page
.resource-admin-table{
  width:100%;

  margin:0;

  border-collapse:collapse;
}


.admin-resources-page
.resource-admin-table thead{
  background:#f8fafc;
}


.admin-resources-page
.resource-admin-table th{
  padding:16px;

  color:#475569;

  font-size:12px;

  font-weight:850;

  text-align:left;
}


.admin-resources-page
.resource-admin-table td{
  padding:17px 16px;

  border-top:
    1px solid #e5e7eb;

  vertical-align:middle;
}


/* =====================================================
   ACTION BUTTONS
===================================================== */

.admin-resources-page
.admin-resource-actions button{
  min-height:36px;

  padding:7px 11px;

  border-radius:9px;

  font-size:12px;
}


/* =====================================================
   RESET BUTTON
===================================================== */

.admin-resources-page
.resource-filter-reset{
  min-height:40px;

  padding:8px 14px;

  border:
    1px solid #dbe2ea;

  border-radius:10px;

  background:#ffffff;

  color:#475569;

  font-size:12px;

  font-weight:800;

  cursor:pointer;
}


.admin-resources-page
.resource-filter-reset:hover{
  border-color:#c7d2fe;

  background:#eef2ff;

  color:#4f46e5;
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media(max-width:1200px){

  .admin-resources-page
  .resource-summary-grid{
    grid-template-columns:
      repeat(2, minmax(0,1fr)) !important;
  }

}


@media(max-width:650px){

  .admin-resources-page
  .resource-summary-grid{
    grid-template-columns:
      1fr !important;
  }


  .admin-resources-page
  .admin-dashboard-panel{
    padding:18px !important;
  }


  .admin-resources-page
  .admin-panel-heading{
    align-items:flex-start;

    flex-direction:column;
  }

}

/* =====================================================
   ADMIN RESOURCE ACTION BUTTONS — FINAL FIX
===================================================== */

.admin-resources-page
.admin-resource-actions{
  display:flex !important;
  align-items:center !important;
  flex-wrap:nowrap !important;

  gap:8px !important;

  min-width:245px;
}


/* COMMON BUTTON */

.admin-resources-page
.admin-resource-actions button{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  min-width:auto !important;
  min-height:38px !important;

  padding:8px 13px !important;

  border-radius:10px !important;

  font-size:12px !important;
  font-weight:800 !important;

  line-height:1 !important;

  white-space:nowrap !important;

  cursor:pointer;

  transition:
    transform .2s ease,
    box-shadow .2s ease,
    border-color .2s ease,
    background .2s ease;
}


/* =====================================================
   EDIT
===================================================== */

.admin-resources-page
.admin-resource-actions
button[data-resource-action="edit"]{
  border:1px solid #c7d2fe !important;

  background:#eef2ff !important;

  color:#4f46e5 !important;
}


.admin-resources-page
.admin-resource-actions
button[data-resource-action="edit"]:hover{
  transform:translateY(-2px);

  background:#e0e7ff !important;

  border-color:#818cf8 !important;

  box-shadow:
    0 6px 16px
    rgba(79,70,229,.15);
}


/* =====================================================
   PUBLISH / UNPUBLISH
===================================================== */

.admin-resources-page
.admin-resource-actions
button[data-resource-action="toggle"]{
  border:1px solid #fde68a !important;

  background:#fffbeb !important;

  color:#b45309 !important;
}


.admin-resources-page
.admin-resource-actions
button[data-resource-action="toggle"]:hover{
  transform:translateY(-2px);

  background:#fef3c7 !important;

  border-color:#f59e0b !important;

  box-shadow:
    0 6px 16px
    rgba(245,158,11,.14);
}


/* =====================================================
   DELETE
===================================================== */

.admin-resources-page
.admin-resource-actions
.delete-resource-btn{
  border:1px solid #fecaca !important;

  background:#fef2f2 !important;

  color:#dc2626 !important;
}


.admin-resources-page
.admin-resource-actions
.delete-resource-btn:hover{
  transform:translateY(-2px);

  background:#fee2e2 !important;

  border-color:#f87171 !important;

  box-shadow:
    0 6px 16px
    rgba(220,38,38,.14);
}


/* =====================================================
   ACTION COLUMN WIDTH
===================================================== */

.admin-resources-page
.resource-admin-table th:last-child,
.admin-resources-page
.resource-admin-table td:last-child{
  min-width:270px;
}


/* =====================================================
   SMALL SCREEN
===================================================== */

@media(max-width:900px){

  .admin-resources-page
  .admin-resource-actions{
    flex-wrap:wrap !important;

    min-width:190px;
  }

}

/* =====================================================
   ADMIN RESOURCE CONDITIONAL FIELDS
===================================================== */

.resource-field-hint{
  display:block;

  margin-top:3px;

  color:#64748b;

  font-size:12px;
  font-weight:600;

  line-height:1.4;
}


#resourceSubjectField.hidden{
  display:none !important;
}

/* =====================================================
   ADMIN COURSES - TABLE ACTION BUTTONS
===================================================== */

.admin-courses-page .admin-table-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:nowrap;
}


/* COMMON ACTION BUTTON */

.admin-courses-page .admin-table-actions button{
  min-height:36px;

  padding:8px 14px;

  border:1px solid transparent;
  border-radius:10px;

  font-size:13px;
  font-weight:700;
  line-height:1;

  white-space:nowrap;

  cursor:pointer;

  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease;

  font-family:inherit;
}


/* =====================================================
   EDIT BUTTON
===================================================== */

.admin-courses-page
.admin-table-actions
button[data-course-action="edit"]{

  color:#4338ca;

  background:
    linear-gradient(
      135deg,
      #eef2ff,
      #f5f3ff
    );

  border-color:#c7d2fe;
}


.admin-courses-page
.admin-table-actions
button[data-course-action="edit"]:hover{

  color:#ffffff;

  background:
    linear-gradient(
      135deg,
      #4f46e5,
      #7c3aed
    );

  border-color:#4f46e5;

  box-shadow:
    0 7px 18px
    rgba(79,70,229,0.22);

  transform:translateY(-1px);
}


/* =====================================================
   PUBLISH / UNPUBLISH BUTTON
===================================================== */

.admin-courses-page
.admin-table-actions
button[data-course-action="status"]{

  color:#a16207;

  background:#fffbeb;

  border-color:#fde68a;
}


.admin-courses-page
.admin-table-actions
button[data-course-action="status"]:hover{

  color:#ffffff;

  background:
    linear-gradient(
      135deg,
      #f59e0b,
      #d97706
    );

  border-color:#f59e0b;

  box-shadow:
    0 7px 18px
    rgba(245,158,11,0.22);

  transform:translateY(-1px);
}


/* =====================================================
   DELETE BUTTON
===================================================== */

.admin-courses-page
.admin-table-actions
button[data-course-action="delete"]{

  color:#dc2626;

  background:#fef2f2;

  border-color:#fecaca;
}


.admin-courses-page
.admin-table-actions
button[data-course-action="delete"]:hover{

  color:#ffffff;

  background:
    linear-gradient(
      135deg,
      #ef4444,
      #dc2626
    );

  border-color:#ef4444;

  box-shadow:
    0 7px 18px
    rgba(239,68,68,0.22);

  transform:translateY(-1px);
}


/* =====================================================
   CLICK EFFECT
===================================================== */

.admin-courses-page
.admin-table-actions
button:active{

  transform:
    translateY(0)
    scale(0.97);
}


/* =====================================================
   KEYBOARD FOCUS
===================================================== */

.admin-courses-page
.admin-table-actions
button:focus-visible{

  outline:3px solid
    rgba(79,70,229,0.18);

  outline-offset:2px;
}


/* =====================================================
   COURSE TABLE TITLE
===================================================== */

.admin-courses-page
.admin-table-title-cell{

  display:flex;
  flex-direction:column;
  gap:5px;

  min-width:210px;
}


.admin-courses-page
.admin-table-title-cell strong{

  font-size:14px;
  font-weight:800;
  line-height:1.35;

  color:#172033;
}


.admin-courses-page
.admin-table-title-cell small{

  font-size:12px;
  line-height:1.45;

  color:#64748b;
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media(max-width:1100px){

  .admin-courses-page
  .admin-table-actions{

    flex-wrap:wrap;

  }

}


@media(max-width:600px){

  .admin-courses-page
  .admin-table-actions{

    gap:6px;

  }


  .admin-courses-page
  .admin-table-actions
  button{

    min-height:34px;

    padding:8px 11px;

    font-size:12px;

    border-radius:9px;

  }

}

/* =====================================================
   ADMIN COURSES - COMPLETE ACTION BUTTON STYLES
   Lessons | Edit | Publish-Unpublish | Delete
===================================================== */


/* ACTION WRAPPER */

.admin-courses-page .admin-table-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:nowrap;
}


/* COMMON BUTTON STYLE */

.admin-courses-page
.admin-table-actions
button{

  min-height:36px;

  padding:8px 13px;

  border:1px solid transparent;
  border-radius:10px;

  font-family:inherit;

  font-size:13px;
  font-weight:700;
  line-height:1;

  white-space:nowrap;

  cursor:pointer;

  transition:
    background 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}


/* =====================================================
   LESSONS BUTTON
===================================================== */

.admin-courses-page
.admin-table-actions
button[data-course-action="lessons"]{

  color:#0369a1;

  background:
    linear-gradient(
      135deg,
      #f0f9ff,
      #eff6ff
    );

  border-color:#bae6fd;
}


.admin-courses-page
.admin-table-actions
button[data-course-action="lessons"]:hover{

  color:#ffffff;

  background:
    linear-gradient(
      135deg,
      #0284c7,
      #2563eb
    );

  border-color:#0284c7;

  box-shadow:
    0 7px 18px
    rgba(2,132,199,0.22);

  transform:translateY(-1px);
}


/* =====================================================
   EDIT BUTTON
===================================================== */

.admin-courses-page
.admin-table-actions
button[data-course-action="edit"]{

  color:#4338ca;

  background:
    linear-gradient(
      135deg,
      #eef2ff,
      #f5f3ff
    );

  border-color:#c7d2fe;
}


.admin-courses-page
.admin-table-actions
button[data-course-action="edit"]:hover{

  color:#ffffff;

  background:
    linear-gradient(
      135deg,
      #4f46e5,
      #7c3aed
    );

  border-color:#4f46e5;

  box-shadow:
    0 7px 18px
    rgba(79,70,229,0.22);

  transform:translateY(-1px);
}


/* =====================================================
   PUBLISH / UNPUBLISH BUTTON
===================================================== */

.admin-courses-page
.admin-table-actions
button[data-course-action="status"]{

  color:#a16207;

  background:
    linear-gradient(
      135deg,
      #fffbeb,
      #fefce8
    );

  border-color:#fde68a;
}


.admin-courses-page
.admin-table-actions
button[data-course-action="status"]:hover{

  color:#ffffff;

  background:
    linear-gradient(
      135deg,
      #f59e0b,
      #d97706
    );

  border-color:#f59e0b;

  box-shadow:
    0 7px 18px
    rgba(245,158,11,0.22);

  transform:translateY(-1px);
}


/* =====================================================
   DELETE BUTTON
===================================================== */

.admin-courses-page
.admin-table-actions
button[data-course-action="delete"]{

  color:#dc2626;

  background:
    linear-gradient(
      135deg,
      #fef2f2,
      #fff1f2
    );

  border-color:#fecaca;
}


.admin-courses-page
.admin-table-actions
button[data-course-action="delete"]:hover{

  color:#ffffff;

  background:
    linear-gradient(
      135deg,
      #ef4444,
      #dc2626
    );

  border-color:#ef4444;

  box-shadow:
    0 7px 18px
    rgba(239,68,68,0.22);

  transform:translateY(-1px);
}


/* =====================================================
   CLICK EFFECT
===================================================== */

.admin-courses-page
.admin-table-actions
button:active{

  transform:
    translateY(0)
    scale(0.97);
}


/* =====================================================
   FOCUS
===================================================== */

.admin-courses-page
.admin-table-actions
button:focus-visible{

  outline:3px solid
    rgba(79,70,229,0.18);

  outline-offset:2px;
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media(max-width:1200px){

  .admin-courses-page
  .admin-table-actions{

    flex-wrap:wrap;
  }

}


@media(max-width:600px){

  .admin-courses-page
  .admin-table-actions{

    gap:6px;
  }


  .admin-courses-page
  .admin-table-actions
  button{

    min-height:34px;

    padding:8px 10px;

    font-size:12px;

    border-radius:9px;
  }

}

/* =====================================================
   ADMIN LESSONS - ACTION BUTTONS
   Edit | Publish-Unpublish | Delete
===================================================== */

.admin-lessons-page .admin-table-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:nowrap;
}


/* COMMON BUTTON */

.admin-lessons-page
.admin-table-actions
button{

  min-height:36px;

  padding:8px 13px;

  border:1px solid transparent;
  border-radius:10px;

  font-family:inherit;

  font-size:13px;
  font-weight:700;
  line-height:1;

  white-space:nowrap;

  cursor:pointer;

  transition:
    background 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}


/* =====================================================
   EDIT BUTTON
===================================================== */

.admin-lessons-page
.admin-table-actions
button[data-lesson-action="edit"]{

  color:#4338ca;

  background:
    linear-gradient(
      135deg,
      #eef2ff,
      #f5f3ff
    );

  border-color:#c7d2fe;
}


.admin-lessons-page
.admin-table-actions
button[data-lesson-action="edit"]:hover{

  color:#ffffff;

  background:
    linear-gradient(
      135deg,
      #4f46e5,
      #7c3aed
    );

  border-color:#4f46e5;

  box-shadow:
    0 7px 18px
    rgba(79,70,229,0.22);

  transform:translateY(-1px);
}


/* =====================================================
   PUBLISH / UNPUBLISH BUTTON
===================================================== */

.admin-lessons-page
.admin-table-actions
button[data-lesson-action="status"]{

  color:#a16207;

  background:
    linear-gradient(
      135deg,
      #fffbeb,
      #fefce8
    );

  border-color:#fde68a;
}


.admin-lessons-page
.admin-table-actions
button[data-lesson-action="status"]:hover{

  color:#ffffff;

  background:
    linear-gradient(
      135deg,
      #f59e0b,
      #d97706
    );

  border-color:#f59e0b;

  box-shadow:
    0 7px 18px
    rgba(245,158,11,0.22);

  transform:translateY(-1px);
}


/* =====================================================
   DELETE BUTTON
===================================================== */

.admin-lessons-page
.admin-table-actions
button[data-lesson-action="delete"]{

  color:#dc2626;

  background:
    linear-gradient(
      135deg,
      #fef2f2,
      #fff1f2
    );

  border-color:#fecaca;
}


.admin-lessons-page
.admin-table-actions
button[data-lesson-action="delete"]:hover{

  color:#ffffff;

  background:
    linear-gradient(
      135deg,
      #ef4444,
      #dc2626
    );

  border-color:#ef4444;

  box-shadow:
    0 7px 18px
    rgba(239,68,68,0.22);

  transform:translateY(-1px);
}


/* CLICK EFFECT */

.admin-lessons-page
.admin-table-actions
button:active{

  transform:
    translateY(0)
    scale(0.97);
}


/* FOCUS */

.admin-lessons-page
.admin-table-actions
button:focus-visible{

  outline:3px solid
    rgba(79,70,229,0.18);

  outline-offset:2px;
}


/* RESPONSIVE */

@media(max-width:1100px){

  .admin-lessons-page
  .admin-table-actions{

    flex-wrap:wrap;
  }

}


@media(max-width:600px){

  .admin-lessons-page
  .admin-table-actions{

    gap:6px;
  }


  .admin-lessons-page
  .admin-table-actions
  button{

    min-height:34px;

    padding:8px 10px;

    font-size:12px;

    border-radius:9px;
  }

}

/* =====================================================
   ADMIN LESSON - VIDEO / PDF CONTENT BOX
===================================================== */

.admin-lesson-content-box{

  margin-top:18px;
  padding:18px;

  border:1px solid #e2e8f0;
  border-radius:16px;

  background:#f8fafc;
}


.admin-lesson-content-box.hidden{
  display:none;
}


.admin-lesson-content-heading{

  display:flex;
  align-items:center;
  gap:12px;

  margin-bottom:16px;
}


.admin-lesson-content-heading > span{

  width:42px;
  height:42px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:12px;

  background:#ffffff;

  border:1px solid #e2e8f0;

  font-size:20px;
}


.admin-lesson-content-heading strong{

  display:block;

  font-size:15px;
  font-weight:800;

  color:#172033;
}


.admin-lesson-content-heading small{

  display:block;

  margin-top:3px;

  font-size:12px;

  color:#64748b;
}

/* =====================================================
   ADMIN LIVE CLASSES - TABLE ACTION BUTTONS
   Same visual system as Courses / Lessons
===================================================== */

.admin-live-page .admin-table-actions{
  display:flex;
  align-items:center;
  flex-wrap:nowrap;
  gap:7px;
}


/* COMMON */

.admin-live-page .admin-table-actions button{
  min-height:34px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:8px 12px;

  border:1px solid transparent;
  border-radius:9px;

  font-family:inherit;
  font-size:12px;
  line-height:1;
  font-weight:750;

  white-space:nowrap;

  cursor:pointer;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background .18s ease,
    border-color .18s ease;
}


/* =====================================================
   EDIT
===================================================== */

.admin-live-page
.admin-table-actions
button[data-live-action="edit"]{
  background:#eef2ff;

  border-color:#c7d2fe;

  color:#4f46e5;
}


.admin-live-page
.admin-table-actions
button[data-live-action="edit"]:hover{
  background:#4f46e5;

  border-color:#4f46e5;

  color:#ffffff;

  transform:translateY(-1px);

  box-shadow:
    0 6px 14px
    rgba(79,70,229,.18);
}


/* =====================================================
   PUBLISH / UNPUBLISH
===================================================== */

.admin-live-page
.admin-table-actions
button[data-live-action="status"]{
  background:#fff7ed;

  border-color:#fed7aa;

  color:#c2410c;
}


.admin-live-page
.admin-table-actions
button[data-live-action="status"]:hover{
  background:#f97316;

  border-color:#f97316;

  color:#ffffff;

  transform:translateY(-1px);

  box-shadow:
    0 6px 14px
    rgba(249,115,22,.18);
}


/* =====================================================
   DELETE
===================================================== */

.admin-live-page
.admin-table-actions
button[data-live-action="delete"]{
  background:#fef2f2;

  border-color:#fecaca;

  color:#dc2626;
}


.admin-live-page
.admin-table-actions
button[data-live-action="delete"]:hover{
  background:#dc2626;

  border-color:#dc2626;

  color:#ffffff;

  transform:translateY(-1px);

  box-shadow:
    0 6px 14px
    rgba(220,38,38,.18);
}


/* =====================================================
   ACTIVE
===================================================== */

.admin-live-page
.admin-table-actions button:active{
  transform:translateY(0);
}


/* =====================================================
   KEYBOARD FOCUS
===================================================== */

.admin-live-page
.admin-table-actions button:focus-visible{
  outline:3px solid rgba(79,70,229,.16);
  outline-offset:2px;
}


/* =====================================================
   TABLE MOBILE / SMALL SCREEN
===================================================== */

@media(max-width:900px){

  .admin-live-page .admin-table-actions{
    flex-wrap:wrap;
  }

}


@media(max-width:600px){

  .admin-live-page
  .admin-table-actions button{
    min-height:32px;

    padding:7px 10px;

    font-size:12px;
  }

}

/* =====================================================
   ADMIN EXAMS
   TABLE ACTION BUTTONS
   Edit / Publish-Unpublish / Delete
===================================================== */

.admin-exams-page .admin-resource-actions{
  display:flex;
  align-items:center;
  flex-wrap:nowrap;
  gap:7px;
}


/* =====================================================
   COMMON ACTION BUTTON
===================================================== */

.admin-exams-page
.admin-resource-actions
button{
  min-height:34px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:8px 12px;

  border:1px solid transparent;
  border-radius:9px;

  font-family:inherit;
  font-size:12px;
  line-height:1;
  font-weight:750;

  white-space:nowrap;

  cursor:pointer;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background .18s ease,
    border-color .18s ease,
    color .18s ease;
}


/* =====================================================
   EDIT
===================================================== */

.admin-exams-page
.admin-resource-actions
button[data-exam-action="edit"]{
  background:#eef2ff;
  border-color:#c7d2fe;
  color:#4f46e5;
}


.admin-exams-page
.admin-resource-actions
button[data-exam-action="edit"]:hover{
  background:#4f46e5;
  border-color:#4f46e5;
  color:#ffffff;

  transform:translateY(-1px);

  box-shadow:
    0 6px 14px
    rgba(79,70,229,.18);
}


/* =====================================================
   PUBLISH / UNPUBLISH
===================================================== */

.admin-exams-page
.admin-resource-actions
button[data-exam-action="status"]{
  background:#fff7ed;
  border-color:#fed7aa;
  color:#c2410c;
}


.admin-exams-page
.admin-resource-actions
button[data-exam-action="status"]:hover{
  background:#f97316;
  border-color:#f97316;
  color:#ffffff;

  transform:translateY(-1px);

  box-shadow:
    0 6px 14px
    rgba(249,115,22,.18);
}


/* =====================================================
   DELETE
===================================================== */

.admin-exams-page
.admin-resource-actions
button[data-exam-action="delete"]{
  background:#fef2f2;
  border-color:#fecaca;
  color:#dc2626;
}


.admin-exams-page
.admin-resource-actions
button[data-exam-action="delete"]:hover{
  background:#dc2626;
  border-color:#dc2626;
  color:#ffffff;

  transform:translateY(-1px);

  box-shadow:
    0 6px 14px
    rgba(220,38,38,.18);
}


/* =====================================================
   ACTIVE
===================================================== */

.admin-exams-page
.admin-resource-actions
button:active{
  transform:translateY(0);
}


/* =====================================================
   KEYBOARD FOCUS
===================================================== */

.admin-exams-page
.admin-resource-actions
button:focus-visible{
  outline:3px solid rgba(79,70,229,.15);
  outline-offset:2px;
}


/* =====================================================
   ACTION COLUMN
===================================================== */

.admin-exams-page
.admin-data-table td:last-child{
  white-space:nowrap;
}


/* =====================================================
   TABLE TITLE
===================================================== */

.admin-exams-page
.admin-table-title-cell{
  min-width:190px;
}


.admin-exams-page
.admin-table-title-cell strong{
  display:block;

  font-size:13px;
  line-height:1.45;
  font-weight:800;

  color:#172033;
}


.admin-exams-page
.admin-table-title-cell small{
  display:block;

  max-width:290px;

  margin-top:4px;

  font-size:11px;
  line-height:1.45;

  color:#64748b;
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media(max-width:900px){

  .admin-exams-page
  .admin-resource-actions{
    flex-wrap:wrap;
  }


  .admin-exams-page
  .admin-data-table td:last-child{
    white-space:normal;
  }

}


@media(max-width:600px){

  .admin-exams-page
  .admin-resource-actions
  button{
    min-height:32px;

    padding:7px 10px;

    font-size:12px;
  }

}

/* =====================================================
   ADMIN EXAMS TABLE - FINAL VISUAL FIX
===================================================== */

.admin-exams-page .admin-table-wrap{
  width:100%;
  overflow-x:auto;
}


.admin-exams-page .admin-data-table{
  width:100%;
  min-width:1080px;
  table-layout:auto;
}


/* =====================================================
   TABLE CELLS
===================================================== */

.admin-exams-page .admin-data-table th{
  padding:15px 16px;
  font-size:13px;
  font-weight:800;
  white-space:nowrap;
  color:#475569;
}


.admin-exams-page .admin-data-table td{
  padding:16px;
  vertical-align:middle;
  font-size:14px;
  line-height:1.45;
  color:#334155;
}


/* Exam column */

.admin-exams-page .admin-data-table th:nth-child(1),
.admin-exams-page .admin-data-table td:nth-child(1){
  min-width:250px;
}


/* Category */

.admin-exams-page .admin-data-table th:nth-child(2),
.admin-exams-page .admin-data-table td:nth-child(2){
  min-width:125px;
}


/* Level */

.admin-exams-page .admin-data-table th:nth-child(3),
.admin-exams-page .admin-data-table td:nth-child(3){
  min-width:125px;
}


/* Slug */

.admin-exams-page .admin-data-table th:nth-child(4),
.admin-exams-page .admin-data-table td:nth-child(4){
  min-width:165px;
}


/* Access */

.admin-exams-page .admin-data-table th:nth-child(5),
.admin-exams-page .admin-data-table td:nth-child(5){
  min-width:95px;
}


/* Status */

.admin-exams-page .admin-data-table th:nth-child(6),
.admin-exams-page .admin-data-table td:nth-child(6){
  min-width:115px;
}


/* Actions */

.admin-exams-page .admin-data-table th:nth-child(7),
.admin-exams-page .admin-data-table td:nth-child(7){
  min-width:330px;
}


/* =====================================================
   EXAM TITLE
===================================================== */

.admin-exams-page .admin-table-title-cell{
  min-width:0;
}


.admin-exams-page .admin-table-title-cell strong{
  display:block;
  margin-bottom:4px;

  font-size:15px;
  line-height:1.35;
  font-weight:850;

  color:#172033;
}


.admin-exams-page .admin-table-title-cell small{
  display:block;

  max-width:280px;

  font-size:12px;
  line-height:1.45;

  color:#64748b;
}


/* =====================================================
   CATEGORY + LEVEL
===================================================== */

.admin-exams-page
.admin-data-table td:nth-child(2) strong{
  font-size:13px;
  line-height:1.4;
  font-weight:800;
}


.admin-exams-page
.admin-data-table td:nth-child(3){
  font-size:13px;
  white-space:nowrap;
}


/* =====================================================
   SLUG
===================================================== */

.admin-exams-page
.admin-data-table td:nth-child(4) strong{
  display:block;

  margin-bottom:3px;

  font-size:13px;
  line-height:1.35;

  font-weight:800;

  color:#172033;

  white-space:nowrap;
}


.admin-exams-page
.admin-data-table td:nth-child(4) small{
  display:block;

  font-size:11px;
  line-height:1.4;

  color:#64748b;

  white-space:nowrap;
}


/* =====================================================
   BADGES
===================================================== */

.admin-exams-page .resource-access-badge,
.admin-exams-page .resource-status-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height:30px;

  padding:6px 10px;

  border-radius:999px;

  font-size:11px;
  line-height:1;

  font-weight:800;

  white-space:nowrap;
}


/* =====================================================
   ACTION AREA
===================================================== */

.admin-exams-page .admin-resource-actions{
  display:flex;
  align-items:center;

  gap:8px;

  flex-wrap:nowrap;

  white-space:nowrap;
}


/* Common button */

.admin-exams-page
.admin-resource-actions button{
  min-height:36px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:8px 12px;

  border-radius:10px;
  border:1px solid transparent;

  font-family:inherit;
  font-size:12px;
  line-height:1;
  font-weight:800;

  cursor:pointer;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background .18s ease,
    border-color .18s ease;
}


.admin-exams-page
.admin-resource-actions button:hover{
  transform:translateY(-1px);
}


/* =====================================================
   EDIT
===================================================== */

.admin-exams-page
.admin-resource-actions
button[data-exam-action="edit"]{
  background:#eef2ff;
  border-color:#c7d2fe;
  color:#4f46e5;
}


.admin-exams-page
.admin-resource-actions
button[data-exam-action="edit"]:hover{
  background:#e0e7ff;

  box-shadow:
    0 5px 14px
    rgba(79,70,229,.12);
}


/* =====================================================
   CONTENT
===================================================== */

.admin-exams-page
.admin-resource-actions
button[data-exam-action="content"]{
  background:#f3e8ff;
  border-color:#ddd6fe;
  color:#7c3aed;
}


.admin-exams-page
.admin-resource-actions
button[data-exam-action="content"]:hover{
  background:#ede9fe;

  box-shadow:
    0 5px 14px
    rgba(124,58,237,.12);
}


/* =====================================================
   PUBLISH / UNPUBLISH
===================================================== */

.admin-exams-page
.admin-resource-actions
button[data-exam-action="status"]{
  background:#fff7ed;
  border-color:#fed7aa;
  color:#c2410c;
}


.admin-exams-page
.admin-resource-actions
button[data-exam-action="status"]:hover{
  background:#ffedd5;

  box-shadow:
    0 5px 14px
    rgba(234,88,12,.10);
}


/* =====================================================
   DELETE
===================================================== */

.admin-exams-page
.admin-resource-actions
button[data-exam-action="delete"]{
  background:#fff1f2;
  border-color:#fecdd3;
  color:#dc2626;
}


.admin-exams-page
.admin-resource-actions
button[data-exam-action="delete"]:hover{
  background:#ffe4e6;

  box-shadow:
    0 5px 14px
    rgba(220,38,38,.10);
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media(max-width:900px){

  .admin-exams-page .admin-data-table{
    min-width:1050px;
  }


  .admin-exams-page .admin-resource-actions{
    gap:6px;
  }


  .admin-exams-page
  .admin-resource-actions button{
    min-height:34px;
    padding:7px 10px;
    font-size:11px;
  }

}

/* =====================================================
   EXPLORE PAGE - COMPACT LAYOUT FIX
===================================================== */


/* =====================================================
   HERO - SMALLER
===================================================== */

.explore-hero{
  min-height:auto !important;
  padding:52px 0 46px !important;
}


.explore-hero-content{
  max-width:950px;
}


.explore-hero-content h1{
  margin-top:12px;
  margin-bottom:18px;

  font-size:clamp(
    40px,
    4.2vw,
    66px
  ) !important;

  line-height:1.06 !important;
}


.explore-hero-content p{
  max-width:850px;

  margin-bottom:0;

  font-size:16px;
  line-height:1.65;
}



/* =====================================================
   MAIN CATEGORY SECTION
   Academic / Exams / Career / General
===================================================== */

.explore-hero + .section{
  padding-top:50px !important;
  padding-bottom:50px !important;
}


.explore-hero + .section .center-head{
  margin-bottom:30px !important;
}


.explore-hero + .section .center-head h2{
  margin-top:8px;
  margin-bottom:8px;

  font-size:clamp(
    28px,
    3vw,
    40px
  );
}


.explore-hero + .section .center-head p{
  margin-top:0;
}


.explore-hero + .section .quick-grid{
  gap:18px;
}


.explore-hero + .section .quick-card{
  min-height:210px !important;

  padding:26px !important;
}


.explore-hero + .section .quick-card > span{
  font-size:34px !important;
}


.explore-hero + .section .quick-card h3{
  margin-top:14px;
  margin-bottom:8px;

  font-size:20px;
}


.explore-hero + .section .quick-card p{
  margin-bottom:16px;

  font-size:14px;
  line-height:1.55;
}



/* =====================================================
   ACADEMIC PATH - COMPACT
===================================================== */

.academic-path-section{
  padding:22px 0 !important;
}


.academic-path{
  min-height:auto !important;

  padding:16px 22px !important;

  border-radius:18px;
}


.path-item{
  min-height:auto !important;
}


.path-item > span{
  width:36px !important;
  height:36px !important;

  font-size:13px !important;
}


.path-item small{
  font-size:10px !important;
}


.path-item strong{
  font-size:14px !important;
}


.path-line{
  margin-left:12px !important;
  margin-right:12px !important;
}



/* =====================================================
   MAIN ACADEMIC EXPLORER
===================================================== */

.academic-path-section + .section{
  padding-top:38px !important;
}



/* =====================================================
   TABLET
===================================================== */

@media(max-width:900px){

  .explore-hero{
    padding:42px 0 38px !important;
  }


  .explore-hero-content h1{
    font-size:clamp(
      38px,
      7vw,
      54px
    ) !important;
  }


  .explore-hero + .section{
    padding-top:40px !important;
    padding-bottom:40px !important;
  }


  .explore-hero + .section .quick-card{
    min-height:190px !important;
  }


  .academic-path-section{
    padding:18px 0 !important;
  }

}



/* =====================================================
   MOBILE
===================================================== */

@media(max-width:600px){

  .explore-hero{
    padding:32px 0 30px !important;
  }


  .explore-hero-content h1{
    margin-top:8px;
    margin-bottom:14px;

    font-size:36px !important;
  }


  .explore-hero-content p{
    font-size:14px;
  }


  .explore-hero + .section{
    padding-top:32px !important;
    padding-bottom:32px !important;
  }


  .explore-hero + .section .center-head{
    margin-bottom:22px !important;
  }


  .explore-hero + .section .quick-card{
    min-height:auto !important;

    padding:22px !important;
  }


  .academic-path-section{
    padding:14px 0 !important;
  }


  .academic-path{
    padding:14px !important;
  }


  .path-item > span{
    width:32px !important;
    height:32px !important;
  }


  .path-item strong{
    font-size:12px !important;
  }


  .path-line{
    margin-left:6px !important;
    margin-right:6px !important;
  }


  .academic-path-section + .section{
    padding-top:28px !important;
  }

}

/* =====================================================
   EXPLORE PAGE - EXTRA COMPACT TOP AREA
===================================================== */


/* HERO */

.explore-hero{
  min-height:0 !important;
  height:auto !important;

  padding:26px 0 24px !important;
}


.explore-hero .shell{
  min-height:0 !important;
}


.explore-hero-content{
  max-width:1000px !important;
}


.explore-hero-content .section-kicker{
  font-size:12px !important;
}


.explore-hero-content h1{
  max-width:900px !important;

  margin:7px 0 10px !important;

  font-size:clamp(
    34px,
    3.3vw,
    50px
  ) !important;

  line-height:1.02 !important;
}


.explore-hero-content p{
  max-width:900px !important;

  margin:0 !important;

  font-size:14px !important;
  line-height:1.5 !important;
}



/* =====================================================
   CHOOSE CATEGORY SECTION
===================================================== */

.explore-hero + .section{
  padding:24px 0 30px !important;
}


.explore-hero + .section .center-head{
  margin:0 auto 18px !important;
}


.explore-hero + .section .center-head .section-kicker{
  font-size:11px !important;
}


.explore-hero + .section .center-head h2{
  margin:5px 0 4px !important;

  font-size:28px !important;
  line-height:1.15 !important;
}


.explore-hero + .section .center-head .section-note{
  max-width:600px;

  margin:0 auto !important;

  font-size:13px !important;
  line-height:1.45 !important;
}



/* =====================================================
   FOUR CATEGORY CARDS
===================================================== */

.explore-hero + .section .quick-grid{
  gap:14px !important;
}


.explore-hero + .section .quick-card{
  min-height:155px !important;

  padding:18px 20px !important;

  border-radius:18px !important;
}


.explore-hero + .section .quick-card > span{
  font-size:25px !important;
}


.explore-hero + .section .quick-card h3{
  margin:8px 0 5px !important;

  font-size:17px !important;
}


.explore-hero + .section .quick-card p{
  margin:0 0 10px !important;

  font-size:13px !important;
  line-height:1.45 !important;
}


.explore-hero + .section .quick-card b{
  font-size:12px !important;
}



/* =====================================================
   ACADEMIC PATH EVEN SMALLER
===================================================== */

.academic-path-section{
  padding:10px 0 !important;
}


.academic-path{
  min-height:0 !important;

  padding:10px 16px !important;
}


.path-item > span{
  width:30px !important;
  height:30px !important;

  font-size:11px !important;
}


.path-item small{
  font-size:8px !important;
}


.path-item strong{
  font-size:12px !important;
}



/* =====================================================
   MOBILE
===================================================== */

@media(max-width:600px){

  .explore-hero{
    padding:20px 0 18px !important;
  }


  .explore-hero-content h1{
    font-size:31px !important;

    line-height:1.05 !important;
  }


  .explore-hero-content p{
    font-size:13px !important;
  }


  .explore-hero + .section{
    padding:20px 0 24px !important;
  }


  .explore-hero + .section .center-head{
    margin-bottom:15px !important;
  }


  .explore-hero + .section .center-head h2{
    font-size:24px !important;
  }


  .explore-hero + .section .quick-card{
    min-height:auto !important;

    padding:16px !important;
  }

}

/* =====================================================
   ADMIN ROLE SELECT FIX
===================================================== */

#adminAccountRole{
  width:100% !important;
  min-height:54px !important;

  display:block !important;

  color:#172033 !important;
  background:#ffffff !important;

  font-size:14px !important;
  font-weight:500 !important;

  opacity:1 !important;
  visibility:visible !important;

  -webkit-appearance:auto !important;
  appearance:auto !important;

  position:relative !important;
  z-index:9999 !important;
}


#adminAccountRole option{
  display:block !important;

  min-height:35px !important;

  padding:8px 12px !important;

  color:#172033 !important;
  background:#ffffff !important;

  font-size:14px !important;

  opacity:1 !important;
  visibility:visible !important;
}


/* Native select popup safety */

#adminAccountRole:focus{
  border-color:#6366f1 !important;

  box-shadow:
    0 0 0 3px
    rgba(99,102,241,.12) !important;
}

/* =====================================================
   CURRENT ADMINISTRATOR CARD FIX
===================================================== */

.admin-account-card{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;

    padding:24px;
    margin-top:18px;

    border:1px solid #e7ebf3;
    border-radius:22px;
    background:#ffffff;

    flex-wrap:wrap;
}

.admin-account-left{
    display:flex;
    align-items:center;
    gap:18px;
    min-width:0;
    flex:1 1 320px;
}

.admin-account-avatar{
    width:72px;
    height:72px;
    border-radius:20px;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:30px;
    font-weight:800;
    color:#ffffff;

    background:linear-gradient(135deg, #3b82f6, #7c3aed);
    box-shadow:0 12px 28px rgba(99, 102, 241, 0.22);

    flex-shrink:0;
}

.admin-account-meta{
    min-width:0;
}

.admin-account-meta h4{
    margin:0 0 6px;
    font-size:28px;
    line-height:1.2;
    font-weight:800;
    color:#0f172a;
}

.admin-account-meta p{
    margin:0;
    font-size:16px;
    line-height:1.5;
    color:#64748b;

    word-break:break-word;
}

.admin-account-right{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    flex:0 0 auto;
}

.admin-role-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:10px 18px;
    border-radius:999px;

    background:#eef2ff;
    color:#4f46e5;

    border:1px solid #c7d2fe;

    font-size:13px;
    font-weight:800;
    line-height:1;
    letter-spacing:0.08em;
    text-transform:uppercase;

    white-space:nowrap;
}

/* Mobile */
@media (max-width: 768px){

    .admin-account-card{
        align-items:flex-start;
        padding:18px;
        gap:16px;
    }

    .admin-account-left{
        width:100%;
    }

    .admin-account-avatar{
        width:60px;
        height:60px;
        font-size:24px;
        border-radius:16px;
    }

    .admin-account-meta h4{
        font-size:22px;
    }

    .admin-account-meta p{
        font-size:14px;
    }

    .admin-account-right{
        width:100%;
        justify-content:flex-start;
    }

    .admin-role-badge{
        font-size:12px;
        padding:9px 14px;
    }
}

/* =====================================================
   HOME QUICK ACCESS ACCESS-BADGE SIZE FIX
===================================================== */

.quick-card .gsz-home-quick-access-badge{
    position:absolute !important;

    top:14px !important;
    right:14px !important;

    width:auto !important;
    height:auto !important;
    min-width:0 !important;
    min-height:24px !important;

    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    padding:5px 9px !important;

    border-radius:999px !important;

    font-size:9px !important;
    line-height:1 !important;
    font-weight:800 !important;
    letter-spacing:0 !important;

    white-space:nowrap !important;

    transform:none !important;
}


/* FREE */

.quick-card .gsz-home-quick-access-badge.free{
    background:#f0fdf4 !important;
    color:#15803d !important;
    border:1px solid #bbf7d0 !important;
}


/* LOGIN REQUIRED */

.quick-card .gsz-home-quick-access-badge.login{
    background:#eff6ff !important;
    color:#1d4ed8 !important;
    border:1px solid #bfdbfe !important;
}


/* PREMIUM */

.quick-card .gsz-home-quick-access-badge.premium{
    background:#fff7ed !important;
    color:#c2410c !important;
    border:1px solid #fed7aa !important;
}


/* =====================================================
   KEEP ONLY MAIN ICON LARGE
===================================================== */

.quick-card .gsz-home-quick-icon{
    width:auto !important;
    height:auto !important;

    font-size:25px !important;
    line-height:1 !important;

    transform:none !important;
}


/* MOBILE */

@media(max-width:640px){

    .quick-card .gsz-home-quick-access-badge{
        top:11px !important;
        right:11px !important;

        min-height:22px !important;

        padding:4px 7px !important;

        font-size:8px !important;
    }

}

/* =====================================================
   GSZ PREMIUM COMPACT FOOTER - FINAL OVERRIDE
===================================================== */

.gsz-common-footer{
  position:relative !important;
  overflow:hidden !important;

  background:
    radial-gradient(
      circle at 10% 0%,
      rgba(99,102,241,.13),
      transparent 32%
    ),
    radial-gradient(
      circle at 90% 20%,
      rgba(124,58,237,.08),
      transparent 28%
    ),
    #111827 !important;

  color:#cbd5e1 !important;
}


/* =====================================================
   MAIN AREA
===================================================== */

.gsz-common-footer .gsz-footer-main{
  width:min(1180px, calc(100% - 48px)) !important;

  margin:0 auto !important;

  display:grid !important;

  grid-template-columns:
    1.35fr
    .75fr
    .9fr !important;

  align-items:start !important;

  gap:55px !important;

  padding:
    42px 0
    32px !important;
}


/* =====================================================
   BRAND
===================================================== */

.gsz-common-footer .gsz-footer-brand{
  max-width:430px !important;
}


.gsz-common-footer .gsz-footer-brand-title{
  display:flex !important;
  align-items:center !important;

  gap:12px !important;

  margin-bottom:14px !important;
}


.gsz-common-footer .gsz-footer-brand-mark{
  width:44px !important;
  height:44px !important;

  flex:0 0 44px !important;

  display:grid !important;
  place-items:center !important;

  border-radius:13px !important;

  background:
    linear-gradient(
      135deg,
      #6366f1,
      #7c3aed
    ) !important;

  color:#fff !important;

  font-size:17px !important;
  font-weight:900 !important;

  box-shadow:
    0 10px 30px
    rgba(99,102,241,.28) !important;
}


.gsz-common-footer .gsz-footer-brand-title strong{
  color:#fff !important;

  font-size:17px !important;
  font-weight:850 !important;
}


.gsz-common-footer .gsz-footer-brand-title small{
  margin-top:3px !important;

  color:#94a3b8 !important;

  font-size:11px !important;
}


.gsz-common-footer .gsz-footer-description{
  max-width:400px !important;

  margin:0 !important;

  color:#94a3b8 !important;

  font-size:12px !important;

  line-height:1.7 !important;
}


/* =====================================================
   COLUMN TITLE
===================================================== */

.gsz-common-footer .gsz-footer-column h3{
  position:relative !important;

  margin:
    3px 0
    17px !important;

  padding-bottom:9px !important;

  color:#fff !important;

  font-size:13px !important;
  font-weight:850 !important;
}


.gsz-common-footer .gsz-footer-column h3::after{
  content:"" !important;

  position:absolute !important;

  left:0 !important;
  bottom:0 !important;

  width:30px !important;
  height:2px !important;

  border-radius:999px !important;

  background:
    linear-gradient(
      90deg,
      #6366f1,
      #8b5cf6
    ) !important;
}


/* =====================================================
   QUICK LINKS
===================================================== */

.gsz-common-footer .gsz-footer-links{
  display:grid !important;

  gap:10px !important;
}


.gsz-common-footer .gsz-footer-links a{
  position:relative !important;

  width:max-content !important;

  color:#94a3b8 !important;

  font-size:11px !important;
  font-weight:650 !important;

  text-decoration:none !important;

  transition:
    color .18s ease,
    transform .18s ease !important;
}


.gsz-common-footer .gsz-footer-links a::before{
  content:"›" !important;

  margin-right:6px !important;

  color:#6366f1 !important;

  font-weight:900 !important;
}


.gsz-common-footer .gsz-footer-links a:hover{
  color:#fff !important;

  transform:
    translateX(4px) !important;
}


/* =====================================================
   STUDENT SUPPORT
===================================================== */

.gsz-common-footer .gsz-footer-support-list{
  display:flex !important;

  flex-direction:column !important;

  align-items:flex-start !important;

  gap:9px !important;
}


.gsz-common-footer .gsz-footer-support-item{
  width:100% !important;
  max-width:310px !important;

  min-height:39px !important;

  display:flex !important;
  align-items:center !important;

  gap:9px !important;

  padding:
    7px 10px !important;

  border:
    1px solid rgba(148,163,184,.12) !important;

  border-radius:11px !important;

  background:
    rgba(255,255,255,.035) !important;

  color:#aebbd0 !important;

  font-size:10px !important;
  font-weight:650 !important;

  text-decoration:none !important;

  transition:
    background .18s ease,
    border-color .18s ease,
    transform .18s ease !important;
}


.gsz-common-footer .gsz-footer-support-item:hover{
  background:
    rgba(99,102,241,.10) !important;

  border-color:
    rgba(99,102,241,.28) !important;

  color:#fff !important;

  transform:
    translateY(-2px) !important;
}


.gsz-common-footer .gsz-footer-support-icon{
  width:28px !important;
  height:28px !important;

  flex:0 0 28px !important;

  display:grid !important;
  place-items:center !important;

  border-radius:8px !important;

  background:
    rgba(99,102,241,.13) !important;

  color:#c7d2fe !important;

  font-size:11px !important;
}


/* =====================================================
   BOTTOM BAR
===================================================== */

.gsz-common-footer .gsz-footer-bottom{
  width:min(1180px, calc(100% - 48px)) !important;

  margin:0 auto !important;

  min-height:54px !important;

  padding:
    15px 0 !important;

  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;

  gap:20px !important;

  border-top:
    1px solid rgba(148,163,184,.12) !important;

  color:#64748b !important;

  font-size:9px !important;
}


.gsz-common-footer .gsz-footer-bottom-links{
  display:flex !important;

  align-items:center !important;

  gap:18px !important;
}


.gsz-common-footer .gsz-footer-bottom-links a{
  color:#64748b !important;

  font-size:9px !important;

  text-decoration:none !important;

  transition:
    color .18s ease !important;
}


.gsz-common-footer .gsz-footer-bottom-links a:hover{
  color:#cbd5e1 !important;
}


/* =====================================================
   TABLET
===================================================== */

@media(max-width:900px){

  .gsz-common-footer .gsz-footer-main{
    grid-template-columns:
      1fr 1fr !important;

    gap:
      30px 40px !important;

    padding:
      36px 0
      28px !important;
  }


  .gsz-common-footer .gsz-footer-brand{
    grid-column:
      1 / -1 !important;

    max-width:600px !important;
  }

}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:600px){

  .gsz-common-footer .gsz-footer-main{
    width:
      calc(100% - 32px) !important;

    grid-template-columns:
      1fr !important;

    gap:27px !important;

    padding:
      32px 0
      25px !important;
  }


  .gsz-common-footer .gsz-footer-brand{
    grid-column:auto !important;
  }


  .gsz-common-footer .gsz-footer-description{
    font-size:11px !important;
  }


  .gsz-common-footer .gsz-footer-support-item{
    max-width:100% !important;
  }


  .gsz-common-footer .gsz-footer-bottom{
    width:
      calc(100% - 32px) !important;

    align-items:flex-start !important;
    flex-direction:column !important;

    gap:9px !important;

    padding:
      15px 0
      18px !important;
  }

}

/* =====================================================
   EXPLORE HERO TITLE — FINAL RESPONSIVE FIT FIX
===================================================== */

.explore-hero-content{
  width:100%;
  max-width:980px;
}


.explore-hero h1{
  max-width:980px;

  font-size:
    clamp(36px,4.5vw,54px);

  line-height:1.08;

  letter-spacing:-1.4px;

  text-wrap:balance;
}


/*
   Keep the highlighted second line together
   on desktop / larger tablet screens.
*/

.explore-hero h1 span{
  display:block;

  width:max-content;
  max-width:100%;

  white-space:nowrap;
}


/* =====================================================
   TABLET
===================================================== */

@media(max-width:850px){

  .explore-hero-content{
    max-width:760px;
  }

  .explore-hero h1{
    max-width:760px;

    font-size:
      clamp(35px,6vw,48px);

    letter-spacing:-1.2px;
  }

}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:650px){

  .explore-hero-content{
    max-width:100%;

    margin-inline:auto;

    text-align:center;
  }


  .explore-hero h1{
    max-width:560px;

    margin-left:auto;
    margin-right:auto;

    font-size:
      clamp(31px,9vw,38px);

    line-height:1.1;

    letter-spacing:-1px;
  }


  .explore-hero h1 span{
    width:auto;

    white-space:normal;

    text-wrap:balance;
  }


  .explore-hero p{
    max-width:560px;

    margin-left:auto;
    margin-right:auto;
  }

}


/* =====================================================
   EXTRA SMALL MOBILE
===================================================== */

@media(max-width:390px){

  .explore-hero h1{
    font-size:
      clamp(28px,8.7vw,34px);

    line-height:1.12;

    letter-spacing:-.7px;
  }

}

/* =====================================================
   EXPLORE HERO — FINAL FORCE FIX
   KEEP THIS AT THE VERY END OF style.css
===================================================== */

body .explore-hero .shell .explore-hero-content{
  width:100% !important;
  max-width:1100px !important;
}


/* MAIN TITLE */

body .explore-hero .shell .explore-hero-content h1{
  width:100% !important;
  max-width:1000px !important;

  margin:8px 0 12px !important;

  font-size:clamp(36px,4vw,50px) !important;
  line-height:1.08 !important;

  letter-spacing:-1.4px !important;

  white-space:normal !important;
}


/* SECOND GRADIENT LINE
   "learn, prepare and grow."
*/

body .explore-hero .shell .explore-hero-content h1 > span{
  display:block !important;

  width:fit-content !important;
  max-width:100% !important;

  margin-top:2px !important;

  /*
     Slightly smaller than the first line
     so "prepare and grow" fits naturally.
  */

  font-size:clamp(30px,3.55vw,44px) !important;
  line-height:1.12 !important;

  letter-spacing:-1px !important;

  white-space:nowrap !important;

  color:transparent !important;

  background:
    linear-gradient(
      90deg,
      #2563eb,
      #7c3aed,
      #db2777
    ) !important;

  -webkit-background-clip:text !important;
  background-clip:text !important;
}


/* DESCRIPTION */

body .explore-hero .shell .explore-hero-content > p{
  max-width:780px !important;
}


/* =====================================================
   TABLET
===================================================== */

@media(max-width:800px){

  body .explore-hero
  .shell
  .explore-hero-content h1{

    font-size:40px !important;

  }


  body .explore-hero
  .shell
  .explore-hero-content h1 > span{

    font-size:34px !important;

  }

}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:650px){

  body .explore-hero
  .shell
  .explore-hero-content{

    text-align:center !important;

  }


  body .explore-hero
  .shell
  .explore-hero-content h1{

    max-width:100% !important;

    margin:
      7px auto 12px !important;

    font-size:
      clamp(
        29px,
        8.3vw,
        35px
      ) !important;

    line-height:1.1 !important;

    letter-spacing:-.8px !important;

  }


  body .explore-hero
  .shell
  .explore-hero-content h1 > span{

    width:100% !important;

    margin:
      3px auto 0 !important;

    font-size:
      clamp(
        21px,
        6.3vw,
        27px
      ) !important;

    line-height:1.15 !important;

    letter-spacing:-.4px !important;

    text-align:center !important;

    white-space:nowrap !important;

  }


  body .explore-hero
  .shell
  .explore-hero-content > p{

    max-width:520px !important;

    margin:
      0 auto !important;

  }

}


/* =====================================================
   VERY SMALL MOBILE
===================================================== */

@media(max-width:360px){

  body .explore-hero
  .shell
  .explore-hero-content h1{

    font-size:28px !important;

  }


  body .explore-hero
  .shell
  .explore-hero-content h1 > span{

    font-size:20px !important;

    letter-spacing:-.55px !important;

  }

}

/* =====================================================
   GSZ PROTECTED VIEWER — FULLSCREEN FIX
===================================================== */

#protectedViewerRoot:fullscreen{
  width:100vw !important;
  height:100vh !important;

  max-width:none !important;
  max-height:none !important;

  margin:0 !important;
  padding:0 !important;

  border:0 !important;
  border-radius:0 !important;

  display:flex !important;
  flex-direction:column !important;

  overflow:hidden !important;

  background:#111827 !important;
}


/* Toolbar stays at top */

#protectedViewerRoot:fullscreen .main-viewer-toolbar{
  flex:0 0 auto !important;

  width:100% !important;
}


/* Actual content fills remaining screen */

#protectedViewerRoot:fullscreen #mainResourceViewer{
  flex:1 1 auto !important;

  width:100% !important;
  height:auto !important;

  min-height:0 !important;
  max-height:none !important;

  margin:0 !important;
  padding:0 !important;

  overflow:hidden !important;
}


/* PDF / Drive / YouTube iframe */

#protectedViewerRoot:fullscreen #mainResourceViewer iframe,
#protectedViewerRoot:fullscreen #mainResourceViewer embed,
#protectedViewerRoot:fullscreen #mainResourceViewer object{
  display:block !important;

  width:100% !important;
  height:100% !important;

  min-width:100% !important;
  min-height:100% !important;

  max-width:none !important;
  max-height:none !important;

  margin:0 !important;

  border:0 !important;
}


/* Video */

#protectedViewerRoot:fullscreen #mainResourceViewer video{
  display:block !important;

  width:100% !important;
  height:100% !important;

  max-width:none !important;
  max-height:none !important;

  object-fit:contain;
}


/* Images */

#protectedViewerRoot:fullscreen #mainResourceViewer img{
  max-width:100% !important;
  max-height:100% !important;

  object-fit:contain;
}


/* Watermark must cover whole fullscreen viewer */

#protectedViewerRoot:fullscreen #viewerWatermark{
  position:absolute !important;

  inset:0 !important;

  width:100% !important;
  height:100% !important;

  z-index:30 !important;
}


/* Access lock must also cover full screen */

#protectedViewerRoot:fullscreen #viewerProtectionShield{
  position:absolute !important;

  inset:0 !important;

  width:100% !important;
  height:100% !important;
}


/* =====================================================
   WEBKIT FULLSCREEN
===================================================== */

#protectedViewerRoot:-webkit-full-screen{
  width:100vw !important;
  height:100vh !important;

  max-width:none !important;
  max-height:none !important;

  margin:0 !important;
  padding:0 !important;

  border-radius:0 !important;

  display:flex !important;
  flex-direction:column !important;

  overflow:hidden !important;

  background:#111827 !important;
}


#protectedViewerRoot:-webkit-full-screen #mainResourceViewer{
  flex:1 1 auto !important;

  width:100% !important;
  height:auto !important;

  min-height:0 !important;
}


#protectedViewerRoot:-webkit-full-screen #mainResourceViewer iframe,
#protectedViewerRoot:-webkit-full-screen #mainResourceViewer embed,
#protectedViewerRoot:-webkit-full-screen #mainResourceViewer object,
#protectedViewerRoot:-webkit-full-screen #mainResourceViewer video{
  width:100% !important;
  height:100% !important;

  max-width:none !important;
  max-height:none !important;
}

/* =====================================================
   GOOGLE DRIVE NATIVE CONTROL PROTECTION
===================================================== */

.gsz-drive-viewer-wrap{
  position:relative;

  width:100%;
  height:100%;

  min-height:650px;

  overflow:hidden;

  background:#202124;
}


.gsz-drive-viewer-wrap iframe{
  display:block;

  width:100%;
  height:100%;

  min-height:650px;

  border:0;
}


/* =====================================================
   DRIVE NATIVE POP-OUT MASK

   Covers Google's own top-right pop-out button
   when Admin Pop-out = OFF
===================================================== */

.gsz-drive-popout-mask{
  position:absolute;

  top:0;
  right:0;

  width:72px;
  height:58px;

  z-index:25;

  background:#202124;

  pointer-events:auto;

  cursor:default;
}


/* =====================================================
   DRIVE SECONDARY CONTROL MASK

   Helps cover native Drive controls when
   download / print permissions are disabled.
===================================================== */

.gsz-drive-secondary-mask{
  position:absolute;

  top:0;
  right:72px;

  width:78px;
  height:58px;

  z-index:24;

  background:#202124;

  pointer-events:auto;

  cursor:default;
}


/* =====================================================
   FULLSCREEN
===================================================== */

#protectedViewerRoot:fullscreen
.gsz-drive-viewer-wrap,
#protectedViewerRoot:-webkit-full-screen
.gsz-drive-viewer-wrap{
  width:100% !important;
  height:100% !important;

  min-height:0 !important;
}


#protectedViewerRoot:fullscreen
.gsz-drive-viewer-wrap iframe,
#protectedViewerRoot:-webkit-full-screen
.gsz-drive-viewer-wrap iframe{
  width:100% !important;
  height:100% !important;

  min-height:0 !important;
}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:650px){

  .gsz-drive-popout-mask{
    width:58px;
    height:52px;
  }


  .gsz-drive-secondary-mask{
    right:58px;

    width:68px;
    height:52px;
  }

}

/* =========================================================
   GSZ ADMIN — SHARED RESOURCE PROTECTION UI
   Used by:
   - Study Resources
   - General Content
   - Career
   - Exams
   - Courses / Lessons
========================================================= */


/* =========================================================
   PROTECTION NOTICE
========================================================= */

.admin-resource-protection-notice{
  display:flex;
  align-items:flex-start;
  gap:14px;

  width:100%;

  padding:16px 18px;
  margin-bottom:18px;

  border:1px solid #c7d2fe;
  border-radius:16px;

  background:
    linear-gradient(
      135deg,
      #eef2ff 0%,
      #f8faff 100%
    );

  box-shadow:
    0 6px 20px rgba(79,70,229,.06);
}


.admin-resource-protection-notice > span{
  flex:0 0 42px;

  width:42px;
  height:42px;

  display:grid;
  place-items:center;

  border-radius:12px;

  background:#ffffff;

  font-size:20px;

  box-shadow:
    0 4px 12px rgba(79,70,229,.10);
}


.admin-resource-protection-notice > div{
  min-width:0;
}


.admin-resource-protection-notice strong{
  display:block;

  margin-bottom:5px;

  color:#1e293b;

  font-size:15px;
  font-weight:800;
  line-height:1.35;
}


.admin-resource-protection-notice p{
  margin:0;

  color:#64748b;

  font-size:13px;
  line-height:1.65;
}


/* =========================================================
   PROTECTION GRID
========================================================= */

.admin-resource-protection-grid{
  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:12px;

  width:100%;
}


/* =========================================================
   PROTECTION OPTION CARD
========================================================= */

.admin-resource-protection-option{
  position:relative;

  display:grid;

  grid-template-columns:
    22px 42px minmax(0,1fr);

  align-items:center;

  gap:12px;

  min-width:0;
  min-height:92px;

  padding:14px 15px;

  border:
    1px solid #e2e8f0;

  border-radius:15px;

  background:#ffffff;

  cursor:pointer;

  transition:
    border-color .2s ease,
    box-shadow .2s ease,
    transform .2s ease,
    background .2s ease;
}


.admin-resource-protection-option:hover{
  border-color:#c7d2fe;

  background:#fafaff;

  box-shadow:
    0 7px 20px rgba(15,23,42,.06);

  transform:
    translateY(-1px);
}


/* =========================================================
   CUSTOM CHECKBOX
========================================================= */

.admin-resource-protection-option > input[type="checkbox"]{
  appearance:none;
  -webkit-appearance:none;

  width:20px;
  height:20px;

  margin:0;

  border:
    2px solid #cbd5e1;

  border-radius:6px;

  background:#ffffff;

  cursor:pointer;

  display:grid;
  place-items:center;

  transition:
    background .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}


.admin-resource-protection-option > input[type="checkbox"]::before{
  content:"";

  width:9px;
  height:5px;

  border-left:
    2px solid #ffffff;

  border-bottom:
    2px solid #ffffff;

  transform:
    rotate(-45deg)
    scale(0);

  transition:
    transform .14s ease;
}


.admin-resource-protection-option > input[type="checkbox"]:checked{
  border-color:#5b5cf0;

  background:
    linear-gradient(
      135deg,
      #4f63f5,
      #7447ef
    );

  box-shadow:
    0 0 0 3px rgba(99,102,241,.10);
}


.admin-resource-protection-option > input[type="checkbox"]:checked::before{
  transform:
    rotate(-45deg)
    scale(1);
}


.admin-resource-protection-option > input[type="checkbox"]:focus-visible{
  outline:none;

  box-shadow:
    0 0 0 4px rgba(99,102,241,.16);
}


/* =========================================================
   CHECKED CARD
========================================================= */

.admin-resource-protection-option:has(
  > input[type="checkbox"]:checked
){
  border-color:#a5b4fc;

  background:
    linear-gradient(
      135deg,
      #f5f7ff,
      #ffffff
    );

  box-shadow:
    0 7px 20px rgba(99,102,241,.07);
}


/* =========================================================
   ICON
========================================================= */

.admin-resource-protection-icon{
  width:42px;
  height:42px;

  display:grid;
  place-items:center;

  flex:0 0 42px;

  border-radius:12px;

  background:#f1f5f9;

  font-size:18px;

  transition:
    background .2s ease,
    transform .2s ease;
}


.admin-resource-protection-option:has(
  > input[type="checkbox"]:checked
)
.admin-resource-protection-icon{
  background:#eef2ff;

  transform:
    scale(1.03);
}


/* =========================================================
   COPY
========================================================= */

.admin-resource-protection-copy{
  display:block;

  min-width:0;
}


.admin-resource-protection-copy strong{
  display:block;

  margin:0 0 4px;

  color:#172033;

  font-size:13px;
  font-weight:800;

  line-height:1.35;
}


.admin-resource-protection-copy small{
  display:block;

  margin:0;

  color:#64748b;

  font-size:11.5px;
  font-weight:500;

  line-height:1.55;
}


/* =========================================================
   DISABLED OPTIONS
========================================================= */

.admin-resource-protection-option:has(
  > input[type="checkbox"]:disabled
){
  cursor:not-allowed;

  opacity:.56;

  background:#f8fafc;

  box-shadow:none;

  transform:none;
}


.admin-resource-protection-option > input[type="checkbox"]:disabled{
  cursor:not-allowed;
}


/* =========================================================
   PROTECTION SUMMARY
========================================================= */

.admin-resource-protection-summary{
  display:flex;
  align-items:flex-start;

  gap:12px;

  width:100%;

  margin-top:16px;
  padding:14px 16px;

  border-radius:14px;

  border:
    1px solid #e2e8f0;

  background:#f8fafc;
}


.admin-resource-protection-summary > span{
  flex:0 0 34px;

  width:34px;
  height:34px;

  display:grid;
  place-items:center;

  border-radius:10px;

  background:#ffffff;

  font-size:17px;
}


.admin-resource-protection-summary > div{
  min-width:0;
}


.admin-resource-protection-summary strong{
  display:block;

  margin-bottom:3px;

  color:#172033;

  font-size:13px;
  font-weight:800;

  line-height:1.35;
}


.admin-resource-protection-summary small{
  display:block;

  color:#64748b;

  font-size:11.5px;

  line-height:1.55;
}


/* SAFE */

.admin-resource-protection-summary.safe{
  border-color:#bbf7d0;

  background:#f0fdf4;
}


.admin-resource-protection-summary.safe > span{
  background:#dcfce7;
}


/* WARNING */

.admin-resource-protection-summary.warning{
  border-color:#fde68a;

  background:#fffbeb;
}


.admin-resource-protection-summary.warning > span{
  background:#fef3c7;
}


/* CUSTOM / INFO */

.admin-resource-protection-summary.custom{
  border-color:#c7d2fe;

  background:#eef2ff;
}


.admin-resource-protection-summary.custom > span{
  background:#ffffff;
}


/* =========================================================
   PROTECTION NOT APPLICABLE
========================================================= */

.protection-not-applicable
.admin-resource-protection-grid{
  opacity:.75;
}


/* =========================================================
   GENERAL PAGE
========================================================= */

#generalResourceProtectionSection{
  overflow:hidden;
}


#generalResourceProtectionSection
.admin-resource-protection-grid{
  margin-top:2px;
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:900px){

  .admin-resource-protection-grid{
    grid-template-columns:1fr;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:600px){

  .admin-resource-protection-notice{
    padding:14px;

    gap:11px;
  }


  .admin-resource-protection-notice > span{
    width:38px;
    height:38px;

    flex-basis:38px;
  }


  .admin-resource-protection-option{
    grid-template-columns:
      20px 38px minmax(0,1fr);

    gap:10px;

    min-height:86px;

    padding:12px;
  }


  .admin-resource-protection-icon{
    width:38px;
    height:38px;

    font-size:16px;
  }


  .admin-resource-protection-copy strong{
    font-size:12.5px;
  }


  .admin-resource-protection-copy small{
    font-size:11px;
  }


  .admin-resource-protection-summary{
    padding:13px;
  }

}

/* =========================================================
   GOURAV STUDY ZONE 2.0
   FINAL GLOBAL ADMIN ACTION BUTTON FIX

   Paste this block at the VERY BOTTOM of style.css

   Covers:
   Edit
   View
   Content
   Publish / Unpublish
   Activate / Block
   Recording Status
   Reset Password
   Grant Premium
   Revoke Premium
   Delete
========================================================= */


/* =========================================================
   1. ACTION CONTAINERS
========================================================= */

.admin-dashboard-page
:is(
  .admin-table-actions,
  .admin-resource-actions,
  .quick-access-actions,
  .admin-management-actions,
  .premium-actions
){
  display:flex !important;

  align-items:center !important;
  justify-content:flex-start !important;

  flex-direction:row !important;
  flex-wrap:wrap !important;

  gap:7px !important;

  width:auto !important;
  min-width:0 !important;

  white-space:normal !important;
}


/* =========================================================
   2. ALL TABLE ACTION BUTTONS
========================================================= */

.admin-dashboard-page
:is(
  .admin-table-actions,
  .admin-resource-actions,
  .quick-access-actions,
  .admin-management-actions,
  .premium-actions
)
button{

  appearance:none !important;
  -webkit-appearance:none !important;

  display:inline-flex !important;

  align-items:center !important;
  justify-content:center !important;

  width:auto !important;

  min-width:72px !important;
  min-height:36px !important;

  margin:0 !important;

  padding:8px 12px !important;

  border:1px solid #dbe3ef !important;
  border-radius:10px !important;

  background:#ffffff !important;

  color:#334155 !important;

  font-family:inherit !important;

  font-size:11px !important;
  line-height:1 !important;

  font-weight:800 !important;

  letter-spacing:0 !important;
  text-transform:none !important;

  white-space:nowrap !important;

  cursor:pointer !important;

  box-shadow:none !important;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    color .18s ease,
    background .18s ease,
    border-color .18s ease !important;
}


/* =========================================================
   3. DEFAULT HOVER
========================================================= */

.admin-dashboard-page
:is(
  .admin-table-actions,
  .admin-resource-actions,
  .quick-access-actions,
  .admin-management-actions,
  .premium-actions
)
button:hover{

  border-color:#c7d2fe !important;

  background:#f8faff !important;

  color:#4338ca !important;

  transform:translateY(-1px) !important;

  box-shadow:
    0 6px 16px
    rgba(79,70,229,.10) !important;
}


/* =========================================================
   4. EDIT BUTTON
   Indigo / Purple
========================================================= */

.admin-dashboard-page
:is(
  button[data-resource-action="edit"],
  button[data-course-action="edit"],
  button[data-lesson-action="edit"],
  button[data-live-action="edit"],
  button[data-exam-action="edit"],
  button[data-academic-action="edit"],
  button[data-quick-action="edit"],
  button[data-student-action="edit"],
  button[data-admin-action="edit"],
  button[data-syllabus-action="edit"],
  button[data-pyq-action="edit"],
  button[data-note-action="edit"],
  button[data-suggestion-action="edit"],
  button[data-notification-action="edit"],
  button[data-date-action="edit"],
  button[data-pattern-action="edit"],
  button[data-link-action="edit"],
  button[data-r-action="edit"]
){

  background:#eef2ff !important;

  border-color:#c7d2fe !important;

  color:#4f46e5 !important;
}


.admin-dashboard-page
:is(
  button[data-resource-action="edit"],
  button[data-course-action="edit"],
  button[data-lesson-action="edit"],
  button[data-live-action="edit"],
  button[data-exam-action="edit"],
  button[data-academic-action="edit"],
  button[data-quick-action="edit"],
  button[data-student-action="edit"],
  button[data-admin-action="edit"],
  button[data-syllabus-action="edit"],
  button[data-pyq-action="edit"],
  button[data-note-action="edit"],
  button[data-suggestion-action="edit"],
  button[data-notification-action="edit"],
  button[data-date-action="edit"],
  button[data-pattern-action="edit"],
  button[data-link-action="edit"],
  button[data-r-action="edit"]
):hover{

  background:
    linear-gradient(
      135deg,
      #4f46e5,
      #7c3aed
    ) !important;

  border-color:#4f46e5 !important;

  color:#ffffff !important;

  box-shadow:
    0 7px 18px
    rgba(79,70,229,.20) !important;
}


/* =========================================================
   5. PUBLISH / UNPUBLISH / STATUS / TOGGLE
   Orange
========================================================= */

.admin-dashboard-page
:is(
  button[data-resource-action="toggle"],
  button[data-course-action="status"],
  button[data-lesson-action="status"],
  button[data-live-action="status"],
  button[data-exam-action="status"],
  button[data-academic-action="toggle"],
  button[data-quick-action="status"],
  button[data-r-action="toggle"]
){

  background:#fff7ed !important;

  border-color:#fed7aa !important;

  color:#c2410c !important;
}


.admin-dashboard-page
:is(
  button[data-resource-action="toggle"],
  button[data-course-action="status"],
  button[data-lesson-action="status"],
  button[data-live-action="status"],
  button[data-exam-action="status"],
  button[data-academic-action="toggle"],
  button[data-quick-action="status"],
  button[data-r-action="toggle"]
):hover{

  background:
    linear-gradient(
      135deg,
      #f97316,
      #ea580c
    ) !important;

  border-color:#f97316 !important;

  color:#ffffff !important;

  box-shadow:
    0 7px 18px
    rgba(249,115,22,.20) !important;
}


/* =========================================================
   6. RECORDING STATUS
   Purple
========================================================= */

.admin-dashboard-page
button[data-live-action="recording-status"]{

  background:#f5f3ff !important;

  border-color:#ddd6fe !important;

  color:#7c3aed !important;
}


.admin-dashboard-page
button[data-live-action="recording-status"]:hover{

  background:
    linear-gradient(
      135deg,
      #7c3aed,
      #6d28d9
    ) !important;

  border-color:#7c3aed !important;

  color:#ffffff !important;

  box-shadow:
    0 7px 18px
    rgba(124,58,237,.20) !important;
}


/* =========================================================
   7. VIEW / DETAILS
   Blue
========================================================= */

.admin-dashboard-page
:is(
  button[data-student-action="view"],
  button[data-admin-action="view"],
  button[data-exam-action="view"]
){

  background:#eff6ff !important;

  border-color:#bfdbfe !important;

  color:#2563eb !important;
}


.admin-dashboard-page
:is(
  button[data-student-action="view"],
  button[data-admin-action="view"],
  button[data-exam-action="view"]
):hover{

  background:
    linear-gradient(
      135deg,
      #3b82f6,
      #2563eb
    ) !important;

  border-color:#3b82f6 !important;

  color:#ffffff !important;

  box-shadow:
    0 7px 18px
    rgba(37,99,235,.20) !important;
}


/* =========================================================
   8. EXAM CONTENT / MANAGE CONTENT
   Violet
========================================================= */

.admin-dashboard-page
:is(
  button[data-exam-action="content"],
  button[data-course-action="content"],
  button[data-lesson-action="content"]
){

  background:#faf5ff !important;

  border-color:#e9d5ff !important;

  color:#9333ea !important;
}


.admin-dashboard-page
:is(
  button[data-exam-action="content"],
  button[data-course-action="content"],
  button[data-lesson-action="content"]
):hover{

  background:
    linear-gradient(
      135deg,
      #a855f7,
      #7e22ce
    ) !important;

  border-color:#a855f7 !important;

  color:#ffffff !important;

  box-shadow:
    0 7px 18px
    rgba(147,51,234,.20) !important;
}


/* =========================================================
   9. RESET PASSWORD
   Amber
========================================================= */

.admin-dashboard-page
:is(
  button[data-student-action="password"],
  button[data-admin-action="password"],
  button[data-admin-action="reset-password"]
){

  min-width:110px !important;

  background:#fffbeb !important;

  border-color:#fde68a !important;

  color:#a16207 !important;
}


.admin-dashboard-page
:is(
  button[data-student-action="password"],
  button[data-admin-action="password"],
  button[data-admin-action="reset-password"]
):hover{

  background:
    linear-gradient(
      135deg,
      #f59e0b,
      #d97706
    ) !important;

  border-color:#f59e0b !important;

  color:#ffffff !important;

  box-shadow:
    0 7px 18px
    rgba(245,158,11,.20) !important;
}


/* =========================================================
   10. BLOCK / ACTIVATE ACCOUNT
========================================================= */

.admin-dashboard-page
:is(
  button[data-student-action="status"],
  button[data-admin-action="status"]
){

  background:#f8fafc !important;

  border-color:#cbd5e1 !important;

  color:#475569 !important;
}


.admin-dashboard-page
:is(
  button[data-student-action="status"],
  button[data-admin-action="status"]
):hover{

  background:#334155 !important;

  border-color:#334155 !important;

  color:#ffffff !important;

  box-shadow:
    0 7px 18px
    rgba(51,65,85,.18) !important;
}


/* =========================================================
   11. GRANT PREMIUM
========================================================= */

.admin-dashboard-page
:is(
  .grant-premium-btn,
  button[data-premium-action="grant"]
){

  background:#fff7ed !important;

  border-color:#fed7aa !important;

  color:#c2410c !important;
}


.admin-dashboard-page
:is(
  .grant-premium-btn,
  button[data-premium-action="grant"]
):hover{

  background:
    linear-gradient(
      135deg,
      #f59e0b,
      #f97316
    ) !important;

  border-color:#f59e0b !important;

  color:#ffffff !important;

  box-shadow:
    0 7px 18px
    rgba(245,158,11,.20) !important;
}


/* =========================================================
   12. REVOKE PREMIUM
========================================================= */

.admin-dashboard-page
:is(
  .revoke-premium-btn,
  button[data-premium-action="revoke"]
){

  background:#fff1f2 !important;

  border-color:#fecdd3 !important;

  color:#be123c !important;
}


.admin-dashboard-page
:is(
  .revoke-premium-btn,
  button[data-premium-action="revoke"]
):hover{

  background:
    linear-gradient(
      135deg,
      #f43f5e,
      #be123c
    ) !important;

  border-color:#f43f5e !important;

  color:#ffffff !important;

  box-shadow:
    0 7px 18px
    rgba(244,63,94,.20) !important;
}


/* =========================================================
   13. DELETE / DANGER BUTTON
   Red
========================================================= */

.admin-dashboard-page
:is(
  .delete-resource-btn,
  .student-danger-btn,
  .admin-management-actions .danger,

  button[data-resource-action="delete"],
  button[data-course-action="delete"],
  button[data-lesson-action="delete"],
  button[data-live-action="delete"],
  button[data-exam-action="delete"],
  button[data-academic-action="delete"],
  button[data-quick-action="delete"],
  button[data-student-action="delete"],
  button[data-admin-action="delete"],
  button[data-syllabus-action="delete"],
  button[data-pyq-action="delete"],
  button[data-note-action="delete"],
  button[data-suggestion-action="delete"],
  button[data-notification-action="delete"],
  button[data-date-action="delete"],
  button[data-pattern-action="delete"],
  button[data-link-action="delete"],
  button[data-r-action="delete"]
){

  background:#fef2f2 !important;

  border-color:#fecaca !important;

  color:#dc2626 !important;
}


.admin-dashboard-page
:is(
  .delete-resource-btn,
  .student-danger-btn,
  .admin-management-actions .danger,

  button[data-resource-action="delete"],
  button[data-course-action="delete"],
  button[data-lesson-action="delete"],
  button[data-live-action="delete"],
  button[data-exam-action="delete"],
  button[data-academic-action="delete"],
  button[data-quick-action="delete"],
  button[data-student-action="delete"],
  button[data-admin-action="delete"],
  button[data-syllabus-action="delete"],
  button[data-pyq-action="delete"],
  button[data-note-action="delete"],
  button[data-suggestion-action="delete"],
  button[data-notification-action="delete"],
  button[data-date-action="delete"],
  button[data-pattern-action="delete"],
  button[data-link-action="delete"],
  button[data-r-action="delete"]
):hover{

  background:
    linear-gradient(
      135deg,
      #ef4444,
      #dc2626
    ) !important;

  border-color:#ef4444 !important;

  color:#ffffff !important;

  box-shadow:
    0 7px 18px
    rgba(239,68,68,.20) !important;
}


/* =========================================================
   14. CLICK EFFECT
========================================================= */

.admin-dashboard-page
:is(
  .admin-table-actions,
  .admin-resource-actions,
  .quick-access-actions,
  .admin-management-actions,
  .premium-actions
)
button:active{

  transform:
    translateY(0)
    scale(.96) !important;

  box-shadow:none !important;
}


/* =========================================================
   15. KEYBOARD FOCUS
========================================================= */

.admin-dashboard-page
:is(
  .admin-table-actions,
  .admin-resource-actions,
  .quick-access-actions,
  .admin-management-actions,
  .premium-actions
)
button:focus-visible{

  outline:
    3px solid
    rgba(79,70,229,.18) !important;

  outline-offset:2px !important;
}


/* =========================================================
   16. DISABLED BUTTON
========================================================= */

.admin-dashboard-page
:is(
  .admin-table-actions,
  .admin-resource-actions,
  .quick-access-actions,
  .admin-management-actions,
  .premium-actions
)
button:disabled{

  opacity:.52 !important;

  cursor:not-allowed !important;

  pointer-events:none !important;

  transform:none !important;

  box-shadow:none !important;
}


/* =========================================================
   17. ACTION TABLE CELL
========================================================= */

.admin-dashboard-page
.admin-data-table td:last-child{

  vertical-align:middle !important;
}


.admin-dashboard-page
.admin-data-table th:last-child{

  white-space:nowrap !important;
}


/* =========================================================
   18. KEEP TABLE SCROLLABLE
   Prevent buttons from crushing other columns
========================================================= */

.admin-dashboard-page
.admin-table-wrap{

  width:100% !important;

  overflow-x:auto !important;

  -webkit-overflow-scrolling:touch;
}


/* =========================================================
   19. RESET FILTER BUTTON
========================================================= */

.admin-dashboard-page
.resource-filter-reset{

  display:inline-flex !important;

  align-items:center !important;
  justify-content:center !important;

  min-height:40px !important;

  padding:8px 14px !important;

  border:
    1px solid #dbe3ef !important;

  border-radius:10px !important;

  background:#ffffff !important;

  color:#475569 !important;

  font-family:inherit !important;

  font-size:11px !important;
  font-weight:800 !important;

  white-space:nowrap !important;

  cursor:pointer !important;

  transition:
    .18s ease !important;
}


.admin-dashboard-page
.resource-filter-reset:hover{

  border-color:#c7d2fe !important;

  background:#eef2ff !important;

  color:#4f46e5 !important;

  box-shadow:
    0 5px 14px
    rgba(79,70,229,.10) !important;
}


/* =========================================================
   20. MOBILE / TABLET
========================================================= */

@media(max-width:900px){

  .admin-dashboard-page
  :is(
    .admin-table-actions,
    .admin-resource-actions,
    .quick-access-actions,
    .admin-management-actions,
    .premium-actions
  ){

    flex-wrap:wrap !important;

    gap:6px !important;
  }


  .admin-dashboard-page
  :is(
    .admin-table-actions,
    .admin-resource-actions,
    .quick-access-actions,
    .admin-management-actions,
    .premium-actions
  )
  button{

    min-width:68px !important;

    min-height:34px !important;

    padding:7px 10px !important;

    font-size:10px !important;
  }

}


/* =========================================================
   21. SMALL MOBILE
========================================================= */

@media(max-width:600px){

  .admin-dashboard-page
  :is(
    .admin-table-actions,
    .admin-resource-actions,
    .quick-access-actions,
    .admin-management-actions,
    .premium-actions
  ){

    min-width:210px !important;
  }


  .admin-dashboard-page
  :is(
    .admin-table-actions,
    .admin-resource-actions,
    .quick-access-actions,
    .admin-management-actions,
    .premium-actions
  )
  button{

    min-height:33px !important;

    padding:7px 9px !important;

    border-radius:8px !important;

    font-size:10px !important;
  }

}

/* =========================================================
   GSZ ADMIN ACTIONS - FORCE SINGLE ROW
   Paste at the VERY BOTTOM of style.css
========================================================= */

.admin-dashboard-page
.admin-table-actions,

.admin-dashboard-page
.admin-resource-actions,

.admin-dashboard-page
.quick-access-actions,

.admin-dashboard-page
.admin-management-actions,

.admin-dashboard-page
.premium-actions{

  display:flex !important;

  flex-direction:row !important;

  flex-wrap:nowrap !important;

  align-items:center !important;

  justify-content:flex-start !important;

  gap:7px !important;

  width:max-content !important;

  min-width:max-content !important;

  white-space:nowrap !important;

}


/* =========================================================
   BUTTONS SAME ROW + SAME HEIGHT
========================================================= */

.admin-dashboard-page
.admin-table-actions button,

.admin-dashboard-page
.admin-resource-actions button,

.admin-dashboard-page
.quick-access-actions button,

.admin-dashboard-page
.admin-management-actions button,

.admin-dashboard-page
.premium-actions button{

  flex:0 0 auto !important;

  width:auto !important;

  min-width:72px !important;

  min-height:36px !important;

  margin:0 !important;

  padding:8px 12px !important;

  white-space:nowrap !important;

}


/* =========================================================
   ACTION COLUMN MUST HAVE ENOUGH SPACE
========================================================= */

.admin-dashboard-page
.admin-data-table th:last-child,

.admin-dashboard-page
.admin-data-table td:last-child{

  min-width:260px !important;

  width:260px !important;

  white-space:nowrap !important;

}


/* =========================================================
   ACADEMIC TABLE SPECIFIC
========================================================= */

.admin-academic-page
.admin-table-actions{

  display:flex !important;

  flex-direction:row !important;

  flex-wrap:nowrap !important;

  align-items:center !important;

  gap:8px !important;

}


.admin-academic-page
.admin-table-actions
.admin-table-action-btn{

  display:inline-flex !important;

  align-items:center !important;

  justify-content:center !important;

  flex:0 0 auto !important;

  width:auto !important;

  min-width:82px !important;

  min-height:38px !important;

}


/* =========================================================
   KEEP TABLE HORIZONTAL SCROLL WHEN SCREEN IS SMALL
========================================================= */

.admin-dashboard-page
.admin-table-wrap{

  overflow-x:auto !important;

  overflow-y:visible !important;

  -webkit-overflow-scrolling:touch;

}


/* =========================================================
   TABLE ROW ALIGNMENT
========================================================= */

.admin-dashboard-page
.admin-data-table td{

  vertical-align:middle !important;

}


/* =========================================================
   MOBILE / TABLET
   Still keep actions in one row.
   The table itself will scroll horizontally.
========================================================= */

@media(max-width:900px){

  .admin-dashboard-page
  .admin-table-actions,

  .admin-dashboard-page
  .admin-resource-actions,

  .admin-dashboard-page
  .quick-access-actions,

  .admin-dashboard-page
  .admin-management-actions,

  .admin-dashboard-page
  .premium-actions{

    flex-direction:row !important;

    flex-wrap:nowrap !important;

    min-width:max-content !important;

  }


  .admin-dashboard-page
  .admin-data-table
  td:last-child{

    min-width:250px !important;

  }

}



/* =====================================================
   FINAL RELEASE — ADMIN NAVIGATION STABILITY
===================================================== */

.admin-sidebar-nav a{
  position:relative;
  will-change:background-color,color,transform;
}

.admin-sidebar-nav a.is-navigating{
  transform:translateX(1px) scale(.985);
  filter:brightness(1.08);
}

.admin-sidebar-nav a.active::after{
  content:"";
  position:absolute;
  right:9px;
  width:5px;
  height:5px;
  border-radius:50%;
  background:rgba(255,255,255,.92);
  box-shadow:0 0 0 4px rgba(255,255,255,.10);
  animation:gszAdminActivePulse .34s ease-out both;
}

@keyframes gszAdminActivePulse{
  from{transform:scale(.5);opacity:.35;}
  to{transform:scale(1);opacity:1;}
}

.admin-content{
  animation:gszAdminContentIn .18s ease-out both;
}

@keyframes gszAdminContentIn{
  from{opacity:.82;transform:translateY(3px);}
  to{opacity:1;transform:none;}
}

/* =====================================================
   FINAL RELEASE — COMPACT STUDENT LIST ONLY
   NOTE: This intentionally targets only the main student table.
   View/Edit modal and academic edit form are untouched.
===================================================== */

.admin-students-page .admin-data-table{
  min-width:1180px;
  table-layout:fixed;
}

.admin-students-page .admin-data-table th,
.admin-students-page .admin-data-table td{
  padding:8px 10px;
  vertical-align:middle;
}

.admin-students-page .admin-data-table th:nth-child(1){width:27%;}
.admin-students-page .admin-data-table th:nth-child(2){width:18%;}
.admin-students-page .admin-data-table th:nth-child(3){width:12%;}
.admin-students-page .admin-data-table th:nth-child(4){width:13%;}
.admin-students-page .admin-data-table th:nth-child(5){width:8%;}
.admin-students-page .admin-data-table th:nth-child(6){width:22%;}

.admin-students-page .admin-student-cell{
  align-items:center;
  gap:8px;
  min-width:0;
}

.admin-students-page .admin-student-avatar{
  width:34px;
  height:34px;
  flex:0 0 34px;
  border-radius:10px;
}

.admin-students-page .admin-student-cell > div{
  min-width:0;
}

.admin-students-page .admin-student-cell strong{
  display:block;
  font-size:12.5px;
  line-height:1.25;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.admin-students-page .admin-student-meta{
  display:block;
  margin-top:2px;
  max-width:100%;
  color:#64748b;
  font-size:10px;
  line-height:1.3;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.admin-students-page .student-academic-cell{
  min-width:0;
}

.admin-students-page .student-academic-one-line{
  display:block;
  max-width:100%;
  font-size:11.5px;
  line-height:1.35;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.admin-students-page .student-account-compact{
  display:flex;
  align-items:center;
  gap:5px;
  flex-wrap:nowrap;
  white-space:nowrap;
}

.admin-students-page .student-account-badge,
.admin-students-page .student-source-badge,
.admin-students-page .student-status-badge,
.admin-students-page .student-password-badge,
.admin-students-page .student-activation-badge{
  min-height:22px;
  padding:3px 6px;
  font-size:8.8px;
  line-height:1.1;
}

.admin-students-page .admin-table-actions{
  display:flex;
  align-items:center;
  flex-wrap:nowrap;
  gap:4px;
  white-space:nowrap;
}

.admin-students-page .admin-table-actions button{
  min-height:28px;
  padding:4px 6px;
  border-radius:7px;
  font-size:9px;
  white-space:nowrap;
}

.student-table-pagination{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  padding-top:14px;
}

.student-table-pagination[hidden]{display:none!important;}

.student-table-pagination span{
  min-width:92px;
  text-align:center;
  color:#64748b;
  font-size:11px;
  font-weight:800;
}

.student-table-pagination button{
  min-height:34px;
  padding:7px 11px;
  border:1px solid #dfe4ec;
  border-radius:9px;
  background:#fff;
  color:#334155;
  font:inherit;
  font-size:10.5px;
  font-weight:800;
  cursor:pointer;
}

.student-table-pagination button:hover:not(:disabled){
  border-color:#a5b4fc;
  color:#4f46e5;
  background:#f8faff;
}

.student-table-pagination button:disabled{
  opacity:.45;
  cursor:not-allowed;
}

body.dark .admin-students-page .admin-student-meta,
body.dark .student-table-pagination span{
  color:#94a3b8;
}

body.dark .student-table-pagination button{
  border-color:#334155;
  background:#111827;
  color:#cbd5e1;
}

@media(max-width:700px){
  .student-table-pagination{
    justify-content:space-between;
  }

  .student-table-pagination button{
    flex:1;
  }
}

/* =====================================================
   FINAL RELEASE — ADMIN-WIDE COMPACT LISTING UI
   Scope: list/table panels only. Forms, View/Edit modals,
   dashboard stat cards and editor content remain unchanged.
===================================================== */

/* Only panels that actually contain a data table become denser. */
.admin-dashboard-page .admin-dashboard-panel:has(.admin-table-wrap){
  padding:16px 16px 15px !important;
}

.admin-dashboard-page .admin-dashboard-panel:has(.admin-table-wrap) .admin-panel-heading{
  gap:10px !important;
  margin-bottom:10px !important;
}

.admin-dashboard-page .admin-dashboard-panel:has(.admin-table-wrap) .admin-panel-heading h2{
  margin-top:2px !important;
  font-size:18px !important;
  line-height:1.25 !important;
}

/* Shared compact table rhythm for Academic, Resources, Courses, Live,
   Quiz, Career, Exams, General, Quick Access, Admins, Notifications,
   Premium and Students. */
.admin-dashboard-page .admin-data-table th{
  padding:9px 10px !important;
  font-size:11px !important;
  line-height:1.2 !important;
}

.admin-dashboard-page .admin-data-table td{
  padding:8px 10px !important;
  font-size:12px !important;
  line-height:1.32 !important;
  vertical-align:middle !important;
}

.admin-dashboard-page .admin-data-table td strong{
  line-height:1.25 !important;
}

.admin-dashboard-page .admin-data-table td small{
  line-height:1.25 !important;
}

/* Keep status/access chips readable but stop them increasing row height. */
.admin-dashboard-page .admin-status-badge{
  min-height:22px !important;
  padding:3px 7px !important;
  font-size:10px !important;
  line-height:1.1 !important;
}

/* Actions stay on one line, with a smaller professional footprint. */
.admin-dashboard-page :is(
  .admin-table-actions,
  .admin-resource-actions,
  .quick-access-actions,
  .admin-management-actions,
  .premium-actions
){
  gap:5px !important;
  flex-wrap:nowrap !important;
  white-space:nowrap !important;
}

.admin-dashboard-page :is(
  .admin-table-actions,
  .admin-resource-actions,
  .quick-access-actions,
  .admin-management-actions,
  .premium-actions
) button{
  min-width:58px !important;
  min-height:30px !important;
  padding:5px 8px !important;
  border-radius:7px !important;
  font-size:9.5px !important;
  line-height:1.1 !important;
}

/* Password/reset labels need a little more width, but no extra height. */
.admin-dashboard-page :is(
  button[data-student-action="password"],
  button[data-admin-action="password"],
  button[data-admin-action="reset-password"]
){
  min-width:94px !important;
}

/* Let the table scroll horizontally instead of wrapping actions vertically. */
.admin-dashboard-page .admin-data-table th:last-child,
.admin-dashboard-page .admin-data-table td:last-child{
  min-width:220px !important;
  width:auto !important;
  white-space:nowrap !important;
}

.admin-dashboard-page .admin-table-wrap{
  overflow-x:auto !important;
  -webkit-overflow-scrolling:touch;
}

/* Empty state is compact too, without affecting real list rows. */
.admin-dashboard-page .admin-dashboard-panel:has(.admin-table-wrap) .admin-table-empty{
  min-height:150px !important;
  padding:22px 16px !important;
}

/* Student list keeps its dedicated tighter tuning from the previous hotfix. */
.admin-dashboard-page .admin-students-page .admin-data-table th,
.admin-dashboard-page .admin-students-page .admin-data-table td{
  padding:7px 9px !important;
}

.admin-dashboard-page .admin-students-page .admin-table-actions button{
  min-width:0 !important;
  min-height:28px !important;
  padding:4px 6px !important;
  font-size:9px !important;
}

/* Mobile/tablet: compact tables remain horizontally scrollable; forms/modals
   are intentionally untouched. */
@media(max-width:900px){
  .admin-dashboard-page .admin-dashboard-panel:has(.admin-table-wrap){
    padding:13px !important;
  }

  .admin-dashboard-page .admin-dashboard-panel:has(.admin-table-wrap) .admin-panel-heading{
    margin-bottom:9px !important;
  }

  .admin-dashboard-page .admin-data-table th{
    padding:8px 9px !important;
  }

  .admin-dashboard-page .admin-data-table td{
    padding:7px 9px !important;
  }

  .admin-dashboard-page :is(
    .admin-table-actions,
    .admin-resource-actions,
    .quick-access-actions,
    .admin-management-actions,
    .premium-actions
  ) button{
    min-width:56px !important;
    min-height:29px !important;
    padding:5px 7px !important;
    font-size:9px !important;
  }
}

/* ============================================================
   GSZ ADMIN — COMPACT CREATE / EDIT MODAL (FINAL)
   ------------------------------------------------------------
   Restores the original centered mini-popup workflow while fixing
   its structural problems:
   - the admin page is fully locked behind the modal;
   - header stays visible;
   - only the middle form body scrolls;
   - Save / Cancel stay visible at all times;
   - footer never overlaps form fields;
   - no fullscreen studio / tab UI is used.
   ============================================================ */

html.admin-compact-modal-open,
body.admin-compact-modal-open{
  overflow:hidden !important;
  overscroll-behavior:none;
}

/* The enhanced Add/Edit modal is portaled directly under <body>, so its
   backdrop covers the complete viewport even when the admin shell has
   transformed/scrolling ancestors. */
.admin-modal.admin-compact-form-modal{
  position:fixed !important;
  inset:0 !important;
  z-index:2147483000 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:18px !important;
  overflow:hidden !important;
  isolation:isolate;
}

.admin-modal.admin-compact-form-modal.hidden{
  display:none !important;
}

.admin-modal.admin-compact-form-modal > .admin-modal-backdrop{
  position:fixed !important;
  inset:0 !important;
  z-index:0 !important;
  background:rgba(15,23,42,.62) !important;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  pointer-events:auto;
}

.admin-modal.admin-compact-form-modal > .admin-modal-card,
.admin-modal.admin-compact-form-modal .admin-modal-card{
  position:relative !important;
  z-index:1 !important;
  display:flex !important;
  flex-direction:column !important;
  width:min(920px, calc(100vw - 36px)) !important;
  height:auto !important;
  max-height:min(86vh, 790px) !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  border:1px solid #dfe5ee !important;
  border-radius:22px !important;
  background:#fff !important;
  box-shadow:0 30px 90px rgba(15,23,42,.30) !important;
}

/* Short/simple editors do not need the full 920px width. */
.admin-modal.admin-compact-form-modal.admin-compact-simple > .admin-modal-card,
.admin-modal.admin-compact-form-modal.admin-compact-simple .admin-modal-card{
  width:min(700px, calc(100vw - 36px)) !important;
}

/* Header is outside the scrolling body and is therefore always visible. */
.admin-modal.admin-compact-form-modal .admin-modal-head{
  flex:0 0 auto !important;
  margin:0 !important;
  padding:19px 22px 17px !important;
  border-bottom:1px solid #e8edf4 !important;
  background:#fff !important;
}

.admin-modal.admin-compact-form-modal .admin-modal-head h2,
.admin-modal.admin-compact-form-modal .admin-modal-head h3{
  margin-top:4px !important;
}

.admin-modal.admin-compact-form-modal .admin-modal-close{
  flex:0 0 auto;
}

/* Form becomes a two-row shell: scrolling body + fixed action footer. */
.admin-modal.admin-compact-form-modal .admin-modal-card > form{
  display:flex !important;
  flex-direction:column !important;
  flex:1 1 auto !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
}

.admin-modal.admin-compact-form-modal .admin-modal-scrollbody{
  display:block;
  flex:1 1 auto;
  min-height:0;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  padding:20px 22px 16px;
  scroll-behavior:smooth;
}

/* A slim, visible scrollbar makes long forms easy to navigate without
   allowing the entire admin page to move. */
.admin-modal.admin-compact-form-modal .admin-modal-scrollbody{
  scrollbar-width:thin;
  scrollbar-color:#b7c0cf transparent;
}

.admin-modal.admin-compact-form-modal .admin-modal-scrollbody::-webkit-scrollbar{
  width:8px;
}

.admin-modal.admin-compact-form-modal .admin-modal-scrollbody::-webkit-scrollbar-track{
  background:transparent;
}

.admin-modal.admin-compact-form-modal .admin-modal-scrollbody::-webkit-scrollbar-thumb{
  border:2px solid transparent;
  border-radius:999px;
  background:#b7c0cf;
  background-clip:padding-box;
}

/* Save/Cancel always stay visible and never cover the last form fields. */
.admin-modal.admin-compact-form-modal .admin-modal-actions{
  position:static !important;
  inset:auto !important;
  flex:0 0 auto !important;
  display:flex !important;
  justify-content:flex-end !important;
  align-items:center !important;
  gap:10px !important;
  margin:0 !important;
  padding:14px 22px 16px !important;
  border-top:1px solid #e8edf4 !important;
  background:#fff !important;
  box-shadow:0 -8px 20px rgba(15,23,42,.04);
}

.admin-modal.admin-compact-form-modal .admin-modal-actions .btn{
  min-width:112px;
}

/* Resource forms previously put sticky actions inside the scrolling card.
   The new footer architecture owns positioning instead. */
.admin-modal.admin-compact-form-modal .resource-modal-dialog .admin-modal-actions,
.admin-modal.admin-compact-form-modal.resource-modal-dialog .admin-modal-actions{
  position:static !important;
  bottom:auto !important;
  z-index:auto !important;
  padding-top:14px !important;
  background:#fff !important;
}

/* Keep long resource sections readable while reducing unnecessary vertical
   travel inside the compact editor. */
.admin-modal.admin-compact-form-modal .admin-form-section{
  margin-bottom:16px;
  padding:17px;
}

.admin-modal.admin-compact-form-modal .admin-form-section:last-child{
  margin-bottom:0;
}

.admin-modal.admin-compact-form-modal .admin-form-section-head{
  margin-bottom:14px;
}

.admin-modal.admin-compact-form-modal .admin-form-grid{
  gap:13px 15px;
}

.admin-modal.admin-compact-form-modal .admin-form-grid input,
.admin-modal.admin-compact-form-modal .admin-form-grid select{
  min-height:43px;
}

.admin-modal.admin-compact-form-modal .admin-form-grid textarea{
  min-height:78px;
}

/* Dark mode */
body.dark-mode .admin-modal.admin-compact-form-modal > .admin-modal-card,
body.dark .admin-modal.admin-compact-form-modal > .admin-modal-card,
body.dark-mode .admin-modal.admin-compact-form-modal .admin-modal-card,
body.dark .admin-modal.admin-compact-form-modal .admin-modal-card{
  border-color:#2b374b !important;
  background:#0f172a !important;
}

body.dark-mode .admin-modal.admin-compact-form-modal .admin-modal-head,
body.dark .admin-modal.admin-compact-form-modal .admin-modal-head,
body.dark-mode .admin-modal.admin-compact-form-modal .admin-modal-actions,
body.dark .admin-modal.admin-compact-form-modal .admin-modal-actions{
  border-color:#273449 !important;
  background:#0f172a !important;
}

body.dark-mode .admin-modal.admin-compact-form-modal .admin-modal-actions,
body.dark .admin-modal.admin-compact-form-modal .admin-modal-actions{
  box-shadow:0 -8px 20px rgba(0,0,0,.16);
}

body.dark-mode .admin-modal.admin-compact-form-modal .admin-modal-scrollbody,
body.dark .admin-modal.admin-compact-form-modal .admin-modal-scrollbody{
  scrollbar-color:#536078 transparent;
}

@media(max-width:700px){
  .admin-modal.admin-compact-form-modal{
    padding:9px !important;
    align-items:center !important;
  }

  .admin-modal.admin-compact-form-modal > .admin-modal-card,
  .admin-modal.admin-compact-form-modal .admin-modal-card,
  .admin-modal.admin-compact-form-modal.admin-compact-simple > .admin-modal-card,
  .admin-modal.admin-compact-form-modal.admin-compact-simple .admin-modal-card{
    width:calc(100vw - 18px) !important;
    max-height:calc(100dvh - 18px) !important;
    border-radius:17px !important;
  }

  .admin-modal.admin-compact-form-modal .admin-modal-head{
    padding:15px 15px 13px !important;
  }

  .admin-modal.admin-compact-form-modal .admin-modal-scrollbody{
    padding:15px 15px 12px;
  }

  .admin-modal.admin-compact-form-modal .admin-modal-actions{
    flex-direction:row !important;
    padding:11px 15px 13px !important;
  }

  .admin-modal.admin-compact-form-modal .admin-modal-actions .btn{
    flex:1 1 0;
    min-width:0;
    width:auto !important;
  }

  .admin-modal.admin-compact-form-modal .admin-form-section{
    padding:14px;
    margin-bottom:13px;
  }
}

/* ==========================================================
   GSZ 2.0 PREMIUM BRAND MARKS
   Visual-only replacement for legacy single-letter "G" brand
   marks. Profile/user initials are intentionally untouched.
   ========================================================== */
.admin-sidebar-brand .admin-brand-mark,
.admin-login-brand .admin-login-logo-mark,
.footer-brand .brand-mark,
.gsz-common-footer .gsz-footer-brand-mark {
  background: transparent url("../assets/branding/gsz-header-icon.png") center / contain no-repeat !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-shadow: none !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.admin-sidebar-brand .admin-brand-mark::before,
.admin-sidebar-brand .admin-brand-mark::after,
.admin-login-brand .admin-login-logo-mark::before,
.admin-login-brand .admin-login-logo-mark::after,
.footer-brand .brand-mark::before,
.footer-brand .brand-mark::after,
.gsz-common-footer .gsz-footer-brand-mark::before,
.gsz-common-footer .gsz-footer-brand-mark::after {
  content: none !important;
}

/* Keep the premium icon crisp at each shell's native size. */
.admin-sidebar-brand .admin-brand-mark,
.admin-login-brand .admin-login-logo-mark,
.footer-brand .brand-mark,
.gsz-common-footer .gsz-footer-brand-mark {
  background-origin: border-box !important;
  background-clip: border-box !important;
}


/* =====================================================
   HOME SYSTEM PREVIEW BRAND LOGO
===================================================== */

#homeSystemPreview .home-system-brand .avatar{
  width:48px;
  height:48px;
  min-width:48px;
  min-height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:#ffffff url("../assets/branding/gsz-header-icon.png") center/78% no-repeat;
  border:1px solid rgba(99, 102, 241, 0.12);
  box-shadow:0 10px 26px rgba(99, 102, 241, 0.16);
  color:transparent !important;
  font-size:0 !important;
  line-height:0 !important;
  text-indent:-9999px;
  overflow:hidden;
}

#homeSystemPreview[data-system-status="online"] .home-system-brand .avatar{
  background-color:rgba(255,255,255,0.92);
  box-shadow:0 12px 30px rgba(99, 102, 241, 0.22);
}


/* =====================================================
   STUDENT LOGIN — RESPONSIVE BALANCED LAYOUT
   Scoped to login.html only.
===================================================== */
.student-login-page .auth-page{
  min-height:calc(100dvh - 70px);
  display:flex;
  align-items:center;
  padding:34px 0 42px;
}

.student-login-page .auth-shell{
  width:min(1180px, calc(100% - 40px));
  margin:0 auto;
  grid-template-columns:minmax(0, .94fr) minmax(410px, 470px);
  gap:46px;
  align-items:center;
}

.student-login-page .auth-info-panel{
  max-width:590px;
}

.student-login-page .auth-info-panel .auth-back-link{
  display:flex;
  width:max-content;
  margin:0 0 18px;
}

.student-login-page .auth-info-panel .section-kicker{
  display:block;
  margin-bottom:8px;
}

.student-login-page .auth-info-panel h1{
  max-width:570px;
  margin-top:0;
  font-size:clamp(40px, 4.15vw, 54px);
  line-height:1.08;
  letter-spacing:-1.5px;
}

.student-login-page .auth-info-panel > p{
  max-width:560px;
  margin-top:14px;
  font-size:13px;
  line-height:1.65;
}

.student-login-page .auth-feature-list{
  margin-top:22px;
  gap:10px;
}

.student-login-page .auth-feature-list > div{
  min-height:84px;
  padding:12px 13px;
}

.student-login-page .auth-security-note{
  margin-top:13px;
  padding:12px 14px;
}

.student-login-page .auth-card{
  width:100%;
  max-width:470px;
  justify-self:end;
  padding:28px;
  border-radius:24px;
}

.student-login-page .auth-card-header{
  margin-bottom:22px;
}

.student-login-page .auth-mobile-back-link{
  display:none;
}

@media(max-width:980px) and (min-width:761px){
  .student-login-page .auth-shell{
    width:min(960px, calc(100% - 32px));
    grid-template-columns:minmax(0, .9fr) minmax(390px, 430px);
    gap:28px;
  }

  .student-login-page .auth-info-panel h1{
    font-size:40px;
  }

  .student-login-page .auth-feature-list{
    grid-template-columns:1fr 1fr;
  }
}

@media(max-width:760px){
  .student-login-page .auth-page{
    min-height:calc(100dvh - 64px);
    align-items:flex-start;
    padding:18px 0 30px;
  }

  .student-login-page .auth-shell{
    width:min(100% - 24px, 520px);
    display:flex;
    flex-direction:column;
    gap:10px;
  }

  /* Mobile opens directly on the useful part: the login form. */
  .student-login-page .auth-info-panel{
    display:none !important;
  }

  .student-login-page .auth-mobile-back-link{
    order:0;
    align-self:flex-start;
    display:inline-flex;
    align-items:center;
    min-height:38px;
    padding:7px 4px;
    color:var(--muted);
    font-size:11px;
    font-weight:800;
  }

  .student-login-page .auth-card{
    order:1;
    width:100%;
    max-width:none;
    margin:0;
    padding:22px 18px;
    border-radius:20px;
    justify-self:auto;
  }

  .student-login-page .auth-card-header{
    margin-bottom:20px;
  }

  .student-login-page .auth-card-header h2{
    font-size:20px;
  }

  .student-login-page .auth-form{
    gap:14px;
  }

  .student-login-page .auth-input-wrap input{
    min-height:45px;
    font-size:12px;
  }

  .student-login-page .auth-submit-btn{
    min-height:48px;
    font-size:12px;
  }
}

@media(max-width:390px){
  .student-login-page .auth-shell{
    width:calc(100% - 18px);
  }

  .student-login-page .auth-card{
    padding:20px 15px;
    border-radius:18px;
  }
}


/* =====================================================
   STUDENT LOGIN — DESKTOP PREMIUM ACCESS HUB
   Desktop-only visual treatment. Mobile login stays unchanged.
===================================================== */
@media (min-width:761px){
  .student-login-page .auth-page{
    padding:40px 0 48px;
    background:
      radial-gradient(circle at 14% 18%, rgba(59,130,246,.12), transparent 30%),
      radial-gradient(circle at 86% 72%, rgba(124,58,237,.12), transparent 28%),
      linear-gradient(180deg,#f7f9ff 0%,#eef3ff 100%);
  }

  .student-login-page .auth-shell{
    width:min(1280px, calc(100% - 52px));
    grid-template-columns:minmax(0,1fr) minmax(450px,510px);
    gap:32px;
    align-items:stretch;
  }

  .student-login-page .auth-info-panel{
    position:relative;
    isolation:isolate;
    max-width:none;
    min-height:650px;
    padding:34px 36px 30px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.55);
    border-radius:30px;
    background:
      linear-gradient(145deg,rgba(20,47,160,.98) 0%,rgba(67,56,202,.97) 52%,rgba(109,40,217,.96) 100%);
    box-shadow:0 30px 80px rgba(49,46,129,.22);
    color:#fff;
  }

  .student-login-page .auth-info-panel::before{
    content:"";
    position:absolute;
    z-index:-2;
    width:390px;
    height:390px;
    right:-165px;
    top:-155px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(34,211,238,.42),rgba(59,130,246,.12) 48%,transparent 70%);
    filter:blur(2px);
  }

  .student-login-page .auth-info-panel::after{
    content:"";
    position:absolute;
    z-index:-1;
    width:260px;
    height:260px;
    right:18px;
    bottom:12px;
    background:url("../assets/branding/gsz-header-icon.png") center/contain no-repeat;
    opacity:.055;
    transform:rotate(-7deg);
    pointer-events:none;
  }

  .student-login-page .auth-info-panel .auth-back-link{
    min-height:38px;
    margin:0 0 24px;
    padding:8px 12px;
    border:1px solid rgba(255,255,255,.18);
    border-radius:999px;
    background:rgba(255,255,255,.08);
    color:rgba(255,255,255,.84);
    backdrop-filter:blur(8px);
  }

  .student-login-page .auth-info-panel .auth-back-link:hover{
    color:#fff;
    background:rgba(255,255,255,.14);
  }

  .student-login-page .auth-info-panel .section-kicker{
    width:max-content;
    margin:0 0 12px;
    padding:7px 11px;
    border:1px solid rgba(255,255,255,.16);
    border-radius:999px;
    background:rgba(255,255,255,.10);
    color:#dbeafe;
    font-size:10px;
    letter-spacing:.13em;
  }

  .student-login-page .auth-info-panel h1{
    max-width:690px;
    margin:0;
    color:#fff;
    font-size:clamp(42px,3.8vw,56px);
    line-height:1.04;
    letter-spacing:-2px;
  }

  .student-login-page .auth-info-panel h1 span{
    display:block;
    margin-top:4px;
    color:#fff;
    background:linear-gradient(90deg,#e0f2fe 0%,#fff 45%,#ddd6fe 100%);
    -webkit-background-clip:text;
    background-clip:text;
  }

  .student-login-page .auth-info-panel > p{
    max-width:650px;
    margin:16px 0 0;
    color:rgba(255,255,255,.76);
    font-size:13px;
    line-height:1.65;
  }

  .student-login-page .auth-feature-list{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    margin-top:24px;
  }

  .student-login-page .auth-feature-list > div{
    min-height:90px;
    padding:14px;
    border:1px solid rgba(255,255,255,.14);
    background:rgba(255,255,255,.085);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
    backdrop-filter:blur(12px);
  }

  .student-login-page .auth-feature-list > div > span{
    width:40px;
    height:40px;
    border:1px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.13);
  }

  .student-login-page .auth-feature-list strong{
    color:#fff;
    font-size:10px;
  }

  .student-login-page .auth-feature-list small{
    color:rgba(255,255,255,.68);
    font-size:9px;
    line-height:1.5;
  }

  .student-login-page .auth-security-note{
    margin-top:12px;
    padding:13px 14px;
    border-color:rgba(134,239,172,.26);
    background:rgba(16,185,129,.12);
    backdrop-filter:blur(10px);
  }

  .student-login-page .auth-security-note strong{
    color:#bbf7d0;
  }

  .student-login-page .auth-security-note p{
    color:rgba(220,252,231,.78);
  }

  .student-login-page .auth-card{
    align-self:stretch;
    max-width:510px;
    min-height:650px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:34px 32px;
    border-radius:30px;
    border:1px solid rgba(99,102,241,.12);
    background:rgba(255,255,255,.94);
    box-shadow:0 30px 80px rgba(15,23,42,.12);
  }

  .student-login-page .auth-card::before{
    content:"";
    display:block;
    width:62px;
    height:5px;
    margin:0 0 22px;
    border-radius:999px;
    background:linear-gradient(90deg,#2563eb,#7c3aed);
  }

  .student-login-page .auth-card-header{
    margin-bottom:24px;
  }

  .student-login-page .auth-card-header h2{
    font-size:25px;
    letter-spacing:-.6px;
  }
}

@media (min-width:761px) and (max-width:1040px){
  .student-login-page .auth-shell{
    width:min(980px,calc(100% - 32px));
    grid-template-columns:minmax(0,1fr) minmax(405px,445px);
    gap:22px;
  }

  .student-login-page .auth-info-panel,
  .student-login-page .auth-card{
    min-height:610px;
  }

  .student-login-page .auth-info-panel{
    padding:28px 26px;
  }

  .student-login-page .auth-info-panel h1{
    font-size:40px;
  }

  .student-login-page .auth-feature-list{
    grid-template-columns:1fr;
  }

  .student-login-page .auth-feature-list > div:nth-child(n+3){
    display:none;
  }
}