* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Microsoft YaHei', 'PingFang SC', 'Helvetica Neue', sans-serif;
      background: #F0F2F5;
      padding-top: 50px;
      color: #333;
    }

    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
    }

    /* ========== 顶部信息栏（第一行） ========== */
    .topbar {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 40px;
      background: #F8FAFC;
      border-bottom: 1px solid #E8ECF0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 40px;
      z-index: 10000;
      font-size: 13px;
      color: #666;
    }

    .topbar-left {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .topbar-left .welcome {
      color: #333;
      font-weight: 500;
    }

    .topbar-left a {
      color: #2563EB;
      text-decoration: none;
      transition: color 0.2s;
      font-weight: 500;
    }

    .topbar-left a:hover {
      color: #1D4ED8;
      text-decoration: underline;
    }

    .topbar-left .separator {
      color: #D1D5DB;
      margin: 0 2px;
    }

    .topbar-right {
      display: flex;
      align-items: center;
      gap: 24px;
    }

    .topbar-right a {
      color: #666;
      text-decoration: none;
      transition: color 0.2s;
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 13px;
    }

    .topbar-right a:hover {
      color: #2563EB;
    }

    .topbar-right .divider-dot {
      width: 4px;
      height: 4px;
      background: #D1D5DB;
      border-radius: 50%;
    }

    /* ========== 我是雇主 下拉菜单 ========== */
    .employer-dropdown {
      position: relative;
      display: flex;
      align-items: center;
    }

    .employer-dropdown > a {
      display: flex;
      align-items: center;
      gap: 4px;
      color: #666;
      text-decoration: none;
      transition: color 0.2s;
      font-size: 13px;
      cursor: pointer;
    }

    .employer-dropdown > a:hover {
      color: #2563EB;
    }

    .employer-dropdown .dropdown-menu {
      position: absolute;
      top: calc(100% + 8px);
      left: 50%;
      transform: translateX(-50%) translateY(-6px);
      min-width: 160px;
      background: #fff;
      border-radius: 10px;
      box-shadow: 0 8px 30px rgba(0,0,0,0.12);
      padding: 8px 0;
      opacity: 0;
      visibility: hidden;
      transition: all 0.25s ease;
      z-index: 10001;
    }

    .employer-dropdown .dropdown-menu::before {
      content: '';
      position: absolute;
      top: -6px;
      left: 50%;
      transform: translateX(-50%) rotate(45deg);
      width: 12px;
      height: 12px;
      background: #fff;
      border-radius: 2px;
      box-shadow: -2px -2px 4px rgba(0,0,0,0.04);
    }

    .employer-dropdown:hover .dropdown-menu {
      opacity: 1;
      visibility: visible;
      transform: translateX(-50%) translateY(0);
    }

    .employer-dropdown .dropdown-menu a {
      display: block;
      padding: 10px 20px;
      font-size: 14px;
      color: #333;
      text-decoration: none;
      transition: all 0.2s;
      white-space: nowrap;
    }

    .employer-dropdown .dropdown-menu a:hover {
      background: #EFF6FF;
      color: #2563EB;
    }

    /* ========== 导航栏主体（第二行） ========== */
    .navbar {
      position: fixed;
      top: 40px;
      left: 0;
      width: 100%;
      height: 70px;
      background: #fff;
      box-shadow: 0 2px 8px rgba(0,0,0,0.08);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 40px;
      z-index: 9999;
    }

    .navbar-logo {
      display: flex;
      align-items: center;
      gap: 10px;
      text-decoration: none;
      flex-shrink: 0;
    }

    .navbar-logo .logo-icon {
      width: 36px;
      height: 36px;
      background: linear-gradient(135deg, #2563EB, #3B82F6);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 18px;
      font-weight: bold;
    }

    .navbar-logo .logo-text {
      font-size: 22px;
      font-weight: bold;
      color: #1E3A5F;
      letter-spacing: 1px;
    }

    .navbar-menu {
      display: flex;
      align-items: center;
      gap: 8px;
      list-style: none;
      flex-shrink: 0;
    }

    .navbar-menu li a {
      display: inline-block;
      padding: 8px 18px;
      font-size: 15px;
      color: #555;
      text-decoration: none;
      border-radius: 8px;
      transition: all 0.25s ease;
      position: relative;
      font-weight: 500;
    }

    .navbar-menu li a:hover {
      color: #2563EB;
      background: #EFF6FF;
    }

    .navbar-menu li a.active {
      color: #2563EB;
      font-weight: 600;
    }

    .navbar-menu li a.active::after {
      content: '';
      position: absolute;
      bottom: -2px;
      left: 50%;
      transform: translateX(-50%);
      width: 24px;
      height: 3px;
      background: #2563EB;
      border-radius: 2px;
    }

    .navbar-search {
      position: relative;
      flex-shrink: 0;
    }

    .search-wrapper {
      display: flex;
      align-items: center;
      background: #F3F4F6;
      border: 2px solid transparent;
      border-radius: 10px;
      padding: 0 14px;
      height: 40px;
      transition: all 0.3s ease;
      width: 260px;
    }

    .search-wrapper:focus-within {
      border-color: #2563EB;
      background: #fff;
      box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
    }

    .search-wrapper .search-icon {
      width: 18px;
      height: 18px;
      color: #9CA3AF;
      flex-shrink: 0;
      margin-right: 8px;
    }

    .search-wrapper input {
      border: none;
      outline: none;
      background: transparent;
      font-size: 14px;
      color: #333;
      width: 100%;
      font-family: inherit;
    }

    .search-wrapper input::placeholder {
      color: #9CA3AF;
    }

    .hot-search-dropdown {
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      width: 320px;
      background: #fff;
      border-radius: 12px;
      box-shadow: 0 8px 30px rgba(0,0,0,0.12);
      padding: 18px 20px;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-6px);
      transition: all 0.25s ease;
      z-index: 100;
    }

    .navbar-search:focus-within .hot-search-dropdown {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }

    .hot-search-dropdown .hot-title {
      font-size: 13px;
      color: #9CA3AF;
      margin-bottom: 12px;
      font-weight: 500;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .hot-search-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .hot-search-tags a {
      display: inline-block;
      padding: 6px 14px;
      background: #F3F4F6;
      color: #555;
      font-size: 13px;
      border-radius: 20px;
      text-decoration: none;
      transition: all 0.2s ease;
    }

    .hot-search-tags a:hover {
      background: #EFF6FF;
      color: #2563EB;
    }

    .hot-search-tags a.hot-top {
      background: #EFF6FF;
      color: #2563EB;
      font-weight: 600;
    }

    /* ========== 页脚样式 ========== */
    .site-footer {
      background: #1E293B;
      color: #CBD5E1;
      padding: 36px 20px 28px;
      margin-top: 32px;
      text-align: center;
    }

    .footer-inner {
      max-width: 1200px;
      margin: 0 auto;
    }

    .footer-links {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      margin-bottom: 16px;
      flex-wrap: wrap;
    }

    .footer-links a {
      color: #E2E8F0;
      text-decoration: none;
      font-size: 14px;
      transition: color 0.2s;
    }

    .footer-links a:hover {
      color: #3B82F6;
    }

    .footer-links .footer-sep {
      color: #475569;
      font-size: 14px;
    }

    .footer-info {
      font-size: 13px;
      color: #94A3B8;
      line-height: 1.8;
      margin-bottom: 14px;
    }

    .footer-icp {
      font-size: 12px;
      color: #64748B;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
    }

/**商家详情**/
 /* ============================================
       商家店铺专属样式（sd-* 命名空间）
       ============================================ */
    .sd-wrap {
      max-width: 1200px;
      margin: 24px auto;
      padding: 0 20px;
    }

    /* ========== 商家头部横幅 ========== */
    .sd-banner {
      width: 100%;
      height: 200px;
      background: linear-gradient(135deg, #1E3A5F 0%, #2563EB 50%, #3B82F6 100%);
      border-radius: 12px 12px 0 0;
      position: relative;
      overflow: hidden;
    }

    .sd-banner::before {
      content: '';
      position: absolute;
      top: -50%;
      right: -20%;
      width: 400px;
      height: 400px;
      background: rgba(255,255,255,0.06);
      border-radius: 50%;
    }

    .sd-banner::after {
      content: '';
      position: absolute;
      bottom: -30%;
      left: -10%;
      width: 300px;
      height: 300px;
      background: rgba(255,255,255,0.04);
      border-radius: 50%;
    }

    .sd-banner-avatar {
      position: absolute;
      left: 30px;
      bottom: 40px;
      width: 100px;
      height: 100px;
      border-radius: 50%;
      border: 4px solid #fff;
      background: #E2E8F0;
      overflow: hidden;
      z-index: 10;
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }

    .sd-banner-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .sd-banner-avatar-placeholder {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 36px;
      color: #94A3B8;
      background: #F1F5F9;
    }

    /* ========== 商家信息区 ========== */
    .sd-info {
      background: #fff;
      border: 1px solid #E2E8F0;
      border-top: none;
      border-radius: 0 0 12px 12px;
      padding: 56px 30px 24px;
      display: flex;
      gap: 30px;
      margin-bottom: 24px;
    }

    .sd-info-left {
      width: 200px;
      flex-shrink: 0;
      text-align: center;
    }

    .sd-info-left .sd-name {
      font-size: 18px;
      font-weight: 600;
      color: #1E293B;
      margin-bottom: 8px;
    }

    .sd-info-left .sd-level {
      display: inline-block;
      background: #DBEAFE;
      color: #2563EB;
      font-size: 12px;
      padding: 2px 10px;
      border-radius: 4px;
      font-weight: 500;
      margin-bottom: 8px;
    }

    .sd-info-left .sd-cert {
      font-size: 12px;
      color: #16A34A;
      margin-bottom: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
    }

    .sd-info-left .sd-from {
      font-size: 12px;
      color: #94A3B8;
      margin-bottom: 16px;
    }

    .sd-info-left .sd-btns {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .sd-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      padding: 7px 14px;
      border-radius: 6px;
      font-size: 13px;
      cursor: pointer;
      text-decoration: none;
      transition: all 0.2s;
    }

    .sd-btn-outline {
      border: 1px solid #E2E8F0;
      color: #475569;
      background: #fff;
    }

    .sd-btn-outline:hover {
      border-color: #2563EB;
      color: #2563EB;
      background: #EFF6FF;
    }

    .sd-btn-primary {
      background: #2563EB;
      color: #fff;
      border: 1px solid #2563EB;
    }

    .sd-btn-primary:hover {
      background: #1D4ED8;
      border-color: #1D4ED8;
    }

    .sd-btn-success {
      background: #16A34A;
      color: #fff;
      border: 1px solid #16A34A;
    }

    .sd-btn-success:hover {
      background: #15803D;
      border-color: #15803D;
    }

    .sd-info-right {
      flex: 1;
      min-width: 0;
    }

    .sd-info-right .sd-intro {
      font-size: 14px;
      color: #64748B;
      line-height: 1.8;
      margin-bottom: 12px;
    }

    .sd-info-right .sd-skills {
      font-size: 12px;
      color: #64748B;
      margin-bottom: 12px;
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      align-items: center;
    }

    .sd-info-right .sd-skills span {
      display: inline-block;
      background: #F1F5F9;
      padding: 3px 10px;
      border-radius: 4px;
      font-size: 12px;
      color: #475569;
    }

    .sd-info-right .sd-stats {
      font-size: 13px;
      color: #64748B;
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      align-items: center;
    }

    .sd-info-right .sd-stats .sd-stat-item {
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .sd-info-right .sd-stats .sd-price {
      color: #DC2626;
      font-weight: 600;
    }

    .sd-info-right .sd-stats .sd-rate {
      color: #16A34A;
      font-weight: 600;
    }

    .sd-info-right .sd-stats .sd-rating {
      color: #F59E0B;
    }

    /* ========== Tab 切换区 ========== */
    .sd-tab-container {
      background: #fff;
      border: 1px solid #E2E8F0;
      border-radius: 12px;
      overflow: hidden;
      margin-bottom: 24px;
    }

    .sd-tab-header {
      display: flex;
      border-bottom: 1px solid #E2E8F0;
      background: #FAFBFC;
      padding: 0 8px;
    }

    .sd-tab-header .sd-tab {
      padding: 14px 24px;
      font-size: 14px;
      color: #475569;
      cursor: pointer;
      position: relative;
      transition: all 0.2s;
      user-select: none;
      display: flex;
      align-items: center;
      gap: 6px;
      white-space: nowrap;
    }

    .sd-tab-header .sd-tab:hover {
      color: #2563EB;
      background: #EFF6FF;
    }

    .sd-tab-header .sd-tab.active {
      color: #2563EB;
      font-weight: 600;
      background: #fff;
      border-bottom: 2px solid #2563EB;
    }

    .sd-tab-header .sd-tab .sd-count {
      font-size: 12px;
      color: #94A3B8;
      font-weight: 400;
    }

    .sd-tab-header .sd-tab.active .sd-count {
      color: #2563EB;
    }

    .sd-tab-content {
      padding: 24px;
      display: none;
    }

    .sd-tab-content.active {
      display: block;
    }

    /* ========== 商品列表 ========== */
    .sd-goods-list {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }

    .sd-goods-item {
      border: 1px solid #E2E8F0;
      border-radius: 8px;
      overflow: hidden;
      background: #fff;
      transition: box-shadow 0.2s, transform 0.2s;
    }

    .sd-goods-item:hover {
      box-shadow: 0 4px 16px rgba(0,0,0,0.08);
      transform: translateY(-2px);
    }

    .sd-goods-img {
      height: 160px;
      background: #F1F5F9;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #94A3B8;
      font-size: 14px;
    }

    .sd-goods-info {
      padding: 12px 14px;
    }

    .sd-goods-title {
      font-size: 14px;
      color: #1E293B;
      margin-bottom: 6px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .sd-goods-price {
      font-size: 14px;
      color: #DC2626;
      font-weight: 600;
      margin-bottom: 4px;
    }

    .sd-goods-stat {
      font-size: 12px;
      color: #94A3B8;
    }

    /* ========== 任务列表 ========== */
    .sd-task-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px;
    }

    .sd-task-table th {
      background: #F8FAFC;
      padding: 10px 14px;
      text-align: left;
      color: #94A3B8;
      font-weight: 500;
      border-bottom: 1px solid #E2E8F0;
    }

    .sd-task-table td {
      padding: 12px 14px;
      border-bottom: 1px solid #F1F5F9;
      color: #475569;
      vertical-align: middle;
    }

    .sd-task-table tr:hover td {
      background: #F8FAFF;
    }

    .sd-task-table .sd-task-title a {
      color: #2563EB;
      text-decoration: none;
      transition: color 0.15s;
    }

    .sd-task-table .sd-task-title a:hover {
      color: #1D4ED8;
      text-decoration: underline;
    }

    .sd-task-table .sd-price {
      color: #DC2626;
      font-weight: 500;
    }

    .sd-task-table .sd-status {
      color: #64748B;
      font-size: 12px;
    }

    .sd-task-table .sd-status.ended {
      color: #94A3B8;
    }

    .sd-task-table .sd-action {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 4px 10px;
      background: #2563EB;
      color: #fff;
      border-radius: 4px;
      font-size: 12px;
      text-decoration: none;
      transition: background 0.2s;
      cursor: pointer;
    }

    .sd-task-table .sd-action:hover {
      background: #1D4ED8;
    }

    /* ========== 案例缺省样式（核心） ========== */
    .sd-empty {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 60px 20px;
      text-align: center;
    }

    .sd-empty-icon {
      width: 100px;
      height: 100px;
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }

    /* 文件夹空状态图标 */
    .sd-empty-icon .folder {
      width: 80px;
      height: 60px;
      background: #E2E8F0;
      border-radius: 0 8px 8px 8px;
      position: relative;
    }

    .sd-empty-icon .folder::before {
      content: '';
      position: absolute;
      top: -16px;
      left: 0;
      width: 36px;
      height: 16px;
      background: #CBD5E1;
      border-radius: 8px 8px 0 0;
    }

    .sd-empty-icon .folder::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 24px;
      height: 24px;
      background: #CBD5E1;
      border-radius: 50%;
      opacity: 0.6;
    }

    /* 备选：简洁版空状态（纯 emoji/SVG） */
    .sd-empty-icon-simple {
      font-size: 64px;
      line-height: 1;
      color: #CBD5E1;
      margin-bottom: 12px;
    }

    .sd-empty-title {
      font-size: 16px;
      font-weight: 500;
      color: #475569;
      margin-bottom: 8px;
    }

    .sd-empty-desc {
      font-size: 13px;
      color: #94A3B8;
      margin-bottom: 20px;
      line-height: 1.6;
    }

    .sd-empty-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 8px 20px;
      background: #2563EB;
      color: #fff;
      border-radius: 6px;
      font-size: 13px;
      text-decoration: none;
      transition: background 0.2s;
      cursor: pointer;
    }

    .sd-empty-btn:hover {
      background: #1D4ED8;
    }

    /* ========== 评价详情 ========== */
    .sd-review-summary {
      display: flex;
      gap: 24px;
      margin-bottom: 24px;
      flex-wrap: wrap;
    }

    .sd-review-card {
      background: #F8FAFC;
      border: 1px solid #E2E8F0;
      border-radius: 8px;
      padding: 16px 20px;
      flex: 1;
      min-width: 200px;
    }

    .sd-review-score {
      font-size: 28px;
      font-weight: 700;
      color: #F59E0B;
      margin-bottom: 4px;
    }

    .sd-review-label {
      font-size: 13px;
      color: #64748B;
    }

    .sd-review-stars {
      color: #F59E0B;
      font-size: 14px;
      letter-spacing: 2px;
    }

    .sd-review-stars .star-empty {
      color: #E2E8F0;
    }

    .sd-review-list {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px;
    }

    .sd-review-list th {
      background: #F8FAFC;
      padding: 10px 14px;
      text-align: left;
      color: #94A3B8;
      font-weight: 500;
      border-bottom: 1px solid #E2E8F0;
    }

    .sd-review-list td {
      padding: 14px;
      border-bottom: 1px solid #F1F5F9;
      vertical-align: top;
    }

    .sd-review-user {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .sd-review-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: #F1F5F9;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #94A3B8;
      font-size: 12px;
      overflow: hidden;
      flex-shrink: 0;
    }

    .sd-review-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .sd-review-username {
      font-size: 13px;
      font-weight: 500;
      color: #1E293B;
    }

    .sd-review-content {
      line-height: 1.8;
      color: #475569;
    }

    .sd-review-tag {
      display: inline-block;
      padding: 2px 8px;
      border-radius: 4px;
      font-size: 11px;
      font-weight: 500;
      margin-right: 6px;
    }

    .sd-review-tag.good {
      background: #F0FDF4;
      color: #16A34A;
    }

    .sd-review-tag.bad {
      background: #FFF1F0;
      color: #DC2626;
    }

    /* ========== 底部统计 ========== */
    .sd-bottom-stats {
      display: flex;
      gap: 20px;
      margin-bottom: 24px;
      flex-wrap: wrap;
    }

    .sd-bottom-stat {
      flex: 1;
      min-width: 150px;
      background: #fff;
      border: 1px solid #E2E8F0;
      border-radius: 8px;
      padding: 16px 20px;
      text-align: center;
    }

    .sd-bottom-stat .sd-stat-value {
      font-size: 22px;
      font-weight: 700;
      color: #2563EB;
      margin-bottom: 4px;
    }

    .sd-bottom-stat .sd-stat-label {
      font-size: 13px;
      color: #64748B;
    }

    /* ========== 分页 ========== */
    .sd-pagination {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px 0;
      font-size: 13px;
      color: #64748B;
      flex-wrap: wrap;
      gap: 12px;
    }

    .sd-page-numbers {
      display: flex;
      gap: 6px;
    }

    .sd-page-numbers a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      border: 1px solid #E2E8F0;
      border-radius: 6px;
      color: #475569;
      text-decoration: none;
      font-size: 13px;
      transition: all 0.2s;
      cursor: pointer;
    }

    .sd-page-numbers a:hover {
      border-color: #93C5FD;
      color: #2563EB;
      background: #EFF6FF;
    }

    .sd-page-numbers a.active {
      background: #DBEAFE;
      border-color: #2563EB;
      color: #2563EB;
      font-weight: 600;
    }

    .sd-page-numbers a.more {
      border: none;
      color: #94A3B8;
      width: auto;
      padding: 0 6px;
      cursor: default;
    }

    /* ========== 能力等级进度条 ========== */
    .sd-level-bar {
      margin: 12px 0;
    }

    .sd-level-bar .sd-level-info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 13px;
      color: #64748B;
      margin-bottom: 6px;
    }

    .sd-level-bar .sd-level-info .sd-level-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      background: #2563EB;
      color: #fff;
      padding: 2px 10px;
      border-radius: 4px;
      font-size: 12px;
      font-weight: 500;
    }

    .sd-level-bar .sd-level-track {
      width: 100%;
      height: 8px;
      background: #F0F0F0;
      border-radius: 4px;
      overflow: hidden;
    }

    .sd-level-bar .sd-level-fill {
      height: 100%;
      background: linear-gradient(90deg, #2563EB, #3B82F6);
      border-radius: 4px;
      transition: width 0.5s ease;
    }

    /* ========== 切换按钮组 ========== */
    .sd-toggle-group {
      display: inline-flex;
      gap: 0;
      border: 1px solid #E2E8F0;
      border-radius: 6px;
      overflow: hidden;
      margin-bottom: 16px;
    }

    .sd-toggle-group .sd-toggle-btn {
      padding: 6px 16px;
      font-size: 12px;
      color: #475569;
      background: #fff;
      border: none;
      cursor: pointer;
      transition: all 0.2s;
      border-right: 1px solid #E2E8F0;
    }

    .sd-toggle-group .sd-toggle-btn:last-child {
      border-right: none;
    }

    .sd-toggle-group .sd-toggle-btn.active {
      background: #2563EB;
      color: #fff;
    }

    .sd-toggle-group .sd-toggle-btn:hover:not(.active) {
      background: #F8FAFC;
      color: #2563EB;
    }

    /* ========== 响应式 ========== */
    @media (max-width: 1024px) {
      .topbar { padding: 0 20px; }
      .navbar { padding: 0 20px; }
      .sd-info { flex-direction: column; }
      .sd-info-left { width: 100%; }
      .sd-goods-list { grid-template-columns: repeat(2, 1fr); }
    }

    @media (max-width: 768px) {
      .navbar-menu { display: none; }
      .search-wrapper { width: 180px; }
      .sd-goods-list { grid-template-columns: 1fr; }
      .sd-review-summary { flex-direction: column; }
      .sd-bottom-stats { flex-direction: column; }
      .sd-tab-header { overflow-x: auto; }
    }

    @media (max-width: 480px) {
      body { padding-top: 90px; }
      .sd-banner { height: 140px; }
      .sd-banner-avatar { width: 72px; height: 72px; left: 16px; bottom: -30px; }
      .sd-info { padding: 40px 16px 16px; }
      .sd-tab-content { padding: 16px; }
      .sd-pagination { flex-direction: column; }
    }
    /**
      打星
      */

      .stars {
  display: inline-block;
  width: 16px;
  height: 16px;
  content: "";
  line-height: 16px;
  background: url('../img/star.gif') repeat-x;
  overflow: hidden;
  vertical-align: text-bottom;
}
.stars .star_selected {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url('../img/star.gif') repeat-x left -32px;
}
.stars.sred .star_selected {
  background-position: left -16px;
}
.stars.a3 {
  width: 48px;
}
.stars.a5 {
  width: 80px;
}
.stars.a8 {
  width: 128px;
}
.stars.a10 {
  width: 160px;
}
.stars.s0 .star_selected {
  width: 0;
}
.stars.s0d5 .star_selected {
  width: 8px;
}
.stars.s1d5 .star_selected {
  width: 24px;
}
.stars.s2 .star_selected {
  width: 32px;
}
.stars.s2d5 .star_selected {
  width: 40px;
}
.stars.s3 .star_selected {
  width: 48px;
}
.stars.s3d5 .star_selected {
  width: 56px;
}
.stars.s4 .star_selected {
  width: 64px;
}
.stars.s4d5 .star_selected {
  width: 72px;
}
.stars.s5 .star_selected {
  width: 80px;
}
.stars.s5d5 .star_selected {
  width: 88px;
}
.stars.s6 .star_selected {
  width: 96px;
}
.stars.s6d5 .star_selected {
  width: 104px;
}
.stars.s7 .star_selected {
  width: 112px;
}
.stars.s7d5 .star_selected {
  width: 120px;
}
.stars.s8 .star_selected {
  width: 128px;
}
.stars.s8d5 .star_selected {
  width: 136px;
}
.stars.s9 .star_selected {
  width: 144px;
}
.stars.s9d5 .star_selected {
  width: 152px;
}
.stars.sall .star_selected {
  width: 100%;
}