/* ════════════════════════════════════════
   KS (Keyword Search / Link Scrape) Shared Card Styles
   Used by: keyword-search/page.js, assets/page.js
   ════════════════════════════════════════ */

/* Tabs */
.ks-tab {
  display: inline-flex; align-items: center; gap: 5px; padding: 6px 14px; border-radius: 8px;
  border: none; background: transparent; color: var(--text-muted); font-size: 13px;
  font-weight: 500; cursor: pointer; white-space: nowrap; transition: all .15s;
}
.ks-tab:hover { background: var(--default-background); color: var(--default-text-color); }
.ks-tab.on { background: var(--primary-color); color: #fff; box-shadow: 0 2px 8px rgba(var(--primary-rgb),.25); }
.ks-tab__n {
  font-size: 10px; font-weight: 700; min-width: 18px; height: 18px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center; padding: 0 5px;
  background: rgba(0,0,0,.06);
}
.ks-tab.on .ks-tab__n { background: rgba(255,255,255,.2); color: #fff; }

/* Cards */
.ks-card {
  background: #1a1a1a; border: 1px solid #2e2e2e;
  border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; height: 100%;
  transition: all .25s cubic-bezier(.4,0,.2,1); position: relative;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.ks-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,.4); border-color: #444; }
.ks-card.selected { border-color: var(--primary-color); box-shadow: 0 0 0 2px rgba(var(--primary-rgb),.18); }

.ks-card__check {
  position: absolute; top: 10px; left: 10px; z-index: 3; cursor: pointer;
}
.ks-checkbox {
  width: 22px; height: 22px; border-radius: 6px; border: 2px solid rgba(255,255,255,.5);
  background: rgba(0,0,0,.25); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 13px;
  transition: all .15s;
}
.ks-checkbox.on { background: var(--primary-color); border-color: var(--primary-color); }
.ks-card:not(:hover) .ks-card__check:not(:has(.on)) { opacity: 0; }

.ks-card__img { position: relative; height: 195px; overflow: hidden; }
.ks-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.ks-card:hover .ks-card__img img { transform: scale(1.04); }
.ks-card__img .ks-plat-badge { position: absolute; top: 10px; right: 10px; z-index: 2; }
.ks-card__irrelevant {
  position: absolute; top: 10px; left: 42px; z-index: 2;
  font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 50px;
  background: rgba(245,158,11,.85); backdrop-filter: blur(4px); color: #fff;
}
.ks-card__body { padding: 1rem 1.1rem; flex: 1; display: flex; flex-direction: column; }
.ks-card__avatar { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ks-card__text { font-size: 12.5px; line-height: 1.55; color: #a3a3a3; margin-bottom: .75rem; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.ks-card__footer { display: flex; align-items: center; padding-top: .7rem; border-top: 1px solid #2e2e2e; gap: 4px; flex-wrap: wrap; margin-top: auto; }
.ks-card__time { font-size: 11px; color: #8a8a8a; display: inline-flex; align-items: center; gap: 3px; }
.ks-card__time i { font-size: 11px; }
.ks-card__ext {
  width: 26px; height: 26px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--primary-color); background: rgba(var(--primary-rgb),.06); font-size: 13px;
  text-decoration: none; transition: all .15s; flex-shrink: 0;
}
.ks-card__ext:hover { background: var(--primary-color); color: #fff; transform: scale(1.1); }

/* Plat badge */
.ks-plat-badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 50px;
  font-size: 10.5px; font-weight: 600; background: var(--default-background);
  color: var(--default-text-color); border: 1px solid var(--default-border);
}
.ks-plat-badge.dark { background: rgba(0,0,0,.55); backdrop-filter: blur(8px); color: #fff; border: none; }

/* Sentiment pill */
.ks-sentiment-pill {
  display: inline-flex; align-items: center; gap: 3px; padding: 3px 8px; border-radius: 50px;
  font-size: 10.5px; font-weight: 600; border: 1px solid; white-space: nowrap;
}
.ks-sentiment-pill i { font-size: 12px; }

/* Stat */
.ks-stat { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; }
.ks-stat i { font-size: 13px; }
.ks-stat b { font-weight: 600; color: var(--default-text-color); }

/* Micro badge */
.ks-micro-badge { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 50px; font-size: 10.5px; font-weight: 600; }
.ks-micro-badge i { font-size: 11px; }

/* YouTube */
.ks-card__img.yt { cursor: pointer; }
.ks-yt-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(.85);
  width: 46px; height: 46px; border-radius: 50%; background: rgba(255,0,0,.85);
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 20px;
  transition: all .25s; opacity: 0;
}
.ks-card:hover .ks-yt-play { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.ks-yt-dur {
  position: absolute; bottom: 8px; right: 8px; font-size: 10.5px; font-weight: 700;
  padding: 2px 7px; border-radius: 4px; background: rgba(0,0,0,.7); color: #fff; letter-spacing: .3px;
}

/* Loading icons */
.ks-load-icon {
  width: 36px; height: 36px; border-radius: 10px; background: var(--default-background);
  display: inline-flex; align-items: center; justify-content: center; font-size: 17px;
  animation: ksPulse 1.6s infinite ease-in-out;
}
.ks-load-icon:nth-child(2) { animation-delay: .12s; }
.ks-load-icon:nth-child(3) { animation-delay: .24s; }
.ks-load-icon:nth-child(4) { animation-delay: .36s; }
.ks-load-icon:nth-child(5) { animation-delay: .48s; }
.ks-load-icon:nth-child(6) { animation-delay: .60s; }
@keyframes ksPulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.12); opacity: .45; }}

/* Keyword chips (keyword-search only) */
.ks-kw-chip {
  display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 50px;
  font-size: 12.5px; font-weight: 500; border: 1px solid var(--default-border);
  background: var(--custom-white); color: var(--default-text-color); cursor: pointer;
  transition: all .15s; white-space: nowrap;
}
.ks-kw-chip:hover { border-color: rgba(var(--primary-rgb),.35); background: rgba(var(--primary-rgb),.04); color: var(--primary-color); }
.ks-kw-chip.active { border-color: var(--primary-color); background: rgba(var(--primary-rgb),.08); color: var(--primary-color); font-weight: 600; }
.ks-kw-manage {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px 4px 12px;
  border-radius: 50px; font-size: 12px; font-weight: 500;
  background: var(--default-background); color: var(--default-text-color); border: 1px solid var(--default-border);
}
.ks-kw-remove {
  width: 18px; height: 18px; border-radius: 50%; border: none;
  background: transparent; color: var(--text-muted); display: inline-flex;
  align-items: center; justify-content: center; font-size: 12px; cursor: pointer;
  transition: all .15s;
}
.ks-kw-remove:hover { background: rgba(239,68,68,.1); color: #ef4444; }

/* Platform chips (keyword-search) */
.ks-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; border-radius: 50px; font-size: 12.5px; font-weight: 500;
  border: 1px solid var(--default-border); background: var(--custom-white);
  color: var(--default-text-color); cursor: pointer; transition: all .15s;
}
.ks-chip:hover { border-color: rgba(var(--primary-rgb),.3); background: rgba(var(--primary-rgb),.04); }
.ks-chip.on { border-color: rgba(var(--primary-rgb),.35); background: rgba(var(--primary-rgb),.06); color: var(--primary-color); }
.ks-chip-toggle {
  display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 50px;
  border: 1px dashed var(--default-border); background: transparent; color: var(--text-muted);
  font-size: 11px; font-weight: 600; cursor: pointer; text-transform: uppercase; letter-spacing: .3px; transition: all .15s;
}
.ks-chip-toggle:hover { border-color: var(--primary-color); color: var(--primary-color); }

/* Filter buttons (Sentiment / Relevance) */
.ks-filter-btn {
  display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; border-radius: 8px;
  border: 1px solid #2e2e2e; background: transparent; color: #8a8a8a;
  font-size: 12px; font-weight: 500; cursor: pointer; transition: all .15s; white-space: nowrap;
}
.ks-filter-btn:hover { border-color: #444; color: #d4d4d4; background: rgba(255,255,255,.03); }
.ks-filter-btn.on {
  font-weight: 600; color: #f5f5f5;
  border-color: #444; background: rgba(255,255,255,.06);
}