/* public/assets/css/auth.css */

:root{
  --bg:#070b07;
  --card:#0d140d;
  --card2:#0b100b;
  --txt:#eaf7ea;
  --mut:#9ab89a;
  --line:rgba(4,245,0,.16);
  --green:#04f500;
  --red:#ff4d4d;
  --amber:#ffcc66;
  --shadow: 0 18px 70px rgba(0,0,0,.55);
}

*{box-sizing:border-box}
html,body{height:100%}
body.jm-auth{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background:
    radial-gradient(900px 500px at 20% 10%, rgba(4,245,0,.10), transparent 60%),
    radial-gradient(900px 500px at 80% 30%, rgba(4,245,0,.08), transparent 55%),
    linear-gradient(180deg, #060906, var(--bg));
  color:var(--txt);
}

.jm-auth-wrap{
  min-height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px 14px;
  flex-direction:column;
  gap:14px;
}

.jm-card{
  width:min(520px, 100%);
  background: linear-gradient(180deg, var(--card), var(--card2));
  border:1px solid var(--line);
  box-shadow: var(--shadow);
  border-radius:18px;
  padding:22px 18px;
}

.jm-brand{
  display:flex;
  gap:12px;
  align-items:center;
  margin-bottom:16px;
}

.jm-logo{
  width:46px;height:46px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background: rgba(4,245,0,.10);
  border:1px solid rgba(4,245,0,.22);
  color:var(--green);
}

.jm-brand h1{
  margin:0;
  font-size:20px;
  letter-spacing:.2px;
}
.jm-brand p{
  margin:4px 0 0;
  color:var(--mut);
  font-size:13px;
}

.jm-form{display:flex;flex-direction:column;gap:14px}

.jm-field label{
  display:block;
  font-size:13px;
  margin:0 0 6px;
  color:#cfe8cf;
}

.jm-input{
  position:relative;
  display:flex;
  align-items:center;
  background: rgba(0,0,0,.25);
  border:1px solid rgba(4,245,0,.16);
  border-radius:12px;
  padding:0 12px;
  height:46px;
  transition:.18s ease;
}

.jm-input:focus-within{
  border-color: rgba(4,245,0,.55);
  box-shadow: 0 0 0 4px rgba(4,245,0,.08);
}

.jm-input i{color:rgba(234,247,234,.75)}
.jm-input input{
  flex:1;
  border:0;
  outline:0;
  background:transparent;
  color:var(--txt);
  font-size:14px;
  padding:0 10px;
}

.jm-status{
  font-size:12px;
  min-width:18px;
  text-align:right;
}

.jm-eye{
  border:0;
  background:transparent;
  color:rgba(234,247,234,.78);
  cursor:pointer;
  padding:8px;
  border-radius:10px;
}
.jm-eye:hover{background:rgba(255,255,255,.06)}

.jm-hint{
  font-size:12px;
  color:var(--mut);
  margin-top:6px;
}

.jm-rules{
  margin:10px 0 0;
  padding:0;
  list-style:none;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:8px 10px;
}
.jm-rules li{
  font-size:12px;
  color:var(--mut);
  display:flex;
  align-items:center;
  gap:8px;
}
.jm-rules i{font-size:8px;opacity:.65}
.jm-rules li.ok{color:#c9f5c9}
.jm-rules li.ok i{color:var(--green);opacity:1}

.jm-check{
  display:flex;
  gap:10px;
  align-items:flex-start;
  font-size:13px;
  color:#cfe8cf;
}
.jm-check input{margin-top:3px; accent-color: var(--green);}
.jm-check a{color:var(--green);text-decoration:none}
.jm-check a:hover{text-decoration:underline}

.jm-captcha{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.jm-btn{
  height:48px;
  border:0;
  border-radius:14px;
  cursor:pointer;
  background: linear-gradient(90deg, rgba(4,245,0,.95), rgba(4,245,0,.72));
  color:#052205;
  font-weight:800;
  letter-spacing:.2px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  box-shadow: 0 14px 40px rgba(4,245,0,.16);
  transition:.16s ease;
}
.jm-btn:hover{transform: translateY(-1px)}
.jm-btn:disabled{
  opacity:.55;
  cursor:not-allowed;
  transform:none;
}

.jm-bottom{
  text-align:center;
  font-size:13px;
  color:var(--mut);
}
.jm-bottom a{color:var(--green);text-decoration:none;font-weight:700}
.jm-bottom a:hover{text-decoration:underline}

.jm-msg{
  display:none;
  padding:12px 12px;
  border-radius:14px;
  font-size:13px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
}
.jm-msg.show{display:block}
.jm-msg.ok{border-color: rgba(4,245,0,.35)}
.jm-msg.err{border-color: rgba(255,77,77,.35)}

.jm-suggestions{
  margin-top:10px;
  border:1px solid rgba(4,245,0,.16);
  background: rgba(0,0,0,.22);
  border-radius:14px;
  padding:10px;
}
.jm-suggestions-title{
  font-size:12px;
  color:#cfe8cf;
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:8px;
}
.jm-suggestions-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.jm-chip{
  border:1px solid rgba(4,245,0,.20);
  background: rgba(4,245,0,.08);
  color:#dfffdc;
  font-size:12px;
  padding:8px 10px;
  border-radius:999px;
  cursor:pointer;
  user-select:none;
}
.jm-chip:hover{border-color: rgba(4,245,0,.45)}

.jm-foot{
  color:rgba(234,247,234,.55);
  font-size:12px;
}

@media (max-width:420px){
  .jm-card{padding:18px 14px}
  .jm-rules{grid-template-columns: 1fr}
}