/* ═══ ARTICLES LIBRARY ═══ */

.articles-header {
  margin-bottom: 16px;
}
.articles-header h2 { margin-bottom: 4px; }
.articles-free-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(138, 226, 130, 0.12);
  color: var(--success);
  border: 1px solid rgba(138, 226, 130, 0.3);
  margin-bottom: 14px;
}

.articles-search-wrap {
  position: relative;
  margin-bottom: 14px;
}
.articles-search {
  width: 100%;
  padding: 14px 16px 14px 42px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.28);
  color: var(--text);
  font: inherit;
}
.articles-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.5;
  pointer-events: none;
}

.category-scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 8px;
  margin-bottom: 16px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.category-scroll::-webkit-scrollbar { display: none; }

.cat-chip {
  flex-shrink: 0;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.2);
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.cat-chip.active {
  background: var(--gold-soft);
  border-color: var(--gold);
  color: var(--gold);
}
.cat-chip .chip-count {
  opacity: 0.6;
  font-size: 10px;
  margin-left: 4px;
}

.article-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--bg-card);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 12px;
  transition: border-color 0.2s, transform 0.15s;
  cursor: pointer;
}
.article-card:hover {
  border-color: var(--gold-border);
  transform: translateY(-1px);
}
.article-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}
.article-cat-badge {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
}
.article-read-time {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  color: var(--gold);
  white-space: nowrap;
}
.article-card h4 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.35;
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}
.article-card p {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.article-card-footer {
  margin-top: 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--gold);
}

.articles-pagination {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
  padding-bottom: 8px;
}
.articles-pagination button {
  padding: 10px 18px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: var(--bg-card);
  color: var(--text);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.articles-pagination button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.articles-page-info {
  display: flex;
  align-items: center;
  font-size: 13px;
  color: var(--muted);
}

/* Reader */
.article-reader { animation: fadeIn 0.3s ease; }
.article-reader-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
  margin-bottom: 16px;
  border: none;
  background: none;
  color: var(--gold);
  font: inherit;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}
.article-reader-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 16px;
}
.article-reader-meta .article-cat-badge { font-size: 11px; }
.article-reader-meta .article-read-time { font-size: 13px; }

.article-reader h1 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 5vw, 2rem);
  line-height: 1.25;
  letter-spacing: 0.03em;
  margin-bottom: 20px;
  text-transform: uppercase;
}

