:root { color-scheme:light; font-synthesis:none; --bg:#f3f4f6; --panel:#fff; --raised:#f9fafb; --line:#e5e7eb; --text:#1f2937; --muted:#6b7280; --soft:#6b7280; --row-done:#dcfce7; --accent:#6b7280; }
* { box-sizing:border-box; }
html { background:var(--bg); }
body { min-width:320px; margin:0; background:var(--bg); color:var(--text); font-size:20px; line-height:1.5; }
.site-header { position:sticky; z-index:5; top:0; border-bottom:1px solid #e5e7eb; background:#ffffffed; backdrop-filter:blur(12px); }
.brand-copy { display:grid; gap:1px; }.site-name { color:#111827; font-size:24px; font-weight:800; line-height:1.2; letter-spacing:-.035em; }.site-tagline { color:#6b7280; font-size:13px; }
.brand-mark { display:grid; width:42px; height:42px; place-items:center; border:1px solid #ffffff26; border-radius:13px; background:#374151; color:#fff; font:800 20px Manrope,sans-serif; }
.text-muted,.library-summary,.page-description,.home-note { color:var(--muted); }
.header-action,.clear-filter { color:#4b5563; font-size:14px; font-weight:600; }.header-action:hover,.clear-filter:hover { color:#111827; }
.notice { margin-bottom:24px; border:1px solid #fde68a; border-radius:12px; background:#fffbeb; padding:13px 16px; color:#78350f; font-size:14px; }
.library-heading,.page-heading { display:flex; align-items:end; justify-content:space-between; gap:22px; }.library-heading { padding-top:24px; }.page-heading { margin-top:30px; }
.eyebrow { color:#6b7280; font-size:12px; font-weight:800; letter-spacing:.15em; text-transform:uppercase; }
.library-heading h1,.page-heading h1 { margin:7px 0 0; font-size:clamp(30px,4vw,42px); font-weight:800; line-height:1.1; letter-spacing:-.04em; }.library-summary { margin:10px 0 0; font-size:14px; }.dot { padding:0 5px; color:#727e8d; }
.search-wrap { display:flex; min-width:min(100%,280px); align-items:center; gap:10px; border:1px solid #d1d5db; border-radius:11px; background:#fff; padding:0 13px; color:#6b7280; }.search-wrap span { font-size:22px; }.search-wrap input { width:100%; min-width:0; border:0; outline:0; background:transparent; padding:12px 0; color:#1f2937; font-size:16px; }.search-wrap input::placeholder { color:#9ca3af; }.search-wrap:focus-within { border-color:#9ca3af; box-shadow:0 0 0 3px #6b728014; }
.category-card { position:relative; display:flex; min-height:230px; flex-direction:column; align-items:flex-start; overflow:hidden; border:1px solid #e5e7eb; border-radius:17px; background:#fff; padding:22px; color:#1f2937; text-align:left; transition:transform .18s ease,background .18s ease; }.category-card:hover { transform:translateY(-2px); background:#fafafa; }.card-icon { display:grid; width:43px; height:43px; place-items:center; border:1px solid #e5e7eb; border-radius:12px; background:#f9fafb; color:#374151; font:800 16px Manrope,sans-serif; }.card-group { margin-top:19px; color:#6b7280; font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }.card-title { margin-top:4px; font:800 24px Manrope,sans-serif; letter-spacing:-.035em; }.card-desc { margin-top:6px; max-width:340px; color:#6b7280; font-size:15px; line-height:1.55; }.card-foot { display:flex; width:100%; justify-content:space-between; margin-top:auto; padding-top:16px; color:#6b7280; font-size:13px; font-weight:600; }.card-foot span:last-child { color:#374151; font-size:18px; }
.back-link { color:#4b5563; font-size:14px; font-weight:700; }.back-link:hover { color:#111827; text-decoration:underline; }.page-description { max-width:760px; margin-top:11px; font-size:16px; }.table-heading { align-items:center; }.table-heading h1 { font-size:clamp(28px,3.7vw,40px); }.table-controls { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:24px; }.table-search { flex:1; }
.table-card { display:flex; min-height:90px; align-items:center; gap:15px; border:1px solid #e5e7eb; border-radius:13px; background:#fff; padding:15px; color:#1f2937; text-align:left; transition:border-color .16s ease,background .16s ease; }.table-card:hover { border-color:#d1d5db; background:#fafafa; }.table-number { display:grid; width:42px; height:42px; flex:none; place-items:center; border:1px solid #e5e7eb; border-radius:11px; background:#f9fafb; color:#4b5563; font-size:13px; font-weight:800; }.table-card-main { display:grid; gap:4px; min-width:0; }.table-card-main b { font-size:16px; }.table-card-main small { color:#6b7280; font-size:13px; }.table-arrow { margin-left:auto; color:#4b5563; }
.basic-card { display:flex; flex-direction:column; min-height:245px; border:1px solid #e5e7eb; border-radius:14px; background:#fff; padding:19px; color:#1f2937; }.basic-card.is-memorized { border-color:#86efac; background:#f0fdf4; }.basic-card-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }.basic-group { color:#6b7280; font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }.basic-card h2 { margin:16px 0 8px; font:800 21px/1.25 Manrope,sans-serif; letter-spacing:-.02em; }.basic-card>p { margin:0; color:#4b5563; font-size:15px; line-height:1.6; }.basic-example { margin-top:auto; padding-top:15px; }.basic-example>span { color:#6b7280; font-size:10px; font-weight:800; letter-spacing:.12em; }.basic-example p { margin:5px 0 0; color:#1f2937; font-size:14px; font-weight:600; line-height:1.55; }.basic-check { display:flex; align-items:center; gap:7px; color:#4b5563; cursor:pointer; font-size:12px; font-weight:600; }.basic-check input { width:16px; height:16px; accent-color:#16a34a; }.basic-check b { font-weight:600; }
.progress-card { min-width:160px; border:1px solid #e5e7eb; border-radius:12px; background:#fff; padding:12px 15px; color:#1f2937; }.progress-label { display:block; color:#6b7280; font-size:10px; font-weight:800; letter-spacing:.12em; }.progress-card b { display:block; margin-top:3px; font:800 22px Manrope,sans-serif; }.progress-card b span { color:#6b7280; font:500 14px "DM Sans",sans-serif; }.progress-track { height:4px; margin-top:8px; overflow:hidden; border-radius:5px; background:#e5e7eb; }.progress-track i { display:block; height:100%; border-radius:5px; background:#9ca3af; transition:width .2s ease; }
.table-shell { overflow-x:auto; border:1px solid #e5e7eb; border-radius:13px; background:#fff; }.study-table { width:100%; border-collapse:separate; border-spacing:0; color:#1f2937; font-size:20px; line-height:1.55; }.study-table th { position:sticky; z-index:1; top:0; border-bottom:1px solid #e5e7eb; background:#f3f4f6; padding:15px; color:#374151; font-size:17px; font-weight:800; letter-spacing:.025em; text-align:left; }.study-table td { border-bottom:1px solid #f0f1f3; padding:13px 15px; vertical-align:middle; }.study-table tr:last-child td { border-bottom:0; }.study-table tbody tr { background:#fff; transition:background .15s ease; }.study-table tbody tr:hover { background:#fafafa; }.study-table tbody tr.is-memorized,.study-table tbody tr.is-memorized:hover { background:#dcfce7; }.study-table tbody tr.is-memorized td { color:#1f2937; }.study-table .urdu { min-width:145px; direction:rtl; text-align:right; font-family:"Noto Nastaliq Urdu",serif; font-weight:400; font-size:26px; line-height:2.5; }
.study-table tbody tr.search-target:not(.is-memorized) { background:#f3f4f6; box-shadow:inset 4px 0 #9ca3af; }
.check-head,.check-cell { width:46px; min-width:46px; padding-right:0!important; padding-left:15px!important; }.check-label { display:grid; width:20px; height:20px; cursor:pointer; place-items:center; }.check-label input { position:absolute; width:1px; height:1px; opacity:0; }.check-label span { display:block; width:18px; height:18px; border:1.5px solid #9ca3af; border-radius:5px; background:#fff; }.check-label input:checked+span { border-color:#16a34a; background:#16a34a; }.check-label input:checked+span:after { display:block; width:5px; height:9px; margin:1px 0 0 5px; transform:rotate(45deg); border:solid #fff; border-width:0 2px 2px 0; content:""; }.check-label input:focus-visible+span { outline:3px solid #6b728055; outline-offset:2px; }
.malay-cell { min-width:180px; font-weight:700; }.speak-button { display:inline-grid; width:34px; height:34px; margin-left:8px; vertical-align:middle; place-items:center; border-radius:8px; color:#4b5563; }.speak-button:hover { background:#f3f4f6; }.speak-button svg { width:19px; height:19px; fill:currentColor; }.mobile-hint { display:none; }.empty-state { border:1px dashed #d1d5db; border-radius:12px; padding:24px; color:#6b7280; font-size:16px; }
.search-results-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:8px; }.search-result { display:flex; justify-content:space-between; gap:10px; border:1px solid #e5e7eb; border-radius:11px; background:#fff; padding:12px 14px; color:#1f2937; text-align:left; }.search-result:hover { background:#fafafa; }.search-result span:first-child { display:grid; gap:4px; }.search-result b { font-size:16px; }.search-result small { color:#6b7280; font-size:13px; }.search-result span:last-child { color:#4b5563; }.home-note { margin-top:34px; font-size:13px; }.site-footer { margin-top:48px; border-top:1px solid var(--line); color:var(--soft); font-size:13px; }
.phrase-maker { display:grid; grid-template-columns:1fr 1fr; gap:16px 22px; margin-top:46px; border:1px solid #e5e7eb; border-radius:16px; background:#fff; padding:24px; }.phrase-intro { grid-column:1/-1; }.phrase-intro h2 { margin:5px 0 4px; font:800 27px/1.2 Manrope,sans-serif; letter-spacing:-.03em; }.phrase-intro>p:last-child { margin:0; color:#6b7280; font-size:15px; }.phrase-form { display:flex; flex-direction:column; gap:8px; }.phrase-form>label,.output-label { color:#6b7280; font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }.phrase-form textarea { width:100%; resize:vertical; border:1px solid #d1d5db; border-radius:10px; outline:none; background:#f9fafb; padding:12px 13px; color:#1f2937; font:400 16px/1.5 "DM Sans",sans-serif; }.phrase-form textarea::placeholder { color:#9ca3af; }.phrase-form textarea:focus { border-color:#9ca3af; box-shadow:0 0 0 3px #6b728014; }.phrase-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; }.phrase-actions>span { max-width:290px; color:#6b7280; font-size:11px; line-height:1.45; }.phrase-actions a { color:#374151; text-decoration:underline; text-underline-offset:2px; }.phrase-actions button { flex:none; border:0; border-radius:9px; background:#374151; padding:10px 13px; color:white; font-size:13px; font-weight:700; }.phrase-actions button:hover { background:#1f2937; }.phrase-actions button:disabled { cursor:wait; opacity:.65; }.phrase-output { min-height:150px; border:1px solid #e5e7eb; border-radius:10px; background:#f9fafb; padding:14px; }.phrase-output p { margin:12px 0 0; white-space:pre-wrap; color:#1f2937; font-size:20px; line-height:1.6; }.phrase-output.has-error p { color:#b91c1c; font-size:14px; }.translation-note { grid-column:1/-1; margin:0; color:#9ca3af; font-size:11px; }
@media(max-width:700px) {
  body { font-size:16px; }
  .library-heading,.page-heading { align-items:stretch; flex-direction:column; }.library-heading { padding-top:10px; gap:17px; }.library-heading h1,.page-heading h1 { font-size:32px; }.page-heading { margin-top:22px; gap:17px; }.table-heading { flex-direction:row; align-items:center; }.table-heading h1 { font-size:27px; }.page-description { font-size:14px; }.progress-card { min-width:125px; }.progress-card b { font-size:19px; }.table-controls { margin-top:19px; }.category-card { min-height:210px; padding:19px; }.card-title { font-size:22px; }.card-desc { font-size:14px; }.table-card-main b { font-size:15px; }
  .table-shell { overflow:visible; border:0; background:transparent; }.study-table,.study-table tbody { display:block; width:100%; }.study-table thead { display:none; }.study-table tr { position:relative; display:flex; flex-direction:column; gap:0; margin-bottom:11px; overflow:hidden; border:1px solid #e5e7eb; border-radius:12px; background:#fff; padding:8px 13px; }.study-table tr.is-memorized { background:#f0fdf4; }.study-table td { display:grid; grid-template-columns:minmax(108px,40%) minmax(0,1fr); align-items:center; gap:10px; width:100%; min-width:0; border-bottom:1px solid #f0f1f3; padding:8px 2px; overflow-wrap:anywhere; font-size:16px; }.study-table td:last-child { border-bottom:0; }.study-table td:before { color:#6b7280; content:attr(data-label); font-size:12px; font-weight:800; letter-spacing:.025em; line-height:1.35; }.study-table td.check-cell { position:absolute; z-index:2; top:24px; left:12px; display:block; width:22px; min-width:0; height:22px; border:0; padding:0; }.study-table td.check-cell:before { display:none; }.study-table td.malay-cell { min-width:0; min-height:48px; grid-template-columns:minmax(0,1fr); padding:9px 0 9px 37px; font-size:18px; }.study-table td.malay-cell:before { display:none; }.study-table .urdu { min-width:0; font-size:24px; line-height:2.5; }.check-label { width:22px; height:22px; }.check-label span { width:19px; height:19px; }.speak-button { width:34px; height:34px; margin:0 0 0 7px; }.study-table td.malay-cell { display:flex; justify-content:space-between; }.study-table td.malay-cell span { min-width:0; overflow-wrap:anywhere; }.study-table td.malay-cell:after { content:none; }.search-wrap { min-width:0; }.search-wrap input { font-size:15px; }.clear-filter { white-space:nowrap; }.mobile-hint { display:none; }
  .phrase-maker { grid-template-columns:1fr; gap:15px; margin-top:32px; padding:18px; }.phrase-intro { grid-column:auto; }.phrase-intro h2 { font-size:24px; }.phrase-output { min-height:115px; }.phrase-actions { align-items:flex-start; flex-direction:column; }.phrase-actions>span { max-width:none; }.phrase-actions button { width:100%; }
}
@media(max-width:380px) { .table-heading { align-items:flex-start; flex-direction:column; }.progress-card { width:100%; }.study-table td { grid-template-columns:minmax(100px,40%) minmax(0,1fr); gap:8px; }.table-controls { align-items:stretch; }.clear-filter { font-size:12px; } }
@media(prefers-reduced-motion:reduce) { *,*:before,*:after { scroll-behavior:auto!important; transition:none!important; } }
.phrase-actions { justify-content:flex-end; }.phrase-output-head { display:flex; align-items:center; justify-content:space-between; }