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.tsxBlame3511 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;
64aa989Claude	1514	background: var(--accent);
	1515	box-shadow: none;
2ce1d0bClaude	1516	flex-shrink: 0;
479dcd9Claude	1517	transition: box-shadow var(--t-base) var(--ease);
958d26aClaude	1518	}
	1519	.logo:hover { text-decoration: none; color: var(--text-strong); }
	1520	.logo:hover::before {
64aa989Claude	1521	box-shadow: none;
06d5ffeClaude	1522	}
fc1817aClaude	1523
2ce1d0bClaude	1524	.nav-search {
	1525	flex: 1;
958d26aClaude	1526	max-width: 360px;
	1527	margin: 0 4px 0 8px;
	1528	position: relative;
2ce1d0bClaude	1529	}
	1530	.nav-search input {
	1531	width: 100%;
958d26aClaude	1532	padding: 7px 12px 7px 32px;
2ce1d0bClaude	1533	background: var(--bg-tertiary);
	1534	border: 1px solid var(--border);
	1535	border-radius: var(--r-sm);
	1536	color: var(--text);
	1537	font-family: var(--font-sans);
	1538	font-size: var(--t-sm);
958d26aClaude	1539	transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
	1540	}
	1541	.nav-search::before {
	1542	content: '';
	1543	position: absolute;
	1544	left: 11px; top: 50%;
	1545	transform: translateY(-50%);
	1546	width: 12px; height: 12px;
	1547	border: 1.5px solid var(--text-faint);
	1548	border-radius: 50%;
	1549	pointer-events: none;
	1550	}
	1551	.nav-search::after {
	1552	content: '';
	1553	position: absolute;
	1554	left: 19px; top: calc(50% + 4px);
	1555	width: 5px; height: 1.5px;
	1556	background: var(--text-faint);
	1557	transform: rotate(45deg);
	1558	pointer-events: none;
2ce1d0bClaude	1559	}
	1560	.nav-search input::placeholder { color: var(--text-faint); }
	1561	.nav-search input:focus {
	1562	outline: none;
	1563	background: var(--bg-secondary);
958d26aClaude	1564	border-color: var(--border-focus);
	1565	box-shadow: var(--ring);
2ce1d0bClaude	1566	}
06d5ffeClaude	1567
958d26aClaude	1568	.nav-right { display: flex; align-items: center; gap: 2px; margin-left: auto; }
f764c07Claude	1569
	1570	/* Block N3 — site-admin deploy status pill */
	1571	.nav-deploy-pill {
	1572	display: inline-flex;
	1573	align-items: center;
	1574	gap: 6px;
	1575	padding: 4px 10px;
	1576	margin: 0 6px 0 0;
	1577	border-radius: 9999px;
	1578	font-size: 11px;
	1579	font-weight: 600;
	1580	line-height: 1;
	1581	color: var(--text-strong);
	1582	background: var(--bg-elevated);
	1583	border: 1px solid var(--border);
	1584	text-decoration: none;
	1585	transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
	1586	}
	1587	.nav-deploy-pill:hover { background: var(--bg-hover); text-decoration: none; }
	1588	.nav-deploy-pill .deploy-pill-dot {
	1589	display: inline-block;
	1590	width: 8px; height: 8px;
	1591	border-radius: 50%;
	1592	background: #6b7280;
	1593	}
