.hipnotic-shell {
	max-width: 1180px;
	margin: 32px auto;
	padding: 0 16px;
}

body.hipnotic-modal-open {
	overflow: hidden;
}

body.hipnotic-form-open {
	overflow: hidden;
}

.hipnotic-lucide {
	display: block;
	width: 1em;
	height: 1em;
	fill: none !important;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex: 0 0 auto;
}

.hipnotic-hero,
.hipnotic-card,
.hipnotic-empty-state,
.hipnotic-media-dialog {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 24px;
	box-shadow: 0 20px 50px rgba(15, 23, 42, 0.08);
}

.hipnotic-hero {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	padding: 28px;
	margin-bottom: 24px;
	background: linear-gradient(135deg, #0f172a, #2563eb);
	color: #fff;
}

.hipnotic-hero h2,
.hipnotic-hero p {
	color: inherit;
	margin: 0;
}

.hipnotic-badge {
	display: inline-block;
	margin-bottom: 10px;
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.14);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.hipnotic-card,
.hipnotic-empty-state {
	padding: 24px;
	margin-bottom: 24px;
}

.hipnotic-card-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 20px;
	margin-bottom: 20px;
}

.hipnotic-card-head h3,
.hipnotic-card-head h1 {
	margin: 0 0 8px;
}

.hipnotic-counter {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 48px;
	height: 48px;
	padding: 0 14px;
	border-radius: 16px;
	background: #eff6ff;
	color: #1d4ed8;
	font-size: 18px;
	font-weight: 700;
}

.hipnotic-experience-topbar {
	margin-bottom: 26px;
}

.hipnotic-experience-search {
	display: flex;
	align-items: center;
	gap: 10px;
	width: min(100%, 340px);
	padding: 0 14px;
	border: 1px solid #dbe3ed;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.88);
	box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
	color: #94a3b8;
}

.hipnotic-experience-search button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	min-width: 30px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: #94a3b8;
	cursor: pointer;
	box-shadow: none;
}

.hipnotic-experience-search button:hover,
.hipnotic-experience-search button:focus {
	background: #eff6ff;
	color: #2563eb;
	outline: 0;
}

.hipnotic-experience-search button svg {
	width: 17px;
	height: 17px;
}

.hipnotic-experience-search input {
	width: 100%;
	min-height: 38px;
	border: 0;
	background: transparent;
	color: #0f172a;
	outline: 0;
}

.hipnotic-experience-hero {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 28px;
}

.hipnotic-experience-hero h2 {
	margin: 0 0 6px;
	color: #0f172a;
	font-size: clamp(24px, 3vw, 34px);
	line-height: 1.15;
}

.hipnotic-experience-hero p {
	margin: 0;
	color: #64748b;
}

.hipnotic-experience-hero .button-hero {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 48px;
	padding: 0 18px;
	border-radius: 10px;
	box-shadow: 0 14px 26px rgba(37, 99, 235, 0.24);
}

.hipnotic-experience-stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(120px, 150px));
	gap: 18px;
	margin-bottom: 32px;
}

.hipnotic-experience-stat {
	min-height: 128px;
	padding: 20px;
	border: 1px solid rgba(226, 232, 240, 0.78);
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.74);
	box-shadow: 0 18px 42px rgba(15, 23, 42, 0.06);
}

.hipnotic-experience-stat-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	margin-bottom: 18px;
	border-radius: 999px;
	background: #f8fafc;
	color: #94a3b8;
	box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

.hipnotic-experience-stat-icon svg {
	display: block;
	width: 24px;
	height: 24px;
	overflow: visible;
	fill: none;
	stroke: currentColor;
}

.hipnotic-experience-stat strong,
.hipnotic-experience-stat small {
	display: block;
}

.hipnotic-experience-stat strong {
	color: #0f172a;
	font-size: 28px;
	line-height: 1;
}

.hipnotic-experience-stat small {
	margin-top: 7px;
	color: #64748b;
}

.hipnotic-experience-section {
	margin-top: 8px;
}

.hipnotic-experience-section-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	margin-bottom: 18px;
}

.hipnotic-experience-section-head h3 {
	margin: 0;
	color: #0f172a;
	font-size: 20px;
}

.hipnotic-experience-toolbar {
	display: flex;
	align-items: center;
	gap: 10px;
}

.hipnotic-experience-toolbar select,
.hipnotic-view-toggle {
	min-height: 40px;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
}

.hipnotic-experience-toolbar select {
	padding: 0 34px 0 12px;
	color: #334155;
}

.hipnotic-view-toggle {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: center;
	width: 82px;
	height: 40px;
	min-height: 40px;
	padding: 2px;
	gap: 0;
	overflow: hidden;
}

.hipnotic-view-toggle button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	min-width: 0;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: #64748b;
	cursor: pointer;
	line-height: 1;
	box-shadow: none;
	appearance: none;
	-webkit-appearance: none;
	transition: background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.hipnotic-view-toggle button svg {
	display: block;
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
}

.hipnotic-view-toggle button.is-active {
	background: #2563eb;
	color: #fff;
	box-shadow: 0 6px 14px rgba(37, 99, 235, 0.22);
}

.hipnotic-view-toggle button:not(.is-active):hover {
	background: #f8fafc;
	color: #334155;
}

.hipnotic-view-toggle button:focus-visible {
	outline: 2px solid #2563eb;
	outline-offset: -3px;
}

.hipnotic-experience-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 22px;
}

.hipnotic-experience-card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 100%;
	overflow: visible;
	border: 1px solid #e5eaf2;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 18px 38px rgba(15, 23, 42, 0.07);
}

.hipnotic-experience-cover {
	position: relative;
	overflow: hidden;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 12px 12px 0 0;
	background: #0f172a;
}

.hipnotic-experience-cover img,
.hipnotic-experience-cover-fallback {
	display: block;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center center !important;
}

.hipnotic-experience-cover-fallback {
	background:
		radial-gradient(circle at 72% 28%, rgba(59, 130, 246, 0.82), transparent 26%),
		linear-gradient(135deg, #020617, #1e293b 56%, #2563eb);
}

.hipnotic-experience-body {
	position: relative;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 16px 18px 18px;
}

.hipnotic-experience-title-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
}

