* { box-sizing: border-box; }
body { margin: 0; padding-top: 65px; background: #f2f4f5; color: #212529; font-family: -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC", "WenQuanYi Micro Hei", sans-serif; font-size: 16px; font-weight: 400; line-height: 1.5; }
a { color: inherit; text-decoration: none; }
a:hover { color: #0056b3; }
a:focus-visible, input:focus-visible, button:focus-visible { outline: 2px solid #e45956; outline-offset: 3px; }
.navbar { position: fixed; z-index: 10; inset: 0 0 auto; height: 58px; background: #fff; box-shadow: 0 1px 4px #9c9c9c80; }
nav { display: flex; align-items: center; width: calc((100% - 16px) * 10 / 12); height: 100%; margin-left: calc((100% - 16px) / 12); }
.brand { display: grid; place-items: center; align-self: stretch; width: 58px; flex-shrink: 0; margin-right: 20px; background: #e45956; }
.brand img { width: 28px; height: auto; }
.nav-link { position: relative; display: flex; align-items: center; justify-content: center; height: 100%; padding: 5px 10px; white-space: nowrap; font-size: 15px; color: #525252; }
.active::after { content: ""; position: absolute; margin-top: 20px; width: 12px; height: 3px; background: #e45956; border-radius: 3px; }
nav form { position: relative; margin: 0 0 0 10px; }
input { display: block; width: 212px; border: 1px solid #e2e2e2; border-radius: 23px; padding: 7px 36px 7px 20px; background: #efefef; color: grey; font: inherit; font-size: 14px; line-height: 21px; }
input::placeholder { color: #b9b9b9; opacity: 1; }
nav button { position: absolute; top: 0; right: 10px; display: grid; place-items: center; width: 36px; height: 100%; padding: 0; border: 0; background: transparent; color: grey; cursor: pointer; }
nav button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.mobile-search { display: none; }
.login { margin-left: auto; padding: 8px 0; font-size: 14px; }
.content { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.feed { grid-column: 2 / span 6; min-width: 0; }
aside { grid-column: 8 / span 4; min-width: 0; padding: 0 15px; }
.ae { position: relative; background: #fff; }
.ae::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; border-bottom: 1px solid #ebeeef; pointer-events: none; }
.article-link { display: flex; }
.ae-container { display: flex; flex-direction: column; justify-content: center; flex: 1; min-width: 0; padding: 16px 10px 16px 20px; }
.tp { display: table; table-layout: fixed; width: 100%; padding-top: 2px; overflow-wrap: anywhere; }
.tp span { color: #1a1a1a; font-size: 15px; line-height: 20px; letter-spacing: .4px; }
.meta { font-size: 13px; color: #929191; margin-top: 3px; }
.ae-avatar { flex-shrink: 0; padding: 20px 10px; }
.ae-profile-img { display: block; width: 45px; height: 45px; border-radius: 2px; object-fit: cover; }
.load { display: flex; justify-content: center; padding: 5px 0; }
.load[hidden] { display: none; }
.load-more { display: block; width: 100%; border: 0; border-radius: 3px; background: #fff; color: #e45956; text-align: center; padding: 10px; font-size: 14px; line-height: 21px; letter-spacing: 1px; cursor: pointer; }
.load-more[aria-disabled="true"] { opacity: .6; cursor: wait; }
#load-status { color: #777; text-align: center; font-size: 14px; }
#load-status:empty { display: none; }
.hot { background: #fff; padding: 10px; }
h2 { margin: 0; color: #8590a6; font-size: 14px; line-height: 24px; font-weight: 900; }
h2 + .hot-a { margin-top: 5px; }
.hot-a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; padding: 5px 0; line-height: 23px; font-size: 13px; color: #676565; letter-spacing: .4px; }
.brand-info { margin-top: 5px; padding: 10px; color: #8590a6; font-size: 13px; }
.brand-info > div { padding: 5px 0; }
.promotion { color: #f44336; font-weight: bold; }
.empty { margin: 0; padding: 40px 20px; text-align: center; background: #fff; color: #777; }
@media (max-width: 767px) {
  body { padding-top: 60px; }
  .content { display: block; }
  aside { display: none; }
  nav { width: calc(100% - 16px); margin-left: 0; }
}
@media (max-width: 700px) {
  .nav-link { font-size: 14px; }
  nav form { display: none; }
  .mobile-search { display: flex; }
}
.auth-panel { padding: 20px; background: #fff; }
.auth-panel input { width: calc(100% - 10px); max-width: 300px; margin: 5px; border: 2px solid #d2d5dc; border-radius: 3px; padding: 5px 10px; background: #fff; color: #333; }
.auth-actions { display: flex; align-items: center; flex-wrap: wrap; }
.auth-actions button { margin: 5px; padding: 5px 10px; border: 2px solid #e45956; border-radius: 3px; background: #e45956; color: #fff; font: inherit; cursor: pointer; }
.auth-actions button:disabled { opacity: .6; }
.auth-actions a { padding: 5px 10px; border: 2px solid #fff; color: #8590a6; font-size: 14px; }
#signin-status { margin: 5px; color: #c33; font-size: 14px; }
#signin-status:empty { display: none; }
.account-menu { position: relative; margin-left: auto; font-size: 14px; min-width: 0; max-width: 120px; }
.account-menu summary { cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 10px 0; }
.account-menu .account-links { position: absolute; right: 0; top: 100%; min-width: 160px; padding: 6px 0; background: #fff; box-shadow: 0 2px 8px #0002; }
.account-links a { display: block; padding: 8px 14px; }
.membership { display: flex; flex-direction: column; align-items: center; margin: 0 15px; padding: 0 0 10px; background: #fff; text-align: center; letter-spacing: .5px; }
.membership .benefits { max-width: 100%; padding: 10px; background: #efefef; text-align: left; font-size: 13px; line-height: 19.5px; overflow-wrap: anywhere; }
.alipay-only { color: red; font-weight: 700; }
.plans { display: flex; flex-direction: column; align-items: center; margin: 0; gap: 0; }
.membership .gopay { display: flex; justify-content: center; width: 200px; max-width: 100%; margin-top: 10px; border: 2px solid #f36b6b; border-radius: 25px; background: #fff; padding: 10px 20px; color: #4a4a4a; font: inherit; font-size: 14px; line-height: 24px; letter-spacing: .5px; cursor: pointer; }
.gopay strong { font-weight: 900; margin-left: 4px; }
.membership button:disabled { opacity: .5; cursor: wait; }
.membership .signin-link { color: #e45956; font-size: 13px; }
#payment-box[hidden] { display: none; }
#payment-box { display: flex; flex-direction: column; align-items: center; margin-bottom: 24px; }
#payment-box img { display: block; width: 146px; height: 146px; margin: 0; image-rendering: pixelated; }
#payment-box p { margin: 5px 0 0; font-size: 12px; }
#payment-box .scan-label { color: gray; margin-top: 8px; }
#product-name { color: #f44336; }
#payment-box .payment-hint { color: #4a4a4a; }
#check-payment { margin-top: 8px; padding: 0; border: 0; background: transparent; color: #8590a6; font: inherit; font-size: 12px; cursor: pointer; text-decoration: underline; }
.membership .purchase-hint { margin: 10px 0 0; color: gray; font-size: 12px; }
#payment-status { margin: 6px 10px 0; color: #777; font-size: 12px; }
#payment-status:empty { display: none; }
.daily-date { margin: 5px 0; padding: 10px; width: 160px; border-radius: 0 20px 20px 0; background: #cecece; color: #fff; font-size: 14px; font-weight: 400; line-height: 21px; }
.profile-page { max-width: 760px; margin: 0 auto; padding: 20px; background: #fff; }
.profile-page h1 { margin: 0 0 16px; font-size: 21px; }
.profile-tabs { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 20px; color: #607d8b; font-size: 14px; }
.profile-page button { border: 1px solid #e45956; border-radius: 4px; padding: 6px 12px; background: #fff; color: #e45956; font: inherit; font-size: 14px; cursor: pointer; }
.profile-page .settings-form > button { background: #e45956; color: #fff; }
.settings-form label { display: block; margin-bottom: 8px; font-size: 15px; }
.settings-form select { padding: 6px 12px; min-width: 120px; font: inherit; font-size: 14px; }
.help { max-width: 560px; margin: 16px 0; font-size: 13px; line-height: 1.7; color: #777; }
.subscription-card { padding: 18px 0; border-bottom: 1px solid #ebeeef; }
.author-heading { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.author-heading > div { min-width: 0; overflow-wrap: anywhere; }
.author-heading img { width: 45px; height: 45px; flex-shrink: 0; border-radius: 3px; }
.author-heading p { margin: 4px 0 12px; color: #777; font-size: 13px; }
.author-name { font-size: 16px; }
.rss-row { display: flex; gap: 8px; margin: 12px 0; align-items: center; }
.rss-row input { flex: 1; min-width: 0; width: 100%; padding: 7px 10px; border-radius: 4px; color: #555; }
.rss-row button { flex-shrink: 0; }
.subscription-actions { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: #607d8b; }
.notice { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px; background: #f2f7f3; color: #38683e; font-size: 14px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.author-profile { padding-bottom: 16px; }
.author-articles .ae-container { padding-left: 0; }
#profile-status { color: #607d8b; font-size: 14px; }
@media(max-width: 480px) { .profile-page { padding: 16px; } .rss-row { flex-wrap: wrap; } .rss-row input { flex-basis: 100%; } }
.search-heading { padding: 3px 5px; color: gray; font-size: 13px; font-weight: 400; }
.search-author { display: flex; gap: 10px; align-items: center; padding: 16px 10px; margin-bottom: 5px; background: #fff; }
.search-author > div { min-width: 0; overflow-wrap: anywhere; }
.search-name { color: #929191; font-size: 14px; }
.mobile-search-form { display: none; }
@media (max-width: 700px) {
 .mobile-search-form { display: flex; gap: 8px; padding: 10px; }
 .mobile-search-form input { flex: 1; min-width: 0; width: auto; }
 .mobile-search-form button { border: 0; background: transparent; color: #525252; font: inherit; font-size: 14px; }
}
.sub-article { border-top: 1px solid #ebeeef; margin-left: 20px; }
.sub-article .ae-container { padding: 10px 10px 10px 20px; }
.sub-article .tp span { font-size: 14px; color: #555; }
.reading-article { background: #fff; padding: 20px; line-height: 2; overflow-wrap: anywhere; }
.reading-article h1 { font-size: 24px; line-height: 1.5; margin: 0 0 10px; }
.rich-media-content { margin-top: 16px; }
.rich-media-content img, .rich-media-content video { max-width: 100% !important; height: auto !important; }
.rich-media-content pre { white-space: pre-wrap; }
.rich-media-content table { max-width: 100%; }

.settings-links { display: flex; flex-direction: column; margin-bottom: 10px; padding: 10px; border-radius: 3px; background: #fff; font-size: 14px; color: #607d8b; letter-spacing: .3px; }
.legacy-settings { padding: 20px; background: #fff; }
.legacy-settings label { margin: 5px; color: grey; font-size: 14px; }
.legacy-settings label:not(:first-child) { margin-top: 15px; }
.legacy-settings select { display: block; width: 100px; min-width: 0; margin: 5px; padding: 0; font: inherit; }
.legacy-settings > div { margin-top: 10px; }
.legacy-settings button { margin: 5px; padding: 3px 15px; border: 1px solid #e45956; border-radius: 3px; background: #e45956; color: #fff; font: inherit; font-size: 14px; cursor: pointer; }
.subscribed-author { display: block; }
.subscribed-author-content { display: flex; gap: 10px; align-items: center; padding: 16px 10px; }
.subscribed-author-text { min-width: 0; flex: 1; }
.subscribed-author-name { color: #8c8b8b; font-size: 14px; letter-spacing: .4px; }

.subscribed-author .tp span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; line-height: 22.5px; }

.author-layout { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); margin-top: 0; }
.author-sidebar { grid-column: 2 / span 3; min-width: 0; margin-bottom: 5px; }
.author-layout .author-profile { padding: 10px; background: #fff; }
.author-layout .author-heading { gap: 10px; align-items: center; }
.author-layout .author-heading img { width: 40px; height: 40px; border-radius: 0; }
.author-layout h1 { flex: 1; min-width: 0; margin: 0; padding: 10px 0; font-size: 16px; line-height: 24px; font-weight: 900; letter-spacing: .4px; overflow-wrap: anywhere; }
.author-layout form { flex-shrink: 0; margin: 0; }
.author-layout button, .author-signin { padding: 3px 12px; border: 0; border-radius: 15px; background: #e45956; color: #fff; font: inherit; font-size: 12px; letter-spacing: .4px; cursor: pointer; white-space: nowrap; }
.author-layout .unsubscribe { background: #d0cccc; }
.author-description { margin: 10px 0 0; color: grey; font-size: 14px; line-height: 24px; letter-spacing: .4px; overflow-wrap: anywhere; }
.author-rss { margin: 10px 0 5px; line-height: 24px; }
.author-rss button { padding: 5px 10px; background: #b3b0b0; letter-spacing: .5px; }
.author-qr { margin-top: 10px; padding: 10px; background: #fff; }
.author-qr img { display: block; width: 129px; height: 129px; }
.author-qr p { margin: 0 0 0 10px; color: gray; font-size: 14px; }
.author-layout #profile-status:empty { display: none; }
.author-layout .author-articles { grid-column: 5 / span 6; min-width: 0; padding-left: 5px; }
.admin-author-tools { margin-top: 8px; color: gray; font-size: 14px; line-height: 24px; letter-spacing: .4px; }
.admin-author-count { padding: 5px; font-size: 14px; }
.admin-category-form { display: flex; align-items: center; gap: 10px; margin: 10px 0 0 !important; }
.author-layout .admin-category-input { width: min(100%, 280px); padding: 2px 10px; border: 1px solid #e6e4e4; background: #fff; color: #555; font-size: 14px; }
.author-layout .admin-category-form button, .author-layout .admin-rss-form button { background: #b3b0b0; }
.admin-rss-form { padding: 10px 5px; }
.admin-push-accounts { padding: 0 5px; }
.admin-push-accounts span { margin: 0 10px; color: blue; }
.author-entry-row { display: flex; align-items: center; padding: 0 5px; }
.author-entry-row .article-link { flex: 1; min-width: 0; }
.author-entry-row .ae-container { margin-left: 10px; }
.author-layout .admin-recommend-form { margin: 0 5px; }
.author-layout .admin-recommend-form button { min-width: 38px; padding: 2px; border-radius: 0; background: #007bff; font-size: 12px; }
.admin-pv { margin-left: 25px; color: #1a1a1a; font-size: 12px; }
.author-layout .ae-container { margin-left: 10px; padding: 16px 5px; }
.author-article-meta { display: flex; align-items: center; color: grey; font-size: 14px; letter-spacing: .4px; }
.author-article-meta .meta-dot { margin: 0 6px; }
.author-article-meta time { font-size: 12px; }
.author-layout .tp span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; line-height: 22.5px; }
.member-hint { margin: 10px 0; color: gray; font-size: 14px; }
@media (max-width: 767px) {
 .author-layout { display: block; }
 .author-layout .author-articles { padding-left: 0; }
 .author-qr { display: none; }
}

.subscribed-entry-content { display: flex; align-items: center; gap: 10px; padding: 16px 10px; }
.subscribed-avatar { display: block; width: 45px; height: 45px; flex-shrink: 0; }
.subscribed-entry-text { flex: 1; min-width: 0; }
.subscribed-entry-meta { display: flex; align-items: center; color: #8c8b8b; font-size: 14px; letter-spacing: .4px; }
.subscribed-entry-meta > span { margin: 0 6px; }
.subscribed-entry-meta time { font-size: 12px; }
.subscribed-entry .tp span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 22.5px; }
.article-layout .reading-article { padding: 10px; letter-spacing: .5px; }
.article-layout .reading-article h1 { line-height: 1.2; margin: 0 0 8px; }
.article-layout .reading-article .meta { margin: 0 0 10px; font-size: 14px; color: #b1b1b1; }
.article-layout .reading-article .meta a { color: #8590a6; }
.article-layout .reading-article .meta time { margin-left: 10px; }
.article-layout .rich-media-content { margin-top: 0; }
.article-layout .reading-related { grid-column: 8 / span 3; margin-left: 10px; padding: 10px; background: #fff; align-self: start; }
.article-layout .reading-related h2 { margin-bottom: 5px; letter-spacing: 1px; }

.account-menu summary { list-style: none; text-decoration: underline; font-weight: bold; }
.account-menu summary::-webkit-details-marker { display: none; }
.auth-panel form { display: flex; flex-direction: column; }
@media (max-width: 767px) {
 .article-layout .reading-related { display: block; margin: 5px 0 0; }
}