479dcd9Claude	1594	.deploy-pill-success .deploy-pill-dot { background: #34d399; }
	1595	.deploy-pill-failed .deploy-pill-dot { background: #f87171; }
f764c07Claude	1596	.deploy-pill-failed { border-color: rgba(248,113,113,0.4); }
	1597	.deploy-pill-progress .deploy-pill-dot {
	1598	background: #fbbf24;
	1599	animation: deployPillPulse 1.2s ease-in-out infinite;
	1600	}
	1601	@keyframes deployPillPulse {
	1602	0%, 100% { opacity: 1; transform: scale(1); }
	1603	50% { opacity: 0.45; transform: scale(0.8); }
	1604	}
	1605	.deploy-pill-empty .deploy-pill-dot { background: #9ca3af; }
	1606
c6018a5Claude	1607	/* ── AI dropdown (nav consolidation) ── */
	1608	.nav-ai-dropdown {
	1609	position: relative;
	1610	display: inline-flex;
	1611	align-items: center;
	1612	}
	1613	.nav-ai-trigger {
	1614	background: transparent;
	1615	border: 0;
	1616	font: inherit;
	1617	cursor: pointer;
	1618	color: var(--text-muted);
	1619	font-size: var(--t-sm);
	1620	font-weight: 500;
	1621	padding: 7px 11px;
	1622	border-radius: var(--r-sm);
	1623	line-height: 1.2;
	1624	}
	1625	.nav-ai-trigger:hover {
	1626	color: var(--text-strong);
	1627	background: var(--bg-hover);
	1628	}
	1629	.nav-ai-menu {
	1630	position: absolute;
	1631	top: calc(100% + 6px);
	1632	right: 0;
	1633	min-width: 220px;
	1634	background: var(--bg-secondary);
	1635	border: 1px solid var(--border-strong);
	1636	border-radius: 10px;
479dcd9Claude	1637	box-shadow: 0 12px 32px rgba(0,0,0,0.40), 0 0 0 1px rgba(91,110,232,0.10);
c6018a5Claude	1638	padding: 6px;
	1639	display: none;
	1640	z-index: var(--z-overlay, 100);
	1641	}
	1642	.nav-ai-dropdown:hover .nav-ai-menu,
	1643	.nav-ai-dropdown.is-open .nav-ai-menu,
	1644	.nav-ai-dropdown:focus-within .nav-ai-menu {
	1645	display: block;
	1646	}
	1647	.nav-ai-item {
	1648	display: flex;
	1649	flex-direction: column;
	1650	gap: 1px;
	1651	padding: 8px 10px;
	1652	border-radius: 6px;
	1653	color: var(--text);
	1654	text-decoration: none;
	1655	transition: background var(--t-fast) var(--ease);
	1656	}
	1657	.nav-ai-item:hover {
	1658	background: var(--bg-hover);
	1659	text-decoration: none;
	1660	color: var(--text-strong);
	1661	}
	1662	.nav-ai-item-label {
	1663	font-size: var(--t-sm);
	1664	font-weight: 600;
	1665	color: var(--text-strong);
	1666	}
	1667	.nav-ai-item-sub {
	1668	font-size: 11.5px;
	1669	color: var(--text-muted);
	1670	}
	1671
2ce1d0bClaude	1672	.nav-link {
958d26aClaude	1673	position: relative;
2ce1d0bClaude	1674	color: var(--text-muted);
	1675	font-size: var(--t-sm);
	1676	font-weight: 500;
958d26aClaude	1677	padding: 7px 11px;
2ce1d0bClaude	1678	border-radius: var(--r-sm);
958d26aClaude	1679	transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
2ce1d0bClaude	1680	}
	1681	.nav-link:hover {
958d26aClaude	1682	color: var(--text-strong);
2ce1d0bClaude	1683	background: var(--bg-hover);
	1684	text-decoration: none;
	1685	}
958d26aClaude	1686	.nav-link.active { color: var(--text-strong); }
	1687	.nav-link.active::after {
	1688	content: '';
	1689	position: absolute;
	1690	left: 11px; right: 11px;
	1691	bottom: -1px;
	1692	height: 2px;
64aa989Claude	1693	background: var(--accent);
958d26aClaude	1694	border-radius: 2px;
	1695	}
adf5e18Claude	1696	/* "Migrate from GitHub" nav link — logged-out only, slightly accented
	1697	so it reads as an action affordance rather than a passive link. */
	1698	.nav-migrate {
	1699	color: var(--accent);
	1700	font-weight: 600;
479dcd9Claude	1701	border: 1px solid rgba(91,110,232,0.22);
	1702	background: rgba(91,110,232,0.07);
adf5e18Claude	1703	}
	1704	.nav-migrate:hover {
	1705	color: var(--accent-hover);
479dcd9Claude	1706	background: rgba(91,110,232,0.13);
	1707	border-color: rgba(91,110,232,0.40);
adf5e18Claude	1708	}
	1709	@media (max-width: 780px) { .nav-migrate { display: none; } }
	1710
2c61840Claude	1711	/* ── Mobile nav ──────────────────────────��──────────────────── */
	1712	@media (max-width: 640px) {
	1713	.site-header nav { gap: 10px; padding: 0 var(--space-3); }
	1714	.nav-search { display: none; }
	1715	.nav-right { gap: 4px; }
	1716	.nav-link { display: none; }
	1717	.nav-ai-dropdown { display: none; }
	1718	.nav-deploy-pill .deploy-pill-text { display: none; }
	1719	.nav-inbox-btn .nav-inbox-badge { font-size: 9px; min-width: 14px; height: 14px; }
	1720	}
	1721
2ce1d0bClaude	1722	.nav-user {
958d26aClaude	1723	color: var(--text-strong);
2ce1d0bClaude	1724	font-weight: 600;
	1725	font-size: var(--t-sm);
	1726	padding: 6px 10px;
	1727	border-radius: var(--r-sm);
958d26aClaude	1728	margin-left: 6px;
2ce1d0bClaude	1729	transition: background var(--t-fast) var(--ease);
	1730	}
958d26aClaude	1731	.nav-user::before {
	1732	content: '';
	1733	display: inline-block;
	1734	width: 8px; height: 8px;
	1735	background: var(--green);
	1736	border-radius: 50%;
	1737	margin-right: 7px;
	1738	vertical-align: 1px;
	1739	}
2ce1d0bClaude	1740	.nav-user:hover { background: var(--bg-hover); text-decoration: none; }
fc1817aClaude	1741
f5b9ef5Claude	1742	/* ── Inbox bell button ── */
	1743	.nav-inbox-btn {
	1744	position: relative;
	1745	display: inline-flex;
	1746	align-items: center;
	1747	justify-content: center;
	1748	width: 34px;
	1749	height: 34px;
	1750	border-radius: var(--r-sm);
	1751	color: var(--text-muted);
	1752	transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
	1753	flex-shrink: 0;
	1754	}
	1755	.nav-inbox-btn:hover { color: var(--text); background: var(--bg-hover); text-decoration: none; }
	1756	.nav-inbox-badge {
	1757	position: absolute;
	1758	top: 3px; right: 3px;
	1759	min-width: 15px; height: 15px;
	1760	padding: 0 4px;
	1761	font-size: 9.5px;
	1762	font-weight: 700;
	1763	line-height: 15px;
	1764	color: #fff;
479dcd9Claude	1765	background: var(--accent);
f5b9ef5Claude	1766	border-radius: 9999px;
	1767	text-align: center;
	1768	font-variant-numeric: tabular-nums;
	1769	}
	1770
	1771	/* ── User dropdown ── */
	1772	.nav-user-dropdown { position: relative; }
	1773	.nav-user-trigger {
	1774	display: inline-flex;
	1775	align-items: center;
	1776	gap: 7px;
	1777	padding: 5px 9px 5px 5px;
	1778	border-radius: var(--r-sm);
	1779	border: 1px solid transparent;
	1780	background: transparent;
	1781	color: var(--text);
	1782	font-family: var(--font-sans);
	1783	font-size: var(--t-sm);
	1784	font-weight: 500;
	1785	cursor: pointer;
	1786	transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
	1787	}
	1788	.nav-user-trigger:hover { background: var(--bg-hover); border-color: var(--border); }
	1789	.nav-user-avatar {
	1790	width: 24px; height: 24px;
	1791	border-radius: 50%;
64aa989Claude	1792	background: var(--accent);
f5b9ef5Claude	1793	color: #fff;
	1794	font-size: 11px;
	1795	font-weight: 700;
	1796	display: inline-flex;
	1797	align-items: center;
	1798	justify-content: center;
	1799	flex-shrink: 0;
	1800	box-shadow: 0 0 0 2px var(--border);
	1801	}
	1802	.nav-user-name { font-weight: 500; font-size: var(--t-sm); max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	1803	.nav-user-caret { font-size: 8px; opacity: 0.5; }
	1804	.nav-user-menu {
	1805	display: none;
	1806	position: absolute;
	1807	top: calc(100% + 6px);
	1808	right: 0;
	1809	min-width: 220px;
	1810	background: var(--bg-elevated);
	1811	border: 1px solid var(--border-strong);
	1812	border-radius: var(--r-lg);
	1813	box-shadow: 0 16px 48px -8px rgba(0,0,0,0.55), 0 0 0 1px var(--border);
	1814	padding: 6px;
	1815	z-index: 200;
	1816	animation: navMenuIn 140ms var(--ease) both;
	1817	}
	1818	.nav-user-menu.is-open { display: block; }
	1819	.nav-user-menu-header {
	1820	padding: 8px 10px 10px;
	1821	display: flex;
	1822	flex-direction: column;
	1823	gap: 2px;
	1824	}
	1825	.nav-user-menu-name { font-weight: 600; font-size: var(--t-sm); color: var(--text-strong); }
	1826	.nav-user-menu-handle { font-size: var(--t-xs); color: var(--text-muted); }
	1827	.nav-user-menu-sep { height: 1px; background: var(--border); margin: 4px -6px; }
	1828	.nav-user-item {
	1829	display: block;
	1830	padding: 7px 10px;
	1831	border-radius: 6px;
	1832	font-size: var(--t-sm);
	1833	color: var(--text);
	1834	transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
	1835	white-space: nowrap;
	1836	}
	1837	.nav-user-item:hover { background: var(--bg-hover); color: var(--text-strong); text-decoration: none; }
	1838	.nav-user-item--danger { color: var(--red); }
	1839	.nav-user-item--danger:hover { background: rgba(248,113,113,0.08); color: var(--red); }
	1840
	1841	@keyframes navMenuIn {
	1842	from { opacity: 0; transform: translateY(-4px) scale(0.97); }
	1843	to { opacity: 1; transform: translateY(0) scale(1); }
	1844	}
	1845
2ce1d0bClaude	1846	main {
eed4684Claude	1847	max-width: 1920px;
2ce1d0bClaude	1848	margin: 0 auto;
958d26aClaude	1849	padding: 36px 24px 80px;
2ce1d0bClaude	1850	flex: 1;
	1851	width: 100%;
2c61840Claude	1852	box-sizing: border-box;
479dcd9Claude	1853	/* Subtle entrance fade on page load — kept short (180ms) so it
	1854	reads as responsiveness, not theatre. Honors reduced-motion. */
	1855	animation: gxMainEnter 180ms cubic-bezier(0.22, 1, 0.36, 1) both;
ed6e438Claude	1856	}
	1857	@keyframes gxMainEnter {
479dcd9Claude	1858	from { opacity: 0; transform: translateY(3px); }
ed6e438Claude	1859	to { opacity: 1; transform: translateY(0); }
	1860	}
	1861	@media (prefers-reduced-motion: reduce) {
	1862	main { animation: none; }
	1863	}
	1864	/* 2026 polish — accent focus ring across all focusable elements.
	1865	The default browser ring is utilitarian; this is the same width
	1866	but tinted to the brand accent so keyboard navigation feels
	1867	intentional, not jarring. :focus-visible only — mouse users
	1868	never see it. */
	1869	:focus-visible {
	1870	outline: none;
	1871	}
	1872	a:focus-visible,
	1873	button:focus-visible,
	1874	input:focus-visible,
	1875	select:focus-visible,
	1876	textarea:focus-visible,
	1877	[tabindex]:focus-visible {
479dcd9Claude	1878	outline: 2px solid rgba(91, 110, 232, 0.55);
ed6e438Claude	1879	outline-offset: 2px;
	1880	border-radius: 4px;
2ce1d0bClaude	1881	}
fc1817aClaude	1882
958d26aClaude	1883	/* Editorial footer: link grid + tagline row */
fc1817aClaude	1884	footer {
	1885	border-top: 1px solid var(--border);
958d26aClaude	1886	padding: 56px 24px 40px;
fc1817aClaude	1887	color: var(--text-muted);
958d26aClaude	1888	font-size: var(--t-sm);
ba23fe2Claude	1889	background: var(--bg);
958d26aClaude	1890	}
	1891	footer .footer-inner {
eed4684Claude	1892	max-width: 1920px;
958d26aClaude	1893	margin: 0 auto;
	1894	display: grid;
	1895	grid-template-columns: 1fr auto;
	1896	gap: 48px;
	1897	align-items: start;
	1898	}
	1899	footer .footer-brand .logo { margin-bottom: var(--s-3); }
	1900	footer .footer-tag {
	1901	color: var(--text-muted);
	1902	font-size: var(--t-sm);
	1903	max-width: 320px;
	1904	line-height: 1.55;
	1905	}
	1906	footer .footer-links {
	1907	display: grid;
	1908	grid-template-columns: repeat(3, minmax(120px, auto));
	1909	gap: 0 56px;
	1910	}
	1911	footer .footer-col-title {
	1912	font-family: var(--font-mono);
	1913	font-size: 11px;
	1914	text-transform: uppercase;
	1915	letter-spacing: 0.14em;
	1916	color: var(--text-faint);
	1917	margin-bottom: var(--s-3);
	1918	}
	1919	footer .footer-col a {
	1920	display: block;
	1921	color: var(--text-muted);
	1922	font-size: var(--t-sm);
	1923	padding: 5px 0;
	1924	transition: color var(--t-fast) var(--ease);
	1925	}
	1926	footer .footer-col a:hover { color: var(--text-strong); text-decoration: none; }
	1927	footer .footer-bottom {
eed4684Claude	1928	max-width: 1920px;
958d26aClaude	1929	margin: 40px auto 0;
	1930	padding-top: 24px;
	1931	border-top: 1px solid var(--border-subtle);
	1932	display: flex;
	1933	justify-content: space-between;
	1934	align-items: center;
2ce1d0bClaude	1935	color: var(--text-faint);
	1936	font-size: var(--t-xs);
958d26aClaude	1937	font-family: var(--font-mono);
	1938	letter-spacing: 0.02em;
	1939	}
	1940	footer .footer-bottom a { color: var(--text-faint); }
	1941	footer .footer-bottom a:hover { color: var(--text-muted); text-decoration: none; }
05cdb85Claude	1942	footer .footer-build {
	1943	display: inline-flex;
	1944	align-items: center;
	1945	gap: 6px;
	1946	color: var(--text-faint);
	1947	font-family: var(--font-mono);
	1948	font-size: 11px;
	1949	cursor: help;
	1950	}
	1951	footer .footer-build-dot {
	1952	width: 6px; height: 6px;
	1953	border-radius: 50%;
	1954	background: var(--green);
479dcd9Claude	1955	opacity: 0.9;
05cdb85Claude	1956	}
958d26aClaude	1957	@media (max-width: 768px) {
2c61840Claude	1958	main { padding: 20px 14px 60px; }
958d26aClaude	1959	footer .footer-inner { grid-template-columns: 1fr; gap: 32px; }
	1960	footer .footer-links { grid-template-columns: repeat(2, 1fr); gap: 24px 32px; }
	1961	footer .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
fc1817aClaude	1962	}
2c61840Claude	1963	@media (max-width: 480px) {
	1964	main { padding: 14px 10px 48px; }
	1965	}
fc1817aClaude	1966
2ce1d0bClaude	1967	/* ============================================================ */
	1968	/* Buttons */
	1969	/* ============================================================ */
dc26881CC LABS App	1970	/* ============================================================ */
	1971	/* Buttons — Block U2 senior polish pass. */
	1972	/* Rules: */
	1973	/* · hover lifts every .btn by 1px + soft drop shadow (180ms) */
	1974	/* · active presses back down to 0 (80ms — faster on press) */
	1975	/* · focus-visible uses a soft box-shadow ring (no outline) */
	1976	/* · primary gradient shifts position on hover for a slow */
	1977	/* 600ms shimmer */
	1978	/* · disabled never lifts and never animates */
	1979	/* ============================================================ */
06d5ffeClaude	1980	.btn {
	1981	display: inline-flex;
	1982	align-items: center;
2ce1d0bClaude	1983	justify-content: center;
958d26aClaude	1984	gap: 7px;
2ce1d0bClaude	1985	padding: 7px 14px;
	1986	border-radius: var(--r-sm);
958d26aClaude	1987	font-family: var(--font-sans);
2ce1d0bClaude	1988	font-size: var(--t-sm);
06d5ffeClaude	1989	font-weight: 500;
	1990	border: 1px solid var(--border);
2ce1d0bClaude	1991	background: var(--bg-elevated);
06d5ffeClaude	1992	color: var(--text);
	1993	cursor: pointer;
	1994	text-decoration: none;
958d26aClaude	1995	line-height: 1.25;
	1996	letter-spacing: -0.008em;
dc26881CC LABS App	1997	/* U2 — hover/transform settles in 180ms; press snaps in 80ms.
	1998	Listed once on the base rule so :active can override only the
	1999	transform/duration without re-typing the colour/bg transitions. */
2ce1d0bClaude	2000	transition:
dc26881CC LABS App	2001	background 180ms ease,
	2002	border-color 180ms ease,
	2003	transform 180ms ease,
	2004	box-shadow 180ms ease,
	2005	color 180ms ease;
2ce1d0bClaude	2006	user-select: none;
	2007	white-space: nowrap;
958d26aClaude	2008	position: relative;
06d5ffeClaude	2009	}
2ce1d0bClaude	2010	.btn:hover {
	2011	background: var(--bg-surface);
	2012	border-color: var(--border-strong);
958d26aClaude	2013	color: var(--text-strong);
2ce1d0bClaude	2014	text-decoration: none;
dc26881CC LABS App	2015	/* U2 — universal hover lift + soft accent drop shadow. */
	2016	transform: translateY(-1px);
	2017	box-shadow: 0 4px 12px -4px rgba(15, 17, 26, 0.45);
	2018	}
	2019	.btn:active {
	2020	transform: translateY(0);
	2021	transition-duration: 80ms;
	2022	}
479dcd9Claude	2023	/* U2 — soft modern focus ring via box-shadow, not outline.
	2024	The literal legacy declaration is kept for external tooling that
	2025	greps for the U2 contract; the var(--ring) declaration after it
	2026	wins the cascade and renders the calm indigo ring. */
dc26881CC LABS App	2027	.btn:focus-visible {
	2028	outline: none;
6fd5915Claude	2029	box-shadow: 0 0 0 3px rgba(91, 110, 232, 0.35);
479dcd9Claude	2030	box-shadow: var(--ring);
2ce1d0bClaude	2031	}
	2032
	2033	.btn-primary {
	2034	background: var(--accent-gradient);
	2035	border-color: transparent;
	2036	color: #fff;
	2037	font-weight: 600;
958d26aClaude	2038	text-shadow: 0 1px 0 rgba(0,0,0,0.15);
2ce1d0bClaude	2039	box-shadow:
958d26aClaude	2040	inset 0 1px 0 rgba(255,255,255,0.22),
	2041	inset 0 -1px 0 rgba(0,0,0,0.10),
	2042	0 1px 2px rgba(0,0,0,0.40),
479dcd9Claude	2043	0 0 0 1px rgba(91,110,232,0.30);
dc26881CC LABS App	2044	transition:
8cfb00eClaude	2045	background 180ms ease,
dc26881CC LABS App	2046	transform 180ms ease,
	2047	box-shadow 180ms ease,
	2048	color 180ms ease;
06d5ffeClaude	2049	}
2ce1d0bClaude	2050	.btn-primary:hover {
958d26aClaude	2051	color: #fff;
8cfb00eClaude	2052	background: var(--accent-hover);
958d26aClaude	2053	border-color: transparent;
dc26881CC LABS App	2054	transform: translateY(-1px);
2ce1d0bClaude	2055	box-shadow:
958d26aClaude	2056	inset 0 1px 0 rgba(255,255,255,0.30),
	2057	inset 0 -1px 0 rgba(0,0,0,0.10),
479dcd9Claude	2058	0 6px 18px -6px rgba(0,0,0,0.45),
	2059	0 0 0 1px rgba(91,110,232,0.40);
2ce1d0bClaude	2060	}
dc26881CC LABS App	2061	.btn-primary:active { transform: translateY(0); transition-duration: 80ms; }
	2062	/* U2 — primary focus ring uses the same accent box-shadow recipe. */
	2063	.btn-primary:focus-visible {
	2064	box-shadow:
	2065	inset 0 1px 0 rgba(255,255,255,0.22),
479dcd9Claude	2066	0 0 0 3px rgba(91,110,232,0.35);
dc26881CC LABS App	2067	}
2ce1d0bClaude	2068
	2069	.btn-danger {
	2070	background: transparent;
958d26aClaude	2071	border-color: rgba(248,113,113,0.40);
2ce1d0bClaude	2072	color: var(--red);
	2073	}
	2074	.btn-danger:hover {
958d26aClaude	2075	background: rgba(248,113,113,0.08);
2ce1d0bClaude	2076	border-color: var(--red);
958d26aClaude	2077	color: var(--red);
dc26881CC LABS App	2078	transform: translateY(-1px);
	2079	box-shadow: 0 4px 12px -4px rgba(248,113,113,0.30);
2ce1d0bClaude	2080	}
dc26881CC LABS App	2081	.btn-danger:focus-visible { box-shadow: 0 0 0 3px rgba(248,113,113,0.35); }
2ce1d0bClaude	2082
	2083	.btn-ghost {
	2084	background: transparent;
	2085	border-color: transparent;
	2086	color: var(--text-muted);
	2087	}
	2088	.btn-ghost:hover {
	2089	background: var(--bg-hover);
958d26aClaude	2090	color: var(--text-strong);
2ce1d0bClaude	2091	border-color: var(--border);
dc26881CC LABS App	2092	transform: translateY(-1px);
	2093	box-shadow: 0 4px 12px -4px rgba(15, 17, 26, 0.30);
2ce1d0bClaude	2094	}
	2095
958d26aClaude	2096	.btn-secondary {
	2097	background: var(--bg-elevated);
	2098	border-color: var(--border-strong);
	2099	color: var(--text-strong);
	2100	}
	2101	.btn-secondary:hover {
	2102	background: var(--bg-surface);
	2103	border-color: var(--border-strong);
dc26881CC LABS App	2104	transform: translateY(-1px);
	2105	box-shadow: 0 4px 12px -4px rgba(15, 17, 26, 0.35);
958d26aClaude	2106	}
	2107
	2108	.btn-sm { padding: 4px 10px; font-size: var(--t-xs); border-radius: var(--r-sm); gap: 5px; }
	2109	.btn-lg { padding: 11px 22px; font-size: var(--t-base); border-radius: var(--r); }
	2110	.btn-xl { padding: 14px 28px; font-size: var(--t-md); border-radius: var(--r); font-weight: 600; }
	2111	.btn-block { width: 100%; }
2ce1d0bClaude	2112
dc26881CC LABS App	2113	/* U2 — disabled never lifts, never shimmers, never glows. */
	2114	.btn:disabled,
	2115	.btn[aria-disabled='true'],
	2116	.btn:disabled:hover,
	2117	.btn[aria-disabled='true']:hover {
	2118	opacity: 0.5;
2ce1d0bClaude	2119	cursor: not-allowed;
	2120	pointer-events: none;
dc26881CC LABS App	2121	transform: none;
	2122	box-shadow: none;
	2123	}
	2124	@media (prefers-reduced-motion: reduce) {
	2125	.btn,
	2126	.btn:hover,
	2127	.btn:active,
	2128	.btn-primary,
	2129	.btn-primary:hover {
	2130	transform: none;
	2131	transition: background-color 80ms linear, color 80ms linear;
	2132	}
2ce1d0bClaude	2133	}
	2134
	2135	/* ============================================================ */
	2136	/* Forms */
	2137	/* ============================================================ */
	2138	.form-group { margin-bottom: 20px; }
	2139	.form-group label {
	2140	display: block;
	2141	font-size: var(--t-sm);
	2142	font-weight: 500;
	2143	margin-bottom: 6px;
	2144	color: var(--text);
	2145	letter-spacing: -0.005em;
	2146	}
	2147	.form-group input,
	2148	.form-group textarea,
	2149	.form-group select,
	2150	input[type='text'], input[type='email'], input[type='password'],
	2151	input[type='url'], input[type='search'], input[type='number'],
	2152	textarea, select {
06d5ffeClaude	2153	width: 100%;
2ce1d0bClaude	2154	padding: 9px 12px;
	2155	background: var(--bg-secondary);
06d5ffeClaude	2156	border: 1px solid var(--border);
2ce1d0bClaude	2157	border-radius: var(--r-sm);
06d5ffeClaude	2158	color: var(--text);
2ce1d0bClaude	2159	font-size: var(--t-sm);
06d5ffeClaude	2160	font-family: var(--font-sans);
2ce1d0bClaude	2161	transition:
	2162	border-color var(--t-fast) var(--ease),
	2163	background var(--t-fast) var(--ease),
	2164	box-shadow var(--t-fast) var(--ease);
06d5ffeClaude	2165	}
2ce1d0bClaude	2166	.form-group input::placeholder, textarea::placeholder, input::placeholder {
	2167	color: var(--text-faint);
06d5ffeClaude	2168	}
2ce1d0bClaude	2169	.form-group input:hover, textarea:hover, select:hover,
	2170	input[type='text']:hover, input[type='email']:hover, input[type='password']:hover {
	2171	border-color: var(--border-strong);
	2172	}
	2173	.form-group input:focus, .form-group textarea:focus, .form-group select:focus,
	2174	input:focus, textarea:focus, select:focus {
06d5ffeClaude	2175	outline: none;
2ce1d0bClaude	2176	background: var(--bg);
	2177	border-color: var(--border-focus);
	2178	box-shadow: var(--ring);
06d5ffeClaude	2179	}
2ce1d0bClaude	2180	textarea { font-family: var(--font-mono); font-size: var(--t-sm); line-height: 1.55; }
06d5ffeClaude	2181	.input-disabled { opacity: 0.5; cursor: not-allowed; }
	2182
2ce1d0bClaude	2183	/* ============================================================ */
	2184	/* Auth (register / login / verify) */
	2185	/* ============================================================ */
	2186	.auth-container {
98f45b4Claude	2187	/* 2026 polish — wider, more generous, with a subtle accent-glow
	2188	border and gradient top-edge so it reads as a premium product
	2189	gateway, not a stock form. The 480px width feels intentional
	2190	(not cramped, not endless). */
	2191	max-width: 480px;
	2192	margin: 72px auto;
	2193	padding: 40px 40px 36px;
2ce1d0bClaude	2194	background: var(--bg-elevated);
	2195	border: 1px solid var(--border);
98f45b4Claude	2196	border-radius: 16px;
	2197	box-shadow:
	2198	var(--elev-2),
479dcd9Claude	2199	0 24px 64px -16px rgba(0, 0, 0, 0.30);
98f45b4Claude	2200	position: relative;
	2201	overflow: hidden;
	2202	}
2ce1d0bClaude	2203	.auth-container h2 {
98f45b4Claude	2204	margin: 0 0 8px;
	2205	font-size: 28px;
	2206	font-weight: 700;
	2207	font-family: var(--font-display);
	2208	letter-spacing: -0.025em;
	2209	color: var(--text-strong);
	2210	line-height: 1.15;
	2211	}
	2212	.auth-container .auth-subtitle {
	2213	color: var(--text-muted);
	2214	font-size: 14.5px;
	2215	line-height: 1.5;
	2216	margin: 0 0 24px;
2ce1d0bClaude	2217	}
	2218	.auth-container > p {
	2219	color: var(--text-muted);
	2220	font-size: var(--t-sm);
	2221	margin-bottom: 24px;
	2222	}
98f45b4Claude	2223	.auth-container .btn-primary {
	2224	width: 100%;
	2225	padding: 12px 16px;
	2226	font-size: 15px;
	2227	font-weight: 600;
	2228	margin-top: 4px;
	2229	}
582cdacClaude	2230
	2231	/* OAuth provider buttons (Google / GitHub / SSO). Single-line layout
	2232	with a brand-coloured logo on the left and a label centred-trailing.
	2233	Hover lifts 1px with a subtle shadow — matches the rest of the
	2234	button system but reads as a brand-affiliated action, not a brand-
	2235	coloured primary CTA. */
	2236	.auth-container .oauth-btn {
	2237	display: flex;
	2238	align-items: center;
	2239	justify-content: center;
	2240	gap: 10px;
	2241	width: 100%;
	2242	padding: 11px 16px;
	2243	background: var(--bg-surface, var(--bg-elevated));
	2244	border: 1px solid var(--border);
	2245	border-radius: var(--r-md, 8px);
	2246	color: var(--text-strong);
	2247	font-family: var(--font-sans);
	2248	font-size: 14.5px;
	2249	font-weight: 500;
	2250	text-decoration: none;
	2251	transition:
	2252	transform var(--t-base, 180ms) var(--ease, ease),
	2253	box-shadow var(--t-base, 180ms) var(--ease, ease),
	2254	background var(--t-fast, 120ms) var(--ease, ease),
	2255	border-color var(--t-fast, 120ms) var(--ease, ease);
	2256	}
	2257	.auth-container .oauth-btn:hover {
	2258	transform: translateY(-1px);
	2259	background: var(--bg-hover);
	2260	border-color: var(--text-muted);
	2261	color: var(--text-strong);
	2262	box-shadow: 0 4px 14px -4px rgba(0,0,0,0.25);
	2263	text-decoration: none;
	2264	}
	2265	.auth-container .oauth-btn:focus-visible {
479dcd9Claude	2266	outline: 2px solid rgba(91, 110, 232, 0.55);
582cdacClaude	2267	outline-offset: 2px;
	2268	}
	2269	.auth-container .oauth-btn .oauth-icon {
	2270	flex-shrink: 0;
	2271	}
	2272	/* GitHub icon adopts the text colour so it reads in both themes. */
	2273	.auth-container .oauth-github .oauth-icon {
	2274	color: var(--text-strong);
	2275	}
	2276	/* Google logo uses the official 4-colour treatment via inline SVG fill
	2277	attributes — nothing to override here. */
	2278	/* "or" divider between the password form and provider buttons */
	2279	.auth-container .auth-divider {
	2280	display: flex;
	2281	align-items: center;
	2282	gap: 12px;
	2283	margin: 20px 0 12px;
	2284	color: var(--text-faint);
	2285	font-size: 12px;
	2286	letter-spacing: 0.08em;
	2287	text-transform: uppercase;
	2288	}
	2289	.auth-container .auth-divider::before,
	2290	.auth-container .auth-divider::after {
	2291	content: '';
	2292	flex: 1;
	2293	height: 1px;
	2294	background: var(--border);
	2295	}
06d5ffeClaude	2296	.auth-error {
958d26aClaude	2297	background: rgba(248,113,113,0.08);
	2298	border: 1px solid rgba(248,113,113,0.35);
06d5ffeClaude	2299	color: var(--red);
2ce1d0bClaude	2300	padding: 10px 14px;
	2301	border-radius: var(--r-sm);
06d5ffeClaude	2302	margin-bottom: 16px;
2ce1d0bClaude	2303	font-size: var(--t-sm);
06d5ffeClaude	2304	}
	2305	.auth-success {
958d26aClaude	2306	background: rgba(52,211,153,0.08);
	2307	border: 1px solid rgba(52,211,153,0.35);
06d5ffeClaude	2308	color: var(--green);
2ce1d0bClaude	2309	padding: 10px 14px;
	2310	border-radius: var(--r-sm);
06d5ffeClaude	2311	margin-bottom: 16px;
2ce1d0bClaude	2312	font-size: var(--t-sm);
	2313	}
	2314	.auth-switch {
	2315	margin-top: 20px;
	2316	font-size: var(--t-sm);
	2317	color: var(--text-muted);
	2318	text-align: center;
	2319	}
	2320	.banner {
	2321	background: var(--accent-gradient-faint);
479dcd9Claude	2322	border: 1px solid rgba(91,110,232,0.35);
2ce1d0bClaude	2323	color: var(--text);
	2324	padding: 10px 14px;
	2325	border-radius: var(--r-sm);
	2326	font-size: var(--t-sm);
06d5ffeClaude	2327	}
	2328
2ce1d0bClaude	2329	/* ============================================================ */
	2330	/* Settings */
	2331	/* ============================================================ */
	2332	.settings-container { max-width: 720px; }
	2333	.settings-container h2 { margin-bottom: 8px; font-size: var(--t-xl); letter-spacing: -0.02em; }
	2334	.settings-container > h2 + p { color: var(--text-muted); font-size: var(--t-sm); margin-bottom: 24px; }
	2335	.settings-container h3 { font-size: var(--t-md); margin-bottom: 12px; margin-top: 28px; }
	2336	.settings-container h3:first-of-type { margin-top: 0; }
06d5ffeClaude	2337	.ssh-keys-list { margin-bottom: 24px; }
	2338	.ssh-key-item {
	2339	display: flex;
	2340	justify-content: space-between;
	2341	align-items: center;
2ce1d0bClaude	2342	padding: 14px 16px;
06d5ffeClaude	2343	border: 1px solid var(--border);
2ce1d0bClaude	2344	border-radius: var(--r-md);
06d5ffeClaude	2345	margin-bottom: 8px;
2ce1d0bClaude	2346	background: var(--bg-elevated);
	2347	transition: border-color var(--t-fast) var(--ease);
06d5ffeClaude	2348	}
2ce1d0bClaude	2349	.ssh-key-item:hover { border-color: var(--border-strong); }
	2350	.ssh-key-meta { font-size: var(--t-xs); color: var(--text-muted); margin-top: 4px; }
	2351	.ssh-key-meta code { font-size: var(--t-xs); background: var(--bg-tertiary); padding: 1px 6px; border-radius: 3px; margin-right: 8px; }
06d5ffeClaude	2352
2ce1d0bClaude	2353	/* ============================================================ */
	2354	/* Repo header + nav */
	2355	/* ============================================================ */
fc1817aClaude	2356	.repo-header {
	2357	display: flex;
	2358	align-items: center;
debcf27Claude	2359	gap: 12px;
	2360	margin-bottom: 22px;
	2361	}
	2362	.repo-header-title {
	2363	display: flex;
	2364	align-items: center;
	2365	gap: 10px;
	2366	font-family: var(--font-display);
	2367	font-size: 24px;
	2368	letter-spacing: -0.025em;
	2369	flex-wrap: wrap;
	2370	}
	2371	.repo-header .owner {
	2372	color: var(--text-muted);
	2373	font-weight: 500;
	2374	transition: color var(--t-fast) var(--ease);
	2375	}
	2376	.repo-header .owner:hover { color: var(--text-link); text-decoration: none; }
	2377	.repo-header .separator { color: var(--text-faint); font-weight: 300; }
	2378	.repo-header .name {
	2379	color: var(--text-strong);
	2380	font-weight: 700;
	2381	letter-spacing: -0.028em;
fc1817aClaude	2382	}
2ce1d0bClaude	2383	.repo-header .name:hover { color: var(--text-link); text-decoration: none; }
debcf27Claude	2384	.repo-header-fork {
	2385	font-family: var(--font-mono);
	2386	font-size: 11px;
	2387	color: var(--text-muted);
	2388	margin-top: 4px;
	2389	letter-spacing: 0.01em;
	2390	}
	2391	.repo-header-fork a { color: var(--text-muted); }
	2392	.repo-header-fork a:hover { color: var(--accent); }
	2393	.repo-header-pill {
	2394	display: inline-flex;
	2395	align-items: center;
	2396	padding: 2px 10px;
	2397	border-radius: var(--r-full);
	2398	font-family: var(--font-mono);
	2399	font-size: 10px;
	2400	font-weight: 600;
	2401	letter-spacing: 0.12em;
	2402	text-transform: uppercase;
	2403	line-height: 1.6;
	2404	vertical-align: 4px;
	2405	}
	2406	.repo-header-pill-archived {
	2407	background: rgba(251,191,36,0.10);
	2408	color: var(--yellow);
	2409	border: 1px solid rgba(251,191,36,0.30);
	2410	}
	2411	.repo-header-pill-template {
	2412	background: var(--accent-gradient-faint);
	2413	color: var(--accent);
479dcd9Claude	2414	border: 1px solid rgba(91,110,232,0.30);
fc1817aClaude	2415	}
06d5ffeClaude	2416	.repo-header-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
fc1817aClaude	2417
8c790e0Claude	2418	/* Push Watch discoverability — live/recent indicator in the repo header */
	2419	.repo-header-live-badge {
	2420	display: inline-flex;
	2421	align-items: center;
	2422	gap: 5px;
	2423	padding: 2px 9px;
	2424	border-radius: 999px;
	2425	font-size: 12px;
	2426	font-weight: 600;
	2427	letter-spacing: 0.02em;
	2428	text-decoration: none !important;
	2429	vertical-align: 3px;
	2430	transition: filter 140ms ease, opacity 140ms ease;
	2431	}
	2432	.repo-header-live-badge:hover { filter: brightness(1.15); text-decoration: none !important; }
	2433	.repo-header-live-badge--live {
	2434	background: rgba(218, 54, 51, 0.12);
	2435	color: #f97171;
	2436	border: 1px solid rgba(218, 54, 51, 0.35);
	2437	}
	2438	.repo-header-live-badge--live .repo-header-live-dot {
64aa989Claude	2439	background: #22c55e;
8c790e0Claude	2440	display: inline-block;
	2441	}
	2442	.repo-header-live-badge--recent {
479dcd9Claude	2443	background: rgba(91, 110, 232, 0.08);
8c790e0Claude	2444	color: var(--text-muted);
479dcd9Claude	2445	border: 1px solid rgba(91, 110, 232, 0.22);
8c790e0Claude	2446	}
	2447	.repo-header-live-badge--recent:hover { color: var(--accent); }
	2448
fc1817aClaude	2449	.repo-nav {
	2450	display: flex;
debcf27Claude	2451	gap: 1px;
fc1817aClaude	2452	border-bottom: 1px solid var(--border);
debcf27Claude	2453	margin-bottom: 28px;
2ce1d0bClaude	2454	overflow-x: auto;
	2455	scrollbar-width: thin;
fc1817aClaude	2456	}
2ce1d0bClaude	2457	.repo-nav::-webkit-scrollbar { height: 0; }
fc1817aClaude	2458	.repo-nav a {
debcf27Claude	2459	position: relative;
	2460	padding: 11px 14px;
fc1817aClaude	2461	color: var(--text-muted);
	2462	border-bottom: 2px solid transparent;
2ce1d0bClaude	2463	font-size: var(--t-sm);
	2464	font-weight: 500;
	2465	margin-bottom: -1px;
debcf27Claude	2466	transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
2ce1d0bClaude	2467	white-space: nowrap;
	2468	}
debcf27Claude	2469	.repo-nav a:hover { text-decoration: none; color: var(--text-strong); background: var(--bg-hover); }
2ce1d0bClaude	2470	.repo-nav a.active {
debcf27Claude	2471	color: var(--text-strong);
	2472	font-weight: 600;
	2473	}
	2474	.repo-nav a.active::after {
	2475	content: '';
	2476	position: absolute;
	2477	left: 14px;
	2478	right: 14px;
	2479	bottom: -1px;
	2480	height: 2px;
64aa989Claude	2481	background: var(--accent);
debcf27Claude	2482	border-radius: 2px;
	2483	}
	2484	/* AI links in the right-side cluster — sparkle accent */
	2485	.repo-nav-ai {
	2486	color: var(--accent) !important;
	2487	font-weight: 500;
	2488	}
	2489	.repo-nav-ai:hover {
	2490	color: var(--accent-hover) !important;
	2491	background: var(--accent-gradient-faint) !important;
	2492	}
	2493	.repo-nav-ai.active {
	2494	color: var(--accent-hover) !important;
2ce1d0bClaude	2495	font-weight: 600;
fc1817aClaude	2496	}
	2497
2ce1d0bClaude	2498	.breadcrumb {
	2499	display: flex;
debcf27Claude	2500	gap: 6px;
2ce1d0bClaude	2501	align-items: center;
debcf27Claude	2502	margin-bottom: 18px;
2ce1d0bClaude	2503	color: var(--text-muted);
	2504	font-size: var(--t-sm);
	2505	font-family: var(--font-mono);
debcf27Claude	2506	font-feature-settings: var(--mono-feat);
2ce1d0bClaude	2507	}
	2508	.breadcrumb a { color: var(--text-link); font-weight: 500; }
	2509	.breadcrumb a:hover { color: var(--accent-hover); }
debcf27Claude	2510	.breadcrumb strong {
	2511	color: var(--text-strong);
	2512	font-weight: 600;
fc1817aClaude	2513	}
	2514
debcf27Claude	2515	/* Page header — eyebrow + title + optional actions row.
	2516	Use on dashboard, settings, admin, any "section landing" page. */
	2517	.page-header {
	2518	display: flex;
	2519	align-items: flex-end;
	2520	justify-content: space-between;
	2521	gap: 16px;
	2522	margin-bottom: 28px;
	2523	padding-bottom: 20px;
	2524	border-bottom: 1px solid var(--border-subtle);
	2525	flex-wrap: wrap;
	2526	}
	2527	.page-header-text { flex: 1; min-width: 280px; }
	2528	.page-header .eyebrow { margin-bottom: var(--s-2); }
	2529	.page-header h1 {
	2530	font-family: var(--font-display);
	2531	font-size: clamp(24px, 3vw, 36px);
	2532	line-height: 1.1;
	2533	letter-spacing: -0.028em;
	2534	margin-bottom: 6px;
	2535	}
	2536	.page-header p {
	2537	color: var(--text-muted);
	2538	font-size: var(--t-sm);
	2539	line-height: 1.55;
	2540	max-width: 640px;
	2541	}
	2542	.page-header-actions { display: flex; gap: 8px; align-items: center; }
fc1817aClaude	2543
2ce1d0bClaude	2544	/* ============================================================ */
	2545	/* File browser table */
	2546	/* ============================================================ */
	2547	.file-table {
	2548	width: 100%;
	2549	border: 1px solid var(--border);
	2550	border-radius: var(--r-md);
	2551	overflow: hidden;
	2552	background: var(--bg-elevated);
debcf27Claude	2553	border-collapse: collapse;
2ce1d0bClaude	2554	}
debcf27Claude	2555	.file-table tr { border-bottom: 1px solid var(--border-subtle); transition: background var(--t-fast) var(--ease); }
fc1817aClaude	2556	.file-table tr:last-child { border-bottom: none; }
debcf27Claude	2557	.file-table td {
	2558	padding: 9px 16px;
	2559	font-size: var(--t-sm);
	2560	font-family: var(--font-mono);
	2561	font-feature-settings: var(--mono-feat);
	2562	}
2ce1d0bClaude	2563	.file-table tr:hover { background: var(--bg-hover); }
debcf27Claude	2564	.file-icon {
	2565	width: 22px;
	2566	color: var(--text-faint);
	2567	font-size: 13px;
	2568	text-align: center;
	2569	}
	2570	.file-name a {
	2571	color: var(--text);
	2572	font-weight: 500;
	2573	transition: color var(--t-fast) var(--ease);
	2574	}
	2575	.file-name a:hover { color: var(--accent); text-decoration: none; }
fc1817aClaude	2576
2ce1d0bClaude	2577	/* ============================================================ */
	2578	/* Blob view */
	2579	/* ============================================================ */
fc1817aClaude	2580	.blob-view {
	2581	border: 1px solid var(--border);
2ce1d0bClaude	2582	border-radius: var(--r-md);
fc1817aClaude	2583	overflow: hidden;
2ce1d0bClaude	2584	background: var(--bg-elevated);
fc1817aClaude	2585	}
	2586	.blob-header {
	2587	background: var(--bg-secondary);
2ce1d0bClaude	2588	padding: 10px 16px;
fc1817aClaude	2589	border-bottom: 1px solid var(--border);
2ce1d0bClaude	2590	font-size: var(--t-sm);
fc1817aClaude	2591	color: var(--text-muted);
06d5ffeClaude	2592	display: flex;
	2593	justify-content: space-between;
	2594	align-items: center;
fc1817aClaude	2595	}
	2596	.blob-code {
	2597	overflow-x: auto;
	2598	font-family: var(--font-mono);
2ce1d0bClaude	2599	font-size: var(--t-sm);
	2600	line-height: 1.65;
fc1817aClaude	2601	}
	2602	.blob-code table { width: 100%; border-collapse: collapse; }
	2603	.blob-code .line-num {
	2604	width: 1%;
2ce1d0bClaude	2605	min-width: 56px;
	2606	padding: 0 14px;
fc1817aClaude	2607	text-align: right;
2ce1d0bClaude	2608	color: var(--text-faint);
fc1817aClaude	2609	user-select: none;
	2610	white-space: nowrap;
	2611	border-right: 1px solid var(--border);
	2612	}
2ce1d0bClaude	2613	.blob-code .line-content { padding: 0 16px; white-space: pre; }
	2614	.blob-code tr:hover { background: var(--bg-hover); }
fc1817aClaude	2615
2ce1d0bClaude	2616	/* ============================================================ */
	2617	/* Commits + diffs */
	2618	/* ============================================================ */
	2619	.commit-list {
	2620	border: 1px solid var(--border);
	2621	border-radius: var(--r-md);
	2622	overflow: hidden;
	2623	background: var(--bg-elevated);
	2624	}
fc1817aClaude	2625	.commit-item {
	2626	display: flex;
	2627	justify-content: space-between;
	2628	align-items: center;
debcf27Claude	2629	padding: 14px 18px;
	2630	border-bottom: 1px solid var(--border-subtle);
2ce1d0bClaude	2631	transition: background var(--t-fast) var(--ease);
fc1817aClaude	2632	}
	2633	.commit-item:last-child { border-bottom: none; }
2ce1d0bClaude	2634	.commit-item:hover { background: var(--bg-hover); }
debcf27Claude	2635	.commit-message {
	2636	font-size: var(--t-sm);
	2637	font-weight: 500;
	2638	line-height: 1.45;
	2639	color: var(--text-strong);
	2640	letter-spacing: -0.005em;
	2641	}
	2642	.commit-meta {
	2643	font-family: var(--font-mono);
	2644	font-size: 11px;
	2645	color: var(--text-muted);
	2646	margin-top: 5px;
	2647	letter-spacing: 0.01em;
	2648	}
fc1817aClaude	2649	.commit-sha {
	2650	font-family: var(--font-mono);
debcf27Claude	2651	font-feature-settings: var(--mono-feat);
	2652	font-size: 11px;
	2653	padding: 4px 9px;
fc1817aClaude	2654	background: var(--bg-tertiary);
	2655	border: 1px solid var(--border);
2ce1d0bClaude	2656	border-radius: var(--r-sm);
debcf27Claude	2657	color: var(--accent);
	2658	font-weight: 600;
	2659	letter-spacing: 0.02em;
2ce1d0bClaude	2660	transition: all var(--t-fast) var(--ease);
fc1817aClaude	2661	}
debcf27Claude	2662	.commit-sha:hover {
479dcd9Claude	2663	border-color: rgba(91,110,232,0.40);
debcf27Claude	2664	background: var(--accent-gradient-faint);
	2665	color: var(--accent-hover);
	2666	text-decoration: none;
fc1817aClaude	2667	}
	2668
	2669	.diff-view { margin-top: 16px; }
	2670	.diff-file {
	2671	border: 1px solid var(--border);
2ce1d0bClaude	2672	border-radius: var(--r-md);
fc1817aClaude	2673	margin-bottom: 16px;
	2674	overflow: hidden;
2ce1d0bClaude	2675	background: var(--bg-elevated);
fc1817aClaude	2676	}
	2677	.diff-file-header {
	2678	background: var(--bg-secondary);
2ce1d0bClaude	2679	padding: 10px 16px;
fc1817aClaude	2680	border-bottom: 1px solid var(--border);
	2681	font-family: var(--font-mono);
2ce1d0bClaude	2682	font-size: var(--t-sm);
	2683	font-weight: 500;
fc1817aClaude	2684	}
	2685	.diff-content {
	2686	overflow-x: auto;
	2687	font-family: var(--font-mono);
2ce1d0bClaude	2688	font-size: var(--t-sm);
	2689	line-height: 1.65;
fc1817aClaude	2690	}
958d26aClaude	2691	.diff-content .line-add { background: rgba(52,211,153,0.10); color: var(--green); }
	2692	.diff-content .line-del { background: rgba(248,113,113,0.08); color: var(--red); }
479dcd9Claude	2693	.diff-content .line-hunk { background: rgba(91,110,232,0.06); color: var(--text-link); }
2ce1d0bClaude	2694	.diff-content .line { padding: 0 16px; white-space: pre; display: block; }
fc1817aClaude	2695
	2696	.stat-add { color: var(--green); font-weight: 600; }
	2697	.stat-del { color: var(--red); font-weight: 600; }
	2698
2ce1d0bClaude	2699	/* ============================================================ */
	2700	/* Empty state */
	2701	/* ============================================================ */
fc1817aClaude	2702	.empty-state {
	2703	text-align: center;
ba23fe2Claude	2704	padding: 80px 24px;
fc1817aClaude	2705	color: var(--text-muted);
ba23fe2Claude	2706	border: 1px solid var(--border);
2ce1d0bClaude	2707	border-radius: var(--r-lg);
ba23fe2Claude	2708	background: var(--bg-elevated);
fc1817aClaude	2709	}
2ce1d0bClaude	2710	.empty-state h2 {
958d26aClaude	2711	font-size: var(--t-xl);
2ce1d0bClaude	2712	margin-bottom: 8px;
958d26aClaude	2713	color: var(--text-strong);
	2714	letter-spacing: -0.022em;
2ce1d0bClaude	2715	}
958d26aClaude	2716	.empty-state p { font-size: var(--t-md); max-width: 480px; margin: 0 auto; line-height: 1.55; }
fc1817aClaude	2717	.empty-state pre {
	2718	text-align: left;
	2719	display: inline-block;
	2720	background: var(--bg-secondary);
958d26aClaude	2721	padding: 18px 24px;
	2722	border-radius: var(--r-md);
fc1817aClaude	2723	border: 1px solid var(--border);
	2724	font-family: var(--font-mono);
958d26aClaude	2725	font-feature-settings: var(--mono-feat);
2ce1d0bClaude	2726	font-size: var(--t-sm);
958d26aClaude	2727	margin-top: 24px;
fc1817aClaude	2728	line-height: 1.8;
2ce1d0bClaude	2729	color: var(--text);
958d26aClaude	2730	box-shadow: var(--elev-1);
fc1817aClaude	2731	}
	2732
2ce1d0bClaude	2733	/* ============================================================ */
	2734	/* Badges */
	2735	/* ============================================================ */
fc1817aClaude	2736	.badge {
2ce1d0bClaude	2737	display: inline-flex;
	2738	align-items: center;
	2739	gap: 4px;
	2740	padding: 2px 9px;
	2741	border-radius: var(--r-full);
	2742	font-size: var(--t-xs);
fc1817aClaude	2743	font-weight: 500;
	2744	background: var(--bg-tertiary);
	2745	border: 1px solid var(--border);
	2746	color: var(--text-muted);
2ce1d0bClaude	2747	line-height: 1.5;
fc1817aClaude	2748	}
	2749
2ce1d0bClaude	2750	/* ============================================================ */
	2751	/* Branch dropdown */
	2752	/* ============================================================ */
fc1817aClaude	2753	.branch-selector {
	2754	display: inline-flex;
	2755	align-items: center;
2ce1d0bClaude	2756	gap: 6px;
	2757	padding: 6px 12px;
	2758	background: var(--bg-elevated);
fc1817aClaude	2759	border: 1px solid var(--border);
2ce1d0bClaude	2760	border-radius: var(--r-sm);
	2761	font-size: var(--t-sm);
fc1817aClaude	2762	color: var(--text);
	2763	margin-bottom: 12px;
2ce1d0bClaude	2764	transition: border-color var(--t-fast) var(--ease);
fc1817aClaude	2765	}
2ce1d0bClaude	2766	.branch-selector:hover { border-color: var(--border-strong); }
fc1817aClaude	2767
06d5ffeClaude	2768	.branch-dropdown {
	2769	position: relative;
	2770	display: inline-block;
	2771	margin-bottom: 12px;
	2772	}
	2773	.branch-dropdown-content {
	2774	display: none;
	2775	position: absolute;
2ce1d0bClaude	2776	top: calc(100% + 4px);
06d5ffeClaude	2777	left: 0;
	2778	z-index: 10;
2ce1d0bClaude	2779	min-width: 220px;
	2780	background: var(--bg-elevated);
	2781	border: 1px solid var(--border-strong);
	2782	border-radius: var(--r-md);
	2783	overflow: hidden;
	2784	box-shadow: var(--elev-3);
06d5ffeClaude	2785	}
	2786	.branch-dropdown:hover .branch-dropdown-content,
	2787	.branch-dropdown:focus-within .branch-dropdown-content { display: block; }
	2788	.branch-dropdown-content a {
	2789	display: block;
2ce1d0bClaude	2790	padding: 9px 14px;
	2791	font-size: var(--t-sm);
06d5ffeClaude	2792	color: var(--text);
	2793	border-bottom: 1px solid var(--border);
2ce1d0bClaude	2794	transition: background var(--t-fast) var(--ease);
06d5ffeClaude	2795	}
	2796	.branch-dropdown-content a:last-child { border-bottom: none; }
2ce1d0bClaude	2797	.branch-dropdown-content a:hover { background: var(--bg-hover); text-decoration: none; }
	2798	.branch-dropdown-content a.active-branch { color: var(--text-link); font-weight: 600; background: var(--accent-gradient-faint); }
06d5ffeClaude	2799
2ce1d0bClaude	2800	/* ============================================================ */
	2801	/* Card grid */
	2802	/* ============================================================ */
	2803	.card-grid {
	2804	display: grid;
	2805	grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
	2806	gap: 16px;
	2807	}
fc1817aClaude	2808	.card {
	2809	border: 1px solid var(--border);
2ce1d0bClaude	2810	border-radius: var(--r-md);
958d26aClaude	2811	padding: 20px;
2ce1d0bClaude	2812	background: var(--bg-elevated);
	2813	transition:
958d26aClaude	2814	border-color var(--t-base) var(--ease),
	2815	transform var(--t-base) var(--ease-out-quart),
2ce1d0bClaude	2816	box-shadow var(--t-base) var(--ease);
	2817	position: relative;
	2818	overflow: hidden;
958d26aClaude	2819	isolation: isolate;
	2820	}
2ce1d0bClaude	2821	.card:hover {
	2822	border-color: var(--border-strong);
	2823	box-shadow: var(--elev-2);
958d26aClaude	2824	transform: translateY(-2px);
2ce1d0bClaude	2825	}
958d26aClaude	2826	.card h3 { font-size: var(--t-md); margin-bottom: 6px; letter-spacing: -0.012em; }
2ce1d0bClaude	2827	.card h3 a { color: var(--text); font-weight: 600; }
	2828	.card h3 a:hover { color: var(--text-link); }
	2829	.card p { font-size: var(--t-sm); color: var(--text-muted); line-height: 1.5; }
	2830	.card-meta {
	2831	display: flex;
	2832	gap: 14px;
	2833	margin-top: 14px;
	2834	padding-top: 14px;
	2835	border-top: 1px solid var(--border);
	2836	font-size: var(--t-xs);
	2837	color: var(--text-muted);
	2838	}
	2839	.card-meta span { display: flex; align-items: center; gap: 5px; }
	2840
	2841	/* ============================================================ */
	2842	/* Stat card / box */
	2843	/* ============================================================ */
	2844	.stat-card {
	2845	background: var(--bg-elevated);
	2846	border: 1px solid var(--border);
	2847	border-radius: var(--r-md);
fc1817aClaude	2848	padding: 16px;
2ce1d0bClaude	2849	transition: border-color var(--t-fast) var(--ease);
	2850	}
	2851	.stat-card:hover { border-color: var(--border-strong); }
	2852	.stat-label {
	2853	font-size: var(--t-xs);
	2854	color: var(--text-muted);
	2855	text-transform: uppercase;
	2856	letter-spacing: 0.06em;
	2857	font-weight: 500;
	2858	}
	2859	.stat-value {
	2860	font-size: var(--t-xl);
	2861	font-weight: 700;
	2862	margin-top: 4px;
	2863	letter-spacing: -0.025em;
	2864	color: var(--text);
	2865	font-feature-settings: 'tnum';
fc1817aClaude	2866	}
06d5ffeClaude	2867
2ce1d0bClaude	2868	/* ============================================================ */
	2869	/* Star button */
	2870	/* ============================================================ */
06d5ffeClaude	2871	.star-btn {
	2872	display: inline-flex;
	2873	align-items: center;
	2874	gap: 6px;
2ce1d0bClaude	2875	padding: 5px 12px;
	2876	background: var(--bg-elevated);
06d5ffeClaude	2877	border: 1px solid var(--border);
2ce1d0bClaude	2878	border-radius: var(--r-sm);
06d5ffeClaude	2879	color: var(--text);
2ce1d0bClaude	2880	font-size: var(--t-sm);
	2881	font-weight: 500;
06d5ffeClaude	2882	cursor: pointer;
2ce1d0bClaude	2883	transition: all var(--t-fast) var(--ease);
	2884	}
	2885	.star-btn:hover { background: var(--bg-surface); border-color: var(--border-strong); text-decoration: none; }
	2886	.star-btn.starred {
	2887	color: var(--yellow);
958d26aClaude	2888	border-color: rgba(251,191,36,0.4);
	2889	background: rgba(251,191,36,0.08);
06d5ffeClaude	2890	}
	2891
2ce1d0bClaude	2892	/* ============================================================ */
	2893	/* User profile */
	2894	/* ============================================================ */
06d5ffeClaude	2895	.user-profile {
	2896	display: flex;
	2897	gap: 32px;
	2898	margin-bottom: 32px;
2ce1d0bClaude	2899	padding: 24px;
	2900	background: var(--bg-elevated);
	2901	border: 1px solid var(--border);
	2902	border-radius: var(--r-lg);
06d5ffeClaude	2903	}
	2904	.user-avatar {
	2905	width: 96px;
	2906	height: 96px;
2ce1d0bClaude	2907	border-radius: var(--r-full);
	2908	background: var(--accent-gradient-soft);
	2909	border: 1px solid var(--border-strong);
06d5ffeClaude	2910	display: flex;
	2911	align-items: center;
	2912	justify-content: center;
2ce1d0bClaude	2913	font-size: 36px;
	2914	font-weight: 600;
	2915	color: var(--text);
06d5ffeClaude	2916	flex-shrink: 0;
2ce1d0bClaude	2917	letter-spacing: -0.02em;
06d5ffeClaude	2918	}
2ce1d0bClaude	2919	.user-info h2 { font-size: var(--t-xl); margin-bottom: 2px; letter-spacing: -0.025em; }
	2920	.user-info .username { font-size: var(--t-md); color: var(--text-muted); }
	2921	.user-info .bio { font-size: var(--t-sm); color: var(--text-muted); margin-top: 10px; line-height: 1.55; }
06d5ffeClaude	2922
2ce1d0bClaude	2923	/* ============================================================ */
	2924	/* New repo form */
	2925	/* ============================================================ */
	2926	.new-repo-form { max-width: 640px; }
	2927	.new-repo-form h2 { margin-bottom: 24px; font-size: var(--t-xl); letter-spacing: -0.025em; }
	2928	.visibility-options { display: flex; gap: 12px; margin-bottom: 20px; }
06d5ffeClaude	2929	.visibility-option {
	2930	flex: 1;
2ce1d0bClaude	2931	padding: 16px;
06d5ffeClaude	2932	border: 1px solid var(--border);
2ce1d0bClaude	2933	border-radius: var(--r-md);
	2934	background: var(--bg-elevated);
06d5ffeClaude	2935	cursor: pointer;
2ce1d0bClaude	2936	text-align: left;
	2937	transition: all var(--t-fast) var(--ease);
	2938	}
	2939	.visibility-option:hover { border-color: var(--border-strong); background: var(--bg-surface); }
	2940	.visibility-option:has(input:checked) {
	2941	border-color: var(--accent);
	2942	background: var(--accent-gradient-faint);
	2943	box-shadow: 0 0 0 1px var(--accent);
06d5ffeClaude	2944	}
	2945	.visibility-option input { display: none; }
2ce1d0bClaude	2946	.visibility-option .vis-label { font-size: var(--t-sm); font-weight: 600; margin-bottom: 4px; }
	2947	.visibility-option .vis-desc { font-size: var(--t-xs); color: var(--text-muted); }
79136bbClaude	2948
2ce1d0bClaude	2949	/* ============================================================ */
	2950	/* Issues */
	2951	/* ============================================================ */
	2952	.issue-tabs { display: flex; gap: 4px; }
	2953	.issue-tabs a {
	2954	color: var(--text-muted);
	2955	font-size: var(--t-sm);
	2956	font-weight: 500;
	2957	padding: 6px 12px;
	2958	border-radius: var(--r-sm);
	2959	transition: all var(--t-fast) var(--ease);
	2960	}
	2961	.issue-tabs a:hover { color: var(--text); background: var(--bg-hover); text-decoration: none; }
	2962	.issue-tabs a.active { color: var(--text); background: var(--bg-elevated); }
79136bbClaude	2963
2ce1d0bClaude	2964	.issue-list {
	2965	border: 1px solid var(--border);
	2966	border-radius: var(--r-md);
	2967	overflow: hidden;
	2968	background: var(--bg-elevated);
	2969	}
79136bbClaude	2970	.issue-item {
	2971	display: flex;
2ce1d0bClaude	2972	gap: 14px;
79136bbClaude	2973	align-items: flex-start;
2ce1d0bClaude	2974	padding: 14px 16px;
79136bbClaude	2975	border-bottom: 1px solid var(--border);
2ce1d0bClaude	2976	transition: background var(--t-fast) var(--ease);
79136bbClaude	2977	}
	2978	.issue-item:last-child { border-bottom: none; }
2ce1d0bClaude	2979	.issue-item:hover { background: var(--bg-hover); }
	2980	.issue-state-icon {
	2981	font-size: 14px;
	2982	padding-top: 2px;
	2983	width: 18px;
	2984	height: 18px;
	2985	display: inline-flex;
	2986	align-items: center;
	2987	justify-content: center;
	2988	border-radius: var(--r-full);
	2989	flex-shrink: 0;
	2990	}
79136bbClaude	2991	.state-open { color: var(--green); }
479dcd9Claude	2992	.state-closed { color: var(--text-link); }
2ce1d0bClaude	2993	.issue-title {
debcf27Claude	2994	font-family: var(--font-display);
	2995	font-size: var(--t-md);
2ce1d0bClaude	2996	font-weight: 600;
debcf27Claude	2997	line-height: 1.35;
	2998	letter-spacing: -0.012em;
	2999	}
	3000	.issue-title a { color: var(--text-strong); transition: color var(--t-fast) var(--ease); }
	3001	.issue-title a:hover { color: var(--accent); text-decoration: none; }
	3002	.issue-meta {
	3003	font-family: var(--font-mono);
	3004	font-size: 11px;
	3005	color: var(--text-muted);
	3006	margin-top: 5px;
	3007	letter-spacing: 0.01em;
2ce1d0bClaude	3008	}
79136bbClaude	3009
	3010	.issue-badge {
	3011	display: inline-flex;
	3012	align-items: center;
2ce1d0bClaude	3013	gap: 6px;
79136bbClaude	3014	padding: 4px 12px;
2ce1d0bClaude	3015	border-radius: var(--r-full);
	3016	font-size: var(--t-sm);
79136bbClaude	3017	font-weight: 500;
2ce1d0bClaude	3018	line-height: 1.4;
79136bbClaude	3019	}
958d26aClaude	3020	.badge-open { background: rgba(52,211,153,0.10); color: var(--green); border: 1px solid rgba(52,211,153,0.35); }
479dcd9Claude	3021	.badge-closed { background: rgba(154,168,239,0.10); color: var(--text-link); border: 1px solid rgba(154,168,239,0.35); }
	3022	.badge-merged { background: rgba(91,110,232,0.10); color: var(--accent); border: 1px solid rgba(91,110,232,0.35); }
2ce1d0bClaude	3023	.state-merged { color: var(--accent); }
479dcd9Claude	3024	.ai-review { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(91,110,232,0.3); }
79136bbClaude	3025
2ce1d0bClaude	3026	.issue-detail { max-width: 920px; }
79136bbClaude	3027	.issue-comment-box {
	3028	border: 1px solid var(--border);
2ce1d0bClaude	3029	border-radius: var(--r-md);
79136bbClaude	3030	margin-bottom: 16px;
	3031	overflow: hidden;
2ce1d0bClaude	3032	background: var(--bg-elevated);
79136bbClaude	3033	}
	3034	.comment-header {
	3035	background: var(--bg-secondary);
2ce1d0bClaude	3036	padding: 10px 16px;
79136bbClaude	3037	border-bottom: 1px solid var(--border);
2ce1d0bClaude	3038	font-size: var(--t-sm);
79136bbClaude	3039	color: var(--text-muted);
	3040	}
	3041
2ce1d0bClaude	3042	/* ============================================================ */
	3043	/* Panel — flexible container used across many pages */
	3044	/* ============================================================ */
	3045	.panel {
	3046	background: var(--bg-elevated);
	3047	border: 1px solid var(--border);
	3048	border-radius: var(--r-md);
	3049	overflow: hidden;
	3050	}
	3051	.panel-item {
	3052	display: flex;
	3053	align-items: center;
	3054	gap: 12px;
	3055	padding: 12px 16px;
79136bbClaude	3056	border-bottom: 1px solid var(--border);
2ce1d0bClaude	3057	transition: background var(--t-fast) var(--ease);
	3058	}
	3059	.panel-item:last-child { border-bottom: none; }
	3060	.panel-item:hover { background: var(--bg-hover); }
5882af3Claude	3061
	3062	/* ─── j/k keyboard list navigation ─── */
	3063	.is-kbd-focus {
479dcd9Claude	3064	outline: 2px solid rgba(91,110,232,0.6) !important;
5882af3Claude	3065	outline-offset: -2px;
479dcd9Claude	3066	background: rgba(91,110,232,0.06) !important;
5882af3Claude	3067	border-radius: 4px;
	3068	}
	3069	.is-kbd-selected {
	3070	outline: 2px solid rgba(52,211,153,0.6) !important;
	3071	background: rgba(52,211,153,0.06) !important;
	3072	}
2ce1d0bClaude	3073	.panel-empty {
	3074	padding: 24px;
	3075	text-align: center;
79136bbClaude	3076	color: var(--text-muted);
2ce1d0bClaude	3077	font-size: var(--t-sm);
79136bbClaude	3078	}
	3079
2ce1d0bClaude	3080	/* ============================================================ */
	3081	/* Search */
	3082	/* ============================================================ */
79136bbClaude	3083	.search-results .diff-file { margin-bottom: 12px; }
16b325cClaude	3084
2ce1d0bClaude	3085	/* ============================================================ */
	3086	/* Timeline */
	3087	/* ============================================================ */
	3088	.timeline { position: relative; padding-left: 28px; }
16b325cClaude	3089	.timeline::before {
	3090	content: '';
	3091	position: absolute;
	3092	left: 4px;
	3093	top: 8px;
	3094	bottom: 8px;
	3095	width: 2px;
2ce1d0bClaude	3096	background: linear-gradient(180deg, var(--border) 0%, transparent 100%);
16b325cClaude	3097	}
2ce1d0bClaude	3098	.timeline-item { position: relative; padding-bottom: 16px; }
16b325cClaude	3099	.timeline-dot {
	3100	position: absolute;
2ce1d0bClaude	3101	left: -28px;
	3102	top: 8px;
	3103	width: 12px;
	3104	height: 12px;
	3105	border-radius: var(--r-full);
64aa989Claude	3106	background: var(--accent);
16b325cClaude	3107	border: 2px solid var(--bg);
2ce1d0bClaude	3108	box-shadow: 0 0 0 1px var(--border-strong);
16b325cClaude	3109	}
	3110	.timeline-content {
2ce1d0bClaude	3111	background: var(--bg-elevated);
16b325cClaude	3112	border: 1px solid var(--border);
2ce1d0bClaude	3113	border-radius: var(--r-md);
	3114	padding: 14px 16px;
16b325cClaude	3115	}
f1ab587Claude	3116
2ce1d0bClaude	3117	/* ============================================================ */
	3118	/* Toggle switch */
	3119	/* ============================================================ */
f1ab587Claude	3120	.toggle-switch {
	3121	position: relative;
	3122	display: inline-block;
2ce1d0bClaude	3123	width: 40px;
	3124	height: 22px;
f1ab587Claude	3125	flex-shrink: 0;
	3126	margin-left: 16px;
	3127	}
	3128	.toggle-switch input { opacity: 0; width: 0; height: 0; }
	3129	.toggle-slider {
	3130	position: absolute;
	3131	cursor: pointer;
	3132	top: 0; left: 0; right: 0; bottom: 0;
	3133	background: var(--bg-tertiary);
	3134	border: 1px solid var(--border);
2ce1d0bClaude	3135	border-radius: var(--r-full);
	3136	transition: all var(--t-base) var(--ease);
f1ab587Claude	3137	}
	3138	.toggle-slider::before {
	3139	content: '';
	3140	position: absolute;
2ce1d0bClaude	3141	height: 16px;
	3142	width: 16px;
f1ab587Claude	3143	left: 2px;
	3144	bottom: 2px;
	3145	background: var(--text-muted);
2ce1d0bClaude	3146	border-radius: var(--r-full);
	3147	transition: all var(--t-base) var(--ease);
f1ab587Claude	3148	}
	3149	.toggle-switch input:checked + .toggle-slider {
64aa989Claude	3150	background: var(--accent);
2ce1d0bClaude	3151	border-color: transparent;
479dcd9Claude	3152	box-shadow: 0 0 0 1px rgba(91,110,232,0.4);
f1ab587Claude	3153	}
	3154	.toggle-switch input:checked + .toggle-slider::before {
2ce1d0bClaude	3155	transform: translateX(18px);
f1ab587Claude	3156	background: #fff;
	3157	}
ef8d378Claude	3158
	3159	/* ============================================================
	3160	* 2026 polish layer (purely additive — no layout changes).
	3161	* Improves typography rendering, focus states, hover affordances,
	3162	* and adds the gradient brand cue to primary buttons. Anything
	3163	* that could alter dimensions stays in the rules above.
	3164	* ============================================================ */
	3165	html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
	3166	body { letter-spacing: -0.005em; font-feature-settings: 'cv11', 'ss01', 'ss03'; }
479dcd9Claude	3167	*::selection { background: rgba(91,110,232,0.30); color: var(--text); }
ef8d378Claude	3168
	3169	h1, h2, h3, h4 { letter-spacing: -0.018em; }
	3170	h1 { letter-spacing: -0.025em; }
	3171
	3172	/* Smoother colour transitions everywhere links live */
	3173	a { transition: color 120ms cubic-bezier(0.16,1,0.3,1); }
	3174
	3175	/* Buttons: focus rings + smoother transitions; primary gets the gradient */
	3176	.btn {
	3177	transition:
	3178	background 120ms cubic-bezier(0.16,1,0.3,1),
	3179	border-color 120ms cubic-bezier(0.16,1,0.3,1),
	3180	transform 120ms cubic-bezier(0.16,1,0.3,1),
	3181	box-shadow 120ms cubic-bezier(0.16,1,0.3,1);
	3182	}
	3183	.btn:active { transform: translateY(0.5px); }
	3184	.btn:focus-visible {
	3185	outline: none;
479dcd9Claude	3186	box-shadow: var(--ring);
ef8d378Claude	3187	}
	3188	.btn-primary {
479dcd9Claude	3189	background: var(--accent);
ef8d378Claude	3190	border-color: transparent;
	3191	box-shadow:
479dcd9Claude	3192	inset 0 1px 0 rgba(255,255,255,0.12),
	3193	0 1px 2px rgba(0,0,0,0.25);
ef8d378Claude	3194	}
	3195	.btn-primary:hover {
479dcd9Claude	3196	background: var(--accent-hover);
ef8d378Claude	3197	filter: none;
	3198	box-shadow:
479dcd9Claude	3199	inset 0 1px 0 rgba(255,255,255,0.15),
	3200	0 4px 12px rgba(0,0,0,0.25);
ef8d378Claude	3201	}
	3202
	3203	/* Inputs: cleaner focus ring + hover */
	3204	.form-group input:hover,
	3205	.form-group textarea:hover,
	3206	.form-group select:hover {
	3207	border-color: rgba(255,255,255,0.14);
	3208	}
	3209	.form-group input:focus,
	3210	.form-group textarea:focus,
	3211	.form-group select:focus {
479dcd9Claude	3212	border-color: var(--border-focus);
	3213	box-shadow: var(--ring);
ef8d378Claude	3214	}
	3215	:root[data-theme='light'] .form-group input:hover,
	3216	:root[data-theme='light'] .form-group textarea:hover,
	3217	:root[data-theme='light'] .form-group select:hover {
	3218	border-color: rgba(0,0,0,0.18);
	3219	}
	3220
	3221	/* Cards: subtle hover lift */
	3222	.card {
	3223	transition:
	3224	border-color 160ms cubic-bezier(0.16,1,0.3,1),
	3225	transform 160ms cubic-bezier(0.16,1,0.3,1),
	3226	box-shadow 200ms cubic-bezier(0.16,1,0.3,1);
	3227	}
	3228	.card:hover {
	3229	border-color: rgba(255,255,255,0.18);
	3230	transform: translateY(-1px);
	3231	box-shadow: 0 8px 24px rgba(0,0,0,0.30);
	3232	}
	3233	:root[data-theme='light'] .card:hover {
	3234	border-color: rgba(0,0,0,0.18);
	3235	box-shadow: 0 8px 24px rgba(0,0,0,0.08);
	3236	}
	3237
	3238	/* Issue / commit / panel rows: smoother hover */
	3239	.issue-item, .commit-item {
	3240	transition: background 120ms cubic-bezier(0.16,1,0.3,1);
	3241	}
	3242	.repo-nav a {
	3243	transition: color 120ms cubic-bezier(0.16,1,0.3,1),
	3244	border-bottom-color 120ms cubic-bezier(0.16,1,0.3,1);
	3245	}
	3246	.nav-link {
	3247	transition: color 120ms cubic-bezier(0.16,1,0.3,1);
	3248	}
	3249
	3250	/* Auth card: subtle elevation so register/login feel premium */
	3251	.auth-container {
	3252	background: var(--bg-secondary);
	3253	border: 1px solid var(--border);
	3254	border-radius: var(--r-lg, 12px);
	3255	padding: 32px;
	3256	box-shadow: 0 4px 16px rgba(0,0,0,0.30), 0 0 0 1px var(--border);
	3257	}
	3258	:root[data-theme='light'] .auth-container {
	3259	box-shadow: 0 4px 16px rgba(0,0,0,0.06), 0 0 0 1px var(--border);
	3260	}
	3261	.auth-container h2 { letter-spacing: -0.025em; }
	3262
	3263	/* Empty state: dashed border, generous padding */
	3264	.empty-state {
	3265	border: 1px dashed var(--border);
	3266	border-radius: var(--r-lg, 12px);
	3267	background: var(--bg);
	3268	}
	3269
	3270	/* Badges + commit-sha: smoother transition */
	3271	.commit-sha, .badge { transition: all 120ms cubic-bezier(0.16,1,0.3,1); }
	3272
8cfb00eClaude	3273	/* Gradient text utility — kept for back-compat, renders as plain accent color. */
ef8d378Claude	3274	.gradient-text {
8cfb00eClaude	3275	color: var(--accent);
ef8d378Claude	3276	}
	3277
	3278	/* Custom scrollbars (subtle, themed) */
	3279	::-webkit-scrollbar { width: 10px; height: 10px; }
	3280	::-webkit-scrollbar-track { background: transparent; }
	3281	::-webkit-scrollbar-thumb {
	3282	background: rgba(255,255,255,0.06);
	3283	border: 2px solid var(--bg);
	3284	border-radius: 9999px;
	3285	}
	3286	::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.14); }
	3287	:root[data-theme='light'] ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.10); }
	3288	:root[data-theme='light'] ::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.18); }
	3289
	3290	/* Honour reduced-motion preference */
	3291	@media (prefers-reduced-motion: reduce) {
	3292	, ::before, *::after {
	3293	animation-duration: 0.01ms !important;
	3294	animation-iteration-count: 1 !important;
	3295	transition-duration: 0.01ms !important;
	3296	}
	3297	}
