/* 首页样式（index.php） */
:root{
    --font:"IBM Plex Sans","SF Pro Display","Helvetica Neue","Segoe UI",Roboto,"PingFang SC","HarmonyOS Sans SC","Hiragino Sans GB","Microsoft YaHei UI","Microsoft YaHei",Arial,sans-serif;
    --brand:#e6ac00;
    --brand-2:#ebbc33;
    --brand-3:#f0cd66;
    --brand-soft:rgba(230,172,0,.10);
    --text-1:#09090b;
    --text-2:#71717a;
    --text-3:#a1a1aa;
    --bg:#fff;
    --bg-soft:#f5f5f5;
    --bg-alt:#f8f8f8;
    --line:#efefef;
    --up:#16a34a;
    --down:#e5484d;
    --radius:12px;
    --ease:cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth;scroll-padding-top:76px}

body{
    font-family:var(--font);
    background:var(--bg);
    color:var(--text-1);
    -webkit-font-smoothing:antialiased;
}

a{color:inherit;text-decoration:none}
button,input{font:inherit}

.container{
    width:min(1360px,calc(100% - 48px));
    margin:0 auto;
}

/* =========================
   Header
========================= */

.header{
    height:60px;
    position:sticky;
    top:0;
    z-index:100;
    background:rgba(255,255,255,.82);
    -webkit-backdrop-filter:saturate(180%) blur(14px);
    backdrop-filter:saturate(180%) blur(14px);
    border-bottom:1px solid var(--line);
}

.header-inner{
    height:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    width:min(1440px,calc(100% - 48px));
    margin:0 auto;
}

.logo{
    display:flex;
    align-items:center;
    gap:9px;
    font-weight:800;
    font-size:18px;
    color:var(--brand);
    letter-spacing:-.2px;
}

.logo-img{height:30px;width:auto;display:block}
.logo-mark{
    width:26px;
    height:26px;
    border-radius:8px;
    background:var(--brand);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:15px;
    font-weight:900;
    line-height:1;
}

.nav{
    display:flex;
    align-items:center;
    gap:26px;
    font-size:14px;
    font-weight:500;
}

.nav a{transition:color .2s;white-space:nowrap}
.nav a:hover{color:var(--brand)}

.header-right{
    display:flex;
    align-items:center;
    gap:14px;
    color:var(--text-2);
    font-size:13px;
}

.status{
    display:flex;
    align-items:center;
    gap:7px;
    padding:5px 11px;
    border-radius:999px;
    background:var(--bg-soft);
    font-weight:500;
}

/*
 * 状态点的「呼吸」光圈：用伪元素做 transform + opacity 动画（只在合成层上动，不重绘）。
 * 之前是直接动 box-shadow：每一帧都要重绘圆点所在的整片区域，实测首页主线程一半以上的时间花在 Paint 上，滚动 / 操作都卡。
 */
.status-dot{
    position:relative;
    width:7px;
    height:7px;
    background:var(--up);
    border-radius:50%;
    --halo:rgba(22,163,74,.15);
}
.status-dot::after{
    content:"";
    position:absolute;
    inset:-3px;
    border-radius:50%;
    background:var(--halo);
    animation:pulse 2s ease-in-out infinite;
    will-change:transform,opacity;
    pointer-events:none;
}

@keyframes pulse{
    50%{transform:scale(1.35);opacity:.35}
}

#updateTime{font-variant-numeric:tabular-nums}

/*
 * 宽屏：顶栏三栏网格（logo | 导航 | 状态），导航固定居中——
 * 原来 space-between 时，右边「API正常 / 时间」的文字宽度一变，中间的导航就跟着左右挪。
 * 窄屏（≤760px）导航是下拉菜单，仍按原来的 flex 排。
 */
@media(min-width:761px){
    .header-inner{display:grid;grid-template-columns:1fr auto 1fr}
    .header-right{justify-self:end}
}

/* 后台可配置的站点公告 */
.site-notice{
    background:var(--brand-soft);
    color:#8a6500;
    font-size:13.5px;
    padding:9px 0;
    font-weight:500;
    text-align:center;
    border-bottom:1px solid var(--line);
}

/* =========================
   Hero
========================= */

