:root {
	--rabtoon-creator-navy: #001A46;
	--rabtoon-creator-navy-2: #082B5A;
	--rabtoon-creator-orange: #FF7E33;
	--rabtoon-creator-orange-hover: #F06F2B;
	--rabtoon-creator-text: #101828;
	--rabtoon-creator-muted: #667085;
	--rabtoon-creator-soft: #F6F8FB;
	--rabtoon-creator-border: #E7EBF1;
	--rabtoon-creator-white: #FFFFFF;
	--rabtoon-creator-danger: #B42318;
	--rabtoon-creator-shadow: 0 18px 50px rgba(0, 26, 70, .08);
}

.rabtoon-creator-page,
.rabtoon-creator-page * {
	box-sizing: border-box;
}

.rabtoon-creator-page {
	width: 100%;
	padding: 42px 0 70px;
	color: var(--rabtoon-creator-text);
}

.rabtoon-dashboard,
.rabtoon-publish-page,
.rabtoon-login-required {
	width: 100%;
	max-width: 1180px;
	margin-inline: auto;
}

.rabtoon-eyebrow {
	display: block;
	margin-bottom: 7px;
	color: var(--rabtoon-creator-orange);
	font-size: 12px;
	font-weight: 850;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.rabtoon-primary-button,
.rabtoon-secondary-button {
	min-height: 46px;
	padding: 0 18px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	font: inherit;
	font-size: 14px;
	font-weight: 800;
	text-decoration: none;
	cursor: pointer;
	transition: .18s ease;
}

.rabtoon-primary-button {
	border: 1px solid var(--rabtoon-creator-orange);
	background: var(--rabtoon-creator-orange);
	color: #fff;
}

.rabtoon-primary-button:hover {
	background: var(--rabtoon-creator-orange-hover);
	border-color: var(--rabtoon-creator-orange-hover);
	color: #fff;
}

.rabtoon-secondary-button {
	border: 1px solid var(--rabtoon-creator-border);
	background: #fff;
	color: var(--rabtoon-creator-navy);
}

.rabtoon-secondary-button:hover {
	border-color: rgba(0,26,70,.20);
	background: var(--rabtoon-creator-soft);
	color: var(--rabtoon-creator-navy);
}

.rabtoon-primary-button:disabled,
.rabtoon-secondary-button:disabled {
	opacity: .58;
	cursor: wait;
}

/* Dashboard */
.rabtoon-dashboard__welcome,
.rabtoon-publish-page__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 28px;
}

.rabtoon-dashboard__welcome h1,
.rabtoon-publish-page__head h1,
.rabtoon-login-required h1 {
	margin: 0 0 9px;
	font-size: clamp(32px, 4vw, 48px);
	line-height: 1.08;
	font-weight: 900;
	letter-spacing: -.04em;
	color: var(--rabtoon-creator-text);
}

.rabtoon-dashboard__welcome p,
.rabtoon-publish-page__head p,
.rabtoon-login-required p {
	max-width: 720px;
	margin: 0;
	color: var(--rabtoon-creator-muted);
	font-size: 15px;
	line-height: 1.65;
}

.rabtoon-dashboard-stats {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 12px;
	margin-bottom: 38px;
}

.rabtoon-dashboard-stat {
	padding: 19px;
	border: 1px solid var(--rabtoon-creator-border);
	border-radius: 16px;
	background: #fff;
}

.rabtoon-dashboard-stat strong {
	display: block;
	margin-bottom: 4px;
	color: var(--rabtoon-creator-navy);
	font-size: 25px;
	line-height: 1;
}

.rabtoon-dashboard-stat span {
	color: var(--rabtoon-creator-muted);
	font-size: 12px;
	font-weight: 750;
}

.rabtoon-dashboard-section {
	padding-top: 30px;
	border-top: 1px solid var(--rabtoon-creator-border);
}

.rabtoon-dashboard-section__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	margin-bottom: 20px;
}

.rabtoon-dashboard-section__head h2 {
	margin: 0;
	font-size: 27px;
	font-weight: 850;
}

.rabtoon-dashboard-section__head > span {
	min-width: 30px;
	height: 30px;
	padding: 0 9px;
	border-radius: 999px;
	background: var(--rabtoon-creator-soft);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--rabtoon-creator-muted);
	font-size: 12px;
	font-weight: 800;
}

.rabtoon-dashboard-story-list {
	display: grid;
	gap: 13px;
}

.rabtoon-dashboard-story {
	display: grid;
	grid-template-columns: 86px minmax(0, 1fr);
	gap: 16px;
	padding: 14px;
	border: 1px solid var(--rabtoon-creator-border);
	border-radius: 16px;
	background: #fff;
}

.rabtoon-dashboard-story__cover,
.rabtoon-dashboard-story__placeholder {
	width: 86px;
	aspect-ratio: 5 / 7;
	border-radius: 10px;
	overflow: hidden;
	background: var(--rabtoon-creator-soft);
}

.rabtoon-dashboard-story__cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.rabtoon-dashboard-story__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 7px;
	color: var(--rabtoon-creator-muted);
	font-size: 11px;
	text-align: center;
}

.rabtoon-dashboard-story__body {
	min-width: 0;
}

.rabtoon-dashboard-story__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
}

.rabtoon-dashboard-story__top h3 {
	margin: 7px 0 0;
	font-size: 19px;
	line-height: 1.25;
}

.rabtoon-dashboard-story__actions {
	display: flex;
	gap: 7px;
}

