:root {
--bg-main: #fff;
--bg-dark: #1e1e1e;
--bg-light-gray: #fafafa;
--bg-gray: #f5f5f5;
--bg-light-blue: #f7f9fc;
--bg-light-red: #fff1f0;
--bg-accent-green: #edfff3;
--text-main: #555555;
--text-title: #2c3e50;
--text-danger: #f44336;
--text-success: #28a745;
--search-input: #fff;
--border-main: #eaeaea;
--border-light: #e0e0e0;
--light-font: #59bb66;
--table-th-bg:#f8f8f8;
--table-td-bg:#f9fafc;
}
*{margin:0;padding:0;box-sizing:border-box;font-family:system-ui,-apple-system,sans-serif}
body{color:var(--text-main);font-size:100%;font-family:Arial,Helvetica,sans-serif;word-break:break-all;padding-top:env(safe-area-inset-top);min-height:100vh;background-color:var(--bg-main)}
body,button,dd,div,dl,dt,form,h1,h2,h3,h4,h5,h6,img,input,li,ol,p,select,span,table,td,textarea,th,ul{margin:0;padding:0}
button,input,label,select{vertical-align:middle}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}
img,td{border:0;vertical-align:middle;max-width:100%}
html{font-size:14pt}
em,i{font-style:normal}
li,ul{list-style:none}
a{color:var(--text-main);text-decoration:none}
a:hover{color:var(--text-main)}
.container{margin:0 auto;max-width:1440px;padding:0 3%}
.container .submit{min-width:80px;height:38px;border:0;cursor:pointer;font-size:16px;color:#fff;background:var(--light-font);outline:medium;-webkit-appearance:none;-webkit-border-radius:0;border-radius:5px}
.container .submit:hover{background:var(--text-success)}
.left{float:left}
.right{float:right}
.gray{color:#ccc}
.red{color:var(--text-danger)}
.green{color:var(--text-success)}
.orange{color:#fa6900;}
.blue{color:var(--light-font)}
.light{color:var(--light-font)}
.ft12{font-size:1.2em}
.ft10{font-size:1em}
.ft8{font-size:.8em}
.ft6{font-size:.6em}
.ft4{font-size:.4em}
.mt20{margin-top:20px;}
.block{clear:both;height:20px;overflow:hidden;display:block}
.hidden{display:none}

/* 其它提示 */
.price-high {color: #F53F3F}
.price-now {color: #46477E}
.price-low {color: #00B42A}

/*全局通用顶部导航*/
.nav-box{background-color:var(--bg-main);position:fixed;top:0;left:0;width:100%;box-shadow:0 2px 8px rgba(0,0,0,.2);z-index:1000}
.nav-cont{max-width:1280px;margin:0 auto;padding:16px 24px;display:flex;justify-content:space-between;align-items:center}
.nav-logo{font-size:1.5rem;font-weight:700;text-decoration:none}
.nav-menu{list-style:none;display:flex;gap:24px}
.nav-menu a{text-decoration:none;color:var(--text-title);font-size:1rem;font-weight:500;transition:color .2s ease}
.nav-menu a:hover{color:var(--light-font)}
.nav-menu a.active{color:var(--light-font);position:relative}
.nav-menu a.active::after{content:"";position:absolute;left:50%;bottom:-8px;width:calc(100% - 24px);height:2px;background-color:var(--light-font);transform:translateX(-50%)}
.nav-toggle{display:none;border:none;background:0 0;padding:12px;cursor:pointer;position:relative;z-index:1001}
.nav-bar{display:block;width:30px;height:3px;background:var(--text-main);margin:6px 0;transition:all .3s cubic-bezier(.68,-.55,.27,1.55)}

/*全局table表格 兼容移动端*/
.table-wrap{width:100%;margin-top:1rem;overflow-x:auto;border-radius:8px;border:1px solid var(--border-main);border-width:0 0 1px 1px}
.table-wrap input,select{color:var(--text-main);height:38px;line-height:38px;border:1px solid var(--border-light);padding:0 8px;border-radius:5px;overflow:hidden}
.table-wrap span{padding:.25em;}
table{width:100%;clear:both;width:100%;border-collapse:collapse;border-spacing:0;text-align:center;vertical-align:middle}
table th{padding:16px 14px;background:var(--table-th-bg);border:1px solid #eee;}
table td{padding:14px 12px;font-size:16px;text-align:center;border:1px solid #eee;}
table tbody tr:nth-of-type(odd){background:var(--table-td-bg)}
table td img {display: inline-block;vertical-align: middle;max-width: 24px !important;max-height: 24px !important;width: auto !important;height: auto !important;margin-right: 4px;}
table span{padding-right:2px;}
table#currency_bank a{display:inline-block;width:130px;white-space:nowrap}
table#jishi {margin-top:15px;}

/* 价格实况 */
.quotation {margin:10px auto;text-align:center;width:100%;}
.quotation .title{padding:10px;font-size:24px;font-weight:700;}
.quotation .price{font-size:64px;font-weight:700;margin:10px 0}
.quotation .change{font-size:18px;margin-bottom:15px}
.quotation .bold {color:var(--light-font);font-size:2rem;font-weight:bold;}
.quotation .prices{padding-bottom:.4rem;line-height:1.8rem}
.quotation .prices li{display:inline-block;padding:.4rem 0;margin-right:.6rem}
.quotation .prices span{display:inline-block;padding:0 .8rem;margin-right:.6rem;background:var(--bg-light-gray);border-radius:.3rem;color:#79797d}
.quotation .prices em {font-style:normal;font-size:16px;}
.quotation .date{font-size:12px;color:#888}

/* 趋势图表 */
.chart-tool{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin:20px 0;padding:15px 10px;background:var(--bg-light-gray);border-radius:8px}
.chart-market{margin:10px auto;padding:15px;background:var(--bg-light-gray);border-radius:8px;text-align:center}
.chart-btns button{padding:8px 12px;margin:0 3px;border:none;border-radius:4px;background:var(--light-font);color:#fff}
.chart-btns button.active{background:var(--text-success)}
#chart-select{padding:8px 12px;font-size:14px;border:1px solid #ddd;border-radius:4px}
#chart-box{width:100%;height:360px;margin:10px auto}

/* 导航框架 */
.link-box{background:var(--bg-light-gray);border-radius:16px;margin:10px 0;padding:20px;box-shadow:0 2px 10px rgba(0,0,0,.05)}
.link-box p{margin-bottom:10px;line-height:24px;font-size:14px}
.link-title{padding:0 0 12px 0;font-size:18px;font-weight:700;color:var(--text-title);margin-bottom:15px;border-bottom:1px solid var(--border-light)}
.link-box ul{display:flex;flex-wrap:wrap;gap:5px;margin:0;padding:0;list-style:none;justify-content:flex-start}
.link-box li{height:28px;line-height:28px;text-align:center;margin:8px;padding:0 10px;white-space:nowrap;flex-shrink:0}
.link-box a{padding:6px 12px;background:var(--bg-gray);border-radius:8px;transition:all .2s ease}
.link-box a:hover{background-color:var(--light-font);color:var(--bg-main);border-color:var(--light-font);transform:translateY(-2px)}

.intro{max-width:100%;text-align:justify;padding:.65em;margin:10px 0 15px 0;border-radius:8px;background-color:var(--bg-light-gray);border-right:1px solid var(--border-main);border-bottom:1px solid var(--border-main)}
.intro p{text-indent:2em;margin:.5em 0;letter-spacing:.1em;line-height:2em;font-size:.8em}
.intro span{color:var(--light-font);font-weight:700}
.intro pre{display:block;overflow-x:auto;padding:.8rem;margin-bottom:.8rem;background:var(--code-bg-color);-webkit-text-size-adjust:none;border-radius:4px;font-size:12px;font-family:Menlo,Monaco,Consolas,"Courier New",monospace;text-align:left;line-height:1.42857143;word-break:break-all;word-wrap:break-word;color:var(--gray-text-color)}

.footer{clear:both;color:var(--text-main);background-color:var(--border-light);font-family:"Comic Sans MS";text-align:center;border-top:1px solid var(--border-main);padding:1em;overflow:hidden;letter-spacing:.1em;font-size:.75em;opacity:.75;text-transform:uppercase;line-height:1.8}
.footer a{color:var(--text-main)}

.scroll-nav{position:fixed;right:20px;bottom:90px;z-index:9999;display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.scroll-nav a{display:flex;align-items:center;transition:all .3s ease;opacity:1;transform:translateY(0)}
.scroll-nav a.top{opacity:0;transform:translateY(20px)}
.scroll-nav a .text-tip{padding:6px 12px;border-radius:4px;background-color:#555;color:#fff;font-size:14px;margin-right:8px;opacity:0;transform:translateX(10px);transition:all .3s ease;white-space:nowrap}
.scroll-nav a .icon{width:40px;height:40px;border-radius:6px;background-color:#555;display:flex;align-items:center;justify-content:center;margin-left:auto;background-size:24px 24px;background-repeat:no-repeat;background-position:center}
.scroll-nav a.visible{opacity:1;transform:translateY(0);animation:fadeIn .3s ease-out}
@keyframes fadeIn{from{opacity:0;transform:translateY(20px)}
to{opacity:1;transform:translateY(0)}
}
.scroll-nav a:hover{transform:translateX(-10px)}
.scroll-nav a:hover .icon{background-color:#555}
.scroll-nav a:hover .text-tip{opacity:1;transform:translateX(0)}
.scroll-nav .top .icon{background-image:url(../img/gotop.png)}
.scroll-nav .theme .icon{background-image:url(../img/theme-sun.png)}
.scroll-nav .user .icon{background-image:url(../img/user.png)}
.scroll-nav .feedback .icon{background-image:url(../img/feedback.png)}

@media screen and (max-width:320px){html{font-size:8pt}
.container{padding:0 2%}
}
@media screen and (max-width:360px){html{font-size:10pt}
.backtop .gotop .up-icon{width:50px;height:50px;background-size:50px auto}
}
@media screen and (max-width:480px){
.btn{display: inline-block;max-width: 100px;margin: 10px 5px;padding: 8px 16px;white-space: nowrap;vertical-align: middle;}
}
@media screen and (max-width:600px){.nav-cont{padding:16px 16px}
.nav-menu{padding:30px 15px}
.container{margin-top:70px;padding-top:30px}
}

@media screen and (max-width:768px){
.btn{padding:8px 16px;font-size:13px;min-width:auto}
}

@media screen and (max-width:1024px){.container{margin-top:70px;padding-top:30px}
.nav-toggle{display:block}
.nav-menu{position:fixed;top:0;left:-100%;width:100%;height:100vh;flex-direction:column;justify-content:center;align-items:center;padding:40px 20px;transition:left .3s ease-in-out;box-shadow:0 0 16px rgba(0,0,0,.1);z-index:999;background-color:var(--bg-main);opacity:1}
.nav-menu.active{left:0}
.nav-menu li{margin:16px 0}
.nav-menu a{font-size:1.125rem}
}
@media (min-width:1025px){.nav-menu{display:flex!important;position:static!important;width:auto!important;height:auto!important;background:0 0!important;padding:0!important}
.nav-toggle{display:none}
.container{margin-top:70px;padding-top:30px}
}
@media screen and (min-width:1280px){html{font-size:14pt}
.container{max-width:1440px;padding:0 4%;margin-top:70px;padding-top:30px}
}
/* 深色模式*/
body.dark {
--bg-main: var(--bg-dark);
--text-main: #e0e0e0;
--text-title: #f0f0f0;
--bg-light-gray: #2d2d2d;
--bg-gray: #333;
--bg-light-blue: #1a2b4a;
--bg-light-red: #4a1a1a;
--bg-accent-green: #1a4a25;
--search-input: #171717;
--border-main: #555;
--border-light: #555;
--table-th-bg:#555;
--table-td-bg:#555;
background-color: var(--bg-main);
color: var(--text-main);
}

/* 深色模式下的移动端导航背景适配*/
@media screen and (max-width: 1024px) {
body.dark .nav-menu {
background-color: var(--bg-dark);
color: var(--text-main);
border-color: var(--border-main);
}
}