/**
 * Magictool Public Styles
 *
 * @package Magictool
 */

:root {
	--magictool-primary: #1447e6;
	--magictool-primary-hover: #0f3bbf;
	--magictool-secondary: #64748b;
	--magictool-success: #10b981;
	--magictool-warning: #f59e0b;
	--magictool-danger: #ef4444;
	--magictool-bg: #f8fafc;
	--magictool-bg-card: #ffffff;
	--magictool-border: #e5e7eb;
	--magictool-text: #4a5565;
	--magictool-text-muted: #737373;
	--magictool-radius: 12px;
	--magictool-radius-sm: 8px;
	--magictool-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	--magictool-shadow-lg: 0 3px 10px rgba(0, 0, 0, 0.05);
	--magictool-foreground: #0a0a0a;
	--magictool-muted-background: #737373;
	--magictool-color-gray-700: #364153;
}

.shadow-lg {
	--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
	--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.max-w-7xl {
	max-width: 1280px;
}

.mx-auto {
	margin: 0 auto;
}

.px-4 {
	padding-left: 1rem;
	padding-right: 1rem;
}

/* Reset */
.magictool-dashboard *,
.magictool-generator *,
.magictool-history *,
.magictool-profile-page * {
	box-sizing: border-box;
}

/* Main Wrapper Layout */
.magictool-wrapper {
	display: flex;
	min-height: 600px;
	background: var(--magictool-bg);
	overflow: hidden;
	font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	overflow: hidden;
	height: 100vh;
	height: 100dvh;
	font-size: 14px;
}

/* Dashboard Layout (legacy support) */
.magictool-dashboard {
	display: flex;
	min-height: 600px;
	background: var(--magictool-bg);
	overflow: hidden;
	font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	overflow: hidden;
	height: 100vh;
	height: 100dvh;
	font-size: 14px;
}

.admin-bar .magictool-wrapper,
.admin-bar .magictool-dashboard {
	height: calc(100vh - 32px);
}

/* Sidebar */
.magictool-sidebar {
	width: 255px;
	background: var(--magictool-bg-card);
	border-right: 1px solid var(--magictool-border);
	padding: 16px;
	display: flex;
	flex-direction: column;
	height: 100vh;
	height: 100dvh;
}

@media (max-width: 768px) {
	.magictool-sidebar {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		z-index: 1000;
		transform: translateX(-100%);
		transition: transform 0.3s ease-in-out;
	}

	.magictool-sidebar.open {
		transform: translateX(0);
	}

	.admin-bar .magictool-sidebar {
		top: 46px;
	}
}

@media (min-width: 769px) {
	/* Mini sidebar layout */
	body.mini-sidebar .magictool-sidebar {
		width: 70px;
		padding: 15px 10px;
	}

	body.mini-sidebar .magictool-sidebar-header {
		justify-content: center;
	}

	body.mini-sidebar .magictool-logo span {
		display: none;
	}

	body.mini-sidebar .magictool-nav-item span {
		display: none;
	}

	body.mini-sidebar .magictool-nav-item {
		justify-content: center;
		padding-inline: 12px;
	}

	body.mini-sidebar .magictool-user-details,
	body.mini-sidebar .magictool-user-chevron {
		display: none;
	}

	body.mini-sidebar .magictool-user-info {
		justify-content: center;
	}

	body.mini-sidebar .magictool-user-dropdown {
		width: 250px;
		left: 70px;
		bottom: 11px;
		right: auto;
	}

	body.mini-sidebar .magictool-main {
		/* ensure main uses remaining space smoothly when sidebar shrinks */
		transition: margin 0.2s ease;
	}

	body.mini-sidebar .magictool-user-menu {
		margin: -16px -10px;
	}

	body.mini-sidebar .magictool-sidebar-header {
		margin: -15px -15px 16px -15px;
	}

	body.mini-sidebar .magictool-nav {
		margin: 0;
	}
}

.admin-bar .magictool-sidebar {
	height: calc(100vh - 32px);
}

.magictool-logo {
	color: var(--magictool-primary);
	font-size: 20px;
	font-weight: 700;
	line-height: 28px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.magictool-logo svg {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	background: var(--magictool-primary);
	padding: 6px;
	border-radius: var(--magictool-radius-sm);
	color: #fff;
}

.magictool-sidebar-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
    padding: 16px;
    margin: -16px -16px 16px -16px;
    border-bottom: 1px solid var(--magictool-border);
}

.magictool-sidebar-close {
	cursor: pointer;
	display: none;
	align-items: center;
	justify-content: center;
}

@media (max-width: 768px) {
	.magictool-sidebar-close {
		display: flex;
	}
}

.magictool-credits-display {
	background: var(--magictool-primary);
	color: white;
	padding: 20px;
	border-radius: var(--magictool-radius);
	text-align: center;
	margin-bottom: 24px;
}

.magictool-credits-value {
	display: block;
	font-size: 36px;
	font-weight: 700;
}

.magictool-credits-text {
	font-size: 14px;
	opacity: 0.9;
}

/* Navigation */
.magictool-nav {
	flex: 1;
	margin: 0 -8px;
}

.magictool-nav-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 12px;
	height: 40px;
	border-radius: var(--magictool-radius-sm);
	color: #09090b;
	text-decoration: none;
	margin-bottom: 4px;
	font-weight: 500;
	line-height: 1;
	transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.magictool-nav-item:hover {
	background: #eff6ff;
	color: var(--magictool-primary);
}

.magictool-nav-item.active {
	background: #eff6ff;
	color: var(--magictool-primary);
	font-weight: 600;
}

.magictool-nav-item svg {
	flex-shrink: 0;
	transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Nav Icon Colors */
.magictool-nav-dashboard:hover svg,
.magictool-nav-dashboard.active svg {
	color: var(--magictool-primary);
}

.magictool-nav-generator:hover svg,
.magictool-nav-generator.active svg {
	color: #f59e0b;
}

.magictool-nav-history:hover svg,
.magictool-nav-history.active svg {
	color: #10b981;
}

.magictool-nav-credits:hover svg,
.magictool-nav-credits.active svg {
	color: #ec4899;
}

.magictool-nav-video:hover svg,
.magictool-nav-video.active svg {
	color: #ff0000;
}

/* User Menu */
.magictool-user-menu {
	position: relative;
	margin: -16px;
	border-top: 1px solid var(--magictool-border);
}

.magictool-user-info {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	cursor: pointer;
	transition: background 0.2s;
	border-radius: var(--magictool-radius-sm);
}

.magictool-user-info:hover {
	background: var(--magictool-bg);
}

.magictool-avatar img,
.magictool-dropdown-avatar img {
	border-radius: 50%;
	width: 40px;
	height: 40px;
	object-fit: cover;
}

.magictool-user-details {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
	line-height: 1.4;
}

.magictool-username {
	font-weight: 600;
	font-size: 14px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.magictool-user-email {
	font-size: 12px;
	color: var(--magictool-text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.magictool-tier {
	font-size: 11px;
	color: var(--magictool-text-muted);
	text-transform: uppercase;
	font-weight: 500;
	padding: 2px 6px;
	background: var(--magictool-bg);
	border-radius: 4px;
	width: fit-content;
	margin-top: 2px;
}

.magictool-tier-starter,
.magictool-tier-pro {
	color: var(--magictool-primary);
	background: rgba(20, 71, 230, 0.1);
}

.magictool-user-chevron {
	color: var(--magictool-text-muted);
	transition: transform 0.2s;
	flex-shrink: 0;
}

.magictool-user-menu.open .magictool-user-chevron {
	transform: rotate(180deg);
}

/* Header alerts */
.magictool-main-header-right {
	display: flex;
	align-items: center;
	gap: 20px;
}

.magictool-alert-wrapper {
	position: relative;
}

.magictool-alert-button {
	position: relative;
	border: none;
	background: transparent;
	cursor: pointer;
	padding: 6px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--magictool-text-muted);
	transition: background 0.15s, color 0.15s;
}

.magictool-alert-button:hover {
	background: var(--magictool-bg);
	color: var(--magictool-primary);
}

.magictool-alert-badge {
	position: absolute;
	top: -5px;
	right: -5px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--magictool-danger);
	color: #fff;
	font-size: 10px;
	line-height: 16px;
	text-align: center;
}

.magictool-alert-dropdown {
	position: absolute;
	right: 0;
	top: calc(100% + 8px);
	width: 320px;
	max-height: 420px;
	background: var(--magictool-bg-card);
	border-radius: var(--magictool-radius);
	border: 1px solid var(--magictool-border);
	box-shadow: var(--magictool-shadow-lg);
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
	z-index: 1100;
}

.magictool-alert-wrapper.open .magictool-alert-dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.magictool-alert-header {
	padding: 10px 14px;
	border-bottom: 1px solid var(--magictool-border);
	font-weight: 600;
	font-size: 14px;
	color: var(--magictool-text);
}

.magictool-alert-list {
	max-height: 360px;
	overflow-y: auto;
}

.magictool-alert-item {
	padding: 10px 14px;
	border-bottom: 1px solid rgba(226, 232, 240, 0.6);
	display: flex;
	flex-direction: column;
	gap: 4px;
	cursor: default;
}

.magictool-alert-item:last-child {
	border-bottom: none;
}

.magictool-alert-title {
	font-size: 13px;
	font-weight: 600;
	color: var(--magictool-text);
}

.magictool-alert-message {
	font-size: 12px;
	color: var(--magictool-text-muted);
}

.magictool-alert-meta {
	font-size: 11px;
	color: var(--magictool-text-muted);
	display: flex;
	justify-content: space-between;
	margin-top: 2px;
}

.magictool-alert-empty {
	padding: 16px 14px;
	text-align: center;
	font-size: 13px;
	color: var(--magictool-text-muted);
}

/* User Dropdown */
.magictool-user-dropdown {
	position: absolute;
	bottom: calc(100% + 8px);
	left: 2%;
	right: 2%;
	background: var(--magictool-bg-card);
	border: 1px solid var(--magictool-border);
	border-radius: var(--magictool-radius);
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: all 0.2s ease;
	z-index: 1000;
	width: 96%;
}

.magictool-user-menu.open .magictool-user-dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.magictool-dropdown-header {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px;
	border-bottom: 1px solid var(--magictool-border);
}

.magictool-dropdown-avatar img {
	border-radius: 50%;
}

.magictool-dropdown-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	line-height: 1.4;
}

.magictool-dropdown-name {
	font-weight: 600;
	font-size: 14px;
	color: var(--magictool-text);
}

.magictool-dropdown-email {
	font-size: 12px;
	color: var(--magictool-text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.magictool-dropdown-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 4px;
}

.magictool-dropdown-info .magictool-tier {
	margin-top: 0;
}

.magictool-dropdown-credits {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	color: var(--magictool-text-muted);
	font-weight: 500;
}

.magictool-dropdown-credits svg {
	color: var(--magictool-primary);
}

.magictool-dropdown-menu {
	padding: 8px 0;
}

.magictool-dropdown-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px;
	color: var(--magictool-text);
	text-decoration: none;
	border-radius: var(--magictool-radius-sm);
	font-size: 14px;
	transition: background 0.15s;
	line-height: 1;
	margin: 0 8px;
}

.magictool-dropdown-item:hover {
	background: var(--magictool-bg);
	color: var(--magictool-text);
}

.magictool-dropdown-item svg {
	color: var(--magictool-text-muted);
	flex-shrink: 0;
}

.magictool-dropdown-divider {
	height: 1px;
	background: var(--magictool-border);
	margin: 8px 0;
}

.magictool-dropdown-logout {
	color: var(--magictool-danger);
}

.magictool-dropdown-logout:hover {
	background: rgba(239, 68, 68, 0.1);
	color: var(--magictool-danger);
}

.magictool-dropdown-logout svg {
	color: var(--magictool-danger);
}

/* Main Content */
.magictool-main {
	flex: 1;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
}

.magictool-content-header {
	margin-bottom: 24px;
	text-align: center;
}

.magictool-content-header h1 {
	margin: 0;
	font-size: 36px;
	font-weight: 700;
	color: var(--magictool-primary);
	text-transform: capitalize;
}

/* Stats Grid */
.magictool-stats-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 16px;
	margin-bottom: 32px;
}

.magictool-stat-card {
	background: var(--magictool-bg-card);
	border: 1px solid var(--magictool-border);
	border-radius: var(--magictool-radius);
	padding: 24px;
	text-align: center;
}

.magictool-stat-icon {
	width: 48px;
	height: 48px;
	margin: 0 auto 12px;
	background: rgba(20, 71, 230, 0.1);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--magictool-primary);
}