.hero{
    position:relative;
    padding:44px 0 40px;
    border-bottom:1px solid var(--line);
    background:
        radial-gradient(900px 320px at 12% -10%,rgba(230,172,0,.16),transparent 70%),
        radial-gradient(700px 300px at 95% 0%,rgba(230,172,0,.08),transparent 70%),
        linear-gradient(180deg,#fffdf6 0%,#fff 100%);
}

.hero-inner{
    position:relative;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
    gap:40px;
    align-items:center;
}

/* 标题上方的小胶囊：金色系，圆点用品牌色（绿色留给「上涨」） */
.hero-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-bottom:16px;
    padding:5px 12px 5px 10px;
    border:1px solid rgba(230,172,0,.28);
    border-radius:999px;
    background:rgba(230,172,0,.08);
    color:#8a6500;
    font-size:12.5px;
    font-weight:600;
    letter-spacing:.2px;
}

.hero-badge .status-dot{
    background:var(--brand);
    --halo:rgba(230,172,0,.18);
}

.hero h1{
    font-size:40px;
    line-height:1.2;
    font-weight:800;
    letter-spacing:-1px;
    color:var(--text-1);
}

.hero h1 span{color:var(--brand);white-space:nowrap}

.hero p{
    max-width:560px;
    margin-top:14px;
    color:var(--text-2);
    font-size:15.5px;
    line-height:1.75;
}

.hero-actions{
    margin-top:22px;
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    height:40px;
    padding:0 20px;
    border-radius:999px;
    font-size:15px;
    font-weight:500;
    border:1px solid transparent;
    cursor:pointer;
    transition:background .2s,border-color .2s,transform .2s var(--ease),box-shadow .2s;
    white-space:nowrap;
}

.btn:active{transform:scale(.97)}

.btn-brand{
    background:var(--brand);
    color:#fff;
}

.btn-brand:hover{
    background:var(--brand-2);
    box-shadow:0 6px 18px rgba(230,172,0,.28);
}

.btn-ghost{
    background:#fff;
    color:var(--text-1);
    border-color:var(--line);
}

.btn-ghost:hover{border-color:var(--brand-3)}

/* 市场脉搏：首屏四张实时数据卡片，每张链到对应分析页 */
.pulse{
    min-width:0;
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:0 8px 30px rgba(120,90,0,.06);
    overflow:hidden;
}

.pulse-head{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:12px;
    padding:12px 18px;
    border-bottom:1px solid var(--line);
    background:var(--bg-alt);
}
.pulse-head strong{font-size:14px;font-weight:700}
.pulse-head small{color:var(--text-3);font-size:12px}

.pulse-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
}

.pulse-card{
    position:relative;
    display:flex;
    flex-direction:column;
    gap:6px;
    padding:16px 18px;
    transition:background .2s;
}
.pulse-card:nth-child(odd){border-right:1px solid var(--line)}
.pulse-card:nth-child(n+3){border-top:1px solid var(--line)}
.pulse-card:hover{background:rgba(230,172,0,.05)}

.pulse-card small{color:var(--text-2);font-size:12.5px}

.pulse-card strong{
    font-size:22px;
    font-weight:700;
    letter-spacing:-.5px;
    font-variant-numeric:tabular-nums;
    white-space:nowrap;
}

.pulse-card strong em{font-style:normal;font-size:14px;font-weight:600;margin-left:4px;letter-spacing:0}
.pulse-card strong .up,.pulse-card strong .down{font-weight:700}

/* 多空爆仓占比：绿 = 多单，红 = 空单 */
.pulse-bar{display:block;height:4px;border-radius:2px;background:var(--down);overflow:hidden}
.pulse-bar i{display:block;height:100%;background:var(--up)}

.pulse-sub{color:var(--text-3);font-size:12.5px;line-height:1.5}

/* 右上角的小箭头链接：平时灰，悬停变品牌色 */
.pulse-more{
    position:absolute;
    top:16px;
    right:18px;
    color:var(--text-3);
    font-size:12px;
    font-weight:500;
    transition:color .2s;
}
.pulse-card:hover .pulse-more{color:var(--brand)}

/* =========================
   看盘区：左行情表，右侧栏（币圈异动 + 分析工具）
========================= */

.dash{
    display:grid;
    grid-template-columns:minmax(0,1fr) 380px;
    grid-template-areas:"main movers" "main tools";
    grid-template-rows:auto 1fr;
    gap:20px 24px;
    padding-top:24px;
    align-items:start;
}

.dash-main{grid-area:main;min-width:0}
#movers{grid-area:movers}
#features{grid-area:tools}

.panel-head{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:12px;
    margin-bottom:12px;
}

