/* ---------- ROOT ---------- */
:root {
	--c-emerald: #10b981;
	--c-red: #ef4444;
	--c-blue: #38bdf8;
	--c-yellow: #fbbf24;
	--c-violet: #8b5cf6;
	--bg: #000;
	--panel: #0b0f19;
	--panel-b: #1f2937;
	--text: #fff;
	--muted: #94a3b8;
}

/* ---------- RESET ---------- */
* {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font: 16px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* ---------- LAYOUT ---------- */
@media (min-width: 991px) {
	.dsg-con {
		padding-top: 70px;
		padding-right: 55px;
	}
}

@media (max-width: 991px) {
	.dsg-con {
		padding-top: 70px;
		margin-left: auto;
		margin-right: auto;
	}
}

/* ---------- LOGO ---------- */
#logo-codepen {
	--dim: 30px;
	position: fixed;
	bottom: var(--dim);
	right: var(--dim);
	height: var(--dim);
	width: var(--dim);
	text-shadow: 0 0 30px #ffdd40;
}

#logo-codepen svg path {
	transition: all 2s ease;
	fill: none;
}

/* ---------- TOOLBAR ---------- */
.toolbar {
	display: flex;
	gap: 12px;
	align-items: flex-end;
	justify-content: center;
	margin-bottom: 18px;
	margin-left: auto;
	margin-right: auto;
}

.title {
	font-size: 28px;
	font-weight: 800;
	margin: 0;
}

.btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	border: 0;
	border-radius: 10px;
	cursor: pointer;
	color: #fff;
	background: #374151;
	font-weight: 700;
	transition: background 0.15s ease, opacity 0.15s ease;
}

.btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.btn-sky {
	background: #0ea5e9;
}
.btn-sky:hover:not(:disabled) {
	background: #0284c7;
}

.btn-green {
	background: #10b981;
}
.btn-green:hover:not(:disabled) {
	background: #059669;
}

.btn-red {
	background: #ef4444;
}
.btn-red:hover:not(:disabled) {
	background: #dc2626;
}

.btn-ghost {
	background: transparent;
	border: 1px solid #334155;
	color: #cbd5e1;
}
.btn-ghost:hover:not(:disabled) {
	border-color: #64748b;
	color: #fff;
}

.btn-firstt {
	background: #a044ff;
}
.btn-firstt:hover:not(:disabled) {
	background: #8b2fe6;
}

.btn-yellow {
	background: #fbbf24;
	color: #000;
}
.btn-yellow:hover:not(:disabled) {
	background: #f59e0b;
}
.btn-yellow:disabled {
	background: #78716c;
	color: #94a3b8;
	cursor: not-allowed;
}

.dsg-win-btn {
	width: 25%;
	max-width: 200px;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

/* ---------- PANEL ---------- */
.panel {
	background: var(--panel);
	border: 1px solid var(--panel-b);
	border-radius: 14px;
	padding: 14px;
}

/* ---------- GRID ---------- */
.grid {
	display: grid;
	gap: 12px;
}

.g-6 {
	grid-template-columns: repeat(6, minmax(0, 1fr));
}

@media (max-width: 860px) {
	.g-6 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ---------- FORM ---------- */
label {
	display: block;
	font-size: 12px;
	color: #cbd5e1;
	margin: 0 0 6px;
}

input,
select {
	font-size: 10pt;
	width: 100%;
	background: #111827;
	color: #fff;
	border: 1px solid #374151;
	border-radius: 10px;
	padding: 10px 12px;
}

input::placeholder {
	color: #9aa2b1;
}

input.error,
select.error {
	border-color: #ef4444;
	box-shadow: 0 0 5px rgba(239, 68, 68, 0.5);
}

/* ---------- CARDS ---------- */
.cards {
	display: grid;
	gap: 16px;
}

@media (min-width: 720px) {
	.cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.card {
	position: relative;
	overflow: hidden;
	border: 4px solid var(--c-emerald);
	border-radius: 16px;
	background: #0b0f19;
	transition: filter 0.25s ease, opacity 0.25s ease;
}

.card.dead {
	filter: grayscale(100%);
	opacity: 0.55;
}

.card::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, var(--card-color, rgba(16, 185, 129, 0.65)), transparent 70%);
	opacity: 0.22;
	pointer-events: none;
}

.planet {
	position: absolute;
	border-radius: 9999px;
	filter: blur(28px);
	opacity: 0.15;
	background: #cbd5e1;
}

.planet.p1 {
	width: 120px;
	height: 120px;
	top: 18px;
	left: 14px;
}

.planet.p2 {
	width: 160px;
	height: 160px;
	bottom: 12px;
	right: 20px;
}

.card-body {
	position: relative;
	padding: 16px;
	z-index: 1;
}

.card-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
}

