/* ----- inherit theme from provided root (with dark support) ----- */
    :root {
      --primary-blue: #4361ee;
      --primary-purple: #7209b7;
      --app-bg: #f8f9fa;
      --card-bg: #ffffff;
      --text-primary: #212529;
      --text-secondary: #6c757d;
      --border-radius: 16px;
      --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.05);
      --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);
      --header-height: 70px;
    }
    [data-bs-theme="dark"] {
      --app-bg: #121212;
      --card-bg: #1e1e1e;
      --text-primary: #f8f9fa;
      --text-secondary: #adb5bd;
      --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.3);
      --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
    }
    /* base */
    body {
      background-color: var(--app-bg);
      color: var(--text-primary);
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
      transition: background-color 0.3s ease;
      padding-bottom: 80px;
    }
    .app-container {
      background: var(--app-bg);
      transition: background 0.3s;
    }
    /* cards */
    .app-card {
      background: var(--card-bg);
      border-radius: var(--border-radius);
      border: 1px solid rgba(0,0,0,0.04);
      box-shadow: var(--shadow-sm);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      margin-bottom: 1.2rem;
    }
    .app-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-md);
    }
    [data-bs-theme="dark"] .app-card {
      border-color: rgba(255,255,255,0.06);
    }
    /* gradient button */
    .btn-app {
      background: linear-gradient(135deg, var(--primary-blue), var(--primary-purple));
      border: none;
      border-radius: 12px;
      padding: 12px 28px;
      font-weight: 600;
      color: white;
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
    }
    .btn-app:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(67, 97, 238, 0.3);
      color: white;
    }
    .btn-app:active { transform: scale(0.95); }
    /* header */
    .app-header {
      background: var(--card-bg);
      border-bottom: 1px solid rgba(0,0,0,0.06);
      backdrop-filter: blur(10px);
      background: rgba(255,255,255,0.92);
    }
    [data-bs-theme="dark"] .app-header {
      background: rgba(30,30,30,0.92);
      border-bottom-color: rgba(255,255,255,0.06);
    }
    /* tabs */
    .tab-btn {
      background: transparent;
      border: none;
      padding: 0.6rem 1.4rem;
      font-weight: 500;
      color: var(--text-secondary);
      border-radius: 40px;
      transition: all 0.2s;
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
    }
    .tab-btn:hover { background: rgba(67,97,238,0.08); color: var(--primary-blue); }
    .tab-btn.active {
      background: linear-gradient(135deg, var(--primary-blue), var(--primary-purple));
      color: white;
      box-shadow: 0 4px 12px rgba(67,97,238,0.25);
    }
    .tab-btn.active i { color: white; }
    /* selector cards */
    .selector-card {
      background: var(--card-bg);
      border: 2px solid rgba(0,0,0,0.06);
      border-radius: var(--border-radius);
      padding: 1.5rem 1rem;
      text-align: center;
      cursor: pointer;
      transition: all 0.2s;
    }
    .selector-card.selected {
      border-color: var(--primary-blue);
      background: rgba(67,97,238,0.06);
      box-shadow: 0 0 0 3px rgba(67,97,238,0.15);
    }
    .selector-card h5 { font-weight: 600; color: var(--text-primary); }
    .selector-card p { color: var(--text-secondary); font-size: 0.9rem; }
    /* paper list */
    .paper-item {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      background: var(--card-bg);
      border-radius: 12px;
      padding: 0.9rem 1.2rem;
      border: 1px solid rgba(0,0,0,0.05);
      margin-bottom: 0.7rem;
      transition: all 0.2s;
    }
    .paper-item:hover { border-color: var(--primary-blue); background: rgba(67,97,238,0.02); }
    /* preview */
    .paper-preview {
      background: var(--card-bg);
      border-radius: var(--border-radius);
      padding: 2rem 2rem;
      border: 1px solid rgba(0,0,0,0.06);
      box-shadow: var(--shadow-sm);
    }
    .preview-header {
      border-bottom: 2px solid var(--text-primary);
      padding-bottom: 0.75rem;
      margin-bottom: 1.5rem;
    }
    .question-section { margin: 1.8rem 0; }
    .question-section h5 { font-weight: 600; border-bottom: 1px dashed rgba(0,0,0,0.1); padding-bottom: 0.3rem; }
    /* responsive */
    @media (max-width: 768px) {
      .tab-btn { padding: 0.4rem 0.9rem; font-size: 0.85rem; }
      .paper-item { flex-direction: column; align-items: stretch; gap: 0.6rem; }
      .selector-card { padding: 1rem; }
    }
    /* dark overrides for borders */
    [data-bs-theme="dark"] .paper-item { border-color: rgba(255,255,255,0.06); }
    [data-bs-theme="dark"] .paper-preview { border-color: rgba(255,255,255,0.08); }
    [data-bs-theme="dark"] .selector-card { border-color: rgba(255,255,255,0.08); }
    [data-bs-theme="dark"] .selector-card.selected { border-color: var(--primary-blue); background: rgba(67,97,238,0.15); }
    /* gradient text helper */
    .gradient-text {
      background: linear-gradient(135deg, var(--primary-blue), var(--primary-purple));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .badge-gradient {
      background: linear-gradient(135deg, var(--primary-blue), var(--primary-purple));
      color: white;
    }
    .form-control, .form-select {
      background: var(--card-bg);
      color: var(--text-primary);
      border: 1px solid rgba(0,0,0,0.08);
      border-radius: 12px;
      transition: all 0.2s;
    }
    .form-control:focus, .form-select:focus {
      border-color: var(--primary-blue);
      box-shadow: 0 0 0 3px rgba(67,97,238,0.15);
    }
    [data-bs-theme="dark"] .form-control,
    [data-bs-theme="dark"] .form-select {
      border-color: rgba(255,255,255,0.1);
      background: #2a2a3a;
      color: #f0f0f0;
    }
    .icon-box {
      width: 56px; height: 56px;
      border-radius: 16px;
      display: flex; align-items: center; justify-content: center;
      background: rgba(67,97,238,0.1);
      color: var(--primary-blue);
      font-size: 1.8rem;
    }
    [data-bs-theme="dark"] .icon-box { background: rgba(67,97,238,0.2); }
    /* empty state */
    .empty-state i { font-size: 3rem; color: var(--text-secondary); opacity: 0.3; }
    /* dark toggle */
    .theme-toggle {
      position: fixed; top: 20px; right: 20px; z-index: 9999;
      width: 48px; height: 48px; border-radius: 50%;
      background: var(--card-bg);
      border: 2px solid rgba(67,97,238,0.2);
      box-shadow: var(--shadow-md);
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; transition: all 0.3s;
      color: var(--text-primary);
    }
    .theme-toggle:hover { transform: rotate(20deg) scale(1.05); }
    /* layout */
    .max-w-1200 { max-width: 1200px; margin: 0 auto; }
    
/*CSS Paper*/

/* =============================================================
   QUESTION IMAGE UPLOAD
   ============================================================= */

.qe-question-image-section {
    margin: 15px 0;
    padding: 15px;
    border: 1px dashed #aaa;
    background: #fafafa;
}

.qe-image-heading {
    font-weight: 600;
    margin-bottom: 10px;
}

.qe-question-image-input {
    display: block;
    margin-bottom: 10px;
}

.qe-question-image-preview {
    margin-top: 12px;
}

.qe-selected-image img {
    display: block;
    max-width: 100%;
    max-height: 450px;
    object-fit: contain;
    border: 1px solid #ddd;
    padding: 5px;
    background: #fff;
}

.qe-image-actions {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    margin-top: 8px;
    font-size: 13px;
}


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

.question-divider {
    margin: 20px 0 0;
    border: 0;
    border-top: 1px solid #999;

    break-after: auto;
    page-break-after: auto;
}


/* =============================================================
   QE PAPER MODAL
   ============================================================= */

.qe-modal-paper {
    background: #fff;
    color: #000;

    max-width: 900px;

    margin: 0 auto;

    padding: 45px 55px;

    min-height: 900px;

    box-shadow:
        0 0 8px rgba(0, 0, 0, 0.15);
}


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

.qe-paper-institute-name {
    text-align: center;

    font-size: 24px;

    font-weight: 700;

    margin-bottom: 8px;
}


.qe-paper-title {
    text-align: center;

    font-size: 21px;

    font-weight: 600;

    margin-bottom: 25px;
}


.qe-paper-meta {
    text-align: center;

    margin-bottom: 25px;

    line-height: 1.7;
}


/* =============================================================
   QUESTIONS
   ============================================================= */

.qe-modal-paper .preview-question {
    margin-bottom: 12px;

    break-inside: auto;
    page-break-inside: auto;

    break-before: auto;
    page-break-before: auto;

    break-after: auto;
    page-break-after: auto;

    orphans: 2;
    widows: 2;
}


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

.qe-modal-paper .question-title {
    line-height: 1.6;
}


/* =============================================================
   MARKS
   ============================================================= */

.qe-modal-paper .question-marks {
    float: right;

    font-weight: 600;
}


/* =============================================================
   MCQ OPTIONS
   ============================================================= */

.qe-mcq-option {
    display: flex;

    align-items: flex-start;

    gap: 6px;

    margin: 2px 0;

    line-height: 1.5;
}


.qe-mcq-letter {
    min-width: 22px;

    font-weight: 500;
}


/* =============================================================
   ANSWER
   ============================================================= */

.qe-modal-paper .question-answer {
    margin-top: 12px;

    padding: 10px 15px;

    background: #f8f9fa;

    border-left: 3px solid #6c757d;

    break-inside: auto;
    page-break-inside: auto;
}


/* =============================================================
   TABLE
   ============================================================= */

.qe-modal-paper .preview-table-wrapper {
    margin: 12px 0;

    /*
     * IMPORTANT:
     * Allow tables/content to flow naturally when printing.
     */
    break-inside: auto;
    page-break-inside: auto;
}


.qe-modal-paper .preview-table-title {
    font-weight: 600;

    margin-bottom: 8px;
}


.qe-modal-paper .preview-table {
    width: 100%;

    border-collapse: collapse;

    margin: 8px 0;
}


.qe-modal-paper .preview-table th,
.qe-modal-paper .preview-table td {
    border: 1px solid #000;

    padding: 6px;

    text-align: left;
}


.qe-modal-paper .preview-table th {
    font-weight: 700;
}


/* =============================================================
   QUESTION IMAGE
   ============================================================= */

.qe-modal-paper .qe-question-image-section {
    margin: 15px 0;

    break-inside: auto;
    page-break-inside: auto;
}


.qe-modal-paper .qe-saved-question-image {
    display: block;

    max-width: 100%;

    max-height: 500px;

    object-fit: contain;
}


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

@media (max-width: 768px) {

    .qe-modal-paper {

        padding: 25px 20px;

        min-height: auto;

    }


    .qe-paper-institute-name {

        font-size: 20px;

    }


    .qe-paper-title {

        font-size: 18px;

    }


    .qe-modal-paper .question-marks {

        float: none;

        display: block;

        margin-top: 3px;

    }

}


/* =============================================================
   PRINT OPTIMIZATION
   ============================================================= */

@media print {

    /* =========================================================
       PRINT PAGE
       ========================================================= */

    html,
    body {

        margin: 0 !important;
        padding: 0 !important;

        background: #fff !important;

        color: #000 !important;

        font-family:
            Arial,
            Helvetica,
            sans-serif;

        font-size: 11px !important;

        line-height: 1.3 !important;

    }


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

    .qe-modal-paper {

        width: 100% !important;

        max-width: none !important;

        min-height: 0 !important;

        height: auto !important;

        margin: 0 !important;

        padding: 0 !important;

        box-shadow: none !important;

        background: #fff !important;

        overflow: visible !important;

        display: block !important;
    }


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

    .qe-paper-institute-name {

        font-size: 18px !important;

        margin: 0 0 3px 0 !important;

        line-height: 1.15 !important;

        page-break-after: avoid !important;

        break-after: avoid !important;

    }


    .qe-paper-title {

        font-size: 15px !important;

        margin: 0 0 5px 0 !important;

        line-height: 1.15 !important;

        page-break-after: avoid !important;

        break-after: avoid !important;

    }


    .qe-paper-meta {

        font-size: 10px !important;

        line-height: 1.2 !important;

        margin: 0 0 5px 0 !important;

    }


    /* =========================================================
       QUESTION
       ========================================================= */

    .qe-modal-paper .preview-question {

        margin: 0 !important;

        padding: 0 !important;

        /*
         * VERY IMPORTANT:
         * Never force an entire question onto the next page.
         */
        break-inside: auto !important;

        page-break-inside: auto !important;

        break-before: auto !important;

        page-break-before: auto !important;

        break-after: auto !important;

        page-break-after: auto !important;

        /*
         * Do not force minimum lines to remain together.
         */
        orphans: 1 !important;

        widows: 1 !important;

    }


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

    .qe-modal-paper .question-title {

        font-size: 11px !important;

        line-height: 1.3 !important;

        margin: 0 !important;

        padding: 0 !important;

        break-inside: auto !important;

        page-break-inside: auto !important;

        break-after: auto !important;

        page-break-after: auto !important;

    }


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

    .qe-modal-paper .question-divider {

        border: 0 !important;

        border-top: 1px solid #999 !important;

        margin: 5px 0 2px 0 !important;

        padding: 0 !important;

        height: 0 !important;

        /*
         * Never create a page break because of divider.
         */
        break-before: auto !important;

        page-break-before: auto !important;

        break-after: auto !important;

        page-break-after: auto !important;

    }


    /* =========================================================
       MARKS
       ========================================================= */

    .qe-modal-paper .question-marks {

        float: right !important;

        font-size: 10px !important;

        font-weight: 600 !important;

    }


    /* =========================================================
       MCQ OPTIONS
       ========================================================= */

    .qe-mcq-option {

        display: block !important;

        margin: 0 !important;

        padding: 0 !important;

        line-height: 1.25 !important;

        break-inside: auto !important;

        page-break-inside: auto !important;

    }


    .qe-mcq-letter {

        display: inline-block !important;

        min-width: 17px !important;

    }


    /* =========================================================
       ANSWER
       ========================================================= */

    .qe-modal-paper .question-answer {

        margin: 3px 0 0 0 !important;

        padding: 2px 6px !important;

        background: none !important;

        border-left: 2px solid #777 !important;

        line-height: 1.3 !important;

        break-inside: auto !important;

        page-break-inside: auto !important;

    }


    /* =========================================================
       TABLE
       ========================================================= */

    .qe-modal-paper .preview-table-wrapper {

        margin: 3px 0 !important;

        padding: 0 !important;

        /*
         * IMPORTANT:
         * Do NOT force the complete table wrapper
         * onto another page.
         */
        break-inside: auto !important;

        page-break-inside: auto !important;

    }


    .qe-modal-paper .preview-table-title {

        margin: 1px 0 2px 0 !important;

        line-height: 1.15 !important;

    }


    .qe-modal-paper .preview-table {

        width: 100% !important;

        margin: 2px 0 !important;

        border-collapse: collapse !important;

    }


    .qe-modal-paper .preview-table th,
    .qe-modal-paper .preview-table td {

        padding: 2px 4px !important;

        line-height: 1.15 !important;

    }


    /*
     * Allow table rows to continue naturally.
     */
    .qe-modal-paper .preview-table tr {

        break-inside: auto !important;

        page-break-inside: auto !important;

    }


    /* =========================================================
       QUESTION IMAGE
       ========================================================= */

    .qe-modal-paper .qe-question-image-section {

        margin: 3px 0 !important;

        padding: 0 !important;

        break-inside: auto !important;

        page-break-inside: auto !important;

    }


    .qe-modal-paper .qe-image-heading {

        margin-bottom: 2px !important;

        line-height: 1.15 !important;

    }


    .qe-modal-paper .qe-saved-question-image {

        max-width: 100% !important;

        max-height: 300px !important;

    }


    /* =========================================================
       REMOVE EXTRA UI
       ========================================================= */

    .qe-view-toolbar,
    .modal-header,
    .modal-footer,
    .btn {

        display: none !important;

    }


    /* =========================================================
       REMOVE BOOTSTRAP MODAL PRINT SPACING
       ========================================================= */

    .modal,
    .modal-dialog,
    .modal-content,
    .modal-body {

        position: static !important;

        width: auto !important;

        max-width: none !important;

        height: auto !important;

        min-height: 0 !important;

        margin: 0 !important;

        padding: 0 !important;

        border: 0 !important;

        box-shadow: none !important;

        overflow: visible !important;

        transform: none !important;

    }


    /* =========================================================
       GENERAL PRINT FLOW
       ========================================================= */

    *,
    *::before,
    *::after {

        box-sizing: border-box !important;

    }


    /*
     * Explicitly prevent common layout elements
     * from creating artificial page breaks.
     */
    .qe-modal-paper > *,
    .qe-modal-paper .preview-question > *,
    .qe-modal-paper .question-answer > * {

        break-before: auto !important;

        break-after: auto !important;

    }


    /*
     * Let long text/code naturally continue onto
     * the following page.
     */
    .qe-modal-paper pre,
    .qe-modal-paper code {

        white-space: pre-wrap !important;

        overflow: visible !important;

        break-inside: auto !important;

        page-break-inside: auto !important;

    }


    /* =========================================================
       A4 PAGE
       ========================================================= */

    @page {

        size: A4;

        margin: 6mm 8mm;

    }

}