Blame · Line-by-line history

`layout.tsx`

Each line is annotated with the commit that last touched it. Click any SHA to jump to that commit and see the surrounding change.

layout.tsxBlame2750 lines · 4 contributors

Normal view Raw

fc1817aClaude	1	import type { FC, PropsWithChildren } from "hono/jsx";
06d5ffeClaude	2	import type { User } from "../db/schema";
	3	import { hljsThemeCss } from "../lib/highlight";
45e31d0Claude	4	import { clientJs } from "./client-js";
05cdb85Claude	5	import { getBuildInfo } from "../lib/build-info";
fc1817aClaude	6
06d5ffeClaude	7	export const Layout: FC<
3ef4c9dClaude	8	PropsWithChildren<{
	9	title?: string;
	10	user?: User \| null;
	11	notificationCount?: number;
6fc53bdClaude	12	theme?: "dark" \| "light";
5f2e749Claude	13	// Block L10 — additive SEO + Open Graph fields. All optional;
	14	// omission preserves the prior render exactly (regression-safe).
	15	fullTitle?: string;
	16	description?: string;
	17	ogTitle?: string;
	18	ogDescription?: string;
	19	ogType?: string;
	20	twitterCard?: "summary" \| "summary_large_image";
c63b860Claude	21	// Block O3 — site-wide footer banner stripe. When non-empty,
	22	// renders below the footer-bottom row; wired from
	23	// admin.system_flags.site_banner_text.
	24	siteBannerText?: string;
	25	siteBannerLevel?: "info" \| "warn" \| "error";
3ef4c9dClaude	26	}>
5f2e749Claude	27	> = ({
	28	children,
	29	title,
	30	user,
	31	notificationCount,
	32	theme,
	33	fullTitle,
	34	description,
	35	ogTitle,
	36	ogDescription,
	37	ogType,
	38	twitterCard,
c63b860Claude	39	siteBannerText,
	40	siteBannerLevel,
5f2e749Claude	41	}) => {
6fc53bdClaude	42	const initialTheme = theme === "light" ? "light" : "dark";
05cdb85Claude	43	const build = getBuildInfo();
5f2e749Claude	44	// L10 — when `fullTitle` is provided, use it verbatim (no " — gluecron"
	45	// suffix); otherwise fall back to the existing `title` + suffix behaviour.
	46	const renderedTitle = fullTitle
	47	? fullTitle
	48	: title
	49	? `${title} — gluecron`
	50	: "gluecron";
fc1817aClaude	51	return (
6fc53bdClaude	52	<html lang="en" data-theme={initialTheme}>
fc1817aClaude	53	<head>
	54	<meta charset="UTF-8" />
	55	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
eae38d1Claude	56	<meta name="theme-color" content="#0d1117" />
	57	<link rel="manifest" href="/manifest.webmanifest" />
	58	<link rel="icon" type="image/svg+xml" href="/icon.svg" />
5f2e749Claude	59	<title>{renderedTitle}</title>
	60	{description && <meta name="description" content={description} />}
	61	{(ogTitle \|\| fullTitle \|\| title) && (
	62	<meta property="og:title" content={ogTitle ?? fullTitle ?? renderedTitle} />
	63	)}
	64	{(ogDescription \|\| description) && (
	65	<meta
	66	property="og:description"
	67	content={ogDescription ?? description ?? ""}
	68	/>
	69	)}
	70	{ogType && <meta property="og:type" content={ogType} />}
	71	{twitterCard && <meta name="twitter:card" content={twitterCard} />}
fa880f2Claude	72	<script dangerouslySetInnerHTML={{ __html: themeInitScript }} />
	73	<style dangerouslySetInnerHTML={{ __html: css }} />
	74	<style dangerouslySetInnerHTML={{ __html: hljsThemeCss }} />
fc1817aClaude	75	</head>
	76	<body>
4a52a98Claude	77	<div class="prelaunch-banner" role="status" aria-live="polite">
	78	Pre-launch — Gluecron is in final validation. Public signups
	79	and git hosting for non-owner users open after launch review.
	80	</div>
cd4f63bTest User	81	{/* Block Q3 — Playground banner. Renders only when the active
	82	user is a playground account with a future expiry; the small
	83	inline script counts down once per minute. Strip is dismissible
	84	per-page-load (re-appears on next nav) — gentle, not noisy. */}
	85	{user && (user as any).isPlayground && (user as any).playgroundExpiresAt && (
	86	<div
	87	class="playground-banner"
	88	role="status"
	89	aria-live="polite"
	90	data-playground-expires={
	91	((user as any).playgroundExpiresAt instanceof Date
	92	? (user as any).playgroundExpiresAt.toISOString()
	93	: String((user as any).playgroundExpiresAt))
	94	}
	95	>
	96	<span class="playground-banner-icon" aria-hidden="true">{"\u{1F3AE}"}</span>
	97	<span class="playground-banner-text">
	98	Playground account —{" "}
	99	<span class="playground-banner-countdown">expires soon</span>.{" "}
	100	<a href="/play/claim" class="playground-banner-cta">
	101	Save your work →
	102	</a>
	103	</span>
	104	<button
	105	type="button"
	106	class="playground-banner-dismiss"
	107	aria-label="Dismiss"
	108	data-playground-dismiss="1"
	109	>
	110	{"×"}
	111	</button>
	112	<script
	113	dangerouslySetInnerHTML={{
	114	__html: /* js */ `
	115	(function () {
	116	var el = document.currentScript && document.currentScript.parentElement;
	117	if (!el) return;
	118	var iso = el.getAttribute('data-playground-expires');
	119	if (!iso) return;
	120	var target = Date.parse(iso);
	121	if (isNaN(target)) return;
	122	var out = el.querySelector('.playground-banner-countdown');
	123	function render() {
	124	var ms = target - Date.now();
	125	if (!out) return;
	126	if (ms <= 0) { out.textContent = 'expired'; return; }
	127	var mins = Math.floor(ms / 60000);
	128	var hrs = Math.floor(mins / 60);
	129	if (hrs > 1) out.textContent = hrs + ' hours left';
	130	else if (hrs === 1) out.textContent = '1 hour left';
	131	else if (mins > 1) out.textContent = mins + ' minutes left';
	132	else out.textContent = 'less than a minute left';
	133	}
	134	render();
	135	setInterval(render, 60000);
	136	var dismiss = el.querySelector('[data-playground-dismiss="1"]');
	137	if (dismiss) {
	138	dismiss.addEventListener('click', function () {
	139	el.style.display = 'none';
	140	});
	141	}
	142	})();
	143	`,
	144	}}
	145	/>
	146	</div>
	147	)}
fc1817aClaude	148	<header>
	149	<nav>
	150	<a href="/" class="logo">
	151	gluecron
	152	</a>
3ef4c9dClaude	153	<div class="nav-search">
001af43Claude	154	<form method="get" action="/search">
3ef4c9dClaude	155	<input
	156	type="search"
	157	name="q"
	158	placeholder="Search (press /)"
	159	aria-label="Search"
	160	/>
	161	</form>
	162	</div>
06d5ffeClaude	163	<div class="nav-right">
f764c07Claude	164	{/* Block N3 — site-admin platform-deploy status pill. Hidden
	165	by default; revealed client-side once /admin/deploys/latest.json
	166	responds 200 (non-admins get 401/403 and the pill stays
	167	hidden). Subscribes to the `platform:deploys` SSE topic
	168	for live updates. See `deployPillScript` below. */}
	169	{user && (
	170	<a
	171	id="deploy-pill"
	172	href="/admin/deploys"
	173	class="nav-deploy-pill"
	174	style="display:none"
	175	aria-label="Platform deploy status"
	176	title="Platform deploy status"
	177	>
	178	<span class="deploy-pill-dot" />
	179	<span class="deploy-pill-text">Deploys</span>
	180	</a>
	181	)}
6fc53bdClaude	182	<a
	183	href="/theme/toggle"
	184	class="nav-link nav-theme"
	185	title="Toggle theme"
	186	aria-label="Toggle theme"
	187	>
	188	<span class="theme-icon-dark">{"\u263E"}</span>
	189	<span class="theme-icon-light">{"\u2600"}</span>
	190	</a>
c81ab7aClaude	191	<a href="/explore" class="nav-link">
	192	Explore
	193	</a>
06d5ffeClaude	194	{user ? (
	195	<>
f1ab587Claude	196	<a href="/dashboard" class="nav-link" style="font-weight: 600">
	197	Dashboard
	198	</a>
bdbd0deClaude	199	<a href="/import" class="nav-link">
	200	Import
	201	</a>
06d5ffeClaude	202	<a href="/new" class="btn btn-sm btn-primary">
	203	+ New
	204	</a>
	205	<a href={`/${user.username}`} class="nav-user">
	206	{user.displayName \|\| user.username}
	207	</a>
	208	<a href="/settings" class="nav-link">
	209	Settings
	210	</a>
	211	<a href="/logout" class="nav-link">
	212	Sign out
	213	</a>
	214	</>
	215	) : (
	216	<>
	217	<a href="/login" class="nav-link">
	218	Sign in
	219	</a>
	220	<a href="/register" class="btn btn-sm btn-primary">
	221	Register
	222	</a>
	223	</>
	224	)}
	225	</div>
fc1817aClaude	226	</nav>
	227	</header>
45e31d0Claude	228	<main id="main-content">{children}</main>
fc1817aClaude	229	<footer>
958d26aClaude	230	<div class="footer-inner">
	231	<div class="footer-brand">
	232	<a href="/" class="logo">gluecron</a>
	233	<p class="footer-tag">
	234	AI-native code intelligence. Self-hosted git, automated CI,
	235	push-time gates. Software that ships itself.
	236	</p>
	237	</div>
	238	<div class="footer-links">
	239	<div class="footer-col">
	240	<div class="footer-col-title">Product</div>
b0148e9Claude	241	<a href="/features">Features</a>
	242	<a href="/pricing">Pricing</a>
958d26aClaude	243	<a href="/explore">Explore</a>
	244	<a href="/marketplace">Marketplace</a>
	245	</div>
	246	<div class="footer-col">
	247	<div class="footer-col-title">Platform</div>
b0148e9Claude	248	<a href="/help">Quickstart</a>
958d26aClaude	249	<a href="/status">Status</a>
	250	<a href="/api/graphql">GraphQL</a>
	251	<a href="/mcp">MCP server</a>
	252	</div>
	253	<div class="footer-col">
b0148e9Claude	254	<div class="footer-col-title">Company</div>
	255	<a href="/about">About</a>
958d26aClaude	256	<a href="/terms">Terms</a>
	257	<a href="/privacy">Privacy</a>
	258	<a href="/acceptable-use">Acceptable use</a>
	259	</div>
	260	</div>
	261	</div>
	262	<div class="footer-bottom">
	263	<span>© {new Date().getFullYear()} gluecron</span>
05cdb85Claude	264	<span class="footer-build" title={`commit ${build.shaFull}\nbuilt ${build.builtAt}`}>
	265	<span class="footer-build-dot" aria-hidden="true" />
	266	{build.sha} · {build.branch}
	267	</span>
36b4cbdClaude	268	</div>
c63b860Claude	269	{siteBannerText ? (
	270	<div
	271	class={`footer-banner footer-banner-${siteBannerLevel \|\| "info"}`}
	272	role="status"
	273	aria-live="polite"
	274	>
	275	{siteBannerText}
	276	</div>
	277	) : null}
fc1817aClaude	278	</footer>
05cdb85Claude	279	{/* Live update poller — checks /api/version every 15s, prompts
	280	reload when the running sha changes. Pure progressive-
	281	enhancement; degrades to nothing if JS is off. */}
	282	<div
	283	id="version-banner"
	284	style="display:none;position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:9999;background:var(--bg-elevated);border:1px solid rgba(140,109,255,0.45);border-radius:9999px;padding:8px 14px 8px 14px;font-size:13px;color:var(--text-strong);box-shadow:0 12px 28px -8px rgba(0,0,0,0.55),0 0 24px -6px rgba(140,109,255,0.40);font-family:var(--font-sans);align-items:center;gap:10px"
	285	>
	286	<span style="display:inline-flex;align-items:center;gap:8px">
	287	<span style="width:8px;height:8px;border-radius:50%;background:#34d399;box-shadow:0 0 10px rgba(52,211,153,0.6)" />
	288	<span>New version available</span>
	289	</span>
	290	<button
	291	type="button"
	292	id="version-banner-reload"
	293	style="background:linear-gradient(135deg,#8c6dff 0%,#36c5d6 100%);color:#fff;border:0;border-radius:9999px;padding:5px 12px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit"
	294	>
	295	Reload
	296	</button>
	297	</div>
fa880f2Claude	298	<script dangerouslySetInnerHTML={{ __html: versionPollerScript }} />
f764c07Claude	299	{/* Block N3 — site-admin deploy status pill (script-only). The pill
	300	container is rendered above for authed users; this script bootstraps
	301	it by fetching /admin/deploys/latest.json. Non-admins get 401/403
	302	and the pill stays display:none — zero leak. */}
	303	{user && (
	304	<script dangerouslySetInnerHTML={{ __html: deployPillScript }} />
	305	)}
699e5c7Claude	306	{/* Block I4 — Command palette shell (hidden by default) */}
	307	<div
	308	id="cmdk-backdrop"
	309	style="display:none;position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:9998"
	310	/>
	311	<div
	312	id="cmdk-panel"
	313	style="display:none;position:fixed;top:10%;left:50%;transform:translateX(-50%);width:min(560px,92vw);background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 12px 32px rgba(0,0,0,0.4);z-index:9999;overflow:hidden"
	314	>
	315	<input
	316	id="cmdk-input"
	317	type="text"
	318	placeholder="Type a command..."
	319	aria-label="Command palette"
	320	style="width:100%;padding:12px 16px;background:transparent;color:var(--text);border:0;border-bottom:1px solid var(--border);outline:none;font-size:14px"
	321	/>
	322	<div id="cmdk-list" style="max-height:60vh;overflow-y:auto" />
	323	</div>
fa880f2Claude	324	<script dangerouslySetInnerHTML={{ __html: clientJs }} />
	325	<script dangerouslySetInnerHTML={{ __html: pwaRegisterScript }} />
534f04aClaude	326	{/* Block M2 — smart install banner + push-SW bootstrap. Authed
	327	users only; the banner respects a 3+ visits + 14-day cooldown
	328	heuristic. The push SW is registered on the same gate so we
	329	don't ask anonymous visitors to opt into anything. */}
	330	{user && (
	331	<script
	332	dangerouslySetInnerHTML={{ __html: pwaInstallBannerScript }}
	333	/>
	334	)}
fa880f2Claude	335	<script dangerouslySetInnerHTML={{ __html: navScript }} />
fc1817aClaude	336	</body>
	337	</html>
	338	);
	339	};
	340
05cdb85Claude	341	// Live version poller. Checks /api/version every 15s; if the sha differs
	342	// from the one we booted with, reveal the floating 'New version' pill so
	343	// the user can reload onto the new code without manually refreshing.
	344	const versionPollerScript = `
	345	(function(){
	346	var loadedSha = null;
	347	var banner, btn;
	348	function poll(){
	349	fetch('/api/version', { cache: 'no-store' })
	350	.then(function(r){ return r.ok ? r.json() : null; })
	351	.then(function(j){
	352	if (!j \|\| !j.sha) return;
	353	if (loadedSha === null) { loadedSha = j.sha; return; }
	354	if (j.sha !== loadedSha && banner) {
	355	banner.style.display = 'inline-flex';
	356	}
	357	})
	358	.catch(function(){});
	359	}
	360	function init(){
	361	banner = document.getElementById('version-banner');
	362	btn = document.getElementById('version-banner-reload');
	363	if (btn) btn.addEventListener('click', function(){ window.location.reload(); });
	364	poll();
	365	setInterval(poll, 15000);
	366	}
	367	if (document.readyState === 'loading') {
	368	document.addEventListener('DOMContentLoaded', init);
	369	} else {
	370	init();
	371	}
	372	})();
	373	`;
	374
