@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700;800&display=swap');

@keyframes pulsedot {
	0%,100% { box-shadow: 0 0 4px currentColor; }
	50%     { box-shadow: 0 0 14px currentColor, 0 0 26px currentColor; }
}
@keyframes k-blink {
	0%,100% { opacity: 1; }
	50%     { opacity: 0; }
}
@keyframes k-fadein {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

.kukuys-wrap {
	--k-orange:     #D97642;
	--k-gold:       #E8A87C;
	--k-cream:      #FFF5E6;
	--k-cream-dim:  #E0C9B0;
	--k-bg-dark:    #1A0F0A;
	--k-text-muted: #8B5A3C;
	--k-border:     rgba(217,118,66,.15);

	font-family: 'JetBrains Mono', 'Consolas', 'Courier New', monospace;
	color: var(--k-cream-dim);
	position: relative;
	overflow: hidden;
	border-radius: 12px;
	border: 1px solid rgba(217,118,66,.15);
	box-shadow: 0 20px 60px rgba(0,0,0,.65);
	animation: k-fadein .35s ease;
	background: linear-gradient(180deg, #0D0704 0%, #1A0F0A 30%, #2D1810 100%);
}

.kk-spotlights {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	background:
		radial-gradient(ellipse 23% 72% at 20% 0%,  rgba(217,118,66,.22) 0%, transparent 66%),
		radial-gradient(ellipse 23% 72% at 50% 0%,  rgba(232,168,124,.26) 0%, transparent 66%),
		radial-gradient(ellipse 23% 72% at 80% 0%,  rgba(217,118,66,.22) 0%, transparent 66%),
		radial-gradient(ellipse 100% 22% at 50% 100%, rgba(100,40,10,.28) 0%, transparent 80%);
}

.kk-scanlines {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 1;
	background-image: repeating-linear-gradient(
		0deg,
		transparent,
		transparent 3px,
		rgba(217,118,66,.012) 3px,
		rgba(217,118,66,.012) 6px
	);
}

.kukuys-wrap > *:not(.kk-spotlights):not(.kk-scanlines) {
	position: relative;
	z-index: 2;
}

.kk-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 11px 18px;
	border-bottom: 1px solid rgba(217,118,66,.15);
	background: rgba(10,4,2,.4);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	flex-wrap: wrap;
	gap: 8px;
}
.kk-header-left {
	display: flex;
	align-items: center;
}
.kk-logo {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	color: var(--k-gold);
	text-shadow: 0 0 10px rgba(232,168,124,.5);
}
.kk-logo::before {
	content: '\25B6';
	margin-right: 7px;
	color: var(--k-gold);
	font-style: normal;
}
.kk-sep {
	color: rgba(217,118,66,.3);
	margin: 0 8px;
}
.kk-subtitle {
	font-size: 8px;
	color: #B08060;
	letter-spacing: .06em;
}
.kk-cursor {
	display: inline-block;
	width: 6px;
	height: 12px;
	background: var(--k-gold);
	vertical-align: middle;
	animation: k-blink 1s step-end infinite;
	margin-left: 4px;
}
.kk-hdr-right {
	display: flex;
	align-items: center;
	gap: 12px;
}
.kk-hdr-stats {
	font-size: 9px;
	color: #B08060;
	letter-spacing: .06em;
}
.kk-hdr-live {
	color: var(--k-gold);
	font-weight: 700;
}

.kk-section-label {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 14px 18px 10px;
	font-size: 8.5px;
	font-weight: 700;
	letter-spacing: .2em;
	color: var(--k-cream-dim);
	text-transform: uppercase;
}
.kk-sl-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	flex-shrink: 0;
}
.kk-sl-dot.live {
	background: var(--k-gold);
	box-shadow: 0 0 6px var(--k-gold);
	animation: pulsedot 1.5s ease infinite;
	color: var(--k-gold);
}
.kk-sl-line {
	flex: 1;
	height: 1px;
	background: linear-gradient(90deg, rgba(217,118,66,.2), transparent);
}
.kk-sl-count {
	font-size: 8px;
	color: #B08060;
}

.kk-spotlight-section {
	padding: 0 18px 20px;
}
.kk-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}
.kk-grid.kk-grid--count-1 {
	grid-template-columns: 1fr;
	max-width: 520px;
	margin-left: auto;
	margin-right: auto;
}
.kk-grid.kk-grid--count-2 {
	grid-template-columns: repeat(2, 1fr);
	max-width: 820px;
	margin-left: auto;
	margin-right: auto;
}

.kk-card {
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid rgba(217,118,66,.15);
	cursor: pointer;
	transition: border-color .25s, transform .25s, box-shadow .25s;
	position: relative;
	height: 280px;
	background: #0D0704;
}
.kk-card:hover {
	border-color: rgba(232,168,124,.5);
	transform: translateY(-3px);
	box-shadow: 0 16px 48px rgba(0,0,0,.7);
}
.kk-card.is-offline {
	opacity: .55;
	display: none;
}

