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