:root {
	--accent-light: #84dee1;
	--accent-lighter: #c1eff0;
	--accent: teal;
	--accent-dark: #066;
	--button-shadow-light: #0aab;
	--button-shadow-dark: #055b;
	--button-shadow-size: 3px;
	--button-highlight-size: 2px;
	--input-border-width: 2px;
	--font-family: 'Courier New', Courier, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: #000; color: #eee; line-height: 1.5; font-family: var(--font-family); font-size: 1rem; }
h1, h2, h3, h4 { font-family: var(--font-family); }
hr { border: none; border-top: 2px solid var(--accent-light); margin: 1.5em 0; }
a { color: var(--accent-lighter); }
a:visited { color: var(--accent-light); }
input, select, textarea { font-family: var(--font-family); }
input[type="text"], input[type="number"], input[type="password"] {
	width: 100%; max-width: 400px; margin: 0.3em 0 0.8em;
	background-color: #111; color: #eee; padding: 0.5em;
	border: var(--input-border-width) solid var(--accent); outline: none;
}
input::placeholder { color: #888; }
select { background-color: #111; color: #eee; padding: 0.5em; border: var(--input-border-width) solid var(--accent); outline: none; max-width: 400px; margin: 0.3em 0 0.8em; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); cursor: pointer; margin-right: 0.4em; }
input[type="file"] { margin: 0.3em 0 0.8em; font-family: var(--font-family); color: #eee; }
input[type="file"]::file-selector-button, button, input[type="submit"] {
	margin: 0.3em 0; font-family: var(--font-family); background-color: var(--accent); color: #fff;
	padding: 0.5em 1.2em; border: none; cursor: pointer;
	box-shadow: 0 var(--button-shadow-size) 0 0 var(--button-shadow-light) inset,
		var(--button-shadow-size) 0 0 0 var(--button-shadow-light) inset,
		0 calc(-1 * var(--button-shadow-size)) 0 0 var(--button-shadow-dark) inset,
		calc(-1 * var(--button-shadow-size)) 0 0 0 var(--button-shadow-dark) inset,
		0 0 0 var(--button-highlight-size) #111;
}
button:hover:not(:disabled), input[type="submit"]:hover:not(:disabled) {
	box-shadow: 0 var(--button-shadow-size) 0 0 var(--button-shadow-light) inset,
		var(--button-shadow-size) 0 0 0 var(--button-shadow-light) inset,
		0 calc(-1 * var(--button-shadow-size)) 0 0 var(--button-shadow-dark) inset,
		calc(-1 * var(--button-shadow-size)) 0 0 0 var(--button-shadow-dark) inset,
		0 0 0 var(--button-highlight-size) var(--accent-light);
}
button:disabled, input[type="submit"]:disabled { opacity: 0.5; cursor: not-allowed; }
fieldset { border: var(--input-border-width) solid var(--accent); margin: 1em 0; padding: 0.8em; }
#content { max-width: 800px; padding: 1em; margin: auto; }
.success-message { color: lime; background: rgba(0,255,0,0.05); border-left: 3px solid lime; padding: 0.5em 1em; margin: 0.5em 0; }
.error-message { color: lightcoral; background: rgba(255,0,0,0.05); border-left: 3px solid lightcoral; padding: 0.5em 1em; margin: 0.5em 0; }
.warning-message { color: orange; background: rgba(255,165,0,0.05); border-left: 3px solid orange; padding: 0.5em 1em; margin: 0.5em 0; }
#skin-container { text-align: center; margin: 1em auto; min-height: 350px; position: relative; }
#skin-canvas { display: inline-block; }
.texture-preview { width: 256px; image-rendering: pixelated; }
.small-texture-preview { width: 64px; image-rendering: pixelated; }
.skin-preview-fallback { width: 200px; height: 350px; display: inline-block; border: 1px dashed var(--accent); color: #666; line-height: 350px; text-align: center; }
.header-nav { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 1em; white-space: nowrap; padding: 0.5em 0; border-bottom: 2px solid var(--accent); margin-bottom: 1.5em; }
.header-nav a { color: #eee; text-decoration: none; }
.header-nav a:hover { color: var(--accent-light); }
.logo { font-family: Arial, sans-serif; color: #fff; text-decoration: none; font-size: 1.5rem; font-weight: bold; }
.logo:visited { color: #fff; }
.download-btn { display: inline-block; margin: 0.3em; padding: 0.6em 1.4em; background-color: #1a7a1a; color: #fff; text-decoration: none; font-family: var(--font-family); font-size: 1.1rem; border: none; cursor: pointer; box-shadow: 0 var(--button-shadow-size) 0 0 rgba(0,255,0,0.2) inset, var(--button-shadow-size) 0 0 0 rgba(0,255,0,0.2) inset, 0 calc(-1 * var(--button-shadow-size)) 0 0 rgba(0,150,0,0.2) inset, calc(-1 * var(--button-shadow-size)) 0 0 0 rgba(0,150,0,0.2) inset, 0 0 0 var(--button-highlight-size) #111; }
.download-btn:hover { background-color: #2a9a2a; }
table { width: 100%; border-collapse: collapse; margin: 0.5em 0; }
thead td { font-weight: bold; }
td { padding: 0.4em 0.5em; }
tbody tr:not(:last-child) td { border-bottom: 1px solid rgba(255,255,255,0.1); }
td:last-child { text-align: right; }
.card { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); padding: 1em; margin: 1em 0; }
.danger-btn { background-color: #8b0000 !important; box-shadow: 0 var(--button-shadow-size) 0 0 rgba(255,0,0,0.2) inset, var(--button-shadow-size) 0 0 0 rgba(255,0,0,0.2) inset, 0 calc(-1 * var(--button-shadow-size)) 0 0 rgba(150,0,0,0.3) inset, calc(-1 * var(--button-shadow-size)) 0 0 0 rgba(150,0,0,0.3) inset, 0 0 0 var(--button-highlight-size) #111 !important; }
summary { cursor: pointer; margin: 0.5em 0; }
details { margin: 0.5em 0; }