/* ============================================================
   设计令牌：中式雅致金色调（白底 / 浅棕边框 / 暗红强调）
   ============================================================ */
:root {
    color-scheme: light;
    --hjl-bg: #faf8f4;
    /* 页面底色：暖白 */
    --hjl-card-bg: #ffffff;
    /* 卡片底色 */
    --hjl-border: #e6dcc6;
    /* 浅棕边框 */
    --hjl-gold: #b8860b;
    /* 主金色（替代高饱和 gold） */
    --hjl-gold-deep: #8a6508;
    /* 深金：金色底上的文字 */
    --hjl-gold-light: #f7f1e3;
    /* 浅金底：导航 / 表头 */
    --hjl-up: #c0392b;
    /* 涨跌·红（兼作链接 hover 色） */
    --hjl-down: #1e7e34;
    /* 涨跌·绿 */
    --hjl-text: #3f3f3f;
    /* 正文 */
    --hjl-muted: #8a8378;
    /* 次要文字 */
    --hjl-font-title: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", "SimSun", serif;
    /* 标题衬线：辞书/国风 */
}

/* 将滚动条变为细小的样式 */
::-webkit-scrollbar {
    width: 6px;
    /* 设置滚动条宽度 */
    height: 6px;
    /* 设置滚动条高度 */
}

/* 设置滚动条轨道样式 */
::-webkit-scrollbar-track {
    background-color: var(--hjl-gold-light);
    /* 设置滚动条轨道背景色 */
}

/* 设置滚动条滑块样式 */
::-webkit-scrollbar-thumb {
    background-color: var(--hjl-border);
    /* 设置滚动条滑块颜色 */
}

/* 鼠标悬停在滚动条上的样式 */
::-webkit-scrollbar-thumb:hover {
    background-color: var(--hjl-gold-deep);
    /* 设置鼠标悬停时滑块颜色 */
}

@media screen and (max-width: 576px) {
    .media img {
        display: none
    }
}

a {
    color: var(--hjl-text);
    text-decoration: none;
    transition: color 0.15s ease;
}

a:hover {
    color: var(--hjl-up);
    text-decoration: none;
}

.color-red {
    color: red;
}

.color-gold {
    color: gold;
}

.color-gold-bg {
    background-color: gold !important;
}

.color-silver-bg {
    background-color: silver !important;
}


main .card {
    margin-bottom: 1rem;
}

aside .card {
    margin-bottom: 1rem;
}

.new-price {
    color: var(--hjl-up);
}

.t {
    display: table;
    border: 1px solid;
}

.t-row {
    border: 1px solid;
}

.red {
    color: var(--hjl-up);
}

.green {
    color: var(--hjl-down);
}

.article-list {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100%;
    font-size: 0.875rem;
}

/*table {*/
/*    font-size: 14px;*/
/*}*/


body {
    background-color: var(--hjl-bg);
    color: var(--hjl-text);
}


.media img {
    width: 10rem;
    height: 7rem;
}

.description {
    color: var(--hjl-muted);
    font-size: 0.9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 2;
}

.media-body h5 {
    font-size: 1.2rem;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 2;
}

.breadcrumb {
    background-color: var(--hjl-card-bg);
    margin: 0;
}

.cur-price {

    color: #FFFFFF;
}

.cur-price a {
    /*color: #FFFFFF;*/

    cursor: pointer;

}


.price-info span {

    padding: 0;
    margin: 0;
    /*float: left;*/
}

.bg-green {
    background-color: var(--hjl-down);
}

.bg-red {
    background-color: var(--hjl-up);
}

.p-info span {
    overflow: hidden;

    white-space: nowrap;
    text-overflow: ellipsis;
}

.char-img {
    position: relative;
    /*height: 275px;*/
}

.cv {
    position: absolute;
    bottom: 0;
}

.pp a {
    font-size: .8rem;
    display: inline-block;
    padding: 5px;
    border-radius: 5px;
    margin: 3px;
    background-color: var(--hjl-gold-light);
    color: var(--hjl-gold-deep);
    border: 1px solid var(--hjl-border);
}

.pp a:hover {
    color: var(--hjl-up);
    border-color: var(--hjl-up);
    background-color: var(--hjl-card-bg);
}

