/* ================================================================
   WRITEORIUM PLUGIN STYLES
   Merged main CSS file
   ================================================================ */

/* ================================================================
   Writeorium - wr.css (Cleaned & Responsive)
   WordPress Plugin Styles - Theme Isolated
   All styles scoped to .wr-dashboard to prevent theme conflicts
   ================================================================ */



/* ==========================================================================
   1. RESET & INITIALIZATION
   ========================================================================== */
/* - CSS RESET FOR PLUGIN SCOPE -
   Prevents theme styles from bleeding into the plugin
   - */
.wr-dashboard,
.wr-dashboard * {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

.wr-dashboard *:before,
.wr-dashboard *:after {
	box-sizing: border-box;
}

/* Reset common WordPress theme overrides */
.wr-dashboard a,
.wr-dashboard button,
.wr-dashboard input,
.wr-dashboard select,
.wr-dashboard textarea {
	font-family: inherit;
	line-height: inherit;
}

.wr-dashboard a:focus {
	color: inherit;
	outline-color: inherit;
}

.wr-dashboard img {
	max-width: 100%;
	height: auto;
	display: block;
}



/* ==========================================================================
   2. DESIGN TOKENS & TYPOGRAPHY
   ========================================================================== */
/* --- DESIGN TOKENS --- */
.wr-dashboard {
	/* Color Palette */
	--wr-deep: rgb(6, 0, 151);
	--wr-purple: rgb(130, 4, 255);
	--wr-gold: #ffcd57;
	--wr-gold-dark: #e6b84d;
	--wr-text: #1e1e2f;
	--wr-muted: #64748b;
	--wr-border: #e2e8f0;
	--wr-bg: #f8fafc;
	--wr-white: #ffffff;

	/* Status Colors */
	--wr-done-bg: rgba(39, 174, 96, 0.1);
	--wr-done-text: #1a7a42;
	--wr-pending-bg: rgba(130, 4, 255, 0.08);
	--wr-pending-text: rgb(100, 4, 200);
	--wr-error-bg: #fef2f2;
	--wr-error-text: #dc2626;

	/* Border Radius */
	--wr-radius-sm: 8px;
	--wr-radius-md: 12px;
	--wr-radius-lg: 16px;

	/* Spacing */
	--wr-spacing-xs: 4px;
	--wr-spacing-sm: 8px;
	--wr-spacing-md: 16px;
	--wr-spacing-lg: 24px;
	--wr-spacing-xl: 32px;

	/* Typography */
	--font-monospace:
		SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
		"Courier New", monospace;
	--font-sans-serif:
		"Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
		"Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji",
		"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	font-family: var(--font-sans-serif);
	color: var(--wr-text);
	line-height: 1.6;

	/* Layout */
	max-width: 860px;
	margin: 0 auto;
	padding: var(--wr-spacing-xl) 20px 60px;
	background: transparent;
}



/* ==========================================================================
   3. CORE LAYOUT & UTILITIES
   ========================================================================== */
/* --- PRINT STYLES --- */
@media print {
	.wr-dashboard {
		max-width: 100%;
		padding: 0;
	}

	.wr-btn-primary,
	.wr-btn-small,
	.wr-link-delete,
	.wr-file-remove {
		display: none;
	}

	.wr-row:hover {
		background: transparent;
	}
}

/* --- ACCESSIBILITY ENHANCEMENTS --- */

/* Focus visible for keyboard navigation */
.wr-dashboard a:focus-visible,
.wr-dashboard button:focus-visible,
.wr-dashboard input:focus-visible,
.wr-dashboard select:focus-visible,
.wr-dashboard textarea:focus-visible {
	outline: 2px solid var(--wr-deep);
	outline-offset: 2px;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
	.wr-dashboard *,
	.wr-dashboard *::before,
	.wr-dashboard *::after {
		animation-duration: 0.01ms;
		animation-iteration-count: 1;
		transition-duration: 0.01ms;
	}
}

/* High contrast mode support */
@media (prefers-contrast: high) {
	.wr-dashboard {
		--wr-border: #000;
	}

	.wr-form-input,
	.wr-form-select,
	.wr-form-textarea {
		border-width: 2px;
	}
}

/* --- HERO --- */
.wr-hero {
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 70px !important;
	padding-bottom: 0 !important;
	min-height: 200px;
	aspect-ratio: unset;
}

.wr-hero > span:first-child {
	background: linear-gradient(
		35deg,
		rgb(6, 0, 151) 0%,
		rgb(130, 4, 255) 73%,
		rgb(193, 15, 255) 100%
	);
}

.wr-hero h2 {
	font-size: 1.5rem;
}

.wr-hero p {
	text-align: center;
	color: #ffffff;
	opacity: 0.85;
	margin-top: 8px;
	font-size: 0.95rem;
}

/* --- HOOK --- */
.ast-single-post {
	.entry-content {
		.wr-btn-primary,
		.wr-btn-small,
		.wr-link,
		.wr-btn-pdf,
		.wr-back-btn,
		.wr-tab-bar a {
			text-decoration: none;
		}
	}
}



/* ==========================================================================
   4. UI COMPONENTS
   ========================================================================== */
/* --- BUTTONS --- */
.wr-btn-primary {
	display: inline-block;
	background: var(--wr-gold);
	color: #000;
	padding: 13px 32px;
	border-radius: var(--wr-radius-md);
	font-size: 0.95rem;
	font-weight: 700;
	font-family: inherit;
	border: none;
	cursor: pointer;
	white-space: nowrap;
	transition:
		background 0.2s ease,
		transform 0.2s ease;
	box-shadow: 0 4px 14px rgba(255, 205, 87, 0.35);
	text-align: center;
	line-height: 1.2;
	text-decoration: none;
}

.wr-btn-primary:hover {
	background: var(--wr-gold-dark);
	transform: translateY(-2px);
	color: #000;
}

.wr-btn-primary:focus {
	outline: 2px solid var(--wr-gold);
	outline-offset: 2px;
}

.wr-btn-primary.wr-btn-buy {
	background: var(--wr-deep);
	color: #fff;
	box-shadow: 0 4px 14px rgba(6, 0, 151, 0.2);
}

.wr-btn-primary.wr-btn-buy:hover {
	background: #0a009a;
	color: #fff;
}

/* --- SHARED CARD (forms + single view) --- */
.wr-form-card {
	background: var(--wr-white);
	border: 1px solid var(--wr-border);
	border-radius: var(--wr-radius-lg);
	padding: 28px;
	margin-bottom: var(--wr-spacing-md);
}

.wr-form-card-title {
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wr-muted);
	margin-bottom: 20px;
	line-height: 1.2;
}