.rabtoon-dashboard-story__actions a {
	min-height: 34px;
	padding: 0 12px;
	border: 1px solid var(--rabtoon-creator-border);
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--rabtoon-creator-navy);
	font-size: 12px;
	font-weight: 800;
	text-decoration: none;
}

.rabtoon-dashboard-story__actions a:hover {
	background: var(--rabtoon-creator-soft);
}

.rabtoon-status {
	min-height: 25px;
	padding: 0 8px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	font-size: 10px;
	font-weight: 850;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.rabtoon-status--published { background:#ECFDF3; color:#027A48; }
.rabtoon-status--pending { background:#FFF7E8; color:#B54708; }
.rabtoon-status--rejected { background:#FFF1F0; color:#B42318; }
.rabtoon-status--draft { background:#F2F4F7; color:#475467; }

.rabtoon-dashboard-story__metrics {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	margin-top: 15px;
	color: var(--rabtoon-creator-muted);
	font-size: 12px;
}

.rabtoon-dashboard-story__metrics strong {
	color: var(--rabtoon-creator-navy);
}

.rabtoon-rejection-note {
	margin-top: 12px;
	padding: 9px 11px;
	border-radius: 9px;
	background: #FFF1F0;
	color: #B42318;
	font-size: 12px;
}

.rabtoon-dashboard-empty,
.rabtoon-login-required {
	padding: 44px;
	border: 1px solid var(--rabtoon-creator-border);
	border-radius: 20px;
	background: #fff;
	box-shadow: var(--rabtoon-creator-shadow);
}

.rabtoon-dashboard-empty {
	text-align: center;
}

.rabtoon-dashboard-empty h3 {
	margin: 0 0 8px;
	font-size: 23px;
}

.rabtoon-dashboard-empty p {
	margin: 0 auto 18px;
	max-width: 600px;
	color: var(--rabtoon-creator-muted);
}

.rabtoon-login-required > div:last-child {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 22px;
}

/* Publish Form */
.rabtoon-story-form {
	padding: 24px;
	border: 1px solid var(--rabtoon-creator-border);
	border-radius: 20px;
	background: #fff;
	box-shadow: var(--rabtoon-creator-shadow);
}

.rabtoon-story-form__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 280px;
	gap: 30px;
	align-items: start;
}

.rabtoon-story-form__main {
	min-width: 0;
}

.rabtoon-field {
	margin-bottom: 20px;
}

.rabtoon-field label {
	display: block;
	margin-bottom: 7px;
	color: var(--rabtoon-creator-text);
	font-size: 13px;
	font-weight: 800;
}

.rabtoon-field label span {
	color: var(--rabtoon-creator-orange);
}

.rabtoon-field input,
.rabtoon-field textarea,
.rabtoon-field select {
	width: 100%;
	margin: 0;
	border: 1px solid var(--rabtoon-creator-border);
	border-radius: 11px;
	background: var(--rabtoon-creator-soft);
	color: var(--rabtoon-creator-text);
	font: inherit;
	font-size: 14px;
	outline: 0;
	box-shadow: none;
	transition: .18s ease;
}

.rabtoon-field input,
.rabtoon-field select {
	height: 48px;
	padding: 0 13px;
}

.rabtoon-field textarea {
	padding: 12px 13px;
	resize: vertical;
	line-height: 1.65;
}

.rabtoon-field input:focus,
.rabtoon-field textarea:focus,
.rabtoon-field select:focus {
	border-color: rgba(255,126,51,.55);
	background: #fff;
	box-shadow: 0 0 0 3px rgba(255,126,51,.08);
}

.rabtoon-field small,
.rabtoon-cover-uploader small {
	display: block;
	margin-top: 6px;
	color: var(--rabtoon-creator-muted);
	font-size: 11px;
	line-height: 1.5;
}

.rabtoon-form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 16px;
}

.rabtoon-story-form__side {
	position: sticky;
	top: 175px;
}

.rabtoon-cover-uploader {
	padding: 17px;
	border: 1px solid var(--rabtoon-creator-border);
	border-radius: 16px;
	background: var(--rabtoon-creator-soft);
}

.rabtoon-cover-uploader h3 {
	margin: 0 0 13px;
	font-size: 16px;
}

.rabtoon-cover-preview {
	width: 100%;
	aspect-ratio: 5 / 7;
	margin-bottom: 12px;
	border: 1px dashed #CAD2DE;
	border-radius: 12px;
	overflow: hidden;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--rabtoon-creator-muted);
	font-size: 12px;
	font-weight: 750;
}

.rabtoon-cover-preview img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.rabtoon-upload-button {
	min-height: 42px;
	width: 100%;
	padding: 0 14px;
	border-radius: 999px;
	background: var(--rabtoon-creator-navy);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 800;
	cursor: pointer;
}

.rabtoon-cover-uploader input[type="file"] {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
}

.rabtoon-story-form__message,
.rabtoon-creator-message {
	margin-top: 18px;
	padding: 11px 13px;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 700;
}

.rabtoon-story-form__message:empty {
	display: none;
}

.rabtoon-story-form__message[data-type="info"] { background:#EEF5FF; color:var(--rabtoon-creator-navy); }
.rabtoon-story-form__message[data-type="success"] { background:#ECFDF3; color:#027A48; }
.rabtoon-story-form__message[data-type="error"],
.rabtoon-creator-message--error { background:#FFF1F0; color:#B42318; }

.rabtoon-story-form__actions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid var(--rabtoon-creator-border);
}

@media (max-width: 980px) {
	.rabtoon-dashboard-stats { grid-template-columns: repeat(3, 1fr); }
	.rabtoon-story-form__layout { grid-template-columns: minmax(0, 1fr) 230px; gap: 22px; }
}

@media (max-width: 720px) {
	.rabtoon-creator-page { padding: 24px 0 50px; }
	.rabtoon-dashboard__welcome,
	.rabtoon-publish-page__head { flex-direction: column; align-items: stretch; }
	.rabtoon-dashboard__welcome > .rabtoon-primary-button,
	.rabtoon-publish-page__head > .rabtoon-secondary-button { align-self: flex-start; }
	.rabtoon-dashboard-stats { grid-template-columns: repeat(2, 1fr); }
	.rabtoon-dashboard-story { grid-template-columns: 70px minmax(0,1fr); padding: 11px; }
	.rabtoon-dashboard-story__cover,
	.rabtoon-dashboard-story__placeholder { width: 70px; }
	.rabtoon-dashboard-story__top { flex-direction: column; }
	.rabtoon-story-form { padding: 16px; }
	.rabtoon-story-form__layout { grid-template-columns: 1fr; }
	.rabtoon-story-form__side { position: static; }
	.rabtoon-cover-uploader { max-width: 330px; }
	.rabtoon-form-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
	.rabtoon-dashboard-stats { grid-template-columns: 1fr 1fr; gap: 9px; }
	.rabtoon-dashboard-stat { padding: 14px; }
	.rabtoon-dashboard-story__actions { width: 100%; }
	.rabtoon-dashboard-story__actions a { flex: 1; }
	.rabtoon-story-form__actions { flex-direction: column-reverse; }
	.rabtoon-story-form__actions button { width: 100%; }
	.rabtoon-dashboard-empty,
	.rabtoon-login-required { padding: 26px 18px; }
}

html[dir="rtl"] .rabtoon-creator-page {
	direction: rtl;
}

/* v1.4 dashboard utilities */
.rabtoon-dashboard__welcome-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 9px;
}

@media (max-width: 720px) {
	.rabtoon-dashboard__welcome-actions {
		width: 100%;
		justify-content: flex-start;
	}
}

/* Prevent theme hover underlines on creator action buttons. */
.rabtoon-primary-button,
.rabtoon-primary-button:hover,
.rabtoon-primary-button:focus,
.rabtoon-secondary-button,
.rabtoon-secondary-button:hover,
.rabtoon-secondary-button:focus,
.rabtoon-upload-button,
.rabtoon-upload-button:hover,
.rabtoon-dashboard-story__actions a,
.rabtoon-dashboard-story__actions a:hover {
	text-decoration: none !important;
}

/* ==========================================================
   v1.8 Creator Studio shell inspired by professional comic
   publishing dashboards while preserving 3RABTOON branding.
========================================================== */

.rabtoon-creator-page {
	background: #f7f8fa;
	padding: 0 0 70px;
}

.rabtoon-studio-shell {
	width: min(1440px, 100%);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 250px minmax(0, 1fr);
	align-items: stretch;
	min-height: 760px;
	background: #fff;
	border-inline: 1px solid var(--rabtoon-creator-border);
}

.rabtoon-studio-sidebar {
	padding: 30px 22px;
	border-inline-end: 1px solid var(--rabtoon-creator-border);
	background: #fff;
}

.rabtoon-studio-sidebar__profile {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	margin-bottom: 20px;
}

.rabtoon-studio-sidebar__avatar {
	width: 88px;
	height: 88px;
	margin-bottom: 12px;
	border: 4px solid #fff;
	border-radius: 50%;
	background: var(--rabtoon-creator-soft);
	box-shadow: 0 0 0 1px var(--rabtoon-creator-border);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--rabtoon-creator-navy);
	font-size: 28px;
	font-weight: 900;
}

.rabtoon-studio-sidebar__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.rabtoon-studio-sidebar__profile strong {
	color: var(--rabtoon-creator-text);
	font-size: 15px;
	font-weight: 850;
}

.rabtoon-studio-sidebar__profile a {
	margin-top: 4px;
	color: var(--rabtoon-creator-muted);
	font-size: 11px;
	font-weight: 700;
	text-decoration: none !important;
}

.rabtoon-studio-sidebar__profile a:hover {
	color: var(--rabtoon-creator-orange);
}

.rabtoon-studio-sidebar__create {
	width: 100%;
	min-height: 46px;
	margin-bottom: 22px;
	padding: 0 14px;
	border: 1px solid var(--rabtoon-creator-orange);
	border-radius: 11px;
	background: var(--rabtoon-creator-orange);
	color: #fff !important;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	font-size: 13px;
	font-weight: 850;
	text-decoration: none !important;
	transition: .18s ease;
}

.rabtoon-studio-sidebar__create:hover {
	background: var(--rabtoon-creator-orange-hover);
	border-color: var(--rabtoon-creator-orange-hover);
	transform: translateY(-1px);
}

.rabtoon-studio-sidebar__nav {
	display: grid;
	gap: 4px;
}

.rabtoon-studio-sidebar__nav a {
	min-height: 46px;
	padding: 0 12px;
	border-radius: 10px;
	color: var(--rabtoon-creator-text);
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	font-weight: 800;
	text-decoration: none !important;
	transition: .18s ease;
}

.rabtoon-studio-sidebar__nav a:hover {
	background: var(--rabtoon-creator-soft);
	color: var(--rabtoon-creator-navy);
}

.rabtoon-studio-sidebar__nav a.is-active {
	background: rgba(255,126,51,.10);
	color: var(--rabtoon-creator-orange);
}

.rabtoon-studio-sidebar__nav-icon {
	width: 22px;
	height: 22px;
	border-radius: 6px;
	background: #f1f3f6;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
}

.rabtoon-studio-sidebar__nav a.is-active .rabtoon-studio-sidebar__nav-icon {
	background: var(--rabtoon-creator-orange);
	color: #fff;
}

.rabtoon-studio-main {
	min-width: 0;
	padding: 38px 32px 60px;
	background: #f7f8fa;
}

.rabtoon-studio-main > .rabtoon-dashboard,
.rabtoon-studio-main > .rabtoon-publish-page {
	max-width: 1100px;
	margin-inline: auto;
}

.rabtoon-dashboard__welcome,
.rabtoon-publish-page__head {
	padding: 0;
	margin-bottom: 24px;
}

.rabtoon-dashboard__welcome h1,
.rabtoon-publish-page__head h1 {
	font-size: clamp(30px, 3.3vw, 44px);
}

.rabtoon-dashboard-stats {
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 10px;
	margin-bottom: 28px;
}

.rabtoon-dashboard-stat {
	border-radius: 12px;
	box-shadow: none;
}

.rabtoon-dashboard-section {
	padding: 24px;
	border: 1px solid var(--rabtoon-creator-border);
	border-radius: 14px;
	background: #fff;
}

.rabtoon-dashboard-story {
	border-radius: 11px;
	box-shadow: none;
}

.rabtoon-dashboard-story__actions {
	flex-wrap: wrap;
	justify-content: flex-end;
}

/* Series create/edit form */
.rabtoon-story-form--series {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

.rabtoon-studio-card {
	margin-bottom: 18px;
	padding: 24px 28px;
	border: 1px solid var(--rabtoon-creator-border);
	border-radius: 14px;
	background: #fff;
}

.rabtoon-studio-card__head {
	margin-bottom: 20px;
}

.rabtoon-studio-card__head h2 {
	margin: 0;
	color: var(--rabtoon-creator-text);
	font-size: 20px;
	font-weight: 900;
}

.rabtoon-studio-card__head p {
	margin: 5px 0 0;
	color: var(--rabtoon-creator-muted);
	font-size: 12px;
	line-height: 1.55;
}

.rabtoon-series-form-row {
	display: grid;
	grid-template-columns: 190px minmax(0, 1fr);
	gap: 28px;
	align-items: center;
	padding: 9px 0;
}

.rabtoon-series-form-row--textarea {
	align-items: start;
}

.rabtoon-series-form-row > label {
	color: var(--rabtoon-creator-text);
	font-size: 13px;
	font-weight: 850;
}

.rabtoon-series-form-row > label span,
.rabtoon-story-artwork-field > strong span {
	color: var(--rabtoon-creator-orange);
}

.rabtoon-series-form-row input,
.rabtoon-series-form-row textarea,
.rabtoon-series-form-row select {
	width: 100%;
	margin: 0;
	border: 1px solid var(--rabtoon-creator-border);
	border-radius: 8px;
	background: #fff;
	color: var(--rabtoon-creator-text);
	font: inherit;
	font-size: 13px;
	outline: none;
	box-shadow: none;
	transition: .18s ease;
}

.rabtoon-series-form-row input,
.rabtoon-series-form-row select {
	height: 46px;
	padding-inline: 13px;
}

.rabtoon-series-form-row textarea {
	padding: 12px 13px;
	line-height: 1.6;
	resize: vertical;
}

.rabtoon-series-form-row input:focus,
.rabtoon-series-form-row textarea:focus,
.rabtoon-series-form-row select:focus {
	border-color: rgba(255,126,51,.60);
	box-shadow: 0 0 0 3px rgba(255,126,51,.08);
}

.rabtoon-series-form-row small,
.rabtoon-story-artwork-field small {
	display: block;
	margin-top: 6px;
	color: var(--rabtoon-creator-muted);
	font-size: 10px;
	line-height: 1.5;
}

.rabtoon-counted-field {
	position: relative;
}

.rabtoon-counted-field > small {
	position: absolute;
	inset-inline-end: 10px;
	bottom: 7px;
	padding: 2px 5px;
	border-radius: 5px;
	background: rgba(255,255,255,.88);
	color: #98A2B3;
}

.rabtoon-category-pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.rabtoon-category-checkboxes {
	display: grid;
	gap: 8px;
}

.rabtoon-category-checkbox-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
}

.rabtoon-category-checkbox {
	min-height: 42px;
	padding: 9px 11px;
	border: 1px solid var(--rabtoon-creator-border-strong);
	border-radius: 9px;
	background: #fff;
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--rabtoon-creator-text);
	font-size: 12px;
	font-weight: 750;
	cursor: pointer;
	transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.rabtoon-category-checkbox:hover {
	border-color: rgba(255,126,51,.48);
	background: rgba(255,126,51,.035);
}

.rabtoon-category-checkbox:has(input:checked) {
	border-color: rgba(255,126,51,.72);
	background: rgba(255,126,51,.075);
	box-shadow: inset 0 0 0 1px rgba(255,126,51,.08);
}

.rabtoon-category-checkbox input[type="checkbox"] {
	width: 16px !important;
	height: 16px !important;
	min-width: 16px;
	margin: 0 !important;
	padding: 0 !important;
	border-radius: 4px;
	accent-color: var(--rabtoon-creator-orange);
	box-shadow: none !important;
	flex: 0 0 16px;
}

.rabtoon-category-checkboxes.has-error .rabtoon-category-checkbox {
	border-color: rgba(220,38,38,.45);
}

.rabtoon-category-checkboxes small {
	display: block;
	color: var(--rabtoon-creator-muted);
	font-size: 11px;
	line-height: 1.55;
}

.rabtoon-category-checkboxes small strong {
	color: var(--rabtoon-creator-orange);
}

.rabtoon-story-artwork-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px;
}

.rabtoon-story-artwork-field {
	min-width: 0;
}

.rabtoon-story-artwork-field > strong {
	display: block;
	margin-bottom: 10px;
	font-size: 13px;
}

.rabtoon-story-artwork-preview {
	margin-bottom: 11px;
	border: 1px dashed #cbd3df;
	border-radius: 10px;
	background: var(--rabtoon-creator-soft);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--rabtoon-creator-muted);
	font-size: 12px;
	font-weight: 850;
}

