/* Standalone layout layer: replaces the original React inline grid/flex declarations. */

button { font: inherit; }
button:disabled { cursor: not-allowed; }
.top-bar-inner, .top-bar-left, .top-bar-right, .breaking-inner, .header-row, .nav-row { display: flex; align-items: center; }
.top-bar-inner, .header-row, .nav-row { justify-content: space-between; gap: 20px; }
.top-bar-left, .top-bar-right { gap: 16px; }
.top-bar-left > span, .top-bar-right > *, .weather-widget { display: inline-flex; align-items: center; gap: 5px; }
.top-link, .top-register, .logo-button, .nav-dropdown button, .mobile-nav-link, .mobile-subnav button, .footer-links button, .footer-bottom button, .text-button { border: 0; background: none; cursor: pointer; color: inherit; }
.top-link { color: #adb5bd; font-size: 12px; }
.top-register { background: var(--primary); color: #fff; padding: 3px 10px; border-radius: 3px; font-size: 12px; }
.top-register, .top-link { display: inline-flex; align-items: center; gap: 4px; }
.language-select { color: #adb5bd; font-size: 12px; }
.language-select select { background: transparent; border: 0; color: #adb5bd; font-size: 12px; outline: 0; }
.language-select option { color: #1a1a2e; }
.top-social, .footer-social { display: flex; gap: 6px; align-items: center; }
.top-social a { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: var(--radius-sm); background: rgba(255,255,255,.08); color: #adb5bd; }
.top-social a:hover { background: var(--primary); color: #fff; }
.breaking-inner { overflow: hidden; }
.header-row { flex-wrap: wrap; }
.logo-button { padding: 0; text-align: left; }
.header-ad-banner > div { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.header-ad-banner small { font-size: 10px; opacity: .55; }
.header-ad-banner strong { font-size: 13px; }
.header-search-wrap { margin-top: 12px; padding-bottom: 8px; }
.nav-row { min-height: 51px; }
.nav-live { margin: 10px 0; }
.nav-mobile-toggle { background: none; border: 0; color: #fff; font-size: 22px; cursor: pointer; display: none; }
.nav-dropdown { padding: 0; }
.nav-dropdown button { display: block; width: 100%; text-align: left; padding: 10px 18px; color: var(--text-secondary); font-size: 13px; border-bottom: 1px solid var(--border-light); }
.nav-dropdown button:hover { color: var(--primary); background: var(--bg-hover); padding-left: 24px; }
.mobile-nav-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 1090; opacity: 0; visibility: hidden; transition: all .25s ease; }
.mobile-nav-overlay.active { opacity: 1; visibility: visible; }
.mobile-nav { position: fixed; top: 0; left: auto !important; right: 0; bottom: 0; width: min(340px, 90vw); background: #161b22; color: #fff; z-index: 1100; overflow-y: auto; transform: translateX(100%); transition: transform .3s ease; }
.mobile-nav.open { left: auto !important; right: 0; transform: translateX(0); }
.mobile-nav-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 16px; border-bottom: 1px solid rgba(255,255,255,.08); font: 900 22px var(--font-display); }
.mobile-nav-header > span > span { color: var(--primary); }
.mobile-nav-close { border: 0; background: none; color: #fff; font-size: 20px; cursor: pointer; }
.mobile-search { padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,.08); }
.mobile-search form { display: flex; gap: 8px; }
.mobile-search input { flex: 1; min-width: 0; padding: 8px 12px; border: 1px solid rgba(255,255,255,.15); border-radius: var(--radius-md); background: rgba(255,255,255,.08); color: #fff; outline: 0; }
.mobile-search button { padding: 8px 12px; border: 0; border-radius: var(--radius-md); background: var(--primary); color: #fff; cursor: pointer; }
.mobile-nav-link { display: flex; justify-content: space-between; width: 100%; padding: 13px 16px; color: #e0e0e0; text-align: left; border-bottom: 1px solid rgba(255,255,255,.06); }
.mobile-subnav { background: rgba(0,0,0,.2); }
.mobile-subnav button { display: block; width: 100%; padding: 10px 16px 10px 32px; color: #8d9db5; text-align: left; border-bottom: 1px solid rgba(255,255,255,.04); }
.mobile-auth { padding: 16px; border-top: 1px solid rgba(255,255,255,.08); }
.mobile-auth > div:first-child { display: flex; gap: 8px; margin-bottom: 16px; }
.mobile-auth .btn { flex: 1; }
.mobile-auth .top-social { justify-content: center; }
.mobile-menu-btn { display: none; }
.page-slot { min-height: 1px; }
.hero-layout, .content-with-sidebar, .category-page-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: start; }
.hero-layout { gap: 20px; }
.hero-layout > .hero-slider-wrapper { min-width: 0; }
.hero-read-btn { margin-top: 14px; background: var(--primary); color: #fff; font-size: 12px; padding: 8px 20px; border-radius: var(--radius-full); }
.card-grid { display: grid; gap: 20px; }
.card-grid.two-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card-grid.three-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.second-row { margin-top: 24px; }
.center-action { text-align: center; margin-top: 28px; }
.home-section-gap { margin-top: 40px; }
.home-category-list { margin-top: 40px; }
.trending-panel { margin-top: 40px; background: var(--bg-primary); border-radius: var(--radius-xl); padding: 24px; border: 1px solid var(--border-color); }
.newsletter-inner { position: relative; z-index: 1; }
.newsletter-inner h2 { color: #fff; font-size: clamp(24px, 4vw, 36px); margin: 12px 0; }
.newsletter-inner p { max-width: 480px; margin: 0 auto 28px; color: rgba(255,255,255,.75); }
.newsletter-inner small { display: block; margin-top: 12px; color: rgba(255,255,255,.5); }
.newsletter-kicker { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: var(--radius-full); background: rgba(255,255,255,.1); color: rgba(255,255,255,.8); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; }
.mini-card { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border-light); cursor: pointer; }
.mini-card img { width: 70px; height: 56px; object-fit: cover; border-radius: var(--radius-sm); flex-shrink: 0; }
.mini-card h6 { font: 700 13px/1.3 var(--font-display); color: var(--text-primary); margin-bottom: 4px; }
.mini-card span, .category-mini small, .popular-item small { color: var(--text-muted); font-size: 11px; }
.compact-category { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.breaking-card-label { position: absolute; top: 10px; left: 10px; z-index: 2; }
.read-time-badge { position: absolute; right: 10px; bottom: 10px; z-index: 2; padding: 2px 7px; border-radius: 3px; background: rgba(0,0,0,.7); color: #fff; font-size: 10px; }
.category-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.category-secondary { display: flex; flex-direction: column; }
.category-mini { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border-light); cursor: pointer; }
.category-mini img { width: 80px; height: 64px; object-fit: cover; border-radius: var(--radius-sm); flex-shrink: 0; }
.category-mini span { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.category-mini h5 { font: 700 13px/1.35 var(--font-display); margin: 2px 0 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.popular-item { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border-light); cursor: pointer; }
.popular-rank { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; min-width: 26px; border-radius: 50%; background: var(--bg-tertiary); color: var(--text-muted); font-size: 11px; }
.popular-rank.first { background: var(--primary); color: #fff; }
.popular-item h6 { font: 700 13px/1.35 var(--font-display); margin: 2px 0 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tall-ad { height: 250px; }
.second-ad { height: 300px; }
.widget-copy, .footer-newsletter-copy { font-size: 13px; color: var(--text-secondary); margin-bottom: 14px; }
.full-width { width: 100%; }
.social-follow { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; margin-bottom: 6px; border-radius: var(--radius-md); background: var(--bg-tertiary); border: 1px solid var(--border-color); }
.social-follow span { display: inline-flex; gap: 10px; align-items: center; font-size: 13px; font-weight: 600; }
.dark-page-hero, .dashboard-hero { background: var(--secondary); padding: 40px 0; text-align: center; }
.dark-page-hero h1, .dashboard-hero h1 { color: #fff; font-size: clamp(28px, 5vw, 44px); margin-bottom: 8px; }
.dark-page-hero p, .dashboard-hero p { color: #adb5bd; font-size: 15px; }
.hero-filters { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 28px; }
.hero-filters .cat-tab { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.15); color: #e0e0e0; }
.hero-filters .cat-tab.active { background: var(--primary); color: #fff; }
.page-content { padding: 32px var(--spacing-md); }
.search-hero .search-bar-lg { max-width: 700px; margin: 24px auto 0; }
.popular-searches { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 16px; color: #adb5bd; font-size: 12px; }
.popular-searches button { border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.1); color: #e0e0e0; padding: 4px 12px; border-radius: var(--radius-full); cursor: pointer; }
.search-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 28px; align-items: start; }
.results-header, .dashboard-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.results-header h2, .dashboard-content > h2, .dashboard-heading h2 { font: 700 24px/1.3 var(--font-display); color: var(--text-primary); }
.results-header p { font-size: 13px; color: var(--text-muted); }
.active-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.active-filters span { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: var(--radius-full); background: rgba(192,57,43,.1); color: var(--primary); font-size: 12px; }
.active-filters button { border: 0; background: none; color: inherit; cursor: pointer; }
.empty-state { text-align: center; padding: 60px 20px; color: var(--text-muted); }
.empty-state > i { font-size: 40px; color: var(--primary); }
.empty-state h4 { margin: 12px 0 4px; }
.gallery-count { margin-bottom: 28px; color: var(--text-muted); }
.full-gallery { columns: 3; column-gap: 12px; }
.full-gallery .gallery-item { border: 0; padding: 0; width: 100%; background: none; }
.gallery-item { display: block; position: relative; overflow: hidden; border-radius: var(--radius-md); cursor: pointer; }
.gallery-item-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: rgba(0,0,0,.5); color: #fff; opacity: 0; transition: opacity .25s ease; }
.gallery-item:hover .gallery-item-overlay { opacity: 1; }
.gallery-item-overlay small { max-width: 80%; text-align: center; }
.gallery-modal { max-width: 900px; }
.lightbox-image { width: 100%; max-height: 70vh; object-fit: contain; background: #000; }
.lightbox-controls { display: flex; align-items: center; justify-content: center; gap: 24px; padding: 14px; }
.lightbox-controls button { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--bg-tertiary); color: var(--text-primary); cursor: pointer; }
.featured-video-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; margin-bottom: 40px; }
.featured-video .card-body { padding: 20px; }
.featured-video .card-body h2 { font-size: 22px; margin: 8px 0; }
.featured-video .card-body p { color: var(--text-secondary); font-size: 14px; }
.featured-label { position: absolute; top: 12px; left: 12px; }
.video-playlist { display: flex; flex-direction: column; gap: 12px; }
.playlist-thumb { position: relative; flex-shrink: 0; }
.playlist-thumb img { width: 110px; height: 80px; object-fit: cover; border-radius: var(--radius-sm); }
.playlist-thumb .play-icon { position: absolute; inset: 0; margin: auto; }
.playlist-thumb small { position: absolute; right: 4px; bottom: 4px; padding: 1px 4px; background: rgba(0,0,0,.8); color: #fff; }
.profile-hero { background: var(--secondary); padding: 40px 0; }
.profile-layout { display: flex; align-items: flex-start; gap: 28px; flex-wrap: wrap; }
.profile-avatar { width: 120px; height: 120px; border-radius: 50%; border: 4px solid var(--primary); object-fit: cover; }
.profile-layout > div { flex: 1; min-width: 260px; }
.profile-name { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.profile-name h1 { color: #fff; font-size: 32px; }
.profile-name span { padding: 4px 12px; border-radius: var(--radius-full); color: #fff; background: rgba(255,255,255,.15); font-size: 11px; }
.profile-name span:first-of-type { background: var(--primary); }
.profile-layout p { max-width: 600px; color: rgba(255,255,255,.8); margin: 8px 0 16px; }
.profile-stats { display: flex; gap: 24px; flex-wrap: wrap; margin-bottom: 20px; }
.profile-stats div { text-align: center; }
.profile-stats b { display: block; color: #fff; font: 900 24px var(--font-display); }
.profile-stats span { color: rgba(255,255,255,.6); font-size: 12px; }
.profile-actions { display: flex; align-items: center; gap: 10px; }
.profile-actions a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--radius-md); background: rgba(255,255,255,.15); color: #fff; }
.author-content { grid-template-columns: minmax(0, 1fr) 280px; }
.author-side { text-align: center; }
.author-side img { width: 80px; height: 80px; border-radius: 50%; border: 3px solid var(--primary); margin: 0 auto 10px; }
.author-side > span { color: var(--primary); font-size: 13px; font-weight: 600; }
.author-side p { margin: 16px 0; text-align: left; font-size: 13px; color: var(--text-secondary); }
.auth-page { min-height: 80vh; display: flex; align-items: center; justify-content: center; padding: 40px 20px; background: var(--bg-secondary); }
.auth-card { width: min(100%, 500px); padding: 32px; border: 1px solid var(--border-color); border-radius: var(--radius-xl); background: var(--bg-card); box-shadow: var(--shadow-lg); }
.auth-card > p { text-align: center; color: var(--text-muted); font-size: 14px; margin: 8px 0 24px; }
.auth-logo { text-align: center; font: 900 30px var(--font-display); color: var(--primary); }
.auth-logo span { color: var(--secondary); }
.auth-icon { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; border-radius: 50%; background: rgba(192,57,43,.1); color: var(--primary); font-size: 28px; }
.auth-card form { display: grid; gap: 8px; }
.auth-card .form-label { margin-top: 8px; }
.auth-card .btn { margin-top: 12px; }
.social-login-btn { padding: 10px; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-card); color: var(--text-primary); cursor: pointer; margin-bottom: 8px; }
.auth-divider { display: flex; align-items: center; gap: 12px; color: var(--text-muted); font-size: 12px; margin: 16px 0; }
.auth-divider::before, .auth-divider::after { content: ''; height: 1px; flex: 1; background: var(--border-color); }
.auth-two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.password-label { display: flex; justify-content: space-between; align-items: center; }
.password-field { position: relative; }
.password-field button { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); border: 0; background: none; color: var(--text-muted); cursor: pointer; }
.text-button { color: var(--primary); font-size: 13px; }
.remember { display: flex; align-items: center; gap: 8px; color: var(--text-secondary); font-size: 13px; margin: 10px 0; }
.interest-list { display: flex; flex-wrap: wrap; gap: 8px; }
.interest-list label { padding: 5px 12px; border: 1px solid var(--border-color); border-radius: var(--radius-full); background: var(--bg-tertiary); color: var(--text-secondary); font-size: 12px; }
.contact-hero p { max-width: 600px; margin: 0 auto; }
.contact-info-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-bottom: 48px; }
.contact-info-card { padding: 22px 16px; border: 1px solid var(--border-color); border-radius: var(--radius-lg); background: var(--bg-card); text-align: center; transition: transform .2s ease, box-shadow .2s ease; }
.contact-info-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.contact-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: 10px; border-radius: 50%; background: var(--bg-tertiary); font-size: 20px; }
.contact-info-card h3 { font-size: 16px; margin-bottom: 6px; }
.contact-info-card b, .contact-info-card small { display: block; }
.contact-info-card b { font-size: 14px; }
.contact-info-card small { color: var(--text-muted); font-size: 12px; margin-top: 4px; }
.contact-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; margin-bottom: 48px; }
.contact-columns h2 { font-size: 28px; margin-bottom: 8px; }
.contact-columns .form-label { margin-top: 14px; }
.muted { color: var(--text-muted); font-size: 14px; margin-bottom: 20px; }
.map-placeholder { min-height: 300px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--border-color); border-radius: var(--radius-lg); background: repeating-linear-gradient(135deg, var(--bg-tertiary), var(--bg-tertiary) 12px, var(--bg-hover) 12px, var(--bg-hover) 24px); color: var(--text-muted); text-align: center; }
.map-placeholder > i { color: var(--primary); font-size: 42px; }
.office-card { margin-top: 20px; padding: 20px; border: 1px solid var(--border-color); border-radius: var(--radius-lg); background: var(--bg-card); }
.office-card h4 { margin-bottom: 14px; }
.office-card h4 i { color: var(--primary); }
.office-card p { display: flex; gap: 12px; font-size: 13px; margin-bottom: 10px; }
.office-card p b { min-width: 120px; }
.faq-list { max-width: 800px; }
.accordion-header { width: 100%; border: 0; text-align: left; }
.simple-content { max-width: 1000px; }
.lead-copy { max-width: 760px; margin: 0 auto 32px; text-align: center; color: var(--text-secondary); font: 18px/1.8 var(--font-serif); }
.about-callout { padding: 32px; margin: 0 auto 40px; border-radius: var(--radius-xl); background: var(--secondary); color: #fff; text-align: center; }
.about-callout h2 { color: #fff; }
.about-callout p { color: rgba(255,255,255,.75); }
.dashboard-hero { text-align: left; padding: 32px 0; border-bottom: 3px solid var(--primary); }
.dashboard-user { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.dashboard-user img { width: 72px; height: 72px; border: 3px solid var(--primary); border-radius: 50%; }
.dashboard-user h1 { font-size: 28px; }
.dashboard-user-actions { display: flex; gap: 10px; margin-left: auto; }
.dashboard-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px; align-items: start; }
.dashboard-nav { overflow: hidden; }
.dashboard-nav-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 18px; border: 0; border-bottom: 1px solid var(--border-light); background: var(--bg-card); color: var(--text-secondary); text-align: left; cursor: pointer; }
.dashboard-nav-item.active, .dashboard-nav-item:hover { background: var(--primary); color: #fff; }
.dashboard-nav-item.logout { color: var(--primary); }
.dashboard-content > h2 { margin-bottom: 24px; }
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 32px; }
.stat-card { padding: 20px; border: 1px solid var(--border-color); border-radius: var(--radius-lg); background: var(--bg-card); text-align: center; }
.stat-card > span { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin: 0 auto 12px; border-radius: var(--radius-lg); background: var(--bg-tertiary); font-size: 22px; }
.stat-card b, .stat-card small { display: block; }
.stat-card b { font: 800 28px var(--font-display); }
.stat-card small { color: var(--text-muted); margin-top: 4px; }
.dashboard-panel { margin-bottom: 24px; padding: 20px; border: 1px solid var(--border-color); border-radius: var(--radius-lg); background: var(--bg-card); }
.dashboard-panel h3 { font: 700 16px var(--font-display); margin-bottom: 16px; }
.dashboard-panel h3 i { color: var(--primary); }
.dashboard-article { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border-light); cursor: pointer; }
.dashboard-article:last-child { border-bottom: 0; }
.dashboard-article img { width: 64px; height: 52px; object-fit: cover; border-radius: var(--radius-sm); flex-shrink: 0; }
.dashboard-article h5, .dashboard-article h4 { font-size: 13px; margin-bottom: 4px; }
.notification-item { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--border-light); color: var(--text-muted); }
.notification-item.unread { color: var(--primary); }
.notification-item p { color: var(--text-primary); font-size: 14px; margin-bottom: 4px; }
.notification-item small { color: var(--text-muted); }
.preference-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--border-light); color: var(--text-primary); }
.preference-row small { display: block; color: var(--text-muted); font-size: 12px; }
.following { background: #27ae60 !important; }
.app-badges { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.app-badges span { display: grid; grid-template-columns: 22px auto; padding: 8px 14px; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; background: rgba(255,255,255,.1); color: #fff; }
.app-badges i { grid-row: span 2; font-size: 20px; }
.app-badges small { color: #adb5bd; font-size: 9px; }
.app-badges b { font-size: 13px; }
.footer-ad { padding: 16px 0; background: rgba(0,0,0,.2); border-bottom: 1px solid rgba(255,255,255,.06); }
.footer-content { padding-top: 48px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
.footer-links { list-style: none; }
.footer-links li { margin-bottom: 8px; }
.footer-links button { display: flex; align-items: center; gap: 6px; padding: 0; color: #8d9db5; font-size: 13px; }
.footer-links button:hover, .footer-bottom button:hover { color: #fff; padding-left: 6px; }
.footer-legal-heading { margin-top: 20px; }
.footer-contact { display: grid; gap: 12px; margin-bottom: 24px; }
.footer-contact p { display: flex; gap: 10px; color: #8d9db5; font-size: 13px; }
.footer-contact i { color: var(--primary); }
.footer-form { display: grid; gap: 8px; }
.footer-form input { width: 100%; padding: 10px 14px; border: 1px solid rgba(255,255,255,.15); border-radius: var(--radius-md); background: rgba(255,255,255,.08); color: #fff; outline: 0; }
.footer-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 24px 0; border-top: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: 20px; text-align: center; }
.footer-stats i, .footer-stats strong, .footer-stats span { display: block; }
.footer-stats i { color: var(--primary); font-size: 24px; }
.footer-stats strong { color: #fff; font: 900 24px var(--font-display); }
.footer-stats span { color: #8d9db5; font-size: 12px; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0; color: #6b7a8d; font-size: 12px; }
.footer-bottom > div { display: flex; gap: 16px; }
.footer-bottom button { color: #6b7a8d; padding: 0; }
.article-main h1 { font: 800 clamp(24px, 4vw, 36px)/1.2 var(--font-display); margin: 14px 0; }
.article-kicker { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.article-kicker > span:first-child { padding: 4px 12px; border-radius: var(--radius-sm); color: #fff; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.article-kicker small { color: var(--text-muted); }
.article-subtitle { margin-bottom: 20px; color: var(--text-secondary); font: italic 18px/1.6 var(--font-serif); }
.article-tools { display: flex; gap: 8px; margin-left: auto; }
.article-tools button { padding: 3px 9px; border: 1px solid var(--border-color); border-radius: 4px; background: var(--bg-tertiary); color: var(--text-secondary); cursor: pointer; }
.article-tools button.selected { background: var(--primary); color: #fff; }
.article-figure { margin: 0 0 28px; }
.article-figure figcaption, .article-body figcaption { margin-top: 8px; color: var(--text-muted); font-size: 12px; font-style: italic; text-align: center; }
.article-share-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; margin-bottom: 28px; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); flex-wrap: wrap; }
.like-btn { display: flex; align-items: center; gap: 6px; padding: 7px 16px; border: 1.5px solid var(--border-color); border-radius: var(--radius-full); background: var(--bg-tertiary); color: var(--text-secondary); cursor: pointer; }
.like-btn.liked { border-color: var(--primary); background: rgba(192,57,43,.1); color: var(--primary); }
.key-targets { padding: 20px; margin: 24px 0; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-secondary); }
.key-targets h4 { font-size: 15px; margin-bottom: 12px; }
.key-targets h4 i { color: var(--primary); margin-right: 8px; }
.key-targets ul { padding-left: 20px; line-height: 2; }
.article-tags { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border-color); }
.article-tags strong { margin-right: 10px; color: var(--text-muted); font-size: 13px; }
.author-card-heading { display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; }
.author-card-heading h4 { font-size: 18px; }
.author-card-heading span { color: var(--primary); font-size: 13px; font-weight: 600; }
.prev-next { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 32px; }
.prev-next button { display: flex; align-items: flex-start; gap: 10px; padding: 14px; border: 1px solid var(--border-color); border-radius: var(--radius-lg); background: var(--bg-card); color: var(--text-primary); text-align: left; cursor: pointer; }
.prev-next button:last-child { justify-content: flex-end; text-align: right; }
.prev-next button > i { color: var(--primary); font-size: 18px; }
.prev-next small, .prev-next b { display: block; }
.prev-next small { margin-bottom: 4px; color: var(--text-muted); font-size: 11px; text-transform: uppercase; }
.prev-next b { font-size: 13px; line-height: 1.3; }
.article-related { margin-top: 40px; }
.comments-section { margin-top: 40px; }
.comment-form { padding: 20px; margin-bottom: 24px; border: 1px solid var(--border-color); border-radius: var(--radius-lg); background: var(--bg-card); }
.comment-form h4 { font-size: 15px; margin-bottom: 16px; }
.comment-form textarea { margin-top: 12px; }
.comment-form > div:last-child { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; flex-wrap: wrap; color: var(--text-muted); font-size: 13px; }
.comment-item { display: flex; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--border-light); }
.comment-avatar { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; }
.comment-body { flex: 1; }
.comment-header { display: flex; justify-content: space-between; gap: 10px; }
.comment-header small { color: var(--text-muted); }
.comment-text { margin: 6px 0; color: var(--text-secondary); font-size: 14px; }
.comment-actions { display: flex; gap: 12px; }
.comment-actions button { border: 0; background: none; color: var(--text-muted); cursor: pointer; font-size: 12px; }
.footer-logo { margin-bottom: 12px; }
.toast-container { position: fixed; top: 24px; right: 24px; z-index: 1200; }
.toast { display: flex; align-items: center; gap: 10px; min-width: 250px; padding: 14px 18px; border-left: 4px solid #3498db; border-radius: var(--radius-md); background: var(--bg-card); color: var(--text-primary); box-shadow: var(--shadow-lg); }
.toast.success { border-left-color: #27ae60; }
.back-to-top { position: fixed; right: 28px; bottom: 28px; z-index: var(--z-fixed); width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--primary); color: #fff; cursor: pointer; opacity: 0; visibility: hidden; transition: all .25s ease; }
.back-to-top.visible { opacity: 1; visibility: visible; }
.reading-progress { position: fixed; top: 0; left: 0; z-index: 1300; height: 4px; background: var(--primary); transition: width .1s linear; }
@media (max-width: 991px) {
  .nav-list { display: none; }
  .nav-mobile-toggle { display: flex; }
  .nav-live { margin-left: auto; margin-right: 12px; }
  .mobile-menu-btn { display: inline-flex; }
  .hero-layout, .content-with-sidebar, .category-page-layout, .author-content { grid-template-columns: 1fr; }
  .content-with-sidebar > .sidebar, .category-page-layout > .sidebar, .author-content > aside { display: none; }
  .featured-video-layout { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-columns { grid-template-columns: 1fr; }
  .dashboard-layout { grid-template-columns: 1fr; }
  .dashboard-nav { display: flex; overflow-x: auto; }
  .dashboard-nav-item { white-space: nowrap; width: auto; }
}
@media (max-width: 767px) {
  .card-grid.two-columns, .card-grid.three-columns, .category-grid, .contact-info-grid, .auth-two-col, .prev-next { grid-template-columns: 1fr; }
  .full-gallery { columns: 2; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-stats { grid-template-columns: repeat(2, 1fr); }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .footer-bottom > div { flex-wrap: wrap; }
  .dashboard-user-actions { margin-left: 0; }
  .article-tools { margin-left: 0; }
  .hero-side-articles { display: none; }
}
@media (max-width: 575px) {
  .full-gallery { columns: 1; }
  /* Footer stays a 2-col grid on phones: About + Contact span full width,
     the narrow link lists (Categories / Quick Links) pair up side by side. */
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
  .footer-grid > div:first-child,
  .footer-grid > div:last-child { grid-column: 1 / -1; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .profile-avatar { width: 88px; height: 88px; }
  .site-logo { font-size: 30px; }
  .auth-card { padding: 24px 18px; }
}
@media print {
  .top-bar, .breaking-news-bar, .site-header, .main-nav, .site-footer, .sidebar, .article-tools, .article-share-row, .prev-next, .comments-section, .back-to-top { display: none !important; }
  .article-main { width: 100%; }
}