:root {
  /* Kali Linux dragon palette */
  --bg: #0a0e14;
  --bg-deep: #060a10;
  --fg: #c5d1de;
  --fg-dim: #5b6b7d;
  --kali-blue: #367bf0;
  --kali-cyan: #2ed9e0;
  --kali-green: #38d160;
  --kali-red: #e8534f;
  --kali-yellow: #e6c75a;
  --kali-purple: #9d7bf0;
  --ok: #38d160;
  --font: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --fs: clamp(12px, 1.55vw, 15px);
  --lh: 1.5;
}

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

html, body {
  height: 100%;
  background: var(--bg-deep);
}

body {
  font-family: var(--font);
  font-size: var(--fs);
  line-height: var(--lh);
  color: var(--fg);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

.screen {
  position: relative;
  height: 100vh;
  width: 100%;
  padding: clamp(14px, 3vw, 40px);
  overflow-y: auto;
  overflow-x: hidden;
  background:
    radial-gradient(ellipse 120% 80% at 50% -10%, rgba(54,123,240,0.08), transparent 60%),
    var(--bg);
  scrollbar-width: thin;
  scrollbar-color: var(--fg-dim) transparent;
}
.screen::-webkit-scrollbar { width: 8px; }
.screen::-webkit-scrollbar-thumb { background: var(--fg-dim); border-radius: 4px; }

/* CRT-ish subtle scanlines + flicker */
.screen::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.015) 0px,
    rgba(255,255,255,0.015) 1px,
    transparent 1px,
    transparent 3px
  );
  z-index: 9999;
  mix-blend-mode: overlay;
}

.hidden { display: none !important; }

/* ---------- Boot ---------- */
.boot {
  font-family: var(--font);
  font-size: var(--fs);
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}
.boot .ts { color: var(--fg-dim); }
.boot .ok { color: var(--ok); }
.boot .warn { color: var(--kali-yellow); }
.boot .fail { color: var(--kali-red); }
.boot .info { color: var(--kali-cyan); }
.boot .label { color: var(--fg); }
.boot .br { color: var(--fg-dim); }

/* ---------- Login ---------- */
.login-banner {
  color: var(--kali-blue);
  white-space: pre;
  line-height: 1.15;
  margin-bottom: 1.2em;
  font-size: clamp(7px, 1.45vw, 13px);
  text-shadow: 0 0 12px rgba(54,123,240,0.45);
}
#login-lines { margin-bottom: 0.6em; }
#login-lines .row { margin-bottom: 0.25em; }
.muted { color: var(--fg-dim); }
.accent { color: var(--kali-cyan); }

.input-line {
  display: flex;
  align-items: baseline;
  white-space: pre;
}
#prompt-label { color: var(--kali-green); }
.typed { color: var(--fg); white-space: pre; }

.cursor {
  color: var(--kali-cyan);
  animation: blink 1s steps(1) infinite;
  margin-left: 1px;
}
.cursor.solid { animation: none; }
@keyframes blink { 50% { opacity: 0; } }

.hidden-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  left: -9999px;
}

/* ---------- Homepage ---------- */
.home {
  max-width: 1100px;
  margin: 0 auto;
  animation: fadein 0.5s ease both;
}
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

.kprompt {
  white-space: pre-wrap;
  margin-bottom: 0.2em;
}
.kprompt .p1 { color: var(--kali-blue); }
.kprompt .user { color: var(--kali-green); }
.kprompt .at { color: var(--kali-red); }
.kprompt .host { color: var(--kali-green); }
.kprompt .path { color: var(--kali-cyan); }
.kprompt .cmd { color: var(--fg); }
.kprompt .arrow { color: var(--kali-blue); }

.cmd-out { margin: 0.3em 0 1.6em 0; }

.banner {
  color: var(--kali-blue);
  white-space: pre;
  line-height: 1.1;
  text-shadow: 0 0 14px rgba(54,123,240,0.4);
  font-size: clamp(6px, 1.5vw, 13px);
  margin: 0.4em 0 0.4em 0;
  overflow-x: auto;
}

