:root {
	/* Dark Theme - Native */
	--color__primary: #F5A623;
	--color__primary_hover: #FFBA42;
	--color__primary_light: rgba(245, 166, 35, 0.15);
	--color__accent: #06B6D4;
	--color__success: #22C55E;
	--color__warning: #F97316;
	--color__error: #EF4444;
	--color__danger: #DC2626;
	--color__bg: #0D1117;
	--color__surface: #161B22;
	--color__surface_hover: #21262D;
	--color__input_bg: #0D1117;
	--color__text_primary: #E6EDF3;
	--color__text_secondary: #8B949E;
	--color__text_muted: #6E7681;
	--color__border: #30363D;
	--color__sidebar_bg: #010409;
	--color__sidebar_text: #8B949E;
	--color__sidebar_active: #F5A623;
	--color__preview_bg: #0D1117;
	--color__preview_inner: #010409;
	--color__btn_dark: #21262D;
	--shadow__sm: 0 1px 2px rgba(0,0,0,0.3);
	--shadow__md: 0 4px 6px rgba(0,0,0,0.4);
	--shadow__lg: 0 10px 25px rgba(0,0,0,0.5);
	--radius__sm: 6px;
	--radius__md: 8px;
	--radius__lg: 12px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	background: var(--color__bg);
	color: var(--color__text_primary);
	line-height: 1.5;
	font-size: 14px;
}

/* Auth Pages */
.auth-page {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color__sidebar_bg);
}

.auth-page--split {
	background: var(--color__surface);
}

.auth-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 100vh;
	width: 100%;
}

.auth-split__left {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px;
	background: var(--color__surface);
}

.auth-split__right {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px;
	background: var(--color__sidebar_bg);
}

.auth-form-container {
	width: 100%;
	max-width: 400px;
}

.auth-title {
	font-size: 28px;
	font-weight: 700;
	color: var(--color__text_primary);
	margin-bottom: 32px;
}

.btn--auth0 {
	font-size: 16px;
	padding: 14px 24px;
}

/* Auth promo panel */
.auth-promo {
	max-width: 480px;
	text-align: center;
}

.auth-promo__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	margin-bottom: 48px;
	font-size: 28px;
	font-weight: 700;
}

.auth-promo__logo-text {
	color: #FFFFFF;
}

.auth-promo__logo-highlight {
	color: var(--color__primary);
}

.auth-promo__logo-dot {
	color: var(--color__sidebar_text);
	font-size: 14px;
	margin-left: 4px;
	font-weight: 400;
}

.auth-promo__image {
	position: relative;
	margin-bottom: 40px;
}

.auth-promo__placeholder {
	background: rgba(255, 255, 255, 0.1);
	border-radius: var(--radius__lg);
	padding: 60px 80px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.3);
}

.auth-promo__badge {
	position: absolute;
	bottom: -20px;
	right: 20px;
	background: var(--color__surface);
	border-radius: var(--radius__md);
	padding: 12px 16px;
	display: flex;
	align-items: center;
	gap: 12px;
	box-shadow: var(--shadow__lg);
}

.auth-promo__badge svg {
	color: var(--color__primary);
}

.auth-promo__badge-text {
	text-align: left;
}

.auth-promo__badge-text span {
	display: block;
	font-size: 11px;
	color: var(--color__primary);
}

.auth-promo__badge-text strong {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: var(--color__primary);
}

.auth-promo__title {
	font-size: 32px;
	font-weight: 700;
	color: #FFFFFF;
	margin-bottom: 16px;
}

.auth-promo__desc {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.7);
	line-height: 1.6;
	margin-bottom: 32px;
}

.auth-promo__dots {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.auth-promo__dots span {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.3);
}

.auth-promo__dots span.active {
	width: 24px;
	border-radius: 12px;
	background: var(--color__primary);
}

/* Auth responsive */
@media (max-width: 900px) {
	.auth-split {
		grid-template-columns: 1fr;
	}
	.auth-split__right {
		display: none;
	}
	.auth-split__left {
		padding: 24px;
	}
}

.auth-container { width: 100%; max-width: 420px; padding: 20px; }

.auth-logo {
	text-align: center;
	margin-bottom: 32px;
}

.auth-logo .logo-icon {
	width: 56px;
	height: 56px;
	background: var(--color__primary);
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 16px;
	color: white;
}

