/* ==========================================
   CSS Reset & Base Styles
   ========================================== */
* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
}
a:focus {
		outline: none !important;
}
:root {
		/* 覆蓋 Bootstrap 變數 */
		--bs-body-font-family: 'Noto Sans TC', 'Noto Sans SC', 'Noto Sans JP', '微軟正黑體', 'Microsoft JhengHei', 'Microsoft YaHei', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
		--bs-body-font-size: 0.875rem;
		--bs-body-line-height: 1.6;
		--bs-body-color: #212529;
		--bs-body-bg: #F8F9FA;
		--bs-border-color: #6c757d;
		/* 自訂顏色 */
		--primary-color: #000000;
		--primary-hover: #1a1a1a;
		--secondary-color: #6c757d;
		--success-color: #86C68C;
		--info-color: #7EC8E3;
		--warning-color: #FFC107;
		--danger-color: #DC3545;
		/* Neutral Colors */
		--bg-primary: #FFFFFF;
		--bg-secondary: #F8F9FA;
		--bg-tertiary: #E9ECEF;
		--text-primary: #212529;
		--text-secondary: #6C757D;
		--border-color: #DEE2E6;
		/* Sidebar */
		--sidebar-width: 240px;
		--sidebar-bg: #F8F9FA;
		--sidebar-active: #E9ECEF;
		/* Spacing */
		--spacing-xs: 0.25rem;
		--spacing-sm: 0.5rem;
		--spacing-md: 1rem;
		--spacing-lg: 1.5rem;
		--spacing-xl: 2rem;
		/* Border Radius */
		--radius-sm: 0.25rem;
		--radius-md: 0.5rem;
		--radius-lg: 0.75rem;
		--radius-xl: 1rem;
		/* Shadows */
		--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
		--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
		--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
		/* Transitions */
		--transition: all 0.3s ease;
}
body {
		font-family: var(--bs-body-font-family);
		font-size: var(--bs-body-font-size);
		line-height: var(--bs-body-line-height);
		color: var(--text-primary);
		background-color: #cbd2da;
		display: flex;
		min-height: 100vh;
}
/* 字級大小樣式 */
body.font-size-small {
		font-size: .8125rem;
}
body.font-size-normal {
		font-size: .9375rem;
}
body.font-size-large {
		font-size: 1rem;
}
body.font-size-xlarge {
		font-size: 1.25rem;
}
/* ==========================================
   覆蓋 Bootstrap 樣式
   ========================================== */
.btn-primary {
		background-color: var(--primary-color);
		border-color: var(--primary-color);
}
.btn-primary:hover, .btn-primary:focus {
		background-color: var(--primary-hover);
		border-color: var(--primary-hover);
}
.btn-check:checked + .btn-outline-secondary {
		background-color: var(--primary-color);
		border-color: var(--primary-color);
		color: white;
}
.form-control:focus, .form-select:focus {
		border-color: var(--primary-color);
		box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.1);
}
.accordion-button:not(.collapsed) {
		background-color: var(--bg-secondary);
		color: var(--primary-color);
}
.accordion-button:focus {
		box-shadow: none;
		border-color: var(--border-color);
}
.text-decoration-none:focus {
		box-shadow: none;
		border-color: 0;
		outline: none;
}
.table > :not(caption) > * > * {
		border-bottom-color: var(--border-color);
}
.page-link {
		color: var(--bs-body-color);
}
.modal-header {
		border-bottom-color: var(--border-color);
}
.modal-footer {
		border-top-color: var(--border-color);
}
.text-muted {
		margin: 2px 0;
}
/* ==========================================
   Swal2 Styles
   ========================================== */
div:where(.swal2-container) h2:where(.swal2-title) {
		font-size: 1.5em !important;
}
div:where(.swal2-container) .swal2-html-container {
		font-size: var(--bs-body-font-size) !important;
}
/* ==========================================
   Swal2 Styles
   ========================================== */
.tox .tox-notification--warn, .tox .tox-notification--warning {
		width: auto !important;
		display: none !important;
		pointer-events: none;
}
/* ==========================================
   Sidebar Styles (保持原樣)
   ========================================== */
