:root { --primary: #4834d4; --bg: #f3f4f9; }
body { font-family: 'Segoe UI', Tahoma, sans-serif; background: var(--bg); direction: rtl; margin: 0; transition: 0.3s; }
.container { max-width: 500px; margin: 0 auto; padding: 15px; }

/* الفلاشات */
body.correct-flash { background-color: #e8f8f5 !important; }
body.error-flash { background-color: #fdedec !important; }

/* المربعات الرقمية */
.questions-numbers-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 10px; }
.question-item { 
    aspect-ratio: 1/1; background: #fff; border-radius: 18px; display: flex; align-items: center; 
    justify-content: center; position: relative; cursor: pointer; border-bottom: 6px solid #ddd;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03); transition: 0.2s;
}
.question-item:active { transform: scale(0.95); }
.question-item b { font-size: 1.6rem; color: #2d3436; }
.q-green { border-bottom-color: #2ecc71; } .q-yellow { border-bottom-color: #f1c40f; } .q-red { border-bottom-color: #e74c3c; }

/* زر التعديل الصغير */
.edit-q-btn { position: absolute; top: 6px; left: 6px; border: none; background: #f8f9fa; border-radius: 50%; width: 28px; height: 28px; color: var(--primary); cursor: pointer; }

/* واجهة أكمل الفراغات (التحسين الجمالي) */
.quiz-box { background: #fff; padding: 20px; border-radius: 24px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); border: 1px solid #eee; }
.quiz-title-display { font-size: 1.1rem; color: #636e72; text-align: center; margin-bottom: 15px; font-weight: 600; }
.divider { border: 0; border-top: 1px solid #f0f0f0; margin-bottom: 20px; }
.quiz-text-area { line-height: 2.8; font-size: 1.25rem; color: #2d3436; min-height: 120px; text-align: justify; }

/* تصميم الفراغ */
.word-gap { 
    display: inline-block; min-width: 60px; height: 32px; border-radius: 8px; 
    background: #f1f2f6; border-bottom: 3px solid #dfe4ea; margin: 0 4px; 
    vertical-align: middle; transition: 0.3s; color: transparent; text-align: center;
}
.word-gap.active-gap { border-bottom-color: var(--primary); background: #ebf0ff; animation: pulse 1.5s infinite; }
.word-gap.filled { color: var(--primary); font-weight: bold; background: transparent; border-bottom-color: #2ecc71; }

/* تصميم الكلمات العائمة */
.word-pool-area { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; justify-content: center; }
.word-card { 
    padding: 10px 18px; background: #fff; border: 2px solid #ddd; border-radius: 14px; 
    font-weight: 600; cursor: pointer; transition: 0.2s; box-shadow: 0 4px 6px rgba(0,0,0,0.02);
}
.word-card:active { background: var(--primary); color: #fff; border-color: var(--primary); }

/* إضافات أخرى */
.subject-colors-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 15px 0; }
.s-col span { display: block; width: 42px; height: 42px; border-radius: 12px; cursor: pointer; border: 3px solid transparent; }
.s-col input:checked + span { border-color: #000; transform: translateY(-3px); }
.s-col input { display: none; }

.styled-select { width: 100%; padding: 12px; border-radius: 12px; border: 2px solid #eee; background: #fff; cursor: pointer; }
.fab-btn { position: fixed; bottom: 25px; left: 25px; width: 65px; height: 65px; border-radius: 50%; background: var(--primary); color: #fff; border: none; font-size: 1.5rem; box-shadow: 0 8px 20px rgba(72,52,212,0.3); }
.primary-btn { background: var(--primary); color: #fff; border: none; padding: 15px; border-radius: 15px; width: 100%; font-weight: bold; cursor: pointer; }
.hidden { display: none !important; }

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