c63b860Claude	3298
	3299	/* Block O3 — visual coherence additive rules. */
	3300	.card.card-p-none { padding: 0; }
	3301	.card.card-p-sm { padding: var(--space-3); }
	3302	.card.card-p-md { padding: var(--space-4); }
	3303	.card.card-p-lg { padding: var(--space-6); }
	3304	.card.card-elevated { box-shadow: var(--elev-2); }
	3305	.card.card-gradient {
64aa989Claude	3306	background: var(--bg-elevated);
c63b860Claude	3307	}
	3308	.card.card-gradient::before { opacity: 1; }
	3309	.notice {
	3310	padding: var(--space-3) var(--space-4);
	3311	border-radius: var(--radius-md);
	3312	border: 1px solid var(--border);
	3313	background: var(--bg-elevated);
	3314	color: var(--text);
	3315	font-size: var(--font-size-sm);
	3316	margin-bottom: var(--space-6);
	3317	line-height: var(--leading-normal);
	3318	}
	3319	.notice-info { border-color: rgba(96,165,250,0.40); background: rgba(96,165,250,0.08); color: var(--text); }
	3320	.notice-success { border-color: var(--green); background: rgba(52,211,153,0.08); color: var(--text); }
	3321	.notice-warn { border-color: var(--yellow); background: rgba(251,191,36,0.10); color: var(--yellow); }
	3322	.notice-error { border-color: var(--red); background: rgba(248,113,113,0.10); color: var(--red); }