.magictool-stat-value {
	font-size: 32px;
	font-weight: 700;
	color: var(--magictool-text);
}

.magictool-stat-label {
	font-size: 14px;
	color: var(--magictool-text-muted);
}

/* Daily Limit */
.magictool-daily-limit {
	background: var(--magictool-bg-card);
	border: 1px solid var(--magictool-border);
	border-radius: var(--magictool-radius);
	padding: 20px;
	margin-bottom: 32px;
}

.magictool-limit-label {
	font-weight: 600;
	margin-bottom: 12px;
}

.magictool-limit-bar {
	height: 8px;
	background: var(--magictool-bg);
	border-radius: 4px;
	overflow: hidden;
}

.magictool-limit-fill {
	height: 100%;
	background: var(--magictool-primary);
	border-radius: 4px;
	transition: width 0.3s;
}

.magictool-limit-text {
	margin-top: 8px;
	font-size: 14px;
	color: var(--magictool-text-muted);
}

/* Section Header */
.magictool-section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16px;
}

.magictool-section-header h2,
.magictool-section-header h3 {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 8px;
}

.magictool-section-header h2 svg,
.magictool-section-header h3 svg {
	width: 20px;
	height: 20px;
	color: var(--magictool-primary);
}

.magictool-section-count {
	font-size: 14px;
	font-weight: 400;
	color: var(--magictool-text-muted);
}

/* History Sections */
.magictool-history-section {
	margin-bottom: 48px;
}

.magictool-history-section:last-child {
	margin-bottom: 0;
}

.magictool-view-all {
	color: var(--magictool-primary);
	text-decoration: none;
	font-size: 14px;
}

/* Gallery */
.magictool-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 16px;
}

.magictool-gallery-large {
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.magictool-gallery-item {
	position: relative;
	aspect-ratio: 1;
	border-radius: var(--magictool-radius);
	overflow: hidden;
	background: var(--magictool-bg);
}

.magictool-gallery-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s;
}

.magictool-gallery-item:hover img {
	transform: scale(1.05);
}

.magictool-gallery-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	opacity: 0;
	transition: opacity 0.3s;
}

.magictool-gallery-item:hover .magictool-gallery-overlay {
	opacity: 1;
}

/* Buttons */
.magictool-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 24px;
	border: none;
	border-radius: var(--magictool-radius-sm);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s;
	text-decoration: none;
}

.magictool-btn-primary {
	background: var(--magictool-primary);
	color: white;
}

.magictool-btn-primary:hover {
	background: var(--magictool-primary-hover);
	color: white;
}

.magictool-btn-secondary {
	background: var(--magictool-bg);
	color: var(--magictool-text);
	border: 1px solid var(--magictool-border);
}

.magictool-btn-secondary:hover {
	background: var(--magictool-border);
}

.magictool-btn-sm {
	padding: 7px 14px;
	font-size: 13px;
	line-height: 20px;
}

.magictool-btn-large {
	padding: 16px 32px;
	font-size: 16px;
}

.magictool-btn-icon {
	width: 30px;
	height: 30px;
	padding: 0;
	border: none;
	background: rgba(255, 255, 255, 0.9);
	color: var(--magictool-text);
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s;
}

.magictool-history-actions .magictool-btn-icon {
	width: 24px;
	height: 24px;
}

.magictool-btn-icon svg {
	width: 14px;
	height: 14px;
}

.magictool-history-actions .magictool-btn-icon svg {
	width: 12px;
	height: 12px;
}

.magictool-btn-icon:hover {
	background: white;
	color: var(--magictool-primary);
}

/* Generation Mode Tabs */
.magictool-tabs {
	display: flex;
	border-radius: var(--magictool-radius);
	overflow: hidden;
	box-shadow: 0 1px 3px rgb(0 0 0 / 8%);
}

.magictool-tab {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 13px 16px;
	border: none;
	background: #f9fafb;
	color: var(--magictool-text-muted);
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s;
	line-height: 1;
	flex: 1 1 100%;
}

.magictool-tab:last-child {
	border-bottom: none;
}

.magictool-tab:hover {
	color: #111827;
}