/* --- COMMON BUTTONS --- */
.wr-btn-small {
	display: inline-block;
	width: auto;
	margin-top: 6px;
	background: var(--wr-gold);
	color: #000;
	padding: 5px 13px;
	border-radius: var(--wr-radius-sm);
	font-size: 0.75rem;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	transition:
		background 0.2s ease,
		transform 0.15s ease;
	border: none;
	line-height: 1.2;
}

.wr-btn-small:hover {
	color: var(--wr-text);
	background: var(--wr-gold-dark);
	transform: scale(1.04);
}

.wr-btn-submit {
	padding: 14px 40px;
	font-size: 1rem;
}

.wr-btn-pdf {
	display: inline-block;
	margin-top: var(--wr-spacing-md);
	background: var(--wr-error-bg);
	color: var(--wr-error-text);
	padding: 12px 28px;
	border-radius: var(--wr-radius-sm);
	font-size: 0.9rem;
	font-weight: 700;
	text-decoration: none;
	transition: background 0.2s ease;
	border: none;
	line-height: 1.2;
}

.wr-btn-pdf:hover {
	background: #fee2e2;
	color: var(--wr-error-text);
}

.wr-btn-pdf-absolute {
	position: absolute;
	top: 20px;
	right: 24px;
	margin-top: 0;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.wr-back {
	display: inline-block;
	margin-bottom: 20px;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--wr-deep);
	text-decoration: none;
}

