* {box-sizing: border-box;}
html {font-size: 16px;}
body {margin: 0; color: #1f2933; background: #f5f7fa; font-family: Arial, "Microsoft YaHei", "PingFang SC", sans-serif;}
a {color: inherit; text-decoration: none;}
img {max-width: 100%; display: block;}
button, input, select, textarea {font-family: inherit;}

.ys-wrap {max-width: 1200px; margin: 0 auto; padding: 0 20px;}
.ys-site-header {position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.96); border-bottom: 1px solid #e5e7eb; box-shadow: 0 8px 26px rgba(15,23,42,.06);}
.ys-site-head {min-height: 76px; display: flex; align-items: center; gap: 22px;}
.ys-logo {display: flex; align-items: center; flex: 0 0 auto;}
.ys-logo img {width: 220px; height: 58px; object-fit: contain;}
.ys-site-nav {display: flex; align-items: center; justify-content: center; gap: 4px; flex: 1; flex-wrap: wrap;}
.ys-site-nav a {padding: 10px 12px; color: #374151; font-size: 14px; border-radius: 6px;}
.ys-site-nav a:hover {background: #fee2e2; color: #b91c1c;}
.ys-head-search {display: flex; width: 270px; height: 40px; border: 1px solid #d1d5db; border-radius: 6px; overflow: hidden; background: #fff;}
.ys-head-search input {flex: 1; min-width: 0; border: 0; padding: 0 12px; outline: 0;}
.ys-head-search button {width: 66px; border: 0; background: #dc2626; color: #fff; cursor: pointer;}
.ys-breadcrumb {background: #eef2f6; border-bottom: 1px solid #e5e7eb; padding: 11px 0; color: #6b7280; font-size: 13px;}
.ys-breadcrumb .ys-wrap {display: flex; align-items: center; gap: 8px;}
.ys-breadcrumb a {color: #374151;}
.ys-breadcrumb a:hover {color: #dc2626;}
.ys-breadcrumb strong {color: #111827; font-weight: 600;}

.ys-home-banner {position: relative; overflow: hidden; min-height: 390px; color: #fff; background: #111827;}
.ys-home-banner:after {content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 75% 24%, rgba(255,255,255,.20), transparent 24%), radial-gradient(circle at 20% 78%, rgba(220,38,38,.28), transparent 24%); pointer-events: none;}
.ys-home-slider {position: absolute; inset: 0; z-index: 0;}
.ys-home-slide {position: absolute; inset: 0; opacity: 0; transition: opacity .65s ease; background-size: cover; background-position: center;}
.ys-home-slide.active {opacity: 1;}
.ys-home-slide:nth-child(1) {background-image: linear-gradient(115deg, rgba(17,24,39,.96) 0%, rgba(31,41,55,.90) 48%, rgba(185,28,28,.84) 100%), url('/static/admin/images/login-bg.jpg');}
.ys-home-slide:nth-child(2) {background-image: radial-gradient(circle at 78% 24%, rgba(255,255,255,.24), transparent 22%), linear-gradient(115deg, #0f172a 0%, #1d4ed8 52%, #dc2626 100%);}
.ys-home-slide:nth-child(3) {background-image: radial-gradient(circle at 72% 20%, rgba(248,113,113,.35), transparent 25%), linear-gradient(115deg, #111827 0%, #047857 48%, #7f1d1d 100%);}
.ys-home-banner-grid {position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 34px; align-items: center; min-height: 390px; padding-top: 34px; padding-bottom: 42px;}
.ys-home-banner-main {max-width: 760px;}
.ys-home-banner h1 {font-size: 46px; line-height: 1.16; margin: 14px 0 16px;}
.ys-home-banner p {max-width: 680px; color: #f3f4f6; line-height: 1.9; font-size: 16px;}
.ys-banner-stats {display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px;}
.ys-banner-stats span {display: inline-flex; align-items: center; min-height: 34px; padding: 0 13px; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; background: rgba(255,255,255,.09); color: #fff; font-size: 13px;}
.ys-banner-card {background: rgba(255,255,255,.96); color: #111827; border-radius: 8px; padding: 18px; box-shadow: 0 18px 38px rgba(0,0,0,.20);}
.ys-banner-card h3 {margin: 0 0 12px; font-size: 18px;}
.ys-banner-card .ys-category-list {padding: 0;}
.ys-slider-arrow {position: absolute; z-index: 3; top: 50%; width: 38px; height: 54px; margin-top: -27px; border: 0; background: rgba(17,24,39,.36); color: #fff; font-size: 36px; line-height: 54px; cursor: pointer;}
.ys-slider-arrow:hover {background: rgba(220,38,38,.82);}
.ys-slider-arrow.prev {left: 18px;}
.ys-slider-arrow.next {right: 18px;}
.ys-slider-dots {position: absolute; z-index: 3; left: 0; right: 0; bottom: 16px; display: flex; justify-content: center; gap: 8px;}
.ys-slider-dots button {width: 28px; height: 4px; border: 0; background: rgba(255,255,255,.45); cursor: pointer;}
.ys-slider-dots button.active {background: #fff;}
.ys-hero {position: relative; color: #fff; background: radial-gradient(circle at 75% 20%, rgba(239,68,68,.35), transparent 28%), linear-gradient(135deg, #111827 0%, #1f2937 54%, #991b1b 100%); padding: 54px 0;}
.ys-hero-grid {display: grid; grid-template-columns: 285px 1fr 330px; gap: 22px; align-items: stretch;}
.ys-panel {background: #fff; color: #111827; border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; box-shadow: 0 16px 34px rgba(15,23,42,.12);}
.ys-panel-title {height: 48px; line-height: 48px; padding: 0 18px; background: #dc2626; color: #fff; font-weight: 700;}
.ys-category-list {padding: 10px 16px;}
.ys-category-list a {display: block; color: #374151; line-height: 34px; border-bottom: 1px solid #f0f2f5; font-size: 14px;}
.ys-category-list a:hover {color: #dc2626;}
.ys-hero-main {padding: 10px 4px;}
.ys-eyebrow {font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: #fecaca; font-weight: 700;}
.ys-hero h1 {font-size: 42px; line-height: 1.18; margin: 14px 0 16px; max-width: 780px;}
.ys-hero p {font-size: 16px; line-height: 1.9; max-width: 780px; color: #f3f4f6;}
.ys-actions {display: flex; gap: 12px; margin-top: 26px; flex-wrap: wrap;}
.ys-btn {display: inline-flex; align-items: center; justify-content: center; min-width: 128px; height: 42px; padding: 0 18px; border-radius: 6px; background: #dc2626; color: #fff; border: 1px solid #dc2626; cursor: pointer;}
.ys-btn:hover {background: #b91c1c; border-color: #b91c1c; color: #fff;}
.ys-btn.secondary {background: #fff; color: #111827; border-color: #fff;}
.ys-quick {padding: 16px;}
.ys-quick label {display: block; color: #4b5563; font-size: 12px; margin: 10px 0 6px;}
.ys-quick select, .ys-quick input {width: 100%; height: 40px; border: 1px solid #d1d5db; border-radius: 6px; padding: 0 10px; background: #fff;}
.ys-quick button {width: 100%; height: 42px; margin-top: 16px; border: 0; border-radius: 6px; background: #dc2626; color: #fff; cursor: pointer;}

.ys-section {padding: 46px 0;}
.ys-section.gray {background: #eef2f6;}
.ys-heading {display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px;}
.ys-heading h2 {font-size: 28px; color: #111827; margin: 0;}
.ys-heading p {color: #6b7280; margin: 7px 0 0; line-height: 1.7;}
.ys-heading > a {color: #dc2626; font-weight: 700;}

.ys-grid {display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;}
.ys-card {background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 20px; box-shadow: 0 10px 24px rgba(15,23,42,.05);}
.ys-card h3 {font-size: 18px; color: #111827; margin: 0 0 8px;}
.ys-card em {display: block; color: #9ca3af; font-style: normal; margin-bottom: 14px;}
.ys-tags {display: flex; flex-wrap: wrap; gap: 8px;}
.ys-tags span, .ys-tags a {background: #f3f4f6; color: #4b5563; border-radius: 999px; padding: 7px 11px; font-size: 12px;}
.ys-tags a:hover {background: #fee2e2; color: #b91c1c;}

.ys-catalog-layout {display: grid; grid-template-columns: 250px 1fr; gap: 18px; align-items: start;}
.ys-parts-sidebar {background: #fff; border: 3px solid #ef4444;}
.ys-sidebar-head {padding: 18px 26px; border-bottom: 1px solid #e5e7eb;}
.ys-sidebar-head strong {display: block; color: #374151; font-size: 17px; font-weight: 700;}
.ys-sidebar-head span {display: block; color: #9ca3af; margin-top: 4px; font-size: 12px;}
.ys-parts-menu dl {margin: 0; border-bottom: 1px solid #eef2f6;}
.ys-parts-menu dt {display: flex; align-items: center; justify-content: space-between; min-height: 42px; padding: 0 14px 0 26px; color: #374151; cursor: pointer;}
.ys-parts-menu dt span {font-weight: 700;}
.ys-parts-menu dt b {color: #9ca3af; font-size: 12px; font-weight: 400;}
.ys-parts-menu dl.active dt {color: #b91c1c; background: #fff5f5;}
.ys-parts-menu dd {display: none; margin: 0; padding: 4px 10px 12px 26px;}
.ys-parts-menu dl.active dd {display: block;}
.ys-parts-menu button {display: block; width: 100%; border: 0; background: transparent; color: #4b5563; text-align: left; line-height: 28px; padding: 0; cursor: pointer; font-size: 13px;}
.ys-parts-menu button:before {content: "·"; margin-right: 5px; color: #6b7280;}
.ys-parts-menu button:hover, .ys-parts-menu button.active {color: #dc2626;}
.ys-catalog-main {background: #fff; border: 3px solid #ef4444; min-height: 520px; padding: 16px 20px;}
.ys-catalog-brand-tabs {display: flex; flex-wrap: wrap; gap: 4px 14px; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid #e5e7eb;}
.ys-catalog-brand-tabs button {border: 0; background: transparent; color: #374151; padding: 4px 0; font-size: 20px; font-weight: 700; cursor: pointer;}
.ys-catalog-brand-tabs button.active, .ys-catalog-brand-tabs button:hover {color: #dc2626;}
.ys-catalog-active {display: flex; flex-wrap: wrap; gap: 8px; align-items: center; color: #6b7280; margin-bottom: 14px; font-size: 13px;}
.ys-catalog-active strong {color: #dc2626;}
.ys-catalog-active em {font-style: normal; color: #111827; font-weight: 700;}
.ys-catalog-result {display: grid; gap: 10px;}
.ys-catalog-row {display: flex; flex-wrap: wrap; gap: 10px 18px; line-height: 26px; color: #374151; font-size: 14px;}
.ys-catalog-row strong {color: #6b7280; min-width: 92px;}
.ys-catalog-row a {color: #374151;}
.ys-catalog-row a:hover, .ys-catalog-row a.hot {color: #dc2626;}

.ys-brand-strip {display: flex; flex-wrap: wrap; gap: 10px;}
.ys-brand-strip a, .ys-brand-strip button {border: 1px solid #d1d5db; background: #fff; color: #374151; border-radius: 6px; padding: 10px 15px; cursor: pointer;}
.ys-brand-strip .active, .ys-brand-strip a:hover, .ys-brand-strip button:hover {background: #dc2626; border-color: #dc2626; color: #fff;}
.ys-brand-logo-grid {display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px;}
.ys-brand-logo-grid.compact {grid-template-columns: repeat(7, 1fr);}
.ys-brand-logo-card {min-height: 132px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 14px 10px; color: #111827; box-shadow: 0 10px 24px rgba(15,23,42,.05); cursor: pointer;}
.ys-brand-logo-card:hover, .ys-brand-logo-card.active {border-color: var(--brand-color, #dc2626); box-shadow: 0 16px 34px rgba(15,23,42,.12); transform: translateY(-2px);}
.ys-brand-logo-card strong {display: block; font-size: 15px; line-height: 1.25;}
.ys-brand-logo-card em {display: block; min-height: 17px; color: #6b7280; font-style: normal; font-size: 12px;}
.ys-brand-logo-card small {color: #9ca3af;}
.ys-brand-logo-card button {font: inherit;}
.ys-brand-logo-mark {width: 64px; height: 46px; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--brand-color, #dc2626); color: var(--brand-color, #dc2626); border-radius: 50%; font-weight: 800; font-size: 11px; letter-spacing: .04em; background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);}
.ys-model-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;}
.ys-model {background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 18px; box-shadow: 0 10px 24px rgba(15,23,42,.05);}
.ys-model strong {display: block; color: #111827; margin-bottom: 10px; font-size: 17px;}
.ys-model small {display: block; color: #6b7280; line-height: 1.8;}

.ys-filter {background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 20px; margin-bottom: 24px; box-shadow: 0 10px 24px rgba(15,23,42,.05);}
.ys-filter-row {display: grid; grid-template-columns: repeat(4, 1fr) 120px; gap: 12px; align-items: end;}
.ys-filter-row label {display: block; color: #4b5563; font-size: 12px; margin-bottom: 6px;}
.ys-filter-row select {width: 100%; height: 40px; border: 1px solid #d1d5db; border-radius: 6px; padding: 0 8px; background: #fff;}
.ys-filter-row button {height: 40px; border: 0; border-radius: 6px; background: #dc2626; color: #fff; cursor: pointer;}

.ys-product-grid {display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;}
.ys-product-card {background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 14px; box-shadow: 0 10px 24px rgba(15,23,42,.05);}
.ys-product-card img {width: 100%; height: 190px; object-fit: contain; background: #f8fafc; border-radius: 6px;}
.ys-product-card h3 {font-size: 16px; line-height: 1.5; min-height: 48px; margin: 12px 0 8px;}
.ys-product-card p {color: #6b7280; line-height: 1.7; min-height: 42px;}
.ys-page {margin-top: 24px; text-align: center;}
.ys-detail {display: grid; grid-template-columns: 420px 1fr; gap: 30px; align-items: start;}
.ys-detail-img {background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 20px;}
.ys-detail-img img {width: 100%; max-height: 420px; object-fit: contain;}
.ys-detail-text h1 {font-size: 32px; color: #111827; margin: 0 0 14px;}
.ys-detail-text p, .ys-content {color: #4b5563; line-height: 1.9;}
.ys-content {background: #fff; border-radius: 8px; padding: 24px; border: 1px solid #e5e7eb;}
.ys-contact-layout {display: grid; grid-template-columns: 1.15fr .85fr; gap: 18px; align-items: stretch;}
.ys-contact-card {background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 26px; box-shadow: 0 12px 28px rgba(15,23,42,.06);}
.ys-contact-main {background: linear-gradient(135deg, #101827 0%, #183766 58%, #dc2626 100%); color: #fff; grid-row: span 2; display: flex; flex-direction: column; justify-content: center; min-height: 430px;}
.ys-contact-kicker {display: inline-flex; width: max-content; padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,.14); color: #fff; font-size: 12px; letter-spacing: .08em; text-transform: uppercase;}
.ys-contact-card h3 {margin: 0 0 14px; color: #111827; font-size: 22px;}
.ys-contact-main h3 {color: #fff; font-size: 34px; line-height: 1.2; margin-top: 18px;}
.ys-contact-card p {margin: 0; color: #6b7280; line-height: 1.9;}
.ys-contact-main p {color: rgba(255,255,255,.88); max-width: 620px;}
.ys-contact-actions {display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px;}
.ys-btn.secondary.dark {background: rgba(255,255,255,.10); color: #fff; border-color: rgba(255,255,255,.55);}
.ys-contact-list {display: grid; grid-template-columns: 100px 1fr; gap: 12px 16px; margin: 0;}
.ys-contact-list dt {color: #6b7280; font-weight: 700;}
.ys-contact-list dd {margin: 0; color: #111827; line-height: 1.7;}
.ys-contact-form {display: grid; gap: 12px;}
.ys-contact-form input, .ys-contact-form textarea {width: 100%; border: 1px solid #d1d5db; border-radius: 6px; padding: 11px 12px; outline: 0; color: #111827; background: #fff;}
.ys-contact-form textarea {min-height: 110px; resize: vertical;}
.ys-contact-form input:focus, .ys-contact-form textarea:focus {border-color: #dc2626; box-shadow: 0 0 0 3px rgba(220,38,38,.10);}
.ys-contact-form .ys-btn {width: 100%; border: 0;}

.ys-about {display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch;}
.ys-about-box {background: #fff; border: 1px solid #e5e7eb; border-left: 5px solid #dc2626; border-radius: 8px; padding: 26px; box-shadow: 0 10px 24px rgba(15,23,42,.05);}
.ys-about-box p {line-height: 1.9; color: #4b5563;}
.ys-footer {background: #111827; color: #d1d5db; padding-top: 36px;}
.ys-footer-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px;}
.ys-footer h3 {color: #fff; margin: 0 0 12px;}
.ys-footer p {line-height: 1.8;}
.ys-footer a {color: #fff;}
.ys-copyright {border-top: 1px solid #374151; margin-top: 26px; padding: 16px; text-align: center; color: #9ca3af;}

@media (max-width: 980px) {
    .ys-site-head {align-items: flex-start; flex-direction: column; padding-top: 14px; padding-bottom: 14px;}
    .ys-site-nav {justify-content: flex-start;}
    .ys-head-search {width: 100%;}
    .ys-hero-grid {grid-template-columns: 1fr;}
    .ys-grid, .ys-model-grid, .ys-product-grid, .ys-brand-logo-grid, .ys-brand-logo-grid.compact {grid-template-columns: repeat(2, 1fr);}
    .ys-detail, .ys-about, .ys-footer-grid, .ys-catalog-layout, .ys-contact-layout {grid-template-columns: 1fr;}
    .ys-contact-main {grid-row: auto; min-height: auto;}
    .ys-filter-row {grid-template-columns: 1fr 1fr;}
    .ys-catalog-main {min-height: auto;}
}
@media (max-width: 560px) {
    .ys-logo img {width: 180px; height: 48px;}
    .ys-hero {padding: 34px 0;}
    .ys-hero h1 {font-size: 28px;}
    .ys-heading {display: block;}
    .ys-grid, .ys-model-grid, .ys-product-grid, .ys-filter-row, .ys-brand-logo-grid, .ys-brand-logo-grid.compact {grid-template-columns: 1fr;}
    .ys-catalog-brand-tabs button {font-size: 16px;}
    .ys-catalog-row strong {min-width: 100%;}
    .ys-contact-card {padding: 20px;}
    .ys-contact-main h3 {font-size: 28px;}
    .ys-contact-list {grid-template-columns: 1fr;}
}