/* AI4E 专题区 1.0.3
 * 一：留言板专题页（.ai4e-lyb）  二：电脑首页专题区（.ai4e-tz）  三：手机「专题」频道横条（.tz-strips）
 * 前台写死的颜色都在文末配了深色模式。 */

.ai4e-lyb,.ai4e-tz,.tz-strips{
  --lyb-bg:#f5f4f2;--lyb-card:#fffefc;--lyb-ink:#16171B;--lyb-mute:#8a857e;--lyb-faint:#bdb8b0;--lyb-line:#e4e0da;
  --lyb-soft:#5f5a53;--lyb-past:#8f8a83;--lyb-lime:#C8F529;--lyb-or:#EA580C;--lyb-orb:oklch(0.68 0.19 45 / .28);
  --lyb-disp:"AI4ELYBDisp","Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  --lyb-num:"SF Pro Display","Helvetica Neue",Arial,sans-serif;
}

/* ===== 一、专题页 ===== */
.ai4e-lyb{max-width:1200px;margin:24px auto 48px;padding:0 20px;box-sizing:border-box}
.ai4e-lyb *{box-sizing:border-box}
.ai4e-lyb a{text-decoration:none!important}
.ai4e-lyb .lyb-page{display:grid;grid-template-columns:260px 1fr;background:var(--lyb-bg);border-radius:6px;overflow:hidden;min-height:760px}

