/**
 * Magic: The Gathering Card Creator — front-end application styles.
 * All selectors are prefixed with mtgcc- to avoid theme collisions.
 */

/* ---------- dedicated creator route ---------- */

.mtgcc-route-page {
	width: 100%;
	box-sizing: border-box;
	padding: 24px;
	background-image:
		linear-gradient(
			rgba(8, 10, 12, 0.68),
			rgba(8, 10, 12, 0.82)
		),
		url("https://opendungeons.com/wp-content/uploads/2026/07/final-Adult-Black-Dragon.jpg");
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
	background-attachment: fixed;
}

.mtgcc-route-page-inner {
	width: min(1380px, 100%);
	margin-inline: auto;
}

.mtgcc-route-title {
	margin: 0;
	font-size: clamp(1.34rem, 2.1vw, 1.82rem);
	line-height: 1.18;
	letter-spacing: 0.01em;
}

.mtgcc-route-subtitle {
	margin: 4px 0 12px;
	max-width: 62ch;
	font-size: clamp(0.92rem, 1.2vw, 1rem);
	line-height: 1.42;
	color: rgba(41, 35, 25, 0.78);
}

main#primary > h1,
main#primary .entry-title,
main#primary .mtgcc-route-title {
	color: #ffd77d;
	text-shadow:
		0 2px 4px rgba(0, 0, 0, 0.95),
		0 0 18px rgba(0, 0, 0, 0.85);
}

main#primary .mtgcc-subtitle,
main#primary .mtgcc-route-subtitle {
	color: rgba(255, 255, 255, 0.82);
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
}

.mtgcc-route-page .mtgcc-app-root {
	margin-bottom: 0;
}

.mtgcc-app-root {
	container-type: inline-size;
	margin: 0 0 1.1em;
}

.mtgcc-app {
	display: grid;
	grid-template-columns: minmax(360px, 790px) minmax(300px, 470px);
	justify-content: center;
	gap: 20px;
	align-items: start;
	--mtgcc-editor-max: 790px;
	--mtgcc-bg: #e9e2d1;
	--mtgcc-panel: #f6f1e5;
	--mtgcc-surface: #fffdf8;
	--mtgcc-border: #d1c4a7;
	--mtgcc-ink: #2a2418;
	--mtgcc-accent: #8d6c37;
	--mtgcc-accent-ink: #ffffff;
	--mtgcc-accent-soft: #bcaede;
	--mtgcc-danger: #a33939;
	--mtgcc-focus: #2d6ba8;
	background: transparent;
	color: var(--mtgcc-ink);
	border: 0;
	border-radius: 18px;
	padding: 18px;
	box-shadow: 0 16px 34px rgba(60, 44, 19, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.55);
	font-size: 15px;
	line-height: 1.5;
}

.mtgcc-app [hidden] {
	display: none !important;
}

.mtgcc-app[data-mode="dark"] {
	--mtgcc-bg: #201b14;
	--mtgcc-panel: #2b251b;
	--mtgcc-surface: #322b20;
	--mtgcc-border: #594d39;
	--mtgcc-ink: #ece3d3;
	--mtgcc-accent: #d7b365;
	--mtgcc-accent-soft: #baa7dd;
	--mtgcc-accent-ink: #171420;
	--mtgcc-focus: #92c0ef;
}

@media (prefers-color-scheme: dark) {
	.mtgcc-app[data-mode="auto"] {
		--mtgcc-bg: #201b14;
		--mtgcc-panel: #2b251b;
		--mtgcc-surface: #322b20;
		--mtgcc-border: #594d39;
		--mtgcc-ink: #ece3d3;
		--mtgcc-accent: #d7b365;
		--mtgcc-accent-soft: #baa7dd;
		--mtgcc-accent-ink: #171420;
		--mtgcc-focus: #92c0ef;
	}
}

/* ---------- editor pane ---------- */

.mtgcc-editor-pane {
	min-width: 0;
	width: 100%;
	max-width: var(--mtgcc-editor-max);
	margin-inline: auto;
}

.mtgcc-workspace-pane {
	min-width: 0;
	display: grid;
	gap: 14px;
	background: rgba(24, 20, 15, 0.94);
	border: 1px solid rgba(245, 202, 108, 0.2);
	border-radius: 16px;
	padding: 14px;
	box-shadow: 0 14px 40px rgba(0, 0, 0, 0.42);
}

.mtgcc-workspace-header {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	align-items: flex-start;
	border: 0;
	border-radius: 12px;
	padding: 4px 4px 0;
	background: transparent;
	max-width: var(--mtgcc-editor-max);
	margin-inline: auto;
}

.mtgcc-workspace-header-copy {
	min-width: 0;
}

.mtgcc-workspace-kicker {
	margin: 0;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 700;
	opacity: 0.75;
}

.mtgcc-workspace-title {
	margin: 2px 0 0;
	font-size: 18px;
	line-height: 1.2;
}

.mtgcc-workspace-header-actions {
	min-width: 0;
}

.mtgcc-main-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	flex-wrap: wrap;
}

.mtgcc-action-group {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
}

.mtgcc-action-group:not(:first-child) {
	padding-left: 10px;
}

.mtgcc-action-group-save {
	gap: 10px;
}

