/* Простой ретро-стиль */
:root{
  --bg: #fff; /* бежевый фон */
  --panel: #fff;
  --border: #000; /* коричневый для рамок */
  --accent: #000;
  --text: #000;
  --muted: #000;
}

*{box-sizing:border-box}
body{
  margin:20px;
  /* background:var(--bg); */
  background-image: url("{{ url_for('static', filename='src/wallp.jpg') }}");
  color:var(--text);
  /* font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; */
  font-family: sans-serif;

}

/* Header / navigation */
header.top{display:flex;justify-content:center;margin-bottom:18px}
.top nav{display:flex;gap:12px}
.menu{
  padding:8px 14px;
  border-radius:6px;
  border:2px solid var(--border);
  text-decoration:none;
  color:var(--text);
  background:var(--panel);
  font-weight:700;
}
.menu.upload{
  /* background:var(--accent); */
  /* color:#fff; */
}
.menu.active{
  background:var(--accent);
  color:#fff;
}
/* Main layout */
main{max-width:1200px;margin:0 auto}
.title{font-size:36px;text-align:center;margin:6px 0 18px;color:var(--muted)}

/* Grid of cards */
/* МASONRY-стиль: колонки, изображения видны полностью, рамка подстраивается */
.grid{
  /* убираем grid и используем колонки для «плитки» */
  column-count: 3;
  column-gap: 18px;
  width:100%;
  margin:0 auto;
}
.card{
  display:inline-block; /* чтобы корректно работать в колонках */
  width:100%;
  background:var(--panel);
  /* padding:8px; */
  border-radius:4px;
  border:1px solid var(--border);
  margin:0 0 18px;
  box-shadow: 0 4px 0 rgba(0,0,0,0.06);
  break-inside: avoid;
}
.card .imgwrap{background:transparent;padding:0;border-radius:6px;display:block}
.card img.fullimg{width:100%;height:auto;object-fit:contain;display:block;
  /* border-radius:4px;border:2px solid var(--border); */
  background:#fff}

/* Количество колонок зависит от ширины */
@media(max-width:1100px){
  .grid{column-count:2}
}
@media(max-width:700px){
  .grid{column-count:1}
}

.meta{
  /* только контейнер для автора (аватар + имя) */
  display:flex;
  align-items:center;
  justify-content:center; /* центр авторского блока */
  margin-top:4px;
  gap:6px;
  border-top:1px solid var(--border);
  padding-top:6px;
}
.author{
  display:flex;
  align-items:center;
  gap:10px;
}
.author img{
  width:42px;
  height:42px;
  border-radius:50%;
  border:2px solid var(--border);
  object-fit:cover;
}
.caption{
  font-size:14px;
  color:var(--muted);
  margin:4px 0 6px; /* уменьшено расстояние от картинки */
  text-align:center; /* центровка текста подписи */
  padding-top:4px; /* отделение от картинки */
}

/* Forms */
form{
  background:var(--panel);
  padding:12px;
  /* border:3px solid var(--border); */
  /* border-radius:8px; */
}
label{
  display:block;
  margin-bottom:10px;
}
input[type="text"], select{
  width:100%;
  padding:8px;
  border:2px solid var(--border);
  border-radius:6px;
}
input[type="file"]{
  border:1px dashed var(--border);
  padding:6px;
  border-radius:6px;
  background:transparent;
}
button{
  background:var(--accent);
  color:#fff;
  padding:10px 14px;
  border-radius:8px;
  border:0;
  font-weight:700;
}

/* Admin previews */
.admin-preview img{
  width:140px;
  height:90px;
  object-fit:contain;
  border:2px solid var(--border);
  background:#000;
}
.info-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-left: 10px;
  padding-right: 10px;
  /* margin-top:4px; чуть более компактная */
  /* border-top:1px solid var(--border); возвращаем линию */

}
.author{
  display:flex;
  align-items:center;
  gap:8px;
}
.author img{
  width:36px;
  height:36px;
  border-radius:50%;
  border:1px solid var(--border); /* тонкая рамка */
  object-fit:cover;
}
.likes{
  font-size:14px;
  display:flex;
  align-items:center;
  gap:4px; /* меньше расстояние */
}
.like-button{
  display:inline-block;
  width:42px; /* кнопка чуть больше для иконки */
  height:42px;
  background:none;
  border:none;
  outline:none; /* убрать обводку при фокусе */
  cursor:pointer;
  padding:0;
}
.like-button:hover .like-icon{opacity:0.8}
.like-icon{
  width:42px; 
  height:42px;
  object-fit:contain;
  display:block;
}
.post-actions{display:flex;gap:8px;margin-top:10px}
.btn{background:var(--accent);color:#fff;padding:8px 10px;border-radius:6px;border:0;font-weight:700}
.btn.danger{background:#c0392b}

/* .welcomep{
    font-family: "Courier New", Consolas, monospace;
    font-size: 14px;
    line-height: 1.1;
    color: #ddd;
    background: #0b0b0b;
    padding: 12px;
    white-space: pre;
} */

.welcomew {
    display: flex;
    justify-content: center;
    overflow: hidden;
}

.welcomep {
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    white-space: pre;
    line-height: 1.05;
    transform-origin: top center;
}