.ai4e-lyb .lyb-side{background:#16171B;color:#fff;padding:56px 32px 44px;display:flex;flex-direction:column;align-items:center;gap:44px}
.ai4e-lyb .lyb-brand{position:relative}
.ai4e-lyb .lyb-brand h1{writing-mode:vertical-rl;font:900 108px/1 var(--lyb-disp)!important;letter-spacing:.06em;color:#fff!important;margin:0!important;padding:0!important}
.ai4e-lyb .lyb-mark{position:absolute;left:100%;top:0;margin-left:18px;display:flex;flex-direction:column;align-items:center;gap:8px;padding-top:4px}
.ai4e-lyb .lyb-mark .sq{width:14px;height:14px;background:var(--lyb-lime)}
.ai4e-lyb .lyb-mark .sq2{width:14px;height:4px;background:var(--lyb-or)}
.ai4e-lyb .lyb-tagline{writing-mode:vertical-rl;font-size:14px;line-height:1;color:#9a978f;letter-spacing:.32em;margin:10px 0 0!important;white-space:nowrap}
.ai4e-lyb .lyb-contact{align-self:stretch;border-top:3px solid var(--lyb-or);padding-top:4px}
.ai4e-lyb .lyb-qr{position:relative;margin-top:40px;background:#fff;padding:10px;border-radius:14px;box-shadow:6px 6px 0 var(--lyb-lime);transition:transform .25s,box-shadow .25s}
.ai4e-lyb .lyb-qr:hover{transform:translate(-3px,-3px);box-shadow:10px 10px 0 var(--lyb-lime)}
.ai4e-lyb .lyb-qr img{display:block;width:100%;height:auto;border-radius:8px}
.ai4e-lyb .lyb-qr em{position:absolute;left:14px;top:-24px;background:var(--lyb-lime);color:#16171B;font:700 12px/1 -apple-system,"PingFang SC",sans-serif;font-style:normal;padding:6px 8px;letter-spacing:.04em;border-radius:6px 6px 0 0}
.ai4e-lyb .lyb-contact b{display:block;text-align:center;margin-top:18px;font:700 20px/1.3 -apple-system,"PingFang SC",sans-serif;letter-spacing:.02em;color:#fff}

.ai4e-lyb .lyb-main{padding:44px 56px 24px}
.ai4e-lyb .lyb-list:hover .lyb-item:not(:hover){opacity:.45}
.ai4e-lyb .lyb-item{position:relative;display:grid;grid-template-columns:150px 1fr;gap:28px;padding:30px 0;border-top:1px solid var(--lyb-line);color:var(--lyb-ink);transition:opacity .25s}
.ai4e-lyb .lyb-item:first-child{border-top:0;padding-top:12px}
.ai4e-lyb .lyb-item>*{position:relative;z-index:1}
.ai4e-lyb .lyb-item>.go{position:absolute}
.ai4e-lyb .lyb-item:before{content:"";position:absolute;top:0;bottom:0;left:-24px;right:-24px;background:var(--lyb-card);opacity:0;transform:scaleY(.94);transition:opacity .25s,transform .25s}
.ai4e-lyb .lyb-item:hover:before{opacity:1;transform:none}
.ai4e-lyb .lyb-item:active{transform:scale(.995)}
.ai4e-lyb .n{font:900 96px/.8 var(--lyb-disp);color:var(--lyb-ink);transition:transform .3s cubic-bezier(.2,.8,.2,1),-webkit-text-stroke-color .25s}
.ai4e-lyb .lyb-item:hover .n{transform:translateX(8px)}
.ai4e-lyb .off .n{color:transparent;-webkit-text-stroke:1.5px var(--lyb-faint)}
.ai4e-lyb .off:hover .n{-webkit-text-stroke-color:var(--lyb-or)}
.ai4e-lyb .on .n:after{content:"";display:block;width:0;height:6px;margin-top:14px;background:var(--lyb-lime);transition:width .3s cubic-bezier(.2,.8,.2,1)}
.ai4e-lyb .on:hover .n:after{width:56px}
.ai4e-lyb .meta{display:flex;gap:10px;align-items:center;font-size:13px;color:var(--lyb-mute);margin-bottom:12px}
.ai4e-lyb .live{background:var(--lyb-lime);color:#16171B;font-weight:700;padding:4px 8px;font-size:12px}
.ai4e-lyb .end{color:var(--lyb-or);font-weight:600}
.ai4e-lyb .lyb-item h3{font-size:24px!important;line-height:1.4!important;font-weight:600!important;margin:0 0 12px!important;padding:0 90px 0 0!important;color:var(--lyb-ink)!important}
.ai4e-lyb .off h3{font-size:18px!important;font-weight:500!important;color:var(--lyb-past)!important;transition:color .25s}
.ai4e-lyb .off:hover h3{color:var(--lyb-soft)!important}
.ai4e-lyb .hl{background:linear-gradient(var(--lyb-lime),var(--lyb-lime)) no-repeat 0 88%/100% .42em;transition:background-size .3s cubic-bezier(.2,.8,.2,1)}
.ai4e-lyb .on:hover .hl{background-size:100% 1.1em}
.ai4e-lyb .strike{background:linear-gradient(transparent 46%,var(--lyb-orb) 46%,var(--lyb-orb) 74%,transparent 74%);padding:0 3px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.ai4e-lyb .need{font-size:14px;line-height:1.75;color:var(--lyb-soft)}
.ai4e-lyb .go{right:0;top:32px;font-size:13px;color:var(--lyb-ink);font-weight:600;opacity:0;transform:translateX(-10px);transition:opacity .25s,transform .25s}
.ai4e-lyb .lyb-item:hover .go{opacity:1;transform:none}
.ai4e-lyb .off .go{color:var(--lyb-or)}
.ai4e-lyb .lyb-foot{padding:28px 0 36px;font-size:12px;line-height:1.8;color:var(--lyb-mute);border-top:1px solid var(--lyb-line)}

@media (max-width:767px){
  .ai4e-lyb{margin:0 0 24px;padding:0}
  .ai4e-lyb .lyb-page{grid-template-columns:1fr;border-radius:0;min-height:0}
  .ai4e-lyb .lyb-side{align-items:flex-start;padding:28px 16px 24px;gap:24px}
  .ai4e-lyb .lyb-brand{display:flex;flex-direction:column;gap:12px}
  .ai4e-lyb .lyb-brand h1{writing-mode:horizontal-tb;font-size:52px!important;letter-spacing:0}
  .ai4e-lyb .lyb-mark{position:static;margin-left:0;flex-direction:row;padding-top:0}
  .ai4e-lyb .lyb-tagline{writing-mode:horizontal-tb;letter-spacing:.08em;margin:0 0 0 4px!important}
  .ai4e-lyb .lyb-contact{display:grid;grid-template-columns:1fr 132px;column-gap:20px;align-items:end;padding-top:16px}
  .ai4e-lyb .lyb-contact b{grid-column:1;grid-row:1;margin-top:0;text-align:left}
  .ai4e-lyb .lyb-qr{grid-column:2;grid-row:1;margin-top:0;padding:6px;box-shadow:4px 4px 0 var(--lyb-lime)}
  .ai4e-lyb .lyb-qr em{display:none}
  .ai4e-lyb .lyb-main{padding:24px 16px}
  .ai4e-lyb .lyb-item{grid-template-columns:72px 1fr;gap:14px}
  .ai4e-lyb .n{font-size:52px}
  .ai4e-lyb .lyb-item h3{padding-right:0!important}
}

/* ===== 二、电脑首页专题区 ===== */
.ai4e-tz{display:grid;gap:20px;margin-bottom:20px}
.ai4e-tz.tz-2{grid-template-columns:2fr 1fr;align-items:stretch}
.ai4e-tz.tz-1{grid-template-columns:1fr 2fr}
.ai4e-tz .a4mb-bandwrap{margin:0!important}
.ai4e-tz.tz-2 .a4mb-bandwrap,.ai4e-tz.tz-2 .mb-band{height:100%}
.ai4e-tz.tz-2 .mb-band{grid-template-columns:290px minmax(0,1fr)!important}
.ai4e-tz.tz-2 .mb-l{padding:20px 26px 40px!important}
.ai4e-tz.tz-2 .mb-d{font-size:30px!important;line-height:1.25!important;margin:14px 0 0!important}
.ai4e-tz.tz-2 .mb-r{padding:16px 22px 40px!important}
.ai4e-tz.tz-2 .mb-listC{column-gap:36px!important;grid-template-rows:repeat(3,minmax(34px,1fr))!important}
.ai4e-tz.tz-2 .mb-listC .row{padding:6px 0!important}
.ai4e-tz.tz-2 .mb-listC .v{font-size:22px!important}
.ai4e-tz.tz-2 .mb-go{padding-top:12px!important}
.ai4e-tz.tz-2 .mb-tabsC .cg,.ai4e-tz.tz-2 .mb-tabsC .cl,.ai4e-tz.tz-2 .mb-tabsC .mb-sep{display:none!important}

.ai4e-tz .lyb-tile{display:flex;flex-direction:column;background:var(--lyb-or);border-radius:6px;padding:20px 26px 40px;text-decoration:none!important;position:relative;overflow:hidden;min-height:228px;transition:box-shadow .25s,transform .25s}
.ai4e-tz .lyb-tile:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(234,88,12,.28)}
.ai4e-tz .lyb-tile:after{content:"";position:absolute;right:-38px;bottom:-38px;width:150px;height:150px;border:22px solid rgba(255,255,255,.10);border-radius:50%}
.ai4e-tz .lyb-k{font:12px/1 var(--lyb-num);letter-spacing:.18em;display:flex;align-items:center;gap:8px;color:rgba(255,255,255,.85)}
.ai4e-tz .lyb-k i{width:8px;height:8px;background:var(--lyb-lime);display:inline-block}
.ai4e-tz .lyb-d{font:900 30px/1.25 var(--lyb-disp);margin:14px 0 10px;color:#fff}
.ai4e-tz .lyb-rows{display:flex;flex-direction:column;position:relative;z-index:1}
.ai4e-tz .lyb-row{display:grid;grid-template-columns:30px 1fr;align-items:baseline;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.28)}
.ai4e-tz .lyb-row:last-child{border-bottom:0}
.ai4e-tz .lyb-row b{font:800 14px var(--lyb-num);color:#fff;letter-spacing:.02em}
.ai4e-tz .lyb-row span{font-size:15px;line-height:1.45;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:linear-gradient(#fff,#fff) no-repeat 0 92%/0 2px;transition:background-size .3s}
.ai4e-tz .lyb-tile:hover .lyb-row span{background-size:100% 2px}
.ai4e-tz .lyb-empty{font-size:14px;color:rgba(255,255,255,.85)}
.ai4e-tz .lyb-go{margin-top:auto;padding-top:14px;font-size:13px;color:#fff;display:inline-flex;gap:8px;align-items:center;position:relative;z-index:1}
.ai4e-tz .lyb-go i{display:inline-block;width:20px;height:20px;border-radius:50%;background:#16171B;color:var(--lyb-lime);font-style:normal;text-align:center;line-height:20px;font-weight:700}

/* ===== 三、手机「专题」频道横条 ===== */
.tz-strips{display:flex;flex-direction:column;gap:12px;padding:12px 16px 4px}
.tz-strip{display:flex;align-items:center;justify-content:space-between;gap:12px;border-radius:6px;padding:16px 16px 15px;text-decoration:none!important}
.tz-strip .t{font:900 22px/1.1 var(--lyb-disp);display:flex;align-items:center;gap:8px}
.tz-strip .s{font-size:13px;line-height:1.5;margin-top:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100vw - 110px)}
.tz-strip .arr{font-size:18px;flex:none}
.tz-strip.lyb{background:var(--lyb-or);color:#fff!important}
.tz-strip.lyb .t i{width:8px;height:8px;background:var(--lyb-lime);display:inline-block}
.tz-strip.lyb .s{color:rgba(255,255,255,.88)}
.tz-strip.lyb .s b{color:#fff}
.tz-strip.lyb .arr{color:#fff}
.tz-strip.mb{background:#16171B;color:#fff!important}
.tz-strip.mb .t{font-family:"AI4EMBDisp","Noto Sans SC","PingFang SC",sans-serif}
.tz-strip.mb .t i{width:14px;height:3px;background:var(--lyb-or);display:inline-block}
.tz-strip.mb .s{color:#b9b6b0}
.tz-strip.mb .s b{color:var(--lyb-lime)}
.tz-strip.mb .arr{color:var(--lyb-lime)}
.ai4e-topics.tz-has-strips #mbBandWrap{display:none!important}

/* ===== 四、单篇文章顶部状态条 ===== */
.lyb-badge{--lyb-or:#EA580C;display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 24px;padding:12px 16px;background:#f7f5f2;border-radius:4px;font:13px/1.4 -apple-system,"PingFang SC",sans-serif;color:#5f5a53}
.lyb-badge .st{font-weight:700;font-size:12px;padding:3px 8px;border-radius:2px}
.lyb-badge.on .st{background:#C8F529;color:#16171B}
.lyb-badge.off .st{color:var(--lyb-or);box-shadow:inset 0 0 0 1px var(--lyb-or)}
.lyb-badge .nm{color:#16171B;font-weight:600}
.lyb-badge .lk{margin-left:auto;color:var(--lyb-or)!important;text-decoration:none!important;font-weight:600}
.lyb-badge .lk i{font-style:normal}
@media (max-width:767px){.lyb-badge{margin:0 0 20px;padding:10px 12px}}
@media (prefers-color-scheme:dark){.lyb-badge{background:#24252b}.lyb-badge .nm{color:#eeece8}.lyb-badge,.lyb-badge .st{color:#b9b5ae}.lyb-badge.on .st{color:#16171B}.lyb-badge.off .st{color:var(--lyb-or)}}

/* ===== 深色模式：主题跟随系统，写死的浅色都要翻过来 ===== */
@media (prefers-color-scheme:dark){
  .ai4e-lyb,.ai4e-tz,.tz-strips{--lyb-bg:#1b1c20;--lyb-card:#24252b;--lyb-ink:#eeece8;--lyb-mute:#9a968f;--lyb-faint:#4d4e55;--lyb-line:#2f3036;--lyb-soft:#b9b5ae;--lyb-past:#7f7b75}
  .ai4e-lyb .lyb-side{background:#0f1013}
  .ai4e-lyb .hl{color:#16171B;background-size:100% 1.1em}
  .ai4e-lyb .on .n{color:#eeece8}
}
@media (hover:none){.ai4e-lyb .lyb-list:hover .lyb-item:not(:hover){opacity:1}.ai4e-lyb .go{display:none}}
@media (prefers-reduced-motion:reduce){.ai4e-lyb *,.ai4e-tz *{transition:none!important}}