feat: Sharp style, Tailwind+shadcn, dark navbar, nav restructure, Go/monorepo guidelines

Styling:
- Tailwind CSS v4 (preflight:false) integrated via PostCSS plugin
- shadcn/ui New York style with --radius:0 (sharp corners everywhere)
- Zero border-radius on ALL elements: buttons, code blocks, cards, admonitions, badges
- Navbar FORCE dark (#0a0a0a) in both light/dark modes via !important
- ThemeSynchronizer: bridges Docusaurus data-theme → shadcn .dark class
- Active sidebar item gets left border accent instead of rounded bg

React UI components (src/components/ui/index.tsx):
- Badge (6 variants: wip, stable, planned, success, warning, outline)
- Card + CardHeader + CardTitle + CardContent
- Callout (note/info/success/warning/danger) - sharp, left-border style
- PropertiesTable - monospace typed API reference tables
- StatusIndicator - operational/degraded/outage/maintenance

Navigation restructure:
- Introduction → Platform → Products → Engineering → Runbooks
- Old 'applications/' removed, moved to products/stock-market-pro/
- New Platform section: infrastructure overview + CI/CD pipeline docs
- New Engineering section: monorepo structure, Go stack, conventions
- New Runbooks section: incident severity, common procedures

Implementation guidelines (engineering/guidelines.md):
- Monorepo layout with go.work workspace
- Go as primary language (why + standard library table)
- Python as sidecar for data/ML workloads
- Code conventions: gofmt, error wrapping, logging, testing
- Git conventions: branch naming, conventional commits
- Makefile targets per app
- How to add a new application (step-by-step)

src/components/ui/index.tsx

@@ -0,0 +1,156 @@
+import * as React from 'react';
+import { cn } from '@site/src/lib/utils';
+
+/* ── Badge ───────────────────────────────────────────────── */
+type BadgeVariant = 'default' | 'secondary' | 'outline' | 'destructive' | 'success' | 'warning' | 'wip' | 'stable' | 'planned';
+
+interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+  variant?: BadgeVariant;
+}
+
+const badgeVariants: Record<BadgeVariant, string> = {
+  default:     'bg-primary text-primary-foreground',
+  secondary:   'bg-secondary text-secondary-foreground',
+  outline:     'border border-border text-foreground',
+  destructive: 'bg-destructive text-destructive-foreground',
+  success:     'border border-emerald-500 text-emerald-500 bg-emerald-500/8',
+  warning:     'border border-amber-500 text-amber-500 bg-amber-500/8',
+  wip:         'border border-amber-500 text-amber-500 bg-amber-500/8',
+  stable:      'border border-emerald-500 text-emerald-500 bg-emerald-500/8',
+  planned:     'border border-border text-muted-foreground',
+};
+
+export function Badge({ variant = 'default', className, children, ...props }: BadgeProps) {
+  return (
+    <span
+      className={cn(
+        'inline-flex items-center gap-1 text-[0.65rem] font-semibold uppercase tracking-widest px-2 py-0.5',
+        badgeVariants[variant],
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </span>
+  );
+}
+
+/* ── Card ────────────────────────────────────────────────── */
+export function Card({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn('border border-border bg-card text-card-foreground', className)}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function CardHeader({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn('flex flex-col gap-1.5 p-5', className)} {...props}>{children}</div>;
+}
+
+export function CardTitle({ className, children, ...props }: React.HTMLAttributes<HTMLHeadingElement>) {
+  return (
+    <h3 className={cn('text-base font-semibold tracking-tight leading-none', className)} {...props}>
+      {children}
+    </h3>
+  );
+}
+
+export function CardContent({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn('p-5 pt-0', className)} {...props}>{children}</div>;
+}
+
+/* ── Callout ─────────────────────────────────────────────── */
+type CalloutVariant = 'info' | 'warning' | 'danger' | 'success' | 'note';
+
+interface CalloutProps {
+  variant?: CalloutVariant;
+  title?: string;
+  children: React.ReactNode;
+  className?: string;
+}
+
+const calloutStyles: Record<CalloutVariant, { border: string; bg: string; title: string; icon: string }> = {
+  note:    { border: 'border-border',     bg: 'bg-muted/40',          title: 'text-foreground',    icon: '◆' },
+  info:    { border: 'border-indigo-500', bg: 'bg-indigo-500/8',      title: 'text-indigo-400',    icon: 'ℹ' },
+  success: { border: 'border-emerald-500',bg: 'bg-emerald-500/8',     title: 'text-emerald-400',   icon: '✓' },
+  warning: { border: 'border-amber-500',  bg: 'bg-amber-500/8',       title: 'text-amber-400',     icon: '⚠' },
+  danger:  { border: 'border-red-500',    bg: 'bg-red-500/8',         title: 'text-red-400',       icon: '✕' },
+};
+
+export function Callout({ variant = 'note', title, children, className }: CalloutProps) {
+  const s = calloutStyles[variant];
+  return (
+    <div className={cn('border-l-2 border px-4 py-3 my-4 text-sm', s.border, s.bg, className)}>
+      {title && (
+        <div className={cn('flex items-center gap-1.5 font-semibold uppercase tracking-widest text-[0.7rem] mb-2', s.title)}>
+          <span>{s.icon}</span>
+          {title}
+        </div>
+      )}
+      <div className="text-muted-foreground leading-relaxed">{children}</div>
+    </div>
+  );
+}
+
+/* ── PropertiesTable ─────────────────────────────────────── */
+interface Property {
+  name: string;
+  type: string;
+  default?: string;
+  description: string;
+}
+
+interface PropertiesTableProps {
+  properties: Property[];
+}
+
+export function PropertiesTable({ properties }: PropertiesTableProps) {
+  return (
+    <div className="not-prose my-4 border border-border overflow-hidden text-sm">
+      <table className="w-full border-collapse">
+        <thead>
+          <tr className="bg-muted border-b border-border">
+            <th className="text-left px-4 py-2.5 font-semibold text-[0.7rem] uppercase tracking-wider text-muted-foreground w-36">Name</th>
+            <th className="text-left px-4 py-2.5 font-semibold text-[0.7rem] uppercase tracking-wider text-muted-foreground w-36">Type</th>
+            <th className="text-left px-4 py-2.5 font-semibold text-[0.7rem] uppercase tracking-wider text-muted-foreground w-24">Default</th>
+            <th className="text-left px-4 py-2.5 font-semibold text-[0.7rem] uppercase tracking-wider text-muted-foreground">Description</th>
+          </tr>
+        </thead>
+        <tbody>
+          {properties.map((p, i) => (
+            <tr key={p.name} className={cn('border-b border-border last:border-0', i % 2 === 0 ? '' : 'bg-muted/30')}>
+              <td className="px-4 py-2.5 font-mono text-xs text-indigo-400">{p.name}</td>
+              <td className="px-4 py-2.5 font-mono text-xs text-amber-400">{p.type}</td>
+              <td className="px-4 py-2.5 font-mono text-xs text-muted-foreground">{p.default ?? '—'}</td>
+              <td className="px-4 py-2.5 text-muted-foreground text-xs leading-relaxed">{p.description}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+/* ── StatusIndicator ─────────────────────────────────────── */
+type Status = 'operational' | 'degraded' | 'outage' | 'maintenance';
+
+const statusConfig: Record<Status, { color: string; label: string }> = {
+  operational:  { color: 'bg-emerald-500', label: 'Operational' },
+  degraded:     { color: 'bg-amber-500',   label: 'Degraded' },
+  outage:       { color: 'bg-red-500',     label: 'Outage' },
+  maintenance:  { color: 'bg-indigo-500',  label: 'Maintenance' },
+};
+
+export function StatusIndicator({ status }: { status: Status }) {
+  const { color, label } = statusConfig[status];
+  return (
+    <span className="inline-flex items-center gap-2 text-xs text-muted-foreground">
+      <span className={cn('w-1.5 h-1.5 inline-block', color)} />
+      {label}
+    </span>
+  );
+}

src/css/custom.css

@@ -1,27 +1,74 @@
 /* ============================================================
-   SKIC Playground Docs — Modern Dark-First Technical Theme
-   Inspired by Vercel / Linear design language
-   Font: Geist (by Vercel) + Geist Mono
+   SKIC Playground Docs — Dark-first, Sharp, Technical Theme
+   Stack: Docusaurus + Tailwind (preflight off) + shadcn/ui (New York / Zinc)
+   Design: no rounded corners, Vercel/Linear aesthetic
    ============================================================ */
 
-/* --- Google Fonts / Geist import --- */
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 
-/* Geist via CDN */
+/* --- Fonts --- */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
 @import url('https://cdn.jsdelivr.net/npm/geist@1.3.0/dist/fonts/geist-sans/style.css');
 @import url('https://cdn.jsdelivr.net/npm/geist@1.3.0/dist/fonts/geist-mono/style.css');
 
-/* ── Design Tokens ───────────────────────────────────────── */
-:root {
-  /* Brand */
-  --skic-accent:        #6366f1;   /* indigo-500 */
-  --skic-accent-light:  #818cf8;   /* indigo-400 */
-  --skic-accent-dark:   #4f46e5;   /* indigo-600 */
-  --skic-green:         #10b981;
-  --skic-amber:         #f59e0b;
-  --skic-red:           #ef4444;
+/* ── shadcn/ui CSS variables (New York / Zinc, radius = 0) ── */
+@layer base {
+  :root {
+    --background:   0 0% 100%;
+    --foreground:   240 10% 3.9%;
+    --card:         0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+    --popover:      0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
+    --primary:      240 5.9% 10%;
+    --primary-foreground: 0 0% 98%;
+    --secondary:    240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+    --muted:        240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+    --accent:       240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+    --destructive:  0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border:       240 5.9% 90%;
+    --input:        240 5.9% 90%;
+    --ring:         240 5.9% 10%;
+    --radius:       0rem;    /* SHARP — no rounded corners */
+    /* brand accent */
+    --skic-accent:  239 84% 67%;
+    --skic-green:   160 84% 39%;
+    --skic-amber:   38 92% 50%;
+    --skic-red:     0 84% 60%;
+  }
 
-  /* Docusaurus overrides — Light mode */
+  .dark {
+    --background:   240 10% 3.9%;
+    --foreground:   0 0% 98%;
+    --card:         240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover:      240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary:      0 0% 98%;
+    --primary-foreground: 240 5.9% 10%;
+    --secondary:    240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted:        240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+    --accent:       240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive:  0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border:       240 3.7% 15.9%;
+    --input:        240 3.7% 15.9%;
+    --ring:         240 4.9% 83.9%;
+    --radius:       0rem;
+  }
+}
+
+/* ── Docusaurus / Infima token overrides ─────────────────── */
+:root {
   --ifm-color-primary:          #6366f1;
   --ifm-color-primary-dark:     #4f46e5;
   --ifm-color-primary-darker:   #4338ca;
@@ -34,7 +81,6 @@
   --ifm-font-family-monospace:  'Geist Mono', 'Fira Code', monospace;
   --ifm-font-size-base:         15px;
   --ifm-line-height-base:       1.7;
-  --ifm-font-weight-normal:     400;
 
   --ifm-heading-font-weight:    600;
   --ifm-heading-letter-spacing: -0.02em;
@@ -42,25 +88,27 @@
   --ifm-h2-font-size:           1.5rem;
   --ifm-h3-font-size:           1.2rem;
 
-  --ifm-navbar-height:          60px;
+  --ifm-navbar-height:          56px;
   --ifm-navbar-shadow:          none;
+  --ifm-navbar-background-color: #0a0a0a;
 
-  --ifm-toc-border-color:       var(--ifm-color-emphasis-200);
+  /* SHARP — zero radius everywhere */
+  --ifm-global-radius:          0;
+  --ifm-code-border-radius:     0;
+  --ifm-pre-border-radius:      0;
+  --ifm-alert-border-radius:    0;
+  --ifm-card-border-radius:     0;
+  --ifm-button-border-radius:   0;
+  --ifm-pagination-nav-border-radius: 0;
+  --ifm-badge-border-radius:    0;
+  --ifm-toc-border-color:       #1f1f1f;
   --ifm-code-font-size:         0.85rem;
-  --ifm-code-border-radius:     6px;
-  --ifm-code-padding-horizontal: 0.4em;
-  --ifm-code-padding-vertical:   0.15em;
-  --ifm-pre-border-radius:      10px;
   --ifm-pre-padding:            1.25rem;
 
-  --ifm-global-radius:          8px;
-  --ifm-global-shadow-lw:       0 1px 3px 0 rgba(0,0,0,.08);
-  --ifm-global-shadow-md:       0 4px 12px 0 rgba(0,0,0,.1);
-
   --docusaurus-highlighted-code-line-bg: rgba(99, 102, 241, 0.08);
 }
 
-/* ── Dark Mode ───────────────────────────────────────────── */
+/* Dark mode Infima overrides */
 [data-theme='dark'] {
   --ifm-color-primary:          #818cf8;
   --ifm-color-primary-dark:     #6366f1;
@@ -70,88 +118,96 @@
   --ifm-color-primary-lighter:  #c7d2fe;
   --ifm-color-primary-lightest: #e0e7ff;
 
-  --ifm-background-color:       #0a0a0a;
-  --ifm-background-surface-color: #111111;
-  --ifm-navbar-background-color: rgba(10, 10, 10, 0.85);
-  --ifm-sidebar-background:     #0a0a0a;
-  --ifm-footer-background-color: #0a0a0a;
+  --ifm-background-color:             #0a0a0a;
+  --ifm-background-surface-color:     #111111;
+  --ifm-navbar-background-color:      #0a0a0a;
+  --ifm-sidebar-background:           #0a0a0a;
+  --ifm-footer-background-color:      #0a0a0a;
 
-  --ifm-color-content:          #ededed;
-  --ifm-color-content-secondary:#a1a1a1;
-  --ifm-color-emphasis-100:     #1a1a1a;
-  --ifm-color-emphasis-200:     #222222;
-  --ifm-color-emphasis-300:     #333333;
-  --ifm-color-emphasis-400:     #555555;
-  --ifm-color-emphasis-600:     #999999;
-  --ifm-color-emphasis-700:     #cccccc;
-  --ifm-color-emphasis-900:     #ffffff;
+  --ifm-color-content:                #ededed;
+  --ifm-color-content-secondary:      #a1a1a1;
+  --ifm-color-emphasis-100:           #161616;
+  --ifm-color-emphasis-200:           #1f1f1f;
+  --ifm-color-emphasis-300:           #2a2a2a;
+  --ifm-color-emphasis-400:           #444444;
+  --ifm-color-emphasis-600:           #888888;
+  --ifm-color-emphasis-700:           #cccccc;
+  --ifm-color-emphasis-900:           #ffffff;
 
-  --ifm-toc-border-color:       #222222;
-  --ifm-hr-border-color:        #1f1f1f;
-
-  --ifm-code-background:        #161616;
-  --ifm-pre-background:         #111111;
-  --ifm-blockquote-border-left-color: var(--skic-accent);
+  --ifm-hr-border-color:              #1f1f1f;
+  --ifm-code-background:              #161616;
+  --ifm-pre-background:               #111111;
 
   --docusaurus-highlighted-code-line-bg: rgba(129, 140, 248, 0.12);
 }
 
-/* ── Typography ──────────────────────────────────────────── */
-h1, h2, h3, h4, h5, h6 {
-  letter-spacing: -0.02em;
-  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
-}
-
-h1 { font-size: 2.25rem; font-weight: 700; }
-h2 { font-size: 1.5rem;  border-bottom: 1px solid var(--ifm-color-emphasis-200); padding-bottom: 0.4rem; }
-h3 { font-size: 1.15rem; }
-
-p { color: var(--ifm-color-content); }
-
-/* ── Navbar ──────────────────────────────────────────────── */
+/* ── Force dark navbar in BOTH modes ─────────────────────── */
+/* This is the key fix — lock navbar dark regardless of color scheme */
 .navbar {
-  border-bottom: 1px solid var(--ifm-color-emphasis-200);
+  background-color: #0a0a0a !important;
+  border-bottom: 1px solid #1f1f1f !important;
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
-}
-
-[data-theme='dark'] .navbar {
-  background: rgba(10, 10, 10, 0.85);
+  box-shadow: none !important;
 }
 
 .navbar__title {
   font-weight: 700;
-  font-size: 1rem;
+  font-size: 0.95rem;
   letter-spacing: -0.02em;
-}
-
-.navbar__logo {
-  height: 24px;
+  color: #ededed !important;
 }
 
 .navbar__link {
   font-size: 0.875rem;
   font-weight: 500;
-  color: var(--ifm-color-content-secondary);
-  transition: color 0.15s ease;
+  color: #a1a1a1 !important;
+  transition: color 0.12s ease;
+  border-radius: 0 !important;
 }
 
 .navbar__link:hover,
 .navbar__link--active {
-  color: var(--ifm-color-content) !important;
+  color: #ededed !important;
+  background: transparent !important;
+}
+
+.navbar__logo { height: 22px; }
+
+.navbar-sidebar {
+  background-color: #0a0a0a !important;
+}
+
+.navbar-sidebar__brand {
+  background-color: #0a0a0a !important;
+  border-bottom: 1px solid #1f1f1f !important;
+}
+
+/* ── Typography ──────────────────────────────────────────── */
+h1, h2, h3, h4, h5, h6 {
+  letter-spacing: -0.02em;
+}
+
+h2 {
+  border-bottom: 1px solid var(--ifm-color-emphasis-200);
+  padding-bottom: 0.35rem;
 }
 
 /* ── Sidebar ─────────────────────────────────────────────── */
 .theme-doc-sidebar-container {
-  border-right: 1px solid var(--ifm-color-emphasis-200) !important;
+  border-right: 1px solid #1f1f1f !important;
+}
+
+[data-theme='dark'] .theme-doc-sidebar-container {
+  background-color: #0a0a0a;
 }
 
 .menu__link {
   font-size: 0.875rem;
-  border-radius: 6px;
-  padding: 0.35rem 0.75rem;
+  border-radius: 0 !important;
+  padding: 0.3rem 0.75rem;
   color: var(--ifm-color-content-secondary);
-  transition: all 0.15s ease;
+  transition: all 0.12s ease;
 }
 
 .menu__link:hover {
@@ -163,40 +219,43 @@ p { color: var(--ifm-color-content); }
   background: var(--ifm-color-emphasis-100) !important;
   color: var(--ifm-color-primary) !important;
   font-weight: 600;
+  border-left: 2px solid var(--ifm-color-primary);
 }
 
-.menu__caret::before {
-  background: var(--ifm-color-content-secondary);
-}
+.menu__caret { border-radius: 0 !important; }
 
-/* ── Code Blocks ─────────────────────────────────────────── */
+/* ── Code blocks ─────────────────────────────────────────── */
 code {
   font-size: 0.84em;
   border: 1px solid var(--ifm-color-emphasis-200);
   background: var(--ifm-color-emphasis-100);
-  border-radius: 5px;
+  border-radius: 0 !important;
 }
 
 .prism-code {
   font-size: 0.84rem;
   line-height: 1.6;
+  border-radius: 0 !important;
 }
 
-.codeBlockContainer_node_modules-\@docusaurus-theme-classic-lib-theme-CodeBlock-Container-styles-module {
+div[class*='codeBlockContainer'] {
   border: 1px solid var(--ifm-color-emphasis-200);
+  box-shadow: none !important;
+  border-radius: 0 !important;
 }
 
-div[class*="codeBlockContainer"] {
-  border: 1px solid var(--ifm-color-emphasis-200);
-  box-shadow: none;
-}
-
-div[class*="codeBlockTitle"] {
+div[class*='codeBlockTitle'] {
   background: var(--ifm-color-emphasis-100);
   border-bottom: 1px solid var(--ifm-color-emphasis-200);
   font-size: 0.78rem;
   font-family: var(--ifm-font-family-monospace);
   color: var(--ifm-color-content-secondary);
+  border-radius: 0 !important;
+}
+
+div[class*='copyButton'],
+div[class*='codeButton'] {
+  border-radius: 0 !important;
 }
 
 /* ── Tables ──────────────────────────────────────────────── */
@@ -205,55 +264,45 @@ table {
   width: 100%;
   font-size: 0.875rem;
   border: 1px solid var(--ifm-color-emphasis-200);
-  border-radius: 8px;
+  border-radius: 0 !important;
   overflow: hidden;
 }
 
-thead {
-  background: var(--ifm-color-emphasis-100);
-}
+thead { background: var(--ifm-color-emphasis-100); }
 
 th {
-  font-size: 0.75rem;
+  font-size: 0.72rem;
   font-weight: 600;
   text-transform: uppercase;
-  letter-spacing: 0.06em;
+  letter-spacing: 0.07em;
   color: var(--ifm-color-content-secondary);
-  padding: 0.75rem 1rem;
+  padding: 0.65rem 1rem;
   border-bottom: 1px solid var(--ifm-color-emphasis-200);
 }
 
 td {
-  padding: 0.7rem 1rem;
+  padding: 0.65rem 1rem;
   border-bottom: 1px solid var(--ifm-color-emphasis-100);
 }
 
 tr:last-child td { border-bottom: none; }
 
-tbody tr:hover {
-  background: var(--ifm-color-emphasis-100);
-}
+tbody tr:hover { background: var(--ifm-color-emphasis-100); }
 
-/* ── Admonitions (callouts) ──────────────────────────────── */
+/* ── Admonitions ─────────────────────────────────────────── */
 .admonition {
-  border-radius: 8px;
+  border-radius: 0 !important;
   border: 1px solid;
-  border-left-width: 3px;
+  border-left-width: 2px;
   font-size: 0.9rem;
 }
 
 .admonition-note    { border-color: var(--ifm-color-emphasis-300); background: var(--ifm-color-emphasis-100); }
-.admonition-tip     { border-color: var(--skic-green); background: rgba(16, 185, 129, 0.06); }
-.admonition-info    { border-color: var(--skic-accent); background: rgba(99, 102, 241, 0.06); }
-.admonition-warning { border-color: var(--skic-amber); background: rgba(245, 158, 11, 0.06); }
-.admonition-danger  { border-color: var(--skic-red);   background: rgba(239, 68, 68, 0.06); }
-
-.admonition-heading h5 { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; }
-
-/* ── Breadcrumbs ─────────────────────────────────────────── */
-.breadcrumbs__link {
-  font-size: 0.8rem;
-}
+.admonition-tip     { border-color: #10b981; background: rgba(16,185,129,0.05); }
+.admonition-info    { border-color: #6366f1; background: rgba(99,102,241,0.05); }
+.admonition-warning { border-color: #f59e0b; background: rgba(245,158,11,0.05); }
+.admonition-danger  { border-color: #ef4444; background: rgba(239,68,68,0.05); }
+.admonition-heading h5 { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.07em; }
 
 /* ── TOC ─────────────────────────────────────────────────── */
 .table-of-contents__link {
@@ -261,15 +310,13 @@ tbody tr:hover {
   color: var(--ifm-color-content-secondary);
 }
 .table-of-contents__link:hover,
-.table-of-contents__link--active {
-  color: var(--ifm-color-primary);
-}
+.table-of-contents__link--active { color: var(--ifm-color-primary); }
 
 /* ── Pagination ──────────────────────────────────────────── */
 .pagination-nav__link {
   border: 1px solid var(--ifm-color-emphasis-200);
-  border-radius: 8px;
-  transition: all 0.15s ease;
+  border-radius: 0 !important;
+  transition: all 0.12s ease;
 }
 .pagination-nav__link:hover {
   border-color: var(--ifm-color-primary);
@@ -278,12 +325,12 @@ tbody tr:hover {
 
 /* ── Footer ──────────────────────────────────────────────── */
 .footer {
-  border-top: 1px solid var(--ifm-color-emphasis-200);
-  padding: 2rem 0;
+  border-top: 1px solid #1f1f1f;
+  background-color: #0a0a0a !important;
 }
 
 .footer__title {
-  font-size: 0.75rem;
+  font-size: 0.72rem;
   text-transform: uppercase;
   letter-spacing: 0.08em;
   font-weight: 600;
@@ -295,66 +342,25 @@ tbody tr:hover {
   color: var(--ifm-color-content-secondary);
 }
 
-/* ── Doc article ─────────────────────────────────────────── */
-.markdown {
-  --ifm-heading-margin-top: 1.75rem;
+/* ── Buttons ─────────────────────────────────────────────── */
+.button {
+  border-radius: 0 !important;
 }
 
+/* ── Doc content ─────────────────────────────────────────── */
+.markdown { --ifm-heading-margin-top: 1.75rem; }
 .markdown > h2:first-child { margin-top: 0; }
 
-/* ── Hero (homepage) ─────────────────────────────────────── */
-.hero--primary {
-  background: linear-gradient(135deg, #0a0a0a 0%, #111827 50%, #0a0a0a 100%);
-  position: relative;
-  overflow: hidden;
-}
-
-.hero--primary::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  background: radial-gradient(ellipse at 60% 40%, rgba(99,102,241,0.15) 0%, transparent 65%);
-  pointer-events: none;
-}
-
-.hero__title {
-  font-size: 3rem;
-  font-weight: 800;
-  letter-spacing: -0.04em;
-  background: linear-gradient(135deg, #ffffff 0%, #a5b4fc 100%);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-}
-
-.hero__subtitle {
-  color: #a1a1a1;
-  font-size: 1.1rem;
-  font-weight: 400;
-}
-
-/* ── Badge component ─────────────────────────────────────── */
-.badge--status {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.35rem;
-  font-size: 0.7rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  padding: 0.2rem 0.6rem;
-  border-radius: 100px;
-  border: 1px solid;
-}
-.badge--wip     { color: var(--skic-amber); border-color: var(--skic-amber); background: rgba(245,158,11,0.08); }
-.badge--stable  { color: var(--skic-green); border-color: var(--skic-green); background: rgba(16,185,129,0.08); }
-.badge--planned { color: var(--ifm-color-content-secondary); border-color: var(--ifm-color-emphasis-300); background: transparent; }
-
-/* ── Scrollbar (webkit) ──────────────────────────────────── */
-[data-theme='dark'] ::-webkit-scrollbar { width: 6px; height: 6px; }
-[data-theme='dark'] ::-webkit-scrollbar-track { background: transparent; }
-[data-theme='dark'] ::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }
-[data-theme='dark'] ::-webkit-scrollbar-thumb:hover { background: #555; }
+/* ── Scrollbar ───────────────────────────────────────────── */
+::-webkit-scrollbar { width: 5px; height: 5px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: #2a2a2a; }
+::-webkit-scrollbar-thumb:hover { background: #444; }
 
 /* ── Selection ───────────────────────────────────────────── */
 ::selection { background: rgba(99,102,241,0.25); }
+
+/* ── Announcement bar ────────────────────────────────────── */
+div[class*='announcementBar'] {
+  border-radius: 0 !important;
+}

src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

src/pages/index.tsx

@@ -20,7 +20,7 @@ const applications: Application[] = [
     name: 'Stock Market Professional',
     description: 'Monitors forex & stock markets, runs technical analysis to spot patterns, and emits daily trading signals with max 3 positions / 30-minute hold.',
     status: 'wip',
-    link: '/docs/applications/stock-market-professional',
+    link: '/docs/products/stock-market-pro',
     tags: ['Python', 'Forex', 'TA', 'Signals'],
   },
 ];

src/theme/Layout/index.tsx

@@ -0,0 +1,27 @@
+import React, { useEffect } from 'react';
+import Layout from '@theme-original/Layout';
+import type { Props } from '@theme/Layout';
+import { useColorMode } from '@docusaurus/theme-common';
+
+/**
+ * ThemeSynchronizer: bridges Docusaurus's data-theme="dark" attribute
+ * with shadcn/ui's required `.dark` CSS class on <html>.
+ */
+function ThemeSynchronizer(): null {
+  const { colorMode } = useColorMode();
+  useEffect(() => {
+    document.documentElement.classList.toggle('dark', colorMode === 'dark');
+  }, [colorMode]);
+  return null;
+}
+
+export default function LayoutWrapper(props: Props): React.JSX.Element {
+  return (
+    <>
+      <Layout {...props}>
+        <ThemeSynchronizer />
+        {props.children}
+      </Layout>
+    </>
+  );
+}