.auth-logo h1 { font-size: 22px; font-weight: 600; color: #FFFFFF; }
.auth-logo span { color: var(--color__sidebar_text); font-size: 13px; }

.auth-card {
	background: var(--color__surface);
	border-radius: var(--radius__lg);
	padding: 32px;
	box-shadow: var(--shadow__lg);
}

.auth-card h2 { font-size: 20px; margin-bottom: 8px; color: var(--color__text_primary); }
.auth-subtitle { color: var(--color__text_secondary); margin-bottom: 24px; font-size: 14px; }

.auth-form .form__group { margin-bottom: 16px; }

.auth-divider {
	display: flex;
	align-items: center;
	margin: 24px 0;
	color: var(--color__text_secondary);
}

.auth-divider::before,
.auth-divider::after {
	content: '';
	flex: 1;
	border-bottom: 1px solid var(--color__border);
}

.auth-divider span { padding: 0 16px; font-size: 12px; }

.auth-footer {
	text-align: center;
	color: var(--color__text_secondary);
	font-size: 14px;
}

.auth-footer a { color: var(--color__primary); text-decoration: none; font-weight: 500; }

.auth-link { color: var(--color__primary); text-decoration: none; font-size: 14px; }

.form__group--checkbox {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.form__group--checkbox label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: var(--color__text_secondary);
}

.error-message {
	background: rgba(239,68,68,0.1);
	border: 1px solid var(--color__error);
	color: var(--color__error);
	padding: 12px;
	border-radius: var(--radius__md);
	margin-bottom: 16px;
	font-size: 14px;
}

.success-message {
	background: rgba(34,197,94,0.1);
	border: 1px solid var(--color__success);
	color: var(--color__success);
	padding: 12px;
	border-radius: var(--radius__md);
	margin-bottom: 16px;
	font-size: 14px;
}

.loading-spinner {
	width: 40px;
	height: 40px;
	border: 3px solid var(--color__border);
	border-top-color: var(--color__primary);
	border-radius: 50%;
	margin: 24px auto;
	animation: spin 1s linear infinite;
}

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

/* Signup Form (forms.ceots.io style) */
.signup-container {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	min-height: 100vh;
	padding: 40px 20px;
	padding-top: 60px;
	background: var(--color__sidebar_bg);
}

.signup-card {
	width: 100%;
	max-width: 500px;
	margin-bottom: 7vh;
}

.signup-title {
	font-size: 24px;
	font-weight: 600;
	color: #ffffff;
	text-align: center;
	margin-bottom: 32px;
}

.signup-error {
	background: rgba(239,68,68,0.2);
	border: 1px solid #ef4444;
	color: #ef4444;
	padding: 12px 16px;
	border-radius: 5px;
	margin-bottom: 20px;
	font-size: 14px;
}

.signup-form { display: flex; flex-direction: column; }

.signup-field {
	display: flex;
	flex-direction: column;
	margin-bottom: 17px;
}

.signup-label {
	font-size: 16px;
	font-weight: 400;
	color: #ffffff;
	margin-bottom: 8px;
}

.signup-required { color: #ef4444; }

.signup-input,
.signup-form input[type="text"],
.signup-form input[type="email"],
.signup-form input[type="password"],
.signup-form input[type="tel"],
.signup-form select,
.signup-form textarea {
	height: 42px;
	padding: 0 17px;
	font-size: 16px !important; /* 16px minimum prevents iOS zoom on focus */
	border: 1px solid var(--color__border);
	border-radius: 5px;
	background: var(--color__input_bg);
	color: var(--color__text_primary);
	box-sizing: border-box;
	-webkit-appearance: none;
	-webkit-text-size-adjust: 100%;
	touch-action: manipulation;
}

.signup-input:focus {
	outline: none;
	border-color: #086fff;
	box-shadow: #086fff 0 0 0 1px;
}

.signup-input::placeholder {
	color: #999;
}

.signup-hint {
	font-size: 12px;
	color: rgba(255,255,255,0.6);
	margin-top: 6px;
}

/* Password toggle */
.signup-password-wrapper {
	position: relative;
	width: 100%;
}

.signup-password-wrapper .signup-input {
	width: 100%;
	padding-right: 48px;
}

.signup-password-toggle {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	background: transparent;
	border: none;
	outline: none;
	padding: 0;
	margin: 0;
	cursor: pointer;
	color: #666;
	line-height: 1;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.signup-password-toggle:hover {
	color: #333;
}

.signup-password-toggle:focus {
	outline: none;
}

.signup-password-icon {
	display: block;
	width: 20px;
	height: 20px;
}

/* Subdomain toggle */
.signup-subdomain-toggle {
	display: flex;
	align-items: center;
	gap: 6px;
	color: rgba(255,255,255,0.7);
	font-size: 14px;
	cursor: pointer;
	margin-bottom: 12px;
	padding: 8px 0;
}

.signup-subdomain-toggle:hover {
	color: #ffffff;
}

.signup-subdomain-toggle__icon {
	width: 16px;
	height: 16px;
	transition: transform 0.2s;
}

.signup-subdomain-toggle.is-open .signup-subdomain-toggle__icon {
	transform: rotate(180deg);
}

.signup-subdomain-section {
	margin-bottom: 16px;
}

/* Browser mockup */
.signup-browser {
	background: var(--color__surface);
	border-radius: 8px;
	overflow: hidden;
	margin-bottom: 12px;
}

.signup-browser__bar {
	background: var(--color__surface_hover);
	padding: 8px 12px;
	display: flex;
	align-items: center;
	gap: 12px;
}

.signup-browser__dots {
	display: flex;
	gap: 6px;
}

.signup-browser__dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
}

.signup-browser__dot--red { background: #ff5f57; }
.signup-browser__dot--yellow { background: #febc2e; }
.signup-browser__dot--green { background: #28c840; }

.signup-browser__url {
	flex: 1;
	min-width: 0;
	background: var(--color__input_bg);
	border-radius: 4px;
	padding: 6px 12px;
	font-size: 14px;
	font-family: monospace;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.signup-browser__https { color: #28c840; }
.signup-browser__subdomain { color: #086fff; font-weight: 600; }
.signup-browser__domain { color: #666; }

/* Checkbox fields */
.signup-field--checkbox { flex-direction: row; align-items: center; }

.signup-checkbox-label {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	color: rgba(255,255,255,0.8);
	cursor: pointer;
}

.signup-checkbox-label input[type="checkbox"] {
	width: 18px;
	height: 18px;
	cursor: pointer;
}

.signup-checkbox-label a {
	color: #086fff;
	text-decoration: none;
}

.signup-checkbox-label a:hover { text-decoration: underline; }

/* Submit button */
.signup-submit {
	height: 45px;
	max-width: 350px;
	width: 100%;
	margin: 20px auto 0;
	background: #faa114;
	color: #ffffff;
	font-size: 16px;
	font-weight: bold;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.signup-submit:hover { background: #e89400; }
.signup-submit:active { background: #d08000; }
.signup-submit:disabled { background: #888; cursor: not-allowed; }

.signup-submit__spinner {
	width: 20px;
	height: 20px;
	border: 2px solid rgba(255,255,255,0.3);
	border-top-color: #ffffff;
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
}

.signup-footer {
	text-align: center;
	margin-top: 24px;
	font-size: 14px;
	color: rgba(255,255,255,0.7);
}

.signup-footer a {
	color: #086fff;
	text-decoration: none;
	font-weight: 500;
}

.signup-footer a:hover { text-decoration: underline; }

@media (max-width: 768px) {
	.signup-card { padding: 24px; }
	.signup-title { font-size: 24px; }
}

/* App Layout */
.layout { display: flex; min-height: 100vh; }

.sidebar {
	width: 220px;
	background: var(--color__sidebar_bg);
	display: flex;
	flex-direction: column;
	position: fixed;
	height: 100vh;
	z-index: 100;
}

.sidebar__logo {
	padding: 20px 20px 24px;
	display: flex;
	align-items: center;
	gap: 12px;
}

.sidebar__logo .logo-icon {
	width: 42px;
	height: 42px;
	background: var(--color__primary);
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-weight: 700;
	font-size: 18px;
}

.sidebar__logo h1 { font-size: 15px; font-weight: 600; color: #FFFFFF; line-height: 1.2; }
.sidebar__logo span { font-size: 11px; color: var(--color__sidebar_text); display: block; margin-top: 2px; }

.sidebar__nav { list-style: none; padding: 8px 12px; flex: 1; }
.sidebar__nav li { margin-bottom: 4px; }

.sidebar__nav a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 14px;
	color: var(--color__sidebar_text);
	text-decoration: none;
	transition: all 0.15s;
	border-radius: var(--radius__md);
	font-size: 14px;
	font-weight: 500;
	position: relative;
}

.sidebar__nav a:hover {
	background: rgba(255,255,255,0.06);
	color: #FFFFFF;
}

.sidebar__nav a.active {
	background: rgba(255,255,255,0.08);
	color: var(--color__primary);
}

.sidebar__nav a.active::before {
	content: '';
	position: absolute;
	left: -12px;
	top: 50%;
	transform: translateY(-50%);
	width: 3px;
	height: 24px;
	background: var(--color__primary);
	border-radius: 0 2px 2px 0;
}

.sidebar__nav-main { flex: 1; }

.sidebar__footer {
	padding: 8px 12px 16px;
	border-top: 1px solid rgba(255,255,255,0.06);
}

.sidebar__nav--footer { padding: 8px 0; }
.sidebar__nav--footer li { margin-bottom: 2px; }

.sidebar__signout {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 14px;
	color: var(--color__primary);
	text-decoration: none;
	border-radius: var(--radius__md);
	transition: all 0.15s;
	font-size: 14px;
}

.sidebar__signout:hover { background: rgba(255,255,255,0.06); }

.nav-badge {
	margin-left: auto;
	background: var(--color__primary);
	color: #1A1D21;
	font-size: 11px;
	font-weight: 600;
	padding: 2px 8px;
	border-radius: 10px;
}

.main { flex: 1; margin-left: 220px; display: flex; flex-direction: column; background: var(--color__bg); }

.header {
	background: var(--color__bg);
	padding: 20px 32px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.header__welcome {
	font-size: 18px;
	font-weight: 600;
	color: var(--color__text_primary);
}

.header__status { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--color__text_secondary); }

.status-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--color__text_muted);
}

.status-dot--ready { background: var(--color__success); }
.status-dot--live { background: var(--color__error); animation: pulse 1s ease-in-out infinite; }

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

.header__user { display: flex; align-items: center; gap: 16px; }

.header__user_avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--color__primary);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	font-size: 13px;
	color: #1A1D21;
	cursor: pointer;
}

.header__actions {
	display: flex;
	align-items: center;
	gap: 8px;
}

.header__icon-btn {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: transparent;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color__text_secondary);
	cursor: pointer;
	transition: all 0.15s;
}

.header__icon-btn:hover {
	background: var(--color__surface_hover);
	color: var(--color__text_primary);
}

.header__icon-btn--notifications { position: relative; }

.notification-dot {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 8px;
	height: 8px;
	background: var(--color__primary);
	border-radius: 50%;
	border: 2px solid var(--color__surface);
}

.header__user-menu {
	position: relative;
}

.header__user-profile {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 12px 6px 6px;
	border-radius: var(--radius__md);
	cursor: pointer;
	transition: background 0.15s;
	background: transparent;
	border: none;
	font-family: inherit;
}

.header__user-profile:hover { background: var(--color__surface_hover); }

.header__user-name {
	font-size: 14px;
	font-weight: 500;
	color: var(--color__text_primary);
}

.header__user-profile svg { color: var(--color__text_secondary); }

.header__dropdown {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	min-width: 180px;
	background: var(--color__surface);
	border-radius: var(--radius__md);
	box-shadow: var(--shadow__lg);
	border: 1px solid var(--color__border);
	padding: 8px 0;
	display: none;
	z-index: 100;
}

.header__dropdown.open {
	display: block;
}

.header__dropdown-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 16px;
	color: var(--color__text_primary);
	text-decoration: none;
	font-size: 14px;
	transition: background 0.15s;
}

.header__dropdown-item:hover {
	background: var(--color__surface_hover);
}

.header__dropdown-item svg {
	color: var(--color__text_secondary);
}

.header__dropdown-item--logout {
	color: var(--color__error);
}

.header__dropdown-item--logout svg {
	color: var(--color__error);
}

.header__dropdown-divider {
	height: 1px;
	background: var(--color__border);
	margin: 8px 0;
}

.content { padding: 32px; flex: 1; }

/* Cards */
.card {
	background: var(--color__surface);
	border-radius: var(--radius__lg);
	padding: 24px;
	margin-bottom: 0;
	box-shadow: none;
	border: none;
}

.card__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.card__title { font-size: 15px; font-weight: 600; color: var(--color__text_primary); }

.section-title {
	font-size: 14px;
	font-weight: 600;
	color: var(--color__text_primary);
	margin-top: 28px;
	margin-bottom: 16px;
}

.section-title:first-child { margin-top: 0; }

h4.section-title { font-size: 13px; }

/* Page Header */
.page__header { margin-bottom: 28px; display: flex; justify-content: space-between; align-items: flex-start; }
.page__header h1 { font-size: 20px; font-weight: 600; margin-bottom: 6px; color: var(--color__text_primary); }
.page__header p { color: var(--color__text_secondary); font-size: 14px; }

/* Forms */
.form__group { margin-bottom: 20px; }
.form__label { display: block; margin-bottom: 8px; font-weight: 500; font-size: 13px; color: var(--color__text_secondary); }

.form__input {
	width: 100%;
	padding: 12px 14px;
	background: var(--color__input_bg);
	border: 1px solid #E8ECF0;
	border-radius: var(--radius__md);
	color: var(--color__text_primary);
	font-size: 14px;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.form__input:focus {
	outline: none;
	border-color: var(--color__primary);
	box-shadow: 0 0 0 3px var(--color__primary_light);
	background: var(--color__surface);
}

select.form__input {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	padding-right: 40px;
}

.form__input::placeholder { color: var(--color__text_muted); }

.form__textarea { min-height: 100px; resize: vertical; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form__actions { display: flex; gap: 12px; margin-top: 24px; }

/* Buttons */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 18px;
	border-radius: var(--radius__md);
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.15s;
	border: none;
	text-decoration: none;
}

.btn--primary { background: var(--color__primary); color: #1A1D21; font-weight: 500; }
.btn--primary:hover { background: var(--color__primary_hover); }
.btn--secondary { background: var(--color__btn_dark); color: #FFFFFF; border: none; }
.btn--secondary:hover { background: #4B5563; }
.btn--outline { background: var(--color__surface); color: var(--color__text_primary); border: 1px solid var(--color__border); }
.btn--outline:hover { background: var(--color__surface_hover); }
.btn--danger { background: var(--color__danger); color: white; }
.btn--danger:hover { background: #B91C1C; }
.btn--ghost { background: transparent; color: var(--color__text_secondary); }
.btn--ghost:hover { background: var(--color__surface_hover); color: var(--color__text_primary); }
.btn--block { width: 100%; justify-content: center; }
.btn--lg { padding: 12px 24px; font-size: 15px; }
.btn--sm { padding: 7px 14px; font-size: 13px; }

.btn--record { background: var(--color__error); color: white; }
.btn--record:hover { background: #DC2626; }

/* Studio Layout - Two Column */
.studio-grid {
	display: grid;
	grid-template-columns: 340px 1fr;
	gap: 24px;
	align-items: start;
}

.studio-left { display: flex; flex-direction: column; gap: 24px; }
.studio-right { display: flex; flex-direction: column; gap: 16px; }

/* Preview Panel - Dark Theme */
.preview-panel {
	background: var(--color__preview_bg);
	border-radius: var(--radius__lg);
	overflow: hidden;
	max-width: 720px;
}

.preview-panel__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px;
	background: transparent;
}

.preview-panel__title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 500;
	color: #FFFFFF;
}

.preview-panel__live-dot {
	width: 8px;
	height: 8px;
	background: var(--color__text_secondary);
	border-radius: 50%;
	opacity: 0.3;
}

.preview-panel__live-dot--active {
	background: var(--color__error);
	opacity: 1;
	animation: pulse 1.5s ease-in-out infinite;
}

.preview-panel__actions {
	display: flex;
	align-items: center;
	gap: 12px;
}

.preview-panel__icon-btn {
	width: 32px;
	height: 32px;
	border-radius: var(--radius__sm);
	background: rgba(255,255,255,0.1);
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #FFFFFF;
	cursor: pointer;
	transition: background 0.15s;
}

.preview-panel__icon-btn:hover { background: rgba(255,255,255,0.2); }
.preview-panel__icon-btn--record { background: var(--color__error); }
.preview-panel__icon-btn--record:hover { background: #DC2626; }

.preview-panel__viewers {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: #FFFFFF;
}

.preview-panel__viewers svg { opacity: 0.7; }

.preview-panel__platforms {
	display: flex;
	align-items: center;
	gap: 4px;
}

.preview-panel__platform {
	width: 24px;
	height: 24px;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 600;
	color: white;
}

.preview-panel__platform--youtube { background: #FF0000; }
.preview-panel__platform--facebook { background: #1877F2; }

.preview-container { display: flex; flex-direction: column; }

.preview-video {
	aspect-ratio: 16/9;
	background: var(--color__preview_inner);
	border-radius: var(--radius__md);
	margin: 0 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	position: relative;
}

.preview-placeholder {
	text-align: center;
	color: rgba(255,255,255,0.5);
}

.preview-placeholder__icon {
	width: 80px;
	height: 80px;
	background: rgba(255,255,255,0.08);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 20px;
	color: rgba(255,255,255,0.25);
}

.preview-placeholder span { font-size: 18px; font-weight: 500; display: block; margin-bottom: 8px; color: rgba(255,255,255,0.9); }
.preview-placeholder p { font-size: 14px; color: rgba(255,255,255,0.5); }

.preview-video__stream {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: none;
	position: absolute;
	top: 0;
	left: 0;
}

.preview-controls {
	display: flex;
	gap: 12px;
	justify-content: center;
	padding: 24px 16px;
}

.stream-actions { margin-top: 24px; display: flex; gap: 12px; }

.status-indicator { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--color__success); }

/* Form label row */
.form__label-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 8px;
}

.status-text { font-size: 12px; font-weight: 500; }
.status-text--success { color: var(--color__success); }
.status-text--warning { color: var(--color__warning); }

/* Option items */
.option-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--color__border);
}

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

.option-item__icon {
	width: 32px;
	height: 32px;
	border-radius: var(--radius__sm);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color__text_secondary);
}

.option-item__icon--cloud { background: rgba(99, 102, 241, 0.1); color: #6366F1; }
.option-item__icon--local { background: rgba(107, 114, 128, 0.1); color: #6B7280; }
.option-item__icon--youtube { background: rgba(236, 72, 153, 0.1); color: #EC4899; }

.option-item__label { flex: 1; font-size: 14px; color: var(--color__text_primary); }

/* Stream bottom controls */
.stream-bottom-controls {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 16px;
	padding: 16px;
	background: var(--color__preview_bg);
	border-radius: var(--radius__lg);
	max-width: 720px;
}

.stream-timer {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--color__preview_inner);
	padding: 10px 16px;
	border-radius: var(--radius__md);
}

.stream-timer__dot {
	width: 10px;
	height: 10px;
	background: var(--color__text_secondary);
	border-radius: 50%;
	opacity: 0.3;
}

.stream-timer--active .stream-timer__dot {
	background: var(--color__error);
	opacity: 1;
	animation: pulse 1.5s ease-in-out infinite;
}

.stream-timer__time {
	font-family: 'SF Mono', 'Monaco', 'Menlo', monospace;
	font-size: 14px;
	color: #FFFFFF;
	letter-spacing: 0.5px;
}

.stream-timer__mute-btn {
	width: 28px;
	height: 28px;
	border-radius: var(--radius__sm);
	background: transparent;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255,255,255,0.6);
	cursor: pointer;
	transition: all 0.15s;
}

.stream-timer__mute-btn:hover { color: #FFFFFF; background: rgba(255,255,255,0.1); }

.btn--stop-recording {
	background: var(--color__primary);
	color: #1A1D21;
	font-weight: 600;
	padding: 12px 24px;
}

/* Destinations */
.destinations-list { display: flex; flex-direction: column; gap: 12px; }

.destination-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
	background: var(--color__bg);
	border-radius: var(--radius__md);
}

.destination-icon {
	width: 40px;
	height: 40px;
	border-radius: var(--radius__md);
	display: flex;
	align-items: center;
	justify-content: center;
}

.destination-icon--youtube { background: #FF0000; color: white; }
.destination-icon--facebook { background: #1877F2; color: white; }

.destination-info { flex: 1; }
.destination-info h4 { font-size: 14px; font-weight: 500; }
.destination-status { font-size: 12px; }
.destination-status--connected { color: var(--color__success); }
.destination-status--disconnected { color: var(--color__text_secondary); }

.destination-item--add { justify-content: center; border: 1px dashed var(--color__border); background: transparent; }

/* Live Studio */
.live-section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 24px;
}

.live-section-header .section-title { margin: 0; }

.live-add-btn {
	width: 28px;
	height: 28px;
	border-radius: var(--radius__sm);
	background: var(--color__bg);
	border: 1px solid var(--color__border);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color__text_secondary);
	cursor: pointer;
	transition: all 0.15s;
}

.live-add-btn:hover {
	background: var(--color__surface_hover);
	color: var(--color__text_primary);
}

/* Live Destinations */
.live-destinations {
	margin-top: 12px;
}

.live-destination {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
	background: var(--color__bg);
	border-radius: var(--radius__md);
	border: 1px solid transparent;
}

.live-destination--primary {
	background: rgba(6, 182, 212, 0.08);
	border-color: var(--color__accent);
	border-bottom: 1px dashed rgba(6, 182, 212, 0.3);
	border-radius: var(--radius__md) var(--radius__md) 0 0;
}

.live-destination__icon {
	width: 36px;
	height: 36px;
	border-radius: var(--radius__sm);
	display: flex;
	align-items: center;
	justify-content: center;
}

.live-destination__icon--sermonnet {
	background: var(--color__accent);
	color: white;
	font-weight: 700;
	font-size: 16px;
}

.icon-together {
	width: 36px;
	height: 36px;
	background: var(--color__accent);
	border-radius: var(--radius__sm);
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-weight: 700;
	font-size: 16px;
}

.live-destination__info { flex: 1; }

.live-destination__name {
	font-size: 14px;
	font-weight: 500;
	color: var(--color__text_primary);
}

.live-destination__type {
	font-size: 12px;
	color: var(--color__accent);
}

.live-destination__badge {
	background: var(--color__success);
	color: white;
	font-size: 10px;
	font-weight: 600;
	padding: 4px 8px;
	border-radius: 4px;
	text-transform: uppercase;
}

.live-destination__desc {
	font-size: 12px;
	color: var(--color__text_secondary);
	padding: 8px 12px 0;
}

.live-destination__url {
	font-family: var(--font__mono);
	font-size: 11px;
	word-break: break-all;
}

.live-destination__copy {
	background: transparent;
	border: none;
	color: var(--color__text_secondary);
	cursor: pointer;
	padding: 6px;
	border-radius: var(--radius__sm);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.live-destination__copy:hover {
	background: var(--color__surface_hover);
	color: var(--color__text_primary);
}

.live-destination__copy svg {
	width: 16px;
	height: 16px;
}

.live-destination__streamkey {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	margin-top: -1px;
	background: rgba(6, 182, 212, 0.04);
	border: 1px solid var(--color__accent);
	border-top: 1px dashed rgba(6, 182, 212, 0.3);
	border-radius: 0 0 var(--radius__md) var(--radius__md);
}

.live-destination__streamkey-label {
	font-size: 11px;
	font-weight: 500;
	color: var(--color__text_secondary);
	flex-shrink: 0;
}

.live-destination__streamkey-value {
	font-family: var(--font__mono);
	font-size: 11px;
	color: var(--color__accent);
	background: rgba(0, 0, 0, 0.2);
	padding: 4px 8px;
	border-radius: var(--radius__sm);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	flex: 1;
	min-width: 0;
}

/* YouTube Connect Link */
.youtube-connect-link {
	display: inline-block;
	background: #FF0000;
	color: white;
	text-decoration: none;
	cursor: pointer;
	padding: 4px 10px;
	border-radius: var(--radius__sm);
	font-size: 11px;
	font-weight: 500;
	transition: all 0.2s;
}

.youtube-connect-link:hover {
	background: #cc0000;
	color: white;
}

/* YouTube Disconnect Button */
.youtube-disconnect-btn {
	background: none;
	border: none;
	color: var(--color__text_secondary);
	font-size: 16px;
	cursor: pointer;
	padding: 2px 6px;
	margin-left: 8px;
	border-radius: var(--radius__sm);
	transition: all 0.2s;
}

.youtube-disconnect-btn:hover {
	background: rgba(255, 0, 0, 0.1);
	color: #dc3545;
}

/* YouTube Connected State */
.youtube-connected-email {
	font-size: 11px;
	color: var(--color__text_secondary);
	max-width: 150px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Facebook Connect Link */
.facebook-connect-link {
	display: inline-block;
	background: #1877F2;
	color: white;
	text-decoration: none;
	cursor: pointer;
	padding: 4px 10px;
	border-radius: var(--radius__sm);
	font-size: 11px;
	font-weight: 500;
	transition: all 0.2s;
}

.facebook-connect-link:hover {
	background: #166FE5;
	color: white;
}

/* Facebook Disconnect Button */
.facebook-disconnect-btn {
	background: none;
	border: none;
	color: var(--color__text_secondary);
	font-size: 16px;
	cursor: pointer;
	padding: 2px 6px;
	margin-left: 8px;
	border-radius: var(--radius__sm);
	transition: all 0.2s;
}

.facebook-disconnect-btn:hover {
	background: rgba(24, 119, 242, 0.1);
	color: #1877F2;
}

/* Live Simulcast */
.live-simulcast {
	margin-top: 16px;
}

.live-simulcast__label {
	font-size: 12px;
	color: var(--color__text_secondary);
	margin-bottom: 8px;
}

.live-simulcast__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	background: var(--color__bg);
	border-radius: var(--radius__md);
	margin-bottom: 8px;
}

.live-simulcast__item:last-child { margin-bottom: 0; }

.live-simulcast__icon {
	width: 28px;
	height: 28px;
	border-radius: var(--radius__sm);
	display: flex;
	align-items: center;
	justify-content: center;
}

.live-simulcast__icon--youtube { background: #FF0000; color: white; }
.live-simulcast__icon--facebook { background: #1877F2; color: white; }
.live-simulcast__icon--rtmp { background: var(--color__text_secondary); color: white; }

.live-simulcast__icon svg { width: 16px; height: 16px; }

.live-simulcast__name {
	flex: 1;
	font-size: 14px;
	color: var(--color__text_primary);
}

/* Live Scenes */
.live-scenes {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 12px;
}

.live-scene {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
	background: var(--color__bg);
	border-radius: var(--radius__md);
	cursor: pointer;
	transition: all 0.15s;
	border: 1px solid transparent;
}

.live-scene:hover {
	background: var(--color__surface_hover);
}

.live-scene--active {
	background: rgba(245, 166, 35, 0.08);
	border-color: var(--color__primary);
}

.live-scene__icon {
	width: 36px;
	height: 36px;
	background: var(--color__surface);
	border-radius: var(--radius__sm);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color__text_secondary);
}

.live-scene--active .live-scene__icon {
	background: var(--color__primary);
	color: #1A1D21;
}

.live-scene__info { flex: 1; }

.live-scene__name {
	font-size: 14px;
	font-weight: 500;
	color: var(--color__text_primary);
}

.live-scene__status {
	font-size: 12px;
	color: var(--color__text_secondary);
}

.live-scene__status--active {
	color: var(--color__primary);
}

/* Live Sources */
.live-sources {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 12px;
}

.live-source {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	background: var(--color__bg);
	border-radius: var(--radius__md);
}

.live-source__icon {
	width: 32px;
	height: 32px;
	background: var(--color__surface);
	border-radius: var(--radius__sm);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color__text_secondary);
}

.live-source__icon--greenscreen {
	background: rgba(34, 197, 94, 0.1);
	color: var(--color__success);
}

.live-source__name {
	flex: 1;
	font-size: 14px;
	color: var(--color__text_primary);
}

.live-source__visibility {
	width: 32px;
	height: 32px;
	border: none;
	background: transparent;
	border-radius: var(--radius__sm);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color__text_muted);
	cursor: pointer;
	transition: all 0.15s;
}

.live-source__visibility:hover {
	background: var(--color__surface_hover);
	color: var(--color__text_primary);
}

.live-source__visibility--visible {
	color: var(--color__text_primary);
}

/* Live Bottom Controls */
.live-bottom-controls {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 12px;
	padding: 16px;
	background: var(--color__preview_bg);
	border-radius: var(--radius__lg);
	max-width: 720px;
}

.btn--mute {
	background: var(--color__surface);
	color: var(--color__text_primary);
	border: none;
	padding: 12px 20px;
	font-weight: 500;
}

.btn--mute:hover {
	background: var(--color__surface_hover);
}

.btn--go-live {
	background: var(--color__primary);
	color: white;
	font-weight: 600;
	padding: 12px 24px;
}

.btn--go-live:hover {
	background: var(--color__primary_hover);
}

.btn--stop-live {
	background: #F87171;
	color: white;
	font-weight: 600;
	padding: 12px 24px;
}

.btn--stop-live:hover {
	background: #EF4444;
}

/* In Studio Page */
.instudio-grid {
	display: grid;
	grid-template-columns: 380px 1fr;
	gap: 24px;
	align-items: start;
}

.instudio-left { display: flex; flex-direction: column; gap: 24px; }
.instudio-right { display: flex; flex-direction: column; gap: 16px; }

.card__subtitle {
	font-size: 13px;
	color: var(--color__text_secondary);
	margin-top: 4px;
}

/* In Studio Scenes */
.instudio-scenes {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 12px;
}

.instudio-scene {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
	background: var(--color__bg);
	border-radius: var(--radius__md);
	cursor: pointer;
	transition: all 0.15s;
	border: 1px solid transparent;
}

.instudio-scene:hover { background: var(--color__surface_hover); }

.instudio-scene--active {
	background: var(--color__sidebar);
	border-color: var(--color__sidebar);
}

.instudio-scene--active .instudio-scene__name,
.instudio-scene--active .instudio-scene__desc {
	color: white;
}

.instudio-scene__icon {
	width: 36px;
	height: 36px;
	background: var(--color__surface);
	border-radius: var(--radius__sm);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color__accent);
}

.instudio-scene--active .instudio-scene__icon {
	background: var(--color__accent);
	color: var(--color__sidebar);
}

.instudio-scene__info { flex: 1; }

.instudio-scene__name {
	font-size: 14px;
	font-weight: 500;
	color: var(--color__text_primary);
}

.instudio-scene__desc {
	font-size: 12px;
	color: var(--color__text_secondary);
}

.instudio-scene__btn {
	width: 28px;
	height: 28px;
	border: none;
	background: transparent;
	border-radius: var(--radius__sm);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color__text_muted);
	cursor: pointer;
	transition: all 0.15s;
}

.instudio-scene__btn:hover {
	background: rgba(255,255,255,0.1);
	color: var(--color__text_primary);
}

.instudio-scene--active .instudio-scene__btn {
	color: rgba(255,255,255,0.6);
}

.instudio-scene--active .instudio-scene__btn:hover {
	color: white;
}

/* In Studio Sources */
.instudio-sources {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 12px;
}

.instudio-source {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
	background: var(--color__bg);
	border-radius: var(--radius__md);
}

.instudio-source--warning {
	background: rgba(239, 68, 68, 0.08);
}

.instudio-source--greenscreen {
	background: rgba(34, 197, 94, 0.08);
	border: 1px solid rgba(34, 197, 94, 0.2);
}

.instudio-source__icon {
	width: 32px;
	height: 32px;
	border-radius: var(--radius__sm);
	display: flex;
	align-items: center;
	justify-content: center;
}

.instudio-source__icon--mic {
	background: rgba(99, 102, 241, 0.1);
	color: #6366F1;
}

.instudio-source__icon--mic-warning {
	background: rgba(239, 68, 68, 0.1);
	color: #EF4444;
}

.instudio-source__icon--music {
	background: var(--color__surface);
	color: var(--color__text_secondary);
}

.instudio-source__icon--greenscreen {
	background: rgba(34, 197, 94, 0.1);
	color: var(--color__success);
}

.instudio-source__info { flex: 1; min-width: 0; }

.instudio-source__name {
	font-size: 14px;
	font-weight: 500;
	color: var(--color__text_primary);
}

.instudio-source__name--green {
	color: var(--color__success);
}

.instudio-source__desc {
	font-size: 12px;
	color: var(--color__text_secondary);
}

.instudio-source__desc--warning {
	color: #EF4444;
}

.instudio-source__level {
	width: 60px;
	height: 6px;
	background: var(--color__border);
	border-radius: 3px;
	overflow: hidden;
}

.instudio-source__level-bar {
	height: 100%;
	background: var(--color__accent);
	border-radius: 3px;
	transition: width 0.3s;
}

.instudio-source__level-bar--warning {
	background: #EF4444;
}

.instudio-source__level-bar--disabled {
	background: var(--color__border);
}

.instudio-source__audio-btn {
	width: 32px;
	height: 32px;
	border: none;
	background: var(--color__accent);
	border-radius: var(--radius__sm);
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	cursor: pointer;
	transition: all 0.15s;
}

.instudio-source__audio-btn:hover {
	opacity: 0.9;
}

.instudio-source__audio-btn--active {
	background: var(--color__accent);
}

.instudio-source__audio-btn--warning {
	background: #EF4444;
}

/* In Studio Destinations */
.instudio-destinations {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 12px;
}

.instudio-destination {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
	background: var(--color__bg);
	border-radius: var(--radius__md);
}

.instudio-destination__icon {
	width: 32px;
	height: 32px;
	border-radius: var(--radius__sm);
	display: flex;
	align-items: center;
	justify-content: center;
}

.instudio-destination__icon--youtube { background: #FF0000; color: white; }
.instudio-destination__icon--facebook { background: #1877F2; color: white; }

.instudio-destination__icon svg { width: 16px; height: 16px; }

.instudio-destination__info {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.instudio-destination__name {
	font-size: 14px;
	font-weight: 500;
	color: var(--color__text_primary);
}

.instudio-destination__viewers {
	font-size: 12px;
	color: var(--color__success);
}

.instudio-destination__badge {
	font-size: 11px;
	font-weight: 500;
	padding: 4px 8px;
	border-radius: 4px;
}

.instudio-destination__badge--connected {
	background: rgba(34, 197, 94, 0.1);
	color: var(--color__success);
}

.instudio-destination__badge--disabled {
	background: var(--color__surface);
	color: var(--color__text_muted);
}

/* In Studio Actions */
.instudio-actions {
	display: flex;
	gap: 12px;
	margin-top: 20px;
}

.btn--emergency {
	background: transparent;
	border: 1px solid #EF4444;
	color: #EF4444;
	font-weight: 500;
	padding: 10px 16px;
}

.btn--emergency:hover {
	background: rgba(239, 68, 68, 0.1);
}

.btn--outline {
	background: transparent;
	border: 1px solid var(--color__accent);
	color: var(--color__accent);
	font-weight: 500;
	padding: 10px 16px;
}

.btn--outline:hover {
	background: rgba(6, 182, 212, 0.1);
}

/* In Studio Preview */
.instudio-preview {
	background: var(--color__preview_bg);
	border-radius: var(--radius__lg);
	overflow: hidden;
}

.instudio-preview__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px;
}

.instudio-preview__title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 500;
	color: white;
}

.instudio-preview__live-dot {
	width: 8px;
	height: 8px;
	background: #EF4444;
	border-radius: 50%;
	animation: pulse 1.5s ease-in-out infinite;
}

.instudio-preview__actions {
	display: flex;
	align-items: center;
	gap: 12px;
}

.instudio-preview__scene-indicator {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 16px;
	margin-bottom: 12px;
}

.instudio-preview__scene-badge {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	background: var(--color__preview_inner);
	border-radius: var(--radius__sm);
	color: white;
}

.instudio-preview__scene-indicator span {
	font-size: 13px;
	color: rgba(255,255,255,0.8);
}

.instudio-preview__main {
	aspect-ratio: 16/9;
	background: var(--color__preview_inner);
	border-radius: var(--radius__md);
	margin: 0 16px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.instudio-preview__placeholder {
	text-align: center;
}

.instudio-preview__placeholder-icon {
	color: rgba(255,255,255,0.3);
	margin-bottom: 16px;
}

.instudio-preview__placeholder-title {
	display: block;
	font-size: 18px;
	font-weight: 500;
	color: white;
	margin-bottom: 4px;
}

.instudio-preview__placeholder-desc {
	display: block;
	font-size: 14px;
	color: rgba(255,255,255,0.5);
}

.instudio-preview__controls {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 16px;
	padding: 20px 16px;
}

.instudio-preview__timer {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--color__preview_inner);
	padding: 10px 16px;
	border-radius: var(--radius__md);
}

.instudio-preview__timer-dot {
	width: 10px;
	height: 10px;
	background: #EF4444;
	border-radius: 50%;
	animation: pulse 1.5s ease-in-out infinite;
}

.instudio-preview__timer-time {
	font-family: 'SF Mono', 'Monaco', 'Menlo', monospace;
	font-size: 14px;
	color: white;
	letter-spacing: 0.5px;
}

.instudio-preview__timer-mute {
	width: 28px;
	height: 28px;
	border-radius: var(--radius__sm);
	background: transparent;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255,255,255,0.6);
	cursor: pointer;
	transition: all 0.15s;
}

.instudio-preview__timer-mute:hover {
	color: white;
	background: rgba(255,255,255,0.1);
}

/* In Studio Cameras */
.instudio-cameras {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}

.instudio-camera {
	background: var(--color__surface);
	border-radius: var(--radius__md);
	overflow: hidden;
}

.instudio-camera--active {
	border: 2px solid var(--color__accent);
}

.instudio-camera__label {
	font-size: 12px;
	color: var(--color__text_secondary);
	padding: 8px 12px;
	text-align: center;
}

.instudio-camera__label--active {
	color: var(--color__accent);
}

.instudio-camera__preview {
	aspect-ratio: 16/9;
	background: var(--color__preview_inner);
	display: flex;
	align-items: center;
	justify-content: center;
}

.instudio-camera__icon {
	color: rgba(255,255,255,0.3);
}

/* Analytics Page */
.analytics-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	margin-bottom: 32px;
}

.analytics-stat {
	background: var(--color__surface);
	border-radius: var(--radius__lg);
	padding: 20px 24px;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.analytics-stat__content { flex: 1; }

.analytics-stat__value {
	font-size: 28px;
	font-weight: 700;
	color: var(--color__text_primary);
	margin-bottom: 4px;
}

.analytics-stat__label {
	font-size: 14px;
	color: var(--color__text_secondary);
	margin-bottom: 8px;
}

.analytics-stat__trend {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
}

.analytics-stat__trend--up {
	color: var(--color__success);
}

.analytics-stat__trend--down {
	color: #EF4444;
}

.analytics-stat__trend--neutral {
	color: var(--color__accent);
}

.analytics-stat__icon {
	width: 44px;
	height: 44px;
	border-radius: var(--radius__md);
	display: flex;
	align-items: center;
	justify-content: center;
}

.analytics-stat__icon--video {
	background: rgba(245, 166, 35, 0.1);
	color: var(--color__primary);
}

.analytics-stat__icon--views {
	background: rgba(99, 102, 241, 0.1);
	color: #6366F1;
}

.analytics-stat__icon--time {
	background: rgba(245, 166, 35, 0.1);
	color: var(--color__primary);
}

.analytics-stat__icon--duration {
	background: rgba(6, 182, 212, 0.1);
	color: var(--color__accent);
}

.analytics-section-title {
	font-size: 18px;
	font-weight: 600;
	color: var(--color__text_primary);
	margin-bottom: 16px;
}

.analytics-grid {
	display: grid;
	grid-template-columns: 1fr 380px;
	gap: 20px;
}

/* Analytics Chart */
.analytics-chart-card {
	background: var(--color__surface);
	border-radius: var(--radius__lg);
	padding: 24px;
}

.analytics-chart__header {
	margin-bottom: 20px;
}

.analytics-chart__header h3 {
	font-size: 16px;
	font-weight: 600;
	color: var(--color__text_primary);
}

.analytics-chart__container {
	display: flex;
	flex-direction: column;
}

.analytics-chart__y-axis {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 300px;
	padding-right: 12px;
	font-size: 12px;
	color: var(--color__text_secondary);
	text-align: right;
	float: left;
	width: 40px;
}

.analytics-chart__area {
	flex: 1;
	height: 300px;
	position: relative;
	margin-left: 52px;
}

.analytics-chart__svg {
	width: 100%;
	height: 100%;
}

.analytics-chart__x-axis {
	display: flex;
	justify-content: space-between;
	padding-top: 12px;
	padding-left: 52px;
	font-size: 12px;
	color: var(--color__text_secondary);
}

.analytics-chart__tooltip {
	position: absolute;
	background: var(--color__surface);
	border: 1px solid var(--color__border);
	border-radius: var(--radius__md);
	padding: 12px 16px;
	box-shadow: var(--shadow__lg);
	min-width: 160px;
	z-index: 10;
}

.analytics-chart__tooltip-title {
	font-size: 13px;
	font-weight: 600;
	color: var(--color__text_primary);
	margin-bottom: 8px;
}

.analytics-chart__tooltip-row {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	color: var(--color__text_secondary);
	margin-bottom: 4px;
}

.analytics-chart__tooltip-row:last-child { margin-bottom: 0; }

.analytics-chart__tooltip-row strong {
	margin-left: auto;
	color: var(--color__text_primary);
}

.analytics-chart__tooltip-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
}

.analytics-chart__tooltip-dot--purple { background: #8B5CF6; }
.analytics-chart__tooltip-dot--green { background: #22C55E; }

/* Top Sermons Panel */
.analytics-top-sermons {
	background: var(--color__surface);
	border-radius: var(--radius__lg);
	padding: 24px;
}

.analytics-top-sermons h3 {
	font-size: 16px;
	font-weight: 600;
	color: var(--color__text_primary);
	margin-bottom: 20px;
}

.analytics-sermon-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.analytics-sermon {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--color__border);
}

.analytics-sermon:last-child {
	padding-bottom: 0;
	border-bottom: none;
}

.analytics-sermon__info { flex: 1; }

.analytics-sermon__title {
	font-size: 14px;
	font-weight: 500;
	color: var(--color__text_primary);
	margin-bottom: 4px;
}

.analytics-sermon__author {
	font-size: 12px;
	color: var(--color__text_secondary);
}

.analytics-sermon__stats {
	text-align: right;
}

.analytics-sermon__views {
	display: block;
	font-size: 13px;
	font-weight: 500;
	color: var(--color__text_primary);
}

.analytics-sermon__time {
	display: block;
	font-size: 12px;
	color: var(--color__text_secondary);
}

/* Analytics responsive */
@media (max-width: 1200px) {
	.analytics-stats { grid-template-columns: repeat(2, 1fr); }
	.analytics-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
	.analytics-stats { grid-template-columns: 1fr; }
}

/* Branding / Asset Manager */
.branding-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}

.branding-upload-card,
.branding-template-card {
	padding: 24px;
}

.branding-upload__header {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	margin-bottom: 24px;
}

.branding-upload__icon {
	width: 48px;
	height: 48px;
	background: var(--color__input_bg);
	border-radius: var(--radius__md);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color__text_secondary);
	flex-shrink: 0;
}

.branding-upload__info h3 {
	font-size: 16px;
	font-weight: 600;
	margin-bottom: 4px;
}

.branding-upload__info p {
	font-size: 13px;
	color: var(--color__text_secondary);
	line-height: 1.5;
}

.branding-dropzone {
	border: 2px dashed var(--color__border);
	border-radius: var(--radius__lg);
	padding: 40px 24px;
	text-align: center;
	background: var(--color__input_bg);
	transition: border-color 0.2s, background 0.2s;
}

.branding-dropzone:hover,
.branding-dropzone.dragover {
	border-color: var(--color__primary);
	background: var(--color__primary_light);
}

.branding-dropzone__icon {
	color: var(--color__text_muted);
	margin-bottom: 16px;
}

.branding-dropzone__text {
	font-size: 14px;
	font-weight: 500;
	color: var(--color__text_primary);
	margin-bottom: 8px;
}

.branding-dropzone__hint {
	font-size: 12px;
	color: var(--color__text_muted);
	margin-bottom: 20px;
}

.branding-file {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px;
	background: var(--color__input_bg);
	border-radius: var(--radius__md);
	margin-top: 16px;
}

.branding-file__icon {
	width: 48px;
	height: 48px;
	background: var(--color__surface);
	border-radius: var(--radius__sm);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	border: 1px solid var(--color__border);
}

.branding-file__type {
	font-size: 10px;
	font-weight: 600;
	color: var(--color__primary);
	text-transform: uppercase;
	background: var(--color__primary_light);
	padding: 4px 8px;
	border-radius: 4px;
}

.branding-file__info {
	flex: 1;
	min-width: 0;
}

.branding-file__name {
	font-size: 14px;
	font-weight: 500;
	color: var(--color__text_primary);
	margin-bottom: 4px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.branding-file__meta {
	font-size: 12px;
	color: var(--color__text_secondary);
	display: flex;
	align-items: center;
	gap: 4px;
	flex-wrap: wrap;
}

.branding-file__status {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.branding-file__status--complete {
	color: var(--color__success);
}

.branding-file__delete {
	width: 36px;
	height: 36px;
	background: transparent;
	border: none;
	color: var(--color__text_muted);
	cursor: pointer;
	border-radius: var(--radius__sm);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s, color 0.2s;
}

.branding-file__delete:hover {
	background: rgba(239, 68, 68, 0.1);
	color: var(--color__error);
}

.branding-template__header {
	margin-bottom: 24px;
}

.branding-template__header h3 {
	font-size: 16px;
	font-weight: 600;
	margin-bottom: 4px;
}

.branding-template__header p {
	font-size: 13px;
	color: var(--color__text_secondary);
}

.branding-form {
	margin-bottom: 24px;
}

.branding-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.branding-preview {
	margin-bottom: 24px;
}

.branding-preview h4 {
	font-size: 13px;
	font-weight: 500;
	color: var(--color__text_secondary);
	margin-bottom: 12px;
}

.branding-preview__box {
	background: linear-gradient(135deg, #1e3a5f 0%, #2d5a87 100%);
	border-radius: var(--radius__md);
	padding: 20px 24px;
}

.branding-preview__name {
	font-size: 18px;
	font-weight: 600;
	color: var(--color__primary);
	margin-bottom: 4px;
}

.branding-preview__role {
	font-size: 14px;
	color: var(--color__primary);
	opacity: 0.85;
}

.branding-actions {
	display: flex;
	justify-content: flex-end;
	gap: 12px;
}

/* Branding responsive */
@media (max-width: 1024px) {
	.branding-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 768px) {
	.branding-form__row {
		grid-template-columns: 1fr;
	}
}

/* App Settings */
.app-settings-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	margin-bottom: 24px;
}

.app-settings-left, .app-settings-right {
	min-width: 0;
}

@media (max-width: 1024px) {
	.app-settings-grid {
		grid-template-columns: 1fr;
	}
}

.app-settings-card {
	max-width: 700px;
	padding: 0;
}

.app-settings-section {
	padding: 24px;
	border-bottom: 1px solid var(--color__border);
}

.app-settings-section:last-of-type {
	border-bottom: none;
}

.app-settings-section__title {
	font-size: 16px;
	font-weight: 600;
	margin-bottom: 4px;
}

.app-settings-section__desc {
	font-size: 13px;
	color: var(--color__text_secondary);
	margin-bottom: 20px;
}

.app-settings-preset {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px;
	background: var(--color__input_bg);
	border-radius: var(--radius__md);
	margin-top: 16px;
}

.app-settings-preset__title {
	font-size: 14px;
	font-weight: 500;
	color: var(--color__text_primary);
	margin-bottom: 4px;
}

.app-settings-preset__desc {
	font-size: 13px;
	color: var(--color__text_secondary);
}

.app-settings-actions {
	display: flex;
	justify-content: flex-end;
	gap: 12px;
	padding: 24px 0;
}

/* Audio Meter */
.audio-meter {
	height: 8px;
	background: var(--color__input_bg);
	border-radius: 4px;
	overflow: hidden;
}

.audio-meter__fill {
	height: 100%;
	width: 0%;
	background: linear-gradient(to right, var(--color__success), #22c55e, #fbbf24, #ef4444);
	transition: width 0.1s ease;
	border-radius: 4px;
}

/* Settings Preview */
.settings-preview {
	aspect-ratio: 16/9;
	background: var(--color__input_bg);
	border-radius: var(--radius__md);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.settings-preview__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.settings-preview__placeholder {
	color: var(--color__text_secondary);
	font-size: 13px;
}

/* Broadcasts Page */
.broadcasts-tabs {
	display: flex;
	gap: 8px;
	margin-bottom: 24px;
}

.broadcasts-tab {
	padding: 10px 20px;
	background: transparent;
	border: 1px solid var(--color__border);
	border-radius: var(--radius__md);
	color: var(--color__text_secondary);
	font-size: 14px;
	cursor: pointer;
	transition: all 0.2s;
}

.broadcasts-tab:hover {
	background: var(--color__card_bg);
}

.broadcasts-tab.active {
	background: var(--color__primary);
	border-color: var(--color__primary);
	color: white;
}

.broadcasts-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.broadcast-card {
	background: var(--color__card_bg);
	border: 1px solid var(--color__border);
	border-radius: var(--radius__lg);
	padding: 20px;
}

.broadcast-card__header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 12px;
}

.broadcast-card__title {
	font-size: 16px;
	font-weight: 600;
	color: var(--color__text_primary);
	margin: 0;
}

.broadcast-status {
	padding: 4px 10px;
	border-radius: 4px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
}

.broadcast-status--staged {
	background: rgba(234, 179, 8, 0.15);
	color: #eab308;
}

.broadcast-status--completed {
	background: rgba(34, 197, 94, 0.15);
	color: #22c55e;
}

.broadcast-card__meta {
	display: flex;
	gap: 16px;
	margin-bottom: 12px;
	color: var(--color__text_secondary);
	font-size: 13px;
}

.broadcast-card__meta svg {
	vertical-align: -2px;
	margin-right: 4px;
}

.broadcast-card__desc {
	font-size: 14px;
	color: var(--color__text_secondary);
	margin-bottom: 12px;
	line-height: 1.5;
}

.broadcast-card__category {
	display: inline-block;
	padding: 4px 10px;
	background: var(--color__input_bg);
	border-radius: 4px;
	font-size: 12px;
	color: var(--color__text_secondary);
	margin-bottom: 16px;
}

.broadcast-card__actions {
	display: flex;
	gap: 8px;
}

.empty-state {
	text-align: center;
	color: var(--color__text_secondary);
	padding: 40px 20px;
}

/* Schedule Broadcast Page */
.broadcast-new-grid {
	display: grid;
	grid-template-columns: 7fr 5fr;
	gap: 24px;
}

@media (max-width: 1024px) {
	.broadcast-new-grid {
		grid-template-columns: 1fr;
	}
}

.broadcast-new-left, .broadcast-new-right {
	min-width: 0;
}

.thumbnail-preview {
	aspect-ratio: 16/9;
	background: var(--color__input_bg);
	border-radius: var(--radius__md);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16px;
}

.thumbnail-placeholder {
	text-align: center;
	color: var(--color__text_secondary);
}

.thumbnail-placeholder svg {
	margin-bottom: 8px;
	opacity: 0.5;
}

.thumbnail-placeholder span {
	display: block;
	font-size: 13px;
}

.thumbnail-actions {
	display: flex;
	gap: 8px;
	margin-bottom: 16px;
}

.thumbnail-hints {
	margin: 0;
	padding-left: 20px;
	font-size: 12px;
	color: var(--color__text_secondary);
}

.thumbnail-hints li {
	margin-bottom: 4px;
}

.required {
	color: var(--color__error);
}

/* Help Centre */
.help-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	margin-bottom: 24px;
}

.help-card {
	padding: 24px;
}

.help-card__icon {
	width: 48px;
	height: 48px;
	background: var(--color__primary_light);
	border-radius: var(--radius__md);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color__primary);
	margin-bottom: 16px;
}

.help-card h3 {
	font-size: 16px;
	font-weight: 600;
	margin-bottom: 8px;
}

.help-card > p {
	font-size: 13px;
	color: var(--color__text_secondary);
	margin-bottom: 16px;
}

.help-card__links {
	list-style: none;
	padding: 0;
	margin: 0;
}

.help-card__links li {
	padding: 8px 0;
	border-top: 1px solid var(--color__border);
}

.help-card__links a {
	color: var(--color__text_primary);
	text-decoration: none;
	font-size: 14px;
	transition: color 0.15s;
}

.help-card__links a:hover {
	color: var(--color__primary);
}

.help-contact {
	padding: 24px;
	text-align: center;
}

.help-contact h3 {
	font-size: 18px;
	font-weight: 600;
	margin-bottom: 8px;
}

.help-contact p {
	color: var(--color__text_secondary);
	margin-bottom: 16px;
}

/* Contact Page */
.contact-grid {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 24px;
}

.contact-form-card {
	padding: 24px;
}

.contact-form-card h3 {
	font-size: 18px;
	font-weight: 600;
	margin-bottom: 24px;
}

.contact-form .form__group {
	margin-bottom: 16px;
}

.form__textarea {
	resize: vertical;
	min-height: 120px;
}

.contact-info {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.contact-info-card {
	padding: 20px;
	text-align: center;
}

.contact-info__icon {
	width: 48px;
	height: 48px;
	background: var(--color__primary_light);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color__primary);
	margin: 0 auto 12px;
}

.contact-info-card h4 {
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 4px;
}

.contact-info-card p {
	font-size: 13px;
	color: var(--color__text_secondary);
}

/* Help & Contact responsive */
@media (max-width: 900px) {
	.help-grid {
		grid-template-columns: 1fr;
	}
	.contact-grid {
		grid-template-columns: 1fr;
	}
	.contact-info {
		flex-direction: row;
		flex-wrap: wrap;
	}
	.contact-info-card {
		flex: 1;
		min-width: 150px;
	}
}

/* Toggle */
.toggle { position: relative; display: inline-block; width: 44px; height: 24px; }
.toggle input { opacity: 0; width: 0; height: 0; }

.toggle-slider {
	position: absolute;
	cursor: pointer;
	inset: 0;
	background: var(--color__border);
	border-radius: 24px;
	transition: 0.2s;
}

.toggle-slider::before {
	content: '';
	position: absolute;
	height: 18px;
	width: 18px;
	left: 3px;
	bottom: 3px;
	background: white;
	border-radius: 50%;
	transition: 0.2s;
}

.toggle input:checked + .toggle-slider { background: var(--color__accent); }
.toggle input:checked + .toggle-slider::before { transform: translateX(20px); }

/* Overlays */
.overlay-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 0;
	border-bottom: 1px solid var(--color__border);
}

.overlay-item:last-child { border-bottom: none; }
.overlay-info h4 { font-size: 14px; font-weight: 500; }
.overlay-info span { font-size: 12px; color: var(--color__text_secondary); }

/* Tables */
.table { width: 100%; border-collapse: collapse; }

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

.table th {
	font-weight: 500;
	color: var(--color__text_secondary);
	font-size: 12px;
	text-transform: uppercase;
}

.table tr:hover { background: var(--color__surface_hover); }

.table .loading { text-align: center; color: var(--color__text_secondary); padding: 40px; }

/* Tabs */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--color__border); margin-bottom: 24px; }

.tab {
	padding: 12px 20px;
	color: var(--color__text_secondary);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	cursor: pointer;
}

.tab:hover { color: var(--color__text_primary); }
.tab.active { color: var(--color__primary); border-bottom-color: var(--color__primary); }

/* Badges */
.badge {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 100px;
	font-size: 12px;
	font-weight: 500;
}

.badge--staged { background: rgba(99,102,241,0.1); color: var(--color__primary); }
.badge--draft { background: rgba(148,163,184,0.1); color: var(--color__text_secondary); }
.badge--live { background: rgba(239,68,68,0.1); color: var(--color__error); }
.badge--completed { background: rgba(34,197,94,0.1); color: var(--color__success); }

/* Profile */
.profile-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; }

.profile-avatar-section { display: flex; align-items: center; gap: 20px; margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--color__border); }

.profile-avatar {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background: var(--color__primary);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 32px;
	font-weight: 600;
}

.profile-avatar-actions { display: flex; flex-direction: column; gap: 8px; }

.email-status { margin-top: 8px; font-size: 12px; }

.account-info { margin-bottom: 24px; }
.account-row { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--color__border); }
.account-row:last-child { border-bottom: none; }
.account-row span:first-child { color: var(--color__text_secondary); }
.mono { font-family: monospace; font-size: 12px; }

.account-actions { display: flex; flex-direction: column; gap: 12px; }

/* Billing */
.billing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.billing-plans { grid-column: 1 / -1; }
.billing-toast { position: fixed; top: 80px; right: 24px; z-index: 1000; }
.billing-toast .toast { padding: 12px 20px; border-radius: var(--radius__md); font-size: 14px; font-weight: 500; animation: toast-slide-in 0.3s ease; }
.billing-toast .toast--success { background: #10B981; color: white; }
.billing-toast .toast--error { background: #EF4444; color: white; }
.billing-toast .toast--info { background: var(--color__primary); color: white; }
@keyframes toast-slide-in { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

.plan-info { padding: 20px 0; }
.plan-name-row { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 8px; }
.plan-name { font-size: 28px; font-weight: 700; }
.plan-badge { display: inline-block; padding: 4px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; text-transform: uppercase; }
.plan-badge--active { background: #10B981; color: white; }
.plan-badge--trial { background: #F59E0B; color: white; }
.plan-badge--canceled { background: #EF4444; color: white; }
.plan-badge--past-due { background: #EF4444; color: white; }
.plan-badge--free { background: var(--color__surface_hover); color: var(--color__text_secondary); }
.plan-price { font-size: 18px; color: var(--color__text_secondary); margin-bottom: 8px; text-align: center; }
.plan-renewal { font-size: 14px; color: var(--color__text_secondary); text-align: center; }

.plan-actions { display: flex; gap: 12px; justify-content: center; margin-top: 16px; }

.usage-stats { display: flex; flex-direction: column; gap: 20px; }
.usage-stat { }
.usage-label { font-size: 14px; color: var(--color__text_secondary); margin-bottom: 8px; }
.usage-bar { height: 8px; background: var(--color__bg); border-radius: 4px; overflow: hidden; }
.usage-fill { height: 100%; background: var(--color__primary); border-radius: 4px; transition: width 0.3s; }
.usage-value { font-size: 12px; color: var(--color__text_secondary); margin-top: 4px; }
.usage-note { font-size: 12px; color: var(--color__text_secondary); text-align: center; margin-top: 16px; font-style: italic; }

.billing-plans__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.billing-plans__header .card__title { margin-bottom: 0; }
.billing-interval-toggle { display: flex; background: var(--color__bg); border-radius: var(--radius__md); padding: 4px; }
.interval-btn { padding: 8px 16px; border: none; background: transparent; color: var(--color__text_secondary); font-size: 14px; font-weight: 500; cursor: pointer; border-radius: var(--radius__sm); transition: all 0.2s; }
.interval-btn:hover { color: var(--color__text_primary); }
.interval-btn--active { background: var(--color__surface); color: var(--color__text_primary); box-shadow: var(--shadow__sm); }
.interval-save { color: #10B981; font-size: 12px; margin-left: 4px; }

.plans-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.plan-card { background: var(--color__bg); border: 2px solid var(--color__border); border-radius: var(--radius__lg); padding: 24px; display: flex; flex-direction: column; transition: border-color 0.2s, transform 0.2s; }
.plan-card:hover { border-color: var(--color__primary); transform: translateY(-2px); }
.plan-card--current { border-color: var(--color__primary); background: rgba(99, 102, 241, 0.05); }
.plan-card--recommended { position: relative; }
.plan-card--recommended::before { content: 'Popular'; position: absolute; top: -10px; right: 16px; background: var(--color__primary); color: white; padding: 4px 12px; border-radius: 12px; font-size: 11px; font-weight: 600; text-transform: uppercase; }
.plan-card__header { margin-bottom: 16px; }
.plan-card__name { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
.plan-card__desc { font-size: 13px; color: var(--color__text_secondary); }
.plan-card__price { margin-bottom: 20px; }
.plan-card__amount { font-size: 32px; font-weight: 700; }
.plan-card__interval { font-size: 14px; color: var(--color__text_secondary); }
.plan-card__annual-note { font-size: 12px; color: #10B981; margin-top: 4px; }
.plan-card__features { flex: 1; margin-bottom: 20px; }
.plan-card__features ul { list-style: none; padding: 0; margin: 0; }
.plan-card__features li { font-size: 14px; color: var(--color__text_secondary); padding: 6px 0; padding-left: 24px; position: relative; }
.plan-card__features li::before { content: ''; position: absolute; left: 0; top: 10px; width: 16px; height: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2310B981' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4L19 7'/%3E%3C/svg%3E") no-repeat center; background-size: contain; }
.plan-card__action { }
.plan-card__action .btn { width: 100%; }
.plan-card__action .btn--current { background: var(--color__surface_hover); color: var(--color__text_secondary); cursor: default; }
.plan-card__action .btn--current:hover { background: var(--color__surface_hover); }

/* Checkout Modal */
.checkout-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; }
.checkout-modal__backdrop { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.7); }
.checkout-modal__content { position: relative; background: var(--color__surface); border-radius: var(--radius__lg); width: 95%; max-width: 600px; max-height: 90vh; display: flex; flex-direction: column; box-shadow: var(--shadow__lg); }
.checkout-modal__header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--color__border); }
.checkout-modal__header h3 { margin: 0; font-size: 18px; font-weight: 600; }
.checkout-modal__close { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; font-size: 24px; color: var(--color__text_secondary); cursor: pointer; border-radius: var(--radius__sm); transition: background 0.2s, color 0.2s; }
.checkout-modal__close:hover { background: var(--color__surface_hover); color: var(--color__text_primary); }
.checkout-modal__body { flex: 1; padding: 24px; overflow-y: auto; min-height: 400px; }

/* note: section-title defined above */

.checkbox-group { display: flex; flex-direction: column; gap: 8px; }
.checkbox-group label { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--color__text_secondary); }

.action__btn {
	padding: 8px;
	background: transparent;
	border: none;
	color: var(--color__text_secondary);
	cursor: pointer;
	border-radius: var(--radius__sm);
}

.action__btn:hover { background: var(--color__surface_hover); color: var(--color__text_primary); }

/* Under Construction - marks unimplemented features */
.snt__under_construction {
	position: relative;
	opacity: 0.5;
	cursor: not-allowed !important;
	pointer-events: none;
}

.snt__under_construction_banner {
	background: linear-gradient(90deg, var(--color__warning) 0%, #F59E0B 100%);
	color: #000;
	padding: 8px 16px;
	text-align: center;
	font-size: 12px;
	font-weight: 600;
}

/* Archive Page */
.archive-layout {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 24px;
	height: calc(100vh - 180px);
	min-height: 500px;
}

.archive-sidebar {
	background: var(--color__surface);
	border-radius: var(--radius__lg);
	box-shadow: var(--shadow__sm);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.archive-sidebar__header {
	padding: 16px 20px;
	border-bottom: 1px solid var(--color__border);
}

.archive-sidebar__header h3 {
	font-size: 14px;
	font-weight: 600;
	color: var(--color__text_primary);
	margin: 0;
}

.archive-sidebar__content {
	flex: 1;
	overflow-y: auto;
	padding: 8px;
}

.archive-playlist-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
	border-radius: var(--radius__md);
	cursor: pointer;
	transition: all 0.15s;
}

.archive-playlist-item:hover {
	background: var(--color__surface_hover);
}

.archive-playlist-item.active {
	background: var(--color__primary_light);
}

.archive-playlist-item__artwork {
	width: 48px;
	height: 48px;
	border-radius: var(--radius__sm);
	background: var(--color__bg);
	object-fit: cover;
	flex-shrink: 0;
}

.archive-playlist-item__artwork--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color__text_muted);
}

.archive-playlist-item__info {
	flex: 1;
	min-width: 0;
}

.archive-playlist-item__title {
	font-size: 14px;
	font-weight: 500;
	color: var(--color__text_primary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.archive-playlist-item__count {
	font-size: 12px;
	color: var(--color__text_secondary);
}

.archive-main {
	background: var(--color__surface);
	border-radius: var(--radius__lg);
	box-shadow: var(--shadow__sm);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.archive-main__header {
	padding: 20px 24px;
	border-bottom: 1px solid var(--color__border);
}

.archive-main__header h2 {
	font-size: 18px;
	font-weight: 600;
	margin: 0 0 4px;
}

.archive-main__header p {
	font-size: 14px;
	color: var(--color__text_secondary);
	margin: 0;
}

.archive-episodes {
	flex: 1;
	overflow-y: auto;
	padding: 16px;
}

.archive-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	color: var(--color__text_muted);
	gap: 12px;
}

.archive-empty svg {
	width: 48px;
	height: 48px;
	opacity: 0.5;
}

.archive-episode-item {
	display: flex;
	gap: 16px;
	padding: 16px;
	border-radius: var(--radius__md);
	cursor: pointer;
	transition: all 0.15s;
	border: 1px solid transparent;
}

.archive-episode-item:hover {
	background: var(--color__surface_hover);
	border-color: var(--color__border);
}

.archive-episode-item__artwork {
	width: 120px;
	height: 68px;
	border-radius: var(--radius__sm);
	background: var(--color__bg);
	object-fit: cover;
	flex-shrink: 0;
}

.archive-episode-item__artwork--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color__text_muted);
}

.archive-episode-item__info {
	flex: 1;
	min-width: 0;
}

.archive-episode-item__title {
	font-size: 14px;
	font-weight: 500;
	color: var(--color__text_primary);
	margin-bottom: 4px;
}

.archive-episode-item__meta {
	font-size: 12px;
	color: var(--color__text_secondary);
	margin-bottom: 8px;
}

.archive-episode-item__meta span {
	margin-right: 12px;
}

.archive-episode-item__badges {
	display: flex;
	gap: 8px;
}

.archive-episode-item__badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 8px;
	border-radius: 100px;
	font-size: 11px;
	background: var(--color__bg);
	color: var(--color__text_secondary);
}

.archive-episode-item__badge--audio {
	background: rgba(99, 102, 241, 0.1);
	color: #6366F1;
}

.archive-episode-item__badge--video {
	background: rgba(236, 72, 153, 0.1);
	color: #EC4899;
}

/* Recordings Page */
.recordings-container {
	background: var(--color__surface);
	border-radius: var(--radius__lg);
	box-shadow: var(--shadow__sm);
}

.recordings-list {
	padding: 16px;
}

.recordings-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 48px 24px;
	color: var(--color__text_secondary);
	text-align: center;
}

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

.recordings-empty p {
	margin: 0;
}

.recordings-empty__hint {
	margin-top: 8px !important;
	font-size: 14px;
	max-width: 400px;
}

.recording-item {
	display: flex;
	flex-direction: column;
	padding: 16px;
	border-radius: var(--radius__md);
	cursor: pointer;
	transition: background 0.2s ease, border 0.2s ease;
	border: 1px solid transparent;
}

.recording-item:hover {
	background: var(--color__surface_hover);
}

.recording-item__header {
	display: flex;
	align-items: flex-start;
	gap: 16px;
}

.recording-item__preview {
	width: 80px;
	height: 60px;
	background: var(--color__surface_hover);
	border-radius: var(--radius__sm);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: var(--color__text_secondary);
	overflow: hidden;
	position: relative;
}

.recording-item__preview img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.recording-item__info {
	flex: 1;
	min-width: 0;
}

.recording-item__player {
	display: none;
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--color__border);
}

.recording-item.selected .recording-item__player {
	display: block;
}

.recording-video {
	width: 100%;
	max-height: 400px;
	background: #000;
	border-radius: var(--radius__sm);
}

.recording-item__controls {
	display: flex;
	gap: 8px;
	margin-top: 12px;
}

.recording-item__title {
	font-weight: 500;
	color: var(--color__text);
	margin-bottom: 4px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.recording-item__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	font-size: 13px;
	color: var(--color__text_secondary);
}

.recording-item__badges {
	display: flex;
	gap: 8px;
	margin-top: 8px;
}

.recording-item__badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 8px;
	font-size: 11px;
	border-radius: 4px;
	font-weight: 500;
}

.recording-item__badge--webrtc {
	background: rgba(16, 185, 129, 0.1);
	color: #10B981;
}

.recording-item__badge--rtmp {
	background: rgba(99, 102, 241, 0.1);
	color: #6366F1;
}

.recording-item.selected {
	background: var(--color__surface_hover);
	border: 1px solid var(--color__border);
}

.recordings-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: 16px;
	border-top: 1px solid var(--color__border);
}

.recordings-pagination #recordings-page-info {
	font-size: 14px;
	color: var(--color__text_secondary);
}

