body {
  background:#000;
  font-family:'Courier New', monospace;
  color:#00ff88;
  overflow-x:hidden;
}
.tm-login-col {
  max-width: 600px;
}
/* ---- Terminal frame ---- */
.cyber-terminal {
  width:90%;
  max-width:650px;
  margin:40px auto;
  padding:40px 50px;
  background:radial-gradient(circle at center, #0a0a0a 0%, #000 100%);
  border:1px solid #00ff41;
  border-radius:10px;
  position:relative;
  box-shadow:0 0 25px rgba(0,255,65,0.3);
  overflow:hidden;
}

/* ---- Scan overlay ---- */
.cyber-terminal::before {
  content:"";
  position:absolute;
  top:-100%;
  left:0;
  width:100%;
  height:100%;
  background:linear-gradient(to bottom, transparent 0%, rgba(0,255,136,0.05) 50%, transparent 100%);
  animation:scanMove 4s linear infinite;
}
@keyframes scanMove {
  0%{top:-100%;}
  100%{top:100%;}
}

/* ---- Grid lines ---- */
.cyber-grid::before, .cyber-grid::after {
  content:"";
  position:absolute;
  width:100%;
  height:100%;
  background-image:
    linear-gradient(rgba(0,255,65,0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,255,65,0.1) 1px, transparent 1px);
  background-size:25px 25px;
  top:0; left:0;
  pointer-events:none;
}

/* ---- Title ---- */
.cyber-title {
  text-align:center;
  font-size:1.4rem;
  color:#00ff88;
  text-shadow:0 0 8px #00ff88;
  margin-bottom:30px;
}

/* ---- Input fields ---- */
.cyber-field {
  position:relative;
  margin-bottom:22px;
}
.cyber-field label {
  display:block;
  font-size:0.85rem;
  margin-bottom:6px;
  color:#00ff88;
  text-transform:uppercase;
  letter-spacing:1px;
}
.cyber-field input, .cyber-field select {
  width:100%;
  background-color:#000;
  color:#00ff88;
  border:1px solid #00ff88;
  border-radius:6px;
  padding:10px 12px;
  transition:0.3s;
  box-shadow:0 0 8px rgba(0,255,136,0.3);
}
.cyber-field input:focus, .cyber-field select:focus {
  outline:none;
  border-color:#00ff41;
  box-shadow:0 0 12px rgba(0,255,136,0.6);
}

/* ---- Scan line inside field ---- */
.cyber-field::after {
  content:"";
  position:absolute;
  top:0; left:0;
  width:0%;
  height:100%;
  background:linear-gradient(90deg, rgba(0,255,65,0.2), transparent);
  transition:width 0.4s ease;
}
.cyber-field input:focus ~ .scanline,
.cyber-field select:focus ~ .scanline {
  width:100%;
}
.scanline {
  position:absolute;
  top:0; left:0;
  height:100%;
  width:0%;
  background:linear-gradient(90deg, rgba(0,255,65,0.3), transparent);
  transition:width 0.6s ease;
  pointer-events:none;
}

/* ---- Button ---- */
.btn-neon {
  display:block;
  width:100%;
  text-align:center;
  background:transparent;
  border:1px solid #00ff88;
  color:#00ff88;
  padding:12px;
  font-weight:bold;
  border-radius:8px;
  cursor:pointer;
  text-transform:uppercase;
  box-shadow:0 0 10px rgba(0,255,136,0.4);
  transition:all 0.3s;
}
.btn-neon:hover {
  background:#00ff88;
  color:#000;
  box-shadow:0 0 25px #00ff88;
}

/* ---- Alert boxes ---- */
.alert-success, .alert-danger {
  border:none;
  border-radius:6px;
  padding:10px;
  font-weight:bold;
  margin-bottom:10px;
  text-align:center;
}
.alert-success{background:#00ff88;color:#000;}
.alert-danger{background:#ff0044;color:#fff;}
.text-danger.small{color:#ff0044;font-size:0.85rem;}

.alert-danger.small.error-list {
  list-style: none;
  padding: 8px;
  font-size: 0.8rem;
  line-height: 1.4;
  background: rgba(255, 0, 68, 0.2);
  border: 1px solid #ff0044;
  border-radius: 6px;
  color: #ff0044;
  text-shadow: 0 0 6px #ff0044;
}

.alert-danger.small.error-list div {
  margin-bottom: 4px;
}

.alert-danger.small.error-list div:last-child {
  margin-bottom: 0;
}
/* ---- Responsive Design ---- */
@media (max-width: 768px) {
  .cyber-terminal {
    width: 95%;
    padding: 25px 20px;
    margin: 20px auto;
  }

  .cyber-title {
    font-size: 1.4rem;
    margin-bottom: 20px;
  }

  .cyber-field label {
    font-size: 0.75rem;
    letter-spacing: 0.5px;
  }

  .cyber-field input,
  .cyber-field select {
    padding: 9px;
    font-size: 0.9rem;
  }

  .btn-neon {
    font-size: 0.9rem;
    padding: 10px;
  }

  body {
    font-size: 14px;
    padding: 10px;
  }
}

/* Even smaller devices (phones under 480px wide) */
@media (max-width: 480px) {
  .cyber-terminal {
    width: 100%;
    padding: 20px 15px;
    border-radius: 8px;
  }

  .cyber-title {
    font-size: 1.2rem;
  }

  .btn-neon {
    padding: 9px;
    font-size: 0.85rem;
  }

  input, select {
    font-size: 0.85rem;
  }

  .alert-success, .alert-danger {
    font-size: 0.8rem;
    padding: 8px;
  }
}