.panel-head h2{font-size:18px;font-weight:700;letter-spacing:-.3px;white-space:nowrap}
.panel-head small{color:var(--text-3);font-size:12px;text-align:right}

.market-foot{margin-top:10px;color:var(--text-3);font-size:12.5px;line-height:1.7}

.side-box{
    border:1px solid var(--line);
    border-radius:var(--radius);
    background:#fff;
    padding:16px 16px 8px;
    min-width:0;
}

/* =========================
   Market
========================= */

.market-box{
    border:1px solid var(--line);
    border-radius:var(--radius);
    overflow:hidden;
    background:#fff;
}

.market-tabs{
    display:flex;
    gap:8px;
    padding:14px 14px 0;
    overflow-x:auto;
    scrollbar-width:none;
}
.market-tabs::-webkit-scrollbar{display:none}

.mtab{
    flex:0 0 auto;
    height:36px;
    padding:0 18px;
    border:1px solid var(--line);
    border-radius:999px;
    background:#fff;
    color:var(--text-2);
    font-size:14px;
    font-weight:600;
    cursor:pointer;
    transition:background-color .2s,color .2s,border-color .2s;
    -webkit-tap-highlight-color:transparent;   /* 手机点按时的蓝色高亮框 */
    -webkit-user-select:none;
    user-select:none;                          /* 点击/双击时文字被选中的蓝底 */
    outline:none;
}
.mtab:focus:not(:focus-visible){outline:none}
.mtab:focus-visible{outline:2px solid var(--brand);outline-offset:2px}   /* 只有键盘操作时才显示焦点框 */
.mtab:hover{color:var(--text-1);border-color:var(--brand-3)}
.mtab.active{
    background:var(--brand-soft);
    border-color:var(--brand);
    color:var(--text-1);
}

.toolbar{
    display:flex;
    gap:10px;
    padding:14px;
    border-bottom:1px solid var(--line);
}

.search{
    flex:1;
    min-width:0;
    height:40px;
    padding:0 16px 0 40px;
    border:1px solid transparent;
    background:var(--bg-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 15px center;
    border-radius:999px;
    outline:none;
    font-size:14px;
    transition:border-color .2s,background-color .2s;
}

.search::placeholder{color:var(--text-3)}

.search:focus{
    background-color:#fff;
    border-color:var(--brand);
}

.market-head,
.market-row{
    display:grid;
    grid-template-columns:40px 1.6fr 1.3fr 1fr 1fr 1fr 1.1fr;
    gap:14px;
    align-items:center;
}

.market-head{
    padding:12px 24px;
    background:var(--bg-alt);
    color:var(--text-2);
    font-size:12px;
    font-weight:500;
}

.market-head div:nth-child(n+3),
.market-row > div:nth-child(n+3){text-align:right}

.market-row{
    padding:14px 24px;
    border-top:1px solid var(--line);
    transition:background .15s;
    font-variant-numeric:tabular-nums;
}

.market-row:hover{background:rgba(230,172,0,.06)}

.rank{color:var(--text-3);font-size:13px;font-weight:600}
.rank.top{color:var(--brand)}

.coin{
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
}

.coin-icon{
    flex:none;
    width:34px;
    height:34px;
    border-radius:50%;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
}
.coin-icon img{display:block;width:100%;height:100%;border-radius:50%}

/* 没有图标文件的币种：文字圆标 */
.coin-icon.txt{
    background:var(--brand-soft);
    color:#a87c00;
    font-weight:800;
    font-size:11px;
}

.coin-name{min-width:0}

.coin-name strong{
    display:block;
    font-size:14px;
    font-weight:600;
}

.coin-name small{
    color:var(--text-3);
    font-size:12px;
}

.price{font-weight:600}

.up{color:var(--up);font-weight:500}
.down{color:var(--down);font-weight:500}

/* 24H 涨跌：色块标签（与排行榜一致） */
.chip{display:inline-block;min-width:74px;padding:3px 8px;border-radius:6px;text-align:center;font-weight:600;font-size:13px}
.chip.up{background:rgba(22,163,74,.10);color:var(--up)}
.chip.down{background:rgba(229,72,77,.10);color:var(--down)}

.mini{font-size:13px;color:var(--text-2)}

.empty{
    padding:56px;
    text-align:center;
    color:var(--text-3);
}

/* 分析工具（侧栏列表） */
.tool-row,
.mv-row{
    display:flex;
    align-items:center;
    gap:12px;
    margin:0 -8px;
    padding:10px 8px;
    border-radius:8px;
    transition:background .15s;
}

.tool-row:hover,
.mv-row:hover{background:rgba(230,172,0,.07)}

.tool-row + .tool-row,
.mv-row + .mv-row{border-top:1px solid var(--line)}

.info-icon{
    flex:none;
    width:34px;
    height:34px;
    border-radius:9px;
    background:var(--brand-soft);
    color:var(--brand);
    display:flex;
    align-items:center;
    justify-content:center;
}

.info-icon svg{width:18px;height:18px}

.tool-mid,
.mv-mid{flex:1;min-width:0}
.tool-mid strong{display:block;font-size:14px;font-weight:600}
.tool-mid p,
.mv-mid p{
    margin-top:2px;
    color:var(--text-2);
    font-size:12.5px;
    line-height:1.5;
    overflow:hidden;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
}

/* =========================
   Footer
========================= */

footer{
    margin-top:96px;
    padding:28px 0;
    border-top:1px solid var(--line);
    color:var(--text-2);
    font-size:13px;
}

.footer-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
}

