@charset "UTF-8";
/*
  GEXYRAL article list/category shell alignment overrides.
  - Loaded after legacy inline styles in /articles/index.php and /articles/category.php.
  - Keeps list/category PHP and card layout stable while visually matching article detail pages.
  - Does not affect article content_html; detail article content CSS remains independent.
*/

:root{
  --bg0:#07101b;
  --bg1:#0b1728;
  --bg2:#0f2036;
  --card:#111c2f;
  --card2:#0f1829;
  --card3:#13233b;
  --txt:#E5E7EB;
  --muted:#9CA3AF;
  --muted2:#94A3B8;
  --line:rgba(255,255,255,.08);
  --line2:rgba(255,255,255,.12);
  --brand:#2563EB;
  --brand2:#1D4ED8;
  --brand3:#60A5FA;
  --ok:#10B981;
  --warn:#F59E0B;
  --bad:#EF4444;
  --shadow:0 20px 60px rgba(0,0,0,.35);
  --shadow2:0 10px 40px rgba(0,0,0,.25);
}

html{scroll-behavior:smooth;}
body{
  background:#07111f !important;
  position:relative;
  isolation:isolate;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  background:
    radial-gradient(900px 520px at 12% 4%, rgba(37,99,235,.20), transparent 62%),
    radial-gradient(760px 500px at 84% 5%, rgba(14,165,233,.12), transparent 64%),
    radial-gradient(780px 540px at 96% 38%, rgba(16,185,129,.10), transparent 64%),
    linear-gradient(135deg, #06101d 0%, #081524 42%, #071827 72%, #07111f 100%) !important;
  background-repeat:no-repeat;
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.42;
  background-image:
    linear-gradient(rgba(148,163,184,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,163,184,.045) 1px, transparent 1px),
    radial-gradient(circle at 50% 0%, rgba(96,165,250,.08), transparent 38%);
  background-size:64px 64px,64px 64px,100% 100%;
  -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.82), rgba(0,0,0,.32) 62%, transparent 100%);
  mask-image:linear-gradient(180deg, rgba(0,0,0,.82), rgba(0,0,0,.32) 62%, transparent 100%);
}

.container{
  position:relative;
  z-index:1;
  width:100%;
  max-width:1180px !important;
  margin:0 auto !important;
  padding:28px 18px 64px !important;
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px !important;
  margin-bottom:24px !important;
  border:1px solid rgba(148,163,184,.12) !important;
  border-radius:24px !important;
  background:linear-gradient(180deg, rgba(8,18,32,.78), rgba(7,15,27,.58)) !important;
  box-shadow:0 18px 46px rgba(0,0,0,.18);
  backdrop-filter:blur(14px);
}
.brand .logo{
  border-radius:14px !important;
  background:linear-gradient(135deg, rgba(37,99,235,.95), rgba(29,78,216,.75)) !important;
  box-shadow:0 14px 40px rgba(37,99,235,.25) !important;
}
.badge,
.lang{
  border:1px solid rgba(148,163,184,.12) !important;
  background:rgba(255,255,255,.04) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}

