:root{ --nn-color-primary:#1e4a8d; --nn-color-accent:#c62828; --nn-color-gray:#1b1d1f; --nn-color-bg:#ffffff; --nn-color-text:#0f1113; --nn-radius:6px; --nn-gap:16px; --nn-gap-lg:24px; --nn-gap-sm:8px; --nn-font-base:"Vazirmatn", system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji", "Segoe UI Emoji"; --bs-body-font-family:var(--nn-font-base); --bs-body-color:var(--nn-color-text); --bs-body-bg:var(--nn-color-bg); --bs-primary:var(--nn-color-primary); --bs-danger:var(--nn-color-accent); }
*{box-sizing:border-box}
html{font-size:16px}
body{margin:0;line-height:1.7}
img{max-width:100%;height:auto}
a{color:var(--nn-color-primary);text-decoration:none}
a:hover{color:var(--nn-color-accent)}
.nn-container{width:100%;max-width:1200px;margin-inline:auto;padding-inline:16px}
.nn-grid{display:grid;grid-template-columns:1fr 320px;gap:24px}
.nn-header{border-bottom:1px solid #e6e7e8;background:#fff}
.nn-header__top{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.nn-nav{border-top:1px solid #eee}
.nn-menu{list-style:none;margin:0;padding:0;display:flex;gap:12px;flex-wrap:wrap}
.nn-main{padding:24px 0}

/* Bootstrap harmony */
.navbar-light .navbar-nav .nav-link{color:var(--nn-color-text)}
.navbar-light .navbar-nav .nav-link:hover{color:var(--nn-color-primary)}
.btn-primary{--bs-btn-bg:var(--nn-color-primary);--bs-btn-border-color:var(--nn-color-primary)}
.btn-outline-primary{--bs-btn-color:var(--nn-color-primary);--bs-btn-border-color:var(--nn-color-primary)}

.nn-content{min-width:0}
.nn-sidebar{min-width:0}

.nn-article{padding:16px 0;border-bottom:1px solid #f0f1f2}
.nn-article__title{margin:0 0 8px;font-size:1.25rem}
.nn-article__meta{font-size:.85rem;color:#60656b;display:flex;gap:12px}
.nn-article__excerpt{margin-top:8px;color:#2a2e33}

.nn-footer{background:#101214;color:#cbd1d6;margin-top:32px}
.nn-footer__widgets{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:24px 0}
.nn-footer__bottom{border-top:1px solid #23262a;padding:16px 0;color:#9aa1a8}
.nn-copy{margin:0}

@media (max-width:1024px){
	.nn-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
	html{font-size:15px}
	.nn-header__top{flex-direction:column;gap:12px}
}