.name {
	font-weight: 800;
	font-size: 18px;
	color: #fff;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}

.close {
	background: transparent;
	border: 0;
	color: #cbd5e1;
	cursor: pointer;
	font-size: 22px;
	line-height: 1;
}

/* ---------- HP ROW (lifebar + число в одну строку) ---------- */
.hp-row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 8px 0 6px;
}

.lifebar {
	position: relative;
	flex: 4;		  /* ~80% ширины */
	height: 12px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: rgba(255, 255, 255, 0.06);
	border-radius: 9999px;
	overflow: hidden;
}

.life-fill {
	height: 100%;
	opacity: 0.45;
	background: var(--life-fill, #10b981);
	width: 0;
	transition: width 0.3s ease;
}

.life-grad {
	position: absolute;
	inset: 0;
	opacity: 0.25;
	background: linear-gradient(90deg, var(--life-fill, #10b981), transparent);
}

.hp {
	flex: 1;		  /* ~20% ширины */
	font-weight: 900;
	font-size: 20px;
	color: #fff;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
	text-align: center;
	white-space: nowrap;
	line-height: 1;
}

.pulse {
	animation: pulse 0.45s ease-in-out;
}

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

/* ---------- FIELDS ---------- */
.row2 {
	display: grid;
	gap: 10px;
}

@media (min-width: 620px) {
	.row2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 991px) {
	.row2 {
		display: flex;
	}
}

.field {
	display: flex;
	gap: 8px;
}

.field input {
	flex: 1;
}

.muted {
	color: #94a3b8;
	font-weight: 600;
}

/* ---------- LOG ---------- */
.log {
	margin-top: 16px;
}

.log h4 {
	margin: 0 0 10px;
}

.log ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.log li {
	padding: 8px 10px;
	border-radius: 10px;
	background: #0b0f19;
	border: 1px solid #1f2937;
	margin-bottom: 8px;
}

.log.panel {
	display: none;
}

.v-red   { color: #ef4444; }
.v-green { color: #10b981; }

/* ---------- COLOR SELECTOR ---------- */
.name-color-wrapper {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1;
}

.color-selector {
	position: relative;
	z-index: 1000;
}

.color-button {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.7);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 14px;
	transition: all 0.2s ease;
	position: relative;
	z-index: 999;
}

.color-button * {
	pointer-events: none;
}

.color-button:hover {
	transform: scale(1.1);
	border-color: rgba(255, 255, 255, 0.9);
}

.color-palette {
	display: none;
	flex-direction: column;
	gap: 8px;
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	background: var(--panel-b);
	padding: 10px;
	border-radius: 10px;
	border: 1px solid #334155;
	z-index: 2000;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
}

.color-palette.open {
	display: flex;
}

.color-palette-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 6px;
}

.color-palette-custom {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 8px;
	border-radius: 8px;
	border: 1px dashed #475569;
	background: rgba(255, 255, 255, 0.04);
	cursor: pointer;
	font-size: 12px;
	color: #e2e8f0;
	transition: border-color 0.15s, background 0.15s;
}

.color-palette-custom:hover {
	border-color: #94a3b8;
	background: rgba(255, 255, 255, 0.08);
}

.color-palette-custom.active {
	border-color: #fff;
	border-style: solid;
	box-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
}

.color-palette-custom-swatch {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.7);
	flex: 0 0 auto;
}

.color-palette-custom-label {
	flex: 1;
	white-space: nowrap;
}

.color-palette-custom-hex {
	font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
	opacity: 0.75;
	font-size: 11px;
}

.color-palette-custom .color-custom-input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
	border: 0;
	padding: 0;
	background: transparent;
}

.color-palette-backdrop {
	display: none;
}

.color-option {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	cursor: pointer;
	transition: transform 0.2s;
	border: 2px solid transparent;
}

.color-option:hover {
	transform: scale(1.2);
}

.color-option.active {
	border-color: #fff;
	box-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
}

.color-pick-row {
	display: flex;
	gap: 6px;
	align-items: stretch;
}

.color-pick-row select {
	flex: 1;
	min-width: 0;
}

.color-pick-row input[type="color"] {
	width: 42px;
	padding: 2px;
	border-radius: 8px;
	border: 1px solid #334155;
	background: var(--panel-b, #111);
	cursor: pointer;
}

.preset-color-input {
	width: 48px;
	height: 30px;
	padding: 2px;
	cursor: pointer;
}

@media (max-width: 768px) {
	.color-palette {
		max-width: 180px;
	}
	.color-palette-grid {
		grid-template-columns: repeat(4, 1fr);
	}
	.name-color-wrapper {
		align-items: flex-start;
		gap: 5px;
	}
}

/* ---------- SCROLL ---------- */
#cards-container::-webkit-scrollbar {
	width: 8px;
}
#cards-container::-webkit-scrollbar-track {
	background: var(--panel-b);
	border-radius: 4px;
}
#cards-container::-webkit-scrollbar-thumb {
	background: var(--c-emerald);
	border-radius: 4px;
}
#cards-container::-webkit-scrollbar-thumb:hover {
	background: var(--c-blue);
}

