@charset "utf-8";
/* ==========================================================================
   mxone_pc 首页样式  ——  只作用于 .mx-app 内部，不影响模板其它页面
   配色取自参考图采样：页面底 #d0d4db / 内容面 #f5f7fa、#fff / 浅蓝强调 #cbe0f6
   ========================================================================== */

:root{
    --mx-page:#d7dbe2;
    --mx-surface:#ffffff;
    --mx-surface-2:#f5f7fa;
    --mx-line:#e4e8ef;
    --mx-text:#222a37;
    --mx-text-2:#5c6879;
    --mx-muted:#8b95a5;
    --mx-accent:#2f7ff0;
    --mx-accent-2:#1c5fd0;
    --mx-accent-soft:#e8f1fd;
    --mx-warn:#e8590c;
    --mx-radius:14px;
    --mx-shadow:0 2px 10px rgba(28,45,80,.06);
    --mx-shadow-hi:0 12px 28px rgba(28,45,80,.15);
}

/* ---------- 基础重置（限定在首页容器内） ---------- */
body.mx-body{margin:0;padding:0;background:var(--mx-page);}
.mx-app{
    background:var(--mx-page);
    color:var(--mx-text);
    font:15px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
    -webkit-text-size-adjust:100%;
}
.mx-app *,.mx-app *::before,.mx-app *::after{box-sizing:border-box;}
.mx-app ul,.mx-app ol{list-style:none;margin:0;padding:0;}
.mx-app a{color:inherit;text-decoration:none;}
.mx-app img{display:block;max-width:100%;border:0;}
.mx-app h1,.mx-app h2,.mx-app h3,.mx-app h4{margin:0;font-weight:700;}
.mx-app p{margin:0;}
.mx-wrap{max-width:1240px;margin:0 auto;padding:0 16px;}

