/* ===========================================================
   AI EXPRESS — Design System
   Futuriste · sombre · lueurs aurore · grand public
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* ---- Surfaces (deep blue-black) ---- */
  --bg:          oklch(0.15 0.022 258);
  --bg-2:        oklch(0.175 0.025 260);
  --surface:     oklch(0.21 0.026 260);
  --surface-2:   oklch(0.255 0.030 261);
  --surface-3:   oklch(0.30 0.032 261);
  --border:      oklch(0.34 0.030 262 / 0.7);
  --border-soft: oklch(0.34 0.030 262 / 0.35);
  --border-bright: oklch(0.46 0.040 262);

  /* ---- Text ---- */
  --text:        oklch(0.97 0.008 250);
  --text-dim:    oklch(0.74 0.018 255);
  --text-faint:  oklch(0.56 0.020 257);

  /* ---- Accents (shared chroma, varied hue) ---- */
  --accent:      oklch(0.80 0.150 218);   /* electric cyan-blue */
  --accent-deep: oklch(0.66 0.155 230);
  --accent-2:    oklch(0.72 0.165 296);   /* violet */
  --accent-3:    oklch(0.82 0.150 175);   /* aqua-mint highlight */
  --success:     oklch(0.80 0.150 158);
  --warn:        oklch(0.83 0.150 82);
  --danger:      oklch(0.68 0.190 24);

  /* ---- Glows ---- */
  --glow-accent: 0 0 0 1px oklch(0.80 0.150 218 / 0.25), 0 8px 40px -8px oklch(0.66 0.155 230 / 0.55);
  --glow-violet: 0 0 50px -10px oklch(0.72 0.165 296 / 0.5);

  --radius:   16px;
  --radius-sm: 10px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  --shadow-card: 0 1px 0 0 oklch(1 0 0 / 0.04) inset, 0 18px 50px -24px oklch(0 0 0 / 0.7);
  --shadow-pop: 0 24px 70px -20px oklch(0 0 0 / 0.7);

  --maxw: 1320px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}

#root { height: 100vh; width: 100vw; }

::selection { background: oklch(0.80 0.150 218 / 0.30); color: var(--text); }

/* ---- Atmospheric background ---- */
.atmosphere {
  position: fixed; inset: 0; z-index: 0; overflow: hidden;
  background:
    radial-gradient(120% 90% at 12% -10%, oklch(0.30 0.10 250 / 0.55), transparent 55%),
    radial-gradient(110% 80% at 92% 8%, oklch(0.28 0.10 300 / 0.45), transparent 55%),
    radial-gradient(100% 90% at 50% 120%, oklch(0.26 0.09 200 / 0.40), transparent 60%),
    var(--bg);
}
.atmosphere::before {
  content: ''; position: absolute; inset: -2px;
  background-image:
    linear-gradient(oklch(1 0 0 / 0.025) 1px, transparent 1px),
    linear-gradient(90deg, oklch(1 0 0 / 0.025) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(110% 100% at 50% 0%, #000 30%, transparent 80%);
          mask-image: radial-gradient(110% 100% at 50% 0%, #000 30%, transparent 80%);
}
.atmosphere .orb {
  position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.5;
  animation: drift 26s var(--ease) infinite alternate;
}
.atmosphere .orb.a { width: 460px; height: 460px; left: -120px; top: -80px;
  background: radial-gradient(circle, oklch(0.66 0.155 230 / 0.9), transparent 70%); }
.atmosphere .orb.b { width: 520px; height: 520px; right: -160px; top: 10%;
  background: radial-gradient(circle, oklch(0.62 0.17 300 / 0.8), transparent 70%); animation-delay: -8s; }
.atmosphere .orb.c { width: 420px; height: 420px; left: 35%; bottom: -180px;
  background: radial-gradient(circle, oklch(0.70 0.15 190 / 0.7), transparent 70%); animation-delay: -14s; }

@keyframes drift {
  to { transform: translate3d(60px, 40px, 0) scale(1.12); }
}

/* Grain overlay */
.atmosphere::after {
  content: ''; position: absolute; inset: 0; opacity: 0.04; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
  .atmosphere .orb { animation: none; }
}

/* ---- Scrollbars ---- */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--border-bright); background-clip: padding-box; }

/* ---- Buttons ---- */
.btn {
  font-family: var(--font-body); font-weight: 600; font-size: 15px;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
  padding: 11px 18px; border-radius: var(--radius-pill); cursor: pointer;
  display: inline-flex; align-items: center; gap: 9px; line-height: 1;
  transition: transform .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease), box-shadow .25s var(--ease);
  white-space: nowrap; user-select: none;
}
.btn:hover { background: var(--surface-3); border-color: var(--border-bright); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  border: none; color: oklch(0.16 0.03 258);
  background: linear-gradient(105deg, var(--accent-3), var(--accent) 45%, var(--accent-2));
  box-shadow: var(--glow-accent);
  font-weight: 700;
}
.btn-primary:hover { box-shadow: var(--glow-accent), 0 10px 30px -6px oklch(0.66 0.155 230 / 0.6); transform: translateY(-1px); }

