/* WEB PANEL PROXY public CSS */
* { margin: 0; padding: 0; box-sizing: border-box; }
  body {
    font-family: 'Segoe UI', Tahoma, sans-serif;
    background: #f4f7f6;
    color: #2c3e50;
    line-height: 1.6;
  }
  header {
    background: linear-gradient(135deg, #2e8b57, #1f6f43);
    color: #fff;
    padding: 40px 20px;
    text-align: center;
  }
  header h1 { font-size: 2.2em; margin-bottom: 10px; }
  header p { font-size: 1.1em; opacity: 0.9; }
  nav {
    background: #1f6f43;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }
  nav a {
    color: #fff;
    padding: 14px 22px;
    text-decoration: none;
    font-weight: 600;
    transition: background 0.3s;
  }
  nav a:hover { background: #175433; }
  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
  }
  .intro {
    text-align: center;
    margin-bottom: 40px;
    font-size: 1.1em;
  }
  .grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
  }
  .card {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    transition: transform 0.3s, box-shadow 0.3s;
  }
  .card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 26px rgba(0,0,0,0.15);
  }
  
  /* Улучшенный блок для картинок */
  .img-container {
    position: relative;
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 90px; /* Размер эмодзи-заглушки */
    overflow: hidden;
  }
  .img-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 2;
  }
  
  /* Красивые фоны для каждой карточки (видны, если фото не загрузилось) */
  .bg-lejon { background: linear-gradient(135deg, #ffecd2, #fcb69f); }
  .bg-elefant { background: linear-gradient(135deg, #cfd9df, #e2ebf0); }
  .bg-tiger { background: linear-gradient(135deg, #f6d365, #fda085); }
  .bg-pingvin { background: linear-gradient(135deg, #e0c3fc, #8ec5fc); }
  .bg-orn { background: linear-gradient(135deg, #f5f7fa, #c3cfe2); }
  .bg-uggla { background: linear-gradient(135deg, #fbc2eb, #a6c1ee); }
  .bg-delfin { background: linear-gradient(135deg, #84fab0, #8fd3f4); }
  .bg-val { background: linear-gradient(135deg, #a1c4fd, #c2e9fb); }
  .bg-skoldpadda { background: linear-gradient(135deg, #d4fc79, #96e6a1); }

  .card-body { padding: 18px 20px 22px; }
  .card-body h2 {
    font-size: 1.4em;
    margin-bottom: 6px;
    color: #1f6f43;
  }
  .latin {
    font-style: italic;
    color: #7f8c8d;
    font-size: 0.9em;
    margin-bottom: 10px;
  }
  .card-body p { font-size: 0.98em; }
  .facts {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed #dce3e1;
    font-size: 0.9em;
    color: #34495e;
  }
  .facts span { display: block; margin: 3px 0; }
  footer {
    background: #1f6f43;
    color: #dfeee5;
    text-align: center;
    padding: 25px 15px;
    margin-top: 40px;
    font-size: 0.95em;
  }