/* ========================================
   m4-pk.css - PK 对决页专属样式 (Mobile-first)
   mation4 对比站：VS 双卡 / PK 投票 / 两极评论 / 正反观点 / 争议避雷
   ======================================== */

/* ========== A/B 双卡并排 ========== */
.du-card-row{display:flex;flex-direction:column;gap:16px;margin-bottom:22px;}
.du-card{background:#1a1a2e;border:1px solid rgba(255,255,255,.05);}
.du-card-name{font-weight:700;}
.du-card-desc{max-height:96px;overflow:hidden;}

/* ========== PK 投票站队 ========== */
.du-pk{background:#14141f;border:1px solid rgba(255,255,255,.07);border-radius:12px;padding:20px 22px;margin-bottom:22px;}
.du-pk-head{font-size:16px;font-weight:700;color:#fff;margin-bottom:16px;display:flex;flex-wrap:wrap;align-items:center;gap:6px;}
.du-pk-name{color:#f5c518;}
.du-pk-btns{display:flex;flex-direction:column;gap:10px;margin-bottom:16px;}
.du-pk-btn{flex:1;padding:11px 16px;border:none;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;color:#fff;transition:transform .15s,box-shadow .15s;}
.du-pk-btn:active{transform:scale(.97);}
.du-pk-btn[data-side="a"]{background:linear-gradient(135deg,#e94560,#c23152);}
.du-pk-btn[data-side="b"]{background:linear-gradient(135deg,#3b82f6,#2563eb);}
.du-pk-bar{display:flex;height:14px;border-radius:7px;overflow:hidden;background:rgba(255,255,255,.06);margin-bottom:10px;}
.du-pk-bar-a{background:linear-gradient(90deg,#e94560,#c23152);transition:width .6s ease;}
.du-pk-bar-b{background:linear-gradient(90deg,#3b82f6,#2563eb);transition:width .6s ease;}
.du-pk-num{display:flex;justify-content:space-between;font-size:12px;color:#8a8aa0;flex-wrap:wrap;gap:6px;}
.du-pk-num b{color:#f5c518;font-weight:700;}
.du-pk-voted{margin-top:12px;padding:10px 14px;background:rgba(245,197,24,.1);border:1px solid rgba(245,197,24,.25);border-radius:8px;color:#f5c518;font-size:13px;}

/* ========== 两极分化评论 ========== */
.du-cmt{background:#14141f;border:1px solid rgba(255,255,255,.07);border-radius:12px;padding:20px 22px;margin-bottom:22px;}
.du-cmt-head{font-size:16px;font-weight:700;color:#fff;margin-bottom:16px;}
.du-cmt-cols{display:flex;flex-direction:column;gap:16px;}
.du-cmt-good,.du-cmt-bad{flex:1;background:#1a1a2e;border-radius:10px;padding:14px 16px;border:1px solid rgba(255,255,255,.04);}
.du-cmt-title{font-size:14px;font-weight:700;color:#fff;margin-bottom:12px;}
.du-cmt-good .du-cmt-title{color:#4ade80;}
.du-cmt-bad .du-cmt-title{color:#f87171;}
.du-cmt-item{padding:10px 0;border-bottom:1px dashed rgba(255,255,255,.06);}
.du-cmt-item:last-child{border-bottom:none;}
.du-cmt-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;margin-bottom:6px;}
.du-cmt-user{color:#d0d0e0;font-weight:600;}
.du-stars{color:#f5c518;font-size:12px;letter-spacing:1px;}
.du-cmt-date{color:#5a5a70;}
.du-cmt-body{color:#a0a0b0;font-size:13px;line-height:1.8;}

/* ========== 正反方观点 ========== */
.du-opinion{background:#14141f;border:1px solid rgba(255,255,255,.07);border-radius:12px;padding:20px 22px;margin-bottom:22px;}
.du-opinion-head{font-size:16px;font-weight:700;color:#fff;margin-bottom:16px;}
.du-opinion-cols{display:flex;flex-direction:column;gap:16px;}
.du-for,.du-against{flex:1;background:#1a1a2e;border-radius:10px;padding:14px 16px;border:1px solid rgba(255,255,255,.04);}
.du-opinion-title{font-size:14px;font-weight:700;color:#fff;margin-bottom:10px;}
.du-for .du-opinion-title{color:#4ade80;}
.du-against .du-opinion-title{color:#f87171;}
.du-op-list{liebiao-style:none;}
.du-op-list li{padding:8px 0 8px 20px;position:relative;color:#a0a0b0;font-size:13px;line-height:1.8;border-bottom:1px dashed rgba(255,255,255,.05);}
.du-op-list li:last-child{border-bottom:none;}
.du-for .du-op-list li::before{content:"＋";position:absolute;left:0;color:#4ade80;font-weight:700;}
.du-against .du-op-list li::before{content:"－";position:absolute;left:0;color:#f87171;font-weight:700;}

/* ========== 争议避雷盘点 ========== */
.du-avoid{background:#14141f;border:1px solid rgba(255,255,255,.07);border-radius:12px;padding:20px 22px;margin-bottom:22px;}
.du-avoid-head{font-size:16px;font-weight:700;color:#fff;margin-bottom:14px;}
.du-avoid-list{liebiao-style:none;counter-reset:avoid;}
.du-avoid-item{display:grid;grid-template-columns:26px 1fr auto;gap:8px;align-items:center;padding:10px 0;border-bottom:1px dashed rgba(255,255,255,.06);}
.du-avoid-item:last-child{border-bottom:none;}
.du-rank{width:24px;height:24px;border-radius:6px;background:rgba(233,69,96,.15);color:#f87171;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;}
.du-avoid-name{color:#d0d0e0;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.du-avoid-name:hover{color:#e94560;}
.du-tag{display:inline-block;padding:2px 8px;background:rgba(245,197,24,.12);border:1px solid rgba(245,197,24,.25);border-radius:10px;color:#f5c518;font-size:11px;white-space:nowrap;}
.du-score{color:#f5c518;font-size:12px;font-weight:700;}
.du-avoid-cmt{grid-column:1/-1;color:#8a8aa0;font-size:12px;line-height:1.7;margin-top:2px;}

/* ========== 平板 / 桌面端增强 ========== */
@media (min-width:768px){
    .du-card-row{flex-direction:row;}
    .du-pk-btns{flex-direction:row;}
    .du-cmt-cols{flex-direction:row;}
    .du-opinion-cols{flex-direction:row;}
    .du-card{flex:1;}
}