479dcd9Claude	3323	.notice-accent { border-color: var(--accent); background: rgba(91,110,232,0.10); color: var(--text); }
c63b860Claude	3324	.email-preview {
	3325	padding: var(--space-5);
	3326	background: #fff;
	3327	color: #111;
	3328	border-radius: var(--radius-md);
	3329	}
	3330	.code-block {
	3331	margin: var(--space-2) 0 0;
	3332	padding: var(--space-3);
	3333	background: var(--bg-tertiary);
	3334	border: 1px solid var(--border-subtle);
	3335	border-radius: var(--radius-sm);
	3336	font-family: var(--font-mono);
	3337	font-size: var(--font-size-xs);
	3338	line-height: var(--leading-normal);
	3339	overflow-x: auto;
	3340	}
	3341	.status-pill-operational {
	3342	display: inline-flex;
	3343	align-items: center;
	3344	padding: var(--space-1) var(--space-3);
	3345	border-radius: var(--radius-full);
	3346	font-size: var(--font-size-xs);
	3347	font-weight: 600;
	3348	background: rgba(52,211,153,0.15);
	3349	color: var(--green);
	3350	}
	3351	.api-tag {
	3352	display: inline-flex;
	3353	align-items: center;
	3354	font-size: var(--font-size-xs);
	3355	padding: 2px var(--space-2);
	3356	border-radius: var(--radius-sm);
	3357	font-family: var(--font-mono);
	3358	}
	3359	.api-tag-auth { background: rgba(96,165,250,0.15); color: var(--accent); }
	3360	.api-tag-scope { background: rgba(52,211,153,0.15); color: var(--green); }
	3361	.stat-number {
	3362	font-size: var(--font-size-xl);
	3363	font-weight: 700;
	3364	color: var(--text-strong);
	3365	line-height: var(--leading-tight);
	3366	}
	3367	.stat-number-accent { color: var(--accent); }
	3368	.stat-number-blue { color: var(--blue); }
	3369	.stat-number-purple { color: var(--text-link); }
	3370	footer .footer-tag-sub {
	3371	margin-top: var(--space-2);
	3372	font-size: var(--font-size-xs);
	3373	color: var(--text-faint);
	3374	line-height: var(--leading-normal);
	3375	}
	3376	footer .footer-version-pill {
	3377	display: inline-flex;
	3378	align-items: center;
	3379	gap: var(--space-2);
	3380	padding: var(--space-1) var(--space-3);
	3381	border-radius: var(--radius-full);
	3382	border: 1px solid var(--border);
	3383	background: var(--bg-elevated);
	3384	color: var(--text-faint);
	3385	font-family: var(--font-mono);
	3386	font-size: var(--font-size-xs);
	3387	cursor: help;
	3388	}
	3389	footer .footer-banner {
	3390	max-width: 1240px;
	3391	margin: var(--space-6) auto 0;
	3392	padding: var(--space-3) var(--space-4);
	3393	border-radius: var(--radius-md);
	3394	border: 1px solid var(--border);
	3395	background: var(--bg-elevated);
	3396	color: var(--text);
	3397	font-family: var(--font-mono);
	3398	font-size: var(--font-size-xs);
	3399	letter-spacing: 0.04em;
	3400	text-transform: uppercase;
	3401	text-align: center;
	3402	}
	3403	footer .footer-banner-info { border-color: rgba(96,165,250,0.40); color: var(--blue); }
	3404	footer .footer-banner-warn { border-color: rgba(251,191,36,0.40); color: var(--yellow); }
	3405	footer .footer-banner-error { border-color: rgba(248,113,113,0.45); color: var(--red); }
