* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: "Microsoft YaHei", Arial; background:#f5f7fa; color:#333; }
.container { max-width:1000px; margin:20px auto; padding:20px; background:#fff; border-radius:10px; box-shadow:0 0 20px rgba(0,0,0,0.1); }
h1 { text-align:center; color:#1e88e5; margin-bottom:10px; }
.update-time { text-align:center; color:#666; margin-bottom:20px; }

.tabs { display:flex; margin-bottom:20px; border-bottom:2px solid #eee; }
.tab-btn { flex:1; padding:12px; background:#f8f9fa; border:none; cursor:pointer; font-size:16px; }
.tab-btn.active { background:#1e88e5; color:white; }

table { width:100%; border-collapse:collapse; margin-top:10px; }
th, td { padding:10px; text-align:center; border-bottom:1px solid #eee; }
th { background:#1e88e5; color:white; }
tr:hover { background:#f8fdff; }
.code { font-weight:bold; color:#d32f2f; }
.rate { font-weight:bold; }
.green { color:#00a65a; }
.red { color:#d32f2f; }

.footer { text-align:center; margin-top:30px; }
.footer button { padding:10px 20px; margin:5px; background:#1e88e5; color:white; border:none; border-radius:5px; cursor:pointer; }

@media (max-width:768px) {
    table, thead, tbody, th, td, tr { display:block; }
    thead tr { display:none; }
    tr { margin-bottom:15px; border:1px solid #ddd; border-radius:8px; }
    td { text-align:right; position:relative; padding-left:50%; }
    td:before { content:attr(data-label); position:absolute; left:15px; font-weight:bold; }
}