@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;700&display=swap');

/* Reset and base container */
.ssr-form-container {
	max-width: 800px !important;
	margin: 0 auto !important;
	padding: 32px 20px !important;
	background: #F5F7F9 !important;
	font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
	box-sizing: border-box !important;
}

.ssr-form-container *,
.ssr-form-container *::before,
.ssr-form-container *::after {
	box-sizing: border-box !important;
}

.ssr-section {
	margin-bottom: 24px !important;
}

/* Section titles */
.ssr-form-container .ssr-section-title {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	font-family: 'Outfit', sans-serif !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	color: #88A3CB !important;
	margin: 0 0 12px 0 !important;
	padding: 0 !important;
	border: none !important;
}

.ssr-form-container .ssr-title-icon {
	width: 20px !important;
	height: 20px !important;
	stroke: #88A3CB !important;
	flex-shrink: 0 !important;
}

.ssr-form-container .ssr-char-counter {
	margin-left: auto !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	color: #88A3CB !important;
}

/* Story type toggle */
.ssr-form-container .ssr-story-toggle {
	display: flex !important;
	width: 100% !important;
	background: transparent !important;
	border-radius: 0 !important;
	overflow: hidden !important;
	border: none !important;
	gap: 0 !important;
}

.ssr-form-container .ssr-toggle-option {
	flex: 1 !important;
	padding: 14px 20px !important;
	border: none !important;
	border-radius: 0 !important;
	background: #fff !important;
	color: #88A3CB !important;
	font-family: 'Outfit', sans-serif !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	transition: all 0.3s ease !important;
	margin: 0 !important;
	outline: none !important;
	box-shadow: none !important;
}

.ssr-form-container .ssr-toggle-option.active {
	background: #208AEC !important;
	color: #fff !important;
	border: none !important;
}

.ssr-form-container .ssr-toggle-option:not(.active) {
	background: #fff !important;
	color: #88A3CB !important;
	border: none !important;
}

.ssr-form-container .ssr-toggle-option:hover:not(.active) {
	background: #f8f8f8 !important;
}

/* Input fields */
.ssr-form-container .ssr-input-field {
	width: 100% !important;
	max-width: 100% !important;
	padding: 16px !important;
	border: none !important;
	border-radius: 0 !important;
	background: #fff !important;
	font-family: 'Outfit', sans-serif !important;
	font-size: 16px !important;
	line-height: 1.6 !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
	resize: vertical !important;
	outline: none !important;
	transition: box-shadow 0.3s ease !important;
	color: #333 !important;
	display: block !important;
}

.ssr-form-container .ssr-input-field:focus {
	box-shadow: 0 4px 12px rgba(32, 138, 236, 0.15) !important;
}

.ssr-form-container .ssr-input-field::placeholder {
	color: #D1DAE8 !important;
}

/* Conditional sections */
.ssr-form-container .ssr-text-section,
.ssr-form-container .ssr-video-section,
.ssr-form-container .ssr-text-media-section,
.ssr-form-container .ssr-video-media-section {
	display: none !important;
}

.ssr-form-container .ssr-text-section.active,
.ssr-form-container .ssr-video-section.active,
.ssr-form-container .ssr-text-media-section.active,
.ssr-form-container .ssr-video-media-section.active {
	display: block !important;
}

/* Media upload wrapper */
.ssr-form-container .ssr-media-upload-wrapper {
	display: flex !important;
	align-items: flex-start !important;
	gap: 12px !important;
	flex-wrap: wrap !important;
}

/* Upload box container */
.ssr-form-container .ssr-upload-box-container {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 6px !important;
}

/* Upload boxes */
.ssr-form-container .ssr-upload-box {
	width: 120px !important;
	height: 120px !important;
	min-width: 120px !important;
	min-height: 120px !important;
	max-width: 120px !important;
	max-height: 120px !important;
	background: #fff !important;
	border: none !important;
	border-radius: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer !important;
	transition: all 0.3s ease !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
	flex-shrink: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	outline: none !important;
}

.ssr-form-container .ssr-upload-box:hover {
	box-shadow: 0 4px 12px rgba(32, 138, 236, 0.15) !important;
	transform: translateY(-2px) !important;
}

.ssr-form-container .ssr-upload-icon {
	width: 32px !important;
	height: 32px !important;
	stroke: #88A3CB !important;
	flex-shrink: 0 !important;
}

.ssr-form-container .ssr-record-icon {
	fill: #EF4444 !important;
	stroke: none !important;
}

/* Upload labels */
.ssr-form-container .ssr-upload-label {
	font-family: 'Outfit', sans-serif !important;
	font-size: 11px !important;
	font-weight: 500 !important;
	color: #88A3CB !important;
	text-transform: lowercase !important;
	margin: 0 !important;
	padding: 0 !important;
	text-align: center !important;
}

/* Media preview */
.ssr-form-container .ssr-media-preview {
	width: 120px !important;
	height: 120px !important;
	min-width: 120px !important;
	min-height: 120px !important;
	max-width: 120px !important;
	max-height: 120px !important;
	border-radius: 0 !important;
	overflow: hidden !important;
	background: #fff !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
	flex-shrink: 0 !important;
	border: none !important;
}

.ssr-form-container .ssr-media-preview img,
.ssr-form-container .ssr-media-preview video {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
}

/* Select field */
.ssr-form-container .ssr-select-field {
	width: 100% !important;
	max-width: 100% !important;
	padding: 14px 16px !important;
	border: none !important;
	border-radius: 0 !important;
	background: #fff !important;
	font-family: 'Outfit', sans-serif !important;
	font-size: 16px !important;
	color: #333 !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
	outline: none !important;
	cursor: pointer !important;
	transition: box-shadow 0.3s ease !important;
	display: block !important;
}

.ssr-form-container .ssr-select-field:focus {
	box-shadow: 0 4px 12px rgba(32, 138, 236, 0.15) !important;
}

/* Selected topics */
.ssr-form-container .ssr-selected-topics {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 8px !important;
	margin-bottom: 12px !important;
	min-height: 0 !important;
}

.ssr-form-container .ssr-topic-chip {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	background: #208AEC !important;
	color: #fff !important;
	padding: 6px 10px 6px 12px !important;
	border-radius: 0 !important;
	font-family: 'Outfit', sans-serif !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	line-height: 1 !important;
}

.ssr-form-container .ssr-topic-chip span {
	margin: 0 !important;
	padding: 0 !important;
}

.ssr-form-container .ssr-topic-remove {
	background: transparent !important;
	border: none !important;
	padding: 0 !important;
	margin: 0 !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 16px !important;
	height: 16px !important;
	transition: opacity 0.2s ease !important;
}

.ssr-form-container .ssr-topic-remove:hover {
	opacity: 0.7 !important;
}

.ssr-form-container .ssr-topic-remove svg {
	width: 12px !important;
	height: 12px !important;
	stroke: #fff !important;
}

/* Radio groups */
.ssr-form-container .ssr-radio-group {
	display: flex !important;
	align-items: center !important;
	gap: 16px !important;
	flex-wrap: wrap !important;
}

.ssr-form-container .ssr-radio-label {
	font-family: 'Outfit', sans-serif !important;
	font-size: 15px !important;
	color: #333 !important;
	margin: 0 !important;
}

.ssr-form-container .ssr-radio-option {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	cursor: pointer !important;
	font-family: 'Outfit', sans-serif !important;
	font-size: 15px !important;
	color: #333 !important;
	margin: 0 !important;
}