f764c07Claude	375	// Block N3 — site-admin deploy status pill. Fetches /admin/deploys/latest.json;
	376	// if 200, reveals the pill in the nav and subscribes to the `platform:deploys`
	377	// SSE topic for live status updates. Non-admins get 401/403 and the pill stays
	378	// display:none — there's no leakage of admin-only data to other users.
	379	//
	380	// Pill states (CSS classes on the container drive colour):
	381	// .deploy-pill-success 🟢 "Deployed 12s ago"
	382	// .deploy-pill-progress 🟡 "Deploying… 14s" (pulsing dot)
	383	// .deploy-pill-failed 🔴 "Deploy failed 1m ago"
	384	// .deploy-pill-empty ⚪ "No deploys yet"
	385	//
	386	// Relative-time auto-refreshes every 15s without re-fetching.
	387	export const deployPillScript = `
	388	(function(){
	389	var pill, dot, text;
	390	var state = { latest: null, asOf: null };
	391
	392	function classifyAge(ms){
	393	if (ms < 0) return 'just now';
	394	var s = Math.floor(ms / 1000);
	395	if (s < 5) return 'just now';
	396	if (s < 60) return s + 's ago';
	397	var m = Math.floor(s / 60);
	398	if (m < 60) return m + 'm ago';
	399	var h = Math.floor(m / 60);
	400	if (h < 24) return h + 'h ago';
	401	var d = Math.floor(h / 24);
	402	return d + 'd ago';
	403	}
	404	function elapsed(ms){
	405	if (ms < 0) ms = 0;
	406	var s = Math.floor(ms / 1000);
	407	if (s < 60) return s + 's';
	408	var m = Math.floor(s / 60);
	409	var rem = s - m * 60;
	410	return m + 'm ' + rem + 's';
	411	}
	412
	413	function render(){
	414	if (!pill \|\| !text \|\| !dot) return;
	415	var d = state.latest;
	416	if (!d) {
	417	pill.className = 'nav-deploy-pill deploy-pill-empty';
	418	text.textContent = 'No deploys yet';
	419	pill.style.display = 'inline-flex';
	420	return;
	421	}
	422	pill.style.display = 'inline-flex';
	423	var now = Date.now();
	424	if (d.status === 'in_progress') {
	425	pill.className = 'nav-deploy-pill deploy-pill-progress';
	426	var started = Date.parse(d.started_at) \|\| now;
	427	text.textContent = 'Deploying… ' + elapsed(now - started);
	428	} else if (d.status === 'succeeded') {
	429	pill.className = 'nav-deploy-pill deploy-pill-success';
	430	var ref = Date.parse(d.finished_at \|\| d.started_at) \|\| now;
	431	text.textContent = 'Deployed ' + classifyAge(now - ref);
	432	} else if (d.status === 'failed') {
	433	pill.className = 'nav-deploy-pill deploy-pill-failed';
	434	var refF = Date.parse(d.finished_at \|\| d.started_at) \|\| now;
	435	text.textContent = 'Deploy failed ' + classifyAge(now - refF);
	436	} else {
	437	pill.className = 'nav-deploy-pill';
	438	text.textContent = d.status;
	439	}
	440	}
	441
	442	function fetchLatest(){
	443	fetch('/admin/deploys/latest.json', { cache: 'no-store', credentials: 'same-origin' })
	444	.then(function(r){ if (!r.ok) return null; return r.json(); })
	445	.then(function(j){
	446	if (!j \|\| j.ok !== true) return;
	447	state.latest = j.latest;
	448	state.asOf = j.asOf;
	449	render();
	450	subscribe();
	451	})
	452	.catch(function(){});
	453	}
	454
	455	var subscribed = false;
	456	function subscribe(){
	457	if (subscribed) return;
	458	if (typeof EventSource === 'undefined') return;
	459	subscribed = true;
	460	var es;
	461	var delay = 1500;
	462	function connect(){
	463	try { es = new EventSource('/live-events/platform:deploys'); }
	464	catch(e){ setTimeout(connect, delay); return; }
	465	es.onmessage = function(m){
	466	try {
	467	var d = JSON.parse(m.data);
	468	if (d && d.run_id) {
	469	if (!state.latest \|\| state.latest.run_id === d.run_id \|\|
	470	Date.parse(d.started_at) >= Date.parse(state.latest.started_at)) {
	471	state.latest = d;
	472	render();
	473	}
	474	}
	475	} catch(e){}
	476	};
	477	es.onerror = function(){
	478	try { es.close(); } catch(e){}
	479	setTimeout(connect, delay);
	480	};
	481	}
	482	connect();
	483	}
	484
	485	function init(){
	486	pill = document.getElementById('deploy-pill');
	487	if (!pill) return;
	488	dot = pill.querySelector('.deploy-pill-dot');
	489	text = pill.querySelector('.deploy-pill-text');
	490	fetchLatest();
	491	// Refresh relative-time labels every 15s so "12s ago" → "27s ago"
	492	// without a fresh fetch.
	493	setInterval(render, 15000);
	494	}
	495	if (document.readyState === 'loading') {
	496	document.addEventListener('DOMContentLoaded', init);
	497	} else {
	498	init();
	499	}
	500	})();
	501	`;
	502
6fc53bdClaude	503	// Runs before paint — reads the theme cookie and flips data-theme so there's
	504	// no dark-to-light flash on load. SSR default is dark.
	505	const themeInitScript = `
	506	(function(){
	507	try {
	508	var m = document.cookie.match(/(?:^\|; )theme=([^;]+)/);
	509	var t = m ? decodeURIComponent(m[1]) : 'dark';
	510	if (t !== 'light' && t !== 'dark') t = 'dark';
	511	document.documentElement.setAttribute('data-theme', t);
	512	} catch(_){}
	513	})();
	514	`;
	515
eae38d1Claude	516	// Block G1 — register service worker for offline / install support.
	517	// Kept inline (and tiny) so we don't block first paint.
b1be050CC LABS App	518	//
	519	// Block S2 extension — when an updated SW activates we force a single
	520	// reload so the user picks up the fresh HTML immediately instead of
	521	// being stuck on the previous deploy's cached page (the "I saw /login's
	522	// old version even after merging" bug that triggered S2 in the first
	523	// place). The reload only fires when `controller` is already set, which
	524	// means this is NOT the first-ever install (no double-load on first
	525	// visit). A page-scoped guard prevents reload loops if the SW updates
	526	// twice in quick succession.
eae38d1Claude	527	const pwaRegisterScript = `
	528	if ('serviceWorker' in navigator) {
	529	window.addEventListener('load', function(){
b1be050CC LABS App	530	navigator.serviceWorker.register('/sw.js').then(function(reg){
	531	var reloaded = false;
	532	reg.addEventListener('updatefound', function(){
	533	var newSW = reg.installing;
	534	if (!newSW) return;
	535	newSW.addEventListener('statechange', function(){
	536	if (newSW.state === 'activated' && navigator.serviceWorker.controller && !reloaded) {
	537	reloaded = true;
	538	window.location.reload();
	539	}
	540	});
	541	});
	542	}).catch(function(){});
eae38d1Claude	543	});
	544	}
	545	`;
	546
534f04aClaude	547	// Block M2 — smart install banner (authed users only). Three heuristics:
	548	// 1. user is authenticated (gated server-side via the `{user &&}` JSX)
	549	// 2. visit counter (localStorage) ≥ 3
	550	// 3. dismissed-cooldown < 14 days ago
	551	// Also bootstraps the push + offline SW at /sw-push.js. Idempotent — safe
	552	// to load on every page; only inserts DOM nodes if all conditions match.
	553	const pwaInstallBannerScript = `
	554	(function(){
	555	try {
	556	var DISMISS_KEY = 'gc:pwa-banner-dismissed-at';
	557	var VISITS_KEY = 'gc:pwa-visit-count';
	558	var DISMISS_MS = 14 * 24 * 60 * 60 * 1000;
	559	var visits = parseInt(localStorage.getItem(VISITS_KEY) \|\| '0', 10) \|\| 0;
	560	visits++;
	561	try { localStorage.setItem(VISITS_KEY, String(visits)); } catch(_){}
	562	// Bootstrap the push + offline SW (separate from /sw.js's locked behaviour).
	563	if ('serviceWorker' in navigator) {
	564	window.addEventListener('load', function(){
	565	navigator.serviceWorker.register('/sw-push.js', { scope: '/' })
	566	.catch(function(){});
	567	});
	568	}
	569	var deferredPrompt = null;
	570	window.addEventListener('beforeinstallprompt', function(e){
	571	e.preventDefault();
	572	deferredPrompt = e;
	573	maybeShow();
	574	});
	575	function maybeShow(){
	576	if (!deferredPrompt) return;
	577	if (visits < 3) return;
	578	var dismissedAt = parseInt(localStorage.getItem(DISMISS_KEY) \|\| '0', 10) \|\| 0;
	579	if (dismissedAt && (Date.now() - dismissedAt) < DISMISS_MS) return;
	580	if (document.getElementById('gc-install-banner')) return;
	581	var bar = document.createElement('div');
	582	bar.id = 'gc-install-banner';
	583	bar.setAttribute('role', 'dialog');
	584	bar.setAttribute('aria-label', 'Install Gluecron');
	585	bar.style.cssText = 'position:fixed;left:12px;right:12px;bottom:12px;z-index:9997;'
	586	+ 'background:var(--bg-elevated,#161b22);color:var(--text,#c9d1d9);'
	587	+ 'border:1px solid var(--border,#30363d);border-radius:8px;padding:12px 14px;'
	588	+ 'display:flex;gap:10px;align-items:center;justify-content:space-between;'
	589	+ 'box-shadow:0 8px 24px rgba(0,0,0,0.45);font-size:13px;line-height:1.3;'
	590	+ 'max-width:560px;margin:0 auto';
	591	bar.innerHTML = '<span style="flex:1">'
	592	+ '<strong>Install Gluecron</strong> to keep working when offline + get push notifications.'
	593	+ '</span>'
	594	+ '<button type="button" id="gc-install-go" style="background:#238636;color:#fff;'
	595	+ 'border:0;border-radius:6px;padding:6px 12px;font-size:12px;cursor:pointer;'
	596	+ 'font-family:inherit">Install</button>'
	597	+ '<button type="button" id="gc-install-no" style="background:transparent;color:inherit;'
	598	+ 'border:1px solid var(--border,#30363d);border-radius:6px;padding:6px 12px;'
	599	+ 'font-size:12px;cursor:pointer;font-family:inherit">Not now</button>';
	600	document.body.appendChild(bar);
	601	var go = bar.querySelector('#gc-install-go');
	602	var no = bar.querySelector('#gc-install-no');
	603	if (go) go.addEventListener('click', function(){
	604	try { deferredPrompt.prompt(); } catch(_){}
	605	bar.parentNode && bar.parentNode.removeChild(bar);
	606	deferredPrompt = null;
	607	});
	608	if (no) no.addEventListener('click', function(){
	609	try { localStorage.setItem(DISMISS_KEY, String(Date.now())); } catch(_){}
	610	bar.parentNode && bar.parentNode.removeChild(bar);
	611	});
	612	}
	613	} catch(_) {}
	614	})();
	615	`;
	616
3ef4c9dClaude	617	const navScript = `
	618	(function(){
	619	var chord = null;
	620	var chordTimer = null;
	621	function isTyping(t){
	622	t = t \|\| {};
	623	var tag = (t.tagName \|\| '').toLowerCase();
	624	return tag === 'input' \|\| tag === 'textarea' \|\| t.isContentEditable;
	625	}
71cd5ecClaude	626
	627	// ---------- Block I4 — Command palette ----------
	628	var COMMANDS = [
	629	{ label: 'Go to Dashboard', href: '/dashboard', kw: 'home' },
	630	{ label: 'Go to Explore', href: '/explore', kw: 'browse discover' },
	631	{ label: 'Go to Notifications', href: '/notifications', kw: 'inbox' },
	632	{ label: 'Go to Ask AI', href: '/ask', kw: 'chat assistant' },
	633	{ label: 'Create new repository', href: '/new', kw: 'add create' },
	634	{ label: 'Marketplace', href: '/marketplace', kw: 'apps store' },
	635	{ label: 'Installed apps', href: '/settings/apps', kw: 'my apps' },
	636	{ label: 'Register new app', href: '/developer/apps-new', kw: 'developer create' },
	637	{ label: 'Keyboard shortcuts', href: '/shortcuts', kw: 'help keys' },
	638	{ label: 'Settings (profile)', href: '/settings', kw: 'account' },
	639	{ label: '2FA settings', href: '/settings/2fa', kw: 'two factor security' },
	640	{ label: 'Passkeys settings', href: '/settings/passkeys', kw: 'webauthn' },
	641	{ label: 'Personal access tokens', href: '/settings/tokens', kw: 'pat api' },
	642	{ label: 'Billing + quotas', href: '/settings/billing', kw: 'plans money' },
	643	{ label: 'Audit log (personal)', href: '/settings/audit', kw: 'history' },
	644	{ label: 'Gists', href: '/gists', kw: 'snippets' },
	645	{ label: 'GraphQL explorer', href: '/api/graphql', kw: 'api query' },
	646	{ label: 'Admin dashboard', href: '/admin', kw: 'superuser' },
	647	{ label: 'Toggle theme', href: '/theme/toggle', kw: 'dark light mode' }
	648	];
	649
	650	function fuzzyMatch(item, q){
	651	if (!q) return true;
	652	var hay = (item.label + ' ' + (item.kw\|\|'') + ' ' + item.href).toLowerCase();
	653	q = q.toLowerCase();
	654	var qi = 0;
	655	for (var i = 0; i < hay.length && qi < q.length; i++) {
	656	if (hay[i] === q[qi]) qi++;
	657	}
	658	return qi === q.length;
	659	}
	660
	661	var backdrop, panel, input, list, selected = 0, filtered = COMMANDS.slice();
	662
	663	function render(){
	664	if (!list) return;
	665	var html = '';
	666	for (var i = 0; i < filtered.length; i++) {
	667	var item = filtered[i];
	668	var cls = i === selected ? 'cmdk-item cmdk-active' : 'cmdk-item';
	669	var bg = i === selected ? 'background:var(--bg);' : '';
ea52715copilot-swe-agent[bot]	670	html += '<div class="' + cls + '" data-idx="' + i + '" data-url="' + item.href + '"' +
71cd5ecClaude	671	' style="padding:10px 16px;cursor:pointer;border-bottom:1px solid var(--border);' + bg + '">' +
	672	'<div>' + item.label + '</div>' +
	673	'<div style="font-size:11px;color:var(--text-muted)">' + item.href + '</div>' +
	674	'</div>';
	675	}
	676	if (filtered.length === 0) {
	677	html = '<div style="padding:16px;color:var(--text-muted);text-align:center">No matches.</div>';
	678	}
	679	list.innerHTML = html;
	680	}
	681
	682	function openPalette(){
	683	backdrop = document.getElementById('cmdk-backdrop');
	684	panel = document.getElementById('cmdk-panel');
	685	input = document.getElementById('cmdk-input');
	686	list = document.getElementById('cmdk-list');
	687	if (!backdrop \|\| !panel) return;
	688	backdrop.style.display = 'block';
	689	panel.style.display = 'block';
	690	input.value = '';
	691	selected = 0;
	692	filtered = COMMANDS.slice();
	693	render();
	694	input.focus();
	695	}
	696	function closePalette(){
	697	if (backdrop) backdrop.style.display = 'none';
	698	if (panel) panel.style.display = 'none';
	699	}
	700	function go(href){ closePalette(); window.location.href = href; }
	701
	702	document.addEventListener('click', function(e){
	703	var t = e.target;
	704	if (t && t.id === 'cmdk-backdrop') { closePalette(); return; }
	705	var item = t && t.closest && t.closest('.cmdk-item');
ea52715copilot-swe-agent[bot]	706	if (item) { go(item.getAttribute('data-url')); }
71cd5ecClaude	707	});
	708
	709	document.addEventListener('input', function(e){
	710	if (e.target && e.target.id === 'cmdk-input') {
	711	var q = e.target.value;
	712	filtered = COMMANDS.filter(function(c){ return fuzzyMatch(c, q); });
	713	selected = 0;
	714	render();
	715	}
	716	});
	717
3ef4c9dClaude	718	document.addEventListener('keydown', function(e){
71cd5ecClaude	719	// Palette-scoped keys take priority when open
	720	if (panel && panel.style.display === 'block') {
	721	if (e.key === 'Escape') { e.preventDefault(); closePalette(); return; }
	722	if (e.key === 'ArrowDown') {
	723	e.preventDefault();
	724	selected = Math.min(filtered.length - 1, selected + 1);
	725	render();
	726	return;
	727	}
	728	if (e.key === 'ArrowUp') {
	729	e.preventDefault();
	730	selected = Math.max(0, selected - 1);
	731	render();
	732	return;
	733	}
	734	if (e.key === 'Enter') {
	735	e.preventDefault();
	736	var item = filtered[selected];
	737	if (item) go(item.href);
	738	return;
	739	}
	740	return;
	741	}
	742
3ef4c9dClaude	743	if (isTyping(e.target)) return;
	744	// Single key shortcuts
	745	if (e.key === '/') {
	746	var el = document.querySelector('.nav-search input');
	747	if (el) { e.preventDefault(); el.focus(); return; }
	748	}
	749	if ((e.metaKey\|\|e.ctrlKey) && e.key.toLowerCase() === 'k') {
71cd5ecClaude	750	e.preventDefault();
	751	openPalette();
	752	return;
3ef4c9dClaude	753	}
	754	if (e.key === '?' && !e.ctrlKey && !e.metaKey) {
	755	e.preventDefault(); window.location.href = '/shortcuts'; return;
	756	}
	757	if (e.key === 'n' && !e.ctrlKey && !e.metaKey) {
	758	e.preventDefault(); window.location.href = '/new'; return;
	759	}
	760	// "g" chord
	761	if (e.key === 'g' && !e.ctrlKey && !e.metaKey) {
	762	chord = 'g';
	763	clearTimeout(chordTimer);
	764	chordTimer = setTimeout(function(){ chord = null; }, 1200);
	765	return;
	766	}
	767	if (chord === 'g') {
	768	if (e.key === 'd') { e.preventDefault(); window.location.href = '/dashboard'; }
	769	else if (e.key === 'n') { e.preventDefault(); window.location.href = '/notifications'; }
	770	else if (e.key === 'e') { e.preventDefault(); window.location.href = '/explore'; }
	771	else if (e.key === 'a') { e.preventDefault(); window.location.href = '/ask'; }
	772	chord = null;
	773	}
	774	});
	775	})();
	776	`;
	777
