/* =========================================================================
   EXOBIO — Exploration Command Center
   Design system "DEEPSPACE" : terminal de bord, pas panneau d'administration.

   Trois regles qui tranchent tous les arbitrages :
     1. Le noir n'est pas une couleur de fond, c'est le vide. L'interface flotte.
     2. L'ambre est rare. Il designe ce qui compte MAINTENANT. S'il est partout,
        il ne veut plus rien dire.
     3. Une seconde et demie. C'est le temps qu'on regarde le second ecran.
   ========================================================================= */

:root {
  /* --- Vide et coque --- */
  --void:        #05060a;
  --hull-900:    #0a0c11;
  --hull-800:    #101318;
  --hull-700:    #171b22;
  --hull-600:    #1f242d;

  /* --- Traits --- */
  --line:        #232935;
  --line-soft:   #1a1f28;
  --line-strong: #333d4d;

  /* --- Encre (blanc legerement casse, jamais #fff) --- */
  --ink:         #eceae5;
  --ink-dim:     #9ba3af;
  --ink-faint:   #5c6673;

  /* --- Accent : exploration, information active --- */
  --amber:       #ff9b33;
  --amber-hi:    #ffb865;
  --amber-lo:    #b36313;
  --amber-veil:  rgba(255, 155, 51, .10);
  --amber-glow:  rgba(255, 155, 51, .28);

  /* --- Statuts --- */
  --new:         #35d68a;   /* nouveau, jamais visite */
  --seen:        #f0533d;   /* deja visite, avertissement */
  --gold:        #f7c948;   /* jackpot, decouverte exceptionnelle */
  --info:        #5ea8e8;   /* information secondaire, discret */
  --warn:        #e9a13b;   /* estimation, incertitude */

  --new-veil:    rgba(53, 214, 138, .10);
  --seen-veil:   rgba(240, 83, 61, .10);
  --gold-veil:   rgba(247, 201, 72, .12);
  --info-veil:   rgba(94, 168, 232, .10);
  --warn-veil:   rgba(233, 161, 59, .10);

  /* --- Formes : angles techniques, jamais arrondis mous --- */
  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 6px;

  /* --- Profondeur : la hierarchie vient du fond et du filet, pas de l'ombre --- */
  --elev-1: 0 1px 0 rgba(255,255,255,.02) inset, 0 1px 2px rgba(0,0,0,.5);
  --elev-2: 0 8px 24px -12px rgba(0,0,0,.8);
  --glow-amber: 0 0 0 1px var(--amber-lo), 0 0 32px -14px var(--amber-glow);
  --glow-new:   0 0 0 1px rgba(53,214,138,.35), 0 0 32px -14px rgba(53,214,138,.30);
  --glow-seen:  0 0 0 1px rgba(240,83,61,.35),  0 0 32px -14px rgba(240,83,61,.30);

  /* --- Mouvement --- */
  --dur-1: 120ms;
  --dur-2: 180ms;
  --dur-3: 260ms;
  --ease:     cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  /* --- Typographie ---
     Volontairement PAS de police "jeu video" en texte courant : illisible en
     petit. Le caractere technique vient des chiffres monospace, des filets 1px
     et des angles coupes. */
  --font-ui:   "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "Cascadia Mono", "JetBrains Mono", ui-monospace, "SFMono-Regular",
               Consolas, "Liberation Mono", monospace;

  --rail-w: 66px;
  --topbar-h: 52px;
}

/* ------------------------------------------------------------------ Base -- */

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  background-color: var(--void);
  /* Deux halos tres sombres : empeche le banding sur les grands aplats noirs
     d'un ecran OLED, sans aucune image ni requete reseau. */
  background-image:
    radial-gradient(1200px 700px at 15% -10%, rgba(255,155,51,.045), transparent 60%),
    radial-gradient(1000px 800px at 100% 0%, rgba(94,168,232,.035), transparent 55%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--amber-veil); color: var(--ink); }

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.01em; }
p { margin: 0 0 10px; }
a { color: var(--amber); text-decoration: none; }
a:hover { color: var(--amber-hi); text-decoration: underline; }

/* Chiffres toujours alignes en colonne : indispensable pour comparer des
   credits d'une ligne a l'autre. */
.num, .mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.muted { color: var(--ink-dim); }
.faint { color: var(--ink-faint); }
.hidden { display: none !important; }

/* Focus visible partout : navigation clavier reelle, pas decorative. */
:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* Etiquette de champ / en-tete de colonne */
.label {
  font-size: 11px;
  line-height: 16px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-dim);
  font-weight: 600;
}

/* -------------------------------------------------------------- Scrollbar -- */