.mtgcc-action-group-save .mtgcc-btn-primary {
	min-width: 94px;
	font-weight: 700;
}

.mtgcc-action-group-danger .mtgcc-btn-danger {
	background: transparent;
	border-style: solid;
	border-width: 1px;
	color: color-mix(in srgb, var(--mtgcc-danger) 88%, #000 12%);
}

.mtgcc-workspace-state {
	display: inline-flex;
	align-items: center;
	padding: 3px 9px;
	border-radius: 999px;
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	border: 1px solid color-mix(in srgb, var(--mtgcc-border) 66%, transparent 34%);
	background: color-mix(in srgb, var(--mtgcc-surface) 90%, var(--mtgcc-panel) 10%);
	color: color-mix(in srgb, var(--mtgcc-ink) 72%, #847557 28%);
}

.mtgcc-workspace-state[data-state="dirty"] {
	border-color: #ad8c4f;
	color: #6e5322;
	background: rgba(233, 216, 184, 0.72);
}

.mtgcc-workspace-state[data-state="saved"] {
	border-color: #71927e;
	color: #345946;
	background: rgba(210, 229, 218, 0.72);
}

.mtgcc-workflow-nav {
	position: sticky;
	top: 10px;
	z-index: 14;
	max-width: var(--mtgcc-editor-max);
	margin-inline: auto;
	padding: 10px;
	border-radius: 14px;
	background:
		linear-gradient(180deg, color-mix(in srgb, #026b00 88%, #ffffff 12%) 0%, color-mix(in srgb, var(--mtgcc-panel) 72%, #04dcff 28%) 100%);
	box-shadow: 0px 0px 23px rgb(255 255 255 / 35%), inset 0 0 0 1px color-mix(in srgb, var(--mtgcc-border) 56%, transparent 44%);
}

.mtgcc-tabs {
	display: flex;
	flex-wrap: nowrap;
	gap: 9px;
	margin: 0;
	overflow-x: auto;
	padding-bottom: 2px;
	scrollbar-width: thin;
}

.mtgcc-tab {
	appearance: none;
	background: color-mix(in srgb, var(--mtgcc-surface) 80%, var(--mtgcc-bg) 20%);
	border: 1px solid color-mix(in srgb, var(--mtgcc-border) 76%, transparent 24%);
	padding: 10px 18px;
	min-height: 44px;
	flex: 0 0 auto;
	font: inherit;
	font-weight: 640;
	letter-spacing: 0.01em;
	color: var(--mtgcc-ink);
	cursor: pointer;
	border-radius: 11px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
	transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease, background-color 140ms ease;
}

.mtgcc-tab.is-active {
	background: linear-gradient(180deg, color-mix(in srgb, var(--mtgcc-accent) 86%, #f0dcaa 14%) 0%, color-mix(in srgb, var(--mtgcc-accent) 70%, var(--mtgcc-accent-soft) 30%) 100%);
	border-color: color-mix(in srgb, var(--mtgcc-accent) 78%, #f3ddb0 22%);
	box-shadow: 0 10px 18px rgba(85, 58, 16, 0.3), inset 0 0 0 1px rgba(255, 235, 188, 0.45);
	transform: translateY(-1px);
	color: #241a0a;
	font-weight: 740;
}

.mtgcc-tab:hover {
	background: color-mix(in srgb, var(--mtgcc-accent-soft) 18%, var(--mtgcc-surface) 82%);
	border-color: color-mix(in srgb, var(--mtgcc-accent-soft) 54%, var(--mtgcc-border) 46%);
}

.mtgcc-tab:active {
	transform: translateY(0);
}

.mtgcc-tab:focus-visible,
.mtgcc-btn:focus-visible,
.mtgcc-input:focus-visible,
.mtgcc-symbol-btn:focus-visible {
	outline: 3px solid var(--mtgcc-focus);
	outline-offset: 2px;
}

.mtgcc-tabpanel {
	background: var(--mtgcc-surface);
	border: 0;
	border-radius: 14px;
	padding: 16px 18px;
	max-width: var(--mtgcc-editor-max);
	margin-inline: auto;
	box-shadow: 0 10px 22px rgba(38, 28, 11, 0.1), inset 0 0 0 1px color-mix(in srgb, var(--mtgcc-border) 38%, transparent 62%);
}

.mtgcc-field {
	margin: 0 0 14px;
}

.mtgcc-field > .mtgcc-select {
	max-width: 620px;
}

.mtgcc-label {
	display: block;
	font-weight: 700;
	margin-bottom: 6px;
}

.mtgcc-tabpanel > .mtgcc-field > .mtgcc-label,
.mtgcc-tabpanel > .mtgcc-form-row > .mtgcc-field > .mtgcc-label,
.mtgcc-tabpanel > .mtgcc-stat-row > .mtgcc-field > .mtgcc-label {
	letter-spacing: 0.01em;
}

.mtgcc-label-content {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
}

.mtgcc-label-title {
	font-weight: 600;
}

.mtgcc-label-detail {
	font-size: 12px;
	font-weight: 500;
	opacity: 0.75;
}

.mtgcc-help {
	font-size: 12px;
	line-height: 1.45;
	opacity: 0.68;
	margin: 4px 0 0;
}

.mtgcc-tabpanel > .mtgcc-field,
.mtgcc-tabpanel > .mtgcc-form-row,
.mtgcc-tabpanel > .mtgcc-stat-row,
.mtgcc-tabpanel > .mtgcc-pw-section,
.mtgcc-tabpanel > .mtgcc-saga-section,
.mtgcc-tabpanel > .mtgcc-class-section,
.mtgcc-tabpanel > .mtgcc-symbol-toolbar,
.mtgcc-tabpanel > .mtgcc-counts,
.mtgcc-tabpanel > .mtgcc-error,
.mtgcc-tabpanel > .mtgcc-help {
	max-width: var(--mtgcc-editor-max);
	margin-left: auto;
	margin-right: auto;
}

.mtgcc-error {
	color: var(--mtgcc-danger);
	font-weight: 600;
	margin: 6px 0;
}

.mtgcc-input {
	width: 100%;
	box-sizing: border-box;
	min-height: 40px;
	padding: 9px 11px;
	border: 1px solid color-mix(in srgb, var(--mtgcc-border) 74%, transparent 26%);
	border-radius: 10px;
	background: color-mix(in srgb, var(--mtgcc-surface) 88%, var(--mtgcc-panel) 12%);
	color: var(--mtgcc-ink);
	font: inherit;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.mtgcc-textarea {
	resize: vertical;
	min-height: 45px;
}

.mtgcc-select {
	max-width: 100%;
}

.mtgcc-visual-choice-host {
	position: relative;
}

.mtgcc-visual-native-select {
	position: absolute !important;
	left: -10000px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

.mtgcc-visual-picker {
	display: grid;
	gap: 8px;
}

.mtgcc-visual-picker-pill {
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.mtgcc-visual-picker-tile {
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.mtgcc-visual-choice {
	appearance: none;
	text-align: left;
	border: 1px solid var(--mtgcc-border);
	background: color-mix(in srgb, var(--mtgcc-panel) 70%, var(--mtgcc-bg) 30%);
	border-radius: 10px;
	padding: 9px 10px;
	display: grid;
	gap: 4px;
	color: var(--mtgcc-ink);
	font: inherit;
	cursor: pointer;
}

.mtgcc-visual-choice:hover {
	border-color: color-mix(in srgb, var(--mtgcc-accent) 50%, var(--mtgcc-border) 50%);
	background: var(--mtgcc-panel);
}

.mtgcc-visual-choice.is-active {
	border-color: color-mix(in srgb, var(--mtgcc-accent) 70%, transparent 30%);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mtgcc-accent) 48%, transparent 52%);
	background: color-mix(in srgb, var(--mtgcc-accent) 18%, var(--mtgcc-panel) 82%);
}

.mtgcc-visual-choice-title {
	font-weight: 700;
	line-height: 1.2;
}

.mtgcc-visual-choice-detail {
	font-size: 12px;
	opacity: 0.76;
}

.mtgcc-visual-choice-badge {
	justify-self: start;
	font-size: 10.5px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 1px 7px;
	border-radius: 999px;
	border: 1px solid color-mix(in srgb, var(--mtgcc-accent) 35%, transparent 65%);
	background: color-mix(in srgb, var(--mtgcc-accent) 14%, transparent 86%);
}

.mtgcc-native-select-hidden {
	position: absolute !important;
	left: -10000px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

.mtgcc-cselect {
	position: relative;
	width: 100%;
	max-width: 620px;
}

.mtgcc-cselect-multi {
	display: grid;
	gap: 6px;
}

.mtgcc-field-compact .mtgcc-cselect {
	max-width: 560px;
}

.mtgcc-cselect-trigger {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 9px 12px;
	border-radius: 8px;
	border: 1px solid var(--mtgcc-border);
	background: var(--mtgcc-panel);
	color: var(--mtgcc-ink);
	font: inherit;
	cursor: pointer;
	text-align: left;
}

.mtgcc-cselect-trigger:hover {
	border-color: color-mix(in srgb, var(--mtgcc-accent) 55%, var(--mtgcc-border) 45%);
}

.mtgcc-cselect-trigger.is-open {
	border-color: var(--mtgcc-focus);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--mtgcc-focus) 35%, transparent 65%);
}

.mtgcc-cselect-value {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mtgcc-cselect-caret {
	font-size: 12px;
	opacity: 0.75;
	line-height: 1;
}

.mtgcc-cselect-panel {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	z-index: 30;
	background: var(--mtgcc-panel);
	border: 1px solid var(--mtgcc-border);
	border-radius: 10px;
	box-shadow: 0 14px 28px rgba(0, 0, 0, 0.28);
	padding: 8px;
}

.mtgcc-cselect-search {
	margin-bottom: 8px;
}

.mtgcc-cselect-options {
	max-height: 280px;
	overflow: auto;
	padding-right: 2px;
	display: grid;
	gap: 4px;
}

.mtgcc-cselect-group-label {
	font-size: 11.5px;
	font-weight: 700;
	opacity: 0.75;
	padding: 6px 8px 2px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.mtgcc-cselect-option {
	appearance: none;
	width: 100%;
	border: 1px solid transparent;
	background: transparent;
	border-radius: 8px;
	padding: 8px 10px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	color: var(--mtgcc-ink);
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.mtgcc-cselect-option:hover {
	background: color-mix(in srgb, var(--mtgcc-bg) 70%, var(--mtgcc-panel) 30%);
	border-color: color-mix(in srgb, var(--mtgcc-accent) 42%, transparent 58%);
}

.mtgcc-cselect-option.is-selected {
	background: color-mix(in srgb, var(--mtgcc-accent) 24%, var(--mtgcc-panel) 76%);
	border-color: color-mix(in srgb, var(--mtgcc-accent) 55%, transparent 45%);
	font-weight: 700;
}

.mtgcc-cselect-option:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.mtgcc-cselect-option-group {
	font-size: 11px;
	opacity: 0.72;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.mtgcc-cselect-option-check {
	min-width: 14px;
	text-align: center;
	font-weight: 700;
	color: color-mix(in srgb, var(--mtgcc-accent) 75%, var(--mtgcc-ink) 25%);
}

.mtgcc-cselect-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 1px 2px;
}

.mtgcc-cselect-chips:empty {
	display: none;
}

.mtgcc-cselect-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 9px;
	border-radius: 6px;
	font-size: 12px;
	background: color-mix(in srgb, var(--mtgcc-accent-soft) 16%, var(--mtgcc-surface) 84%);
	border: 1px solid color-mix(in srgb, var(--mtgcc-border) 62%, transparent 38%);
	color: var(--mtgcc-ink);
}

.mtgcc-cselect-chip-remove {
	appearance: none;
	border: 0;
	background: transparent;
	color: color-mix(in srgb, var(--mtgcc-ink) 68%, var(--mtgcc-danger) 32%);
	font: inherit;
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	padding: 0;
	min-width: 18px;
}

.mtgcc-cselect-chip-remove:hover {
	color: var(--mtgcc-danger);
}

.mtgcc-cselect-empty {
	padding: 8px 10px;
	opacity: 0.75;
	font-size: 13px;
}

.mtgcc-field-check,
.mtgcc-super-check {
	display: flex;
	align-items: center;
	gap: 10px;
}

.mtgcc-super-check {
	display: inline-flex;
	margin: 0 12px 8px 0;
	align-items: center;
}

.mtgcc-super-check.is-guided-disabled {
	opacity: 0.55;
}

.mtgcc-super-check.is-guided-disabled label {
	color: color-mix(in srgb, var(--mtgcc-ink) 66%, #7b7b7b 34%);
}

.mtgcc-super-check.is-guided-disabled input[type="checkbox"] {
	filter: grayscale(0.65);
}

.mtgcc-super-check.is-guided-disabled input[type="checkbox"] + label::after {
	content: " \26A0";
	font-size: 12px;
	opacity: 0.75;
}

.mtgcc-field-check input[type="checkbox"],
.mtgcc-super-check input[type="checkbox"] {
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--mtgcc-accent);
	flex-shrink: 0;
	cursor: pointer;
}

.mtgcc-field-check input[type="checkbox"]:disabled,
.mtgcc-super-check input[type="checkbox"]:disabled {
	filter: grayscale(1) brightness(0.7);
	opacity: 0.45;
	cursor: not-allowed;
}

.mtgcc-field-check input[type="checkbox"]:disabled + label,
.mtgcc-super-check input[type="checkbox"]:disabled + label {
	opacity: 0.45;
	color: color-mix(in srgb, var(--mtgcc-ink) 55%, #7b7b7b 45%);
	cursor: not-allowed;
}

.mtgcc-stat-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
	gap: 10px;
}

.mtgcc-counts {
	font-size: 12.5px;
	opacity: 0.75;
	margin: -6px 0 10px;
}

.mtgcc-field-compact .mtgcc-input,
.mtgcc-field-compact .mtgcc-select {
	max-width: 560px;
}

.mtgcc-type-status {
	min-height: 18px;
	margin-top: 8px;
	color: color-mix(in srgb, var(--mtgcc-accent) 65%, var(--mtgcc-ink) 35%);
}

.mtgcc-inactive-characteristics {
	display: grid;
	gap: 8px;
	margin-top: 10px;
}

.mtgcc-inactive-row {
	border: 1px dashed color-mix(in srgb, var(--mtgcc-border) 58%, var(--mtgcc-ink) 42%);
	background: color-mix(in srgb, var(--mtgcc-bg) 80%, var(--mtgcc-panel) 20%);
	border-radius: 9px;
	padding: 10px 12px;
	text-align: left;
	color: color-mix(in srgb, var(--mtgcc-ink) 88%, #7b7b7b 12%);
	cursor: pointer;
}

.mtgcc-inactive-row:hover {
	border-color: color-mix(in srgb, var(--mtgcc-accent) 45%, var(--mtgcc-border) 55%);
}

.mtgcc-inactive-row-title {
	display: block;
	font-weight: 700;
	font-size: 13px;
	margin-bottom: 2px;
}

.mtgcc-inactive-row-help {
	font-size: 12px;
	opacity: 0.82;
}

.mtgcc-form-row {
	display: grid;
	gap: 12px;
	margin-bottom: 12px;
}

.mtgcc-form-row .mtgcc-field {
	margin-bottom: 0;
}

.mtgcc-form-row-2 {
	grid-template-columns: repeat(2, minmax(180px, 1fr));
}

.mtgcc-form-row-3 {
	grid-template-columns: repeat(3, minmax(145px, 1fr));
}

/* ---------- symbol toolbar ---------- */

.mtgcc-symbol-toolbar {
	margin: 0 0 14px;
	border: 0;
	border-radius: 12px;
	padding: 10px;
	background: color-mix(in srgb, var(--mtgcc-panel) 74%, var(--mtgcc-bg) 26%);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mtgcc-border) 32%, transparent 68%);
}

.mtgcc-symbol-group {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 3px;
	margin-bottom: 4px;
}

.mtgcc-symbol-group-label {
	font-size: 11.5px;
	font-weight: 600;
	opacity: 0.7;
	width: 92px;
	flex-shrink: 0;
}

.mtgcc-symbol-btn {
	appearance: none;
	border: 1px solid transparent;
	background: transparent;
	padding: 2px;
	border-radius: 6px;
	cursor: pointer;
	line-height: 0;
}

.mtgcc-symbol-btn:hover {
	border-color: var(--mtgcc-accent);
	background: var(--mtgcc-panel);
}

/* ---------- planeswalker abilities ---------- */

.mtgcc-pw-row {
	display: grid;
	grid-template-columns: 72px 1fr auto;
	gap: 8px;
	margin-bottom: 8px;
}

.mtgcc-saga-section,
.mtgcc-class-section {
	margin: 14px 0;
	padding: 12px;
	border: 0;
	border-radius: 12px;
	background: color-mix(in srgb, var(--mtgcc-panel) 80%, var(--mtgcc-bg) 20%);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mtgcc-border) 34%, transparent 66%);
}

.mtgcc-saga-row,
.mtgcc-class-row {
	display: grid;
	gap: 8px;
	align-items: start;
	margin-bottom: 8px;
}

.mtgcc-saga-row {
	grid-template-columns: 82px 1fr auto;
}

.mtgcc-class-row {
	grid-template-columns: 62px 110px 1fr auto;
}

.mtgcc-saga-text,
.mtgcc-class-text {
	min-height: 64px;
	resize: vertical;
}

@media (max-width: 520px) {
	.mtgcc-saga-row,
	.mtgcc-class-row {
		grid-template-columns: 1fr auto;
	}

	.mtgcc-saga-text,
	.mtgcc-class-text {
		grid-column: 1 / -1;
	}

	.mtgcc-form-row,
	.mtgcc-form-row-2,
	.mtgcc-form-row-3 {
		grid-template-columns: 1fr;
	}

	.mtgcc-field-compact .mtgcc-input,
	.mtgcc-field-compact .mtgcc-select {
		max-width: none;
	}
}

/* ---------- art tab ---------- */

.mtgcc-art-drop {
	border: 2px dashed var(--mtgcc-border);
	border-radius: 10px;
	padding: 18px;
	text-align: center;
	margin-bottom: 12px;
}

.mtgcc-art-drop.is-dragging {
	border-color: var(--mtgcc-focus);
	background: var(--mtgcc-panel);
}

.mtgcc-art-drop p {
	margin: 0 0 8px;
}

.mtgcc-file-input {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.mtgcc-slider {
	width: 100%;
}

.mtgcc-set-icon-preview {
	display: block;
	width: 48px;
	height: 48px;
	object-fit: contain;
	border: 1px solid var(--mtgcc-border);
	border-radius: 6px;
	background: color-mix(in srgb, var(--mtgcc-panel) 70%, var(--mtgcc-bg) 30%);
	padding: 3px;
	margin: 6px 0;
}

.mtgcc-frame-border-preview {
	display: block;
	width: 120px;
	height: 168px;
	object-fit: fill;
	border: 1px solid var(--mtgcc-border);
	border-radius: 6px;
	background: var(--mtgcc-panel);
	margin: 8px 0;
}

.mtgcc-set-icon-preview[hidden],
.mtgcc-frame-border-preview[hidden] {
	display: none;
}

/* ---------- buttons ---------- */

.mtgcc-btn {
	display: inline-block;
	appearance: none;
	border: 1px solid color-mix(in srgb, var(--mtgcc-accent) 42%, var(--mtgcc-border) 58%);
	background: color-mix(in srgb, var(--mtgcc-surface) 82%, var(--mtgcc-panel) 18%);
	color: var(--mtgcc-ink);
	font: inherit;
	font-weight: 650;
	min-height: 40px;
	padding: 9px 14px;
	border-radius: 11px;
	cursor: pointer;
	text-align: center;
	box-shadow: 0 4px 12px rgba(32, 24, 11, 0.09);
	transition: transform 140ms ease, background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.mtgcc-btn:hover {
	background: color-mix(in srgb, var(--mtgcc-accent-soft) 12%, var(--mtgcc-surface) 88%);
	border-color: color-mix(in srgb, var(--mtgcc-accent) 58%, var(--mtgcc-border) 42%);
	transform: translateY(-1px);
}

.mtgcc-btn-primary {
	background: linear-gradient(180deg, color-mix(in srgb, var(--mtgcc-accent) 88%, #f0d9a8 12%) 0%, color-mix(in srgb, var(--mtgcc-accent) 70%, #6f5328 30%) 100%);
	border-color: color-mix(in srgb, var(--mtgcc-accent) 84%, #f0cf95 16%);
	color: var(--mtgcc-accent-ink);
	box-shadow: 0 8px 16px rgba(104, 76, 29, 0.28);
}

.mtgcc-btn-primary:hover {
	filter: none;
	background: linear-gradient(180deg, color-mix(in srgb, var(--mtgcc-accent) 92%, #f4ddb3 8%) 0%, color-mix(in srgb, var(--mtgcc-accent) 78%, #6f5328 22%) 100%);
}

.mtgcc-btn-secondary {
	background: color-mix(in srgb, var(--mtgcc-accent-soft) 13%, var(--mtgcc-surface) 87%);
}

.mtgcc-btn-success {
	border-color: #35744c;
	background: #35744c;
	color: #ffffff;
}

.mtgcc-btn-success:hover {
	background: #286b3f;
}

.mtgcc-btn-danger {
	border-color: var(--mtgcc-danger);
	color: var(--mtgcc-danger);
	background: color-mix(in srgb, #fff 90%, #f7d7d7 10%);
	box-shadow: none;
}

.mtgcc-btn:disabled,
.mtgcc-btn:disabled:hover {
	border-color: color-mix(in srgb, var(--mtgcc-ink) 24%, var(--mtgcc-panel) 76%);
	background: color-mix(in srgb, var(--mtgcc-ink) 10%, var(--mtgcc-panel) 90%);
	color: color-mix(in srgb, var(--mtgcc-ink) 46%, var(--mtgcc-panel) 54%);
	box-shadow: none;
	filter: none;
	transform: none;
	cursor: not-allowed;
	opacity: 0.92;
}

.mtgcc-btn-small {
	min-height: 34px;
	padding: 4px 10px;
	font-size: 13px;
}

.mtgcc-btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 10px 0;
}

/* ---------- preview pane ---------- */

.mtgcc-preview-pane {
	position: sticky;
	top: 18px;
	display: grid;
	gap: 12px;
	background: rgb(0 0 0);
	border: 1px solid rgba(245, 202, 108, 0.2);
	border-radius: 16px;
	padding: 10px;
	box-shadow: 0 14px 40px rgba(0, 0, 0, 0.42);
}

.mtgcc-preview-toolbar {
	border: 0;
	border-radius: 15px;
	padding: 11px;
	background: rgb(0 0 0);
	border: 0;
	box-shadow: 0 14px 40px rgba(0, 0, 0, 0.42);
}

.mtgcc-preview-toolbar-main {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
	flex-wrap: wrap;
}

.mtgcc-preview-group {
	background: color-mix(in srgb, var(--mtgcc-surface) 76%, var(--mtgcc-panel) 24%);
	border-radius: 11px;
	padding: 8px;
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mtgcc-border) 38%, transparent 62%);
}

.mtgcc-preview-group-zoom {
	flex: 1 1 auto;
}

.mtgcc-preview-group-guides {
	flex: 0 0 auto;
}

.mtgcc-preview-group-finish,
.mtgcc-preview-group-export {
	padding: 8px;
}

.mtgcc-preview-zoom {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.mtgcc-preview-toolbar-toggles {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.mtgcc-preview-toolbar-toggles .mtgcc-btn.is-active {
	background: var(--mtgcc-accent);
	color: var(--mtgcc-accent-ink);
}

.mtgcc-preview-zoom-label {
	font-size: 12px;
	font-weight: 700;
	min-width: 44px;
	text-align: right;
}

.mtgcc-preview-finish {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-bottom: 0;
	border: 1px solid var(--mtgcc-border);
	border-radius: 8px;
	overflow: hidden;
}

.mtgcc-preview-finish-button {
	appearance: none;
	min-width: 0;
	border: 0;
	border-right: 1px solid var(--mtgcc-border);
	border-radius: 0;
	min-height: 38px;
	padding: 6px 10px;
	background: color-mix(in srgb, var(--mtgcc-panel) 76%, var(--mtgcc-bg) 24%);
	color: var(--mtgcc-ink);
	font: inherit;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
}

.mtgcc-preview-finish-button:last-child {
	border-right: 0;
}

.mtgcc-preview-finish-button:hover {
	background: color-mix(in srgb, var(--mtgcc-accent) 12%, var(--mtgcc-panel) 88%);
}

.mtgcc-preview-finish-button.is-active {
	background: var(--mtgcc-accent);
	color: var(--mtgcc-accent-ink);
}

.mtgcc-preview-finish-button:focus-visible {
	position: relative;
	z-index: 1;
	outline: 3px solid var(--mtgcc-focus);
	outline-offset: -3px;
}

.mtgcc-preview {
	background:
		radial-gradient(105% 100% at 50% 0%, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 52%),
		linear-gradient(180deg, #413322 0%, #2b2115 100%);
	border: 0;
	border-radius: 16px;
	padding: 18px 14px;
	display: flex;
	justify-content: center;
	overflow: auto;
	box-shadow: 0 18px 30px rgba(24, 17, 9, 0.34), inset 0 0 0 1px rgba(255, 246, 223, 0.1);
}

.mtgcc-card-svg {
	width: 100%;
	height: auto;
	max-width: 450px;
	display: block;
	transform-origin: top center;
	transform: scale(var(--mtgcc-preview-zoom, 1));
	filter: drop-shadow(0 14px 24px rgba(0, 0, 0, 0.36));
}

.mtgcc-status {
	min-height: 1.4em;
	font-size: 13px;
	opacity: 0.8;
	margin: 8px 2px;
}

.mtgcc-export-wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.mtgcc-size-select {
	width: auto;
}

/* ---------- modal dialogs ---------- */

.mtgcc-modal-host {
	position: fixed;
	inset: 0;
	z-index: 9999;
	pointer-events: none;
}

.mtgcc-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(12, 10, 8, 0.78);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 18px;
	pointer-events: auto;
}

.mtgcc-modal-card {
	width: min(560px, 100%);
	background: var(--mtgcc-panel, #f7f5ef);
	color: var(--mtgcc-ink, #1f1b14);
	border: 1px solid var(--mtgcc-border, #cfc8b9);
	border-radius: 12px;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
	padding: 14px 16px;
	max-height: min(86vh, 720px);
	overflow: auto;
}

.mtgcc-modal-title {
	margin: 0 0 10px;
	font-size: 18px;
	line-height: 1.3;
	color: var(--mtgcc-ink, #1f1b14);
	font-weight: 700;
}

.mtgcc-modal-content {
	margin-bottom: 12px;
}

.mtgcc-modal-message {
	margin: 0 0 8px;
	line-height: 1.45;
}

.mtgcc-modal-message:last-child {
	margin-bottom: 0;
}

.mtgcc-modal-input {
	margin-bottom: 12px;
}

.mtgcc-modal-actions {
	display: flex;
	gap: 8px;
	justify-content: flex-end;
	flex-wrap: wrap;
}

.mtgcc-modal-actions .mtgcc-btn {
	min-width: 168px;
	padding: 10px 16px;
	border-radius: 10px;
	border: 1px solid color-mix(in srgb, var(--mtgcc-accent, #6b5837) 35%, var(--mtgcc-panel, #ffffff) 65%);
	background: var(--mtgcc-panel, #ffffff);
	color: var(--mtgcc-ink, #1f1b14);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14);
	transition: transform 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}

.mtgcc-modal-actions .mtgcc-btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
	background: color-mix(in srgb, var(--mtgcc-panel, #ffffff) 92%, var(--mtgcc-ink, #1f1b14) 8%);
}

.mtgcc-modal-actions .mtgcc-btn-primary {
	background: var(--mtgcc-accent, #6b5837);
	border-color: var(--mtgcc-accent, #6b5837);
	color: var(--mtgcc-accent-ink, #ffffff);
	box-shadow: 0 8px 18px rgba(107, 88, 55, 0.35);
}

.mtgcc-modal-actions .mtgcc-btn-primary:hover {
	background: color-mix(in srgb, var(--mtgcc-accent, #6b5837) 88%, #ffffff 12%);
	border-color: color-mix(in srgb, var(--mtgcc-accent, #6b5837) 88%, #ffffff 12%);
}

.mtgcc-modal-actions .mtgcc-btn-cancel {
	background: var(--mtgcc-danger, #8e2f2f);
	border-color: var(--mtgcc-danger, #8e2f2f);
	color: #ffffff;
	box-shadow: 0 8px 18px rgba(142, 47, 47, 0.32);
}

.mtgcc-modal-actions .mtgcc-btn-cancel:hover {
	background: color-mix(in srgb, var(--mtgcc-danger, #8e2f2f) 88%, #ffffff 12%);
	border-color: color-mix(in srgb, var(--mtgcc-danger, #8e2f2f) 88%, #ffffff 12%);
}

.mtgcc-modal-actions .mtgcc-btn-confirm-danger {
	background: #2f7d4a;
	border-color: #2f7d4a;
	color: #ffffff;
	box-shadow: 0 8px 18px rgba(47, 125, 74, 0.32);
}

.mtgcc-modal-actions .mtgcc-btn-confirm-danger:hover {
	background: #286b3f;
	border-color: #286b3f;
}

@media (max-width: 560px) {
	.mtgcc-modal-actions .mtgcc-btn {
		flex: 1 1 100%;
		min-width: 0;
	}
}

/* ---------- warnings ---------- */

.mtgcc-warnings-wrap {
	margin-top: 16px;
	background: color-mix(in srgb, var(--mtgcc-panel) 76%, var(--mtgcc-bg) 24%);
	border: 0;
	border-radius: 12px;
	padding: 12px 14px;
	max-width: var(--mtgcc-editor-max);
	margin-left: auto;
	margin-right: auto;
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mtgcc-border) 34%, transparent 66%);
}

.mtgcc-warnings {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mtgcc-warning {
	padding: 5px 8px 5px 26px;
	position: relative;
	border-radius: 4px;
	margin-bottom: 4px;
}

.mtgcc-warning::before {
	position: absolute;
	left: 6px;
	top: 5px;
}

.mtgcc-warning-warning {
	background: rgba(180, 120, 20, 0.12);
}

.mtgcc-warning-warning::before {
	content: "⚠";
}

.mtgcc-warning-error {
	background: rgba(170, 35, 20, 0.16);
	border-left: 3px solid rgba(170, 35, 20, 0.65);
}

.mtgcc-warning-error::before {
	content: "✖";
}

.mtgcc-warning-info {
	background: rgba(60, 110, 180, 0.10);
}

.mtgcc-warning-info::before {
	content: "ℹ";
}

.mtgcc-warning-none {
	opacity: 0.7;
}

.mtgcc-fan-mode-warning {
	background: rgba(170, 35, 20, 0.14);
	border: 1px solid rgba(170, 35, 20, 0.45);
	border-radius: 6px;
	padding: 8px 10px;
	margin: 0 0 10px;
	font-weight: 600;
}

/* ---------- library ---------- */

.mtgcc-library {
	margin-top: 14px;
	grid-column: 1 / -1;
	color: var(--mtgcc-ink);
	background: rgba(24, 20, 15, 0.94);
	border: 1px solid rgba(245, 202, 108, 0.2);
	border-radius: 10px;
	padding: 12px 16px;
	box-shadow: 0 14px 40px rgba(0, 0, 0, 0.42);
}

.mtgcc-library-summary {
	font-weight: 700;
	cursor: pointer;
	font-size: 16px;
}

.mtgcc-library-filters {
	display: flex;
	gap: 8px;
	margin: 10px 0;
	flex-wrap: wrap;
}

.mtgcc-library-filters .mtgcc-input {
	flex: 1;
	min-width: 160px;
	width: auto;
}

.mtgcc-library-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mtgcc-library-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 4px;
	border-top: 1px solid var(--mtgcc-border, #d8d2c4);
	flex-wrap: wrap;
}

.mtgcc-library-thumb {
	width: 44px;
	height: 44px;
	object-fit: cover;
	border-radius: 6px;
	background: #efece4;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
}

.mtgcc-library-meta {
	flex: 1;
	min-width: 140px;
	display: flex;
	flex-direction: column;
}

.mtgcc-library-actions {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

.mtgcc-library-empty {
	padding: 10px 0;
	opacity: 0.7;
}

/* ---------- recovery banner ---------- */

.mtgcc-recovery {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	background: rgba(60, 110, 180, 0.12);
	border: 1px solid var(--mtgcc-focus, #2f6fb4);
	border-radius: 8px;
	padding: 10px 14px;
	margin-bottom: 12px;
}

.mtgcc-app-loading {
	padding: 30px;
	text-align: center;
	opacity: 0.7;
}

/* ---------- responsive ---------- */

@container (max-width: 860px) {
	.mtgcc-app {
		grid-template-columns: 1fr;
	}

	.mtgcc-preview-pane {
		position: static;
		order: -1;
	}

	.mtgcc-card-svg {
		max-width: 340px;
	}
}

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

	.mtgcc-preview-pane {
		position: static;
		order: -1;
	}
}

@media (max-width: 940px) {
	.mtgcc-app {
		--mtgcc-editor-max: 100%;
	}
}

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

	.mtgcc-workflow-nav {
		top: 4px;
		padding: 8px;
	}

	.mtgcc-workspace-header {
		flex-direction: column;
	}

	.mtgcc-workspace-header-actions {
		width: 100%;
	}

	.mtgcc-main-actions {
		justify-content: flex-start;
		gap: 7px;
	}

	.mtgcc-action-group {
		border-left: 0 !important;
		padding-left: 0;
		flex-wrap: wrap;
	}

	.mtgcc-preview-toolbar-main {
		flex-wrap: wrap;
	}

	.mtgcc-preview-group {
		width: 100%;
	}

	.mtgcc-preview-group-guides {
		width: auto;
	}

	.mtgcc-preview-pane {
		position: static;
		order: -1;
	}

	.mtgcc-form-row,
	.mtgcc-form-row-2,
	.mtgcc-form-row-3 {
		grid-template-columns: 1fr;
	}

	.mtgcc-field-compact .mtgcc-input,
	.mtgcc-field-compact .mtgcc-select {
		max-width: none;
	}

	.mtgcc-tabpanel {
		padding: 12px;
	}

	.mtgcc-btn,
	.mtgcc-tab,
	.mtgcc-input,
	.mtgcc-cselect-trigger,
	.mtgcc-preview-finish-button {
		min-height: 44px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mtgcc-app * {
		transition: none !important;
		animation: none !important;
	}
}

/* ---------- card type grid ---------- */

.mtgcc-type-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
	gap: 2px 8px;
}

/* Frameless (Borderless / Extended Art) preview: an outside drop
   shadow marks the physical card edge. Preview-only — exports
   rasterize the SVG without page CSS, so this never exports. */
.mtgcc-preview .mtgcc-card-svg[data-frameless="true"] {
	filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.4));
}

/* ---------- legendary crown option ---------- */

.mtgcc-legendary-crown-field {
	margin-top: 8px;
}

.mtgcc-legendary-crown-field .mtgcc-help {
	margin: 4px 0 0;
}

/* ---------- backside tab ---------- */

.mtgcc-backside-preview {
	display: flex;
	justify-content: center;
	background: var(--mtgcc-panel);
	border: 1px solid var(--mtgcc-border);
	border-radius: 10px;
	padding: 12px;
	margin-bottom: 12px;
}

.mtgcc-backside-preview .mtgcc-card-svg {
	max-width: 300px;
	transform: none;
}

.mtgcc-backside-drop {
	margin-bottom: 10px;
}

.mtgcc-backside-export-wrap {
	display: grid;
	gap: 8px;
	margin-top: 12px;
	border-top: 1px solid var(--mtgcc-border);
	padding-top: 12px;
}