.wr-back:hover {
	text-decoration: underline;
	color: var(--wr-deep);
}

/* --- COMMON NOTICES --- */
.wr-form-error {
	background: var(--wr-error-bg);
	color: var(--wr-error-text);
	border-radius: var(--wr-radius-md);
	padding: 14px 20px;
	font-size: 0.9rem;
	font-weight: 500;
	margin-bottom: 20px;
	line-height: 1.5;
}

.wr-form-notice {
	border-radius: var(--wr-radius-md);
	padding: 14px 20px;
	font-size: 0.88rem;
	line-height: 1.6;
	margin-bottom: var(--wr-spacing-lg);
	display: block;
}

.wr-form-notice span,
.wr-form-notice p {
	display: inline;
	margin: 0;
	padding: 0;
}

.wr-form-notice--trial {
	background: var(--wr-pending-bg);
	color: var(--wr-pending-text);
}

.wr-form-notice--credits,
.wr-form-notice--success {
	background: var(--wr-done-bg);
	color: var(--wr-done-text);
}

.wr-form-notice--warning,
.wr-form-notice--deleted {
	background: var(--wr-error-bg);
	color: var(--wr-error-text);
}

.wr-form-notice--plain {
	text-align: center;
	color: var(--wr-muted);
	padding: 60px 20px;
}

.wr-form-notice a,
.wr-form-notice-link {
	color: inherit;
	font-weight: 600;
	text-decoration: underline;
	opacity: 0.9;
}

.wr-form-notice a:hover,
.wr-form-notice-link:hover {
	opacity: 1;
}

.wr-processing-notice {
	background: var(--wr-pending-bg);
	color: var(--wr-pending-text);
	border-radius: var(--wr-radius-md);
	padding: 20px 24px;
	font-size: 0.9rem;
	font-weight: 500;
	margin-bottom: 20px;
	line-height: 1.5;
}

/* --- COMMON TABS --- */
.wr-tab-card {
	padding: 0;
	overflow: hidden;
}

.wr-tab-bar {
	display: flex;
	border-bottom: 1px solid var(--wr-border);
}

.wr-tab-count {
	background: #eee;
	padding: 2px 8px;
	border-radius: 10px;
	font-size: 12px;
	color: #666;
}

.wr-tab {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 14px 22px;
	font-size: 0.85rem;
	font-weight: 600;
	font-family: inherit;
	color: var(--wr-muted);
	background: var(--wr-bg);
	border: none;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	cursor: pointer;
	transition:
		color 0.15s ease,
		border-color 0.15s ease,
		background 0.15s ease;
	margin-bottom: -1px;
	white-space: nowrap;
	line-height: 1.2;
	text-decoration: none;
}

.wr-tab:hover {
	color: var(--wr-text);
	background: var(--wr-white);
}

.wr-tab--active {
	color: var(--wr-deep);
	background: var(--wr-white);
	border-bottom-color: var(--wr-deep);
}

.wr-tab--active .wr-tab-count {
	color: #111;
}

.wr-tab-panel {
	display: none;
	padding: var(--wr-spacing-lg);
}

.wr-tab-panel--active {
	display: block;
}

/* --- COMMON FORM ELEMENTS --- */
.wr-form-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: var(--wr-spacing-md);
}

.wr-form-group:last-child {
	margin-bottom: 0;
}

.wr-form-two-col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wr-spacing-md);
}

.wr-form-label {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--wr-text);
	display: flex;
	align-items: center;
	justify-content: space-between;
	line-height: 1.3;
}

.wr-form-label-hint {
	font-size: 0.75rem;
	font-weight: 400;
	color: var(--wr-muted);
}