* { scrollbar-width: thin; scrollbar-color: var(--hull-600) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--hull-600);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: 99px;
}
*::-webkit-scrollbar-thumb:hover { background-clip: content-box; background-color: var(--line-strong); }

/* ----------------------------------------------------------------- Panel -- */

.panel {
  background: var(--hull-900);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--elev-1);
}
.panel-pad { padding: 18px 20px; }

.panel-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line-soft);
}
.panel-head .label { flex: 1; }

/* Le coin coupe est la signature visuelle. Reserve aux panneaux de premier
   plan : jamais sur les quarante lignes d'un tableau. */
.panel-cut {
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}
.panel-accent { border-left: 2px solid var(--amber); }

/* --------------------------------------------------------------- Boutons -- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 16px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  background: var(--hull-700);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease),
              color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
  white-space: nowrap;
}
.btn:hover { background: var(--hull-600); border-color: var(--line-strong); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

.btn-primary {
  color: #14100a;
  background: var(--amber);
  border-color: var(--amber);
}
.btn-primary:hover { background: var(--amber-hi); border-color: var(--amber-hi); }

.btn-ghost { background: transparent; }
.btn-ghost:hover { background: var(--hull-800); }

.btn-danger { color: var(--seen); border-color: rgba(240,83,61,.35); background: var(--seen-veil); }
.btn-danger:hover { background: rgba(240,83,61,.18); border-color: var(--seen); }

.btn-block { width: 100%; }
.btn-sm { padding: 6px 11px; font-size: 13px; }

.btn svg { flex: none; }

/* ---------------------------------------------------------------- Champs -- */

.field { margin-bottom: 16px; }
.field .label { display: block; margin-bottom: 6px; }

.input {
  width: 100%;
  padding: 10px 13px;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: var(--hull-800);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease),
              background var(--dur-1) var(--ease);
}
.input::placeholder { color: var(--ink-faint); }
.input:hover { border-color: var(--line-strong); }
.input:focus {
  outline: none;
  background: var(--hull-700);
  border-color: var(--amber-lo);
  box-shadow: 0 0 0 3px var(--amber-veil);
}
textarea.input { resize: vertical; min-height: 90px; line-height: 1.5; }

.input-wrap { position: relative; display: flex; align-items: center; }
.input-wrap .input { padding-right: 42px; }
.input-icon-btn {
  position: absolute;
  right: 6px;
  display: flex;
  padding: 6px;
  color: var(--ink-faint);
  background: none;
  border: 0;
  border-radius: var(--r-sm);
  cursor: pointer;
}
.input-icon-btn:hover { color: var(--ink); background: var(--hull-600); }

.hint { margin-top: 6px; font-size: 12.5px; color: var(--ink-faint); }
.hint-err { color: var(--seen); }

/* ---------------------------------------------------------------- Badges -- */
/* Le statut n'est JAMAIS porte par la couleur seule : couleur + glyphe + mot.
   Environ 8 % des hommes ne distinguent pas rouge et vert. */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  white-space: nowrap;
}
.badge .glyph { font-size: 13px; line-height: 1; }

.badge-new  { color: var(--new);  background: var(--new-veil);  border-color: rgba(53,214,138,.28); }
.badge-seen { color: var(--seen); background: var(--seen-veil); border-color: rgba(240,83,61,.28); }
.badge-gold { color: var(--gold); background: var(--gold-veil); border-color: rgba(247,201,72,.3); }
.badge-info { color: var(--info); background: var(--info-veil); border-color: rgba(94,168,232,.28); }
.badge-warn { color: var(--warn); background: var(--warn-veil); border-color: rgba(233,161,59,.28); }
.badge-mute { color: var(--ink-dim); background: var(--hull-700); border-color: var(--line); }

/* Marqueur de confiance : accompagne toute valeur non certaine. */
.conf {
  font-family: var(--font-mono);
  font-size: .85em;
  color: var(--warn);
  cursor: help;
}
.conf-derived { color: var(--info); }
.conf-manual  { color: var(--ink-dim); }
.conf-unknown { color: var(--ink-faint); }

/* ------------------------------------------------------------- Spinner ---- */

