/* ---------------------------------------------------------
       Minimal, framework‑free IDE aesthetic. Everything here is
       self‑contained and easy to drop into FastAPI static hosting.
       --------------------------------------------------------- */

		:root {
			--bg: #0f1115;
			/* dark default */
			--panel: #0b0d12;
			--card: #11141a;
			--muted: #8b93a7;
			--text: #e6edf3;
			--accent: #7aa2f7;
			--accent-2: #89f0c9;
			--danger: #ff6b6b;
			--shadow: 0 8px 24px rgba(0, 0, 0, .35);
			--border: #232833;
			--code-green: #9ce5a2;
			--code-blue: #7aa2f7;
			--code-purple: #c99cff;
			--code-yellow: #ffd479;
			--radius: 16px;
		}

		/* Light theme overrides */
		html.light {
			--bg: #f7f8fb;
			--panel: #ffffff;
			--card: #ffffff;
			--muted: #5a6375;
			--text: #0d1017;
			--accent: #3366ff;
			--accent-2: #14b8a6;
			--danger: #d94848;
			--shadow: 0 8px 24px rgba(0, 0, 0, .08);
			--border: #e6eaf2;
		}

		/* Auto theme (follows system) */
		@media (prefers-color-scheme: light) {
			html[data-theme="auto"] {
				--bg: #f7f8fb;
				--panel: #ffffff;
				--card: #ffffff;
				--muted: #5a6375;
				--text: #0d1017;
				--accent: #3366ff;
				--accent-2: #14b8a6;
				--danger: #d94848;
				--shadow: 0 8px 24px rgba(0, 0, 0, .08);
				--border: #e6eaf2;
			}
		}

		* {
			box-sizing: border-box;
		}

		html,
		body {
			height: 100%;
		}

		body {
			margin: 0;
			background: var(--bg);
			color: var(--text);
			font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
		}

		a {
			color: var(--accent);
			text-decoration: none;
		}

		a:hover {
			text-decoration: underline;
		}

		.muted {
			color: var(--muted);
		}

		.layout {
			display: grid;
			grid-template-rows: auto 1fr auto;
			grid-template-areas:
				"topbar"
				"main"
				"status";
			min-height: 100vh;
		}

		.brand {
			display: flex;
			gap: 12px;
			align-items: center;
		}

		.avatar {
			width: 48px;
			height: 48px;
			border-radius: 10px;
			background: linear-gradient(135deg, var(--accent), var(--accent-2));
			display: grid;
			place-items: center;
			color: #fff;
			font-weight: 700;
		}

		.brand h1 {
			font-size: 16px;
			line-height: 1.1;
			margin: 0;
		}

		.brand small {
			color: var(--muted);
			display: block;
		}

		/* Top bar */
		.topbar {
			grid-area: topbar;
			border-bottom: 1px solid var(--border);
			display: flex;
			align-items: center;
			gap: 8px;
			background: var(--panel);
			padding: 8px 12px;
			position: sticky;
			top: 0;
			z-index: 10;
		}

		.window-dots {
			display: flex;
			gap: 6px;
			margin-right: 6px;
		}

		.window-dots span {
			width: 10px;
			height: 10px;
			border-radius: 50%;
			display: inline-block;
		}

		.window-dots .red {
			background: var(--danger);
		}

		.window-dots .yellow {
			background: #f6c74f;
		}

		.window-dots .green {
			background: #33d17a;
		}

		.actions {
			margin-left: auto;
			display: flex;
			align-items: center;
			gap: 8px;
		}

		.btn {
			border: 1px solid var(--border);
			background: var(--card);
			color: var(--text);
			padding: 8px 10px;
			border-radius: 10px;
			cursor: pointer;
		}

		.btn:hover {
			filter: brightness(1.05);
		}

		.topnav .brand h1 {
			font-size: 16px;
			line-height: 1.1;
			margin: 0;
		}

		.topnav .brand small {
			color: var(--muted);
			display: block;
		}

		.mainnav {
			display: flex;
			align-items: center;
			gap: 10px;
			margin-left: 12px;
		}

		.nav-menu {
			display: flex;
			align-items: center;
			gap: 10px;
		}

		.nav-link {
			padding: 8px 10px;
			border-radius: 10px;
			color: var(--text);
			text-decoration: none;
			border: 1px solid transparent;
			background: transparent;
			cursor: pointer;
			font: inherit;
		}

		.nav-link:hover {
			background: rgba(127, 127, 127, .08);
			text-decoration: none;
		}

		.nav-dropdown {
			position: relative;
		}

		.nav-panel {
			display: none;
			position: absolute;
			top: 100%;
			left: 0;
			min-width: 220px;
			background: var(--card);
			border: 1px solid var(--border);
			border-radius: 12px;
			box-shadow: var(--shadow);
			padding: 8px;
			z-index: 20;
		}

		.nav-dropdown:hover .nav-panel,
		.nav-dropdown:focus-within .nav-panel {
			display: grid;
			gap: 4px;
		}

		.nav-item {
			padding: 8px 10px;
			border-radius: 10px;
			color: var(--text);
			text-decoration: none;
		}

		.nav-item:hover {
			background: rgba(127, 127, 127, .08);
			text-decoration: none;
		}

		.nav-toggle {
			display: none;
		}

		/* Main editor panel */
		.main {
			grid-area: main;
			padding: 16px;
			background:
				linear-gradient(180deg, rgba(127, 127, 127, .05), rgba(127, 127, 127, 0) 140px);
		}

		.editor {
			background: var(--card);
			border: 1px solid var(--border);
			border-radius: var(--radius);
			box-shadow: var(--shadow);
			overflow: hidden;
		}

		.editor-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 10px 12px;
			border-bottom: 1px solid var(--border);
			background: linear-gradient(180deg, rgba(255, 255, 255, .02), rgba(0, 0, 0, .02));
		}

		.editor-title {
			font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
		}

		.code {
			padding: 18px;
			font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
			font-size: 14px;
			line-height: 1.7;
			overflow: auto;
			white-space: pre-wrap;
		}

		.code .k {
			color: var(--code-purple);
		}

		.code .s {
			color: var(--code-yellow);
		}

		.code .p {
			color: var(--code-blue);
		}

		.code .c {
			color: var(--muted);
		}

		.code .g {
			color: var(--code-green);
		}

		/* Cards for sections */
		.grid {
			display: grid;
			grid-template-columns: repeat(12, 1fr);
			gap: 16px;
			margin-top: 16px;
		}

		.card {
			grid-column: span 12;
			background: var(--card);
			border: 1px solid var(--border);
			border-radius: var(--radius);
			box-shadow: var(--shadow);
			padding: 16px;
		}

		.card h2 {
			margin: 0 0 12px;
			font-size: 18px;
		}

		.hero {
			display: flex;
			gap: 16px;
			align-items: center;
			justify-content: space-between;
		}

		.hero h2 {
			font-size: 22px;
			margin-bottom: 8px;
		}

		.hero-actions {
			display: flex;
			gap: 8px;
			flex-wrap: wrap;
		}

		.hero-stats {
			display: grid;
			gap: 10px;
			min-width: 180px;
		}

		.metric-row {
			display: grid;
			gap: 10px;
			grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
			margin: 8px 0 12px;
		}

		.metric {
			border: 1px solid var(--border);
			border-radius: 12px;
			padding: 10px;
			background: rgba(127, 127, 127, .05);
		}

		.metric-value {
			font-weight: 700;
		}

		.metric-label {
			color: var(--muted);
			font-size: 12px;
		}

		.tool-grid {
			display: grid;
			gap: 12px;
			grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
		}

		.tool-card {
			border: 1px solid var(--border);
			border-radius: 14px;
			padding: 12px;
			display: grid;
			gap: 8px;
			background: rgba(127, 127, 127, .04);
			color: var(--text);
			text-decoration: none;
		}

		.tool-card:hover {
			background: rgba(127, 127, 127, .08);
			text-decoration: none;
		}

		.thumb {
			width: 40px;
			height: 40px;
			border-radius: 10px;
			display: grid;
			place-items: center;
			background: linear-gradient(135deg, var(--accent), var(--accent-2));
			color: #fff;
			font-weight: 700;
		}

		.tags {
			display: flex;
			flex-wrap: wrap;
			gap: 6px;
		}

		.filter-btn {
			background: rgba(127, 127, 127, .08);
			border: 1px solid var(--border);
			color: var(--text);
			cursor: pointer;
		}

		.filter-btn.active {
			outline: 1px solid var(--accent);
			background: rgba(122, 162, 247, .16);
		}

		.status-pill {
			display: inline-block;
			padding: 2px 8px;
			border-radius: 999px;
			border: 1px solid var(--border);
			font-size: 12px;
			color: var(--muted);
			width: fit-content;
		}

		.chart-placeholder {
			border: 1px dashed var(--border);
			border-radius: 14px;
			padding: 18px;
			text-align: center;
			color: var(--muted);
		}

		.section-header {
			display: flex;
			align-items: center;
			gap: 10px;
			justify-content: space-between;
			margin-bottom: 12px;
		}

		@media (min-width: 860px) {
			.card.split-7 {
				grid-column: span 7;
			}

			.card.split-5 {
				grid-column: span 5;
			}
		}

		@media (max-width: 860px) {
			.hero {
				flex-direction: column;
				align-items: flex-start;
			}

			.nav-toggle {
				display: inline-flex;
			}

			.nav-menu {
				display: none;
				position: absolute;
				top: 100%;
				left: 0;
				right: 0;
				background: var(--panel);
				border-bottom: 1px solid var(--border);
				padding: 10px 12px;
				flex-direction: column;
				align-items: stretch;
				gap: 6px;
			}

			.nav-menu.open {
				display: flex;
			}

			.mainnav {
				flex: 1;
			}

			.topbar {
				flex-wrap: wrap;
				gap: 10px;
			}

			.nav-panel {
				position: static;
				box-shadow: none;
				border: 1px solid var(--border);
				margin-top: 6px;
			}

			.card {
				padding: 12px;
			}

			#experience .item {
				padding: 10px;
			}
		}

		.stack {
			display: grid;
			gap: 10px;
		}

		.kv {
			display: grid;
			grid-template-columns: 140px 1fr;
			gap: 8px;
			align-items: start;
		}

		.badge {
			display: inline-block;
			padding: 6px 10px;
			border-radius: 999px;
			background: rgba(122, 162, 247, .16);
			border: 1px solid var(--border);
			margin: 4px 6px 0 0;
		}

		.timeline {
			display: grid;
			gap: 16px;
		}

		.item {
			border: 1px dashed var(--border);
			border-radius: 14px;
			padding: 12px;
		}

		.item h3 {
			margin: 0 0 6px;
			font-size: 16px;
		}

		.item small {
			color: var(--muted);
		}

		/* Status bar */
		.status {
			grid-area: status;
			border-top: 1px solid var(--border);
			background: var(--panel);
			display: flex;
			gap: 16px;
			align-items: center;
			padding: 8px 12px;
			color: var(--muted);
			font-size: 13px;
			flex-wrap: wrap;
		}

		/* Footer spacer for future portfolio */
		#portfolio {
			opacity: .5;
			border: 2px dashed var(--border);
			text-align: center;
			padding: 24px;
			border-radius: 16px;
		}