/* ============================================================
   三角洲查询工具站 — 战术数据终端风格 (Tactical Data Terminal)
   深色玻璃拟态 + 青蓝/紫霓虹光效，贴合"三角洲行动"题材
   ============================================================ */

:root {
    --dta-bg: #0a0e17;
    --dta-bg-2: #0f1626;
    --dta-panel: rgba(255, 255, 255, .04);
    --dta-panel-hover: rgba(255, 255, 255, .07);
    --dta-border: rgba(255, 255, 255, .08);
    --dta-border-strong: rgba(94, 234, 212, .25);
    --dta-cyan: #22d3ee;
    --dta-indigo: #818cf8;
    --dta-violet: #a78bfa;
    --dta-amber: #fbbf24;
    --dta-green: #34d399;
    --dta-red: #f87171;
    --dta-text: #e6ebf5;
    --dta-muted: #8b94ab;
    --dta-font: "Inter", "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --dta-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    --dta-radius: 16px;
}

.delta-body {
    font-family: var(--dta-font);
    color: var(--dta-text);
    background:
        radial-gradient(1200px 600px at 15% -10%, rgba(34, 211, 238, .12), transparent 55%),
        radial-gradient(900px 500px at 100% 0%, rgba(129, 140, 248, .14), transparent 50%),
        radial-gradient(800px 800px at 50% 110%, rgba(167, 139, 250, .10), transparent 55%),
        linear-gradient(180deg, var(--dta-bg) 0%, var(--dta-bg-2) 100%);
    min-height: 100vh;
    background-attachment: fixed;
}

/* 网格底纹，营造数据终端感 */
.delta-body::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 44px 44px;
    pointer-events: none;
    z-index: 0;
}

.delta-body > :not(nav) { position: relative; z-index: 1; }

/* ---------- 顶部导航 ---------- */
.delta-nav {
    background: rgba(10, 14, 23, .72);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid var(--dta-border);
    box-shadow: 0 6px 24px rgba(0, 0, 0, .35);
    position: sticky;
    top: 0;
    z-index: 1030;
}
.delta-nav .navbar-brand {
    color: #fff;
    font-weight: 800;
    letter-spacing: .4px;
    font-size: 1.05rem;
}
.delta-nav .nav-link {
    color: var(--dta-muted);
    font-size: .86rem;
    font-weight: 500;
    border-radius: 10px;
    margin: 0 3px;
    padding: .5rem .8rem;
    transition: all .18s ease;
    position: relative;
}
.delta-nav .nav-link i { color: var(--dta-cyan); opacity: .8; }
.delta-nav .nav-link:hover,
.delta-nav .nav-link.active {
    color: #fff;
    background: rgba(34, 211, 238, .12);
    box-shadow: inset 0 0 0 1px rgba(34, 211, 238, .25);
}
.delta-nav .nav-link:hover i { opacity: 1; }
.delta-nav .navbar-toggler {
    border: 1px solid var(--dta-border-strong);
    background: rgba(255, 255, 255, .12);
    border-radius: 10px;
    padding: .45rem .6rem;
}
.delta-nav .navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(34, 211, 238, .25); }
.delta-nav .navbar-toggler-icon {
    /* 直接用白色三条杠 SVG 替换默认深色图标，夜间清晰可见 */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.95)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    filter: none;
}
.brand-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: linear-gradient(135deg, var(--dta-cyan), var(--dta-violet));
    border-radius: 10px;
    font-weight: 900;
    font-size: 1.05rem;
    color: #061018;
    box-shadow: 0 0 18px rgba(34, 211, 238, .45);
}
.delta-nav .btn-site {
    color: var(--dta-text);
    border: 1px solid var(--dta-border);
    border-radius: 10px;
    font-size: .82rem;
}
.delta-nav .btn-site:hover { border-color: var(--dta-cyan); color: #fff; background: rgba(34,211,238,.1); }

/* ---------- 页面标题区 ---------- */
.page-head { margin-bottom: 1.6rem; }
.page-title {
    font-weight: 800;
    font-size: 1.5rem;
    letter-spacing: -.3px;
    display: flex;
    align-items: center;
    gap: .6rem;
}
.page-title .bi { color: var(--dta-cyan); }
.page-sub { color: var(--dta-muted); font-size: .9rem; max-width: 720px; }

/* ---------- 卡片（通用玻璃拟态） ---------- */
.glass-card {
    background: var(--dta-panel);
    border: 1px solid var(--dta-border);
    border-radius: var(--dta-radius);
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, .28);
    overflow: hidden;
}

