/*
  Keyword Search tool styling
  - Keeps the overall twitter.lolarchiver.com look & feel
  - Adds a modern query builder + ergonomic result cards
*/

:root {
	--ks-bg: rgba(0, 0, 0, 0.35);
	--ks-panel: rgba(255, 255, 255, 0.06);
	--ks-panel-strong: rgba(255, 255, 255, 0.10);
	--ks-border: rgba(255, 255, 255, 0.10);
	--ks-text: rgba(0, 0, 0, 0.92);
	--ks-muted: rgb(99 95 95);
	--ks-accent: #e51c1c;
	--ks-accent-2: #ff2d55;
	--ks-good: #00d084;
	--ks-warn: #ffb020;
	--ks-bad: #ff4d4f;
}

.ks-root {
	color: var(--ks-text);
}

/* -------------------------------------------------
   Loading spinner (centered, white <-> Twitter blue)
-------------------------------------------------- */

.ks-status-loading #ksStatusText {
	flex: 1 1 auto;
	min-height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ks-status-loading #ksLoadMoreBtn {
	visibility: hidden;
}

.ks-status-spinner {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}

.ks-spinner {
	width: 40px;
	height: 40px;
	border-radius: 999px;
	/* Conic gradient ring */
	background: conic-gradient(from 0deg,
		rgba(255, 45, 85, 0.10),
		rgba(255, 45, 85, 1),
		rgba(255, 45, 85, 0.10));
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 0);
	mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 0);
	animation: ks-spin 0.9s linear infinite;
	filter: drop-shadow(0 0 12px rgba(255, 45, 85, 0.15));
}

@keyframes ks-spin {
	to { transform: rotate(360deg); }
}

@keyframes ks-color-cycle {
	0%, 100% {
		background: conic-gradient(from 0deg,
			rgba(255, 255, 255, 0.10),
			rgba(255, 255, 255, 1),
			rgba(255, 255, 255, 0.10));
	}
	50% {
		background: conic-gradient(from 0deg,
			rgba(255, 45, 85, 0.10),
			rgba(255, 45, 85, 1),
			rgba(255, 45, 85, 0.10));
	}
}

/* Smaller inline spinner used in buttons */
.ks-btn-loading {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.ks-btn-spinner {
	width: 16px;
	height: 16px;
	border-radius: 999px;
	background: conic-gradient(from 0deg,
		rgba(255, 255, 255, 0.10),
		rgba(255, 255, 255, 1),
		rgba(255, 255, 255, 0.10));
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 0);
	mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 0);
	animation: ks-spin 0.8s linear infinite;
}

.ks-lead {
	color: var(--ks-muted);
	max-width: 64rem;
}

/* Page layout */

.ks-page {
	width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 18px 18px;
    background: rgb(255 255 255 / 14%);
    backdrop-filter: blur(2px);
}

.ks-header {
	padding: 2px 2px;
}

.ks-composer {
	max-width: 860px;
	margin: 0 auto;
}

.ks-help-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border-radius: 999px;
	padding-inline: 12px;
}

.ks-help-icon {
	font-size: 18px;
	line-height: 1;
}

/* Query composer */