/* ---------- DSG ---------- */
.dsg-b-t {
	display: flex;
	gap: 12px;
	align-items: flex-end;
}

.dsg-grs {
	grid-column: span 2;
}

.dsg-oh {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	margin: auto;
}

.dsg-ohl {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	margin: 0 auto;
	padding: 10px 0;
}

.dsg-heal {
	display: flex;
	align-items: flex-end;
}

.dsg-cards {
	margin-top: 16px;
	max-height: 900px;
	overflow-y: auto;
	padding-bottom: 20px;
}

.dsg-cl {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 10px;
}

/* ---------- DEATH ICON ---------- */
.monster-death-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 6rem;
	color: #ef4444;
	z-index: 9999;
	text-shadow: 0 0 20px rgba(239, 68, 68, 0.8), 0 0 40px rgba(239, 68, 68, 0.6);
	opacity: 0.8;
	pointer-events: none;
}

@media (max-width: 768px) {
	.monster-death-icon {
		font-size: 4rem;
	}
}

/* ---------- GAME MODE ---------- */
.game-mode-select {
	width: 120px;
}

/* ---------- MODAL ---------- */
.modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.8);
	z-index: 1000;
}

.modal-content {
	position: relative; /* нужно для btn-close-modal с position:absolute */
	background: var(--panel);
	border: 1px solid var(--panel-b);
	border-radius: 14px;
	padding: 20px;
	/* ИСПРАВЛЕНО: было max-width:25% — на мобильных это 60px, контент не помещался */
	width: 90%;
	max-width: 480px;
	margin: 0 auto;
}

.modal-content h2 {
	margin: 0 0 10px;
	color: var(--c-emerald);
}

.modal-content p {
	font-size: 18px;
	font-weight: bold;
	margin: 0 0 20px;
}

/* Для модалок с широкими таблицами (пресеты) */
.modal-content.modal-wide {
	max-width: 720px;
}

@media (max-width: 768px) {
	.modal-content {
		width: 95%;
		max-width: none;
		padding: 16px;
	}
	#presets-edit-modal > div > table > thead > tr > th {
		font-size: 0.7em;
	}
}