.hero-panel{
  position:relative;
  overflow:hidden;
  padding:30px !important;
  margin-bottom:24px !important;
  border-radius:30px !important;
  border:1px solid rgba(148,163,184,.14) !important;
  background:
    radial-gradient(640px 300px at 84% -20%, rgba(96,165,250,.16), transparent 62%),
    radial-gradient(560px 280px at 0% 100%, rgba(16,185,129,.11), transparent 62%),
    linear-gradient(135deg, rgba(16,31,53,.94), rgba(9,18,32,.97) 58%, rgba(7,28,34,.92)) !important;
  box-shadow:0 24px 70px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.04) !important;
}
.hero-panel::before{
  content:"";
  position:absolute;
  inset:0;
  width:auto;
  height:auto;
  right:auto;
  top:auto;
  background:
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px) !important;
  background-size:56px 56px !important;
  opacity:.26;
  pointer-events:none;
}
.hero-panel::after{
  content:"";
  position:absolute;
  width:360px;
  height:360px;
  right:-130px;
  bottom:-170px;
  left:auto;
  top:auto;
  background:radial-gradient(circle, rgba(37,99,235,.20), transparent 66%) !important;
  pointer-events:none;
}
.hero-grid,
.hero-left,
.hero-right{
  position:relative;
  z-index:2;
}
.hero-left h1,
.page-title{
  letter-spacing:-.035em;
  background:linear-gradient(135deg,#fff,rgba(255,255,255,.82)) !important;
  -webkit-background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  background-clip:text !important;
}
.hero-subtitle,
.page-subtitle{color:#b7c7dc !important;}
.hero-right,
.topics-strip,
.articles-layout,
.faq-section,
.about-articles,
.topic-guide,
.topic-audience{
  border:1px solid rgba(148,163,184,.14) !important;
  background:linear-gradient(180deg, rgba(12,24,40,.78), rgba(8,16,28,.88)) !important;
  box-shadow:0 18px 50px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.035) !important;
  backdrop-filter:blur(10px);
}
.topics-strip{
  border-radius:24px !important;
  padding:22px !important;
  margin-bottom:26px !important;
}
.topic-tag,
.hero-link,
.category-sidebar-item,
.popular-category,
.popular-article-item,
.mini-pill{
  border-color:rgba(148,163,184,.13) !important;
  background:rgba(255,255,255,.045) !important;
}
.topic-tag:hover,
.hero-link:hover,
.category-sidebar-item:hover,
.popular-category:hover,
.popular-article-item:hover{
  border-color:rgba(96,165,250,.30) !important;
  background:rgba(96,165,250,.08) !important;
}

.articles-layout{
  display:grid;
  grid-template-columns:270px minmax(0,1fr);
  gap:26px;
  margin:32px 0 !important;
  padding:28px !important;
  border-radius:30px !important;
}
.sidebar-widget,
.articles-filters,
.article-card,
.featured-article,
.faq-item,
.topic-guide-card,
.topic-audience-card,
.changelog-card{
  border:1px solid rgba(148,163,184,.14) !important;
  background:linear-gradient(180deg, rgba(255,255,255,.052), rgba(255,255,255,.022)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.026);
}
.sidebar-widget{border-radius:20px !important;}
.articles-filters{border-radius:18px !important;}
.articles-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:18px !important;
  margin:0 0 20px !important;
}
.article-card,
.featured-article{
  border-radius:20px !important;
  overflow:hidden;
}
.article-card:hover,
.featured-article:hover,
.changelog-card:hover{
  transform:translateY(-4px);
  border-color:rgba(96,165,250,.30) !important;
  box-shadow:0 20px 58px rgba(0,0,0,.28) !important;
}
.article-cover,
.featured-cover{
  border-bottom:1px solid rgba(148,163,184,.12);
  background:#0b1322 !important;
}
.article-content,
.featured-content{
  padding:18px !important;
}
.article-title,
.featured-title{letter-spacing:-.015em;}
.article-excerpt,
.featured-excerpt{color:rgba(203,213,225,.78) !important;}
.article-category,
.featured-category,
.category-tag{
  border:1px solid rgba(96,165,250,.18);
  background:rgba(37,99,235,.10) !important;
}

.pagination{
  align-items:center;
  justify-content:space-between;
  margin:10px 0 0 !important;
  padding:18px !important;
  border:1px solid rgba(148,163,184,.14) !important;
  border-radius:22px;
  background:linear-gradient(180deg, rgba(12,24,40,.78), rgba(8,16,28,.88));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
.page-link,
.page-number{
  border-color:rgba(148,163,184,.16) !important;
  background:rgba(255,255,255,.045) !important;
}
.page-link:hover,
.page-number:hover{
  border-color:rgba(96,165,250,.30) !important;
  background:rgba(96,165,250,.08) !important;
}
.page-number.active{
  background:linear-gradient(135deg,var(--brand),var(--brand2)) !important;
  border-color:rgba(96,165,250,.48) !important;
}

.footer{
  border-top:1px solid rgba(148,163,184,.14) !important;
}

@media (max-width:1024px){
  .articles-layout{grid-template-columns:1fr !important;}
}
@media (max-width:900px){
  .articles-grid{grid-template-columns:1fr !important;}
}
@media (max-width:768px){
  .container{padding:20px 15px 42px !important;}
  .topbar{padding:16px !important;}
  .hero-panel{padding:22px 18px !important;border-radius:24px !important;}
  .articles-layout{padding:20px !important;border-radius:24px !important;}
  .pagination{flex-direction:column;align-items:stretch;}
  .page-numbers{justify-content:center;}
}