/* Arabic fonts preview (widgets/fonts.html + assets/fonts.js) */
.fx-tool{background:var(--surface);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-lg);padding:16px;display:flex;flex-direction:column;gap:12px;min-width:0}
.fx-l{font-size:14px;font-weight:700;color:var(--muted)}
.fx-text{font-family:var(--arab);font-size:26px;line-height:1.7;color:var(--ink);background:var(--paper);border:2px solid var(--line);border-radius:14px;padding:10px 14px;width:100%;box-sizing:border-box;resize:vertical;min-height:84px}
.fx-text:focus{outline:none;border-color:var(--acc)}
.fx-samples,.fx-filter,.fx-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;min-width:0}
.fx-lab{font-size:14px;font-weight:700;color:var(--muted)}
.fx-chip{font:inherit;font-size:14px;font-weight:700;cursor:pointer;color:var(--ink);background:var(--soft2);border:0;box-shadow:inset 0 0 0 1px var(--line);border-radius:var(--pill);padding:7px 13px;min-height:36px;line-height:1.2;text-decoration:none;display:inline-flex;align-items:center}
.fx-chip:hover{box-shadow:inset 0 0 0 1px var(--acc)}
.fx-kb{color:var(--acc-dark)}
.fx-f{display:flex;flex-direction:column;gap:4px;font-size:14px;font-weight:700;color:var(--muted);min-width:0}
.fx-size{flex:1 1 200px}
.fx-size input{width:100%;accent-color:var(--acc)}
.fx-size output{color:var(--ink)}
.fx-f select{font:inherit;font-size:15px;color:var(--ink);background:var(--paper);border:2px solid var(--line);border-radius:12px;padding:6px 10px;min-height:42px}
.fx-filter .seg{flex-wrap:wrap}
.fx-count{margin:0;font-size:14px;font-weight:700;color:var(--muted)}
.fx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:12px;border-radius:16px}
.fx-card{--c-bg:var(--paper);--c-ink:var(--ink);--c-muted:var(--muted);--c-line:var(--line);--c-link:var(--acc-dark);
  background:var(--c-bg);color:var(--c-ink);border:1px solid var(--c-line);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:8px;min-width:0}
.fx-card[hidden]{display:none}
.fx-dark .fx-card{--c-bg:#101c1a;--c-ink:#f1f5f2;--c-muted:#a9bdb6;--c-line:#2b4540;--c-link:#7ad6c4}
.fx-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.fx-name{margin:0;font-weight:800;font-size:17px}
.fx-tag{font-size:12px;font-weight:700;color:var(--c-muted);border:1px solid var(--c-line);border-radius:var(--pill);padding:2px 9px;white-space:nowrap}
.fx-prev{margin:0;font-family:var(--arab);font-size:40px;line-height:1.75;min-height:1.75em;overflow-wrap:anywhere;font-synthesis:none;transition:opacity .2s}
.fx-card.is-loading .fx-prev{opacity:.45}
.fx-shown{margin:0;font-size:12px;color:var(--c-muted);min-height:1.2em}
.fx-meta{margin:0;display:grid;gap:3px;font-size:13px}
.fx-meta div{display:flex;gap:6px;min-width:0}
.fx-meta dt{color:var(--c-muted);font-weight:700;flex:0 0 5.2em}
.fx-meta dd{margin:0;min-width:0;overflow-wrap:anywhere}
.fx-card a{color:var(--c-link)}
.fx-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:4px}
.fx-links a{font-size:13px;font-weight:700;text-decoration:none;border:1px solid var(--c-line);border-radius:10px;padding:7px 10px;min-height:36px;display:inline-flex;align-items:center}
.fx-links a:hover{border-color:var(--c-link)}
.fx-note{margin:0}
@media (max-width:480px){.fx-tool{padding:12px}.fx-text{font-size:22px}}