.hipnotic-experience-title-row h4 {
	margin: 0;
	color: #0f172a;
	font-size: 15px;
	line-height: 1.35;
}

.hipnotic-experience-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 8px 0 18px;
	color: #64748b;
	font-size: 13px;
}

.hipnotic-experience-meta span + span::before {
	content: "•";
	margin-right: 8px;
	color: #cbd5e1;
}

.hipnotic-experience-meta span + span::before {
	content: "";
	display: inline-block;
	width: 4px;
	height: 4px;
	margin-right: 8px;
	border-radius: 999px;
	background: #cbd5e1;
	vertical-align: middle;
}

.hipnotic-experience-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-top: auto;
}

.hipnotic-experience-actions a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: #2563eb;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
}

.hipnotic-experience-actions a:last-child {
	min-height: 0;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	background-color: transparent !important;
	box-shadow: none !important;
	color: #2563eb !important;
}

.hipnotic-experience-actions a:last-child:hover,
.hipnotic-experience-actions a:last-child:focus {
	background: transparent !important;
	background-color: transparent !important;
	box-shadow: none !important;
	color: #1d4ed8 !important;
}

.hipnotic-experience-actions a:last-child .hipnotic-action-play-icon {
	display: block;
	width: 13px;
	height: 13px;
	flex: 0 0 13px;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: currentColor;
	fill: none;
	stroke: currentColor;
}

.hipnotic-experience-menu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: #1f2937;
	cursor: pointer;
}

.hipnotic-experience-cover > .hipnotic-experience-menu-toggle {
	display: none;
}

.hipnotic-experience-menu-toggle.is-inline {
	display: inline-flex;
	flex: 0 0 auto;
	margin-top: -4px;
	color: #1f2937;
}

.hipnotic-experience-menu {
	position: absolute;
	right: 14px;
	top: 48px;
	z-index: 8;
	display: grid;
	gap: 4px;
	min-width: 142px;
	padding: 8px;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14);
}

.hipnotic-experience-menu[hidden] {
	display: none;
}

.hipnotic-experience-menu a,
.hipnotic-experience-menu button {
	display: block;
	width: 100%;
	padding: 9px 10px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: #334155;
	font-size: 13px;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}

.hipnotic-experience-menu a:hover,
.hipnotic-experience-menu button:hover {
	background: #f8fafc;
}

.hipnotic-experience-grid.is-list-view {
	grid-template-columns: 1fr;
	gap: 14px;
}

.hipnotic-experience-grid.is-list-view .hipnotic-experience-card {
	display: grid;
	grid-template-columns: minmax(160px, 240px) minmax(0, 1fr);
	align-items: center;
}

.hipnotic-experience-grid.is-list-view .hipnotic-experience-cover {
	width: 100%;
	height: auto;
	min-height: 0;
	border-radius: 12px 0 0 12px;
	aspect-ratio: 16 / 9;
}

.hipnotic-experience-grid.is-list-view .hipnotic-experience-body {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.hipnotic-experience-empty {
	padding: 32px 18px;
	border: 1px dashed #cbd5e1;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.64);
	text-align: center;
}

.hipnotic-experience-empty h3 {
	margin: 0 0 8px;
	color: #0f172a;
}

.hipnotic-experience-empty p {
	margin: 0;
	color: #64748b;
}

.hipnotic-form-card {
	display: none;
}

.hipnotic-form-card.is-open {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: #f8fafc;
	box-shadow: none;
}

.hipnotic-form-backdrop {
	position: absolute;
	inset: 0;
	background: #f8fafc;
	backdrop-filter: none;
}

.hipnotic-form-dialog {
	position: relative;
	z-index: 1;
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	max-height: none;
	overflow: hidden;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: #f8fafc;
	box-shadow: none;
}

.hipnotic-confirm-modal {
	position: fixed;
	inset: 0;
	z-index: 2147483600;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 18px;
}

.hipnotic-confirm-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, 0.58);
	backdrop-filter: blur(4px);
}

.hipnotic-confirm-dialog {
	position: relative;
	z-index: 1;
	width: min(100%, 420px);
	padding: 24px;
	border: 1px solid rgba(226, 232, 240, 0.92);
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 24px 70px rgba(15, 23, 42, 0.24);
}

.hipnotic-confirm-dialog h3 {
	margin: 0 0 8px;
	color: #0f172a;
	font-size: 20px;
	line-height: 1.25;
}

.hipnotic-confirm-dialog p {
	margin: 0;
	color: #475569;
	font-size: 14px;
	line-height: 1.5;
}

.hipnotic-confirm-actions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 22px;
}

.hipnotic-confirm-actions .button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-width: 112px;
	min-height: 42px;
	padding-inline: 18px !important;
	white-space: nowrap;
}

.hipnotic-playlist-builder-form {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	min-height: 0;
}

.hipnotic-form p {
	margin: 0;
}

.hipnotic-form label {
	display: block;
	margin-bottom: 8px;
	font-weight: 600;
}

.hipnotic-form input[type="text"],
.hipnotic-form input[type="password"],
.hipnotic-form input[type="search"],
.hipnotic-form textarea {
	width: 100%;
	border: 1px solid #cbd5e1;
	border-radius: 16px;
	padding: 14px 16px;
	background: #fff;
}

.hipnotic-form textarea {
	min-height: 160px;
	resize: vertical;
}

.hipnotic-field-help {
	display: block;
	margin-top: 8px;
	color: #64748b;
	font-size: 13px;
}

.hipnotic-editor-shell {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	height: 100%;
	min-height: 0;
	background:
		linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.94)),
		#f8fafc;
}

.hipnotic-editor-topbar {
	flex: 0 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 14px;
	padding: 22px 28px;
	border-bottom: 1px solid rgba(226, 232, 240, 0.82);
}

.hipnotic-editor-topbar h3 {
	margin: 0;
	color: #0f172a;
	font-size: 18px;
	line-height: 1.2;
}

.hipnotic-editor-topbar-actions {
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	min-width: 0;
}

.hipnotic-editor-close,
.hipnotic-password-toggle,
.hipnotic-video-order {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	background: transparent;
	cursor: pointer;
	box-shadow: none;
	appearance: none;
	-webkit-appearance: none;
}

.hipnotic-editor-close {
	width: 42px;
	height: 42px;
	border-radius: 14px;
	color: #64748b;
}

