/**
 * CircleKit Groups Styles
 *
 * @package CircleKit
 */

/* ===== Groups Header ===== */
.ck-groups-header {
	margin-bottom: 28px;
}

.ck-groups-title-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 22px;
}

.ck-groups-title-row .ck-dir-title {
	font-size: 28px;
	font-weight: 800;
	color: var(--ck-ink);
	margin: 0 0 6px;
	letter-spacing: -0.3px;
}

.ck-groups-title-row .ck-dir-subtitle {
	font-size: 14px;
	color: var(--ck-muted);
	margin: 0;
	display: flex;
	align-items: center;
	gap: 6px;
}

.ck-groups-title-row .ck-dir-subtitle svg {
	opacity: 0.5;
	flex-shrink: 0;
}

/* Fix: anchor buttons must keep white text */
a.ck-btn-primary,
a.ck-btn-primary:hover,
a.ck-btn-primary:visited,
a.ck-btn-primary:focus {
	color: white !important;
	text-decoration: none;
}

/* ===== Groups Tabs (All / My Groups) ===== */
.ck-groups-tabs {
	display: flex;
	gap: 0;
	margin-bottom: 18px;
	border-bottom: 2px solid var(--ck-border-light, #e5e7eb);
}

.ck-groups-tab {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 20px;
	font-size: 14px;
	font-weight: 600;
	color: var(--ck-muted, #64748b);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -2px;
	transition: all 0.15s ease;
}

.ck-groups-tab:hover {
	color: var(--ck-ink-2, #475569);
}

.ck-groups-tab.active {
	color: var(--ck-purple, #6d28d9);
	border-bottom-color: var(--ck-purple, #6d28d9);
}

.ck-groups-tab svg {
	opacity: 0.6;
	flex-shrink: 0;
}

.ck-groups-tab.active svg {
	opacity: 1;
}

.ck-groups-tab-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 20px;
	padding: 0 6px;
	border-radius: 10px;
	background: var(--ck-purple, #6d28d9);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}

/* ===== Search + Filter Bar ===== */
.ck-groups-header .ck-dir-filters {
	display: flex;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
	padding: 14px 18px;
	background: var(--ck-bg-card, #fff);
	border: 1px solid var(--ck-border);
	border-radius: var(--ck-radius);
}

.ck-groups-header .ck-search-wrap {
	position: relative;
	flex: 1;
	min-width: 180px;
	max-width: 320px;
}

.ck-groups-header .ck-search-icon {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--ck-subtle);
	pointer-events: none;
}

.ck-groups-header .ck-search-input {
	width: 100%;
	padding: 9px 14px 9px 38px;
	border: 1.5px solid var(--ck-border);
	border-radius: var(--ck-radius-sm);
	font-size: 13px;
	font-family: var(--ck-font);
	color: var(--ck-ink-2);
	background: var(--ck-bg, #f9fafb);
	transition: var(--ck-transition);
	box-sizing: border-box;
}

.ck-groups-header .ck-search-input:focus {
	outline: none;
	border-color: var(--ck-purple);
	box-shadow: 0 0 0 3px var(--ck-purple-glow);
	background: #fff;
}

.ck-groups-header .ck-search-input::placeholder {
	color: var(--ck-subtle);
}

/* Filter dropdown wrapper */
.ck-filter-dropdown {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 12px;
	border: 1.5px solid var(--ck-border);
	border-radius: var(--ck-radius-sm);
	background: var(--ck-bg, #f9fafb);
	cursor: pointer;
	transition: var(--ck-transition);
}

.ck-filter-dropdown:hover,
.ck-filter-dropdown:focus-within {
	border-color: var(--ck-purple);
}

.ck-filter-dropdown svg {
	color: var(--ck-subtle);
	flex-shrink: 0;
}

.ck-filter-dropdown .ck-filter-select {
	border: none;
	background: transparent;
	font-size: 13px;
	font-family: var(--ck-font);
	font-weight: 500;
	color: var(--ck-ink-2);
	cursor: pointer;
	padding: 0;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

/* Filter button */
.ck-dir-filter-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 16px !important;
	font-size: 13px !important;
}

.ck-dir-filter-btn svg {
	flex-shrink: 0;
}

/* ===== View Toggle (Grid/List) ===== */
.ck-dir-view-toggle {
	display: flex;
	border: 1.5px solid var(--ck-border);
	border-radius: var(--ck-radius-sm);
	overflow: hidden;
	margin-left: auto;
	flex-shrink: 0;
}

.ck-dir-view-btn {
	width: 38px;
	height: 36px;
	border: none;
	background: var(--ck-bg, #f9fafb);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ck-subtle);
	transition: var(--ck-transition);
	padding: 0;
}

.ck-dir-view-btn + .ck-dir-view-btn {
	border-left: 1px solid var(--ck-border);
}

.ck-dir-view-btn:hover {
	color: var(--ck-ink-2);
}

.ck-dir-view-btn.active {
	background: var(--ck-purple-soft, #f3e8ff);
	color: var(--ck-purple);
}

/* ===== Empty State ===== */
.ck-empty {
	text-align: center;
	padding: 80px 20px;
	background: var(--ck-bg-card, #fff);
	border: 1px solid var(--ck-border);
	border-radius: var(--ck-radius);
}

.ck-empty-icon {
	font-size: 52px;
	margin-bottom: 14px;
}

.ck-empty h3 {
	font-size: 18px;
	font-weight: 700;
	color: var(--ck-ink);
	margin: 0 0 6px;
}

.ck-empty p {
	font-size: 14px;
	color: var(--ck-muted);
	margin: 0;
}

/* ===== Groups Grid ===== */
.ck-groups-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

/* ===== Group Card (Grid) ===== */
.ck-group-card {
	background: var(--ck-bg-card);
	border: 1px solid var(--ck-border);
	border-radius: var(--ck-radius);
	transition: all 0.25s ease;
}

.ck-group-card:hover {
	border-color: rgba(109, 40, 217, 0.18);
	box-shadow: 0 8px 30px rgba(109, 40, 217, 0.08), 0 2px 8px rgba(0,0,0,0.04);
	transform: translateY(-3px);
}

.ck-gc-cover {
	height: 140px;
	background: linear-gradient(135deg, #6d28d9 0%, #8b5cf6 40%, #0d9488 100%);
	background-size: cover;
	background-position: center;
	position: relative;
	border-radius: var(--ck-radius) var(--ck-radius) 0 0;
	overflow: hidden;
}

.ck-gc-type-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	position: absolute;
	top: 10px;
	right: 10px;
	padding: 4px 10px;
	border-radius: var(--ck-radius-pill);
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(6px);
	font-size: 11px;
	font-weight: 600;
	color: var(--ck-ink-2);
}

.ck-gc-body {
	padding: 18px 18px 16px;
	text-align: left;
	position: relative;
	z-index: 2;
}

.ck-gc-avatar {
	width: 52px;
	height: 52px;
	border-radius: 14px;
	object-fit: cover;
	border: 3px solid white;
	box-shadow: 0 2px 10px rgba(0,0,0,0.1);
	margin-top: -44px;
}

.ck-gc-avatar-placeholder {
	width: 52px;
	height: 52px;
	border-radius: 14px;
	border: 3px solid white;
	box-shadow: 0 2px 10px rgba(0,0,0,0.1);
	margin-top: -44px;
	background: linear-gradient(135deg, var(--ck-purple), var(--ck-purple-light));
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	font-weight: 800;
	text-transform: uppercase;
}

.ck-gc-name {
	display: block;
	font-size: 16px;
	font-weight: 700;
	color: var(--ck-ink);
	text-decoration: none;
	margin-top: 12px;
	line-height: 1.25;
}

.ck-gc-name:hover {
	color: var(--ck-purple);
}

.ck-gc-desc {
	font-size: 13px;
	color: var(--ck-muted);
	margin: 6px 0 0;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ck-gc-meta {
	font-size: 12px;
	color: var(--ck-subtle);
	margin: 12px 0 14px;
	display: flex;
	align-items: center;
	gap: 6px;
}

.ck-gc-meta svg { opacity: 0.5; flex-shrink: 0; }
.ck-dir-dot { font-size: 8px; }

.ck-gc-actions {
	display: flex;
	gap: 8px;
}

.ck-gc-actions .ck-btn {
	flex: 1;
	text-align: center;
	font-size: 13px;
	padding: 8px 12px;
}

.ck-gc-joined-label {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 1;
	padding: 8px 12px;
	font-size: 12px;
	font-weight: 600;
	color: var(--ck-green, #22c55e);
	border: 1.5px solid rgba(34, 197, 94, 0.2);
	border-radius: var(--ck-radius-sm);
	background: rgba(34, 197, 94, 0.04);
}

/* Role badges in group cards (My Groups tab) */
.ck-gc-role-badge {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.3px;
}

.ck-gc-role-owner {
	color: var(--ck-purple, #6d28d9);
}

.ck-gc-role-admin {
	color: #2563eb;
}

.ck-gc-role-moderator {
	color: #0d9488;
}

/* ===== Groups List View ===== */
.ck-groups-list {
	display: flex;
	flex-direction: column;
	gap: 0;
	border: 1px solid var(--ck-border);
	border-radius: var(--ck-radius);
	overflow: hidden;
	background: var(--ck-bg-card, #fff);
}

.ck-gl-row {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 18px 24px;
	border-bottom: 1px solid var(--ck-border-light, #f0f0f0);
	transition: var(--ck-transition);
}

.ck-gl-row:last-child { border-bottom: none; }

.ck-gl-row:hover {
	background: var(--ck-bg, #f9fafb);
}

/* List: Avatar */
.ck-gl-avatar-link {
	flex-shrink: 0;
	text-decoration: none;
}

.ck-gl-avatar {
	width: 56px;
	height: 56px;
	border-radius: 16px;
	object-fit: cover;
}

.ck-gl-avatar-ph {
	width: 56px;
	height: 56px;
	border-radius: 16px;
	background: linear-gradient(135deg, var(--ck-purple), var(--ck-purple-light));
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	font-weight: 800;
	text-transform: uppercase;
}

/* List: Info */
.ck-gl-info {
	flex: 1;
	min-width: 0;
}

.ck-gl-name-row {
	display: flex;
	align-items: center;
	gap: 6px;
}

.ck-gl-name {
	font-size: 15px;
	font-weight: 700;
	color: var(--ck-ink);
	text-decoration: none;
	line-height: 1.3;
}

.ck-gl-name:hover { color: var(--ck-purple); }

.ck-gl-desc {
	font-size: 13px;
	color: var(--ck-muted);
	margin: 2px 0 4px;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ck-gl-type {
	font-size: 11px;
	font-weight: 600;
	color: var(--ck-subtle);
}

/* List: Stats */
.ck-gl-stats {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 150px;
	flex-shrink: 0;
}

.ck-gl-stat {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: var(--ck-ink-2);
	font-weight: 500;
}

.ck-gl-stat svg { opacity: 0.45; flex-shrink: 0; }

.ck-gl-stat-time {
	font-size: 12px;
	color: var(--ck-subtle);
	font-weight: 400;
}

/* List: Actions */
.ck-gl-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

.ck-gl-actions .ck-btn {
	font-size: 13px;
	padding: 7px 16px;
	white-space: nowrap;
}

.ck-gl-more-btn {
	width: 32px;
	height: 32px;
	border: none;
	background: transparent;
	border-radius: var(--ck-radius-sm);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ck-subtle);
	transition: var(--ck-transition);
	padding: 0;
}

.ck-gl-more-btn:hover {
	background: var(--ck-bg, #f0f0f0);
	color: var(--ck-ink-2);
}

/* ===== Single Group (Premium) ===== */
.ck-gs {
	max-width: 960px;
	margin: 0 auto;
	background: var(--ck-bg-card, #fff);
	border-radius: var(--ck-radius-lg);
	border: 1px solid var(--ck-border-light, #eee);
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

/* Cover */
.ck-gs-cover {
	height: 320px;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
	background-size: cover;
	background-position: center;
	position: relative;
}
/* Cover icon buttons — match profile page exactly */
.ck-gs-cover .ck-cover-actions {
	position: absolute;
	top: 14px;
	right: 14px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	z-index: 3;
	opacity: 0;
	transition: opacity 0.25s ease;
}
.ck-gs-cover:hover .ck-cover-actions {
	opacity: 1;
}
.ck-gs-cover .ck-cover-icon-btn {
	width: 44px;
	height: 44px;
	min-width: 44px;
	min-height: 44px;
	padding: 0;
	border: none;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ck-ink);
	transition: all 0.15s ease;
	position: relative;
}
.ck-gs-cover .ck-cover-icon-btn svg {
	width: 20px;
	height: 20px;
}
.ck-gs-cover .ck-cover-icon-btn:hover {
	background: white;
	transform: scale(1.06);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}
.ck-gs-cover .ck-cover-overlay {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0.06) 0%, transparent 40%);
	pointer-events: none;
}
/* Drag-to-reposition state */
.ck-gs-cover.ck-cover-dragging {
	cursor: grab;
}
.ck-gs-cover.ck-cover-dragging:active {
	cursor: grabbing;
}
/* Group cover dropdown */
.ck-gs-cover .ck-cover-dropdown {
	display: none;
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	min-width: 220px;
	background: white;
	border-radius: 12px;
	box-shadow: 0 8px 30px rgba(0,0,0,0.15);
	z-index: 100;
	overflow: hidden;
	animation: ckFadeSlide 0.15s ease;
}

/* Hero wrapper — cover + header */
.ck-gs-hero {
	background: var(--ck-bg-card, #fff);
	border-radius: var(--ck-radius, 12px);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04);
	overflow: hidden;
	margin-bottom: 16px;
}

/* Header */
.ck-gs-header {
	display: flex;
	align-items: flex-start;
	gap: 24px;
	padding: 0 32px 28px;
	margin-top: -55px;
	position: relative;
	z-index: 2;
}
.ck-gs-avatar-wrap {
	flex-shrink: 0;
	position: relative;
}
.ck-gs-avatar, .ck-gs-avatar-ph {
	width: 120px; height: 120px;
	border-radius: 20px;
	border: 5px solid white;
	box-shadow: 0 4px 20px rgba(0,0,0,0.12);
	object-fit: cover;
	background: #f5f5f7;
}
.ck-gs-avatar-ph {
	background: linear-gradient(135deg, #6d28d9 0%, #8b5cf6 50%, #a78bfa 100%);
	color: white;
	display: flex; align-items: center; justify-content: center;
	font-size: 36px; font-weight: 800; text-transform: uppercase;
	letter-spacing: -1px;
}
/* Avatar hover overlay for upload */
.ck-gs-avatar-overlay {
	position: absolute;
	inset: 5px;
	border-radius: 15px;
	background: rgba(0, 0, 0, 0.45);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.2s ease;
	cursor: pointer;
	pointer-events: none;
}
.ck-gs-avatar-editable:hover .ck-gs-avatar-overlay {
	opacity: 1;
	pointer-events: auto;
}

/* Header body: wraps top row + desc + organizer */
.ck-gs-header-body {
	flex: 1; min-width: 0;
	padding-top: 68px;
}
.ck-gs-header-top {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 16px;
	margin-bottom: 10px;
}
.ck-gs-info { flex: 1; min-width: 0; }
.ck-gs-name {
	font-size: 26px; font-weight: 800;
	color: var(--ck-ink); margin: 0 0 4px; line-height: 1.2;
	display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
	letter-spacing: -0.3px;
}
.ck-gs-badge {
	display: inline-block;
	font-size: 11px; font-weight: 700;
	padding: 3px 12px;
	border-radius: 100px;
	background: var(--ck-purple);
	color: white;
	text-transform: capitalize;
	letter-spacing: 0.3px;
	white-space: nowrap;
}
.ck-gs-meta {
	display: flex; align-items: center; gap: 8px;
	font-size: 13px; color: var(--ck-muted);
	flex-wrap: wrap;
}
.ck-gs-meta-active { color: var(--ck-green, #22c55e); font-weight: 600; }
.ck-gs-dot { color: var(--ck-subtle); font-size: 10px; }

/* Actions row — Joined / Invite / More */
.ck-gs-actions {
	display: flex; gap: 8px;
	flex-shrink: 0; align-items: center;
}
.ck-gs-joined-btn {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 9px 18px;
	border: 1.5px solid var(--ck-border);
	border-radius: 8px;
	font-size: 14px; font-weight: 600;
	color: var(--ck-ink-2);
	background: white;
	cursor: pointer;
	transition: var(--ck-transition);
}
.ck-gs-joined-btn:hover { border-color: var(--ck-purple); color: var(--ck-purple); }
.ck-gs-caret { font-size: 10px; opacity: 0.6; }
a.ck-gs-invite-btn, .ck-gs-invite-btn {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 9px 20px;
	border: none;
	border-radius: 8px;
	font-size: 14px; font-weight: 600;
	color: white !important;
	background: var(--ck-purple);
	cursor: pointer;
	transition: var(--ck-transition);
	text-decoration: none;
}
.ck-gs-invite-btn:hover {
	background: var(--ck-purple-dark, #5b21b6);
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(109,40,217,0.3);
}

/* Owner Joined — no dropdown, static label */
.ck-gs-joined-owner {
	cursor: default;
	opacity: 0.85;
}
.ck-gs-joined-owner:hover {
	transform: none;
	box-shadow: none;
}

/* Joined Dropdown */
.ck-gs-joined-wrap { position: relative; }
.ck-gs-joined-dropdown {
	display: none;
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	min-width: 160px;
	background: white;
	border: 1px solid var(--ck-border);
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(0,0,0,0.12);
	z-index: 100;
	overflow: hidden;
	animation: ckFadeSlide 0.15s ease;
}
.ck-gs-joined-dropdown.open { display: block; }
.ck-gs-jdd-item {
	display: block; width: 100%;
	padding: 10px 16px;
	font-size: 14px; font-weight: 500;
	color: var(--ck-ink-2);
	text-decoration: none;
	border: none; background: transparent;
	text-align: left;
	cursor: pointer;
	transition: var(--ck-transition);
}
.ck-gs-jdd-item:hover { background: var(--ck-bg, #f5f5f5); }
.ck-gs-jdd-danger { color: #dc2626; }
.ck-gs-jdd-danger:hover { background: #fef2f2; }
@keyframes ckFadeSlide {
	from { opacity: 0; transform: translateY(-4px); }
	to { opacity: 1; transform: translateY(0); }
}

/* Group Composer Wrapper */
.ck-gs-group-composer { margin-bottom: 20px; }
.ck-gs-feed-panel { max-width: 100%; }
.ck-gs-desc {
	font-size: 14px; color: var(--ck-ink-3);
	margin: 0 0 10px; line-height: 1.65;
	max-width: 560px;
}
.ck-gs-see-more {
	color: var(--ck-purple); font-weight: 600;
	text-decoration: none; margin-left: 2px;
}
.ck-gs-see-more:hover { text-decoration: underline; }
.ck-gs-organizer {
	display: flex; align-items: center; gap: 8px;
	font-size: 14px; color: var(--ck-muted);
}
.ck-gs-organizer strong { color: var(--ck-ink); }
.ck-gs-org-avatar {
	width: 28px; height: 28px;
	border-radius: 50%; object-fit: cover;
	border: 2px solid white;
	box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.ck-gs-verified {
	display: inline-flex; align-items: center; justify-content: center;
	width: 18px; height: 18px;
	border-radius: 50%;
	background: var(--ck-purple);
	color: white;
	font-size: 10px; font-weight: 700;
}

/* Tabs */
.ck-gs-tabs {
	display: flex; gap: 0;
	border-bottom: 2px solid var(--ck-border-light, #f0f0f0);
	padding: 0 32px;
	background: var(--ck-bg-card, #fff);
}
.ck-gs-tab {
	padding: 14px 20px;
	font-size: 14px; font-weight: 600;
	color: var(--ck-muted);
	text-decoration: none;
	border-bottom: 3px solid transparent;
	margin-bottom: -2px;
	transition: color 0.2s ease;
}
.ck-gs-tab:hover { color: var(--ck-ink-2); }
.ck-gs-tab.active {
	color: var(--ck-ink);
	border-bottom-color: var(--ck-purple);
}

/* Panel */
.ck-gs-panel { padding: 28px 32px; }

/* ── Members Tab ── */
.ck-gs-members-header {
	display: flex; justify-content: space-between; align-items: center;
	margin-bottom: 16px;
}
.ck-gs-members-header h3 {
	font-size: 16px; font-weight: 700; margin: 0;
}
.ck-gs-members-tools {
	display: flex; gap: 10px; align-items: center;
}
.ck-gs-member-search {
	padding: 8px 14px;
	border: 1px solid var(--ck-border);
	border-radius: var(--ck-radius-sm);
	font-size: 13px; width: 180px;
}
.ck-gs-view-toggle {
	display: flex; gap: 2px;
	border: 1px solid var(--ck-border);
	border-radius: var(--ck-radius-sm);
	overflow: hidden;
}
.ck-gs-view-btn {
	width: 34px; height: 34px;
	border: none; background: transparent;
	cursor: pointer; font-size: 14px;
	color: var(--ck-muted);
}
.ck-gs-view-btn.active {
	background: var(--ck-purple-soft, #f3e8ff);
	color: var(--ck-purple);
}
.ck-gs-role-title {
	font-size: 16px; font-weight: 700;
	margin: 20px 0 12px; color: var(--ck-ink);
	padding-bottom: 8px;
	border-bottom: 1px solid var(--ck-border-light, #eee);
}
.ck-gs-member-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 16px;
}
.ck-gs-member-card {
	display: flex; flex-direction: column;
	align-items: center;
	padding: 20px 16px;
	border: 1px solid var(--ck-border);
	border-radius: var(--ck-radius);
	text-decoration: none;
	transition: var(--ck-transition);
	position: relative;
}
.ck-gs-member-card:hover {
	border-color: rgba(109,40,217,0.2);
	box-shadow: var(--ck-shadow);
}
.ck-gs-mc-avatar {
	width: 80px; height: 80px;
	border-radius: 50%; object-fit: cover;
	margin-bottom: 10px;
}
.ck-gs-online-dot {
	position: absolute;
	top: 72px; right: calc(50% - 42px);
	width: 14px; height: 14px;
	background: #22c55e; border: 2px solid white;
	border-radius: 50%;
}
.ck-gs-mc-name {
	font-size: 15px; font-weight: 700;
	color: var(--ck-ink); text-align: center;
}
.ck-gs-mc-meta {
	font-size: 12px; color: var(--ck-muted);
	text-align: center; margin-top: 2px;
}
.ck-gs-viewing {
	font-size: 13px; color: var(--ck-muted);
	margin-top: 24px; padding-top: 16px;
	border-top: 1px solid var(--ck-border-light, #eee);
}
.ck-gs-empty-msg {
	font-size: 14px; color: var(--ck-muted);
	padding: 20px 0;
}

/* ── Feed Tab ── */
.ck-gs-composer {
	display: flex; align-items: center; gap: 12px;
	padding: 16px 20px;
	border: 1px solid var(--ck-border);
	border-radius: var(--ck-radius);
	margin-bottom: 16px;
}
.ck-gs-comp-avatar {
	width: 40px; height: 40px;
	border-radius: 50%; object-fit: cover;
	flex-shrink: 0;
}
.ck-gs-comp-input {
	flex: 1; border: none; background: transparent;
	font-size: 14px; color: var(--ck-muted);
	cursor: pointer; outline: none;
}
.ck-gs-feed-tools {
	display: flex; justify-content: space-between;
	align-items: center; margin-bottom: 16px;
	font-size: 13px; color: var(--ck-muted);
}
.ck-gs-feed-search { cursor: pointer; }
.ck-gs-feed-sort { cursor: pointer; }
.ck-gs-feed-empty {
	display: flex; align-items: center; gap: 10px;
	padding: 14px 18px;
	background: #e3f2fd;
	border-radius: var(--ck-radius-sm);
	font-size: 14px; color: #1565c0;
}
.ck-gs-feed-empty-icon { font-size: 18px; }

/* ── Invitations Tab ── */
.ck-gs-invite-subtabs {
	display: flex; gap: 8px;
	margin-bottom: 20px;
}
.ck-gs-invite-subtab {
	padding: 8px 18px;
	border: 1px solid var(--ck-border);
	border-radius: var(--ck-radius-sm);
	background: transparent;
	font-size: 13px; font-weight: 600;
	cursor: pointer; color: var(--ck-ink-2);
}
.ck-gs-invite-subtab.active {
	background: var(--ck-ink);
	color: white; border-color: var(--ck-ink);
}
.ck-gs-invite-layout {
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: 0;
	border: 1px solid var(--ck-border);
	border-radius: var(--ck-radius);
	overflow: hidden;
}
.ck-gs-invite-left {
	border-right: 1px solid var(--ck-border);
	padding: 16px;
}
.ck-gs-invite-left-header {
	display: flex; justify-content: space-between;
	align-items: center; margin-bottom: 12px;
}
.ck-gs-invite-left-header h4 { margin: 0; font-size: 15px; }
.ck-gs-invite-left-header label {
	font-size: 12px; color: var(--ck-muted);
	display: flex; align-items: center; gap: 4px;
}
.ck-gs-invite-search {
	width: 100%; padding: 8px 12px;
	border: 1px solid var(--ck-border);
	border-radius: var(--ck-radius-sm);
	font-size: 13px; margin-bottom: 12px;
	box-sizing: border-box;
}
.ck-gs-invite-member-list { max-height: 320px; overflow-y: auto; }
.ck-gs-invite-right { padding: 16px 20px; }
.ck-gs-invite-right h4 { margin: 0 0 12px; font-size: 15px; }
.ck-gs-invite-info {
	display: flex; align-items: flex-start; gap: 8px;
	padding: 10px 14px;
	background: #e3f2fd;
	border-radius: var(--ck-radius-sm);
	font-size: 13px; color: #1565c0;
	margin-bottom: 12px;
}
.ck-gs-invite-tags {
	display: flex; flex-wrap: wrap; gap: 6px;
	margin-bottom: 12px;
}
.ck-gs-invite-tags .ck-invite-tag {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 5px 8px 5px 12px;
	background: var(--ck-purple-soft, #f3e8ff);
	color: var(--ck-purple);
	border-radius: 100px;
	font-size: 12px; font-weight: 600;
}
.ck-invite-tag-remove {
	display: inline-flex; align-items: center; justify-content: center;
	width: 18px; height: 18px;
	border-radius: 50%;
	border: none;
	background: var(--ck-purple);
	color: white;
	font-size: 12px; font-weight: 700;
	cursor: pointer;
	line-height: 1;
	padding: 0;
	transition: var(--ck-transition);
}
.ck-invite-tag-remove:hover {
	background: #dc2626;
}
.ck-gs-invite-msg {
	width: 100%; padding: 10px 14px;
	border: 1px solid var(--ck-border);
	border-radius: var(--ck-radius-sm);
	font-size: 13px; resize: vertical;
	margin-bottom: 12px;
	box-sizing: border-box;
}
.ck-gs-invite-actions {
	display: flex; gap: 8px;
	justify-content: flex-end;
}

/* Invite avatar image (server-rendered) */
.ck-gs-inv-avatar-img {
	width: 36px; height: 36px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

/* Pending Invitations Panel */
.ck-gs-pending-row {
	display: flex; align-items: center; gap: 12px;
	padding: 12px 16px;
	border: 1px solid var(--ck-border-light, #eee);
	border-radius: var(--ck-radius-sm);
	margin-bottom: 8px;
	transition: var(--ck-transition);
}
.ck-gs-pending-row:hover {
	background: var(--ck-bg, #f5f5f5);
}
.ck-gs-pending-info {
	flex: 1;
	display: flex; flex-direction: column; gap: 2px;
}
.ck-gs-pending-name {
	font-size: 14px; font-weight: 600; color: var(--ck-ink);
}
.ck-gs-pending-time {
	font-size: 12px; color: var(--ck-muted);
}

/* ── Manage Tab ── */
.ck-gs-manage {
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: 0; padding: 0;
}
.ck-gs-manage-sidebar {
	display: flex; flex-direction: column;
	gap: 2px; padding: 24px 16px;
	border-right: 1px solid var(--ck-border-light, #eee);
}
.ck-gs-manage-link {
	display: block;
	padding: 10px 18px;
	border-radius: var(--ck-radius-sm);
	font-size: 14px; font-weight: 500;
	color: var(--ck-ink-2);
	text-decoration: none;
	transition: var(--ck-transition);
}
.ck-gs-manage-link:hover { background: var(--ck-bg, #f5f5f5); }
.ck-gs-manage-link.active {
	background: var(--ck-purple);
	color: white; font-weight: 600;
}
.ck-gs-manage-content { padding: 24px 28px; }
.ck-gs-manage-form {}
.ck-gs-form-label {
	display: block;
	font-size: 14px; font-weight: 600;
	color: var(--ck-ink-2);
	margin-bottom: 6px;
}
.ck-gs-form-input {
	width: 100%; padding: 10px 14px;
	border: 1px solid var(--ck-border);
	border-radius: var(--ck-radius-sm);
	font-size: 14px; margin-bottom: 16px;
	box-sizing: border-box;
}
.ck-gs-form-textarea {
	width: 100%; padding: 10px 14px;
	border: 1px solid var(--ck-border);
	border-radius: var(--ck-radius-sm);
	font-size: 14px; resize: vertical;
	margin-bottom: 16px;
	box-sizing: border-box;
}
.ck-gs-form-check {
	display: flex; align-items: center; gap: 8px;
	font-size: 14px; color: var(--ck-ink-2);
	margin-bottom: 16px; cursor: pointer;
}
.ck-gs-manage-heading {
	font-size: 18px; font-weight: 700;
	color: var(--ck-ink); margin: 24px 0 12px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--ck-border-light, #eee);
}
.ck-gs-manage-heading:first-child { margin-top: 0; }
.ck-gs-manage-subtitle {
	font-size: 14px; color: var(--ck-muted);
	margin: 0 0 12px;
}
.ck-gs-manage-desc {
	font-size: 13px; color: var(--ck-muted);
	margin: 0 0 12px; line-height: 1.6;
}
.ck-gs-privacy-option {
	display: block;
	padding: 12px 16px;
	margin-bottom: 8px;
	border-radius: var(--ck-radius-sm);
	cursor: pointer;
	font-size: 14px;
}
.ck-gs-privacy-option input { margin-right: 8px; accent-color: var(--ck-purple); }
.ck-gs-privacy-option ul {
	margin: 6px 0 0 26px;
	padding: 0;
	font-size: 13px; color: var(--ck-muted);
	line-height: 1.8;
}
.ck-gs-radio-row {
	display: block;
	padding: 6px 0;
	font-size: 14px; color: var(--ck-ink-2);
	cursor: pointer;
}
.ck-gs-radio-row input { margin-right: 8px; accent-color: var(--ck-purple); }
.ck-gs-upload-box {
	border: 2px dashed var(--ck-border);
	border-radius: var(--ck-radius);
	padding: 40px 20px;
	text-align: center;
	margin-bottom: 12px;
}
.ck-gs-upload-box p {
	font-size: 14px; color: var(--ck-muted);
	margin: 0 0 12px;
}
/* Image preview in manage tabs */
.ck-gs-upload-preview {
	margin-bottom: 16px;
	border-radius: var(--ck-radius);
	overflow: hidden;
	border: 1px solid var(--ck-border);
}
.ck-gs-preview-img {
	width: 100%;
	max-height: 250px;
	object-fit: cover;
	display: block;
}
.ck-gs-preview-img.ck-gs-preview-cover {
	max-height: 200px;
}
.ck-gs-upload-actions {
	display: flex;
	gap: 10px;
	align-items: center;
	margin-bottom: 12px;
}
.ck-gs-upload-tip {
	padding: 10px 16px;
	background: #fff8e1;
	border-radius: var(--ck-radius-sm);
	font-size: 13px; color: #e65100;
}
.ck-gs-manage-member-row {
	display: flex; align-items: center; gap: 12px;
	padding: 12px 16px;
	border: 1px solid var(--ck-border-light, #eee);
	border-radius: var(--ck-radius-sm);
	margin-bottom: 8px;
}
.ck-gs-mm-avatar {
	width: 36px; height: 36px;
	border-radius: 50%; object-fit: cover;
}
.ck-gs-warning-banner {
	padding: 16px 20px;
	background: #fff3e0;
	border-left: 4px solid #ff9800;
	border-radius: var(--ck-radius-sm);
	font-size: 14px; color: #e65100;
	margin-bottom: 16px; line-height: 1.6;
}
.ck-gs-info-banner {
	padding: 12px 16px;
	background: #e3f2fd;
	border-radius: var(--ck-radius-sm);
	font-size: 14px; color: #1565c0;
}

/* Invite member row */
.ck-gs-inv-member {
	display: flex; align-items: center; gap: 10px;
	padding: 8px 0;
	border-bottom: 1px solid var(--ck-border-light, #eee);
}
.ck-gs-inv-avatar {
	width: 36px; height: 36px;
	border-radius: 50%; flex-shrink: 0;
	display: flex; align-items: center; justify-content: center;
	font-size: 14px; font-weight: 700; color: white;
}
.ck-gs-inv-name { flex: 1; font-size: 14px; font-weight: 500; }
.ck-gs-inv-toggle {
	width: 28px; height: 28px;
	min-width: 28px; min-height: 28px;
	border-radius: 50%;
	border: 1px solid var(--ck-border);
	background: transparent;
	cursor: pointer; font-size: 14px;
	display: flex; align-items: center; justify-content: center;
	flex-shrink: 0;
	padding: 0;
	box-sizing: border-box;
	aspect-ratio: 1;
	line-height: 1;
}
.ck-gs-inv-toggle.added {
	background: var(--ck-purple-soft, #f3e8ff);
	border-color: var(--ck-purple);
	color: var(--ck-purple);
}

/* Responsive */
@media (max-width: 768px) {
	.ck-gs-header { flex-direction: column; align-items: flex-start; gap: 0; }
	.ck-gs-info { padding-top: 12px; }
	.ck-gs-actions { padding-top: 8px; }
	.ck-gs-tabs { overflow-x: auto; }
	.ck-gs-invite-layout { grid-template-columns: 1fr; }
	.ck-gs-invite-left { border-right: none; border-bottom: 1px solid var(--ck-border); }
	.ck-gs-manage { grid-template-columns: 1fr; }
	.ck-gs-manage-sidebar {
		flex-direction: row; overflow-x: auto;
		border-right: none; border-bottom: 1px solid var(--ck-border-light, #eee);
		padding: 12px;
	}
}

/* ===== Modal ===== */
.ck-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(4px);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10000;
}

.ck-modal {
	background: var(--ck-white);
	border-radius: var(--ck-radius);
	width: 560px;
	max-width: 95vw;
	max-height: 90vh;
	overflow-y: auto;
	box-shadow: var(--ck-shadow-lg);
	animation: ckModalIn 0.2s ease;
}

@keyframes ckModalIn {
	from { opacity: 0; transform: scale(0.95) translateY(8px); }
	to   { opacity: 1; transform: scale(1) translateY(0); }
}

.ck-modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px 24px;
	border-bottom: 1px solid var(--ck-border);
}

.ck-modal-header h2 {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
}

.ck-modal-close {
	width: 32px;
	height: 32px;
	border: none;
	background: var(--ck-bg);
	border-radius: 8px;
	cursor: pointer;
	font-size: 14px;
	color: var(--ck-muted);
	transition: var(--ck-transition);
}

.ck-modal-close:hover {
	background: var(--ck-border);
}

.ck-modal-body {
	padding: 24px;
}

.ck-modal-footer {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	padding: 16px 24px;
	border-top: 1px solid var(--ck-border);
}

/* Form Elements */
.ck-form-group {
	margin-bottom: 20px;
}

.ck-label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--ck-ink-2);
	margin-bottom: 6px;
}

.ck-input,
.ck-textarea {
	width: 100%;
	padding: 10px 14px;
	border: 1.5px solid var(--ck-border);
	border-radius: var(--ck-radius-sm);
	font-size: 14px;
	font-family: var(--ck-font);
	color: var(--ck-ink-2);
	transition: var(--ck-transition);
}

.ck-input:focus,
.ck-textarea:focus {
	outline: none;
	border-color: var(--ck-purple);
	box-shadow: 0 0 0 3px var(--ck-purple-glow);
}

/* Type Picker Grid */
.ck-type-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px;
}

.ck-type-option {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 14px 10px;
	border: 1.5px solid var(--ck-border);
	border-radius: var(--ck-radius-sm);
	cursor: pointer;
	transition: var(--ck-transition);
	text-align: center;
}

.ck-type-option input {
	display: none;
}

.ck-type-option:hover {
	border-color: var(--ck-purple);
	background: var(--ck-purple-soft);
}

.ck-type-option.selected {
	border-color: var(--ck-purple);
	background: var(--ck-purple-glow);
}

.ck-type-icon {
	font-size: 22px;
}

.ck-type-name {
	font-size: 13px;
	font-weight: 700;
	color: var(--ck-ink);
}

.ck-type-desc {
	font-size: 11px;
	color: var(--ck-muted);
	line-height: 1.3;
}

/* ===== Responsive (Directory) ===== */
@media (max-width: 900px) {
	.ck-groups-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.ck-gl-stats { display: none; }

	.ck-group-content {
		grid-template-columns: 1fr;
	}

	.ck-group-header {
		flex-direction: column;
		align-items: center;
		text-align: center;
		padding: 0 20px 20px;
		margin-top: -48px;
	}

	.ck-group-info {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.ck-group-meta-row {
		justify-content: center;
	}

	.ck-group-desc {
		text-align: center;
	}
}

@media (max-width: 640px) {
	.ck-gl-row {
		flex-wrap: wrap;
		gap: 12px;
		padding: 16px;
	}

	.ck-gl-info { width: calc(100% - 74px); }
	.ck-gl-actions { width: 100%; justify-content: flex-end; }
	.ck-dir-view-toggle { display: none; }
	.ck-dir-filter-btn { display: none; }
}

@media (max-width: 480px) {
	.ck-groups-grid {
		grid-template-columns: 1fr;
	}

	.ck-group-cover {
		height: 160px;
		border-radius: 0;
	}

	.ck-type-grid {
		grid-template-columns: 1fr;
	}

	.ck-groups-header .ck-search-wrap { max-width: 100%; }
	.ck-filter-dropdown { display: none; }
}

/* ===== Creation Wizard ===== */
.ck-create-wizard {
	max-width: 720px;
	margin: 0 auto;
}

.ck-wizard-header {
	text-align: center;
	margin-bottom: 32px;
}

.ck-wizard-header h1 {
	font-size: 26px;
	font-weight: 800;
	color: var(--ck-ink);
	margin: 0 0 20px;
}

.ck-wizard-steps {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	flex-wrap: wrap;
}

.ck-step {
	font-size: 13px;
	font-weight: 600;
	color: var(--ck-muted);
	padding: 6px 12px;
	border-radius: var(--ck-radius-pill);
	transition: var(--ck-transition);
	white-space: nowrap;
}

.ck-step.active {
	color: var(--ck-purple);
	background: var(--ck-purple-glow);
}

.ck-step.completed {
	color: var(--ck-teal);
}

.ck-step-line {
	width: 24px;
	height: 2px;
	background: var(--ck-border);
	flex-shrink: 0;
}

.ck-wizard-panel {
	display: none;
	background: var(--ck-bg-card);
	border: 1px solid var(--ck-border);
	border-radius: var(--ck-radius);
	padding: 32px;
	animation: ckWizSlide 0.25s ease;
}

.ck-wizard-panel.active {
	display: block;
}

@keyframes ckWizSlide {
	from { opacity: 0; transform: translateX(12px); }
	to   { opacity: 1; transform: translateX(0); }
}

.ck-wizard-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 28px;
	padding-top: 20px;
	border-top: 1px solid var(--ck-border);
}

.ck-section-title {
	font-size: 17px;
	font-weight: 700;
	color: var(--ck-ink);
	margin: 0 0 6px;
}

.ck-section-subtitle {
	font-size: 13px;
	color: var(--ck-muted);
	margin: 0 0 12px;
}

.ck-required {
	color: var(--ck-red, #ef4444);
}

/* Radio Cards (privacy options) */
.ck-radio-cards {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ck-radio-card {
	display: block;
	padding: 16px 20px;
	border: 1.5px solid var(--ck-border);
	border-radius: var(--ck-radius-sm);
	cursor: pointer;
	transition: var(--ck-transition);
}

.ck-radio-card input {
	display: none;
}

.ck-radio-card:hover {
	border-color: var(--ck-purple);
	background: var(--ck-purple-soft, rgba(109,40,217,0.02));
}

.ck-radio-card.selected {
	border-color: var(--ck-purple);
	background: var(--ck-purple-glow);
}

.ck-rc-header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 8px;
}

.ck-rc-icon {
	font-size: 20px;
}

.ck-rc-header strong {
	font-size: 14px;
	color: var(--ck-ink);
}

.ck-rc-details {
	margin: 0;
	padding-left: 34px;
	list-style: disc;
}

.ck-rc-details li {
	font-size: 13px;
	color: var(--ck-muted);
	line-height: 1.7;
}

/* Radio Stack (simple radio list) */
.ck-radio-stack {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ck-radio-stack label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: var(--ck-ink-2);
	cursor: pointer;
	padding: 6px 0;
}

.ck-radio-stack input[type="radio"] {
	accent-color: var(--ck-purple);
	width: 16px;
	height: 16px;
}

/* Upload Area */
.ck-upload-area {
	text-align: center;
}

.ck-upload-preview {
	width: 160px;
	height: 160px;
	margin: 0 auto 16px;
	border-radius: 50%;
	border: 2px dashed var(--ck-border);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: var(--ck-bg);
}

.ck-upload-icon {
	font-size: 48px;
	line-height: 1;
}

.ck-upload-preview img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ck-upload-desc {
	font-size: 15px;
	font-weight: 600;
	color: var(--ck-ink-2);
	margin: 0 0 4px;
	text-align: center;
}

.ck-upload-preview.ck-upload-cover {
	width: 100%;
	height: 220px;
	border-radius: var(--ck-radius);
	background-size: cover;
	background-repeat: no-repeat;
}

/* Cover with image: draggable */
.ck-upload-preview.ck-upload-cover.has-image {
	cursor: grab;
	border-style: solid;
	border-color: var(--ck-border);
}

.ck-upload-preview.ck-upload-cover.has-image:active {
	cursor: grabbing;
}

.ck-cover-drag-hint {
	font-size: 12px;
	color: var(--ck-muted);
	margin: -8px 0 12px;
	text-align: center;
}

.ck-cover-drag-hint span {
	font-size: 14px;
}

.ck-upload-placeholder {
	padding: 16px;
}

.ck-upload-placeholder p {
	font-size: 14px;
	color: var(--ck-ink-2);
	margin: 8px 0 0;
}

.ck-muted-sm {
	font-size: 12px;
	color: var(--ck-muted);
	margin: 8px 0 0;
}

.ck-upload-actions {
	display: flex;
	gap: 8px;
	justify-content: center;
	margin: 12px 0 8px;
}

/* Invite Layout */
.ck-invite-layout {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	min-height: 320px;
}

.ck-invite-list,
.ck-invite-selected {
	border: 1px solid var(--ck-border);
	border-radius: var(--ck-radius-sm);
	padding: 16px;
}

.ck-invite-list h3,
.ck-invite-selected h3 {
	font-size: 15px;
	font-weight: 700;
	color: var(--ck-ink);
	margin: 0 0 12px;
}

.ck-invite-search-wrap {
	margin-bottom: 12px;
}

.ck-invite-members {
	max-height: 260px;
	overflow-y: auto;
}

.ck-invite-member {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px;
	border-radius: var(--ck-radius-sm);
	transition: var(--ck-transition);
}

.ck-invite-member:hover {
	background: var(--ck-bg);
}

.ck-invite-member img {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	object-fit: cover;
}

.ck-invite-member-name {
	flex: 1;
	font-size: 14px;
	font-weight: 600;
	color: var(--ck-ink-2);
}

.ck-invite-member-initial {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--ck-purple), var(--ck-purple-light));
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 700;
	flex-shrink: 0;
}

.ck-invite-add-btn {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 1.5px solid var(--ck-border);
	background: none;
	cursor: pointer;
	font-size: 16px;
	color: var(--ck-muted);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: var(--ck-transition);
	flex-shrink: 0;
}

.ck-invite-add-btn:hover {
	border-color: var(--ck-purple);
	color: var(--ck-purple);
	background: var(--ck-purple-glow);
}

.ck-invite-add-btn.added {
	border-color: var(--ck-red, #ef4444);
	color: var(--ck-red, #ef4444);
	background: rgba(239,68,68,0.06);
}

.ck-invite-info {
	font-size: 13px;
	color: var(--ck-muted);
	padding: 12px;
	background: var(--ck-purple-glow);
	border-radius: var(--ck-radius-sm);
	border-left: 3px solid var(--ck-purple);
	margin-bottom: 12px;
}

.ck-invite-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 12px;
	min-height: 32px;
}

.ck-invite-tag {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	background: var(--ck-purple);
	color: white;
	border-radius: var(--ck-radius-pill);
	font-size: 12px;
	font-weight: 600;
}

.ck-invite-tag-remove {
	background: none;
	border: none;
	color: rgba(255,255,255,0.7);
	cursor: pointer;
	font-size: 14px;
	padding: 0;
	line-height: 1;
}

.ck-invite-tag-remove:hover {
	color: white;
}

/* Wizard Responsive */
@media (max-width: 600px) {
	.ck-wizard-panel {
		padding: 20px 16px;
	}

	.ck-wizard-steps {
		gap: 2px;
	}

	.ck-step {
		font-size: 11px;
		padding: 4px 6px;
	}

	.ck-step-line {
		width: 10px;
	}

	.ck-invite-layout {
		grid-template-columns: 1fr;
	}

	.ck-wizard-footer {
		flex-direction: column;
		gap: 10px;
	}

	.ck-wizard-footer .ck-btn {
		width: 100%;
		text-align: center;
	}
}

/* ===== Group Media Tab ===== */
.ck-media-subtabs {
	display: flex;
	gap: 0;
	border-bottom: 2px solid var(--ck-border, #e5e7eb);
	margin-bottom: 24px;
}
.ck-media-subtab {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 24px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--ck-muted, #6b7280);
	background: none !important;
	border: none !important;
	border-bottom: 2px solid transparent;
	margin-bottom: -2px;
	cursor: pointer;
	transition: color 0.2s, border-color 0.2s;
	font-family: var(--ck-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
	outline: none !important;
	box-shadow: none !important;
}
.ck-media-subtab:hover {
	color: var(--ck-ink-2, #1f2937);
}
.ck-media-subtab.active {
	color: var(--ck-purple, #6d28d9);
	border-bottom-color: var(--ck-purple, #6d28d9);
}
.ck-media-subtab:focus,
.ck-media-subtab:active {
	background: none !important;
	outline: none !important;
}
.ck-media-count {
	font-size: 12px;
	font-weight: 500;
	color: var(--ck-subtle, #9ca3af);
}
.ck-media-subtab.active .ck-media-count {
	color: var(--ck-purple, #6d28d9);
}

/* Media Grid */
.ck-media-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
}
.ck-media-grid-item {
	position: relative;
	aspect-ratio: 1;
	border-radius: 10px;
	overflow: hidden;
	cursor: pointer;
	background: var(--ck-bg, #f3f4f6);
	transition: transform 0.15s, box-shadow 0.15s;
}
.ck-media-grid-item:hover {
	transform: scale(1.03);
	box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
.ck-media-grid-item img,
.ck-media-grid-item video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.ck-media-play-badge {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
	color: white;
	background: rgba(0,0,0,0.3);
	pointer-events: none;
}
.ck-media-doc {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	gap: 8px;
	padding: 12px;
	text-align: center;
}
.ck-media-doc-icon { font-size: 32px; }
.ck-media-doc-name {
	font-size: 12px;
	color: var(--ck-muted, #6b7280);
	word-break: break-all;
}

@media (max-width: 768px) {
	.ck-media-grid {
		grid-template-columns: repeat(3, 1fr);
	}
	.ck-media-subtab {
		padding: 10px 14px;
		font-size: 11px;
	}
}