:root {
      --main-bg: #ffffff;
      --card-bg: #f8f9fa;
      --nav-bg: #222831;
      --accent: #d90429;
      --text: #222831;
      --muted: #757575;
      --border: #e0e0e0;
      --hover-bg: #f0f4f8;
      --header-h: 70px;
      --footer-h: 55px;
      --shadow: 0 2px 8px rgba(0,0,0,0.05);
      --radius: 10px;
      --font-main: 'Helvetica Neue', Helvetica, Arial, sans-serif;
      --transition: 0.25s cubic-bezier(.4,.23,.26,1);
    }

    body {
      margin: 0;
      font-family: var(--font-main);
      background: var(--main-bg);
      color: var(--text);
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      transition: background var(--transition);
    }

    header {
      background: var(--nav-bg);
      color: #fff;
      position: sticky;
      top: 0;
      z-index: 100;
      padding: 0 2vw;
      height: var(--header-h);
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-shadow: var(--shadow);
    }

    .logo {
      font-size: 2rem;
      font-weight: 700;
      letter-spacing: -1px;
      color: var(--main-bg);
    }

    .search-bar {
      display: flex;
      align-items: center;
      gap: 8px;
      flex: 1;
      margin: 0 2vw;
      max-width: 520px;
      background: var(--main-bg);
      border-radius: 50px;
      padding: 4px 12px;
      box-shadow: 0 2px 9px rgba(0,0,0,0.03);
      border: 1px solid var(--border);
      transition: box-shadow var(--transition);
    }

    .search-bar input {
      border: none;
      outline: none;
      width: 100%;
      background: none;
      font-size: 1rem;
      padding: 7px 0;
      color: var(--text);
      font-family: inherit;
    }

    .search-bar button {
      background: var(--accent);
      border: none;
      color: #fff;
      padding: 7px 18px;
      border-radius: 50px;
      font-weight: bold;
      font-size: 1rem;
      cursor: pointer;
      transition: background var(--transition), box-shadow var(--transition);
      box-shadow: 0 1px 4px rgba(217,4,41,0.12);
    }
    .search-bar button:hover, .search-bar button:focus {
      background: #b10620;
    }

    .filters {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: flex-start;
      gap: 1rem;
      background: var(--main-bg);
      box-shadow: 0 0.5px 0 var(--border);
      padding: 12px 2vw 0 2vw;
      position: sticky;
      top: var(--header-h);
      z-index: 50;
    }

    .filter-group {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .filter-group label {
      font-size: 0.98rem;
      color: var(--muted);
      margin-right: 7px;
    }

    .countries {
      border-radius: 8px;
      padding: 6px;
      border: 1px solid var(--border);
      font-size: 1rem;
      font-family: inherit;
      cursor: pointer;
      background: var(--card-bg);
      outline: none;
      transition: box-shadow var(--transition);
    }

    .categories {
      display: flex;
      gap:5px;
      flex-wrap: wrap;
    }

    .category-tab {
      background: var(--card-bg);
      color: var(--text);
      border-radius: 7px;
      padding: 7px 16px;
      border: 1px solid var(--border);
      font-size: 0.99rem;
      font-weight: bold;
      cursor: pointer;
      transition: background var(--transition), color var(--transition), border var(--transition);
      box-shadow: none;
    }
    .category-tab.active, .category-tab:hover, .category-tab:focus {
      background: var(--accent);
      color: #fff;
      border-color: var(--accent);
    }

    main {
      flex: 1;
      display: grid;
      place-items: center;
      padding: 16px 2vw 16px 2vw;
      background: var(--main-bg);
      min-height: 0;
    }

    .news-list {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 22px;
      width: 100%;
      max-width: 1350px;
      margin: 0 auto;
    }

    .news-card {
      background: var(--card-bg);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      transition: transform var(--transition), box-shadow var(--transition);
      border: 1px solid var(--border);
      cursor: pointer;
      min-height: 350px;
      position: relative;
    }
    .news-card:hover, .news-card:focus {
      transform: translateY(-4px) scale(1.013);
      box-shadow: 0 6px 18px rgba(0,0,0,0.07);
      background: var(--hover-bg);
      border-color: var(--accent);
      z-index: 11;
    }

    .news-img {
      width: 100%;
      max-height: 175px;
      object-fit: cover;
      border-bottom: 1px solid var(--border);
      background: #eaeaea;
      transition: filter var(--transition);
    }

    .news-body {
      flex: 1;
      display: flex;
      flex-direction: column;
      padding: 18px;
    }

    .news-title {
      font-size: 1.26rem;
      font-weight: bold;
      margin: 0 0 7px;
      color: var(--text);
      line-height: 1.2em;
      transition: color var(--transition);
    }

    .news-meta {
      font-size: 0.89rem;
      color: var(--muted);
      margin: 0 0 5px;
      display: flex;
      flex-wrap: wrap;
      gap: 9px;
      align-items: center;
    }

    .news-desc {
      font-size: 1rem;
      color: var(--muted);
      margin: 7px 0 0 0;
      flex: 1;
      line-height: 1.45em;
    }

    .news-link {
      margin-top: 16px;
      align-self: flex-start;
      background: var(--accent);
      color: #fff;
      font-weight: bold;
      padding: 7px 20px;
      border-radius: 6px;
      text-decoration: none;
      font-size: 1rem;
      transition: background var(--transition);
      border: none;
      box-shadow: none;
      cursor: pointer;
    }
    .news-link:hover, .news-link:focus {
      background: #b10620;
      color: #fff;
      text-decoration: underline;
    }

    .active-indicator {
      color: var(--accent);
      font-weight: bold;
      margin-left: 6px;
      font-size: 0.95rem;
      padding: 2px 4px;
      border-radius: 4px;
      background: #fff7f7;
    }

    .status {
      font-size: 1.05rem;
      color: var(--text);
      margin: 25px auto 0 auto;
      padding: 11px 24px;
      background: var(--card-bg);
      border-radius: 8px;
      box-shadow: var(--shadow);
      border: 1px solid var(--border);
      text-align: center;
      max-width: 500px;
    }

    footer {
      background: var(--main-bg);
      border-top: 1px solid var(--border);
      color: var(--muted);
      text-align: center;
      padding: 16px 2vw;
      font-size: 1rem;
      box-shadow: 0 -2px 24px rgba(0,0,0,0.04);
      min-height: var(--footer-h);
      width: 100%;
    }

    @media (max-width: 1050px) {
      .news-list {
        grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
      }
    }
    @media (max-width: 700px) {
      .filters { flex-direction: column; align-items: stretch; padding-top: 8px;}
      .search-bar { max-width: 99vw; margin: 7px 0 0 0;}
      .news-list { grid-template-columns: 1fr;}
      header { flex-direction: column; gap:8px; height: auto; padding: 8px 2vw;}
    }

    ::selection { background: #ffd6dc; color: var(--text); }