.hipnotic-editor-close:hover {
	background: #eef2f7;
	color: #0f172a;
}

.hipnotic-editor-close svg,
.hipnotic-editor-cancel svg,
.hipnotic-editor-save svg,
.hipnotic-access-title svg,
.hipnotic-editor-outline-action svg,
.hipnotic-editor-delete svg,
.hipnotic-password-toggle svg,
.hipnotic-video-order svg {
	display: block;
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
}

.hipnotic-editor-cancel {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0 22px !important;
	border: 1px solid #cbd5e1 !important;
	border-radius: 14px !important;
	background: #fff !important;
	color: #475569 !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	box-shadow: none !important;
}

.hipnotic-editor-cancel:hover {
	border-color: #94a3b8 !important;
	background: #f8fafc !important;
	color: #0f172a !important;
}

.hipnotic-editor-save {
	display: inline-flex !important;
	align-items: center;
	gap: 10px;
	min-height: 52px;
	padding: 0 26px !important;
	border: 0 !important;
	border-radius: 14px !important;
	background: #2563eb !important;
	color: #fff !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	box-shadow: 0 14px 30px rgba(37, 99, 235, 0.28) !important;
}

.hipnotic-editor-grid {
	flex: 1 1 auto;
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(360px, 0.88fr);
	align-items: start;
	gap: 24px;
	height: auto;
	min-height: 0;
	padding: 28px;
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.hipnotic-editor-panel {
	overflow: visible;
	border: 1px solid rgba(226, 232, 240, 0.92);
	border-radius: 24px;
	background: rgba(255, 255, 255, 0.82);
	box-shadow: 0 18px 60px rgba(15, 23, 42, 0.08);
}

.hipnotic-sequence-panel {
	display: flex;
	flex-direction: column;
	min-height: min(620px, 100%);
}

.hipnotic-details-panel {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 34px;
}

.hipnotic-editor-section-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 34px 34px 22px;
}

.hipnotic-details-panel > .hipnotic-editor-section-head {
	padding: 0;
}

.hipnotic-editor-section-head h4,
.hipnotic-access-title h4 {
	margin: 0;
	color: #0f172a;
	font-size: 22px;
	line-height: 1.2;
}

.hipnotic-editor-section-head span {
	color: #94a3b8;
	font-size: 14px;
	font-weight: 600;
}

.hipnotic-editor-field label {
	display: block;
	margin-bottom: 12px;
	color: #8792a6;
	font-size: 14px;
	font-weight: 700;
}

.hipnotic-editor-field input[type="text"],
.hipnotic-editor-field input[type="password"] {
	width: 100%;
	min-height: 60px;
	padding: 0 18px;
	border: 1px solid #dbe4f0;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.74);
	color: #0f172a;
	font-size: 16px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.hipnotic-editor-setting-list {
	display: grid;
	gap: 22px;
	padding: 4px 0 22px;
	border-bottom: 1px solid #e2e8f0;
}

.hipnotic-switch-modern {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 18px;
	padding: 0;
	border: 0;
	background: transparent;
}

.hipnotic-form .hipnotic-switch-modern {
	display: grid;
	margin: 0;
	font-weight: inherit;
}

.hipnotic-switch-modern strong {
	display: block;
	color: #0f172a;
	font-size: 16px;
	line-height: 1.3;
}

.hipnotic-switch-modern small {
	display: block;
	max-width: 310px;
	margin-top: 8px;
	color: #758195;
	font-size: 14px;
	line-height: 1.45;
}

.hipnotic-switch-modern input[type="checkbox"] {
	position: absolute;
	right: 0;
	width: 48px;
	height: 30px;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.hipnotic-switch-modern i {
	position: relative;
	display: block;
	width: 52px;
	height: 32px;
	border-radius: 999px;
	background: #d8dee8;
	box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.14);
	transition: background 0.18s ease;
}

.hipnotic-switch-modern i::after {
	content: "";
	position: absolute;
	top: 4px;
	left: 4px;
	width: 24px;
	height: 24px;
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 4px 10px rgba(15, 23, 42, 0.2);
	transition: transform 0.18s ease;
}

.hipnotic-switch-modern input[type="checkbox"]:checked + i {
	background: #2563eb;
}

.hipnotic-switch-modern input[type="checkbox"]:checked + i::after {
	transform: translateX(20px);
}

.hipnotic-access-panel {
	display: grid;
	gap: 22px;
	padding-top: 4px;
}

.hipnotic-access-title {
	display: flex;
	align-items: center;
	gap: 14px;
}

.hipnotic-access-title svg {
	color: #0f172a;
}

.hipnotic-password-field {
	position: relative;
}

.hipnotic-password-field input {
	padding-right: 54px !important;
}

.hipnotic-password-toggle {
	position: absolute;
	top: 50%;
	right: 10px;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	color: #64748b;
	transform: translateY(-50%);
}

.hipnotic-password-toggle:hover {
	background: #f1f5f9;
	color: #0f172a;
}

.hipnotic-editor-upload-actions {
	display: grid;
	gap: 14px;
	padding-top: 4px;
}

.hipnotic-editor-outline-action,
.hipnotic-editor-ghost-action,
.hipnotic-editor-delete {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-height: 58px;
	border-radius: 14px;
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	box-shadow: none;
}

.hipnotic-editor-outline-action {
	width: 100%;
	border: 1px solid #93b5ff;
	background: rgba(255, 255, 255, 0.64);
	color: #2563eb;
}

.hipnotic-editor-outline-action:hover,
.hipnotic-editor-ghost-action:hover {
	background: #eff6ff;
	color: #1d4ed8;
}

.hipnotic-editor-danger-zone {
	margin: auto -34px -34px;
	padding: 28px 34px;
	border-top: 1px solid #e2e8f0;
}

.hipnotic-editor-delete {
	width: 100%;
	border: 1px solid #fecaca;
	background: #fff7f7;
	color: #ef4444;
}

.hipnotic-editor-delete:hover {
	background: #fff1f2;
	color: #dc2626;
}

.hipnotic-sequence-footer {
	margin-top: auto;
	padding: 24px 34px;
	border-top: 1px solid #e2e8f0;
}

.hipnotic-editor-ghost-action {
	width: 100%;
	border: 0;
	background: transparent;
	color: #2563eb;
}

.hipnotic-form-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
	margin-bottom: 20px;
}