.kk-card-bg {
	position: absolute;
	inset: 0;
	background-size: 65%;
	background-position: right center;
	background-repeat: no-repeat;
	transition: transform .35s ease;
}
.kk-card:hover .kk-card-bg {
	transform: scale(1.03);
}

.kk-card-fade {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to right,
		#0D0704 0%,
		#0D0704 48%,
		rgba(13,7,4,.9) 60%,
		rgba(13,7,4,.55) 72%,
		rgba(13,7,4,.15) 86%,
		transparent 100%
	);
}

.kk-card-content {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 65%;
	padding: 20px 20px 20px 40px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.kk-card-name {
	font-size: 22px;
	font-weight: 800;
	color: #FFFFFF;
	letter-spacing: .02em;
	line-height: 1.2;
	white-space: nowrap;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	display: block;
	flex-shrink: 0;
}
.kk-card-handle {
	display: block;
	margin-top: 8px;
	flex-shrink: 0;
	font-size: 8.5px;
	color: rgba(255,245,230,.7);
	letter-spacing: .05em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.kk-card-cat {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	flex-shrink: 0;
	align-self: flex-start;
	width: fit-content;
	margin-top: 16px;
	padding: 4px 10px;
	border-radius: 3px;
	background: rgba(232,168,124,.18);
	color: var(--k-gold);
	font-size: 8px;
	font-weight: 700;
	letter-spacing: .05em;
}
.kk-card-cat-dot {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--k-gold);
	flex-shrink: 0;
}
.kk-card-title {
	display: block;
	margin-top: 14px;
	flex-shrink: 0;
	font-size: 9px;
	color: rgba(255,245,230,.75);
	letter-spacing: .02em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.kk-card-stats {
	display: flex;
	gap: 22px;
	margin-top: 18px;
	flex-shrink: 0;
}
.kk-stat {
	flex-shrink: 0;
}
.kk-stat .v {
	display: block;
	font-size: 22px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.02em;
	color: var(--k-gold);
	text-shadow: 0 0 10px rgba(232,168,124,.5);
}
.kk-stat .l {
	display: block;
	font-size: 7px;
	color: #A86840;
	letter-spacing: .1em;
	text-transform: uppercase;
	margin-top: 3px;
}
.kk-stat-followers .v {
	color: var(--k-cream-dim);
	text-shadow: none;
}

.kk-watch-btn {
	display: none !important;
}

.kk-live-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 3px 8px;
	border-radius: 3px;
	font-size: 7.5px;
	font-weight: 700;
	letter-spacing: .1em;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	background: rgba(10,4,2,.72);
	color: var(--k-gold);
	border: 1px solid rgba(232,168,124,.35);
}
.kk-live-badge-dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--k-gold);
	box-shadow: 0 0 6px var(--k-gold);
	flex-shrink: 0;
	animation: pulsedot 1.5s ease infinite;
	color: var(--k-gold);
}

.kk-viewers-pill {
	position: absolute;
	bottom: 12px;
	right: 12px;
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 4px 9px;
	border-radius: 10px;
	font-size: 8px;
	font-weight: 700;
	background: rgba(10,4,2,.8);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: var(--k-gold);
}
.kk-viewers-pill-dot {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--k-gold);
	flex-shrink: 0;
}

.kk-table-section {
	border-top: 1px solid rgba(217,118,66,.1);
	padding: 0 14px 14px;
}
.kk-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 4px;
}
.kk-table-wrap::-webkit-scrollbar        { height: 3px; }
.kk-table-wrap::-webkit-scrollbar-track  { background: transparent; }
.kk-table-wrap::-webkit-scrollbar-thumb  { background: rgba(217,118,66,.2); border-radius: 2px; }

