:root {
    
    --daliyuer-border: #e3e3e3;
    --font-bg: #fff;
    --font-color: #4c4948;
    --daliyuer-bd-rd: 6px;
    --daliyuer-white: #fff;
}
[data-theme='dark'] {
    --font-bg: #0d0d0d;
    --daliyuer-border: #e3e3e3;
    --font-color: rgba(255, 255, 255, 0.7);
}

/* 自定义底部  start */

#footer {
    border-top: 1px solid var(--daliyuer-border);
    background-color: var(--font-bg) !important;
}

/* #footer-wrap {
    background-color: var(--font-bg);
} */


#footer-wrap,
#footer-wrap a {
    color: var(--font-color)
}

#ft {
    max-width: 1200px;
    margin: 0 auto 12px;
    display: flex;
    color: var(--font-color) !important;
    text-align: left;
    flex-wrap: wrap;
}

.ft-item-1,
.ft-item-2 {
    display: flex;
    height: 100%;
    padding: 10px 14px;
}

.ft-item-1 {
    flex-direction: column;
    flex: 2;
}

.ft-item-2 {
    flex: 1;
    flex-direction: column;
}

.t-top {
    display: flex;
}

.t-top .t-t-l {
    display: flex;
    flex-direction: column;
    flex: 1.4;
    margin-right: 10px;
}

.t-top .t-t-l .bg-ad {
    width: 85%;
    border-radius: 10px;
    padding: 0 10px;
}

.btn-xz-box {
    margin-top: 10px;
}

.btn-xz {
    display: block;
    background-color: var(--btn-bg);
    color: var(--daliyuer-white) !important;
    text-align: center;
    line-height: 2.4;
    margin: 8px 0;
    cursor: pointer !important;
    border-radius: var(--daliyuer-bd-rd);
}

.btn-xz:hover {
    text-decoration: none !important;

}

.btn-xz-box:hover .btn-xz {
    background-color: var(--btn-hover-color);
}

.t-top .t-t-r {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.ft-links {
    padding: 0 14px;
    list-style: none;
    margin-top: 0 !important;
}

.ft-links li a {
    display: inline-block !important;
    width: 50%;
    cursor: pointer !important;
}

.ft-links li a:hover {
    text-decoration: none !important;
    color: var(--btn-hover-color) !important;
}

.ft-item-2 .ft-img-group {
    width: 100%;
}

.ft-t {
    font-size: 0.8rem;
    margin-bottom: 20px;
    line-height: 1;
    font-weight: 600;
}

.t-l-t {
    padding-left: 14px;
}

.ft-item-2 .ft-img-group .img-group-item {
    display: inline-block;
    width: 18.4%;
    margin-right: 14px;
    margin-bottom: 6px;
}

.ft-item-2 .ft-img-group .img-group-item a {
    display: inline-block;
    width: 100%;
    height: 100%;
    cursor: pointer !important;
}

.ft-item-2 .ft-img-group .img-group-item a img {
    width: 100%;
    max-height: 80px;
}

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

    .ft-item-1 {
        flex-basis: 100% !important;
    }

    .ft-item-2 {
        flex-basis: 100% !important;
    }

    .t-top .t-t-l .bg-ad {
        width: 100%;
    }
}

@media screen and (max-width: 576px) {
    .t-top {
        flex-wrap: wrap;
    }

    .t-top .t-t-l {
        flex-basis: 100% !important;

    }

    .t-top .t-t-r {
        margin-top: 16px;
        flex-basis: 100% !important;
    }
}

/* 自定义底部  End */

/* 版权与框架信息居中 */
.copyright, .framework-info {
    text-align: center;
    width: 100%;
}

.framework-info {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.framework-info span, 
.framework-info a {
    display: inline-block;
    margin: 0 5px;
}
/* 版权与框架信息居中end */

/* ===== 侧栏标签：等高胶囊 + 折叠 start =====
   特异性说明（改这段前先看）：
   1) 主题的规则是 ID 选择器 —— #aside-content .card-tag-cloud a（1,1,1），
      纯 class 选择器压不住它，所以这里统一前缀 #aside-content .card-widget.card-tags。
   2) 标签的 font-size / color 写在标签的行内 style 上，只有 !important 能覆盖。
   3) /tags 页面用的是 .tag-cloud-list，不受以下样式影响。 */

#aside-content .card-widget.card-tags .card-tag-cloud {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0 -2px;
}

#aside-content .card-widget.card-tags .card-tag-cloud a {
    display: inline-block;
    max-width: 100%;
    padding: 2px 10px !important;
    font-size: 0.78rem !important;
    line-height: 1.7 !important;
    color: var(--font-color) !important;
    background-color: rgba(125, 130, 150, 0.11);
    border-radius: 999px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s, background-color 0.2s, transform 0.2s;
}

#aside-content .card-widget.card-tags .card-tag-cloud a:hover {
    color: #fff !important;
    background-color: var(--btn-bg, #49b1f5) !important;
    transform: translateY(-1px);
}

/* 折叠：默认只显示前 12 个（数量在 /js/daliyuer.js 里改 MAX） */
#aside-content .card-widget.card-tags .card-tag-cloud a.tag-folded {
    display: none !important;
}

#aside-content .card-widget.card-tags .card-tag-cloud.is-open a.tag-folded {
    display: inline-block !important;
}

/* 展开 / 收起按钮 */
#aside-content .tag-fold-btn {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 8px 0 0;
    border: 0;
    border-top: 1px solid rgba(125, 130, 150, 0.18);
    background: none;
    font-size: 0.75rem;
    color: var(--font-color);
    opacity: 0.65;
    cursor: pointer;
    transition: opacity 0.2s, color 0.2s;
}

