/*
  Feed module — KOLO UI v1.0.1.4
  Adds a cleaner Cyber Glow look for feed controls (tabs, filters, action bar)
  without touching post cards (handled by posts.css).
*/

.feed-page{
  max-width: 980px;
  margin: 0 auto;
}

/* Top control cards (k-card + kp-card) */
.feed-page .kp-card{
  background: rgba(26, 26, 36, 0.70);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,0.10);
}

[data-theme="light"] .feed-page .kp-card{
  background: rgba(255,255,255,0.92);
  border-color: rgba(0,0,0,0.08);
}

/* Tabs / chips */
.feed-page .kp-chip{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: var(--k-text-secondary);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .1px;
  text-decoration: none;
  transition: transform .14s ease, background .14s ease, border-color .14s ease, box-shadow .14s ease, color .14s ease;
}

.feed-page .kp-chip:hover{
  transform: translateY(-1px);
  background: var(--k-primary-soft);
  border-color: rgba(255,255,255,0.18);
  color: var(--k-text-primary);
  box-shadow: 0 0 0 3px var(--k-primary-soft);
}

.feed-page .kp-chip--active{
  background: linear-gradient(135deg, var(--k-primary-soft), rgba(255,255,255,0.02));
  border-color: rgba(255,255,255,0.18);
  color: var(--k-text-primary);
  box-shadow: 0 0 0 3px var(--k-primary-soft);
}

[data-theme="light"] .feed-page .kp-chip{
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.08);
  color: var(--k-text-secondary);
}

[data-theme="light"] .feed-page .kp-chip:hover,
[data-theme="light"] .feed-page .kp-chip--active{
  background: var(--k-primary-soft);
  border-color: rgba(0,0,0,0.10);
}

/* Sort control */
.feed-page label.kp-label{
  font-size: 13px;
  opacity: .9;
}

.feed-page #feed-sort{
  min-width: 160px;
  height: 40px;
}

@media (max-width: 520px){
  .feed-page #feed-sort{
    width: 100%;
    min-width: 0;
  }
}