/* ==========================================
   PYQ STYLESHEET (pyq.css)
   ========================================== */

.exam-wrapper{
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto;
  padding: 0 6px !important;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #111827;
  box-sizing: border-box;
}
.exam-wrapper *, .exam-wrapper *:before, .exam-wrapper *:after {
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .exam-wrapper {
    margin: 0 auto !important;
    padding: 0 6px !important;
  }
}

/* ==========================================
   HEADER LOOK (Like Mock Test)
========================================== */
.sp-page-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 16px;
  padding: 0 4px 10px;
  border-bottom: 2px solid #e2e8f0;
}

.sp-page-header-left{
  flex: 1;
  min-width: 0;
}

.sp-page-title{
  font-size: 24px;
  font-weight: 900;
  color: #0f172a;
  line-height: 1.1;
}

@media (min-width: 768px) {
  .sp-page-title {
    font-size: 30px;
  }
}

.sp-page-subtitle{
  margin-top: 4px;
  font-size: 13px;
  color: #64748b;
}

.sp-page-header-logo{
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 768px) {
  .sp-page-header-logo {
    width: 64px;
    height: 64px;
  }
}

.sp-page-header-logo img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 12px;
}

/* =========================================================
   PYQ HERO — CLEAN RESPONSIVE SYSTEM
   ========================================================= */

.pyq-hero-single-box {

    background:
        radial-gradient(
            circle at 72% 35%,
            rgba(59,130,246,.08),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #FAFCFF 0%,
            #EEF5FF 55%,
            #F8FBFF 100%
        );

    border: 1px solid rgba(37,99,235,.10);

    box-shadow:
        0 12px 35px rgba(37,99,235,.08);

    border-radius: 20px;
    padding: 20px 16px;
    margin-bottom: 24px;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 110px)
        minmax(0, 180px)
        minmax(0, 280px);

    gap: 20px;
    align-items: center;

    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow: hidden;
}


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

.pyq-hero-single-box > * {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}


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

.pyq-hero-content-area {
    min-width: 0;
    max-width: 100%;
}


/* =========================================================
   CENTER ILLUSTRATION
   ========================================================= */

.pyq-hero-center-illustration {
    width: 200px;
    height: 180px;
    min-width: 200px;
    min-height: 180px;

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

    flex-shrink: 0;
    box-sizing: border-box;
}

.pyq-hero-center-illustration img {
    display: block;

    width: 200px;
    height: 180px;

    max-width: 200px;
    max-height: 180px;

    object-fit: contain;
}


/* =========================================================
   EXTRA ILLUSTRATION
   ========================================================= */

.pyq-hero-extra-illustration {
    width: 110px;
    height: 100px;
    min-width: 110px;
    min-height: 100px;

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

    flex-shrink: 0;
    box-sizing: border-box;
}

.pyq-hero-extra-illustration img {
    display: block;

    width: 110px;
    height: 100px;

    max-width: 110px;
    max-height: 100px;

    object-fit: contain;
}


/* =========================================================
   LARGE DESKTOP
   ========================================================= */

@media (min-width: 1101px) {

    .pyq-hero-single-box {
        padding: 28px 32px;
        border-radius: 24px;

        grid-template-columns:
            minmax(0, 1.2fr)
            minmax(0, 100px)
            minmax(0, 180px)
            minmax(0, 280px);

        gap: 20px;
    }

}


/* =========================================================
   TABLET / SMALL DESKTOP
   1051px – 1100px
   ========================================================= */

@media (min-width: 1051px) and (max-width: 1100px) {

    .pyq-hero-single-box {
        padding: 20px 18px;

        grid-template-columns:
            minmax(0, 1fr)
            90px
            150px
            240px;

        gap: 14px;
    }

    .pyq-hero-center-illustration {
        width: 150px;
        height: 150px;
        min-width: 150px;
        min-height: 150px;
    }

    .pyq-hero-center-illustration img {
        width: 150px;
        height: 150px;
        max-width: 150px;
        max-height: 150px;
    }

    .pyq-hero-extra-illustration {
        width: 90px;
        height: 90px;
        min-width: 90px;
        min-height: 90px;
    }

    .pyq-hero-extra-illustration img {
        width: 90px;
        height: 90px;
        max-width: 90px;
        max-height: 90px;
    }

}


/* =========================================================
   RESPONSIVE
   1050px AND BELOW
   ========================================================= */

@media (max-width: 1050px) {

    .pyq-hero-single-box {
        display: flex;
        flex-direction: column;
        align-items: stretch;

        text-align: left !important;

        padding: 18px 14px !important;
        gap: 14px !important;

        position: relative;

        width: 100%;
        max-width: 100%;

        box-sizing: border-box;
        overflow: hidden;
    }


    /* MAIN CONTENT */

    .pyq-hero-content-area {
        display: flex;
        flex-direction: column;

        align-items: flex-start !important;
        text-align: left !important;

        width: 100%;
        min-width: 0;
    }


    /* STATS */

    .pyq-stats-grid {
        display: grid !important;

        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;

        gap: 6px !important;

        width: 100% !important;
        justify-content: stretch !important;
    }

    .pyq-stats-grid > div {
        width: 100% !important;
        min-width: 0;

        justify-content: flex-start !important;
        padding: 6px 4px !important;

        box-sizing: border-box;
    }


    /* EXTRA ILLUSTRATION */

    .pyq-hero-extra-illustration {
        display: none !important;
    }


    /* MAIN ILLUSTRATION */

    .pyq-hero-center-illustration {
        position: absolute !important;

        top: 42px !important;
        right: 10px !important;

        width: 100px !important;
        height: 100px !important;

        min-width: 100px !important;
        min-height: 100px !important;

        display: flex !important;

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

        z-index: 1;
        pointer-events: none;
    }

    .pyq-hero-center-illustration img {
        display: block;

        width: 100px !important;
        height: 100px !important;

        max-width: 100px !important;
        max-height: 100px !important;

        object-fit: contain;
    }


    /* WHY PRACTICE BOX */

    .pyq-mobile-hide-box {
        display: none !important;
    }

}


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

@media (max-width: 600px) {

    .pyq-hero-single-box {
        padding: 16px 12px !important;
        gap: 12px !important;
        border-radius: 16px;
    }

    .pyq-hero-center-illustration {
        top: 38px !important;
        right: 8px !important;

        width: 82px !important;
        height: 82px !important;

        min-width: 82px !important;
        min-height: 82px !important;
    }

    .pyq-hero-center-illustration img {
        width: 82px !important;
        height: 82px !important;

        max-width: 82px !important;
        max-height: 82px !important;
    }

    .pyq-stats-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;

        gap: 5px !important;
    }

    .pyq-stats-grid > div {
        padding: 5px 3px !important;
    }

}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 380px) {

    .pyq-hero-single-box {
        padding: 14px 10px !important;
    }

    .pyq-hero-center-illustration {
        width: 70px !important;
        height: 70px !important;

        min-width: 70px !important;
        min-height: 70px !important;

        top: 34px !important;
        right: 6px !important;
    }

    .pyq-hero-center-illustration img {
        width: 70px !important;
        height: 70px !important;

        max-width: 70px !important;
        max-height: 70px !important;
    }

}


/* =========================================================
   PYQ STATS BASE
   ========================================================= */

.pyq-stats-grid {
    display: flex;
    gap: 8px;
    width: 100%;
    flex-wrap: wrap;
}


.sp-folder-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  width: 100%;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .sp-folder-grid {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
  }
}

.exam-card-item {
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  position: relative;
}

@media (min-width: 768px) {
  .exam-card-item {
    border-radius: 20px;
    padding: 20px;
  }
}

.exam-card-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.08);
}

.exam-inner-box {
  background: #ffffff;
  padding: 7px 4px;
  border-radius: 8px;
  text-align: center;
}

.pyq-print-wrap{
  max-width:950px;
  margin:0 auto 32px;
}

.print-page{
  position:relative;
  isolation:isolate;
  width:100%;
  background:#fff;
  border:1px solid #d1d5db;
  border-radius:16px;
  padding:28px 22px 26px;
  box-shadow:0 10px 30px rgba(0,0,0,.05);
  overflow:hidden;
}

.download-float{
  position:absolute;
  top:16px;
  right:16px;
  z-index:20;
}

.toolbar-btn{
  appearance:none;
  border:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:10px 16px;
  border-radius:10px;
  font-size:14px;
  font-weight:700;
  background:#111;
  color:#fff;
  cursor:pointer;
  box-shadow:0 8px 20px rgba(0,0,0,.12);
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
  white-space:nowrap;
}

.toolbar-btn:hover{
  background:#000;
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(0,0,0,.16);
}

.watermark-layer{
  display:none;
}

.print-content{
  position:relative;
  z-index:2;
}

.paper-header{
  text-align:center;
  border-bottom:2px solid #111827;
  padding:0 0 16px;
  margin-bottom:16px;
}

.paper-header-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
}

.paper-logo-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
}

.paper-logo{
  width:50px;
  height:50px;
  object-fit:contain;
  display:block;
}

.paper-header-text{
  text-align:center;
}

.paper-title{
  margin:0;
  font-size:24px;
  line-height:1.25;
  font-weight:800;
  color:#111827;
  letter-spacing:.2px;
}

.paper-brand{
  margin-top:8px;
  font-size:11px;
  font-weight:800;
  color:#111827;
  text-transform:uppercase;
  letter-spacing:6px;
  word-spacing:4px;
  line-height:1.6;
  opacity:.92;
}

.paper-subject{
  margin-top:8px;
  font-size:14px;
  font-weight:700;
  color:#374151;
  letter-spacing:1px;
  line-height:1.4;
}

.paper-set{
  margin-top:10px;
  display:inline-block;
  font-size:12px;
  font-weight:700;
  color:#374151;
  border:1px solid #d1d5db;
  padding:5px 12px;
  border-radius:999px;
  background:#f9fafb;
}

