@nukleas/cyberdesign 0.1.0

package/src/css/components/augmented.css

@@ -0,0 +1,474 @@
+/* ── Augmented Clip-Path Utilities ─────────────────────────────────────────
+   Inspired by augmented-ui (propjockey.io) — lightweight subset using
+   clip-path: polygon() + filter: drop-shadow() for neon-bordered clipped shapes.
+   ─────────────────────────────────────────────────────────────────────────── */
+
+/* Clip size tokens — override per-element with --cd-clip */
+:root {
+  --cd-clip-sm: 6px;
+  --cd-clip-md: 12px;
+  --cd-clip-lg: 20px;
+  --cd-clip-xl: 32px;
+}
+
+/* Internal fallback for all clip utilities */
+.cd-clip-tl, .cd-clip-tr, .cd-clip-br, .cd-clip-bl,
+.cd-clip-2, .cd-clip-2r, .cd-clip-4,
+.cd-step-tr, .cd-step-tl, .cd-step-br, .cd-step-bl {
+  --_cs: var(--cd-clip, var(--cd-clip-md));
+}
+
+/* ── Single corner clips ──────────────────────────────────────────────────── */
+
+.cd-clip-tl {
+  -webkit-clip-path: polygon(
+    var(--_cs) 0%, 100% 0%, 100% 100%, 0% 100%, 0% var(--_cs)
+  );
+  clip-path: polygon(
+    var(--_cs) 0%, 100% 0%, 100% 100%, 0% 100%, 0% var(--_cs)
+  );
+}
+
+.cd-clip-tr {
+  -webkit-clip-path: polygon(
+    0% 0%, calc(100% - var(--_cs)) 0%, 100% var(--_cs), 100% 100%, 0% 100%
+  );
+  clip-path: polygon(
+    0% 0%, calc(100% - var(--_cs)) 0%, 100% var(--_cs), 100% 100%, 0% 100%
+  );
+}
+
+.cd-clip-br {
+  -webkit-clip-path: polygon(
+    0% 0%, 100% 0%, 100% calc(100% - var(--_cs)),
+    calc(100% - var(--_cs)) 100%, 0% 100%
+  );
+  clip-path: polygon(
+    0% 0%, 100% 0%, 100% calc(100% - var(--_cs)),
+    calc(100% - var(--_cs)) 100%, 0% 100%
+  );
+}
+
+.cd-clip-bl {
+  -webkit-clip-path: polygon(
+    0% 0%, 100% 0%, 100% 100%, var(--_cs) 100%, 0% calc(100% - var(--_cs))
+  );
+  clip-path: polygon(
+    0% 0%, 100% 0%, 100% 100%, var(--_cs) 100%, 0% calc(100% - var(--_cs))
+  );
+}
+
+/* ── Dual corner clips ────────────────────────────────────────────────────── */
+
+/* Diagonal TL+BR — the classic cyberpunk slash shape */
+.cd-clip-2 {
+  -webkit-clip-path: polygon(
+    var(--_cs) 0%,
+    100% 0%,
+    100% calc(100% - var(--_cs)),
+    calc(100% - var(--_cs)) 100%,
+    0% 100%,
+    0% var(--_cs)
+  );
+  clip-path: polygon(
+    var(--_cs) 0%,
+    100% 0%,
+    100% calc(100% - var(--_cs)),
+    calc(100% - var(--_cs)) 100%,
+    0% 100%,
+    0% var(--_cs)
+  );
+}
+
+/* Reverse diagonal TR+BL */
+.cd-clip-2r {
+  -webkit-clip-path: polygon(
+    0% 0%,
+    calc(100% - var(--_cs)) 0%,
+    100% var(--_cs),
+    100% 100%,
+    var(--_cs) 100%,
+    0% calc(100% - var(--_cs))
+  );
+  clip-path: polygon(
+    0% 0%,
+    calc(100% - var(--_cs)) 0%,
+    100% var(--_cs),
+    100% 100%,
+    var(--_cs) 100%,
+    0% calc(100% - var(--_cs))
+  );
+}
+
+/* ── All four corners clipped ─────────────────────────────────────────────── */
+
+.cd-clip-4 {
+  -webkit-clip-path: polygon(
+    var(--_cs) 0%,
+    calc(100% - var(--_cs)) 0%,
+    100% var(--_cs),
+    100% calc(100% - var(--_cs)),
+    calc(100% - var(--_cs)) 100%,
+    var(--_cs) 100%,
+    0% calc(100% - var(--_cs)),
+    0% var(--_cs)
+  );
+  clip-path: polygon(
+    var(--_cs) 0%,
+    calc(100% - var(--_cs)) 0%,
+    100% var(--_cs),
+    100% calc(100% - var(--_cs)),
+    calc(100% - var(--_cs)) 100%,
+    var(--_cs) 100%,
+    0% calc(100% - var(--_cs)),
+    0% var(--_cs)
+  );
+}
+
+/* ── Step notches (right-angle cutout, pixel aesthetic) ──────────────────── */
+
+.cd-step-tr {
+  -webkit-clip-path: polygon(
+    0% 0%,
+    calc(100% - var(--_cs)) 0%,
+    calc(100% - var(--_cs)) var(--_cs),
+    100% var(--_cs),
+    100% 100%,
+    0% 100%
+  );
+  clip-path: polygon(
+    0% 0%,
+    calc(100% - var(--_cs)) 0%,
+    calc(100% - var(--_cs)) var(--_cs),
+    100% var(--_cs),
+    100% 100%,
+    0% 100%
+  );
+}
+
+.cd-step-tl {
+  -webkit-clip-path: polygon(
+    0% var(--_cs),
+    var(--_cs) var(--_cs),
+    var(--_cs) 0%,
+    100% 0%,
+    100% 100%,
+    0% 100%
+  );
+  clip-path: polygon(
+    0% var(--_cs),
+    var(--_cs) var(--_cs),
+    var(--_cs) 0%,
+    100% 0%,
+    100% 100%,
+    0% 100%
+  );
+}
+
+.cd-step-br {
+  -webkit-clip-path: polygon(
+    0% 0%,
+    100% 0%,
+    100% calc(100% - var(--_cs)),
+    calc(100% - var(--_cs)) calc(100% - var(--_cs)),
+    calc(100% - var(--_cs)) 100%,
+    0% 100%
+  );
+  clip-path: polygon(
+    0% 0%,
+    100% 0%,
+    100% calc(100% - var(--_cs)),
+    calc(100% - var(--_cs)) calc(100% - var(--_cs)),
+    calc(100% - var(--_cs)) 100%,
+    0% 100%
+  );
+}
+
+.cd-step-bl {
+  -webkit-clip-path: polygon(
+    0% 0%,
+    100% 0%,
+    100% 100%,
+    var(--_cs) 100%,
+    var(--_cs) calc(100% - var(--_cs)),
+    0% calc(100% - var(--_cs))
+  );
+  clip-path: polygon(
+    0% 0%,
+    100% 0%,
+    100% 100%,
+    var(--_cs) 100%,
+    var(--_cs) calc(100% - var(--_cs)),
+    0% calc(100% - var(--_cs))
+  );
+}
+
+/* ── Neon glow on clipped shapes ─────────────────────────────────────────── */
+/* filter: drop-shadow() traces the rendered silhouette, following clip-path  */
+
+.cd-aug-glow {
+  filter: drop-shadow(0 0 4px var(--cd-accent)) drop-shadow(0 0 10px var(--cd-accent-glow));
+}
+
+.cd-aug-glow:hover {
+  filter: drop-shadow(0 0 6px var(--cd-accent)) drop-shadow(0 0 16px var(--cd-accent-glow));
+}
+
+.cd-aug-glow-secondary {
+  filter:
+    drop-shadow(0 0 4px var(--cd-accent-secondary))
+    drop-shadow(0 0 10px var(--cd-accent-secondary-glow));
+}
+
+/* ── Augmented panel ─────────────────────────────────────────────────────── */
+
+.cd-aug-panel {
+  --cd-clip: var(--cd-clip-lg);
+  position: relative;
+  background: var(--cd-bg-panel);
+  border: 1px solid color-mix(in srgb, var(--cd-accent) 28%, transparent);
+  padding: 20px;
+  color: var(--cd-text);
+  filter: drop-shadow(0 0 4px var(--cd-accent-glow)) drop-shadow(0 0 1px var(--cd-accent));
+  -webkit-clip-path: polygon(
+    var(--cd-clip) 0%,
+    100% 0%,
+    100% calc(100% - var(--cd-clip)),
+    calc(100% - var(--cd-clip)) 100%,
+    0% 100%,
+    0% var(--cd-clip)
+  );
+  clip-path: polygon(
+    var(--cd-clip) 0%,
+    100% 0%,
+    100% calc(100% - var(--cd-clip)),
+    calc(100% - var(--cd-clip)) 100%,
+    0% 100%,
+    0% var(--cd-clip)
+  );
+  transition: filter 0.2s, border-color 0.2s;
+}
+
+.cd-aug-panel:hover {
+  border-color: color-mix(in srgb, var(--cd-accent) 50%, transparent);
+  filter: drop-shadow(0 0 8px var(--cd-accent-glow)) drop-shadow(0 0 2px var(--cd-accent));
+}
+
+.cd-aug-panel--sm { --cd-clip: var(--cd-clip-sm); padding: 12px 14px; }
+.cd-aug-panel--lg { --cd-clip: var(--cd-clip-xl); padding: 28px; }
+.cd-aug-panel--4 {
+  -webkit-clip-path: polygon(
+    var(--cd-clip) 0%,
+    calc(100% - var(--cd-clip)) 0%,
+    100% var(--cd-clip),
+    100% calc(100% - var(--cd-clip)),
+    calc(100% - var(--cd-clip)) 100%,
+    var(--cd-clip) 100%,
+    0% calc(100% - var(--cd-clip)),
+    0% var(--cd-clip)
+  );
+  clip-path: polygon(
+    var(--cd-clip) 0%,
+    calc(100% - var(--cd-clip)) 0%,
+    100% var(--cd-clip),
+    100% calc(100% - var(--cd-clip)),
+    calc(100% - var(--cd-clip)) 100%,
+    var(--cd-clip) 100%,
+    0% calc(100% - var(--cd-clip)),
+    0% var(--cd-clip)
+  );
+}
+
+/* ── Augmented button ────────────────────────────────────────────────────── */
+
+.cd-aug-btn {
+  --cd-clip: var(--cd-clip-sm);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  height: 32px;
+  padding: 0 16px;
+  background: transparent;
+  border: 1px solid var(--cd-accent);
+  color: var(--cd-accent);
+  font: 700 var(--cd-text-sm)/1 var(--cd-font-mono);
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  text-decoration: none;
+  cursor: pointer;
+  transition: filter 0.15s, color 0.15s, background 0.15s, border-color 0.15s;
+  -webkit-clip-path: polygon(
+    var(--cd-clip) 0%,
+    100% 0%,
+    100% calc(100% - var(--cd-clip)),
+    calc(100% - var(--cd-clip)) 100%,
+    0% 100%,
+    0% var(--cd-clip)
+  );
+  clip-path: polygon(
+    var(--cd-clip) 0%,
+    100% 0%,
+    100% calc(100% - var(--cd-clip)),
+    calc(100% - var(--cd-clip)) 100%,
+    0% 100%,
+    0% var(--cd-clip)
+  );
+}
+
+.cd-aug-btn:hover {
+  color: var(--cd-accent-bright);
+  border-color: var(--cd-accent-bright);
+  filter: drop-shadow(0 0 6px var(--cd-accent)) drop-shadow(0 0 12px var(--cd-accent-glow));
+}
+
+.cd-aug-btn:active {
+  background: var(--cd-accent-subtle);
+}
+
+.cd-aug-btn:focus-visible {
+  color: var(--cd-accent-bright);
+  border-color: var(--cd-accent-bright);
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cd-accent) 50%, transparent);
+}
+
+.cd-aug-btn--primary {
+  background: var(--cd-accent-subtle);
+  filter: drop-shadow(0 0 3px var(--cd-accent-glow));
+}
+
+.cd-aug-btn--primary:hover {
+  background: color-mix(in srgb, var(--cd-accent) 18%, transparent);
+}
+
+.cd-aug-btn--sm {
+  --cd-clip: 5px;
+  height: 26px;
+  padding: 0 10px;
+  font-size: var(--cd-text-xs);
+}
+
+.cd-aug-btn--lg {
+  --cd-clip: var(--cd-clip-md);
+  height: 40px;
+  padding: 0 24px;
+  font-size: var(--cd-text-base);
+}
+
+/* Reverse diagonal variant — TR+BL cut */
+.cd-aug-btn--rev {
+  -webkit-clip-path: polygon(
+    0% 0%,
+    calc(100% - var(--cd-clip)) 0%,
+    100% var(--cd-clip),
+    100% 100%,
+    var(--cd-clip) 100%,
+    0% calc(100% - var(--cd-clip))
+  );
+  clip-path: polygon(
+    0% 0%,
+    calc(100% - var(--cd-clip)) 0%,
+    100% var(--cd-clip),
+    100% 100%,
+    var(--cd-clip) 100%,
+    0% calc(100% - var(--cd-clip))
+  );
+}
+
+/* ── Corner bracket decoration ───────────────────────────────────────────── */
+/* Adds glowing corner tick marks without clipping the element's content      */
+
+.cd-corners {
+  position: relative;
+}
+
+.cd-corners::before,
+.cd-corners::after {
+  content: '';
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  pointer-events: none;
+  transition: opacity 0.2s;
+}
+
+.cd-corners::before {
+  top: 0;
+  left: 0;
+  border-top: 1px solid var(--cd-accent);
+  border-left: 1px solid var(--cd-accent);
+  box-shadow: -2px -2px 6px var(--cd-accent-glow), 0 0 3px var(--cd-accent-glow);
+}
+
+.cd-corners::after {
+  bottom: 0;
+  right: 0;
+  border-bottom: 1px solid var(--cd-accent);
+  border-right: 1px solid var(--cd-accent);
+  box-shadow: 2px 2px 6px var(--cd-accent-glow), 0 0 3px var(--cd-accent-glow);
+}
+
+/* Four-corner variant — uses a child wrapper technique via shadow DOM trick */
+.cd-corners-4 {
+  position: relative;
+  --_c: color-mix(in srgb, var(--cd-accent) 80%, transparent);
+}
+
+.cd-corners-4::before,
+.cd-corners-4::after {
+  content: '';
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  pointer-events: none;
+}
+
+.cd-corners-4::before {
+  top: 0; left: 0;
+  border-top: 1px solid var(--_c);
+  border-left: 1px solid var(--_c);
+}
+
+.cd-corners-4::after {
+  bottom: 0; right: 0;
+  border-bottom: 1px solid var(--_c);
+  border-right: 1px solid var(--_c);
+}
+
+/* Companion spans for all-four-corner version */
+.cd-corners-4 > .cd-corner-tr {
+  position: absolute;
+  top: 0; right: 0;
+  width: 10px; height: 10px;
+  border-top: 1px solid var(--_c);
+  border-right: 1px solid var(--_c);
+  pointer-events: none;
+}
+
+.cd-corners-4 > .cd-corner-bl {
+  position: absolute;
+  bottom: 0; left: 0;
+  width: 10px; height: 10px;
+  border-bottom: 1px solid var(--_c);
+  border-left: 1px solid var(--_c);
+  pointer-events: none;
+}
+
+/* Hover brightens the corners */
+.cd-corners:hover::before,
+.cd-corners:hover::after {
+  border-color: var(--cd-accent-bright);
+  box-shadow: -2px -2px 8px var(--cd-accent-glow), 0 0 4px var(--cd-accent-glow);
+}
+
+.cd-corners-4:hover::before,
+.cd-corners-4:hover::after {
+  border-color: var(--cd-accent-bright);
+}
+
+/* ── Size modifier classes ────────────────────────────────────────────────── */
+
+.cd-clip--sm { --cd-clip: var(--cd-clip-sm); }
+.cd-clip--md { --cd-clip: var(--cd-clip-md); }
+.cd-clip--lg { --cd-clip: var(--cd-clip-lg); }
+.cd-clip--xl { --cd-clip: var(--cd-clip-xl); }

