availsync 0.1.0

package/frontend/app/docs/quickstart/page.tsx

@@ -0,0 +1,318 @@
+import type { Metadata } from 'next';
+import { SiteHeader } from '@/components/marketing/SiteHeader';
+import { SiteFooter } from '@/components/marketing/SiteFooter';
+import { JsonLd } from '@/components/seo/JsonLd';
+import {
+  automationGuardrailSnippets,
+  claudeCursorSnippet,
+  codexMultiAgentMcpSnippet,
+  codexMcpSetupSnippet,
+  codexPromptSnippet,
+  mcpEnvSnippet,
+  nodeSdkSnippets,
+  openClawSetupSnippet,
+  openClawSkillSnippet,
+  quickstartUseCases,
+  schedulingSnippets,
+  serverCronSnippet,
+  workGuardrailSnippets,
+} from '@/lib/setupGuides';
+import { quickstartPageSchema } from '@/lib/seo';
+
+export const metadata: Metadata = {
+  title: 'Quickstart',
+  description:
+    'Connect Codex, Claude, Cursor, MCP, cron jobs, or server automations to Availsync with repo work-claim guardrails.',
+  alternates: {
+    canonical: '/docs/quickstart',
+  },
+};
+
+const guideInput = {
+  appUrl: 'https://availsync.dev',
+  agentId: 'AGENT_ID',
+  resourceKey: 'owner/repo',
+};
+
+const productionFlow = [
+  'Run the dashboard setup test from Agent Connect.',
+  'For a no-risk pilot, switch the agent to Observe before connecting real automations.',
+  'Use repo-level scope by default: resource_type=repo and resource_key=owner/repo.',
+  'Copy MCP or REST config for the selected agent.',
+  'Connect the real MCP client or server-side agent.',
+  'Verify real heartbeat and runtime calls in Activity.',
+  'Use run/start, run/extend, and run/finish for scheduled automations, or MCP tools for interactive agent clients.',
+];
+
+const snippets = [
+  mcpEnvSnippet(guideInput),
+  codexMcpSetupSnippet(guideInput),
+  codexMultiAgentMcpSnippet(guideInput),
+  ...automationGuardrailSnippets(guideInput),
+  openClawSkillSnippet(guideInput),
+  openClawSetupSnippet(guideInput),
+  ...workGuardrailSnippets(guideInput),
+  ...schedulingSnippets(guideInput),
+  claudeCursorSnippet(guideInput),
+  codexPromptSnippet(guideInput),
+  serverCronSnippet(guideInput),
+];
+
+const sdkSnippets = nodeSdkSnippets(guideInput);
+const pythonSnippet = `import os
+import requests
+
+api_url = "https://availsync.dev"
+api_key = os.environ["AVAILSYNC_API_KEY"]
+agent_id = os.environ["AVAILSYNC_AGENT_ID"]
+
+response = requests.post(
+    f"{api_url}/v1/work/run/start",
+    headers={
+        "Authorization": f"Bearer {api_key}",
+        "Idempotency-Key": "python-owner-repo-run-001",
+    },
+    json={
+        "agent_id": agent_id,
+        "resource_type": "repo",
+        "resource_key": "owner/repo",
+        "duration_minutes": 45,
+        "reason": "Python guarded automation",
+    },
+    timeout=10,
+)
+response.raise_for_status()
+started = response.json()
+
+if started["action"] == "skip_run":
+    print(started["reason"])
+    raise SystemExit(0)
+
+claim = started.get("claim")
+try:
+    # Run the Python automation here.
+    pass
+finally:
+    if claim:
+        requests.post(
+            f"{api_url}/v1/work/run/finish",
+            headers={"Authorization": f"Bearer {api_key}"},
+            json={"claim_id": claim["id"], "outcome": "finished"},
+            timeout=10,
+        ).raise_for_status()`;
+
+export default function QuickstartPage() {
+  return (
+    <>
+      <JsonLd data={quickstartPageSchema()} />
+      <SiteHeader />
+      <main className="min-h-screen bg-bg">
+        <section className="mx-auto max-w-5xl px-4 pb-20 pt-12">
+          <p className="text-label uppercase text-text-tertiary">Agent integration</p>
+          <h1 className="mt-3 text-5xl font-semibold text-text-primary">Quickstart</h1>
+          <p className="mt-5 max-w-3xl text-heading leading-7 text-text-secondary">
+            Use email and password for the dashboard. Use generated agent API keys only from
+            agents, coding tools, MCP servers, or server-side integrations. Availsync does not run
+            your agents; it is the coordination check they call before they claim repos, edit
+            projects, run automations, or book downstream systems.
+          </p>
+          <p className="mt-4 max-w-3xl text-body leading-6 text-text-primary">
+            Every integrated agent checks in before it acts.
+          </p>
+          <div className="mt-8 flex flex-wrap gap-3">
+            <a className="rounded bg-accent px-4 py-2 text-body font-medium text-white hover:bg-accent-hover" href="/signup">
+              Start free
+            </a>
+            <a className="rounded border border-border bg-surface-raised px-4 py-2 text-body font-medium text-text-primary hover:border-border-focus" href="/docs/sdk/node">
+              Read SDK docs
+            </a>
+            <a className="rounded border border-border bg-surface-raised px-4 py-2 text-body font-medium text-text-primary hover:border-border-focus" href="/docs/pilot">
+              Pilot in 10 minutes
+            </a>
+          </div>
+
+          <div className="mt-10 grid gap-4 lg:grid-cols-3">
+            {quickstartUseCases().map((useCase) => (
+              <div className="rounded border border-border bg-surface p-5" key={useCase.title}>
+                <h2 className="text-title font-semibold text-text-primary">{useCase.title}</h2>
+                <p className="mt-2 text-body leading-6 text-text-secondary">{useCase.body}</p>
+              </div>
+            ))}
+          </div>
+
+          <section className="mt-14 scroll-mt-24 rounded border border-border bg-surface p-5">
+            <p className="text-label uppercase text-text-tertiary">Production flow</p>
+            <h2 className="mt-2 text-3xl font-semibold text-text-primary">
+              Long-running coding agents
+            </h2>
+            <div className="mt-5 grid gap-3">
+              {productionFlow.map((item, index) => (
+                <div className="flex gap-3" key={item}>
+                  <div className="flex h-6 w-6 shrink-0 items-center justify-center rounded border border-border bg-bg text-label text-text-tertiary">
+                    {index + 1}
+                  </div>
+                  <p className="text-body leading-6 text-text-secondary">{item}</p>
+                </div>
+              ))}
+            </div>
+          </section>
+
+          <section className="mt-14 scroll-mt-24 rounded border border-border bg-surface p-5">
+            <p className="text-label uppercase text-text-tertiary">Resource scope</p>
+            <h2 className="mt-2 text-3xl font-semibold text-text-primary">
+              Start safe, then split only independent work
+            </h2>
+            <div className="mt-5 grid gap-4 md:grid-cols-2">
+              <div className="rounded border border-border bg-bg p-4">
+                <h3 className="text-heading font-semibold text-text-primary">Safe mode</h3>
+                <p className="mt-2 text-body leading-6 text-text-secondary">
+                  Use repo-level claims when agents may touch shared files or shared context.
+                </p>
+                <pre className="mt-3 overflow-auto rounded border border-border bg-surface p-3 text-sm text-text-secondary">
+                  <code>{`"resource_type": "repo",
+"resource_key": "owner/repo"`}</code>
+                </pre>
+              </div>
+              <div className="rounded border border-border bg-bg p-4">
+                <h3 className="text-heading font-semibold text-text-primary">Advanced mode</h3>
+                <p className="mt-2 text-body leading-6 text-text-secondary">
+                  Use project-level claims only when work streams are independent during the same run.
+                </p>
+                <pre className="mt-3 overflow-auto rounded border border-border bg-surface p-3 text-sm text-text-secondary">
+                  <code>{`"resource_type": "project",
+"resource_key": "homepage"`}</code>
+                </pre>
+              </div>
+            </div>
+            <p className="mt-4 text-body leading-6 text-text-tertiary">
+              Availsync blocks conflicts on the same resource. It does not yet infer that
+              project:homepage depends on project:product-catalog, so use repo-level scope when
+              stale context or shared files would be risky.
+            </p>
+          </section>
+
+          <section className="mt-14 scroll-mt-24">
+            <p className="text-label uppercase text-text-tertiary">Node SDK</p>
+            <h2 className="mt-2 text-3xl font-semibold text-text-primary">Use the SDK for pilot and production-like automations</h2>
+            <p className="mt-3 max-w-3xl text-body leading-6 text-text-secondary">
+              Install the public alpha with <code>npm install @availsync/node@alpha</code>. The SDK wraps run/start, run/extend, and run/finish so your coding agent can skip
+              cleanly when another agent owns the repo and always release the claim when work ends.
+            </p>
+            <div className="mt-6 grid gap-5">
+              {sdkSnippets.map((snippet) => (
+                <SnippetCard
+                  key={snippet.id}
+                  title={snippet.title}
+                  description={snippet.description}
+                  code={snippet.code}
+                />
+              ))}
+            </div>
+          </section>
+
+          <section className="mt-14 scroll-mt-24">
+            <p className="text-label uppercase text-text-tertiary">Python</p>
+            <h2 className="mt-2 text-3xl font-semibold text-text-primary">Use REST directly from Python</h2>
+            <p className="mt-3 max-w-3xl text-body leading-6 text-text-secondary">
+              A Python SDK is not published yet. For Airflow, Prefect, Dagster, FastAPI workers, or
+              cron scripts, call the run API directly and fail closed if Availsync is unavailable in
+              enforce mode.
+            </p>
+            <div className="mt-6">
+              <SnippetCard
+                title="Python guarded run"
+                description="Start a repo claim, skip cleanly when blocked, and finish the claim in finally."
+                code={pythonSnippet}
+              />
+            </div>
+          </section>
+
+          <section className="mt-14 scroll-mt-24 rounded border border-border bg-surface p-5">
+            <p className="text-label uppercase text-text-tertiary">Observe-only pilot</p>
+            <h2 className="mt-2 text-3xl font-semibold text-text-primary">
+              See what Availsync would block before enforcing it
+            </h2>
+            <div className="mt-5 grid gap-4 md:grid-cols-2">
+              <div className="rounded border border-border bg-bg p-4">
+                <h3 className="text-heading font-semibold text-text-primary">Enforce</h3>
+                <p className="mt-2 text-body leading-6 text-text-secondary">
+                  Availsync creates a lease and returns skip_run when another active claim owns the same repo or project.
+                </p>
+              </div>
+              <div className="rounded border border-border bg-bg p-4">
+                <h3 className="text-heading font-semibold text-text-primary">Observe</h3>
+                <p className="mt-2 text-body leading-6 text-text-secondary">
+                  Availsync lets the automation proceed, creates no lease, and records whether it would have blocked the run.
+                </p>
+              </div>
+            </div>
+            <p className="mt-4 text-body leading-6 text-text-tertiary">
+              Observe mode currently applies to the Node SDK, MCP work tools, and direct calls to <code>/v1/work/run/start</code>.
+              Use Observe for the first pilot week, then switch high-value agents to Enforce once the dashboard shows useful would-have-blocked signals.
+            </p>
+          </section>
+
+          <section className="mt-14 scroll-mt-24">
+            <p className="text-label uppercase text-text-tertiary">Copy-paste examples</p>
+            <h2 className="mt-2 text-3xl font-semibold text-text-primary">MCP and REST setup</h2>
+            <p className="mt-3 max-w-3xl text-body leading-6 text-text-secondary">
+              MCP clients should use the public package with <code>npx -y @availsync/mcp@alpha</code>.
+              You do not need to clone the Availsync repo or run the monorepo locally.
+            </p>
+            <div className="mt-6 grid gap-5">
+              {snippets.map((snippet) => (
+                <SnippetCard
+                  key={snippet.id}
+                  title={snippet.title}
+                  description={snippet.description}
+                  code={snippet.code}
+                />
+              ))}
+            </div>
+          </section>
+
+          <section className="mt-14 scroll-mt-24 border-l border-border pl-5">
+            <p className="text-label uppercase text-text-tertiary">Roadmap</p>
+            <h2 className="mt-2 text-heading font-medium text-text-primary">What comes next</h2>
+            <div className="mt-3 grid gap-3 text-body leading-6 text-text-secondary">
+              <p>
+                The current pilot path is the Node SDK, public MCP package, REST, or the OpenClaw SKILL.md workflow. These
+                work with Codex, Claude, Cursor, MCP clients, server jobs, scheduled automations, and scheduling agents.
+              </p>
+              <p>
+                Next priorities are the first shadow-mode pilot, plan-based data
+                retention, and a documented API version policy. Webhooks, Python SDK, team roles,
+                and a dedicated Codex plugin come after the core integration path is proven.
+              </p>
+            </div>
+          </section>
+        </section>
+      </main>
+      <SiteFooter />
+    </>
+  );
+}
+
+function SnippetCard({
+  title,
+  description,
+  code,
+}: {
+  title: string;
+  description: string;
+  code: string;
+}) {
+  return (
+    <div className="min-w-0 rounded border border-border bg-surface p-5">
+      <div className="max-w-3xl">
+        <h3 className="text-title font-semibold text-text-primary">{title}</h3>
+        <p className="mt-1 text-body leading-6 text-text-secondary">{description}</p>
+      </div>
+      <div className="mt-4 min-w-0 max-w-full overflow-hidden rounded border border-border bg-bg">
+        <pre className="max-h-[360px] max-w-full overflow-auto p-4 text-sm leading-6 text-text-secondary">
+          <code className="block min-w-0 whitespace-pre">{code}</code>
+        </pre>
+      </div>
+    </div>
+  );
+}