/* Recording Player Modal */
.modal__content--wide {
	max-width: 900px;
}

.recording-player {
	padding: 16px;
}

.recording-player__video {
	width: 100%;
	max-height: 500px;
	background: #000;
	border-radius: var(--radius__md);
}

.recording-player__info {
	margin-top: 16px;
	padding: 12px;
	background: var(--color__surface_hover);
	border-radius: var(--radius__sm);
	font-size: 13px;
}

.recording-player__info p {
	margin: 0;
}

.recording-player__info a {
	color: var(--color__primary);
	word-break: break-all;
}

.archive-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: 16px;
	border-top: 1px solid var(--color__border);
}

.archive-pagination #page-info {
	font-size: 14px;
	color: var(--color__text_secondary);
}

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

.modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
}

.modal__content {
	position: relative;
	background: var(--color__surface);
	border-radius: var(--radius__lg);
	box-shadow: var(--shadow__lg);
	width: 90%;
	max-width: 600px;
	max-height: 80vh;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.modal__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px 24px;
	border-bottom: 1px solid var(--color__border);
}

.modal__header h3 {
	font-size: 16px;
	font-weight: 600;
	margin: 0;
}

.modal__close {
	width: 32px;
	height: 32px;
	border: none;
	background: transparent;
	font-size: 24px;
	color: var(--color__text_secondary);
	cursor: pointer;
	border-radius: var(--radius__sm);
	display: flex;
	align-items: center;
	justify-content: center;
}