.wr-form-input,
.wr-form-select,
.wr-form-textarea {
	width: 100%;
	border: 1px solid var(--wr-border);
	border-radius: var(--wr-radius-sm);
	font-family: inherit;
	color: var(--wr-text);
	background: var(--wr-white);
	box-sizing: border-box;
	transition: border-color 0.15s ease;
	padding: 10px 14px;
	line-height: 1.5;
}

.wr-form-input:focus,
.wr-form-select:focus,
.wr-form-textarea:focus {
	outline: none;
	border-color: var(--wr-deep);
	box-shadow: 0 0 0 3px rgba(6, 0, 151, 0.1);
}

.wr-form-textarea {
	resize: vertical;
	line-height: 1.7;
	min-height: 280px;
}

.wr-form-select {
	appearance: auto;
	cursor: pointer;
	padding: 0 14px;
}

/* --- COMMON ACTION LINKS --- */
.wr-link {
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--wr-deep);
	text-decoration: none;
	transition: text-decoration 0.15s ease;
}

.wr-link:hover {
	text-decoration: underline;
	color: var(--wr-deep);
}

.wr-link-view {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 12px;
	border-radius: 8px;
	background: #f8fafc;
	border: 1px solid var(--wr-border);
	font-size: 0.8rem;
	font-weight: 600;
	text-decoration: none;
	transition:
		background 0.15s ease,
		border-color 0.15s ease;
	color: var(--wr-text);
	line-height: 1.2;
}

.wr-link-view:hover {
	background: #eef2ff;
	border-color: #c7d2fe;
	color: var(--wr-text);
}

.wr-link-delete {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 8px 12px;
	border-radius: 8px;
	background: transparent;
	border: 1px solid var(--wr-border);
	font-size: 0.8rem;
	font-weight: 600;
	text-decoration: none;
	line-height: 1.2;
	color: var(--wr-error-text);
	cursor: pointer;
	transition:
		background 0.15s ease,
		transform 0.15s ease;
	font-family: inherit;
}

.wr-link-delete:hover {
	background: var(--wr-error-bg);
	color: var(--wr-error-text);
}

.wr-link-delete-forever {
	color: #cc1818;
}

.wr-link-delete-forever:hover {
	background: #fee2e2;
}

.wr-link-restore {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 8px 12px;
	border-radius: 8px;
	background: transparent;
	border: 1px solid var(--wr-border);
	font-size: 0.8rem;
	font-weight: 600;
	text-decoration: none;
	line-height: 1.2;
	color: #00a32a;
	cursor: pointer;
	transition:
		background 0.15s ease,
		transform 0.15s ease;
	font-family: inherit;
}

.wr-link-restore:hover {
	background: #e6f6ea;
	color: #008722;
}

.wr-link-pdf {
	color: var(--wr-done-text);
	background: var(--wr-done-bg);
	padding: 8px 12px;
	border-radius: 6px;
	border: 1px solid var(--wr-border);
	font-size: 0.78rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 36px;
	text-decoration: none;
	transition: background 0.2s ease;
	gap: 4px;
}

.wr-link-pdf:hover {
	background: #fee2e2;
	text-decoration: none;
	color: var(--wr-error-text);
}

/* --- BADGES --- */
.wr-badge {
	display: inline-block;
	padding: 3px 9px;
	border-radius: 6px;
	font-size: 0.65rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	transition: all 0.15s ease;
	line-height: 1.2;
}

.wr-badge-done {
	background: var(--wr-done-bg);
	color: var(--wr-done-text);
}

.wr-badge-pending,
.wr-badge- {
	background: var(--wr-pending-bg);
	color: var(--wr-pending-text);
}

/* --- THANK YOU ICON --- */
.wr-thank-you-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	background: rgba(39, 174, 96, 0.1);
	border-radius: 50%;
	font-size: 28px;
	color: #27ae60;
	font-weight: 700;
	margin-bottom: var(--wr-spacing-lg);
}