package/frontend/app/docs/reliability/page.tsx

@@ -0,0 +1,78 @@
+import type { Metadata } from 'next';
+import { SiteHeader } from '@/components/marketing/SiteHeader';
+import { SiteFooter } from '@/components/marketing/SiteFooter';
+import { JsonLd } from '@/components/seo/JsonLd';
+import { webPageSchema } from '@/lib/seo';
+
+export const metadata: Metadata = {
+  title: 'Reliability',
+  description:
+    'How Availsync handles unavailable guardrails, fail-open vs fail-closed behavior, work claim leases, and long-running agent runs.',
+  alternates: {
+    canonical: '/docs/reliability',
+  },
+};
+
+const sections = [
+  {
+    title: 'If Availsync is unavailable',
+    body:
+      'The SDK and MCP server surface the failure instead of pretending the resource is safe. In enforce mode, the recommended production policy is fail-closed: stop the agent run without editing files. In observe mode, teams may choose fail-open because observe-only runs do not create protective leases.',
+  },
+  {
+    title: 'If a run is blocked',
+    body:
+      'Blocked work runs return skip_run with a reason, retry_after, and the blocking claim summary. Scheduled jobs should exit successfully with the skip reason, not retry in a tight loop.',
+  },
+  {
+    title: 'If a lease expires',
+    body:
+      'Availsync treats expired claims as inactive after expires_at. Other agents can then claim the same resource. The original agent will not be stopped by Availsync automatically, so long-running jobs must watch expires_at, extend before expiry, or stop work before the lease elapses.',
+  },
+  {
+    title: 'If finish fails',
+    body:
+      'The Node SDK calls finish in finally when a real claim exists. If finish fails, the claim still expires at expires_at. Repeated finish calls are safe through the run API.',
+  },
+];
+
+export default function ReliabilityPage() {
+  return (
+    <>
+      <JsonLd data={webPageSchema('/docs/reliability', 'Availsync reliability', metadata.description as string)} />
+      <SiteHeader />
+      <main className="min-h-screen bg-bg">
+        <section className="mx-auto max-w-4xl px-4 py-16">
+          <p className="text-label uppercase text-text-tertiary">Reliability</p>
+          <h1 className="mt-3 text-5xl font-semibold text-text-primary">
+            Decide how agents behave when coordination is unavailable.
+          </h1>
+          <p className="mt-5 text-heading leading-7 text-text-secondary">
+            Availsync is a pre-flight coordination layer. It protects runs that call it before
+            acting, but it is not a proxy that can stop an unintegrated agent or a process that
+            ignores its lease.
+          </p>
+
+          <div className="mt-10 grid gap-4">
+            {sections.map((section) => (
+              <div className="rounded border border-border bg-surface p-5" key={section.title}>
+                <h2 className="text-heading font-semibold text-text-primary">{section.title}</h2>
+                <p className="mt-2 text-body leading-6 text-text-secondary">{section.body}</p>
+              </div>
+            ))}
+          </div>
+
+          <div className="mt-8 rounded border border-warning/40 bg-warning/10 p-5">
+            <h2 className="text-heading font-semibold text-text-primary">Recommended production default</h2>
+            <p className="mt-2 text-body leading-6 text-text-secondary">
+              Start pilots in Observe to measure risk. When you switch important repo/deploy agents
+              to Enforce, treat Availsync errors as fail-closed and stop the run before touching
+              files, deploying, or booking downstream systems.
+            </p>
+          </div>
+        </section>
+      </main>
+      <SiteFooter />
+    </>
+  );
+}

