Upload 2 files

CybberTicket.jsx

@@ -0,0 +1,1407 @@
+import { useState, useEffect, useRef } from "react";
+
+/* ============================================================
+   TICKETPUNCH UI — Complete Cyberpunk Design System
+   Font: IBM Plex Mono | Palette: Dark / White / Gold / Red / Peach
+   ============================================================ */
+
+const FontInjector = () => (
+  <style>{`
+    @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&display=swap');
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+    :root {
+      /* ── DARK ── */
+      --d-900: #060606;
+      --d-800: #0A0A0A;
+      --d-700: #0f0f0f;
+      --d-600: #1e1e1e;
+      --d-500: #2a2a2a;
+
+      /* ── WHITE ── */
+      --w-100: #FFFFFF;
+      --w-200: #EFEFEF;
+      --w-300: #CDCDCD;
+      --w-400: #AAAAAA;
+      --w-500: #888888;
+
+      /* ── GOLD ── */
+      --g-100: #FFF4CC;
+      --g-300: #FFD700;
+      --g-500: #C8960C;
+      --g-700: #7A5800;
+      --g-900: #3D2C00;
+
+      /* ── RED ── */
+      --r-100: #FFE5E5;
+      --r-300: #FF6666;
+      --r-500: #FF3333;
+      --r-700: #CC0000;
+      --r-900: #550000;
+
+      /* ── PEACH ── */
+      --p-100: #FFF0EB;
+      --p-300: #FFBFA8;
+      --p-500: #FF8C69;
+      --p-700: #C45A35;
+      --p-900: #5C2010;
+
+      /* ── SEMANTIC ALIASES ── */
+      --bg:           var(--d-900);
+      --surface:      var(--d-800);
+      --header:       var(--d-700);
+      --border-1:     var(--d-600);
+      --border-2:     var(--d-500);
+      --text-primary: var(--w-100);
+      --text-6:       #383838;
+
+      --font: 'IBM Plex Mono', monospace;
+      --tooth: 9px;
+    }
+    body { background: var(--bg); color: var(--text-primary); font-family: var(--font); }
+    ::-webkit-scrollbar { width: 4px; }
+    ::-webkit-scrollbar-track { background: var(--bg); }
+    ::-webkit-scrollbar-thumb { background: var(--border-2); }
+
+    @keyframes pulse-dot { 0%,100%{opacity:1} 50%{opacity:0.2} }
+    @keyframes scroll-up { 0%{transform:translateY(0)} 100%{transform:translateY(-50%)} }
+    @keyframes spin-slow  { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
+    @keyframes progress-fill { from{width:0} to{width:var(--fill)} }
+    @keyframes toast-in { from{transform:translateX(120%);opacity:0} to{transform:translateX(0);opacity:1} }
+
+    .pulse-anim  { animation: pulse-dot 1400ms ease-in-out infinite; }
+    .scroll-anim { animation: scroll-up 12s linear infinite; }
+    .spin-slow   { animation: spin-slow 8s linear infinite; }
+    .toast-anim  { animation: toast-in 0.3s ease forwards; }
+
+    .punched-frame { position: relative; }
+    .punched-frame::before,
+    .punched-frame::after {
+      content: '';
+      position: absolute;
+      left: 0; right: 0;
+      height: var(--tooth);
+      z-index: 20;
+      pointer-events: none;
+      background: repeating-linear-gradient(
+        90deg,
+        transparent 0px, transparent 8px,
+        var(--bg) 8px, var(--bg) 18px
+      );
+    }
+    .punched-frame::before { top: 0; }
+    .punched-frame::after  { bottom: 0; }
+  `}</style>
+);
+
+const GrainOverlay = ({ strength = 0.18 }) => {
+  const canvasRef = useRef(null);
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    const W = 256, H = 256;
+    canvas.width = W; canvas.height = H;
+    const imageData = ctx.createImageData(W, H);
+    const data = imageData.data;
+    for (let i = 0; i < data.length; i += 4) {
+      const v = (Math.random() * 255) | 0;
+      data[i] = data[i + 1] = data[i + 2] = v;
+      data[i + 3] = (strength * 255) | 0;
+    }
+    ctx.putImageData(imageData, 0, 0);
+  }, [strength]);
+  return (
+    <canvas ref={canvasRef} style={{
+      position: "absolute", inset: 0, width: "100%", height: "100%",
+      pointerEvents: "none", mixBlendMode: "overlay", opacity: 0.9, zIndex: 5
+    }} />
+  );
+};
+
+const GeometricOverlay = () => (
+  <svg style={{ position: "absolute", inset: 0, width: "100%", height: "100%", pointerEvents: "none", zIndex: 4, opacity: 0.07 }} preserveAspectRatio="xMidYMid slice">
+    <defs>
+      <pattern id="lattice" width="32" height="32" patternUnits="userSpaceOnUse">
+        <path d="M 32 0 L 0 0 0 32" fill="none" stroke="white" strokeWidth="0.5" />
+        <circle cx="0" cy="0" r="1" fill="white" opacity="0.5" />
+      </pattern>
+    </defs>
+    <rect width="100%" height="100%" fill="url(#lattice)" />
+    <circle cx="50%" cy="50%" r="80" fill="none" stroke="white" strokeWidth="0.5" />
+    <circle cx="50%" cy="50%" r="140" fill="none" stroke="white" strokeWidth="0.3" />
+    <line x1="50%" y1="0" x2="50%" y2="100%" stroke="white" strokeWidth="0.3" />
+    <line x1="0" y1="50%" x2="100%" y2="50%" stroke="white" strokeWidth="0.3" />
+    <polygon points="50%,10% 90%,90% 10%,90%" fill="none" stroke="white" strokeWidth="0.4" opacity="0.5" />
+  </svg>
+);
+
+const PunchHoles = () => (
+  <>
+    {[{ top: "3px", left: "4px" }, { top: "3px", right: "4px" }, { bottom: "3px", left: "4px" }, { bottom: "3px", right: "4px" }].map((pos, i) => (
+      <div key={i} style={{
+        position: "absolute", ...pos, width: 9, height: 9, borderRadius: "50%",
+        background: "radial-gradient(circle, var(--bg) 4px, transparent 4px)",
+        border: "1px solid var(--d-500)", zIndex: 25, pointerEvents: "none",
+      }} />
+    ))}
+  </>
+);
+
+const Punched = ({ children, style = {}, className = "" }) => (
+  <div className={`punched-frame ${className}`} style={{ position: "relative", ...style }}>
+    <PunchHoles />
+    {children}
+  </div>
+);
+
+const TicketShell = ({ children, stubHeight = 60, style = {} }) => (
+  <Punched style={style}>
+    <div style={{
+      background: "var(--surface)", border: "1px solid var(--border-1)",
+      boxShadow: "0 40px 100px rgba(0,0,0,0.95)", position: "relative", overflow: "hidden"
+    }}>
+      <svg style={{ position: "absolute", inset: 0, width: "100%", height: "100%", pointerEvents: "none", zIndex: 6 }}>
+        <rect x="8" y="8" width="calc(100% - 16px)" height="calc(100% - 16px)"
+          fill="none" stroke="var(--d-500)" strokeWidth="1" strokeDasharray="4 3" />
+      </svg>
+      <GrainOverlay />
+      <GeometricOverlay />
+      {stubHeight > 0 && (
+        <div style={{
+          position: "absolute", bottom: stubHeight, left: 0, right: 0, zIndex: 8,
+          borderTop: "1px dashed var(--border-2)", display: "flex", alignItems: "center", justifyContent: "center"
+        }}>
+          <span style={{
+            background: "var(--surface)", padding: "0 8px", fontSize: 7, color: "var(--w-500)",
+            letterSpacing: "0.2em", fontFamily: "var(--font)"
+          }}>✂ TEAR</span>
+        </div>
+      )}
+      {children}
+    </div>
+  </Punched>
+);
+
+const Barcode = ({ value = "OMEGA-7749-XX", width = 120, height = 28 }) => {
+  const bars = [];
+  for (let i = 0; i < 48; i++)
+    bars.push({ x: i * (width / 48), w: Math.random() > 0.5 ? 1.5 : 0.8, o: 0.4 + Math.random() * 0.6 });
+  return (
+    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 2 }}>
+      <svg width={width} height={height} style={{ display: "block" }}>
+        {bars.map((b, i) => <rect key={i} x={b.x} y={0} width={b.w} height={height} fill="var(--w-300)" opacity={b.o} />)}
+      </svg>
+      <span style={{ fontSize: 6, letterSpacing: "0.28em", color: "var(--w-500)", fontFamily: "var(--font)", textTransform: "uppercase" }}>{value}</span>
+    </div>
+  );
+};
+
+const StatusPill = ({ status = "active", label, pulse = true }) => {
+  const colors = {
+    active: "var(--g-300)",
+    inactive: "var(--w-500)",
+    warning: "var(--p-500)",
+    danger: "var(--r-500)",
+    pending: "var(--g-100)",
+  };
+  const color = colors[status] || colors.active;
+  return (
+    <div style={{
+      display: "inline-flex", alignItems: "center", gap: 6, padding: "3px 8px",
+      border: `1px solid ${color}33`, background: `${color}0d`, borderRadius: 2
+    }}>
+      <div className={pulse ? "pulse-anim" : ""} style={{
+        width: 5, height: 5, borderRadius: "50%",
+        background: color, boxShadow: `0 0 6px ${color}`
+      }} />
+      <span style={{ fontSize: 8, letterSpacing: "0.28em", color, fontFamily: "var(--font)", textTransform: "uppercase" }}>
+        {label || status}
+      </span>
+    </div>
+  );
+};
+
+const TerminalMask = ({ lines = [], size = 120 }) => {
+  const defaultLines = [
+    "CLASSIFIED // OMEGA PROTOCOL", "ACCESS GRANTED — NEXUS-7", "THREAT LEVEL: CRITICAL",
+    "SYNC: 99.7% COMPLETE", "FIREWALL: ACTIVE", "ENCRYPTION: AES-512",
+    "NODE: 192.168.0.77", "UPTIME: 847:22:11", "AGENT: SPECTRE-9", "STATUS: OPERATIONAL", ...lines
+  ];
+  const doubled = [...defaultLines, ...defaultLines];
+  return (
+    <div style={{
+      width: size, height: size, borderRadius: "50%", overflow: "hidden", position: "relative",
+      border: "1px solid var(--d-500)", background: "var(--bg)",
+      boxShadow: "inset 0 0 20px rgba(0,0,0,0.8), 0 0 20px rgba(0,0,0,0.6)"
+    }}>
+      <div className="scroll-anim" style={{ position: "absolute", width: "100%", paddingTop: 8 }}>
+        {doubled.map((line, i) => (
+          <div key={i} style={{
+            padding: "1.5px 8px", fontSize: 6.5, letterSpacing: "0.18em",
+            color: i % 3 === 0 ? "var(--g-300)" : "var(--w-500)",
+            fontFamily: "var(--font)", textTransform: "uppercase", whiteSpace: "nowrap", overflow: "hidden"
+          }}>{line}</div>
+        ))}
+      </div>
+      <div style={{
+        position: "absolute", inset: 0, borderRadius: "50%",
+        background: "radial-gradient(circle, transparent 40%, var(--bg) 80%)", pointerEvents: "none"
+      }} />
+    </div>
+  );
+};
+
+const Divider = ({ label }) => (
+  <div style={{ display: "flex", alignItems: "center", gap: 10, padding: "4px 0" }}>
+    <div style={{ flex: 1, height: 1, background: "var(--border-1)" }} />
+    {label
+      ? <span style={{ fontSize: 7, letterSpacing: "0.28em", color: "var(--w-500)", textTransform: "uppercase", fontFamily: "var(--font)" }}>{label}</span>
+      : <svg width="8" height="8"><polygon points="4,0 8,4 4,8 0,4" fill="var(--d-500)" /></svg>
+    }
+    <div style={{ flex: 1, height: 1, background: "var(--border-1)" }} />
+  </div>
+);
+
+const SectionLabel = ({ children, sub }) => (
+  <div style={{ marginBottom: 20 }}>
+    <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+      <div style={{ width: 2, height: 14, background: "var(--g-300)" }} />
+      <span style={{
+        fontSize: 9.5, fontWeight: 700, letterSpacing: "0.34em", textTransform: "uppercase",
+        fontFamily: "var(--font)", color: "var(--w-100)"
+      }}>{children}</span>
+    </div>
+    {sub && <div style={{
+      marginTop: 4, marginLeft: 10, fontSize: 7, letterSpacing: "0.2em",
+      color: "var(--g-700)", textTransform: "uppercase", fontFamily: "var(--font)"
+    }}>{sub}</div>}
+  </div>
+);
+
+const Micro = ({ children, color = "var(--text-6)" }) => (
+  <span style={{ fontSize: 7, letterSpacing: "0.28em", color, fontFamily: "var(--font)", textTransform: "uppercase" }}>{children}</span>
+);
+
+// ── 1. HEADER ──────────────────────────────────────────────────
+const Header = ({ activeTab, setActiveTab }) => {
+  const navItems = ["DASHBOARD", "INTEL", "ASSETS", "COMMS", "SYSTEM"];
+  return (
+    <Punched style={{ zIndex: 100 }}>
+      <div style={{
+        position: "relative", background: "var(--header)", borderBottom: "1px solid var(--border-1)",
+        height: 52, display: "flex", alignItems: "center", padding: "0 24px", gap: 24, overflow: "hidden"
+      }}>
+        <GrainOverlay strength={0.1} />
+        <div style={{ display: "flex", alignItems: "center", gap: 10, zIndex: 7 }}>
+          <svg width="18" height="18" viewBox="0 0 18 18">
+            <polygon points="9,1 17,5 17,13 9,17 1,13 1,5" fill="none" stroke="var(--g-300)" strokeWidth="1.5" />
+            <polygon points="9,5 13,7 13,11 9,13 5,11 5,7" fill="var(--g-500)" opacity="0.3" />
+            <circle cx="9" cy="9" r="2" fill="var(--g-300)" />
+          </svg>
+          <div>
+            <div style={{
+              fontSize: 11, fontWeight: 700, letterSpacing: "0.22em", textTransform: "uppercase",
+              fontFamily: "var(--font)", color: "var(--w-100)"
+            }}>NEXUS</div>
+            <div style={{ fontSize: 6.5, letterSpacing: "0.34em", color: "var(--g-500)", textTransform: "uppercase", fontFamily: "var(--font)" }}>OMEGA PROTOCOL</div>
+          </div>
+        </div>
+        <div style={{ width: 1, height: 28, background: "var(--border-1)", zIndex: 7 }} />
+        <div style={{ display: "flex", gap: 2, zIndex: 7 }}>
+          {navItems.map(item => (
+            <button key={item} onClick={() => setActiveTab(item)} style={{
+              background: activeTab === item ? "rgba(255,215,0,0.06)" : "transparent",
+              border: activeTab === item ? "1px solid var(--g-700)" : "1px solid transparent",
+              color: activeTab === item ? "var(--g-300)" : "var(--w-500)",
+              padding: "5px 12px", cursor: "pointer", fontFamily: "var(--font)",
+              fontSize: 8, letterSpacing: "0.22em", textTransform: "uppercase", transition: "all 0.2s"
+            }}>
+              {item}
+              {activeTab === item && <div style={{ width: "100%", height: 1, background: "var(--g-300)", marginTop: 2 }} />}
+            </button>
+          ))}
+        </div>
+        <div style={{ flex: 1 }} />
+        <div style={{ display: "flex", alignItems: "center", gap: 14, zIndex: 7 }}>
+          <StatusPill status="active" label="SYS ONLINE" />
+          <div style={{ textAlign: "right" }}>
+            <div style={{ fontSize: 8, letterSpacing: "0.2em", color: "var(--w-300)", textTransform: "uppercase", fontFamily: "var(--font)" }}>AGT-09</div>
+            <div style={{ fontSize: 6.5, letterSpacing: "0.18em", color: "var(--g-500)", textTransform: "uppercase", fontFamily: "var(--font)" }}>CLEARANCE: OMEGA</div>
+          </div>
+          <div style={{
+            width: 28, height: 28, borderRadius: "50%", border: "1px solid var(--g-700)",
+            background: "var(--surface)", display: "flex", alignItems: "center", justifyContent: "center",
+            fontSize: 9, color: "var(--g-300)", fontFamily: "var(--font)"
+          }}>Ω</div>
+        </div>
+      </div>
+    </Punched>
+  );
+};
+
+// ── 2. BUTTON ──────────────────────────────────────────────────
+const Button = ({ variant = "primary", children, icon, size = "md", disabled, onClick }) => {
+  const sizes = { sm: "4px 10px", md: "7px 16px", lg: "10px 22px" };
+  const fontSizes = { sm: 7.5, md: 8.5, lg: 9.5 };
+  const bases = {
+    primary: { bg: "var(--g-300)", color: "var(--d-900)", border: "1px solid var(--g-300)" },
+    secondary: { bg: "rgba(255,215,0,0.06)", color: "var(--g-300)", border: "1px solid var(--g-700)" },
+    outline: { bg: "transparent", color: "var(--w-100)", border: "1px solid var(--w-300)" },
+    ghost: { bg: "transparent", color: "var(--w-500)", border: "1px solid transparent" },
+    danger: { bg: "rgba(255,51,51,0.10)", color: "var(--r-500)", border: "1px solid var(--r-700)" },
+    success: { bg: "rgba(255,215,0,0.08)", color: "var(--g-300)", border: "1px solid var(--g-700)" },
+  };
+  const s = bases[variant] || bases.primary;
+  return (
+    <button onClick={onClick} disabled={disabled} style={{
+      background: s.bg, color: s.color, border: s.border,
+      padding: sizes[size], fontFamily: "var(--font)",
+      fontSize: fontSizes[size], letterSpacing: "0.22em", textTransform: "uppercase",
+      cursor: disabled ? "not-allowed" : "pointer", opacity: disabled ? 0.4 : 1,
+      display: "inline-flex", alignItems: "center", gap: 6,
+      position: "relative", overflow: "hidden", transition: "all 0.2s", outline: "none",
+    }}>
+      {["top:2px;left:2px", "top:2px;right:2px", "bottom:2px;left:2px", "bottom:2px;right:2px"].map((pos, i) => {
+        const st = pos.split(";").reduce((a, p) => { const [k, v] = p.split(":"); a[k] = v; return a; }, {});
+        return <div key={i} style={{ position: "absolute", ...st, width: 2, height: 2, background: s.color, opacity: 0.5 }} />;
+      })}
+      {icon && <span style={{ fontSize: fontSizes[size] * 1.1 }}>{icon}</span>}
+      {children}
+    </button>
+  );
+};
+
+// ── 3. INPUT ───────────────────────────────────────────────────
+const Input = ({ placeholder, label, type = "text", value, onChange, prefix, suffix, hint }) => (
+  <div style={{ display: "flex", flexDirection: "column", gap: 5 }}>
+    {label && <label style={{ fontSize: 7.5, letterSpacing: "0.28em", color: "var(--g-500)", textTransform: "uppercase", fontFamily: "var(--font)" }}>{label}</label>}
+    <div style={{
+      position: "relative", background: "var(--surface)", border: "1px solid var(--border-1)",
+      display: "flex", alignItems: "center", overflow: "hidden"
+    }}>
+      {prefix && <span style={{ padding: "0 8px", fontSize: 8, color: "var(--g-500)", fontFamily: "var(--font)", borderRight: "1px solid var(--border-1)" }}>{prefix}</span>}
+      <input type={type} placeholder={placeholder} value={value} onChange={onChange} style={{
+        flex: 1, background: "transparent", border: "none", outline: "none",
+        color: "var(--w-100)", fontFamily: "var(--font)", fontSize: 9, letterSpacing: "0.14em", padding: "9px 12px",
+      }} />
+      {suffix && <span style={{ padding: "0 8px", fontSize: 8, color: "var(--g-500)", fontFamily: "var(--font)", borderLeft: "1px solid var(--border-1)" }}>{suffix}</span>}
+      <div style={{ position: "absolute", inset: 2, border: "1px dashed var(--border-1)", pointerEvents: "none" }} />
+    </div>
+    {hint && <div style={{ fontSize: 7, letterSpacing: "0.18em", color: "var(--g-700)", fontFamily: "var(--font)", textTransform: "uppercase" }}>{hint}</div>}
+  </div>
+);
+
+// ── 4. CARD ────────────────────────────────────────────────────
+const Card = ({ children, title, sub, tag, style = {} }) => (
+  <Punched style={style}>
+    <div style={{ position: "relative", background: "var(--surface)", border: "1px solid var(--border-1)", overflow: "hidden" }}>
+      <GrainOverlay strength={0.12} />
+      {["top:0;left:0", "top:0;right:0", "bottom:0;left:0", "bottom:0;right:0"].map((pos, i) => {
+        const st = pos.split(";").reduce((a, p) => { const [k, v] = p.split(":"); a[k] = v; return a; }, {});
+        return (
+          <div key={i} style={{
+            position: "absolute", ...st, width: 12, height: 12, zIndex: 7,
+            borderTop: i < 2 ? "1px solid var(--g-700)" : "none",
+            borderBottom: i >= 2 ? "1px solid var(--g-700)" : "none",
+            borderLeft: (i === 0 || i === 2) ? "1px solid var(--g-700)" : "none",
+            borderRight: (i === 1 || i === 3) ? "1px solid var(--g-700)" : "none",
+          }} />
+        );
+      })}
+      {(title || sub || tag) && (
+        <div style={{ padding: "10px 14px 8px", borderBottom: "1px solid var(--border-1)", position: "relative", zIndex: 7 }}>
+          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
+            <div>
+              {title && <div style={{
+                fontSize: 9.5, fontWeight: 600, letterSpacing: "0.22em", textTransform: "uppercase",
+                fontFamily: "var(--font)", color: "var(--w-100)"
+              }}>{title}</div>}
+              {sub && <div style={{
+                fontSize: 7, letterSpacing: "0.18em", color: "var(--g-500)", textTransform: "uppercase",
+                fontFamily: "var(--font)", marginTop: 3
+              }}>{sub}</div>}
+            </div>
+            {tag && <div style={{
+              fontSize: 7, padding: "2px 7px", border: "1px solid var(--g-700)", color: "var(--g-500)",
+              letterSpacing: "0.2em", textTransform: "uppercase", fontFamily: "var(--font)"
+            }}>{tag}</div>}
+          </div>
+        </div>
+      )}
+      <div style={{ padding: 14, position: "relative", zIndex: 7 }}>{children}</div>
+    </div>
+  </Punched>
+);
+
+// ── 5. BADGE ───────────────────────────────────────────────────
+const Badge = ({ children, variant = "default" }) => {
+  const vars = {
+    default: { bg: "var(--surface)", color: "var(--w-400)", border: "1px solid var(--border-2)" },
+    active: { bg: "rgba(255,215,0,0.08)", color: "var(--g-300)", border: "1px solid var(--g-700)" },
+    danger: { bg: "rgba(255,51,51,0.08)", color: "var(--r-500)", border: "1px solid var(--r-700)" },
+    warning: { bg: "rgba(255,140,105,0.08)", color: "var(--p-500)", border: "1px solid var(--p-700)" },
+    omega: { bg: "rgba(255,244,204,0.05)", color: "var(--g-100)", border: "1px solid var(--g-700)" },
+  };
+  const v = vars[variant] || vars.default;
+  return (
+    <span style={{
+      ...v, display: "inline-block", padding: "2px 7px", fontSize: 7,
+      letterSpacing: "0.22em", textTransform: "uppercase", fontFamily: "var(--font)"
+    }}>{children}</span>
+  );
+};
+
+// ── 6. PROGRESS BAR ────────────────────────────────────────────
+const ProgressBar = ({ value = 65, label, color = "var(--g-300)" }) => (
+  <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
+    {label && (
+      <div style={{ display: "flex", justifyContent: "space-between" }}>
+        <Micro color="var(--w-500)">{label}</Micro>
+        <Micro color="var(--g-500)">{value}%</Micro>
+      </div>
+    )}
+    <div style={{ height: 3, background: "var(--border-1)", position: "relative", overflow: "hidden" }}>
+      <div style={{
+        "--fill": `${value}%`, width: `${value}%`, height: "100%", background: color,
+        animation: "progress-fill 1.5s ease forwards", boxShadow: `0 0 8px ${color}`
+      }} />
+      {[25, 50, 75].map(t => (
+        <div key={t} style={{ position: "absolute", top: 0, left: `${t}%`, width: 1, height: "100%", background: "var(--border-2)" }} />
+      ))}
+    </div>
+  </div>
+);
+
+// ── 7. SPINNER ─────────────────────────────────────────────────
+const Spinner = ({ size = 32 }) => (
+  <div style={{ position: "relative", width: size, height: size }}>
+    <div className="spin-slow" style={{
+      width: "100%", height: "100%",
+      border: "1px solid var(--border-2)", borderTop: "1px solid var(--g-300)", borderRadius: "50%"
+    }} />
+    <div style={{ position: "absolute", inset: 4, border: "1px dashed var(--g-700)", borderRadius: "50%" }} />
+    <div style={{
+      position: "absolute", inset: "50%", transform: "translate(-50%,-50%)",
+      width: 4, height: 4, background: "var(--g-300)", borderRadius: "50%"
+    }} />
+  </div>
+);
+
+// ── 8. TABS ────────────────────────────────────────────────────
+const Tabs = ({ tabs, active, onSelect }) => (
+  <div style={{ borderBottom: "1px solid var(--border-1)", display: "flex", gap: 0 }}>
+    {tabs.map((tab, i) => (
+      <button key={i} onClick={() => onSelect(i)} style={{
+        background: active === i ? "rgba(255,215,0,0.04)" : "transparent",
+        border: "none", borderBottom: active === i ? "1px solid var(--g-300)" : "1px solid transparent",
+        color: active === i ? "var(--g-300)" : "var(--w-500)",
+        padding: "8px 16px", cursor: "pointer", fontFamily: "var(--font)",
+        fontSize: 8, letterSpacing: "0.22em", textTransform: "uppercase", position: "relative", marginBottom: -1,
+      }}>
+        {active === i && <div style={{ position: "absolute", top: 0, left: 0, right: 0, height: 1, background: "var(--g-700)" }} />}
+        {tab}
+      </button>
+    ))}
+  </div>
+);
+
+// ── 9. ACCORDION ───────────────────────────────────────────────
+const AccordionItem = ({ title, children }) => {
+  const [open, setOpen] = useState(false);
+  return (
+    <div style={{ borderBottom: "1px solid var(--border-1)" }}>
+      <button onClick={() => setOpen(!open)} style={{
+        width: "100%", background: "transparent", border: "none", padding: "10px 14px",
+        display: "flex", justifyContent: "space-between", alignItems: "center",
+        cursor: "pointer", color: "var(--w-300)", fontFamily: "var(--font)",
+        fontSize: 8.5, letterSpacing: "0.22em", textTransform: "uppercase",
+      }}>
+        <span>{title}</span>
+        <svg width="10" height="10" style={{ transform: open ? "rotate(180deg)" : "rotate(0deg)", transition: "transform 0.2s" }}>
+          <polygon points="5,7 0,0 10,0" fill="var(--g-500)" />
+        </svg>
+      </button>
+      {open && (
+        <div style={{
+          padding: "8px 14px 12px", color: "var(--w-500)", fontSize: 8.5, lineHeight: 1.7,
+          fontFamily: "var(--font)", letterSpacing: "0.1em", borderTop: "1px dashed var(--border-1)"
+        }}>
+          {children}
+        </div>
+      )}
+    </div>
+  );
+};
+
+// ── 10. TOOLTIP ────────────────────────────────────────────────
+const Tooltip = ({ label, children }) => {
+  const [show, setShow] = useState(false);
+  return (
+    <div style={{ position: "relative", display: "inline-block" }}
+      onMouseEnter={() => setShow(true)} onMouseLeave={() => setShow(false)}>
+      {children}
+      {show && (
+        <div style={{
+          position: "absolute", bottom: "calc(100% + 6px)", left: "50%", transform: "translateX(-50%)",
+          background: "var(--header)", border: "1px solid var(--g-700)", padding: "5px 10px",
+          whiteSpace: "nowrap", zIndex: 200, pointerEvents: "none"
+        }}>
+          <span style={{
+            fontSize: 7.5, letterSpacing: "0.18em", color: "var(--g-300)",
+            fontFamily: "var(--font)", textTransform: "uppercase"
+          }}>{label}</span>
+          <div style={{
+            position: "absolute", bottom: -4, left: "50%", transform: "translateX(-50%)", width: 6, height: 4,
+            background: "var(--header)", borderRight: "1px solid var(--g-700)", borderBottom: "1px solid var(--g-700)",
+            transformOrigin: "center", rotate: "45deg"
+          }} />
+        </div>
+      )}
+    </div>
+  );
+};
+
+// ── 11. DATA TABLE ─────────────────────────────────────────────
+const DataTable = ({ columns, rows }) => (
+  <Punched>
+    <div style={{ border: "1px solid var(--border-1)", overflow: "hidden", position: "relative" }}>
+      <GrainOverlay strength={0.08} />
+      <div style={{
+        display: "grid", gridTemplateColumns: `repeat(${columns.length}, 1fr)`,
+        borderBottom: "1px solid var(--border-2)", background: "var(--header)", position: "relative", zIndex: 7
+      }}>
+        {columns.map((col, i) => (
+          <div key={i} style={{
+            padding: "8px 12px", fontSize: 7.5, letterSpacing: "0.22em",
+            textTransform: "uppercase", color: "var(--g-500)", fontFamily: "var(--font)",
+            borderRight: i < columns.length - 1 ? "1px solid var(--border-1)" : "none"
+          }}>
+            {col}
+          </div>
+        ))}
+      </div>
+      {rows.map((row, ri) => (
+        <div key={ri} style={{
+          display: "grid", gridTemplateColumns: `repeat(${columns.length}, 1fr)`,
+          borderBottom: ri < rows.length - 1 ? "1px solid var(--border-1)" : "none",
+          background: ri % 2 === 0 ? "transparent" : "rgba(255,215,0,0.01)", position: "relative", zIndex: 7
+        }}>
+          {row.map((cell, ci) => (
+            <div key={ci} style={{
+              padding: "7px 12px", fontSize: 8, letterSpacing: "0.12em",
+              color: ci === 0 ? "var(--w-200)" : "var(--w-500)", fontFamily: "var(--font)",
+              borderRight: ci < row.length - 1 ? "1px solid var(--border-1)" : "none"
+            }}>
+              {cell}
+            </div>
+          ))}
+        </div>
+      ))}
+    </div>
+  </Punched>
+);
+
+// ── 12. TOGGLE ─────────────────────────────────────────────────
+const Toggle = ({ checked, onChange, label }) => (
+  <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
+    <div onClick={onChange} style={{
+      cursor: "pointer", width: 40, height: 16, position: "relative",
+      background: checked ? "rgba(255,215,0,0.1)" : "var(--surface)",
+      border: `1px solid ${checked ? "var(--g-700)" : "var(--border-1)"}`
+    }}>
+      {[...Array(8)].map((_, i) => (
+        <div key={i} style={{
+          position: "absolute", top: 2, bottom: 2, left: 4 + i * 4, width: 1,
+          background: "var(--border-2)", opacity: checked ? 1 : 0.4
+        }} />
+      ))}
+      <div style={{
+        position: "absolute", top: 1, width: 12, height: 12,
+        background: checked ? "var(--g-300)" : "var(--border-2)",
+        left: checked ? "calc(100% - 14px)" : 1,
+        transition: "all 0.2s", boxShadow: checked ? "0 0 8px var(--g-500)" : "none",
+        display: "flex", alignItems: "center", justifyContent: "center",
+        fontSize: 5, color: checked ? "var(--d-900)" : "transparent"
+      }}>■</div>
+    </div>
+    {label && <span style={{
+      fontSize: 8, letterSpacing: "0.18em", color: "var(--w-400)",
+      fontFamily: "var(--font)", textTransform: "uppercase"
+    }}>{label}</span>}
+  </div>
+);
+
+// ── 13. ALERT ──────────────────────────────────────────────────
+const Alert = ({ type = "info", title, message, onClose }) => {
+  const types = {
+    info: { color: "var(--w-300)", border: "var(--border-2)", icon: "◈" },
+    success: { color: "var(--g-300)", border: "var(--g-700)", icon: "✓" },
+    warning: { color: "var(--p-500)", border: "var(--p-700)", icon: "⚠" },
+    danger: { color: "var(--r-500)", border: "var(--r-700)", icon: "✕" },
+  };
+  const t = types[type] || types.info;
+  return (
+    <Punched>
+      <div className="toast-anim" style={{
+        background: "var(--surface)", border: `1px solid ${t.border}`,
+        padding: "10px 14px", position: "relative", overflow: "hidden", display: "flex", gap: 10, alignItems: "flex-start"
+      }}>
+        <GrainOverlay strength={0.1} />
+        <span style={{ fontSize: 14, color: t.color, zIndex: 7 }}>{t.icon}</span>
+        <div style={{ flex: 1, zIndex: 7 }}>
+          {title && <div style={{
+            fontSize: 9, fontWeight: 600, letterSpacing: "0.2em", color: t.color,
+            textTransform: "uppercase", fontFamily: "var(--font)", marginBottom: 3
+          }}>{title}</div>}
+          <div style={{ fontSize: 8, letterSpacing: "0.14em", color: "var(--w-500)", fontFamily: "var(--font)" }}>{message}</div>
+        </div>
+        {onClose && <button onClick={onClose} style={{
+          background: "none", border: "none",
+          color: "var(--w-500)", cursor: "pointer", fontSize: 10, zIndex: 7
+        }}>×</button>}
+      </div>
+    </Punched>
+  );
+};
+
+// ── 14. BREADCRUMBS ────────────────────────────────────────────
+const Breadcrumbs = ({ items }) => (
+  <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
+    {items.map((item, i) => (
+      <div key={i} style={{ display: "flex", alignItems: "center", gap: 6 }}>
+        <span style={{
+          fontSize: 8, letterSpacing: "0.18em",
+          color: i === items.length - 1 ? "var(--g-300)" : "var(--w-500)",
+          textTransform: "uppercase", fontFamily: "var(--font)", cursor: i < items.length - 1 ? "pointer" : "default"
+        }}>
+          {item}
+        </span>
+        {i < items.length - 1 && (
+          <svg width="6" height="6"><polygon points="3,0 6,3 3,6 0,3" fill="var(--g-700)" /></svg>
+        )}
+      </div>
+    ))}
+  </div>
+);
+
+// ── 15. STEPPER ────────────────────────────────────────────────
+const Stepper = ({ steps, current }) => (
+  <div style={{ display: "flex", alignItems: "center" }}>
+    {steps.map((step, i) => (
+      <div key={i} style={{ display: "flex", alignItems: "center", flex: i < steps.length - 1 ? 1 : "none" }}>
+        <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 4 }}>
+          <div style={{
+            width: 24, height: 24,
+            border: `1px solid ${i <= current ? "var(--g-300)" : "var(--border-2)"}`,
+            background: i < current ? "var(--g-300)" : i === current ? "rgba(255,215,0,0.1)" : "transparent",
+            display: "flex", alignItems: "center", justifyContent: "center",
+            fontSize: 7.5, color: i < current ? "var(--d-900)" : i === current ? "var(--g-300)" : "var(--w-500)",
+            fontFamily: "var(--font)", fontWeight: 700, letterSpacing: "0.1em"
+          }}>
+            {i < current ? "✓" : i + 1}
+          </div>
+          <span style={{
+            fontSize: 7, letterSpacing: "0.16em",
+            color: i <= current ? "var(--g-300)" : "var(--w-500)",
+            textTransform: "uppercase", fontFamily: "var(--font)", whiteSpace: "nowrap"
+          }}>{step}</span>
+        </div>
+        {i < steps.length - 1 && (
+          <div style={{
+            flex: 1, height: 1, background: i < current ? "var(--g-500)" : "var(--border-1)",
+            margin: "0 8px", marginBottom: 14
+          }} />
+        )}
+      </div>
+    ))}
+  </div>
+);
+
+// ── 16. SELECT ─────────────────────────────────────────────────
+const Select = ({ label, options, value, onChange }) => {
+  const [open, setOpen] = useState(false);
+  return (
+    <div style={{ position: "relative", display: "flex", flexDirection: "column", gap: 5 }}>
+      {label && <label style={{
+        fontSize: 7.5, letterSpacing: "0.28em", color: "var(--g-500)",
+        textTransform: "uppercase", fontFamily: "var(--font)"
+      }}>{label}</label>}
+      <div onClick={() => setOpen(!open)} style={{
+        background: "var(--surface)", border: "1px solid var(--border-1)",
+        padding: "9px 12px", cursor: "pointer", display: "flex", justifyContent: "space-between",
+        alignItems: "center", position: "relative"
+      }}>
+        <span style={{
+          fontSize: 9, letterSpacing: "0.14em", fontFamily: "var(--font)",
+          color: value ? "var(--w-100)" : "var(--w-500)"
+        }}>
+          {value || "— SELECT OPTION —"}
+        </span>
+        <svg width="8" height="8" style={{ transform: open ? "rotate(180deg)" : "none", transition: "transform 0.2s" }}>
+          <polygon points="4,6 0,0 8,0" fill="var(--g-500)" />
+        </svg>
+        <div style={{ position: "absolute", inset: 2, border: "1px dashed var(--border-1)", pointerEvents: "none" }} />
+      </div>
+      {open && (
+        <div style={{
+          position: "absolute", top: "calc(100% + 2px)", left: 0, right: 0, background: "var(--header)",
+          border: "1px solid var(--g-700)", zIndex: 100, overflow: "hidden"
+        }}>
+          {options.map((opt, i) => (
+            <div key={i} onClick={() => { onChange(opt); setOpen(false); }} style={{
+              padding: "8px 12px", cursor: "pointer", fontSize: 8.5, letterSpacing: "0.14em",
+              fontFamily: "var(--font)", color: "var(--w-400)", textTransform: "uppercase",
+              borderBottom: i < options.length - 1 ? "1px solid var(--border-1)" : "none", transition: "background 0.1s",
+            }}
+              onMouseEnter={e => e.currentTarget.style.background = "rgba(255,215,0,0.05)"}
+              onMouseLeave={e => e.currentTarget.style.background = "transparent"}>
+              <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+                <div style={{ width: 3, height: 3, background: "var(--g-500)" }} />{opt}
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+// ── 17. MODAL ──────────────────────────────────────────────────
+const Modal = ({ open, onClose, title, children }) => {
+  if (!open) return null;
+  return (
+    <div style={{
+      position: "fixed", inset: 0, background: "rgba(0,0,0,0.85)", zIndex: 1000,
+      display: "flex", alignItems: "center", justifyContent: "center", backdropFilter: "blur(4px)"
+    }}>
+      <div style={{ position: "relative", maxWidth: 480, width: "90%", maxHeight: "80vh", overflow: "hidden" }}>
+        <TicketShell stubHeight={0}>
+          <div style={{ padding: "20px 20px 16px", position: "relative", zIndex: 8 }}>
+            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 16 }}>
+              <div>
+                <div style={{
+                  fontSize: 7, letterSpacing: "0.28em", color: "var(--g-700)",
+                  fontFamily: "var(--font)", textTransform: "uppercase", marginBottom: 4
+                }}>// CLASSIFIED DIALOGUE</div>
+                <div style={{
+                  fontSize: 11, fontWeight: 700, letterSpacing: "0.22em", textTransform: "uppercase",
+                  fontFamily: "var(--font)", color: "var(--g-300)"
+                }}>{title}</div>
+              </div>
+              <button onClick={onClose} style={{
+                background: "transparent", border: "1px solid var(--g-700)",
+                color: "var(--g-500)", width: 24, height: 24, cursor: "pointer", fontFamily: "var(--font)", fontSize: 10,
+                display: "flex", alignItems: "center", justifyContent: "center"
+              }}>×</button>
+            </div>
+            <Divider />
+            <div style={{
+              marginTop: 14, color: "var(--w-400)", fontSize: 8.5, lineHeight: 1.7,
+              letterSpacing: "0.12em", fontFamily: "var(--font)"
+            }}>{children}</div>
+            <div style={{ marginTop: 18, display: "flex", gap: 8, justifyContent: "flex-end" }}>
+              <Button variant="ghost" onClick={onClose}>CANCEL</Button>
+              <Button variant="primary" onClick={onClose}>CONFIRM</Button>
+            </div>
+          </div>
+        </TicketShell>
+      </div>
+    </div>
+  );
+};
+
+// ── 18. AVATAR ─────────────────────────────────────────────────
+const Avatar = ({ initials = "Ω", status }) => (
+  <div style={{ position: "relative", width: 40, height: 40 }}>
+    <div style={{
+      width: "100%", height: "100%", borderRadius: "50%", background: "var(--surface)",
+      border: "1px solid var(--g-700)", display: "flex", alignItems: "center", justifyContent: "center",
+      overflow: "hidden", position: "relative"
+    }}>
+      <GeometricOverlay />
+      <span style={{ fontSize: 13, color: "var(--g-300)", fontFamily: "var(--font)", zIndex: 7 }}>{initials}</span>
+    </div>
+    {status && (
+      <div className="pulse-anim" style={{
+        position: "absolute", bottom: 1, right: 1, width: 7, height: 7,
+        borderRadius: "50%", background: "var(--g-300)", border: "1px solid var(--bg)",
+        boxShadow: "0 0 6px var(--g-500)"
+      }} />
+    )}
+  </div>
+);
+
+// ── 19. FIELDSET ───────────────────────────────────────────────
+const Fieldset = ({ legend, children }) => (
+  <div style={{ border: "1px solid var(--border-1)", padding: "14px 16px", position: "relative", marginTop: 8 }}>
+    <div style={{
+      position: "absolute", top: -7, left: 12, background: "var(--bg)", padding: "0 6px",
+      fontSize: 7, letterSpacing: "0.28em", color: "var(--g-500)", textTransform: "uppercase", fontFamily: "var(--font)"
+    }}>
+      {legend}
+    </div>
+    <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>{children}</div>
+  </div>
+);
+
+// ── 20. STAT CARD ──────────────────────────────────────────────
+const StatCard = ({ label, value, unit, change, trend }) => (
+  <Punched>
+    <div style={{
+      position: "relative", background: "var(--surface)", border: "1px solid var(--border-1)",
+      padding: "14px 16px", overflow: "hidden"
+    }}>
+      <GrainOverlay strength={0.1} />
+      <div style={{ position: "relative", zIndex: 7 }}>
+        <div style={{
+          fontSize: 7, letterSpacing: "0.28em", color: "var(--g-700)", textTransform: "uppercase",
+          fontFamily: "var(--font)", marginBottom: 8
+        }}>{label}</div>
+        <div style={{ display: "flex", alignItems: "baseline", gap: 4 }}>
+          <span style={{
+            fontSize: 26, fontWeight: 700, letterSpacing: "0.04em",
+            fontFamily: "var(--font)", lineHeight: 1, color: "var(--w-100)"
+          }}>{value}</span>
+          {unit && <span style={{ fontSize: 9, color: "var(--g-500)", fontFamily: "var(--font)", letterSpacing: "0.14em" }}>{unit}</span>}
+        </div>
+        {change !== undefined && (
+          <div style={{
+            marginTop: 6, fontSize: 7.5, letterSpacing: "0.18em", fontFamily: "var(--font)",
+            color: trend === "up" ? "var(--g-300)" : trend === "down" ? "var(--r-500)" : "var(--w-500)"
+          }}>
+            {trend === "up" ? "▲" : trend === "down" ? "▼" : "—"} {change}
+          </div>
+        )}
+      </div>
+      <div style={{
+        position: "absolute", bottom: -20, right: -20, width: 60, height: 60,
+        borderRadius: "50%", background: "rgba(255,215,0,0.03)", pointerEvents: "none"
+      }} />
+    </div>
+  </Punched>
+);
+
+// ── 21. SIDEBAR ────────────────────────────────────────────────
+const Sidebar = ({ activeItem, setActiveItem }) => {
+  const items = [
+    { icon: "◈", label: "DASHBOARD", sub: "OVERVIEW" },
+    { icon: "◉", label: "INTEL", sub: "CLASSIFIED" },
+    { icon: "▣", label: "ASSETS", sub: "INVENTORY" },
+    { icon: "◆", label: "COMMS", sub: "ENCRYPTED" },
+    { icon: "⬡", label: "ANALYTICS", sub: "METRICS" },
+    { icon: "⊕", label: "SETTINGS", sub: "CONFIG" },
+  ];
+  return (
+    <Punched style={{ width: 160 }}>
+      <div style={{
+        background: "var(--header)", borderRight: "1px solid var(--border-1)",
+        display: "flex", flexDirection: "column", position: "relative", overflow: "hidden", height: "100%"
+      }}>
+        <GrainOverlay strength={0.13} />
+        <div style={{
+          position: "absolute", right: 0, top: 0, bottom: 0, width: 8,
+          background: "repeating-linear-gradient(180deg, transparent 0px, transparent 8px, var(--bg) 8px, var(--bg) 18px)",
+          zIndex: 10
+        }} />
+        <div style={{ padding: "12px 0", flex: 1, position: "relative", zIndex: 7 }}>
+          {items.map((item, i) => (
+            <button key={i} onClick={() => setActiveItem(item.label)} style={{
+              width: "100%", background: activeItem === item.label ? "rgba(255,215,0,0.05)" : "transparent",
+              border: "none", borderLeft: activeItem === item.label ? "2px solid var(--g-300)" : "2px solid transparent",
+              borderRight: "none", padding: "10px 14px", cursor: "pointer", textAlign: "left",
+              borderBottom: i < items.length - 1 ? "1px solid var(--border-1)" : "none",
+            }}>
+              <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
+                <span style={{ fontSize: 11, color: activeItem === item.label ? "var(--g-300)" : "var(--w-500)" }}>{item.icon}</span>
+                <div>
+                  <div style={{
+                    fontSize: 8, fontWeight: 600, letterSpacing: "0.18em", textTransform: "uppercase",
+                    color: activeItem === item.label ? "var(--g-300)" : "var(--w-400)", fontFamily: "var(--font)"
+                  }}>{item.label}</div>
+                  <div style={{ fontSize: 6, letterSpacing: "0.2em", color: "var(--g-700)", textTransform: "uppercase", fontFamily: "var(--font)" }}>{item.sub}</div>
+                </div>
+              </div>
+            </button>
+          ))}
+        </div>
+        <div style={{ padding: "12px 14px", borderTop: "1px solid var(--border-1)", position: "relative", zIndex: 7 }}>
+          <Barcode value="AGT-09-NEXUS" width={120} height={16} />
+        </div>
+      </div>
+    </Punched>
+  );
+};
+
+// ── 22. FOOTER ─────────────────────────────────────────────────
+const Footer = () => (
+  <Punched style={{ marginTop: 8 }}>
+    <div style={{
+      position: "relative", background: "var(--header)", borderTop: "1px solid var(--border-1)",
+      padding: "12px 24px", display: "flex", justifyContent: "space-between", alignItems: "center", overflow: "hidden"
+    }}>
+      <GrainOverlay strength={0.1} />
+      <div style={{ position: "relative", zIndex: 7 }}>
+        <Micro color="var(--g-700)">© NEXUS PROTOCOL — OMEGA DIVISION — CLEARANCE REQUIRED</Micro>
+      </div>
+      <div style={{ position: "relative", zIndex: 7 }}>
+        <Barcode value="NEXUS-FOOTER-SYS" width={100} height={14} />
+      </div>
+      <div style={{ position: "relative", zIndex: 7, display: "flex", gap: 12 }}>
+        <Micro color="var(--g-500)">v4.7.2</Micro>
+        <Micro color="var(--g-700)">BUILD-20470312</Micro>
+      </div>
+    </div>
+  </Punched>
+);
+
+// ══════════════════════════════════════════════════════════════
+//  DEMO PAGE
+// ══════════════════════════════════════════════════════════════
+export default function TicketPunchUIDemo() {
+  const [activeNavTab, setActiveNavTab] = useState("DASHBOARD");
+  const [activeSideItem, setActiveSideItem] = useState("DASHBOARD");
+  const [activeTab, setActiveTab] = useState(0);
+  const [toggleA, setToggleA] = useState(true);
+  const [toggleB, setToggleB] = useState(false);
+  const [modalOpen, setModalOpen] = useState(false);
+  const [selectVal, setSelectVal] = useState("");
+  const [inputVal, setInputVal] = useState("");
+
+  return (
+    <div style={{
+      fontFamily: "var(--font)", background: "var(--bg)", minHeight: "100vh",
+      color: "var(--text-primary)", position: "relative"
+    }}>
+      <FontInjector />
+
+      {/* Ambient gold glow */}
+      <div style={{
+        position: "fixed", top: "30%", left: "50%", transform: "translate(-50%,-50%)",
+        width: 600, height: 600, borderRadius: "50%",
+        background: "radial-gradient(circle, rgba(255,215,0,0.025) 0%, transparent 70%)",
+        pointerEvents: "none", zIndex: 0
+      }} />
+
+      <div style={{ display: "flex", flexDirection: "column", height: "100vh", overflow: "hidden" }}>
+        <Header activeTab={activeNavTab} setActiveTab={setActiveNavTab} />
+        <div style={{ display: "flex", flex: 1, overflow: "hidden" }}>
+          <Sidebar activeItem={activeSideItem} setActiveItem={setActiveSideItem} />
+
+          <div style={{ flex: 1, overflow: "auto", padding: 24 }}>
+
+            {/* Page Header */}
+            <div style={{ marginBottom: 28, display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
+              <div>
+                <Breadcrumbs items={["NEXUS", "DASHBOARD", "COMPONENT LAB"]} />
+                <h1 style={{
+                  fontSize: 22, fontWeight: 700, letterSpacing: "0.18em", textTransform: "uppercase",
+                  fontFamily: "var(--font)", marginTop: 8, lineHeight: 1, color: "var(--w-100)"
+                }}>TICKETPUNCH UI</h1>
+                <div style={{
+                  fontSize: 8, letterSpacing: "0.28em", color: "var(--g-700)", textTransform: "uppercase",
+                  fontFamily: "var(--font)", marginTop: 6
+                }}>
+                  DESIGN SYSTEM — OMEGA CLASSIFICATION — BUILD 2047.03.12
+                </div>
+              </div>
+              <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
+                <StatusPill status="active" label="ALL SYSTEMS GO" />
+                <Button variant="outline" size="sm">EXPORT</Button>
+              </div>
+            </div>
+
+            {/* STAT CARDS */}
+            <SectionLabel sub="// REAL-TIME METRICS — CLASSIFIED">SYSTEM OVERVIEW</SectionLabel>
+            <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12, marginBottom: 28 }}>
+              <StatCard label="ACTIVE NODES" value="847" change="+12 TODAY" trend="up" />
+              <StatCard label="THREAT LEVEL" value="2.7" unit="%" change="-0.4 DELTA" trend="down" />
+              <StatCard label="DATA STREAMS" value="1.4" unit="TB" change="+0.2 TB" trend="up" />
+              <StatCard label="UPTIME" value="99.9" unit="%" change="NOMINAL" trend="neutral" />
+            </div>
+
+            {/* MAIN TICKET CARD */}
+            <SectionLabel sub="// TICKET SHELL — PRIMARY CONTAINER">CLASSIFIED INTEL BRIEF</SectionLabel>
+            <div style={{ marginBottom: 28 }}>
+              <TicketShell stubHeight={68}>
+                <div style={{ padding: "28px 24px 80px", position: "relative", zIndex: 8 }}>
+                  <div style={{ display: "flex", gap: 20, alignItems: "flex-start" }}>
+                    <TerminalMask size={100} />
+                    <div style={{ flex: 1 }}>
+                      <div style={{
+                        fontSize: 7, letterSpacing: "0.34em", color: "var(--g-700)",
+                        textTransform: "uppercase", fontFamily: "var(--font)", marginBottom: 6
+                      }}>
+                        // OMEGA-NEXUS // DIRECTIVE 7749 // CLASSIFIED
+                      </div>
+                      <h2 style={{
+                        fontSize: 18, fontWeight: 700, letterSpacing: "0.18em", textTransform: "uppercase",
+                        fontFamily: "var(--font)", marginBottom: 10, lineHeight: 1.2, color: "var(--g-300)"
+                      }}>
+                        OPERATION<br />BLACKOUT
+                      </h2>
+                      <p style={{
+                        fontSize: 8.5, color: "var(--w-500)", lineHeight: 1.8,
+                        letterSpacing: "0.12em", fontFamily: "var(--font)", maxWidth: 420
+                      }}>
+                        AUTHORIZED PERSONNEL ONLY. MISSION PARAMETERS LOCKED PENDING CLEARANCE VERIFICATION.
+                        ALL COMMUNICATION ENCRYPTED VIA NEXUS-PROTOCOL AES-512.
+                      </p>
+                      <div style={{ marginTop: 14, display: "flex", gap: 8, flexWrap: "wrap" }}>
+                        <Badge variant="omega">OMEGA-7</Badge>
+                        <Badge variant="danger">TOP SECRET</Badge>
+                        <Badge variant="warning">ACTIVE</Badge>
+                        <Badge>NEXUS-PROTOCOL</Badge>
+                      </div>
+                    </div>
+                    <div style={{ display: "flex", flexDirection: "column", gap: 10, alignItems: "flex-end" }}>
+                      <Barcode value="OP-7749-BX-OMEGA" width={130} height={36} />
+                      <Micro color="var(--g-700)">ISSUED: 2047.03.12</Micro>
+                    </div>
+                  </div>
+                </div>
+                <div style={{
+                  position: "absolute", bottom: 0, left: 0, right: 0, height: 68, padding: "0 24px",
+                  display: "flex", alignItems: "center", justifyContent: "space-between", zIndex: 8
+                }}>
+                  <Micro color="var(--g-700)">REF: NEXUS-OP-7749</Micro>
+                  <div style={{ display: "flex", gap: 16 }}>
+                    <StatusPill status="active" label="MISSION ACTIVE" />
+                    <StatusPill status="warning" label="HIGH RISK" />
+                  </div>
+                </div>
+              </TicketShell>
+            </div>
+
+            {/* TABS + TABLE */}
+            <SectionLabel sub="// DATA MANAGEMENT INTERFACE">INTEL DATABASE</SectionLabel>
+            <div style={{ marginBottom: 28 }}>
+              <Card>
+                <Tabs tabs={["AGENTS", "MISSIONS", "ASSETS", "THREATS"]} active={activeTab} onSelect={setActiveTab} />
+                <div style={{ marginTop: 16 }}>
+                  <DataTable
+                    columns={["AGENT ID", "STATUS", "CLEARANCE", "ASSIGNMENT", "LAST ACTIVE"]}
+                    rows={[
+                      ["AGT-001 SPECTRE", <Badge variant="active">ACTIVE</Badge>, "OMEGA", "OP-7749", "0:04:22 AGO"],
+                      ["AGT-002 PHANTOM", <Badge variant="warning">STANDBY</Badge>, "DELTA", "OP-7700", "2:14:07 AGO"],
+                      ["AGT-003 WRAITH", <Badge variant="danger">COMPROMISED</Badge>, "GAMMA", "—", "6:55:13 AGO"],
+                      ["AGT-004 NEXUS", <Badge>OFFLINE</Badge>, "ALPHA", "OP-7801", "1D 04H AGO"],
+                    ]}
+                  />
+                </div>
+              </Card>
+            </div>
+
+            {/* BUTTONS */}
+            <SectionLabel sub="// INTERACTION PRIMITIVES">BUTTON SYSTEM</SectionLabel>
+            <div style={{ marginBottom: 28 }}>
+              <Card title="BUTTON VARIANTS" sub="ALL STATES + SIZES">
+                <div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginBottom: 16 }}>
+                  <Button variant="primary">EXECUTE</Button>
+                  <Button variant="secondary">STANDBY</Button>
+                  <Button variant="outline">CONFIRM</Button>
+                  <Button variant="ghost">DISMISS</Button>
+                  <Button variant="danger">ABORT</Button>
+                  <Button variant="success">SECURE</Button>
+                  <Button variant="primary" disabled>LOCKED</Button>
+                  <Button variant="outline" size="sm">SMALL</Button>
+                  <Button variant="primary" size="lg">LAUNCH SEQUENCE</Button>
+                  <Tooltip label="OMEGA CLASSIFIED FUNCTION">
+                    <Button variant="secondary" icon="◈">WITH ICON</Button>
+                  </Tooltip>
+                </div>
+                <Divider label="ICON VARIANTS" />
+                <div style={{ display: "flex", gap: 8, marginTop: 12 }}>
+                  {["◈", "◉", "▣", "◆", "⊕"].map((icon, i) => (
+                    <Button key={i} variant="secondary" size="sm" icon={icon}>{icon === "⊕" ? "ADD" : ""}</Button>
+                  ))}
+                </div>
+              </Card>
+            </div>
+
+            {/* FORM ELEMENTS */}
+            <SectionLabel sub="// DATA ENTRY SYSTEM">FORM ELEMENTS</SectionLabel>
+            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, marginBottom: 28 }}>
+              <Card title="TEXT INPUTS" sub="TERMINAL STYLE">
+                <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
+                  <Input label="AGENT ID" placeholder="ENTER AGENT IDENTIFIER"
+                    value={inputVal} onChange={e => setInputVal(e.target.value)} hint="FORMAT: AGT-XXX-CLEARANCE" />
+                  <Input label="AUTHORIZATION CODE" placeholder="••••••••" type="password" />
+                  <Input label="COORDINATES" placeholder="00.000000, 00.000000" prefix="GEO" suffix="WGS84" />
+                  <Fieldset legend="COMMS CHANNEL">
+                    <Input label="FREQUENCY" placeholder="XXX.XXXXX MHZ" prefix="RF" />
+                    <Toggle checked={toggleA} onChange={() => setToggleA(!toggleA)} label="ENCRYPTION ENABLED" />
+                  </Fieldset>
+                </div>
+              </Card>
+              <Card title="SELECTORS + TOGGLES" sub="CONTROL ELEMENTS">
+                <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
+                  <Select label="CLEARANCE LEVEL" options={["ALPHA", "BETA", "GAMMA", "DELTA", "OMEGA"]}
+                    value={selectVal} onChange={setSelectVal} />
+                  <Select label="MISSION STATUS" options={["ACTIVE", "STANDBY", "COMPLETED", "ABORT", "CLASSIFIED"]}
+                    value="" onChange={() => { }} />
+                  <Divider label="TOGGLES" />
+                  <Toggle checked={toggleA} onChange={() => setToggleA(!toggleA)} label="ACTIVE SURVEILLANCE" />
+                  <Toggle checked={toggleB} onChange={() => setToggleB(!toggleB)} label="STEALTH MODE" />
+                  <Toggle checked={true} onChange={() => { }} label="ENCRYPTION LAYER" />
+                  <Divider />
+                  <div>
+                    <Micro color="var(--g-500)">PROGRESS INDICATORS</Micro>
+                    <div style={{ marginTop: 10, display: "flex", flexDirection: "column", gap: 10 }}>
+                      <ProgressBar value={87} label="UPLINK SYNC" color="var(--g-300)" />
+                      <ProgressBar value={44} label="THREAT SCAN" color="var(--p-500)" />
+                      <ProgressBar value={12} label="BREACH RISK" color="var(--r-500)" />
+                    </div>
+                  </div>
+                </div>
+              </Card>
+            </div>
+
+            {/* STATUS + BADGES */}
+            <SectionLabel sub="// CLASSIFICATION LABELS">STATUS SYSTEM</SectionLabel>
+            <div style={{ marginBottom: 28 }}>
+              <Card title="BADGES + STATUS PILLS" sub="ALL VARIANTS">
+                <div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginBottom: 16 }}>
+                  <StatusPill status="active" />
+                  <StatusPill status="inactive" label="OFFLINE" />
+                  <StatusPill status="warning" label="STANDBY" />
+                  <StatusPill status="danger" label="BREACH" />
+                  <StatusPill status="pending" label="SYNCING" />
+                </div>
+                <Divider label="BADGES" />
+                <div style={{ display: "flex", flexWrap: "wrap", gap: 6, marginTop: 12 }}>
+                  <Badge variant="omega">OMEGA</Badge>
+                  <Badge variant="active">ACTIVE</Badge>
+                  <Badge variant="danger">COMPROMISED</Badge>
+                  <Badge variant="warning">ALERT</Badge>
+                  <Badge>DEFAULT</Badge>
+                  <Badge>CLASSIFIED</Badge>
+                  <Badge>NEXUS</Badge>
+                </div>
+              </Card>
+            </div>
+
+            {/* ACCORDION + STEPPER */}
+            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, marginBottom: 28 }}>
+              <div>
+                <SectionLabel sub="// COLLAPSIBLE SECTIONS">ACCORDION</SectionLabel>
+                <Card>
+                  <AccordionItem title="MISSION PARAMETERS">
+                    PRIMARY OBJECTIVE: INFILTRATE NEXUS SIGMA NODE. SECONDARY: EXTRACT DATA PACKAGE DELTA-7.
+                    ABORT CODE: 4419-OMEGA. DURATION: 72H MAX.
+                  </AccordionItem>
+                  <AccordionItem title="AGENT DOSSIER">
+                    AGENT: SPECTRE-9 // RANK: SENIOR OPERATIVE // CLEARANCE: OMEGA //
+                    STATUS: FIELD ACTIVE // DEPLOYMENTS: 47 COMPLETED.
+                  </AccordionItem>
+                  <AccordionItem title="CLASSIFIED INTEL">
+                    [REDACTED — CLEARANCE LEVEL OMEGA REQUIRED. CONTACT DIVISION COMMANDER FOR ACCESS CREDENTIALS.]
+                  </AccordionItem>
+                </Card>
+              </div>
+              <div>
+                <SectionLabel sub="// MISSION PROGRESS WIZARD">STEPPER</SectionLabel>
+                <Card>
+                  <Stepper steps={["BRIEF", "DEPLOY", "ACTIVE", "EXTRACT", "DEBRIEF"]} current={2} />
+                  <div style={{ marginTop: 20 }}>
+                    <Divider label="CURRENT PHASE" />
+                    <div style={{ marginTop: 12, padding: "12px", border: "1px solid var(--g-900)", position: "relative" }}>
+                      <div style={{
+                        fontSize: 7, letterSpacing: "0.28em", color: "var(--g-300)",
+                        fontFamily: "var(--font)", textTransform: "uppercase", marginBottom: 6
+                      }}>▶ PHASE 3: ACTIVE DEPLOYMENT</div>
+                      <div style={{ fontSize: 8, color: "var(--w-500)", lineHeight: 1.7, letterSpacing: "0.12em", fontFamily: "var(--font)" }}>
+                        AGENT SPECTRE-9 IS CURRENTLY ACTIVE IN THE FIELD. ALL VITALS NOMINAL.
+                        COMMS ENCRYPTED. ETA TO OBJECTIVE: 04:22:11.
+                      </div>
+                    </div>
+                  </div>
+                </Card>
+              </div>
+            </div>
+
+            {/* ALERTS + LOADER */}
+            <SectionLabel sub="// SYSTEM NOTIFICATIONS">ALERTS + LOADERS</SectionLabel>
+            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, marginBottom: 28 }}>
+              <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
+                <Alert type="success" title="OPERATION SECURED"
+                  message="NEXUS NODE ALPHA SECURED. ALL OBJECTIVES COMPLETE. EXTRACTION CONFIRMED." />
+                <Alert type="warning" title="SIGNAL INTERFERENCE"
+                  message="COMMS DEGRADED ON CHANNEL 7. SWITCHING TO BACKUP FREQUENCY 449.7750 MHZ." />
+                <Alert type="danger" title="BREACH DETECTED"
+                  message="UNAUTHORIZED ACCESS ATTEMPT — NODE SIGMA. LOCKDOWN INITIATED. STANDBY." onClose={() => { }} />
+                <Alert type="info" title="ROUTINE SCAN COMPLETE"
+                  message="ALL SYSTEMS NOMINAL. NEXT SCHEDULED SWEEP IN 04:00:00." />
+              </div>
+              <Card title="SYSTEM STATES" sub="LOADING INDICATORS">
+                <div style={{ display: "flex", gap: 20, alignItems: "center", justifyContent: "center", padding: 20 }}>
+                  {[["SMALL", 28], ["MEDIUM", 44], ["LARGE", 64]].map(([lbl, sz]) => (
+                    <div key={lbl} style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 8 }}>
+                      <Spinner size={sz} /><Micro color="var(--g-500)">{lbl}</Micro>
+                    </div>
+                  ))}
+                </div>
+                <Divider label="AVATARS" />
+                <div style={{ display: "flex", gap: 10, marginTop: 12, alignItems: "center" }}>
+                  <Avatar initials="Ω" status="active" />
+                  <Avatar initials="Σ" status="active" />
+                  <Avatar initials="Δ" />
+                  <Avatar initials="Γ" />
+                  <div style={{ flex: 1 }}>
+                    <div style={{ fontSize: 8.5, letterSpacing: "0.16em", fontFamily: "var(--font)", color: "var(--g-300)" }}>OMEGA TEAM</div>
+                    <div style={{
+                      fontSize: 7, letterSpacing: "0.18em", color: "var(--g-700)", fontFamily: "var(--font)",
+                      textTransform: "uppercase", marginTop: 2
+                    }}>4 AGENTS // 2 ACTIVE</div>
+                  </div>
+                </div>
+              </Card>
+            </div>
+
+            {/* MODAL TRIGGER */}
+            <SectionLabel sub="// OVERLAY SYSTEM">MODAL SYSTEM</SectionLabel>
+            <div style={{ marginBottom: 28 }}>
+              <Card title="MODAL TRIGGER" sub="TICKET-SHELL OVERLAY">
+                <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
+                  <Button variant="outline" onClick={() => setModalOpen(true)}>OPEN CLASSIFIED BRIEF</Button>
+                  <Tooltip label="OPENS A FULL TICKET-SHELL MODAL">
+                    <Button variant="ghost" icon="◈" />
+                  </Tooltip>
+                </div>
+              </Card>
+            </div>
+
+            {/* TYPOGRAPHY */}
+            <SectionLabel sub="// IBM PLEX MONO TYPE SYSTEM">TYPOGRAPHY</SectionLabel>
+            <div style={{ marginBottom: 28 }}>
+              <Card title="TYPE SCALE + WEIGHTS">
+                <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
+                  {[
+                    { size: 22, weight: 700, text: "DISPLAY — OMEGA PROTOCOL", color: "var(--g-300)" },
+                    { size: 16, weight: 700, text: "H1 — CLASSIFIED DIRECTIVE", color: "var(--w-100)" },
+                    { size: 13, weight: 600, text: "H2 — NEXUS SYSTEM HEADER", color: "var(--w-200)" },
+                    { size: 11, weight: 600, text: "H3 — OPERATION BRIEFING", color: "var(--w-300)" },
+                    { size: 9.5, weight: 500, text: "H4 — SUBHEADING ALPHA", color: "var(--w-300)" },
+                    { size: 8.5, weight: 400, text: "BODY — STANDARD INTEL REPORT BODY TEXT FOR EXTENDED BRIEFINGS", color: "var(--w-400)" },
+                    { size: 7.5, weight: 400, text: "SMALL — SECONDARY SUPPORT LABELS AND DESCRIPTORS", color: "var(--w-500)" },
+                    { size: 7, weight: 400, text: "MICRO — OMEGA-7749 // COPYRIGHT NEXUS DIVISION // CLEARANCE REQUIRED", color: "var(--g-700)" },
+                  ].map((t, i) => (
+                    <div key={i} style={{
+                      display: "flex", alignItems: "baseline", gap: 16,
+                      borderBottom: i < 7 ? "1px solid var(--border-1)" : "none", paddingBottom: 6
+                    }}>
+                      <span style={{ fontSize: 7, color: "var(--g-700)", width: 28, fontFamily: "var(--font)", letterSpacing: "0.1em" }}>{t.size}PX</span>
+                      <span style={{
+                        fontSize: t.size, fontWeight: t.weight, letterSpacing: "0.14em",
+                        textTransform: "uppercase", fontFamily: "var(--font)", color: t.color
+                      }}>{t.text}</span>
+                    </div>
+                  ))}
+                </div>
+              </Card>
+            </div>
+
+            {/* COLOR PALETTE */}
+            <SectionLabel sub="// DESIGN TOKENS — COLOR SYSTEM">COLOR PALETTE</SectionLabel>
+            <div style={{ marginBottom: 28 }}>
+              <Card title="TOKEN PALETTE" sub="TICKETPUNCH DESIGN LANGUAGE">
+                <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 8 }}>
+                  {[
+                    { scheme: "DARK", name: "D-900", val: "#060606" },
+                    { scheme: "DARK", name: "D-800", val: "#0A0A0A" },
+                    { scheme: "DARK", name: "D-700", val: "#0f0f0f" },
+                    { scheme: "DARK", name: "D-600", val: "#1e1e1e" },
+                    { scheme: "DARK", name: "D-500", val: "#2a2a2a" },
+                    { scheme: "WHITE", name: "W-100", val: "#FFFFFF" },
+                    { scheme: "WHITE", name: "W-200", val: "#EFEFEF" },
+                    { scheme: "WHITE", name: "W-300", val: "#CDCDCD" },
+                    { scheme: "WHITE", name: "W-400", val: "#AAAAAA" },
+                    { scheme: "WHITE", name: "W-500", val: "#888888" },
+                    { scheme: "GOLD", name: "G-100", val: "#FFF4CC" },
+                    { scheme: "GOLD", name: "G-300", val: "#FFD700" },
+                    { scheme: "GOLD", name: "G-500", val: "#C8960C" },
+                    { scheme: "GOLD", name: "G-700", val: "#7A5800" },
+                    { scheme: "GOLD", name: "G-900", val: "#3D2C00" },
+                    { scheme: "RED", name: "R-100", val: "#FFE5E5" },
+                    { scheme: "RED", name: "R-300", val: "#FF6666" },
+                    { scheme: "RED", name: "R-500", val: "#FF3333" },
+                    { scheme: "RED", name: "R-700", val: "#CC0000" },
+                    { scheme: "RED", name: "R-900", val: "#550000" },
+                    { scheme: "PEACH", name: "P-100", val: "#FFF0EB" },
+                    { scheme: "PEACH", name: "P-300", val: "#FFBFA8" },
+                    { scheme: "PEACH", name: "P-500", val: "#FF8C69" },
+                    { scheme: "PEACH", name: "P-700", val: "#C45A35" },
+                    { scheme: "PEACH", name: "P-900", val: "#5C2010" },
+                  ].map((c, i) => (
+                    <div key={i} style={{ display: "flex", flexDirection: "column", gap: 4 }}>
+                      {i % 5 === 0 && (
+                        <div style={{
+                          fontSize: 6.5, letterSpacing: "0.22em", color: "var(--w-400)",
+                          fontFamily: "var(--font)", textTransform: "uppercase", marginBottom: 2, fontWeight: 600
+                        }}>{c.scheme}</div>
+                      )}
+                      {i % 5 !== 0 && <div style={{ height: 15 }} />}
+                      <div style={{
+                        height: 32, background: c.val, border: "1px solid var(--border-1)",
+                        boxShadow: ["GOLD", "RED", "PEACH"].includes(c.scheme) ? `0 0 10px ${c.val}55` : "none"
+                      }} />
+                      <div style={{
+                        fontSize: 6.5, letterSpacing: "0.18em", color: "var(--w-500)",
+                        fontFamily: "var(--font)", textTransform: "uppercase"
+                      }}>{c.name}</div>
+                      <div style={{ fontSize: 6, letterSpacing: "0.12em", color: "var(--g-700)", fontFamily: "var(--font)" }}>{c.val}</div>
+                    </div>
+                  ))}
+                </div>
+              </Card>
+            </div>
+
+            {/* PRIMITIVES */}
+            <SectionLabel sub="// CORE VISUAL PRIMITIVES">DESIGN PRIMITIVES</SectionLabel>
+            <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16, marginBottom: 28 }}>
+              <Card title="GRAIN OVERLAY" sub="STATIC NOISE TEXTURE" style={{ minHeight: 120 }}>
+                <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
+                  {[0.08, 0.18, 0.28].map((s, i) => (
+                    <div key={i} style={{ position: "relative", height: 28, background: "var(--header)", border: "1px solid var(--border-1)" }}>
+                      <GrainOverlay strength={s} />
+                      <div style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center", zIndex: 7 }}>
+                        <Micro color="var(--g-500)">{(s * 100).toFixed(0)}% STRENGTH</Micro>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </Card>
+              <Card title="BARCODES" sub="GENERATIVE PATTERN">
+                <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
+                  <Barcode value="OMEGA-7749-XX" width={160} height={32} />
+                  <Barcode value="NEXUS-ALPHA-01" width={160} height={20} />
+                  <Barcode value="CLASSIFIED" width={160} height={14} />
+                </div>
+              </Card>
+              <Card title="TERMINAL MASK" sub="SCROLLING INTEL FEED">
+                <div style={{ display: "flex", gap: 12, justifyContent: "center" }}>
+                  <TerminalMask size={90} /><TerminalMask size={70} />
+                </div>
+              </Card>
+            </div>
+
+            <Footer />
+          </div>
+        </div>
+      </div>
+
+      <Modal open={modalOpen} onClose={() => setModalOpen(false)} title="CLASSIFIED DIRECTIVE">
+        <p style={{ marginBottom: 12 }}>
+          THIS DOCUMENT CONTAINS INFORMATION OF THE HIGHEST CLASSIFICATION.
+          UNAUTHORIZED DISCLOSURE IS A VIOLATION OF NEXUS PROTOCOL ARTICLE 7-OMEGA.
+        </p>
+        <p>
+          OPERATION BLACKOUT IS AUTHORIZED BY DIVISION COMMANDER NEXUS-1.
+          ALL AGENTS MUST CONFIRM RECEIPT VIA SECURE CHANNEL BEFORE DEPLOYMENT.
+        </p>
+        <div style={{ marginTop: 16 }}>
+          <Barcode value="DIRECTIVE-4419-OMEGA" width={160} height={24} />
+        </div>
+      </Modal>
+    </div>
+  );
+}

CyberTicket.jsx

@@ -0,0 +1,646 @@
+import { useState, useEffect, useRef } from "react";
+
+const FONT_URL = "https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&display=swap";
+
+const TERMINAL_LINES = [
+  "INIT SEQUENCE 0x4F2A...",
+  "AUTH TOKEN: ██████████████",
+  "SCAN FREQ   847.221 MHz",
+  "SECTOR      [CLASSIFIED]",
+  "NODE_ID     NX-9912-DELTA",
+  "TIMESTAMP   2025.03.06",
+  "CLEARANCE   LEVEL-OMEGA",
+  "STATUS      AUTHORIZED",
+  "PAYLOAD     ENCRYPTED",
+  "UPLINK      ACTIVE",
+  "SIGNAL      ████░░░░ 61%",
+  "VERIFY      SHA256:c0d3f",
+  "MATRIX      7×7 LATTICE",
+  "HASH        0xDEADBEEF",
+  "PING        12.4ms OK",
+  "TRACE       DISABLED",
+  "VAULT       SEALED",
+  "PROTOCOL    OMEGA-9",
+  "ENTROPY     HIGH",
+  "FRAME       #00441",
+  "BUFFER      FLUSHED",
+  "CIPHER      AES-256",
+  "RELAY       PROXIED",
+  "ECHO        SILENT",
+  "LOCK        ENGAGED",
+  "GRID REF    44.0N 76.2W",
+  "KERNEL      3.14.159",
+  "DAEMON      RUNNING",
+  "WATCHDOG    ARMED",
+  "ROUTE       OBFUSCATED",
+];
+
+// ── Noise / grain canvas ──────────────────────────────────────────────────────
+function GrainOverlay({ strength = 0.18 }) {
+  const canvasRef = useRef();
+  const tick = useRef(0);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    let raf;
+
+    const draw = () => {
+      tick.current++;
+      if (tick.current % 2 !== 0) { raf = requestAnimationFrame(draw); return; }
+      const { width, height } = canvas;
+      const img = ctx.createImageData(width, height);
+      const d = img.data;
+      for (let i = 0; i < d.length; i += 4) {
+        const px = i / 4;
+        const x = px % width;
+        const y = Math.floor(px / width);
+        const cx = x / width - 0.5, cy = y / height - 0.5;
+        const dist = Math.sqrt(cx * cx + cy * cy);
+        const vignette = Math.min(1, dist * 2.2);
+        const noise = (Math.random() - 0.5) * 255 * (strength + vignette * 0.18);
+        d[i] = d[i + 1] = d[i + 2] = 128 + noise;
+        d[i + 3] = Math.floor(18 + vignette * 30);
+      }
+      ctx.putImageData(img, 0, 0);
+      raf = requestAnimationFrame(draw);
+    };
+
+    const resize = () => {
+      canvas.width = canvas.offsetWidth;
+      canvas.height = canvas.offsetHeight;
+    };
+    resize();
+    draw();
+    window.addEventListener("resize", resize);
+    return () => { cancelAnimationFrame(raf); window.removeEventListener("resize", resize); };
+  }, [strength]);
+
+  return (
+    <canvas
+      ref={canvasRef}
+      style={{
+        position: "absolute", inset: 0, width: "100%", height: "100%",
+        pointerEvents: "none", mixBlendMode: "overlay", zIndex: 10,
+      }}
+    />
+  );
+}
+
+// ── SVG geometric overlay ─────────────────────────────────────────────────────
+function GeometricOverlay() {
+  return (
+    <svg
+      viewBox="0 0 480 860"
+      style={{
+        position: "absolute", inset: 0, width: "100%", height: "100%",
+        pointerEvents: "none", zIndex: 5, opacity: 0.08,
+      }}
+      preserveAspectRatio="none"
+    >
+      <polygon points="0,0 72,0 0,72" fill="none" stroke="white" strokeWidth="0.8" />
+      <polygon points="480,0 408,0 480,72" fill="none" stroke="white" strokeWidth="0.8" />
+      <polygon points="0,860 72,860 0,788" fill="none" stroke="white" strokeWidth="0.8" />
+      <polygon points="480,860 408,860 480,788" fill="none" stroke="white" strokeWidth="0.8" />
+      {[0.2, 0.4, 0.6, 0.8].map((t) => (
+        <line key={t} x1={480 * t} y1="0" x2={480 * t} y2="860" stroke="white" strokeWidth="0.4" />
+      ))}
+      {[0.25, 0.5, 0.75].map((t) => (
+        <line key={t} x1="0" y1={860 * t} x2="480" y2={860 * t} stroke="white" strokeWidth="0.4" />
+      ))}
+      <line x1="240" y1="430" x2="0" y2="0" stroke="white" strokeWidth="0.3" />
+      <line x1="240" y1="430" x2="480" y2="0" stroke="white" strokeWidth="0.3" />
+      <line x1="240" y1="430" x2="0" y2="860" stroke="white" strokeWidth="0.3" />
+      <line x1="240" y1="430" x2="480" y2="860" stroke="white" strokeWidth="0.3" />
+      <circle cx="240" cy="430" r="200" fill="none" stroke="white" strokeWidth="0.5" />
+    </svg>
+  );
+}
+
+// ── Terminal code cascade ─────────────────────────────────────────────────────
+function TerminalMask() {
+  const [offset, setOffset] = useState(0);
+  const [glitch, setGlitch] = useState({ row: -1, px: 0 });
+
+  useEffect(() => {
+    const iv = setInterval(() => {
+      setOffset((o) => (o + 1) % TERMINAL_LINES.length);
+    }, 120);
+    const gv = setInterval(() => {
+      setGlitch({ row: Math.floor(Math.random() * 18), px: (Math.random() - 0.5) * 8 });
+      setTimeout(() => setGlitch({ row: -1, px: 0 }), 80);
+    }, 900);
+    return () => { clearInterval(iv); clearInterval(gv); };
+  }, []);
+
+  const visible = Array.from({ length: 20 }, (_, i) =>
+    TERMINAL_LINES[(offset + i) % TERMINAL_LINES.length]
+  );
+
+  return (
+    <div style={{
+      width: "100%", height: "100%",
+      background: "#000",
+      borderRadius: "50%",
+      overflow: "hidden",
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "center",
+      padding: "18px 14px",
+      gap: 0,
+      position: "relative",
+    }}>
+      <div style={{
+        position: "absolute", inset: 0, borderRadius: "50%",
+        background: "radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.72) 100%)",
+        zIndex: 2, pointerEvents: "none",
+      }} />
+      {visible.map((line, i) => (
+        <div key={i} style={{
+          fontFamily: "'IBM Plex Mono', monospace",
+          fontSize: "9.5px",
+          fontWeight: i === 0 ? 700 : 400,
+          letterSpacing: "0.08em",
+          color: i === 0 ? "#FFFFFF" : i < 3 ? "#D8D8D8" : "#888",
+          lineHeight: "1.55",
+          opacity: i === 0 ? 1 : Math.max(0.18, 1 - i * 0.045),
+          transform: glitch.row === i ? `translateX(${glitch.px}px)` : "none",
+          whiteSpace: "nowrap",
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          transition: "transform 0.04s",
+          position: "relative",
+          zIndex: 3,
+        }}>
+          {i === 0 ? "▶ " : "  "}{line}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// ── Barcode SVG ───────────────────────────────────────────────────────────────
+function Barcode() {
+  const bars = Array.from({ length: 60 }, (_, i) => {
+    const w = [1, 1, 2, 1, 3, 1, 2, 1, 1, 2][i % 10];
+    return { w, gap: [2, 1, 2, 3, 1, 2, 1, 2, 3, 1][i % 10] };
+  });
+  return (
+    <svg width="160" height="36" viewBox="0 0 160 36">
+      {bars.reduce((acc, bar, i) => {
+        const x = acc.x;
+        acc.elements.push(
+          <rect key={i} x={x} y={2} width={bar.w} height={28} fill="white" />
+        );
+        acc.x += bar.w + bar.gap;
+        return acc;
+      }, { x: 2, elements: [] }).elements}
+    </svg>
+  );
+}
+
+// ── TICKET SHELL with authentic physical edges ────────────────────────────────
+// Renders the outer ticket shape as a single SVG clip-path with:
+//   • Scalloped top & bottom edges (zigzag perforations)
+//   • Semicircle punch-outs on both sides at the tear line
+//   • Punched corner rounds
+//   • A perforated dashed-border inner stroke
+function TicketShell({ children, stubHeight = 120 }) {
+  const W = 460;       // SVG viewBox width
+  const H = 820;       // SVG viewBox height
+  const R = 14;        // corner radius
+  const PR = 9;        // top/bottom diamond tooth size
+  const SR = 11;       // side diamond notch size (tear notch)
+  const tearY = H - stubHeight; // Y where tear line sits
+
+  // Diamond zigzag teeth left→right: dir=-1 teeth UP, dir=+1 teeth DOWN
+  const zigzagLR = (x0, x1, y, dir) => {
+    const count = Math.floor((x1 - x0) / (PR * 2.2));
+    const step = (x1 - x0) / count;
+    let d = "";
+    for (let i = 0; i < count; i++) {
+      const mx = x0 + i * step + step / 2;
+      const ex = x0 + (i + 1) * step;
+      d += ` L ${mx} ${y + dir * PR} L ${ex} ${y}`;
+    }
+    return d;
+  };
+
+  // Diamond zigzag teeth right→left (bottom edge return)
+  const zigzagRL = (x0, x1, y, dir) => {
+    const count = Math.floor((x1 - x0) / (PR * 2.2));
+    const step = (x1 - x0) / count;
+    let d = "";
+    for (let i = count - 1; i >= 0; i--) {
+      const mx = x0 + i * step + step / 2;
+      const ex = x0 + i * step;
+      d += ` L ${mx} ${y + dir * PR} L ${ex} ${y}`;
+    }
+    return d;
+  };
+
+  const pad = 2;
+  const x0 = pad + R, x1 = W - pad - R;
+  const y0 = pad, y1 = H - pad;
+
+  // Right side semicircle at tearY (bites into card from right)
+  // Left side semicircle at tearY (bites into card from left)
+  const rightX = W - pad;
+  const leftX = pad;
+
+  // Build SVG path for clip
+  const path = [
+    `M ${x0} ${y0}`,
+    // top diamond zigzag edge →
+    zigzagLR(x0, x1, y0, -1),
+    // top-right corner
+    `L ${W - pad - R} ${y0}`,
+    `Q ${W - pad} ${y0} ${W - pad} ${y0 + R}`,
+    // right side down to tear notch
+    `L ${rightX} ${tearY - SR}`,
+    // semi-diamond bite: two lines forming a V-point inward
+    `L ${rightX - SR} ${tearY}`,
+    `L ${rightX} ${tearY + SR}`,
+    // right side continues down
+    `L ${rightX} ${y1 - R}`,
+    // bottom-right corner
+    `Q ${rightX} ${y1} ${x1} ${y1}`,
+    // bottom diamond zigzag edge ←
+    `L ${x1} ${y1}`,
+    zigzagRL(x0, x1, y1, 1),
+    // bottom-left corner
+    `L ${x0} ${y1}`,
+    `Q ${leftX} ${y1} ${leftX} ${y1 - R}`,
+    // left side up from bottom to tear notch
+    `L ${leftX} ${tearY + SR}`,
+    // semi-diamond bite: two lines forming a V-point inward from left
+    `L ${leftX + SR} ${tearY}`,
+    `L ${leftX} ${tearY - SR}`,
+    // left side up to top
+    `L ${leftX} ${y0 + R}`,
+    // top-left corner
+    `Q ${leftX} ${y0} ${x0} ${y0}`,
+    `Z`,
+  ].join(" ");
+
+  const clipId = "ticket-clip";
+  const innerId = "ticket-inner";
+
+  return (
+    <div style={{ position: "relative", width: "100%", maxWidth: 460 }}>
+      {/* SVG defs for clip path */}
+      <svg width="0" height="0" style={{ position: "absolute" }}>
+        <defs>
+          <clipPath id={clipId} clipPathUnits="userSpaceOnUse">
+            <path d={path} />
+          </clipPath>
+        </defs>
+      </svg>
+
+      {/* Outer shadow/glow layer */}
+      <div style={{
+        position: "absolute",
+        inset: -2,
+        borderRadius: 18,
+        boxShadow: "0 40px 100px rgba(0,0,0,0.95), 0 0 0 1px #1a1a1a",
+        pointerEvents: "none",
+        zIndex: 0,
+      }} />
+
+      {/* The actual ticket content clipped to shape */}
+      <div
+        style={{
+          position: "relative",
+          width: "100%",
+          clipPath: `url(#${clipId})`,
+          // Fallback border for browsers without clipPath
+        }}
+      >
+        {/* SVG border drawn on top of content */}
+        <svg
+          viewBox={`0 0 ${W} ${H}`}
+          width="100%"
+          style={{
+            position: "absolute", inset: 0, width: "100%", height: "100%",
+            pointerEvents: "none", zIndex: 50,
+          }}
+          preserveAspectRatio="none"
+        >
+          {/* Outer border */}
+          <path
+            d={path}
+            fill="none"
+            stroke="#2e2e2e"
+            strokeWidth="1.2"
+          />
+          {/* Inner inset border */}
+          <path
+            d={path}
+            fill="none"
+            stroke="#1e1e1e"
+            strokeWidth="3"
+            strokeDasharray="4 3"
+            opacity="0.5"
+          />
+
+          {/* Tear-line dashed rule */}
+          <line
+            x1={pad + SR + 4} y1={tearY}
+            x2={W - pad - SR - 4} y2={tearY}
+            stroke="#2a2a2a"
+            strokeWidth="1"
+            strokeDasharray="5 4"
+          />
+          {/* Tear scissors icon hint */}
+          <text x={W / 2 - 10} y={tearY - 5} fill="#333" fontSize="9" fontFamily="monospace" textAnchor="middle">✂ TEAR</text>
+
+          {/* Corner punch holes — diamond arrowhead shapes */}
+          {[
+            [pad + 28, pad + 28],
+            [W - pad - 28, pad + 28],
+            [pad + 28, H - pad - 28],
+            [W - pad - 28, H - pad - 28],
+          ].map(([cx, cy], i) => {
+            const ro = 9;
+            const ri = 4.5;
+            return (
+              <g key={i}>
+                <polygon
+                  points={`${cx},${cy - ro} ${cx + ro},${cy} ${cx},${cy + ro} ${cx - ro},${cy}`}
+                  fill="#0A0A0A" stroke="#2e2e2e" strokeWidth="1"
+                />
+                <polygon
+                  points={`${cx},${cy - ri} ${cx + ri},${cy} ${cx},${cy + ri} ${cx - ri},${cy}`}
+                  fill="none" stroke="#252525" strokeWidth="0.8"
+                />
+              </g>
+            );
+          })}
+
+          {/* Perforation diamond dots along tear line */}
+          {Array.from({ length: 18 }, (_, i) => {
+            const spacing = (W - pad * 2 - SR * 2 - 20) / 17;
+            const x = pad + SR + 10 + i * spacing;
+            const r = 2.2;
+            return (
+              <polygon
+                key={i}
+                points={`${x},${tearY - r} ${x + r},${tearY} ${x},${tearY + r} ${x - r},${tearY}`}
+                fill="#252525"
+              />
+            );
+          })}
+        </svg>
+
+        {children}
+      </div>
+    </div>
+  );
+}
+
+// ── Main component ────────────────────────────────────────────────────────────
+export default function CyberTicket() {
+  const [pulse, setPulse] = useState(false);
+
+  useEffect(() => {
+    if (!document.getElementById("ibm-plex-mono")) {
+      const link = document.createElement("link");
+      link.id = "ibm-plex-mono";
+      link.rel = "stylesheet";
+      link.href = FONT_URL;
+      document.head.appendChild(link);
+    }
+    const iv = setInterval(() => setPulse((p) => !p), 1400);
+    return () => clearInterval(iv);
+  }, []);
+
+  const STUB_H = 130; // px — must roughly match SVG tearY portion
+
+  return (
+    <div
+      style={{
+        minHeight: "100vh",
+        background: "#060606",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: "60px 16px",
+        fontFamily: "'IBM Plex Mono', monospace",
+        position: "relative",
+        overflow: "hidden",
+      }}
+    >
+      {/* ambient radial glow */}
+      <div style={{
+        position: "absolute",
+        width: 600, height: 600,
+        background: "radial-gradient(circle, rgba(255,255,255,0.015) 0%, transparent 70%)",
+        left: "50%", top: "50%",
+        transform: "translate(-50%,-50%)",
+        pointerEvents: "none",
+      }} />
+      <GrainOverlay strength={0.13} />
+
+      <TicketShell stubHeight={130}>
+        {/* ── background fill */}
+        <div style={{
+          background: "#0A0A0A",
+          minHeight: 820,
+          position: "relative",
+          overflow: "hidden",
+        }}>
+          <GrainOverlay strength={0.2} />
+          <GeometricOverlay />
+
+          {/* 1 ── TOP HEADER BAR */}
+          <div style={{
+            background: "#0f0f0f",
+            borderBottom: "1px solid #1e1e1e",
+            padding: "16px 28px",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            position: "relative",
+            zIndex: 20,
+            marginTop: 14, // clear top scallop
+          }}>
+            <div>
+              <div style={{
+                fontSize: 9, fontWeight: 700, letterSpacing: "0.32em",
+                color: "#FFF", textTransform: "uppercase",
+              }}>NEXUS PROTOCOL</div>
+              <div style={{ fontSize: 7.5, color: "#555", letterSpacing: "0.18em", marginTop: 1 }}>
+                CLASSIFIED ACCESS DOCUMENT
+              </div>
+            </div>
+            <div style={{ textAlign: "right" }}>
+              <div style={{ fontSize: 9, color: "#555", letterSpacing: "0.1em" }}>Ω-09</div>
+              <div style={{ fontSize: 7, color: "#333", marginTop: 1 }}>© 2025</div>
+            </div>
+          </div>
+
+          {/* 2 ── BRANDING BLOCK */}
+          <div style={{ padding: "22px 32px 14px", position: "relative", zIndex: 20 }}>
+            <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 6 }}>
+              <svg width="28" height="28" viewBox="0 0 28 28" fill="none">
+                <circle cx="14" cy="14" r="13" stroke="white" strokeWidth="1" />
+                <path d="M4 14 Q7 8 10 14 Q13 20 16 14 Q19 8 22 14 Q24 18 24 14"
+                  stroke="white" strokeWidth="1.2" fill="none" strokeLinecap="round" />
+                <circle cx="14" cy="14" r="2" fill="white" />
+              </svg>
+              <div>
+                <div style={{
+                  fontSize: 22, fontWeight: 700, letterSpacing: "0.18em",
+                  color: "#FFF", textTransform: "uppercase", lineHeight: 1,
+                }}>NEURAL</div>
+                <div style={{
+                  fontSize: 22, fontWeight: 400, letterSpacing: "0.34em",
+                  color: "#666", textTransform: "uppercase", lineHeight: 1, marginTop: 2,
+                }}>ACCESS</div>
+              </div>
+            </div>
+            <div style={{
+              fontSize: 7.5, color: "#383838", letterSpacing: "0.22em", textTransform: "uppercase",
+            }}>
+              HIGH-CLEARANCE ADMISSION — SERIES 9 — OMEGA TIER
+            </div>
+          </div>
+
+          {/* 3 ── TERMINAL CIRCLE */}
+          <div style={{
+            padding: "0 28px", position: "relative", zIndex: 20,
+            display: "flex", justifyContent: "center",
+          }}>
+            <div style={{
+              width: 250, height: 250,
+              borderRadius: "50%",
+              border: "1px solid #2a2a2a",
+              overflow: "hidden",
+              position: "relative",
+              boxShadow: "0 0 0 6px #0e0e0e, 0 0 0 7px #1e1e1e",
+            }}>
+              <TerminalMask />
+              <GrainOverlay strength={0.26} />
+            </div>
+          </div>
+
+          {/* scan status pill */}
+          <div style={{
+            display: "flex", justifyContent: "center", marginTop: 12,
+            position: "relative", zIndex: 20,
+          }}>
+            <div style={{
+              display: "flex", alignItems: "center", gap: 6,
+              border: "1px solid #222", borderRadius: 999,
+              padding: "4px 14px",
+              background: "#0d0d0d",
+            }}>
+              <div style={{
+                width: 5, height: 5, borderRadius: "50%",
+                background: pulse ? "#FFF" : "#333",
+                transition: "background 0.4s",
+              }} />
+              <span style={{ fontSize: 7.5, letterSpacing: "0.2em", color: "#666", textTransform: "uppercase" }}>
+                SIGNAL {pulse ? "ACTIVE" : "PINGING"}
+              </span>
+            </div>
+          </div>
+
+          {/* 4 ── INFO GRID */}
+          <div style={{
+            padding: "24px 32px 0",
+            position: "relative", zIndex: 20,
+            display: "grid", gridTemplateColumns: "1fr 1fr", gap: "16px 12px",
+          }}>
+            {[
+              { label: "BEARER", value: "AGENT_NX-44" },
+              { label: "ISSUED", value: "2025.03.06" },
+              { label: "CLEARANCE", value: "OMEGA / Ω" },
+              { label: "EXPIRES", value: "2025.12.31" },
+              { label: "SECTOR", value: "DELTA-9" },
+              { label: "NODE", value: "0xDEAD·BF9" },
+            ].map(({ label, value }) => (
+              <div key={label}>
+                <div style={{
+                  fontSize: 7, color: "#3a3a3a", letterSpacing: "0.28em",
+                  textTransform: "uppercase", marginBottom: 3,
+                }}>{label}</div>
+                <div style={{
+                  fontSize: 11, color: "#CDCDCD", letterSpacing: "0.1em",
+                  fontWeight: 600,
+                }}>{value}</div>
+              </div>
+            ))}
+          </div>
+
+          {/* subtle divider */}
+          <div style={{ padding: "22px 32px 0", position: "relative", zIndex: 20 }}>
+            <div style={{ display: "flex", gap: 6, alignItems: "center" }}>
+              {Array.from({ length: 3 }).map((_, i) => (
+                <div key={i} style={{ flex: 1, height: "1px", background: i === 1 ? "#222" : "#161616" }} />
+              ))}
+              <svg width="10" height="10" viewBox="0 0 10 10" fill="none" style={{ opacity: 0.3 }}>
+                <polygon points="5,0 10,10 0,10" stroke="white" strokeWidth="1" fill="none" />
+              </svg>
+              {Array.from({ length: 3 }).map((_, i) => (
+                <div key={i} style={{ flex: 1, height: "1px", background: i === 1 ? "#222" : "#161616" }} />
+              ))}
+            </div>
+          </div>
+
+          {/* ── STUB SECTION (below tear line) ── */}
+          {/* Spacer to push stub below the scalloped tear cutout */}
+          <div style={{ height: 36 }} />
+
+          <div style={{
+            padding: "4px 32px 32px",
+            position: "relative", zIndex: 20,
+            display: "flex", alignItems: "center", justifyContent: "space-between",
+          }}>
+            {/* Barcode */}
+            <div>
+              <Barcode />
+              <div style={{ fontSize: 7, color: "#2e2e2e", letterSpacing: "0.16em", marginTop: 3 }}>
+                NX-9912-DELTA-44-0x2F
+              </div>
+            </div>
+            {/* Stamp area */}
+            <div style={{ textAlign: "right" }}>
+              <div style={{ display: "flex", gap: 6, justifyContent: "flex-end", marginBottom: 6 }}>
+                {["★", "◈", "▲"].map((icon, i) => (
+                  <span key={i} style={{
+                    fontSize: i === 0 ? 11 : 9, color: "#3a3a3a", fontFamily: "monospace",
+                  }}>{icon}</span>
+                ))}
+              </div>
+              <div style={{
+                fontSize: 7, color: "#333", letterSpacing: "0.22em",
+                textTransform: "uppercase", lineHeight: 1.7,
+              }}>
+                ADMIT<br />ONE
+              </div>
+            </div>
+          </div>
+
+          {/* bottom vignette */}
+          <div style={{
+            position: "absolute", bottom: 0, left: 0, right: 0, height: 80,
+            background: "linear-gradient(to top, rgba(0,0,0,0.6), transparent)",
+            pointerEvents: "none", zIndex: 8,
+          }} />
+        </div>
+      </TicketShell>
+
+      {/* ambient page label */}
+      <div style={{
+        position: "absolute", bottom: 18, left: "50%", transform: "translateX(-50%)",
+        fontSize: 7.5, letterSpacing: "0.3em", color: "#222",
+        fontFamily: "'IBM Plex Mono', monospace", textTransform: "uppercase",
+        zIndex: 20, whiteSpace: "nowrap",
+      }}>
+        NEXUS PROTOCOL — DOCUMENT RENDER v9.1 — CLASSIFIED
+      </div>
+    </div>
+  );
+}