.message-toast[data-v-70f84857] {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 9999;
	pointer-events: none
}

.toast-content[data-v-70f84857] {
	padding: 12px 24px;
	background: var(--bg-color-inverse);
	color: var(--text-color-inverse);
	border-radius: 999px;
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap
}

.toast-enter-active[data-v-70f84857],
.toast-leave-active[data-v-70f84857] {
	transition: all .3s ease
}

.toast-enter-from[data-v-70f84857],
.toast-leave-to[data-v-70f84857] {
	opacity: 0;
	transform: translate(-50%, -50%) scale(.8)
}

@media (max-width: 480px) {
	.toast-content[data-v-70f84857] {
		padding: 10px 20px;
		font-size: 13px
	}
}

.captcha-modal-overlay[data-v-837dd205] {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2000;
	background: #2b2b2b80
}

.captcha-modal[data-v-837dd205] {
	background: var(--bg-color-primary);
	border-radius: 16px;
	width: 250px;
	max-width: 90vw;
	overflow: hidden;
	border: 1px solid var(--border-color-primary)
}

.modal-header[data-v-837dd205] {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 14px;
	border-bottom: 1px solid var(--border-color-primary);
	flex-shrink: 0;
	background: var(--bg-color-primary)
}

.modal-header h4[data-v-837dd205] {
	margin: 0;
	color: var(--text-color-primary)
}

.close-btn[data-v-837dd205] {
	width: 30px;
	height: 30px;
	background: var(--bg-color-secondary);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	cursor: pointer;
	padding: 5px;
	color: var(--text-color-primary);
	transition: all .2s ease
}

.close-btn[data-v-837dd205]:hover {
	color: var(--text-color-secondary);
	transform: scale(1.1);
	transition: all .2s ease
}

.close-btn svg[data-v-837dd205] {
	width: 16px;
	height: 16px
}

.captcha-content[data-v-837dd205] {
	padding: 12px;
	display: flex;
	flex-direction: column;
	align-items: center
}

.captcha-image-container[data-v-837dd205] {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 40px
}

.captcha-loading[data-v-837dd205],
.captcha-image[data-v-837dd205],
.captcha-error[data-v-837dd205] {
	width: 120px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--border-color-primary);
	background: var(--bg-color-secondary)
}

.captcha-loading[data-v-837dd205] {
	flex-direction: row;
	gap: 8px;
	color: var(--text-color-secondary);
	font-size: 14px
}

.loading-spinner[data-v-837dd205] {
	width: 20px;
	height: 20px;
	border: 2px solid var(--border-color-secondary);
	border-top: 2px solid var(--primary-color);
	border-radius: 50%;
	animation: spin-837dd205 1s linear infinite
}

@keyframes spin-837dd205 {
	0% {
		transform: rotate(0)
	}

	to {
		transform: rotate(360deg)
	}
}

.captcha-image[data-v-837dd205] {
	cursor: pointer;
	transition: opacity .2s ease;
	overflow: hidden
}

.captcha-image[data-v-837dd205]:hover {
	opacity: .8
}

.captcha-error[data-v-837dd205] {
	color: var(--primary-color);
	font-size: 14px
}

.captcha-image-wrapper.clickable[data-v-837dd205] {
	cursor: pointer;
	margin-bottom: 20px
}

.captcha-image-wrapper.clickable[data-v-837dd205]:hover {
	border-color: var(--primary-color);
	background: var(--bg-color-tertiary)
}

.captcha-inputs[data-v-837dd205] {
	display: flex;
	gap: 8px;
	justify-content: center;
	margin-bottom: 12px
}

.captcha-input-box[data-v-837dd205] {
	width: 40px;
	height: 40px;
	border: 1.5px solid var(--border-color-primary);
	border-radius: 5px;
	font-size: 18px;
	font-weight: 600;
	text-align: center;
	background: var(--bg-color-primary);
	color: var(--text-color-primary);
	caret-color: var(--primary-color);
	transition: all .2s ease;
	box-sizing: border-box
}

.captcha-input-box[data-v-837dd205]:focus {
	outline: none;
	border-color: var(--primary-color);
	background: var(--bg-color-primary)
}

.form-actions[data-v-837dd205] {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-bottom: 10px
}

.btn[data-v-837dd205] {
	padding: 8px 16px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-size: 14px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: all .2s;
	text-decoration: none
}

.btn[data-v-837dd205]:disabled {
	opacity: .5;
	cursor: not-allowed
}

.btn-primary[data-v-837dd205] {
	background-color: var(--primary-color);
	color: #fff
}

.btn-primary[data-v-837dd205]:hover:not(:disabled) {
	background-color: var(--primary-color-dark)
}

.btn-outline[data-v-837dd205] {
	background-color: transparent;
	color: var(--text-color-secondary);
	border: 1px solid var(--border-color-primary)
}

.btn-outline[data-v-837dd205]:hover:not(:disabled) {
	background-color: var(--bg-color-secondary)
}

.auth-modal-overlay[data-v-2214406b] {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--overlay-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2000;
	opacity: 0;
	transition: opacity .2s ease;
	width: 100vw;
	height: 100%
}

.auth-modal-overlay.animating[data-v-2214406b] {
	opacity: 1
}

.auth-modal[data-v-2214406b] {
	background: var(--bg-color-primary);
	border-radius: 16px;
	width: 90%;
	max-width: 400px;
	max-height: 90vh;
	overflow-y: auto;
	position: relative;
	transform: scale(.9);
	transition: transform .2s ease;
	box-shadow: 0 20px 40px var(--shadow-color)
}

.auth-modal.scale-in[data-v-2214406b] {
	transform: scale(1)
}

.close-btn[data-v-2214406b] {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 30px;
	height: 30px;
	background: var(--bg-color-secondary);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
	border: none;
	cursor: pointer;
	padding: 5px;
	color: var(--text-color-primary);
	transition: all .2s ease
}

.close-btn[data-v-2214406b]:hover {
	color: var(--text-color-secondary);
	transform: scale(1.1);
	transition: all .2s ease
}

.auth-content[data-v-2214406b] {
	padding: 32px
}

.auth-header[data-v-2214406b] {
	text-align: center;
	margin-bottom: 32px
}

.auth-title[data-v-2214406b] {
	font-size: 24px;
	font-weight: 700;
	color: var(--text-color-primary);
	margin: 0 0 8px
}

.auth-subtitle[data-v-2214406b] {
	font-size: 14px;
	color: var(--text-color-secondary);
	margin: 0
}

.auth-form[data-v-2214406b] {
	display: flex;
	flex-direction: column;
	gap: 20px
}

.form-group[data-v-2214406b] {
	display: flex;
	flex-direction: column;
	gap: 8px
}

.form-label[data-v-2214406b] {
	font-size: 14px;
	font-weight: 600;
	color: var(--text-color-primary)
}

.form-input[data-v-2214406b] {
	padding: 12px 16px;
	border: 1px solid transparent;
	border-radius: 8px;
	font-size: 16px;
	background: var(--bg-color-secondary);
	color: var(--text-color-primary);
	caret-color: var(--primary-color);
	transition: border-color .2s ease
}

.form-input[data-v-2214406b]:focus {
	outline: none;
	border-color: var(--primary-color)
}

.form-input.error[data-v-2214406b] {
	border-color: var(--primary-color)
}

.error-message[data-v-2214406b] {
	font-size: 12px;
	color: var(--primary-color);
	margin-top: -4px
}

.submit-error[data-v-2214406b] {
	padding: 12px;
	background: rgba(var(--primary-color), .1);
	border: 1px solid var(--primary-color);
	border-radius: 8px;
	color: var(--primary-color);
	font-size: 14px;
	text-align: center
}

.unified-message[data-v-2214406b] {
	display: flex;
	flex-direction: row;
	align-items: center;
	color: var(--primary-color);
	font-size: 14px;
	margin-bottom: 16px;
	text-align: center;
	justify-content: center;
	gap: 8px
}

.submit-btn[data-v-2214406b] {
	padding: 14px 24px;
	background: var(--primary-color);
	color: #fff;
	border: none;
	border-radius: 999px;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: all .2s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px
}

.submit-btn[data-v-2214406b]:hover {
	background-color: var(--primary-color-dark)
}

.submit-btn[data-v-2214406b]:disabled {
	opacity: .6;
	cursor: not-allowed;
	transform: none
}

.loading-spinner[data-v-2214406b] {
	width: 16px;
	height: 16px;
	border: 2px solid rgba(255, 255, 255, .3);
	border-top: 2px solid white;
	border-radius: 50%;
	animation: spin-2214406b 1s linear infinite
}

@keyframes spin-2214406b {
	0% {
		transform: rotate(0)
	}

	to {
		transform: rotate(360deg)
	}
}

.auth-switch[data-v-2214406b] {
	text-align: center;
	padding-top: 24px
}

.switch-text[data-v-2214406b] {
	font-size: 14px;
	color: var(--text-color-secondary);
	margin-right: 8px
}

.switch-btn[data-v-2214406b] {
	background: none;
	border: none;
	color: var(--primary-color);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: underline;
	transition: color .2s ease
}

.switch-btn[data-v-2214406b]:hover {
	opacity: .8
}

.forgot-password[data-v-2214406b] {
	text-align: center;
	margin-top: 8px
}

.forgot-btn[data-v-2214406b] {
	background: none;
	border: none;
	color: var(--text-color-secondary);
	font-size: 13px;
	cursor: pointer;
	transition: color .2s ease
}

.forgot-btn[data-v-2214406b]:hover {
	color: var(--primary-color)
}

.form-input-with-button[data-v-2214406b] {
	display: flex;
	gap: 8px
}

.form-input-with-button .form-input[data-v-2214406b] {
	flex: 1
}

.email-code-btn[data-v-2214406b] {
	padding: 12px 16px;
	border: none;
	border-radius: 8px;
	font-size: 14px;
	background: var(--primary-color);
	color: #fff;
	cursor: pointer;
	transition: all .2s ease;
	white-space: nowrap
}

.email-code-btn[data-v-2214406b]:hover:not(:disabled) {
	background-color: var(--primary-color-dark)
}

.email-code-btn[data-v-2214406b]:disabled {
	opacity: .5;
	cursor: not-allowed
}

@media (max-width: 480px) {
	.auth-content[data-v-2214406b] {
		padding: 24px
	}

	.auth-title[data-v-2214406b] {
		font-size: 20px
	}
}

.reset-modal-overlay[data-v-59b555a1] {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--overlay-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2000;
	opacity: 0;
	transition: opacity .2s ease;
	width: 100vw;
	height: 100%
}

.reset-modal-overlay.animating[data-v-59b555a1] {
	opacity: 1
}

.reset-modal[data-v-59b555a1] {
	background: var(--bg-color-primary);
	border-radius: 16px;
	width: 90%;
	max-width: 400px;
	max-height: 90vh;
	overflow-y: auto;
	position: relative;
	transform: scale(.9);
	transition: transform .2s ease;
	box-shadow: 0 20px 40px var(--shadow-color)
}

.reset-modal.scale-in[data-v-59b555a1] {
	transform: scale(1)
}

.close-btn[data-v-59b555a1] {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 30px;
	height: 30px;
	background: var(--bg-color-secondary);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
	border: none;
	cursor: pointer;
	padding: 5px;
	color: var(--text-color-primary);
	transition: all .2s ease
}

.close-btn[data-v-59b555a1]:hover {
	color: var(--text-color-secondary);
	transform: scale(1.1)
}

.reset-content[data-v-59b555a1] {
	padding: 32px
}

.reset-header[data-v-59b555a1] {
	text-align: center;
	margin-bottom: 32px
}

.reset-title[data-v-59b555a1] {
	font-size: 24px;
	font-weight: 700;
	color: var(--text-color-primary);
	margin: 0 0 8px
}

.reset-subtitle[data-v-59b555a1] {
	font-size: 14px;
	color: var(--text-color-secondary);
	margin: 0
}

.reset-form[data-v-59b555a1] {
	display: flex;
	flex-direction: column;
	gap: 20px
}

.form-group[data-v-59b555a1] {
	display: flex;
	flex-direction: column;
	gap: 8px
}

.form-label[data-v-59b555a1] {
	font-size: 14px;
	font-weight: 600;
	color: var(--text-color-primary)
}

.form-input[data-v-59b555a1] {
	padding: 12px 16px;
	border: 1px solid transparent;
	border-radius: 8px;
	font-size: 16px;
	background: var(--bg-color-secondary);
	color: var(--text-color-primary);
	caret-color: var(--primary-color);
	transition: border-color .2s ease
}

.form-input[data-v-59b555a1]:focus {
	outline: none;
	border-color: var(--primary-color)
}

.form-input.error[data-v-59b555a1] {
	border-color: var(--primary-color)
}

.error-message[data-v-59b555a1] {
	font-size: 12px;
	color: var(--primary-color);
	margin-top: -4px
}

.error-tip[data-v-59b555a1] {
	display: flex;
	flex-direction: row;
	align-items: center;
	color: var(--primary-color);
	font-size: 14px;
	text-align: center;
	justify-content: center;
	gap: 8px
}

.account-info[data-v-59b555a1] {
	padding: 12px 16px;
	background: var(--bg-color-secondary);
	border-radius: 8px;
	font-size: 14px
}

.account-label[data-v-59b555a1] {
	color: var(--text-color-secondary)
}

.account-value[data-v-59b555a1] {
	color: var(--text-color-primary);
	font-weight: 600;
	font-size: 16px
}

.submit-btn[data-v-59b555a1] {
	padding: 14px 24px;
	background: var(--primary-color);
	color: #fff;
	border: none;
	border-radius: 999px;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: all .2s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px
}

.submit-btn[data-v-59b555a1]:hover {
	background-color: var(--primary-color-dark)
}

.submit-btn[data-v-59b555a1]:disabled {
	opacity: .6;
	cursor: not-allowed
}

.loading-spinner[data-v-59b555a1] {
	width: 16px;
	height: 16px;
	border: 2px solid rgba(255, 255, 255, .3);
	border-top: 2px solid white;
	border-radius: 50%;
	animation: spin-59b555a1 1s linear infinite
}

@keyframes spin-59b555a1 {
	0% {
		transform: rotate(0)
	}

	to {
		transform: rotate(360deg)
	}
}

.reset-switch[data-v-59b555a1] {
	text-align: center;
	padding-top: 24px
}

.switch-btn[data-v-59b555a1] {
	background: none;
	border: none;
	color: var(--primary-color);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: underline;
	transition: color .2s ease
}

.switch-btn[data-v-59b555a1]:hover {
	opacity: .8
}

.form-input-with-button[data-v-59b555a1] {
	display: flex;
	gap: 8px
}

.form-input-with-button .form-input[data-v-59b555a1] {
	flex: 1
}

.email-code-btn[data-v-59b555a1] {
	padding: 12px 16px;
	border: none;
	border-radius: 8px;
	font-size: 14px;
	background: var(--primary-color);
	color: #fff;
	cursor: pointer;
	transition: all .2s ease;
	white-space: nowrap
}

.email-code-btn[data-v-59b555a1]:hover:not(:disabled) {
	background-color: var(--primary-color-dark)
}

.email-code-btn[data-v-59b555a1]:disabled {
	opacity: .5;
	cursor: not-allowed
}

@media (max-width: 480px) {
	.reset-content[data-v-59b555a1] {
		padding: 24px
	}

	.reset-title[data-v-59b555a1] {
		font-size: 20px
	}
}

.about-modal-overlay[data-v-e3f36cf8] {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--overlay-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2000;
	opacity: 0;
	transition: opacity .2s ease
}

.about-modal-overlay.animating[data-v-e3f36cf8] {
	opacity: 1
}

.about-modal[data-v-e3f36cf8] {
	background: var(--bg-color-primary);
	border-radius: 16px;
	width: 90%;
	max-width: 600px;
	max-height: 90vh;
	position: relative;
	transform: scale(.9);
	transition: transform .2s ease;
	box-shadow: 0 20px 40px var(--shadow-color);
	display: flex;
	flex-direction: column;
	overflow: hidden
}

.about-modal.scale-in[data-v-e3f36cf8] {
	transform: scale(1)
}

.about-header[data-v-e3f36cf8] {
	position: relative;
	background: var(--bg-color-primary);
	padding: 24px 32px;
	border-radius: 16px 16px 0 0;
	flex-shrink: 0
}

.header-content[data-v-e3f36cf8] {
	text-align: center
}

.close-btn[data-v-e3f36cf8] {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 32px;
	height: 32px;
	border: none;
	background: var(--bg-color-secondary);
	color: var(--text-color-primary);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 1;
	transition: all .2s ease
}

.close-btn[data-v-e3f36cf8]:hover {
	opacity: .8;
	transform: scale(1.1)
}

.about-content[data-v-e3f36cf8] {
	flex: 1;
	overflow-y: auto;
	padding: 32px
}

.logo-section[data-v-e3f36cf8] {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-bottom: 12px
}

.about-logo[data-v-e3f36cf8] {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--primary-color)
}

.about-logo img[data-v-e3f36cf8] {
	width: 120%;
	height: 100%;
	object-fit: contain
}

.about-title[data-v-e3f36cf8] {
	font-size: 28px;
	font-weight: 700;
	color: var(--text-color-primary);
	margin: 0
}

.version[data-v-e3f36cf8] {
	font-size: 14px;
	color: var(--text-color-secondary);
	background: var(--bg-color-secondary);
	padding: 4px 12px;
	border-radius: 12px;
	display: inline-block;
	margin: 0
}

.about-main[data-v-e3f36cf8] {
	display: flex;
	flex-direction: column;
	gap: 28px
}

.intro-section h3[data-v-e3f36cf8],
.features-section h3[data-v-e3f36cf8],
.author-section h3[data-v-e3f36cf8],
.api-section h3[data-v-e3f36cf8],
.privacy-section h3[data-v-e3f36cf8],
.copyright-section h3[data-v-e3f36cf8] {
	font-size: 18px;
	font-weight: 600;
	color: var(--text-color-primary);
	margin: 0 0 12px
}

.intro-section p[data-v-e3f36cf8] {
	font-size: 15px;
	line-height: 1.6;
	color: var(--text-color-secondary);
	margin: 0
}

.features-list[data-v-e3f36cf8] {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 8px
}

.features-list li[data-v-e3f36cf8] {
	font-size: 14px;
	color: var(--text-color-primary);
	padding: 8px 0
}

.author-link[data-v-e3f36cf8] {
	text-decoration: none;
	color: inherit;
	display: block;
	border-radius: 12px;
	padding: 12px;
	transition: all .3s ease
}

.author-link[data-v-e3f36cf8]:hover {
	background-color: var(--bg-color-secondary)
}

.author-info[data-v-e3f36cf8] {
	display: flex;
	align-items: center;
	gap: 16px
}

.author-avatar[data-v-e3f36cf8] {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--border-color-primary)
}

.author-details[data-v-e3f36cf8] {
	flex: 1
}

.author-name[data-v-e3f36cf8] {
	font-size: 16px;
	font-weight: 600;
	color: var(--text-color-primary);
	margin: 0 0 4px
}

.author-desc[data-v-e3f36cf8] {
	font-size: 14px;
	color: var(--text-color-secondary);
	margin: 0
}

.privacy-content p[data-v-e3f36cf8],
.copyright-content p[data-v-e3f36cf8] {
	font-size: 14px;
	line-height: 1.5;
	color: var(--text-color-secondary);
	margin: 0 0 12px
}

.privacy-content p[data-v-e3f36cf8]:last-child,
.copyright-content p[data-v-e3f36cf8]:last-child {
	margin-bottom: 0
}

.privacy-content strong[data-v-e3f36cf8],
.copyright-content strong[data-v-e3f36cf8] {
	color: var(--text-color-primary)
}

.about-footer[data-v-e3f36cf8] {
	text-align: center;
	margin-top: 32px;
	padding-top: 24px
}

.about-footer p[data-v-e3f36cf8] {
	font-size: 13px;
	color: var(--text-color-tertiary);
	margin: 0
}

.api-content p[data-v-e3f36cf8] {
	font-size: 14px;
	line-height: 1.5;
	color: var(--text-color-secondary);
	margin: 0 0 12px
}

.api-content p[data-v-e3f36cf8]:last-child {
	margin-bottom: 0
}

.api-content strong[data-v-e3f36cf8] {
	color: var(--text-color-primary)
}

.api-link[data-v-e3f36cf8] {
	color: var(--text-color-primary);
	font-weight: 450;
	text-decoration: none;
	transition: opacity .2s ease
}

.api-link[data-v-e3f36cf8]:hover {
	opacity: .8
}

.api-icon[data-v-e3f36cf8] {
	width: 16px;
	height: 16px;
	margin-right: 6px;
	vertical-align: middle;
	border-radius: 2px
}

@media (max-width: 768px) {
	.about-modal[data-v-e3f36cf8] {
		width: 100vw;
		height: 100vh;
		max-width: 100vw;
		max-height: 100vh;
		border-radius: 0;
		transform: scale(1)
	}

	.about-modal.scale-in[data-v-e3f36cf8] {
		transform: scale(1)
	}

	.close-btn[data-v-e3f36cf8] {
		position: fixed;
		top: 40px;
		left: 16px;
		z-index: 2001;
		background: transparent;
		color: var(--text-color-secondary);
		width: 36px;
		height: 36px
	}

	.close-btn[data-v-e3f36cf8]:hover {
		background: #9090904a;
		transform: scale(1)
	}

	.about-header[data-v-e3f36cf8] {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 2000;
		height: calc(72px + constant(safe-area-inset-top));
		height: calc(72px + env(safe-area-inset-top));
		padding: 12px 16px 12px 60px;
		background: var(--bg-color-primary);
		border-bottom: 1px solid var(--border-color-primary);
		border-radius: 0
	}

	.about-content[data-v-e3f36cf8] {
		flex: 1;
		overflow-y: auto;
		overflow-x: hidden;
		padding-top: calc(100px + constant(safe-area-inset-top));
		padding-top: calc(100px + env(safe-area-inset-top));
		padding-bottom: calc(32px + constant(safe-area-inset-bottom));
		padding-bottom: calc(32px + env(safe-area-inset-bottom));
		padding-left: 16px;
		padding-right: 16px;
		max-width: 100vw;
		box-sizing: border-box;
		-webkit-overflow-scrolling: touch;
		touch-action: auto;
		overscroll-behavior: contain
	}

	.logo-section[data-v-e3f36cf8] {
		flex-direction: row;
		padding-top: 12px;
		gap: 12px;
		margin-bottom: -4px
	}

	.about-title[data-v-e3f36cf8] {
		font-size: 24px
	}

	.features-list[data-v-e3f36cf8] {
		grid-template-columns: 1fr
	}

	.contact-links[data-v-e3f36cf8] {
		justify-content: center
	}
}

.auth-modal-overlay[data-v-895cc14b] {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--overlay-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2000;
	opacity: 0;
	transition: opacity .2s ease;
	width: 100vw;
	height: 100%
}

.auth-modal-overlay.animating[data-v-895cc14b] {
	opacity: 1
}

.auth-modal[data-v-895cc14b] {
	background: var(--bg-color-primary);
	border-radius: 16px;
	width: 90%;
	max-width: 400px;
	max-height: 90vh;
	overflow-y: auto;
	position: relative;
	transform: scale(.9);
	transition: transform .2s ease;
	box-shadow: 0 20px 40px #0000001a
}

.auth-modal.scale-in[data-v-895cc14b] {
	transform: scale(1)
}

.close-btn[data-v-895cc14b] {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 32px;
	height: 32px;
	border: none;
	background: var(--bg-color-secondary);
	color: var(--text-color-primary);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 1;
	transition: all .2s ease
}

.close-btn[data-v-895cc14b]:hover {
	opacity: .8;
	transform: scale(1.1)
}

.auth-content[data-v-895cc14b] {
	padding: 32px
}

.auth-header[data-v-895cc14b] {
	text-align: center;
	margin-bottom: 32px
}

.auth-title[data-v-895cc14b] {
	font-size: 24px;
	font-weight: 700;
	color: var(--text-color-primary);
	margin: 0 0 8px
}

.auth-subtitle[data-v-895cc14b] {
	font-size: 14px;
	color: var(--text-color-secondary);
	margin: 0
}

.auth-form[data-v-895cc14b] {
	display: flex;
	flex-direction: column;
	gap: 20px
}

.form-group[data-v-895cc14b] {
	display: flex;
	flex-direction: column;
	gap: 8px
}

.form-label[data-v-895cc14b] {
	font-size: 14px;
	font-weight: 600;
	color: var(--text-color-primary)
}

.form-input[data-v-895cc14b] {
	padding: 12px 16px;
	border: 1px solid transparent;
	border-radius: 8px;
	font-size: 16px;
	background: var(--bg-color-secondary);
	color: var(--text-color-primary);
	caret-color: var(--primary-color);
	transition: border-color .2s ease
}

.form-input[data-v-895cc14b]:focus {
	outline: none;
	border-color: var(--primary-color)
}

.form-input[data-v-895cc14b]:disabled {
	opacity: .6;
	cursor: not-allowed
}

.form-input[data-v-895cc14b]::placeholder {
	color: var(--text-color-tertiary)
}

.form-actions[data-v-895cc14b] {
	display: flex;
	justify-content: center;
	margin-top: 8px
}

.btn[data-v-895cc14b] {
	padding: 12px 24px;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	font-size: 14px;
	font-weight: 500;
	transition: all .2s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px
}

.btn[data-v-895cc14b]:disabled {
	opacity: .6;
	cursor: not-allowed
}

.submit-btn[data-v-895cc14b] {
	width: 100%;
	max-width: 200px;
	padding: 14px 24px;
	background: var(--primary-color);
	color: #fff;
	border: none;
	border-radius: 999px;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: all .2s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px
}

.submit-btn[data-v-895cc14b]:hover {
	background: var(--primary-color-dark)
}

.submit-btn[data-v-895cc14b]:disabled {
	opacity: .6;
	cursor: not-allowed;
	transform: none
}

.loading-spinner[data-v-895cc14b] {
	width: 16px;
	height: 16px;
	border: 2px solid rgba(255, 255, 255, .3);
	border-top: 2px solid white;
	border-radius: 50%;
	animation: spin-895cc14b 1s linear infinite
}

@keyframes spin-895cc14b {
	0% {
		transform: rotate(0)
	}

	to {
		transform: rotate(360deg)
	}
}

@media (max-width: 480px) {
	.auth-content[data-v-895cc14b] {
		padding: 24px
	}

	.auth-title[data-v-895cc14b] {
		font-size: 20px
	}
}

.shortcuts-modal-overlay[data-v-71c0ba38] {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--overlay-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2000;
	opacity: 0;
	transition: opacity .2s ease
}

.shortcuts-modal-overlay.animating[data-v-71c0ba38] {
	opacity: 1
}

.shortcuts-modal[data-v-71c0ba38] {
	background: var(--bg-color-primary);
	border-radius: 16px;
	width: 400px;
	min-height: 70vh;
	position: relative;
	transform: scale(.9);
	transition: transform .2s ease;
	box-shadow: 0 20px 40px var(--shadow-color);
	display: flex;
	flex-direction: column;
	overflow: hidden
}

.shortcuts-modal.scale-in[data-v-71c0ba38] {
	transform: scale(1)
}

.shortcuts-header[data-v-71c0ba38] {
	position: relative;
	background: var(--bg-color-primary);
	padding: 16px 32px;
	border-radius: 16px 16px 0 0;
	flex-shrink: 0;
	border-bottom: 1px solid var(--border-color-primary)
}

.header-content[data-v-71c0ba38] {
	text-align: center
}

.close-btn[data-v-71c0ba38] {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 32px;
	height: 32px;
	border: none;
	background: var(--bg-color-secondary);
	color: var(--text-color-primary);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 1;
	transition: all .2s ease
}

.close-btn[data-v-71c0ba38]:hover {
	opacity: .8;
	transform: scale(1.1)
}

.shortcuts-content[data-v-71c0ba38] {
	flex: 1;
	overflow-y: auto;
	padding: 12px 24px
}

.shortcuts-main[data-v-71c0ba38] {
	display: flex;
	flex-direction: column;
	gap: 0
}

.shortcuts-title[data-v-71c0ba38] {
	font-size: 16px;
	font-weight: 700;
	color: var(--text-color-primary);
	margin: 0
}

.shortcuts-list[data-v-71c0ba38] {
	display: flex;
	flex-direction: column;
	gap: 0
}

.shortcut-item[data-v-71c0ba38] {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 0;
	border-bottom: 1px solid var(--border-color-primary)
}

.shortcut-item[data-v-71c0ba38]:last-child {
	border-bottom: none
}

.shortcut-desc[data-v-71c0ba38] {
	font-size: 16px;
	color: var(--text-color-secondary);
	flex: 1;
	font-weight: 400
}

.shortcut-key[data-v-71c0ba38] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 24px;
	padding: 0 8px;
	background: var(--text-color-primary);
	border-radius: 5px;
	font-size: 15px;
	font-weight: 600;
	color: var(--bg-color-primary);
	font-family: var(--font-family)
}

.plus[data-v-71c0ba38] {
	margin: 0 4px
}

@media (max-width: 768px) {
	.shortcuts-modal[data-v-71c0ba38] {
		width: 300px
	}
}

.confirm-dialog-overlay[data-v-12471191] {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--overlay-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000
}

.confirm-dialog[data-v-12471191] {
	background: var(--bg-color-primary);
	border-radius: 12px;
	max-width: 400px;
	width: 90%;
	max-height: 90vh;
	overflow: hidden;
	border: 1px solid var(--border-color-primary)
}

.dialog-header[data-v-12471191] {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 24px 16px;
	border-bottom: 1px solid var(--border-color-primary)
}

.dialog-title[data-v-12471191] {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	color: var(--text-color-primary)
}

.close-btn[data-v-12471191] {
	background: none;
	border: none;
	color: var(--text-color-secondary);
	cursor: pointer;
	padding: 4px 8px;
	border-radius: 4px;
	transition: all .2s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	line-height: 1
}

.close-btn[data-v-12471191]:hover {
	color: var(--text-color-primary)
}

.dialog-content[data-v-12471191] {
	padding: 24px
}

.dialog-message[data-v-12471191] {
	margin: 0;
	font-size: 16px;
	line-height: 1.5;
	color: var(--text-color-primary);
	white-space: pre-line
}

.dialog-actions[data-v-12471191] {
	padding: 16px 24px 24px
}

.form-actions[data-v-12471191] {
	display: flex;
	gap: 12px;
	justify-content: flex-end
}

.btn[data-v-12471191] {
	padding: 8px 16px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-size: 14px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: all .2s;
	text-decoration: none
}

.btn[data-v-12471191]:disabled {
	opacity: .5;
	cursor: not-allowed
}

.btn-primary[data-v-12471191] {
	background-color: var(--primary-color);
	color: #fff
}

.btn-primary[data-v-12471191]:hover:not(:disabled) {
	background-color: var(--primary-color-dark)
}

.btn-outline[data-v-12471191] {
	background-color: transparent;
	color: var(--text-color-secondary);
	border: 1px solid var(--border-color-primary)
}

.btn-outline[data-v-12471191]:hover:not(:disabled) {
	background-color: var(--bg-color-secondary)
}

.modal-overlay[data-v-f5151d96] {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #00000036;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000
}

.modal-container[data-v-f5151d96] {
	background: var(--bg-color-primary);
	border-radius: 12px;
	box-shadow: 0 20px 25px -5px #0000001a, 0 10px 10px -5px #0000000a;
	min-width: 320px;
	max-height: 90vh;
	overflow: hidden;
	border: 1px solid var(--border-color-primary)
}

.modal-header[data-v-f5151d96] {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 24px 16px;
	border-bottom: 1px solid var(--border-color-primary)
}

.modal-title[data-v-f5151d96] {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	color: var(--text-color-primary)
}

.close-btn[data-v-f5151d96] {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 32px;
	height: 32px;
	border: none;
	background: var(--bg-color-secondary);
	color: var(--text-color-primary);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 1;
	transition: all .2s ease
}

.close-btn[data-v-f5151d96]:hover {
	opacity: .8;
	transform: scale(1.1)
}

.modal-content[data-v-f5151d96] {
	padding: 24px
}

.security-options[data-v-f5151d96] {
	display: flex;
	flex-direction: column;
	gap: 16px
}

.security-item[data-v-f5151d96] {
	display: flex;
	align-items: center;
	padding: 16px;
	border: 1px solid var(--border-color-primary);
	border-radius: 8px;
	cursor: pointer;
	transition: all .2s ease;
	background: var(--bg-color-primary)
}

.security-item[data-v-f5151d96]:hover {
	background: var(--bg-color-secondary);
	border-color: var(--border-color-secondary)
}

.security-item.danger[data-v-f5151d96]:hover {
	background: #ef44440d;
	border-color: var(--danger-color)
}

.item-icon[data-v-f5151d96] {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 16px;
	color: var(--text-color-secondary)
}

.item-content[data-v-f5151d96] {
	flex: 1
}

.item-title[data-v-f5151d96] {
	font-size: 16px;
	font-weight: 500;
	color: var(--text-color-primary);
	margin-bottom: 4px
}

.item-desc[data-v-f5151d96] {
	font-size: 14px;
	color: var(--text-color-secondary)
}

.verified-badge[data-v-a22c0b34] {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: var(--primary-color);
	border-radius: 50%;
	margin-left: 4px;
	flex-shrink: 0;
	cursor: pointer;
	color: #fff;
	padding: 2px
}

.verified-badge svg[data-v-a22c0b34] {
	width: 100% !important;
	height: 100% !important;
	max-width: 100%;
	max-height: 100%
}

.verified-badge--mini[data-v-a22c0b34] {
	width: 7px;
	height: 7px;
	margin-left: 0
}

.verified-badge--small[data-v-a22c0b34] {
	width: 10px;
	height: 10px;
	margin-left: 0
}

.verified-badge--medium[data-v-a22c0b34] {
	width: 13px;
	height: 13px;
	margin-left: 0
}

.verified-badge--large[data-v-a22c0b34] {
	width: 16px;
	height: 16px
}

.verified-badge--official[data-v-a22c0b34] {
	background-image: linear-gradient(90deg, transparent 0%, transparent 40%, rgba(255, 255, 255, .3) 50%, transparent 60%, transparent 100%);
	background-size: 200% 100%;
	background-repeat: no-repeat;
	animation: reflect-a22c0b34 3s ease-in-out infinite;
	animation-delay: 1s
}

@keyframes reflect-a22c0b34 {
	0% {
		background-position: -200% center
	}

	50% {
		background-position: 200% center
	}

	to {
		background-position: 200% center
	}
}

.verified-badge--personal[data-v-a22c0b34] {
	background-color: var(--secondary-color)
}

.verified-badge .tooltip[data-v-a22c0b34] {
	position: absolute;
	left: 50%;
	bottom: 100%;
	transform: translate(-50%);
	margin-bottom: 8px;
	background: var(--bg-color-primary);
	color: var(--text-color-primary);
	padding: 4px 8px;
	border-radius: 6px;
	font-size: 12px;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s ease, visibility .2s ease;
	box-shadow: 0 2px 8px #00000026;
	border: 1px solid var(--border-color-primary);
	z-index: 200;
	pointer-events: none
}

@media (max-width: 768px) {
	.verified-badge .tooltip[data-v-a22c0b34] {
		display: none
	}
}

.verified-badge:hover .tooltip[data-v-a22c0b34] {
	opacity: 1;
	visibility: visible
}

[contenteditable][data-v-6a571e2d] {
	outline: none;
	white-space: normal
}

[contenteditable][data-v-6a571e2d]:empty:before {
	content: attr(placeholder);
	color: var(--text-color-secondary, #999);
	pointer-events: none;
	display: block;
	opacity: .6
}

[contenteditable][data-v-6a571e2d] p {
	margin: 0;
	padding: 0;
	line-height: inherit
}

[contenteditable][data-v-6a571e2d] .mention-link {
	color: var(--text-color-tag);
	text-decoration: none;
	font-weight: 500;
	cursor: pointer;
	transition: color .2s ease;
	background: none;
	border: none;
	padding: 0;
	display: inline
}

[contenteditable][data-v-6a571e2d] .mention-link:hover {
	color: var(--text-color-tag);
	opacity: .8
}

[contenteditable][data-v-6a571e2d] .mention-link:active {
	color: var(--text-color-tag);
	opacity: .6
}

.auth-modal-overlay[data-v-4d94e464] {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--overlay-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2000;
	opacity: 0;
	transition: opacity .2s ease;
	width: 100vw;
	height: 100%
}

.auth-modal-overlay.animating[data-v-4d94e464] {
	opacity: 1
}

.auth-modal[data-v-4d94e464] {
	background: var(--bg-color-primary);
	border-radius: 16px;
	width: 90%;
	max-width: 500px;
	max-height: 90vh;
	overflow-y: auto;
	position: relative;
	transform: scale(.9);
	transition: transform .2s ease;
	box-shadow: 0 20px 40px #0000001a
}

.auth-modal.scale-in[data-v-4d94e464] {
	transform: scale(1)
}

.close-btn[data-v-4d94e464] {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 32px;
	height: 32px;
	border: none;
	background: var(--bg-color-secondary);
	color: var(--text-color-primary);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 1;
	transition: all .2s ease
}

.close-btn[data-v-4d94e464]:hover {
	opacity: .8;
	transform: scale(1.1)
}

.auth-content[data-v-4d94e464] {
	padding: 32px
}

.auth-header[data-v-4d94e464] {
	text-align: center;
	margin-bottom: 32px
}

.auth-title[data-v-4d94e464] {
	font-size: 24px;
	font-weight: 700;
	color: var(--text-color-primary);
	margin: 0 0 8px
}

.auth-subtitle[data-v-4d94e464] {
	font-size: 14px;
	color: var(--text-color-secondary);
	margin: 0
}

.auth-form[data-v-4d94e464] {
	display: flex;
	flex-direction: column
}

.form-group[data-v-4d94e464] {
	margin-bottom: 20px
}

.form-group[data-v-4d94e464]:last-child {
	margin-bottom: 0
}

.form-label[data-v-4d94e464] {
	display: block;
	margin-bottom: 10px;
	font-weight: 700;
	color: var(--text-color-primary);
	font-size: 15px
}

.verification-types[data-v-4d94e464] {
	display: flex;
	flex-direction: column;
	gap: 12px
}

.verification-type[data-v-4d94e464] {
	display: flex;
	align-items: center;
	padding: 16px;
	border: 2px solid var(--border-color-primary);
	border-radius: 8px;
	cursor: pointer;
	transition: all .2s ease;
	background: var(--bg-color-primary)
}

.verification-type[data-v-4d94e464]:hover {
	border-color: var(--primary-color);
	background: var(--bg-color-secondary)
}

.verification-type.active[data-v-4d94e464] {
	border-color: var(--primary-color);
	background: rgba(var(--primary-color-rgb), .05)
}

.type-icon[data-v-4d94e464] {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 12px
}

.type-content[data-v-4d94e464] {
	flex: 1
}

.type-title[data-v-4d94e464] {
	font-size: 16px;
	font-weight: 600;
	color: var(--text-color-primary);
	margin-bottom: 4px
}

.type-desc[data-v-4d94e464] {
	font-size: 14px;
	color: var(--text-color-secondary)
}

.verification-form[data-v-4d94e464] {
	display: flex;
	flex-direction: column;
	gap: 10px
}

.form-input[data-v-4d94e464] {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--border-color-primary);
	border-radius: 4px;
	font-size: 14px;
	box-sizing: border-box;
	background-color: var(--bg-color-primary);
	color: var(--text-color-primary);
	caret-color: var(--primary-color);
	transition: background-color .2s ease, border-color .2s ease
}

.form-input[data-v-4d94e464]:focus {
	border-color: var(--primary-color);
	outline: none
}

.form-input[data-v-4d94e464]:disabled {
	opacity: .6;
	cursor: not-allowed
}

.form-input[data-v-4d94e464]::placeholder {
	color: var(--text-color-tertiary)
}

.form-textarea[data-v-4d94e464] {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--border-color-primary);
	border-radius: 4px;
	font-size: 14px;
	box-sizing: border-box;
	background-color: var(--bg-color-primary);
	color: var(--text-color-primary);
	caret-color: var(--primary-color);
	transition: background-color .2s ease, border-color .2s ease;
	min-height: 80px;
	font-family: inherit;
	line-height: 1.5;
	white-space: pre-wrap;
	word-wrap: break-word
}

.form-textarea[data-v-4d94e464]:focus {
	border-color: var(--primary-color);
	outline: none
}

.form-textarea[data-v-4d94e464]:empty:before {
	color: var(--text-color-tertiary)
}

.loading-container[data-v-4d94e464] {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 60px 20px;
	text-align: center
}

.loading-container p[data-v-4d94e464] {
	margin-top: 16px;
	color: var(--text-color-secondary);
	font-size: 14px
}

.verification-status[data-v-4d94e464] {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 10px;
	text-align: center
}

.status-icon[data-v-4d94e464] {
	margin-bottom: 20px;
	color: var(--primary-color)
}

.status-text[data-v-4d94e464] {
	font-size: 16px;
	color: var(--text-color-secondary);
	text-align: center;
	margin: 0 0 16px
}

.revoke-btn[data-v-4d94e464] {
	padding: 8px 16px;
	background: transparent;
	color: var(--primary-color);
	border: 1px solid var(--primary-color);
	border-radius: 20px;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: all .2s ease;
	min-height: 36px;
	display: flex;
	align-items: center;
	justify-content: center
}

.revoke-btn[data-v-4d94e464]:hover {
	scale: 1.05
}

.revoke-btn[data-v-4d94e464]:disabled {
	opacity: .6;
	cursor: not-allowed;
	transform: none
}

.form-textarea[data-v-4d94e464]:disabled {
	opacity: .6;
	cursor: not-allowed
}

.form-textarea[data-v-4d94e464]::placeholder {
	color: var(--text-color-tertiary)
}

.form-actions[data-v-4d94e464] {
	display: flex;
	justify-content: center;
	margin-top: 8px
}

.submit-btn[data-v-4d94e464] {
	width: 100%;
	max-width: 200px;
	padding: 14px 24px;
	background: var(--primary-color);
	color: #fff;
	border: none;
	border-radius: 999px;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: all .2s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px
}

.submit-btn[data-v-4d94e464]:hover {
	background: var(--primary-color-dark)
}

.submit-btn[data-v-4d94e464]:disabled {
	opacity: .6;
	cursor: not-allowed;
	transform: none
}

.loading-spinner[data-v-4d94e464] {
	width: 16px;
	height: 16px;
	border: 2px solid rgba(255, 255, 255, .3);
	border-top: 2px solid white;
	border-radius: 50%;
	animation: spin-4d94e464 1s linear infinite
}

@keyframes spin-4d94e464 {
	0% {
		transform: rotate(0)
	}

	to {
		transform: rotate(360deg)
	}
}

@media (max-width: 480px) {
	.auth-content[data-v-4d94e464] {
		padding: 24px
	}

	.auth-title[data-v-4d94e464] {
		font-size: 20px
	}

	.verification-form[data-v-4d94e464] {
		padding: 16px
	}
}

.app-container {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	width: 100vw;
	min-width: 100%;
	background-color: var(--bg-color-primary);
	box-sizing: border-box;
	position: relative;
	overflow-x: hidden;
	transition: background .2s ease
}

body {
	margin: 0;
	padding: 0
}

.dropdown-container[data-v-ba937890] {
	position: relative
}

.dropdown-trigger[data-v-ba937890] {
	cursor: pointer
}

.dropdown-menu[data-v-ba937890] {
	position: absolute;
	z-index: 1000;
	min-width: 200px;
	background: var(--bg-color-primary);
	border: 1px solid var(--border-color-primary);
	border-radius: 8px;
	box-shadow: 0 4px 12px var(--shadow-color);
	padding: 2px 0;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px)
}

.dropdown-down[data-v-ba937890] {
	top: 100%;
	margin-top: 4px;
	right: 0
}

.dropdown-up[data-v-ba937890] {
	bottom: 100%;
	margin-bottom: 4px;
	right: 0
}

.dropdown-enter-active[data-v-ba937890],
.dropdown-leave-active[data-v-ba937890] {
	transition: all .2s ease;
	transform-origin: top right
}

.dropdown-enter-from[data-v-ba937890],
.dropdown-leave-to[data-v-ba937890] {
	opacity: 0;
	transform: scale(.95) translateY(-8px)
}

.dropdown-up.dropdown-enter-active[data-v-ba937890],
.dropdown-up.dropdown-leave-active[data-v-ba937890] {
	transform-origin: bottom right
}

.dropdown-up.dropdown-enter-from[data-v-ba937890],
.dropdown-up.dropdown-leave-to[data-v-ba937890] {
	opacity: 0;
	transform: scale(.95) translateY(8px)
}

.dropdown-item[data-v-d48d6a92] {
	cursor: pointer;
	transition: background-color .2s ease;
	border-radius: 8px;
	margin: 2px 4px;
	box-sizing: border-box
}

.dropdown-item[data-v-d48d6a92]:hover {
	background: var(--bg-color-secondary)
}

.dropdown-item-content[data-v-d48d6a92] {
	display: flex;
	align-items: center;
	padding: 12px 16px;
	color: var(--text-color-primary);
	font-size: 16px;
	line-height: 1
}

.dropdown-divider[data-v-51cb80d1] {
	height: 1px;
	background: var(--border-color-primary);
	margin: 4px 16px
}

.theme-switcher-menu-item[data-v-d42a1dc8] {
	padding: 8px 4px;
	margin: 4px;
	border-radius: 999px
}

.theme-item-content[data-v-d42a1dc8] {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 4px 10px;
	gap: 20px
}

.theme-label[data-v-d42a1dc8] {
	font-size: 16px;
	color: var(--text-color-primary);
	font-weight: 400;
	flex-shrink: 0
}

.theme-toggle-container[data-v-d42a1dc8] {
	display: inline-block;
	flex-shrink: 0
}

.theme-toggle-track[data-v-d42a1dc8] {
	position: relative;
	display: flex;
	background: var(--bg-color-secondary);
	border-radius: 16px;
	padding: 2px;
	border: 1px solid var(--border-color-primary)
}

.theme-option-wrapper[data-v-d42a1dc8] {
	position: relative;
	display: inline-block
}

.theme-toggle-indicator[data-v-d42a1dc8] {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 26px;
	height: 26px;
	background: var(--bg-color-primary);
	border-radius: 50%;
	transition: transform .3s cubic-bezier(.4, 0, .2, 1);
	box-shadow: 0 1px 3px #0000001a;
	z-index: 1
}

.theme-toggle-option[data-v-d42a1dc8] {
	position: relative;
	width: 28px;
	height: 28px;
	padding: 0;
	border: none;
	background: transparent;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all .2s ease;
	z-index: 2;
	color: var(--text-color-tertiary)
}

.theme-toggle-option[data-v-d42a1dc8]:hover {
	color: var(--text-color-secondary)
}

.theme-toggle-option.active[data-v-d42a1dc8] {
	color: var(--text-color-primary)
}

.tooltip[data-v-d42a1dc8] {
	position: absolute;
	bottom: 35px;
	left: 50%;
	transform: translate(-50%);
	background: var(--bg-color-primary);
	color: var(--text-color-primary);
	padding: 4px 8px;
	border-radius: 6px;
	font-size: 12px;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s ease, visibility .2s ease;
	box-shadow: 0 2px 8px #00000026;
	border: 1px solid var(--border-color-primary);
	z-index: 10;
	pointer-events: none
}

.theme-option-wrapper:hover .tooltip[data-v-d42a1dc8] {
	opacity: 1;
	visibility: visible
}

.theme-toggle-option[data-v-d42a1dc8] svg {
	display: block;
	margin: auto
}

[data-theme=dark] .theme-toggle-indicator[data-v-d42a1dc8] {
	box-shadow: 0 1px 3px #0000004d
}

.color-picker-menu-item[data-v-e96bd4be] {
	padding: 4px;
	margin: 0 5px;
	border-radius: 999px
}

.color-item-content[data-v-e96bd4be] {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 4px 10px;
	gap: 20px
}

.color-label[data-v-e96bd4be] {
	font-size: 16px;
	color: var(--text-color-primary);
	font-weight: 400;
	flex-shrink: 0
}

.color-picker-container[data-v-e96bd4be] {
	display: inline-block;
	flex-shrink: 0
}

.color-picker-wrapper[data-v-e96bd4be] {
	position: relative;
	display: inline-block
}

.color-input[data-v-e96bd4be] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	pointer-events: none
}

.color-display[data-v-e96bd4be] {
	width: 32px;
	margin-right: 20px;
	height: 32px;
	border-radius: 50%;
	border: 1px solid var(--border-color-secondary);
	cursor: pointer;
	transition: box-shadow .2s ease, transform .2s ease
}

.color-display[data-v-e96bd4be]:hover {
	transform: scale(1.05)
}

.color-display[data-v-e96bd4be]:active {
	transform: scale(.9);
	box-shadow: 0 0 0 1px var(--primary-color)
}

.sidebar[data-v-eb05932e] {
	display: flex;
	flex-direction: column;
	width: 228px;
	background: var(--bg-color-primary);
	position: fixed;
	z-index: 100;
	left: max(calc(50% - 750px), 0px);
	top: 72px;
	height: calc(100vh - 72px);
	overflow-y: auto;
	padding: 12px;
	justify-content: space-between;
	transition: border-color .2s ease, background-color .2s ease
}

.sidebar-menu[data-v-eb05932e] {
	flex: 1;
	list-style: none;
	padding: 0;
	margin: 0;
	left: 16px
}

.sidebar-menu li[data-v-eb05932e] {
	display: flex;
	align-items: center;
	font-size: 16px;
	font-weight: 700;
	height: 48px;
	margin-bottom: 8px
}

.sidebar-footer-item[data-v-eb05932e] {
	display: flex;
	align-items: center;
	font-size: 16px;
	font-weight: 700;
	height: 48px;
	margin-bottom: 8px;
	border-radius: 999px;
	list-style: none;
	cursor: pointer
}

.sidebar-footer-item[data-v-eb05932e]:hover {
	background: var(--bg-color-secondary)
}

.sidebar-link[data-v-eb05932e] {
	display: flex;
	align-items: center;
	width: 100%;
	height: 100%;
	padding: 0 16px;
	color: var(--text-color-primary);
	text-decoration: none;
	border-radius: 999px;
	cursor: pointer
}

.sidebar-link[data-v-eb05932e]:hover {
	background: var(--bg-color-secondary)
}

.sidebar-link.active-link[data-v-eb05932e] {
	background: var(--bg-color-secondary);
	transition: border-color .2s ease, background-color .2s ease
}

.sidebar-footer-item .sidebar-link[data-v-eb05932e]:hover {
	background: transparent
}

.icon[data-v-eb05932e] {
	color: var(--text-color-tertiary)
}

.active[data-v-eb05932e] {
	color: var(--text-color-primary)
}

.sidebar-icon[data-v-eb05932e] {
	margin-right: 16px;
	display: flex;
	align-items: center
}

.avatar-icon[data-v-eb05932e] {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	object-fit: cover
}

.sidebar-footer[data-v-eb05932e] {
	margin-top: auto;
	margin-bottom: 20px
}

.theme-switcher-container[data-v-eb05932e] {
	padding: 0
}

.login-btn[data-v-eb05932e] {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 0 16px;
	background: var(--primary-color);
	color: #fff;
	border: none;
	border-radius: 999px;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer
}

.notification-item[data-v-eb05932e] {
	position: relative
}

.notification-item .count[data-v-eb05932e] {
	position: absolute;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background-color: var(--danger-color);
	color: #fff;
	font-size: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	top: 15px;
	left: 100px
}

@media (max-width: 960px) {
	.sidebar[data-v-eb05932e] {
		display: none
	}
}

.search-dropdown[data-v-309c9a58] {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: var(--bg-color-primary);
	border: 1px solid var(--border-color-primary);
	border-radius: 12px;
	box-shadow: 0 4px 20px #0000001a;
	z-index: 1001;
	margin-top: 8px;
	max-height: 300px;
	overflow-y: auto
}

.dropdown-content[data-v-309c9a58] {
	padding: 16px
}

.history-header[data-v-309c9a58] {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 5px
}

.history-title[data-v-309c9a58] {
	font-size: 12px;
	font-weight: 500;
	color: var(--text-color-tertiary)
}

.header-actions[data-v-309c9a58] {
	display: flex;
	align-items: center;
	gap: 12px
}

.action-btn[data-v-309c9a58] {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 4px 8px;
	border-radius: 4px;
	cursor: pointer;
	transition: all .2s ease;
	font-size: 13px;
	color: var(--text-color-secondary)
}

.action-text[data-v-309c9a58] {
	font-size: 13px;
	color: var(--text-color-secondary)
}

.action-btn[data-v-309c9a58]:hover,
.action-btn:hover .action-text[data-v-309c9a58] {
	color: var(--text-color-primary)
}

.icon-only-btn[data-v-309c9a58] {
	padding: 4px;
	width: 24px;
	height: 24px;
	justify-content: center
}

.history-list[data-v-309c9a58] {
	display: flex;
	flex-wrap: wrap;
	gap: 8px
}

.history-tag[data-v-309c9a58] {
	display: inline-flex;
	align-items: center;
	padding: 6px 12px;
	background: var(--bg-color-secondary);
	border-radius: 999px;
	cursor: pointer;
	max-width: 200px;
	position: relative
}

.history-tag.edit-mode[data-v-309c9a58] {
	background: transparent;
	border: 1px solid var(--border-color-secondary);
	padding-right: 32px
}

.history-tag.edit-mode[data-v-309c9a58]:hover {
	color: var(--text-color-primary)
}

.delete-btn[data-v-309c9a58] {
	position: absolute;
	right: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	color: var(--text-color-secondary);
	cursor: pointer;
	border-radius: 50%
}

.delete-btn[data-v-309c9a58]:hover {
	color: var(--text-color-primary);
	background-color: var(--bg-color-secondary)
}

.history-text[data-v-309c9a58] {
	font-size: 13px;
	color: var(--text-color-secondary);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap
}

.history-text[data-v-309c9a58]:hover {
	color: var(--text-color-primary)
}

.no-history[data-v-309c9a58] {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 24px 12px
}

.no-history-text[data-v-309c9a58] {
	font-size: 14px;
	color: var(--text-color-secondary)
}

.search-dropdown[data-v-309c9a58]::-webkit-scrollbar {
	width: 4px
}

.search-dropdown[data-v-309c9a58]::-webkit-scrollbar-track {
	background: transparent
}

.search-dropdown[data-v-309c9a58]::-webkit-scrollbar-thumb {
	background: var(--border-color-secondary);
	border-radius: 2px
}

.search-dropdown[data-v-309c9a58]::-webkit-scrollbar-thumb:hover {
	background: var(--border-color-primary)
}

header[data-v-618780b1] {
	height: 72px;
	background: var(--bg-color-primary);
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	width: 100%;
	transition: border-color .2s ease, background-color .2s ease
}

.header-container[data-v-618780b1] {
	max-width: 1500px;
	margin: 0 auto;
	height: 100%;
	padding: 0 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
	width: 100%
}

.logo[data-v-618780b1] {
	width: 68.32px;
	height: 32px;
	color: var(--button-text-color);
	background: var(--primary-color);
	border-radius: 999px;
	display: flex;
	align-items: center;
	justify-content: center
}

img[data-v-618780b1] {
	width: 68.32px;
	height: 32px
}

.header-right[data-v-618780b1] {
	display: flex;
	align-items: center
}

.btn-base[data-v-618780b1],
.circle-btn[data-v-618780b1],
.cancel-btn[data-v-618780b1] {
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	background: transparent
}

.btn-base[data-v-618780b1]:hover,
.circle-btn[data-v-618780b1]:hover,
.cancel-btn[data-v-618780b1]:hover {
	background: var(--bg-color-secondary)
}

.circle-btn[data-v-618780b1] {
	border-radius: 50%;
	width: 40px;
	height: 40px;
	border: none
}

.btn-icon[data-v-618780b1] {
	color: var(--text-color-secondary)
}

.btn-icon[data-v-618780b1]:hover,
.circle-btn:hover .btn-icon[data-v-618780b1] {
	color: var(--text-color-primary)
}

.search-row[data-v-618780b1] {
	display: flex;
	align-items: center;
	flex: 1;
	min-width: 0;
	height: 40px
}

.search-row.large-screen[data-v-618780b1] {
	width: 465px;
	max-width: 500px;
	margin: 0 auto;
	flex-grow: 0
}

@media (min-width: 696px) {
	.header-container[data-v-618780b1] {
		justify-content: space-between;
		position: relative
	}

	.header-right[data-v-618780b1] {
		margin-left: auto
	}

	.search-row.large-screen[data-v-618780b1] {
		position: absolute;
		left: 50%;
		transform: translate(-50%);
		z-index: 1
	}
}

.search-bar-container[data-v-618780b1] {
	flex: 1;
	min-width: 0;
	position: relative
}

.search-bar[data-v-618780b1] {
	display: flex;
	align-items: center;
	background: var(--bg-color-secondary);
	border-radius: 999px;
	height: 40px;
	padding: 0 15px;
	position: relative;
	box-sizing: border-box;
	transition: background-color .2s ease
}

.search-bar input[data-v-618780b1] {
	border: none;
	outline: none;
	background: transparent;
	flex: 1 1 0%;
	font-size: 16px;
	min-width: 0;
	color: var(--text-color-primary);
	caret-color: var(--primary-color);
	padding-right: 80px
}

.search-bar input[data-v-618780b1]::placeholder {
	color: var(--text-color-quaternary)
}

.input-controls[data-v-618780b1] {
	position: absolute;
	right: 12px;
	display: flex;
	align-items: center;
	width: 60px
}

.icon-btn[data-v-618780b1],
.clear-btn[data-v-618780b1],
.search-btn[data-v-618780b1] {
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer
}

.clear-btn[data-v-618780b1] {
	visibility: hidden;
	margin-right: 8px
}

.search-btn[data-v-618780b1] {
	margin-left: auto
}

.cancel-btn[data-v-618780b1] {
	text-align: center;
	width: 64px;
	height: 40px;
	font-size: 16px;
	color: var(--text-color-secondary);
	margin-left: 12px;
	border-radius: 999px;
	flex-shrink: 0
}

.cancel-btn[data-v-618780b1]:hover {
	color: var(--text-color-primary)
}

.theme-switcher-container[data-v-618780b1] {
	padding: 0
}

.theme-label[data-v-618780b1] {
	font-size: 14px;
	color: var(--text-color-primary);
	font-weight: 500
}

[data-v-618780b1] .header-dropdown {
	right: 0;
	left: auto
}

.footer[data-v-d84186ac] {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 48px;
	background-color: var(--bg-color-primary);
	z-index: 999;
	max-width: 1440px;
	margin: 0 auto;
	width: 100%;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom)
}

.footer-container[data-v-d84186ac] {
	max-width: 1200px;
	margin: 0 auto;
	height: 100%;
	padding: 0 20px;
	box-sizing: border-box;
	width: 100%
}

@media (max-width: 960px) {
	.footer-container[data-v-d84186ac] {
		padding: 0 16px
	}
}

@media (max-width: 768px) {
	.footer-container[data-v-d84186ac] {
		padding: 0 12px
	}
}

@media (max-width: 480px) {
	.footer-container[data-v-d84186ac] {
		padding: 0 8px
	}
}

.footer-list[data-v-d84186ac] {
	width: 100%;
	height: 100%;
	position: relative
}

.footer-list ul[data-v-d84186ac] {
	display: flex;
	align-items: center;
	justify-content: space-around;
	height: 100%;
	width: 100%;
	padding: 0;
	margin: 0
}

.footer-list ul li[data-v-d84186ac] {
	flex: 1;
	list-style: none;
	height: 100%;
	padding: 0;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center
}

.footer-list ul li a[data-v-d84186ac],
.footer-list ul li .footer-link[data-v-d84186ac] {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	text-decoration: none
}

.icon[data-v-d84186ac] {
	color: var(--text-color-tertiary)
}

.active[data-v-d84186ac] {
	color: var(--text-color-primary)
}

.notification-item .count[data-v-d84186ac] {
	position: absolute;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background-color: var(--danger-color);
	color: #fff;
	font-size: 11px;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	top: 3px;
	right: 25%
}

.layout-container[data-v-74b77e4c] {
	display: flex;
	min-height: 100vh;
	background-color: var(--bg-color-primary);
	min-width: 320px;
	margin: 0;
	width: 100%;
	overflow-x: hidden;
	position: relative;
	box-sizing: border-box;
	transition: background-color .2s ease
}

.main-content[data-v-74b77e4c] {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 100vh;
	transition: margin-left .3s;
	width: 100%;
	overflow-x: hidden
}

.main-content.with-sidebar[data-v-74b77e4c] {
	margin-left: 228px;
	width: calc(100% - 228px)
}

.content-wrapper[data-v-74b77e4c] {
	flex: 1;
	margin: 0 auto;
	width: 100%;
	max-width: 1200px;
	padding: 0 0 48px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	background-color: var(--bg-color-primary);
	transition: background-color .2s ease
}

@media (max-width: 960px) {
	.main-content[data-v-74b77e4c] {
		margin-left: 0
	}

	.content-wrapper[data-v-74b77e4c] {
		padding-bottom: 48px
	}
}

@media (max-width: 768px) {
	.content-wrapper[data-v-74b77e4c] {
		padding-bottom: 48px
	}
}

@media (max-width: 480px) {
	.content-wrapper[data-v-74b77e4c] {
		padding-bottom: 48px
	}
}

@media (min-width: 961px) {
	.content-wrapper[data-v-74b77e4c] {
		padding-bottom: 0
	}
}

.tab-container[data-v-6be5ca4d] {
	position: relative;
	height: 85px;
	background: var(--bg-color-primary);
	display: flex;
	align-items: center;
	overflow-x: auto;
	overflow-y: hidden;
	white-space: nowrap;
	padding: 0 12px;
	box-sizing: border-box;
	width: 100%;
	max-width: 100vw;
	margin-left: 12px;
	transition: background-color .2s ease
}

.tab-container[data-v-6be5ca4d]::-webkit-scrollbar {
	display: none
}

.tab-container.dragging[data-v-6be5ca4d] {
	cursor: grabbing
}

.tab-item[data-v-6be5ca4d] {
	height: 40px;
	font-size: 16px;
	color: var(--text-color-secondary);
	cursor: pointer;
	background: transparent;
	border-radius: 999px;
	text-align: center;
	line-height: 40px;
	display: inline-block;
	flex-shrink: 0;
	-webkit-user-select: none;
	user-select: none;
	padding: 0 16px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 200px;
	position: relative;
	z-index: 2
}

.tab-item[data-v-6be5ca4d]:hover {
	background: var(--bg-color-secondary);
	color: var(--text-color-primary)
}

@media (hover: none) {
	.tab-item[data-v-6be5ca4d]:hover {
		background: transparent;
		color: var(--text-color-secondary)
	}

	.tab-item.active[data-v-6be5ca4d]:hover {
		color: var(--text-color-primary)
	}
}

.tab-item.active[data-v-6be5ca4d] {
	color: var(--text-color-primary);
	font-weight: 700;
	background: transparent;
	transition: color .2s ease
}

.tab-slider[data-v-6be5ca4d] {
	position: absolute;
	height: 40px;
	border-radius: 20px;
	background: var(--bg-color-secondary);
	transition: left .25s ease-out, width .25s ease-out, background-color .2s ease;
	z-index: 1;
	bottom: 22.5px
}

[data-v-5d2d97fd] {
	transition: border-color .2s ease, background-color .2s ease
}

.channel-container[data-v-5d2d97fd] {
	width: 100%;
	background: var(--bg-color-primary)
}

.fixed-channel-container[data-v-5d2d97fd] {
	position: fixed;
	top: 72px;
	left: 50%;
	transform: translate(-50%);
	width: 100%;
	max-width: 1200px;
	padding: 0 10px;
	background: var(--bg-color-primary);
	z-index: 50;
	transition: background-color .2s ease
}

.hidden[data-v-5d2d97fd] {
	display: none
}

@media (min-width: 961px) {
	.fixed-channel-container[data-v-5d2d97fd] {
		left: calc(50% + 114px);
		width: calc(100% - 228px)
	}
}

.loading-spinner[data-v-3ae1936e] {
	padding: 5px 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	animation: slideDown-3ae1936e 1.5s ease-in-out;
	width: 100%;
	overflow-x: hidden;
	position: relative;
	top: 18px;
	z-index: 101;
	box-sizing: border-box
}

.spinner-icon[data-v-3ae1936e] {
	color: var(--text-color-primary);
	animation: spinThreeStage-3ae1936e 1.5s ease-in-out
}

@keyframes slideDown-3ae1936e {
	0% {
		transform: scale(.7) translateY(-50%);
		opacity: .7
	}

	33.33% {
		transform: scale(1) translateY(0);
		opacity: 1
	}

	66.66% {
		transform: scale(1) translateY(0);
		opacity: 1
	}

	to {
		transform: scale(.7) translateY(-50%);
		opacity: .7
	}
}

@keyframes spinThreeStage-3ae1936e {
	0% {
		transform: rotate(0)
	}

	33.33% {
		transform: rotate(360deg)
	}

	66.66% {
		transform: rotate(720deg)
	}

	to {
		transform: rotate(1080deg)
	}
}

.explore-container[data-v-5cc29b56] {
	padding-top: 72px;
	min-height: 100vh;
	background: var(--bg-color-primary);
	transition: background-color .2s ease
}

.explore-main[data-v-5cc29b56] {
	padding: 0px 10px calc(48px + constant(safe-area-inset-bottom)) 10px;
	padding: 0px 10px calc(48px + env(safe-area-inset-bottom)) 10px;
	width: 100%;
	box-sizing: border-box;
	overflow-x: hidden;
	background: var(--bg-color-primary);
	transition: margin-top .3s ease, border-color .2s ease, background-color .2s ease
}

.explore-main.with-loading[data-v-5cc29b56] {
	margin-top: 40px
}

.image-viewer-overlay[data-v-1f52c4dd] {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #000000b3;
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	outline: none
}

.image-viewer-container[data-v-1f52c4dd] {
	position: relative;
	width: 100vw;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center
}

.close-btn[data-v-1f52c4dd] {
	position: absolute;
	top: 20px;
	left: 20px;
	z-index: 3001;
	background: #98989880;
	border: none;
	color: #fff;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all .2s ease;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px)
}

.close-btn[data-v-1f52c4dd]:hover {
	background: #575757b3
}

.image-counter[data-v-1f52c4dd] {
	position: absolute;
	top: 20px;
	right: 20px;
	z-index: 3001;
	background: #98989880;
	color: #fff;
	padding: 8px 16px;
	border-radius: 20px;
	font-size: 16px;
	font-weight: 500;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px)
}

.image-content[data-v-1f52c4dd] {
	width: 100%;
	height: 100%;
	overflow: hidden
}

.image-slider[data-v-1f52c4dd] {
	display: flex;
	width: 100%;
	height: 100%;
	transition: transform .3s cubic-bezier(.4, 0, .2, 1)
}

.image-slide[data-v-1f52c4dd] {
	flex: 0 0 100%;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center
}

.viewer-image[data-v-1f52c4dd] {
	width: 100%;
	height: 100vh;
	object-fit: contain;
	cursor: zoom-out;
	transition: none
}

.viewer-image[data-v-1f52c4dd]:hover {
	cursor: zoom-out
}

.nav-btn[data-v-1f52c4dd] {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #98989880;
	border: none;
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all .3s ease;
	z-index: 3001;
	pointer-events: auto;
	opacity: .8
}

.nav-btn[data-v-1f52c4dd]:hover:not(.disabled) {
	background: #575757b3;
	opacity: 1
}

.nav-btn.disabled[data-v-1f52c4dd] {
	opacity: .3
}

.prev-btn[data-v-1f52c4dd] {
	left: 20px
}

.next-btn[data-v-1f52c4dd] {
	right: 20px
}

.fade-enter-active[data-v-1f52c4dd],
.fade-leave-active[data-v-1f52c4dd] {
	transition: opacity .3s ease
}

.fade-enter-from[data-v-1f52c4dd],
.fade-leave-to[data-v-1f52c4dd] {
	opacity: 0
}

@media (max-width: 768px) {
	.image-viewer-container[data-v-1f52c4dd] {
		width: 100vw;
		height: 100vh
	}

	.close-btn[data-v-1f52c4dd] {
		top: 8px;
		left: 8px;
		width: 40px;
		height: 40px
	}

	.image-counter[data-v-1f52c4dd] {
		top: 16px;
		right: 16px;
		padding: 6px 12px;
		font-size: 14px
	}

	.nav-btn[data-v-1f52c4dd] {
		width: 40px;
		height: 40px
	}

	.prev-btn[data-v-1f52c4dd] {
		left: 10px
	}

	.next-btn[data-v-1f52c4dd] {
		right: 10px
	}
}

.multi-image-upload[data-v-fb0128b2] {
	width: 100%
}

.upload-grid[data-v-fb0128b2] {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	gap: 10px;
	margin-bottom: 10px
}

.image-item[data-v-fb0128b2],
.upload-item[data-v-fb0128b2] {
	aspect-ratio: 1;
	border-radius: 8px;
	overflow: hidden;
	position: relative
}

.image-preview[data-v-fb0128b2] {
	width: 100%;
	height: 100%;
	position: relative;
	cursor: zoom-in
}

.image-preview img[data-v-fb0128b2] {
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none
}

.image-overlay[data-v-fb0128b2] {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--overlay-bg);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	padding: 8px;
	opacity: 0;
	transition: opacity .2s ease
}

.image-preview:hover .image-overlay[data-v-fb0128b2] {
	opacity: 1
}

.image-actions[data-v-fb0128b2] {
	display: flex;
	gap: 8px;
	align-self: flex-end
}

.action-btn[data-v-fb0128b2] {
	background: #ffffffd0;
	border: none;
	border-radius: 50%;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all .2s ease;
	opacity: .5
}

.remove-btn[data-v-fb0128b2]:hover:not(:disabled) {
	opacity: 1
}

.action-btn[data-v-fb0128b2]:disabled {
	opacity: .5;
	cursor: not-allowed;
	background-color: #ffffff4d
}

.action-btn svg[data-v-fb0128b2] {
	width: 12px;
	height: 12px
}

.image-index[data-v-fb0128b2] {
	background: #0008;
	color: #fff;
	border-radius: 12px;
	padding: 4px 8px;
	font-size: 12px;
	font-weight: 700;
	align-self: flex-start
}

.upload-item[data-v-fb0128b2] {
	border: 2px dashed var(--border-color-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all .2s ease;
	background: var(--bg-color-primary)
}

.upload-item[data-v-fb0128b2]:hover,
.upload-item.drag-over[data-v-fb0128b2] {
	border-color: var(--primary-color)
}

.upload-item.uploading[data-v-fb0128b2] {
	border-color: var(--primary-color);
	background-color: #ff47570d;
	cursor: not-allowed;
	opacity: .7
}

.upload-icon.uploading[data-v-fb0128b2] {
	animation: spin-fb0128b2 1s linear infinite;
	color: var(--primary-color)
}

.image-item[data-v-fb0128b2] {
	transition: all .2s ease;
	cursor: move;
	-webkit-user-select: none;
	user-select: none
}

.image-item[data-v-fb0128b2]:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px #00000026
}

.image-item.dragging[data-v-fb0128b2] {
	opacity: .5;
	transform: scale(1.05) rotate(5deg);
	z-index: 1000;
	box-shadow: 0 8px 25px #0000004d
}

.image-item.touch-dragging[data-v-fb0128b2] {
	opacity: .8;
	transform: scale(1.6) rotate(3deg);
	z-index: 1000
}

.image-item.long-pressing[data-v-fb0128b2] {
	transform: scale(.95)
}

@media (max-width: 768px) {
	.image-item[data-v-fb0128b2] {
		touch-action: pan-y
	}

	.image-item.touch-dragging[data-v-fb0128b2] {
		touch-action: none;
		transform: rotate(2deg)
	}

	.image-item.long-pressing[data-v-fb0128b2] {
		transform: scale(.9)
	}

	.image-overlay[data-v-fb0128b2] {
		pointer-events: none
	}

	.image-overlay .action-btn[data-v-fb0128b2] {
		pointer-events: auto
	}

	.upload-grid[data-v-fb0128b2] {
		-webkit-user-select: none;
		user-select: none
	}
}

.upload-placeholder[data-v-fb0128b2] {
	text-align: center;
	color: var(--text-color-secondary)
}

.upload-icon[data-v-fb0128b2] {
	width: 24px;
	height: 24px;
	margin-bottom: 5px;
	color: var(--text-color-secondary)
}

.upload-placeholder p[data-v-fb0128b2] {
	margin: 2px 0;
	font-size: 12px
}

.upload-hint[data-v-fb0128b2] {
	color: var(--text-color-secondary);
	font-size: 10px !important
}

.drag-hint[data-v-fb0128b2] {
	color: var(--text-color-secondary);
	font-size: 10px !important;
	margin-top: 4px
}

.upload-loading[data-v-fb0128b2] {
	text-align: center;
	color: var(--primary-color)
}

.loading-icon[data-v-fb0128b2] {
	width: 20px;
	height: 20px;
	margin-bottom: 5px;
	animation: spin-fb0128b2 1s linear infinite
}

@keyframes spin-fb0128b2 {
	0% {
		transform: rotate(0)
	}

	to {
		transform: rotate(360deg)
	}
}

.upload-loading p[data-v-fb0128b2] {
	margin: 2px 0;
	font-size: 12px
}

.error-message[data-v-fb0128b2] {
	color: var(--primary-color);
	font-size: 12px;
	margin-bottom: 10px
}

.upload-tips[data-v-fb0128b2] {
	font-size: 12px;
	color: var(--text-color-secondary);
	line-height: 1.4
}

.upload-tips p[data-v-fb0128b2] {
	margin: 2px 0
}

.drag-tip .mobile-tip[data-v-fb0128b2] {
	display: none
}

.drag-tip .desktop-tip[data-v-fb0128b2] {
	display: inline
}

@media (max-width: 768px) {
	.drag-tip .mobile-tip[data-v-fb0128b2] {
		display: inline
	}

	.drag-tip .desktop-tip[data-v-fb0128b2] {
		display: none
	}
}

.video-upload[data-v-2c536bbb] {
	width: 100%
}

.upload-area[data-v-2c536bbb] {
	width: 100%;
	min-height: 200px;
	border: 2px dashed var(--border-color-primary);
	border-radius: 8px;
	background: var(--bg-color-primary);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all .2s ease;
	position: relative;
	overflow: hidden
}

.upload-area[data-v-2c536bbb]:hover {
	border-color: var(--primary-color);
	background: var(--bg-color-secondary)
}

.upload-area.drag-over[data-v-2c536bbb] {
	border-color: var(--primary-color);
	background: var(--bg-color-secondary);
	transform: scale(1.02)
}

.upload-area.has-video[data-v-2c536bbb] {
	min-height: 100px;
	cursor: default;
	border: none;
	background: transparent
}

.upload-area.has-video[data-v-2c536bbb]:hover {
	border: none;
	background: transparent
}

.video-upload:has(.upload-area.has-video) .upload-tips[data-v-2c536bbb] {
	display: none
}

.video-success[data-v-2c536bbb] {
	width: 90%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px;
	background: var(--bg-color-secondary);
	border-radius: 4px;
	border: 1px solid var(--success-color);
	cursor: pointer
}

.video-thumbnail[data-v-2c536bbb] {
	width: 60px;
	height: 60px;
	border-radius: 4px;
	overflow: hidden;
	background: var(--bg-color-tertiary);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	position: relative;
	cursor: pointer;
	transition: all .2s ease
}

.video-thumbnail[data-v-2c536bbb]:hover {
	transform: scale(1.05)
}

.video-thumbnail:hover .cover-overlay[data-v-2c536bbb] {
	opacity: 1
}

.cover-overlay[data-v-2c536bbb] {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #0009;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity .2s ease;
	color: #fff;
	font-size: 10px;
	gap: 2px
}

.cover-overlay span[data-v-2c536bbb] {
	font-size: 10px;
	white-space: nowrap
}

.thumbnail-image[data-v-2c536bbb] {
	width: 100%;
	height: 100%;
	object-fit: cover
}

.thumbnail-placeholder[data-v-2c536bbb] {
	color: var(--text-color-secondary);
	display: flex;
	align-items: center;
	justify-content: center
}

.success-icon[data-v-2c536bbb] {
	width: 16px;
	height: 16px;
	background: #2abc3b;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	margin-right: 6px;
	vertical-align: middle
}

.video-info[data-v-2c536bbb] {
	margin-left: 12px;
	flex: 1;
	color: var(--text-color-primary)
}

.success-text[data-v-2c536bbb] {
	font-size: 12px;
	margin: 0;
	color: var(--success-color);
	font-weight: 500;
	display: flex;
	align-items: center
}

.cover-status[data-v-2c536bbb] {
	font-size: 10px;
	color: var(--primary-color);
	margin-top: 4px;
	display: flex;
	align-items: center;
	gap: 4px
}

.upload-placeholder[data-v-2c536bbb] {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: var(--text-color-secondary)
}

.upload-placeholder .upload-icon[data-v-2c536bbb] {
	width: 40px;
	height: 40px
}

.upload-placeholder p[data-v-2c536bbb] {
	margin: 4px 0;
	font-size: 14px
}

.upload-hint[data-v-2c536bbb] {
	font-size: 12px;
	color: var(--text-color-tertiary)
}

.drag-hint[data-v-2c536bbb] {
	font-size: 12px;
	color: var(--text-color-quaternary);
	margin-top: 8px
}

.upload-progress[data-v-2c536bbb] {
	position: absolute;
	bottom: 20px;
	left: 20px;
	right: 20px;
	text-align: center
}

.progress-bar[data-v-2c536bbb] {
	width: 100%;
	height: 4px;
	background: var(--bg-color-tertiary);
	border-radius: 2px;
	overflow: hidden;
	margin-bottom: 8px
}

.progress-fill[data-v-2c536bbb] {
	height: 100%;
	background: var(--primary-color);
	transition: width .2s ease
}

.progress-text[data-v-2c536bbb] {
	font-size: 12px;
	color: var(--text-color-secondary);
	margin: 0
}

.error-message[data-v-2c536bbb] {
	color: var(--danger-color);
	font-size: 12px;
	margin-top: 8px
}

.upload-tips[data-v-2c536bbb] {
	font-size: 12px;
	color: var(--text-color-secondary);
	line-height: 1.4;
	margin-top: 8px
}

.upload-tips p[data-v-2c536bbb] {
	margin: 2px 0
}

@keyframes spin-2c536bbb {
	0% {
		transform: rotate(0)
	}

	to {
		transform: rotate(360deg)
	}
}

@media (max-width: 768px) {
	.upload-area[data-v-2c536bbb] {
		min-height: 150px
	}

	.upload-area.has-video[data-v-2c536bbb] {
		min-height: 100px
	}

	.video-player[data-v-2c536bbb] {
		max-height: 180px
	}
}

.tag-selector[data-v-f251e942] {
	width: 100%
}

.tag-input-container[data-v-f251e942] {
	display: flex;
	gap: 8px;
	margin-bottom: 16px;
	max-width: 100%
}

.tag-input[data-v-f251e942] {
	flex: 1;
	max-width: 300px;
	min-width: 200px;
	padding: 8px 12px;
	border: 1px solid var(--border-color-primary);
	border-radius: 4px;
	font-size: 14px;
	outline: none;
	transition: border-color .2s;
	caret-color: var(--primary-color);
	background: var(--bg-color-primary);
	color: var(--text-color-primary)
}

.tag-input[data-v-f251e942]:focus {
	border-color: var(--primary-color)
}

.tag-input[data-v-f251e942]:disabled,
.tag-input.input-disabled[data-v-f251e942] {
	background-color: var(--bg-color-secondary);
	color: var(--text-color-quaternary);
	cursor: not-allowed;
	opacity: .6
}

.tag-input[data-v-f251e942]:disabled::placeholder,
.tag-input.input-disabled[data-v-f251e942]::placeholder {
	color: var(--text-color-quaternary)
}

.add-tag-btn[data-v-f251e942] {
	padding: 8px 16px;
	background: var(--primary-color);
	color: var(--button-text-color);
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-size: 14px;
	transition: background-color .2s
}

.add-tag-btn[data-v-f251e942]:hover:not(:disabled) {
	background: var(--primary-color-dark)
}

.add-tag-btn[data-v-f251e942]:disabled {
	background: var(--text-color-quaternary);
	cursor: not-allowed;
	opacity: .6
}

.selected-tags[data-v-f251e942],
.tag-suggestions[data-v-f251e942],
.hot-tags[data-v-f251e942] {
	margin-bottom: 16px
}

.selected-tags-header[data-v-f251e942],
.suggestions-header[data-v-f251e942],
.hot-tags-header[data-v-f251e942] {
	font-size: 14px;
	font-weight: 500;
	color: var(--text-color-primary);
	margin-bottom: 8px
}

.tags-list[data-v-f251e942],
.suggestions-list[data-v-f251e942] {
	display: flex;
	flex-wrap: wrap;
	gap: 8px
}

.tag-item[data-v-f251e942] {
	display: flex;
	align-items: center;
	padding: 6px 12px;
	border-radius: 16px;
	font-size: 14px;
	cursor: pointer;
	transition: all .2s;
	-webkit-user-select: none;
	user-select: none
}

.tag-item.selected[data-v-f251e942] {
	background: var(--primary-color);
	color: var(--button-text-color);
	cursor: default
}

.tag-item.suggestion[data-v-f251e942] {
	background: var(--bg-color-secondary);
	border: 1px solid var(--border-color-primary);
	color: var(--text-color-secondary)
}

.tag-item.suggestion[data-v-f251e942]:hover:not(.disabled) {
	border-color: var(--primary-color)
}

.tag-item.hot[data-v-f251e942] {
	background: var(--bg-color-secondary);
	border: 1px solid var(--border-color-primary);
	color: var(--text-color-tag)
}

.tag-item.hot[data-v-f251e942]:hover:not(.disabled) {
	border-color: var(--primary-color)
}

.tag-item.disabled[data-v-f251e942] {
	opacity: .5;
	cursor: not-allowed
}

.tag-name[data-v-f251e942] {
	flex: 1
}

.tag-usage[data-v-f251e942] {
	font-size: 12px;
	opacity: .7;
	margin-left: 8px
}

.remove-tag-btn[data-v-f251e942] {
	background: none;
	border: none;
	color: var(--button-text-color);
	cursor: pointer;
	padding: 2px;
	margin-left: 8px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color .2s
}

.remove-tag-btn[data-v-f251e942]:hover {
	background: #fff3
}

.remove-tag-btn svg[data-v-f251e942] {
	width: 12px;
	height: 12px
}

.dropdown-selector[data-v-79636074] {
	position: relative;
	width: fit-content;
	-webkit-user-select: none;
	user-select: none
}

.dropdown-toggle[data-v-79636074] {
	position: relative;
	width: 100%;
	border: 1px solid var(--border-color-primary);
	border-radius: 8px;
	background: var(--bg-color-primary);
	cursor: pointer;
	transition: all .2s ease
}

.dropdown-toggle[data-v-79636074]:hover {
	border-color: var(--border-color-secondary)
}

.dropdown-toggle.active[data-v-79636074] {
	border-color: var(--primary-color)
}

.dropdown-toggle[data-v-79636074]:disabled {
	cursor: not-allowed;
	opacity: .6
}

.selected-content[data-v-79636074] {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px;
	font-size: 14px
}

.dropdown-selector.small .selected-content[data-v-79636074] {
	padding: 8px 12px
}

.selected-text[data-v-79636074] {
	color: var(--text-color-primary);
	font-weight: 500
}

.placeholder-text[data-v-79636074] {
	color: var(--text-color-secondary)
}

.dropdown-arrow[data-v-79636074] {
	color: var(--text-color-secondary);
	transition: transform .2s ease;
	-webkit-user-select: none;
	user-select: none;
	display: flex;
	align-items: center
}

.dropdown-arrow.rotated[data-v-79636074] {
	transform: rotate(180deg)
}

.dropdown-options[data-v-79636074] {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: var(--bg-color-primary);
	border: 1px solid var(--border-color-primary);
	border-top: none;
	border-radius: 0 0 8px 8px;
	box-shadow: 0 4px 12px #0000001a;
	z-index: 1000;
	max-height: 200px;
	overflow-y: auto;
	padding: 8px
}

.dropdown-option[data-v-79636074] {
	display: flex;
	align-items: center;
	padding: 12px;
	cursor: pointer;
	transition: all .2s ease;
	position: relative;
	border-radius: 6px;
	margin-bottom: 4px
}

.dropdown-selector.small .dropdown-option[data-v-79636074] {
	padding: 8px 12px
}

.dropdown-option[data-v-79636074]:last-child {
	margin-bottom: 0
}

.dropdown-option[data-v-79636074]:hover {
	background: var(--bg-color-secondary);
	border-radius: 6px
}

.dropdown-option.selected[data-v-79636074] {
	background: var(--bg-color-secondary);
	color: var(--primary-color);
	font-weight: 500;
	border-radius: 6px
}

.option-text[data-v-79636074] {
	font-size: 14px
}

.dropdown-options[data-v-79636074]::-webkit-scrollbar {
	width: 4px
}

.dropdown-options[data-v-79636074]::-webkit-scrollbar-track {
	background: transparent
}

.dropdown-options[data-v-79636074]::-webkit-scrollbar-thumb {
	background: var(--border-color-primary);
	border-radius: 2px
}

.dropdown-options[data-v-79636074]::-webkit-scrollbar-thumb:hover {
	background: var(--border-color-secondary)
}

.v3-body-inner {
	scroll-behavior: smooth;
	scrollbar-color: #393d3f rgba(0, 0, 0, .1);
	scrollbar-width: thin
}

.v3-body-inner::-webkit-scrollbar {
	width: 8px
}

.v3-body-inner::-webkit-scrollbar-track {
	background-color: transparent
}

.v3-body-inner::-webkit-scrollbar-thumb {
	display: none;
	background: #0000004d;
	border-radius: 5px
}

.v3-body-inner:hover::-webkit-scrollbar-thumb {
	display: block
}

.v3-emoji-picker {
	height: 320px;
	width: 280px;
	box-shadow: 0 2px 10px #0003;
	border-radius: 10px;
	margin: 0 auto;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	text-align: left
}

.v3-emoji-picker * {
	box-sizing: border-box
}

.v3-emoji-picker .v3-header {
	padding: 15px 15px 13px;
	border-bottom: 1px solid
}

.v3-emoji-picker .v3-header .v3-groups {
	display: flex
}

.v3-emoji-picker .v3-header .v3-groups .v3-group {
	flex-grow: 1;
	padding: 0;
	margin: 0;
	border: none;
	background: none;
	font-size: 23px;
	cursor: pointer;
	position: relative;
	display: block;
	opacity: .7;
	transition: .2s
}

.v3-emoji-picker .v3-header .v3-groups .v3-group.v3-is-hidden {
	display: none
}

.v3-emoji-picker .v3-header .v3-groups .v3-group:first-child,
.v3-emoji-picker .v3-header .v3-groups .v3-group:last-child {
	flex-grow: 0
}

.v3-emoji-picker .v3-header .v3-groups .v3-group:hover {
	opacity: 1
}

.v3-emoji-picker .v3-header .v3-groups .v3-group span {
	display: flex;
	align-items: center;
	justify-content: center
}

.v3-emoji-picker .v3-header .v3-groups .v3-group span img {
	display: block;
	width: 1em;
	height: auto
}

.v3-emoji-picker .v3-spacing {
	height: 11px
}

.v3-emoji-picker .v3-search input {
	width: 100%;
	display: block;
	height: 26px;
	padding: 0 10px;
	border: 1px solid;
	border-radius: 3px;
	font-size: 12px;
	transition: .2s
}

.v3-emoji-picker .v3-search input:focus {
	outline: none
}

.v3-emoji-picker .v3-body {
	padding: 0 0 15px 11px;
	min-height: 0;
	flex-grow: 1
}

.v3-emoji-picker .v3-body .v3-body-inner {
	flex-grow: 1;
	min-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
	height: 100%;
	padding-right: 11px
}

.v3-emoji-picker .v3-body .v3-body-inner .v3-group h5 {
	margin: 0;
	top: 0;
	padding: 7px 0 3px 4px;
	z-index: 2
}

.v3-emoji-picker .v3-body .v3-body-inner .v3-group h5.v3-sticky {
	position: sticky
}

.v3-emoji-picker .v3-body .v3-body-inner .v3-group .v3-emojis {
	display: flex;
	font-size: 18px;
	flex-wrap: wrap
}

.v3-emoji-picker .v3-body .v3-body-inner .v3-group .v3-emojis button {
	cursor: pointer;
	border: none;
	background: none;
	margin: 0;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-basis: 12.5%;
	max-width: 12.5%;
	flex-grow: 1;
	padding: 0;
	font-size: 22px;
	position: relative
}

.v3-emoji-picker .v3-body .v3-body-inner .v3-group .v3-emojis button:after {
	content: "";
	width: 100%;
	padding-bottom: 100%
}

.v3-emoji-picker .v3-body .v3-body-inner .v3-group .v3-emojis button span {
	display: flex;
	align-items: center;
	justify-content: center
}

.v3-emoji-picker .v3-body .v3-body-inner .v3-group .v3-emojis button img {
	max-width: 100%;
	padding: 4px
}

.v3-emoji-picker .v3-body .v3-body-inner .v3-group .v3-emojis button span,
.v3-emoji-picker .v3-body .v3-body-inner .v3-group .v3-emojis button img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%
}

.v3-emoji-picker .v3-body .v3-body-inner.is-mac .v3-emojis button {
	font-family: "Apple Color Emoji"
}

.v3-emoji-picker .v3-footer {
	font-size: 14px;
	border-top: 1px solid #dddddd;
	padding: 15px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative
}

.v3-emoji-picker .v3-footer .v3-tone,
.v3-emoji-picker .v3-footer .v3-foot-left {
	display: flex;
	align-items: center
}

.v3-emoji-picker .v3-footer .v3-tone img,
.v3-emoji-picker .v3-footer .v3-foot-left img {
	width: 20px;
	display: block
}

.v3-emoji-picker .v3-footer .v3-tone>span:first-child,
.v3-emoji-picker .v3-footer .v3-foot-left>span:first-child {
	margin-right: 6px
}

.v3-emoji-picker .v3-footer .v3-foot-left>span.v3-text {
	max-width: 100px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap
}

.v3-emoji-picker .v3-footer .v3-tone {
	border: none;
	padding: 0;
	background: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center
}

.v3-emoji-picker .v3-footer .v3-tone>span {
	display: inline-flex;
	vertical-align: top
}

.v3-emoji-picker .v3-footer .v3-tone .v3-text {
	font-size: 13px
}

.v3-emoji-picker .v3-footer .v3-tone .v3-icon {
	display: inline-flex;
	height: 15px;
	width: 15px;
	vertical-align: middle;
	align-self: center;
	border: 2px solid rgba(0, 0, 0, .2)
}

.v3-emoji-picker .v3-footer .v3-tone .v3-icon.v3-tone-neutral {
	background-color: #ffd225
}

.v3-emoji-picker .v3-footer .v3-tone .v3-icon.v3-tone-1f3fb {
	background-color: #ffdfbd
}

.v3-emoji-picker .v3-footer .v3-tone .v3-icon.v3-tone-1f3fc {
	background-color: #e9c197
}

.v3-emoji-picker .v3-footer .v3-tone .v3-icon.v3-tone-1f3fd {
	background-color: #c88e62
}

.v3-emoji-picker .v3-footer .v3-tone .v3-icon.v3-tone-1f3fe {
	background-color: #a86637
}

.v3-emoji-picker .v3-footer .v3-tone .v3-icon.v3-tone-1f3ff {
	background-color: #60463a
}

.v3-emoji-picker .v3-footer .v3-tone .is-mac span {
	font-family: "Apple Color Emoji"
}

.v3-skin-tones {
	position: absolute;
	height: 100%;
	width: 60%;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: 0 15px;
	opacity: 0;
	visibility: hidden;
	transition: .2s;
	border-radius: 0 0 10px 10px
}

.v3-skin-tones.v3-is-open {
	opacity: 1;
	visibility: visible
}

.v3-skin-tones .v3-skin-tone {
	display: inline-block;
	height: 15px;
	width: 25px;
	border: none;
	padding: 0;
	cursor: pointer;
	transition: 0ms
}

.v3-skin-tones .v3-skin-tone:hover {
	transform: scale(1.1);
	transition: .2s
}

.v3-skin-tones .v3-skin-tone-neutral {
	color: #ffd225;
	background-color: #ffd225
}

.v3-skin-tones .v3-skin-tone-1f3fb {
	color: #ffdfbd;
	background-color: #ffdfbd
}

.v3-skin-tones .v3-skin-tone-1f3fc {
	color: #e9c197;
	background-color: #e9c197
}

.v3-skin-tones .v3-skin-tone-1f3fd {
	color: #c88e62;
	background-color: #c88e62
}

.v3-skin-tones .v3-skin-tone-1f3fe {
	color: #a86637;
	background-color: #a86637
}

.v3-skin-tones .v3-skin-tone-1f3ff {
	color: #60463a;
	background-color: #60463a
}

.v3-input-emoji-picker * {
	box-sizing: border-box
}

.v3-input-emoji-picker .v3-input-picker-root {
	position: relative
}

.v3-input-emoji-picker .v3-input-picker-root .v3-emoji-picker-input,
.v3-input-emoji-picker .v3-input-picker-root .v3-emoji-picker-textarea {
	width: 100%;
	height: 40px;
	border: 1px solid #999;
	padding-left: 15px
}

.v3-input-emoji-picker .v3-input-picker-root .v3-emoji-picker-textarea {
	min-height: 80px;
	resize: vertical
}

.v3-input-emoji-picker .v3-input-picker-root .v3-emoji-picker-textarea+.v3-input-picker-wrap .v3-input-picker-icon {
	top: auto;
	bottom: 5px
}

.v3-input-emoji-picker .v3-input-picker-root .v3-input-picker-wrap .v3-input-picker-icon {
	display: inline-flex;
	position: absolute;
	right: 5px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 24px;
	border: none;
	background: none;
	padding: 0 5px;
	cursor: pointer
}

.v3-input-emoji-picker .v3-input-picker-root .v3-input-picker-wrap .v3-input-picker-icon img {
	display: block;
	width: 1em;
	height: 1em
}

.v3-input-emoji-picker .v3-input-picker-root .v3-input-picker-wrap .v3-emoji-picker {
	opacity: 0;
	visibility: hidden;
	transition: .2s
}

.v3-input-emoji-picker .v3-input-picker-root .v3-input-picker-wrap.v3-picker-is-open .v3-emoji-picker {
	opacity: 1;
	visibility: visible;
	z-index: 999
}

.v3-emoji-picker {
	--v3-picker-bg: #ffffff;
	--v3-picker-fg: #000000;
	--v3-picker-border: #dddddd;
	--v3-picker-input-bg: var(--v3-picker-bg);
	--v3-picker-input-border: #cccccc;
	--v3-picker-input-focus-border: #000000;
	--v3-group-image-filter: none;
	--v3-picker-emoji-hover: #f7f7f7;
	background: var(--v3-picker-bg);
	color: var(--v3-picker-fg)
}

.v3-emoji-picker .v3-footer,
.v3-emoji-picker .v3-header {
	border-color: var(--v3-picker-border)
}

.v3-emoji-picker .v3-groups {
	filter: var(--v3-group-image-filter)
}

.v3-emoji-picker .v3-tone {
	color: var(--v3-picker-fg)
}

.v3-emoji-picker .v3-search input {
	background: var(--v3-picker-input-bg);
	border-color: var(--v3-picker-input-border);
	color: inherit
}

.v3-emoji-picker .v3-search input:focus {
	border-color: var(--v3-picker-input-focus-border)
}

.v3-emoji-picker .v3-body .v3-body-inner .v3-group h5,
.v3-emoji-picker .v3-skin-tones {
	background: var(--v3-picker-bg)
}

.v3-emoji-picker .v3-body .v3-body-inner .v3-group .v3-emojis button:hover {
	background: var(--v3-picker-emoji-hover, #f7f7f7)
}

@media (prefers-color-scheme: dark) {
	.v3-emoji-picker.v3-color-theme-auto {
		--v3-picker-bg: #000000;
		--v3-picker-fg: #ffffff;
		--v3-picker-border: #333333;
		--v3-picker-input-bg: #222222;
		--v3-picker-input-border: #444444;
		--v3-picker-input-focus-border: #555555;
		--v3-group-image-filter: invert(1);
		--v3-picker-emoji-hover: #222222
	}
}

.v3-emoji-picker.v3-color-theme-dark {
	--v3-picker-bg: #000000;
	--v3-picker-fg: #ffffff;
	--v3-picker-border: #333333;
	--v3-picker-input-bg: #222222;
	--v3-picker-input-border: #444444;
	--v3-picker-input-focus-border: #555555;
	--v3-group-image-filter: invert(1);
	--v3-picker-emoji-hover: #222222
}

.skeleton-wrapper[data-v-c718d5eb] {
	--skeleton-bg: var(--bg-color-secondary);
	--skeleton-highlight: var(--bg-color-tertiary)
}

.skeleton-avatar[data-v-c718d5eb],
.skeleton-line[data-v-c718d5eb],
.skeleton-image[data-v-c718d5eb],
.skeleton-button[data-v-c718d5eb] {
	background: linear-gradient(90deg, var(--skeleton-bg) 25%, var(--skeleton-highlight) 37%, var(--skeleton-bg) 63%);
	background-size: 200% 100%;
	border-radius: 4px;
	position: relative;
	overflow: hidden
}

.skeleton-avatar[data-v-c718d5eb] {
	border-radius: 50%;
	flex-shrink: 0
}

.skeleton-button[data-v-c718d5eb] {
	width: 72px;
	height: 32px;
	border-radius: 20px;
	margin-left: 12px;
	flex-shrink: 0
}

.skeleton-image[data-v-c718d5eb] {
	width: 100%;
	border-radius: 10px;
	background-size: 200px 100%;
	min-height: 300px
}

.skeleton-wrapper:not(.no-animation) .skeleton-avatar[data-v-c718d5eb],
.skeleton-wrapper:not(.no-animation) .skeleton-line[data-v-c718d5eb],
.skeleton-wrapper:not(.no-animation) .skeleton-image[data-v-c718d5eb],
.skeleton-wrapper:not(.no-animation) .skeleton-button[data-v-c718d5eb] {
	animation: skeleton-shimmer-c718d5eb 1.5s infinite
}

.skeleton-wrapper.pulse-animation .skeleton-avatar[data-v-c718d5eb],
.skeleton-wrapper.pulse-animation .skeleton-line[data-v-c718d5eb],
.skeleton-wrapper.pulse-animation .skeleton-image[data-v-c718d5eb],
.skeleton-wrapper.pulse-animation .skeleton-button[data-v-c718d5eb] {
	animation: skeleton-pulse-c718d5eb 1.5s ease-in-out infinite
}

.skeleton-user-card[data-v-c718d5eb] {
	display: flex;
	align-items: center;
	padding: 16px;
	border-radius: 12px;
	border: 1px solid var(--border-color-primary);
	background: var(--bg-color-primary)
}

.skeleton-user-card .skeleton-avatar[data-v-c718d5eb] {
	margin-right: 12px
}

.skeleton-user-card .skeleton-info[data-v-c718d5eb] {
	flex: 1;
	min-width: 0
}

.skeleton-user-card .skeleton-stats[data-v-c718d5eb] {
	display: flex;
	gap: 16px
}

.skeleton-image-card[data-v-c718d5eb] {
	width: 100%;
	box-sizing: border-box;
	background-color: var(--bg-color-primary);
	border-radius: 10px;
	overflow: hidden;
	padding: 0
}

.skeleton-image-card .skeleton-footer[data-v-c718d5eb] {
	display: flex;
	align-items: center;
	padding: 8px 12px;
	gap: 8px
}

.skeleton-user-item[data-v-c718d5eb] {
	display: flex;
	align-items: center;
	padding: 12px 20px;
	height: 64px;
	box-sizing: border-box
}

.skeleton-user-item .skeleton-avatar[data-v-c718d5eb] {
	margin-right: 12px
}

.skeleton-user-item .skeleton-info[data-v-c718d5eb] {
	flex: 1;
	min-width: 0
}

@keyframes skeleton-shimmer-c718d5eb {
	0% {
		background-position: -200px 0
	}

	to {
		background-position: calc(200px + 100%) 0
	}
}

@keyframes skeleton-pulse-c718d5eb {
	0% {
		opacity: 1
	}

	50% {
		opacity: .4
	}

	to {
		opacity: 1
	}
}

@media (max-width: 480px) {
	.skeleton-user-card[data-v-c718d5eb] {
		padding: 12px
	}

	.skeleton-user-card .skeleton-avatar[data-v-c718d5eb] {
		width: 40px;
		height: 40px
	}

	.skeleton-user-card .skeleton-stats[data-v-c718d5eb] {
		gap: 12px
	}

	.skeleton-button[data-v-c718d5eb] {
		width: 64px;
		height: 28px
	}
}

.skeleton-list[data-v-1c448e46] {
	padding: 0;
	margin: 0
}

.skeleton-list[data-v-1c448e46]:not(.grid-layout):not(.waterfall-layout) {
	display: flex;
	flex-direction: column;
	gap: 12px
}

.skeleton-list.grid-layout[data-v-1c448e46] {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 15px
}

.skeleton-list.waterfall-layout[data-v-1c448e46] {
	column-count: 2;
	column-gap: 10px;
	list-style: none
}

.skeleton-list.waterfall-layout[data-v-1c448e46]>* {
	break-inside: avoid;
	margin-bottom: 10px
}

@media (min-width: 960px) {
	.skeleton-list.waterfall-layout[data-v-1c448e46] {
		column-count: 4;
		column-gap: 15px
	}
}

@media (max-width: 480px) {
	.skeleton-list.grid-layout[data-v-1c448e46] {
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
		gap: 10px
	}

	.skeleton-list[data-v-1c448e46]:not(.grid-layout):not(.waterfall-layout) {
		gap: 8px
	}
}

.mention-modal-overlay[data-v-ea9d41cc] {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--overlay-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2000;
	animation: fadeIn-ea9d41cc .2s ease
}

.mention-modal[data-v-ea9d41cc] {
	background: var(--bg-color-primary);
	border-radius: 12px;
	box-shadow: 0 8px 32px #0003;
	width: 400px;
	max-width: 90vw;
	max-height: 300px;
	overflow: hidden;
	animation: scaleIn-ea9d41cc .2s ease;
	display: flex;
	flex-direction: column
}

.mention-header[data-v-ea9d41cc] {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 20px;
	border-bottom: 1px solid var(--border-color-primary);
	flex-shrink: 0
}

.mention-header h4[data-v-ea9d41cc] {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	color: var(--text-color-primary)
}

.header-actions[data-v-ea9d41cc] {
	display: flex;
	align-items: center;
	gap: 8px
}

.refresh-btn[data-v-ea9d41cc],
.close-btn[data-v-ea9d41cc] {
	background: none;
	border: none;
	cursor: pointer;
	padding: 4px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text-color-primary);
	transition: all .2s ease
}

.close-btn[data-v-ea9d41cc] {
	background: var(--bg-color-secondary)
}

.refresh-btn[data-v-ea9d41cc]:disabled {
	opacity: .5;
	cursor: not-allowed
}

.spinning[data-v-ea9d41cc] {
	animation: spin-ea9d41cc 1s linear infinite
}

.refresh-btn[data-v-ea9d41cc]:hover:not(:disabled) {
	background: var(--bg-color-secondary);
	color: var(--text-color-secondary)
}

.close-btn[data-v-ea9d41cc]:hover {
	scale: 1.1;
	color: var(--text-color-secondary)
}

.mention-search[data-v-ea9d41cc] {
	padding: 5px 20px;
	border-bottom: 1px solid var(--border-color-primary);
	flex-shrink: 0
}

.search-input[data-v-ea9d41cc] {
	width: 100%;
	padding: 8px 12px;
	border: 1px solid var(--border-color-primary);
	border-radius: 6px;
	font-size: 14px;
	background: var(--bg-color-primary);
	color: var(--text-color-primary);
	transition: border-color .2s ease;
	box-sizing: border-box;
	caret-color: var(--primary-color)
}

.search-input[data-v-ea9d41cc]:focus {
	outline: none;
	border-color: var(--primary-color)
}

.search-input[data-v-ea9d41cc]::placeholder {
	color: var(--text-color-secondary)
}

.mention-content[data-v-ea9d41cc] {
	flex: 1;
	overflow-y: auto;
	min-height: 200px;
	max-height: 400px
}

.loading-state[data-v-ea9d41cc] {
	padding: 8px 0
}

.empty-state[data-v-ea9d41cc] {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 40px 20px;
	color: var(--text-color-secondary)
}

.empty-icon[data-v-ea9d41cc] {
	margin-bottom: 12px;
	opacity: .5
}

.friends-list[data-v-ea9d41cc] {
	padding: 2px 0;
	max-height: 400px;
	overflow-y: auto
}

.friend-item[data-v-ea9d41cc] {
	display: flex;
	align-items: center;
	padding: 5px 16px;
	cursor: pointer;
	transition: background-color .2s
}

.friend-item[data-v-ea9d41cc]:hover {
	background: var(--bg-color-secondary)
}

.friend-item.loading-disabled[data-v-ea9d41cc] {
	opacity: .6;
	cursor: not-allowed;
	pointer-events: none
}

.friend-item.loading-disabled[data-v-ea9d41cc]:hover {
	background: transparent;
	transform: none
}

.friend-avatar[data-v-ea9d41cc] {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	object-fit: cover;
	margin-right: 12px;
	flex-shrink: 0
}

.friend-info[data-v-ea9d41cc] {
	flex: 1;
	min-width: 0
}

.friend-nickname-container[data-v-ea9d41cc] {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-bottom: 2px
}

.friend-nickname[data-v-ea9d41cc] {
	font-size: 12px;
	font-weight: 500;
	color: var(--text-color-primary)
}

.friend-id[data-v-ea9d41cc] {
	font-size: 12px;
	color: var(--text-color-secondary)
}

.mention-content[data-v-ea9d41cc]::-webkit-scrollbar {
	width: 6px
}

.mention-content[data-v-ea9d41cc]::-webkit-scrollbar-track {
	background: transparent
}

.mention-content[data-v-ea9d41cc]::-webkit-scrollbar-thumb {
	background: var(--border-color-secondary);
	border-radius: 3px
}

.mention-content[data-v-ea9d41cc]::-webkit-scrollbar-thumb:hover {
	background: var(--border-color-primary)
}

@keyframes fadeIn-ea9d41cc {
	0% {
		opacity: 0
	}

	to {
		opacity: 1
	}
}

@keyframes scaleIn-ea9d41cc {
	0% {
		opacity: 0;
		transform: scale(.8)
	}

	to {
		opacity: 1;
		transform: scale(1)
	}
}

@keyframes spin-ea9d41cc {
	0% {
		transform: rotate(0)
	}

	to {
		transform: rotate(360deg)
	}
}

@media (max-width: 480px) {
	.mention-modal[data-v-ea9d41cc] {
		width: 95vw;
		max-height: 80vh;
		margin: 10px
	}

	.mention-header[data-v-ea9d41cc] {
		padding: 8px 16px
	}

	.mention-title[data-v-ea9d41cc] {
		font-size: 16px
	}

	.close-btn[data-v-ea9d41cc] {
		width: 28px;
		height: 28px;
		font-size: 16px
	}

	.mention-search[data-v-ea9d41cc] {
		padding: 12px 16px
	}

	.search-input[data-v-ea9d41cc] {
		font-size: 14px;
		padding: 8px 12px
	}

	.mention-content[data-v-ea9d41cc] {
		min-height: 150px;
		max-height: 300px
	}

	.friend-item[data-v-ea9d41cc] {
		padding: 10px 16px
	}

	.friend-avatar[data-v-ea9d41cc] {
		width: 32px;
		height: 32px
	}

	.friend-info[data-v-ea9d41cc] {
		margin-left: 10px
	}

	.friend-name[data-v-ea9d41cc] {
		font-size: 14px
	}

	.friend-bio[data-v-ea9d41cc] {
		font-size: 12px
	}

	.skeleton-item[data-v-ea9d41cc] {
		padding: 10px 16px;
		height: 56px
	}

	.skeleton-avatar[data-v-ea9d41cc] {
		width: 28px;
		height: 28px;
		margin-right: 10px
	}
}

.text-image-modal-overlay[data-v-e0934bcb] {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--overlay-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	padding: 1rem
}

.text-image-modal[data-v-e0934bcb] {
	background: var(--bg-color-primary);
	border-radius: 8px;
	width: 100%;
	max-width: 700px;
	max-height: 90vh;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: 0 4px 20px var(--shadow-color)
}

.modal-header[data-v-e0934bcb] {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 30px;
	border-bottom: 1px solid var(--border-color-primary);
	flex-shrink: 0;
	background: var(--bg-color-primary)
}

.modal-title[data-v-e0934bcb] {
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--text-color-primary);
	margin: 0
}

.close-btn[data-v-e0934bcb] {
	background: none;
	border: none;
	cursor: pointer;
	padding: 5px;
	color: var(--text-color-secondary);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all .2s ease
}

.close-btn[data-v-e0934bcb]:hover {
	color: var(--text-color-primary);
	background-color: var(--bg-color-secondary)
}

.modal-body[data-v-e0934bcb] {
	flex: 1;
	overflow-y: auto;
	padding: 30px;
	display: flex;
	flex-direction: column;
	gap: 30px;
	background: var(--bg-color-primary)
}

.main-content[data-v-e0934bcb] {
	display: flex;
	flex-direction: row;
	gap: 30px;
	flex: 1
}

.preview-section[data-v-e0934bcb] {
	flex: 0 0 300px;
	text-align: center
}

.controls-section[data-v-e0934bcb] {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-width: 0
}

.input-emoji-container[data-v-e0934bcb] {
	display: flex;
	flex-direction: column;
	gap: 16px;
	flex: 1
}

.preview-container[data-v-e0934bcb] {
	width: 100%;
	border: 2px dashed var(--border-color-primary);
	border-radius: 3px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--bg-color-primary);
	min-height: 400px;
	overflow: hidden;
	position: relative
}

.preview-container[data-v-e0934bcb]:has(.preview-image) {
	border: none
}

.preview-placeholder[data-v-e0934bcb] {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	color: var(--text-color-secondary)
}

.preview-placeholder p[data-v-e0934bcb] {
	margin: 0;
	font-size: 18px
}

.preview-canvas[data-v-e0934bcb] {
	display: block;
	border-radius: 8px;
	border: 1px solid var(--border-color-primary);
	max-width: 100%;
	height: auto
}

.preview-image[data-v-e0934bcb] {
	max-width: 100%;
	max-height: 400px;
	border-radius: 8px;
	object-fit: contain;
	display: block;
	margin: 0 auto
}

.hidden-canvas[data-v-e0934bcb] {
	display: none !important
}

.input-section[data-v-e0934bcb] {
	position: relative
}

.content-input-wrapper[data-v-e0934bcb] {
	position: relative;
	border: 1px solid var(--border-color-primary);
	border-radius: 8px;
	background: var(--bg-color-primary);
	transition: all .2s ease
}

.content-input-wrapper[data-v-e0934bcb]:focus-within {
	border-color: var(--primary-color)
}

.content-textarea[data-v-e0934bcb] {
	width: 100%;
	padding: 1rem 1rem 3rem;
	border: none;
	border-radius: 8px;
	background: transparent;
	color: var(--text-color-primary);
	font-size: 16px;
	line-height: 1.5;
	transition: all .2s ease;
	min-height: 80px;
	box-sizing: border-box;
	caret-color: var(--primary-color)
}

.content-textarea[data-v-e0934bcb]:focus {
	outline: none
}

.content-textarea[data-v-e0934bcb]:empty:before {
	content: attr(placeholder);
	color: var(--text-color-secondary);
	pointer-events: none
}

.content-actions[data-v-e0934bcb] {
	position: absolute;
	bottom: .5rem;
	left: 1rem;
	display: flex;
	align-items: center;
	gap: 8px
}

.emoji-btn[data-v-e0934bcb] {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: none;
	background: transparent;
	color: var(--text-color-secondary);
	border-radius: 50%;
	cursor: pointer;
	transition: all .2s ease
}

.emoji-btn[data-v-e0934bcb]:hover {
	background: var(--bg-color-secondary);
	color: var(--text-color-primary)
}

.emoji-icon[data-v-e0934bcb] {
	width: 20px;
	height: 20px
}

.emoji-panel-overlay[data-v-e0934bcb] {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	animation: fadeIn-e0934bcb .2s ease
}

.emoji-panel[data-v-e0934bcb] {
	background: var(--bg-color-primary);
	border-radius: 12px;
	box-shadow: 0 8px 32px #0003;
	overflow: hidden;
	animation: scaleIn-e0934bcb .2s ease;
	max-width: 90vw;
	max-height: 80vh
}

@keyframes fadeIn-e0934bcb {
	0% {
		opacity: 0
	}

	to {
		opacity: 1
	}
}

@keyframes scaleIn-e0934bcb {
	0% {
		opacity: 0;
		transform: scale(.8)
	}

	to {
		opacity: 1;
		transform: scale(1)
	}
}

.font-controls[data-v-e0934bcb] {
	background: var(--bg-color-primary);
	border-radius: 8px;
	padding: 8px 10px;
	border: 1px solid var(--border-color-primary);
	display: flex;
	flex-direction: column;
	gap: 10px
}

.control-group[data-v-e0934bcb] {
	display: flex;
	align-items: center;
	gap: 12px
}

.control-group[data-v-e0934bcb]:last-child {
	margin-bottom: 0
}

.control-label[data-v-e0934bcb] {
	font-size: 14px;
	font-weight: 500;
	color: var(--text-color-primary);
	margin: 0
}

.color-controls[data-v-e0934bcb] {
	display: flex;
	flex-direction: row;
	gap: 16px
}

.color-picker[data-v-e0934bcb] {
	width: 25px;
	height: 25px;
	box-shadow: 0 0 0 2px var(--border-color-primary);
	border-radius: 50%;
	cursor: pointer;
	background: none;
	padding: 0
}

.color-picker[data-v-e0934bcb]::-webkit-color-swatch-wrapper {
	padding: 0;
	border: none;
	border-radius: 6px
}

.color-picker[data-v-e0934bcb]::-webkit-color-swatch {
	border: none;
	border-radius: 6px
}

.template-section[data-v-e0934bcb] {
	flex-shrink: 0
}

.section-title[data-v-e0934bcb] {
	font-size: 16px;
	font-weight: 600;
	color: var(--text-color-primary)
}

.template-scroll-container[data-v-e0934bcb] {
	overflow-x: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--scrollbar-thumb-color) transparent
}

.template-scroll-container[data-v-e0934bcb]::-webkit-scrollbar {
	height: 6px
}

.template-scroll-container[data-v-e0934bcb]::-webkit-scrollbar-track {
	background: var(--scrollbar-track-color);
	border-radius: 3px
}

.template-scroll-container[data-v-e0934bcb]::-webkit-scrollbar-thumb {
	background: var(--scrollbar-thumb-color);
	border-radius: 3px
}

.template-scroll-container[data-v-e0934bcb]::-webkit-scrollbar-thumb:hover {
	background: var(--scrollbar-thumb-hover-color)
}

.template-list[data-v-e0934bcb] {
	display: flex;
	gap: 12px;
	padding: 8px 12px
}

.template-item[data-v-e0934bcb] {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex-shrink: 0;
	width: 80px;
	cursor: pointer;
	transition: all .2s ease
}

.template-item:hover .template-image[data-v-e0934bcb] {
	scale: 1.05;
	border: 1px solid var(--primary-color-shadow)
}

.template-item.active .template-image[data-v-e0934bcb] {
	scale: 1.05;
	border: 1px solid var(--primary-color)
}

.template-image[data-v-e0934bcb] {
	width: 80px;
	height: 120px;
	object-fit: cover;
	border-radius: 8px;
	border: 1px solid var(--border-color-primary);
	-webkit-user-select: none;
	user-select: none
}

.template-name[data-v-e0934bcb] {
	display: block;
	font-size: 12px;
	color: var(--text-color-secondary);
	font-weight: 500;
	margin: 4px 0 0;
	-webkit-user-select: none;
	user-select: none
}

.modal-footer[data-v-e0934bcb] {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 16px;
	padding: 8px 30px;
	border-top: 1px solid var(--border-color-primary);
	background: var(--bg-color-primary);
	flex-shrink: 0
}

.cancel-btn[data-v-e0934bcb],
.upload-btn[data-v-e0934bcb] {
	padding: 10px 24px;
	border-radius: 8px;
	font-size: 16px;
	font-weight: 500;
	cursor: pointer;
	transition: all .2s ease;
	border: none;
	min-width: 80px
}

.cancel-btn[data-v-e0934bcb] {
	background: var(--bg-color-primary);
	color: var(--text-color-secondary);
	border: 1px solid var(--border-color-primary)
}

.cancel-btn[data-v-e0934bcb]:hover {
	background: var(--bg-color-secondary);
	color: var(--text-color-primary)
}

.upload-btn[data-v-e0934bcb]:disabled {
	opacity: .6;
	cursor: not-allowed;
	transform: none;
	box-shadow: none
}

.upload-btn[data-v-e0934bcb] {
	background: var(--primary-color);
	color: #fff
}

.upload-btn[data-v-e0934bcb]:hover {
	background-color: var(--primary-color-dark)
}

@media (max-width: 768px) {
	.color-controls[data-v-e0934bcb] {
		flex-direction: row;
		gap: 24px
	}
}

@media (max-width: 640px) {
	.text-image-modal[data-v-e0934bcb] {
		margin: .5rem;
		max-width: none
	}

	.modal-header[data-v-e0934bcb],
	.modal-body[data-v-e0934bcb],
	.modal-footer[data-v-e0934bcb] {
		padding: 1rem
	}

	.main-content[data-v-e0934bcb] {
		flex-direction: column;
		gap: 20px
	}

	.preview-section[data-v-e0934bcb] {
		flex: none
	}

	.preview-container[data-v-e0934bcb] {
		min-height: 250px
	}

	.preview-image[data-v-e0934bcb] {
		max-height: 300px
	}

	.template-item[data-v-e0934bcb],
	.template-image[data-v-e0934bcb] {
		width: 100px
	}
}

.publish-container[data-v-9d41aeb8] {
	min-height: 100vh;
	background: var(--bg-color-primary);
	color: var(--text-color-primary);
	padding-bottom: calc(48px + constant(safe-area-inset-bottom));
	padding-bottom: calc(48px + env(safe-area-inset-bottom));
	margin: 72px auto;
	min-width: 700px;
	max-width: 700px;
	transition: background-color .2s ease
}

.publish-header[data-v-9d41aeb8] {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem;
	background: var(--bg-color-primary);
	border-bottom: 1px solid var(--border-color-primary);
	position: sticky;
	top: 0;
	z-index: 100;
	transition: background-color .2s ease, border-color .2s ease
}

.header-left[data-v-9d41aeb8],
.header-right[data-v-9d41aeb8] {
	display: flex;
	align-items: center;
	gap: .75rem
}

.draft-box-btn[data-v-9d41aeb8] {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .5rem 1rem;
	background: var(--primary-color);
	color: #fff;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	font-size: .9rem;
	font-weight: 500;
	transition: all .2s ease
}

.draft-box-btn[data-v-9d41aeb8]:hover {
	background: var(--primary-color-dark)
}

.manage-btn[data-v-9d41aeb8] {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .5rem 1rem;
	background: var(--primary-color);
	color: #fff;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	font-size: .9rem;
	font-weight: 500;
	transition: all .2s ease
}

.manage-btn[data-v-9d41aeb8]:hover {
	background: var(--primary-color-dark)
}

.page-title[data-v-9d41aeb8] {
	font-size: 1.2rem;
	font-weight: 600;
	margin: 0;
	color: var(--text-color-primary)
}

.header-actions[data-v-9d41aeb8] {
	display: flex;
	align-items: center;
	gap: .75rem
}

.draft-btn[data-v-9d41aeb8] {
	width: 20%;
	padding: 12px;
	background-color: var(--text-color-secondary);
	color: #fff;
	border: none;
	border-radius: 6px;
	font-size: 16px;
	font-weight: 500;
	cursor: pointer;
	transition: background-color .2s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px
}

.draft-btn[data-v-9d41aeb8]:hover:not(:disabled) {
	background: var(--text-color-primary)
}

.draft-btn[data-v-9d41aeb8]:disabled {
	opacity: .5;
	cursor: not-allowed
}

.publish-btn[data-v-9d41aeb8] {
	width: 20%;
	padding: 12px;
	background-color: var(--primary-color);
	color: #fff;
	border: none;
	border-radius: 6px;
	font-size: 16px;
	font-weight: 500;
	cursor: pointer;
	transition: background-color .2s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px
}

.publish-btn[data-v-9d41aeb8]:hover:not(:disabled) {
	background: var(--primary-color-dark)
}

.publish-btn[data-v-9d41aeb8]:disabled {
	opacity: .5;
	cursor: not-allowed
}

.loading-icon[data-v-9d41aeb8] {
	animation: spin-9d41aeb8 1s linear infinite
}

.publish-content[data-v-9d41aeb8] {
	padding: 1rem;
	max-width: 600px;
	margin: 0 auto;
	background-color: var(--bg-color-primary);
	transition: background-color .2s ease
}

.publish-form[data-v-9d41aeb8] {
	display: flex;
	flex-direction: column;
	gap: 1rem
}

.upload-section[data-v-9d41aeb8] {
	margin-bottom: .5rem
}

.upload-tabs[data-v-9d41aeb8] {
	display: flex;
	margin-bottom: 1rem;
	border-bottom: 1px solid var(--border-color-primary)
}

.tab-btn[data-v-9d41aeb8] {
	padding: 12px 24px;
	border: none;
	background: transparent;
	color: var(--text-color-secondary);
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: all .2s ease;
	border-bottom: 2px solid transparent;
	position: relative
}

.tab-btn[data-v-9d41aeb8]:hover {
	color: var(--text-color-primary)
}

.tab-btn.active[data-v-9d41aeb8] {
	color: var(--primary-color);
	border-bottom-color: var(--primary-color)
}

.upload-content[data-v-9d41aeb8] {
	margin-bottom: 1rem
}

.image-upload-section[data-v-9d41aeb8] {
	margin-bottom: .5rem
}

.input-section[data-v-9d41aeb8] {
	position: relative
}

.title-input[data-v-9d41aeb8] {
	width: 100%;
	padding: 10px;
	border: 1px solid var(--border-color-primary);
	border-radius: 8px;
	background: var(--bg-color-primary);
	color: var(--text-color-primary);
	font-size: 16px;
	font-weight: 700;
	transition: all .2s ease;
	box-sizing: border-box
}

.title-input[data-v-9d41aeb8]:focus {
	outline: none;
	border-color: var(--primary-color)
}

.title-input[data-v-9d41aeb8]::placeholder {
	color: var(--text-color-secondary)
}

.content-input-wrapper[data-v-9d41aeb8] {
	position: relative;
	border: 1px solid var(--border-color-primary);
	border-radius: 8px;
	background: var(--bg-color-primary);
	transition: all .2s ease
}

.content-input-wrapper[data-v-9d41aeb8]:focus-within {
	border-color: var(--primary-color)
}

.content-textarea[data-v-9d41aeb8] {
	width: 100%;
	padding: 1rem 1rem 3rem;
	border: none;
	border-radius: 8px;
	background: transparent;
	color: var(--text-color-primary);
	font-size: 16px;
	line-height: 1.5;
	transition: all .2s ease;
	min-height: 120px;
	box-sizing: border-box;
	caret-color: var(--primary-color)
}

.content-textarea[data-v-9d41aeb8]:focus {
	outline: none
}

.content-textarea[data-v-9d41aeb8]:empty:before {
	content: attr(placeholder);
	color: var(--text-color-secondary);
	pointer-events: none
}

.content-actions[data-v-9d41aeb8] {
	position: absolute;
	bottom: .5rem;
	left: 1rem;
	display: flex;
	align-items: center;
	gap: 8px
}

.emoji-btn[data-v-9d41aeb8],
.mention-btn[data-v-9d41aeb8] {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: none;
	background: transparent;
	color: var(--text-color-secondary);
	border-radius: 50%;
	cursor: pointer;
	transition: all .2s ease
}

.emoji-btn[data-v-9d41aeb8]:hover,
.mention-btn[data-v-9d41aeb8]:hover {
	background: var(--bg-color-secondary);
	color: var(--text-color-primary)
}

.emoji-icon[data-v-9d41aeb8],
.mention-icon[data-v-9d41aeb8] {
	width: 20px;
	height: 20px
}

.emoji-panel-overlay[data-v-9d41aeb8] {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	animation: fadeIn-9d41aeb8 .2s ease
}

.emoji-panel[data-v-9d41aeb8] {
	background: var(--bg-color-primary);
	border-radius: 12px;
	box-shadow: 0 8px 32px #0003;
	overflow: hidden;
	animation: scaleIn-9d41aeb8 .2s ease;
	max-width: 90vw;
	max-height: 80vh
}

@keyframes fadeIn-9d41aeb8 {
	0% {
		opacity: 0
	}

	to {
		opacity: 1
	}
}

@keyframes scaleIn-9d41aeb8 {
	0% {
		opacity: 0;
		transform: scale(.8)
	}

	to {
		opacity: 1;
		transform: scale(1)
	}
}

.char-count[data-v-9d41aeb8] {
	position: absolute;
	bottom: .5rem;
	right: .75rem;
	font-size: .8rem;
	color: var(--text-color-secondary);
	background: var(--bg-color-primary);
	padding: .25rem;
	transition: background-color .2s ease
}

.section-title[data-v-9d41aeb8] {
	font-size: .9rem;
	font-weight: 500;
	color: var(--text-color-primary);
	margin-bottom: .75rem
}

.tag-input-wrapper[data-v-9d41aeb8] {
	border: 1px solid var(--border-color-primary);
	border-radius: 8px;
	background: var(--bg-color-primary);
	padding: .75rem;
	transition: border-color .2s ease
}

.tag-input-wrapper[data-v-9d41aeb8]:focus-within {
	border-color: var(--primary-color)
}

.selected-tags[data-v-9d41aeb8] {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-bottom: .75rem
}

.selected-tag[data-v-9d41aeb8] {
	display: flex;
	align-items: center;
	gap: .25rem;
	padding: .4rem .6rem;
	background: var(--primary-color);
	color: var(--button-text-color);
	border-radius: 16px;
	font-size: .8rem;
	animation: fadeIn-9d41aeb8 .2s ease
}

@keyframes fadeIn-9d41aeb8 {
	0% {
		opacity: 0;
		transform: scale(.8)
	}

	to {
		opacity: 1;
		transform: scale(1)
	}
}

.remove-tag-btn[data-v-9d41aeb8] {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	border: none;
	background: #fff3;
	color: #fff;
	border-radius: 50%;
	cursor: pointer;
	transition: all .2s ease;
	font-size: 12px;
	line-height: 1
}

.remove-tag-btn[data-v-9d41aeb8]:hover {
	background: #ffffff4d;
	transform: scale(1.1)
}

.tag-input-container[data-v-9d41aeb8] {
	display: flex;
	align-items: center;
	gap: .5rem
}

.tag-input[data-v-9d41aeb8] {
	flex: 1;
	border: none;
	background: transparent;
	color: var(--text-color-primary);
	font-size: .9rem;
	outline: none;
	padding: .25rem 0
}

.tag-input[data-v-9d41aeb8]:disabled {
	background-color: var(--disabled-bg);
	cursor: not-allowed
}

.tag-input[data-v-9d41aeb8]::placeholder {
	color: var(--text-color-secondary)
}

.add-tag-btn[data-v-9d41aeb8] {
	padding: .25rem .75rem;
	background: var(--primary-color);
	color: #fff;
	border: none;
	border-radius: 4px;
	font-size: .8rem;
	cursor: pointer;
	transition: all .2s ease
}

.add-tag-btn[data-v-9d41aeb8]:hover {
	background: var(--primary-color-dark)
}

.tag-suggestions[data-v-9d41aeb8] {
	margin-top: .75rem;
	padding: .75rem;
	background: var(--bg-color-secondary);
	border-radius: 8px;
	border: 1px solid var(--border-color-primary)
}

.suggestions-title[data-v-9d41aeb8] {
	font-size: .8rem;
	color: var(--text-color-secondary);
	margin-bottom: .5rem
}

.suggestions-list[data-v-9d41aeb8] {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem
}

.tag-suggestion[data-v-9d41aeb8] {
	padding: .4rem .8rem;
	border: 1px solid var(--border-color-primary);
	border-radius: 16px;
	background: var(--bg-color-primary);
	color: var(--text-color-primary);
	font-size: .8rem;
	cursor: pointer;
	transition: all .2s ease
}

.tag-suggestion[data-v-9d41aeb8]:hover {
	border-color: var(--primary-color);
	background: var(--primary-color);
	color: #fff
}

.recommended-tags[data-v-9d41aeb8] {
	margin-top: .75rem;
	padding: .75rem;
	background: var(--bg-color-secondary);
	border-radius: 8px;
	border: 1px solid var(--border-color-primary)
}

.recommendations-title[data-v-9d41aeb8] {
	font-size: .8rem;
	color: var(--text-color-secondary);
	margin-bottom: .5rem
}

.tags-grid[data-v-9d41aeb8] {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem
}

.tag-item[data-v-9d41aeb8] {
	padding: .4rem .8rem;
	border: 1px solid var(--border-color-primary);
	border-radius: 16px;
	background: var(--bg-color-primary);
	color: var(--text-color-primary);
	font-size: .8rem;
	cursor: pointer;
	transition: all .2s ease
}

.tag-item[data-v-9d41aeb8]:hover {
	border-color: var(--primary-color);
	background: var(--primary-color);
	color: #fff
}

.tag-item.active[data-v-9d41aeb8] {
	background: var(--primary-color);
	color: #fff;
	border-color: var(--primary-color)
}

.category-section[data-v-9d41aeb8] {
	margin-bottom: 1rem
}

.publish-actions[data-v-9d41aeb8] {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1rem;
	padding: 2rem 1rem;
	margin-top: 2rem;
	background: var(--bg-color-primary)
}

.publish-actions .cancel-btn[data-v-9d41aeb8] {
	padding: .75rem 1.5rem;
	background: transparent;
	color: var(--text-color-secondary);
	border: 1px solid var(--border-color-primary);
	border-radius: 8px;
	font-size: .9rem;
	font-weight: 500;
	cursor: pointer;
	transition: all .2s ease;
	min-width: 100px
}

.publish-actions .loading-icon[data-v-9d41aeb8] {
	animation: spin-9d41aeb8 1s linear infinite
}

@keyframes spin-9d41aeb8 {
	0% {
		transform: rotate(0)
	}

	to {
		transform: rotate(360deg)
	}
}

@media (max-width: 960px) {
	.publish-container[data-v-9d41aeb8] {
		min-width: 100%;
		max-width: 100%;
		margin: 72px 0
	}

	.publish-header[data-v-9d41aeb8] {
		padding: .75rem 1rem
	}

	.header-right[data-v-9d41aeb8] {
		gap: .5rem
	}

	.draft-box-btn[data-v-9d41aeb8],
	.manage-btn[data-v-9d41aeb8] {
		padding: .4rem .8rem;
		font-size: .8rem
	}

	.publish-content[data-v-9d41aeb8] {
		padding: .75rem
	}

	.publish-actions[data-v-9d41aeb8] {
		padding: 1rem .75rem
	}
}

.login-prompt[data-v-9d41aeb8] {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 80px 20px;
	text-align: center
}

.prompt-content[data-v-9d41aeb8] {
	display: flex;
	flex-direction: column;
	align-items: center
}

.prompt-icon[data-v-9d41aeb8] {
	color: var(--text-color-quaternary);
	margin-bottom: 16px
}

.prompt-content h3[data-v-9d41aeb8] {
	color: var(--text-color-primary);
	font-size: 18px;
	font-weight: 600;
	margin: 0 0 8px
}

.prompt-content p[data-v-9d41aeb8] {
	color: var(--text-color-secondary);
	font-size: 14px;
	margin: 0 0 20px;
	line-height: 1.5
}

.tag-input[data-v-9d41aeb8] {
	min-width: 80px
}

.publish-actions[data-v-9d41aeb8] {
	padding: 1.5rem .75rem;
	gap: .75rem
}

.publish-actions .cancel-btn[data-v-9d41aeb8],
.publish-actions .draft-btn[data-v-9d41aeb8],
.publish-actions .publish-btn[data-v-9d41aeb8] {
	padding: .6rem 1.2rem;
	font-size: .85rem;
	min-width: 80px
}

@media (max-width: 480px) {
	.publish-header[data-v-9d41aeb8] {
		padding: 16px 14px
	}

	.page-title[data-v-9d41aeb8] {
		margin-left: 12px
	}

	.header-actions[data-v-9d41aeb8] {
		gap: .5rem
	}

	.cancel-btn[data-v-9d41aeb8],
	.draft-btn[data-v-9d41aeb8],
	.publish-btn[data-v-9d41aeb8] {
		padding: .4rem .8rem;
		font-size: .8rem
	}

	.publish-content[data-v-9d41aeb8] {
		padding: 1rem
	}

	.tag-input[data-v-9d41aeb8] {
		min-width: 60px;
		font-size: .85rem
	}

	.publish-actions[data-v-9d41aeb8] {
		padding: 1rem .5rem;
		gap: .5rem;
		flex-direction: column
	}
}

.text-image-section[data-v-9d41aeb8] {
	margin-top: .75rem;
	display: flex;
	justify-content: flex-start
}

.text-image-btn[data-v-9d41aeb8] {
	display: flex;
	align-items: center;
	padding: .4rem;
	background: var(--primary-color);
	color: var(--button-text-color);
	border: none;
	border-radius: 6px;
	cursor: pointer;
	font-size: 14px;
	font-weight: 500;
	transition: all .2s ease
}

.text-image-btn[data-v-9d41aeb8]:hover {
	background: var(--primary-color-dark)
}

.text-image-btn[data-v-9d41aeb8]:active {
	transform: translateY(0);
	box-shadow: 0 2px 4px #667eea33
}

.publish-actions .cancel-btn[data-v-9d41aeb8],
.publish-actions .draft-btn[data-v-9d41aeb8],
.publish-actions .publish-btn[data-v-9d41aeb8] {
	width: 100%;
	padding: .75rem;
	font-size: .9rem;
	min-width: unset
}

.simple-spinner[data-v-cb04fa29] {
	display: flex;
	justify-content: center;
	align-items: center
}

.simple-spinner-icon[data-v-cb04fa29] {
	animation: simpleRotate-cb04fa29 1s linear infinite
}

@keyframes simpleRotate-cb04fa29 {
	0% {
		transform: rotate(0)
	}

	to {
		transform: rotate(360deg)
	}
}

.content-renderer[data-v-086104a5] {
	width: 100%
}

.content-text[data-v-086104a5] {
	margin-bottom: 8px;
	line-height: 1.5;
	word-wrap: break-word
}

.mention-text[data-v-086104a5] {
	white-space: pre-wrap;
	word-wrap: break-word
}

[data-v-086104a5] .mention-link {
	color: var(--text-color-tag);
	text-decoration: none;
	font-weight: 500;
	cursor: pointer;
	transition: color .2s ease;
	background: none;
	border: none;
	padding: 0
}

[data-v-086104a5] .mention-link:hover {
	color: var(--text-color-tag);
	opacity: .8
}

[data-v-086104a5] .mention-link:active {
	color: var(--text-color-tag);
	opacity: .6
}

[data-v-086104a5] .mention-link:focus {
	outline: none;
	box-shadow: none;
	border: none
}

.content-images[data-v-086104a5] {
	margin-top: 8px
}

.images-grid[data-v-086104a5] {
	display: grid;
	gap: 4px;
	border-radius: 8px;
	overflow: hidden
}

.images-grid.single[data-v-086104a5] {
	grid-template-columns: 1fr;
	max-width: 200px
}

.images-grid.double[data-v-086104a5] {
	grid-template-columns: 1fr 1fr;
	max-width: 200px
}

.images-grid.triple[data-v-086104a5] {
	grid-template-columns: 1fr 1fr 1fr;
	max-width: 240px
}

.images-grid.quad[data-v-086104a5] {
	grid-template-columns: 1fr 1fr;
	max-width: 200px
}

.images-grid.multiple[data-v-086104a5] {
	grid-template-columns: repeat(3, 1fr);
	max-width: 240px
}

.image-item[data-v-086104a5] {
	position: relative;
	aspect-ratio: 1;
	cursor: pointer;
	border-radius: 4px;
	overflow: hidden;
	transition: transform .2s ease
}

.image-item[data-v-086104a5]:hover {
	transform: scale(1.02)
}

.content-image[data-v-086104a5] {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block
}

@media (max-width: 768px) {

	.images-grid.single[data-v-086104a5],
	.images-grid.double[data-v-086104a5] {
		max-width: 150px
	}

	.images-grid.triple[data-v-086104a5] {
		max-width: 180px
	}

	.images-grid.quad[data-v-086104a5] {
		max-width: 150px
	}

	.images-grid.multiple[data-v-086104a5] {
		max-width: 180px
	}
}

.fixedTab[data-v-1aa32d24] {
	position: fixed;
	top: 72px;
	left: 50%;
	transform: translate(-50%);
	width: calc(100% - 32px);
	max-width: 700px;
	background: var(--bg-color-primary);
	display: flex;
	padding: 16px;
	z-index: 200;
	overflow-x: auto;
	scrollbar-width: none;
	margin-bottom: 0;
	transition: background-color .2s ease
}

@media (min-width: 901px) {
	.fixedTab[data-v-1aa32d24] {
		left: calc(50% + 114px);
		transform: translate(-50%);
		width: 100%
	}
}

.fixedTab[data-v-1aa32d24]::-webkit-scrollbar {
	display: none
}

.tab-item[data-v-1aa32d24] {
	padding: 0 10px;
	height: 40px;
	width: 68px;
	font-size: 16px;
	color: var(--text-color-secondary);
	cursor: pointer;
	background: transparent;
	border-radius: 999px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	-webkit-user-select: none;
	user-select: none;
	position: relative;
	z-index: 2;
	transition: color .2s ease, background-color .2s ease
}

.tab-label[data-v-1aa32d24] {
	pointer-events: none
}

.unread-dot[data-v-1aa32d24] {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 8px;
	height: 8px;
	background: var(--danger-color);
	border-radius: 50%;
	pointer-events: none
}

.tab-item[data-v-1aa32d24]:last-child {
	margin-right: 0
}

.tab-item[data-v-1aa32d24]:hover {
	color: var(--text-color-primary);
	transition: color .2s ease
}

.tab-item.active[data-v-1aa32d24] {
	color: var(--text-color-primary);
	font-weight: 700;
	transition: color .2s ease
}

.tab-slider[data-v-1aa32d24] {
	position: absolute;
	height: 40px;
	border-radius: 20px;
	background: var(--bg-color-secondary);
	transition: left .3s cubic-bezier(.25, .46, .45, .94), width .3s cubic-bezier(.25, .46, .45, .94), background-color .2s ease;
	z-index: 1
}

.follow-btn[data-v-250d6345] {
	padding: 8px;
	border: none;
	border-radius: 20px;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	flex-shrink: 0;
	margin-left: 12px;
	width: 96px;
	height: 40px;
	text-align: center;
	transition: all .2s ease;
	-webkit-user-select: none;
	user-select: none;
	outline: none
}

.follow-btn[data-v-250d6345]:not(.following) {
	background: var(--primary-color);
	color: #fff
}

.follow-btn[data-v-250d6345]:not(.following):hover {
	background: var(--primary-color-dark)
}

.follow-btn.following[data-v-250d6345] {
	background: transparent;
	color: var(--text-color-secondary);
	border: 1px solid var(--border-color-secondary)
}

.follow-btn.following[data-v-250d6345]:hover {
	background: var(--bg-color-secondary);
	color: var(--text-color-primary)
}

.follow-btn.small[data-v-250d6345] {
	width: 88px;
	height: 32px;
	font-size: 14px;
	padding: 6px 8px;
	min-width: 88px
}

@media (max-width: 480px) {
	.follow-btn[data-v-250d6345] {
		padding: 6px 8px;
		font-size: 12px;
		width: 72px;
		height: 32px;
		min-width: 72px
	}

	.follow-btn.small[data-v-250d6345] {
		width: 68px;
		height: 28px;
		font-size: 11px;
		padding: 5px 6px;
		min-width: 68px
	}
}

.like-button[data-v-8a7cce18] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--text-color-secondary);
	transition: color .2s ease;
	border-radius: 4px;
	padding: 2px
}

.like-button[data-v-8a7cce18]:hover {
	color: var(--text-color-primary)
}

.like-btn-wrapper[data-v-8a7cce18] {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center
}

.scaling[data-v-8a7cce18] {
	animation: likeScale-8a7cce18 .5s linear both
}

.like-ring[data-v-8a7cce18] {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 1px solid #ff4757;
	background: transparent;
	transform: translate(-50%, -50%) scale(0);
	animation: likeRing-8a7cce18 .6s ease-out;
	pointer-events: none
}

.like-button.small .like-ring[data-v-8a7cce18] {
	width: 16px;
	height: 16px
}

.like-button.medium .like-ring[data-v-8a7cce18] {
	width: 20px;
	height: 20px
}

.like-button.large .like-ring[data-v-8a7cce18] {
	width: 24px;
	height: 24px
}

@keyframes likeScale-8a7cce18 {
	0% {
		transform: scale(1)
	}

	30% {
		transform: scale(.5)
	}

	50% {
		transform: scale(1.2)
	}

	80% {
		transform: scale(.9)
	}

	to {
		transform: scale(1)
	}
}

@keyframes likeRing-8a7cce18 {
	0% {
		transform: translate(-50%, -50%) scale(0);
		opacity: 1
	}

	to {
		transform: translate(-50%, -50%) scale(2);
		opacity: 0
	}
}

.image-upload-modal-overlay[data-v-92e65b43] {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--overlay-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	padding: 20px
}

.image-upload-modal[data-v-92e65b43] {
	background: var(--bg-color-primary);
	border-radius: 12px;
	box-shadow: 0 8px 32px #0003;
	width: 100%;
	max-width: 600px;
	max-height: 80vh;
	display: flex;
	flex-direction: column;
	overflow: hidden
}

.image-upload-header[data-v-92e65b43] {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 24px;
	border-bottom: 1px solid var(--border-color-primary);
	background: var(--bg-color-primary)
}

.image-upload-header h4[data-v-92e65b43] {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	color: var(--text-color-primary)
}

.close-btn[data-v-92e65b43] {
	width: 30px;
	height: 30px;
	background: var(--bg-color-secondary);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	cursor: pointer;
	padding: 5px;
	color: var(--text-color-primary);
	transition: all .2s ease
}

.close-btn[data-v-92e65b43]:hover {
	color: var(--text-color-secondary);
	transform: scale(1.1);
	transition: all .2s ease
}

.image-upload-content[data-v-92e65b43] {
	flex: 1;
	padding: 24px;
	overflow-y: auto
}

.image-upload-footer[data-v-92e65b43] {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	padding: 20px 24px;
	border-top: 1px solid var(--border-color-primary);
	background: var(--bg-color-primary)
}

.cancel-btn[data-v-92e65b43],
.confirm-btn[data-v-92e65b43] {
	padding: 8px 16px;
	border-radius: 4px;
	font-size: 14px;
	cursor: pointer;
	transition: all .2s;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	text-decoration: none
}

.cancel-btn[data-v-92e65b43] {
	background-color: transparent;
	color: var(--text-color-secondary);
	border: 1px solid var(--border-color-primary)
}

.cancel-btn[data-v-92e65b43]:hover {
	background-color: var(--bg-color-secondary)
}

.confirm-btn[data-v-92e65b43] {
	background-color: var(--primary-color);
	color: #fff;
	border: none
}

.confirm-btn[data-v-92e65b43]:hover:not(:disabled) {
	background-color: var(--primary-color-dark)
}

.confirm-btn[data-v-92e65b43]:disabled {
	opacity: .5;
	cursor: not-allowed
}

.multi-image-upload[data-v-92e65b43] {
	width: 100%
}

.upload-grid[data-v-92e65b43] {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	gap: 10px;
	margin-bottom: 10px
}

.image-item[data-v-92e65b43],
.upload-item[data-v-92e65b43] {
	aspect-ratio: 1;
	border-radius: 8px;
	overflow: hidden;
	position: relative
}

.image-item[data-v-92e65b43] {
	transition: all .2s ease;
	cursor: move;
	-webkit-user-select: none;
	user-select: none
}

.image-item[data-v-92e65b43]:hover {
	border-color: var(--primary-color);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px #00000026
}

.image-item.dragging[data-v-92e65b43] {
	opacity: .5;
	transform: scale(1.05) rotate(5deg);
	z-index: 1000;
	box-shadow: 0 8px 25px #0000004d
}

.image-item.touch-dragging[data-v-92e65b43] {
	opacity: .8;
	transform: scale(1.6) rotate(3deg);
	z-index: 1000
}

.image-item.long-pressing[data-v-92e65b43] {
	transform: scale(.95)
}

.image-preview[data-v-92e65b43] {
	width: 100%;
	height: 100%;
	position: relative
}

.image-preview img[data-v-92e65b43] {
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none
}

.image-overlay[data-v-92e65b43] {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--overlay-bg);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	padding: 8px;
	opacity: 0;
	transition: opacity .2s ease
}

.image-preview:hover .image-overlay[data-v-92e65b43] {
	opacity: 1
}

.image-actions[data-v-92e65b43] {
	display: flex;
	gap: 8px;
	align-self: flex-end
}

.action-btn[data-v-92e65b43] {
	background: #ffffffd0;
	border: none;
	border-radius: 50%;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all .2s ease;
	opacity: .5
}

.remove-btn[data-v-92e65b43]:hover:not(:disabled) {
	opacity: 1
}

.action-btn[data-v-92e65b43]:disabled {
	opacity: .5;
	cursor: not-allowed;
	background-color: #ffffff4d
}

.action-btn svg[data-v-92e65b43] {
	width: 12px;
	height: 12px
}

.image-index[data-v-92e65b43] {
	background: #0008;
	color: #fff;
	border-radius: 12px;
	padding: 4px 8px;
	font-size: 12px;
	font-weight: 700;
	align-self: flex-start
}

.upload-item[data-v-92e65b43] {
	border: 2px dashed var(--border-color-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all .2s ease;
	background: var(--bg-color-primary)
}

.upload-item[data-v-92e65b43]:hover {
	border-color: var(--primary-color)
}

.upload-item.uploading[data-v-92e65b43] {
	border-color: var(--primary-color);
	background-color: #ff47570d;
	cursor: not-allowed;
	opacity: .7
}

.upload-icon.uploading[data-v-92e65b43] {
	animation: spin-92e65b43 1s linear infinite;
	color: var(--primary-color)
}

.upload-placeholder[data-v-92e65b43] {
	text-align: center;
	color: var(--text-color-secondary)
}

.upload-icon[data-v-92e65b43] {
	width: 24px;
	height: 24px;
	margin-bottom: 5px;
	color: var(--text-color-secondary)
}

.upload-placeholder p[data-v-92e65b43] {
	margin: 2px 0;
	font-size: 12px
}

.upload-hint[data-v-92e65b43] {
	color: var(--text-color-secondary);
	font-size: 10px !important
}

.error-message[data-v-92e65b43] {
	color: var(--primary-color);
	font-size: 12px;
	margin-bottom: 10px
}

.upload-tips[data-v-92e65b43] {
	font-size: 12px;
	color: var(--text-color-secondary);
	line-height: 1.4
}

.upload-tips p[data-v-92e65b43] {
	margin: 2px 0
}

@keyframes spin-92e65b43 {
	0% {
		transform: rotate(0)
	}

	to {
		transform: rotate(360deg)
	}
}

@media (max-width: 768px) {
	.image-upload-modal-overlay[data-v-92e65b43] {
		padding: 10px
	}

	.image-upload-modal[data-v-92e65b43] {
		max-height: 90vh
	}

	.image-upload-header[data-v-92e65b43],
	.image-upload-footer[data-v-92e65b43] {
		padding: 16px 20px
	}

	.image-upload-content[data-v-92e65b43] {
		padding: 20px
	}

	.image-item[data-v-92e65b43] {
		touch-action: pan-y
	}

	.image-item.touch-dragging[data-v-92e65b43] {
		touch-action: none;
		transform: rotate(2deg)
	}

	.image-overlay[data-v-92e65b43] {
		pointer-events: none
	}

	.image-overlay .action-btn[data-v-92e65b43] {
		pointer-events: auto
	}

	.upload-grid[data-v-92e65b43] {
		-webkit-user-select: none;
		user-select: none
	}

	.image-item.long-pressing[data-v-92e65b43] {
		transform: scale(.9)
	}
}

.detail-card-overlay[data-v-52f4a370] {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--overlay-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	padding: 20px;
	animation: fadeIn-52f4a370 .3s ease-out
}

.detail-card[data-v-52f4a370] {
	max-width: 95vw;
	height: 90vh;
	max-height: 1020px;
	background: var(--bg-color-primary);
	border-radius: 12px;
	overflow: hidden;
	position: relative;
	display: flex
}

.detail-card-page[data-v-52f4a370] {
	width: 100%;
	min-height: calc(100vh - 64px);
	display: block;
	padding: 0;
	box-sizing: border-box
}

.detail-card.page-mode[data-v-52f4a370] {
	max-width: 1000px;
	width: 100%;
	height: calc(100vh - 100px);
	max-height: 800px;
	margin: 0 auto;
	box-shadow: 0 2px 10px #0000001a;
	overflow: hidden;
	position: relative;
	display: flex;
	flex-direction: row;
	border-radius: 12px
}

.detail-card.scale-in[data-v-52f4a370] {
	animation: scaleInFromPoint-52f4a370 .3s cubic-bezier(.25, .46, .45, .94);
	transform-origin: center center;
	will-change: transform, opacity
}

.detail-card.scale-out[data-v-52f4a370] {
	animation: scaleOutToPoint-52f4a370 .2s ease-out forwards;
	transform-origin: center center;
	will-change: transform, opacity
}

@media (max-width: 768px) {
	.detail-card.slide-in[data-v-52f4a370] {
		animation: slideInFromRight-52f4a370 .3s cubic-bezier(.25, .46, .45, .94);
		will-change: transform
	}
}

@media (max-width: 768px) {
	.detail-card.slide-out[data-v-52f4a370] {
		animation: slideOutToRight-52f4a370 .25s ease-out forwards;
		will-change: transform
	}
}

@keyframes scaleInFromPoint-52f4a370 {
	0% {
		transform: translate(var(--start-x, 0), var(--start-y, 0)) scale(.3);
		opacity: 0
	}

	to {
		transform: translate(0) scale(1);
		opacity: 1
	}
}

@keyframes scaleOutToPoint-52f4a370 {
	0% {
		transform: scale(1);
		opacity: 1
	}

	to {
		transform: scale(0);
		opacity: 0
	}
}

@keyframes slideInFromRight-52f4a370 {
	0% {
		transform: translate(100%)
	}

	to {
		transform: translate(0)
	}
}

@keyframes slideOutToRight-52f4a370 {
	0% {
		transform: translate(0)
	}

	to {
		transform: translate(100%)
	}
}

.close-btn[data-v-52f4a370] {
	position: absolute;
	top: 16px;
	left: 16px;
	width: 40px;
	height: 40px;
	border: none;
	background: var(--overlay-bg);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 10;
	color: #fff
}

.close-btn[data-v-52f4a370]:hover {
	background: #000000b3
}

.tooltip[data-v-52f4a370] {
	position: absolute;
	top: 50px;
	left: 60%;
	transform: translate(-50%);
	background: #000c;
	color: #fff;
	padding: 5px;
	border-radius: 6px;
	font-size: 12px;
	white-space: nowrap;
	z-index: 11;
	display: flex;
	align-items: center;
	gap: 3px
}

.tooltip[data-v-52f4a370]:before {
	content: "";
	position: absolute;
	top: -4px;
	left: 46%;
	transform: translate(-50%);
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-bottom: 4px solid rgba(0, 0, 0, .8)
}

.key-hint[data-v-52f4a370] {
	background: #fff3;
	padding: 2px 6px;
	border-radius: 4px;
	font-size: 11px;
	font-weight: 500
}

.detail-content[data-v-52f4a370] {
	display: flex;
	width: 100%;
	height: 100%
}

.image-section[data-v-52f4a370] {
	background: var(--bg-color-secondary);
	display: flex;
	align-items: center;
	justify-content: center
}

.image-section img[data-v-52f4a370] {
	width: 100%;
	height: 100%
}

.video-container[data-v-52f4a370] {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--bg-color-secondary)
}

.video-player[data-v-52f4a370] {
	width: 100%;
	height: 100%;
	max-width: 1000px;
	object-fit: contain;
	background: #000
}

.video-placeholder[data-v-52f4a370] {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--bg-color-secondary);
	color: var(--text-color-secondary)
}

.video-cover-placeholder[data-v-52f4a370] {
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: var(--bg-color-secondary)
}

.placeholder-content[data-v-52f4a370] {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px
}

.placeholder-content p[data-v-52f4a370] {
	margin: 0;
	font-size: 14px
}

.image-container[data-v-52f4a370] {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden
}

.image-slider[data-v-52f4a370] {
	display: flex;
	width: 100%;
	height: 100%;
	transition: transform .3s cubic-bezier(.4, 0, .2, 1)
}

.slider-image[data-v-52f4a370] {
	flex: 0 0 100%;
	width: 100%;
	height: 100%;
	object-fit: contain;
	background-color: var(--bg-color-secondary);
	cursor: zoom-in
}

.image-controls[data-v-52f4a370] {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none
}

.nav-btn-container[data-v-52f4a370] {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 60px;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: auto;
	z-index: 10
}

.prev-btn-container[data-v-52f4a370] {
	left: 0
}

.next-btn-container[data-v-52f4a370] {
	right: 0
}

.nav-btn[data-v-52f4a370] {
	position: relative;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #0000004d;
	border: none;
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all .3s ease;
	z-index: 10;
	pointer-events: auto;
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	opacity: 0
}

.nav-btn[data-v-52f4a370]:disabled {
	opacity: .3;
	cursor: not-allowed
}

.prev-btn[data-v-52f4a370] {
	transform: translate(-20px)
}

.next-btn[data-v-52f4a370] {
	transform: translate(20px)
}

.image-controls.visible .prev-btn[data-v-52f4a370],
.image-controls.visible .next-btn[data-v-52f4a370],
.image-container:hover .prev-btn[data-v-52f4a370],
.image-container:hover .next-btn[data-v-52f4a370] {
	transform: translate(0);
	opacity: 1
}

.image-container:hover .prev-btn[data-v-52f4a370]:hover:not(:disabled) {
	transform: translate(0) scale(1.1)
}

.image-container:hover .next-btn[data-v-52f4a370]:hover:not(:disabled) {
	transform: translate(0) scale(1.1)
}

.image-counter[data-v-52f4a370] {
	position: absolute;
	top: 16px;
	right: 16px;
	background: #0000004d;
	color: #fff;
	padding: 4px 8px;
	border-radius: 12px;
	font-size: 12px;
	font-weight: 500;
	z-index: 10;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	opacity: 0;
	transition: opacity .3s ease
}

.image-controls.visible .image-counter[data-v-52f4a370],
.image-container:hover .image-counter[data-v-52f4a370] {
	opacity: 1
}

.content-section[data-v-52f4a370] {
	display: flex;
	flex-direction: column;
	background: var(--bg-color-primary)
}

.author-wrapper[data-v-52f4a370] {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px;
	background: var(--bg-color-primary);
	position: sticky;
	top: 0;
	z-index: 5
}

.author-info[data-v-52f4a370] {
	display: flex;
	align-items: center;
	gap: 12px
}

.author-avatar-container[data-v-52f4a370] {
	position: relative;
	display: inline-block
}

.author-avatar[data-v-52f4a370] {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
	cursor: pointer
}

.author-verified-badge[data-v-52f4a370] {
	position: absolute;
	bottom: 0;
	right: -6px;
	z-index: 2;
	border: 2px solid var(--bg-color-primary);
	border-radius: 50%
}

.author-name-container[data-v-52f4a370] {
	display: flex;
	align-items: center;
	gap: 4px
}

.author-name[data-v-52f4a370] {
	font-weight: 600;
	color: var(--text-color-primary);
	font-size: 16px;
	cursor: pointer
}

.scrollable-content[data-v-52f4a370] {
	flex: 1;
	overflow-y: auto;
	padding: 0;
	-webkit-overflow-scrolling: touch;
	touch-action: auto;
	overscroll-behavior: auto
}

.post-content[data-v-52f4a370] {
	padding: 5px 16px 0
}

.post-title[data-v-52f4a370] {
	font-size: 18px;
	font-weight: 600;
	color: var(--text-color-primary);
	margin: 0 0 12px;
	line-height: 1.4;
	word-wrap: break-word;
	word-break: break-all;
	overflow-wrap: break-word
}

.post-text[data-v-52f4a370] {
	color: var(--text-color-primary);
	font-size: 16px;
	line-height: 1.6;
	margin: 0 0 16px;
	word-wrap: break-word;
	word-break: break-all;
	overflow-wrap: break-word
}

.post-tags[data-v-52f4a370] {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 16px
}

.tag[data-v-52f4a370] {
	color: var(--text-color-tag);
	font-size: 16px;
	cursor: pointer;
	text-decoration: none
}

.clickable-tag[data-v-52f4a370] {
	transition: color .2s ease, opacity .2s ease
}

.clickable-tag[data-v-52f4a370]:hover {
	opacity: .8
}

.post-meta[data-v-52f4a370] {
	display: flex;
	gap: 8px;
	color: var(--text-color-secondary);
	font-size: 14px
}

.divider[data-v-52f4a370] {
	height: 1px;
	background: var(--border-color-secondary);
	margin: 20px 0
}

.comments-section[data-v-52f4a370] {
	padding: 0 16px
}

.comments-header[data-v-52f4a370] {
	display: flex;
	align-items: center;
	justify-content: left;
	gap: 14px;
	margin-bottom: 16px;
	cursor: pointer;
	position: relative;
	padding: 4px 0;
	border-radius: 4px
}

.comments-header[data-v-52f4a370]:hover {
	background-color: var(--bg-color-hover)
}

.comments-header:hover .comments-title[data-v-52f4a370],
.comments-header:hover .sort-icon[data-v-52f4a370] {
	color: var(--text-color-primary)
}

.comments-title[data-v-52f4a370] {
	font-size: 14px;
	color: var(--text-color-secondary);
	-webkit-user-select: none;
	user-select: none
}

.sort-icon[data-v-52f4a370] {
	color: var(--text-color-secondary);
	transition: transform .2s ease, color .2s ease
}

.sort-menu[data-v-52f4a370] {
	position: absolute;
	top: 100%;
	left: 30px;
	background: var(--bg-color-primary);
	border: 1px solid var(--border-color-primary);
	border-radius: 8px;
	box-shadow: 0 4px 12px #0000001a;
	z-index: 1000;
	min-width: 80px;
	padding: 4px 2px;
	margin-top: 4px;
	-webkit-user-select: none;
	user-select: none
}

.sort-option[data-v-52f4a370] {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 12px;
	cursor: pointer;
	font-size: 14px;
	color: var(--text-color-primary);
	transition: background-color .2s ease;
	border-radius: 8px
}

.sort-option[data-v-52f4a370]:hover {
	background-color: var(--bg-color-secondary)
}

.sort-option.active[data-v-52f4a370] {
	background-color: var(--bg-color-active);
	color: var(--primary-color)
}

.tick-icon[data-v-52f4a370] {
	color: var(--primary-color)
}

.comments-loading[data-v-52f4a370] {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 40px 0;
	color: var(--text-color-secondary);
	font-size: 14px
}

.loading-spinner[data-v-52f4a370] {
	width: 16px;
	height: 16px;
	border: 2px solid var(--border-color-secondary);
	border-top: 2px solid var(--primary-color);
	border-radius: 50%;
	animation: spin-52f4a370 1s linear infinite
}

@keyframes spin-52f4a370 {
	0% {
		transform: rotate(0)
	}

	to {
		transform: rotate(360deg)
	}
}

.no-comments[data-v-52f4a370] {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px 0;
	color: var(--text-color-secondary);
	font-size: 14px
}

.comment-item[data-v-52f4a370] {
	display: flex;
	gap: 12px;
	margin-bottom: 16px;
	padding: 6px;
	border-radius: 8px;
	transition: all .3s ease
}

.comment-item.comment-highlight[data-v-52f4a370],
.reply-item.comment-highlight[data-v-52f4a370] {
	background-color: var(--bg-color-secondary);
	animation: highlightFadeIn-52f4a370 .5s ease-out, highlightFadeOut-52f4a370 5s ease-out .5s forwards
}

@keyframes highlightFadeIn-52f4a370 {
	0% {
		background-color: transparent
	}

	to {
		background-color: var(--bg-color-secondary)
	}
}

@keyframes highlightFadeOut-52f4a370 {
	0% {
		background-color: var(--bg-color-secondary)
	}

	to {
		background-color: transparent
	}
}

.comment-avatar-container[data-v-52f4a370] {
	position: relative;
	display: inline-block;
	flex-shrink: 0;
	width: 32px;
	height: 32px
}

.comment-avatar[data-v-52f4a370] {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	object-fit: cover;
	cursor: pointer;
	display: block
}

.comment-verified-badge[data-v-52f4a370] {
	position: absolute;
	bottom: -5px;
	right: -6px;
	z-index: 2;
	border: 2px solid var(--bg-color-primary);
	border-radius: 50%
}

.comment-content[data-v-52f4a370] {
	flex: 1;
	min-width: 0
}

.comment-header[data-v-52f4a370] {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 4px
}

.comment-user-info[data-v-52f4a370] {
	display: flex;
	align-items: center;
	gap: 6px
}

.author-badge[data-v-52f4a370] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: var(--primary-color-shadow);
	color: var(--primary-color);
	font-weight: 600;
	border-radius: 999px;
	font-size: 9px;
	white-space: nowrap;
	opacity: .7;
	flex-shrink: 0
}

.author-badge--parent[data-v-52f4a370] {
	padding: 2px 6px
}

.author-badge--reply[data-v-52f4a370] {
	padding: 1px 5px
}

.comment-username[data-v-52f4a370] {
	color: var(--text-color-secondary);
	font-size: 14px;
	cursor: pointer
}

.comment-time[data-v-52f4a370] {
	color: var(--text-color-secondary);
	font-size: 12px
}

.comment-delete-btn[data-v-52f4a370] {
	font-size: 12px;
	color: var(--text-color-secondary);
	background: none;
	border: none;
	cursor: pointer;
	padding: 0 8px;
	margin-left: 8px;
	transition: opacity .2s
}

.comment-delete-btn[data-v-52f4a370]:hover {
	color: var(--text-color-primary)
}

.comment-text[data-v-52f4a370] {
	color: var(--text-color-primary);
	font-size: 14px;
	line-height: 1.5;
	margin: 0 0 2px;
	word-wrap: break-word;
	word-break: break-all;
	overflow-wrap: break-word
}

.comment-text[data-v-52f4a370] p {
	margin: 0;
	padding: 0 0 2px
}

.comment-actions[data-v-52f4a370] {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 8px
}

.comment-like-container[data-v-52f4a370] {
	display: flex;
	align-items: center;
	gap: 4px
}

.comment-replay-container[data-v-52f4a370] {
	display: flex;
	align-items: center;
	color: var(--text-color-secondary)
}

.comment-replay-icon[data-v-52f4a370] {
	cursor: pointer;
	transition: all .2s ease;
	padding: 2px;
	border-radius: 4px
}

.comment-replay-icon[data-v-52f4a370]:hover {
	cursor: pointer;
	color: var(--text-color-primary)
}

.like-count[data-v-52f4a370] {
	color: var(--text-color-secondary);
	font-size: 12px;
	font-weight: 500
}

.comment-reply[data-v-52f4a370] {
	background: none;
	border: none;
	color: var(--text-color-secondary);
	font-size: 12px;
	cursor: pointer;
	padding: 4px;
	border-radius: 4px;
	transition: color .2s ease
}

.comment-reply[data-v-52f4a370]:hover {
	color: var(--text-color-primary)
}

.replies-list[data-v-52f4a370] {
	margin-top: 12px;
	padding-left: 20px;
	border-left: 2px solid var(--border-color-secondary)
}

.reply-item[data-v-52f4a370] {
	display: flex;
	gap: 8px;
	margin-bottom: 12px;
	padding: 4px;
	border-radius: 8px;
	transition: all .3s ease
}

.reply-avatar-container[data-v-52f4a370] {
	position: relative;
	display: inline-block;
	flex-shrink: 0;
	width: 24px;
	height: 24px
}

.reply-avatar[data-v-52f4a370] {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	object-fit: cover;
	cursor: pointer;
	display: block
}

.reply-verified-badge[data-v-52f4a370] {
	position: absolute;
	bottom: -4px;
	right: -4px;
	z-index: 2;
	border: 1px solid var(--bg-color-primary);
	border-radius: 50%
}

.reply-content[data-v-52f4a370] {
	flex: 1;
	min-width: 0
}

.reply-header[data-v-52f4a370] {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 2px
}

.reply-user-info[data-v-52f4a370] {
	display: flex;
	align-items: center;
	gap: 6px
}

.reply-username[data-v-52f4a370] {
	font-weight: 600;
	color: var(--text-color-primary);
	font-size: 12px;
	cursor: pointer
}

.reply-time[data-v-52f4a370] {
	color: var(--text-color-secondary);
	font-size: 11px
}

.reply-text[data-v-52f4a370] {
	color: var(--text-color-primary);
	font-size: 14px;
	line-height: 1.4;
	margin: 0 0 6px;
	word-wrap: break-word;
	word-break: break-all;
	overflow-wrap: break-word
}

.reply-text[data-v-52f4a370] p {
	margin: 0;
	padding: 0
}

.reply-to[data-v-52f4a370] {
	color: var(--text-color-secondary);
	font-weight: 500
}

.reply-actions[data-v-52f4a370] {
	display: flex;
	align-items: center;
	gap: 12px
}

.reply-like-container[data-v-52f4a370] {
	display: flex;
	align-items: center;
	gap: 4px
}

.reply-replay-container[data-v-52f4a370] {
	display: flex;
	align-items: center;
	color: var(--text-color-secondary)
}

.reply-replay-icon[data-v-52f4a370]:hover {
	cursor: pointer;
	color: var(--text-color-primary)
}

.reply-reply[data-v-52f4a370] {
	background: none;
	border: none;
	color: var(--text-color-secondary);
	font-size: 12px;
	cursor: pointer;
	padding: 4px;
	border-radius: 4px;
	transition: color .2s ease
}

.reply-reply[data-v-52f4a370]:hover {
	color: var(--text-color-primary)
}

.replies-toggle[data-v-52f4a370] {
	margin-top: 8px;
	padding-left: 32px
}

.toggle-replies-btn[data-v-52f4a370] {
	background: none;
	border: none;
	color: var(--text-color-tag);
	font-size: 14px;
	cursor: pointer;
	padding: 4px 8px;
	border-radius: 12px;
	transition: all .2s ease;
	font-weight: 500
}

.footer-actions[data-v-52f4a370] {
	background: var(--bg-color-primary);
	border-top: 1px solid var(--border-color-secondary);
	padding: 0
}

.input-container[data-v-52f4a370] {
	transition: all .4s cubic-bezier(.4, 0, .2, 1);
	overflow: hidden
}

.reply-status[data-v-52f4a370] {
	display: flex;
	align-items: flex-start;
	padding: 8px 12px;
	background: var(--bg-color-secondary);
	border-radius: 6px;
	margin-bottom: 8px
}

.reply-status-content[data-v-52f4a370] {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 2px
}

.reply-first-line[data-v-52f4a370] {
	font-size: 12px;
	color: var(--text-color-secondary);
	font-weight: 500
}

.reply-second-line[data-v-52f4a370] {
	font-size: 12px;
	color: var(--text-color-tertiary);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 100%
}

.reply-username[data-v-52f4a370] {
	color: var(--text-color-secondary)
}

.input-row[data-v-52f4a370] {
	display: flex;
	align-items: flex-start;
	padding: 12px 16px;
	transition: all .4s cubic-bezier(.4, 0, .2, 1)
}

.input-wrapper[data-v-52f4a370] {
	flex: 1;
	margin-right: 12px;
	transition: all .4s cubic-bezier(.4, 0, .2, 1);
	max-width: calc(100% - 200px);
	overflow: visible
}

.input-container.expanded .input-wrapper[data-v-52f4a370] {
	margin-right: 0;
	max-width: 100%
}

.input-container.expanded .input-row[data-v-52f4a370] {
	position: relative
}

.comment-input[data-v-52f4a370] {
	width: 100%;
	min-height: 32px;
	max-height: 80px;
	border: none;
	border-radius: 16px;
	padding: 6px 12px;
	font-size: 14px;
	background: var(--bg-color-secondary);
	color: var(--text-color-primary);
	outline: none;
	caret-color: var(--primary-color);
	transition: all .4s cubic-bezier(.4, 0, .2, 1);
	box-sizing: border-box;
	resize: none;
	overflow-y: auto;
	line-height: 20px;
	font-family: inherit
}

.comment-input.focused-input[data-v-52f4a370] {
	min-height: 40px;
	max-height: 80px;
	border-radius: 20px;
	padding: 10px 16px;
	font-size: 16px;
	background: var(--bg-color-secondary)
}

.comment-input[data-v-52f4a370]::placeholder {
	color: var(--text-color-secondary)
}

.action-buttons[data-v-52f4a370] {
	display: flex;
	align-items: center;
	gap: 8px;
	justify-content: flex-end;
	transition: all .4s cubic-bezier(.4, 0, .2, 1);
	flex-shrink: 0;
	width: auto;
	position: relative
}

.input-container.expanded .action-buttons[data-v-52f4a370] {
	opacity: 0;
	transform: translate(50px);
	pointer-events: none;
	position: absolute;
	right: 16px
}

.focused-actions-section[data-v-52f4a370] {
	height: 0;
	opacity: 0;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 16px;
	transition: all .4s cubic-bezier(.4, 0, .2, 1)
}

.input-container.expanded .focused-actions-section[data-v-52f4a370] {
	height: 60px;
	opacity: 1;
	padding: 0 22px
}

.emoji-section[data-v-52f4a370] {
	display: flex;
	align-items: center;
	gap: 8px
}

.emoji-btn[data-v-52f4a370],
.mention-btn[data-v-52f4a370],
.image-btn[data-v-52f4a370] {
	background: none;
	border: none;
	padding: 4px;
	border-radius: 50%;
	cursor: pointer;
	transition: all .2s;
	display: flex;
	align-items: center;
	justify-content: center
}

.emoji-btn[data-v-52f4a370]:hover,
.mention-btn[data-v-52f4a370]:hover,
.image-btn[data-v-52f4a370]:hover {
	background: var(--bg-color-secondary)
}

.emoji-icon[data-v-52f4a370],
.mention-icon[data-v-52f4a370],
.image-icon[data-v-52f4a370] {
	color: var(--text-color-secondary);
	transition: color .2s
}

.emoji-btn:hover .emoji-icon[data-v-52f4a370],
.mention-btn:hover .mention-icon[data-v-52f4a370],
.image-btn:hover .image-icon[data-v-52f4a370] {
	color: var(--text-color-primary)
}

.uploaded-images-section[data-v-52f4a370] {
	padding: 0 16px;
	background: transparent;
	margin: 8px 16px
}

.uploaded-images-grid[data-v-52f4a370] {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
	gap: 6px;
	max-height: 150px;
	overflow-y: auto
}

.uploaded-image-item[data-v-52f4a370] {
	position: relative;
	aspect-ratio: 1;
	border-radius: 6px;
	overflow: hidden
}

.uploaded-image[data-v-52f4a370] {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 6px
}

.remove-image-btn[data-v-52f4a370] {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 20px;
	height: 20px;
	background: var(--overlay-bg);
	border: none;
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .2s
}

.remove-image-btn[data-v-52f4a370]:hover {
	background: #000c
}

.send-cancel-buttons[data-v-52f4a370] {
	display: flex;
	align-items: center;
	gap: 12px
}

.send-btn[data-v-52f4a370] {
	background: var(--primary-color);
	border: none;
	color: #fff;
	padding: 8px 16px;
	border-radius: 20px;
	font-size: 16px;
	cursor: pointer;
	transition: all .2s ease;
	font-weight: 700;
	white-space: nowrap
}

.send-btn[data-v-52f4a370]:hover:not(:disabled) {
	background: var(--primary-color-dark)
}

.send-btn[data-v-52f4a370]:disabled {
	opacity: .5;
	cursor: not-allowed
}

.cancel-btn[data-v-52f4a370]:disabled {
	opacity: .5;
	cursor: not-allowed
}

.cancel-btn[data-v-52f4a370] {
	background: none;
	border: 1px solid var(--border-color-secondary);
	color: var(--text-color-secondary);
	padding: 8px 16px;
	border-radius: 20px;
	font-size: 16px;
	cursor: pointer;
	background-color: transparent;
	font-weight: 700;
	transition: all .2s;
	white-space: nowrap
}

.cancel-btn[data-v-52f4a370]:hover {
	color: var(--text-color-primary);
	background-color: var(--bg-color-secondary)
}

.action-btn[data-v-52f4a370] {
	background: none;
	border: none;
	color: var(--text-color-secondary);
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 2px;
	font-size: 12px;
	padding: 2px;
	white-space: nowrap
}

.action-btn[data-v-52f4a370]:hover {
	color: var(--text-color-primary)
}

.action-btn svg[data-v-52f4a370] {
	width: 24px;
	height: 24px
}

.emoji-panel-overlay[data-v-52f4a370] {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2000;
	animation: fadeIn-52f4a370 .2s ease
}

.emoji-panel[data-v-52f4a370] {
	background: var(--bg-color-primary);
	border-radius: 12px;
	box-shadow: 0 8px 32px #0003;
	overflow: hidden;
	animation: scaleIn-52f4a370 .2s ease;
	max-width: 90vw;
	max-height: 80vh
}

@keyframes fadeIn-52f4a370 {
	0% {
		opacity: 0
	}

	to {
		opacity: 1
	}
}

@keyframes scaleIn-52f4a370 {
	0% {
		opacity: 0;
		transform: scale(.8)
	}

	to {
		opacity: 1;
		transform: scale(1)
	}
}

.mobile-image-container[data-v-52f4a370],
.mobile-video-container[data-v-52f4a370] {
	display: none
}

@media (max-width: 960px) and (min-width: 769px) {
	.detail-card.page-mode[data-v-52f4a370] {
		max-width: calc(100vw - 40px);
		width: calc(100vw - 40px);
		height: calc(100vh - 140px);
		max-height: calc(100vh - 140px);
		margin: 0 auto
	}
}

@media (max-width: 768px) {
	.detail-card.page-mode[data-v-52f4a370] {
		max-width: 100vw;
		width: 100vw;
		height: 100vh;
		max-height: 100vh;
		margin: 0;
		box-shadow: none;
		border-radius: 0;
		overflow: hidden
	}

	.detail-card.page-mode .detail-content[data-v-52f4a370] {
		flex-direction: column;
		height: 100%;
		overflow: hidden
	}

	.detail-card.page-mode .content-section[data-v-52f4a370] {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		background: var(--bg-color-primary);
		max-width: 100vw;
		box-sizing: border-box
	}

	.detail-card-overlay[data-v-52f4a370] {
		padding: 0;
		background: var(--bg-color-primary);
		position: fixed;
		left: 0;
		right: 0;
		bottom: auto;
		top: 0;
		top: constant(safe-area-inset-top);
		top: env(safe-area-inset-top);
		height: 100vh;
		height: calc(100vh - constant(safe-area-inset-top));
		height: calc(100vh - env(safe-area-inset-top));
		height: 100dvh
	}

	.detail-card[data-v-52f4a370]:not(.page-mode) {
		width: 100vw;
		height: 100%;
		max-width: 100vw;
		max-height: 100%;
		border-radius: 0;
		flex-direction: column;
		position: relative;
		overflow-x: hidden;
		flex: 1;
		box-sizing: border-box
	}

	.close-btn[data-v-52f4a370] {
		position: fixed;
		top: calc(16px + constant(safe-area-inset-top));
		top: calc(16px + env(safe-area-inset-top));
		left: 16px;
		z-index: 1001;
		background: transparent;
		color: var(--text-color-secondary);
		width: 36px;
		height: 36px
	}

	.close-btn[data-v-52f4a370]:hover {
		background: var(--bg-color-secondary)
	}

	.detail-content[data-v-52f4a370] {
		flex-direction: column;
		height: 100%;
		overflow: hidden
	}

	.image-section[data-v-52f4a370],
	.video-container[data-v-52f4a370] {
		display: none
	}

	.content-section[data-v-52f4a370] {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		overflow-y: auto;
		overflow-x: hidden;
		background: var(--bg-color-primary);
		max-width: 100vw;
		box-sizing: border-box;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain
	}

	.author-wrapper[data-v-52f4a370] {
		position: sticky !important;
		top: 0 !important;
		z-index: 1000 !important;
		min-height: 72px;
		padding: 12px 16px 0 60px !important;
		background: var(--bg-color-primary) !important;
		border-bottom: 1px solid var(--border-color-primary) !important;
		box-sizing: border-box !important;
		width: 100% !important;
		flex-shrink: 0
	}

	.scrollable-content[data-v-52f4a370] {
		flex: 1;
		padding-top: 0;
		padding-bottom: 110px;
		padding-bottom: calc(110px + constant(safe-area-inset-bottom));
		padding-bottom: calc(110px + env(safe-area-inset-bottom));
		max-width: 100vw;
		box-sizing: border-box
	}

	.scrollable-content[data-v-52f4a370]:before {
		content: "";
		display: block;
		width: 100%;
		height: 0;
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat
	}

	.mobile-image-container[data-v-52f4a370] {
		display: block;
		width: 100%;
		min-height: 200px;
		margin-bottom: 16px;
		position: relative;
		background: var(--bg-color-secondary);
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all .3s ease
	}

	.mobile-video-container[data-v-52f4a370] {
		display: flex;
		height: 40vh;
		width: 100%;
		min-height: 200px;
		margin-bottom: 16px;
		position: relative;
		background: var(--bg-color-secondary);
		overflow: hidden;
		align-items: center;
		justify-content: center
	}

	.mobile-video-player[data-v-52f4a370] {
		width: 100%;
		height: 100%;
		max-width: 1000px;
		object-fit: contain;
		background: #000
	}

	.mobile-image-slider[data-v-52f4a370] {
		display: flex;
		width: 100%;
		height: 100%;
		transition: transform .3s cubic-bezier(.4, 0, .2, 1)
	}

	.mobile-slider-image[data-v-52f4a370] {
		flex: 0 0 100%;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
		display: block;
		cursor: zoom-in;
		transition: object-fit .3s ease
	}

	.mobile-image-controls[data-v-52f4a370] {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		pointer-events: none
	}

	.mobile-nav-btn[data-v-52f4a370] {
		position: absolute;
		top: 50%;
		width: 40px;
		height: 40px;
		border-radius: 50%;
		background: #0000004d;
		border: none;
		color: #fff;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all .3s ease;
		z-index: 10;
		pointer-events: auto;
		-webkit-backdrop-filter: blur(2px);
		backdrop-filter: blur(2px);
		opacity: .8;
		transform: translateY(-50%)
	}

	.mobile-nav-btn[data-v-52f4a370]:hover {
		background: var(--overlay-bg);
		opacity: 1
	}

	.mobile-nav-btn[data-v-52f4a370]:disabled {
		opacity: .3;
		cursor: not-allowed
	}

	.mobile-prev-btn[data-v-52f4a370] {
		left: 12px
	}

	.mobile-next-btn[data-v-52f4a370] {
		right: 12px
	}

	.mobile-image-counter[data-v-52f4a370] {
		position: absolute;
		top: 12px;
		right: 12px;
		background: #0000004d;
		color: #fff;
		padding: 6px 12px;
		border-radius: 12px;
		font-size: 14px;
		font-weight: 500;
		z-index: 10;
		-webkit-backdrop-filter: blur(4px);
		backdrop-filter: blur(4px);
		opacity: 1
	}

	.mobile-dots-indicator[data-v-52f4a370] {
		display: flex;
		justify-content: center;
		align-items: center
	}

	.mobile-dots[data-v-52f4a370] {
		display: flex;
		gap: 8px
	}

	.mobile-dot[data-v-52f4a370] {
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background: var(--text-color-quaternary);
		cursor: pointer;
		transition: all .3s ease
	}

	.mobile-dot.active[data-v-52f4a370] {
		background: var(--primary-color);
		transform: scale(1.2)
	}

	.post-content[data-v-52f4a370] {
		padding: 0 16px 16px
	}

	.post-title[data-v-52f4a370] {
		font-size: 20px;
		margin-bottom: 16px
	}

	.post-text[data-v-52f4a370] {
		font-size: 16px;
		line-height: 1.7;
		margin-bottom: 20px
	}

	.comments-section[data-v-52f4a370] {
		padding: 16px 16px 0
	}

	.footer-actions[data-v-52f4a370] {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: var(--bg-color-primary);
		border-top: 1px solid var(--border-color-primary);
		z-index: 1000;
		padding: 12px 16px;
		padding-bottom: calc(12px + constant(safe-area-inset-bottom));
		padding-bottom: calc(12px + env(safe-area-inset-bottom))
	}

	.input-container[data-v-52f4a370] {
		margin: 0
	}

	.input-row[data-v-52f4a370] {
		padding: 0
	}

	.input-wrapper[data-v-52f4a370] {
		margin-right: 0
	}

	.comment-input[data-v-52f4a370] {
		font-size: 16px;
		padding: 12px 16px
	}

	.action-buttons[data-v-52f4a370] {
		gap: 12px
	}

	.action-btn[data-v-52f4a370] {
		font-size: 14px;
		padding: 8px
	}

	.action-btn svg[data-v-52f4a370] {
		width: 24px;
		height: 24px
	}

	.input-container.expanded .focused-actions-section[data-v-52f4a370] {
		height: 50px;
		padding: 8px 16px
	}

	.send-btn[data-v-52f4a370],
	.cancel-btn[data-v-52f4a370] {
		padding: 10px 20px;
		font-size: 16px
	}

	.comment-item[data-v-52f4a370],
	.reply-item[data-v-52f4a370] {
		margin-bottom: 16px
	}

	.comment-avatar[data-v-52f4a370],
	.reply-avatar[data-v-52f4a370] {
		width: 36px;
		height: 36px
	}

	.reply-avatar[data-v-52f4a370],
	.reply-avatar-container[data-v-52f4a370] {
		width: 28px;
		height: 28px
	}

	.comment-content[data-v-52f4a370],
	.reply-content[data-v-52f4a370] {
		margin-left: 12px
	}

	.author-avatar[data-v-52f4a370] {
		width: 36px;
		height: 36px
	}

	.author-verified-badge[data-v-52f4a370] {
		right: -4px;
		bottom: -1px;
		border-width: 1px
	}

	.comment-verified-badge[data-v-52f4a370] {
		right: -8px;
		bottom: -7px;
		border-width: 1px
	}

	.reply-verified-badge[data-v-52f4a370] {
		right: -2px;
		bottom: -1px;
		border-width: 1px
	}

	.emoji-panel-overlay[data-v-52f4a370] {
		padding: 0;
		z-index: 2500
	}

	.action-buttons[data-v-52f4a370] {
		gap: 1px
	}
}

.load-more-comments[data-v-52f4a370],
.no-more-comments[data-v-52f4a370] {
	display: flex;
	justify-content: center;
	padding: 16px 0;
	color: var(--text-color-secondary);
	font-size: 14px
}

@media (max-width: 360px) {
	.send-cancel-buttons[data-v-52f4a370] {
		gap: 8px
	}

	.send-btn[data-v-52f4a370],
	.cancel-btn[data-v-52f4a370] {
		padding: 8px 14px;
		font-size: 15px
	}
}

.btn[data-v-7307abe0] {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background-color: var(--bg-color-primary);
	border: var(--border-color-primary) 1px solid;
	cursor: pointer
}

.back-to-top[data-v-7307abe0] {
	position: fixed;
	right: 12px;
	bottom: 60px;
	z-index: 999
}

.btn-icon[data-v-7307abe0] {
	color: var(--text-color-secondary);
	transition: color .3s ease
}

.btn[data-v-7307abe0]:hover {
	background-color: var(--bg-color-secondary);
	transition: all .2s ease
}

.btn:hover .btn-icon[data-v-7307abe0] {
	color: var(--text-color-primary)
}

.back-to-top .tooltip[data-v-7307abe0] {
	position: absolute;
	right: 50px;
	top: 50%;
	transform: translateY(-50%);
	background: var(--bg-color-primary);
	color: var(--text-color-primary);
	padding: 4px 8px;
	border-radius: 6px;
	font-size: 12px;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s ease, visibility .2s ease;
	box-shadow: 0 2px 8px #00000026;
	border: 1px solid var(--border-color-primary);
	z-index: 10;
	pointer-events: none
}

@media (max-width: 768px) {
	.back-to-top .tooltip[data-v-7307abe0] {
		display: none
	}
}

.back-to-top:hover .tooltip[data-v-7307abe0] {
	opacity: 1;
	visibility: visible
}

.content-container[data-v-f9be935e] {
	background-color: var(--bg-color-primary);
	padding-top: 144px;
	transition: background .2s ease
}

.loading-container[data-v-f9be935e] {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: 20px 16px;
	flex-direction: row;
	position: fixed;
	top: 129px;
	left: 50%;
	transform: translate(-50%);
	width: calc(100% - 32px);
	max-width: 700px;
	z-index: 100;
	background-color: var(--bg-color-primary);
	transition: background .2s ease
}

.loading-overlay[data-v-f9be935e] {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--overlay-bg);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 9999
}

.loading-content[data-v-f9be935e] {
	background: var(--bg-color-primary);
	padding: 30px;
	border-radius: 12px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 15px;
	box-shadow: 0 8px 32px #0003
}

.loading-content .loading-text[data-v-f9be935e] {
	color: var(--text-color-primary);
	font-size: 16px;
	font-weight: 500
}

.loading-text[data-v-f9be935e] {
	color: var(--text-color-secondary);
	font-size: 14px
}

.notification-main[data-v-f9be935e] {
	max-width: 700px;
	margin: 0 auto;
	padding: 0 16px;
	background-color: var(--bg-color-primary);
	transition: background .2s ease
}

.login-prompt[data-v-f9be935e] {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 80px 20px;
	text-align: center
}

.prompt-content[data-v-f9be935e] {
	display: flex;
	flex-direction: column;
	align-items: center
}

.prompt-icon[data-v-f9be935e] {
	color: var(--text-color-quaternary);
	margin-bottom: 16px
}

.prompt-content h3[data-v-f9be935e] {
	color: var(--text-color-primary);
	font-size: 18px;
	font-weight: 600;
	margin: 0 0 8px
}

.prompt-content p[data-v-f9be935e] {
	color: var(--text-color-secondary);
	font-size: 14px;
	margin: 0;
	line-height: 1.5
}

.floating-mark-read-btn-wrapper[data-v-f9be935e] {
	position: fixed;
	bottom: 60px;
	right: 12px;
	z-index: 999;
	display: inline-block
}

.floating-mark-read-btn[data-v-f9be935e] {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background-color: var(--bg-color-primary);
	border: var(--border-color-primary) 1px solid;
	cursor: pointer;
	transition: all .2s ease
}

.floating-mark-read-btn[data-v-f9be935e]:hover {
	background-color: var(--bg-color-secondary)
}

.floating-mark-read-btn:hover .btn-icon[data-v-f9be935e] {
	color: var(--text-color-primary)
}

.floating-mark-read-btn .btn-icon[data-v-f9be935e] {
	color: var(--text-color-secondary);
	transition: color .2s ease
}

[data-v-f9be935e] .back-to-top {
	bottom: 108px !important
}

.floating-mark-read-btn-wrapper .tooltip[data-v-f9be935e] {
	position: absolute;
	right: 50px;
	top: 50%;
	transform: translateY(-50%);
	background: var(--bg-color-primary);
	color: var(--text-color-primary);
	padding: 4px 8px;
	border-radius: 6px;
	font-size: 12px;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s ease, visibility .2s ease;
	box-shadow: 0 2px 8px #00000026;
	border: 1px solid var(--border-color-primary);
	z-index: 10;
	pointer-events: none
}

.floating-mark-read-btn-wrapper:hover .tooltip[data-v-f9be935e] {
	opacity: 1;
	visibility: visible
}

.empty-state[data-v-f9be935e] {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 80px 20px;
	text-align: center
}

.empty-icon[data-v-f9be935e] {
	color: var(--text-color-quaternary);
	margin-bottom: 16px
}

.empty-state h3[data-v-f9be935e] {
	color: var(--text-color-primary);
	font-size: 18px;
	font-weight: 600;
	margin: 0 0 8px
}

.empty-state p[data-v-f9be935e] {
	color: var(--text-color-secondary);
	font-size: 14px;
	margin: 0;
	line-height: 1.5
}

.notification-item.unread[data-v-f9be935e] {
	background: var(--bg-color-secondary);
	border-radius: 8px;
	margin: 0 -8px 5px;
	padding-left: 8px;
	padding-right: 8px;
	transition: background .2s ease
}

.unread-dot[data-v-f9be935e] {
	width: 8px;
	height: 8px;
	background: var(--danger-color);
	border-radius: 50%;
	position: absolute;
	top: 0;
	right: 0;
	transform: translate(50%, -50%)
}

.left-section[data-v-f9be935e] {
	flex-shrink: 0;
	margin-right: 24px;
	position: relative
}

.content-wrapper[data-v-f9be935e] {
	transition: margin-top .3s ease
}

.content-wrapper.with-loading[data-v-f9be935e] {
	margin-top: 40px
}

.notification-item[data-v-f9be935e] {
	display: flex;
	align-items: flex-start;
	padding-top: 20px
}

.right-section[data-v-f9be935e] {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: flex-start;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--bg-color-secondary);
	transition: border-color .2s ease
}

.user-avatar[data-v-f9be935e] {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	overflow: hidden;
	flex-shrink: 0;
	cursor: pointer;
	display: block
}

.user-avatar img[data-v-f9be935e] {
	width: 100%;
	height: 100%;
	object-fit: cover
}

.lazy-image[data-v-f9be935e],
.lazy-avatar[data-v-f9be935e] {
	transition: opacity .5s ease;
	opacity: 0
}

.lazy-image.fade-in[data-v-f9be935e],
.lazy-avatar.fade-in[data-v-f9be935e] {
	opacity: 1
}

.notification-content[data-v-f9be935e] {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px
}

.username-container[data-v-f9be935e] {
	display: flex;
	align-items: center;
	gap: 6px
}

.author-badge[data-v-f9be935e] {
	display: inline-flex;
	background-color: var(--bg-color-primary);
	color: var(--text-color-tertiary);
	font-weight: 600;
	border-radius: 999px;
	border: 1px solid var(--border-color-primary);
	font-size: 9px;
	opacity: .9;
	flex-shrink: 0;
	transition: all .2s ease
}

.author-badge--notification[data-v-f9be935e] {
	padding: 2px 4px
}

.username[data-v-f9be935e] {
	font-weight: 700;
	color: var(--text-color-primary);
	font-size: 16px;
	cursor: pointer;
	text-decoration: none;
	display: inline-block;
	width: fit-content
}

.clickable-avatar[data-v-f9be935e] {
	cursor: pointer
}

.clickable-name[data-v-f9be935e] {
	cursor: pointer;
	transition: color .2s ease
}

.interaction-hint[data-v-f9be935e] {
	display: flex;
	gap: 8px
}

.action[data-v-f9be935e],
.time[data-v-f9be935e] {
	color: var(--text-color-tertiary);
	font-size: 14px
}

.notification-text[data-v-f9be935e] {
	color: var(--text-color-primary);
	font-size: 14px;
	line-height: 1.4;
	cursor: pointer
}

.replied-comment[data-v-f9be935e] {
	margin-top: 7px;
	padding: 1px 12px;
	font-size: 12px;
	color: var(--text-color-tertiary);
	border-left: 3px solid var(--bg-color-tertiary);
	line-height: 1.3;
	max-width: 100%;
	word-break: break-word;
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	transition: border-color .2s ease, color .2s ease
}

.post-thumbnail[data-v-f9be935e] {
	width: 60px;
	height: 60px;
	border-radius: 8px;
	overflow: hidden;
	margin-left: 12px;
	flex-shrink: 0;
	cursor: pointer
}

.post-thumbnail img[data-v-f9be935e] {
	width: 100%;
	height: 100%;
	object-fit: cover
}

.follow-button[data-v-f9be935e] {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	margin-left: 12px
}

.load-more-trigger[data-v-f9be935e] {
	height: 1px;
	width: 100%
}

.comment-actions[data-v-f9be935e] {
	margin-top: 12px
}

.action-buttons[data-v-f9be935e] {
	display: flex;
	align-items: center;
	gap: 16px
}

.comment-like-container[data-v-f9be935e] {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 1px solid var(--border-color-secondary);
	width: 40px;
	height: 40px;
	transition: border-color .2s ease
}

.comment-like-container[data-v-f9be935e]:hover {
	background: var(--bg-color-secondary);
	border-color: var(--border-color-primary);
	transition: all .2s ease
}

.comment-reply-container[data-v-f9be935e] {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	border: 1px solid var(--border-color-secondary);
	gap: 4px;
	height: 40px;
	padding: 0 15px;
	transition: border-color .2s ease, background-color .2s ease
}

.comment-reply-container[data-v-f9be935e]:hover {
	background: var(--bg-color-secondary);
	border-color: var(--border-color-primary);
	transition: all .2s ease
}

.comment-reply-container:hover .comment-reply-icon[data-v-f9be935e],
.comment-reply-container:hover .comment-reply-btn[data-v-f9be935e] {
	color: var(--text-color-primary)
}

.comment-reply-icon[data-v-f9be935e] {
	color: var(--text-color-secondary);
	cursor: pointer;
	transition: color .2s ease
}

.comment-reply-btn[data-v-f9be935e] {
	background: none;
	border: none;
	color: var(--text-color-secondary);
	font-size: 16px;
	cursor: pointer;
	padding: 0;
	transition: color .2s ease
}

.reply-input-wrapper[data-v-f9be935e] {
	display: flex;
	align-items: flex-end;
	gap: 5px
}

.input-with-emoji[data-v-f9be935e] {
	position: relative;
	display: flex;
	align-items: flex-end;
	flex: 1;
	max-width: 60%
}

.reply-input[data-v-f9be935e] {
	width: 100%;
	min-height: 40px;
	max-height: 80px;
	padding: 10px 72px 10px 16px;
	border: none;
	border-radius: 20px;
	background-color: var(--bg-color-secondary);
	color: var(--text-color-primary);
	font-size: 16px;
	line-height: 20px;
	resize: none;
	outline: none;
	caret-color: var(--primary-color);
	transition: all .2s ease;
	font-family: inherit;
	box-sizing: border-box;
	overflow-y: auto;
	transition: background .2s ease, border-color .2s ease
}

.reply-input.content-textarea[data-v-f9be935e]:empty:before {
	content: attr(data-placeholder);
	color: var(--text-color-secondary);
	font-size: 14px;
	pointer-events: none
}

.reply-input[data-v-f9be935e]::placeholder {
	color: var(--text-color-secondary);
	font-size: 14px
}

.mention-btn[data-v-f9be935e] {
	position: absolute;
	right: 40px;
	top: 55%;
	transform: translateY(-50%);
	background: none;
	border: none;
	color: var(--text-color-tertiary);
	cursor: pointer;
	padding: 4px;
	transition: all .2s ease;
	z-index: 1
}

.mention-btn[data-v-f9be935e]:hover {
	color: var(--text-color-secondary)
}

.emoji-btn[data-v-f9be935e] {
	position: absolute;
	right: 8px;
	top: 55%;
	transform: translateY(-50%);
	background: none;
	border: none;
	color: var(--text-color-tertiary);
	cursor: pointer;
	padding: 4px;
	transition: all .2s ease;
	z-index: 1
}

.emoji-btn[data-v-f9be935e]:hover {
	color: var(--text-color-secondary)
}

.send-btn[data-v-f9be935e] {
	background: var(--primary-color);
	border: none;
	color: #fff;
	padding: 8px 16px;
	border-radius: 20px;
	font-size: 16px;
	cursor: pointer;
	transition: all .2s ease;
	font-weight: 700
}

.send-btn[data-v-f9be935e]:hover:not(:disabled) {
	background: var(--primary-color-dark)
}

.send-btn[data-v-f9be935e]:disabled {
	cursor: not-allowed
}

.cancel-btn[data-v-f9be935e] {
	background: none;
	border: 1px solid var(--border-color-secondary);
	color: var(--text-color-secondary);
	padding: 8px 16px;
	border-radius: 20px;
	font-size: 16px;
	cursor: pointer;
	transition: all .2s ease;
	font-weight: 700
}

.cancel-btn[data-v-f9be935e]:hover {
	color: var(--text-color-primary);
	background-color: var(--bg-color-secondary)
}

.cancel-btn[data-v-f9be935e]:disabled {
	opacity: .5;
	cursor: not-allowed
}

.emoji-panel-overlay[data-v-f9be935e] {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	animation: fadeIn-f9be935e .2s ease
}

.emoji-panel-container[data-v-f9be935e] {
	background-color: var(--bg-color-primary);
	border-radius: 12px;
	box-shadow: 0 8px 32px #0003;
	overflow: hidden;
	animation: scaleIn-f9be935e .2s ease;
	max-width: 90vw;
	max-height: 90vh
}

@keyframes fadeIn-f9be935e {
	0% {
		opacity: 0
	}

	to {
		opacity: 1
	}
}

@keyframes scaleIn-f9be935e {
	0% {
		opacity: 0;
		transform: scale(.8)
	}

	to {
		opacity: 1;
		transform: scale(1)
	}
}

@media (min-width: 901px) {
	.loading-container[data-v-f9be935e] {
		left: calc(50% + 114px);
		width: 100%
	}

	.notification-main[data-v-f9be935e] {
		max-width: 700px;
		margin: 0 auto;
		padding: 0
	}
}

@media (max-width: 900px) {

	.interaction-hint .action[data-v-f9be935e],
	.interaction-hint .time[data-v-f9be935e] {
		font-size: 12px
	}
}

.user-info-card[data-v-79d0dcdf] {
	width: 360px;
	background: var(--bg-color-primary);
	border: 1px solid var(--border-color-primary);
	border-radius: 12px;
	box-shadow: 0 8px 24px #0000001f;
	padding: 16px;
	position: absolute;
	z-index: 1000;
	box-sizing: border-box;
	cursor: pointer;
	transition: all .2s ease
}

.card-header[data-v-79d0dcdf] {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px
}

.avatar-info[data-v-79d0dcdf] {
	display: flex;
	align-items: center;
	flex: 1;
	min-width: 0;
	height: 40px;
	margin-right: 12px
}

.avatar[data-v-79d0dcdf] {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
	margin-right: 12px;
	flex-shrink: 0;
	background: transparent;
	border: 1px solid var(--border-color-secondary);
	transition: all .3s ease
}

.avatar[data-v-79d0dcdf]:not([src]),
.avatar[src=""][data-v-79d0dcdf] {
	background: transparent;
	border: 1px solid var(--border-color-secondary)
}

.nickname-container[data-v-79d0dcdf] {
	display: flex;
	align-items: center;
	min-width: 0
}

.nickname[data-v-79d0dcdf] {
	font-size: 16px;
	font-weight: 700;
	color: var(--text-color-primary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	flex: 1;
	margin-right: 6px
}

.card-content[data-v-79d0dcdf] {
	margin-bottom: 16px
}

.bio[data-v-79d0dcdf] {
	font-size: 14px;
	color: var(--text-color-secondary);
	line-height: 1.4;
	margin-bottom: 12px;
	word-wrap: break-word;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden
}

.stats[data-v-79d0dcdf] {
	display: flex;
	gap: 16px
}

.stat-item[data-v-79d0dcdf] {
	font-size: 13px;
	color: var(--text-color-tertiary);
	white-space: nowrap
}

.stat-number[data-v-79d0dcdf] {
	font-weight: 700;
	color: var(--text-color-primary)
}

.stat-label[data-v-79d0dcdf] {
	font-weight: 400;
	color: var(--text-color-tertiary)
}

.card-images[data-v-79d0dcdf] {
	display: flex;
	gap: 8px;
	margin-top: 16px
}

.image-item[data-v-79d0dcdf] {
	width: 100px;
	height: 100px;
	border-radius: 8px;
	flex-shrink: 0
}

.image-item img[data-v-79d0dcdf] {
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: transparent;
	border: 1px solid var(--border-color-secondary);
	border-radius: 8px;
	transition: all .3s ease
}

.image-item img[data-v-79d0dcdf]:not([src]),
.image-item img[src=""][data-v-79d0dcdf] {
	background: transparent;
	border: 1px solid var(--border-color-secondary)
}

@media (max-width: 480px) {
	.user-info-card[data-v-79d0dcdf] {
		width: 320px;
		padding: 12px
	}

	.avatar-info[data-v-79d0dcdf] {
		width: 200px
	}

	.avatar[data-v-79d0dcdf] {
		width: 36px;
		height: 36px
	}

	.nickname[data-v-79d0dcdf] {
		font-size: 15px
	}

	.bio[data-v-79d0dcdf] {
		font-size: 13px
	}

	.stat-item[data-v-79d0dcdf] {
		font-size: 12px
	}

	.image-item[data-v-79d0dcdf] {
		width: 88px;
		height: 88px
	}
}

.waterfall-container[data-v-ba4036d7] {
	width: 100%;
	position: relative;
	padding: 0 16px;
	box-sizing: border-box;
	isolation: isolate
}

.waterfall-columns[data-v-ba4036d7] {
	display: flex;
	align-items: flex-start;
	width: 100%;
	gap: 16px;
	contain: layout style;
	transform: none;
	will-change: auto
}

.waterfall-column[data-v-ba4036d7] {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
	contain: layout
}

.waterfall-item[data-v-ba4036d7] {
	width: 100%;
	border-radius: 10px;
	overflow: hidden;
	background-color: var(--bg-color-primary);
	position: relative;
	box-sizing: border-box;
	transition: border-color .2s ease, background-color .2s ease;
	visibility: visible;
	opacity: 1;
	contain: layout style paint;
	transform: translateZ(0);
	backface-visibility: hidden;
	border: 1px solid var(--border-color-primary);
	padding: 16px;
}

.waterfall-item[data-v-ba4036d7]:hover {
	border-color: #ff2442;
}

.waterfall-item.new-item[data-v-ba4036d7] {
	opacity: 0;
	transform: translateY(20px) translateZ(0);
	transition: opacity .6s ease-out, transform .6s ease-out;
	will-change: opacity, transform
}

.waterfall-item.new-item.fade-in[data-v-ba4036d7] {
	opacity: 1;
	transform: translateY(0) translateZ(0)
}

.waterfall-item[data-v-ba4036d7]:not(.new-item) {
	will-change: auto
}

.empty-state[data-v-ba4036d7] {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	min-height: 200px
}

.empty-text[data-v-ba4036d7] {
	color: var(--text-color-secondary);
	font-size: 16px;
	line-height: 1.5
}

.content-hidden[data-v-ba4036d7] {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	opacity: 0;
	pointer-events: none;
	z-index: -1;
	visibility: hidden
}

.content-img[data-v-ba4036d7] {
	cursor: pointer;
	position: relative;
	overflow: hidden;
	z-index: 1
}

.video-indicator[data-v-ba4036d7] {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 20px;
	height: 20px;
	background: #00000052;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	z-index: 2;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	transition: all .2s ease
}

.content-img img[data-v-ba4036d7] {
	width: 100%;
	height: auto;
	object-fit: cover;
	border-radius: 10px;
	display: block;
	max-width: 100%;
	opacity: 1;
	visibility: visible;
	object-position: center;
	transition: filter .8s ease
}

.content-img img[data-v-ba4036d7]:hover {
	filter: brightness(.7)
}

.lazy-image[data-v-ba4036d7] {
	transition: opacity .5s ease, filter .3s ease !important;
	opacity: 0;
	visibility: hidden
}

.lazy-image.fade-in[data-v-ba4036d7] {
	opacity: 1 !important;
	visibility: visible !important
}

.lazy-image[src][data-v-ba4036d7]:not([src=""]):not([src="data:"]) {
	opacity: 1;
	visibility: visible
}

.lazy-avatar[data-v-ba4036d7] {
	transition: opacity .3s ease;
	opacity: 1;
	visibility: visible
}

.lazy-avatar.fade-in[data-v-ba4036d7] {
	opacity: 1 !important;
	visibility: visible !important
}

.content-title[data-v-ba4036d7] {
	margin: 5px 10px;
	font-size: 14px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden
}

.contentlist[data-v-ba4036d7] {
	display: flex;
	align-items: center;
	padding: 10px
}

.contentlist img[data-v-ba4036d7] {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	margin-right: 5px
}

.clickable-avatar[data-v-ba4036d7] {
	cursor: pointer
}

.contentlist-name[data-v-ba4036d7] {
	font-size: 12px;
	color: var(--text-color-secondary);
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	flex: 1
}

.clickable-name[data-v-ba4036d7] {
	cursor: pointer;
	transition: color .2s ease
}

.clickable-name[data-v-ba4036d7]:hover {
	color: var(--text-color-primary)
}

.action-wrapper[data-v-ba4036d7] {
	display: flex;
	align-items: center;
	margin-left: auto
}

.like-num-wrapper[data-v-ba4036d7] {
	display: flex;
	align-items: center;
	gap: 4px
}

.like-num[data-v-ba4036d7] {
	font-size: 12px;
	color: var(--text-color-secondary)
}

.load-more-indicator[data-v-ba4036d7] {
	width: 100%;
	padding: 15px 0;
	display: flex;
	justify-content: center;
	align-items: center
}

.load-more-indicator.no-more-content[data-v-ba4036d7] {
	padding: 8px 0 5px;
	margin: 0;
	min-height: auto
}

.loading-more[data-v-ba4036d7] {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px
}

.loading-text[data-v-ba4036d7] {
	color: var(--text-color-secondary);
	font-size: 14px
}

.no-more[data-v-ba4036d7] {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px 0
}

.no-more-text[data-v-ba4036d7] {
	color: var(--text-color-tertiary);
	font-size: 12px;
	position: relative
}

.no-more-text[data-v-ba4036d7]:before,
.no-more-text[data-v-ba4036d7]:after {
	content: "";
	position: absolute;
	top: 50%;
	width: 40px;
	height: 1px;
	background: var(--border-color-secondary)
}

.no-more-text[data-v-ba4036d7]:before {
	right: 100%;
	margin-right: 10px
}

.no-more-text[data-v-ba4036d7]:after {
	left: 100%;
	margin-left: 10px
}

@media (min-width: 1420px) {

	.waterfall-columns[data-v-ba4036d7],
	.waterfall-column[data-v-ba4036d7] {
		gap: 20px
	}
}

@media (min-width: 1200px) {

	.waterfall-columns[data-v-ba4036d7],
	.waterfall-column[data-v-ba4036d7] {
		gap: 18px
	}
}

@media (max-width: 600px) {
	.waterfall-container[data-v-ba4036d7] {
		padding: 0 12px
	}

	.waterfall-columns[data-v-ba4036d7],
	.waterfall-column[data-v-ba4036d7] {
		gap: 12px
	}
}

/*!
 * Cropper.js v1.6.2
 * https://fengyuanchen.github.io/cropperjs
 *
 * Copyright 2015-present Chen Fengyuan
 * Released under the MIT license
 *
 * Date: 2024-04-21T07:43:02.731Z
 */
.cropper-container {
	direction: ltr;
	font-size: 0;
	line-height: 0;
	position: relative;
	-ms-touch-action: none;
	touch-action: none;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none
}

.cropper-container img {
	backface-visibility: hidden;
	display: block;
	height: 100%;
	image-orientation: 0deg;
	max-height: none !important;
	max-width: none !important;
	min-height: 0 !important;
	min-width: 0 !important;
	width: 100%
}

.cropper-wrap-box,
.cropper-canvas,
.cropper-drag-box,
.cropper-crop-box,
.cropper-modal {
	bottom: 0;
	left: 0;
	position: absolute;
	right: 0;
	top: 0
}

.cropper-wrap-box,
.cropper-canvas {
	overflow: hidden
}

.cropper-drag-box {
	background-color: #fff;
	opacity: 0
}

.cropper-modal {
	background-color: #000;
	opacity: .5
}

.cropper-view-box {
	display: block;
	height: 100%;
	outline: 1px solid #39f;
	outline-color: #3399ffbf;
	overflow: hidden;
	width: 100%
}

.cropper-dashed {
	border: 0 dashed #eee;
	display: block;
	opacity: .5;
	position: absolute
}

.cropper-dashed.dashed-h {
	border-bottom-width: 1px;
	border-top-width: 1px;
	height: calc(100% / 3);
	left: 0;
	top: calc(100% / 3);
	width: 100%
}

.cropper-dashed.dashed-v {
	border-left-width: 1px;
	border-right-width: 1px;
	height: 100%;
	left: calc(100% / 3);
	top: 0;
	width: calc(100% / 3)
}

.cropper-center {
	display: block;
	height: 0;
	left: 50%;
	opacity: .75;
	position: absolute;
	top: 50%;
	width: 0
}

.cropper-center:before,
.cropper-center:after {
	background-color: #eee;
	content: " ";
	display: block;
	position: absolute
}

.cropper-center:before {
	height: 1px;
	left: -3px;
	top: 0;
	width: 7px
}

.cropper-center:after {
	height: 7px;
	left: 0;
	top: -3px;
	width: 1px
}

.cropper-face,
.cropper-line,
.cropper-point {
	display: block;
	height: 100%;
	opacity: .1;
	position: absolute;
	width: 100%
}

.cropper-face {
	background-color: #fff;
	left: 0;
	top: 0
}

.cropper-line {
	background-color: #39f
}

.cropper-line.line-e {
	cursor: ew-resize;
	right: -3px;
	top: 0;
	width: 5px
}

.cropper-line.line-n {
	cursor: ns-resize;
	height: 5px;
	left: 0;
	top: -3px
}

.cropper-line.line-w {
	cursor: ew-resize;
	left: -3px;
	top: 0;
	width: 5px
}

.cropper-line.line-s {
	bottom: -3px;
	cursor: ns-resize;
	height: 5px;
	left: 0
}

.cropper-point {
	background-color: #39f;
	height: 5px;
	opacity: .75;
	width: 5px
}

.cropper-point.point-e {
	cursor: ew-resize;
	margin-top: -3px;
	right: -3px;
	top: 50%
}

.cropper-point.point-n {
	cursor: ns-resize;
	left: 50%;
	margin-left: -3px;
	top: -3px
}

.cropper-point.point-w {
	cursor: ew-resize;
	left: -3px;
	margin-top: -3px;
	top: 50%
}

.cropper-point.point-s {
	bottom: -3px;
	cursor: s-resize;
	left: 50%;
	margin-left: -3px
}

.cropper-point.point-ne {
	cursor: nesw-resize;
	right: -3px;
	top: -3px
}

.cropper-point.point-nw {
	cursor: nwse-resize;
	left: -3px;
	top: -3px
}

.cropper-point.point-sw {
	bottom: -3px;
	cursor: nesw-resize;
	left: -3px
}

.cropper-point.point-se {
	bottom: -3px;
	cursor: nwse-resize;
	height: 20px;
	opacity: 1;
	right: -3px;
	width: 20px
}

@media (min-width: 768px) {
	.cropper-point.point-se {
		height: 15px;
		width: 15px
	}
}

@media (min-width: 992px) {
	.cropper-point.point-se {
		height: 10px;
		width: 10px
	}
}

@media (min-width: 1200px) {
	.cropper-point.point-se {
		height: 5px;
		opacity: .75;
		width: 5px
	}
}

.cropper-point.point-se:before {
	background-color: #39f;
	bottom: -50%;
	content: " ";
	display: block;
	height: 200%;
	opacity: 0;
	position: absolute;
	right: -50%;
	width: 200%
}

.cropper-invisible {
	opacity: 0
}

.cropper-bg {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC)
}

.cropper-hide {
	display: block;
	height: 0;
	position: absolute;
	width: 0
}

.cropper-hidden {
	display: none !important
}

.cropper-move {
	cursor: move
}

.cropper-crop {
	cursor: crosshair
}

.cropper-disabled .cropper-drag-box,
.cropper-disabled .cropper-face,
.cropper-disabled .cropper-line,
.cropper-disabled .cropper-point {
	cursor: not-allowed
}

.mbti-picker[data-v-9e9cfcca] {
	width: 60%;
	max-width: 400px;
	margin: 0 auto
}

.mbti-header[data-v-9e9cfcca] {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16px;
	padding: 2px 6px;
	border: 1px solid var(--border-color-primary);
	border-radius: 4px
}

.mbti-result[data-v-9e9cfcca] {
	font-size: 12px;
	color: var(--text-color-primary)
}

.clear-btn[data-v-9e9cfcca] {
	background: none;
	border: none;
	font-size: 20px;
	color: var(--text-color-secondary);
	cursor: pointer;
	padding: 4px 8px;
	border-radius: 4px;
	transition: all .2s ease;
	line-height: 1
}

.clear-btn[data-v-9e9cfcca]:hover {
	color: var(--text-color-primary);
	transform: scale(1.1)
}

.clear-btn[data-v-9e9cfcca]:active {
	transform: scale(.95)
}

.picker-container[data-v-9e9cfcca] {
	display: flex;
	gap: 20px;
	justify-content: space-between
}

.dimension-picker[data-v-9e9cfcca] {
	flex: 1;
	min-width: 0
}

.dimension-label[data-v-9e9cfcca] {
	text-align: center;
	font-size: 12px;
	color: var(--text-color-secondary);
	margin-bottom: 8px;
	font-weight: 500
}

.picker-wheel[data-v-9e9cfcca] {
	background: var(--bg-color-primary);
	border: 1px solid var(--border-color-primary);
	border-radius: 4px;
	overflow: hidden
}

.picker-options[data-v-9e9cfcca] {
	display: flex;
	flex-direction: column
}

.picker-option[data-v-9e9cfcca] {
	padding: 10px 5px;
	text-align: center;
	cursor: pointer;
	transition: all .2s ease;
	font-size: 18px;
	font-weight: 500
}

.picker-option[data-v-9e9cfcca]:last-child {
	border-bottom: none
}

.picker-option[data-v-9e9cfcca]:hover {
	opacity: .8
}

.picker-option.active[data-v-9e9cfcca] {
	background: var(--primary-color);
	color: #fff
}

.picker-option.active[data-v-9e9cfcca]:hover {
	background: var(--primary-color);
	opacity: .9
}

@media (max-width: 550px) {
	.mbti-picker[data-v-9e9cfcca] {
		width: 80%;
		max-width: 300px;
		margin: 0 auto
	}

	.picker-container[data-v-9e9cfcca] {
		gap: 8px
	}

	.picker-option[data-v-9e9cfcca] {
		padding: 10px 6px;
		font-size: 13px
	}

	.dimension-label[data-v-9e9cfcca] {
		font-size: 11px
	}
}

.modal-overlay[data-v-41418e85] {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--overlay-bg);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1000
}

.modal[data-v-41418e85] {
	background: var(--bg-color-primary);
	border-radius: 8px;
	width: 90%;
	max-width: 500px;
	max-height: 80vh;
	display: flex;
	flex-direction: column;
	overflow: hidden
}

.crop-modal[data-v-41418e85] {
	max-width: 600px
}

.modal-header[data-v-41418e85] {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px 30px;
	border-bottom: 1px solid var(--border-color-primary);
	flex-shrink: 0;
	background: var(--bg-color-primary)
}

.modal-header h4[data-v-41418e85] {
	margin: 0;
	color: var(--text-color-primary)
}

.close-btn[data-v-41418e85] {
	background: var(--bg-color-secondary);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	width: 30px;
	height: 30px;
	border: none;
	cursor: pointer;
	padding: 5px;
	color: var(--text-color-primary)
}

.close-btn[data-v-41418e85]:hover {
	color: var(--text-color-secondary);
	transform: scale(1.1);
	transition: all .2s ease
}

.close-btn svg[data-v-41418e85] {
	width: 16px;
	height: 16px
}

.modal-body[data-v-41418e85] {
	padding: 20px;
	flex: 1;
	overflow-y: auto;
	min-height: 0
}

.modal-footer[data-v-41418e85] {
	flex-shrink: 0;
	background: var(--bg-color-primary);
	border-top: 1px solid var(--border-color-primary);
	padding: 20px 30px
}

.form-actions[data-v-41418e85] {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin: 0
}

.btn[data-v-41418e85] {
	padding: 8px 16px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-size: 14px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: all .2s;
	text-decoration: none
}

.btn[data-v-41418e85]:disabled {
	opacity: .5;
	cursor: not-allowed
}

.btn-primary[data-v-41418e85] {
	background-color: var(--primary-color);
	color: #fff
}

.btn-primary[data-v-41418e85]:hover:not(:disabled) {
	background-color: var(--primary-color-dark)
}

.btn-outline[data-v-41418e85] {
	background-color: transparent;
	color: var(--text-color-secondary);
	border: 1px solid var(--border-color-primary)
}

.btn-outline[data-v-41418e85]:hover:not(:disabled) {
	background-color: var(--bg-color-secondary)
}

.crop-container[data-v-41418e85] {
	max-height: 400px;
	overflow: hidden;
	text-align: center
}

.crop-container img[data-v-41418e85] {
	max-width: 100%;
	max-height: 400px
}

.modal-overlay[data-v-18f1f45c] {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--overlay-bg);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1000
}

.modal[data-v-18f1f45c] {
	background: var(--bg-color-primary);
	border-radius: 8px;
	width: 90%;
	max-width: 500px;
	max-height: 80vh;
	display: flex;
	flex-direction: column;
	overflow: hidden
}

.crop-modal[data-v-18f1f45c] {
	max-width: 600px
}

.modal-header[data-v-18f1f45c] {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px 30px;
	border-bottom: 1px solid var(--border-color-primary);
	flex-shrink: 0;
	background: var(--bg-color-primary)
}

.modal-header h4[data-v-18f1f45c] {
	margin: 0;
	color: var(--text-color-primary)
}

.close-btn[data-v-18f1f45c] {
	width: 30px;
	height: 30px;
	background: var(--bg-color-secondary);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	cursor: pointer;
	padding: 5px;
	color: var(--text-color-primary);
	transition: all .2s ease
}

.close-btn[data-v-18f1f45c]:hover {
	color: var(--text-color-secondary);
	transform: scale(1.1);
	transition: all .2s ease
}

.close-btn svg[data-v-18f1f45c] {
	width: 16px;
	height: 16px
}

.modal-body[data-v-18f1f45c] {
	padding: 20px;
	flex: 1;
	overflow-y: auto;
	min-height: 0
}

.modal-footer[data-v-18f1f45c] {
	flex-shrink: 0;
	background: var(--bg-color-primary);
	border-top: 1px solid var(--border-color-primary);
	padding: 20px 30px
}

.form-group[data-v-18f1f45c] {
	margin-bottom: 20px
}

.form-group[data-v-18f1f45c]:last-child {
	margin-bottom: 0
}

.form-group label[data-v-18f1f45c] {
	display: block;
	margin-bottom: 5px;
	font-weight: 500;
	color: var(--text-color-primary)
}

.form-group input[data-v-18f1f45c],
.form-group textarea[data-v-18f1f45c] {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--border-color-primary);
	border-radius: 4px;
	font-size: 14px;
	transition: border-color .2s;
	background-color: var(--bg-color-primary);
	color: var(--text-color-primary);
	box-sizing: border-box;
	caret-color: var(--primary-color)
}

.form-group input[data-v-18f1f45c]:focus,
.form-group textarea[data-v-18f1f45c]:focus,
.form-group .content-textarea[data-v-18f1f45c]:focus {
	outline: none;
	border-color: var(--primary-color)
}

.form-group textarea[data-v-18f1f45c],
.form-group .content-textarea[data-v-18f1f45c] {
	resize: vertical;
	min-height: 100px
}

.content-textarea[data-v-18f1f45c] {
	width: 100%;
	padding: 12px;
	border: none;
	border-radius: 8px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--text-color-primary);
	background-color: var(--bg-color-secondary);
	box-sizing: border-box;
	caret-color: var(--primary-color)
}

.content-textarea[data-v-18f1f45c]:empty:before {
	content: attr(placeholder);
	color: var(--text-color-secondary);
	pointer-events: none
}

.form-group .form-label[data-v-18f1f45c] {
	color: var(--text-color-primary)
}

.bio-input-wrapper[data-v-18f1f45c] {
	position: relative;
	border: 1px solid var(--border-color-primary);
	border-radius: 8px;
	background: var(--bg-color-primary);
	transition: all .2s ease
}

.bio-input-wrapper[data-v-18f1f45c]:focus-within {
	border-color: var(--primary-color)
}

.bio-input-wrapper[data-v-18f1f45c] .content-textarea {
	width: 100%;
	padding: 1rem 1rem 3rem;
	border: none;
	border-radius: 8px;
	background: transparent;
	color: var(--text-color-primary);
	font-size: 16px;
	line-height: 1.5;
	transition: all .2s ease;
	min-height: 120px;
	box-sizing: border-box
}

.bio-input-wrapper[data-v-18f1f45c] .content-textarea:focus {
	outline: none
}

.bio-input-wrapper[data-v-18f1f45c] .mention-link {
	color: var(--text-color-tag);
	text-decoration: none;
	font-weight: 500;
	cursor: pointer;
	transition: color .2s ease;
	background: none;
	border: none;
	padding: 0;
	display: inline
}

.bio-input-wrapper[data-v-18f1f45c] .mention-link:hover {
	color: var(--text-color-tag);
	opacity: .8
}

.bio-input-wrapper[data-v-18f1f45c] .mention-link:active {
	color: var(--text-color-tag);
	opacity: .6
}

.bio-actions[data-v-18f1f45c] {
	position: absolute;
	bottom: .5rem;
	left: 1rem;
	display: flex;
	align-items: center;
	gap: 8px
}

.emoji-btn[data-v-18f1f45c],
.mention-btn[data-v-18f1f45c] {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: none;
	background: transparent;
	color: var(--text-color-secondary, #999);
	border-radius: 50%;
	cursor: pointer;
	transition: all .2s ease
}

.emoji-btn[data-v-18f1f45c]:hover,
.mention-btn[data-v-18f1f45c]:hover {
	background: var(--bg-color-secondary);
	color: var(--text-color-primary)
}

.emoji-icon[data-v-18f1f45c],
.mention-icon[data-v-18f1f45c] {
	width: 20px;
	height: 20px
}

.char-count[data-v-18f1f45c] {
	position: absolute;
	bottom: .5rem;
	right: .75rem;
	font-size: .8rem;
	color: var(--text-color-secondary);
	background: var(--bg-color-primary);
	padding: .25rem;
	border-radius: 4px
}

.interests-input[data-v-18f1f45c] {
	display: flex;
	flex-direction: column;
	gap: 12px
}

.interest-tags[data-v-18f1f45c] {
	display: flex;
	flex-wrap: wrap;
	gap: 6px
}

.interest-tag[data-v-18f1f45c] {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 8px;
	background-color: var(--bg-color-secondary);
	border: 1px solid var(--border-color-primary);
	border-radius: 12px;
	font-size: 12px;
	color: var(--text-color-primary)
}

.remove-tag-btn[data-v-18f1f45c] {
	background: none;
	border: none;
	color: var(--text-color-secondary);
	cursor: pointer;
	font-size: 14px;
	line-height: 1;
	padding: 0;
	margin-left: 2px
}

.remove-tag-btn[data-v-18f1f45c]:hover {
	color: var(--primary-color)
}

.add-interest[data-v-18f1f45c] {
	display: flex;
	gap: 8px;
	align-items: center
}

.add-interest input[data-v-18f1f45c] {
	flex: 1;
	padding: 8px 12px;
	border: 1px solid var(--border-color-primary);
	border-radius: 4px;
	background: var(--bg-color-primary);
	color: var(--text-color-primary);
	font-size: 14px;
	caret-color: var(--primary-color)
}

.add-btn[data-v-18f1f45c] {
	padding: 8px 16px;
	background-color: var(--primary-color);
	color: #fff;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-size: 14px;
	white-space: nowrap
}

.add-btn[data-v-18f1f45c]:hover:not(:disabled) {
	background-color: var(--primary-color-dark)
}

.add-btn[data-v-18f1f45c]:disabled {
	background-color: var(--disabled-bg);
	cursor: not-allowed;
	opacity: .5
}

.interest-hint[data-v-18f1f45c] {
	font-size: 12px;
	color: var(--text-color-secondary);
	margin-top: 4px;
	text-align: right
}

.avatar-upload-container[data-v-18f1f45c] {
	display: flex;
	flex-direction: column;
	align-items: center
}

.avatar-upload-area[data-v-18f1f45c] {
	position: relative;
	width: 120px;
	height: 120px;
	border: 2px dashed #ddd;
	border-radius: 50%;
	cursor: pointer;
	overflow: hidden;
	transition: border-color .2s
}

.avatar-upload-area[data-v-18f1f45c]:hover {
	border-color: var(--primary-color)
}

.avatar-preview[data-v-18f1f45c] {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center
}

.avatar-image[data-v-18f1f45c] {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
	transition: all .3s ease
}

.overlay-icon[data-v-18f1f45c] {
	position: absolute;
	opacity: 0;
	transition: all .3s ease
}

.avatar-upload-area:hover .overlay-icon[data-v-18f1f45c] {
	opacity: .7;
	color: var(--button-text-color);
	transform: scale(1.2)
}

.avatar-upload-area:hover .avatar-image[data-v-18f1f45c] {
	filter: brightness(.6)
}

.upload-loading[data-v-18f1f45c] {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	color: var(--text-color-secondary)
}

.loading-spinner[data-v-18f1f45c] {
	width: 24px;
	height: 24px;
	border: 2px solid var(--border-color-primary);
	border-top: 2px solid var(--primary-color);
	border-radius: 50%;
	animation: spin-18f1f45c 1s linear infinite;
	margin-bottom: 8px
}

@keyframes spin-18f1f45c {
	0% {
		transform: rotate(0)
	}

	to {
		transform: rotate(360deg)
	}
}

.loading-text[data-v-18f1f45c] {
	font-size: 12px;
	color: var(--text-color-secondary)
}

.form-actions[data-v-18f1f45c] {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin: 0
}

.btn[data-v-18f1f45c] {
	padding: 8px 16px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-size: 14px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: all .2s;
	text-decoration: none
}

.btn[data-v-18f1f45c]:disabled {
	opacity: .5;
	cursor: not-allowed
}

.btn-primary[data-v-18f1f45c] {
	background-color: var(--primary-color);
	color: #fff
}

.btn-primary[data-v-18f1f45c]:hover:not(:disabled) {
	background-color: var(--primary-color-dark)
}

.btn-outline[data-v-18f1f45c] {
	background-color: transparent;
	color: var(--text-color-secondary);
	border: 1px solid var(--border-color-primary)
}

.btn-outline[data-v-18f1f45c]:hover:not(:disabled) {
	background-color: var(--bg-color-secondary)
}

.emoji-panel-overlay[data-v-18f1f45c] {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10000;
	animation: fadeIn-18f1f45c .2s ease
}

.emoji-panel[data-v-18f1f45c] {
	background: var(--bg-color-primary);
	border-radius: 12px;
	box-shadow: 0 8px 32px #0003;
	overflow: hidden;
	animation: scaleIn-18f1f45c .2s ease;
	max-width: 90vw;
	max-height: 90vh
}

@keyframes fadeIn-18f1f45c {
	0% {
		opacity: 0
	}

	to {
		opacity: 1
	}
}

@keyframes scaleIn-18f1f45c {
	0% {
		opacity: 0;
		transform: scale(.8)
	}

	to {
		opacity: 1;
		transform: scale(1)
	}
}

@media (max-width: 480px) {
	.mbti-selector[data-v-18f1f45c] {
		grid-template-columns: 1fr;
		gap: 8px
	}

	.add-interest[data-v-18f1f45c] {
		flex-direction: column;
		align-items: stretch
	}

	.add-btn[data-v-18f1f45c] {
		align-self: flex-end;
		width: fit-content
	}
}

.email-display[data-v-18f1f45c] {
	display: flex;
	align-items: center;
	gap: 12px
}

.email-text[data-v-18f1f45c] {
	color: var(--text-color-primary);
	font-size: 14px
}

.unbind-email-btn[data-v-18f1f45c] {
	padding: 4px 10px;
	border: 1px solid var(--border-color-primary);
	border-radius: 4px;
	font-size: 12px;
	background-color: transparent;
	color: var(--text-color-secondary);
	cursor: pointer;
	transition: all .2s ease
}

.unbind-email-btn[data-v-18f1f45c]:hover:not(:disabled) {
	border-color: var(--primary-color);
	color: var(--primary-color)
}

.unbind-email-btn[data-v-18f1f45c]:disabled {
	opacity: .5;
	cursor: not-allowed
}

.email-bind-container[data-v-18f1f45c] {
	display: flex;
	flex-direction: column;
	gap: 10px
}

.email-input-row input[data-v-18f1f45c],
.email-code-row input[data-v-18f1f45c] {
	flex: 1;
	padding: 10px 12px;
	border: 1px solid var(--border-color-primary);
	border-radius: 4px;
	font-size: 14px;
	background-color: var(--bg-color-primary);
	color: var(--text-color-primary);
	box-sizing: border-box;
	caret-color: var(--primary-color)
}

.email-input-row input[data-v-18f1f45c]:focus,
.email-code-row input[data-v-18f1f45c]:focus {
	outline: none;
	border-color: var(--primary-color)
}

.email-code-row[data-v-18f1f45c] {
	display: flex;
	gap: 8px
}

.email-code-btn[data-v-18f1f45c] {
	padding: 12px 16px;
	border: none;
	border-radius: 4px;
	font-size: 14px;
	background: var(--primary-color);
	color: #fff;
	cursor: pointer;
	transition: all .2s ease;
	white-space: nowrap
}

.email-code-btn[data-v-18f1f45c]:hover:not(:disabled) {
	background-color: var(--primary-color-dark);
	color: #fff
}

.email-code-btn[data-v-18f1f45c]:disabled {
	opacity: .5;
	cursor: not-allowed
}

.bind-email-btn[data-v-18f1f45c] {
	padding: 10px 16px;
	background-color: var(--primary-color);
	color: #fff;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-size: 14px;
	transition: all .2s ease
}

.bind-email-btn[data-v-18f1f45c]:hover:not(:disabled) {
	background-color: var(--primary-color-dark)
}

.bind-email-btn[data-v-18f1f45c]:disabled {
	opacity: .5;
	cursor: not-allowed
}

.email-error[data-v-18f1f45c] {
	color: var(--primary-color);
	font-size: 12px
}

.personality-tags[data-v-ba771812] {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
	padding: 0 16px
}

@media (min-width: 901px) {
	.personality-tags[data-v-ba771812] {
		padding: 0
	}
}

.tag[data-v-ba771812] {
	display: inline-flex;
	align-items: center;
	padding: 4px 8px;
	background-color: var(--bg-color-secondary);
	color: var(--text-color-secondary);
	border-radius: 12px;
	font-size: 12px;
	line-height: 1.2;
	white-space: nowrap;
	border: 1px solid var(--border-color-primary);
	transition: all .2s ease
}

.tag .gender-icon[data-v-ba771812] {
	margin-right: 4px;
	color: var(--text-color-secondary)
}

@media (max-width: 480px) {
	.personality-tags[data-v-ba771812] {
		gap: 6px;
		padding: 0 16px
	}

	.tag[data-v-ba771812] {
		padding: 3px 6px;
		font-size: 11px
	}
}

[data-v-64375a6f] {
	box-sizing: border-box
}

.content-container[data-v-64375a6f] {
	padding-top: 72px;
	margin: 0 auto;
	width: 100%;
	max-width: 1200px;
	background: var(--bg-color-primary);
	min-height: 100vh;
	transition: background-color .2s ease
}

.content-switch-container[data-v-64375a6f] {
	width: 100%;
	max-width: 1200px;
	background: var(--bg-color-primary);
	margin: 0 auto;
	position: relative;
	overflow: hidden;
	padding-bottom: calc(48px + constant(safe-area-inset-bottom));
	padding-bottom: calc(48px + env(safe-area-inset-bottom))
}

.content-item[data-v-64375a6f] {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	background: var(--bg-color-primary);
	transition: transform .3s ease;
	opacity: 0;
	pointer-events: none
}

.content-item.active[data-v-64375a6f] {
	position: relative;
	opacity: 1;
	pointer-events: auto
}

.waterfall-container[data-v-64375a6f] {
	width: 100%;
	max-width: 700px;
	padding: 0 8px;
	margin: 0 auto;
	background: var(--bg-color-primary);
	transition: background-color .2s ease
}

@media (min-width: 960px) {
	.waterfall-container[data-v-64375a6f] {
		max-width: 1000px;
		padding: 0 16px
	}
}

.user-info[data-v-64375a6f] {
	height: auto;
	min-height: 196px;
	padding: 16px 0;
	width: 100%;
	max-width: 1200px;
	overflow-x: hidden;
	background: var(--bg-color-primary);
	transition: background-color .2s ease
}

.basic-info[data-v-64375a6f] {
	display: flex;
	flex-direction: row;
	align-items: center;
	height: 72px;
	width: 100%;
	padding: 0 16px;
	position: relative
}

.avatar[data-v-64375a6f] {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	border: 1px solid var(--border-color-primary);
	cursor: pointer
}

.user-basic[data-v-64375a6f] {
	display: flex;
	flex-direction: column;
	flex: 1;
	margin-left: 16px;
	gap: 6px
}

.user-nickname[data-v-64375a6f] {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--text-color-primary);
	font-size: 18px;
	font-weight: 700
}

.user-content[data-v-64375a6f] {
	display: flex;
	flex-direction: column;
	color: var(--text-color-quaternary);
	font-size: 12px;
	gap: 4px;
	max-width: 100%
}

@media (min-width: 901px) {
	.user-content[data-v-64375a6f] {
		flex-direction: row;
		align-items: center;
		gap: 8px;
		flex-wrap: wrap;
		overflow: hidden;
		text-overflow: ellipsis
	}
}

.user-id[data-v-64375a6f],
.user-IP[data-v-64375a6f] {
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap
}

.user-IP[data-v-64375a6f]:before {
	content: "";
	display: none
}

@media (min-width: 901px) {
	.user-id[data-v-64375a6f] {
		max-width: 60%
	}

	.user-IP[data-v-64375a6f]:before {
		content: "";
		display: inline-block;
		width: .92px;
		height: 12px;
		background-color: var(--bg-color-tertiary);
		margin-right: 8px;
		vertical-align: middle;
		transition: background-color .2s ease
	}
}

.user-desc[data-v-64375a6f] {
	margin: 17px 0 0;
	color: var(--text-color-primary);
	font-size: 14px;
	padding: 0 16px
}

.user-interactions[data-v-64375a6f] {
	display: flex;
	padding: 0 16px;
	flex-wrap: wrap;
	width: 100%
}

.user-interactions div[data-v-64375a6f] {
	display: flex;
	flex-direction: column;
	margin-right: 16px;
	margin-top: 20px
}

.interaction-item[data-v-64375a6f] {
	cursor: pointer;
	padding: 4px 8px;
	border-radius: 8px;
	transition: background-color .2s ease
}

.interaction-item[data-v-64375a6f]:hover {
	background-color: var(--bg-color-secondary)
}

.interaction-item[data-v-64375a6f]:last-child {
	cursor: default
}

.interaction-item[data-v-64375a6f]:last-child:hover {
	background-color: transparent
}

.count[data-v-64375a6f] {
	color: var(--text-color-primary);
	margin-right: 4px;
	font-size: 14px;
	text-align: center
}

.shows[data-v-64375a6f] {
	color: var(--text-color-quaternary);
	margin: 4px 0 0;
	font-size: 14px;
	text-align: center
}

.login-prompt[data-v-64375a6f] {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 300px;
	padding: 40px 16px;
	background: var(--bg-color-primary);
	transition: background-color .2s ease
}

.prompt-content[data-v-64375a6f] {
	text-align: center;
	max-width: 300px
}

.prompt-icon[data-v-64375a6f] {
	color: var(--text-color-quaternary);
	margin-bottom: 16px
}

.prompt-content h3[data-v-64375a6f] {
	color: var(--text-color-primary);
	font-size: 18px;
	font-weight: 600;
	margin: 0 0 8px
}

.prompt-content p[data-v-64375a6f] {
	color: var(--text-color-secondary);
	font-size: 14px;
	margin: 0;
	line-height: 1.5
}

.tab[data-v-64375a6f] {
	position: relative;
	display: flex;
	justify-content: center;
	padding-left: 16px;
	padding-top: 16px;
	padding-bottom: 16px;
	background: var(--bg-color-primary);
	transition: background-color .2s ease
}

.fixedTab[data-v-64375a6f] {
	position: fixed;
	top: 72px;
	z-index: 99;
	transform: none;
	background: var(--bg-color-primary);
	display: flex;
	justify-content: center;
	left: 0;
	right: 0;
	padding-left: 16px;
	padding-top: 16px;
	padding-bottom: 16px;
	transition: background-color .2s ease
}

.tab-item[data-v-64375a6f] {
	width: 64px;
	height: 40px;
	font-size: 16px;
	color: var(--text-color-secondary);
	cursor: pointer;
	background: transparent;
	border-radius: 999px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	-webkit-user-select: none;
	user-select: none;
	position: relative;
	z-index: 1;
	transition: color .2s ease, background-color .2s ease
}

.tab-item[data-v-64375a6f]:hover {
	color: var(--text-color-primary);
	transition: color .2s ease
}

.tab-item.active[data-v-64375a6f] {
	color: var(--text-color-primary);
	font-weight: 700;
	background: transparent;
	transition: color .2s ease
}

.tab-slider[data-v-64375a6f],
.fixedTab .tab-slider[data-v-64375a6f] {
	position: absolute;
	top: 16px;
	width: 64px;
	height: 40px;
	border-radius: 999px;
	background: var(--bg-color-secondary);
	transition: left .3s cubic-bezier(.4, 0, .2, 1), background-color .2s ease;
	z-index: 0
}

.hidden[data-v-64375a6f] {
	display: none
}

.btn[data-v-64375a6f] {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background-color: var(--bg-color-primary);
	border: var(--border-color-primary) 1px solid;
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease, transform .2s ease
}

.btn-icon[data-v-64375a6f] {
	color: var(--text-color-secondary);
	transition: color .3s ease
}

.btn[data-v-64375a6f]:hover {
	background-color: var(--bg-color-secondary);
	transition: all .2s ease
}

.btn:hover .btn-icon[data-v-64375a6f] {
	color: var(--text-color-primary)
}

.edit-profile-button-wrapper[data-v-64375a6f] {
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%)
}

.edit-profile-btn[data-v-64375a6f] {
	padding: 3px 16px;
	border: 1px solid var(--text-color-quaternary);
	border-radius: 20px;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	width: 90px;
	height: 40px;
	text-align: center;
	transition: all .2s ease;
	-webkit-user-select: none;
	user-select: none;
	background: #aeadad0d;
	color: var(--text-color-tertiary)
}

.edit-profile-btn[data-v-64375a6f]:hover {
	background: #6e6e6e2c;
	color: var(--text-color-secondary);
	border-color: var(--text-color-tertiary)
}

.text-ellipsis[data-v-64375a6f] {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%
}

@media (min-width: 901px) {
	.user-info[data-v-64375a6f] {
		max-width: 650px;
		margin: 0 auto;
		padding: 16px 0
	}

	.basic-info[data-v-64375a6f],
	.user-desc[data-v-64375a6f],
	.user-interactions[data-v-64375a6f] {
		padding: 0
	}

	.tab[data-v-64375a6f] {
		max-width: 700px;
		margin: 0 auto;
		padding-left: 0
	}

	.fixedTab[data-v-64375a6f] {
		padding-left: 220px
	}

	.content-item[data-v-64375a6f] {
		padding-left: 0
	}

	.edit-profile-button-wrapper[data-v-64375a6f] {
		right: 0
	}
}

[data-v-c912c04d] {
	box-sizing: border-box
}

.content-container[data-v-c912c04d] {
	padding-top: 72px;
	margin: 0 auto;
	width: 100%;
	max-width: 1200px;
	background: var(--bg-color-primary);
	min-height: 100vh;
	transition: background-color .2s ease
}

.content-area[data-v-c912c04d] {
	width: 100%;
	background-color: var(--bg-color-primary);
	margin-bottom: 0;
	padding: 0px 10px calc(48px + constant(safe-area-inset-bottom)) 10px;
	padding: 0px 10px calc(48px + env(safe-area-inset-bottom)) 10px;
	box-sizing: border-box;
	overflow-x: hidden;
	transition: background-color .2s ease
}

.user-info[data-v-c912c04d] {
	height: auto;
	min-height: 196px;
	padding: 16px 0;
	width: 100%;
	max-width: 1200px;
	overflow-x: hidden;
	background: var(--bg-color-primary);
	transition: background-color .2s ease
}

.basic-info[data-v-c912c04d] {
	display: flex;
	flex-direction: row;
	align-items: center;
	height: 72px;
	width: 100%;
	padding: 0 16px;
	position: relative
}

.avatar[data-v-c912c04d] {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	border: 1px solid var(--border-color-primary);
	cursor: pointer
}

.user-basic[data-v-c912c04d] {
	display: flex;
	flex-direction: column;
	flex: 1;
	margin-left: 16px;
	gap: 6px
}

.user-nickname[data-v-c912c04d] {
	color: var(--text-color-primary);
	font-size: 18px;
	font-weight: 700;
	gap: 6px;
	align-items: center;
	display: flex
}

.user-content[data-v-c912c04d] {
	display: flex;
	flex-direction: column;
	color: var(--text-color-quaternary);
	font-size: 12px;
	gap: 4px;
	max-width: 100%
}

@media (min-width: 901px) {
	.user-content[data-v-c912c04d] {
		flex-direction: row;
		align-items: center;
		gap: 8px;
		flex-wrap: wrap;
		overflow: hidden;
		text-overflow: ellipsis
	}
}

.user-id[data-v-c912c04d],
.user-IP[data-v-c912c04d] {
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap
}

.user-IP[data-v-c912c04d]:before {
	content: "";
	display: none
}

@media (min-width: 901px) {
	.user-id[data-v-c912c04d] {
		max-width: 60%
	}

	.user-IP[data-v-c912c04d]:before {
		content: "";
		display: inline-block;
		width: .92px;
		height: 12px;
		background-color: var(--bg-color-tertiary);
		margin-right: 8px;
		vertical-align: middle
	}
}

.user-desc[data-v-c912c04d] {
	margin: 17px 0 0;
	color: var(--text-color-primary);
	font-size: 14px;
	padding: 0 16px
}

.user-interactions[data-v-c912c04d] {
	display: flex;
	padding: 0 16px;
	flex-wrap: wrap;
	width: 100%
}

.user-interactions div[data-v-c912c04d] {
	display: flex;
	flex-direction: column;
	margin-right: 16px;
	margin-top: 20px
}

.interaction-item[data-v-c912c04d] {
	cursor: pointer;
	padding: 4px 8px;
	border-radius: 8px;
	transition: background-color .2s ease
}

.interaction-item[data-v-c912c04d]:hover {
	background-color: var(--bg-color-secondary)
}

.interaction-item[data-v-c912c04d]:last-child {
	cursor: default
}

.interaction-item[data-v-c912c04d]:last-child:hover {
	background-color: transparent
}

.count[data-v-c912c04d] {
	color: var(--text-color-primary);
	margin-right: 4px;
	font-size: 14px;
	text-align: center
}

.shows[data-v-c912c04d] {
	color: var(--text-color-quaternary);
	margin: 4px 0 0;
	font-size: 14px;
	text-align: center
}

.follow-button-wrapper[data-v-c912c04d] {
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%)
}

.loading-state[data-v-c912c04d],
.error-state[data-v-c912c04d] {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 300px;
	padding: 40px 16px;
	background: var(--bg-color-primary)
}

.loading-content[data-v-c912c04d],
.error-content[data-v-c912c04d] {
	text-align: center;
	max-width: 300px
}

.loading-icon[data-v-c912c04d],
.error-icon[data-v-c912c04d] {
	color: var(--text-color-quaternary);
	margin-bottom: 16px
}

.loading-content p[data-v-c912c04d],
.error-content h3[data-v-c912c04d] {
	color: var(--text-color-primary);
	font-size: 18px;
	font-weight: 600;
	margin: 0 0 8px
}

.error-content p[data-v-c912c04d] {
	color: var(--text-color-secondary);
	font-size: 14px;
	margin: 0;
	line-height: 1.5
}

.tab[data-v-c912c04d] {
	position: relative;
	display: flex;
	justify-content: center;
	padding-left: 16px;
	padding-top: 16px;
	padding-bottom: 16px;
	background: var(--bg-color-primary);
	transition: background-color .2s ease
}

.fixedTab[data-v-c912c04d] {
	position: fixed;
	top: 72px;
	z-index: 99;
	transform: none;
	background: var(--bg-color-primary);
	display: flex;
	justify-content: center;
	left: 0;
	right: 0;
	padding-left: 16px;
	padding-top: 16px;
	padding-bottom: 16px;
	transition: background-color .2s ease
}

.tab-item[data-v-c912c04d] {
	width: 64px;
	height: 40px;
	font-size: 16px;
	color: var(--text-color-secondary);
	cursor: pointer;
	background: transparent;
	border-radius: 999px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	-webkit-user-select: none;
	user-select: none;
	position: relative;
	z-index: 1;
	transition: color .2s ease, background-color .2s ease
}

.tab-item[data-v-c912c04d]:hover {
	color: var(--text-color-primary);
	transition: color .2s ease
}

.tab-item.active[data-v-c912c04d] {
	color: var(--text-color-primary);
	font-weight: 700;
	background: transparent;
	transition: color .2s ease
}

.tab-slider[data-v-c912c04d],
.fixedTab .tab-slider[data-v-c912c04d] {
	position: absolute;
	top: 16px;
	width: 64px;
	height: 40px;
	border-radius: 999px;
	background: var(--bg-color-secondary);
	transition: left .3s cubic-bezier(.4, 0, .2, 1), background-color .2s ease;
	z-index: 0
}

.hidden[data-v-c912c04d] {
	display: none
}

.content-switch-container[data-v-c912c04d] {
	width: 100%;
	max-width: 1200px;
	background: var(--bg-color-primary);
	margin: 0 auto;
	position: relative;
	overflow: hidden;
	transition: background-color .2s ease
}

.content-item[data-v-c912c04d] {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	background: var(--bg-color-primary);
	transition: transform .3s ease;
	opacity: 0;
	pointer-events: none;
	display: flex;
	justify-content: center
}

.content-item.active[data-v-c912c04d] {
	position: relative;
	opacity: 1;
	pointer-events: auto
}

.waterfall-container[data-v-c912c04d] {
	width: 100%;
	max-width: 700px;
	padding: 0 8px;
	margin: 0 auto;
	background: var(--bg-color-primary);
	transition: background-color .2s ease
}

@media (min-width: 960px) {
	.waterfall-container[data-v-c912c04d] {
		max-width: 1000px;
		padding: 0 16px
	}
}

.btn[data-v-c912c04d] {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background-color: var(--bg-color-primary);
	border: var(--border-color-primary) 1px solid;
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease, transform .2s ease
}

.btn-icon[data-v-c912c04d] {
	color: var(--text-color-secondary);
	transition: color .3s ease
}

.btn[data-v-c912c04d]:hover {
	background-color: var(--bg-color-secondary);
	transition: all .2s ease
}

.btn:hover .btn-icon[data-v-c912c04d] {
	color: var(--text-color-primary)
}

.text-ellipsis[data-v-c912c04d] {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%
}

@media (min-width: 901px) {
	.user-info[data-v-c912c04d] {
		max-width: 650px;
		margin: 0 auto;
		padding: 16px 0
	}

	.basic-info[data-v-c912c04d],
	.user-desc[data-v-c912c04d],
	.user-interactions[data-v-c912c04d] {
		padding: 0
	}

	.follow-button-wrapper[data-v-c912c04d] {
		right: 0
	}

	.tab[data-v-c912c04d] {
		max-width: 700px;
		margin: 0 auto;
		padding-left: 0
	}

	.fixedTab[data-v-c912c04d] {
		padding-left: 220px
	}

	.content-item[data-v-c912c04d] {
		padding-left: 0
	}
}

.user-card[data-v-dfed37c6] {
	display: flex;
	align-items: center;
	padding: 16px;
	background: var(--bg-color-primary);
	border-radius: 12px;
	border: 1px solid var(--border-color-primary);
	cursor: pointer;
	transition: all .2s ease;
	margin-bottom: 10px;
	margin-top: 2px;
	position: relative
}

.user-card[data-v-dfed37c6]:hover {
	background: var(--bg-color-secondary);
	transform: translateY(-1px)
}

.content-hidden[data-v-dfed37c6] {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	opacity: 0;
	pointer-events: none;
	z-index: -1
}

.user-content[data-v-dfed37c6] {
	display: flex;
	align-items: center;
	width: 100%
}

.user-avatar[data-v-dfed37c6] {
	margin-right: 12px;
	flex-shrink: 0
}

.avatar-img[data-v-dfed37c6] {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover
}

.user-info[data-v-dfed37c6] {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-width: 0
}

.user-main[data-v-dfed37c6] {
	flex: 1;
	min-width: 0
}

.nickname-container[data-v-dfed37c6] {
	display: flex;
	align-items: center;
	margin-bottom: 4px;
	gap: 6px
}

.user-nickname[data-v-dfed37c6] {
	font-size: 16px;
	font-weight: 600;
	color: var(--text-color-primary);
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: inline-block;
	max-width: 180px;
	vertical-align: bottom
}

.user-id[data-v-dfed37c6] {
	font-size: 12px;
	color: var(--text-color-tertiary);
	margin-bottom: 6px
}

.user-stats[data-v-dfed37c6] {
	display: flex;
	gap: 16px
}

.stat-item[data-v-dfed37c6] {
	font-size: 12px;
	color: var(--text-color-secondary)
}

@media (max-width: 480px) {
	.user-card[data-v-dfed37c6] {
		padding: 12px
	}

	.avatar-img[data-v-dfed37c6],
	.skeleton-avatar[data-v-dfed37c6] {
		width: 40px;
		height: 40px
	}

	.user-nickname[data-v-dfed37c6] {
		font-size: 14px;
		max-width: 140px
	}

	.skeleton-nickname[data-v-dfed37c6] {
		height: 14px;
		width: 70px
	}

	.skeleton-id[data-v-dfed37c6] {
		width: 100px
	}

	.user-stats[data-v-dfed37c6],
	.skeleton-stats[data-v-dfed37c6] {
		gap: 12px
	}

	.skeleton-stat[data-v-dfed37c6] {
		width: 50px
	}
}

.user-list[data-v-c4155b30] {
	width: 100%;
	padding: 0 16px;
	box-sizing: border-box
}

.empty-state[data-v-c4155b30] {
	text-align: center;
	padding: 60px 20px;
	color: var(--text-color-secondary)
}

.empty-state p[data-v-c4155b30] {
	margin: 0;
	font-size: 14px
}

@media (max-width: 768px) {
	.user-list[data-v-c4155b30] {
		padding: 0 8px
	}
}

[data-v-f78ff979] {
	box-sizing: border-box
}

.follow-list-container[data-v-f78ff979] {
	padding-top: 72px;
	margin: 0 auto;
	width: 100%;
	max-width: 1200px;
	background: var(--bg-color-primary);
	padding-bottom: 20px;
	min-height: calc(100vh - 72px)
}

.header[data-v-f78ff979] {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 72px;
	background: var(--bg-color-primary);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 16px;
	z-index: 100
}

.header-left[data-v-f78ff979] {
	width: 48px;
	height: 48px
}

.header-title[data-v-f78ff979] {
	font-size: 18px;
	font-weight: 700;
	color: var(--text-color-primary)
}

.header-right[data-v-f78ff979] {
	width: 48px
}

.tab[data-v-f78ff979] {
	position: relative;
	display: flex;
	justify-content: center;
	padding-left: 16px;
	padding-top: 16px;
	padding-bottom: 16px;
	background: var(--bg-color-primary)
}

.fixedTab[data-v-f78ff979] {
	position: fixed;
	top: 72px;
	z-index: 99;
	transform: none;
	background: var(--bg-color-primary);
	display: flex;
	justify-content: center;
	left: 0;
	right: 0;
	padding-left: 16px;
	padding-top: 16px;
	padding-bottom: 16px
}

.tab-item[data-v-f78ff979] {
	width: 80px;
	height: 40px;
	font-size: 16px;
	color: var(--text-color-secondary);
	cursor: pointer;
	background: transparent;
	border-radius: 999px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	-webkit-user-select: none;
	user-select: none;
	position: relative;
	z-index: 1
}

.tab-item[data-v-f78ff979]:hover {
	color: var(--text-color-primary)
}

.tab-item.active[data-v-f78ff979] {
	color: var(--text-color-primary);
	font-weight: 700;
	background: transparent
}

.tab-slider[data-v-f78ff979],
.fixedTab .tab-slider[data-v-f78ff979] {
	position: absolute;
	top: 16px;
	width: 80px;
	height: 40px;
	border-radius: 999px;
	background: var(--bg-color-secondary);
	transition: left .3s cubic-bezier(.4, 0, .2, 1);
	z-index: 0
}

.hidden[data-v-f78ff979] {
	display: none
}

.content-switch-container[data-v-f78ff979] {
	width: 100%;
	max-width: 1200px;
	background: var(--bg-color-primary);
	position: relative;
	overflow: hidden
}

.content-item[data-v-f78ff979] {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	background: var(--bg-color-primary);
	transition: transform .3s ease;
	opacity: 0;
	pointer-events: none;
	display: flex;
	justify-content: center
}

.content-item.active[data-v-f78ff979] {
	position: relative;
	opacity: 1;
	pointer-events: auto
}

.user-list-container[data-v-f78ff979] {
	width: 100%;
	max-width: 700px;
	padding: 0 16px calc(48px + constant(safe-area-inset-bottom)) 16px;
	padding: 0 16px calc(48px + env(safe-area-inset-bottom)) 16px;
	margin: 0 auto;
	background: var(--bg-color-primary)
}

.btn[data-v-f78ff979] {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background-color: var(--bg-color-primary);
	border: var(--border-color-primary) 1px solid;
	cursor: pointer
}

.btn-icon[data-v-f78ff979] {
	color: var(--text-color-secondary);
	transition: color .3s ease
}

.btn[data-v-f78ff979]:hover {
	background-color: var(--bg-color-secondary)
}

.btn:hover .btn-icon[data-v-f78ff979] {
	color: var(--text-color-primary)
}

@media (min-width: 901px) {
	.tab[data-v-f78ff979] {
		max-width: 700px;
		margin: 0 auto;
		padding-left: 0
	}

	.fixedTab[data-v-f78ff979] {
		padding-left: 220px
	}

	.user-list-container[data-v-f78ff979] {
		max-width: 650px;
		padding: 0
	}
}

.floating-btn-sets[data-v-269b696b] {
	position: fixed;
	bottom: 60px;
	right: 12px;
	z-index: 999;
	display: flex;
	flex-direction: column;
	gap: 8px
}

.btn-wrapper[data-v-269b696b] {
	position: relative;
	display: inline-block
}

.btn[data-v-269b696b] {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background-color: var(--bg-color-primary);
	border: var(--border-color-primary) 1px solid;
	cursor: pointer
}

.btn-icon[data-v-269b696b] {
	color: var(--text-color-secondary)
}

.btn[data-v-269b696b]:hover {
	background-color: var(--bg-color-secondary)
}

.btn:hover .btn-icon[data-v-269b696b] {
	color: var(--text-color-primary)
}

.tooltip[data-v-269b696b] {
	position: absolute;
	right: 50px;
	top: 50%;
	transform: translateY(-50%);
	background: var(--bg-color-primary);
	color: var(--text-color-primary);
	padding: 4px 8px;
	border-radius: 6px;
	font-size: 12px;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s ease, visibility .2s ease;
	box-shadow: 0 2px 8px #00000026;
	border: 1px solid var(--border-color-primary);
	z-index: 10;
	pointer-events: none
}

.btn-wrapper:hover .tooltip[data-v-269b696b] {
	opacity: 1;
	visibility: visible
}

.hidden[data-v-269b696b] {
	display: none
}

.unshow[data-v-269b696b] {
	pointer-events: none;
	visibility: hidden
}

.explore-page[data-v-c8a1be09] {
	position: relative;
	width: 100%;
	height: 100%
}

.post-detail-page[data-v-f83dc64e] {
	min-height: calc(100vh - 64px);
	margin: 10px;
	width: 100%;
	box-sizing: border-box;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 64px 20px 20px
}

@media (max-width: 960px) {
	.post-detail-page[data-v-f83dc64e] {
		margin: 0;
		padding: 64px 0 0;
		width: 100vw;
		max-width: 100vw
	}
}

@media (max-width: 768px) {
	.post-detail-page[data-v-f83dc64e] {
		margin: 0;
		padding: 0;
		overflow-y: visible;
		overflow-x: hidden;
		width: 100vw;
		height: 100vh;
		min-height: 100vh;
		max-width: 100vw;
		display: block;
		border-radius: 0;
		box-shadow: none;
		align-items: normal;
		justify-content: normal
	}
}

.back-home-btn[data-v-f83dc64e] {
	position: fixed;
	top: calc(16px + env(safe-area-inset-top));
	left: 16px;
	z-index: 1001;
	background: transparent;
	color: var(--text-color-secondary);
	width: 36px;
	height: 36px;
	border: none;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color .2s
}

.back-home-btn[data-v-f83dc64e]:hover {
	background: #9090904a
}

.loading-container[data-v-f83dc64e] {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 400px;
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%)
}

@media (max-width: 960px) {
	.loading-container[data-v-f83dc64e] {
		position: relative;
		top: auto;
		left: auto;
		transform: none;
		min-height: calc(100vh - 64px);
		width: 100%
	}
}

@media (max-width: 768px) {
	.loading-container[data-v-f83dc64e] {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		transform: none;
		min-height: 100vh;
		width: 100vw;
		height: 100vh;
		padding: 20px;
		box-sizing: border-box;
		background: var(--bg-color-primary);
		z-index: 1000
	}
}

.loading-spinner[data-v-f83dc64e] {
	width: 40px;
	height: 40px;
	border: 4px solid var(--border-color-primary);
	border-top: 4px solid var(--primary-color);
	border-radius: 50%;
	animation: spin-f83dc64e 1s linear infinite;
	margin-bottom: 16px
}

@media (max-width: 768px) {
	.loading-spinner[data-v-f83dc64e] {
		width: 48px;
		height: 48px;
		border-width: 5px;
		margin-bottom: 20px
	}
}

@keyframes spin-f83dc64e {
	0% {
		transform: rotate(0)
	}

	to {
		transform: rotate(360deg)
	}
}

.tag-container[data-v-e4b7c98c] {
	background: var(--bg-color-primary);
	width: 100%;
	border-bottom: none;
	transition: background .2s ease
}

.fixed-tag-container[data-v-e4b7c98c] {
	position: fixed;
	top: 72px;
	left: 50%;
	transform: translate(-50%);
	width: 100%;
	max-width: 1200px;
	padding: 0 10px;
	background: var(--bg-color-primary);
	z-index: 50;
	transition: background-color .2s ease
}

.hidden[data-v-e4b7c98c] {
	display: none
}

@media (min-width: 961px) {
	.fixed-tag-container[data-v-e4b7c98c] {
		left: calc(50% + 114px);
		width: calc(100% - 228px)
	}
}

.floating-btn-sets[data-v-8d00c816] {
	position: fixed;
	bottom: 60px;
	right: 12px;
	z-index: 999;
	display: flex;
	flex-direction: column;
	gap: 8px
}

.btn-wrapper[data-v-8d00c816] {
	position: relative;
	display: inline-block
}

.btn[data-v-8d00c816] {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background-color: var(--bg-color-primary);
	border: var(--border-color-primary) 1px solid;
	cursor: pointer
}

.btn-icon[data-v-8d00c816] {
	color: var(--text-color-secondary)
}

.btn[data-v-8d00c816]:hover {
	background-color: var(--bg-color-secondary)
}

.btn:hover .btn-icon[data-v-8d00c816] {
	color: var(--text-color-primary)
}

.tooltip[data-v-8d00c816] {
	position: absolute;
	right: 50px;
	top: 50%;
	transform: translateY(-50%);
	background: var(--bg-color-primary);
	color: var(--text-color-primary);
	padding: 4px 8px;
	border-radius: 6px;
	font-size: 12px;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s ease, visibility .2s ease;
	box-shadow: 0 2px 8px #00000026;
	border: 1px solid var(--border-color-primary);
	z-index: 10;
	pointer-events: none
}

.btn-wrapper:hover .tooltip[data-v-8d00c816] {
	opacity: 1;
	visibility: visible
}

.hidden[data-v-8d00c816] {
	display: none
}

.unshow[data-v-8d00c816] {
	pointer-events: none;
	visibility: hidden
}

.search-container[data-v-1bdbf6e1] {
	padding-top: 72px;
	min-height: 100vh;
	background: var(--bg-color-primary);
	transition: background .2s ease
}

.search-main[data-v-1bdbf6e1] {
	padding: 0px 10px calc(48px + constant(safe-area-inset-bottom)) 10px;
	padding: 0px 10px calc(48px + env(safe-area-inset-bottom)) 10px;
	width: 100%;
	box-sizing: border-box;
	overflow-x: hidden;
	background: var(--bg-color-primary);
	transition: margin-top .3s ease, background .2s ease
}

.search-main.with-loading[data-v-1bdbf6e1] {
	margin-top: 40px
}

@media (max-width: 768px) {
	.search-main[data-v-1bdbf6e1] {
		padding: 15px
	}
}

.post-item[data-v-965604be] {
	display: flex;
	flex-direction: column;
	gap: .75rem;
	padding: 1rem;
	background: var(--bg-color-primary);
	border-radius: 8px;
	border: 1px solid var(--border-color-primary);
	transition: all .2s ease
}

.post-upper[data-v-965604be] {
	display: flex;
	gap: 1rem;
	align-items: flex-start
}

.post-thumbnail[data-v-965604be] {
	width: 80px;
	height: 80px;
	border-radius: 6px;
	overflow: hidden;
	flex-shrink: 0
}

.post-text-content[data-v-965604be] {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: .5rem;
	min-width: 0;
	margin-right: 1rem;
	cursor: pointer
}

.post-actions[data-v-965604be] {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	align-items: flex-end;
	flex-shrink: 0;
	width: 80px
}

.post-lower[data-v-965604be] {
	display: flex;
	flex-direction: column;
	gap: .5rem
}

.post-item[data-v-965604be]:hover {
	border-color: var(--primary-color)
}

.post-thumbnail img[data-v-965604be] {
	width: 100%;
	height: 100%;
	object-fit: cover;
	cursor: pointer
}

.no-image[data-v-965604be] {
	width: 100%;
	height: 100%;
	background: var(--bg-color-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text-color-secondary)
}

.video-thumbnail[data-v-965604be] {
	width: 100%;
	height: 100%;
	background: var(--bg-color-secondary);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: var(--text-color-secondary);
	gap: .25rem
}

.video-thumbnail span[data-v-965604be] {
	font-size: .75rem
}

.post-title[data-v-965604be] {
	font-size: 1rem;
	font-weight: 600;
	margin: 0;
	color: var(--text-color-primary);
	line-height: 1.4
}

.post-content[data-v-965604be] {
	font-size: .9rem;
	color: var(--text-color-secondary);
	margin: 0;
	line-height: 1.5;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical
}

.post-meta[data-v-965604be] {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 1rem
}

.date-row[data-v-965604be] {
	margin-left: auto
}

.meta-row[data-v-965604be] {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: nowrap
}

.category[data-v-965604be] {
	background: var(--primary-color);
	color: #fff;
	padding: .2rem .5rem;
	border-radius: 4px;
	font-size: .75rem
}

.stats[data-v-965604be] {
	display: flex;
	align-items: center;
	gap: .25rem;
	font-size: 12px
}

.date[data-v-965604be] {
	font-size: .8rem
}

.status-tag[data-v-965604be] {
	display: inline-flex;
	align-items: center;
	padding: .2rem .5rem;
	border-radius: 4px;
	font-size: .75rem;
	font-weight: 500;
	margin-left: .5rem
}

.status-published[data-v-965604be] {
	background: #e6f7e6;
	color: #52c41a;
	border: 1px solid #b7eb8f
}

.status-draft[data-v-965604be] {
	background: #f5f5f5;
	color: #999;
	border: 1px solid #d9d9d9
}

.status-pending[data-v-965604be] {
	background: #fff7e6;
	color: #fa8c16;
	border: 1px solid #ffd591
}

.status-rejected[data-v-965604be] {
	background: #fff1f0;
	color: #ff4d4f;
	border: 1px solid #ffccc7
}

.status-unknown[data-v-965604be] {
	background: #f5f5f5;
	color: #666;
	border: 1px solid #d9d9d9
}

.action-btn[data-v-965604be] {
	display: flex;
	align-items: center;
	gap: .25rem;
	padding: .5rem .75rem;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-size: .8rem;
	transition: all .2s ease
}

.edit-btn[data-v-965604be] {
	background: var(--primary-color);
	color: #fff
}

.edit-btn[data-v-965604be]:hover {
	opacity: .8
}

.delete-btn[data-v-965604be] {
	background: var(--primary-color);
	color: #fff
}

.delete-btn[data-v-965604be]:hover {
	background: var(--primary-color-dark)
}

@media (max-width: 960px) {
	.post-item[data-v-965604be] {
		padding: .75rem
	}

	.post-upper[data-v-965604be] {
		gap: .75rem
	}

	.post-thumbnail[data-v-965604be] {
		width: 60px;
		height: 60px
	}

	.post-text-content[data-v-965604be] {
		margin-right: .5rem
	}

	.post-title[data-v-965604be] {
		font-size: .9rem;
		line-height: 1.3
	}

	.post-content[data-v-965604be] {
		font-size: .8rem;
		line-height: 1.4;
		margin-bottom: .75rem
	}

	.post-meta[data-v-965604be] {
		flex-direction: column;
		align-items: flex-start;
		gap: .5rem
	}

	.date-row[data-v-965604be] {
		margin-right: 0;
		order: 2
	}

	.meta-row[data-v-965604be] {
		order: 1;
		flex-wrap: wrap;
		gap: .5rem
	}
}

.modal-overlay[data-v-b213af43] {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--overlay-bg);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1000
}

.modal[data-v-b213af43] {
	background: var(--bg-color-primary);
	border-radius: 8px;
	width: 90%;
	max-width: 500px;
	max-height: 80vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition: background-color .2s ease
}

.modal-header[data-v-b213af43] {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px 30px;
	border-bottom: 1px solid var(--border-color-primary);
	flex-shrink: 0;
	background: var(--bg-color-primary);
	transition: background-color .2s ease, border-color .2s ease
}

.modal-header h4[data-v-b213af43] {
	margin: 0;
	color: var(--text-color-primary)
}

.close-btn[data-v-b213af43] {
	background: var(--bg-color-secondary);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	width: 30px;
	height: 30px;
	border: none;
	cursor: pointer;
	padding: 5px;
	color: var(--text-color-primary)
}

.close-btn[data-v-b213af43]:hover {
	color: var(--text-color-secondary);
	transform: scale(1.1);
	transition: all .2s ease
}

.close-btn svg[data-v-b213af43] {
	width: 16px;
	height: 16px
}

.modal-body[data-v-b213af43] {
	padding: 20px;
	flex: 1;
	overflow-y: auto;
	min-height: 0
}

.modal-footer[data-v-b213af43] {
	flex-shrink: 0;
	background: var(--bg-color-primary);
	border-top: 1px solid var(--border-color-primary);
	padding: 20px 30px;
	transition: background-color .2s ease, border-color .2s ease
}

.form-group[data-v-b213af43] {
	margin-bottom: 20px
}

.form-group[data-v-b213af43]:last-child {
	margin-bottom: 0
}

.form-group label[data-v-b213af43] {
	display: block;
	margin-bottom: 5px;
	font-weight: 500;
	color: var(--text-color-primary)
}

.form-group input[data-v-b213af43],
.form-group textarea[data-v-b213af43],
.form-group select[data-v-b213af43] {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--border-color-primary);
	border-radius: 4px;
	font-size: 14px;
	box-sizing: border-box;
	background-color: var(--bg-color-primary);
	color: var(--text-color-primary);
	caret-color: var(--primary-color);
	transition: background-color .2s ease, border-color .2s ease
}

.form-group input[data-v-b213af43]:focus {
	border-color: var(--primary-color);
	outline: none
}

.form-group textarea[data-v-b213af43] {
	resize: vertical
}

.checkbox-group[data-v-b213af43] {
	margin-top: 8px
}

.checkbox-label[data-v-b213af43] {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 400;
	cursor: pointer;
	padding: 6px 0;
	font-size: 14px
}

.checkbox-label input[type=checkbox][data-v-b213af43] {
	width: auto;
	margin: 0;
	padding: 0;
	transform: scale(1.1);
	accent-color: var(--primary-color)
}

.radio-group[data-v-b213af43] {
	margin-top: 8px;
	display: flex;
	flex-direction: column;
	gap: 8px
}

.radio-label[data-v-b213af43] {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 400;
	cursor: pointer;
	padding: 6px 0;
	font-size: 14px
}

.radio-label input[type=radio][data-v-b213af43] {
	width: auto;
	margin: 0;
	padding: 0;
	transform: scale(1.1);
	accent-color: var(--primary-color)
}

.form-actions[data-v-b213af43] {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin: 0
}

.btn[data-v-b213af43] {
	padding: 8px 16px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-size: 14px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: all .2s;
	text-decoration: none
}

.btn[data-v-b213af43]:disabled {
	opacity: .5;
	cursor: not-allowed
}

.btn-primary[data-v-b213af43] {
	background-color: var(--primary-color);
	color: #fff
}

.btn-primary[data-v-b213af43]:hover:not(:disabled) {
	background-color: var(--primary-color-dark)
}

.btn-outline[data-v-b213af43] {
	background-color: transparent;
	color: var(--text-color-secondary);
	border: 1px solid var(--border-color-primary)
}

.btn-outline[data-v-b213af43]:hover:not(:disabled) {
	background-color: var(--bg-color-secondary)
}

.interest-input-container[data-v-b213af43] {
	width: 100%
}

.interest-input-row[data-v-b213af43] {
	display: flex;
	gap: 8px;
	margin-bottom: 10px
}

.interest-input[data-v-b213af43] {
	flex: 1;
	padding: 8px 12px;
	border: 1px solid var(--border-color-primary);
	border-radius: 4px;
	font-size: 14px
}

.add-interest-btn[data-v-b213af43] {
	padding: 8px 16px;
	background-color: var(--primary-color);
	color: var(--button-text-color);
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-size: 14px;
	white-space: nowrap
}

.add-interest-btn[data-v-b213af43]:hover:not(:disabled) {
	background-color: var(--primary-color);
	opacity: .9
}

.add-interest-btn[data-v-b213af43]:disabled {
	background-color: var(--disabled-bg);
	cursor: not-allowed
}

.interest-tags[data-v-b213af43] {
	display: flex;
	flex-wrap: wrap;
	gap: 6px
}

.interest-tag[data-v-b213af43] {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 8px;
	background-color: var(--bg-color-secondary);
	border: 1px solid var(--border-color-primary);
	border-radius: 12px;
	font-size: 12px;
	color: var(--text-color-primary)
}

.remove-interest-btn[data-v-b213af43] {
	background: none;
	border: none;
	color: var(--text-color-secondary);
	cursor: pointer;
	font-size: 14px;
	line-height: 1;
	padding: 0;
	margin-left: 2px
}

.remove-interest-btn[data-v-b213af43]:hover {
	color: var(--primary-color)
}

.textarea-with-emoji-wrapper[data-v-b213af43] {
	position: relative;
	width: 100%
}

.textarea-with-emoji[data-v-b213af43] {
	width: 100%;
	padding: 8px 12px 40px;
	border: 1px solid var(--border-color-primary);
	border-radius: 4px;
	font-size: 14px;
	resize: vertical;
	min-height: 80px
}

.input-section[data-v-b213af43] {
	position: relative;
	width: 100%
}

.content-input-wrapper[data-v-b213af43] {
	position: relative;
	border: 1px solid var(--border-color-primary);
	border-radius: 8px;
	background: var(--bg-color-primary);
	transition: all .2s ease
}

.content-input-wrapper[data-v-b213af43]:focus-within {
	border-color: var(--primary-color)
}

.content-input-wrapper[data-v-b213af43] .content-textarea {
	width: 100%;
	padding: 1rem 1rem 3rem;
	border: none;
	border-radius: 8px;
	background: transparent;
	color: var(--text-color-primary);
	font-size: 16px;
	line-height: 1.5;
	transition: all .2s ease;
	min-height: 120px;
	box-sizing: border-box;
	caret-color: var(--primary-color)
}

.content-input-wrapper[data-v-b213af43] .content-textarea:focus {
	outline: none
}

.content-input-wrapper[data-v-b213af43] .mention-link {
	color: var(--text-color-tag);
	text-decoration: none;
	font-weight: 500;
	cursor: pointer;
	transition: color .2s ease;
	background: none;
	border: none;
	padding: 0;
	display: inline
}

.content-input-wrapper[data-v-b213af43] .mention-link:hover {
	color: var(--text-color-tag);
	opacity: .8
}

.content-input-wrapper[data-v-b213af43] .mention-link:active {
	color: var(--text-color-tag);
	opacity: .6
}

.content-actions[data-v-b213af43] {
	position: absolute;
	bottom: .5rem;
	left: 1rem;
	display: flex;
	align-items: center;
	gap: 8px
}

.emoji-btn[data-v-b213af43],
.mention-btn[data-v-b213af43] {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: none;
	background: transparent;
	color: var(--text-color-secondary, #999);
	border-radius: 50%;
	cursor: pointer;
	transition: all .2s ease
}

.emoji-btn[data-v-b213af43]:hover,
.mention-btn[data-v-b213af43]:hover {
	background: var(--bg-color-secondary);
	color: var(--text-color-primary)
}

.emoji-icon[data-v-b213af43],
.mention-icon[data-v-b213af43] {
	width: 20px;
	height: 20px
}

.input-section .char-count[data-v-b213af43] {
	position: absolute;
	bottom: .5rem;
	right: .75rem;
	font-size: .8rem;
	color: var(--text-color-secondary);
	background: var(--bg-color-primary);
	padding: .25rem;
	border-radius: 4px
}

.textarea-actions[data-v-b213af43] {
	position: absolute;
	bottom: 8px;
	right: 12px;
	display: flex;
	align-items: center;
	gap: 8px
}

.emoji-icon[data-v-b213af43],
.mention-icon[data-v-b213af43] {
	color: var(--text-color-secondary)
}

.char-count[data-v-b213af43] {
	font-size: 12px;
	color: var(--text-color-tertiary);
	white-space: nowrap
}

.emoji-panel-overlay[data-v-b213af43] {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10000;
	animation: fadeIn-b213af43 .2s ease
}

.emoji-panel[data-v-b213af43] {
	background: var(--bg-color-primary);
	border-radius: 12px;
	box-shadow: 0 8px 32px #0003;
	overflow: hidden;
	animation: scaleIn-b213af43 .2s ease;
	max-width: 90vw;
	max-height: 90vh
}

@keyframes fadeIn-b213af43 {
	0% {
		opacity: 0
	}

	to {
		opacity: 1
	}
}

@keyframes scaleIn-b213af43 {
	0% {
		opacity: 0;
		transform: scale(.8)
	}

	to {
		opacity: 1;
		transform: scale(1)
	}
}

.avatar-upload-field[data-v-b213af43] {
	width: 100%
}

.avatar-upload-area[data-v-b213af43] {
	border: 2px dashed var(--border-color-primary);
	border-radius: 8px;
	padding: 20px;
	text-align: center;
	cursor: pointer;
	transition: all .3s ease;
	position: relative;
	min-height: 120px;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1;
	max-width: 200px;
	margin: 0 auto
}

.avatar-upload-area[data-v-b213af43]:hover {
	border-color: var(--primary-color);
	background-color: var(--bg-color-secondary)
}

.avatar-upload-placeholder[data-v-b213af43] {
	color: var(--text-color-secondary)
}

.upload-hint[data-v-b213af43] {
	font-size: 12px;
	color: var(--text-color-tertiary);
	margin: 5px 0 0
}

.avatar-upload-loading[data-v-b213af43] {
	color: var(--primary-color)
}

.loading-icon[data-v-b213af43] {
	width: 24px;
	height: 24px;
	margin-bottom: 10px;
	animation: spin-b213af43 1s linear infinite
}

@keyframes spin-b213af43 {
	0% {
		transform: rotate(0)
	}

	to {
		transform: rotate(360deg)
	}
}

.avatar-image-preview[data-v-b213af43] {
	position: relative;
	width: 100%;
	height: 100%
}

.avatar-image-preview img[data-v-b213af43] {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 4px
}

.avatar-error-message[data-v-b213af43] {
	color: var(--primary-color);
	font-size: 12px;
	margin-top: 5px;
	text-align: center
}

.video-upload-field[data-v-b213af43] {
	width: 100%
}

[data-v-ff7e37af] {
	transition: background .2s ease, border-color .2s ease
}

.post-management-container[data-v-ff7e37af] {
	min-height: 100vh;
	background: var(--bg-color-primary);
	color: var(--text-color-primary);
	padding-bottom: calc(48px + constant(safe-area-inset-bottom));
	padding-bottom: calc(48px + env(safe-area-inset-bottom));
	margin: 72px auto;
	min-width: 700px;
	max-width: 700px
}

.page-header[data-v-ff7e37af] {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem;
	background: var(--bg-color-primary);
	border-bottom: 1px solid var(--border-color-primary);
	position: sticky;
	top: 0;
	z-index: 100
}

.header-left[data-v-ff7e37af] {
	display: flex;
	align-items: center;
	gap: .75rem
}

.header-right[data-v-ff7e37af] {
	display: flex;
	align-items: center
}

.back-btn[data-v-ff7e37af] {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: none;
	background: transparent;
	color: var(--text-color-primary);
	border-radius: 50%;
	cursor: pointer
}

.back-btn[data-v-ff7e37af]:hover {
	background: var(--bg-color-secondary)
}

.page-title[data-v-ff7e37af] {
	font-size: 1.2rem;
	font-weight: 600;
	margin: 0;
	color: var(--text-color-primary)
}

.post-count[data-v-ff7e37af] {
	font-size: .9rem;
	color: var(--text-color-secondary)
}

.filter-section[data-v-ff7e37af] {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem;
	background: var(--bg-color-primary);
	border-bottom: 1px solid var(--border-color-primary);
	gap: 1rem
}

.search-box[data-v-ff7e37af] {
	position: relative;
	flex: 1;
	max-width: 400px
}

.search-icon[data-v-ff7e37af] {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--text-color-secondary);
	pointer-events: none
}

.search-box input[data-v-ff7e37af] {
	width: 100%;
	padding: .75rem .75rem .75rem 2.5rem;
	border: 1px solid var(--border-color-primary);
	border-radius: 8px;
	background: var(--bg-color-primary);
	color: var(--text-color-primary);
	font-size: .9rem;
	transition: all .2s ease;
	box-sizing: border-box;
	caret-color: var(--primary-color)
}

.search-box input[data-v-ff7e37af]:focus {
	outline: none;
	border-color: var(--primary-color)
}

.search-box input[data-v-ff7e37af]::placeholder {
	color: var(--text-color-secondary)
}

.filter-options[data-v-ff7e37af] {
	display: flex;
	align-items: center;
	gap: 1rem
}

.posts-section[data-v-ff7e37af] {
	padding: 1rem
}

.loading-state[data-v-ff7e37af] {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 3rem;
	color: var(--text-color-secondary)
}

.loading-spinner[data-v-ff7e37af] {
	width: 40px;
	height: 40px;
	border: 3px solid var(--border-color-primary);
	border-top: 3px solid var(--primary-color);
	border-radius: 50%;
	animation: spin-ff7e37af 1s linear infinite;
	margin-bottom: 1rem
}

@keyframes spin-ff7e37af {
	0% {
		transform: rotate(0)
	}

	to {
		transform: rotate(360deg)
	}
}

.empty-state[data-v-ff7e37af] {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 3rem;
	color: var(--text-color-secondary)
}

.empty-icon[data-v-ff7e37af] {
	margin-bottom: 1rem;
	opacity: .5
}

.create-btn[data-v-ff7e37af] {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .75rem 1.5rem;
	background: var(--primary-color);
	color: #fff;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	font-size: .9rem;
	font-weight: 500;
	margin-top: 1rem;
	transition: all .2s ease
}

.create-btn[data-v-ff7e37af]:hover {
	background: var(--primary-color-dark)
}

.posts-list[data-v-ff7e37af] {
	display: flex;
	flex-direction: column;
	gap: 1rem
}

.pagination[data-v-ff7e37af] {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	padding: 2rem 1rem
}

.page-btn[data-v-ff7e37af] {
	padding: .5rem 1rem;
	border: 1px solid var(--border-color-primary);
	background: var(--bg-color-primary);
	color: var(--text-color-primary);
	border-radius: 4px;
	cursor: pointer;
	transition: all .2s ease
}

.page-btn[data-v-ff7e37af]:hover:not(:disabled) {
	background: var(--primary-color);
	color: #fff;
	border-color: var(--primary-color)
}

.page-btn[data-v-ff7e37af]:disabled {
	opacity: .5;
	cursor: not-allowed
}

.page-info[data-v-ff7e37af] {
	font-size: .9rem;
	color: var(--text-color-secondary)
}

@media (max-width: 960px) {
	.post-management-container[data-v-ff7e37af] {
		min-width: 100%;
		max-width: 100%;
		margin: 72px 0
	}

	.page-header[data-v-ff7e37af] {
		padding: .75rem 1rem
	}

	.filter-section[data-v-ff7e37af] {
		flex-direction: column;
		align-items: stretch;
		gap: .75rem;
		padding: .75rem 1rem
	}

	.search-box[data-v-ff7e37af] {
		max-width: none
	}

	.filter-options[data-v-ff7e37af] {
		justify-content: flex-start;
		gap: .75rem
	}

	.posts-section[data-v-ff7e37af] {
		padding: .75rem 1rem
	}
}

[data-v-bbd8ca34] {
	transition: background .2s ease, border-color .2s ease
}

.draft-box-container[data-v-bbd8ca34] {
	min-height: 100vh;
	background: var(--bg-color-primary);
	color: var(--text-color-primary);
	padding-bottom: calc(48px + constant(safe-area-inset-bottom));
	padding-bottom: calc(48px + env(safe-area-inset-bottom));
	margin: 72px auto;
	min-width: 700px;
	max-width: 700px
}

.page-header[data-v-bbd8ca34] {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem;
	background: var(--bg-color-primary);
	border-bottom: 1px solid var(--border-color-primary);
	position: sticky;
	top: 0;
	z-index: 100
}

.header-left[data-v-bbd8ca34] {
	display: flex;
	align-items: center;
	gap: .75rem
}

.header-right[data-v-bbd8ca34] {
	display: flex;
	align-items: center
}

.back-btn[data-v-bbd8ca34] {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: none;
	background: transparent;
	color: var(--text-color-primary);
	border-radius: 50%;
	cursor: pointer
}

.back-btn[data-v-bbd8ca34]:hover {
	background: var(--bg-color-secondary)
}

.page-title[data-v-bbd8ca34] {
	font-size: 1.2rem;
	font-weight: 600;
	margin: 0;
	color: var(--text-color-primary)
}

.post-count[data-v-bbd8ca34] {
	font-size: .9rem;
	color: var(--text-color-secondary)
}

.filter-section[data-v-bbd8ca34] {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem;
	background: var(--bg-color-primary);
	border-bottom: 1px solid var(--border-color-primary);
	gap: 1rem
}

.search-box[data-v-bbd8ca34] {
	position: relative;
	flex: 1;
	max-width: 400px
}

.search-icon[data-v-bbd8ca34] {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--text-color-secondary);
	pointer-events: none
}

.search-box input[data-v-bbd8ca34] {
	width: 100%;
	padding: .75rem .75rem .75rem 2.5rem;
	border: 1px solid var(--border-color-primary);
	border-radius: 8px;
	background: var(--bg-color-primary);
	color: var(--text-color-primary);
	font-size: .9rem;
	transition: all .2s ease;
	box-sizing: border-box;
	caret-color: var(--primary-color)
}

.search-box input[data-v-bbd8ca34]:focus {
	outline: none;
	border-color: var(--primary-color)
}

.search-box input[data-v-bbd8ca34]::placeholder {
	color: var(--text-color-secondary)
}

.filter-options[data-v-bbd8ca34] {
	display: flex;
	align-items: center;
	gap: 1rem
}

.drafts-section[data-v-bbd8ca34] {
	padding: 1rem
}

.loading-state[data-v-bbd8ca34] {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 3rem;
	color: var(--text-color-secondary)
}

.loading-spinner[data-v-bbd8ca34] {
	width: 40px;
	height: 40px;
	border: 3px solid var(--border-color-primary);
	border-top: 3px solid var(--primary-color);
	border-radius: 50%;
	animation: spin-bbd8ca34 1s linear infinite;
	margin-bottom: 1rem
}

@keyframes spin-bbd8ca34 {
	0% {
		transform: rotate(0)
	}

	to {
		transform: rotate(360deg)
	}
}

.empty-state[data-v-bbd8ca34] {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 3rem;
	color: var(--text-color-secondary)
}

.empty-icon[data-v-bbd8ca34] {
	margin-bottom: 1rem;
	opacity: .5
}

.create-btn[data-v-bbd8ca34] {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .75rem 1.5rem;
	background: var(--primary-color);
	color: #fff;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	font-size: .9rem;
	font-weight: 500;
	margin-top: 1rem;
	transition: all .2s ease
}

.create-btn[data-v-bbd8ca34]:hover {
	background: var(--primary-color-dark)
}

.posts-list[data-v-bbd8ca34] {
	display: flex;
	flex-direction: column;
	gap: 1rem
}

.pagination[data-v-bbd8ca34] {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	padding: 2rem 1rem
}

.page-btn[data-v-bbd8ca34] {
	padding: .5rem 1rem;
	border: 1px solid var(--border-color-primary);
	background: var(--bg-color-primary);
	color: var(--text-color-primary);
	border-radius: 4px;
	cursor: pointer;
	transition: all .2s ease
}

.page-btn[data-v-bbd8ca34]:hover:not(:disabled) {
	background: var(--primary-color);
	color: #fff;
	border-color: var(--primary-color)
}

.page-btn[data-v-bbd8ca34]:disabled {
	opacity: .5;
	cursor: not-allowed
}

.page-info[data-v-bbd8ca34] {
	font-size: .9rem;
	color: var(--text-color-secondary)
}

@media (max-width: 960px) {
	.draft-box-container[data-v-bbd8ca34] {
		min-width: 100%;
		max-width: 100%;
		margin: 72px 0
	}

	.page-header[data-v-bbd8ca34] {
		padding: .75rem 1rem
	}

	.filter-section[data-v-bbd8ca34] {
		flex-direction: column;
		align-items: stretch;
		gap: .75rem;
		padding: .75rem 1rem
	}

	.search-box[data-v-bbd8ca34] {
		max-width: none
	}

	.filter-options[data-v-bbd8ca34] {
		justify-content: flex-start;
		gap: .75rem
	}

	.posts-section[data-v-bbd8ca34] {
		padding: .75rem 1rem
	}
}

.not-found-page[data-v-6e3caa85] {
	min-height: calc(100vh - 64px);
	margin: 10px;
	width: 100%;
	box-sizing: border-box;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 64px 20px 20px
}

.error-container[data-v-6e3caa85] {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 400px;
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%)
}

.back-btn[data-v-6e3caa85] {
	background: var(--primary-color);
	color: #fff;
	border: none;
	padding: 8px 16px;
	border-radius: 6px;
	cursor: pointer;
	transition: opacity .2s
}

.back-btn[data-v-6e3caa85]:hover {
	opacity: .9
}

.error-content h2[data-v-6e3caa85] {
	color: var(--text-color-primary);
	margin-bottom: 8px
}

.error-content p[data-v-6e3caa85] {
	color: var(--text-color-secondary);
	margin-bottom: 16px
}

.error-icon[data-v-6e3caa85] {
	margin-bottom: 24px;
	display: flex;
	justify-content: center
}

.error-icon svg[data-v-6e3caa85] {
	filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .1))
}

.admin-login-page[data-v-9e4533e9] {
	min-height: 100vh;
	background: var(--bg-color-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px
}

.login-container[data-v-9e4533e9] {
	width: 100%;
	max-width: 400px
}

.login-card[data-v-9e4533e9] {
	background: var(--bg-color-primary);
	border-radius: 8px;
	padding: 40px;
	box-shadow: 0 4px 12px var(--shadow-color);
	border: 1px solid var(--border-color-primary)
}

.login-header[data-v-9e4533e9] {
	text-align: center;
	margin-bottom: 30px
}

.login-title[data-v-9e4533e9] {
	font-size: 24px;
	font-weight: 600;
	color: var(--text-color-primary);
	margin: 0
}

.message[data-v-9e4533e9] {
	padding: 12px 16px;
	border-radius: 6px;
	font-size: 14px;
	margin-bottom: 20px
}

.message.success[data-v-9e4533e9] {
	background: var(--bg-color-secondary);
	color: #38a169;
	border: 1px solid #9ae6b4
}

.message.error[data-v-9e4533e9] {
	background: var(--bg-color-secondary);
	color: #e53e3e;
	border: 1px solid #feb2b2
}

.login-form[data-v-9e4533e9] {
	display: flex;
	flex-direction: column;
	gap: 20px
}

.form-group[data-v-9e4533e9] {
	display: flex;
	flex-direction: column;
	gap: 6px
}

.form-label[data-v-9e4533e9] {
	font-size: 14px;
	font-weight: 500;
	color: var(--text-color-primary)
}

.input-wrapper[data-v-9e4533e9] {
	position: relative;
	display: flex;
	align-items: center
}

.form-input[data-v-9e4533e9] {
	width: 100%;
	padding: 12px;
	border: 1px solid var(--border-color-primary);
	border-radius: 6px;
	font-size: 14px;
	background: var(--bg-color-primary);
	transition: border-color .2s ease;
	box-sizing: border-box;
	color: var(--text-color-primary);
	caret-color: var(--primary-color)
}

.form-input[data-v-9e4533e9]:focus {
	outline: none;
	border-color: var(--primary-color)
}

.form-input.error[data-v-9e4533e9] {
	border-color: var(--primary-color)
}

.error-message[data-v-9e4533e9] {
	font-size: 12px;
	color: var(--primary-color)
}

.login-button[data-v-9e4533e9] {
	width: 100%;
	padding: 12px;
	background: var(--primary-color);
	color: #fff;
	border: none;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: background-color .2s ease
}

.login-button[data-v-9e4533e9]:hover:not(:disabled) {
	background: var(--primary-color-dark)
}

.login-button[data-v-9e4533e9]:disabled {
	opacity: .6;
	cursor: not-allowed
}

@media (max-width: 480px) {
	.admin-login-page[data-v-9e4533e9] {
		padding: 10px
	}

	.login-card[data-v-9e4533e9] {
		padding: 30px 20px
	}
}

.admin-layout[data-v-1fb6a583] {
	display: flex;
	height: 100vh;
	width: 100vw;
	background-color: var(--bg-color-secondary);
	overflow: hidden;
	transition: background-color .3s ease
}

.sidebar[data-v-1fb6a583] {
	width: 280px;
	background: var(--bg-color-primary);
	color: var(--text-color-primary);
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	border-right: 1px solid var(--border-color-primary);
	position: relative;
	z-index: 100
}

.sidebar.collapsed[data-v-1fb6a583] {
	width: 80px;
	transition: width .3s cubic-bezier(.4, 0, .2, 1), background-color .3s ease, border-color .3s ease
}

.sidebar.collapsed.expanded[data-v-1fb6a583] {
	width: 280px;
	z-index: 1000;
	transition: width .3s cubic-bezier(.4, 0, .2, 1), background-color .3s ease, border-color .3s ease
}

.sidebar-header[data-v-1fb6a583] {
	padding: 24px 20px;
	border-bottom: 1px solid var(--border-color-primary);
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--bg-color-primary);
	transition: background-color .3s ease, border-color .3s ease
}

.sidebar.collapsed .sidebar-header[data-v-1fb6a583] {
	padding: 24px 12px;
	justify-content: center
}

.sidebar.collapsed.expanded .sidebar-header[data-v-1fb6a583] {
	padding: 24px 20px;
	justify-content: center
}

.logo[data-v-1fb6a583] {
	display: flex;
	align-items: center;
	gap: 12px;
	white-space: nowrap
}

.logo-icon[data-v-1fb6a583] {
	width: 40px;
	height: 40px;
	background: var(--primary-color);
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center
}

.logo-icon img[data-v-1fb6a583] {
	width: 120%;
	height: 100%;
	object-fit: contain
}

.logo-text[data-v-1fb6a583] {
	font-size: 18px;
	font-weight: 600;
	color: var(--text-color-primary);
	opacity: 1;
	transition: opacity .3s cubic-bezier(.4, 0, .2, 1), width .3s cubic-bezier(.4, 0, .2, 1)
}

.sidebar.collapsed .logo-text[data-v-1fb6a583] {
	opacity: 0;
	width: 0;
	overflow: hidden
}

.sidebar.collapsed.expanded .logo-text[data-v-1fb6a583] {
	opacity: 1;
	width: auto
}

.sidebar-nav[data-v-1fb6a583] {
	flex: 1;
	padding: 20px 12px;
	overflow-y: auto;
	overflow-x: hidden;
	background-color: var(--bg-color-primary);
	transition: background-color .3s ease
}

.sidebar.collapsed.expanded .sidebar-footer[data-v-1fb6a583] {
	border-top: 1px solid var(--border-color-primary);
	transition: border .3s ease, background-color .3s ease
}

.sidebar-footer[data-v-1fb6a583] {
	display: flex;
	flex-direction: column;
	gap: 16px;
	background-color: var(--bg-color-primary);
	border-top: 1px solid var(--border-color-primary)
}

.theme-switcher-content[data-v-1fb6a583] {
	padding: 24px 8px 8px;
	display: flex;
	justify-content: center;
	align-items: center
}

.admin-theme-toggle[data-v-1fb6a583] {
	display: inline-block;
	flex-shrink: 0
}

.theme-toggle-track[data-v-1fb6a583] {
	position: relative;
	display: flex;
	background: var(--bg-color-secondary);
	border-radius: 16px;
	padding: 2px;
	border: 1px solid var(--border-color-primary);
	transition: background-color .3s ease, border-color .3s ease
}

.theme-option-wrapper[data-v-1fb6a583] {
	position: relative;
	display: inline-block
}

.theme-toggle-indicator[data-v-1fb6a583] {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 26px;
	height: 26px;
	background: var(--bg-color-primary);
	border-radius: 50%;
	transition: transform .3s cubic-bezier(.4, 0, .2, 1), background-color .3s ease;
	box-shadow: 0 1px 3px #0000001a;
	z-index: 1
}

.theme-toggle-option[data-v-1fb6a583] {
	position: relative;
	width: 28px;
	height: 28px;
	border: none;
	background: transparent;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all .3s ease;
	z-index: 2;
	color: var(--text-color-tertiary)
}

.theme-toggle-option[data-v-1fb6a583]:hover {
	color: var(--text-color-secondary)
}

.theme-toggle-option.active[data-v-1fb6a583] {
	color: var(--text-color-primary)
}

.tooltip[data-v-1fb6a583] {
	position: absolute;
	bottom: 35px;
	left: 50%;
	transform: translate(-50%);
	background: var(--bg-color-primary);
	color: var(--text-color-primary);
	padding: 4px 8px;
	border-radius: 6px;
	font-size: 12px;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s ease, visibility .3s ease, background-color .3s ease, border-color .3s ease;
	box-shadow: 0 2px 8px #00000026;
	border: 1px solid var(--border-color-primary);
	z-index: 10;
	pointer-events: none
}

.theme-option-wrapper:hover .tooltip[data-v-1fb6a583] {
	opacity: 1;
	visibility: visible
}

.theme-toggle-option[data-v-1fb6a583] svg {
	display: block;
	margin: auto
}

[data-theme=dark] .theme-toggle-indicator[data-v-1fb6a583] {
	box-shadow: 0 1px 3px #0000004d
}

.admin-info[data-v-1fb6a583] {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 12px;
	border-radius: 8px;
	background-color: var(--bg-color-secondary)
}

.sidebar.collapsed .admin-info[data-v-1fb6a583] {
	justify-content: center;
	padding: 8px
}

.sidebar.collapsed.expanded .admin-info[data-v-1fb6a583] {
	justify-content: flex-start;
	padding: 8px 12px
}

.admin-avatar[data-v-1fb6a583] {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	overflow: hidden;
	flex-shrink: 0
}

.admin-avatar img[data-v-1fb6a583] {
	width: 100%;
	height: 100%;
	object-fit: cover
}

.avatar-placeholder[data-v-1fb6a583] {
	width: 100%;
	height: 100%;
	background-color: var(--primary-color);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	font-size: 14px
}

.admin-details[data-v-1fb6a583] {
	flex: 1;
	min-width: 0;
	opacity: 1;
	transition: opacity .3s cubic-bezier(.4, 0, .2, 1), width .3s cubic-bezier(.4, 0, .2, 1)
}

.sidebar.collapsed .admin-details[data-v-1fb6a583] {
	opacity: 0;
	width: 0;
	overflow: hidden
}

.sidebar.collapsed.expanded .admin-details[data-v-1fb6a583] {
	opacity: 1;
	width: auto
}

.admin-name[data-v-1fb6a583] {
	font-size: 14px;
	font-weight: 600;
	color: var(--text-color-primary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis
}

.admin-role[data-v-1fb6a583] {
	font-size: 12px;
	color: var(--text-color-secondary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis
}

.logout-btn[data-v-1fb6a583] {
	display: flex;
	align-items: center;
	background: var(--bg-color-primary);
	border-top: 1px solid var(--border-color-primary);
	color: var(--text-color-secondary);
	cursor: pointer;
	font-size: 14px;
	transition: background .3s ease, border-color .3s ease
}

.sidebar.collapsed .logout-btn[data-v-1fb6a583] {
	justify-content: center;
	padding: 8px 8px 16px
}

.sidebar.collapsed.expanded .logout-btn[data-v-1fb6a583] {
	justify-content: flex-start;
	padding-left: 28px;
	width: calc(100% + -0px);
	box-sizing: border-box
}

.logout-btn[data-v-1fb6a583]:hover {
	background-color: var(--bg-color-secondary)
}

.logout-btn svg[data-v-1fb6a583] {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	color: var(--text-color-tertiary)
}

.logout-text[data-v-1fb6a583] {
	opacity: 1;
	margin-left: 10px;
	text-wrap: nowrap
}

.sidebar.collapsed .logout-text[data-v-1fb6a583] {
	opacity: 0;
	overflow: hidden;
	display: none
}

.sidebar.collapsed.expanded .logout-text[data-v-1fb6a583] {
	opacity: 1;
	width: auto;
	display: flex
}

.nav-item[data-v-1fb6a583] {
	display: flex;
	align-items: center;
	padding: 12px 16px;
	color: var(--text-color-primary);
	text-decoration: none;
	border-radius: 999px;
	margin: 4px 0;
	font-weight: 500;
	white-space: nowrap;
	position: relative;
	transition: all .3s ease
}

.sidebar.collapsed .nav-item[data-v-1fb6a583] {
	justify-content: center;
	padding: 12px
}

.sidebar.collapsed.expanded .nav-item[data-v-1fb6a583] {
	justify-content: flex-start;
	padding: 12px 16px
}

.nav-item[data-v-1fb6a583]:hover {
	background-color: var(--bg-color-secondary)
}

.nav-item.active[data-v-1fb6a583] {
	background-color: var(--bg-color-secondary);
	color: var(--text-color-primary);
	font-weight: 600
}

.nav-icon[data-v-1fb6a583] {
	width: 20px;
	height: 20px;
	margin-right: 12px;
	flex-shrink: 0;
	color: var(--text-color-tertiary);
	transition: margin-right .3s cubic-bezier(.4, 0, .2, 1)
}

.sidebar.collapsed .nav-icon[data-v-1fb6a583] {
	margin-right: 0
}

.sidebar.collapsed.expanded .nav-icon[data-v-1fb6a583] {
	margin-right: 12px
}

.nav-item.active .nav-icon[data-v-1fb6a583] {
	color: var(--primary-color)
}

.nav-text[data-v-1fb6a583] {
	opacity: 1;
	transition: opacity .3s cubic-bezier(.4, 0, .2, 1), width .3s cubic-bezier(.4, 0, .2, 1)
}

.sidebar.collapsed .nav-text[data-v-1fb6a583] {
	opacity: 0;
	width: 0;
	overflow: hidden
}

.sidebar.collapsed.expanded .nav-text[data-v-1fb6a583] {
	opacity: 1;
	width: auto
}

.main-content[data-v-1fb6a583] {
	flex: 1;
	display: flex;
	flex-direction: column;
	height: 100vh;
	overflow: hidden;
	transition: margin-left .3s cubic-bezier(.4, 0, .2, 1)
}

.content-header[data-v-1fb6a583] {
	background-color: var(--bg-color-primary);
	padding: 24px 32px;
	border-bottom: 1px solid var(--border-color-primary);
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-shrink: 0;
	transition: background-color .3s ease, border-color .3s ease
}

.header-left h1[data-v-1fb6a583] {
	margin: 0 0 4px;
	font-size: 24px;
	color: var(--text-color-primary);
	font-weight: 600
}

.page-description[data-v-1fb6a583] {
	margin: 0;
	font-size: 14px;
	color: var(--text-color-secondary)
}

.header-right[data-v-1fb6a583] {
	display: flex;
	align-items: center
}

.back-btn[data-v-1fb6a583] {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	background-color: var(--primary-color);
	color: #fff;
	border: none;
	border-radius: 999px;
	font-size: 14px;
	cursor: pointer;
	transition: all .3s ease;
	text-decoration: none;
	font-weight: 500
}

.back-btn[data-v-1fb6a583]:hover {
	opacity: .9
}

.back-btn svg[data-v-1fb6a583] {
	width: 16px;
	height: 16px
}

.content-body[data-v-1fb6a583] {
	flex: 1;
	padding: 0;
	overflow-y: auto;
	background-color: var(--bg-color-secondary);
	flex-direction: column;
	transition: background-color .3s ease
}

.sidebar-nav[data-v-1fb6a583]::-webkit-scrollbar,
.content-body[data-v-1fb6a583]::-webkit-scrollbar {
	width: 6px
}

.sidebar-nav[data-v-1fb6a583]::-webkit-scrollbar-track {
	background: var(--bg-color-secondary)
}

.sidebar-nav[data-v-1fb6a583]::-webkit-scrollbar-thumb {
	background: var(--border-color-primary);
	border-radius: 3px
}

.content-body[data-v-1fb6a583]::-webkit-scrollbar-track {
	background: var(--bg-color-tertiary)
}

.content-body[data-v-1fb6a583]::-webkit-scrollbar-thumb {
	background: var(--border-color-primary);
	border-radius: 3px
}

.content-body[data-v-1fb6a583]::-webkit-scrollbar-thumb:hover {
	background: var(--text-color-quaternary)
}

.loading-overlay[data-v-1fb6a583] {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--overlay-bg);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	z-index: 9999
}

.loading-spinner[data-v-1fb6a583] {
	width: 40px;
	height: 40px;
	border: 4px solid var(--border-color-primary);
	border-top: 4px solid var(--primary-color);
	border-radius: 50%;
	animation: spin-1fb6a583 1s linear infinite;
	margin-bottom: 16px
}

@keyframes spin-1fb6a583 {
	0% {
		transform: rotate(0)
	}

	to {
		transform: rotate(360deg)
	}
}

.loading-overlay p[data-v-1fb6a583] {
	color: var(--text-color-secondary);
	font-size: 14px;
	margin: 0
}

.header-brand[data-v-1fb6a583] {
	display: none;
	align-items: center;
	gap: 8px
}

.desktop-only[data-v-1fb6a583] {
	display: block
}

.mobile-only[data-v-1fb6a583] {
	display: none
}

@media (max-width: 960px) {
	.sidebar[data-v-1fb6a583] {
		display: none
	}

	.header-brand[data-v-1fb6a583] {
		display: flex
	}

	.desktop-only[data-v-1fb6a583] {
		display: none
	}

	.mobile-only[data-v-1fb6a583] {
		display: inline-flex
	}

	.back-btn .back-text[data-v-1fb6a583] {
		display: none
	}

	.header-right .back-btn[data-v-1fb6a583],
	.header-right .filter-btn[data-v-1fb6a583],
	.header-right .mobile-theme-toggle-btn[data-v-1fb6a583],
	.header-right .mobile-menu-btn[data-v-1fb6a583] {
		width: 36px;
		height: 36px;
		padding: 0;
		margin-left: 8px;
		border: none;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		color: var(--button-text-color);
		background: var(--primary-color);
		border-radius: 50%;
		cursor: pointer;
		transition: all .3s ease
	}

	.header-right .back-btn[data-v-1fb6a583]:hover,
	.header-right .filter-btn[data-v-1fb6a583]:hover,
	.header-right .mobile-theme-toggle-btn[data-v-1fb6a583]:hover,
	.header-right .mobile-menu-btn[data-v-1fb6a583]:hover {
		opacity: .9;
		transform: scale(1.05)
	}

	.header-right .back-btn svg[data-v-1fb6a583],
	.header-right .filter-btn svg[data-v-1fb6a583],
	.header-right .mobile-theme-toggle-btn svg[data-v-1fb6a583],
	.header-right .mobile-menu-btn svg[data-v-1fb6a583] {
		width: 20px;
		height: 20px
	}
}

.content-header[data-v-1fb6a583] {
	position: relative
}

.content-header .mobile-menu[data-v-1fb6a583] {
	position: absolute;
	top: 56px;
	right: 32px
}

.mobile-header[data-v-1fb6a583] {
	display: none;
	position: sticky;
	top: 0;
	z-index: 200;
	height: 56px;
	padding: 0 12px;
	background: var(--bg-color-primary);
	border-bottom: 1px solid var(--border-color-primary);
	align-items: center;
	justify-content: space-between
}

.mobile-header-left[data-v-1fb6a583] {
	display: flex;
	align-items: center;
	gap: 8px
}

.mobile-logo[data-v-1fb6a583] {
	width: 28px;
	height: 28px
}

.mobile-title[data-v-1fb6a583] {
	font-size: 16px;
	font-weight: 600;
	color: var(--text-color-primary)
}

.mobile-header-right[data-v-1fb6a583] {
	position: relative;
	display: flex;
	align-items: center
}

.mobile-menu-btn[data-v-1fb6a583] {
	border: none;
	background: transparent;
	padding: 6px;
	border-radius: 6px;
	cursor: pointer;
	color: var(--text-color-primary);
	transition: background-color .3s ease
}

.mobile-menu-icon[data-v-1fb6a583] {
	width: 18px;
	height: 18px;
	margin-right: 10px;
	color: var(--text-color-tertiary)
}

.mobile-menu-text[data-v-1fb6a583] {
	font-size: 14px
}

.mobile-admin-menu[data-v-1fb6a583] {
	max-height: 70vh;
	overflow-y: auto;
	min-width: 220px
}

.mobile-menu-content[data-v-1fb6a583] {
	max-height: 70vh;
	overflow-y: auto
}

.mobile-menu-content[data-v-1fb6a583]::-webkit-scrollbar {
	width: 4px
}

.mobile-menu-content[data-v-1fb6a583]::-webkit-scrollbar-track {
	background: var(--bg-color-secondary)
}

.mobile-menu-content[data-v-1fb6a583]::-webkit-scrollbar-thumb {
	background: var(--border-color-primary);
	border-radius: 2px
}

.mobile-menu-content[data-v-1fb6a583]::-webkit-scrollbar-thumb:hover {
	background: var(--text-color-quaternary)
}

.mobile-menu-divider[data-v-1fb6a583] {
	height: 1px;
	background: var(--border-color-primary);
	margin: 8px 16px
}

.filters[data-v-1fb6a583] {
	position: relative
}

.filter-menu[data-v-1fb6a583] {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--overlay-bg);
	z-index: 1000;
	display: flex;
	align-items: flex-end;
	height: 100vh;
	height: 100dvh
}

.filter-menu-content[data-v-1fb6a583] {
	background: var(--bg-color-primary);
	border-radius: 12px 12px 0 0;
	width: 100%;
	max-height: 70vh;
	max-height: 70dvh;
	overflow-y: auto;
	animation: slideUp-1fb6a583 .3s ease-out;
	min-height: 200px;
	transition: background-color .3s ease
}

.filter-menu-content[data-v-1fb6a583]::-webkit-scrollbar {
	width: 4px
}

.filter-menu-content[data-v-1fb6a583]::-webkit-scrollbar-track {
	background: var(--bg-color-secondary)
}

.filter-menu-content[data-v-1fb6a583]::-webkit-scrollbar-thumb {
	background: var(--border-color-primary);
	border-radius: 2px
}

.filter-menu-content[data-v-1fb6a583]::-webkit-scrollbar-thumb:hover {
	background: var(--text-color-quaternary)
}

@keyframes slideUp-1fb6a583 {
	0% {
		transform: translateY(100%)
	}

	to {
		transform: translateY(0)
	}
}

.filter-menu-header[data-v-1fb6a583] {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px 20px;
	border-bottom: 1px solid var(--border-color-primary);
	transition: border-color .3s ease
}

.filter-menu-header h3[data-v-1fb6a583] {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	color: var(--text-color-primary)
}

.close-btn[data-v-1fb6a583] {
	background: none;
	border: none;
	padding: 4px;
	cursor: pointer;
	color: var(--text-color-secondary);
	border-radius: 4px;
	transition: all .3s ease
}

.close-btn[data-v-1fb6a583]:hover {
	background: var(--bg-color-secondary);
	color: var(--text-color-primary)
}

.filter-btn.active[data-v-1fb6a583] {
	background: var(--primary-color) !important;
	color: #fff !important
}

.filters-desktop[data-v-1fb6a583] {
	margin-right: 8px;
	display: inline-flex;
	align-items: center;
	gap: 8px
}

[data-v-85202c8b] {
	transition: background-color .3s ease, border-color .3s ease
}

.api-docs[data-v-85202c8b] {
	margin: 0 auto
}

.docs-header[data-v-85202c8b] {
	background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color-shadow) 100%);
	color: #fff;
	padding: 30px;
	margin-bottom: 30px
}

.docs-header h2[data-v-85202c8b] {
	margin: 0 0 15px;
	font-size: 28px
}

.docs-info[data-v-85202c8b] {
	display: flex;
	gap: 30px;
	font-size: 14px;
	opacity: .9;
	flex-wrap: wrap
}

.sticky-search[data-v-85202c8b] {
	position: fixed;
	top: 101px;
	left: 0;
	right: 0;
	z-index: 10;
	padding: 15px 20px;
	transition: all .3s ease
}

.sticky-search.hidden[data-v-85202c8b] {
	display: none
}

.search-box[data-v-85202c8b] {
	position: relative;
	max-width: 400px;
	margin: 0 auto
}

.search-input[data-v-85202c8b] {
	width: 100%;
	padding: 10px 45px;
	border: 1px solid var(--border-color-primary);
	border-radius: 25px;
	font-size: 14px;
	outline: none;
	transition: all .3s ease;
	box-sizing: border-box;
	caret-color: var(--primary-color);
	background-color: var(--bg-color-secondary)
}

.search-input[data-v-85202c8b]:focus {
	border-color: var(--primary-color);
	box-shadow: 0 0 5px var(--primary-color-shadow)
}

.search-icon[data-v-85202c8b] {
	position: absolute;
	left: 15px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--text-color-tertiary);
	font-size: 16px;
	pointer-events: none;
	width: 20px;
	height: 20px
}

.clear-btn[data-v-85202c8b] {
	position: absolute;
	right: 15px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--text-color-tertiary);
	cursor: pointer;
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: all .2s ease
}

.clear-btn svg[data-v-85202c8b] {
	width: 16px;
	height: 16px
}

.clear-btn[data-v-85202c8b]:hover {
	background-color: var(--bg-color-tertiary);
	color: var(--text-color-primary)
}

.no-results[data-v-85202c8b] {
	text-align: center;
	color: var(--text-color-tertiary);
	padding: 40px 20px;
	font-size: 14px
}

.no-results p[data-v-85202c8b] {
	margin: 8px 0;
	line-height: 1.5
}

.no-results p[data-v-85202c8b]:first-child {
	font-weight: 500;
	color: var(--text-color-secondary)
}

.search-stats[data-v-85202c8b] {
	text-align: center;
	color: #28a745;
	margin-top: 15px;
	font-size: 14px;
	font-weight: 500
}

mark[data-v-85202c8b] {
	background-color: #fff3cd;
	color: #856404;
	padding: 1px 2px;
	border-radius: 2px
}

.docs-content[data-v-85202c8b] {
	background: var(--bg-color-primary);
	border-radius: 8px;
	overflow: hidden
}

.docs-section[data-v-85202c8b] {
	border-bottom: 1px solid var(--border-color-primary)
}

.docs-section[data-v-85202c8b]:last-child {
	border-bottom: none
}

.docs-section h3[data-v-85202c8b] {
	background-color: var(--bg-color-secondary);
	margin: 0;
	padding: 20px 30px;
	font-size: 20px;
	color: var(--text-color-primary);
	border-bottom: 1px solid var(--border-color-primary)
}

.section-content[data-v-85202c8b] {
	padding: 30px
}

.section-content h4[data-v-85202c8b] {
	color: var(--text-color-primary);
	margin: 20px 0 15px;
	font-size: 16px
}

.section-content ul[data-v-85202c8b] {
	margin: 10px 0;
	padding-left: 20px
}

.section-content li[data-v-85202c8b] {
	margin-bottom: 5px
}

.code-block[data-v-85202c8b] {
	background-color: var(--bg-color-secondary);
	border: 1px solid var(--border-color-primary);
	border-radius: 4px;
	padding: 15px;
	font-family: Courier New, monospace;
	font-size: 14px;
	overflow-x: auto;
	margin: 10px 0;
	white-space: pre-wrap
}

.status-table[data-v-85202c8b] {
	width: 100%;
	border-collapse: collapse;
	margin: 15px 0
}

.status-table th[data-v-85202c8b],
.status-table td[data-v-85202c8b] {
	border: 1px solid var(--border-color-primary);
	padding: 12px;
	text-align: left
}

.status-table th[data-v-85202c8b] {
	background-color: var(--bg-color-secondary);
	font-weight: 600
}

.api-groups[data-v-85202c8b] {
	padding: 0
}

.api-group[data-v-85202c8b] {
	margin-bottom: 0
}

.api-group h4[data-v-85202c8b] {
	background-color: var(--bg-color-secondary);
	margin: 0;
	padding: 15px 30px;
	font-size: 18px;
	color: var(--text-color-primary);
	border-bottom: 1px solid var(--border-color-primary)
}

.group-description[data-v-85202c8b] {
	background: #f0f8ff;
	padding: 12px 30px;
	border-left: 4px solid #007bff;
	margin: 0;
	font-size: 14px;
	color: #495057;
	border-bottom: 1px solid var(--border-color-primary)
}

.group-description p[data-v-85202c8b] {
	margin: 0;
	line-height: 1.5
}

.api-list[data-v-85202c8b] {
	padding: 0
}

.api-item[data-v-85202c8b] {
	border-bottom: 1px solid var(--border-color-primary)
}

.api-item[data-v-85202c8b]:last-child {
	border-bottom: none
}

.api-header[data-v-85202c8b] {
	display: flex;
	align-items: center;
	padding: 15px 30px;
	cursor: pointer;
	transition: background-color .2s
}

.api-header[data-v-85202c8b]:hover {
	background-color: var(--bg-color-secondary)
}

.method[data-v-85202c8b] {
	padding: 4px 8px;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 700;
	color: #fff;
	min-width: 60px;
	text-align: center;
	margin-right: 15px
}

.method.get[data-v-85202c8b] {
	background-color: #28a745
}

.method.post[data-v-85202c8b] {
	background-color: #007bff
}

.method.put[data-v-85202c8b] {
	background-color: #ffc107;
	color: #212529
}

.method.delete[data-v-85202c8b] {
	background-color: var(--primary-color)
}

.path[data-v-85202c8b] {
	font-family: Courier New, monospace;
	font-size: 14px;
	color: var(--text-color-primary);
	margin-right: 15px;
	min-width: 250px
}

.title[data-v-85202c8b] {
	flex: 1;
	color: var(--text-color-primary);
	font-weight: 500
}

.api-details[data-v-85202c8b] {
	padding: 20px 30px;
	background-color: var(--bg-color-secondary);
	border-top: 1px solid var(--border-color-primary)
}

.description[data-v-85202c8b],
.auth-required[data-v-85202c8b] {
	margin-bottom: 15px;
	color: #495057
}

.auth-required[data-v-85202c8b] {
	color: var(--primary-color)
}

.params[data-v-85202c8b] {
	margin-bottom: 20px
}

.params-table[data-v-85202c8b] {
	width: 100%;
	border-collapse: collapse;
	margin: 10px 0;
	font-size: 14px
}

.params-table th[data-v-85202c8b],
.params-table td[data-v-85202c8b] {
	border: 1px solid var(--text-color-tertiary);
	padding: 8px 12px;
	text-align: left
}

.params-table th[data-v-85202c8b] {
	background-color: var(--bg-color-secondary);
	font-weight: 600
}

.example[data-v-85202c8b] {
	margin-top: 20px
}

.example .code-block[data-v-85202c8b] {
	background-color: var(--bg-color-primary);
	border: 1px solid var(--border-color-primary)
}

@media (max-width: 768px) {
	.docs-header[data-v-85202c8b] {
		padding: 20px 15px
	}

	.docs-header h2[data-v-85202c8b] {
		font-size: 22px;
		margin-bottom: 10px
	}

	.docs-info[data-v-85202c8b] {
		flex-direction: column;
		gap: 8px;
		font-size: 13px
	}

	.section-content[data-v-85202c8b] {
		padding: 20px 15px
	}

	.docs-section h3[data-v-85202c8b] {
		padding: 15px;
		font-size: 18px
	}

	.api-group h4[data-v-85202c8b] {
		padding: 12px 15px;
		font-size: 16px
	}

	.api-header[data-v-85202c8b] {
		padding: 12px 15px;
		flex-wrap: wrap;
		gap: 8px
	}

	.path[data-v-85202c8b] {
		min-width: auto;
		font-size: 12px;
		word-break: break-all;
		flex: 1;
		margin-right: 8px
	}

	.title[data-v-85202c8b] {
		font-size: 14px;
		width: 100%;
		margin-top: 4px
	}

	.method[data-v-85202c8b] {
		font-size: 10px;
		padding: 3px 6px;
		min-width: 50px;
		margin-right: 8px
	}

	.api-details[data-v-85202c8b] {
		padding: 15px
	}

	.params-table[data-v-85202c8b],
	.status-table[data-v-85202c8b] {
		font-size: 12px;
		display: block;
		overflow-x: auto;
		white-space: nowrap
	}

	.params-table th[data-v-85202c8b],
	.params-table td[data-v-85202c8b],
	.status-table th[data-v-85202c8b],
	.status-table td[data-v-85202c8b] {
		padding: 6px 8px
	}

	.code-block[data-v-85202c8b] {
		font-size: 12px;
		padding: 10px;
		overflow-x: auto
	}

	.sticky-search[data-v-85202c8b] {
		padding: 10px 15px
	}

	.search-input[data-v-85202c8b] {
		font-size: 14px;
		padding: 8px 40px
	}

	.search-icon[data-v-85202c8b],
	.clear-btn[data-v-85202c8b] {
		width: 18px;
		height: 18px
	}

	.clear-btn svg[data-v-85202c8b] {
		width: 14px;
		height: 14px
	}
}

@media (max-width: 480px) {
	.docs-header[data-v-85202c8b] {
		padding: 15px 10px
	}

	.docs-header h2[data-v-85202c8b] {
		font-size: 20px
	}

	.section-content[data-v-85202c8b] {
		padding: 15px 10px
	}

	.docs-section h3[data-v-85202c8b] {
		padding: 12px 10px;
		font-size: 16px
	}

	.api-group h4[data-v-85202c8b] {
		padding: 10px;
		font-size: 15px
	}

	.api-header[data-v-85202c8b],
	.api-details[data-v-85202c8b] {
		padding: 10px
	}

	.sticky-search[data-v-85202c8b] {
		padding: 8px 10px
	}
}

.admin-monitor[data-v-93e3ad64] {
	padding: 12px;
	background-color: var(--bg-color-primary);
	min-height: 100%
}

.monitor-content[data-v-93e3ad64] {
	max-width: 1200px;
	margin: 0 auto
}

.activities-section[data-v-93e3ad64] {
	background-color: var(--bg-color-primary);
	border-radius: 12px;
	border: 1px solid var(--border-color-primary);
	overflow: hidden
}

.error-state[data-v-93e3ad64],
.empty-state[data-v-93e3ad64] {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 64px 32px;
	color: var(--text-color-secondary)
}

.retry-btn[data-v-93e3ad64] {
	margin-top: 16px;
	padding: 8px 16px;
	background-color: var(--primary-color);
	color: #fff;
	border: none;
	border-radius: 6px;
	cursor: pointer
}

.activities-list[data-v-93e3ad64] {
	padding: 0
}

.activity-item[data-v-93e3ad64] {
	display: flex;
	align-items: center;
	padding: 20px 32px;
	border-bottom: 1px solid var(--border-color-primary);
	cursor: pointer;
	transition: background-color .2s ease
}

.activity-item[data-v-93e3ad64]:hover {
	background-color: var(--bg-color-secondary)
}

.activity-item[data-v-93e3ad64]:last-child {
	border-bottom: none
}

.activity-icon[data-v-93e3ad64] {
	width: 40px;
	height: 40px;
	margin-right: 12px;
	flex-shrink: 0
}

.activity-avatar[data-v-93e3ad64] {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
	border: 1px solid var(--border-color-primary)
}

.activity-content[data-v-93e3ad64] {
	flex: 1;
	min-width: 0
}

.activity-title[data-v-93e3ad64] {
	font-size: 16px;
	font-weight: 500;
	color: var(--text-color-primary);
	margin-bottom: 4px;
	line-height: 1.4
}

.activity-meta[data-v-93e3ad64] {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 14px;
	color: var(--text-color-secondary)
}

.activity-type[data-v-93e3ad64] {
	padding: 2px 8px;
	background-color: var(--bg-color-secondary);
	border-radius: 4px;
	font-size: 12px
}

.activity-time[data-v-93e3ad64] {
	font-size: 14px;
	color: var(--text-color-tertiary);
	white-space: nowrap;
	margin-left: 16px
}

.modal-overlay[data-v-2b06a0dc] {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--overlay-bg);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1000
}

.modal[data-v-2b06a0dc] {
	background: var(--bg-color-primary);
	border-radius: 8px;
	width: 90%;
	max-width: 600px;
	max-height: 80vh;
	overflow-y: auto;
	transition: background-color .3s ease
}

.detail-modal[data-v-2b06a0dc] {
	max-width: 500px
}

.modal-header[data-v-2b06a0dc] {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px 10px 0 30px
}

.modal-header h4[data-v-2b06a0dc] {
	margin: 0;
	color: var(--text-color-primary)
}

.close-btn[data-v-2b06a0dc] {
	background: none;
	border: none;
	cursor: pointer;
	padding: 5px;
	color: var(--text-color-secondary);
	transition: color .2s
}

.close-btn[data-v-2b06a0dc]:hover {
	color: var(--text-color-primary)
}

.close-btn svg[data-v-2b06a0dc] {
	width: 16px;
	height: 16px
}

.modal-body[data-v-2b06a0dc] {
	padding: 20px
}

.detail-content[data-v-2b06a0dc] {
	padding: 20px;
	line-height: 1.6;
	color: var(--text-color-primary);
	word-wrap: break-word;
	font-size: 14px;
	background: var(--bg-color-secondary);
	border-radius: 4px;
	max-height: 400px;
	overflow-y: auto
}

.detail-content[data-v-2b06a0dc] table {
	width: 100%;
	border-collapse: collapse;
	margin: 10px 0
}

.detail-content[data-v-2b06a0dc] td {
	padding: 8px 12px;
	border: 1px solid var(--border-color-primary);
	vertical-align: top
}

.detail-content[data-v-2b06a0dc] td:first-child {
	font-weight: 700;
	background-color: var(--bg-color-primary);
	width: 30%
}

.detail-content[data-v-2b06a0dc] td:last-child {
	background-color: var(--bg-color-secondary)
}

.video-modal-overlay[data-v-30530b81] {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #000c;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	padding: 20px
}

.video-modal[data-v-30530b81] {
	background: var(--bg-color-primary);
	border-radius: 12px;
	max-width: 90vw;
	max-height: 90vh;
	width: 800px;
	display: flex;
	flex-direction: column;
	box-shadow: 0 20px 40px #0000004d
}

.video-modal-header[data-v-30530b81] {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px 24px 16px;
	border-bottom: 1px solid var(--border-color-primary)
}

.video-modal-header h3[data-v-30530b81] {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	color: var(--text-color-primary)
}

.close-btn[data-v-30530b81] {
	background: var(--bg-color-secondary);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	width: 30px;
	height: 30px;
	border: none;
	cursor: pointer;
	padding: 5px;
	color: var(--text-color-primary)
}

.close-btn[data-v-30530b81]:hover {
	color: var(--text-color-secondary);
	transform: scale(1.1);
	transition: all .2s ease
}

.close-btn svg[data-v-30530b81] {
	width: 16px;
	height: 16px
}

.video-modal-body[data-v-30530b81] {
	padding: 24px;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 300px
}

.modal-video-player[data-v-30530b81] {
	width: 100%;
	max-width: 100%;
	max-height: 60vh;
	border-radius: 8px;
	background: #000
}

.video-placeholder[data-v-30530b81] {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: var(--text-color-secondary);
	gap: 12px
}

.video-placeholder p[data-v-30530b81] {
	margin: 0;
	font-size: 16px
}

@media (max-width: 768px) {
	.video-modal[data-v-30530b81] {
		width: 95vw;
		max-height: 85vh
	}

	.video-modal-header[data-v-30530b81] {
		padding: 16px 20px 12px
	}

	.video-modal-header h3[data-v-30530b81] {
		font-size: 16px
	}

	.video-modal-body[data-v-30530b81] {
		padding: 20px;
		min-height: 250px
	}

	.modal-video-player[data-v-30530b81] {
		max-height: 50vh
	}
}

.modal-overlay[data-v-1d026ecd] {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--overlay-bg);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1000
}

.modal[data-v-1d026ecd] {
	background: var(--bg-color-primary);
	border-radius: 8px;
	width: 90%;
	max-width: 500px;
	max-height: 80vh;
	overflow: hidden
}

.modal-header[data-v-1d026ecd] {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px 10px 0 30px
}

.modal-header h4[data-v-1d026ecd] {
	margin: 0;
	color: var(--text-color-primary)
}

.close-btn[data-v-1d026ecd] {
	background: none;
	border: none;
	cursor: pointer;
	padding: 5px;
	color: var(--text-color-secondary);
	transition: color .2s
}

.close-btn[data-v-1d026ecd]:hover {
	color: var(--text-color-primary)
}

.close-btn svg[data-v-1d026ecd] {
	width: 16px;
	height: 16px
}

.modal-body[data-v-1d026ecd] {
	padding: 20px;
	max-height: 400px;
	overflow-y: auto
}

.tags-container[data-v-1d026ecd] {
	display: flex;
	flex-wrap: wrap;
	gap: 12px
}

.tag-item[data-v-1d026ecd] {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 5px 14px;
	color: var(--text-color-primary);
	border-radius: 8px;
	border: 1px solid var(--border-color-secondary);
	transition: transform .2s
}

.tag-item[data-v-1d026ecd]:hover {
	transform: translateY(-2px);
	border: 1px solid var(--primary-color)
}

.tag-name[data-v-1d026ecd] {
	font-size: 14px;
	font-weight: 500;
	margin-bottom: 4px
}

.tag-id[data-v-1d026ecd] {
	font-size: 12px;
	opacity: .8
}

.no-tags[data-v-1d026ecd] {
	text-align: center;
	padding: 40px 20px;
	color: var(--text-color-tertiary)
}

.no-tags svg[data-v-1d026ecd] {
	width: 48px;
	height: 48px;
	margin-bottom: 16px;
	opacity: .5
}

.no-tags p[data-v-1d026ecd] {
	margin: 0;
	font-size: 16px
}

.modal-overlay[data-v-04e07fe4] {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--overlay-bg);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1000
}

.modal[data-v-04e07fe4] {
	background: var(--bg-color-primary);
	border-radius: 4px;
	width: 90%;
	max-width: 400px;
	max-height: 70vh;
	overflow: hidden;
	box-shadow: 0 2px 10px var(--shadow-color)
}

.modal-header[data-v-04e07fe4] {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px 10px 0 30px
}

.modal-header h4[data-v-04e07fe4] {
	margin: 0;
	color: var(--text-color-primary)
}

.close-btn[data-v-04e07fe4] {
	background: none;
	border: none;
	cursor: pointer;
	padding: 5px;
	color: var(--text-color-secondary);
	transition: color .2s
}

.close-btn[data-v-04e07fe4]:hover {
	color: var(--text-color-primary)
}

.close-btn svg[data-v-04e07fe4] {
	width: 16px;
	height: 16px
}

.modal-body[data-v-04e07fe4] {
	padding: 16px;
	max-height: calc(70vh - 80px);
	overflow-y: auto
}

.tags-grid[data-v-04e07fe4] {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px
}

.tag-item[data-v-04e07fe4] {
	padding: 8px;
	border: 1px solid var(--border-color-primary);
	border-radius: 3px;
	background: transparent
}

.tag-label[data-v-04e07fe4] {
	font-size: 11px;
	color: var(--text-color-secondary);
	margin-bottom: 2px;
	display: block
}

.tag-value[data-v-04e07fe4] {
	font-size: 13px;
	color: var(--text-color-primary);
	word-break: break-word
}

.interests-container[data-v-04e07fe4] {
	display: flex;
	flex-wrap: wrap;
	gap: 3px;
	margin-top: 2px
}

.interest-tag[data-v-04e07fe4] {
	background: transparent;
	color: var(--text-color-primary);
	padding: 1px 6px;
	border: 1px solid var(--border-color-secondary);
	margin: 2px;
	border-radius: 12px;
	font-size: 11px
}

@media (max-width: 768px) {
	.modal[data-v-04e07fe4] {
		width: 95%;
		margin: 10px
	}

	.tags-grid[data-v-04e07fe4] {
		grid-template-columns: 1fr
	}
}

.crud-table[data-v-0937c5c8] {
	background: var(--bg-color-primary);
	border-radius: 0;
	margin: 0;
	height: 100%;
	display: flex;
	flex-direction: column;
	min-height: 0;
	transition: background-color .3s ease
}

.table-header[data-v-0937c5c8] {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding: 15px 30px;
	border-bottom: 1px solid var(--border-color-primary);
	background-color: var(--bg-color-secondary);
	gap: 20px;
	transition: background-color .3s ease, border-color .3s ease
}

.header-left[data-v-0937c5c8] {
	display: flex;
	flex-direction: column;
	gap: 0;
	flex: 1
}

.table-actions[data-v-0937c5c8] {
	display: flex;
	gap: 10px;
	flex-shrink: 0
}

.search-bar[data-v-0937c5c8] {
	display: flex;
	align-items: flex-end;
	gap: 15px;
	flex-wrap: wrap
}

.search-actions[data-v-0937c5c8] {
	display: flex;
	gap: 8px;
	align-items: flex-end
}

.search-actions .btn[data-v-0937c5c8] {
	height: 32px;
	padding: 0 12px;
	font-size: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 60px
}

.search-inputs[data-v-0937c5c8] {
	display: flex;
	gap: 15px;
	flex-wrap: wrap
}

.search-field[data-v-0937c5c8] {
	display: flex;
	flex-direction: column;
	gap: 4px
}

.search-field input[data-v-0937c5c8] {
	padding: 6px 10px;
	border: 1px solid var(--border-color-secondary);
	background-color: var(--bg-color-secondary);
	border-radius: 999px;
	font-size: 12px;
	min-width: 120px;
	height: 32px;
	color: var(--text-color-primary);
	box-sizing: border-box;
	transition: background-color .3s ease, border-color .3s ease
}

.search-field input[data-v-0937c5c8]:focus {
	outline: none;
	border-color: var(--primary-color)
}

.custom-select[data-v-0937c5c8] {
	position: relative;
	display: inline-block;
	min-width: 120px;
	height: 34px;
	cursor: pointer;
	justify-content: center
}

.select-value[data-v-0937c5c8] {
	display: flex;
	align-items: center;
	padding: 6px 30px 6px 10px;
	border: 1px solid var(--border-color-secondary);
	background-color: var(--bg-color-secondary);
	border-radius: 999px;
	font-size: 12px;
	color: var(--text-color-primary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	height: 32px;
	box-sizing: border-box;
	transition: background-color .3s ease, border-color .3s ease
}

.custom-select:hover .select-value[data-v-0937c5c8] {
	border-color: var(--primary-color)
}

.select-arrow[data-v-0937c5c8] {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	width: 12px;
	height: 12px;
	color: var(--text-color-secondary);
	transition: transform .2s;
	pointer-events: none
}

.select-arrow.rotated[data-v-0937c5c8] {
	transform: translateY(-50%) rotate(180deg)
}

.select-options[data-v-0937c5c8] {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: var(--bg-color-primary);
	border: 1px solid var(--border-color-secondary);
	border-radius: 6px;
	box-shadow: 0 4px 6px -1px #0000001a;
	z-index: 1000;
	max-height: 200px;
	overflow-y: auto;
	margin-top: 2px;
	transition: background-color .3s ease, border-color .3s ease
}

.select-option[data-v-0937c5c8] {
	padding: 8px 12px;
	font-size: 12px;
	color: var(--text-color-primary);
	cursor: pointer;
	transition: background-color .2s
}

.select-option[data-v-0937c5c8]:hover {
	background-color: var(--bg-color-secondary)
}

.select-option.selected[data-v-0937c5c8] {
	background-color: var(--bg-color-secondary);
	color: var(--text-color-primary);
	font-weight: 500
}

.table-container[data-v-0937c5c8] {
	flex: 1;
	overflow: auto;
	min-height: 0
}

.data-table[data-v-0937c5c8] {
	width: 100%;
	border-collapse: collapse;
	table-layout: auto
}

.data-table th[data-v-0937c5c8],
.data-table td[data-v-0937c5c8] {
	padding: 12px 15px;
	text-align: left;
	border-bottom: 1px solid var(--border-color-primary);
	word-wrap: break-word;
	word-break: break-all;
	vertical-align: top;
	white-space: normal;
	transition: border-bottom .3s ease
}

.data-table th[data-v-0937c5c8] {
	background-color: var(--bg-color-secondary);
	font-weight: 600;
	color: var(--text-color-primary);
	width: auto;
	border-bottom: 1px solid transparent;
	transition: background-color .3s ease
}

.data-table tr[data-v-0937c5c8] {
	transition: background-color .3s ease
}

.data-table tr[data-v-0937c5c8]:hover {
	background-color: var(--bg-color-secondary)
}

.checkbox-column[data-v-0937c5c8] {
	width: 50px !important;
	text-align: center;
	padding: 12px 8px !important
}

.data-table th[data-v-0937c5c8]:last-child,
.data-table td[data-v-0937c5c8]:last-child {
	width: 50px;
	text-align: center;
	white-space: nowrap
}

.checkbox-column input[type=checkbox][data-v-0937c5c8] {
	cursor: pointer;
	transform: scale(1.2)
}

.checkbox-column input[type=checkbox][data-v-0937c5c8]:checked {
	accent-color: var(--primary-color)
}

.table-image[data-v-0937c5c8] {
	width: 40px;
	height: 40px;
	object-fit: cover;
	border-radius: 4px;
	cursor: pointer;
	transition: all .3s ease
}

.table-image[data-v-0937c5c8]:hover {
	transform: scale(1.1)
}

.pagination[data-v-0937c5c8] {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 8px 30px;
	border-top: 1px solid var(--border-color-primary);
	background-color: var(--bg-color-secondary);
	transition: background-color .3s ease, border-color .3s ease
}

.pagination-info[data-v-0937c5c8] {
	color: var(--text-color-secondary);
	font-size: 14px;
	-webkit-user-select: none;
	user-select: none
}

.pagination-controls[data-v-0937c5c8] {
	display: flex;
	align-items: center;
	gap: 10px
}

.page-numbers[data-v-0937c5c8] {
	display: flex;
	gap: 5px
}

.pagination-controls button[data-v-0937c5c8],
.page-numbers button[data-v-0937c5c8] {
	-webkit-user-select: none;
	user-select: none;
	transition: all .3s ease
}

.pagination-controls button[data-v-0937c5c8]:hover:not(:disabled),
.page-numbers button[data-v-0937c5c8]:hover:not(:disabled) {
	background-color: var(--primary-color);
	color: var(--text-color-inverse)
}

.page-numbers button.btn-primary[data-v-0937c5c8]:hover:not(:disabled) {
	background-color: var(--primary-color);
	opacity: .9
}

.loading-overlay[data-v-0937c5c8] {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--overlay-bg);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 100;
	transition: background-color .3s ease
}

.loading-spinner[data-v-0937c5c8] {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	color: var(--text-color-secondary)
}

.loading-spinner svg[data-v-0937c5c8] {
	width: 32px;
	height: 32px;
	animation: spin-0937c5c8 1s linear infinite
}

@keyframes spin-0937c5c8 {
	0% {
		transform: rotate(0)
	}

	to {
		transform: rotate(360deg)
	}
}

.btn[data-v-0937c5c8] {
	padding: 8px 16px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-size: 14px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: all .2s;
	text-decoration: none
}

.btn[data-v-0937c5c8]:disabled {
	opacity: .5;
	cursor: not-allowed
}

.btn-primary[data-v-0937c5c8] {
	background-color: var(--primary-color);
	color: #fff
}

.btn-primary[data-v-0937c5c8]:hover:not(:disabled) {
	background-color: var(--primary-color-dark)
}

.btn-secondary[data-v-0937c5c8] {
	background-color: var(--text-color-tertiary);
	color: #fff
}

.btn-secondary[data-v-0937c5c8]:hover:not(:disabled) {
	background-color: var(--text-color-secondary)
}

.btn-outline[data-v-0937c5c8] {
	background-color: transparent;
	color: var(--text-color-secondary);
	border: 1px solid var(--border-color-primary);
	transition: border-color .3s ease
}

.btn-outline[data-v-0937c5c8]:hover:not(:disabled) {
	background-color: var(--bg-color-secondary)
}

.btn-danger[data-v-0937c5c8] {
	background-color: var(--danger-color);
	color: #fff
}

.btn-danger[data-v-0937c5c8]:hover:not(:disabled) {
	background-color: var(--danger-color-dark)
}

.btn-sm[data-v-0937c5c8] {
	padding: 6px 12px;
	font-size: 12px
}

.btn svg[data-v-0937c5c8] {
	width: 14px;
	height: 14px
}

.action-icon[data-v-0937c5c8] {
	width: 24px;
	height: 24px;
	color: var(--text-color-secondary);
	cursor: pointer;
	margin-right: 8px
}

.action-icon[data-v-0937c5c8]:last-child {
	margin-right: 0
}

.action-icon[data-v-0937c5c8]:hover:not(:disabled) {
	background-color: var(--bg-color-secondary);
	color: var(--primary-color)
}

.truncated-content[data-v-0937c5c8],
.content-link[data-v-0937c5c8],
.user-link[data-v-0937c5c8],
.post-link[data-v-0937c5c8],
.comment-link[data-v-0937c5c8],
[data-v-0937c5c8] .truncated-content,
[data-v-0937c5c8] .content-link,
[data-v-0937c5c8] .user-link,
[data-v-0937c5c8] .post-link,
[data-v-0937c5c8] .comment-link {
	color: var(--text-color-secondary);
	cursor: pointer;
	text-decoration: underline;
	transition: color .2s;
	display: inline-block;
	max-width: 80px;
	word-wrap: break-word;
	word-break: break-all;
	line-height: 1.4
}

.truncated-content[data-v-0937c5c8]:hover,
.content-link[data-v-0937c5c8]:hover,
.user-link[data-v-0937c5c8]:hover,
[data-v-0937c5c8] .truncated-content:hover,
[data-v-0937c5c8] .content-link:hover,
[data-v-0937c5c8] .user-link:hover {
	color: var(--primary-color)
}

.th-content[data-v-0937c5c8] {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap
}

.sort-buttons[data-v-0937c5c8] {
	display: flex;
	flex-direction: column;
	gap: 1px;
	flex-shrink: 0
}

.sort-btn[data-v-0937c5c8] {
	background: none;
	border: none;
	cursor: pointer;
	padding: 2px 4px;
	color: var(--text-color-secondary);
	transition: color .2s;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	line-height: 1;
	border-radius: 2px;
	width: 16px;
	height: 12px
}

.sort-btn[data-v-0937c5c8]:hover {
	background-color: var(--bg-color-tertiary)
}

.sort-btn.active[data-v-0937c5c8] {
	color: var(--primary-color);
	background-color: var(--primary-color-shadow);
	opacity: .8;
	transition: background-color .3s ease
}

.mobile-search-bar[data-v-0937c5c8] {
	padding: 20px;
	background: var(--bg-color-primary);
	border-radius: 8px;
	margin: 0
}

.mobile-search-inputs[data-v-0937c5c8] {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-bottom: 20px
}

.mobile-search-field[data-v-0937c5c8] {
	display: flex;
	flex-direction: column;
	gap: 5px
}

.field-label[data-v-0937c5c8] {
	display: block;
	margin-bottom: 5px;
	font-weight: 500;
	color: var(--text-color-primary);
	font-size: 14px
}

.mobile-input[data-v-0937c5c8] {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--border-color-primary);
	border-radius: 4px;
	font-size: 14px;
	box-sizing: border-box;
	background-color: var(--bg-color-primary);
	color: var(--text-color-primary);
	caret-color: var(--primary-color);
	transition: border-color .2s
}

.mobile-input[data-v-0937c5c8]:focus {
	border-color: var(--primary-color);
	outline: none
}

.mobile-search-actions[data-v-0937c5c8] {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0
}

.btn-block[data-v-0937c5c8] {
	width: 100%;
	justify-content: center;
	padding: 8px 16px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-size: 14px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: all .2s;
	text-decoration: none
}

.btn-block[data-v-0937c5c8]:disabled {
	opacity: .5;
	cursor: not-allowed
}

.btn-block.btn-primary[data-v-0937c5c8] {
	background-color: var(--primary-color);
	color: #fff
}

.btn-block.btn-primary[data-v-0937c5c8]:hover:not(:disabled) {
	background-color: var(--primary-color-dark)
}

.btn-block.btn-outline[data-v-0937c5c8] {
	background-color: transparent;
	color: var(--text-color-secondary);
	border: 1px solid var(--border-color-primary)
}

.btn-block.btn-outline[data-v-0937c5c8]:hover:not(:disabled) {
	background-color: var(--bg-color-secondary);
	border-color: var(--primary-color);
	color: var(--primary-color)
}

.mobile-search-field .custom-select[data-v-0937c5c8] {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--border-color-primary);
	border-radius: 4px;
	background-color: var(--bg-color-primary);
	cursor: pointer;
	transition: border-color .2s;
	box-sizing: border-box;
	position: relative
}

.mobile-search-field .custom-select[data-v-0937c5c8]:hover {
	border-color: var(--primary-color)
}

.mobile-search-field .custom-select[data-v-0937c5c8]:focus {
	border-color: var(--primary-color);
	outline: none
}

.mobile-search-field .select-options[data-v-0937c5c8] {
	position: absolute;
	top: calc(100% + 2px);
	left: 0;
	right: 0;
	max-height: 200px;
	overflow-y: auto;
	border: 1px solid var(--border-color-primary);
	border-radius: 4px;
	background: var(--bg-color-primary);
	box-shadow: 0 2px 8px #0000001a;
	z-index: 1000
}

.mobile-search-field .select-option[data-v-0937c5c8] {
	padding: 10px 12px;
	cursor: pointer;
	transition: background-color .2s;
	color: var(--text-color-primary);
	font-size: 14px
}

.mobile-search-field .select-option[data-v-0937c5c8]:hover {
	background-color: var(--bg-color-secondary)
}

.mobile-search-field .select-option.selected[data-v-0937c5c8] {
	background-color: var(--primary-color);
	color: #fff
}

.mobile-search-field .select-value[data-v-0937c5c8] {
	color: var(--text-color-primary);
	font-size: 14px
}

.mobile-search-field .select-arrow[data-v-0937c5c8] {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	transition: transform .2s;
	color: var(--text-color-secondary);
	width: 12px;
	height: 12px
}

.mobile-search-field .select-arrow.rotated[data-v-0937c5c8] {
	transform: translateY(-50%) rotate(180deg)
}

@media (max-width: 960px) {
	.desktop-only[data-v-0937c5c8] {
		display: none
	}

	.table-header[data-v-0937c5c8] {
		justify-content: center
	}

	.header-left[data-v-0937c5c8] {
		display: none
	}

	.table-actions[data-v-0937c5c8] {
		justify-content: center;
		flex-wrap: wrap
	}
}

[data-v-02b0432d] .status-pending {
	color: #f39c12
}

[data-v-02b0432d] .status-unpassed {
	color: #e74c3c
}

.category-management[data-v-b218278d] {
	padding: 0
}

[data-v-cba8689f] .status-pending {
	color: #f39c12
}

[data-v-cba8689f] .status-approved {
	color: #4caf50
}

[data-v-cba8689f] .status-rejected {
	color: #e74c3c
}

.audit-detailcard-readonly[data-v-689405c7] .footer-actions {
	display: none
}

.audit-detailcard-readonly[data-v-689405c7] .author-avatar,
.audit-detailcard-readonly[data-v-689405c7] .author-name,
.audit-detailcard-readonly[data-v-689405c7] .user-hover-card-trigger,
.audit-detailcard-readonly[data-v-689405c7] .comment-avatar,
.audit-detailcard-readonly[data-v-689405c7] .comment-username,
.audit-detailcard-readonly[data-v-689405c7] .reply-username,
.audit-detailcard-readonly[data-v-689405c7] button,
.audit-detailcard-readonly[data-v-689405c7] input,
.audit-detailcard-readonly[data-v-689405c7] textarea,
.audit-detailcard-readonly[data-v-689405c7] .follow-btn,
.audit-detailcard-readonly[data-v-689405c7] .follow-button,
.audit-detailcard-readonly[data-v-689405c7] .like-button,
.audit-detailcard-readonly[data-v-689405c7] .collect-button,
.audit-detailcard-readonly[data-v-689405c7] .comment-reply,
.audit-detailcard-readonly[data-v-689405c7] .reply-reply,
.audit-detailcard-readonly[data-v-689405c7] .comment-delete-btn,
.audit-detailcard-readonly[data-v-689405c7] .toggle-replies-btn,
.audit-detailcard-readonly[data-v-689405c7] .sort-menu,
.audit-detailcard-readonly[data-v-689405c7] .sort-option,
.audit-detailcard-readonly[data-v-689405c7] .comment-replay-icon,
.audit-detailcard-readonly[data-v-689405c7] .reply-replay-icon {
	pointer-events: none
}

.audit-detailcard-readonly[data-v-689405c7] .close-btn {
	pointer-events: auto
}

.audit-detailcard-readonly[data-v-689405c7] .nav-btn,
.audit-detailcard-readonly[data-v-689405c7] .mobile-nav-btn,
.audit-detailcard-readonly[data-v-689405c7] .slider-image,
.audit-detailcard-readonly[data-v-689405c7] .mobile-slider-image,
.audit-detailcard-readonly[data-v-689405c7] .image-zoomable,
.audit-detailcard-readonly[data-v-689405c7] video {
	pointer-events: auto
}

:root {
	--primary-color: #ff2442;
	--primary-color-dark: #b31f35;
	--primary-color-shadow: rgba(254, 40, 67, .3);
	--text-color-primary: #333;
	--text-color-secondary: #5c5c5c;
	--text-color-tertiary: #858585;
	--text-color-quaternary: #bbbbbb;
	--text-color-inverse: #fff;
	--text-color-tag: #13386c;
	--bg-color-primary: #fff;
	--bg-color-secondary: #f7f7f7;
	--bg-color-tertiary: #e8e4e4;
	--bg-color-inverse: #474747;
	--border-color-primary: #ebebeb;
	--border-color-secondary: #eee;
	--disabled-bg: #ccc;
	--disabled-text: #ffffff;
	--shadow-color: rgba(0, 0, 0, .08);
	--font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
	--overlay-bg: rgba(18, 18, 18, .5);
	--button-text-color: #fff;
	--danger-color: #ff0c30;
	--danger-color-dark: rgb(201, 9, 37)
}

[data-theme=dark] {
	--primary-color: #ff2442;
	--primary-color-dark: #b31f35;
	--primary-color-shadow: rgba(254, 40, 67, .3);
	--text-color-primary: #e0e0e0;
	--text-color-secondary: #b0b0b0;
	--text-color-tertiary: #909090;
	--text-color-quaternary: #707070;
	--text-color-inverse: #0a0a0a;
	--text-color-tag: #c7daef;
	--bg-color-primary: #121212;
	--bg-color-secondary: #1e1e1e;
	--bg-color-tertiary: #2a2a2a;
	--bg-color-inverse: #e7e7e7;
	--border-color-primary: #242424;
	--border-color-secondary: #252525;
	--disabled-bg: #ccc;
	--disabled-text: #ffffff;
	--shadow-color: rgba(0, 0, 0, .3);
	--overlay-bg: rgba(27, 27, 27, .6);
	--button-text-color: #fff;
	--danger-color: #ff0c30;
	--danger-color-dark: rgb(201, 9, 37)
}

* {
	-webkit-tap-highlight-color: transparent
}

html,
body {
	margin: 0;
	padding: 0;
	font-family: var(--font-family);
	background-color: var(--bg-color-primary);
	color: var(--text-color-primary);
	overflow-x: hidden;
	width: 100vw;
	min-width: 100%;
	min-height: 100vh;
	max-width: 100vw
}

html ::-webkit-scrollbar,
body ::-webkit-scrollbar {
	display: none
}

button,
input,
textarea,
select {
	font-family: inherit
}

#app {
	display: flex;
	justify-content: center;
	width: 100vw;
	min-width: 100%;
	max-width: 100vw;
	overflow-x: hidden;
	background-color: var(--bg-color-primary);
	box-sizing: border-box
}

@keyframes skeleton-shimmer {
	0% {
		background-position: -200px 0
	}

	to {
		background-position: calc(200px + 100%) 0
	}
}

@keyframes skeleton-loading {
	0% {
		opacity: 1
	}

	50% {
		opacity: .4
	}

	to {
		opacity: 1
	}
}