.magictool-tab.active {
	background: linear-gradient(to right, #9333ea, #2563eb);
	color: #fff;
	box-shadow: var(--magictool-shadow);
}

.magictool-tab svg {
	flex-shrink: 0;
	color: #9333ea;
}

.magictool-tab.active svg {
	color: #fff;
}

/* Image Upload Section */
.magictool-upload-area {
	border: 2px dashed var(--magictool-border);
	border-radius: var(--magictool-radius);
	padding: 40px 20px;
	text-align: center;
	cursor: pointer;
	transition: all 0.2s;
	background: var(--magictool-bg);
}

.magictool-upload-area:hover,
.magictool-upload-area.dragover {
	border-color: var(--magictool-primary);
	background: rgba(20, 71, 230, 0.05);
}

.magictool-upload-area.uploading {
	pointer-events: none;
	opacity: 0.7;
}

.magictool-upload-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	color: var(--magictool-text-muted);
}

.magictool-upload-placeholder svg {
	color: var(--magictool-primary);
	opacity: 0.7;
}

.magictool-upload-placeholder p {
	margin: 0;
	font-weight: 500;
	color: var(--magictool-text);
}

.magictool-upload-hint {
	font-size: 12px;
	color: var(--magictool-text-muted);
}

.magictool-uploaded-images {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 16px;
}

.magictool-uploaded-image {
	position: relative;
	width: 100px;
	height: 100px;
	border-radius: var(--magictool-radius-sm);
	overflow: hidden;
	background: var(--magictool-bg);
}

.magictool-uploaded-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Remove button: image generator + all video upload areas (I2V, R2V, V2V, Motion Control) */
.magictool-uploaded-image .magictool-remove-image,
.magictool-uploaded-image .magictool-remove-video-image,
.magictool-uploaded-image .magictool-remove-ref-image,
.magictool-uploaded-image .magictool-remove-v2v-image,
.magictool-uploaded-image .magictool-remove-motion-image {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 24px;
	height: 24px;
	border: none;
	background: rgba(0, 0, 0, 0.6);
	color: white;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.2s;
}

.magictool-uploaded-image:hover .magictool-remove-image,
.magictool-uploaded-image:hover .magictool-remove-video-image,
.magictool-uploaded-image:hover .magictool-remove-ref-image,
.magictool-uploaded-image:hover .magictool-remove-v2v-image,
.magictool-uploaded-image:hover .magictool-remove-motion-image {
	opacity: 1;
}

.magictool-uploaded-image .magictool-remove-image:hover,
.magictool-uploaded-image .magictool-remove-video-image:hover,
.magictool-uploaded-image .magictool-remove-ref-image:hover,
.magictool-uploaded-image .magictool-remove-v2v-image:hover,
.magictool-uploaded-image .magictool-remove-motion-image:hover {
	background: var(--magictool-danger);
}

.magictool-image-upload-section.has-images .magictool-upload-area {
	padding: 20px;
}

.magictool-image-upload-section.has-images .magictool-upload-placeholder svg {
	width: 24px;
	height: 24px;
}

.magictool-image-upload-section.has-images .magictool-upload-placeholder p {
	font-size: 13px;
}

.magictool-image-upload-section.has-images .magictool-upload-hint {
	display: none;
}

/* Uploaded video previews (R2V, V2V, Motion) */
.magictool-uploaded-videos {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 10px;
}

.magictool-uploaded-video-item {
	position: relative;
	width: 80px;
	height: 80px;
	border-radius: var(--magictool-radius-sm);
	overflow: hidden;
	background: var(--magictool-border);
}

.magictool-uploaded-video-item video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.magictool-uploaded-video-item .magictool-uploaded-video-name {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 4px 8px;
	font-size: 11px;
	color: #fff;
	background: linear-gradient(transparent, rgba(0,0,0,0.7));
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.magictool-uploaded-video-item .magictool-remove-ref-video,
.magictool-uploaded-video-item .magictool-remove-v2v-video,
.magictool-uploaded-video-item .magictool-remove-motion-video-btn {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 24px;
	height: 24px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(0,0,0,0.6);
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0.9;
}

.magictool-uploaded-video-item:hover .magictool-remove-ref-video,
.magictool-uploaded-video-item:hover .magictool-remove-v2v-video,
.magictool-uploaded-video-item:hover .magictool-remove-motion-video-btn {
	opacity: 1;
}

.magictool-uploaded-videos-single .magictool-uploaded-video-item {
	width: 100px;
	height: 100px;
}

/* Form */
.magictool-form {
	background: var(--magictool-bg-card);
	border: 1px solid var(--magictool-border);
	border-radius: var(--magictool-radius);
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.magictool-required {
	color: var(--magictool-danger);
	font-weight: 600;
	margin-left: 2px;
	color: var(--magictool-text);
}

.magictool-switch-label {
	display: flex !important;
	position: relative;
}

.magictool-form-group textarea,
.magictool-form-group select,
.magictool-form-group input[type="text"],
.magictool-form-group input[type="email"],
.magictool-form-group input[type="password"],
.magictool-form-group input[type="url"],
.magictool-form-group input[type="tel"],
.magictool-form-group input[type="number"],
.magictool-form-group input[type="search"],
.magictool-form-group input[type="submit"] {
	width: 100%;
	padding: 12px 16px;
	border: 1px solid var(--magictool-border);
	border-radius: var(--magictool-radius-sm);
	font-size: 14px;
	line-height: 1.143;
	transition: border-color 0.2s;
}

.magictool-form-group textarea:focus,
.magictool-form-group select:focus,
.magictool-form-group input:focus {
	outline: none;
	border-color: var(--magictool-primary);
}

.magictool-form-group textarea {
	resize: vertical;
	min-height: 100px;
}

.magictool-settings-row {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(3, 1fr);
}

#magictool-video-settings-row {
	grid-template-columns: repeat(2, 1fr);
}

.magictool-model-fixed-name {
	margin: 0;
	padding: 8px 12px 0 0;
	font-size: 14px;
	font-weight: 500;
	color: var(--magictool-text, #1f2937);
}

#magictool-video-quick-options {
	grid-template-columns: 1fr;
}

#magictool-video-advanced-content .magictool-settings-row {
	grid-template-columns: 1fr;
}

.magictool-settings-row > div {
	flex: 1 1 auto;
	min-width: 0;
}

/* Switch Row - Compact layout for toggle switches */
.magictool-switch-row {
	gap: 20px;
	margin-top: 5px;
}

.magictool-switch-row .magictool-form-group {
	flex: 0 0 auto;
	margin: 0;
}

.magictool-switch-label {
	display: flex;
	align-items: center;
	gap: 12px;
	cursor: pointer;
	font-size: 14px;
	margin: 0;
	user-select: none;
}

.magictool-switch-label input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	pointer-events: none;
}

.magictool-switch {
	position: relative;
	display: inline-block;
	width: 44px;
	height: 24px;
	flex-shrink: 0;
}

.magictool-switch-slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #cbd5e1;
	transition: 0.3s;
	border-radius: 24px;
}