.spinner {
  width: 26px;
  height: 26px;
  margin: 48px auto;
  border: 2px solid var(--line);
  border-top-color: var(--amber);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ----------------------------------------------------------------- Vide --- */

.empty {
  padding: 44px 20px;
  color: var(--ink-faint);
  text-align: center;
}
.empty h3 { margin-bottom: 6px; color: var(--ink-dim); font-size: 16px; }
.empty p { margin: 0; font-size: 14px; }

/* --------------------------------------------------------------- Toasts --- */

.toast-zone {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 900;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: min(380px, calc(100vw - 36px));
}
.toast {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 12px 15px;
  background: var(--hull-800);
  border: 1px solid var(--line);
  border-left: 2px solid var(--ink-dim);
  border-radius: var(--r-md);
  box-shadow: var(--elev-2);
  animation: toast-in var(--dur-3) var(--ease-out);
}
@keyframes toast-in {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: none; }
}
.toast .t-title { font-size: 13.5px; font-weight: 700; }
.toast .t-msg   { font-size: 13px; color: var(--ink-dim); }
.toast.ok   { border-left-color: var(--new); }
.toast.err  { border-left-color: var(--seen); }
.toast.warn { border-left-color: var(--warn); }
.toast.gold { border-left-color: var(--gold); }
.toast.info { border-left-color: var(--info); }

/* --------------------------------------------------------------- Modale --- */

.modal-back {
  position: fixed;
  inset: 0;
  z-index: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(3, 4, 7, .72);
  backdrop-filter: blur(3px);
  animation: fade-in var(--dur-2) var(--ease);
}
.modal {
  width: min(520px, 100%);
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  background: var(--hull-900);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--elev-2);
  animation: modal-in var(--dur-3) var(--ease-out);
}
.modal.lg { width: min(860px, 100%); }
@keyframes modal-in {
  from { opacity: 0; transform: translateY(10px) scale(.99); }
  to   { opacity: 1; transform: none; }
}
.modal-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 20px;
  border-bottom: 1px solid var(--line-soft);
}
.modal-head h3 { flex: 1; font-size: 16px; }
.modal-close {
  padding: 2px 9px;
  font-size: 20px;
  line-height: 1;
  color: var(--ink-faint);
  background: none;
  border: 0;
  border-radius: var(--r-sm);
  cursor: pointer;
}
.modal-close:hover { color: var(--ink); background: var(--hull-700); }
.modal-body { padding: 20px; overflow: auto; }
.modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--line-soft);
}

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.fade-up { animation: fade-up var(--dur-3) var(--ease-out); }
@keyframes fade-up {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   Page d'accueil / connexion
   ========================================================================== */

.auth-page {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 20px;
  overflow: hidden;
}

/* Champ d'etoiles genere en CSS : aucune image, aucun asset propriétaire. */
.starfield {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-repeat: repeat;
  background-size: 380px 380px;
  background-image:
    radial-gradient(1px 1px at 34px 62px,  rgba(255,255,255,.55), transparent),
    radial-gradient(1px 1px at 152px 21px, rgba(255,255,255,.35), transparent),
    radial-gradient(1px 1px at 249px 143px,rgba(255,255,255,.45), transparent),
    radial-gradient(1px 1px at 88px 291px, rgba(255,255,255,.30), transparent),
    radial-gradient(1.6px 1.6px at 311px 246px, rgba(255,196,140,.42), transparent),
    radial-gradient(1px 1px at 197px 331px, rgba(255,255,255,.28), transparent),
    radial-gradient(1px 1px at 12px 199px,  rgba(190,220,255,.34), transparent);
  animation: drift 240s linear infinite;
}
@keyframes drift { to { background-position: 380px 380px; } }

.auth-card {
  position: relative;
  z-index: 1;
  width: min(430px, 100%);
}

.auth-brand { margin-bottom: 26px; text-align: center; }
.auth-brand .wordmark {
  font-family: var(--font-mono);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: .42em;
  text-indent: .42em;   /* compense la chasse ajoutee a droite par letter-spacing */
  color: var(--ink);
}
.auth-brand .rule {
  width: 130px;
  height: 1px;
  margin: 12px auto;
  background: linear-gradient(90deg, transparent, var(--amber-lo), transparent);
}
.auth-brand .tagline {
  font-size: 11.5px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.auth-panel {
  padding: 26px 26px 22px;
  background: rgba(10, 12, 17, .84);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--elev-2), 0 0 60px -30px var(--amber-glow);
}
.auth-panel > .label { margin-bottom: 18px; }

.auth-switch {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
  font-size: 13.5px;
  color: var(--ink-dim);
  text-align: center;
}
.auth-foot {
  margin-top: 18px;
  font-size: 12px;
  color: var(--ink-faint);
  text-align: center;
}

/* Bandeau de la cle de recuperation : volontairement impossible a manquer. */
.recovery-box {
  padding: 16px;
  margin: 14px 0;
  background: var(--amber-veil);
  border: 1px solid var(--amber-lo);
  border-radius: var(--r-md);
}
.recovery-key {
  display: block;
  margin: 10px 0;
  padding: 12px;
  font-family: var(--font-mono);
  font-size: 17px;
  letter-spacing: .06em;
  text-align: center;
  color: var(--amber-hi);
  background: var(--void);
  border: 1px dashed var(--amber-lo);
  border-radius: var(--r-md);
  user-select: all;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 640px) {
  body { font-size: 14.5px; }
  .auth-brand .wordmark { font-size: 26px; letter-spacing: .3em; text-indent: .3em; }
  .auth-panel { padding: 20px 18px 18px; }
  .toast-zone { right: 12px; left: 12px; bottom: 12px; max-width: none; }
}

/* ==========================================================================
   Accessibilite du mouvement
   Respecte le reglage systeme ; un interrupteur utilisateur existe aussi dans
   les preferences (classe .no-anim posee sur <html>).
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}
.no-anim *, .no-anim *::before, .no-anim *::after {
  animation: none !important;
  transition: none !important;
}

/* ==========================================================================
   Coque applicative : rail lateral + bandeau superieur + contenu
   ========================================================================== */

.shell {
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  min-height: 100vh;
}

.shell-main { display: flex; flex-direction: column; min-width: 0; }

/* ------------------------------------------------------------------ Rail -- */

.rail {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  height: 100vh;
  padding: 12px 0;
  background: var(--hull-900);
  border-right: 1px solid var(--line);
}

.rail-brand {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-bottom: 14px;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--amber);
  border: 1px solid var(--amber-lo);
  border-radius: var(--r-md);
  background: var(--amber-veil);
}

