@tailwind base;
@tailwind components;
@tailwind utilities;

/*
* Neobrutalism UI System Base Styles
* Bold, unapologetic design with high contrast and stark geometric shapes
*/

@layer base {
  /* Atlassian Sans font face */
  @font-face {
    font-family: 'Atlassian Sans';
    src: url("/assets/AtlassianSans-latin-b84dbfd6.woff2") format('woff2');
    font-weight: 400 800;
    font-style: normal;
    font-display: swap;
  }

  /* Custom font loading for neobrutalism aesthetic + Vietnamese support */
  @import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Inter:wght@400;500;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700&display=swap');

  :root {
    /* Neobrutalism color palette - high contrast, bold primaries */
    --neo-black: #000000;
    --neo-white: #ffffff;
    --neo-red: #ff0000;
    --neo-blue: #0000ff;
    --neo-yellow: #ffff00;
    --neo-green: #00ff00;
    --neo-purple: #ff00ff;
    --neo-cyan: #00ffff;
    --neo-orange: #ff8800;
    --neo-pink: #ff69b4;

    /* Grays for contrast */
    --neo-gray-100: #f5f5f5;
    --neo-gray-200: #e5e5e5;
    --neo-gray-800: #1a1a1a;
    --neo-gray-900: #0a0a0a;

    /* Terminal/Technical colors */
    --neo-terminal-green: #00ff00;
    --neo-phosphor-green: #33ff33;
    --neo-amber: #ffb000;
    --neo-terminal-bg: #0a0a0a;
    --neo-crt-glow: rgba(0, 255, 0, 0.3);
    --neo-scanline: rgba(0, 0, 0, 0.05);

    /* Shadow definitions */
    --neo-shadow-sm: 4px 4px 0px var(--neo-black);
    --neo-shadow-md: 6px 6px 0px var(--neo-black);
    --neo-shadow-lg: 8px 8px 0px var(--neo-black);
    --neo-shadow-xl: 12px 12px 0px var(--neo-black);

    /* Border thickness */
    --neo-border-sm: 2px;
    --neo-border-md: 3px;
    --neo-border-lg: 4px;
    --neo-border-xl: 6px;
  }

  /* Reset and base typography */
  * {
    box-sizing: border-box;
  }

  body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 500;
    line-height: 1.4;
    color: var(--neo-black);
    background-color: var(--neo-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* Headings - technical bold aesthetic */
  h1, h2, h3, h4, h5, h6 {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-weight: 700;
    letter-spacing: -0.02em;
  }

  /* Monospace elements */
  code, pre, kbd, samp {
    font-family: 'Space Mono', 'Courier New', monospace;
    font-weight: 700;
  }

  /* Focus styles for accessibility */
  *:focus {
    outline: 4px solid var(--neo-yellow);
    outline-offset: 2px;
  }

  /* High contrast selection */
  ::selection {
    background-color: var(--neo-yellow);
    color: var(--neo-black);
  }

  ::-moz-selection {
    background-color: var(--neo-yellow);
    color: var(--neo-black);
  }
}

@layer components {
  /* Neobrutalism Button Base */
  .neo-btn {
    @apply inline-flex items-center justify-center;
    @apply px-6 py-3 text-base font-bold uppercase tracking-wide;
    @apply border-3 border-black bg-white text-black;
    @apply transition-all duration-150 ease-out;
    @apply hover:translate-x-1 hover:translate-y-1;
    @apply active:translate-x-2 active:translate-y-2 active:shadow-none;
    @apply focus:translate-x-1 focus:translate-y-1;
    @apply disabled:opacity-50 disabled:cursor-not-allowed;
    @apply disabled:hover:translate-x-0 disabled:hover:translate-y-0;
    box-shadow: var(--neo-shadow-md);
    text-decoration: none;
  }

  /* Button variants */
  .neo-btn--primary {
    @apply bg-neo-red text-white border-black;
  }

  .neo-btn--secondary {
    @apply bg-neo-blue text-white border-black;
  }

  .neo-btn--success {
    @apply bg-neo-green text-black border-black;
  }

  .neo-btn--warning {
    @apply bg-neo-yellow text-black border-black;
  }

  .neo-btn--danger {
    @apply bg-neo-black text-white border-black;
  }

  .neo-btn--ghost {
    @apply bg-transparent text-black border-black;
  }

  /* Button sizes */
  .neo-btn--sm {
    @apply px-4 py-2 text-sm;
    box-shadow: var(--neo-shadow-sm);
  }

  .neo-btn--lg {
    @apply px-8 py-4 text-lg;
    box-shadow: var(--neo-shadow-lg);
  }

  .neo-btn--xl {
    @apply px-10 py-5 text-xl;
    box-shadow: var(--neo-shadow-xl);
  }

  /* Card component */
  .neo-card {
    @apply bg-white border-4 border-black p-6;
    @apply transition-all duration-150 ease-out;
    box-shadow: var(--neo-shadow-lg);
  }

  .neo-card:hover {
    @apply translate-x-1 translate-y-1;
    box-shadow: var(--neo-shadow-md);
  }

  /* Input components */
  .neo-input {
    @apply w-full px-4 py-3 text-base font-medium;
    @apply bg-white border-3 border-black;
    @apply focus:border-neo-red focus:ring-0;
    @apply placeholder:text-gray-500 placeholder:font-normal;
    box-shadow: var(--neo-shadow-sm);
  }

  .neo-input--error {
    @apply border-neo-red bg-red-50;
  }

  .neo-input--success {
    @apply border-neo-green bg-green-50;
  }

  /* Select component */
  .neo-select {
    @apply neo-input appearance-none cursor-pointer;
    @apply bg-no-repeat bg-right;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 12px center;
    background-size: 16px 12px;
  }

  /* Textarea component */
  .neo-textarea {
    @apply neo-input resize-none min-h-[120px];
  }

  /* Checkbox component */
  .neo-checkbox {
    @apply w-5 h-5 border-3 border-black bg-white;
    @apply checked:bg-neo-red checked:border-black;
    @apply focus:ring-0 focus:ring-offset-0;
    @apply cursor-pointer;
    appearance: none;
    background-image: none;
  }

  .neo-checkbox:checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m13.854 3.646-7.5 7.5a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6 10.293l7.146-7.147a.5.5 0 0 1 .708.708z'/%3e%3c/svg%3e");
  }

  /* Radio component */
  .neo-radio {
    @apply neo-checkbox rounded-full;
  }

  .neo-radio:checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
  }

  /* Badge component */
  .neo-badge {
    @apply inline-flex items-center px-3 py-1;
    @apply text-xs font-bold uppercase tracking-wide;
    @apply bg-neo-yellow text-black border-2 border-black;
  }

  /* Alert components */
  .neo-alert {
    @apply p-4 border-4 border-black font-medium;
    @apply flex items-start space-x-3;
    box-shadow: var(--neo-shadow-md);
  }

  .neo-alert--info {
    @apply bg-neo-cyan text-black;
  }

  .neo-alert--success {
    @apply bg-neo-green text-black;
  }

  .neo-alert--warning {
    @apply bg-neo-yellow text-black;
  }

  .neo-alert--error {
    @apply bg-neo-red text-white;
  }

  /* Navigation components */
  .neo-nav {
    @apply bg-white border-b-4 border-black;
    box-shadow: 0 4px 0 var(--neo-black);
  }

  .neo-nav-link {
    @apply px-4 py-3 font-bold uppercase tracking-wide;
    @apply text-black hover:bg-neo-yellow;
    @apply border-r-3 border-black last:border-r-0;
    @apply transition-colors duration-150;
    text-decoration: none;
  }

  .neo-nav-link--active {
    @apply bg-neo-red text-white;
  }

  /* Typography components */
  .neo-heading {
    @apply font-black uppercase tracking-tight leading-tight;
    @apply text-black;
  }

  .neo-heading--1 {
    @apply text-4xl md:text-6xl lg:text-7xl;
  }

  .neo-heading--2 {
    @apply text-3xl md:text-4xl lg:text-5xl;
  }

  .neo-heading--3 {
    @apply text-2xl md:text-3xl lg:text-4xl;
  }

  .neo-heading--4 {
    @apply text-xl md:text-2xl lg:text-3xl;
  }

  /* Text styles */
  .neo-text {
    @apply font-medium leading-relaxed;
  }

  .neo-text--bold {
    @apply font-bold;
  }

  .neo-text--mono {
    @apply font-mono font-bold tracking-wide;
  }

  /* Link styles */
  .neo-link {
    @apply text-neo-blue font-bold underline;
    @apply hover:text-neo-red hover:no-underline;
    @apply transition-colors duration-150;
    text-decoration-thickness: 3px;
    text-underline-offset: 4px;
  }

  /* Table components */
  .neo-table {
    @apply w-full border-4 border-black bg-white;
    box-shadow: var(--neo-shadow-lg);
  }

  .neo-table th {
    @apply bg-neo-black text-white px-4 py-3;
    @apply font-bold uppercase tracking-wide text-left;
    @apply border-b-3 border-black;
  }

  .neo-table td {
    @apply px-4 py-3 border-b-2 border-gray-200;
    @apply font-medium;
  }

  .neo-table tr:nth-child(even) {
    @apply bg-gray-50;
  }

  .neo-table tr:hover {
    @apply bg-neo-yellow;
  }

  /* Modal/Dialog components */
  .neo-modal-backdrop {
    @apply fixed inset-0 bg-black bg-opacity-75 z-50;
    @apply flex items-center justify-center p-4;
  }

  .neo-modal {
    @apply bg-white border-4 border-black p-8;
    @apply max-w-lg w-full max-h-[90vh] overflow-y-auto;
    box-shadow: var(--neo-shadow-xl);
  }

  /* Progress bar */
  .neo-progress {
    @apply w-full h-6 bg-gray-200 border-3 border-black;
    box-shadow: var(--neo-shadow-sm);
  }

  .neo-progress-bar {
    @apply h-full bg-neo-blue transition-all duration-300;
    @apply flex items-center justify-end pr-2;
  }

  /* Accordion */
  .neo-accordion-item {
    @apply border-3 border-black bg-white;
    @apply mb-2 last:mb-0;
  }

  .neo-accordion-header {
    @apply w-full px-6 py-4 text-left;
    @apply font-bold uppercase tracking-wide;
    @apply bg-white hover:bg-gray-100;
    @apply border-none cursor-pointer;
    @apply flex items-center justify-between;
  }

  .neo-accordion-content {
    @apply px-6 py-4 border-t-3 border-black;
    @apply bg-gray-50;
  }

  /* Loading spinner */
  .neo-spinner {
    @apply w-8 h-8 border-4 border-black border-t-transparent;
    @apply rounded-full animate-spin;
  }

  /* Breadcrumb */
  .neo-breadcrumb {
    @apply flex items-center space-x-2 text-sm font-bold;
  }

  .neo-breadcrumb-item {
    @apply text-black hover:text-neo-red;
    @apply transition-colors duration-150;
  }

  .neo-breadcrumb-separator {
    @apply text-black font-black text-lg;
  }

  /* Technical/Nerdy Components */

  /* Terminal Card */
  .neo-terminal-card {
    @apply bg-neo-terminal-bg border-3 border-neo-terminal-green p-6;
    @apply font-mono text-neo-terminal-green text-sm;
    box-shadow: 0 0 20px var(--neo-crt-glow), var(--neo-shadow-md);
    position: relative;
  }

  .neo-terminal-card::before {
    content: '> ';
    @apply text-neo-amber font-bold;
  }

  /* System Badge */
  .neo-sys-badge {
    @apply inline-flex items-center px-2 py-1;
    @apply text-xs font-mono font-bold uppercase tracking-wider;
    @apply bg-black text-neo-terminal-green border-2 border-neo-terminal-green;
  }

  .neo-sys-badge--cached {
    @apply bg-neo-green text-black border-black;
  }

  .neo-sys-badge--api {
    @apply bg-neo-blue text-white border-black;
  }

  .neo-sys-badge--error {
    @apply bg-neo-red text-white border-black;
  }

  /* Hex ID Display */
  .neo-hex-id {
    @apply font-mono font-bold text-xs tracking-wider;
    color: var(--neo-terminal-green);
    text-shadow: 0 0 8px var(--neo-crt-glow);
  }

  .neo-hex-id::before {
    content: '0x';
    @apply opacity-70;
  }

  /* LED Status Indicator */
  .neo-led {
    @apply inline-block w-3 h-3 rounded-full border-2 border-black;
    animation: blink 1.5s infinite;
  }

  .neo-led--active {
    @apply bg-neo-green;
    box-shadow: 0 0 10px var(--neo-terminal-green);
  }

  .neo-led--error {
    @apply bg-neo-red;
    box-shadow: 0 0 10px var(--neo-red);
  }

  .neo-led--warning {
    @apply bg-neo-yellow;
    box-shadow: 0 0 10px var(--neo-yellow);
  }

  .neo-led--idle {
    @apply bg-gray-400;
  }

  /* System Info Panel */
  .neo-sys-panel {
    @apply bg-black text-neo-terminal-green p-4;
    @apply border-3 border-neo-terminal-green font-mono text-xs;
    box-shadow: 0 0 15px var(--neo-crt-glow);
  }

  .neo-sys-panel-header {
    @apply flex items-center justify-between mb-2 pb-2;
    @apply border-b-2 border-neo-terminal-green;
    @apply font-bold uppercase tracking-wider;
  }

  .neo-sys-panel-row {
    @apply flex justify-between py-1;
    @apply border-b border-gray-800;
  }

  .neo-sys-panel-row:last-child {
    @apply border-b-0;
  }

  /* Glitch Effect */
  .neo-glitch {
    @apply relative inline-block;
    animation: glitch 3s infinite;
  }

  .neo-glitch::before,
  .neo-glitch::after {
    content: attr(data-text);
    @apply absolute top-0 left-0 w-full h-full;
  }

  .neo-glitch::before {
    left: 2px;
    text-shadow: -2px 0 var(--neo-purple);
    clip: rect(24px, 550px, 90px, 0);
    animation: glitch-anim-1 3s infinite linear alternate-reverse;
  }

  .neo-glitch::after {
    left: -2px;
    text-shadow: -2px 0 var(--neo-cyan);
    clip: rect(85px, 550px, 140px, 0);
    animation: glitch-anim-2 2.5s infinite linear alternate-reverse;
  }

  /* CRT Monitor Effect */
  .neo-crt {
    @apply relative bg-black;
    box-shadow:
      0 0 20px var(--neo-crt-glow),
      inset 0 0 100px rgba(0, 255, 0, 0.05);
  }

  .neo-crt::before {
    content: ' ';
    @apply block absolute top-0 left-0 bottom-0 right-0;
    @apply pointer-events-none;
    background: linear-gradient(
      rgba(18, 16, 16, 0) 50%,
      var(--neo-scanline) 50%
    );
    background-size: 100% 4px;
    z-index: 2;
    animation: scanline 8s linear infinite;
  }

  /* Monospace Text Styles - Space Mono for technical aesthetic */
  .neo-mono {
    font-family: 'Space Mono', monospace;
    @apply font-bold tracking-wide;
  }

  .neo-mono-sm {
    font-family: 'Space Mono', monospace;
    @apply text-xs tracking-wider;
  }

  .neo-mono-lg {
    font-family: 'Space Mono', monospace;
    @apply text-lg font-bold tracking-wide;
  }

  /* ASCII Border */
  .neo-ascii-border {
    @apply border-3 border-black relative p-4;
    background: white;
  }

  .neo-ascii-border::before {
    content: '┌' attr(data-title) '┐';
    @apply absolute -top-3 left-2 bg-white px-2;
    @apply font-mono text-xs font-bold;
  }

  /* Debug Info */
  .neo-debug {
    @apply fixed bottom-2 right-2 z-50;
    @apply bg-black text-neo-terminal-green p-2;
    @apply border-2 border-neo-terminal-green font-mono text-xs;
    @apply opacity-80 hover:opacity-100;
  }

  /* Binary Background */
  .neo-binary-bg {
    background-image:
      linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
    background-size: 20px 20px;
  }

  /* Technical Button Variants */
  .neo-btn--terminal {
    @apply bg-black text-neo-terminal-green border-neo-terminal-green;
    @apply font-mono;
    box-shadow: 0 0 10px var(--neo-crt-glow), var(--neo-shadow-md);
  }

  .neo-btn--terminal:hover {
    @apply bg-neo-terminal-green bg-opacity-10;
  }

  .neo-btn--hex {
    @apply font-mono tracking-widest;
  }

  /* Stat Display */
  .neo-stat {
    @apply inline-flex items-center gap-2;
    @apply font-mono text-sm;
  }

  .neo-stat-value {
    @apply font-bold text-neo-cyan;
  }

  .neo-stat-unit {
    @apply text-xs opacity-70 uppercase;
  }
}