.article-body {
  font-size: 16px;
  line-height: 1.75;
  color: var(--text);
}
.article-body .lead {
  font-size: 1.08rem;
  color: var(--silver);
  margin-bottom: 24px;
  line-height: 1.7;
  padding-left: 16px;
  border-left: 3px solid var(--gold);
}
.article-body h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  margin: 0 0 12px;
  color: var(--gold);
  letter-spacing: 0.04em;
}
.article-block {
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.article-block:last-of-type { border-bottom: none; }
.article-body p { margin-bottom: 14px; }
.article-body ul {
  margin: 0 0 20px 0;
  padding-left: 0;
  list-style: none;
}
.article-body li {
  position: relative;
  padding: 10px 0 10px 28px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  line-height: 1.6;
}
.article-body li::before {
  content: '◆';
  position: absolute;
  left: 0;
  color: var(--gold);
  font-size: 10px;
  top: 14px;
}
.article-body .article-note {
  margin-top: 28px;
  padding: 16px;
  border-radius: 12px;
  background: rgba(255, 207, 92, 0.06);
  border: 1px solid var(--gold-border);
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
}

/* Motivation & sources inside article */
.article-body .article-motivation {
  margin: 32px 0 24px;
  padding: 20px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255, 207, 92, 0.12), rgba(255, 207, 92, 0.04));
  border: 1px solid var(--gold-border);
}
.article-body .motivation-link {
  color: var(--gold);
  font-weight: 800;
  text-decoration: none;
}
.article-body .motivation-link:hover { text-decoration: underline; }
.article-body a {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.article-body a:hover { opacity: 0.85; }

/* Social — icon-only row */
.article-body .article-social,
.article-social {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.article-body .social-icons,
.social-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.social-icon-btn {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background-color: rgba(0, 0, 0, 0.3);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px 24px;
  transition: transform 0.15s, border-color 0.2s, box-shadow 0.2s;
  text-decoration: none;
  display: block;
}
.social-icon-btn:hover {
  transform: translateY(-2px);
  border-color: var(--gold-border);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}
.social-icon-btn--instagram { background-color: #E1306C; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.2c3.2 0 3.6 0 4.9.1 1.2.1 1.9.3 2.3.4.6.2 1 .5 1.5 1s.8.9 1 1.5c.2.4.4 1.1.4 2.3.1 1.3.1 1.7.1 4.9s0 3.6-.1 4.9c-.1 1.2-.3 1.9-.4 2.3-.2.6-.5 1-1 1.5s-.9.8-1.5 1c-.4.2-1.1.4-2.3.4-1.3.1-1.7.1-4.9.1s-3.6 0-4.9-.1c-1.2-.1-1.9-.3-2.3-.4-.6-.2-1-.5-1.5-1s-.8-.9-1-1.5c-.2-.4-.4-1.1-.4-2.3-.1-1.3-.1-1.7-.1-4.9s0-3.6.1-4.9c.1-1.2.3-1.9.4-2.3.2-.6.5-1 1-1.5s.9-.8 1.5-1c.4-.2 1.1-.4 2.3-.4 1.3-.1 1.7-.1 4.9-.1M12 0C8.7 0 8.3 0 7 .1 5.7.1 4.8.4 4 .8c-.9.4-1.6 1-2.2 1.8C1.2 3.2.6 4 .4 4.8.1 5.7 0 6.6 0 9.9v4.2c0 3.3 0 3.7.1 5 .1 1.3.4 2.2.8 3 .4.9 1 1.6 1.8 2.2.8.6 1.5 1 2.3 1.2 1 .1 1.8.1 5.1.1s3.7 0 5-.1c1.3-.1 2.2-.4 3-.8.9-.4 1.6-1 2.2-1.8.6-.8 1-1.5 1.2-2.3.1-1 .1-1.8.1-5.1s0-3.7-.1-5c-.1-1.3-.4-2.2-.8-3-.4-.9-1-1.6-1.8-2.2C20.8 1.2 20.1.6 19.3.4 18.4.1 17.5 0 14.2 0H12z'/%3E%3Cpath d='M12 5.8A6.2 6.2 0 1 0 12 18.2 6.2 6.2 0 0 0 12 5.8m0 10.2A4 4 0 1 1 12 8a4 4 0 0 1 0 8zM18.4 4.6a1.4 1.4 0 1 1-2.9 0 1.4 1.4 0 0 1 2.9 0z'/%3E%3C/svg%3E"); }
.social-icon-btn--telegram { background-color: #229ED9; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M9.9 15.1 9.7 19c.4 0 .6-.2.8-.4l2-1.9 4.1 3c.8.4 1.3.2 1.5-.7l2.7-12.6c.3-1.2-.4-1.7-1.2-1.4L2.6 9.8c-1.1.4-1.1 1.1-.2 1.4l4.9 1.5L18.7 6c.6-.4 1.1-.2.7.2'/%3E%3C/svg%3E"); }
.social-icon-btn--youtube { background-color: #FF0000; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.6 12 3.6 12 3.6s-7.5 0-9.4.5A3 3 0 0 0 .5 6.2 31.4 31.4 0 0 0 0 12a31.4 31.4 0 0 0 .5 5.8 3 3 0 0 0 2.1 2.1c1.9.5 9.4.5 9.4.5s7.5 0 9.4-.5a3 3 0 0 0 2.1-2.1A31.4 31.4 0 0 0 24 12a31.4 31.4 0 0 0-.5-5.8zM9.6 15.5V8.5L15.8 12l-6.2 3.5z'/%3E%3C/svg%3E"); }
.social-icon-btn--tiktok { background-color: #010101; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M19.6 8.4a5.5 5.5 0 0 1-3.3-1.1v7.2a6.6 6.6 0 1 1-6.6-6.6c.3 0 .7 0 1 .1v3.3a3.4 3.4 0 1 0 2.4 3.2V2h3.2a5.5 5.5 0 0 0 5.3 6.4z'/%3E%3C/svg%3E"); }
.social-icon-btn--vk { background-color: #0077FF; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M12.7 17.5h.7c2.5 0 2.7-1.6 3.4-2.5.7-1 2.2-3.5 2.7-3.5.5 0 .5.8 1.2 3.1.8 2.7 1.9 5.2 5.4 5.2h2.5s2.5-.2 1.3-2.1c-.1-.1-.9-1.5-4.7-4.3-4-2.9-3.4 2.4 1.3 7.3 2.8 2.8 3.9 4.1 3.6 4.8-.3.7-2.6.2-2.6.2s-5.8-.4-8.2-3.8c-2.9-4.1-2.1-3.2 1-9.8 2.1-4.2 3-6.7 3-6.7S8.5 4.5 12.7 17.5z'/%3E%3C/svg%3E"); }
.social-icon-btn--facebook { background-color: #1877F2; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M24 12.1c0-6.6-5.4-12-12-12S0 5.5 0 12.1c0 6 4.4 11 10.1 11.9v-8.4H7.1v-3.5h3V9.4c0-3 1.8-4.7 4.5-4.7 1.3 0 2.7.2 2.7.2v3h-1.5c-1.5 0-2 .9-2 1.9v2.3h3.4l-.5 3.5h-2.9v8.4C19.6 23.1 24 18.1 24 12.1z'/%3E%3C/svg%3E"); }
.social-icon-btn--threads { background-color: #101010; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.2c5.4 0 9.8 4.4 9.8 9.8 0 5.4-4.4 9.8-9.8 9.8S2.2 17.4 2.2 12 6.6 2.2 12 2.2zm3.5 9.8c0-2.5-1.2-4-3.5-4.1-1.3 0-2.4.5-3.1 1.4l1.2 1c.5-.6 1.1-.9 1.9-.9 1.4 0 2.2.9 2.2 2.4v.2c-.7-.3-1.5-.5-2.4-.5-2.2 0-3.6 1.4-3.6 3.3s1.4 3.3 3.6 3.3c1.5 0 2.6-.6 3.2-1.7v.1h1.5v-4.3z'/%3E%3C/svg%3E"); }
.social-icon-btn--bot { background-color: #229ED9; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a2 2 0 0 1 2 2v1h3a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h3V4a2 2 0 0 1 2-2zm-1 4H8v2h8V6h-3V5a1 1 0 0 0-2 0v1z'/%3E%3C/svg%3E"); }
.social-icon-btn--max { background-color: #5B4EE5; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h16v16H4V4zm4 4v8l4-4 4 4V8H8z'/%3E%3C/svg%3E"); }

/* Rating panel — above article text */
.article-rating-panel { margin: 12px 0 16px; padding: 18px; }
.article-rating-panel h3 {
  font-family: var(--font-display);
  color: var(--gold);
  margin-bottom: 8px;
}
.rating-summary {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 16px;
}
.rating-summary strong { color: var(--gold); font-size: 1.2rem; }
.star-picker {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
}
.star-btn {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.2);
  color: var(--muted);
  font-size: 20px;
  cursor: pointer;
  transition: all 0.15s;
}
.star-btn:hover, .star-btn.active {
  border-color: var(--gold);
  background: var(--gold-soft);
  color: var(--gold);
  transform: scale(1.05);
}
.rating-comment {
  width: 100%;
  min-height: 80px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.25);
  color: var(--text);
  font: inherit;
  resize: vertical;
  margin-bottom: 12px;
}
.rating-submit {
  padding: 12px 20px;
  border-radius: 10px;
  border: none;
  background: var(--gold);
  color: #0f1c3c;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.rating-submit:disabled { opacity: 0.5; cursor: not-allowed; }
.reviews-list { margin-top: 20px; }
.review-item {
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.review-item:last-child { border-bottom: none; }
.review-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 13px;
}
.review-name { font-weight: 700; }
.review-stars { color: var(--gold); }
.review-text { font-size: 14px; line-height: 1.55; color: var(--silver); }
.article-card-rating {
  font-size: 12px;
  color: var(--gold);
  margin-top: 8px;
}

.articles-stats {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 12px;
}

.bottom-nav.nav-6 .nav-item {
  font-size: 9px;
}
.bottom-nav.nav-6 .nav-item span { font-size: 18px; }