:root {
  --bg: #fbfdff;
  --card: #ffffff;
  --accent: #ff4d6d;
  --accent-2: #ff9aa2;
  --muted: #6b7280;
  --shadow: 0 10px 30px rgba(12, 20, 40, 0.06);
  --glass: rgba(255, 255, 255, 0.7);
  --text-color: #0b1220;
  --border-color: #eef2f7;
  --gradient-start: #fbfdff;
  --gradient-end: #f5f7fb;
  --success: #28a745; /* онлайн-статус */
  --icon-brightness: 1;
  --pink: #ff3399;
}

/* Стили для тёмной темы */
.dark-mode {
  --bg: #1f2937; /* Темный фон */
  --card: #374151; /* Темные карточки */
  --accent: #ff4d6d;
  --accent-2: #ff9aa2;
  --muted: #d1d5db; /* Светлее текст для контраста */
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  --glass: rgba(55, 65, 81, 0.7); /* Темное стекло */
  --text-color: #f9fafb; /* Светлый текст */
  --border-color: #4b5563; /* Темные границы */
  --gradient-start: #1f2937;
  --gradient-end: #111827;
  --success: #34d399; /* Более яркий зеленый для темного фона */
  --icon-brightness: 1.3;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  color: var(--text-color);
  background: linear-gradient(
    180deg,
    var(--gradient-start),
    var(--gradient-end)
  );
}
a{
color:var(--text-color);
text-decoration:none;
}

p a{
border-bottom:1px solid var(--text-color);
}
a:hover{
color:var(--muted-color);
}
main{
min-height:80vh;
}
.a11y-hidden {
  position: absolute !important;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
/* Header */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: var(--card);
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 0;
  z-index: 20;
}
.header a{
color:unset;
text-decoration:none;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand .logo {
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 18px;
}

.brand .title {
  font-family:courier;
  font-weight: 800;
}
.header .nav {
  display: flex;
  gap: 8px;
  align-items: center;
}

.header .nav select,
.header .nav button, .confirm-btn {
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-color);
}
.header .nav .btn-post {
  background: var(--accent);
  border: 0;
  color: #fff;
  padding: 10px 14px;
  font-weight: 700;
}

.btn-go{
background: var(--accent);
border: 0;
color: #fff;
padding: 10px 14px;
font-weight: 700;
margin-top:8px;
}

.btn-post {
background: var(--accent);
border: 0;
border-radius: 10px;
color: #fff;
padding: 10px 14px;
font-weight: 700;
}

.header .nav select {
  background-color: var(--card);
  color: var(--text-color);
  border: 1px solid var(--border-color);
}

.header .nav select option {
  background-color: var(--card);
  color: var(--text-color);
}

.filter-row select,
.filter-card select {
  background-color: var(--bg);
  color: var(--text-color);
  border: 1px solid var(--border-color);
}

.filter-row select option,
.filter-card select option {
  background-color: var(--card);
  color: var(--text-color);
}

select {
  background-color: var(--bg);
  color: var(--text-color);
  border: 1px solid var(--border-color);
}

select option {
  background-color: var(--card);
  color: var(--text-color);
}

.container {
  max-width: 1180px;
  margin: 18px auto;
  padding: 0 16px;
}
/* promo */
.promo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  background: var(--card);
  border-radius: 12px;
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow);
  gap: 12px;
}
.promo .left strong {
  font-size: 15px;
}
.promo .left .muted {
  color: var(--muted);
  font-size: 13px;
}
.promo .right .upgrade {
  background: var(--accent);
  color: #fff;
  border: 0;
  padding: 10px 14px;
  border-radius: 10px;
}
/* stats */
.stats {
  gap: 14px;
  margin: 14px 0;
  color: var(--muted);
  font-size: 14px;
}
.stats div {
  background: var(--card);
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  margin: 8px 0;
}
/* layout */
.layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 18px;
}
.sidebar {
  position: sticky;
  top: 18px;
  margin-top:80px;
}

.filter-card {
  background: var(--card);
  padding: 12px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
}
.filter-card h4 {
  margin: 0 0 8px;
}
.filter-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.filter-row select,
input {
  flex: 1;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--bg);
  color: var(--text-color);
}
.filter-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.btn-ghost {
  background: transparent;
  border: 1px solid var(--border-color);
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--text-color);
}

.no-margin{
margin:0;
}
/* breadcrumbs */
.breadcrumbs {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 10px;
}

/* cards grid */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