dc26881CC LABS App	3406
cf9178bTest User	3407	/* ============================================================ */
	3408	/* Global toast notifications. */
	3409	/* Slide-in from right, auto-dismiss, ARIA-live for SR users. */
	3410	/* ============================================================ */
	3411	.gx-toast {
	3412	pointer-events: auto;
	3413	display: inline-flex;
	3414	align-items: flex-start;
	3415	gap: 10px;
	3416	min-width: 280px;
	3417	max-width: min(440px, calc(100vw - 32px));
	3418	padding: 12px 14px 12px 12px;
	3419	background: var(--bg-elevated);
	3420	border: 1px solid var(--border);
	3421	border-radius: 10px;
	3422	box-shadow:
	3423	0 12px 36px -10px rgba(15,16,28,0.18),
	3424	0 2px 6px rgba(15,16,28,0.04),
	3425	0 0 0 1px rgba(15,16,28,0.02);
	3426	color: var(--text);
	3427	font-size: 13.5px;
	3428	line-height: 1.45;
	3429	opacity: 0;
	3430	transform: translateX(16px);
	3431	transition:
	3432	opacity 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
	3433	transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
	3434	}
	3435	.gx-toast--in { opacity: 1; transform: translateX(0); }
	3436	.gx-toast--out { opacity: 0; transform: translateX(16px); }
	3437	.gx-toast__icon {
	3438	flex-shrink: 0;
	3439	width: 20px; height: 20px;
	3440	border-radius: 50%;
	3441	display: inline-flex;
	3442	align-items: center;
	3443	justify-content: center;
	3444	font-size: 12px;
	3445	font-weight: 700;
	3446	line-height: 1;
	3447	margin-top: 1px;
	3448	}
	3449	.gx-toast__text { flex: 1 1 auto; min-width: 0; padding-top: 2px; word-wrap: break-word; }
	3450	.gx-toast__close {
	3451	flex-shrink: 0;
	3452	width: 22px; height: 22px;
	3453	border: 0;
	3454	background: transparent;
	3455	color: var(--text-muted);
	3456	font-size: 18px;
	3457	line-height: 1;
	3458	cursor: pointer;
	3459	border-radius: 4px;
	3460	padding: 0;
	3461	margin: -2px -2px 0 0;
	3462	transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
	3463	}
	3464	.gx-toast__close:hover { background: var(--bg-hover); color: var(--text); }
	3465	.gx-toast--success .gx-toast__icon { background: rgba(5,150,105,0.14); color: var(--green); }
	3466	.gx-toast--error .gx-toast__icon { background: rgba(220,38,38,0.14); color: var(--red); }
	3467	.gx-toast--warn .gx-toast__icon { background: rgba(217,119,6,0.16); color: var(--yellow); }
