.page-container {
     color: #333;
     line-height: 1.6;
     padding: 15px;
 }

 /* 标题 + 搜索 */
 .page-header-brand {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 20px;
     flex-wrap: wrap;
     gap: 12px;
 }

 .page-brand-title {
     font-size: 22px;
     font-weight: bold;
     color: #333;
     display: flex;
     align-items: center;
     gap: 8px;
 }

 .page-brand-title::before {
     content: "";
     width: 10px;
     height: 10px;
     background-color: #ff8c00;
     border-radius: 50%;
 }

 .search-box {
     display: flex;
     align-items: center;
 }

 .search-input-brand {
     width: 180px;
     height: 36px;
     padding: 0 10px;
     border: 1px solid #eee;
     border-radius: 4px 0 0 4px;
     font-size: 14px;
     outline: none;
 }

 .search-btn {
     width: 40px;
     height: 36px;
     background-color: #ff8c00;
     border: none;
     border-radius: 0 4px 4px 0;
     color: #fff;
     cursor: pointer;
 }

 /* 列表布局 */
 .brand-list {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 15px;
     margin-bottom: 30px;
 }

 .brand-card {
     background: #fff;
     padding: 20px;
     border-radius: 6px;
     box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
     display: grid;
     gap: 15px;
 }

 .brand-logo {
     display: flex;
     align-items: center;
     gap: 8px;
 }

 .brand-logo img {
     width: 80px;
     height: 70px;
 }

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

 .brand-name {
     font-size: 14px;
     font-weight: bold;
     color: #ff8c00;
     margin-bottom: 6px;
 }

 .brand-detail {
     font-size: 12px;
     color: #666;
     line-height: 1.7;
     /* 超出显示省略号 */
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
 }

 .brand-typeList {
     font-size: 12px;
     color: #666;
     line-height: 1.7;
     margin-top: 10px;
     display: flex;
     align-items: center;
     gap: 8px;
 }

 .brand-type {
     /* 边框 */
     color: #666;
     padding: 1px 8px;
     border: 1px solid #ff8c00;
     border-radius: 4px;
     font-size: 12px;
 }

 .no-data {
     text-align: center;
     margin-top: 20px;
 }

 /* ====================================== */
 /* ========== 移动端适配 已加上 ========== */
 /* ====================================== */
 @media (max-width: 768px) {
     .page-header {
         flex-direction: column;
         align-items: flex-start;
     }

     .search-input {
         width: 160px;
     }

     .brand-list {
         grid-template-columns: 1fr;
         /* 手机变单列 */
     }

     .brand-card {
         flex-direction: column;
         /* 卡片垂直排列 */
         text-align: center;
         padding: 18px;
     }

     .brand-logo {
         margin-bottom: 10px;
     }
 }

 @media (max-width: 480px) {
     .page-container {
         padding: 10px;
     }

     .page-title {
         font-size: 20px;
     }

     .search-input {
         width: 140px;
     }

     .page-btn {
         width: 30px;
         height: 30px;
         font-size: 14px;
     }
 }