/* --- THANK YOU TITLE --- */
.wr-thank-you-title {
	font-size: 1.75rem;
	font-weight: 700;
	color: var(--wr-text);
	margin-bottom: var(--wr-spacing-md);
	line-height: 1.3;
}

/* --- STATUS TAGS --- */
.wr-tag-trial {
	background: var(--wr-pending-bg) !important;
	color: var(--wr-pending-text) !important;
	display: inline-block;
	padding: 6px 12px;
	border-radius: var(--wr-radius-sm);
	font-size: 0.85rem;
	font-weight: 600;
}

.wr-tag-paid {
	background: var(--wr-done-bg) !important;
	color: var(--wr-done-text) !important;
	display: inline-block;
	padding: 6px 12px;
	border-radius: var(--wr-radius-sm);
	font-size: 0.85rem;
	font-weight: 600;
}

/* --- THANK YOU MESSAGE --- */
.wr-thank-you-message {
	color: var(--wr-muted);
	font-size: 1rem;
	line-height: 1.7;
	margin: var(--wr-spacing-lg) 0;
}

.wr-thank-you-message a {
	color: var(--wr-deep);
	font-weight: 600;
	text-decoration: underline;
	transition: color 0.2s ease;
}

.wr-thank-you-message a:hover {
	color: var(--wr-purple);
	text-decoration: none;
}

/* --- BUTTON --- */
.wr-thank-you-card .wr-btn-primary {
	margin-top: var(--wr-spacing-lg);
	display: inline-block;
}



/* ==========================================================================
   5. PAGE SPECIFIC STYLES
   ========================================================================== */

/* --- 5.1 Dashboard --- */
/* --- DASHBOARD MAIN --- */
.wr-critique-card {
	position: relative;
	padding-bottom: 24px;
}

/* --- DASHBOARD - STAT CARDS --- */
.wr-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 14px;
	margin-bottom: var(--wr-spacing-md);
}

.wr-stat-card {
	background: var(--wr-white);
	border: 1px solid var(--wr-border);
	border-radius: var(--wr-radius-lg);
	padding: 22px 24px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
}

.wr-stat-label {
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wr-muted);
	line-height: 1.2;
}

.wr-stat-value {
	font-size: 2.2rem;
	font-weight: 800;
	color: var(--wr-deep);
	line-height: 1;
	letter-spacing: -0.03em;
}

.wr-stat-sub {
	font-size: 0.78rem;
	color: var(--wr-muted);
	line-height: 1.3;
}

/* --- DASHBOARD - ACTION CARD --- */
.wr-action-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	background: var(--wr-white);
	border: 1px solid var(--wr-border);
	border-radius: var(--wr-radius-lg);
	padding: 20px 24px;
	margin-bottom: var(--wr-spacing-md);
}

.wr-action-card-text {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.wr-action-card-text strong {
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--wr-text);
	line-height: 1.3;
}

.wr-action-card-text span {
	font-size: 0.82rem;
	color: var(--wr-muted);
	line-height: 1.4;
}

/* --- DASHBOARD - HISTORY LIST --- */
.wr-list {
	background: var(--wr-white);
	border: 1px solid var(--wr-border);
	border-radius: var(--wr-radius-lg);
	overflow: hidden;
}

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

.wr-list-count {
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--wr-muted);
	background: var(--wr-bg);
	padding: 3px 10px;
	border-radius: 20px;
	border: 1px solid var(--wr-border);
	line-height: 1.2;
}

.wr-empty {
	padding: 56px 24px;
	text-align: center;
	color: var(--wr-muted);
	font-size: 0.95rem;
	line-height: 1.6;
}

.wr-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 24px;
	border-bottom: 1px solid var(--wr-border);
	gap: 20px;
	transition: background 0.15s ease;
}

.wr-row:hover {
	background: var(--wr-bg);
}

.wr-row:last-child {
	border-bottom: none;
}

