/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Oct 24 2025 | 11:28:04 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap');
    :root{
      --brand:#2563eb; --brand-600:#1d4ed8;
      --ok:#22c55e; --bad:#ef4444; --ink:#0f172a;
    }
    *{box-sizing:border-box}
    body{font-family:'Inter',sans-serif;background:#f1f5f9;color:var(--ink)}
    
    
    .btn-gray:hover{background:#d1d5db}
    .btn-blue{background:var(--brand);color:#fff}
    .btn-blue:hover{background:var(--brand-600)}
    .chip{display:inline-flex;align-items:center;gap:.5rem;padding:.35rem .65rem;border-radius:999px;font-size:.75rem;font-weight:700}
    .lesson-quiz-link{display:flex;align-items:center;padding:.55rem;margin-top:.35rem;border-radius:8px;background:#f8fafc;cursor:pointer;transition:all .2s}
    .lesson-quiz-link:hover{background:#e2e8f0}
    .lesson-quiz-link i{margin-right:.5rem;color:#64748b}
    .view{display:none}
    .view.active{display:block}

    /* Quiz page */
    .quiz-section{margin-top:.5rem}
    .quiz-card{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:1.25rem;box-shadow:0 2px 6px rgba(2,6,23,.06)}
    .quiz-head{display:flex;justify-content:space-between;align-items:center;gap:.75rem;margin-bottom:1rem;padding-bottom:.75rem;border-bottom:2px solid var(--brand)}
    .quiz-title{font-size:1.25rem;font-weight:800;color:#1e293b}
    .quiz-question{margin-bottom:1rem;padding:1rem;background:#f8fafc;border-radius:12px;border:1px solid #e2e8f0}
    .quiz-question h4{font-weight:800;margin-bottom:.5rem}
    .option-button{display:block;width:100%;text-align:left;padding:.7rem .85rem;border-radius:.8rem;background:#e5e7eb;margin:.35rem 0;transition:transform .15s, background-color .15s}
    .option-button:hover{transform:translateY(-1px)}
    .option-button.selected{outline:3px solid var(--brand);background:#dbeafe}
    .option-button.correct{background:var(--ok)!important;color:#fff!important}
    .option-button.incorrect{background:var(--bad)!important;color:#fff!important}
    .quiz-results{margin-top:1rem;padding:1rem;border-radius:10px;text-align:center;display:none}
    .quiz-success{background:#dcfce7;color:#166534;border:1px solid #bbf7d0}
    .quiz-failure{background:#fee2e2;color:#991b1b;border:1px solid #fecaca}
    .required-error{color:var(--bad);font-size:.95rem;margin-top:.25rem;display:none}
    .validate-bar{position:sticky;bottom:0;z-index:20;background:#ffffffcc;backdrop-filter:blur(6px);border-top:1px solid #e5e7eb;margin-top:1rem;padding:.75rem 0}
	 .draggable {
            cursor: grab;
            user-select: none;
        }
        .droppable {
            border: 2px dashed #9ca3af;
        }
        .correct {
            background-color: #d1fae5;
            border-color: #34d399;
        }
        .incorrect {
            background-color: #fee2e2;
            border-color: #f87171;
        }
		
        .correct {
            background-color: #d1fae5;
            border-color: #34d399;
        }
        .incorrect {
            background-color: #fee2e2;
            border-color: #f87171;
        }
        .crossword-cell {
            background-color: white;
            border: 1px solid #d1d5db;
        }
        .crossword-empty {
            background-color: #e5e7eb;
            border: none;
        }
		  /* Custom styles for the game */
        #crossword-grid {
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }

        .crossword-cell {
            border: 1px solid #d1d5db; /* gray-300 */
        }
        
        .correct-answer {
            background-color: #d1fae5; /* green-100 */
            border-color: #34d399; /* green-400 */
        }
        
        .incorrect-answer {
            background-color: #fee2e2; /* red-100 */
            border-color: #f87171; /* red-400 */
        }
		.crossword-wrapper {
      max-width: 600px;
      margin: 0 auto;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    .crossword {
      border-collapse: collapse;
      margin: 20px auto;
    }
    .crossword td {
      width: 40px;
      height: 40px;
      border: 1px solid #ccc;
      text-align: center;
      position: relative;
      background: white;
    }
    .crossword td.blank {
      background: #f3f4f6;
      border: none;
    }
    .crossword input {
      width: 100%;
      height: 100%;
      border: none;
      text-align: center;
      font-size: 18px;
      font-weight: bold;
      text-transform: uppercase;
      padding: 0;
    }
    .crossword .number {
      position: absolute;
      top: 2px;
      left: 2px;
      font-size: 10px;
      color: #666;
    }
    .crossword input.wrong {
      background-color: #fee2e2;
    }
    .clues {
      background: #f8fafc;
      padding: 15px;
      border-radius: 8px;
      margin: 20px 0;
    }
    #check-btn, #solution-btn {
      background: #7c3aed;
      color: white;
      border: none;
      padding: 10px 15px;
      border-radius: 20px;
      font-weight: bold;
      cursor: pointer;
      margin-right: 10px;
      transition: background 0.3s;
    }
    #check-btn:hover, #solution-btn:hover {
      background: #6d28d9;
    }
    #solution-btn {
      background: #94a3b8;
    }
    #solution-btn:hover {
      background: #64748b;
    }
    #result {
      font-weight: bold;
      margin-top: 15px;
    }
	 /* ===== Matching game (scoped & reusable) ===== */
    .matching-game{--ring: #2563eb}
    .matching-cols{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
    .match-item{padding:.65rem .75rem;border-radius:.75rem;background:#fff;border:2px solid #e5e7eb;box-shadow:0 1px 2px rgba(2,6,23,.04)}
    .match-item.draggable{cursor:grab;touch-action:none}
    .match-item.dragging{opacity:.7}
    .drop-target{min-height:48px;background:#f8fafc;border:2px dashed #cbd5e1;border-radius:.75rem;display:flex;align-items:center;justify-content:center;padding:.5rem}
    .drop-target.ready{border-color:var(--ring);background:#eff6ff}
    .match-item.matched{background:#dcfce7;border-color:#22c55e}
    .drop-target.matched{background:#dcfce7;border-color:#22c55e}
    .match-item.wrong,.drop-target.wrong{background:#fee2e2;border-color:#ef4444}
    .match-feedback{font-size:.9rem;margin-top:.5rem}
    .match-actions{display:flex;gap:.5rem;margin-top:.75rem}
    .match-actions .btn{padding:.5rem .8rem}

    /* ===== Simple crossword used in L1 ===== */
    .crossword{border-collapse:collapse;margin:8px 0}
    .crossword td{width:40px;height:40px;border:1px solid #d1d5db;text-align:center;position:relative;background:#fff}
    .crossword td.blank{background:#f3f4f6;border:none}
    .crossword input{width:100%;height:100%;border:none;text-align:center;font-weight:700;text-transform:uppercase}
    .crossword .number{position:absolute;top:2px;left:4px;font-size:10px;color:#64748b}
    .wrong{background:#fee2e2!important}
	.dnd-steps .step{ user-select:none; }
  .dnd-steps .dragging{ opacity:.6; }
  .dnd-steps .over{ outline:2px dashed #94a3b8; }
  .dnd-steps.correct { background:#dcfce7; border-color:#22c55e; }
  .dnd-steps.incorrect { background:#fee2e2; border-color:#ef4444; }
  .container{max-width:1400px;margin:auto;border-radius:1rem;box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);overflow:hidden;background:#fff}
    .sidebar{background:#e2e8f0}
    .lesson-item{cursor:pointer}
    .lesson-item.active{background:rgba(37,99,235,.08)}
    .lesson-item.active .lesson-title,.lesson-item.active .lesson-icon{color:var(--brand)}
    .lesson-item.completed{background:rgba(34,197,94,.15);}
    .lesson-item.completed .lesson-title,.lesson-item.completed .lesson-icon{color:var(--ok)!important;font-weight:700;}
    .video-container{position:relative;width:560px;max-width:100%;aspect-ratio:16/9;border-radius:14px;overflow:hidden;box-shadow:0 8px 24px rgba(2,6,23,.10)}
    .video-container iframe,.video-container video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
	.notes-panel{width:360px;max-width:100%}
    .lesson-box{background:#ffffff;border:1px solid #e5e7eb;border-radius:22px;padding:18px 20px;box-shadow:0 10px 30px -12px rgba(2,6,23,.12)}
    .highlight{background:#f0f7ff;border-left:4px solid var(--brand);padding:14px;border-radius:12px}
    .progress-bar-fill{transition:width .5s ease-in-out}
    .btn{border-radius:12px;padding:.8rem 1rem;font-weight:800}
    .btn-gray{background:#e5e7eb;color:#111827}
    .container{max-width:1400px;margin:auto;border-radius:1rem;box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);overflow:hidden;background:#fff}
    .sidebar{background:#e2e8f0}
    .lesson-item{cursor:pointer}
    .lesson-item.active{background:rgba(37,99,235,.08)}
    .lesson-item.active .lesson-title,.lesson-item.active .lesson-icon{color:var(--brand)}
    .lesson-item.completed{background:rgba(34,197,94,.15);}
    .lesson-item.completed .lesson-title,.lesson-item.completed .lesson-icon{color:var(--ok)!important;font-weight:700;}
    .video-container{position:relative;width:560px;max-width:100%;aspect-ratio:16/9;border-radius:14px;overflow:hidden;box-shadow:0 8px 24px rgba(2,6,23,.10)}
    .video-container iframe,.video-container video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
	.notes-panel{width:360px;max-width:100%}
    .lesson-box{background:#ffffff;border:1px solid #e5e7eb;border-radius:22px;padding:18px 20px;box-shadow:0 10px 30px -12px rgba(2,6,23,.12)}
    .highlight{background:#f0f7ff;border-left:4px solid var(--brand);padding:14px;border-radius:12px}
    .progress-bar-fill{transition:width .5s ease-in-out}
    .btn{border-radius:12px;padding:.8rem 1rem;font-weight:800}
    .btn-gray{background:#e5e7eb;color:#111827}