frontend/src/index.css

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

@layer base {
  body {
    background-color: #050d1b;
    color: #cfe2f7;
    font-family: 'Sora', sans-serif;
    overflow-x: hidden;
  }

  * { box-sizing: border-box; }
}

@layer components {
  .card {
    @apply bg-card border border-[#1a3a6e40] rounded-xl;
  }

  .tag-teal {
    @apply font-mono text-[10px] font-medium px-3 py-1 rounded-[3px]
           text-teal bg-[#0ec9a820] border border-[#0ec9a850];
  }

  .tag-amber {
    @apply font-mono text-[10px] font-medium px-3 py-1 rounded-[3px]
           text-amber bg-[#f5a62318] border border-[#f5a62340];
  }

  .tag-purple {
    @apply font-mono text-[10px] font-medium px-3 py-1 rounded-[3px]
           text-purple bg-[#9b74f720] border border-[#9b74f740];
  }

  .section-label {
    @apply font-mono text-[10px] text-teal tracking-[0.2em] uppercase
           flex items-center gap-2 mb-3;
  }

  .section-label::after {
    content: '';
    @apply flex-1 h-px bg-[#1e4a8a60];
  }

  .btn-primary {
    @apply bg-teal text-bg font-display font-semibold text-sm
           px-6 py-3 rounded-md cursor-pointer border-none
           transition-all duration-200 hover:opacity-85 hover:-translate-y-px;
  }

  .btn-ghost {
    @apply bg-transparent text-[#cfe2f7] font-display font-medium text-sm
           px-6 py-3 rounded-md cursor-pointer
           border border-[#1e4a8a60]
           transition-all duration-200
           hover:border-teal hover:bg-[#0ec9a820];
  }

  .risk-low    { @apply bg-[#30d98820] text-green  border border-[#30d98840]; }
  .risk-medium { @apply bg-[#f5a62318] text-amber  border border-[#f5a62340]; }
  .risk-high   { @apply bg-[#ff4d6a20] text-red    border border-[#ff4d6a40]; }

  .panel-header {
    @apply flex items-center gap-2 px-4 py-3
           border-b border-[#1a3a6e40]
           font-mono text-[10px] text-muted tracking-[0.12em] uppercase;
  }

  .emo-bar {
    @apply h-1 rounded-full transition-all duration-700 ease-out;
  }
}

@layer utilities {
  .glow-teal   { box-shadow: 0 0 24px rgba(14,201,168,0.12); }
  .glow-purple { box-shadow: 0 0 24px rgba(155,116,247,0.10); }

  .gradient-text {
    background: linear-gradient(135deg, #d8f0ff 0%, #8ecfff 40%, #0ec9a8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .processing-ring {
    animation: borderGlow 2s linear infinite;
  }

  @keyframes borderGlow {
    0%   { box-shadow: 0 0 0 0 rgba(14,201,168,0); }
    50%  { box-shadow: 0 0 0 1px rgba(14,201,168,0.4); }
    100% { box-shadow: 0 0 0 0 rgba(14,201,168,0); }
  }

  .scanline-animate {
    animation: scanMove 2.5s ease-in-out infinite;
  }

  @keyframes scanMove {
    0%   { top: 0%;   opacity: 0; }
    10%  { opacity: 0.7; }
    90%  { opacity: 0.7; }
    100% { top: 100%; opacity: 0; }
  }

  .cursor-blink::after {
    content: '';
    display: inline-block;
    width: 2px;
    height: 14px;
    background: #0ec9a8;
    margin-left: 2px;
    vertical-align: middle;
    animation: blink 1s infinite;
  }

  @keyframes blink {
    0%, 49% { opacity: 1; }
    50%, 100%{ opacity: 0; }
  }
}