@layer utilities {
  /* Neobrutalism shadow utilities */
  .shadow-neo-sm {
    box-shadow: var(--neo-shadow-sm);
  }

  .shadow-neo-md {
    box-shadow: var(--neo-shadow-md);
  }

  .shadow-neo-lg {
    box-shadow: var(--neo-shadow-lg);
  }

  .shadow-neo-xl {
    box-shadow: var(--neo-shadow-xl);
  }

  /* Border utilities */
  .border-neo-sm {
    border-width: var(--neo-border-sm);
  }

  .border-neo-md {
    border-width: var(--neo-border-md);
  }

  .border-neo-lg {
    border-width: var(--neo-border-lg);
  }

  .border-neo-xl {
    border-width: var(--neo-border-xl);
  }

  /* Transform utilities for neo effects */
  .transform-neo-hover {
    @apply transition-transform duration-150 ease-out;
    @apply hover:translate-x-1 hover:translate-y-1;
  }

  .transform-neo-active {
    @apply active:translate-x-2 active:translate-y-2;
  }

  /* Responsive typography scales */
  .text-neo-display {
    @apply text-5xl md:text-7xl lg:text-9xl font-black uppercase;
  }

  .text-neo-hero {
    @apply text-4xl md:text-6xl lg:text-8xl font-black uppercase;
  }

  .text-neo-title {
    @apply text-3xl md:text-5xl lg:text-6xl font-black uppercase;
  }

  /* Spacing utilities for consistent layout */
  .space-neo-sm {
    @apply space-y-4;
  }

  .space-neo-md {
    @apply space-y-6;
  }

  .space-neo-lg {
    @apply space-y-8;
  }

  .space-neo-xl {
    @apply space-y-12;
  }

  /* Grid utilities optimized for neobrutalism */
  .grid-neo {
    @apply grid gap-6;
  }

  .grid-neo-2 {
    @apply grid grid-cols-1 md:grid-cols-2 gap-6;
  }

  .grid-neo-3 {
    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6;
  }

  .grid-neo-4 {
    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6;
  }

  /* Technical Animations */
  @keyframes blink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0.4; }
  }

  @keyframes scanline {
    0% { transform: translateY(0); }
    100% { transform: translateY(100%); }
  }

  @keyframes glitch {
    0% { transform: translate(0); }
    20% { transform: translate(-2px, 2px); }
    40% { transform: translate(-2px, -2px); }
    60% { transform: translate(2px, 2px); }
    80% { transform: translate(2px, -2px); }
    100% { transform: translate(0); }
  }

  @keyframes glitch-anim-1 {
    0% {
      clip: rect(24px, 9999px, 90px, 0);
      transform: skew(0.5deg);
    }
    10% {
      clip: rect(15px, 9999px, 42px, 0);
      transform: skew(0.2deg);
    }
    20% {
      clip: rect(76px, 9999px, 21px, 0);
      transform: skew(0.8deg);
    }
    30% {
      clip: rect(33px, 9999px, 98px, 0);
      transform: skew(0.1deg);
    }
    40% {
      clip: rect(87px, 9999px, 12px, 0);
      transform: skew(0.6deg);
    }
    50% {
      clip: rect(5px, 9999px, 67px, 0);
      transform: skew(0.3deg);
    }
    60% {
      clip: rect(54px, 9999px, 30px, 0);
      transform: skew(0.9deg);
    }
    70% {
      clip: rect(12px, 9999px, 85px, 0);
      transform: skew(0.4deg);
    }
    80% {
      clip: rect(69px, 9999px, 48px, 0);
      transform: skew(0.7deg);
    }
    90% {
      clip: rect(28px, 9999px, 95px, 0);
      transform: skew(0.2deg);
    }
    100% {
      clip: rect(45px, 9999px, 18px, 0);
      transform: skew(0.5deg);
    }
  }

  @keyframes glitch-anim-2 {
    0% {
      clip: rect(65px, 9999px, 35px, 0);
      transform: skew(-0.4deg);
    }
    10% {
      clip: rect(8px, 9999px, 72px, 0);
      transform: skew(-0.7deg);
    }
    20% {
      clip: rect(92px, 9999px, 19px, 0);
      transform: skew(-0.2deg);
    }
    30% {
      clip: rect(41px, 9999px, 83px, 0);
      transform: skew(-0.9deg);
    }
    40% {
      clip: rect(27px, 9999px, 56px, 0);
      transform: skew(-0.3deg);
    }
    50% {
      clip: rect(74px, 9999px, 11px, 0);
      transform: skew(-0.6deg);
    }
    60% {
      clip: rect(3px, 9999px, 68px, 0);
      transform: skew(-0.8deg);
    }
    70% {
      clip: rect(59px, 9999px, 22px, 0);
      transform: skew(-0.1deg);
    }
    80% {
      clip: rect(14px, 9999px, 91px, 0);
      transform: skew(-0.5deg);
    }
    90% {
      clip: rect(80px, 9999px, 47px, 0);
      transform: skew(-0.4deg);
    }
    100% {
      clip: rect(36px, 9999px, 64px, 0);
      transform: skew(-0.7deg);
    }
  }
}

