.als-set-ui{--als-bg1:#eff6ff;--als-bg2:#f5f3ff;--als-primary:#2563eb;--als-primary-2:#7c3aed;--als-text:#0f172a;--als-soft:#64748b;--als-card:#ffffff;--als-border:#e5e7eb;--als-shadow:0 18px 45px rgba(15,23,42,.08);font-family:Inter,system-ui,-apple-system,Segoe UI,Arial,sans-serif;color:var(--als-text);margin:20px 0}
.als-set-shell{background:linear-gradient(180deg,var(--als-bg1),#fff 40%,var(--als-bg2));border:1px solid #dbe4ff;border-radius:28px;padding:24px;box-shadow:var(--als-shadow);overflow:hidden}
.als-set-top{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.als-set-title{font-size:30px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.als-set-desc{color:var(--als-soft);margin-top:8px;font-size:15px;max-width:740px}
.als-global-controls{display:flex;gap:12px;align-items:center}
.als-filter-label{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.9);border:1px solid var(--als-border);padding:10px 14px;border-radius:16px;box-shadow:0 10px 24px rgba(15,23,42,.04)}
.als-filter-label span{font-size:14px;font-weight:700}
.als-difficulty-filter{border:0;background:transparent;font-weight:700;outline:none}
.als-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.als-practice-card{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(248,250,252,.98));border:1px solid var(--als-border);border-radius:24px;padding:18px;box-shadow:0 14px 36px rgba(15,23,42,.07);backdrop-filter:blur(5px);transition:transform .2s ease,box-shadow .2s ease,opacity .2s ease}
.als-practice-card:hover{transform:translateY(-2px);box-shadow:0 20px 40px rgba(15,23,42,.10)}
.als-card-head{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:60px;margin-bottom:16px}
.als-card-head .als-target-word{margin:0;line-height:1.8;font-size:36px;color:#172554;overflow-wrap:anywhere}
.als-card-head .als-chip{flex-shrink:0}
.als-chip{display:inline-flex;align-items:center;justify-content:center;padding:7px 11px;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:.02em;text-transform:capitalize}
.als-chip-easy{background:#dcfce7;color:#166534}
.als-chip-medium{background:#fef3c7;color:#92400e}
.als-chip-hard{background:#fee2e2;color:#991b1b}
.als-chip-neutral{background:#e0e7ff;color:#3730a3}
.als-target-word{font-size:34px;font-weight:800;line-height:1.25;margin-bottom:12px;word-break:break-word}
.als-step-box{background:#0f172a;color:#f8fafc;border-radius:18px;padding:18px 16px;font-size:32px;font-weight:800;text-align:center;min-height:76px;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.als-progress-wrap{margin:15px 0 12px}
.als-progress-bar{width:100%;height:12px;background:#e2e8f0;border-radius:999px;overflow:hidden}
.als-progress-fill{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--als-primary),var(--als-primary-2));border-radius:999px;transition:width .25s ease}
.als-step-counter{margin-top:8px;font-size:13px;color:var(--als-soft);font-weight:700}
.als-controls{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-top:14px}
.als-btn{appearance:none;border:0;border-radius:16px;padding:12px 14px;font-size:14px;font-weight:800;cursor:pointer;transition:transform .15s ease,opacity .15s ease,box-shadow .15s ease;background:#eef2ff;color:#1e3a8a;box-shadow:0 8px 20px rgba(59,130,246,.12)}
.als-btn:hover{transform:translateY(-1px)}
.als-btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
.als-listen-word{background:linear-gradient(135deg,#2563eb,#4f46e5);color:#fff}
.als-listen-full{background:linear-gradient(135deg,#7c3aed,#9333ea);color:#fff}
.als-reset-card{background:#f8fafc;color:#0f172a;border:1px solid #cbd5e1;box-shadow:none}
.als-status-message{min-height:24px;margin-top:10px;font-size:13px;color:var(--als-soft);font-weight:700}
.als-hidden{display:none!important}
.als-set-ui [hidden]{display:none!important}
.als-set-ui *{box-sizing:border-box}
.als-mode-toolbar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:0 0 24px;padding-bottom:20px;border-bottom:1px solid #dbe4ff}
.als-mode-switch{display:flex;padding:5px;background:#e8edf9;border-radius:16px;gap:4px}
.als-mode-button,.als-activity-button{appearance:none;border:0;cursor:pointer;font:700 14px/1.3 Inter,system-ui,sans-serif;border-radius:11px;color:#475569;background:transparent;padding:12px 22px;min-height:44px}
.als-mode-button[aria-pressed=true]{background:#172554;color:white;box-shadow:0 4px 10px #17255424}
.als-mode-caption{font-size:14px;color:#475569}
.als-practice-choices{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:#eef2ff;border:1px solid #dce3fa;border-radius:13px;padding:4px;gap:3px;margin-bottom:16px}
.als-activity-button{padding:10px 4px;font-size:13px;min-width:0}
.als-activity-button[aria-pressed=true]{color:#4338ca;background:white;box-shadow:0 2px 8px #1e3a8a18}
.als-practice-prompt{color:#334155;font-size:15px;font-weight:650;line-height:1.55;margin:0 0 12px;min-height:46px}
.als-practice-help{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.als-practice-primary,.als-practice-secondary{appearance:none;cursor:pointer;border-radius:12px;font:700 13px/1.4 Inter,system-ui,sans-serif;padding:11px 14px;min-height:44px;border:1px solid #cbd5e1;box-shadow:none}
.als-practice-primary{background:#4f46e5;border-color:#4f46e5;color:white;display:block;width:100%;margin:10px 0}
.als-practice-primary:hover{background:#4338ca}
.als-practice-secondary{background:white;color:#334155}
.als-practice-secondary:hover{background:#eef2ff;color:#3730a3}
.als-set-ui button:focus-visible,.als-set-ui input:focus-visible,.als-set-ui select:focus-visible{outline:3px solid #2563eb;outline-offset:3px}
.als-student-practice button:disabled{opacity:.4;cursor:not-allowed}
.als-tile-answer{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;min-height:91px;border:2px dashed #b6c4f1;border-radius:17px;background:#f1f5ff;padding:12px;margin-bottom:13px}
.als-answer-empty{direction:ltr;font-size:13px;color:#64748b;font-weight:500}
.als-tile-bank{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;min-height:58px}
.als-letter-tile{appearance:none;display:inline-flex;justify-content:center;align-items:center;min-width:49px;min-height:58px;cursor:pointer;background:white;color:#1e293b;border:1px solid #cbd5e1;border-bottom:3px solid #a5b4fc;border-radius:12px;font-family:'Noto Naskh Arabic','Traditional Arabic',Arial,serif;font-size:30px;font-weight:600;padding:5px 12px;line-height:1.6;box-shadow:0 3px 8px #1e3a8a0a}
.als-letter-tile:hover{background:#eef2ff;border-color:#818cf8}
.als-chosen-tile{color:#3730a3;border-color:#a5b4fc;background:white}
.als-type-label{font-size:13px;font-weight:700;display:block}
.als-type-input{display:block;width:100%;border:2px solid #c7d2fe!important;background:white!important;color:#172554!important;border-radius:15px!important;font:32px/1.7 'Noto Naskh Arabic','Traditional Arabic',Arial,serif!important;padding:10px 14px!important;margin:8px 0 12px!important;min-height:76px}
.als-tashkeel-keys{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-bottom:12px}
.als-mark-key{appearance:none;border:1px solid #cbd5e1;border-radius:9px;background:white;color:#334155;cursor:pointer;font:25px/1.8 Arial,serif;min-height:44px;padding:2px 6px}
.als-mark-key:hover{background:#eef2ff}
.als-small-note{font-size:12px!important;color:#526079;line-height:1.6!important;margin:10px 0!important}
.als-practice-result{background:#f8fafc;border:1px solid #e2e8f0;border-radius:16px;padding:14px;margin-top:18px}
.als-result-label{display:block;font-size:13px;color:#334155;margin-bottom:10px}
.als-result-bar{height:10px;background:#e2e8f0;border-radius:20px;overflow:hidden}
.als-result-bar>span{display:block;width:0;height:100%;border-radius:20px;background:linear-gradient(90deg,#6366f1,#10b981);transition:width .25s ease}
.als-practice-feedback{font-size:13px;line-height:1.6;margin-top:10px;color:#475569;overflow-wrap:anywhere}
.als-result-good{color:#166534;font-weight:700}
.als-attempt-history{font-size:12px;color:#64748b;margin-top:9px}
.als-score-pill{display:inline-block;font-size:12px;background:#e0e7ff;color:#3730a3;padding:5px 8px;border-radius:7px;margin:6px 5px 0 0}
.als-answer-review{display:flex;gap:5px;justify-content:center;flex-wrap:wrap;margin-top:12px;font:27px/1.8 Arial,serif}
.als-answer-review>span{padding:0 6px;border-radius:6px}
.als-letter-correct{color:#166534;background:#dcfce7}
.als-letter-wrong{color:#991b1b;background:#fee2e2;text-decoration:underline dotted;text-underline-offset:5px}
.als-correction-label{font-size:12px;margin-top:10px;color:#475569}
.als-correct-word,.als-revealed-word{font:32px/1.8 'Noto Naskh Arabic','Traditional Arabic',Arial,serif;color:#172554;text-align:center}
.als-revealed-word{background:#fefce8;border-radius:12px;padding:8px;margin-bottom:12px}
.als-try-again{width:100%;margin-top:12px}
.als-record-time{font-size:14px;color:#b91c1c;font-variant-numeric:tabular-nums;font-weight:700}
.als-spell-nav{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 16px}
.als-spell-step{appearance:none;border:1px solid #cbd5e1;border-radius:10px;background:#fff;color:#475569;cursor:pointer;min-height:48px;padding:5px 11px;font:22px/1.6 'Noto Naskh Arabic','Traditional Arabic',Arial,serif}
.als-spell-step[aria-current=step]{border-color:#6366f1;background:#eef2ff;color:#3730a3;box-shadow:0 0 0 2px #c7d2fe}
.als-spell-step[data-result=matched]{border-bottom:3px solid #16a34a}
.als-spell-step[data-result=retry]{border-bottom:3px solid #d97706}
.als-spell-caption{font-size:12px;font-weight:750;color:#64748b;margin:6px 0}
.als-spell-preview{background:linear-gradient(135deg,#172554,#312e81);border-radius:16px;padding:14px;color:white;text-align:center;font:38px/1.8 'Noto Naskh Arabic','Traditional Arabic',Arial,serif}
.als-spell-step-result{font-size:12px;color:#475569;margin:9px 0;line-height:1.6}
.als-next-step{width:100%;margin-top:8px}
.als-heard-text{font:25px/1.8 'Noto Naskh Arabic','Traditional Arabic',Arial,serif;color:#334155;overflow-wrap:anywhere}
.als-listen-status:empty{display:none}
.als-set-ui[data-mode=practice] .als-grid{align-items:start}
.als-set-ui[data-mode=practice] .als-card-head{min-height:48px;margin-bottom:8px}
.als-student-practice .als-practice-choices{margin-bottom:10px}
.als-student-practice .als-practice-prompt{min-height:0;font-size:14px;line-height:1.45;margin:0 0 10px}
.als-student-practice .als-practice-help{display:flex;flex-wrap:nowrap;align-items:stretch;gap:8px;margin:0 0 8px}
.als-practice-help>.als-btn,.als-mic-actions{flex:1;min-width:0}
.als-mic-actions .als-practice-primary{height:100%;margin:0;padding:9px 7px}
.als-practice-help>.als-btn{padding:9px 7px}
.als-record-meta{display:flex;align-items:center;gap:8px}
.als-record-meta:has(button[hidden]):has(.als-record-time:empty){display:none}
.als-record-time{font-size:12px}
.als-student-practice .als-practice-result{padding:10px;margin-top:10px;border-radius:12px}
.als-student-practice .als-result-label{margin-bottom:7px}
.als-student-practice .als-practice-feedback{line-height:1.4;margin-top:6px}
.als-practice-feedback:empty,.als-practice-details:empty{display:none}
.als-student-practice .als-attempt-history{margin-top:6px;font-size:11px}
.als-student-practice .als-score-pill{padding:3px 5px;font-size:11px;margin-right:4px}
.als-student-practice .als-try-again{width:auto;margin-top:8px;padding:8px 12px}
.als-student-practice .als-spell-nav{margin:8px 0 12px;gap:8px}
.als-student-practice .als-spell-step{flex:1;min-width:44px;font-size:25px;line-height:1.7;padding:3px 8px}
.als-spell-step[data-result=checked]{border-bottom:3px solid #6366f1}
.als-student-practice .als-spell-caption{line-height:1.4;margin:0;font-size:12px}
.als-student-practice .als-spell-step-result{margin:6px 0;line-height:1.4}
.als-step-actions{display:flex;gap:8px;margin-top:6px}
.als-step-actions>button{flex:1;width:auto;margin:0;padding:8px 7px}
.als-step-actions:not(:has(button:not([hidden]))){display:none}
.als-voice-disclosure{font-size:11px!important;line-height:1.4!important;color:#64748b;margin:8px 0 3px!important}
.als-scoring-info{font-size:11px;color:#64748b;line-height:1.5}
.als-scoring-info summary{cursor:pointer;padding:7px 0;min-height:30px}
.als-scoring-info p{font-size:12px!important;line-height:1.5!important;margin:4px 0!important}
.als-listen-status{font-size:12px;color:#64748b;margin:0 0 6px}
@media(max-width:700px){.als-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}.als-mode-toolbar{gap:10px}.als-mode-switch{width:100%}.als-mode-button{flex:1}.als-practice-card{padding:16px}.als-mode-caption{font-size:12px}}
@media(prefers-reduced-motion:reduce){.als-set-ui *{transition:none!important}.als-practice-card:hover{transform:none}}
.als-tashkeel-note{font-size:13px;line-height:1.5;color:#92400e;background:#fffbeb;border:1px solid #fde68a;border-radius:12px;padding:10px 12px}
@media (max-width:700px){
  .als-set-shell{padding:18px}
  .als-set-title{font-size:24px}
  .als-controls{grid-template-columns:1fr}
  .als-target-word{font-size:28px}
  .als-step-box{font-size:26px}
}