.btn-close-modal {
	position: absolute;
	top: 10px;
	right: 10px;
	background: transparent;
	border: 1px solid var(--panel-b);
	color: #94a3b8;
	font-size: 16px;
	font-weight: 700;
	padding: 4px 8px;
	border-radius: 8px;
	cursor: pointer;
}

.btn-close-modal:hover {
	color: #fff;
	border-color: #fff;
}

/* ---------- CHRONICLE ---------- */
.chronicle-container {
	display: none;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 2000;
	background: var(--panel);
	border-top: 1px solid #334155;
	padding: 15px;
	color: var(--text);
	max-height: 50vh;
	overflow-y: auto;
}

.chronicle-container.visible {
	display: block;
}

.chronicle-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
}

.chronicle-content {
	margin-bottom: 10px;
}

.chronicle-footer {
	text-align: center;
}

/* ИСПРАВЛЕНО: на мобильных летопись была скрыта через right:-100%
   вместо display:none, что конфликтовало с .visible { display:block } */
@media (max-width: 768px) {
	.chronicle-container {
		width: 100%;
	}
}

/* ---------- FAN TOKENS ---------- */
.fan-token-section {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.fan-token-info {
	display: flex;
	align-items: center;
	gap: 8px;
}

.fan-token-count {
	font-weight: bold;
	color: #fbbf24;
	text-shadow: 0 0 5px rgba(251, 191, 36, 0.5);
}

.log li .fa-trophy {
	color: #fbbf24;
	margin-right: 5px;
}

/* ---------- DEAD WIZARD TOKENS ---------- */
.dead-wizard-panel {
	padding: 14px;
	margin-left: auto;
	margin-right: auto;
}

.dead-wizard-tokens-container {
	padding: 8px 12px;
	background: var(--panel);
	border-radius: 10px;
	border: 1px solid var(--panel-b);
}

.dead-wizard-token-pool {
	width: 20px;
	height: 20px;
	border: 2px solid #666;
	border-radius: 50%;
	background: transparent;
	transition: all 0.3s ease;
}

.dead-wizard-token-pool.used {
	background: #8b5cf6;
	box-shadow: 0 0 10px rgba(139, 92, 246, 0.5);
}

.dead-wizard-token {
	margin-top: 10px;
	padding: 8px;
	background: rgba(255, 250, 250, 0.3);
	border-radius: 8px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.dead-wizard-token i {
	font-size: 20px;
}

/* ---------- SCORE ---------- */
.score-section {
	margin-top: 10px;
	padding: 8px;
	background: rgba(0, 0, 0, 0.3);
	border-radius: 8px;
}

/* ---------- EBM ---------- */
.card.ebm-gradient {
	border: 4px solid transparent;
	background:
		linear-gradient(45deg, #0b0f19, #0b0f19) padding-box,
		linear-gradient(45deg, #ff00cc, #3333ff, #00ccff, #ff00cc) border-box;
	background-size: 400% 400%;
	animation: gradient-border 3s ease infinite;
}

@keyframes gradient-border {
	0%   { background-position: 0% 50%; }
	50%  { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

.card.ebm-gradient::before {
	opacity: 0.3;
}

.card.ebm-gradient .planet {
	opacity: 0.2;
}

/* ---------- BACKGROUND VIDEOS ---------- */
.background-videos {
	position: fixed;
	margin: 0 auto;
	left: 22.5%;
	justify-content: center;
	width: 100vh;
	height: 100vh;
	z-index: -9999;
	pointer-events: none;
	overflow: hidden;
}

.background-video {
	position: absolute;
	margin: 0 auto;
}

/* ---------- TOOLBAR BUTTONS ---------- */
.toolbar-buttons {
	display: flex;
	gap: 12px;
	align-items: center;
	flex-wrap: wrap;
}

@media (max-width: 768px) {
	.toolbar {
		flex-direction: column;
		align-items: stretch;
		gap: 15px;
	}
	.toolbar-buttons {
		justify-content: center;
	}
	.brand {
		text-align: center;
	}
}

/* ---------- MISC ---------- */
.grid.g-6 {
	padding-bottom: 20px;
}

.dsg-heal .btn {
	width: 100%;
}

/* ---------- BRAND ---------- */
.brand {
	text-align: center;
}

.brand-title {
	font-size: 1.5rem;
	font-weight: 800;
	color: #fff;
	text-shadow: 0 0 10px rgba(139, 92, 246, 0.8), 0 0 20px rgba(139, 92, 246, 0.6), 0 0 30px rgba(139, 92, 246, 0.4);
	margin-bottom: 5px;
}

.brand-sub {
	font-size: 1rem;
	color: #cbd5e1;
	font-style: italic;
	text-shadow: 0 0 5px rgba(139, 92, 246, 0.5);
}

/* ---------- TOUCH TOGGLE ---------- */
.segmented-control {
	display: inline-flex;
	background: var(--panel-b);
	border: 1px solid #2a3b52;
	border-radius: 10px;
	overflow: hidden;
	padding: 2px;
}

.segmented-control input {
	display: none;
}

.segmented-control label {
	padding: 8px 12px;
	cursor: pointer;
	color: var(--muted);
	transition: all 0.2s ease;
	font-size: 14px;
	margin: 0;
}

.segmented-control input:checked + label {
	background: var(--c-emerald);
	color: #000;
	font-weight: bold;
	border-radius: 8px;
}

.mode-toggle {
	margin-left: 10px;
}

/* ---------- TOAST ---------- */
@keyframes fadeInUp {
	from { opacity: 0; transform: translateX(-50%) translateY(10px); }
	to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ---------- STAR REALMS BASES ---------- */
/* ---------- STAR REALMS BASES ---------- */
.player-bases-wrap {
	margin: 8px 0 10px;
	display: block;
	min-height: 28px;
}

.player-bases {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	min-height: 28px;
}

.player-bases-actions {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
}

.player-bases-actions.in-name-row {
	flex: 0 0 auto;
	margin-left: 2px;
}

.base-chip {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	background: transparent;
	padding: 0;
	line-height: 0;
}

.base-chip-svg {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
}

.base-chip-svg svg {
	display: block;
	width: 28px;
	height: 28px;
	overflow: visible;
}

.base-chip.black .base-chip-svg svg {
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}

.base-chip.gray .base-chip-svg svg {
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.18));
}

.base-chip-remove {
	position: absolute;
	top: -3px;
	right: -3px;
	width: 12px;
	height: 12px;
	border: 0;
	border-radius: 50%;
	padding: 0;
	background: rgba(239, 68, 68, 0.95);
	color: #fff;
	cursor: pointer;
	font-size: 9px;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
}

.base-chip-remove:hover {
	background: rgba(220, 38, 38, 1);
}

.base-chip-remove:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.base-add-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	line-height: 0;
}

.base-add-btn svg {
	display: block;
	width: 28px;
	height: 28px;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.18));
}

.base-add-btn:hover:not(:disabled) {
	transform: translateY(-1px);
}

.base-add-btn:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.base-chip.black {
	border-color: rgba(255, 255, 255, 0.18);
	background: linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(2, 6, 23, 0.96));
}

.base-chip.gray {
	border-color: rgba(148, 163, 184, 0.65);
	background: linear-gradient(180deg, rgba(100, 116, 139, 0.32), rgba(51, 65, 85, 0.38));
}

.base-chip-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	color: #cbd5e1;
}

