/* "Montserrat" now means Apple's bold system font: SF Pro on Apple devices (it can't legally be shipped, so it's
   only used when the device has it), otherwise Inter Bold, which is designed to look like SF Pro. Every animation
   that asks for Montserrat gets this. */
@font-face {
	font-family: "Montserrat";
	/* your SF Pro Text file (desktop app only: Apple's licence doesn't allow putting it on the public website, which
	   falls back to Inter Bold) */
	src: local("SF Pro Display Bold"), local("SFProDisplay-Bold"), local("SF Pro Text Heavy"), local("SFProText-Heavy"), url("fonts/sf-pro-local.otf") format("opentype"), url("fonts/inter/files/inter-latin-700-normal.woff2") format("woff2");
	font-weight: 100 1000;
	font-style: normal;
	font-display: block;
}
@font-face {
	font-family: "Montserrat";
	src: local("SF Pro Display Bold Italic"), local("SFProDisplay-BoldItalic"), url("fonts/inter/files/inter-latin-700-italic.woff2") format("woff2"), url("fonts/inter/files/inter-latin-700-normal.woff2") format("woff2");
	font-weight: 100 1000;
	font-style: italic;
	font-display: block;
}
@font-face {
	font-family: "Minecraft Ten";
	src: url("fonts/minecraft-ten/MinecraftTen.ttf") format("truetype");
	font-display: block;
}

:root {
	--bg: #07070b;
	--panel: #0f0f16;
	--panel2: #151520;
	--line: #23233a;
	--text: #e9e9f2;
	--sub: #8b8ba3;
	--accent: #8b5cf6;
	--accent2: #22d3ee;
	--bad: #ff5a6a;
}

* { box-sizing: border-box; }

html, body {
	margin: 0;
	height: 100%;
	background: var(--bg);
	color: var(--text);
	font-family: "Inter", system-ui, sans-serif;
	font-size: 14px;
	overflow: hidden;
}

button, input, select { font: inherit; color: inherit; }

