:root {
	--bg: #0b0f17;
	--bg-glow: #0e1626;
	--panel: #131a26;
	--panel-2: #1a2434;
	--border: #232f42;
	--text: #e8eef6;
	--muted: #8a98ad;
	--accent: #29c5f6;     /* Go-cyan */
	--accent-2: #007d9c;
	--accent-soft: rgba(41, 197, 246, 0.12);
	--ok: #3fb950;
	--fail: #f0664f;
	--warn: #e3b341;
	--purple: #c98bff;
	--mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
	--sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
	--shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--sans);
	color: var(--text);
	line-height: 1.6;
	background:
		radial-gradient(900px 500px at 85% -10%, rgba(41, 197, 246, 0.10), transparent 60%),
		radial-gradient(700px 500px at 0% 0%, rgba(201, 139, 255, 0.07), transparent 55%),
		var(--bg);
	background-attachment: fixed;
	-webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; transition: color .15s; }
a:hover { color: #6fdcff; }
h1, h2, h3 { line-height: 1.25; letter-spacing: -0.01em; }
.muted { color: var(--muted); }
.small { font-size: 0.85rem; }
.spacer { flex: 1; }
.hidden { display: none; }

/* topbar */
.topbar {
	position: sticky; top: 0; z-index: 10;
	display: flex; align-items: center; gap: 1rem;
	padding: 0.85rem 1.4rem;
	background: rgba(15, 21, 33, 0.8);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--border);
}
.brand { font-weight: 800; font-size: 1.12rem; color: var(--text); letter-spacing: -0.02em; }
.link { color: var(--accent); font-size: 0.9rem; background: none; border: none; cursor: pointer; padding: 0; font-family: inherit; }
.link:hover { color: #6fdcff; }

/* layout */
.container { max-width: 840px; margin: 0 auto; padding: 2rem 1.3rem 5rem; }
.centered { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.card {
	background: linear-gradient(180deg, var(--panel), #111824);
	border: 1px solid var(--border);
	border-radius: 16px;
	padding: 1.6rem;
	margin-bottom: 1.3rem;
	box-shadow: var(--shadow);
}

/* login */
.login { width: 380px; max-width: 100%; text-align: center; }
.login h1 { margin: 0 0 0.2rem; font-size: 2rem; }
.login form { display: flex; flex-direction: column; gap: 0.8rem; margin: 1.5rem 0 1rem; text-align: left; }
.login label { font-size: 0.9rem; color: var(--muted); }
input {
	background: var(--panel-2); color: var(--text);
	border: 1px solid var(--border); border-radius: 10px;
	padding: 0.8rem 0.9rem; font-size: 1rem; width: 100%; font-family: inherit;
	transition: border-color .15s, box-shadow .15s;
}
input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.btn {
	display: inline-flex; align-items: center; gap: 0.4rem;
	background: linear-gradient(180deg, #34cffb, var(--accent));
	color: #062430; border: none; border-radius: 10px;
	padding: 0.7rem 1.3rem; font-weight: 700; font-size: 0.95rem;
	cursor: pointer; font-family: inherit;
	box-shadow: 0 4px 14px rgba(41, 197, 246, 0.25);
	transition: transform .12s, box-shadow .12s, filter .12s;
}
.btn:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(41, 197, 246, 0.35); }
.btn:active { transform: translateY(0); }
.btn:disabled { filter: grayscale(.4) brightness(.8); cursor: default; transform: none; box-shadow: none; }

/* dashboard */
.overview h1 { margin: 0 0 0.2rem; font-size: 1.7rem; }
.progress { height: 12px; background: var(--panel-2); border-radius: 99px; overflow: hidden; margin: 1rem 0 0.4rem; border: 1px solid var(--border); }
.progress-bar { height: 100%; background: linear-gradient(90deg, var(--accent-2), var(--accent)); border-radius: 99px; transition: width .5s ease; box-shadow: 0 0 12px rgba(41,197,246,.5); }
.percent { margin: 0 0 1.2rem; font-weight: 700; color: var(--muted); }
.percent b, .overview .percent { }

.module-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 0.5rem; }
.module-head h2 { margin: 0; font-size: 1.2rem; }
.lessons { list-style: none; margin: 0; padding: 0; }
.lesson-row {
	display: flex; align-items: center; gap: 0.8rem;
	padding: 0.7rem 0.8rem; border-radius: 10px; color: var(--text);
	border: 1px solid transparent; transition: background .15s, border-color .15s, transform .1s;
}
.lesson-row:hover { background: var(--panel-2); border-color: var(--border); transform: translateX(2px); }
.lesson-title { flex: 1; font-weight: 500; }
.dot { width: 11px; height: 11px; border-radius: 99px; background: #33405a; flex: none; box-shadow: 0 0 0 3px rgba(255,255,255,0.02); }
.status-passed .dot { background: var(--ok); box-shadow: 0 0 8px rgba(63,185,80,.6); }
.status-attempted .dot { background: var(--fail); box-shadow: 0 0 8px rgba(240,102,79,.5); }

.badge {
	font-size: 0.7rem; font-weight: 600; padding: 0.15rem 0.55rem; border-radius: 99px;
	background: var(--panel-2); color: var(--muted); border: 1px solid var(--border);
	text-transform: lowercase; letter-spacing: 0.02em;
}
.type-go { color: var(--accent); border-color: rgba(41,197,246,.4); background: rgba(41,197,246,.08); }
.type-shell { color: var(--purple); border-color: rgba(201,139,255,.4); background: rgba(201,139,255,.08); }
.type-reading { color: var(--warn); border-color: rgba(227,179,65,.4); background: rgba(227,179,65,.08); }
.status-pill { text-transform: none; }
.status-pill.status-passed { color: var(--ok); border-color: rgba(63,185,80,.5); background: rgba(63,185,80,.08); }
.status-pill.status-attempted { color: var(--fail); border-color: rgba(240,102,79,.5); background: rgba(240,102,79,.08); }
.status-pill.status-not_started { }

/* lesson split view */
.split { display: flex; min-height: calc(100vh - 58px); }
.pane { padding: 2rem 2.2rem; overflow-y: auto; }
.reading { flex: 1.1; border-right: 1px solid var(--border); max-width: 56%; }
.work {
	flex: 1; display: flex; flex-direction: column;
	background: linear-gradient(180deg, #10161f, #0d121a);
}
.lesson-head { display: flex; gap: 0.5rem; margin-bottom: 0.8rem; }
.reading h1 { margin: 0.1rem 0 1.2rem; font-size: 1.7rem; }
.nav { display: flex; align-items: center; margin-top: 2.5rem; padding-top: 1.2rem; border-top: 1px solid var(--border); }

.editor-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.6rem; }
.editor {
	font-family: var(--mono); font-size: 0.9rem; min-height: 340px; resize: vertical;
	line-height: 1.6; tab-size: 4; flex: 1;
	white-space: pre; overflow-wrap: normal; overflow-x: auto;
	background: #0a0e15; color: #e6edf3;
	border: 1px solid var(--border); border-radius: 12px; padding: 1rem 1.1rem;
	transition: border-color .15s, box-shadow .15s;
}
.editor:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.actions { display: flex; align-items: center; gap: 1.2rem; margin: 1rem 0; }

.result { border-radius: 12px; border: 1px solid var(--border); overflow: hidden; margin-top: 0.4rem; }
.result.ok { border-color: rgba(63,185,80,.5); }
.result.fail { border-color: rgba(240,102,79,.5); }
.result-status { padding: 0.7rem 1rem; font-weight: 700; background: var(--panel-2); }
.result.ok .result-status { color: var(--ok); background: rgba(63,185,80,.08); }
.result.fail .result-status { color: var(--fail); background: rgba(240,102,79,.08); }
.result pre {
	margin: 0; padding: 1rem; font-family: var(--mono); font-size: 0.82rem;
	white-space: pre-wrap; word-break: break-word; max-height: 340px; overflow-y: auto;
	color: #c9d4e3; background: #0a0e15;
}

/* markdown */
.md { font-size: 1rem; }
.md h2 { margin-top: 1.8rem; font-size: 1.3rem; }
.md h3 { margin-top: 1.3rem; font-size: 1.08rem; }
.md p { margin: 0.8rem 0; }
.md > p:first-child { font-size: 1.05rem; color: #d6dfeb; }
.md code { font-family: var(--mono); background: var(--panel-2); padding: 0.12rem 0.4rem; border-radius: 6px; font-size: 0.86em; color: #ffd9a8; border: 1px solid var(--border); }
.md pre { border-radius: 12px; padding: 1rem 1.1rem; overflow-x: auto; border: 1px solid var(--border); font-size: 0.86rem; line-height: 1.55; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02); }
.md pre code { background: none; padding: 0; border: none; color: inherit; font-size: 1em; }
.md ul, .md ol { padding-left: 1.5rem; }
.md li { margin: 0.3rem 0; }
.md blockquote { margin: 1rem 0; padding: 0.6rem 1.1rem; border-left: 3px solid var(--accent); background: var(--accent-soft); border-radius: 0 8px 8px 0; color: #cfe9f5; }
.md blockquote p { margin: 0.2rem 0; }
.md table { border-collapse: collapse; width: 100%; margin: 0.8rem 0; font-size: 0.92rem; }
.md td, .md th { border: 1px solid var(--border); padding: 0.45rem 0.75rem; text-align: left; }
.md th { background: var(--panel-2); }
.md a { text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 760px) {
	.split { flex-direction: column; }
	.reading { max-width: none; border-right: none; border-bottom: 1px solid var(--border); }
	.pane { padding: 1.4rem 1.2rem; }
}