.magictool-switch-slider:before {
	position: absolute;
	content: "";
	height: 18px;
	width: 18px;
	left: 3px;
	bottom: 3px;
	background-color: white;
	transition: 0.3s;
	border-radius: 50%;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.magictool-switch-label input:checked + .magictool-switch .magictool-switch-slider {
	background-color: var(--magictool-primary);
}

.magictool-switch-label input:checked + .magictool-switch .magictool-switch-slider:before {
	transform: translateX(20px);
}

.magictool-switch-label input:focus + .magictool-switch .magictool-switch-slider {
	box-shadow: 0 0 0 3px rgba(20, 71, 230, 0.1);
}

.magictool-switch-label:hover .magictool-switch-slider {
	background-color: #94a3b8;
}

.magictool-switch-label input:checked:hover + .magictool-switch .magictool-switch-slider {
	background-color: var(--magictool-primary-hover);
}

.magictool-switch-text {
	font-weight: 500;
	color: var(--magictool-text);
}

/* Advanced Settings Collapsible */
.magictool-advanced-settings {
	margin-top: 10px;
	border: 1px solid var(--magictool-border);
	border-radius: var(--magictool-radius-sm);
	overflow: hidden;
	background: var(--magictool-bg-card);
}

.magictool-advanced-toggle {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	background: var(--magictool-bg);
	border: none;
	cursor: pointer;
	font-size: 14px;
	font-weight: 500;
	color: var(--magictool-text);
	transition: background-color 0.2s;
}

.magictool-advanced-toggle:hover {
	background: var(--magictool-border);
}

.magictool-advanced-toggle .magictool-toggle-icon {
	transition: transform 0.2s;
	flex-shrink: 0;
}

.magictool-advanced-settings.active .magictool-toggle-icon {
	transform: rotate(180deg);
}

.magictool-advanced-content {
	padding: 16px;
	border-top: 1px solid var(--magictool-border);
}

.magictool-advanced-content .magictool-settings-row {
	margin-bottom: 16px;
}

.magictool-advanced-content .magictool-settings-row:last-child {
	margin-bottom: 0;
}

/* Choices.js Custom Styling */
.magictool-choices {
	margin-bottom: 0;
}

.magictool-choices .choices__inner {
	background-color: var(--magictool-bg-card);
	border: 1px solid var(--magictool-border);
	border-radius: var(--magictool-radius-sm);
	padding: 8px 12px;
	min-height: auto;
	font-size: 14px;
}

.magictool-choices .choices__inner:focus,
.magictool-choices.is-focused .choices__inner {
	border-color: var(--magictool-primary);
	box-shadow: 0 0 0 3px rgba(20, 71, 230, 0.1);
}

.magictool-choices .choices__list--single,
.magictool-choices .choices__list--single .choices__item {
	padding: 0 !important;
}

.magictool-choices .choices__list--dropdown {
	border: 1px solid var(--magictool-border) !important;
	border-radius: var(--magictool-radius-sm) !important;
	box-shadow: var(--magictool-shadow-lg);
	margin-top: 4px;
	background: var(--magictool-bg-card);
	z-index: 1000;
}

.magictool-choices .choices__list--dropdown .choices__item--selectable.is-highlighted {
	background-color: var(--magictool-primary);
	color: white;
}

.magictool-choices .choices__group {
	padding: 8px 12px;
	font-weight: 600;
	font-size: 12px;
	text-transform: uppercase;
	color: var(--magictool-text-muted);
	border-bottom: 1px solid var(--magictool-border);
}

.magictool-choices .choices__item--choice {
	line-height: 1.143;
	padding: 13px 16px !important;
	font-size: 14px;
}

.magictool-choices .choices__input {
	background-color: transparent;
	font-size: 14px;
	margin-bottom: 0;
	padding: 8px;
	padding: 13px 16px 12px !important;
	border: none !important;
	border-bottom: 1px solid var(--magictool-bg) !important;
	border-radius: 0 !important;
}

.magictool-choices .choices__input--cloned {
	padding: 8px;
}

.magictool-choices .choices__placeholder {
	opacity: 0.5;
	color: var(--magictool-text-muted);
}

#magictool-resolution {
	min-width: 140px;
}

.magictool-prompt-hints {
	display: flex;
	justify-content: flex-end;
	margin-top: 8px;
}

.magictool-char-count {
	font-size: 12px;
	color: var(--magictool-text-muted);
}

/* Cost Preview */
.magictool-cost-preview {
	display: flex;
	justify-content: space-between;
	padding: 16px 20px;
	background: var(--magictool-bg);
	border-radius: var(--magictool-radius-sm);
}

.magictool-cost-label,
.magictool-balance-label {
	color: var(--magictool-text-muted);
}

.magictool-cost-value,
.magictool-balance-value {
	font-weight: 700;
	color: var(--magictool-primary);
	font-size: 18px;
	margin: 0 4px;
}

/* Loading */
.magictool-loading {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.7);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
}

.magictool-loading-content {
	text-align: center;
	color: white;
}

.magictool-spinner {
	width: 48px;
	height: 48px;
	border: 4px solid rgba(255, 255, 255, 0.3);
	border-top-color: white;
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
	margin: 0 auto 16px;
}

@keyframes spin {
	to { transform: rotate(360deg); }
}

.magictool-loading-hint {
	font-size: 14px;
	opacity: 0.7;
}

/* Results */
.magictool-results {
	margin-top: 32px;
}

.magictool-results-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16px;
}

.magictool-results-header h2 {
	margin: 0;
}

/* Error Message */
.magictool-error-message {
	background: rgba(239, 68, 68, 0.1);
	border: 1px solid var(--magictool-danger);
	color: var(--magictool-danger);
	padding: 12px 16px;
	border-radius: var(--magictool-radius-sm);
	margin-top: 16px;
}

/* Empty State */
.magictool-empty-state {
	text-align: center;
	padding: 60px 20px;
	color: var(--magictool-text-muted);
}

.magictool-empty-state svg {
	margin-bottom: 16px;
	opacity: 0.5;
}

.magictool-empty-state h3 {
	margin: 0 0 8px;
	color: var(--magictool-text);
}

.magictool-empty-state p {
	margin: 0 0 24px;
	font-size: 15px;
}

/* History Layout (legacy support) */
.magictool-history {
	display: flex;
	min-height: 600px;
	background: var(--magictool-bg);
	overflow: hidden;
}

/* Generator Layout (legacy support) */
.magictool-generator {
	display: flex;
	min-height: 600px;
	background: var(--magictool-bg);
	overflow: hidden;
}

/* History */
.magictool-history-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 20px;
}

.magictool-history-card {
	background: var(--magictool-bg-card);
	border: 1px solid var(--magictool-border);
	border-radius: var(--magictool-radius);
	overflow: hidden;
	transition: box-shadow 0.2s;
	position: relative;
}

.magictool-history-card:hover {
	box-shadow: var(--magictool-shadow-lg);
}

.magictool-history-images {
	aspect-ratio: 16/9;
	background: var(--magictool-bg);
}

.magictool-history-videos {
	aspect-ratio: 16/9;
	background: var(--magictool-bg);
	position: relative;
	overflow: hidden;
	border-radius: var(--magictool-radius-sm);
}

.magictool-history-video-thumb {
	width: 100%;
	height: 100%;
	position: relative;
	cursor: pointer;
}

.magictool-history-video-thumb video {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.magictool-video-play-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.3);
	opacity: 0;
	transition: opacity 0.2s;
}

.magictool-history-video-thumb:hover .magictool-video-play-overlay {
	opacity: 1;
}

.magictool-video-play-overlay svg {
	color: white;
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* Video placeholder skeleton inside history card (Recent Video Generations) */
.magictool-history-video-thumb.magictool-skeleton {
	min-height: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.magictool-history-video-thumb.magictool-skeleton .magictool-skeleton-icon,
.magictool-history-video-thumb.magictool-skeleton .magictool-skeleton-text {
	position: relative;
	z-index: 1;
}

.magictool-history-thumbs {
	display: grid;
	height: 100%;
}

.magictool-thumbs-1 { grid-template-columns: 1fr; }
.magictool-thumbs-2 { grid-template-columns: 1fr 1fr; }
.magictool-thumbs-3 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.magictool-thumbs-3 .magictool-thumb:first-child { grid-row: span 2; }
.magictool-thumbs-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }

.magictool-thumb {
	overflow: hidden;
}

.magictool-thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.magictool-history-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	color: var(--magictool-text-muted);
}

.magictool-history-content {
	padding: 16px;
}

.magictool-history-prompt {
	margin: 0 0 12px;
	font-size: 14px;
	line-height: 1.5;
}

.magictool-history-meta {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	font-size: 12px;
	color: var(--magictool-text-muted);
}

.magictool-history-meta span {
	display: flex;
	align-items: center;
	gap: 4px;
}

.magictool-history-model {
	max-width: 120px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.magictool-history-actions {
	display: flex;
	gap: 4px;
	position: absolute;
	top: 10px;
	right: 10px;
	opacity: 0;
	visibility: hidden;
	transition: all .3s ease-in-out;
}

.magictool-history-card:hover .magictool-history-actions {
	opacity: 1;
	visibility: visible;
}

.magictool-history-actions .magictool-btn-icon {
	background: var(--magictool-bg);
}

/* Status Badges */
.magictool-status-completed { color: var(--magictool-success); }
.magictool-status-pending { color: var(--magictool-warning); }
.magictool-status-processing { color: var(--magictool-primary); }
.magictool-status-failed { color: var(--magictool-danger); }

.magictool-status-icon-spin {
	animation: magictool-spin 1s linear infinite;
}
@keyframes magictool-spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

/* Pagination */
.magictool-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 16px;
	margin-top: 32px;
}

.magictool-pagination-info {
	color: var(--magictool-text-muted);
	font-size: 14px;
}

/* Modal */
.magictool-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
}

.magictool-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.8);
}

.magictool-modal-content {
	position: relative;
	background: var(--magictool-bg-card);
	border-radius: var(--magictool-radius);
	max-width: 90vw;
	max-height: 90vh;
	overflow: hidden;
}

.magictool-modal-close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 40px;
	height: 40px;
	border: none;
	background: rgba(0, 0, 0, 0.5);
	color: white;
	font-size: 24px;
	border-radius: 50%;
	cursor: pointer;
	z-index: 10;
}

/* Image Viewer */
.magictool-image-viewer {
	padding: 20px;
}