.rail-nav { display: flex; flex-direction: column; gap: 4px; width: 100%; align-items: center; }
.rail-spacer { flex: 1; }

.rail-item {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--ink-faint);
  background: none;
  border: 0;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.rail-item:hover { color: var(--ink); background: var(--hull-700); }
.rail-item.active { color: var(--amber); background: var(--amber-veil); }

/* Liseré actif a gauche : repere immediat sans avoir a lire */
.rail-item.active::before {
  content: '';
  position: absolute;
  left: -12px;
  width: 2px;
  height: 22px;
  background: var(--amber);
  border-radius: 0 2px 2px 0;
}

/* Libelle au survol : le rail reste etroit, l'information reste accessible */
.rail-label {
  position: absolute;
  left: calc(100% + 10px);
  padding: 5px 10px;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--ink);
  background: var(--hull-700);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  box-shadow: var(--elev-2);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-4px);
  transition: opacity var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.rail-item:hover .rail-label { opacity: 1; transform: none; }

/* --------------------------------------------------------------- Topbar --- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 14px;
  height: var(--topbar-h);
  padding: 0 20px;
  background: rgba(10, 12, 17, .82);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.topbar-spacer { flex: 1; }

.agent-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--ink-dim);
}
.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink-faint);
  flex: none;
}
.dot-on {
  background: var(--new);
  box-shadow: 0 0 0 3px rgba(53, 214, 138, .16);
}
.dot-off {
  background: var(--seen);
  box-shadow: 0 0 0 3px rgba(240, 83, 61, .14);
}

.cmdr { display: flex; align-items: baseline; gap: 9px; }
.cmdr-name {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--ink);
}

/* -------------------------------------------------------------- Contenu --- */

.content {
  flex: 1;
  width: 100%;
  max-width: 1680px;
  padding: 24px 24px 48px;
  margin: 0 auto;
}

.page-head { margin-bottom: 20px; }
.page-head h1 { font-size: 22px; }
.page-head .sub { margin-top: 3px; font-size: 13.5px; color: var(--ink-dim); }

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }

@media (max-width: 1100px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------ Responsive de la coque -- */
/* Sur mobile, le rail devient une barre inferieure : l'interface est repensee,
   pas simplement retrecie. */

@media (max-width: 720px) {
  .shell { grid-template-columns: minmax(0, 1fr); }

  .rail {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 60;
    flex-direction: row;
    justify-content: space-around;
    height: auto;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    border-right: 0;
    border-top: 1px solid var(--line);
    background: rgba(10, 12, 17, .96);
    backdrop-filter: blur(10px);
  }
  .rail-brand, .rail-spacer { display: none; }
  .rail-nav { flex-direction: row; justify-content: space-around; }
  .rail-item { width: 48px; height: 44px; }
  .rail-item.active::before { left: 50%; top: -6px; width: 22px; height: 2px; transform: translateX(-50%); }
  .rail-label { display: none; }

  .content { padding: 18px 16px calc(72px + env(safe-area-inset-bottom)); }
}

/* ==========================================================================
   COCKPIT
   Concu pour etre lu a 1,5 m, en une seconde et demie. La hierarchie est
   brutale et assumee : le statut et le nom d'abord, tout le reste apres.
   ========================================================================== */

.cockpit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 18px;
  align-items: start;
}
.cockpit-main, .cockpit-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* --- Bloc systeme / planete ------------------------------------------- */