.footer-links{display:flex;gap:18px}
.footer-links a:hover{color:var(--brand)}

/* =========================
   Reveal
========================= */

.js .reveal{
    opacity:0;
    transform:translateY(24px);
    transition:opacity .7s var(--ease),transform .7s var(--ease);
}

.js .reveal.in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
    .js .reveal{opacity:1;transform:none;transition:none}
    .status-dot::after{animation:none}
}

/* =========================
   Responsive
========================= */

/* 表格在窄屏保持宽屏的完整 7 列，容器内横向滑动 */
.market-scroll{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
}

@media(max-width:1000px){
    .nav{gap:20px}


    .market-scroll-inner{min-width:820px}
}

@media(max-width:600px){
    .header-inner{width:calc(100% - 32px)}
    .header{padding-top:env(safe-area-inset-top);box-sizing:content-box}

    .container{width:calc(100% - 32px)}

    #updateTime,
    .status{display:none}
    .logo{font-size:17px}
    .nav{gap:16px;font-size:13px}

    .toolbar{padding:12px}
    .market-tabs{padding:12px 12px 0}
    .mtab{height:34px;padding:0 14px;font-size:13px}

    /* 行情表与说明卡片通栏，不留左右空隙 */
    .market-box{
        margin-left:-16px;
        margin-right:-16px;
        border-left:0;
        border-right:0;
        border-radius:0;
    }

    .market-scroll-inner{min-width:610px}
    .market-head,
    .market-row{
        grid-template-columns:30px 1.5fr 1.1fr .9fr .9fr .9fr 1fr;
        gap:8px;
        padding-left:14px;
        padding-right:14px;
    }
    .coin{gap:8px}
    .coin-icon{width:28px;height:28px}
    .coin-icon.txt{font-size:10px}
    .coin-name strong{font-size:13px}
    .chip{min-width:64px}

    footer{
        margin-top:72px;
        padding-bottom:calc(28px + env(safe-area-inset-bottom));
    }
}

/* =========================
   币圈异动（anomaly_lib.php）：侧栏列表
========================= */

/* 「币圈异动」标题右边的「更多」：进入币圈异动页 /anomaly/ */
.mv-all{
    flex:none;
    display:inline-flex;
    align-items:center;
    gap:1px;
    padding:4px 6px 4px 10px;
    border-radius:999px;
    color:var(--brand);
    font-size:13px;
    font-weight:600;
    white-space:nowrap;
    transition:background .15s;
}
.mv-all:hover{background:var(--brand-soft)}
.mv-sub{display:block;margin:-4px 0 6px;color:var(--text-3);font-size:12px}

.mv-row .coin-icon{width:28px;height:28px}
.mv-row .coin-icon.txt{font-size:10px}
.mv-mid > div{display:flex;align-items:center;gap:6px;min-width:0}
.mv-mid strong{font-size:14px;font-weight:700}

.mv-tag{
    flex:none;
    padding:1px 6px;
    border-radius:5px;
    background:var(--bg-soft);
    color:var(--text-2);
    font-size:11px;
    font-weight:600;
}
.mv-tag.up{background:rgba(22,163,74,.10)}
.mv-tag.down{background:rgba(229,72,77,.10)}

.mv-val{
    flex:none;
    max-width:40%;
    text-align:right;
    font-size:15px;
    font-weight:700;
    font-variant-numeric:tabular-nums;
    white-space:nowrap;
}