.magictool-viewer-main {
	text-align: center;
	margin-bottom: 16px;
}

.magictool-viewer-main img {
	max-width: 100%;
	max-height: 60vh;
	border-radius: var(--magictool-radius-sm);
}

.magictool-viewer-thumbs {
	display: flex;
	gap: 8px;
	justify-content: center;
	margin-bottom: 16px;
}

.magictool-viewer-thumbs img {
	width: 60px;
	height: 60px;
	object-fit: cover;
	border-radius: var(--magictool-radius-sm);
	cursor: pointer;
	opacity: 0.6;
	transition: opacity 0.2s;
}

.magictool-viewer-thumbs img:hover,
.magictool-viewer-thumbs img.active {
	opacity: 1;
}

.magictool-viewer-actions {
	text-align: center;
	margin-bottom: 16px;
}

.magictool-viewer-prompt {
	background: var(--magictool-bg);
	padding: 12px;
	border-radius: var(--magictool-radius-sm);
	font-size: 13px;
	color: var(--magictool-text-muted);
	max-height: 100px;
	overflow-y: auto;
}

/* Credits Widget */
.magictool-credits-widget {
	background: var(--magictool-bg-card);
	border: 1px solid var(--magictool-border);
	border-radius: var(--magictool-radius);
	padding: 24px;
}

.magictool-credits-balance {
	text-align: center;
	margin-bottom: 20px;
}

.magictool-credits-number {
	display: block;
	font-size: 48px;
	font-weight: 700;
	color: var(--magictool-primary);
}

.magictool-credits-label {
	color: var(--magictool-text-muted);
}

.magictool-credits-stats {
	display: flex;
	justify-content: center;
	gap: 40px;
	margin-bottom: 20px;
}

.magictool-stat {
	text-align: center;
}

.magictool-stat-value {
	display: block;
	font-size: 20px;
	font-weight: 600;
}

.magictool-stat-label {
	font-size: 12px;
	color: var(--magictool-text-muted);
}

/* Credits History */
.magictool-credits-history h4 {
	margin: 0 0 12px;
	font-size: 14px;
}

.magictool-credits-history ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.magictool-transaction {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 0;
	border-bottom: 1px solid var(--magictool-border);
	font-size: 14px;
}

.magictool-transaction-amount {
	font-weight: 600;
}

.magictool-transaction-add .magictool-transaction-amount,
.magictool-transaction-refund .magictool-transaction-amount {
	color: var(--magictool-success);
}

.magictool-transaction-deduct .magictool-transaction-amount {
	color: var(--magictool-danger);
}

.magictool-transaction-reason {
	flex: 1;
	margin: 0 12px;
	color: var(--magictool-text-muted);
}

.magictool-transaction-date {
	font-size: 12px;
	color: var(--magictool-text-muted);
}

/* Credits Tab */
.magictool-credits-overview {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	margin-bottom: 32px;
}

.magictool-credits-balance-card {
	background: var(--magictool-primary);
	color: white;
	padding: 40px;
	border-radius: var(--magictool-radius);
	text-align: center;
}

.magictool-balance-amount {
	font-size: 56px;
	font-weight: 700;
}

.magictool-balance-label {
	opacity: 0.9;
}

.magictool-credits-balance-card .magictool-balance-label {
	color: #fff;
}

.magictool-credits-info {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 20px;
}

.magictool-credit-stat {
	background: var(--magictool-bg-card);
	border: 1px solid var(--magictool-border);
	border-radius: var(--magictool-radius);
	padding: 20px;
}

.magictool-credit-stat-value {
	display: block;
	font-size: 28px;
	font-weight: 700;
	color: var(--magictool-text);
}

.magictool-credit-stat-label {
	font-size: 14px;
	color: var(--magictool-text-muted);
}

/* Pricing */
.magictool-credit-pricing {
	background: var(--magictool-bg-card);
	border: 1px solid var(--magictool-border);
	border-radius: var(--magictool-radius);
	padding: 24px;
	margin-bottom: 32px;
}

.magictool-credit-pricing h3 {
	margin: 0 0 16px;
}

.magictool-pricing-table {
	display: flex;
	gap: 16px;
}

.magictool-pricing-item {
	flex: 1;
	background: var(--magictool-bg);
	padding: 16px;
	border-radius: var(--magictool-radius-sm);
	text-align: center;
}

.magictool-pricing-resolution {
	display: block;
	font-size: 20px;
	font-weight: 700;
	color: var(--magictool-primary);
	margin-bottom: 4px;
}

.magictool-pricing-cost {
	font-size: 14px;
	color: var(--magictool-text-muted);
}

/* Transactions Table */
.magictool-transactions {
	background: var(--magictool-bg-card);
	border: 1px solid var(--magictool-border);
	border-radius: var(--magictool-radius);
	padding: 24px;
}

.magictool-transactions h3 {
	margin: 0 0 16px;
}

.magictool-transactions-table {
	width: 100%;
	border-collapse: collapse;
}

.magictool-transactions-table th,
.magictool-transactions-table td {
	padding: 12px;
	text-align: left;
	border-bottom: 1px solid var(--magictool-border);
}

.magictool-transactions-table th {
	font-weight: 600;
	color: var(--magictool-text-muted);
	font-size: 12px;
	text-transform: uppercase;
}

.magictool-tx-type {
	display: inline-block;
	padding: 4px 8px;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
}

.magictool-tx-add { background: rgba(16, 185, 129, 0.1); color: var(--magictool-success); }
.magictool-tx-deduct { background: rgba(239, 68, 68, 0.1); color: var(--magictool-danger); }
.magictool-tx-refund { background: rgba(20, 71, 230, 0.1); color: var(--magictool-primary); }

.magictool-tx-amount-add,
.magictool-tx-amount-refund { color: var(--magictool-success); }
.magictool-tx-amount-deduct { color: var(--magictool-danger); }

/* Auth (Login / Register) */
.magictool-auth-wrapper {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: linear-gradient(135deg, var(--magictool-bg) 0%, var(--magictool-bg-card) 100%);
}

.magictool-auth-card {
	width: 100%;
	max-width: 420px;
	background: var(--magictool-bg-card);
	border: 1px solid var(--magictool-border);
	border-radius: 16px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
	padding: 40px 32px;
}

.magictool-auth-header {
	text-align: center;
	margin-bottom: 28px;
}

.magictool-auth-logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin-bottom: 16px;
	color: var(--magictool-primary);
	background: rgba(var(--magictool-primary-rgb, 99, 102, 241), 0.1);
	border-radius: 16px;
}

.magictool-auth-title {
	margin: 0 0 8px;
	font-size: 24px;
	font-weight: 700;
	color: var(--magictool-text);
}

.magictool-auth-subtitle {
	margin: 0;
	font-size: 14px;
	color: var(--magictool-text-muted);
}

.magictool-auth-error {
	margin-bottom: 20px;
	padding: 12px 16px;
	font-size: 13px;
	color: var(--magictool-danger, #dc2626);
	background: rgba(220, 38, 38, 0.08);
	border-radius: 10px;
	border: 1px solid rgba(220, 38, 38, 0.2);
}

.magictool-auth-tabs {
	display: flex;
	gap: 4px;
	margin-bottom: 24px;
	padding: 4px;
	background: var(--magictool-bg);
	border-radius: 12px;
	text-align: center;
}

.magictool-auth-tab {
	flex: 1;
	padding: 10px 16px;
	font-size: 14px;
	font-weight: 500;
	color: var(--magictool-text-muted);
	background: transparent;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	transition: color 0.2s, background 0.2s;
}

.magictool-auth-tab:hover {
	color: var(--magictool-text);
}

.magictool-auth-tab.magictool-auth-tab-active {
	color: var(--magictool-text);
	background: var(--magictool-bg-card);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.magictool-auth-panels .magictool-auth-field,
.magictool-auth-panels p.login-username,
.magictool-auth-panels p.login-password,
.magictool-auth-panels p.login-remember,
.magictool-auth-panels p.login-submit {
	margin: 0 0 16px;
}

.magictool-auth-panels label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 500;
	color: var(--magictool-text);
}

.magictool-auth-panels .input,
.magictool-auth-panels input[type="text"],
.magictool-auth-panels input[type="email"],
.magictool-auth-panels input[type="password"] {
	width: 100%;
	padding: 12px 14px;
	font-size: 14px;
	line-height: 1.143;
	color: var(--magictool-text);
	background: var(--magictool-bg);
	border: 1px solid var(--magictool-border);
	border-radius: 10px;
	box-sizing: border-box;
	transition: border-color 0.2s;
}

.magictool-auth-panels .input:focus,
.magictool-auth-panels input:focus {
	outline: none;
	border-color: var(--magictool-primary);
}

.magictool-auth-panels p.login-submit,
.magictool-auth-submit {
	margin-top: 20px;
	margin-bottom: 0;
}

.magictool-auth-panels #magictool-wp-submit,
.magictool-auth-panels .magictool-btn-block {
	width: 100%;
	padding: 12px 20px;
	font-size: 15px;
	font-weight: 600;
	border-radius: 10px;
	text-align: center;
	line-height: 20px;
}

.magictool-auth-panels #magictool-wp-submit {
	display: block;
	appearance: none;
	box-sizing: border-box;
	margin: 0;
	background: var(--magictool-primary);
	color: #fff;
	border: none;
	cursor: pointer;
	transition: background 0.2s, transform 0.05s;
	font-family: inherit;
}