.hipnotic-settings-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin-bottom: 24px;
}

.hipnotic-video-list {
	display: flex;
	flex-direction: column;
	position: relative;
	gap: 12px;
	min-height: 360px;
	padding: 0 28px 20px 66px;
	counter-reset: hipnotic-scene;
	overflow: visible;
}

.hipnotic-video-list::before {
	content: "";
	position: absolute;
	top: 12px;
	bottom: 34px;
	left: 34px;
	width: 1px;
	border-radius: 999px;
	background: #d7dde6;
	opacity: 0.72;
}

.hipnotic-video-list .hipnotic-video-empty {
	position: relative;
	z-index: 1;
	margin-left: -44px;
}

.hipnotic-video-empty {
	padding: 32px 20px;
	border: 1px dashed #cbd5e1;
	border-radius: 18px;
	background: #f8fafc;
	text-align: center;
	color: #64748b;
}

.hipnotic-video-item {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 132px minmax(0, 1fr) 28px;
	align-items: center;
	gap: 12px;
	min-height: 92px;
	padding: 12px 14px;
	border: 1px solid rgba(226, 232, 240, 0.9);
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.88);
	cursor: grab;
	box-shadow: 0 16px 34px rgba(15, 23, 42, 0.07);
	counter-increment: hipnotic-scene;
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.hipnotic-video-item::before {
	content: "";
	position: absolute;
	top: 50%;
	left: -37px;
	width: 10px;
	height: 10px;
	border: 2px solid #f8fafc;
	border-radius: 999px;
	background: #cbd5e1;
	box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.18);
	transform: translateY(-50%);
}

.hipnotic-video-item.is-highlighted {
	border-color: #60a5fa;
	box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.18), 0 16px 34px rgba(15, 23, 42, 0.07);
}

.hipnotic-video-item.is-dragging {
	opacity: 0.55;
	transform: scale(0.98);
}

.hipnotic-video-drag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	margin-top: 0;
	border-radius: 8px;
	color: #94a3b8;
	cursor: grab;
}

.hipnotic-video-drag svg {
	width: 18px;
	height: 18px;
}

.hipnotic-video-thumb,
.hipnotic-library-card-thumb,
.hipnotic-player-item-thumb {
	position: relative;
	display: block;
	overflow: hidden !important;
	width: 100%;
	border-radius: 14px;
	background: #0f172a;
	aspect-ratio: 16 / 9;
	flex: 0 0 auto;
}

.hipnotic-video-thumb {
	width: 132px;
	box-shadow: 0 12px 24px rgba(15, 23, 42, 0.16);
}

.hipnotic-video-thumb img,
.hipnotic-library-card-thumb img,
.hipnotic-player-item-thumb img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover !important;
	object-position: center center !important;
}

.hipnotic-experience-cover picture,
.hipnotic-video-thumb picture,
.hipnotic-library-card-thumb picture,
.hipnotic-player-item-thumb picture,
.hipnotic-experience-cover video,
.hipnotic-video-thumb video,
.hipnotic-library-card-thumb video,
.hipnotic-player-item-thumb video {
	display: block;
	width: 100% !important;
	height: 100% !important;
	overflow: hidden !important;
	object-fit: cover !important;
	object-position: center center !important;
}

.hipnotic-video-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #2563eb, #14b8a6);
	color: #fff;
	font-size: 28px;
	font-weight: 700;
}