.btn-ghost { background: transparent; border-color: var(--border-soft); }
.btn-ghost:hover { background: oklch(1 0 0 / 0.05); }

.btn-sm { padding: 8px 13px; font-size: 13.5px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* ---- Inputs ---- */
.field {
  width: 100%; font-family: var(--font-body); font-size: 15px; color: var(--text);
  background: oklch(0.13 0.02 258 / 0.7); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 13px 15px; outline: none;
  transition: border-color .18s, box-shadow .18s, background .18s;
}
.field::placeholder { color: var(--text-faint); }
.field:focus { border-color: var(--accent); box-shadow: 0 0 0 3px oklch(0.80 0.150 218 / 0.16); background: oklch(0.14 0.02 258 / 0.9); }

.label { font-size: 12.5px; font-weight: 600; color: var(--text-dim); letter-spacing: 0.02em; margin-bottom: 7px; display: block; }

/* ---- Card / glass ---- */
.glass {
  background: linear-gradient(180deg, oklch(0.24 0.03 260 / 0.72), oklch(0.19 0.025 259 / 0.72));
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: var(--shadow-card);
}

/* ---- Solid content panel (legible over busy bg, capture-safe) ---- */
.panel {
  background: linear-gradient(180deg, oklch(0.235 0.028 260), oklch(0.20 0.025 259));
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

/* ---- Chips ---- */
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 600; color: var(--text-dim);
  padding: 6px 12px; border-radius: var(--radius-pill);
  border: 1px solid var(--border-soft); background: oklch(1 0 0 / 0.03);
  cursor: pointer; transition: all .16s var(--ease); white-space: nowrap;
}
.chip:hover { color: var(--text); border-color: var(--border-bright); background: oklch(1 0 0 / 0.06); }
.chip.active { color: oklch(0.16 0.03 258); background: var(--accent); border-color: transparent; }

/* ---- Brand mark ---- */
.brand { display: inline-flex; align-items: center; gap: 11px; }
.brand .mark {
  width: 34px; height: 34px; border-radius: 10px; position: relative; flex: none;
  background: linear-gradient(135deg, var(--accent-3), var(--accent) 50%, var(--accent-2));
  box-shadow: 0 6px 22px -6px oklch(0.66 0.155 230 / 0.7), inset 0 0 0 1px oklch(1 0 0 / 0.2);
  display: grid; place-items: center;
}
.brand .mark svg { width: 19px; height: 19px; }
.brand .name { font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -0.01em; }
.brand .name b { color: var(--accent); font-weight: 700; }

/* ---- Utility ---- */
.mono { font-family: var(--font-mono); }
.dim { color: var(--text-dim); }
.faint { color: var(--text-faint); }
.center { display: grid; place-items: center; }
.row { display: flex; align-items: center; }
.col { display: flex; flex-direction: column; }
.gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; }

/* ---- Animations ---- */
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn { from { opacity: 0; transform: scale(0.94) translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes shimmer { to { background-position: 200% 0; } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 oklch(0.80 0.150 218 / 0.4); } 70%,100% { box-shadow: 0 0 0 12px oklch(0.80 0.150 218 / 0); } }

.cursor-blink::after { content: '▋'; margin-left: 2px; color: var(--accent); animation: blink 1s steps(1) infinite; }