/* 公共设计变量与布局；页面样式由各自的 CSS 负责。 */
:root {
  --brand:#3488f0; --brand-sky:#54a0ff; --brand-ink:#2472d8; --brand-light:#eaf3ff; --on-brand:#ffffff;
  --ink:#1e293b; --muted:#5e6e83; --border:#e1eaf5; --surface:#fff;
  --page:#f7faff; --radius:14px; --shadow:0 6px 24px rgb(37 90 157 / 5%);
  --page-width:1280px; --gutter:24px; --header-height:72px;
}
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:calc(var(--header-height) + 20px); -webkit-text-size-adjust:100%; }
body { margin:0; color:var(--ink); background:var(--page); font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",Arial,sans-serif; -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4,h5,p,ul,ol { margin:0; }
h1,h2,h3,h4,h5 { font-weight:650; line-height:1.4; overflow-wrap:break-word; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; height:auto; }
button,input { font:inherit; }
button,summary { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
[hidden] { display:none !important; }
:focus-visible { outline:3px solid var(--brand-ink); outline-offset:4px; border-radius:4px; }
::selection { background:#dbeafe; color:#183c70; }
.text-center { text-align:center; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:fixed; top:8px; left:16px; z-index:300; padding:10px 16px; background:var(--ink); color:#fff; border-radius:8px; transform:translateY(-160%); }
.skip-link:focus { transform:translateY(0); }
#main-content { min-width:0; }
#main-content:focus { outline:none; }
.header { position:sticky; top:0; z-index:100; background:rgb(255 255 255 / 97%); border-bottom:1px solid var(--border); }
.header-inner { max-width:var(--page-width); height:var(--header-height); margin:auto; padding:0 var(--gutter); display:flex; align-items:center; gap:24px; }
.site-logo { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.site-logo img { width:132px; height:40px; object-fit:contain; font-size:18px; color:var(--brand-ink); }
.logo-text-sub { color:var(--brand); font-size:19px; font-weight:650; padding-left:10px; border-left:1px solid var(--border); white-space:nowrap; }
.logo-fallback { color:var(--brand-ink); font-size:20px; font-weight:700; white-space:nowrap; }
.nav-menu { margin-left:auto; display:flex; align-items:center; gap:22px; }
.nav-menu a { position:relative; display:inline-flex; align-items:center; min-height:44px; font-size:15px; color:#48566b; white-space:nowrap; transition:color .18s; }
.nav-menu a:hover,.nav-menu .nav-highlight { color:var(--brand); }
.nav-menu .nav-highlight::after { content:""; position:absolute; bottom:0; left:25%; right:25%; height:3px; background:var(--brand); border-radius:3px; }
.nav-menu .nav-official { color:var(--brand); }
.btn-free,.btn-ghost { display:inline-flex; min-height:44px; padding:10px 19px; border-radius:9px; align-items:center; justify-content:center; text-align:center; font-size:14px; font-weight:600; line-height:1.5; transition:background .18s,box-shadow .18s; }
.btn-free { background:linear-gradient(135deg,var(--brand),var(--brand-sky)); color:var(--on-brand); box-shadow:0 6px 16px rgb(52 136 240 / 25%); }
.btn-free:hover { background:linear-gradient(135deg,var(--brand-ink),var(--brand)); box-shadow:0 7px 20px rgb(52 136 240 / 24%); }
.header-cta { flex-shrink:0; white-space:nowrap; }
.btn-ghost { color:var(--brand-ink); background:var(--surface); border:1px solid #c9ddf7; }
.btn-ghost:hover { background:var(--brand-light); border-color:var(--brand); }
.mobile-menu { display:none; }
.nav-toggle { list-style:none; width:44px; height:44px; padding:12px 10px; cursor:pointer; border-radius:8px; }
.nav-toggle::-webkit-details-marker { display:none; }
.nav-toggle span { display:block; height:2px; margin:3px 0; background:var(--ink); transition:transform .18s,opacity .18s; }
.mobile-menu[open] .nav-toggle span:nth-child(1) { transform:translateY(5px) rotate(45deg); }
.mobile-menu[open] .nav-toggle span:nth-child(2) { opacity:0; }
.mobile-menu[open] .nav-toggle span:nth-child(3) { transform:translateY(-5px) rotate(-45deg); }
.mobile-nav { position:absolute; left:0; right:0; top:100%; background:#fff; padding:10px var(--gutter) 16px; border-bottom:1px solid var(--border); box-shadow:0 15px 25px rgb(30 41 59 / 10%); max-height:calc(100vh - var(--header-height) - 76px); max-height:calc(100dvh - var(--header-height) - 76px); overflow-y:auto; }
.mobile-nav a { display:block; min-height:44px; padding:10px 14px; border-radius:8px; font-size:15px; }
.mobile-nav a:hover,.mobile-nav .nav-highlight { background:var(--brand-light); color:var(--brand-ink); }
.mobile-nav .mobile-nav-cta { margin-top:8px; text-align:center; background:linear-gradient(135deg,var(--brand),var(--brand-sky)); color:var(--on-brand); }
.breadcrumb { max-width:var(--page-width); margin:24px auto 18px; padding:0 var(--gutter); color:var(--muted); font-size:13px; overflow-wrap:anywhere; }
.breadcrumb a { color:var(--brand-ink); }
.breadcrumb a:hover { text-decoration:underline; }
.main-wrap { max-width:var(--page-width); margin:0 auto 56px; padding:0 var(--gutter); display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:28px; align-items:start; }
.content-left,.sidebar { min-width:0; }
.sidebar { display:flex; flex-direction:column; gap:20px; }
.sidebar-card { padding:22px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); }
.sidebar-card h2 { font-size:17px; margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid var(--border); }
.sidebar-card p { font-size:14px; color:var(--muted); }
.sidebar-card.sidebar-promo-image { padding:0; overflow:hidden; background:#f4faff; }
.sidebar-promo-link { display:block; }
.sidebar-promo-art { width:100%; height:auto; aspect-ratio:733/532; object-fit:contain; }
.sidebar-promo-caption { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; padding:16px; background:#fff; border-top:1px solid #e8f0fa; }
.sidebar-promo-copy { display:flex; min-width:0; flex-direction:column; gap:4px; }
.sidebar-promo-copy strong { font-size:16px; font-weight:650; color:var(--ink); }
.sidebar-promo-copy small { font-size:10px; color:var(--muted); }
.sidebar-promo-cta { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:36px; padding:8px 11px; border-radius:8px; background:linear-gradient(135deg,var(--brand),var(--brand-sky)); color:var(--on-brand); font-size:12px; font-weight:600; white-space:nowrap; }
.sidebar-promo-link:hover .sidebar-promo-cta { background:linear-gradient(135deg,var(--brand-ink),var(--brand)); }
.sidebar-promo-link:focus-visible { outline-offset:-4px; border-radius:var(--radius); }
.sidebar-card.sidebar-start { padding:18px; }
.sidebar-start-heading { margin-bottom:14px; }
.sidebar-start-heading h2 { padding:0; margin:0 0 5px; border:0; font-size:18px; }
.sidebar-start-heading p { font-size:12px; line-height:1.6; }
.sidebar-shortcuts { list-style:none; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.sidebar-shortcuts li { min-width:0; }
.sidebar-shortcuts .shortcut-item { position:relative; display:flex; height:100%; min-height:112px; flex-direction:column; align-items:flex-start; gap:10px; padding:12px 10px; border:1px solid #e5edf8; border-radius:11px; background:#f8fbff; transition:background .18s,border-color .18s; }
.shortcut-icon { display:grid; place-items:center; flex-shrink:0; width:32px; height:32px; border-radius:9px; color:var(--brand); background:#e5f0ff; }
.shortcut-icon svg { display:block; width:21px; height:21px; }
.shortcut-shopee .shortcut-icon { color:#e96b36; background:#fff0e8; }
.shortcut-tiktok .shortcut-icon { color:#334155; background:#eaeef5; }
.shortcut-copy { min-width:0; display:flex; flex-direction:column; gap:4px; }
.shortcut-copy strong { font-size:13px; font-weight:600; line-height:1.5; overflow-wrap:anywhere; }
.shortcut-copy small { color:var(--muted); font-size:11px; line-height:1.6; }
.shortcut-arrow { position:absolute; right:10px; top:12px; color:#7488a2; font-size:13px; }
.sidebar-shortcuts .shortcut-item:hover { background:#edf5ff; border-color:#b5d4fa; }
.shortcut-item:hover .shortcut-copy strong,.shortcut-item:hover .shortcut-arrow { color:var(--brand-ink); }
.hot-list { list-style:none; padding:0; counter-reset:hot; }
.hot-list li { display:flex; gap:10px; padding:11px 0; border-bottom:1px solid #eef2f7; counter-increment:hot; }
.hot-list li:last-child { border:0; padding-bottom:0; }
.hot-num { flex:0 0 22px; height:22px; line-height:22px; text-align:center; border-radius:5px; color:var(--brand-ink); background:var(--brand-light); font-size:12px; font-weight:700; }
.hot-num::before { content:counter(hot); }
.hot-list li:first-child .hot-num { color:#fff; background:#d94c37; }
.hot-list li:nth-child(2) .hot-num { color:#7d3d0a; background:#ffdeb5; }
.hot-list li:nth-child(3) .hot-num { color:#745600; background:#ffefad; }
.hot-list a { flex:1; min-width:0; font-size:14px; color:#48566b; line-height:1.6; overflow-wrap:anywhere; }
.hot-list a:hover { color:var(--brand-ink); }
.tag-wrap { display:flex; flex-wrap:wrap; gap:8px; }
.tag-wrap:empty { display:none; }
.tag-wrap a,.tag { background:var(--brand-light); color:var(--brand-ink); border-radius:6px; padding:5px 10px; font-size:12px; }
.tag-wrap a:hover { background:#dcecff; }
.top-banner-wrap { max-width:var(--page-width); margin:24px auto 0; padding:0 var(--gutter); }
.top-banner-img { width:100%; height:auto; border-radius:12px; }
.footer { padding:28px var(--gutter) 22px; border-top:1px solid var(--border); background:var(--surface); }
.footer-inner { max-width:var(--page-width); margin:auto; text-align:center; color:var(--muted); font-size:13px; }
.footer-description { line-height:1.9; }
.footer-inner a:hover { color:var(--brand-ink); text-decoration:underline; }
.footer-links { display:flex; flex-wrap:wrap; justify-content:center; gap:2px 24px; margin:10px 0 16px; }
.footer-links a { display:inline-flex; align-items:center; min-height:40px; color:var(--ink); }
.footer-legal { padding-top:16px; border-top:1px solid var(--border); font-size:12px; line-height:1.8; }
.footer-copyright { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:2px 8px; }
.footer-registration { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:2px 24px; margin-top:4px; }
.footer-registration a { display:inline-flex; flex-wrap:wrap; align-items:center; justify-content:center; max-width:100%; min-height:32px; }
.footer-registration span { white-space:nowrap; }
.mobile-bottom-bar { display:none; }
.back-to-top { position:fixed; right:20px; bottom:24px; z-index:40; width:44px; height:44px; border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); background:#fff; color:var(--brand-ink); font-size:24px; }
.pagination { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px; margin-top:28px; font-size:14px; }
.pagination:empty { display:none; }
.empty-list { padding:36px 20px; text-align:center; color:var(--muted); background:#fff; border:1px solid var(--border); border-radius:var(--radius); }
.pagination a,.pagination > b,.pagination > strong,.pagination > span { display:inline-flex; align-items:center; justify-content:center; min-width:42px; min-height:42px; padding:8px 13px; border:1px solid var(--border); border-radius:8px; background:#fff; color:#48566b; }
.pagination a:hover { background:var(--brand-light); color:var(--brand-ink); border-color:#b8d6fa; }
.pagination > b,.pagination > strong,.pagination .active { color:var(--on-brand); background:var(--brand); border-color:var(--brand); font-weight:600; }
.pagination a[title="Total record"] { background:transparent; border:0; min-width:0; color:var(--muted); pointer-events:none; font-size:12px; }
.pagination a[title="Total record"] b { color:var(--brand-ink); }
.pagination .disabled { opacity:.55; pointer-events:none; }
@media(max-width:1180px) {
  .header-inner { gap:18px; } .nav-menu { gap:16px; } .nav-menu .nav-official { display:none; }
}
@media(max-width:1024px) {
  :root { --header-height:64px; }
  .nav-menu { display:none; } .header-cta { margin-left:auto; } .mobile-menu { display:block; }
  .main-wrap { grid-template-columns:minmax(0,1fr) 260px; gap:22px; }
  .sidebar-card { padding:18px; }
}
@media(max-width:900px) {
  .main-wrap { grid-template-columns:minmax(0,1fr); }
  .sidebar { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; }
  .sidebar-promo-art { height:216px; aspect-ratio:auto; }
}
@media(max-width:600px) {
  :root { --gutter:16px; --header-height:60px; }
  body { padding-bottom:calc(72px + env(safe-area-inset-bottom)); }
  .header-inner { gap:8px; } .site-logo { gap:6px; } .site-logo img { width:112px; height:34px; }
  .logo-text-sub { font-size:16px; padding-left:6px; }
  .header-cta { padding:8px 11px; min-height:40px; font-size:12px; }
  .breadcrumb { margin:18px auto 14px; font-size:12px; }
  .main-wrap { margin-bottom:32px; gap:24px; }
  .sidebar { grid-template-columns:minmax(0,1fr); gap:16px; }
  .sidebar-promo-link { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); align-items:center; gap:12px; padding:12px; }
  .sidebar-promo-art { height:auto; aspect-ratio:733/532; }
  .sidebar-promo-caption { padding:0; border:0; background:transparent; flex-direction:column; align-items:flex-start; gap:10px; }
  .sidebar-promo-copy strong { font-size:16px; }
  .sidebar-promo-copy small { font-size:10px; }
  .sidebar-promo-cta { min-height:34px; padding:7px 12px; }
  .sidebar-card.sidebar-start { padding:16px; }
  .sidebar-start-heading { margin-bottom:12px; }
  .sidebar-start-heading h2 { font-size:17px; }
  .sidebar-start-heading p { font-size:12px; }
  .sidebar-shortcuts .shortcut-item { flex-direction:row; align-items:center; min-height:82px; padding:12px 10px; gap:8px; }
  .shortcut-icon { width:28px; height:28px; border-radius:8px; }
  .shortcut-icon svg { width:19px; height:19px; }
  .shortcut-copy strong { font-size:13px; }
  .shortcut-copy small { font-size:10px; }
  .shortcut-arrow { display:none; }
  .top-banner-wrap { margin-top:16px; }
  .mobile-bottom-bar { display:flex; position:fixed; bottom:0; left:0; right:0; z-index:60; gap:10px; padding:10px 16px calc(10px + env(safe-area-inset-bottom)); border-top:1px solid var(--border); background:#fff; }
  .mobile-bottom-bar a { flex:1; min-height:44px; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:600; border-radius:8px; }
  .mobile-help { color:var(--brand-ink); background:var(--brand-light); } .mobile-trial { color:var(--on-brand); background:linear-gradient(135deg,var(--brand),var(--brand-sky)); }
  .back-to-top { bottom:calc(84px + env(safe-area-inset-bottom)); right:16px; }
  .footer { padding:24px var(--gutter) 20px; }
  .footer-links { gap:0 18px; margin:8px 0 14px; }
  .footer-links a { min-height:44px; }
  .footer-copyright { flex-direction:column; }
  .footer-registration { flex-direction:column; gap:0; margin-top:6px; }
  .footer-registration a { min-height:40px; padding:5px 0; }
}
@media(max-width:359px) { .logo-text-sub { display:none; } .sidebar-shortcuts .shortcut-item { gap:7px; padding:12px 8px; } .shortcut-copy strong { font-size:12px; } .shortcut-icon { width:24px; height:26px; } }
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation:none !important; transition:none !important; }
}
@media print {
  .header,.sidebar,.mobile-bottom-bar,.back-to-top,.top-banner-wrap,.skip-link { display:none; }
  body { padding:0; background:#fff; color:#000; }
  .main-wrap { display:block; padding:0; margin:0; max-width:none; }
  a { color:inherit; } .footer { margin-top:20px; }
}