.ks-query-wrap {
    position: relative;
    border-radius: 14px;
    border: 1px solid var(--ks-border);
    background: rgb(49 49 49);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

.ks-query-highlight {
	position: absolute;
	inset: 0;
	padding: 14px 16px;
	white-space: pre-wrap;
	word-break: break-word;
	font-size: 1rem;
	line-height: 1.35;
	overflow: hidden; /* allow scrollTop sync with the textarea without showing scrollbars */
	pointer-events: none;
	color: rgba(255,255,255,0.92);
}

.ks-query-input {
	position: relative;
	width: 100%;
	min-height: 56px;
	padding: 14px 16px;
	border: 0;
	outline: none;
	resize: vertical;
	background: transparent;
	overflow: auto;
	font-size: 1rem;
	line-height: 1.35;
	white-space: pre-wrap;
	word-break: break-word;
	color: rgba(255,255,255,0.92);
	caret-color: #fff;
}

.ks-query-input.ks-editor-disabled {
	opacity: 0.65;
	pointer-events: none;
}

/* Contenteditable placeholder */
.ks-query-input[data-empty="1"]::before {
	content: attr(data-placeholder);
	color: rgba(255, 255, 255, 0.35);
	pointer-events: none;
}

/* --- Fix caret/overlay desync (quotes in particular) --- */
.ks-query-highlight,
.ks-query-input {
  /* prevent kerning/ligature differences between textarea text and HTML spans */
  font-kerning: none;
  font-variant-ligatures: none;
  font-feature-settings: "kern" 0, "liga" 0, "clig" 0, "calt" 0;
}

.ks-query-wrap:focus-within {
	border-color: rgba(168, 168, 168, 0.55);
	box-shadow: 0 0 0 4px rgba(141, 141, 141, 0.15), 0 10px 30px rgba(0,0,0,0.25);
}

/* Operator coloring */

.ks-op {
	font-weight: 700;
	letter-spacing: 0;
}

/*
	IMPORTANT (caret / highlight sync)
	--------------------------------
	The query input is a transparent <textarea> with a styled highlight layer underneath.
	The caret position is computed from the textarea's text metrics.

	If we change text metrics only in the highlight layer (font-weight, letter-spacing, etc.),
	the caret will drift and appear "out of sync".

	So inside the highlight layer we keep metrics identical and simulate bold with text-shadow
	(which does not affect layout).
*/
.ks-query-highlight .ks-op {
	font-weight: inherit;
	letter-spacing: inherit;
	text-shadow:
		0 0 0 currentColor,
		0.35px 0 0 currentColor,
		-0.35px 0 0 currentColor,
		0 0.35px 0 currentColor,
		0 -0.35px 0 currentColor;
}

.ks-op-quote { color: #c084fc; }
.ks-op-or { color: #60a5fa; }
.ks-op-not { color: #fb7185; }
.ks-op-paren { color: #fbbf24; }
.ks-op-wild { color: #34d399; }
.ks-op-near { color: #a3e635; }
.ks-op-field { color: #22c55e; }
.ks-op-word { color: rgba(255,255,255,0.92); }
.ks-op-space { color: rgba(255,255,255,0.92); }

/* Toolbar */

.ks-toolbar {
	background: transparent;
	justify-content: center;
}

.ks-toolbar .btn-group {
	flex-wrap: wrap;
	justify-content: center;
}

.ks-divider {
	flex-basis: 100%;
	height: 0;
}

.ks-scope {
	justify-content: center;
}

.ks-controls {
	justify-content: center;
	gap: 10px !important;
}

.ks-toolbar .btn.ks-op-btn {
    border-color: rgba(255, 255, 255, 0.14);
    background: rgb(69 69 69);
    color: rgba(255, 255, 255, 0.88);
}

.ks-toolbar .btn.ks-op-btn:hover {
	border-color: rgba(255,255,255,0.22);
	background: rgb(95 94 94);
}

.ks-toolbar .form-select,
.ks-toolbar .form-control {
	border-color: rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.9);
    background: rgb(69 69 69);
    padding: .25rem .5rem;
    font-size: .875rem;
    line-height: 1.5;
    border-radius: .2rem;
}

.ks-toolbar .form-select:focus,
.ks-toolbar .form-control:focus {
	border-color: rgba(255, 45, 85, 0.55);
	box-shadow: 0 0 0 3px rgba(28, 122, 229, 0.15);
}

.ks-toolbar .form-label {
	color: rgba(255,255,255,0.75);
	font-size: 0.85rem;
}

.ks-badge-soft {
	background: rgba(255,45,85,0.14);
	border: 1px solid rgba(255,45,85,0.25);
	color: rgba(255,255,255,0.85);
	border-radius: 999px;
	padding: 2px 10px;
	font-size: 0.8rem;
}

/* Filters */

.ks-filters {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.ks-query-highlight,
.ks-query-input {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
               "Liberation Mono", "Courier New", monospace;

	/* Keep the text metrics identical in BOTH layers (textarea + highlight).
	   The highlight layer can decorate tokens, but must not change character widths. */
	font-weight: 400;
	letter-spacing: 0;

  font-kerning: none;
  font-variant-ligatures: none;
  font-feature-settings: "kern" 0, "liga" 0, "clig" 0, "calt" 0;
}

.ks-filter-toggle {
	appearance: none;
	border: 1px solid rgba(255,255,255,0.16);
	background: rgb(69, 69, 69);
	color: rgba(255,255,255,0.92);
	border-radius: 999px;
	padding: 8px 12px;
	font-weight: 700;
	letter-spacing: 0.2px;
	font-size: 0.95rem;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: background 0.15s ease, border-color 0.15s ease, transform 0.08s ease;
}

.ks-filter-toggle:hover {
	background: rgba(0, 0, 0, 0.32);
	border-color: rgba(255,255,255,0.26);
	color: rgba(255,255,255,0.98);
}

.ks-filter-toggle:active {
	transform: translateY(1px);
}

.ks-filter-toggle:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(255, 45, 85, 0.18);
}

.ks-filter-toggle .material-symbols-outlined {
	font-size: 18px;
	line-height: 1;
}

.ks-filter-caret {
	font-size: 20px;
	opacity: 0.85;
	transition: transform 0.15s ease;
}

.ks-filter-toggle[aria-expanded="true"] .ks-filter-caret {
	transform: rotate(180deg);
}

.ks-filters-collapse {
	width: 100%;
}

.ks-filter-panel {
	margin-top: 12px;
	border: 1px solid rgba(15, 23, 42, 0.10);
	background: rgba(255, 255, 255, 0.75);
	border-radius: 12px;
	padding: 12px;
}

.tweets-badge {
	background-color: #ff2d55 !important;
    color: #ffffff;
}

.ks-filter-card {
	border: 1px solid rgba(15, 23, 42, 0.10);
	background: rgba(255, 255, 255, 0.82);
	border-radius: 12px;
	padding: 12px 12px;
	margin-top: 0;
}

.ks-filter-title {
	font-size: 0.95rem;
	color: rgba(15, 23, 42, 0.86);
	font-weight: 700;
}

.ks-filter-card .form-text {
	color: rgba(15, 23, 42, 0.60);
}

.ks-filter-card code {
	background: rgba(15, 23, 42, 0.06);
	border-radius: 6px;
	padding: 1px 6px;
}

/* Tabs */

.ks-tabs {
	justify-content: center;
}

.ks-tabs .nav-link {
	background: rgb(93 93 93);
	border: 1px solid rgba(255,255,255,0.12);
	color: rgba(255,255,255);
	margin-right: 8px;
	border-radius: 999px;
}

.ks-tabs .nav-link.active {
	    background: rgb(255 45 85 / 55%);
    border-color: rgb(78 116 127 / 35%);
    color: rgb(255 255 255);
}

.ks-tab-content {
	margin-top: 12px;
}

/* Help modal field selectors */

.ks-help-sep {
	border-color: rgba(255, 255, 255, 0.10);
	opacity: 1;
}

.ks-help-fields {
	list-style: none;
	padding-left: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

@media (max-width: 768px) {
	.ks-help-fields { grid-template-columns: 1fr; }
}

.ks-help-fields li {
	border: 1px solid rgba(255,255,255,0.10);
	background: rgba(255,255,255,0.04);
	border-radius: 12px;
	padding: 10px;
	color: rgba(255,255,255,0.82);
}

/* Result cards */

.ks-user-card {
	border: 1px solid rgba(255,255,255,0.10);
	background: rgba(0,0,0,0.22);
	border-radius: 14px;
	padding: 12px;
	margin-bottom: 12px;
}

.ks-user-header {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}

.ks-avatar {
	width: 52px;
	height: 52px;
	border-radius: 999px;
	object-fit: cover;
	border: 1px solid rgba(255,255,255,0.18);
	background: rgba(255,255,255,0.08);
	flex: 0 0 auto;
}

.ks-user-meta {
	flex: 1 1 auto;
	min-width: 0;
	line-height: 1.28!important;
}

.ks-user-topline {
	display: flex;
	gap: 10px;
	align-items: baseline;
	flex-wrap: wrap;
}

.ks-user-handle {
	font-weight: 700;
	color: rgba(255,255,255,0.72);
	text-decoration: none;
}

.ks-user-handle:hover {
	text-decoration: underline;
}

.ks-user-displayname {
	font-weight: 800;
	color: rgba(255,255,255,0.95);
	text-decoration: none;
}

.ks-user-displayname:hover {
	text-decoration: underline;
}

.ks-user-display {
	color: rgba(255,255,255,0.75);
	font-weight: 600;
}

.ks-user-subline {
	margin-top: 3px;
	color: rgba(255,255,255,0.55);
	font-size: 0.85rem;
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.ks-pill {
	border: 1px solid rgba(255,255,255,0.12);
	background: rgba(255,255,255,0.06);
	border-radius: 999px;
	padding: 2px 10px;
}

.ks-items {
	margin-top: 10px;
	border-top: 1px solid rgba(255,255,255,0.08);
	padding-top: 10px;
}

.ks-item {
	border: 1px solid rgba(255,255,255,0.08);
	background: rgba(255,255,255,0.04);
	border-radius: 12px;
	padding: 10px;
	margin-bottom: 10px;
}

.ks-item:last-child {
	margin-bottom: 0;
}

.ks-item-head {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
	align-items: baseline;
	margin-bottom: 6px;
}

.ks-item-title {
	font-weight: 700;
	color: rgba(255,255,255,0.9);
	font-size: 0.95rem;
}

.ks-item-meta {
	color: rgba(255,255,255,0.55);
	font-size: 0.85rem;
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.ks-item-body {
	color: rgba(255,255,255,0.86);
	white-space: pre-wrap;
	word-break: break-word;
}

.ks-item a {
	color: rgba(255,45,85,0.95);
}

.ks-metrics {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 8px;
	color: rgba(255,255,255,0.65);
	font-size: 0.85rem;
}

.ks-metrics span {
	border: 1px solid rgba(255,255,255,0.10);
	background: rgba(0,0,0,0.16);
	border-radius: 999px;
	padding: 2px 10px;
}

.ks-mark {
	background: rgba(255, 176, 32, 0.25);
	color: rgba(255,255,255,0.95);
	border-radius: 4px;
	padding: 0 3px;
}

/* Help modal */

.ks-modal {
	background: #ffffff;
	border: 1px solid rgba(15, 23, 42, 0.12);
	color: rgba(15, 23, 42, 0.92);
	box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
}

.ks-modal .modal-header,
.ks-modal .modal-footer {
	background: #ffffff;
	color: rgba(15, 23, 42, 0.92);
}

.ks-modal .modal-header {
	border-bottom: 1px solid rgba(15, 23, 42, 0.12);
}

.ks-modal .modal-footer {
	border-top: 1px solid rgba(15, 23, 42, 0.12);
}

.ks-help-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

@media (max-width: 768px) {
	.ks-help-grid { grid-template-columns: 1fr; }
}

.ks-help-item {
	border: 1px solid rgba(15, 23, 42, 0.10);
	background: rgba(15, 23, 42, 0.03);
	border-radius: 12px;
	padding: 10px;
}

.ks-help-op {
	font-size: 0.95rem;
	margin-bottom: 4px;
}

.ks-help-desc {
	color: rgba(15, 23, 42, 0.70);
	font-size: 0.9rem;
}

.ks-help-ex {
	margin-top: 4px;
	color: rgba(15, 23, 42, 0.75);
	font-size: 0.9rem;
}

.ks-help-sep {
	border-color: rgba(15, 23, 42, 0.12);
}

.ks-modal code {
	color: rgba(15, 23, 42, 0.92);
	background: rgba(15, 23, 42, 0.06);
	border-radius: 6px;
	padding: 1px 6px;
}

.ks-modal .btn.btn-secondary {
	background: rgba(15, 23, 42, 0.08);
	border-color: rgba(15, 23, 42, 0.12);
	color: rgba(15, 23, 42, 0.85);
}

.ks-modal .btn.btn-secondary:hover {
	background: rgba(15, 23, 42, 0.12);
}

/* Load more under tabs */
.ks-loadmore-wrap {
	display: flex;
	justify-content: center;
	margin: 10px 0 0;
}

/* No results box */
.ks-no-results-wrap {
	display: flex;
	justify-content: center;
	padding: 18px 0;
}

.ks-no-results-box {
	max-width: 520px;
	width: 100%;
	text-align: center;
	padding: 14px 16px;
	border-radius: 14px;
	border: 1px solid rgba(15, 23, 42, 0.10);
	background: rgba(255, 255, 255, 0.70);
	color: rgba(15, 23, 42, 0.70);
	box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

/* POI chips (videos/transcripts) */
.tt-ks-poi {
	margin-top: 8px;
	border-top: 1px solid rgba(15, 23, 42, 0.10);
	padding-top: 8px;
}

.ks-op-tip {
	padding: 4px;
	padding-inline: 7px;
	border-radius: 5px;
	background-color: #444;
}

.tt-ks-poi-title {
	font-weight: 700;
	font-size: 0.85rem;
	color: rgba(15, 23, 42, 0.80);
	letter-spacing: 0.2px;
}

.tt-ks-poi-hr {
	margin: 6px 0 8px;
	border: 0;
	border-top: 1px solid rgba(15, 23, 42, 0.10);
}

.tt-ks-poi-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.tt-ks-poi-chip {
	display: inline-flex;
	align-items: center;
	max-width: 100%;
	border-radius: 999px;
	padding: 4px 10px;
	font-size: 0.78rem;
	line-height: 1.15;
	border: 1px solid rgba(255, 176, 32, 0.35);
	background: rgba(255, 176, 32, 0.18);
	color: rgba(15, 23, 42, 0.85);
}

.tt-ks-poi-chip strong {
	font-weight: 700;
}

/* A slightly deeper accent variant (for alternating chips) */
.tt-ks-poi-chip.alt {
	border-color: rgba(255, 149, 0, 0.38);
	background: rgba(255, 149, 0, 0.18);
}

/* Alerts */

.ks-alert {
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: 12px;
    padding: 10px 12px;
    background: rgba(15, 23, 42, 0.04);
    color: rgba(15, 23, 42, 0.75);
}

.ks-alert.ks-alert-info {
border-color: rgb(94 94 94 / 25%);
    background: rgb(112 181 216 / 12%);
}
.ks-alert.ks-alert-error {
	border-color: rgba(255,77,79,0.35);
	background: rgba(255,77,79,0.10);
}

.ks-alert.ks-alert-warn {
	border-color: rgba(255,176,32,0.35);
	background: rgba(255,176,32,0.10);
}

.ks-alert.ks-alert-ok {
	border-color: rgba(0,208,132,0.35);
	background: rgba(0,208,132,0.10);
}

.ks-alert b { color: rgba(15, 23, 42, 0.85); }


#ksStatusRow {
  justify-self: center;
}

.select-filter-option {
	width: 100%;
    width: -webkit-fill-available;
}

/* ------------------------------------------------------------------
   Result rendering classes (used by keyword_search.js)
   ------------------------------------------------------------------ */

.ks-user-hits {
	margin-top: 10px;
	border-top: 1px solid rgba(255,255,255,0.08);
	padding-top: 10px;
}

.ks-user-line1 {
	display: flex;
	gap: 10px;
	align-items: baseline;
	flex-wrap: wrap;
}

.ks-user-line2 {
	color: rgba(255,255,255,0.55);
	font-size: 0.9rem;
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.ks-user-line3 {
	margin-top: 2px;
	color: rgba(255,255,255,0.55);
	font-size: 0.78rem;
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	align-items: baseline;
}

.ks-user-id {
	color: rgba(255,255,255,0.55);
}

.ks-user-name {
	color: rgba(255,255,255,0.75);
	font-weight: 600;
}

.ks-user-stats {
	color: rgba(255,255,255,0.55);
}

.ks-hit {
	border: 1px solid rgba(255,255,255,0.08);
	background: rgba(255,255,255,0.04);
	border-radius: 12px;
	padding: 10px;
	margin-bottom: 10px;
}

.ks-hit:last-child {
	margin-bottom: 0;
}

.ks-hit-meta {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
	align-items: baseline;
	margin-bottom: 6px;
}

.ks-hit-meta-left,
.ks-hit-meta-right {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	align-items: baseline;
}

.ks-hit-link {
	font-weight: 700;
	text-decoration: none;
	color: rgba(255,45,85,0.95);
}

.ks-hit-link:hover {
	text-decoration: underline;
}

.ks-hit-date {
	color: rgba(255,255,255,0.60);
	font-size: 0.85rem;
}

.ks-hit-rel {
	color: rgba(255,255,255,0.50);
	font-size: 0.85rem;
}

.ks-hit-body {
	color: rgba(255,255,255,0.86);
	white-space: pre-wrap;
	word-break: break-word;
}

.ks-metric {
	border: 1px solid rgba(255,255,255,0.10);
	background: rgba(0,0,0,0.16);
	border-radius: 999px;
	padding: 2px 10px;
	font-size: 0.85rem;
	color: rgba(255,255,255,0.70);
}

.ks-link {
	color: rgba(255,45,85,0.95);
}

.ks-empty {
	border: 1px dashed rgba(255,255,255,0.16);
	border-radius: 12px;
	padding: 14px 12px;
	color: rgba(255,255,255,0.65);
	background: rgba(0,0,0,0.18);
}

.ks-error-box {
	border: 1px solid rgba(255,77,79,0.35);
	background: rgba(255,77,79,0.10);
	border-radius: 12px;
	padding: 10px 12px;
	margin-bottom: 12px;
}

.ks-error-title {
	font-weight: 800;
	margin-bottom: 4px;
}

.ks-error-details {
	color: rgba(255,255,255,0.75);
	white-space: pre-wrap;
	word-break: break-word;
}

/* ------------------------------------------------------------------
   Small additions to better integrate inside the existing twitter UI
   ------------------------------------------------------------------ */

.ks-page {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 12px 28px;
}

.ks-divider {
	width: 1px;
	height: 13px;
	background: rgba(255,255,255,0.12);
	margin: 0 8px;
}

.ks-op-and { color: #93c5fd; }

/* Backward-compat: older markup used tks-mark */
.tks-mark {
	background: rgba(255, 176, 32, 0.25);
	color: rgba(255,255,255,0.95);
	border-radius: 4px;
	padding: 0 3px;
}

/* ------------------------------------------------------------------
   Light, readable results theme (requested)
   ------------------------------------------------------------------ */

/* Search summary ("Query …") */
.ks-status-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

/* Hide until there is something to load (JS will show it when relevant) */
#ksLoadMoreBtn {
	display: none;
}

.ks-status-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px;
	border-radius: 999px;
	border: 1px solid rgba(15, 23, 42, 0.12);
	background: rgba(255, 255, 255, 0.85);
	box-shadow: 0 1px 2px rgba(2, 6, 23, 0.06);
	color: rgba(15, 23, 42, 0.82);
}

.ks-status-label {
	font-weight: 700;
	letter-spacing: 0.2px;
	color: rgba(15, 23, 42, 0.70);
}

.ks-status-query {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	font-size: 0.9em;
	max-width: 72ch;
	overflow-wrap: anywhere;
	white-space: normal;
	padding: 2px 8px;
	border-radius: 10px;
	border: 1px solid rgba(15, 23, 42, 0.10);
	background: rgba(15, 23, 42, 0.04);
	color: rgba(15, 23, 42, 0.86);
}

.ks-status-value {
	font-weight: 700;
	color: rgba(15, 23, 42, 0.86);
}

/* Tabs (clean white / gray tones) */
.ks-tabs .nav-link {
	background: rgba(255,255,255,0.88);
	border: 1px solid rgba(15, 23, 42, 0.12);
	color: rgba(15, 23, 42, 0.70);
}

.ks-tabs .nav-link:hover {
	background: rgba(15, 23, 42, 0.04);
}

.ks-tabs .nav-link.active {
	background: rgba(255, 45, 85, 0.14);
	border-color: rgba(255, 45, 85, 0.35);
	color: rgba(255, 45, 85, 1);
}

.ks-tabs .nav-link .badge {
	background-color: rgba(15, 23, 42, 0.10) !important;
	color: rgba(15, 23, 42, 0.75) !important;
}

.ks-tabs .nav-link.active .badge {
	background-color: rgba(255, 45, 85, 0.18) !important;
	color: rgba(15, 23, 42, 0.80) !important;
}

/* Result cards */
.ks-user-card {
	border: 1px solid rgba(15, 23, 42, 0.12);
	background: rgba(255, 255, 255, 0.92);
	box-shadow: 0 8px 20px rgba(2, 6, 23, 0.06);
}

.ks-avatar {
	border: 1px solid rgba(15, 23, 42, 0.14);
	background: rgba(15, 23, 42, 0.04);
}

.ks-user-handle {
	color: rgba(15, 23, 42, 0.64);
	font-weight: 700;
}

.ks-user-handle:hover {
	color: rgba(255, 45, 85, 1);
}

.ks-user-displayname {
	color: rgba(15, 23, 42, 0.92);
}

.ks-user-displayname:hover {
	color: rgba(255, 45, 85, 1);
}

.ks-user-line2,
.ks-user-stats {
	color: rgba(15, 23, 42, 0.58);
}

.ks-user-line3,
.ks-user-id {
	color: rgba(15, 23, 42, 0.55);
}

.ks-user-name {
	color: rgba(15, 23, 42, 0.72);
}

.ks-user-hits {
	border-top: 1px solid rgba(15, 23, 42, 0.10);
}

.ks-hit {
	border: 1px solid rgba(15, 23, 42, 0.10);
	background: rgba(248, 250, 252, 0.95);
}

.ks-hit-link {
	color: rgba(255, 45, 85, 1);
}

.ks-hit-link:hover {
	color: rgba(26, 140, 216, 1);
}

.ks-hit-date {
	color: rgba(15, 23, 42, 0.64);
}

.ks-hit-rel {
	color: rgba(15, 23, 42, 0.50);
}

.ks-hit-body {
	color: rgba(15, 23, 42, 0.92);
}

.ks-pill {
	border: 1px solid rgba(15, 23, 42, 0.12);
	background: rgba(15, 23, 42, 0.04);
	color: rgba(15, 23, 42, 0.72);
}

/* Metrics + Twitter-like icons */
.ks-metric {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 1px solid rgba(15, 23, 42, 0.12);
	background: rgba(255, 255, 255, 0.78);
	border-radius: 999px;
	padding: 2px 10px;
}

.ks-metric-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.ks-icon {
	width: 16px;
	height: 16px;
	display: block;
}

.ks-metric-count {
	color: rgba(15, 23, 42, 0.72);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.ks-icon-like { color: rgb(249, 24, 128); }
.ks-icon-comment { color: rgb(29, 155, 240); }
.ks-icon-rt { color: rgb(0, 186, 124); }
.ks-icon-views { color: rgb(83, 100, 113); }

/* Highlight */
.ks-mark {
	background: rgba(255, 214, 10, 0.35);
	color: rgba(15, 23, 42, 0.95);
}

/* Backward-compat highlight class (if older markup is still present) */
.tks-mark {
	background: rgba(255, 214, 10, 0.35);
	color: rgba(15, 23, 42, 0.95);
}

/* Empty / error blocks */
.ks-empty {
	border: 1px dashed rgba(15, 23, 42, 0.22);
	background: rgba(255, 255, 255, 0.85);
	color: rgba(15, 23, 42, 0.70);
}

.ks-error-box {
	border: 1px solid rgba(255, 77, 79, 0.28);
	background: rgba(255, 77, 79, 0.08);
}

.ks-error-title {
	color: rgba(15, 23, 42, 0.92);
}

.ks-error-details {
	color: rgba(15, 23, 42, 0.74);
}

/* Alerts (ensure bold text stays readable on light backgrounds) */
.ks-alert b { color: rgba(15, 23, 42, 0.85); }

/* TikTok keyword search page overrides */
:root{
  /* Make the existing card hover accent match the TikTok pink-red palette */
  --link-blue: #ff2d55;
}

/* Match TikTok vibe: pink toggle instead of blue on this page */
.tt-switch input:checked + .tt-slider{
  background: #ff2d55;
  border-color: #ff2d55;
}

/* Bootstrap primary recolor inside keyword search tool only */
.ks-root .btn-primary{
  background-color: #ff2d55 !important;
  border-color: #ff2d55 !important;
}
.ks-root .btn-primary:hover{
  background-color: #ff4a78 !important;
  border-color: #ff4a78 !important;
}
.ks-root .btn-outline-primary{
  color: #ff2d55 !important;
  border-color: rgba(255,45,85,0.60) !important;
}
.ks-root .btn-outline-primary:hover{
  background-color: rgba(255,45,85,0.12) !important;
  border-color: rgba(255,45,85,0.70) !important;
  color: #fff !important;
}

/* Our TikTok-style results container */
.tt-ks-results.comments-container-ytc{
  margin-top: 14px;
}
/* Empty state: keep the message centered (don’t confine it to the first column) */
.tt-ks-results.ks-empty{
  column-count: 1 !important;
}
@media (max-width: 740px){
  .tt-ks-results.comments-container-ytc{ column-count: 1; }
}

/* Extra metadata lines inside cards */
.tt-ks-submeta{
  font-size: 12px;
  color: rgba(15,23,42,0.62);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.tt-ks-pill{
  border: 1px solid rgba(15,23,42,0.10);
  background: rgba(15,23,42,0.04);
  border-radius: 999px;
  padding: 2px 10px;
  font-variant-numeric: tabular-nums;
}

/* Make highlights readable on white cards */
.ks-mark{
  background: rgba(255,45,85,0.20);
  color: rgba(15,23,42,0.92);
  border-radius: 4px;
  padding: 0 3px;
}

/* Align ToS placement + validation feedback to comments_history */
.ks-search-card{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: 100%;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}
.ks-search-card .tt-tos-row{
  margin-bottom: 6px;
}

/* Card header tweaks */
.tt-ks-displayname{
  margin-left: 8px;
  font-size: 12px;
  color: rgba(15,23,42,0.60);
}

.tt-ks-idline{
  margin-top: 2px;
  margin-bottom: 8px;
  font-size: 11.5px;
  color: rgba(15,23,42,0.60);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.tt-ks-idpair code{
  font-size: 11.5px;
}
.tt-ks-sep{
  opacity: 0.55;
}

/* Stats row (icons + numbers) */
.tt-ks-stats{
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 10px;
  color: rgba(15,23,42,0.62);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.tt-ks-stat{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.tt-ks-stat svg{
  width: 16px;
  height: 16px;
  fill: currentColor;
}
.tt-ks-stat--likes svg{
  fill: rgb(249, 24, 128);
}

/* Simple tag row (lang, reply, etc.) */
.tt-ks-tags{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.tt-ks-tag{
  border: 1px solid rgba(15,23,42,0.10);
  background: rgba(15,23,42,0.04);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 12px;
  color: rgba(15,23,42,0.70);

  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Flag icons inside tags */
.tt-ks-flagwrap{
  display: inline-flex;
  align-items: center;
}
.tt-ks-flag{
  width: 18px;
  height: 12px;
  border-radius: 2px;
  border: 1px solid rgba(15,23,42,0.12);
  background: rgba(15,23,42,0.06);
  object-fit: cover;
}

/* TikTok icon link (top-right) */
.goto-ytc img.tiktok-link-icon{
  width: 18px;
  height: 18px;
}