.cockpit-block {
  position: relative;
  padding: 20px 24px 22px;
  overflow: hidden;
}
/* Le lisere lateral est le premier signal percu : couleur pleine hauteur. */
.cockpit-block::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--ink-faint);
}
.cockpit-block.is-new::before { background: var(--new); }
.cockpit-block.is-seen::before { background: var(--seen); }
.cockpit-block.is-new  { background: linear-gradient(90deg, var(--new-veil), transparent 220px), var(--hull-900); }
.cockpit-block.is-seen { background: linear-gradient(90deg, var(--seen-veil), transparent 220px), var(--hull-900); }

.cockpit-flag { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.flag-detail { font-size: 12.5px; color: var(--ink-dim); }

.cockpit-title {
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1.03;
  letter-spacing: -.02em;
  font-weight: 700;
  word-break: break-word;
}
.cockpit-subtitle {
  font-size: clamp(22px, 2.6vw, 34px);
  line-height: 1.1;
  letter-spacing: -.01em;
  font-weight: 700;
}
.cockpit-meta { margin-top: 6px; font-size: 13.5px; color: var(--ink-dim); }

.cockpit-recap {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}
.mini-stat { display: flex; flex-direction: column; gap: 1px; }
.mini-stat .num { font-size: 20px; font-weight: 600; }

/* --- Caracteristiques -------------------------------------------------- */

.spec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px 20px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}
.spec { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.spec-v { font-size: 14px; font-weight: 500; }

/* --- Tuiles ------------------------------------------------------------ */

.tile-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 18px;
}
.tile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.tile {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 14px;
  background: var(--hull-800);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  min-width: 0;
}
.tile-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.15;
  word-break: break-word;
}
.tile-value.is-est { color: var(--warn); }
.tile-hint { font-size: 11.5px; line-height: 1.35; color: var(--ink-faint); }
.tile-actions { display: flex; gap: 6px; margin-top: 8px; }

/* --- Genres et especes ------------------------------------------------- */

.block { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.block > .label { margin-bottom: 10px; }

.genus-list, .species-list { display: flex; flex-direction: column; gap: 2px; }

.genus, .species {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: var(--r-sm);
  font-size: 14px;
}
.genus:nth-child(odd), .species:nth-child(odd) { background: rgba(255, 255, 255, .015); }
.genus.is-gold { background: var(--gold-veil); }

.genus-glyph, .species-glyph { flex: none; width: 14px; color: var(--ink-dim); }
.genus.is-gold .genus-glyph { color: var(--gold); }
.species.is-done .species-glyph { color: var(--new); }

.genus-name, .species-name { flex: 1; min-width: 0; font-weight: 500; }
.genus.is-gold .genus-name { color: var(--gold); }

.genus-value, .species-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  color: var(--ink-dim);
  white-space: nowrap;
}
.genus-cand { font-size: 11.5px; color: var(--ink-faint); white-space: nowrap; }
.species-runs {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--amber);
  background: var(--amber-veil);
  padding: 1px 6px;
  border-radius: var(--r-sm);
}
.species-sold { font-size: 11.5px; color: var(--ink-faint); }

/* --- Progression ------------------------------------------------------- */

.progress-line { margin-top: 18px; }
.progress-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.progress-bar { height: 5px; background: var(--hull-700); border-radius: 3px; overflow: hidden; }
.progress-bar > i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--new), var(--gold));
  transition: width var(--dur-3) var(--ease);
}

/* --- Verdict ------------------------------------------------------------
   La ligne qu'on lit en une seconde. Volontairement massive.
   Une seule pulsation a l'apparition, puis plus rien : une alerte qui
   clignote en permanence devient du bruit qu'on apprend a ignorer.
   ---------------------------------------------------------------------- */

.verdict {
  padding: 18px 24px;
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: var(--r-md);
  background: var(--hull-900);
  animation: verdict-in var(--dur-3) var(--ease-out), verdict-pulse 900ms var(--ease) 1;
}
@keyframes verdict-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes verdict-pulse { 0%, 100% { box-shadow: none; } 40% { box-shadow: 0 0 34px -12px currentColor; } }

.verdict-head { display: flex; align-items: center; gap: 14px; }
.verdict-glyph { font-size: 26px; line-height: 1; }
.verdict-label {
  font-size: clamp(17px, 2vw, 25px);
  font-weight: 700;
  letter-spacing: .01em;
}