.hipnotic-video-placeholder.is-soft {
	background: linear-gradient(135deg, #475569, #0f172a);
	font-size: 22px;
}

.hipnotic-video-body {
	min-width: 0;
}

.hipnotic-video-titleline {
	display: grid;
	grid-template-columns: 30px minmax(0, 1fr);
	align-items: baseline;
	gap: 6px;
}

.hipnotic-video-index::before {
	content: counter(hipnotic-scene, decimal-leading-zero);
	color: #64748b;
	font-size: 14px;
	font-weight: 700;
}

.hipnotic-video-body strong,
.hipnotic-video-body small {
	display: block;
}

.hipnotic-video-body strong {
	display: -webkit-box;
	overflow: hidden;
	margin-bottom: 4px;
	color: #0f172a;
	font-size: 15px;
	line-height: 1.25;
	overflow-wrap: anywhere;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.hipnotic-video-body small {
	display: block;
	overflow: hidden;
	color: #64748b;
	font-size: 13px;
	font-weight: 600;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hipnotic-video-options {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 10px;
}

.hipnotic-video-option {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	margin: 0 !important;
	padding: 0;
	border: 0;
	background: transparent;
	color: #64748b;
	font-size: 14px;
	font-weight: 700;
}

.hipnotic-video-option input {
	width: 18px;
	height: 18px;
	margin: 0;
	border-color: #cbd5e1;
}

.hipnotic-video-tools {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}

.hipnotic-video-order {
	width: 28px;
	height: 28px;
	padding: 0;
	border-radius: 9px;
	color: #94a3b8;
}

.hipnotic-video-order:hover {
	background: #f1f5f9;
	color: #0f172a;
}

.hipnotic-remove-video:hover {
	background: #fff1f2;
	color: #ef4444;
}

.hipnotic-form-actions,
.hipnotic-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.hipnotic-form > .hipnotic-form-actions {
	margin-top: 20px;
}

.hipnotic-table-wrap {
	overflow-x: auto;
}

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

.hipnotic-table th,
.hipnotic-table td {
	padding: 16px 14px;
	border-bottom: 1px solid #e2e8f0;
	text-align: left;
}

.hipnotic-table th {
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #475569;
}

.hipnotic-empty-state {
	text-align: center;
}

.hipnotic-empty-state h3 {
	margin-top: 0;
	margin-bottom: 10px;
}

.hipnotic-empty-actions {
	display: flex;
	justify-content: center;
	margin-top: 16px;
}

.hipnotic-password-gate {
	max-width: 560px;
	margin: 0 auto;
}

.hipnotic-playlist-locked {
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	min-width: 100vw;
	min-height: 100vh;
	min-height: 100dvh;
	padding: clamp(12px, 2.5vw, 28px);
	background: #F5F6FA !important;
	overflow: hidden;
}

.hipnotic-playlist-locked::before {
	display: none !important;
}

.hipnotic-playlist-locked .hipnotic-shell {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.hipnotic-player-lock-stage {
	position: fixed;
	inset: 0;
	z-index: 0;
	min-height: 100%;
	border-radius: 0;
	background: #F5F6FA !important;
	box-shadow: none !important;
}

.hipnotic-playlist-lock-modal {
	position: absolute;
	inset: 0;
	z-index: 40;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 0;
}

.hipnotic-playlist-lock-backdrop {
	position: fixed;
	inset: 0;
	background: #F5F6FA !important;
	backdrop-filter: none !important;
}

.hipnotic-playlist-lock-dialog {
	position: relative;
	z-index: 1;
	overflow: hidden;
	width: min(90%, 480px);
	min-height: auto;
	padding: 40px clamp(20px, 6vw, 48px) 32px;
	border: none;
	border-radius: 24px;
	background: #FFFFFF !important;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08) !important;
	text-align: center;
}

.hipnotic-lock-dialog-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	margin: 0 auto 20px;
	top: auto;
	left: auto;
	z-index: 2;
	width: auto;
	height: auto;
	border: none;
	border-radius: 0;
	background-color: transparent;
	color: #2563EB;
	box-shadow: none;
	transform: none;
}

.hipnotic-lock-dialog-icon svg {
	width: 52px;
	height: 52px;
}

.hipnotic-playlist-lock-dialog::after {
	display: none !important;
}

.hipnotic-playlist-lock-dialog > * {
	position: relative;
	z-index: 2;
}

.hipnotic-playlist-lock-dialog h3 {
	margin: 0 0 10px;
	color: #111827;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
}

.hipnotic-playlist-lock-dialog p {
	margin: 0 0 24px;
	color: #4b5563;
	font-size: 15px;
	line-height: 1.5;
	text-align: center;
}

.hipnotic-password-form {
	display: grid;
	gap: 16px;
	margin-top: 0;
	text-align: left;
}

.hipnotic-password-form p {
	position: relative;
	margin: 0;
}

.hipnotic-password-form label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.hipnotic-password-form input[type="password"],
.hipnotic-password-form input[type="text"] {
	width: 100%;
	min-height: 48px;
	padding: 0 48px 0 16px;
	border: 1px solid #cbd5e1;
	border-radius: 12px;
	background: #ffffff;
	box-shadow: none;
	color: #1f2937;
	font-size: 15px;
	outline: 0;
	transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.hipnotic-password-form input[type="password"]::placeholder,
.hipnotic-password-form input[type="text"]::placeholder {
	color: #94a3b8;
}

.hipnotic-password-form input[type="password"]:focus,
.hipnotic-password-form input[type="text"]:focus {
	border-color: #2563eb;
	background: #ffffff;
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.hipnotic-password-form .hipnotic-form-actions {
	margin-top: 4px;
}

.hipnotic-password-form .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 48px;
	border: 0;
	border-radius: 12px;
	background: #2563eb;
	box-shadow: none;
	color: #ffffff;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.15s ease-in-out;
}

.hipnotic-password-form .button:hover,
.hipnotic-password-form .button:focus {
	background: #1d4ed8;
	color: #ffffff;
	box-shadow: none;
}

.hipnotic-password-error {
	padding: 10px 12px;
	margin-top: 2px;
	border: 1px solid #fca5a5;
	border-radius: 10px;
	background: #fff5f5;
	color: #b91c1c;
	font-size: 13px;
	font-weight: 600;
	text-align: center;
}

.hipnotic-playlist-lock-dialog .hipnotic-password-form::after {
	content: "Promatrix PRO";
	display: block;
	margin-top: 24px;
	color: #9ca3af;
	font-size: 13px;
	text-align: center;
	font-weight: 500;
}

.hipnotic-playlist-content {
	line-height: 1.8;
	color: #1e293b;
}

.hipnotic-playlist-content iframe,
.hipnotic-playlist-content video {
	max-width: 100%;
}

.hipnotic-shell .notice {
	margin: 0 0 24px;
	border-radius: 14px;
}

.hipnotic-shell .notice p {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0;
}

.hipnotic-shell .notice svg {
	width: 18px;
	height: 18px;
}

.hipnotic-shell .notice-success {
	position: fixed;
	top: 22px;
	right: 22px;
	z-index: 100020;
	max-width: min(420px, calc(100vw - 32px));
	margin: 0;
	padding: 14px 18px;
	border: 1px solid rgba(187, 247, 208, 0.86);
	border-left: 4px solid #22c55e;
	border-radius: 12px;
	background: rgba(240, 253, 244, 0.96);
	box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14);
	transition: opacity 0.24s ease, transform 0.24s ease;
}

.hipnotic-shell .notice-success.is-hiding {
	opacity: 0;
	transform: translateY(-8px);
	pointer-events: none;
}

.hipnotic-media-modal[hidden] {
	display: none;
}

.hipnotic-media-modal {
	position: fixed;
	inset: 0;
	z-index: 100010;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1vh 1vw;
}

.hipnotic-media-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, 0.72);
	backdrop-filter: blur(3px);
}

.hipnotic-media-dialog {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	width: 98vw;
	height: 98vh;
	max-height: 98vh;
	padding: 22px;
	overflow: hidden;
	border-radius: 18px;
}

.hipnotic-media-header,
.hipnotic-upload-hero,
.hipnotic-library-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.hipnotic-media-header {
	flex: 0 0 auto;
	margin-bottom: 18px;
}

.hipnotic-media-header .button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-width: 112px;
	min-height: 42px;
	padding-inline: 18px !important;
	line-height: 1;
	white-space: nowrap;
}

.hipnotic-media-header .button svg {
	width: 17px;
	height: 17px;
}

.hipnotic-media-tabs {
	flex: 0 0 auto;
	display: inline-flex;
	gap: 10px;
	padding: 6px;
	margin-bottom: 18px;
	border-radius: 18px;
	background: #f1f5f9;
}

.hipnotic-media-tab {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-width: 148px;
	min-height: 44px;
	padding: 12px 20px;
	border: 0;
	border-radius: 14px;
	background: transparent;
	color: #334155;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
}

.hipnotic-media-tab svg {
	width: 18px;
	height: 18px;
}

