:root {
  --articles-bg: #061321;
  --articles-surface: #0d1d2e;
  --articles-surface-hover: #12283d;
  --articles-border: #23384d;
  --articles-text: #f4f7fb;
  --articles-muted: #9bb0c7;
  --articles-blue: #1686ff;
  --articles-cyan: #22c5e5;
}

* { box-sizing: border-box; }

.articles-body {
  margin: 0;
  color: var(--articles-text);
  background: var(--articles-bg);
  font-family: Inter, Arial, sans-serif;
}

.articles-main { min-height: 100vh; background: var(--articles-bg); }

.articles-header {
  min-height: 76px;
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid var(--articles-border);
  background: #081726;
}

.articles-header-left,
.articles-header-actions,
.articles-brand,
.articles-card-footer,
.articles-footer,
.articles-footer nav {
  display: flex;
  align-items: center;
}

.articles-header-left { gap: 18px; }

.articles-menu-toggle {
  width: 36px;
  height: 36px;
  padding: 7px;
  display: grid;
  align-content: center;
  gap: 4px;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.articles-menu-toggle span { width: 21px; height: 2px; background: #e8eef5; }

.articles-brand { gap: 10px; color: var(--articles-text); text-decoration: none; }
.articles-brand img { width: 40px; height: 40px; object-fit: contain; }
.articles-brand span { display: grid; }
.articles-brand strong { font-size: 15px; }
.articles-brand small { color: var(--articles-muted); font-size: 9px; }

.articles-header-actions { gap: 18px; }
.articles-header-actions a { color: #bfd0e2; font-size: 13px; font-weight: 700; text-decoration: none; }
.articles-header-actions .articles-signup,
.articles-avatar { padding: 10px 15px; border-radius: 6px; color: #fff; background: var(--articles-blue); }

.articles-page {
  width: min(1160px, calc(100% - 40px));
  margin: 0 auto;
  padding: 54px 0 76px;
}

.articles-intro { max-width: 920px; margin-bottom: 34px; }
.articles-back { display: inline-block; margin-bottom: 24px; color: var(--articles-muted); text-decoration: none; }
.articles-eyebrow { color: var(--articles-cyan); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.articles-intro h1 { margin: 8px 0 10px; font-size: clamp(36px, 6vw, 64px); line-height: 1; }
.articles-intro > p { color: var(--articles-muted); font-size: 17px; }

.articles-filters {
  margin-top: 28px;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(180px, 240px) auto auto;
  align-items: end;
  gap: 12px;
}

.articles-search {
  min-height: 50px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 15px;
  border: 1px solid var(--articles-border);
  border-radius: 10px;
  background: var(--articles-surface);
}

.articles-search svg { width: 20px; fill: none; stroke: var(--articles-muted); stroke-width: 2; }
.articles-search input { width: 100%; border: 0; outline: 0; color: #fff; background: transparent; font-size: 15px; }
.articles-search input::placeholder { color: #758ba2; }

.articles-category { display: grid; gap: 6px; }
.articles-category span { color: var(--articles-muted); font-size: 12px; font-weight: 700; }
.articles-category select {
  min-height: 50px;
  padding: 0 14px;
  border: 1px solid var(--articles-border);
  border-radius: 10px;
  color: #fff;
  background: var(--articles-surface);
}

.articles-filters button,
.articles-clear,
.articles-empty a,
.articles-pagination a {
  min-height: 50px;
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 10px;
  color: #fff;
  background: var(--articles-blue);
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}

.articles-clear { color: var(--articles-muted); background: transparent; border: 1px solid var(--articles-border); }
.articles-result-count { margin-top: 18px; color: var(--articles-muted); }
.articles-result-count strong { color: #fff; }

.articles-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.articles-card {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--articles-border);
  border-radius: 16px;
  background: var(--articles-surface);
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.articles-card:hover { transform: translateY(-4px); border-color: #35628d; background: var(--articles-surface-hover); }
.articles-card-image { height: 190px; display: block; overflow: hidden; background: #10243a; }
.articles-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.articles-card:hover .articles-card-image img { transform: scale(1.035); }
.articles-card-body { flex: 1; padding: 20px; display: flex; flex-direction: column; }
.articles-card-category { align-self: flex-start; padding: 5px 9px; border-radius: 999px; color: #8fddff; background: #0b3854; font-size: 11px; font-weight: 800; }
.articles-card h2 { margin: 13px 0 10px; font-size: 19px; line-height: 1.35; }
.articles-card h2 a { color: #fff; text-decoration: none; }
.articles-card p { margin: 0 0 22px; color: var(--articles-muted); font-size: 14px; line-height: 1.65; }
.articles-card-footer { margin-top: auto; justify-content: space-between; gap: 12px; padding-top: 16px; border-top: 1px solid var(--articles-border); }
.articles-card-footer time { color: #7890a8; font-size: 12px; }
.articles-card-footer a { color: #45a5ff; font-size: 13px; font-weight: 800; text-decoration: none; }

.articles-empty { padding: 70px 24px; text-align: center; border: 1px dashed var(--articles-border); border-radius: 16px; background: var(--articles-surface); }
.articles-empty p { color: var(--articles-muted); }
.articles-empty a { margin-top: 12px; }

.articles-pagination { margin-top: 34px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; }
.articles-pagination a { min-height: 42px; padding: 0 16px; justify-self: start; }
.articles-pagination a:last-child { justify-self: end; }
.articles-pagination strong { color: var(--articles-muted); font-size: 13px; }

.articles-footer { min-height: 80px; padding: 20px 28px; justify-content: space-between; gap: 24px; border-top: 1px solid var(--articles-border); color: var(--articles-muted); }
.articles-footer nav { gap: 18px; }
.articles-footer a { color: var(--articles-muted); text-decoration: none; }

@media (max-width: 900px) {
  .articles-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .articles-filters { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .articles-header { padding: 0 16px; }
  .articles-header-actions > a:not(.articles-signup):not(.articles-avatar) { display: none; }
  .articles-page { width: min(100% - 24px, 1160px); padding-top: 34px; }
  .articles-filters, .articles-grid { grid-template-columns: 1fr; }
  .articles-card-image { height: 210px; }
  .articles-footer { flex-direction: column; text-align: center; }
  .articles-pagination { grid-template-columns: 1fr 1fr; }
  .articles-pagination strong { grid-column: 1 / -1; grid-row: 1; text-align: center; }
}