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

html, body {
  background: #0A0A0F;
  color: #FFFFFF;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }

body {
  font-family: ui-sans-serif, system-ui, -apple-system, "SF Pro Text", "PingFang SC", "Noto Sans SC", "Helvetica Neue", sans-serif;
  background-color: #0A0A0F;
  background-image:
    radial-gradient(circle at 18% -10%, rgba(139, 92, 246, 0.22), transparent 55%),
    radial-gradient(circle at 88% 8%, rgba(59, 130, 246, 0.18), transparent 50%),
    radial-gradient(circle at 50% 110%, rgba(217, 70, 239, 0.12), transparent 60%);
  background-attachment: fixed;
  min-height: 100vh;
}

::selection { background: rgba(139, 92, 246, 0.35); color: #fff; }

/* ===== Buttons ===== */
.btn {
  @apply inline-flex items-center justify-center gap-1.5 px-4 py-2 rounded-xl text-sm font-medium transition-all;
}
.btn-primary {
  @apply text-white bg-gradient-to-r from-violet-500 via-indigo-500 to-blue-500 hover:brightness-110 active:scale-[0.98];
  box-shadow: 0 6px 24px -8px rgba(99, 102, 241, 0.6), inset 0 1px 0 rgba(255,255,255,0.18);
}
.btn-ghost {
  @apply text-white/80 bg-white/[0.05] hover:bg-white/[0.09] border border-white/[0.08] active:scale-[0.98];
}
.btn-outline {
  @apply text-white/80 bg-white/[0.03] hover:bg-white/[0.07] border border-white/[0.1] hover:border-white/[0.18] active:scale-[0.98];
}
.btn-glass {
  @apply text-white bg-white/[0.06] hover:bg-white/[0.10] border border-white/[0.12] backdrop-blur-xl active:scale-[0.98];
}

/* ===== Cards (glass) ===== */
.card {
  @apply relative rounded-3xl bg-white/[0.035] border border-white/[0.08] backdrop-blur-xl;
  box-shadow:
    0 1px 0 0 rgba(255,255,255,0.06) inset,
    0 18px 60px -24px rgba(0,0,0,0.6);
}
.card-2 {
  @apply rounded-2xl bg-white/[0.03] border border-white/[0.07] backdrop-blur-xl;
}
.card-hover {
  @apply transition-all hover:border-white/[0.14];
}

/* ===== Chips ===== */
.chip {
  @apply inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[11px] font-medium border;
}
.chip-mock {
  @apply bg-amber-500/10 text-amber-300 border-amber-400/30;
}
.chip-live {
  @apply bg-emerald-500/10 text-emerald-300 border-emerald-400/30;
}
.chip-neutral {
  @apply bg-white/[0.05] text-white/70 border-white/[0.12];
}
.chip-violet {
  @apply bg-violet-500/15 text-violet-200 border-violet-400/30;
}

/* ===== Segmented ===== */
.seg {
  @apply inline-flex p-1 bg-white/[0.04] border border-white/[0.07] rounded-xl gap-1;
}
.seg-item {
  @apply px-3 py-1.5 rounded-lg text-xs font-medium text-white/55 transition-all cursor-pointer;
}
.seg-item-active {
  @apply text-white;
  background: linear-gradient(135deg, rgba(139,92,246,0.35), rgba(59,130,246,0.25));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 4px 16px -8px rgba(99,102,241,0.6);
}

/* ===== Tiles ===== */
.tile {
  @apply relative aspect-square overflow-hidden rounded-2xl bg-white/[0.04] ring-1 ring-white/[0.08] transition-all cursor-pointer;
}
.tile-selected {
  position: relative;
  background: linear-gradient(#0A0A0F, #0A0A0F) padding-box, linear-gradient(135deg, #8B5CF6, #3B82F6) border-box;
  border: 2px solid transparent;
  box-shadow: 0 0 0 1px rgba(139,92,246,0.25), 0 8px 32px -8px rgba(139,92,246,0.55);
}
.tile-rejected {
  @apply opacity-30 grayscale;
}
.tile-keynum {
  @apply absolute top-2 left-2 w-7 h-7 rounded-lg bg-black/60 backdrop-blur text-[11px] font-semibold text-white/85 flex items-center justify-center ring-1 ring-white/10;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}
.tile-badge {
  @apply absolute top-2 right-2 w-7 h-7 rounded-full flex items-center justify-center text-xs font-bold;
  box-shadow: 0 6px 18px -4px rgba(0,0,0,0.6);
}
.tile-badge-selected {
  background: linear-gradient(135deg, #8B5CF6, #3B82F6);
  color: #fff;
}
.tile-badge-rejected {
  @apply bg-rose-500 text-white;
}

/* ===== Fields ===== */
input, textarea {
  font-family: inherit;
}
.field {
  @apply w-full rounded-xl px-3.5 py-3 text-sm text-white placeholder:text-white/30 outline-none resize-none transition-colors;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}
.field:focus {
  border-color: rgba(139, 92, 246, 0.55);
  box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.12);
}

/* ===== KBD ===== */
.kbd {
  @apply inline-flex items-center justify-center min-w-[20px] h-5 px-1.5 rounded text-[10px] font-medium text-white/70 ring-1 ring-white/10 bg-white/[0.06];
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}

/* ===== Section header ===== */
.section-eyebrow {
  @apply inline-block text-[10px] font-semibold uppercase tracking-[0.18em] text-violet-300/80;
}

/* ===== Divider ===== */
.divider-line {
  @apply h-px w-full;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.10), transparent);
}

/* ===== Glow shadows ===== */
.shadow-glow-violet {
  box-shadow: 0 0 0 1px rgba(139,92,246,0.2), 0 8px 32px -8px rgba(139,92,246,0.5);
}
.shadow-glow-blue {
  box-shadow: 0 0 0 1px rgba(59,130,246,0.2), 0 8px 32px -8px rgba(59,130,246,0.45);
}

/* ===== Scrollbar (subtle) ===== */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.06); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.12); }