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.tsxBlame3508 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" />
3a5755eClaude	61	{/* 2026 polish — load Inter + Inter Tight + JetBrains Mono for
	62	crisp modern typography. `preconnect` keeps the handshake
	63	cost off the critical path; `display=swap` means we never
	64	block first paint waiting on fonts. */}
	65	<link rel="preconnect" href="https://fonts.googleapis.com" />
	66	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="" />
	67	<link
	68	rel="stylesheet"
	69	href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Inter+Tight:wght@600;700;800&family=JetBrains+Mono:wght@400;500&display=swap"
	70	/>
44fe49bClaude	71	{/* PWA removed 2026-05-16 — repeated reload-loop bugs (admin
	72	dashboard, deploy pill, admin-screen flash). A git host has
	73	no use for service workers or install-as-app. Manifest link
	74	and SW registrations are gone permanently. */}
eae38d1Claude	75	<link rel="icon" type="image/svg+xml" href="/icon.svg" />
5f2e749Claude	76	<title>{renderedTitle}</title>
	77	{description && <meta name="description" content={description} />}
	78	{(ogTitle \|\| fullTitle \|\| title) && (
	79	<meta property="og:title" content={ogTitle ?? fullTitle ?? renderedTitle} />
	80	)}
	81	{(ogDescription \|\| description) && (
	82	<meta
	83	property="og:description"
	84	content={ogDescription ?? description ?? ""}
	85	/>
	86	)}
	87	{ogType && <meta property="og:type" content={ogType} />}
	88	{twitterCard && <meta name="twitter:card" content={twitterCard} />}
fa880f2Claude	89	<script dangerouslySetInnerHTML={{ __html: themeInitScript }} />
	90	<style dangerouslySetInnerHTML={{ __html: css }} />
	91	<style dangerouslySetInnerHTML={{ __html: hljsThemeCss }} />
fc1817aClaude	92	</head>
	93	<body>
4a52a98Claude	94	<div class="prelaunch-banner" role="status" aria-live="polite">
	95	Pre-launch — Gluecron is in final validation. Public signups
	96	and git hosting for non-owner users open after launch review.
	97	</div>
cd4f63bTest User	98	{/* Block Q3 — Playground banner. Renders only when the active
	99	user is a playground account with a future expiry; the small
	100	inline script counts down once per minute. Strip is dismissible
	101	per-page-load (re-appears on next nav) — gentle, not noisy. */}
	102	{user && (user as any).isPlayground && (user as any).playgroundExpiresAt && (
	103	<div
	104	class="playground-banner"
	105	role="status"
	106	aria-live="polite"
	107	data-playground-expires={
	108	((user as any).playgroundExpiresAt instanceof Date
	109	? (user as any).playgroundExpiresAt.toISOString()
	110	: String((user as any).playgroundExpiresAt))
	111	}
	112	>
	113	<span class="playground-banner-icon" aria-hidden="true">{"\u{1F3AE}"}</span>
	114	<span class="playground-banner-text">
	115	Playground account —{" "}
	116	<span class="playground-banner-countdown">expires soon</span>.{" "}
	117	<a href="/play/claim" class="playground-banner-cta">
	118	Save your work →
	119	</a>
	120	</span>
	121	<button
	122	type="button"
	123	class="playground-banner-dismiss"
	124	aria-label="Dismiss"
	125	data-playground-dismiss="1"
	126	>
	127	{"×"}
	128	</button>
	129	<script
	130	dangerouslySetInnerHTML={{
	131	__html: /* js */ `
	132	(function () {
	133	var el = document.currentScript && document.currentScript.parentElement;
	134	if (!el) return;
	135	var iso = el.getAttribute('data-playground-expires');
	136	if (!iso) return;
	137	var target = Date.parse(iso);
	138	if (isNaN(target)) return;
	139	var out = el.querySelector('.playground-banner-countdown');
	140	function render() {
	141	var ms = target - Date.now();
	142	if (!out) return;
	143	if (ms <= 0) { out.textContent = 'expired'; return; }
	144	var mins = Math.floor(ms / 60000);
	145	var hrs = Math.floor(mins / 60);
	146	if (hrs > 1) out.textContent = hrs + ' hours left';
	147	else if (hrs === 1) out.textContent = '1 hour left';
	148	else if (mins > 1) out.textContent = mins + ' minutes left';
	149	else out.textContent = 'less than a minute left';
	150	}
	151	render();
	152	setInterval(render, 60000);
	153	var dismiss = el.querySelector('[data-playground-dismiss="1"]');
	154	if (dismiss) {
	155	dismiss.addEventListener('click', function () {
	156	el.style.display = 'none';
	157	});
	158	}
	159	})();
	160	`,
	161	}}
	162	/>
	163	</div>
	164	)}
41a1450Claude	165	<header class="site-header">
fc1817aClaude	166	<nav>
	167	<a href="/" class="logo">
	168	gluecron
	169	</a>
3ef4c9dClaude	170	<div class="nav-search">
001af43Claude	171	<form method="get" action="/search">
3ef4c9dClaude	172	<input
	173	type="search"
	174	name="q"
	175	placeholder="Search (press /)"
	176	aria-label="Search"
	177	/>
	178	</form>
	179	</div>
06d5ffeClaude	180	<div class="nav-right">
f5b9ef5Claude	181	{/* Block N3 — site-admin platform-deploy status pill */}
f764c07Claude	182	{user && (
	183	<a
	184	id="deploy-pill"
	185	href="/admin/deploys"
	186	class="nav-deploy-pill"
	187	style="display:none"
	188	aria-label="Platform deploy status"
	189	title="Platform deploy status"
	190	>
	191	<span class="deploy-pill-dot" />
	192	<span class="deploy-pill-text">Deploys</span>
	193	</a>
	194	)}
f5b9ef5Claude	195	<a href="/explore" class="nav-link">Explore</a>
06d5ffeClaude	196	{user ? (
	197	<>
f5b9ef5Claude	198	{/* AI dropdown */}
c6018a5Claude	199	<div class="nav-ai-dropdown" data-nav-ai>
	200	<button
	201	type="button"
	202	class="nav-link nav-ai-trigger"
	203	aria-haspopup="true"
	204	aria-expanded="false"
	205	data-nav-ai-trigger
	206	>
	207	<span style="display:inline-flex;align-items:center;gap:5px">
f5b9ef5Claude	208	<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
c6018a5Claude	209	<path d="M12 2l2.39 5.95L20 9l-4.5 3.9L17 19l-5-3.2L7 19l1.5-6.1L4 9l5.61-1.05L12 2z" />
	210	</svg>
	211	AI
f5b9ef5Claude	212	<span aria-hidden="true" style="font-size:9px;opacity:0.7">{String.fromCharCode(9660)}</span>
c6018a5Claude	213	</span>
	214	</button>
	215	<div class="nav-ai-menu" role="menu" data-nav-ai-menu>
	216	<a href="/standups" role="menuitem" class="nav-ai-item">
	217	<span class="nav-ai-item-label">Standups</span>
	218	<span class="nav-ai-item-sub">Daily AI brief</span>
	219	</a>
	220	<a href="/voice" role="menuitem" class="nav-ai-item">
	221	<span class="nav-ai-item-label">Voice</span>
	222	<span class="nav-ai-item-sub">Talk to ship a PR</span>
	223	</a>
	224	<a href="/refactors" role="menuitem" class="nav-ai-item">
	225	<span class="nav-ai-item-label">Refactors</span>
	226	<span class="nav-ai-item-sub">Multi-repo agent</span>
	227	</a>
	228	<a href="/specs" role="menuitem" class="nav-ai-item">
	229	<span class="nav-ai-item-label">Specs</span>
	230	<span class="nav-ai-item-sub">Spec-to-PR loop</span>
	231	</a>
	232	<a href="/ask" role="menuitem" class="nav-ai-item">
	233	<span class="nav-ai-item-label">Ask AI</span>
	234	<span class="nav-ai-item-sub">Cross-repo chat</span>
	235	</a>
	236	</div>
	237	</div>
cc34156Claude	238	{/* Smart morning digest link */}
	239	<a href="/digest" class="nav-link" title="Morning Digest" aria-label="Morning Digest">
	240	{"☀"}
	241	</a>
f5b9ef5Claude	242	{/* Inbox bell with unread badge */}
	243	<a
	244	href="/inbox"
	245	class="nav-inbox-btn"
	246	aria-label={notificationCount && notificationCount > 0 ? `Inbox — ${notificationCount} unread` : "Inbox"}
	247	title="Inbox"
	248	>
	249	<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
	250	<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/>
	251	<path d="M13.73 21a2 2 0 0 1-3.46 0"/>
	252	</svg>
	253	{notificationCount && notificationCount > 0 ? (
	254	<span class="nav-inbox-badge" aria-hidden="true">
	255	{notificationCount > 99 ? "99+" : notificationCount}
	256	</span>
	257	) : null}
06d5ffeClaude	258	</a>
f5b9ef5Claude	259	<a href="/new" class="btn btn-sm btn-primary">+ New</a>
	260	{/* User dropdown — consolidates profile + secondary nav */}
	261	<div class="nav-user-dropdown" data-nav-user>
	262	<button
	263	type="button"
	264	class="nav-user-trigger"
	265	aria-haspopup="true"
	266	aria-expanded="false"
	267	data-nav-user-trigger
	268	>
	269	<span class="nav-user-avatar" aria-hidden="true">
	270	{(user.displayName \|\| user.username).charAt(0).toUpperCase()}
	271	</span>
	272	<span class="nav-user-name">{user.displayName \|\| user.username}</span>
	273	<span class="nav-user-caret" aria-hidden="true">{"▾"}</span>
	274	</button>
	275	<div class="nav-user-menu" role="menu" data-nav-user-menu>
	276	<div class="nav-user-menu-header">
	277	<span class="nav-user-menu-name">{user.displayName \|\| user.username}</span>
	278	<span class="nav-user-menu-handle">@{user.username}</span>
	279	</div>
	280	<div class="nav-user-menu-sep" />
	281	<a href="/dashboard" role="menuitem" class="nav-user-item">Dashboard</a>
	282	<a href="/pulls" role="menuitem" class="nav-user-item">Pull requests</a>
	283	<a href="/issues" role="menuitem" class="nav-user-item">Issues</a>
	284	<a href="/activity" role="menuitem" class="nav-user-item">Activity</a>
8286942Claude	285	<a href="/insights" role="menuitem" class="nav-user-item">Insights</a>
f5b9ef5Claude	286	<a href="/import" role="menuitem" class="nav-user-item">Import from GitHub</a>
bb2dea9Claude	287	<a href="/import/actions" role="menuitem" class="nav-user-item">Actions importer</a>
f5b9ef5Claude	288	<div class="nav-user-menu-sep" />
	289	<a href={`/${user.username}`} role="menuitem" class="nav-user-item">Your profile</a>
	290	<a href="/settings" role="menuitem" class="nav-user-item">Settings</a>
	291	<a href="/settings/tokens" role="menuitem" class="nav-user-item">Access tokens</a>
	292	<div class="nav-user-menu-sep" />
	293	<a href="/theme/toggle" class="nav-user-item" role="menuitem">
	294	<span class="theme-icon-dark">{"☾"} Light mode</span>
	295	<span class="theme-icon-light">{"☀"} Dark mode</span>
	296	</a>
	297	<a href="/logout" role="menuitem" class="nav-user-item nav-user-item--danger">Sign out</a>
	298	</div>
	299	</div>
06d5ffeClaude	300	</>
	301	) : (
	302	<>
f5b9ef5Claude	303	<a href="/theme/toggle" class="nav-link nav-theme" title="Toggle theme" aria-label="Toggle theme">
	304	<span class="theme-icon-dark">{"☾"}</span>
	305	<span class="theme-icon-light">{"☀"}</span>
06d5ffeClaude	306	</a>
adf5e18Claude	307	<a href="/import" class="nav-link nav-migrate" title="Migrate your GitHub repos to Gluecron">
	308	Migrate from GitHub
	309	</a>
f5b9ef5Claude	310	<a href="/login" class="nav-link">Sign in</a>
	311	<a href="/register" class="btn btn-sm btn-primary">Register</a>
06d5ffeClaude	312	</>
	313	)}
	314	</div>
fc1817aClaude	315	</nav>
	316	</header>
45e31d0Claude	317	<main id="main-content">{children}</main>
cf9178bTest User	318	{/* Global toast host — populated by the toastScript below from
	319	?success= / ?error= / ?toast= query params. Replaces the
	320	per-page banner pattern with one polished slide-in. */}
	321	<div
	322	id="toast-host"
	323	aria-live="polite"
	324	aria-atomic="true"
	325	style="position:fixed;top:calc(var(--header-h) + 12px);right:16px;z-index:var(--z-toast,10000);display:flex;flex-direction:column;gap:8px;pointer-events:none"
	326	/>
fc1817aClaude	327	<footer>
958d26aClaude	328	<div class="footer-inner">
	329	<div class="footer-brand">
	330	<a href="/" class="logo">gluecron</a>
	331	<p class="footer-tag">
8cfb00eClaude	332	Git hosting with automated CI and AI code review.
958d26aClaude	333	</p>
	334	</div>
	335	<div class="footer-links">
	336	<div class="footer-col">
	337	<div class="footer-col-title">Product</div>
b0148e9Claude	338	<a href="/features">Features</a>
	339	<a href="/pricing">Pricing</a>
9f29b65Claude	340	<a href="/enterprise">Enterprise</a>
e1fc7dbClaude	341	<a href="/changelog">Changelog</a>
958d26aClaude	342	<a href="/explore">Explore</a>
	343	<a href="/marketplace">Marketplace</a>
adf5e18Claude	344	<a href="/developer-program">Developer Program</a>
958d26aClaude	345	</div>
	346	<div class="footer-col">
	347	<div class="footer-col-title">Platform</div>
e0e4219Claude	348	<a href="/docs">Docs</a>
b0148e9Claude	349	<a href="/help">Quickstart</a>
958d26aClaude	350	<a href="/status">Status</a>
	351	<a href="/api/graphql">GraphQL</a>
	352	<a href="/mcp">MCP server</a>
	353	</div>
	354	<div class="footer-col">
b0148e9Claude	355	<div class="footer-col-title">Company</div>
	356	<a href="/about">About</a>
3122762Claude	357	<a href="/blog">Blog</a>
958d26aClaude	358	<a href="/terms">Terms</a>
	359	<a href="/privacy">Privacy</a>
	360	<a href="/acceptable-use">Acceptable use</a>
	361	</div>
	362	</div>
	363	</div>
	364	<div class="footer-bottom">
	365	<span>© {new Date().getFullYear()} gluecron</span>
05cdb85Claude	366	<span class="footer-build" title={`commit ${build.shaFull}\nbuilt ${build.builtAt}`}>
	367	<span class="footer-build-dot" aria-hidden="true" />
	368	{build.sha} · {build.branch}
	369	</span>
36b4cbdClaude	370	</div>
c63b860Claude	371	{siteBannerText ? (
	372	<div
	373	class={`footer-banner footer-banner-${siteBannerLevel \|\| "info"}`}
	374	role="status"
	375	aria-live="polite"
	376	>
	377	{siteBannerText}
	378	</div>
	379	) : null}
fc1817aClaude	380	</footer>
05cdb85Claude	381	{/* Live update poller — checks /api/version every 15s, prompts
	382	reload when the running sha changes. Pure progressive-
	383	enhancement; degrades to nothing if JS is off. */}
	384	<div
	385	id="version-banner"
479dcd9Claude	386	style="display:none;position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:9999;background:var(--bg-elevated);border:1px solid rgba(91,110,232,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);font-family:var(--font-sans);align-items:center;gap:10px"
05cdb85Claude	387	>
	388	<span style="display:inline-flex;align-items:center;gap:8px">
479dcd9Claude	389	<span style="width:8px;height:8px;border-radius:50%;background:#34d399" />
05cdb85Claude	390	<span>New version available</span>
	391	</span>
	392	<button
	393	type="button"
	394	id="version-banner-reload"
479dcd9Claude	395	style="background:var(--accent);color:#fff;border:0;border-radius:9999px;padding:5px 12px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit"
05cdb85Claude	396	>
	397	Reload
	398	</button>
	399	</div>
fa880f2Claude	400	<script dangerouslySetInnerHTML={{ __html: versionPollerScript }} />
f764c07Claude	401	{/* Block N3 — site-admin deploy status pill (script-only). The pill
	402	container is rendered above for authed users; this script bootstraps
	403	it by fetching /admin/deploys/latest.json. Non-admins get 401/403
	404	and the pill stays display:none — zero leak. */}
	405	{user && (
	406	<script dangerouslySetInnerHTML={{ __html: deployPillScript }} />
	407	)}
699e5c7Claude	408	{/* Block I4 — Command palette shell (hidden by default) */}
	409	<div
	410	id="cmdk-backdrop"
	411	style="display:none;position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:9998"
	412	/>
	413	<div
	414	id="cmdk-panel"
	415	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"
	416	>
	417	<input
	418	id="cmdk-input"
	419	type="text"
	420	placeholder="Type a command..."
	421	aria-label="Command palette"
dc26881CC LABS App	422	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	423	/>
	424	<div id="cmdk-list" style="max-height:60vh;overflow-y:auto" />
	425	</div>
fa880f2Claude	426	<script dangerouslySetInnerHTML={{ __html: clientJs }} />
44fe49bClaude	427	{/* PWA-kill script: actively unregisters any service worker
	428	previously installed under gluecron.com. Recovers any browser
	429	still trapped in the SW reload loop from the legacy registrations. */}
	430	<script dangerouslySetInnerHTML={{ __html: pwaKillSwitchScript }} />
cf9178bTest User	431	<script dangerouslySetInnerHTML={{ __html: toastScript }} />
fa880f2Claude	432	<script dangerouslySetInnerHTML={{ __html: navScript }} />
c6018a5Claude	433	<script dangerouslySetInnerHTML={{ __html: navAiDropdownScript }} />
b7ecb14Claude	434	{/* Bell badge poller — only rendered for authenticated users.
	435	Polls /api/notifications/count every 60 s and updates the badge
	436	on the inbox bell icon. Falls back gracefully if the endpoint is
	437	unavailable or the user signs out mid-session. */}
	438	{user && (
	439	<script dangerouslySetInnerHTML={{ __html: bellPollerScript }} />
	440	)}
fc1817aClaude	441	</body>
	442	</html>
	443	);
	444	};
	445
05cdb85Claude	446	// Live version poller. Checks /api/version every 15s; if the sha differs
	447	// from the one we booted with, reveal the floating 'New version' pill so
	448	// the user can reload onto the new code without manually refreshing.
	449	const versionPollerScript = `
	450	(function(){
	451	var loadedSha = null;
	452	var banner, btn;
	453	function poll(){
	454	fetch('/api/version', { cache: 'no-store' })
	455	.then(function(r){ return r.ok ? r.json() : null; })
	456	.then(function(j){
	457	if (!j \|\| !j.sha) return;
	458	if (loadedSha === null) { loadedSha = j.sha; return; }
	459	if (j.sha !== loadedSha && banner) {
	460	banner.style.display = 'inline-flex';
	461	}
	462	})
	463	.catch(function(){});
	464	}
	465	function init(){
	466	banner = document.getElementById('version-banner');
	467	btn = document.getElementById('version-banner-reload');
	468	if (btn) btn.addEventListener('click', function(){ window.location.reload(); });
	469	poll();
	470	setInterval(poll, 15000);
	471	}
	472	if (document.readyState === 'loading') {
	473	document.addEventListener('DOMContentLoaded', init);
	474	} else {
	475	init();
	476	}
	477	})();
	478	`;
	479
