@layer tokens, components, utilities;

@layer tokens {
  :root {
    --bg-base:        oklch(0.16 0.02 240);
    --bg-card:        oklch(0.20 0.025 240 / 0.72);
    --bg-overlay:     oklch(0.12 0.015 240 / 0.85);
    --text-primary:   oklch(0.96 0.01 240);
    --text-secondary: oklch(0.68 0.02 240);
    --text-muted:     oklch(0.50 0.02 240);
    --neon-accent:    oklch(0.85 0.18 195);
    --neon-secondary: oklch(0.78 0.18 295);
    --status-success: oklch(0.78 0.18 145);
    --status-warning: oklch(0.82 0.18 75);
    --status-error:   oklch(0.65 0.22 25);
    --font-mono:      ui-monospace, "JetBrains Mono", "Cascadia Code", Consolas, "Liberation Mono", "Microsoft YaHei Mono", monospace;
    --fs-xs: 12px; --fs-sm: 13px; --fs-md: 15px;
    --fs-lg: 18px; --fs-xl: 24px; --fs-2xl: 32px;
    --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
    --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
    --r-sm: 4px; --r-md: 8px; --r-lg: 16px; --r-xl: 24px;
    --shadow-card: 0 8px 32px oklch(0% 0 0 / 0.40);
    --shadow-glow: 0 0 24px oklch(0.85 0.18 195 / 0.35);
    --blur-card:   14px;
    --border-card: 1px solid oklch(1 0 0 / 0.08);
    --dur-fast: 150ms; --dur-std: 250ms; --dur-slow: 400ms;
    --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
    --ease-in:  cubic-bezier(0.4, 0, 0.6, 1);
  }
}

