/* ==========================================================================
   Fork Manager — Console Design System
   深色 · 机构级基建风。近黑冷底 + 电光靛蓝强调色，语义色仅用于涨跌/状态。
   原则：细边框代替投影、密排数据、等宽数字、克制用色。
   ========================================================================== */

:root {
    /* 底板 */
    --bg:          #06070e;
    --panel:       #0b0e17;
    --panel-2:     #10141f;
    --panel-3:     #151a27;
    --hover:       #141a26;

    /* 描边 */
    --border:      #1b2130;
    --border-2:    #2a3346;

    /* 文本 */
    --text:        #f0f4fb;
    --text-2:      #97a3b8;
    --muted:       #616f88;
    --faint:       #3d4a60;

    /* 强调（电光靛蓝 · 工程感） */
    --accent:      #3360f0;
    --accent-hi:   #8aa8ff;
    --accent-dim:  rgba(51, 96, 240, .15);
    --accent-line: rgba(51, 96, 240, .48);

    /* 冷青：只用于刻度、坐标、仪表细节，不参与 UI 语义 */
    --cool:        #35d0ff;
    --cool-dim:    rgba(53, 208, 255, .14);

    /* 语义 */
    --up:          #33b074;
    --up-dim:      rgba(51, 176, 116, .13);
    --down:        #e05c4f;
    --down-dim:    rgba(224, 92, 79, .13);
    --info:        #4d9fd6;
    --info-dim:    rgba(77, 159, 214, .13);
    --warn:        #e8b64c;

    /* 链上元素配色 */
    --chain:       #8ba3bd;
    --hash:        #8f9fb4;

    --radius:      8px;
    --radius-sm:   6px;
    --radius-xs:   4px;

    --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
            "Microsoft YaHei", "Hiragino Sans GB", sans-serif;
    --mono: ui-monospace, "SFMono-Regular", "SF Mono", "JetBrains Mono", Menlo,
            Consolas, "Liberation Mono", monospace;

    --sidebar-w:   228px;
    --topbar-h:    52px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--sans);
    font-size: 13.5px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: var(--text); text-decoration: none; }
a:hover { color: var(--accent-hi); }

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.01em; }

button, input, select, textarea { font-family: inherit; font-size: inherit; }

::selection { background: var(--accent-dim); color: var(--accent-hi); }

/* 滚动条 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #1c2333; border: 3px solid var(--bg); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #2a3346; }

/* ==========================================================================
   布局骨架
   ========================================================================== */

.layout { display: flex; min-height: 100vh; }

.sidebar {
    width: var(--sidebar-w);
    flex: 0 0 var(--sidebar-w);
    background: #090c14;
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    z-index: 20;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    height: var(--topbar-h);
    padding: 0 16px;
    border-bottom: 1px solid var(--border);
    flex: 0 0 auto;
}
.brand .mark, .lp-brand .mark {
    width: 24px; height: 24px;
    border-radius: var(--radius-xs);
    background: var(--accent-dim);
    border: 1px solid var(--accent-line);
    color: var(--accent-hi);
    display: grid; place-items: center;
    flex: 0 0 auto;
}
.brand .mark svg, .lp-brand .mark svg { width: 16px; height: 16px; display: block; }
.brand .name { font-size: 13.5px; font-weight: 650; letter-spacing: -.01em; line-height: 1.15; }
.brand .name small {
    display: block; font-size: 9.5px; font-weight: 600;
    color: var(--muted); letter-spacing: .07em; text-transform: uppercase;
}

.nav { padding: 12px 10px; display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; overflow-y: auto; }
.nav-label {
    font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--faint); padding: 14px 8px 6px;
}
.nav a {
    display: flex; align-items: center; gap: 9px;
    padding: 7px 9px;
    border-radius: var(--radius-sm);
    color: var(--text-2);
    font-size: 13px; font-weight: 500;
    position: relative;
    transition: background .12s ease, color .12s ease;
}
.nav a svg { width: 15px; height: 15px; flex: 0 0 auto; opacity: .85; }
.nav a:hover { background: var(--hover); color: var(--text); }
.nav a.active { background: var(--accent-dim); color: var(--accent-hi); }
.nav a.active svg { opacity: 1; }
.nav a.active::before {
    content: ''; position: absolute; left: -10px; top: 6px; bottom: 6px;
    width: 2px; border-radius: 0 2px 2px 0; background: var(--accent);
}
.nav a .count {
    margin-left: auto; font-family: var(--mono); font-size: 10.5px;
    color: var(--muted); background: var(--panel-2);
    padding: 1px 6px; border-radius: 20px;
}