f764c07Claude	480	// Block N3 — site-admin deploy status pill. Fetches /admin/deploys/latest.json;
	481	// if 200, reveals the pill in the nav and subscribes to the `platform:deploys`
	482	// SSE topic for live status updates. Non-admins get 401/403 and the pill stays
	483	// display:none — there's no leakage of admin-only data to other users.
	484	//
	485	// Pill states (CSS classes on the container drive colour):
	486	// .deploy-pill-success 🟢 "Deployed 12s ago"
	487	// .deploy-pill-progress 🟡 "Deploying… 14s" (pulsing dot)
	488	// .deploy-pill-failed 🔴 "Deploy failed 1m ago"
	489	// .deploy-pill-empty ⚪ "No deploys yet"
	490	//
	491	// Relative-time auto-refreshes every 15s without re-fetching.
	492	export const deployPillScript = `
	493	(function(){
	494	var pill, dot, text;
	495	var state = { latest: null, asOf: null };
	496
	497	function classifyAge(ms){
	498	if (ms < 0) return 'just now';
	499	var s = Math.floor(ms / 1000);
	500	if (s < 5) return 'just now';
	501	if (s < 60) return s + 's ago';
	502	var m = Math.floor(s / 60);
	503	if (m < 60) return m + 'm ago';
	504	var h = Math.floor(m / 60);
	505	if (h < 24) return h + 'h ago';
	506	var d = Math.floor(h / 24);
	507	return d + 'd ago';
	508	}
	509	function elapsed(ms){
	510	if (ms < 0) ms = 0;
	511	var s = Math.floor(ms / 1000);
	512	if (s < 60) return s + 's';
	513	var m = Math.floor(s / 60);
	514	var rem = s - m * 60;
	515	return m + 'm ' + rem + 's';
	516	}
	517
	518	function render(){
	519	if (!pill \|\| !text \|\| !dot) return;
	520	var d = state.latest;
81201ccTest User	521	// When there's no deploy event yet, keep the pill HIDDEN. Showing
	522	// "No deploys yet" was visible noise on every admin page load and
	523	// flashed during reconnect cycles — admins don't need a placeholder.
	524	// The pill reveals itself the first time a real deploy fires.
f764c07Claude	525	if (!d) {
81201ccTest User	526	pill.style.display = 'none';
f764c07Claude	527	return;
	528	}
	529	pill.style.display = 'inline-flex';
	530	var now = Date.now();
	531	if (d.status === 'in_progress') {
	532	pill.className = 'nav-deploy-pill deploy-pill-progress';
	533	var started = Date.parse(d.started_at) \|\| now;
	534	text.textContent = 'Deploying… ' + elapsed(now - started);
	535	} else if (d.status === 'succeeded') {
	536	pill.className = 'nav-deploy-pill deploy-pill-success';
	537	var ref = Date.parse(d.finished_at \|\| d.started_at) \|\| now;
	538	text.textContent = 'Deployed ' + classifyAge(now - ref);
	539	} else if (d.status === 'failed') {
	540	pill.className = 'nav-deploy-pill deploy-pill-failed';
	541	var refF = Date.parse(d.finished_at \|\| d.started_at) \|\| now;
	542	text.textContent = 'Deploy failed ' + classifyAge(now - refF);
	543	} else {
	544	pill.className = 'nav-deploy-pill';
	545	text.textContent = d.status;
	546	}
	547	}
	548
	549	function fetchLatest(){
	550	fetch('/admin/deploys/latest.json', { cache: 'no-store', credentials: 'same-origin' })
	551	.then(function(r){ if (!r.ok) return null; return r.json(); })
	552	.then(function(j){
	553	if (!j \|\| j.ok !== true) return;
	554	state.latest = j.latest;
	555	state.asOf = j.asOf;
	556	render();
	557	subscribe();
	558	})
	559	.catch(function(){});
	560	}
	561
	562	var subscribed = false;
	563	function subscribe(){
	564	if (subscribed) return;
	565	if (typeof EventSource === 'undefined') return;
	566	subscribed = true;
	567	var es;
bf19c50Test User	568	// Exponential backoff with cap. Previously a tight 1500ms reconnect
	569	// produced visible looping in the nav whenever the proxy timed out
	570	// or the connection blipped — the bottom-of-page deploy pill
	571	// re-rendered the placeholder every 1.5s. Cap at 60s and reset on
	572	// successful message receipt.
	573	var delay = 2000;
	574	var DELAY_MAX = 60000;
	575	function bump(){
	576	delay = Math.min(delay * 2, DELAY_MAX);
	577	}
	578	function resetDelay(){
	579	delay = 2000;
	580	}
f764c07Claude	581	function connect(){
	582	try { es = new EventSource('/live-events/platform:deploys'); }
bf19c50Test User	583	catch(e){ bump(); setTimeout(connect, delay); return; }
f764c07Claude	584	es.onmessage = function(m){
bf19c50Test User	585	resetDelay();
f764c07Claude	586	try {
	587	var d = JSON.parse(m.data);
	588	if (d && d.run_id) {
	589	if (!state.latest \|\| state.latest.run_id === d.run_id \|\|
	590	Date.parse(d.started_at) >= Date.parse(state.latest.started_at)) {
	591	state.latest = d;
	592	render();
	593	}
	594	}
	595	} catch(e){}
	596	};
	597	es.onerror = function(){
	598	try { es.close(); } catch(e){}
bf19c50Test User	599	bump();
f764c07Claude	600	setTimeout(connect, delay);
	601	};
	602	}
	603	connect();
	604	}
	605
	606	function init(){
	607	pill = document.getElementById('deploy-pill');
	608	if (!pill) return;
	609	dot = pill.querySelector('.deploy-pill-dot');
	610	text = pill.querySelector('.deploy-pill-text');
	611	fetchLatest();
	612	// Refresh relative-time labels every 15s so "12s ago" → "27s ago"
	613	// without a fresh fetch.
	614	setInterval(render, 15000);
	615	}
	616	if (document.readyState === 'loading') {
	617	document.addEventListener('DOMContentLoaded', init);
	618	} else {
	619	init();
	620	}
	621	})();
	622	`;
	623
6fc53bdClaude	624	// Runs before paint — reads the theme cookie and flips data-theme so there's
81201ccTest User	625	// no light-to-dark flash on load. SSR default is "light"; cookie-set "dark"
	626	// is honoured for users who explicitly opted in.
6fc53bdClaude	627	const themeInitScript = `
	628	(function(){
	629	try {
	630	var m = document.cookie.match(/(?:^\|; )theme=([^;]+)/);
81201ccTest User	631	var t = m ? decodeURIComponent(m[1]) : 'light';
	632	if (t !== 'light' && t !== 'dark') t = 'light';
6fc53bdClaude	633	document.documentElement.setAttribute('data-theme', t);
	634	} catch(_){}
	635	})();
	636	`;
	637
eae38d1Claude	638	// Block G1 — register service worker for offline / install support.
	639	// Kept inline (and tiny) so we don't block first paint.
b1be050CC LABS App	640	//
cf9178bTest User	641	// Global toast notifications — reads ?success=, ?error=, ?toast= from the
	642	// URL on page load and surfaces a polished slide-in toast instead of the
	643	// per-page banner divs that crowded the layout. Toasts auto-dismiss after
	644	// 4.5s; query params are scrubbed from the URL via history.replaceState
	645	// so a subsequent Refresh doesn't re-fire the same toast.
	646	//
	647	// Variants: ?success=…, ?error=…, ?toast=info:…, ?toast=warn:… All values
	648	// must be URI-encoded (callers already do this via encodeURIComponent
	649	// in c.redirect()).
	650	const toastScript = `
	651	(function(){
	652	function showToast(kind, message){
	653	if (!message) return;
	654	var host = document.getElementById('toast-host');
	655	if (!host) return;
	656	var el = document.createElement('div');
	657	el.className = 'gx-toast gx-toast--' + kind;
	658	el.setAttribute('role', kind === 'error' ? 'alert' : 'status');
	659	var icon = document.createElement('span');
	660	icon.className = 'gx-toast__icon';
	661	icon.textContent = kind === 'success' ? '\\u2713'
	662	: kind === 'error' ? '\\u00D7'
	663	: kind === 'warn' ? '!'
	664	: 'i';
	665	el.appendChild(icon);
	666	var text = document.createElement('span');
	667	text.className = 'gx-toast__text';
	668	text.textContent = message;
	669	el.appendChild(text);
	670	var close = document.createElement('button');
	671	close.type = 'button';
	672	close.className = 'gx-toast__close';
	673	close.setAttribute('aria-label', 'Dismiss notification');
	674	close.textContent = '\\u00D7';
	675	close.addEventListener('click', function(){ dismiss(); });
	676	el.appendChild(close);
	677	host.appendChild(el);
	678	// Force a reflow then add the visible class so the slide-in transitions.
	679	void el.offsetWidth;
	680	el.classList.add('gx-toast--in');
	681	var timer = setTimeout(dismiss, 4500);
	682	function dismiss(){
	683	clearTimeout(timer);
	684	el.classList.remove('gx-toast--in');
	685	el.classList.add('gx-toast--out');
	686	setTimeout(function(){
	687	if (el.parentNode) el.parentNode.removeChild(el);
	688	}, 220);
	689	}
	690	}
	691	try {
	692	var url = new URL(window.location.href);
	693	var hits = 0;
	694	var s = url.searchParams.get('success');
	695	if (s) { showToast('success', s); url.searchParams.delete('success'); hits++; }
	696	var e = url.searchParams.get('error');
	697	if (e) { showToast('error', e); url.searchParams.delete('error'); hits++; }
	698	var t = url.searchParams.get('toast');
	699	if (t) {
	700	var ix = t.indexOf(':');
	701	var kind = ix > 0 ? t.slice(0, ix) : 'info';
	702	var msg = ix > 0 ? t.slice(ix + 1) : t;
	703	showToast(kind, msg);
	704	url.searchParams.delete('toast');
	705	hits++;
	706	}
	707	if (hits > 0 && window.history && window.history.replaceState) {
	708	window.history.replaceState({}, '', url.pathname + (url.searchParams.toString() ? '?' + url.searchParams.toString() : '') + url.hash);
	709	}
	710	} catch(_) {}
	711	})();
	712	`;
	713
44fe49bClaude	714	// PWA kill-switch (2026-05-16) — replaces the previous pwaRegisterScript
	715	// and pwaInstallBannerScript. Those two scripts registered /sw.js and
	716	// /sw-push.js at the same scope, causing a reload loop that made the
	717	// admin dashboard unusable (deploy pill flashing, typing wiped, buttons
	718	// uncllickable). Per the SW spec, only one SW can control a scope; two
	719	// different script URLs at the same scope keep replacing each other.
6345c3eTest User	720	//
44fe49bClaude	721	// PWA is gone for good. A git host has no use for service workers,
	722	// install-as-app, or push notifications via SW. This script actively
	723	// unregisters every previously installed SW on the gluecron.com origin
	724	// so any browser still trapped in the loop recovers on the very next
	725	// page load — without needing the user to clear site data or open
	726	// DevTools. Idempotent and safe to keep running forever; once all
	727	// browsers have been cleaned, it's a no-op.
	728	const pwaKillSwitchScript = `
534f04aClaude	729	(function(){
	730	try {
44fe49bClaude	731	if (!('serviceWorker' in navigator)) return;
	732	if (!navigator.serviceWorker.getRegistrations) return;
	733	navigator.serviceWorker.getRegistrations().then(function(regs){
	734	if (!regs \|\| regs.length === 0) return;
	735	regs.forEach(function(reg){
	736	try { reg.unregister(); } catch(_){}
	737	});
	738	}).catch(function(){});
	739	// Also drop any caches the old SWs left behind so the user gets
	740	// truly fresh HTML on every page load. Restricted to gluecron-*
	741	// namespaced caches so we don't trample anything a future opt-in
	742	// feature might create under a different name.
	743	if ('caches' in self) {
	744	caches.keys().then(function(keys){
	745	keys.forEach(function(k){
	746	if (typeof k === 'string' && k.indexOf('gluecron') === 0) {
	747	try { caches.delete(k); } catch(_){}
d7ba05dClaude	748	}
	749	});
	750	}).catch(function(){});
534f04aClaude	751	}
	752	} catch(_) {}
	753	})();
	754	`;
	755
3ef4c9dClaude	756	const navScript = `
	757	(function(){
	758	var chord = null;
	759	var chordTimer = null;
	760	function isTyping(t){
	761	t = t \|\| {};
	762	var tag = (t.tagName \|\| '').toLowerCase();
	763	return tag === 'input' \|\| tag === 'textarea' \|\| t.isContentEditable;
	764	}
71cd5ecClaude	765
	766	// ---------- Block I4 — Command palette ----------
	767	var COMMANDS = [
	768	{ label: 'Go to Dashboard', href: '/dashboard', kw: 'home' },
	769	{ label: 'Go to Explore', href: '/explore', kw: 'browse discover' },
	770	{ label: 'Go to Notifications', href: '/notifications', kw: 'inbox' },
	771	{ label: 'Go to Ask AI', href: '/ask', kw: 'chat assistant' },
	772	{ label: 'Create new repository', href: '/new', kw: 'add create' },
	773	{ label: 'Marketplace', href: '/marketplace', kw: 'apps store' },
	774	{ label: 'Installed apps', href: '/settings/apps', kw: 'my apps' },
	775	{ label: 'Register new app', href: '/developer/apps-new', kw: 'developer create' },
	776	{ label: 'Keyboard shortcuts', href: '/shortcuts', kw: 'help keys' },
	777	{ label: 'Settings (profile)', href: '/settings', kw: 'account' },
	778	{ label: '2FA settings', href: '/settings/2fa', kw: 'two factor security' },
	779	{ label: 'Passkeys settings', href: '/settings/passkeys', kw: 'webauthn' },
	780	{ label: 'Personal access tokens', href: '/settings/tokens', kw: 'pat api' },
	781	{ label: 'Billing + quotas', href: '/settings/billing', kw: 'plans money' },
8809b87Claude	782	{ label: 'AI usage + cost', href: '/billing/usage', kw: 'spend tokens anthropic budget' },
71cd5ecClaude	783	{ label: 'Audit log (personal)', href: '/settings/audit', kw: 'history' },
	784	{ label: 'Gists', href: '/gists', kw: 'snippets' },
	785	{ label: 'GraphQL explorer', href: '/api/graphql', kw: 'api query' },
	786	{ label: 'Admin dashboard', href: '/admin', kw: 'superuser' },
	787	{ label: 'Toggle theme', href: '/theme/toggle', kw: 'dark light mode' }
	788	];
	789
	790	function fuzzyMatch(item, q){
	791	if (!q) return true;
	792	var hay = (item.label + ' ' + (item.kw\|\|'') + ' ' + item.href).toLowerCase();
	793	q = q.toLowerCase();
	794	var qi = 0;
	795	for (var i = 0; i < hay.length && qi < q.length; i++) {
	796	if (hay[i] === q[qi]) qi++;
	797	}
	798	return qi === q.length;
	799	}
	800
	801	var backdrop, panel, input, list, selected = 0, filtered = COMMANDS.slice();
	802
	803	function render(){
	804	if (!list) return;
	805	var html = '';
	806	for (var i = 0; i < filtered.length; i++) {
	807	var item = filtered[i];
	808	var cls = i === selected ? 'cmdk-item cmdk-active' : 'cmdk-item';
	809	var bg = i === selected ? 'background:var(--bg);' : '';
ea52715copilot-swe-agent[bot]	810	html += '<div class="' + cls + '" data-idx="' + i + '" data-url="' + item.href + '"' +
dc26881CC LABS App	811	' style="padding:var(--space-2) var(--space-4);cursor:pointer;border-bottom:1px solid var(--border);' + bg + '">' +
71cd5ecClaude	812	'<div>' + item.label + '</div>' +
	813	'<div style="font-size:11px;color:var(--text-muted)">' + item.href + '</div>' +
	814	'</div>';
	815	}
	816	if (filtered.length === 0) {
dc26881CC LABS App	817	html = '<div style="padding:var(--space-4);color:var(--text-muted);text-align:center">No matches.</div>';
71cd5ecClaude	818	}
	819	list.innerHTML = html;
	820	}
	821
641aa42Claude	822	function getAllCommands(){
	823	// Merge global COMMANDS with repo-context commands injected by repo pages.
	824	var extra = (window.__CMDK_REPO_COMMANDS && Array.isArray(window.__CMDK_REPO_COMMANDS))
	825	? window.__CMDK_REPO_COMMANDS : [];
	826	return COMMANDS.concat(extra);
	827	}
	828
71cd5ecClaude	829	function openPalette(){
	830	backdrop = document.getElementById('cmdk-backdrop');
	831	panel = document.getElementById('cmdk-panel');
	832	input = document.getElementById('cmdk-input');
	833	list = document.getElementById('cmdk-list');
	834	if (!backdrop \|\| !panel) return;
	835	backdrop.style.display = 'block';
	836	panel.style.display = 'block';
	837	input.value = '';
	838	selected = 0;
641aa42Claude	839	filtered = getAllCommands();
71cd5ecClaude	840	render();
	841	input.focus();
	842	}
	843	function closePalette(){
	844	if (backdrop) backdrop.style.display = 'none';
	845	if (panel) panel.style.display = 'none';
	846	}
	847	function go(href){ closePalette(); window.location.href = href; }
	848
	849	document.addEventListener('click', function(e){
	850	var t = e.target;
	851	if (t && t.id === 'cmdk-backdrop') { closePalette(); return; }
	852	var item = t && t.closest && t.closest('.cmdk-item');
ea52715copilot-swe-agent[bot]	853	if (item) { go(item.getAttribute('data-url')); }
71cd5ecClaude	854	});
	855
	856	document.addEventListener('input', function(e){
	857	if (e.target && e.target.id === 'cmdk-input') {
	858	var q = e.target.value;
641aa42Claude	859	filtered = getAllCommands().filter(function(c){ return fuzzyMatch(c, q); });
71cd5ecClaude	860	selected = 0;
	861	render();
	862	}
	863	});
	864
3ef4c9dClaude	865	document.addEventListener('keydown', function(e){
71cd5ecClaude	866	// Palette-scoped keys take priority when open
	867	if (panel && panel.style.display === 'block') {
	868	if (e.key === 'Escape') { e.preventDefault(); closePalette(); return; }
	869	if (e.key === 'ArrowDown') {
	870	e.preventDefault();
	871	selected = Math.min(filtered.length - 1, selected + 1);
	872	render();
	873	return;
	874	}
	875	if (e.key === 'ArrowUp') {
	876	e.preventDefault();
	877	selected = Math.max(0, selected - 1);
	878	render();
	879	return;
	880	}
	881	if (e.key === 'Enter') {
	882	e.preventDefault();
	883	var item = filtered[selected];
	884	if (item) go(item.href);
	885	return;
	886	}
	887	return;
	888	}
	889
3ef4c9dClaude	890	if (isTyping(e.target)) return;
	891	// Single key shortcuts
	892	if (e.key === '/') {
	893	var el = document.querySelector('.nav-search input');
	894	if (el) { e.preventDefault(); el.focus(); return; }
	895	}
	896	if ((e.metaKey\|\|e.ctrlKey) && e.key.toLowerCase() === 'k') {
71cd5ecClaude	897	e.preventDefault();
	898	openPalette();
	899	return;
3ef4c9dClaude	900	}
	901	if (e.key === '?' && !e.ctrlKey && !e.metaKey) {
	902	e.preventDefault(); window.location.href = '/shortcuts'; return;
	903	}
	904	if (e.key === 'n' && !e.ctrlKey && !e.metaKey) {
641aa42Claude	905	// Start 'n' chord — wait 1.2s for next key (i → issue, p → PR).
	906	// If no second key arrives, navigate to /new (create repo).
	907	chord = 'n';
	908	clearTimeout(chordTimer);
	909	chordTimer = setTimeout(function(){
	910	if (chord === 'n') { window.location.href = '/new'; }
	911	chord = null;
	912	}, 1200);
	913	return;
3ef4c9dClaude	914	}
	915	// "g" chord
	916	if (e.key === 'g' && !e.ctrlKey && !e.metaKey) {
	917	chord = 'g';
	918	clearTimeout(chordTimer);
	919	chordTimer = setTimeout(function(){ chord = null; }, 1200);
	920	return;
	921	}
	922	if (chord === 'g') {
	923	if (e.key === 'd') { e.preventDefault(); window.location.href = '/dashboard'; }
	924	else if (e.key === 'n') { e.preventDefault(); window.location.href = '/notifications'; }
	925	else if (e.key === 'e') { e.preventDefault(); window.location.href = '/explore'; }
	926	else if (e.key === 'a') { e.preventDefault(); window.location.href = '/ask'; }
	927	chord = null;
	928	}
641aa42Claude	929	// "n" chord — new issue / new PR (repo-context-aware)
	930	if (chord === 'n') {
	931	var repoCtx = window.__CMDK_REPO_COMMANDS;
	932	var newIssuePath = repoCtx && repoCtx.length ? repoCtx[0].href.replace('/issues/new', '/issues/new') : null;
	933	// Find the "new issue" and "new PR" hrefs from repo context commands
	934	var issueCmd = repoCtx && repoCtx.find(function(c){ return c.href && c.href.indexOf('/issues/new') !== -1; });
	935	var prCmd = repoCtx && repoCtx.find(function(c){ return c.href && c.href.indexOf('/pulls/new') !== -1; });
	936	if (e.key === 'i' && issueCmd) {
	937	e.preventDefault(); clearTimeout(chordTimer); chord = null;
	938	window.location.href = issueCmd.href; return;
	939	}
	940	if (e.key === 'p' && prCmd) {
	941	e.preventDefault(); clearTimeout(chordTimer); chord = null;
	942	window.location.href = prCmd.href; return;
	943	}
	944	}
5882af3Claude	945	// j/k list navigation — move through .prs-row, .issue-row, .notif-item rows
	946	if (e.key === 'j' \|\| e.key === 'k') {
	947	var selectors = '.prs-row, .issue-row, .issue-list-item, .notif-item, .repo-item, .exp-repo-card, .disc-row';
	948	var items = Array.from(document.querySelectorAll(selectors));
	949	if (items.length === 0) return;
	950	e.preventDefault();
	951	var cur = items.findIndex(function(el){ return el.classList.contains('is-kbd-focus'); });
	952	var next = e.key === 'j' ? (cur < 0 ? 0 : Math.min(items.length - 1, cur + 1)) : (cur < 0 ? items.length - 1 : Math.max(0, cur - 1));
	953	items.forEach(function(el){ el.classList.remove('is-kbd-focus'); });
	954	items[next].classList.add('is-kbd-focus');
	955	items[next].scrollIntoView({ block: 'nearest' });
	956	return;
	957	}
	958	if (e.key === 'Enter') {
	959	var focused = document.querySelector('.is-kbd-focus');
	960	if (focused) {
	961	e.preventDefault();
	962	var link = focused.tagName === 'A' ? focused : focused.querySelector('a');
	963	if (link && link.href) { window.location.href = link.href; }
	964	return;
	965	}
	966	}
	967	if (e.key === 'x') {
	968	// 'x' selects/deselects focused item (future: bulk actions)
	969	var sel = document.querySelector('.is-kbd-focus');
	970	if (sel) { e.preventDefault(); sel.classList.toggle('is-kbd-selected'); return; }
	971	}
3ef4c9dClaude	972	});
	973	})();
	974	`;
	975
