body{
margin:0;
font-family:Segoe UI;
background:radial-gradient(circle,#0b1d4d,#020b22);
color:white;
display:flex;
justify-content:center;
}

.container{
width:90%;
max-width:420px;
margin-top:40px;
}

h1{
text-align:center;
color:#7fb5ff;
margin-bottom:30px;
}

.input-box{
width:100%;
padding:18px;
margin-bottom:20px;
border:none;
border-radius:40px;
font-size:16px;
color:white;
background:rgba(255,255,255,0.08);
box-shadow:0 0 12px rgba(100,150,255,0.2);
outline:none;
}

.search-wrapper{
position:relative;
}

.dropdown{
position:absolute;
width:100%;
background:#0b1a3d;
border-radius:20px;
max-height:200px;
overflow-y:auto;
z-index:100;
}

.dropdown div{
padding:14px;
cursor:pointer;
}

.dropdown div:hover{
background:#1b3d82;
}

.btn{
width:100%;
padding:18px;
border:none;
border-radius:40px;
font-size:18px;
font-weight:bold;
color:white;
margin-top:15px;
cursor:pointer;
}

.primary{
background:linear-gradient(90deg,#6a5cff,#4fa5ff);
}

.reset{
background:linear-gradient(90deg,#ff5f5f,#ff3b3b);
}

.export{
background:linear-gradient(90deg,#3fbf6c,#2e9c55);
}

.row-buttons{
display:flex;
gap:15px;
}

.row-buttons .btn{
flex:1;
}

.pair-list{
margin-top:25px;
padding:20px;
list-style:none;
background:rgba(255,255,255,0.07);
border-radius:25px;
}

.pair-card{
background:rgba(255,255,255,0.08);
padding: 12px;
border-radius:20px;
margin-top:15px;
font-size:16px;
display:flex;
justify-content:center;
gap:10px;
box-shadow:0 0 12px rgba(100,150,255,0.25);
}

.pair-card .target{
font-weight:bold;
color:#8cc2ff;
}

.pair-card .have{
color:#ffffff;
}

.pair-card .arrow{
color:#7fa8ff;
font-weight:bold;
}