/* ---------- Hero ---------- */
.hero {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    padding: 2.4rem;
    background:
        radial-gradient(600px 300px at 90% 20%, rgba(34, 211, 238, .25), transparent 50%),
        radial-gradient(500px 280px at 10% 90%, rgba(167, 139, 250, .22), transparent 50%),
        linear-gradient(125deg, rgba(14, 22, 38, .9) 0%, rgba(30, 41, 70, .85) 60%, rgba(24, 32, 60, .9) 100%);
    border: 1px solid var(--dta-border-strong);
    box-shadow: 0 16px 44px rgba(0, 0, 0, .4), inset 0 0 60px rgba(34, 211, 238, .06);
    margin-bottom: 2rem;
    color: #fff;
}
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 34px 34px;
    opacity: .4;
    pointer-events: none;
}
.hero > * { position: relative; z-index: 1; }
.hero .hero-badge {
    display: inline-block;
    font-size: 1.5rem;
    margin-right: .4rem;
    vertical-align: middle;
    text-shadow: 0 0 20px rgba(34, 211, 238, .6);
}
.hero h1 { font-weight: 900; letter-spacing: -.5px; text-shadow: 0 2px 18px rgba(34,211,238,.3); }
.hero p { color: #c6d4ee; }
.hero .btn-hero {
    border-radius: 12px;
    font-weight: 600;
    font-size: .86rem;
    padding: .55rem 1.1rem;
}
.hero .btn-primary-hero {
    background: linear-gradient(135deg, var(--dta-cyan), var(--dta-violet));
    color: #061018;
    border: none;
    box-shadow: 0 6px 20px rgba(34, 211, 238, .35);
}
.hero .btn-ghost-hero {
    color: #fff;
    border: 1px solid rgba(255,255,255,.3);
    backdrop-filter: blur(4px);
}

/* ---------- 功能主导航卡片 ---------- */
.section-label {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: #fff;
    font-weight: 700;
    letter-spacing: .2px;
    margin: 1.6rem 0 1rem;
    font-size: 1.05rem;
}
.section-label::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--dta-border-strong), transparent);
}
.tool-card {
    background: var(--dta-panel);
    border: 1px solid var(--dta-border);
    border-radius: var(--dta-radius);
    color: var(--dta-text);
    transition: all .22s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
    padding: 1.1rem;
}
.tool-card::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--dta-cyan), transparent 70%);
    opacity: 0;
    transition: opacity .22s;
}
.tool-card:hover {
    transform: translateY(-5px);
    border-color: var(--dta-border-strong);
    background: var(--dta-panel-hover);
    box-shadow: 0 16px 40px rgba(34, 211, 238, .18);
    color: #fff;
}
.tool-card:hover::after { opacity: 1; }
.tool-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    font-size: 1.6rem;
    background: linear-gradient(135deg, rgba(34,211,238,.16), rgba(167,139,250,.16));
    border: 1px solid rgba(34, 211, 238, .2);
    color: var(--dta-cyan);
}
.tool-title { font-weight: 700; margin-top: .8rem; font-size: 1.02rem; }
.tool-desc { font-size: .8rem; color: var(--dta-muted); line-height: 1.5; margin-top: .25rem; }

/* ---------- 信息卡片 ---------- */
.info-card {
    background: var(--dta-panel);
    border: 1px solid var(--dta-border);
    border-radius: var(--dta-radius);
    color: var(--dta-muted);
    font-size: .85rem;
}
.info-card .bi { color: var(--dta-cyan); }