.mv-more{
    display:none;
    width:100%;
    margin:4px 0 8px;
    padding:8px 0;
    border:0;
    border-top:1px solid var(--line);
    background:none;
    color:var(--brand);
    font-size:13px;
    font-weight:600;
    cursor:pointer;
}

/* 行情区标题右侧的数据状态 */
.data-state{
    display:inline-flex;
    align-items:center;
    gap:4px;
    color:var(--text-3);
    font-size:12.5px;
    font-variant-numeric:tabular-nums;
    white-space:nowrap;
}
.data-state .status-dot{margin-right:4px}
.status-dot.off{background:var(--text-3)}
.status-dot.off::after{display:none}

/* 窄屏：单栏，异动在行情表上面，工具在最后 */
@media(max-width:1100px){
    .hero-inner{grid-template-columns:1fr;gap:24px}
    .dash{grid-template-columns:1fr;grid-template-areas:"movers" "main" "tools";grid-template-rows:auto}
    .nav-x{display:none}
}

@media(max-width:600px){
    .hero{padding:24px 0 20px}
    .hero-badge{margin-bottom:10px;font-size:12px}
    .hero h1{font-size:28px;letter-spacing:-.5px}
    .hero p{font-size:14.5px;margin-top:10px}
    .hero-actions{margin-top:16px}
    .hero-actions .btn{height:38px;padding:0 16px;font-size:14px}
    .pulse-card{padding:12px 14px}
    .pulse-head{padding:10px 14px}
    .pulse-card strong{font-size:18px}
    .pulse-card strong em{font-size:12px}
    .pulse-sub{font-size:12px}
    .pulse-more{display:none}
    .dash{padding-top:16px;gap:16px}
    /* 市场脉搏也通栏 */
    .pulse{
        margin-left:-16px;
        margin-right:-16px;
        border-left:0;
        border-right:0;
        border-radius:0;
        box-shadow:none;
    }
    /* 侧栏面板和行情表一样通栏，左右不留空 */
    .side-box{
        margin-left:-16px;
        margin-right:-16px;
        padding-left:16px;
        padding-right:16px;
        border-left:0;
        border-right:0;
        border-radius:0;
    }
    .mv-row,
    .tool-row{margin:0;padding-left:0;padding-right:0;border-radius:0}
    /* 手机上异动先只显示 4 条，免得把行情表推得太远 */
    .mv-list:not(.all) .mv-row:nth-child(n+5){display:none}
    .mv-more{display:block}
    .data-state span:nth-child(3),
    .data-state #dataTime{display:none}
}

/* =========================
   手机折叠导航
========================= */

.nav-toggle{display:none}

@media(max-width:760px){
    .nav-toggle{
        display:inline-flex;
        flex-direction:column;
        justify-content:center;
        gap:4px;
        width:38px;
        height:38px;
        padding:0 10px;
        margin-right:-8px;
        border:0;
        border-radius:10px;
        background:none;
        cursor:pointer;
        -webkit-tap-highlight-color:transparent;
    }
    .nav-toggle:active{background:var(--bg-soft)}
    .nav-toggle span{
        display:block;
        height:2px;
        border-radius:1px;
        background:var(--text-1);
        transition:transform .25s var(--ease),opacity .2s;
    }
    /* 展开时三条线变成 × */
    .nav-open .nav-toggle span:nth-child(1){transform:translateY(6px) rotate(45deg)}
    .nav-open .nav-toggle span:nth-child(2){opacity:0}
    .nav-open .nav-toggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

    /* 菜单：从顶栏下方展开的整行列表 */
    .nav{
        position:absolute;
        top:100%;
        left:0;
        right:0;
        flex-direction:column;
        align-items:stretch;
        gap:0;
        padding:6px 16px 12px;
        background:#fff;
        border-bottom:1px solid var(--line);
        box-shadow:0 12px 24px rgba(0,0,0,.06);
        font-size:15px;
        visibility:hidden;
        opacity:0;
        transform:translateY(-6px);
        transition:opacity .2s,transform .25s var(--ease),visibility 0s .25s;
    }
    .nav-open .nav{
        visibility:visible;
        opacity:1;
        transform:none;
        transition:opacity .2s,transform .25s var(--ease);
    }
    .nav a,
    .nav .nav-x{
        display:flex;
        align-items:center;
        justify-content:space-between;
        padding:13px 4px;
        border-top:1px solid var(--line);
    }
    .nav a:first-child{border-top:0}
    .nav a::after{content:"›";color:var(--text-3);font-size:18px}
}