.verdict-gold { color: var(--gold); border-left-color: var(--gold); background: linear-gradient(90deg, var(--gold-veil), transparent 60%), var(--hull-900); }
.verdict-new  { color: var(--new);  border-left-color: var(--new);  background: linear-gradient(90deg, var(--new-veil), transparent 60%), var(--hull-900); }
.verdict-seen { color: var(--seen); border-left-color: var(--seen); background: linear-gradient(90deg, var(--seen-veil), transparent 60%), var(--hull-900); }
.verdict-info { color: var(--info); border-left-color: var(--info); }
.verdict-mute { color: var(--ink-dim); border-left-color: var(--line-strong); }

.verdict-reasons {
  margin: 12px 0 0;
  padding: 0 0 0 40px;
  list-style: none;
  font-size: 13.5px;
  color: var(--ink-dim);
}
.verdict-reasons li { position: relative; padding: 2px 0; }
.verdict-reasons li::before { content: '·'; position: absolute; left: -12px; }
.verdict-reasons .reason-gold { color: var(--gold); }
.verdict-reasons .reason-seen { color: var(--seen); }
.verdict-reasons .reason-new  { color: var(--new); }

/* --- Credits ------------------------------------------------------------ */

.credit-line {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--line-soft);
}
.credit-line:last-of-type { border-bottom: 0; }
.credit-big { font-size: 21px; font-weight: 600; }
.credit-big.is-est { color: var(--warn); }
.credit-rate .num { font-size: 16px; color: var(--ink-dim); }

/* --- Fil des evenements ------------------------------------------------- */

.feed { display: flex; flex-direction: column; }
.feed-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  font-size: 13px;
  border-bottom: 1px solid var(--line-soft);
}
.feed-item:last-child { border-bottom: 0; }
.feed-time { flex: none; width: 84px; color: var(--ink-faint); font-size: 11.5px; }
.feed-glyph { flex: none; color: var(--ink-dim); }
.feed-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-extra { flex: none; font-size: 12px; color: var(--gold); }

/* --- Responsive ---------------------------------------------------------
   Sur mobile l'interface est repensee, pas retrecie : une pile de cartes que
   l'on parcourt, et le verdict remonte EN PREMIER puisque c'est la seule
   chose qui compte sur un petit ecran.
   ---------------------------------------------------------------------- */

@media (max-width: 1200px) {
  .cockpit { grid-template-columns: minmax(0, 1fr); }
  .cockpit-side { flex-direction: row; flex-wrap: wrap; }
  .cockpit-side > * { flex: 1 1 300px; }
}

@media (max-width: 720px) {
  .cockpit-main { display: flex; flex-direction: column; }
  .cockpit-main > .verdict { order: -1; }
  .cockpit-block { padding: 16px 18px 18px; }
  .cockpit-title { font-size: 27px; }
  .cockpit-subtitle { font-size: 20px; }
  .tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cockpit-side { flex-direction: column; }
  .feed-time { width: 70px; }
}

/* ==========================================================================
   TABLEAUX, FILTRES, FICHES
   ========================================================================== */

/* --- Filtres ----------------------------------------------------------- */

.filters { padding: 14px 18px; margin-bottom: 16px; }
.filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.filter-row + .filter-row { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-soft); }

.search-wrap { position: relative; display: flex; align-items: center; flex: 1 1 260px; min-width: 200px; }
.search-wrap svg { position: absolute; left: 11px; color: var(--ink-faint); pointer-events: none; }
.search-wrap .input { padding-left: 36px; }

.filter-inline { display: flex; align-items: center; gap: 8px; }
.filter-inline .label { white-space: nowrap; }

/* width auto ET min-width : sans le second, un select vide s'effondre a
   quelques pixels, et un select long deborde la rangee. */
.input-sm { padding: 6px 10px; font-size: 13px; width: auto; min-width: 120px; max-width: 240px; }
.filter-inline input[type="number"].input-sm { min-width: 0; }
select.input {
  appearance: none;
  padding-right: 28px;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-dim) 50%),
                    linear-gradient(135deg, var(--ink-dim) 50%, transparent 50%);
  background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
select.input option { background: var(--hull-800); color: var(--ink); }

/* Pastilles de filtre : cliquables, etat visible sans lire le libelle. */
.chip {
  padding: 5px 12px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-dim);
  background: var(--hull-800);
  border: 1px solid var(--line);
  border-radius: 99px;
  cursor: pointer;
  transition: all var(--dur-1) var(--ease);
  white-space: nowrap;
}
.chip:hover { color: var(--ink); border-color: var(--line-strong); }
.chip.is-on {
  color: var(--amber);
  background: var(--amber-veil);
  border-color: var(--amber-lo);
}

/* --- Tableaux -----------------------------------------------------------
   Pas de bordures verticales : elles hachent la lecture horizontale, qui est
   justement ce qu'on fait dans un tableau de donnees.
   ---------------------------------------------------------------------- */