.magictool-auth-panels #magictool-wp-submit:hover {
	background: var(--magictool-primary-hover);
}

.magictool-auth-panels #magictool-wp-submit:active {
	transform: scale(0.98);
}

.magictool-auth-panels #magictool-wp-submit:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(var(--magictool-primary-rgb, 99, 102, 241), 0.25);
}

.magictool-auth-lost-password {
	margin-top: 12px;
	margin-bottom: 0;
	text-align: center;
	font-size: 14px;
}

.magictool-auth-lost-password a {
	color: var(--magictool-primary);
	text-decoration: none;
}

.magictool-auth-lost-password a:hover {
	text-decoration: underline;
}

.magictool-auth-divider {
	margin: 24px 0 20px;
	text-align: center;
	position: relative;
}

.magictool-auth-divider::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 1px;
	background: var(--magictool-border);
}

.magictool-auth-divider span {
	position: relative;
	padding: 0 12px;
	font-size: 13px;
	color: var(--magictool-text-muted);
	background: var(--magictool-bg-card);
}

.magictool-auth-social {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}

.magictool-auth-social-btn {
	display: flex;
	flex-grow: 1;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 10px 20px;
	font-size: 14px;
	line-height: 1;
	font-weight: 500;
	color: var(--magictool-text);
	background: var(--magictool-bg);
	border: 1px solid var(--magictool-border);
	border-radius: 10px;
	text-decoration: none;
	transition: background 0.2s, border-color 0.2s;
}

.magictool-auth-social-btn:hover {
	background: var(--magictool-bg-card);
	border-color: var(--magictool-primary);
}

.magictool-auth-social-google {
	color: #1f1f1f;
}

.magictool-auth-social-github {
	color: var(--magictool-text);
}

/* Legacy login-required (fallback) */
.magictool-login-required {
	text-align: center;
	padding: 60px 20px;
	background: var(--magictool-bg-card);
	border: 1px solid var(--magictool-border);
	border-radius: var(--magictool-radius);
}

.magictool-login-icon {
	color: var(--magictool-primary);
	margin-bottom: 20px;
}

.magictool-login-required h3 {
	margin: 0 0 12px;
	font-size: 24px;
}

.magictool-login-required > p {
	margin: 0 0 24px;
	color: var(--magictool-text-muted);
}

.magictool-register-link {
	margin-top: 16px;
	font-size: 14px;
	color: var(--magictool-text-muted);
}

.magictool-register-link a {
	color: var(--magictool-primary);
}

/* Credits Badge */
.magictool-credits-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	background: var(--magictool-bg);
	border-radius: 20px;
	font-size: 14px;
	color: var(--magictool-text);
}

.magictool-credits-badge svg {
	color: var(--magictool-primary);
}

@media (max-width: 782px) {
	.admin-bar .magictool-wrapper,
	.admin-bar .magictool-dashboard,
	.admin-bar .magictool-sidebar {
		height: calc(100vh - 46px);
	}
}

/* Responsive */
@media (max-width: 768px) {
	.magictool-dashboard {
		flex-direction: column;
	}

	.magictool-nav-item {
		white-space: nowrap;
	}

	.magictool-credits-overview {
		grid-template-columns: 1fr;
	}

	.magictool-history-grid {
		grid-template-columns: 1fr;
	}

	.magictool-pricing-table {
		flex-direction: column;
	}
}

/* ==========================================================================
	Skeleton Loading Styles
	========================================================================== */

.magictool-skeleton-item {
	position: relative;
	overflow: hidden;
}

.magictool-skeleton {
	position: relative;
	width: 100%;
	height: 100%;
	min-height: 200px;
	background: linear-gradient(135deg, #f0f0f0 0%, #e0e0e0 100%);
	border-radius: var(--magictool-radius-sm);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	overflow: hidden;
}

.magictool-skeleton-shimmer {
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(
		90deg,
		transparent 0%,
		rgba(255, 255, 255, 0.4) 50%,
		transparent 100%
	);
	animation: magictool-shimmer 1.5s infinite;
}

@keyframes magictool-shimmer {
	0% {
		left: -100%;
	}
	100% {
		left: 100%;
	}
}

.magictool-skeleton-icon {
	color: #a0a0a0;
	animation: magictool-pulse 2s ease-in-out infinite;
}

.magictool-skeleton-icon svg {
	opacity: 0.5;
}

@keyframes magictool-pulse {
	0%, 100% {
		opacity: 1;
		transform: scale(1);
	}
	50% {
		opacity: 0.6;
		transform: scale(0.95);
	}
}

.magictool-skeleton-text {
	font-size: 13px;
	color: #888;
	font-weight: 500;
}

/* Video placeholder in Recent Video Generations */
.magictool-video-skeleton-item .magictool-skeleton {
	min-height: 180px;
	aspect-ratio: 16 / 9;
}

/* New item animation */
.magictool-new-item {
	animation: magictool-fadeIn 0.4s ease-out;
}

@keyframes magictool-fadeIn {
	from {
		opacity: 0;
		transform: scale(0.95);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

/* Empty state */
.magictool-empty-state {
	text-align: center;
	padding: 60px 20px;
	color: var(--magictool-text-muted);
}

.magictool-empty-state svg {
	margin-bottom: 16px;
	opacity: 0.4;
}

/* Toast notification */
.magictool-toast {
	position: fixed;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%) translateY(20px);
	background: var(--magictool-text);
	color: white;
	padding: 12px 24px;
	border-radius: var(--magictool-radius-sm);
	font-size: 14px;
	font-weight: 500;
	opacity: 0;
	transition: all 0.3s ease;
	z-index: 99999;
	box-shadow: var(--magictool-shadow-lg);
}

.magictool-toast.show {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

/* Gallery improvements */
.magictool-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 16px;
}

.magictool-gallery-item {
	position: relative;
	aspect-ratio: 1;
	border-radius: var(--magictool-radius-sm);
	overflow: hidden;
	background: var(--magictool-bg);
}

.magictool-gallery-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Section styling */
.magictool-recent-section {
	margin-top: 40px;
	padding-top: 32px;
	border-top: 1px solid var(--magictool-border);
}

.magictool-recent-section .magictool-section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
}

.magictool-recent-section .magictool-section-header h3 {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	color: var(--magictool-text);
}

.magictool-dashboard-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 16px;
}

.magictool-dashboard-video-grid {
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 16px;
}

.magictool-recent-video-section .magictool-history-prompt {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	word-break: break-word;
}

.magictool-empty-state-compact {
	padding: 24px 20px;
	text-align: center;
}

.magictool-empty-state-compact svg {
	color: var(--magictool-text-muted);
	margin-bottom: 12px;
}

.magictool-empty-state-compact p {
	margin: 0 0 16px;
	font-size: 14px;
	color: var(--magictool-text-muted);
}

/* Loading state for button */
.magictool-btn.loading {
	opacity: 0.7;
	pointer-events: none;
}

/* ==========================================================================
	Lightbox Styles
	========================================================================== */

.magictool-lightbox {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
}

.magictool-lightbox-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.92);
	cursor: pointer;
}

.magictool-lightbox-container {
	position: relative;
	display: flex;
	flex-direction: column;
	max-width: 80vw;
	max-height: 80vh;
	z-index: 1;
	/* background-color: var(--magictool-bg);
	border-radius: var(--magictool-radius);
	padding: 20px; */
}

.magictool-lightbox-close {
	position: absolute;
	top: -50px;
	right: -50px;
	width: 40px;
	height: 40px;
	background: rgba(255, 255, 255, 0.1);
	border: none;
	border-radius: 50%;
	color: white;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s;
	z-index: 10;
	cursor: pointer;
}

