:root{--bg: #fdfbf4;--bg-elev: #ffffff;--bg-elev-2: #f5ecd9;--fg: #2c2416;--fg-muted: #7a6b54;--accent: #1f6f4e;--accent-soft: #d5ebde;--accent-deep: #144832;--danger: #b91c1c;--border: #e7dcc4;--border-strong: #d4c69a;--shadow: 0 1px 2px rgba(44, 36, 22, .05), 0 4px 12px rgba(44, 36, 22, .04);--radius: 12px;--card-min-width: 11.5rem;font-family:Noto Naskh Arabic,Amiri,Traditional Arabic,Segoe UI,system-ui,sans-serif;color-scheme:light;font-feature-settings:"kern" 1,"liga" 1}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:var(--bg);color:var(--fg);line-height:1.6;font-size:17px;background-image:radial-gradient(at top right,rgba(212,198,154,.18),transparent 55%),radial-gradient(at bottom left,rgba(31,111,78,.06),transparent 60%);background-attachment:fixed}button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}button:disabled{cursor:not-allowed;opacity:.4}a{color:var(--accent-deep)}.app{max-width:1100px;margin:0 auto;padding:1.75rem 1rem 3rem;display:flex;flex-direction:column;min-height:100%;gap:1.5rem}.app__header{text-align:center;border-bottom:1px solid var(--border);padding-bottom:1.25rem;display:flex;flex-direction:column;align-items:center;gap:.75rem}.app__title{margin:0 0 .35rem;font-size:clamp(1.7rem,4.5vw,2.5rem);font-weight:700;letter-spacing:0;color:var(--accent-deep)}.app__sub{margin:0;color:var(--fg-muted);font-size:1.05rem}.bayt{margin:.25rem 0 0;padding:0;display:flex;flex-direction:column;align-items:center;gap:.25rem}.bayt__line{margin:0;display:flex;justify-content:center;align-items:baseline;flex-wrap:wrap;gap:.4em 1.75em;font-size:clamp(1.05rem,2.4vw,1.3rem);font-weight:500;color:var(--accent-deep);line-height:1.7;max-width:38rem}.bayt__half{white-space:nowrap}.bayt__sep{color:var(--accent);font-size:.65em;opacity:.6}.bayt__attr{color:var(--fg-muted);font-size:.82rem;font-weight:400}.reciter-picker{display:inline-flex;align-items:center;gap:.55rem;background:var(--bg-elev);border:1px solid var(--border);border-radius:999px;padding:.35rem 1rem .35rem .55rem;box-shadow:var(--shadow);margin-top:.25rem}.reciter-picker__label{color:var(--fg-muted);font-size:.92rem}.reciter-picker__select{font:inherit;color:var(--accent-deep);background:transparent;border:none;padding:.15rem .25rem;font-weight:500;cursor:pointer;max-width:min(72vw,28rem)}.reciter-picker__select:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}.reciter-picker__select option{background:var(--bg-elev);color:var(--fg)}.mode-toggle{display:inline-flex;background:var(--bg-elev);border:1px solid var(--border);border-radius:999px;padding:.25rem;box-shadow:var(--shadow)}.mode-toggle__btn{padding:.4rem 1.25rem;border-radius:999px;color:var(--fg-muted);font-weight:500;font-size:.95rem;transition:background .15s ease,color .15s ease}.mode-toggle__btn:hover{color:var(--fg)}.mode-toggle__btn--active{background:var(--accent);color:#fff}.mode-toggle__btn--active:hover{color:#fff}.practice-setup{display:flex;flex-direction:column;gap:1.5rem}.practice-setup__title{margin:0;color:var(--accent-deep);font-size:1.45rem}.practice-setup__intro{margin:0;color:var(--fg-muted)}.practice-setup__section{display:flex;flex-direction:column;gap:.6rem}.practice-setup__heading{margin:0;font-size:1.1rem;color:var(--fg)}.rule-multi-select{display:flex;flex-direction:column;gap:.6rem}.rule-multi-select__actions{display:flex;gap:.5rem;align-items:center;color:var(--fg-muted);font-size:.9rem}.link-btn{color:var(--accent-deep);font-weight:500;text-decoration:underline;text-underline-offset:2px}.link-btn:hover{color:var(--accent)}.rule-multi-select__chips{display:flex;flex-wrap:wrap;gap:.5rem}.rule-chip{display:inline-flex;align-items:baseline;gap:.5em;padding:.45rem .95rem;border-radius:999px;background:var(--bg-elev);border:1px solid var(--border);color:var(--fg);font-size:.95rem;transition:background .15s ease,border-color .15s ease,color .15s ease}.rule-chip:hover{background:var(--accent-soft);border-color:var(--accent)}.rule-chip--active{background:var(--accent);color:#fff;border-color:var(--accent)}.rule-chip__name{font-weight:500}.rule-chip__count{color:var(--fg-muted);font-variant-numeric:tabular-nums;font-size:.85em}.rule-chip--active .rule-chip__count{color:#fffc}.practice-setup__hint{margin:-.25rem 0 0;color:var(--fg-muted);font-size:.9rem}.rule-letters{display:flex;flex-direction:column;gap:1.1rem}.rule-letters__row{display:flex;flex-direction:column;gap:.45rem;padding:.85rem 1rem;background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius)}.rule-letters__row-head{display:flex;align-items:baseline;justify-content:space-between;gap:.75rem;flex-wrap:wrap}.rule-letters__name{font-weight:600;color:var(--accent-deep);font-size:1.05rem}.rule-letters__status{color:var(--fg-muted);font-size:.85rem;font-variant-numeric:tabular-nums}.letter-multi-select{display:flex;flex-direction:column;gap:.6rem}.letter-multi-select__actions{display:flex;gap:.5rem;align-items:center;color:var(--fg-muted);font-size:.9rem;flex-wrap:wrap}.letter-multi-select__hint{color:var(--fg-muted);font-size:.85rem;margin-inline-start:.25rem}.letter-multi-select__chips{display:flex;flex-wrap:wrap;gap:.45rem}.letter-chip{display:inline-flex;align-items:baseline;gap:.45em;padding:.4rem .85rem;border-radius:12px;background:var(--bg-elev);border:1px solid var(--border);color:var(--fg);transition:background .15s ease,border-color .15s ease,color .15s ease;min-width:3.25rem;justify-content:center}.letter-chip:hover{background:var(--accent-soft);border-color:var(--accent)}.letter-chip--active{background:var(--accent);border-color:var(--accent);color:#fff}.letter-chip__letter{font-size:1.35rem;font-weight:600;line-height:1}.letter-chip__count{color:var(--fg-muted);font-variant-numeric:tabular-nums;font-size:.8em}.letter-chip--active .letter-chip__count{color:#ffffffd9}.practice-setup__footer{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;padding-top:.5rem;border-top:1px dashed var(--border)}.practice-setup__count{color:var(--fg-muted);font-size:.95rem}.start-btn{background:var(--accent);color:#fff;padding:.6rem 1.6rem;border-radius:999px;font-weight:600;font-size:1rem;transition:background .15s ease}.start-btn:hover:not(:disabled){background:var(--accent-deep)}.practice-session{display:flex;flex-direction:column;gap:1.5rem}.practice-session__header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap}.practice-session__counter{color:var(--fg-muted);font-variant-numeric:tabular-nums;font-size:.95rem}.shuffle-btn{background:var(--bg-elev);border:1px solid var(--border);color:var(--accent-deep);padding:.45rem 1rem;border-radius:999px;font-size:.95rem;font-weight:500}.shuffle-btn:hover{background:var(--accent-soft);border-color:var(--accent)}.practice-card{background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius);padding:2rem 1.5rem;display:flex;flex-direction:column;align-items:center;gap:1.25rem;box-shadow:var(--shadow);text-align:center}.practice-card__word{font-size:clamp(3.5rem,9vw,5.5rem);min-height:5rem;display:flex;align-items:center;justify-content:center;gap:.5em;color:var(--fg);flex-wrap:wrap;line-height:1.4;transition:filter .25s ease}.practice-card__word-next{opacity:.55}.practice-card--obscured .practice-card__word{filter:grayscale(100%)}.practice-card__chips{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;min-height:2.1rem}.practice-chip{display:inline-flex;align-items:center;padding:.35rem .9rem;border-radius:999px;background:var(--bg-elev-2);color:var(--fg);font-size:.95rem}.practice-chip--rule{background:var(--accent);color:#fff;font-weight:600}.practice-chip--letter{background:var(--accent-soft);color:var(--accent-deep);font-weight:600;font-size:1.25rem;padding:.25rem .85rem}.practice-chip--hint{background:transparent;border:1px dashed var(--border-strong);color:var(--fg-muted);font-style:italic}.practice-card__meta{color:var(--fg-muted);font-variant-numeric:tabular-nums;font-size:.9rem}.practice-card__controls{display:flex;gap:.75rem;align-items:center}.audio-btn--placeholder{background:transparent;border:1px dashed var(--border);pointer-events:none}.reveal-btn{background:var(--accent);color:#fff;padding:.55rem 1.4rem;border-radius:999px;font-weight:600;font-size:1rem;transition:background .15s ease}.reveal-btn:hover{background:var(--accent-deep)}.reveal-btn--done{background:var(--bg-elev-2);color:var(--fg-muted);cursor:default;font-weight:500}.practice-session__nav{display:flex;gap:.75rem;justify-content:space-between}.nav-btn{flex:1;background:var(--bg-elev);border:1px solid var(--border);color:var(--fg);padding:.65rem 1.25rem;border-radius:10px;font-weight:500;font-size:1rem;transition:background .15s ease,border-color .15s ease}.nav-btn:hover{background:var(--accent-soft);border-color:var(--accent)}.nav-btn--primary{background:var(--accent);color:#fff;border-color:var(--accent)}.nav-btn--primary:hover{background:var(--accent-deep)}.app__main{flex:1}.app__footer{margin-top:auto;padding-top:1rem;text-align:center;color:var(--fg-muted);border-top:1px solid var(--border);font-size:.85rem}.loading,.error,.empty{text-align:center;padding:2.25rem 1rem;color:var(--fg-muted);font-size:1.05rem}.error{color:var(--danger)}.error code{background:var(--bg-elev-2);padding:.1em .4em;border-radius:4px;font-family:Consolas,Menlo,monospace;font-size:.9em;direction:ltr;display:inline-block}.rule-picker__title{margin:0 0 .35rem;font-size:1.45rem;color:var(--accent-deep)}.rule-picker__intro{margin:0 0 1.4rem;color:var(--fg-muted)}.rule-group{margin-bottom:1.5rem}.rule-group:not(:first-of-type){padding-top:1rem;border-top:1px dashed var(--border)}.rule-group__title{margin:0 0 .75rem;font-size:1.05rem;font-weight:600;color:var(--accent-deep)}.rule-list{list-style:none;padding:0;margin:0;display:grid;gap:.85rem;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}.rule-tile{width:100%;text-align:start;background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius);padding:1.1rem 1.2rem;display:flex;flex-direction:column;gap:.35rem;box-shadow:var(--shadow);transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease}.rule-tile:hover,.rule-tile:focus-visible{border-color:var(--accent);outline:none;transform:translateY(-2px);box-shadow:0 2px 4px #1f6f4e14,0 8px 20px #2c24160f}.rule-tile__name{font-weight:700;font-size:1.2rem;color:var(--fg)}.rule-tile__count{color:var(--accent);font-size:.95rem;font-weight:500}.rule-tile__desc{color:var(--fg-muted);font-size:.95rem;line-height:1.55;margin-top:.15rem}.grid-view__header{display:flex;flex-direction:column;gap:.6rem;margin-bottom:.6rem}.grid-view__heading{display:flex;flex-direction:column;gap:.2rem}.back-btn{background:var(--bg-elev);color:var(--accent-deep);padding:.45rem .85rem;border-radius:8px;border:1px solid var(--border);font-size:.95rem;font-weight:500;flex-shrink:0;transition:background .15s ease,border-color .15s ease}.back-btn:hover{background:var(--accent-soft);border-color:var(--accent)}.breadcrumb{font-size:.92rem}.breadcrumb__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}.breadcrumb__item{display:inline-flex;align-items:center;gap:.4rem}.breadcrumb__link{color:var(--accent-deep);font-weight:500}.breadcrumb__link:hover{text-decoration:underline}.breadcrumb__current{color:var(--fg-muted)}.breadcrumb__sep{color:var(--border-strong)}.filter-bar{position:sticky;top:0;z-index:5;display:flex;flex-direction:column;gap:.6rem;padding:.6rem 0;margin:0 0 1rem;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}.grid-view__title{margin:0;font-size:1.55rem;color:var(--accent-deep);font-weight:700}.grid-view__desc{margin:.3rem 0 0;color:var(--fg-muted)}.pos-filter{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.25rem}.pos-chip{padding:.45rem 1rem;border-radius:999px;background:var(--bg-elev);border:1px solid var(--border);color:var(--fg);font-size:.95rem;transition:background .15s ease,border-color .15s ease,color .15s ease}.pos-chip:hover:not(:disabled){background:var(--accent-soft);border-color:var(--accent)}.pos-chip--active{background:var(--accent);border-color:var(--accent);color:#fff}.pos-chip__count{margin-inline-start:.4em;color:var(--fg-muted);font-variant-numeric:tabular-nums;font-size:.9em}.pos-chip--active .pos-chip__count{color:#ffffffd9}.card-grid{display:grid;gap:.85rem;grid-template-columns:repeat(auto-fill,minmax(var(--card-min-width),1fr))}.card{background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius);padding:1.15rem .9rem .85rem;display:flex;flex-direction:column;align-items:stretch;gap:.6rem;min-height:7rem;box-shadow:var(--shadow);transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease}.card:hover,.card:focus-visible{border-color:var(--accent);outline:none;transform:translateY(-2px);box-shadow:0 2px 4px #1f6f4e1a,0 8px 22px #2c241612}.card--playing{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft),0 4px 12px #1f6f4e1f}.card__word{font-size:2.6rem;text-align:center;min-height:3.1rem;display:flex;align-items:center;justify-content:center;gap:.45em;color:var(--fg);flex-wrap:wrap}.card__word-next{opacity:.55}.card__word-skel{color:var(--fg-muted);font-size:1.6rem}.card__word-fallback{color:var(--danger);font-size:1.6rem}.card__meta{display:flex;justify-content:space-between;align-items:center;font-size:.85rem;color:var(--fg-muted);gap:.45rem;flex-wrap:wrap}.card__ref{font-weight:500;color:var(--fg);flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.card__letter{display:inline-flex;align-items:center;justify-content:center;min-width:1.65rem;height:1.65rem;padding:0 .4rem;border-radius:8px;background:var(--accent-soft);color:var(--accent-deep);font-size:1.1rem;font-weight:700;line-height:1}.card__pos{color:var(--accent)}.audio-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--bg-elev-2);color:var(--accent-deep);transition:background .15s ease,transform .15s ease}.audio-btn:hover{background:var(--accent-soft)}.audio-btn--playing{background:var(--accent);color:#fff}.show-more{text-align:center;margin-top:1.4rem}.show-more__btn{padding:.55rem 1.2rem;background:var(--bg-elev);border:1px solid var(--border);color:var(--accent-deep);border-radius:8px;font-size:1rem;font-weight:500;transition:background .15s ease,border-color .15s ease}.show-more__btn:hover{background:var(--accent-soft);border-color:var(--accent)}.scroll-sentinel{height:1px;width:100%}.end-of-list{text-align:center;color:var(--fg-muted);font-size:.92rem;margin:1.5rem 0 .5rem;padding:.75rem;border-top:1px dashed var(--border)}.kbd-hint{text-align:center;color:var(--fg-muted);font-size:.85rem;margin:1.25rem 0 0}.kbd-hint kbd{display:inline-block;padding:.05em .45em;border:1px solid var(--border-strong);border-radius:4px;background:var(--bg-elev);color:var(--fg);font-family:Consolas,Menlo,monospace;font-size:.85em;font-weight:500;margin:0 .15em;direction:ltr}.empty--rich,.error--rich{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:2.5rem 1rem;border:1px dashed var(--border);border-radius:var(--radius);background:color-mix(in srgb,var(--bg-elev) 60%,transparent)}.empty__ornament,.error__ornament{color:var(--border-strong);font-size:2rem;line-height:1}.error--rich{border-color:color-mix(in srgb,var(--danger) 40%,var(--border))}@keyframes skeleton-shimmer{0%{background-position:100% 0}to{background-position:-100% 0}}.skeleton-card{pointer-events:none;border-color:var(--border)}.skeleton-card__word,.skeleton-card__ref,.skeleton-card__chip,.skeleton-card__btn{background:linear-gradient(90deg,var(--bg-elev-2) 0%,color-mix(in srgb,var(--bg-elev-2) 50%,transparent) 50%,var(--bg-elev-2) 100%);background-size:200% 100%;animation:skeleton-shimmer 1.4s ease-in-out infinite;border-radius:6px}.skeleton-card__word{height:3.1rem;margin:0 1rem}.skeleton-card__meta{display:flex;align-items:center;gap:.5rem;justify-content:space-between}.skeleton-card__ref{height:.85rem;flex:1}.skeleton-card__chip{width:2.5rem;height:1.4rem;border-radius:8px}.skeleton-card__btn{width:1.85rem;height:1.85rem;border-radius:50%;flex-shrink:0}