:root {
	--bg: #0b0f16;
	--card: rgba(255,255,255,0.06);
	--border: rgba(255,255,255,0.12);
	--text: rgba(255,255,255,0.92);
	--muted: rgba(255,255,255,0.65);
	--danger: #ff6b6b;
	--shadow: 0 8px 24px rgba(0,0,0,0.35);
	--radius: 16px;
}

* {
	box-sizing: border-box;
}

html, body {
	height: 100%;
}

body {
	margin: 0;
	font-family: system-ui, -apple-system, "Segoe UI", "Noto Sans JP", sans-serif;
	background: radial-gradient(1200px 600px at 20% 10%, rgba(80,120,255,.25), transparent), radial-gradient(1000px 600px at 80% 0%, rgba(120,255,190,.15), transparent), var(--bg);
	color: var(--text);
}

.container {
	width: min(1100px, calc(100% - 24px));
	margin: 18px auto 48px;
}

.header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 14px;
}

.header-left h1 {
	font-size: 22px;
	margin: 0 0 6px 0;
}

.sub {
	margin: 0;
	color: var(--muted);
	font-size: 13px;
	line-height: 1.35;
}

.header-actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.card {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 14px 14px;
	margin-top: 12px;
}

	.card h2 {
		margin: 0 0 10px;
		font-size: 15px;
		color: rgba(255,255,255,0.92);
	}

.grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
}

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

	.header {
		flex-direction: column;
		align-items: stretch;
	}

	.header-actions {
		justify-content: flex-start;
	}
}

.field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

	.field > span {
		font-size: 12px;
		color: var(--muted);
	}

input, select, button {
	font: inherit;
}

	input[type="number"], input[type="text"], select {
		width: 100%;
		padding: 10px 10px;
		border-radius: 12px;
		border: 1px solid var(--border);
		background: rgba(0,0,0,0.25);
		color: var(--text);
		outline: none;
	}

		input[type="number"]:focus, input[type="text"]:focus, select:focus {
			border-color: rgba(160,200,255,0.7);
		}

.checkboxField {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 10px;
}

	.checkboxField input[type="checkbox"] {
		width: auto;
		transform: scale(1.2);
	}

.btn {
	border: 1px solid var(--border);
	background: rgba(255,255,255,0.08);
	color: var(--text);
	border-radius: 12px;
	padding: 10px 12px;
	cursor: pointer;
}

	.btn:hover {
		background: rgba(255,255,255,0.12);
	}

	.btn.ghost {
		background: rgba(0,0,0,0.15);
	}

.row {
	display: flex;
	gap: 10px;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
}

.pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	border-radius: 999px;
	border: 1px solid var(--border);
	background: rgba(0,0,0,0.18);
	color: var(--muted);
	font-size: 12px;
}

	.pill input[type="checkbox"] {
		transform: scale(1.1);
	}

	.pill.clickable {
		cursor: pointer;
		user-select: none;
	}

.note {
	margin: 10px 0 0;
	font-size: 12px;
	color: var(--muted);
	line-height: 1.4;
}

.mono {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Noto Sans Mono", monospace;
	font-size: 12px;
	color: rgba(255,255,255,0.75);
	line-height: 1.5;
}

.skillTable {
	border: 1px solid var(--border);
	border-radius: 14px;
	overflow: hidden;
	background: rgba(0,0,0,0.18);
}

.skillRow {
	display: grid;
	grid-template-columns: 1fr 180px;
	gap: 10px;
	padding: 10px 12px;
	border-bottom: 1px solid rgba(255,255,255,0.06);
	align-items: center;
}

	.skillRow:last-child {
		border-bottom: none;
	}

	.skillRow.head {
		background: rgba(255,255,255,0.06);
		color: var(--muted);
		font-size: 12px;
	}

	.skillRow input.text {
		width: 100%;
	}

.result {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
}

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

.resultItem {
	border: 1px solid var(--border);
	border-radius: 14px;
	padding: 10px 12px;
	background: rgba(0,0,0,0.18);
}

	.resultItem .label {
		font-size: 12px;
		color: var(--muted);
		margin-bottom: 6px;
	}

	.resultItem .value {
		font-size: 18px;
		font-weight: 700;
		letter-spacing: 0.2px;
	}

/* details */
.details {
	margin-top: 10px;
	border: 1px solid rgba(255,255,255,0.10);
	border-radius: 14px;
	background: rgba(0,0,0,0.14);
	padding: 8px 10px;
}

	.details > summary {
		cursor: pointer;
		color: rgba(255,255,255,0.82);
		font-size: 12px;
	}

.details-body {
	margin-top: 10px;
}

/* Effects table */
.effectsTable {
	margin-top: 12px;
	border: 1px solid var(--border);
	border-radius: 14px;
	overflow: hidden;
	background: rgba(0,0,0,0.18);
}

.effectsHead, .effectsRow {
	display: grid;
	grid-template-columns: 170px 170px 110px 140px 1fr 80px;
	gap: 10px;
	align-items: center;
	padding: 10px 12px;
}

.effectsHead {
	color: var(--muted);
	font-size: 12px;
	border-bottom: 1px solid rgba(255,255,255,0.10);
	background: rgba(255,255,255,0.06);
}

.effectsRow {
	border-bottom: 1px solid rgba(255,255,255,0.06);
}

	.effectsRow:last-child {
		border-bottom: none;
	}

.miniBtn {
	border: 1px solid var(--border);
	background: rgba(255,255,255,0.06);
	color: var(--text);
	border-radius: 12px;
	padding: 9px 10px;
	cursor: pointer;
}

	.miniBtn:hover {
		background: rgba(255,255,255,0.10);
	}

.lock {
	font-size: 12px;
	opacity: 0.8;
}

.footer {
	margin-top: 14px;
	color: var(--muted);
	font-size: 12px;
	text-align: center;
}