.sidebar-foot { border-top: 1px solid var(--border); padding: 10px; flex: 0 0 auto; }
.backup-btn { width: 100%; margin-top: 8px; justify-content: flex-start; }
.userbox { display: flex; align-items: center; gap: 9px; padding: 6px; border-radius: var(--radius-sm); }
.userbox:hover { background: var(--hover); }
.avatar {
    width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto;
    background: var(--panel-3); border: 1px solid var(--border-2);
    display: grid; place-items: center;
    font-size: 11px; font-weight: 700; color: var(--text-2); text-transform: uppercase;
}
.userbox .meta { min-width: 0; flex: 1; }
.userbox .meta b { display: block; font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.userbox .meta span { display: block; font-size: 10.5px; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
.icon-btn {
    width: 28px; height: 28px; flex: 0 0 auto;
    display: grid; place-items: center;
    border: 1px solid transparent; border-radius: var(--radius-sm);
    background: transparent; color: var(--muted); cursor: pointer;
    transition: all .12s ease;
}
.icon-btn:hover { background: var(--panel-3); color: var(--text); border-color: var(--border); }
.icon-btn svg { width: 15px; height: 15px; }

.main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.topbar {
    height: var(--topbar-h); flex: 0 0 auto;
    display: flex; align-items: center; gap: 12px;
    padding: 0 20px;
    border-bottom: 1px solid var(--border);
    background: rgba(10, 11, 13, .82);
    backdrop-filter: blur(8px);
    position: sticky; top: 0; z-index: 15;
}
.topbar h1 { font-size: 15px; font-weight: 620; }
.topbar .crumb { font-size: 11px; color: var(--muted); letter-spacing: .05em; text-transform: uppercase; }
.topbar .spacer { flex: 1; }
.topbar select { width: auto; min-width: 168px; }
.topbar .select-sm { min-width: 140px; }

.content { padding: 18px 20px 56px; max-width: 1560px; width: 100%; }

/* ==========================================================================
   面板 / 卡片
   ========================================================================== */

.panel {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.panel-head {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--border);
}
.panel-head h2 { font-size: 12.5px; font-weight: 620; letter-spacing: .01em; }
.panel-head .hint { margin-left: auto; font-size: 11px; color: var(--muted); }
.panel-body { padding: 14px; }
.panel-body.tight { padding: 0; }

.section-head {
    display: flex; align-items: center; gap: 10px;
    margin: 22px 0 10px;
}
.section-head h2 { font-size: 13px; font-weight: 620; }
.section-head .spacer { flex: 1; }
.section-head .eyebrow {
    font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--faint);
}

/* ==========================================================================
   指标
   ========================================================================== */

.metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.metric {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 14px 13px;
    position: relative;
    overflow: hidden;
}
.metric .k {
    display: flex; align-items: center; gap: 6px;
    font-size: 10.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase;
    color: var(--muted); margin-bottom: 8px;
}
.metric .v {
    font-family: var(--mono); font-size: 21px; font-weight: 600; letter-spacing: -.02em;
    font-variant-numeric: tabular-nums; line-height: 1.15;
}
.metric .v small { font-size: 12px; color: var(--muted); font-weight: 500; margin-left: 3px; }
.metric .d { margin-top: 6px; font-size: 11.5px; color: var(--muted); display: flex; align-items: center; gap: 5px; }
.metric.accent .v { color: var(--accent-hi); }

/* 涨跌 */
.delta { display: inline-flex; align-items: center; gap: 3px; font-family: var(--mono); font-size: 11.5px; font-weight: 600; }
.delta.up { color: var(--up); }
.delta.down { color: var(--down); }

/* ==========================================================================
   行情条
   ========================================================================== */

.ticker {
    display: flex; gap: 0; overflow-x: auto; scrollbar-width: none;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 16px;
}
.ticker::-webkit-scrollbar { display: none; }
.tick {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 14px;
    border-right: 1px solid var(--border);
    white-space: nowrap;
    flex: 0 0 auto;
}
.tick:last-child { border-right: 0; }
.tick .sym { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; color: var(--text-2); }
.tick .dot { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; }
.tick .px { font-family: var(--mono); font-size: 12.5px; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   按钮
   ========================================================================== */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 30px; padding: 0 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-2);
    background: var(--panel-2);
    color: var(--text);
    font-size: 12.5px; font-weight: 550;
    cursor: pointer; white-space: nowrap;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.btn:hover { background: var(--panel-3); border-color: #3b465c; }
.btn:active { transform: translateY(.5px); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--accent-dim), 0 0 0 1px var(--accent-line); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn svg { width: 14px; height: 14px; }

.btn-primary { background: var(--accent); border-color: var(--accent); color: #f6f9ff; font-weight: 650; }
.btn-primary:hover { background: #4b74ff; border-color: #4b74ff; }

.btn-ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn-ghost:hover { background: var(--hover); color: var(--text); border-color: transparent; }

.btn-danger { background: transparent; border-color: rgba(224, 92, 79, .35); color: #ef7c71; }
.btn-danger:hover { background: var(--down-dim); border-color: var(--down); }

.btn-sm { height: 26px; padding: 0 9px; font-size: 11.5px; border-radius: var(--radius-xs); }
.btn-sm svg { width: 12px; height: 12px; }
.btn-xs { height: 22px; padding: 0 7px; font-size: 11px; border-radius: var(--radius-xs); }

.btn-group { display: inline-flex; gap: 6px; }
.btn-block { width: 100%; margin-top: 6px; }

/* ==========================================================================
   徽章 / 状态
   ========================================================================== */

.badge {
    display: inline-flex; align-items: center; gap: 5px;
    height: 19px; padding: 0 7px;
    border-radius: var(--radius-xs);
    font-size: 10.5px; font-weight: 650; letter-spacing: .03em;
    background: var(--panel-3); color: var(--text-2);
    border: 1px solid var(--border);
    white-space: nowrap; flex: 0 0 auto;
}
.badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.badge.plain::before { display: none; }
.badge-running { color: var(--up); background: var(--up-dim); border-color: rgba(51,176,116,.3); }
.badge-stopped { color: var(--muted); background: var(--panel-3); }
.badge-disabled { color: var(--down); background: var(--down-dim); border-color: rgba(224,92,79,.3); }
.badge-admin  { color: var(--accent); background: var(--accent-dim); border-color: var(--accent-line); }
.badge-user   { color: var(--info); background: var(--info-dim); border-color: rgba(77,159,214,.3); }
.badge-token  { color: var(--text-2); background: var(--panel-3); }
.badge-xs { height: 15px; padding: 0 5px; font-size: 9px; }

/* ==========================================================================
   表格
   ========================================================================== */

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
thead th {
    text-align: left;
    padding: 8px 14px;
    font-size: 10.5px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase;
    color: var(--muted);
    background: var(--panel-2);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
tbody td {
    padding: 9px 14px;
    border-bottom: 1px solid var(--border);
    font-size: 12.5px; color: var(--text-2);
    vertical-align: middle;
    white-space: nowrap;
}
tbody td.wrap { white-space: normal; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: rgba(255, 255, 255, .015); }
td.right, th.right { text-align: right; }
td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; color: var(--text); }

/* ==========================================================================
   等宽 / 地址 / 哈希
   ========================================================================== */

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.addr { font-family: var(--mono); font-size: 12px; color: var(--chain); letter-spacing: -.01em; }
.hash { font-family: var(--mono); font-size: 12px; color: var(--hash); }
.hash-link { font-family: var(--mono); font-size: 12px; color: var(--info); cursor: pointer; }
.hash-link:hover { color: #74b8e6; text-decoration: underline; text-underline-offset: 2px; }
.trunc { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: bottom; }
.copy-i {
    display: inline-grid; place-items: center;
    width: 18px; height: 18px; margin-left: 4px;
    border-radius: var(--radius-xs); border: 0; background: transparent;
    color: var(--faint); cursor: pointer; vertical-align: middle;
}
.copy-i:hover { color: var(--accent); background: var(--accent-dim); }
.copy-i svg { width: 11px; height: 11px; }

/* ==========================================================================
   表单
   ========================================================================== */

.field { margin-bottom: 13px; }
.field > label {
    display: block; margin-bottom: 5px;
    font-size: 11px; font-weight: 620; letter-spacing: .05em; text-transform: uppercase;
    color: var(--muted);
}
input, select, textarea {
    width: 100%; height: 32px;
    padding: 0 10px;
    background: #090c14;
    border: 1px solid var(--border-2);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 13px;
    outline: none;
    transition: border-color .12s ease, box-shadow .12s ease;
}
textarea { height: auto; padding: 8px 10px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--faint); }
input:focus, select:focus, textarea:focus {
    border-color: var(--accent-line);
    box-shadow: 0 0 0 3px var(--accent-dim);
}
input[readonly] { color: var(--muted); background: var(--panel-2); }
select {
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%236d7480' stroke-width='2.5'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 9px center;
    padding-right: 26px;
}
.hint { font-size: 11px; color: var(--muted); margin-top: 4px; line-height: 1.45; }
.err-text { color: var(--down); font-size: 12px; min-height: 0; margin-top: 8px; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.form-row { display: flex; gap: 8px; align-items: flex-end; }
.form-row .field { margin-bottom: 0; flex: 1; }

/* 分段控件 */
.seg { display: inline-flex; padding: 2px; background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.seg button {
    height: 24px; padding: 0 10px; border: 0; background: transparent; color: var(--muted);
    font-size: 11.5px; font-weight: 600; border-radius: var(--radius-xs); cursor: pointer;
}
.seg button.on { background: var(--panel-3); color: var(--text); }

/* ==========================================================================
   键值列表
   ========================================================================== */

.kv { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 9px 14px; font-size: 12.5px; }
.kv .k { color: var(--muted); font-size: 11.5px; letter-spacing: .02em; padding-top: 1px; }
.kv .v { font-family: var(--mono); font-size: 12px; color: var(--text); word-break: break-all; line-height: 1.5; }
.kv .v a { color: var(--info); }

/* ==========================================================================
   RPC 地址框
   ========================================================================== */

.rpc-box {
    display: flex; align-items: center; gap: 8px;
    background: #090c14;
    border: 1px solid var(--border-2);
    border-radius: var(--radius-sm);
    padding: 0 6px 0 10px;
    height: 32px;
}
.rpc-box .u {
    flex: 1; min-width: 0;
    font-family: var(--mono); font-size: 11.5px; color: var(--chain);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rpc-box .tag {
    font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--faint); flex: 0 0 auto;
}

/* ==========================================================================
   节点卡
   ========================================================================== */

.node-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 12px; }
.node {
    background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
    display: flex; flex-direction: column;
    transition: border-color .12s ease;
}
.node:hover { border-color: var(--border-2); }
.node-top { display: flex; align-items: center; gap: 8px; padding: 12px 14px 10px; }
.node-top .nm { font-size: 13.5px; font-weight: 620; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.node-top .spacer { flex: 1; }
.node-body { padding: 0 14px 12px; }
.node-stats {
    display: grid; grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
    margin-top: 10px;
}
.node-stats div { padding: 8px 10px; border-right: 1px solid var(--border); }
.node-stats div:last-child { border-right: 0; }
.node-stats .k { font-size: 9.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.node-stats .v { font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums; margin-top: 2px; }
.node-foot { display: flex; gap: 6px; padding: 10px 14px; flex-wrap: wrap; }
.node-foot .btn { flex: 0 0 auto; }
.node-trend { margin-top: 10px; }
.node-trend .nt-head { display: flex; align-items: baseline; gap: 6px; margin-bottom: 5px; }
.node-meta { gap: 6px; }
.dot-off { width: 6px; height: 6px; border-radius: 50%; background: #3a4453; flex: 0 0 auto; }

/* 节点多选 */
.ncheck { display: inline-grid; place-items: center; flex: 0 0 auto; cursor: pointer; }
.ncheck input {
    width: 14px; height: 14px; margin: 0; padding: 0;
    accent-color: var(--accent); cursor: pointer;
}

/* 批量操作栏 */
.bulkbar {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 9px 14px; margin-bottom: 12px;
    background: var(--panel);
    border: 1px solid var(--accent-line);
    border-radius: var(--radius);
}
.bulkbar .cnt { font-size: 12.5px; font-weight: 600; color: var(--accent-hi); }
.bulkbar label.ck { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); cursor: pointer; }
.bulkbar label.ck input { width: 14px; height: 14px; margin: 0; accent-color: var(--accent); cursor: pointer; }

/* ==========================================================================
   活动流
   ========================================================================== */

.feed { max-height: 520px; overflow-y: auto; }
.feed-row {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 14px;
    border-bottom: 1px solid var(--border);
    font-size: 12px;
}
.feed-row:last-child { border-bottom: 0; }
.feed-row:hover { background: rgba(255, 255, 255, .015); }
.feed-ico {
    width: 24px; height: 24px; flex: 0 0 auto;
    border-radius: var(--radius-xs);
    display: grid; place-items: center;
    font-size: 9px; font-weight: 800; letter-spacing: .02em;
}
.feed-ico svg { width: 12px; height: 12px; }
.feed-main { min-width: 0; flex: 1; }
.feed-main .l1 { display: flex; align-items: baseline; gap: 6px; }
.feed-main .amt { font-family: var(--mono); font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--text); font-weight: 600; }
.feed-main .sym { font-size: 11px; font-weight: 650; color: var(--text-2); letter-spacing: .03em; }
.feed-main .l2 {
    display: flex; align-items: center; gap: 5px;
    font-family: var(--mono); font-size: 10.5px; color: var(--faint);
    margin-top: 1px;
}
.feed-time { font-size: 10.5px; color: var(--faint); font-family: var(--mono); flex: 0 0 auto; }
.arrow { display: inline-flex; align-items: center; color: var(--faint); }
.arrow svg { width: 11px; height: 11px; }

/* ==========================================================================
   代币条 / 持仓
   ========================================================================== */

.bar { display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: var(--panel-3); }
.bar i { display: block; height: 100%; }

.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; }
.legend div { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-2); }
.legend .sw { width: 8px; height: 8px; border-radius: 2px; flex: 0 0 auto; }
.legend .amt { font-family: var(--mono); color: var(--text); font-variant-numeric: tabular-nums; }

/* 地址簿 */
.acct {
    display: flex; align-items: center; gap: 11px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
}
.acct:last-child { border-bottom: 0; }
.acct:hover { background: rgba(255, 255, 255, .015); }
.acct .who { min-width: 0; flex: 1; }
.acct .who b { display: block; font-size: 12.5px; font-weight: 600; }
.acct .who .ad { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-top: 1px; }
.acct .val { text-align: right; flex: 0 0 auto; }
.acct .val .eth { font-family: var(--mono); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.acct .val .usd { font-size: 10.5px; color: var(--muted); font-family: var(--mono); }
.acct .acts { display: flex; gap: 3px; flex: 0 0 auto; opacity: 0; transition: opacity .12s; }
.acct:hover .acts { opacity: 1; }

.chipline { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 1px 7px 1px 2px; border-radius: 20px;
    background: var(--panel-2); border: 1px solid var(--border);
    font-size: 10.5px; font-family: var(--mono); color: var(--text-2);
}
.chip.zero { opacity: .32; }

/* ==========================================================================
   代币徽标（六边形外框 + 类别内核，颜色取自代币主题色）
   ========================================================================== */

.tmark {
    --tc: #8f9fb4;
    display: inline-grid; place-items: center;
    flex: 0 0 auto; vertical-align: middle;
    line-height: 0;
}
.tmark svg { width: 100%; height: 100%; display: block; overflow: visible; }
.tmark .tm-hex  { stroke: var(--tc); opacity: .32; }
.tmark .tm-core { stroke: var(--tc); }
.tmark .tm-core [fill] { fill: var(--tc); }

/* 行情条 / 列表内的紧凑徽标 */
.tick .tmark { margin-right: 1px; }

/* 代币注册表：徽标 + 符号 / 名称双行 */
.row-token { display: inline-flex; align-items: center; gap: 9px; }
.row-token .tk-txt { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.row-token .tk-txt b { font-size: 12.5px; font-weight: 620; color: var(--text); }
.row-token .tk-txt span { font-size: 10.5px; color: var(--muted); }

/* ==========================================================================
   弹窗
   ========================================================================== */

.modal-mask {
    position: fixed; inset: 0; z-index: 60;
    background: rgba(3, 4, 10, .74);
    backdrop-filter: blur(2px);
    display: none; align-items: flex-start; justify-content: center;
    padding: 8vh 16px 16px;
    overflow-y: auto;
}
.modal-mask.show { display: flex; }
.modal {
    width: 100%; max-width: 460px;
    background: var(--panel);
    border: 1px solid var(--border-2);
    border-radius: 10px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, .55);
    animation: pop .14s ease;
}
@keyframes pop { from { opacity: 0; transform: translateY(-6px) scale(.99); } to { opacity: 1; transform: none; } }
.modal-head { display: flex; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.modal-head h3 { font-size: 13.5px; font-weight: 620; }
.modal-head .x { margin-left: auto; }
.modal-body { padding: 16px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--border); }
.modal.wide { max-width: 620px; }

/* ==========================================================================
   提示 / 空态 / 骨架
   ========================================================================== */

#toast {
    position: fixed; right: 18px; bottom: 18px; z-index: 90;
    display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
.toast {
    display: flex; align-items: center; gap: 9px;
    padding: 9px 13px;
    min-width: 200px; max-width: 380px;
    background: var(--panel-3);
    border: 1px solid var(--border-2);
    border-left: 2px solid var(--accent);
    border-radius: var(--radius-sm);
    box-shadow: 0 8px 26px rgba(0, 0, 0, .5);
    font-size: 12.5px; color: var(--text);
    animation: slideUp .16s ease;
}
.toast.ok { border-left-color: var(--up); }
.toast.err { border-left-color: var(--down); }
@keyframes slideUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.empty { padding: 34px 16px; text-align: center; color: var(--muted); font-size: 12.5px; }
.empty .big { font-size: 13px; color: var(--text-2); margin-bottom: 4px; font-weight: 550; }

.skel { background: linear-gradient(90deg, var(--panel-2) 25%, var(--panel-3) 50%, var(--panel-2) 75%); background-size: 200% 100%; animation: shimmer 1.3s infinite; border-radius: var(--radius-xs); }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

.spin { width: 13px; height: 13px; border: 2px solid var(--border-2); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

.pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--up); position: relative; flex: 0 0 auto; }
.pulse::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 1px solid var(--up); opacity: .5; animation: ping 1.8s ease-out infinite; }
@keyframes ping { from { transform: scale(.6); opacity: .7; } to { transform: scale(1.5); opacity: 0; } }

/* ==========================================================================
   工具类
   ========================================================================== */

.split { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 12px; align-items: start; }
.row { display: flex; align-items: center; gap: 8px; }
.row.wrap { flex-wrap: wrap; }
.spacer { flex: 1; }
.mt-0 { margin-top: 0; } .mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; }
.mb-0 { margin-bottom: 0; } .mb-8 { margin-bottom: 8px; } .mb-12 { margin-bottom: 12px; } .mb-16 { margin-bottom: 16px; }
.muted { color: var(--muted); }
.dim { color: var(--faint); }
.small { font-size: 11.5px; }
.up { color: var(--up); } .down { color: var(--down); }
.nowrap { white-space: nowrap; }
.hidden { display: none !important; }

/* ==========================================================================
   登录页（公开页 · 与落地页同源的「仪器面板」语言）
   左栏品牌陈述 + 右栏登录卡片；网格 / 辉光 / mono 规格行与首页同构。
   ========================================================================== */

.login-page {
    position: relative;
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    padding: 40px 24px;
    background-color: #03040a;
    overflow-x: hidden;
}

/* 底板：细密工程网格 + 顶部单点辉光。不用大面积雾气。 */
.login-page::before {
    content: '';
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(ellipse 60% 38% at 50% -12%, rgba(62, 110, 236, .32), rgba(30, 58, 140, .07) 46%, transparent 72%),
        linear-gradient(to right,  rgba(154, 186, 236, .055) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(154, 186, 236, .055) 1px, transparent 1px);
    background-size: auto, 46px 46px, 46px 46px;
    -webkit-mask-image: radial-gradient(ellipse 92% 80% at 50% 36%, #000 28%, transparent 92%);
    mask-image: radial-gradient(ellipse 92% 80% at 50% 36%, #000 28%, transparent 92%);
}
/* 地平线：卡片背后一线冷光，给深空一个明确光源 */
.login-page::after {
    content: '';
    position: fixed; left: 50%; top: 50%; z-index: 0;
    width: 1180px; height: 420px; margin: -210px 0 0 -590px;
    pointer-events: none;
    background: radial-gradient(ellipse at 50% 50%, rgba(64, 112, 232, .2), rgba(53, 208, 255, .06) 42%, transparent 70%);
    filter: blur(60px);
}

.lg-shell {
    position: relative; z-index: 1;
    width: 100%; max-width: 940px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 396px);
    gap: 56px; align-items: center;
}

/* ---------- 左栏：品牌陈述 ---------- */

.lg-brand { display: flex; align-items: center; gap: 11px; }
.lg-brand .mark {
    width: 30px; height: 30px; border-radius: var(--radius-sm);
    background: var(--accent-dim);
    border: 1px solid var(--accent-line);
    color: var(--accent-hi);
    display: grid; place-items: center; flex: 0 0 auto;
}
.lg-brand .mark svg { width: 19px; height: 19px; display: block; }
.lg-brand .name { font-size: 15px; font-weight: 660; letter-spacing: -.01em; line-height: 1.15; }
.lg-brand .name small {
    display: block; font-size: 9.5px; font-weight: 600; letter-spacing: .08em;
    text-transform: uppercase; color: var(--muted);
}

.lg-aside h2 {
    margin: 30px 0 0;
    font-size: clamp(30px, 3.4vw, 42px);
    font-weight: 700; line-height: 1.14; letter-spacing: -.038em;
}
.lg-aside h2 em { font-style: normal; color: var(--accent-hi); }
.lg-lede {
    margin: 15px 0 0; max-width: 34ch;
    font-size: 13.5px; line-height: 1.72; color: var(--text-2);
}

/* 规格表：mono 标签 + 发丝分隔，与首页技术规格行同构 */
.lg-spec { margin: 30px 0 0; border-top: 1px solid var(--border); }
.lg-spec > div {
    display: flex; align-items: baseline; gap: 14px;
    padding: 9px 0; border-bottom: 1px solid var(--border);
}
.lg-spec dt {
    flex: 0 0 96px;
    font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--muted);
}
.lg-spec dd { margin: 0; font-family: var(--mono); font-size: 12px; color: var(--text-2); }

/* ---------- 右栏：登录卡片 ---------- */

.login-card {
    position: relative;
    width: 100%;
    background: var(--panel);
    border: 1px solid var(--border-2);
    border-radius: 10px;
    padding: 28px 28px 24px;
    box-shadow: 0 26px 70px rgba(0, 0, 0, .58);
}
/* 顶沿一线电光：给卡片一个明确的上边缘，取代四散的投影 */
.login-card::before {
    content: '';
    position: absolute; left: 22px; right: 22px; top: -1px; height: 1px;
    background: linear-gradient(to right, transparent, var(--accent), var(--cool), transparent);
    opacity: .85;
}
.login-card .lg-tag {
    display: flex; align-items: center; gap: 10px; margin-bottom: 18px;
    font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em;
    text-transform: uppercase; color: var(--faint);
}
.login-card .lg-tag::after {
    content: ''; flex: 1; height: 1px;
    background: linear-gradient(to right, var(--border-2), transparent);
}
.login-card h1 { font-size: 17px; font-weight: 640; letter-spacing: -.015em; }
.login-card .sub { font-size: 12px; color: var(--muted); margin: 4px 0 20px; }
.login-foot { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); font-size: 11px; color: var(--faint); display: flex; justify-content: space-between; }

@media (max-width: 900px) {
    .lg-shell { grid-template-columns: minmax(0, 1fr); gap: 32px; max-width: 420px; }
    .lg-aside h2 { margin-top: 22px; font-size: 28px; }
    .lg-spec { display: none; }
    .login-page { padding: 32px 20px; }
}

/* ==========================================================================
   响应式
   ========================================================================== */

@media (max-width: 1180px) {
    .split { grid-template-columns: minmax(0, 1fr); }
    .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
    .sidebar {
        position: fixed; left: 0; top: 0; height: 100vh;
        transform: translateX(-100%);
        transition: transform .18s ease;
        box-shadow: 0 0 40px rgba(0, 0, 0, .6);
    }
    body.nav-open .sidebar { transform: none; }
    body.nav-open::after { content: ''; position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 19; }
    .menu-btn { display: grid !important; }
    .content { padding: 14px 14px 48px; }
    .topbar { padding: 0 14px; }
    .grid-2, .grid-3 { grid-template-columns: 1fr; }
    .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kv { grid-template-columns: 100px minmax(0, 1fr); }
    .node-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 520px) {
    .metrics { grid-template-columns: 1fr; }
    .acct .acts { opacity: 1; }
}

.menu-btn { display: none; }

/* ==========================================================================
   搜索框
   ========================================================================== */

.search-box { position: relative; display: inline-flex; align-items: center; }
.search-box > svg {
    position: absolute; left: 9px; width: 14px; height: 14px;
    color: var(--faint); pointer-events: none;
}
.search-box input { width: 210px; height: 28px; padding-left: 29px; font-size: 12.5px; }

/* ==========================================================================
   分页控件
   ========================================================================== */

.pager {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    padding: 12px 14px; border-top: 1px solid var(--border);
}
.pg-btn {
    min-width: 30px; height: 28px; padding: 0 9px;
    border: 1px solid var(--border-2); background: transparent; color: var(--text-2);
    border-radius: var(--radius-sm); font: inherit; font-size: 12px; cursor: pointer;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.pg-btn:hover:not(:disabled) { background: var(--hover); border-color: var(--muted); color: var(--text); }
.pg-btn.active { background: var(--accent); border-color: var(--accent); color: #f6f9ff; font-weight: 650; }
.pg-btn:disabled { opacity: .38; cursor: default; }
.pg-gap { color: var(--faint); padding: 0 2px; }
.pager-info { margin-left: auto; font-size: 11.5px; color: var(--muted); }

/* ==========================================================================
   趋势柱状图（用量 / 调用量）
   ========================================================================== */

.trend { display: flex; align-items: flex-end; gap: 3px; height: 82px; padding: 4px 0 0; }
.trend .tcol {
    flex: 1; min-width: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: flex-end; gap: 4px; height: 100%;
}
.trend .tbar {
    width: 100%; max-width: 24px; min-height: 2px;
    background: linear-gradient(180deg, var(--accent) 0%, rgba(51, 96, 240, .22) 100%);
    border-radius: 3px 3px 0 0; transition: height .3s ease;
}
.trend .tbar.zero { background: var(--border-2); }
.trend .tlabel { font-size: 9px; color: var(--faint); white-space: nowrap; overflow: hidden; max-width: 100%; }
.trend-empty { font-size: 12px; color: var(--faint); padding: 24px 0; text-align: center; }

/* 迷你变体（节点卡内） */
.trend.mini { height: 34px; gap: 2px; padding-top: 0; }
.trend.mini .tcol { gap: 0; }
.trend.mini .tbar { max-width: none; border-radius: 2px 2px 0 0; }

/* ==========================================================================
   带前缀的输入框（RPC 端点标识）
   ========================================================================== */

.input-prefix { display: flex; align-items: stretch; }
.input-prefix .pfx {
    display: inline-flex; align-items: center;
    padding: 0 10px;
    background: var(--panel-3);
    border: 1px solid var(--border-2); border-right: 0;
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    font-family: var(--mono); font-size: 12px; color: var(--muted);
    white-space: nowrap;
}
.input-prefix input {
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    flex: 1 1 auto; min-width: 0;
}

/* ==========================================================================
   公开落地页 — Cold-Blue Engineering
   域名根路径的品牌首页。
   结构：行情条 → 顶栏 → Hero（实时节点终端 + 网络指标条）→ 特性 → 接入 → 页脚。
   视觉：近黑冷底 + 电光蓝强调 + 精密刻度/坐标细节。
         全部暖色退场，只保留语义色（涨跌/状态）。一切「高科技感」来自
         对比度、字阶与仪表级细节，而不是彩色雾气。
   ========================================================================== */

/* ---------- 落地页专属底板 ----------
   色板已统一到根作用域（近黑冷底 + 电光靛蓝），
   此处只把底板再压深一档，让 .lp-bg 的辉光层更有纵深。 */
.lp-body {
    background-color: #03040a;
}
.lp-body section[id], .lp-body [id="status"] { scroll-margin-top: 84px; }
/* 次级按钮在落地页上改成半透明发丝描边，避免"灰色药丸"的廉价感 */
.lp-body .btn:not(.btn-primary).lp-btn-hero {
    background: rgba(255, 255, 255, .04);
    border-color: rgba(154, 186, 236, .22);
}
.lp-body .btn:not(.btn-primary).lp-btn-hero:hover {
    background: rgba(255, 255, 255, .075);
    border-color: rgba(154, 186, 236, .42);
    color: #fff;
}

/* ---------- 背景装饰层 ---------- */

/* 底板：冷黑 + 顶部一层淡靛蓝辉光，定下「工程图纸」的基调 */
.lp-bg {
    position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
    /* 单一主轴辉光：峰值更高、衰减更快 —— 要的是「聚光灯」不是「雾」。
       大面积低透明度的叠加才是廉价感的来源。 */
    background:
        radial-gradient(ellipse 78% 44% at 50% -14%, rgba(62, 110, 236, .38), rgba(30, 58, 140, .1) 44%, transparent 70%),
        radial-gradient(ellipse 52% 32% at 86% -6%, rgba(53, 208, 255, .1), transparent 64%),
        #03040a;
}

/* 星野：极稀疏的冷色亮点，只提供「尺度」，不抢视线 */
.lp-bg-field {
    position: absolute; inset: 0; opacity: .5;
    background-image:
        radial-gradient(1px 1px at 11% 14%, rgba(222, 236, 255, .6),  transparent),
        radial-gradient(1px 1px at 24% 47%, rgba(222, 236, 255, .34), transparent),
        radial-gradient(1px 1px at 37% 9%,  rgba(222, 236, 255, .48), transparent),
        radial-gradient(1px 1px at 46% 31%, rgba(222, 236, 255, .28), transparent),
        radial-gradient(1px 1px at 58% 6%,  rgba(222, 236, 255, .52), transparent),
        radial-gradient(1px 1px at 67% 24%, rgba(222, 236, 255, .3),  transparent),
        radial-gradient(1px 1px at 79% 12%, rgba(222, 236, 255, .44), transparent),
        radial-gradient(1px 1px at 88% 39%, rgba(222, 236, 255, .32), transparent),
        radial-gradient(1px 1px at 94% 8%,  rgba(222, 236, 255, .5),  transparent),
        radial-gradient(1px 1px at 16% 68%, rgba(222, 236, 255, .24), transparent),
        radial-gradient(1px 1px at 71% 58%, rgba(222, 236, 255, .28), transparent),
        radial-gradient(1px 1px at 33% 82%, rgba(222, 236, 255, .22), transparent),
        radial-gradient(1px 1px at 52% 62%, rgba(222, 236, 255, .24), transparent),
        radial-gradient(1px 1px at 8% 88%,  rgba(222, 236, 255, .2),  transparent),
        radial-gradient(1.4px 1.4px at 6% 33%,  rgba(53, 208, 255, .5),  transparent),
        radial-gradient(1.4px 1.4px at 62% 78%, rgba(138, 168, 255, .5), transparent),
        radial-gradient(1.4px 1.4px at 84% 62%, rgba(53, 208, 255, .38), transparent),
        radial-gradient(1.4px 1.4px at 29% 22%, rgba(138, 168, 255, .42), transparent);
    animation: lp-star 9s ease-in-out infinite alternate;
}
@keyframes lp-star { from { opacity: .3; } to { opacity: .58; } }

/* 光锥：自顶部斜射而下的光束扇面，给深空一个明确「光源」 */
.lp-bg-beam {
    position: absolute; top: -34%; left: 50%; width: 1500px; height: 980px;
    margin-left: -750px;
    background: repeating-conic-gradient(from 202deg at 50% 0%,
        rgba(53, 208, 255, .075) 0deg 2.4deg,
        transparent 2.4deg 8.6deg,
        rgba(80, 122, 238, .07) 8.6deg 10.4deg,
        transparent 10.4deg 17deg);
    -webkit-mask-image: radial-gradient(ellipse 62% 100% at 50% 0%, #000 4%, transparent 70%);
    mask-image: radial-gradient(ellipse 62% 100% at 50% 0%, #000 4%, transparent 70%);
    filter: blur(2px);
    animation: lp-beam 34s ease-in-out infinite alternate;
}
@keyframes lp-beam {
    from { transform: rotate(-4deg) scaleY(.96); opacity: .7; }
    to   { transform: rotate(4deg)  scaleY(1.04); opacity: 1; }
}

/* 极光团：三团缓慢漂移的辉光，冷暖对撞出纵深 */
.lp-bg-aurora { position: absolute; border-radius: 50%; filter: blur(110px); will-change: transform; }
.lp-bg-aurora-a {
    top: -30%; left: 50%; width: 820px; height: 500px; margin-left: -410px;
    background: radial-gradient(circle at 50% 50%, rgba(58, 110, 238, .2), rgba(38, 74, 172, .06) 46%, transparent 72%);
    animation: lp-drift-a 26s ease-in-out infinite alternate;
}
.lp-bg-aurora-b {
    top: 2%; left: -14%; width: 600px; height: 460px;
    background: radial-gradient(circle at 50% 50%, rgba(53, 208, 255, .13), rgba(53, 208, 255, .03) 52%, transparent 74%);
    animation: lp-drift-b 34s ease-in-out infinite alternate;
}
.lp-bg-aurora-c {
    top: 44%; right: -16%; width: 640px; height: 500px;
    background: radial-gradient(circle at 50% 50%, rgba(94, 108, 236, .14), rgba(94, 108, 236, .03) 50%, transparent 74%);
    animation: lp-drift-c 42s ease-in-out infinite alternate;
}
@keyframes lp-drift-a {
    from { transform: translate3d(-7%, 0, 0) scale(1); }
    to   { transform: translate3d(7%, 5%, 0) scale(1.16); }
}
@keyframes lp-drift-b {
    from { transform: translate3d(0, -4%, 0) scale(1.08); }
    to   { transform: translate3d(10%, 7%, 0) scale(1); }
}
@keyframes lp-drift-c {
    from { transform: translate3d(0, 5%, 0) scale(1); }
    to   { transform: translate3d(-9%, -7%, 0) scale(1.14); }
}

/* 顶部「地平线」：地平线之上一层冷蓝辉光，像深空里的一线电光 */
.lp-bg-horizon {
    position: absolute; top: -440px; left: 50%; width: 1700px; height: 760px; margin-left: -850px;
    border-radius: 50%; filter: blur(30px);
    background: radial-gradient(ellipse at 50% 100%, rgba(64, 112, 232, .22), rgba(40, 78, 176, .06) 44%, transparent 72%);
}

/* 透视网格：向观察者推进，制造速度感 */
.lp-bg-grid {
    position: absolute; left: -42%; right: -42%; top: -14%; height: 104%;
    background-image:
        linear-gradient(to right,  rgba(154, 186, 236, .13) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(154, 186, 236, .13) 1px, transparent 1px);
    background-size: 62px 62px;
    transform: perspective(640px) rotateX(65deg);
    transform-origin: 50% 0;
    animation: lp-grid-flow 6s linear infinite;
    -webkit-mask-image: radial-gradient(ellipse 56% 68% at 50% 0, #000 2%, transparent 76%);
    mask-image: radial-gradient(ellipse 56% 68% at 50% 0, #000 2%, transparent 76%);
}
/* 细网格反向慢移：与主网格错位形成摩尔纹，进一步拉出纵深 */
.lp-bg-grid::after {
    content: ''; position: absolute; inset: 0;
    background-image:
        linear-gradient(to right,  rgba(154, 186, 236, .05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(154, 186, 236, .05) 1px, transparent 1px);
    background-size: 15.5px 15.5px;
    animation: lp-grid-flow 13s linear infinite reverse;
}
@keyframes lp-grid-flow { from { background-position: 0 0; } to { background-position: 0 62px; } }

/* CRT 扫描线：整页缓慢下扫的一道亮线 */
.lp-bg-scan {
    position: absolute; left: 0; right: 0; top: 0; height: 2px; opacity: 0;
    background: linear-gradient(to right, transparent, rgba(53, 208, 255, .5), transparent);
    box-shadow: 0 0 22px 3px rgba(53, 208, 255, .16);
    animation: lp-scan 12s cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes lp-scan {
    0%   { transform: translateY(-4px); opacity: 0; }
    9%   { opacity: .75; }
    91%  { opacity: .75; }
    100% { transform: translateY(100vh); opacity: 0; }
}

/* 胶片颗粒：让所有渐变脱离「塑料感」 */
.lp-bg-noise {
    position: absolute; inset: -50%; opacity: .11;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
    background-size: 180px 180px;
    animation: lp-grain 1.1s steps(3) infinite;
}
@keyframes lp-grain {
    0%   { transform: translate3d(0, 0, 0); }
    33%  { transform: translate3d(-1.4%, 1%, 0); }
    66%  { transform: translate3d(1%, -1.4%, 0); }
    100% { transform: translate3d(0, 0, 0); }
}

/* 暗角：把视线压回中央（刻意留浅，避免把氛围层压死） */
.lp-bg-vignette {
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 122% 80% at 50% 26%, transparent 38%, rgba(2, 3, 6, .74) 100%),
        linear-gradient(to bottom, rgba(2, 3, 6, .5) 0%, transparent 15%, transparent 76%, rgba(2, 3, 6, .88) 100%);
}

/* ---------- 两侧数据轨（宽屏） ----------
   贴在视口左右边缘的滚动数据带。作用不是「展示信息」，而是让整个页面
   看起来「正在监控一张真实网络」—— 这是机构级基建站的常用空气。 */
.lp-rail {
    position: fixed; top: 0; bottom: 0; width: 38px; z-index: 1;
    display: none; overflow: hidden; pointer-events: none; opacity: .55;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 74%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 74%, transparent);
}
.lp-rail-l { left: 0; border-right: 1px solid rgba(154, 186, 236, .07); }
.lp-rail-r { right: 0; border-left: 1px solid rgba(154, 186, 236, .07); }
.lp-rail-in {
    display: flex; flex-direction: column;
    font-family: var(--mono); font-size: 9px; letter-spacing: .1em;
    color: rgba(154, 186, 236, .34);
    animation: lp-rail-flow 140s linear infinite;
    will-change: transform;
}
.lp-rail-r .lp-rail-in { animation-direction: reverse; }
.lp-rail-in span { display: block; padding: 8px 0; line-height: 1.35; text-align: center; white-space: nowrap; }
.lp-rail-in span.hi { color: rgba(53, 208, 255, .58); }
@keyframes lp-rail-flow { from { transform: translateY(0); } to { transform: translateY(-50%); } }
/* 仅在内容两侧留有余量时出现，避免窄屏压到正文 */
@media (min-width: 1300px) { .lp-rail { display: block; } }

/* ---------- 轨道环（Hero 签名视觉） ---------- */

.lp-orbit {
    position: absolute; z-index: 0; pointer-events: none;
    top: 46%; left: 50%; width: min(1240px, 138vw); aspect-ratio: 1;
    transform: translate(-50%, -50%);
    opacity: .78;
}
.lp-orbit svg { display: block; width: 100%; height: 100%; }
.lp-orbit-rings, .lp-orbit-nodes {
    transform-box: view-box; transform-origin: 50% 50%;
}
.lp-orbit-rings { animation: lp-orbit-spin 150s linear infinite; }
.lp-orbit-nodes { animation: lp-orbit-spin 54s linear infinite reverse; }
@keyframes lp-orbit-spin { to { transform: rotate(360deg); } }

.o-ring { fill: none; stroke: rgba(154, 186, 236, .3); stroke-width: 1; }
.o-r1 { stroke-dasharray: 2 11; opacity: .6; }
.o-r2 { stroke: rgba(53, 208, 255, .44); }
.o-r3 { stroke-dasharray: 1 7; opacity: .5; }
.o-ticks { fill: none; stroke: rgba(154, 186, 236, .44); stroke-width: 1; stroke-dasharray: 1 16; }
.o-cross { stroke: rgba(154, 186, 236, .24); stroke-width: 1; }
.o-node { fill: var(--accent-hi); }
.o-node.dim { fill: rgba(138, 168, 255, .6); }
.o-node.cool { fill: #35d0ff; }

/* 雷达扫描：一圈缓慢旋转的扇形辉光 */
.lp-orbit-sweep {
    /* 用负外边距居中而非 transform —— 让 rotate 动画独占 transform */
    position: absolute; top: 50%; left: 50%;
    width: 61.2%; aspect-ratio: 1; margin: -30.6% 0 0 -30.6%;
    border-radius: 50%;
    background: conic-gradient(from 0deg,
        rgba(53, 208, 255, .24), rgba(53, 208, 255, .04) 34deg, transparent 62deg, transparent 360deg);
    animation: lp-orbit-spin 8.5s linear infinite;
}

/* ---------- 入场动效 ---------- */

[data-reveal] { opacity: 1; }
html.lp-motion [data-reveal] {
    opacity: 0; transform: translateY(20px);
    transition: opacity .72s cubic-bezier(.22, .61, .36, 1), transform .72s cubic-bezier(.22, .61, .36, 1);
    transition-delay: var(--d, 0ms);
}
html.lp-motion [data-reveal].lp-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    html.lp-motion [data-reveal] { opacity: 1; transform: none; transition: none; }
    .lp-bg-aurora, .lp-bg-grid, .lp-bg-grid::after, .lp-bg-scan, .lp-bg-noise,
    .lp-bg-field, .lp-bg-beam,
    .lp-orbit-rings, .lp-orbit-nodes, .lp-orbit-sweep,
    .lp-ticker-track, .lp-ticker-tag i, .lp-console-scan,
    .lp-pulse, .lp-dot, .lp-h1-top, .lp-live, .lp-chart-bars i,
    .lp-rail-in { animation: none !important; }
    .lp-orbit { opacity: .34; }
    .lp-rail { opacity: .34; }
}

/* ---------- 行情滚动条 ---------- */

.lp-ticker {
    position: relative; z-index: 30;
    display: flex; align-items: stretch; height: 34px;
    background: linear-gradient(180deg, #0a0b0f, #07080b);
    border-bottom: 1px solid var(--border);
}
.lp-ticker::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none;
    background: linear-gradient(to right, transparent, rgba(51, 96, 240, .3) 30%, rgba(51, 96, 240, .3) 70%, transparent);
}
.lp-ticker-tag {
    display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
    padding: 0 13px;
    border-right: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(51, 96, 240, .16), rgba(51, 96, 240, .04));
    font-family: var(--mono); font-size: 10px; font-weight: 700;
    letter-spacing: .16em; color: var(--accent-hi);
}
.lp-ticker-tag i {
    width: 5px; height: 5px; border-radius: 50%; background: var(--cool);
    box-shadow: 0 0 8px 1px rgba(53, 208, 255, .7);
    animation: lp-pulse 2.2s ease-out infinite;
}
.lp-ticker-view { position: relative; flex: 1 1 auto; overflow: hidden; }
.lp-ticker-view::before, .lp-ticker-view::after {
    content: ''; position: absolute; top: 0; bottom: 0; width: 90px; z-index: 2; pointer-events: none;
}
.lp-ticker-view::before { left: 0; background: linear-gradient(to right, #08090c, rgba(8, 9, 12, 0)); }
.lp-ticker-view::after { right: 0; background: linear-gradient(to left, #08090c, rgba(8, 9, 12, 0)); }
.lp-ticker-track {
    display: flex; align-items: center; height: 34px; width: max-content;
    animation: lp-marquee 64s linear infinite;
    will-change: transform;
}
.lp-ticker:hover .lp-ticker-track { animation-play-state: paused; }
@keyframes lp-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.lp-tk {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 0 17px; height: 34px;
    border-right: 1px solid rgba(255, 255, 255, .05);
    font-family: var(--mono); font-size: 11.5px; white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.lp-tk .sym { color: var(--text-2); font-weight: 650; letter-spacing: .06em; }
.lp-tk .px { color: var(--text); }
.lp-tk .ch { font-size: 10.5px; }
.lp-tk .ch.up { color: var(--up); }
.lp-tk .ch.down { color: var(--down); }

/* ---------- 顶栏 ---------- */

.lp-nav {
    position: sticky; top: 0; z-index: 40;
    border-bottom: 1px solid var(--border);
    background: rgba(5, 6, 10, .7);
    backdrop-filter: blur(18px) saturate(150%);
}
/* 顶栏底部一道收窄的电光蓝亮线，缓慢横向巡游 */
.lp-nav::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
    background: linear-gradient(to right, transparent, rgba(94, 140, 255, .6) 22%, rgba(53, 208, 255, .6) 78%, transparent);
    background-size: 220% 100%;
    animation: lp-nav-sweep 9s ease-in-out infinite;
}
@keyframes lp-nav-sweep {
    0%, 100% { background-position: 0% 50%; opacity: .55; }
    50%      { background-position: 100% 50%; opacity: 1; }
}
.lp-nav-in {
    max-width: 1180px; margin: 0 auto; height: 62px;
    padding: 0 24px;
    display: flex; align-items: center; gap: 30px;
}
.lp-brand { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.lp-brand:hover { color: var(--text); }
.lp-brand .mark {
    width: 28px; height: 28px;
    box-shadow: 0 0 0 1px rgba(51, 96, 240, .3), 0 0 26px -5px rgba(51, 96, 240, .9);
}
.lp-brand .mark svg { width: 18px; height: 18px; }
.lp-brand .t {
    font-size: 13.5px; font-weight: 650; letter-spacing: -.01em; line-height: 1.15;
    color: var(--text); white-space: nowrap;
}
.lp-brand .t small {
    display: block; font-size: 9px; font-weight: 600;
    color: var(--muted); letter-spacing: .14em; text-transform: uppercase;
}
.lp-links { display: flex; align-items: center; gap: 24px; }
.lp-links a { position: relative; font-size: 12.5px; color: var(--text-2); font-weight: 500; transition: color .12s ease; }
.lp-links a::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px;
    background: linear-gradient(to right, transparent, var(--accent-hi), transparent);
    transform: scaleX(0); transition: transform .22s cubic-bezier(.22, .61, .36, 1);
}
.lp-links a:hover { color: var(--accent-hi); }
.lp-links a:hover::after { transform: scaleX(1); }

/* 顶栏右侧网络状态胶囊 */
.lp-net-pill {
    display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto;
    height: 26px; padding: 0 11px 0 9px;
    border: 1px solid var(--border); border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .012));
    font-family: var(--mono); font-size: 10.5px; font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase; color: var(--text-2);
    white-space: nowrap;
}
.lp-nav-login { flex: 0 0 auto; }
.lp-nav-login:hover { border-color: var(--accent-line); color: var(--accent-hi); }

/* ---------- Hero ---------- */

.lp-hero { position: relative; padding: 96px 24px 74px; overflow-x: clip; }

/* HUD 取景框：把首屏圈成一块「仪表取景器」——四角标线 + 上下十字定位 */
.lp-hud {
    position: absolute; z-index: 0; pointer-events: none;
    left: 50%; transform: translateX(-50%);
    width: min(1180px, calc(100% - 48px));
    top: 84px; bottom: 168px;
}
.lp-hud-c { position: absolute; width: 19px; height: 19px; border: 0 solid rgba(53, 208, 255, .45); }
.lp-hud-c.tl { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.lp-hud-c.tr { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
.lp-hud-c.bl { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
.lp-hud-c.br { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }
.lp-hud-cross {
    position: absolute; left: 50%; width: 15px; height: 15px; margin-left: -7.5px; opacity: .45;
}
.lp-hud-cross::before, .lp-hud-cross::after {
    content: ''; position: absolute; background: rgba(154, 186, 236, .7);
}
.lp-hud-cross::before { left: 0; right: 0; top: 50%; height: 1px; }
.lp-hud-cross::after  { top: 0; bottom: 0; left: 50%; width: 1px; }
.ch-t { top: -7.5px; }
.ch-b { bottom: -7.5px; }

/* 左右两条精密刻度：把首屏框成一块「仪器面板」，是纯 CSS 的工程语言 */
@media (min-width: 1260px) {
    .lp-hero::before, .lp-hero::after {
        content: ''; position: absolute; top: 168px; bottom: 212px; width: 5px; z-index: 0;
        pointer-events: none; opacity: .42;
        background:
            repeating-linear-gradient(to bottom, rgba(154, 186, 236, .62) 0 1px, transparent 1px 16px),
            repeating-linear-gradient(to bottom, rgba(154, 186, 236, .3) 0 1px, transparent 1px 4px);
        -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
        mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
    }
    .lp-hero::before { left:  calc(50% - 606px); }
    .lp-hero::after  { right: calc(50% - 606px); }
}

/* 刻度尺的数字注记：超宽屏才显示，避免与内容碰撞 */
@media (min-width: 1400px) {
    .lp-hero-in::before, .lp-hero-in::after {
        content: '0000\A 0128\A 0256\A 0384\A 0512\A 0640\A 0768\A 0896\A 1024\A 1152';
        position: absolute; top: 4px; z-index: 0; pointer-events: none;
        white-space: pre; text-align: right;
        font-family: var(--mono); font-size: 8px; line-height: 4.4; letter-spacing: .1em;
        color: rgba(154, 186, 236, .26);
    }
    .lp-hero-in::before { left: -56px; }
    .lp-hero-in::after  { right: -56px; text-align: left; }
}
.lp-hero-in {
    position: relative; z-index: 1;
    max-width: 1180px; margin: 0 auto;
    display: grid; grid-template-columns: minmax(0, 1.16fr) minmax(0, .84fr);
    gap: 48px; align-items: center;
}
.lp-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    height: 27px; padding: 0 13px 0 11px;
    border: 1px solid var(--accent-line); border-radius: 999px;
    background: linear-gradient(180deg, rgba(51, 96, 240, .22), rgba(51, 96, 240, .05));
    box-shadow: 0 0 26px -8px rgba(51, 96, 240, 1), 0 0 0 1px rgba(94, 140, 255, .1) inset;
    font-size: 10px; font-weight: 650; letter-spacing: .13em; text-transform: uppercase;
    color: var(--accent-hi);
    white-space: nowrap;
}
.lp-eyebrow svg { width: 13px; height: 13px; opacity: .9; flex: 0 0 auto; }

.lp-hero h1 {
    position: relative;
    margin: 26px 0 0;
    font-size: clamp(46px, 5.6vw, 80px);
    font-weight: 700; line-height: 1.0; letter-spacing: -.048em;
    text-wrap: balance;
}
.lp-h1-top, .lp-h1-bot { display: block; }
/* 主标题上半行：缓慢横向流动的高光，像金属被扫过（近白高对比，避免"洗白"） */
.lp-h1-top {
    background: linear-gradient(100deg, #ffffff 3%, #ccd7e8 24%, #ffffff 44%, #d6e0ef 68%, #ffffff 88%);
    background-size: 260% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: lp-shimmer 8s ease-in-out infinite;
}
@keyframes lp-shimmer {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}
.lp-h1-bot {
    background: linear-gradient(180deg, #ffffff 2%, #dfe7f4 48%, #a8b5ca 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lp-hero h1 .lp-hl {
    background: linear-gradient(102deg, #7fa4ff 0%, #d8e5ff 32%, #ffffff 50%, #7ba3ff 72%, #4b74ff 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 4px 36px rgba(51, 96, 240, .7));
}
.lp-hero .lead {
    margin: 24px 0 0; max-width: 540px;
    font-size: 14.5px; line-height: 1.82; color: var(--text-2);
}
.lp-cta { display: flex; align-items: center; gap: 11px; margin-top: 32px; flex-wrap: wrap; }

.lp-btn-hero { height: 44px; padding: 0 19px; font-size: 13.5px; border-radius: var(--radius); font-weight: 620; }
.lp-btn-hero svg { width: 16px; height: 16px; transition: transform .2s cubic-bezier(.22, .61, .36, 1); }
.lp-btn-hero:hover svg { transform: translateX(3px); }
.btn.btn-primary.lp-btn-hero {
    box-shadow: 0 0 0 1px rgba(94, 140, 255, .38), 0 16px 40px -14px rgba(51, 96, 240, .95),
                0 0 60px -24px rgba(51, 96, 240, 1);
}
.btn.btn-primary.lp-btn-hero:hover {
    box-shadow: 0 0 0 1px rgba(94, 140, 255, .6), 0 20px 48px -14px rgba(51, 96, 240, 1),
                0 0 80px -18px rgba(53, 208, 255, .9);
}

/* 兼容工具链 */
.lp-compat { margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--border); }
.lp-compat-label {
    display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .17em;
    text-transform: uppercase; color: var(--faint);
}
.lp-compat-list { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.lp-compat-list span {
    font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .02em;
    color: var(--text-2);
    padding: 4px 9px; border: 1px solid var(--border); border-radius: var(--radius-xs);
    background: rgba(255, 255, 255, .018);
    transition: color .16s ease, border-color .16s ease, background .16s ease, transform .16s ease;
}
.lp-compat-list span:hover {
    color: var(--accent-hi); border-color: var(--accent-line);
    background: var(--accent-dim); transform: translateY(-1px);
}

/* ---------- 实时节点终端 ---------- */

.lp-console {
    position: relative;
    border: 1px solid var(--border-2); border-radius: 12px;
    background: linear-gradient(180deg, #0b0e16, #070910);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .016) inset,
        0 34px 76px -30px rgba(0, 0, 0, .95),
        0 0 100px -52px rgba(51, 96, 240, 1);
    overflow: hidden;
}
/* 终端顶部一道电光蓝描边，强化「正在运行」的暗示 */
.lp-console::before {
    content: ''; position: absolute; top: 0; left: 16%; right: 16%; height: 1px; z-index: 2;
    background: linear-gradient(to right, transparent, rgba(94, 140, 255, .9), transparent);
}
/* 四角 L 形标线：仪表盘取景框 */
.lp-corner {
    position: absolute; width: 14px; height: 14px; z-index: 3; pointer-events: none;
    border: 0 solid rgba(53, 208, 255, .42);
}
.lp-corner-tl { top: 7px; left: 7px; border-top-width: 1px; border-left-width: 1px; border-top-left-radius: 3px; }
.lp-corner-tr { top: 7px; right: 7px; border-top-width: 1px; border-right-width: 1px; border-top-right-radius: 3px; }
.lp-corner-bl { bottom: 7px; left: 7px; border-bottom-width: 1px; border-left-width: 1px; border-bottom-left-radius: 3px; }
.lp-corner-br { bottom: 7px; right: 7px; border-bottom-width: 1px; border-right-width: 1px; border-bottom-right-radius: 3px; }
/* 终端内缓慢下扫的一道亮带：屏幕「正在刷新」的呼吸感 */
.lp-console-scan {
    position: absolute; left: 0; right: 0; top: 40px; height: 96px; z-index: 1; pointer-events: none;
    background: linear-gradient(to bottom, transparent, rgba(51, 96, 240, .06) 58%, rgba(53, 208, 255, .13) 96%, transparent);
    animation: lp-console-sweep 7s cubic-bezier(.5, 0, .5, 1) infinite;
}
@keyframes lp-console-sweep {
    0%   { transform: translateY(-96px); opacity: 0; }
    16%  { opacity: 1; }
    84%  { opacity: 1; }
    100% { transform: translateY(330px); opacity: 0; }
}
.lp-console-bar {
    position: relative; z-index: 2;
    display: flex; align-items: center; gap: 11px;
    height: 40px; padding: 0 14px;
    border-bottom: 1px solid var(--border);
    background: rgba(255, 255, 255, .022);
}
.lp-win { display: inline-flex; gap: 6px; flex: 0 0 auto; }
.lp-win i { width: 9px; height: 9px; border-radius: 50%; background: #262b32; }
.lp-win i:nth-child(1) { background: #383d45; }
.lp-console-title {
    flex: 1 1 auto; min-width: 0;
    font-family: var(--mono); font-size: 11px; color: var(--muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lp-console-body { position: relative; z-index: 2; padding: 15px 16px 12px; }
.lp-console-line { display: flex; align-items: baseline; gap: 8px; font-family: var(--mono); font-size: 11.5px; }
.lp-prompt { color: var(--accent); font-weight: 700; flex: 0 0 auto; }
.lp-cmd { color: var(--text-2); overflow-wrap: anywhere; }

/* 最新区块流 */
.lp-stream { list-style: none; margin: 12px 0 0; padding: 0; min-height: 172px; }
.lp-blk {
    display: grid; grid-template-columns: 1.4fr .62fr 1fr .72fr;
    gap: 10px; align-items: baseline;
    padding: 8px 0;
    border-bottom: 1px dashed rgba(255, 255, 255, .055);
    font-family: var(--mono); font-size: 11px;
    font-variant-numeric: tabular-nums;
    animation: lp-row-in .34s ease both;
}
.lp-blk:last-child { border-bottom: 0; }
.lp-blk .n { color: var(--accent-hi); font-weight: 600; }
.lp-blk .txs { color: var(--text-2); }
.lp-blk .gas { color: var(--muted); font-size: 10.5px; }
.lp-blk .t { color: var(--faint); text-align: right; }
.lp-stream-empty {
    display: grid; place-items: center; height: 172px;
    font-family: var(--mono); font-size: 11px; color: var(--faint);
}
@keyframes lp-row-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* 区块活动图：滚动窗口内的出块节奏（柱高 = gas 用量占比） */
.lp-chart {
    margin-top: 13px; padding: 10px 11px 9px;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: linear-gradient(180deg, rgba(0, 0, 0, .34), rgba(0, 0, 0, .16));
}
.lp-chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.lp-chart-label {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 9.5px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
    color: var(--muted);
}
/* 图表左上角的 LIVE 呼吸点 */
.lp-live {
    width: 5px; height: 5px; border-radius: 50%; flex: 0 0 auto;
    background: var(--cool);
    animation: lp-live 1.8s ease-out infinite;
}
@keyframes lp-live {
    0%   { box-shadow: 0 0 0 0 rgba(53, 208, 255, .6); }
    70%  { box-shadow: 0 0 0 6px rgba(53, 208, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(53, 208, 255, 0); }
}
.lp-chart-meta {
    font-family: var(--mono); font-size: 10px; letter-spacing: .04em; color: var(--faint);
    font-variant-numeric: tabular-nums;
}
.lp-chart-plot { position: relative; margin-top: 9px; height: 46px; }
.lp-chart-grid {
    position: absolute; inset: 0;
    background-image: linear-gradient(to bottom, rgba(150, 180, 230, .09) 1px, transparent 1px);
    background-size: 100% 11.5px;
}
/* 基线：柱子的落点，让图表有「地面」 */
.lp-chart-plot::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
    background: linear-gradient(to right, rgba(53, 208, 255, .5), rgba(154, 186, 236, .2));
}
.lp-chart-bars { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 2px; }
.lp-chart-bars i {
    flex: 1 1 0; min-width: 0;
    border-radius: 1.5px 1.5px 0 0;
    background: linear-gradient(to top, rgba(51, 96, 240, .3), rgba(94, 140, 255, .95));
    transform-origin: bottom;
    animation: lp-bar-grow .5s cubic-bezier(.22, .61, .36, 1) both;
}
.lp-chart-bars i.hi {
    background: linear-gradient(to top, rgba(53, 208, 255, .5), #bfefff);
    box-shadow: 0 0 10px -1px rgba(53, 208, 255, .8);
}
@keyframes lp-bar-grow { from { transform: scaleY(.05); opacity: .15; } to { transform: none; opacity: 1; } }

/* 图表坐标注记 */
.lp-chart-axis {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin-top: 7px;
    font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--faint);
}
.lp-chart-axis span:nth-child(2) { color: rgba(109, 116, 128, .68); letter-spacing: .06em; }

.lp-console-foot {
    position: relative; z-index: 2;
    display: flex; align-items: center; gap: 9px;
    padding: 11px 16px;
    border-top: 1px solid var(--border);
    background: rgba(0, 0, 0, .3);
    font-family: var(--mono); font-size: 10.5px; color: var(--faint); letter-spacing: .04em;
}
.lp-console-net { margin-left: auto; color: var(--muted); }

/* 状态指示灯 */
.lp-pulse, .lp-dot {
    width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto;
    background: var(--muted);
}
.lp-pulse.ok, .lp-dot.ok { background: var(--up); animation: lp-pulse 2.2s ease-out infinite; }
.lp-pulse.warn, .lp-dot.warn { background: var(--warn); animation: lp-pulse-warn 2.2s ease-out infinite; }
.lp-pulse.off, .lp-dot.off { background: var(--down); }
@keyframes lp-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(51, 176, 116, .45); }
    70%  { box-shadow: 0 0 0 7px rgba(51, 176, 116, 0); }
    100% { box-shadow: 0 0 0 0 rgba(51, 176, 116, 0); }
}
@keyframes lp-pulse-warn {
    0%   { box-shadow: 0 0 0 0 rgba(217, 164, 65, .42); }
    70%  { box-shadow: 0 0 0 7px rgba(217, 164, 65, 0); }
    100% { box-shadow: 0 0 0 0 rgba(217, 164, 65, 0); }
}

.lp-badge { font-family: var(--mono); letter-spacing: .08em; }
.lp-badge.ok { color: var(--up); }
.lp-badge.warn { color: var(--warn); }
.lp-badge.off { color: var(--down); }

/* ---------- 网络指标条 ---------- */

.lp-strip {
    position: relative;
    max-width: 1180px; margin: 62px auto 0; min-height: 82px;
    border: 1px solid var(--border); border-radius: 12px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .028), rgba(255, 255, 255, .006));
    overflow: hidden;
}
/* 指标条顶部中央一道冷蓝发丝线 */
.lp-strip::before {
    content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px; z-index: 2;
    background: linear-gradient(to right, transparent, rgba(94, 140, 255, .5), transparent);
}
.lp-strip-in { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.lp-stat {
    position: relative;
    padding: 18px 20px 19px;
    border-right: 1px solid var(--border);
    min-width: 0;
    transition: background .16s ease;
}
.lp-stat:hover { background: rgba(255, 255, 255, .022); }
.lp-stat:last-child { border-right: 0; }
.lp-stat .k {
    display: flex; align-items: center; gap: 6px;
    font-size: 9.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
    color: var(--muted);
}
.lp-stat .k svg { width: 12px; height: 12px; flex: 0 0 auto; opacity: .75; }
.lp-stat .v {
    margin-top: 9px;
    font-family: var(--mono); font-size: 21px; font-weight: 600;
    letter-spacing: -.025em; font-variant-numeric: tabular-nums; line-height: 1.15;
    color: var(--text); white-space: nowrap;
}
.lp-stat .v small { font-size: 11px; font-weight: 500; color: var(--muted); margin-left: 3px; letter-spacing: 0; }

/* ---------- 通用分节 ---------- */

.lp-section { padding: 80px 24px; border-top: 1px solid var(--border); }
.lp-section-alt { background: rgba(255, 255, 255, .012); }
.lp-section-in { max-width: 1180px; margin: 0 auto; }
.lp-head { max-width: 640px; }

/* 分节标尺：编号 + 分节名 + 贯穿到右缘的刻度线，工程文档的秩序感 */
.lp-rule {
    display: flex; align-items: center; gap: 14px;
    margin-bottom: 30px;
    font-family: var(--mono); line-height: 1;
}
.lp-rule-n {
    flex: 0 0 auto;
    font-size: 10px; font-weight: 700; letter-spacing: .08em;
    color: var(--cool);
    padding: 4px 7px; border: 1px solid rgba(53, 208, 255, .28); border-radius: 3px;
    background: rgba(53, 208, 255, .07);
}
.lp-rule-t {
    flex: 0 0 auto; white-space: nowrap;
    font-size: 10px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
    color: var(--text-2);
}
.lp-rule-t2 { color: var(--faint); letter-spacing: .14em; }
.lp-rule-line {
    position: relative; flex: 1 1 auto; min-width: 30px; height: 1px;
    background: linear-gradient(to right,
        rgba(154, 186, 236, .3), rgba(154, 186, 236, .1) 62%, transparent);
}
/* 刻度线上的细齿：让它读起来像「尺」而不是「分割线」 */
.lp-rule-line::before {
    content: ''; position: absolute; inset: 0;
    background: repeating-linear-gradient(to right,
        rgba(154, 186, 236, .3) 0 1px, transparent 1px 9px);
    -webkit-mask-image: linear-gradient(to right, #000, transparent 70%);
    mask-image: linear-gradient(to right, #000, transparent 70%);
}
.lp-rule-line::after {
    content: ''; position: absolute; left: 0; top: -3px; width: 1px; height: 7px;
    background: rgba(53, 208, 255, .7);
}
.lp-head h2, .lp-quick-copy h2 {
    margin: 0; font-size: clamp(27px, 2.6vw, 34px); font-weight: 680;
    letter-spacing: -.032em; line-height: 1.18;
}
.lp-head p { margin: 14px 0 0; font-size: 14px; color: var(--text-2); line-height: 1.75; }

/* ---------- 特性网格 ---------- */

.lp-features {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px; margin-top: 42px;
}
.lp-card {
    position: relative;
    /* 双层渐变：内层填充 + 外层充当「发丝」渐变边 */
    background:
        linear-gradient(var(--panel), var(--panel)) padding-box,
        linear-gradient(155deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .015) 40%, rgba(51, 96, 240, .3)) border-box;
    border: 1px solid transparent;
    border-radius: var(--radius);
    padding: 22px 20px 23px;
    overflow: hidden;
    transition: transform .18s cubic-bezier(.22, .61, .36, 1), background .18s ease, box-shadow .18s ease;
}
/* 悬停时卡片顶部浮出电光蓝细线 */
.lp-card::before {
    content: ''; position: absolute; top: 0; left: 20px; right: 20px; height: 1px; z-index: 2;
    background: linear-gradient(to right, transparent, var(--accent-line), transparent);
    opacity: 0; transition: opacity .16s ease;
}
/* 光标聚光：跟随指针的一团冷蓝辉光 */
.lp-card::after {
    content: ''; position: absolute; inset: 0; z-index: 0; opacity: 0; pointer-events: none;
    background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%), rgba(51, 96, 240, .2), transparent 70%);
    transition: opacity .24s ease;
}
.lp-card > * { position: relative; z-index: 1; }
.lp-card:hover {
    background:
        linear-gradient(var(--panel-2), var(--panel-2)) padding-box,
        linear-gradient(155deg, rgba(94, 140, 255, .55), rgba(51, 96, 240, .18) 46%, rgba(53, 208, 255, .45)) border-box;
    transform: translateY(-3px);
    box-shadow: 0 26px 50px -32px rgba(0, 0, 0, .95), 0 0 60px -38px rgba(51, 96, 240, 1);
}
.lp-card:hover::before { opacity: 1; }
.lp-card:hover::after { opacity: 1; }
.lp-card-n {
    position: absolute; top: 20px; right: 20px;
    font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .08em;
    color: var(--faint); opacity: .7;
}
.lp-ic {
    width: 34px; height: 34px; border-radius: var(--radius-xs);
    background: var(--accent-dim); border: 1px solid var(--accent-line);
    color: var(--accent-hi);
    display: grid; place-items: center;
}
.lp-ic svg { width: 17px; height: 17px; display: block; }
.lp-card h3 { margin: 16px 0 0; font-size: 14px; font-weight: 620; letter-spacing: -.01em; }
.lp-card p { margin: 9px 0 0; font-size: 12.5px; line-height: 1.74; color: var(--text-2); }

/* 卡片底部技术规格行：让卡片读起来像「模块数据表」而不是营销卡 */
.lp-card { display: flex; flex-direction: column; }
.lp-card-spec {
    margin: auto 0 0; padding-top: 12px;
    border-top: 1px dashed rgba(154, 186, 236, .13);
    font-family: var(--mono); font-size: 10px; font-weight: 500;
    letter-spacing: .045em; line-height: 1.55;
    color: var(--faint);
    transition: color .18s ease, border-color .18s ease;
}
/* 行首注释符：把规格行锚定在「代码/文档」语境里 */
.lp-card-spec::before { content: '//\00a0'; color: rgba(53, 208, 255, .6); }
.lp-card:hover .lp-card-spec { color: var(--text-2); border-top-color: rgba(94, 140, 255, .32); }

/* ---------- 接入指南 ---------- */

.lp-quick { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 52px; align-items: center; }
.lp-steps { list-style: none; margin: 30px 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.lp-steps li { display: flex; gap: 15px; }
.lp-steps .n {
    font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--accent);
    border: 1px solid var(--accent-line); background: var(--accent-dim);
    border-radius: var(--radius-xs); padding: 3px 7px; height: fit-content; flex: 0 0 auto;
}
.lp-steps b { display: block; font-size: 13px; font-weight: 620; }
.lp-steps p { margin: 5px 0 0; font-size: 12.5px; color: var(--text-2); line-height: 1.68; }
.lp-steps code {
    font-family: var(--mono); font-size: 11.5px; color: var(--accent-hi);
    background: var(--accent-dim); border-radius: var(--radius-xs); padding: 1px 5px;
}

/* 代码终端块 */
.lp-term {
    position: relative;
    border: 1px solid var(--border-2); border-radius: 12px;
    background: #080a11; overflow: hidden;
    box-shadow: 0 32px 70px -34px rgba(0, 0, 0, .92), 0 0 80px -48px rgba(51, 96, 240, .95);
}
.lp-term::before {
    content: ''; position: absolute; top: 0; left: 16%; right: 16%; height: 1px; z-index: 2;
    background: linear-gradient(to right, transparent, rgba(94, 140, 255, .8), transparent);
}
.lp-term-bar {
    display: flex; align-items: center; gap: 11px;
    height: 40px; padding: 0 15px;
    border-bottom: 1px solid var(--border);
    background: rgba(255, 255, 255, .022);
}
.lp-term-title { font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: .04em; }
.lp-term-body {
    margin: 0; padding: 18px 20px 20px;
    overflow-x: auto; white-space: pre;
    font-family: var(--mono); font-size: 12px; line-height: 1.8;
    color: var(--text-2);
}
.lp-term-body code { font-family: inherit; }
.c-dim { color: var(--faint); }
.c-key { color: #8fb2e0; }
.c-str { color: #5fd0b0; }
.c-url { color: var(--accent-hi); }
.c-num { color: #9d8fe8; }

/* 钱包参数表 */
.lp-params {
    margin-top: 44px;
    border: 1px solid var(--border); border-radius: 12px;
    background: var(--panel);
    overflow: hidden;
}
.lp-param {
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
    transition: background .16s ease;
}
.lp-param:hover { background: rgba(255, 255, 255, .016); }
.lp-param:last-child { border-bottom: 0; }
.lp-param .k {
    font-size: 10.5px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase;
    color: var(--muted); flex: 0 0 auto;
}
.lp-param .v {
    font-size: 13px; color: var(--text); min-width: 0;
    overflow-wrap: anywhere; text-align: right;
}
.lp-param .v.mono { font-family: var(--mono); font-size: 12.5px; }
.lp-param .tok { color: var(--accent-hi); }

/* ---------- 页脚 ---------- */

.lp-foot { position: relative; border-top: 1px solid var(--border); padding: 30px 24px 0; overflow: hidden; }
.lp-foot-in {
    max-width: 1180px; margin: 0 auto; position: relative; z-index: 2;
    display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
}
.lp-brand-sm .mark { width: 24px; height: 24px; box-shadow: none; }
.lp-brand-sm .t { font-size: 12.5px; }
.lp-foot-links { display: flex; gap: 18px; flex-wrap: wrap; }
.lp-foot-links a { font-size: 12px; color: var(--muted); }
.lp-foot-links a:hover { color: var(--accent-hi); }
.lp-copy { font-size: 11px; color: var(--faint); }

/* 页脚水印大字 */
.lp-wordmark {
    max-width: 1180px; margin: 28px auto -20px;
    font-size: clamp(46px, 13vw, 178px); font-weight: 700; line-height: .86;
    letter-spacing: -.04em; text-align: center; white-space: nowrap;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, .055);
    -webkit-mask-image: linear-gradient(to bottom, #000 18%, transparent 94%);
    mask-image: linear-gradient(to bottom, #000 18%, transparent 94%);
    user-select: none;
}

/* ---------- 落地页响应式 ---------- */

@media (max-width: 1000px) {
    .lp-hero-in, .lp-quick { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .lp-hero { padding-top: 54px; }
    .lp-hero h1 { font-size: clamp(40px, 6.6vw, 58px); }
    .lp-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lp-strip-in { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lp-stat:nth-child(3n) { border-right: 0; }
    .lp-stat:nth-child(-n+3) { border-bottom: 1px solid var(--border); }
    .lp-quick { align-items: start; }
}
@media (max-width: 720px) {
    .lp-links { display: none; }
    .lp-nav-in { gap: 14px; padding: 0 16px; }
    .lp-net-pill { display: none; }
    .lp-hero, .lp-section { padding-left: 16px; padding-right: 16px; }
    .lp-hero h1 { font-size: clamp(30px, 8.6vw, 40px); }
    .lp-features { grid-template-columns: minmax(0, 1fr); }
    .lp-strip { margin-top: 42px; }
    .lp-strip-in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lp-stat:nth-child(3n) { border-right: 1px solid var(--border); }
    .lp-stat:nth-child(-n+3) { border-bottom: 0; }
    .lp-stat:nth-child(2n) { border-right: 0; }
    .lp-stat:nth-child(-n+4) { border-bottom: 1px solid var(--border); }
    .lp-blk { grid-template-columns: 1.3fr .6fr .8fr; }
    .lp-blk .gas { display: none; }
    .lp-foot { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 520px) {
    .lp-strip-in { grid-template-columns: minmax(0, 1fr); }
    .lp-stat { border-right: 0; border-bottom: 1px solid var(--border); }
    .lp-stat:last-child { border-bottom: 0; }
    .lp-param { flex-direction: column; align-items: flex-start; gap: 5px; }
    .lp-param .v { text-align: left; }
}