:root {
      --gazprom: #006ab3;
      --lukoil: #ed1c24;
      --tatneft: #ffd100;
      --primary: #4f46e5;
      --secondary: #64748b;
  }

  main>.container {
      padding: 70px 15px 20px;
  }

  body {
      background-color: #f8fafc;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      color: #1e293b;
      padding: 20px;
  }

  .header {
      background: linear-gradient(120deg, #4f46e5, #7c3aed);
      color: white;
      border-radius: 16px;
      padding: 25px;
      margin-bottom: 30px;
      box-shadow: 0 10px 25px rgba(79, 70, 229, 0.3);
  }

  .filter-section {
      background: white;
      border-radius: 16px;
      padding: 20px;
      margin-bottom: 30px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  }

  .station-card {
      background: white;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
      transition: all 0.3s ease;
      margin-bottom: 25px;
      height: 100%;
  }

  .station-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 12px 20px rgba(0, 0, 0, 0.15);
  }

  .station-header {
      padding: 20px;
      color: white;
      display: flex;
      align-items: center;
  }

  .gazprom {
      background: var(--gazprom);
  }

  .lukoil {
      background: var(--lukoil);
  }

  .tatneft {
      background: var(--tatneft);
      color: #1e293b;
  }

  .station-logo {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 15px;
      background: white;
      font-size: 24px;
  }

  .station-info {
      padding: 20px;
  }

  .fuel-price {
      font-size: 1.8rem;
      font-weight: 700;
      margin: 10px 0;
  }

  .price-change {
      display: inline-flex;
      align-items: center;
      padding: 4px 10px;
      border-radius: 20px;
      font-size: 0.9rem;
      font-weight: 600;
      margin-left: 10px;
  }

  .price-up {
      background: #fee2e2;
      color: #dc2626;
  }

  .price-down {
      background: #dcfce7;
      color: #16a34a;
  }

  .fuel-types {
      display: flex;
      gap: 10px;
      margin: 15px 0;
      flex-wrap: wrap;
  }

  .fuel-badge {
      padding: 6px 12px;
      border-radius: 20px;
      font-size: 0.85rem;
      font-weight: 600;
  }

  .btn-action {
      padding: 10px 20px;
      border-radius: 10px;
      font-weight: 600;
      width: 100%;
      margin-top: 15px;
      transition: all 0.2s ease;
  }

  .btn-navigate {
      background: #4f46e5;
      color: white;
  }

  .btn-navigate:hover {
      background: #4338ca;
  }

  .best-price {
      border: 2px solid #10b981;
      position: relative;
  }

  .best-price-flag {
      position: absolute;
      top: 15px;
      right: 15px;
      background: #10b981;
      color: white;
      padding: 5px 12px;
      border-radius: 20px;
      font-size: 0.8rem;
      font-weight: 600;
  }

  .info-item {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      color: #64748b;
  }

  .info-item i {
      width: 20px;
      margin-right: 10px;
      color: #4f46e5;
  }

  .map-container {
      background: white;
      border-radius: 16px;
      padding: 20px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
      height: 100%;
  }

  .station-marker {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      color: white;
      font-weight: bold;
      margin-right: 10px;
  }

  @media (max-width: 768px) {
      .fuel-types {
          flex-direction: column;
          gap: 8px;
      }

      .fuel-type {
          width: 100%;
      }
  }