.modal__close:hover {
	background: var(--color__surface_hover);
	color: var(--color__text_primary);
}

.modal__body {
	padding: 24px;
	overflow-y: auto;
}

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

.modal--confirm .modal__content {
	max-width: 400px;
}

.modal--confirm .modal__body {
	text-align: center;
	padding: 32px 24px;
}

.modal--confirm .modal__icon {
	width: 48px;
	height: 48px;
	margin: 0 auto 16px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.modal--confirm .modal__icon--warning {
	background: rgba(245, 158, 11, 0.1);
	color: #f59e0b;
}

.modal--confirm .modal__icon--danger {
	background: rgba(239, 68, 68, 0.1);
	color: var(--color__error);
}

.modal--confirm .modal__title {
	font-size: 18px;
	font-weight: 600;
	margin: 0 0 8px;
}

.modal--confirm .modal__message {
	color: var(--color__text_secondary);
	margin: 0;
}

.episode-detail__artwork {
	width: 100%;
	max-height: 200px;
	object-fit: cover;
	border-radius: var(--radius__md);
	margin-bottom: 16px;
}

.episode-detail__meta {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
	margin-bottom: 16px;
}

.episode-detail__meta-item {
	font-size: 13px;
}

.episode-detail__meta-item label {
	display: block;
	color: var(--color__text_secondary);
	font-size: 11px;
	text-transform: uppercase;
	margin-bottom: 2px;
}

.episode-detail__description {
	font-size: 14px;
	color: var(--color__text_secondary);
	line-height: 1.6;
}

.episode-detail__media {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--color__border);
}

