.article-page{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding:32px 0 8px}
.article-page a,.article-page a.up,.article-page a.down{position:relative;isolation:isolate;display:flex;float:none!important;flex-direction:column;width:auto!important;height:118px;margin:0;padding:17px 19px;overflow:hidden;border:1px solid rgba(255,255,255,.18);border-radius:14px;background-color:#202a38;background-position:center;background-repeat:no-repeat;background-size:cover;color:#fff;box-shadow:0 10px 24px -18px rgba(22,39,65,.72);box-sizing:border-box;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease,background-size .35s ease}
.article-page a:only-child{grid-column:1/-1}
.article-page a:before{position:absolute;inset:0;z-index:-2;width:auto;height:auto;background:linear-gradient(115deg,rgba(10,18,31,.92) 0%,rgba(16,25,40,.78) 48%,rgba(14,22,34,.58) 100%);content:""}
.article-page a.down:before{background:linear-gradient(245deg,rgba(10,18,31,.92) 0%,rgba(16,25,40,.78) 48%,rgba(14,22,34,.58) 100%)}
.article-page a:after{position:absolute;inset:0;z-index:-1;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.08),transparent 42%);content:"";pointer-events:none}
.article-page a .meta{display:flex;align-items:center;justify-content:space-between;flex:0 0 auto;width:100%;min-width:0;color:#fff;font-size:12px;line-height:24px}
.article-page a .meta .fl,.article-page a .meta .fr{display:inline-flex;float:none;align-items:center;min-width:0}
.article-page a .meta .fl{gap:5px;padding:0 9px;border:1px solid rgba(255,255,255,.2);border-radius:999px;background:rgba(255,255,255,.12);font-weight:600;backdrop-filter:blur(4px)}
.article-page a .meta .fr{color:rgba(255,255,255,.76);font-size:11px;white-space:nowrap}
.article-page a .meta i{font-size:12px;transition:transform .2s ease}
.article-page a h3{display:-webkit-box;position:relative;z-index:1;max-width:100%;margin:auto 0 0;overflow:hidden;color:#fff;font-size:16px;font-weight:700;line-height:24px;text-overflow:ellipsis;text-shadow:0 1px 3px rgba(0,0,0,.46);word-break:break-word;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.article-page a:hover{border-color:rgba(126,176,255,.62);background-size:108%;box-shadow:0 16px 30px -18px rgba(30,84,162,.8);transform:translateY(-2px)}
.article-page a.up:hover .layui-icon-left{transform:translateX(-2px)}.article-page a.down:hover .layui-icon-right{transform:translateX(2px)}
.article-page a:focus-visible{border-color:#77aef3;outline:3px solid rgba(74,144,226,.3);outline-offset:2px}
body.night .article-page a{border-color:rgba(151,171,196,.2);box-shadow:0 12px 28px -18px rgba(0,0,0,.9)}body.night .article-page a:hover{border-color:rgba(112,165,235,.62)}
@media screen and (max-width:640px){.article-page{grid-template-columns:1fr;gap:11px;padding:24px 0 4px}.article-page a,.article-page a.up,.article-page a.down{grid-column:1;height:106px;padding:14px 15px;border-radius:12px}.article-page a h3{font-size:15px;line-height:22px}.article-page a .meta{line-height:22px}.article-page a .meta .fl{padding:0 8px}.article-page a:hover{background-size:cover;transform:none}}
@media (prefers-reduced-motion:reduce){.article-page a,.article-page a .meta i{transition:none}.article-page a:hover{transform:none}}