.card-body>h5::before {
    content: "";
    margin: 0 5px 2px 0;
    display: inline-block !important;
    width: .3rem;
    border-radius: 3px;
    vertical-align: bottom;
    height: 1.25rem;

    background-color: var(--hjl-gold);
}

.bz {
    font-size: 12px;
    color: var(--hjl-muted);
    margin-top: 10px;
}

.tag {
    display: inline-block;
    float: right;
    clear: both;

}

.tag a {
    color: var(--hjl-gold-deep);
}

.tag a:hover {
    color: var(--hjl-up);
}

.news-list {
    position: relative;

    padding: 0;
    margin: 0;
    list-style: none;
}


.news-list li {
    position: relative;
    color: var(--hjl-muted);
    padding-left: 25px;
    overflow: hidden;
    max-width: 100%;
}

.news-list li:before {
    content: "";
    display: block;
    position: absolute;
    width: 1px;
    height: 100%;
    left: 5px;
    background-color: var(--hjl-border);
}

.news-list li a {
    color: var(--hjl-text);
}

.news-list li a:hover {
    color: var(--hjl-up);
}

.news-list li p {
    color: var(--hjl-up);
    font-size: 14px;
    /*margin: 0;*/
    padding: 0;
}


.yuan {
    content: "";
    display: block;
    /*z-index: 1;*/
    position: absolute;

    width: 10px;
    height: 10px;
    left: 1px;
    top: 7px;
    z-index: 999;
    border-radius: 50%;
    background-color: var(--hjl-gold);
}

.more {
    color: var(--hjl-gold-deep);
    padding: 6px 0;
    cursor: pointer;
    display: block;
    margin-top: 20px;
    text-align: center;
    background-color: var(--hjl-gold-light);
    border: 1px solid var(--hjl-border);
    border-radius: 5px;
}

.more:hover {
    color: var(--hjl-up);
    background-color: var(--hjl-card-bg);
    border-color: var(--hjl-up);
}

/* 图片不超过.content的宽度 */
.content img {
    max-width: 100%;
    height: auto;
}


.bi {
    display: inline-block;
    color: var(--hjl-muted);
    margin-right: 5px;
    width: 16px;
    height: 16px;

}

.bi-send {
    background-image: url('/static/img/send.svg');
    background-size: 120% 120%;
    background-repeat: no-repeat;
    background-position: center;
}

.bi-more {
    background-image: url('/static/img/more.svg');
    background-size: 120% 120%;
    background-repeat: no-repeat;
    background-position: center;
}

.bi-repeat {
    background-image: url('/static/img/arrow-clockwise.svg');
    background-size: 120% 120%;
    background-repeat: no-repeat;
    background-position: center;
}


/*.per {*/
/*    padding-left: 0.2rem;*/
/*}*/

@media screen and (max-width: 760px) {

    #cur-price {

        font-size: 2.5rem;
    }

    .m-p .card-body {
        padding: 0.5rem;
        margin: 0;
    }


    .name,
    #zd,
    #zdf,
    .uni,
    .cv,
    #ut,
    .tool {
        font-size: 1rem !important;
    }

    .price-info {
        /*font-weight: normal !important;*/
        font-size: .65rem !important;
        padding: 5px 15px;

    }

    .price-info div {
        padding: 0;
        margin: 0;
    }

    #ut {
        font-size: 0.75rem !important;
        white-space: normal !important;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .utd {
        font-size: 0.75rem !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }


}

/* ============================================================
   组件样式（基于设计令牌）
   ============================================================ */

/* 卡片：白底 + 浅棕边框，弱化生硬阴影 */
main .card,
aside .card {
    background-color: var(--hjl-card-bg);
    border: 1px solid var(--hjl-border);
    border-radius: 10px;
}

.card-body.shadow {
    box-shadow: 0 1px 3px rgba(138, 101, 8, 0.05);
}

/* 导航：浅金底 + 底部描边，当前页暗红高亮 */
nav.navbar.color-gold-bg {
    border-bottom: 1px solid var(--hjl-border);
}

.navbar-light .navbar-nav .nav-item.active .nav-link {
    color: var(--hjl-up);
    font-weight: 600;
}