.sidebar {
		width: var(--sidebar-width);
		background-color: var(--sidebar-bg);
		border-right: 1px solid var(--border-color);
		display: flex;
		flex-direction: column;
		position: fixed;
		left: 0;
		top: 0;
		height: 100vh;
		overflow-y: auto;
		transition: var(--transition);
		z-index: 1050;
}
.sidebar-header {
		padding: var(--spacing-lg);
		border-bottom: 1px solid var(--border-color);
}
.logo {
		display: flex;
		align-items: center;
		gap: var(--spacing-md);
}
.logo i {
		font-size: 1.5rem;
		background-color: var(--primary-color);
		color: white;
		padding: 0.5rem;
		border-radius: var(--radius-md);
}
.logo-text {
		display: flex;
		flex-direction: column;
}
.logo-title {
		font-weight: 600;
		font-size: 0.95rem;
		color: var(--text-primary);
}
.logo-subtitle {
		font-size: 0.75rem;
		color: var(--text-secondary);
}
/* Sidebar Navigation */
.sidebar-nav {
		flex: 1;
		padding: var(--spacing-lg) 0;
		overflow-y: auto;
}
.nav-section {
		margin-bottom: var(--spacing-xl);
}
.nav-section-title {
		font-size: 0.7rem;
		font-weight: 600;
		color: var(--text-secondary);
		text-transform: uppercase;
		letter-spacing: 0.05em;
		padding: 0 var(--spacing-lg);
		margin-bottom: var(--spacing-sm);
}
.nav-list {
		list-style: none;
		padding: 0;
		margin: 0;
}
.nav-link {
		display: flex;
		align-items: center;
		gap: var(--spacing-md);
		padding: var(--spacing-md) var(--spacing-lg);
		color: var(--text-primary);
		text-decoration: none;
		transition: var(--transition);
		position: relative;
}
.nav-link:hover {
		background-color: var(--sidebar-active);
		color: var(--text-primary);
}
.nav-link.active {
		background-color: var(--sidebar-active);
		font-weight: 500;
}
.nav-list > li > .nav-link.active::before {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		width: 3px;
		background-color: var(--primary-color);
}
.nav-link i {
		font-size: 1.1rem;
		width: 20px;
		text-align: center;
}
/* 次選單樣式 */
.nav-submenu {
		display: none;
		background: rgba(0, 0, 0, 0);
		list-style: none;
		padding: 0;
}
.nav-submenu.show {
		display: block;
}
.nav-link.has-submenu {
		position: relative;
}
.nav-link.has-submenu::after {
		content: '\F282';
		font-family: 'bootstrap-icons';
		position: absolute;
		right: 1rem;
		transition: transform 0.3s;
}
.nav-link.has-submenu.active::after {
		transform: rotate(180deg);
}
.nav-submenu .nav-link {
		padding: var(--spacing-md) 3.5rem;
}
.nav-submenu .nav-link.active {
		background-color: #cbd2da
}
.badge {
		margin-left: auto;
		background-color: var(--bg-tertiary);
		font-size: .8125rem;
		padding: 0.5rem .75rem;
		border-radius: 5rem;
		font-weight: 500;
}
/* Sidebar Footer */
.sidebar-footer {
		padding: var(--spacing-lg);
		border-top: 1px solid var(--border-color);
}
.user-profile {
		display: flex;
		align-items: center;
		gap: var(--spacing-md);
		cursor: pointer;
		padding: var(--spacing-sm);
		border-radius: var(--radius-md);
		transition: var(--transition);
}
.user-profile:hover {
		background-color: var(--sidebar-active);
}
.user-avatar {
		width: 36px;
		height: 36px;
		border-radius: 50%;
		background-color: var(--primary-color);
		color: white;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: 600;
		font-size: 0.85rem;
}
.user-name {
		flex: 1;
		font-weight: 500;
		font-size: 0.9rem;
}
/* ==========================================
  Nav Tabs Styles
   ========================================== */
.nav-tabs .nav-link:hover {
		background-color: RGBA(255, 255, 255, .35);
}
.nav-tabs .nav-link.active {
		background-color: #e5e9ed;
		border-bottom-color: #e5e9ed;
}
/* ==========================================
   Main Content Styles
   ========================================== */
.main-content {
		flex: 1;
		margin-left: var(--sidebar-width);
		display: flex;
		flex-direction: column;
		min-height: 100vh;
}
.mobile-header {
		display: none;
		align-items: center;
		gap: var(--spacing-md);
		padding: var(--spacing-md) var(--spacing-lg);
		background-color: var(--bg-primary);
		border-bottom: 1px solid var(--border-color);
		position: sticky;
		top: 0;
		z-index: 1040;
}
.menu-toggle {
		background: none;
		border: none;
		font-size: 1.5rem;
		cursor: pointer;
		padding: var(--spacing-sm);
		color: var(--text-primary);
}
.mobile-logo {
		font-weight: 600;
		font-size: 0.95rem;
}
.content-wrapper {
		padding: var(--spacing-xl);
		max-width: 1366px;
		width: 100%;
		margin: 0 auto;
}
.content-wrapper.wide {
		max-width: 1920px;
}
/* ==========================================
   Button Styles (保持原樣)
   ========================================== */
.btn-back {
		background: none;
		border: none;
		color: var(--text-secondary);
		font-size: 0.9rem;
		display: flex;
		align-items: center;
		gap: var(--spacing-sm);
		cursor: pointer;
		padding: var(--spacing-sm) 0;
		margin-bottom: var(--spacing-xl);
		transition: var(--transition);
}
.btn-back:hover {
		color: var(--text-primary);
}
/* ==========================================
   Progress Steps (保持原樣)
   ========================================== */
.progress-steps {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: var(--spacing-xl);
		padding: var(--spacing-xl);
		background-color: var(--bg-primary);
		border-radius: var(--radius-lg);
		box-shadow: var(--shadow-sm);
}
.step {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--spacing-sm);
}
.info-steps {
		display: flex;
		align-items: flex-start;
		gap: 20px;
		justify-content: center;
}
.info-steps .step {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--spacing-sm);
		min-height: 180px;
}
.info-steps .step > span {
		display: flex;
		flex-direction: column;
		flex-grow: 1;
		justify-content: space-between;
}
.step-circle {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		background-color: var(--bg-tertiary);
		color: var(--text-secondary);
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: 600;
		font-size: 0.9rem;
		transition: var(--transition);
}
.step.completed .step-circle {
		background-color: var(--success-color);
		color: white;
}
.step.active .step-circle {
		background-color: var(--primary-color);
		color: white;
}
.step-label {
		font-size: 0.8rem;
		color: var(--text-secondary);
		white-space: nowrap;
}
.step.active .step-label {
		color: var(--text-primary);
		font-weight: 500;
}
.step-line {
		width: 60px;
		height: 2px;
		background-color: var(--bg-tertiary);
		margin: 0 var(--spacing-sm);
}
.step-line.completed {
		background-color: var(--success-color);
}
/* ==========================================
   Card Styles (保持原樣)
   ========================================== */
.card {
		background-color: var(--bg-primary);
		border-radius: var(--radius-lg);
		padding: var(--spacing-xl);
		box-shadow: var(--shadow-sm);
		margin-bottom: var(--spacing-lg);
		border: none;
}
.card-title {
		font-size: 1.25rem;
		font-weight: 600;
		margin-bottom: var(--spacing-xl);
		color: var(--text-primary);
}
/* ==========================================
   Submission Options (保持原樣)
   ========================================== */