b7ecb14Claude	976	// Bell poller — updates the inbox badge count every 60 s via /api/notifications/count.
	977	// Only injected when a user is logged in (checked in the JSX above). Uses the
	978	// `.nav-inbox-badge` element that the server renders inside `.nav-inbox-btn`.
	979	// If the badge element is absent (user not logged in, DOM mismatch) it exits
	980	// cleanly without error.
	981	export const bellPollerScript = `
	982	(function() {
	983	var badge = document.querySelector('.nav-inbox-btn .nav-inbox-badge');
	984	var btn = document.querySelector('.nav-inbox-btn');
	985	function updateBadge(n) {
	986	if (!btn) return;
	987	if (n > 0) {
	988	var label = n > 99 ? '99+' : String(n);
	989	if (!badge) {
	990	badge = document.createElement('span');
	991	badge.className = 'nav-inbox-badge';
	992	badge.setAttribute('aria-hidden', 'true');
	993	btn.appendChild(badge);
	994	}
	995	badge.textContent = label;
	996	badge.style.display = '';
	997	btn.setAttribute('aria-label', 'Inbox — ' + n + ' unread');
	998	} else {
	999	if (badge) badge.style.display = 'none';
	1000	btn.setAttribute('aria-label', 'Inbox');
	1001	}
	1002	}
	1003	function poll() {
	1004	fetch('/api/notifications/count', { credentials: 'same-origin', cache: 'no-store' })
	1005	.then(function(r) { return r.ok ? r.json() : null; })
	1006	.then(function(d) {
	1007	if (!d) return;
	1008	var n = typeof d.unread === 'number' ? d.unread : (typeof d.count === 'number' ? d.count : 0);
	1009	updateBadge(n);
	1010	})
	1011	.catch(function() {});
	1012	}
	1013	if (document.readyState === 'loading') {
	1014	document.addEventListener('DOMContentLoaded', function() { poll(); setInterval(poll, 60000); });
	1015	} else {
	1016	poll();
	1017	setInterval(poll, 60000);
	1018	}
	1019	})();
	1020	`;
	1021
c6018a5Claude	1022	// AI dropdown — keyboard- and click-accessible menu in the top nav.
	1023	// CSS handles the hover-open behaviour for pointer users; this script
	1024	// adds click-to-toggle for touch, Escape-to-close, and outside-click-
	1025	// to-close. Lives in its own IIFE so it never interferes with navScript.
	1026	const navAiDropdownScript = `
	1027	(function(){
f5b9ef5Claude	1028	function makeDropdown(rootSel, triggerSel, menuSel) {
	1029	var open = false;
	1030	var root = document.querySelector(rootSel);
	1031	if (!root) return;
	1032	var trigger = root.querySelector(triggerSel);
	1033	var menu = root.querySelector(menuSel);
	1034	if (!trigger \|\| !menu) return;
	1035	function setOpen(next){
	1036	open = !!next;
	1037	root.classList.toggle('is-open', open);
	1038	menu.classList.toggle('is-open', open);
	1039	trigger.setAttribute('aria-expanded', open ? 'true' : 'false');
	1040	}
	1041	trigger.addEventListener('click', function(e){ e.preventDefault(); setOpen(!open); });
	1042	document.addEventListener('click', function(e){
	1043	if (!open) return;
	1044	if (root.contains(e.target)) return;
	1045	setOpen(false);
	1046	});
	1047	document.addEventListener('keydown', function(e){
	1048	if (open && e.key === 'Escape') { e.preventDefault(); setOpen(false); trigger.focus(); }
	1049	});
c6018a5Claude	1050	}
f5b9ef5Claude	1051	makeDropdown('[data-nav-ai]', '[data-nav-ai-trigger]', '[data-nav-ai-menu]');
	1052	makeDropdown('[data-nav-user]', '[data-nav-user-trigger]', '[data-nav-user-menu]');
c6018a5Claude	1053	})();
	1054	`;
	1055
