@charset "UTF-8";
@layer reset, base, theme, components, utilities;
@layer theme {
  :root {
    --cyber-cyan-300: #87eaf2;
    --cyber-cyan-400: #54d1db;
    --cyber-cyan-500: #00f0ff;
    --cyber-cyan-600: #00c4cc;
    --cyber-cyan-700: #0097a7;
    --cyber-cyan-900: #005d6a;
    --cyber-magenta-500: #ff2a6d;
    --cyber-magenta-700: #b31248;
    --cyber-yellow-500: #fcee0a;
    --cyber-yellow-700: #aca406;
    --cyber-green-400: #43ff83;
    --cyber-green-500: #05ffa1;
    --cyber-green-700: #03a969;
    --cyber-green-900: #015331;
    --cyber-void-100: #2a2d3a;
    --cyber-void-200: #1f2230;
    --cyber-void-300: #181a25;
    --cyber-void-400: #12141d;
    --cyber-void-500: #0d0e14;
    --cyber-void-700: #07080c;
    --cyber-void-800: #040508;
    --cyber-void-900: #010204;
    --cyber-chrome-100: #f0f1f5;
    --cyber-chrome-200: #d1d4de;
    --cyber-chrome-300: #b2b7c7;
    --cyber-chrome-400: #939ab0;
    --cyber-chrome-500: #747d99;
    --cyber-chrome-600: #5c647a;
    --color-bg-primary: var(--cyber-void-500);
    --color-bg-secondary: var(--cyber-void-400);
    --color-bg-tertiary: var(--cyber-void-300);
    --color-bg-elevated: var(--cyber-void-200);
    --color-text-primary: var(--cyber-chrome-100);
    --color-text-secondary: var(--cyber-chrome-300);
    --color-text-muted: var(--cyber-chrome-500);
    --color-border-default: var(--cyber-void-100);
    --glow-cyan:
      0 0 20px var(--cyber-cyan-500),
      0 0 40px color-mix(in srgb, var(--cyber-cyan-500) 50%, transparent),
      0 0 80px color-mix(in srgb, var(--cyber-cyan-500) 25%, transparent);
    --glow-magenta:
      0 0 20px var(--cyber-magenta-500),
      0 0 40px color-mix(in srgb, var(--cyber-magenta-500) 50%, transparent);
    --glow-yellow:
      0 0 20px var(--cyber-yellow-500),
      0 0 40px color-mix(in srgb, var(--cyber-yellow-500) 50%, transparent);
    --glow-green:
      0 0 20px var(--cyber-green-500),
      0 0 40px color-mix(in srgb, var(--cyber-green-500) 50%, transparent);
    --glow-text-cyan:
      0 0 10px var(--cyber-cyan-500),
      0 0 20px color-mix(in srgb, var(--cyber-cyan-500) 60%, transparent);
    --font-display: "Rajdhani", "Orbitron", system-ui, sans-serif;
    --font-body: "Exo 2", system-ui, sans-serif;
    --font-mono: "JetBrains Mono", monospace;
    --text-xs: clamp(0.64rem, 0.59rem + 0.24vw, 0.75rem);
    --text-sm: clamp(0.8rem, 0.74rem + 0.32vw, 0.94rem);
    --text-base: clamp(1rem, 0.93rem + 0.37vw, 1.18rem);
    --text-lg: clamp(1.25rem, 1.16rem + 0.47vw, 1.47rem);
    --text-xl: clamp(1.56rem, 1.45rem + 0.59vw, 1.84rem);
    --text-2xl: clamp(1.95rem, 1.81rem + 0.74vw, 2.3rem);
    --text-3xl: clamp(2.44rem, 2.26rem + 0.92vw, 2.87rem);
    --text-4xl: clamp(3.05rem, 2.83rem + 1.15vw, 3.58rem);
    --text-5xl: clamp(3.81rem, 3.54rem + 1.44vw, 4.48rem);
    --tracking-wide: 0.05em;
    --tracking-wider: 0.1em;
    --space-3xs: clamp(0.25rem, 0.23rem + 0.09vw, 0.31rem);
    --space-2xs: clamp(0.5rem, 0.46rem + 0.18vw, 0.63rem);
    --space-xs: clamp(0.75rem, 0.7rem + 0.28vw, 0.94rem);
    --space-sm: clamp(1rem, 0.93rem + 0.37vw, 1.25rem);
    --space-md: clamp(1.5rem, 1.39rem + 0.56vw, 1.88rem);
    --space-lg: clamp(2rem, 1.86rem + 0.74vw, 2.5rem);
    --space-xl: clamp(3rem, 2.78rem + 1.11vw, 3.75rem);
    --space-2xl: clamp(4rem, 3.71rem + 1.48vw, 5rem);
    --space-3xl: clamp(6rem, 5.57rem + 2.22vw, 7.5rem);
    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 8px;
    --radius-full: 9999px;
    --radius-cyber: 0 12px 0 12px;
    --border-thin: 1px;
    --border-medium: 2px;
    --border-thick: 3px;
    --ease-cyber: cubic-bezier(0.77, 0, 0.175, 1);
    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --duration-fast: 150ms;
    --duration-normal: 300ms;
    --duration-slow: 500ms;
    --transition-fast: var(--duration-fast) ease;
    --transition-base: var(--duration-normal) ease;
    --transition-slow: var(--duration-slow) ease;
    --z-sticky: 100;
    --z-modal: 1000;
    --noise-opacity: 0.03;
    --scanline-opacity: 0.04;
  }
}
@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  html {
    font-size: 16px;
    color-scheme: dark;
    -webkit-font-smoothing: antialiased;
    scroll-behavior: smooth;
  }
  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }
  }
}
@layer base {
  body {
    min-height: 100dvh;
    overflow-x: hidden;
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--color-text-primary);
    background-color: var(--color-bg-primary);
  }
  code {
    padding: 0.125em 0.375em;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.9em;
    color: var(--cyber-cyan-400);
    background: var(--color-bg-tertiary);
  }
}
@layer base {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }
  h1 {
    font-size: var(--text-5xl);
  }
  h2 {
    font-size: var(--text-4xl);
  }
  h3 {
    font-size: var(--text-3xl);
  }
  h4 {
    font-size: var(--text-2xl);
  }
  h5 {
    font-size: var(--text-xl);
  }
  h6 {
    font-size: var(--text-lg);
  }
}
@layer components {
  .cyber-btn {
    --btn-color: var(--cyber-cyan-500);
    --btn-bg: transparent;
    --btn-glow: var(--glow-cyan);
    position: relative;
    display: inline-flex;
    gap: var(--space-xs);
    align-items: center;
    justify-content: center;
    padding: var(--space-xs) var(--space-md);
    border: var(--border-medium) solid var(--btn-color);
    border-radius: var(--radius-cyber);
    overflow: hidden;
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--btn-color);
    background: var(--btn-bg);
    transition: color var(--duration-fast) var(--ease-cyber), background-color var(--duration-fast) var(--ease-cyber), border-color var(--duration-fast) var(--ease-cyber), box-shadow var(--duration-fast) var(--ease-cyber);
    cursor: pointer;
    isolation: isolate;
  }
  .cyber-btn::before {
    content: "";
    position: absolute;
    z-index: -1;
    background: var(--btn-color);
    transform: translateX(-101%);
    transition: transform var(--duration-normal) var(--ease-cyber);
    inset: 0;
  }
  .cyber-btn:hover::before, .cyber-btn:focus-visible::before {
    transform: translateX(0);
  }
  .cyber-btn:hover, .cyber-btn:focus-visible {
    color: var(--cyber-void-500);
    box-shadow: var(--btn-glow);
  }
  .cyber-btn::after {
    content: "";
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 12px;
    height: 12px;
    border: var(--border-medium) solid var(--btn-color);
    border-top: none;
    border-left: none;
    background: var(--color-bg-primary);
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
  }
  .cyber-btn:focus-visible {
    outline: 2px solid var(--btn-color);
    outline-offset: 4px;
  }
  .cyber-btn:disabled, .cyber-btn[disabled] {
    opacity: 40%;
    cursor: not-allowed;
    pointer-events: none;
    filter: grayscale(50%);
  }
  @media (hover: none) {
    .cyber-btn::before {
      display: none;
    }
    .cyber-btn:hover {
      color: var(--btn-color);
      box-shadow: none;
    }
    .cyber-btn:active {
      color: var(--cyber-void-500);
      background: var(--btn-color);
      box-shadow: var(--btn-glow);
    }
  }
  .cyber-btn--magenta {
    --btn-color: var(--cyber-magenta-500);
    --btn-glow: var(--glow-magenta);
  }
  .cyber-btn--yellow {
    --btn-color: var(--cyber-yellow-500);
    --btn-glow: var(--glow-yellow);
  }
  .cyber-btn--green {
    --btn-color: var(--cyber-green-500);
    --btn-glow: var(--glow-green);
  }
  .cyber-btn--ghost {
    border-style: dashed;
  }
  .cyber-btn--filled {
    color: var(--cyber-void-500);
    background: var(--btn-color);
  }
  .cyber-btn--filled::before {
    background: var(--cyber-void-500);
  }
  .cyber-btn--filled:hover {
    color: var(--btn-color);
  }
  .cyber-btn--sm {
    padding: var(--space-3xs) var(--space-sm);
    font-size: var(--text-xs);
  }
  .cyber-btn--lg {
    padding: var(--space-sm) var(--space-lg);
    font-size: var(--text-lg);
  }
  @media (prefers-reduced-motion: reduce) {
    .cyber-btn::before {
      transition: none;
    }
  }
}
@layer components {
  .cyber-card {
    --card-accent: var(--cyber-cyan-500);
    position: relative;
    padding: var(--space-md);
    border: 1px solid var(--color-border-default);
    background: var(--color-bg-secondary);
    clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
  }
  .cyber-card::before, .cyber-card::after {
    content: "";
    position: absolute;
    width: 30px;
    height: 30px;
    border: 2px solid var(--card-accent);
    pointer-events: none;
  }
  .cyber-card::before {
    top: -1px;
    left: -1px;
    border-right: none;
    border-bottom: none;
  }
  .cyber-card::after {
    right: -1px;
    bottom: -1px;
    border-top: none;
    border-left: none;
  }
  .cyber-card__header {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--color-border-default);
  }
  .cyber-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--card-accent);
    font-size: var(--text-lg);
    color: var(--card-accent);
    background: color-mix(in srgb, var(--card-accent) 15%, transparent);
  }
  .cyber-card__title {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--card-accent);
  }
  .cyber-card__badge {
    margin-left: auto;
    padding: var(--space-3xs) var(--space-xs);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--cyber-void-500);
    background: var(--card-accent);
  }
  .cyber-card--interactive {
    transition: all var(--duration-normal);
    cursor: pointer;
  }
  .cyber-card--interactive:hover {
    box-shadow: inset 0 0 30px color-mix(in srgb, var(--card-accent) 10%, transparent), 0 0 30px color-mix(in srgb, var(--card-accent) 30%, transparent);
    transform: translateY(-2px);
  }
  .cyber-card--holo {
    background: linear-gradient(135deg, var(--color-bg-secondary) 0%, color-mix(in srgb, var(--cyber-cyan-500) 5%, var(--color-bg-secondary)) 25%, color-mix(in srgb, var(--cyber-magenta-500) 5%, var(--color-bg-secondary)) 50%, color-mix(in srgb, var(--cyber-green-500) 5%, var(--color-bg-secondary)) 75%, var(--color-bg-secondary) 100%);
    background-size: 400% 400%;
    animation: holo-shift 8s ease infinite;
  }
  .cyber-card--magenta {
    --card-accent: var(--cyber-magenta-500);
  }
  .cyber-card--yellow {
    --card-accent: var(--cyber-yellow-500);
  }
  .cyber-card--green {
    --card-accent: var(--cyber-green-500);
  }
  @keyframes holo-shift {
    0%, 100% {
      background-position: 0% 50%;
    }
    25% {
      background-position: 100% 50%;
    }
    50% {
      background-position: 100% 100%;
    }
    75% {
      background-position: 0% 100%;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .cyber-card--holo {
      animation: none;
    }
    .cyber-card--interactive {
      transition: none;
    }
    .cyber-card--interactive:hover {
      transform: none;
    }
  }
}
@layer components {
  .cyber-input {
    --input-accent: var(--cyber-cyan-500);
    display: block;
    width: 100%;
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--color-border-default);
    border-left: 3px solid var(--input-accent);
    font-family: var(--font-mono);
    font-size: var(--text-base);
    color: var(--color-text-primary);
    background: var(--color-bg-tertiary);
    transition: all var(--duration-fast);
    outline: none;
  }
  .cyber-input::placeholder {
    color: var(--color-text-muted);
  }
  .cyber-input:focus {
    border-color: var(--input-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--input-accent) 20%, transparent), inset 0 0 15px color-mix(in srgb, var(--input-accent) 10%, transparent);
  }
  .cyber-field {
    margin-bottom: var(--space-md);
  }
  .cyber-field__label {
    display: block;
    margin-bottom: var(--space-2xs);
    font-family: var(--font-display);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
  }
  .cyber-field__label::before {
    content: "> ";
    color: var(--cyber-cyan-500);
  }
  .cyber-textarea {
    display: block;
    width: 100%;
    min-height: 120px;
    padding: var(--space-sm);
    border: 1px solid var(--color-border-default);
    border-left: 3px solid var(--cyber-cyan-500);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: 1.6;
    color: var(--color-text-primary);
    background: var(--color-bg-tertiary);
    transition: all var(--duration-fast);
    outline: none;
    resize: vertical;
  }
  .cyber-textarea::placeholder {
    color: var(--color-text-muted);
  }
  .cyber-textarea:focus {
    border-color: var(--cyber-cyan-500);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cyber-cyan-500) 20%, transparent), inset 0 0 15px color-mix(in srgb, var(--cyber-cyan-500) 10%, transparent);
  }
  .cyber-select {
    display: block;
    width: 100%;
    padding: var(--space-xs) var(--space-lg) var(--space-xs) var(--space-sm);
    border: 1px solid var(--color-border-default);
    border-left: 3px solid var(--cyber-magenta-500);
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-text-primary);
    background: var(--color-bg-tertiary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ff2a6d' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-sm) center;
    transition: all var(--duration-fast);
    cursor: pointer;
    appearance: none;
    outline: none;
  }
  .cyber-select:focus {
    border-color: var(--cyber-magenta-500);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cyber-magenta-500) 20%, transparent), inset 0 0 15px color-mix(in srgb, var(--cyber-magenta-500) 10%, transparent);
  }
  .cyber-select option {
    padding: var(--space-xs);
    color: var(--color-text-primary);
    background: var(--color-bg-secondary);
  }
  .cyber-checkbox {
    display: inline-flex;
    gap: var(--space-xs);
    align-items: center;
    cursor: pointer;
    user-select: none;
  }
  .cyber-checkbox input {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0%;
  }
  .cyber-checkbox__box {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 2px solid var(--cyber-cyan-500);
    background: var(--color-bg-tertiary);
    transition: all var(--duration-fast);
  }
  .cyber-checkbox__box::before {
    content: "";
    width: 10px;
    height: 10px;
    background: var(--cyber-cyan-500);
    transform: scale(0);
    transition: transform var(--duration-fast) var(--ease-bounce);
  }
  input:checked ~ .cyber-checkbox__box {
    box-shadow: 0 0 10px var(--cyber-cyan-500);
  }
  input:checked ~ .cyber-checkbox__box::before {
    transform: scale(1);
  }
  .cyber-checkbox__label {
    font-family: var(--font-display);
    font-size: var(--text-sm);
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }
}
@layer components {
  .cyber-progress {
    --progress-value: 0%;
    --progress-color: var(--cyber-cyan-500);
    position: relative;
    height: 10px;
    border: 1px solid var(--color-border-default);
    overflow: hidden;
    background: var(--color-bg-tertiary);
  }
  .cyber-progress__bar {
    position: relative;
    width: var(--progress-value);
    height: 100%;
    background: linear-gradient(90deg, var(--progress-color), color-mix(in srgb, var(--progress-color) 70%, white));
    box-shadow: 0 0 15px var(--progress-color);
    transition: width var(--duration-slow) var(--ease-cyber);
  }
  .cyber-progress__bar::before {
    content: "";
    position: absolute;
    background: repeating-linear-gradient(-45deg, transparent, transparent 5px, rgba(255, 255, 255, 0.15) 5px, rgba(255, 255, 255, 0.15) 10px);
    animation: progress-stripes 0.5s linear infinite;
    inset: 0;
  }
  .cyber-progress__value {
    position: absolute;
    top: 50%;
    right: var(--space-xs);
    z-index: 1;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-text-primary);
    transform: translateY(-50%);
    text-shadow: 0 1px 2px var(--cyber-void-500);
  }
  .cyber-progress--magenta {
    --progress-color: var(--cyber-magenta-500);
  }
  .cyber-progress--yellow {
    --progress-color: var(--cyber-yellow-500);
  }
  .cyber-progress--green {
    --progress-color: var(--cyber-green-500);
  }
  .cyber-progress--sm {
    height: 6px;
  }
  .cyber-progress--sm .cyber-progress__value {
    display: none;
  }
  .cyber-progress--lg {
    height: 16px;
  }
  .cyber-progress--lg .cyber-progress__value {
    font-size: var(--text-sm);
  }
  .cyber-progress--no-animation .cyber-progress__bar::before {
    animation: none;
  }
  .cyber-progress--indeterminate .cyber-progress__bar {
    position: absolute;
    left: 0;
    width: 30%;
    animation: progress-indeterminate 1.5s ease-in-out infinite;
  }
  .cyber-progress--segmented {
    display: flex;
    gap: 2px;
    border: none;
    background: transparent;
  }
  .cyber-progress--segmented .cyber-progress__segment {
    flex: 1;
    height: 100%;
    border: var(--border-thin) solid var(--color-border-default);
    background: var(--color-bg-tertiary);
    transition: background var(--transition-fast);
  }
  .cyber-progress--segmented .cyber-progress__segment--active {
    border-color: var(--progress-color);
    background: var(--progress-color);
  }
  @keyframes progress-stripes {
    from {
      background-position: 0 0;
    }
    to {
      background-position: 20px 0;
    }
  }
  @keyframes progress-indeterminate {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(433%);
    }
  }
  .cyber-progress-circle {
    --progress-value: 0;
    --progress-size: 80px;
    --progress-stroke: 6px;
    --progress-color: var(--cyber-cyan-500);
    position: relative;
    width: var(--progress-size);
    height: var(--progress-size);
  }
  .cyber-progress-circle__svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
  }
  .cyber-progress-circle__track {
    fill: none;
    stroke: var(--color-bg-tertiary);
    stroke-width: var(--progress-stroke);
  }
  .cyber-progress-circle__bar {
    transition: stroke-dashoffset var(--transition-slow) var(--ease-out-expo);
    fill: none;
    filter: drop-shadow(0 0 4px var(--progress-color));
    stroke: var(--progress-color);
    stroke-dasharray: 251.2;
    stroke-dashoffset: calc(251.2 - 251.2 * var(--progress-value) / 100);
    stroke-linecap: round;
    stroke-width: var(--progress-stroke);
  }
  .cyber-progress-circle__value {
    position: absolute;
    top: 50%;
    left: 50%;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-text-primary);
    transform: translate(-50%, -50%);
  }
  .cyber-progress-circle--magenta {
    --progress-color: var(--cyber-magenta-500);
  }
  .cyber-progress-circle--yellow {
    --progress-color: var(--cyber-yellow-500);
  }
  .cyber-progress-circle--green {
    --progress-color: var(--cyber-green-500);
  }
}
@layer components {
  .cyber-badge {
    display: inline-flex;
    gap: var(--space-3xs);
    align-items: center;
    padding: var(--space-3xs) var(--space-sm);
    border: var(--border-thin) solid var(--cyber-cyan-500);
    border-radius: var(--radius-full);
    font-family: var(--font-display);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--cyber-cyan-500);
    background: color-mix(in srgb, var(--cyber-cyan-500) 20%, transparent);
    transition: background var(--transition-fast), box-shadow var(--transition-fast);
  }
  .cyber-badge svg, .cyber-badge__icon {
    flex-shrink: 0;
    width: 0.875em;
    height: 0.875em;
  }
  .cyber-badge--magenta {
    border-color: var(--cyber-magenta-500);
    color: var(--cyber-magenta-500);
    background: color-mix(in srgb, var(--cyber-magenta-500) 20%, transparent);
  }
  .cyber-badge--yellow {
    border-color: var(--cyber-yellow-500);
    color: var(--cyber-yellow-500);
    background: color-mix(in srgb, var(--cyber-yellow-500) 20%, transparent);
  }
  .cyber-badge--green {
    border-color: var(--cyber-green-500);
    color: var(--cyber-green-500);
    background: color-mix(in srgb, var(--cyber-green-500) 20%, transparent);
  }
  .cyber-badge--chrome {
    border-color: var(--cyber-chrome-500);
    color: var(--cyber-chrome-300);
    background: color-mix(in srgb, var(--cyber-chrome-500) 20%, transparent);
  }
  .cyber-badge--filled {
    border-color: var(--cyber-cyan-500);
    color: var(--cyber-void-500);
    background: var(--cyber-cyan-500);
  }
  .cyber-badge--filled.cyber-badge--magenta {
    border-color: var(--cyber-magenta-500);
    background: var(--cyber-magenta-500);
  }
  .cyber-badge--filled.cyber-badge--yellow {
    border-color: var(--cyber-yellow-500);
    background: var(--cyber-yellow-500);
  }
  .cyber-badge--filled.cyber-badge--green {
    border-color: var(--cyber-green-500);
    background: var(--cyber-green-500);
  }
  .cyber-badge--ghost {
    border-color: transparent;
    background: transparent;
  }
  .cyber-badge--ghost:hover {
    background: color-mix(in srgb, currentcolor 10%, transparent);
  }
  .cyber-badge--pulse {
    animation: badge-pulse 2s ease-in-out infinite;
  }
  .cyber-badge--sm {
    padding: 2px var(--space-2xs);
    font-size: 0.625rem;
  }
  .cyber-badge--lg {
    padding: var(--space-2xs) var(--space-sm);
    font-size: var(--text-sm);
  }
  .cyber-badge--counter {
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border-radius: 50%;
  }
  .cyber-badge--online {
    border-color: var(--cyber-green-500);
    color: var(--cyber-green-500);
    background: color-mix(in srgb, var(--cyber-green-500) 20%, transparent);
  }
  .cyber-badge--online::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cyber-green-500);
    animation: badge-pulse 2s ease-in-out infinite;
  }
  .cyber-badge--offline {
    border-color: var(--cyber-chrome-500);
    color: var(--cyber-chrome-500);
    background: color-mix(in srgb, var(--cyber-chrome-500) 20%, transparent);
  }
  .cyber-badge--offline::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cyber-chrome-500);
  }
  .cyber-badge--busy {
    border-color: var(--cyber-magenta-500);
    color: var(--cyber-magenta-500);
    background: color-mix(in srgb, var(--cyber-magenta-500) 20%, transparent);
  }
  .cyber-badge--busy::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cyber-magenta-500);
    animation: badge-pulse 1s ease-in-out infinite;
  }
  @keyframes badge-pulse {
    0%, 100% {
      box-shadow: 0 0 0 0 currentcolor;
    }
    50% {
      box-shadow: 0 0 0 6px transparent;
    }
  }
  .cyber-badge-group {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
  }
}
@layer components {
  .cyber-alert {
    --alert-color: var(--cyber-cyan-500);
    position: relative;
    padding: var(--space-md);
    padding-left: var(--space-xl);
    border: var(--border-thin) solid var(--alert-color);
    border-left: 4px solid var(--alert-color);
    background: color-mix(in srgb, var(--alert-color) 10%, var(--color-bg-secondary));
  }
  .cyber-alert::before {
    content: "!";
    position: absolute;
    top: 50%;
    left: var(--space-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 700;
    line-height: 1;
    color: var(--cyber-void-500);
    background: var(--alert-color);
    transform: translateY(-50%);
  }
  .cyber-alert__title {
    margin-bottom: var(--space-2xs);
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--alert-color);
  }
  .cyber-alert--warning {
    --alert-color: var(--cyber-yellow-500);
  }
  .cyber-alert--warning::before {
    content: "⚠";
  }
  .cyber-alert--error {
    --alert-color: var(--cyber-magenta-500);
  }
  .cyber-alert--error::before {
    content: "✕";
  }
  .cyber-alert--success {
    --alert-color: var(--cyber-green-500);
  }
  .cyber-alert--success::before {
    content: "✓";
  }
}
@layer components {
  .cyber-table {
    width: 100%;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    border-collapse: collapse;
  }
  .cyber-table thead {
    background: var(--color-bg-tertiary);
  }
  .cyber-table thead th {
    padding: var(--space-sm);
    border-bottom: 2px solid var(--cyber-cyan-500);
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-align: left;
    text-transform: uppercase;
    color: var(--cyber-cyan-500);
  }
  .cyber-table thead th[data-sortable] {
    cursor: pointer;
    user-select: none;
  }
  .cyber-table thead th[data-sortable]::after {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: var(--space-xs);
    border-top: 4px solid currentcolor;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    opacity: 30%;
    transition: opacity var(--transition-fast);
    vertical-align: middle;
  }
  .cyber-table thead th[data-sortable]:hover::after {
    opacity: 70%;
  }
  .cyber-table thead th[data-sortable][data-sort=asc]::after {
    border-top: none;
    border-bottom: 4px solid currentcolor;
    opacity: 100%;
  }
  .cyber-table thead th[data-sortable][data-sort=desc]::after {
    opacity: 100%;
  }
  .cyber-table tbody tr {
    transition: background var(--duration-fast);
  }
  .cyber-table tbody tr:hover {
    background: color-mix(in srgb, var(--cyber-cyan-500) 5%, transparent);
  }
  .cyber-table tbody td {
    padding: var(--space-sm);
    border-bottom: 1px solid var(--color-border-default);
  }
  .cyber-table tfoot {
    background: var(--color-bg-tertiary);
  }
  .cyber-table tfoot td {
    padding: var(--space-sm);
    border-top: 1px solid var(--color-border-default);
    font-weight: 600;
    color: var(--color-text-primary);
  }
  .cyber-table--striped tbody tr:nth-child(even) {
    background: color-mix(in srgb, var(--cyber-void-500) 50%, transparent);
  }
  .cyber-table--striped tbody tr:nth-child(even):hover {
    background: color-mix(in srgb, var(--cyber-cyan-500) 8%, transparent);
  }
  .cyber-table--bordered th,
  .cyber-table--bordered td {
    border: var(--border-thin) solid var(--color-border-default);
  }
  .cyber-table--bordered thead th {
    border-bottom-color: var(--cyber-cyan-500);
    border-bottom-width: var(--border-medium);
  }
  .cyber-table--compact {
    font-size: var(--text-xs);
  }
  .cyber-table--compact thead th,
  .cyber-table--compact tbody td,
  .cyber-table--compact tfoot td {
    padding: var(--space-xs);
  }
  .cyber-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .cyber-table-wrapper::before, .cyber-table-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 20px;
    opacity: 0%;
    transition: opacity var(--transition-fast);
    pointer-events: none;
  }
  .cyber-table-wrapper::before {
    left: 0;
    background: linear-gradient(90deg, var(--color-bg-primary), transparent);
  }
  .cyber-table-wrapper::after {
    right: 0;
    background: linear-gradient(-90deg, var(--color-bg-primary), transparent);
  }
  .cyber-table-wrapper[data-scroll-left]::before {
    opacity: 100%;
  }
  .cyber-table-wrapper[data-scroll-right]::after {
    opacity: 100%;
  }
  .cyber-table .cell-number {
    font-family: var(--font-mono);
    text-align: right;
  }
  .cyber-table .cell-status {
    display: inline-flex;
    gap: var(--space-2xs);
    align-items: center;
  }
  .cyber-table .cell-status::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cyber-chrome-500);
  }
  .cyber-table .cell-status--active::before {
    background: var(--cyber-green-500);
    box-shadow: 0 0 6px var(--cyber-green-500);
  }
  .cyber-table .cell-status--inactive::before {
    background: var(--cyber-chrome-600);
  }
  .cyber-table .cell-status--pending::before {
    background: var(--cyber-yellow-500);
    animation: status-pulse 1.5s ease-in-out infinite;
  }
  .cyber-table .cell-status--error::before {
    background: var(--cyber-magenta-500);
  }
  .cyber-table .cell-actions {
    display: flex;
    gap: var(--space-2xs);
    justify-content: flex-end;
  }
  .cyber-table tr.row-highlight {
    border-left: var(--border-thick) solid var(--cyber-cyan-500);
    background: color-mix(in srgb, var(--cyber-cyan-500) 10%, transparent);
  }
  .cyber-table tr.row-selected {
    background: color-mix(in srgb, var(--cyber-cyan-500) 15%, transparent);
  }
  @keyframes status-pulse {
    0%, 100% {
      opacity: 100%;
    }
    50% {
      opacity: 40%;
    }
  }
}
@layer components {
  .cyber-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    gap: var(--space-md);
    align-items: center;
    padding: var(--space-sm) var(--space-lg);
    border-bottom: 1px solid var(--color-border-default);
    background: var(--color-bg-secondary);
    backdrop-filter: blur(10px);
  }
  .cyber-nav__brand {
    display: flex;
    gap: var(--space-xs);
    align-items: center;
    font-family: Orbitron, var(--font-display);
    font-size: var(--text-xl);
    font-weight: 800;
    letter-spacing: 0.15em;
    text-decoration: none;
    text-transform: uppercase;
    color: var(--cyber-cyan-500);
    text-shadow: var(--glow-text-cyan);
  }
  .cyber-nav__brand::before {
    content: "//";
    color: var(--cyber-magenta-500);
  }
  .cyber-nav__links {
    display: flex;
    gap: var(--space-2xs);
    margin-left: auto;
    list-style: none;
  }
  .cyber-nav__link {
    position: relative;
    padding: var(--space-xs) var(--space-sm);
    overflow: hidden;
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-decoration: none;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    transition: color var(--duration-fast);
  }
  .cyber-nav__link::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--cyber-cyan-500);
    transform: translateX(-101%);
    transition: transform var(--duration-normal) var(--ease-cyber);
  }
  .cyber-nav__link:hover, .cyber-nav__link--active {
    color: var(--cyber-cyan-500);
  }
  .cyber-nav__link:hover::before, .cyber-nav__link--active::before {
    transform: translateX(0);
  }
  .cyber-status {
    display: flex;
    gap: var(--space-2xs);
    align-items: center;
    padding: var(--space-3xs) var(--space-xs);
    border: 1px solid var(--cyber-green-500);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--cyber-green-500);
    background: color-mix(in srgb, var(--cyber-green-500) 15%, transparent);
  }
  .cyber-status__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cyber-green-500);
    animation: pulse-glow 2s infinite;
  }
  @keyframes pulse-glow {
    0%, 100% {
      box-shadow: 0 0 0 0 var(--cyber-green-500);
    }
    50% {
      box-shadow: 0 0 10px 3px var(--cyber-green-500);
    }
  }
}
@layer components {
  .cyber-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 2px;
    background: var(--color-border-default);
  }
  .cyber-tabs__list {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .cyber-tabs--scrollable {
    scrollbar-width: thin;
  }
  .cyber-tabs--scrollable::-webkit-scrollbar {
    height: 4px;
  }
  .cyber-tabs--scrollable::-webkit-scrollbar-track {
    background: var(--color-bg-secondary);
  }
  .cyber-tabs--scrollable::-webkit-scrollbar-thumb {
    border-radius: 2px;
    background: var(--cyber-chrome-600);
  }
  .cyber-tabs--scrollable {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .cyber-tabs--scrollable .cyber-tabs__list {
    flex-wrap: nowrap;
  }
  .cyber-tabs--scrollable .cyber-tab {
    flex: none;
    white-space: nowrap;
  }
  @media (width <= 768px) {
    .cyber-tabs {
      scrollbar-width: thin;
    }
    .cyber-tabs::-webkit-scrollbar {
      height: 4px;
    }
    .cyber-tabs::-webkit-scrollbar-track {
      background: var(--color-bg-secondary);
    }
    .cyber-tabs::-webkit-scrollbar-thumb {
      border-radius: 2px;
      background: var(--cyber-chrome-600);
    }
    .cyber-tabs {
      flex-wrap: nowrap;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
    .cyber-tabs .cyber-tab {
      flex: none;
      white-space: nowrap;
    }
  }
  .cyber-tabs__panels {
    padding: var(--space-md) 0;
  }
  .cyber-tabs__panel {
    display: none;
    animation: tab-fade-in var(--transition-base) ease-out;
  }
  .cyber-tabs__panel--active {
    display: block;
  }
  .cyber-tabs--vertical {
    flex-direction: column;
    gap: var(--space-md);
    padding: 0;
    background: transparent;
  }
  .cyber-tabs--vertical .cyber-tabs__list {
    flex-direction: column;
    gap: 2px;
    padding: 2px;
    background: var(--color-border-default);
  }
  .cyber-tabs--vertical .cyber-tab {
    flex: none;
  }
  .cyber-tabs--vertical .cyber-tab--active::after {
    width: 3px;
    height: 100%;
    inset: 0 0 0 auto;
  }
  .cyber-tabs--vertical .cyber-tabs__panels {
    flex: 1;
    padding: 0;
  }
  .cyber-tabs--pills {
    gap: var(--space-xs);
    padding: 0;
    background: transparent;
  }
  .cyber-tabs--pills .cyber-tabs__list {
    gap: var(--space-xs);
    background: transparent;
  }
  .cyber-tabs--pills .cyber-tab {
    flex: none;
    border: var(--border-thin) solid var(--color-border-default);
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
  }
  .cyber-tabs--pills .cyber-tab--active {
    border-color: var(--cyber-cyan-500);
    background: color-mix(in srgb, var(--cyber-cyan-500) 20%, transparent);
  }
  .cyber-tabs--pills .cyber-tab--active::after {
    display: none;
  }
  .cyber-tabs--fullwidth .cyber-tabs__list {
    width: 100%;
  }
  .cyber-tabs--fullwidth .cyber-tab {
    flex: 1 1 auto;
    justify-content: center;
    min-width: fit-content;
  }
  @media (width <= 768px) {
    .cyber-tabs--fullwidth .cyber-tab {
      flex: none;
    }
  }
  .cyber-tab {
    position: relative;
    display: inline-flex;
    flex: none;
    gap: var(--space-xs);
    align-items: center;
    justify-content: center;
    padding: var(--space-sm) var(--space-md);
    border: none;
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--color-text-secondary);
    background: var(--color-bg-secondary);
    transition: color var(--duration-fast), background-color var(--duration-fast);
    cursor: pointer;
  }
  .cyber-tab:hover {
    color: var(--color-text-primary);
    background: var(--color-bg-tertiary);
  }
  .cyber-tab:focus-visible {
    outline: 2px solid var(--cyber-cyan-500);
    outline-offset: -2px;
  }
  @media (hover: none) {
    .cyber-tab:hover {
      color: var(--color-text-secondary);
      background: var(--color-bg-secondary);
    }
    .cyber-tab:active {
      color: var(--color-text-primary);
      background: var(--color-bg-tertiary);
    }
    .cyber-tab--active:hover {
      color: var(--cyber-cyan-500);
      background: var(--color-bg-tertiary);
    }
  }
  .cyber-tab--active {
    color: var(--cyber-cyan-500);
    background: var(--color-bg-tertiary);
  }
  .cyber-tab--active::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 3px;
    background: var(--cyber-cyan-500);
    box-shadow: 0 0 10px var(--cyber-cyan-500);
  }
  .cyber-tab:disabled, .cyber-tab--disabled {
    opacity: 50%;
    cursor: not-allowed;
    pointer-events: none;
  }
  .cyber-tab svg, .cyber-tab__icon {
    flex-shrink: 0;
    width: 1em;
    height: 1em;
  }
  .cyber-tab__badge {
    padding: 2px 6px;
    border: var(--border-thin) solid var(--cyber-cyan-500);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--cyber-cyan-500);
    background: color-mix(in srgb, var(--cyber-cyan-500) 20%, transparent);
  }
  .cyber-tab--magenta.cyber-tab--active {
    color: var(--cyber-magenta-500);
  }
  .cyber-tab--magenta.cyber-tab--active::after {
    background: var(--cyber-magenta-500);
    box-shadow: 0 0 10px var(--cyber-magenta-500);
  }
  .cyber-tab--magenta .cyber-tab__badge {
    border-color: var(--cyber-magenta-500);
    color: var(--cyber-magenta-500);
    background: color-mix(in srgb, var(--cyber-magenta-500) 20%, transparent);
  }
  .cyber-tab--yellow.cyber-tab--active {
    color: var(--cyber-yellow-500);
  }
  .cyber-tab--yellow.cyber-tab--active::after {
    background: var(--cyber-yellow-500);
    box-shadow: 0 0 10px var(--cyber-yellow-500);
  }
  .cyber-tab--green.cyber-tab--active {
    color: var(--cyber-green-500);
  }
  .cyber-tab--green.cyber-tab--active::after {
    background: var(--cyber-green-500);
    box-shadow: 0 0 10px var(--cyber-green-500);
  }
  @keyframes tab-fade-in {
    from {
      opacity: 0%;
      transform: translateY(4px);
    }
    to {
      opacity: 100%;
      transform: translateY(0);
    }
  }
}
@layer components {
  .cyber-modal {
    --modal-accent: var(--cyber-cyan-500);
    position: fixed;
    z-index: var(--z-modal, 9000);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-md);
    background: color-mix(in srgb, var(--cyber-void-500) 80%, transparent);
    opacity: 0%;
    visibility: hidden;
    transition: opacity var(--transition-base), visibility var(--transition-base);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    inset: 0;
  }
  .cyber-modal--open {
    opacity: 100%;
    visibility: visible;
  }
  .cyber-modal--open .cyber-modal__dialog {
    opacity: 100%;
    transform: translateY(0) scale(1);
  }
  .cyber-modal__dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 500px;
    max-height: calc(100vh - var(--space-xl));
    border: var(--border-thin) solid var(--color-border-default);
    background: var(--color-bg-secondary);
    box-shadow: 0 25px 50px -12px color-mix(in srgb, var(--cyber-void-900) 80%, transparent), 0 0 20px color-mix(in srgb, var(--modal-accent) 30%, transparent), 0 0 40px color-mix(in srgb, var(--modal-accent) 15%, transparent);
    opacity: 0%;
    transform: translateY(-20px) scale(0.95);
    transition: opacity var(--transition-base) var(--ease-out-expo), transform var(--transition-base) var(--ease-out-expo);
    clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
  }
  .cyber-modal__dialog::before, .cyber-modal__dialog::after {
    content: "";
    position: absolute;
    z-index: 1;
    width: 30px;
    height: 30px;
    border: 2px solid var(--modal-accent);
    pointer-events: none;
  }
  .cyber-modal__dialog::before {
    top: -1px;
    left: -1px;
    border-right: none;
    border-bottom: none;
  }
  .cyber-modal__dialog::after {
    right: -1px;
    bottom: -1px;
    border-top: none;
    border-left: none;
  }
  .cyber-modal__header {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
    padding: var(--space-md);
    border-bottom: var(--border-thin) solid var(--color-border-default);
  }
  .cyber-modal__title {
    flex: 1;
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--modal-accent);
    text-shadow: 0 0 10px color-mix(in srgb, var(--modal-accent) 60%, transparent);
  }
  .cyber-modal__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: var(--border-thin) solid var(--color-border-default);
    color: var(--color-text-secondary);
    background: transparent;
    transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
    cursor: pointer;
  }
  .cyber-modal__close:hover {
    border-color: var(--cyber-magenta-500);
    color: var(--cyber-magenta-500);
    background: color-mix(in srgb, var(--cyber-magenta-500) 10%, transparent);
  }
  .cyber-modal__close:focus-visible {
    outline: 2px solid var(--cyber-cyan-500);
    outline-offset: 2px;
  }
  .cyber-modal__close svg {
    width: 1rem;
    height: 1rem;
  }
  .cyber-modal__body {
    flex: 1;
    padding: var(--space-md);
    overflow-y: auto;
    line-height: var(--leading-relaxed);
    color: var(--color-text-secondary);
  }
  .cyber-modal__footer {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
    justify-content: flex-end;
    padding: var(--space-md);
    border-top: var(--border-thin) solid var(--color-border-default);
  }
  .cyber-modal--sm .cyber-modal__dialog {
    max-width: 360px;
  }
  .cyber-modal--lg .cyber-modal__dialog {
    max-width: 720px;
  }
  .cyber-modal--xl .cyber-modal__dialog {
    max-width: 960px;
  }
  .cyber-modal--fullscreen .cyber-modal__dialog {
    width: calc(100% - var(--space-lg));
    max-width: none;
    height: calc(100% - var(--space-lg));
    max-height: none;
  }
  .cyber-modal--magenta {
    --modal-accent: var(--cyber-magenta-500);
  }
  .cyber-modal--yellow {
    --modal-accent: var(--cyber-yellow-500);
  }
  .cyber-modal--green {
    --modal-accent: var(--cyber-green-500);
  }
  .cyber-modal--slide-up .cyber-modal__dialog {
    transform: translateY(40px) scale(1);
  }
  .cyber-modal--slide-up.cyber-modal--open .cyber-modal__dialog {
    transform: translateY(0) scale(1);
  }
  .cyber-modal--zoom .cyber-modal__dialog {
    transform: scale(0.8);
  }
  .cyber-modal--zoom.cyber-modal--open .cyber-modal__dialog {
    transform: scale(1);
  }
  .cyber-modal-confirm {
    text-align: center;
  }
  .cyber-modal-confirm .cyber-modal__body {
    padding: var(--space-lg) var(--space-md);
  }
  .cyber-modal-confirm__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    margin: 0 auto var(--space-md);
    border: var(--border-medium) solid var(--cyber-cyan-500);
    color: var(--cyber-cyan-500);
    background: color-mix(in srgb, var(--cyber-cyan-500) 15%, transparent);
    box-shadow: 0 0 15px color-mix(in srgb, var(--cyber-cyan-500) 40%, transparent);
  }
  .cyber-modal-confirm__icon svg {
    width: 2rem;
    height: 2rem;
  }
  .cyber-modal-confirm__icon--warning {
    border-color: var(--cyber-yellow-500);
    color: var(--cyber-yellow-500);
    background: color-mix(in srgb, var(--cyber-yellow-500) 15%, transparent);
    box-shadow: 0 0 15px color-mix(in srgb, var(--cyber-yellow-500) 40%, transparent);
  }
  .cyber-modal-confirm__icon--error {
    border-color: var(--cyber-magenta-500);
    color: var(--cyber-magenta-500);
    background: color-mix(in srgb, var(--cyber-magenta-500) 15%, transparent);
    box-shadow: 0 0 15px color-mix(in srgb, var(--cyber-magenta-500) 40%, transparent);
  }
  .cyber-modal-confirm__icon--success {
    border-color: var(--cyber-green-500);
    color: var(--cyber-green-500);
    background: color-mix(in srgb, var(--cyber-green-500) 15%, transparent);
    box-shadow: 0 0 15px color-mix(in srgb, var(--cyber-green-500) 40%, transparent);
  }
  .cyber-modal-confirm__title {
    margin: 0 0 var(--space-xs);
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-text-primary);
  }
  .cyber-modal-confirm__message {
    margin: 0;
    color: var(--color-text-secondary);
  }
  @media (prefers-reduced-motion: reduce) {
    .cyber-modal {
      transition: none;
    }
    .cyber-modal__dialog {
      transition: none;
    }
  }
}
@layer components {
  .cyber-dropdown {
    position: relative;
    display: inline-block;
  }
  .cyber-dropdown__trigger {
    display: inline-flex;
    gap: var(--space-xs);
    align-items: center;
    padding: var(--space-xs) var(--space-sm);
    border: var(--border-thin) solid var(--color-border-default);
    border-radius: var(--radius-sm);
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-text-primary);
    background: var(--color-bg-tertiary);
    transition: color var(--duration-fast), background-color var(--duration-fast), border-color var(--duration-fast);
    cursor: pointer;
  }
  .cyber-dropdown__trigger:hover {
    border-color: var(--cyber-cyan-500);
    background: var(--color-bg-elevated);
  }
  .cyber-dropdown__trigger:focus-visible {
    outline: 2px solid var(--cyber-cyan-500);
    outline-offset: 2px;
  }
  .cyber-dropdown__trigger::after {
    content: "";
    width: 0;
    height: 0;
    border-top: 5px solid currentcolor;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    transition: transform var(--duration-fast);
  }
  .cyber-dropdown__menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1050;
    min-width: 180px;
    margin: var(--space-2xs) 0 0;
    padding: var(--space-2xs) 0;
    padding-left: 0;
    border: var(--border-thin) solid var(--color-border-default);
    border-left: 3px solid var(--cyber-cyan-500);
    border-radius: var(--radius-sm);
    background: var(--color-bg-secondary);
    box-shadow: 0 10px 25px color-mix(in srgb, var(--cyber-void-900) 60%, transparent), 0 0 15px color-mix(in srgb, var(--cyber-cyan-500) 15%, transparent);
    opacity: 0%;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity var(--duration-fast), visibility var(--duration-fast), transform var(--duration-fast);
    list-style: none;
    list-style-type: none;
  }
  .cyber-dropdown__menu > li {
    margin: 0;
    padding: 0;
    list-style: none;
    list-style-type: none;
  }
  .cyber-dropdown__item {
    display: block;
    width: 100%;
    padding: var(--space-xs) var(--space-sm);
    border: none;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    text-align: left;
    color: var(--color-text-secondary);
    background: transparent;
    transition: color var(--duration-fast), background-color var(--duration-fast);
    cursor: pointer;
  }
  .cyber-dropdown__item:hover {
    color: var(--cyber-cyan-500);
    background: color-mix(in srgb, var(--cyber-cyan-500) 10%, transparent);
  }
  .cyber-dropdown__item:focus-visible {
    color: var(--cyber-cyan-500);
    background: color-mix(in srgb, var(--cyber-cyan-500) 15%, transparent);
    outline: none;
  }
  .cyber-dropdown__item--active {
    color: var(--cyber-cyan-500);
  }
  .cyber-dropdown__item--active::before {
    content: "> ";
  }
  .cyber-dropdown__item--disabled {
    opacity: 50%;
    cursor: not-allowed;
    pointer-events: none;
  }
  .cyber-dropdown__divider {
    height: 1px;
    margin: var(--space-2xs) 0;
    background: var(--color-border-default);
  }
  .cyber-dropdown--open .cyber-dropdown__trigger::after {
    transform: rotate(180deg);
  }
  .cyber-dropdown--open .cyber-dropdown__menu {
    opacity: 100%;
    visibility: visible;
    transform: translateY(0);
  }
  .cyber-dropdown--css-only:focus-within .cyber-dropdown__trigger::after {
    transform: rotate(180deg);
  }
  .cyber-dropdown--css-only:focus-within .cyber-dropdown__menu {
    opacity: 100%;
    visibility: visible;
    transform: translateY(0);
  }
  .cyber-dropdown--right .cyber-dropdown__menu {
    right: 0;
    left: auto;
    border-right: 3px solid var(--cyber-cyan-500);
    border-left: var(--border-thin) solid var(--color-border-default);
  }
  .cyber-dropdown--right.cyber-dropdown--magenta .cyber-dropdown__menu {
    border-right-color: var(--cyber-magenta-500);
  }
  .cyber-dropdown--up .cyber-dropdown__menu {
    top: auto;
    bottom: 100%;
    margin-top: 0;
    margin-bottom: var(--space-2xs);
    transform: translateY(10px);
  }
  .cyber-dropdown--up.cyber-dropdown--open .cyber-dropdown__menu, .cyber-dropdown--up.cyber-dropdown--css-only:focus-within .cyber-dropdown__menu {
    transform: translateY(0);
  }
  .cyber-dropdown--magenta .cyber-dropdown__menu {
    box-shadow: 0 10px 25px color-mix(in srgb, var(--cyber-void-900) 60%, transparent), 0 0 15px color-mix(in srgb, var(--cyber-magenta-500) 15%, transparent);
    border-left-color: var(--cyber-magenta-500);
  }
  .cyber-dropdown--magenta .cyber-dropdown__item:hover,
  .cyber-dropdown--magenta .cyber-dropdown__item:focus-visible {
    color: var(--cyber-magenta-500);
    background: color-mix(in srgb, var(--cyber-magenta-500) 10%, transparent);
  }
  .cyber-dropdown--magenta .cyber-dropdown__item--active {
    color: var(--cyber-magenta-500);
  }
}
@layer components {
  .cyber-terminal {
    border: 1px solid var(--cyber-green-700);
    overflow: hidden;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    background: var(--color-bg-secondary);
  }
  .cyber-terminal__header {
    display: flex;
    gap: var(--space-xs);
    align-items: center;
    padding: var(--space-xs) var(--space-sm);
    border-bottom: 1px solid var(--cyber-green-700);
    background: var(--cyber-green-900);
  }
  .cyber-terminal__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
  }
  .cyber-terminal__dot--red {
    background: var(--cyber-magenta-500);
  }
  .cyber-terminal__dot--yellow {
    background: var(--cyber-yellow-500);
  }
  .cyber-terminal__dot--green {
    background: var(--cyber-green-500);
  }
  .cyber-terminal__title {
    margin-left: auto;
    font-size: var(--text-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cyber-green-500);
  }
  .cyber-terminal__body {
    padding: var(--space-md);
    line-height: 1.8;
    color: var(--cyber-green-400);
  }
  .cyber-terminal__prompt {
    color: var(--cyber-cyan-500);
  }
  .cyber-terminal__cursor {
    display: inline-block;
    width: 8px;
    height: 1.1em;
    margin-left: 2px;
    background: var(--cyber-green-500);
    transform: translateY(0.1em);
    animation: blink 1s step-end infinite;
    vertical-align: middle;
  }
  .cyber-terminal__line {
    display: flex;
    gap: var(--space-xs);
    line-height: 1.8;
    white-space: pre-wrap;
    word-break: break-word;
  }
  .cyber-terminal__line--input {
    color: var(--color-text-primary);
  }
  .cyber-terminal__line--output {
    color: var(--color-text-secondary);
  }
  .cyber-terminal__line--error {
    color: var(--cyber-magenta-500);
  }
  .cyber-terminal__line--success {
    color: var(--cyber-green-500);
  }
  .cyber-terminal__line--warning {
    color: var(--cyber-yellow-500);
  }
  .cyber-terminal__line--info {
    color: var(--cyber-cyan-500);
  }
  .cyber-terminal__command {
    color: var(--color-text-primary);
  }
  .cyber-terminal__input {
    display: flex;
    gap: var(--space-xs);
    align-items: center;
    padding: var(--space-sm);
    border-top: 1px solid var(--cyber-green-700);
    background: var(--color-bg-tertiary);
  }
  .cyber-terminal__input-field {
    flex: 1;
    border: none;
    font-family: inherit;
    font-size: inherit;
    color: var(--color-text-primary);
    background: transparent;
    caret-color: var(--cyber-cyan-500);
    outline: none;
  }
  .cyber-terminal__input-field::placeholder {
    color: var(--color-text-muted);
  }
  .cyber-terminal .syntax-keyword {
    color: var(--cyber-magenta-500);
  }
  .cyber-terminal .syntax-string {
    color: var(--cyber-green-500);
  }
  .cyber-terminal .syntax-number {
    color: var(--cyber-yellow-500);
  }
  .cyber-terminal .syntax-comment {
    font-style: italic;
    color: var(--cyber-chrome-500);
  }
  .cyber-terminal .syntax-function {
    color: var(--cyber-cyan-500);
  }
  .cyber-terminal .syntax-variable {
    color: var(--cyber-chrome-200);
  }
  .cyber-terminal .syntax-operator {
    color: var(--cyber-chrome-400);
  }
  .cyber-terminal--sm {
    font-size: var(--text-xs);
  }
  .cyber-terminal--sm .cyber-terminal__body {
    min-height: 100px;
    max-height: 250px;
  }
  .cyber-terminal--lg {
    font-size: var(--text-base);
  }
  .cyber-terminal--lg .cyber-terminal__body {
    min-height: 300px;
    max-height: 700px;
  }
  .cyber-terminal--fullheight .cyber-terminal__body {
    max-height: none;
  }
  .cyber-terminal--no-header .cyber-terminal__header {
    display: none;
  }
  .cyber-terminal--rounded {
    border-radius: var(--radius-lg);
  }
  .cyber-terminal--rounded .cyber-terminal__header {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
  .cyber-terminal--glow {
    box-shadow: 0 0 20px color-mix(in srgb, var(--cyber-green-500) 20%, transparent), inset 0 0 60px color-mix(in srgb, var(--cyber-green-500) 5%, transparent);
  }
  @keyframes blink {
    50% {
      opacity: 0%;
    }
  }
  .cyber-terminal-typing {
    border-right: 2px solid var(--cyber-cyan-500);
    overflow: hidden;
    white-space: nowrap;
    animation: typing 2s steps(30, end), blink 1s step-end infinite;
  }
  @keyframes typing {
    from {
      width: 0;
    }
    to {
      width: 100%;
    }
  }
  .cyber-terminal-ascii {
    line-height: 1.2;
    white-space: pre;
    color: var(--cyber-cyan-500);
    text-shadow: 0 0 10px var(--cyber-cyan-500);
  }
}
@layer components {
  .cyber-spinner {
    --spinner-size: 48px;
    --spinner-color-primary: var(--cyber-cyan-500);
    --spinner-color-secondary: var(--cyber-magenta-500);
    --spinner-thickness: 3px;
    position: relative;
    display: inline-block;
    width: var(--spinner-size);
    height: var(--spinner-size);
  }
  .cyber-spinner::before, .cyber-spinner::after {
    content: "";
    position: absolute;
    border: var(--spinner-thickness) solid transparent;
    border-radius: 50%;
    inset: 0;
    will-change: transform;
  }
  .cyber-spinner::before {
    animation: spin 1s linear infinite;
    border-top-color: var(--spinner-color-primary);
  }
  .cyber-spinner::after {
    animation: spin 1s linear infinite reverse;
    animation-delay: -0.5s;
    border-bottom-color: var(--spinner-color-secondary);
  }
  .cyber-spinner--xs {
    --spinner-size: 16px;
    --spinner-thickness: 2px;
  }
  .cyber-spinner--sm {
    --spinner-size: 24px;
    --spinner-thickness: 2px;
  }
  .cyber-spinner--md {
    --spinner-size: 48px;
    --spinner-thickness: 3px;
  }
  .cyber-spinner--lg {
    --spinner-size: 64px;
    --spinner-thickness: 4px;
  }
  .cyber-spinner--xl {
    --spinner-size: 96px;
    --spinner-thickness: 5px;
  }
  .cyber-spinner--magenta {
    --spinner-color-primary: var(--cyber-magenta-500);
    --spinner-color-secondary: var(--cyber-cyan-500);
  }
  .cyber-spinner--yellow {
    --spinner-color-primary: var(--cyber-yellow-500);
    --spinner-color-secondary: var(--cyber-cyan-500);
  }
  .cyber-spinner--green {
    --spinner-color-primary: var(--cyber-green-500);
    --spinner-color-secondary: var(--cyber-cyan-500);
  }
  .cyber-spinner--chrome {
    --spinner-color-primary: var(--cyber-chrome-400);
    --spinner-color-secondary: var(--cyber-chrome-600);
  }
  .cyber-spinner--single::after {
    display: none;
  }
  .cyber-spinner--dotted::before {
    border-width: calc(var(--spinner-thickness) + 1px);
    border-style: dotted;
  }
  .cyber-spinner--dotted::after {
    border-width: calc(var(--spinner-thickness) + 1px);
    border-style: dotted;
  }
  .cyber-spinner--glow::before {
    filter: drop-shadow(0 0 4px var(--spinner-color-primary));
  }
  .cyber-spinner--glow::after {
    filter: drop-shadow(0 0 4px var(--spinner-color-secondary));
  }
  .cyber-spinner--pulse {
    animation: spinner-pulse 1.5s ease-in-out infinite;
  }
  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }
  @keyframes spinner-pulse {
    0%, 100% {
      opacity: 100%;
      transform: scale(1);
    }
    50% {
      opacity: 60%;
      transform: scale(0.9);
    }
  }
  .cyber-spinner-dots {
    --dot-size: 8px;
    --dot-color: var(--cyber-cyan-500);
    display: inline-flex;
    gap: 4px;
    align-items: center;
  }
  .cyber-spinner-dots span {
    width: var(--dot-size);
    height: var(--dot-size);
    border-radius: 50%;
    background: var(--dot-color);
    animation: spinner-dots-bounce 1.4s ease-in-out infinite;
  }
  .cyber-spinner-dots span:nth-child(1) {
    animation-delay: 0s;
  }
  .cyber-spinner-dots span:nth-child(2) {
    animation-delay: 0.16s;
  }
  .cyber-spinner-dots span:nth-child(3) {
    animation-delay: 0.32s;
  }
  .cyber-spinner-dots--magenta {
    --dot-color: var(--cyber-magenta-500);
  }
  .cyber-spinner-dots--yellow {
    --dot-color: var(--cyber-yellow-500);
  }
  .cyber-spinner-dots--green {
    --dot-color: var(--cyber-green-500);
  }
  @keyframes spinner-dots-bounce {
    0%, 80%, 100% {
      opacity: 50%;
      transform: scale(0.6);
    }
    40% {
      opacity: 100%;
      transform: scale(1);
    }
  }
  .cyber-spinner-bars {
    --bar-width: 4px;
    --bar-height: 24px;
    --bar-color: var(--cyber-cyan-500);
    display: inline-flex;
    gap: 3px;
    align-items: center;
  }
  .cyber-spinner-bars span {
    width: var(--bar-width);
    height: var(--bar-height);
    background: var(--bar-color);
    animation: spinner-bars-scale 1.2s ease-in-out infinite;
  }
  .cyber-spinner-bars span:nth-child(1) {
    animation-delay: 0s;
  }
  .cyber-spinner-bars span:nth-child(2) {
    animation-delay: 0.1s;
  }
  .cyber-spinner-bars span:nth-child(3) {
    animation-delay: 0.2s;
  }
  .cyber-spinner-bars span:nth-child(4) {
    animation-delay: 0.3s;
  }
  .cyber-spinner-bars span:nth-child(5) {
    animation-delay: 0.4s;
  }
  .cyber-spinner-bars--magenta {
    --bar-color: var(--cyber-magenta-500);
  }
  .cyber-spinner-bars--yellow {
    --bar-color: var(--cyber-yellow-500);
  }
  .cyber-spinner-bars--green {
    --bar-color: var(--cyber-green-500);
  }
  @keyframes spinner-bars-scale {
    0%, 40%, 100% {
      transform: scaleY(0.4);
    }
    20% {
      transform: scaleY(1);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .cyber-spinner,
    .cyber-spinner::before,
    .cyber-spinner::after {
      animation: none;
    }
    .cyber-spinner-dots span,
    .cyber-spinner-bars span {
      animation: none;
    }
  }
  .cyber-spinner-overlay {
    position: absolute;
    z-index: var(--z-modal);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--cyber-void-500) 90%, transparent);
    backdrop-filter: blur(4px);
    inset: 0;
  }
  .cyber-spinner-overlay__text {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-text-secondary);
  }
}
@layer components {
  .cyber-skeleton {
    --skeleton-base: var(--cyber-void-400);
    --skeleton-shine: color-mix(in srgb, var(--cyber-cyan-500) 15%, var(--cyber-void-200));
    --skeleton-glow: color-mix(in srgb, var(--cyber-cyan-500) 8%, transparent);
    position: relative;
    display: block;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--skeleton-base);
  }
  .cyber-skeleton::after {
    content: "";
    position: absolute;
    background: linear-gradient(90deg, transparent 0%, var(--skeleton-glow) 25%, var(--skeleton-shine) 50%, var(--skeleton-glow) 75%, transparent 100%);
    transform: translateX(-100%);
    animation: skeleton-shimmer 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    inset: 0;
  }
  .cyber-skeleton--text {
    width: 100%;
    height: 1em;
    border-radius: var(--radius-sm);
  }
  .cyber-skeleton--title {
    width: 60%;
    height: 1.5em;
    border-radius: var(--radius-sm);
  }
  .cyber-skeleton--avatar {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
  }
  .cyber-skeleton--avatar-sm {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
  }
  .cyber-skeleton--avatar-lg {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 50%;
  }
  .cyber-skeleton--thumbnail {
    width: 100%;
    border-radius: var(--radius-md);
    aspect-ratio: 16/9;
  }
  .cyber-skeleton--square {
    width: 100%;
    border-radius: var(--radius-md);
    aspect-ratio: 1;
  }
  .cyber-skeleton--button {
    width: 120px;
    height: 2.5rem;
    border-radius: 0;
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
  }
  .cyber-skeleton--badge {
    display: inline-block;
    width: 60px;
    height: 1.25rem;
    border-radius: 0;
  }
  .cyber-skeleton--cyan {
    --skeleton-base: color-mix(in srgb, var(--cyber-cyan-500) 8%, var(--cyber-void-400));
    --skeleton-shine: color-mix(in srgb, var(--cyber-cyan-500) 25%, var(--cyber-void-200));
    --skeleton-glow: color-mix(in srgb, var(--cyber-cyan-500) 12%, transparent);
  }
  .cyber-skeleton--magenta {
    --skeleton-base: color-mix(in srgb, var(--cyber-magenta-500) 8%, var(--cyber-void-400));
    --skeleton-shine: color-mix(in srgb, var(--cyber-magenta-500) 25%, var(--cyber-void-200));
    --skeleton-glow: color-mix(in srgb, var(--cyber-magenta-500) 12%, transparent);
  }
  .cyber-skeleton--yellow {
    --skeleton-base: color-mix(in srgb, var(--cyber-yellow-500) 8%, var(--cyber-void-400));
    --skeleton-shine: color-mix(in srgb, var(--cyber-yellow-500) 25%, var(--cyber-void-200));
    --skeleton-glow: color-mix(in srgb, var(--cyber-yellow-500) 12%, transparent);
  }
  .cyber-skeleton--green {
    --skeleton-base: color-mix(in srgb, var(--cyber-green-500) 8%, var(--cyber-void-400));
    --skeleton-shine: color-mix(in srgb, var(--cyber-green-500) 25%, var(--cyber-void-200));
    --skeleton-glow: color-mix(in srgb, var(--cyber-green-500) 12%, transparent);
  }
  .cyber-skeleton--pulse {
    animation: skeleton-pulse 2.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
  .cyber-skeleton--pulse::after {
    display: none;
  }
  .cyber-skeleton--wave::after {
    background: linear-gradient(90deg, transparent 0%, var(--skeleton-glow) 15%, color-mix(in srgb, var(--skeleton-shine) 70%, transparent) 35%, var(--skeleton-shine) 50%, color-mix(in srgb, var(--skeleton-shine) 70%, transparent) 65%, var(--skeleton-glow) 85%, transparent 100%);
    animation: skeleton-wave 2.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  }
  .cyber-skeleton--glow {
    box-shadow: 0 0 8px var(--skeleton-glow);
    animation: skeleton-glow 2s ease-in-out infinite;
  }
  .cyber-skeleton--glow::after {
    background: linear-gradient(90deg, transparent 0%, var(--skeleton-shine) 50%, transparent 100%);
    animation: skeleton-shimmer 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  }
  .cyber-skeleton--no-animation::after {
    display: none;
  }
  @keyframes skeleton-shimmer {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(100%);
    }
  }
  @keyframes skeleton-pulse {
    0%, 100% {
      opacity: 100%;
    }
    50% {
      opacity: 60%;
    }
  }
  @keyframes skeleton-wave {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(100%);
    }
  }
  @keyframes skeleton-glow {
    0%, 100% {
      box-shadow: 0 0 8px var(--skeleton-glow);
    }
    50% {
      box-shadow: 0 0 16px var(--skeleton-glow), 0 0 24px var(--skeleton-glow);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .cyber-skeleton::after {
      background: var(--skeleton-shine);
      opacity: 50%;
      transform: none;
      animation: none;
    }
    .cyber-skeleton--pulse, .cyber-skeleton--glow {
      animation: none;
    }
  }
  .cyber-skeleton-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-md);
    border: var(--border-thin) solid var(--color-border-default);
    background: var(--color-bg-secondary);
  }
  .cyber-skeleton-card__header {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
  }
  .cyber-skeleton-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
  }
  .cyber-skeleton-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }
  .cyber-skeleton-list__item {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
    padding: var(--space-sm);
    border: var(--border-thin) solid var(--color-border-default);
    background: var(--color-bg-secondary);
  }
  .cyber-skeleton-list__content {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--space-2xs);
  }
  .cyber-skeleton-table {
    width: 100%;
    border: var(--border-thin) solid var(--color-border-default);
    background: var(--color-bg-secondary);
    border-collapse: collapse;
  }
  .cyber-skeleton-table__row {
    display: flex;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    border-bottom: var(--border-thin) solid var(--color-border-default);
  }
  .cyber-skeleton-table__row:last-child {
    border-bottom: none;
  }
  .cyber-skeleton-table__row--header {
    background: var(--color-bg-tertiary);
  }
  .cyber-skeleton-table__cell {
    flex: 1;
  }
  .cyber-skeleton-profile {
    display: flex;
    gap: var(--space-md);
    align-items: flex-start;
  }
  .cyber-skeleton-profile__info {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--space-xs);
  }
}
@layer components {
  .cyber-noise {
    position: relative;
  }
  .cyber-noise::before {
    content: "";
    position: absolute;
    z-index: 10;
    border-radius: inherit;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    opacity: 15%;
    pointer-events: none;
    inset: 0;
  }
  .cyber-noise--animated::before {
    animation: cyber-noise-shift 0.5s steps(10) infinite;
  }
  @keyframes cyber-noise-shift {
    0%, 100% {
      transform: translate(0, 0);
    }
    10% {
      transform: translate(-5%, -10%);
    }
    20% {
      transform: translate(-15%, 5%);
    }
    30% {
      transform: translate(7%, -25%);
    }
    40% {
      transform: translate(-5%, 25%);
    }
    50% {
      transform: translate(-15%, 10%);
    }
    60% {
      transform: translate(15%, 0%);
    }
    70% {
      transform: translate(0%, 15%);
    }
    80% {
      transform: translate(3%, 35%);
    }
    90% {
      transform: translate(-10%, 10%);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .cyber-noise--animated {
      animation: none;
    }
  }
}
@layer components {
  .cyber-scanlines {
    position: relative;
  }
  .cyber-scanlines::after {
    content: "";
    position: absolute;
    z-index: 10;
    border-radius: inherit;
    background: repeating-linear-gradient(0deg, transparent 0, transparent 2px, rgba(0, 0, 0, 0.5) 2px, rgba(0, 0, 0, 0.5) 4px);
    pointer-events: none;
    inset: 0;
  }
  .cyber-scanlines--fine::after {
    background: repeating-linear-gradient(0deg, transparent, transparent 1px, rgba(0, 0, 0, 0.2) 1px, rgba(0, 0, 0, 0.2) 2px);
  }
  .cyber-scanlines--heavy::after {
    background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0, 0, 0, 0.4) 3px, rgba(0, 0, 0, 0.4) 6px);
  }
  .cyber-scanlines--flicker::after {
    animation: cyber-scanline-flicker 0.15s infinite;
  }
  .cyber-scanlines--scroll::after {
    animation: cyber-scanline-scroll 8s linear infinite;
  }
  @keyframes cyber-scanline-flicker {
    0%, 100% {
      opacity: var(--scanline-opacity);
    }
    50% {
      opacity: calc(var(--scanline-opacity) * 98%);
    }
  }
  @keyframes cyber-scanline-scroll {
    0% {
      background-position: 0 0;
    }
    100% {
      background-position: 0 100%;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .cyber-scanlines--flicker,
    .cyber-scanlines--scroll {
      animation: none;
    }
  }
}
@layer components {
  .cyber-heading {
    position: relative;
    display: inline-block;
    color: var(--cyber-cyan-500);
    text-shadow: 0 0 10px var(--cyber-cyan-500), 0 0 20px color-mix(in srgb, var(--cyber-cyan-500) 60%, transparent);
  }
  .cyber-heading::before, .cyber-heading::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 80%;
    will-change: transform, clip-path;
  }
  .cyber-heading::before {
    z-index: -1;
    color: var(--cyber-magenta-500);
    animation: glitch-1 8s infinite linear alternate-reverse;
  }
  .cyber-heading::after {
    z-index: -1;
    color: var(--cyber-cyan-300);
    animation: glitch-2 6s infinite linear alternate;
  }
  @keyframes glitch-1 {
    0%, 100% {
      transform: translate(-2px, 0);
      clip-path: inset(0 0 95% 0);
    }
    10% {
      transform: translate(2px, 0);
      clip-path: inset(30% 0 40% 0);
    }
    20% {
      transform: translate(-1px, 0);
      clip-path: inset(70% 0 10% 0);
    }
    30% {
      transform: translate(1px, 0);
      clip-path: inset(10% 0 60% 0);
    }
    40% {
      transform: translate(-2px, 0);
      clip-path: inset(80% 0 5% 0);
    }
    50% {
      transform: translate(2px, 0);
      clip-path: inset(20% 0 55% 0);
    }
    60% {
      transform: translate(-1px, 0);
      clip-path: inset(50% 0 30% 0);
    }
    70% {
      transform: translate(1px, 0);
      clip-path: inset(5% 0 85% 0);
    }
    80% {
      transform: translate(-2px, 0);
      clip-path: inset(45% 0 35% 0);
    }
    90% {
      transform: translate(2px, 0);
      clip-path: inset(85% 0 5% 0);
    }
  }
  @keyframes glitch-2 {
    0%, 100% {
      transform: translate(2px, 0);
      clip-path: inset(95% 0 0 0);
    }
    10% {
      transform: translate(-2px, 0);
      clip-path: inset(40% 0 30% 0);
    }
    20% {
      transform: translate(1px, 0);
      clip-path: inset(10% 0 70% 0);
    }
    30% {
      transform: translate(-1px, 0);
      clip-path: inset(60% 0 10% 0);
    }
    40% {
      transform: translate(2px, 0);
      clip-path: inset(5% 0 80% 0);
    }
    50% {
      transform: translate(-2px, 0);
      clip-path: inset(55% 0 20% 0);
    }
    60% {
      transform: translate(1px, 0);
      clip-path: inset(30% 0 50% 0);
    }
    70% {
      transform: translate(-1px, 0);
      clip-path: inset(85% 0 5% 0);
    }
    80% {
      transform: translate(2px, 0);
      clip-path: inset(35% 0 45% 0);
    }
    90% {
      transform: translate(-2px, 0);
      clip-path: inset(5% 0 85% 0);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .cyber-heading::before, .cyber-heading::after {
      opacity: 0%;
      transform: none;
      animation: none;
      clip-path: none;
    }
  }
  .cyber-glitch {
    --glitch-color-1: var(--cyber-cyan-500, #00f0ff);
    --glitch-color-2: var(--cyber-magenta-500, #ff2a6d);
    --glitch-offset: 2px;
    --glitch-duration: 3s;
    position: relative;
  }
  .cyber-glitch::before, .cyber-glitch::after {
    content: attr(data-text);
    position: absolute;
    overflow: hidden;
    color: inherit;
    background: inherit;
    pointer-events: none;
    inset: 0;
    will-change: transform, clip-path;
  }
  .cyber-glitch::before {
    color: var(--glitch-color-1);
    animation: cyber-glitch-1 var(--glitch-duration) infinite linear alternate-reverse;
    clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
    mix-blend-mode: screen;
  }
  .cyber-glitch::after {
    color: var(--glitch-color-2);
    animation: cyber-glitch-2 var(--glitch-duration) infinite linear alternate-reverse;
    clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
    mix-blend-mode: screen;
  }
  .cyber-glitch--intense {
    --glitch-offset: 4px;
    --glitch-duration: 1.5s;
  }
  .cyber-glitch--intense::before {
    animation: cyber-glitch-intense-1 var(--glitch-duration) infinite;
  }
  .cyber-glitch--intense::after {
    animation: cyber-glitch-intense-2 var(--glitch-duration) infinite;
  }
  .cyber-glitch--hover::before, .cyber-glitch--hover::after {
    opacity: 0%;
    animation: none;
  }
  .cyber-glitch--hover:hover::before, .cyber-glitch--hover:hover::after {
    opacity: 100%;
  }
  .cyber-glitch--hover:hover::before {
    animation: cyber-glitch-1 0.3s infinite linear alternate-reverse;
  }
  .cyber-glitch--hover:hover::after {
    animation: cyber-glitch-2 0.3s infinite linear alternate-reverse;
  }
  .cyber-glitch--subtle {
    --glitch-offset: 1px;
  }
  .cyber-glitch--subtle::before, .cyber-glitch--subtle::after {
    opacity: 70%;
  }
  @keyframes cyber-glitch-1 {
    0%, 100% {
      transform: translate(0);
      clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
    }
    20% {
      transform: translate(calc(var(--glitch-offset) * -1), 0);
      clip-path: polygon(0 15%, 100% 15%, 100% 30%, 0 30%);
    }
    40% {
      transform: translate(var(--glitch-offset), 0);
      clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%);
    }
    60% {
      transform: translate(calc(var(--glitch-offset) * -0.5), 0);
      clip-path: polygon(0 35%, 100% 35%, 100% 50%, 0 50%);
    }
    80% {
      transform: translate(var(--glitch-offset), 0);
      clip-path: polygon(0 0, 100% 0, 100% 10%, 0 10%);
    }
  }
  @keyframes cyber-glitch-2 {
    0%, 100% {
      transform: translate(0);
      clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
    }
    20% {
      transform: translate(var(--glitch-offset), 0);
      clip-path: polygon(0 70%, 100% 70%, 100% 85%, 0 85%);
    }
    40% {
      transform: translate(calc(var(--glitch-offset) * -1), 0);
      clip-path: polygon(0 80%, 100% 80%, 100% 95%, 0 95%);
    }
    60% {
      transform: translate(calc(var(--glitch-offset) * 0.5), 0);
      clip-path: polygon(0 60%, 100% 60%, 100% 75%, 0 75%);
    }
    80% {
      transform: translate(calc(var(--glitch-offset) * -1), 0);
      clip-path: polygon(0 90%, 100% 90%, 100% 100%, 0 100%);
    }
  }
  @keyframes cyber-glitch-intense-1 {
    0% {
      transform: translate(0);
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
    5% {
      transform: translate(var(--glitch-offset), calc(var(--glitch-offset) * -1));
      clip-path: polygon(0 5%, 100% 5%, 100% 10%, 0 10%);
    }
    10% {
      transform: translate(calc(var(--glitch-offset) * -2), 0);
      clip-path: polygon(0 20%, 100% 20%, 100% 25%, 0 25%);
    }
    15% {
      transform: translate(0);
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
    50% {
      transform: translate(calc(var(--glitch-offset) * -1), var(--glitch-offset));
      clip-path: polygon(0 40%, 100% 40%, 100% 50%, 0 50%);
    }
    55% {
      transform: translate(var(--glitch-offset), 0);
      clip-path: polygon(0 60%, 100% 60%, 100% 70%, 0 70%);
    }
    60%, 100% {
      transform: translate(0);
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
  }
  @keyframes cyber-glitch-intense-2 {
    0% {
      transform: translate(0);
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
    7% {
      transform: translate(calc(var(--glitch-offset) * -1), var(--glitch-offset));
      clip-path: polygon(0 75%, 100% 75%, 100% 80%, 0 80%);
    }
    12% {
      transform: translate(var(--glitch-offset), 0);
      clip-path: polygon(0 85%, 100% 85%, 100% 95%, 0 95%);
    }
    17% {
      transform: translate(0);
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
    45% {
      transform: translate(var(--glitch-offset), calc(var(--glitch-offset) * -1));
      clip-path: polygon(0 30%, 100% 30%, 100% 35%, 0 35%);
    }
    52% {
      transform: translate(calc(var(--glitch-offset) * -2), 0);
      clip-path: polygon(0 15%, 100% 15%, 100% 25%, 0 25%);
    }
    58%, 100% {
      transform: translate(0);
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .cyber-glitch::before, .cyber-glitch::after {
      opacity: 0%;
      transform: none;
      animation: none;
      clip-path: none;
    }
  }
}
@layer components {
  .cyber-neon-border {
    position: relative;
    isolation: isolate;
  }
  .cyber-neon-border::before {
    content: "";
    position: absolute;
    z-index: -1;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--cyber-cyan-500, #00f0ff), var(--cyber-magenta-500, #ff2a6d), var(--cyber-yellow-500, #fcee0a), var(--cyber-green-500, #05ffa1), var(--cyber-cyan-500, #00f0ff));
    background-size: 400% 100%;
    animation: neon-flow 4s linear infinite;
    filter: blur(15px);
    inset: 0;
  }
  .cyber-neon-border::after {
    content: "";
    position: absolute;
    z-index: -1;
    border-radius: inherit;
    background: var(--color-bg-secondary, #0d1117);
    inset: 0;
  }
  .cyber-neon-border--magenta::before {
    background: linear-gradient(90deg, var(--cyber-magenta-500, #ff2a6d), var(--cyber-cyan-500, #00f0ff), var(--cyber-magenta-500, #ff2a6d), var(--cyber-yellow-500, #fcee0a), var(--cyber-magenta-500, #ff2a6d));
  }
  .cyber-neon-border--cyan::before {
    background: linear-gradient(90deg, var(--cyber-cyan-400, #33f3ff), var(--cyber-cyan-600, #00c4cc), var(--cyber-cyan-500, #00f0ff), var(--cyber-cyan-400, #33f3ff));
  }
  .cyber-neon-border--yellow::before {
    background: linear-gradient(90deg, var(--cyber-yellow-500, #fcee0a), var(--cyber-green-500, #05ffa1), var(--cyber-yellow-500, #fcee0a), var(--cyber-cyan-500, #00f0ff), var(--cyber-yellow-500, #fcee0a));
  }
  .cyber-neon-border--green::before {
    background: linear-gradient(90deg, var(--cyber-green-500, #05ffa1), var(--cyber-cyan-500, #00f0ff), var(--cyber-green-500, #05ffa1), var(--cyber-yellow-500, #fcee0a), var(--cyber-green-500, #05ffa1));
  }
  @keyframes neon-flow {
    0% {
      background-position: 0% 50%;
    }
    100% {
      background-position: 400% 50%;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .cyber-neon-border::before {
      background-position: 0% 50%;
      animation: none;
    }
  }
}
@layer components {
  .cyber-datastream {
    position: relative;
  }
  .cyber-datastream::before {
    content: "";
    position: absolute;
    z-index: 1;
    border-radius: inherit;
    background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--cyber-cyan-500) 30%, transparent) 50%, transparent 100%);
    background-size: 100% 200%;
    animation: datastream 3s linear infinite;
    pointer-events: none;
    inset: 0;
  }
  @keyframes datastream {
    0% {
      background-position: 0% 0%;
    }
    100% {
      background-position: 0% 200%;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .cyber-datastream::before {
      animation: none;
    }
  }
}
@layer utilities {
  .cyber-hidden {
    display: none;
  }
  .cyber-block {
    display: block;
  }
  .cyber-inline {
    display: inline;
  }
  .cyber-inline-block {
    display: inline-block;
  }
  .cyber-flex {
    display: flex;
  }
  .cyber-inline-flex {
    display: inline-flex;
  }
  .cyber-grid {
    display: grid;
  }
}
@layer utilities {
  .cyber-flex-col {
    flex-direction: column;
  }
  .cyber-flex-row {
    flex-direction: row;
  }
  .cyber-flex-wrap {
    flex-wrap: wrap;
  }
  .cyber-flex-nowrap {
    flex-wrap: nowrap;
  }
  .cyber-items-start {
    align-items: flex-start;
  }
  .cyber-items-center {
    align-items: center;
  }
  .cyber-items-end {
    align-items: flex-end;
  }
  .cyber-items-stretch {
    align-items: stretch;
  }
  .cyber-justify-start {
    justify-content: flex-start;
  }
  .cyber-justify-center {
    justify-content: center;
  }
  .cyber-justify-end {
    justify-content: flex-end;
  }
  .cyber-justify-between {
    justify-content: space-between;
  }
  .cyber-justify-around {
    justify-content: space-around;
  }
  .cyber-gap-xs {
    gap: var(--space-xs);
  }
  .cyber-gap-sm {
    gap: var(--space-sm);
  }
  .cyber-gap-md {
    gap: var(--space-md);
  }
  .cyber-gap-lg {
    gap: var(--space-lg);
  }
  .cyber-gap-xl {
    gap: var(--space-xl);
  }
  .cyber-flex-1 {
    flex: 1 1 0%;
  }
  .cyber-flex-auto {
    flex: 1 1 auto;
  }
  .cyber-flex-none {
    flex: none;
  }
}
@layer utilities {
  .cyber-grid--2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: var(--space-md);
  }
  @media (width >= 640px) {
    .cyber-grid--2 {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  .cyber-grid--3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
    gap: var(--space-md);
  }
  @media (width >= 768px) {
    .cyber-grid--3 {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  .cyber-grid--4 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: var(--space-md);
  }
  @media (width >= 1024px) {
    .cyber-grid--4 {
      grid-template-columns: repeat(4, 1fr);
    }
  }
  .cyber-grid--auto-sm {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
    gap: var(--space-md);
  }
  .cyber-grid--auto-md {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
    gap: var(--space-md);
  }
  .cyber-grid--auto-lg {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 350px), 1fr));
    gap: var(--space-md);
  }
  .cyber-col-span-2 {
    grid-column: span 2;
  }
  .cyber-col-span-3 {
    grid-column: span 3;
  }
  .cyber-col-span-full {
    grid-column: 1/-1;
  }
}
@layer utilities {
  .cyber-m-0 {
    margin: 0;
  }
  .cyber-m-auto {
    margin: auto;
  }
  .cyber-m-xs {
    margin: var(--space-xs);
  }
  .cyber-m-sm {
    margin: var(--space-sm);
  }
  .cyber-m-md {
    margin: var(--space-md);
  }
  .cyber-m-lg {
    margin: var(--space-lg);
  }
  .cyber-mx-auto {
    margin-inline: auto;
  }
  .cyber-mx-sm {
    margin-inline: var(--space-sm);
  }
  .cyber-mx-md {
    margin-inline: var(--space-md);
  }
  .cyber-mx-lg {
    margin-inline: var(--space-lg);
  }
  .cyber-my-sm {
    margin-block: var(--space-sm);
  }
  .cyber-my-md {
    margin-block: var(--space-md);
  }
  .cyber-my-lg {
    margin-block: var(--space-lg);
  }
  .cyber-my-xl {
    margin-block: var(--space-xl);
  }
  .cyber-mt-0 {
    margin-top: 0;
  }
  .cyber-mt-xs {
    margin-top: var(--space-xs);
  }
  .cyber-mt-sm {
    margin-top: var(--space-sm);
  }
  .cyber-mt-md {
    margin-top: var(--space-md);
  }
  .cyber-mt-lg {
    margin-top: var(--space-lg);
  }
  .cyber-mt-xl {
    margin-top: var(--space-xl);
  }
  .cyber-mb-0 {
    margin-bottom: 0;
  }
  .cyber-mb-xs {
    margin-bottom: var(--space-xs);
  }
  .cyber-mb-sm {
    margin-bottom: var(--space-sm);
  }
  .cyber-mb-md {
    margin-bottom: var(--space-md);
  }
  .cyber-mb-lg {
    margin-bottom: var(--space-lg);
  }
  .cyber-mb-xl {
    margin-bottom: var(--space-xl);
  }
  .cyber-p-0 {
    padding: 0;
  }
  .cyber-p-xs {
    padding: var(--space-xs);
  }
  .cyber-p-sm {
    padding: var(--space-sm);
  }
  .cyber-p-md {
    padding: var(--space-md);
  }
  .cyber-p-lg {
    padding: var(--space-lg);
  }
  .cyber-p-xl {
    padding: var(--space-xl);
  }
  .cyber-px-0 {
    padding-inline: 0;
  }
  .cyber-px-sm {
    padding-inline: var(--space-sm);
  }
  .cyber-px-md {
    padding-inline: var(--space-md);
  }
  .cyber-px-lg {
    padding-inline: var(--space-lg);
  }
  .cyber-py-0 {
    padding-block: 0;
  }
  .cyber-py-sm {
    padding-block: var(--space-sm);
  }
  .cyber-py-md {
    padding-block: var(--space-md);
  }
  .cyber-py-lg {
    padding-block: var(--space-lg);
  }
  .cyber-py-xl {
    padding-block: var(--space-xl);
  }
}
@layer utilities {
  .cyber-text-left {
    text-align: left;
  }
  .cyber-text-center {
    text-align: center;
  }
  .cyber-text-right {
    text-align: right;
  }
  .cyber-text-primary {
    color: var(--color-text-primary);
  }
  .cyber-text-secondary {
    color: var(--color-text-secondary);
  }
  .cyber-text-muted {
    color: var(--color-text-muted);
  }
  .cyber-text-cyan {
    color: var(--cyber-cyan-500);
  }
  .cyber-text-magenta {
    color: var(--cyber-magenta-500);
  }
  .cyber-text-yellow {
    color: var(--cyber-yellow-500);
  }
  .cyber-text-green {
    color: var(--cyber-green-500);
  }
  .cyber-text-glow {
    color: var(--cyber-cyan-500);
    text-shadow: var(--glow-text-cyan);
  }
  .cyber-text-glow--magenta {
    color: var(--cyber-magenta-500);
    text-shadow: var(--glow-text-magenta);
  }
  .cyber-text-glow--yellow {
    color: var(--cyber-yellow-500);
    text-shadow: var(--glow-text-yellow);
  }
  .cyber-text-glow--green {
    color: var(--cyber-green-500);
    text-shadow: var(--glow-text-green);
  }
  .cyber-text-glow-cyan {
    color: var(--cyber-cyan-500);
    text-shadow: var(--glow-text-cyan);
  }
  .cyber-text-glow-magenta {
    color: var(--cyber-magenta-500);
    text-shadow: var(--glow-text-magenta);
  }
  .cyber-text-glow-yellow {
    color: var(--cyber-yellow-500);
    text-shadow: var(--glow-text-yellow);
  }
  .cyber-text-glow-green {
    color: var(--cyber-green-500);
    text-shadow: var(--glow-text-green);
  }
  .cyber-font-normal {
    font-weight: 400;
  }
  .cyber-font-medium {
    font-weight: 500;
  }
  .cyber-font-semibold {
    font-weight: 600;
  }
  .cyber-font-bold {
    font-weight: 700;
  }
  .cyber-font-display {
    font-family: var(--font-display);
  }
  .cyber-font-body {
    font-family: var(--font-body);
  }
  .cyber-font-mono {
    font-family: var(--font-mono);
  }
  .cyber-uppercase {
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
  }
  .cyber-lowercase {
    text-transform: lowercase;
  }
  .cyber-capitalize {
    text-transform: capitalize;
  }
  .cyber-truncate {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .cyber-line-clamp-2 {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .cyber-line-clamp-3 {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }
}
@layer utilities {
  .cyber-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    white-space: nowrap;
    clip: rect(0, 0, 0, 0);
  }
  .cyber-sr-only-focusable:focus,
  .cyber-sr-only-focusable:focus-within {
    position: static;
    width: auto;
    height: auto;
    margin: inherit;
    padding: inherit;
    overflow: visible;
    white-space: normal;
    clip: auto;
  }
  .cyber-not-sr {
    speak: none;
  }
  .cyber-focus-visible:focus-visible {
    outline: 2px solid var(--cyber-cyan-500);
    outline-offset: 2px;
  }
  @media (prefers-reduced-motion: reduce) {
    .cyber-motion-safe {
      transition: none !important;
      animation: none !important;
    }
  }
  @media (prefers-reduced-motion: no-preference) {
    .cyber-motion-reduce {
      transition: none !important;
      animation: none !important;
    }
  }
}
@layer utilities {
  @keyframes cyber-pulse {
    0%, 100% {
      opacity: 100%;
    }
    50% {
      opacity: 50%;
    }
  }
  @keyframes cyber-float {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-10px);
    }
  }
  @keyframes cyber-flicker-in {
    0% {
      opacity: 0%;
    }
    10% {
      opacity: 60%;
    }
    20% {
      opacity: 20%;
    }
    30% {
      opacity: 80%;
    }
    40% {
      opacity: 40%;
    }
    50% {
      opacity: 100%;
    }
    60% {
      opacity: 70%;
    }
    70% {
      opacity: 100%;
    }
    80% {
      opacity: 90%;
    }
    100% {
      opacity: 100%;
    }
  }
  @keyframes cyber-glow-pulse {
    0%, 100% {
      box-shadow: 0 0 5px currentcolor;
      filter: brightness(1);
    }
    50% {
      box-shadow: 0 0 20px currentcolor, 0 0 40px currentcolor;
      filter: brightness(1.2);
    }
  }
  @keyframes cyber-spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  @keyframes cyber-ping {
    75%, 100% {
      opacity: 0%;
      transform: scale(2);
    }
  }
  @keyframes cyber-bounce {
    0%, 100% {
      transform: translateY(-25%);
      animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    50% {
      transform: translateY(0);
      animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
  }
  .cyber-animate-pulse {
    animation: cyber-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
  .cyber-animate-float {
    animation: cyber-float 3s ease-in-out infinite;
  }
  .cyber-boot {
    animation: cyber-flicker-in 0.8s ease-out forwards;
  }
  .cyber-animate-glow {
    animation: cyber-glow-pulse 2s ease-in-out infinite;
  }
  .cyber-animate-spin {
    animation: cyber-spin 1s linear infinite;
  }
  .cyber-animate-ping {
    animation: cyber-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
  }
  .cyber-animate-bounce {
    animation: cyber-bounce 1s infinite;
  }
  .cyber-animate-none {
    animation: none;
  }
  .cyber-animate-paused {
    animation-play-state: paused;
  }
  .cyber-animate-running {
    animation-play-state: running;
  }
  .cyber-delay-100 {
    animation-delay: 100ms;
  }
  .cyber-delay-200 {
    animation-delay: 200ms;
  }
  .cyber-delay-300 {
    animation-delay: 300ms;
  }
  .cyber-delay-500 {
    animation-delay: 500ms;
  }
  .cyber-delay-1000 {
    animation-delay: 1000ms;
  }
  .cyber-duration-fast {
    animation-duration: 150ms;
  }
  .cyber-duration-normal {
    animation-duration: 300ms;
  }
  .cyber-duration-slow {
    animation-duration: 500ms;
  }
  .cyber-duration-slower {
    animation-duration: 1000ms;
  }
  .cyber-transition {
    transition-duration: var(--transition-base);
    transition-property: color, background-color, border-color, box-shadow, transform, opacity;
  }
  .cyber-transition-fast {
    transition-duration: var(--transition-fast);
  }
  .cyber-transition-slow {
    transition-duration: var(--transition-slow);
  }
  .cyber-transition-none {
    transition: none;
  }
  @media (prefers-reduced-motion: reduce) {
    .cyber-animate-pulse,
    .cyber-animate-float,
    .cyber-boot,
    .cyber-animate-glow,
    .cyber-animate-spin,
    .cyber-animate-ping,
    .cyber-animate-bounce {
      animation: none;
    }
    .cyber-transition {
      transition: none;
    }
  }
}
@layer utilities {
  @keyframes cyber-icon-spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  @keyframes cyber-icon-pulse {
    0%, 100% {
      opacity: 100%;
      transform: scale(1);
    }
    50% {
      opacity: 60%;
      transform: scale(0.95);
    }
  }
  @keyframes cyber-icon-glitch {
    0%, 100% {
      transform: translate(0);
      filter: none;
    }
    10% {
      transform: translate(-2px, 1px);
      filter: drop-shadow(2px 0 var(--cyber-cyan-500)) drop-shadow(-2px 0 var(--cyber-magenta-500));
    }
    20% {
      transform: translate(2px, -1px);
      filter: drop-shadow(-1px 0 var(--cyber-cyan-500)) drop-shadow(1px 0 var(--cyber-magenta-500));
    }
    30% {
      transform: translate(0);
      filter: none;
    }
    70% {
      transform: translate(1px, 1px);
      filter: drop-shadow(-2px 0 var(--cyber-cyan-500)) drop-shadow(2px 0 var(--cyber-magenta-500));
    }
    80% {
      transform: translate(-1px, -1px);
      filter: drop-shadow(1px 0 var(--cyber-cyan-500)) drop-shadow(-1px 0 var(--cyber-magenta-500));
    }
    90% {
      transform: translate(0);
      filter: none;
    }
  }
  .cyber-icon--sm {
    width: 1rem;
    height: 1rem;
  }
  .cyber-icon--md {
    width: 1.5rem;
    height: 1.5rem;
  }
  .cyber-icon--lg {
    width: 2rem;
    height: 2rem;
  }
  .cyber-icon--xl {
    width: 3rem;
    height: 3rem;
  }
  .cyber-icon--cyan {
    color: var(--cyber-cyan-500);
  }
  .cyber-icon--magenta {
    color: var(--cyber-magenta-500);
  }
  .cyber-icon--yellow {
    color: var(--cyber-yellow-500);
  }
  .cyber-icon--green {
    color: var(--cyber-green-500);
  }
  .cyber-icon--spin {
    animation: cyber-icon-spin 1s linear infinite;
  }
  .cyber-icon--pulse {
    animation: cyber-icon-pulse 2s ease-in-out infinite;
  }
  .cyber-icon--glitch {
    animation: cyber-icon-glitch 3s infinite;
  }
  .cyber-icon--inline {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
  }
  @media (prefers-reduced-motion: reduce) {
    .cyber-icon--spin,
    .cyber-icon--pulse,
    .cyber-icon--glitch {
      animation: none;
    }
  }
}

/*# sourceMappingURL=cybercore.css.map */