.paper-meta-table{
  width:100%;
  border-collapse:collapse;
  margin-bottom:14px;
  table-layout:fixed;
}

.paper-meta-table td{
  border:1px solid #d1d5db;
  padding:10px 12px;
  font-size:13px;
  line-height:1.5;
  vertical-align:top;
  color:#111827;
}

.paper-instructions{
  border:1px dashed #cbd5e1;
  background:#fcfcfc;
  padding:12px 14px;
  margin-bottom:16px;
  border-radius:8px;
}

.paper-instructions-title{
  font-size:14px;
  font-weight:800;
  margin-bottom:8px;
  color:#111827;
}

.paper-instructions ul{
  margin:0;
  padding-left:18px;
}

.paper-instructions li{
  font-size:13px;
  line-height:1.6;
  margin-bottom:4px;
}

.question-section-divider{
  height:1px;
  width:100%;
  background:#000;
  margin:16px 0 18px;
}

.question-list{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.question-box{
  margin-bottom:0;
  break-inside:avoid;
  page-break-inside:avoid;
  background:#ffffff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:16px 16px 14px;
  box-shadow:0 2px 8px rgba(0,0,0,.04);
  position:relative;
  overflow:hidden;
}

/* =========================================================
   QUESTION + SOLUTION WATERMARKS
   Each area owns its own watermark, so opening the solution
   never moves the question watermark.
   ========================================================= */

.question-main-content{
  position:relative;
}

.question-watermark,
.solution-watermark{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%) rotate(-28deg);
  font-size:28px;
  font-weight:800;
  color:rgba(0,0,0,.05);
  white-space:nowrap;
  pointer-events:none;
  user-select:none;
  z-index:4;
}

.solution-content{
  position:relative;
}

.solution-inner-content{
  position:relative;
  z-index:2;
}

.solution-watermark{
  z-index:1;
}

.score-fx-layer{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:20;
  overflow:visible;
}

.score-fx{
  position:absolute;
  left:0;
  top:0;
  z-index:30;

  padding:7px 12px;
  border-radius:999px;
  font-size:13px;
  font-weight:800;
  line-height:1;

  opacity:0;
  transform:translate(-50%, -50%) translateY(8px) scale(.96);
  will-change:transform,opacity;

  box-shadow:0 10px 24px rgba(0,0,0,.08);
}

.score-fx.is-positive{
  color:#166534;
  background:rgba(34,197,94,.12);
  border:1px solid rgba(34,197,94,.35);
}

.score-fx.is-negative{
  color:#b91c1c;
  background:rgba(239,68,68,.12);
  border:1px solid rgba(239,68,68,.32);
}

.score-fx.show{
  animation:scoreFloatUp 900ms cubic-bezier(.16,1,.3,1) forwards;
}

@keyframes scoreFloatUp{
  0%{ opacity:0; transform:translate(-50%, -50%) translateY(10px) scale(.95); }
  15%{ opacity:1; transform:translate(-50%, -50%) translateY(0) scale(1); }
  75%{ opacity:1; transform:translate(-50%, -50%) translateY(-16px) scale(1); }
  100%{ opacity:0; transform:translate(-50%, -50%) translateY(-24px) scale(1.02); }
}

.q-topline,
.q-text,
.question-image-wrap,
.options-wrap{
  position:relative;
  z-index:2;
}

.q-topline{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-start;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
  padding-left:6px;
}

.q-number{
  font-weight:800;
  margin-right:2px;
}

.q-badge{
  display:inline-flex;
  align-items:center;
  padding:3px 8px;
  border-radius:999px;
  border:1px solid #d1d5db;
  background:#f9fafb;
  color:#374151;
  font-size:12px;
  font-weight:700;
  line-height:1;
}

.q-badge.marks{
  background:#ecfdf5;
  border-color:#86efac;
  color:#166534;
}

.negative-inline{
  color:#dc2626;
  font-weight:800;
}

.q-badge.pyq-badge{
  margin-left:auto;
  background:transparent !important;
  border:none !important;
  white-space:nowrap;
  text-align:right;
  padding:0 !important;
  color:#7f1d1d !important;
  font-size:13px;
  font-weight:800;
  letter-spacing:.3px;
}

.q-text{
  font-size:15px;
  line-height:1.75;
  font-weight:600;
  color:#111827;
  margin-bottom:12px;
  padding-left:6px;
}

.question-image{
  height:auto;
  max-width:100%;
  width:auto;
  border:1px solid #e5e7eb;
  border-radius:10px;
  padding:6px;
  background:transparent;
  display:block;
  margin:0 auto;
}

.img-small{
  max-width:120px !important;
  width:auto !important;
}

.img-medium{
  max-width:220px !important;
  width:auto !important;
}

.img-large{
  max-width:320px !important;
  width:auto !important;
}

.question-image-wrap{
  margin:12px 0 14px;
  text-align:center;
  max-width:100%;
  overflow:hidden;
  padding-left:6px;
}

.options-wrap{
  padding-left:6px;
}

.options{
  display:grid;
  gap:10px;
}