.card {
  background: var(--card);
  border-radius: 12px;
  padding: 12px;
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  min-height:400px; 
}

.card .photo {
  height: 150px;
  border-radius: 8px;
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  display: flex;
  align-items: flex-end;
  padding: 10px;
  color: #fff;
  font-weight: 600;
  position: relative;
  overflow: hidden;
}

.card .photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.card .photo::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
  z-index: 2;
}

.card .photo > *:not(img) {
  position: relative;
  z-index: 3;
  margin: 0;
}

.badges {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  min-height: 28px;
  align-items: flex-start;
}

.badge {
  font-size: 12px;
  padding: 6px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--border-color);
  color: var(--text-color);
}

.badge.premium {
  background: gold;
  color: #000;
  border-color: rgba(0, 0, 0, 0.06);
  font-weight: 700;
}

.meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}

.title {
  font-weight: 800;
}

.desc {
color: var(--muted);
  font-size: 13px;
  line-height: 1.3;
  margin-top: 8px;
  height: 64px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.card .stats-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  color: var(--muted);
  font-size: 13px;
}

.card .stats-row span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.reveal {
  margin-top: auto;
}

.reveal button {
  width: 100%;
  padding: 10px;
  border-radius: 10px;
  border: 0;
  background: var(--card);
  border: 1px dashed var(--border-color);
  cursor: pointer;
  color: var(--text-color);
}
/* forum */
.forum {
  margin-top: 18px;
  /*
  background: var(--card);
  */
  padding: 12px;
  /*
  border-radius: 12px;
  border: 1px solid var(--border-color);
  */
}
.forum h4 {
  margin: 0 0 8px;
}
.forum .topic {
  display: flex;
  justify-content: space-between;
  padding: 8px 6px;
  border-radius: 8px;
}
/* footer */
.footer {
  margin-top: 24px;
  padding: 18px 0;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}
/* floating post */
.post-floating {
  position: fixed;
  right: 22px;
  bottom: 20px;
  background: var(--accent);
  color: #fff;
  padding: 12px 16px;
  border-radius: 12px;
  border: 0;
  font-weight: 700;
  box-shadow: 0 12px 30px rgba(255, 77, 109, 0.2);
}
/* modals */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  align-items: center;
  justify-content: center;
  background: rgba(2, 6, 23, 0.55);
  z-index: 60;
}
/* Обновление modal panel */
.modal .panel {
  background: var(--card);
  color: var(--text-color);
  padding: 18px;
  border-radius: 12px;
  max-width: 520px;
  width: 92%;
}
.form-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.form-row input,
.form-row textarea,
.form-row select {
  padding: 8px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--bg);
  color: var(--text-color);
}
.form-row textarea {
  min-height: 100px;
}

.form-row label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
}

.form-row label select {
  flex: 0 0 60%;
  min-width: 0;
}

.form-row label:has(input) {
  flex-direction: column;
  align-items: stretch;
}

.form-row label:has(input) input {
  width: 100%;
  margin-top: 4px;
}

.theme-switch-wrapper {
  display: flex;
  align-items: center;
}
.theme-switch {
  display: inline-block;
  height: 28px;
  position: relative;
  width: 50px;
}
.theme-switch input {
  display: none;
}
.slider {
  background-color: var(--muted);
  bottom: 0;
  cursor: pointer;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: 0.4s;
}
.slider:before {
  background-color: #fff;
  bottom: 4px;
  content: "";
  height: 20px;
  left: 4px;
  position: absolute;
  transition: 0.4s;
  width: 20px;
}
input:checked + .slider {
  background-color: var(--accent);
}
input:checked + .slider:before {
  transform: translateX(22px);
}
.slider.round {
  border-radius: 28px;
}
.slider.round:before {
  border-radius: 50%;
}
.sun-moon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  font-size: 14px;
  padding: 0 4px;
  pointer-events: none;
  user-select: none;
}
.sun-moon.sun {
  left: 4px;
}
.sun-moon.moon {
  right: 4px;
}

/* Footer */
.footer {
  margin-top: 24px;
  padding: 18px 0;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
  background: var(--card);
  border-top: 1px solid var(--border-color);
}

/* Footer menu */
.x_menu {
  text-align: center;
  vertical-align: top;
  padding: 1rem 0;
}

.x_menu_list {
  display: table;
  margin: 0 auto;
  padding-top: .5rem;
}

.x_menu_col {
  list-style-type: none;
  float: left;
  margin: 0 1.5rem;
}

.x_menu_col a {
  border: 0;
  text-decoration: none;
}

