html,body{background:transparent}

/* ===== block separator ===== */


  /* ---------- reset & base ---------- */
  *, *::before, *::after { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body {
    font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Heiti SC", "SimSun", "宋体", Tahoma, Arial, sans-serif;
    font-size: 12px;
    color: #333;
    background: #F5F5F5;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }
  a { color: #333; text-decoration: none; }
  a:hover { color: #1F4E79; text-decoration: underline; }
  ul { list-style: none; margin: 0; padding: 0; }
  img { display: block; max-width: 100%; }

  /* ---------- layout primitives ---------- */
  .page { width: 1200px; margin: 0 auto; padding: 8px 0 0; }
  .wrap { width: 1000px; margin: 0 auto; }

  /* ---------- generic ad placeholder ---------- */
  .ad {
    background: #e8e8e8;
    border: 1px solid #d3d3d3;
    color: #999;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-image: linear-gradient(135deg, transparent 49.5%, #d8d8d8 49.5%, #d8d8d8 50.5%, transparent 50.5%),
                      linear-gradient(45deg,  transparent 49.5%, #d8d8d8 49.5%, #d8d8d8 50.5%, transparent 50.5%);
    background-size: 100% 100%;
  }
  .ad span { background: rgba(232,232,232,0.92); padding: 2px 8px; color: #888; letter-spacing: 1px; }

  /* ---------- top banner row (3×332×80) ---------- */
  .top-ads {
    display: grid;
    grid-template-columns: repeat(3, 332px);
    gap: 2px;
    width: 1000px;
    margin: 0 auto 8px;
  }
  .top-ads .ad { height: 80px; }

  /* --- mobile ad slider (hidden on desktop) --- */
  .top-ads-slider { display: none; }

  /* ---------- country quick links bar ---------- */
  .country-links {
    width: 1000px;
    margin: 0 auto;
    padding: 4px 0 3px;
    font-size: 11px;
    line-height: 1.4;
    color: #1F5D99;
    background: #FFFFFF;
  }
  .country-links a {
    color: #1F5D99;
    text-decoration: none;
  }
  .country-links a:hover {
    text-decoration: underline;
  }
  .country-links span {
    color: #999999;
    margin: 0 2px;
  }

  /* ---------- header info card ---------- */
  .site-header {
    background: #fff;
    width: 1000px;
    margin: 0 auto;
    border: 1px solid #DDDDDD;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
  }
  .header-top {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: stretch;
    gap: 0;
    padding: 0;
  }

  /* === LEFT: brand block === */
  .brand-block {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #FFFFFF;
    padding: 9px 22px 9px 18px;
    border-right: 1px solid #E6E6E6;
  }

  /* --- header brand logo (blue wave) — 放大 + 可点击返回首页 --- */
  .site-logo {
    width: 64px;
    height: 64px;
    object-fit: contain;
    display: block;
  }

  /* --- icon: seal mark — 可点击 link 包裹 --- */
  .brand-icon {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    position: relative;
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
    transition: opacity .15s;
  }
  a.brand-icon:hover { opacity: 0.85; text-decoration: none; }
  .brand-icon svg {
    width: 100%;
    height: 100%;
    display: block;
  }

  /* --- divider --- */
  .brand-divider {
    width: 1px;
    height: 38px;
    background: linear-gradient(180deg, transparent 0%, #D6D0C4 15%, #D6D0C4 85%, transparent 100%);
    flex-shrink: 0;
  }

  /* --- text group --- */
  .brand-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }
  .brand-name-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
  }
  .brand-name-zh {
    font-family: "STHeiti", "Heiti SC", "SimHei", "Microsoft YaHei", sans-serif;
    font-size: 22px;
    font-weight: 900;
    color: #2C2C2C;
    letter-spacing: 1px;
    line-height: 1.15;
  }
  .brand-name-en {
    font-family: "Georgia", "Times New Roman", serif;
    font-size: 12px;
    font-weight: 400;
    color: #7A8599;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    line-height: 1;
    padding-bottom: 1px;
  }
  .brand-tags {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 2px;
  }
  .brand-tag {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 3px;
    letter-spacing: .5px;
    line-height: 1.5;
    white-space: nowrap;
  }
  .brand-tag-classic {
    background: #EEF2F7;
    color: #1E3A5F;
    border: 1px solid #D0DAE6;
  }
  .brand-tag-verified {
    background: #1F4E79;
    color: #fff;
    border: 1px solid transparent;
  }
  .brand-tag-verified .tag-check {
    font-size: 9px;
  }
  .brand-subtitle {
    font-size: 11px;
    color: #9CA3AF;
    letter-spacing: .2px;
    line-height: 1.3;
    margin-top: 1px;
  }
  .brand-subtitle a {
    color: #1F4E79;
    font-weight: 600;
    text-decoration: none;
  }
  .brand-subtitle a:hover { text-decoration: underline; }
  .brand-subtitle .sep {
    margin: 0 3px;
    color: #CBD2DC;
  }

  /* === CENTER: announcement === */
  .header-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 8px 20px;
    border-right: 1px solid #E6E6E6;
    min-width: 0;
  }
  .hc-title {
    font-size: 13px;
    font-weight: 700;
    color: #1F4E79;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 5px;
  }
  .hc-title::before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 13px;
    background: #1F4E79;
    border-radius: 2px;
    flex-shrink: 0;
  }
  .hc-body {
    font-size: 12px;
    color: #555;
    line-height: 1.7;
  }
  .hc-body b { color: #1F4E79; }
  .hc-phone {
    font-size: 12px;
    color: #1E3A5F;
    font-weight: 700;
    margin-top: 4px;
  }
  .hc-phone a {
    color: #1E3A5F;
    text-decoration: none;
  }
  .hc-phone a:hover { text-decoration: underline; }

  /* === RIGHT: clock & links === */
  .header-meta {
    text-align: right;
    font-size: 12px;
    color: #666;
    padding: 8px 18px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 6px;
    background: #FFFFFF;
    min-width: 190px;
  }
  .clock {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #8C95A6;
    font-size: 11px;
    white-space: nowrap;
  }
  .clock .icon-clock {
    width: 12px; height: 12px;
    border: 1.5px solid #B0A89A; border-radius: 50%;
    position: relative;
    flex-shrink: 0;
  }
  .clock .icon-clock::before, .clock .icon-clock::after {
    content: ""; position: absolute; background: #B0A89A; left: 50%; top: 50%;
  }
  .clock .icon-clock::before { width: 1.5px; height: 4px; transform: translate(-50%,-100%); }
  .clock .icon-clock::after  { width: 3px;   height: 1.5px; transform: translate(-50%,-50%); }
  .clock-label { color: #B0A89A; }
  .clock-time {
    font-family: Tahoma, Arial, sans-serif;
    font-weight: 700;
    color: #1F4E79;
    font-size: 14px;
    letter-spacing: .3px;
  }
  .clock-day { color: #8C95A6; font-size: 11px; }
  .quick-links { font-size: 12px; margin-top: 2px; }
  .quick-links a {
    color: #0b74c9;
    padding: 0 6px;
    white-space: nowrap;
    text-decoration: none;
    font-size: 11px;
  }
  .quick-links a + a { border-left: 1px solid #ddd; }
  .quick-links a:hover { color: #1F4E79; text-decoration: underline; }

  /* ---------- header right action buttons ---------- */
  .header-actions {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: stretch;
    margin-top: 6px;
    width: 100%;
  }
  .header-actions .btn {
    flex: 1;
    height: 32px;
    padding: 0 10px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 4px;
    border: none;
    line-height: 32px;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
    display: block;
    color: #fff;
    white-space: nowrap;
    letter-spacing: .3px;
    transition: filter .15s;
  }
  .header-actions .btn:hover { filter: brightness(0.94); color: #fff; text-decoration: none; }
  .header-actions .btn-free-post {
    background: #1F5D99;
    color: #FFFFFF;
  }
  .header-actions .btn-vip-post {
    background: #DD8B2F;
    color: #FFFFFF;
  }
  .header-actions .btn-register {
    background: #E5704A;
    color: #FFFFFF;
  }

  /* ---------- notice quick-action buttons ---------- */
  .notice-actions {
    width: 1000px;
    margin: 0 auto;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 10px 0;
    background: #fff;
    border: 1px solid #DDDDDD;
    border-top: none;
    padding-left: 14px;
    padding-right: 14px;
  }
  .notice-actions .notice-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    padding: 0 16px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 2px;
    text-decoration: none;
    color: #fff;
    box-sizing: border-box;
    line-height: 1;
    transition: filter .15s;
  }
  .notice-actions .notice-btn:hover { filter: brightness(0.94); text-decoration: none; color: #fff; }
  .notice-actions .notice-btn svg {
    width: 16px;
    height: 16px;
    margin-right: 6px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    flex-shrink: 0;
  }
  .notice-actions .notice-btn-post {
    background: #F28C28;
  }
  .notice-actions .notice-btn-job,
  .notice-actions .notice-btn-house {
    background: #1F5D99;
  }


  /* ---------- marquee notice strip ---------- */
  .notice-marquee {
    width: 1000px;
    margin: 0 auto;
    background: #FFF3D8;
    border: 1px solid #E8C98A;
    border-top: none;
    color: #5b4a18;
    font-size: 12px;
    line-height: 1.6;
    display: flex;
    align-items: stretch;
    overflow: hidden;
    height: 32px;
    box-sizing: border-box;
  }
  .notice-marquee .nm-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #E8C98A;
    color: #5b4a18;
    padding: 0 12px;
    font-weight: 700;
    flex-shrink: 0;
    white-space: nowrap;
    border-right: 1px solid #d4b97a;
  }
  .notice-marquee .nm-label svg { color: #8a6d1c; }
  .notice-marquee .nm-track {
    flex: 1;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
  }
  .notice-marquee .nm-content {
    display: inline-block;
    white-space: nowrap;
    padding-left: 100%;
    animation: nm-scroll 38s linear infinite;
    will-change: transform;
  }
  .notice-marquee .nm-content b { color: #8a4a00; font-weight: 700; }
  .notice-marquee .nm-content a { color: #0f4c87; font-weight: 700; text-decoration: none; }
  .notice-marquee .nm-content a:hover { text-decoration: underline; }
  .notice-marquee .nm-content .nm-sep { color: #aa9760; margin: 0 16px; }
  .notice-marquee:hover .nm-content { animation-play-state: paused; }
  @keyframes nm-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
  }
  @media (prefers-reduced-motion: reduce) {
    .notice-marquee .nm-content {
      animation: none;
      padding-left: 12px;
      white-space: normal;
    }
    .notice-marquee { height: auto; }
  }

  /* ---------- nav tabs ---------- */
  .nav-tabs {
    width: 1000px;
    margin: 0 auto;
    background: #D9DCF4;
    display: flex;
    border: 1px solid #C7CAE5;
  }
  .nav-tabs a {
    flex: 1;
    text-align: center;
    color: #333333;
    font-size: 15px;
    font-weight: 700;
    padding: 11px 0;
    border-right: 1px solid #C7CAE5;
    letter-spacing: 1px;
  }
  .nav-tabs a:last-child { border-right: none; }
  .nav-tabs a.active, .nav-tabs a:hover { background: #fff; color: #1F4E79; font-weight: 700; text-decoration: none; }
  .nav-tabs a.active::before {
    content: "●";
    color: #F28C28;
    font-size: 9px;
    vertical-align: 2px;
  }
  /* icon + text 對齊（桌面/手機通用） */
  .nav-tabs a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-decoration: none;
  }
  .nav-tabs a > .nav-ic {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    color: currentColor;
  }
  .nav-tabs a > span { line-height: 1; }

  /* official notice strip */
  .notice {
    width: 1000px;
    margin: 0 auto;
    background: #FFF3D8;
    border: 1px solid #E8C98A;
    border-top: none;
    color: #333333;
    padding: 6px 14px;
    font-size: 12px;
    line-height: 1.6;
  }
  .notice b { color: #1F4E79; }
  .notice a { color: #0b74c9; }

  /* ---------- search bar ---------- */
  .search-bar {
    width: 1000px;
    margin: 8px auto 0;
    background: #D9DCF4;
    border: 1px solid #DDDDDD;
    border-radius: 0;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .search-bar .label {
    color: #1F4E79; font-weight: 700; font-size: 14px; padding: 0 6px 0 4px; white-space: nowrap;
  }
  .search-bar input[type="text"] {
    flex: 1;
    height: 36px;
    border: 1px solid #D0CCC4;
    border-radius: 4px;
    padding: 0 12px;
    font-size: 13px;
    outline: none;
    color: #333;
    background: #fff;
    transition: border-color .2s;
  }
  .search-bar input[type="text"]:focus { border-color: #1F4E79; }
  .search-bar input::placeholder { color: #B0B0B0; }
  .search-bar select {
    height: 36px;
    border: 1px solid #D0CCC4;
    border-radius: 4px;
    background: #fff;
    padding: 0 8px;
    font-size: 12px;
    color: #555;
    outline: none;
    min-width: 100px;
    transition: border-color .2s;
  }
  .search-bar select:focus { border-color: #1F4E79; }
  .search-selects {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
  }
  .search-bar button {
    height: 36px;
    padding: 0 24px;
    background: #1F5D99;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 4px;
    transition: background .2s;
  }
  .search-bar button:hover { background: #163d61; }
  .hot-tags { font-size: 12px; color: #888; padding-left: 6px; padding-top: 6px; }
  .hot-tags a { color: #0b74c9; margin: 0 6px; }
  .hot-tags a.fire { color: #F28C28; font-weight: 700; }
  .search-bar-row2 {
    width: 1000px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid #DDDDDD;
    border-top: none;
    border-radius: 0;
    padding: 4px 16px 8px;
  }

  /* ---------- user action bar ---------- */
  /* ---------- user action bar (v3) ---------- */
  .user-action-bar {
    width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 8px;
    background: #FFFFFF;
    border: 1px solid #DDDDDD;
    border-top: none;
    padding: 6px 10px;
    font-size: 12px;
    color: #666666;
  }
  .user-action-bar .user-status { color: #666; line-height: 1.6; }
  .user-action-bar .user-status b { color: #1F4E79; font-weight: 700; }
  .user-action-bar .user-status a {
    color: #1F5D99;
    margin: 0 2px;
    text-decoration: none;
  }
  .user-action-bar .user-status a:hover { text-decoration: underline; color: #1F4E79; }
  .user-action-bar .site-stats { color: #999; margin-left: 12px; }
  .user-action-bar .site-stats b { color: #1F4E79; font-weight: 700; }
  .user-action-bar .user-actions { display: flex; gap: 6px; }
  .ua-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 116px;
    height: 30px;
    padding: 0 10px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    box-sizing: border-box;
    border-radius: 4px;
    transition: filter .15s;
    line-height: 1;
  }
  .ua-btn:hover { filter: brightness(0.94); text-decoration: none; }
  .ua-btn svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    flex-shrink: 0;
  }
  .ua-btn-cta { color: #fff; border: none; }
  .ua-btn-cta:hover { color: #fff; }
  .ua-btn-cta-post { background: #F28C28; }
  .ua-btn-cta-job { background: #1F5D99; }
  .ua-btn-cta-house { background: #2E9D64; }
  .btn {
    display: inline-block;
    padding: 5px 14px;
    font-size: 12px;
    border: 1px solid #cdcdcd;
    background: #fff;
    color: #444;
    text-decoration: none;
    cursor: pointer;
    line-height: 1.4;
  }
  .btn:hover { color: #1F4E79; text-decoration: none; }
  .btn-red { background: #1F5D99; border-color: #163d61; color: #fff; font-weight: 700; }
  .btn-red:hover { color: #fff; background: #163d61; }
  .btn-gold { background: #F28C28; border-color: #c46c1f; color: #fff; font-weight: 700; }
  .btn-gold:hover { color: #fff; background: #c46c1f; }
  .btn-gold::before {
    content: ""; display: none;
  }
  .btn-blue { background: #F05A28; border-color: #c44820; color: #fff; }
  .btn-blue:hover { color: #fff; background: #c44820; }

  /* ---------- region quick selector ---------- */
  .region-quick {
    width: 1000px;
    margin: 8px auto 0;
    background: #FFFFFF;
    border: 1px solid #DDDDDD;
    padding: 8px 10px;
    font-size: 12px;
    box-sizing: border-box;
  }
  .region-quick-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
  }
  .region-title {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
  }
  .region-title strong {
    color: #333333;
    font-size: 13px;
    font-weight: 700;
  }
  .region-current {
    color: #666666;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .region-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid #C7CAE5;
    background: #D9DCF4;
    color: #1F4E79;
    height: 26px;
    padding: 0 10px;
    font-size: 12px;
    cursor: pointer;
    border-radius: 3px;
    flex-shrink: 0;
    font-family: inherit;
    font-weight: 700;
    transition: filter .15s, background .15s;
  }
  .region-toggle:hover { filter: brightness(0.96); background: #C7CAE5; }
  .region-toggle .region-toggle-icon { transition: transform .2s; }
  .region-list {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 6px;
  }
  .region-list[hidden] {
    display: none !important;
  }
  .region-list-more {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dotted #E8E8E8;
  }
  .region-chip {
    border: 1px solid #DDDDDD;
    background: #FFFFFF;
    color: #1F5D99;
    height: 24px;
    padding: 0 8px;
    font-size: 12px;
    cursor: pointer;
    border-radius: 2px;
    font-family: inherit;
    line-height: 1;
    white-space: nowrap;
    transition: background .15s, border-color .15s, color .15s;
  }
  .region-chip:hover {
    border-color: #1F5D99;
    background: #F7F9FF;
  }
  .region-chip.is-selected {
    background: #1F5D99;
    border-color: #1F5D99;
    color: #FFFFFF;
    font-weight: 700;
  }

  /* ---------- mid banners ---------- */
  .mid-ads-2 {
    width: 1000px; margin: 8px auto 0;
    display: grid; grid-template-columns: 495px 495px; gap: 10px;
  }
  .mid-ads-2 .ad { height: 80px; }

  .mid-ads-3 {
    width: 1000px; margin: 8px auto 0;
    display: grid; grid-template-columns: repeat(3, 327px); gap: 9px;
  }
  .mid-ads-3 .ad { height: 187px; }
  .mid-ads-3 .ad.tinted-1,
  .mid-ads-3 .ad.tinted-2,
  .mid-ads-3 .ad.tinted-3 { background: #fff; border: 1px solid #DDDDDD; }
  .mid-ads-3 .ad-content { text-align: center; padding: 18px; }
  .mid-ads-3 .ad-content .kicker { font-size: 12px; color: #999; letter-spacing: 4px; }
  .mid-ads-3 .ad-content h3 {
    font-size: 22px; margin: 8px 0 6px; color: #333; font-weight: 800; letter-spacing: 1px;
  }
  .mid-ads-3 .ad-content p { color: #777; font-size: 12px; margin: 0; }
  .mid-ads-3 .ad-content .cta {
    display: inline-block; margin-top: 12px; padding: 6px 18px;
    background: #F28C28; color: #fff; font-size: 12px;
  }

  /* ---------- main content layout ---------- */
  .main-area {
    width: 1000px; margin: 8px auto 0;
    display: grid;
    grid-template-columns: 780px 180px;
    gap: 40px;
    align-items: flex-start;
  }
  .col-main { width: 780px; }
  .col-side { width: 180px; }

  /* ---------- info module ---------- */
  .module {
    border: 1px solid #DDDDDD;
    background: #fff;
    margin-bottom: 8px;
  }
  .module-head { background: #F7F7F7; color: #1F4E79; height: 30px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; font-size: 13px; border-bottom: 1px solid #DDDDDD; }
  .module-head .title {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .module-head .title::before {
    content: ""; display: inline-block; width: 4px; height: 14px;
    background: #F28C28;
  }
  .module-head .title em {
    font-style: normal;
    font-size: 11px;
    font-weight: 400;
    margin-left: 8px;
    color: #999999;
    letter-spacing: 0;
  }
  .module-head .more { color: #666666; font-size: 12px; opacity: .9; }
  .module-head .more:hover { color: #1F4E79; text-decoration: none; }

  .listing { padding: 6px 12px; }
  .listing li {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px dotted #e8e8e8;
    font-size: 13px;
    line-height: 1.5;
  }
  .listing li:last-child { border-bottom: none; }
  .listing li .tag {
    flex: 0 0 auto;
    display: inline-block;
    width: 38px;
    text-align: center;
    font-size: 11px;
    padding: 1px 0;
    line-height: 1.4;
    border-radius: 2px;
  }
  /* unified tag style: white bg + red border + red text */
  .tag-hire,
  .tag-seek,
  .tag-sell,
  .tag-rent,
  .tag-buy,
  .tag-trans,
  .tag-svc,
  .tag-info    { background: #fff; border: 1px solid #1F4E79; color: #1F4E79; }
  .listing li .title {
    flex: 1; min-width: 0;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
    color: #333;
  }
  .listing li .title:hover { color: #1F5D99; text-decoration: underline; cursor: pointer; }
  .listing li .title.hot::after {
    content: "热"; display: inline-block; background: #D24A4A; color: #fff;
    font-size: 10px; padding: 0 3px; margin-left: 6px; border-radius: 1px;
    transform: translateY(-1px);
  }
  .listing li .title.new::after {
    content: "新"; display: inline-block; background: #f08c00; color: #fff;
    font-size: 10px; padding: 0 3px; margin-left: 6px; border-radius: 1px;
    transform: translateY(-1px);
  }
  .listing li .title.top::before {
    content: "顶"; display: inline-block; background: #F28C28; color: #8a4a00;
    font-size: 10px; padding: 0 3px; margin-right: 6px; border-radius: 1px;
    font-weight: 700;
    transform: translateY(-1px);
  }
  .listing li .city { color: #888; font-size: 11px; flex: 0 0 auto; }
  .listing li .date { color: #999; font-size: 11px; flex: 0 0 auto; font-family: Tahoma, Arial; }

  /* in-main banner (750×100 double slot) */
  .main-banner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin: 6px 0 8px;
    width: 780px;
  }
  .main-banner .ad { height: 90px; }

  /* ---------- right sidebar ---------- */
  .side-ads { display: flex; flex-direction: column; gap: 8px; }
  .side-ads .ad { width: 180px; height: 180px; }
  .side-ads .ad.tinted-a,
  .side-ads .ad.tinted-b,
  .side-ads .ad.tinted-c,
  .side-ads .ad.tinted-d { background: #fff; border: 1px solid #DDDDDD; }
  .side-ads .ad-content {
    text-align: center;
    padding: 22px 14px;
    font-family: "STHeiti", "Microsoft YaHei", sans-serif;
  }
  .side-ads .ad-content .kicker { font-size: 11px; color: #888; letter-spacing: 3px; }
  .side-ads .ad-content h4 { font-size: 20px; color: #333; margin: 10px 0 6px; font-weight: 800; }
  .side-ads .ad-content p { color: #666; font-size: 12px; margin: 0; line-height: 1.5; }
  .side-ads .ad-content .cta {
    display: inline-block;
    margin-top: 10px;
    padding: 4px 14px;
    border: 1px solid #1F4E79; color: #1F4E79;
    font-size: 12px;
  }
  .side-sticky-title {
    background: #f8f8f8;
    border: 1px solid #DDDDDD;
    padding: 6px 10px;
    font-size: 12px;
    color: #888;
    text-align: center;
    letter-spacing: 2px;
  }

  /* ---------- bottom ads ---------- */
  .bottom-ads {
    width: 1000px; margin: 8px auto 0;
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    align-items: start;     /* 兩個版位高度可獨立，不被互相拉伸 */
  }
  .bottom-ads .ad { height: auto; min-height: 90px; }
  .bottom-banner {
    width: 1000px; margin: 8px auto 0; height: 90px;
  }

  /* ---------- bottom modules row ---------- */
  .bot-modules {
    width: 1000px; margin: 8px auto 0;
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  }

  /* ---------- footer (base) ---------- */
  .site-foot {
    width: 100%; margin: 16px auto 0;
    background: #F5F5F5;
    color: #263246;
    padding: 0;
    font-size: 12px;
  }
  .site-foot .foot-inner { max-width: 1000px; margin: 0 auto; }

  /* friendly links */
  .friendly {
    width: 1000px; margin: 8px auto 0;
    background: #fff; border: 1px solid #DDDDDD;
    padding: 8px 12px;
    font-size: 12px; color: #666; line-height: 1.9;
  }
  .friendly .ftit { color: #1F4E79; font-weight: 700; margin-right: 6px; }
  .friendly a { color: #555; margin: 0 6px; text-decoration: none; }
  .friendly a:hover { color: #1F4E79; text-decoration: underline; }
  .friendly .friendly-pending {
    color: #888; margin: 0 6px; cursor: default;
    border-bottom: 1px dotted #ccc;
  }



/* ===== block separator ===== */


/* ===== footer v4 — light classic portal ===== */
.site-foot.site-foot-v2 {
  background: #F5F5F5;
  color: #263246;
  padding: 0;
  border-top: 3px solid #1F4E79;
  margin-top: 32px;
  font-size: 12px;
  width: 100%;
}
.site-foot-v2 .foot-inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 36px 24px 0;
}
/* grid */
.site-foot-v2 .foot-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
  gap: 36px;
  padding-bottom: 28px;
  border-bottom: 1px solid #D8DEE8;
}
/* column titles */
.site-foot-v2 .foot-h {
  color: #1F4E79;
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 16px;
  letter-spacing: 1px;
  position: relative;
  padding-bottom: 10px;
}
.site-foot-v2 .foot-h::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 26px;
  height: 2px;
  background: #F28C28;
}
/* link lists */
.site-foot-v2 .foot-list { list-style: none; margin: 0; padding: 0; }
.site-foot-v2 .foot-list-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.site-foot-v2 .foot-list li { line-height: 2.2; }
.site-foot-v2 .foot-list a {
  color: #4A5568;
  text-decoration: none;
  font-size: 12px;
  transition: color .2s;
  display: inline-block;
}
.site-foot-v2 .foot-list a:hover {
  color: #1F4E79;
  text-decoration: none;
}
/* brand */
.site-foot-v2 .foot-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.site-foot-v2 .foot-logo {
  width: 80px;
  height: 80px;
  background: transparent;
  border-radius: 5px;
  flex-shrink: 0;
  display: block;
  object-fit: contain;
}
.site-foot-v2 .foot-brand-name {
  color: #263246;
  font-weight: 800;
  font-size: 16px;
  line-height: 1.2;
}
.site-foot-v2 .foot-brand-domain {
  color: #1F4E79;
  font-size: 11px;
  letter-spacing: 1px;
  margin-top: 3px;
  font-family: Tahoma, Arial, sans-serif;
}
.site-foot-v2 .foot-intro {
  margin: 12px 0 16px;
  line-height: 1.8;
  color: #667085;
  font-size: 12px;
}
/* social */
.site-foot-v2 .foot-social { display: flex; gap: 8px; }
.site-foot-v2 .foot-social a {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid #D8DEE8;
  border-radius: 50%;
  text-decoration: none;
  font-size: 12px;
  color: #667085;
  font-weight: 700;
  transition: all .2s;
  font-family: Arial, sans-serif;
}
.site-foot-v2 .foot-social a:hover {
  background: #1F4E79; border-color: #1F4E79;
  color: #fff;
}
/* contact */
.site-foot-v2 .foot-contact {
  margin-top: 16px;
  color: #667085;
  line-height: 2.2;
  font-size: 12px;
}
.site-foot-v2 .foot-contact a {
  color: #4A5568;
  text-decoration: none;
}
.site-foot-v2 .foot-contact a:hover { color: #1F4E79; }
/* app download */
.site-foot-v2 .foot-app {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.site-foot-v2 .foot-qr {
  width: 78px;
  height: 78px;
  background: #fff;
  border: 1px solid #D8DEE8;
  color: #263246;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 2px;
  line-height: 1.4;
  text-align: center;
  flex-shrink: 0;
}
.site-foot-v2 .foot-app-text {
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1;
  min-width: 0;
}
.site-foot-v2 .foot-app-text small {
  color: #667085;
  font-size: 11px;
  margin-bottom: 2px;
}
.site-foot-v2 .foot-store {
  display: block;
  background: #fff;
  color: #263246;
  padding: 7px 12px;
  border-radius: 4px;
  text-decoration: none;
  font-size: 11px;
  text-align: center;
  border: 1px solid #1F4E79;
  font-weight: 600;
  letter-spacing: .5px;
  transition: all .2s;
}
.site-foot-v2 .foot-store:hover {
  background: #1F4E79;
  color: #fff;
  text-decoration: none;
}
.site-foot-v2 .foot-store b { margin-right: 3px; }
/* bottom bar */
.site-foot-v2 .foot-bottom {
  background: #EDEDED;
  margin: 0 -24px;
  padding: 16px 24px 20px;
  color: #667085;
  text-align: center;
  line-height: 2;
  font-size: 11px;
}
.site-foot-v2 .foot-bottom b {
  color: #1F4E79;
  font-weight: 600;
}
.site-foot-v2 .foot-bottom .foot-meta {
  color: #8C95A6;
  margin-top: 2px;
  letter-spacing: .5px;
}
.site-foot-v2 .foot-bottom .foot-meta span {
  margin: 0 5px;
  color: #C5C9D2;
}

/* ===== Mobile Bottom Bar (hidden on desktop) ===== */
.mobile-bottom-bar {
  display: none;
}

/* mobile hamburger */
.mobile-nav-toggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;background:transparent;border:0;color:#fff;font-size:22px;cursor:pointer;position:absolute;right:8px;top:50%;transform:translateY(-50%);z-index:100}

/* ===== Responsive ===== */
@media (max-width: 1024px){
  body{overflow-x:hidden}
  .page,.layout,.foot-inner,.head-inner,.nav-inner,.bar-inner,.top,.head,.layout-inner,.friendly{max-width:100%!important;width:auto!important}
}

@media (max-width: 768px){
  html,body{overflow-x:hidden}
  body{font-size:14px}

  /* --- core layout fluid --- */
  .page{width:100%!important;max-width:100%!important;padding:0!important}
  .wrap{width:100%!important;max-width:100%!important}
  /* --- mobile ad slider --- */
  .top-ads{display:none!important}
  .top-ads-slider{display:block!important;width:100%;margin:0 auto 6px;overflow:hidden;position:relative}
  .top-ads-slider .slider-track{display:flex;transition:transform .4s ease;touch-action:pan-y}
  .top-ads-slider .slider-track .ad{flex:0 0 100%;height:60px;font-size:11px}
  .top-ads-slider .slider-dots{display:flex;justify-content:center;gap:5px;padding:6px 0}
  .top-ads-slider .slider-dots .dot{width:6px;height:6px;border-radius:50%;background:#D0CCC4;border:none;padding:0;cursor:pointer;transition:background .2s}
  .top-ads-slider .slider-dots .dot.active{background:#1F4E79}

  .country-links{width:100%!important;padding:5px 10px!important;box-sizing:border-box;white-space:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}
    .header-actions{flex-direction:row!important;gap:6px;width:100%}
  .header-actions .btn{flex:1;height:34px;font-size:12px;padding:0 6px;line-height:34px}
  .notice-actions{width:100%!important;display:grid!important;grid-template-columns:1fr!important;gap:8px;padding:10px 12px!important;border-left:none!important;border-right:none!important}
  .notice-actions .notice-btn{width:100%;height:40px;font-size:14px}
    .notice-marquee{width:100%!important;border-left:none!important;border-right:none!important;font-size:11px}
  .notice-marquee .nm-label{padding:0 8px;font-size:11px}
    .site-header{width:100%!important;border-radius:0!important;box-shadow:none!important;border-left:none!important;border-right:none!important}
  .nav-tabs{width:100%!important;flex-wrap:wrap!important}
  .nav-tabs a{flex:none!important;padding:10px 12px!important;font-size:13px!important;white-space:nowrap}
  .notice{width:100%!important;font-size:11px}

  /* --- search mobile 3-row --- */
  .search-bar{width:100%!important;flex-direction:column!important;gap:8px;align-items:stretch!important;padding:12px!important;border-radius:0!important;border-left:none!important;border-right:none!important}
  .search-bar .label{display:none!important}
  .search-bar input[type="text"]{width:100%!important;height:44px!important;font-size:14px;border-radius:6px!important;border:1px solid #D0CCC4!important}
  .search-bar input[type="text"]:focus{border-color:#1F4E79!important}
  .search-bar .search-selects{display:grid!important;grid-template-columns:1fr 1fr;gap:8px;width:100%}
  .search-bar select{width:100%!important;height:44px!important;font-size:14px;border-radius:6px!important}
  .search-bar button{width:100%!important;height:46px!important;font-size:15px;border-radius:6px!important}
  .search-bar-row2{width:100%!important;padding:8px 12px!important;border-radius:0!important;border-left:none!important;border-right:none!important}
  .user-action-bar{width:100%!important;display:block!important;padding:8px 10px!important;border-left:none!important;border-right:none!important}
  .user-action-bar .user-status{margin-bottom:8px;line-height:1.6}
  .user-action-bar .site-stats{display:block!important;margin-left:0!important;margin-top:2px;color:#999}
  .user-action-bar .user-actions{display:grid!important;grid-template-columns:1fr 1fr 1fr;gap:6px}
  .user-action-bar .user-actions .ua-btn{min-width:0!important;padding:0 4px!important;font-size:12px!important}
  .ua-btn{width:100%!important;height:36px!important;font-size:13px!important;min-width:0!important}
  .region-quick{width:100%!important;margin:8px 0!important;padding:8px!important;border-left:none!important;border-right:none!important}
  .region-quick-head{align-items:flex-start;flex-direction:column;gap:6px}
  .region-toggle{width:100%;height:32px;font-size:13px}
  .region-list-basic{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto;-webkit-overflow-scrolling:touch;gap:6px;padding-bottom:4px}
  .region-list-more{flex-wrap:wrap!important;overflow-x:visible!important}
  .region-chip{flex:0 0 auto;height:30px;font-size:13px;padding:0 10px}
    .mid-ads-2{width:100%!important;grid-template-columns:1fr!important;padding:0 6px}
  .mid-ads-3{width:100%!important;grid-template-columns:1fr!important;gap:8px;padding:0 6px}
  .main-area{width:100%!important;grid-template-columns:1fr!important;padding:0 6px!important;gap:8px!important}
  .col-main{width:100%!important}
  .col-side{width:100%!important}
  .main-banner{width:100%!important;grid-template-columns:1fr!important}
  .bottom-ads{width:100%!important;grid-template-columns:1fr!important;padding:0 6px}
  .bottom-banner{width:100%!important;margin-left:0;margin-right:0}
  .bot-modules{width:100%!important;grid-template-columns:1fr!important;padding:0 6px}
  .friendly{width:100%!important}

  /* --- header mobile --- */
  .site-header{padding:0!important;border:none!important;margin-bottom:0!important}
  .header-top{display:flex!important;flex-direction:column!important;gap:0!important}
  .brand-block{width:100%!important;box-sizing:border-box;padding:12px 14px!important;gap:10px!important;border-right:none!important;border-bottom:1px solid #EDEDED!important;border-radius:0!important}
  .site-logo{width:32px!important;height:32px!important}
    .brand-icon{width:32px!important;height:32px!important}
  .brand-divider{height:34px!important}
  .brand-name-zh{font-size:20px!important}
  .brand-name-en{font-size:10px!important}
  .brand-tag{font-size:9px!important;padding:1px 5px!important}
  .brand-subtitle{font-size:10px!important}
  .header-center{display:flex!important;flex-direction:column!important;padding:10px 14px!important;border-right:none!important;border-bottom:1px solid #EDEDED!important}
  .hc-title{font-size:13px!important;margin-bottom:4px!important}
  .hc-body{font-size:12px!important;line-height:1.6!important}
  .hc-phone{font-size:12px!important}
  .header-meta{flex-direction:row!important;flex-wrap:wrap!important;align-items:center!important;justify-content:space-between!important;border-left:none!important;padding:8px 14px!important;background:transparent!important;min-width:auto!important}
  .clock{gap:4px!important}
  .clock-time{font-size:13px!important}
  .quick-links a{font-size:10px!important;padding:0 4px!important}
  .header-meta{width:100%;text-align:left!important}
  .quick-links{font-size:12px}

  /* --- nav scroll --- */
  .nav-tabs{overflow-x:auto!important;-webkit-overflow-scrolling:touch;flex-wrap:nowrap!important}

  /* --- listing / module cards mobile --- */
  .module {
    border-left: none!important;
    border-right: none!important;
    margin-bottom: 10px!important;
  }
  .module-head {
    padding: 0 12px!important;
    height: 36px!important;
  }
  .module-head .title {
    font-size: 14px!important;
  }
  .module-head .title em {
    display: none;
  }
  .module-head .more {
    font-size: 12px;
  }
  .listing {
    padding: 6px 12px 2px!important;
  }
  .listing li {
    display: grid!important;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 4px 8px;
    align-items: start;
    padding: 9px 0!important;
    font-size: 14px!important;
    line-height: 1.55!important;
    border-bottom: 1px solid #f0f0f0!important;
  }
  .listing li:last-child {
    border-bottom: none!important;
  }
  .listing li .tag {
    grid-row: 1;
    grid-column: 1;
    width: auto!important;
    padding: 1px 6px!important;
    font-size: 11px!important;
    margin-top: 2px;
  }
  .listing li .title {
    grid-row: 1;
    grid-column: 2;
    white-space: normal!important;
    overflow: visible!important;
    text-overflow: unset!important;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
    font-size: 14px!important;
    line-height: 1.5!important;
    color: #333;
  }
  .listing li .city,
  .listing li .date {
    grid-row: 2;
    font-size: 11px!important;
    color: #999;
    white-space: nowrap;
  }
  .listing li .city {
    grid-column: 2;
    justify-self: start;
  }
  .listing li .date {
    grid-column: 2;
    justify-self: end;
    grid-row: 2;
  }
  /* put city+date on same row */
  .listing li {
    grid-template-columns: auto 1fr auto;
  }
  .listing li .city {
    grid-column: 2;
    grid-row: 2;
  }
  .listing li .date {
    grid-column: 3;
    grid-row: 2;
  }
  .listing li .tag {
    grid-row: 1 / 3;
    align-self: start;
  }
  .listing li .title {
    grid-column: 2 / 4;
    grid-row: 1;
  }

  /* side ads */
  .side-ads{flex-direction:row!important;flex-wrap:wrap;gap:8px}
  .side-ads .ad{width:calc(50% - 4px)!important;height:auto!important;min-height:160px}

  /* hide desktop-only */
  .desktop-only,.hide-mobile{display:none!important}
  .mobile-nav-toggle{display:flex!important}

  /* footer */
  .site-foot{margin-top:12px!important}
  .site-foot-v2 .foot-inner{padding:28px 16px 0}
  .site-foot-v2 .foot-grid{grid-template-columns:1fr 1fr!important;gap:28px}
  .site-foot-v2 .foot-col-brand{grid-column:1 / -1}
  .site-foot-v2 .foot-bottom{margin:0 -16px}

  /* typography */
  h1{font-size:22px!important}
  h2{font-size:18px!important}
  h3{font-size:16px!important}

  /* --- MOBILE BOTTOM BAR --- */
  .mobile-bottom-bar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: #fff;
    border-top: 1px solid #e5e5e5;
    box-shadow: 0 -1px 3px rgba(0,0,0,.06);
    padding: 8px 12px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    gap: 8px;
    align-items: stretch;
  }
  .mobile-bottom-bar .mb-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 10px 6px;
    border-radius: 4px;
    border: none;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s;
    -webkit-tap-highlight-color: transparent;
    text-align: center;
    line-height: 1.3;
  }
  .mobile-bottom-bar .mb-btn:hover {
    text-decoration: none;
    color: #fff;
  }
  .mobile-bottom-bar .mb-btn:active {
    opacity: .9;
  }
  .mobile-bottom-bar .mb-btn .mb-icon {
    font-size: 18px;
    flex-shrink: 0;
  }
  /* all bottom buttons: unified red */
  .mb-btn-publish { background: #F28C28; box-shadow: none; }
  .mb-btn-jobs { background: #1F5D99; box-shadow: none; }
  .mb-btn-housing { background: #2E9D64; box-shadow: none; }
  .mb-btn-publish:active { background: #c46c1f; }
  .mb-btn-jobs:active { background: #163d61; }
  .mb-btn-housing:active { background: #248052; }
  

  /* body padding so content isn't hidden behind bar */
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important; }
}

@media (max-width: 480px){
  /* footer 1col */
  .site-foot-v2 .foot-grid{grid-template-columns:1fr!important;gap:24px}
  .site-foot-v2 .foot-col-brand{grid-column:auto}

  /* bottom bar smaller text */
  .mobile-bottom-bar .mb-btn{font-size:12px;padding:8px 4px;border-radius:3px}
  .mobile-bottom-bar .mb-btn .mb-icon{font-size:14px}
}


/* ===== block separator ===== */


/* ============================================================
   UNIVERSAL MOBILE FIX (max-width: 768px ONLY — desktop untouched)
   ============================================================ */
@media (max-width: 768px) {
  /* === Base & overflow === */
  html, body { max-width: 100vw; overflow-x: hidden; }

  /* === Full-width containers === */
  .page, .wrap,
  .country-links,
  .site-header, .header-top, .brand-block, .header-center, .header-meta,
  .nav-tabs,
  .notice, .notice-marquee, .notice-actions,
  .search-bar, .search-bar-row2, .search-hero, .search-main, .search-result-area, .search-sidebar,
  .user-action-bar, .user-status, .user-actions,
  .mid-ads-2, .mid-ads-3, .main-area, .main-banner, .main-content, .col-main, .col-side,
  .bottom-ads, .bottom-banner, .bot-modules, .friendly,
  .site-foot, .foot-inner, .foot-grid, .foot-bottom,
  .crumbs, .cat-top-ads, .cat-main, .cat-title-bar, .cat-grid, .cat-side,
  .region-filter, .region-quick,
  .yp-hero, .yp-main, .yp-search, .yp-side,
  .post-area, .page-banner, .col-form,
  .detail-area, .detail-main, .detail-side,
  .uc-area, .uc-main, .uc-side, .me-card,
  .auth-area, .auth-wrap, .auth-card, .security-bar,
  .info-content,
  .pirate-hero, .sh-hero, .pcat-bar, .pside, .pgrid {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* === Grid → single column === */
  .main-area, .post-area, .yp-main, .cat-main, .uc-area, .search-main,
  .detail-area, .bot-modules, .mid-ads-2, .mid-ads-3, .bottom-ads {
    grid-template-columns: 1fr !important;
    display: block !important;
  }

  /* === Hero/Banner stack === */
  .yp-hero, .page-banner, .pirate-hero, .sh-hero, .post-hero {
    display: block !important;
    text-align: center;
    padding: 16px !important;
  }
  .yp-hero h1, .page-banner h1 {
    font-size: 20px !important; line-height: 1.3 !important;
    letter-spacing: 0 !important; margin-bottom: 12px;
  }
  .yp-hero h1 .em { font-size: 22px !important; margin: 0 6px 0 0 !important; }
  .yp-hero h1 .en {
    letter-spacing: 2px !important; margin-top: 6px !important;
    font-size: 11px !important; display: inline-block !important;
  }
  .yp-hero .yp-stats {
    justify-content: space-around !important; gap: 8px !important;
    flex-wrap: wrap; margin-top: 8px; display: flex !important;
  }
  .yp-hero .yp-stats .s { flex: 1; min-width: 70px; }
  .yp-hero .yp-stats .n { font-size: 18px !important; }
  .yp-hero .yp-stats .l { font-size: 10px !important; }
  .page-banner .left {
    flex-direction: column !important; gap: 8px !important;
    align-items: flex-start;
  }
  .page-banner .right {
    display: grid !important; grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 6px !important; margin-top: 8px !important; width: 100%;
  }
  .page-banner .right .sep { display: none; }
  .page-banner .right .item b { font-size: 16px !important; }

  /* Auth-area, sidebars */
  .auth-area { display: block !important; }
  .col-side, .yp-side, .cat-side, .uc-side, .detail-side, .search-sidebar {
    width: 100% !important; margin-top: 12px;
  }

  /* Form rows wrap */
  .yp-search, .search-bar, .form-row, .row-2, .row-3, .row-4, .filter-row,
  .price-options, .phone-row {
    flex-wrap: wrap !important; gap: 8px !important;
  }
  .yp-search input, .yp-search select, .yp-search button {
    flex: 1 1 100% !important; width: 100% !important;
  }

  input[type="text"], input[type="email"], input[type="password"],
  input[type="tel"], input[type="search"], input[type="number"],
  textarea, select {
    max-width: 100% !important; box-sizing: border-box !important;
  }
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  img { max-width: 100%; height: auto; }
  .notice-marquee, .nm-track { overflow: hidden !important; }

  /* ============================================================
     COUNTRY LINKS — single row, horizontal scroll, no wrap
     ============================================================ */
  .country-links {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start !important;
    gap: 0 !important;
    padding: 6px 12px !important;
    text-align: left !important;
    scrollbar-width: none;
    white-space: nowrap;
  }
  .country-links::-webkit-scrollbar { display: none; }
  .country-links a {
    flex: 0 0 auto;
    padding: 4px 10px !important;
    font-size: 13px !important;
    color: #1F5D99 !important;
    text-decoration: none;
    border-radius: 3px;
    transition: background .15s;
  }
  .country-links a:hover, .country-links a.active {
    background: #EEF2FB;
    color: #1F4E79 !important;
    font-weight: 700;
  }
  .country-links span {
    flex: 0 0 auto;
    padding: 4px 0 !important;
    color: #ccc !important;
    margin: 0 !important;
    font-size: 11px;
  }

  /* ============================================================
     BRAND BLOCK — logo LEFT of text, group centered
     ============================================================ */
  .brand-block {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: left !important;
    padding: 14px 14px !important;
    gap: 12px !important;
    border-bottom: 1px solid #EDEDED !important;
  }
  .brand-block .brand-icon, .brand-block .site-logo {
    width: 56px !important;
    height: 56px !important;
    flex-shrink: 0 !important;
  }
  .brand-block .brand-divider { display: none !important; }
  .brand-block .brand-text {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    gap: 3px !important;
    min-width: 0;
  }
  .brand-block .brand-name-row {
    display: flex !important;
    align-items: baseline !important;
    gap: 6px !important;
    justify-content: flex-start !important;
  }
  .brand-block .brand-name-zh {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #2C2C2C !important;
    letter-spacing: 1px !important;
    line-height: 1.1 !important;
  }
  .brand-block .brand-name-en {
    font-size: 10px !important;
    color: #7A8599 !important;
    letter-spacing: 1.5px !important;
  }
  .brand-block .brand-tags {
    justify-content: flex-start !important;
    flex-wrap: wrap;
    gap: 4px !important;
  }
  .brand-block .brand-subtitle {
    text-align: left !important;
    font-size: 10px !important;
    line-height: 1.3 !important;
  }
  /* Header center & meta */
  .header-center { text-align: left !important; padding: 10px 14px !important; }
  .header-meta { text-align: center !important; padding: 10px 12px !important; }
  .header-meta .clock { justify-content: center; }
  .header-meta .quick-links { text-align: center; }

  /* ============================================================
     CATEGORY PAGES UI
     ============================================================ */
  .cat-top-ads {
    display: flex !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 10px !important;
    padding: 22px 10px 14px !important;
    grid-template-columns: none !important;
    scrollbar-width: none;
    position: relative;
  }
  .cat-top-ads::before {
    content: "黄金会员推荐";
    position: absolute; top: -4px; left: 12px;
    background: linear-gradient(135deg, #F7C32E, #D69A1A);
    color: #4a2f05; font-size: 10px; font-weight: 700;
    padding: 2px 8px; border-radius: 2px; letter-spacing: 0.5px; z-index: 2;
  }
  .cat-top-ads::-webkit-scrollbar { display: none; }
  .cat-top-ads > * {
    flex: 0 0 88% !important; scroll-snap-align: start;
    height: auto !important; min-height: 110px;
    border-radius: 6px; border: 1px solid #E8C98A;
  }

  .region-filter {
    padding: 10px 12px !important;
    background: #fff !important;
    border-bottom: 1px solid #eee !important;
  }

  .mid-ads-3 {
    display: flex !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 8px !important; padding: 10px 10px !important;
    scrollbar-width: none;
  }
  .mid-ads-3::-webkit-scrollbar { display: none; }
  .mid-ads-3 > * {
    flex: 0 0 calc(50% - 5px) !important; scroll-snap-align: start;
    height: auto !important; min-height: 100px; padding: 10px !important;
    border-radius: 6px;
  }

  .cat-title-bar {
    padding: 12px 14px !important; background: #fff !important;
    border-bottom: 1px solid #eee !important;
  }
  .cat-title-bar h1, .cat-title-bar .title {
    font-size: 18px !important; margin: 0 0 10px !important;
  }
  .cat-title-bar .sub-tabs, .cat-title-bar .tabs {
    display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 6px !important;
  }
  .cat-title-bar .sub-tabs a, .cat-title-bar .tabs a {
    padding: 8px 6px !important; border: 1px solid #DDDDDD;
    background: #FAFAFA; color: #333; border-radius: 4px;
    font-size: 12px; text-align: center; text-decoration: none;
  }
  .cat-title-bar .sub-tabs a.active, .cat-title-bar .tabs a.active {
    background: #1F5D99; color: #fff; border-color: #1F5D99; font-weight: 700;
  }

  /* ============================================================
     FOOTER — accordion (mobile only) — see foot-h::after for chevron
     ============================================================ */
  .site-foot-v2 .foot-grid {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    padding: 16px !important;
  }
  .site-foot-v2 .foot-col-brand {
    text-align: center; padding: 0 0 16px !important;
    border-bottom: 1px solid #ddd; margin-bottom: 8px;
  }
  .site-foot-v2 .foot-brand { justify-content: center; }
  .site-foot-v2 .foot-intro { text-align: center; margin: 8px 0 12px; font-size: 12px; }
  .site-foot-v2 .foot-social { justify-content: center; }
  .site-foot-v2 .foot-col:not(.foot-col-brand) {
    border-bottom: 1px solid #ddd;
  }
  .site-foot-v2 .foot-col:not(.foot-col-brand) .foot-h {
    margin: 0 !important; padding: 14px 32px 14px 0 !important;
    cursor: pointer; position: relative; font-size: 13px !important;
    user-select: none;
  }
  /* Hide ::after gold underline on mobile (replaced by chevron) */
  .site-foot-v2 .foot-col:not(.foot-col-brand) .foot-h::after {
    content: ''; position: absolute; right: 4px; top: 50%;
    width: 9px; height: 9px;
    border-right: 2px solid #999; border-bottom: 2px solid #999;
    transform: translateY(-75%) rotate(45deg);
    background: none !important;
    left: auto !important;
    transition: transform .25s ease;
  }
  .site-foot-v2 .foot-col.is-open .foot-h::after {
    transform: translateY(-25%) rotate(-135deg);
    border-right-color: #1F4E79;
    border-bottom-color: #1F4E79;
  }
  /* ===== Footer mobile: always expanded (accordion removed — no JS) =====
     Was: max-height:0 with .is-open toggle, but no JS trigger existed
     → all link lists / contact / app hidden on mobile. Now always visible. */
  .site-foot-v2 .foot-col:not(.foot-col-brand) .foot-list,
  .site-foot-v2 .foot-col:not(.foot-col-brand) .foot-app,
  .site-foot-v2 .foot-col:not(.foot-col-brand) .foot-contact {
    max-height: none; overflow: visible; padding-bottom: 8px;
  }
  .site-foot-v2 .foot-col:not(.foot-col-brand) .foot-h::after {
    display: none;
  }
  .site-foot-v2 .foot-col:not(.foot-col-brand) .foot-h {
    cursor: default;
    padding: 12px 0 8px !important;
  }
  .site-foot-v2 .foot-list-2 { grid-template-columns: 1fr 1fr !important; }
  .site-foot-v2 .foot-app { gap: 10px; }
  .site-foot-v2 .foot-qr { width: 64px; height: 64px; font-size: 9px; }

  /* Body bottom padding for mobile bottom bar */
  body { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)) !important; }
  .mobile-bottom-bar .mb-btn { height: 42px !important; font-size: 13px !important; }
}

/* ============================================================
   DESKTOP — keep multi-column footer, add decorative chevrons
   ============================================================ */
@media (min-width: 769px) {
  .site-foot-v2 .foot-col:not(.foot-col-brand) .foot-h {
    position: relative;
    padding-right: 22px !important;
  }
  .site-foot-v2 .foot-col:not(.foot-col-brand) .foot-h .foot-h-chev {
    position: absolute;
    right: 0;
    top: 4px;
    width: 7px; height: 7px;
    border-right: 2px solid #B63A3A;
    border-bottom: 2px solid #B63A3A;
    transform: rotate(45deg);
    opacity: .55;
  }
}


/* ===== block separator ===== */


/* Desktop & mobile shared: search input wrapper */
/* ============================================================
     SEARCH BAR — main keyword search optimization
     ============================================================ */
  /* Desktop: enhance input wrapper for icon */
  /* (no rule outside @media since desktop layout already works) */

  /* The .search-input-wrap container holds input + icons */
  .search-input-wrap {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
  }
  .search-input-wrap .search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #888;
    pointer-events: none;
    z-index: 1;
  }
  .search-input-wrap input[type="text"] {
    width: 100%;
    padding-left: 38px !important;
    padding-right: 36px !important;
  }
  .search-clear-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: #999;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
  }
  .search-clear-btn:hover { background: #f0f0f0; color: #555; }
  .search-clear-btn[hidden] { display: none !important; }
  .search-input-wrap input::placeholder { color: #999; opacity: 1; }

/* Mobile-only enhancements */
@media (max-width: 768px) {

  /* Mobile: 3-row layout — input / 2 selects / button */
  .search-bar {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 14px 12px !important;
    background: #fff !important;
    border-radius: 0 !important;
    border: 1px solid #E0DDD6 !important;
  }
  .search-bar .label {
    display: none !important;
  }
  .search-bar .search-input-wrap {
    width: 100% !important;
    grid-column: 1 !important;
  }
  .search-bar .search-input-wrap input[type="text"] {
    height: 44px !important;
    font-size: 14px !important;
    border: 1px solid #D0CCC4 !important;
    border-radius: 6px !important;
    padding: 0 36px 0 38px !important;
    background: #fafafa !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }
  .search-bar .search-input-wrap input[type="text"]:focus {
    background: #fff !important;
    border-color: #1F5D99 !important;
    box-shadow: 0 0 0 2px rgba(31,93,153,.12) !important;
    outline: none !important;
  }
  .search-bar .search-selects {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
  }
  .search-bar select {
    height: 44px !important;
    font-size: 14px !important;
    border-radius: 6px !important;
    padding: 0 28px 0 12px !important;
    border: 1px solid #D0CCC4 !important;
    background-color: #fff !important;
  }
  .search-bar button {
    width: 100% !important;
    height: 46px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
    background: #1F5D99 !important;
    color: #fff !important;
    border: none !important;
    letter-spacing: 2px !important;
    cursor: pointer;
    transition: background .15s;
  }
  .search-bar button:hover { background: #163d61 !important; }
  /* Spacing between search and hot-tags */
  .search-bar-row2, .search-bar + .hot-tags {
    margin-top: 8px !important;
    padding: 10px 12px !important;
    background: #fafafa !important;
    border-radius: 6px !important;
    border: none !important;
  }

}


/* ===== block separator ===== */


/* ============================================================
   STICKY NAV TABS — DESKTOP uses sticky, MOBILE uses fixed (more robust)
   ============================================================ */
/* Desktop: position sticky (works when no parent has overflow:hidden) */
@media (min-width: 769px) {
  .nav-tabs {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #D9DCF4;
    transition: box-shadow .2s, background .2s;
  }
  .nav-tabs.is-stuck {
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    background: rgba(217, 220, 244, 0.98);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
}
.nav-tabs-placeholder {
  display: none;
}
/* ============================================================
   MOBILE NAV — fixed-mode when scrolled (CSS sticky breaks due to body overflow-x)
   ============================================================ */
@media (max-width: 768px) {
  /* Placeholder spacer (occupies space when nav becomes fixed) */
  .nav-tabs-placeholder {
    display: none;
    height: 44px;
    background: transparent;
  }
  .nav-tabs-placeholder.is-active { display: block; }

  /* Mobile nav base */
  .nav-tabs {
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none;
    transition: box-shadow .15s ease;
  }
  .nav-tabs::-webkit-scrollbar { display: none; }
  .nav-tabs a {
    flex: 0 0 auto !important;
    padding: 11px 16px !important;
    font-size: 14px !important;
    white-space: nowrap !important;
  }

  /* When fixed, take over top of viewport */
  .nav-tabs.is-fixed-mobile {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background: #fff !important;
    border-bottom: 1px solid #C7CAE5;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    margin: 0 !important;
    border-radius: 0 !important;
    /* Account for iPhone notch */
    padding-top: env(safe-area-inset-top, 0) !important;
  }
  .nav-tabs.is-fixed-mobile a {
    color: #333 !important;
  }
  .nav-tabs.is-fixed-mobile a.active {
    color: #1F4E79 !important;
    font-weight: 700;
    background: #EEF2FB !important;
    border-bottom: 2px solid #1F4E79;
  }

  /* Mobile-only abbreviated labels via CSS-replaced content
     Use data-mobile-label attribute set by JS for cleaner approach */
  .nav-tabs a[data-mobile-label] .full-label {
    display: none;
  }
  .nav-tabs a[data-mobile-label] .short-label {
    display: inline;
  }
}

/* Desktop: hide short-label, show full-label */
@media (min-width: 769px) {
  .nav-tabs a .short-label { display: none; }
  .nav-tabs a .full-label { display: inline; }
}

/* ============================================================
   BACK-TO-TOP BUTTON (icon only — no text)
   ============================================================ */
.back-to-top {
  position: fixed;
  right: 20px;
  bottom: 90px;
  width: 44px;
  height: 44px;
  background: #1F5D99;
  color: #fff;
  border: none;
  border-radius: 50%;
  box-shadow: 0 3px 10px rgba(31,93,153,0.28);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s ease, background .15s;
  z-index: 1000;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}
.back-to-top.is-visible {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}
.back-to-top:hover { background: #163d61; }
.back-to-top:active { transform: translateY(0) scale(0.94) !important; }
.back-to-top svg { display: block; }

@media (max-width: 768px) {
  /* Mobile sticky nav — account for iPhone notch */
  .nav-tabs {
    top: env(safe-area-inset-top, 0);
  }
  .nav-tabs.is-stuck {
    background: rgba(255, 255, 255, 0.98);
    border-bottom: 1px solid #C7CAE5;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
  }
  /* Mobile back-to-top: smaller, above bottom action bar */
  .back-to-top {
    right: 14px;
    bottom: 80px;
    width: 40px;
    height: 40px;
    box-shadow: 0 2px 8px rgba(31,93,153,0.25);
  }
  .back-to-top svg {
    width: 18px;
    height: 18px;
  }
}


/* ===== block separator ===== */


/* ===== Unified Mobile Carousel (only @media 768px) ===== */
@media (max-width: 768px) {
  /* Outer wrapper (NOT scrollable) — added by JS around each carousel */
  .mobile-carousel-wrap {
    position: relative;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0;
    box-sizing: border-box;
    overflow: hidden;
  }

  /* The actual scrollable carousels */
  .side-ads, .side-ad-grid, .cat-top-ads, .mid-ads-3, .mid-ads-2 {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    gap: 10px !important;
    padding: 4px 16px 0 !important;
    /* Remove old padding-bottom that was reserving dot space; dots are now OUTSIDE */
    padding-bottom: 0 !important;
    grid-template-columns: none !important;
  }
  .side-ads::-webkit-scrollbar,
  .side-ad-grid::-webkit-scrollbar,
  .cat-top-ads::-webkit-scrollbar,
  .mid-ads-3::-webkit-scrollbar,
  .mid-ads-2::-webkit-scrollbar { display: none; }

  /* Side ads card sizing */
  .side-ads > .ad,
  .side-ad-grid > .ad {
    flex: 0 0 calc(100vw - 64px) !important;
    width: calc(100vw - 64px) !important;
    max-width: 320px !important;
    min-height: 110px;
    height: auto !important;
    scroll-snap-align: center !important;
    border-radius: 8px;
    border: 1px solid #E8E4DC;
    padding: 16px !important;
    box-sizing: border-box;
  }
  .side-ads .ad-content,
  .side-ad-grid .ad-content {
    text-align: center;
    padding: 0 !important;
  }
  .side-ads .ad-content h4,
  .side-ad-grid .ad-content h4 {
    font-size: 16px !important;
    margin: 6px 0 4px !important;
  }
  .side-ads .ad-content p,
  .side-ad-grid .ad-content p {
    font-size: 12px !important;
    margin: 0 !important;
    line-height: 1.5;
  }
  .side-ads .ad-content .cta,
  .side-ad-grid .ad-content .cta {
    display: inline-block;
    margin-top: 10px !important;
    padding: 6px 16px !important;
    border-radius: 3px;
  }

  /* Mid-ads-2 (two 495x80 banners) become full-width carousel slides */
  .mid-ads-2 > .ad {
    flex: 0 0 calc(100% - 8px) !important;
    width: calc(100% - 8px) !important;
    max-width: 100% !important;
    height: 88px !important;
    scroll-snap-align: start !important;
    border-radius: 6px;
    box-sizing: border-box;
  }

  /* Mid-ads-3 cards */
  .mid-ads-3 > .ad {
    flex: 0 0 calc(50vw - 14px) !important;
    width: calc(50vw - 14px) !important;
    min-height: 100px;
    height: auto !important;
    scroll-snap-align: start !important;
    border-radius: 6px;
    padding: 10px !important;
    box-sizing: border-box;
  }

  /* Cat-top-ads cards */
  .cat-top-ads > * {
    flex: 0 0 calc(100vw - 64px) !important;
    max-width: 320px !important;
    scroll-snap-align: center !important;
  }

  /* ============================================================
     CAROUSEL DOTS — placed OUTSIDE the scrollable track
     (rendered as sibling element by JS)
     ============================================================ */
  .carousel-dots {
    position: static !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 8px 0 12px !important;
    padding: 0 !important;
    width: 100%;
    pointer-events: auto;
  }
  .carousel-dots .dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: #cbd5e1;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background .2s, width .2s, transform .2s;
  }
  .carousel-dots .dot.is-active {
    width: 16px;
    background: #1F4E79;
    transform: none;
  }

  /* Side title (推荐广告 RECOMMEND) */
  .side-sticky-title, .side-title {
    margin: 14px 16px 6px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    font-size: 13px !important;
    text-align: left !important;
    color: #1F4E79 !important;
    font-weight: 700 !important;
    letter-spacing: 1px;
  }
  .side-sticky-title small, .side-title small {
    color: #999;
    margin-left: 6px;
    font-size: 10px;
    letter-spacing: 2px;
    font-weight: 400;
  }

  /* Cat-top-ads gold-badge ::before stays correct */
  .cat-top-ads { padding-top: 22px !important; }

  /* Friendly tip + col-side spacing */
  .col-side > div[style*="background:#fff"]:not(.side-ads):not(.side-ad-grid) {
    margin: 12px 16px;
    border-radius: 6px;
  }
  .col-side, .cat-side { padding: 0 !important; }
}


/* ===== block separator ===== */


/* ===== Mobile-only: catch remaining uncovered ad classes ===== */
@media (max-width: 768px) {
  /* In-list inline banner — viewport-width to escape parent col-list 770px */
  .in-list-ad {
    display: block !important;
    width: auto !important;
    max-width: calc(100vw - 24px) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
    padding: 8px 10px !important;
    font-size: 11px !important;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.5;
  }

  /* Top ads — for pages that have desktop .top-ads but no .top-ads-slider */
  .top-ads {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  /* Pages with .top-ads-slider already handle mobile, so hide raw .top-ads when slider exists.
     But for pages without slider, .top-ads needs to become a carousel via JS. */
  /* Bottom ads/banner — single column on mobile */
  .bottom-ads {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 12px !important;
  }
  .bottom-ads .ad {
    width: 100% !important;
    margin-bottom: 8px;
  }
  .bottom-banner {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 8px 12px !important;
    width: calc(100% - 24px) !important;
  }

  /* Main banner (380x90 x2) — make into 1-col carousel via wrap */
  .main-banner {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}


/* ===== block separator ===== */


/* ===== Desktop-only homepage UI polish (1280 / 1440 / 1920) =====
   Pure visual layer: shadows, spacing, borders, hover. No layout/structure change.
   All rules hard-gated by min-width:769px so mobile is untouched. */
@media (min-width: 769px) {
  /* --- Country quick links: breathing room + clearer hover --- */
  .country-links {
    box-shadow: 0 1px 0 rgba(31,78,121,0.04);
  }
  .country-links a {
    transition: background .15s, color .15s;
  }
  .country-links a:hover {
    background: #F1F4FB;
    color: #1F4E79;
  }

  /* --- Search bar: card lift + sharper focus --- */
  .search-bar {
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    border-radius: 3px;
  }
  .search-bar input[type="text"]:focus,
  .search-bar select:focus {
    box-shadow: 0 0 0 2px rgba(31,78,121,0.12);
  }
  .search-bar button {
    transition: background .15s, box-shadow .15s;
  }
  .search-bar button:hover {
    box-shadow: 0 2px 4px rgba(22,61,97,0.25);
  }

  /* --- Region quick: same card lift, head spacing --- */
  .region-quick {
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    border-radius: 3px;
  }
  .region-quick-head {
    padding-bottom: 4px;
  }
  .region-chip {
    transition: background .15s, border-color .15s, color .15s;
  }

  /* --- Mid-ads-3 (黄金会员位 row): unify card border + lift on hover --- */
  .mid-ads-3 .ad {
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    transition: box-shadow .18s, transform .18s;
  }
  .mid-ads-3 .ad:hover {
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  }
  .mid-ads-3 .ad-content .kicker {
    color: #F28C28;
    font-weight: 700;
  }
  .mid-ads-3 .ad-content .cta {
    border-radius: 2px;
    transition: background .15s;
  }
  .mid-ads-3 .ad-content .cta:hover {
    background: #d9761b;
  }

  /* --- Module cards: subtle shadow for layered feel --- */
  .module {
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    margin-bottom: 10px;
  }
  .module-head {
    height: 34px;
    padding: 0 14px;
  }
  .module-head .title {
    font-size: 14px;
    letter-spacing: 0.5px;
  }
  .module-head .title::before {
    width: 3px;
    height: 15px;
    border-radius: 1px;
  }

  /* --- Listing rows: zebra hover + slightly tighter padding for density --- */
  .listing {
    padding: 8px 14px;
  }
  .listing li {
    padding: 7px 6px;
    margin: 0 -6px;
    border-radius: 2px;
    transition: background .12s;
  }
  .listing li:hover {
    background: #F7F9FC;
  }
  .listing li .tag {
    font-weight: 600;
  }

  /* --- Main banner & bottom blocks: match module card style --- */
  .main-banner .ad,
  .bottom-ads .ad,
  .bottom-banner.ad,
  .bottom-banner > .ad {
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  }

  /* --- Right sidebar: highlight first gold slot, polish CTAs --- */
  .side-sticky-title {
    border-radius: 3px;
    color: #1F4E79;
    font-weight: 600;
    letter-spacing: 3px;
    background: #F1F4FB;
    border-color: #C7CAE5;
  }
  .side-ads .ad {
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    transition: box-shadow .18s;
  }
  .side-ads .ad:hover {
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  }
  .side-ads .ad.tinted-a {
    border-color: #F28C28;
    box-shadow: 0 1px 2px rgba(242,140,40,0.18);
  }
  .side-ads .ad.tinted-a .kicker {
    color: #F28C28;
    font-weight: 700;
  }
  .side-ads .ad-content .cta {
    border-radius: 2px;
    transition: background .15s, color .15s;
  }
  .side-ads .ad-content .cta:hover {
    background: #1F4E79;
    color: #fff;
  }

  /* --- Bot modules row: same card treatment --- */
  .bot-modules .module {
    margin-bottom: 0;
  }
}


/* ===== category-jobs.html EXTRAS (cat-* / .row / .pager / etc.) ===== */


  /* ---------- reset & base (mirrors index.html) ---------- */
  *, *::before, *::after { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body {
    font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Heiti SC", "SimSun", "宋体", Tahoma, Arial, sans-serif;
    font-size: 12px;
    color: #333;
    background: #F5F5F5;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }
  a { color: #333; text-decoration: none; }
  a:hover { color: #1F4E79; text-decoration: underline; }
  ul { list-style: none; margin: 0; padding: 0; }

  .page { width: 1200px; margin: 0 auto; padding: 8px 0 0; }

  /* ---------- ad placeholder ---------- */
  .ad {
    background: #e8e8e8;
    border: 1px solid #d3d3d3;
    color: #999;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-image: linear-gradient(135deg, transparent 49.5%, #d8d8d8 49.5%, #d8d8d8 50.5%, transparent 50.5%),
                      linear-gradient(45deg,  transparent 49.5%, #d8d8d8 49.5%, #d8d8d8 50.5%, transparent 50.5%);
  }
  .ad span { background: rgba(232,232,232,0.92); padding: 2px 8px; color: #888; letter-spacing: 1px; }

  /* ---------- header (shared) ---------- */
  /* ---------- country quick links bar ---------- */
  .country-links {
    width: 1000px;
    margin: 0 auto;
    padding: 4px 0 3px;
    font-size: 11px;
    line-height: 1.4;
    color: #1F5D99;
    background: #FFFFFF;
  }
  .country-links a {
    color: #1F5D99;
    text-decoration: none;
  }
  .country-links a:hover {
    text-decoration: underline;
  }
  .country-links span {
    color: #999999;
    margin: 0 2px;
  }

  .site-header {
    background: #fff;
    width: 1000px;
    margin: 0 auto;
    padding: 14px 16px 10px;
    border: 1px solid #DDDDDD;
    border-bottom: none;
  }

  /* nav tabs */
  /* ---------- header right action buttons ---------- */
  .header-actions {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: stretch;
    margin-top: 6px;
    width: 100%;
  }
  .header-actions .btn {
    flex: 1;
    height: 32px;
    padding: 0 10px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 4px;
    border: none;
    line-height: 32px;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
    display: block;
    color: #fff;
    white-space: nowrap;
    letter-spacing: .3px;
    transition: filter .15s;
  }
  .header-actions .btn:hover { filter: brightness(0.94); color: #fff; text-decoration: none; }
  .header-actions .btn-free-post {
    background: #1F5D99;
    color: #FFFFFF;
  }
  .header-actions .btn-vip-post {
    background: #DD8B2F;
    color: #FFFFFF;
  }
  .header-actions .btn-register {
    background: #E5704A;
    color: #FFFFFF;
  }

  /* ---------- notice quick-action buttons ---------- */
  .notice-actions {
    width: 1000px;
    margin: 0 auto;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 10px 0;
    background: #fff;
    border: 1px solid #DDDDDD;
    border-top: none;
    padding-left: 14px;
    padding-right: 14px;
  }
  .notice-actions .notice-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    padding: 0 16px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 2px;
    text-decoration: none;
    color: #fff;
    box-sizing: border-box;
    line-height: 1;
    transition: filter .15s;
  }
  .notice-actions .notice-btn:hover { filter: brightness(0.94); text-decoration: none; color: #fff; }
  .notice-actions .notice-btn svg {
    width: 16px;
    height: 16px;
    margin-right: 6px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    flex-shrink: 0;
  }
  .notice-actions .notice-btn-post {
    background: #F28C28;
  }
  .notice-actions .notice-btn-job,
  .notice-actions .notice-btn-house {
    background: #1F5D99;
  }

  /* ---------- region quick selector ---------- */
  .region-quick {
    width: 1000px;
    margin: 8px auto 0;
    background: #FFFFFF;
    border: 1px solid #DDDDDD;
    padding: 8px 10px;
    font-size: 12px;
    box-sizing: border-box;
  }
  .region-quick-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
  }
  .region-title {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
  }
  .region-title strong {
    color: #333333;
    font-size: 13px;
    font-weight: 700;
  }
  .region-current {
    color: #666666;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .region-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid #C7CAE5;
    background: #D9DCF4;
    color: #1F4E79;
    height: 26px;
    padding: 0 10px;
    font-size: 12px;
    cursor: pointer;
    border-radius: 3px;
    flex-shrink: 0;
    font-family: inherit;
    font-weight: 700;
    transition: filter .15s, background .15s;
  }
  .region-toggle:hover { filter: brightness(0.96); background: #C7CAE5; }
  .region-toggle .region-toggle-icon { transition: transform .2s; }
  .region-list {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 6px;
  }
  .region-list[hidden] {
    display: none !important;
  }
  .region-list-more {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dotted #E8E8E8;
  }
  .region-chip {
    border: 1px solid #DDDDDD;
    background: #FFFFFF;
    color: #1F5D99;
    height: 24px;
    padding: 0 8px;
    font-size: 12px;
    cursor: pointer;
    border-radius: 2px;
    font-family: inherit;
    line-height: 1;
    white-space: nowrap;
    transition: background .15s, border-color .15s, color .15s;
  }
  .region-chip:hover {
    border-color: #1F5D99;
    background: #F7F9FF;
  }
  .region-chip.is-selected {
    background: #1F5D99;
    border-color: #1F5D99;
    color: #FFFFFF;
    font-weight: 700;
  }


  /* ---------- marquee notice strip ---------- */
  .notice-marquee {
    width: 1000px;
    margin: 0 auto;
    background: #FFF3D8;
    border: 1px solid #E8C98A;
    border-top: none;
    color: #5b4a18;
    font-size: 12px;
    line-height: 1.6;
    display: flex;
    align-items: stretch;
    overflow: hidden;
    height: 32px;
    box-sizing: border-box;
  }
  .notice-marquee .nm-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #E8C98A;
    color: #5b4a18;
    padding: 0 12px;
    font-weight: 700;
    flex-shrink: 0;
    white-space: nowrap;
    border-right: 1px solid #d4b97a;
  }
  .notice-marquee .nm-label svg { color: #8a6d1c; }
  .notice-marquee .nm-track {
    flex: 1;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
  }
  .notice-marquee .nm-content {
    display: inline-block;
    white-space: nowrap;
    padding-left: 100%;
    animation: nm-scroll 38s linear infinite;
    will-change: transform;
  }
  .notice-marquee .nm-content b { color: #8a4a00; font-weight: 700; }
  .notice-marquee .nm-content a { color: #0f4c87; font-weight: 700; text-decoration: none; }
  .notice-marquee .nm-content a:hover { text-decoration: underline; }
  .notice-marquee .nm-content .nm-sep { color: #aa9760; margin: 0 16px; }
  .notice-marquee:hover .nm-content { animation-play-state: paused; }
  @keyframes nm-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
  }
  @media (prefers-reduced-motion: reduce) {
    .notice-marquee .nm-content {
      animation: none;
      padding-left: 12px;
      white-space: normal;
    }
    .notice-marquee { height: auto; }
  }

  .nav-tabs {
    width: 1000px; margin: 0 auto;
    background: #D9DCF4; display: flex;
    border: 1px solid #C7CAE5;
  }
  .nav-tabs a {
    flex: 1; text-align: center; color: #333333; font-size: 15px; font-weight: 700;
    padding: 11px 0; border-right: 1px solid #C7CAE5; letter-spacing: 1px;
  }
  .nav-tabs a:last-child { border-right: none; }
  .nav-tabs a.active, .nav-tabs a:hover { background: #fff; color: #1F4E79; font-weight: 700; text-decoration: none; }
  .nav-tabs a.active::before { content: "●"; margin-right: 4px; color: #F28C28; font-size: 9px; vertical-align: 2px; }

  /* ---------- breadcrumb ---------- */
  .crumbs {
    width: 1000px; margin: 8px auto 0;
    background: #fff; border: 1px solid #DDDDDD;
    padding: 8px 14px;
    font-size: 12px; color: #666;
    display: flex; justify-content: space-between; align-items: center;
  }
  .crumbs .path a { color: #0b74c9; }
  .crumbs .path .sep { color: #ccc; margin: 0 6px; }
  .crumbs .path b { color: #1F4E79; }
  .crumbs .meta { color: #888; }
  .crumbs .meta b { color: #1F4E79; font-family: Tahoma, Arial; }

  /* ---------- top 3 banners 325×183 ---------- */
  .cat-top-ads {
    width: 1000px; margin: 8px auto 0;
    display: grid; grid-template-columns: repeat(3, 325px); gap: 12px;
  }
  .cat-top-ads .ad { height: 183px; padding: 18px; }
  .cat-top-ads .ad-content { text-align: center; }
  .cat-top-ads .kicker { font-size: 11px; color: #888; letter-spacing: 4px; }
  .cat-top-ads h3 { font-size: 22px; margin: 10px 0 6px; color: #333; font-weight: 800; letter-spacing: 1px; }
  .cat-top-ads p { color: #777; font-size: 13px; margin: 0; line-height: 1.7; }
  .cat-top-ads .cta {
    display: inline-block; margin-top: 14px; padding: 6px 18px;
    background: #1F4E79; color: #fff; font-size: 12px;
  }
  .cat-top-ads .ad.t1 { background: linear-gradient(135deg, #fff5e8, #ffe2b8); }
  .cat-top-ads .ad.t2 { background: linear-gradient(135deg, #e8f1ff, #cfe2ff); }
  .cat-top-ads .ad.t3 { background: linear-gradient(135deg, #FBE4E5, #f8c7c7); }

  /* ---------- category title ---------- */
  .cat-title-bar {
    width: 1000px; margin: 8px auto 0;
    background: #fff; border: 1px solid #DDDDDD;
    border-top: 3px solid #1F4E79;
    padding: 12px 16px;
    display: flex; align-items: center; gap: 16px;
  }
  .cat-title-bar h1 {
    font-family: "STHeiti", "Heiti SC", "Microsoft YaHei", sans-serif;
    font-size: 22px; font-weight: 900; color: #1F4E79;
    margin: 0; letter-spacing: 2px;
    border-right: 1px solid #ddd;
    padding-right: 16px;
  }
  .cat-title-bar h1 small {
    font-size: 12px; color: #999; font-weight: 400; letter-spacing: 1px;
    margin-left: 8px;
  }
  .sub-tabs { display: flex; flex-wrap: wrap; gap: 0; }
  .sub-tabs a {
    padding: 5px 14px; font-size: 13px; color: #555;
    border-right: 1px solid #eee;
  }
  .sub-tabs a:first-child { padding-left: 0; }
  .sub-tabs a:last-child { border-right: none; }
  .sub-tabs a.active { color: #1F4E79; font-weight: 700; }
  .sub-tabs a:hover { color: #1F4E79; text-decoration: none; }
  .sub-tabs a.urgent::before {
    content: "急"; display: inline-block; background: #1F4E79; color: #fff;
    font-size: 10px; padding: 0 3px; margin-right: 4px; border-radius: 1px;
    font-weight: 700; vertical-align: 1px;
  }

  /* ---------- region filter ---------- */
  .region-filter {
    width: 1000px; margin: 8px auto 0;
    background: #fff; border: 1px solid #DDDDDD;
    padding: 10px 14px;
    font-size: 12px;
  }
  .region-row {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 4px 0;
  }
  .region-row + .region-row { border-top: 1px dashed #eee; }
  .region-row .label {
    flex: 0 0 auto; color: #999; padding-top: 4px;
    width: 56px; text-align: right;
  }
  .region-row .options {
    flex: 1; display: flex; flex-wrap: wrap; gap: 4px 0;
  }
  .region-row .options a {
    padding: 3px 10px; color: #555; font-size: 12px;
    border-right: 1px solid #eee;
    line-height: 1.4;
  }
  .region-row .options a:hover { color: #1F4E79; text-decoration: none; }
  .region-row .options a.active {
    background: #1F4E79; color: #fff; padding: 3px 12px;
    border-radius: 2px; border-right: none; font-weight: 700;
  }
  .region-row .options a.active:hover { color: #fff; }
  .region-row .toggle {
    flex: 0 0 auto; color: #0b74c9; padding: 3px 8px;
    cursor: pointer; font-size: 12px;
    border: 1px solid #d8e6f4; background: #f3f8fd;
    margin-left: auto; align-self: flex-start;
  }
  .region-row .toggle::after { content: " ▾"; }

  /* ---------- main area ---------- */
  .cat-main {
    width: 1000px; margin: 8px auto 0;
    display: grid; grid-template-columns: 770px 218px;
    gap: 12px; align-items: flex-start;
  }
  .cat-main .col-list { width: 770px; }
  /* scope 到 .cat-main：避免泄漏覆盖首頁 .col-side（180px） */
  .cat-main .col-side { width: 218px; }

  /* listing toolbar */
  .list-tools {
    background: #f5f5f5; border: 1px solid #DDDDDD;
    padding: 7px 12px; font-size: 12px;
    display: flex; align-items: center; justify-content: space-between;
  }
  .list-tools .left a {
    padding: 0 8px; color: #555; border-right: 1px solid #ddd;
  }
  .list-tools .left a:last-child { border-right: none; }
  .list-tools .left a.active { color: #1F4E79; font-weight: 700; }
  .list-tools .left a.active::before {
    content: "▾"; display: inline-block; margin-right: 3px;
  }
  .list-tools .right { color: #888; }
  .list-tools .right b { color: #1F4E79; font-family: Tahoma, Arial; }

  /* the actual list */
  .ad-row {
    height: 60px; margin: 6px 0;
  }
  .row {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 12px;
    background: #fff; border: 1px solid #DDDDDD; border-top: none;
    font-size: 13px; line-height: 1.5;
  }
  .col-list .row:first-of-type { border-top: 1px solid #DDDDDD; }
  .row:hover { background: #fffbf6; }
  .row .tag {
    flex: 0 0 auto;
    width: 40px; text-align: center; color: #fff; font-size: 11px;
    padding: 2px 0; line-height: 1.4; border-radius: 1px;
  }
  
  .tag-urgent  { background: #1F4E79; }
  .tag-name    { background: #6741d9; }
  

  .row .title {
    flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
    color: #333;
  }
  .row .title:hover { color: #1F4E79; cursor: pointer; }
  .row .title.bold { font-weight: 700; }
  .row .pic-flag {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: 3px;
    color: #2f9e44; font-size: 11px;
    border: 1px solid #c8e6c9; background: #f0faf2;
    padding: 1px 5px; border-radius: 1px;
  }
  .row .pic-flag svg { width: 11px; height: 11px; display: block; }
  .row .rec-flag {
    flex: 0 0 auto;
    display: inline-block;
    background: #fff4d6; color: #b67e0e;
    border: 1px solid #F28C28;
    font-size: 10px; padding: 1px 5px; border-radius: 1px;
    font-weight: 700;
  }
  .row .top-flag {
    flex: 0 0 auto;
    background: #F28C28; color: #8a4a00; font-weight: 700;
    border: 1px solid #e0b54a;
    font-size: 10px; padding: 1px 5px; border-radius: 1px;
  }
  .row .stats {
    flex: 0 0 auto;
    color: #888; font-size: 11px; font-family: Tahoma, Arial;
    width: 96px; text-align: right;
  }
  .row .stats .views::before { content: ""; font-size: 10px; opacity: .6; }
  .row .stats .replies { color: #0b74c9; }
  .row .price {
    flex: 0 0 auto;
    color: #1F4E79; font-weight: 700; font-family: Tahoma, Arial;
    width: 76px; text-align: right;
    font-size: 13px;
  }
  .row .price.neg { color: #888; font-weight: 400; font-family: inherit; font-size: 12px; }
  .row .date {
    flex: 0 0 auto;
    width: 96px; text-align: right;
    font-family: Tahoma, Arial; font-size: 11px;
    white-space: nowrap;
    display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px;
  }
  .row .date.today { color: #1F4E79; font-weight: 700; }
  .row .date.today::after {
    content: "NEW";
    display: inline-block;
    background: #1F4E79; color: #fff;
    font-size: 9px; font-weight: 700; padding: 1px 3px;
    border-radius: 1px; letter-spacing: .5px;
  }
  .row .date.yest { color: #0b74c9; }
  .row .date.d2   { color: #1098ad; }
  .row .date.old  { color: #999; }

  /* in-list ad */
  .in-list-ad {
    height: 60px; margin: 6px 0;
    border: 1px dashed #d3d3d3;
    background: linear-gradient(to right, #fafafa, #f1f1f1);
    display: flex; align-items: center; justify-content: center;
    color: #aaa; font-size: 12px; letter-spacing: 2px;
  }
  .in-list-ad b { color: #1F4E79; margin: 0 4px; font-weight: 700; }

  /* pager */
  .pager {
    background: #fff; border: 1px solid #DDDDDD; border-top: none;
    padding: 14px 12px; text-align: center; font-size: 12px;
  }
  .pager a, .pager span {
    display: inline-block;
    min-width: 28px; height: 28px; line-height: 26px;
    padding: 0 9px;
    border: 1px solid #d8d8d8;
    background: #fff;
    color: #555;
    margin: 0 2px;
    font-family: Tahoma, Arial;
  }
  .pager a:hover { color: #1F4E79; border-color: #1F4E79; text-decoration: none; }
  .pager .cur {
    background: #1F4E79; color: #fff; border-color: #1F4E79; font-weight: 700;
  }
  .pager .ellipsis { border: none; background: transparent; color: #888; }
  .pager .nav { padding: 0 12px; }
  .pager .jump {
    margin-left: 12px; color: #888;
  }
  .pager .jump input {
    width: 40px; height: 26px; border: 1px solid #d8d8d8; text-align: center;
    font-family: Tahoma, Arial; font-size: 12px;
    margin: 0 4px; vertical-align: middle;
  }
  .pager .jump button {
    height: 28px; padding: 0 10px; border: 1px solid #d8d8d8;
    background: #f5f5f5; cursor: pointer; vertical-align: middle;
  }

  /* ---------- right sidebar ---------- */
  .col-side .side-box { margin-bottom: 8px; }
  .col-side .side-title {
    background: #f5f5f5; border: 1px solid #DDDDDD; border-bottom: none;
    padding: 6px 10px; font-size: 12px; color: #555; font-weight: 700;
  }
  .col-side .side-title::before {
    content: ""; display: inline-block;
    width: 3px; height: 12px; background: #1F4E79;
    margin-right: 6px; vertical-align: -1px;
  }
  .col-side .side-title small { color: #999; font-weight: 400; margin-left: 6px; }

  .side-ad-grid {
    display: grid; grid-template-columns: 1fr; gap: 6px;
  }
  .side-ad-grid .ad { width: 218px; height: 120px; padding: 14px; }
  .side-ad-grid .ad-content { text-align: center; }
  .side-ad-grid .ad-content .kicker { font-size: 10px; color: #888; letter-spacing: 3px; }
  .side-ad-grid .ad-content h4 { font-size: 17px; color: #333; margin: 6px 0 4px; font-weight: 800; letter-spacing: 1px; }
  .side-ad-grid .ad-content p { color: #666; font-size: 11px; margin: 0; line-height: 1.5; }
  .side-ad-grid .ad-content .cta {
    display: inline-block; margin-top: 6px; padding: 2px 10px;
    border: 1px solid #1F4E79; color: #1F4E79; font-size: 11px;
  }
  .side-ad-grid .ad.s1 { background: linear-gradient(140deg, #fff5e8, #ffe2b8); }
  .side-ad-grid .ad.s2 { background: linear-gradient(140deg, #e8f1ff, #cfe2ff); }
  .side-ad-grid .ad.s3 { background: linear-gradient(140deg, #FBE4E5, #f8c7c7); }
  .side-ad-grid .ad.s4 { background: linear-gradient(140deg, #e7f8ec, #b9e7c5); }

  .side-tall-ad {
    width: 218px; height: 560px;
    border: 1px solid #d3d3d3;
    background: linear-gradient(180deg, #FFF3D8 0%, #ffe5b8 50%, #fff5e8 100%);
    padding: 24px 18px;
    text-align: center;
    position: relative;
    overflow: hidden;
  }
  .side-tall-ad::before, .side-tall-ad::after {
    content: ""; position: absolute;
    width: 200px; height: 200px;
    background: radial-gradient(circle, rgba(204,13,13,0.06), transparent 70%);
    border-radius: 50%;
  }
  .side-tall-ad::before { top: -80px; left: -80px; }
  .side-tall-ad::after { bottom: -80px; right: -80px; }
  .side-tall-ad > * { position: relative; }
  .side-tall-ad .badge {
    display: inline-block;
    background: #1F4E79; color: #fff; font-size: 11px;
    padding: 3px 10px; letter-spacing: 3px;
  }
  .side-tall-ad h3 {
    font-size: 24px; color: #1F4E79; font-weight: 900;
    margin: 16px 0 8px; letter-spacing: 2px;
    font-family: "STHeiti", "Heiti SC", "Microsoft YaHei", sans-serif;
  }
  .side-tall-ad .subline { color: #333333; font-size: 13px; margin-bottom: 18px; }
  .side-tall-ad ul.benefits {
    text-align: left; margin: 0 0 18px; padding: 14px;
    background: rgba(255,255,255,0.6);
    border: 1px dashed #e0b54a;
  }
  .side-tall-ad ul.benefits li {
    color: #5a3f00; font-size: 12px; padding: 4px 0;
    border-bottom: 1px dotted rgba(180,120,40,0.25);
  }
  .side-tall-ad ul.benefits li:last-child { border-bottom: none; }
  .side-tall-ad ul.benefits li::before {
    content: "✓"; color: #1F4E79; font-weight: 700; margin-right: 6px;
  }
  .side-tall-ad .price-box {
    background: #fff; border: 2px solid #1F4E79;
    padding: 12px 8px; margin: 0 0 16px;
  }
  .side-tall-ad .price-box .was {
    color: #999; font-size: 12px; text-decoration: line-through;
  }
  .side-tall-ad .price-box .now {
    color: #1F4E79; font-size: 30px; font-weight: 900;
    font-family: Tahoma, Arial; line-height: 1.1;
  }
  .side-tall-ad .price-box .now small { font-size: 14px; }
  .side-tall-ad .price-box .unit { color: #666; font-size: 11px; }
  .side-tall-ad .cta-big {
    display: block;
    background: #1F5D99;
    color: #fff; padding: 10px;
    font-size: 15px; font-weight: 700;
    letter-spacing: 4px;
    border: 1px solid #163d61;
  }
  .side-tall-ad .footer-note {
    margin-top: 14px; color: #333333; font-size: 11px;
    letter-spacing: 1px;
  }

  /* ---------- footer (shared) ---------- */
  .site-foot {
    width: 1200px; margin: 16px auto 0;
    background: #2a2a2a; color: #bbb; padding: 24px 0 18px; font-size: 12px;
  }
  .site-foot .foot-inner { width: 1000px; margin: 0 auto; }
  .foot-links {
    display: flex; gap: 24px; padding-bottom: 14px;
    border-bottom: 1px solid #444; flex-wrap: wrap;
  }
  .foot-links a { color: #ddd; }
  .foot-links a:hover { color: #fff; text-decoration: underline; }
  .foot-brand { display: flex; gap: 30px; padding: 16px 0 6px; align-items: flex-start; }
  .foot-logo {
    font-family: "STHeiti", "Heiti SC", "SimHei", "Microsoft YaHei", sans-serif;
    font-size: 28px; font-weight: 900; color: #1F4E79; letter-spacing: -1px; line-height: 1;
  }
  .foot-text { color: #aaa; line-height: 1.8; }
  .foot-text b { color: #ddd; font-weight: 600; }
  .foot-cert { margin-left: auto; display: flex; gap: 10px; align-items: center; }
  .foot-cert .badge {
    width: 56px; height: 56px; border: 1px solid #555; background: #1f1f1f;
    color: #777; font-size: 10px; display: flex; align-items: center; justify-content: center;
    text-align: center; padding: 4px; line-height: 1.2;
  }
  .copy {
    text-align: center; padding-top: 14px; border-top: 1px solid #444;
    color: #888; margin-top: 6px; line-height: 1.8;
  }
  .copy b { color: #bbb; font-weight: 400; }



/* ===== separator ===== */


/* ---------- header info card ---------- */
  .site-header {
    background: #fff;
    width: 1000px;
    margin: 0 auto;
    border: 1px solid #DDDDDD;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
  }
  .header-top {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: stretch;
    gap: 0;
    padding: 0;
  }

  /* === LEFT: brand block === */
  .brand-block {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #FFFFFF;
    padding: 14px 22px 14px 18px;
    border-right: 1px solid #E6E6E6;
  }

  /* --- header brand logo (blue wave) — 放大 + 可点击返回首页 --- */
  .site-logo {
    width: 64px;
    height: 64px;
    object-fit: contain;
    display: block;
  }

  /* --- icon: seal mark — 可点击 link 包裹 --- */
  .brand-icon {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    position: relative;
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
    transition: opacity .15s;
  }
  a.brand-icon:hover { opacity: 0.85; text-decoration: none; }
  .brand-icon svg {
    width: 100%;
    height: 100%;
    display: block;
  }

  /* --- divider --- */
  .brand-divider {
    width: 1px;
    height: 38px;
    background: linear-gradient(180deg, transparent 0%, #D6D0C4 15%, #D6D0C4 85%, transparent 100%);
    flex-shrink: 0;
  }

  /* --- text group --- */
  .brand-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }
  .brand-name-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
  }
  .brand-name-zh {
    font-family: "STHeiti", "Heiti SC", "SimHei", "Microsoft YaHei", sans-serif;
    font-size: 22px;
    font-weight: 900;
    color: #2C2C2C;
    letter-spacing: 1px;
    line-height: 1.15;
  }
  .brand-name-en {
    font-family: "Georgia", "Times New Roman", serif;
    font-size: 12px;
    font-weight: 400;
    color: #7A8599;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    line-height: 1;
    padding-bottom: 1px;
  }
  .brand-tags {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 2px;
  }
  .brand-tag {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 3px;
    letter-spacing: .5px;
    line-height: 1.5;
    white-space: nowrap;
  }
  .brand-tag-classic {
    background: #EEF2F7;
    color: #1E3A5F;
    border: 1px solid #D0DAE6;
  }
  .brand-tag-verified {
    background: #1F4E79;
    color: #fff;
    border: 1px solid transparent;
  }
  .brand-tag-verified .tag-check {
    font-size: 9px;
  }
  .brand-subtitle {
    font-size: 11px;
    color: #9CA3AF;
    letter-spacing: .2px;
    line-height: 1.3;
    margin-top: 1px;
  }
  .brand-subtitle a {
    color: #1F4E79;
    font-weight: 600;
    text-decoration: none;
  }
  .brand-subtitle a:hover { text-decoration: underline; }
  .brand-subtitle .sep {
    margin: 0 3px;
    color: #CBD2DC;
  }



  /* === CENTER: announcement === */
  .header-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 12px 20px;
    border-right: 1px solid #E6E6E6;
    min-width: 0;
  }
  .hc-title {
    font-size: 13px;
    font-weight: 700;
    color: #1F4E79;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 5px;
  }
  .hc-title::before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 13px;
    background: #1F4E79;
    border-radius: 2px;
    flex-shrink: 0;
  }
  .hc-body {
    font-size: 12px;
    color: #555;
    line-height: 1.7;
  }
  .hc-body b { color: #1F4E79; }
  .hc-phone {
    font-size: 12px;
    color: #1E3A5F;
    font-weight: 700;
    margin-top: 4px;
  }
  .hc-phone a {
    color: #1E3A5F;
    text-decoration: none;
  }
  .hc-phone a:hover { text-decoration: underline; }


  /* === RIGHT: clock & links === */
  .header-meta {
    text-align: right;
    font-size: 12px;
    color: #666;
    padding: 10px 16px;
    border-left: 1px solid #EDEDED;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 6px;
  }
  .clock {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #8C95A6;
    font-size: 11px;
    white-space: nowrap;
  }
  .clock .icon-clock {
    width: 12px; height: 12px;
    border: 1.5px solid #B0A89A; border-radius: 50%;
    position: relative;
    flex-shrink: 0;
  }
  .clock .icon-clock::before, .clock .icon-clock::after {
    content: ""; position: absolute; background: #B0A89A; left: 50%; top: 50%;
  }
  .clock .icon-clock::before { width: 1.5px; height: 4px; transform: translate(-50%,-100%); }
  .clock .icon-clock::after  { width: 3px;   height: 1.5px; transform: translate(-50%,-50%); }
  .clock-label { color: #B0A89A; }
  .clock-time {
    font-family: Tahoma, Arial, sans-serif;
    font-weight: 700;
    color: #1F4E79;
    font-size: 13px;
    letter-spacing: .3px;
  }
  .clock-day { color: #8C95A6; font-size: 11px; }
  .quick-links { font-size: 12px; }
  .quick-links a {
    color: #0b74c9;
    padding: 0 6px;
    white-space: nowrap;
    text-decoration: none;
    font-size: 11px;
  }
  .quick-links a + a { border-left: 1px solid #ddd; }
  .quick-links a:hover { color: #1F4E79; text-decoration: underline; }


/* ===== separator ===== */


/* ===== footer v4 — light classic portal ===== */
.site-foot.site-foot-v2 {
  background: #F5F5F5;
  color: #263246;
  padding: 0;
  border-top: 3px solid #1F4E79;
  margin-top: 32px;
  font-size: 12px;
  width: 100%;
}
.site-foot-v2 .foot-inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 36px 24px 0;
}
/* grid */
.site-foot-v2 .foot-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
  gap: 36px;
  padding-bottom: 28px;
  border-bottom: 1px solid #D8DEE8;
}
/* column titles */
.site-foot-v2 .foot-h {
  color: #1F4E79;
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 16px;
  letter-spacing: 1px;
  position: relative;
  padding-bottom: 10px;
}
.site-foot-v2 .foot-h::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 26px;
  height: 2px;
  background: #F28C28;
}
/* link lists */
.site-foot-v2 .foot-list { list-style: none; margin: 0; padding: 0; }
.site-foot-v2 .foot-list-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.site-foot-v2 .foot-list li { line-height: 2.2; }
.site-foot-v2 .foot-list a {
  color: #4A5568;
  text-decoration: none;
  font-size: 12px;
  transition: color .2s;
  display: inline-block;
}
.site-foot-v2 .foot-list a:hover {
  color: #1F4E79;
  text-decoration: none;
}
/* brand */
.site-foot-v2 .foot-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.site-foot-v2 .foot-logo {
  width: 80px;
  height: 80px;
  background: transparent;
  border-radius: 5px;
  flex-shrink: 0;
  display: block;
  object-fit: contain;
}
.site-foot-v2 .foot-brand-name {
  color: #263246;
  font-weight: 800;
  font-size: 16px;
  line-height: 1.2;
}
.site-foot-v2 .foot-brand-domain {
  color: #1F4E79;
  font-size: 11px;
  letter-spacing: 1px;
  margin-top: 3px;
  font-family: Tahoma, Arial, sans-serif;
}
.site-foot-v2 .foot-intro {
  margin: 12px 0 16px;
  line-height: 1.8;
  color: #667085;
  font-size: 12px;
}
/* social */
.site-foot-v2 .foot-social { display: flex; gap: 8px; }
.site-foot-v2 .foot-social a {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid #D8DEE8;
  border-radius: 50%;
  text-decoration: none;
  font-size: 12px;
  color: #667085;
  font-weight: 700;
  transition: all .2s;
  font-family: Arial, sans-serif;
}
.site-foot-v2 .foot-social a:hover {
  background: #1F4E79; border-color: #1F4E79;
  color: #fff;
}
/* contact */
.site-foot-v2 .foot-contact {
  margin-top: 16px;
  color: #667085;
  line-height: 2.2;
  font-size: 12px;
}
.site-foot-v2 .foot-contact a {
  color: #4A5568;
  text-decoration: none;
}
.site-foot-v2 .foot-contact a:hover { color: #1F4E79; }
/* app download */
.site-foot-v2 .foot-app {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.site-foot-v2 .foot-qr {
  width: 78px;
  height: 78px;
  background: #fff;
  border: 1px solid #D8DEE8;
  color: #263246;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 2px;
  line-height: 1.4;
  text-align: center;
  flex-shrink: 0;
}
.site-foot-v2 .foot-app-text {
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1;
  min-width: 0;
}
.site-foot-v2 .foot-app-text small {
  color: #667085;
  font-size: 11px;
  margin-bottom: 2px;
}
.site-foot-v2 .foot-store {
  display: block;
  background: #fff;
  color: #263246;
  padding: 7px 12px;
  border-radius: 4px;
  text-decoration: none;
  font-size: 11px;
  text-align: center;
  border: 1px solid #1F4E79;
  font-weight: 600;
  letter-spacing: .5px;
  transition: all .2s;
}
.site-foot-v2 .foot-store:hover {
  background: #1F4E79;
  color: #fff;
  text-decoration: none;
}
.site-foot-v2 .foot-store b { margin-right: 3px; }
/* bottom bar */
.site-foot-v2 .foot-bottom {
  background: #EDEDED;
  margin: 0 -24px;
  padding: 16px 24px 20px;
  color: #667085;
  text-align: center;
  line-height: 2;
  font-size: 11px;
}
.site-foot-v2 .foot-bottom b {
  color: #1F4E79;
  font-weight: 600;
}
.site-foot-v2 .foot-bottom .foot-meta {
  color: #8C95A6;
  margin-top: 2px;
  letter-spacing: .5px;
}
.site-foot-v2 .foot-bottom .foot-meta span {
  margin: 0 5px;
  color: #C5C9D2;
}

/* ===== Mobile Bottom Bar (hidden on desktop) ===== */
.mobile-bottom-bar {
  display: none;
}

/* mobile hamburger */
.mobile-nav-toggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;background:transparent;border:0;color:#fff;font-size:22px;cursor:pointer;position:absolute;right:8px;top:50%;transform:translateY(-50%);z-index:100}

/* ===== Responsive ===== */
@media (max-width: 1024px){
  body{overflow-x:hidden}
  .page,.layout,.foot-inner,.head-inner,.nav-inner,.bar-inner,.top,.head,.layout-inner,.friendly{max-width:100%!important;width:auto!important}
}

@media (max-width: 768px){
  html,body{overflow-x:hidden}
  body{font-size:14px}

  /* --- core layout fluid --- */
  .page{width:100%!important;max-width:100%!important;padding:0!important}
  .wrap{width:100%!important;max-width:100%!important}
  .top-ads{width:100%!important;grid-template-columns:1fr!important;gap:6px;padding:6px}

  .nav-tabs{width:100%!important;flex-wrap:wrap!important}
  .nav-tabs a{flex:none!important;padding:10px 12px!important;font-size:13px!important;white-space:nowrap}
  .notice{width:100%!important;font-size:11px}
  .search-bar{width:100%!important;flex-direction:column!important;gap:8px;align-items:stretch!important;padding:12px!important}
  .search-bar .label{text-align:center}
  .search-bar input[type="text"]{width:100%!important;height:40px;font-size:14px}
  .search-bar select{width:100%!important;height:40px;font-size:14px}
  .search-bar button{width:100%!important;height:44px;font-size:15px}
  .search-bar-row2{width:100%!important;padding:8px 12px!important}
  .user-action-bar{width:100%!important;display:block!important;padding:8px 10px!important;border-left:none!important;border-right:none!important}
  .user-action-bar .user-status{margin-bottom:8px;line-height:1.6}
  .user-action-bar .site-stats{display:block!important;margin-left:0!important;margin-top:2px;color:#999}
  .user-action-bar .user-actions{display:grid!important;grid-template-columns:1fr 1fr 1fr;gap:6px}
  .user-action-bar .user-actions .ua-btn{min-width:0!important;padding:0 4px!important;font-size:12px!important}
  .ua-btn{width:100%!important;height:36px!important;font-size:13px!important;min-width:0!important}
  .mid-ads-2{width:100%!important;grid-template-columns:1fr!important;padding:0 6px}
  .mid-ads-3{width:100%!important;grid-template-columns:1fr!important;gap:8px;padding:0 6px}
  .main-area{width:100%!important;grid-template-columns:1fr!important;padding:0 6px!important;gap:8px!important}
  .col-main{width:100%!important}
  .col-side{width:100%!important}
  .main-banner{width:100%!important;grid-template-columns:1fr!important}
  .bottom-ads{width:100%!important;grid-template-columns:1fr!important;padding:0 6px}
  .bottom-banner{width:100%!important;margin-left:0;margin-right:0}
  .bot-modules{width:100%!important;grid-template-columns:1fr!important;padding:0 6px}
  .friendly{width:100%!important}

  /* --- header mobile --- */
  .notice-marquee{width:100%!important;border-left:none!important;border-right:none!important;font-size:11px}
  .notice-marquee .nm-label{padding:0 8px;font-size:11px}
    .site-header{padding:0!important;border:none!important;margin-bottom:0!important}
  .header-top{display:flex!important;flex-direction:column!important;gap:0!important}
  .brand-block{width:100%!important;box-sizing:border-box;padding:12px 14px!important;gap:10px!important;border-right:none!important;border-bottom:1px solid #EDEDED!important;border-radius:0!important}
  .site-logo{width:32px!important;height:32px!important}
    .brand-icon{width:32px!important;height:32px!important}
  .brand-divider{height:34px!important}
  .brand-name-zh{font-size:20px!important}
  .brand-name-en{font-size:10px!important}
  .brand-tag{font-size:9px!important;padding:1px 5px!important}
  .brand-subtitle{font-size:10px!important}
  .header-center{display:flex!important;flex-direction:column!important;padding:10px 14px!important;border-right:none!important;border-bottom:1px solid #EDEDED!important}
  .hc-title{font-size:13px!important;margin-bottom:4px!important}
  .hc-body{font-size:12px!important;line-height:1.6!important}
  .hc-phone{font-size:12px!important}
  .header-meta{flex-direction:row!important;flex-wrap:wrap!important;align-items:center!important;justify-content:space-between!important;border-left:none!important;padding:8px 14px!important;background:transparent!important;min-width:auto!important}
  .clock{gap:4px!important}
  .clock-time{font-size:13px!important}
  .quick-links a{font-size:10px!important;padding:0 4px!important}
  .header-meta{width:100%;text-align:left!important}
  .quick-links{font-size:12px}

  /* --- nav scroll --- */
  .nav-tabs{overflow-x:auto!important;-webkit-overflow-scrolling:touch;flex-wrap:nowrap!important}

  /* --- listing / module cards mobile --- */
  .module {
    border-left: none!important;
    border-right: none!important;
    margin-bottom: 10px!important;
  }
  .module-head {
    padding: 0 12px!important;
    height: 36px!important;
  }
  .module-head .title {
    font-size: 14px!important;
  }
  .module-head .title em {
    display: none;
  }
  .module-head .more {
    font-size: 12px;
  }
  .listing {
    padding: 6px 12px 2px!important;
  }
  .listing li {
    display: grid!important;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 4px 8px;
    align-items: start;
    padding: 9px 0!important;
    font-size: 14px!important;
    line-height: 1.55!important;
    border-bottom: 1px solid #f0f0f0!important;
  }
  .listing li:last-child {
    border-bottom: none!important;
  }
  .listing li .tag {
    grid-row: 1;
    grid-column: 1;
    width: auto!important;
    padding: 1px 6px!important;
    font-size: 11px!important;
    margin-top: 2px;
  }

  /* unified tag style: white bg + red border + red text */
  .tag-hire,
  .tag-seek,
  .tag-sell,
  .tag-rent,
  .tag-buy,
  .tag-trans,
  .tag-svc,
  .tag-info    { background: #fff; border: 1px solid #1F4E79; color: #1F4E79; }
  .listing li .title {
    grid-row: 1;
    grid-column: 2;
    white-space: normal!important;
    overflow: visible!important;
    text-overflow: unset!important;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
    font-size: 14px!important;
    line-height: 1.5!important;
    color: #333;
  }
  .listing li .city,
  .listing li .date {
    grid-row: 2;
    font-size: 11px!important;
    color: #999;
    white-space: nowrap;
  }
  .listing li .city {
    grid-column: 2;
    justify-self: start;
  }
  .listing li .date {
    grid-column: 2;
    justify-self: end;
    grid-row: 2;
  }
  /* put city+date on same row */
  .listing li {
    grid-template-columns: auto 1fr auto;
  }
  .listing li .city {
    grid-column: 2;
    grid-row: 2;
  }
  .listing li .date {
    grid-column: 3;
    grid-row: 2;
  }
  .listing li .tag {
    grid-row: 1 / 3;
    align-self: start;
  }
  .listing li .title {
    grid-column: 2 / 4;
    grid-row: 1;
  }

  /* side ads */
  .side-ads{flex-direction:row!important;flex-wrap:wrap;gap:8px}
  .side-ads .ad{width:calc(50% - 4px)!important;height:auto!important;min-height:160px}

  /* hide desktop-only */
  .desktop-only,.hide-mobile{display:none!important}
  .mobile-nav-toggle{display:flex!important}

  /* footer */
  .site-foot{margin-top:12px!important}
  .site-foot-v2 .foot-inner{padding:28px 16px 0}
  .site-foot-v2 .foot-grid{grid-template-columns:1fr 1fr!important;gap:28px}
  .site-foot-v2 .foot-col-brand{grid-column:1 / -1}
  .site-foot-v2 .foot-bottom{margin:0 -16px}

  /* typography */
  h1{font-size:22px!important}
  h2{font-size:18px!important}
  h3{font-size:16px!important}

  /* --- MOBILE BOTTOM BAR --- */
  .mobile-bottom-bar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: #fff;
    border-top: 1px solid #e5e5e5;
    box-shadow: 0 -1px 3px rgba(0,0,0,.06);
    padding: 8px 12px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    gap: 8px;
    align-items: stretch;
  }
  .mobile-bottom-bar .mb-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 6px;
    border-radius: 4px;
    border: none;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    transition: transform .1s, box-shadow .15s, filter .15s;
    -webkit-tap-highlight-color: transparent;
    text-align: center;
    line-height: 1.3;
  }
  .mobile-bottom-bar .mb-btn:hover {
    text-decoration: none;
    color: #fff;
  }
  .mobile-bottom-bar .mb-btn:active {
    transform: scale(0.96);
    filter: brightness(0.92);
  }
  .mobile-bottom-bar .mb-btn .mb-icon {
    font-size: 18px;
    flex-shrink: 0;
  }
  /* button 1: publish - red */
  .mb-btn-publish { background: #F28C28; box-shadow: none; }
  .mb-btn-jobs { background: #1F5D99; box-shadow: none; }
  .mb-btn-housing { background: #2E9D64; box-shadow: none; }
  
  /* button 2: jobs - green */
  
  
  /* button 3: housing - blue */
  
  

  /* body padding so content isn't hidden behind bar */
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important; }
}

@media (max-width: 480px){
  /* footer 1col */
  .site-foot-v2 .foot-grid{grid-template-columns:1fr!important;gap:24px}
  .site-foot-v2 .foot-col-brand{grid-column:auto}

  /* bottom bar smaller text */
  .mobile-bottom-bar .mb-btn{font-size:13px;padding:10px 4px;border-radius:8px}
  .mobile-bottom-bar .mb-btn .mb-icon{font-size:16px}
}


/* ===== separator ===== */


/* ============================================================
   UNIVERSAL MOBILE FIX (max-width: 768px ONLY — desktop untouched)
   ============================================================ */
@media (max-width: 768px) {
  /* === Base & overflow === */
  html, body { max-width: 100vw; overflow-x: hidden; }

  /* === Full-width containers === */
  .page, .wrap,
  .country-links,
  .site-header, .header-top, .brand-block, .header-center, .header-meta,
  .nav-tabs,
  .notice, .notice-marquee, .notice-actions,
  .search-bar, .search-bar-row2, .search-hero, .search-main, .search-result-area, .search-sidebar,
  .user-action-bar, .user-status, .user-actions,
  .mid-ads-2, .mid-ads-3, .main-area, .main-banner, .main-content, .col-main, .col-side,
  .bottom-ads, .bottom-banner, .bot-modules, .friendly,
  .site-foot, .foot-inner, .foot-grid, .foot-bottom,
  .crumbs, .cat-top-ads, .cat-main, .cat-title-bar, .cat-grid, .cat-side,
  .region-filter, .region-quick,
  .yp-hero, .yp-main, .yp-search, .yp-side,
  .post-area, .page-banner, .col-form,
  .detail-area, .detail-main, .detail-side,
  .uc-area, .uc-main, .uc-side, .me-card,
  .auth-area, .auth-wrap, .auth-card, .security-bar,
  .info-content,
  .pirate-hero, .sh-hero, .pcat-bar, .pside, .pgrid {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* === Grid → single column === */
  .main-area, .post-area, .yp-main, .cat-main, .uc-area, .search-main,
  .detail-area, .bot-modules, .mid-ads-2, .mid-ads-3, .bottom-ads {
    grid-template-columns: 1fr !important;
    display: block !important;
  }

  /* === Hero/Banner stack === */
  .yp-hero, .page-banner, .pirate-hero, .sh-hero, .post-hero {
    display: block !important;
    text-align: center;
    padding: 16px !important;
  }
  .yp-hero h1, .page-banner h1 {
    font-size: 20px !important; line-height: 1.3 !important;
    letter-spacing: 0 !important; margin-bottom: 12px;
  }
  .yp-hero h1 .em { font-size: 22px !important; margin: 0 6px 0 0 !important; }
  .yp-hero h1 .en {
    letter-spacing: 2px !important; margin-top: 6px !important;
    font-size: 11px !important; display: inline-block !important;
  }
  .yp-hero .yp-stats {
    justify-content: space-around !important; gap: 8px !important;
    flex-wrap: wrap; margin-top: 8px; display: flex !important;
  }
  .yp-hero .yp-stats .s { flex: 1; min-width: 70px; }
  .yp-hero .yp-stats .n { font-size: 18px !important; }
  .yp-hero .yp-stats .l { font-size: 10px !important; }
  .page-banner .left {
    flex-direction: column !important; gap: 8px !important;
    align-items: flex-start;
  }
  .page-banner .right {
    display: grid !important; grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 6px !important; margin-top: 8px !important; width: 100%;
  }
  .page-banner .right .sep { display: none; }
  .page-banner .right .item b { font-size: 16px !important; }

  /* Auth-area, sidebars */
  .auth-area { display: block !important; }
  .col-side, .yp-side, .cat-side, .uc-side, .detail-side, .search-sidebar {
    width: 100% !important; margin-top: 12px;
  }

  /* Form rows wrap */
  .yp-search, .search-bar, .form-row, .row-2, .row-3, .row-4, .filter-row,
  .price-options, .phone-row {
    flex-wrap: wrap !important; gap: 8px !important;
  }
  .yp-search input, .yp-search select, .yp-search button {
    flex: 1 1 100% !important; width: 100% !important;
  }

  input[type="text"], input[type="email"], input[type="password"],
  input[type="tel"], input[type="search"], input[type="number"],
  textarea, select {
    max-width: 100% !important; box-sizing: border-box !important;
  }
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  img { max-width: 100%; height: auto; }
  .notice-marquee, .nm-track { overflow: hidden !important; }
  .notice-marquee .nm-track {
    min-width: 0 !important;
    position: relative !important;
  }
  .notice-marquee .nm-content {
    position: absolute !important;
    left: 0;
    top: 0;
    bottom: 0;
    display: flex !important;
    align-items: center;
    width: max-content;
  }
  .col-list, .list-tools, .col-list .row {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .list-tools, .col-list .row {
    flex-wrap: wrap !important;
  }
  .col-list .row .title {
    min-width: 0;
  }
  .col-list .row .stats,
  .col-list .row .price,
  .col-list .row .date {
    width: auto !important;
  }

  /* ============================================================
     COUNTRY LINKS — single row, horizontal scroll, no wrap
     ============================================================ */
  .country-links {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start !important;
    gap: 0 !important;
    padding: 6px 12px !important;
    text-align: left !important;
    scrollbar-width: none;
    white-space: nowrap;
  }
  .country-links::-webkit-scrollbar { display: none; }
  .country-links a {
    flex: 0 0 auto;
    padding: 4px 10px !important;
    font-size: 13px !important;
    color: #1F5D99 !important;
    text-decoration: none;
    border-radius: 3px;
    transition: background .15s;
  }
  .country-links a:hover, .country-links a.active {
    background: #EEF2FB;
    color: #1F4E79 !important;
    font-weight: 700;
  }
  .country-links span {
    flex: 0 0 auto;
    padding: 4px 0 !important;
    color: #ccc !important;
    margin: 0 !important;
    font-size: 11px;
  }

  /* ============================================================
     BRAND BLOCK — logo LEFT of text, group centered
     ============================================================ */
  .brand-block {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: left !important;
    padding: 14px 14px !important;
    gap: 12px !important;
    border-bottom: 1px solid #EDEDED !important;
  }
  .brand-block .brand-icon, .brand-block .site-logo {
    width: 56px !important;
    height: 56px !important;
    flex-shrink: 0 !important;
  }
  .brand-block .brand-divider { display: none !important; }
  .brand-block .brand-text {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    gap: 3px !important;
    min-width: 0;
  }
  .brand-block .brand-name-row {
    display: flex !important;
    align-items: baseline !important;
    gap: 6px !important;
    justify-content: flex-start !important;
  }
  .brand-block .brand-name-zh {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #2C2C2C !important;
    letter-spacing: 1px !important;
    line-height: 1.1 !important;
  }
  .brand-block .brand-name-en {
    font-size: 10px !important;
    color: #7A8599 !important;
    letter-spacing: 1.5px !important;
  }
  .brand-block .brand-tags {
    justify-content: flex-start !important;
    flex-wrap: wrap;
    gap: 4px !important;
  }
  .brand-block .brand-subtitle {
    text-align: left !important;
    font-size: 10px !important;
    line-height: 1.3 !important;
  }
  /* Header center & meta */
  .header-center { text-align: left !important; padding: 10px 14px !important; }
  .header-meta { text-align: center !important; padding: 10px 12px !important; }
  .header-meta .clock { justify-content: center; }
  .header-meta .quick-links { text-align: center; }

  /* ============================================================
     CATEGORY PAGES UI
     ============================================================ */
  .cat-top-ads {
    display: flex !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 10px !important;
    padding: 22px 10px 14px !important;
    grid-template-columns: none !important;
    scrollbar-width: none;
    position: relative;
  }
  .cat-top-ads::before {
    content: "黄金会员推荐";
    position: absolute; top: -4px; left: 12px;
    background: linear-gradient(135deg, #F7C32E, #D69A1A);
    color: #4a2f05; font-size: 10px; font-weight: 700;
    padding: 2px 8px; border-radius: 2px; letter-spacing: 0.5px; z-index: 2;
  }
  .cat-top-ads::-webkit-scrollbar { display: none; }
  .cat-top-ads > * {
    flex: 0 0 88% !important; scroll-snap-align: start;
    height: auto !important; min-height: 110px;
    border-radius: 6px; border: 1px solid #E8C98A;
  }

  .region-filter {
    padding: 10px 12px !important;
    background: #fff !important;
    border-bottom: 1px solid #eee !important;
  }

  .mid-ads-3 {
    display: flex !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 8px !important; padding: 10px 10px !important;
    scrollbar-width: none;
  }
  .mid-ads-3::-webkit-scrollbar { display: none; }
  .mid-ads-3 > * {
    flex: 0 0 calc(50% - 5px) !important; scroll-snap-align: start;
    height: auto !important; min-height: 100px; padding: 10px !important;
    border-radius: 6px;
  }

  .cat-title-bar {
    padding: 12px 14px !important; background: #fff !important;
    border-bottom: 1px solid #eee !important;
  }
  .cat-title-bar h1, .cat-title-bar .title {
    font-size: 18px !important; margin: 0 0 10px !important;
  }
  .cat-title-bar .sub-tabs, .cat-title-bar .tabs {
    display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 6px !important;
  }
  .cat-title-bar .sub-tabs a, .cat-title-bar .tabs a {
    padding: 8px 6px !important; border: 1px solid #DDDDDD;
    background: #FAFAFA; color: #333; border-radius: 4px;
    font-size: 12px; text-align: center; text-decoration: none;
  }
  .cat-title-bar .sub-tabs a.active, .cat-title-bar .tabs a.active {
    background: #1F5D99; color: #fff; border-color: #1F5D99; font-weight: 700;
  }

  /* ============================================================
     FOOTER — accordion (mobile only) — see foot-h::after for chevron
     ============================================================ */
  .site-foot-v2 .foot-grid {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    padding: 16px !important;
  }
  .site-foot-v2 .foot-col-brand {
    text-align: center; padding: 0 0 16px !important;
    border-bottom: 1px solid #ddd; margin-bottom: 8px;
  }
  .site-foot-v2 .foot-brand { justify-content: center; }
  .site-foot-v2 .foot-intro { text-align: center; margin: 8px 0 12px; font-size: 12px; }
  .site-foot-v2 .foot-social { justify-content: center; }
  .site-foot-v2 .foot-col:not(.foot-col-brand) {
    border-bottom: 1px solid #ddd;
  }
  .site-foot-v2 .foot-col:not(.foot-col-brand) .foot-h {
    margin: 0 !important; padding: 14px 32px 14px 0 !important;
    cursor: pointer; position: relative; font-size: 13px !important;
    user-select: none;
  }
  /* Hide ::after gold underline on mobile (replaced by chevron) */
  .site-foot-v2 .foot-col:not(.foot-col-brand) .foot-h::after {
    content: ''; position: absolute; right: 4px; top: 50%;
    width: 9px; height: 9px;
    border-right: 2px solid #999; border-bottom: 2px solid #999;
    transform: translateY(-75%) rotate(45deg);
    background: none !important;
    left: auto !important;
    transition: transform .25s ease;
  }
  .site-foot-v2 .foot-col.is-open .foot-h::after {
    transform: translateY(-25%) rotate(-135deg);
    border-right-color: #1F4E79;
    border-bottom-color: #1F4E79;
  }
  /* ===== Footer mobile: always expanded (accordion removed — no JS) =====
     Was: max-height:0 with .is-open toggle, but no JS trigger existed
     → all link lists / contact / app hidden on mobile. Now always visible. */
  .site-foot-v2 .foot-col:not(.foot-col-brand) .foot-list,
  .site-foot-v2 .foot-col:not(.foot-col-brand) .foot-app,
  .site-foot-v2 .foot-col:not(.foot-col-brand) .foot-contact {
    max-height: none; overflow: visible; padding-bottom: 8px;
  }
  .site-foot-v2 .foot-col:not(.foot-col-brand) .foot-h::after {
    display: none;
  }
  .site-foot-v2 .foot-col:not(.foot-col-brand) .foot-h {
    cursor: default;
    padding: 12px 0 8px !important;
  }
  .site-foot-v2 .foot-list-2 { grid-template-columns: 1fr 1fr !important; }
  .site-foot-v2 .foot-app { gap: 10px; }
  .site-foot-v2 .foot-qr { width: 64px; height: 64px; font-size: 9px; }

  /* Body bottom padding for mobile bottom bar */
  body { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)) !important; }
  .mobile-bottom-bar .mb-btn { height: 42px !important; font-size: 13px !important; }
}

/* ============================================================
   DESKTOP — keep multi-column footer, add decorative chevrons
   ============================================================ */
@media (min-width: 769px) {
  .site-foot-v2 .foot-col:not(.foot-col-brand) .foot-h {
    position: relative;
    padding-right: 22px !important;
  }
  .site-foot-v2 .foot-col:not(.foot-col-brand) .foot-h .foot-h-chev {
    position: absolute;
    right: 0;
    top: 4px;
    width: 7px; height: 7px;
    border-right: 2px solid #B63A3A;
    border-bottom: 2px solid #B63A3A;
    transform: rotate(45deg);
    opacity: .55;
  }
}


/* ===== separator ===== */

/* Region filter chip style (works on both desktop & mobile via this @media query addition) */
  .region-filter .options-chip-style { display: flex !important; flex-wrap: wrap; gap: 5px; }
  .region-filter .options-chip-style a.region-chip-link {
    display: inline-flex; align-items: center;
    padding: 5px 10px;
    border: 1px solid #DDDDDD;
    background: #fff;
    color: #1F5D99;
    border-radius: 4px;
    font-size: 12px;
    text-decoration: none;
    transition: background .15s, color .15s, border-color .15s;
  }
  .region-filter .options-chip-style a.region-chip-link:hover {
    border-color: #1F5D99;
    background: #F7F9FF;
  }
  .region-filter .options-chip-style a.region-chip-link.active {
    background: #1F5D99;
    color: #fff;
    border-color: #1F5D99;
    font-weight: 700;
  }
  .region-filter .toggle {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border: 1px solid #C7CAE5;
    background: #D9DCF4;
    color: #1F4E79;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
  }
  .region-filter .region-row .options a.region-hidden-item {
    display: none !important;
  }

  .region-filter .toggle:hover { filter: brightness(0.96); }

/* ===== separator ===== */


/* ===== cat-title-bar mobile: vertical title + 2-col sub-tabs ===== */
@media (max-width: 768px) {
  .cat-title-bar {
    display: grid !important;
    grid-template-columns: 32px 1fr !important;
    gap: 12px !important;
    align-items: stretch !important;
    padding: 14px 14px !important;
    background: #fff !important;
    border-bottom: 1px solid #eee !important;
  }
  .cat-title-bar h1 {
    margin: 0 !important;
    font-size: 16px !important;
    font-weight: 800;
    color: #1F4E79;
    background: linear-gradient(to bottom, #D9DCF4, #EEF2FB);
    border-radius: 4px;
    padding: 8px 0;
    text-align: center;
    writing-mode: vertical-rl;
    text-orientation: upright;
    letter-spacing: 6px;
    line-height: 1.4;
    align-self: stretch;
    display: flex !important;
    align-items: center;
    justify-content: center;
  }
  .cat-title-bar h1 small { display: none !important; }
  .cat-title-bar .sub-tabs {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    align-items: stretch;
  }
  .cat-title-bar .sub-tabs a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 9px 4px !important;
    border: 1px solid #DDDDDD;
    background: #FAFAFA;
    color: #333;
    border-radius: 4px;
    font-size: 12px;
    text-align: center;
    text-decoration: none;
    line-height: 1.2;
    min-height: 36px;
    transition: background .15s, color .15s, border-color .15s;
  }
  .cat-title-bar .sub-tabs a:hover {
    border-color: #1F5D99;
    background: #fff;
  }
  .cat-title-bar .sub-tabs a.active {
    background: #1F5D99;
    color: #fff;
    border-color: #1F5D99;
    font-weight: 700;
  }
  .cat-title-bar .sub-tabs a.urgent {
    color: #D24A4A;
    border-color: #F0C9C9;
    background: #FFF5F5;
  }
  .cat-title-bar .sub-tabs a.urgent.active {
    color: #fff;
    background: #D24A4A;
    border-color: #D24A4A;
  }
  /* If sub-tabs has 7 items (odd), span the last one full width */
  .cat-title-bar .sub-tabs a:nth-child(7):last-child {
    grid-column: 1 / -1;
  }

  /* ===== Region filter: equal padding, grid chips, default 8 + toggle ===== */
  .region-filter {
    padding: 12px 14px !important;
    background: #fff !important;
    border-bottom: 1px solid #eee !important;
  }
  .region-filter .region-row {
    display: block !important;
    margin-bottom: 12px !important;
  }
  .region-filter .region-row:last-child { margin-bottom: 0 !important; }
  .region-filter .region-row .label {
    display: block !important;
    font-size: 11px !important;
    color: #999 !important;
    margin-bottom: 6px !important;
    padding: 0 !important;
  }
  .region-filter .region-row .options {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 6px !important;
    padding: 0 !important;
  }
  .region-filter .region-row .options a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 6px 4px !important;
    border: 1px solid #DDDDDD !important;
    background: #fff !important;
    color: #1F5D99 !important;
    border-radius: 4px !important;
    font-size: 11px !important;
    margin: 0 !important;
    text-decoration: none !important;
    min-height: 28px !important;
    text-align: center;
    line-height: 1.1;
  }
  .region-filter .region-row .options a.active {
    background: #1F5D99 !important;
    color: #fff !important;
    border-color: #1F5D99 !important;
    font-weight: 700 !important;
  }
  .region-filter .toggle {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    margin-top: 10px !important;
    padding: 6px 12px !important;
    border: 1px solid #C7CAE5 !important;
    background: #D9DCF4 !important;
    color: #1F4E79 !important;
    border-radius: 4px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    user-select: none;
  }
}


/* ===== separator ===== */


/* ============================================================
   STICKY NAV TABS — DESKTOP uses sticky, MOBILE uses fixed (more robust)
   ============================================================ */
/* Desktop: position sticky (works when no parent has overflow:hidden) */
@media (min-width: 769px) {
  .nav-tabs {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #D9DCF4;
    transition: box-shadow .2s, background .2s;
  }
  .nav-tabs.is-stuck {
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    background: rgba(217, 220, 244, 0.98);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
}
/* ============================================================
   MOBILE NAV — fixed-mode when scrolled (CSS sticky breaks due to body overflow-x)
   ============================================================ */
@media (max-width: 768px) {
  /* Placeholder spacer (occupies space when nav becomes fixed) */
  .nav-tabs-placeholder {
    display: none;
    height: 44px;
    background: transparent;
  }
  .nav-tabs-placeholder.is-active { display: block; }

  /* Mobile nav base */
  .nav-tabs {
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none;
    transition: box-shadow .15s ease;
  }
  .nav-tabs::-webkit-scrollbar { display: none; }
  .nav-tabs a {
    flex: 0 0 auto !important;
    padding: 11px 16px !important;
    font-size: 14px !important;
    white-space: nowrap !important;
  }

  /* When fixed, take over top of viewport */
  .nav-tabs.is-fixed-mobile {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background: #fff !important;
    border-bottom: 1px solid #C7CAE5;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    margin: 0 !important;
    border-radius: 0 !important;
    /* Account for iPhone notch */
    padding-top: env(safe-area-inset-top, 0) !important;
  }
  .nav-tabs.is-fixed-mobile a {
    color: #333 !important;
  }
  .nav-tabs.is-fixed-mobile a.active {
    color: #1F4E79 !important;
    font-weight: 700;
    background: #EEF2FB !important;
    border-bottom: 2px solid #1F4E79;
  }

  /* Mobile-only abbreviated labels via CSS-replaced content
     Use data-mobile-label attribute set by JS for cleaner approach */
  .nav-tabs a[data-mobile-label] .full-label {
    display: none;
  }
  .nav-tabs a[data-mobile-label] .short-label {
    display: inline;
  }
}

/* Desktop: hide short-label, show full-label */
@media (min-width: 769px) {
  .nav-tabs a .short-label { display: none; }
  .nav-tabs a .full-label { display: inline; }
}

/* ============================================================
   BACK-TO-TOP BUTTON (icon only — no text)
   ============================================================ */
.back-to-top {
  position: fixed;
  right: 20px;
  bottom: 90px;
  width: 44px;
  height: 44px;
  background: #1F5D99;
  color: #fff;
  border: none;
  border-radius: 50%;
  box-shadow: 0 3px 10px rgba(31,93,153,0.28);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s ease, background .15s;
  z-index: 1000;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}
.back-to-top.is-visible {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}
.back-to-top:hover { background: #163d61; }
.back-to-top:active { transform: translateY(0) scale(0.94) !important; }
.back-to-top svg { display: block; }

@media (max-width: 768px) {
  /* Mobile sticky nav — account for iPhone notch */
  .nav-tabs {
    top: env(safe-area-inset-top, 0);
  }
  .nav-tabs.is-stuck {
    background: rgba(255, 255, 255, 0.98);
    border-bottom: 1px solid #C7CAE5;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
  }
  /* Mobile back-to-top: smaller, above bottom action bar */
  .back-to-top {
    right: 14px;
    bottom: 80px;
    width: 40px;
    height: 40px;
    box-shadow: 0 2px 8px rgba(31,93,153,0.25);
  }
  .back-to-top svg {
    width: 18px;
    height: 18px;
  }
}


/* ===== separator ===== */


@media (max-width: 768px) {
  html, body, .page { width: 100% !important; max-width: 100% !important; overflow-x: hidden !important; box-sizing: border-box !important; }
  .col-list, .list-tools, .row, .pager,
  .stats-bar, .facets, .facets-row, .result, .result .top, .suggest-note,
  .title-card, .contact-card, .contact-body, .contact-list, .contact-row, .action-bar {
    width: 100% !important; max-width: 100% !important; box-sizing: border-box !important;
  }
  .list-tools, .stats-bar, .result .top, .action-bar, .contact-row { flex-wrap: wrap !important; min-width: 0 !important; }
  .detail-area, .col-main { overflow-x: hidden !important; }
  .side-ads, .side-ad-grid { contain: layout paint; }
}


/* ===== separator ===== */


/* ===== Desktop-wide UI polish (all pages) =====
   Shared visual layer extracted from homepage polish.
   Pure visual: shadows, hover, spacing. No layout/structure change.
   All rules hard-gated by min-width:769px so mobile is untouched. */
@media (min-width: 769px) {
  /* --- Module cards: subtle shadow for layered feel --- */
  .module {
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    margin-bottom: 10px;
  }
  .module-head {
    height: 34px;
    padding: 0 14px;
  }
  .module-head .title {
    font-size: 14px;
    letter-spacing: 0.5px;
  }
  .module-head .title::before {
    width: 3px;
    height: 15px;
    border-radius: 1px;
  }

  /* --- Listing rows: zebra hover + tighter padding for density --- */
  .listing {
    padding: 8px 14px;
  }
  .listing li {
    padding: 7px 6px;
    margin: 0 -6px;
    border-radius: 2px;
    transition: background .12s;
  }
  .listing li:hover {
    background: #F7F9FC;
  }
  .listing li .tag {
    font-weight: 600;
  }

  /* --- Main banner & bottom blocks: match module card style --- */
  .main-banner .ad,
  .bottom-ads .ad,
  .bottom-banner.ad,
  .bottom-banner > .ad {
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  }
}

/* ==========================================================================
   A + B UI Polish — view-btn / 紅色 ribbon / region 5-col grid
   （參考舊 ASP 站 + 當代設計 - https://infohuaxin.com）
   ========================================================================== */

/* ---- A1. 列表行最右側「查看」CTA 藍按鈕 ---- */
.row .view-btn {
    flex: 0 0 auto;
    display: inline-flex; align-items: center;
    background: #1F5D99;
    color: #fff !important;
    font-size: 12px; font-weight: 600;
    padding: 4px 14px;
    border-radius: 3px;
    border: 1px solid #1F5D99;
    text-decoration: none;
    margin-left: 6px;
    transition: background 0.15s, transform 0.1s;
}
.row .view-btn:hover {
    background: #163D61;
    color: #fff !important;
    text-decoration: none;
    transform: translateY(-1px);
}
.row .view-btn:active { transform: translateY(0); }

/* ---- A2. 「★ 推荐」紅底白字 ribbon（取代米黃底） ---- */
.row .rec-flag {
    background: #D24A4A !important;
    color: #fff !important;
    border: 1px solid #B83737 !important;
    font-weight: 700;
}

/* ---- A3. 「顶」紅底白字（取代橘色） ---- */
.row .top-flag {
    background: #B83737 !important;
    color: #fff !important;
    border: 1px solid #8E2929 !important;
    font-weight: 700;
}

/* ---- A4. 「紧急 / 急」tag 紅色加強（取代深藍） ---- */
.tag-urgent { background: #D24A4A !important; color: #fff !important; }

/* ---- B. region-filter 5-column grid 整齊化（對齊舊站 column-table） ---- */
.region-filter .region-row .options {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 2px 4px;
    align-items: stretch;
}
.region-filter .region-row .options a {
    border-right: none !important;
    text-align: center;
    padding: 4px 10px !important;
}
/* 響應式 fallback */
@media (max-width: 1024px) {
    .region-filter .region-row .options { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 768px) {
    .region-filter .region-row .options { grid-template-columns: repeat(3, 1fr); }
    .row .view-btn { padding: 3px 10px; font-size: 11px; margin-left: 4px; }
}
@media (max-width: 480px) {
    .region-filter .region-row .options { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   分類頁表格版面（對齊 infohuaxin.es/category）
   結構：分類標題卡 → 篩選列 (子分類 + 城市) → 4 欄表格 → 分頁
   ========================================================================== */

/* ---- 分類標題卡 ---- */
.cat-title-card {
    width: 1000px;
    margin: 8px auto 0;
    background: #fff;
    border: 1px solid #DDDDDD;
    padding: 14px 18px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
}
.cat-title-card h1 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #1F4E79;
}
.cat-title-card h1 small {
    margin-left: 8px;
    color: #999;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 1px;
}
.cat-title-card .cat-count {
    color: #666;
    font-size: 13px;
}
.cat-title-card .cat-count b {
    color: #D24A4A;
    font-family: Tahoma, Arial;
}

/* ---- 篩選列（子分類 + 城市）---- */
.cat-filter {
    width: 1000px;
    margin: 8px auto 0;
    background: #fff;
    border: 1px solid #DDDDDD;
    padding: 6px 14px;
    font-size: 12px;
}
.cat-filter-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 0;
}
.cat-filter-row + .cat-filter-row { border-top: 1px dashed #eee; }
.cat-filter-label {
    flex: 0 0 auto;
    color: #888;
    padding-top: 4px;
    width: 60px;
}
.cat-filter-opts {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 2px;
}
.cat-filter-opts a {
    padding: 3px 10px;
    color: #555;
    font-size: 12px;
    line-height: 1.4;
    border-radius: 2px;
    transition: background 0.15s;
}
.cat-filter-opts a:hover {
    color: #1F4E79;
    background: #f5f8fc;
    text-decoration: none;
}
.cat-filter-opts a.active {
    background: #1F4E79;
    color: #fff;
    font-weight: 700;
}
.cat-filter-opts a.active:hover { color: #fff; background: #163D61; }

/* ---- 表格 ---- */
.cat-table-wrap {
    background: #fff;
    border: 1px solid #DDDDDD;
    overflow-x: auto;  /* mobile fallback */
}
.cat-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    table-layout: fixed;
}
.cat-table thead th {
    background: #F5F7FA;
    border-bottom: 2px solid #1F4E79;
    color: #1F4E79;
    font-weight: 700;
    text-align: left;
    padding: 10px 12px;
    font-size: 13px;
}
.cat-table tbody tr {
    border-bottom: 1px solid #eee;
    transition: background 0.1s;
}
.cat-table tbody tr:hover { background: #fffbf3; }
.cat-table td {
    padding: 12px;
    vertical-align: middle;
    color: #333;
}
.cat-table .th-expand,
.cat-table .td-expand { width: 28px; padding-right: 0; }
.cat-table .expand-arrow {
    color: #999;
    font-size: 13px;
    user-select: none;
}
.cat-table .th-title    { /* fluid */ }
.cat-table .th-date,
.cat-table .td-date     { width: 110px; }
.cat-table .th-region,
.cat-table .td-region   { width: 110px; color: #1F4E79; font-weight: 600; }
.cat-table .th-action,
.cat-table .td-action   { width: 80px; text-align: center; padding-right: 14px; }

.cat-table .td-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 8px;
}
.cat-table .td-title a {
    color: #333;
    font-size: 13px;
}
.cat-table .td-title a:hover { color: #1F4E79; }
.cat-table .badge-rec {
    display: inline-block;
    background: #D24A4A;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 2px;
    margin-right: 4px;
    vertical-align: 1px;
}
.cat-table .td-date {
    font-family: Tahoma, Arial;
    color: #555;
    line-height: 1.3;
}
.cat-table .td-date .d-main { font-size: 13px; font-weight: 600; }
.cat-table .td-date .d-sub  { font-size: 11px; color: #999; margin-top: 2px; }

.cat-table .td-action .view-btn {
    display: inline-block;
    background: #1F5D99;
    color: #fff !important;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 14px;
    border-radius: 3px;
    border: 1px solid #1F5D99;
    text-decoration: none;
    transition: background 0.15s, transform 0.1s;
}
.cat-table .td-action .view-btn:hover {
    background: #163D61;
    text-decoration: none;
    transform: translateY(-1px);
}
.cat-table .td-empty {
    padding: 40px 0;
    text-align: center;
    color: #999;
}

/* ---- 手機 (≤768px) ---- */
@media (max-width: 768px) {
    .cat-title-card,
    .cat-filter,
    .cat-table-wrap {
        width: 100% !important;
        margin: 8px 0 0;
    }
    .cat-title-card { flex-direction: column; gap: 6px; padding: 12px 14px; }
    .cat-title-card h1 { font-size: 16px; }
    .cat-title-card .cat-count { font-size: 12px; }

    .cat-filter-label { width: 48px; padding-top: 3px; }
    .cat-filter-opts a { padding: 3px 8px; font-size: 11px; }

    /* 表格手機版：壓縮欄位 + 隱藏 expand */
    .cat-table { font-size: 12px; }
    .cat-table thead th { padding: 8px 6px; font-size: 12px; }
    .cat-table td { padding: 8px 6px; }
    .cat-table .th-expand,
    .cat-table .td-expand { display: none; }
    .cat-table .th-date,
    .cat-table .td-date   { width: 86px; }
    .cat-table .th-region,
    .cat-table .td-region { width: 78px; font-size: 11px; }
    .cat-table .th-action,
    .cat-table .td-action { width: 60px; }
    .cat-table .td-date .d-main { font-size: 12px; }
    .cat-table .td-date .d-sub  { font-size: 10px; }
    .cat-table .td-action .view-btn { padding: 4px 8px; font-size: 11px; }
    .cat-table .badge-rec { font-size: 10px; padding: 1px 4px; }
}

/* ---- 超窄屏 (≤414px) ---- */
@media (max-width: 414px) {
    .cat-table .th-region,
    .cat-table .td-region { width: 64px; }
    .cat-table .td-title a { font-size: 12px; }
    .cat-table .td-date .d-sub { display: none; } /* 隱藏副線資訊（有效期）保主要日期 */
}

/* ==========================================================================
   分類表格：推薦 badge 金色膠囊（取代之前紅色）
   nav-tabs active 樣式精簡
   ========================================================================== */

/* 推薦 badge — 淺金底 / 深色字 / 小膠囊 */
.cat-table .badge-rec {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: linear-gradient(180deg, #FFF1C5, #FCE093);
    color: #7A5510;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    padding: 3px 8px 3px 6px;
    border: 1px solid #E5BE5C;
    border-radius: 999px;
    margin-right: 6px;
    vertical-align: 1px;
    white-space: nowrap;
    box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset;
}
.cat-table .badge-rec .b-star {
    color: #D69A1A;
    font-size: 10px;
    margin-right: 2px;
}
/* 推薦行整列輕微底色（不喧賓奪主）*/
.cat-table tbody tr.is-rec {
    background: #FFFCF1;
}
.cat-table tbody tr.is-rec:hover {
    background: #FFF6DC;
}

/* d-sub-mute — 未設定有效期的灰字 */
.cat-table .td-date .d-sub.d-sub-mute {
    color: #BBB;
    font-style: italic;
}

/* nav-tabs active 樣式精簡（保留可辨識但不花俏）*/
.nav-tabs a.active {
    background: #fff;
    color: #1F4E79;
    box-shadow: inset 0 -3px 0 #1F4E79;
}
.nav-tabs a.active::before {
    content: none;  /* 移除橘色 ● dot */
}

/* 手機 — badge 略小 + 不換行 */
@media (max-width: 768px) {
    .cat-table .badge-rec {
        font-size: 10px;
        padding: 2px 6px 2px 4px;
        margin-right: 4px;
    }
    .cat-table .badge-rec .b-star { font-size: 9px; }
    .cat-table .td-title {
        white-space: normal;  /* 允許換行 */
        overflow: visible;
        text-overflow: clip;
    }
}

/* ==========================================================================
   分類表格 v3：時間 3 行層級 + 行內展開 + 隱藏聯絡方式
   ========================================================================== */

/* ---- 時間欄位 3 行層級 ---- */
.cat-table .td-date {
    line-height: 1.4;
}
.cat-table .td-date .d-published {
    font-family: Tahoma, Arial;
    font-size: 13px;
    font-weight: 700;
    color: #1F4E79;
}
.cat-table .td-date .d-label {
    font-size: 11px;
    color: #888;
    margin-top: 4px;
    letter-spacing: 0.5px;
}
.cat-table .td-date .d-label-mute {
    color: #999;
    font-style: italic;
}
.cat-table .td-date .d-expires {
    font-family: Tahoma, Arial;
    font-size: 12px;
    color: #B83737;
    font-weight: 600;
    margin-top: 1px;
}

/* ---- 箭頭按鈕（取代 <span>，可點擊）---- */
.cat-table .expand-arrow {
    background: none;
    border: 1px solid transparent;
    color: #888;
    font-size: 13px;
    width: 22px; height: 22px;
    padding: 0;
    cursor: pointer;
    border-radius: 3px;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    line-height: 1;
}
.cat-table .expand-arrow:hover {
    background: #F0F4FA;
    color: #1F4E79;
    border-color: #C7D5E8;
}
.cat-table tr.row-open .expand-arrow {
    background: #1F4E79;
    color: #fff;
    border-color: #1F4E79;
}
.cat-table tr.row-open {
    background: #F8FAFD !important;
    border-bottom: none;
}

/* ---- 展開行 ---- */
.cat-table tr.row-expand[hidden] { display: none !important; }
.cat-table tr.row-expand .td-expand-cell {
    padding: 0;
    border-bottom: 1px solid #E5EBF2;
}
.cat-table .exp-wrap {
    background: linear-gradient(180deg, #F4F7FB 0%, #EEF2F8 100%);
    border-left: 3px solid #1F4E79;
    padding: 18px 22px 20px;
    margin: 0;
}
.cat-table .exp-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    font-size: 12px;
    color: #555;
    padding-bottom: 10px;
    border-bottom: 1px dashed #C7D5E8;
}
.cat-table .exp-meta b {
    color: #888;
    font-weight: 400;
}
.cat-table .exp-title {
    font-size: 16px;
    font-weight: 700;
    color: #1F4E79;
    margin: 12px 0 8px;
    line-height: 1.5;
}
.cat-table .exp-body {
    font-size: 13px;
    color: #444;
    line-height: 1.8;
    word-break: break-word;
    white-space: pre-wrap;
    margin-bottom: 16px;
    max-height: 200px;
    overflow: hidden;
    position: relative;
}
.cat-table .exp-body::after {
    /* 漸層淡出提示有更多內容 */
    content: "";
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 40px;
    background: linear-gradient(180deg, transparent, #EEF2F8);
    pointer-events: none;
}

/* ---- 聯絡資訊區（電話完全不渲染）---- */
.cat-table .exp-contact {
    background: #fff;
    border: 1px solid #DDE3EC;
    border-radius: 4px;
    padding: 14px 16px;
    margin-top: 10px;
}
.cat-table .exp-contact .cc-line {
    font-size: 13px;
    color: #555;
    margin-bottom: 4px;
    line-height: 1.7;
}
.cat-table .exp-contact .cc-lbl {
    color: #888;
    display: inline-block;
    min-width: 72px;
}
.cat-table .exp-contact .masked {
    color: #BBB;
    font-style: italic;
    letter-spacing: 1px;
}
.cat-table .exp-contact .cc-hint {
    font-size: 12px;
    color: #B83737;
    margin: 8px 0 12px;
    padding: 6px 10px;
    background: #FFF8F8;
    border-left: 3px solid #D24A4A;
    border-radius: 2px;
}
.cat-table .exp-contact .cc-btn {
    display: inline-block;
    background: linear-gradient(180deg, #1F5D99, #1F4E79);
    color: #fff !important;
    font-size: 13px;
    font-weight: 600;
    padding: 7px 22px;
    border-radius: 3px;
    border: 1px solid #163D61;
    text-decoration: none;
    transition: background 0.15s, transform 0.1s;
    box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset;
}
.cat-table .exp-contact .cc-btn:hover {
    background: linear-gradient(180deg, #1F4E79, #163D61);
    text-decoration: none;
    transform: translateY(-1px);
}

/* ---- 手機 (≤768px) ---- */
@media (max-width: 768px) {
    .cat-table .td-date .d-published { font-size: 12px; }
    .cat-table .td-date .d-label     { font-size: 10px; margin-top: 2px; }
    .cat-table .td-date .d-expires   { font-size: 11px; }

    .cat-table .expand-arrow { width: 26px; height: 26px; font-size: 14px; }
    .cat-table .th-expand,
    .cat-table .td-expand { display: table-cell !important; width: 32px !important; padding: 6px 2px !important; }

    .cat-table .exp-wrap     { padding: 14px 14px 16px; }
    .cat-table .exp-meta     { flex-direction: column; gap: 4px; }
    .cat-table .exp-title    { font-size: 15px; }
    .cat-table .exp-body     { font-size: 12px; max-height: 160px; }
    .cat-table .exp-contact  { padding: 12px; }
    .cat-table .exp-contact .cc-btn { display: block; text-align: center; }
}

/* ==========================================================================
   分類表格 v4：標題可點 toggle + AJAX 取電話 + tel 撥打
   ========================================================================== */

/* 標題 cell + button — badge 與 title 同行不擠壓 */
.cat-table td.td-title {
    display: flex !important;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.cat-table .td-title .badge-rec { flex: 0 0 auto; }
.cat-table .title-toggle {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: #333;
    text-align: left;
    cursor: pointer;
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1 1 auto;
    transition: color 0.15s;
}
.cat-table .title-toggle:hover {
    color: #1F4E79;
    text-decoration: underline;
}
.cat-table tr.row-open .title-toggle {
    color: #1F4E79;
    font-weight: 600;
}
.cat-table .title-toggle:focus { outline: 2px solid #C7D5E8; outline-offset: 2px; }

/* tel: 電話連結 — 展開後才出現 */
.cat-table .cc-tel {
    color: #1F4E79 !important;
    font-weight: 700;
    font-family: Tahoma, Arial;
    text-decoration: none;
    font-size: 14px;
}
.cat-table .cc-tel:hover {
    color: #163D61 !important;
    text-decoration: underline;
}

/* 错误提示样式（401 / 失败时切红色）*/
.cat-table .exp-contact .cc-hint.cc-hint-err {
    background: #FFF0F0;
    border-left-color: #D24A4A;
    color: #8B1B1B;
}

/* cc-name / cc-phone 真實資料顯示時加重 */
.cat-table .exp-contact .cc-val {
    color: #333;
    font-weight: 600;
}
.cat-table .exp-contact .cc-val .masked {
    color: #BBB;
    font-style: italic;
    font-weight: 400;
    letter-spacing: 1px;
}

/* 詳情連結 (查看后顯示) — 較細，不喧賓奪主 */
.cat-table .exp-contact .cc-detail-link {
    background: #fff;
    color: #1F4E79 !important;
    border: 1px solid #1F4E79;
    margin-left: 8px;
    padding: 6px 18px;
    box-shadow: none;
}
.cat-table .exp-contact .cc-detail-link:hover {
    background: #F4F7FB;
    transform: translateY(-1px);
}

/* 手機 */
@media (max-width: 768px) {
    .cat-table .title-toggle { white-space: normal; }
    .cat-table .cc-tel { font-size: 13px; }
    .cat-table .exp-contact .cc-detail-link { display: inline-block; margin: 8px 0 0; }
}

/* ==========================================================================
   分類表格 v5：展開區 UI 優化
   - 基本資訊 chip 標籤
   - 摘要白卡 + 「阅读更多」中央按鈕
   - 聯絡區並排「查看联系方式」「进入详情」
   ========================================================================== */

/* 基本資訊 chip — 取代原本 exp-meta */
.cat-table .exp-wrap {
    background: linear-gradient(180deg, #F4F7FB 0%, #EEF2F8 100%);
    border-left: 3px solid #1F4E79;
    padding: 18px 22px 20px;
}
.cat-table .exp-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 14px;
}
.cat-table .exp-chips .chip {
    display: inline-flex;
    align-items: center;
    background: #fff;
    border: 1px solid #C7D5E8;
    border-radius: 999px;
    padding: 4px 12px 4px 4px;
    font-size: 12px;
    color: #333;
    line-height: 1.4;
}
.cat-table .exp-chips .chip-lbl {
    background: #1F4E79;
    color: #fff;
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-right: 6px;
}

/* 摘要白卡 + collapsed 邏輯 */
.cat-table .exp-body-card {
    background: #fff;
    border: 1px solid #DDE3EC;
    border-radius: 4px;
    padding: 14px 18px 0;
    margin: 12px 0 14px;
    position: relative;
}
.cat-table .exp-body {
    font-size: 13px;
    color: #444;
    line-height: 1.85;
    word-break: break-word;
    white-space: pre-wrap;
    padding-bottom: 14px;
}
.cat-table .exp-body[data-collapsed="true"] {
    max-height: 8.5em;     /* 約 5 行 */
    overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
}
.cat-table .exp-body[data-collapsed="false"] {
    max-height: none;
    -webkit-mask-image: none;
            mask-image: none;
}

/* 「阅读更多」中央按鈕 */
.cat-table .exp-more-wrap {
    display: flex;
    justify-content: center;
    margin: 0 -18px;
    padding: 8px 0 12px;
    border-top: 1px dashed #E5EBF2;
    background: linear-gradient(180deg, #fff, #F8FAFD);
}
.cat-table .exp-more-btn {
    background: #fff;
    border: 1px solid #C7D5E8;
    color: #1F4E79;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 18px;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.15s;
    letter-spacing: 0.5px;
}
.cat-table .exp-more-btn:hover {
    background: #1F4E79;
    color: #fff;
    border-color: #1F4E79;
}

/* 摘要標題（白卡上面，從 v3 修改）*/
.cat-table .exp-title {
    font-size: 15px;
    font-weight: 700;
    color: #1F4E79;
    margin: 4px 0 0;
    line-height: 1.5;
}

/* 移除 v3 漸層遮罩（改用 mask-image）+ 隱藏舊 .exp-meta */
.cat-table .exp-body::after { content: none; }
.cat-table .exp-meta { display: none; }

/* 聯絡區並排 actions */
.cat-table .exp-contact .cc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.cat-table .exp-contact .cc-detail-link {
    background: #fff;
    color: #1F4E79 !important;
    border: 1px solid #1F4E79;
    box-shadow: none;
    margin-left: 0;
    padding: 6px 18px;
}
.cat-table .exp-contact .cc-detail-link[hidden] { display: none; }
.cat-table .exp-contact .cc-detail-link:hover {
    background: #F4F7FB;
}

/* 手機 — 不破版 */
@media (max-width: 768px) {
    .cat-table .exp-wrap     { padding: 14px 14px 16px; }
    .cat-table .exp-chips    { gap: 6px; }
    .cat-table .exp-chips .chip { font-size: 11px; padding: 3px 10px 3px 3px; }
    .cat-table .exp-chips .chip-lbl { font-size: 9px; padding: 2px 6px; }
    .cat-table .exp-body-card { padding: 12px 14px 0; }
    .cat-table .exp-body { font-size: 12px; line-height: 1.7; }
    .cat-table .exp-body[data-collapsed="true"] { max-height: 7em; }
    .cat-table .exp-more-wrap { margin: 0 -14px; }
    .cat-table .exp-more-btn { font-size: 11px; padding: 4px 14px; }
    .cat-table .exp-contact .cc-actions { flex-direction: column; align-items: stretch; }
    .cat-table .exp-contact .cc-actions .cc-btn { text-align: center; }
}

/* ==========================================================================
   分類表格 v6：
   - 日期欄排序 icon (▼ ▲)
   - tbody td 垂直置中（避免標題靠頂）
   - title-toggle 視覺改文字連結樣（移除 button hover-cell 痕跡）
   ========================================================================== */

/* 行高 + 垂直置中 */
.cat-table tbody td {
    vertical-align: middle;
}
.cat-table tbody tr {
    min-height: 56px;   /* 行高穩定 */
}

/* 日期表頭排序 */
.cat-table th.th-date {
    white-space: nowrap;
}
.cat-table .th-date-label {
    margin-right: 4px;
}
.cat-table .th-sort {
    display: inline-flex;
    flex-direction: column;
    line-height: 1;
    vertical-align: middle;
    margin-left: 2px;
}
.cat-table .th-sort .sort-arrow {
    color: #BBB;
    font-size: 9px;
    text-decoration: none;
    padding: 0 2px;
    line-height: 1;
    transition: color 0.15s, transform 0.1s;
}
.cat-table .th-sort .sort-arrow + .sort-arrow {
    margin-top: 1px;
}
.cat-table .th-sort .sort-arrow:hover {
    color: #1F4E79;
    text-decoration: none;
}
.cat-table .th-sort .sort-arrow.active {
    color: #1F4E79;
    font-weight: 900;
}

/* title-toggle 改成純文字連結視覺（去掉 button cell hover/focus）*/
.cat-table .title-toggle {
    -webkit-appearance: none;
    appearance: none;
    background: transparent !important;
}
.cat-table .title-toggle:focus {
    outline: none;
}
.cat-table .title-toggle:focus-visible {
    outline: 2px solid #C7D5E8;
    outline-offset: 2px;
}
.cat-table .title-toggle:hover {
    color: #1F5D99;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* 手機 — 排序 icon 略大些 */
@media (max-width: 768px) {
    .cat-table .th-sort .sort-arrow { font-size: 10px; padding: 0 3px; }
    .cat-table tbody tr { min-height: 48px; }
}

/* ==========================================================================
   分類表格 v7：
   - 左箭頭放大 28×28 / font 18
   - 地區欄加 sort arrows (寬度調 130)
   - 標題 cell 統一 min-height 38px，下方無多餘空白
   ========================================================================== */

/* 箭頭按鈕放大 + 命中區 ≥ 28x28 */
.cat-table .expand-arrow {
    width: 28px !important;
    height: 28px !important;
    font-size: 18px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.cat-table .th-expand,
.cat-table .td-expand {
    width: 36px !important;
}

/* 地區欄寬度加寬以容納箭頭 */
.cat-table .th-region,
.cat-table .td-region {
    width: 130px;
    white-space: nowrap;
}
.cat-table .th-region .th-date-label { margin-right: 4px; }

/* 標題 cell — 統一 min-height 38px，視覺上避免下方空白 */
.cat-table .td-title {
    min-height: 38px;
}

/* tbody td 全部 vertical-align middle 已在 v6 加，這裡確認 padding 一致 */
.cat-table tbody td {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}

/* row-expand 展開行不影響主 row 高度（單獨計算高度） */
.cat-table tr.row-expand td {
    padding: 0 !important;
}

/* 手機 */
@media (max-width: 768px) {
    .cat-table .expand-arrow { width: 30px !important; height: 30px !important; font-size: 20px; }
    .cat-table .th-region,
    .cat-table .td-region { width: 92px; }
    .cat-table .th-region .th-date-label,
    .cat-table .th-date .th-date-label { display: inline-block; }
}

/* ==========================================================================
   分類表格 v8：
   - 城市篩選改 tag 風格 + 展開 toggle
   - 標題 title-toggle translateY(1px) 與箭頭對齊中線
   ========================================================================== */

/* ---- 城市 tag 區（接近首頁風格但更緊湊）---- */
.cat-filter-cities {
    align-items: flex-start;
    padding: 8px 0;
}
.cat-cities-label {
    flex: 0 0 auto;
    color: #888;
    padding-top: 6px;
    width: 168px;
    font-size: 12px;
    line-height: 1.4;
}
.cat-cities-label b {
    color: #1F4E79;
    font-weight: 700;
}
.cat-cities-opts {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
/* tag 樣式 — 白底、淺灰邊、藍字、小圓角 */
.cat-cities-opts .city-tag {
    display: inline-block;
    padding: 4px 10px;
    background: #fff;
    border: 1px solid #DDDDDD;
    border-radius: 3px;
    color: #1F5D99;
    font-size: 12px;
    line-height: 1.4;
    text-decoration: none;
    transition: all 0.15s;
}
.cat-cities-opts .city-tag:hover {
    background: #F0F4FA;
    border-color: #1F5D99;
    text-decoration: none;
}
.cat-cities-opts .city-tag.active {
    background: #1F4E79;
    border-color: #1F4E79;
    color: #fff;
    font-weight: 700;
}
/* 收合狀態：city-extra (非 active) 隱藏 */
.cat-cities-opts[data-city-collapsed="true"] .city-tag.city-extra:not(.active) {
    display: none;
}

/* 展開/收起按鈕 */
.cat-cities-opts .city-toggle-all {
    margin-left: auto;
    background: none;
    border: 1px dashed #C7D5E8;
    color: #1F5D99;
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 3px;
    cursor: pointer;
    line-height: 1.4;
    transition: all 0.15s;
}
.cat-cities-opts .city-toggle-all:hover {
    background: #F0F4FA;
    border-color: #1F5D99;
    border-style: solid;
}

/* ---- 標題與箭頭對齊中線 ---- */
.cat-table .title-toggle {
    display: inline-flex;
    align-items: center;
    line-height: 1.4;
    transform: translateY(1px);   /* 微下移對齊箭頭視覺中心 */
}

/* 手機 ≤768px — 篩選紧凑：收合时单行横滚（priority 城市），展开时多行 wrap */
@media (max-width: 768px) {
    /* 上方 label「子分类:」「地区 >>」单独一行 */
    .cat-filter-row,
    .cat-filter-cities {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 4px !important;
        padding: 6px 0 !important;
    }
    .cat-filter-label,
    .cat-cities-label {
        width: auto !important;
        padding: 0 !important;
        font-size: 11px;
        color: #888;
    }

    /* 子分类选项：单行横向滚动 */
    .cat-filter-opts {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        padding: 2px 0 4px;
    }

    /* 地区选项 — 收合时单行横滚（priority 全部可滑动到） */
    .cat-cities-opts {
        display: flex !important;
        gap: 6px !important;
        padding: 2px 0 4px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
    /* 收合状态：单行 nowrap + 横滚 */
    .cat-cities-opts[data-city-collapsed="true"] {
        flex-wrap: nowrap !important;
        overflow-x: auto;
    }
    /* 展开状态：多行 wrap（与首页区域一致的多行展开样式） */
    .cat-cities-opts[data-city-collapsed="false"] {
        flex-wrap: wrap !important;
        overflow-x: visible;
        row-gap: 6px;
    }

    /* 滚动条样式 */
    .cat-filter-opts::-webkit-scrollbar,
    .cat-cities-opts::-webkit-scrollbar { height: 3px; }
    .cat-filter-opts::-webkit-scrollbar-thumb,
    .cat-cities-opts::-webkit-scrollbar-thumb { background: #ccd; border-radius: 2px; }

    /* 每个 tag 紧凑尺寸 */
    .cat-filter-opts a,
    .cat-cities-opts .city-tag {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
        padding: 5px 12px !important;
        font-size: 12px !important;
        border-radius: 14px !important;
    }

    /* 「展开全部地区」按钮：默认显示，点击切换 */
    .cat-cities-opts .city-toggle-all {
        flex: 0 0 auto;
        margin-left: 0 !important;
        white-space: nowrap;
        font-size: 11px !important;
        padding: 5px 10px !important;
        border-radius: 14px !important;
    }
    /* 收合状态：city-extra 全部隐藏（已有逻辑 .cat-cities-opts[data-city-collapsed="true"] .city-tag.city-extra:not(.active) { display: none } ）*/
    /* 展开状态：city-extra 显示，wrap 多行 */
    .cat-cities-opts[data-city-collapsed="false"] .city-tag.city-extra {
        display: inline-block !important;
    }
}

/* ==========================================================================
   分類表格 v9：移除任何 button 的黑色預設背景 + 標題對齊修正
   ========================================================================== */

/* universal button reset — 防止某些瀏覽器 / OS 預設 button 黑底 */
.cat-table button,
.cat-filter button,
.cat-cities-opts button,
.cat-table-wrap button {
    background-color: transparent;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* expand-arrow open 狀態改為淡藍底（取代深藍 #1F4E79 — 用戶反映看起來像黑）*/
.cat-table tr.row-open .expand-arrow {
    background-color: #E8EEF7 !important;
    color: #1F4E79 !important;
    border-color: #C7D5E8 !important;
}

/* 城市區 toggle 按鈕改自然靠左 — 不用 margin-left:auto 推到最右 */
.cat-cities-opts .city-toggle-all {
    margin-left: 4px;
}

/* 標題 cell 對齊 — 統一 min-height 44 + 標題 padding-top 1px */
.cat-table td.td-title {
    display: flex !important;
    align-items: center;
    gap: 8px;
    min-height: 44px;
}
.cat-table .title-toggle {
    display: inline-flex;
    align-items: center;
    line-height: 1.4;
    padding-top: 1px;
    transform: none;             /* 取代 v8 的 translateY(1px) */
    background-color: transparent !important;
    border: 0;
}
.cat-table .title-toggle:hover {
    background-color: transparent !important;  /* 避免 button hover bg 出黑 */
}

/* 推薦 badge 不應被任何 button reset 影響 */
.cat-table .badge-rec { background-image: linear-gradient(180deg, #FFF1C5, #FCE093); }

/* 手機 ≤768px */
@media (max-width: 768px) {
    .cat-table td.td-title { min-height: 40px; gap: 6px; }
    .cat-cities-opts .city-toggle-all { margin-left: 0; }
}

/* ==========================================================================
   /search 搜尋表單 — 桌面固定一行，寬度對齊主容器
   ========================================================================== */
.search-form-wrap {
    width: 1000px;
    margin: 8px auto 0;
}
.search-form {
    background: #fff;
    border: 1px solid #DDDDDD;
    padding: 10px 14px;
    display: flex;
    gap: 8px;
    align-items: center;
}
.search-form .sf-input {
    flex: 0 0 300px;
    width: 300px;
    height: 36px;
    border: 1px solid #DDDDDD;
    padding: 0 10px;
    font-size: 14px;
    background: #fff;
}
.search-form .sf-select {
    flex: 0 0 140px;
    width: 140px;
    height: 36px;
    border: 1px solid #DDDDDD;
    padding: 0 8px;
    font-size: 13px;
    background: #fff;
    cursor: pointer;
}
.search-form .sf-btn {
    flex: 0 0 80px;
    width: 80px;
    height: 36px;
    background: #1F4E79;
    color: #fff;
    border: 1px solid #163D61;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 2px;
    transition: background 0.15s;
}
.search-form .sf-btn:hover { background: #163D61; }

/* 熱門關鍵字 chip */
.hot-kw {
    display: inline-block;
    margin: 0 6px;
    padding: 4px 12px;
    background: #F5F5F5;
    border: 1px solid #DDD;
    color: #1F4E79;
    text-decoration: none;
    border-radius: 2px;
    font-size: 12px;
}
.hot-kw:hover { background: #E8EEF7; color: #1F4E79; text-decoration: none; }

/* 分頁加 .pager-info 文字 */
.pager .pager-info {
    color: #666;
    font-size: 12px;
    margin-right: 16px;
    font-family: inherit;
}
.pager .pager-info b {
    color: #1F4E79;
    font-family: Tahoma, Arial;
}

/* 手機 — 搜尋表單垂直排列 */
@media (max-width: 768px) {
    .search-form-wrap { width: 100%; margin: 6px 0 0; }
    .search-form { flex-direction: column; gap: 6px; padding: 10px; }
    .search-form .sf-input,
    .search-form .sf-select,
    .search-form .sf-btn { flex: 1 1 auto; width: 100%; }
    .pager .pager-info { display: block; margin: 0 0 8px; }
}

/* ==========================================================================
   分類表格 v10：地區 / 子分類 label 對齊修正
   - 移除固定寬度（之前 168px / 56px 造成「地区 >>」與「全部」中間大空白）
   - label 改 nowrap + 自動撐開
   ========================================================================== */
.cat-filter-row {
    display: flex !important;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 0;
}
.cat-filter-row .cat-filter-label,
.cat-filter-row .cat-cities-label {
    flex: 0 0 auto;
    width: auto !important;
    text-align: left !important;
    white-space: nowrap;
    color: #666;
    line-height: 26px;
    padding-top: 0 !important;
}
.cat-filter-row .cat-filter-opts,
.cat-filter-row .cat-cities-opts {
    flex: 1 1 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    min-width: 0;
}

/* 子分類列 a 改 tag 樣式（對齊地區 tag）*/
.cat-filter-row .cat-filter-opts a {
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 10px;
    background: #fff;
    border: 1px solid #DDDDDD;
    border-radius: 3px;
    color: #1F5D99;
    font-size: 12px;
    line-height: 1.4;
    text-decoration: none;
    transition: all 0.15s;
}
.cat-filter-row .cat-filter-opts a:hover {
    background: #F0F4FA;
    border-color: #1F5D99;
    text-decoration: none;
}
.cat-filter-row .cat-filter-opts a.active {
    background: #1F4E79;
    border-color: #1F4E79;
    color: #fff;
    font-weight: 700;
}

/* 手機 */
@media (max-width: 768px) {
    .cat-filter-row { flex-direction: column; gap: 4px; }
    .cat-filter-row .cat-filter-label,
    .cat-filter-row .cat-cities-label { line-height: 1.4; font-size: 11px; }
}

/* ==========================================================================
   分類表格 v11：最終垂直置中（按用戶建議結構重寫）
   標題改用 .title-cell 包覆 + min-height 48 + flex center
   ========================================================================== */

/* 主 row 高度固定 — 不受 .td-date 3 行撐 */
.cat-table tbody tr {
    height: 56px;
}
.cat-table tbody td {
    vertical-align: middle !important;
}

/* 標題 td — flex center + min-height */
.cat-table td.td-title {
    display: table-cell !important;       /* 重置之前 v8 的 display:flex !important */
    vertical-align: middle !important;
    padding: 8px 12px !important;
}
.cat-table .title-cell {
    min-height: 38px;
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
}

/* badge 不收縮、24px 行高對齊 */
.cat-table .title-cell .badge-rec {
    flex: 0 0 auto;
    height: 22px;
    line-height: 1;
    align-items: center;
}

/* title-toggle — 純文字連結樣（無 button 殘留樣式）*/
.cat-table .title-cell .title-toggle {
    flex: 1 1 auto;
    min-width: 0;
    display: inline-block;
    border: 0;
    background: transparent !important;
    background-image: none !important;
    padding: 0;
    margin: 0;
    line-height: 22px;
    font: inherit;
    color: #333;
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-appearance: none;
    appearance: none;
    transform: none;
    padding-top: 0;
}
.cat-table .title-cell .title-toggle:hover {
    color: #1F5D99;
    text-decoration: underline;
    text-underline-offset: 2px;
    background: transparent !important;
}
.cat-table .title-cell .title-toggle:focus { outline: none; }
.cat-table .title-cell .title-toggle:focus-visible {
    outline: 2px solid #C7D5E8;
    outline-offset: 2px;
}

/* 展開行不算進主 row 高度（td 內 div 自己撐）*/
.cat-table tr.row-expand {
    height: auto !important;
}
.cat-table tr.row-expand > td {
    height: auto !important;
    padding: 0 !important;
}

/* 手機 */
@media (max-width: 768px) {
    .cat-table tbody tr { height: 48px; }
    .cat-table .title-cell { min-height: 32px; gap: 6px; }
    .cat-table .title-cell .title-toggle { white-space: normal; line-height: 1.4; }
}

/* ==========================================================================
   /post 发布页 — 两步骤 + 分类卡 + 提示侧栏
   ========================================================================== */
.post-page {
    width: 1000px;
    margin: 8px auto 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

/* 顶部 */
.post-head {
    background: #fff;
    border: 1px solid #DDDDDD;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 16px;
}
.post-head .post-back {
    color: #1F5D99;
    font-size: 13px;
    text-decoration: none;
    padding: 4px 8px;
    border: 1px solid #C7D5E8;
    border-radius: 3px;
}
.post-head .post-back:hover { background: #F0F4FA; }
.post-head .post-title {
    font-size: 18px;
    margin: 0;
    font-weight: 700;
    color: #1F4E79;
}
.post-head .post-steps {
    margin: 0 0 0 auto;
    list-style: none;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 0;
}
.post-head .step {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #999;
}
.post-head .step .num {
    width: 22px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    border-radius: 50%;
    background: #E5EBF2;
    color: #999;
    font-weight: 700;
    font-size: 12px;
    font-family: Tahoma, Arial;
}
.post-head .step.is-active .num { background: #1F4E79; color: #fff; }
.post-head .step.is-active .lbl { color: #1F4E79; font-weight: 700; }
.post-head .step.is-done .num { background: #2F9E44; color: #fff; }
.post-head .step.is-done .num::before { content: "✓"; font-size: 13px; }
.post-head .step.is-done .num span,
.post-head .step.is-done .num { font-size: 0; }
.post-head .step.is-done .num::before { font-size: 13px; }
.post-head .step-line {
    width: 36px;
    height: 1px;
    background: #DDD;
    margin: 0 8px;
    list-style: none;
}

/* 表单大区: 左主 + 右侧栏 */
#post-form {
    display: grid;
    grid-template-columns: 1fr 260px;
    gap: 12px;
}
.post-main { display: flex; flex-direction: column; gap: 12px; }
.post-side { display: flex; flex-direction: column; gap: 12px; }

/* 卡片 */
.post-card {
    background: #fff;
    border: 1px solid #DDDDDD;
    padding: 18px 22px;
}
.post-card-head { margin-bottom: 12px; }
/* 「继续」按钮滚动定位时，避开 sticky nav-tabs 遮挡 */
#post-form-section { scroll-margin-top: 80px; }
@media (max-width: 768px) { #post-form-section { scroll-margin-top: 60px; } }
.post-card-head h2 {
    font-size: 15px;
    color: #1F4E79;
    margin: 0 0 2px;
    font-weight: 700;
    display: inline-block;
}
.post-card-head h2::before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 13px;
    background: #1F4E79;
    margin-right: 7px;
    vertical-align: -1px;
}
.post-card-head small { color: #888; font-size: 12px; margin-left: 4px; }
.req { color: #D24A4A; font-weight: 700; }

/* 分类卡 grid */
.cat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 6px;
}
.cat-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid #DDDDDD;
    border-radius: 4px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
    min-height: 64px;
}
.cat-card:hover {
    border-color: #1F5D99;
    background: #F8FAFD;
}
.cat-card.is-selected {
    border-color: #1F4E79;
    background: #EEF3F9;
    box-shadow: 0 0 0 1px #1F4E79 inset;
}
.cat-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.cat-card .cat-card-icon {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    font-size: 22px;
    background: #F4F7FB;
    border-radius: 4px;
}
.cat-card .cat-card-body { flex: 1; min-width: 0; line-height: 1.4; }
.cat-card .cat-card-name { font-size: 14px; font-weight: 700; color: #333; }
.cat-card .cat-card-sub { font-size: 11px; color: #999; margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cat-card .cat-card-check {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #1F4E79;
    color: #fff;
    line-height: 18px;
    text-align: center;
    font-size: 11px;
    opacity: 0;
    transition: opacity 0.15s;
}
.cat-card.is-selected .cat-card-check { opacity: 1; }

/* ===== 二级子分类（cat-card-wrap） ===== */
/* 新版 root card 用 button 包裹（取消默认 button 样式） */
.cat-card.cat-card-wrap {
    padding: 0;
    display: block;
    overflow: visible;
}
.cat-card-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    width: 100%;
    background: transparent;
    border: 0;
    cursor: pointer;
    font: inherit;
    color: inherit;
    text-align: left;
    min-height: 64px;
}
.cat-card-wrap:hover .cat-card-btn { background: rgba(31,93,153,.03); }
.cat-card-wrap.is-selected .cat-card-btn { background: transparent; }
.cat-card-chev {
    flex: 0 0 auto;
    color: #9CA3AF;
    font-size: 14px;
    margin-left: 6px;
    transition: transform .15s, color .15s;
}
.cat-card-wrap.is-selected .cat-card-chev,
.cat-card-wrap:has(.cat-sub-panel:not([hidden])) .cat-card-chev {
    transform: rotate(180deg);
    color: #1F4E79;
}

/* 子分类面板（展开后嵌在 root card 内） */
.cat-sub-panel {
    border-top: 1px dashed #D1D9E3;
    padding: 10px 14px 12px;
    background: #FAFBFD;
    border-radius: 0 0 4px 4px;
    animation: cat-sub-in .18s ease-out;
}
.cat-sub-hint {
    font-size: 11.5px;
    color: #6B7280;
    margin-bottom: 6px;
    padding-left: 2px;
}
.cat-sub-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.cat-sub-card {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px 6px 12px;
    background: #fff;
    border: 1px solid #D1D9E3;
    border-radius: 14px;
    font-size: 12.5px;
    color: #374151;
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
    white-space: nowrap;
}
.cat-sub-card:hover {
    border-color: #1F5D99;
    background: #F0F5FC;
}
.cat-sub-card.is-selected {
    border-color: #1F4E79;
    background: #E0EAF7;
    color: #1F4E79;
    font-weight: 600;
    box-shadow: 0 0 0 1px #1F4E79 inset;
}
.cat-sub-card .cat-sub-radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.cat-sub-card .cat-sub-check {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #1F4E79;
    color: #fff;
    font-size: 9px;
    line-height: 14px;
    text-align: center;
    opacity: 0;
    margin-left: 6px;
    flex: 0 0 auto;
    transition: opacity .15s, margin .15s;
}
.cat-sub-card:not(.is-selected) .cat-sub-check {
    width: 0;
    margin-left: 0;
    overflow: hidden;
}
.cat-sub-card.is-selected .cat-sub-check { opacity: 1; }
@keyframes cat-sub-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* 表单字段 */
.form-row { margin-bottom: 12px; }
.form-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #444;
    margin-bottom: 6px;
}
.form-label small { font-weight: 400; }
.form-input {
    width: 100%;
    box-sizing: border-box;
    height: 36px;
    border: 1px solid #DDDDDD;
    border-radius: 3px;
    padding: 0 10px;
    font-size: 13px;
    color: #333;
    background: #fff;
    font-family: inherit;
}
.form-input:focus { border-color: #1F5D99; outline: 2px solid #C7D5E8; outline-offset: 0; }
textarea.form-input { height: auto; padding: 8px 10px; line-height: 1.6; resize: vertical; }
.form-file { height: auto; padding: 6px 8px; }
.form-err {
    color: #B91C1C;
    font-size: 12.5px;
    margin-top: 6px;
    padding-left: 18px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23B91C1C' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='8' x2='12' y2='12'/><line x1='12' y1='16' x2='12.01' y2='16'/></svg>") left 1px no-repeat;
    background-size: 14px 14px;
    line-height: 1.5;
    font-weight: 500;
}

/* 出错字段红边 + 浅红背景 */
.form-input.is-invalid,
.form-row.has-error .form-input {
    border-color: #DC2626 !important;
    background: #FEF2F2 !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, .08);
}
.form-input.is-invalid:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, .18);
}

/* 顶部错误汇总框（醒目） */
.post-error-summary {
    margin: 0 0 18px;
    padding: 14px 16px;
    background: #FEF2F2;
    border: 1px solid #FECACA;
    border-left: 4px solid #DC2626;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(220,38,38,.08);
    animation: pes-shake .35s ease-out;
}
.post-error-summary .pes-head {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #991B1B;
    font-size: 14px;
    margin-bottom: 6px;
}
.post-error-summary .pes-ic {
    width: 18px; height: 18px;
    color: #DC2626;
    flex: 0 0 18px;
}
.post-error-summary .pes-list {
    margin: 0;
    padding-left: 26px;
    color: #991B1B;
    font-size: 13px;
    line-height: 1.7;
}
.post-error-summary .pes-list li { margin: 2px 0; }
@keyframes pes-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-4px); }
    40% { transform: translateX(4px); }
    60% { transform: translateX(-2px); }
    80% { transform: translateX(2px); }
}

/* 电话 prefix */
.phone-row { display: flex; align-items: stretch; }
.phone-row .phone-prefix {
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    background: #F4F7FB;
    border: 1px solid #DDDDDD;
    border-right: 0;
    border-radius: 3px 0 0 3px;
    color: #1F4E79;
    font-weight: 700;
    font-family: Tahoma, Arial;
    font-size: 14px;
}
.phone-row .phone-input { border-radius: 0 3px 3px 0; }

/* 图片预览 */
.img-preview {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
    margin-top: 8px;
}
.img-preview .img-thumb {
    aspect-ratio: 1;
    background: #F5F5F5;
    border: 1px solid #DDD;
    overflow: hidden;
}
.img-preview .img-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 更多联系折叠 */
.more-contact {
    border-top: 1px dashed #E5EBF2;
    padding-top: 12px;
    margin: 4px 0 12px;
}
.more-contact > summary {
    cursor: pointer;
    color: #1F5D99;
    font-size: 13px;
    padding: 4px 0;
    list-style: none;
    user-select: none;
}
.more-contact > summary::before { content: "▸ "; font-size: 10px; }
.more-contact[open] > summary::before { content: "▾ "; }

/* 操作按鈕 */
.post-step-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px dashed #E5EBF2;
}
.btn-primary, .btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    padding: 0 24px;
    border-radius: 3px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    border: 1px solid;
    background-color: transparent;
}
.btn-primary {
    background: #1F4E79;
    border-color: #163D61;
    color: #fff;
}
.btn-primary:hover { background: #163D61; }
.btn-secondary {
    background: #fff;
    border-color: #C7D5E8;
    color: #1F4E79;
}
.btn-secondary:hover { background: #F0F4FA; }

/* 提示侧栏 */
.tip-card {
    background: #fff;
    border: 1px solid #DDDDDD;
    padding: 14px 16px;
    font-size: 12px;
}
.tip-card .tip-head {
    font-size: 13px;
    font-weight: 700;
    color: #1F4E79;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #E5EBF2;
}
.tip-card .tip-list {
    margin: 0;
    padding: 0;
    list-style: none;
    color: #666;
    line-height: 1.7;
}
.tip-card .tip-list li {
    padding: 3px 0 3px 14px;
    position: relative;
}
.tip-card .tip-list li::before {
    content: "•";
    position: absolute;
    left: 4px;
    color: #1F5D99;
    font-weight: 700;
}
.tip-card.tip-gold {
    background: linear-gradient(180deg, #FFF8E8, #FFEFC8);
    border-color: #E5BE5C;
}
.tip-card.tip-gold .tip-head { color: #7A5510; border-bottom-color: #E5BE5C; }
.tip-card.tip-gold .tip-list { color: #6F4D0F; }
.tip-card.tip-gold .tip-list li::before { color: #D69A1A; }

/* ---- 手机版 ≤768px ---- */
@media (max-width: 768px) {
    .post-page { width: 100%; padding: 0 6px; box-sizing: border-box; }
    #post-form { grid-template-columns: 1fr; }
    .post-head { flex-wrap: wrap; padding: 12px 14px; gap: 8px; }
    .post-head .post-title { font-size: 16px; flex: 1; }
    .post-head .post-steps { width: 100%; order: 3; }
    .post-head .step .lbl { font-size: 12px; }
    .post-card { padding: 14px 14px; }
    .cat-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .cat-card { padding: 10px; min-height: 56px; }
    .cat-card .cat-card-icon { width: 30px; height: 30px; line-height: 30px; font-size: 18px; }
    .cat-card .cat-card-name { font-size: 13px; }
    .cat-card .cat-card-sub { font-size: 10px; }
    .img-preview { grid-template-columns: repeat(3, 1fr); }
    .post-step-actions { flex-direction: column-reverse; gap: 8px; padding-bottom: 32px; }
    .post-step-actions .btn-primary,
    .post-step-actions .btn-secondary { width: 100%; }
    .post-side { order: 99; }
}
@media (max-width: 414px) {
    .cat-grid { grid-template-columns: 1fr; }
    .img-preview { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   /post 发布页 — 定位所在 (Geolocation 自动)
   ========================================================================== */
.geo-row .geo-hint {
    font-size: 12px;
    color: #888;
    margin-bottom: 8px;
    line-height: 1.5;
}
.geo-row .geo-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.geo-row .geo-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 16px;
    border-radius: 3px;
    cursor: pointer;
}
.geo-row .geo-btn:disabled {
    opacity: 0.6;
    cursor: progress;
}
.geo-row .geo-icon { font-size: 14px; }
.geo-row .geo-status {
    font-size: 12px;
    color: #888;
    line-height: 1.5;
    flex: 1;
    min-width: 0;
}
.geo-row .geo-status.is-pending { color: #1F5D99; }
.geo-row .geo-status.is-ok      { color: #2F9E44; font-weight: 600; }
.geo-row .geo-status.is-err     { color: #B83737; }

@media (max-width: 768px) {
    .geo-row .geo-actions { flex-direction: column; align-items: stretch; gap: 6px; }
    .geo-row .geo-btn { width: 100%; justify-content: center; }
    .geo-row .geo-status { width: 100%; }
}

/* ==========================================================================
   /post 发布页 — 分类卡 SVG icon + 定位地区按钮
   ========================================================================== */

/* 分类卡 icon 改 SVG —淡灰方块 + 深灰线性 */
.cat-card .cat-card-icon {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #F0F2F5;
    border-radius: 6px;
    color: #333;
    font-size: 0;       /* 清掉舊 emoji 殘留 */
}
.cat-card .cat-card-icon svg {
    width: 20px;
    height: 20px;
    color: #2A3441;
    display: block;
}
.cat-card.is-selected .cat-card-icon {
    background: #E0EAF7;
}
.cat-card.is-selected .cat-card-icon svg {
    color: #1F4E79;
}

/* 所在地区 — select + 定位按钮 同行 */
.region-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}
.region-row .region-select {
    flex: 1 1 auto;
    min-width: 0;
}
.region-row .btn-locate {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 36px;
    padding: 0 12px;
    background: #fff;
    border: 1px solid #C7D5E8;
    border-radius: 3px;
    color: #1F4E79;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.region-row .btn-locate:hover {
    background: #F0F4FA;
    border-color: #1F4E79;
}
.region-row .btn-locate:disabled {
    opacity: 0.6;
    cursor: progress;
}
.region-row .btn-locate svg { color: currentColor; }

/* 定位状态 — 下方小字 */
.locate-status {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.5;
    min-height: 18px;
}
.locate-status.is-pending { color: #1F5D99; }
.locate-status.is-ok      { color: #2F9E44; font-weight: 600; }
.locate-status.is-err     { color: #B83737; }

@media (max-width: 768px) {
    .region-row { flex-direction: column; gap: 6px; }
    .region-row .btn-locate { width: 100%; justify-content: center; }
}

/* ==========================================================================
   /login + /register — auth 卡片样式（对齐欧浪经典版）
   ========================================================================== */
.auth-card .auth-sub {
    padding: 12px 24px 0;
    color: #888;
    font-size: 13px;
    line-height: 1.6;
    border-top: 1px dashed #EEE;
    margin-top: -1px;
}
.auth-card .auth-form {
    padding: 16px 24px 24px;
}
.auth-card .auth-row {
    display: block;
    margin-bottom: 14px;
    font-size: 13px;
    color: #333;
}
.auth-card .auth-label {
    margin-bottom: 6px;
    font-weight: 600;
    color: #444;
}
.auth-card .auth-input {
    width: 100%;
    box-sizing: border-box;
    height: 38px;
    border: 1px solid #DDD;
    padding: 0 12px;
    font-size: 14px;
    background: #fff;
    border-radius: 3px;
}
.auth-card .auth-input:focus {
    border-color: #1F5D99;
    outline: 2px solid #C7D5E8;
}
.auth-card .auth-err { color: #D24A4A; display: block; margin-top: 4px; font-size: 12px; }
.auth-card .auth-remember {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #555;
    font-size: 13px;
    margin-bottom: 16px;
}
.auth-card .auth-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    border-top: 1px solid #EEE;
    padding-top: 16px;
    flex-wrap: wrap;
}
.auth-card .btn-auth-primary {
    height: 40px;
    padding: 0 28px;
    background: #1F4E79;
    color: #fff;
    border: 1px solid #163D61;
    border-radius: 3px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 1px;
    transition: background 0.15s;
}
.auth-card .btn-auth-primary:hover { background: #163D61; }
.auth-card .btn-auth-primary.is-gold {
    background: linear-gradient(180deg, #F28C28, #D69A1A);
    border-color: #B8801A;
}
.auth-card .btn-auth-primary.is-gold:hover {
    background: linear-gradient(180deg, #E07A20, #B8801A);
}
.auth-card .auth-secondary-link {
    color: #666;
    font-size: 13px;
    text-decoration: none;
}
.auth-card .auth-secondary-link:hover { color: #1F4E79; }
.auth-card .auth-foot {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed #EEE;
    font-size: 12px;
    color: #888;
    line-height: 1.8;
}
.auth-card .auth-foot-link {
    color: #1F5D99;
    text-decoration: none;
}
.auth-card .auth-foot-link:hover { text-decoration: underline; }

/* 黄金 flow 卡片金色边框点缀 */
.auth-card.is-gold-flow {
    border: 1px solid #E5BE5C;
    box-shadow: 0 0 0 1px #FCE093 inset;
}
.auth-card.is-gold-flow .module-head {
    background: linear-gradient(180deg, #FFF8E8, #FFEFC8);
    color: #7A5510;
}
.auth-card.is-gold-flow .module-head .title { color: #7A5510; }
.auth-card.is-gold-flow .module-head .more { color: #7A5510; }

/* ==========================================================================
   /post?type=gold — 黄金会员发布头部样式
   ========================================================================== */
.post-head .post-title-wrap { flex: 1; }
.post-head .post-subtitle {
    font-size: 12px;
    color: #888;
    margin-top: 4px;
    line-height: 1.5;
}
.post-head.is-gold-head {
    background: linear-gradient(180deg, #FFF8E8, #FFFBED);
    border-color: #E5BE5C;
}
.post-head.is-gold-head .post-title { color: #7A5510; }
.post-head.is-gold-head .post-subtitle { color: #B8801A; }
.post-head .gold-tag {
    color: #D69A1A;
    font-size: 14px;
    margin-left: 4px;
}
.btn-primary.is-gold-btn {
    background: linear-gradient(180deg, #F28C28, #D69A1A);
    border-color: #B8801A;
}
.btn-primary.is-gold-btn:hover {
    background: linear-gradient(180deg, #E07A20, #B8801A);
}

/* 手机响应式 */
@media (max-width: 768px) {
    .auth-card { margin: 12px auto !important; }
    .auth-card .auth-form { padding: 12px 16px 16px; }
    .auth-card .auth-input { font-size: 14px; }
    .auth-card .btn-auth-primary { width: 100%; padding: 0; }
    .auth-card .auth-actions { flex-direction: column; align-items: stretch; gap: 8px; }
}

/* ==========================================================================
   /membership — 黄金会员介绍页
   ========================================================================== */
.member-page {
    width: 1000px;
    margin: 8px auto 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Hero */
.member-hero {
    display: grid;
    grid-template-columns: 1fr 260px;
    gap: 14px;
    background: linear-gradient(120deg, #1F4E79 0%, #2A5F94 60%, #1F4E79 100%);
    border: 1px solid #163D61;
    padding: 26px 28px;
    color: #fff;
    border-radius: 4px;
}
.member-hero .hero-eyebrow {
    color: #FFE293;
    font-size: 12px;
    letter-spacing: 1px;
    margin-bottom: 8px;
    font-weight: 700;
}
.member-hero .hero-title {
    font-size: 24px;
    margin: 0 0 8px;
    font-weight: 800;
    color: #fff;
    letter-spacing: 0.5px;
}
.member-hero .hero-sub {
    color: #C7D5E8;
    font-size: 13px;
    line-height: 1.7;
    margin: 0 0 14px;
}
.member-hero .hero-status {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,242,200,.4);
    color: #FFE293;
    padding: 8px 12px;
    border-radius: 3px;
    font-size: 12px;
    margin-bottom: 12px;
}
.member-hero .badge {
    background: linear-gradient(180deg, #FFE293, #D69A1A);
    color: #4A2F05;
    padding: 1px 8px;
    border-radius: 2px;
    margin-right: 6px;
    font-weight: 700;
    font-size: 11px;
}
.member-hero .badge-pending {
    background: rgba(255,255,255,.2);
    color: #fff;
}
.member-hero .hero-status-pending {
    color: #fff;
}
.member-hero .hero-cta-row { display: flex; gap: 10px; flex-wrap: wrap; }
.member-hero .cta-primary {
    display: inline-block;
    background: linear-gradient(180deg, #FFE293, #D69A1A);
    color: #4A2F05 !important;
    border: 1px solid #B8801A;
    padding: 9px 22px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 3px;
    font-size: 14px;
    transition: transform 0.1s;
}
.member-hero .cta-primary:hover { transform: translateY(-1px); }
.member-hero .cta-secondary {
    display: inline-block;
    background: transparent;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,.3);
    padding: 9px 18px;
    text-decoration: none;
    border-radius: 3px;
    font-size: 13px;
}

/* Hero 右侧客服 */
.member-hero .quick-card {
    background: rgba(255,243,200,.95);
    color: #5A4216;
    border-radius: 4px;
    padding: 14px;
    border: 1px solid #E5BE5C;
}
.member-hero .quick-card .quick-title {
    color: #7A5510;
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 4px;
}
.member-hero .quick-card .quick-phone {
    font-size: 17px;
    font-weight: 800;
    font-family: Tahoma, Arial;
}
.member-hero .quick-card .quick-phone a { color: #7A5510; text-decoration: none; }
.member-hero .quick-card .quick-sub { font-size: 12px; color: #6F4D0F; margin-top: 4px; }
.member-hero .quick-card .quick-sub a { color: #1F4E79; }

/* Section 标题 */
.section-title {
    font-size: 15px;
    color: #1F4E79;
    font-weight: 700;
    margin: 0 0 12px;
    padding-left: 0;
}

/* 权益 grid */
.member-benefits {
    background: #fff;
    border: 1px solid #DDD;
    padding: 18px 22px 22px;
    border-radius: 4px;
}
.benefit-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.benefit-card {
    background: #F8FAFD;
    border: 1px solid #DDE3EC;
    padding: 14px;
    border-radius: 4px;
    transition: border-color 0.15s, transform 0.1s;
}
.benefit-card:hover { border-color: #1F4E79; transform: translateY(-1px); }
.benefit-card .b-icon { font-size: 22px; margin-bottom: 6px; }
.benefit-card .b-title {
    font-size: 14px;
    font-weight: 700;
    color: #1F4E79;
    margin-bottom: 4px;
}
.benefit-card .b-sub {
    font-size: 12px;
    color: #666;
    line-height: 1.6;
}

/* 价格方案 */
.member-plans {
    background: #fff;
    border: 1px solid #DDD;
    padding: 18px 22px 22px;
    border-radius: 4px;
}
.plan-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.plan-card {
    background: #fff;
    border: 1px solid #DDD;
    border-radius: 4px;
    padding: 20px 18px;
    position: relative;
    transition: all 0.15s;
}
.plan-card:hover { border-color: #1F4E79; box-shadow: 0 2px 8px rgba(31,78,121,.08); }
.plan-card.plan-card-popular {
    border-color: #E5BE5C;
    box-shadow: 0 0 0 2px #FFF1C5 inset;
}
.plan-card.plan-card-best {
    border-color: #1F4E79;
    background: linear-gradient(180deg, #fff, #F4F7FB);
}
.plan-card .plan-flag {
    position: absolute;
    top: -10px;
    right: 14px;
    background: linear-gradient(180deg, #FFE293, #D69A1A);
    color: #4A2F05;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 2px;
}
.plan-card .plan-flag-best {
    background: #D24A4A;
    color: #fff;
}
.plan-card .plan-name {
    font-size: 14px;
    color: #1F4E79;
    font-weight: 700;
    margin-bottom: 8px;
}
.plan-card .plan-price {
    font-family: Tahoma, Arial;
    color: #333;
    margin: 0 0 14px;
    line-height: 1;
    border-bottom: 1px dashed #EEE;
    padding-bottom: 14px;
}
.plan-card .plan-price .curr { font-size: 16px; color: #888; }
.plan-card .plan-price .amount { font-size: 30px; font-weight: 800; color: #1F4E79; }
.plan-card .plan-price .unit { font-size: 12px; color: #888; margin-left: 4px; }
.plan-card .plan-price-gold .amount { color: #B8801A; }
.plan-card .plan-list { margin: 0 0 14px; padding: 0; list-style: none; }
.plan-card .plan-list li {
    padding: 4px 0 4px 18px;
    position: relative;
    font-size: 13px;
    color: #444;
    line-height: 1.6;
}
.plan-card .plan-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #2F9E44;
    font-weight: 700;
}
.plan-card .plan-cta {
    display: block;
    text-align: center;
    padding: 10px;
    border-radius: 3px;
    text-decoration: none;
    font-weight: 700;
    font-size: 13px;
    margin-top: 4px;
    transition: background 0.15s;
}
.plan-card .plan-cta-free {
    background: #fff;
    border: 1px solid #1F5D99;
    color: #1F5D99 !important;
}
.plan-card .plan-cta-free:hover { background: #F0F4FA; }
.plan-card .plan-cta-gold {
    background: linear-gradient(180deg, #FFE293, #D69A1A);
    color: #4A2F05 !important;
    border: 1px solid #B8801A;
}
.plan-card .plan-cta-gold:hover { background: linear-gradient(180deg, #FFD970, #B8801A); }

/* FAQ */
.member-faq {
    background: #fff;
    border: 1px solid #DDD;
    padding: 18px 22px 22px;
    border-radius: 4px;
}
.faq-card .faq-item {
    padding: 10px 14px;
    background: #F8FAFD;
    border-left: 3px solid #1F4E79;
    margin-bottom: 10px;
    font-size: 13px;
    line-height: 1.7;
}
.faq-card .faq-item b { color: #1F4E79; }
.faq-card .faq-item p { margin: 4px 0 0; color: #555; }
.faq-card .faq-item a { color: #1F5D99; }
.faq-card .faq-note {
    margin: 14px 0 0;
    padding: 10px 14px;
    background: #FEF8E8;
    border: 1px solid #FCE093;
    color: #7A5510;
    font-size: 12px;
    line-height: 1.7;
    border-radius: 3px;
}

/* Mobile */
@media (max-width: 768px) {
    .member-page { width: 100%; padding: 0 6px; box-sizing: border-box; }
    .member-hero { grid-template-columns: 1fr; padding: 18px; }
    .member-hero .hero-title { font-size: 20px; }
    .benefit-grid { grid-template-columns: repeat(2, 1fr); }
    .plan-grid { grid-template-columns: 1fr; }
}
@media (max-width: 414px) {
    .benefit-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   <x-icon-box> 共用：淡灰圓角方塊 + 深灰線性 icon
   取代旧 .b-icon (emoji) 和 .cat-card-icon (inline SVG)
   ========================================================================== */
.icon-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #F3F4F6;
    border-radius: 8px;
    color: #1F2937;
    flex-shrink: 0;
    line-height: 1;
}
.icon-box.icon-box-sm { width: 32px; height: 32px; border-radius: 6px; }
.icon-box.icon-box-md { width: 40px; height: 40px; }
.icon-box.icon-box-lg { width: 48px; height: 48px; border-radius: 10px; }

.icon-box svg {
    color: #1F2937;
    display: block;
}
.icon-box.icon-box-sm svg { width: 16px; height: 16px; }
.icon-box.icon-box-md svg { width: 20px; height: 20px; }
.icon-box.icon-box-lg svg { width: 24px; height: 24px; }

/* 分類卡：selected 時 icon-box 變淡藍 */
.cat-card.is-selected .icon-box { background: #E0EAF7; color: #1F4E79; }
.cat-card.is-selected .icon-box svg { color: #1F4E79; }

/* 移除舊 .b-icon emoji 樣式（v8 留下的）— 改為 icon-box 接管 */
.benefit-card .b-icon { display: none !important; }

/* 覆蓋舊 .cat-card .cat-card-icon — 統一到 .icon-box 規範 */
.cat-card .icon-box,
.cat-card .cat-card-icon {
    background: #F3F4F6 !important;
    border-radius: 8px !important;
    color: #1F2937 !important;
    width: 40px !important;
    height: 40px !important;
}
.cat-card .icon-box svg,
.cat-card .cat-card-icon svg {
    color: #1F2937 !important;
    width: 20px !important;
    height: 20px !important;
}
.cat-card.is-selected .icon-box,
.cat-card.is-selected .cat-card-icon {
    background: #E0EAF7 !important;
    color: #1F4E79 !important;
}
.cat-card.is-selected .icon-box svg,
.cat-card.is-selected .cat-card-icon svg {
    color: #1F4E79 !important;
}

/* ==========================================================================
   /user 会员中心 — 状态条 + 快捷入口（取代旧 user-action-bar + ua-btn）
   ========================================================================== */

/* Flash 通知 */
.uc-flash {
    width: 1000px;
    margin: 8px auto 0;
    background: #ECFDF5;
    border: 1px solid #A7F3D0;
    color: #065F46;
    padding: 10px 14px;
    font-size: 13px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.uc-flash-ico { width: 16px; height: 16px; flex: 0 0 auto; color: #047857; }

/* 状态条 */
.uc-bar {
    width: 1000px;
    margin: 8px auto 0;
    background: #fff;
    border: 1px solid #DDDDDD;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
}
.uc-bar .uc-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}
.uc-bar .uc-greet { color: #555; }
.uc-bar .uc-greet b { color: #1F4E79; font-weight: 700; }

/* 标签 badges */
.uc-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    line-height: 1.6;
    border: 1px solid transparent;
}
.uc-tag-gold {
    background: linear-gradient(180deg, #FFF1C5, #FCE093);
    color: #7A5510;
    border-color: #E5BE5C;
}
.uc-tag-admin {
    background: #FEF2F2;
    color: #B91C1C;
    border-color: #FECACA;
}

/* 右側 资料 / 退出 link */
.uc-bar .uc-right {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}
.uc-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #4B5563;
    font-size: 12px;
    padding: 5px 10px;
    border-radius: 3px;
    background: transparent;
    border: 1px solid transparent;
    text-decoration: none;
    cursor: pointer;
    font: inherit;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.uc-link svg { width: 14px; height: 14px; opacity: 0.85; }
.uc-link:hover {
    background: #F0F4FA;
    color: #1F4E79;
    border-color: #C7D5E8;
}
.uc-link-logout:hover {
    background: #FEF2F2;
    color: #B91C1C;
    border-color: #FECACA;
}

/* 快捷入口 */
.uc-quick {
    width: 1000px;
    margin: 10px auto 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}
.uc-btn {
    display: grid;
    grid-template-columns: 28px 1fr;
    grid-template-rows: auto auto;
    grid-column-gap: 10px;
    align-items: center;
    background: #fff;
    border: 1px solid #DDDDDD;
    color: #1F4E79;
    font-size: 14px;
    font-weight: 600;
    padding: 12px 16px;
    border-radius: 6px;
    text-decoration: none;
    transition: all .15s;
}
.uc-btn svg { width: 18px; height: 18px; color: #4B5563; grid-row: 1 / 3; grid-column: 1; align-self: center; }
.uc-btn span { grid-row: 1; grid-column: 2; line-height: 1.2; }
.uc-btn em {
    grid-row: 2; grid-column: 2;
    font-style: normal;
    font-weight: 400;
    font-size: 11.5px;
    color: #6B7280;
    margin-top: 2px;
    line-height: 1.3;
}
.uc-btn:hover {
    border-color: #1F5D99;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(31,78,121,.08);
}

/* 主操作 — 蓝色实心 */
.uc-btn.uc-btn-primary {
    background: linear-gradient(180deg, #1F5D99 0%, #1F4E79 100%);
    border-color: #1F4E79;
    color: #fff;
}
.uc-btn.uc-btn-primary svg { color: #fff; }
.uc-btn.uc-btn-primary em { color: rgba(255,255,255,.85); }
.uc-btn.uc-btn-primary:hover {
    background: linear-gradient(180deg, #2A6BB0 0%, #1F5D99 100%);
    border-color: #1F5D99;
}

/* 黄金会员 — 金色实心（已开通） */
.uc-btn.uc-btn-gold {
    background: linear-gradient(180deg, #F2B33D 0%, #D89328 100%);
    border-color: #C9851F;
    color: #fff;
}
.uc-btn.uc-btn-gold svg { color: #fff; }
.uc-btn.uc-btn-gold em { color: rgba(255,255,255,.9); }
.uc-btn.uc-btn-gold:hover {
    background: linear-gradient(180deg, #F5BD52 0%, #E0A032 100%);
}

/* 开通黄金会员 — 金边框（营销） */
.uc-btn.uc-btn-gold-ghost {
    background: #FFFBEB;
    border: 1px solid #F2B33D;
    color: #8B5A12;
}
.uc-btn.uc-btn-gold-ghost svg { color: #C9851F; }
.uc-btn.uc-btn-gold-ghost em { color: #A06A18; }
.uc-btn.uc-btn-gold-ghost:hover {
    background: #FEF3C7;
    border-color: #D89328;
}

/* 管理后台 */
.uc-btn.uc-btn-admin {
    background: #FAFBFC;
    border-color: #E5E7EB;
    color: #4B5563;
}
.uc-btn.uc-btn-admin:hover {
    background: #F3F4F6;
    border-color: #8B1B1B;
    color: #8B1B1B;
}
.uc-btn.uc-btn-admin:hover svg { color: #8B1B1B; }

/* ========== 统计卡片 ========== */
.uc-stats {
    width: 1000px;
    margin: 10px auto 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
.uc-stat {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 6px;
    padding: 14px 16px;
    transition: border-color .15s, transform .15s;
}
.uc-stat:hover {
    border-color: #1F5D99;
    transform: translateY(-1px);
}
.uc-stat-ic {
    flex: 0 0 40px;
    width: 40px; height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}
.uc-stat-ic svg { width: 20px; height: 20px; }
.uc-stat-ic-blue   { background: #EAF2FA; color: #1F4E79; }
.uc-stat-ic-green  { background: #ECFDF5; color: #047857; }
.uc-stat-ic-amber  { background: #FEF3C7; color: #B45309; }
.uc-stat-ic-purple { background: #F3E8FF; color: #6B21A8; }
.uc-stat-body { flex: 1; min-width: 0; }
.uc-stat-num {
    font-size: 22px;
    font-weight: 700;
    color: #1F2937;
    font-family: "Tahoma","Helvetica Neue",Arial,sans-serif;
    letter-spacing: .3px;
    line-height: 1.1;
}
.uc-stat-lbl {
    color: #6B7280;
    font-size: 12px;
    margin-top: 3px;
}

/* ========== 空状态（我的发布无数据） ========== */
.uc-empty-cell { padding: 0 !important; }
.uc-empty {
    padding: 44px 20px 50px;
    text-align: center;
    color: #6B7280;
}
.uc-empty-ic {
    width: 56px; height: 56px;
    margin-bottom: 14px;
    color: #C7D2DE;
}
.uc-empty-title {
    color: #1F2937;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 6px;
}
.uc-empty-sub {
    color: #9CA3AF;
    font-size: 13px;
    margin-bottom: 18px;
}
.uc-empty-cta {
    display: inline-block;
    padding: 9px 22px;
    background: linear-gradient(180deg, #1F5D99 0%, #1F4E79 100%);
    color: #fff !important;
    font-size: 13.5px;
    font-weight: 600;
    border-radius: 4px;
    text-decoration: none;
    transition: all .15s;
    box-shadow: 0 1px 2px rgba(31,78,121,.18);
}
.uc-empty-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(31,78,121,.25);
    text-decoration: none;
}

/* 主区域间距 */
.uc-bar + .uc-quick { margin-top: 10px; }
.uc-quick + .uc-stats { margin-top: 10px; }
.uc-stats + .main-area { margin-top: 10px; }
.uc-quick + .main-area { margin-top: 10px; }

@media (max-width: 1024px) {
    .uc-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .uc-stats { width: 100% !important; grid-template-columns: repeat(2, 1fr); margin-left: 0; margin-right: 0; padding: 0 6px; }
    .uc-quick { width: 100% !important; grid-template-columns: 1fr; margin-left: 0; margin-right: 0; padding: 0 6px; }
    .uc-empty { padding: 30px 14px 36px; }
    .uc-empty-ic { width: 44px; height: 44px; }
}

/* Mobile */
@media (max-width: 768px) {
    .uc-flash, .uc-bar, .uc-quick { width: 100% !important; margin-left: 0; margin-right: 0; }
    .uc-bar { flex-wrap: wrap; padding: 10px 12px; }
    .uc-bar .uc-left { flex-wrap: wrap; gap: 6px; width: 100%; }
    .uc-bar .uc-right { margin-left: 0; width: 100%; justify-content: flex-end; }
    .uc-quick { padding: 0 6px; }
    .uc-btn { flex: 1; justify-content: center; padding: 9px 8px; font-size: 12px; }
    .uc-btn svg { width: 14px; height: 14px; }
}

/* ============ 分頁 layout — 桌面盡量同一行，內容過長允許換行不裁切 ============
 * 用 .pager.classic-pagination 雙 class 覆蓋舊 .pager 規則的 padding。
 * 桌面：flex 一行；若內容超出寬度 → flex-wrap 換行（不橫向溢出）。
 * 「跳到 N 页 GO」一組永不拆。 */
.pager.classic-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;          /* 內容過長允許換行，不裁切 */
    gap: 4px 6px;
    padding: 8px 12px;        /* 覆蓋舊 .pager 14px 12px */
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: visible;
    white-space: nowrap;
}

.classic-pagination .pagination-info,
.classic-pagination .pagination-links,
.classic-pagination .pagination-jump {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
    flex: 0 0 auto;
    min-width: 0;
    max-width: 100%;
    margin: 0;                /* 覆蓋舊 .pager-info margin-right:16px */
}

.classic-pagination .pagination-info {
    color: #666;
    font-size: 12px;
}
.classic-pagination .pagination-info b {
    color: #1F4E79;
    font-family: Tahoma, Arial;
}

/* 縮緊頁碼按鈕 — 覆蓋舊 .pager a/.pager span 的 padding 0 9px / margin 0 2px */
.classic-pagination .pagination-links a,
.classic-pagination .pagination-links span {
    min-width: 26px;
    height: 26px;
    line-height: 24px;
    padding: 0 6px;
    margin: 0 1px;
    box-sizing: border-box;
}

.classic-pagination .pagination-jump {
    color: #888;
}
.classic-pagination .pagination-jump input[type="number"] {
    width: 42px;
    height: 26px;
    padding: 0 4px;
    text-align: center;
    display: inline-block;
    margin: 0 2px;
    border: 1px solid #d8d8d8;
    font-family: Tahoma, Arial;
    font-size: 12px;
    box-sizing: border-box;
    vertical-align: middle;
    flex: 0 0 auto;
}
.classic-pagination .pagination-jump button {
    height: 26px;
    padding: 0 8px;
    margin-left: 2px;
    border: 1px solid #d8d8d8;
    background: #f5f5f5;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    flex: 0 0 auto;
}

/* 手機版：靠左排列；「跳到 N 页 GO」一組仍 nowrap */
@media (max-width: 768px) {
    .pager.classic-pagination {
        justify-content: flex-start;
        padding: 8px 10px;
    }
    .classic-pagination .pagination-jump {
        flex-wrap: nowrap;
    }
}

/* ==========================================================================
 * 廣告欄位統一顯示規則
 * - 圖片 contain 不變形、置中、不撐爆容器
 * - 每個 position 有固定高度
 * - placeholder（無啟用廣告時）才顯示斜線底
 * ========================================================================== */

/* 通用：所有 .ad 內的廣告圖、連結都受容器約束 */
.ad-slot {
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    background: #f5f5f5;
    border: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;            /* 滿版填滿：圖片貼齊容器邊緣 */
    /* 取消舊 .ad 的灰底斜線（圖片廣告時別透出）*/
    background-image: none !important;
}
.ad-slot.is-placeholder {
    background: #e8e8e8;
    border-color: #d3d3d3;
    color: #999;
    /* 只有 placeholder 才畫斜線 */
    background-image: linear-gradient(135deg, transparent 49.5%, #d8d8d8 49.5%, #d8d8d8 50.5%, transparent 50.5%),
                      linear-gradient(45deg,  transparent 49.5%, #d8d8d8 49.5%, #d8d8d8 50.5%, transparent 50.5%) !important;
    background-size: 100% 100%;
}
.ad-slot .ad-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
}
.ad-slot .ad-link:hover { text-decoration: none; }

/* 圖片預設規則 — 預設 cover 滿版填滿，不變形不拉伸 */
.ad-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}
/* 顯式 cover 與預設一致 */
.ad-img.fit-cover    { width: 100%; height: 100%; object-fit: cover; }
/* contain — 完整顯示不裁切，周圍可能留白 */
.ad-img.fit-contain {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    margin: auto;
}
.ad-img.fit-original { width: auto; height: auto; max-width: none; max-height: none; object-fit: none; }

/* ---------- 按 position 設固定高度 ---------- */
.ad-slot--home_top_a,
.ad-slot--home_top_b,
.ad-slot--home_top_c   { height: 80px; }

.ad-slot--home_middle_1,
.ad-slot--home_middle_2 { height: 80px; }

.ad-slot--home_inline_1,
.ad-slot--home_inline_2 { height: 90px; }

.ad-slot--home_right_180,
.ad-slot--category_right,
.ad-slot--detail_sidebar { width: 100%; max-width: 180px; height: 180px; }

.ad-slot--home_bottom_1,
.ad-slot--home_bottom_2 {
    height: auto;
    min-height: 90px;
    background: #fff;
    box-sizing: border-box;
}
/* 底部双 banner 内图：完整显示不裁切，宽度撑满 495px 半版 */
.ad-slot--home_bottom_1 .ad-img,
.ad-slot--home_bottom_2 .ad-img {
    width: 100% !important;
    height: auto !important;
    max-height: 160px;
    object-fit: contain !important;
    display: block;
}

/* ============================================================
 * 分類頁 / 搜尋頁 / 詳情頁相關推薦列表 — 新版「发布 / 到期」對齊
 * 對照截圖：表頭米色、發布黑、到期紅、地區藍、查看按鈕藍框
 * ============================================================ */
.cat-table thead th {
    background: #FFF8EC !important;        /* 米色表頭 */
    border-bottom: 2px solid #1F4E79 !important;
    color: #1F4E79 !important;
}
/* 日期欄寬一點放下「发布」「到期」兩行 + label（仅桌面，手机被下方 @media 覆盖）*/
@media (min-width: 769px) {
    .cat-table .th-date,
    .cat-table .td-date { width: 150px !important; }
}

/* 日期行：label 左 + value 右，緊湊 2 行 */
.cat-table .td-date .d-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-family: Tahoma, Arial;
    font-size: 12px;
    line-height: 1.5;
}
.cat-table .td-date .d-lbl {
    flex: 0 0 28px;
    color: #888;
    font-size: 11px;
}
.cat-table .td-date .d-lbl-mute { color: #aaa; }
.cat-table .td-date .d-row-published .d-val { color: #111; font-weight: 600; }
.cat-table .td-date .d-row-expires   .d-val { color: #D24A4A; font-weight: 700; }

/* 查看按鈕：藍框白底（取代實心藍） */
.cat-table .td-action .view-btn {
    background: #fff !important;
    color: #1F5D99 !important;
    border: 1px solid #1F5D99 !important;
    font-weight: 600;
}
.cat-table .td-action .view-btn:hover {
    background: #1F5D99 !important;
    color: #fff !important;
}

/* ---------- 手机版：紧凑 2 行卡片（标题+地区 / 日期+查看）+ 支持点击展开内容 ---------- */
@media (max-width: 768px) {
    /* 1. 容器去边 + 隐藏表头（保留展开行，点击 title 可下拉显示内容）*/
    .cat-table-wrap { border: none !important; padding: 0; background: transparent; overflow: visible; }
    /* 强制 table / tbody / tr / td 全部变成 block */
    .cat-table,
    .cat-table tbody,
    .cat-table tr,
    .cat-table td {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        box-sizing: border-box;
    }
    .cat-table thead,
    .cat-table colgroup { display: none !important; }
    /* 展开行：默认 hidden 属性隐藏；点击 title 后 JS 移除 hidden → 显示内容 */
    .cat-table tr.row-expand[hidden] { display: none !important; }
    .cat-table tr.row-expand:not([hidden]) {
        display: block !important;
        margin: -8px 0 8px;     /* 紧贴上方卡片 */
        padding: 12px 14px;
        background: #FAFBFC !important;
        border: 1px solid #E5E7EB !important;
        border-top: none !important;
        border-radius: 0 0 4px 4px;
    }
    .cat-table tr.row-expand .td-expand-cell {
        padding: 0 !important;
    }
    .cat-table tr.row-expand .exp-wrap {
        font-size: 13px;
        line-height: 1.6;
    }
    .cat-table tr.row-expand .exp-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-bottom: 10px;
        font-size: 11px;
    }
    .cat-table tr.row-expand .exp-title { font-size: 14px; margin-top: 4px; }
    .cat-table tr.row-expand .exp-body  { font-size: 12px; line-height: 1.7; color: #444; }
    /* 上方主行展开时去掉圆角下边（视觉连接展开行）*/
    .cat-table tbody tr.row-open {
        border-radius: 4px 4px 0 0 !important;
        margin-bottom: 0 !important;
    }

    /* 2. 每个数据行变独立卡片（用 position 锚定 region/action 浮右）*/
    .cat-table tbody tr {
        position: relative;
        margin: 0 0 8px 0;
        padding: 10px 12px 10px 12px;
        background: #fff !important;
        border: 1px solid #E5E7EB !important;
        border-radius: 4px;
        overflow: hidden;     /* BFC 包住浮动 */
        min-height: 78px;
    }
    .cat-table tbody td {
        padding: 0 !important;
        border: none !important;
        text-align: left;
    }
    .cat-table tbody td.td-expand { display: none !important; }

    /* 3. Row 1：标题（左） + 地区（右上角）*/
    .cat-table tbody td.td-title {
        padding-right: 90px !important;   /* 留空给右上角地区 */
        margin-bottom: 8px;
        white-space: normal !important;
        overflow: visible !important;
        min-height: 22px;
    }
    .cat-table tbody td.td-title .title-cell {
        display: flex;
        align-items: flex-start;
        gap: 6px;
    }
    .cat-table tbody td.td-title .badge-flag,
    .cat-table tbody td.td-title .badge-rec {
        flex: 0 0 auto;
        margin-top: 2px;
        font-size: 11px;
        padding: 1px 5px;
    }
    .cat-table tbody td.td-title button.title-toggle {
        white-space: normal !important;
        text-align: left;
        font-weight: 600;
        color: #333;
        font-size: 14px;
        line-height: 1.4;
        word-break: break-word;
        flex: 1;
        padding: 0;
    }
    .cat-table tbody td.td-region {
        position: absolute !important;
        top: 12px;
        right: 12px;
        width: auto !important;
        max-width: 90px;
        font-size: 11px;
        color: #1F5D99 !important;
        font-weight: 700;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .cat-table tbody td.td-region::before { content: ""; }  /* 不要"地区"前缀 */

    /* 4. Row 2：日期（左，发布 + 到期 同行）+ 查看按钮（右）*/
    .cat-table tbody td.td-date {
        padding-right: 78px !important;   /* 留空给右下查看按钮 */
        font-size: 12px;
        line-height: 1.4;
    }
    .cat-table tbody td.td-date .d-row {
        display: inline-block;
        margin-right: 14px;
        font-size: 12px;
    }
    .cat-table tbody td.td-date .d-row:last-child { margin-right: 0; }
    .cat-table tbody td.td-date .d-row .d-lbl {
        color: #888;
        margin-right: 3px;
        font-size: 11px;
    }
    .cat-table tbody td.td-date .d-row-published .d-val { color: #111; font-weight: 600; }
    .cat-table tbody td.td-date .d-row-expires .d-val   { color: #D24A4A; font-weight: 700; }
    .cat-table tbody td.td-action {
        position: absolute !important;
        bottom: 10px;
        right: 12px;
        width: auto !important;
        text-align: right;
    }
    .cat-table tbody td.td-action .view-btn {
        padding: 4px 14px;
        font-size: 12px;
    }
}

.ad-slot--home_bottom_full,
.ad-slot--footer_banner {
    width: 1000px;          /* 与首页 1000px 主版心同宽 */
    max-width: 100%;         /* 视口 <1000px 时自动缩 */
    margin: 8px auto 0;      /* 桌面置中 */
    height: auto;            /* 高度由内图自适应，避免文字被裁 */
    min-height: 90px;
    box-sizing: border-box;
    background: #fff;        /* 图片若 contain 留白时背景白色 */
}
/* 底部全宽 banner 内图：完整显示不裁切，宽度撑满版心；高度由原图比例决定 */
.ad-slot--home_bottom_full .ad-img,
.ad-slot--footer_banner .ad-img {
    width: 100% !important;
    height: auto !important;
    max-height: 200px;
    object-fit: contain !important;
    display: block;
}

.ad-slot--category_inline { width: 100%; height: 80px; }

.ad-slot--detail_bottom { width: 100%; height: 90px; margin-top: 14px; }

/* 詳情頁底部廣告組（多個堆疊 + 間距）*/
.detail-bottom-ad + .detail-bottom-ad { margin-top: 8px; }

/* ---------- 手機版：堆疊、不橫向溢出 ---------- */
@media (max-width: 768px) {
    .top-ads {
        grid-template-columns: 1fr !important;
        width: 100% !important;
    }
    .top-ads .ad-slot { height: 70px; }

    .mid-ads-2 {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }
    .mid-ads-2 .ad-slot { height: 72px; }

    .main-banner {
        grid-template-columns: 1fr !important;
        gap: 6px;
    }
    .main-banner .ad-slot { height: 76px; }

    .bottom-ads {
        grid-template-columns: 1fr !important;
        gap: 6px;
    }
    .bottom-ads .ad-slot { height: 80px; }

    /* 右側 180 → 改 row 排列、撐滿寬度但限高 */
    .side-ads .ad-slot--home_right_180,
    .side-ads .ad-slot--detail_sidebar {
        width: 100% !important;
        max-width: 100% !important;
        height: 120px;
    }
    .side-ad-grid .ad-slot--category_right {
        width: 100% !important;
        max-width: 100% !important;
        height: 120px;
    }
}

/* ============================================================
 * 首頁三個推薦卡片（home_recommend_1/2/3）
 * 兩種模式：完整圖片廣告 / 文字卡片 + 背景圖
 * - 保留外層 .ad.tinted-1/2/3 既有高度與 grid 由 .mid-ads-3 控制
 * - 三張卡片高度一致、按鈕位置一致
 * ============================================================ */

/* 共通：rec-card 結構必須與 .mid-ads-3 容器尺寸一致 */
.rec-card {
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}
.rec-card .rec-card-link {
    display: flex;
    width: 100%;
    height: 100%;
    text-decoration: none;
    align-items: center;
    justify-content: center;
    color: inherit;
}
.rec-card .rec-card-link:hover { text-decoration: none; color: inherit; }

/* ---------- 模式 A：完整圖片廣告 ---------- */
.rec-card--image {
    padding: 0;
    background: #f5f5f5;
}
.rec-card-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}
.rec-card-img.fit-contain {
    object-fit: contain;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
}

/* ---------- 模式 B：文字卡片 + 背景圖 ---------- */
.rec-card--text {
    text-align: center;
}
.rec-card--text .ad-content {
    position: relative;
    z-index: 2;
    padding: 18px;
    width: 100%;
    box-sizing: border-box;
}
/* 卡片色系（無背景圖時當底色；有背景圖時忽略 — bg image 蓋過）*/
.rec-card--text.color-white  { background-color: #ffffff; }
.rec-card--text.color-orange { background-color: #fff5e9; }
.rec-card--text.color-blue   { background-color: #eaf2fb; }
.rec-card--text.color-gold   { background-color: #fff8df; }
.rec-card--text.color-green  { background-color: #eafaf0; }

/* 文字顏色 */
.rec-card--text.text-dark  .kicker { color: #999; }
.rec-card--text.text-dark  h3 { color: #1F4E79; }
.rec-card--text.text-dark  p  { color: #777; }
.rec-card--text.text-dark  .cta {
    background: #1F4E79; color: #fff;
}
.rec-card--text.text-light .kicker { color: rgba(255,255,255,.85); }
.rec-card--text.text-light h3 { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.rec-card--text.text-light p  { color: rgba(255,255,255,.95); text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.rec-card--text.text-light .cta {
    background: #fff; color: #1F4E79;
}

/* 遮罩 — 浮在背景圖上，讓文字更清楚 */
.rec-card-overlay {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
}
.rec-card--text.text-light .rec-card-overlay.overlay-light  { background: rgba(0,0,0,.25); }
.rec-card--text.text-light .rec-card-overlay.overlay-medium { background: rgba(0,0,0,.45); }
.rec-card--text.text-light .rec-card-overlay.overlay-dark   { background: rgba(0,0,0,.6);  }
.rec-card--text.text-dark  .rec-card-overlay.overlay-light  { background: rgba(255,255,255,.4); }
.rec-card--text.text-dark  .rec-card-overlay.overlay-medium { background: rgba(255,255,255,.6); }
.rec-card--text.text-dark  .rec-card-overlay.overlay-dark   { background: rgba(255,255,255,.78); }

/* 按鈕（CTA）統一外觀 */
.rec-card--text .cta {
    display: inline-block;
    padding: 6px 18px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 2px;
    margin-top: 10px;
    letter-spacing: 1px;
    text-decoration: none;
}

/* ---------- 手機版 ---------- */
@media (max-width: 768px) {
    .rec-card--text .ad-content { padding: 12px 14px; }
    .rec-card--text h3 { font-size: 16px !important; line-height: 1.3; }
    .rec-card--text p  { font-size: 12px !important;
                         display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
                         overflow: hidden; }
    .rec-card--text .cta { padding: 6px 14px; font-size: 12px; }
}

/* ---------- header action buttons：圖標 + 文字（桌面/手機通用） ---------- */
.header-actions .btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.header-actions .btn > .btn-ic {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    color: currentColor;
}
.header-actions .btn > span { line-height: 1; }

/* ---------- region chips 兼容 <a> 元素（首頁地區快捷按鈕） ---------- */
a.region-chip {
    display: inline-flex !important;
    align-items: center;
    text-decoration: none !important;
}
a.region-chip:hover { text-decoration: none !important; }

/* ---------- 首頁分類列表小標籤 — 經典低飽和分類色（每類獨立配色） ---------- */
/* 共用基底：保留原 .listing li .tag 的 width:38px/font-size:11px/padding:1px 0 不動，僅覆寫顏色 */
.listing li .tag,
.tag-hire, .tag-seek, .tag-sell, .tag-rent, .tag-buy,
.tag-trans, .tag-svc, .tag-info {
    font-weight: 700 !important;
    border-radius: 2px !important;
    white-space: nowrap;
    flex: 0 0 auto;
}
/* 招聘 — 淡藍 */
.tag-hire  { background: #E3EEF7 !important; border: 1px solid #BCD4E8 !important; color: #1F5D99 !important; }
/* 求职 — 淡紫 */
.tag-seek  { background: #ECEAF6 !important; border: 1px solid #D6CFE5 !important; color: #6A4FA8 !important; }
/* 出租 — 淡綠 */
.tag-rent  { background: #E5F2E5 !important; border: 1px solid #BFD9BF !important; color: #2E7D32 !important; }
/* 出售 — 淡橙 */
.tag-sell  { background: #FAEBD9 !important; border: 1px solid #E8C998 !important; color: #B25E1A !important; }
/* 求购 — 淡赭（保留兼容老 class） */
.tag-buy   { background: #F2E6DC !important; border: 1px solid #D8C2B0 !important; color: #8B4D2B !important; }
/* 服务 — 淡青 */
.tag-svc   { background: #DEF1F0 !important; border: 1px solid #B5DCDB !important; color: #1F7B7B !important; }
/* 转让 — 淡琥珀 */
.tag-trans { background: #FBEBD0 !important; border: 1px solid #E5C893 !important; color: #A66E2E !important; }
/* 信息 / 其他 — 淡灰藍 */
.tag-info  { background: #E6EAEF !important; border: 1px solid #C5CCD5 !important; color: #4F5C6B !important; }

/* ---------- 「顶」「黄」标记 — 经典版风格 ---------- */
/* 首页 module listing：原 .title.top::before 改红色（顶）+ 新增 .title.gold::before 金色（黄） */
.listing li .title.top::before {
    content: "顶";
    display: inline-block;
    background: #D24A4A;
    color: #fff;
    font-size: 10px;
    padding: 0 4px;
    margin-right: 6px;
    border-radius: 2px;
    font-weight: 700;
    transform: translateY(-1px);
}
.listing li .title.gold::before {
    content: "黄";
    display: inline-block;
    background: #E8A317;
    color: #fff;
    font-size: 10px;
    padding: 0 4px;
    margin-right: 6px;
    border-radius: 2px;
    font-weight: 700;
    transform: translateY(-1px);
}
/* 同時 top + gold 時兩個 badge 都要顯示 — 用 .top.gold 雙 selector 串聯 */
.listing li .title.top.gold::before {
    content: "顶 黄";
    letter-spacing: 1px;
    background: linear-gradient(90deg, #D24A4A 0 50%, #E8A317 50% 100%);
}

/* 列表表格（分类页 / 搜索页 list-table）— 標題旁紅/金小 badge */
.badge-flag {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 1px 5px;
    margin-right: 4px;
    border-radius: 2px;
    color: #fff;
    line-height: 1.4;
    vertical-align: 1px;
}
.badge-flag-top  { background: #D24A4A; }
.badge-flag-gold { background: #E8A317; }

/* ---------- 发布信息页：「推荐广告收费说明」— 視覺與 .post-card / .cat-card 系統對齊 ---------- */
/* 外層 .post-pricing-banner 已套 .post-card 類，不需重複 background/border。
   .post-card-head h2 / small 已有藍色 tick 與灰色副標 — 完全沿用。*/

/* 价格卡 grid — 與 .cat-grid 同 3 欄佈局（5 卡自動 wrap 至 3+2）*/
.post-pricing-banner .ppb-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 6px;
}

/* 单卡片 — 套用 .cat-card 同一套設計 */
.post-pricing-banner .ppb-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid #DDDDDD;
    border-radius: 4px;
    min-height: 64px;
    cursor: default;  /* 仅信息展示，不可点击 — 避免误导 */
}
/* 移除 hover 视觉反馈：这 5 张卡片只是收费说明，不是按钮 */
/* icon 容器 — 與 .cat-card-icon 一致：36×36 浅藍底 + 圓角 */
.post-pricing-banner .ppb-card-icon {
    flex: 0 0 auto;
    width: 36px; height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #F4F7FB;
    border-radius: 4px;
    color: #1F5D99;
}
.post-pricing-banner .ppb-card-icon svg { width: 18px; height: 18px; }

.post-pricing-banner .ppb-card-body { flex: 1; min-width: 0; line-height: 1.4; }
.post-pricing-banner .ppb-cat {
    font-size: 14px;
    font-weight: 700;
    color: #333;     /* 與 .cat-card-name 同 */
    line-height: 1.4;
}
.post-pricing-banner .ppb-price {
    color: #1F5D99;  /* 改藍色強調，移除橙色 */
    font-size: 12px;
    font-weight: 600;
    margin-top: 3px;
    line-height: 1.5;
}
.post-pricing-banner .ppb-note {
    color: #999;     /* 與 .cat-card-sub 同 */
    font-size: 11px;
    margin-top: 2px;
    line-height: 1.5;
}

/* 付款方式 + QR 区 */
.post-pricing-banner .ppb-pay {
    display: grid;
    grid-template-columns: 1fr 180px;
    gap: 20px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #E5EBF2;
    align-items: start;
}
.post-pricing-banner .ppb-pay-title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 700;
    color: #1F4E79;
}
.post-pricing-banner .ppb-pay-icon { width: 16px; height: 16px; color: #1F5D99; }

.post-pricing-banner .ppb-pay-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 4px 0;
    font-size: 13px;
}
.post-pricing-banner .ppb-pay-lbl {
    flex: 0 0 80px;
    color: #666;
    font-weight: 600;
}
.post-pricing-banner .ppb-pay-val.ppb-mono {
    font-family: Consolas, Menlo, "PingFang SC", monospace;
    color: #1F4E79;
    font-weight: 600;
    word-break: break-all;
    user-select: all;
    background: #F4F7FB;
    padding: 2px 8px;
    border-radius: 4px;
}
.post-pricing-banner .ppb-pay-hint {
    color: #999;
    font-size: 12px;
    margin: 10px 0 0;
}

/* QR Code 占位 / 实图 */
.post-pricing-banner .ppb-qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.post-pricing-banner .ppb-qr-img {
    width: 160px;
    height: 160px;
    object-fit: contain;
    border: 1px solid #DDD;
    border-radius: 4px;
    background: #fff;
    padding: 6px;
}
.post-pricing-banner .ppb-qr-empty {
    width: 160px;
    height: 160px;
    border: 1px dashed #C9D2DC;
    border-radius: 4px;
    background: #F4F7FB;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #8A99A8;
    padding: 10px;
    box-sizing: border-box;
    gap: 5px;
}
.post-pricing-banner .ppb-qr-icon-svg {
    width: 32px; height: 32px;
    color: #1F5D99;
}
.post-pricing-banner .ppb-qr-label {
    font-size: 13px;
    font-weight: 700;
    color: #1F4E79;
}
.post-pricing-banner .ppb-qr-tip { font-size: 10px; color: #999; line-height: 1.4; }
.post-pricing-banner .ppb-qr-caption {
    font-size: 12px;
    color: #666;
    text-align: center;
}

/* 手机版 */
@media (max-width: 768px) {
    .post-pricing-banner .ppb-grid { grid-template-columns: 1fr; }
    .post-pricing-banner .ppb-pay {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .post-pricing-banner .ppb-qr { order: 2; }
    .post-pricing-banner .ppb-pay-row { flex-wrap: wrap; }
    .post-pricing-banner .ppb-pay-lbl { flex: 0 0 auto; }
}

/* ---------- Footer：移除標題旁橙色下箭頭（chevron） ---------- */
.site-foot-v2 .foot-h-chev { display: none !important; }

/* Footer QR：真實圖（下載 APP 二维码） */
.site-foot-v2 .foot-qr-img {
    width: 78px; height: 78px;
    background: #fff;
    border: 1px solid #D8DEE8;
    border-radius: 2px;
    object-fit: contain;
    padding: 3px;
    box-sizing: border-box;
    flex: 0 0 auto;
}

/* App Store / Google Play 官方风格 badge — 黑底圆角 + 双行文字 */
.site-foot-v2 .app-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #111;
    color: #fff;
    text-decoration: none;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid #111;
    min-height: 36px;
    transition: background .15s, border-color .15s;
}
.site-foot-v2 .app-badge:hover {
    background: #1F4E79;
    border-color: #1F4E79;
    color: #fff;
    text-decoration: none;
}
.site-foot-v2 .app-badge-ic {
    width: 20px; height: 20px;
    flex: 0 0 20px;
    color: #fff;
}
.site-foot-v2 .app-badge-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    text-align: left;
}
.site-foot-v2 .app-badge-sm {
    font-size: 9px;
    color: #ccc;
    letter-spacing: .3px;
    text-transform: uppercase;
}
.site-foot-v2 .app-badge-lg {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .2px;
}

/* ---------- 会员页 · 推荐广告收费说明 ---------- */
.member-pricing { margin-top: 28px; }
.member-pricing .ad-pricing-sub {
    margin: -4px 0 14px;
    padding: 0 6px;
    color: #6B7280;
    font-size: 12.5px;
    letter-spacing: .2px;
}
.ad-pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
.ap-card {
    background: linear-gradient(180deg, #FFF 0%, #F7FAFE 100%);
    border: 1px solid #DDE3EE;
    border-radius: 8px;
    padding: 14px 16px 12px;
    box-shadow: 0 1px 2px rgba(31,78,121,.04);
    display: flex;
    flex-direction: column;
    min-height: 110px;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.ap-card:hover {
    border-color: #1F4E79;
    box-shadow: 0 4px 10px rgba(31,78,121,.08);
    transform: translateY(-1px);
}
.ap-cat-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px dashed #E5E7EB;
}
.ap-icon {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #EAF2FA;
    color: #1F4E79;
    border-radius: 6px;
    flex: 0 0 26px;
}
.ap-icon svg { width: 15px; height: 15px; }
.ap-cat {
    font-size: 14px;
    font-weight: 700;
    color: #1F2937;
    letter-spacing: .2px;
}
.ap-price {
    color: #B33636;
    font-size: 14px;
    font-weight: 600;
    margin: 2px 0 6px;
}
.ap-price b {
    font-family: "Tahoma","Helvetica Neue",Arial,sans-serif;
    font-size: 16px;
    letter-spacing: .2px;
}
.ap-note {
    color: #6B7280;
    font-size: 12px;
    line-height: 1.5;
    margin-top: auto;
}

@media (max-width: 1024px) {
    .ad-pricing-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .ad-pricing-grid { grid-template-columns: 1fr; gap: 10px; }
    .ap-card { padding: 12px 14px 10px; min-height: auto; }
}

/* ---------- 全站 flash 提示（发布成功 / 操作反馈） ---------- */
.site-flash {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    min-width: 320px;
    max-width: calc(100vw - 32px);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,.18);
    animation: site-flash-in .35s cubic-bezier(.34,1.56,.64,1);
    overflow: hidden;
}
.site-flash-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px 12px 14px;
    font-size: 14px;
    line-height: 1.5;
}
.site-flash-ic {
    flex: 0 0 24px;
    width: 24px; height: 24px;
    display: inline-flex; align-items: center; justify-content: center;
}
.site-flash-ic svg { width: 22px; height: 22px; }
.site-flash-msg { flex: 1; min-width: 0; font-weight: 500; }
.site-flash-link {
    flex: 0 0 auto;
    color: inherit;
    text-decoration: underline;
    font-size: 13px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 4px;
    background: rgba(255,255,255,.18);
    transition: background .15s;
}
.site-flash-link:hover { background: rgba(255,255,255,.32); text-decoration: underline; }
.site-flash-close {
    flex: 0 0 auto;
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
    padding: 2px 6px;
    opacity: .7;
    border-radius: 4px;
    transition: opacity .15s, background .15s;
}
.site-flash-close:hover { opacity: 1; background: rgba(255,255,255,.18); }
.site-flash-success { background: linear-gradient(180deg, #10B981 0%, #059669 100%); color: #fff; }
.site-flash-error   { background: linear-gradient(180deg, #EF4444 0%, #DC2626 100%); color: #fff; }
.site-flash-info    { background: linear-gradient(180deg, #1F5D99 0%, #1F4E79 100%); color: #fff; }
@keyframes site-flash-in {
    from { opacity: 0; transform: translate(-50%, -16px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}
.site-flash-leave { animation: site-flash-out .35s ease-in forwards; }
@keyframes site-flash-out {
    from { opacity: 1; transform: translate(-50%, 0); }
    to   { opacity: 0; transform: translate(-50%, -16px); }
}
@media (max-width: 768px) {
    .site-flash { top: 12px; min-width: auto; width: calc(100vw - 24px); }
    .site-flash-inner { padding: 10px 12px; font-size: 13px; }
    .site-flash-link { padding: 3px 6px; font-size: 12px; }
}

/* ---------- 个人资料页 ---------- */
.profile-section {
    padding: 20px 24px 24px;
    background: #fff;
}
.profile-sub {
    color: #6B7280;
    font-size: 13px;
    margin: 0 0 16px;
    line-height: 1.6;
}
.profile-sub-danger {
    padding: 10px 14px;
    background: #FEF2F2;
    border-left: 3px solid #D24A4A;
    border-radius: 0 4px 4px 0;
    color: #991B1B;
}
.profile-form { max-width: 540px; }
.profile-row { margin-bottom: 14px; }
.profile-row label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    color: #374151;
    font-weight: 600;
}
.profile-row .req { color: #D24A4A; margin-left: 2px; }
.profile-row input {
    width: 100%;
    padding: 9px 10px;
    border: 1px solid #D1D5DB;
    border-radius: 4px;
    font-size: 14px;
    font-family: inherit;
    background: #fff;
    box-sizing: border-box;
    transition: border-color .15s;
}
.profile-row input:focus {
    outline: none;
    border-color: #1F4E79;
}
.profile-row .profile-static {
    padding: 9px 10px;
    background: #F9FAFB;
    border: 1px solid #E5E7EB;
    border-radius: 4px;
    color: #4B5563;
    font-size: 13px;
}
.profile-row-meta label { color: #9CA3AF; }
.profile-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 18px;
}
.profile-err {
    margin-top: 6px;
    color: #B91C1C;
    font-size: 12px;
}
.profile-warn {
    margin-top: 8px;
    padding: 8px 12px;
    background: #FFFBEB;
    border-left: 3px solid #F59E0B;
    color: #78350F;
    font-size: 12.5px;
    border-radius: 0 4px 4px 0;
}
.profile-ok {
    margin-top: 6px;
    color: #065F46;
    font-size: 12.5px;
}
.profile-link-btn {
    display: inline;
    background: none;
    border: 0;
    padding: 0;
    color: #1F4E79;
    text-decoration: underline;
    cursor: pointer;
    font: inherit;
}
.btn-danger {
    padding: 9px 18px;
    background: #D24A4A;
    color: #fff;
    border: 1px solid #B33636;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}
.btn-danger:hover { background: #B33636; }
.module-danger { border-top: 3px solid #FEE2E2; }

/* ---------- 静态页 H3 子标题 ---------- */
.static-page .static-h3 {
    margin: 14px 0 6px;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
}

@media (max-width: 768px) {
    .profile-section { padding: 14px 14px 18px; }
}

/* ---------- 静态页（about / help / contact / faq / pricing / etc.） ---------- */
.static-page {
    padding: 20px 24px 26px;
    line-height: 1.85;
    color: #333;
    font-size: 14px;
}
.static-page .lead {
    padding: 12px 14px;
    margin: 0 0 18px;
    background: #F3F6FA;
    border-left: 3px solid #1F4E79;
    border-radius: 0 4px 4px 0;
    font-size: 14px;
    color: #1F2937;
}
.static-page .static-h2 {
    margin: 22px 0 10px;
    padding: 0 0 6px;
    border-bottom: 1px solid #E5E7EB;
    font-size: 16px;
    font-weight: 700;
    color: #1F4E79;
    letter-spacing: .3px;
}
.static-page .static-h2:first-child { margin-top: 0; }
.static-page .static-list {
    margin: 8px 0 14px;
    padding-left: 22px;
}
.static-page .static-list li { margin: 4px 0; }
.static-page .static-note {
    color: #6B7280;
    font-size: 12.5px;
    margin: 6px 0;
}
.static-page .static-link {
    color: #1F4E79;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px dashed #1F4E79;
}
.static-page .static-link:hover { color: #D24A4A; border-color: #D24A4A; }
.static-page a { color: #1F4E79; }
.static-page a:hover { color: #D24A4A; }

/* FAQ 折叠卡 */
.static-faq {
    margin: 0 0 10px;
    padding: 10px 14px;
    background: #FAFBFC;
    border: 1px solid #E5E7EB;
    border-radius: 4px;
}
.static-faq summary {
    cursor: pointer;
    font-weight: 600;
    color: #1F4E79;
    list-style: none;
    padding-left: 18px;
    position: relative;
}
.static-faq summary::before {
    content: '▸';
    position: absolute;
    left: 0;
    color: #1F4E79;
    transition: transform .15s;
}
.static-faq[open] summary::before { transform: rotate(90deg); }
.static-faq summary::-webkit-details-marker { display: none; }
.static-faq p { margin: 10px 0 4px; color: #4B5563; }

/* Pricing 表格 */
.static-page .static-tbl {
    width: 100%;
    margin: 8px 0 16px;
    border-collapse: collapse;
    font-size: 13px;
}
.static-page .static-tbl th,
.static-page .static-tbl td {
    padding: 8px 10px;
    border: 1px solid #E5E7EB;
    text-align: left;
}
.static-page .static-tbl thead th {
    background: #F3F6FA;
    color: #1F4E79;
    font-weight: 700;
}

/* Contact page */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 28px;
    margin-top: 8px;
}
.contact-info-list {
    list-style: none;
    padding: 0;
}
.contact-info-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px dashed #E5E7EB;
}
.contact-info-list li:last-child { border-bottom: 0; }
.contact-info-list .ci-ic {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #EAF2FA;
    color: #1F4E79;
    border-radius: 6px;
}
.contact-info-list .ci-ic svg {
    width: 16px;
    height: 16px;
}
.contact-info-list .ci-lbl {
    flex: 0 0 72px;
    color: #6B7280;
    font-size: 12.5px;
    font-weight: 500;
}
.contact-form {
    background: #FAFBFC;
    border: 1px solid #E5E7EB;
    border-radius: 6px;
    padding: 16px 18px;
}
.contact-row { margin-bottom: 14px; }
.contact-row label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    color: #374151;
    font-weight: 600;
}
.contact-row .req { color: #D24A4A; margin-left: 2px; }
.contact-row input,
.contact-row textarea {
    width: 100%;
    padding: 9px 10px;
    border: 1px solid #D1D5DB;
    border-radius: 4px;
    font-size: 14px;
    font-family: inherit;
    background: #fff;
    box-sizing: border-box;
    transition: border-color .15s;
}
.contact-row input:focus,
.contact-row textarea:focus {
    outline: none;
    border-color: #1F4E79;
}
.contact-row textarea { resize: vertical; min-height: 100px; }
.contact-row-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.contact-alert {
    padding: 10px 14px;
    margin-bottom: 14px;
    border-radius: 4px;
    font-size: 13px;
}
.contact-alert-success {
    background: #ECFDF5;
    border: 1px solid #A7F3D0;
    color: #065F46;
}
.contact-alert-error {
    background: #FEF2F2;
    border: 1px solid #FECACA;
    color: #991B1B;
}

@media (max-width: 768px) {
    .static-page { padding: 14px 14px 18px; }
    .static-page .static-h2 { font-size: 15px; }
    .contact-grid { grid-template-columns: 1fr; gap: 20px; }
    .contact-info-list .ci-lbl { flex: 0 0 80px; }
    .static-page .static-tbl { font-size: 12.5px; }
    .static-page .static-tbl th,
    .static-page .static-tbl td { padding: 6px 8px; }
}

/* ---------- Footer 发布信息联系方式（与 footer 同底色，无框） ---------- */
.site-foot-v2 .foot-hotlines {
    margin: 12px 0 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
.site-foot-v2 .foot-hotlines-title {
    margin: 0 0 8px;
    padding: 0;
    font-size: 14px;
    font-weight: 700;
    color: #1F2937;
    display: flex;
    align-items: center;
    gap: 6px;
    letter-spacing: .2px;
}
.site-foot-v2 .foot-hotlines-ic {
    width: 14px;
    height: 14px;
    color: #1F4E79;
    flex: 0 0 14px;
}
.site-foot-v2 .foot-hotlines-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.site-foot-v2 .foot-hotlines-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 2px 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: #6B7280;
}
.site-foot-v2 .foot-hotlines-list .hl-name {
    color: #4B5563;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.site-foot-v2 .foot-hotlines-list .hl-phone {
    color: #1F4E79;
    font-weight: 600;
    font-family: "Tahoma", "Helvetica Neue", Arial, sans-serif;
    font-size: 12.5px;
    letter-spacing: .3px;
    text-decoration: none;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: color .15s;
}
.site-foot-v2 .foot-hotlines-list .hl-phone:hover {
    color: #D24A4A;
    text-decoration: none;
}
.site-foot-v2 .foot-hotlines-list .hl-lbl {
    color: #9CA3AF;
    font-size: 11px;
    font-weight: 400;
    font-family: inherit;
    letter-spacing: 0;
}

@media (max-width: 768px) {
    .site-foot-v2 .foot-hotlines { margin: 6px 0 8px; }
    .site-foot-v2 .foot-hotlines-title { justify-content: center; }
}