.option{
  position:relative;
  z-index:2;
  min-height:44px;
  width:100%;
  text-align:left;
  overflow:hidden;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:10px;
  border:1px solid #e5e7eb;
  background:#fff;
  color:#111827;
  cursor:pointer;
  font-size:14px;
  line-height:1.5;
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.option:hover{
  background:#f9fafb;
  border-color:#d1d5db;
  box-shadow:0 2px 6px rgba(0,0,0,.05);
  transform:none;
}

.option:focus-visible{
  outline:none;
  border-color:#111;
  box-shadow:0 0 0 3px rgba(0,0,0,.10);
}

.option.selected{
  background:#f5f5f5;
  border-color:#6b7280;
  color:#111827;
}

.opt-indicator{
  width:22px;
  height:22px;
  min-width:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  font-weight:700;
  line-height:22px;
  text-align:center;
  border:1.2px solid #cbd5e1;
  border-radius:50%;
  background:#fff;
  color:#374151;
}

.option.is-mcq .opt-indicator{
  border-radius:999px;
}

.option.is-msq .opt-indicator{
  border-radius:6px;
}

.option:hover .opt-indicator{
  border-color:#111;
  color:#111;
}

.option.is-msq.selected .opt-indicator,
.option.selected .opt-indicator{
  background:#6b7280;
  border-color:#6b7280;
  box-shadow:none;
}

.option.selected .opt-indicator,
.option.correct .opt-indicator,
.option.wrong .opt-indicator{
  color:#fff !important;
}

.opt-content{
  flex:1;
  display:block;
}

.opt-content img{
  display:inline-block;
  vertical-align:middle;
  width:auto;
  height:auto;
  margin-left:6px;
  border:none;
  padding:0;
  background:transparent;
}

.opt-content img.img-small{
  max-width:150px;
}

.opt-content img.img-medium{
  max-width:220px;
}

.opt-content img.img-large{
  max-width:320px;
}

.numerical-box{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:10px;
  position:relative;
  z-index:2;
}

.numerical-input{
  flex:1 1 220px;
  min-height:42px;
  padding:10px 12px;
  border:1px solid #d1d5db;
  border-radius:10px;
  font-size:14px;
  outline:none;
  background:#fff;
  color:#111827;
}

.numerical-input:focus{
  border-color:#111;
  box-shadow:0 0 0 3px rgba(0,0,0,.10);
}

.check-numerical-btn,
.check-msq-btn{
  appearance:none;
  border:1px solid #d1d5db;
  min-height:40px;
  padding:9px 16px;
  border-radius:8px;
  background:#f3f4f6;
  color:#111827;
  font-size:13.5px;
  font-weight:600;
  cursor:pointer;
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
  position:relative;
  z-index:2;
}

.check-numerical-btn:hover,
.check-msq-btn:hover{
  background:#e5e7eb;
}

.check-numerical-btn:active,
.check-msq-btn:active{
  transform:scale(0.97);
}

.numerical-result,
.msq-result{
  width:100%;
  font-size:13px;
  font-weight:700;
  margin-top:6px;
  position:relative;
  z-index:2;
  padding:8px 10px;
  border-radius:10px;
  display:none;
}

.numerical-result.show,
.msq-result.show{
  display:block;
}

.numerical-result.success,
.msq-result.success{
  background:#ecfdf5;
  color:#166534;
  border:1px solid #86efac;
}

.numerical-result.error,
.msq-result.error{
  background:#fef2f2;
  color:#991b1b;
  border:1px solid #fecaca;
}

.answer-box{
  margin-top:36px;
  padding:20px 22px;
  border-radius:16px;
  background:#f8fafc;
  border:1.5px solid #e2e8f0;
  box-shadow:0 12px 28px rgba(0,0,0,.06);
  break-inside:avoid;
  page-break-inside:avoid;
}

.answer-box-title{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:14px;
  padding:7px 14px;
  border-radius:999px;
  background:#6366f1;
  color:#fff;
  font-size:12px;
  font-weight:800;
  letter-spacing:.4px;
  text-transform:uppercase;
  box-shadow:0 4px 10px rgba(99,102,241,.25);
}

.answer-box-title::before{
  content:"✓";
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  border-radius:999px;
  background:#fff;
  color:#6366f1;
  font-size:11px;
  font-weight:900;
}

.answer-key-list{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.answer-chip{
  display:inline-flex;
  align-items:center;
  padding:7px 12px;
  border-radius:999px;
  background:#ffffff;
  border:1px solid #e2e8f0;
  color:#0f172a;
  font-size:13px;
  font-weight:700;
  line-height:1.2;
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.answer-chip:hover{
  background:#eef2ff;
  border-color:#c7d2fe;
  transform:translateY(-1px);
}

.answer-chip strong{
  color:#4338ca;
  margin-right:4px;
}

.correct{
  background:#ecfdf5 !important;
  border-color:#22c55e !important;
  color:#166534 !important;
  box-shadow:0 8px 18px rgba(34,197,94,.10) !important;
}

.correct:hover{
  background:#ecfdf5 !important;
  border-color:#22c55e !important;
  color:#166534 !important;
  transform:none !important;
}

.correct .opt-indicator{
  background:#16a34a !important;
  border:2px solid #fff !important;
  box-shadow:0 0 0 2px #16a34a;
  color:#fff !important;
}

.solution-correct{
  background:#ede9fe !important;
  border-color:#a78bfa !important;
  color:#5b21b6 !important;
  box-shadow:0 8px 18px rgba(124,58,237,.10) !important;
}

.solution-correct:hover{
  background:#ede9fe !important;
  border-color:#a78bfa !important;
  color:#5b21b6 !important;
  transform:none !important;
}

.solution-correct .opt-indicator{
  background:#7c3aed !important;
  border:2px solid #fff !important;
  box-shadow:0 0 0 2px #7c3aed;
  color:#fff !important;
}

.wrong{
  background:#fef2f2 !important;
  border-color:#ef4444 !important;
  color:#991b1b !important;
  box-shadow:0 8px 18px rgba(239,68,68,.08) !important;
}

.wrong:hover{
  background:#fef2f2 !important;
  border-color:#ef4444 !important;
  color:#991b1b !important;
  transform:none !important;
}

.wrong .opt-indicator{
  background:#dc2626 !important;
  border:2px solid #fff !important;
  box-shadow:0 0 0 2px #dc2626;
  color:#fff !important;
}

.option:disabled{
  cursor:not-allowed;
  opacity:1;
}

.option:disabled:hover{
  transform:none;
}

.check-msq-btn:disabled,
.check-numerical-btn:disabled,
.numerical-input:disabled{
  cursor:not-allowed;
  opacity:.95;
}

.question-box.active-solution{
  border-color:#c4b5fd !important;
  background:#f8f7ff;
}

.question-box.active-solution .question-image{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  filter:inherit !important;
}

.question-box.active-solution .option:not(.correct):not(.wrong){
  background:#faf5ff;
  border-color:#ddd6fe;
}

.question-box.active-solution .option.selected{
  background:#ede9fe;
  border-color:#a78bfa;
  color:#111827;
}

.question-box.active-solution .option.selected .opt-indicator{
  background:#7c3aed;
  border-color:#7c3aed;
  color:#fff;
}

.question-box.active-solution .opt-indicator{
  border-color:#c4b5fd;
}

.question-box.active-solution .option:not(.selected):not(.correct):not(.wrong):hover{
  background:#f3e8ff;
  border-color:#c4b5fd;
}

.question-box.active-solution .option:not(.selected):not(.correct):not(.wrong):hover .opt-indicator{
  border-color:#6d28d9;
  color:#6d28d9;
}

.question-box:nth-child(6n+1){ border-color:#bfdbfe; }
.question-box:nth-child(6n+2){ border-color:#bbf7d0; }
.question-box:nth-child(6n+3){ border-color:#fecaca; }
.question-box:nth-child(6n+4){ border-color:#fde68a; }
.question-box:nth-child(6n+5){ border-color:#ddd6fe; }
.question-box:nth-child(6n+6){ border-color:#a5f3fc; }

.solution-wrap{
  margin-top:14px;
  border-top:1px dashed #e5e7eb;
  padding-top:14px;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.view-solution-btn{
  border:none;
  padding:7px 16px;
  border-radius:999px;
  cursor:pointer;
  font-size:13px;
  font-weight:600;
  letter-spacing:.2px;
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
  background:#dcfce7;
  color:#166534;
  box-shadow:0 1px 2px rgba(0,0,0,.05);
}

.view-solution-btn:hover{
  background:#bbf7d0;
}

.view-solution-btn.active{
  background:#ede9fe !important;
  color:#5b21b6 !important;
}

.view-solution-btn.active:hover{
  background:#ddd6fe !important;
}

.solution-content{
  display:none;
  width:100%;
  max-width:100%;
  opacity:0;
  transform:translateY(-6px);
  transition: opacity .25s ease, transform .25s ease;
}

.solution-content.open{
  display:block;
  opacity:1;
  transform:translateY(0);
  margin-top:12px;
  padding:14px;
  background:#f0fdf4;
  border:1px solid #bbf7d0;
  border-radius:12px;
  line-height:1.75;
}

.solution-content.open .katex-display{
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  white-space:normal;
}

.solution-content.open .katex-display::-webkit-scrollbar{
  display:none;
}

.final-answer-line{
  margin-top:14px;
  padding-top:10px;
  border-top:1px dashed #bbf7d0;
  font-size:14px;
  font-weight:800;
  color:#166534;
}

.chapter-weightage-table{
  width:100%;
  border-collapse:collapse;
  margin-top:10px;
  font-size:14px;
}

.chapter-weightage-table th,
.chapter-weightage-table td{
  border:1px solid #d1d5db;
  padding:10px 12px;
  text-align:left;
}

.chapter-weightage-table th{
  background:#f3f4f6;
  font-weight:700;
}

.chapter-weightage-table tfoot td{
  background:#f9fafb;
  font-weight:700;
}

@media (max-width:768px){
  .sp-page-header{ gap:14px; margin-bottom:18px; }
  .sp-page-title{ font-size:26px; }
  .sp-page-subtitle{ font-size:13px; }
  .sp-page-header-logo{ width:58px; height:58px; }
  
  .sp-folder-grid{ grid-template-columns: 1fr; gap:12px; }
  .chapter-weightage-table{
    font-size:13px;
  }
  .chapter-weightage-table th,
  .chapter-weightage-table td{
    padding:8px 10px;
  }
}

@media (prefers-reduced-motion: reduce){
  .score-fx,
  .option,
  .toolbar-btn,
  .check-msq-btn,
  .check-numerical-btn{
    animation:none !important;
    transition:none !important;
  }

  .score-fx.show{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
  }
}

@media (max-width:768px){
  .print-page{
    padding:72px 2px 18px;
  }

  .download-float{
    top:12px;
    right:12px;
    left:12px;
  }

  .toolbar-btn{
    width:100%;
  }

  .paper-logo{
    width:42px;
    height:42px;
  }

  .paper-title{
    font-size:19px;
  }

  .paper-brand{
    font-size:10px;
    letter-spacing:4px;
    word-spacing:2px;
  }

  .paper-subject{
    font-size:13px;
  }

  .paper-meta-table td{
    display:block;
    width:100%;
  }

  .question-box{
    border-radius:14px;
    padding:14px 6px 12px;
  }

  .question-watermark,
  .solution-watermark{
    font-size:22px;
  }

  .score-fx{
    top:12px;
    right:12px;
    font-size:12px;
    padding:6px 10px;
  }

  .option{
    padding:11px 10px;
    font-size:13px;
  }

  .numerical-input,
  .check-numerical-btn,
  .check-msq-btn{
    width:100%;
  }

  .answer-box{
    padding:14px 12px;
  }

  .answer-chip{
    font-size:12px;
  }
}

@media print{
  @page{
    size:A4;
    margin:16mm 12mm 18mm 12mm;
  }

  html,
  body{
    margin:0 !important;
    padding:0 !important;
    background:#fff !important;
  }

  body *{
    visibility:hidden;
  }

  .print-page,
  .print-page *{
    visibility:visible;
  }

  .print-page{
    position:relative !important;
    isolation:isolate !important;
    box-shadow:none !important;
    border:none !important;
    border-radius:0 !important;
    padding-top:8mm !important;
    padding-right:0 !important;
    padding-bottom:8mm !important;
    padding-left:0 !important;
    margin:0 !important;
    width:100% !important;
    max-width:none !important;
    overflow:visible !important;
    background:#fff !important;
  }

  .download-float,
  .toolbar-btn,
  .check-numerical-btn,
  .check-msq-btn,
  .numerical-result,
  .msq-result,
  .score-fx-layer{
    display:none !important;
  }

  .solution-content{
    display:none !important;
  }

  .solution-content.print-solution-enabled{
    display:block !important;
    opacity:1 !important;
    transform:none !important;
    margin-top:10px !important;
    padding:12px !important;
    background:#f0fdf4 !important;
    border:1px solid #bbf7d0 !important;
    border-radius:10px !important;
    line-height:1.7 !important;
  }

  .watermark-layer,
  .watermark-layer::before{
    display:none !important;
    content:none !important;
  }

  .print-content{
    position:relative !important;
    z-index:2 !important;
    background:transparent !important;
  }

  .site-header,
  .navbar,
  .top-header,
  .entry-header,
  .page-header,
  .breadcrumb,
  header.site-header,
  nav,
  footer{
    display:none !important;
  }

  .paper-header,
  .paper-meta-table,
  .paper-meta-table tr,
  .paper-meta-table td,
  .paper-instructions,
  .question-box,
  .options,
  .answer-box{
    break-inside:avoid !important;
    page-break-inside:avoid !important;
  }

  .question-section-divider{
    height:1px !important;
    background:#000 !important;
    margin:12px 0 14px !important;
  }

  .question-box{
    margin-bottom:10px !important;
    border:1px solid #cfcfcf !important;
    box-shadow:none !important;
    border-radius:10px !important;
    padding:12px 10px 10px !important;
    background:transparent !important;
  }

  .question-watermark,
  .solution-watermark{
    z-index:3 !important;
    color:rgba(0,0,0,.05) !important;
  }

  .q-topline,
  .q-text,
  .question-image-wrap,
  .options-wrap,
  .option,
  .numerical-box,
  .numerical-result{
    position:relative !important;
    z-index:2 !important;
  }

  .paper-meta-table td,
  .paper-instructions,
  .option,
  .answer-box,
  .numerical-input{
    box-shadow:none !important;
  }

  .answer-box{
    background:#f8fafc !important;
    border:1.5px solid #e2e8f0 !important;
    -webkit-print-color-adjust:exact !important;
    print-color-adjust:exact !important;
  }

  .answer-box-title{
    background:#6366f1 !important;
    color:#ffffff !important;
    border:1px solid #4f46e5 !important;
    -webkit-print-color-adjust:exact !important;
    print-color-adjust:exact !important;
  }

  .answer-box-title::before{
    background:#ffffff !important;
    color:#6366f1 !important;
    -webkit-print-color-adjust:exact !important;
    print-color-adjust:exact !important;
  }

  .answer-chip{
    display:inline-flex !important;
    align-items:center !important;
    padding:7px 12px !important;
    border-radius:999px !important;
    background:#eef2ff !important;
    border:1px solid #c7d2fe !important;
    color:#4338ca !important;
    font-size:13px !important;
    font-weight:700 !important;
    opacity:1 !important;
    box-shadow:none !important;
    -webkit-print-color-adjust:exact !important;
    print-color-adjust:exact !important;
  }

  .answer-chip strong{
    color:#312e81 !important;
    -webkit-print-color-adjust:exact !important;
    print-color-adjust:exact !important;
  }

  .option{
    color:#000 !important;
    border:1px solid #cfcfcf !important;
    transform:none !important;
  }

  .opt-indicator{
    border-color:#9ca3af !important;
    background:#fff !important;
    box-shadow:none !important;
  }

  .correct,
  .wrong{
    color:#000 !important;
    box-shadow:none !important;
  }

  .correct{
    background:rgba(34,197,94,.08) !important;
    border-color:#86efac !important;
    -webkit-print-color-adjust:exact !important;
    print-color-adjust:exact !important;
  }

  .wrong{
    background:rgba(239,68,68,.08) !important;
    border-color:#fca5a5 !important;
    -webkit-print-color-adjust:exact !important;
    print-color-adjust:exact !important;
  }

  .print-header-repeat{
    display:block !important;
    text-align:center !important;
    font-size:18px !important;
    font-weight:800 !important;
    color:#111827 !important;
    margin-bottom:12px !important;
    padding-bottom:10px !important;
    border-bottom:1px solid #111827 !important;
  }

  *{
    -webkit-print-color-adjust:exact !important;
    print-color-adjust:exact !important;
  }
}


























/* =========================================================
   DARK MODE - PYQ & DASHBOARD
   Premium Frosted Glass / Colored Glass Effect
   ========================================================= */

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

html.dark-mode .pyq-hero-single-box,
body.dark-mode .pyq-hero-single-box {
    background:
        radial-gradient(
            circle at 72% 35%,
            rgba(59, 130, 246, 0.16),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            rgba(15, 23, 42, 0.92),
            rgba(15, 23, 42, 0.72),
            rgba(2, 6, 23, 0.92)
        ) !important;

    border: 1px solid rgba(255, 255, 255, 0.10) !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 18px 45px rgba(0, 0, 0, 0.28) !important;
}


html.dark-mode .pyq-hero-single-box h2 span,
body.dark-mode .pyq-hero-single-box h2 span {
    color: #f8fafc !important;
}


html.dark-mode .pyq-hero-single-box p,
html.dark-mode .pyq-hero-single-box div[style*="color:#475569"],
html.dark-mode .pyq-hero-single-box div[style*="color:#64748b"],
body.dark-mode .pyq-hero-single-box p,
body.dark-mode .pyq-hero-single-box div[style*="color:#475569"],
body.dark-mode .pyq-hero-single-box div[style*="color:#64748b"] {
    color: #94a3b8 !important;
}


/* =========================================================
   HERO - STATS / TRUST BOXES
   ========================================================= */

html.dark-mode .pyq-hero-single-box div[style*="background:#fff"],
html.dark-mode .pyq-mobile-hide-box,
body.dark-mode .pyq-hero-single-box div[style*="background:#fff"],
body.dark-mode .pyq-mobile-hide-box {
    background:
        linear-gradient(
            135deg,
            rgba(30, 41, 59, 0.72),
            rgba(15, 23, 42, 0.58)
        ) !important;

    border: 1px solid rgba(255, 255, 255, 0.09) !important;

    color: #e2e8f0 !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 8px 22px rgba(0, 0, 0, 0.16) !important;
}


html.dark-mode .pyq-hero-single-box div[style*="color:#1e293b"],
html.dark-mode .pyq-mobile-hide-box h3,
body.dark-mode .pyq-hero-single-box div[style*="color:#1e293b"],
body.dark-mode .pyq-mobile-hide-box h3 {
    color: #f8fafc !important;
}


html.dark-mode .pyq-mobile-hide-box ul li,
body.dark-mode .pyq-mobile-hide-box ul li {
    color: #cbd5e1 !important;
}


/* =========================================================
   SEARCH BAR - FROSTED GLASS
   ========================================================= */

html.dark-mode #pyqSearchInput,
body.dark-mode #pyqSearchInput {
    background:
        linear-gradient(
            135deg,
            rgba(30, 41, 59, 0.68),
            rgba(15, 23, 42, 0.58)
        ) !important;

    border: 1px solid rgba(255, 255, 255, 0.10) !important;

    color: #f8fafc !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 8px 24px rgba(0, 0, 0, 0.16) !important;
}


html.dark-mode #pyqSearchInput::placeholder,
body.dark-mode #pyqSearchInput::placeholder {
    color: #64748b !important;
}


/* =========================================================
   EXAM CARDS - BASE GLASS
   ========================================================= */

html.dark-mode .exam-card-item,
body.dark-mode .exam-card-item {
    background:
        linear-gradient(
            135deg,
            rgba(15, 23, 42, 0.78),
            rgba(2, 6, 23, 0.72)
        ) !important;

    border: 1px solid rgba(255, 255, 255, 0.09) !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 14px 32px rgba(0, 0, 0, 0.24) !important;
transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}


/* =========================================================
   JENPAS - GREEN / CYAN GLASS
   ========================================================= */

html.dark-mode .exam-card-item:nth-child(1),
body.dark-mode .exam-card-item:nth-child(1) {
    background:
        radial-gradient(
            circle at 18% 12%,
            rgba(34, 197, 94, 0.12),
            transparent 38%
        ),
        linear-gradient(
            135deg,
            rgba(15, 42, 36, 0.78),
            rgba(2, 15, 23, 0.74)
        ) !important;

    border-color: rgba(34, 197, 94, 0.18) !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 14px 32px rgba(0, 0, 0, 0.24),
        0 0 24px rgba(34, 197, 94, 0.06) !important;
}


/* =========================================================
   WBJEE - ORANGE GLASS
   ========================================================= */

html.dark-mode .exam-card-item:nth-child(2),
body.dark-mode .exam-card-item:nth-child(2) {
    background:
        radial-gradient(
            circle at 18% 12%,
            rgba(249, 115, 22, 0.13),
            transparent 38%
        ),
        linear-gradient(
            135deg,
            rgba(55, 35, 20, 0.78),
            rgba(15, 23, 42, 0.74)
        ) !important;

    border-color: rgba(249, 115, 22, 0.18) !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 14px 32px rgba(0, 0, 0, 0.24),
        0 0 24px rgba(249, 115, 22, 0.06) !important;
}


/* =========================================================
   NEET - BLUE GLASS
   ========================================================= */

html.dark-mode .exam-card-item:nth-child(3),
body.dark-mode .exam-card-item:nth-child(3) {
    background:
        radial-gradient(
            circle at 18% 12%,
            rgba(59, 130, 246, 0.15),
            transparent 38%
        ),
        linear-gradient(
            135deg,
            rgba(17, 37, 70, 0.78),
            rgba(2, 15, 30, 0.74)
        ) !important;

    border-color: rgba(59, 130, 246, 0.20) !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 14px 32px rgba(0, 0, 0, 0.24),
        0 0 24px rgba(59, 130, 246, 0.07) !important;
}


/* =========================================================
   JEE MAIN - PURPLE GLASS
   ========================================================= */

html.dark-mode .exam-card-item:nth-child(4),
body.dark-mode .exam-card-item:nth-child(4) {
    background:
        radial-gradient(
            circle at 18% 12%,
            rgba(139, 92, 246, 0.15),
            transparent 38%
        ),
        linear-gradient(
            135deg,
            rgba(37, 25, 67, 0.78),
            rgba(15, 12, 35, 0.74)
        ) !important;

    border-color: rgba(139, 92, 246, 0.20) !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 14px 32px rgba(0, 0, 0, 0.24),
        0 0 24px rgba(139, 92, 246, 0.07) !important;
}


/* =========================================================
   EXAM CARD TEXT
   ========================================================= */

html.dark-mode .exam-card-item h3,
body.dark-mode .exam-card-item h3 {
    color: #f8fafc !important;
}


html.dark-mode .exam-card-item p,
body.dark-mode .exam-card-item p {
    color: #94a3b8 !important;
}


/* =========================================================
   INNER STAT BOXES - GLASS
   ========================================================= */

html.dark-mode .exam-inner-box,
body.dark-mode .exam-inner-box {
    background:
        rgba(30, 41, 59, 0.52) !important;

    border: 1px solid rgba(255, 255, 255, 0.08) !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}


html.dark-mode .exam-inner-box div[style*="color:#1e293b"],
body.dark-mode .exam-inner-box div[style*="color:#1e293b"] {
    color: #f8fafc !important;
}


html.dark-mode .exam-inner-box div[style*="color:#64748b"],
body.dark-mode .exam-inner-box div[style*="color:#64748b"] {
    color: #94a3b8 !important;
}


/* =========================================================
   BOTTOM FEATURE / TRUST BAR
   ========================================================= */

html.dark-mode div[style*="background:#f8fafc"],
body.dark-mode div[style*="background:#f8fafc"] {
    background:
        linear-gradient(
            135deg,
            rgba(15, 23, 42, 0.78),
            rgba(30, 41, 59, 0.56)
        ) !important;

    border: 1px solid rgba(255, 255, 255, 0.09) !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 10px 26px rgba(0, 0, 0, 0.18) !important;
}


html.dark-mode div[style*="background:#f8fafc"] div[style*="color:#0f172a"],
body.dark-mode div[style*="background:#f8fafc"] div[style*="color:#0f172a"] {
    color: #f8fafc !important;
}


html.dark-mode div[style*="background:#f8fafc"] div[style*="color:#64748b"],
body.dark-mode div[style*="background:#f8fafc"] div[style*="color:#64748b"] {
    color: #94a3b8 !important;
}


/* =========================================================
   SUBTLE HOVER - GLASS DEPTH
   ========================================================= */

html.dark-mode .exam-card-item:hover,
body.dark-mode .exam-card-item:hover {
    transform: translateY(-2px);
}

html.dark-mode .exam-card-item:nth-child(1):hover,
body.dark-mode .exam-card-item:nth-child(1):hover {
    border-color: rgba(34, 197, 94, 0.30) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 18px 38px rgba(0, 0, 0, 0.28),
        0 0 28px rgba(34, 197, 94, 0.09) !important;
}

html.dark-mode .exam-card-item:nth-child(2):hover,
body.dark-mode .exam-card-item:nth-child(2):hover {
    border-color: rgba(249, 115, 22, 0.30) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 18px 38px rgba(0, 0, 0, 0.28),
        0 0 28px rgba(249, 115, 22, 0.09) !important;
}

html.dark-mode .exam-card-item:nth-child(3):hover,
body.dark-mode .exam-card-item:nth-child(3):hover {
    border-color: rgba(59, 130, 246, 0.32) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 18px 38px rgba(0, 0, 0, 0.28),
        0 0 28px rgba(59, 130, 246, 0.10) !important;
}

html.dark-mode .exam-card-item:nth-child(4):hover,
body.dark-mode .exam-card-item:nth-child(4):hover {
    border-color: rgba(139, 92, 246, 0.32) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 18px 38px rgba(0, 0, 0, 0.28),
        0 0 28px rgba(139, 92, 246, 0.10) !important;
}


/* =========================================================
   PYQ QUESTION PAPER - SAME FROSTED GLASS LANGUAGE
   ========================================================= */

html.dark-mode .pyq-print-wrap .print-page,
body.dark-mode .pyq-print-wrap .print-page {
    background:
        linear-gradient(
            135deg,
            rgba(15,23,42,0.92),
            rgba(2,6,23,0.88)
        ) !important;
    color: #e2e8f0 !important;
    border: 1px solid rgba(255,255,255,0.09) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.04),
        0 18px 45px rgba(0,0,0,0.28) !important;
}

html.dark-mode .pyq-print-wrap .print-content,
body.dark-mode .pyq-print-wrap .print-content {
    background: transparent !important;
    color: #e2e8f0 !important;
}

html.dark-mode .paper-header,
body.dark-mode .paper-header {
    border-bottom-color: rgba(255,255,255,0.14) !important;
}

html.dark-mode .paper-title,
html.dark-mode .paper-brand,
body.dark-mode .paper-title,
body.dark-mode .paper-brand {
    color: #f8fafc !important;
}

html.dark-mode .paper-subject,
body.dark-mode .paper-subject {
    color: #94a3b8 !important;
}

html.dark-mode .paper-set,
body.dark-mode .paper-set {
    background: rgba(30,41,59,0.90) !important;
    color: #cbd5e1 !important;
    border-color: rgba(255,255,255,0.10) !important;
}

html.dark-mode .paper-meta-table td,
body.dark-mode .paper-meta-table td {
    background: rgba(15,23,42,0.90) !important;
    color: #e2e8f0 !important;
    border-color: rgba(255,255,255,0.09) !important;
}

html.dark-mode .paper-instructions,
body.dark-mode .paper-instructions {
    background:
        linear-gradient(
            135deg,
            rgba(30,41,59,0.58),
            rgba(15,23,42,0.88)
        ) !important;
    color: #cbd5e1 !important;
    border-color: rgba(255,255,255,0.09) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04) !important;
}


/* Question cards */
html.dark-mode .question-box,
body.dark-mode .question-box {
    background:
        linear-gradient(
            135deg,
            rgba(17,24,39,0.94),
            rgba(15,23,42,0.90)
        ) !important;
    color: #e2e8f0 !important;
    border-color: rgba(139,92,246,0.20) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.04),
        0 10px 28px rgba(0,0,0,0.20) !important;
}

html.dark-mode .q-text,
html.dark-mode .q-text *,
body.dark-mode .q-text,
body.dark-mode .q-text * {
    color: #f1f5f9 !important;
}


/* Options */
html.dark-mode .option,
body.dark-mode .option {
    background:
        linear-gradient(
            135deg,
            rgba(30,41,59,0.90),
            rgba(15,23,42,0.86)
        ) !important;
    color: #e2e8f0 !important;
    border-color: rgba(255,255,255,0.09) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.035) !important;
}

html.dark-mode .option:hover,
body.dark-mode .option:hover {
    background:
        linear-gradient(
            135deg,
            rgba(51,65,85,0.76),
            rgba(30,41,59,0.60)
        ) !important;
    border-color: rgba(255,255,255,0.17) !important;
}

html.dark-mode .opt-indicator,
body.dark-mode .opt-indicator {
    background: rgba(15,23,42,0.72) !important;
    color: #cbd5e1 !important;
    border-color: rgba(255,255,255,0.14) !important;
}

html.dark-mode .option.selected,
body.dark-mode .option.selected {
    background:
        linear-gradient(
            135deg,
            rgba(139,92,246,0.20),
            rgba(91,33,182,0.10)
        ) !important;
    border-color: rgba(167,139,250,0.42) !important;
}

html.dark-mode .option.correct,
body.dark-mode .option.correct {
    background:
        linear-gradient(
            135deg,
            rgba(34,197,94,0.14),
            rgba(6,78,59,0.10)
        ) !important;
    border-color: rgba(34,197,94,0.32) !important;
}

html.dark-mode .option.wrong,
body.dark-mode .option.wrong {
    background:
        linear-gradient(
            135deg,
            rgba(239,68,68,0.14),
            rgba(127,29,29,0.10)
        ) !important;
    border-color: rgba(248,113,113,0.32) !important;
}


/* Solution */
html.dark-mode .solution-content.open,
body.dark-mode .solution-content.open {
    background:
        linear-gradient(
            135deg,
            rgba(34,197,94,0.11),
            rgba(15,23,42,0.88)
        ) !important;
    color: #d1fae5 !important;
    border-color: rgba(34,197,94,0.25) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.03) !important;
}


/* Numerical input */
html.dark-mode .numerical-input,
body.dark-mode .numerical-input {
    background: rgba(15,23,42,0.92) !important;
    color: #f8fafc !important;
    border-color: rgba(255,255,255,0.12) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.03) !important;
}


/* Buttons inside PYQ */
html.dark-mode .view-solution-btn,
html.dark-mode .check-numerical-btn,
html.dark-mode .check-msq-btn,
body.dark-mode .view-solution-btn,
body.dark-mode .check-numerical-btn,
body.dark-mode .check-msq-btn {
    background:
        linear-gradient(
            135deg,
            rgba(30,41,59,0.70),
            rgba(15,23,42,0.50)
        ) !important;
    color: #e2e8f0 !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.06),
        0 6px 18px rgba(0,0,0,0.18) !important;
}

html.dark-mode .view-solution-btn:hover,
html.dark-mode .check-numerical-btn:hover,
html.dark-mode .check-msq-btn:hover,
body.dark-mode .view-solution-btn:hover,
body.dark-mode .check-numerical-btn:hover,
body.dark-mode .check-msq-btn:hover {
    background:
        linear-gradient(
            135deg,
            rgba(51,65,85,0.78),
            rgba(30,41,59,0.60)
        ) !important;
    border-color: rgba(255,255,255,0.18) !important;
}


/* Answer box */
html.dark-mode .answer-box,
body.dark-mode .answer-box {
    background:
        linear-gradient(
            135deg,
            rgba(15,23,42,0.78),
            rgba(30,41,59,0.86)
        ) !important;
    color: #e2e8f0 !important;
    border-color: rgba(255,255,255,0.09) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.04),
        0 10px 26px rgba(0,0,0,0.18) !important;
}

html.dark-mode .answer-chip,
body.dark-mode .answer-chip {
    background: rgba(30,41,59,0.90) !important;
    color: #cbd5e1 !important;
    border-color: rgba(255,255,255,0.09) !important;
}


/* Chapter table */
html.dark-mode .chapter-weightage-table th,
html.dark-mode .chapter-weightage-table td,
body.dark-mode .chapter-weightage-table th,
body.dark-mode .chapter-weightage-table td {
    background: rgba(15,23,42,0.90) !important;
    color: #e2e8f0 !important;
    border-color: rgba(255,255,255,0.09) !important;
}


/* =========================================================
   PDF / PRINT - ALWAYS BRIGHT
   ========================================================= */

@media print {

    html,
    html.dark-mode,
    body,
    body.dark-mode {
        background: #fff !important;
        color: #000 !important;
        color-scheme: light !important;
    }

    html.dark-mode .pyq-print-wrap,
    body.dark-mode .pyq-print-wrap,
    html.dark-mode .pyq-print-wrap .print-page,
    body.dark-mode .pyq-print-wrap .print-page,
    html.dark-mode .pyq-print-wrap .print-content,
    body.dark-mode .pyq-print-wrap .print-content {
        background: #fff !important;
        color: #000 !important;
        box-shadow: none !important;
    }

    html.dark-mode .paper-header,
    html.dark-mode .paper-meta-table td,
    html.dark-mode .paper-instructions,
    html.dark-mode .question-box,
    html.dark-mode .option,
    html.dark-mode .answer-box,
    html.dark-mode .chapter-weightage-table th,
    html.dark-mode .chapter-weightage-table td,
    body.dark-mode .paper-header,
    body.dark-mode .paper-meta-table td,
    body.dark-mode .paper-instructions,
    body.dark-mode .question-box,
    body.dark-mode .option,
    body.dark-mode .answer-box,
    body.dark-mode .chapter-weightage-table th,
    body.dark-mode .chapter-weightage-table td {
        background: #fff !important;
        color: #111827 !important;
        border-color: #d1d5db !important;
        box-shadow: none !important;
    }

    html.dark-mode .q-text,
    html.dark-mode .q-text *,
    html.dark-mode .opt-content,
    html.dark-mode .opt-content *,
    html.dark-mode .katex,
    html.dark-mode .katex *,
    body.dark-mode .q-text,
    body.dark-mode .q-text *,
    body.dark-mode .opt-content,
    body.dark-mode .opt-content *,
    body.dark-mode .katex,
    body.dark-mode .katex * {
        color: #111827 !important;
    }

    html.dark-mode .solution-content.open,
    body.dark-mode .solution-content.open {
        background: #f0fdf4 !important;
        color: #166534 !important;
        border-color: #bbf7d0 !important;
    }

    html.dark-mode .view-solution-btn,
    html.dark-mode .check-numerical-btn,
    html.dark-mode .check-msq-btn,
    body.dark-mode .view-solution-btn,
    body.dark-mode .check-numerical-btn,
    body.dark-mode .check-msq-btn {
        display: none !important;
    }
}


/* =========================================================
   INTRODUCTION & INSTRUCTIONS TEXT BRIGHTNESS FIX
   ========================================================= */

html.dark-mode .paper-instructions,
html.dark-mode .paper-instructions *,
html.dark-mode .paper-instructions-title,
body.dark-mode .paper-instructions,
body.dark-mode .paper-instructions *,
body.dark-mode .paper-instructions-title {
    color: #f8fafc !important;
    opacity: 1 !important;
}


/* =========================================================
   QUESTION IMAGES — DARK MODE
   ---------------------------------------------------------
   Keep transparent PNG line-art visible in dark mode.
   Black line-art becomes white while the PNG background
   remains transparent.
   ========================================================= */

html.dark-mode .question-image,
html.dark-mode .opt-content img,
body.dark-mode .question-image,
body.dark-mode .opt-content img {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    filter: invert(1) hue-rotate(180deg) brightness(1.35) !important;
    opacity: 1 !important;
}

/* =========================================================
   PYQ PERFORMANCE OPTIMIZATION
   Visual design preserved — expensive glass blur removed.
   ========================================================= */

/* Keep the browser from creating unnecessary compositing work. */
html.dark-mode .pyq-hero-single-box,
body.dark-mode .pyq-hero-single-box,
html.dark-mode .exam-card-item,
body.dark-mode .exam-card-item,
html.dark-mode .question-box,
body.dark-mode .question-box {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Respect users/devices that request reduced motion. */
@media (prefers-reduced-motion: reduce) {
    html.dark-mode .exam-card-item,
    body.dark-mode .exam-card-item,
    html.dark-mode .option,
    body.dark-mode .option {
        transition: none !important;
    }
}










































/* =========================================
   SUBJECT CARD WITH MODE BUTTONS
========================================= */

.physics-subject-card {
    cursor: default;
}

.sp-folder-actions {
    display: flex;
    gap: 12px;
    margin-top: 18px;
}

.sp-mode-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 10px 18px;
    min-width: 120px;

    border-radius: 10px;

    text-decoration: none !important;
    font-size: 14px;
    font-weight: 600;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}

.sp-topic-btn {
    background: #2563eb;
    color: #fff !important;
}

.sp-full-btn {
    background: #7c3aed;
    color: #fff !important;
}

.sp-mode-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.18);
}