@layer components {
  body {
    background:
      radial-gradient(ellipse at 20% 0%, oklch(0.30 0.10 295 / 0.30), transparent 60%),
      radial-gradient(ellipse at 80% 100%, oklch(0.28 0.10 195 / 0.28), transparent 60%),
      linear-gradient(to right,  oklch(1 0 0 / 0.04) 1px, transparent 1px) 0 0 / 48px 48px,
      linear-gradient(to bottom, oklch(1 0 0 / 0.04) 1px, transparent 1px) 0 0 / 48px 48px,
      var(--bg-base);
    color: var(--text-primary);
    font-family: system-ui, "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: var(--fs-md);
    line-height: 1.5;
    min-height: 100vh;
    margin: 0;
  }

  h1 { font-size: var(--fs-2xl); margin: 0 0 var(--sp-3) 0; }
  h2 { font-size: var(--fs-xl); margin: 0 0 var(--sp-3) 0; }

  .layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-5);
    max-width: 720px;
    margin: var(--sp-6) auto;
    padding: var(--sp-4);
  }

  .card {
    background: var(--bg-card);
    backdrop-filter: blur(var(--blur-card));
    border: var(--border-card);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-card);
    padding: var(--sp-5);
  }

  .hint {
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    margin: 0 0 var(--sp-5) 0;
  }

  .dropzone {
    cursor: pointer;
    padding: var(--sp-7) var(--sp-5);
    border: 2px dashed oklch(1 0 0 / 0.20);
    border-radius: var(--r-lg);
    text-align: center;
    color: var(--text-secondary);
    transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  }

  .dropzone:hover,
  .dropzone[data-drag-over="true"] {
    transform: scale(1.01);
    box-shadow: 0 0 24px var(--neon-accent);
  }

  .dropzone svg { margin-bottom: var(--sp-3); color: var(--text-muted); }

  .file-list {
    list-style: none;
    padding: 0;
    margin: var(--sp-3) 0;
    font-size: var(--fs-sm);
    color: var(--text-secondary);
  }

  .file-list:empty::before {
    content: attr(data-empty);
    color: var(--text-muted);
    font-style: italic;
  }

  .field {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    margin: var(--sp-4) 0;
  }

  .field input[type="number"] {
    width: 5em;
    padding: var(--sp-1) var(--sp-2);
    background: oklch(1 0 0 / 0.06);
    border: 1px solid oklch(1 0 0 / 0.12);
    border-radius: var(--r-sm);
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
  }

  .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--neon-accent), var(--neon-secondary));
    box-shadow: var(--shadow-glow);
    color: oklch(0.10 0.02 240);
    font-weight: 600;
    font-size: var(--fs-md);
    border: none;
    border-radius: var(--r-md);
    padding: var(--sp-3) var(--sp-5);
    cursor: pointer;
    text-decoration: none;
    transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  }

  .btn-primary:hover { transform: scale(1.02); box-shadow: 0 0 32px var(--neon-accent); }
  .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }

  .btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--neon-secondary);
    border-radius: var(--r-md);
    color: var(--neon-secondary);
    font-weight: 600;
    font-size: var(--fs-md);
    padding: var(--sp-3) var(--sp-5);
    cursor: pointer;
    transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  }

  .btn-secondary:hover { transform: scale(1.02); box-shadow: 0 0 16px oklch(0.78 0.18 295 / 0.25); }

  .task-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--sp-4);
  }

  .badge {
    display: inline-block;
    padding: var(--sp-1) var(--sp-3);
    border-radius: var(--r-sm);
    font-weight: 600;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: oklch(0.10 0.02 240);
  }

  .badge--queued  { background: var(--status-warning); }
  .badge--running  { background: var(--neon-accent); }
  .badge--done     { background: var(--status-success); }
  .badge--failed   { background: var(--status-error); }

  .queue-position {
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    margin: 0;
  }

  .progress {
    width: 100%;
    height: 8px;
    appearance: none;
    border-radius: var(--r-sm);
    background: oklch(1 0 0 / 0.08);
    border: none;
    margin: var(--sp-3) 0;
  }

  .progress::-webkit-progress-bar { background: transparent; }
  .progress::-webkit-progress-value {
    background: linear-gradient(90deg, var(--neon-secondary), var(--neon-accent));
    border-radius: var(--r-sm);
    transition: width var(--dur-std);
  }
  .progress::-moz-progress-bar {
    background: linear-gradient(90deg, var(--neon-secondary), var(--neon-accent));
    border-radius: var(--r-sm);
  }

  .progress-meta {
    display: flex;
    gap: var(--sp-3);
    align-items: center;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    margin: 0 0 var(--sp-3) 0;
  }

  .sep { opacity: 0.4; }

  .current-key { font-family: var(--font-mono); }

  .warnings summary {
    cursor: pointer;
    font-size: var(--fs-sm);
    color: var(--text-secondary);
  }

  .warning-list {
    list-style: none;
    padding: 0;
    margin: var(--sp-2) 0 0 0;
  }

  .warning-list li,
  .warning-row {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    color: var(--status-warning);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: var(--sp-1) var(--sp-2);
    border-bottom: 1px solid oklch(1 0 0 / 0.04);
    cursor: help;
  }

  .actions {
    display: flex;
    gap: var(--sp-3);
    margin-top: var(--sp-5);
  }

  .summary {
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    margin: 0 0 var(--sp-3) 0;
  }

  .error-head {
    display: flex;
    gap: var(--sp-3);
    align-items: center;
    color: var(--status-error);
  }

  .error-message {
    color: var(--status-error);
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    margin: var(--sp-3) 0;
  }
}

@layer utilities {
  .hidden { display: none !important; }

  :focus-visible {
    outline: 2px solid var(--neon-accent);
    outline-offset: 2px;
    border-radius: var(--r-sm);
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      transition-duration: 0.01ms !important;
      animation-duration: 0.01ms !important;
    }
    .card, .btn-primary, .dropzone {
      backdrop-filter: none;
      transform: none !important;
    }
  }
}