package/frontend/app/docs/sdk/node/page.tsx

@@ -0,0 +1,166 @@
+import type { Metadata } from 'next';
+import { SiteHeader } from '@/components/marketing/SiteHeader';
+import { SiteFooter } from '@/components/marketing/SiteFooter';
+import { JsonLd } from '@/components/seo/JsonLd';
+import { Button } from '@/components/ui/Button';
+import { nodeSdkSnippets } from '@/lib/setupGuides';
+import { sdkNodePageSchema } from '@/lib/seo';
+
+export const metadata: Metadata = {
+  title: 'Node SDK',
+  description:
+    'Use @availsync/node to guard coding-agent automations with repo claims, observe mode, skip_run, extend, and finish.',
+  alternates: {
+    canonical: '/docs/sdk/node',
+  },
+};
+
+const install = `npm install @availsync/node@alpha`;
+
+const env = `AVAILSYNC_API_KEY=avs_live_...
+AVAILSYNC_AGENT_ID=agent_uuid
+AVAILSYNC_API_URL=https://availsync.dev`;
+
+const apiReference = [
+  {
+    name: 'createAvailsyncClient({ apiKey, agentId, baseUrl? })',
+    body: 'Creates a Node 18+ client. The API key belongs to one agent and should only live in server, CI, MCP, or automation env vars.',
+  },
+  {
+    name: 'work.withClaim(resource, options, fn)',
+    body: 'Recommended helper. Starts a guarded run, runs your callback only when action is proceed, and finishes the claim in finally.',
+  },
+  {
+    name: 'work.start({ resource, durationMinutes?, reason?, idempotencyKey?, metadata? })',
+    body: 'Low-level start call for custom wrappers. Returns proceed, skip_run, or observe-mode proceed with shadow metadata.',
+  },
+  {
+    name: 'work.extend(claimId, { durationMinutes? })',
+    body: 'Extends an active lease when a long-running agent needs more time. Skip this when observe mode returns claim: null.',
+  },
+  {
+    name: 'work.finish(claimId, { outcome?, reason?, metadata? })',
+    body: 'Releases the claim after success, failure, or no-op. Repeated finish calls are safe through the run API.',
+  },
+];
+
+const responseNotes = [
+  ['proceed', 'The agent may run. In enforce mode this usually includes a claim that should be extended or finished.'],
+  ['skip_run', 'Another active claim owns the same resource. Exit cleanly and report the reason.'],
+  ['observe mode', 'The agent proceeds with claim: null. Availsync records whether it would have blocked the run.'],
+  ['AvailsyncError', 'Auth, validation, plan-limit, network, and unexpected API failures throw a typed error without exposing secrets.'],
+];
+
+export default function NodeSdkPage() {
+  const snippets = nodeSdkSnippets({
+    appUrl: 'https://availsync.dev',
+    agentId: 'AGENT_ID',
+    resourceKey: 'owner/repo',
+    durationMinutes: 45,
+  });
+
+  return (
+    <>
+      <JsonLd data={sdkNodePageSchema()} />
+      <SiteHeader />
+      <main className="min-h-screen bg-bg">
+        <section className="mx-auto max-w-5xl px-4 py-16">
+          <p className="text-label uppercase text-text-tertiary">Node SDK</p>
+          <h1 className="mt-3 max-w-4xl text-5xl font-semibold text-text-primary">
+            Guard coding-agent runs with one SDK call.
+          </h1>
+          <p className="mt-5 max-w-3xl text-heading leading-7 text-text-secondary">
+            Use <code>@availsync/node</code> before Codex, Claude, Cursor, MCP clients, cron jobs,
+            deploy scripts, or server automations touch a protected repo.
+          </p>
+          <div className="mt-8 flex flex-wrap gap-3">
+            <Button href="/signup">Start free</Button>
+            <Button href="/docs/pilot" variant="secondary">
+              Pilot in 10 minutes
+            </Button>
+          </div>
+
+          <section className="mt-12 grid gap-5 lg:grid-cols-[0.9fr_1.1fr]">
+            <DocCard title="Install" code={install} />
+            <DocCard title="Environment" code={env} />
+          </section>
+
+          <section className="mt-14">
+            <p className="text-label uppercase text-text-tertiary">Recommended helper</p>
+            <h2 className="mt-2 text-3xl font-semibold text-text-primary">Use withClaim first</h2>
+            <p className="mt-3 max-w-3xl text-body leading-6 text-text-secondary">
+              Default to repo-level resources. In enforce mode, blocked agents get <code>skip_run</code>.
+              Observe mode currently applies to the Node SDK, MCP work tools, and direct calls to <code>/v1/work/run/start</code>.
+              In observe mode, the callback still runs and receives shadow metadata.
+            </p>
+            <div className="mt-6 grid gap-5">
+              {snippets.map((snippet) => (
+                <Snippet key={snippet.id} title={snippet.title} description={snippet.description} code={snippet.code} />
+              ))}
+            </div>
+          </section>
+
+          <section className="mt-14 grid gap-5 lg:grid-cols-2">
+            <div>
+              <p className="text-label uppercase text-text-tertiary">API surface</p>
+              <h2 className="mt-2 text-3xl font-semibold text-text-primary">Methods</h2>
+              <div className="mt-5 space-y-3">
+                {apiReference.map((item) => (
+                  <div className="rounded border border-border bg-surface p-4" key={item.name}>
+                    <code className="font-mono text-sm text-text-primary">{item.name}</code>
+                    <p className="mt-2 text-body leading-6 text-text-secondary">{item.body}</p>
+                  </div>
+                ))}
+              </div>
+            </div>
+            <div>
+              <p className="text-label uppercase text-text-tertiary">Runtime outcomes</p>
+              <h2 className="mt-2 text-3xl font-semibold text-text-primary">What to handle</h2>
+              <div className="mt-5 space-y-3">
+                {responseNotes.map(([label, body]) => (
+                  <div className="rounded border border-border bg-surface p-4" key={label}>
+                    <code className="font-mono text-sm text-text-primary">{label}</code>
+                    <p className="mt-2 text-body leading-6 text-text-secondary">{body}</p>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </section>
+
+          <section className="mt-14 rounded border border-warning/40 bg-warning/10 p-5">
+            <h2 className="text-heading font-semibold text-text-primary">Alpha package note</h2>
+            <p className="mt-2 text-body leading-6 text-text-secondary">
+              The current public package is an alpha. Use <code>npm install @availsync/node@alpha</code>
+              in docs and pilots so the prerelease status is explicit, even if npm also resolves the
+              first package through its default tag.
+            </p>
+          </section>
+        </section>
+      </main>
+      <SiteFooter />
+    </>
+  );
+}
+
+function DocCard({ title, code }: { title: string; code: string }) {
+  return (
+    <div className="rounded border border-border bg-surface p-5">
+      <h2 className="text-heading font-semibold text-text-primary">{title}</h2>
+      <pre className="mt-4 overflow-auto rounded border border-border bg-bg p-4 text-sm leading-6 text-text-secondary">
+        <code>{code}</code>
+      </pre>
+    </div>
+  );
+}
+
+function Snippet({ title, description, code }: { title: string; description: string; code: string }) {
+  return (
+    <div className="rounded border border-border bg-surface p-5">
+      <h3 className="text-title font-semibold text-text-primary">{title}</h3>
+      <p className="mt-1 text-body leading-6 text-text-secondary">{description}</p>
+      <pre className="mt-4 max-h-[420px] overflow-auto rounded border border-border bg-bg p-4 text-sm leading-6 text-text-secondary">
+        <code>{code}</code>
+      </pre>
+    </div>
+  );
+}

package/frontend/app/globals.css

@@ -0,0 +1,57 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  color-scheme: dark;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  background: #0f0f0f;
+  color: #f2f2f2;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+button,
+input,
+select,
+textarea {
+  font: inherit;
+}
+
+/* Skeleton loading animation */
+@keyframes skeleton-shimmer {
+  0% { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
+}
+
+.skeleton {
+  background: linear-gradient(90deg, #1C1C1C 25%, #2A2A2A 50%, #1C1C1C 75%);
+  background-size: 200% 100%;
+  animation: skeleton-shimmer 1.5s ease-in-out infinite;
+  border-radius: 4px;
+}
+
+/* Dashboard dark scrollbar */
+.dark-scroll::-webkit-scrollbar {
+  width: 6px;
+}
+.dark-scroll::-webkit-scrollbar-track {
+  background: transparent;
+}
+.dark-scroll::-webkit-scrollbar-thumb {
+  background: #2A2A2A;
+  border-radius: 3px;
+}
+.dark-scroll::-webkit-scrollbar-thumb:hover {
+  background: #3D3D3D;
+}