/* Mobile */
@media (max-width: 600px) {

    .sp-folder-actions {
        gap: 8px;
    }

    .sp-mode-btn {
        flex: 1;
        min-width: 0;
        padding: 10px 8px;
        font-size: 13px;
    }

}





















/* =========================================================
   FULL LENGTH / PAPER GRID
   Modern Card Design
========================================================= */

.sp-paper-grid {
    width: min(1150px, calc(100% - 40px));
    margin: 24px auto 50px;

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;

    box-sizing: border-box;
}


/* =========================================================
   PAPER CARD
========================================================= */

.sp-paper-card {
    --paper-accent: #2563eb;

    position: relative;

    min-height: 145px;

    padding: 30px 40px 25px;

    border-radius: 18px;

    border: 1px solid rgba(148, 163, 184, 0.22);

    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #f8fafc 100%
        );

    text-decoration: none !important;

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

    text-align: center;

    overflow: hidden;

    box-sizing: border-box;

    box-shadow:
        0 7px 20px rgba(15, 23, 42, 0.06);

    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        border-color 0.22s ease;
}


/* =========================================================
   TOP ACCENT LINE
========================================================= */

.sp-paper-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 4px;

    background: var(--paper-accent);

    opacity: 0.9;
}


/* =========================================================
   SMALL CIRCLE / ICON
========================================================= */

