:root {
	--bg: #0b0f14;
	--panel: #111823;
	--panel2: #0e1520;
	--text: #e7eef8;
	--muted: #9fb0c7;
	--border: #243348;
	--accent: #6fb6ff;
	--good: #4cd47f;
	--bad: #ff5b6e;
	--warn: #ffcc66;
}
* {
	box-sizing: border-box;
}

* {
	-ms-overflow-style: none;
	scrollbar-width: none;
}
*::-webkit-scrollbar {
	width: 0;
	height: 0;
}
html,
body {
	min-height: 100%;
}
body {
	margin: 0;
	font-family:
		system-ui,
		-apple-system,
		Segoe UI,
		Roboto,
		Arial,
		sans-serif;
	background:
		radial-gradient(1200px 800px at 20% 10%, rgba(111, 182, 255, 0.18), transparent 60%),
		radial-gradient(1200px 800px at 90% 40%, rgba(76, 212, 127, 0.1), transparent 55%), var(--bg);
	background-repeat: no-repeat;
	background-attachment: fixed;
	color: var(--text);
}
.wrap {
	max-width: 1100px;
	margin: 24px auto;
	padding: 0 16px 32px;
}
header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 14px;
}
header h1 {
	margin: 0;
	font-size: 20px;
	letter-spacing: 0.3px;
	font-weight: 650;
}
header .sub {
	color: var(--muted);
	font-size: 12px;
	margin-top: 4px;
}
.grid {
	display: grid;
	grid-template-columns: 0.8fr 1.2fr;
	gap: 14px;
}
@media (max-width: 980px) {
	.grid {
		grid-template-columns: 1fr;
	}
}
.panel {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 60%), var(--panel);
	border: 1px solid var(--border);
	border-radius: 12px;
	overflow: hidden;
}
.panel .hd {
	padding: 12px 12px 10px;
	border-bottom: 1px solid var(--border);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.panel .hd .title {
	font-weight: 650;
	font-size: 13px;
	color: var(--text);
}
.panel .hd .hint {
	color: var(--muted);
	font-size: 12px;
}
textarea {
	width: 100%;
	min-height: 420px;
	resize: vertical;
	border: 0;
	outline: 0;
	background: var(--panel2);
	color: var(--text);
	padding: 12px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
	font-size: 13px;
	line-height: 1.45;
	tab-size: 2;
}
.actions {
	display: flex;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
}
button {
	border: 1px solid var(--border);
	background: rgba(255, 255, 255, 0.03);
	color: var(--text);
	padding: 8px 12px;
	border-radius: 10px;
	cursor: pointer;
	font-weight: 650;
	font-size: 13px;
}
button:hover {
	border-color: rgba(111, 182, 255, 0.6);
}
button.primary {
	border-color: rgba(111, 182, 255, 0.6);
	background: rgba(111, 182, 255, 0.12);
}
.pill {
	border: 1px solid var(--border);
	color: var(--muted);
	border-radius: 999px;
	padding: 6px 10px;
	font-size: 12px;
	display: flex;
	align-items: center;
	gap: 8px;
}
.pill b {
	color: var(--text);
}
.result {
	padding: 12px;
}
.result .status {
	font-weight: 750;
	letter-spacing: 0.2px;
}
.status.good {
	color: var(--good);
}
.status.bad {
	color: var(--bad);
}
.status.warn {
	color: var(--warn);
}
.result pre {
	margin: 10px 0 0;
	padding: 10px;
	background: rgba(0, 0, 0, 0.25);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 10px;
	overflow: auto;
	max-height: 240px;
	color: var(--text);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
	font-size: 12px;
	line-height: 1.35;
}
table {
	width: 100%;
	border-collapse: collapse;
}
thead th {
	position: sticky;
	top: 0;
	background: rgba(17, 24, 35, 0.92);
	backdrop-filter: blur(6px);
	border-bottom: 1px solid var(--border);
	font-size: 12px;
	text-align: left;
	padding: 10px 10px;
	color: var(--muted);
	font-weight: 700;
}
tbody td {
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	padding: 9px 10px;
	font-size: 12px;
	vertical-align: top;
}
tbody tr:hover td {
	background: rgba(111, 182, 255, 0.06);
}
.lexeme {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
	color: var(--text);
	white-space: pre-wrap;
	word-break: break-word;
}
.tok {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.tag {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: rgba(255, 255, 255, 0.03);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.2px;
}
.tag.kw {
	border-color: rgba(111, 182, 255, 0.25);
	color: rgba(111, 182, 255, 0.95);
}
.tag.id {
	border-color: rgba(255, 204, 102, 0.25);
	color: rgba(255, 204, 102, 0.95);
}
.tag.num {
	border-color: rgba(76, 212, 127, 0.25);
	color: rgba(76, 212, 127, 0.95);
}
.tag.str {
	border-color: rgba(255, 91, 110, 0.28);
	color: rgba(255, 91, 110, 0.95);
}
.tag.op {
	border-color: rgba(159, 176, 199, 0.25);
	color: rgba(159, 176, 199, 0.95);
}
.tag.sym {
	border-color: rgba(159, 176, 199, 0.25);
	color: rgba(159, 176, 199, 0.95);
}
.tag.eof {
	border-color: rgba(159, 176, 199, 0.15);
	color: rgba(159, 176, 199, 0.85);
}
.tableWrap {
	max-height: 420px;
	overflow: auto;
}

.pt-wrap {
	margin-top: 10px;
	padding: 10px;
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, 0.06);
	background: rgba(0, 0, 0, 0.18);
	max-height: 320px;
	overflow: auto;
}
.pt-title {
	font-weight: 800;
	font-size: 12px;
	color: var(--muted);
	margin-bottom: 8px;
}
.pt-root {
	margin: 0;
	padding: 0;
}
.pt-node {
	margin: 3px 0;
	list-style: none;
}
.pt-label {
	display: inline-block;
	padding: 2px 6px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 8px;
	background: rgba(0, 0, 0, 0.18);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
	font-size: 12px;
}
.pt-label.pt-parent {
	cursor: pointer;
}
.pt-children {
	margin: 6px 0 0 14px;
	padding: 0 0 0 10px;
	border-left: 1px dashed rgba(255, 255, 255, 0.18);
}