/* ---------- 筛选/表单控件 ---------- */
.filter-form {
    background: var(--dta-panel);
    border: 1px solid var(--dta-border);
    border-radius: var(--dta-radius);
    padding: 1rem;
    backdrop-filter: blur(10px);
}
.delta-body .form-control,
.delta-body .form-select {
    background: rgba(10, 14, 23, .6);
    border: 1px solid var(--dta-border);
    color: var(--dta-text);
    border-radius: 10px;
    font-size: .9rem;
}
.delta-body .form-control:focus,
.delta-body .form-select:focus {
    background: rgba(10, 14, 23, .8);
    border-color: var(--dta-cyan);
    box-shadow: 0 0 0 3px rgba(34, 211, 238, .12);
    color: #fff;
}
.delta-body .form-control::placeholder { color: #5b647a; }
.delta-body .form-label { color: var(--dta-muted); font-size: .8rem; font-weight: 600; }
.delta-body .btn {
    border-radius: 10px;
    font-weight: 600;
    font-size: .86rem;
}
.delta-body .btn-dark {
    background: linear-gradient(135deg, var(--dta-cyan), var(--dta-violet));
    color: #061018;
    border: none;
    box-shadow: 0 4px 16px rgba(34,211,238,.25);
}
.delta-body .btn-dark:hover { filter: brightness(1.1); color: #061018; }
.delta-body .btn-outline-light,
.delta-body .btn-outline-dark {
    border: 1px solid var(--dta-border);
    color: var(--dta-text);
    background: rgba(255,255,255,.02);
}
.delta-body .btn-outline-light:hover,
.delta-body .btn-outline-dark:hover { border-color: var(--dta-cyan); color: #fff; background: rgba(34,211,238,.1); }

/* ---------- 数据卡片 & 表格 ---------- */
.data-card {
    background: var(--dta-panel);
    border: 1px solid var(--dta-border);
    border-radius: var(--dta-radius);
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 34px rgba(0, 0, 0, .28);
    overflow: hidden;
    margin-bottom: 1.5rem;
}
.data-card .card-body { padding: 0; }

.delta-body .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--dta-text);
    --bs-table-color-state: var(--dta-text);
    --bs-table-accent-bg: transparent;
    --bs-table-hover-bg: rgba(34, 211, 238, .06);
    color: var(--dta-text);
    margin-bottom: 0;
}
.delta-body .table > :not(caption) > * > * {
    background-color: transparent;
    border-bottom-color: rgba(255, 255, 255, .06);
    padding: .75rem .9rem;
    vertical-align: middle;
}
.delta-body .table > thead th {
    background: rgba(255, 255, 255, .03);
    color: var(--dta-muted);
    font-size: .76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    white-space: nowrap;
    border-bottom: 1px solid var(--dta-border);
}
.delta-body .table tbody tr { transition: background .15s; cursor: default; }
.delta-body .table tbody tr:hover { background: rgba(34, 211, 238, .05) !important; }
.delta-body .table .text-muted { color: var(--dta-muted) !important; }
.delta-body .table td.fw-semibold,
.delta-body .table td .item-name { color: #fff; font-weight: 600; }

/* 金额/数值等宽显示 */
.mono, .delta-body .table td { font-variant-numeric: tabular-nums; }
.num-up { color: var(--dta-green); font-weight: 600; }
.num-down { color: var(--dta-red); font-weight: 600; }

/* ---------- 状态徽章 ---------- */
.delta-body .badge { border-radius: 8px; font-weight: 600; font-size: .74rem; padding: .4em .65em; }
.delta-body .badge.bg-success { background: rgba(52, 211, 153, .18) !important; color: var(--dta-green); border: 1px solid rgba(52,211,153,.3); }
.delta-body .badge.bg-secondary { background: rgba(255,255,255,.08) !important; color: var(--dta-muted); border: 1px solid rgba(255,255,255,.12); }
.badge-up { background: rgba(52,211,153,.16); color: var(--dta-green); }
.badge-down { background: rgba(248,113,113,.16); color: var(--dta-red); }

/* ---------- 等级标签 ---------- */
.grade {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    font-size: .78rem;
    font-weight: 800;
    color: #061018;
    background: #94a3b8;
    box-shadow: 0 0 0 2px rgba(255,255,255,.06);
}
.grade-6 { background: linear-gradient(135deg, #fb7185, #ef4444); color: #fff; box-shadow: 0 0 12px rgba(239,68,68,.4); }
.grade-5 { background: linear-gradient(135deg, #fb923c, #f97316); color: #fff; }
.grade-4 { background: linear-gradient(135deg, #fbbf24, #f59e0b); }
.grade-3 { background: linear-gradient(135deg, #34d399, #10b981); }
.grade-2 { background: linear-gradient(135deg, #60a5fa, #3b82f6); }
.grade-1 { background: linear-gradient(135deg, #94a3b8, #64748b); }
.grade-0 { background: linear-gradient(135deg, #cbd5e1, #94a3b8); }

/* ---------- 子弹自选包标题与等级标签 ---------- */
.pack-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem;
    color: var(--dta-text);
}
.pack-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 800;
    line-height: 1.6;
    color: #061018;
    background: #94a3b8;
    box-shadow: 0 0 0 2px rgba(255,255,255,.06);
    vertical-align: middle;
}
.pack-badge-6 { background: linear-gradient(135deg, #fb7185, #ef4444); color: #fff; box-shadow: 0 0 12px rgba(239,68,68,.4); }
.pack-badge-5 { background: linear-gradient(135deg, #fb923c, #f97316); color: #fff; }
.pack-badge-4 { background: linear-gradient(135deg, #fbbf24, #f59e0b); }
.pack-badge-3 { background: linear-gradient(135deg, #34d399, #10b981); }
.pack-badge-2 { background: linear-gradient(135deg, #60a5fa, #3b82f6); }
.pack-badge-1 { background: linear-gradient(135deg, #94a3b8, #64748b); }
.pack-badge-0 { background: linear-gradient(135deg, #cbd5e1, #94a3b8); }

/* ---------- 密码卡片 ---------- */
.pwd-card {
    background: var(--dta-panel);
    border: 1px solid var(--dta-border);
    border-radius: var(--dta-radius);
    backdrop-filter: blur(10px);
    transition: all .2s ease;
    box-shadow: 0 8px 24px rgba(0,0,0,.22);
}
.pwd-card:hover { border-color: var(--dta-border-strong); transform: translateY(-3px); box-shadow: 0 14px 34px rgba(34,211,238,.15); }
.pwd-label { color: var(--dta-muted); font-size: .85rem; font-weight: 600; }
.pwd-value {
    font-size: 1.9rem;
    font-weight: 900;
    letter-spacing: 3px;
    font-family: var(--dta-mono);
    background: linear-gradient(135deg, var(--dta-cyan), var(--dta-violet));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 8px rgba(34,211,238,.35));
}
.pwd-date { color: var(--dta-muted); font-size: .78rem; }

/* ---------- 市集卡片 ---------- */
.market-card {
    background: var(--dta-panel);
    border: 1px solid var(--dta-border);
    border-radius: var(--dta-radius);
    backdrop-filter: blur(10px);
    transition: all .2s ease;
}
.market-card:hover { border-color: var(--dta-border-strong); transform: translateY(-3px); background: var(--dta-panel-hover); }
.market-card img { filter: drop-shadow(0 0 8px rgba(34,211,238,.2)); }
.market-card .item-name { color: #fff; font-weight: 600; }

/* ---------- 价格曲线 ---------- */
.chart-wrap {
    position: relative;
    height: 360px;
    background: rgba(10, 14, 23, .5);
    border-radius: 12px;
    padding: 8px;
    border: 1px solid var(--dta-border);
}
.chart-legend .dot { display: inline-block; width: 12px; height: 12px; border-radius: 4px; vertical-align: middle; margin-right: 5px; }
.dot-price { background: var(--dta-cyan); box-shadow: 0 0 8px rgba(34,211,238,.5); }
.dot-max { background: var(--dta-amber); box-shadow: 0 0 8px rgba(251,191,36,.5); }
.dot-min { background: var(--dta-muted); }
.dot-yc { background: var(--dta-green); box-shadow: 0 0 8px rgba(52,211,153,.5); }
.chart-legend span { color: var(--dta-muted); font-size: .82rem; margin-right: 1.2rem; }

/* ---------- 警报/空态 ---------- */
.delta-body .alert { border-radius: 12px; border: 1px solid var(--dta-border); background: var(--dta-panel); color: var(--dta-text); }
.delta-body .alert-warning { border-color: rgba(251,191,36,.3); color: var(--dta-amber); }
.delta-body .alert-secondary { color: var(--dta-muted); }
.delta-body .alert-danger { border-color: rgba(248,113,113,.3); color: var(--dta-red); }
.empty-state { text-align: center; color: var(--dta-muted); padding: 3rem 1rem; }

/* ---------- 细节 ---------- */
.text-glow { text-shadow: 0 0 16px rgba(34,211,238,.5); }
.delta-body a { color: var(--dta-cyan); }
.delta-body a:hover { color: var(--dta-violet); }
.mt-2 .collapse { border-radius: 10px; }

/* ---------- 分类导航芯片 ---------- */
.cat-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .42rem .9rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--dta-border);
    color: var(--dta-muted);
    font-size: .84rem;
    font-weight: 600;
    text-decoration: none;
    transition: all .18s ease;
    white-space: nowrap;
}
.cat-chip:hover {
    color: #fff;
    border-color: var(--dta-border-strong);
    background: rgba(34, 211, 238, .1);
}
.cat-chip.active {
    color: #061018;
    background: linear-gradient(135deg, var(--dta-cyan), var(--dta-violet));
    border-color: transparent;
    box-shadow: 0 4px 16px rgba(34, 211, 238, .3);
}
.cat-count {
    font-size: .72rem;
    font-weight: 700;
    padding: .05rem .42rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    color: inherit;
    opacity: .85;
}
.cat-chip.active .cat-count { background: rgba(6, 16, 24, .25); }

/* ---------- 可排序表头 ---------- */
.sort-th {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: color .15s ease;
}
.sort-th:hover { color: #fff; }
.sort-th .sort-icon {
    font-size: .7rem;
    opacity: .55;
    margin-left: 2px;
    vertical-align: middle;
    transition: opacity .15s ease;
}
.sort-th:hover .sort-icon { opacity: .9; }
.sort-th[data-dir="asc"] .sort-icon,
.sort-th[data-dir="desc"] .sort-icon { opacity: 1; color: var(--dta-cyan); }
.sort-th[data-dir="asc"],
.sort-th[data-dir="desc"] { color: #fff; }

/* ---------- 卡战备条目头(可点击整行折叠) ---------- */
.zb-header {
    cursor: pointer;
    user-select: none;
    transition: background .15s ease;
}
.zb-header:hover { background: rgba(34, 211, 238, .05); }
.zb-header:focus-visible { outline: 2px solid var(--dta-cyan); outline-offset: -2px; }
.zb-toggle .zb-caret { transition: transform .2s ease; }
.zb-toggle { font-size: .85rem; font-weight: 600; }

/* ---------- 物品/图标悬停放大预览 ---------- */
.zoom-thumb {
    cursor: zoom-in;
    transition: transform .12s ease, filter .12s ease;
}
.zoom-thumb:hover { transform: scale(1.08); filter: brightness(1.12); }

#zoomLayer {
    position: fixed;
    z-index: 2000;
    pointer-events: none;
    background: rgba(15, 22, 38, .96);
    border: 1px solid var(--dta-border-strong);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .6), 0 0 0 1px rgba(34, 211, 238, .15);
    padding: 6px;
    opacity: 0;
    transform: scale(.9);
    transition: opacity .1s ease, transform .1s ease;
    backdrop-filter: blur(6px);
}
#zoomLayer.show { opacity: 1; transform: scale(1); }
#zoomLayer img {
    display: block;
    max-width: 220px;
    max-height: 220px;
    object-fit: contain;
    border-radius: 8px;
    background: rgba(255,255,255,.04);
}
#zoomLayer .zoom-label {
    margin-top: 4px;
    padding: 2px 4px;
    color: var(--dta-muted);
    font-size: .72rem;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------- 主题切换按钮 ---------- */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid var(--dta-border);
    background: rgba(255, 255, 255, .04);
    color: var(--dta-text);
    cursor: pointer;
    transition: all .18s ease;
    font-size: 1.1rem;
}
.theme-toggle:hover { border-color: var(--dta-cyan); color: #fff; background: rgba(34, 211, 238, .1); }
.theme-toggle .bi { color: var(--dta-cyan); }
.theme-toggle:focus-visible { outline: 2px solid var(--dta-cyan); outline-offset: 2px; }

/* ---------- 复制按钮 ---------- */
.btn-copy.copied { border-color: var(--dta-green)!important; color: var(--dta-green)!important; background: rgba(52,211,153,.12)!important; }