.ssr-form-container .ssr-radio-option input[type="radio"] {
	cursor: pointer !important;
	accent-color: #208AEC !important;
}

/* Submit button */
.ssr-form-container .ssr-submit-btn {
	width: 100% !important;
	max-width: 100% !important;
	padding: 16px 24px !important;
	border: none !important;
	border-radius: 0 !important;
	background: #208AEC !important;
	color: #fff !important;
	font-family: 'Outfit', sans-serif !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	cursor: pointer !important;
	transition: all 0.3s ease !important;
	margin-top: 8px !important;
	outline: none !important;
	display: block !important;
	text-align: center !important;
}

.ssr-form-container .ssr-submit-btn:hover {
	background: #1a75d1 !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 6px 16px rgba(32, 138, 236, 0.3) !important;
}

.ssr-form-container .ssr-submit-btn:active {
	transform: translateY(0) !important;
}

/* Upload progress */
.ssr-form-container .ssr-upload-progress {
	margin-top: 24px !important;
	text-align: center !important;
}

.ssr-form-container .ssr-progress-bar {
	width: 100% !important;
	height: 8px !important;
	background: #E5E7EB !important;
	border-radius: 0 !important;
	overflow: hidden !important;
	margin-bottom: 12px !important;
	border: none !important;
}

.ssr-form-container .ssr-progress-fill {
	height: 100% !important;
	background: #208AEC !important;
	transition: width 0.3s ease !important;
	border-radius: 0 !important;
	border: none !important;
}

.ssr-form-container .ssr-progress-text {
	font-family: 'Outfit', sans-serif !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	color: #208AEC !important;
}

/* Upload success */
.ssr-form-container .ssr-upload-success {
	margin-top: 24px !important;
	text-align: center !important;
	padding: 32px !important;
	background: #fff !important;
	border-radius: 0 !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
	border: none !important;
}

.ssr-form-container .ssr-checkmark {
	width: 80px !important;
	height: 80px !important;
	margin: 0 auto 16px !important;
}

.ssr-form-container .ssr-checkmark-circle {
	stroke: #10B981 !important;
	stroke-width: 2 !important;
	stroke-dasharray: 166 !important;
	stroke-dashoffset: 166 !important;
	animation: ssr-checkmark-circle 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards !important;
}

.ssr-form-container .ssr-checkmark-check {
	stroke: #10B981 !important;
	stroke-width: 3 !important;
	stroke-dasharray: 48 !important;
	stroke-dashoffset: 48 !important;
	animation: ssr-checkmark-check 0.3s 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards !important;
}

@keyframes ssr-checkmark-circle {
	to {
		stroke-dashoffset: 0;
	}
}

@keyframes ssr-checkmark-check {
	to {
		stroke-dashoffset: 0;
	}
}

.ssr-form-container .ssr-upload-success p {
	font-family: 'Outfit', sans-serif !important;
	font-size: 18px !important;
	font-weight: 600 !important;
	color: #10B981 !important;
	margin: 0 !important;
}

/* Camera view */
.ssr-camera-view {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	background: #000 !important;
	z-index: 9999 !important;
}

.ssr-camera-view .ssr-video-preview-wrapper {
	position: relative !important;
	width: 100% !important;
	height: 100% !important;
	overflow: hidden !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.ssr-camera-view .ssr-video-preview,
.ssr-camera-view .ssr-pixelation-canvas {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}

.ssr-camera-view .ssr-pixelation-canvas {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
}

.ssr-camera-view .ssr-camera-header {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	display: flex !important;
	justify-content: flex-end !important;
	align-items: center !important;
	padding: 20px !important;
	z-index: 10 !important;
}

.ssr-camera-view .ssr-close-btn {
	width: 50px !important;
	height: 50px !important;
	border: none !important;
	background: rgba(255, 255, 255, 0.1) !important;
	border-radius: 0 !important;
	color: #fff !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: background 0.2s ease !important;
}

.ssr-camera-view .ssr-close-btn:hover {
	background: rgba(255, 255, 255, 0.2) !important;
}

.ssr-camera-view .ssr-close-btn svg {
	width: 24px !important;
	height: 24px !important;
}

.ssr-camera-view .ssr-camera-controls {
	position: absolute !important;
	bottom: 0 !important;
	left: 0 !important;
	right: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: flex-end !important;
	align-items: stretch !important;
	padding: 20px 0 calc(env(safe-area-inset-bottom, 0) + 32px) 0 !important;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.6) 100%) !important;
	gap: 28px !important;
	z-index: 30 !important;
}

.ssr-camera-view .ssr-pixelation-control {
	display: flex !important;
	flex-direction: column !important;
	gap: 12px !important;
	width: 100% !important;
	padding: 0 clamp(20px, 6vw, 48px) !important;
	margin: 0 !important;
	color: #fff !important;
}

.ssr-camera-view .ssr-pixelation-meta {
	width: 100% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 12px !important;
	padding: 0 !important;
}

.ssr-camera-view .ssr-pixelation-meta label {
	font-size: 12px !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: 1px !important;
	color: #999 !important;
	margin: 0 !important;
	flex: 1 !important;
}

.ssr-camera-view .ssr-slider {
	display: block !important;
	width: 100% !important;
	height: 8px !important;
	border-radius: 0 !important;
	background: rgba(255, 255, 255, 0.25) !important;
	border: none !important;
	outline: none !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	cursor: pointer !important;
	position: relative !important;
	margin: 0 !important;
	padding: 0 !important;
}

.ssr-camera-view .ssr-slider::-webkit-slider-runnable-track {
	width: 100% !important;
	height: 8px !important;
	background: rgba(255, 255, 255, 0.25) !important;
	border-radius: 0 !important;
	border: none !important;
}

.ssr-camera-view .ssr-slider::-moz-range-track {
	width: 100% !important;
	height: 8px !important;
	background: rgba(255, 255, 255, 0.25) !important;
	border-radius: 0 !important;
	border: none !important;
}

.ssr-camera-view .ssr-slider::-webkit-slider-thumb {
	-webkit-appearance: none !important;
	appearance: none !important;
	width: 32px !important;
	height: 32px !important;
	border-radius: 0 !important;
	background: #208AEC !important;
	cursor: pointer !important;
	box-shadow: 0 2px 8px rgba(32, 138, 236, 0.4) !important;
	margin-top: -12px !important;
}

.ssr-camera-view .ssr-slider::-moz-range-thumb {
	width: 32px !important;
	height: 32px !important;
	border-radius: 0 !important;
	background: #208AEC !important;
	cursor: pointer !important;
	border: none !important;
	box-shadow: 0 2px 8px rgba(32, 138, 236, 0.4) !important;
}

.ssr-camera-view #ssr-pixelation-label {
	font-size: 13px !important;
	font-weight: 600 !important;
	color: #fff !important;
	min-height: 20px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
}

.ssr-camera-view .ssr-pixelation-help {
	font-size: 11px !important;
	font-weight: 400 !important;
	color: rgba(255, 255, 255, 0.7) !important;
	margin: -8px 0 0 0 !important;
	padding: 0 !important;
	text-align: center !important;
	line-height: 1.4 !important;
}

.ssr-camera-view .ssr-record-controls {
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	padding: 0 20px !important;
	gap: 12px !important;
}

.ssr-camera-view .ssr-record-btn {
	width: 80px !important;
	height: 80px !important;
	border: none !important;
	background: transparent !important;
	cursor: pointer !important;
	padding: 0 !important;
}