.hipnotic-media-tab.is-active {
	background: #fff;
	box-shadow: 0 8px 20px rgba(15, 23, 42, 0.1);
	color: #0f172a;
}

.hipnotic-media-panel {
	display: none;
	flex: 1 1 auto;
	min-height: 0;
	overflow: auto;
}

.hipnotic-media-panel.is-active {
	display: flex;
	flex-direction: column;
}

.hipnotic-upload-hero {
	padding: 18px;
	margin-bottom: 16px;
	border: 1px solid #dbe4f0;
	border-radius: 20px;
	background: linear-gradient(180deg, #fff, #f8fbff);
}

.hipnotic-upload-queue {
	display: grid;
	gap: 12px;
}

.hipnotic-file-input {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
}

.hipnotic-upload-item {
	padding: 16px;
	border: 1px solid #dbe4f0;
	border-radius: 18px;
	background: #fff;
}

.hipnotic-upload-item.is-success {
	border-color: #86efac;
	background: #f0fdf4;
}

.hipnotic-upload-item.is-error {
	border-color: #fca5a5;
	background: #fff1f2;
}

.hipnotic-upload-item.is-cancelled {
	border-color: #cbd5e1;
	background: #f8fafc;
}

.hipnotic-upload-item-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px;
}

.hipnotic-upload-item-head .button,
.hipnotic-upload-hero .button,
.hipnotic-library-toolbar .button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-height: 42px;
	padding-inline: 18px !important;
	line-height: 1;
	white-space: nowrap;
}

.hipnotic-upload-hero .button,
.hipnotic-library-toolbar .button {
	min-width: 168px;
}

.hipnotic-upload-item-head .button svg,
.hipnotic-upload-hero .button svg,
.hipnotic-library-toolbar .button svg {
	width: 17px;
	height: 17px;
}

.hipnotic-upload-item-status,
.hipnotic-upload-item-percent {
	color: #475569;
	font-size: 14px;
}

.hipnotic-upload-item-percent {
	margin-top: 8px;
	font-weight: 700;
}

.hipnotic-upload-progress {
	overflow: hidden;
	height: 10px;
	border-radius: 999px;
	background: #e2e8f0;
}

.hipnotic-upload-progress span {
	display: block;
	height: 100%;
	width: 0;
	border-radius: inherit;
	background: linear-gradient(90deg, #2563eb, #7c3aed);
	transition: width 0.18s ease;
}

.hipnotic-library-toolbar {
	position: sticky;
	top: 0;
	z-index: 2;
	flex: 0 0 auto;
	flex-wrap: wrap;
	padding: 0 0 16px;
	margin-bottom: 16px;
	background: #fff;
}

.hipnotic-library-toolbar input[type="search"] {
	flex: 1 1 auto;
	min-width: 220px;
}

.hipnotic-library-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
	align-items: stretch;
}

.hipnotic-library-card {
	display: flex;
	flex-direction: column;
	gap: 9px;
	min-width: 0;
	height: 100%;
	padding: 10px 10px 12px;
	border: 1px solid #dbe4f0;
	border-radius: 14px;
	background: #fff;
	text-align: left;
	cursor: pointer;
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.hipnotic-library-card:hover,
.hipnotic-library-card.is-selected {
	transform: translateY(-1px);
	border-color: #60a5fa;
	box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.14);
}

.hipnotic-library-card:focus-visible {
	outline: 2px solid rgba(37, 99, 235, 0.72);
	outline-offset: 3px;
}

.hipnotic-library-card-body {
	display: grid;
	gap: 5px;
	min-width: 0;
	min-height: 72px;
	align-content: start;
}

.hipnotic-library-card-body strong {
	display: -webkit-box;
	overflow: hidden;
	color: #0f172a;
	font-size: 14px;
	line-height: 1.25;
	overflow-wrap: anywhere;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.hipnotic-library-card-body small,
.hipnotic-library-card-meta {
	display: block;
	overflow: hidden;
	color: #64748b;
	font-size: 12px;
	line-height: 1.25;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hipnotic-library-card-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: auto;
}

.hipnotic-library-delete {
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	gap: 6px;
	min-height: 28px;
	min-width: max-content;
	padding: 0;
	border: 0;
	background: transparent;
	color: #ef4444;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
}

.hipnotic-library-delete svg {
	width: 15px;
	height: 15px;
}

.hipnotic-library-delete:hover,
.hipnotic-library-delete:focus {
	color: #b91c1c;
	text-decoration: underline;
}

.hipnotic-library-card-check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	margin: 0 0 0 auto;
	border: 2px solid #cbd5e1;
	border-radius: 999px;
	color: transparent;
	transition: color 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.hipnotic-library-card.is-selected .hipnotic-library-card-check {
	border-color: #2563eb;
	background: #2563eb;
	color: #fff;
}

.hipnotic-library-card-check svg {
	width: 14px;
	height: 14px;
}

.hipnotic-library-empty,
.hipnotic-library-loading {
	padding: 18px;
	margin-top: 12px;
	border-radius: 18px;
	background: #f8fafc;
	color: #64748b;
	text-align: center;
}

.hipnotic-library-sentinel {
	height: 1px;
}

html.hipnotic-player-active,
body.hipnotic-player-active {
	width: 100% !important;
	min-width: 100% !important;
	height: 100% !important;
	min-height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
	background: #000 !important;
}

body.hipnotic-player-active #page,
body.hipnotic-player-active .site,
body.hipnotic-player-active .site-content,
body.hipnotic-player-active .content-area,
body.hipnotic-player-active .entry-content,
body.hipnotic-player-active .wp-site-blocks,
body.hipnotic-player-active .wp-block-post-content,
body.hipnotic-player-active .elementor,
body.hipnotic-player-active .elementor-section,
body.hipnotic-player-active .elementor-container,
body.hipnotic-player-active .elementor-column,
body.hipnotic-player-active .elementor-widget-wrap,
body.hipnotic-player-active .elementor-widget-container,
body.hipnotic-player-active .ast-container,
body.hipnotic-player-active .ast-article-single,
body.hipnotic-player-active .hentry {
	width: 100% !important;
	max-width: none !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: #000 !important;
	box-shadow: none !important;
}

.hipnotic-playlist-view,
.hipnotic-playlist-view .hipnotic-shell,
.hipnotic-player-card,
.hipnotic-player {
	display: block;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
}

.hipnotic-playlist-view:not(.hipnotic-playlist-locked) {
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	max-width: 100vw;
	min-height: 100vh;
	min-height: 100dvh;
	margin: 0;
	background: #000;
	overflow: hidden;
}

.hipnotic-playlist-view:not(.hipnotic-playlist-locked) .hipnotic-shell,
.hipnotic-playlist-view:not(.hipnotic-playlist-locked) .hipnotic-player-card,
.hipnotic-playlist-view:not(.hipnotic-playlist-locked) .hipnotic-player,
.hipnotic-playlist-view:not(.hipnotic-playlist-locked) .hipnotic-player-stage-wrap {
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	min-height: 100vh;
	min-height: 100dvh;
}

.hipnotic-playlist-view:not(.hipnotic-playlist-locked) .hipnotic-player,
.hipnotic-playlist-view:not(.hipnotic-playlist-locked) .hipnotic-player-stage-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
}