.magictool-lightbox-close svg {
	width: 20px;
	height: 20px;
}

.magictool-lightbox-close:hover {
	background: rgba(255, 255, 255, 0.2);
	transform: scale(1.1);
}

.magictool-lightbox-content {
	display: flex;
	align-items: center;
	justify-content: center;
}

.magictool-lightbox-content img {
	max-width: 80vw;
	max-height: calc(80vh - 100px);
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: var(--magictool-radius);
	box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5);
}

/* Video / Plyr in image modal — fill available space */
.magictool-lightbox-content.magictool-lightbox-content--video {
	width: 100%;
	min-width: 80vw;
	max-width: 80vw;
}

#magictool-image-modal .magictool-lightbox-content--video .plyr {
	width: 100% !important;
	max-height: calc(80vh - 120px);
}

#magictool-image-modal .magictool-lightbox-content--video .plyr video,
#magictool-image-modal .magictool-lightbox-content--video .plyr__video-wrapper {
	width: 100% !important;
	max-height: calc(80vh - 120px);
	object-fit: contain;
}

/* Viewer Thumbnails (for multi-image history) */
.magictool-viewer-thumbs {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 12px;
	padding: 8px;
	background: rgba(0, 0, 0, 0.4);
	border-radius: var(--magictool-radius-sm);
}

.magictool-viewer-thumbs img {
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: 6px;
	cursor: pointer;
	opacity: 0.6;
	transition: all 0.2s;
	border: 2px solid transparent;
}

.magictool-viewer-thumbs img:hover {
	opacity: 0.9;
}

.magictool-viewer-thumbs img.active {
	opacity: 1;
	border-color: var(--magictool-primary);
}

.magictool-lightbox-footer {
	background: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(10px);
	border-radius: var(--magictool-radius);
	padding: 16px 20px;
	margin-top: 16px;
	display: flex;
	align-items: center;
	gap: 16px;
}

.magictool-lightbox-prompt {
	flex: 1;
	color: rgba(255, 255, 255, 0.85);
	font-size: 13px;
	line-height: 1.5;
	max-height: 60px;
	overflow-y: auto;
	padding-right: 12px;
}

.magictool-lightbox-prompt::-webkit-scrollbar {
	width: 4px;
}

.magictool-lightbox-prompt::-webkit-scrollbar-track {
	background: rgba(255, 255, 255, 0.1);
	border-radius: 2px;
}

.magictool-lightbox-prompt::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.3);
	border-radius: 2px;
}

.magictool-lightbox-actions {
	display: flex;
	gap: 10px;
	flex-shrink: 0;
}

.magictool-lightbox-actions .magictool-btn {
	padding: 10px 16px;
	font-size: 13px;
}

.magictool-lightbox-actions .magictool-btn-secondary {
	background: rgba(255, 255, 255, 0.15);
	border-color: rgba(255, 255, 255, 0.2);
	color: white;
}

.magictool-lightbox-actions .magictool-btn-secondary:hover {
	background: rgba(255, 255, 255, 0.25);
}

.magictool-lightbox-actions .magictool-btn-primary {
	background: var(--magictool-primary);
}

.magictool-lightbox-actions .magictool-btn-primary:hover {
	background: var(--magictool-primary-hover);
}

/* Body class when lightbox is open */
body.magictool-lightbox-open {
	overflow: hidden;
}

/* Make gallery images clickable */
.magictool-gallery-item {
	cursor: pointer;
}

/* Responsive lightbox */
@media (max-width: 900px) {
	.magictool-lightbox-close {
		top: 10px;
		right: 10px;
	}

	.magictool-lightbox-footer {
		flex-direction: column;
		align-items: stretch;
	}

	.magictool-lightbox-actions {
		justify-content: center;
	}
}

@media (max-width: 480px) {
	.magictool-lightbox-container {
		max-width: 95vw;
		max-height: 90vh;
	}

	.magictool-lightbox-content img {
		max-width: 95vw;
		max-height: calc(90vh - 150px);
	}

	.magictool-lightbox-content.magictool-lightbox-content--video {
		min-width: 95vw;
		max-width: 95vw;
	}

	#magictool-image-modal .magictool-lightbox-content--video .plyr,
	#magictool-image-modal .magictool-lightbox-content--video .plyr video {
		max-height: calc(90vh - 140px);
	}

	.magictool-lightbox-actions {
		flex-direction: column;
	}

	.magictool-lightbox-actions .magictool-btn {
		width: 100%;
	}
}

/* =====================================================
	PROFILE PAGE STYLING
	===================================================== */

/* Profile page uses wrapper, so main content needs specific styling */
.magictool-wrapper .magictool-main {
	overflow-y: auto;
}

.magictool-wrapper .magictool-main .magictool-profile-content {
	max-width: 900px;
	margin: 0 auto;
}

.magictool-profile-header {
	margin-bottom: 40px;
}

.magictool-profile-header h1 {
	font-size: 32px;
	font-weight: 700;
	color: #1d2327;
	margin: 0 0 8px;
}

.magictool-profile-subtitle {
	color: #646970;
	font-size: 16px;
	margin: 0;
}