.ssr-camera-view .ssr-record-timer {
	font-family: 'Outfit', sans-serif !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: #fff !important;
	letter-spacing: 0.5px !important;
	min-width: 40px !important;
}

.ssr-camera-view .ssr-record-btn:disabled {
	opacity: 0.5 !important;
	cursor: not-allowed !important;
}

.ssr-camera-view .ssr-record-circle {
	width: 100% !important;
	height: 100% !important;
}

.ssr-camera-view .ssr-record-bg {
	fill: none !important;
	stroke: rgba(255, 255, 255, 0.5) !important;
	stroke-width: 4 !important;
}

.ssr-camera-view .ssr-record-progress {
	fill: none !important;
	stroke: #EF4444 !important;
	stroke-width: 4 !important;
	transform: rotate(-90deg) !important;
	transform-origin: center !important;
	transition: stroke-dasharray 0.1s linear !important;
}

.ssr-camera-view .ssr-record-inner {
	fill: #EF4444 !important;
	transition: all 0.3s ease !important;
}

.ssr-camera-view .ssr-record-btn.recording .ssr-record-inner {
	fill: #EF4444 !important;
	r: 20 !important;
}

.ssr-camera-view .ssr-record-center {
	fill: #fff !important;
	transition: fill 0.3s ease !important;
}

.ssr-camera-view .ssr-record-btn.recording .ssr-record-center {
	fill: #EF4444 !important;
}

/* Remove video button */
.ssr-form-container .ssr-remove-video-btn {
	position: absolute !important;
	top: 8px !important;
	right: 8px !important;
	width: 32px !important;
	height: 32px !important;
	border: none !important;
	border-radius: 0 !important;
	background: rgba(0, 0, 0, 0.7) !important;
	color: #fff !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 !important;
	transition: background 0.2s ease !important;
	z-index: 10 !important;
}

.ssr-form-container .ssr-remove-video-btn:hover {
	background: rgba(0, 0, 0, 0.9) !important;
}

.ssr-form-container .ssr-remove-video-btn svg {
	width: 16px !important;
	height: 16px !important;
	stroke: #fff !important;
}

.ssr-form-container .ssr-media-preview {
	position: relative !important;
}

/* Hidden textarea */
.ssr-form-container .ssr-hidden-textarea {
	display: none !important;
	visibility: hidden !important;
	height: 0 !important;
	width: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
	position: absolute !important;
	left: -9999px !important;
}

/* WYSIWYG Editor */
.ssr-form-container .ssr-wysiwyg-toolbar {
	display: flex !important;
	gap: 4px !important;
	padding: 8px !important;
	background: #fff !important;
	border: none !important;
	border-bottom: 1px solid #E5E7EB !important;
	margin-bottom: 0 !important;
}

.ssr-form-container .ssr-wysiwyg-toolbar button {
	padding: 6px 12px !important;
	border: none !important;
	border-radius: 0 !important;
	background: #f8f8f8 !important;
	color: #333 !important;
	font-family: 'Outfit', sans-serif !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
	min-width: 32px !important;
}

.ssr-form-container .ssr-wysiwyg-toolbar button:hover {
	background: #e5e7eb !important;
}

.ssr-form-container .ssr-wysiwyg-toolbar button:active {
	background: #d1d5db !important;
}

.ssr-form-container .ssr-wysiwyg-editor {
	width: 100% !important;
	min-height: 200px !important;
	max-height: 400px !important;
	padding: 16px !important;
	border: none !important;
	border-radius: 0 !important;
	background: #fff !important;
	font-family: 'Outfit', sans-serif !important;
	font-size: 16px !important;
	line-height: 1.6 !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
	overflow-y: auto !important;
	outline: none !important;
	color: #333 !important;
}

.ssr-form-container .ssr-wysiwyg-editor:focus {
	box-shadow: 0 4px 12px rgba(32, 138, 236, 0.15) !important;
}

.ssr-form-container .ssr-wysiwyg-editor:empty:before {
	content: attr(data-placeholder) !important;
	color: #999 !important;
	pointer-events: none !important;
}

.ssr-form-container .ssr-wysiwyg-editor p {
	margin: 0 0 12px 0 !important;
}

.ssr-form-container .ssr-wysiwyg-editor p:last-child {
	margin-bottom: 0 !important;
}

.ssr-form-container .ssr-wysiwyg-editor strong {
	font-weight: 700 !important;
}

.ssr-form-container .ssr-wysiwyg-editor em {
	font-style: italic !important;
}

.ssr-form-container .ssr-wysiwyg-editor u {
	text-decoration: underline !important;
}

.ssr-form-container .ssr-wysiwyg-editor ul,
.ssr-form-container .ssr-wysiwyg-editor ol {
	margin: 0 0 12px 0 !important;
	padding-left: 32px !important;
}

.ssr-form-container .ssr-wysiwyg-editor li {
	margin-bottom: 4px !important;
}

/* Responsive styles */
@media (max-width: 768px) {
	.ssr-form-container {
		padding: 24px 16px !important;
	}

	.ssr-form-container .ssr-upload-box,
	.ssr-form-container .ssr-media-preview {
		width: 100px !important;
		height: 100px !important;
		min-width: 100px !important;
		min-height: 100px !important;
		max-width: 100px !important;
		max-height: 100px !important;
	}

	.ssr-form-container .ssr-upload-icon {
		width: 28px !important;
		height: 28px !important;
	}

	.ssr-form-container .ssr-media-upload-wrapper {
		gap: 8px !important;
	}
}

@media (max-width: 480px) {
	.ssr-form-container .ssr-section-title {
		font-size: 14px !important;
	}

	.ssr-form-container .ssr-title-icon {
		width: 18px !important;
		height: 18px !important;
	}

	.ssr-form-container .ssr-toggle-option {
		font-size: 16px !important;
		padding: 12px 16px !important;
	}

	.ssr-form-container .ssr-input-field,
	.ssr-form-container .ssr-select-field {
		font-size: 16px !important;
	}

	.ssr-form-container .ssr-submit-btn {
		font-size: 16px !important;
		padding: 14px 20px !important;
	}
}

/* Edit Story Button */
.ssr-edit-story-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 48px !important;
	height: 48px !important;
	border: none !important;
	border-radius: 0 !important;
	background: #22c55e !important;
	color: #fff !important;
	cursor: pointer !important;
	padding: 0 !important;
	margin: 0 !important;
	transition: all 0.3s ease !important;
	box-shadow: 0 2px 8px rgba(34, 197, 94, 0.25) !important;
}

.ssr-edit-story-btn:hover {
	background: #16a34a !important;
	box-shadow: 0 4px 12px rgba(34, 197, 94, 0.35) !important;
	transform: translateY(-2px) !important;
}

.ssr-edit-story-btn:active {
	transform: translateY(0) !important;
	box-shadow: 0 2px 6px rgba(34, 197, 94, 0.25) !important;
}

.ssr-edit-icon {
	width: 20px !important;
	height: 20px !important;
	stroke: #fff !important;
	fill: none !important;
}

/* Edit Modal */
.ssr-edit-modal {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	z-index: 999999 !important;
	display: none !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 20px !important;
}

.ssr-edit-modal.active {
	display: flex !important;
}

.ssr-edit-modal-overlay {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	background: rgba(0, 0, 0, 0.7) !important;
	z-index: 1 !important;
}

