@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
@import url('./variables.css');

*{box-sizing:border-box}
body{
  margin:0;
  font-family:Inter;
  background:radial-gradient(1200px 600px at top,#0f1a35,#070b18);
  color:var(--text);
}

/* HEADER */
.header{
  max-width:1150px;
  margin:20px auto;
  padding:14px 24px;
  background:#0b1324;
  border:1px solid var(--border);
  border-radius:999px;
  display:flex;
  justify-content:space-between;
}
.status{
  background:#062f2b;
  color:#22c55e;
  padding:6px 14px;
  border-radius:999px;
  font-size:13px;
}

/* HOME */
.home{text-align:center;margin-top:70px}
.home h1{font-size:38px;margin-bottom:8px}
.home p{color:var(--muted)}

.tool-grid{
  max-width:1150px;
  margin:50px auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.tool{
  background:#0f172a;
  border:1px solid var(--border);
  border-radius:20px;
  padding:26px;
  text-align:left;
  text-decoration:none;
  color:white;
  transition:.3s;
}
.tool:hover{
  transform:translateY(-6px);
  box-shadow:0 20px 50px rgba(34,211,238,.15);
}
.tool img{width:36px;margin-bottom:14px}
.tool p{color:var(--muted);font-size:14px}

/* RESULT */
.container{
  max-width:1200px;
  margin:40px auto;
  display:grid;
  grid-template-columns:420px 1fr;
  gap:30px;
}
.panel{
  background:#0f172a;
  border:1px solid var(--border);
  border-radius:20px;
  padding:22px;
}
.input,select{
  width:100%;
  background:#0b1324;
  border:1px solid var(--border);
  color:white;
  padding:12px;
  border-radius:12px;
  margin:10px 0;
}
.search-btn{
  width:100%;
  padding:14px;
  background:linear-gradient(90deg,#06b6d4,#22d3ee);
  border:none;
  border-radius:14px;
  font-weight:700;
  cursor:pointer;
}

/* CARD */
.card-wrap{display:flex;justify-content:center}
.result-card{
  width:360px;
  background:#0b1324;
  border:1px solid #1e3a5f;
  border-radius:20px;
  padding:18px;
  box-shadow:0 0 0 6px rgba(34,211,238,.12);
}
.row{
  display:flex;
  justify-content:space-between;
  padding:6px 0;
  border-bottom:1px solid #1e293b;
  font-size:14px;
}
.row:last-child{border:none}
.card-actions{
  display:flex;
  justify-content:center;
  gap:12px;
  margin-top:14px;
}
.card-actions button{
  background:#0b1324;
  border:1px solid var(--border);
  color:white;
  padding:10px 14px;
  border-radius:12px;
  cursor:pointer;
}