Upload 2 files

TicketUI_general.txt

@@ -0,0 +1,1254 @@
+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>
+  );
+}