/* Keep the extracted mobile presentation on phones and on wider screens. */
html { background: #f4f5f7; }
body { --notice-bottom: 142px; width: 100%; max-width: 480px; margin: 0 auto; background: #fafafa; }
body.has-back-top { --notice-bottom: 202px; }
.static-header { position: fixed; top: 0; width: 100%; max-width: 480px; height: 70px; background: #fff; box-shadow: 0 2px 4px #0000000d; z-index: 1000; }
.static-header-inner { display: flex; align-items: center; height: 100%; padding: 0 48px; }
.static-header .logo { display: block; width: 100px; }
.static-header img { width: 100%; height: auto; }
.article-main, .wrapper > .content, .wrapper > .right { min-width: 0; }
.article-main img { max-width: 100%; height: auto; }
.article-main .html { overflow-wrap: anywhere; }
.footer .footer-nav { padding-bottom: 0; }
.footer .cent .footer-nav .logo-section .imgs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; width: 100%; }
.footer .cent .footer-nav .logo-section .imgs .link { display: flex; align-items: center; justify-content: center; flex: 0 0 40px; width: 40px; height: 40px; margin: 0; }
.footer .cent .footer-nav .logo-section .imgs .img { display: block; width: 40px; height: 40px; max-width: 40px; margin: 0; object-fit: contain; }
.footer .cent .footer-nav .logo-section .imgs .min { display: block; width: 36px; height: 36px; max-width: 36px; margin: 0; object-fit: contain; }
[hidden] { display: none !important; }
.share .btns { position: relative; overflow: visible; }
.static-share-panel { position: absolute; top: calc(100% + 8px); right: 0; display: flex; flex-wrap: wrap; gap: 8px; width: 280px; padding: 10px; background: #fff; border: 1px solid #e0e0e0; border-radius: 12px; box-shadow: 0 8px 24px #0000001f; z-index: 20; color: #001489; font-size: 13px; }
.static-share-panel a:hover { text-decoration: underline; }
.static-back-top { display: flex; align-items: center; justify-content: center; flex: none; width: 50px; height: 50px; border: 0; border-radius: 50%; background: #d6d6d6; cursor: pointer; box-shadow: 0 2px 8px #00000026; transition: background-color .3s ease, box-shadow .3s ease, transform .3s ease; }
.static-back-top svg { display: block; width: 24px; height: 24px; stroke: #222; }
.static-back-top:hover { background: #001489; box-shadow: 0 4px 12px #0003; transform: translateY(-3px); }
.static-back-top:hover svg { stroke: #fff; }
.static-back-top:active { transform: translateY(-1px); }
.widget-launchers { position: fixed; right: 20px; bottom: 20px; display: flex; flex-direction: column; align-items: center; gap: 10px; z-index: 1200; }
.widget-notice-toggle { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid #e3e8ed; border-radius: 50%; background: #fff; color: #001489; font-size: 12px; cursor: pointer; box-shadow: 0 3px 12px #00000014; }
.widget-message-link { display: flex; align-items: center; justify-content: center; flex: 0 0 56px; width: 56px; height: 56px; background: #1d6cf8; color: #fff; border-radius: 16px; box-shadow: 0 6px 24px #00000014; }
.widget-message-link svg { display: block; width: 32px; height: 32px; }
.widget-notice { position: fixed; right: 20px; bottom: var(--notice-bottom); width: min(320px, calc(100vw - 88px)); z-index: 1200; }
.widget-notice-card { max-height: calc(100vh - var(--notice-bottom) - 64px); max-height: calc(100dvh - var(--notice-bottom) - 64px); overflow-y: auto; overscroll-behavior: contain; padding: 18px 16px 20px; border-radius: 24px; background: #fff; box-shadow: 0 12px 48px #102b3826; color: #111; }
.widget-notice-title { margin: 0 0 10px; color: #666; font-size: 14px; line-height: 21px; font-weight: 500; }
.widget-notice-message { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 16px; line-height: 1.5; font-weight: 400; }
.widget-notice-close { position: absolute; top: -44px; right: 0; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: #fff; color: #111; box-shadow: 0 4px 20px #0000000d; cursor: pointer; }
.widget-notice-close svg { width: 20px; height: 20px; }
.widget-notice-avatar { position: absolute; left: -48px; bottom: 8px; width: 40px; height: 40px; }
button:focus-visible, a:focus-visible { outline: 2px solid #0068e3; outline-offset: 3px; }
@media (max-width: 767px) {
  body.has-back-top { --notice-bottom: 197px; }
  .static-back-top { width: 45px; height: 45px; }
  .static-back-top svg { width: 20px; height: 20px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .static-back-top { transition: none; } }