.wr-row-left {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
	flex: 1;
}

.wr-row-icon {
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: #eeedfe;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.wr-row-info {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
	flex: 1;
}

.wr-row-title {
	font-size: 0.92rem;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.3;
}

.wr-row-title-inline {
	display: flex;
	align-items: center;
	gap: 8px;
}

.wr-row-title a {
	color: var(--wr-text);
	text-decoration: none;
}

.wr-row-title a:hover {
	color: var(--wr-deep);
}

.wr-row-meta {
	font-size: 0.75rem;
	color: var(--wr-muted);
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
	line-height: 1.3;
}

.wr-meta-dot {
	display: inline-block;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: #cbd5e1;
	flex-shrink: 0;
}

.wr-row-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
}

.wr-row-action-col {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 70px;
}

.wr-delete-form {
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
}

/* --- SINGLE VIEW --- */
.wr-submission-meta {
	font-size: 0.85rem;
	color: var(--wr-muted);
	margin-bottom: var(--wr-spacing-lg);
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
	line-height: 1.4;
}

.wr-critique-body,
.wr-original-body {
	font-size: 0.95rem;
	line-height: 1.8;
	color: var(--wr-text);
}

.wr-original-body pre {
	padding: 1rem 2rem;
}
.wr-original-body pre {
	font-family: var(--font-monospace);
	padding: 20px;
	font-size: 14px;
	border-radius: 8px;
	white-space: pre-wrap;
}



/* --- 5.2 Submit Form --- */
/* --- SUBMIT WRAPPER --- */
.wr-back-wrapper {
	margin-bottom: 25px;
}

.wr-back-btn {
	text-decoration: none;
	color: var(--wr-muted);
	font-size: 0.88rem;
	font-weight: 500;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: all 0.2s ease;
	white-space: nowrap;
}

.wr-back-btn--small {
	background: rgba(255, 255, 255, 0.4);
	padding: 4px 10px;
	border-radius: 4px;
	font-size: 0.72rem;
	font-weight: 700;
	color: inherit;
	border: 1px solid rgba(0, 0, 0, 0.08);
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.wr-back-btn--small:hover {
	background: #fff;
	color: var(--wr-deep) !important;
	border-color: var(--wr-deep);
	transform: translateY(-1px);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.wr-back-btn span {
	font-size: 1.2rem;
	line-height: 1;
}

/* --- SUBMIT FORM - PROGRESS STEPS --- */
.wr-steps {
	display: flex;
	align-items: center;
	margin-bottom: 28px;
}

.wr-step {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--wr-muted);
	white-space: nowrap;
	line-height: 1.2;
}

.wr-step--active {
	color: var(--wr-deep);
}

.wr-step-dot {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--wr-border);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.72rem;
	font-weight: 700;
	color: var(--wr-muted);
	flex-shrink: 0;
	line-height: 1;
}

.wr-step--active .wr-step-dot {
	background: var(--wr-deep);
	color: #fff;
}

.wr-step-line {
	flex: 1;
	height: 1px;
	background: var(--wr-border);
	margin: 0 10px;
}

/* --- SUBMIT FORM - WORD COUNT BAR --- */
.wr-word-bar {
	margin-top: 10px;
}

.wr-word-bar-track {
	height: 3px;
	background: var(--wr-border);
	border-radius: 99px;
	margin-bottom: 6px;
	overflow: hidden;
}

.wr-word-bar-fill {
	height: 3px;
	background: var(--wr-deep);
	border-radius: 99px;
	width: 0%;
	transition:
		width 0.2s ease,
		background 0.2s ease;
}

.wr-word-bar-label {
	font-size: 0.78rem;
	color: var(--wr-muted);
	text-align: right;
	line-height: 1.3;
}

/* --- SUBMIT FORM - FOOTER --- */
.wr-form-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wr-spacing-md);
	margin-top: 8px;
}