.base-chip-value {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	height: 24px;
	padding: 0 6px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.12);
	font-size: 13px;
}

.base-chip-remove {
	width: 20px;
	height: 20px;
	border: 0;
	border-radius: 50%;
	background: rgba(239, 68, 68, 0.16);
	color: #fff;
	cursor: pointer;
	font-size: 14px;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.base-chip-remove:hover {
	background: rgba(239, 68, 68, 0.28);
}

.base-chip-remove:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ---------- EXTRA BUTTONS ---------- */
.btn-violet {
	background: #8b5cf6;
}

.btn-violet:hover:not(:disabled) {
	background: #7c3aed;
}

.btn-mini {
	padding: 6px 10px;
	font-size: 12px;
	border-radius: 999px;
}

/* ---------- MASS DAMAGE / EXTRA MODALS ---------- */
.modal-content-narrow {
	max-width: 420px;
}

.modal-content-wide {
	max-width: 640px;
}

.modal-grid-1 {
	grid-template-columns: 1fr;
}

.modal-grid-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.modal-check-row {
	display: flex;
	align-items: end;
}

.modal-inline-check {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 8px 0 0;
	font-size: 14px;
	color: #e2e8f0;
}

.modal-inline-check input {
	width: auto;
	margin: 0;
}

.modal-hint {
	margin: 14px 0 16px !important;
	font-size: 13px !important;
	line-height: 1.5;
	font-weight: 600 !important;
	color: #94a3b8;
}

@media (max-width: 768px) {
	.modal-grid-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		/*grid-template-columns: 2fr;*/
	}
}