package/src/css/components/avatar.css

@@ -0,0 +1,105 @@
+/* ── Avatar ───────────────────────────────────────────────────────────────── */
+
+.cd-avatar {
+  --cd-avatar-size: 36px;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--cd-avatar-size);
+  height: var(--cd-avatar-size);
+  border-radius: 50%;
+  overflow: hidden;
+  background: var(--cd-bg-panel-hover);
+  border: 1px solid var(--cd-border-mid);
+  flex-shrink: 0;
+  font-family: var(--cd-font-mono);
+}
+
+.cd-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+/* Fallback initials shown when no image */
+.cd-avatar__fallback {
+  font-size: calc(var(--cd-avatar-size) * 0.35);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--cd-accent);
+  line-height: 1;
+  user-select: none;
+}
+
+/* Neon ring variant */
+.cd-avatar--glow {
+  border-color: color-mix(in srgb, var(--cd-accent) 50%, transparent);
+  box-shadow: 0 0 0 2px var(--cd-bg), 0 0 10px var(--cd-accent-glow);
+}
+
+/* ── Size variants ────────────────────────────────────────────────────────── */
+
+.cd-avatar--xs  { --cd-avatar-size: 24px; }
+.cd-avatar--sm  { --cd-avatar-size: 30px; }
+.cd-avatar--lg  { --cd-avatar-size: 48px; }
+.cd-avatar--xl  { --cd-avatar-size: 64px; }
+
+/* ── Status indicator dot ─────────────────────────────────────────────────── */
+
+.cd-avatar[data-status]::after {
+  content: '';
+  position: absolute;
+  bottom: 1px;
+  right: 1px;
+  width: calc(var(--cd-avatar-size) * 0.26);
+  height: calc(var(--cd-avatar-size) * 0.26);
+  border-radius: 50%;
+  border: 2px solid var(--cd-bg);
+}
+
+.cd-avatar[data-status="online"]::after  { background: var(--cd-green); }
+.cd-avatar[data-status="away"]::after    { background: var(--cd-amber); }
+.cd-avatar[data-status="busy"]::after    { background: var(--cd-red);   }
+.cd-avatar[data-status="offline"]::after { background: var(--cd-text-dim); }
+
+/* ── Avatar group — overlapping stack ────────────────────────────────────── */
+
+.cd-avatar-group {
+  display: flex;
+  align-items: center;
+}
+
+.cd-avatar-group .cd-avatar {
+  margin-left: -10px;
+  border: 2px solid var(--cd-bg);
+  transition: transform 0.15s, z-index 0s;
+  z-index: 1;
+}
+
+.cd-avatar-group .cd-avatar:first-child { margin-left: 0; }
+
+.cd-avatar-group .cd-avatar:hover {
+  transform: translateY(-3px);
+  z-index: 10;
+}
+
+/* +N overflow badge */
+.cd-avatar-group__more {
+  margin-left: -10px;
+  width: var(--cd-avatar-size, 36px);
+  height: var(--cd-avatar-size, 36px);
+  border-radius: 50%;
+  background: var(--cd-bg-panel);
+  border: 2px solid var(--cd-border-mid);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font: 700 var(--cd-text-xs)/1 var(--cd-font-mono);
+  color: var(--cd-text-muted);
+  letter-spacing: 0.05em;
+  flex-shrink: 0;
+  z-index: 0;
+}