fc1817aClaude	778	const css = `
2ce1d0bClaude	779	/* ================================================================
958d26aClaude	780	* Gluecron design system — 2026.05 "Editorial-Technical"
	781	* Slate-noir base · refined violet signature · hairline geometry ·
	782	* mono-as-feature · cinematic motion · Inter Tight + JetBrains Mono.
	783	* All class names preserved for back-compat across 50+ route views.
2ce1d0bClaude	784	* ============================================================== */
6fc53bdClaude	785	:root, :root[data-theme='dark'] {
958d26aClaude	786	/* Surfaces — slate, not black. More depth, less crush. */
	787	--bg: #08090f;
	788	--bg-secondary: #0c0d14;
	789	--bg-tertiary: #11131c;
	790	--bg-elevated: #0f111a;
	791	--bg-surface: #161826;
	792	--bg-hover: rgba(255,255,255,0.04);
	793	--bg-active: rgba(255,255,255,0.08);
	794	--bg-inset: rgba(0,0,0,0.30);
	795
	796	/* Borders — three weights, used deliberately */
	797	--border: rgba(255,255,255,0.06);
	798	--border-subtle: rgba(255,255,255,0.035);
	799	--border-strong: rgba(255,255,255,0.13);
	800	--border-focus: rgba(140,109,255,0.55);
	801
	802	/* Text */
	803	--text: #ededf2;
	804	--text-strong: #f7f7fb;
	805	--text-muted: #8b8c9c;
	806	--text-faint: #555665;
	807	--text-link: #b69dff;
	808
	809	/* Accent — refined violet (less candy), warm amber as secondary signal */
	810	--accent: #8c6dff;
	811	--accent-2: #36c5d6;
	812	--accent-warm: #ffb45e;
	813	--accent-hover: #a48bff;
	814	--accent-pressed:#7559e8;
	815	--accent-gradient: linear-gradient(135deg, #8c6dff 0%, #36c5d6 100%);
	816	--accent-gradient-soft: linear-gradient(135deg, rgba(140,109,255,0.18) 0%, rgba(54,197,214,0.18) 100%);
	817	--accent-gradient-faint: linear-gradient(135deg, rgba(140,109,255,0.07) 0%, rgba(54,197,214,0.07) 100%);
	818	--accent-glow: 0 0 24px rgba(140,109,255,0.28);
	819
	820	/* Semantic */
	821	--green: #34d399;
	822	--red: #f87171;
	823	--yellow: #fbbf24;
	824	--amber: #fbbf24;
	825	--blue: #60a5fa;
	826
fb71554Claude	827	/* Type — system fonts FIRST so we never depend on Google Fonts loading.
	828	Segoe UI (Win), -apple-system / SF (Mac), Roboto (Android), Inter as
	829	optional upgrade if the user already has it. NEVER falls back to serif. */
	830	--font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', 'Cascadia Mono', Menlo, Consolas, 'Courier New', monospace;
	831	--font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI', system-ui, Roboto, 'Helvetica Neue', Arial, 'Inter', sans-serif;
	832	--font-display: -apple-system, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI', system-ui, Roboto, 'Helvetica Neue', Arial, 'Inter Tight', 'Inter', sans-serif;
958d26aClaude	833	--mono-feat: 'calt', 'liga', 'ss01';
	834
	835	/* Radius — sharper than before */
	836	--r-sm: 5px;
	837	--r: 7px;
	838	--r-md: 9px;
	839	--r-lg: 12px;
	840	--r-xl: 16px;
	841	--r-2xl: 22px;
	842	--r-full: 9999px;
	843	--radius: 7px;
	844
	845	/* Type scale — bigger display sizes for editorial feel */
	846	--t-xs: 11px;
	847	--t-sm: 13px;
	848	--t-base: 14px;
	849	--t-md: 16px;
	850	--t-lg: 20px;
	851	--t-xl: 28px;
	852	--t-2xl: 40px;
	853	--t-3xl: 56px;
	854	--t-display: 72px;
	855	--t-display-lg:96px;
	856
	857	/* Spacing — 4px base */
2ce1d0bClaude	858	--s-0: 0;
958d26aClaude	859	--s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
	860	--s-5: 20px; --s-6: 24px; --s-7: 28px; --s-8: 32px;
	861	--s-10:40px; --s-12:48px; --s-14:56px; --s-16:64px;
	862	--s-20:80px; --s-24:96px; --s-32:128px;
	863
	864	/* Elevation — softer + more layered */
	865	--elev-0: 0 0 0 1px var(--border);
	866	--elev-1: 0 1px 2px rgba(0,0,0,0.50), 0 0 0 1px var(--border);
	867	--elev-2: 0 8px 24px -8px rgba(0,0,0,0.60), 0 0 0 1px var(--border);
	868	--elev-3: 0 20px 48px -12px rgba(0,0,0,0.70), 0 0 0 1px var(--border-strong);
	869	--elev-glow: 0 0 0 1px rgba(140,109,255,0.40), 0 0 32px -4px rgba(140,109,255,0.30);
	870	--ring: 0 0 0 3px rgba(140,109,255,0.28);
	871	--ring-warn: 0 0 0 3px rgba(251,191,36,0.28);
	872	--ring-err: 0 0 0 3px rgba(248,113,113,0.28);
	873
	874	/* Motion */
	875	--ease: cubic-bezier(0.16, 1, 0.3, 1);
	876	--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
	877	--ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
	878	--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
	879	--t-fast: 120ms;
	880	--t-base: 200ms;
	881	--t-slow: 360ms;
	882	--t-slower:560ms;
	883
	884	--header-h: 60px;
c63b860Claude	885
	886	/* Block O3 — visual coherence: named token aliases (additive). */
	887	--space-1: var(--s-1);
	888	--space-2: var(--s-2);
	889	--space-3: var(--s-3);
	890	--space-4: var(--s-4);
	891	--space-5: var(--s-5);
	892	--space-6: var(--s-6);
	893	--space-8: var(--s-8);
	894	--space-10: var(--s-10);
	895	--space-12: var(--s-12);
	896	--space-16: var(--s-16);
	897	--space-20: var(--s-20);
	898	--space-24: var(--s-24);
	899	--radius-sm: var(--r-sm);
	900	--radius-md: var(--r-md);
	901	--radius-lg: var(--r-lg);
	902	--radius-xl: var(--r-xl);
	903	--radius-full: var(--r-full);
	904	--font-size-xs: var(--t-xs);
	905	--font-size-sm: var(--t-sm);
	906	--font-size-base: var(--t-base);
	907	--font-size-md: var(--t-md);
	908	--font-size-lg: var(--t-lg);
	909	--font-size-xl: var(--t-xl);
	910	--font-size-2xl: var(--t-2xl);
	911	--font-size-3xl: var(--t-3xl);
	912	--font-size-hero: var(--t-display);
	913	--leading-tight: 1.2;
	914	--leading-snug: 1.35;
	915	--leading-normal: 1.5;
	916	--leading-relaxed: 1.6;
	917	--leading-loose: 1.7;
	918	--z-base: 1;
	919	--z-nav: 10;
	920	--z-sticky: 50;
	921	--z-overlay: 100;
	922	--z-modal: 1000;
	923	--z-toast: 10000;
fc1817aClaude	924	}
	925
6fc53bdClaude	926	:root[data-theme='light'] {
958d26aClaude	927	--bg: #fbfbfc;
4c47454Claude	928	--bg-secondary: #ffffff;
958d26aClaude	929	--bg-tertiary: #f3f3f6;
	930	--bg-elevated: #ffffff;
	931	--bg-surface: #f6f6f9;
	932	--bg-hover: rgba(0,0,0,0.035);
	933	--bg-active: rgba(0,0,0,0.07);
	934	--bg-inset: rgba(0,0,0,0.04);
	935
	936	--border: rgba(15,16,28,0.08);
	937	--border-subtle: rgba(15,16,28,0.04);
	938	--border-strong: rgba(15,16,28,0.16);
	939
	940	--text: #0e1020;
	941	--text-strong: #050617;
	942	--text-muted: #5a5b70;
	943	--text-faint: #8a8b9e;
	944	--text-link: #6d4dff;
	945
	946	--accent: #6d4dff;
	947	--accent-2: #0891b2;
	948	--accent-hover: #5a3df0;
	949	--accent-pressed:#4a30d6;
	950	--accent-glow: 0 0 24px rgba(109,77,255,0.18);
	951
	952	--green: #059669;
	953	--red: #dc2626;
4c47454Claude	954	--yellow: #d97706;
958d26aClaude	955
	956	--elev-1: 0 1px 2px rgba(15,16,28,0.06), 0 0 0 1px var(--border);
	957	--elev-2: 0 8px 24px -10px rgba(15,16,28,0.10), 0 0 0 1px var(--border);
	958	--elev-3: 0 20px 48px -16px rgba(15,16,28,0.14), 0 0 0 1px var(--border-strong);
6fc53bdClaude	959	}
	960
	961	/* Theme toggle — show the icon for the opposite theme so users see what they'll switch to. */
958d26aClaude	962	.nav-theme { display: inline-flex; align-items: center; font-size: 15px; line-height: 1; opacity: 0.85; }
	963	.nav-theme:hover { opacity: 1; }
6fc53bdClaude	964	:root[data-theme='dark'] .theme-icon-dark { display: none; }
	965	:root[data-theme='light'] .theme-icon-light { display: none; }
	966
fc1817aClaude	967	* { margin: 0; padding: 0; box-sizing: border-box; }
958d26aClaude	968	*::selection { background: rgba(140,109,255,0.32); color: var(--text-strong); }
2ce1d0bClaude	969
958d26aClaude	970	html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
fc1817aClaude	971
	972	body {
	973	font-family: var(--font-sans);
	974	background: var(--bg);
	975	color: var(--text);
2ce1d0bClaude	976	line-height: 1.55;
958d26aClaude	977	letter-spacing: -0.011em;
fc1817aClaude	978	min-height: 100vh;
	979	display: flex;
	980	flex-direction: column;
958d26aClaude	981	font-feature-settings: 'cv11', 'ss01', 'ss03', 'calt';
fc1817aClaude	982	}
	983
958d26aClaude	984	/* Whole-page atmosphere: very subtle gradient + dot-grid layered behind everything.
	985	Keeps every page feeling like part of the same product without competing with hero art. */
2ce1d0bClaude	986	body::before {
	987	content: '';
	988	position: fixed;
	989	inset: 0;
	990	pointer-events: none;
958d26aClaude	991	z-index: -2;
2ce1d0bClaude	992	background:
958d26aClaude	993	radial-gradient(70% 55% at 85% -20%, rgba(140,109,255,0.07), transparent 65%),
	994	radial-gradient(55% 45% at -10% 115%, rgba(54,197,214,0.05), transparent 65%);
	995	}
	996	body::after {
	997	content: '';
	998	position: fixed;
	999	inset: 0;
	1000	pointer-events: none;
	1001	z-index: -1;
	1002	background-image: radial-gradient(rgba(255,255,255,0.025) 1px, transparent 1px);
	1003	background-size: 28px 28px;
	1004	background-position: 0 0;
	1005	opacity: 0.55;
	1006	mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 70%);
	1007	-webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 70%);
	1008	}
	1009	:root[data-theme='light'] body::before { opacity: 0.55; }
	1010	:root[data-theme='light'] body::after {
	1011	background-image: radial-gradient(rgba(15,16,28,0.06) 1px, transparent 1px);
	1012	opacity: 0.4;
fc1817aClaude	1013	}
2ce1d0bClaude	1014
	1015	a { color: var(--text-link); text-decoration: none; transition: color var(--t-fast) var(--ease); }
	1016	a:hover { color: var(--accent-hover); text-decoration: none; }
fc1817aClaude	1017
958d26aClaude	1018	/* Heading scale — confident, editorial, tight tracking */
	1019	h1, h2, h3, h4, h5, h6 {
	1020	font-family: var(--font-display);
2ce1d0bClaude	1021	font-weight: 600;
958d26aClaude	1022	letter-spacing: -0.022em;
	1023	line-height: 1.18;
	1024	color: var(--text-strong);
	1025	}
	1026	h1 { font-size: var(--t-xl); letter-spacing: -0.028em; }
	1027	h2 { font-size: var(--t-lg); letter-spacing: -0.022em; }
	1028	h3 { font-size: var(--t-md); font-weight: 600; letter-spacing: -0.015em; }
	1029	h4 { font-size: var(--t-base); font-weight: 600; letter-spacing: -0.01em; }
	1030	h5, h6 { font-size: var(--t-sm); font-weight: 600; letter-spacing: -0.005em; }
	1031
	1032	/* Editorial display heading utility — used by landing + marketing pages */
	1033	.display {
	1034	font-family: var(--font-display);
	1035	font-size: clamp(40px, 7.5vw, 96px);
	1036	line-height: 0.98;
	1037	letter-spacing: -0.04em;
	1038	font-weight: 600;
	1039	color: var(--text-strong);
2ce1d0bClaude	1040	}
fc1817aClaude	1041
958d26aClaude	1042	/* Eyebrow — uppercase mono label that sits above section headings */
	1043	.eyebrow {
	1044	display: inline-flex;
	1045	align-items: center;
	1046	gap: 8px;
	1047	font-family: var(--font-mono);
	1048	font-size: 11px;
	1049	font-weight: 500;
	1050	letter-spacing: 0.14em;
	1051	text-transform: uppercase;
	1052	color: var(--accent);
	1053	margin-bottom: var(--s-3);
	1054	}
	1055	.eyebrow::before {
	1056	content: '';
	1057	width: 18px;
	1058	height: 1px;
	1059	background: currentColor;
	1060	opacity: 0.6;
	1061	}
	1062
	1063	/* Section header — paired eyebrow + title + lede */
	1064	.section-header { max-width: 720px; margin: 0 auto var(--s-10); text-align: center; }
	1065	.section-header.left { text-align: left; margin-left: 0; margin-right: auto; }
	1066	.section-header h2 {
	1067	font-size: clamp(28px, 4vw, 44px);
	1068	line-height: 1.05;
	1069	letter-spacing: -0.028em;
	1070	margin-bottom: var(--s-3);
	1071	}
	1072	.section-header p {
	1073	color: var(--text-muted);
	1074	font-size: var(--t-md);
	1075	line-height: 1.6;
	1076	max-width: 580px;
	1077	margin: 0 auto;
	1078	}
	1079	.section-header.left p { margin-left: 0; }
fc1817aClaude	1080
958d26aClaude	1081	code, kbd, samp {
2ce1d0bClaude	1082	font-family: var(--font-mono);
958d26aClaude	1083	font-feature-settings: var(--mono-feat);
	1084	}
	1085	code {
	1086	font-size: 0.9em;
2ce1d0bClaude	1087	background: var(--bg-tertiary);
958d26aClaude	1088	border: 1px solid var(--border-subtle);
2ce1d0bClaude	1089	padding: 1px 6px;
	1090	border-radius: var(--r-sm);
	1091	color: var(--text);
	1092	}
958d26aClaude	1093	kbd, .kbd {
	1094	display: inline-flex;
	1095	align-items: center;
	1096	padding: 1px 6px;
	1097	font-family: var(--font-mono);
	1098	font-size: 11px;
	1099	background: var(--bg-elevated);
	1100	border: 1px solid var(--border);
	1101	border-bottom-width: 2px;
	1102	border-radius: 4px;
	1103	color: var(--text);
	1104	line-height: 1.5;
	1105	vertical-align: middle;
	1106	}
2ce1d0bClaude	1107
958d26aClaude	1108	/* Mono utility for technical chrome (paths, IDs, dates) */
	1109	.mono { font-family: var(--font-mono); font-feature-settings: var(--mono-feat); font-size: 0.96em; }
	1110	.meta-mono { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--text-muted); letter-spacing: 0; }
	1111
	1112	/* Pre-launch banner — slim, refined, mono caption */
4a52a98Claude	1113	.prelaunch-banner {
958d26aClaude	1114	position: relative;
2ce1d0bClaude	1115	background:
958d26aClaude	1116	linear-gradient(180deg, rgba(251,191,36,0.10), rgba(251,191,36,0.03)),
2ce1d0bClaude	1117	var(--bg);
958d26aClaude	1118	border-bottom: 1px solid rgba(251,191,36,0.28);
4a52a98Claude	1119	color: var(--yellow);
958d26aClaude	1120	padding: 7px 24px;
	1121	font-family: var(--font-mono);
	1122	font-size: 11px;
4a52a98Claude	1123	font-weight: 500;
	1124	text-align: center;
2ce1d0bClaude	1125	line-height: 1.5;
958d26aClaude	1126	letter-spacing: 0.04em;
	1127	text-transform: uppercase;
	1128	}
	1129	.prelaunch-banner::before {
	1130	content: '◆';
	1131	margin-right: 8px;
	1132	font-size: 9px;
	1133	opacity: 0.7;
	1134	vertical-align: 1px;
4a52a98Claude	1135	}
	1136
cd4f63bTest User	1137	/* Block Q3 — Playground banner. Brighter than the prelaunch strip so
	1138	visitors don't miss the "save your work" CTA, but slim enough to
	1139	not feel like a modal. */
	1140	.playground-banner {
	1141	position: relative;
	1142	display: flex;
	1143	align-items: center;
	1144	justify-content: center;
	1145	gap: 8px;
	1146	background:
	1147	linear-gradient(180deg, rgba(251,191,36,0.20), rgba(251,191,36,0.06)),
	1148	var(--bg);
	1149	border-bottom: 1px solid rgba(251,191,36,0.45);
	1150	color: var(--yellow, #fbbf24);
	1151	padding: 8px 40px 8px 24px;
	1152	font-size: 13px;
	1153	font-weight: 500;
	1154	text-align: center;
	1155	line-height: 1.4;
	1156	}
	1157	.playground-banner-icon { font-size: 14px; }
	1158	.playground-banner-text { color: var(--text-strong, #e6edf3); }
	1159	.playground-banner-countdown { font-weight: 600; }
	1160	.playground-banner-cta {
	1161	margin-left: 4px;
	1162	color: var(--yellow, #fbbf24);
	1163	text-decoration: underline;
	1164	font-weight: 600;
	1165	}
	1166	.playground-banner-cta:hover { opacity: 0.85; }
	1167	.playground-banner-dismiss {
	1168	position: absolute;
	1169	top: 50%;
	1170	right: 12px;
	1171	transform: translateY(-50%);
	1172	background: transparent;
	1173	border: none;
	1174	color: var(--text-muted, #8b949e);
	1175	font-size: 18px;
	1176	line-height: 1;
	1177	cursor: pointer;
	1178	padding: 0 4px;
	1179	}
	1180	.playground-banner-dismiss:hover { color: var(--text-strong, #e6edf3); }
	1181
958d26aClaude	1182	/* Header — sticky, blurred, hairline border, taller for breathing room */
fc1817aClaude	1183	header {
2ce1d0bClaude	1184	position: sticky;
	1185	top: 0;
	1186	z-index: 100;
fc1817aClaude	1187	border-bottom: 1px solid var(--border);
2ce1d0bClaude	1188	padding: 0 24px;
	1189	height: var(--header-h);
958d26aClaude	1190	background: rgba(8,9,15,0.72);
	1191	backdrop-filter: saturate(180%) blur(18px);
	1192	-webkit-backdrop-filter: saturate(180%) blur(18px);
fc1817aClaude	1193	}
958d26aClaude	1194	:root[data-theme='light'] header { background: rgba(251,251,252,0.78); }
fc1817aClaude	1195
06d5ffeClaude	1196	header nav {
	1197	display: flex;
	1198	align-items: center;
958d26aClaude	1199	gap: 18px;
	1200	max-width: 1240px;
06d5ffeClaude	1201	margin: 0 auto;
2ce1d0bClaude	1202	height: 100%;
	1203	}
	1204	.logo {
958d26aClaude	1205	font-family: var(--font-display);
	1206	font-size: 16px;
2ce1d0bClaude	1207	font-weight: 700;
958d26aClaude	1208	letter-spacing: -0.025em;
	1209	color: var(--text-strong);
2ce1d0bClaude	1210	display: inline-flex;
	1211	align-items: center;
958d26aClaude	1212	gap: 9px;
	1213	transition: opacity var(--t-fast) var(--ease);
06d5ffeClaude	1214	}
2ce1d0bClaude	1215	.logo::before {
	1216	content: '';
958d26aClaude	1217	width: 20px; height: 20px;
	1218	border-radius: 6px;
2ce1d0bClaude	1219	background: var(--accent-gradient);
958d26aClaude	1220	box-shadow:
	1221	inset 0 1px 0 rgba(255,255,255,0.25),
	1222	0 0 0 1px rgba(140,109,255,0.45),
	1223	0 0 20px rgba(140,109,255,0.30);
2ce1d0bClaude	1224	flex-shrink: 0;
958d26aClaude	1225	transition: transform var(--t-base) var(--ease-spring), box-shadow var(--t-base) var(--ease);
	1226	}
	1227	.logo:hover { text-decoration: none; color: var(--text-strong); }
	1228	.logo:hover::before {
	1229	transform: rotate(8deg) scale(1.05);
	1230	box-shadow:
	1231	inset 0 1px 0 rgba(255,255,255,0.30),
	1232	0 0 0 1px rgba(140,109,255,0.55),
	1233	0 0 28px rgba(140,109,255,0.45);
06d5ffeClaude	1234	}
fc1817aClaude	1235
2ce1d0bClaude	1236	.nav-search {
	1237	flex: 1;
958d26aClaude	1238	max-width: 360px;
	1239	margin: 0 4px 0 8px;
	1240	position: relative;
2ce1d0bClaude	1241	}
	1242	.nav-search input {
	1243	width: 100%;
958d26aClaude	1244	padding: 7px 12px 7px 32px;
2ce1d0bClaude	1245	background: var(--bg-tertiary);
	1246	border: 1px solid var(--border);
	1247	border-radius: var(--r-sm);
	1248	color: var(--text);
	1249	font-family: var(--font-sans);
	1250	font-size: var(--t-sm);
958d26aClaude	1251	transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
	1252	}
	1253	.nav-search::before {
	1254	content: '';
	1255	position: absolute;
	1256	left: 11px; top: 50%;
	1257	transform: translateY(-50%);
	1258	width: 12px; height: 12px;
	1259	border: 1.5px solid var(--text-faint);
	1260	border-radius: 50%;
	1261	pointer-events: none;
	1262	}
	1263	.nav-search::after {
	1264	content: '';
	1265	position: absolute;
	1266	left: 19px; top: calc(50% + 4px);
	1267	width: 5px; height: 1.5px;
	1268	background: var(--text-faint);
	1269	transform: rotate(45deg);
	1270	pointer-events: none;
2ce1d0bClaude	1271	}
	1272	.nav-search input::placeholder { color: var(--text-faint); }
	1273	.nav-search input:focus {
	1274	outline: none;
	1275	background: var(--bg-secondary);
958d26aClaude	1276	border-color: var(--border-focus);
	1277	box-shadow: var(--ring);
2ce1d0bClaude	1278	}
06d5ffeClaude	1279
958d26aClaude	1280	.nav-right { display: flex; align-items: center; gap: 2px; margin-left: auto; }
f764c07Claude	1281
	1282	/* Block N3 — site-admin deploy status pill */
	1283	.nav-deploy-pill {
	1284	display: inline-flex;
	1285	align-items: center;
	1286	gap: 6px;
	1287	padding: 4px 10px;
	1288	margin: 0 6px 0 0;
	1289	border-radius: 9999px;
	1290	font-size: 11px;
	1291	font-weight: 600;
	1292	line-height: 1;
	1293	color: var(--text-strong);
	1294	background: var(--bg-elevated);
	1295	border: 1px solid var(--border);
	1296	text-decoration: none;
	1297	transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
	1298	}
	1299	.nav-deploy-pill:hover { background: var(--bg-hover); text-decoration: none; }
	1300	.nav-deploy-pill .deploy-pill-dot {
	1301	display: inline-block;
	1302	width: 8px; height: 8px;
	1303	border-radius: 50%;
	1304	background: #6b7280;
	1305	}
	1306	.deploy-pill-success .deploy-pill-dot { background: #34d399; box-shadow: 0 0 6px rgba(52,211,153,0.45); }
	1307	.deploy-pill-failed .deploy-pill-dot { background: #f87171; box-shadow: 0 0 6px rgba(248,113,113,0.45); }
	1308	.deploy-pill-failed { border-color: rgba(248,113,113,0.4); }
	1309	.deploy-pill-progress .deploy-pill-dot {
	1310	background: #fbbf24;
	1311	box-shadow: 0 0 6px rgba(251,191,36,0.55);
	1312	animation: deployPillPulse 1.2s ease-in-out infinite;
	1313	}
	1314	@keyframes deployPillPulse {
	1315	0%, 100% { opacity: 1; transform: scale(1); }
	1316	50% { opacity: 0.45; transform: scale(0.8); }
	1317	}
	1318	.deploy-pill-empty .deploy-pill-dot { background: #9ca3af; }
	1319
2ce1d0bClaude	1320	.nav-link {
958d26aClaude	1321	position: relative;
2ce1d0bClaude	1322	color: var(--text-muted);
	1323	font-size: var(--t-sm);
	1324	font-weight: 500;
958d26aClaude	1325	padding: 7px 11px;
2ce1d0bClaude	1326	border-radius: var(--r-sm);
958d26aClaude	1327	transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
2ce1d0bClaude	1328	}
	1329	.nav-link:hover {
958d26aClaude	1330	color: var(--text-strong);
2ce1d0bClaude	1331	background: var(--bg-hover);
	1332	text-decoration: none;
	1333	}
958d26aClaude	1334	.nav-link.active { color: var(--text-strong); }
	1335	.nav-link.active::after {
	1336	content: '';
	1337	position: absolute;
	1338	left: 11px; right: 11px;
	1339	bottom: -1px;
	1340	height: 2px;
	1341	background: var(--accent-gradient);
	1342	border-radius: 2px;
	1343	}
2ce1d0bClaude	1344	.nav-user {
958d26aClaude	1345	color: var(--text-strong);
2ce1d0bClaude	1346	font-weight: 600;
	1347	font-size: var(--t-sm);
	1348	padding: 6px 10px;
	1349	border-radius: var(--r-sm);
958d26aClaude	1350	margin-left: 6px;
2ce1d0bClaude	1351	transition: background var(--t-fast) var(--ease);
	1352	}
958d26aClaude	1353	.nav-user::before {
	1354	content: '';
	1355	display: inline-block;
	1356	width: 8px; height: 8px;
	1357	background: var(--green);
	1358	border-radius: 50%;
	1359	margin-right: 7px;
	1360	box-shadow: 0 0 8px rgba(52,211,153,0.5);
	1361	vertical-align: 1px;
	1362	}
2ce1d0bClaude	1363	.nav-user:hover { background: var(--bg-hover); text-decoration: none; }
fc1817aClaude	1364
2ce1d0bClaude	1365	main {
958d26aClaude	1366	max-width: 1240px;
2ce1d0bClaude	1367	margin: 0 auto;
958d26aClaude	1368	padding: 36px 24px 80px;
2ce1d0bClaude	1369	flex: 1;
	1370	width: 100%;
	1371	}
fc1817aClaude	1372
958d26aClaude	1373	/* Editorial footer: link grid + tagline row */
fc1817aClaude	1374	footer {
	1375	border-top: 1px solid var(--border);
958d26aClaude	1376	padding: 56px 24px 40px;
fc1817aClaude	1377	color: var(--text-muted);
958d26aClaude	1378	font-size: var(--t-sm);
	1379	background:
	1380	linear-gradient(180deg, transparent 0%, rgba(140,109,255,0.025) 100%),
	1381	var(--bg);
	1382	}
	1383	footer .footer-inner {
	1384	max-width: 1240px;
	1385	margin: 0 auto;
	1386	display: grid;
	1387	grid-template-columns: 1fr auto;
	1388	gap: 48px;
	1389	align-items: start;
	1390	}
	1391	footer .footer-brand .logo { margin-bottom: var(--s-3); }
	1392	footer .footer-tag {
	1393	color: var(--text-muted);
	1394	font-size: var(--t-sm);
	1395	max-width: 320px;
	1396	line-height: 1.55;
	1397	}
	1398	footer .footer-links {
	1399	display: grid;
	1400	grid-template-columns: repeat(3, minmax(120px, auto));
	1401	gap: 0 56px;
	1402	}
	1403	footer .footer-col-title {
	1404	font-family: var(--font-mono);
	1405	font-size: 11px;
	1406	text-transform: uppercase;
	1407	letter-spacing: 0.14em;
	1408	color: var(--text-faint);
	1409	margin-bottom: var(--s-3);
	1410	}
	1411	footer .footer-col a {
	1412	display: block;
	1413	color: var(--text-muted);
	1414	font-size: var(--t-sm);
	1415	padding: 5px 0;
	1416	transition: color var(--t-fast) var(--ease);
	1417	}
	1418	footer .footer-col a:hover { color: var(--text-strong); text-decoration: none; }
	1419	footer .footer-bottom {
	1420	max-width: 1240px;
	1421	margin: 40px auto 0;
	1422	padding-top: 24px;
	1423	border-top: 1px solid var(--border-subtle);
	1424	display: flex;
	1425	justify-content: space-between;
	1426	align-items: center;
2ce1d0bClaude	1427	color: var(--text-faint);
	1428	font-size: var(--t-xs);
958d26aClaude	1429	font-family: var(--font-mono);
	1430	letter-spacing: 0.02em;
	1431	}
	1432	footer .footer-bottom a { color: var(--text-faint); }
	1433	footer .footer-bottom a:hover { color: var(--text-muted); text-decoration: none; }
05cdb85Claude	1434	footer .footer-build {
	1435	display: inline-flex;
	1436	align-items: center;
	1437	gap: 6px;
	1438	color: var(--text-faint);
	1439	font-family: var(--font-mono);
	1440	font-size: 11px;
	1441	cursor: help;
	1442	}
	1443	footer .footer-build-dot {
	1444	width: 6px; height: 6px;
	1445	border-radius: 50%;
	1446	background: var(--green);
	1447	box-shadow: 0 0 6px rgba(52,211,153,0.55);
	1448	animation: footer-build-pulse 2.4s ease-in-out infinite;
	1449	}
	1450	@keyframes footer-build-pulse {
	1451	0%, 100% { opacity: 0.6; }
	1452	50% { opacity: 1; }
	1453	}
958d26aClaude	1454	@media (max-width: 768px) {
	1455	footer .footer-inner { grid-template-columns: 1fr; gap: 32px; }
	1456	footer .footer-links { grid-template-columns: repeat(2, 1fr); gap: 24px 32px; }
	1457	footer .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
fc1817aClaude	1458	}
	1459
2ce1d0bClaude	1460	/* ============================================================ */
	1461	/* Buttons */
	1462	/* ============================================================ */
06d5ffeClaude	1463	.btn {
	1464	display: inline-flex;
	1465	align-items: center;
2ce1d0bClaude	1466	justify-content: center;
958d26aClaude	1467	gap: 7px;
2ce1d0bClaude	1468	padding: 7px 14px;
	1469	border-radius: var(--r-sm);
958d26aClaude	1470	font-family: var(--font-sans);
2ce1d0bClaude	1471	font-size: var(--t-sm);
06d5ffeClaude	1472	font-weight: 500;
	1473	border: 1px solid var(--border);
2ce1d0bClaude	1474	background: var(--bg-elevated);
06d5ffeClaude	1475	color: var(--text);
	1476	cursor: pointer;
	1477	text-decoration: none;
958d26aClaude	1478	line-height: 1.25;
	1479	letter-spacing: -0.008em;
2ce1d0bClaude	1480	transition:
	1481	background var(--t-fast) var(--ease),
	1482	border-color var(--t-fast) var(--ease),
	1483	transform var(--t-fast) var(--ease),
958d26aClaude	1484	box-shadow var(--t-fast) var(--ease),
	1485	color var(--t-fast) var(--ease);
2ce1d0bClaude	1486	user-select: none;
	1487	white-space: nowrap;
958d26aClaude	1488	position: relative;
06d5ffeClaude	1489	}
2ce1d0bClaude	1490	.btn:hover {
	1491	background: var(--bg-surface);
	1492	border-color: var(--border-strong);
958d26aClaude	1493	color: var(--text-strong);
2ce1d0bClaude	1494	text-decoration: none;
	1495	}
958d26aClaude	1496	.btn:active { transform: translateY(1px); }
2ce1d0bClaude	1497	.btn:focus-visible { outline: none; box-shadow: var(--ring); }
	1498
	1499	.btn-primary {
	1500	background: var(--accent-gradient);
	1501	border-color: transparent;
	1502	color: #fff;
	1503	font-weight: 600;
958d26aClaude	1504	text-shadow: 0 1px 0 rgba(0,0,0,0.15);
2ce1d0bClaude	1505	box-shadow:
958d26aClaude	1506	inset 0 1px 0 rgba(255,255,255,0.22),
	1507	inset 0 -1px 0 rgba(0,0,0,0.10),
	1508	0 1px 2px rgba(0,0,0,0.40),
	1509	0 0 0 1px rgba(140,109,255,0.30);
06d5ffeClaude	1510	}
958d26aClaude	1511	.btn-primary::before {
	1512	content: '';
	1513	position: absolute;
	1514	inset: 0;
	1515	border-radius: inherit;
	1516	background: linear-gradient(180deg, rgba(255,255,255,0.18), transparent 60%);
	1517	opacity: 0;
	1518	transition: opacity var(--t-fast) var(--ease);
	1519	pointer-events: none;
2ce1d0bClaude	1520	}
	1521	.btn-primary:hover {
958d26aClaude	1522	color: #fff;
2ce1d0bClaude	1523	background: var(--accent-gradient);
958d26aClaude	1524	border-color: transparent;
2ce1d0bClaude	1525	box-shadow:
958d26aClaude	1526	inset 0 1px 0 rgba(255,255,255,0.30),
	1527	inset 0 -1px 0 rgba(0,0,0,0.10),
	1528	0 6px 18px -4px rgba(140,109,255,0.45),
	1529	0 0 0 1px rgba(140,109,255,0.45);
2ce1d0bClaude	1530	}
958d26aClaude	1531	.btn-primary:hover::before { opacity: 1; }
2ce1d0bClaude	1532
	1533	.btn-danger {
	1534	background: transparent;
958d26aClaude	1535	border-color: rgba(248,113,113,0.40);
2ce1d0bClaude	1536	color: var(--red);
	1537	}
	1538	.btn-danger:hover {
958d26aClaude	1539	background: rgba(248,113,113,0.08);
2ce1d0bClaude	1540	border-color: var(--red);
958d26aClaude	1541	color: var(--red);
2ce1d0bClaude	1542	}
958d26aClaude	1543	.btn-danger:focus-visible { box-shadow: var(--ring-err); }
2ce1d0bClaude	1544
	1545	.btn-ghost {
	1546	background: transparent;
	1547	border-color: transparent;
	1548	color: var(--text-muted);
	1549	}
	1550	.btn-ghost:hover {
	1551	background: var(--bg-hover);
958d26aClaude	1552	color: var(--text-strong);
2ce1d0bClaude	1553	border-color: var(--border);
	1554	}
	1555
958d26aClaude	1556	.btn-secondary {
	1557	background: var(--bg-elevated);
	1558	border-color: var(--border-strong);
	1559	color: var(--text-strong);
	1560	}
	1561	.btn-secondary:hover {
	1562	background: var(--bg-surface);
	1563	border-color: var(--border-strong);
	1564	}
	1565
	1566	.btn-sm { padding: 4px 10px; font-size: var(--t-xs); border-radius: var(--r-sm); gap: 5px; }
	1567	.btn-lg { padding: 11px 22px; font-size: var(--t-base); border-radius: var(--r); }
	1568	.btn-xl { padding: 14px 28px; font-size: var(--t-md); border-radius: var(--r); font-weight: 600; }
	1569	.btn-block { width: 100%; }
2ce1d0bClaude	1570
	1571	.btn:disabled, .btn[aria-disabled='true'] {
958d26aClaude	1572	opacity: 0.45;
2ce1d0bClaude	1573	cursor: not-allowed;
	1574	pointer-events: none;
	1575	}
	1576
	1577	/* ============================================================ */
	1578	/* Forms */
	1579	/* ============================================================ */
	1580	.form-group { margin-bottom: 20px; }
	1581	.form-group label {
	1582	display: block;
	1583	font-size: var(--t-sm);
	1584	font-weight: 500;
	1585	margin-bottom: 6px;
	1586	color: var(--text);
	1587	letter-spacing: -0.005em;
	1588	}
	1589	.form-group input,
	1590	.form-group textarea,
	1591	.form-group select,
	1592	input[type='text'], input[type='email'], input[type='password'],
	1593	input[type='url'], input[type='search'], input[type='number'],
	1594	textarea, select {
06d5ffeClaude	1595	width: 100%;
2ce1d0bClaude	1596	padding: 9px 12px;
	1597	background: var(--bg-secondary);
06d5ffeClaude	1598	border: 1px solid var(--border);
2ce1d0bClaude	1599	border-radius: var(--r-sm);
06d5ffeClaude	1600	color: var(--text);
2ce1d0bClaude	1601	font-size: var(--t-sm);
06d5ffeClaude	1602	font-family: var(--font-sans);
2ce1d0bClaude	1603	transition:
	1604	border-color var(--t-fast) var(--ease),
	1605	background var(--t-fast) var(--ease),
	1606	box-shadow var(--t-fast) var(--ease);
06d5ffeClaude	1607	}
2ce1d0bClaude	1608	.form-group input::placeholder, textarea::placeholder, input::placeholder {
	1609	color: var(--text-faint);
06d5ffeClaude	1610	}
2ce1d0bClaude	1611	.form-group input:hover, textarea:hover, select:hover,
	1612	input[type='text']:hover, input[type='email']:hover, input[type='password']:hover {
	1613	border-color: var(--border-strong);
	1614	}
	1615	.form-group input:focus, .form-group textarea:focus, .form-group select:focus,
	1616	input:focus, textarea:focus, select:focus {
06d5ffeClaude	1617	outline: none;
2ce1d0bClaude	1618	background: var(--bg);
	1619	border-color: var(--border-focus);
	1620	box-shadow: var(--ring);
06d5ffeClaude	1621	}
2ce1d0bClaude	1622	textarea { font-family: var(--font-mono); font-size: var(--t-sm); line-height: 1.55; }
06d5ffeClaude	1623	.input-disabled { opacity: 0.5; cursor: not-allowed; }
	1624
2ce1d0bClaude	1625	/* ============================================================ */
	1626	/* Auth (register / login / verify) */
	1627	/* ============================================================ */
	1628	.auth-container {
	1629	max-width: 420px;
	1630	margin: 64px auto;
	1631	padding: 32px;
	1632	background: var(--bg-elevated);
	1633	border: 1px solid var(--border);
	1634	border-radius: var(--r-lg);
	1635	box-shadow: var(--elev-2);
	1636	}
	1637	.auth-container h2 {
	1638	margin-bottom: 6px;
	1639	font-size: var(--t-lg);
	1640	letter-spacing: -0.02em;
	1641	}
	1642	.auth-container > p {
	1643	color: var(--text-muted);
	1644	font-size: var(--t-sm);
	1645	margin-bottom: 24px;
	1646	}
	1647	.auth-container .btn-primary { width: 100%; padding: 10px 16px; }
06d5ffeClaude	1648	.auth-error {
958d26aClaude	1649	background: rgba(248,113,113,0.08);
	1650	border: 1px solid rgba(248,113,113,0.35);
06d5ffeClaude	1651	color: var(--red);
2ce1d0bClaude	1652	padding: 10px 14px;
	1653	border-radius: var(--r-sm);
06d5ffeClaude	1654	margin-bottom: 16px;
2ce1d0bClaude	1655	font-size: var(--t-sm);
06d5ffeClaude	1656	}
	1657	.auth-success {
958d26aClaude	1658	background: rgba(52,211,153,0.08);
	1659	border: 1px solid rgba(52,211,153,0.35);
06d5ffeClaude	1660	color: var(--green);
2ce1d0bClaude	1661	padding: 10px 14px;
	1662	border-radius: var(--r-sm);
06d5ffeClaude	1663	margin-bottom: 16px;
2ce1d0bClaude	1664	font-size: var(--t-sm);
	1665	}
	1666	.auth-switch {
	1667	margin-top: 20px;
	1668	font-size: var(--t-sm);
	1669	color: var(--text-muted);
	1670	text-align: center;
	1671	}
	1672	.banner {
	1673	background: var(--accent-gradient-faint);
958d26aClaude	1674	border: 1px solid rgba(140,109,255,0.35);
2ce1d0bClaude	1675	color: var(--text);
	1676	padding: 10px 14px;
	1677	border-radius: var(--r-sm);
	1678	font-size: var(--t-sm);
06d5ffeClaude	1679	}
	1680
2ce1d0bClaude	1681	/* ============================================================ */
	1682	/* Settings */
	1683	/* ============================================================ */
	1684	.settings-container { max-width: 720px; }
	1685	.settings-container h2 { margin-bottom: 8px; font-size: var(--t-xl); letter-spacing: -0.02em; }
	1686	.settings-container > h2 + p { color: var(--text-muted); font-size: var(--t-sm); margin-bottom: 24px; }
	1687	.settings-container h3 { font-size: var(--t-md); margin-bottom: 12px; margin-top: 28px; }
	1688	.settings-container h3:first-of-type { margin-top: 0; }
06d5ffeClaude	1689	.ssh-keys-list { margin-bottom: 24px; }
	1690	.ssh-key-item {
	1691	display: flex;
	1692	justify-content: space-between;
	1693	align-items: center;
2ce1d0bClaude	1694	padding: 14px 16px;
06d5ffeClaude	1695	border: 1px solid var(--border);
2ce1d0bClaude	1696	border-radius: var(--r-md);
06d5ffeClaude	1697	margin-bottom: 8px;
2ce1d0bClaude	1698	background: var(--bg-elevated);
	1699	transition: border-color var(--t-fast) var(--ease);
06d5ffeClaude	1700	}
2ce1d0bClaude	1701	.ssh-key-item:hover { border-color: var(--border-strong); }
	1702	.ssh-key-meta { font-size: var(--t-xs); color: var(--text-muted); margin-top: 4px; }
	1703	.ssh-key-meta code { font-size: var(--t-xs); background: var(--bg-tertiary); padding: 1px 6px; border-radius: 3px; margin-right: 8px; }
06d5ffeClaude	1704
2ce1d0bClaude	1705	/* ============================================================ */
	1706	/* Repo header + nav */
	1707	/* ============================================================ */
fc1817aClaude	1708	.repo-header {
	1709	display: flex;
	1710	align-items: center;
debcf27Claude	1711	gap: 12px;
	1712	margin-bottom: 22px;
	1713	}
	1714	.repo-header-title {
	1715	display: flex;
	1716	align-items: center;
	1717	gap: 10px;
	1718	font-family: var(--font-display);
	1719	font-size: 24px;
	1720	letter-spacing: -0.025em;
	1721	flex-wrap: wrap;
	1722	}
	1723	.repo-header .owner {
	1724	color: var(--text-muted);
	1725	font-weight: 500;
	1726	transition: color var(--t-fast) var(--ease);
	1727	}
	1728	.repo-header .owner:hover { color: var(--text-link); text-decoration: none; }
	1729	.repo-header .separator { color: var(--text-faint); font-weight: 300; }
	1730	.repo-header .name {
	1731	color: var(--text-strong);
	1732	font-weight: 700;
	1733	letter-spacing: -0.028em;
fc1817aClaude	1734	}
2ce1d0bClaude	1735	.repo-header .name:hover { color: var(--text-link); text-decoration: none; }
debcf27Claude	1736	.repo-header-fork {
	1737	font-family: var(--font-mono);
	1738	font-size: 11px;
	1739	color: var(--text-muted);
	1740	margin-top: 4px;
	1741	letter-spacing: 0.01em;
	1742	}
	1743	.repo-header-fork a { color: var(--text-muted); }
	1744	.repo-header-fork a:hover { color: var(--accent); }
	1745	.repo-header-pill {
	1746	display: inline-flex;
	1747	align-items: center;
	1748	padding: 2px 10px;
	1749	border-radius: var(--r-full);
	1750	font-family: var(--font-mono);
	1751	font-size: 10px;
	1752	font-weight: 600;
	1753	letter-spacing: 0.12em;
	1754	text-transform: uppercase;
	1755	line-height: 1.6;
	1756	vertical-align: 4px;
	1757	}
	1758	.repo-header-pill-archived {
	1759	background: rgba(251,191,36,0.10);
	1760	color: var(--yellow);
	1761	border: 1px solid rgba(251,191,36,0.30);
	1762	}
	1763	.repo-header-pill-template {
	1764	background: var(--accent-gradient-faint);
	1765	color: var(--accent);
	1766	border: 1px solid rgba(140,109,255,0.30);
fc1817aClaude	1767	}
06d5ffeClaude	1768	.repo-header-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
fc1817aClaude	1769
	1770	.repo-nav {
	1771	display: flex;
debcf27Claude	1772	gap: 1px;
fc1817aClaude	1773	border-bottom: 1px solid var(--border);
debcf27Claude	1774	margin-bottom: 28px;
2ce1d0bClaude	1775	overflow-x: auto;
	1776	scrollbar-width: thin;
fc1817aClaude	1777	}
2ce1d0bClaude	1778	.repo-nav::-webkit-scrollbar { height: 0; }
fc1817aClaude	1779	.repo-nav a {
debcf27Claude	1780	position: relative;
	1781	padding: 11px 14px;
fc1817aClaude	1782	color: var(--text-muted);
	1783	border-bottom: 2px solid transparent;
2ce1d0bClaude	1784	font-size: var(--t-sm);
	1785	font-weight: 500;
	1786	margin-bottom: -1px;
debcf27Claude	1787	transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
2ce1d0bClaude	1788	white-space: nowrap;
	1789	}
debcf27Claude	1790	.repo-nav a:hover { text-decoration: none; color: var(--text-strong); background: var(--bg-hover); }
2ce1d0bClaude	1791	.repo-nav a.active {
debcf27Claude	1792	color: var(--text-strong);
	1793	font-weight: 600;
	1794	}
	1795	.repo-nav a.active::after {
	1796	content: '';
	1797	position: absolute;
	1798	left: 14px;
	1799	right: 14px;
	1800	bottom: -1px;
	1801	height: 2px;
	1802	background: var(--accent-gradient);
	1803	border-radius: 2px;
	1804	}
	1805	/* AI links in the right-side cluster — sparkle accent */
	1806	.repo-nav-ai {
	1807	color: var(--accent) !important;
	1808	font-weight: 500;
	1809	}
	1810	.repo-nav-ai:hover {
	1811	color: var(--accent-hover) !important;
	1812	background: var(--accent-gradient-faint) !important;
	1813	}
	1814	.repo-nav-ai.active {
	1815	color: var(--accent-hover) !important;
2ce1d0bClaude	1816	font-weight: 600;
fc1817aClaude	1817	}
	1818
2ce1d0bClaude	1819	.breadcrumb {
	1820	display: flex;
debcf27Claude	1821	gap: 6px;
2ce1d0bClaude	1822	align-items: center;
debcf27Claude	1823	margin-bottom: 18px;
2ce1d0bClaude	1824	color: var(--text-muted);
	1825	font-size: var(--t-sm);
	1826	font-family: var(--font-mono);
debcf27Claude	1827	font-feature-settings: var(--mono-feat);
2ce1d0bClaude	1828	}
	1829	.breadcrumb a { color: var(--text-link); font-weight: 500; }
	1830	.breadcrumb a:hover { color: var(--accent-hover); }
debcf27Claude	1831	.breadcrumb strong {
	1832	color: var(--text-strong);
	1833	font-weight: 600;
fc1817aClaude	1834	}
	1835
debcf27Claude	1836	/* Page header — eyebrow + title + optional actions row.
	1837	Use on dashboard, settings, admin, any "section landing" page. */
	1838	.page-header {
	1839	display: flex;
	1840	align-items: flex-end;
	1841	justify-content: space-between;
	1842	gap: 16px;
	1843	margin-bottom: 28px;
	1844	padding-bottom: 20px;
	1845	border-bottom: 1px solid var(--border-subtle);
	1846	flex-wrap: wrap;
	1847	}
	1848	.page-header-text { flex: 1; min-width: 280px; }
	1849	.page-header .eyebrow { margin-bottom: var(--s-2); }
	1850	.page-header h1 {
	1851	font-family: var(--font-display);
	1852	font-size: clamp(24px, 3vw, 36px);
	1853	line-height: 1.1;
	1854	letter-spacing: -0.028em;
	1855	margin-bottom: 6px;
	1856	}
	1857	.page-header p {
	1858	color: var(--text-muted);
	1859	font-size: var(--t-sm);
	1860	line-height: 1.55;
	1861	max-width: 640px;
	1862	}
	1863	.page-header-actions { display: flex; gap: 8px; align-items: center; }
fc1817aClaude	1864
2ce1d0bClaude	1865	/* ============================================================ */
	1866	/* File browser table */
	1867	/* ============================================================ */
	1868	.file-table {
	1869	width: 100%;
	1870	border: 1px solid var(--border);
	1871	border-radius: var(--r-md);
	1872	overflow: hidden;
	1873	background: var(--bg-elevated);
debcf27Claude	1874	border-collapse: collapse;
2ce1d0bClaude	1875	}
debcf27Claude	1876	.file-table tr { border-bottom: 1px solid var(--border-subtle); transition: background var(--t-fast) var(--ease); }
fc1817aClaude	1877	.file-table tr:last-child { border-bottom: none; }
debcf27Claude	1878	.file-table td {
	1879	padding: 9px 16px;
	1880	font-size: var(--t-sm);
	1881	font-family: var(--font-mono);
	1882	font-feature-settings: var(--mono-feat);
	1883	}
2ce1d0bClaude	1884	.file-table tr:hover { background: var(--bg-hover); }
debcf27Claude	1885	.file-icon {
	1886	width: 22px;
	1887	color: var(--text-faint);
	1888	font-size: 13px;
	1889	text-align: center;
	1890	}
	1891	.file-name a {
	1892	color: var(--text);
	1893	font-weight: 500;
	1894	transition: color var(--t-fast) var(--ease);
	1895	}
	1896	.file-name a:hover { color: var(--accent); text-decoration: none; }
fc1817aClaude	1897
2ce1d0bClaude	1898	/* ============================================================ */
	1899	/* Blob view */
	1900	/* ============================================================ */
fc1817aClaude	1901	.blob-view {
	1902	border: 1px solid var(--border);
2ce1d0bClaude	1903	border-radius: var(--r-md);
fc1817aClaude	1904	overflow: hidden;
2ce1d0bClaude	1905	background: var(--bg-elevated);
fc1817aClaude	1906	}
	1907	.blob-header {
	1908	background: var(--bg-secondary);
2ce1d0bClaude	1909	padding: 10px 16px;
fc1817aClaude	1910	border-bottom: 1px solid var(--border);
2ce1d0bClaude	1911	font-size: var(--t-sm);
fc1817aClaude	1912	color: var(--text-muted);
06d5ffeClaude	1913	display: flex;
	1914	justify-content: space-between;
	1915	align-items: center;
fc1817aClaude	1916	}
	1917	.blob-code {
	1918	overflow-x: auto;
	1919	font-family: var(--font-mono);
2ce1d0bClaude	1920	font-size: var(--t-sm);
	1921	line-height: 1.65;
fc1817aClaude	1922	}
	1923	.blob-code table { width: 100%; border-collapse: collapse; }
	1924	.blob-code .line-num {
	1925	width: 1%;
2ce1d0bClaude	1926	min-width: 56px;
	1927	padding: 0 14px;
fc1817aClaude	1928	text-align: right;
2ce1d0bClaude	1929	color: var(--text-faint);
fc1817aClaude	1930	user-select: none;
	1931	white-space: nowrap;
	1932	border-right: 1px solid var(--border);
	1933	}
2ce1d0bClaude	1934	.blob-code .line-content { padding: 0 16px; white-space: pre; }
	1935	.blob-code tr:hover { background: var(--bg-hover); }
fc1817aClaude	1936
2ce1d0bClaude	1937	/* ============================================================ */
	1938	/* Commits + diffs */
	1939	/* ============================================================ */
	1940	.commit-list {
	1941	border: 1px solid var(--border);
	1942	border-radius: var(--r-md);
	1943	overflow: hidden;
	1944	background: var(--bg-elevated);
	1945	}
fc1817aClaude	1946	.commit-item {
	1947	display: flex;
	1948	justify-content: space-between;
	1949	align-items: center;
debcf27Claude	1950	padding: 14px 18px;
	1951	border-bottom: 1px solid var(--border-subtle);
2ce1d0bClaude	1952	transition: background var(--t-fast) var(--ease);
fc1817aClaude	1953	}
	1954	.commit-item:last-child { border-bottom: none; }
2ce1d0bClaude	1955	.commit-item:hover { background: var(--bg-hover); }
debcf27Claude	1956	.commit-message {
	1957	font-size: var(--t-sm);
	1958	font-weight: 500;
	1959	line-height: 1.45;
	1960	color: var(--text-strong);
	1961	letter-spacing: -0.005em;
	1962	}
	1963	.commit-meta {
	1964	font-family: var(--font-mono);
	1965	font-size: 11px;
	1966	color: var(--text-muted);
	1967	margin-top: 5px;
	1968	letter-spacing: 0.01em;
	1969	}
fc1817aClaude	1970	.commit-sha {
	1971	font-family: var(--font-mono);
debcf27Claude	1972	font-feature-settings: var(--mono-feat);
	1973	font-size: 11px;
	1974	padding: 4px 9px;
fc1817aClaude	1975	background: var(--bg-tertiary);
	1976	border: 1px solid var(--border);
2ce1d0bClaude	1977	border-radius: var(--r-sm);
debcf27Claude	1978	color: var(--accent);
	1979	font-weight: 600;
	1980	letter-spacing: 0.02em;
2ce1d0bClaude	1981	transition: all var(--t-fast) var(--ease);
fc1817aClaude	1982	}
debcf27Claude	1983	.commit-sha:hover {
	1984	border-color: rgba(140,109,255,0.40);
	1985	background: var(--accent-gradient-faint);
	1986	color: var(--accent-hover);
	1987	text-decoration: none;
fc1817aClaude	1988	}
	1989
	1990	.diff-view { margin-top: 16px; }
	1991	.diff-file {
	1992	border: 1px solid var(--border);
2ce1d0bClaude	1993	border-radius: var(--r-md);
fc1817aClaude	1994	margin-bottom: 16px;
	1995	overflow: hidden;
2ce1d0bClaude	1996	background: var(--bg-elevated);
fc1817aClaude	1997	}
	1998	.diff-file-header {
	1999	background: var(--bg-secondary);
2ce1d0bClaude	2000	padding: 10px 16px;
fc1817aClaude	2001	border-bottom: 1px solid var(--border);
	2002	font-family: var(--font-mono);
2ce1d0bClaude	2003	font-size: var(--t-sm);
	2004	font-weight: 500;
fc1817aClaude	2005	}
	2006	.diff-content {
	2007	overflow-x: auto;
	2008	font-family: var(--font-mono);
2ce1d0bClaude	2009	font-size: var(--t-sm);
	2010	line-height: 1.65;
fc1817aClaude	2011	}
958d26aClaude	2012	.diff-content .line-add { background: rgba(52,211,153,0.10); color: var(--green); }
	2013	.diff-content .line-del { background: rgba(248,113,113,0.08); color: var(--red); }
	2014	.diff-content .line-hunk { background: rgba(140,109,255,0.06); color: var(--text-link); }
2ce1d0bClaude	2015	.diff-content .line { padding: 0 16px; white-space: pre; display: block; }
fc1817aClaude	2016
	2017	.stat-add { color: var(--green); font-weight: 600; }
	2018	.stat-del { color: var(--red); font-weight: 600; }
	2019
2ce1d0bClaude	2020	/* ============================================================ */
	2021	/* Empty state */
	2022	/* ============================================================ */
fc1817aClaude	2023	.empty-state {
	2024	text-align: center;
958d26aClaude	2025	padding: 96px 24px;
fc1817aClaude	2026	color: var(--text-muted);
2ce1d0bClaude	2027	border: 1px dashed var(--border);
	2028	border-radius: var(--r-lg);
958d26aClaude	2029	background:
	2030	radial-gradient(60% 60% at 50% 0%, rgba(140,109,255,0.05), transparent 70%),
	2031	var(--bg-elevated);
	2032	position: relative;
	2033	overflow: hidden;
	2034	}
	2035	.empty-state::before {
	2036	content: '';
	2037	position: absolute;
	2038	inset: 0;
	2039	background-image: radial-gradient(rgba(255,255,255,0.025) 1px, transparent 1px);
	2040	background-size: 24px 24px;
	2041	opacity: 0.5;
	2042	pointer-events: none;
	2043	mask-image: radial-gradient(ellipse at center, #000 30%, transparent 70%);
	2044	-webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 70%);
	2045	}
	2046	:root[data-theme='light'] .empty-state::before {
	2047	background-image: radial-gradient(rgba(15,16,28,0.08) 1px, transparent 1px);
fc1817aClaude	2048	}
958d26aClaude	2049	.empty-state > * { position: relative; z-index: 1; }
2ce1d0bClaude	2050	.empty-state h2 {
958d26aClaude	2051	font-size: var(--t-xl);
2ce1d0bClaude	2052	margin-bottom: 8px;
958d26aClaude	2053	color: var(--text-strong);
	2054	letter-spacing: -0.022em;
2ce1d0bClaude	2055	}
958d26aClaude	2056	.empty-state p { font-size: var(--t-md); max-width: 480px; margin: 0 auto; line-height: 1.55; }
fc1817aClaude	2057	.empty-state pre {
	2058	text-align: left;
	2059	display: inline-block;
	2060	background: var(--bg-secondary);
958d26aClaude	2061	padding: 18px 24px;
	2062	border-radius: var(--r-md);
fc1817aClaude	2063	border: 1px solid var(--border);
	2064	font-family: var(--font-mono);
958d26aClaude	2065	font-feature-settings: var(--mono-feat);
2ce1d0bClaude	2066	font-size: var(--t-sm);
958d26aClaude	2067	margin-top: 24px;
fc1817aClaude	2068	line-height: 1.8;
2ce1d0bClaude	2069	color: var(--text);
958d26aClaude	2070	box-shadow: var(--elev-1);
fc1817aClaude	2071	}
	2072
2ce1d0bClaude	2073	/* ============================================================ */
	2074	/* Badges */
	2075	/* ============================================================ */
fc1817aClaude	2076	.badge {
2ce1d0bClaude	2077	display: inline-flex;
	2078	align-items: center;
	2079	gap: 4px;
	2080	padding: 2px 9px;
	2081	border-radius: var(--r-full);
	2082	font-size: var(--t-xs);
fc1817aClaude	2083	font-weight: 500;
	2084	background: var(--bg-tertiary);
	2085	border: 1px solid var(--border);
	2086	color: var(--text-muted);
2ce1d0bClaude	2087	line-height: 1.5;
fc1817aClaude	2088	}
	2089
2ce1d0bClaude	2090	/* ============================================================ */
	2091	/* Branch dropdown */
	2092	/* ============================================================ */
fc1817aClaude	2093	.branch-selector {
	2094	display: inline-flex;
	2095	align-items: center;
2ce1d0bClaude	2096	gap: 6px;
	2097	padding: 6px 12px;
	2098	background: var(--bg-elevated);
fc1817aClaude	2099	border: 1px solid var(--border);
2ce1d0bClaude	2100	border-radius: var(--r-sm);
	2101	font-size: var(--t-sm);
fc1817aClaude	2102	color: var(--text);
	2103	margin-bottom: 12px;
2ce1d0bClaude	2104	transition: border-color var(--t-fast) var(--ease);
fc1817aClaude	2105	}
2ce1d0bClaude	2106	.branch-selector:hover { border-color: var(--border-strong); }
fc1817aClaude	2107
06d5ffeClaude	2108	.branch-dropdown {
	2109	position: relative;
	2110	display: inline-block;
	2111	margin-bottom: 12px;
	2112	}
	2113	.branch-dropdown-content {
	2114	display: none;
	2115	position: absolute;
2ce1d0bClaude	2116	top: calc(100% + 4px);
06d5ffeClaude	2117	left: 0;
	2118	z-index: 10;
2ce1d0bClaude	2119	min-width: 220px;
	2120	background: var(--bg-elevated);
	2121	border: 1px solid var(--border-strong);
	2122	border-radius: var(--r-md);
	2123	overflow: hidden;
	2124	box-shadow: var(--elev-3);
06d5ffeClaude	2125	}
	2126	.branch-dropdown:hover .branch-dropdown-content,
	2127	.branch-dropdown:focus-within .branch-dropdown-content { display: block; }
	2128	.branch-dropdown-content a {
	2129	display: block;
2ce1d0bClaude	2130	padding: 9px 14px;
	2131	font-size: var(--t-sm);
06d5ffeClaude	2132	color: var(--text);
	2133	border-bottom: 1px solid var(--border);
2ce1d0bClaude	2134	transition: background var(--t-fast) var(--ease);
06d5ffeClaude	2135	}
	2136	.branch-dropdown-content a:last-child { border-bottom: none; }
2ce1d0bClaude	2137	.branch-dropdown-content a:hover { background: var(--bg-hover); text-decoration: none; }
	2138	.branch-dropdown-content a.active-branch { color: var(--text-link); font-weight: 600; background: var(--accent-gradient-faint); }
06d5ffeClaude	2139
2ce1d0bClaude	2140	/* ============================================================ */
	2141	/* Card grid */
	2142	/* ============================================================ */
	2143	.card-grid {
	2144	display: grid;
	2145	grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
	2146	gap: 16px;
	2147	}
fc1817aClaude	2148	.card {
	2149	border: 1px solid var(--border);
2ce1d0bClaude	2150	border-radius: var(--r-md);
958d26aClaude	2151	padding: 20px;
2ce1d0bClaude	2152	background: var(--bg-elevated);
	2153	transition:
958d26aClaude	2154	border-color var(--t-base) var(--ease),
	2155	transform var(--t-base) var(--ease-out-quart),
2ce1d0bClaude	2156	box-shadow var(--t-base) var(--ease);
	2157	position: relative;
	2158	overflow: hidden;
958d26aClaude	2159	isolation: isolate;
	2160	}
	2161	.card::before {
	2162	content: '';
	2163	position: absolute;
	2164	inset: 0;
	2165	background: linear-gradient(135deg, rgba(140,109,255,0.06), transparent 50%);
	2166	opacity: 0;
	2167	transition: opacity var(--t-base) var(--ease);
	2168	pointer-events: none;
	2169	z-index: -1;
2ce1d0bClaude	2170	}
	2171	.card:hover {
	2172	border-color: var(--border-strong);
	2173	box-shadow: var(--elev-2);
958d26aClaude	2174	transform: translateY(-2px);
2ce1d0bClaude	2175	}
958d26aClaude	2176	.card:hover::before { opacity: 1; }
	2177	.card h3 { font-size: var(--t-md); margin-bottom: 6px; letter-spacing: -0.012em; }
2ce1d0bClaude	2178	.card h3 a { color: var(--text); font-weight: 600; }
	2179	.card h3 a:hover { color: var(--text-link); }
	2180	.card p { font-size: var(--t-sm); color: var(--text-muted); line-height: 1.5; }
	2181	.card-meta {
	2182	display: flex;
	2183	gap: 14px;
	2184	margin-top: 14px;
	2185	padding-top: 14px;
	2186	border-top: 1px solid var(--border);
	2187	font-size: var(--t-xs);
	2188	color: var(--text-muted);
	2189	}
	2190	.card-meta span { display: flex; align-items: center; gap: 5px; }
	2191
	2192	/* ============================================================ */
	2193	/* Stat card / box */
	2194	/* ============================================================ */
	2195	.stat-card {
	2196	background: var(--bg-elevated);
	2197	border: 1px solid var(--border);
	2198	border-radius: var(--r-md);
fc1817aClaude	2199	padding: 16px;
2ce1d0bClaude	2200	transition: border-color var(--t-fast) var(--ease);
	2201	}
	2202	.stat-card:hover { border-color: var(--border-strong); }
	2203	.stat-label {
	2204	font-size: var(--t-xs);
	2205	color: var(--text-muted);
	2206	text-transform: uppercase;
	2207	letter-spacing: 0.06em;
	2208	font-weight: 500;
	2209	}
	2210	.stat-value {
	2211	font-size: var(--t-xl);
	2212	font-weight: 700;
	2213	margin-top: 4px;
	2214	letter-spacing: -0.025em;
	2215	color: var(--text);
	2216	font-feature-settings: 'tnum';
fc1817aClaude	2217	}
06d5ffeClaude	2218
2ce1d0bClaude	2219	/* ============================================================ */
	2220	/* Star button */
	2221	/* ============================================================ */
06d5ffeClaude	2222	.star-btn {
	2223	display: inline-flex;
	2224	align-items: center;
	2225	gap: 6px;
2ce1d0bClaude	2226	padding: 5px 12px;
	2227	background: var(--bg-elevated);
06d5ffeClaude	2228	border: 1px solid var(--border);
2ce1d0bClaude	2229	border-radius: var(--r-sm);
06d5ffeClaude	2230	color: var(--text);
2ce1d0bClaude	2231	font-size: var(--t-sm);
	2232	font-weight: 500;
06d5ffeClaude	2233	cursor: pointer;
2ce1d0bClaude	2234	transition: all var(--t-fast) var(--ease);
	2235	}
	2236	.star-btn:hover { background: var(--bg-surface); border-color: var(--border-strong); text-decoration: none; }
	2237	.star-btn.starred {
	2238	color: var(--yellow);
958d26aClaude	2239	border-color: rgba(251,191,36,0.4);
	2240	background: rgba(251,191,36,0.08);
06d5ffeClaude	2241	}
	2242
2ce1d0bClaude	2243	/* ============================================================ */
	2244	/* User profile */
	2245	/* ============================================================ */
06d5ffeClaude	2246	.user-profile {
	2247	display: flex;
	2248	gap: 32px;
	2249	margin-bottom: 32px;
2ce1d0bClaude	2250	padding: 24px;
	2251	background: var(--bg-elevated);
	2252	border: 1px solid var(--border);
	2253	border-radius: var(--r-lg);
06d5ffeClaude	2254	}
	2255	.user-avatar {
	2256	width: 96px;
	2257	height: 96px;
2ce1d0bClaude	2258	border-radius: var(--r-full);
	2259	background: var(--accent-gradient-soft);
	2260	border: 1px solid var(--border-strong);
06d5ffeClaude	2261	display: flex;
	2262	align-items: center;
	2263	justify-content: center;
2ce1d0bClaude	2264	font-size: 36px;
	2265	font-weight: 600;
	2266	color: var(--text);
06d5ffeClaude	2267	flex-shrink: 0;
2ce1d0bClaude	2268	letter-spacing: -0.02em;
06d5ffeClaude	2269	}
2ce1d0bClaude	2270	.user-info h2 { font-size: var(--t-xl); margin-bottom: 2px; letter-spacing: -0.025em; }
	2271	.user-info .username { font-size: var(--t-md); color: var(--text-muted); }
	2272	.user-info .bio { font-size: var(--t-sm); color: var(--text-muted); margin-top: 10px; line-height: 1.55; }
06d5ffeClaude	2273
2ce1d0bClaude	2274	/* ============================================================ */
	2275	/* New repo form */
	2276	/* ============================================================ */
	2277	.new-repo-form { max-width: 640px; }
	2278	.new-repo-form h2 { margin-bottom: 24px; font-size: var(--t-xl); letter-spacing: -0.025em; }
	2279	.visibility-options { display: flex; gap: 12px; margin-bottom: 20px; }
06d5ffeClaude	2280	.visibility-option {
	2281	flex: 1;
2ce1d0bClaude	2282	padding: 16px;
06d5ffeClaude	2283	border: 1px solid var(--border);
2ce1d0bClaude	2284	border-radius: var(--r-md);
	2285	background: var(--bg-elevated);
06d5ffeClaude	2286	cursor: pointer;
2ce1d0bClaude	2287	text-align: left;
	2288	transition: all var(--t-fast) var(--ease);
	2289	}
	2290	.visibility-option:hover { border-color: var(--border-strong); background: var(--bg-surface); }
	2291	.visibility-option:has(input:checked) {
	2292	border-color: var(--accent);
	2293	background: var(--accent-gradient-faint);
	2294	box-shadow: 0 0 0 1px var(--accent);
06d5ffeClaude	2295	}
	2296	.visibility-option input { display: none; }
2ce1d0bClaude	2297	.visibility-option .vis-label { font-size: var(--t-sm); font-weight: 600; margin-bottom: 4px; }
	2298	.visibility-option .vis-desc { font-size: var(--t-xs); color: var(--text-muted); }
79136bbClaude	2299
2ce1d0bClaude	2300	/* ============================================================ */
	2301	/* Issues */
	2302	/* ============================================================ */
	2303	.issue-tabs { display: flex; gap: 4px; }
	2304	.issue-tabs a {
	2305	color: var(--text-muted);
	2306	font-size: var(--t-sm);
	2307	font-weight: 500;
	2308	padding: 6px 12px;
	2309	border-radius: var(--r-sm);
	2310	transition: all var(--t-fast) var(--ease);
	2311	}
	2312	.issue-tabs a:hover { color: var(--text); background: var(--bg-hover); text-decoration: none; }
	2313	.issue-tabs a.active { color: var(--text); background: var(--bg-elevated); }
79136bbClaude	2314
2ce1d0bClaude	2315	.issue-list {
	2316	border: 1px solid var(--border);
	2317	border-radius: var(--r-md);
	2318	overflow: hidden;
	2319	background: var(--bg-elevated);
	2320	}
79136bbClaude	2321	.issue-item {
	2322	display: flex;
2ce1d0bClaude	2323	gap: 14px;
79136bbClaude	2324	align-items: flex-start;
2ce1d0bClaude	2325	padding: 14px 16px;
79136bbClaude	2326	border-bottom: 1px solid var(--border);
2ce1d0bClaude	2327	transition: background var(--t-fast) var(--ease);
79136bbClaude	2328	}
	2329	.issue-item:last-child { border-bottom: none; }
2ce1d0bClaude	2330	.issue-item:hover { background: var(--bg-hover); }
	2331	.issue-state-icon {
	2332	font-size: 14px;
	2333	padding-top: 2px;
	2334	width: 18px;
	2335	height: 18px;
	2336	display: inline-flex;
	2337	align-items: center;
	2338	justify-content: center;
	2339	border-radius: var(--r-full);
	2340	flex-shrink: 0;
	2341	}
79136bbClaude	2342	.state-open { color: var(--green); }
958d26aClaude	2343	.state-closed { color: #b69dff; }
2ce1d0bClaude	2344	.issue-title {
debcf27Claude	2345	font-family: var(--font-display);
	2346	font-size: var(--t-md);
2ce1d0bClaude	2347	font-weight: 600;
debcf27Claude	2348	line-height: 1.35;
	2349	letter-spacing: -0.012em;
	2350	}
	2351	.issue-title a { color: var(--text-strong); transition: color var(--t-fast) var(--ease); }
	2352	.issue-title a:hover { color: var(--accent); text-decoration: none; }
	2353	.issue-meta {
	2354	font-family: var(--font-mono);
	2355	font-size: 11px;
	2356	color: var(--text-muted);
	2357	margin-top: 5px;
	2358	letter-spacing: 0.01em;
2ce1d0bClaude	2359	}
79136bbClaude	2360
	2361	.issue-badge {
	2362	display: inline-flex;
	2363	align-items: center;
2ce1d0bClaude	2364	gap: 6px;
79136bbClaude	2365	padding: 4px 12px;
2ce1d0bClaude	2366	border-radius: var(--r-full);
	2367	font-size: var(--t-sm);
79136bbClaude	2368	font-weight: 500;
2ce1d0bClaude	2369	line-height: 1.4;
79136bbClaude	2370	}
958d26aClaude	2371	.badge-open { background: rgba(52,211,153,0.10); color: var(--green); border: 1px solid rgba(52,211,153,0.35); }
	2372	.badge-closed { background: rgba(182,157,255,0.10); color: #b69dff; border: 1px solid rgba(182,157,255,0.35); }
	2373	.badge-merged { background: rgba(140,109,255,0.10); color: var(--accent); border: 1px solid rgba(140,109,255,0.35); }
2ce1d0bClaude	2374	.state-merged { color: var(--accent); }
958d26aClaude	2375	.ai-review { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(140,109,255,0.3); }
79136bbClaude	2376
2ce1d0bClaude	2377	.issue-detail { max-width: 920px; }
79136bbClaude	2378	.issue-comment-box {
	2379	border: 1px solid var(--border);
2ce1d0bClaude	2380	border-radius: var(--r-md);
79136bbClaude	2381	margin-bottom: 16px;
	2382	overflow: hidden;
2ce1d0bClaude	2383	background: var(--bg-elevated);
79136bbClaude	2384	}
	2385	.comment-header {
	2386	background: var(--bg-secondary);
2ce1d0bClaude	2387	padding: 10px 16px;
79136bbClaude	2388	border-bottom: 1px solid var(--border);
2ce1d0bClaude	2389	font-size: var(--t-sm);
79136bbClaude	2390	color: var(--text-muted);
	2391	}
	2392
2ce1d0bClaude	2393	/* ============================================================ */
	2394	/* Panel — flexible container used across many pages */
	2395	/* ============================================================ */
	2396	.panel {
	2397	background: var(--bg-elevated);
	2398	border: 1px solid var(--border);
	2399	border-radius: var(--r-md);
	2400	overflow: hidden;
	2401	}
	2402	.panel-item {
	2403	display: flex;
	2404	align-items: center;
	2405	gap: 12px;
	2406	padding: 12px 16px;
79136bbClaude	2407	border-bottom: 1px solid var(--border);
2ce1d0bClaude	2408	transition: background var(--t-fast) var(--ease);
	2409	}
	2410	.panel-item:last-child { border-bottom: none; }
	2411	.panel-item:hover { background: var(--bg-hover); }
	2412	.panel-empty {
	2413	padding: 24px;
	2414	text-align: center;
79136bbClaude	2415	color: var(--text-muted);
2ce1d0bClaude	2416	font-size: var(--t-sm);
79136bbClaude	2417	}
	2418
2ce1d0bClaude	2419	/* ============================================================ */
	2420	/* Search */
	2421	/* ============================================================ */
79136bbClaude	2422	.search-results .diff-file { margin-bottom: 12px; }
16b325cClaude	2423
2ce1d0bClaude	2424	/* ============================================================ */
	2425	/* Timeline */
	2426	/* ============================================================ */
	2427	.timeline { position: relative; padding-left: 28px; }
16b325cClaude	2428	.timeline::before {
	2429	content: '';
	2430	position: absolute;
	2431	left: 4px;
	2432	top: 8px;
	2433	bottom: 8px;
	2434	width: 2px;
2ce1d0bClaude	2435	background: linear-gradient(180deg, var(--border) 0%, transparent 100%);
16b325cClaude	2436	}
2ce1d0bClaude	2437	.timeline-item { position: relative; padding-bottom: 16px; }
16b325cClaude	2438	.timeline-dot {
	2439	position: absolute;
2ce1d0bClaude	2440	left: -28px;
	2441	top: 8px;
	2442	width: 12px;
	2443	height: 12px;
	2444	border-radius: var(--r-full);
	2445	background: var(--accent-gradient);
16b325cClaude	2446	border: 2px solid var(--bg);
2ce1d0bClaude	2447	box-shadow: 0 0 0 1px var(--border-strong);
16b325cClaude	2448	}
	2449	.timeline-content {
2ce1d0bClaude	2450	background: var(--bg-elevated);
16b325cClaude	2451	border: 1px solid var(--border);
2ce1d0bClaude	2452	border-radius: var(--r-md);
	2453	padding: 14px 16px;
16b325cClaude	2454	}
f1ab587Claude	2455
2ce1d0bClaude	2456	/* ============================================================ */
	2457	/* Toggle switch */
	2458	/* ============================================================ */
f1ab587Claude	2459	.toggle-switch {
	2460	position: relative;
	2461	display: inline-block;
2ce1d0bClaude	2462	width: 40px;
	2463	height: 22px;
f1ab587Claude	2464	flex-shrink: 0;
	2465	margin-left: 16px;
	2466	}
	2467	.toggle-switch input { opacity: 0; width: 0; height: 0; }
	2468	.toggle-slider {
	2469	position: absolute;
	2470	cursor: pointer;
	2471	top: 0; left: 0; right: 0; bottom: 0;
	2472	background: var(--bg-tertiary);
	2473	border: 1px solid var(--border);
2ce1d0bClaude	2474	border-radius: var(--r-full);
	2475	transition: all var(--t-base) var(--ease);
f1ab587Claude	2476	}
	2477	.toggle-slider::before {
	2478	content: '';
	2479	position: absolute;
2ce1d0bClaude	2480	height: 16px;
	2481	width: 16px;
f1ab587Claude	2482	left: 2px;
	2483	bottom: 2px;
	2484	background: var(--text-muted);
2ce1d0bClaude	2485	border-radius: var(--r-full);
	2486	transition: all var(--t-base) var(--ease);
f1ab587Claude	2487	}
	2488	.toggle-switch input:checked + .toggle-slider {
2ce1d0bClaude	2489	background: var(--accent-gradient);
	2490	border-color: transparent;
958d26aClaude	2491	box-shadow: 0 0 0 1px rgba(140,109,255,0.4);
f1ab587Claude	2492	}
	2493	.toggle-switch input:checked + .toggle-slider::before {
2ce1d0bClaude	2494	transform: translateX(18px);
f1ab587Claude	2495	background: #fff;
	2496	}
ef8d378Claude	2497
	2498	/* ============================================================
	2499	* 2026 polish layer (purely additive — no layout changes).
	2500	* Improves typography rendering, focus states, hover affordances,
	2501	* and adds the gradient brand cue to primary buttons. Anything
	2502	* that could alter dimensions stays in the rules above.
	2503	* ============================================================ */
	2504	html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
	2505	body { letter-spacing: -0.005em; font-feature-settings: 'cv11', 'ss01', 'ss03'; }
	2506	*::selection { background: rgba(168,85,247,0.35); color: var(--text); }
	2507
	2508	h1, h2, h3, h4 { letter-spacing: -0.018em; }
	2509	h1 { letter-spacing: -0.025em; }
	2510
	2511	/* Smoother colour transitions everywhere links live */
	2512	a { transition: color 120ms cubic-bezier(0.16,1,0.3,1); }
	2513
	2514	/* Buttons: focus rings + smoother transitions; primary gets the gradient */
	2515	.btn {
	2516	transition:
	2517	background 120ms cubic-bezier(0.16,1,0.3,1),
	2518	border-color 120ms cubic-bezier(0.16,1,0.3,1),
	2519	transform 120ms cubic-bezier(0.16,1,0.3,1),
	2520	box-shadow 120ms cubic-bezier(0.16,1,0.3,1);
	2521	}
	2522	.btn:active { transform: translateY(0.5px); }
	2523	.btn:focus-visible {
	2524	outline: none;
	2525	box-shadow: 0 0 0 3px rgba(168,85,247,0.30);
	2526	}
	2527	.btn-primary {
	2528	background: linear-gradient(135deg, #a855f7 0%, #06b6d4 100%);
	2529	border-color: transparent;
	2530	box-shadow:
	2531	inset 0 1px 0 rgba(255,255,255,0.15),
	2532	0 1px 2px rgba(168,85,247,0.25);
	2533	}
	2534	.btn-primary:hover {
	2535	background: linear-gradient(135deg, #b766f8 0%, #22cce0 100%);
	2536	filter: none;
	2537	box-shadow:
	2538	inset 0 1px 0 rgba(255,255,255,0.20),
	2539	0 4px 12px rgba(168,85,247,0.30);
	2540	}
	2541
	2542	/* Inputs: cleaner focus ring + hover */
	2543	.form-group input:hover,
	2544	.form-group textarea:hover,
	2545	.form-group select:hover {
	2546	border-color: rgba(255,255,255,0.14);
	2547	}
	2548	.form-group input:focus,
	2549	.form-group textarea:focus,
	2550	.form-group select:focus {
	2551	border-color: rgba(168,85,247,0.55);
	2552	box-shadow: 0 0 0 3px rgba(168,85,247,0.22);
	2553	}
	2554	:root[data-theme='light'] .form-group input:hover,
	2555	:root[data-theme='light'] .form-group textarea:hover,
	2556	:root[data-theme='light'] .form-group select:hover {
	2557	border-color: rgba(0,0,0,0.18);
	2558	}
	2559
	2560	/* Cards: subtle hover lift */
	2561	.card {
	2562	transition:
	2563	border-color 160ms cubic-bezier(0.16,1,0.3,1),
	2564	transform 160ms cubic-bezier(0.16,1,0.3,1),
	2565	box-shadow 200ms cubic-bezier(0.16,1,0.3,1);
	2566	}
	2567	.card:hover {
	2568	border-color: rgba(255,255,255,0.18);
	2569	transform: translateY(-1px);
	2570	box-shadow: 0 8px 24px rgba(0,0,0,0.30);
	2571	}
	2572	:root[data-theme='light'] .card:hover {
	2573	border-color: rgba(0,0,0,0.18);
	2574	box-shadow: 0 8px 24px rgba(0,0,0,0.08);
	2575	}
	2576
	2577	/* Issue / commit / panel rows: smoother hover */
	2578	.issue-item, .commit-item {
	2579	transition: background 120ms cubic-bezier(0.16,1,0.3,1);
	2580	}
	2581	.repo-nav a {
	2582	transition: color 120ms cubic-bezier(0.16,1,0.3,1),
	2583	border-bottom-color 120ms cubic-bezier(0.16,1,0.3,1);
	2584	}
	2585	.nav-link {
	2586	transition: color 120ms cubic-bezier(0.16,1,0.3,1);
	2587	}
	2588
	2589	/* Auth card: subtle elevation so register/login feel premium */
	2590	.auth-container {
	2591	background: var(--bg-secondary);
	2592	border: 1px solid var(--border);
	2593	border-radius: var(--r-lg, 12px);
	2594	padding: 32px;
	2595	box-shadow: 0 4px 16px rgba(0,0,0,0.30), 0 0 0 1px var(--border);
	2596	}
	2597	:root[data-theme='light'] .auth-container {
	2598	box-shadow: 0 4px 16px rgba(0,0,0,0.06), 0 0 0 1px var(--border);
	2599	}
	2600	.auth-container h2 { letter-spacing: -0.025em; }
	2601
	2602	/* Empty state: dashed border, generous padding */
	2603	.empty-state {
	2604	border: 1px dashed var(--border);
	2605	border-radius: var(--r-lg, 12px);
	2606	background: var(--bg);
	2607	}
	2608
	2609	/* Badges + commit-sha: smoother transition */
	2610	.commit-sha, .badge { transition: all 120ms cubic-bezier(0.16,1,0.3,1); }
	2611
	2612	/* Gradient text utility — matches landing's accent treatment */
	2613	.gradient-text {
	2614	background: linear-gradient(135deg, #a855f7 0%, #06b6d4 100%);
	2615	-webkit-background-clip: text;
	2616	background-clip: text;
	2617	-webkit-text-fill-color: transparent;
	2618	}
	2619
	2620	/* Custom scrollbars (subtle, themed) */
	2621	::-webkit-scrollbar { width: 10px; height: 10px; }
	2622	::-webkit-scrollbar-track { background: transparent; }
	2623	::-webkit-scrollbar-thumb {
	2624	background: rgba(255,255,255,0.06);
	2625	border: 2px solid var(--bg);
	2626	border-radius: 9999px;
	2627	}
	2628	::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.14); }
	2629	:root[data-theme='light'] ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.10); }
	2630	:root[data-theme='light'] ::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.18); }
	2631
	2632	/* Honour reduced-motion preference */
	2633	@media (prefers-reduced-motion: reduce) {
	2634	, ::before, *::after {
	2635	animation-duration: 0.01ms !important;
	2636	animation-iteration-count: 1 !important;
	2637	transition-duration: 0.01ms !important;
	2638	}
	2639	}
c63b860Claude	2640
	2641	/* Block O3 — visual coherence additive rules. */
	2642	.card.card-p-none { padding: 0; }
	2643	.card.card-p-sm { padding: var(--space-3); }
	2644	.card.card-p-md { padding: var(--space-4); }
	2645	.card.card-p-lg { padding: var(--space-6); }
	2646	.card.card-elevated { box-shadow: var(--elev-2); }
	2647	.card.card-gradient {
	2648	background:
	2649	linear-gradient(135deg, rgba(140,109,255,0.05), transparent 60%),
	2650	var(--bg-elevated);
	2651	}
	2652	.card.card-gradient::before { opacity: 1; }
	2653	.notice {
	2654	padding: var(--space-3) var(--space-4);
	2655	border-radius: var(--radius-md);
	2656	border: 1px solid var(--border);
	2657	background: var(--bg-elevated);
	2658	color: var(--text);
	2659	font-size: var(--font-size-sm);
	2660	margin-bottom: var(--space-6);
	2661	line-height: var(--leading-normal);
	2662	}
	2663	.notice-info { border-color: rgba(96,165,250,0.40); background: rgba(96,165,250,0.08); color: var(--text); }
	2664	.notice-success { border-color: var(--green); background: rgba(52,211,153,0.08); color: var(--text); }
	2665	.notice-warn { border-color: var(--yellow); background: rgba(251,191,36,0.10); color: var(--yellow); }
	2666	.notice-error { border-color: var(--red); background: rgba(248,113,113,0.10); color: var(--red); }
	2667	.notice-accent { border-color: var(--accent); background: rgba(140,109,255,0.10); color: var(--text); }
	2668	.email-preview {
	2669	padding: var(--space-5);
	2670	background: #fff;
	2671	color: #111;
	2672	border-radius: var(--radius-md);
	2673	}
	2674	.code-block {
	2675	margin: var(--space-2) 0 0;
	2676	padding: var(--space-3);
	2677	background: var(--bg-tertiary);
	2678	border: 1px solid var(--border-subtle);
	2679	border-radius: var(--radius-sm);
	2680	font-family: var(--font-mono);
	2681	font-size: var(--font-size-xs);
	2682	line-height: var(--leading-normal);
	2683	overflow-x: auto;
	2684	}
	2685	.status-pill-operational {
	2686	display: inline-flex;
	2687	align-items: center;
	2688	padding: var(--space-1) var(--space-3);
	2689	border-radius: var(--radius-full);
	2690	font-size: var(--font-size-xs);
	2691	font-weight: 600;
	2692	background: rgba(52,211,153,0.15);
	2693	color: var(--green);
	2694	}
	2695	.api-tag {
	2696	display: inline-flex;
	2697	align-items: center;
	2698	font-size: var(--font-size-xs);
	2699	padding: 2px var(--space-2);
	2700	border-radius: var(--radius-sm);
	2701	font-family: var(--font-mono);
	2702	}
	2703	.api-tag-auth { background: rgba(96,165,250,0.15); color: var(--accent); }
	2704	.api-tag-scope { background: rgba(52,211,153,0.15); color: var(--green); }
	2705	.stat-number {
	2706	font-size: var(--font-size-xl);
	2707	font-weight: 700;
	2708	color: var(--text-strong);
	2709	line-height: var(--leading-tight);
	2710	}
	2711	.stat-number-accent { color: var(--accent); }
	2712	.stat-number-blue { color: var(--blue); }
	2713	.stat-number-purple { color: var(--text-link); }
	2714	footer .footer-tag-sub {
	2715	margin-top: var(--space-2);
	2716	font-size: var(--font-size-xs);
	2717	color: var(--text-faint);
	2718	line-height: var(--leading-normal);
	2719	}
	2720	footer .footer-version-pill {
	2721	display: inline-flex;
	2722	align-items: center;
	2723	gap: var(--space-2);
	2724	padding: var(--space-1) var(--space-3);
	2725	border-radius: var(--radius-full);
	2726	border: 1px solid var(--border);
	2727	background: var(--bg-elevated);
	2728	color: var(--text-faint);
	2729	font-family: var(--font-mono);
	2730	font-size: var(--font-size-xs);
	2731	cursor: help;
	2732	}
	2733	footer .footer-banner {
	2734	max-width: 1240px;
	2735	margin: var(--space-6) auto 0;
	2736	padding: var(--space-3) var(--space-4);
	2737	border-radius: var(--radius-md);
	2738	border: 1px solid var(--border);
	2739	background: var(--bg-elevated);
	2740	color: var(--text);
	2741	font-family: var(--font-mono);
	2742	font-size: var(--font-size-xs);
	2743	letter-spacing: 0.04em;
	2744	text-transform: uppercase;
	2745	text-align: center;
	2746	}
	2747	footer .footer-banner-info { border-color: rgba(96,165,250,0.40); color: var(--blue); }
	2748	footer .footer-banner-warn { border-color: rgba(251,191,36,0.40); color: var(--yellow); }
	2749	footer .footer-banner-error { border-color: rgba(248,113,113,0.45); color: var(--red); }
fc1817aClaude	2750	`;