table.kk-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 9.5px;
	min-width: 680px;
	font-family: 'JetBrains Mono', 'Consolas', 'Courier New', monospace;
}
table.kk-table thead tr {
	border-bottom: 1px solid rgba(217,118,66,.12);
}
table.kk-table th {
	padding: 5px 8px;
	text-align: left;
	font-size: 7px;
	font-weight: 700;
	letter-spacing: .18em;
	color: #8A6040;
	white-space: nowrap;
	text-transform: uppercase;
	user-select: none;
}
table.kk-table tbody tr {
	border-bottom: 1px solid rgba(217,118,66,.04);
	cursor: pointer;
	transition: background .12s, box-shadow .12s;
}
table.kk-table tbody tr:hover {
	background: rgba(217,118,66,.06);
}
table.kk-table td {
	padding: 5px 8px;
	vertical-align: middle;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.kukuys-row--loading td {
	color: rgba(217,118,66,.2);
}
.kukuys-row--loading .kk-loading-dash {
	animation: k-blink 1.2s step-end infinite;
	color: rgba(217,118,66,.25);
}
.tr-live {
	background: rgba(217,118,66,.07);
	box-shadow: inset 3px 0 0 var(--k-gold);
}
.tr-offline td {
	color: #7A5438;
}

.kk-status-live {
	color: var(--k-gold);
	font-weight: 700;
	font-size: 8px;
	letter-spacing: .06em;
	text-shadow: 0 0 8px rgba(232,168,124,.5);
}
.kk-status-offl {
	color: #6A4830;
	font-weight: 700;
	font-size: 8px;
	letter-spacing: .06em;
}
.kk-ch-inner {
	display: flex;
	align-items: center;
	gap: 7px;
}
.kk-ava-wrap {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	overflow: hidden;
	flex-shrink: 0;
	background-size: cover;
	background-position: center;
	border: 1px solid rgba(232,168,124,.3);
	display: flex;
	align-items: center;
	justify-content: center;
}
.kk-ava-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.kk-ava-ini {
	font-size: 7px;
	font-weight: 700;
	color: #A87050;
}
.kk-ch-name-live {
	color: var(--k-cream);
	font-weight: 700;
	font-size: 9.5px;
}
.kk-ch-name-offl {
	color: #9C7060;
	font-weight: 400;
	font-size: 9.5px;
}
.kk-viewers-val {
	color: var(--k-gold);
	font-weight: 700;
	text-shadow: 0 0 8px rgba(232,168,124,.4);
}
.kk-title-live   { color: #E8A87C; max-width: 200px; overflow: hidden; text-overflow: ellipsis; display: block; }
.kk-title-offl   { color: #7A5030; }
.kk-cat-live     { color: #C97C5D; }
.kk-cat-offl     { color: #6A4830; }
.kk-lang-val     { color: var(--k-gold); font-size: 9px; letter-spacing: .04em; }
.kk-yes          { color: #e06060; font-weight: 700; font-size: 9px; }
.kk-yes-soft     { color: #D97642; font-weight: 700; font-size: 9px; }
.kk-no           { color: #6A4828; font-weight: 600; font-size: 9px; }
.kk-dash         { color: #5A3C28; }
.kk-badge-warn   { color: #cc9900; font-size: 8px; background: rgba(255,180,0,.08); padding: 1px 4px; border-radius: 2px; }
.kk-bio          { font-style: italic; color: #9A6040; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kk-fv           { color: var(--k-gold); }

.kk-col-status,   .kk-status   { width: 50px; }
.kk-col-channel,  .kk-channel  { width: 130px; }
.kk-col-viewers,  .kk-viewers  { width: 58px; }
.kk-col-title,    .kk-title    { width: 240px; }
.kk-col-category, .kk-category { width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kk-col-lang,     .kk-lang     { width: 88px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kk-col-mature,   .kk-mature   { width: 50px; }
.kk-col-duration, .kk-duration { width: 62px; }
.kk-col-followers,.kk-followers{ width: 70px; }
.kk-col-chatmode, .kk-chatmode { width: 90px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kk-col-bio,      .kk-bio      { width: 200px; }

.kk-footer {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	padding: 8px 18px;
	border-top: 1px solid rgba(217,118,66,.1);
	background: rgba(10,4,2,.22);
	font-size: 8px;
	color: #7A5030;
	letter-spacing: .08em;
}
.kk-ft-sep   { color: rgba(217,118,66,.3); }
.kk-ft-right { margin-left: auto; color: #6A4828; }

.kukuys-empty {
	font-family: 'JetBrains Mono', 'Consolas', 'Courier New', monospace;
	color: #4a3020;
	padding: 40px 20px;
	text-align: center;
	font-size: 11px;
}
.kukuys-empty a { color: #C97C5D; }

@media (max-width: 1200px) {
	.kk-col-bio, .kk-bio { display: none; }
	table.kk-table { min-width: 580px; }
}

@media (max-width: 820px) {
	.kk-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.kk-card { height: 240px; }
	.kk-card-name { font-size: 15px; }
	.kk-stat .v { font-size: 20px; }
	.kk-col-duration, .kk-duration { display: none; }
	table.kk-table { min-width: 500px; }
}

@media (max-width: 520px) {
	.kk-grid { grid-template-columns: 1fr; gap: 10px; }
	.kk-card { height: 200px; }
	.kk-card-content { width: 72%; }
	.kk-card-name { font-size: 16px; }
	.kk-card-handle { font-size: 8px; }
	.kk-card-cat { font-size: 7.5px; margin-top: 10px; padding: 3px 8px; }
	.kk-card-title { font-size: 8.5px; margin-top: 8px; }
	.kk-card-stats { margin-top: 12px; gap: 16px; }
	.kk-stat .v { font-size: 20px; }
	.kk-stat .l { font-size: 6.5px; }
	.kk-spotlight-section { padding: 0 10px 14px; }
	.kk-header { padding: 9px 12px; }
	.kk-table-section { padding: 0 10px 10px; }
	.kk-col-mature, .kk-mature { display: none; }
	table.kk-table { min-width: 420px; }
}