.wr-form-footnote {
	font-size: 0.78rem;
	color: var(--wr-muted);
	margin: 0;
	line-height: 1.4;
}

/* --- SUBMIT FORM - DROPZONE --- */
.wr-dropzone {
	position: relative;
	border: 2px dashed var(--wr-border);
	border-radius: var(--wr-radius-md);
	padding: 48px 24px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	transition:
		border-color 0.15s ease,
		background 0.15s ease;
	text-align: center;
	background: transparent;
}

.wr-dropzone:hover,
.wr-dropzone--over {
	border-color: var(--wr-deep);
	background: rgba(6, 0, 151, 0.02);
}

.wr-dropzone-input {
	position: absolute;
	inset: 0;
	opacity: 0;
	width: 100%;
	height: 100%;
	cursor: pointer;
	font-size: 0;
}

.wr-dropzone-icon {
	width: 56px;
	height: 56px;
	border-radius: 14px;
	background: #eeedfe;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 4px;
}

.wr-dropzone-text strong {
	display: block;
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--wr-text);
	margin-bottom: 3px;
	line-height: 1.3;
}

.wr-dropzone-text span {
	display: block;
	font-size: 0.82rem;
	color: var(--wr-muted);
	line-height: 1.4;
}

.wr-dropzone-hint {
	font-size: 0.75rem;
	color: var(--wr-muted);
	margin-top: 4px;
	line-height: 1.3;
}

.wr-dropzone-selected {
	margin-top: 8px;
	display: flex;
	align-items: center;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
}

.wr-file-name {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--wr-deep);
	line-height: 1.3;
}

.wr-file-remove {
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--wr-error-text);
	background: var(--wr-error-bg);
	border: none;
	border-radius: 6px;
	padding: 3px 10px;
	cursor: pointer;
	font-family: inherit;
	transition: background 0.15s ease;
	line-height: 1.2;
}

.wr-file-remove:hover {
	background: #fee2e2;
}

.wr-file-error {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--wr-error-text);
	line-height: 1.4;
}

.wr-file-reading {
	font-size: 0.85rem;
	color: var(--wr-muted);
	font-style: italic;
	line-height: 1.4;
}

.wr-file-wordcount {
	font-size: 0.75rem;
	font-weight: 400;
	color: var(--wr-muted);
	margin-left: 6px;
	line-height: 1.3;
}



/* --- 5.3 Thank You Page --- */
/* --- THANK YOU CARD --- */
.wr-thank-you-card {
	background: var(--wr-white);
	border: 1px solid var(--wr-border);
	border-radius: var(--wr-radius-lg);
	padding: 40px 28px;
	text-align: center;
	margin-bottom: var(--wr-spacing-md);
	animation: wr-fade-in 0.5s ease-out;
}

@keyframes wr-fade-in {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* --- SUBMISSION DETAILS --- */
.wr-thank-you-details {
	background: var(--wr-bg);
	border-radius: var(--wr-radius-md);
	padding: var(--wr-spacing-lg);
	margin: var(--wr-spacing-lg) 0;
	text-align: left;
}

.wr-detail-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--wr-spacing-md) 0;
	border-bottom: 1px solid var(--wr-border);
}

.wr-detail-row:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.wr-detail-row:first-child {
	padding-top: 0;
}

.wr-detail-label {
	font-weight: 600;
	color: var(--wr-text);
	font-size: 0.95rem;
}

.wr-detail-value {
	color: var(--wr-muted);
	font-size: 0.95rem;
}



/* ==========================================================================
   6. RESPONSIVE DESIGN
   ========================================================================== */

/* 6.1 TABLET (768px and below) */

/* --- TABLET (768px and below) --- */
@media (max-width: 768px) {
	.wr-dashboard {
		padding: var(--wr-spacing-lg) var(--wr-spacing-md) 40px;
	}

	.wr-form-card {
		padding: 20px;
	}
}