.hipnotic-player-stage-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

.hipnotic-player-stage {
	position: relative;
	overflow: hidden;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: #000;
	box-shadow: none;
	line-height: 0;
}

.hipnotic-player-video {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: #000;
	object-fit: cover;
	object-position: center center;
	opacity: 0;
	pointer-events: none;
	user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
}

.hipnotic-player-video.is-active {
	opacity: 1;
	z-index: 2;
}

.hipnotic-player-data,
.hipnotic-player-page-head,
.hipnotic-player-status {
	display: none !important;
}

.hipnotic-player-controls {
	position: absolute;
	right: clamp(14px, 2.4vw, 26px);
	bottom: clamp(14px, 2.4vw, 26px);
	z-index: 6;
	display: flex;
	align-items: center;
	gap: clamp(8px, 1.2vw, 11px);
	margin: 0;
	padding: 0;
}

.hipnotic-player-control {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: clamp(30px, 4.8vw, 36px);
	height: clamp(30px, 4.8vw, 36px);
	margin: 0;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 999px;
	background: rgba(8, 10, 14, 0.1);
	color: #fff;
	cursor: pointer;
	opacity: 0.76;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
	backdrop-filter: blur(12px) saturate(120%);
	transition: opacity 0.16s ease, background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
	-webkit-tap-highlight-color: transparent;
}

.hipnotic-player-control:hover {
	background: rgba(255, 255, 255, 0.07);
	border-color: rgba(255, 255, 255, 0.38);
	opacity: 1;
	transform: scale(1.03);
}

.hipnotic-player-control:focus-visible {
	outline: 2px solid rgba(255, 255, 255, 0.9);
	outline-offset: 3px;
}

.hipnotic-player-control svg {
	display: block;
	width: clamp(13px, 2.2vw, 16px);
	height: clamp(13px, 2.2vw, 16px);
	fill: none;
	stroke: currentColor;
}

.hipnotic-player-follow svg {
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 2.2;
}

.hipnotic-player-follow.is-released {
	background: rgba(255, 255, 255, 0.1);
}

.hipnotic-player-fullscreen .hipnotic-icon-collapse,
.hipnotic-player-fullscreen.is-fullscreen .hipnotic-icon-expand {
	display: none;
}

.hipnotic-player-fullscreen.is-fullscreen .hipnotic-icon-collapse {
	display: block;
}

.hipnotic-player-dots {
	position: absolute;
	left: 50%;
	bottom: clamp(12px, 2vw, 18px);
	z-index: 4;
	display: flex;
	flex-wrap: wrap;
	gap: clamp(4px, 0.9vw, 7px);
	align-items: center;
	justify-content: center;
	max-width: calc(100% - 28px);
	margin: 0;
	padding: 0;
	transform: translateX(-50%);
}

.hipnotic-player-dot {
	display: block;
	width: clamp(4px, 0.9vw, 6px);
	height: clamp(4px, 0.9vw, 6px);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.34);
	box-shadow: none;
	opacity: 0.72;
	transition: opacity 0.16s ease, transform 0.16s ease, background 0.16s ease;
}

.hipnotic-player-dot.is-active {
	background: rgba(255, 255, 255, 0.92);
	opacity: 0.95;
	transform: scale(1.25);
}

.hipnotic-player:fullscreen {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100vw;
	height: 100vh;
	max-width: none;
	background: #000;
}

.hipnotic-player:fullscreen .hipnotic-player-stage-wrap,
.hipnotic-player:fullscreen .hipnotic-player-stage {
	max-width: 100vw;
	max-height: 100vh;
}

.hipnotic-player:-webkit-full-screen {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100vw;
	height: 100vh;
	max-width: none;
	background: #000;
}

.hipnotic-player-video::-webkit-media-controls,
.hipnotic-player-video::-webkit-media-controls-panel,
.hipnotic-player-video::-webkit-media-controls-enclosure,
.hipnotic-player-video::-webkit-media-controls-overlay-play-button,
.hipnotic-player-video::-webkit-media-controls-start-playback-button,
.hipnotic-player-video::-webkit-media-controls-play-button,
.hipnotic-player-video::-webkit-media-controls-timeline,
.hipnotic-player-video::-webkit-media-controls-current-time-display,
.hipnotic-player-video::-webkit-media-controls-time-remaining-display,
.hipnotic-player-video::-webkit-media-controls-mute-button,
.hipnotic-player-video::-webkit-media-controls-volume-slider,
.hipnotic-player-video::-webkit-media-controls-fullscreen-button {
	display: none !important;
	-webkit-appearance: none;
	opacity: 0 !important;
}