/* ---------- ADD BASE TYPE PICKER ---------- */
.base-type-field {
	grid-column: 1 / -1;
}

.base-type-picker {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin-top: 8px;
}

.base-type-option {
	display: block;
	cursor: pointer;
}

.base-type-radio {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.base-type-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 92px;
	padding: 10px 8px;
	border: 1px solid rgba(148, 163, 184, 0.22);
	border-radius: 14px;
	background: rgba(15, 23, 42, 0.45);
	transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.base-type-option:hover .base-type-card {
	transform: translateY(-1px);
	border-color: rgba(96, 165, 250, 0.38);
	background: rgba(30, 41, 59, 0.72);
}

.base-type-card svg {
	display: block;
	width: 40px;
	height: 40px;
}

.base-type-name {
	font-size: 13px;
	font-weight: 600;
	color: #e2e8f0;
	line-height: 1.2;
	text-align: center;
}

.base-type-check {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 18px;
	height: 18px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 700;
	color: #fff;
	background: #22c55e;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28);
	opacity: 0;
	transform: scale(0.8);
	transition: opacity 0.18s ease, transform 0.18s ease;
}

.base-type-radio:checked + .base-type-card {
	border-color: rgba(34, 197, 94, 0.75);
	background: rgba(22, 101, 52, 0.16);
	box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.18) inset;
}

.base-type-radio:checked + .base-type-card .base-type-check {
	opacity: 1;
	transform: scale(1);
}

.base-type-radio:focus-visible + .base-type-card {
	outline: 2px solid rgba(96, 165, 250, 0.95);
	outline-offset: 2px;
}

@media (max-width: 640px) {
	.base-type-picker {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
	}

	.base-type-card {
		min-height: 84px;
		padding: 8px 6px;
	}

	.base-type-card svg {
		width: 34px;
		height: 34px;
	}

	.base-type-name {
		font-size: 12px;
	}
}

.base-type-inline-group {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex-wrap: nowrap;
}

.base-type-inline {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	line-height: 0;
}

.base-type-inline input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.base-type-inline-ui {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 8px;
	background: transparent;
	transition: transform 0.15s ease, filter 0.15s ease, opacity 0.15s ease;
	opacity: 0.72;
}

.base-type-inline-ui svg {
	display: block;
	width: 56px;
	height: 56px;
}

.base-type-inline:hover .base-type-inline-ui {
	transform: translateY(-1px);
	opacity: 0.92;
}

.base-type-inline-check {
	position: absolute;
	right: -3px;
	bottom: -3px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #22c55e;
	color: #fff;
	font-size: 8px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
	opacity: 0;
	transform: scale(0.7);
	transition: opacity 0.15s ease, transform 0.15s ease;
}

.base-type-inline input:checked + .base-type-inline-ui {
	opacity: 1;
	filter: drop-shadow(0 0 0.35rem rgba(255,255,255,0.18));
}

.base-type-inline input:checked + .base-type-inline-ui .base-type-inline-check {
	opacity: 1;
	transform: scale(1);
}

.base-type-inline input:focus-visible + .base-type-inline-ui {
	outline: 2px solid rgba(96, 165, 250, 0.9);
	outline-offset: 2px;
}