/* 表头：浅金底 + 深金文字 */
.color-gold-bg th {
    color: var(--hjl-gold-deep);
}

/* 涨跌色统一到令牌（覆盖 bootstrap 默认红绿） */
.text-danger {
    color: var(--hjl-up);
}

.text-success {
    color: var(--hjl-down);
}

/* 等宽数字：实时刷新时价格数字宽度稳定不跳动 */
.num-tabular {
    font-variant-numeric: tabular-nums;
}

/* 价格卡片 */
.price-card .h1 {
    font-weight: 700;
    letter-spacing: -0.5px;
}

.price-card .zd-arrow {
    font-size: 0.75em;
}

/* 图表切换按钮组：选中态用主金色 */
.btn-group .btn-outline-secondary.active {
    background-color: var(--hjl-gold);
    border-color: var(--hjl-gold);
    color: #fff;
}

/* 表格：去掉重边框，浅棕分隔线 */
.table th,
.table td {
    border-color: var(--hjl-border);
}

/* BS4 的 .table thead th 自带 2px 浅灰下边框（特异性更高），需单独覆盖 */
.table thead th {
    border-bottom-color: var(--hjl-border);
}

.table tbody+tbody {
    border-top-color: var(--hjl-border);
}

/* 回到顶部 */
#back-top {
    position: fixed;
    right: 18px;
    bottom: 48px;
    z-index: 1030;
    width: 40px;
    height: 40px;
    line-height: 38px;
    text-align: center;
    font-size: 18px;
    color: var(--hjl-gold-deep);
    background-color: var(--hjl-card-bg);
    border: 1px solid var(--hjl-border);
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(138, 101, 8, 0.15);
}

#back-top.show {
    opacity: 1;
    visibility: visible;
}

#back-top:hover {
    color: #fff;
    background-color: var(--hjl-up);
    border-color: var(--hjl-up);
}

/* 页脚 */
.site-footer {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--hjl-border);
    background-color: var(--hjl-card-bg);
}

/* 标题衬线字体：辞书/国风气质，正文保持无衬线 */
.card-title,
.navbar-brand,
.name {
    font-family: var(--hjl-font-title);
    letter-spacing: 0.5px;
}

/* 价格变动闪烁高亮 */
@keyframes hjl-flash-up {
    0% {
        background-color: rgba(192, 57, 43, 0.18);
    }

    100% {
        background-color: transparent;
    }
}

@keyframes hjl-flash-down {
    0% {
        background-color: rgba(30, 126, 52, 0.18);
    }

    100% {
        background-color: transparent;
    }
}

.price-flash-up {
    animation: hjl-flash-up 0.9s ease-out;
    border-radius: 6px;
}

.price-flash-down {
    animation: hjl-flash-down 0.9s ease-out;
    border-radius: 6px;
}

/* ============================================================
   暗色模式：由 <html data-theme="dark"> 驱动
   （head 内联脚本初始化：手动选择优先，否则跟随系统）
   ============================================================ */
[data-theme="dark"] {
    color-scheme: dark;
    --hjl-bg: #1c1a17;
    --hjl-card-bg: #262320;
    --hjl-border: #3d372e;
    --hjl-gold: #d4af37;
    --hjl-gold-deep: #e2c56c;
    --hjl-gold-light: #322e27;
    --hjl-up: #e0604f;
    --hjl-down: #4caf6e;
    --hjl-text: #d8d2c8;
    --hjl-muted: #9a9184;
}

/* Bootstrap 组件暗色适配 */
[data-theme="dark"] .img-thumbnail {
    background-color: var(--hjl-card-bg);
    border-color: var(--hjl-border);
}

[data-theme="dark"] .table-hover tbody tr:hover {
    background-color: rgba(212, 175, 55, 0.07);
}

[data-theme="dark"] .text-secondary {
    color: var(--hjl-muted);
}

[data-theme="dark"] .text-muted {
    color: var(--hjl-muted);
}

[data-theme="dark"] .text-info {
    color: #7fb8d8;
}

[data-theme="dark"] .text-warning {
    color: var(--hjl-gold);
}

[data-theme="dark"] .form-control {
    background-color: var(--hjl-bg);
    border-color: var(--hjl-border);
    color: var(--hjl-text);
}

