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

.kukuys-wrap {
	--k-green:       #00ff41;
	--k-green-dim:   #00cc33;
	--k-green-dark:  #003a10;
	--k-green-muted: #005520;
	--k-gold:        #c9a84c;
	--k-red:         #ff5555;
	--k-bg:          #030303;
	--k-bg-live:     #030f05;
	--k-bg-card:     #080808;
	--k-border:      rgba(0,255,65,.1);
	--k-border-live: rgba(0,255,65,.25);
	--k-text:        #00cc33;
	--k-text-dim:    #33aa55;
	--k-text-muted:  #2a6640;
	--k-font:        'JetBrains Mono', 'Consolas', 'Courier New', monospace;

	font-family:     var(--k-font);
	background:      var(--k-bg);
	color:           var(--k-text);
	position:        relative;
	overflow:        hidden;
	border-radius:   4px;
}

.kukuys-wrap::before {
	content:    '';
	position:   absolute;
	inset:      0;
	background: repeating-linear-gradient(
		0deg,
		transparent,
		transparent 2px,
		rgba(0,255,65,.013) 2px,
		rgba(0,255,65,.013) 4px
	);
	pointer-events: none;
	z-index:        0;
}
.kukuys-wrap > * { position: relative; z-index: 1; }

@keyframes k-blink  { 0%,100%{opacity:1} 50%{opacity:0} }
@keyframes k-pulse  { 0%,100%{box-shadow:0 0 5px var(--k-green)} 50%{box-shadow:0 0 16px var(--k-green),0 0 30px rgba(0,255,65,.25)} }
@keyframes k-ring   { 0%,100%{box-shadow:0 0 4px var(--k-green)} 50%{box-shadow:0 0 10px var(--k-green),0 0 20px rgba(0,255,65,.2)} }
@keyframes k-fadein { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }

.kukuys-terminal-header {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	padding:         12px 18px;
	border-bottom:   1px solid var(--k-border);
	flex-wrap:       wrap;
	gap:             8px;
}
.kukuys-th-left,
.kukuys-th-right {
	display:     flex;
	align-items: center;
	gap:         10px;
}
.kukuys-logo {
	font-size:      11.5px;
	font-weight:    700;
	color:          var(--k-green);
	letter-spacing: .1em;
}
.kukuys-th-sep { color: var(--k-green-muted); }
.kukuys-th-ts  { font-size:10px; color:var(--k-text-dim); letter-spacing:.04em; }

.kukuys-cursor {
	display:       inline-block;
	width:         7px;
	height:        13px;
	background:    var(--k-green);
	vertical-align:middle;
	animation:     k-blink 1s step-end infinite;
}

.kukuys-th-stat       { font-size:9.5px; color:var(--k-text-dim); letter-spacing:.07em; }
.kukuys-live-count    { color: var(--k-green); }
.kukuys-live-dot {
	display:        inline-block;
	width:          6px;
	height:         6px;
	border-radius:  50%;
	background:     var(--k-green);
	margin-right:   5px;
	vertical-align: middle;
	animation:      k-pulse 1.6s ease-in-out infinite;
}

.kukuys-section          { padding:14px 18px; }
.kukuys-section--offline { border-top:1px solid rgba(255,255,255,.03); }

.kukuys-section-label {
	display:        flex;
	align-items:    center;
	gap:            9px;
	margin-bottom:  12px;
	font-size:      9px;
	font-weight:    700;
	letter-spacing: .2em;
	color:          var(--k-text);
}
.kukuys-sh-dot {
	width:         6px;
	height:        6px;
	border-radius: 50%;
	flex-shrink:   0;
}
.kukuys-sh-dot.live {
	background: var(--k-green);
	box-shadow: 0 0 6px var(--k-green);
	animation:  k-pulse 1.6s ease-in-out infinite;
}
.kukuys-sh-dot.offline { background: #252525; }
.kukuys-sh-line  { flex:1; height:1px; background:linear-gradient(90deg,var(--k-border),transparent); }
.kukuys-sh-count { color:var(--k-text-dim); }

.kukuys-footer {
	display:        flex;
	align-items:    center;
	gap:            10px;
	padding:        9px 18px;
	border-top:     1px solid var(--k-border);
	font-size:      8.5px;
	color:          var(--k-text-dim);
	letter-spacing: .08em;
	flex-wrap:      wrap;
}
.kukuys-ft-sep { color: var(--k-green-muted); }

.kukuys-live-section {
	padding:       10px 0 0;
	border-bottom: 1px solid rgba(0,255,65,.05);
	margin-bottom: 0;
}

.kukuys-table-wrap {
	overflow-x:                 auto;
	-webkit-overflow-scrolling: touch;
	padding-bottom:             4px;
}
.kukuys-table-wrap::-webkit-scrollbar         { height: 3px; }
.kukuys-table-wrap::-webkit-scrollbar-track   { background: transparent; }
.kukuys-table-wrap::-webkit-scrollbar-thumb   { background: rgba(0,255,65,.12); border-radius: 2px; }

.kukuys-table {
	width:           100%;
	min-width:       720px;
	border-collapse: collapse;
	font-family:     var(--k-font);
	font-size:       10px;
	table-layout:    fixed;
}

.kukuys-table thead tr { border-bottom: 1px solid var(--k-border); }
.kukuys-table thead th {
	padding:        5px 8px 7px;
	text-align:     left;
	font-size:      7.5px;
	font-weight:    700;
	letter-spacing: .18em;
	color:          var(--k-text-muted);
	white-space:    nowrap;
	user-select:    none;
	overflow:       hidden;
}

.kukuys-table tbody tr {
	border-bottom: 1px solid rgba(0,255,65,.022);
	cursor:        pointer;
	transition:    background .1s;
}
.kukuys-table tbody tr:hover { background: rgba(0,255,65,.03); }

.kukuys-table td {
	padding:        5px 8px;
	vertical-align: middle;
	white-space:    nowrap;
	font-size:      10px;
	overflow:       hidden;
	text-overflow:  ellipsis;
}

/* ── Column widths (all explicit — scales proportionally at any width) ── */
.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: clip; }
.kk-col-lang,      .kk-lang      { width: 88px;  white-space: nowrap; overflow: hidden; text-overflow: clip; }
.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: clip; }
.kk-col-bio,       .kk-bio       { width: 200px; }