/* overflow-x: auto force overflow-y a auto : le conteneur devient un contexte
   de defilement, et un "th" en position sticky se cale alors sur LUI, pas sur
   la fenetre. Avec top: var(--topbar-h) l'en-tete descendait de 52 px et
   recouvrait la premiere ligne du tableau.
   On assume donc le conteneur defilant : hauteur bornee, en-tete colle a 0. */
.table-wrap {
  overflow: auto;
  max-height: calc(100vh - var(--topbar-h) - 250px);
  min-height: 240px;
}

table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
table.data th {
  position: sticky;
  top: 0;               /* colle au conteneur .table-wrap, pas a la fenetre */
  z-index: 5;
  padding: 10px 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-align: left;
  color: var(--ink-dim);
  background: var(--hull-800);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
table.data td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:nth-child(even) { background: rgba(255, 255, 255, .012); }
table.data tbody tr:hover { background: var(--hull-700); }

.col-num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
th.col-num { text-align: right; }
.col-c { text-align: center; }
th.col-c { text-align: center; }

.row-click { cursor: pointer; }
.row-flag { display: inline-block; width: 16px; color: var(--ink-faint); }
.row-flag.is-new { color: var(--new); }
.row-flag.is-seen { color: var(--seen); }
.row-name { font-weight: 500; }
.row-tag { margin-left: 7px; color: var(--gold); font-size: 12px; }
tr.is-flagged { background: var(--amber-veil) !important; }

.tick { color: var(--new); font-weight: 700; }
.ff-gold  { color: var(--gold); font-weight: 700; }
.ff-warn  { color: var(--warn); }
.ff-faint { color: var(--ink-faint); }

/* --- Fiches (paires cle / valeur) --------------------------------------- */

.kv { margin: 8px 0 0; }
.kv-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 7px 0;
  border-bottom: 1px dashed var(--line-soft);
}
.kv-row:last-child { border-bottom: 0; }
.kv-row dt { flex: none; }
.kv-row dd { margin: 0; text-align: right; font-size: 14px; min-width: 0; word-break: break-word; }
.kv-row dd.mono { font-family: var(--font-mono); font-size: 12.5px; }

.page-head .btn { margin-bottom: 4px; }

/* --- Responsive ---------------------------------------------------------
   Sur mobile un tableau a dix colonnes est illisible : on masque les colonnes
   secondaires plutot que de forcer un defilement horizontal interminable.
   ---------------------------------------------------------------------- */

@media (max-width: 900px) {
  table.data th:nth-child(4), table.data td:nth-child(4),
  table.data th:nth-child(5), table.data td:nth-child(5) { display: none; }
}

@media (max-width: 640px) {
  table.data { font-size: 12.5px; }
  table.data th, table.data td { padding: 8px 8px; }
  table.data th:nth-child(2), table.data td:nth-child(2) { display: none; }
  .filter-row { gap: 8px; }
  .filter-inline { flex: 1 1 100%; justify-content: space-between; }
  .kv-row { flex-direction: column; align-items: flex-start; gap: 2px; }
  .kv-row dd { text-align: left; }
}

/* ==========================================================================
   PARAMETRES
   ========================================================================== */

.settings { display: flex; flex-direction: column; gap: 16px; max-width: 900px; }
.set-block { overflow: hidden; }

/* --- Agents ------------------------------------------------------------- */

.agent-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
}
.agent-row:last-child { border-bottom: 0; }
.agent-row:first-child { padding-top: 4px; }

.agent-main { flex: 1; min-width: 0; }
.agent-name {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 600;
}
.agent-meta { margin-top: 3px; font-size: 12.5px; color: var(--ink-dim); }
.agent-path {
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--ink-faint);
  word-break: break-all;
}
.agent-actions { display: flex; gap: 8px; flex: none; flex-wrap: wrap; }

.hint-warn {
  color: var(--warn);
  margin-top: 6px;
  padding: 6px 9px;
  background: var(--warn-veil);
  border-radius: var(--r-sm);
}

/* Les etapes de mise en route de l'agent, dans la fenetre de la cle. */
.steps {
  margin: 8px 0 0;
  padding-left: 20px;
  font-size: 14px;
  color: var(--ink-dim);
}
.steps li { padding: 3px 0; }
.steps code {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--amber);
  background: var(--amber-veil);
  padding: 1px 6px;
  border-radius: var(--r-sm);
}

/* --- Interrupteurs ------------------------------------------------------ */

.switch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 2px 20px;
  margin-top: 12px;
}
.switch-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  font-size: 14px;
  cursor: pointer;
}
.switch-row input { width: auto; flex: none; }
.switch-row:hover { color: var(--ink); }