.episode-detail__media h4 {
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 8px;
}

.episode-detail__media-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.episode-detail__media-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	background: var(--color__bg);
	border-radius: var(--radius__sm);
	font-size: 13px;
}

.episode-detail__media-item a {
	color: var(--color__primary);
	text-decoration: none;
}

.episode-detail__media-item a:hover {
	text-decoration: underline;
}

@media (max-width: 768px) {
	.archive-layout {
		grid-template-columns: 1fr;
		height: auto;
	}

	.archive-sidebar {
		max-height: 300px;
	}

	.archive-episode-item {
		flex-direction: column;
	}

	.archive-episode-item__artwork {
		width: 100%;
		height: 160px;
	}
}

/* Overview Page */
.page__header--overview { margin-bottom: 24px; }
.page__header--overview h1 { font-size: 22px; font-weight: 600; }

.overview-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	margin-bottom: 32px;
}

.stat-card {
	background: var(--color__surface);
	border-radius: var(--radius__lg);
	padding: 20px 24px;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.stat-card__content { flex: 1; }

.stat-card__value {
	font-size: 28px;
	font-weight: 700;
	color: var(--color__text_primary);
	line-height: 1.2;
	margin-bottom: 4px;
}

.stat-card__label {
	font-size: 14px;
	color: var(--color__text_secondary);
	margin-bottom: 8px;
}

.stat-card__trend {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
}

.stat-card__trend--up { color: var(--color__success); }
.stat-card__trend--down { color: var(--color__error); }

.stat-card__subtext {
	font-size: 12px;
	color: var(--color__accent);
}

.stat-card__icon {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.stat-card__icon--views { background: rgba(107, 114, 128, 0.1); color: #6B7280; }
.stat-card__icon--watchtime { background: rgba(245, 166, 35, 0.1); color: var(--color__primary); }
.stat-card__icon--subscribers { background: rgba(34, 197, 94, 0.1); color: var(--color__success); }
.stat-card__icon--live { background: rgba(239, 68, 68, 0.1); color: var(--color__error); }

.overview-section { margin-bottom: 32px; }

.overview-section__header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 20px;
}

.overview-section__title {
	font-size: 18px;
	font-weight: 600;
	color: var(--color__text_primary);
	margin: 0 0 4px;
}

.overview-section__subtitle {
	font-size: 14px;
	color: var(--color__text_secondary);
	margin: 0;
}

/* Quick Actions */
.quick-actions {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}

.quick-action {
	background: var(--color__surface);
	border-radius: var(--radius__lg);
	padding: 20px;
	display: flex;
	align-items: center;
	gap: 16px;
	text-decoration: none;
	transition: all 0.2s;
	border: 1px solid transparent;
}

.quick-action:hover {
	border-color: var(--color__border);
	transform: translateY(-2px);
	box-shadow: var(--shadow__md);
}

.quick-action__icon {
	width: 48px;
	height: 48px;
	border-radius: var(--radius__md);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.quick-action__icon--record { background: rgba(99, 102, 241, 0.1); color: #6366F1; }
.quick-action__icon--live { background: rgba(239, 68, 68, 0.1); color: var(--color__error); }
.quick-action__icon--schedule { background: rgba(245, 166, 35, 0.1); color: var(--color__primary); }
.quick-action__icon--analytics { background: rgba(107, 114, 128, 0.1); color: #6B7280; }

.quick-action__content { flex: 1; min-width: 0; }

.quick-action__title {
	font-size: 15px;
	font-weight: 600;
	color: var(--color__text_primary);
	margin-bottom: 4px;
}

.quick-action__desc {
	font-size: 13px;
	color: var(--color__text_secondary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.quick-action__arrow {
	color: var(--color__text_muted);
	flex-shrink: 0;
}

/* Recent Recordings Grid */
.recent-recordings {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.recent-recordings__empty {
	grid-column: 1 / -1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 60px 20px;
	text-align: center;
	background: var(--color__surface);
	border-radius: var(--radius__lg);
	border: 2px dashed var(--color__border);
}

.recent-recordings__empty-icon {
	color: var(--color__text_muted);
	margin-bottom: 16px;
	opacity: 0.5;
}

.recent-recordings__empty-title {
	font-size: 18px;
	font-weight: 600;
	color: var(--color__text);
	margin: 0 0 8px 0;
}

.recent-recordings__empty-text {
	font-size: 14px;
	color: var(--color__text_muted);
	margin: 0;
	max-width: 300px;
}

.recording-card {
	background: var(--color__surface);
	border-radius: var(--radius__lg);
	overflow: hidden;
	transition: all 0.2s;
	cursor: pointer;
}

.recording-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow__lg);
}

.recording-card__thumbnail {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--color__preview_bg);
	display: flex;
	align-items: center;
	justify-content: center;
}

.recording-card__thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.recording-card__play {
	width: 56px;
	height: 56px;
	background: rgba(0, 0, 0, 0.6);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	transition: all 0.2s;
}

.recording-card:hover .recording-card__play {
	background: rgba(0, 0, 0, 0.8);
	transform: scale(1.1);
}

.recording-card__duration {
	position: absolute;
	top: 12px;
	left: 12px;
	background: rgba(0, 0, 0, 0.7);
	color: white;
	font-size: 12px;
	font-weight: 500;
	padding: 4px 8px;
	border-radius: 4px;
}

.recording-card__badge {
	position: absolute;
	bottom: 12px;
	left: 12px;
	font-size: 11px;
	font-weight: 600;
	padding: 4px 10px;
	border-radius: 4px;
	text-transform: uppercase;
}

.recording-card__badge--recorded { background: var(--color__error); color: white; }
.recording-card__badge--worship { background: #8B5CF6; color: white; }
.recording-card__badge--study { background: var(--color__success); color: white; }
.recording-card__badge--live { background: var(--color__error); color: white; }

.recording-card__info { padding: 16px; }

.recording-card__title {
	font-size: 14px;
	font-weight: 600;
	color: var(--color__text_primary);
	margin-bottom: 4px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.recording-card__date {
	font-size: 13px;
	color: var(--color__text_secondary);
	margin-bottom: 12px;
}

.recording-card__stats {
	display: flex;
	gap: 16px;
	font-size: 12px;
	color: var(--color__text_secondary);
}

.recording-card__stat {
	display: flex;
	align-items: center;
	gap: 4px;
}

.recording-card__stat svg {
	width: 14px;
	height: 14px;
}

@media (max-width: 1200px) {
	.overview-stats { grid-template-columns: repeat(2, 1fr); }
	.quick-actions { grid-template-columns: repeat(2, 1fr); }
	.recent-recordings { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
	/* Sidebar - hidden by default on mobile */
	.sidebar {
		transform: translateX(-100%);
		transition: transform 0.3s ease;
	}
	.sidebar.open { transform: translateX(0); }

	/* Sidebar overlay */
	.sidebar-overlay {
		display: none;
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 99;
	}
	.sidebar-overlay.open { display: block; }

	/* Main layout - full width */
	.main { margin-left: 0; }

	/* Header mobile adjustments */
	.header {
		padding: 16px;
		gap: 12px;
	}
	.header__welcome { display: none; }
	.header__mobile-title {
		display: flex;
		align-items: center;
		gap: 12px;
		flex: 1;
	}
	.header__mobile-title h1 {
		font-size: 16px;
		font-weight: 600;
		color: var(--color__text_primary);
		margin: 0;
	}

	/* Mobile menu button */
	.mobile-menu-btn {
		display: flex;
		width: 40px;
		height: 40px;
		align-items: center;
		justify-content: center;
		background: transparent;
		border: none;
		color: var(--color__text_primary);
		cursor: pointer;
		border-radius: var(--radius__md);
		margin-right: 8px;
	}
	.mobile-menu-btn:hover { background: var(--color__surface_hover); }

	/* Content padding */
	.content { padding: 16px; }

	/* Page header */
	.page__header {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
		margin-bottom: 20px;
	}
	.page__header h1 { font-size: 18px; }
	.page__header--overview h1 { font-size: 20px; }

	/* Overview stats */
	.overview-stats {
		grid-template-columns: 1fr;
		gap: 12px;
		margin-bottom: 24px;
	}
	.stat-card {
		padding: 16px;
	}
	.stat-card__value { font-size: 24px; }
	.stat-card__label { font-size: 13px; }
	.stat-card__trend { font-size: 11px; }
	.stat-card__icon {
		width: 40px;
		height: 40px;
	}
	.stat-card__icon svg {
		width: 20px;
		height: 20px;
	}

	/* Quick actions */
	.quick-actions {
		grid-template-columns: 1fr;
		gap: 12px;
	}
	.quick-action {
		padding: 16px;
		gap: 12px;
	}
	.quick-action__icon {
		width: 44px;
		height: 44px;
	}
	.quick-action__title { font-size: 14px; }
	.quick-action__desc {
		font-size: 12px;
		white-space: normal;
		-webkit-line-clamp: 2;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	/* Recent recordings */
	.recent-recordings {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.recording-card__info { padding: 12px; }
	.recording-card__title { font-size: 14px; }
	.recording-card__date { font-size: 12px; margin-bottom: 8px; }

	/* Overview section */
	.overview-section { margin-bottom: 24px; }
	.overview-section__title { font-size: 16px; }
	.overview-section__header { margin-bottom: 16px; }

	/* Header user section */
	.header__user { gap: 8px; }
	.header__user-profile { padding: 4px 8px 4px 4px; }
	.header__user-name { display: none; }
	.header__user_avatar { width: 32px; height: 32px; font-size: 12px; }
	.header__icon-btn { width: 32px; height: 32px; }
}

/* Hide mobile elements on desktop */
@media (min-width: 769px) {
	.mobile-menu-btn { display: none; }
	.header__mobile-title { display: none; }
	.sidebar-overlay { display: none !important; }
}

/* ============================================
   SCHEDULER - Calendar & Timeline Components
   ============================================ */

/* Collapsible card headers */
.card__header--collapsible {
	cursor: pointer;
	user-select: none;
	transition: background-color 0.15s ease;
}
.card__header--collapsible:hover {
	background-color: rgba(255, 255, 255, 0.02);
}
.card__chevron {
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.2s ease;
	color: var(--text-muted);
}
.card__chevron--collapsed {
	transform: rotate(-90deg);
}
.card__content--collapsed {
	display: none;
}

/* Scheduler Calendar */
.scheduler-calendar {
	background: var(--bg-tertiary);
	border-radius: 8px;
	padding: 16px;
	margin-bottom: 16px;
}
.scheduler-calendar__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
}
.scheduler-calendar__month {
	font-weight: 600;
	font-size: 14px;
	color: var(--text-primary);
}
.scheduler-calendar__nav {
	background: transparent;
	border: none;
	color: var(--text-muted);
	cursor: pointer;
	padding: 4px;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.15s ease;
}
.scheduler-calendar__nav:hover {
	background: var(--bg-secondary);
	color: var(--text-primary);
}
.scheduler-calendar__weekdays {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
	margin-bottom: 8px;
	text-align: center;
}
.scheduler-calendar__weekdays span {
	font-size: 11px;
	font-weight: 500;
	color: var(--text-muted);
	padding: 4px;
}
.scheduler-calendar__days {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
}
.scheduler-calendar__day {
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	border-radius: 4px;
	cursor: pointer;
	transition: all 0.15s ease;
	color: var(--text-secondary);
	background: transparent;
	border: none;
	position: relative;
}
.scheduler-calendar__day:hover {
	background: var(--bg-secondary);
	color: var(--text-primary);
}
.scheduler-calendar__day--today {
	background: var(--primary-color);
	color: #fff;
	font-weight: 600;
}
.scheduler-calendar__day--today:hover {
	background: var(--primary-color-hover);
	color: #fff;
}
.scheduler-calendar__day--selected {
	outline: 2px solid var(--primary-color);
	outline-offset: -2px;
}
.scheduler-calendar__day--other-month {
	color: var(--text-muted);
	opacity: 0.5;
}
.scheduler-calendar__day--has-event::after {
	content: '';
	position: absolute;
	bottom: 2px;
	left: 50%;
	transform: translateX(-50%);
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--accent-color);
}

/* Scheduler Timeline */
.scheduler-timeline {
	background: var(--bg-tertiary);
	border-radius: 8px;
	padding: 16px;
	margin-bottom: 16px;
}
.scheduler-timeline__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
}
.scheduler-timeline__title {
	font-size: 13px;
	font-weight: 600;
	color: var(--text-primary);
	margin: 0;
}
.scheduler-timeline__date {
	font-size: 12px;
	color: var(--text-muted);
}
.scheduler-timeline__events {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.scheduler-timeline__empty {
	text-align: center;
	padding: 24px 16px;
	color: var(--text-muted);
}
.scheduler-timeline__empty p {
	margin: 0 0 12px 0;
	font-size: 13px;
}
.scheduler-timeline__event {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
	background: var(--bg-secondary);
	border-radius: 6px;
	border-left: 3px solid var(--primary-color);
	cursor: pointer;
	transition: all 0.15s ease;
}
.scheduler-timeline__event:hover {
	background: var(--bg-primary);
}
.scheduler-timeline__event--live {
	border-left-color: var(--success-color);
}
.scheduler-timeline__event-time {
	font-size: 12px;
	font-weight: 600;
	color: var(--primary-color);
	min-width: 60px;
}
.scheduler-timeline__event-info {
	flex: 1;
	min-width: 0;
}
.scheduler-timeline__event-title {
	font-size: 13px;
	font-weight: 500;
	color: var(--text-primary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.scheduler-timeline__event-meta {
	font-size: 11px;
	color: var(--text-muted);
	margin-top: 2px;
}
.scheduler-timeline__event-action {
	padding: 6px 12px;
	font-size: 11px;
	border-radius: 4px;
}

/* Scheduler Upcoming */
.scheduler-upcoming {
	background: var(--bg-tertiary);
	border-radius: 8px;
	padding: 16px;
}
.scheduler-upcoming__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
}
.scheduler-upcoming__title {
	font-size: 13px;
	font-weight: 600;
	color: var(--text-primary);
	margin: 0;
}
.scheduler-upcoming__link {
	font-size: 12px;
	color: var(--primary-color);
	text-decoration: none;
}
.scheduler-upcoming__link:hover {
	text-decoration: underline;
}
.scheduler-upcoming__list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.scheduler-upcoming__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	background: var(--bg-secondary);
	border-radius: 6px;
	cursor: pointer;
	transition: background-color 0.15s ease;
}
.scheduler-upcoming__item:hover {
	background: var(--bg-primary);
}
.scheduler-upcoming__item-date {
	font-size: 11px;
	font-weight: 500;
	color: var(--text-muted);
	min-width: 70px;
}
.scheduler-upcoming__item-title {
	flex: 1;
	font-size: 13px;
	color: var(--text-primary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.scheduler-upcoming__empty {
	text-align: center;
	padding: 16px;
	color: var(--text-muted);
	font-size: 13px;
}

/* Event Setup Form */
.event-setup-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.form__row {
	display: flex;
	gap: 16px;
}
.form__row--2col > * {
	flex: 1;
}
.form__required {
	color: var(--danger-color);
}
.form__textarea {
	resize: vertical;
	min-height: 80px;
}

/* Event Artwork */
.event-artwork {
	display: flex;
	gap: 16px;
	align-items: flex-start;
}
.event-artwork__preview {
	width: 160px;
	aspect-ratio: 16/9;
	background: var(--bg-tertiary);
	border-radius: 8px;
	overflow: hidden;
	flex-shrink: 0;
}
.event-artwork__preview img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.event-artwork__placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	color: var(--text-muted);
}
.event-artwork__placeholder svg {
	opacity: 0.5;
}
.event-artwork__placeholder span {
	font-size: 11px;
}
.event-artwork__actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.event-artwork__hint {
	font-size: 11px;
	color: var(--text-muted);
	margin: 0;
}

/* Event Destinations */
.event-destinations {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.event-destination {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	background: var(--bg-tertiary);
	border-radius: 6px;
	cursor: pointer;
	transition: all 0.15s ease;
	border: 1px solid transparent;
}
.event-destination:hover {
	background: var(--bg-secondary);
}
.event-destination:has(input:checked) {
	border-color: var(--primary-color);
	background: rgba(var(--primary-color-rgb), 0.1);
}
.event-destination input {
	display: none;
}
.event-destination__icon {
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 600;
}
.event-destination__icon--sermonnet {
	background: var(--primary-color);
	color: #fff;
}
.event-destination__icon--youtube {
	color: #ff0000;
}
.event-destination__icon--facebook {
	color: #1877f2;
}
.event-destination__name {
	font-size: 13px;
	color: var(--text-primary);
}

/* Feature Toggle */
.form__group--highlight {
	background: var(--bg-tertiary);
	padding: 16px;
	border-radius: 8px;
	margin-top: 8px;
}
.event-feature-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
	gap: 16px;
}
.event-feature-toggle__info {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.event-feature-toggle__label {
	font-size: 14px;
	font-weight: 500;
	color: var(--text-primary);
	display: flex;
	align-items: center;
	gap: 8px;
}
.event-feature-toggle__label svg {
	color: var(--warning-color);
}
.event-feature-toggle__hint {
	font-size: 12px;
	color: var(--text-muted);
}

/* Form Actions */
.form__actions {
	display: flex;
	justify-content: flex-end;
	gap: 12px;
	padding-top: 8px;
	border-top: 1px solid var(--border-color);
	margin-top: 8px;
}

/* Small button variant */
.btn--sm {
	padding: 6px 12px;
	font-size: 12px;
}

/* Responsive adjustments for scheduler */
@media (max-width: 768px) {
	.event-artwork {
		flex-direction: column;
	}
	.event-artwork__preview {
		width: 100%;
		max-width: 200px;
	}
	.form__row--2col {
		flex-direction: column;
		gap: 12px;
	}
	.event-destinations {
		flex-direction: column;
	}
	.event-destination {
		width: 100%;
	}
}

/* Construction Tape - Demo/Unhooked UI indicator for containers */
.snt__under_construction_container {
	position: relative;
	border: 4px solid transparent;
	border-image: repeating-linear-gradient(
		-45deg,
		#000 0,
		#000 12px,
		#f5c400 12px,
		#f5c400 24px
	) 4;
	border-radius: 8px;
	padding: 4px;
}

.snt__under_construction_container::before {
	content: 'DEMO - Not Connected to API';
	position: absolute;
	top: -14px;
	left: 50%;
	transform: translateX(-50%);
	background: repeating-linear-gradient(
		-45deg,
		#000 0,
		#000 8px,
		#f5c400 8px,
		#f5c400 16px
	);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	padding: 4px 12px;
	border-radius: 4px;
	z-index: 100;
	letter-spacing: 0.5px;
	white-space: nowrap;
	text-shadow: 0 1px 2px rgba(0,0,0,0.8);
	box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}