:root {
    --primary: #4834d4;
    --success: #2ecc71;
    --warning: #f1c40f;
    --error: #e74c3c;
    --bg: #f8f9fd;
    --text: #2d3436;
}

body {
    font-family: 'Segoe UI', Tahoma, sans-serif;
    background-color: var(--bg);
    margin: 0; padding: 0; transition: background 0.3s ease;
    direction: rtl; touch-action: manipulation;
}

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

.container { max-width: 550px; margin: 0 auto; min-height: 100vh; padding: 20px; box-sizing: border-box; }

/* الهيدر */
.top-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.back-circle-btn { width: 45px; height: 45px; border-radius: 50%; border: none; background: #fff; color: var(--primary); box-shadow: 0 4px 12px rgba(0,0,0,0.08); cursor: pointer; }
.score-badge { background: var(--primary); color: #fff; padding: 6px 16px; border-radius: 20px; font-weight: bold; }

/* أداة اختيار الحالة */
.status-selector { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-top: 10px; }
.status-opt input { display: none; }
.opt-content { 
    padding: 12px 5px; border-radius: 12px; background: #fff; border: 2px solid #eee; 
    text-align: center; cursor: pointer; transition: 0.3s; display: flex; flex-direction: column; gap: 5px; align-items: center;
}
.status-opt.green i { color: var(--success); }
.status-opt.yellow i { color: var(--warning); }
.status-opt.red i { color: var(--error); }
.status-opt input:checked + .opt-content { border-color: var(--primary); background: #f0f7ff; transform: translateY(-3px); }

/* البطاقات الملونة */
.questions-grid { display: grid; gap: 12px; }
.question-item { 
    background: #fff; padding: 20px; border-radius: 18px; 
    border-right: 8px solid #ddd; box-shadow: 0 4px 15px rgba(0,0,0,0.04); cursor: pointer;
}
.q-green { border-right-color: var(--success); background: linear-gradient(to left, #ffffff, #f0fff4); }
.q-yellow { border-right-color: var(--warning); background: linear-gradient(to left, #ffffff, #fffdf0); }
.q-red { border-right-color: var(--error); background: linear-gradient(to left, #ffffff, #fff5f5); }

.q-item-header { display: flex; justify-content: space-between; align-items: flex-start; }
.edit-q-btn { background: rgba(0,0,0,0.05); border: none; width: 35px; height: 35px; border-radius: 10px; color: var(--primary); cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 10; }

/* واجهة التمرين والإضافة */
.glass-card { background: #ffffff; border-radius: 24px; padding: 25px; box-shadow: 0 15px 40px rgba(0,0,0,0.05); }
.input-group { margin-bottom: 20px; }
.input-group label { display: block; margin-bottom: 8px; font-weight: 600; color: #555; font-size: 0.9rem; }
input, textarea { width: 100%; padding: 15px; border: 2px solid #f0f0f0; border-radius: 14px; font-size: 1rem; box-sizing: border-box; font-family: inherit; }

.interactive-text { background: #fff; padding: 25px; border-radius: 20px; line-height: 2.8; font-size: 1.2rem; box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
.word-gap { display: inline-block; min-width: 55px; border-bottom: 2px solid #ddd; margin: 0 5px; color: transparent; transition: 0.3s; }
.word-gap.filled { color: var(--primary); border-bottom-color: var(--success); font-weight: bold; }
.word-gap.active-gap { border-bottom: 3px solid var(--primary); background: #f4f2ff; }

.floating-words { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 30px; }
.word-card { padding: 12px 20px; background: #fff; border: 2px solid var(--primary); border-radius: 12px; cursor: pointer; font-weight: bold; }

.primary-btn { width: 100%; padding: 16px; background: var(--primary); color: white; border: none; border-radius: 15px; font-weight: bold; cursor: pointer; }
.fab-btn { position: fixed; bottom: 30px; left: 30px; width: 65px; height: 65px; border-radius: 50%; background: var(--primary); color: #fff; border: none; font-size: 1.5rem; box-shadow: 0 8px 25px rgba(72,52,212,0.4); }

.difficulty-picker { background: #fff; padding: 10px 15px; border-radius: 12px; margin-bottom: 15px; display: flex; align-items: center; justify-content: space-between; font-size: 0.85rem; }
#difficulty-level { border: none; color: var(--primary); font-weight: bold; background: none; outline: none; }

.hidden { display: none !important; }