.rabtoon-story-artwork-preview--square {
	width: min(100%, 260px);
	aspect-ratio: 1 / 1;
}

.rabtoon-story-artwork-preview--vertical {
	width: min(100%, 190px);
	aspect-ratio: 5 / 7;
}

.rabtoon-story-artwork-preview img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.rabtoon-story-artwork-field input[type="file"] {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
}

.rabtoon-story-artwork-field .rabtoon-upload-button {
	width: auto;
	max-width: 260px;
	min-height: 40px;
	padding: 0 14px;
	border-radius: 8px;
	background: var(--rabtoon-creator-navy);
}

.rabtoon-content-warning-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	margin-top: 8px;
}

.rabtoon-content-warning-grid label,
.rabtoon-story-agreement {
	min-height: 42px;
	padding: 9px 11px;
	border: 1px solid var(--rabtoon-creator-border);
	border-radius: 9px;
	background: #fff;
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--rabtoon-creator-text);
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
}

.rabtoon-content-warning-grid input,
.rabtoon-story-agreement input {
	accent-color: var(--rabtoon-creator-orange);
}

.rabtoon-story-agreement {
	margin-top: 18px;
	background: rgba(0,26,70,.035);
}

.rabtoon-story-form__actions--sticky {
	position: sticky;
	bottom: 12px;
	z-index: 15;
	margin-top: 18px;
	padding: 12px;
	border: 1px solid var(--rabtoon-creator-border);
	border-radius: 12px;
	background: rgba(255,255,255,.96);
	box-shadow: 0 12px 30px rgba(0,26,70,.09);
	backdrop-filter: blur(8px);
}