/* Responsive breakpoint adjustments */
@media (max-width: 640px) {
  .neo-btn {
    @apply px-4 py-2 text-sm;
  }

  .neo-card {
    @apply p-4;
  }

  .neo-modal {
    @apply p-6;
  }

  .neo-heading--1 {
    @apply text-3xl;
  }

  .neo-heading--2 {
    @apply text-2xl;
  }

  .neo-heading--3 {
    @apply text-xl;
  }

  .neo-heading--4 {
    @apply text-lg;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  :root {
    --neo-shadow-sm: 4px 4px 0px #000000;
    --neo-shadow-md: 6px 6px 0px #000000;
    --neo-shadow-lg: 8px 8px 0px #000000;
    --neo-shadow-xl: 12px 12px 0px #000000;
  }

  .neo-btn {
    @apply border-4;
  }

  .neo-card {
    @apply border-6;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .neo-btn,
  .neo-card,
  .neo-nav-link,
  .neo-link,
  .neo-progress-bar,
  .transform-neo-hover {
    @apply transition-none;
  }

  .neo-spinner,
  .neo-led,
  .neo-glitch,
  .neo-crt::before {
    @apply animate-none;
    animation: none !important;
  }

  .neo-glitch::before,
  .neo-glitch::after {
    display: none;
  }
}

/* Print styles */
@media print {
  .neo-btn,
  .neo-card,
  .neo-input,
  .neo-table {
    box-shadow: none;
    @apply border-2 border-black;
  }

  .neo-btn:hover,
  .neo-card:hover {
    @apply translate-x-0 translate-y-0;
  }
}