<!-- Login from New Device -->
<h1 class="email-title">🔐 New Login Detected</h1>

<div style="text-align: center; margin: 20px 0">
  <div
    style="
      display: inline-block;
      width: 80px;
      height: 80px;
      background-color: #fef3c7;
      border-radius: 50%;
      text-align: center;
      line-height: 80px;
      font-size: 40px;
    "
  >
    ⚠️
  </div>
</div>

<p>Hi {{first_name}},</p>
<p>
  We detected a login to your Nxtgauge account from a new device or location.
</p>

<div class="detail-card">
  <div class="detail-row">
    <span class="detail-label">Device</span>
    <span class="detail-value">{{device}}</span>
  </div>
  <div class="detail-row">
    <span class="detail-label">Location</span>
    <span class="detail-value">{{location}}</span>
  </div>
  <div class="detail-row">
    <span class="detail-label">IP Address</span>
    <span class="detail-value">{{ip_address}}</span>
  </div>
  <div class="detail-row">
    <span class="detail-label">Time</span>
    <span class="detail-value">{{login_time}}</span>
  </div>
</div>

<div
  class="info-box"
  style="background-color: #fee2e2; border-left-color: #dc2626"
>
  <p class="info-box-title" style="color: #991b1b">🚨 Wasn't you?</p>
  <p style="margin: 0; color: #7f1d1d">
    If you didn't log in, please
    <strong>secure your account immediately</strong> by changing your password.
  </p>
</div>

<div style="text-align: center">
  <a href="{{security_url}}" class="cta-button">Secure My Account</a>
</div>

<p style="margin-top: 20px; font-size: 14px; color: #6b7280">
  If this was you, you can safely ignore this email.
</p>

<p>Best regards,<br /><strong>The Nxtgauge Team</strong></p>