/* --- TABLET (768px and below) --- */
@media (max-width: 768px) {
	.wr-stats {
		grid-template-columns: 1fr 1fr;
		gap: 12px;
	}

	.wr-stat-card {
		padding: 18px 20px;
	}

	.wr-stat-value {
		font-size: 1.8rem;
	}

	.wr-action-card {
		padding: 18px 20px;
	}

	.wr-row {
		padding: 16px 20px;
	}
}


/* --- TABLET (768px and below) --- */
@media (max-width: 768px) {
	.wr-dropzone {
		padding: 36px 20px;
	}
}


/* 6.2 MOBILE (600px and below) */

/* --- MOBILE (600px and below) --- */
@media (max-width: 600px) {
	.wr-dashboard {
		padding: var(--wr-spacing-md) var(--wr-spacing-md) 32px;
	}

	/* Make buttons more touch-friendly */
	.wr-btn-primary {
		padding: 14px 28px;
		font-size: 0.92rem;
	}
}


/* --- MOBILE (600px and below) --- */
@media (max-width: 600px) {
	.wr-stats {
		grid-template-columns: 1fr 1fr;
		gap: 10px;
	}

	.wr-stat-card {
		padding: 16px 18px;
	}

	.wr-stat-label {
		font-size: 0.68rem;
	}

	.wr-stat-value {
		font-size: 1.6rem;
	}

	.wr-stat-sub {
		font-size: 0.72rem;
	}

	/* Stack action card on mobile */
	.wr-action-card {
		flex-direction: column;
		align-items: flex-start;
		padding: 16px 18px;
		gap: 14px;
	}

	.wr-action-card .wr-btn-primary {
		width: 100%;
	}

	/* Stack rows on mobile */
	.wr-row {
		flex-direction: column;
		align-items: flex-start;
		padding: 14px 16px;
		gap: 12px;
	}

	.wr-row-left {
		width: 100%;
	}

	.wr-row-actions {
		width: 100%;
		margin-top: 8px;
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		justify-content: stretch;
		gap: 8px;
	}

	.wr-row-action-col {
		min-width: auto;
		width: 100%;
	}
}


/* --- MOBILE (600px and below) --- */
@media (max-width: 600px) {
	/* Stack form footer */
	.wr-form-footer {
		flex-direction: column;
		align-items: stretch;
	}

	.wr-btn-submit {
		width: 100%;
	}

	.wr-form-footnote {
		text-align: center;
	}

	/* Simplify progress steps on mobile */
	.wr-steps .wr-step span {
		display: none;
	}

	.wr-step-line {
		margin: 0 6px;
	}

	.wr-step-dot {
		width: 24px;
		height: 24px;
		font-size: 0.68rem;
	}

	/* Smaller dropzone on mobile */
	.wr-dropzone {
		padding: 32px 16px;
	}

	.wr-dropzone-icon {
		width: 48px;
		height: 48px;
	}

	.wr-dropzone-text strong {
		font-size: 0.88rem;
	}

	.wr-dropzone-text span {
		font-size: 0.78rem;
	}
}


/* --- RESPONSIVE --- */
@media (max-width: 600px) {
	.wr-thank-you-card {
		padding: 30px 20px;
	}

	.wr-thank-you-title {
		font-size: 1.5rem;
	}

	.wr-detail-row {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--wr-spacing-sm);
	}

	.wr-thank-you-message {
		font-size: 0.95rem;
	}
}

/* 6.3 EXTRA SMALL MOBILE (400px and below) */

/* --- EXTRA SMALL MOBILE (400px and below) --- */
@media (max-width: 400px) {
	.wr-stats {
		grid-template-columns: 1fr;
	}

	.wr-stat-value {
		font-size: 1.5rem;
	}

	.wr-row-actions {
		grid-template-columns: repeat(2, 1fr);
		gap: 6px;
	}

	.wr-row-meta {
		font-size: 0.72rem;
	}

	.wr-form-card {
		padding: 16px;
	}
}