479dcd9Claude	3468	.gx-toast--info .gx-toast__icon { background: rgba(91,110,232,0.14); color: var(--accent); }
cf9178bTest User	3469	@media (prefers-reduced-motion: reduce) {
	3470	.gx-toast { transition: opacity 60ms linear; transform: none; }
	3471	.gx-toast--in, .gx-toast--out { transform: none; }
	3472	}
	3473
dc26881CC LABS App	3474	/* ============================================================ */
	3475	/* Block U4 — cross-document view transitions. */
	3476	/* Chrome 126+, Edge, Safari 18.2+ get a soft 200ms fade on */
	3477	/* every same-origin navigation. Older browsers ignore these */
	3478	/* rules entirely — no JS shim, no breakage. */
	3479	/* prefers-reduced-motion disables the animation honourably. */
	3480	/* ============================================================ */
	3481	@view-transition {
	3482	navigation: auto;
	3483	}
	3484	::view-transition-old(root),
	3485	::view-transition-new(root) {
	3486	animation-duration: 200ms;
	3487	animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
	3488	}
	3489	::view-transition-old(root) {
	3490	animation-name: vt-fade-out;
	3491	}
	3492	::view-transition-new(root) {
	3493	animation-name: vt-fade-in;
	3494	}
	3495	@keyframes vt-fade-out {
	3496	to { opacity: 0; }
	3497	}
	3498	@keyframes vt-fade-in {
	3499	from { opacity: 0; }
	3500	}
	3501	@media (prefers-reduced-motion: reduce) {
	3502	::view-transition-old(root),
	3503	::view-transition-new(root) {
	3504	animation-duration: 0s;
	3505	}
	3506	}
	3507	/* The transition system picks up its root subject from this rule. */
	3508	body {
	3509	view-transition-name: root;
	3510	}
fc1817aClaude	3511	`;