:root{
  --bg:#ffffff;
  --bg-2:#1a1a2e;
  --bg-3:#ffffff;
  --text:#2c3e50;
  --link:#e74c3c;
  --link-hover:#c0392b;
  --ring: rgba(231,76,60,.25);
  --card-br: rgba(44,62,80,.08);
  --shadow: 0 4px 12px rgba(0,0,0,.06);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.12);
  --radius: 12px;
  --h:60px;
}

*{ box-sizing:border-box }
html,body{
  margin:0; padding:0; background:var(--bg); color:var(--text);
  font:16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
ul,li{ list-style:none; margin:0; padding:0 }
p{ margin: 8px }
a{ color:var(--link); text-decoration:none; transition:color .2s }
a:hover{ color:var(--link-hover) }
a:focus-visible{ outline:2px solid var(--ring); outline-offset:3px; border-radius:4px }

.top-menu{
  position:sticky; top:0; z-index:100;
  background:var(--bg-2); color:#fff;
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.1);
  box-shadow:0 2px 12px rgba(0,0,0,.15);
}
.top-menu .content{
  width:100%; max-width:1200px; margin:0 auto; padding:10px 16px; min-height:var(--h);
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:16px;
}
.header-wrap{ position:relative }

.logo{ grid-column:1; margin:0 }
.logo a{ 
  color:#fff; font-weight:700; text-transform:uppercase; font-size:24px; 
  letter-spacing:-.5px; transition:transform .2s 
}
.logo a:hover{ color:#fff; transform:scale(1.05) }

.search{ grid-column:2 }
.search form{ display:flex; align-items:center; gap:8px; justify-content:center }
.search input[type="search"]{
  height:42px; padding:0 16px; border:none; border-radius:21px; min-width:400px; 
  background:rgba(255,255,255,.95); color:#333;
  transition: box-shadow .2s, background .2s;
  font-size:15px;
}
.search input[type="search"]::placeholder{ color:#999 }
.search input[type="search"]:focus{ 
  outline:none; box-shadow:0 0 0 4px var(--ring); background:#fff;
}
.search .butt{
  height:42px; width:42px; border:none; border-radius:50%; 
  background:var(--link); color:#fff; cursor:pointer;
  transition:transform .2s, background .2s;
  font-size:18px;
  vertical-align:middle;
}
.search .butt img{
  vertical-align:middle;
}
.search .butt:hover{ background:var(--link-hover); transform:scale(1.1) }

.header-links{
  grid-column:3; grid-row:1; justify-self:end;
  display:flex; gap:4px; align-items:center;
}
.header-links a{ 
  color:#fff; padding:8px 16px; border-radius:20px; font-weight:500;
  transition:background .2s, transform .2s;
}
.header-links a:hover{ background:rgba(255,255,255,.2); transform:translateY(-1px) }

.controls{ display:none; gap:8px; align-items:center }
.menu-toggle, .search-toggle{
  display:none; background:rgba(255,255,255,.1); border:none;
  color:#fff; width:42px; height:42px; border-radius:12px; font-size:20px; cursor:pointer;
  transition:background .2s, transform .2s;
}
.menu-toggle:hover, .search-toggle:hover{ 
  background:rgba(255,255,255,.2); transform:scale(1.05) 
}

#contents{ width:100%; max-width:1200px; margin:0 auto; padding:0 16px }
.h1-bar{ margin:24px 0 }
h1{ font-size:32px; margin:0; font-weight:700; color:var(--text) }
.minet-title, .pizda-title, .extern-links-title{ 
  margin:32px 0 16px; font-size:20px; font-weight:700; color:var(--text) 
}

.article{ 
  display:grid; 
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap:16px; 
  margin:0 auto 
}
.thumbs{
  background:var(--bg-3); border:1px solid var(--card-br); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease;
}
.thumbs:hover{ transform: translateY(-4px) scale(1.02); box-shadow:var(--shadow-lg) }
.thumbs a{ display:block }
.thumbs img{
  display:block; width:100%; height:auto; aspect-ratio:300/435; object-fit:cover;
}

.gallery_title {
    margin:0 6px;
    line-height:2.5;
    color:var(--bg-2);
}

.extern-links{ 
  background:transparent; 
  padding:16px 0;
}
.extern-links ul{ 
  display:flex; 
  flex-wrap:wrap; 
  gap:12px;
}
.extern-links li a{
  display:inline-block; 
  padding:8px 12px; 
  border-radius:999px;
  border:2px solid var(--card-br); 
  color:var(--bg-2); 
  font-weight:500;
  transition:all .2s;
  white-space:nowrap;
}
.extern-links li a:hover{ 
  border-color:var(--link); 
  background:rgba(231,76,60,.05); 
  transform:translateY(-2px);
}

.categoryes{ 
  margin-bottom:32px;
}
.categoryes ul{ 
  display:flex; 
  flex-wrap:wrap; 
  gap:8px;
  justify-content:flex-start;
}
.categoryes li a{
  font-weight:500; 
  background:#fff;
  color:var(--text);
  border:1.5px solid rgba(102,126,234,.2); 
  border-radius:8px; 
  padding:8px 16px;
  transition:all .2s;
  display:inline-block;
  font-size:14px;
  line-height:1.4;
  min-height:36px;
  display:flex;
  align-items:center;
}
.categoryes li a:hover{ 
  background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color:#fff;
  border-color:transparent;
  transform:translateY(-2px); 
  box-shadow:0 4px 12px rgba(102,126,234,.3);
}

.categoryes button {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border: none;
    border-radius: 12px;
    padding: 10px 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 4px rgba(99, 102, 241, 0.2);
    color: #ffffff;
    font-weight: 600;
    font-size: 15px;
}

.categoryes button:hover:not(:disabled) {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.3);
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
}

.categoryes button:active:not(:disabled) {
    transform: translateY(0);
}

.categoryes button:disabled {
    background: linear-gradient(135deg, #e5e7eb, #d1d5db);
    cursor: not-allowed;
    opacity: 0.7;
}

.like {
    width: 24px;
    height: 24px;
    position: relative;
}

.like::before {
    content: '♥';
    font-size: 20px;
    position: absolute;
    top: -2px;
    left: 0;
    transition: all 0.3s ease;
}

button:not(:disabled) .like::before {
    content: '♡';
}

button:disabled .like::before {
    content: '♥';
    color: #ffffff;
}

button:hover:not(:disabled) .like::before {
    content: '♥';
    animation: heartBeat 0.6s ease;
}

@keyframes heartBeat {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

#rating {
    font-weight: 700;
    font-size: 16px;
    min-width: 20px;
    text-align: center;
}

#load-more{
  display:block; margin:32px auto 16px; padding:14px 32px; font-size:16px; font-weight:600;
  border-radius:999px; border:none; background:linear-gradient(135deg, var(--link), var(--link-hover));
  color:#fff;
  cursor:pointer; transition:transform .2s, box-shadow .2s;
  box-shadow:0 4px 12px rgba(231,76,60,.3);
}
#load-more:hover{ transform:translateY(-2px); box-shadow:0 6px 20px rgba(231,76,60,.4) }
#load-more:disabled{ opacity:.5; cursor:not-allowed; transform:none }

.footer{ margin-top:48px; background: var(--bg-2); border-top:1px solid var(--card-br) }
.foot{ 
  width:100%; max-width:1200px; margin:0 auto; padding:24px 16px; 
  color:#ffffff;
}
.foot span{ 
  float:right;
}
.footer a{ color:#fff; text-decoration:none; font-weight:500 }

@media (max-width:768px){
  .top-menu .content{
    display:flex;
    flex-wrap:wrap;
    padding:10px 12px;
    gap:10px;
  }

  .logo{ order:1; flex:0 0 auto }
  .logo a{ font-size:20px }

  .controls{ 
    order:2; flex:1; justify-content:flex-end; display:flex;
  }

  .search{ 
    order:3; flex:0 0 100%; display:none;
  }
  
  .header-links{ 
    order:4; flex:0 0 100%; justify-self:start; display:none;
  }

  .menu-toggle, .search-toggle{ display:flex; align-items:center; justify-content:center }

  .search.active, .header-links.active{ display:flex }
  
  .search.active form{ width:100% }
  .search.active input[type="search"]{ min-width:0; width:100% }
  
  .header-links.active{ 
    flex-direction:column; gap:8px; padding:10px 0;
    border-top:1px solid rgba(255,255,255,.1);
  }
  .header-links.active a{ display:block; width:100%; text-align:left }

  .article{ grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) }
  
  .h1-bar{ margin:24px 0 16px }
  h1{ font-size:24px }
  .extern-links{ 
    overflow-x:auto;
    padding:16px 0;
    margin:24px -16px;
  }
  .extern-links ul{ 
    flex-wrap:nowrap;
    padding:0 16px;
    min-width:min-content;
  }
  .extern-links li a{
    flex-shrink:0;
  }
  
  .categoryes.tags ul{ 
    gap:6px;
  }
  .categoryes.tags li a{
    padding:10px 16px;
    font-size:15px;
    min-height:44px;
    border-radius:10px;
  }
}

@media (max-width:480px){
  .article{ grid-template-columns: 1fr 1fr; gap:12px }
  .search input[type="search"]{ height:38px; font-size:14px }
  .search .butt{ height:38px; width:38px; font-size:16px }
  .categoryes.tags li a{
    padding:12px 18px;
    font-size:16px;
    min-height:48px;
    width:100%;
    justify-content:center;
    text-align:center;
  }
  .categoryes.tags ul{
    gap:8px;
  }
  .categoryes.tags li{
    flex:0 0 calc(50% - 4px);
  }
}

@media (max-width:360px){
  .article{ grid-template-columns: 1fr }
  .categoryes.tags li{
    flex:0 0 100%;
  }
}

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important }
}