/**
 * Account & My Profile pages
 */

.ctrlai-account-page,
.ctrlai-my-profile-page {
	max-width: 960px;
	margin: 32px auto 64px;
	padding: 0 20px;
	box-sizing: border-box;
}

.ctrlai-account-page .ctrlai-member-page__title,
.ctrlai-profile-header__title {
	margin: 0 0 12px;
	font-family: var(--ctrlai-font-main, "Noto Sans KR", sans-serif);
	font-size: 28px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--ctrlai-text, #0f172a);
	text-align: left;
}

.ctrlai-profile-header__desc,
.ctrlai-profile-panel__desc {
	margin: 0;
	color: var(--ctrlai-text-muted, #aeb7c6);
	font-size: 14px;
	line-height: 1.6;
}

.ctrlai-profile-login-notice {
	text-align: center;
	color: var(--ctrlai-text-soft, #e5e7eb);
}

.ctrlai-profile-login-notice a {
	color: var(--ctrlai-accent, #ffdd57);
}

/* ---- My Profile ---- */

.ctrlai-profile-hero {
	display: flex;
	gap: 24px;
	align-items: flex-start;
	margin: 28px 0 24px;
	padding: 24px;
	background: var(--ctrlai-surface, #ffffff);
	border: 1px solid var(--ctrlai-border, #3d4a5d);
	border-radius: 16px;
}

.ctrlai-profile-hero__avatar img,
.ctrlai-profile-hero__avatar .ctrlai-profile-avatar {
	width: 80px !important;
	height: 80px !important;
	border-radius: 50% !important;
	object-fit: cover;
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.ctrlai-profile-hero__body {
	flex: 1;
	min-width: 0;
}

.ctrlai-profile-hero__name {
	margin: 0 0 16px;
	font-size: 22px;
	font-weight: 700;
	color: var(--ctrlai-text, #0f172a);
}

.ctrlai-profile-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 18px;
}

.ctrlai-profile-badge {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 88px;
	padding: 10px 12px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--ctrlai-border-subtle, #222a36);
	border-radius: 10px;
}

.ctrlai-profile-badge__label {
	font-size: 11px;
	color: var(--ctrlai-text-muted, #64748b);
}

.ctrlai-profile-badge__value {
	font-size: 14px;
	font-weight: 600;
	color: var(--ctrlai-text-soft, #e5e7eb);
}

.ctrlai-profile-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.ctrlai-profile-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 16px;
	border-radius: 12px;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none !important;
	transition: opacity 0.2s ease;
}

.ctrlai-profile-btn:hover {
	opacity: 0.9;
}

.ctrlai-profile-btn--gray {
	background: #374151;
	color: #fff !important;
}

.ctrlai-profile-btn--purple {
	background: #8b5cf6;
	color: #fff !important;
}

.ctrlai-profile-stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	margin-bottom: 24px;
}

.ctrlai-profile-stat {
	padding: 18px 16px;
	text-align: center;
	background: var(--ctrlai-surface, #ffffff);
	border: 1px solid var(--ctrlai-border, #3d4a5d);
	border-radius: 12px;
}

.ctrlai-profile-stat__label {
	display: block;
	margin-bottom: 8px;
	font-size: 13px;
	color: var(--ctrlai-text-muted, #64748b);
}

.ctrlai-profile-stat__value {
	display: block;
	font-size: 22px;
	font-weight: 700;
	color: var(--ctrlai-text, #0f172a);
}

.ctrlai-profile-panel {
	margin-bottom: 20px;
	padding: 22px 24px;
	background: var(--ctrlai-surface, #ffffff);
	border: 1px solid var(--ctrlai-border, #3d4a5d);
	border-radius: 14px;
}

.ctrlai-profile-panel__title {
	margin: 0 0 8px;
	font-size: 18px;
	font-weight: 700;
	color: var(--ctrlai-text, #0f172a);
}

.ctrlai-profile-panel__placeholder {
	margin: 12px 0 0;
	font-size: 13px;
	color: var(--ctrlai-text-muted, #64748b);
}

.ctrlai-profile-panel__links {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 16px;
}

.ctrlai-profile-link {
	font-size: 14px;
	font-weight: 500;
	color: var(--ctrlai-accent, #ffdd57) !important;
	text-decoration: none !important;
}

.ctrlai-profile-link:hover {
	text-decoration: underline !important;
}

.ctrlai-profile-panel__empty {
	margin: 12px 0 0;
	font-size: 13px;
	color: var(--ctrlai-text-muted, #64748b);
}

.ctrlai-activity-block + .ctrlai-activity-block {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid var(--ctrlai-border-subtle, #222a36);
}

.ctrlai-activity-block__title {
	margin: 0 0 12px;
	font-size: 14px;
	font-weight: 600;
	color: var(--ctrlai-text-soft, #e5e7eb);
}

.ctrlai-activity-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ctrlai-activity-list__item {
	padding: 12px 0;
	border-bottom: 1px solid var(--ctrlai-border-subtle, #222a36);
}

.ctrlai-activity-list__item:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.ctrlai-activity-list__title,
.ctrlai-activity-list__parent {
	display: inline-block;
	font-size: 14px;
	font-weight: 600;
	color: var(--ctrlai-text, #0f172a) !important;
	text-decoration: none !important;
}

.ctrlai-activity-list__title:hover,
.ctrlai-activity-list__parent:hover {
	color: var(--ctrlai-accent, #ffdd57) !important;
}

.ctrlai-activity-list__excerpt {
	margin: 0 0 6px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--ctrlai-text-soft, #e5e7eb);
}

.ctrlai-activity-list__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 12px;
	font-size: 12px;
	color: var(--ctrlai-text-muted, #64748b);
}

.ctrlai-activity-list__board {
	padding: 2px 8px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.06);
}

.ctrlai-profile-notice {
	margin: 0 0 16px;
	padding: 12px 14px;
	border-radius: 10px;
	background: rgba(34, 197, 94, 0.12);
	border: 1px solid rgba(34, 197, 94, 0.35);
	color: #bbf7d0;
	font-size: 13px;
}

.ctrlai-profile-card-preview {
	margin: 16px 0 20px;
	padding: 20px;
	border-radius: 16px;
	background: linear-gradient(135deg, var(--ctrlai-card-color, #1a2433) 0%, rgba(255, 255, 255, 0.08) 100%);
	border: 1px solid var(--ctrlai-border, #3d4a5d);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
}

.ctrlai-profile-card-preview__inner {
	display: flex;
	align-items: center;
	gap: 16px;
}

.ctrlai-profile-card-preview__avatar img {
	width: 72px !important;
	height: 72px !important;
}

.ctrlai-profile-card-preview__name {
	margin: 0 0 8px;
	font-size: 18px;
	font-weight: 700;
	color: var(--ctrlai-text, #0f172a);
}

.ctrlai-profile-card-preview__meta {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: 13px;
	color: var(--ctrlai-text-soft, #e5e7eb);
}

.ctrlai-card-color-form__fieldset {
	margin: 0;
	padding: 0;
	border: 0;
}

.ctrlai-card-color-form__legend {
	margin-bottom: 12px;
	font-size: 14px;
	font-weight: 600;
	color: var(--ctrlai-text-soft, #e5e7eb);
}

.ctrlai-card-color-form__options {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 10px;
	margin-bottom: 16px;
}

.ctrlai-card-color-option {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border: 1px solid var(--ctrlai-border-subtle, #222a36);
	border-radius: 10px;
	cursor: pointer;
}

.ctrlai-card-color-option input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.ctrlai-card-color-option:has(input:checked) {
	border-color: var(--ctrlai-accent, #ffdd57);
	background: rgba(255, 221, 87, 0.08);
}

.ctrlai-card-color-option__swatch {
	width: 22px;
	height: 22px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	flex-shrink: 0;
}

.ctrlai-card-color-option__label {
	font-size: 13px;
	color: var(--ctrlai-text-soft, #e5e7eb);
}

.ctrlai-card-color-form .ctrlai-profile-btn {
	border: 0;
	cursor: pointer;
}

.ctrlai-status-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ctrlai-status-list__item {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 0;
	border-bottom: 1px solid var(--ctrlai-border-subtle, #222a36);
	font-size: 14px;
}

.ctrlai-status-list__item:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.ctrlai-status-list__label {
	color: var(--ctrlai-text-muted, #64748b);
}

.ctrlai-status-list__value {
	color: var(--ctrlai-text-soft, #e5e7eb);
	text-align: right;
	word-break: break-all;
}

.ctrlai-status-list__item--ok .ctrlai-status-list__value {
	color: #86efac;
}

.ctrlai-status-list__item--warn .ctrlai-status-list__value {
	color: #fcd34d;
}

/* ---- UM Account ---- */

.ctrlai-account-page .um-account {
	max-width: 100%;
	color: var(--ctrlai-text-soft, #e5e7eb);
}

.ctrlai-account-page .um-account-side,
.ctrlai-account-page .um-account-main {
	float: none;
	width: 100%;
	padding: 0;
}

.ctrlai-account-page .um-account-side {
	margin-bottom: 20px;
}

.ctrlai-account-page .um-account-side ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ctrlai-account-page .um-account-side li {
	margin: 0 !important;
	background: transparent !important;
}

.ctrlai-account-page .um-account-side li a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px !important;
	background: var(--ctrlai-surface, #ffffff) !important;
	border: 1px solid var(--ctrlai-border, #3d4a5d) !important;
	border-radius: 10px !important;
	color: var(--ctrlai-text-soft, #e5e7eb) !important;
	text-decoration: none !important;
}

.ctrlai-account-page .um-account-side li a.current,
.ctrlai-account-page .um-account-side li a.current:hover {
	background: #374151 !important;
	color: #fff !important;
	border-color: #4b5563 !important;
}

.ctrlai-account-page .um-account-side li a span.um-account-icon,
.ctrlai-account-page .um-account-side li a span.um-account-icontip {
	position: static !important;
	width: auto !important;
	height: auto !important;
	line-height: 1 !important;
	color: inherit !important;
}

.ctrlai-account-page .um-account-meta {
	margin-bottom: 16px;
	padding: 20px;
	background: var(--ctrlai-surface, #ffffff);
	border: 1px solid var(--ctrlai-border, #3d4a5d);
	border-radius: 14px;
}

.ctrlai-account-page .um-account-name a {
	color: var(--ctrlai-text, #0f172a) !important;
}

.ctrlai-account-page .um-account-main div.um-account-heading {
	color: var(--ctrlai-text, #0f172a) !important;
	margin-bottom: 16px !important;
}

.ctrlai-account-page .um-account-tab {
	padding: 24px;
	background: var(--ctrlai-surface, #ffffff);
	border: 1px solid var(--ctrlai-border, #3d4a5d);
	border-radius: 14px;
}

.ctrlai-account-page .um-field-label label,
.ctrlai-account-page .um-account-main label {
	color: var(--ctrlai-text-soft, #e5e7eb) !important;
}

.ctrlai-account-page .um-form-field,
.ctrlai-account-page input.um-form-field,
.ctrlai-account-page textarea.um-form-field,
.ctrlai-account-page select.um-form-field {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	background: #fff !important;
	color: #111 !important;
	border-radius: 8px !important;
}

.ctrlai-account-page .um-button,
.ctrlai-account-page input[type="submit"].um-button {
	background: #3b82f6 !important;
	color: #fff !important;
	border-radius: 10px !important;
	width: auto !important;
	min-width: 120px;
}

.ctrlai-account-page .um-field-area {
	margin-bottom: 16px;
}

.ctrlai-account-page p.um-notice {
	border-radius: 8px !important;
}

/* ---- UM Members directory ---- */

.ctrlai-members-page {
	max-width: 1100px;
}

.ctrlai-members-page .um-directory,
.ctrlai-members-page .um-directory a {
	color: var(--ctrlai-text-soft, #e5e7eb);
}

.ctrlai-members-page .um-directory a:hover,
.ctrlai-members-page .um-directory a:focus {
	color: var(--ctrlai-text, #0f172a);
}

.ctrlai-members-page .um-member-directory-header {
	background: var(--ctrlai-surface, #ffffff);
	border: 1px solid var(--ctrlai-border, #3d4a5d);
	border-radius: 14px;
	padding: 16px;
	margin-bottom: 20px;
}

.ctrlai-members-page .um-member-directory-search-line .um-search-line,
.ctrlai-members-page .um-search-filter input,
.ctrlai-members-page .um-search-filter select,
.ctrlai-members-page .select2-container--default .select2-selection--single {
	background: #fff !important;
	color: #111 !important;
	border-radius: 8px !important;
}

.ctrlai-members-page .um-do-search,
.ctrlai-members-page .um-button {
	background: #3b82f6 !important;
	color: #fff !important;
	border-radius: 10px !important;
}

.ctrlai-members-page .um-members-wrapper,
.ctrlai-members-page .um-members {
	background: transparent;
}

.ctrlai-members-page .um-member {
	background: var(--ctrlai-surface, #ffffff) !important;
	border: 1px solid var(--ctrlai-border, #3d4a5d) !important;
	border-radius: 14px !important;
	box-shadow: none !important;
}

.ctrlai-members-page .um-member-name a {
	color: var(--ctrlai-text, #0f172a) !important;
}

.ctrlai-members-page .um-member-meta,
.ctrlai-members-page .um-member-tagline,
.ctrlai-members-page .um-member-directory-footer {
	color: var(--ctrlai-text-muted, #64748b) !important;
}

.ctrlai-members-page .um-members-pagi a,
.ctrlai-members-page .um-members-pagi span {
	background: var(--ctrlai-surface, #ffffff) !important;
	border: 1px solid var(--ctrlai-border, #3d4a5d) !important;
	color: var(--ctrlai-text-soft, #e5e7eb) !important;
	border-radius: 8px !important;
}

.ctrlai-members-page .um-members-pagi span.current {
	background: #374151 !important;
	color: #fff !important;
}

/* ---- Password reset ---- */

.ctrlai-password-reset-page .um-field-block,
.ctrlai-password-reset-page .um-field-block div {
	color: var(--ctrlai-text-soft, #e5e7eb) !important;
	text-align: center;
}

/* ---- myCRED history on profile ---- */

.ctrlai-profile-points-log {
	margin-top: 16px;
}

.ctrlai-profile-points-log .mycred-history-wrapper {
	color: var(--ctrlai-text-soft, #e5e7eb);
}

.ctrlai-profile-points-log table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}

.ctrlai-profile-points-log table th,
.ctrlai-profile-points-log table td {
	padding: 10px 12px;
	border-bottom: 1px solid var(--ctrlai-border-subtle, #222a36);
	text-align: left;
}

.ctrlai-profile-points-log table th {
	color: var(--ctrlai-text-muted, #64748b);
	font-weight: 600;
}

.ctrlai-profile-points-log table td {
	color: var(--ctrlai-text-soft, #e5e7eb);
}

.ctrlai-profile-points-log .pagination {
	margin-top: 12px;
	text-align: center;
}

.ctrlai-profile-points-log .pagination a,
.ctrlai-profile-points-log .pagination span {
	display: inline-block;
	margin: 0 4px;
	padding: 6px 10px;
	border-radius: 8px;
	background: var(--ctrlai-surface, #ffffff);
	border: 1px solid var(--ctrlai-border, #3d4a5d);
	color: var(--ctrlai-text-soft, #e5e7eb) !important;
	text-decoration: none !important;
}

.ctrlai-profile-points-log .pagination span.current {
	background: #374151;
	color: #fff !important;
}

/* ---- Ranking page ---- */

.ctrlai-ranking-page {
	max-width: 720px;
}

.ctrlai-ranking-my-position {
	margin: 0 0 20px;
	padding: 14px 18px;
	background: var(--ctrlai-surface, #ffffff);
	border: 1px solid var(--ctrlai-border, #3d4a5d);
	border-radius: 12px;
	color: var(--ctrlai-text-soft, #e5e7eb);
	font-size: 15px;
}

.ctrlai-ranking-board .myCRED-leaderboard {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ctrlai-ranking-board .myCRED-leaderboard li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 18px;
	margin-bottom: 8px;
	background: var(--ctrlai-surface, #ffffff);
	border: 1px solid var(--ctrlai-border, #3d4a5d);
	border-radius: 12px;
	color: var(--ctrlai-text-soft, #e5e7eb);
	font-size: 14px;
}

.ctrlai-ranking-board .myCRED-leaderboard li a {
	color: var(--ctrlai-text, #0f172a) !important;
	text-decoration: none !important;
	font-weight: 600;
}

.ctrlai-ranking-board .myCRED-leaderboard li a:hover {
	color: var(--ctrlai-accent, #ffdd57) !important;
}

.ctrlai-ranking-board .mycred-leaderboard-none {
	color: var(--ctrlai-text-muted, #64748b);
	text-align: center;
	padding: 24px;
}

.ctrlai-tool-runs-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ctrlai-tool-runs-list__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid var(--ctrlai-border, #e5e7eb);
}

.ctrlai-tool-runs-list__link {
	font-weight: 600;
	color: var(--ctrlai-text, #111827);
	text-decoration: none;
}

.ctrlai-tool-runs-list__link:hover {
	text-decoration: underline;
}

.ctrlai-tool-runs-list__meta {
	font-size: 0.8125rem;
	color: var(--ctrlai-text-muted, #6b7280);
	white-space: nowrap;
}

@media (max-width: 768px) {
	.ctrlai-profile-hero {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.ctrlai-profile-badges,
	.ctrlai-profile-actions {
		justify-content: center;
	}

	.ctrlai-profile-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ctrlai-account-page .um-account-side ul {
		flex-direction: column;
	}
}