fc1817aClaude	1056	const css = `
2ce1d0bClaude	1057	/* ================================================================
479dcd9Claude	1058	* Gluecron design system — 2026.06 "Calm Infrastructure"
	1059	* Slate base · single calm indigo accent · hairline geometry ·
	1060	* mono-as-feature · restrained motion · Inter Tight + JetBrains Mono.
	1061	* Visual language targets trustworthy developer infrastructure
	1062	* (GitHub / Linear / Stripe), not neon sci-fi. All class names and
	1063	* token names preserved for back-compat across 50+ route views —
	1064	* legacy tokens (e.g. --accent-glow, --accent-gradient) remain
	1065	* defined as calm aliases so scattered users keep working.
2ce1d0bClaude	1066	* ============================================================== */
6fc53bdClaude	1067	:root, :root[data-theme='dark'] {
ba23fe2Claude	1068	/* Surfaces — GitHub-calibrated slate. Readable, warm, never black-void. */
	1069	--bg: #0d1117;
	1070	--bg-secondary: #161b22;
	1071	--bg-tertiary: #1c2128;
	1072	--bg-elevated: #161b22;
	1073	--bg-surface: #21262d;
	1074	--bg-hover: rgba(255,255,255,0.05);
	1075	--bg-active: rgba(255,255,255,0.09);
	1076	--bg-inset: rgba(0,0,0,0.25);
958d26aClaude	1077
	1078	/* Borders — three weights, used deliberately */
	1079	--border: rgba(255,255,255,0.06);
	1080	--border-subtle: rgba(255,255,255,0.035);
	1081	--border-strong: rgba(255,255,255,0.13);
479dcd9Claude	1082	--border-focus: rgba(91,110,232,0.55);
958d26aClaude	1083
	1084	/* Text */
	1085	--text: #ededf2;
	1086	--text-strong: #f7f7fb;
	1087	--text-muted: #8b8c9c;
	1088	--text-faint: #555665;
479dcd9Claude	1089	--text-link: #9aa8ef;
	1090
	1091	/* Accent — single calm indigo. --accent-2 is a desaturated
	1092	slate-teal kept only for the rare secondary signal; the old
	1093	electric cyan pairing is gone. Gradient tokens survive as
	1094	near-flat two-stops so existing gradient consumers render as
	1095	a quiet single hue. --accent-glow is now a faint 1px ring. */
	1096	--accent: #5b6ee8;
	1097	--accent-2: #5f8fa0;
	1098	--accent-warm: #d9a662;
	1099	--accent-hover: #7585ee;
	1100	--accent-pressed:#4a5ad1;
	1101	--accent-gradient: linear-gradient(135deg, #5b6ee8 0%, #5365dd 100%);
	1102	--accent-gradient-soft: linear-gradient(135deg, rgba(91,110,232,0.14) 0%, rgba(83,101,221,0.14) 100%);
	1103	--accent-gradient-faint: linear-gradient(135deg, rgba(91,110,232,0.06) 0%, rgba(83,101,221,0.06) 100%);
	1104	--accent-glow: 0 0 0 1px rgba(91,110,232,0.22);
958d26aClaude	1105
	1106	/* Semantic */
	1107	--green: #34d399;
	1108	--red: #f87171;
	1109	--yellow: #fbbf24;
	1110	--amber: #fbbf24;
	1111	--blue: #60a5fa;
	1112
3a5755eClaude	1113	/* Type — 2026 polish pass. Inter is the primary sans, Inter Tight for
	1114	display (headlines), JetBrains Mono for code. All three loaded from
	1115	Google Fonts with display:swap so we never block first paint. System
	1116	fallbacks remain in place — if the CDN is unreachable the site still
	1117	renders cleanly with Segoe UI (Win) / SF (Mac) / Roboto (Android). */
	1118	--font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Code', 'Cascadia Mono', Menlo, Consolas, 'Courier New', monospace;
	1119	--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI', system-ui, Roboto, 'Helvetica Neue', Arial, sans-serif;
	1120	--font-display: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI', system-ui, Roboto, 'Helvetica Neue', Arial, sans-serif;
958d26aClaude	1121	--mono-feat: 'calt', 'liga', 'ss01';
	1122
	1123	/* Radius — sharper than before */
	1124	--r-sm: 5px;
	1125	--r: 7px;
	1126	--r-md: 9px;
	1127	--r-lg: 12px;
	1128	--r-xl: 16px;
	1129	--r-2xl: 22px;
	1130	--r-full: 9999px;
	1131	--radius: 7px;
	1132
	1133	/* Type scale — bigger display sizes for editorial feel */
	1134	--t-xs: 11px;
	1135	--t-sm: 13px;
	1136	--t-base: 14px;
	1137	--t-md: 16px;
	1138	--t-lg: 20px;
	1139	--t-xl: 28px;
	1140	--t-2xl: 40px;
	1141	--t-3xl: 56px;
	1142	--t-display: 72px;
	1143	--t-display-lg:96px;
	1144
	1145	/* Spacing — 4px base */
2ce1d0bClaude	1146	--s-0: 0;
958d26aClaude	1147	--s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
	1148	--s-5: 20px; --s-6: 24px; --s-7: 28px; --s-8: 32px;
	1149	--s-10:40px; --s-12:48px; --s-14:56px; --s-16:64px;
	1150	--s-20:80px; --s-24:96px; --s-32:128px;
	1151
	1152	/* Elevation — softer + more layered */
	1153	--elev-0: 0 0 0 1px var(--border);
	1154	--elev-1: 0 1px 2px rgba(0,0,0,0.50), 0 0 0 1px var(--border);
	1155	--elev-2: 0 8px 24px -8px rgba(0,0,0,0.60), 0 0 0 1px var(--border);
	1156	--elev-3: 0 20px 48px -12px rgba(0,0,0,0.70), 0 0 0 1px var(--border-strong);
479dcd9Claude	1157	--elev-glow: 0 0 0 1px rgba(91,110,232,0.32);
	1158	--ring: 0 0 0 3px rgba(91,110,232,0.28);
958d26aClaude	1159	--ring-warn: 0 0 0 3px rgba(251,191,36,0.28);
	1160	--ring-err: 0 0 0 3px rgba(248,113,113,0.28);
	1161
	1162	/* Motion */
	1163	--ease: cubic-bezier(0.16, 1, 0.3, 1);
	1164	--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
	1165	--ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
	1166	--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
	1167	--t-fast: 120ms;
	1168	--t-base: 200ms;
	1169	--t-slow: 360ms;
	1170	--t-slower:560ms;
	1171
	1172	--header-h: 60px;
c63b860Claude	1173
	1174	/* Block O3 — visual coherence: named token aliases (additive). */
	1175	--space-1: var(--s-1);
	1176	--space-2: var(--s-2);
	1177	--space-3: var(--s-3);
	1178	--space-4: var(--s-4);
	1179	--space-5: var(--s-5);
	1180	--space-6: var(--s-6);
	1181	--space-8: var(--s-8);
	1182	--space-10: var(--s-10);
	1183	--space-12: var(--s-12);
	1184	--space-16: var(--s-16);
	1185	--space-20: var(--s-20);
	1186	--space-24: var(--s-24);
	1187	--radius-sm: var(--r-sm);
	1188	--radius-md: var(--r-md);
	1189	--radius-lg: var(--r-lg);
	1190	--radius-xl: var(--r-xl);
	1191	--radius-full: var(--r-full);
	1192	--font-size-xs: var(--t-xs);
	1193	--font-size-sm: var(--t-sm);
	1194	--font-size-base: var(--t-base);
	1195	--font-size-md: var(--t-md);
	1196	--font-size-lg: var(--t-lg);
	1197	--font-size-xl: var(--t-xl);
	1198	--font-size-2xl: var(--t-2xl);
	1199	--font-size-3xl: var(--t-3xl);
	1200	--font-size-hero: var(--t-display);
	1201	--leading-tight: 1.2;
	1202	--leading-snug: 1.35;
	1203	--leading-normal: 1.5;
	1204	--leading-relaxed: 1.6;
	1205	--leading-loose: 1.7;
	1206	--z-base: 1;
	1207	--z-nav: 10;
	1208	--z-sticky: 50;
	1209	--z-overlay: 100;
	1210	--z-modal: 1000;
	1211	--z-toast: 10000;
fc1817aClaude	1212	}
	1213
6fc53bdClaude	1214	:root[data-theme='light'] {
958d26aClaude	1215	--bg: #fbfbfc;
4c47454Claude	1216	--bg-secondary: #ffffff;
958d26aClaude	1217	--bg-tertiary: #f3f3f6;
	1218	--bg-elevated: #ffffff;
	1219	--bg-surface: #f6f6f9;
	1220	--bg-hover: rgba(0,0,0,0.035);
	1221	--bg-active: rgba(0,0,0,0.07);
	1222	--bg-inset: rgba(0,0,0,0.04);
	1223
	1224	--border: rgba(15,16,28,0.08);
	1225	--border-subtle: rgba(15,16,28,0.04);
	1226	--border-strong: rgba(15,16,28,0.16);
	1227
	1228	--text: #0e1020;
	1229	--text-strong: #050617;
	1230	--text-muted: #5a5b70;
	1231	--text-faint: #8a8b9e;
479dcd9Claude	1232	--text-link: #4353c9;
958d26aClaude	1233
479dcd9Claude	1234	--accent: #4353c9;
	1235	--accent-2: #41707e;
	1236	--accent-hover: #3848b6;
	1237	--accent-pressed:#2e3c9d;
	1238	--accent-glow: 0 0 0 1px rgba(67,83,201,0.15);
	1239	--border-focus: rgba(67,83,201,0.50);
	1240	--ring: 0 0 0 3px rgba(67,83,201,0.20);
958d26aClaude	1241
	1242	--green: #059669;
	1243	--red: #dc2626;
4c47454Claude	1244	--yellow: #d97706;
958d26aClaude	1245
	1246	--elev-1: 0 1px 2px rgba(15,16,28,0.06), 0 0 0 1px var(--border);
	1247	--elev-2: 0 8px 24px -10px rgba(15,16,28,0.10), 0 0 0 1px var(--border);
	1248	--elev-3: 0 20px 48px -16px rgba(15,16,28,0.14), 0 0 0 1px var(--border-strong);
6fc53bdClaude	1249	}
	1250
	1251	/* Theme toggle — show the icon for the opposite theme so users see what they'll switch to. */
958d26aClaude	1252	.nav-theme { display: inline-flex; align-items: center; font-size: 15px; line-height: 1; opacity: 0.85; }
	1253	.nav-theme:hover { opacity: 1; }
6fc53bdClaude	1254	:root[data-theme='dark'] .theme-icon-dark { display: none; }
	1255	:root[data-theme='light'] .theme-icon-light { display: none; }
	1256
fc1817aClaude	1257	* { margin: 0; padding: 0; box-sizing: border-box; }
479dcd9Claude	1258	*::selection { background: rgba(91,110,232,0.32); color: var(--text-strong); }
2ce1d0bClaude	1259
958d26aClaude	1260	html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
fc1817aClaude	1261
	1262	body {
	1263	font-family: var(--font-sans);
	1264	background: var(--bg);
	1265	color: var(--text);
cf9178bTest User	1266	font-size: 15px;
2ce1d0bClaude	1267	line-height: 1.55;
958d26aClaude	1268	letter-spacing: -0.011em;
fc1817aClaude	1269	min-height: 100vh;
	1270	display: flex;
	1271	flex-direction: column;
958d26aClaude	1272	font-feature-settings: 'cv11', 'ss01', 'ss03', 'calt';
cf9178bTest User	1273	/* Subtle: prefers grayscale font smoothing on macOS for thin text,
	1274	and disables automatic synthesis of bold/italic which can produce
	1275	muddier rendering on certain weights. */
	1276	-webkit-font-smoothing: antialiased;
	1277	-moz-osx-font-smoothing: grayscale;
	1278	font-synthesis: none;
	1279	}
	1280	/* Tighten heading rhythm — the body is 15/1.55, headings step down
	1281	line-height inversely with size so display text doesn't feel airy. */
	1282	h1, h2, h3, h4, h5, h6 {
	1283	font-family: var(--font-display);
	1284	color: var(--text-strong);
	1285	letter-spacing: -0.022em;
	1286	line-height: 1.18;
	1287	font-weight: 650;
	1288	margin-top: 0;
	1289	}
	1290	h1 { font-size: 28px; letter-spacing: -0.028em; }
	1291	h2 { font-size: 22px; }
	1292	h3 { font-size: 18px; letter-spacing: -0.018em; }
	1293	h4 { font-size: 15.5px; letter-spacing: -0.012em; font-weight: 600; }
	1294	/* Link refinement — underline only on hover/focus, never by default
	1295	on internal nav. Prevents the "blue underline soup" look. */
	1296	a { color: var(--text-link); text-decoration: none; transition: color var(--t-fast) var(--ease); }
	1297	a:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 3px; }
	1298	a:focus-visible {
	1299	outline: none;
479dcd9Claude	1300	box-shadow: 0 0 0 3px rgba(91,110,232,0.32);
cf9178bTest User	1301	border-radius: 3px;
fc1817aClaude	1302	}
	1303
ba23fe2Claude	1304	/* No full-page atmosphere overlay — clean backgrounds signal trustworthy
	1305	infrastructure. Effects live on pages that earn them (landing hero only). */
2ce1d0bClaude	1306
	1307	a { color: var(--text-link); text-decoration: none; transition: color var(--t-fast) var(--ease); }
	1308	a:hover { color: var(--accent-hover); text-decoration: none; }
fc1817aClaude	1309
958d26aClaude	1310	/* Heading scale — confident, editorial, tight tracking */
	1311	h1, h2, h3, h4, h5, h6 {
	1312	font-family: var(--font-display);
2ce1d0bClaude	1313	font-weight: 600;
958d26aClaude	1314	letter-spacing: -0.022em;
	1315	line-height: 1.18;
	1316	color: var(--text-strong);
	1317	}
	1318	h1 { font-size: var(--t-xl); letter-spacing: -0.028em; }
	1319	h2 { font-size: var(--t-lg); letter-spacing: -0.022em; }
	1320	h3 { font-size: var(--t-md); font-weight: 600; letter-spacing: -0.015em; }
	1321	h4 { font-size: var(--t-base); font-weight: 600; letter-spacing: -0.01em; }
	1322	h5, h6 { font-size: var(--t-sm); font-weight: 600; letter-spacing: -0.005em; }
	1323
	1324	/* Editorial display heading utility — used by landing + marketing pages */
	1325	.display {
	1326	font-family: var(--font-display);
	1327	font-size: clamp(40px, 7.5vw, 96px);
	1328	line-height: 0.98;
	1329	letter-spacing: -0.04em;
	1330	font-weight: 600;
	1331	color: var(--text-strong);
2ce1d0bClaude	1332	}
fc1817aClaude	1333
958d26aClaude	1334	/* Eyebrow — uppercase mono label that sits above section headings */
	1335	.eyebrow {
	1336	display: inline-flex;
	1337	align-items: center;
	1338	gap: 8px;
	1339	font-family: var(--font-mono);
	1340	font-size: 11px;
	1341	font-weight: 500;
	1342	letter-spacing: 0.14em;
	1343	text-transform: uppercase;
	1344	color: var(--accent);
	1345	margin-bottom: var(--s-3);
	1346	}
	1347	.eyebrow::before {
	1348	content: '';
	1349	width: 18px;
	1350	height: 1px;
	1351	background: currentColor;
	1352	opacity: 0.6;
	1353	}
	1354
	1355	/* Section header — paired eyebrow + title + lede */
	1356	.section-header { max-width: 720px; margin: 0 auto var(--s-10); text-align: center; }
	1357	.section-header.left { text-align: left; margin-left: 0; margin-right: auto; }
	1358	.section-header h2 {
	1359	font-size: clamp(28px, 4vw, 44px);
	1360	line-height: 1.05;
	1361	letter-spacing: -0.028em;
	1362	margin-bottom: var(--s-3);
	1363	}
	1364	.section-header p {
	1365	color: var(--text-muted);
	1366	font-size: var(--t-md);
	1367	line-height: 1.6;
	1368	max-width: 580px;
	1369	margin: 0 auto;
	1370	}
	1371	.section-header.left p { margin-left: 0; }
fc1817aClaude	1372
958d26aClaude	1373	code, kbd, samp {
2ce1d0bClaude	1374	font-family: var(--font-mono);
958d26aClaude	1375	font-feature-settings: var(--mono-feat);
	1376	}
	1377	code {
	1378	font-size: 0.9em;
2ce1d0bClaude	1379	background: var(--bg-tertiary);
958d26aClaude	1380	border: 1px solid var(--border-subtle);
2ce1d0bClaude	1381	padding: 1px 6px;
	1382	border-radius: var(--r-sm);
	1383	color: var(--text);
	1384	}
958d26aClaude	1385	kbd, .kbd {
	1386	display: inline-flex;
	1387	align-items: center;
	1388	padding: 1px 6px;
	1389	font-family: var(--font-mono);
	1390	font-size: 11px;
	1391	background: var(--bg-elevated);
	1392	border: 1px solid var(--border);
	1393	border-bottom-width: 2px;
	1394	border-radius: 4px;
	1395	color: var(--text);
	1396	line-height: 1.5;
	1397	vertical-align: middle;
	1398	}
2ce1d0bClaude	1399
958d26aClaude	1400	/* Mono utility for technical chrome (paths, IDs, dates) */
	1401	.mono { font-family: var(--font-mono); font-feature-settings: var(--mono-feat); font-size: 0.96em; }
	1402	.meta-mono { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--text-muted); letter-spacing: 0; }
	1403
	1404	/* Pre-launch banner — slim, refined, mono caption */
4a52a98Claude	1405	.prelaunch-banner {
958d26aClaude	1406	position: relative;
2ce1d0bClaude	1407	background:
958d26aClaude	1408	linear-gradient(180deg, rgba(251,191,36,0.10), rgba(251,191,36,0.03)),
2ce1d0bClaude	1409	var(--bg);
958d26aClaude	1410	border-bottom: 1px solid rgba(251,191,36,0.28);
4a52a98Claude	1411	color: var(--yellow);
958d26aClaude	1412	padding: 7px 24px;
	1413	font-family: var(--font-mono);
	1414	font-size: 11px;
4a52a98Claude	1415	font-weight: 500;
	1416	text-align: center;
2ce1d0bClaude	1417	line-height: 1.5;
958d26aClaude	1418	letter-spacing: 0.04em;
	1419	text-transform: uppercase;
	1420	}
	1421	.prelaunch-banner::before {
	1422	content: '◆';
	1423	margin-right: 8px;
	1424	font-size: 9px;
	1425	opacity: 0.7;
	1426	vertical-align: 1px;
4a52a98Claude	1427	}
	1428
cd4f63bTest User	1429	/* Block Q3 — Playground banner. Brighter than the prelaunch strip so
	1430	visitors don't miss the "save your work" CTA, but slim enough to
	1431	not feel like a modal. */
	1432	.playground-banner {
	1433	position: relative;
	1434	display: flex;
	1435	align-items: center;
	1436	justify-content: center;
	1437	gap: 8px;
	1438	background:
	1439	linear-gradient(180deg, rgba(251,191,36,0.20), rgba(251,191,36,0.06)),
	1440	var(--bg);
	1441	border-bottom: 1px solid rgba(251,191,36,0.45);
	1442	color: var(--yellow, #fbbf24);
	1443	padding: 8px 40px 8px 24px;
	1444	font-size: 13px;
	1445	font-weight: 500;
	1446	text-align: center;
	1447	line-height: 1.4;
	1448	}
	1449	.playground-banner-icon { font-size: 14px; }
	1450	.playground-banner-text { color: var(--text-strong, #e6edf3); }
	1451	.playground-banner-countdown { font-weight: 600; }
	1452	.playground-banner-cta {
	1453	margin-left: 4px;
	1454	color: var(--yellow, #fbbf24);
	1455	text-decoration: underline;
	1456	font-weight: 600;
	1457	}
	1458	.playground-banner-cta:hover { opacity: 0.85; }
	1459	.playground-banner-dismiss {
	1460	position: absolute;
	1461	top: 50%;
	1462	right: 12px;
	1463	transform: translateY(-50%);
	1464	background: transparent;
	1465	border: none;
	1466	color: var(--text-muted, #8b949e);
	1467	font-size: 18px;
	1468	line-height: 1;
	1469	cursor: pointer;
	1470	padding: 0 4px;
	1471	}
	1472	.playground-banner-dismiss:hover { color: var(--text-strong, #e6edf3); }
	1473
41a1450Claude	1474	/* Site nav header — sticky, blurred, hairline border. Scoped to
	1475	.site-header: pages use semantic <header> elements for section/hero
	1476	headings, and a bare element selector here turns every one of them
	1477	into a 64px sticky bar (the /pricing hero-overlap bug). */
	1478	.site-header {
2ce1d0bClaude	1479	position: sticky;
	1480	top: 0;
	1481	z-index: 100;
fc1817aClaude	1482	border-bottom: 1px solid var(--border);
2ce1d0bClaude	1483	padding: 0 24px;
	1484	height: var(--header-h);
ba23fe2Claude	1485	background: rgba(13,17,23,0.80);
	1486	backdrop-filter: saturate(160%) blur(16px);
	1487	-webkit-backdrop-filter: saturate(160%) blur(16px);
fc1817aClaude	1488	}
ba23fe2Claude	1489	:root[data-theme='light'] .site-header { background: rgba(251,251,252,0.85); }
fc1817aClaude	1490
41a1450Claude	1491	.site-header nav {
06d5ffeClaude	1492	display: flex;
	1493	align-items: center;
958d26aClaude	1494	gap: 18px;
eed4684Claude	1495	max-width: 1920px;
06d5ffeClaude	1496	margin: 0 auto;
2ce1d0bClaude	1497	height: 100%;
	1498	}
	1499	.logo {
958d26aClaude	1500	font-family: var(--font-display);
	1501	font-size: 16px;
2ce1d0bClaude	1502	font-weight: 700;
958d26aClaude	1503	letter-spacing: -0.025em;
	1504	color: var(--text-strong);
2ce1d0bClaude	1505	display: inline-flex;
	1506	align-items: center;
958d26aClaude	1507	gap: 9px;
	1508	transition: opacity var(--t-fast) var(--ease);
06d5ffeClaude	1509	}
2ce1d0bClaude	1510	.logo::before {
	1511	content: '';
958d26aClaude	1512	width: 20px; height: 20px;
	1513	border-radius: 6px;
2ce1d0bClaude	1514	background: var(--accent-gradient);
958d26aClaude	1515	box-shadow:
	1516	inset 0 1px 0 rgba(255,255,255,0.25),
479dcd9Claude	1517	0 0 0 1px rgba(91,110,232,0.45);
2ce1d0bClaude	1518	flex-shrink: 0;
479dcd9Claude	1519	transition: box-shadow var(--t-base) var(--ease);
958d26aClaude	1520	}
	1521	.logo:hover { text-decoration: none; color: var(--text-strong); }
	1522	.logo:hover::before {
	1523	box-shadow:
	1524	inset 0 1px 0 rgba(255,255,255,0.30),
479dcd9Claude	1525	0 0 0 1px rgba(91,110,232,0.60);
06d5ffeClaude	1526	}
fc1817aClaude	1527
2ce1d0bClaude	1528	.nav-search {
	1529	flex: 1;
958d26aClaude	1530	max-width: 360px;
	1531	margin: 0 4px 0 8px;
	1532	position: relative;
2ce1d0bClaude	1533	}
	1534	.nav-search input {
	1535	width: 100%;
958d26aClaude	1536	padding: 7px 12px 7px 32px;
2ce1d0bClaude	1537	background: var(--bg-tertiary);
	1538	border: 1px solid var(--border);
	1539	border-radius: var(--r-sm);
	1540	color: var(--text);
	1541	font-family: var(--font-sans);
	1542	font-size: var(--t-sm);
958d26aClaude	1543	transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
	1544	}
	1545	.nav-search::before {
	1546	content: '';
	1547	position: absolute;
	1548	left: 11px; top: 50%;
	1549	transform: translateY(-50%);
	1550	width: 12px; height: 12px;
	1551	border: 1.5px solid var(--text-faint);
	1552	border-radius: 50%;
	1553	pointer-events: none;
	1554	}
	1555	.nav-search::after {
	1556	content: '';
	1557	position: absolute;
	1558	left: 19px; top: calc(50% + 4px);
	1559	width: 5px; height: 1.5px;
	1560	background: var(--text-faint);
	1561	transform: rotate(45deg);
	1562	pointer-events: none;
2ce1d0bClaude	1563	}
	1564	.nav-search input::placeholder { color: var(--text-faint); }
	1565	.nav-search input:focus {
	1566	outline: none;
	1567	background: var(--bg-secondary);
958d26aClaude	1568	border-color: var(--border-focus);
	1569	box-shadow: var(--ring);
2ce1d0bClaude	1570	}
06d5ffeClaude	1571
958d26aClaude	1572	.nav-right { display: flex; align-items: center; gap: 2px; margin-left: auto; }
f764c07Claude	1573
	1574	/* Block N3 — site-admin deploy status pill */
	1575	.nav-deploy-pill {
	1576	display: inline-flex;
	1577	align-items: center;
	1578	gap: 6px;
	1579	padding: 4px 10px;
	1580	margin: 0 6px 0 0;
	1581	border-radius: 9999px;
	1582	font-size: 11px;
	1583	font-weight: 600;
	1584	line-height: 1;
	1585	color: var(--text-strong);
	1586	background: var(--bg-elevated);
	1587	border: 1px solid var(--border);
	1588	text-decoration: none;
	1589	transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
	1590	}
	1591	.nav-deploy-pill:hover { background: var(--bg-hover); text-decoration: none; }
	1592	.nav-deploy-pill .deploy-pill-dot {
	1593	display: inline-block;
	1594	width: 8px; height: 8px;
	1595	border-radius: 50%;
	1596	background: #6b7280;
	1597	}
479dcd9Claude	1598	.deploy-pill-success .deploy-pill-dot { background: #34d399; }
	1599	.deploy-pill-failed .deploy-pill-dot { background: #f87171; }
f764c07Claude	1600	.deploy-pill-failed { border-color: rgba(248,113,113,0.4); }
	1601	.deploy-pill-progress .deploy-pill-dot {
	1602	background: #fbbf24;
	1603	animation: deployPillPulse 1.2s ease-in-out infinite;
	1604	}
	1605	@keyframes deployPillPulse {
	1606	0%, 100% { opacity: 1; transform: scale(1); }
	1607	50% { opacity: 0.45; transform: scale(0.8); }
	1608	}
	1609	.deploy-pill-empty .deploy-pill-dot { background: #9ca3af; }
	1610
c6018a5Claude	1611	/* ── AI dropdown (nav consolidation) ── */
	1612	.nav-ai-dropdown {
	1613	position: relative;
	1614	display: inline-flex;
	1615	align-items: center;
	1616	}
	1617	.nav-ai-trigger {
	1618	background: transparent;
	1619	border: 0;
	1620	font: inherit;
	1621	cursor: pointer;
	1622	color: var(--text-muted);
	1623	font-size: var(--t-sm);
	1624	font-weight: 500;
	1625	padding: 7px 11px;
	1626	border-radius: var(--r-sm);
	1627	line-height: 1.2;
	1628	}
	1629	.nav-ai-trigger:hover {
	1630	color: var(--text-strong);
	1631	background: var(--bg-hover);
	1632	}
	1633	.nav-ai-menu {
	1634	position: absolute;
	1635	top: calc(100% + 6px);
	1636	right: 0;
	1637	min-width: 220px;
	1638	background: var(--bg-secondary);
	1639	border: 1px solid var(--border-strong);
	1640	border-radius: 10px;
479dcd9Claude	1641	box-shadow: 0 12px 32px rgba(0,0,0,0.40), 0 0 0 1px rgba(91,110,232,0.10);
c6018a5Claude	1642	padding: 6px;
	1643	display: none;
	1644	z-index: var(--z-overlay, 100);
	1645	}
	1646	.nav-ai-dropdown:hover .nav-ai-menu,
	1647	.nav-ai-dropdown.is-open .nav-ai-menu,
	1648	.nav-ai-dropdown:focus-within .nav-ai-menu {
	1649	display: block;
	1650	}
	1651	.nav-ai-item {
	1652	display: flex;
	1653	flex-direction: column;
	1654	gap: 1px;
	1655	padding: 8px 10px;
	1656	border-radius: 6px;
	1657	color: var(--text);
	1658	text-decoration: none;
	1659	transition: background var(--t-fast) var(--ease);
	1660	}
	1661	.nav-ai-item:hover {
	1662	background: var(--bg-hover);
	1663	text-decoration: none;
	1664	color: var(--text-strong);
	1665	}
	1666	.nav-ai-item-label {
	1667	font-size: var(--t-sm);
	1668	font-weight: 600;
	1669	color: var(--text-strong);
	1670	}
	1671	.nav-ai-item-sub {
	1672	font-size: 11.5px;
	1673	color: var(--text-muted);
	1674	}
	1675
2ce1d0bClaude	1676	.nav-link {
958d26aClaude	1677	position: relative;
2ce1d0bClaude	1678	color: var(--text-muted);
	1679	font-size: var(--t-sm);
	1680	font-weight: 500;
958d26aClaude	1681	padding: 7px 11px;
2ce1d0bClaude	1682	border-radius: var(--r-sm);
958d26aClaude	1683	transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
2ce1d0bClaude	1684	}
	1685	.nav-link:hover {
958d26aClaude	1686	color: var(--text-strong);
2ce1d0bClaude	1687	background: var(--bg-hover);
	1688	text-decoration: none;
	1689	}
958d26aClaude	1690	.nav-link.active { color: var(--text-strong); }
	1691	.nav-link.active::after {
	1692	content: '';
	1693	position: absolute;
	1694	left: 11px; right: 11px;
	1695	bottom: -1px;
	1696	height: 2px;
	1697	background: var(--accent-gradient);
	1698	border-radius: 2px;
	1699	}
adf5e18Claude	1700	/* "Migrate from GitHub" nav link — logged-out only, slightly accented
	1701	so it reads as an action affordance rather than a passive link. */
	1702	.nav-migrate {
	1703	color: var(--accent);
	1704	font-weight: 600;
479dcd9Claude	1705	border: 1px solid rgba(91,110,232,0.22);
	1706	background: rgba(91,110,232,0.07);
adf5e18Claude	1707	}
	1708	.nav-migrate:hover {
	1709	color: var(--accent-hover);
479dcd9Claude	1710	background: rgba(91,110,232,0.13);
	1711	border-color: rgba(91,110,232,0.40);
adf5e18Claude	1712	}
	1713	@media (max-width: 780px) { .nav-migrate { display: none; } }
	1714
2ce1d0bClaude	1715	.nav-user {
958d26aClaude	1716	color: var(--text-strong);
2ce1d0bClaude	1717	font-weight: 600;
	1718	font-size: var(--t-sm);
	1719	padding: 6px 10px;
	1720	border-radius: var(--r-sm);
958d26aClaude	1721	margin-left: 6px;
2ce1d0bClaude	1722	transition: background var(--t-fast) var(--ease);
	1723	}
958d26aClaude	1724	.nav-user::before {
	1725	content: '';
	1726	display: inline-block;
	1727	width: 8px; height: 8px;
	1728	background: var(--green);
	1729	border-radius: 50%;
	1730	margin-right: 7px;
	1731	vertical-align: 1px;
	1732	}
2ce1d0bClaude	1733	.nav-user:hover { background: var(--bg-hover); text-decoration: none; }
fc1817aClaude	1734
f5b9ef5Claude	1735	/* ── Inbox bell button ── */
	1736	.nav-inbox-btn {
	1737	position: relative;
	1738	display: inline-flex;
	1739	align-items: center;
	1740	justify-content: center;
	1741	width: 34px;
	1742	height: 34px;
	1743	border-radius: var(--r-sm);
	1744	color: var(--text-muted);
	1745	transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
	1746	flex-shrink: 0;
	1747	}
	1748	.nav-inbox-btn:hover { color: var(--text); background: var(--bg-hover); text-decoration: none; }
	1749	.nav-inbox-badge {
	1750	position: absolute;
	1751	top: 3px; right: 3px;
	1752	min-width: 15px; height: 15px;
	1753	padding: 0 4px;
	1754	font-size: 9.5px;
	1755	font-weight: 700;
	1756	line-height: 15px;
	1757	color: #fff;
479dcd9Claude	1758	background: var(--accent);
f5b9ef5Claude	1759	border-radius: 9999px;
	1760	text-align: center;
	1761	font-variant-numeric: tabular-nums;
	1762	}
	1763
	1764	/* ── User dropdown ── */
	1765	.nav-user-dropdown { position: relative; }
	1766	.nav-user-trigger {
	1767	display: inline-flex;
	1768	align-items: center;
	1769	gap: 7px;
	1770	padding: 5px 9px 5px 5px;
	1771	border-radius: var(--r-sm);
	1772	border: 1px solid transparent;
	1773	background: transparent;
	1774	color: var(--text);
	1775	font-family: var(--font-sans);
	1776	font-size: var(--t-sm);
	1777	font-weight: 500;
	1778	cursor: pointer;
	1779	transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
	1780	}
	1781	.nav-user-trigger:hover { background: var(--bg-hover); border-color: var(--border); }
	1782	.nav-user-avatar {
	1783	width: 24px; height: 24px;
	1784	border-radius: 50%;
	1785	background: var(--accent-gradient);
	1786	color: #fff;
	1787	font-size: 11px;
	1788	font-weight: 700;
	1789	display: inline-flex;
	1790	align-items: center;
	1791	justify-content: center;
	1792	flex-shrink: 0;
	1793	box-shadow: 0 0 0 2px var(--border);
	1794	}
	1795	.nav-user-name { font-weight: 500; font-size: var(--t-sm); max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	1796	.nav-user-caret { font-size: 8px; opacity: 0.5; }
	1797	.nav-user-menu {
	1798	display: none;
	1799	position: absolute;
	1800	top: calc(100% + 6px);
	1801	right: 0;
	1802	min-width: 220px;
	1803	background: var(--bg-elevated);
	1804	border: 1px solid var(--border-strong);
	1805	border-radius: var(--r-lg);
	1806	box-shadow: 0 16px 48px -8px rgba(0,0,0,0.55), 0 0 0 1px var(--border);
	1807	padding: 6px;
	1808	z-index: 200;
	1809	animation: navMenuIn 140ms var(--ease) both;
	1810	}
	1811	.nav-user-menu.is-open { display: block; }
	1812	.nav-user-menu-header {
	1813	padding: 8px 10px 10px;
	1814	display: flex;
	1815	flex-direction: column;
	1816	gap: 2px;
	1817	}
	1818	.nav-user-menu-name { font-weight: 600; font-size: var(--t-sm); color: var(--text-strong); }
	1819	.nav-user-menu-handle { font-size: var(--t-xs); color: var(--text-muted); }
	1820	.nav-user-menu-sep { height: 1px; background: var(--border); margin: 4px -6px; }
	1821	.nav-user-item {
	1822	display: block;
	1823	padding: 7px 10px;
	1824	border-radius: 6px;
	1825	font-size: var(--t-sm);
	1826	color: var(--text);
	1827	transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
	1828	white-space: nowrap;
	1829	}
	1830	.nav-user-item:hover { background: var(--bg-hover); color: var(--text-strong); text-decoration: none; }
	1831	.nav-user-item--danger { color: var(--red); }
	1832	.nav-user-item--danger:hover { background: rgba(248,113,113,0.08); color: var(--red); }
	1833
	1834	@keyframes navMenuIn {
	1835	from { opacity: 0; transform: translateY(-4px) scale(0.97); }
	1836	to { opacity: 1; transform: translateY(0) scale(1); }
	1837	}
	1838
2ce1d0bClaude	1839	main {
eed4684Claude	1840	max-width: 1920px;
2ce1d0bClaude	1841	margin: 0 auto;
958d26aClaude	1842	padding: 36px 24px 80px;
2ce1d0bClaude	1843	flex: 1;
	1844	width: 100%;
479dcd9Claude	1845	/* Subtle entrance fade on page load — kept short (180ms) so it
	1846	reads as responsiveness, not theatre. Honors reduced-motion. */
	1847	animation: gxMainEnter 180ms cubic-bezier(0.22, 1, 0.36, 1) both;
ed6e438Claude	1848	}
	1849	@keyframes gxMainEnter {
479dcd9Claude	1850	from { opacity: 0; transform: translateY(3px); }
ed6e438Claude	1851	to { opacity: 1; transform: translateY(0); }
	1852	}
	1853	@media (prefers-reduced-motion: reduce) {
	1854	main { animation: none; }
	1855	}
	1856	/* 2026 polish — accent focus ring across all focusable elements.
	1857	The default browser ring is utilitarian; this is the same width
	1858	but tinted to the brand accent so keyboard navigation feels
	1859	intentional, not jarring. :focus-visible only — mouse users
	1860	never see it. */
	1861	:focus-visible {
	1862	outline: none;
	1863	}
	1864	a:focus-visible,
	1865	button:focus-visible,
	1866	input:focus-visible,
	1867	select:focus-visible,
	1868	textarea:focus-visible,
	1869	[tabindex]:focus-visible {
479dcd9Claude	1870	outline: 2px solid rgba(91, 110, 232, 0.55);
ed6e438Claude	1871	outline-offset: 2px;
	1872	border-radius: 4px;
2ce1d0bClaude	1873	}
fc1817aClaude	1874
958d26aClaude	1875	/* Editorial footer: link grid + tagline row */
fc1817aClaude	1876	footer {
	1877	border-top: 1px solid var(--border);
958d26aClaude	1878	padding: 56px 24px 40px;
fc1817aClaude	1879	color: var(--text-muted);
958d26aClaude	1880	font-size: var(--t-sm);
ba23fe2Claude	1881	background: var(--bg);
958d26aClaude	1882	}
	1883	footer .footer-inner {
eed4684Claude	1884	max-width: 1920px;
958d26aClaude	1885	margin: 0 auto;
	1886	display: grid;
	1887	grid-template-columns: 1fr auto;
	1888	gap: 48px;
	1889	align-items: start;
	1890	}
	1891	footer .footer-brand .logo { margin-bottom: var(--s-3); }
	1892	footer .footer-tag {
	1893	color: var(--text-muted);
	1894	font-size: var(--t-sm);
	1895	max-width: 320px;
	1896	line-height: 1.55;
	1897	}
	1898	footer .footer-links {
	1899	display: grid;
	1900	grid-template-columns: repeat(3, minmax(120px, auto));
	1901	gap: 0 56px;
	1902	}
	1903	footer .footer-col-title {
	1904	font-family: var(--font-mono);
	1905	font-size: 11px;
	1906	text-transform: uppercase;
	1907	letter-spacing: 0.14em;
	1908	color: var(--text-faint);
	1909	margin-bottom: var(--s-3);
	1910	}
	1911	footer .footer-col a {
	1912	display: block;
	1913	color: var(--text-muted);
	1914	font-size: var(--t-sm);
	1915	padding: 5px 0;
	1916	transition: color var(--t-fast) var(--ease);
	1917	}
	1918	footer .footer-col a:hover { color: var(--text-strong); text-decoration: none; }
	1919	footer .footer-bottom {
eed4684Claude	1920	max-width: 1920px;
958d26aClaude	1921	margin: 40px auto 0;
	1922	padding-top: 24px;
	1923	border-top: 1px solid var(--border-subtle);
	1924	display: flex;
	1925	justify-content: space-between;
	1926	align-items: center;
2ce1d0bClaude	1927	color: var(--text-faint);
	1928	font-size: var(--t-xs);
958d26aClaude	1929	font-family: var(--font-mono);
	1930	letter-spacing: 0.02em;
	1931	}
	1932	footer .footer-bottom a { color: var(--text-faint); }
	1933	footer .footer-bottom a:hover { color: var(--text-muted); text-decoration: none; }
05cdb85Claude	1934	footer .footer-build {
	1935	display: inline-flex;
	1936	align-items: center;
	1937	gap: 6px;
	1938	color: var(--text-faint);
	1939	font-family: var(--font-mono);
	1940	font-size: 11px;
	1941	cursor: help;
	1942	}
	1943	footer .footer-build-dot {
	1944	width: 6px; height: 6px;
	1945	border-radius: 50%;
	1946	background: var(--green);
479dcd9Claude	1947	opacity: 0.9;
05cdb85Claude	1948	}
958d26aClaude	1949	@media (max-width: 768px) {
	1950	footer .footer-inner { grid-template-columns: 1fr; gap: 32px; }
	1951	footer .footer-links { grid-template-columns: repeat(2, 1fr); gap: 24px 32px; }
	1952	footer .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
fc1817aClaude	1953	}
	1954
2ce1d0bClaude	1955	/* ============================================================ */
	1956	/* Buttons */
	1957	/* ============================================================ */
dc26881CC LABS App	1958	/* ============================================================ */
	1959	/* Buttons — Block U2 senior polish pass. */
	1960	/* Rules: */
	1961	/* · hover lifts every .btn by 1px + soft drop shadow (180ms) */
	1962	/* · active presses back down to 0 (80ms — faster on press) */
	1963	/* · focus-visible uses a soft box-shadow ring (no outline) */
	1964	/* · primary gradient shifts position on hover for a slow */
	1965	/* 600ms shimmer */
	1966	/* · disabled never lifts and never animates */
	1967	/* ============================================================ */
06d5ffeClaude	1968	.btn {
	1969	display: inline-flex;
	1970	align-items: center;
2ce1d0bClaude	1971	justify-content: center;
958d26aClaude	1972	gap: 7px;
2ce1d0bClaude	1973	padding: 7px 14px;
	1974	border-radius: var(--r-sm);
958d26aClaude	1975	font-family: var(--font-sans);
2ce1d0bClaude	1976	font-size: var(--t-sm);
06d5ffeClaude	1977	font-weight: 500;
	1978	border: 1px solid var(--border);
2ce1d0bClaude	1979	background: var(--bg-elevated);
06d5ffeClaude	1980	color: var(--text);
	1981	cursor: pointer;
	1982	text-decoration: none;
958d26aClaude	1983	line-height: 1.25;
	1984	letter-spacing: -0.008em;
dc26881CC LABS App	1985	/* U2 — hover/transform settles in 180ms; press snaps in 80ms.
	1986	Listed once on the base rule so :active can override only the
	1987	transform/duration without re-typing the colour/bg transitions. */
2ce1d0bClaude	1988	transition:
dc26881CC LABS App	1989	background 180ms ease,
	1990	border-color 180ms ease,
	1991	transform 180ms ease,
	1992	box-shadow 180ms ease,
	1993	color 180ms ease;
2ce1d0bClaude	1994	user-select: none;
	1995	white-space: nowrap;
958d26aClaude	1996	position: relative;
06d5ffeClaude	1997	}
2ce1d0bClaude	1998	.btn:hover {
	1999	background: var(--bg-surface);
	2000	border-color: var(--border-strong);
958d26aClaude	2001	color: var(--text-strong);
2ce1d0bClaude	2002	text-decoration: none;
dc26881CC LABS App	2003	/* U2 — universal hover lift + soft accent drop shadow. */
	2004	transform: translateY(-1px);
	2005	box-shadow: 0 4px 12px -4px rgba(15, 17, 26, 0.45);
	2006	}
	2007	.btn:active {
	2008	transform: translateY(0);
	2009	transition-duration: 80ms;
	2010	}
479dcd9Claude	2011	/* U2 — soft modern focus ring via box-shadow, not outline.
	2012	The literal legacy declaration is kept for external tooling that
	2013	greps for the U2 contract; the var(--ring) declaration after it
	2014	wins the cascade and renders the calm indigo ring. */
dc26881CC LABS App	2015	.btn:focus-visible {
	2016	outline: none;
6fd5915Claude	2017	box-shadow: 0 0 0 3px rgba(91, 110, 232, 0.35);
479dcd9Claude	2018	box-shadow: var(--ring);
2ce1d0bClaude	2019	}
	2020
	2021	.btn-primary {
	2022	background: var(--accent-gradient);
	2023	border-color: transparent;
	2024	color: #fff;
	2025	font-weight: 600;
958d26aClaude	2026	text-shadow: 0 1px 0 rgba(0,0,0,0.15);
2ce1d0bClaude	2027	box-shadow:
958d26aClaude	2028	inset 0 1px 0 rgba(255,255,255,0.22),
	2029	inset 0 -1px 0 rgba(0,0,0,0.10),
	2030	0 1px 2px rgba(0,0,0,0.40),
479dcd9Claude	2031	0 0 0 1px rgba(91,110,232,0.30);
dc26881CC LABS App	2032	transition:
8cfb00eClaude	2033	background 180ms ease,
dc26881CC LABS App	2034	transform 180ms ease,
	2035	box-shadow 180ms ease,
	2036	color 180ms ease;
06d5ffeClaude	2037	}
2ce1d0bClaude	2038	.btn-primary:hover {
958d26aClaude	2039	color: #fff;
8cfb00eClaude	2040	background: var(--accent-hover);
958d26aClaude	2041	border-color: transparent;
dc26881CC LABS App	2042	transform: translateY(-1px);
2ce1d0bClaude	2043	box-shadow:
958d26aClaude	2044	inset 0 1px 0 rgba(255,255,255,0.30),
	2045	inset 0 -1px 0 rgba(0,0,0,0.10),
479dcd9Claude	2046	0 6px 18px -6px rgba(0,0,0,0.45),
	2047	0 0 0 1px rgba(91,110,232,0.40);
2ce1d0bClaude	2048	}
dc26881CC LABS App	2049	.btn-primary:active { transform: translateY(0); transition-duration: 80ms; }
	2050	/* U2 — primary focus ring uses the same accent box-shadow recipe. */
	2051	.btn-primary:focus-visible {
	2052	box-shadow:
	2053	inset 0 1px 0 rgba(255,255,255,0.22),
479dcd9Claude	2054	0 0 0 3px rgba(91,110,232,0.35);
dc26881CC LABS App	2055	}
2ce1d0bClaude	2056
	2057	.btn-danger {
	2058	background: transparent;
958d26aClaude	2059	border-color: rgba(248,113,113,0.40);
2ce1d0bClaude	2060	color: var(--red);
	2061	}
	2062	.btn-danger:hover {
958d26aClaude	2063	background: rgba(248,113,113,0.08);
2ce1d0bClaude	2064	border-color: var(--red);
958d26aClaude	2065	color: var(--red);
dc26881CC LABS App	2066	transform: translateY(-1px);
	2067	box-shadow: 0 4px 12px -4px rgba(248,113,113,0.30);
2ce1d0bClaude	2068	}
dc26881CC LABS App	2069	.btn-danger:focus-visible { box-shadow: 0 0 0 3px rgba(248,113,113,0.35); }
2ce1d0bClaude	2070
	2071	.btn-ghost {
	2072	background: transparent;
	2073	border-color: transparent;
	2074	color: var(--text-muted);
	2075	}
	2076	.btn-ghost:hover {
	2077	background: var(--bg-hover);
958d26aClaude	2078	color: var(--text-strong);
2ce1d0bClaude	2079	border-color: var(--border);
dc26881CC LABS App	2080	transform: translateY(-1px);
	2081	box-shadow: 0 4px 12px -4px rgba(15, 17, 26, 0.30);
2ce1d0bClaude	2082	}
	2083
958d26aClaude	2084	.btn-secondary {
	2085	background: var(--bg-elevated);
	2086	border-color: var(--border-strong);
	2087	color: var(--text-strong);
	2088	}
	2089	.btn-secondary:hover {
	2090	background: var(--bg-surface);
	2091	border-color: var(--border-strong);
dc26881CC LABS App	2092	transform: translateY(-1px);
	2093	box-shadow: 0 4px 12px -4px rgba(15, 17, 26, 0.35);
958d26aClaude	2094	}
	2095
	2096	.btn-sm { padding: 4px 10px; font-size: var(--t-xs); border-radius: var(--r-sm); gap: 5px; }
	2097	.btn-lg { padding: 11px 22px; font-size: var(--t-base); border-radius: var(--r); }
	2098	.btn-xl { padding: 14px 28px; font-size: var(--t-md); border-radius: var(--r); font-weight: 600; }
	2099	.btn-block { width: 100%; }
2ce1d0bClaude	2100
dc26881CC LABS App	2101	/* U2 — disabled never lifts, never shimmers, never glows. */
	2102	.btn:disabled,
	2103	.btn[aria-disabled='true'],
	2104	.btn:disabled:hover,
	2105	.btn[aria-disabled='true']:hover {
	2106	opacity: 0.5;
2ce1d0bClaude	2107	cursor: not-allowed;
	2108	pointer-events: none;
dc26881CC LABS App	2109	transform: none;
	2110	box-shadow: none;
	2111	}
	2112	@media (prefers-reduced-motion: reduce) {
	2113	.btn,
	2114	.btn:hover,
	2115	.btn:active,
	2116	.btn-primary,
	2117	.btn-primary:hover {
	2118	transform: none;
	2119	transition: background-color 80ms linear, color 80ms linear;
	2120	}
2ce1d0bClaude	2121	}
	2122
	2123	/* ============================================================ */
	2124	/* Forms */
	2125	/* ============================================================ */
	2126	.form-group { margin-bottom: 20px; }
	2127	.form-group label {
	2128	display: block;
	2129	font-size: var(--t-sm);
	2130	font-weight: 500;
	2131	margin-bottom: 6px;
	2132	color: var(--text);
	2133	letter-spacing: -0.005em;
	2134	}
	2135	.form-group input,
	2136	.form-group textarea,
	2137	.form-group select,
	2138	input[type='text'], input[type='email'], input[type='password'],
	2139	input[type='url'], input[type='search'], input[type='number'],
	2140	textarea, select {
06d5ffeClaude	2141	width: 100%;
2ce1d0bClaude	2142	padding: 9px 12px;
	2143	background: var(--bg-secondary);
06d5ffeClaude	2144	border: 1px solid var(--border);
2ce1d0bClaude	2145	border-radius: var(--r-sm);
06d5ffeClaude	2146	color: var(--text);
2ce1d0bClaude	2147	font-size: var(--t-sm);
06d5ffeClaude	2148	font-family: var(--font-sans);
2ce1d0bClaude	2149	transition:
	2150	border-color var(--t-fast) var(--ease),
	2151	background var(--t-fast) var(--ease),
	2152	box-shadow var(--t-fast) var(--ease);
06d5ffeClaude	2153	}
2ce1d0bClaude	2154	.form-group input::placeholder, textarea::placeholder, input::placeholder {
	2155	color: var(--text-faint);
06d5ffeClaude	2156	}
2ce1d0bClaude	2157	.form-group input:hover, textarea:hover, select:hover,
	2158	input[type='text']:hover, input[type='email']:hover, input[type='password']:hover {
	2159	border-color: var(--border-strong);
	2160	}
	2161	.form-group input:focus, .form-group textarea:focus, .form-group select:focus,
	2162	input:focus, textarea:focus, select:focus {
06d5ffeClaude	2163	outline: none;
2ce1d0bClaude	2164	background: var(--bg);
	2165	border-color: var(--border-focus);
	2166	box-shadow: var(--ring);
06d5ffeClaude	2167	}
2ce1d0bClaude	2168	textarea { font-family: var(--font-mono); font-size: var(--t-sm); line-height: 1.55; }
06d5ffeClaude	2169	.input-disabled { opacity: 0.5; cursor: not-allowed; }
	2170
2ce1d0bClaude	2171	/* ============================================================ */
	2172	/* Auth (register / login / verify) */
	2173	/* ============================================================ */
	2174	.auth-container {
98f45b4Claude	2175	/* 2026 polish — wider, more generous, with a subtle accent-glow
	2176	border and gradient top-edge so it reads as a premium product
	2177	gateway, not a stock form. The 480px width feels intentional
	2178	(not cramped, not endless). */
	2179	max-width: 480px;
	2180	margin: 72px auto;
	2181	padding: 40px 40px 36px;
2ce1d0bClaude	2182	background: var(--bg-elevated);
	2183	border: 1px solid var(--border);
98f45b4Claude	2184	border-radius: 16px;
	2185	box-shadow:
	2186	var(--elev-2),
479dcd9Claude	2187	0 24px 64px -16px rgba(0, 0, 0, 0.30);
98f45b4Claude	2188	position: relative;
	2189	overflow: hidden;
	2190	}
2ce1d0bClaude	2191	.auth-container h2 {
98f45b4Claude	2192	margin: 0 0 8px;
	2193	font-size: 28px;
	2194	font-weight: 700;
	2195	font-family: var(--font-display);
	2196	letter-spacing: -0.025em;
	2197	color: var(--text-strong);
	2198	line-height: 1.15;
	2199	}
	2200	.auth-container .auth-subtitle {
	2201	color: var(--text-muted);
	2202	font-size: 14.5px;
	2203	line-height: 1.5;
	2204	margin: 0 0 24px;
2ce1d0bClaude	2205	}
	2206	.auth-container > p {
	2207	color: var(--text-muted);
	2208	font-size: var(--t-sm);
	2209	margin-bottom: 24px;
	2210	}
98f45b4Claude	2211	.auth-container .btn-primary {
	2212	width: 100%;
	2213	padding: 12px 16px;
	2214	font-size: 15px;
	2215	font-weight: 600;
	2216	margin-top: 4px;
	2217	}
582cdacClaude	2218
	2219	/* OAuth provider buttons (Google / GitHub / SSO). Single-line layout
	2220	with a brand-coloured logo on the left and a label centred-trailing.
	2221	Hover lifts 1px with a subtle shadow — matches the rest of the
	2222	button system but reads as a brand-affiliated action, not a brand-
	2223	coloured primary CTA. */
	2224	.auth-container .oauth-btn {
	2225	display: flex;
	2226	align-items: center;
	2227	justify-content: center;
	2228	gap: 10px;
	2229	width: 100%;
	2230	padding: 11px 16px;
	2231	background: var(--bg-surface, var(--bg-elevated));
	2232	border: 1px solid var(--border);
	2233	border-radius: var(--r-md, 8px);
	2234	color: var(--text-strong);
	2235	font-family: var(--font-sans);
	2236	font-size: 14.5px;
	2237	font-weight: 500;
	2238	text-decoration: none;
	2239	transition:
	2240	transform var(--t-base, 180ms) var(--ease, ease),
	2241	box-shadow var(--t-base, 180ms) var(--ease, ease),
	2242	background var(--t-fast, 120ms) var(--ease, ease),
	2243	border-color var(--t-fast, 120ms) var(--ease, ease);
	2244	}
	2245	.auth-container .oauth-btn:hover {
	2246	transform: translateY(-1px);
	2247	background: var(--bg-hover);
	2248	border-color: var(--text-muted);
	2249	color: var(--text-strong);
	2250	box-shadow: 0 4px 14px -4px rgba(0,0,0,0.25);
	2251	text-decoration: none;
	2252	}
	2253	.auth-container .oauth-btn:focus-visible {
479dcd9Claude	2254	outline: 2px solid rgba(91, 110, 232, 0.55);
582cdacClaude	2255	outline-offset: 2px;
	2256	}
	2257	.auth-container .oauth-btn .oauth-icon {
	2258	flex-shrink: 0;
	2259	}
	2260	/* GitHub icon adopts the text colour so it reads in both themes. */
	2261	.auth-container .oauth-github .oauth-icon {
	2262	color: var(--text-strong);
	2263	}
	2264	/* Google logo uses the official 4-colour treatment via inline SVG fill
	2265	attributes — nothing to override here. */
	2266	/* "or" divider between the password form and provider buttons */
	2267	.auth-container .auth-divider {
	2268	display: flex;
	2269	align-items: center;
	2270	gap: 12px;
	2271	margin: 20px 0 12px;
	2272	color: var(--text-faint);
	2273	font-size: 12px;
	2274	letter-spacing: 0.08em;
	2275	text-transform: uppercase;
	2276	}
	2277	.auth-container .auth-divider::before,
	2278	.auth-container .auth-divider::after {
	2279	content: '';
	2280	flex: 1;
	2281	height: 1px;
	2282	background: var(--border);
	2283	}
06d5ffeClaude	2284	.auth-error {
958d26aClaude	2285	background: rgba(248,113,113,0.08);
	2286	border: 1px solid rgba(248,113,113,0.35);
06d5ffeClaude	2287	color: var(--red);
2ce1d0bClaude	2288	padding: 10px 14px;
	2289	border-radius: var(--r-sm);
06d5ffeClaude	2290	margin-bottom: 16px;
2ce1d0bClaude	2291	font-size: var(--t-sm);
06d5ffeClaude	2292	}
	2293	.auth-success {
958d26aClaude	2294	background: rgba(52,211,153,0.08);
	2295	border: 1px solid rgba(52,211,153,0.35);
06d5ffeClaude	2296	color: var(--green);
2ce1d0bClaude	2297	padding: 10px 14px;
	2298	border-radius: var(--r-sm);
06d5ffeClaude	2299	margin-bottom: 16px;
2ce1d0bClaude	2300	font-size: var(--t-sm);
	2301	}
	2302	.auth-switch {
	2303	margin-top: 20px;
	2304	font-size: var(--t-sm);
	2305	color: var(--text-muted);
	2306	text-align: center;
	2307	}
	2308	.banner {
	2309	background: var(--accent-gradient-faint);
479dcd9Claude	2310	border: 1px solid rgba(91,110,232,0.35);
2ce1d0bClaude	2311	color: var(--text);
	2312	padding: 10px 14px;
	2313	border-radius: var(--r-sm);
	2314	font-size: var(--t-sm);
06d5ffeClaude	2315	}
	2316
2ce1d0bClaude	2317	/* ============================================================ */
	2318	/* Settings */
	2319	/* ============================================================ */
	2320	.settings-container { max-width: 720px; }
	2321	.settings-container h2 { margin-bottom: 8px; font-size: var(--t-xl); letter-spacing: -0.02em; }
	2322	.settings-container > h2 + p { color: var(--text-muted); font-size: var(--t-sm); margin-bottom: 24px; }
	2323	.settings-container h3 { font-size: var(--t-md); margin-bottom: 12px; margin-top: 28px; }
	2324	.settings-container h3:first-of-type { margin-top: 0; }
06d5ffeClaude	2325	.ssh-keys-list { margin-bottom: 24px; }
	2326	.ssh-key-item {
	2327	display: flex;
	2328	justify-content: space-between;
	2329	align-items: center;
2ce1d0bClaude	2330	padding: 14px 16px;
06d5ffeClaude	2331	border: 1px solid var(--border);
2ce1d0bClaude	2332	border-radius: var(--r-md);
06d5ffeClaude	2333	margin-bottom: 8px;
2ce1d0bClaude	2334	background: var(--bg-elevated);
	2335	transition: border-color var(--t-fast) var(--ease);
06d5ffeClaude	2336	}
2ce1d0bClaude	2337	.ssh-key-item:hover { border-color: var(--border-strong); }
	2338	.ssh-key-meta { font-size: var(--t-xs); color: var(--text-muted); margin-top: 4px; }
	2339	.ssh-key-meta code { font-size: var(--t-xs); background: var(--bg-tertiary); padding: 1px 6px; border-radius: 3px; margin-right: 8px; }
06d5ffeClaude	2340
2ce1d0bClaude	2341	/* ============================================================ */
	2342	/* Repo header + nav */
	2343	/* ============================================================ */
fc1817aClaude	2344	.repo-header {
	2345	display: flex;
	2346	align-items: center;
debcf27Claude	2347	gap: 12px;
	2348	margin-bottom: 22px;
	2349	}
	2350	.repo-header-title {
	2351	display: flex;
	2352	align-items: center;
	2353	gap: 10px;
	2354	font-family: var(--font-display);
	2355	font-size: 24px;
	2356	letter-spacing: -0.025em;
	2357	flex-wrap: wrap;
	2358	}
	2359	.repo-header .owner {
	2360	color: var(--text-muted);
	2361	font-weight: 500;
	2362	transition: color var(--t-fast) var(--ease);
	2363	}
	2364	.repo-header .owner:hover { color: var(--text-link); text-decoration: none; }
	2365	.repo-header .separator { color: var(--text-faint); font-weight: 300; }
	2366	.repo-header .name {
	2367	color: var(--text-strong);
	2368	font-weight: 700;
	2369	letter-spacing: -0.028em;
fc1817aClaude	2370	}
2ce1d0bClaude	2371	.repo-header .name:hover { color: var(--text-link); text-decoration: none; }
debcf27Claude	2372	.repo-header-fork {
	2373	font-family: var(--font-mono);
	2374	font-size: 11px;
	2375	color: var(--text-muted);
	2376	margin-top: 4px;
	2377	letter-spacing: 0.01em;
	2378	}
	2379	.repo-header-fork a { color: var(--text-muted); }
	2380	.repo-header-fork a:hover { color: var(--accent); }
	2381	.repo-header-pill {
	2382	display: inline-flex;
	2383	align-items: center;
	2384	padding: 2px 10px;
	2385	border-radius: var(--r-full);
	2386	font-family: var(--font-mono);
	2387	font-size: 10px;
	2388	font-weight: 600;
	2389	letter-spacing: 0.12em;
	2390	text-transform: uppercase;
	2391	line-height: 1.6;
	2392	vertical-align: 4px;
	2393	}
	2394	.repo-header-pill-archived {
	2395	background: rgba(251,191,36,0.10);
	2396	color: var(--yellow);
	2397	border: 1px solid rgba(251,191,36,0.30);
	2398	}
	2399	.repo-header-pill-template {
	2400	background: var(--accent-gradient-faint);
	2401	color: var(--accent);
479dcd9Claude	2402	border: 1px solid rgba(91,110,232,0.30);
fc1817aClaude	2403	}
06d5ffeClaude	2404	.repo-header-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
fc1817aClaude	2405
8c790e0Claude	2406	/* Push Watch discoverability — live/recent indicator in the repo header */
	2407	@keyframes pushWatchPulse {
	2408	0%, 100% { opacity: 1; }
	2409	50% { opacity: 0.3; }
	2410	}
	2411	.repo-header-live-badge {
	2412	display: inline-flex;
	2413	align-items: center;
	2414	gap: 5px;
	2415	padding: 2px 9px;
	2416	border-radius: 999px;
	2417	font-size: 12px;
	2418	font-weight: 600;
	2419	letter-spacing: 0.02em;
	2420	text-decoration: none !important;
	2421	vertical-align: 3px;
	2422	transition: filter 140ms ease, opacity 140ms ease;
	2423	}
	2424	.repo-header-live-badge:hover { filter: brightness(1.15); text-decoration: none !important; }
	2425	.repo-header-live-badge--live {
	2426	background: rgba(218, 54, 51, 0.12);
	2427	color: #f97171;
	2428	border: 1px solid rgba(218, 54, 51, 0.35);
	2429	}
	2430	.repo-header-live-badge--live .repo-header-live-dot {
	2431	animation: pushWatchPulse 1.2s ease-in-out infinite;
	2432	display: inline-block;
	2433	}
	2434	.repo-header-live-badge--recent {
479dcd9Claude	2435	background: rgba(91, 110, 232, 0.08);
8c790e0Claude	2436	color: var(--text-muted);
479dcd9Claude	2437	border: 1px solid rgba(91, 110, 232, 0.22);
8c790e0Claude	2438	}
	2439	.repo-header-live-badge--recent:hover { color: var(--accent); }
	2440	@media (prefers-reduced-motion: reduce) {
	2441	.repo-header-live-badge--live .repo-header-live-dot { animation: none; }
	2442	}
	2443
fc1817aClaude	2444	.repo-nav {
	2445	display: flex;
debcf27Claude	2446	gap: 1px;
fc1817aClaude	2447	border-bottom: 1px solid var(--border);
debcf27Claude	2448	margin-bottom: 28px;
2ce1d0bClaude	2449	overflow-x: auto;
	2450	scrollbar-width: thin;
fc1817aClaude	2451	}
2ce1d0bClaude	2452	.repo-nav::-webkit-scrollbar { height: 0; }
fc1817aClaude	2453	.repo-nav a {
debcf27Claude	2454	position: relative;
	2455	padding: 11px 14px;
fc1817aClaude	2456	color: var(--text-muted);
	2457	border-bottom: 2px solid transparent;
2ce1d0bClaude	2458	font-size: var(--t-sm);
	2459	font-weight: 500;
	2460	margin-bottom: -1px;
debcf27Claude	2461	transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
2ce1d0bClaude	2462	white-space: nowrap;
	2463	}
debcf27Claude	2464	.repo-nav a:hover { text-decoration: none; color: var(--text-strong); background: var(--bg-hover); }
2ce1d0bClaude	2465	.repo-nav a.active {
debcf27Claude	2466	color: var(--text-strong);
	2467	font-weight: 600;
	2468	}
	2469	.repo-nav a.active::after {
	2470	content: '';
	2471	position: absolute;
	2472	left: 14px;
	2473	right: 14px;
	2474	bottom: -1px;
	2475	height: 2px;
	2476	background: var(--accent-gradient);
	2477	border-radius: 2px;
	2478	}
	2479	/* AI links in the right-side cluster — sparkle accent */
	2480	.repo-nav-ai {
	2481	color: var(--accent) !important;
	2482	font-weight: 500;
	2483	}
	2484	.repo-nav-ai:hover {
	2485	color: var(--accent-hover) !important;
	2486	background: var(--accent-gradient-faint) !important;
	2487	}
	2488	.repo-nav-ai.active {
	2489	color: var(--accent-hover) !important;
2ce1d0bClaude	2490	font-weight: 600;
fc1817aClaude	2491	}
	2492
2ce1d0bClaude	2493	.breadcrumb {
	2494	display: flex;
debcf27Claude	2495	gap: 6px;
2ce1d0bClaude	2496	align-items: center;
debcf27Claude	2497	margin-bottom: 18px;
2ce1d0bClaude	2498	color: var(--text-muted);
	2499	font-size: var(--t-sm);
	2500	font-family: var(--font-mono);
debcf27Claude	2501	font-feature-settings: var(--mono-feat);
2ce1d0bClaude	2502	}
	2503	.breadcrumb a { color: var(--text-link); font-weight: 500; }
	2504	.breadcrumb a:hover { color: var(--accent-hover); }
debcf27Claude	2505	.breadcrumb strong {
	2506	color: var(--text-strong);
	2507	font-weight: 600;
fc1817aClaude	2508	}
	2509
debcf27Claude	2510	/* Page header — eyebrow + title + optional actions row.
	2511	Use on dashboard, settings, admin, any "section landing" page. */
	2512	.page-header {
	2513	display: flex;
	2514	align-items: flex-end;
	2515	justify-content: space-between;
	2516	gap: 16px;
	2517	margin-bottom: 28px;
	2518	padding-bottom: 20px;
	2519	border-bottom: 1px solid var(--border-subtle);
	2520	flex-wrap: wrap;
	2521	}
	2522	.page-header-text { flex: 1; min-width: 280px; }
	2523	.page-header .eyebrow { margin-bottom: var(--s-2); }
	2524	.page-header h1 {
	2525	font-family: var(--font-display);
	2526	font-size: clamp(24px, 3vw, 36px);
	2527	line-height: 1.1;
	2528	letter-spacing: -0.028em;
	2529	margin-bottom: 6px;
	2530	}
	2531	.page-header p {
	2532	color: var(--text-muted);
	2533	font-size: var(--t-sm);
	2534	line-height: 1.55;
	2535	max-width: 640px;
	2536	}
	2537	.page-header-actions { display: flex; gap: 8px; align-items: center; }
fc1817aClaude	2538
2ce1d0bClaude	2539	/* ============================================================ */
	2540	/* File browser table */
	2541	/* ============================================================ */
	2542	.file-table {
	2543	width: 100%;
	2544	border: 1px solid var(--border);
	2545	border-radius: var(--r-md);
	2546	overflow: hidden;
	2547	background: var(--bg-elevated);
debcf27Claude	2548	border-collapse: collapse;
2ce1d0bClaude	2549	}
debcf27Claude	2550	.file-table tr { border-bottom: 1px solid var(--border-subtle); transition: background var(--t-fast) var(--ease); }
fc1817aClaude	2551	.file-table tr:last-child { border-bottom: none; }
debcf27Claude	2552	.file-table td {
	2553	padding: 9px 16px;
	2554	font-size: var(--t-sm);
	2555	font-family: var(--font-mono);
	2556	font-feature-settings: var(--mono-feat);
	2557	}
2ce1d0bClaude	2558	.file-table tr:hover { background: var(--bg-hover); }
debcf27Claude	2559	.file-icon {
	2560	width: 22px;
	2561	color: var(--text-faint);
	2562	font-size: 13px;
	2563	text-align: center;
	2564	}
	2565	.file-name a {
	2566	color: var(--text);
	2567	font-weight: 500;
	2568	transition: color var(--t-fast) var(--ease);
	2569	}
	2570	.file-name a:hover { color: var(--accent); text-decoration: none; }
fc1817aClaude	2571
2ce1d0bClaude	2572	/* ============================================================ */
	2573	/* Blob view */
	2574	/* ============================================================ */
fc1817aClaude	2575	.blob-view {
	2576	border: 1px solid var(--border);
2ce1d0bClaude	2577	border-radius: var(--r-md);
fc1817aClaude	2578	overflow: hidden;
2ce1d0bClaude	2579	background: var(--bg-elevated);
fc1817aClaude	2580	}
	2581	.blob-header {
	2582	background: var(--bg-secondary);
2ce1d0bClaude	2583	padding: 10px 16px;
fc1817aClaude	2584	border-bottom: 1px solid var(--border);
2ce1d0bClaude	2585	font-size: var(--t-sm);
fc1817aClaude	2586	color: var(--text-muted);
06d5ffeClaude	2587	display: flex;
	2588	justify-content: space-between;
	2589	align-items: center;
fc1817aClaude	2590	}
	2591	.blob-code {
	2592	overflow-x: auto;
	2593	font-family: var(--font-mono);
2ce1d0bClaude	2594	font-size: var(--t-sm);
	2595	line-height: 1.65;
fc1817aClaude	2596	}
	2597	.blob-code table { width: 100%; border-collapse: collapse; }
	2598	.blob-code .line-num {
	2599	width: 1%;
2ce1d0bClaude	2600	min-width: 56px;
	2601	padding: 0 14px;
fc1817aClaude	2602	text-align: right;
2ce1d0bClaude	2603	color: var(--text-faint);
fc1817aClaude	2604	user-select: none;
	2605	white-space: nowrap;
	2606	border-right: 1px solid var(--border);
	2607	}
2ce1d0bClaude	2608	.blob-code .line-content { padding: 0 16px; white-space: pre; }
	2609	.blob-code tr:hover { background: var(--bg-hover); }
fc1817aClaude	2610
2ce1d0bClaude	2611	/* ============================================================ */
	2612	/* Commits + diffs */
	2613	/* ============================================================ */
	2614	.commit-list {
	2615	border: 1px solid var(--border);
	2616	border-radius: var(--r-md);
	2617	overflow: hidden;
	2618	background: var(--bg-elevated);
	2619	}
fc1817aClaude	2620	.commit-item {
	2621	display: flex;
	2622	justify-content: space-between;
	2623	align-items: center;
debcf27Claude	2624	padding: 14px 18px;
	2625	border-bottom: 1px solid var(--border-subtle);
2ce1d0bClaude	2626	transition: background var(--t-fast) var(--ease);
fc1817aClaude	2627	}
	2628	.commit-item:last-child { border-bottom: none; }
2ce1d0bClaude	2629	.commit-item:hover { background: var(--bg-hover); }
debcf27Claude	2630	.commit-message {
	2631	font-size: var(--t-sm);
	2632	font-weight: 500;
	2633	line-height: 1.45;
	2634	color: var(--text-strong);
	2635	letter-spacing: -0.005em;
	2636	}
	2637	.commit-meta {
	2638	font-family: var(--font-mono);
	2639	font-size: 11px;
	2640	color: var(--text-muted);
	2641	margin-top: 5px;
	2642	letter-spacing: 0.01em;
	2643	}
fc1817aClaude	2644	.commit-sha {
	2645	font-family: var(--font-mono);
debcf27Claude	2646	font-feature-settings: var(--mono-feat);
	2647	font-size: 11px;
	2648	padding: 4px 9px;
fc1817aClaude	2649	background: var(--bg-tertiary);
	2650	border: 1px solid var(--border);
2ce1d0bClaude	2651	border-radius: var(--r-sm);
debcf27Claude	2652	color: var(--accent);
	2653	font-weight: 600;
	2654	letter-spacing: 0.02em;
2ce1d0bClaude	2655	transition: all var(--t-fast) var(--ease);
fc1817aClaude	2656	}
debcf27Claude	2657	.commit-sha:hover {
479dcd9Claude	2658	border-color: rgba(91,110,232,0.40);
debcf27Claude	2659	background: var(--accent-gradient-faint);
	2660	color: var(--accent-hover);
	2661	text-decoration: none;
fc1817aClaude	2662	}
	2663
	2664	.diff-view { margin-top: 16px; }
	2665	.diff-file {
	2666	border: 1px solid var(--border);
2ce1d0bClaude	2667	border-radius: var(--r-md);
fc1817aClaude	2668	margin-bottom: 16px;
	2669	overflow: hidden;
2ce1d0bClaude	2670	background: var(--bg-elevated);
fc1817aClaude	2671	}
	2672	.diff-file-header {
	2673	background: var(--bg-secondary);
2ce1d0bClaude	2674	padding: 10px 16px;
fc1817aClaude	2675	border-bottom: 1px solid var(--border);
	2676	font-family: var(--font-mono);
2ce1d0bClaude	2677	font-size: var(--t-sm);
	2678	font-weight: 500;
fc1817aClaude	2679	}
	2680	.diff-content {
	2681	overflow-x: auto;
	2682	font-family: var(--font-mono);
2ce1d0bClaude	2683	font-size: var(--t-sm);
	2684	line-height: 1.65;
fc1817aClaude	2685	}
958d26aClaude	2686	.diff-content .line-add { background: rgba(52,211,153,0.10); color: var(--green); }
	2687	.diff-content .line-del { background: rgba(248,113,113,0.08); color: var(--red); }
479dcd9Claude	2688	.diff-content .line-hunk { background: rgba(91,110,232,0.06); color: var(--text-link); }
2ce1d0bClaude	2689	.diff-content .line { padding: 0 16px; white-space: pre; display: block; }
fc1817aClaude	2690
	2691	.stat-add { color: var(--green); font-weight: 600; }
	2692	.stat-del { color: var(--red); font-weight: 600; }
	2693
2ce1d0bClaude	2694	/* ============================================================ */
	2695	/* Empty state */
	2696	/* ============================================================ */
fc1817aClaude	2697	.empty-state {
	2698	text-align: center;
ba23fe2Claude	2699	padding: 80px 24px;
fc1817aClaude	2700	color: var(--text-muted);
ba23fe2Claude	2701	border: 1px solid var(--border);
2ce1d0bClaude	2702	border-radius: var(--r-lg);
ba23fe2Claude	2703	background: var(--bg-elevated);
fc1817aClaude	2704	}
2ce1d0bClaude	2705	.empty-state h2 {
958d26aClaude	2706	font-size: var(--t-xl);
2ce1d0bClaude	2707	margin-bottom: 8px;
958d26aClaude	2708	color: var(--text-strong);
	2709	letter-spacing: -0.022em;
2ce1d0bClaude	2710	}
958d26aClaude	2711	.empty-state p { font-size: var(--t-md); max-width: 480px; margin: 0 auto; line-height: 1.55; }
fc1817aClaude	2712	.empty-state pre {
	2713	text-align: left;
	2714	display: inline-block;
	2715	background: var(--bg-secondary);
958d26aClaude	2716	padding: 18px 24px;
	2717	border-radius: var(--r-md);
fc1817aClaude	2718	border: 1px solid var(--border);
	2719	font-family: var(--font-mono);
958d26aClaude	2720	font-feature-settings: var(--mono-feat);
2ce1d0bClaude	2721	font-size: var(--t-sm);
958d26aClaude	2722	margin-top: 24px;
fc1817aClaude	2723	line-height: 1.8;
2ce1d0bClaude	2724	color: var(--text);
958d26aClaude	2725	box-shadow: var(--elev-1);
fc1817aClaude	2726	}
	2727
2ce1d0bClaude	2728	/* ============================================================ */
	2729	/* Badges */
	2730	/* ============================================================ */
fc1817aClaude	2731	.badge {
2ce1d0bClaude	2732	display: inline-flex;
	2733	align-items: center;
	2734	gap: 4px;
	2735	padding: 2px 9px;
	2736	border-radius: var(--r-full);
	2737	font-size: var(--t-xs);
fc1817aClaude	2738	font-weight: 500;
	2739	background: var(--bg-tertiary);
	2740	border: 1px solid var(--border);
	2741	color: var(--text-muted);
2ce1d0bClaude	2742	line-height: 1.5;
fc1817aClaude	2743	}
	2744
2ce1d0bClaude	2745	/* ============================================================ */
	2746	/* Branch dropdown */
	2747	/* ============================================================ */
fc1817aClaude	2748	.branch-selector {
	2749	display: inline-flex;
	2750	align-items: center;
2ce1d0bClaude	2751	gap: 6px;
	2752	padding: 6px 12px;
	2753	background: var(--bg-elevated);
fc1817aClaude	2754	border: 1px solid var(--border);
2ce1d0bClaude	2755	border-radius: var(--r-sm);
	2756	font-size: var(--t-sm);
fc1817aClaude	2757	color: var(--text);
	2758	margin-bottom: 12px;
2ce1d0bClaude	2759	transition: border-color var(--t-fast) var(--ease);
fc1817aClaude	2760	}
2ce1d0bClaude	2761	.branch-selector:hover { border-color: var(--border-strong); }
fc1817aClaude	2762
06d5ffeClaude	2763	.branch-dropdown {
	2764	position: relative;
	2765	display: inline-block;
	2766	margin-bottom: 12px;
	2767	}
	2768	.branch-dropdown-content {
	2769	display: none;
	2770	position: absolute;
2ce1d0bClaude	2771	top: calc(100% + 4px);
06d5ffeClaude	2772	left: 0;
	2773	z-index: 10;
2ce1d0bClaude	2774	min-width: 220px;
	2775	background: var(--bg-elevated);
	2776	border: 1px solid var(--border-strong);
	2777	border-radius: var(--r-md);
	2778	overflow: hidden;
	2779	box-shadow: var(--elev-3);
06d5ffeClaude	2780	}
	2781	.branch-dropdown:hover .branch-dropdown-content,
	2782	.branch-dropdown:focus-within .branch-dropdown-content { display: block; }
	2783	.branch-dropdown-content a {
	2784	display: block;
2ce1d0bClaude	2785	padding: 9px 14px;
	2786	font-size: var(--t-sm);
06d5ffeClaude	2787	color: var(--text);
	2788	border-bottom: 1px solid var(--border);
2ce1d0bClaude	2789	transition: background var(--t-fast) var(--ease);
06d5ffeClaude	2790	}
	2791	.branch-dropdown-content a:last-child { border-bottom: none; }
2ce1d0bClaude	2792	.branch-dropdown-content a:hover { background: var(--bg-hover); text-decoration: none; }
	2793	.branch-dropdown-content a.active-branch { color: var(--text-link); font-weight: 600; background: var(--accent-gradient-faint); }
06d5ffeClaude	2794
2ce1d0bClaude	2795	/* ============================================================ */
	2796	/* Card grid */
	2797	/* ============================================================ */
	2798	.card-grid {
	2799	display: grid;
	2800	grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
	2801	gap: 16px;
	2802	}
fc1817aClaude	2803	.card {
	2804	border: 1px solid var(--border);
2ce1d0bClaude	2805	border-radius: var(--r-md);
958d26aClaude	2806	padding: 20px;
2ce1d0bClaude	2807	background: var(--bg-elevated);
	2808	transition:
958d26aClaude	2809	border-color var(--t-base) var(--ease),
	2810	transform var(--t-base) var(--ease-out-quart),
2ce1d0bClaude	2811	box-shadow var(--t-base) var(--ease);
	2812	position: relative;
	2813	overflow: hidden;
958d26aClaude	2814	isolation: isolate;
	2815	}
2ce1d0bClaude	2816	.card:hover {
	2817	border-color: var(--border-strong);
	2818	box-shadow: var(--elev-2);
958d26aClaude	2819	transform: translateY(-2px);
2ce1d0bClaude	2820	}
958d26aClaude	2821	.card h3 { font-size: var(--t-md); margin-bottom: 6px; letter-spacing: -0.012em; }
2ce1d0bClaude	2822	.card h3 a { color: var(--text); font-weight: 600; }
	2823	.card h3 a:hover { color: var(--text-link); }
	2824	.card p { font-size: var(--t-sm); color: var(--text-muted); line-height: 1.5; }
	2825	.card-meta {
	2826	display: flex;
	2827	gap: 14px;
	2828	margin-top: 14px;
	2829	padding-top: 14px;
	2830	border-top: 1px solid var(--border);
	2831	font-size: var(--t-xs);
	2832	color: var(--text-muted);
	2833	}
	2834	.card-meta span { display: flex; align-items: center; gap: 5px; }
	2835
	2836	/* ============================================================ */
	2837	/* Stat card / box */
	2838	/* ============================================================ */
	2839	.stat-card {
	2840	background: var(--bg-elevated);
	2841	border: 1px solid var(--border);
	2842	border-radius: var(--r-md);
fc1817aClaude	2843	padding: 16px;
2ce1d0bClaude	2844	transition: border-color var(--t-fast) var(--ease);
	2845	}
	2846	.stat-card:hover { border-color: var(--border-strong); }
	2847	.stat-label {
	2848	font-size: var(--t-xs);
	2849	color: var(--text-muted);
	2850	text-transform: uppercase;
	2851	letter-spacing: 0.06em;
	2852	font-weight: 500;
	2853	}
	2854	.stat-value {
	2855	font-size: var(--t-xl);
	2856	font-weight: 700;
	2857	margin-top: 4px;
	2858	letter-spacing: -0.025em;
	2859	color: var(--text);
	2860	font-feature-settings: 'tnum';
fc1817aClaude	2861	}
06d5ffeClaude	2862
2ce1d0bClaude	2863	/* ============================================================ */
	2864	/* Star button */
	2865	/* ============================================================ */
06d5ffeClaude	2866	.star-btn {
	2867	display: inline-flex;
	2868	align-items: center;
	2869	gap: 6px;
2ce1d0bClaude	2870	padding: 5px 12px;
	2871	background: var(--bg-elevated);
06d5ffeClaude	2872	border: 1px solid var(--border);
2ce1d0bClaude	2873	border-radius: var(--r-sm);
06d5ffeClaude	2874	color: var(--text);
2ce1d0bClaude	2875	font-size: var(--t-sm);
	2876	font-weight: 500;
06d5ffeClaude	2877	cursor: pointer;
2ce1d0bClaude	2878	transition: all var(--t-fast) var(--ease);
	2879	}
	2880	.star-btn:hover { background: var(--bg-surface); border-color: var(--border-strong); text-decoration: none; }
	2881	.star-btn.starred {
	2882	color: var(--yellow);
958d26aClaude	2883	border-color: rgba(251,191,36,0.4);
	2884	background: rgba(251,191,36,0.08);
06d5ffeClaude	2885	}
	2886
2ce1d0bClaude	2887	/* ============================================================ */
	2888	/* User profile */
	2889	/* ============================================================ */
06d5ffeClaude	2890	.user-profile {
	2891	display: flex;
	2892	gap: 32px;
	2893	margin-bottom: 32px;
2ce1d0bClaude	2894	padding: 24px;
	2895	background: var(--bg-elevated);
	2896	border: 1px solid var(--border);
	2897	border-radius: var(--r-lg);
06d5ffeClaude	2898	}
	2899	.user-avatar {
	2900	width: 96px;
	2901	height: 96px;
2ce1d0bClaude	2902	border-radius: var(--r-full);
	2903	background: var(--accent-gradient-soft);
	2904	border: 1px solid var(--border-strong);
06d5ffeClaude	2905	display: flex;
	2906	align-items: center;
	2907	justify-content: center;
2ce1d0bClaude	2908	font-size: 36px;
	2909	font-weight: 600;
	2910	color: var(--text);
06d5ffeClaude	2911	flex-shrink: 0;
2ce1d0bClaude	2912	letter-spacing: -0.02em;
06d5ffeClaude	2913	}
2ce1d0bClaude	2914	.user-info h2 { font-size: var(--t-xl); margin-bottom: 2px; letter-spacing: -0.025em; }
	2915	.user-info .username { font-size: var(--t-md); color: var(--text-muted); }
	2916	.user-info .bio { font-size: var(--t-sm); color: var(--text-muted); margin-top: 10px; line-height: 1.55; }
06d5ffeClaude	2917
2ce1d0bClaude	2918	/* ============================================================ */
	2919	/* New repo form */
	2920	/* ============================================================ */
	2921	.new-repo-form { max-width: 640px; }
	2922	.new-repo-form h2 { margin-bottom: 24px; font-size: var(--t-xl); letter-spacing: -0.025em; }
	2923	.visibility-options { display: flex; gap: 12px; margin-bottom: 20px; }
06d5ffeClaude	2924	.visibility-option {
	2925	flex: 1;
2ce1d0bClaude	2926	padding: 16px;
06d5ffeClaude	2927	border: 1px solid var(--border);
2ce1d0bClaude	2928	border-radius: var(--r-md);
	2929	background: var(--bg-elevated);
06d5ffeClaude	2930	cursor: pointer;
2ce1d0bClaude	2931	text-align: left;
	2932	transition: all var(--t-fast) var(--ease);
	2933	}
	2934	.visibility-option:hover { border-color: var(--border-strong); background: var(--bg-surface); }
	2935	.visibility-option:has(input:checked) {
	2936	border-color: var(--accent);
	2937	background: var(--accent-gradient-faint);
	2938	box-shadow: 0 0 0 1px var(--accent);
06d5ffeClaude	2939	}
	2940	.visibility-option input { display: none; }
2ce1d0bClaude	2941	.visibility-option .vis-label { font-size: var(--t-sm); font-weight: 600; margin-bottom: 4px; }
	2942	.visibility-option .vis-desc { font-size: var(--t-xs); color: var(--text-muted); }
79136bbClaude	2943
2ce1d0bClaude	2944	/* ============================================================ */
	2945	/* Issues */
	2946	/* ============================================================ */
	2947	.issue-tabs { display: flex; gap: 4px; }
	2948	.issue-tabs a {
	2949	color: var(--text-muted);
	2950	font-size: var(--t-sm);
	2951	font-weight: 500;
	2952	padding: 6px 12px;
	2953	border-radius: var(--r-sm);
	2954	transition: all var(--t-fast) var(--ease);
	2955	}
	2956	.issue-tabs a:hover { color: var(--text); background: var(--bg-hover); text-decoration: none; }
	2957	.issue-tabs a.active { color: var(--text); background: var(--bg-elevated); }
79136bbClaude	2958
2ce1d0bClaude	2959	.issue-list {
	2960	border: 1px solid var(--border);
	2961	border-radius: var(--r-md);
	2962	overflow: hidden;
	2963	background: var(--bg-elevated);
	2964	}
79136bbClaude	2965	.issue-item {
	2966	display: flex;
2ce1d0bClaude	2967	gap: 14px;
79136bbClaude	2968	align-items: flex-start;
2ce1d0bClaude	2969	padding: 14px 16px;
79136bbClaude	2970	border-bottom: 1px solid var(--border);
2ce1d0bClaude	2971	transition: background var(--t-fast) var(--ease);
79136bbClaude	2972	}
	2973	.issue-item:last-child { border-bottom: none; }
2ce1d0bClaude	2974	.issue-item:hover { background: var(--bg-hover); }
	2975	.issue-state-icon {
	2976	font-size: 14px;
	2977	padding-top: 2px;
	2978	width: 18px;
	2979	height: 18px;
	2980	display: inline-flex;
	2981	align-items: center;
	2982	justify-content: center;
	2983	border-radius: var(--r-full);
	2984	flex-shrink: 0;
	2985	}
79136bbClaude	2986	.state-open { color: var(--green); }
479dcd9Claude	2987	.state-closed { color: var(--text-link); }
2ce1d0bClaude	2988	.issue-title {
debcf27Claude	2989	font-family: var(--font-display);
	2990	font-size: var(--t-md);
2ce1d0bClaude	2991	font-weight: 600;
debcf27Claude	2992	line-height: 1.35;
	2993	letter-spacing: -0.012em;
	2994	}
	2995	.issue-title a { color: var(--text-strong); transition: color var(--t-fast) var(--ease); }
	2996	.issue-title a:hover { color: var(--accent); text-decoration: none; }
	2997	.issue-meta {
	2998	font-family: var(--font-mono);
	2999	font-size: 11px;
	3000	color: var(--text-muted);
	3001	margin-top: 5px;
	3002	letter-spacing: 0.01em;
2ce1d0bClaude	3003	}
79136bbClaude	3004
	3005	.issue-badge {
	3006	display: inline-flex;
	3007	align-items: center;
2ce1d0bClaude	3008	gap: 6px;
79136bbClaude	3009	padding: 4px 12px;
2ce1d0bClaude	3010	border-radius: var(--r-full);
	3011	font-size: var(--t-sm);
79136bbClaude	3012	font-weight: 500;
2ce1d0bClaude	3013	line-height: 1.4;
79136bbClaude	3014	}
958d26aClaude	3015	.badge-open { background: rgba(52,211,153,0.10); color: var(--green); border: 1px solid rgba(52,211,153,0.35); }
479dcd9Claude	3016	.badge-closed { background: rgba(154,168,239,0.10); color: var(--text-link); border: 1px solid rgba(154,168,239,0.35); }
	3017	.badge-merged { background: rgba(91,110,232,0.10); color: var(--accent); border: 1px solid rgba(91,110,232,0.35); }
2ce1d0bClaude	3018	.state-merged { color: var(--accent); }
479dcd9Claude	3019	.ai-review { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(91,110,232,0.3); }
79136bbClaude	3020
2ce1d0bClaude	3021	.issue-detail { max-width: 920px; }
79136bbClaude	3022	.issue-comment-box {
	3023	border: 1px solid var(--border);
2ce1d0bClaude	3024	border-radius: var(--r-md);
79136bbClaude	3025	margin-bottom: 16px;
	3026	overflow: hidden;
2ce1d0bClaude	3027	background: var(--bg-elevated);
79136bbClaude	3028	}
	3029	.comment-header {
	3030	background: var(--bg-secondary);
2ce1d0bClaude	3031	padding: 10px 16px;
79136bbClaude	3032	border-bottom: 1px solid var(--border);
2ce1d0bClaude	3033	font-size: var(--t-sm);
79136bbClaude	3034	color: var(--text-muted);
	3035	}
	3036
2ce1d0bClaude	3037	/* ============================================================ */
	3038	/* Panel — flexible container used across many pages */
	3039	/* ============================================================ */
	3040	.panel {
	3041	background: var(--bg-elevated);
	3042	border: 1px solid var(--border);
	3043	border-radius: var(--r-md);
	3044	overflow: hidden;
	3045	}
	3046	.panel-item {
	3047	display: flex;
	3048	align-items: center;
	3049	gap: 12px;
	3050	padding: 12px 16px;
79136bbClaude	3051	border-bottom: 1px solid var(--border);
2ce1d0bClaude	3052	transition: background var(--t-fast) var(--ease);
	3053	}
	3054	.panel-item:last-child { border-bottom: none; }
	3055	.panel-item:hover { background: var(--bg-hover); }
5882af3Claude	3056
	3057	/* ─── j/k keyboard list navigation ─── */
	3058	.is-kbd-focus {
479dcd9Claude	3059	outline: 2px solid rgba(91,110,232,0.6) !important;
5882af3Claude	3060	outline-offset: -2px;
479dcd9Claude	3061	background: rgba(91,110,232,0.06) !important;
5882af3Claude	3062	border-radius: 4px;
	3063	}
	3064	.is-kbd-selected {
	3065	outline: 2px solid rgba(52,211,153,0.6) !important;
	3066	background: rgba(52,211,153,0.06) !important;
	3067	}
2ce1d0bClaude	3068	.panel-empty {
	3069	padding: 24px;
	3070	text-align: center;
79136bbClaude	3071	color: var(--text-muted);
2ce1d0bClaude	3072	font-size: var(--t-sm);
79136bbClaude	3073	}
	3074
2ce1d0bClaude	3075	/* ============================================================ */
	3076	/* Search */
	3077	/* ============================================================ */
79136bbClaude	3078	.search-results .diff-file { margin-bottom: 12px; }
16b325cClaude	3079
2ce1d0bClaude	3080	/* ============================================================ */
	3081	/* Timeline */
	3082	/* ============================================================ */
	3083	.timeline { position: relative; padding-left: 28px; }
16b325cClaude	3084	.timeline::before {
	3085	content: '';
	3086	position: absolute;
	3087	left: 4px;
	3088	top: 8px;
	3089	bottom: 8px;
	3090	width: 2px;
2ce1d0bClaude	3091	background: linear-gradient(180deg, var(--border) 0%, transparent 100%);
16b325cClaude	3092	}
2ce1d0bClaude	3093	.timeline-item { position: relative; padding-bottom: 16px; }
16b325cClaude	3094	.timeline-dot {
	3095	position: absolute;
2ce1d0bClaude	3096	left: -28px;
	3097	top: 8px;
	3098	width: 12px;
	3099	height: 12px;
	3100	border-radius: var(--r-full);
	3101	background: var(--accent-gradient);
16b325cClaude	3102	border: 2px solid var(--bg);
2ce1d0bClaude	3103	box-shadow: 0 0 0 1px var(--border-strong);
16b325cClaude	3104	}
	3105	.timeline-content {
2ce1d0bClaude	3106	background: var(--bg-elevated);
16b325cClaude	3107	border: 1px solid var(--border);
2ce1d0bClaude	3108	border-radius: var(--r-md);
	3109	padding: 14px 16px;
16b325cClaude	3110	}
f1ab587Claude	3111
2ce1d0bClaude	3112	/* ============================================================ */
	3113	/* Toggle switch */
	3114	/* ============================================================ */
f1ab587Claude	3115	.toggle-switch {
	3116	position: relative;
	3117	display: inline-block;
2ce1d0bClaude	3118	width: 40px;
	3119	height: 22px;
f1ab587Claude	3120	flex-shrink: 0;
	3121	margin-left: 16px;
	3122	}
	3123	.toggle-switch input { opacity: 0; width: 0; height: 0; }
	3124	.toggle-slider {
	3125	position: absolute;
	3126	cursor: pointer;
	3127	top: 0; left: 0; right: 0; bottom: 0;
	3128	background: var(--bg-tertiary);
	3129	border: 1px solid var(--border);
2ce1d0bClaude	3130	border-radius: var(--r-full);
	3131	transition: all var(--t-base) var(--ease);
f1ab587Claude	3132	}
	3133	.toggle-slider::before {
	3134	content: '';
	3135	position: absolute;
2ce1d0bClaude	3136	height: 16px;
	3137	width: 16px;
f1ab587Claude	3138	left: 2px;
	3139	bottom: 2px;
	3140	background: var(--text-muted);
2ce1d0bClaude	3141	border-radius: var(--r-full);
	3142	transition: all var(--t-base) var(--ease);
f1ab587Claude	3143	}
	3144	.toggle-switch input:checked + .toggle-slider {
2ce1d0bClaude	3145	background: var(--accent-gradient);
	3146	border-color: transparent;
479dcd9Claude	3147	box-shadow: 0 0 0 1px rgba(91,110,232,0.4);
f1ab587Claude	3148	}
	3149	.toggle-switch input:checked + .toggle-slider::before {
2ce1d0bClaude	3150	transform: translateX(18px);
f1ab587Claude	3151	background: #fff;
	3152	}
ef8d378Claude	3153
	3154	/* ============================================================
	3155	* 2026 polish layer (purely additive — no layout changes).
	3156	* Improves typography rendering, focus states, hover affordances,
	3157	* and adds the gradient brand cue to primary buttons. Anything
	3158	* that could alter dimensions stays in the rules above.
	3159	* ============================================================ */
	3160	html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
	3161	body { letter-spacing: -0.005em; font-feature-settings: 'cv11', 'ss01', 'ss03'; }
479dcd9Claude	3162	*::selection { background: rgba(91,110,232,0.30); color: var(--text); }
ef8d378Claude	3163
	3164	h1, h2, h3, h4 { letter-spacing: -0.018em; }
	3165	h1 { letter-spacing: -0.025em; }
	3166
	3167	/* Smoother colour transitions everywhere links live */
	3168	a { transition: color 120ms cubic-bezier(0.16,1,0.3,1); }
	3169
	3170	/* Buttons: focus rings + smoother transitions; primary gets the gradient */
	3171	.btn {
	3172	transition:
	3173	background 120ms cubic-bezier(0.16,1,0.3,1),
	3174	border-color 120ms cubic-bezier(0.16,1,0.3,1),
	3175	transform 120ms cubic-bezier(0.16,1,0.3,1),
	3176	box-shadow 120ms cubic-bezier(0.16,1,0.3,1);
	3177	}
	3178	.btn:active { transform: translateY(0.5px); }
	3179	.btn:focus-visible {
	3180	outline: none;
479dcd9Claude	3181	box-shadow: var(--ring);
ef8d378Claude	3182	}
	3183	.btn-primary {
479dcd9Claude	3184	background: var(--accent);
ef8d378Claude	3185	border-color: transparent;
	3186	box-shadow:
479dcd9Claude	3187	inset 0 1px 0 rgba(255,255,255,0.12),
	3188	0 1px 2px rgba(0,0,0,0.25);
ef8d378Claude	3189	}
	3190	.btn-primary:hover {
479dcd9Claude	3191	background: var(--accent-hover);
ef8d378Claude	3192	filter: none;
	3193	box-shadow:
479dcd9Claude	3194	inset 0 1px 0 rgba(255,255,255,0.15),
	3195	0 4px 12px rgba(0,0,0,0.25);
ef8d378Claude	3196	}
	3197
	3198	/* Inputs: cleaner focus ring + hover */
	3199	.form-group input:hover,
	3200	.form-group textarea:hover,
	3201	.form-group select:hover {
	3202	border-color: rgba(255,255,255,0.14);
	3203	}
	3204	.form-group input:focus,
	3205	.form-group textarea:focus,
	3206	.form-group select:focus {
479dcd9Claude	3207	border-color: var(--border-focus);
	3208	box-shadow: var(--ring);
ef8d378Claude	3209	}
	3210	:root[data-theme='light'] .form-group input:hover,
	3211	:root[data-theme='light'] .form-group textarea:hover,
	3212	:root[data-theme='light'] .form-group select:hover {
	3213	border-color: rgba(0,0,0,0.18);
	3214	}
	3215
	3216	/* Cards: subtle hover lift */
	3217	.card {
	3218	transition:
	3219	border-color 160ms cubic-bezier(0.16,1,0.3,1),
	3220	transform 160ms cubic-bezier(0.16,1,0.3,1),
	3221	box-shadow 200ms cubic-bezier(0.16,1,0.3,1);
	3222	}
	3223	.card:hover {
	3224	border-color: rgba(255,255,255,0.18);
	3225	transform: translateY(-1px);
	3226	box-shadow: 0 8px 24px rgba(0,0,0,0.30);
	3227	}
	3228	:root[data-theme='light'] .card:hover {
	3229	border-color: rgba(0,0,0,0.18);
	3230	box-shadow: 0 8px 24px rgba(0,0,0,0.08);
	3231	}
	3232
	3233	/* Issue / commit / panel rows: smoother hover */
	3234	.issue-item, .commit-item {
	3235	transition: background 120ms cubic-bezier(0.16,1,0.3,1);
	3236	}
	3237	.repo-nav a {
	3238	transition: color 120ms cubic-bezier(0.16,1,0.3,1),
	3239	border-bottom-color 120ms cubic-bezier(0.16,1,0.3,1);
	3240	}
	3241	.nav-link {
	3242	transition: color 120ms cubic-bezier(0.16,1,0.3,1);
	3243	}
	3244
	3245	/* Auth card: subtle elevation so register/login feel premium */
	3246	.auth-container {
	3247	background: var(--bg-secondary);
	3248	border: 1px solid var(--border);
	3249	border-radius: var(--r-lg, 12px);
	3250	padding: 32px;
	3251	box-shadow: 0 4px 16px rgba(0,0,0,0.30), 0 0 0 1px var(--border);
	3252	}
	3253	:root[data-theme='light'] .auth-container {
	3254	box-shadow: 0 4px 16px rgba(0,0,0,0.06), 0 0 0 1px var(--border);
	3255	}
	3256	.auth-container h2 { letter-spacing: -0.025em; }
	3257
	3258	/* Empty state: dashed border, generous padding */
	3259	.empty-state {
	3260	border: 1px dashed var(--border);
	3261	border-radius: var(--r-lg, 12px);
	3262	background: var(--bg);
	3263	}
	3264
	3265	/* Badges + commit-sha: smoother transition */
	3266	.commit-sha, .badge { transition: all 120ms cubic-bezier(0.16,1,0.3,1); }
	3267
8cfb00eClaude	3268	/* Gradient text utility — kept for back-compat, renders as plain accent color. */
ef8d378Claude	3269	.gradient-text {
8cfb00eClaude	3270	color: var(--accent);
ef8d378Claude	3271	}
	3272
	3273	/* Custom scrollbars (subtle, themed) */
	3274	::-webkit-scrollbar { width: 10px; height: 10px; }
	3275	::-webkit-scrollbar-track { background: transparent; }
	3276	::-webkit-scrollbar-thumb {
	3277	background: rgba(255,255,255,0.06);
	3278	border: 2px solid var(--bg);
	3279	border-radius: 9999px;
	3280	}
	3281	::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.14); }
	3282	:root[data-theme='light'] ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.10); }
	3283	:root[data-theme='light'] ::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.18); }
	3284
	3285	/* Honour reduced-motion preference */
	3286	@media (prefers-reduced-motion: reduce) {
	3287	, ::before, *::after {
	3288	animation-duration: 0.01ms !important;
	3289	animation-iteration-count: 1 !important;
	3290	transition-duration: 0.01ms !important;
	3291	}
	3292	}
c63b860Claude	3293
	3294	/* Block O3 — visual coherence additive rules. */
	3295	.card.card-p-none { padding: 0; }
	3296	.card.card-p-sm { padding: var(--space-3); }
	3297	.card.card-p-md { padding: var(--space-4); }
	3298	.card.card-p-lg { padding: var(--space-6); }
	3299	.card.card-elevated { box-shadow: var(--elev-2); }
	3300	.card.card-gradient {
	3301	background:
479dcd9Claude	3302	linear-gradient(135deg, rgba(91,110,232,0.05), transparent 60%),
c63b860Claude	3303	var(--bg-elevated);
	3304	}
	3305	.card.card-gradient::before { opacity: 1; }
	3306	.notice {
	3307	padding: var(--space-3) var(--space-4);
	3308	border-radius: var(--radius-md);
	3309	border: 1px solid var(--border);
	3310	background: var(--bg-elevated);
	3311	color: var(--text);
	3312	font-size: var(--font-size-sm);
	3313	margin-bottom: var(--space-6);
	3314	line-height: var(--leading-normal);
	3315	}
	3316	.notice-info { border-color: rgba(96,165,250,0.40); background: rgba(96,165,250,0.08); color: var(--text); }
	3317	.notice-success { border-color: var(--green); background: rgba(52,211,153,0.08); color: var(--text); }
	3318	.notice-warn { border-color: var(--yellow); background: rgba(251,191,36,0.10); color: var(--yellow); }
	3319	.notice-error { border-color: var(--red); background: rgba(248,113,113,0.10); color: var(--red); }
479dcd9Claude	3320	.notice-accent { border-color: var(--accent); background: rgba(91,110,232,0.10); color: var(--text); }
c63b860Claude	3321	.email-preview {
	3322	padding: var(--space-5);
	3323	background: #fff;
	3324	color: #111;
	3325	border-radius: var(--radius-md);
	3326	}
	3327	.code-block {
	3328	margin: var(--space-2) 0 0;
	3329	padding: var(--space-3);
	3330	background: var(--bg-tertiary);
	3331	border: 1px solid var(--border-subtle);
	3332	border-radius: var(--radius-sm);
	3333	font-family: var(--font-mono);
	3334	font-size: var(--font-size-xs);
	3335	line-height: var(--leading-normal);
	3336	overflow-x: auto;
	3337	}
	3338	.status-pill-operational {
	3339	display: inline-flex;
	3340	align-items: center;
	3341	padding: var(--space-1) var(--space-3);
	3342	border-radius: var(--radius-full);
	3343	font-size: var(--font-size-xs);
	3344	font-weight: 600;
	3345	background: rgba(52,211,153,0.15);
	3346	color: var(--green);
	3347	}
	3348	.api-tag {
	3349	display: inline-flex;
	3350	align-items: center;
	3351	font-size: var(--font-size-xs);
	3352	padding: 2px var(--space-2);
	3353	border-radius: var(--radius-sm);
	3354	font-family: var(--font-mono);
	3355	}
	3356	.api-tag-auth { background: rgba(96,165,250,0.15); color: var(--accent); }
	3357	.api-tag-scope { background: rgba(52,211,153,0.15); color: var(--green); }
	3358	.stat-number {
	3359	font-size: var(--font-size-xl);
	3360	font-weight: 700;
	3361	color: var(--text-strong);
	3362	line-height: var(--leading-tight);
	3363	}
	3364	.stat-number-accent { color: var(--accent); }
	3365	.stat-number-blue { color: var(--blue); }
	3366	.stat-number-purple { color: var(--text-link); }
	3367	footer .footer-tag-sub {
	3368	margin-top: var(--space-2);
	3369	font-size: var(--font-size-xs);
	3370	color: var(--text-faint);
	3371	line-height: var(--leading-normal);
	3372	}
	3373	footer .footer-version-pill {
	3374	display: inline-flex;
	3375	align-items: center;
	3376	gap: var(--space-2);
	3377	padding: var(--space-1) var(--space-3);
	3378	border-radius: var(--radius-full);
	3379	border: 1px solid var(--border);
	3380	background: var(--bg-elevated);
	3381	color: var(--text-faint);
	3382	font-family: var(--font-mono);
	3383	font-size: var(--font-size-xs);
	3384	cursor: help;
	3385	}
	3386	footer .footer-banner {
	3387	max-width: 1240px;
	3388	margin: var(--space-6) auto 0;
	3389	padding: var(--space-3) var(--space-4);
	3390	border-radius: var(--radius-md);
	3391	border: 1px solid var(--border);
	3392	background: var(--bg-elevated);
	3393	color: var(--text);
	3394	font-family: var(--font-mono);
	3395	font-size: var(--font-size-xs);
	3396	letter-spacing: 0.04em;
	3397	text-transform: uppercase;
	3398	text-align: center;
	3399	}
	3400	footer .footer-banner-info { border-color: rgba(96,165,250,0.40); color: var(--blue); }
	3401	footer .footer-banner-warn { border-color: rgba(251,191,36,0.40); color: var(--yellow); }
	3402	footer .footer-banner-error { border-color: rgba(248,113,113,0.45); color: var(--red); }
dc26881CC LABS App	3403
cf9178bTest User	3404	/* ============================================================ */
	3405	/* Global toast notifications. */
	3406	/* Slide-in from right, auto-dismiss, ARIA-live for SR users. */
	3407	/* ============================================================ */
	3408	.gx-toast {
	3409	pointer-events: auto;
	3410	display: inline-flex;
	3411	align-items: flex-start;
	3412	gap: 10px;
	3413	min-width: 280px;
	3414	max-width: min(440px, calc(100vw - 32px));
	3415	padding: 12px 14px 12px 12px;
	3416	background: var(--bg-elevated);
	3417	border: 1px solid var(--border);
	3418	border-radius: 10px;
	3419	box-shadow:
	3420	0 12px 36px -10px rgba(15,16,28,0.18),
	3421	0 2px 6px rgba(15,16,28,0.04),
	3422	0 0 0 1px rgba(15,16,28,0.02);
	3423	color: var(--text);
	3424	font-size: 13.5px;
	3425	line-height: 1.45;
	3426	opacity: 0;
	3427	transform: translateX(16px);
	3428	transition:
	3429	opacity 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
	3430	transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
	3431	}
	3432	.gx-toast--in { opacity: 1; transform: translateX(0); }
	3433	.gx-toast--out { opacity: 0; transform: translateX(16px); }
	3434	.gx-toast__icon {
	3435	flex-shrink: 0;
	3436	width: 20px; height: 20px;
	3437	border-radius: 50%;
	3438	display: inline-flex;
	3439	align-items: center;
	3440	justify-content: center;
	3441	font-size: 12px;
	3442	font-weight: 700;
	3443	line-height: 1;
	3444	margin-top: 1px;
	3445	}
	3446	.gx-toast__text { flex: 1 1 auto; min-width: 0; padding-top: 2px; word-wrap: break-word; }
	3447	.gx-toast__close {
	3448	flex-shrink: 0;
	3449	width: 22px; height: 22px;
	3450	border: 0;
	3451	background: transparent;
	3452	color: var(--text-muted);
	3453	font-size: 18px;
	3454	line-height: 1;
	3455	cursor: pointer;
	3456	border-radius: 4px;
	3457	padding: 0;
	3458	margin: -2px -2px 0 0;
	3459	transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
	3460	}
	3461	.gx-toast__close:hover { background: var(--bg-hover); color: var(--text); }
	3462	.gx-toast--success .gx-toast__icon { background: rgba(5,150,105,0.14); color: var(--green); }
	3463	.gx-toast--error .gx-toast__icon { background: rgba(220,38,38,0.14); color: var(--red); }
	3464	.gx-toast--warn .gx-toast__icon { background: rgba(217,119,6,0.16); color: var(--yellow); }
479dcd9Claude	3465	.gx-toast--info .gx-toast__icon { background: rgba(91,110,232,0.14); color: var(--accent); }
cf9178bTest User	3466	@media (prefers-reduced-motion: reduce) {
	3467	.gx-toast { transition: opacity 60ms linear; transform: none; }
	3468	.gx-toast--in, .gx-toast--out { transform: none; }
	3469	}
	3470
dc26881CC LABS App	3471	/* ============================================================ */
	3472	/* Block U4 — cross-document view transitions. */
	3473	/* Chrome 126+, Edge, Safari 18.2+ get a soft 200ms fade on */
	3474	/* every same-origin navigation. Older browsers ignore these */
	3475	/* rules entirely — no JS shim, no breakage. */
	3476	/* prefers-reduced-motion disables the animation honourably. */
	3477	/* ============================================================ */
	3478	@view-transition {
	3479	navigation: auto;
	3480	}
	3481	::view-transition-old(root),
	3482	::view-transition-new(root) {
	3483	animation-duration: 200ms;
	3484	animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
	3485	}
	3486	::view-transition-old(root) {
	3487	animation-name: vt-fade-out;
	3488	}
	3489	::view-transition-new(root) {
	3490	animation-name: vt-fade-in;
	3491	}
	3492	@keyframes vt-fade-out {
	3493	to { opacity: 0; }
	3494	}
	3495	@keyframes vt-fade-in {
	3496	from { opacity: 0; }
	3497	}
	3498	@media (prefers-reduced-motion: reduce) {
	3499	::view-transition-old(root),
	3500	::view-transition-new(root) {
	3501	animation-duration: 0s;
	3502	}
	3503	}
	3504	/* The transition system picks up its root subject from this rule. */
	3505	body {
	3506	view-transition-name: root;
	3507	}
fc1817aClaude	3508	`;