/* Creator comments */
.rabtoon-creator-comments-list {
	display: grid;
	gap: 10px;
}

.rabtoon-creator-comment-card {
	display: grid;
	grid-template-columns: 44px minmax(0,1fr);
	gap: 12px;
	padding: 14px;
	border: 1px solid var(--rabtoon-creator-border);
	border-radius: 11px;
	background: #fff;
}

.rabtoon-creator-comment-card__avatar img {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: block;
}

.rabtoon-creator-comment-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.rabtoon-creator-comment-card__head strong { font-size: 13px; }
.rabtoon-creator-comment-card__head time { color: #98A2B3; font-size: 10px; }
.rabtoon-creator-comment-card p { margin: 6px 0; color: #475467; font-size: 13px; line-height: 1.55; }
.rabtoon-creator-comment-card a { color: var(--rabtoon-creator-orange); font-size: 11px; font-weight: 800; text-decoration: none !important; }

@media (max-width: 1080px) {
	.rabtoon-studio-shell { grid-template-columns: 210px minmax(0,1fr); }
	.rabtoon-studio-sidebar { padding: 25px 15px; }
	.rabtoon-studio-main { padding: 30px 22px 50px; }
	.rabtoon-dashboard-stats { grid-template-columns: repeat(3, minmax(0,1fr)); }
	.rabtoon-content-warning-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 820px) {
	.rabtoon-studio-shell {
		display: block;
		border-inline: 0;
	}

	.rabtoon-studio-sidebar {
		padding: 14px 16px;
		border-inline-end: 0;
		border-bottom: 1px solid var(--rabtoon-creator-border);
	}

	.rabtoon-studio-sidebar__profile {
		margin-bottom: 11px;
		flex-direction: row;
		justify-content: flex-start;
		gap: 10px;
		text-align: start;
	}

	.rabtoon-studio-sidebar__avatar {
		width: 44px;
		height: 44px;
		margin: 0;
		border-width: 2px;
		font-size: 17px;
	}

	.rabtoon-studio-sidebar__profile strong { margin-inline-end: auto; }
	.rabtoon-studio-sidebar__profile a { margin: 0; white-space: nowrap; }
	.rabtoon-studio-sidebar__create { min-height: 42px; margin-bottom: 10px; }

	.rabtoon-studio-sidebar__nav {
		display: flex;
		overflow-x: auto;
		gap: 6px;
		scrollbar-width: none;
	}

	.rabtoon-studio-sidebar__nav::-webkit-scrollbar { display: none; }
	.rabtoon-studio-sidebar__nav a { min-height: 40px; flex: 0 0 auto; padding: 0 10px; }
	.rabtoon-studio-main { padding: 24px 16px 46px; }
	.rabtoon-series-form-row { grid-template-columns: 1fr; gap: 7px; }
	.rabtoon-story-artwork-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
	.rabtoon-studio-main { padding-inline: 12px; }
	.rabtoon-dashboard-stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
	.rabtoon-dashboard-section,
	.rabtoon-studio-card { padding: 16px; border-radius: 11px; }
	.rabtoon-category-pair,
	.rabtoon-story-artwork-grid,
	.rabtoon-content-warning-grid { grid-template-columns: 1fr; }
	.rabtoon-story-artwork-preview--square,
	.rabtoon-story-artwork-preview--vertical { width: min(100%, 240px); }
	.rabtoon-story-form__actions--sticky { position: static; flex-direction: column-reverse; }
	.rabtoon-story-form__actions--sticky > * { width: 100%; }
	.rabtoon-studio-sidebar__profile a { display: none; }
}

html[dir="rtl"] .rabtoon-studio-shell,
html[dir="rtl"] .rabtoon-studio-sidebar,
html[dir="rtl"] .rabtoon-studio-main {
	direction: rtl;
}

/* ==========================================================
   v1.8.1 Creator Studio visual polish
   - crisp SVG navigation icons
   - consistent, visible borders
   - cleaner active/hover states
========================================================== */

:root {
	--rabtoon-creator-border: #DCE3EC;
	--rabtoon-creator-border-strong: #CCD6E2;
	--rabtoon-creator-line: rgba(0, 26, 70, .10);
}

.rabtoon-studio-shell {
	border-inline: 1px solid var(--rabtoon-creator-border-strong);
	background: #fff;
}

.rabtoon-studio-sidebar {
	border-inline-end: 1px solid var(--rabtoon-creator-border-strong);
}

.rabtoon-studio-sidebar__avatar {
	border: 4px solid #fff;
	box-shadow:
		0 0 0 1px var(--rabtoon-creator-border-strong),
		0 6px 18px rgba(0, 26, 70, .06);
}

.rabtoon-studio-sidebar__nav {
	gap: 6px;
}

.rabtoon-studio-sidebar__nav a {
	min-height: 48px;
	padding: 0 11px;
	border: 1px solid transparent;
	border-radius: 11px;
	gap: 11px;
	transition:
		background-color .18s ease,
		border-color .18s ease,
		color .18s ease,
		transform .18s ease;
}

.rabtoon-studio-sidebar__nav a:hover {
	border-color: var(--rabtoon-creator-border);
	background: #F8FAFC;
	color: var(--rabtoon-creator-navy);
	transform: translateX(1px);
}

html[dir="rtl"] .rabtoon-studio-sidebar__nav a:hover {
	transform: translateX(-1px);
}

.rabtoon-studio-sidebar__nav a.is-active {
	border-color: rgba(255, 126, 51, .18);
	background: rgba(255, 126, 51, .10);
	color: var(--rabtoon-creator-orange);
}

.rabtoon-studio-sidebar__nav-icon {
	width: 30px;
	height: 30px;
	flex: 0 0 30px;
	border: 1px solid var(--rabtoon-creator-border);
	border-radius: 8px;
	background: #F5F7FA;
	color: var(--rabtoon-creator-navy);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
}

.rabtoon-studio-sidebar__nav-icon svg {
	width: 16px;
	height: 16px;
	display: block;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.rabtoon-studio-sidebar__nav a:hover .rabtoon-studio-sidebar__nav-icon {
	border-color: #C8D3E0;
	background: #fff;
}

.rabtoon-studio-sidebar__nav a.is-active .rabtoon-studio-sidebar__nav-icon {
	border-color: rgba(255, 126, 51, .24);
	background: #FFF4ED;
	color: var(--rabtoon-creator-orange);
	box-shadow: none;
}

.rabtoon-studio-sidebar__create {
	border-color: var(--rabtoon-creator-orange);
	box-shadow: 0 6px 16px rgba(255, 126, 51, .13);
}

/* Consistent cards throughout creator studio. */
.rabtoon-dashboard-section,
.rabtoon-studio-card,
.rabtoon-dashboard-stat,
.rabtoon-dashboard-story,
.rabtoon-story-form,
.rabtoon-cover-uploader,
.rabtoon-creator-comment-card {
	border-color: var(--rabtoon-creator-border-strong);
}

.rabtoon-dashboard-section,
.rabtoon-studio-card,
.rabtoon-dashboard-story,
.rabtoon-story-form {
	box-shadow: 0 1px 2px rgba(0, 26, 70, .025);
}

.rabtoon-series-form-row input,
.rabtoon-series-form-row textarea,
.rabtoon-series-form-row select,
.rabtoon-field input,
.rabtoon-field textarea,
.rabtoon-field select {
	border-color: var(--rabtoon-creator-border-strong);
}

.rabtoon-story-artwork-preview,
.rabtoon-cover-preview {
	border-color: #BFCAD8;
}

.rabtoon-content-warning-grid label,
.rabtoon-story-agreement,
.rabtoon-story-form__actions--sticky {
	border-color: var(--rabtoon-creator-border-strong);
}

@media (max-width: 820px) {
	.rabtoon-studio-sidebar {
		border-bottom-color: var(--rabtoon-creator-border-strong);
	}

	.rabtoon-studio-sidebar__nav a {
		min-height: 42px;
		padding-inline: 9px 11px;
	}

	.rabtoon-studio-sidebar__nav-icon {
		width: 28px;
		height: 28px;
		flex-basis: 28px;
	}
}

/* ==========================================================
   v1.8.2 Creator Studio frame + brand hover consistency
   - full outer frame around the complete studio
   - sidebar divider runs from top to bottom
   - all creator action hovers use 3RABTOON navy/orange only
========================================================== */

.rabtoon-studio-shell {
	position: relative;
	border: 1px solid var(--rabtoon-creator-border-strong);
	border-radius: 18px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 26, 70, .035);
}

/* The shell owns the outer border now; avoid a doubled inline frame. */
.rabtoon-studio-shell {
	border-inline: 1px solid var(--rabtoon-creator-border-strong);
}

.rabtoon-studio-sidebar {
	position: relative;
	align-self: stretch;
	min-height: 100%;
	border-inline-end: 1px solid var(--rabtoon-creator-border-strong);
	background: #fff;
}

/* Keep the separator visually continuous inside the rounded shell. */
.rabtoon-studio-sidebar::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	inset-inline-end: -1px;
	width: 1px;
	background: var(--rabtoon-creator-border-strong);
	pointer-events: none;
}

.rabtoon-studio-main {
	min-height: 100%;
	background: #F7F8FA;
}

/* Main dashboard/content cards: clearer but still subtle brand frame. */
.rabtoon-dashboard-section,
.rabtoon-studio-card,
.rabtoon-dashboard-stat,
.rabtoon-dashboard-story,
.rabtoon-story-form,
.rabtoon-cover-uploader,
.rabtoon-creator-comment-card {
	border-color: var(--rabtoon-creator-border-strong) !important;
}

.rabtoon-dashboard-section,
.rabtoon-studio-card,
.rabtoon-story-form {
	box-shadow: 0 1px 3px rgba(0, 26, 70, .035);
}

/* Explicit hover states so Astra/Elementor cannot inject its blue. */
.rabtoon-dashboard-story__actions a:hover,
.rabtoon-dashboard-story__actions a:focus-visible,
.rabtoon-secondary-button:hover,
.rabtoon-secondary-button:focus-visible {
	background: var(--rabtoon-creator-navy) !important;
	border-color: var(--rabtoon-creator-navy) !important;
	color: #fff !important;
	text-decoration: none !important;
	box-shadow: none !important;
}

.rabtoon-primary-button:hover,
.rabtoon-primary-button:focus-visible,
.rabtoon-studio-sidebar__create:hover,
.rabtoon-studio-sidebar__create:focus-visible {
	background: var(--rabtoon-creator-orange-hover) !important;
	border-color: var(--rabtoon-creator-orange-hover) !important;
	color: #fff !important;
	text-decoration: none !important;
	box-shadow: 0 6px 16px rgba(255, 126, 51, .16) !important;
}

.rabtoon-upload-button:hover,
.rabtoon-upload-button:focus-visible {
	background: var(--rabtoon-creator-navy-2) !important;
	border-color: var(--rabtoon-creator-navy-2) !important;
	color: #fff !important;
	text-decoration: none !important;
}

/* Sidebar stays soft on hover; active state remains orange. */
.rabtoon-studio-sidebar__nav a:hover,
.rabtoon-studio-sidebar__nav a:focus-visible {
	background: #F5F7FA !important;
	border-color: var(--rabtoon-creator-border-strong) !important;
	color: var(--rabtoon-creator-navy) !important;
	text-decoration: none !important;
	box-shadow: none !important;
}

.rabtoon-studio-sidebar__nav a.is-active,
.rabtoon-studio-sidebar__nav a.is-active:hover,
.rabtoon-studio-sidebar__nav a.is-active:focus-visible {
	background: #FFF2E9 !important;
	border-color: rgba(255, 126, 51, .26) !important;
	color: var(--rabtoon-creator-orange) !important;
}

/* Remove inherited theme pseudo-elements/underlines from all studio controls. */
.rabtoon-studio-shell a,
.rabtoon-studio-shell button,
.rabtoon-studio-shell a:hover,
.rabtoon-studio-shell button:hover,
.rabtoon-studio-shell a:focus,
.rabtoon-studio-shell button:focus {
	text-decoration: none !important;
}

.rabtoon-studio-shell a::before,
.rabtoon-studio-shell a::after,
.rabtoon-studio-shell button::before,
.rabtoon-studio-shell button::after {
	text-decoration: none !important;
}

@media (max-width: 820px) {
	.rabtoon-studio-shell {
		border-radius: 14px;
	}

	.rabtoon-studio-sidebar {
		border-inline-end: 0;
		border-bottom: 1px solid var(--rabtoon-creator-border-strong);
	}

	.rabtoon-studio-sidebar::after {
		display: none;
	}
}

@media (max-width: 560px) {
	.rabtoon-studio-shell {
		border-radius: 12px;
	}
}

/* v1.10.0 creator notification badge */
.rabtoon-studio-sidebar__nav a .rabtoon-studio-sidebar__count{display:inline-flex;min-width:20px;height:20px;margin-inline-start:auto;padding:0 5px;border-radius:999px;align-items:center;justify-content:center;background:#ff7e33;color:#fff;font-size:10px;font-weight:900;line-height:1}.rabtoon-studio-sidebar__nav a.is-active .rabtoon-studio-sidebar__count{background:#001a46;color:#fff}

/* ==========================================================
   v1.11 Story banner + Creator Hub
========================================================== */
.rabtoon-story-artwork-field--banner {
	grid-column: 1 / -1;
}

.rabtoon-story-artwork-preview--banner {
	width: 100%;
	max-width: 760px;
	aspect-ratio: 3 / 1;
}

.rabtoon-story-artwork-field--banner .rabtoon-upload-button {
	max-width: none;
}

.rabtoon-writer-hub-shell {
	grid-template-columns: minmax(0, 1fr);
}

.rabtoon-creator-hub-shell .rabtoon-studio-main {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 620px;
	padding: 42px;
}

.rabtoon-creator-hub {
	width: min(680px, 100%);
	padding: 54px 38px;
	border: 1px solid var(--rabtoon-creator-border-strong);
	border-radius: 22px;
	background: #fff;
	text-align: center;
	box-shadow: 0 14px 40px rgba(0,26,70,.06);
}

.rabtoon-creator-hub__icon {
	width: 72px;
	height: 72px;
	margin: 0 auto 18px;
	border-radius: 20px;
	background: #FFF2E9;
	color: var(--rabtoon-creator-orange);
	display: flex;
	align-items: center;
	justify-content: center;
}

.rabtoon-creator-hub__icon svg {
	width: 34px;
	height: 34px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.rabtoon-creator-hub .rabtoon-eyebrow {
	color: var(--rabtoon-creator-orange);
	font-size: 11px;
	font-weight: 900;
	letter-spacing: .09em;
	text-transform: uppercase;
}

.rabtoon-creator-hub h1 {
	margin: 8px 0 12px;
	color: var(--rabtoon-creator-navy);
	font-size: clamp(34px, 6vw, 54px);
	line-height: 1.05;
	font-weight: 900;
	letter-spacing: -.04em;
}

.rabtoon-creator-hub > p {
	max-width: 560px;
	margin: 0 auto;
	color: var(--rabtoon-creator-muted);
	font-size: 14px;
	line-height: 1.75;
}

.rabtoon-creator-hub__chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: 24px;
}

.rabtoon-creator-hub__chips span {
	min-height: 34px;
	padding: 0 12px;
	border: 1px solid var(--rabtoon-creator-border-strong);
	border-radius: 999px;
	background: #F7F8FA;
	color: var(--rabtoon-creator-navy);
	display: inline-flex;
	align-items: center;
	font-size: 11px;
	font-weight: 800;
}

@media (max-width: 820px) {
	.rabtoon-creator-hub-shell .rabtoon-studio-main { min-height: 520px; padding: 24px 16px; }
	.rabtoon-creator-hub { padding: 38px 20px; }
}


/* v1.12.1 multi-category checkbox responsiveness */
@media (max-width: 1090px) {
	.rabtoon-category-checkbox-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 620px) {
	.rabtoon-category-checkbox-grid {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================
   v1.15.15 — ARABIC ACCOUNT / CREATOR HEADING ALIGNMENT
   Arabic only; English/LTR remains unchanged.
========================================================== */
html[dir="rtl"] .rabtoon-dashboard__welcome > div:first-child,
html[dir="rtl"] .rabtoon-publish-page__head > div:first-child,
html[dir="rtl"] .rabtoon-creator-comments-page .rabtoon-dashboard__welcome > div:first-child,
html[dir="rtl"] .rabtoon-login-required {
	direction: rtl;
	text-align: right;
}

html[dir="rtl"] .rabtoon-dashboard__welcome > div:first-child .rabtoon-eyebrow,
html[dir="rtl"] .rabtoon-dashboard__welcome > div:first-child h1,
html[dir="rtl"] .rabtoon-dashboard__welcome > div:first-child p,
html[dir="rtl"] .rabtoon-publish-page__head > div:first-child .rabtoon-eyebrow,
html[dir="rtl"] .rabtoon-publish-page__head > div:first-child h1,
html[dir="rtl"] .rabtoon-publish-page__head > div:first-child p,
html[dir="rtl"] .rabtoon-login-required .rabtoon-eyebrow,
html[dir="rtl"] .rabtoon-login-required h1,
html[dir="rtl"] .rabtoon-login-required p {
	text-align: right;
}

/* ==========================================================
   v1.15.17 — FIRST-STORY / PRE-CREATOR STUDIO WIDTH FIX
   When a logged-in creator-path account has not created its
   first story yet, the studio sidebar is intentionally absent
   until creator access is granted on first save. In that state
   the main Publish Story panel is the shell's only child and
   must span the complete studio grid in both LTR and RTL.
========================================================== */
.rabtoon-studio-shell > .rabtoon-studio-main:only-child {
	grid-column: 1 / -1;
	width: 100%;
}

/* ==========================================================
   v1.15.18 — ARABIC CREATOR STUDIO RTL TEXT ALIGNMENT
   Arabic only. Keeps the existing grid, artwork sizing,
   controls, responsive breakpoints and English/LTR unchanged.
========================================================== */
html[dir="rtl"] .rabtoon-publish-page,
html[dir="rtl"] .rabtoon-story-form--series,
html[dir="rtl"] .rabtoon-studio-card,
html[dir="rtl"] .rabtoon-series-form-row,
html[dir="rtl"] .rabtoon-story-artwork-grid,
html[dir="rtl"] .rabtoon-story-artwork-field {
	direction: rtl;
}

html[dir="rtl"] .rabtoon-studio-card__head,
html[dir="rtl"] .rabtoon-studio-card__head h2,
html[dir="rtl"] .rabtoon-studio-card__head p,
html[dir="rtl"] .rabtoon-series-form-row > label,
html[dir="rtl"] .rabtoon-series-form-row > div,
html[dir="rtl"] .rabtoon-series-form-row small,
html[dir="rtl"] .rabtoon-story-artwork-field,
html[dir="rtl"] .rabtoon-story-artwork-field > strong,
html[dir="rtl"] .rabtoon-story-artwork-field > small,
html[dir="rtl"] .rabtoon-category-checkboxes,
html[dir="rtl"] .rabtoon-category-checkboxes small,
html[dir="rtl"] .rabtoon-content-warning-grid label,
html[dir="rtl"] .rabtoon-story-agreement {
	text-align: right;
}

html[dir="rtl"] .rabtoon-series-form-row input,
html[dir="rtl"] .rabtoon-series-form-row textarea,
html[dir="rtl"] .rabtoon-series-form-row select,
html[dir="rtl"] .rabtoon-series-form-row option {
	direction: rtl;
	text-align: right;
}