:root{
  --bg:#040607;
  --panel:#070b0f;
  --green:#00ff00;
  --red:#ff4444;
  --glow-green:0 0 8px rgba(0,255,0,.6), 0 0 20px rgba(0,255,0,.35);
  --glow-red:0 0 8px rgba(255,68,68,.6), 0 0 20px rgba(255,68,68,.35);
  --text:#caffd8;
}
*{box-sizing:border-box}
body{
  margin:0;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,0.04) 0px,
      rgba(255,255,255,0.04) 1px,
      transparent 2px,
      transparent 6px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0.04) 0px,
      rgba(255,255,255,0.04) 1px,
      transparent 2px,
      transparent 6px
    ),
    radial-gradient(1200px 600px at 50% -10%, #0c1518, #040607);
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.container{max-width:760px; margin:8vh auto; padding:24px}
.header{
  font-size:28px;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--green);
  display:flex;
  align-items:center;
  gap:2px; 
  margin-bottom:18px;
  flex-wrap:wrap;
}

#title{white-space:nowrap;} 
.cursor{
  width:6px;
  height:26px;
  background:var(--green);
  animation:blink 1s steps(1) infinite
}

@keyframes blink{50%{opacity:0}}

.panel{
  background:linear-gradient(180deg, #070c10, var(--panel));
  border:1px solid var(--green);
  border-radius:12px;
  padding:16px;
  box-shadow: var(--glow-green), 0 0 0 1px #020406 inset;
}

label{font-size:12px; opacity:.8}

textarea{
  width:100%;
  min-height:88px;
  margin-top:6px;
  padding:12px;
  resize:vertical;
  background:#020405;
  color:var(--text);
  border:1px solid var(--green);
  border-radius:10px;
  box-shadow: inset 0 0 10px rgba(0,255,0,.15), var(--glow-green);
}

.row{
  display:flex;
  justify-content:center;
  gap:12px;
  align-items:center;
  flex-wrap:wrap
}

.left-align{justify-content:flex-start}
button{
  background:transparent;
  color:var(--green);
  border:1px solid var(--green);
  padding:6px 10px;
  border-radius:10px;
  cursor:pointer;
  font-weight:700;
  box-shadow: var(--glow-green);
  font-size:12px;
}

button:hover{background:rgba(0,255,0,.12)}
.button-red{
  color:var(--red);
  border:1px solid var(--red);
  box-shadow: var(--glow-red);
}

.button-red:hover{background:rgba(255,68,68,.12)}

.footer{
  opacity:.6;
  font-size:11px;
  margin-top:10px
}

.footer a{
  color: var(--green);
  text-decoration: none;
  text-shadow: 0 0 6px rgba(0,255,0,.6);
}

.footer a:hover{
  text-decoration: underline;
  text-shadow: 0 0 10px rgba(0,255,0,.9);
}

/* MOBILE – CLEAN & COMPACT */
@media (max-width:600px){
  body{
    font-size:14px;
  }
  
  .container{
    padding:10px;
    margin:2vh auto;
  }
  
  .header{
    font-size:16px;
    letter-spacing:.08em;
    justify-content:center;
  }
  
  .cursor{
    height:18px;
  }
  
  label{
    font-size:11px;
  }
  
  textarea{
    min-height:70px;
    font-size:14px;
    padding:10px;
  }
  
  .row{
    flex-direction:column;
    gap:8px;
  }
  
  button{
    width:100%;
    padding:8px 10px;
    font-size:13px;
  }
  
  .footer{
    text-align:center;
    font-size:10px;
  }