:root{
  --bg:#111;
  --panel:#1b1b1b;
  --text:#e6e6e6;
  --muted:#9aa0a6;
  --accent:#39FF14; /* verde fosforito */
  --danger:#ff5555;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --radius:18px;
  --spacing:14px;
  --font: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
}

*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0; background:var(--bg); color:var(--text); font-family:var(--font);
}
.wrap{ max-width: 980px; margin: 0 auto; padding: 24px; }

header{ margin-bottom: 10px; }
h1{ margin:0 0 6px 0; font-size: clamp(28px, 6vw, 44px);}
.brand{ color: var(--accent); font-weight: 800; text-shadow: 0 0 12px rgba(57,255,20,.4); }
.subtitle{ color: var(--muted); margin:0 0 10px 0 }

label{ display:block; font-weight:600; margin: 10px 0 6px 0 }
textarea, input, select {
  width:100%; background:var(--panel); color:var(--text);
  border:1px solid #2b2b2b; border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 12px; outline: none;
}
textarea{ resize: vertical; min-height: 220px }

.row{ display:flex; gap: var(--spacing); margin-top: var(--spacing); flex-wrap: wrap }
.col{ flex:1; min-width:240px }
small{ color: var(--muted) }

button{
  margin-top:16px; padding:12px 18px; border-radius: var(--radius);
  border:1px solid #2b2b2b; background: transparent; color: var(--accent);
  font-weight:700; cursor:pointer; box-shadow: var(--shadow);
}
button:hover{ background: rgba(57,255,20,.08); }

#result{ margin-top:10px; }
#result.hidden, .hidden{ display:none }
#linkOut{ margin-top:6px }

.noteout{
  background: var(--panel); border-radius: var(--radius);
  padding: 16px; white-space: pre-wrap; border:1px solid #2b2b2b;
}

footer{
  margin-top: 30px; color: var(--muted); text-align:center;
}
.ciber{ color:var(--accent); text-shadow: 0 0 10px rgba(57,255,20,.35); }