#aside-content .tag-fold-btn:hover {
    opacity: 1;
    color: var(--btn-bg, #49b1f5);
}

[data-theme='dark'] #aside-content .card-widget.card-tags .card-tag-cloud a {
    background-color: rgba(255, 255, 255, 0.1);
}

/* ===== 侧栏标签：等高胶囊 + 折叠 end ===== */

/* ===== /about 关系图 start =====
   星核球体：canvas 2D 伪 3D，渲染全在 source/js/about-graph.js
   数据管线见 scripts/about-graph.js，这里只管容器、悬浮框、图例的观感 */

.about-graph {
    margin: 1.4rem 0 0.4rem;
}

/* 深色画布放在浅色文章里，像一块嵌进去的屏幕：靠紫色外发光和细边过渡 */
.about-graph-stage {
    position: relative;
    width: 100%;
    height: clamp(340px, 62vh, 600px);
    border: 1px solid rgba(139, 124, 246, 0.22);
    border-radius: 14px;
    background: #06050b;
    overflow: hidden;
    cursor: grab;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
    box-shadow:
        0 18px 42px -20px rgba(88, 70, 190, 0.55),
        inset 0 0 60px rgba(80, 60, 180, 0.10);
}

.about-graph-stage:active {
    cursor: grabbing;
}

.about-graph-stage canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.about-graph-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #06050b;
    font-size: 0.82rem;
    letter-spacing: 0.1em;
    color: #6E7893;
}

/* 悬浮框：跟随节点的自绘 div（不再用 force-graph 的 float-tooltip） */
.ag-tip {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 6;
    max-width: min(280px, calc(100% - 24px));
    padding: 7px 11px;
    border: 1px solid rgba(139, 124, 246, 0.38);
    border-radius: 8px;
    background: rgba(9, 8, 18, 0.96);
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.5);
    color: #dde6fa;
    font-size: 12.5px;
    line-height: 1.5;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -124%);
    transition: opacity 0.12s;
}

.ag-tip b {
    display: block;
    font-weight: 500;
    word-break: break-word;
}

.ag-tip span {
    display: block;
    margin-top: 3px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    color: #7f8bad;
}

/* 复位：把拖出去的节点收回球面 */
.ag-reset {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 6;
    padding: 4px 11px;
    border: 1px solid rgba(139, 124, 246, 0.34);
    border-radius: 999px;
    background: rgba(20, 18, 34, 0.72);
    backdrop-filter: blur(4px);
    color: #9a93c8;
    font-size: 11.5px;
    line-height: 1.7;
    cursor: pointer;
    opacity: 0.55;
    transition: opacity 0.2s, color 0.2s, border-color 0.2s, background-color 0.2s;
}

.ag-reset:hover {
    opacity: 1;
    border-color: rgba(139, 124, 246, 0.7);
    color: #c9c2ff;
}

/* 有节点被拖出来后按钮点亮，提示可以复位 */
.ag-reset.is-on {
    opacity: 1;
    border-color: rgba(139, 124, 246, 0.6);
    background: rgba(139, 124, 246, 0.16);
    color: #c9c2ff;
}

.ag-count {
    position: absolute;
    right: 12px;
    bottom: 10px;
    z-index: 4;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10.5px;
    color: #3e4560;
    pointer-events: none;
}

/* 图例 */
.about-graph-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}

.ag-lg-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border: 1px solid rgba(125, 130, 150, 0.18);
    border-radius: 999px;
    background: transparent;
    font-size: 0.72rem;
    line-height: 1.7;
    color: var(--font-color);
    opacity: 0.72;
    cursor: pointer;
    transition: opacity 0.2s, border-color 0.2s, background-color 0.2s, color 0.2s;
}

.ag-lg-item:hover {
    opacity: 1;
    border-color: rgba(139, 124, 246, 0.7);
}

.ag-lg-item.is-active {
    opacity: 1;
    border-color: rgba(139, 124, 246, 0.55);
    background: rgba(139, 124, 246, 0.12);
    color: #7a68e8;
}

.ag-lg-dot {
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.ag-lg-item b {
    font-size: 0.68rem;
    font-weight: 400;
    opacity: 0.55;
}

.about-graph-hint {
    margin: 8px 0 0;
    font-size: 0.72rem;
    color: var(--font-color);
    opacity: 0.5;
    text-align: right;
}

/* 移动端没有滚轮和悬停，提示文案换一套 */
.ag-hint-mb {
    display: none;
}

@media (max-width: 768px) {
    .ag-hint-pc {
        display: none;
    }

    .ag-hint-mb {
        display: inline;
    }

    /* 17 个胶囊在手机上会堆成六行，改成单行横向滑动 */
    .about-graph-legend {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .about-graph-legend::-webkit-scrollbar {
        display: none;
    }

    .ag-lg-item {
        flex: 0 0 auto;
    }
}

.about-graph-fallback {
    padding: 22px 16px;
    border: 1px dashed rgba(139, 124, 246, 0.32);
    border-radius: 12px;
    font-size: 0.82rem;
    line-height: 1.8;
    text-align: center;
    color: #8a93a8;
    opacity: 0.85;
}

.about-graph-fallback p {
    margin: 0;
}

[data-theme='dark'] .about-graph-stage {
    border-color: rgba(139, 124, 246, 0.18);
}

[data-theme='dark'] .ag-lg-item {
    border-color: rgba(255, 255, 255, 0.12);
}

[data-theme='dark'] .ag-lg-item.is-active {
    /* 深色背景下选中态要提亮，否则紫色压深底看不清 */
    background: rgba(139, 124, 246, 0.22);
    border-color: rgba(139, 124, 246, 0.72);
    color: #b4a9ff;
}

/* ===== /about 关系图 end ===== */