/* ============================================================
 LESSON-COMMON.CSS
 أنماط مشتركة لجميع الدروس والأجزاء (نسخة مدمجة)
 ============================================================ */
.lesson-container {
 max-width: 900px;
 margin: 0 auto;
 padding: 8px;
}
.lesson-title {
 color: #4ECDC4;
 font-size: 20px;
 font-weight: 900;
 text-align: center;
 margin-bottom: 14px;
 border-bottom: 2px solid var(--border);
 padding-bottom: 8px;
}
.section {
 background: var(--bg-card);
 border: 1px solid var(--border);
 border-radius: 10px;
 padding: 10px 12px;
 margin-bottom: 10px;
}
.section h2 {
 color: #66FCF1;
 font-size: 14px;
 font-weight: 700;
 margin-bottom: 6px;
 display: flex;
 align-items: center;
 gap: 6px;
}
.section h2 .num {
 background: var(--gradient);
 color: var(--bg-primary);
 border-radius: 50%;
 width: 22px;
 height: 22px;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 11px;
 font-weight: 900;
 flex-shrink: 0;
}
.section h3 {
 color: #FF6B6B;
 font-size: 13px;
 font-weight: 700;
 margin: 6px 0 4px;
}
.section h4 {
 color:var(--gold-text);
 font-size: 12px;
 font-weight: 700;
 margin: 4px 0 2px;
}
.section p {
 color: var(--text-secondary);
 font-size: 11.5px;
 line-height: 1.6;
 margin-bottom: 4px;
}
.section ul {
 color: var(--text-secondary);
 font-size: 11.5px;
 line-height: 1.6;
 padding-right: 14px;
 margin-bottom: 4px;
}
.section ul li {
 margin-bottom: 1px;
}
.formula-block {
 background: var(--bg-primary);
 border: 1px solid var(--border);
 border-radius: 6px;
 padding: 6px 10px;
 margin: 4px 0;
 text-align: center;
 overflow-x: auto;
 font-size: 13px;
}
.formula-block .math {
 color: var(--accent-light);
 font-family: var(--font-mono);
}
.highlight-box {
 background: rgba(69, 162, 158, 0.08);
 border-right: 3px solid var(--accent);
 padding: 6px 10px;
 border-radius: 6px;
 margin: 4px 0;
}
.highlight-box.green {
 border-color: #4ECDC4;
 background: rgba(78, 205, 196, 0.08);
}
.highlight-box.red {
 border-color: #FF6B6B;
 background: rgba(255, 107, 107, 0.08);
}
.highlight-box.yellow {
 border-color: #F4D03F;
 background: rgba(244, 208, 63, 0.08);
}
.highlight-box.purple {
 border-color: #BB8FCE;
 background: rgba(187, 143, 206, 0.08);
}
.highlight-box strong {
 color: var(--text-primary);
}
.highlight-box .label {
 display: inline-block;
 font-weight: 700;
 font-size: 10px;
 padding: 1px 8px;
 border-radius: 12px;
 margin-bottom: 2px;
}
.highlight-box .label.def { background: #4ECDC422; color: #4ECDC4; }
.highlight-box .label.prop { background: #FF6B6B22; color: #FF6B6B; }
.highlight-box .label.ex { background: #F4D03F22; color:var(--gold-text); }
.highlight-box .label.rem { background: #BB8FCE22; color: #BB8FCE; }
.highlight-box .label.rappel { background: #F4D03F44; color:var(--gold-text); }
.highlight-box .label.resume { background: #4ECDC444; color: #4ECDC4; }
.table-wrap {
 overflow-x: auto;
 margin: 4px 0;
 -webkit-overflow-scrolling: touch;
}
.table-wrap table {
 width: 100%;
 border-collapse: collapse;
 background: var(--bg-primary);
 border-radius: 6px;
 overflow: hidden;
 max-width: 240px;
}
.table-wrap th {
 background: var(--bg-card);
 color: var(--accent-light);
 padding: 3px 8px;
 border: 1px solid var(--border);
 font-weight: 700;
 text-align: center;
 font-size: 11px;
}
.table-wrap td {
 padding: 3px 8px;
 border: 1px solid var(--border);
 text-align: center;
 color: var(--text-secondary);
 font-size: 11px;
}
.table-wrap .true { color: #4ECDC4; font-weight: 700; }
.table-wrap .false { color: #FF6B6B; font-weight: 700; }
.step {
 background: var(--bg-primary);
 border-right: 3px solid #4ECDC4;
 padding: 3px 10px;
 margin: 3px 0;
 border-radius: 4px;
 color: var(--text-secondary);
 font-size: 11px;
}
.step .step-num {
 color: #4ECDC4;
 font-weight: 700;
 margin-left: 6px;
 font-size: 11px;
}
.back-btn {
 display: inline-flex;
 align-items: center;
 gap: 4px;
 color: var(--accent-light);
 text-decoration: none;
 font-weight: 600;
 padding: 4px 12px;
 border-radius: 6px;
 transition: all 0.2s ease;
 margin-bottom: 12px;
 font-size: 11px;
}
.back-btn:hover {
 background: rgba(69, 162, 158, 0.1);
}
.badge-math {
 display: inline-block;
 background: #4ECDC422;
 color: #4ECDC4;
 padding: 1px 8px;
 border-radius: 12px;
 font-size: 10px;
 font-weight: 600;
}
.exercice-box {
 background: var(--exercice-bg);
 border: 1px solid var(--border);
 border-radius: 8px;
 padding: 8px 10px;
 margin: 4px 0;
}
.exercice-box .ex-title {
 color: var(--exercice-title);
 font-weight: 700;
 font-size: 12px;
 margin-bottom: 4px;
}
.exercice-box .ex-question {
 color: var(--text-secondary);
 font-size: 11.5px;
 line-height: 1.6;
}
.solution-box {
 background: var(--solution-bg);
 border: 1px solid var(--solution-border);
 border-radius: 6px;
 padding: 6px 10px;
 margin: 4px 0;
 display: none;
}
.solution-box.show {
 display: block;
}
.solution-box .sol-title {
 color: var(--solution-title);
 font-weight: 700;
 font-size: 11px;
 margin-bottom: 2px;
}
.solution-box .sol-content {
 color: var(--text-secondary);
 font-size: 11.5px;
 line-height: 1.6;
}
.toggle-sol {
 background: var(--bg-card);
 border: 1px solid var(--border);
 color: #4ECDC4;
 padding: 3px 10px;
 border-radius: 6px;
 cursor: pointer;
 font-family: var(--font-main);
 font-size: 10px;
 font-weight: 600;
 transition: all 0.2s ease;
 margin-top: 4px;
}
.toggle-sol:hover {
 border-color: #4ECDC4;
 background: rgba(78, 205, 196, 0.1);
}
.nav-buttons {
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin-top: 14px;
 padding-top: 10px;
 border-top: 1px solid var(--border);
 flex-wrap: wrap;
 gap: 6px;
}
.nav-buttons .next-btn,
.nav-buttons .prev-btn {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 color: var(--bg-primary);
 background: var(--gradient);
 text-decoration: none;
 font-weight: 700;
 padding: 4px 12px;
 border-radius: 6px;
 transition: all 0.3s ease;
 font-size: 11px;
 border: none;
}
.nav-buttons .next-btn:hover {
 transform: translateX(4px);
 box-shadow: 0 4px 20px rgba(69, 162, 158, 0.3);
}
.nav-buttons .prev-btn:hover {
 transform: translateX(-4px);
 box-shadow: 0 4px 20px rgba(69, 162, 158, 0.3);
}
.sub-section {
 border-top: 1px solid var(--border);
 padding-top: 8px;
 margin-top: 8px;
}
.function-grid {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 8px;
 margin: 4px 0;
}
.function-card {
 padding: 8px 10px;
 border-radius: 8px;
 text-align: center;
 border: 1px solid var(--border);
 background: var(--bg-primary);
}
.function-card h4 {
 font-size: 12px;
 margin-bottom: 4px;
}
.function-card p {
 font-size: 11px;
}
details summary {
 font-size: 11px;
 cursor: pointer;
 color: #4ECDC4;
 padding: 2px 0;
}
details summary:hover {
 color: #66FCF1;
}
details div {
 font-size: 11px;
}
.graph-container {
    background: #0D1117;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    margin: 12px 0;
    text-align: center;
}
.graph-container canvas {
    max-width: 100%;
    border-radius: 8px;
    background: #0D1117;
}
.graph-container svg {
    max-width: 100%;
    border-radius: 8px;
    background: #0D1117;
}
.graph-container p {
 color: var(--text-muted);
 font-size: 13px;
 margin-top: 6px;
}
@media (max-width: 768px) {
 .lesson-title { font-size: 17px; }
 .section { padding: 6px 8px; }
 .section h2 { font-size: 12px; }
 .section h3 { font-size: 11.5px; }
 .section p { font-size: 10.5px; }
 .section ul { font-size: 10.5px; }
 .table-wrap table { max-width: 100%; }
 .table-wrap th, .table-wrap td { padding: 2px 5px; font-size: 10px; }
 .formula-block { font-size: 11px; padding: 4px 8px; }
 .highlight-box { padding: 4px 8px; }
 .back-btn { font-size: 10px; padding: 3px 10px; }
 .function-grid { grid-template-columns: 1fr; }
 .nav-buttons .next-btn,
 .nav-buttons .prev-btn { font-size: 10px; padding: 3px 10px; }
}
@media (max-width: 480px) {
 .lesson-title { font-size: 15px; }
 .section h2 { font-size: 11px; }
 .section h3 { font-size: 10.5px; }
 .section p { font-size: 10px; }
 .section ul { font-size: 10px; }
 .formula-block { font-size: 10px; padding: 4px 6px; }
 .table-wrap th, .table-wrap td { padding: 2px 4px; font-size: 9px; }
 .step { font-size: 10px; padding: 2px 8px; }
 .step .step-num { font-size: 10px; }
 .exercice-box { padding: 4px 6px; }
 .exercice-box .ex-title { font-size: 11px; }
 .exercice-box .ex-question { font-size: 10px; }
 .solution-box .sol-content { font-size: 10px; }
 .toggle-sol { font-size: 9px; padding: 2px 8px; }
 .back-btn { font-size: 9px; padding: 3px 8px; }
 .function-card h4 { font-size: 11px; }
 .function-card p { font-size: 10px; }
 details summary { font-size: 10px; }
 details div { font-size: 10px; }
 .nav-buttons .next-btn,
 .nav-buttons .prev-btn { font-size: 9px; padding: 2px 8px; }
 .graph-container { padding: 8px; }
 .graph-container p { font-size: 11px; }
}
/* ============================================================
 خلفية الزليج - مدمجة مع lesson-common.css
 ============================================================ */
.moroccan-bg {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 0;
 pointer-events: none;
 overflow: hidden;
 opacity: 0.6;
}
.moroccan-bg svg {
 width: 100%;
 height: 100%;
}
.moroccan-shadow {
 position: fixed;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: 600px;
 height: 600px;
 z-index: 0;
 pointer-events: none;
 opacity: 0.08;
 background: radial-gradient(circle at center, #4ECDC4 0%, #FF6B6B 40%, #F4D03F 70%, transparent 100%);
 border-radius: 50%;
 filter: blur(80px);
 animation: shadowPulse 8s ease-in-out infinite;
}
@keyframes shadowPulse {
 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.08; }
 50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.15; }
}
.moroccan-star {
 position: fixed;
 z-index: 0;
 pointer-events: none;
 opacity: 0.04;
 font-size: 120px;
 color: #4ECDC4;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 animation: starSpin 20s linear infinite;
}
@keyframes starSpin {
 0% { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
 50% { transform: translate(-50%, -50%) rotate(180deg) scale(1.1); }
 100% { transform: translate(-50%, -50%) rotate(360deg) scale(1); }
}
.geo-pattern {
 position: fixed;
 z-index: 0;
 pointer-events: none;
 opacity: 0.03;
 color:var(--gold-text);
 font-size: 20px;
 letter-spacing: 20px;
}
.geo-pattern-1 { top: 10%; left: 5%; transform: rotate(-15deg); }
.geo-pattern-2 { bottom: 10%; right: 5%; transform: rotate(15deg); }
.geo-pattern-3 { top: 50%; left: 2%; transform: rotate(90deg); }
.geo-pattern-4 { top: 50%; right: 2%; transform: rotate(-90deg); }
.overlay-protection {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 9999;
 background: transparent;
 pointer-events: all;
 cursor: default;
 opacity: 0;
 display: none;
}
.overlay-protection.active {
 display: block !important;
 opacity: 1 !important;
 pointer-events: all !important;
}
.overlay-protection.hidden {
 display: none !important;
 opacity: 0 !important;
 pointer-events: none !important;
}
@media (max-width: 768px) {
 .moroccan-shadow { width: 300px; height: 300px; }
 .moroccan-star { font-size: 60px; }
 .geo-pattern { font-size: 14px; letter-spacing: 12px; }
}
@media (max-width: 480px) {
 .moroccan-shadow { width: 200px; height: 200px; }
 .moroccan-star { font-size: 40px; }
 .geo-pattern { font-size: 10px; letter-spacing: 8px; }
}
/* ============================================================
 حماية الصور فقط - النصوص والصيغ بقات قابلة للتحديد والنسخ
 ============================================================ */
img, svg, canvas, video {
 -webkit-user-drag: none !important;
 -moz-user-drag: none !important;
 -ms-user-drag: none !important;
 user-drag: none !important;
 -webkit-touch-callout: none !important;
 touch-callout: none !important;
 pointer-events: none !important;
}
img, svg, canvas, video {
 -webkit-user-select: none !important;
 -moz-user-select: none !important;
 -ms-user-select: none !important;
 user-select: none !important;
}
img::selection, svg::selection, canvas::selection {
 background: transparent !important;
 color: transparent !important;
}
img {
 -webkit-touch-callout: none !important;
 touch-callout: none !important;
 -webkit-tap-highlight-color: transparent !important;
}
img[src] {
 -webkit-touch-callout: none !important;
 touch-callout: none !important;
 pointer-events: none !important;
}
body {
 -webkit-touch-callout: none !important;
 touch-callout: none !important;
}
input, textarea, [contenteditable="true"] {
 -webkit-user-select: text !important;
 -moz-user-select: text !important;
 -ms-user-select: text !important;
 user-select: text !important;
}