.submission-options {
		display: flex;
		flex-direction: column;
		gap: var(--spacing-md);
		margin-bottom: var(--spacing-xl);
}
.option-card {
		padding: var(--spacing-lg);
		background-color: var(--bg-secondary);
		border: 2px solid transparent;
		border-radius: var(--radius-md);
		cursor: pointer;
		transition: var(--transition);
		font-size: 0.95rem;
		text-align: left;
}
.option-card:hover {
		background-color: var(--bg-tertiary);
		border-color: var(--border-color);
}
.option-card.selected {
		background-color: white;
		border-color: var(--primary-color);
}
.card-actions {
		display: flex;
		justify-content: space-between;
		gap: var(--spacing-md);
}
/* ==========================================
   Responsive Design
   ========================================== */
@media (max-width: 991.98px) {
		.sidebar {
				transform: translateX(-100%);
		}
		.sidebar.show {
				transform: translateX(0);
		}
		.main-content {
				margin-left: 0;
		}
		.mobile-header {
				display: flex;
		}
}
@media (max-width: 767.98px) {
		.content-wrapper {
				padding: var(--spacing-lg);
		}
		.progress-steps {
				overflow-x: auto;
				justify-content: flex-start;
				padding: var(--spacing-lg);
		}
		.step-line {
				width: 40px;
		}
		.card-actions {
				flex-direction: column;
		}
}
@media (max-width: 575.98px) {
		.step-circle {
				width: 32px;
				height: 32px;
				font-size: 0.8rem;
		}
		.step-label {
				font-size: 0.7rem;
		}
		.step-line {
				width: 30px;
		}
}
/* ==========================================
   Utility Classes
   ========================================== */
.text-center {
		text-align: center;
}
.hidden {
		display: none !important;
}
/* ==========================================
   Accessibility
   ========================================== */
.sr-only {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border-width: 0;
}
a:focus, button:focus, input:focus, select:focus, textarea:focus {
		outline: 2px solid var(--primary-color);
		outline-offset: 2px;
}
@media (prefers-contrast: high) {
		:root {
				--border-color: #000000;
		}
}
@media (prefers-reduced-motion: reduce) {
		*, *::before, *::after {
				animation-duration: 0.01ms !important;
				animation-iteration-count: 1 !important;
				transition-duration: 0.01ms !important;
		}
}
/* ==========================================
   Divider
   ========================================== */
.divider {
		display: flex;
		align-items: center;
		text-align: center;
		margin: 1.5rem 0;
}
.divider::before, .divider::after {
		content: '';
		flex: 1;
		border-bottom: 1px solid #dee2e6;
}
.divider span {
		padding: 0 1rem;
		color: #6c757d;
		font-size: 0.875rem;
}
/* ==========================================
   Success
   ========================================== */
.success-message {
		display: none;
		text-align: center;
		padding: 2rem;
}
.success-icon {
		width: 80px;
		height: 80px;
		background-color: var(--success-color);
		color: white;
		border-radius: 50%;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		font-size: 3rem;
		margin-bottom: 1.5rem;
}
.success-icon.small-mode {
		width: 30px;
		height: 30px;
		font-size: 1.5rem;
		margin-right: .25rem;
}
/* ==========================================
   Login Step
   ========================================== */
.auth-wrapper {
		min-height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 4rem;
		backdrop-filter: blur(20px);
		background-color: RGBA(0, 0, 0, .15);
}
.auth-card {
		background: white;
		border-radius: 1rem;
		box-shadow: 0 10px 40px rgba(0, 0, 0, .1);
		min-width: 400px;
		width: 400px;
}
.auth-header {
		padding: 2rem 2rem 0 2rem;
		text-align: center;
}
.auth-icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 64px;
		height: 64px;
		background-color: #0dcaf0;
		color: white;
		border-radius: 50%;
		font-size: 2rem;
		margin-bottom: 1rem;
}
.auth-title {
		font-size: 1.5rem;
		font-weight: 600;
		margin-bottom: 0.5rem;
		color: #212529;
}
.auth-subtitle {
		color: #6c757d;
		margin: 0;
}
.auth-body {
		padding: 2rem;
}
.login-step .auth-icon {
		background-color: #0dcaf0;
}
.forget-step .auth-icon {
		background-color: var(--danger-color);
}
.reset-step .auth-icon {
		background-color: var(--warning-color);
}
/* ==========================================
   Tag
   ========================================== */
#tagCloud {
		display: flex;
		flex-wrap: wrap;
		gap: 20px;
}
/* ==========================================
   Form
   ========================================== */
.form-floating {
		position: relative;
}
.form-check {
		display: flex;
		align-items: center;
}
.form-check-label {
		cursor: pointer;
		margin-left: .75rem;
}
.password-toggle {
		position: absolute;
		right: 12px;
		top: 50%;
		transform: translateY(-50%);
		background: none;
		border: none;
		color: #6c757d;
		cursor: pointer;
		padding: 0.5rem;
		z-index: 10;
}
.password-toggle:hover {
		color: #212529;
}
.password-strength {
		height: 4px;
		background-color: var(--bg-tertiary);
		border-radius: 2px;
		margin-top: 0.5rem;
		overflow: hidden;
}
.password-strength-bar {
		height: 100%;
		transition: all 0.3s ease;
		border-radius: 2px;
}
.password-requirements {
		font-size: 0.85rem;
		margin-top: 1rem;
}
.requirement {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		color: var(--text-secondary);
		margin-bottom: 0.25rem;
}
.requirement.met {
		color: var(--success-color);
}
.requirement i {
		font-size: 0.75rem;
}
/** 會員管理 **/
.avatar-upload-box {
		width: 150px;
		height: 150px;
		border: 2px dashed #dee2e6;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		transition: all 0.3s;
		overflow: hidden;
		background: #f8f9fa;
		margin: 0 auto;
}
.avatar-upload-box:hover {
		border-color: #0d6efd;
		background: #e7f1ff;
}
.avatar-upload-box img {
		width: 100%;
		height: 100%;
		object-fit: cover;
}
.avatar-upload-box .upload-placeholder {
		text-align: center;
		color: #6c757d;
}
.avatar-upload-box .avatar-upload:hover {
		border-color: #0d6efd;
		background-color: #f8f9fa;
}
.avatar-preview {
		width: 100%;
		height: 100%;
		object-fit: cover;
}
.avatar-placeholder {
		text-align: center;
}
.permission-section {
		background: #f8f9fa;
		border-radius: 0.375rem;
		padding: 1.5rem;
		margin-bottom: 1rem;
}
.permission-group {
		margin-bottom: 1rem;
}
.permission-group:last-child {
		margin-bottom: 0;
}
.permission-item {
		padding: 0.5rem;
		border-radius: 0.25rem;
		transition: all 0.3s;
}
.permission-item:hover {
		background: white;
}
.password-strength {
		height: 5px;
		border-radius: 3px;
		background: #e9ecef;
		overflow: hidden;
		margin-top: 0.5rem;
}
.password-strength-bar {
		height: 100%;
		transition: all 0.3s;
}
.password-strength.weak .password-strength-bar {
		width: 33%;
		background: #dc3545;
}
.password-strength.medium .password-strength-bar {
		width: 66%;
		background: #ffc107;
}
.password-strength.strong .password-strength-bar {
		width: 100%;
		background: #28a745;
}
/* ==========================================
   Admin List
   ========================================== */