/* ── Row states ──────────────────────────────────────────────────────── */
.kukuys-row--loading td { color: rgba(0,255,65,.15); }
.kukuys-row--loading .kk-loading-dash {
	animation: k-blink 1.2s step-end infinite;
	color:     rgba(0,255,65,.2);
}

.kukuys-row--live              { background: rgba(0,255,65,.025); }
.kukuys-row--live td           { color: #3d7a50; }
.kukuys-row--live .kk-ch-name  { color: #e8ffe8; }
.kukuys-row--live:hover        { background: rgba(0,255,65,.05); }

.kukuys-row--offline td           { color: #336644; }
.kukuys-row--offline .kk-ch-name  { color: #99bb99; }

/* ── Cell styles ─────────────────────────────────────────────────────── */
.kk-status-live { color:var(--k-green); font-weight:700; font-size:9px; letter-spacing:.06em; }
.kk-status-offl { color:#222;           font-weight:700; font-size:9px; letter-spacing:.06em; }

.kk-ch-inner { display:flex; align-items:center; gap:7px; }
.kk-ava-wrap {
	width:           22px;
	height:          22px;
	border-radius:   50%;
	flex-shrink:     0;
	overflow:        hidden;
	background:      rgba(0,255,65,.06);
	border:          1px solid rgba(0,255,65,.12);
	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:8px; font-weight:700; color:var(--k-green-dim); }
.kukuys-row--offline .kk-ava-wrap { border-color:rgba(255,255,255,.04); background:rgba(255,255,255,.02); }
.kukuys-row--offline .kk-ava-ini  { color:#282828; }

.kk-ch-name { font-size:10.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.kk-viewers-val { color:var(--k-green);    font-weight:700; }
.kk-lang-val    { color:var(--k-green-dim); font-size:9px; letter-spacing:.04em; }
.kk-yes         { color:var(--k-red);      font-weight:700; font-size:9px; }
.kk-yes-soft    { color:#00cc55;           font-weight:700; font-size:9px; }
.kk-no          { color:#2a5535;           font-weight:600; font-size:9px; }
.kk-dash        { color:#2a4433; }
.kk-badge-warn  { color:#cc9900; font-size:8px; background:rgba(255,180,0,.07); padding:1px 4px; border-radius:2px; }

.kk-title { color:#3a6a50; }
.kukuys-row--live .kk-title { color:#99ddaa; }

.kk-bio { font-style:italic; color:#2a5535; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kukuys-row--live .kk-bio { color:#3a6a50; }

/* ── Responsive: laptop (≤1200px) — hide BIO ────────────────────────── */
@media (max-width:1200px) {
	.kk-col-bio, .kk-bio { display:none; }
	.kukuys-table { min-width: 960px; }
}

/* ── Responsive: tablet (≤900px) — hide DURATION ────────────────────── */
@media (max-width:900px) {
	.kk-col-duration, .kk-duration { display:none; }
	.kukuys-table { min-width: 880px; }
}

/* ── Responsive: mobile (≤600px) — hide MATURE, scroll ─────────────── */
@media (max-width:600px) {
	.kk-col-mature, .kk-mature { display:none; }
	.kukuys-table { min-width: 800px; }
}

.kukuys-hdr-stats { font-size:9px; letter-spacing:.06em; color: var(--k-text-dim); }
.kk-hdr-live      { color: var(--k-green); font-weight:700; }

.kk-fv { color: var(--k-green-dim); }

.kukuys-empty {
	font-family: var(--k-font);
	color:       #333;
	padding:     40px 20px;
	text-align:  center;
	font-size:   11px;
}
.kukuys-empty a { color: var(--k-green-dim); }