button {
	background: var(--panel2);
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 8px 14px;
	cursor: pointer;
	transition: border-color .15s, background .15s, transform .1s;
}
button:hover { border-color: var(--accent); }
button:active { transform: scale(.98); }
button.primary {
	background: linear-gradient(135deg, var(--accent), #6d28d9);
	border-color: transparent;
	font-weight: 700;
	box-shadow: 0 6px 24px rgba(139, 92, 246, .35);
}
button.big { width: 100%; padding: 12px; font-size: 15px; margin-top: 6px; }
button.small { padding: 3px 8px; font-size: 12px; margin-top: 6px; }

input[type=text], select, textarea.multi {
	width: 100%;
	background: var(--panel2);
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 9px 12px;
	outline: none;
}
input[type=text]:focus, select:focus, textarea.multi:focus { border-color: var(--accent); }
/* multi-line title / subtitle box: looks like the one-line inputs, Enter adds a line */
textarea.multi { display: block; resize: none; overflow: hidden; color: inherit; font: inherit; line-height: 1.35; }

header {
	height: 64px;
	display: flex;
	align-items: center;
	gap: 28px;
	padding: 0 20px;
	border-bottom: 1px solid var(--line);
	background: linear-gradient(180deg, #0d0d15, var(--bg));
}
.brand { font-size: 22px; font-weight: 900; letter-spacing: -.5px; display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.brand b { background: linear-gradient(90deg, var(--accent), var(--accent2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.logo {
	width: 26px; height: 26px; border-radius: 8px;
	background: conic-gradient(from 200deg, var(--accent), var(--accent2), var(--accent));
	box-shadow: 0 0 18px rgba(139, 92, 246, .6);
}
.user { display: flex; align-items: center; gap: 10px; flex: 1; }
.user input { max-width: 260px; }
#status { color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#status.bad { color: var(--bad); }

main {
	display: grid;
	grid-template-columns: 270px 1fr 320px;
	height: calc(100% - 64px);
}

aside {
	background: var(--panel);
	border-right: 1px solid var(--line);
	padding: 16px;
	overflow-y: auto;
}
aside.right { border-right: 0; border-left: 1px solid var(--line); }
h2 { font-size: 12px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--sub); margin: 4px 0 12px; }

.tpl {
	display: block;
	width: 100%;
	text-align: left;
	margin-bottom: 10px;
	padding: 14px;
	border-radius: 14px;
	background: linear-gradient(160deg, var(--panel2), #0c0c13);
}
.tpl b { display: block; font-size: 14px; margin-bottom: 4px; }
.tpl small { color: var(--sub); line-height: 1.35; }
.tpl.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 8px 30px rgba(139, 92, 246, .25); }

.center { display: flex; flex-direction: column; min-width: 0; }
#stage {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	background:
		radial-gradient(circle at 50% 40%, rgba(139, 92, 246, .08), transparent 60%),
		repeating-conic-gradient(#0c0c12 0 25%, #0f0f17 0 50%) 0 0 / 24px 24px;
	min-height: 0;
}
#preview { max-width: calc(100% - 24px); max-height: calc(100% - 24px); border-radius: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, .6); }

.transport {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 18px;
	border-top: 1px solid var(--line);
	background: var(--panel);
}
.transport input { flex: 1; accent-color: var(--accent); }
#time { color: var(--sub); font-variant-numeric: tabular-nums; min-width: 92px; text-align: right; }

.field { display: block; margin-bottom: 12px; }
.field > span { display: flex; justify-content: space-between; color: var(--sub); font-size: 12px; margin-bottom: 6px; }
.field em { font-style: normal; color: var(--text); }
.field.check { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.field.check > span { margin: 0; color: var(--text); font-size: 13px; }
.field.check input { accent-color: var(--accent); width: 16px; height: 16px; }
.field input[type=color] { width: 100%; height: 36px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel2); padding: 3px; cursor: pointer; }
.field input[type=range] { width: 100%; accent-color: var(--accent); }
.field input[type=file] { width: 100%; color: var(--sub); font-size: 12px; }
#items-source { display: block; color: var(--sub); margin: -4px 0 8px; font-size: 11px; }

.export { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.bar { height: 6px; background: var(--panel2); border-radius: 6px; overflow: hidden; margin: 10px 0 6px; }
#export-bar { height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent2)); transition: width .1s; }
#export-status { color: var(--sub); word-break: break-all; }

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 10px; border-radius: 999px; background: rgba(139, 92, 246, 0.18); border: 1px solid rgba(139, 92, 246, 0.5); font-size: 12px; }
.chip button { border: 0; background: rgba(255, 255, 255, 0.12); color: inherit; width: 18px; height: 18px; border-radius: 50%; padding: 0; cursor: pointer; line-height: 18px; font-size: 11px; }
.field.items input[type="text"] { margin-bottom: 4px; }
.grid9 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 4px 0; }
.grid9 input { min-width: 0; font-size: 11px; padding: 6px 4px; text-align: center; }
.g9cell { position: relative; }
.g9cell input[type="text"] { width: 100%; padding-right: 22px; }
.g9up { position: absolute; right: 3px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; border-radius: 5px; background: rgba(255, 255, 255, 0.12); font-size: 10px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.g9up.has { background: rgba(139, 92, 246, 0.6); width: 26px; }
.imgchips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 6px; }
.imgchip { position: relative; width: 58px; height: 40px; border-radius: 8px; background-size: cover; background-position: center; border: 1px solid rgba(255, 255, 255, 0.2); }
.imgchip em { position: absolute; left: 3px; bottom: 2px; font: 700 10px Inter, sans-serif; font-style: normal; color: #fff; text-shadow: 0 1px 2px #000; }
.imgchip button { position: absolute; top: 2px; width: 16px; height: 16px; border-radius: 50%; border: 0; padding: 0; font-size: 9px; line-height: 16px; background: rgba(0, 0, 0, 0.65); color: #fff; cursor: pointer; }
.imgchip button:first-of-type { right: 2px; }
.imgchip button:nth-of-type(2) { right: 20px; }
/* transparent backgrounds show a checkerboard in the preview (exports stay truly transparent) */
#preview.transparent {
	background-color: #2a2833;
	background-image: linear-gradient(45deg, #3a3845 25%, transparent 25%), linear-gradient(-45deg, #3a3845 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #3a3845 75%), linear-gradient(-45deg, transparent 75%, #3a3845 75%);
	background-size: 20px 20px;
	background-position: 0 0, 0 10px, 10px -10px, -10px 0;
}
.format-warn { display: block; margin-top: 6px; color: #fbbf24; font-size: 12px; }