.admin-card {
		transition: all 0.3s;
		border-left: 4px solid transparent;
}
.admin-card:hover {
		border-left-color: #0d6efd;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.admin-avatar {
		width: 32px;
		height: 32px;
		border-radius: 50%;
		background-color: var(--primary-color);
		color: white;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		font-weight: 600;
		font-size: 0.75rem;
		margin-right: 0.5rem;
}
.admin-avatar img {
		width: 100%;
		height: 100%;
		border-radius: 50%;
		object-fit: cover;
}
.role-badge {
		display: inline-block;
		padding: 0.25rem .75rem;
		cursor: pointer;
		transition: all 0.3s;
		margin: 0.25rem;
		font-size: 0.875rem;
		border-radius: 5rem;
}
.role-badge.selected {
		background: #0d6efd;
		color: white;
		border-color: #0d6efd;
}
.role-super-admin {
		background-color: rgba(var(--bs-primary-rgb)) !important;
		color: white;
}
.role-admin {
		background-color: rgba(var(--bs-info-rgb)) !important;
		color: white;
}
.role-editor {
		background-color: rgba(var(--bs-warning-rgb)) !important;
		color: white;
}
.role-viewer {
		background-color: rgba(var(--bs-secondary-rgb)) !important;
		color: white;
}
.stat-icon {
		width: 50px;
		height: 50px;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 100%;
		color: #ffffff;
}
.stat-icon i {
		font-size: 1.5rem;
}
.status-badge {
		width: 10px;
		height: 10px;
		border-radius: 50%;
		display: inline-block;
		margin-right: 0.5rem;
}
.status-active {
		background: #28a745;
		box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.2);
}
.status-inactive {
		background: #dc3545;
}
.stats-card {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		color: white;
		border-radius: 0.5rem;
		padding: 1.5rem;
		height: 100%;
}
/* ==========================================
   Article Add
   ========================================== */
.featured-image-upload {
		border: 2px dashed #dee2e6;
		border-radius: 0.375rem;
		padding: 2rem;
		text-align: center;
		cursor: pointer;
		transition: all 0.3s;
		position: relative;
}
.featured-image-upload:hover {
		border-color: #0d6efd;
		background-color: #f8f9fa;
}
.featured-image-preview {
		max-width: 100%;
		max-height: 300px;
		border-radius: 0.375rem;
}
.remove-featured-image {
		position: absolute;
		top: 1rem;
		right: 1rem;
		background: rgba(220, 53, 69, 0.9);
		color: white;
		border: none;
		border-radius: 50%;
		width: 40px;
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
}
/* ==========================================
   Article Category / Product Category
   ========================================== */
.category-tree {
		list-style: none;
		padding-left: 0;
}
.category-tree li {
		margin: 0.5rem 0;
}
.category-tree .category-item {
		padding: 0.75rem;
		border: 1px solid #dee2e6;
		border-radius: 0.375rem;
		background: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
}
.category-tree .category-item:hover {
		background: #f8f9fa;
}
.category-children {
		list-style: none;
		padding-left: 2rem;
		margin-top: 0.5rem;
}
.category-toggle {
		cursor: pointer;
		margin-right: 0.5rem;
}
.category-toggle.expanded {
		transform: rotate(90deg);
}
.drag-handle {
		cursor: move;
		color: #6c757d;
		font-size: 1.2rem;
		margin-right: 0.5rem;
}
.drag-handle:hover {
		color: #0d6efd;
}
.dragging {
		opacity: 0.5;
		cursor: move !important;
}
.drag-placeholder {
		border: 2px dashed #0d6efd !important;
		background: #e7f1ff !important;
}
.modal-backdrop {
		background-color: rgba(0, 0, 0, 0.5);
}
/* ==========================================
   Article List
   ========================================== */
.article-thumb {
		width: 80px;
		height: 60px;
		object-fit: cover;
		border-radius: 0.375rem;
}
.article-tag {
		display: inline-block;
		padding: 0.25rem 0.5rem;
		margin: 0.125rem;
		border-radius: 0.25rem;
		font-size: 0.75rem;
}
.article-excerpt {
		color: #6c757d;
		font-size: 0.875rem;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
}
/* ==========================================
   Member Group
   ========================================== */