.fetch {
  display: grid;
  grid-template-columns: minmax(0, auto) 1fr;
  gap: 0.2em 2.2em;
  align-items: start;
  margin: 0.4em 0;
}
.fetch .logo {
  color: var(--kali-blue);
  white-space: pre;
  line-height: 1.05;
  font-size: clamp(7px, 1.5vw, 12px);
  text-shadow: 0 0 10px rgba(54,123,240,0.35);
}
.fetch .info-block { align-self: center; }
.fetch .row { white-space: pre-wrap; }
.fetch .key { color: var(--kali-cyan); }
.fetch .sep { color: var(--fg-dim); }
.fetch .val { color: var(--fg); }
.fetch .title { color: var(--kali-green); margin-bottom: 0.2em; }
.fetch .rule { color: var(--fg-dim); }

ul.list { list-style: none; }
ul.list li { padding: 0.1em 0; }
ul.list li::before { content: "› "; color: var(--kali-blue); }

a.link { color: var(--kali-cyan); text-decoration: none; border-bottom: 1px dotted var(--fg-dim); }
a.link:hover { color: var(--kali-green); border-bottom-color: var(--kali-green); }

.tag { color: var(--kali-purple); }
.section-title { color: var(--kali-yellow); }

.live-prompt { margin-top: 0.8em; }
.help-hint { color: var(--fg-dim); margin-top: 0.4em; margin-bottom: 1.2em; font-size: 0.92em; }

/* ---------- Shell interactif ---------- */
#term-history > * { animation: fadein 0.25s ease both; }

.shell-line { display: flex; align-items: baseline; white-space: pre-wrap; }
.shell-line .cmd-input { color: var(--fg); white-space: pre; }
.shell-prompt-inline { display: inline; }
.shell-prompt-inline .arrow { color: var(--kali-blue); }
.shell-prompt-inline .user { color: var(--kali-green); }
.shell-prompt-inline .at { color: var(--kali-red); }
.shell-prompt-inline .host { color: var(--kali-green); }
.shell-prompt-inline .p1 { color: var(--kali-blue); }
.shell-prompt-inline .path { color: var(--kali-cyan); }

.out-block { margin: 0.3em 0 1.1em 0; }
.out-block .err { color: var(--kali-red); }
.out-block .ok { color: var(--kali-green); }
.out-block .head { color: var(--kali-yellow); margin: 0.2em 0 0.5em 0; }
.out-block .sub { color: var(--fg-dim); }
.out-block .cmd-name { color: var(--kali-cyan); display: inline-block; min-width: 11ch; }
.out-block .cmd-name.wide { min-width: 13ch; }
.out-block .kv { white-space: pre-wrap; }

/* Barres de progression de la stack */
.stack-cat { color: var(--kali-yellow); margin: 0.9em 0 0.35em 0; letter-spacing: 0.04em; }
.stack-cat:first-child { margin-top: 0.3em; }
.skill {
  display: grid;
  grid-template-columns: 22ch 1fr 4ch;
  align-items: center;
  gap: 0 0.9em;
  margin: 0.18em 0;
  white-space: nowrap;
}
.skill .name { color: var(--fg); overflow: hidden; text-overflow: ellipsis; }
.skill .bar {
  position: relative;
  height: 0.85em;
  background: rgba(54,123,240,0.10);
  border: 1px solid rgba(54,123,240,0.25);
  border-radius: 2px;
  overflow: hidden;
}
.skill .bar .fill {
  position: absolute;
  inset: 0 100% 0 0;
  background: linear-gradient(90deg, var(--kali-blue), var(--kali-cyan));
  box-shadow: 0 0 8px rgba(46,217,224,0.5);
  transition: right 1.1s cubic-bezier(0.16,1,0.3,1);
}
.skill .pct { color: var(--kali-cyan); text-align: right; font-variation-settings: 'wght' 500; }

.level-tag { font-size: 0.85em; }
.level-expert { color: var(--kali-green); }
.level-advanced { color: var(--kali-cyan); }
.level-inter { color: var(--kali-yellow); }
.level-learning { color: var(--kali-purple); }

@media (max-width: 620px) {
  .skill { grid-template-columns: 13ch 1fr 4ch; gap: 0 0.5em; font-size: 0.92em; }
  .out-block .cmd-name, .out-block .cmd-name.wide { min-width: 9ch; }
}

@media (max-width: 620px) {
  .fetch { grid-template-columns: 1fr; gap: 0.1em; }
  .fetch .logo { display: none; }
}