.x_menu_item {
  text-align: left;
  padding: .125rem;
}

.x_menu_title {
  color: var(--text-color);
  font-size: 1rem;
  font-weight: 700;
  text-align: left;
  padding: .125rem;
  padding-bottom: .25em;
}

.x_menu_item {
  font-size: .875rem;
  margin-bottom: .25rem;
}

.x_menu_item a:link,
.x_menu_item a:visited,
.x_menu_title a:link,
.x_menu_title a:visited {
  color: var(--text-color);
  border: none;
  text-decoration: none;
  transition: color 0.2s ease;
}

.x_menu_item a:hover,
.x_menu_title a:hover {
  color: var(--accent);
  border-bottom: 1px solid var(--accent);
}

/* Copyright */
.copy {
  color: var(--muted);
  width: 100%;
  height: 2rem;
  font-size: .8rem;
  margin-bottom: .25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-color);
}

.copy a:link,
.copy a:visited {
  color: var(--muted);
  border: none;
  text-decoration: none;
  transition: color 0.2s ease;
}

.copy a:hover {
  color: var(--accent);
}

/* Clear float */
.x_menu_list::after {
  content: "";
  display: table;
  clear: both;
}

.up-to-top{
position:fixed;
bottom:3rem;
right:.75rem;
padding:.5rem;
opacity:0.5;
height:2.5rem;
text-align:center;
width:4rem;
overflow:hidden;
background-color:var(--glass);
color:var(--muted);
border-radius:.5rem;
text-decoration:none;
display:none;
z-index:1000;
cursor:pointer;
transition:all .1s ease;
}
.up-to-top:hover{
opacity:1;
}
.up-to-top i{
font-size:22px;
color:var(--accented);
padding:0;
}

/*forms*/
form{
display:inline;
}
select{
display:block;
}
input[type=text]{
margin:.25rem;
width:100%;
}
textarea{
width:100%;
height:12rem;
margin:.25rem;
}

.pager{
font-size:1.5rem;
}
.pager-item{
padding:.5rem;
line-height:.875rem;
}
.pager-item a{
border:none;
}
.pager-c{
font-size:2rem;
font-weight:500;
}
.pager-i{
font-size:1rem;
}

.forms-section {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
}

.in-container {
    display: flex;
    gap: 30px;
    justify-content: center;
    align-items: flex-start;
    margin-top: 20px;
    width: 100%;
    max-width: 900px; /* Ограничиваем максимальную ширину */
}

.login, .signup {
    flex: 0 1 400px; /* flex-grow: 0, flex-shrink: 1, flex-basis: 400px */
    min-width: 300px;
    max-width: 400px;
    background: var(--card);
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.login h1, .signup h1 {
    margin-top: 0;
    margin-bottom: 20px;
    text-align: center;
}

.login-inp {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
}

.notes, .recover {
    margin-top: 15px;
    text-align: center;
}




.users-list-minimal {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Карточка */
.user-card-minimal {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 18px 0;
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.2s ease;
}

.user-card-minimal:hover {
    background-color: rgba(0, 0, 0, 0.02);
}

.dark-mode .user-card-minimal:hover {
    background-color: rgba(255, 255, 255, 0.03);
}

.user-card-minimal:last-child {
    border-bottom: none;
}

/* Аватар */
.user-card-minimal__avatar {
    flex-shrink: 0;
}

.user-card-minimal__avatar img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--border-color);
}

/* Контент */
.user-card-minimal__content {
    flex: 1;
    min-width: 0;
}

/* Имя пользователя */
.user-card-minimal__header {
    margin-bottom: 4px;
}

.user-card-minimal__name {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-color);
    line-height: 1.4;
}

.user-card-link:hover .user-card-minimal__name {
    color: var(--accent);
    text-decoration: underline;
}

/* Мета-информация */
.user-card-minimal__meta {
    font-size: 14px;
    color: var(--muted);
}

.user-card-minimal__date {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Кнопка действия */
.user-card-minimal__action {
    flex-shrink: 0;
}

/* Текстовая кнопка */
.btn-text {
    display: inline-block;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--muted);
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.btn-text:hover {
    color: var(--accent);
    background-color: rgba(0, 0, 0, 0.03);
}

.dark-mode .btn-text:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.signup-link{
text-align:center;
margin-top:20px;
}

.preambles_block .item{
display:inline-block;
margin:0 8px;
}
.preambles_block .item a{
border-bottom:1px solid var(--text-color);
}