@import"https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=Noto+Sans+Arabic:wght@400;600;700;800;900&display=swap";*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--teal: #0D9E88;--teal-dk: #087A68;--teal-lt: #E0F7F3;--teal-xlt: #F0FBF9;--sun: #E8A020;--sun-dk: #C07010;--sun-lt: #FFF7E8;--red: #E04848;--red-dk: #C03030;--red-lt: #FFF0F0;--purple: #7C5CFC;--purple-lt: #F0ECFF;--cyan: #38BDF8;--stone-900: #111827;--stone-800: #1F2937;--stone-700: #374151;--stone-500: #6B7280;--stone-400: #9CA3AF;--stone-300: #D1D5DB;--stone-200: #E5E7EB;--stone-100: #F3F4F6;--stone-50: #F9FAFB;--white: #FFFFFF;--bg: var(--stone-50);--surface: var(--white);--border: var(--stone-200);--border-dk: var(--stone-300);--text-primary: var(--stone-800);--text-secondary: var(--stone-500);--text-muted: var(--stone-400);--text-display: clamp(26px, 4vw, 34px);--text-h1: 24px;--text-h2: 18px;--text-h3: 15px;--text-body: 15px;--text-sm: 13px;--text-xs: 11px;--weight-regular: 600;--weight-bold: 700;--weight-black: 800;--sp-1: 4px;--sp-2: 8px;--sp-3: 12px;--sp-4: 16px;--sp-5: 20px;--sp-6: 24px;--sp-8: 32px;--sp-10: 40px;--sp-12: 48px;--r-sm: 8px;--r-md: 12px;--r-lg: 16px;--r-xl: 20px;--r-2xl: 24px;--r-full: 9999px;--shadow-xs: 0 1px 2px rgba(0,0,0,.04);--shadow-sm: 0 2px 4px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.05);--shadow-md: 0 4px 12px -1px rgba(0,0,0,.1), 0 2px 6px -2px rgba(0,0,0,.06);--shadow-lg: 0 12px 24px -4px rgba(0,0,0,.12), 0 4px 8px -4px rgba(0,0,0,.06);--shadow-xl: 0 24px 40px -6px rgba(0,0,0,.14), 0 8px 16px -6px rgba(0,0,0,.08);--shadow-teal: 0 6px 20px -2px rgba(13,158,136,.32), 0 2px 6px -2px rgba(13,158,136,.18);--shadow-sun: 0 6px 20px -2px rgba(232,160,32,.32), 0 2px 6px -2px rgba(232,160,32,.18);--shadow-red: 0 6px 20px -2px rgba(224,72,72,.28), 0 2px 6px -2px rgba(224,72,72,.15);--emoji-shadow: drop-shadow(0 2px 4px rgba(0,0,0,.22)) drop-shadow(0 1px 2px rgba(0,0,0,.14));--emoji-shadow-lg: drop-shadow(0 4px 8px rgba(0,0,0,.28)) drop-shadow(0 2px 4px rgba(0,0,0,.18));--ease: cubic-bezier(.4, 0, .2, 1);--ease-out: cubic-bezier(0, 0, .2, 1);--ease-spring: cubic-bezier(.34, 1.56, .64, 1);--dur-fast: .11s;--dur-base: .2s;--dur-slow: .32s;--font: "Nunito", sans-serif;--header-h: 60px;--sidebar-w: 220px}html{font-size:16px;-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden}body{font-family:var(--font);background:var(--bg);color:var(--text-primary);min-height:100vh;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;letter-spacing:-.01em}::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border-dk);border-radius:var(--r-full)}::-webkit-scrollbar-thumb:hover{background:var(--stone-400)}:focus{outline:none}:focus-visible{outline:2.5px solid var(--teal);outline-offset:2px;border-radius:var(--r-sm)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);border:none;font-family:var(--font);font-weight:var(--weight-bold);cursor:pointer;white-space:nowrap;text-decoration:none;letter-spacing:.01em;position:relative;transition:transform var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease),background var(--dur-base) var(--ease),border-color var(--dur-base) var(--ease),opacity var(--dur-base) var(--ease)}.btn:disabled{opacity:.42;cursor:default;pointer-events:none}.btn svg{flex-shrink:0}.btn-lg{padding:13px var(--sp-6);font-size:var(--text-body);border-radius:var(--r-lg)}.btn-md{padding:9px var(--sp-5);font-size:var(--text-sm);border-radius:var(--r-md)}.btn-sm{padding:6px var(--sp-3);font-size:var(--text-sm);border-radius:var(--r-sm)}.btn-xs{padding:4px var(--sp-2);font-size:var(--text-xs);border-radius:6px}.btn-full{width:100%}.btn-primary{background:var(--teal);color:#fff;box-shadow:0 1px 2px #00000014,0 4px 12px #0d9e8833}.btn-primary:hover{background:#0bb59c;transform:translateY(-1px);box-shadow:0 2px 4px #00000014,0 8px 20px #0d9e8840}.btn-primary:active{transform:translateY(1px);box-shadow:0 1px 2px #00000014}.btn-accent{background:var(--sun);color:#fff;box-shadow:0 1px 2px #00000014,0 4px 12px #e8a02033}.btn-accent:hover{background:#f0aa28;transform:translateY(-1px);box-shadow:0 2px 4px #00000014,0 8px 20px #e8a02040}.btn-accent:active{transform:translateY(1px);box-shadow:0 1px 2px #00000014}.btn-danger{background:var(--red);color:#fff;box-shadow:0 1px 2px #00000014,0 4px 12px #e0484833}.btn-danger:hover{background:#e85555;transform:translateY(-1px);box-shadow:0 2px 4px #00000014,0 8px 20px #e0484840}.btn-danger:active{transform:translateY(1px);box-shadow:0 1px 2px #00000014}.btn-ghost{background:var(--surface);color:var(--stone-700);border:1.5px solid var(--border)}.btn-ghost:hover{border-color:var(--teal);color:var(--teal);background:var(--teal-xlt);box-shadow:var(--shadow-teal);transform:translateY(-1px)}.btn-ghost:active{transform:translateY(0);box-shadow:none}.btn-ghost-danger{background:var(--surface);color:var(--red);border:1.5px solid var(--stone-200)}.btn-ghost-danger:hover{background:var(--red-lt);border-color:var(--red);transform:translateY(-1px);box-shadow:0 4px 12px #e048481f}.btn-ghost-danger:active{transform:translateY(0)}.btn-subtle{background:#ffffff14;color:#ffffffd9;border:1.5px solid rgba(255,255,255,.12)}.btn-subtle:hover{background:#ffffff24;color:#fff;border-color:#ffffff38}.btn-check-inactive{background:var(--stone-100);color:var(--stone-400);box-shadow:none;cursor:default}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:var(--sp-6);box-shadow:var(--shadow-md)}.card-sm{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--sp-4) var(--sp-5);box-shadow:var(--shadow-sm)}.card-interactive{cursor:pointer;transition:transform var(--dur-base) var(--ease),box-shadow var(--dur-base) var(--ease),border-color var(--dur-base) var(--ease)}.card-interactive:hover{transform:translateY(-3px);box-shadow:var(--shadow-xl);border-color:var(--teal)}.card-interactive:active{transform:translateY(0);box-shadow:var(--shadow-xs)}.badge{display:inline-flex;align-items:center;gap:var(--sp-1);padding:3px var(--sp-2);border-radius:var(--r-full);font-size:var(--text-xs);font-weight:var(--weight-bold);letter-spacing:.03em;line-height:1}.badge-teal{background:var(--teal-lt);color:#055c50}.badge-sun{background:var(--sun-lt);color:#7a4800}.badge-red{background:var(--red-lt);color:#8c1f1f}.badge-gray{background:var(--stone-50);color:var(--stone-700);border:1px solid var(--border)}.badge-purple{background:var(--purple-lt);color:#3d2aaa}.input,.select,.textarea{width:100%;padding:12px var(--sp-4);border:1.5px solid var(--border);border-radius:var(--r-md);font-family:var(--font);font-size:var(--text-body);font-weight:var(--weight-regular);color:var(--text-primary);background:var(--surface);outline:none;transition:border-color var(--dur-base) var(--ease),box-shadow var(--dur-base) var(--ease)}.input::placeholder,.textarea::placeholder{color:var(--stone-400);font-weight:var(--weight-regular)}.input:hover,.select:hover{border-color:var(--stone-300)}.input:focus,.select:focus,.textarea:focus{border-color:var(--teal);box-shadow:0 0 0 3px #0d9e881a}.input.has-error{border-color:var(--red)}.input.has-error:focus{box-shadow:0 0 0 3px #d9404021}.textarea{resize:vertical;min-height:80px}.form-label{display:block;font-size:var(--text-xs);font-weight:var(--weight-bold);color:var(--text-secondary);text-transform:uppercase;letter-spacing:.06em;margin-bottom:var(--sp-2)}.form-hint{font-size:var(--text-xs);color:var(--text-muted);margin-top:var(--sp-1)}.form-error{font-size:var(--text-xs);color:var(--red);margin-top:var(--sp-1);font-weight:var(--weight-bold)}.form-row{margin-bottom:var(--sp-4)}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)}.stat-chip{display:flex;align-items:center;gap:5px;padding:5px var(--sp-3);background:var(--stone-100);border:1px solid var(--border);border-radius:var(--r-full);font-family:var(--font);font-weight:var(--weight-bold);font-size:var(--text-sm);color:var(--text-primary);transition:background var(--dur-base) var(--ease);cursor:default;white-space:nowrap}.stat-chip .stat-icon{font-size:15px;line-height:1}.stat-chip--dark{background:#ffffff17;border-color:#ffffff1f;color:#ffffffeb}@media (max-width: 400px){.stat-chip{padding:3px 6px;gap:3px;font-size:10px}.stat-chip .stat-icon{font-size:13px}}.skill-node{width:90px;height:90px;border-radius:22px;border:none;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--font);font-weight:var(--weight-bold);font-size:var(--text-xs);text-align:center;line-height:1.3;padding:var(--sp-2);cursor:pointer;position:relative;transition:transform var(--dur-base) var(--ease-spring),box-shadow var(--dur-base) var(--ease)}.skill-node:hover:not(.skill-locked){transform:translateY(-5px) scale(1.05)}.skill-node:active:not(.skill-locked){transform:translateY(1px) scale(.97)}.skill-icon{font-size:28px;margin-bottom:3px;display:block;filter:var(--emoji-shadow);transition:filter var(--dur-base) var(--ease),transform var(--dur-base) var(--ease)}.skill-node:hover:not(.skill-locked) .skill-icon{filter:var(--emoji-shadow-lg);transform:scale(1.08) translateY(-1px)}.skill-crown{position:absolute;top:-12px;left:50%;transform:translate(-50%);font-size:15px;line-height:1;filter:var(--emoji-shadow)}.skill-done{background:linear-gradient(145deg,#0db89e,#0a8a74);color:#ffffffeb;box-shadow:0 4px #076857,var(--shadow-teal);opacity:.82}.skill-current{background:linear-gradient(145deg,#f0ae28,#d4900e);color:#fff;box-shadow:0 4px #a86e08,var(--shadow-sun),0 0 0 4px #e8a02033;animation:nodePulse 2.4s var(--ease) infinite}.skill-active{background:linear-gradient(145deg,#0db89e,#0a8a74);color:#fff;box-shadow:0 4px #076857,var(--shadow-teal)}.skill-locked{background:linear-gradient(145deg,var(--stone-200),var(--stone-100));color:var(--stone-400);box-shadow:0 3px 0 var(--stone-300);cursor:default}.skill-locked .skill-icon{filter:grayscale(1) opacity(.5)}@keyframes nodePulse{0%,to{transform:translateY(0);box-shadow:0 4px #a86e08,var(--shadow-sun),0 0 0 4px #e8a02033}50%{transform:translateY(-5px);box-shadow:0 8px #a86e08,0 10px 28px #e8a02059,0 0 0 7px #e8a0201f}}.progress-bar{height:10px;background:#0000000f;border-radius:var(--r-full);overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,var(--teal),#0FC4A7);border-radius:var(--r-full);transition:width .5s cubic-bezier(.4,0,.2,1)}.heart{font-size:20px;display:inline-block;transition:transform var(--dur-slow) var(--ease),filter var(--dur-slow) var(--ease),opacity var(--dur-slow) var(--ease)}.heart.lost{filter:grayscale(1) brightness(.9);opacity:.22;transform:scale(.72)}@keyframes heartBreak{0%{transform:scale(1)}25%{transform:scale(1.35) rotate(-12deg)}55%{transform:scale(.55) rotate(12deg)}to{transform:scale(.78)}}.heart.breaking{animation:heartBreak .52s var(--ease) forwards}.choice-btn{background:var(--surface);border:2px solid var(--border);border-radius:var(--r-lg);padding:var(--sp-4) var(--sp-4);font-family:var(--font);font-size:var(--text-body);font-weight:var(--weight-bold);cursor:pointer;text-align:left;width:100%;color:var(--text-primary);box-shadow:0 4px 0 var(--stone-200),0 1px 3px #0000000f;transition:all var(--dur-fast) var(--ease-spring);line-height:1.35}.choice-btn:hover:not(:disabled){border-color:var(--teal);background:var(--teal-xlt);box-shadow:0 5px 0 var(--teal-dk),0 4px 16px #0b9e882e;transform:translateY(-3px)}.choice-btn:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 var(--teal-dk)}.choice-btn.selected,.choice-btn.correct{border-color:var(--teal);background:var(--teal-lt);box-shadow:0 3px 0 var(--teal-dk),0 2px 8px #0b9e8826;color:#044f43}.choice-btn.wrong{border-color:var(--red);background:var(--red-lt);box-shadow:0 3px 0 var(--red-dk),0 2px 8px #d9404026;color:#8c1f1f}.word-tile{background:var(--surface);border:2px solid var(--border);border-radius:var(--r-md);padding:8px var(--sp-4);font-size:var(--text-sm);font-weight:var(--weight-bold);cursor:pointer;color:var(--text-primary);box-shadow:0 4px 0 var(--stone-200),0 1px 3px #0000000f;transition:all var(--dur-fast) var(--ease-spring);display:inline-block;font-family:var(--font);line-height:1}.word-tile:hover{border-color:var(--teal);background:var(--teal-xlt);transform:translateY(-3px);box-shadow:0 6px 0 var(--teal-dk),0 4px 14px #0b9e882e}.word-tile:active{transform:translateY(2px);box-shadow:0 1px 0 var(--teal-dk)}.word-tile.placed{border-color:var(--teal);background:var(--teal-lt);color:#044f43;box-shadow:0 3px 0 var(--teal-dk),0 1px 6px #0b9e881f;font-weight:var(--weight-black)}.word-tile.used{opacity:0;pointer-events:none;transform:scale(.8)}.feedback{border-radius:var(--r-xl);padding:var(--sp-4) var(--sp-5);display:flex;gap:var(--sp-4);align-items:center;animation:feedbackIn .28s cubic-bezier(.34,1.56,.64,1) forwards}@keyframes feedbackIn{0%{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}.feedback-ok{background:var(--teal-lt);border:2px solid rgba(11,158,136,.22)}.feedback-err{background:var(--red-lt);border:2px solid rgba(217,64,64,.22)}.feedback h4{font-size:var(--text-body);font-weight:var(--weight-black);margin-bottom:2px;line-height:1.25}.feedback p{font-size:var(--text-sm);font-weight:var(--weight-bold)}.feedback-ok h4{color:#044f43}.feedback-ok p{color:var(--teal-dk)}.feedback-err h4{color:#8c1f1f}.feedback-err p{color:#b03030}.fb-icon{font-size:32px;flex-shrink:0;line-height:1}.toast-container{position:fixed;bottom:var(--sp-5);right:var(--sp-5);z-index:9999;display:flex;flex-direction:column;gap:var(--sp-2);pointer-events:none}.toast{background:var(--stone-900);color:#fff;padding:11px var(--sp-4);border-radius:var(--r-md);font-size:var(--text-sm);font-weight:var(--weight-bold);display:flex;align-items:center;gap:var(--sp-2);pointer-events:auto;box-shadow:var(--shadow-lg);animation:toastIn var(--dur-slow) var(--ease-out) forwards;max-width:320px}.toast.ok{border-left:3px solid var(--teal)}.toast.err{border-left:3px solid var(--red)}.toast.info{border-left:3px solid var(--sun)}@keyframes toastIn{0%{transform:translate(24px);opacity:0}to{transform:translate(0);opacity:1}}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0f16238c;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:500;display:flex;align-items:center;justify-content:center;padding:var(--sp-4);animation:overlayIn var(--dur-base) var(--ease) forwards}@keyframes overlayIn{0%{opacity:0}to{opacity:1}}.modal{background:var(--surface);border-radius:var(--r-xl);width:100%;max-width:640px;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-lg),0 0 0 1px #0000000d;animation:modalIn var(--dur-slow) var(--ease-spring) forwards}@keyframes modalIn{0%{transform:scale(.96) translateY(8px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-5) var(--sp-6);border-bottom:1.5px solid var(--border)}.modal-header h3{font-size:var(--text-h3);font-weight:var(--weight-black)}.modal-body{padding:var(--sp-6)}.modal-footer{padding:var(--sp-4) var(--sp-6);border-top:1.5px solid var(--border);display:flex;justify-content:flex-end;gap:var(--sp-2);background:var(--stone-50);border-radius:0 0 var(--r-xl) var(--r-xl)}.table{width:100%;background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-lg);overflow:hidden;border-collapse:collapse;box-shadow:var(--shadow-xs)}.table th{background:var(--stone-50);font-size:var(--text-xs);font-weight:var(--weight-bold);color:var(--text-secondary);text-transform:uppercase;letter-spacing:.06em;padding:var(--sp-2) var(--sp-4);text-align:left;border-bottom:1.5px solid var(--border)}.table td{padding:11px var(--sp-4);font-size:var(--text-sm);font-weight:var(--weight-regular);border-bottom:1px solid var(--border);vertical-align:middle}.table tr:last-child td{border-bottom:none}.table tr:hover td{background:var(--stone-50)}.toggle{position:relative;display:inline-block;width:44px;height:24px;flex-shrink:0}.toggle input{opacity:0;width:0;height:0}.toggle-slider{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--stone-200);border-radius:var(--r-full);cursor:pointer;transition:background var(--dur-base) var(--ease);box-shadow:inset 0 1px 3px #0000001a}.toggle-slider:before{content:"";position:absolute;width:18px;height:18px;border-radius:50%;background:#fff;left:3px;top:3px;transition:transform var(--dur-base) var(--ease-spring);box-shadow:0 1px 4px #0003}.toggle input:checked+.toggle-slider{background:var(--teal)}.toggle input:checked+.toggle-slider:before{transform:translate(20px)}@keyframes shake{0%,to{transform:translate(0)}18%{transform:translate(-9px)}36%{transform:translate(8px)}54%{transform:translate(-6px)}72%{transform:translate(5px)}90%{transform:translate(-3px)}}.shake{animation:shake .45s var(--ease) both}.xp-badge{background:var(--teal);color:#fff;border-radius:var(--r-full);padding:3px var(--sp-2);font-size:var(--text-xs);font-weight:var(--weight-black);display:inline-flex;align-items:center;gap:3px;box-shadow:0 1px 4px #0b9e8847}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--sp-12) var(--sp-6);text-align:center;gap:var(--sp-3)}.empty-state-icon{font-size:52px;line-height:1;margin-bottom:var(--sp-2);filter:saturate(.7)}.empty-state-title{font-size:var(--text-h2);font-weight:var(--weight-black);color:var(--text-primary)}.empty-state-body{font-size:var(--text-body);color:var(--text-secondary);max-width:300px;line-height:1.6}.divider{display:flex;align-items:center;gap:var(--sp-3);margin:var(--sp-2) 0}.divider:before,.divider:after{content:"";flex:1;height:1px;background:var(--border)}.divider span{font-size:var(--text-xs);font-weight:var(--weight-bold);color:var(--text-muted);letter-spacing:.04em;text-transform:uppercase}@media (max-width: 768px){.form-grid{grid-template-columns:1fr}.hide-mobile{display:none!important}}@media (max-width: 480px){body{overflow-x:hidden}.choice-grid-2col{grid-template-columns:1fr!important}.lesson-content{padding-left:12px!important;padding-right:12px!important}.modal-box{width:calc(100vw - 24px)!important;max-width:none!important}.match-grid .choice-btn{font-size:13px!important;padding:10px 8px!important}}[dir=rtl] .feedback{flex-direction:row-reverse;text-align:right}[dir=rtl] .form-label{text-align:right}[dir=rtl] .progress-fill{margin-left:auto}[dir=rtl] .word-tile{direction:rtl}[dir=rtl] .toast-container{left:var(--sp-5);right:auto}@keyframes wave{0%,to{transform:scaleY(.45);opacity:.55}50%{transform:scaleY(1);opacity:1}}@keyframes spin{to{transform:rotate(360deg)}}.show-mobile-only{display:none}@media (max-width: 768px){.show-mobile-only{display:block}}