/* ==================== الطباعة ==================== */
    @page { size: A4 portrait; margin: 12mm 15mm 15mm 15mm; }
    * { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      background: #f3f4f6;
      font-family: 'Cairo', sans-serif;
      display: flex;
      min-height: 100vh;
    }

    /* ==================== Sidebar ==================== */
    .sidebar {
      width: 360px;
      background: #1f2937;
      color: #fff;
      padding: 16px;
      overflow-y: auto;
      position: fixed;
      right: 0;
      top: 0;
      bottom: 0;
      direction: rtl;
      box-shadow: -2px 0 10px rgba(0,0,0,0.2);
    }

    .sidebar h2 {
      font-size: 15px;
      margin-bottom: 10px;
      padding-bottom: 6px;
      border-bottom: 1px solid #374151;
      color: #60a5fa;
    }

    .sidebar h3 {
      font-size: 11px;
      margin: 12px 0 5px;
      color: #9ca3af;
      font-weight: 700;
      letter-spacing: 0.5px;
    }

    .sidebar label {
      display: block;
      font-size: 12px;
      margin: 5px 0 3px;
      color: #d1d5db;
    }

    .sidebar input[type="text"],
    .sidebar input[type="number"],
    .sidebar textarea,
    .sidebar select {
      width: 100%;
      padding: 6px 8px;
      border: 1px solid #4b5563;
      background: #374151;
      color: #fff;
      border-radius: 4px;
      font-size: 12px;
      font-family: 'Cairo', sans-serif;
      direction: rtl;
    }

    .sidebar textarea { min-height: 45px; resize: vertical; }

    .checkbox-row {
      display: flex; align-items: center; gap: 6px;
      margin: 4px 0; cursor: pointer; font-size: 12px;
    }
    .checkbox-row input { accent-color: #3b82f6; }

    .btn-group {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 4px;
      margin-top: 4px;
    }
    .btn-group button {
      padding: 6px 4px; background: #374151; color: #fff;
      border: 1px solid #4b5563; border-radius: 4px;
      cursor: pointer; font-size: 11px; font-family: 'Cairo', sans-serif;
    }
    .btn-group button.active { background: #3b82f6; border-color: #2563eb; }

    .hint {
      font-size: 10px; color: #9ca3af;
      margin-top: 3px; line-height: 1.4;
    }

    .reorder-list { list-style: none; padding: 0; }
    .reorder-list li {
      background: #374151; padding: 5px 8px;
      margin: 2px 0; border-radius: 4px;
      font-size: 11px;
      display: flex; justify-content: space-between; align-items: center; gap: 6px;
    }
    .reorder-list .label-text {
      flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .reorder-list .arrows { display: flex; gap: 3px; flex-shrink: 0; }
    .reorder-list button {
      background: #4b5563; color: #fff; border: none;
      width: 22px; height: 22px; border-radius: 3px;
      cursor: pointer; font-size: 11px;
    }
    .reorder-list button:hover { background: #6b7280; }
    .reorder-list button:disabled { opacity: 0.3; cursor: not-allowed; }

    /* ==================== أزرار خاصة ==================== */
    .extract-btn {
      width: 100%; padding: 7px;
      background: #8b5cf6; color: #fff; border: none;
      border-radius: 4px; cursor: pointer;
      font-size: 12px; font-weight: 600;
      margin: 5px 0; font-family: 'Cairo', sans-serif;
    }
    .extract-btn:hover { background: #7c3aed; }

    .upload-btn {
      width: 100%; padding: 7px;
      background: #6366f1; color: #fff; border: none;
      border-radius: 4px; cursor: pointer;
      font-size: 12px; font-weight: 600;
      margin: 5px 0; font-family: 'Cairo', sans-serif;
    }
    .upload-btn:hover { background: #4f46e5; }

    .generate-btn {
      width: 100%; padding: 12px;
      background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
      color: #fff; border: none; border-radius: 6px;
      cursor: pointer; font-size: 14px; font-weight: 700;
      margin: 12px 0 8px; font-family: 'Cairo', sans-serif;
      box-shadow: 0 2px 8px rgba(217,119,6,0.4);
    }
    .generate-btn:hover { background: linear-gradient(135deg, #d97706 0%, #b45309 100%); }
    .generate-btn:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }

    .print-btn {
      width: 100%; padding: 10px;
      background: #10b981; color: #fff; border: none;
      border-radius: 6px; cursor: pointer;
      font-size: 13px; font-weight: 700;
      margin-top: 8px; font-family: 'Cairo', sans-serif;
    }
    .print-btn:hover { background: #059669; }

    .regen-btn {
      width: 100%; padding: 8px;
      background: #ec4899; color: #fff; border: none;
      border-radius: 4px; cursor: pointer;
      font-size: 12px; font-weight: 600;
      margin: 5px 0; font-family: 'Cairo', sans-serif;
    }
    .regen-btn:hover { background: #db2777; }
    .regen-btn:disabled { background: #6b7280; cursor: not-allowed; }

    /* ==================== لوحة الحالة ==================== */
    .status-panel {
      background: #111827;
      border: 1px solid #374151;
      border-radius: 6px;
      padding: 10px;
      margin-bottom: 12px;
    }

    .status-row {
      display: flex; justify-content: space-between;
      align-items: center; margin: 3px 0;
      font-size: 12px;
    }

    .status-label { color: #9ca3af; }
    .status-value { color: #fff; font-weight: 700; }
    .status-value.balance { color: #10b981; }
    .status-value.price { color: #f59e0b; }
    .status-value.locked { color: #ef4444; }

    .price-breakdown {
      background: #0f172a;
      padding: 8px;
      border-radius: 4px;
      margin: 6px 0;
      font-size: 11px;
      max-height: 100px;
      overflow-y: auto;
      font-family: 'Cairo', monospace;
    }

    .price-breakdown div {
      color: #cbd5e1;
      margin: 1px 0;
      display: flex;
      justify-content: space-between;
    }

    /* ==================== المعاينة ==================== */
    .preview-area {
      flex: 1;
      margin-right: 360px;
      padding: 20px;
      display: flex;
      justify-content: center;
    }

    .toolbar-info {
      background: #fef3c7;
      border-right: 4px solid #f59e0b;
      padding: 10px 14px;
      border-radius: 4px;
      margin-bottom: 12px;
      font-size: 12px;
      direction: rtl; text-align: right;
      max-width: 210mm;
    }
    .toolbar-info strong { color: #92400e; }

    .stage-banner {
      width: 210mm;
      padding: 8px 14px;
      border-radius: 6px;
      margin-bottom: 8px;
      font-size: 13px;
      font-weight: 700;
      direction: rtl;
      text-align: center;
    }
    .stage-banner.before { background: #dbeafe; color: #1e40af; border: 1px solid #93c5fd; }
    .stage-banner.after  { background: #dcfce7; color: #166534; border: 1px solid #86efac; }
    .stage-banner.locked { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }

    /* ==================== الورقة ==================== */
    .page {
      width: 210mm;
      min-height: 297mm;
      padding: 12mm 15mm 15mm 15mm;
      background: #fff;
      box-shadow: 0 4px 20px rgba(0,0,0,0.15);
      direction: rtl;
      color: #000;
      font-family: 'Amiri', 'Times New Roman', serif;
    }

    .page.density-normal  { font-size: 13pt; line-height: 1.65; }
    .page.density-compact { font-size: 12pt; line-height: 1.4; }
    .page.density-ultra   { font-size: 11pt; line-height: 1.25; }
    .page.density-compact .question { margin-bottom: 5pt; }
    .page.density-compact .branch   { margin: 2pt 0; }
    .page.density-ultra   .question { margin-bottom: 3pt; }
    .page.density-ultra   .branch   { margin: 1pt 0; }
    .page.density-ultra   .question-title { font-size: 12pt; }

    @media print {
      body { background: #fff; display: block; }
      .sidebar, .toolbar-info, .stage-banner, .editor-controls, .page-break-marker { display: none !important; }
      .preview-area { margin: 0; padding: 0; display: block; }
      .page { width: 100%; padding: 0; margin: 0; box-shadow: none; }
    }

    /* ==================== الترويسة ==================== */
    .exam-header {
      width: 100%; border-collapse: collapse;
      padding-bottom: 5pt; border-bottom: 1.5pt solid #000;
      margin-bottom: 6pt; font-size: 11pt;
    }
    .exam-header td { vertical-align: middle; padding: 2pt 4pt; }
    .exam-header .col-right { width: 38%; text-align: right; }
    .exam-header .col-center { width: 24%; text-align: center; }
    .exam-header .col-left { width: 38%; text-align: left; }
    .exam-header .col-right > div, .exam-header .col-left > div {
      margin-bottom: 2pt; font-weight: 600;
    }

    .logo-placeholder {
      width: 50px; height: 50px;
      border: 1.5pt solid #000; border-radius: 50%;
      margin: 0 auto;
      background: linear-gradient(135deg, #f0f0f0 0%, #d4d4d4 100%);
      display: flex; align-items: center; justify-content: center;
      font-size: 8pt; color: #555;
    }

    .logo-real {
      max-width: 60px; max-height: 60px;
      object-fit: contain; margin: 0 auto;
      display: block;
    }

    .student-info {
      width: 100%; border-collapse: collapse;
      margin: 5pt 0; font-size: 12pt; font-weight: 600;
    }
    .student-info td { padding: 2pt 0; }
    .student-info .field-right { width: 50%; text-align: right; }
    .student-info .field-left { width: 50%; text-align: left; }

    .blank-line {
      display: inline-block; min-width: 45mm;
      border-bottom: 1pt solid #000; margin-right: 4pt;
    }

    .instruction-note {
      padding: 4pt 0; margin-bottom: 6pt;
      font-size: 12pt; text-align: justify; font-weight: 600;
    }
    .instruction-note strong { text-decoration: underline; }

    /* ==================== الأسئلة ==================== */
    .questions { margin-top: 4pt; }

    .question {
      margin-bottom: 8pt;
      page-break-inside: avoid;
      position: relative;
    }

    .question-title {
      font-size: 13pt; font-weight: 700; margin-bottom: 3pt;
    }

    .question.title-inline > .question-title { display: none; }
    .question.title-inline .inline-qtitle {
      font-weight: 700; font-size: 13pt; margin-left: 4pt;
    }

    .question.sep-solid-light  { border-bottom: 0.5pt solid #999;  padding-bottom: 6pt; }
    .question.sep-solid-dark   { border-bottom: 1pt solid #000;    padding-bottom: 6pt; }
    .question.sep-dashed-light { border-bottom: 0.5pt dashed #999; padding-bottom: 6pt; }
    .question.sep-dashed-dark  { border-bottom: 1pt dashed #000;   padding-bottom: 6pt; }
    .question.sep-dotted-light { border-bottom: 0.5pt dotted #999; padding-bottom: 6pt; }
    .question.sep-dotted-dark  { border-bottom: 1.5pt dotted #000; padding-bottom: 6pt; }
    .question:last-child { border-bottom: none !important; padding-bottom: 0 !important; }

    .branch {
      margin: 3pt 0 3pt 4mm;
      text-align: justify;
      position: relative;
    }
    .branch-marks {
      font-weight: 600; font-size: 11pt;
      margin-right: 4pt; white-space: nowrap; display: inline;
    }
    .branch-label { font-weight: 700; margin-left: 3pt; }

    .exam-footer {
      margin-top: 12pt; padding-top: 6pt;
      border-top: 0.5pt solid #999;
      font-size: 11pt; font-weight: 600; white-space: pre-line;
    }
    .exam-footer.align-center { text-align: center; }
    .exam-footer.align-right  { text-align: right; }
    .exam-footer.align-left   { text-align: left; }

    mjx-container { display: inline-block !important; margin: 0 2pt; }

    /* ==================== أزرار التحرير على الورقة ==================== */
    .editor-controls {
      position: absolute;
      top: -8px;
      left: -2px;
      display: flex;
      gap: 3px;
      background: #1e293b;
      padding: 3px 5px;
      border-radius: 4px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.2);
      direction: ltr;
    }
    .editor-controls button {
      background: #475569;
      color: #fff;
      border: none;
      width: 26px;
      height: 24px;
      border-radius: 3px;
      cursor: pointer;
      font-size: 12px;
      font-family: 'Cairo', sans-serif;
      transition: background 0.15s;
    }
    .editor-controls button:hover { background: #64748b; }
    .editor-controls button.btn-edit { background: #3b82f6; }
    .editor-controls button.btn-replace { background: #f59e0b; }
    .editor-controls button.btn-delete { background: #ef4444; }
    .editor-controls button:hover.btn-edit { background: #2563eb; }
    .editor-controls button:hover.btn-replace { background: #d97706; }
    .editor-controls button:hover.btn-delete { background: #dc2626; }

    /* العناصر التي عليها أزرار تحرير تأخذ padding أكبر */
    .editing-mode .question { padding-top: 18px; }
    .editing-mode .branch { padding-top: 22px; padding-right: 5pt; }
    .editing-mode .branch .editor-controls { top: 0; }

    .add-question-btn {
      display: block;
      width: 100%;
      padding: 8px;
      background: #f3f4f6;
      border: 2px dashed #9ca3af;
      border-radius: 6px;
      color: #4b5563;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      margin: 12px 0;
      font-family: 'Cairo', sans-serif;
    }
    .add-question-btn:hover { background: #e5e7eb; border-color: #6b7280; }

    .add-branch-inline {
      display: inline-block;
      margin: 4pt 0 4pt 6mm;
      padding: 3px 10px;
      background: #f9fafb;
      border: 1px dashed #9ca3af;
      border-radius: 4px;
      color: #6b7280;
      font-size: 11pt;
      cursor: pointer;
      font-family: 'Cairo', sans-serif;
    }
    .add-branch-inline:hover { background: #f3f4f6; }

    /* ==================== Modal ==================== */
    .modal-backdrop {
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(0,0,0,0.6);
      z-index: 9000;
      display: flex;
      align-items: center;
      justify-content: center;
      direction: rtl;
    }
    .modal-backdrop.hidden { display: none; }

    .modal {
      background: #fff;
      border-radius: 10px;
      padding: 20px 24px;
      max-width: 600px;
      width: 90%;
      max-height: 85vh;
      overflow-y: auto;
      box-shadow: 0 20px 60px rgba(0,0,0,0.3);
      font-family: 'Cairo', sans-serif;
    }
    .modal h3 {
      font-size: 16px;
      color: #1f2937;
      margin-bottom: 12px;
      padding-bottom: 8px;
      border-bottom: 1px solid #e5e7eb;
    }
    .modal label {
      display: block;
      font-size: 13px;
      color: #374151;
      margin: 10px 0 4px;
      font-weight: 600;
    }
    .modal textarea, .modal input[type="text"], .modal input[type="number"] {
      width: 100%;
      padding: 8px 10px;
      border: 1px solid #d1d5db;
      border-radius: 6px;
      font-family: 'Cairo', sans-serif;
      direction: rtl;
      font-size: 13px;
    }
    .modal textarea { min-height: 100px; resize: vertical; }
    .modal-hint {
      font-size: 11px;
      color: #6b7280;
      margin-top: 4px;
    }
    .modal-actions {
      display: flex;
      gap: 8px;
      justify-content: flex-end;
      margin-top: 16px;
      padding-top: 12px;
      border-top: 1px solid #e5e7eb;
    }
    .modal-actions button {
      padding: 8px 16px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      font-size: 13px;
      font-weight: 600;
      font-family: 'Cairo', sans-serif;
    }
    .modal-actions .btn-cancel { background: #e5e7eb; color: #374151; }
    .modal-actions .btn-save   { background: #10b981; color: #fff; }
    .modal-actions .btn-save:hover { background: #059669; }
    .modal-actions .btn-cancel:hover { background: #d1d5db; }

    .price-warning {
      background: #fef3c7;
      border: 1px solid #fcd34d;
      padding: 10px;
      border-radius: 6px;
      font-size: 13px;
      color: #92400e;
      margin: 10px 0;
      font-weight: 600;
    }

    .toast {
      position: fixed;
      top: 20px;
      left: 50%;
      transform: translateX(-50%);
      background: #1f2937;
      color: #fff;
      padding: 10px 16px;
      border-radius: 6px;
      font-size: 13px;
      font-family: 'Cairo', sans-serif;
      box-shadow: 0 4px 12px rgba(0,0,0,0.2);
      z-index: 9500;
      direction: rtl;
      animation: slideDown 0.3s;
    }
    @keyframes slideDown {
      from { transform: translate(-50%, -20px); opacity: 0; }
      to   { transform: translate(-50%, 0); opacity: 1; }
    }

    /* البنية اليدوية (manual structure) */
    .manual-q-row {
      background: #374151;
      padding: 6px 8px;
      margin: 4px 0;
      border-radius: 4px;
      display: grid;
      grid-template-columns: 30px 1fr 1fr;
      gap: 6px;
      align-items: center;
      font-size: 11px;
    }
    .manual-q-row .q-num {
      font-weight: 700;
      color: #60a5fa;
      text-align: center;
    }
    .manual-q-row select, .manual-q-row input {
      padding: 4px;
      font-size: 11px;
    }

    /* ==================== بوّاب البطاقات: شاشات التحميل والخطأ ==================== */
    .auth-overlay {
      position: fixed;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #f3f4f6;
      z-index: 999999;
      font-family: 'Cairo', sans-serif;
      direction: rtl;
      padding: 20px;
    }

    .auth-box {
      max-width: 480px;
      width: 100%;
      background: white;
      padding: 40px 30px;
      border-radius: 12px;
      box-shadow: 0 4px 20px rgba(0,0,0,0.08);
      text-align: center;
    }

    .auth-spinner {
      width: 44px;
      height: 44px;
      border: 4px solid #e5e7eb;
      border-top-color: #2563eb;
      border-radius: 50%;
      animation: auth-spin 0.8s linear infinite;
      margin: 0 auto 20px;
    }

    @keyframes auth-spin {
      to { transform: rotate(360deg); }
    }

    .auth-icon {
      font-size: 48px;
      margin-bottom: 12px;
      line-height: 1;
    }

    .auth-box h1 {
      color: #1f2937;
      font-size: 20px;
      margin-bottom: 12px;
      font-weight: 700;
    }

    .auth-error .auth-box h1 {
      color: #dc2626;
    }

    .auth-box p {
      color: #4b5563;
      font-size: 14px;
      line-height: 1.7;
      margin: 0;
    }

    .auth-user-badge {
      position: fixed;
      top: 12px;
      left: 12px;
      background: rgba(31, 41, 55, 0.92);
      color: #e5e7eb;
      padding: 6px 12px;
      border-radius: 20px;
      font-size: 12px;
      font-family: 'Cairo', sans-serif;
      z-index: 1000;
      direction: rtl;
      pointer-events: none;
    }

    @media print {
      .auth-overlay,
      .auth-user-badge { display: none !important; }
    }