.ssr-edit-modal-content {
	position: relative !important;
	z-index: 2 !important;
	background: #fff !important;
	max-width: 800px !important;
	width: 100% !important;
	max-height: 90vh !important;
	border-radius: 0 !important;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
	display: flex !important;
	flex-direction: column !important;
}

.ssr-edit-modal-header {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	padding: 20px 24px !important;
	border-bottom: 2px solid #E5E7EB !important;
}

.ssr-edit-modal-header h2 {
	margin: 0 !important;
	padding: 0 !important;
	font-family: 'Outfit', sans-serif !important;
	font-size: 22px !important;
	font-weight: 700 !important;
	color: #333 !important;
}

.ssr-edit-modal-close {
	width: 32px !important;
	height: 32px !important;
	border: none !important;
	border-radius: 0 !important;
	background: #f3f4f6 !important;
	color: #666 !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 !important;
	transition: all 0.2s ease !important;
}

.ssr-edit-modal-close:hover {
	background: #e5e7eb !important;
	color: #333 !important;
}

.ssr-edit-modal-close svg {
	width: 18px !important;
	height: 18px !important;
	stroke: currentColor !important;
}

.ssr-edit-modal-body {
	padding: 24px !important;
	overflow-y: auto !important;
	flex: 1 !important;
}

.ssr-edit-modal-body .ssr-form-container {
	padding: 0 !important;
	background: transparent !important;
}

@media (max-width: 640px) {
	.ssr-edit-modal {
		padding: 0 !important;
	}

	.ssr-edit-modal-content {
		max-height: 100vh !important;
		height: 100% !important;
		border-radius: 0 !important;
	}

	.ssr-edit-modal-header {
		padding: 16px 20px !important;
	}

	.ssr-edit-modal-header h2 {
		font-size: 18px !important;
	}

	.ssr-edit-modal-body {
		padding: 20px !important;
	}
}

/* =====================================================================
   Share Your Story: neutral, chapter-aware form surface (2.1.2)
   This is intentionally scoped to the standalone recorder. Existing camera,
   editor behavior, upload/save code, story listing and edit modal stay intact.
   Chapter actions use Site Engine's resolved semantic button roles when present.
   On the main site the fallback is neutral charcoal, never forced PS blue.
   ===================================================================== */