.group-card {
		transition: all 0.3s;
		cursor: pointer;
}
.group-card:hover {
		transform: translateY(-5px);
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.group-icon {
		width: 60px;
		height: 60px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 1.5rem;
		margin: 0 auto 1rem;
}
.group-icon.is-small {
		width: 45px;
		height: 45px;
		margin: 0 1rem 0 0;
}
.permission-list {
		max-height: 300px;
		overflow-y: auto;
}
/* ==========================================
   Member List
   ========================================== */
.member-avatar {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		object-fit: cover;
}
.member-info {
		display: flex;
		align-items: center;
		gap: 0.75rem;
}
.member-name {
		font-weight: 600;
}
.member-email {
		color: #6c757d;
		font-size: 0.875rem;
}
/* ==========================================
   Menu Management
   ========================================== */
.menu-item {
		border: 1px solid #dee2e6;
		border-radius: 0.375rem;
		padding: 1rem;
		margin-bottom: 0.5rem;
		background: white;
		transition: all 0.3s;
}
.menu-item:hover {
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.menu-item.child {
		margin-left: 2rem;
		border-left: 3px solid #0d6efd;
}
.menu-item.grandchild {
		margin-left: 4rem;
		border-left: 3px solid #6c757d;
}
.drag-handle {
		cursor: move;
		color: #6c757d;
}
.menu-preview {
		position: sticky;
		top: 1rem;
}
.preview-menu {
		background: #f8f9fa;
		border-radius: 0.375rem;
		padding: 1rem;
}
.preview-menu a {
		display: block;
		padding: 0.5rem 1rem;
		color: #212529;
		text-decoration: none;
		border-radius: 0.25rem;
		transition: all 0.3s;
}
.preview-menu a:hover {
		background: white;
		color: #0d6efd;
}
.preview-menu .submenu {
		margin-left: 1rem;
		border-left: 2px solid #dee2e6;
		padding-left: 0.5rem;
}
/* ==========================================
   Message List
   ========================================== */
.message-item {
		transition: all 0.3s;
		cursor: pointer;
		border-left: 3px solid transparent;
}
.message-item:hover {
		background-color: #f8f9fa;
		border-left-color: #0d6efd;
}
.message-item.unread {
		background-color: #f0f8ff;
		font-weight: 600;
}
.message-preview {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
}
.message-detail {
		max-height: 500px;
		overflow-y: auto;
}
/* ==========================================
  Permission
   ========================================== */
.role-card {
		transition: all 0.3s;
		border-left: 4px solid transparent;
}
.role-card:hover {
		border-left-color: #0d6efd;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.permission-matrix {
		overflow-x: auto;
}
.permission-matrix table {
		min-width: 800px;
}
.permission-check {
		width: 20px;
		height: 20px;
		cursor: pointer;
}
/* ==========================================
  product add
   ========================================== */
.image-upload-area {
		border: 2px dashed #dee2e6;
		border-radius: 0.375rem;
		padding: 2rem;
		text-align: center;
		cursor: pointer;
		transition: all 0.3s;
}
.image-upload-area:hover {
		border-color: #0d6efd;
		background-color: #f8f9fa;
}
.image-preview-container {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
		gap: 1rem;
		margin-top: 1rem;
}
.image-preview-item {
		position: relative;
		border: 1px solid #dee2e6;
		border-radius: 0.375rem;
		overflow: hidden;
		aspect-ratio: 1;
}
.image-preview-item img {
		width: 100%;
		height: 100%;
		object-fit: cover;
}
.image-preview-item .remove-image {
		position: absolute;
		top: 0.5rem;
		right: 0.5rem;
		background: rgba(220, 53, 69, 0.9);
		color: white;
		border: none;
		border-radius: 50%;
		width: 30px;
		height: 30px;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
}
.image-preview-item .set-main {
		position: absolute;
		bottom: 0.5rem;
		left: 0.5rem;
		background: rgba(13, 110, 253, 0.9);
		color: white;
		border: none;
		border-radius: 0.25rem;
		padding: 0.25rem 0.5rem;
		font-size: 0.75rem;
		cursor: pointer;
}
.image-preview-item.main-image {
		border: 3px solid #0d6efd;
}
.image-preview-item.main-image::after {
		content: '主圖';
		position: absolute;
		top: 0.5rem;
		left: 0.5rem;
		background: #0d6efd;
		color: white;
		padding: 0.25rem 0.5rem;
		border-radius: 0.25rem;
		font-size: 0.75rem;
}
.spec-row {
		display: flex;
		gap: 0.5rem;
		margin-bottom: 0.5rem;
}
.spec-row input {
		flex: 1;
}

.filter-row {
	display: flex;
	gap: 0.5rem;
	margin-bottom: 0.5rem;
}
.filter-row input {
	flex: 1;
}
.category-row {
	display: flex;
	gap: 0.5rem;
	margin-bottom: 0.5rem;
}
.category-row input {
	flex: 1;
}





/* ==========================================
  settings
   ========================================== */
.settings-nav {
		position: sticky;
		top: 1rem;
}
.settings-nav .nav-link {
		color: #6c757d;
		padding: 0.75rem 1rem;
		border-radius: 0.375rem;
		margin-bottom: 0.25rem;
		transition: all 0.3s;
}
.settings-nav .nav-link:hover {
		background-color: #f8f9fa;
		color: #0d6efd;
}
.settings-nav .nav-link.active {
		background-color: #0d6efd;
		color: white;
}
.logo-upload {
		width: 200px;
		height: 80px;
		border: 2px dashed #dee2e6;
		border-radius: 0.375rem;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		transition: all 0.3s;
}
.logo-upload:hover {
		border-color: #0d6efd;
		background-color: #f8f9fa;
}
.logo-preview {
		max-width: 100%;
		max-height: 100%;
}
/* ==========================================
  profile
   ========================================== */
.profile-header {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		color: white;
		padding: 2rem;
		border-radius: 0.5rem;
		margin-bottom: 2rem;
}
.avatar-upload {
		position: relative;
		width: 150px;
		height: 150px;
		margin: 0 auto;
}
.avatar-preview {
		width: 150px;
		height: 150px;
		border-radius: 50%;
		border: 5px solid white;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
		overflow: hidden;
		background: #f8f9fa;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 3rem;
		color: #6c757d;
}
.avatar-preview img {
		width: 100%;
		height: 100%;
		object-fit: cover;
}
.avatar-edit {
		position: absolute;
		bottom: 5px;
		right: 5px;
		width: 40px;
		height: 40px;
		border-radius: 50%;
		background: #0d6efd;
		border: 3px solid white;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		transition: all 0.3s;
}
.avatar-edit:hover {
		background: #0b5ed7;
		transform: scale(1.1);
}
.activity-item {
		padding: 1rem;
		border-left: 3px solid #dee2e6;
		margin-bottom: 1rem;
		transition: all 0.3s;
}
.activity-item:hover {
		border-left-color: #0d6efd;
		background: #f8f9fa;
}
/* ==========================================
  product list
   ========================================== */
.product-thumb {
		width: 60px;
		height: 60px;
		object-fit: cover;
		border-radius: 0.375rem;
}
.product-tag {
		display: inline-block;
		padding: 0.25rem 0.5rem;
		margin: 0.125rem;
		border-radius: 0.25rem;
		font-size: 0.75rem;
}
.stock-status {
		font-weight: 600;
}
.stock-low {
		color: #e65100;
}
.stock-out {
		color: #d32f2f;
}
.stock-normal {
		color: #2e7d32;
}
/* ==========================================
  change password
   ========================================== */
.password-strength {
		height: 5px;
		border-radius: 3px;
		background: #e9ecef;
		overflow: hidden;
		margin-top: 0.5rem;
}
.password-strength-bar {
		height: 100%;
		transition: all 0.3s;
}
.password-strength.weak .password-strength-bar {
		width: 33%;
		background: #dc3545;
}
.password-strength.medium .password-strength-bar {
		width: 66%;
		background: #ffc107;
}
.password-strength.strong .password-strength-bar {
		width: 100%;
		background: #28a745;
}
.password-requirements {
		font-size: 0.875rem;
}
.password-requirements li {
		padding: 0.25rem 0;
		color: #6c757d;
}
.password-requirements li.valid {
		color: #28a745;
}
.password-requirements li.valid i {
		color: #28a745;
}
.security-tip {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		color: white;
		border-radius: 0.5rem;
		padding: 1.5rem;
}
/* 多語系控制樣式 */
.lang-control-bar {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		padding: 1rem;
		border-radius: 8px;
		margin-bottom: 1.5rem;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.lang-tabs {
		display: flex;
		gap: 0.5rem;
		flex-wrap: wrap;
}
.lang-tab {
		padding: 0.5rem 1.25rem;
		border: 2px solid rgba(255, 255, 255, 0.3);
		background: rgba(255, 255, 255, 0.1);
		color: white;
		border-radius: 6px;
		cursor: pointer;
		transition: all 0.3s ease;
		font-weight: 500;
		display: flex;
		align-items: center;
		gap: 0.5rem;
}
.lang-tab:hover {
		background: rgba(255, 255, 255, 0.2);
		border-color: rgba(255, 255, 255, 0.5);
		transform: translateY(-2px);
}
.lang-tab.active {
		background: white;
		color: #667eea;
		border-color: white;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.lang-tab .badge {
		font-size: 0.85rem;
		padding: 0.2rem 0.4rem;
}
/* 欄位標籤樣式 */
.field-label-wrapper {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 0.5rem;
}
.field-type-badge {
		display: inline-flex;
		align-items: center;
		gap: 0.25rem;
		padding: 0.25rem 0.5rem;
		border-radius: 4px;
		font-size: 0.85rem;
		display: none;
}
.field-type-badge.common {
		background: #e3f2fd;
		color: #1976d2;
}
.field-type-badge.multilang {
		background: #f3e5f5;
		color: #7b1fa2;
}
/* 多語系欄位容器 */
.multilang-field {
		position: relative;
}
.multilang-content {
		display: none;
}
.multilang-content.active {
		display: block;
		animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
		from {
				opacity: 0;
				transform: translateY(-10px);
		}
		to {
				opacity: 1;
				transform: translateY(0);
		}
}
/* 語言完成度指示器 */
.lang-progress {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		margin-top: 0.5rem;
}
.lang-progress-bar {
		flex: 1;
		height: 4px;
		background: #e0e0e0;
		border-radius: 2px;
		overflow: hidden;
}
.lang-progress-fill {
		height: 100%;
		background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
		transition: width 0.3s ease;
}
.lang-progress-text {
		font-size: 0.75rem;
		color: #666;
		white-space: nowrap;
}
/* 語言狀態指示 */
.lang-status-indicators {
		display: flex;
		gap: 0.5rem;
		margin-top: 0.5rem;
}
.lang-status {
		display: flex;
		align-items: center;
		gap: 0.25rem;
		font-size: 0.75rem;
		padding: 0.25rem 0.5rem;
		border-radius: 4px;
		background: #f5f5f5;
}
.lang-status.completed {
		background: #e8f5e9;
		color: #2e7d32;
}
.lang-status.incomplete {
		background: #fff3e0;
		color: #e65100;
}
.lang-status i {
		font-size: 0.875rem;
}
/* 快速切換按鈕 */
.quick-lang-switch {
		display: inline-flex;
		gap: 0.25rem;
		margin-left: 0.5rem;
}
.quick-lang-btn {
		padding: 0.125rem 0.375rem;
		font-size: 0.85rem;
		border: 1px solid #ddd;
		background: white;
		border-radius: 3px;
		cursor: pointer;
		transition: all 0.2s ease;
}
.quick-lang-btn:hover {
		background: #f5f5f5;
		border-color: #999;
}
.quick-lang-btn.active {
		background: #667eea;
		color: white;
		border-color: #667eea;
}
/* 提示訊息 */
.lang-hint {
		background: #fff9e6;
		border-left: 4px solid #ffc107;
		padding: 0.75rem;
		margin-bottom: 1rem;
		border-radius: 4px;
		font-size: 0.875rem;
}
.lang-hint i {
		color: #ffc107;
		margin-right: 0.5rem;
}
/* 共用欄位在非共用模式下的顯示 */
.common-section {
		display: flex;
}
.common-section.hide-in-lang {
		display: none;
}
/* 編輯器語言提示 */
.editor-lang-indicator {
		background: #667eea;
		color: white;
		padding: 0.5rem 1rem;
		border-radius: 6px 6px 0 0;
		font-size: 0.875rem;
		font-weight: 500;
		display: flex;
		align-items: center;
		gap: 0.5rem;
		margin-bottom: -1px;
}
.editor-lang-indicator i {
		font-size: 1rem;
}
/* 手風琴樣式 */
.industry-accordion .accordion-item {
		border: 1px solid #dee2e6;
		border-radius: 12px;
		margin-bottom: 15px;
		overflow: hidden;
}
.industry-accordion .accordion-button {
		background: #f8f9fa;
		font-weight: 600;
		padding: 1rem 1.25rem;
}
.industry-accordion .accordion-button:not(.collapsed) {
		background: #e7f1ff;
		color: #0d6efd;
}
.industry-accordion .accordion-button::after {
		margin-left: auto;
}
.industry-accordion .accordion-body {
		padding: 1.5rem;
}
.industry-accordion .accordion-item .accordion-header {
		position: relative;
}
.industry-accordion .accordion-item .accordion-header .btn-del {
		position: absolute;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		z-index: 3;
		height: fit-content;
}
.industry-accordion .accordion-item .accordion-header .accordion-button {
		padding-right: 50px;
}
.industry-accordion .image-preview {
		width: 100%;
		height: 200px;
		border: 2px dashed #dee2e6;
		border-radius: 8px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #f8f9fa;
		overflow: hidden;
		position: relative;
		cursor: pointer;
		transition: all 0.3s;
}
.industry-accordion .image-preview:hover {
		border-color: #0d6efd;
		background: #e7f1ff;
}
.industry-accordion .image-preview img {
		width: 100%;
		height: 100%;
		object-fit: cover;
}
.industry-accordion .image-preview .upload-placeholder {
		text-align: center;
		color: #6c757d;
}
.industry-accordion .image-preview .upload-placeholder i {
		font-size: 3rem;
		margin-bottom: 10px;
		display: block;
}
.industry-accordion .image-preview .image-actions {
		position: absolute;
		top: 10px;
		right: 10px;
		display: none;
		gap: 5px;
}
.industry-accordion .image-preview:hover .image-actions {
		display: flex;
}
.logo-upload-section {
		border: 2px dashed #dee2e6;
		border-radius: 10px;
		padding: 20px;
		margin-bottom: 20px;
}
.logo-item {
		display: block;
		padding: 20px;
		background: #f8f9fa;
		border-radius: 10px;
		margin-bottom: 15px;
		border: 2px solid #dee2e6;
		transition: all 0.3s;
		position: relative;
}
.logo-item:hover {
		background: #e9ecef;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
		border-color: #0d6efd;
}
.logo-item-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 15px;
		padding-bottom: 15px;
		border-bottom: 2px solid #dee2e6;
}
.logo-item-title {
		display: flex;
		align-items: center;
		gap: 10px;
		font-weight: 600;
		color: #333;
}
.logo-item-actions-header {
		display: flex;
		gap: 5px;
}
.logo-item-body {
		display: grid;
		grid-template-columns: 200px 1fr;
		gap: 20px;
		align-items: start;
}
.logo-item-preview {
		width: 200px;
		height: 106px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: white;
		border: 2px solid #dee2e6;
		overflow: hidden;
		position: relative;
		cursor: pointer;
		transition: all 0.3s;
}
.logo-item-preview:hover {
		border-color: #0d6efd;
		transform: scale(1.02);
}
.logo-item-preview img {
		width: 100%;
		height: auto;
		object-fit: contain;
}
.logo-item-preview:hover .image-overlay {
		opacity: 1;
}
.logo-item.dragging {
		opacity: 0.5;
		transform: scale(0.98);
}
.logo-item.drag-placeholder {
		border: 2px dashed #0d6efd !important;
		background: #e7f1ff !important;
		opacity: 0.5;
}
.image-overlay {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(13, 110, 253, 0.9);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		opacity: 0;
		transition: opacity 0.3s;
		color: white;
		font-size: 14px;
		gap: 5px;
}
.image-overlay i {
		font-size: 24px;
}
.logo-item-form {
		flex: 1;
}
.logo-number {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 28px;
		height: 28px;
		background: #0d6efd;
		color: white;
		border-radius: 50%;
		font-size: 14px;
		font-weight: bold;
}
.form-section {
		background: white;
		padding: 15px;
		border-radius: 8px;
		margin-bottom: 10px;
}
.form-section-title {
		font-size: 14px;
		font-weight: 600;
		color: #495057;
		margin-bottom: 10px;
		display: flex;
		align-items: center;
		gap: 8px;
}
@media (max-width: 768px) {
		.logo-item-body {
				grid-template-columns: 1fr;
		}
		.logo-item-preview {
				width: 100%;
				max-width: 300px;
				margin: 0 auto;
		}
}
/* ad-home-add */
.slider-type-selector {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 15px;
		margin-bottom: 20px;
}
.type-option {
		border: 2px solid #dee2e6;
		border-radius: 10px;
		padding: 20px;
		cursor: pointer;
		transition: all 0.3s;
		text-align: center;
}
.type-option:hover {
		border-color: #0d6efd;
		background: #f8f9fa;
}
.type-option.active {
		border-color: #0d6efd;
		background: linear-gradient(135deg, #667eea15, #764ba215);
}
.type-option i {
		font-size: 2.5rem;
		margin-bottom: 10px;
		display: block;
}
.preview-container {
		position: relative;
		width: 100%;
		height: 400px;
		background: #000;
		border-radius: 10px;
		overflow: hidden;
		margin-bottom: 20px;
}
.preview-image {
		width: 100%;
		height: 100%;
		object-fit: cover;
}
.preview-content {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		color: white;
		width: 80%;
		padding: 20px;
		background: rgba(0, 0, 0, 0.3);
		border-radius: 10px;
}
.template-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 15px;
		margin-top: 15px;
}
.template-item {
		border: 2px solid #dee2e6;
		border-radius: 8px;
		padding: 15px;
		cursor: pointer;
		transition: all 0.3s;
}
.template-item:hover {
		border-color: #0d6efd;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.template-item.active {
		border-color: #0d6efd;
		background: #e7f1ff;
}
.template-preview {
		width: 100%;
		height: 120px;
		background: #f8f9fa;
		border-radius: 5px;
		margin-bottom: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 12px;
		color: #6c757d;
		position: relative;
		overflow: hidden;
}
/* 樣板預覽內容樣式 */
.template-preview .preview-layout {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		padding: 10px;
}
.template-preview .preview-title {
		font-weight: bold;
		margin-bottom: 5px;
		font-size: 11px;
}
.template-preview .preview-subtitle {
		font-size: 9px;
		margin-bottom: 5px;
		color: #6c757d;
}
.template-preview .preview-button {
		margin-top: auto;
		padding: 3px 8px;
		background: #0d6efd;
		color: white;
		border-radius: 3px;
		font-size: 8px;
		display: inline-block;
		align-self: flex-start;
}
.template-preview .preview-divider {
		width: 30px;
		height: 2px;
		background: #0d6efd;
		margin: 5px 0;
}
.qa-item {
		border: 2px solid #e9ecef;
		border-radius: 8px;
		padding: 20px;
		margin-bottom: 15px;
		background: #fff;
		position: relative;
		transition: all 0.3s;
}
.qa-item:hover {
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.qa-item-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 15px;
		padding-bottom: 10px;
		border-bottom: 1px solid #e9ecef;
}
.qa-item-number {
		background: #0d6efd;
		color: white;
		width: 32px;
		height: 32px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: bold;
		font-size: 0.9rem;
}
.qa-item-actions {
		display: flex;
		gap: 8px;
}
.qa-drag-handle {
		cursor: move;
		color: #6c757d;
		font-size: 1.2rem;
		padding: 5px;
}
.qa-drag-handle:hover {
		color: #0d6efd;
}
.add-qa-btn {
		border: 2px dashed #0d6efd;
		background: #f8f9fa;
		color: #0d6efd;
		padding: 15px;
		border-radius: 8px;
		width: 100%;
		transition: all 0.3s;
}
.add-qa-btn:hover {
		background: #e7f1ff;
		border-color: #0a58ca;
}
.slider-preview {
		position: relative;
		width: 100%;
		height: 200px;
		background-size: cover;
		background-position: center;
		border-radius: 8px;
		overflow: hidden;
}
.slider-preview-overlay {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
		padding: 15px;
		color: white;
}
.slider-type-badge {
		position: absolute;
		top: 10px;
		right: 10px;
		padding: 5px 12px;
		font-size: 12px;
		color: #ffffff;
}
.type-home {
		background-color: rgba(var(--bs-primary-rgb)) !important;
}
.type-channel {
		background-color: rgba(var(--bs-danger-rgb)) !important;
}
.type-logo {
		background-color: rgba(var(--bs-info-rgb)) !important;
}
.tag-selector-container .form-check {
		padding: 2px 8px;
		margin-bottom: 5px;
		transition: background-color 0.2s;
}
.tag-selector-container .form-check .tag-checkbox {
		margin-left: 0;
}
.tag-selector-container .form-check:hover {
		background-color: #f8f9fa;
}
.selected-tag-badge {
		display: inline-flex;
		align-items: center;
		gap: 5px;
		padding: 6px 12px;
		background-color: #0d6efd;
		color: white;
		border-radius: 20px;
		font-size: 0.875rem;
}
.selected-tag-badge .remove-tag {
		cursor: pointer;
		font-weight: bold;
		margin-left: 5px;
}
.selected-tag-badge .remove-tag:hover {
		color: #ffc107;
}
.tag-selector-container .form-check[style*="display: none"] {
		display: none !important;
}


.preview-container.is-channel {
	position: relative;
	width: 100%;
	height: 400px;
	background: linear-gradient(135deg, #0080ff 0%, #0066cc 100%);
	border-radius: 10px;
	overflow: hidden;
	margin-bottom: 20px;
	display: flex;
	align-items: center;
	padding: 40px;
}
.preview-left {
	flex: 0 0 55%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.preview-right {
		flex: 0 0 45%;
	padding-right: 30px;
}
.preview-image-box {
	width: 100%;
	max-width: 400px;
	height: 250px;
	background: rgba(255,255,255,0.1);
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	backdrop-filter: blur(10px);
}
.preview-image-box img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}
.preview-badge {
	display: inline-block;
	background: rgba(0,0,0,0.3);
	color: white;
	padding: 6px 15px;
	border-radius: 20px;
	font-size: 12px;
	margin-bottom: 15px;
}
.preview-channel-name {
	font-size: 2rem;
	font-weight: bold;
	color: white;
	margin-bottom: 10px;
}
.preview-meta {
	font-size: 0.9rem;
	color: rgba(255,255,255,0.8);
	margin-bottom: 20px;
}
.preview-title {
	font-size: 1.5rem;
	font-weight: bold;
	color: white;
	margin-bottom: 15px;
}
.preview-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 20px;
}
.preview-tag {
	background: rgba(255,255,255,0.2);
	color: white;
	padding: 5px 12px;
	border-radius: 15px;
	font-size: 12px;
	border: 1px solid rgba(255,255,255,0.3);
}
.preview-progress {
	width: 100%;
	height: 4px;
	background: rgba(255,255,255,0.2);
	border-radius: 2px;
	margin-bottom: 15px;
	position: relative;
}
.preview-progress-bar {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 60%;
	background: white;
	border-radius: 2px;
}
.preview-learn-more {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: white;
	font-weight: 500;
	cursor: pointer;
}
.tag-input-group {
	display: flex;
	gap: 10px;
	margin-bottom: 10px;
}
.tag-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
}
.tag-item {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: #e7f1ff;
	color: #0d6efd;
	padding: 5px 12px;
	border-radius: 15px;
	font-size: 14px;
}
.tag-item .btn-remove-tag {
	background: none;
	border: none;
	color: #0d6efd;
	padding: 0;
	cursor: pointer;
	font-size: 16px;
	line-height: 1;
}

.form-control:read-only {
	background-color: #e9ecef;
	color: #6c757d;
}