/* Public side modules (function_pagewidgets.php): auther, article, topic,
   commentprofile, friends, favorite. */
.kw-box {
	--kw-p: var(--km-primary, #2563eb);
	--kw-soft: color-mix(in srgb, var(--kw-p) 10%, transparent);
	--kw-text: #1f2937;
	--kw-muted: #8a93a3;
	--kw-line: #eef0f4;
	--kw-hover: #f7f8fa;
}
.kw-box .box-title { line-height: 1.35; }
.kw-box .box-title .fa { color: var(--kw-p); }
.kw-box .box-body { padding-top: 8px; padding-bottom: 12px; }
.kw-box a { text-decoration: none; }

/* generic list rows */
.kw-list { list-style: none; margin: 0; padding: 0; counter-reset: kw; }
.kw-item {
	display: flex; align-items: center; gap: 12px;
	padding: 10px 8px; margin: 0 -8px; border-radius: 12px;
	transition: background .15s;
}
.kw-item + .kw-item { border-top: 1px solid var(--kw-line); }
.kw-item:hover { background: var(--kw-hover); }
.kw-item:hover + .kw-item, .kw-item:hover { border-top-color: transparent; }
.kw-body { flex: 1 1 auto; min-width: 0; }
.kw-title {
	color: var(--kw-text) !important; font-weight: 500; font-size: 14.5px; line-height: 1.4;
	overflow-wrap: anywhere;
}
.kw-title:hover { color: var(--kw-p) !important; }
.kw-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kw-meta { margin-top: 2px; font-size: 12.5px; color: var(--kw-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kw-meta a { color: var(--kw-p); }
.kw-meta .fa { margin-right: 2px; }
.kw-dot { margin: 0 3px; }
.kw-flag { font-size: 12px; color: var(--kw-muted); margin-left: 2px; }
.kw-flag.is-ok { color: #16a34a; }

/* avatars / thumbs */
.kw-av-wrap { position: relative; flex: 0 0 auto; display: inline-block; line-height: 0; }
.kw-av {
	width: 40px; height: 40px; border-radius: 50%; object-fit: cover;
	background: #eef0f4; box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--kw-line);
}
.kw-av-lg { width: 64px; height: 64px; }
.kw-av-wrap.is-online::after {
	content: ""; position: absolute; right: 1px; bottom: 1px;
	width: 11px; height: 11px; border-radius: 50%;
	background: #22c55e; box-shadow: 0 0 0 2px #fff;
}
.kw-thumb-wrap { flex: 0 0 auto; line-height: 0; }
.kw-thumb {
	width: 48px; height: 48px; border-radius: 10px; object-fit: cover; background: #eef0f4;
	display: inline-flex; align-items: center; justify-content: center;
}
.kw-thumb.is-round { border-radius: 50%; width: 42px; height: 42px; }
.kw-thumb-ico { background: var(--kw-soft); color: var(--kw-p); font-size: 18px; line-height: 1; }

/* leaderboard */
.kw-rank .kw-item { gap: 10px; }
.kw-rank-no {
	flex: 0 0 24px; height: 24px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 12px; font-weight: 600; color: var(--kw-muted); background: #f1f3f6;
}
.kw-rank .is-top1 .kw-rank-no { background: #fef3c7; color: #d97706; }
.kw-rank .is-top2 .kw-rank-no { background: #eef2f7; color: #64748b; }
.kw-rank .is-top3 .kw-rank-no { background: #fdeee4; color: #c2703d; }
.kw-rank .is-top1 .kw-av { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #f59e0b; }
.kw-bar { height: 5px; border-radius: 999px; background: #f1f3f6; margin-top: 6px; overflow: hidden; }
.kw-bar span { display: block; height: 100%; border-radius: inherit; background: var(--kw-p); opacity: .75; }
.kw-pill {
	flex: 0 0 auto; font-size: 12px; color: var(--kw-muted);
	background: #f5f6f8; border-radius: 999px; padding: 3px 10px; white-space: nowrap;
}
.kw-pill b { color: var(--kw-p); font-size: 14px; }

/* friends grid */
.kw-count {
	display: inline-block; min-width: 22px; padding: 1px 8px; margin-left: 4px;
	border-radius: 999px; background: var(--kw-soft); color: var(--kw-p);
	font-size: 12px; font-weight: 600; vertical-align: middle; text-align: center;
}
.kw-more {
	display: inline-flex; align-items: center; gap: 4px;
	padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 500;
	background: var(--kw-soft); color: var(--kw-p) !important; transition: background .15s, color .15s;
}
.kw-more:hover { background: var(--kw-p); color: #fff !important; }
.kw-friends {
	list-style: none; margin: 0; padding: 4px 0 0;
	display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px;
}
.kw-friends a {
	display: flex; flex-direction: column; align-items: center; gap: 8px;
	padding: 12px 6px 10px; border-radius: 14px; border: 1px solid var(--kw-line);
	color: var(--kw-text) !important; text-align: center;
	transition: transform .15s, box-shadow .15s, border-color .15s;
}
.kw-friends a:hover { transform: translateY(-2px); border-color: transparent; box-shadow: 0 8px 20px -10px rgba(15, 23, 42, .3); }
.kw-friend-name {
	max-width: 100%; font-size: 13px; font-weight: 500;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kw-friends .kw-av-wrap.is-online::after { width: 13px; height: 13px; right: 3px; bottom: 3px; }

/* personal info */
.kw-info { list-style: none; margin: 0; padding: 0; }
.kw-info-item { display: flex; gap: 12px; padding: 12px 0; }
.kw-info-item + .kw-info-item { border-top: 1px dashed var(--kw-line); }
.kw-info-ico {
	flex: 0 0 34px; height: 34px; border-radius: 10px;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--kw-soft); color: var(--kw-p); font-size: 15px;
}
.kw-info-body { flex: 1 1 auto; min-width: 0; }
.kw-info-label { font-size: 12.5px; font-weight: 500; color: var(--kw-muted); margin-bottom: 2px; }
.kw-info-val { color: var(--kw-text); font-size: 14.5px; line-height: 1.55; overflow-wrap: anywhere; }
.kw-info-val p:last-child { margin-bottom: 0; }
.kw-info-val img { max-width: 100%; height: auto; }
.kw-info-item.is-quote .kw-info-val {
	font-style: italic; padding: 8px 12px; border-radius: 10px;
	background: var(--kw-hover); border-left: 3px solid var(--kw-p);
}

/* comments */
.kw-comments { list-style: none; margin: 0; padding: 0; }
.kw-cmt { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; }
.kw-cmt-bubble {
	flex: 1 1 auto; min-width: 0; position: relative;
	background: #f4f5f8; border-radius: 4px 16px 16px 16px; padding: 8px 14px 10px;
}
.kw-cmt-head { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.kw-cmt-name { font-weight: 600; font-size: 13.5px; color: var(--kw-text) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kw-cmt-name:hover { color: var(--kw-p) !important; }
.kw-cmt-time { font-size: 12px; color: var(--kw-muted); white-space: nowrap; }
.kw-cmt-del { margin: 0 0 0 auto; }
.kw-cmt-del button {
	border: 0; background: transparent; color: var(--kw-muted); cursor: pointer;
	width: 28px; height: 28px; border-radius: 8px; opacity: 0; transition: opacity .15s, background .15s, color .15s;
}
.kw-cmt:hover .kw-cmt-del button, .kw-cmt-del button:focus-visible { opacity: 1; }
.kw-cmt-del button:hover { background: #fee2e2; color: #dc2626; }
@media (hover: none) { .kw-cmt-del button { opacity: 1; } }
.kw-cmt-text { font-size: 14.5px; line-height: 1.55; color: var(--kw-text); overflow-wrap: anywhere; }
.kw-compose {
	display: flex; align-items: flex-end; gap: 8px; margin-top: 10px;
	padding: 6px 6px 6px 14px; border: 1px solid var(--kw-line); border-radius: 22px; background: #fff;
	transition: border-color .15s, box-shadow .15s;
}
.kw-compose:focus-within { border-color: var(--kw-p); box-shadow: 0 0 0 3px var(--kw-soft); }
.kw-compose textarea {
	flex: 1 1 auto; border: 0; outline: 0; resize: none; background: transparent;
	font: inherit; font-size: 14.5px; line-height: 1.5; padding: 5px 0; min-height: 32px; max-height: 160px;
}
.kw-send {
	flex: 0 0 36px; width: 36px; height: 36px; border: 0; border-radius: 50%;
	background: var(--kw-p); color: #fff; cursor: pointer; transition: transform .15s, filter .15s;
}
.kw-send:hover { filter: brightness(1.08); transform: scale(1.05); }
.kw-note {
	display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
	padding: 8px 12px; border-radius: 10px; background: #fef9c3; color: #854d0e; font-size: 13px;
}

/* empty state */
.kw-empty {
	display: flex; flex-direction: column; align-items: center; gap: 6px;
	padding: 18px 8px; color: var(--kw-muted); font-size: 13px; text-align: center;
}
.kw-empty .fa { font-size: 26px; opacity: .45; }