/* --- Donnees ------------------------------------------------------------ */

.data-actions { display: flex; flex-direction: column; gap: 16px; }
.data-action { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.data-action .hint { margin: 0; }
.data-action a.btn { text-decoration: none; }
.data-action a.btn:hover { text-decoration: none; color: var(--ink); }

/* --- Compte ------------------------------------------------------------- */

.inline-form { display: flex; gap: 10px; align-items: flex-end; }
.inline-form .btn { flex: none; }

hr.sep {
  height: 0;
  margin: 22px 0;
  border: 0;
  border-top: 1px solid var(--line-soft);
}

.danger-zone {
  padding: 14px 16px;
  background: var(--seen-veil);
  border: 1px solid rgba(240, 83, 61, .25);
  border-radius: var(--r-md);
}

@media (max-width: 640px) {
  .agent-row { flex-direction: column; gap: 10px; }
  .agent-actions { width: 100%; }
  .agent-actions .btn { flex: 1; }
  .inline-form { flex-direction: column; align-items: stretch; }
  .switch-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   EXOBIOLOGIE
   ========================================================================== */

.bio-tiles { margin-bottom: 18px; }

/* La tuile qui appelle une action : doree, mais sans clignoter. Un ecran de
   second moniteur qui bouge attire l'oeil au mauvais moment. */
.tile.is-gold {
  border-color: var(--amber-lo);
  background: var(--gold-veil);
}
.tile.is-gold .tile-value { color: var(--gold); }
.tile.is-gold .tile-hint { color: var(--ink-dim); }

/* Barre de progression du catalogue. */
.bar {
  height: 3px;
  margin: 7px 0 3px;
  overflow: hidden;
  background: var(--line);
  border-radius: 99px;
}
.bar-fill {
  height: 100%;
  min-width: 2px;
  background: var(--amber);
  border-radius: 99px;
  transition: width var(--dur-2) var(--ease);
}

/* --- Onglets ------------------------------------------------------------ */

.tabs {
  display: flex;
  gap: 2px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.tab {
  position: relative;
  padding: 9px 16px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-dim);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color var(--dur-1) var(--ease);
}
.tab:hover { color: var(--ink); }
.tab.active { color: var(--amber); border-bottom-color: var(--amber); }

.tab-count {
  display: inline-block;
  min-width: 17px;
  margin-left: 7px;
  padding: 1px 5px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--hull-900);
  background: var(--gold);
  border-radius: 99px;
}

/* --- Bandeau du stock non vendu ----------------------------------------- */

.notice-gold {
  padding: 16px 18px;
  margin-bottom: 14px;
  background: var(--gold-veil);
  border-color: var(--amber-lo);
}
.notice-main { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.notice-big {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 27px;
  font-weight: 600;
  line-height: 1;
  color: var(--gold);
}
.notice-text { font-size: 14px; color: var(--ink-dim); }

/* --- Especes ------------------------------------------------------------ */

.sp-cell { display: flex; align-items: flex-start; gap: 10px; }
.sp-cell > .dot { margin-top: 6px; flex: none; }

/* Le genre en retrait, l'espece en avant : dans "Stratum Tectonicas", c'est
   le second mot qui distingue une trouvaille banale d'une a 19 M Cr. */
.sp-genus { color: var(--ink-faint); }
.sp-name { font-weight: 600; }
.sp-flag { margin-top: 2px; font-size: 11.5px; color: var(--gold); }

/* Espece jamais rencontree : presente, lisible, mais visiblement en retrait. */
tr.is-dim td { color: var(--ink-faint); }
tr.is-dim .sp-name { font-weight: 500; color: var(--ink-dim); }

.col-num .is-gold { color: var(--gold); font-weight: 600; }
td.is-est { color: var(--warn); }

@media (max-width: 900px) {
  .notice-big { font-size: 22px; }
  .tab { padding: 9px 11px; font-size: 12.5px; }
}

/* Palier de rentabilite accole a un montant. Reprend les couleurs des badges
   mais laisse le chiffre intact : "20 M Cr", jamais "20 M CR". */
.tier {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
}
.tier .glyph { font-size: 11px; line-height: 1; }
.tier.badge-gold { color: var(--gold); background: var(--gold-veil); border-color: rgba(247,201,72,.3); }
.tier.badge-new  { color: var(--new);  background: var(--new-veil);  border-color: rgba(53,214,138,.28); }
.tier.badge-info { color: var(--info); background: var(--info-veil); border-color: rgba(94,168,232,.28); }
.tier.badge-mute { color: var(--ink-dim); background: var(--hull-700); border-color: var(--line); }