/* Shared website header and footer; included by pc/layout on every page. */
body.pc-app .brand-icon { display:block; width:auto; height:calc(var(--space-xl) * 2); max-width:calc(var(--space-xxl) * 7.5); object-fit:contain; flex-shrink:0; }
body.pc-app { --site-content-width:calc(clamp(15px,.9375vw,18px)*79.688); --site-content-gutter:15px; }
body.pc-app[data-page=vip],body.pc-app .site-header,body.pc-app .site-footer { --text:#2d2d33; --muted:#767680; --gradient:linear-gradient(90deg,#3babff,#5555ff); --radius-btn:80px; font-family:"Microsoft YaHei","PingFang SC",Arial,sans-serif; }
body.pc-app .site-header { height:85px; border:0; background:#fff; }
body.pc-app .header-inner { width:min(100%,var(--site-content-width)); max-width:none; padding:0 var(--site-content-gutter); gap:40px; }
body.pc-app .brand { color:var(--primary); font-size:28px; letter-spacing:0; }
body.pc-app #navigation { gap:48px; margin-left:12px; }
body.pc-app .account .button { min-height:36px; padding:8px 22px; background:var(--primary); font-size:14px; font-weight:400; }
body.pc-app .site-footer { --text:#2d2d33; --muted:#6B7280; --border:#E5E7EB; --gradient:linear-gradient(90deg,#3babff,#5555ff); --radius-btn:80px; font-family:"Microsoft YaHei","PingFang SC",Arial,sans-serif; }
body.pc-app .site-header { height:85px; border:0; background:#fff; }
body.pc-app .header-inner { width:min(100%,var(--site-content-width)); max-width:none; padding:0 var(--site-content-gutter); gap:40px; }
body.pc-app .brand { color:var(--primary); font-size:28px; letter-spacing:0; }
body.pc-app #navigation { gap:48px; margin-left:12px; }
body.pc-app .account .button { min-height:36px; padding:8px 22px; background:var(--primary); font-size:14px; font-weight:400; }
body.pc-app .account-menu { display:block; font-size:14px; }
body.pc-app .account-menu summary { min-height:0; border-radius:50%; }
body.pc-app .account-menu summary > .account-avatar { display:grid; }
/* Ported from shuiyinyun.com/tools useravatar-popper; original background and avatar are local assets. */
body.pc-app .account-card-top { display:flex; align-items:center; gap:var(--space-md); }
body.pc-app .account-card-info { flex:1; min-width:0; }
body.pc-app .account-nickname { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:1.146rem; }
body.pc-app .account-card-balance { display:flex; flex-wrap:wrap; gap:var(--space-sm); margin-top:var(--space-xs); font-size:var(--font-sm); }
body.pc-app .account-card-balance a { color:var(--muted); }
body.pc-app .account-card-balance .account-recharge { color:var(--primary); }
body.pc-app .account-card-arrow { color:var(--muted); flex-shrink:0; }
body.pc-app .account-card-arrow svg { width:var(--font-md); height:var(--font-md); }
body.pc-app .account-membership { display:flex; align-items:center; justify-content:space-between; gap:var(--space-sm); min-height:4.896rem; padding:var(--space-sm) .885rem var(--space-sm) 1.25rem; margin-top:1.25rem; border:thin solid var(--white); border-radius:.625rem; background:var(--primary-light) url('/assets/pc/images/shuiyinyun/account-popover-bg.svg') right top/cover no-repeat; }
body.pc-app .account-membership strong { font-size:var(--font-base); }
body.pc-app .account-membership p { margin:var(--space-xs) 0 0; font-size:var(--font-sm); color:var(--muted); }
body.pc-app .account-membership-button:hover { filter:brightness(.96); }
body.pc-app .account-card-actions { display:flex; justify-content:space-between; gap:var(--space-sm); margin-top:1.563rem; }
body.pc-app .account-card-actions a,body.pc-app .account-card-actions button { display:flex; flex-direction:column; align-items:center; gap:.521rem; padding:.521rem; border-radius:.521rem; color:var(--muted); font-size:.938rem; font-weight:300; text-align:center; }
body.pc-app .site-footer { background:var(--white); border-top:thin solid var(--border); color:var(--muted); padding:60px max(var(--site-content-gutter),calc((100% - var(--site-content-width))/2 + var(--site-content-gutter))) 32px; }
body.pc-app .footer-top { max-width:none; gap:72px; padding:0 0 48px; border:0; }
body.pc-app .footer-top nav strong { color:var(--text); font-size:18px; }
body.pc-app .footer-brand { color:var(--primary); }
body.pc-app .footer-top nav a,body.pc-app .footer-top nav button { color:var(--muted); }
body.pc-app .footer-top nav a:hover,body.pc-app .footer-top nav button:hover { color:var(--primary); }
body.pc-app .footer-bottom { max-width:none; border-top:1px solid var(--border); padding-top:28px; }
body.pc-app .footer-bottom a { color:var(--muted); }
body.pc-app .footer-bottom a:hover,body.pc-app .footer-bottom a:focus-visible { color:var(--primary); }
body.pc-app .footer-friendlinks { display:flex; flex-wrap:wrap; align-items:baseline; gap:1em 2em; padding-bottom:2em; }
body.pc-app .footer-friendlinks strong { color:var(--text); flex-shrink:0; }
body.pc-app .footer-friendlinks-list { display:flex; flex:1 1 60%; flex-wrap:wrap; gap:.75em 1.5em; min-width:0; }
body.pc-app .footer-friendlinks-list a { color:var(--muted); max-width:100%; overflow-wrap:anywhere; }
body.pc-app .footer-friendlinks-list a:hover,body.pc-app .footer-friendlinks-list a:focus-visible { color:var(--primary); }
@media (max-width:1100px) {
body.pc-app .header-inner { gap:24px; }
body.pc-app #navigation { gap:24px; }
}
@media (max-width:767px) {
body.pc-app .site-header { height:52px; }
body.pc-app .header-inner { gap:12px; justify-content:space-between; }
body.pc-app .brand { font-size:20px; gap:8px; }
body.pc-app .brand-icon { height:calc(var(--space-xxl) + var(--space-xs)); max-width:calc(var(--space-xxl) * 5.5); }
body.pc-app .brand-symbol { padding:5px; border-radius:8px; }
body.pc-app .brand-symbol svg { width:20px; height:20px; }
body.pc-app #navigation { display:none; }
body.pc-app .header-actions { margin-left:auto; gap:12px; }
body.pc-app .account .button { font-size:12px; padding:6px 12px; min-height:32px; }
body.pc-app .mobile-menu { display:block; }
body.pc-app .site-footer { padding-top:40px; padding-bottom:24px; }
body.pc-app .footer-top { grid-template-columns:1fr; gap:32px; }
}
@media (max-width:600px) {
body.pc-app { --site-content-gutter:var(--page-gutter); }
}
@media (max-width:359px) {
body.pc-app .brand { font-size:18px; }
}