:root{--bg: #faf8f5;--surface: #ffffff;--surface-alt: #f5f2ed;--primary: #2A5FE0;--primary-dark: #1A3FB0;--primary-light:#E4ECFF;--accent: #FF8A3D;--accent-dark: #B24E00;--accent-light: #FFE1C7;--on-accent: #3D2200;--correct: #2e7d32;--correct-light:#e8f5e9;--wrong: #ba1a1a;--wrong-light: #ffdad6;--purple: #7c3aed;--purple-light: #f0ecff;--blue: #2563eb;--blue-light: #eff4ff;--muted: #5B5F68;--muted-light: #9a9ea8;--border: #F0E6D8;--sidebar-bg: #16233d;--sidebar-bg-hover: #1f2f4d;--sidebar-text: #ffffff;--sidebar-text-dim: #b9c4da;--sidebar-border: rgba(255,255,255,.08);--shadow-sm: 0 2px 8px rgba(27,25,20,.06);--shadow-md: 0 6px 20px rgba(27,25,20,.09);--shadow-primary: 0 10px 24px -8px rgba(42,95,224,.35);--shadow-accent: 0 10px 24px -8px rgba(255,138,61,.4);--accent2: var(--primary);--shadow: var(--shadow-sm);--font-ui: "Rubik", sans-serif;--font-story: "Lora", serif;--font-he: "Rubik", sans-serif;--radius: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-full:9999px}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{font-family:var(--font-ui);background:var(--bg);color:#1f2937;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;user-select:none;-webkit-user-select:none}p,li,textarea,input,[contenteditable]{user-select:text;-webkit-user-select:text}h1,h2,h3,h4{font-family:var(--font-ui);font-weight:800;color:#1f2937}button{cursor:pointer;font-family:var(--font-ui);border:none;outline:none;transition:all .15s ease;font-weight:700}button:disabled{opacity:.45;cursor:not-allowed}input,select,textarea{font-family:var(--font-ui);color:#1f2937;background:var(--surface);border:2px solid var(--border);border-radius:var(--radius);padding:14px 18px;font-size:16px;width:100%;transition:border-color .15s;outline:none}input:focus,select:focus,textarea:focus{border-color:var(--primary)}.btn-primary{background:linear-gradient(180deg,var(--primary) 0%,var(--primary-dark) 100%);color:#fff;min-height:56px;padding:18px 40px;border-radius:var(--radius-xl);font-size:18px;font-weight:800;letter-spacing:.2px;box-shadow:0 4px 0 var(--primary-dark),var(--shadow-primary)}.btn-primary:hover:not(:disabled){filter:brightness(1.05);transform:translateY(-1px)}.btn-primary:active:not(:disabled){transform:translateY(2px);box-shadow:0 2px 0 var(--primary-dark)}.btn-accent{background:linear-gradient(180deg,var(--accent) 0%,#e67c00 100%);color:var(--on-accent);min-height:56px;padding:18px 40px;border-radius:var(--radius-xl);font-size:18px;font-weight:800;box-shadow:0 4px 0 var(--accent-dark),var(--shadow-accent)}.btn-accent:hover:not(:disabled){filter:brightness(1.05);transform:translateY(-1px)}.btn-accent:active:not(:disabled){transform:translateY(2px);box-shadow:0 2px 0 var(--accent-dark)}.btn-outline{background:#fff;color:var(--primary);min-height:48px;padding:14px 28px;border-radius:var(--radius-xl);font-size:15px;font-weight:700;border:2px solid var(--primary)}.btn-outline:hover:not(:disabled){background:var(--primary-light)}.btn-ghost{background:transparent;color:var(--muted);min-height:40px;padding:10px 18px;border-radius:var(--radius);font-size:14px;font-weight:600}.btn-ghost:hover:not(:disabled){background:var(--surface-alt);color:#1f2937}.card{background:var(--surface);border:2px solid var(--border);border-radius:var(--radius-lg);padding:28px;box-shadow:var(--shadow-sm)}@media (max-width: 768px){body{overflow-x:hidden}.card{padding:18px}}.badge{display:inline-block;padding:4px 12px;border-radius:var(--radius-full);font-size:13px;font-weight:700;letter-spacing:.3px}.badge-primary{background:var(--primary-light);color:var(--primary)}.badge-accent{background:var(--accent-light);color:var(--accent-dark)}.badge-green{background:var(--primary-light);color:var(--primary)}.badge-muted{background:#f3f4f6;color:var(--muted)}.badge-purple{background:var(--purple-light);color:var(--purple)}.feedback-correct{color:var(--correct);font-weight:700;font-size:14px}.feedback-wrong{color:var(--wrong);font-weight:700;font-size:14px}.question-en{font-size:26px;font-weight:700;color:#1f2937;margin-bottom:6px}.question-he{font-size:20px;font-weight:400;color:var(--muted-light);direction:rtl;text-align:right;font-family:var(--font-he);margin-bottom:18px}.feedback-correct{color:var(--correct);font-weight:700;font-size:26px}.feedback-wrong{color:var(--wrong);font-weight:700;font-size:26px}.story-text{font-family:var(--font-story);font-size:32px;line-height:1.85;color:#1f2937}.story-text p{margin-bottom:1.4em}.story-word{cursor:pointer;border-radius:6px;padding:1px 2px;transition:background .1s}.story-word:hover{background:var(--accent-light)}.story-word.collected{background:var(--accent-light);border-bottom:2.5px solid var(--accent);color:var(--accent-dark);font-weight:600}.word-bank-pill{display:inline-flex;align-items:center;gap:6px;background:var(--accent-light);border:1.5px solid var(--accent);border-radius:var(--radius-full);padding:5px 14px;font-size:13px;font-weight:700;color:var(--accent-dark)}.section-divider{border:none;border-top:2px solid var(--border);margin:32px 0}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border);border-radius:var(--radius-full)}@keyframes wordSlideIn{0%{opacity:0;transform:translate(16px)}to{opacity:1;transform:translate(0)}}@keyframes spin{to{transform:rotate(360deg)}}.spinner{display:inline-block;width:16px;height:16px;border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;vertical-align:middle;flex-shrink:0}