:root{
  --bg:#070b0a;
  --fg:#7CFFB2;
  --fg2:#54d68f;
  --dim:rgba(124,255,178,.72);
  --border:rgba(124,255,178,.22);
  --glow:rgba(124,255,178,.20);
  --warn:#ffd37c;
  --bad:#ff7c7c;
}

html,body{height:100%}
body{
  margin:0;
  background:
    radial-gradient(1200px 700px at 50% 30%, rgba(124,255,178,.08), transparent 60%),
    radial-gradient(900px 500px at 20% 80%, rgba(124,255,178,.06), transparent 60%),
    var(--bg);
  color:var(--fg);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  overflow:hidden;
}

.wrap{height:100%;display:grid;place-items:center;padding:18px}

.term{
  width:min(980px, 100%);
  height:min(720px, 100%);
  border:1px solid var(--border);
  border-radius:18px;
  background: linear-gradient(180deg, rgba(10,18,14,.88), rgba(6,10,8,.92));
  box-shadow: 0 0 0 1px rgba(0,0,0,.35) inset, 0 0 40px rgba(0,0,0,.6), 0 0 80px var(--glow);
  position:relative;
  overflow:hidden;
}

.bar{
  display:flex;align-items:center;gap:10px;
  padding:12px 14px;border-bottom:1px solid var(--border);
  background: rgba(0,0,0,.25);
}

.dots{display:flex;gap:7px}
.dot{
  width:10px;height:10px;border-radius:999px;
  background:rgba(124,255,178,.18);
  border:1px solid rgba(124,255,178,.25)
}

.title{color:var(--dim);font-size:12px;letter-spacing:.12em;text-transform:uppercase}

.screen{
  height:calc(100% - 45px);
  padding:14px 16px 22px;
  overflow:auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(124,255,178,.35) transparent;
}
.screen::-webkit-scrollbar{width:10px}
.screen::-webkit-scrollbar-thumb{
  background:rgba(124,255,178,.25);
  border-radius:10px;
  border:2px solid transparent;
  background-clip: content-box;
}

.scanlines:before{
  content:"";pointer-events:none;position:absolute;inset:0;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px, rgba(0,0,0,.22) 3px);
  mix-blend-mode: multiply;opacity:.35;
}

.flicker{animation: flicker 7s infinite}
@keyframes flicker{
  0%, 100%{filter:none}
  3%{filter:brightness(1.05)}
  4%{filter:brightness(.92)}
  5%{filter:brightness(1.08)}
  6%{filter:brightness(0.98)}
  35%{filter:brightness(1.03)}
  36%{filter:brightness(0.95)}
}

pre{
  margin:0;
  white-space:pre;
  line-height:1.12;
  color:var(--fg2);
  text-shadow: 0 0 10px rgba(124,255,178,.12)
}

.muted{color:var(--dim)}
.line{margin:.22rem 0}
.hr{margin:10px 0;border-top:1px dashed rgba(124,255,178,.25)}

.prompt{display:flex;gap:10px;align-items:flex-start;margin-top:10px}
.prompt .ps1{color:var(--fg);opacity:.95}
.prompt input{
  flex:1;background:transparent;border:0;outline:none;color:var(--fg);
  font: inherit;caret-color: var(--fg);padding:0;
}

.kbd{
  border:1px solid rgba(124,255,178,.25);
  padding:1px 6px;
  border-radius:6px;
  color:var(--dim)
}

.hint{margin-top:8px}

.warn{color:var(--warn)}
.bad{color:var(--bad)}
.good{color:var(--fg)}


/* ===== Mobile spacing fixes ===== */
@media (max-width: 640px) {

  /* większe odstępy między liniami tekstu */
  .screen {
    line-height: 1.35;
  }

  /* badge (help, login, itp.) nie nachodzą na siebie */
  .kbd {
    display: inline-block;
    margin: 4px 6px 4px 0;
  }

  /* linia z komendami może się ładnie łamać */
  .line {
    line-height: 1.45;
  }

  /* tip na dole – więcej luzu */
  .hint {
    margin-top: 14px;
    line-height: 1.45;
  }
}