[data-theme="dark"] .form-control[readonly] {
    background-color: var(--hjl-card-bg);
}

[data-theme="dark"] .input-group-text {
    background-color: var(--hjl-gold-light);
    border-color: var(--hjl-border);
    color: var(--hjl-gold-deep);
}

[data-theme="dark"] .badge-light {
    background-color: var(--hjl-gold-light);
    color: var(--hjl-gold-deep);
}

[data-theme="dark"] .btn-outline-secondary {
    color: var(--hjl-text);
    border-color: var(--hjl-border);
}

[data-theme="dark"] .btn-outline-secondary:hover {
    background-color: var(--hjl-gold-light);
    color: var(--hjl-gold-deep);
}

/* 导航：暗金底 + 亮文字 */
[data-theme="dark"] .navbar-light .navbar-brand,
[data-theme="dark"] .navbar-light .navbar-nav .nav-link {
    color: var(--hjl-text);
}

[data-theme="dark"] .navbar-light .navbar-nav .nav-link:hover,
[data-theme="dark"] .navbar-light .navbar-nav .nav-item.active .nav-link {
    color: var(--hjl-up);
}

[data-theme="dark"] .navbar-light .navbar-toggler {
    border-color: var(--hjl-border);
}

[data-theme="dark"] .navbar-light .navbar-toggler-icon {
    filter: invert(0.82);
}

[data-theme="dark"] .navbar-light .navbar-nav .nav-link:focus {
    color: var(--hjl-text);
}

/* 导航 bg-light 双保险（防止 color-gold-bg 未生效时导航变亮块） */
[data-theme="dark"] .navbar.bg-light {
    background-color: var(--hjl-gold-light) !important;
}

/* 表格：文字统一亮色、行背景透明、分隔线用令牌 */
[data-theme="dark"] .table,
[data-theme="dark"] .table th,
[data-theme="dark"] .table td {
    color: var(--hjl-text);
    background-color: transparent;
    border-color: var(--hjl-border);
}

[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.03);
}

/* 表头 th：主金色文字（主题感），并压过通用 .table th 的正文色 */
[data-theme="dark"] thead.color-gold-bg th {
    color: var(--hjl-gold);
    background-color: transparent;
}

[data-theme="dark"] .table thead th {
    border-bottom-color: var(--hjl-border);
}

/* 行内品种名 th（tbody 首列） */
[data-theme="dark"] .table tbody th {
    color: var(--hjl-text);
}

/* 卡片头/脚与分割线 */
[data-theme="dark"] .card-header,
[data-theme="dark"] .card-footer {
    background-color: transparent;
    border-color: var(--hjl-border);
}

/* 列表组：百科列表与文章详情"相关推荐" */
[data-theme="dark"] .list-group-item {
    background-color: transparent;
    border-color: var(--hjl-border);
    color: var(--hjl-text);
}

[data-theme="dark"] .list-group-item-action:hover,
[data-theme="dark"] .list-group-item-action:focus {
    background-color: rgba(212, 175, 55, 0.07);
    color: var(--hjl-text);
}

[data-theme="dark"] hr {
    border-color: var(--hjl-border);
}

/* 面包屑当前页 */
[data-theme="dark"] .breadcrumb-item.active {
    color: var(--hjl-muted);
}

/* 表单聚焦态：去掉刺眼的默认蓝色光晕 */
[data-theme="dark"] .form-control:focus {
    background-color: var(--hjl-bg);
    border-color: var(--hjl-gold);
    color: var(--hjl-text);
    box-shadow: 0 0 0 0.2rem rgba(212, 175, 55, 0.15);
}

/* "转换"按钮（badge-dark）：暗色下改金边样式，避免与背景融在一起 */
[data-theme="dark"] .badge-dark {
    background-color: var(--hjl-gold-light);
    color: var(--hjl-gold-deep);
}

/* 主题切换按钮：按当前主题显示太阳/月亮图标（暗色时点太阳回浅色） */
#theme-toggle .icon-moon {
    display: none;
}

[data-theme="dark"] #theme-toggle .icon-sun {
    display: none;
}

[data-theme="dark"] #theme-toggle .icon-moon {
    display: inline-block;
}

#theme-toggle {
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#theme-toggle svg {
    font-size: 1.05rem;
}