.ssr-form-container[data-ssr-design="refined"] {
  --ssr-ink:#27374a;
  --ssr-muted:#69788a;
  --ssr-subtle:#8290a0;
  --ssr-line:#e1e7ec;
  --ssr-field:#fdfefe;
  --ssr-field-border:#ccd7df;
  --ssr-soft:#f6f8fa;
  --ssr-action:var(--ps-design-button-primary-bg,var(--ps-chapter-primary-dark,#29394b));
  --ssr-action-ink:var(--ps-design-button-primary-text,#fff);
  --ssr-action-hover:var(--ps-design-button-primary-hover-bg,var(--ssr-action));
  --ssr-action-hover-ink:var(--ps-design-button-primary-hover-text,var(--ssr-action-ink));
  width:100%!important;
  max-width:940px!important;
  padding:0!important;
  margin:0 auto!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  color:var(--ssr-ink)!important;
  font-family:inherit!important;
}
.ssr-form-container[data-ssr-design="refined"] .ssr-recorder-intro {
  padding:0 0 24px!important;
  margin:0 0 30px!important;
  border-bottom:1px solid var(--ssr-line)!important;
}
.ssr-form-container[data-ssr-design="refined"] .ssr-recorder-kicker {
  margin:0 0 7px!important;
  font-size:11px!important;
  letter-spacing:.13em!important;
  font-weight:800!important;
  color:var(--ssr-muted)!important;
}
.ssr-form-container[data-ssr-design="refined"] .ssr-recorder-intro p:not(.ssr-recorder-kicker) {
  max-width:720px!important;
  margin:0!important;
  color:var(--ssr-ink)!important;
  font-family:inherit!important;font-size:clamp(16px,1.6vw,19px)!important;font-weight:400!important;
  line-height:1.6!important;
}
.ssr-form-container[data-ssr-design="refined"] .ssr-section {
  padding:0 0 30px!important;
  margin:0 0 30px!important;
  border-bottom:1px solid var(--ssr-line)!important;
}
.ssr-form-container[data-ssr-design="refined"] .ssr-section-title {
  display:flex!important;
  gap:11px!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  font-family:inherit!important;
  font-size:16px!important;
  font-weight:750!important;
  line-height:1.4!important;
  color:var(--ssr-ink)!important;
  margin:0 0 14px!important;
  letter-spacing:0!important;
}
.ssr-form-container[data-ssr-design="refined"] .ssr-title-icon {
  width:19px!important;
  height:19px!important;
  color:var(--ssr-muted)!important;
  stroke:currentColor!important;
}
.ssr-form-container[data-ssr-design="refined"] .ssr-optional {
  margin-left:4px!important;
  color:var(--ssr-subtle)!important;
  font-size:12px!important;
  font-weight:500!important;
  letter-spacing:0!important;
}
.ssr-form-container[data-ssr-design="refined"] .ssr-story-toggle {
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:8px!important;
  padding:6px!important;
  border:1px solid var(--ssr-line)!important;
  background:var(--ssr-soft)!important;
  border-radius:15px!important;
  overflow:visible!important;
}
.ssr-form-container[data-ssr-design="refined"] .ssr-toggle-option {
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:48px!important;
  margin:0!important;
  padding:11px 18px!important;
  border:1px solid transparent!important;
  border-radius:10px!important;
  background:transparent!important;
  color:var(--ssr-muted)!important;
  font-family:inherit!important;
  font-size:15px!important;
  font-weight:650!important;
  line-height:1.25!important;
  box-shadow:none!important;
  text-transform:none!important;
  transition:background .2s ease,border-color .2s ease,color .2s ease!important;
}
.ssr-form-container[data-ssr-design="refined"] .ssr-toggle-option.active {
  color:var(--ssr-ink)!important;
  background:#fff!important;
  border-color:var(--ssr-line)!important;
  box-shadow:0 2px 6px rgba(27,42,59,.055)!important;
}
.ssr-form-container[data-ssr-design="refined"] .ssr-toggle-option:not(.active) {
  color:var(--ssr-muted)!important;
  background:transparent!important;
}
.ssr-form-container[data-ssr-design="refined"] .ssr-toggle-option:hover:not(.active) {background:#eaf0f4!important;color:var(--ssr-ink)!important;}
.ssr-form-container[data-ssr-design="refined"] .ssr-input-field,
.ssr-form-container[data-ssr-design="refined"] .ssr-select-field,
.ssr-form-container[data-ssr-design="refined"] .ssr-wysiwyg-editor {
  width:100%!important;
  max-width:100%!important;
  border:1px solid var(--ssr-field-border)!important;
  border-radius:12px!important;
  background:var(--ssr-field)!important;
  color:var(--ssr-ink)!important;
  box-shadow:none!important;
  font-family:inherit!important;
  font-size:16px!important;
  line-height:1.65!important;
  padding:15px 16px!important;
  transition:border-color .18s ease,box-shadow .18s ease!important;
}
.ssr-form-container[data-ssr-design="refined"] .ssr-select-field{min-height:52px!important;}
.ssr-form-container[data-ssr-design="refined"] .ssr-input-field:focus,
.ssr-form-container[data-ssr-design="refined"] .ssr-select-field:focus,
.ssr-form-container[data-ssr-design="refined"] .ssr-wysiwyg-editor:focus {
  border-color:var(--ssr-action)!important;
  box-shadow:0 0 0 3px rgba(93,112,125,.12)!important;
  outline:none!important;
}
.ssr-form-container[data-ssr-design="refined"] .ssr-input-field::placeholder {color:#8995a2!important;}
.ssr-form-container[data-ssr-design="refined"] .ssr-wysiwyg-toolbar {
  border:1px solid var(--ssr-field-border)!important;
  border-bottom:1px solid var(--ssr-line)!important;
  border-radius:12px 12px 0 0!important;
  background:#f9fafb!important;
  padding:10px!important;
  gap:5px!important;
}
.ssr-form-container[data-ssr-design="refined"] .ssr-wysiwyg-toolbar button {
  border:1px solid transparent!important;
  border-radius:7px!important;
  background:transparent!important;
  color:var(--ssr-ink)!important;
  min-width:35px!important;
  min-height:34px!important;
  font-family:inherit!important;
  box-shadow:none!important;
}
.ssr-form-container[data-ssr-design="refined"] .ssr-wysiwyg-toolbar button:hover,
.ssr-form-container[data-ssr-design="refined"] .ssr-wysiwyg-toolbar button:focus-visible {
  background:#e6edf2!important;
  border-color:#d5dfe6!important;
}
.ssr-form-container[data-ssr-design="refined"] .ssr-wysiwyg-editor {
  min-height:260px!important;
  max-height:560px!important;
  border-top:0!important;
  border-radius:0 0 12px 12px!important;
  padding:21px 22px!important;
}
.ssr-form-container[data-ssr-design="refined"] .ssr-wysiwyg-editor:empty::before {color:#8995a2!important;}
.ssr-form-container[data-ssr-design="refined"] .ssr-media-upload-wrapper {align-items:center!important;gap:16px!important;}
.ssr-form-container[data-ssr-design="refined"] .ssr-upload-box-container {gap:8px!important;}
.ssr-form-container[data-ssr-design="refined"] .ssr-upload-box {
  width:134px!important;height:114px!important;
  min-width:134px!important;max-width:134px!important;
  min-height:114px!important;max-height:114px!important;
  background:#fcfdfd!important;
  border:1.5px dashed #bdcbd6!important;
  border-radius:13px!important;
  box-shadow:none!important;
  transition:border-color .18s ease,background .18s ease!important;
}
.ssr-form-container[data-ssr-design="refined"] .ssr-upload-box:hover {transform:none!important;border-color:var(--ssr-action)!important;background:#f7fafc!important;box-shadow:none!important;}
.ssr-form-container[data-ssr-design="refined"] .ssr-upload-icon {stroke:var(--ssr-muted)!important;width:30px!important;height:30px!important;}
.ssr-form-container[data-ssr-design="refined"] .ssr-upload-label {font-family:inherit!important;font-size:12px!important;letter-spacing:.01em!important;font-weight:600!important;text-transform:none!important;color:var(--ssr-muted)!important;}
.ssr-form-container[data-ssr-design="refined"] .ssr-media-preview {
  width:134px!important;height:114px!important;min-width:134px!important;min-height:114px!important;max-width:134px!important;max-height:114px!important;
  border:1px solid var(--ssr-line)!important;border-radius:13px!important;box-shadow:none!important;
}
.ssr-form-container[data-ssr-design="refined"] .ssr-selected-topics {gap:8px!important;}
.ssr-form-container[data-ssr-design="refined"] .ssr-topic-chip {
  background:var(--ssr-soft)!important;color:var(--ssr-ink)!important;
  border:1px solid var(--ssr-line)!important;border-radius:999px!important;
  padding:8px 11px!important;font-family:inherit!important;font-weight:600!important;
}
.ssr-form-container[data-ssr-design="refined"] .ssr-topic-remove svg {stroke:var(--ssr-ink)!important;}
.ssr-form-container[data-ssr-design="refined"] .ssr-radio-group {display:flex!important;gap:22px!important;flex-wrap:wrap!important;}
.ssr-form-container[data-ssr-design="refined"] .ssr-radio-option {display:inline-flex!important;gap:9px!important;align-items:center!important;color:var(--ssr-ink)!important;font-family:inherit!important;font-size:15px!important;line-height:1.5!important;}
.ssr-form-container[data-ssr-design="refined"] .ssr-radio-option input[type="radio"] {width:17px!important;height:17px!important;accent-color:var(--ssr-action)!important;margin:0!important;}
.ssr-form-container[data-ssr-design="refined"] .ssr-sharing-note {
  display:flex!important;flex-direction:column!important;gap:4px!important;
  margin:3px 0 23px!important;padding:17px 19px!important;
  border:1px solid var(--ssr-line)!important;border-radius:12px!important;
  background:#f9fafb!important;color:var(--ssr-muted)!important;
  font-size:13px!important;line-height:1.55!important;
}
.ssr-form-container[data-ssr-design="refined"] .ssr-sharing-note strong {font-size:13px!important;font-weight:750!important;color:var(--ssr-ink)!important;}
.ssr-form-container[data-ssr-design="refined"] .ssr-submit-btn {
  width:100%!important;min-height:54px!important;
  border:1px solid var(--ssr-action)!important;border-radius:11px!important;
  background:var(--ssr-action)!important;color:var(--ssr-action-ink)!important;
  font-family:inherit!important;font-size:16px!important;font-weight:750!important;line-height:1.25!important;letter-spacing:0!important;
  box-shadow:none!important;margin:0!important;padding:16px 22px!important;
  text-align:center!important;transform:none!important;cursor:pointer!important;
}
.ssr-form-container[data-ssr-design="refined"] .ssr-submit-btn:hover,
.ssr-form-container[data-ssr-design="refined"] .ssr-submit-btn:focus-visible {
  background:var(--ssr-action-hover)!important;color:var(--ssr-action-hover-ink)!important;
  box-shadow:0 5px 14px rgba(28,45,60,.13)!important;transform:none!important;
}
.ssr-form-container[data-ssr-design="refined"] .ssr-submit-btn:disabled {opacity:.65!important;cursor:wait!important;}
.ssr-form-container[data-ssr-design="refined"] .ssr-progress-fill {background:var(--ssr-action)!important;border-radius:999px!important;}
.ssr-form-container[data-ssr-design="refined"] .ssr-progress-bar {border-radius:999px!important;}
.ssr-form-container[data-ssr-design="refined"] .ssr-progress-text {color:var(--ssr-ink)!important;}
.ssr-form-container[data-ssr-design="refined"] .ssr-upload-success {border:1px solid var(--ssr-line)!important;border-radius:12px!important;box-shadow:none!important;}
/* Edit modal is also a recorder embed and uses the same neutral form surface. */
.ssr-edit-modal-body .ssr-form-container[data-ssr-design="refined"] {max-width:100%!important;}
@media(max-width:650px){
 .ssr-form-container[data-ssr-design="refined"] .ssr-recorder-intro{margin-bottom:24px!important;padding-bottom:20px!important;}
 .ssr-form-container[data-ssr-design="refined"] .ssr-section{margin-bottom:24px!important;padding-bottom:24px!important;}
 .ssr-form-container[data-ssr-design="refined"] .ssr-wysiwyg-editor{min-height:220px!important;padding:17px!important;}
 .ssr-form-container[data-ssr-design="refined"] .ssr-upload-box{width:108px!important;height:108px!important;min-width:108px!important;min-height:108px!important;max-width:108px!important;max-height:108px!important;}
 .ssr-form-container[data-ssr-design="refined"] .ssr-media-preview{width:108px!important;height:108px!important;min-width:108px!important;min-height:108px!important;max-width:108px!important;max-height:108px!important;}
 .ssr-form-container[data-ssr-design="refined"] .ssr-toggle-option{padding:11px 8px!important;font-size:14px!important;}
}

/* Version 2.1.3: complete shortcode-owned Story Recorder experience.
 * Fixed Project Semicolon defaults; governed Chapter Site Engine tokens are
 * consumed automatically when present. No decorative brand glyphs are used.
 */
.ssr-story-experience {
  --ssrx-blue:#0B7AE1;
  --ssrx-hero:var(--ps-design-brand-soft,#EAF4FC);
  --ssrx-heading:var(--ps-design-heading-dark,#203C56);
  --ssrx-emphasis:var(--ps-design-brand-dark,#145382);
  --ssrx-ink:var(--ps-design-body-text,#284159);
  --ssrx-muted:var(--ps-design-muted-text,#657991);
  --ssrx-stroke:var(--ps-design-border-divider,#DCE6EF);
  --ssrx-action:var(--ps-design-button-primary-bg,#0B7AE1);
  --ssrx-action-text:var(--ps-design-button-primary-text,#FFFFFF);
  --ssrx-action-hover:var(--ps-design-button-primary-hover-bg,#0863B6);
  --ssrx-action-hover-text:var(--ps-design-button-primary-hover-text,#FFFFFF);
  --ssrx-kicker:var(--ps-design-brand-dark,#145382);
  position:relative;
  width:100vw;
  max-width:none!important;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  overflow:hidden;
  background:#fff;
  color:var(--ssrx-ink);
  font-family:Outfit,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  text-align:left;
}
.ssr-story-experience *, .ssr-story-experience *:before, .ssr-story-experience *:after {box-sizing:border-box}
.ssr-story-experience a {text-decoration:none}
.ssr-story-experience .ssr-experience-hero {
  background:var(--ssrx-hero);
  border:0;
  padding:clamp(66px,7vw,118px) clamp(20px,5vw,65px) clamp(66px,6vw,94px);
  color:var(--ssrx-heading);
}
.ssr-story-experience .ssr-experience-hero-inner {width:min(1050px,100%);margin:0 auto}
.ssr-story-experience .ssr-experience-eyebrow {
  margin:0 0 27px!important;
  display:flex;align-items:center;gap:15px;
  color:var(--ssrx-kicker)!important;
  font-size:11px!important;font-weight:800!important;line-height:1.4!important;
  letter-spacing:.17em!important;text-transform:uppercase;
}
.ssr-story-experience .ssr-experience-eyebrow:before {content:"";width:29px;height:1px;background:var(--ssrx-action);flex:none}
.ssr-story-experience .ssr-experience-hero h1 {
  color:var(--ssrx-heading)!important;
  font-family:inherit!important;
  font-size:clamp(48px,6.3vw,84px)!important;
  line-height:1.02!important;font-weight:800!important;
  letter-spacing:-.055em!important;
  margin:0 0 26px!important;padding:0!important;
  max-width:900px;
}
.ssr-story-experience .ssr-experience-hero h1 span {display:block;color:var(--ssrx-emphasis)!important}
.ssr-story-experience .ssr-experience-description {
  color:var(--ssrx-ink)!important;
  max-width:620px;
  font-size:clamp(16px,1.6vw,19px)!important;
  line-height:1.75!important;
  margin:0!important;
}
.ssr-story-experience .ssr-experience-hero-footer {display:flex;align-items:center;gap:30px;flex-wrap:wrap;margin-top:34px}
.ssr-story-experience .ssr-experience-assurance {display:inline-flex;align-items:center;gap:9px;color:var(--ssrx-ink);font-size:13px;font-weight:700}
.ssr-story-experience .ssr-experience-assurance svg {display:block;width:18px;height:18px;color:var(--ssrx-emphasis)}
.ssr-story-experience .ssr-experience-hero-footer a {color:var(--ssrx-emphasis)!important;border-bottom:1px solid currentColor;font-size:13px;font-weight:800;line-height:1.5}
.ssr-story-experience .ssr-experience-hero-footer a:focus-visible {outline:2px solid var(--ssrx-action);outline-offset:4px}
.ssr-story-experience .ssr-experience-main {display:block;background:#fff;scroll-margin-top:30px}
.ssr-story-experience .ssr-form-container[data-ssr-design="experience"] {
  --ssr-ink:var(--ssrx-heading);
  --ssr-muted:var(--ssrx-muted);
  --ssr-subtle:var(--ssrx-muted);
  --ssr-line:var(--ssrx-stroke);
  --ssr-soft:#F5F8FB;
  --ssr-field:#FFFFFF;
  --ssr-field-border:var(--ssrx-stroke);
  --ssr-action:var(--ssrx-action);
  --ssr-action-ink:var(--ssrx-action-text);
  --ssr-action-hover:var(--ssrx-action-hover);
  --ssr-action-hover-ink:var(--ssrx-action-hover-text);
  display:block!important;
  max-width:960px!important;
  width:100%!important;
  margin:0 auto!important;
  padding:clamp(55px,6vw,92px) clamp(20px,4vw,42px) 92px!important;
  background:#fff!important;
  box-shadow:none!important;
  border:0!important;
  border-radius:0!important;
  color:var(--ssrx-ink)!important;
  font-family:inherit!important;
  text-align:left!important;
}
.ssr-story-experience .ssr-recorder-intro {display:flex;gap:30px;justify-content:space-between;align-items:flex-start;padding:0;margin:0 0 32px!important;border:0!important}
.ssr-story-experience .ssr-recorder-kicker {color:var(--ssrx-kicker)!important;margin:0 0 9px!important;font-size:11px!important;letter-spacing:.15em!important;font-weight:850!important;line-height:1.5!important}
.ssr-story-experience .ssr-recorder-kicker:before {content:"";width:24px;height:1px;display:inline-block;background:var(--ssrx-action);vertical-align:middle;margin-right:12px}
.ssr-story-experience .ssr-recorder-intro h2 {margin:0 0 8px!important;padding:0!important;color:var(--ssrx-heading)!important;font-size:clamp(29px,3vw,39px)!important;line-height:1.2!important;letter-spacing:-.04em!important;font-weight:800!important}
.ssr-story-experience .ssr-recorder-intro p:not(.ssr-recorder-kicker) {margin:0!important;color:var(--ssrx-muted)!important;font-size:15px!important;line-height:1.6!important}
.ssr-story-experience .ssr-recorder-step {flex:none;font-size:11px;color:var(--ssrx-muted);white-space:nowrap;margin-top:14px}
.ssr-story-experience .ssr-recorder-step strong {color:var(--ssrx-emphasis)}
.ssr-story-experience .ssr-form-container .ssr-section {margin:0 0 34px!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important}
.ssr-story-experience .ssr-form-container .ssr-section-title {display:flex!important;align-items:center!important;gap:9px!important;color:var(--ssrx-heading)!important;font-family:inherit!important;font-size:14px!important;font-weight:800!important;line-height:1.5!important;margin:0 0 12px!important;padding:0!important;letter-spacing:0!important;text-transform:none!important}
.ssr-story-experience .ssr-form-container .ssr-section-title .ssr-title-icon {display:none!important}
.ssr-story-experience .ssr-form-container .ssr-optional {margin-left:auto!important;color:var(--ssrx-muted)!important;font-size:12px!important;font-weight:500!important;letter-spacing:0!important;text-transform:none!important}
.ssr-story-experience .ssr-form-container .ssr-story-toggle {display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:13px!important;padding:0!important;border:0!important;background:transparent!important;overflow:visible!important;border-radius:0!important}
.ssr-story-experience .ssr-form-container .ssr-toggle-option,
.ssr-story-experience .ssr-form-container .ssr-toggle-option:not(.active) {
  display:flex!important;justify-content:flex-start!important;align-items:center!important;
  gap:15px!important;padding:16px 19px!important;min-height:82px!important;
  border:1px solid var(--ssrx-stroke)!important;border-radius:15px!important;
  background:#fff!important;color:var(--ssrx-heading)!important;
  text-align:left!important;box-shadow:none!important;
  font:inherit!important;text-transform:none!important;letter-spacing:0!important;
}
.ssr-story-experience .ssr-form-container .ssr-toggle-option.active {
  background:#F7FAFC!important;color:var(--ssrx-heading)!important;
  border:2px solid var(--ssrx-action)!important;padding:15px 18px!important;
}
.ssr-story-experience .ssr-form-container .ssr-toggle-option:hover {border-color:var(--ssrx-action)!important;background:#F9FBFD!important}
.ssr-story-experience .ssr-mode-icon {flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:11px;background:#F0F4F7;color:var(--ssrx-muted)}
.ssr-story-experience .ssr-mode-icon svg {width:21px;height:21px}
.ssr-story-experience .ssr-toggle-option.active .ssr-mode-icon {background:var(--ssrx-action);color:var(--ssrx-action-text)}
.ssr-story-experience .ssr-mode-text {display:flex;flex-direction:column;gap:3px}
.ssr-story-experience .ssr-mode-text strong {font-size:15px;font-weight:800;color:var(--ssrx-heading);line-height:1.3}
.ssr-story-experience .ssr-mode-text small {font-size:12px;color:var(--ssrx-muted);line-height:1.4;font-weight:500}
.ssr-story-experience .ssr-form-container .ssr-input-field,
.ssr-story-experience .ssr-form-container .ssr-select-field,
.ssr-story-experience .ssr-form-container .ssr-wysiwyg-editor {
  width:100%!important;max-width:100%!important;
  border:1px solid var(--ssrx-stroke)!important;border-radius:12px!important;
  background:#fff!important;color:var(--ssrx-ink)!important;box-shadow:none!important;
  padding:15px 18px!important;font-family:inherit!important;
  font-size:16px!important;line-height:1.65!important;
  outline:none!important;
}
.ssr-story-experience .ssr-form-container .ssr-input-field:focus,
.ssr-story-experience .ssr-form-container .ssr-select-field:focus,
.ssr-story-experience .ssr-form-container .ssr-wysiwyg-editor:focus {outline:2px solid var(--ssrx-action)!important;outline-offset:1px!important;box-shadow:none!important}
.ssr-story-experience .ssr-form-container .ssr-input-field::placeholder {color:#879AAE!important}
.ssr-story-experience .ssr-form-container .ssr-select-field {min-height:54px!important}
.ssr-story-experience .ssr-form-container .ssr-wysiwyg-toolbar {background:#FBFCFD!important;border:1px solid var(--ssrx-stroke)!important;border-bottom:0!important;border-radius:12px 12px 0 0!important;padding:10px 13px!important;box-shadow:none!important}
.ssr-story-experience .ssr-form-container .ssr-wysiwyg-toolbar button {min-width:33px!important;min-height:34px!important;border:0!important;border-radius:6px!important;background:transparent!important;color:var(--ssrx-ink)!important;box-shadow:none!important}
.ssr-story-experience .ssr-form-container .ssr-wysiwyg-toolbar button:hover {background:#EDF2F7!important}
.ssr-story-experience .ssr-form-container .ssr-wysiwyg-editor {border-radius:0 0 12px 12px!important;min-height:250px!important;padding:22px 23px!important}
.ssr-story-experience .ssr-details-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start;margin:6px 0 37px}
.ssr-story-experience .ssr-details-grid>.ssr-section {margin:0!important}
.ssr-story-experience .ssr-details-grid .ssr-media-upload-wrapper {display:flex!important;align-items:flex-start!important;gap:13px!important}
.ssr-story-experience .ssr-form-container .ssr-upload-box {width:145px!important;height:114px!important;max-width:145px!important;min-width:145px!important;min-height:114px!important;max-height:114px!important;border-radius:12px!important;border:1.5px dashed var(--ssrx-stroke)!important;background:#FBFCFD!important;box-shadow:none!important}
.ssr-story-experience .ssr-form-container .ssr-upload-box:hover {border-color:var(--ssrx-action)!important;background:#F6FAFC!important;box-shadow:none!important}
.ssr-story-experience .ssr-form-container .ssr-upload-icon {width:27px!important;height:27px!important;stroke:var(--ssrx-emphasis)!important}
.ssr-story-experience .ssr-form-container .ssr-upload-label {color:var(--ssrx-muted)!important;font-family:inherit!important;font-size:12px!important;text-transform:none!important;font-weight:700!important;letter-spacing:0!important}
.ssr-story-experience .ssr-form-container .ssr-media-preview {border:1px solid var(--ssrx-stroke)!important;box-shadow:none!important;border-radius:12px!important}
.ssr-story-experience .ssr-preferences-block {border-top:1px solid var(--ssrx-stroke);padding-top:30px;margin-top:30px}
.ssr-story-experience .ssr-preferences-block>h2 {color:var(--ssrx-heading)!important;font:800 24px/1.2 inherit!important;letter-spacing:-.035em!important;margin:0 0 6px!important}
.ssr-story-experience .ssr-preferences-block>p {color:var(--ssrx-muted)!important;margin:0 0 23px!important;font-size:14px!important;line-height:1.6!important}
.ssr-story-experience .ssr-preference-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:22px}
.ssr-story-experience .ssr-preference-grid .ssr-section {margin:0!important}
.ssr-story-experience .ssr-form-container .ssr-radio-group {display:flex!important;gap:16px!important;flex-wrap:wrap!important}
.ssr-story-experience .ssr-form-container .ssr-radio-option {display:inline-flex!important;align-items:center!important;gap:7px!important;font-size:14px!important;color:var(--ssrx-ink)!important;font-weight:550!important;line-height:1.5!important}
.ssr-story-experience .ssr-form-container .ssr-radio-option input[type=radio] {width:17px!important;height:17px!important;margin:0!important;accent-color:var(--ssrx-action)!important}
.ssr-story-experience .ssr-form-container .ssr-sharing-note {display:flex!important;align-items:flex-start!important;flex-direction:column!important;gap:4px!important;margin:32px 0 28px!important;padding:20px 22px!important;border:1px solid var(--ssrx-stroke)!important;border-radius:12px!important;background:#F6F8FA!important;box-shadow:none!important;color:var(--ssrx-muted)!important;font-size:13px!important;line-height:1.7!important}
.ssr-story-experience .ssr-form-container .ssr-sharing-note strong {color:var(--ssrx-heading)!important;font-size:14px!important;font-weight:800!important}
.ssr-story-experience .ssr-submitrow {display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.ssr-story-experience .ssr-form-container .ssr-submit-btn {width:auto!important;min-height:52px!important;min-width:240px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:25px!important;margin:0!important;padding:14px 26px!important;border:1px solid var(--ssrx-action)!important;border-radius:10px!important;background:var(--ssrx-action)!important;color:var(--ssrx-action-text)!important;font:800 15px/1.3 inherit!important;box-shadow:none!important;text-transform:none!important;letter-spacing:0!important}
.ssr-story-experience .ssr-form-container .ssr-submit-btn:hover {background:var(--ssrx-action-hover)!important;border-color:var(--ssrx-action-hover)!important;color:var(--ssrx-action-hover-text)!important;transform:none!important;box-shadow:none!important}
.ssr-story-experience .ssr-submitrow>span {font-size:12px;color:var(--ssrx-muted)}
.ssr-story-experience .ssr-form-container .ssr-progress-fill {background:var(--ssrx-action)!important}
.ssr-story-experience .ssr-experience-support {display:block;border-top:1px solid var(--ssrx-stroke);background:#F7FAFC;padding:30px clamp(20px,4vw,48px)}
.ssr-story-experience .ssr-experience-support-inner {width:min(1050px,100%);margin:0 auto;display:flex;align-items:center;gap:20px}
.ssr-story-experience .ssr-experience-support-icon {flex:none;display:grid;place-items:center;width:46px;height:46px;background:#E5EFF7;border-radius:13px;color:var(--ssrx-emphasis)}
.ssr-story-experience .ssr-experience-support-icon svg {width:22px;height:22px}
.ssr-story-experience .ssr-experience-support-copy {flex:1}
.ssr-story-experience .ssr-experience-support-copy h2 {font:800 17px/1.3 inherit!important;margin:0 0 5px!important;color:var(--ssrx-heading)!important}
.ssr-story-experience .ssr-experience-support-copy p {font:500 13px/1.6 inherit!important;color:var(--ssrx-muted)!important;margin:0!important}
.ssr-story-experience .ssr-experience-support a {flex:none;color:var(--ssrx-emphasis)!important;font:800 13px/1.5 inherit!important;border-bottom:1px solid currentColor}
.ssr-story-experience .ssr-experience-support a:focus-visible {outline:2px solid var(--ssrx-action);outline-offset:3px}
@media (max-width:780px) {
 .ssr-story-experience .ssr-experience-hero {padding:60px 24px 66px}
 .ssr-story-experience .ssr-experience-hero h1 {font-size:clamp(46px,9vw,68px)!important}
 .ssr-story-experience .ssr-form-container[data-ssr-design="experience"] {padding:54px 24px 70px!important}
 .ssr-story-experience .ssr-recorder-intro {flex-direction:column;gap:8px}
 .ssr-story-experience .ssr-recorder-step {margin:0}
 .ssr-story-experience .ssr-details-grid {grid-template-columns:1fr;gap:26px}
 .ssr-story-experience .ssr-preference-grid {grid-template-columns:1fr 1fr;row-gap:22px}
 .ssr-story-experience .ssr-experience-support-inner {flex-wrap:wrap}
 .ssr-story-experience .ssr-experience-support a {margin-left:66px}
}
@media (max-width:540px) {
 .ssr-story-experience .ssr-experience-hero {padding:52px 20px 56px}
 .ssr-story-experience .ssr-experience-hero h1 {font-size:clamp(42px,11vw,53px)!important}
 .ssr-story-experience .ssr-experience-eyebrow {font-size:10px!important;margin-bottom:20px!important}
 .ssr-story-experience .ssr-experience-description {font-size:15px!important}
 .ssr-story-experience .ssr-experience-hero-footer {gap:18px}
 .ssr-story-experience .ssr-form-container[data-ssr-design="experience"] {padding:44px 20px 56px!important}
 .ssr-story-experience .ssr-story-toggle {gap:9px!important}
 .ssr-story-experience .ssr-form-container .ssr-toggle-option,.ssr-story-experience .ssr-form-container .ssr-toggle-option:not(.active) {min-height:86px!important;gap:8px!important;padding:12px!important;flex-direction:column!important;align-items:flex-start!important}
 .ssr-story-experience .ssr-form-container .ssr-toggle-option.active {padding:11px!important}
 .ssr-story-experience .ssr-mode-icon {width:35px;height:35px}
 .ssr-story-experience .ssr-mode-icon svg {width:18px;height:18px}
 .ssr-story-experience .ssr-mode-text strong {font-size:13px}
 .ssr-story-experience .ssr-mode-text small {font-size:11px}
 .ssr-story-experience .ssr-preference-grid {grid-template-columns:1fr;row-gap:24px}
 .ssr-story-experience .ssr-submitrow {display:block}
 .ssr-story-experience .ssr-form-container .ssr-submit-btn {width:100%!important}
 .ssr-story-experience .ssr-submitrow>span {display:block;text-align:center;margin-top:16px}
 .ssr-story-experience .ssr-experience-support {padding:26px 20px}
 .ssr-story-experience .ssr-experience-support-inner {gap:13px}
 .ssr-story-experience .ssr-experience-support-icon {width:42px;height:42px}
 .ssr-story-experience .ssr-experience-support-copy {min-width:calc(100% - 60px)}
 .ssr-story-experience .ssr-experience-support a {margin:3px 0 0 55px}
}

/* 2.1.4: shortcode-owned login gate for visitors, using existing PS / Chapter palette. */
.ssr-story-experience .ssr-auth-gate{width:min(800px,calc(100% - 40px));margin:0 auto;padding:clamp(55px,7vw,90px) 0 clamp(70px,8vw,105px);text-align:left}
.ssr-story-experience .ssr-auth-gate-icon{display:grid;place-items:center;width:60px;height:60px;border-radius:16px;background:var(--ssrx-hero);color:var(--ssrx-emphasis);margin:0 0 23px}
.ssr-story-experience .ssr-auth-gate-icon svg{display:block;width:29px;height:29px}
.ssr-story-experience .ssr-auth-gate .ssr-recorder-kicker{font-size:11px!important;font-weight:800!important;letter-spacing:.14em!important;color:var(--ssrx-emphasis)!important;margin:0 0 15px!important}
.ssr-story-experience .ssr-auth-gate h2{font:800 clamp(30px,4.2vw,46px)/1.14 Outfit,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;letter-spacing:-.04em!important;color:var(--ssrx-heading)!important;margin:0 0 18px!important}
.ssr-story-experience .ssr-auth-gate>p:not(.ssr-recorder-kicker){max-width:620px;font-size:16px!important;line-height:1.75!important;color:var(--ssrx-muted)!important;margin:0 0 28px!important}
.ssr-story-experience .ssr-auth-gate .ssr-auth-gate-button{display:inline-flex;align-items:center;justify-content:center;gap:22px;min-height:52px;padding:14px 24px;border-radius:10px;border:1px solid var(--ssrx-action);background:var(--ssrx-action);color:var(--ssrx-action-text)!important;font:800 15px/1.4 inherit!important;text-decoration:none!important;transition:background .15s ease}
.ssr-story-experience .ssr-auth-gate .ssr-auth-gate-button:hover{background:var(--ssrx-action-hover);border-color:var(--ssrx-action-hover);color:var(--ssrx-action-hover-text)!important}
.ssr-story-experience .ssr-auth-gate .ssr-auth-gate-button:focus-visible{outline:2px solid var(--ssrx-action);outline-offset:4px}
.ssr-story-experience .ssr-auth-gate .ssr-auth-gate-footnote{font-size:13px!important;margin:24px 0 0!important;max-width:580px}
@media(max-width:540px){.ssr-story-experience .ssr-auth-gate{width:calc(100% - 40px)}.ssr-story-experience .ssr-auth-gate .ssr-auth-gate-button{width:100%}}