:root {
    /* Palette claire reprise du style Devoirati / mult_frac_factint_007.html */
    --bg: #f8f9fa;
    --surface: #ffffff;
    --surface2: #f5f3ff;
    --accent: #667eea;
    --accent2: #764ba2;
    --accent3: #7c3aed;
    --text: #333333;
    --text2: #6b7280;
    --green: #16a34a;
    --red: #dc2626;
    --radius: 14px;
    --shadow: 0 6px 20px rgba(102,126,234,0.16);
  }

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

  body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Segoe UI', 'Cairo', sans-serif;
    min-height: 100vh;
    padding: 0 0 60px 0;
  }

  /* ===== HEADER ===== */
  .page-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-bottom: 2px solid var(--accent);
    padding: 18px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 4px 18px rgba(102,126,234,0.22);
  }

  .header-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 1px;
  }

  .header-sub {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.85);
    margin-top: 2px;
  }

  /* ===== USER BAR ===== */
  .user-bar {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  #xp-badge {
    background: linear-gradient(135deg, #ffffff, #f5f3ff);
    color: #667eea;
    font-weight: 800;
    font-size: 0.78rem;
    padding: 4px 12px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 5px;
  }

  #level-badge {
    background: var(--surface2);
    border: 1px solid var(--accent2);
    color: var(--accent2);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
  }

  #username-display {
    font-size: 0.82rem;
    color: var(--text2);
  }

  /* ===== CHRONO ===== */
  .chrono-bar {
    background: var(--surface);
    border-bottom: 1px solid var(--surface2);
    padding: 8px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
  }

  #chrono-display {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--accent2);
    font-variant-numeric: tabular-nums;
    letter-spacing: 2px;
    min-width: 80px;
  }

  #chrono-display.warning { color: var(--accent); animation: pulse 1s infinite; }
  #chrono-display.danger { color: var(--red); animation: pulse 0.5s infinite; }

  @keyframes pulse {
    0%,100% { opacity: 1; }
    50% { opacity: 0.4; }
  }

  .progress-wrap {
    flex: 1;
    min-width: 120px;
    height: 8px;
    background: var(--surface2);
    border-radius: 4px;
    overflow: hidden;
  }

  #time-progress {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, var(--accent2), var(--accent));
    border-radius: 4px;
    transition: width 1s linear, background 1s;
  }

  .chrono-label {
    font-size: 0.75rem;
    color: var(--text2);
  }

  #score-display {
    font-size: 0.85rem;
    color: var(--green);
    font-weight: 700;
  }

  /* ===== MAIN CONTENT ===== */
  .main-content {
    max-width: 860px;
    margin: 0 auto;
    padding: 24px 16px;
  }

  /* ===== EXERCISE BLOCK ===== */
  .exercise-block {
    background: var(--surface);
    border-radius: var(--radius);
    border: 1px solid var(--surface2);
    margin-bottom: 28px;
    overflow: hidden;
    box-shadow: var(--shadow);
  }

  .exercise-header {
    background: linear-gradient(90deg, #f5f3ff, #ffffff);
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 2px solid var(--accent);
  }

  .exercise-num {
    background: var(--accent);
    color: white;
    font-weight: 900;
    font-size: 0.95rem;
    padding: 4px 14px;
    border-radius: 20px;
  }

  .exercise-title {
    font-size: 0.95rem;
    color: var(--text2);
    font-weight: 500;
  }

  .exercise-points {
    margin-right: auto;
    margin-left: 0;
    background: var(--surface);
    border: 1px solid var(--accent2);
    color: var(--accent2);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 10px;
  }

  /* ===== CONTEXT BOX ===== */
  .context-box {
    background: #f5f3ff;
    border-right: 4px solid var(--accent);
    margin: 16px 20px;
    padding: 14px 16px;
    border-radius: 8px;
    font-size: 0.95rem;
    line-height: 1.9;
    direction: rtl;
  }

  /* ===== QUESTION ===== */
  .question-block {
    padding: 16px 20px;
    border-bottom: 1px solid var(--surface2);
  }

  .question-block:last-child { border-bottom: none; }

  .q-label {
    display: inline-block;
    background: var(--surface2);
    color: var(--accent);
    font-size: 0.78rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 6px;
    margin-bottom: 10px;
    letter-spacing: 0.5px;
  }

  .q-text {
    font-size: 0.95rem;
    line-height: 1.85;
    color: var(--text);
    margin-bottom: 12px;
    direction: rtl;
  }

  /* ===== ERC INPUT AREA ===== */
  .erc-area {
    background: var(--surface2);
    border-radius: 10px;
    padding: 14px;
    margin-top: 8px;
  }

  .erc-input-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
  }

  .erc-label {
    font-size: 0.8rem;
    color: var(--text2);
    min-width: 80px;
    text-align: right;
  }

  .erc-input {
    background: var(--bg);
    border: 2px solid #d8d4ff;
    border-radius: 8px;
    color: var(--text);
    font-size: 0.9rem;
    padding: 8px 12px;
    min-width: 180px;
    flex: 1;
    direction: ltr;
    text-align: left;
    transition: border-color 0.2s;
    font-family: 'Courier New', monospace;
  }

  .erc-input:focus {
    outline: none;
    border-color: var(--accent2);
    box-shadow: 0 0 0 3px rgba(102,126,234,0.14);
  }

  .erc-input.correct {
    border-color: var(--green);
    background: rgba(76,219,138,0.06);
  }

  .erc-input.wrong {
    border-color: var(--red);
    background: rgba(224,92,122,0.06);
    animation: shake 0.4s;
  }

  @keyframes shake {
    0%,100% { transform: translateX(0); }
    25% { transform: translateX(-6px); }
    75% { transform: translateX(6px); }
  }

  /* ===== KEYBOARD BUTTONS ===== */
  .kb-wrap {
    background: var(--bg);
    border: 1px solid #ddd6fe;
    border-radius: 8px;
    padding: 8px;
    margin-top: 6px;
    display: none;
  }

  .kb-wrap.visible { display: block; }

  .kb-row {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 5px;
  }

  .kb-btn {
    background: var(--surface2);
    border: 1px solid #c4b5fd;
    color: var(--text);
    font-size: 0.85rem;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
    font-family: 'Courier New', monospace;
    min-width: 36px;
    text-align: center;
  }

  .kb-btn:hover {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
    transform: translateY(-1px);
  }

  .kb-btn.op {
    background: #eef2ff;
    border-color: var(--accent2);
    color: var(--accent2);
  }

  .kb-btn.op:hover {
    background: var(--accent2);
    color: white;
  }

  .kb-btn.del {
    background: #fff1f2;
    border-color: var(--red);
    color: var(--red);
  }

  .kb-btn.del:hover {
    background: var(--red);
    color: #fff;
  }

  /* ===== VALIDATE BUTTON ===== */
  .btn-validate {
    background: linear-gradient(135deg, #ffffff, #f5f3ff);
    color: #000;
    font-weight: 800;
    font-size: 0.88rem;
    padding: 9px 22px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 10px;
  }

  .btn-validate:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(102,126,234,0.28);
  }

  .btn-validate:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
  }

  .btn-show-kb {
    background: transparent;
    border: 1px solid var(--accent2);
    color: var(--accent2);
    font-size: 0.78rem;
    padding: 5px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
    margin-top: 4px;
  }

  .btn-show-kb:hover {
    background: var(--accent2);
    color: white;
  }

  /* ===== RESULT FEEDBACK ===== */
  .feedback-box {
    margin-top: 10px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.88rem;
    direction: rtl;
    line-height: 1.7;
    display: none;
  }

  .feedback-box.correct {
    background: rgba(76,219,138,0.1);
    border: 1px solid var(--green);
    color: var(--green);
    display: block;
  }

  .feedback-box.wrong {
    background: rgba(224,92,122,0.1);
    border: 1px solid var(--red);
    color: #f08080;
    display: block;
  }

  /* ===== CORRECTION ===== */
  .correction-box {
    background: #f0fdf4;
    border: 1px solid var(--green);
    border-right: 4px solid var(--green);
    border-radius: 8px;
    padding: 14px 16px;
    margin-top: 10px;
    font-size: 0.88rem;
    line-height: 2;
    direction: rtl;
    display: none;
    color: #166534;
  }

  .correction-box.visible { display: block; }

  .correction-box .step {
    padding: 4px 0;
    border-bottom: 1px solid rgba(22,163,74,0.15);
  }

  .correction-box .step:last-child { border-bottom: none; }

  .correction-box .step-num {
    display: inline-block;
    background: #dcfce7;
    color: var(--green);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: 4px;
    margin-left: 6px;
  }

  /* ===== FAHMI AVATAR ===== */
  .fahmi-container {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 200;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .fahmi-bubble {
    background: var(--surface);
    border: 2px solid var(--accent);
    border-radius: 14px 14px 14px 0;
    padding: 12px 16px;
    max-width: 260px;
    font-size: 0.82rem;
    line-height: 1.7;
    color: var(--text);
    direction: rtl;
    box-shadow: var(--shadow);
    display: none;
    animation: fadeSlideUp 0.3s ease;
  }

  .fahmi-bubble.visible { display: block; }
  .fahmi-bubble.hint { border-color: var(--accent2); }
  .fahmi-bubble.bravo { border-color: var(--green); }
  .fahmi-bubble.error { border-color: var(--red); }

  @keyframes fadeSlideUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .fahmi-avatar {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(102,126,234,0.28);
    transition: transform 0.2s;
    border: 3px solid var(--accent);
    position: relative;
  }

  .fahmi-avatar:hover { transform: scale(1.1); }

  .fahmi-avatar .chechia {
    position: absolute;
    top: -12px;
    font-size: 1.4rem;
    transform: rotate(-15deg);
  }

  .fahmi-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--red);
    color: white;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    font-size: 0.7rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* ===== TOAST ===== */
  .toast-container {
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 300;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .toast {
    background: var(--surface);
    border-radius: 10px;
    padding: 12px 18px;
    font-size: 0.85rem;
    box-shadow: var(--shadow);
    animation: toastIn 0.3s ease;
    max-width: 280px;
    direction: rtl;
    border-right: 4px solid var(--accent);
  }

  .toast.xp { border-color: var(--accent); color: var(--accent); }
  .toast.correct { border-color: var(--green); color: var(--green); }
  .toast.wrong { border-color: var(--red); color: #f08080; }

  @keyframes toastIn {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; transform: translateX(0); }
  }

  /* ===== SCORE PANEL ===== */
  .score-panel {
    background: var(--surface);
    border: 1px solid var(--surface2);
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 28px;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
  }

  .score-circle {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 4px solid var(--accent);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    flex-shrink: 0;
  }

  .score-circle .num {
    font-size: 1.3rem;
    color: var(--accent);
    line-height: 1;
  }

  .score-circle .den {
    font-size: 0.7rem;
    color: var(--text2);
  }

  .score-details {
    flex: 1;
    min-width: 160px;
  }

  .score-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 6px;
  }

  .score-bar-wrap {
    height: 10px;
    background: var(--surface2);
    border-radius: 5px;
    overflow: hidden;
  }

  #score-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--green));
    border-radius: 5px;
    width: 0%;
    transition: width 0.5s ease;
  }

  .score-stats {
    display: flex;
    gap: 12px;
    margin-top: 6px;
    flex-wrap: wrap;
  }

  .stat-item {
    font-size: 0.75rem;
    color: var(--text2);
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .stat-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
  }

  /* ===== PARTS ===== */
  .part-label {
    background: linear-gradient(90deg, var(--accent3), transparent);
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 3px 12px 3px 20px;
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%);
    margin-bottom: 4px;
    display: inline-block;
    letter-spacing: 1px;
  }

  /* ===== MULTI-INPUT ===== */
  .multi-input-row {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 6px;
  }

  .input-small {
    width: 60px;
    min-width: 60px;
    text-align: center;
  }

  .input-medium {
    width: 120px;
    min-width: 120px;
  }

  /* finish overlay */
  #finish-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(248,249,250,0.88);
    z-index: 500;
    align-items: center;
    justify-content: center;
  }

  #finish-overlay.visible { display: flex; }

  .finish-card {
    background: var(--surface);
    border: 2px solid var(--accent);
    border-radius: 20px;
    padding: 36px 40px;
    text-align: center;
    max-width: 400px;
    width: 90%;
    animation: popIn 0.5s cubic-bezier(0.175,0.885,0.32,1.275);
  }

  @keyframes popIn {
    from { transform: scale(0.7); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
  }

  .finish-emoji { font-size: 3.5rem; margin-bottom: 12px; }
  .finish-title { font-size: 1.5rem; font-weight: 800; color: var(--accent); margin-bottom: 8px; }
  .finish-score { font-size: 3rem; font-weight: 900; color: var(--green); margin: 12px 0; }
  .finish-detail { font-size: 0.9rem; color: var(--text2); line-height: 1.8; }

  .btn-retry {
    margin-top: 20px;
    background: var(--accent);
    color: white;
    font-weight: 800;
    padding: 11px 28px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.95rem;
    transition: all 0.2s;
  }

  .btn-retry:hover { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(102,126,234,0.28); }
/* ==========================================================
   Correctif structure générateurs ERC (.hdr / .wrap / .qbox)
   Palette claire Devoirati compatible avec les pages générées.
   ========================================================== */
:root{
  --s1:#ffffff;--s2:#f8f9fa;--s3:#ffffff;--s4:#f5f3ff;--bord:#e5e7eb;
  --gold:#667eea;--gold2:#764ba2;--teal:#667eea;--rose:#dc2626;
  --txt:#333333;--txt2:#6b7280;--txt3:#d1d5db;--purple:#7c3aed;--amber:#f59e0b;
  --mono:'Courier New',monospace;--sans:'Segoe UI','Cairo',sans-serif;--r:14px;
}
html,body{width:100%;}
body{overflow-x:hidden;background:#f8f9fa;color:#333;font-family:var(--sans);}
body::before{display:none!important;}

/* Header / top bars */
.hdr,.page-header{position:sticky;top:0;z-index:200;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%)!important;border-bottom:0!important;padding:12px 24px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;box-shadow:0 4px 18px rgba(102,126,234,.22)!important;}
.hdr-t,.hdr-title,.header-title{font-size:1rem;font-weight:900;color:#fff!important;line-height:1.35;}
.hdr-s,.hdr-sub,.header-sub{font-size:.74rem;color:rgba(255,255,255,.86)!important;margin-top:2px;}
.hdr-r,.hdr-right,.user-bar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.badge{font-size:.72rem;font-weight:800;padding:4px 11px;border-radius:20px;white-space:nowrap;}
.bxp,.badge-xp,#xp-badge{background:linear-gradient(135deg,#fff,#f5f3ff)!important;color:#667eea!important;}
.blv,.badge-level,#level-badge{background:#f5f3ff!important;color:#667eea!important;border:1px solid rgba(255,255,255,.9)!important;}
.busr,.badge-user,#username-display{color:#fff!important;}

.chrono,.chrono-row,.chrono-bar{position:relative;z-index:5;background:#fff!important;border-bottom:1px solid #e5e7eb!important;padding:8px 24px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;box-shadow:0 2px 8px rgba(102,126,234,.08)!important;}
.cval,.chrono-val,#chrono-display{font-family:var(--mono);font-size:1.18rem;font-weight:800;color:#667eea!important;letter-spacing:2px;min-width:72px;}
.cval.warn,.chrono-val.warn,#chrono-display.warning{color:#f59e0b!important;}
.cval.dang,.chrono-val.danger,#chrono-display.danger{color:#dc2626!important;}
.ctrack,.chrono-track,.progress-wrap{flex:1;min-width:120px;height:7px;background:#f5f3ff!important;border-radius:999px;overflow:hidden;}
.cfill,.chrono-fill,#time-progress{height:100%;width:100%;background:linear-gradient(90deg,#667eea,#764ba2)!important;border-radius:999px;transition:width 1s linear;}
.cpill,.score-pill,#score-display{font-size:.84rem;color:#16a34a!important;font-weight:800;white-space:nowrap;}
.bsm,.btn-sm,#chrono-btn{background:#fff!important;border:1px solid #c7d2fe!important;color:#667eea!important;border-radius:8px;padding:6px 13px;cursor:pointer;font-weight:700;}

.genbar,.gen-bar{max-width:980px;margin:20px auto 12px;background:#fff!important;border:1px solid #e5e7eb!important;border-radius:16px;padding:14px 16px;display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;box-shadow:0 6px 20px rgba(102,126,234,.12)!important;}
.bgen,.btn-gen{background:linear-gradient(135deg,#667eea,#764ba2)!important;color:#fff!important;border:0!important;border-radius:12px;padding:10px 20px;font-weight:900;cursor:pointer;display:inline-flex;align-items:center;gap:8px;box-shadow:0 4px 12px rgba(102,126,234,.24);}
.dpills,.diff-pills{display:flex;gap:8px;flex-wrap:wrap;}
.dp,.diff-pill{background:#fff!important;color:#667eea!important;border:1px solid #c7d2fe!important;border-radius:999px;padding:7px 16px;font-weight:800;cursor:pointer;}
.dp.on,.diff-pill.active{background:linear-gradient(135deg,#667eea,#764ba2)!important;color:#fff!important;border-color:#667eea!important;}
.seedlbl,.gen-seed{font-size:.78rem;color:#6b7280;}

/* Progress */
.progwrap,.prog-panel{max-width:980px;margin:0 auto 18px;padding:0 14px;}
.progcard,.prog-card,.score-panel{background:#fff!important;border:1px solid #e5e7eb!important;border-radius:18px;padding:18px;display:flex;align-items:center;gap:18px;box-shadow:0 6px 20px rgba(102,126,234,.12)!important;}
.pring,.prog-ring,.score-circle{width:72px;height:72px;border-radius:50%;border:4px solid #667eea;display:flex;flex-direction:column;align-items:center;justify-content:center;flex-shrink:0;font-weight:900;background:#fff;}
.rn,.r-num,.score-circle .num{font-size:1.35rem;color:#667eea;line-height:1;}
.rd,.r-den,.score-circle .den{font-size:.72rem;color:#6b7280;}
.pinfo,.prog-info,.score-details{flex:1;min-width:180px;}
.ptitle,.prog-title,.score-title{font-weight:900;color:#333;margin-bottom:8px;font-size:.95rem;}
.pbwrap,.prog-bar-wrap,.score-bar-wrap{height:10px;background:#f5f3ff!important;border-radius:999px;overflow:hidden;}
.pbar,.prog-bar,#score-bar{height:100%;width:0%;background:linear-gradient(90deg,#667eea,#764ba2)!important;border-radius:999px;transition:width .4s ease;}
.pstats,.prog-stats,.score-stats{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px;}
.pst,.pstat,.stat-item{font-size:.76rem;color:#6b7280;display:flex;align-items:center;gap:5px;}
.pdot,.stat-dot{width:8px;height:8px;border-radius:50%;display:inline-block;}

/* Main exercise layout */
.wrap,.main-content{max-width:980px;margin:0 auto 24px;padding:0 14px;direction:rtl;position:relative;z-index:1;}
.exbox,.qbox,.exercise-block,.panel{background:#fff!important;border:1px solid #e5e7eb!important;border-radius:18px;overflow:hidden;margin:18px 0;box-shadow:0 6px 20px rgba(102,126,234,.12)!important;}
.exhead,.ex-head,.exercise-header{background:linear-gradient(90deg,#f5f3ff,#fff)!important;border-bottom:2px solid #667eea!important;padding:13px 18px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.exnum,.ex-num,.exercise-num,.pnum,.partie-num{background:#667eea!important;color:#fff!important;font-weight:900;border-radius:999px;padding:5px 14px;font-size:.86rem;}
.exsub,.ex-sub,.exercise-title{color:#6b7280;font-size:.88rem;font-weight:700;}
.expts,.ex-pts,.exercise-points,.ppts,.partie-pts{margin-right:auto;background:#fff;border:1px solid #c7d2fe;color:#667eea;border-radius:10px;padding:4px 10px;font-weight:800;font-size:.75rem;}
.qbox{padding:16px 18px;}
.qlbl,.qlabel,.q-label,.tag,.pill{display:inline-block;background:#667eea!important;color:#fff!important;border-radius:8px;padding:4px 12px;font-weight:900;font-size:.78rem;margin-bottom:10px;}
.qtxt,.qtext,.q-text{font-size:.96rem;line-height:1.9;color:#333;margin-bottom:12px;}
.qhint,.ctx,.context-box{background:#f5f3ff!important;border-right:4px solid #667eea;border-radius:12px;padding:12px 14px;margin:10px 0 12px;color:#4b5563;line-height:1.8;font-size:.88rem;}
.erc,.erc-area,.answer-zone{background:#f8f9fa!important;border:1px solid #ddd6fe!important;border-radius:14px;padding:14px;margin-top:8px;}
.irow,.erc-input-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:8px 0;}
.ilbl,.ilabel,.erc-label{min-width:110px;color:#6b7280;font-weight:800;font-size:.85rem;}
.ei,.erc-input,input.ans,textarea{background:#fff!important;color:#333!important;border:2px solid #d1d5db!important;border-radius:9px;padding:8px 12px;font-size:.92rem;min-width:190px;flex:1;direction:ltr;text-align:left;font-family:var(--mono);}
.ei.sm,.sm,.input-small{width:62px;min-width:62px;max-width:80px;text-align:center;}
.ei.md,.md,.input-medium{width:130px;min-width:130px;max-width:170px;}
.ei:focus,.erc-input:focus{outline:none;border-color:#667eea!important;box-shadow:0 0 0 3px rgba(102,126,234,.14);}

/* Keyboards/buttons */
.bkb,.btn-kb,.btn-show-kb{background:#fff!important;border:1px solid #c7d2fe!important;color:#667eea!important;border-radius:8px;padding:6px 12px;font-weight:800;cursor:pointer;margin:6px 0;}
.kb,.kb-wrap,.math-keyboard{display:none;background:#fff!important;border:1px solid #e5e7eb!important;border-radius:12px;padding:10px;margin:8px 0;box-shadow:0 4px 12px rgba(0,0,0,.04);}
.kb.on,.kb-wrap.visible{display:block;}
.kbrow,.kb-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px;}
.k,.kb-btn,.key{background:#f5f3ff!important;border:1px solid #ddd6fe!important;color:#333!important;border-radius:8px;padding:7px 11px;min-width:38px;cursor:pointer;font-weight:800;font-family:var(--mono);}
.k:hover,.kb-btn:hover,.key:hover{background:#667eea!important;color:#fff!important;}
.k.op,.kb-btn.op{color:#667eea!important;border-color:#c7d2fe!important;}
.k.del,.kb-btn.del{color:#dc2626!important;border-color:#fecaca!important;background:#fff1f2!important;}
.bval,.btn-val,.btn-validate{background:linear-gradient(135deg,#667eea,#764ba2)!important;color:#fff!important;border:0!important;border-radius:10px;padding:9px 22px;font-weight:900;cursor:pointer;margin-top:10px;}
.bval:hover,.btn-val:hover,.btn-validate:hover,.bgen:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(102,126,234,.25);}

/* feedback / correction */
.fb,.feedback-box{display:none;margin-top:10px;padding:10px 14px;border-radius:10px;line-height:1.7;font-size:.88rem;}
.fb.on,.feedback-box.correct,.feedback-box.wrong{display:block;}
.fb.ok,.feedback-box.correct{background:#ecfdf5!important;border:1px solid #16a34a!important;color:#166534!important;}
.fb.bad,.feedback-box.wrong{background:#fef2f2!important;border:1px solid #dc2626!important;color:#991b1b!important;}
.cor,.correction-box,.solution,.solbox{display:none;background:#f0fdf4!important;border:1px solid #16a34a!important;border-right:4px solid #16a34a!important;color:#14532d!important;border-radius:12px;padding:13px 15px;margin-top:10px;line-height:2;font-size:.88rem;}
.cor.on,.cor.visible,.correction-box.visible{display:block;}
.st,.step{padding:5px 0;border-bottom:1px solid rgba(22,163,74,.14);}
.st:last-child,.step:last-child{border-bottom:0;}
.sn,.step-num{display:inline-block;background:#dcfce7;color:#16a34a;border-radius:6px;padding:2px 8px;font-size:.76rem;font-weight:900;margin-left:6px;}

/* section separators */
.partie-sep,.psep{max-width:980px;margin:18px auto 6px;padding:0 14px;}
.partie-banner,.pbanner{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-radius:16px;padding:12px 16px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;box-shadow:0 6px 18px rgba(102,126,234,.2);}
.partie-title,.ptit{font-weight:900;}
.partie-pts,.ppts{margin-right:auto;background:rgba(255,255,255,.18);color:#fff;border:1px solid rgba(255,255,255,.45);}

/* Fahmi / Toast / finish */
.fwrap,.fahmi-wrap{position:fixed;left:18px;bottom:18px;z-index:300;display:flex;flex-direction:column;align-items:flex-start;gap:8px;}
.fbub,.fahmi-bubble{display:none;background:#fff;border:2px solid #667eea;border-radius:16px 16px 16px 0;padding:12px 15px;max-width:280px;color:#333;line-height:1.7;box-shadow:0 8px 22px rgba(102,126,234,.18);font-size:.84rem;}
.fbub.on,.fahmi-bubble.on{display:block;}
.fav,.fahmi-av{width:58px;height:58px;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.65rem;cursor:pointer;box-shadow:0 6px 18px rgba(102,126,234,.28);position:relative;border:3px solid #fff;}
.cap{position:absolute;top:-14px;font-size:1.2rem;}
.fdot,.fahmi-dot{position:absolute;right:-3px;top:-3px;background:#dc2626;color:#fff;border-radius:50%;width:18px;height:18px;display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:900;}
.toasts,.toast-container{position:fixed;right:18px;top:82px;z-index:400;display:flex;flex-direction:column;gap:8px;}
.toast{background:#fff;border-right:4px solid #667eea;border-radius:12px;padding:11px 16px;box-shadow:0 8px 20px rgba(0,0,0,.08);font-size:.84rem;}
#finov,#fin-overlay,#finish-overlay{display:none;position:fixed;inset:0;background:rgba(248,249,250,.9);z-index:600;align-items:center;justify-content:center;}
#finov.on,#fin-overlay.on,#finish-overlay.visible{display:flex;}
.fincard,.fin-card,.finish-card{background:#fff;border:2px solid #667eea;border-radius:22px;padding:32px 38px;text-align:center;max-width:420px;width:90%;box-shadow:0 14px 40px rgba(102,126,234,.2);}
.ficon,.fin-icon,.finish-emoji{font-size:3rem;margin-bottom:10px;}
.ftitle,.fin-title,.finish-title{font-size:1.4rem;font-weight:900;color:#667eea;margin-bottom:8px;}
.fscore,.fin-score,.finish-score{font-size:2.5rem;font-weight:900;color:#16a34a;margin:10px 0;}
.fdet,.fin-det,.finish-detail{color:#6b7280;line-height:1.7;}
.bret,.btn-retry{background:#667eea;color:#fff;border:0;border-radius:12px;padding:11px 24px;font-weight:900;margin-top:18px;cursor:pointer;}

@media (max-width:700px){
  .hdr,.chrono,.chrono-row{padding:10px 14px;}
  .genbar,.gen-bar{margin:14px 10px;}
  .progcard,.prog-card{align-items:flex-start;}
  .irow{align-items:stretch;}
  .ilbl{min-width:100%;}
  .ei{min-width:100%;}
  .ei.sm{min-width:54px;max-width:70px;}
  .fwrap,.fahmi-wrap{left:10px;bottom:10px;}
}