/* ---------- 顶栏 ---------- */
.mx-header{
    position:sticky;top:0;z-index:60;
    background:rgba(255,255,255,.94);
    -webkit-backdrop-filter:saturate(1.6) blur(10px);
    backdrop-filter:saturate(1.6) blur(10px);
    border-bottom:1px solid var(--mx-line);
}
.mx-header-in{display:flex;align-items:center;gap:16px;min-height:64px;}
.mx-logo{display:flex;align-items:center;gap:10px;flex:0 0 auto;font-size:17px;font-weight:800;white-space:nowrap;}
.mx-logo img{height:34px;width:auto;border-radius:8px;}
.mx-logo-text{max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

.mx-nav{display:flex;align-items:center;gap:2px;flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none;}
.mx-nav::-webkit-scrollbar{display:none;}
.mx-nav a{flex:0 0 auto;padding:8px 12px;border-radius:9px;font-size:15px;font-weight:600;color:var(--mx-text-2);white-space:nowrap;transition:.2s;}
.mx-nav a:hover{background:var(--mx-accent-soft);color:var(--mx-accent-2);}
.mx-nav a.is-on{color:#fff;background:linear-gradient(135deg,var(--mx-accent),var(--mx-accent-2));}

.mx-search{display:flex;align-items:center;flex:0 0 268px;gap:6px;background:var(--mx-surface-2);border:1px solid var(--mx-line);border-radius:999px;padding:4px 4px 4px 15px;transition:.2s;}
.mx-search:focus-within{background:#fff;border-color:#bcd8fa;box-shadow:0 0 0 3px rgba(47,127,240,.12);}
.mx-search input[type=text]{flex:1;min-width:0;border:0;background:none;outline:none;font-size:14px;color:var(--mx-text);font-family:inherit;}
.mx-search input[type=text]::placeholder{color:var(--mx-muted);}
.mx-search button{flex:0 0 auto;border:0;cursor:pointer;font-family:inherit;font-size:14px;font-weight:700;color:#fff;padding:7px 17px;border-radius:999px;background:linear-gradient(135deg,var(--mx-accent),var(--mx-accent-2));}

/* ---------- 首屏 ---------- */
.mx-hero{
    margin-top:18px;border-radius:20px;overflow:hidden;position:relative;
    background:linear-gradient(120deg,#eef5fd 0%,#dcebfa 46%,#c3dcf7 100%);
    border:1px solid #d5e5f7;
}
.mx-hero::after{
    content:"";position:absolute;right:-90px;top:-120px;width:340px;height:340px;border-radius:50%;
    background:radial-gradient(circle,rgba(255,255,255,.85),rgba(255,255,255,0) 70%);pointer-events:none;
}
.mx-hero-in{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:26px;align-items:center;padding:34px 32px;}
.mx-eyebrow{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.4px;color:var(--mx-accent-2);background:rgba(255,255,255,.72);border:1px solid #cfe2fa;border-radius:999px;padding:4px 12px;margin-bottom:14px;}
.mx-hero h1{font-size:30px;line-height:1.25;letter-spacing:-.3px;margin-bottom:12px;}
.mx-hero-txt p{max-width:520px;color:#42536b;font-size:14.5px;margin-bottom:20px;}
.mx-hero-btns{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px;}
.mx-btn{display:inline-flex;align-items:center;gap:7px;font-size:14.5px;font-weight:700;padding:10px 22px;border-radius:999px;transition:.2s;}
.mx-btn-p{color:#fff;background:linear-gradient(135deg,var(--mx-accent),var(--mx-accent-2));box-shadow:0 6px 16px rgba(28,95,208,.28);}
.mx-btn-p:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(28,95,208,.34);}
.mx-btn-g{color:var(--mx-accent-2);background:rgba(255,255,255,.86);border:1px solid #cfe2fa;}
.mx-btn-g:hover{background:#fff;transform:translateY(-2px);}
.mx-hero-tags{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:13px;color:#4c5c74;}
.mx-hero-tags li{display:flex;align-items:center;gap:6px;}
.mx-hero-tags li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--mx-accent);flex:0 0 auto;}
.mx-hero-hot{margin-top:14px;font-size:13px;color:#5b6b82;}
.mx-hero-hot a{display:inline-block;margin:0 6px 6px 0;padding:3px 10px;border-radius:999px;background:rgba(255,255,255,.72);border:1px solid #d5e5f7;color:#2a4b78;transition:.2s;}
.mx-hero-hot a:hover{background:#fff;color:var(--mx-accent-2);border-color:#bcd8fa;}

.mx-hero-art{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.mx-hcard{position:relative;display:block;border-radius:12px;overflow:hidden;background:#e7edf6;box-shadow:0 8px 20px rgba(28,45,80,.16);transition:.3s;}
.mx-hcard:nth-child(2){transform:translateY(-14px);}
.mx-hcard:hover{transform:translateY(-18px);box-shadow:0 16px 30px rgba(28,45,80,.26);}
.mx-hcard img{width:100%;aspect-ratio:2/3;object-fit:cover;}
.mx-hcard-t{position:absolute;left:0;right:0;bottom:0;padding:20px 8px 7px;font-size:12px;color:#fff;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.75));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* ---------- 特色卡片 ---------- */
.mx-feats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:18px;}
.mx-feat{display:flex;gap:13px;align-items:flex-start;background:var(--mx-surface);border-radius:var(--mx-radius);box-shadow:var(--mx-shadow);padding:18px;}
.mx-ico{flex:0 0 42px;height:42px;border-radius:12px;background:var(--mx-accent-soft);color:var(--mx-accent-2);display:flex;align-items:center;justify-content:center;}
.mx-ico svg{width:22px;height:22px;}
.mx-feat h4{font-size:15px;margin-bottom:4px;}
.mx-feat p{font-size:13px;line-height:1.5;color:var(--mx-muted);}

/* ---------- 类型标签 ---------- */
.mx-chipbar{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;}
.mx-chipbar a{font-size:13px;font-weight:600;padding:5px 13px;border-radius:999px;background:var(--mx-surface);border:1px solid var(--mx-line);color:var(--mx-text-2);transition:.2s;}
.mx-chipbar a:hover{background:var(--mx-accent-soft);border-color:#c9e0fb;color:var(--mx-accent-2);}

/* ---------- 内容区块 ---------- */
.mx-sec{margin-top:20px;background:var(--mx-surface);border-radius:var(--mx-radius);box-shadow:var(--mx-shadow);padding:18px;}
.mx-sec-hd{display:flex;align-items:center;gap:12px;margin-bottom:15px;}
.mx-sec-hd h2{position:relative;font-size:19px;letter-spacing:-.2px;padding-left:13px;}
.mx-sec-hd h2::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:5px;height:19px;border-radius:3px;background:linear-gradient(180deg,var(--mx-accent),var(--mx-accent-2));}
.mx-sec-hd .mx-sub{font-size:13px;color:var(--mx-muted);}
.mx-more{margin-left:auto;flex:0 0 auto;font-size:13px;font-weight:600;color:var(--mx-muted);}
.mx-more:hover{color:var(--mx-accent-2);}

/* ---------- 海报网格 ---------- */
.mx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(152px,1fr));gap:14px;}
.mx-grid-sm{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:12px;}
.mx-card{display:block;background:var(--mx-surface);border-radius:12px;overflow:hidden;box-shadow:var(--mx-shadow);transition:transform .25s,box-shadow .25s;}
.mx-card:hover{transform:translateY(-4px);box-shadow:var(--mx-shadow-hi);}
.mx-poster{position:relative;display:block;aspect-ratio:2/3;background:#eef1f6;overflow:hidden;}
.mx-poster img{width:100%;height:100%;object-fit:cover;transition:transform .5s;}
.mx-card:hover .mx-poster img{transform:scale(1.06);}
.mx-score{position:absolute;top:8px;right:8px;font-style:normal;font-size:12px;font-weight:800;color:var(--mx-warn);background:rgba(255,255,255,.95);border-radius:8px;padding:2px 7px;box-shadow:0 2px 6px rgba(0,0,0,.14);}
.mx-remark{position:absolute;left:0;right:0;bottom:0;font-style:normal;font-size:12px;color:#fff;padding:18px 9px 7px;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.74));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mx-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13.5px;font-weight:600;line-height:1.45;padding:9px 10px;min-height:48px;}

/* ---------- 双栏区块 ---------- */
.mx-cols{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px;}
.mx-cols .mx-sec{margin-top:0;}

/* ---------- 最近更新（首页主推区块 + 紧凑列表） ---------- */
.mx-upd{
    background:linear-gradient(180deg,#f3f8ff 0%,#fff 150px);
    border:1px solid #d6e4f8;
    box-shadow:0 4px 18px rgba(28,45,80,.09);
    padding:20px 18px 16px;
}
.mx-upd .mx-sec-hd{margin-bottom:16px;padding-bottom:13px;border-bottom:1px solid var(--mx-line);flex-wrap:wrap;}
.mx-upd .mx-sec-hd h2{font-size:23px;padding-left:15px;}
.mx-upd .mx-sec-hd h2::before{width:6px;height:23px;}
.mx-upd .mx-more{color:var(--mx-accent-2);}
.mx-live{
    flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;font-style:normal;
    font-size:12px;font-weight:700;color:#d6362f;background:#fdecea;border:1px solid #f7d2cf;
    border-radius:999px;padding:2px 11px;
}
.mx-live::before{content:"";width:6px;height:6px;border-radius:50%;background:#e8453c;animation:mxpulse 1.8s infinite;}
@keyframes mxpulse{
    0%{box-shadow:0 0 0 0 rgba(232,69,60,.55);}
    70%{box-shadow:0 0 0 7px rgba(232,69,60,0);}
    100%{box-shadow:0 0 0 0 rgba(232,69,60,0);}
}
.mx-grid-new{grid-template-columns:repeat(6,1fr);gap:12px;}

.mx-list{counter-reset:mxli;display:grid;grid-template-columns:repeat(4,1fr);gap:0 22px;}
.mx-list li{display:flex;align-items:baseline;gap:8px;padding:8px 0;border-bottom:1px dashed var(--mx-line);min-width:0;}
.mx-li-t{flex:1 1 auto;min-width:0;font-size:14px;color:var(--mx-text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mx-li-t:hover{color:var(--mx-accent-2);}
.mx-badge{flex:0 0 auto;font-size:11px;font-weight:700;color:var(--mx-accent-2);background:var(--mx-accent-soft);border-radius:6px;padding:1px 6px;}
.mx-li-d{flex:0 0 auto;font-size:12px;color:var(--mx-muted);}

.mx-list-hot{grid-template-columns:repeat(3,1fr);gap:0 26px;margin-top:16px;}
.mx-list-hot li{align-items:center;padding:9px 6px;border-bottom:1px solid var(--mx-line);border-radius:7px;}
.mx-list-hot li:hover{background:#f2f8ff;border-bottom-color:#cfe2fa;}
.mx-list-hot li::before{
    counter-increment:mxli;content:counter(mxli,decimal-leading-zero);
    flex:0 0 auto;width:26px;font-size:11.5px;font-weight:800;color:#aab5c5;font-variant-numeric:tabular-nums;
}
.mx-list-hot li:nth-child(-n+3)::before{color:var(--mx-accent);}
.mx-list-hot .mx-li-t{font-size:14.5px;color:var(--mx-text);}
.mx-list-hot .mx-badge{display:inline-block;max-width:112px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#c2410c;background:#fff2e8;}

/* ---------- 页脚 ---------- */
.mx-footer{margin-top:26px;background:var(--mx-surface);border-top:1px solid var(--mx-line);padding:24px 0 34px;}
.mx-links{display:flex;flex-wrap:wrap;gap:9px 16px;font-size:13px;color:var(--mx-text-2);}
.mx-links a:hover{color:var(--mx-accent-2);}
.mx-links-nav{padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid var(--mx-line);}
.mx-links-nav a{font-weight:600;color:var(--mx-text);}
.mx-copy{margin-top:14px;font-size:12.5px;line-height:1.8;color:var(--mx-muted);}
.mx-copy a{color:var(--mx-muted);}

/* ---------- 空数据占位 ---------- */
.mx-empty{padding:26px 0;text-align:center;font-size:13.5px;color:var(--mx-muted);}

/* ---------- 显式声明各元素字号，避免受站点其它样式表（style.css 的 a:link/a:hover）影响 ---------- */
.mx-app a,.mx-app a:hover{font-size:inherit;}
.mx-app .mx-more{font-size:13px;}
.mx-app .mx-chipbar a{font-size:13px;}
.mx-app .mx-links a{font-size:13px;}
.mx-app .mx-links span{font-size:13px;}
.mx-app .mx-btn{font-size:14.5px;}
.mx-app .mx-nav a{font-size:15px;}
.mx-app .mx-li-t{font-size:14px;}
.mx-app .mx-list-hot .mx-li-t{font-size:14.5px;}
.mx-app .mx-li-d{font-size:12px;}
.mx-app .mx-badge{font-size:11px;}
.mx-app .mx-live{font-size:12px;}
.mx-app .mx-list-hot li::before{font-size:11.5px;}
.mx-app .mx-name{font-size:13.5px;}
.mx-app .mx-hcard-t{font-size:12px;}
.mx-app .mx-score,.mx-app .mx-remark{font-size:12px;}
.mx-app .mx-copy,.mx-app .mx-copy a{font-size:12.5px;}
.mx-app .mx-hero-txt p{font-size:14.5px;}

/* ---------- 响应式 ---------- */
@media (max-width:1024px){
    .mx-hero-in{grid-template-columns:1fr;gap:20px;padding:26px 24px;}
    .mx-hero-txt p{max-width:none;}
    .mx-hero-art{grid-template-columns:repeat(3,1fr);max-width:420px;}
    .mx-hcard:nth-child(2){transform:none;}
    .mx-hcard:hover{transform:translateY(-4px);}
    .mx-feats{grid-template-columns:repeat(2,1fr);}
    .mx-cols{grid-template-columns:1fr;}
    .mx-list{grid-template-columns:repeat(2,1fr);}
    .mx-grid-new{grid-template-columns:repeat(3,1fr);}
    .mx-list-hot{grid-template-columns:repeat(2,1fr);gap:0 20px;}
}
@media (max-width:640px){
    .mx-wrap{padding:0 12px;}
    .mx-header-in{flex-wrap:wrap;gap:10px;padding:10px 0;min-height:0;}
    .mx-logo{order:1;}
    .mx-search{order:2;flex:1 1 100%;padding-left:13px;}
    .mx-search button{padding:7px 16px;}
    .mx-nav{order:3;flex:1 1 100%;}
    .mx-nav a{padding:7px 10px;font-size:14px;}
    .mx-hero{margin-top:12px;border-radius:16px;}
    .mx-hero-in{padding:20px 16px;}
    .mx-hero h1{font-size:22px;}
    .mx-hero-art{max-width:none;}
    .mx-btn{padding:9px 17px;font-size:14px;}
    .mx-feats{grid-template-columns:1fr;gap:10px;}
    .mx-feat{padding:14px;}
    .mx-sec{padding:14px;border-radius:12px;}
    .mx-sec-hd h2{font-size:17px;}
    .mx-sec-hd .mx-sub{display:none;}
    .mx-grid{grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px;}
    .mx-grid-sm{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:9px;}
    .mx-name{font-size:12.5px;min-height:44px;padding:8px;}
    .mx-list{grid-template-columns:1fr;gap:0;}
    .mx-upd{padding:15px 13px 12px;}
    .mx-upd .mx-sec-hd h2{font-size:19px;padding-left:13px;}
    .mx-upd .mx-sec-hd h2::before{width:5px;height:19px;}
    .mx-live{font-size:11px;padding:1px 9px;}
    .mx-grid-new{grid-template-columns:repeat(2,1fr);gap:9px;}
    .mx-list-hot{grid-template-columns:1fr;gap:0;margin-top:12px;}
    .mx-list-hot li{padding:8px 4px;}
    .mx-list-hot li::before{width:22px;}
    .mx-footer{padding:18px 0 26px;}
}
