/*
 * Tashkeel Trainer — front-end styles. Update log: 0.1.0 (2026-07-01).
 */
.araboo-tashkeel{--tk-teal:#0E6B65;--tk-teal-l:#88B5B8;--tk-orange:#E97A4F;--tk-ink:#2b3a3c;
  max-width:100%;margin:24px auto;font-family:"Noto Naskh Arabic","Noto Sans Arabic","Inter",system-ui,sans-serif;color:var(--tk-ink);}
.araboo-tashkeel *{box-sizing:border-box;}
.tk-card{background:#fff;border:1px solid #e3eceb;border-radius:18px;padding:26px 22px;box-shadow:0 8px 30px -18px rgba(14,107,101,.4);}
.tk-center{text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;}
.tk-title{font-size:24px;margin:0;color:var(--tk-teal);font-weight:700;}
.tk-sub{font-size:15px;margin:0;color:#5e7a7e;line-height:1.6;}
.tk-field{width:100%;text-align:left;}
.tk-flabel{display:block;font-size:13px;font-weight:600;color:#5e7a7e;margin-bottom:7px;}
.tk-input{width:100%;padding:14px 16px;font-size:16px;border:2px solid var(--tk-teal-l);border-radius:12px;outline:none;}
.tk-input:focus{border-color:var(--tk-teal);}
.tk-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
.tk-chip{background:#eef5f4;border:1px solid #d5e6e4;border-radius:999px;padding:8px 14px;font-size:13px;color:var(--tk-teal);cursor:pointer;font-weight:600;}
.tk-select{display:block;width:100%;box-sizing:border-box;min-height:52px;padding:14px 16px !important;border:2px solid var(--tk-teal-l) !important;border-radius:12px !important;font-size:16px !important;line-height:normal !important;color:var(--tk-ink) !important;background:#fff !important;-webkit-appearance:none;-moz-appearance:none;appearance:none;}
.tk-btn{border:0;border-radius:12px;padding:14px 22px;font-size:16px;font-weight:600;cursor:pointer;}
.tk-btn--primary{background:var(--tk-orange);color:#fff;}
.tk-btn--ghost{background:#eef5f4;color:var(--tk-teal);}
.tk-btn--block{width:100%;}
.tk-head{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
.tk-back{background:none;border:0;color:var(--tk-teal);font-size:22px;cursor:pointer;line-height:1;padding:2px 6px;}
.tk-hint{font-size:13px;color:#8aa0a2;}
.tk-sentence{font-size:38px;line-height:1.9;text-align:center;color:#22312f;background:#f7faf9;border-radius:14px;padding:18px 16px;margin-bottom:16px;min-height:80px;}
.tk-slots{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:18px;}
.tk-gap{width:10px;}
.tk-slot{font-size:28px;min-width:46px;height:56px;padding:0 8px;border:2px solid #dbe8e6;border-radius:10px;background:#fff;color:#22312f;cursor:pointer;line-height:1;display:inline-flex;align-items:center;justify-content:center;}
.tk-slot.is-active{border-color:var(--tk-orange);box-shadow:0 0 0 3px rgba(233,122,79,.2);}
.tk-slot.is-right{border-color:#1d9e75;background:#e7f6ef;}
.tk-slot.is-wrong{border-color:#c0473f;background:#fdeceb;}
.tk-pad{display:grid;grid-template-columns:repeat(auto-fit,minmax(64px,1fr));gap:8px;margin-bottom:16px;}
.tk-key{font-size:26px;height:56px;border:2px solid var(--tk-teal-l);border-radius:12px;background:#fff;color:var(--tk-teal);cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;}
.tk-key:hover{background:#eef5f4;}
.tk-key--shadda.is-on{background:var(--tk-teal);color:#fff;border-color:var(--tk-teal);}
.tk-key--clear{font-size:14px;font-weight:600;font-family:"Inter",system-ui,sans-serif;}
.tk-actions{display:flex;gap:10px;justify-content:center;}
.tk-score{text-align:center;margin-bottom:16px;}
.tk-score-num{font-size:24px;font-weight:800;color:var(--tk-teal);}
.tk-answer-label{font-size:12px;color:#8aa0a2;text-transform:uppercase;letter-spacing:1px;margin-top:12px;font-family:"Inter",system-ui,sans-serif;}
.tk-answer{font-size:34px;line-height:1.8;color:#1a7f57;margin-top:4px;}
.tk-en{font-size:15px;color:#5e7a7e;text-align:center;margin-bottom:14px;font-family:"Inter",system-ui,sans-serif;}
.tk-tr{filter:blur(5px);cursor:pointer;user-select:none;-webkit-user-select:none;transition:filter .15s ease;display:inline-block;}
.tk-tr.is-revealed{filter:none;cursor:default;user-select:auto;-webkit-user-select:auto;}
.tk-spinner{width:46px;height:46px;border:4px solid #e3eceb;border-top-color:var(--tk-orange);border-radius:50%;animation:tk-spin .8s linear infinite;margin:6px auto;}
@keyframes tk-spin{to{transform:rotate(360deg);}}
.tk-err{background:#fdeceb;color:#a3271f;border:1px solid #f3c4bf;border-radius:10px;padding:10px 14px;margin-bottom:12px;font-size:14px;}
.tk-loading{text-align:center;color:#8aa0a2;padding:30px;}
@media(max-width:520px){.tk-sentence{font-size:30px;}.tk-slot{font-size:24px;min-width:40px;height:50px;}.tk-key{font-size:22px;height:50px;}}