body {padding:0px;margin-top:0;text-align:center;font:14px 宋体,Verdana,Geneva, "Arial", sans-serif;}
td,input,select,textarea {font-size:14px;}
.copyright{font-size:12px;height:40px;width:99%;margin:15px auto;overflow:hidden;text-align:center;}

body,h1,h2,p,ul{margin:0px;}
body{font-size:12px;font-family:Verdana,"宋体";background:#fff;}
a:link,a:visited {color:#008040;background:inherit;text-decoration:none;}
a:hover {color:red;background:inherit;text-decoration:underline;}
.L {text-align:left;}
select,input,img{vertical-align:middle;}
.select{height: 35px;font-size: 16px;padding: 2px 2px;border: #999 1px solid;}
.input{width: 200px;height: 30px;font-size: 16px;padding: 0px 3px;overflow: hidden;border: #999 1px solid;}
.input_list{width: 90px;font-size: 14px;padding: 5px 3px;overflow: hidden;border: #999 1px inset;-moz-border-radius: 2px;-khtml-border-radius: 2px;-webkit-border-radius: 2px;border-radius: 2px;}
.button{height: 32px;padding: 0px 10px;*padding:0 8px;font-size: 16px;cursor:pointer;margin-left:5px;}
.pagebox{width:99%;margin:2px auto;}
.converter{height:325px;overflow:hidden;margin:0px auto;background:#FFFFCC;border:1px #996633 solid;padding:3px;font-size:14px;}
.converter .converterbox{text-align:left;float:left;width:100%;padding:2px 2px;}
.converter .convertfrom{float:left;width:380px;padding:5px 5px;}
.converter .amount{padding:5px 0px;font-size: 16px;}
.converter .convert{padding:5px 0px;line-height:30px;}
.converter .convert2{padding:5px 0px;line-height:30px;}

        ul,li{margin:0px; padding:0px; list-style-type:none}
        h1,h2,h3,h4,form{margin:0px;padding:0px;}
        .currency{border:1px solid #E8EEFA; padding:2px; margin:auto; width:99%;}
        .result3{background:#c4ecf6; padding:2px;}
        .clear{clear:both;}
        .rates {width:97%; line-height:33px;overflow:hidden}
 .rates li{font-size:14px;text-align:LEFT;float:left;padding-left:5px;width:47%;height:30px;line-height:30px;background-color:#FFFFFF;border:1px solid #EBEBD8;border-width:1px 0 0 1px;display:block;}

.baise a{color:#FFFFFF;text-decoration:none;display:inline;}
.baise a:hover{color:#FF0000;text-decoration:none;display:inline;}
.mtitle {font-size:22px;margin-top:-1px;height:33px;line-height:33px;padding:0 18px 0 12px;background:#429bd3;color:#FFFFFF;}


/* 主容器样式 */
.converter-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px;
  background-color: #f8f8f8; /* 浅黄色背景 */
}

/* 左侧换算器区域 */
.converter-main {
  flex: 1;
  min-width: 50%;
  background-color: white;
  padding: 10px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* 右侧汇率列表区域 */
.converter-sidebar {
  width: 50%;
  background-color: #f5f5f5;
  padding: 10px;
  border-radius: 8px;
  border: 2px solid #4CAF50; /* 绿色边框 */
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* 标题样式 */
.converter-title {
  color: #1976D2; /* 蓝色标题 */
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 15px;
}
.currency {
  width: 100%;
  max-width: 1220px; /* 限制最大宽度 */
}

/* 货币选择下拉框 */
.currency-select {
  width: 100%;
  padding: 8px;
  margin-bottom: 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #e9f8d7; /* 浅绿色背景 */
}

/* 输入框样式 */
.amount-input {
  width: 100%;
  padding: 8px;
  margin-bottom: 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

/* 计算按钮 */
.calculate-btn {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
}

/* 汇率结果显示 */
.result-box {
  margin-top: 20px;
  padding: 15px;
  background-color: #f1f8e9;
  border-radius: 4px;
}

/* 右侧汇率列表区域 - 调整为99%宽度并居中 */
.rate-list-container {
    width: 99%;
    max-width: 500px; /* 限制最大宽度 */
    margin: 0px auto; /* 上下15px，左右自动居中 */
    background-color: #f5f5f5;
    padding: 10px;
    border-radius: 5px;
    border: 2px solid #4CAF50; /* 绿色边框，与图片一致 */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* 汇率列表样式 - 每行显示4个项目，充分利用宽度 */
.rate-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    list-style: none;
    padding: 0;
    margin: 0;
}

.rate-list li {
    width: 49%; /* 每行4个项目，留1%作为间隙 */
    padding: 8px 0;
    box-sizing: border-box;
    text-align: center;
}

.rate-list a {
    color: #008040; /* 绿色文字，与图片一致 */
    text-decoration: none;
    display: block;
    padding: 5px;
    border-radius: 3px;
    transition: all 0.3s;
    font-size: 14px;
}

.rate-list a:hover {
    background-color: #e8f5e9;
    color: #d32f2f;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .rate-list li {
        width: 48%; /* 小屏幕下每行2个项目 */
    }
}


/* 交换按钮样式 */
.swap-btn {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #1976D2;
  margin: 0 10px;
}