: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)
  );
}
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;
  /*
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  */
  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 {
  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;
}

.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);
}
/* 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;
}

.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;
}

/* Текст внутри photo должен быть поверх всего */
.card .photo > *:not(img) {
  position: relative;
  z-index: 3;
  margin: 0;
}

.badges {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.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;
}

.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: 12px;
}

.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;
}