.sp-paper-card::after {
    content: "▣";

    position: absolute;

    top: 15px;
    left: 16px;

    width: 27px;
    height: 27px;

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

    border-radius: 9px;

    color: var(--paper-accent);

    background: rgba(255, 255, 255, 0.85);

    border: 1px solid rgba(148, 163, 184, 0.18);

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


/* =========================================================
   HOVER
========================================================= */

.sp-paper-card:hover {

    transform: translateY(-5px);

    border-color: var(--paper-accent);

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

    text-decoration: none !important;
}


/* =========================================================
   TITLE
========================================================= */

.sp-paper-title {

    margin-top: 4px;
    margin-bottom: 7px;

    color: #0f172a;

    font-size: 18px;
    line-height: 1.35;

    font-weight: 800;

    letter-spacing: -0.2px;
}


/* =========================================================
   SUBTITLE
========================================================= */

.sp-paper-subtitle {

    color: #64748b;

    font-size: 13px;
    line-height: 1.5;

    font-weight: 500;
}


/* =========================================================
   YEAR / PAPER NUMBER LOOK
========================================================= */

.sp-paper-title::after {

    content: "";

    display: block;

    width: 28px;
    height: 3px;

    margin: 8px auto 0;

    border-radius: 10px;

    background: var(--paper-accent);
}


/* =========================================================
   10 AUTOMATIC COLOURS
   No subject/year names are used.
========================================================= */

.sp-paper-card:nth-child(10n + 1) {
    --paper-accent: #2563eb;
    background: linear-gradient(145deg, #ffffff, #eff6ff);
}

.sp-paper-card:nth-child(10n + 2) {
    --paper-accent: #16a34a;
    background: linear-gradient(145deg, #ffffff, #f0fdf4);
}

.sp-paper-card:nth-child(10n + 3) {
    --paper-accent: #7c3aed;
    background: linear-gradient(145deg, #ffffff, #f5f3ff);
}

.sp-paper-card:nth-child(10n + 4) {
    --paper-accent: #f97316;
    background: linear-gradient(145deg, #ffffff, #fff7ed);
}

.sp-paper-card:nth-child(10n + 5) {
    --paper-accent: #ec4899;
    background: linear-gradient(145deg, #ffffff, #fdf2f8);
}

.sp-paper-card:nth-child(10n + 6) {
    --paper-accent: #0891b2;
    background: linear-gradient(145deg, #ffffff, #ecfeff);
}

.sp-paper-card:nth-child(10n + 7) {
    --paper-accent: #ca8a04;
    background: linear-gradient(145deg, #ffffff, #fefce8);
}

.sp-paper-card:nth-child(10n + 8) {
    --paper-accent: #4f46e5;
    background: linear-gradient(145deg, #ffffff, #eef2ff);
}

.sp-paper-card:nth-child(10n + 9) {
    --paper-accent: #059669;
    background: linear-gradient(145deg, #ffffff, #ecfdf5);
}

.sp-paper-card:nth-child(10n) {
    --paper-accent: #e11d48;
    background: linear-gradient(145deg, #ffffff, #fff1f2);
}


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

html.dark-mode .sp-paper-card,
body.dark-mode .sp-paper-card,
html.dark .sp-paper-card,
body.dark .sp-paper-card {

    background: #111827;

    border-color: rgba(148, 163, 184, 0.20);

    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.25);
}


html.dark-mode .sp-paper-title,
body.dark-mode .sp-paper-title,
html.dark .sp-paper-title,
body.dark .sp-paper-title {

    color: #f8fafc;
}


html.dark-mode .sp-paper-subtitle,
body.dark-mode .sp-paper-subtitle,
html.dark .sp-paper-subtitle,
body.dark .sp-paper-subtitle {

    color: #94a3b8;
}


html.dark-mode .sp-paper-card::after,
body.dark-mode .sp-paper-card::after,
html.dark .sp-paper-card::after,
body.dark .sp-paper-card::after {

    background: rgba(30, 41, 59, 0.85);

    border-color: rgba(148, 163, 184, 0.18);
}


/* =========================================================
   DARK MODE - SOFT COLOURED BACKGROUND
========================================================= */

html.dark-mode .sp-paper-card:nth-child(10n + 1),
body.dark-mode .sp-paper-card:nth-child(10n + 1),
html.dark .sp-paper-card:nth-child(10n + 1),
body.dark .sp-paper-card:nth-child(10n + 1) {
    background: linear-gradient(145deg, #111827, #172554);
}

html.dark-mode .sp-paper-card:nth-child(10n + 2),
body.dark-mode .sp-paper-card:nth-child(10n + 2),
html.dark .sp-paper-card:nth-child(10n + 2),
body.dark .sp-paper-card:nth-child(10n + 2) {
    background: linear-gradient(145deg, #111827, #052e16);
}

html.dark-mode .sp-paper-card:nth-child(10n + 3),
body.dark-mode .sp-paper-card:nth-child(10n + 3),
html.dark .sp-paper-card:nth-child(10n + 3),
body.dark .sp-paper-card:nth-child(10n + 3) {
    background: linear-gradient(145deg, #111827, #2e1065);
}

html.dark-mode .sp-paper-card:nth-child(10n + 4),
body.dark-mode .sp-paper-card:nth-child(10n + 4),
html.dark .sp-paper-card:nth-child(10n + 4),
body.dark .sp-paper-card:nth-child(10n + 4) {
    background: linear-gradient(145deg, #111827, #431407);
}

html.dark-mode .sp-paper-card:nth-child(10n + 5),
body.dark-mode .sp-paper-card:nth-child(10n + 5),
html.dark .sp-paper-card:nth-child(10n + 5),
body.dark .sp-paper-card:nth-child(10n + 5) {
    background: linear-gradient(145deg, #111827, #500724);
}

html.dark-mode .sp-paper-card:nth-child(10n + 6),
body.dark-mode .sp-paper-card:nth-child(10n + 6),
html.dark .sp-paper-card:nth-child(10n + 6),
body.dark .sp-paper-card:nth-child(10n + 6) {
    background: linear-gradient(145deg, #111827, #083344);
}

html.dark-mode .sp-paper-card:nth-child(10n + 7),
body.dark-mode .sp-paper-card:nth-child(10n + 7),
html.dark .sp-paper-card:nth-child(10n + 7),
body.dark .sp-paper-card:nth-child(10n + 7) {
    background: linear-gradient(145deg, #111827, #422006);
}

html.dark-mode .sp-paper-card:nth-child(10n + 8),
body.dark-mode .sp-paper-card:nth-child(10n + 8),
html.dark .sp-paper-card:nth-child(10n + 8),
body.dark .sp-paper-card:nth-child(10n + 8) {
    background: linear-gradient(145deg, #111827, #1e1b4b);
}

html.dark-mode .sp-paper-card:nth-child(10n + 9),
body.dark-mode .sp-paper-card:nth-child(10n + 9),
html.dark .sp-paper-card:nth-child(10n + 9),
body.dark .sp-paper-card:nth-child(10n + 9) {
    background: linear-gradient(145deg, #111827, #022c22);
}

html.dark-mode .sp-paper-card:nth-child(10n),
body.dark-mode .sp-paper-card:nth-child(10n),
html.dark .sp-paper-card:nth-child(10n),
body.dark .sp-paper-card:nth-child(10n) {
    background: linear-gradient(145deg, #111827, #4c0519);
}


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

@media (max-width: 850px) {

    .sp-paper-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 15px;
    }

}


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

@media (max-width: 560px) {

    .sp-paper-grid {

        width: calc(100% - 20px);

        grid-template-columns: 1fr;

        gap: 12px;

        margin-top: 18px;
    }


    .sp-paper-card {

        min-height: 125px;

        padding: 28px 25px 22px;

        border-radius: 16px;
    }


    .sp-paper-card::after {

        top: 13px;
        left: 13px;

        width: 25px;
        height: 25px;
    }


    .sp-paper-title {

        font-size: 16px;
    }


    .sp-paper-subtitle {

        font-size: 12px;
    }

}





































/* =========================================================
   COMMON PYQ GRID
   ---------------------------------------------------------
   Used by:
   - Full Length
   - Topic Wise
   ========================================================= */

.sp-pyq-grid {

    display: grid;

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

    gap: 18px;

    width: 100%;

    margin: 25px 0 35px;

    box-sizing: border-box;
}


/* =========================================================
   COMMON PYQ CARD
   ========================================================= */

.sp-pyq-card {

    position: relative;

    display: block;

    width: 100%;

    min-height: 145px;

    padding: 30px 40px 25px;

    box-sizing: border-box;

    border-radius: 16px;

    border: 1px solid #dbe4ef;

    border-top: 4px solid #2563eb;

    background:
        linear-gradient(
            135deg,
            #f8fbff 0%,
            #eef5ff 100%
        );

    text-decoration: none !important;

    overflow: hidden;

    transition:
        transform 0.20s ease,
        box-shadow 0.20s ease,
        border-color 0.20s ease;
}


/* =========================================================
   ALTERNATING CARD ACCENT
   ========================================================= */

.sp-pyq-card:nth-child(2n) {

    border-top-color: #16a34a;

    background:
        linear-gradient(
            135deg,
            #fbfffc 0%,
            #eefbf3 100%
        );
}


.sp-pyq-card:nth-child(3n) {

    border-top-color: #7c3aed;

    background:
        linear-gradient(
            135deg,
            #fcfaff 0%,
            #f3efff 100%
        );
}


.sp-pyq-card:nth-child(4n) {

    border-top-color: #f97316;

    background:
        linear-gradient(
            135deg,
            #fffaf5 0%,
            #fff3e8 100%
        );
}


.sp-pyq-card:nth-child(5n) {

    border-top-color: #ec4899;

    background:
        linear-gradient(
            135deg,
            #fff9fc 0%,
            #fff0f7 100%
        );
}


.sp-pyq-card:nth-child(6n) {

    border-top-color: #0891b2;

    background:
        linear-gradient(
            135deg,
            #f5fdff 0%,
            #eafaff 100%
        );
}


/* =========================================================
   HOVER
   ========================================================= */

.sp-pyq-card:hover {

    transform: translateY(-3px);

    box-shadow:
        0 10px 25px rgba(15, 23, 42, 0.10);

    text-decoration: none !important;
}


/* =========================================================
   SMALL ICON
   ========================================================= */

.sp-pyq-icon {

    position: absolute;

    top: 15px;

    left: 18px;

    width: 30px;

    height: 30px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid #dbe4ef;

    border-radius: 9px;

    background: rgba(255,255,255,0.75);

    font-size: 13px;

    color: #2563eb;

    box-sizing: border-box;
}


/* Same accent as card */

.sp-pyq-card:nth-child(2n) .sp-pyq-icon {
    color: #16a34a;
}

.sp-pyq-card:nth-child(3n) .sp-pyq-icon {
    color: #7c3aed;
}

.sp-pyq-card:nth-child(4n) .sp-pyq-icon {
    color: #f97316;
}

.sp-pyq-card:nth-child(5n) .sp-pyq-icon {
    color: #ec4899;
}

.sp-pyq-card:nth-child(6n) .sp-pyq-icon {
    color: #0891b2;
}


/* =========================================================
   CARD CONTENT
   ========================================================= */

.sp-pyq-content {

    width: 100%;

    text-align: center;
}


/* =========================================================
   CARD TITLE
   ========================================================= */

.sp-pyq-title {

    display: block;

    margin: 0;

    font-size: 18px;

    line-height: 1.35;

    font-weight: 800;

    color: #111827 !important;

    text-decoration: none !important;
}


/* =========================================================
   ACCENT LINE
   ========================================================= */

.sp-pyq-line {

    width: 34px;

    height: 3px;

    margin: 12px auto 10px;

    border-radius: 10px;

    background: #2563eb;
}


.sp-pyq-card:nth-child(2n) .sp-pyq-line {
    background: #16a34a;
}

.sp-pyq-card:nth-child(3n) .sp-pyq-line {
    background: #7c3aed;
}

.sp-pyq-card:nth-child(4n) .sp-pyq-line {
    background: #f97316;
}

.sp-pyq-card:nth-child(5n) .sp-pyq-line {
    background: #ec4899;
}

.sp-pyq-card:nth-child(6n) .sp-pyq-line {
    background: #0891b2;
}


/* =========================================================
   CARD SUBTITLE
   ========================================================= */

.sp-pyq-subtitle {

    display: block;

    margin: 0;

    font-size: 13px;

    line-height: 1.5;

    font-weight: 500;

    color: #526b88 !important;

    text-decoration: none !important;
}


/* =========================================================
   REMOVE WORDPRESS / THEME LINK EFFECT
   ========================================================= */

.sp-pyq-card,
.sp-pyq-card:hover,
.sp-pyq-card:focus,
.sp-pyq-card:active,
.sp-pyq-card:visited {

    text-decoration: none !important;
}


.sp-pyq-card:hover .sp-pyq-title,
.sp-pyq-card:focus .sp-pyq-title,
.sp-pyq-card:active .sp-pyq-title {

    color: #111827 !important;
}


.sp-pyq-card:hover .sp-pyq-subtitle,
.sp-pyq-card:focus .sp-pyq-subtitle,
.sp-pyq-card:active .sp-pyq-subtitle {

    color: #526b88 !important;
}


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

html.dark-mode .sp-pyq-card,
body.dark-mode .sp-pyq-card,
html.dark .sp-pyq-card,
body.dark .sp-pyq-card {

    background:
        linear-gradient(
            135deg,
            #111827 0%,
            #172033 100%
        );

    border-color: #263247;
}


/* Alternating dark backgrounds */

html.dark-mode .sp-pyq-card:nth-child(2n),
body.dark-mode .sp-pyq-card:nth-child(2n),
html.dark .sp-pyq-card:nth-child(2n),
body.dark .sp-pyq-card:nth-child(2n) {

    background:
        linear-gradient(
            135deg,
            #0f2520 0%,
            #102d25 100%
        );
}


html.dark-mode .sp-pyq-card:nth-child(3n),
body.dark-mode .sp-pyq-card:nth-child(3n),
html.dark .sp-pyq-card:nth-child(3n),
body.dark .sp-pyq-card:nth-child(3n) {

    background:
        linear-gradient(
            135deg,
            #19152b 0%,
            #211b38 100%
        );
}


html.dark-mode .sp-pyq-card:nth-child(4n),
body.dark-mode .sp-pyq-card:nth-child(4n),
html.dark .sp-pyq-card:nth-child(4n),
body.dark .sp-pyq-card:nth-child(4n) {

    background:
        linear-gradient(
            135deg,
            #281b12 0%,
            #322116 100%
        );
}


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

html.dark-mode .sp-pyq-title,
body.dark-mode .sp-pyq-title,
html.dark .sp-pyq-title,
body.dark .sp-pyq-title {

    color: #f8fafc !important;
}


html.dark-mode .sp-pyq-subtitle,
body.dark-mode .sp-pyq-subtitle,
html.dark .sp-pyq-subtitle,
body.dark .sp-pyq-subtitle {

    color: #94a3b8 !important;
}


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

html.dark-mode .sp-pyq-icon,
body.dark-mode .sp-pyq-icon,
html.dark .sp-pyq-icon,
body.dark .sp-pyq-icon {

    background: rgba(17,24,39,0.75);

    border-color: #334155;
}


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

html.dark-mode .sp-pyq-card:hover,
body.dark-mode .sp-pyq-card:hover,
html.dark .sp-pyq-card:hover,
body.dark .sp-pyq-card:hover {

    box-shadow:
        0 10px 25px rgba(0,0,0,0.30);
}


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

@media (max-width: 700px) {

    .sp-pyq-grid {

        grid-template-columns: 1fr;

        gap: 14px;

        margin-top: 20px;
    }


    .sp-pyq-card {

        min-height: 125px;

        padding: 28px 25px 22px;

        border-radius: 14px;
    }


    .sp-pyq-title {

        font-size: 16px;
    }


    .sp-pyq-subtitle {

        font-size: 12px;
    }
}


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

@media (max-width: 380px) {

    .sp-pyq-card {

        padding: 26px 18px 20px;
    }


    .sp-pyq-title {

        font-size: 15px;
    }


    .sp-pyq-subtitle {

        font-size: 11px;
    }
}






































/* =========================================================
   SHARED PYQ NAVIGATION CARDS
   ---------------------------------------------------------
   Topic-wise and Full-length navigation use the same visual
   system. The main exam-selection grid (#examCardsGrid) is
   intentionally excluded so its existing layout is untouched.
========================================================= */

.sp-folder-grid:not(#examCardsGrid) {
    width: min(1150px, calc(100% - 40px));
    margin: 24px auto 50px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    box-sizing: border-box;
}

.sp-folder-card {
    --paper-accent: #2563eb;

    position: relative;
    min-height: 145px;
    padding: 30px 40px 25px;
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    color: #0f172a !important;
    text-decoration: none !important;

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

    overflow: hidden;
    box-sizing: border-box;
    box-shadow: 0 7px 20px rgba(15, 23, 42, 0.06);

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease;
}

.sp-folder-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--paper-accent);
    opacity: .9;
}

.sp-folder-card::after {
    content: "▣";
    position: absolute;
    top: 15px;
    left: 16px;
    width: 27px;
    height: 27px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    color: var(--paper-accent);
    background: rgba(255, 255, 255, .85);
    border: 1px solid rgba(148, 163, 184, .18);
    font-size: 12px;
    font-weight: 800;
}

.sp-folder-card:hover,
.sp-folder-card:focus,
.sp-folder-card:active {
    transform: translateY(-5px);
    border-color: var(--paper-accent);
    box-shadow: 0 14px 32px rgba(15, 23, 42, .12);
    color: #0f172a !important;
    text-decoration: none !important;
}

.sp-folder-title {
    margin: 4px 0 7px;
    color: #0f172a !important;
    font-size: 18px;
    line-height: 1.35;
    font-weight: 800;
    letter-spacing: -.2px;
}

.sp-folder-title::after {
    content: "";
    display: block;
    width: 28px;
    height: 3px;
    margin: 8px auto 0;
    border-radius: 10px;
    background: var(--paper-accent);
}

.sp-folder-subtitle {
    color: #64748b !important;
    font-size: 13px;
    line-height: 1.5;
    font-weight: 500;
}

.sp-folder-card:nth-child(10n + 1) {
    --paper-accent: #2563eb;
    background: linear-gradient(145deg, #ffffff, #eff6ff);
}
.sp-folder-card:nth-child(10n + 2) {
    --paper-accent: #16a34a;
    background: linear-gradient(145deg, #ffffff, #f0fdf4);
}
.sp-folder-card:nth-child(10n + 3) {
    --paper-accent: #7c3aed;
    background: linear-gradient(145deg, #ffffff, #f5f3ff);
}
.sp-folder-card:nth-child(10n + 4) {
    --paper-accent: #f97316;
    background: linear-gradient(145deg, #ffffff, #fff7ed);
}
.sp-folder-card:nth-child(10n + 5) {
    --paper-accent: #ec4899;
    background: linear-gradient(145deg, #ffffff, #fdf2f8);
}
.sp-folder-card:nth-child(10n + 6) {
    --paper-accent: #0891b2;
    background: linear-gradient(145deg, #ffffff, #ecfeff);
}
.sp-folder-card:nth-child(10n + 7) {
    --paper-accent: #ca8a04;
    background: linear-gradient(145deg, #ffffff, #fefce8);
}
.sp-folder-card:nth-child(10n + 8) {
    --paper-accent: #4f46e5;
    background: linear-gradient(145deg, #ffffff, #eef2ff);
}
.sp-folder-card:nth-child(10n + 9) {
    --paper-accent: #059669;
    background: linear-gradient(145deg, #ffffff, #ecfdf5);
}
.sp-folder-card:nth-child(10n) {
    --paper-accent: #e11d48;
    background: linear-gradient(145deg, #ffffff, #fff1f2);
}

html.dark-mode .sp-folder-card,
body.dark-mode .sp-folder-card,
html.dark .sp-folder-card,
body.dark .sp-folder-card {
    background: linear-gradient(145deg, #111827, #172033);
    border-color: rgba(148, 163, 184, .20);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .25);
    color: #f8fafc !important;
}

html.dark-mode .sp-folder-title,
body.dark-mode .sp-folder-title,
html.dark .sp-folder-title,
body.dark .sp-folder-title {
    color: #f8fafc !important;
}

html.dark-mode .sp-folder-subtitle,
body.dark-mode .sp-folder-subtitle,
html.dark .sp-folder-subtitle,
body.dark .sp-folder-subtitle {
    color: #94a3b8 !important;
}

html.dark-mode .sp-folder-card::after,
body.dark-mode .sp-folder-card::after,
html.dark .sp-folder-card::after,
body.dark .sp-folder-card::after {
    background: rgba(30, 41, 59, .85);
    border-color: rgba(148, 163, 184, .18);
}

html.dark-mode .sp-folder-card:nth-child(10n + 1),
body.dark-mode .sp-folder-card:nth-child(10n + 1),
html.dark .sp-folder-card:nth-child(10n + 1),
body.dark .sp-folder-card:nth-child(10n + 1) {
    background: linear-gradient(145deg, #111827, #172554);
}
html.dark-mode .sp-folder-card:nth-child(10n + 2),
body.dark-mode .sp-folder-card:nth-child(10n + 2),
html.dark .sp-folder-card:nth-child(10n + 2),
body.dark .sp-folder-card:nth-child(10n + 2) {
    background: linear-gradient(145deg, #111827, #052e16);
}
html.dark-mode .sp-folder-card:nth-child(10n + 3),
body.dark-mode .sp-folder-card:nth-child(10n + 3),
html.dark .sp-folder-card:nth-child(10n + 3),
body.dark .sp-folder-card:nth-child(10n + 3) {
    background: linear-gradient(145deg, #111827, #2e1065);
}
html.dark-mode .sp-folder-card:nth-child(10n + 4),
body.dark-mode .sp-folder-card:nth-child(10n + 4),
html.dark .sp-folder-card:nth-child(10n + 4),
body.dark .sp-folder-card:nth-child(10n + 4) {
    background: linear-gradient(145deg, #111827, #431407);
}
html.dark-mode .sp-folder-card:nth-child(10n + 5),
body.dark-mode .sp-folder-card:nth-child(10n + 5),
html.dark .sp-folder-card:nth-child(10n + 5),
body.dark .sp-folder-card:nth-child(10n + 5) {
    background: linear-gradient(145deg, #111827, #500724);
}
html.dark-mode .sp-folder-card:nth-child(10n + 6),
body.dark-mode .sp-folder-card:nth-child(10n + 6),
html.dark .sp-folder-card:nth-child(10n + 6),
body.dark .sp-folder-card:nth-child(10n + 6) {
    background: linear-gradient(145deg, #111827, #083344);
}
html.dark-mode .sp-folder-card:nth-child(10n + 7),
body.dark-mode .sp-folder-card:nth-child(10n + 7),
html.dark .sp-folder-card:nth-child(10n + 7),
body.dark .sp-folder-card:nth-child(10n + 7) {
    background: linear-gradient(145deg, #111827, #422006);
}
html.dark-mode .sp-folder-card:nth-child(10n + 8),
body.dark-mode .sp-folder-card:nth-child(10n + 8),
html.dark .sp-folder-card:nth-child(10n + 8),
body.dark .sp-folder-card:nth-child(10n + 8) {
    background: linear-gradient(145deg, #111827, #1e1b4b);
}
html.dark-mode .sp-folder-card:nth-child(10n + 9),
body.dark-mode .sp-folder-card:nth-child(10n + 9),
html.dark .sp-folder-card:nth-child(10n + 9),
body.dark .sp-folder-card:nth-child(10n + 9) {
    background: linear-gradient(145deg, #111827, #022c22);
}
html.dark-mode .sp-folder-card:nth-child(10n),
body.dark-mode .sp-folder-card:nth-child(10n),
html.dark .sp-folder-card:nth-child(10n),
body.dark .sp-folder-card:nth-child(10n) {
    background: linear-gradient(145deg, #111827, #4c0519);
}

@media (max-width: 850px) {
    .sp-folder-grid:not(#examCardsGrid) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 15px;
    }
}

@media (max-width: 560px) {
    .sp-folder-grid:not(#examCardsGrid) {
        width: calc(100% - 20px);
        grid-template-columns: 1fr;
        gap: 12px;
        margin-top: 18px;
    }

    .sp-folder-card {
        min-height: 125px;
        padding: 28px 25px 22px;
        border-radius: 16px;
    }

    .sp-folder-card::after {
        top: 13px;
        left: 13px;
        width: 25px;
        height: 25px;
    }

    .sp-folder-title {
        font-size: 16px;
    }

    .sp-folder-subtitle {
        font-size: 12px;
    }
}