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

    :root {
      --bg: #0a0e1a;
      --bg2: #111827;
      --bg3: #1e293b;
      --card: #1e293b;
      --border: #334155;
      --text: #e2e8f0;
      --text2: #94a3b8;
      --text3: #64748b;
      --primary: #6366f1;
      --primary-light: #818cf8;
      --primary-dark: #4f46e5;
      --success: #10b981;
      --success-bg: rgba(16, 185, 129, .12);
      --error: #ef4444;
      --error-bg: rgba(239, 68, 68, .12);
      --warn: #f59e0b;
      --warn-bg: rgba(245, 158, 11, .12);
      --gradient: linear-gradient(135deg, #6366f1, #8b5cf6, #a78bfa);
      --glass: rgba(30, 41, 59, .7);
      --radius: 16px;
      --radius-sm: 10px;
    }

    html {
      font-size: 16px;
      scroll-behavior: smooth
    }

    body {
      font-family: 'Inter', sans-serif;
      background: var(--bg);
      color: var(--text);
      min-height: 100vh;
      overflow-x: hidden
    }

    body::before {
      content: '';
      position: fixed;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: radial-gradient(circle at 30% 20%, rgba(99, 102, 241, .08), transparent 50%), radial-gradient(circle at 70% 80%, rgba(139, 92, 246, .06), transparent 50%);
      pointer-events: none;
      z-index: 0
    }

    .container {
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
      position: relative;
      z-index: 1
    }

    /* HEADER */
    .app-header {
      text-align: center;
      padding: 40px 0 30px;
      animation: fadeIn .6s
    }

    .app-header h1 {
      font-size: 2rem;
      font-weight: 800;
      background: var(--gradient);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      letter-spacing: -.5px
    }

    .app-header p {
      color: var(--text2);
      margin-top: 8px;
      font-size: .95rem
    }

    .badge {
      display: inline-block;
      background: var(--gradient);
      color: #fff;
      padding: 4px 14px;
      border-radius: 20px;
      font-size: .75rem;
      font-weight: 600;
      margin-top: 12px;
      letter-spacing: .5px
    }

    /* CATEGORY SCREEN */
    #category-screen .cat-grid {
      display: grid;
      gap: 16px;
      margin-top: 24px
    }

    .cat-card {
      background: var(--glass);
      backdrop-filter: blur(20px);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 24px;
      cursor: pointer;
      transition: all .3s;
      position: relative;
      overflow: hidden
    }

    .cat-card:hover {
      border-color: var(--primary);
      transform: translateY(-3px);
      box-shadow: 0 8px 30px rgba(99, 102, 241, .15)
    }

    .cat-card::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: var(--gradient);
      opacity: 0;
      transition: opacity .3s
    }

    .cat-card:hover::after {
      opacity: 1
    }

    .cat-card h3 {
      font-size: 1.1rem;
      font-weight: 700;
      margin-bottom: 6px
    }

    .cat-card .meta {
      font-size: .85rem;
      color: var(--text2)
    }

    .cat-card .meta span {
      color: var(--primary-light);
      font-weight: 600
    }

    .all-btn {
      background: var(--gradient);
      color: #fff;
      border: none;
      padding: 16px 32px;
      border-radius: var(--radius);
      font-size: 1rem;
      font-weight: 700;
      cursor: pointer;
      width: 100%;
      margin-top: 8px;
      transition: all .3s;
      font-family: inherit
    }

    .all-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(99, 102, 241, .3)
    }

    /* QUIZ SCREEN */
    #quiz-screen {
      display: none
    }

    .top-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      flex-wrap: wrap;
      gap: 10px
    }

    .back-btn {
      background: var(--bg3);
      border: 1px solid var(--border);
      color: var(--text);
      padding: 8px 18px;
      border-radius: var(--radius-sm);
      cursor: pointer;
      font-size: .85rem;
      font-weight: 500;
      transition: all .2s;
      font-family: inherit
    }

    .back-btn:hover {
      border-color: var(--primary)
    }

    .score-display {
      font-size: .9rem;
      color: var(--text2)
    }

    .score-display b {
      color: var(--success);
      font-size: 1.1rem
    }

    .progress-wrap {
      width: 100%;
      height: 6px;
      background: var(--bg3);
      border-radius: 3px;
      margin-bottom: 24px;
      overflow: hidden
    }

    .progress-bar {
      height: 100%;
      background: var(--gradient);
      border-radius: 3px;
      transition: width .4s ease;
      width: 0
    }

    .q-counter {
      font-size: .8rem;
      color: var(--text3);
      margin-bottom: 8px;
      font-weight: 500
    }

    .question-card {
      background: var(--glass);
      backdrop-filter: blur(20px);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 28px;
      margin-bottom: 20px;
      animation: slideUp .4s ease
    }

    .question-text {
      font-size: 1.05rem;
      font-weight: 600;
      line-height: 1.6;
      margin-bottom: 6px
    }

    .multi-hint {
      font-size: .78rem;
      color: var(--warn);
      margin-top: 8px;
      font-weight: 500
    }

    .options {
      display: grid;
      gap: 12px;
      margin-bottom: 20px
    }

    .option {
      background: var(--bg2);
      border: 2px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 16px 18px;
      cursor: pointer;
      transition: all .25s;
      display: flex;
      align-items: flex-start;
      gap: 14px;
      position: relative
    }

    .option:hover:not(.disabled) {
      border-color: var(--primary);
      background: rgba(99, 102, 241, .06)
    }

    .option.selected {
      border-color: var(--primary);
      background: rgba(99, 102, 241, .1)
    }

    .option.correct {
      border-color: var(--success) !important;
      background: var(--success-bg) !important
    }

    .option.wrong {
      border-color: var(--error) !important;
      background: var(--error-bg) !important
    }

    .option.missed {
      border-color: var(--warn) !important;
      background: var(--warn-bg) !important
    }

    .option.disabled {
      cursor: default;
      pointer-events: none
    }

    .opt-letter {
      min-width: 32px;
      height: 32px;
      border-radius: 8px;
      background: var(--bg3);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: .85rem;
      transition: all .25s;
      flex-shrink: 0
    }

    .option.selected .opt-letter {
      background: var(--primary);
      color: #fff
    }

    .option.correct .opt-letter {
      background: var(--success);
      color: #fff
    }

    .option.wrong .opt-letter {
      background: var(--error);
      color: #fff
    }

    .option.missed .opt-letter {
      background: var(--warn);
      color: #fff
    }

    .opt-text {
      font-size: .95rem;
      line-height: 1.5;
      padding-top: 4px
    }

    .action-row {
      display: flex;
      gap: 12px;
      flex-wrap: wrap
    }

    .btn {
      padding: 12px 28px;
      border-radius: var(--radius-sm);
      font-size: .95rem;
      font-weight: 600;
      cursor: pointer;
      border: none;
      transition: all .25s;
      font-family: inherit
    }

    .btn-primary {
      background: var(--gradient);
      color: #fff
    }

    .btn-primary:hover {
      box-shadow: 0 6px 20px rgba(99, 102, 241, .3);
      transform: translateY(-1px)
    }

    .btn-primary:disabled {
      opacity: .4;
      cursor: not-allowed;
      transform: none;
      box-shadow: none
    }

    .btn-outline {
      background: transparent;
      border: 2px solid var(--border);
      color: var(--text)
    }

    .btn-outline:hover {
      border-color: var(--primary)
    }

    .feedback {
      margin-top: 16px;
      padding: 16px;
      border-radius: var(--radius-sm);
      font-size: .9rem;
      font-weight: 500;
      animation: fadeIn .3s
    }

    .feedback.correct-fb {
      background: var(--success-bg);
      border: 1px solid rgba(16, 185, 129, .3);
      color: var(--success)
    }

    .feedback.wrong-fb {
      background: var(--error-bg);
      border: 1px solid rgba(239, 68, 68, .3);
      color: var(--error)
    }

    /* RESULT SCREEN */
    #result-screen {
      display: none
    }

    .result-card {
      background: var(--glass);
      backdrop-filter: blur(20px);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 40px;
      text-align: center;
      animation: slideUp .5s
    }

    .result-score {
      font-size: 4rem;
      font-weight: 800;
      background: var(--gradient);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text
    }

    .result-label {
      font-size: 1.2rem;
      color: var(--text2);
      margin: 8px 0 4px
    }

    .result-pct {
      font-size: 1.5rem;
      font-weight: 700;
      margin-bottom: 24px
    }

    .result-pct.good {
      color: var(--success)
    }

    .result-pct.mid {
      color: var(--warn)
    }

    .result-pct.bad {
      color: var(--error)
    }

    .result-stats {
      display: flex;
      justify-content: center;
      gap: 32px;
      margin-bottom: 30px;
      flex-wrap: wrap
    }

    .stat {
      text-align: center
    }

    .stat-num {
      font-size: 1.8rem;
      font-weight: 700
    }

    .stat-label {
      font-size: .8rem;
      color: var(--text3);
      margin-top: 2px
    }

    .stat-num.green {
      color: var(--success)
    }

    .stat-num.red {
      color: var(--error)
    }

    .result-btns {
      display: flex;
      gap: 12px;
      justify-content: center;
      flex-wrap: wrap
    }

    /* REVIEW */
    .review-section {
      margin-top: 30px;
      text-align: left
    }

    .review-section h3 {
      font-size: 1.1rem;
      margin-bottom: 16px;
      color: var(--text)
    }

    .review-item {
      background: var(--bg2);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 20px;
      margin-bottom: 14px
    }

    .review-q {
      font-weight: 600;
      margin-bottom: 10px;
      font-size: .95rem
    }

    .review-detail {
      font-size: .85rem;
      line-height: 1.8
    }

    .review-detail .your-ans {
      color: var(--error)
    }

    .review-detail .correct-ans {
      color: var(--success)
    }

    /* SETTINGS MODAL */
    .modal-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .6);
      backdrop-filter: blur(4px);
      z-index: 100;
      align-items: center;
      justify-content: center
    }

    .modal-overlay.active {
      display: flex
    }

    .modal {
      background: var(--bg2);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 32px;
      max-width: 400px;
      width: 90%;
      animation: slideUp .3s
    }

    .modal h3 {
      font-size: 1.2rem;
      margin-bottom: 20px
    }

    .modal label {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 14px;
      cursor: pointer;
      font-size: .95rem
    }

    .modal input[type=checkbox] {
      width: 20px;
      height: 20px;
      accent-color: var(--primary)
    }

    .modal-btns {
      display: flex;
      gap: 12px;
      margin-top: 24px
    }

    /* ANIMATIONS */
    @keyframes fadeIn {
      from {
        opacity: 0
      }

      to {
        opacity: 1
      }
    }

    @keyframes slideUp {
      from {
        opacity: 0;
        transform: translateY(20px)
      }

      to {
        opacity: 1;
        transform: translateY(0)
      }
    }

    /* REPORT BUTTON */
    .btn-report{background:transparent;border:1px solid var(--warn);color:var(--warn);font-size:.82rem;padding:8px 16px;display:none}
    .btn-report:hover{background:rgba(245,158,11,.1);border-color:var(--warn)}
    .btn-report.visible{display:inline-flex}

    /* REPORT MODAL */
    .report-modal .modal{max-width:500px}
    .report-modal .rq-text{font-size:.85rem;color:var(--text2);background:var(--bg3);padding:12px;border-radius:var(--radius-sm);margin-bottom:16px;line-height:1.5}
    .report-modal .current-ans{font-size:.82rem;color:var(--text3);margin-bottom:16px}
    .report-modal .current-ans b{color:var(--warn)}
    .report-modal .ans-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px}
    .report-modal .ans-opt{background:var(--bg3);border:2px solid var(--border);border-radius:var(--radius-sm);padding:10px 14px;cursor:pointer;font-size:.85rem;transition:all .2s;display:flex;align-items:center;gap:8px}
    .report-modal .ans-opt:hover{border-color:var(--warn)}
    .report-modal .ans-opt.checked{border-color:var(--warn);background:rgba(245,158,11,.1)}
    .report-modal .ans-opt .check-icon{width:18px;height:18px;border:2px solid var(--border);border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:.7rem;flex-shrink:0}
    .report-modal .ans-opt.checked .check-icon{background:var(--warn);border-color:var(--warn);color:#fff}
    .report-modal textarea{width:100%;background:var(--bg3);border:1px solid var(--border);color:var(--text);padding:10px;border-radius:var(--radius-sm);font-family:inherit;font-size:.85rem;resize:vertical;min-height:60px;outline:none}
    .report-modal textarea:focus{border-color:var(--warn)}
    .report-modal .img-upload-area{margin-top:12px;margin-bottom:16px}
    .report-modal .img-upload-btn{display:inline-flex;align-items:center;gap:6px;background:var(--bg3);border:1px dashed var(--border);color:var(--text2);padding:10px 16px;border-radius:var(--radius-sm);cursor:pointer;font-size:.82rem;font-family:inherit;transition:all .2s}
    .report-modal .img-upload-btn:hover{border-color:var(--warn);color:var(--warn)}
    .report-modal .img-preview{margin-top:10px;position:relative;display:none}
    .report-modal .img-preview img{max-width:100%;max-height:200px;border-radius:var(--radius-sm);border:1px solid var(--border)}
    .report-modal .img-preview .remove-img{position:absolute;top:-8px;right:-8px;width:24px;height:24px;background:var(--error);color:#fff;border:none;border-radius:50%;cursor:pointer;font-size:.8rem;display:flex;align-items:center;justify-content:center}
    .report-modal .btn-submit-report{background:var(--warn);color:#000;font-weight:700}
    .report-modal .btn-submit-report:hover{opacity:.9}
    .report-modal .btn-submit-report:disabled{opacity:.4;cursor:not-allowed}
    .report-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);padding:14px 28px;border-radius:var(--radius-sm);font-weight:600;font-size:.9rem;z-index:300;animation:slideUp .3s;box-shadow:0 8px 30px rgba(0,0,0,.4);display:none}
    .report-toast.show{display:block}
    .report-toast.success{background:var(--success);color:#fff}
    .report-toast.error{background:var(--error);color:#fff}

    /* FOOTER */
    .app-footer {
      text-align: center;
      padding: 40px 20px 24px;
      position: relative;
      z-index: 1
    }

    .app-footer .credit {
      font-size: .8rem;
      color: var(--text3);
      font-weight: 500
    }

    .app-footer .credit span {
      color: var(--primary-light);
      font-weight: 600
    }

    .app-footer .dua {
      font-size: .85rem;
      color: var(--text3);
      margin-top: 6px;
      font-family: 'Segoe UI', Tahoma, sans-serif;
      direction: rtl;
      opacity: .7
    }

    /* RESPONSIVE */
    @media(max-width:600px) {
      .app-header h1 {
        font-size: 1.5rem
      }

      .question-card {
        padding: 20px
      }

      .result-card {
        padding: 24px
      }

      .result-score {
        font-size: 3rem
      }

      .action-row {
        flex-direction: column
      }

      .btn {
        width: 100%;
        text-align: center
      }
    }