package/src/css/components/badge.css

@@ -0,0 +1,46 @@
+.cd-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 1px 6px;
+  border: 1px solid;
+  border-radius: 0;
+  font-family: var(--cd-font-mono);
+  font-size: var(--cd-text-xs);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  white-space: nowrap;
+  line-height: 1.6;
+}
+
+/* Color variants */
+.cd-badge--orange  { color: #ff8800; border-color: rgba(255,136,0,0.25);  background: rgba(255,136,0,0.06); }
+.cd-badge--amber   { color: #ffaa00; border-color: rgba(255,170,0,0.25);  background: rgba(255,170,0,0.06); }
+.cd-badge--gold    { color: #ffcc00; border-color: rgba(255,204,0,0.25);  background: rgba(255,204,0,0.06); }
+.cd-badge--cyan    { color: #47f6ff; border-color: rgba(71,246,255,0.25); background: rgba(71,246,255,0.06); }
+.cd-badge--magenta { color: #ff2bd6; border-color: rgba(255,43,214,0.25); background: rgba(255,43,214,0.06); }
+.cd-badge--green   { color: #52ff9f; border-color: rgba(82,255,159,0.25); background: rgba(82,255,159,0.06); }
+.cd-badge--red     { color: #ff456c; border-color: rgba(255,69,108,0.25); background: rgba(255,69,108,0.06); }
+.cd-badge--blue    { color: #6aa8ff; border-color: rgba(106,168,255,0.25);background: rgba(106,168,255,0.06); }
+.cd-badge--purple  { color: #9d7cff; border-color: rgba(157,124,255,0.25);background: rgba(157,124,255,0.06); }
+.cd-badge--yellow  { color: #f7ff5a; border-color: rgba(247,255,90,0.25); background: rgba(247,255,90,0.06); }
+
+/* Backward-compat aliases for the dashboard app's category badge classes */
+.badge-government { color: #ffaa00; border-color: rgba(255,170,0,0.25);  background: rgba(255,170,0,0.06); }
+.badge-event      { color: #ff2bd6; border-color: rgba(255,43,214,0.25); background: rgba(255,43,214,0.06); }
+.badge-crime      { color: #ff456c; border-color: rgba(255,69,108,0.25); background: rgba(255,69,108,0.06); }
+.badge-fire       { color: #ff6600; border-color: rgba(255,102,0,0.25);  background: rgba(255,102,0,0.06); }
+.badge-weather    { color: #6aa8ff; border-color: rgba(106,168,255,0.25);background: rgba(106,168,255,0.06); }
+.badge-transit    { color: #52ff9f; border-color: rgba(82,255,159,0.25); background: rgba(82,255,159,0.06); }
+.badge-air_quality{ color: #a8ff8f; border-color: rgba(168,255,143,0.25);background: rgba(168,255,143,0.06); }
+.badge-earthquake { color: #cc8844; border-color: rgba(204,136,68,0.25); background: rgba(204,136,68,0.06); }
+.badge-traffic    { color: #ffaa00; border-color: rgba(255,170,0,0.25);  background: rgba(255,170,0,0.06); }
+.badge-power      { color: #ff456c; border-color: rgba(255,69,108,0.25); background: rgba(255,69,108,0.06); }
+.badge-coastal    { color: #00aaff; border-color: rgba(0,170,255,0.25);  background: rgba(0,170,255,0.06); }
+.badge-flood      { color: #6aa8ff; border-color: rgba(106,168,255,0.25);background: rgba(106,168,255,0.06); }
+.badge-airport    { color: #cc88ff; border-color: rgba(204,136,255,0.25);background: rgba(204,136,255,0.06); }
+.badge-health     { color: #ff8888; border-color: rgba(255,136,136,0.25);background: rgba(255,136,136,0.06); }
+.badge-news       { color: #ffff00; border-color: rgba(255,255,0,0.25);  background: rgba(255,255,0,0.06); }
+.badge-permit     { color: #f59e0b; border-color: rgba(245,158,11,0.25); background: rgba(245,158,11,0.06); }
+.badge-other      { color: #888888; border-color: rgba(136,136,136,0.25);background: rgba(136,136,136,0.06); }

package/src/css/components/breadcrumb.css

@@ -0,0 +1,75 @@
+/* ── Breadcrumb ───────────────────────────────────────────────────────────── */
+
+.cd-breadcrumb {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  font: 700 var(--cd-text-xs)/1 var(--cd-font-mono);
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+}
+
+.cd-breadcrumb__item {
+  display: inline-flex;
+  align-items: center;
+}
+
+/* Separator — inserted via ::before on non-first items */
+.cd-breadcrumb__item + .cd-breadcrumb__item::before {
+  content: var(--cd-breadcrumb-sep, '/');
+  margin: 0 8px;
+  color: var(--cd-text-dim);
+  font-weight: 400;
+  opacity: 0.5;
+}
+
+/* Arrow separator variant */
+.cd-breadcrumb--arrow .cd-breadcrumb__item + .cd-breadcrumb__item::before {
+  content: '›';
+  font-size: 11px;
+  font-weight: 400;
+}
+
+/* Dot separator variant */
+.cd-breadcrumb--dot .cd-breadcrumb__item + .cd-breadcrumb__item::before {
+  content: '·';
+}
+
+.cd-breadcrumb__link {
+  color: var(--cd-text-muted);
+  text-decoration: none;
+  transition: color 0.15s;
+  padding: 2px 0;
+}
+
+.cd-breadcrumb__link:hover {
+  color: var(--cd-accent);
+  text-shadow: 0 0 6px var(--cd-accent-glow);
+}
+
+.cd-breadcrumb__link:focus-visible {
+  color: var(--cd-accent);
+  text-shadow: 0 0 6px var(--cd-accent-glow);
+  outline-offset: 1px;
+}
+
+/* Current / active crumb */
+.cd-breadcrumb__item--active .cd-breadcrumb__link,
+.cd-breadcrumb__item--active span {
+  color: var(--cd-accent);
+  cursor: default;
+  pointer-events: none;
+}
+
+/* Home icon prefix — place a span or icon before the first link */
+.cd-breadcrumb__item:first-child .cd-breadcrumb__link {
+  color: var(--cd-text-secondary);
+}
+
+.cd-breadcrumb__item:first-child .cd-breadcrumb__link:hover {
+  color: var(--cd-accent);
+}