.ef-wrap { max-width: 1200px; margin: 0 auto; padding: 0 12px; }
.ef-top { background:#fff;border:1px solid #e0e7ff;border-radius:10px;padding:14px;margin-bottom:14px; display:flex;flex-wrap:wrap;gap:8px;align-items:center; }
.ef-top input { padding: 8px 12px; border: 1px solid #c7d2fe; border-radius: 5px; font-size: 13px; min-width: 200px; flex: 1; }
.ef-cats { display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px; }
.ef-cat { padding: 6px 12px; background:#fff;border:1px solid #c7d2fe;border-radius:14px;cursor:pointer;font-size:12px;color:#4338ca; }
.ef-cat.active { background:#6366f1;color:#fff;border-color:#6366f1; }
.ef-cat:hover { background:#eef2ff; }
.ef-cat.active:hover { background:#4f46e5; }
.ef-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 12px; }
.ef-card { background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:14px;transition:.2s; }
.ef-card:hover { box-shadow:0 4px 16px rgba(99,102,241,.12);border-color:#c7d2fe; }
.ef-card-head { display:flex;justify-content:space-between;align-items:center;margin-bottom:8px; }
.ef-name { font-size:17px;font-weight:700;color:#312e81;font-family: ui-monospace, monospace; }
.ef-cat-tag { font-size:11px;color:#6366f1;background:#eef2ff;padding:2px 8px;border-radius:8px; }
.ef-summary { font-size:13px;color:#374151;line-height:1.6;margin-bottom:8px; }
.ef-syntax, .ef-example, .ef-tips, .ef-error { font-size:12px;line-height:1.7;margin-bottom:6px; }
.ef-syntax code, .ef-example pre { background:#f8fafc;padding:6px 8px;border-radius:4px;font-family: ui-monospace, monospace;display:block;white-space:pre-wrap;color:#1e293b;font-size:12px; }
.ef-result { color:#16a34a; font-weight:500;margin-top:4px; }
.ef-tips { color:#0284c7;background:#f0f9ff;padding:6px 10px;border-radius:6px; }
.ef-error { color:#b45309;background:#fef3c7;padding:6px 10px;border-radius:6px; }
.ef-icon { margin-right:4px; }
.ef-actions { display:flex;gap:6px;margin-top:8px; }
.ef-actions button { padding:5px 12px;background:#eef2ff;color:#4338ca;border:1px solid #c7d2fe;border-radius:5px;cursor:pointer;font-size:12px; }
.ef-sim { background:#fefce8;border:1px solid #fde047;border-radius:8px;padding:10px;margin-top:8px; }
.ef-sim-title { font-size:12px;font-weight:600;color:#854d0e;margin-bottom:6px; }
.ef-sim-inputs { display:flex;flex-direction:column;gap:6px;margin-bottom:8px; }
.ef-sim-inputs label { font-size:11px;color:#713f12;display:flex;align-items:center;gap:6px; }
.ef-sim-inputs input { flex:1;padding:5px 8px;border:1px solid #fde047;border-radius:4px;font-size:12px; }
.ef-sim-run { padding:5px 10px;background:#facc15;color:#713f12;border:0;border-radius:5px;cursor:pointer;font-size:12px;font-weight:600; }
.ef-sim-result { margin-top:8px;padding:8px;background:#fff;border-radius:4px;font-size:12px;font-family: ui-monospace, monospace; }
.ef-sim-val { color:#16a34a;font-weight:700; }
@media (max-width: 768px) { .ef-list { grid-template-columns: 1fr; } }