.magictool-profile-content {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.magictool-profile-card {
	background: #fff;
	border: 1px solid #c3c4c7;
	border-radius: 12px;
	padding: 24px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.magictool-profile-card h3 {
	font-size: 18px;
	font-weight: 600;
	color: #1d2327;
	margin: 0 0 20px;
	padding-bottom: 12px;
	border-bottom: 2px solid #f0f0f1;
}

.magictool-profile-avatar-section {
	display: flex;
	align-items: center;
	gap: 24px;
	padding-bottom: 24px;
	border-bottom: 1px solid #f0f0f1;
	margin-bottom: 24px;
}

.magictool-profile-avatar {
	position: relative;
	flex-shrink: 0;
}

.magictool-profile-avatar img {
	width: 120px;
	height: 120px;
	border-radius: 50%;
	border: 4px solid #f0f0f1;
	object-fit: cover;
}

.magictool-avatar-change {
	position: absolute;
	bottom: 0;
	right: 0;
	background: var(--magictool-primary);
	color: #fff;
	border: 3px solid #fff;
	border-radius: 50%;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.2s;
	padding: 0;
}

.magictool-avatar-change:hover {
	background: var(--magictool-primary-hover);
	transform: scale(1.05);
}

.magictool-avatar-change svg {
	width: 16px;
	height: 16px;
}

.magictool-profile-basic-info h2 {
	font-size: 24px;
	font-weight: 600;
	color: #1d2327;
	margin: 0 0 4px;
}

.magictool-profile-email {
	color: #646970;
	font-size: 14px;
	margin: 0 0 12px;
}

.magictool-profile-meta {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.magictool-profile-credits {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #646970;
	font-size: 14px;
	font-weight: 500;
}

.magictool-profile-credits svg {
	color: var(--magictool-primary);
}

.magictool-profile-form {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.magictool-form-row {
	display: flex;
	gap: 20px;
	margin-bottom: 20px;
}

.magictool-form-row-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.magictool-form-group {
	flex: 1;
}

.magictool-form-group label {
	display: block;
	font-weight: 600;
	color: #1d2327;
	white-space: nowrap;
	text-overflow: ellipsis;
	display: -webkit-box;
	overflow: hidden;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	line-clamp: 1;
	box-orient: vertical;
}

.magictool-required {
	color: var(--magictool-danger);
	font-weight: 600;
	margin-left: 2px;
	margin-bottom: 8px;
	font-size: 14px;
}

.magictool-input {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid #c3c4c7;
	border-radius: 8px;
	font-size: 14px;
	transition: all 0.2s;
	font-family: inherit;
}

.magictool-input:focus {
	outline: none;
	border-color: var(--magictool-primary);
	box-shadow: 0 0 0 3px rgba(20, 71, 230, 0.1);
}

.magictool-input[type="password"] {
	font-family: monospace;
	letter-spacing: 1px;
}

.magictool-form-description {
	margin: 8px 0 0;
	color: #646970;
	font-size: 13px;
	line-height: 1.5;
}

.magictool-profile-actions {
	display: flex;
	gap: 12px;
	margin-top: 8px;
}

.magictool-profile-message {
	padding: 12px 16px;
	border-radius: 8px;
	margin-top: 16px;
	font-size: 14px;
}

.magictool-profile-message.success {
	background: #edfaef;
	color: #00a32a;
	border: 1px solid #00a32a;
}

.magictool-profile-message.error {
	background: #fcf0f1;
	color: #d63638;
	border: 1px solid #d63638;
}

/* Responsive Profile */
@media (max-width: 768px) {
	.magictool-profile-avatar-section {
		flex-direction: column;
		text-align: center;
	}

	.magictool-form-row-2 {
		grid-template-columns: 1fr;
	}

	.magictool-profile-actions {
		flex-direction: column;
	}

	.magictool-profile-actions .magictool-btn {
		width: 100%;
	}
}

header.magictool-main-header {
	display: flex;
	padding: 15px 15px;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid var(--magictool-border);
	position: sticky;
	top: 0;
	z-index: 100;
	background: #fff;
}

.magictool-main-header button {
	display: flex;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	margin: 0;
	align-items: center;
	justify-content: center;
	color: var(--magictool-text);
}

.magictool-mini-panel-button svg {
	width: 20px;
	height: 20px;
}

.magictool-main-content {
	padding: 40px;
	flex: 1;
	background-image: linear-gradient(to bottom right, #faf5ff, #eff6ff);
}

@media (max-width: 768px) {
	.magictool-main-content {
		padding: 40px 15px;
	}
}

footer.magictool-main-footer {
	padding: 20px 15px;
	border-top: 1px solid var(--magictool-border);
	text-align: center;
	background: #fff;
}

.copyright {
	font-size: 12px;
	color: var(--magictool-text-muted);
	line-height: 1.5;
	padding: 3px 10px;
}

.copyright-text {
	margin: 0;
}

.flex {
	display: flex;
}

.items-center {
	align-items: center;
}

.gap-2 {
	gap: 8px;
}

button.magictool-toggle-panel-button {
	display: none;
}

@media (max-width: 768px) {
	button.magictool-toggle-panel-button {
		display: block;
	}

	button.magictool-mini-panel-button {
		display: none;
	}
}

/* Error Dialog */
.magictool-error-dialog {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
}

.magictool-error-dialog-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.75);
	cursor: pointer;
}

.magictool-error-dialog-container {
	position: relative;
	background: var(--magictool-bg-card);
	border-radius: var(--magictool-radius);
	box-shadow: var(--magictool-shadow-lg);
	max-width: 500px;
	width: 90%;
	max-height: 80vh;
	overflow: hidden;
	z-index: 1;
	display: flex;
	flex-direction: column;
}

.magictool-error-dialog-header {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 15px 24px;
	border-bottom: 1px solid var(--magictool-border);
	background: rgba(239, 68, 68, 0.1);
}

.magictool-error-dialog-icon {
	width: 35px;
	height: 35px;
	border-radius: 50%;
	background: var(--magictool-danger);
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.magictool-error-dialog-header h3 {
	margin: 0;
	font-size: 20px;
	font-weight: 600;
	color: var(--magictool-danger);
}

.magictool-error-dialog-content {
	padding: 24px;
	flex: 1;
	overflow-y: auto;
}

.magictool-error-dialog-content p {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--magictool-text);
	word-wrap: break-word;
}

.magictool-error-dialog-footer {
	padding: 16px 24px;
	border-top: 1px solid var(--magictool-border);
	display: flex;
	justify-content: flex-end;
	gap: 12px;
}

.magictool-error-dialog-close {
	min-width: 100px;
}

body.magictool-error-dialog-open {
	overflow: hidden;
}

p.magictool-field-description {
	margin-bottom: 8px;
}

.magictool-content-header p {
	font-size: 16px;
	line-height: 28px;
	color: #4b5563;
	margin-top: 8px;
}

/* Video page: tabs above form (full width) */
.magictool-video-tabs-wrap {
	width: 100%;
	margin-bottom: 20px;
}

.magictool-video-mode-tabs.magictool-tabs {
	flex-wrap: wrap;
	gap: 0;
}

.magictool-video-mode-tabs .magictool-tab {
	flex: 1 1 auto;
	min-width: 0;
	background-color: #fff;
}

@media (max-width: 640px) {
	.magictool-video-mode-tabs .magictool-tab {
		flex: 1 1 50%;
	}
}

/* Generator/Video layout: 30% form | 70% preview */
.magictool-generator-page,
.magictool-video-page {
	width: 100%;
}

.magictool-generator-layout,
.magictool-video-layout {
	display: grid;
	grid-template-columns: 384px 1fr;
	gap: 24px;
	align-items: start;
	margin-bottom: 32px;
}

.magictool-generator-form-col,
.magictool-video-form-col {
	min-width: 0;
}

.magictool-generator-preview-col,
.magictool-video-preview-col {
	min-width: 0;
	height: 100%;
}

/* Preview card - professional frame */
.magictool-preview-card {
	background: var(--magictool-bg-card);
	border: 1px solid var(--magictool-border);
	border-radius: var(--magictool-radius);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
	overflow: hidden;
	height: 100%;
}

.magictool-preview-card-header {
	padding: 12px 16px;
	/* background: linear-gradient(to bottom, #fafafa, #f5f5f5); */
	border-bottom: 1px solid var(--magictool-border);
	font-size: 13px;
	font-weight: 600;
	color: var(--magictool-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.magictool-preview-card-label {
	display: inline-flex;
	align-items: center;
}

/* Preview area (70% column) */
.magictool-preview-area {
	min-height: calc(100% - 43px);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	position: relative;
	padding: 20px;
	/* background: linear-gradient(145deg, #fafbfc 0%, #f0f4f8 100%); */
}

.magictool-preview-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 48px 32px;
	text-align: center;
	width: 100%;
}

.magictool-preview-placeholder-icon {
	width: 120px;
	height: 120px;
	margin-bottom: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(20, 71, 230, 0.06);
	border: 2px dashed rgba(20, 71, 230, 0.2);
	border-radius: 16px;
	color: rgba(20, 71, 230, 0.35);
}

.magictool-preview-placeholder-icon svg {
	width: 48px;
	height: 48px;
}

.magictool-preview-placeholder-title {
	margin: 0 0 8px;
	font-size: 16px;
	font-weight: 600;
	color: var(--magictool-text);
}

.magictool-preview-placeholder-desc {
	font-size: 14px;
	color: var(--magictool-text-muted);
	line-height: 1.5;
	max-width: 280px;
}

/* Preview loading state */
.magictool-preview-loading {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	background: linear-gradient(145deg, #fafbfc 0%, #f0f4f8 100%);
	color: var(--magictool-text-muted);
	font-size: 14px;
}

.magictool-preview-loading-spinner {
	width: 40px;
	height: 40px;
	border: 3px solid rgba(20, 71, 230, 0.15);
	border-top-color: var(--magictool-primary);
	border-radius: 50%;
	animation: magictool-spin 0.8s linear infinite;
}

@keyframes magictool-spin {
	to { transform: rotate(360deg); }
}

.magictool-preview-area .magictool-preview-image {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
	position: absolute;
	top: 20px;
	left: 20px;
	right: 20px;
	bottom: 20px;
	width: calc(100% - 40px);
	height: calc(100% - 40px);
}

.magictool-preview-area .magictool-preview-area .magictool-preview-video {
	max-width: 100%;
	width: 100%;
	height: auto;
	max-height: 420px;
	display: block;
	background: #000;
}

/* Generated images section (full width below) */
.magictool-generations-section {
	margin-top: 0;
	padding-top: 24px;
	border-top: 1px solid var(--magictool-border);
}

.magictool-generations-section .magictool-section-header {
	margin-bottom: 16px;
}

.magictool-generations-section .magictool-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 16px;
}

/* Responsive */
@media (max-width: 1024px) {
	.magictool-generator-layout,
	.magictool-video-layout {
		grid-template-columns: 1fr;
	}

	.magictool-preview-area {
		min-height: 300px;
	}
}

@media (max-width: 768px) {
	.magictool-topup-btn {
		padding: 7px;
	}

	.magictool-topup-btn span {
		display: none;
	}

	ul.magictool-lang-switcher li a img {
		width: 20px !important;
	}
}

@media (max-width: 640px) {
	.magictool-generations-section .magictool-gallery {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}
}

#magictool-preview-video {
	position: absolute;
	top: 20px;
	left: 20px;
	right: 20px;
	bottom: 20px;
	width: calc(100% - 40px);
	height: calc(100% - 40px);
	border-radius: var(--magictool-radius);
}

ul.magictool-lang-switcher {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	gap: 10px;
}

ul.magictool-lang-switcher li a img {
	width: 22px !important;
	height: auto !important;
}

@media (max-width: 768px) {
	ul.magictool-lang-switcher li a img {
		width: 20px !important;
	}
}

#magictool-image-model-image-group,
#magictool-image-model-text-group {
	grid-column: 3 span;
}