@media (max-width: 1180px) {
	.hipnotic-library-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.hipnotic-experience-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 960px) {
	.hipnotic-hero,
	.hipnotic-card-head,
	.hipnotic-experience-hero,
	.hipnotic-experience-section-head,
	.hipnotic-upload-hero,
	.hipnotic-library-toolbar,
	.hipnotic-media-header {
		flex-direction: column;
		align-items: flex-start;
	}

	.hipnotic-form-grid,
	.hipnotic-settings-grid {
		grid-template-columns: 1fr;
	}

	.hipnotic-library-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.hipnotic-experience-search,
	.hipnotic-experience-toolbar {
		width: 100%;
	}

	.hipnotic-experience-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 768px) {
	.hipnotic-form-card.is-open {
		padding: 0;
	}

	.hipnotic-form-dialog {
		width: 100vw;
		height: 100vh;
		height: 100dvh;
		max-height: none;
		border-radius: 0;
	}

	.hipnotic-editor-topbar {
		grid-template-columns: 1fr;
		padding: 16px;
	}

	.hipnotic-editor-topbar-actions {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 42px;
		width: 100%;
	}

	.hipnotic-editor-cancel,
	.hipnotic-editor-save {
		width: 100%;
		justify-content: center;
		padding-right: 12px !important;
		padding-left: 12px !important;
	}

	.hipnotic-editor-grid {
		grid-template-columns: 1fr;
		gap: 16px;
		padding: 16px;
		overflow-x: hidden;
		overflow-y: auto;
	}

	.hipnotic-details-panel {
		order: 1;
		padding: 22px;
		min-height: auto;
	}

	.hipnotic-sequence-panel {
		order: 2;
		min-height: 0;
	}

	.hipnotic-editor-section-head {
		padding: 22px 22px 16px;
	}

	.hipnotic-video-list {
		padding: 0 18px 18px 38px;
	}

	.hipnotic-video-list::before {
		left: 18px;
	}

	.hipnotic-video-item {
		grid-template-columns: 92px minmax(0, 1fr) 28px;
		gap: 12px;
		padding: 12px;
		border-radius: 16px;
	}

	.hipnotic-video-item::before {
		left: -26px;
	}

	.hipnotic-video-thumb {
		width: 92px;
	}

	.hipnotic-video-titleline {
		grid-template-columns: 34px minmax(0, 1fr);
		gap: 8px;
	}

	.hipnotic-video-body strong {
		font-size: 14px;
	}

	.hipnotic-video-body small,
	.hipnotic-video-option {
		font-size: 12px;
	}

	.hipnotic-video-options {
		gap: 8px;
	}

	.hipnotic-sequence-footer,
	.hipnotic-editor-danger-zone {
		padding: 18px 22px;
	}

	.hipnotic-media-modal {
		padding: 0;
	}

	.hipnotic-card,
	.hipnotic-empty-state,
	.hipnotic-playlist-lock-dialog {
		border-radius: 20px;
	}

	.hipnotic-media-dialog {
		width: 100vw;
		height: 100vh;
		height: 100dvh;
		max-height: none;
		border-radius: 0;
	}

	.hipnotic-playlist-locked {
		padding: 14px;
	}

	.hipnotic-playlist-lock-dialog {
		width: min(100%, 560px);
		min-height: 330px;
		padding: 84px clamp(22px, 8vw, 74px) 34px;
	}

	.hipnotic-video-item {
		grid-template-columns: 92px minmax(0, 1fr) 28px;
	}

	.hipnotic-video-meta,
	.hipnotic-video-item .hipnotic-remove-video {
		grid-column: auto;
	}

	.hipnotic-video-meta {
		margin-top: -6px;
	}

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

	.hipnotic-experience-toolbar {
		flex-direction: column;
		align-items: stretch;
	}

	.hipnotic-experience-toolbar select,
	.hipnotic-view-toggle {
		width: 100%;
	}

	.hipnotic-experience-grid.is-list-view .hipnotic-experience-card {
		display: block;
	}

	.hipnotic-experience-grid.is-list-view .hipnotic-experience-cover {
		min-height: 0;
		border-radius: 12px 12px 0 0;
		aspect-ratio: 16 / 9;
	}

	.hipnotic-table thead {
		display: none;
	}

	.hipnotic-table,
	.hipnotic-table tbody,
	.hipnotic-table tr,
	.hipnotic-table td {
		display: block;
		width: 100%;
	}

	.hipnotic-table tr {
		padding: 16px;
		margin-bottom: 16px;
		border: 1px solid #e2e8f0;
		border-radius: 18px;
		background: #fff;
	}

	.hipnotic-table td {
		padding: 10px 0;
		border: 0;
		border-bottom: 1px solid #f1f5f9;
	}

	.hipnotic-table td:last-child {
		border-bottom: 0;
	}

	.hipnotic-table td::before {
		content: attr(data-label);
		display: block;
		margin-bottom: 6px;
		font-size: 12px;
		font-weight: 700;
		text-transform: uppercase;
		color: #64748b;
	}
}

@media (max-width: 640px) {
	.hipnotic-library-grid {
		grid-template-columns: 1fr;
	}

	.hipnotic-experience-grid {
		grid-template-columns: 1fr;
	}

	.hipnotic-shell {
		margin: 18px auto;
		padding: 0 14px;
	}

	.hipnotic-experience-stats {
		grid-template-columns: 1fr;
	}

	.hipnotic-experience-hero .button-hero {
		width: 100%;
		justify-content: center;
	}

	.hipnotic-form-card.is-open {
		padding: 0;
	}

	.hipnotic-form-dialog {
		max-height: none;
		height: 100vh;
		height: 100dvh;
		padding: 0;
		border-radius: 0;
	}

	.hipnotic-playlist-locked {
		padding: 10px;
	}

	.hipnotic-playlist-lock-dialog {
		width: 100%;
		min-height: 318px;
		padding: 82px 22px 30px;
		border-radius: 16px;
	}

	.hipnotic-playlist-lock-dialog h3 {
		font-size: 20px;
	}

	.hipnotic-playlist-lock-dialog p {
		font-size: 13px;
	}

	.hipnotic-editor-grid {
		padding-bottom: 24px;
	}

	.hipnotic-details-panel {
		gap: 18px;
	}

	.hipnotic-editor-section-head h4,
	.hipnotic-access-title h4 {
		font-size: 19px;
	}

	.hipnotic-editor-field input[type="text"],
	.hipnotic-editor-field input[type="password"] {
		min-height: 54px;
	}

	.hipnotic-video-item {
		grid-template-columns: 1fr 30px;
	}

	.hipnotic-video-thumb {
		grid-column: 1 / -1;
		width: 100%;
	}

	.hipnotic-video-tools {
		grid-column: 2;
		grid-row: 2;
	}

	.hipnotic-upload-item-head {
		flex-direction: column;
		align-items: flex-start;
	}
}