/* =============================================================
 *  首页N格 · 前台样式
 *  颜色全部走模板 CSS 变量并带兜底值，深色模式([data-theme="dark"])
 *  自动跟随，无需额外配色表。
 * ============================================================= */

.dlng { margin-bottom: var(--gap, 16px); }

.dlng .dlng-box { overflow: hidden; }

/* ---------- 标题栏 ---------- */

/* 本插件给 display 赋过值的元素会盖掉浏览器默认的 [hidden]{display:none}，
   这里统一兜一道，否则未读角标会以一个空药丸的形态露在标题旁边 */
.dlng [hidden] { display: none !important; }

/* 图标盒子。宽高对齐模板分类图标 dl_get_sort_icon_html() 的 16px，
   间距取 4px（分类图标是 6px）—— emoji 墨迹普遍比字符盒窄，
   同样的盒子几何下目视会更松，扣掉 2px 才和「开源解码」看齐。
   定宽盒还保证换任何 emoji（宽如 🧭、窄如 ❗）标题起点都不移位。
   要微调间距只需改 --dlng-ico-gap。 */
.dlng .dlng-head .dlng-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    margin-right: var(--dlng-ico-gap, 4px);
    font-size: 15px;
    line-height: 1;
    font-weight: normal;
}

.dlng .dlng-unread {
    display: inline-flex;
    align-items: center;
    height: 18px;
    padding: 0 8px;
    margin-left: 4px;
    border-radius: 9px;
    background: var(--danger-bg, #fdeced);
    color: var(--danger, #e5484d);
    font-size: 11px;
    font-weight: normal;
    line-height: 1;
    vertical-align: middle;
    position: relative;
    top: -1px;
}

/* ---------- 汇总条 ---------- */
.dlng .dlng-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 8px 12px;
    margin-bottom: 12px;
    border-radius: calc(var(--dlng-radius, 12px) - 4px);
    background: var(--primary-bg, #edf2fa);
    font-size: 13px;
    color: var(--text-mid, #525c6f);
}

.dlng .dlng-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--danger, #e5484d);
    flex-shrink: 0;
    box-shadow: 0 0 0 0 rgba(229, 72, 77, .55);
    animation: dlng-pulse 2s infinite;
}

@keyframes dlng-pulse {
    70%  { box-shadow: 0 0 0 7px rgba(229, 72, 77, 0); }
    100% { box-shadow: 0 0 0 0 rgba(229, 72, 77, 0); }
}

.dlng .dlng-bar b { color: var(--dlng-accent); font-weight: 600; margin: 0 1px; }
.dlng .dlng-sep { opacity: .45; }
.dlng .dlng-bar-s { color: var(--text-light, #8b94a7); }

/* ---------- 标签栏 ---------- */
.dlng .dlng-tabs {
    position: relative;
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border-light, #edf0f5);
}

.dlng .dlng-tab {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: 14px;
    color: var(--text-mid, #525c6f);
    padding: 6px 12px 10px;
    cursor: pointer;
    position: relative;
    transition: color .18s;
    white-space: nowrap;
}

.dlng .dlng-tab:hover { color: var(--dlng-accent); }

.dlng .dlng-tab.on {
    color: var(--dlng-accent);
    font-weight: 600;
}

.dlng .dlng-tab.on::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: -1px;
    height: 2px;
    border-radius: 2px;
    background: var(--dlng-accent);
}

/* ---------- 面板通用 ---------- */
.dlng .dlng-panel[hidden] { display: none; }

.dlng .dlng-tip,
.dlng .dlng-empty {
    grid-column: 1 / -1;
    padding: 10px 12px;
    border-radius: calc(var(--dlng-radius, 12px) - 4px);
    background: var(--bg-light, #f6f8fb);
    color: var(--text-light, #8b94a7);
    font-size: 13px;
}

.dlng .dlng-empty { text-align: center; padding: 26px 12px; }

.dlng .dlng-card { display: block; color: inherit; text-decoration: none; }
.dlng .dlng-card:hover { text-decoration: none; }

/* ---------- 布局：卡片网格 ---------- */
.dlng .dlng-lay-card,
.dlng .dlng-lay-text,
.dlng .dlng-lay-mix {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(var(--dlng-cols-pc, 4), minmax(0, 1fr));
}

.dlng .dlng-lay-card .dlng-card,
.dlng .dlng-lay-mix .dlng-card {
    background: var(--bg-white, #fff);
    border: 1px solid var(--border, #e0e4ed);
    border-radius: var(--dlng-radius, 12px);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.dlng .dlng-thumb {
    display: block;
    position: relative;
    width: 100%;
    padding-top: var(--dlng-pad, 56.25%);
    background: var(--bg-light, #f6f8fb);
    overflow: hidden;
}

.dlng .dlng-thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}

.dlng .dlng-flag {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 2px 7px;
    border-radius: 4px;
    background: var(--danger, #e5484d);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: .3px;
}

.dlng .dlng-top {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 2px 7px;
    border-radius: 4px;
    background: var(--gold, #d4a017);
    color: #fff;
    font-size: 11px;
    line-height: 1.5;
}

.dlng .dlng-cate {
    position: absolute;
    left: 8px;
    bottom: 8px;
    max-width: calc(100% - 16px);
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: 11px;
    line-height: 1.6;
    backdrop-filter: blur(3px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dlng .dlng-info { display: block; padding: 10px 12px 11px; }

.dlng .dlng-t {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-dark, #171e2c);
    transition: color .18s;
    word-break: break-word;
}

.dlng .dlng-card:hover .dlng-t { color: var(--dlng-accent); }

.dlng .dlng-d {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 5px;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--text-light, #8b94a7);
}

.dlng .dlng-m {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-light, #8b94a7);
    font-style: normal;
}

.dlng .dlng-m i { font-style: normal; display: inline-flex; align-items: center; gap: 3px; }

.dlng .dlng-av img {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.dlng .dlng-vw::before { content: "\1F441"; opacity: .65; font-size: 11px; }
.dlng .dlng-cm::before { content: "\1F4AC"; opacity: .65; font-size: 11px; }
.dlng .dlng-dt-today { color: var(--danger, #e5484d); }

.dlng .dlng-ct {
    padding: 1px 6px;
    border-radius: 3px;
    background: var(--primary-bg, #edf2fa);
    color: var(--dlng-accent);
    font-size: 11px;
}

.dlng .dlng-flag-inline,
.dlng .dlng-top-inline {
    display: inline-block;
    padding: 0 5px;
    margin-right: 5px;
    border-radius: 3px;
    font-size: 10.5px;
    font-style: normal;
    line-height: 16px;
    vertical-align: 1px;
    color: #fff;
}

.dlng .dlng-flag-inline { background: var(--danger, #e5484d); }
.dlng .dlng-top-inline  { background: var(--gold, #d4a017); }

/* ---------- 悬停效果 ---------- */
.dlng-hover-lift .dlng-card:hover {
    transform: translateY(-3px);
    border-color: var(--dlng-accent);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .09);
}

.dlng-hover-zoom .dlng-card:hover .dlng-thumb img { transform: scale(1.07); }
.dlng-hover-zoom .dlng-card:hover { border-color: var(--dlng-accent); }

.dlng-hover-glow .dlng-card:hover {
    border-color: var(--dlng-accent);
    box-shadow: 0 0 0 3px var(--primary-bg, #edf2fa);
}

/* ---------- 布局：纯文字 N 宫格 ---------- */
.dlng .dlng-lay-text .dlng-card {
    background: var(--bg-light, #f6f8fb);
    border: 1px solid var(--border-light, #edf0f5);
    border-radius: calc(var(--dlng-radius, 12px) - 3px);
    transition: background .2s, border-color .2s, transform .2s;
}

.dlng .dlng-lay-text .dlng-info { padding: 12px 13px; }
.dlng .dlng-lay-text .dlng-card:hover {
    background: var(--card-hover, #f6f8fc);
    border-color: var(--dlng-accent);
}

/* ---------- 布局：紧凑列表 ---------- */
.dlng .dlng-lay-list {
    display: grid;
    gap: 0 24px;
    grid-template-columns: repeat(var(--dlng-cols-pc, 2), minmax(0, 1fr));
}

.dlng .dlng-lay-list .dlng-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 2px;
    border-bottom: 1px dashed var(--border-row, #f1f3f8);
}

.dlng .dlng-lay-list .dlng-thumb {
    width: 68px;
    padding-top: 0;
    height: 44px;
    flex-shrink: 0;
    border-radius: 6px;
}

.dlng .dlng-lay-list .dlng-info { padding: 0; flex: 1; min-width: 0; }
.dlng .dlng-lay-list .dlng-t { -webkit-line-clamp: 1; }
.dlng .dlng-lay-list .dlng-cate { display: none; }
.dlng .dlng-lay-list .dlng-m { margin-top: 4px; }

/* ---------- 布局：首条大图混排 ---------- */
.dlng .dlng-lay-mix .dlng-big {
    grid-column: span 2;
    grid-row: span 2;
}

.dlng .dlng-lay-mix .dlng-big .dlng-thumb { padding-top: 52%; }
.dlng .dlng-lay-mix .dlng-big .dlng-t { font-size: 16px; font-weight: 600; }

/* ---------- 入场动画 ---------- */
.dlng-anim .dlng-panel.on .dlng-card {
    animation: dlng-in .38s ease both;
}

.dlng-anim .dlng-panel.on .dlng-card:nth-of-type(1)  { animation-delay: .02s }
.dlng-anim .dlng-panel.on .dlng-card:nth-of-type(2)  { animation-delay: .05s }
.dlng-anim .dlng-panel.on .dlng-card:nth-of-type(3)  { animation-delay: .08s }
.dlng-anim .dlng-panel.on .dlng-card:nth-of-type(4)  { animation-delay: .11s }
.dlng-anim .dlng-panel.on .dlng-card:nth-of-type(5)  { animation-delay: .14s }
.dlng-anim .dlng-panel.on .dlng-card:nth-of-type(6)  { animation-delay: .17s }
.dlng-anim .dlng-panel.on .dlng-card:nth-of-type(7)  { animation-delay: .20s }
.dlng-anim .dlng-panel.on .dlng-card:nth-of-type(8)  { animation-delay: .23s }

@keyframes dlng-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .dlng-anim .dlng-panel.on .dlng-card { animation: none; }
    .dlng .dlng-dot { animation: none; }
}

/* ---------- 未读标记（JS 加上的） ---------- */
.dlng .dlng-card.dlng-is-new .dlng-t::after {
    content: "NEW";
    display: inline-block;
    margin-left: 5px;
    padding: 0 4px;
    border-radius: 3px;
    background: var(--danger, #e5484d);
    color: #fff;
    font-size: 10px;
    line-height: 15px;
    vertical-align: 2px;
    font-weight: 600;
}

/* ---------- 新文章浮条 ---------- */
.dlng-toast {
    position: fixed;
    left: 50%;
    bottom: 26px;
    transform: translateX(-50%) translateY(16px);
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 999px;
    background: var(--dlng-accent, #2e5299);
    color: #fff;
    font-size: 13px;
    box-shadow: 0 8px 26px rgba(0, 0, 0, .22);
    cursor: pointer;
    opacity: 0;
    transition: opacity .28s, transform .28s;
}

.dlng-toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* =============================================================
 *  平板
 * ============================================================= */
@media (max-width: 1024px) and (min-width: 769px) {
    .dlng .dlng-lay-card,
    .dlng .dlng-lay-text,
    .dlng .dlng-lay-mix {
        grid-template-columns: repeat(var(--dlng-cols-pad, 3), minmax(0, 1fr));
    }
}

/* =============================================================
 *  移动端（断点与模板其它组件一致：768px）
 * ============================================================= */
@media (max-width: 768px) {
    .dlng .dlng-bar { font-size: 12.5px; padding: 7px 10px; margin-bottom: 10px; }
    .dlng .dlng-tabs { gap: 0; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
    .dlng .dlng-tabs::-webkit-scrollbar { display: none; }
    .dlng .dlng-tab { font-size: 13.5px; padding: 6px 10px 9px; }

    .dlng .dlng-mlay-card,
    .dlng .dlng-mlay-text,
    .dlng .dlng-mlay-mix {
        display: grid;
        gap: 10px;
        grid-template-columns: repeat(var(--dlng-cols-mob, 2), minmax(0, 1fr));
    }

    .dlng .dlng-mlay-list {
        display: block;
    }

    .dlng .dlng-mlay-list .dlng-card {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 9px 0;
        border-bottom: 1px dashed var(--border-row, #f1f3f8);
        background: transparent;
        border-radius: 0;
        box-shadow: none;
    }

    .dlng .dlng-mlay-list .dlng-thumb { width: 64px; height: 42px; padding-top: 0; border-radius: 6px; }
    .dlng .dlng-mlay-list .dlng-info { padding: 0; flex: 1; min-width: 0; }
    .dlng .dlng-mlay-list .dlng-t { -webkit-line-clamp: 2; }

    /* 横向滑动 */
    .dlng .dlng-mlay-scroll {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }

    .dlng .dlng-mlay-scroll::-webkit-scrollbar { display: none; }

    .dlng .dlng-mlay-scroll .dlng-card {
        flex: 0 0 62%;
        scroll-snap-align: start;
        background: var(--bg-white, #fff);
        border: 1px solid var(--border, #e0e4ed);
        border-radius: var(--dlng-radius, 12px);
        overflow: hidden;
    }

    .dlng .dlng-mlay-scroll .dlng-tip,
    .dlng .dlng-mlay-scroll .dlng-empty { flex: 0 0 88%; }

    /* 混排的大卡在移动端不再跨格，避免高度失控 */
    .dlng .dlng-mlay-mix .dlng-big { grid-column: span 2; grid-row: auto; }
    .dlng .dlng-mlay-mix .dlng-big .dlng-thumb { padding-top: var(--dlng-pad, 56.25%); }

    .dlng .dlng-t { font-size: 13.5px; }
    .dlng .dlng-info { padding: 8px 10px 9px; }
    .dlng .dlng-m { gap: 8px; font-size: 11.5px; margin-top: 6px; }
    .dlng .dlng-d { display: none; }
}

/* =============================================================
 *  深色模式微调（模板用 [data-theme="dark"]）
 * ============================================================= */
[data-theme="dark"] .dlng .dlng-cate { background: rgba(0, 0, 0, .62); }
[data-theme="dark"] .dlng .dlng-lay-card .dlng-card,
[data-theme="dark"] .dlng .dlng-lay-mix .dlng-card { box-shadow: none; }
[data-theme="dark"] .dlng-hover-lift .dlng-card:hover { box-shadow: 0 8px 22px rgba(0, 0, 0, .38); }