/* ===== FirePro One Library (RTL) ===== */
.fpo-lib{direction:rtl;font-family:inherit;max-width:1100px;margin:20px auto;padding:10px}
.fpo-lib .topbar{background:#2f2f2f;color:#fff;border-radius:12px;padding:14px 16px;margin-bottom:14px;
display:flex;align-items:center;justify-content:space-between;gap:10px}
.fpo-lib .topbar .title{font-size:18px;font-weight:800}
.fpo-lib .topbar .hint{font-size:13px;opacity:.85}
.fpo-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 16px}
.fpo-tab{border:1px solid #3f3f3f;background:#1f1f1f;color:#fff;border-radius:10px;padding:10px 12px;
cursor:pointer;font-weight:700;font-size:13px}
.fpo-tab.active{background:#b63b3b;border-color:#b63b3b}
.fpo-section{display:none}
.fpo-section.active{display:block}
.fpo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media(max-width:980px){.fpo-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:640px){.fpo-grid{grid-template-columns:repeat(1,minmax(0,1fr));}}
.fpo-card{background:#2a2a2a;border:1px solid #3f3f3f;border-radius:16px;overflow:hidden;
box-shadow:0 10px 25px rgba(0,0,0,.25)}
.fpo-cover{height:170px;background:#1b1b1b;display:flex;align-items:center;justify-content:center;
border-bottom:1px solid #3f3f3f}
.fpo-cover img{max-width:100%;max-height:100%;display:block}
.fpo-body{padding:12px 12px 14px}
.fpo-name{font-size:15px;font-weight:800;color:#fff;line-height:1.5;margin:0 0 6px}
.fpo-meta{font-size:12px;color:#cfcfcf;opacity:.9;margin-bottom:10px}
.fpo-actions{display:flex;gap:8px;flex-wrap:wrap}
.fpo-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
padding:10px 12px;border-radius:10px;border:1px solid #4a4a4a;
text-decoration:none;font-weight:800;font-size:13px}
.fpo-btn.dl{background:#b63b3b;border-color:#b63b3b;color:#fff}
.fpo-btn.view{background:#1f1f1f;color:#fff}
.fpo-btn:hover{filter:brightness(1.06)}
/* Tabs */
(function(){
const tabs = document.querySelectorAll(‘.fpo-tab’);
const sections = {
nfpa: document.getElementById(‘tab-nfpa’),
public: document.getElementById(‘tab-public’),
systems: document.getElementById(‘tab-systems’),
ai: document.getElementById(‘tab-ai’),
forms: document.getElementById(‘tab-forms’)
};
tabs.forEach(btn=>{
btn.addEventListener(‘click’, ()=>{
tabs.forEach(t=>t.classList.remove(‘active’));
btn.classList.add(‘active’);
const key = btn.getAttribute(‘data-tab’);
Object.values(sections).forEach(sec=>sec.classList.remove(‘active’));
(sections[key]||sections.nfpa).classList.add(‘active’);
});
});
})();