/* ---- base ---- */
        :root {
            --ink: #121826;
            --muted: #64748b;
            --line: #e2e8f0;
            --panel: #ffffff;
            --bg: #f6f8fb;
            --blue: #0f62d9;
            --yellow: #f5c400;
            --green: #16a34a;
            --red: #e60012;
            --navy: #172033;
            --gold: #f3c827;
            --radius: 8px;
            --soft-red: #fff1f2;
            --soft-blue: #eef5ff;
            --soft-yellow: #fff8db;
            --soft-green: #ecfdf3;
            --card-shadow: 0 14px 34px rgba(15, 23, 42, .045);
            --icon-stroke: 2;
        }

        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            background: var(--bg);
            color: var(--ink);
            font-family: "Microsoft YaHei", Arial, sans-serif;
        }

        a {
            color: inherit;
            text-decoration: none;
        }

        small {
            font-size: 12px;
        }

        .svg-sprite {
            position: absolute;
            width: 0;
            height: 0;
            overflow: hidden;
        }

        .kwc-icon {
            width: 24px;
            height: 24px;
            display: inline-block;
            flex: 0 0 auto;
            stroke: currentColor;
            stroke-width: var(--icon-stroke);
            stroke-linecap: round;
            stroke-linejoin: round;
            fill: none;
            vertical-align: -0.18em;
        }

        .kwc-icon.sm {
            width: 20px;
            height: 20px;
        }

        .kwc-icon.lg {
            width: 30px;
            height: 30px;
        }

        .btn .kwc-icon,
        button .kwc-icon,
        .tab .kwc-icon,
        .badge .kwc-icon,
        .status .kwc-icon {
            width: 18px;
            height: 18px;
            vertical-align: -0.2em;
        }

        .btn,
        button[data-go-view],
        button[data-view-link],
        .tab,
        .badge,
        .status {
            gap: 7px;
        }

        .icon-action {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
        }

        .icon-dot {
            display: inline-grid;
            place-items: center;
            min-width: 20px;
            height: 20px;
            padding: 0 6px;
            border-radius: 999px;
            background: var(--red);
            color: #fff;
            font-size: 12px;
            font-weight: 900;
            line-height: 1;
        }

        .icon-tile {
            width: 38px;
            height: 38px;
            border-radius: 8px;
            display: inline-grid;
            place-items: center;
            background: var(--soft-blue);
            color: var(--blue);
        }

        .icon-tile.red {
            background: var(--soft-red);
            color: var(--red);
        }

        .icon-tile.yellow {
            background: var(--soft-yellow);
            color: #c78900;
        }

        .icon-tile.green {
            background: var(--soft-green);
            color: var(--green);
        }

        .shell {
            min-height: 100vh;
            display: block;
        }

        .side {
            position: sticky;
            top: 0;
            z-index: 18;
            background: #ffffff;
            color: var(--ink);
            border-bottom: 1px solid var(--line);
            padding: 14px 28px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 24px;
        }

        .brand {
            padding: 0;
            border-bottom: 0;
            min-width: 250px;
        }

        .brand a {
            text-decoration: none;
        }

        .brand-home {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            color: var(--ink);
            font-size: 20px;
            font-weight: 800;
        }

        .brand-logo {
            width: 38px;
            height: 38px;
            border-radius: 8px;
            object-fit: cover;
            background: #f8fafc;
            border: 1px solid var(--line);
        }

        .brand-parts {
            display: inline-flex;
            align-items: center;
            min-height: 32px;
            margin-top: 5px;
            color: var(--muted);
            font-size: 12px;
            font-weight: 600;
        }

        .nav {
            margin-top: 0;
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
            justify-content: flex-end;
        }

        .nav a,
        .nav button {
            width: auto;
            height: 42px;
            margin-bottom: 0;
            border: 0;
            border-radius: 6px;
            background: transparent;
            color: #334155;
            text-align: center;
            padding: 0 14px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 700;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .nav a.active,
        .nav a:hover,
        .nav button.active,
        .nav button:hover {
            background: #eef2ff;
            color: #1d4ed8;
        }

        .main {
            min-width: 0;
        }

        .topbar {
            min-height: 64px;
            background: #fff;
            border-bottom: 1px solid var(--line);
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 28px;
            gap: 14px;
        }

        .topbar h1 {
            margin: 0;
            font-size: 20px;
            letter-spacing: 0;
        }

        .topbar-actions {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .badge {
            height: 30px;
            line-height: 30px;
            border-radius: 4px;
            background: #eef2ff;
            color: #3730a3;
            padding: 0 10px;
            font-size: 12px;
        }

        .content {
            padding: 22px 28px 48px;
            max-width: 1440px;
            margin: 0 auto;
        }

        .seo-intro {
            position: relative;
            border: 1px solid var(--line);
            border-radius: var(--radius);
            background: #ffffff;
            padding: 16px 54px 16px 18px;
            margin-bottom: 18px;
            color: #475569;
            line-height: 1.65;
            box-shadow: var(--card-shadow);
        }

        html.seo-intro-dismissed .seo-intro {
            display: none;
        }

        .content.workflow-mode .seo-intro {
            display: none;
        }

        .seo-intro-dismiss {
            position: absolute;
            top: 12px;
            right: 12px;
            width: 32px;
            height: 32px;
            border: 1px solid #dbe5f2;
            border-radius: 999px;
            background: #f8fbff;
            color: #64748b;
            cursor: pointer;
            font-size: 20px;
            font-weight: 800;
            line-height: 1;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
        }

        .seo-intro-dismiss:hover {
            border-color: #fecdd3;
            background: #fff1f2;
            color: var(--red);
            transform: translateY(-1px);
        }

        .seo-intro-dismiss:focus-visible {
            outline: 3px solid rgba(15, 98, 217, .22);
            outline-offset: 2px;
        }

        .seo-intro strong {
            color: var(--ink);
        }

        .seo-intro a {
            display: inline-flex;
            align-items: center;
            min-height: 32px;
            color: var(--blue);
            font-weight: 800;
        }

        .seo-static-products {
            margin-top: 14px;
            padding-top: 14px;
            border-top: 1px solid #eef2f7;
        }

        .seo-longtail-guide {
            margin-top: 16px;
            padding-top: 14px;
            border-top: 1px solid #eef2f7;
        }

        .seo-longtail-guide h2 {
            margin: 0 0 8px;
            color: var(--ink);
            font-size: 16px;
        }

        .seo-longtail-guide p {
            margin: 0 0 10px;
            color: #64748b;
            font-size: 13px;
        }

        .seo-related-links {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 12px;
        }

        .seo-related-links a {
            min-height: 34px;
            padding: 0 12px;
            border: 1px solid #dbeafe;
            border-radius: 999px;
            background: #eff6ff;
            color: #0b63ce;
            font-size: 13px;
        }

        .seo-faq-guide {
            margin-top: 16px;
            padding-top: 14px;
            border-top: 1px solid #eef2f7;
        }

        .seo-faq-guide h2 {
            margin: 0 0 10px;
            color: var(--ink);
            font-size: 16px;
        }

        .seo-faq-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 10px;
        }

        .seo-faq-item {
            padding: 12px;
            border: 1px solid #e2e8f0;
            border-radius: 10px;
            background: #f8fafc;
        }

        .seo-faq-item h3 {
            margin: 0 0 6px;
            color: var(--ink);
            font-size: 14px;
        }

        .seo-faq-item p {
            margin: 0;
            color: #64748b;
            font-size: 13px;
        }

        .seo-static-products h2 {
            margin: 0 0 8px;
            color: var(--ink);
            font-size: 16px;
        }

        .seo-static-products p {
            margin: 0 0 12px;
            color: #64748b;
            font-size: 13px;
        }

        .seo-static-product-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 10px;
        }

        .seo-static-product {
            display: grid;
            grid-template-columns: 54px minmax(0, 1fr);
            gap: 10px;
            align-items: center;
            min-height: 82px;
            padding: 10px;
            border: 1px solid #e6edf6;
            border-radius: 8px;
            background: #fff;
            color: inherit;
            text-decoration: none;
        }

        .seo-static-product img {
            width: 54px;
            height: 54px;
            object-fit: contain;
            border-radius: 6px;
            background: #f8fafc;
        }

        .seo-static-product-copy {
            min-width: 0;
        }

        .seo-static-product b,
        .seo-static-product small {
            display: block;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .seo-static-product b {
            color: var(--ink);
            font-size: 13px;
            line-height: 1.35;
        }

        .seo-static-product small {
            color: #64748b;
            font-size: 12px;
            line-height: 1.5;
        }

        .seo-static-product em {
            display: block;
            color: var(--red);
            font-style: normal;
            font-weight: 900;
            font-size: 13px;
            line-height: 1.5;
        }

        @media (max-width: 900px) {
            .seo-static-product-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

        @media (max-width: 640px) {
            .seo-static-products {
                display: none;
            }
        }

        .seo-points {
            margin: 10px 0 0;
            padding-left: 18px;
            display: grid;
            gap: 4px;
        }

        .seo-points li {
            margin: 0;
        }

        .content.workflow-mode {
            padding-top: 22px;
        }

        .hero {
            background: linear-gradient(135deg, #111827, #22324f 58%, #1f4a75);
            color: #fff;
            border-radius: var(--radius);
            min-height: 210px;
            padding: 30px;
            display: grid;
            grid-template-columns: minmax(0, 1fr) 360px;
            gap: 28px;
            align-items: center;
        }

        .content.workflow-mode .hero {
            display: none;
        }

        .hero h2 {
            margin: 0 0 14px;
            font-size: 30px;
            line-height: 1.24;
            letter-spacing: 0;
        }

        .hero p {
            margin: 0;
            color: #dbe4f0;
            line-height: 1.8;
            font-size: 15px;
        }

        .hero-kicker {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 12px;
            color: var(--gold);
            font-weight: 800;
            font-size: 13px;
        }

        .hero-kicker:before {
            content: "";
            width: 28px;
            height: 3px;
            border-radius: 999px;
            background: var(--gold);
        }

        .search-box {
            margin-top: 24px;
            display: grid;
            grid-template-columns: minmax(0, 1fr) 126px 126px;
            gap: 10px;
        }

        input,
        select {
            width: 100%;
            min-width: 0;
            height: 44px;
            border: 1px solid var(--line);
            border-radius: 6px;
            padding: 0 12px;
            font-size: 14px;
            background: #fff;
        }

        .btn {
            height: 44px;
            border: 0;
            border-radius: 6px;
            padding: 0 16px;
            font-weight: 700;
            cursor: pointer;
            background: var(--blue);
            color: #fff;
            font-size: 14px;
        }

        .btn.secondary {
            background: #fff;
            color: var(--ink);
        }

        .btn.dark {
            background: #111827;
        }

        .btn.ghost {
            background: #eef2f7;
            color: var(--ink);
        }

        .btn.warn {
            background: var(--yellow);
            color: #111827;
        }

        .btn:disabled {
            cursor: not-allowed;
            opacity: .55;
        }

        .hero-visual {
            background: rgba(255,255,255,.08);
            border: 1px solid rgba(255,255,255,.16);
            border-radius: var(--radius);
            padding: 18px;
        }

        .piece-grid {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 8px;
        }

        .piece {
            aspect-ratio: 1;
            border-radius: 5px;
            background: #facc15;
            box-shadow: inset 0 10px 0 rgba(255,255,255,.26), 0 8px 18px rgba(0,0,0,.16);
        }

        .piece:nth-child(2n) { background: #2563eb; }
        .piece:nth-child(3n) { background: #ef4444; }
        .piece:nth-child(5n) { background: #10b981; }

        .panel {
            background: var(--panel);
            border: 1px solid var(--line);
            border-radius: var(--radius);
            padding: 18px;
            margin-top: 18px;
        }

        .panel-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 16px;
        }

        .panel-head h3 {
            margin: 0;
            font-size: 18px;
        }

        .filter-head-actions {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            flex: 0 0 auto;
        }

        .filter-toggle,
        .mobile-filter-summary {
            display: none;
        }

        .catalog-layout {
            display: grid;
            grid-template-columns: 280px minmax(0, 1fr);
            gap: 18px;
            align-items: start;
        }

        .filter-panel {
            position: sticky;
            top: 92px;
        }

        .filters {
            display: grid;
            grid-template-columns: 1fr;
            gap: 12px;
        }

        .filter-group {
            display: grid;
            gap: 7px;
        }

        .filter-group label {
            color: #475569;
            font-size: 12px;
            font-weight: 700;
        }

        .filter-inline {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
        }

        .catalog-toolbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 14px;
        }

        .catalog-mode-panel {
            display: none;
            margin: -2px 0 18px;
            border: 1px solid #ffe1e1;
            border-radius: 10px;
            background: linear-gradient(135deg, #fff8f8, #fff);
            padding: 16px;
        }

        .catalog-mode-panel.active {
            display: block;
        }

        .catalog-mode-panel h4 {
            margin: 0 0 6px;
            font-size: 16px;
        }

        .catalog-mode-panel p {
            margin: 0 0 14px;
            color: var(--muted);
            font-size: 13px;
            line-height: 1.6;
        }

        .catalog-category-strip {
            display: grid;
            grid-template-columns: repeat(6, minmax(0, 1fr));
            gap: 10px;
        }

        .catalog-category-strip button {
            min-height: 58px;
            border: 1px solid #e6edf6;
            border-radius: 8px;
            background: #fff;
            color: #334155;
            cursor: pointer;
            font-weight: 800;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .catalog-category-strip button.active,
        .catalog-category-strip button:hover {
            border-color: #e60012;
            color: #e60012;
            background: #fff7f7;
        }

        .catalog-toolbar-actions {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
        }

        .catalog-toolbar-actions select {
            width: auto;
            min-width: 116px;
        }

        .catalog-view-toggle {
            display: inline-grid;
            grid-template-columns: 1fr 1fr;
            gap: 2px;
            padding: 3px;
            border: 1px solid #dbe3ef;
            border-radius: 8px;
            background: #f8fafc;
        }

        .catalog-view-toggle button {
            height: 34px;
            border: 0;
            border-radius: 6px;
            background: transparent;
            color: #475569;
            cursor: pointer;
            font-size: 13px;
            font-weight: 800;
            padding: 0 12px;
        }

        .catalog-view-toggle button.active {
            background: #fff;
            color: #e60012;
            box-shadow: 0 1px 6px rgba(15, 23, 42, .08);
        }

        .products {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 14px;
        }

        .product {
            border: 1px solid var(--line);
            border-radius: var(--radius);
            padding: 14px;
            min-height: 292px;
            display: flex;
            flex-direction: column;
            gap: 12px;
            background: #fff;
            transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
        }

        .product:hover {
            border-color: #b9c7dc;
            box-shadow: 0 12px 28px rgba(15, 23, 42, .08);
            transform: translateY(-1px);
        }

        .part-image {
            height: 112px;
            flex: 0 0 112px;
            border-radius: 6px;
            background: #fff;
            border: 1px solid #edf1f7;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #475569;
            font-weight: 700;
            overflow: hidden;
            text-align: center;
            cursor: pointer;
            transition: border-color .18s ease, background .18s ease;
            position: relative;
        }

        .part-image:hover {
            border-color: #9db3d3;
            background: #fbfdff;
        }

        .part-image img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
            display: block;
        }

        .discount-ribbon {
            position: absolute;
            left: 8px;
            top: 8px;
            z-index: 2;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            height: 22px;
            padding: 0 8px;
            border-radius: 999px;
            background: linear-gradient(135deg, #e60012 0%, #ff3b30 62%, #ffcc00 100%);
            color: #fff;
            font-size: 12px;
            font-weight: 900;
            letter-spacing: 0;
            line-height: 1;
            box-shadow: 0 8px 18px rgba(230, 0, 18, .22);
            pointer-events: none;
            white-space: nowrap;
        }

        .new-title-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            height: 18px;
            margin-right: 5px;
            padding: 0 6px;
            border-radius: 999px;
            border: 1px solid rgba(4, 120, 87, .18);
            background: #ecfdf5;
            color: #047857;
            font-size: 12px;
            font-weight: 900;
            line-height: 1;
            white-space: nowrap;
            vertical-align: 1px;
        }

        .catalog-image-placeholder {
            display: grid;
            place-items: center;
            width: 100%;
            height: 100%;
            min-height: 76px;
            padding: 10px;
            color: #64748b;
            font-size: 12px;
            font-weight: 800;
            line-height: 1.35;
            text-align: center;
            background: linear-gradient(135deg, #f8fafc, #fff);
        }

        .catalog-image-placeholder small {
            display: block;
            margin-top: 4px;
            color: #94a3b8;
            font-size: 12px;
            font-weight: 700;
        }

        .catalog-skeleton-card {
            border: 1px solid var(--line);
            border-radius: var(--radius);
            padding: 14px;
            min-height: 292px;
            display: flex;
            flex-direction: column;
            gap: 12px;
            background: #fff;
            overflow: hidden;
        }

        .catalog-skeleton-line,
        .catalog-skeleton-image,
        .catalog-skeleton-chip,
        .catalog-skeleton-button {
            position: relative;
            overflow: hidden;
            background: #eef3f9;
        }

        .catalog-skeleton-line:after,
        .catalog-skeleton-image:after,
        .catalog-skeleton-chip:after,
        .catalog-skeleton-button:after {
            content: "";
            position: absolute;
            inset: 0;
            transform: translateX(-100%);
            background: linear-gradient(90deg, transparent, rgba(255,255,255,.72), transparent);
            animation: catalogSkeletonShimmer 1.35s ease-in-out infinite;
        }

        .catalog-skeleton-image {
            height: 112px;
            flex: 0 0 112px;
            border-radius: 6px;
        }

        .catalog-skeleton-line {
            height: 12px;
            border-radius: 999px;
        }

        .catalog-skeleton-line.short {
            width: 58%;
        }

        .catalog-skeleton-swatches {
            display: flex;
            gap: 6px;
            min-height: 50px;
            align-content: flex-start;
            flex-wrap: wrap;
        }

        .catalog-skeleton-chip {
            width: 22px;
            height: 22px;
            border-radius: 999px;
        }

        .catalog-skeleton-button {
            height: 38px;
            border-radius: 6px;
            margin-top: auto;
        }

        @keyframes catalogSkeletonShimmer {
            100% { transform: translateX(100%); }
        }

        .image-fallback-label {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            min-height: 54px;
            padding: 8px;
            color: #64748b;
            font-size: 12px;
            font-weight: 800;
            text-align: center;
            line-height: 1.35;
        }

        .product h4 {
            margin: 0;
            font-size: 15px;
            min-height: 40px;
            line-height: 1.35;
        }

        .product-title {
            border: 0;
            background: transparent;
            padding: 0;
            color: var(--ink);
            text-align: left;
            cursor: pointer;
            font: inherit;
            font-weight: 700;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            word-break: break-word;
        }

        .product-title:hover {
            color: var(--blue);
        }

        .product-part-no {
            color: var(--muted);
            font-size: 12px;
            line-height: 1.35;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .meta {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            color: var(--muted);
            font-size: 12px;
            min-height: 44px;
            align-content: flex-start;
        }

        .meta span {
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }

        .swatch {
            width: 14px;
            height: 14px;
            border-radius: 50%;
            border: 1px solid rgba(0,0,0,.16);
            display: inline-block;
            vertical-align: -2px;
            position: relative;
            overflow: hidden;
        }

        .swatch.is-transparent,
        .variant-chip.is-transparent,
        .part-color-dot.is-transparent,
        .color-guide-swatch.is-transparent {
            border-color: rgba(15, 23, 42, .28);
            background:
                linear-gradient(135deg, rgba(255,255,255,.68), rgba(255,255,255,.12) 38%, rgba(255,255,255,.46) 62%, rgba(255,255,255,.05)),
                linear-gradient(45deg, rgba(255,255,255,.48) 25%, rgba(255,255,255,0) 25%, rgba(255,255,255,0) 50%, rgba(255,255,255,.48) 50%, rgba(255,255,255,.48) 75%, rgba(255,255,255,0) 75%, rgba(255,255,255,0)),
                var(--swatch-color, #9bd8ff);
            background-size: auto, 10px 10px, auto;
            box-shadow: inset 0 1px 10px rgba(255,255,255,.58), 0 8px 18px rgba(15, 23, 42, .10);
        }

        .swatch.is-transparent:after,
        .variant-chip.is-transparent:before,
        .part-color-dot.is-transparent:before {
            content: "";
            position: absolute;
            inset: 2px;
            border-radius: inherit;
            border: 1px solid rgba(255,255,255,.72);
            pointer-events: none;
        }

        .price {
            display: flex;
            align-items: baseline;
            gap: 8px;
            margin-top: auto;
            flex-wrap: wrap;
            min-height: 24px;
        }

        .price b {
            color: #dc2626;
            font-size: 17px;
        }

        .price span {
            color: var(--muted);
            font-size: 12px;
        }

        .price .price-original,
        .price-original {
            color: #94a3b8;
            font-size: 12px;
            font-weight: 800;
            white-space: nowrap;
        }

        .price-original s {
            text-decoration: line-through;
        }

        .price-original .price-off {
            margin-right: 4px;
            color: #e60012;
            font-style: normal;
        }

        .price .price-other-colors {
            color: var(--muted);
            font-size: 12px;
            font-weight: 600;
            white-space: nowrap;
        }

        .price .price-original {
            display: inline-flex;
        }

        .discount-chip {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 22px;
            padding: 3px 8px;
            border-radius: 999px;
            background: #fff1f2;
            color: #e60012;
            border: 1px solid rgba(230, 0, 18, .18);
            font-size: 12px;
            font-weight: 900;
            line-height: 1;
            white-space: nowrap;
        }

        .part-page-price {
            flex-wrap: wrap;
        }

        .part-page-price .price-original {
            color: #94a3b8;
            font-size: 14px;
        }

        .part-page-price .discount-chip,
        .info-item .discount-chip,
        .part-info-tile .discount-chip {
            color: #e60012;
            font-size: 12px;
        }

        .variant-strip {
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            align-items: start;
            gap: 4px;
            min-height: 50px;
            max-height: none;
            overflow: visible;
            align-content: start;
        }

        .variant-chip-row {
            display: flex;
            align-items: center;
            gap: 6px;
            flex-wrap: wrap;
            min-height: 28px;
            max-height: 28px;
            overflow: hidden;
            align-content: flex-start;
            padding: 3px 3px 0;
            margin: -3px -3px 0;
        }

        .variant-chip {
            width: 32px;
            height: 32px;
            min-width: 32px;
            min-height: 32px;
            border-radius: 50%;
            border: 1px solid rgba(15, 23, 42, .18);
            box-shadow: inset 0 0 0 2px rgba(255,255,255,.58);
            cursor: pointer;
            position: relative;
        }

        .variant-chip:hover,
        .variant-chip.active {
            outline: 2px solid var(--blue);
            outline-offset: 2px;
        }

        .variant-chip.unavailable {
            opacity: .45;
        }

        .variant-chip.unavailable:after {
            content: "";
            position: absolute;
            left: 4px;
            right: 4px;
            top: 50%;
            height: 1px;
            background: rgba(15, 23, 42, .55);
            transform: rotate(-35deg);
        }

        .variant-count {
            color: var(--muted);
            font-size: 12px;
        }

        .variant-count.loading {
            color: var(--blue);
        }

        .variant-strip.filtered {
            gap: 4px;
        }

        .variant-strip.filtered .variant-count {
            color: var(--red);
            font-weight: 800;
        }

        .variant-more {
            border: 0;
            background: #eef2ff;
            color: var(--blue);
            min-height: 32px;
            min-width: 32px;
            border-radius: 999px;
            padding: 0 10px;
            font-size: 12px;
            font-weight: 700;
            cursor: pointer;
        }

        .catalog-meta-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            color: #64748b;
            border-radius: 999px;
        }

        .catalog-meta-badge.stock {
            color: #047857;
            background: #ecfdf5;
            padding: 2px 7px;
        }

        .catalog-meta-badge.warn {
            color: #b45309;
            background: #fff7ed;
            padding: 2px 7px;
        }

        .product-actions {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
            margin-top: 0;
        }

        .product-actions .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            height: 38px;
            padding: 0 10px;
            font-size: 13px;
            white-space: nowrap;
            line-height: 1;
        }

        .catalog-pager {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            margin-top: 18px;
        }

        .detail-variant-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 8px;
        }

        .detail-variant {
            min-height: 64px;
            border: 1px solid var(--line);
            border-radius: 6px;
            background: #fff;
            padding: 8px;
            text-align: left;
            cursor: pointer;
            color: var(--ink);
        }

        .detail-variant.active {
            border-color: var(--blue);
            box-shadow: 0 0 0 2px rgba(37, 99, 235, .12);
        }

        .detail-variant.unavailable,
        .detail-variant:disabled {
            opacity: .55;
        }

        .detail-variant b,
        .detail-variant span {
            display: block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .detail-variant b {
            font-size: 12px;
            margin-top: 5px;
        }

        .detail-variant span {
            color: var(--muted);
            font-size: 12px;
            margin-top: 4px;
        }

        .detail-buy {
            display: grid;
            grid-template-columns: 96px 1fr;
            gap: 10px;
            margin-top: 14px;
        }

        .detail-buy input {
            text-align: center;
        }

        .toast {
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            z-index: 70;
            min-width: min(520px, calc(100vw - 32px));
            max-width: calc(100vw - 32px);
            background: #101827;
            color: #fff;
            border-radius: 10px;
            box-shadow: 0 22px 54px rgba(15, 23, 42, .32);
            padding: 16px 18px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            font-size: 15px;
            line-height: 1.45;
            font-weight: 800;
        }

        .toast.hidden {
            display: none;
        }

        .toast button {
            flex: 0 0 auto;
            height: 36px;
            border: 0;
            border-radius: 7px;
            background: #fff;
            color: var(--ink);
            padding: 0 13px;
            cursor: pointer;
            font-weight: 900;
        }

        .upload-workspace {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 320px;
            gap: 18px;
            align-items: start;
        }

        .upload-panel,
        .upload-side-card {
            overflow: hidden;
        }

        .upload-side-card {
            border: 1px solid var(--line);
            border-radius: var(--radius);
            background: #fff;
            padding: 18px;
            box-shadow: var(--shadow-soft);
        }

        .upload-side-card + .upload-side-card {
            margin-top: 14px;
        }

        .upload-side-card h4 {
            margin: 0 0 14px;
            font-size: 18px;
        }

        .upload-panel .panel-head {
            align-items: flex-start;
        }

        .upload-panel .panel-head p {
            margin: 6px 0 0;
            color: var(--muted);
            font-size: 13px;
            line-height: 1.6;
        }

        .upload-zone {
            position: relative;
            border: 2px dashed #2563eb;
            border-radius: 14px;
            padding: 42px 34px;
            background:
                radial-gradient(circle at 50% 20%, rgba(37, 99, 235, .12), transparent 42%),
                linear-gradient(180deg, #f8fbff, #fff);
            display: grid;
            grid-template-columns: 1fr;
            gap: 22px;
            align-items: center;
            justify-items: center;
            text-align: center;
            transition: padding .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
        }

        .upload-zone.dragging {
            border-color: #dc2626;
            box-shadow: 0 0 0 4px rgba(220, 38, 38, .08), 0 20px 40px rgba(37, 99, 235, .12);
        }

        .upload-panel.has-result .upload-zone {
            padding: 10px 12px;
            background: #fff;
            border-color: #cbd5e1;
            justify-items: stretch;
            text-align: left;
        }

        .upload-panel.has-result .panel-head {
            margin-bottom: 10px;
        }

        .upload-panel.has-result .panel-head p,
        .upload-panel.has-result .upload-note,
        .upload-panel.has-result .upload-zone .upload-zone-subtitle,
        .upload-panel.has-result .upload-zone .upload-format-hint,
        .upload-panel.has-result .upload-drop-icon,
        .upload-panel.has-result .upload-flow {
            display: none;
        }

        .upload-panel:not(.has-result) .upload-preview-steps,
        .upload-panel:not(.has-result) .upload-result-head,
        .upload-panel:not(.has-result) .upload-selection-bar,
        .upload-panel:not(.has-result) .upload-bottom-bar,
        .upload-panel:not(.has-result) .upload-total-summary,
        .upload-panel:not(.has-result) .tabs,
        .upload-panel:not(.has-result) .match-toolbar,
        .upload-panel:not(.has-result) .shortage-summary,
        .upload-panel:not(.has-result) .upload-actions,
        .upload-panel:not(.has-result) #matchTableWrap,
        .upload-panel:not(.has-result) #matchGrid,
        .upload-panel:not(.has-result) #matchPager {
            display: none;
        }

        .upload-preview-steps {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 10px;
            margin: 12px 0;
            padding: 14px;
            border: 1px solid #dbeafe;
            border-radius: 10px;
            background: linear-gradient(180deg, #f8fbff, #fff);
        }

        .upload-preview-step {
            display: flex;
            align-items: center;
            gap: 8px;
            color: var(--muted);
            font-size: 13px;
            font-weight: 700;
        }

        .upload-preview-step i {
            width: 26px;
            height: 26px;
            border-radius: 50%;
            display: grid;
            place-items: center;
            background: #e2e8f0;
            color: #64748b;
            font-style: normal;
            font-size: 12px;
        }

        .upload-preview-step.done i,
        .upload-preview-step.active i {
            background: var(--blue);
            color: #fff;
        }

        .upload-preview-step.active {
            color: var(--blue);
        }

        .upload-result-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 14px;
            margin: 14px 0;
            padding: 14px;
            border: 1px solid var(--line);
            border-radius: 10px;
            background: #fff;
        }

        .upload-result-head h3 {
            margin: 0 0 4px;
            font-size: 22px;
        }

        .upload-result-head p {
            margin: 0;
            color: var(--muted);
            font-size: 13px;
            line-height: 1.6;
        }

        .upload-result-actions {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            justify-content: flex-end;
        }

        .upload-zone strong {
            display: block;
            margin-bottom: 8px;
            font-size: 22px;
        }

        .upload-panel.has-result .upload-zone strong {
            margin-bottom: 0;
            font-size: 15px;
        }

        .upload-zone span {
            color: var(--muted);
            font-size: 13px;
        }

        .upload-drop-icon {
            width: 86px;
            height: 86px;
            border-radius: 24px;
            display: grid;
            place-items: center;
            background: linear-gradient(180deg, #eaf2ff, #f8fbff);
            color: var(--blue);
            margin-bottom: 16px;
            margin-left: auto;
            margin-right: auto;
            font-size: 46px;
            font-weight: 900;
            box-shadow: inset 0 -1px 0 rgba(37, 99, 235, .12);
        }

        .upload-format-hint {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            margin-top: 12px;
            color: #64748b;
            font-size: 12px;
        }

        .upload-format-hint b {
            color: var(--ink);
        }

        .upload-file-actions {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            flex-wrap: wrap;
        }

        .upload-zone > div:first-child {
            display: grid;
            justify-items: center;
            text-align: center;
            gap: 8px;
        }

        .upload-file-actions input[type="file"] {
            position: absolute;
            width: 1px;
            height: 1px;
            opacity: 0;
            pointer-events: none;
        }

        .upload-primary-file-button {
            min-width: 320px;
            height: 64px;
            border-radius: 999px;
            font-size: 19px;
            font-weight: 900;
            background: linear-gradient(135deg, #005bea, #2563eb);
            box-shadow: 0 18px 36px rgba(37, 99, 235, .26);
        }

        .upload-panel.has-result .upload-zone {
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 12px;
            align-items: center;
        }

        .upload-panel.has-result .upload-zone > div:first-child {
            display: block;
            text-align: left;
        }

        .upload-panel.has-result .upload-file-actions {
            justify-content: flex-end;
        }

        .upload-panel.has-result .upload-primary-file-button {
            min-width: 0;
            height: 34px;
            padding: 0 14px;
            border-radius: 8px;
            font-size: 13px;
            box-shadow: none;
        }

        .upload-note {
            margin-top: 8px;
            color: #64748b;
            font-size: 12px;
            line-height: 1.6;
        }

        .upload-progress {
            margin-top: 14px;
            border: 1px solid var(--line);
            border-radius: var(--radius);
            background: #fff;
            padding: 14px;
        }

        .upload-panel.has-result .upload-progress {
            padding: 10px 12px;
            margin-top: 10px;
        }

        .progress-bar {
            height: 8px;
            border-radius: 999px;
            background: #edf2f7;
            overflow: hidden;
        }

        .progress-bar span {
            display: block;
            height: 100%;
            width: 0;
            background: linear-gradient(90deg, var(--blue), var(--green));
            transition: width .25s ease;
        }

        .progress-meta {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            margin-top: 10px;
            color: var(--muted);
            font-size: 13px;
        }

        .upload-flow {
            display: grid;
            grid-template-columns: repeat(5, minmax(0, 1fr));
            gap: 8px;
            margin-top: 12px;
        }

        .upload-step {
            border: 1px solid var(--line);
            border-radius: 6px;
            background: #f8fafc;
            color: var(--muted);
            padding: 8px;
            font-size: 12px;
            text-align: center;
        }

        .upload-step.active {
            border-color: #93c5fd;
            background: #eff6ff;
            color: var(--blue);
            font-weight: 700;
        }

        .upload-step.done {
            border-color: #bbf7d0;
            background: #ecfdf5;
            color: #047857;
            font-weight: 700;
        }

        .upload-actions {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            margin-bottom: 12px;
            flex-wrap: wrap;
        }

        .upload-actions .left-actions,
        .upload-actions .right-actions {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
        }

        .upload-file-meta {
            margin: 10px 0 0;
            color: var(--muted);
            font-size: 13px;
        }

        .upload-error-box {
            margin-top: 12px;
            border: 1px solid #fecaca;
            border-radius: 10px;
            background: #fef2f2;
            color: #991b1b;
            padding: 12px 14px;
            font-size: 13px;
            line-height: 1.6;
        }

        .upload-error-box b {
            display: block;
            color: #7f1d1d;
            margin-bottom: 2px;
        }

        .upload-panel.has-result .upload-file-meta {
            margin-top: 8px;
        }

        .upload-total-summary {
            display: grid;
            grid-template-columns: 1.2fr repeat(3, minmax(0, .8fr));
            gap: 10px;
            margin: 16px 0 8px;
        }

        .upload-total-card {
            border: 1px solid #dbe5f4;
            border-radius: 6px;
            background: #fff;
            padding: 15px;
            box-shadow: 0 10px 24px rgba(15, 23, 42, .03);
            text-align: left;
            font: inherit;
            cursor: pointer;
            transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease;
        }

        .upload-total-card:hover,
        .upload-total-card:focus-visible {
            border-color: #93c5fd;
            box-shadow: 0 12px 28px rgba(37, 99, 235, .10);
            transform: translateY(-1px);
            outline: none;
        }

        .upload-total-card.active {
            border-color: var(--blue);
            background: #eff6ff;
            box-shadow: 0 0 0 2px rgba(37, 99, 235, .12), 0 14px 30px rgba(37, 99, 235, .08);
        }

        .upload-total-card.primary {
            color: var(--ink);
            border-color: #bfdbfe;
        }

        .upload-total-card.success {
            border-color: #bbf7d0;
        }

        .upload-total-card b {
            display: block;
            font-size: 22px;
            line-height: 1.2;
        }

        .upload-total-card.primary b {
            color: #1d4ed8;
        }

        .upload-total-card.success b,
        .upload-total-card.amount b {
            color: #047857;
        }

        .upload-total-card.warn b {
            color: #b45309;
        }

        .upload-total-card span {
            display: block;
            margin-top: 4px;
            color: var(--muted);
            font-size: 12px;
        }

        .upload-total-card .summary-kicker {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 7px;
            color: #64748b;
            font-size: 12px;
            font-weight: 900;
        }

        .upload-total-card .summary-kicker:before {
            content: "";
            width: 10px;
            height: 10px;
            border-radius: 999px;
            background: #2563eb;
            box-shadow: 0 0 0 4px #dbeafe;
        }

        .upload-total-card.primary .summary-kicker:before {
            background: #2563eb;
            box-shadow: 0 0 0 4px #dbeafe;
        }

        .upload-total-card.success .summary-kicker:before {
            background: #16a34a;
            box-shadow: 0 0 0 4px #dcfce7;
        }

        .upload-total-card.warn .summary-kicker:before {
            background: #f59e0b;
            box-shadow: 0 0 0 4px #fef3c7;
        }

        .upload-total-card.amount .summary-kicker:before {
            background: #16a34a;
            box-shadow: 0 0 0 4px #dcfce7;
        }

        .replacement-actions {
            display: grid;
            gap: 7px;
            min-width: 136px;
        }

        .replacement-actions .btn {
            min-width: 128px;
            justify-content: center;
            min-height: 38px;
            padding-left: 12px;
            padding-right: 12px;
        }

        .replacement-actions.compact {
            gap: 6px;
            min-width: 128px;
        }

        .replacement-actions.compact .btn {
            min-width: 118px;
            min-height: 34px;
            padding: 8px 10px;
        }

        .match-action-helper {
            display: block;
            margin-top: 6px;
            color: var(--muted);
            font-size: 12px;
            line-height: 1.45;
        }

        .replacement-note {
            display: inline-flex;
            align-items: center;
            width: fit-content;
            margin-top: 6px;
            border-radius: 999px;
            background: #fff7ed;
            color: #c2410c;
            padding: 4px 8px;
            font-size: 12px;
            font-weight: 900;
        }

        .replacement-note.confirmed {
            background: #ecfdf5;
            color: #047857;
        }

        .replacement-dialog {
            width: min(860px, calc(100vw - 40px));
            max-height: calc(100dvh - 72px);
            padding: 0;
            display: grid;
            grid-template-rows: auto minmax(0, 1fr);
            overflow: hidden;
            overscroll-behavior: contain;
        }

        .auth-card.replacement-dialog {
            width: min(860px, calc(100vw - 40px));
        }

        .replacement-dialog .detail-title {
            align-items: center;
            margin: 0;
            padding: 16px 18px;
            border-bottom: 1px solid var(--line);
            background: #fff;
        }

        .replacement-dialog .detail-title h3 {
            font-size: 18px;
        }

        .replacement-dialog #closeReplacementButton {
            min-width: 58px;
            height: 34px;
            padding: 0 12px;
        }

        #replacementModalContent {
            min-height: 0;
            display: grid;
            grid-template-rows: minmax(0, 1fr) auto;
        }

        .replacement-body {
            min-height: 0;
            overflow: auto;
            padding: 14px 18px 16px;
            display: grid;
            grid-template-rows: auto auto minmax(0, 1fr);
            gap: 12px;
            overscroll-behavior: contain;
        }

        .replacement-alerts {
            display: grid;
            gap: 8px;
        }

        .replacement-alerts .notice.warn {
            border: 0;
            background: #fff8e1;
            color: #9a3412;
            font-size: 13px;
            line-height: 1.55;
            padding: 12px 14px;
        }

        .replacement-preview {
            display: grid;
            grid-template-columns: 96px minmax(0, 1fr);
            gap: 12px;
            align-items: start;
            margin-top: 0;
            padding: 12px 14px;
            border: 1px solid #dbeafe;
            border-radius: 10px;
            background: #f8fbff;
        }

        .replacement-preview .match-image,
        .replacement-preview .match-image.large {
            width: 96px;
            height: 96px;
        }

        .replacement-summary {
            display: grid;
            gap: 10px;
            min-width: 0;
        }

        .replacement-summary-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 10px;
        }

        .replacement-summary-name {
            min-width: 0;
        }

        .replacement-summary-name b {
            display: inline;
            color: var(--ink);
            font-size: 18px;
            line-height: 1.35;
        }

        .replacement-summary-name small {
            display: block;
            margin-top: 2px;
            color: var(--muted);
            font-size: 12px;
            line-height: 1.45;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .replacement-summary-qty {
            white-space: nowrap;
            color: var(--ink);
            font-weight: 900;
        }

        .replacement-summary-facts {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
            gap: 8px;
        }

        .replacement-pill {
            display: grid;
            gap: 4px;
            padding: 8px 10px;
            border: 1px solid #e6eef9;
            border-radius: 8px;
            background: #fff;
            color: #475569;
            font-size: 12px;
            line-height: 1.35;
            min-width: 0;
        }

        .replacement-pill b {
            color: var(--ink);
            font-size: 13px;
            line-height: 1.35;
            min-width: 0;
        }

        .replacement-color-code,
        .replacement-option-code {
            color: var(--muted);
            font-size: 12px;
            line-height: 1.45;
        }

        .replacement-color-line {
            display: flex;
            align-items: center;
            gap: 6px;
            min-width: 0;
        }

        .replacement-dialog-actions {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            margin-top: 16px;
            flex-wrap: wrap;
        }

        .replacement-sticky-actions {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            padding: 12px 18px;
            border-top: 1px solid var(--line);
            background: #fff;
            box-shadow: 0 -10px 22px rgba(15, 23, 42, .06);
            flex-wrap: wrap;
        }

        .replacement-choice-panel {
            grid-column: 1 / -1;
            width: 100%;
            min-height: 0;
            overflow: auto;
            padding-right: 2px;
            overscroll-behavior: contain;
        }

        .replacement-option-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px;
            margin-top: 0;
        }

        .replacement-option {
            border: 1px solid var(--line);
            border-radius: 10px;
            background: #fff;
            padding: 8px;
            text-align: left;
            cursor: pointer;
            display: grid;
            grid-template-columns: 62px minmax(0, 1fr);
            gap: 9px;
            align-items: center;
            transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
            position: relative;
        }

        .replacement-option.unavailable {
            opacity: .62;
        }

        .replacement-option:hover,
        .replacement-option.active {
            border-color: #2563eb;
            box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
            transform: translateY(-1px);
        }

        .replacement-option.active:after {
            content: "✓";
            position: absolute;
            right: 9px;
            top: 9px;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #2563eb;
            color: #fff;
            display: grid;
            place-items: center;
            font-size: 12px;
            font-weight: 900;
        }

        .replacement-option-media {
            height: 62px;
            border: 1px solid #edf1f7;
            border-radius: 8px;
            background: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        .replacement-option-media img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .replacement-option b,
        .replacement-option span,
        .replacement-option small {
            display: block;
        }

        .replacement-option-main {
            min-width: 0;
        }

        .replacement-option b {
            line-height: 1.35;
        }

        .replacement-option small {
            color: var(--muted);
            margin-top: 3px;
            line-height: 1.45;
        }

        .replacement-option-price {
            color: var(--red);
            font-weight: 900;
            margin-top: 4px;
        }

        .replacement-choice-panel.is-empty,
        .replacement-choice-panel.is-loading {
            overflow: hidden;
            padding-right: 0;
            min-height: 230px;
        }

        .replacement-option-grid.is-empty,
        .replacement-option-grid.is-loading {
            grid-template-columns: 1fr;
        }

        .replacement-choice-state,
        .replacement-empty-state {
            grid-column: 1 / -1;
            width: 100%;
            min-height: 220px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 10px;
            border: 1px dashed #bfdbfe;
            border-radius: 14px;
            padding: 30px 24px;
            background: #f8fafc;
            color: var(--muted);
            line-height: 1.7;
            text-align: center;
            white-space: normal;
            word-break: normal;
            writing-mode: horizontal-tb;
        }

        .replacement-choice-state b,
        .replacement-empty-state b {
            color: var(--ink);
            font-size: 21px;
            line-height: 1.35;
        }

        .replacement-choice-state small,
        .replacement-empty-state small {
            display: block;
            max-width: 560px;
            color: #64748b;
            font-size: 14px;
            line-height: 1.65;
        }

        .replacement-choice-state.loading:before {
            content: "";
            width: 30px;
            height: 30px;
            border-radius: 50%;
            border: 3px solid #dbeafe;
            border-top-color: var(--blue);
            animation: spin .8s linear infinite;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        .replacement-sticky-actions .btn:disabled {
            opacity: .45;
            cursor: not-allowed;
        }

        .match-action-note.confirmed {
            width: fit-content;
            margin-top: 0;
            border: 1px solid #bbf7d0;
            border-radius: 999px;
            padding: 5px 9px;
            color: #047857;
            background: #ecfdf5;
            font-weight: 900;
        }

        .match-status-compact {
            display: inline-grid;
            gap: 5px;
            justify-items: center;
        }

        .match-status-compact .status {
            white-space: nowrap;
        }

        .match-status-compact.is-soft {
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .match-status-pill {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            min-height: 24px;
            border-radius: 999px;
            padding: 4px 9px;
            border: 1px solid #fed7aa;
            background: #fff7ed;
            color: #9a3412;
            font-size: 12px;
            font-weight: 900;
            line-height: 1.1;
            white-space: nowrap;
        }

        .match-status-pill:before {
            content: "";
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: currentColor;
            opacity: .62;
        }

        .match-table-stock .status-note,
        .match-action-note {
            display: block;
            margin-top: 5px;
            color: var(--muted);
            font-size: 12px;
            line-height: 1.45;
        }

        .match-action-note.warn {
            color: #b45309;
        }

        .replacement-option-state {
            color: #047857;
            font-size: 12px;
            font-weight: 900;
            margin-top: 4px;
        }

        .replacement-option.unavailable .replacement-option-state {
            color: #b45309;
        }

        .upload-guide-dialog {
            width: min(640px, calc(100vw - 32px));
        }

        .upload-guide-steps {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 12px;
            margin-top: 16px;
        }

        .upload-guide-card {
            border: 1px solid var(--line);
            border-radius: 10px;
            padding: 14px 15px;
            background: #fff;
            display: grid;
            gap: 7px;
        }

        .upload-guide-card b {
            display: block;
            color: var(--ink);
            font-size: 16px;
            line-height: 1.35;
        }

        .upload-guide-card p {
            margin: 0;
            color: var(--muted);
            line-height: 1.55;
            font-size: 13px;
        }

        .upload-guide-check {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin-top: 14px;
            color: var(--muted);
            font-size: 13px;
        }

        .upload-guide-check input {
            width: 16px;
            height: 16px;
            min-width: 16px;
            accent-color: var(--blue);
        }

        .upload-guide-close {
            width: 34px;
            height: 34px;
            min-width: 34px;
            padding: 0;
            border-radius: 50%;
            font-size: 18px;
            line-height: 1;
        }

        .upload-stat-list {
            display: grid;
            gap: 10px;
        }

        .upload-stat-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            background: transparent !important;
            border-bottom: 1px dashed #e2e8f0;
            padding-bottom: 9px;
            color: var(--muted);
            font-size: 13px;
        }

        .upload-stat-item.primary,
        .upload-stat-item.success,
        .upload-stat-item.replacement,
        .upload-stat-item.warn,
        .upload-stat-item.amount {
            background: transparent !important;
            box-shadow: none !important;
        }

        .upload-stat-item span {
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .upload-stat-item span:before {
            content: none;
            display: none;
            width: 9px;
            height: 9px;
            border-radius: 999px;
            background: #94a3b8;
            box-shadow: 0 0 0 4px #f1f5f9;
        }

        .upload-stat-item.primary span:before {
            background: #2563eb;
            box-shadow: 0 0 0 4px #dbeafe;
        }

        .upload-stat-item.success span:before {
            background: #16a34a;
            box-shadow: 0 0 0 4px #dcfce7;
        }

        .upload-stat-item.replacement span:before {
            background: #0891b2;
            box-shadow: 0 0 0 4px #cffafe;
        }

        .upload-stat-item.warn span:before {
            background: #f59e0b;
            box-shadow: 0 0 0 4px #fef3c7;
        }

        .upload-stat-item.amount span:before {
            background: #22c55e;
            box-shadow: 0 0 0 4px #dcfce7;
        }

        .upload-stat-item:last-child {
            border-bottom: 0;
            padding-bottom: 0;
        }

        .upload-stat-item b {
            color: var(--ink);
            font-size: 18px;
        }

        .upload-stat-item.primary b {
            color: var(--blue);
            font-size: 24px;
        }

        .upload-stat-item.success b {
            color: #047857;
        }

        .upload-stat-item.replacement b {
            color: #0e7490;
        }

        .upload-stat-item.warn b {
            color: #b45309;
        }

        .upload-stat-item.amount b {
            color: #047857;
        }

        .upload-side-muted {
            color: var(--muted);
            font-size: 12px;
            line-height: 1.6;
            margin: -4px 0 12px;
        }

        .upload-side-options,
        .upload-side-actions {
            display: grid;
            gap: 9px;
        }

        .upload-side-option {
            display: flex;
            align-items: center;
            gap: 8px;
            color: #334155;
            font-size: 13px;
        }

        .upload-side-option input {
            width: 16px;
            height: 16px;
            accent-color: var(--blue);
        }

        .upload-side-option.disabled {
            color: #94a3b8;
        }

        .upload-side-actions .btn {
            width: 100%;
        }

        .upload-side-actions .btn.danger {
            background: var(--red);
            color: #fff;
        }

        .upload-side-actions .btn.outline-danger {
            background: #fff;
            color: var(--red);
            border-color: #fecaca;
        }

        .upload-side-summary {
            display: grid;
            gap: 9px;
            font-size: 13px;
            color: var(--muted);
        }

        .upload-side-summary-row {
            display: flex;
            justify-content: space-between;
            gap: 10px;
            border-bottom: 1px dashed #e2e8f0;
            padding-bottom: 8px;
        }

        .upload-side-summary-row:last-child {
            border-bottom: 0;
            padding-bottom: 0;
        }

        .upload-side-summary-row b {
            color: var(--ink);
        }

        .upload-side-summary-row.total b {
            color: var(--red);
            font-size: 20px;
        }

        .upload-history-list {
            display: grid;
            gap: 10px;
        }

        .upload-history-privacy {
            border: 1px solid #dbeafe;
            border-radius: 10px;
            background: #f8fbff;
            padding: 10px 12px;
            color: #42526d;
            font-size: 12px;
            line-height: 1.55;
        }

        .upload-history-item {
            border: 1px solid var(--line);
            border-radius: 10px;
            background: #f8fafc;
            padding: 12px;
        }

        .upload-history-item.current {
            border-color: #93c5fd;
            background: #eff6ff;
        }

        .upload-history-title {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 10px;
        }

        .upload-history-title b {
            font-size: 13px;
            line-height: 1.4;
            word-break: break-word;
        }

        .upload-history-meta {
            margin-top: 5px;
            color: var(--muted);
            font-size: 12px;
            line-height: 1.5;
        }

        .upload-history-actions {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            margin-top: 10px;
        }

        .upload-history-actions button {
            border: 0;
            background: transparent;
            color: var(--blue);
            cursor: pointer;
            padding: 0;
            font-weight: 700;
            font-size: 12px;
        }

        .upload-history-actions button.danger-link {
            color: var(--red);
        }

        .upload-history-toggle {
            border: 1px solid var(--line);
            border-radius: 8px;
            background: #fff;
            color: var(--blue);
            cursor: pointer;
            font-size: 12px;
            font-weight: 800;
            padding: 9px 10px;
        }

        .upload-tip-list {
            margin: 0;
            padding-left: 18px;
            color: #475569;
            font-size: 13px;
            line-height: 1.8;
        }

        .match-toolbar {
            display: grid;
            grid-template-columns: minmax(260px, 1fr);
            gap: 10px;
            margin: 12px 0 14px;
            align-items: center;
            padding: 12px;
            border: 1px solid var(--line);
            border-radius: 8px;
            background: #fff;
        }

        .match-filter-row {
            display: grid;
            grid-template-columns: repeat(4, minmax(124px, 1fr)) 156px;
            gap: 10px;
        }

        .match-search-block {
            display: grid;
            gap: 6px;
        }

        .match-search-block small {
            color: var(--muted);
            font-size: 12px;
        }

        .match-toolbar input,
        .match-toolbar select,
        .upload-pager input,
        .upload-pager select {
            height: 38px;
            border: 1px solid var(--line);
            border-radius: 6px;
            background: #fff;
            padding: 0 10px;
            color: var(--ink);
            font-size: 13px;
        }

        .match-view-toggle {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            border: 1px solid var(--line);
            border-radius: 6px;
            overflow: hidden;
            background: #fff;
        }

        .match-view-toggle button {
            height: 38px;
            border: 0;
            background: transparent;
            color: var(--muted);
            font-weight: 700;
            cursor: pointer;
        }

        .match-view-toggle button.active {
            background: #eff6ff;
            color: var(--blue);
        }

        .match-select {
            width: 18px;
            height: 18px;
            accent-color: var(--blue);
            cursor: pointer;
        }

        .match-status-cell {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: #dcfce7;
            color: #047857;
            font-weight: 900;
        }

        .match-status-cell.warn {
            background: #fef3c7;
            color: #b45309;
        }

        .match-status-cell.danger {
            background: #fee2e2;
            color: var(--red);
        }

        .match-status-cell .kwc-icon {
            width: 16px;
            height: 16px;
        }

        .match-part-cell {
            display: grid;
            grid-template-columns: 68px minmax(0, 1fr);
            gap: 12px;
            align-items: center;
            min-width: 0;
        }

        .match-part-cell .match-image {
            width: 68px;
            height: 68px;
        }

        .match-part-title {
            color: var(--ink);
            font-weight: 900;
            line-height: 1.35;
        }

        .match-part-name {
            color: var(--muted);
            font-size: 12px;
            line-height: 1.45;
            margin-top: 4px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .match-qty-price {
            display: grid;
            gap: 5px;
            min-width: 86px;
        }

        .match-qty-price b {
            color: var(--ink);
        }

        .match-table-price {
            color: #334155;
            white-space: nowrap;
        }

        .match-table-total {
            color: var(--red);
            font-weight: 900;
            white-space: nowrap;
        }

        .match-table-stock small,
        .match-table-color small {
            display: block;
            color: var(--muted);
            margin-top: 3px;
            font-size: 12px;
            line-height: 1.4;
        }

        .match-part-cell.is-upload-source {
            grid-template-columns: 52px minmax(0, 1fr);
            gap: 10px;
        }

        .match-source-part-chip {
            display: inline-grid;
            place-items: center;
            width: 52px;
            height: 44px;
            border: 1px solid #dbeafe;
            border-radius: 9px;
            background: #f8fbff;
            color: #0f172a;
            font-weight: 900;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, .88);
        }

        .match-source-color-card {
            display: grid;
            place-items: center;
            width: 100%;
            height: 100%;
            min-height: 54px;
            border: 1px solid #e2e8f0;
            border-radius: 6px;
            background: #f8fafc;
            overflow: hidden;
        }

        .match-source-color-card .swatch {
            width: 32px;
            height: 32px;
            border-width: 1px;
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55), 0 10px 20px rgba(15, 23, 42, .08);
        }

        .match-part-name.is-upload-source {
            -webkit-line-clamp: 1;
        }

        .match-color-line {
            display: flex;
            align-items: center;
            gap: 8px;
            min-width: 0;
            color: var(--ink);
            font-weight: 800;
            line-height: 1.35;
        }

        .match-color-line .swatch {
            width: 18px;
            height: 18px;
            flex: 0 0 auto;
            border-color: rgba(15, 23, 42, .24);
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55);
        }

        .match-color-line.is-unknown .swatch {
            background: repeating-linear-gradient(45deg, #f8fafc, #f8fafc 4px, #e2e8f0 4px, #e2e8f0 8px) !important;
            border-style: dashed;
        }

        .match-source-color-card .swatch.is-unknown {
            background: repeating-linear-gradient(45deg, #f8fafc, #f8fafc 5px, #e2e8f0 5px, #e2e8f0 10px) !important;
            border-style: dashed;
        }

        .match-color-code {
            display: block;
            margin-top: 4px;
            color: var(--muted);
            font-size: 12px;
            line-height: 1.35;
        }

        .upload-selection-bar,
        .upload-bottom-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            border: 1px solid var(--line);
            border-radius: 10px;
            background: #fff;
            padding: 12px 14px;
            margin-top: 14px;
            flex-wrap: wrap;
        }

        .upload-selection-bar {
            margin-bottom: 12px;
        }

        .upload-selection-left,
        .upload-selection-actions,
        .upload-bottom-actions {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
        }

        .upload-selection-meta {
            color: var(--muted);
            font-size: 13px;
        }

        .upload-bottom-bar {
            position: sticky;
            bottom: 12px;
            z-index: 12;
            box-shadow: 0 18px 44px rgba(15, 23, 42, .14);
        }

        .upload-bottom-total {
            font-size: 15px;
            color: var(--ink);
        }

        .upload-bottom-total b {
            color: var(--red);
            font-size: 24px;
        }

        .match-part {
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            gap: 10px;
            align-items: center;
        }

        #matchTableWrap {
            overflow-x: auto;
            overflow-y: visible;
            border: 1px solid var(--line);
            border-radius: 10px;
            background: #fff;
            box-shadow: inset -18px 0 24px -24px rgba(15, 23, 42, .42);
        }

        #matchTableWrap table {
            min-width: 1040px;
            table-layout: fixed;
        }

        #matchTableWrap th,
        #matchTableWrap td {
            vertical-align: middle;
            padding-top: 12px;
            padding-bottom: 12px;
        }

        #matchTableWrap th:last-child,
        #matchTableWrap td.match-action-cell {
            position: sticky;
            right: 0;
            width: 170px;
            min-width: 170px;
            background: #fff;
            box-shadow: -10px 0 18px -18px rgba(15, 23, 42, .35);
            z-index: 4;
        }

        #matchTableWrap th:last-child {
            background: #f8fafc;
            z-index: 5;
        }

        #matchTableWrap th:nth-child(1),
        #matchTableWrap td:nth-child(1) {
            width: 42px;
        }

        #matchTableWrap th:nth-child(2),
        #matchTableWrap td:nth-child(2) {
            width: 84px;
        }

        #matchTableWrap th:nth-child(3),
        #matchTableWrap td:nth-child(3) {
            width: 255px;
        }

        #matchTableWrap th:nth-child(4),
        #matchTableWrap td:nth-child(4) {
            width: 170px;
        }

        #matchTableWrap th:nth-child(5),
        #matchTableWrap td:nth-child(5) {
            width: 104px;
        }

        #matchTableWrap th:nth-child(6),
        #matchTableWrap td:nth-child(6) {
            width: 168px;
        }

        #matchTableWrap th:nth-child(7),
        #matchTableWrap td:nth-child(7) {
            width: 170px;
        }

        .match-table-color,
        .match-table-stock,
        .match-action-cell {
            min-width: 0;
            overflow-wrap: anywhere;
        }

        .match-table-color small,
        .match-table-stock small,
        .match-table-stock .status-note,
        .match-action-note {
            white-space: normal;
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
        }

        .match-table-stock small {
            -webkit-line-clamp: 2;
        }

        .match-action-cell .replacement-actions {
            display: grid;
            gap: 6px;
            align-content: start;
        }

        .match-action-cell .replacement-actions .btn,
        .match-action-cell > .btn {
            width: 138px;
            max-width: 100%;
            min-height: 34px;
            padding: 7px 10px;
            white-space: normal;
            line-height: 1.25;
        }

        .match-action-tip {
            display: flex;
            align-items: center;
            gap: 8px;
            margin: 12px 0 10px;
            padding: 10px 12px;
            border: 1px solid #fed7aa;
            border-radius: 9px;
            background: #fff7ed;
            color: #9a3412;
            font-size: 13px;
            font-weight: 800;
            line-height: 1.45;
        }

        .match-action-tip:before {
            content: "!";
            display: inline-grid;
            place-items: center;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #fed7aa;
            color: #9a3412;
            font-weight: 900;
            flex: 0 0 auto;
        }

        .match-image {
            width: 54px;
            height: 54px;
            border: 1px solid #edf1f7;
            border-radius: 6px;
            background: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            color: var(--muted);
            font-size: 12px;
            font-weight: 700;
        }

        .match-image.large {
            width: 100%;
            height: 118px;
            border-radius: 6px;
            font-size: 14px;
        }

        .match-image.placeholder {
            flex-direction: column;
            gap: 8px;
            color: var(--ink);
            background: linear-gradient(180deg, #fff, #f8fafc);
        }

        .match-image.placeholder .placeholder-part {
            font-size: 16px;
            font-weight: 800;
        }

        .match-image.placeholder .placeholder-status {
            color: var(--muted);
            font-size: 12px;
            font-weight: 700;
        }

        .match-image img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .shortage-summary {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 10px;
            margin: 14px 0;
        }

        .shortage-card {
            border: 1px solid var(--line);
            border-radius: 6px;
            background: #f8fafc;
            padding: 12px;
        }

        .shortage-card b {
            display: block;
            font-size: 18px;
            color: var(--ink);
        }

        .shortage-card span {
            color: var(--muted);
            font-size: 12px;
        }

        .match-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
            gap: 12px;
            margin-top: 12px;
        }

        .match-card {
            border: 1px solid var(--line);
            border-radius: 8px;
            background: #fff;
            padding: 12px;
            display: grid;
            grid-template-rows: auto 138px auto auto minmax(44px, auto) auto;
            gap: 9px;
            min-height: 440px;
        }

        .match-card-select {
            display: flex;
            align-items: center;
            gap: 6px;
            color: var(--muted);
            font-size: 12px;
            font-weight: 700;
        }

        .match-card h4 {
            margin: 0;
            font-size: 14px;
            line-height: 1.35;
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
        }

        .match-card .meta {
            color: var(--muted);
            font-size: 12px;
            line-height: 1.45;
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
        }

        .match-card-main {
            display: grid;
            gap: 6px;
            min-height: 92px;
            align-content: start;
        }

        .match-card-facts {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 7px;
        }

        .match-fact {
            border-radius: 6px;
            background: #f8fafc;
            padding: 5px;
            color: var(--muted);
            font-size: 12px;
        }

        .match-fact b {
            display: block;
            color: var(--ink);
            font-size: 13px;
            margin-top: 2px;
            line-height: 1.35;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .match-card-stock-note {
            border-radius: 8px;
            background: #f8fafc;
            color: #475569;
            font-size: 12px;
            line-height: 1.45;
            padding: 8px 9px;
            min-height: 48px;
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
        }

        .match-card-stock-note.warn {
            background: #fff7ed;
            color: #9a3412;
        }

        .match-card-stock-note.success {
            background: #ecfdf5;
            color: #047857;
        }

        .match-card-stock-note b {
            color: inherit;
            font-weight: 900;
        }

        .match-card-footer {
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            align-items: center;
            gap: 6px;
            margin-top: auto;
        }

        .match-card > .match-image.large {
            width: 100%;
            height: 138px;
        }

        .match-card-footer .replacement-actions {
            width: 100%;
        }

        .match-card-footer .replacement-actions .btn,
        .match-card-footer > .btn {
            width: 100%;
        }

        .upload-pager {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 10px;
            margin-top: 14px;
            color: var(--muted);
            font-size: 13px;
            flex-wrap: wrap;
        }

        .upload-pager .pager-controls {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
        }

        .upload-pager input {
            width: 74px;
        }

        .bulk-scope {
            color: var(--muted);
            font-size: 12px;
            line-height: 1.6;
        }

        .tabs {
            display: flex;
            gap: 8px;
            margin: 16px 0;
            flex-wrap: wrap;
        }

        .tab {
            height: 34px;
            border: 1px solid var(--line);
            background: #fff;
            border-radius: 4px;
            padding: 0 12px;
            cursor: pointer;
            position: relative;
            transition: border-color .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
        }

        .tab.active {
            border-color: var(--blue);
            color: var(--blue);
            background: #eff6ff;
        }

        .tab.has-attention {
            border-color: #fb923c;
            background: #fff7ed;
            color: #c2410c;
            font-weight: 900;
            box-shadow: 0 0 0 3px rgba(251, 146, 60, .16);
        }

        .tab.has-attention:after {
            content: "需确认";
            display: inline-flex;
            align-items: center;
            height: 18px;
            margin-left: 6px;
            padding: 0 6px;
            border-radius: 999px;
            background: #fed7aa;
            color: #9a3412;
            font-size: 11px;
            font-weight: 900;
            vertical-align: 1px;
        }

        .tab.has-attention.active {
            border-color: #ea580c;
            background: #ffedd5;
            color: #9a3412;
        }

        .match-replacement-tip {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            margin: -4px 0 12px;
            padding: 10px 12px;
            border: 1px solid #fed7aa;
            border-radius: 10px;
            background: #fff7ed;
            color: #9a3412;
            font-size: 13px;
            font-weight: 800;
            line-height: 1.45;
        }

        .match-replacement-tip b {
            color: #7c2d12;
        }

        .match-replacement-tip button {
            flex: 0 0 auto;
            min-height: 30px;
            border: 1px solid #fdba74;
            border-radius: 999px;
            background: #fff;
            color: #9a3412;
            padding: 0 10px;
            font-weight: 900;
            cursor: pointer;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            font-size: 13px;
        }

        th,
        td {
            padding: 12px;
            border-bottom: 1px solid var(--line);
            text-align: left;
        }

        th {
            background: #f8fafc;
            color: #475569;
        }

        .status {
            display: inline-block;
            height: 24px;
            line-height: 24px;
            padding: 0 8px;
            border-radius: 4px;
            background: #ecfdf5;
            color: #047857;
            font-size: 12px;
        }

        .status.warn {
            background: #fffbeb;
            color: #b45309;
        }

        .status.danger {
            background: #fef2f2;
            color: #b91c1c;
        }

        .cart-page {
            display: grid;
            gap: 12px;
        }

        .cart-breadcrumb {
            display: flex;
            align-items: center;
            gap: 8px;
            color: var(--muted);
            font-size: 14px;
        }

        .cart-breadcrumb button {
            border: 0;
            background: transparent;
            color: inherit;
            cursor: pointer;
            padding: 0;
            font: inherit;
        }

        .cart-title-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 14px;
            flex-wrap: wrap;
        }

        .cart-title-row > div {
            display: grid;
            grid-template-columns: auto minmax(0, 1fr);
            align-items: center;
            gap: 4px 14px;
        }

        .cart-title-row h2 {
            margin: 0;
            font-size: clamp(26px, 2.5vw, 34px);
            line-height: 1.12;
            letter-spacing: 0;
        }

        .cart-title-row p {
            grid-column: 1 / -1;
            margin: 0;
            color: var(--muted);
        }

        .cart-summary {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 330px;
            gap: 18px;
            align-items: start;
            margin-top: 2px;
        }

        .cart-list-card {
            background: #fff;
            border: 1px solid #e5eaf2;
            border-radius: 14px;
            overflow: hidden;
            box-shadow: 0 16px 38px rgba(15, 23, 42, .045);
        }

        .cart-group-tabs {
            display: flex;
            gap: 10px;
            overflow-x: auto;
            padding: 12px 16px;
            border-bottom: 1px solid #e5eaf2;
            background: #fff;
            scroll-snap-type: x proximity;
        }

        .cart-group-tab {
            min-width: 164px;
            border: 1px solid #dbe3ef;
            border-radius: 10px;
            background: #f8fafc;
            color: #334155;
            padding: 10px 12px;
            text-align: left;
            cursor: pointer;
            display: grid;
            gap: 4px;
            scroll-snap-align: start;
            position: relative;
        }

        .cart-group-tab-main {
            appearance: none;
            border: 0;
            background: transparent;
            padding: 0;
            text-align: left;
            color: inherit;
            cursor: pointer;
            display: grid;
            gap: 4px;
        }

        .cart-group-tab-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            padding-top: 4px;
        }

        .cart-group-tab-action {
            border: 1px solid #dbe3ef;
            border-radius: 999px;
            background: #fff;
            color: #2563eb;
            padding: 4px 8px;
            font-size: 12px;
            font-weight: 800;
            cursor: pointer;
        }

        .cart-group-tab-action.danger {
            color: #dc2626;
            border-color: #fecaca;
        }

        .cart-group-tab.active {
            border-color: #2563eb;
            background: #eff6ff;
            box-shadow: 0 0 0 2px rgba(37, 99, 235, .08);
        }

        .cart-group-tab b {
            color: var(--ink);
            font-size: 14px;
            line-height: 1.25;
        }

        .cart-group-tab span {
            color: #64748b;
            font-size: 12px;
            line-height: 1.35;
        }

        .cart-group-tab .issue-badge {
            position: absolute;
            right: 8px;
            top: 8px;
            border-radius: 999px;
            background: #fff7ed;
            color: #b45309;
            border: 1px solid #fed7aa;
            padding: 2px 7px;
            font-size: 12px;
            font-weight: 900;
        }

        .cart-issue-notice {
            margin: 12px 16px 0;
            border: 1px solid #fed7aa;
            border-radius: 10px;
            background: #fff7ed;
            color: #9a3412;
            padding: 12px;
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 10px;
            align-items: center;
        }

        .cart-issue-notice.hidden {
            display: none;
        }

        .cart-issue-notice b {
            display: block;
            color: #9a3412;
            margin-bottom: 3px;
        }

        .cart-issue-notice span {
            display: block;
            color: #b45309;
            font-size: 12px;
            line-height: 1.5;
        }

        .cart-issue-actions {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            justify-content: flex-end;
        }

        .cart-issue-actions button {
            height: 34px;
            border-radius: 8px;
            border: 1px solid #fed7aa;
            background: #fff;
            color: #b45309;
            padding: 0 12px;
            font: inherit;
            font-size: 12px;
            font-weight: 900;
            cursor: pointer;
        }

        .cart-issue-actions button.primary {
            border-color: #f97316;
            background: #f97316;
            color: #fff;
        }

        .cart-list-head,
        .cart-item-row,
        .cart-list-actions {
            display: grid;
            grid-template-columns: 38px minmax(260px, 1fr) 100px 126px 112px 70px;
            gap: 12px;
            align-items: center;
        }

        .cart-list-head {
            padding: 12px 16px;
            background: #f8fafc;
            border-bottom: 1px solid #e5eaf2;
            color: #475569;
            font-weight: 800;
            font-size: 14px;
        }

        .cart-item-row {
            padding: 14px 16px;
            border-bottom: 1px solid #edf1f7;
        }

        .cart-item-row.stock-warning {
            background: #fff7ed;
            box-shadow: inset 3px 0 0 #f97316;
        }

        .cart-group-card {
            border-bottom: 1px solid #e5eaf2;
            background: #fff;
        }

        .cart-group-card:last-child {
            border-bottom: 0;
        }

        .cart-group-head {
            display: grid;
            grid-template-columns: 38px minmax(0, 1fr) auto auto auto;
            gap: 10px;
            align-items: center;
            padding: 12px 16px;
            background: #f8fafc;
            border-bottom: 1px solid #edf1f7;
        }

        .cart-group-title {
            min-width: 0;
        }

        .cart-group-title b {
            display: block;
            color: var(--ink);
            font-size: 16px;
            font-weight: 900;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .cart-group-title span {
            display: block;
            margin-top: 4px;
            color: #64748b;
            font-size: 12px;
        }

        .cart-group-pill {
            border-radius: 999px;
            background: #eff6ff;
            color: #1d4ed8;
            padding: 6px 10px;
            font-size: 12px;
            font-weight: 900;
            white-space: nowrap;
        }

        .cart-group-button {
            border: 0;
            background: transparent;
            color: #2563eb;
            cursor: pointer;
            font: inherit;
            font-weight: 900;
            white-space: nowrap;
        }

        .cart-group-button.danger {
            color: #dc2626;
        }

        .cart-group-body.collapsed {
            display: none;
        }

        .cart-check,
        .cart-check input {
            width: 32px;
            height: 32px;
            min-width: 32px;
            min-height: 32px;
            cursor: pointer;
        }

        .cart-product-cell {
            display: grid;
            grid-template-columns: 92px minmax(0, 1fr);
            gap: 14px;
            align-items: center;
        }

        .cart-product-image {
            width: 92px;
            aspect-ratio: 1 / 1;
            border: 1px solid #e5eaf2;
            border-radius: 12px;
            background: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        .cart-product-image img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            display: block;
        }

        .cart-product-image .image-fallback {
            color: #64748b;
            font-weight: 900;
            font-size: 18px;
        }

        .cart-product-title {
            display: block;
            border: 0;
            background: transparent;
            padding: 0;
            text-align: left;
            cursor: pointer;
            color: var(--ink);
            font-size: 16px;
            font-weight: 900;
            line-height: 1.35;
            margin-bottom: 5px;
        }

        .cart-product-meta {
            color: var(--muted);
            font-size: 13px;
            line-height: 1.55;
        }

        .cart-color-line,
        .cart-stock-line {
            display: flex;
            align-items: center;
            gap: 8px;
            color: #334155;
            font-size: 13px;
        }

        .cart-stock-line {
            color: #047857;
            margin-top: 5px;
        }

        .cart-stock-line.warn {
            color: #b45309;
        }

        .cart-qty-stepper {
            display: inline-grid;
            grid-template-columns: 34px 46px 34px;
            height: 36px;
            border: 1px solid #d8e0ec;
            border-radius: 10px;
            overflow: hidden;
            background: #fff;
        }

        .cart-qty-stepper button,
        .cart-qty-stepper input {
            border: 0;
            background: #fff;
            text-align: center;
            font: inherit;
            font-weight: 800;
        }

        .cart-qty-stepper button {
            cursor: pointer;
            color: #0f172a;
        }

        .cart-qty-stepper button:disabled {
            color: #cbd5e1;
            cursor: not-allowed;
        }

        .cart-qty-stepper input {
            border-left: 1px solid #e5eaf2;
            border-right: 1px solid #e5eaf2;
            width: 46px;
        }

        .cart-unit-price {
            color: var(--ink);
            font-weight: 800;
        }

        .cart-line-total {
            color: #e60012;
            font-size: 18px;
            font-weight: 900;
        }

        .cart-item-actions {
            display: grid;
            gap: 8px;
            justify-items: end;
        }

        .cart-icon-button {
            width: 32px;
            height: 32px;
            border: 0;
            border-radius: 10px;
            background: #f8fafc;
            color: #334155;
            cursor: pointer;
            font-size: 18px;
            line-height: 32px;
        }

        .cart-icon-button:hover {
            background: #fee2e2;
            color: #b91c1c;
        }

        .cart-list-actions {
            padding: 12px 16px;
            background: #fff;
            grid-template-columns: 38px auto 1fr auto auto auto;
            color: var(--muted);
        }

        .cart-list-actions .danger-link {
            color: #dc2626;
        }

        .cart-list-actions button {
            border: 0;
            background: transparent;
            color: #2563eb;
            cursor: pointer;
            font: inherit;
            font-weight: 800;
            padding: 6px 8px;
        }

        .checkout-box {
            position: sticky;
            top: 18px;
            background: #fff;
            border: 1px solid #e5eaf2;
            border-radius: 14px;
            padding: 18px;
            box-shadow: 0 12px 28px rgba(15, 23, 42, .055);
        }

        .checkout-box h3 {
            margin: 0 0 14px;
            font-size: 22px;
        }

        .coupon-disabled {
            display: none;
            gap: 8px;
            margin-bottom: 18px;
        }

        .coupon-disabled .coupon-row {
            display: grid;
            grid-template-columns: 1fr 82px;
            border: 1px solid #dbe3ef;
            border-radius: 10px;
            overflow: hidden;
            background: #f8fafc;
        }

        .coupon-disabled input,
        .coupon-disabled button {
            height: 46px;
            border: 0;
            font: inherit;
        }

        .coupon-disabled input {
            padding: 0 14px;
            background: #f8fafc;
            color: #94a3b8;
        }

        .coupon-disabled button {
            background: #e2e8f0;
            color: #64748b;
            font-weight: 900;
        }

        .coupon-note {
            color: var(--muted);
            font-size: 12px;
            line-height: 1.6;
        }

        .summary-line {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            color: var(--muted);
            font-size: 13px;
        }

        .summary-line.total {
            color: var(--ink);
            font-size: 18px;
            font-weight: 700;
            padding-top: 14px;
            border-top: 1px solid var(--line);
        }

        .summary-line.total b {
            color: #e60012;
            font-size: 30px;
            line-height: 1;
        }

        .checkout-save {
            color: #047857;
            text-align: right;
            font-size: 13px;
            margin: -2px 0 16px;
        }

        .catalog-retry-actions {
            margin-top: 14px;
            display: flex;
            justify-content: center;
            gap: 10px;
            flex-wrap: wrap;
        }

        .checkout-primary {
            width: 100%;
            height: 50px;
            border-radius: 12px;
            background: #e60012;
            color: #fff;
            border: 0;
            font-size: 17px;
            font-weight: 900;
            cursor: pointer;
            box-shadow: 0 14px 26px rgba(230, 0, 18, .18);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .checkout-primary:disabled {
            background: #cbd5e1;
            box-shadow: none;
            cursor: not-allowed;
        }

        .checkout-delivery-hint {
            text-align: center;
            color: var(--muted);
            margin: 10px 0 14px;
            font-size: 13px;
        }

        .checkout-page {
            display: grid;
            gap: 18px;
        }

        .checkout-topbar {
            display: flex;
            justify-content: space-between;
            gap: 14px;
            align-items: center;
            padding-bottom: 8px;
            border-bottom: 1px solid #e5eaf2;
        }

        .checkout-brand {
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 18px;
            font-weight: 900;
            color: var(--ink);
        }

        .checkout-brand-logo {
            width: 44px;
            height: 44px;
            border-radius: 10px;
            object-fit: contain;
            display: block;
            background: #ffd500;
        }

        .checkout-safe {
            display: flex;
            align-items: center;
            gap: 10px;
            color: #334155;
            font-weight: 800;
        }

        .checkout-safe-icon {
            width: 36px;
            height: 36px;
            border-radius: 12px;
            display: grid;
            place-items: center;
            background: #0b63ce;
            color: #fff;
            font-weight: 900;
            font-size: 0;
        }

        .checkout-breadcrumb {
            display: flex;
            gap: 10px;
            align-items: center;
            color: var(--muted);
        }

        .checkout-breadcrumb button {
            border: 0;
            background: transparent;
            color: var(--muted);
            cursor: pointer;
            font: inherit;
        }

        .checkout-steps {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 12px;
            align-items: center;
            max-width: 760px;
            margin: 0 auto;
            width: 100%;
        }

        .checkout-step {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            color: #94a3b8;
            font-weight: 900;
            position: relative;
        }

        .checkout-step:not(:last-child):after {
            content: "";
            position: absolute;
            left: calc(50% + 46px);
            right: calc(-50% + 46px);
            top: 18px;
            height: 2px;
            background: #cbd5e1;
        }

        .checkout-step.done,
        .checkout-step.active {
            color: #0068d9;
        }

        .checkout-step.done:after,
        .checkout-step.active:after {
            background: #0068d9;
        }

        .checkout-step-icon {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            display: grid;
            place-items: center;
            border: 2px solid #cbd5e1;
            background: #fff;
            z-index: 1;
            font-size: 17px;
        }

        .checkout-step.done .checkout-step-icon,
        .checkout-step.active .checkout-step-icon {
            border-color: #0068d9;
            background: #0068d9;
            color: #fff;
        }

        .checkout-layout {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 390px;
            gap: 18px;
            align-items: start;
        }

        .checkout-main,
        .checkout-side-card {
            display: grid;
            gap: 14px;
        }

        .checkout-section,
        .checkout-side-panel {
            background: #fff;
            border: 1px solid #dbe3ef;
            border-radius: 14px;
            padding: 18px;
            box-shadow: 0 12px 28px rgba(15, 23, 42, .045);
        }

        .checkout-section-head,
        .checkout-side-head {
            display: flex;
            justify-content: space-between;
            gap: 12px;
            align-items: center;
            margin-bottom: 12px;
        }

        .checkout-section-head h3,
        .checkout-side-head h3 {
            margin: 0;
            font-size: 20px;
        }

        .checkout-address-list {
            display: grid;
            gap: 12px;
        }

        .checkout-address-card {
            width: 100%;
            text-align: left;
            border: 1px solid #dbe3ef;
            border-radius: 12px;
            background: #fff;
            padding: 13px 15px;
            display: grid;
            grid-template-columns: 22px minmax(0, 1fr) auto;
            gap: 12px;
            align-items: start;
            cursor: pointer;
        }

        .checkout-address-card.active {
            border-color: #0068d9;
            box-shadow: 0 0 0 2px rgba(0, 104, 217, .08);
        }

        .checkout-radio {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: 2px solid #cbd5e1;
            margin-top: 3px;
            position: relative;
        }

        .checkout-address-card.active .checkout-radio {
            border-color: #0068d9;
        }

        .checkout-address-card.active .checkout-radio:after {
            content: "";
            position: absolute;
            inset: 4px;
            border-radius: 50%;
            background: #0068d9;
        }

        .checkout-address-name {
            display: flex;
            gap: 12px;
            align-items: center;
            flex-wrap: wrap;
            color: var(--ink);
            font-size: 16px;
            font-weight: 900;
            margin-bottom: 6px;
        }

        .checkout-address-text {
            color: #475569;
            line-height: 1.6;
        }

        .checkout-address-actions {
            display: flex;
            gap: 12px;
            white-space: nowrap;
        }

        .checkout-address-actions button,
        .checkout-link-button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 32px;
            border: 0;
            background: transparent;
            color: #0068d9;
            cursor: pointer;
            font: inherit;
            font-weight: 900;
            padding: 0;
        }

        .checkout-add-address {
            border: 1px dashed #2f75ff;
            border-radius: 12px;
            min-height: 58px;
            background: #fff;
            color: #0068d9;
            font-size: 16px;
            font-weight: 900;
            cursor: pointer;
        }

        .checkout-delivery-option,
        .checkout-pay-option {
            border: 1px solid #0068d9;
            border-radius: 10px;
            padding: 10px 12px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 12px;
            color: var(--ink);
        }

        .checkout-pay-methods {
            display: grid;
            gap: 10px;
        }

        .checkout-pay-option {
            cursor: pointer;
        }

        .checkout-pay-option input {
            width: 18px;
            height: 18px;
            accent-color: #0068d9;
        }

        .checkout-pay-option.active {
            border-color: #e60012;
            box-shadow: 0 0 0 3px rgba(230, 0, 18, 0.08);
        }

        .checkout-delivery-option b,
        .checkout-pay-option b {
            display: block;
            margin-bottom: 2px;
            font-size: 16px;
        }

        .checkout-delivery-free {
            color: #059669;
            font-weight: 900;
        }

        .checkout-agreement {
            display: flex;
            gap: 8px;
            align-items: center;
            margin: 12px 0;
            color: #334155;
            font-size: 14px;
            line-height: 1.4;
        }

        .checkout-agreement input {
            width: 16px;
            height: 16px;
            flex: 0 0 16px;
            accent-color: var(--blue);
        }

        .checkout-note {
            width: 100%;
            min-height: 86px;
            resize: vertical;
            border-radius: 12px;
            padding: 12px;
            line-height: 1.7;
        }

        .checkout-note-count {
            text-align: right;
            color: var(--muted);
            margin-top: 6px;
            font-size: 13px;
        }

        .checkout-items {
            display: grid;
            gap: 10px;
        }

        .checkout-item {
            display: grid;
            grid-template-columns: 60px minmax(0, 1fr) auto;
            gap: 10px;
            align-items: center;
            padding-bottom: 10px;
            border-bottom: 1px solid #edf1f7;
        }

        .checkout-item:last-child {
            border-bottom: 0;
        }

        .checkout-item-img {
            width: 60px;
            height: 60px;
            border: 1px solid #e5eaf2;
            border-radius: 10px;
            display: grid;
            place-items: center;
            background: #fff;
            overflow: hidden;
        }

        .checkout-item-img img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .checkout-item-name {
            font-weight: 900;
            color: var(--ink);
            margin-bottom: 5px;
        }

        .checkout-item-meta {
            color: var(--muted);
            font-size: 13px;
            line-height: 1.6;
        }

        .checkout-item-price {
            color: var(--ink);
            font-weight: 900;
            text-align: right;
        }

        .checkout-pay-total {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            padding-top: 14px;
            border-top: 2px solid #111827;
            margin-top: 10px;
        }

        .checkout-pay-total b {
            color: #e60012;
            font-size: 32px;
            line-height: 1;
        }

        .checkout-submit {
            width: 100%;
            height: 54px;
            border-radius: 12px;
            border: 0;
            background: #e60012;
            color: #fff;
            cursor: pointer;
            font-size: 18px;
            font-weight: 900;
            box-shadow: 0 12px 24px rgba(230, 0, 18, .18);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .checkout-submit:disabled {
            background: #cbd5e1;
            box-shadow: none;
            cursor: not-allowed;
        }

        .checkout-condition-note {
            display: flex;
            align-items: flex-start;
            gap: 8px;
            margin-top: 12px;
            padding: 10px 12px;
            border-radius: 10px;
            border: 1px solid #bbf7d0;
            background: #f0fdf4;
            color: #047857;
            font-size: 13px;
            font-weight: 850;
            line-height: 1.5;
        }

        .checkout-condition-note .kwc-icon {
            width: 16px;
            height: 16px;
            margin-top: 2px;
            flex: 0 0 auto;
            stroke-width: 2.4;
        }

        .checkout-trust-strip {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 8px;
            padding-top: 14px;
            border-top: 1px solid #e5eaf2;
            color: #0068d9;
            font-weight: 900;
            text-align: center;
            font-size: 12px;
        }

        .cart-trust-row {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            padding-top: 16px;
            border-top: 1px solid #e5eaf2;
        }

        .cart-trust-item {
            text-align: center;
            color: #475569;
            font-size: 12px;
            line-height: 1.5;
        }

        .cart-trust-item b {
            display: block;
            color: var(--ink);
            font-size: 13px;
        }

        .cart-trust-icon {
            width: 34px;
            height: 34px;
            margin: 0 auto 6px;
            border-radius: 50%;
            display: grid;
            place-items: center;
            background: #ecfdf5;
            color: #047857;
            font-weight: 900;
            font-size: 0;
        }

        .cart-recommend-section {
            background: #fff;
            border: 1px solid #e5eaf2;
            border-radius: 14px;
            padding: 20px;
        }

        .cart-recommend-head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 12px;
            margin-bottom: 16px;
        }

        .cart-recommend-head h3 {
            margin: 0;
            font-size: 24px;
        }

        .cart-recommend-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 16px;
        }

        .cart-recommend-card {
            border: 1px solid #e5eaf2;
            border-radius: 12px;
            padding: 12px;
            display: grid;
            gap: 8px;
            background: #fff;
        }

        .cart-recommend-card img,
        .cart-recommend-card .image-fallback {
            width: 100%;
            aspect-ratio: 1 / 1;
            object-fit: contain;
            border-radius: 10px;
            background: #fff;
            border: 1px solid #edf1f7;
            display: grid;
            place-items: center;
            color: #64748b;
            font-weight: 900;
        }

        .cart-recommend-card b {
            font-size: 15px;
            line-height: 1.35;
        }

        .cart-recommend-price {
            color: #e60012;
            font-size: 18px;
            font-weight: 900;
        }

        .cart-empty-actions {
            display: flex;
            gap: 10px;
            justify-content: center;
            flex-wrap: wrap;
            margin-top: 14px;
        }

        .hidden {
            display: none;
        }

        .empty {
            padding: 32px;
            text-align: center;
            color: var(--muted);
            background: #f8fafc;
            border-radius: var(--radius);
        }

        .detail-panel {
            position: fixed;
            right: 0;
            top: 0;
            width: min(520px, 100vw);
            height: 100vh;
            background: #fff;
            border-left: 1px solid var(--line);
            box-shadow: -18px 0 42px rgba(15, 23, 42, .16);
            padding: 22px;
            overflow: auto;
            z-index: 35;
        }

        body.detail-scroll-locked {
            position: fixed;
            left: 0;
            right: 0;
            width: 100%;
            overflow: hidden;
        }

        .detail-panel > .detail-title {
            position: sticky;
            top: -22px;
            z-index: 8;
            margin: -22px -22px 16px;
            padding: 16px 22px 12px;
            background: rgba(255, 255, 255, .96);
            border-bottom: 1px solid #e5eaf2;
            backdrop-filter: blur(10px);
        }

        .detail-close-button {
            width: 36px;
            min-width: 36px;
            height: 36px;
            padding: 0;
            border-radius: 999px;
            font-size: 20px;
            line-height: 1;
        }

        .part-variant-head {
            align-items: center;
        }

        .part-variant-tools {
            display: inline-flex;
            align-items: center;
            justify-content: flex-end;
            gap: 8px;
            flex-wrap: wrap;
        }

        .part-variant-retry {
            min-height: 30px;
            padding: 0 10px;
            font-size: 12px;
        }

        .detail-panel.hidden {
            display: none;
        }

        .auth-modal {
            position: fixed;
            inset: 0;
            background: rgba(15, 23, 42, .48);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 18px;
            z-index: 40;
        }

        .auth-modal.hidden {
            display: none;
        }

        .auth-card {
            width: min(420px, 100%);
            background: #fff;
            border-radius: var(--radius);
            border: 1px solid var(--line);
            box-shadow: 0 24px 64px rgba(15, 23, 42, .22);
            padding: 20px;
        }

        .auth-card h3 {
            margin: 0;
            font-size: 18px;
        }

        .auth-form {
            display: grid;
            gap: 10px;
            margin-top: 16px;
        }

        .auth-tabs {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 8px;
        }

        .auth-tabs button {
            height: 38px;
            border: 1px solid var(--line);
            border-radius: 6px;
            background: #f8fafc;
            color: var(--ink);
            cursor: pointer;
            font-weight: 700;
        }

        .auth-tabs button.active {
            border-color: var(--blue);
            background: #eff6ff;
            color: var(--blue);
        }

        .code-row {
            display: grid;
            grid-template-columns: 1fr 130px;
            gap: 8px;
        }

        .code-row.hidden {
            display: none;
        }

        .auth-form .hidden {
            display: none;
        }

        .auth-help {
            margin-top: 10px;
            color: var(--muted);
            font-size: 12px;
            line-height: 1.7;
        }

        .detail-title {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 16px;
        }

        .detail-title h3 {
            margin: 0;
            font-size: 21px;
        }

        .viewer-box {
            min-height: 236px;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: var(--radius);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #475569;
            margin-bottom: 16px;
            text-align: center;
            padding: 16px;
            position: relative;
            overflow: hidden;
        }

        .viewer-box img {
            max-width: 100%;
            max-height: 220px;
            width: auto;
            height: auto;
            object-fit: contain;
            display: block;
        }

        .viewer-3d-link {
            position: absolute;
            top: 12px;
            right: 12px;
            height: 34px;
            padding: 0 12px;
            border-radius: 999px;
            background: rgba(37, 99, 235, .94);
            color: #fff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: 800;
            text-decoration: none;
            box-shadow: 0 8px 20px rgba(37, 99, 235, .22);
        }

        .viewer-3d-link:hover {
            background: #1d4ed8;
        }

        .viewer-empty {
            color: var(--muted);
            line-height: 1.7;
        }

        .part-page-breadcrumb {
            display: flex;
            align-items: center;
            gap: 8px;
            color: var(--muted);
            font-size: 14px;
            margin-bottom: 18px;
        }

        .part-page-breadcrumb button {
            border: 0;
            background: transparent;
            color: inherit;
            cursor: pointer;
            padding: 0;
            font: inherit;
        }

        .part-page-layout {
            display: grid;
            grid-template-columns: minmax(0, 1.18fr) minmax(380px, .82fr);
            gap: 30px;
            align-items: start;
        }

        .part-media-card,
        .part-buy-card,
        .part-info-card,
        .part-recommend-card {
            background: #fff;
            border: 1px solid #e5eaf2;
            border-radius: 12px;
            box-shadow: 0 14px 34px rgba(15, 23, 42, .045);
        }

        .part-media-card {
            padding: 18px;
        }

        .part-main-image {
            position: relative;
            min-height: 520px;
            border-radius: 12px;
            background: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        .part-main-image img {
            max-width: 92%;
            max-height: 490px;
            object-fit: contain;
            display: block;
        }

        .part-main-image.empty {
            min-height: 420px;
        }

        .part-3d-button {
            position: absolute;
            left: 16px;
            top: 16px;
            height: 48px;
            border-radius: 12px;
            padding: 0 16px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: #0b63ce;
            color: #fff;
            font-weight: 900;
            box-shadow: 0 10px 24px rgba(37, 99, 235, .22);
        }

        .part-thumb-strip {
            display: grid;
            grid-template-columns: repeat(6, minmax(0, 1fr));
            gap: 12px;
            margin-top: 18px;
        }

        .part-thumb {
            min-height: 96px;
            border: 1px solid #e5eaf2;
            border-radius: 10px;
            background: #fff;
            cursor: pointer;
            padding: 7px;
            position: relative;
        }

        .part-thumb.active {
            border-color: #e60012;
            box-shadow: 0 0 0 2px rgba(230, 0, 18, .12);
        }

        .part-thumb img {
            width: 100%;
            height: 78px;
            object-fit: contain;
            display: block;
        }

        .part-buy-card {
            padding: 22px;
        }

        .part-page-title {
            margin: 0 0 8px;
            font-size: 34px;
            line-height: 1.18;
        }

        .part-page-subtitle {
            margin: 0 0 14px;
            color: var(--muted);
            font-size: 15px;
        }

        .part-page-price {
            display: flex;
            align-items: baseline;
            gap: 14px;
            margin: 18px 0 10px;
        }

        .part-page-price b {
            color: #e60012;
            font-size: 44px;
            line-height: 1;
        }

        .part-page-price span {
            color: var(--muted);
            font-size: 14px;
        }

        .part-color-info-card {
            display: grid;
            grid-template-columns: auto minmax(0, 1fr) auto;
            align-items: center;
            gap: 12px;
            margin: 14px 0 16px;
            padding: 13px 14px;
            border: 1px solid #dbe5f4;
            border-radius: 12px;
            background: #f8fbff;
        }

        .part-color-info-card .part-color-dot {
            width: 42px;
            height: 42px;
        }

        .part-color-info-card b {
            display: block;
            color: var(--ink);
            font-size: 16px;
            line-height: 1.35;
        }

        .part-color-info-card span {
            display: block;
            color: var(--muted);
            font-size: 12px;
            line-height: 1.45;
            margin-top: 2px;
        }

        .part-color-info-card .btn {
            min-height: 36px;
            padding: 0 12px;
            white-space: nowrap;
        }

        @media (max-width: 520px) {
            .part-color-info-card {
                grid-template-columns: auto minmax(0, 1fr);
            }

            .part-color-info-card .btn {
                grid-column: 1 / -1;
                width: 100%;
            }
        }

        .part-page-tag {
            display: inline-flex;
            align-items: center;
            height: 30px;
            padding: 0 12px;
            border-radius: 999px;
            background: #fff4c2;
            color: #7a4b00;
            font-weight: 800;
            font-size: 13px;
        }

        .part-condition-strip {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 8px;
            margin: 10px 0 8px;
            padding: 10px 12px;
            border-radius: 12px;
            border: 1px solid #bbf7d0;
            background: linear-gradient(135deg, #ecfdf5, #f7fee7);
            color: #065f46;
            font-size: 13px;
            font-weight: 850;
            line-height: 1.4;
        }

        .part-condition-main {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            color: #047857;
            font-weight: 950;
        }

        .part-condition-main .kwc-icon {
            width: 16px;
            height: 16px;
            stroke-width: 2.4;
        }

        .part-section-label {
            display: block;
            margin: 22px 0 12px;
            font-weight: 900;
            color: var(--ink);
        }

        .part-color-grid {
            display: grid;
            grid-template-columns: repeat(6, minmax(0, 1fr));
            gap: 13px;
        }

        .part-current-color-card {
            grid-column: 1 / -1;
            display: grid;
            grid-template-columns: auto minmax(0, 1fr);
            align-items: center;
            gap: 10px;
            padding: 12px;
            border: 1px solid #dbe5f4;
            border-radius: 10px;
            background: #f8fbff;
        }

        .part-current-color-card .part-color-dot {
            width: 34px;
            height: 34px;
        }

        .part-current-color-card b,
        .part-current-color-card span {
            display: block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .part-current-color-card b {
            color: var(--ink);
            font-size: 14px;
            line-height: 1.35;
        }

        .part-current-color-card span {
            color: var(--muted);
            font-size: 12px;
            line-height: 1.4;
            margin-top: 2px;
        }

        .part-color-option {
            border: 0;
            background: transparent;
            color: var(--muted);
            cursor: pointer;
            display: grid;
            gap: 7px;
            justify-items: center;
            font-size: 12px;
            min-width: 0;
        }

        .part-color-dot {
            width: 58px;
            height: 58px;
            border-radius: 50%;
            border: 1px solid #dbe3ef;
            box-shadow: inset 0 1px 8px rgba(255, 255, 255, .35), 0 8px 16px rgba(15, 23, 42, .08);
            position: relative;
            display: block;
            overflow: hidden;
        }

        .part-color-option.active .part-color-dot {
            outline: 4px solid #e60012;
            outline-offset: 4px;
        }

        .part-color-option.active .part-color-dot:after {
            content: "✓";
            position: absolute;
            inset: 0;
            display: grid;
            place-items: center;
            color: #fff;
            font-size: 28px;
            font-weight: 900;
            text-shadow: 0 1px 4px rgba(0, 0, 0, .35);
        }

        .part-color-option.unavailable {
            opacity: .48;
            cursor: not-allowed;
        }

        .part-color-option span,
        .part-color-option small {
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .part-qty-row {
            display: flex;
            align-items: center;
            gap: 14px;
        }

        .part-qty-control {
            display: grid;
            grid-template-columns: 52px 76px 52px;
            height: 50px;
            border: 1px solid #dbe3ef;
            border-radius: 8px;
            overflow: hidden;
            background: #fff;
        }

        .part-qty-control button,
        .part-qty-control input {
            border: 0;
            background: #fff;
            text-align: center;
            font-size: 18px;
        }

        .part-qty-control button {
            cursor: pointer;
            background: #f8fafc;
        }

        .part-action-grid {
            display: grid;
            gap: 12px;
            margin-top: 22px;
        }

        .part-action-grid .btn {
            height: 58px;
            font-size: 18px;
            border-radius: 8px;
        }

        .part-action-grid .btn.buy-now {
            background: #fff;
            color: #e60012;
            border: 1px solid #e60012;
        }

        .part-trust-row {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 12px;
            margin-top: 18px;
        }

        .part-trust-row span {
            min-height: 58px;
            border: 1px solid #e5eaf2;
            border-radius: 8px;
            display: grid;
            place-items: center;
            text-align: center;
            font-weight: 800;
            color: #334155;
            font-size: 13px;
        }

        .part-info-card {
            margin-top: 24px;
            padding: 18px;
        }

        .part-info-tabs {
            display: flex;
            gap: 22px;
            border-bottom: 1px solid #e5eaf2;
            margin: -18px -18px 18px;
            padding: 0 18px;
            overflow-x: auto;
        }

        .part-info-tabs button {
            height: 58px;
            display: inline-flex;
            align-items: center;
            flex: 0 0 auto;
            border: 0;
            background: transparent;
            padding: 0;
            cursor: pointer;
            font: inherit;
            font-weight: 900;
            color: var(--muted);
        }

        .part-info-tabs button.active {
            color: #0b63ce;
            box-shadow: inset 0 -4px 0 #0b63ce;
        }

        .part-info-panel {
            min-height: 220px;
        }

        .part-info-summary-grid,
        .part-color-detail-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 12px;
        }

        .part-info-tile,
        .part-color-detail-card {
            border: 1px solid #e5eaf2;
            border-radius: 10px;
            background: #f8fafc;
            padding: 14px;
            min-width: 0;
        }

        .part-info-tile span,
        .part-color-detail-card span {
            display: block;
            margin-bottom: 6px;
            color: var(--muted);
            font-size: 12px;
            font-weight: 800;
        }

        .part-info-tile b,
        .part-color-detail-card b {
            display: block;
            color: var(--ink);
            font-size: 16px;
            line-height: 1.45;
            word-break: break-word;
        }

        .part-info-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 14px;
        }

        .part-color-summary {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 16px;
            margin-bottom: 14px;
            border: 1px solid #dbe7f5;
            border-radius: 12px;
            background: linear-gradient(180deg, #f8fbff, #fff);
        }

        .part-color-summary .part-color-dot {
            width: 44px;
            height: 44px;
            flex: 0 0 44px;
        }

        .part-color-summary b {
            display: block;
            color: var(--ink);
            font-size: 18px;
            line-height: 1.35;
        }

        .part-color-summary span {
            color: var(--muted);
            font-size: 13px;
        }

        .spec-table {
            border: 1px solid #e5eaf2;
            border-radius: 10px;
            overflow: hidden;
        }

        .spec-table.is-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .spec-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
        }

        .spec-row span,
        .spec-row b {
            padding: 16px;
            border-bottom: 1px solid #e5eaf2;
        }

        .spec-row:last-child span,
        .spec-row:last-child b {
            border-bottom: 0;
        }

        .spec-row span {
            background: #f8fafc;
            color: var(--ink);
        }

        .spec-row b {
            font-weight: 500;
            color: #475569;
            word-break: break-word;
        }

        .part-description {
            color: #334155;
            line-height: 1.9;
            font-size: 15px;
        }

        .part-related-codes {
            margin-top: 14px;
            color: var(--muted);
            font-size: 13px;
            line-height: 1.7;
        }

        .part-recommend-card {
            margin-top: 24px;
            padding: 18px;
        }

        .part-recommend-card.hidden {
            display: none;
        }

        .part-recommend-list {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 16px;
        }

        .part-mini-card {
            border: 1px solid #e5eaf2;
            border-radius: 10px;
            padding: 14px;
            background: #fff;
            display: grid;
            gap: 8px;
        }

        .part-mini-card img {
            width: 100%;
            height: 150px;
            object-fit: contain;
        }

        .part-mini-card b {
            font-size: 15px;
        }

        .part-mini-card .mini-price {
            color: #e60012;
            font-size: 20px;
            font-weight: 900;
        }

        .info-list {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            margin-bottom: 16px;
        }

        .info-item {
            background: #f8fafc;
            border: 1px solid var(--line);
            border-radius: 6px;
            padding: 12px;
        }

        .info-item span {
            display: block;
            color: var(--muted);
            font-size: 12px;
            margin-bottom: 5px;
        }

        .info-item b {
            font-size: 14px;
        }

        .notice {
            margin-top: 10px;
            padding: 10px 12px;
            border-radius: 6px;
            background: #eff6ff;
            color: #1d4ed8;
            font-size: 13px;
            line-height: 1.6;
        }

        .notice.warn {
            background: #fffbeb;
            color: #92400e;
        }

        .notice.danger {
            background: #fef2f2;
            color: #b91c1c;
        }

        .account-grid {
            display: grid;
            grid-template-columns: 280px minmax(0, 1fr);
            gap: 22px;
            align-items: start;
        }

        .account-sidebar {
            position: sticky;
            top: 142px;
            border: 1px solid #e6edf6;
            border-radius: 18px;
            background: linear-gradient(180deg, #fff, #f8fbff);
            box-shadow: 0 16px 38px rgba(15, 23, 42, .06);
            overflow: hidden;
        }

        .account-user-card {
            padding: 26px 22px 22px;
            text-align: center;
        }

        .account-avatar {
            width: 104px;
            height: 104px;
            margin: 0 auto 14px;
            border-radius: 28px;
            display: grid;
            place-items: center;
            background: #facc15;
            color: #111827;
            font-size: 24px;
            font-weight: 900;
            box-shadow: inset 0 -8px 0 rgba(0,0,0,.08), 0 12px 28px rgba(234, 179, 8, .22);
        }

        .account-user-card h3 {
            margin: 0 0 8px;
            font-size: 24px;
        }

        .account-member-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 28px;
            padding: 0 12px;
            border-radius: 999px;
            background: #e60012;
            color: #fff;
            font-size: 13px;
            font-weight: 900;
        }

        .account-side-menu {
            display: grid;
            gap: 4px;
            padding: 10px;
            border-top: 1px solid #edf1f7;
        }

        .account-side-menu button {
            min-height: 48px;
            border: 0;
            border-radius: 10px;
            background: transparent;
            color: #334155;
            cursor: pointer;
            text-align: left;
            font-weight: 800;
            padding: 0 14px;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .account-side-menu button.active,
        .account-side-menu button:hover {
            background: #0068d9;
            color: #fff;
        }

        .orders-page {
            display: grid;
            grid-template-columns: 260px minmax(0, 1fr);
            gap: 24px;
            align-items: start;
        }

        .orders-sidebar {
            position: sticky;
            top: 142px;
            border: 1px solid #e6edf6;
            border-radius: 16px;
            background: linear-gradient(180deg, #fff, #f8fbff);
            box-shadow: 0 16px 38px rgba(15, 23, 42, .06);
            overflow: hidden;
        }

        .orders-user-card {
            padding: 24px 20px 20px;
            text-align: center;
            border-bottom: 1px solid #edf1f7;
        }

        .orders-avatar {
            width: 92px;
            height: 92px;
            margin: 0 auto 14px;
            border-radius: 24px;
            display: grid;
            place-items: center;
            background: #facc15;
            color: #111827;
            font-size: 22px;
            font-weight: 900;
            box-shadow: inset 0 -8px 0 rgba(0,0,0,.08), 0 12px 28px rgba(234, 179, 8, .22);
        }

        .orders-user-card h3 {
            margin: 0;
            font-size: 22px;
        }

        .orders-user-card p {
            margin: 8px 0 12px;
            color: var(--muted);
            font-size: 13px;
            line-height: 1.6;
        }

        .orders-member-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 28px;
            padding: 0 12px;
            border-radius: 999px;
            background: #eff6ff;
            color: #0068d9;
            font-size: 13px;
            font-weight: 900;
        }

        .orders-side-menu {
            display: grid;
            gap: 4px;
            padding: 10px;
        }

        .orders-side-menu button {
            min-height: 46px;
            border: 0;
            border-radius: 10px;
            background: transparent;
            color: #334155;
            cursor: pointer;
            text-align: left;
            font-weight: 800;
            padding: 0 14px;
        }

        .orders-side-menu button.active,
        .orders-side-menu button:hover {
            background: #0068d9;
            color: #fff;
        }

        .orders-main {
            min-width: 0;
            display: grid;
            gap: 16px;
        }

        .orders-title-row {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 16px;
        }

        .orders-title-row h2 {
            margin: 10px 0 8px;
            font-size: 32px;
            letter-spacing: 0;
        }

        .orders-title-row p {
            margin: 0;
            color: var(--muted);
            font-size: 14px;
        }

        .orders-breadcrumb {
            display: flex;
            align-items: center;
            gap: 8px;
            color: var(--muted);
            font-size: 13px;
        }

        .orders-breadcrumb button {
            border: 0;
            background: transparent;
            color: inherit;
            cursor: pointer;
            padding: 0;
            font: inherit;
        }

        .orders-tabs {
            display: flex;
            align-items: center;
            gap: 24px;
            border-bottom: 1px solid #dbe3ef;
            overflow-x: auto;
        }

        .orders-tabs button {
            position: relative;
            min-height: 48px;
            border: 0;
            background: transparent;
            color: #334155;
            cursor: pointer;
            font-size: 15px;
            font-weight: 800;
            white-space: nowrap;
            padding: 0 2px;
        }

        .orders-tabs button.active {
            color: #0068d9;
        }

        .orders-tabs button.active:after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: -1px;
            height: 3px;
            border-radius: 999px;
            background: #0068d9;
        }

        .orders-filter-bar {
            display: grid;
            grid-template-columns: 160px minmax(240px, 420px) auto;
            gap: 12px;
            align-items: center;
        }

        .orders-search {
            position: relative;
        }

        .orders-search span {
            position: absolute;
            right: 12px;
            top: 50%;
            width: 18px;
            height: 18px;
            border: 2px solid #111827;
            border-radius: 50%;
            transform: translateY(-50%);
            pointer-events: none;
        }

        .orders-search span:after {
            content: "";
            position: absolute;
            width: 8px;
            height: 2px;
            right: -6px;
            bottom: -3px;
            background: #111827;
            transform: rotate(45deg);
            border-radius: 999px;
        }

        .orders-search input {
            padding-right: 42px;
        }

        .orders-list {
            display: grid;
            gap: 16px;
        }

        .order-card {
            border: 1px solid #dbe3ef;
            border-radius: 14px;
            background: #fff;
            box-shadow: 0 12px 28px rgba(15, 23, 42, .045);
            overflow: hidden;
        }

        .order-card-head {
            min-height: 54px;
            padding: 14px 18px;
            border-bottom: 1px solid #edf1f7;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 14px;
            color: #334155;
            font-size: 14px;
        }

        .order-card-head strong {
            color: var(--ink);
        }

        .order-status-pill {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 30px;
            border-radius: 999px;
            padding: 0 12px;
            background: #eff6ff;
            color: #0068d9;
            font-weight: 900;
            white-space: nowrap;
        }

        .order-status-pill.pay {
            background: #fff7ed;
            color: #ea580c;
        }

        .order-status-pill.done {
            background: #ecfdf5;
            color: #047857;
        }

        .order-card-body {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 240px;
            gap: 18px;
            padding: 18px;
        }

        .order-item-strip {
            display: grid;
            grid-template-columns: repeat(4, minmax(110px, 1fr));
            gap: 14px;
        }

        .order-item-card {
            min-width: 0;
            display: grid;
            gap: 8px;
        }

        .order-item-image {
            height: 86px;
            border: 1px solid #e6edf6;
            border-radius: 10px;
            background: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            color: #64748b;
            font-weight: 800;
            text-align: center;
        }

        .order-item-image img {
            width: 92%;
            height: 92%;
            object-fit: contain;
        }

        .order-image-placeholder {
            display: flex;
            width: 100%;
            height: 100%;
            min-height: 72px;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            gap: 4px;
            padding: 10px;
            color: #64748b;
            background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
            font-size: 12px;
            line-height: 1.35;
        }

        .order-image-placeholder b {
            color: #334155;
            font-size: 13px;
        }

        .order-item-title {
            font-size: 13px;
            font-weight: 800;
            line-height: 1.45;
            color: var(--ink);
            min-height: 36px;
        }

        .order-item-meta {
            color: var(--muted);
            font-size: 12px;
            line-height: 1.5;
        }

        .order-item-price {
            color: #e60012;
            font-size: 13px;
            font-weight: 900;
        }

        .order-more-items {
            border: 1px dashed #cbd5e1;
            border-radius: 10px;
            min-height: 106px;
            display: grid;
            place-items: center;
            color: var(--muted);
            font-weight: 800;
            background: #f8fafc;
        }

        .order-card-summary {
            border-left: 1px solid #edf1f7;
            padding-left: 18px;
            display: grid;
            gap: 10px;
            align-content: center;
        }

        .order-card-amount {
            color: #e60012;
            font-size: 30px;
            font-weight: 900;
            line-height: 1;
        }

        .order-card-logistics {
            color: var(--muted);
            font-size: 13px;
            line-height: 1.6;
        }

        .order-card-actions {
            display: grid;
            gap: 8px;
        }

        .order-card-actions .btn {
            width: 100%;
        }

        .order-card-actions .btn.pay {
            background: #e60012;
        }

        .orders-empty {
            border: 1px dashed #cbd5e1;
            border-radius: 14px;
            background: #fff;
            padding: 32px;
            text-align: center;
            color: var(--muted);
            line-height: 1.8;
        }

        .orders-empty h3 {
            margin: 0 0 8px;
            color: var(--ink);
            font-size: 22px;
        }

        .orders-empty-actions {
            display: flex;
            justify-content: center;
            gap: 10px;
            flex-wrap: wrap;
            margin-top: 16px;
        }

        .orders-pager {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            color: var(--muted);
            font-size: 13px;
        }

        .order-detail-page {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 360px;
            gap: 24px;
            align-items: start;
        }

        .order-detail-main {
            display: grid;
            gap: 14px;
            min-width: 0;
        }

        .order-detail-title-row {
            display: flex;
            justify-content: space-between;
            gap: 14px;
            align-items: flex-start;
            margin-bottom: 18px;
        }

        .order-detail-title-row h2 {
            margin: 8px 0 4px;
            font-size: 34px;
        }

        .order-status-hero,
        .order-detail-card,
        .order-detail-side-card {
            background: #fff;
            border: 1px solid #dbe3ef;
            border-radius: 16px;
            box-shadow: 0 14px 34px rgba(15, 23, 42, .045);
        }

        .order-status-hero {
            display: grid;
            grid-template-columns: 72px minmax(0, 1fr) auto;
            gap: 18px;
            align-items: center;
            padding: 22px;
            background: linear-gradient(135deg, #eff6ff 0%, #fff 72%);
            border-color: #bfdbfe;
        }

        .order-status-icon {
            width: 72px;
            height: 72px;
            border-radius: 50%;
            background: #0068d9;
            color: #fff;
            display: grid;
            place-items: center;
            font-size: 34px;
            font-weight: 900;
        }

        .order-status-icon .kwc-icon {
            width: 34px;
            height: 34px;
        }

        .order-status-hero h3 {
            margin: 0 0 6px;
            color: #0057c2;
            font-size: 28px;
        }

        .order-status-hero p {
            margin: 0;
            color: var(--muted);
            line-height: 1.65;
        }

        .copy-chip {
            border: 0;
            background: #eef4ff;
            color: #0057c2;
            border-radius: 999px;
            padding: 4px 10px;
            cursor: pointer;
            font-weight: 800;
            margin-left: 6px;
        }

        .order-detail-card {
            padding: 18px;
        }

        .order-detail-card-head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 12px;
            padding-bottom: 14px;
            border-bottom: 1px solid #edf1f7;
            margin-bottom: 14px;
        }

        .order-detail-card-head h3 {
            margin: 0;
            font-size: 20px;
        }

        .logistics-timeline {
            display: grid;
            gap: 0;
        }

        .logistics-node {
            display: grid;
            grid-template-columns: 120px 20px minmax(0, 1fr);
            gap: 12px;
            min-height: 58px;
            color: var(--muted);
        }

        .logistics-node time {
            font-size: 13px;
            line-height: 1.55;
        }

        .logistics-dot {
            position: relative;
            width: 14px;
            height: 14px;
            margin-top: 3px;
            border-radius: 50%;
            background: #22c55e;
            box-shadow: 0 0 0 4px #dcfce7;
        }

        .logistics-node:not(:last-child) .logistics-dot:after {
            content: "";
            position: absolute;
            left: 6px;
            top: 16px;
            width: 2px;
            height: 52px;
            background: #bbf7d0;
        }

        .logistics-node:first-child .logistics-dot {
            background: #0068d9;
            box-shadow: 0 0 0 4px #dbeafe;
        }

        .logistics-text b {
            display: block;
            color: #0057c2;
            margin-bottom: 4px;
        }

        .order-goods-table {
            display: grid;
            gap: 0;
        }

        .order-goods-head,
        .order-goods-row {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 110px 90px 110px;
            gap: 14px;
            align-items: center;
        }

        .order-goods-head {
            color: var(--muted);
            font-size: 13px;
            font-weight: 800;
            padding: 0 0 12px;
            border-bottom: 1px solid #edf1f7;
        }

        .order-goods-row {
            padding: 14px 0;
            border-bottom: 1px solid #edf1f7;
        }

        .order-goods-row:last-child {
            border-bottom: 0;
        }

        .order-goods-product {
            display: grid;
            grid-template-columns: 82px minmax(0, 1fr);
            gap: 14px;
            align-items: center;
            min-width: 0;
        }

        .order-goods-image {
            height: 72px;
            border: 1px solid #e5eaf2;
            border-radius: 10px;
            background: #fff;
            display: grid;
            place-items: center;
            overflow: hidden;
            color: var(--muted);
            font-weight: 900;
        }

        .order-goods-image img {
            width: 92%;
            height: 92%;
            object-fit: contain;
            display: block;
        }

        .order-goods-name {
            font-weight: 900;
            color: var(--ink);
            line-height: 1.45;
        }

        .order-goods-meta {
            margin-top: 4px;
            color: var(--muted);
            font-size: 13px;
            line-height: 1.55;
        }

        .order-goods-money {
            color: #e60012;
            font-weight: 900;
        }

        .order-amount-box {
            display: grid;
            gap: 8px;
            max-width: 340px;
            margin-left: auto;
            padding-top: 14px;
            border-top: 1px solid #edf1f7;
        }

        .order-amount-line {
            display: flex;
            justify-content: space-between;
            gap: 18px;
            color: #334155;
        }

        .order-amount-line.total {
            align-items: baseline;
            color: var(--ink);
            font-weight: 900;
            padding-top: 8px;
        }

        .order-amount-line.total b {
            color: #e60012;
            font-size: 32px;
        }

        .order-info-strip {
            display: grid;
            grid-template-columns: 56px minmax(0, 1fr);
            gap: 14px;
            align-items: center;
            color: var(--muted);
            line-height: 1.7;
        }

        .order-info-icon {
            width: 52px;
            height: 52px;
            border-radius: 50%;
            background: #eff6ff;
            color: #0068d9;
            display: grid;
            place-items: center;
            font-size: 24px;
            font-weight: 900;
        }

        .order-info-icon .kwc-icon {
            width: 26px;
            height: 26px;
        }

        .order-detail-side-card {
            position: sticky;
            top: 18px;
            padding: 20px;
            display: grid;
            gap: 14px;
        }

        .order-side-list {
            display: grid;
            gap: 10px;
        }

        .order-side-line {
            display: flex;
            justify-content: space-between;
            gap: 16px;
            color: var(--muted);
            line-height: 1.55;
        }

        .order-side-line b {
            color: var(--ink);
            text-align: right;
        }

        .order-side-status {
            min-height: 56px;
            border-radius: 14px;
            background: #eff6ff;
            color: #0068d9;
            display: grid;
            place-items: center;
            font-size: 24px;
            font-weight: 900;
        }

        .order-side-actions {
            display: grid;
            gap: 10px;
        }

        .order-side-actions .btn {
            width: 100%;
        }

        .order-help-links {
            border-top: 1px solid #edf1f7;
            padding-top: 14px;
            display: grid;
            gap: 8px;
        }

        .order-help-links button {
            border: 0;
            background: transparent;
            color: #0068d9;
            text-align: left;
            cursor: pointer;
            font-weight: 800;
            padding: 6px 0;
        }

        .orders-pager div {
            display: flex;
            gap: 8px;
        }

        .orders-payment-box {
            border: 1px solid #bfdbfe;
            border-radius: 12px;
            background: #eff6ff;
            padding: 14px;
            display: grid;
            grid-template-columns: minmax(0, 1fr) 140px;
            gap: 12px;
            align-items: center;
        }

        .orders-payment-box.hidden {
            display: none;
        }

        .orders-payment-box p {
            margin: 6px 0 0;
            color: #1d4ed8;
            font-size: 13px;
        }

        .orders-payment-qr {
            width: 140px;
            min-height: 140px;
            border: 1px solid #bfdbfe;
            border-radius: 10px;
            background: #fff;
            display: grid;
            place-items: center;
            color: var(--muted);
            font-size: 12px;
            text-align: center;
            padding: 8px;
        }

        .orders-payment-qr svg {
            width: 100%;
            height: auto;
        }

        .orders-payment-code {
            grid-column: 1 / -1;
            border-radius: 8px;
            background: #fff;
            color: #334155;
            font-size: 12px;
            line-height: 1.6;
            padding: 8px;
            word-break: break-all;
        }

        .account-main {
            display: grid;
            gap: 18px;
        }

        .account-hero {
            display: flex;
            justify-content: space-between;
            gap: 16px;
            align-items: flex-start;
        }

        .account-hero h2 {
            margin: 0 0 8px;
            font-size: 30px;
        }

        .account-hero p {
            margin: 0;
            color: var(--muted);
        }

        .account-stats-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 14px;
        }

        .account-stat-card {
            min-height: 142px;
            border: 1px solid #e6edf6;
            border-radius: 14px;
            background: #fff;
            padding: 18px;
            display: grid;
            align-content: space-between;
            box-shadow: 0 12px 28px rgba(15, 23, 42, .045);
        }

        .account-stat-icon {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            display: grid;
            place-items: center;
            font-weight: 900;
        }

        .account-stat-card b {
            display: block;
            color: #e60012;
            font-size: 34px;
            line-height: 1;
        }

        .account-stat-card span {
            color: #334155;
            font-weight: 800;
        }

        .account-section-card {
            border: 1px solid #e6edf6;
            border-radius: 14px;
            background: #fff;
            padding: 18px;
            box-shadow: 0 12px 28px rgba(15, 23, 42, .035);
        }

        .account-section-head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 12px;
            margin-bottom: 14px;
        }

        .account-section-head h3 {
            margin: 0;
            font-size: 20px;
        }

        .account-orders-grid,
        .account-shortage-list {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 12px;
        }

        .account-order-card,
        .account-shortage-card {
            border: 1px solid #edf1f7;
            border-radius: 12px;
            background: #fff;
            padding: 14px;
            display: grid;
            gap: 10px;
        }

        .account-order-top,
        .account-shortage-top {
            display: flex;
            justify-content: space-between;
            gap: 10px;
            align-items: flex-start;
        }

        .account-order-meta,
        .account-shortage-meta {
            color: var(--muted);
            font-size: 13px;
            line-height: 1.7;
        }

        .account-order-amount {
            color: #e60012;
            font-size: 20px;
            font-weight: 900;
        }

        .account-card-actions {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
        }

        .account-address-layout {
            display: grid;
            grid-template-columns: minmax(0, .95fr) minmax(320px, .8fr);
            gap: 16px;
        }

        .account-placeholder-row {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 12px;
        }

        .account-placeholder-card {
            border: 1px dashed #cbd5e1;
            border-radius: 12px;
            background: #f8fafc;
            color: #64748b;
            padding: 16px;
            line-height: 1.7;
        }

        .address-form {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
        }

        .address-form .full {
            grid-column: 1 / -1;
        }

        .address-list {
            display: grid;
            gap: 10px;
            margin-top: 12px;
        }

        .address-card {
            border: 1px solid var(--line);
            border-radius: 6px;
            padding: 12px;
            background: #fff;
        }

        .address-card strong {
            display: block;
            margin-bottom: 6px;
        }

        .address-card p {
            margin: 0;
            color: var(--muted);
            font-size: 13px;
            line-height: 1.7;
        }

        .address-card .row-actions {
            display: flex;
            gap: 8px;
            margin-top: 10px;
        }

        .addresses-page {
            display: grid;
            grid-template-columns: 300px minmax(0, 1fr);
            gap: 24px;
            align-items: start;
        }

        .addresses-main {
            display: grid;
            gap: 18px;
            min-width: 0;
        }

        .addresses-title-row {
            display: flex;
            justify-content: space-between;
            gap: 14px;
            align-items: flex-start;
        }

        .addresses-title-row h2 {
            margin: 8px 0 4px;
            font-size: 34px;
        }

        .addresses-toolbar {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            align-items: center;
        }

        .addresses-page .address-summary-grid {
            display: none;
        }

        .address-summary-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 12px;
        }

        .address-summary-card {
            border: 1px solid #dbe3ef;
            border-radius: 14px;
            background: #fff;
            padding: 16px;
            box-shadow: 0 12px 28px rgba(15, 23, 42, .04);
        }

        .address-summary-card b {
            display: block;
            color: var(--ink);
            font-size: 26px;
            line-height: 1;
            margin-bottom: 8px;
        }

        .addresses-layout {
            display: grid;
            gap: 18px;
            align-items: start;
        }

        .addresses-layout.hidden {
            display: none;
        }

        .addresses-list-view.hidden,
        .address-editor-card.hidden {
            display: none;
        }

        .addresses-card,
        .address-editor-card {
            border: 1px solid #dbe3ef;
            border-radius: 16px;
            background: #fff;
            box-shadow: 0 14px 34px rgba(15, 23, 42, .045);
        }

        .addresses-card {
            padding: 0;
            border: 0;
            background: transparent;
            box-shadow: none;
        }

        .address-editor-card {
            max-width: 980px;
            padding: 24px;
        }

        .address-section-title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 12px;
            margin-bottom: 14px;
            padding-bottom: 14px;
            border-bottom: 1px solid #edf1f7;
        }

        .address-section-title h3 {
            margin: 0;
            font-size: 20px;
        }

        .addresses-list-view .address-section-title {
            margin-bottom: 18px;
        }

        .addresses-list-view .address-list {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 22px;
            margin-top: 0;
        }

        .address-card.modern {
            position: relative;
            border: 1px solid #dbe3ef;
            border-radius: 18px;
            padding: 28px;
            min-height: 230px;
            display: grid;
            align-content: start;
            gap: 16px;
            box-shadow: 0 14px 34px rgba(15, 23, 42, .055);
        }

        .address-card.modern.default {
            border-color: #f1b7b7;
            box-shadow: 0 0 0 2px rgba(230, 0, 18, .06), 0 14px 34px rgba(15, 23, 42, .055);
        }

        .address-card-head {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 12px;
            margin-bottom: 8px;
        }

        .address-card-head strong {
            margin: 0;
            font-size: 24px;
            line-height: 1.1;
        }

        .address-default-badge {
            position: absolute;
            top: 20px;
            right: 20px;
            display: inline-flex;
            align-items: center;
            min-height: 32px;
            padding: 0 16px;
            border-radius: 999px;
            background: #e60012;
            color: #fff;
            font-size: 14px;
            font-weight: 900;
            white-space: nowrap;
        }

        .address-common-badge {
            background: #f1f5f9;
            color: #64748b;
        }

        .address-card-line {
            display: grid;
            grid-template-columns: 30px minmax(0, 1fr);
            align-items: start;
            gap: 12px;
            color: #1f2937;
            font-size: 16px;
            line-height: 1.65;
        }

        .address-card-line strong {
            font-size: 22px;
        }

        .address-card-contact {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(150px, auto);
            gap: 14px;
            align-items: center;
            padding-right: 116px;
        }

        .address-mini-icon {
            width: 24px;
            height: 24px;
            border: 2px solid #111827;
            border-radius: 999px;
            display: inline-block;
            position: relative;
            margin-top: 2px;
        }

        .address-mini-icon.user:after {
            content: "";
            position: absolute;
            left: -5px;
            right: -5px;
            bottom: -10px;
            height: 11px;
            border: 2px solid #111827;
            border-top: 0;
            border-radius: 0 0 14px 14px;
        }

        .address-mini-icon.phone {
            border-radius: 5px;
            width: 15px;
            margin-left: 5px;
        }

        .address-mini-icon.phone:after {
            content: "";
            position: absolute;
            left: 5px;
            bottom: 2px;
            width: 3px;
            height: 3px;
            border-radius: 50%;
            background: #111827;
        }

        .address-mini-icon.pin {
            transform: rotate(45deg);
            border-radius: 50% 50% 50% 0;
        }

        .address-mini-icon.pin:after {
            content: "";
            position: absolute;
            left: 6px;
            top: 6px;
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: #111827;
        }

        .address-tag {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            width: fit-content;
            min-height: 34px;
            padding: 0 13px;
            border-radius: 999px;
            background: #f1f5f9;
            color: #334155;
            font-weight: 800;
        }

        .address-card-address {
            color: #334155;
            line-height: 1.7;
            margin: 0;
        }

        .address-card-meta {
            color: var(--muted);
            font-size: 12px;
            margin-top: 6px;
        }

        .address-card.modern .row-actions {
            display: flex;
            align-items: center;
            gap: 18px;
            margin-top: auto;
            padding-top: 12px;
        }

        .address-text-action {
            border: 0;
            background: transparent;
            color: #0068d9;
            font-weight: 900;
            padding: 0;
            cursor: pointer;
        }

        .address-delete-action {
            color: #475569;
        }

        .address-action-divider {
            width: 1px;
            height: 18px;
            background: #dbe3ef;
        }

        .address-default-action {
            margin-left: auto;
            min-height: 46px;
            padding: 0 20px;
            border-radius: 8px;
            border: 1px solid #0068d9;
            color: #0068d9;
            background: #fff;
            font-weight: 900;
            cursor: pointer;
        }

        .address-default-action:disabled {
            border-color: transparent;
            background: transparent;
            color: #e60012;
            cursor: default;
        }

        .address-add-card {
            min-height: 210px;
            border: 2px dashed #2f75ff;
            border-radius: 18px;
            background: rgba(255,255,255,.62);
            display: grid;
            place-items: center;
            color: #0068d9;
            font-size: 22px;
            font-weight: 900;
            cursor: pointer;
            transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
        }

        .address-add-card:hover {
            transform: translateY(-2px);
            background: #fff;
            box-shadow: 0 18px 36px rgba(0, 104, 217, .12);
        }

        .address-add-card-inner {
            display: grid;
            justify-items: center;
            gap: 16px;
        }

        .address-plus-icon {
            width: 74px;
            height: 74px;
            border: 4px solid #0068d9;
            border-radius: 50%;
            position: relative;
        }

        .address-plus-icon:before,
        .address-plus-icon:after {
            content: "";
            position: absolute;
            left: 50%;
            top: 50%;
            width: 34px;
            height: 4px;
            border-radius: 999px;
            background: #0068d9;
            transform: translate(-50%, -50%);
        }

        .address-plus-icon:after {
            transform: translate(-50%, -50%) rotate(90deg);
        }

        .address-form-section {
            padding: 18px 0;
            border-top: 1px solid #edf1f7;
        }

        .address-form-section:first-of-type {
            border-top: 0;
            padding-top: 0;
        }

        .address-form-section h4 {
            margin: 0 0 14px;
            font-size: 18px;
        }

        .address-field {
            display: grid;
            gap: 7px;
        }

        .address-field label {
            font-weight: 800;
            color: var(--ink);
        }

        .required-mark {
            color: #e60012;
        }

        .address-field-hint {
            color: var(--muted);
            font-size: 12px;
            line-height: 1.5;
        }

        .address-form textarea {
            min-height: 96px;
            resize: vertical;
            line-height: 1.7;
        }

        .address-textarea-row {
            position: relative;
        }

        .address-char-count {
            position: absolute;
            right: 12px;
            bottom: 10px;
            color: var(--muted);
            font-size: 12px;
        }

        .address-default-row {
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: 800;
            color: var(--ink);
        }

        .address-default-row input {
            width: 20px;
            height: 20px;
        }

        .address-form-actions {
            display: flex;
            justify-content: flex-end;
            gap: 12px;
            flex-wrap: wrap;
            padding-top: 18px;
            border-top: 1px solid #edf1f7;
        }

        .account-address-summary {
            display: grid;
            gap: 10px;
        }

        .help-center {
            display: grid;
            gap: 18px;
        }

        .help-hero {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 18px;
            align-items: center;
            padding: 26px;
            border: 1px solid var(--line);
            border-radius: 8px;
            background: linear-gradient(135deg, #fff, #f8fbff);
        }

        .help-hero h3 {
            margin: 8px 0 8px;
            font-size: 30px;
            line-height: 1.15;
        }

        .help-hero p {
            margin: 0;
            color: var(--muted);
            line-height: 1.8;
            max-width: 760px;
        }

        .help-hero-actions {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            justify-content: flex-end;
        }

        .help-steps {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 12px;
        }

        .help-step {
            border: 1px solid var(--line);
            border-radius: 8px;
            background: #fff;
            padding: 16px;
        }

        .help-step b {
            display: block;
            margin-bottom: 8px;
            color: var(--ink);
            font-size: 16px;
        }

        .help-step p {
            margin: 0;
            color: var(--muted);
            font-size: 13px;
            line-height: 1.7;
        }

        .help-section-nav {
            position: sticky;
            top: 0;
            z-index: 10;
            display: flex;
            gap: 10px;
            padding: 12px;
            border: 1px solid var(--line);
            border-radius: 8px;
            background: rgba(255,255,255,.94);
            box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
            overflow-x: auto;
            scrollbar-width: thin;
        }

        .help-section-nav button {
            border: 1px solid #dbe4f0;
            border-radius: 999px;
            background: #fff;
            color: var(--ink);
            min-height: 32px;
            padding: 10px 14px;
            white-space: nowrap;
            cursor: pointer;
            font-weight: 800;
        }

        .help-section-nav button:hover {
            border-color: #bfdbfe;
            color: var(--blue);
            background: #eff6ff;
        }

        .help-section-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 14px;
        }

        .help-section-card,
        .faq-item {
            border: 1px solid var(--line);
            border-radius: 8px;
            background: #fff;
            padding: 18px;
            scroll-margin-top: 90px;
        }

        .help-section-card h4,
        .faq-item h4 {
            margin: 0 0 10px;
            font-size: 18px;
        }

        .help-section-card > p,
        .faq-item p {
            margin: 0;
            color: var(--muted);
            line-height: 1.8;
            font-size: 13px;
        }

        .help-step-list {
            display: grid;
            gap: 9px;
            margin: 14px 0 0;
            padding: 0;
            list-style: none;
        }

        .help-step-list li {
            position: relative;
            padding-left: 22px;
            color: #334155;
            line-height: 1.7;
            font-size: 13px;
        }

        .help-step-list li:before {
            content: "";
            position: absolute;
            left: 0;
            top: .72em;
            width: 8px;
            height: 8px;
            border-radius: 999px;
            background: var(--blue);
        }

        .help-tip {
            margin-top: 14px;
            padding: 12px 14px;
            border-radius: 8px;
            background: #f8fafc;
            color: #475569;
            font-size: 13px;
            line-height: 1.7;
        }

        .help-tip b {
            color: var(--ink);
        }

        .support-entry-card {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 172px;
            gap: 18px;
            align-items: center;
            padding: 18px;
            border: 1px solid #cfe2ff;
            border-radius: 10px;
            background: linear-gradient(135deg, #f8fbff, #ffffff);
            box-shadow: 0 12px 26px rgba(15, 23, 42, .04);
        }

        .support-entry-card h4 {
            margin: 0 0 8px;
            font-size: 20px;
        }

        .support-entry-card p {
            margin: 0;
            color: var(--muted);
            line-height: 1.75;
            font-size: 13px;
        }

        .support-action-row {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            margin-top: 14px;
        }

        .support-contact-points {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 10px;
            margin-top: 14px;
        }

        .support-contact-points span {
            display: block;
            padding: 10px 12px;
            border: 1px solid #e6edf6;
            border-radius: 8px;
            background: #fff;
            color: #334155;
            font-size: 12px;
            line-height: 1.55;
        }

        .support-qr {
            display: grid;
            gap: 8px;
            justify-items: center;
            align-content: center;
            min-height: 172px;
            padding: 10px;
            border: 1px solid #dbe7f5;
            border-radius: 10px;
            background: #fff;
            text-align: center;
            color: var(--muted);
            font-size: 12px;
            line-height: 1.5;
        }

        .support-qr img {
            width: 132px;
            height: 132px;
            object-fit: contain;
            border-radius: 8px;
        }

        .support-qr.is-missing img {
            display: none;
        }

        .support-qr-missing {
            display: none;
            width: 132px;
            min-height: 132px;
            place-items: center;
            padding: 14px;
            border: 1px dashed #bfdbfe;
            border-radius: 8px;
            background: #eff6ff;
            color: #2563eb;
            font-weight: 900;
        }

        .support-qr.is-missing .support-qr-missing {
            display: grid;
        }

        .support-qr b {
            color: var(--ink);
            font-size: 13px;
        }

        .support-qr.compact {
            min-height: 118px;
            grid-template-columns: 92px minmax(0, 1fr);
            justify-items: start;
            text-align: left;
        }

        .support-qr.compact img,
        .support-qr.compact .support-qr-missing {
            width: 78px;
            height: 78px;
            min-height: 78px;
            padding: 8px;
        }

        .help-faq-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .help-faq-section {
            display: grid;
            gap: 14px;
            scroll-margin-top: 90px;
        }

        .help-faq-section > h4 {
            margin: 0;
            font-size: 22px;
        }

        .site-footer {
            border-top: 1px solid var(--line);
            background: #fff;
            padding: 28px;
            color: var(--muted);
        }

        .site-footer-inner {
            max-width: 1440px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 260px minmax(0, 1fr) 320px;
            gap: 24px;
            align-items: start;
        }

        .site-footer b {
            color: var(--ink);
            display: block;
            margin-bottom: 8px;
        }

        .site-footer p {
            margin: 0 0 8px;
            line-height: 1.7;
            font-size: 13px;
        }

        .footer-links {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
            font-size: 13px;
        }

        .footer-links a,
        .footer-links button,
        .feedback-link {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 32px;
            border: 0;
            background: transparent;
            color: inherit;
            font: inherit;
            cursor: pointer;
            padding: 0;
        }

        .feedback-link:hover,
        .footer-links a:hover,
        .footer-links button:hover {
            color: var(--blue);
        }

        .feedback-form {
            display: grid;
            gap: 12px;
        }

        .feedback-form textarea {
            min-height: 132px;
            resize: vertical;
            border: 1px solid var(--line);
            border-radius: 6px;
            padding: 12px;
            font-size: 14px;
            line-height: 1.7;
        }

        .feedback-form .feedback-help {
            color: var(--muted);
            font-size: 13px;
            line-height: 1.7;
        }

        .feedback-contact-panel {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 150px;
            gap: 12px;
            align-items: center;
            padding: 12px;
            border: 1px solid #e6edf6;
            border-radius: 8px;
            background: #f8fafc;
        }

        .feedback-contact-panel b {
            display: block;
            margin-bottom: 6px;
            color: var(--ink);
        }

        .feedback-contact-panel span {
            color: var(--muted);
            font-size: 13px;
            line-height: 1.7;
        }

        .feedback-contact-panel .support-qr {
            min-height: 112px;
        }

        .feedback-contact-panel .support-qr img,
        .feedback-contact-panel .support-qr-missing {
            width: 86px;
            height: 86px;
            min-height: 86px;
            padding: 8px;
        }

        .payment-code {
            margin-top: 10px;
            min-height: 48px;
            border: 1px dashed #94a3b8;
            border-radius: 6px;
            background: #f8fafc;
            padding: 10px;
            word-break: break-all;
            color: #475569;
            font-size: 12px;
            line-height: 1.6;
        }

        .payment-code.danger {
            border-color: #f97316;
            background: #fff7ed;
            color: #9a3412;
        }

        .payment-inline-box {
            margin-top: 14px;
            padding: 14px;
            border: 1px solid var(--line);
            border-radius: 12px;
            background: #fff;
        }

        .payment-inline-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 10px;
        }

        .payment-inline-head span,
        .payment-inline-status {
            color: var(--muted);
            font-size: 13px;
            line-height: 1.6;
        }

        .payment-qr {
            margin-top: 10px;
            min-height: 46px;
            border: 1px solid var(--line);
            border-radius: 6px;
            background: #f8fafc;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 10px 12px;
            color: var(--muted);
            text-align: center;
            font-size: 13px;
        }

        .payment-qr svg {
            width: 136px;
            height: 136px;
        }

        .payment-actions {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
            margin-top: 10px;
        }

        .payment-dialog {
            width: min(540px, calc(100vw - 32px));
            padding: 22px;
            border-radius: 16px;
        }

        .payment-dialog-head {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 16px;
            padding-bottom: 14px;
            border-bottom: 1px solid var(--line);
        }

        .payment-dialog-head h3 {
            font-size: 24px;
        }

        .payment-dialog-summary {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            margin-top: 16px;
        }

        .payment-dialog-summary div {
            border: 1px solid var(--line);
            border-radius: 12px;
            background: #f8fafc;
            padding: 12px;
            min-width: 0;
        }

        .payment-dialog-summary span {
            display: block;
            color: var(--muted);
            font-size: 12px;
            margin-bottom: 4px;
        }

        .payment-dialog-summary b {
            display: block;
            color: var(--ink);
            font-size: 16px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .payment-modal-qr {
            width: 320px;
            height: 320px;
            max-width: 100%;
            margin: 18px auto 12px;
            border: 1px solid var(--line);
            border-radius: 16px;
            background: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--muted);
            text-align: center;
            padding: 18px;
        }

        .payment-modal-qr svg {
            width: 280px;
            height: 280px;
        }

        .payment-modal-status {
            text-align: center;
            color: var(--muted);
            line-height: 1.7;
            min-height: 24px;
        }

        .payment-modal-status.success {
            color: #047857;
            font-weight: 700;
        }

        .payment-modal-status.syncing {
            color: #059669;
            font-weight: 800;
            background: #ecfdf5;
            border: 1px solid #bbf7d0;
            border-radius: 12px;
            padding: 10px 12px;
        }

        .payment-modal-status.warn {
            color: #b45309;
            font-weight: 800;
            background: #fffbeb;
            border: 1px solid #fde68a;
            border-radius: 12px;
            padding: 10px 12px;
        }

        .payment-modal-status.danger {
            color: #b91c1c;
            font-weight: 700;
        }

        .payment-modal-fallback {
            display: grid;
            grid-template-columns: 1fr auto;
            align-items: center;
            gap: 10px;
            margin-top: 12px;
            padding: 10px 12px;
            border: 1px dashed #94a3b8;
            border-radius: 10px;
            background: #f8fafc;
            color: var(--muted);
            font-size: 13px;
        }

        .payment-modal-fallback.hidden {
            display: none;
        }

        .payment-dialog-actions {
            display: grid;
            grid-template-columns: 1fr 1fr 1.25fr;
            gap: 10px;
            margin-top: 14px;
        }

        .payment-dialog-note {
            margin: 12px 0 0;
            color: var(--muted);
            font-size: 12px;
            text-align: center;
            line-height: 1.6;
        }

        @media (max-width: 520px) {
            .payment-dialog {
                width: calc(100vw - 24px);
                padding: 16px;
                max-height: calc(100dvh - 24px);
                overflow: auto;
            }

            .payment-dialog-head {
                gap: 10px;
            }

            .payment-dialog-head h3 {
                font-size: 20px;
            }

            .payment-dialog-summary,
            .payment-dialog-actions,
            .payment-actions {
                grid-template-columns: 1fr;
            }

            .payment-modal-qr {
                width: min(220px, 100%);
                height: min(220px, calc(100vw - 96px));
                margin-top: 12px;
                margin-bottom: 8px;
                padding: 14px;
            }

            .payment-modal-qr svg {
                width: min(184px, 100%);
                height: min(184px, 100%);
            }

            .payment-modal-fallback {
                grid-template-columns: 1fr;
            }
        }

        /* Storefront redesign: reference-style PC LEGO marketplace home */
        body {
            background: #f4f7fb;
        }

        .side {
            position: sticky;
            top: 0;
            z-index: 18;
            display: block;
            padding: 0;
            background: #fff;
            border-bottom: 0;
            box-shadow: 0 1px 0 rgba(15, 23, 42, .08), 0 8px 24px rgba(15, 23, 42, .04);
        }

        .test-notice {
            display: grid;
            grid-template-columns: auto minmax(0, 1fr);
            align-items: center;
            gap: 12px;
            min-height: 38px;
            padding: 0 34px;
            background: linear-gradient(90deg, #e60012 0%, #d00010 42%, #111827 100%);
            color: #fff;
            border-bottom: 3px solid var(--yellow);
            overflow: hidden;
        }

        .test-notice-label {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            height: 24px;
            padding: 0 10px;
            border-radius: 999px;
            background: #fff;
            color: var(--red);
            font-size: 12px;
            font-weight: 900;
            white-space: nowrap;
            box-shadow: 0 5px 14px rgba(15, 23, 42, .18);
        }

        .test-notice-label .kwc-icon {
            width: 15px;
            height: 15px;
        }

        .test-notice-window {
            min-width: 0;
            overflow: hidden;
            white-space: nowrap;
            mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
            -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
        }

        .test-notice-track {
            display: inline-flex;
            align-items: center;
            gap: 34px;
            min-width: max-content;
            padding-left: 100%;
            animation: testNoticeScroll 34s linear infinite;
        }

        .test-notice-window:hover .test-notice-track {
            animation-play-state: paused;
        }

        .test-notice-message {
            display: inline-flex;
            align-items: center;
            gap: 14px;
            color: rgba(255, 255, 255, .96);
            font-size: 13px;
            font-weight: 800;
            letter-spacing: 0;
        }

        .test-notice-message span {
            position: relative;
        }

        .test-notice-message span + span:before {
            content: "";
            position: absolute;
            left: -9px;
            top: 50%;
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background: var(--yellow);
            transform: translateY(-50%);
        }

        @keyframes testNoticeScroll {
            from { transform: translateX(0); }
            to { transform: translateX(-100%); }
        }

        @media (prefers-reduced-motion: reduce) {
            .test-notice-track {
                animation: none;
            }
        }

        .store-head-main {
            display: grid;
            grid-template-columns: 300px minmax(280px, 1fr) auto auto auto auto;
            align-items: center;
            gap: 18px;
            max-width: 1500px;
            margin: 0 auto;
            padding: 18px 34px 14px;
        }

        .brand {
            min-width: 0;
        }

        .brand-home {
            gap: 12px;
            font-size: 24px;
            letter-spacing: 0;
        }

        .brand-logo {
            width: 50px;
            height: 50px;
            border-radius: 10px;
            border: 0;
        }

        .brand-parts {
            display: inline-block;
            margin-top: 4px;
            margin-left: 62px;
            color: #0f172a;
            font-size: 18px;
            font-weight: 800;
        }

        .store-search {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 56px;
            height: 56px;
            border: 1px solid #dbe3ef;
            border-radius: 12px;
            overflow: hidden;
            background: #fff;
            box-shadow: inset 0 1px 0 rgba(15, 23, 42, .03);
        }

        .store-search input {
            height: 100%;
            border: 0;
            border-radius: 0;
            padding: 0 18px;
            font-size: 15px;
        }

        .store-search-button {
            position: relative;
            border: 0;
            background: #e60012;
            cursor: pointer;
            display: grid;
            place-items: center;
            color: #fff;
        }

        .store-search-button:before {
            content: none;
            display: none;
        }

        .store-search-button:after {
            content: none;
            display: none;
        }

        .store-upload-button {
            height: 48px;
            border: 1px solid #cbd5e1;
            border-radius: 10px;
            background: #fff;
            color: #0f172a;
            padding: 0 18px;
            font-weight: 800;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            white-space: nowrap;
        }

        .store-primary-links {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            white-space: nowrap;
        }

        .store-primary-link {
            height: 48px;
            border: 1px solid #dbe3ef;
            border-radius: 10px;
            background: #f8fbff;
            color: #0f172a;
            padding: 0 16px;
            font-weight: 900;
            cursor: pointer;
        }

        .store-primary-link.is-strong {
            border-color: #bcd2ff;
            background: #eef4ff;
            color: #005bd7;
        }

        .store-primary-link:hover,
        .store-upload-button:hover,
        .store-account-button:hover {
            border-color: #94b5ff;
            background: #f1f6ff;
        }

        .store-upload-icon {
            width: 16px;
            height: 18px;
            border: 2px solid currentColor;
            border-top: 0;
            border-radius: 0 0 4px 4px;
            position: relative;
            display: inline-block;
        }

        .store-upload-icon:before {
            content: "";
            position: absolute;
            left: 5px;
            top: -9px;
            width: 6px;
            height: 14px;
            border-left: 2px solid currentColor;
            border-top: 2px solid currentColor;
            transform: rotate(45deg);
        }

        .store-cart-button,
        .store-account-button {
            position: relative;
            height: 54px;
            border: 0;
            background: #fff;
            color: #0f172a;
            cursor: pointer;
        }

        .store-cart-button {
            width: 54px;
            display: grid;
            place-items: center;
        }

        .store-account-wrap {
            position: relative;
        }

        .store-account-button {
            width: 148px;
            min-width: 148px;
            border: 1px solid #e6edf6;
            border-radius: 10px;
            font-weight: 800;
            display: inline-flex;
            align-items: center;
            justify-content: flex-start;
            gap: 8px;
            padding: 0 10px;
            white-space: nowrap;
        }

        .store-account-button #authStatus {
            min-width: 0;
            max-width: 92px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            text-align: left;
            flex: 1 1 auto;
        }

        .account-caret {
            width: 8px;
            height: 8px;
            border-right: 2px solid currentColor;
            border-bottom: 2px solid currentColor;
            transform: rotate(45deg);
            margin-top: -4px;
            opacity: .75;
            flex: 0 0 auto;
        }

        .store-account-button[aria-expanded="true"] .account-caret {
            transform: rotate(225deg);
            margin-top: 4px;
        }

        .store-account-menu {
            position: absolute;
            right: 0;
            top: calc(100% + 10px);
            width: 180px;
            padding: 8px;
            border: 1px solid #dbe3ef;
            border-radius: 12px;
            background: #fff;
            box-shadow: 0 18px 40px rgba(15, 23, 42, .14);
            z-index: 40;
        }

        .store-account-menu.hidden {
            display: none;
        }

        .store-account-menu button {
            width: 100%;
            border: 0;
            border-radius: 8px;
            background: transparent;
            color: #0f172a;
            padding: 10px 12px;
            text-align: left;
            font-weight: 800;
            cursor: pointer;
        }

        .store-account-menu button:hover {
            background: #f1f6ff;
            color: #005bd7;
        }

        .store-account-menu .danger {
            color: #dc2626;
        }

        .cart-mark {
            display: none;
        }

        .cart-mark:before,
        .cart-mark:after {
            content: none;
            display: none;
        }

        .cart-mark:before { left: 1px; }
        .cart-mark:after { right: 1px; }

        #cartCountBadge {
            position: absolute;
            top: 5px;
            right: 5px;
            min-width: 22px;
            height: 22px;
            border-radius: 999px;
            background: #e60012;
            color: #fff;
            font-size: 12px;
            line-height: 22px;
            text-align: center;
        }

        .nav {
            width: 100%;
            max-width: 1240px;
            margin: 0 auto;
            justify-content: center;
            flex-wrap: nowrap;
            gap: clamp(18px, 2vw, 34px);
            padding: 8px 24px 0;
        }

        .nav button,
        .nav a {
            position: relative;
            height: 58px;
            border-radius: 0;
            background: transparent;
            color: #334155;
            font-size: 15px;
            gap: 8px;
            white-space: nowrap;
        }

        .nav button.active,
        .nav button:hover,
        .nav a.active,
        .nav a:hover {
            background: transparent;
            color: #e60012;
        }

        .nav button.active:after,
        .nav a.active:after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 4px;
            border-radius: 999px 999px 0 0;
            background: #e60012;
        }

        .nav-icon,
        .category-icon {
            width: 20px;
            height: 20px;
            position: relative;
            display: inline-block;
            color: currentColor;
        }

        .home-icon:before {
            content: "";
            position: absolute;
            inset: 6px 3px 2px;
            background: currentColor;
            border-radius: 2px;
        }

        .home-icon:after {
            content: "";
            position: absolute;
            left: 4px;
            top: 2px;
            width: 12px;
            height: 12px;
            background: currentColor;
            transform: rotate(45deg);
            border-radius: 2px;
        }

        .grid-icon:before,
        .star-icon:before,
        .hot-icon:before,
        .help-icon:before,
        .note-icon:before {
            content: "";
            position: absolute;
            inset: 2px;
            border: 2px solid currentColor;
            border-radius: 5px;
        }

        .star-icon:after {
            content: "";
            position: absolute;
            left: 7px;
            top: 5px;
            width: 6px;
            height: 10px;
            background: currentColor;
            clip-path: polygon(50% 0, 65% 35%, 100% 35%, 72% 58%, 84% 100%, 50% 72%, 16% 100%, 28% 58%, 0 35%, 35% 35%);
        }

        .hot-icon:after {
            content: "";
            position: absolute;
            left: 7px;
            top: 4px;
            width: 7px;
            height: 12px;
            background: currentColor;
            border-radius: 8px 8px 8px 2px;
            transform: rotate(28deg);
        }

        .help-icon:after {
            content: "?";
            position: absolute;
            inset: 0;
            font-size: 14px;
            font-weight: 900;
            line-height: 20px;
            text-align: center;
        }

        .store-rainbow {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            height: 5px;
        }

        .store-rainbow span:nth-child(1) { background: #e60012; }
        .store-rainbow span:nth-child(2) { background: #facc15; }
        .store-rainbow span:nth-child(3) { background: #16a34a; }
        .store-rainbow span:nth-child(4) { background: #2563eb; }

        .topbar,
        .hero {
            display: none;
        }

        .content {
            max-width: 1500px;
            padding: 34px 32px 52px;
        }

        .content.workflow-mode {
            padding-top: 24px;
        }

        .catalog-layout {
            grid-template-columns: 280px minmax(0, 1fr) 300px;
            gap: 22px;
        }

        .panel,
        .rail-card {
            border-color: #e6edf6;
            box-shadow: 0 12px 30px rgba(15, 23, 42, .035);
        }

        .filter-panel {
            top: 184px;
            padding: 22px;
        }

        .filter-panel .panel-head h3 {
            font-size: 20px;
        }

        .filters {
            gap: 18px;
        }

        .filter-group label {
            color: #111827;
            font-size: 15px;
        }

        .category-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 10px;
        }

        .category-grid button {
            min-height: 72px;
            border: 1px solid #e6edf6;
            border-radius: 8px;
            background: #fff;
            color: #334155;
            cursor: pointer;
            font-weight: 700;
            display: grid;
            place-items: center;
            gap: 5px;
            font-size: 12px;
        }

        .category-grid button.active,
        .category-grid button:hover {
            border-color: #e60012;
            color: #e60012;
            background: #fff7f7;
        }

        .category-icon {
            width: 30px;
            height: 30px;
            color: inherit;
        }

        .brick-icon,
        .cube-icon,
        .plate-icon {
            background: currentColor;
            border-radius: 4px;
            opacity: .95;
        }

        .brick-icon:before,
        .cube-icon:before,
        .plate-icon:before {
            content: "";
            position: absolute;
            left: 5px;
            right: 5px;
            top: -5px;
            height: 8px;
            border-radius: 999px;
            background: currentColor;
            box-shadow: 10px 0 0 currentColor;
        }

        .plate-icon {
            height: 20px;
            margin-top: 8px;
        }

        .gear-icon:before {
            content: "";
            position: absolute;
            inset: 4px;
            border: 4px solid currentColor;
            border-radius: 50%;
            box-shadow: 0 -8px 0 -3px currentColor, 0 8px 0 -3px currentColor, 8px 0 0 -3px currentColor, -8px 0 0 -3px currentColor;
        }

        .head-icon:before {
            content: "";
            position: absolute;
            inset: 4px 7px 3px;
            background: currentColor;
            border-radius: 8px 8px 5px 5px;
        }

        .head-icon:after {
            content: "";
            position: absolute;
            left: 10px;
            top: 0;
            width: 10px;
            height: 7px;
            background: currentColor;
            border-radius: 4px 4px 0 0;
        }

        .tile-icon:before {
            content: "";
            position: absolute;
            inset: 5px;
            border: 3px solid currentColor;
            border-radius: 4px;
        }

        .color-grid {
            display: grid;
            grid-template-columns: repeat(6, minmax(0, 1fr));
            gap: 8px;
            width: 100%;
            max-width: 240px;
        }

        .color-grid button {
            width: 100%;
            aspect-ratio: 1;
            min-width: 32px;
            min-height: 32px;
            height: 32px;
            border: 1px solid #dbe3ef;
            border-radius: 6px;
            cursor: pointer;
        }

        .color-grid button.active {
            outline: 2px solid #e60012;
            outline-offset: 2px;
        }

        .rainbow-color {
            background: linear-gradient(135deg, #e60012, #facc15 35%, #16a34a 65%, #2563eb);
        }

        .color-guide-entry {
            margin-top: 10px;
            width: 100%;
            display: grid;
            grid-template-columns: 22px 1fr;
            gap: 2px 8px;
            align-items: center;
            border: 1px solid #dbe3ef;
            border-radius: 8px;
            background: #fff;
            color: var(--ink);
            padding: 9px 10px;
            text-align: left;
            cursor: pointer;
        }

        .color-guide-entry:hover {
            border-color: var(--blue);
            box-shadow: 0 8px 24px rgba(37, 99, 235, .08);
        }

        .color-guide-entry span {
            font-weight: 800;
        }

        .color-guide-entry small {
            grid-column: 2;
            color: var(--muted);
            line-height: 1.35;
            font-size: 12px;
        }

        .color-guide-dialog {
            width: min(980px, calc(100vw - 32px));
            max-height: calc(100vh - 48px);
            overflow: hidden;
            display: grid;
            gap: 14px;
        }

        .color-guide-toolbar {
            display: grid;
            grid-template-columns: minmax(220px, 1fr) 180px;
            gap: 10px;
        }

        .color-guide-family-tabs {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .color-guide-family-tabs button {
            border: 1px solid var(--line);
            background: #fff;
            border-radius: 999px;
            min-height: 34px;
            padding: 0 12px;
            color: var(--ink);
            font-weight: 700;
            cursor: pointer;
        }

        .color-guide-family-tabs button.active {
            border-color: var(--red);
            color: var(--red);
            background: #fff1f2;
        }

        .color-guide-results {
            max-height: min(56vh, 560px);
            overflow: auto;
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 10px;
            padding-right: 4px;
        }

        .color-guide-card {
            border: 1px solid var(--line);
            border-radius: 8px;
            background: #fff;
            padding: 12px;
            display: grid;
            gap: 8px;
        }

        .color-guide-card-head {
            display: grid;
            grid-template-columns: 42px 1fr;
            gap: 10px;
            align-items: center;
        }

        .color-guide-swatch {
            width: 42px;
            height: 42px;
            border-radius: 8px;
            border: 1px solid #cbd5e1;
            box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
        }

        .color-guide-name {
            font-weight: 900;
            color: var(--ink);
            line-height: 1.35;
        }

        .color-guide-sub {
            font-size: 12px;
            color: var(--muted);
            line-height: 1.4;
        }

        .color-guide-meta {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 6px;
            font-size: 12px;
            color: #475569;
        }

        .color-guide-card .btn {
            min-height: 34px;
        }

        .color-guide-empty {
            grid-column: 1 / -1;
            border: 1px dashed var(--line);
            border-radius: 8px;
            background: #f8fafc;
            padding: 28px;
            text-align: center;
            color: var(--muted);
            font-weight: 700;
        }

        .stock-toggle-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
        }

        .stock-toggle-row button,
        .filter-mini-option {
            height: 38px;
            border: 1px solid #dbe3ef;
            border-radius: 999px;
            background: #fff;
            color: #475569;
            cursor: pointer;
            font-weight: 700;
        }

        .stock-toggle-row button.active,
        .filter-mini-option.active {
            background: #ecfdf5;
            border-color: #22c55e;
            color: #047857;
        }

        .compact-select {
            display: none;
        }

        .catalog-main {
            margin-top: 0;
            padding: 22px;
        }

        .catalog-toolbar h3 {
            font-size: 18px;
        }

        .catalog-toolbar-actions .badge {
            display: none;
        }

        .catalog-toolbar-actions select {
            height: 42px;
            border-radius: 6px;
        }

        .products {
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 18px;
        }

        .product {
            min-height: 414px;
            padding: 20px;
            border-color: #edf1f7;
            border-radius: 4px;
            box-shadow: 0 10px 24px rgba(15, 23, 42, .035);
        }

        .part-image {
            height: 190px;
            flex-basis: 190px;
            border: 0;
            border-radius: 4px;
            background: #fff;
        }

        .product h4 {
            font-size: 20px;
            min-height: 54px;
        }

        .price b {
            color: #e60012;
            font-size: 24px;
        }

        .variant-chip {
            width: 32px;
            height: 32px;
            min-width: 32px;
            min-height: 32px;
        }

        .product-actions {
            grid-template-columns: 1fr;
        }

        .product-actions .btn.ghost {
            display: none;
        }

        .product-actions .btn {
            height: 46px;
            border-radius: 6px;
            background: #e60012;
            color: #fff;
            font-size: 15px;
        }

        .catalog-pager .btn {
            background: #fff;
            color: #334155;
            border: 1px solid #dbe3ef;
        }

        .catalog-rail {
            display: grid;
            gap: 18px;
        }

        .mobile-rail-card {
            display: none;
        }

        .rail-card {
            position: relative;
            overflow: hidden;
            background: #fff;
            border: 1px solid #e6edf6;
            border-radius: 8px;
            padding: 20px;
        }

        .rail-card b {
            display: block;
            color: #111827;
            font-size: 18px;
            margin-bottom: 8px;
        }

        .rail-card p {
            margin: 0 0 16px;
            color: #64748b;
            font-size: 13px;
            line-height: 1.7;
        }

        .upload-rail-card {
            min-height: 196px;
            background: linear-gradient(135deg, #eef7ff, #fff);
        }

        .upload-rail-card .btn,
        .rail-full-button {
            background: #0068d9;
        }

        .rail-paper {
            position: absolute;
            right: 22px;
            bottom: 18px;
            width: 82px;
            height: 88px;
            border-radius: 8px;
            background: #fff;
            box-shadow: 0 12px 26px rgba(37, 99, 235, .12);
            transform: rotate(8deg);
        }

        .rail-paper:before {
            content: "";
            position: absolute;
            left: 18px;
            top: 20px;
            width: 42px;
            height: 8px;
            border-radius: 999px;
            background: #e2e8f0;
            box-shadow: 0 18px 0 #e2e8f0, 0 36px 0 #e2e8f0;
        }

        .rail-head {
            display: flex;
            justify-content: space-between;
            gap: 10px;
            align-items: center;
        }

        .rail-head button,
        .help-card button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 32px;
            border: 0;
            background: transparent;
            color: #2563eb;
            cursor: pointer;
            font-weight: 700;
        }

        .co-create-card {
            background: linear-gradient(135deg, #fff8eb 0%, #ffffff 72%);
            border-color: #ffe2a8;
        }

        .co-create-card b {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .co-create-card b:before {
            content: "★";
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 26px;
            height: 26px;
            border-radius: 50%;
            background: #fff1c7;
            color: #d97706;
            font-size: 15px;
            line-height: 1;
        }

        .co-create-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin: 12px 0 10px;
        }

        .co-create-tags span {
            max-width: 100%;
            border: 1px solid #fed7aa;
            border-radius: 999px;
            background: #fff7ed;
            color: #9a3412;
            font-size: 12px;
            font-weight: 800;
            line-height: 1;
            padding: 8px 10px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .co-create-note {
            display: block;
            color: #94a3b8;
            font-size: 12px;
            line-height: 1.6;
        }

        .my-list-summary {
            display: grid;
            gap: 10px;
            margin: 12px 0;
        }

        .my-list-row {
            display: grid;
            grid-template-columns: 36px 1fr auto;
            align-items: center;
            gap: 10px;
            min-height: 58px;
            border: 1px solid #edf1f7;
            border-radius: 8px;
            padding: 10px 12px;
            color: #475569;
            font-size: 13px;
        }

        .my-list-icon {
            width: 36px;
            height: 36px;
            border-radius: 10px;
            background: #eff6ff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: var(--blue);
        }

        .my-list-icon .kwc-icon {
            width: 18px;
            height: 18px;
        }

        .my-list-main {
            min-width: 0;
        }

        .my-list-main b {
            display: block;
            margin: 0 0 3px;
            color: #111827;
            font-size: 15px;
            line-height: 1.25;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .my-list-main small {
            display: block;
            color: #64748b;
            font-size: 12px;
            line-height: 1.4;
        }

        .my-list-count {
            color: #334155;
            font-size: 18px;
            font-weight: 900;
            min-width: 28px;
            text-align: right;
        }

        .my-list-actions {
            display: flex;
            gap: 8px;
            margin-top: 2px;
        }

        .my-list-link {
            border: 1px solid #bfdbfe;
            border-radius: 8px;
            background: #eff6ff;
            color: #1d4ed8;
            padding: 7px 10px;
            font-size: 12px;
            font-weight: 900;
            cursor: pointer;
        }

        .my-list-link.secondary {
            border-color: #e2e8f0;
            background: #fff;
            color: #475569;
        }

        .deal-card {
            background: linear-gradient(180deg, #fffaf0, #fff);
        }

        .deal-headline {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 10px;
            margin-bottom: 12px;
        }

        .deal-headline b {
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        .deal-label {
            border-radius: 999px;
            background: #fee2e2;
            color: #b91c1c;
            font-size: 12px;
            font-weight: 900;
            padding: 4px 8px;
            white-space: nowrap;
        }

        .deal-product {
            display: grid;
            grid-template-columns: 92px minmax(0, 1fr);
            gap: 12px;
            align-items: center;
        }

        .deal-product > div {
            min-width: 0;
        }

        .deal-product strong {
            display: -webkit-box;
            color: #111827;
            font-size: 15px;
            line-height: 1.35;
            max-height: 4.05em;
            overflow: hidden;
            overflow-wrap: anywhere;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
        }

        .deal-image {
            width: 92px;
            height: 92px;
            border-radius: 8px;
            background: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        .deal-image img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }

        .deal-price {
            color: #e60012;
            font-size: 20px;
            font-weight: 900;
            line-height: 1.1;
        }

        .deal-prices {
            display: flex;
            align-items: baseline;
            flex-wrap: wrap;
            gap: 6px;
            margin-top: 6px;
        }

        .deal-original {
            color: #94a3b8;
            font-size: 12px;
            text-decoration: line-through;
        }

        .deal-stock,
        .deal-note {
            display: block;
            color: #64748b;
            font-size: 12px;
            line-height: 1.5;
            max-width: 100%;
            overflow-wrap: anywhere;
        }

        .deal-note {
            margin-top: 6px;
            color: #047857;
            font-weight: 700;
        }

        .deal-card .btn {
            width: 100%;
            margin-top: 12px;
            background: #facc15;
            color: #111827;
        }

        .deal-card .btn:disabled {
            background: #e2e8f0;
            color: #94a3b8;
            cursor: not-allowed;
        }

        .monthly-new-card {
            display: grid;
            gap: 12px;
            background: linear-gradient(180deg, #f8fbff, #fff);
        }

        .monthly-new-list {
            display: grid;
            gap: 8px;
        }

        .monthly-new-item {
            display: grid;
            grid-template-columns: 58px minmax(0, 1fr) auto;
            gap: 10px;
            align-items: center;
            padding: 8px;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            background: #fff;
            color: inherit;
            text-decoration: none;
        }

        .monthly-new-item:hover {
            border-color: #bfdbfe;
            box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
        }

        .monthly-new-thumb {
            width: 58px;
            height: 58px;
            border-radius: 8px;
            background: #f8fafc;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            color: #94a3b8;
            font-size: 12px;
            font-weight: 900;
            text-align: center;
        }

        .monthly-new-thumb img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .monthly-new-body {
            min-width: 0;
            display: grid;
            gap: 2px;
        }

        .monthly-new-body b {
            display: -webkit-box;
            overflow: hidden;
            color: #111827;
            font-size: 13px;
            line-height: 1.25;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
        }

        .monthly-new-body small {
            color: #64748b;
            font-size: 12px;
            line-height: 1.35;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .monthly-new-price {
            color: #e60012;
            font-size: 13px;
            font-weight: 900;
            white-space: nowrap;
            align-self: end;
        }

        .monthly-new-more {
            display: inline-flex;
            justify-content: center;
            align-items: center;
            height: 38px;
            border: 1px solid #dbeafe;
            border-radius: 8px;
            background: #eff6ff;
            color: #1d4ed8;
            font-size: 13px;
            font-weight: 900;
            text-decoration: none;
        }

        .help-card {
            display: grid;
            gap: 2px;
        }

        .help-card button {
            height: 40px;
            text-align: left;
            border-bottom: 1px solid #edf1f7;
            color: #334155;
        }

        .rail-trust {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            color: #047857;
            font-weight: 800;
            font-size: 13px;
        }

        .rail-trust span {
            border: 1px solid #d1fae5;
            border-radius: 8px;
            background: #f0fdf4;
            padding: 12px;
        }

        .rail-trust small {
            color: #64748b;
            font-weight: 600;
        }

        .site-footer {
            position: relative;
            overflow: hidden;
            padding: 48px 32px 36px;
        }

        .site-footer-inner {
            grid-template-columns: minmax(320px, 1.25fr) repeat(3, minmax(150px, .75fr));
            max-width: 1180px;
            gap: 46px;
            align-items: start;
        }

        .footer-links {
            display: grid;
            gap: 8px;
        }

        .footer-links a,
        .footer-links button {
            justify-content: flex-start;
            text-align: left;
        }

        .site-footer:before,
        .site-footer:after {
            display: none;
        }

        .footer-legal {
            display: grid;
            gap: 6px;
            margin-top: 10px;
            padding-top: 12px;
            border-top: 1px solid #e2e8f0;
            color: #64748b;
        }

        .products.products-compact {
            grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
            gap: 10px;
        }

        .products.products-large {
            grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
            gap: 18px;
        }

        .products.products-compact .product {
            min-height: 220px;
            padding: 9px;
            gap: 7px;
        }

        .products.products-compact .part-image {
            height: 62px;
            border: 1px solid #eef2f7;
        }

        .products.products-compact .product h4 {
            min-height: 34px;
            font-size: 12px;
            line-height: 1.35;
        }

        .products.products-compact .product-title {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-align: left;
        }

        .products.products-compact .variant-chip {
            width: 32px;
            height: 32px;
            min-width: 32px;
            min-height: 32px;
            box-shadow: none;
        }

        .products.products-compact .variant-strip {
            gap: 4px;
            min-height: 46px;
            max-height: 46px;
        }

        .products.products-compact .variant-count {
            flex-basis: 100%;
            font-size: 12px;
        }

        .products.products-compact .variant-strip.filtered .variant-count {
            flex-basis: auto;
            font-size: 12px;
        }

        .products.products-compact .meta {
            gap: 4px;
            font-size: 12px;
        }

        .products.products-compact .price b {
            font-size: 15px;
        }

        .products.products-compact .price span {
            display: none;
        }

        .products.products-compact .variant-more {
            min-height: 32px;
            min-width: 32px;
            padding: 0 10px;
            font-size: 12px;
        }

        .products.products-compact .product-actions .btn {
            height: 36px;
            padding: 0 6px;
            font-size: 12px;
        }

        .products.products-large .product {
            min-height: 414px;
            padding: 20px;
        }

        .products.products-large .part-image {
            height: 190px;
            flex-basis: 190px;
        }

        .store-upload-icon {
            width: 22px;
            height: 22px;
            border: 2px solid currentColor;
            border-radius: 6px;
            border-top-right-radius: 10px;
            background: linear-gradient(135deg, transparent 0 68%, currentColor 69% 75%, transparent 76%);
        }

        .store-upload-icon:before {
            left: 9px;
            top: 4px;
            width: 0;
            height: 11px;
            border-left: 2px solid currentColor;
            border-top: 0;
            transform: none;
        }

        .store-upload-icon:after {
            content: "";
            position: absolute;
            left: 5px;
            top: 3px;
            width: 8px;
            height: 8px;
            border-left: 2px solid currentColor;
            border-top: 2px solid currentColor;
            transform: rotate(45deg);
        }

        .category-icon {
            width: 32px;
            height: 32px;
            color: inherit;
            background: transparent;
            opacity: 1;
        }

        .category-icon:before,
        .category-icon:after {
            content: "";
            position: absolute;
            box-sizing: border-box;
        }

        .brick-icon,
        .cube-icon,
        .plate-icon {
            background: transparent;
            border-radius: 0;
            margin: 0;
        }

        .brick-icon:before {
            left: 5px;
            top: 10px;
            width: 22px;
            height: 16px;
            border-radius: 4px;
            background: currentColor;
        }

        .brick-icon:after {
            left: 8px;
            top: 5px;
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: currentColor;
            box-shadow: 10px 0 0 currentColor;
        }

        .cube-icon:before {
            left: 4px;
            top: 9px;
            width: 24px;
            height: 17px;
            border-radius: 4px;
            background: currentColor;
        }

        .cube-icon:after {
            left: 7px;
            top: 4px;
            width: 6px;
            height: 7px;
            border-radius: 50%;
            background: currentColor;
            box-shadow: 9px 0 0 currentColor, 18px 0 0 currentColor;
        }

        .plate-icon:before {
            left: 3px;
            top: 14px;
            width: 26px;
            height: 10px;
            border-radius: 3px;
            background: currentColor;
        }

        .plate-icon:after {
            left: 6px;
            top: 9px;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: currentColor;
            box-shadow: 9px 0 0 currentColor, 18px 0 0 currentColor;
        }

        .gear-icon:before {
            inset: 5px;
            border: 5px solid currentColor;
            border-radius: 50%;
            box-shadow: 0 -9px 0 -4px currentColor, 0 9px 0 -4px currentColor, 9px 0 0 -4px currentColor, -9px 0 0 -4px currentColor;
        }

        .gear-icon:after {
            inset: 12px;
            border-radius: 50%;
            background: #fff;
        }

        .head-icon:before {
            left: 8px;
            top: 8px;
            width: 16px;
            height: 19px;
            border-radius: 8px 8px 5px 5px;
            background: currentColor;
        }

        .head-icon:after {
            left: 11px;
            top: 3px;
            width: 10px;
            height: 8px;
            border-radius: 5px 5px 2px 2px;
            background: currentColor;
        }

        .tile-icon:before {
            left: 5px;
            top: 8px;
            width: 22px;
            height: 17px;
            border: 3px solid currentColor;
            border-radius: 5px;
            background: transparent;
        }

        .tile-icon:after {
            left: 10px;
            top: 13px;
            width: 12px;
            height: 7px;
            border: 2px solid currentColor;
            border-radius: 3px;
            opacity: .45;
        }

        .store-search-button {
            display: grid;
            place-items: center;
            color: #fff;
        }

        .store-search-button:before,
        .store-search-button:after,
        .store-upload-icon,
        .cart-mark,
        .nav-icon,
        .category-icon,
        .address-mini-icon:before,
        .address-mini-icon:after,
        .account-stat-icon:before,
        .account-stat-icon:after {
            display: none !important;
            content: none !important;
        }

        .store-head-main {
            background: rgba(255, 255, 255, .98);
            border-bottom: 1px solid #e8edf5;
        }

        .store-primary-link,
        .store-upload-button,
        .store-account-button {
            border-radius: 8px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease;
        }

        .store-primary-link:hover,
        .store-upload-button:hover,
        .store-account-button:hover {
            transform: translateY(-1px);
        }

        .store-cart-button {
            display: grid;
            place-items: center;
            color: #111827;
            transition: transform .18s ease, color .18s ease;
        }

        .store-cart-button:hover {
            color: var(--red);
            transform: translateY(-1px);
        }

        #cartCountBadge {
            top: 3px;
            right: 4px;
            box-shadow: 0 0 0 3px #fff;
        }

        .nav .kwc-icon {
            color: currentColor;
        }

        .category-grid button,
        .catalog-category-strip button {
            gap: 8px;
        }

        .category-grid .kwc-icon,
        .catalog-category-strip .kwc-icon {
            color: currentColor;
        }

        .filter-panel,
        .catalog-main,
        .rail-card,
        .product,
        .upload-panel,
        .upload-side-card,
        .checkout-side-panel,
        .cart-panel,
        .orders-card,
        .account-card,
        .address-card {
            box-shadow: var(--card-shadow);
        }

        .btn {
            border-radius: 8px;
            transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
        }

        .btn:not(:disabled):hover {
            transform: translateY(-1px);
            box-shadow: 0 10px 20px rgba(15, 23, 42, .08);
        }

        .btn.primary,
        .product-actions .btn,
        .upload-primary-button,
        #checkoutSubmitButton {
            background: var(--red);
        }

        .btn.ghost,
        .btn.secondary {
            background: #f3f7fc;
            color: #1e293b;
            border: 1px solid #e2e8f0;
        }

        .catalog-toolbar {
            align-items: flex-start;
            padding-bottom: 16px;
            border-bottom: 1px solid #edf2f8;
        }

        .catalog-toolbar h3 {
            font-size: 26px;
            letter-spacing: 0;
        }

        .catalog-toolbar-actions {
            gap: 10px;
        }

        .catalog-view-toggle {
            border-radius: 8px;
        }

        .catalog-view-toggle button.active {
            background: var(--soft-red);
            color: var(--red);
        }

        .products.products-compact {
            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
            gap: 14px;
        }

        .products.products-compact .product {
            min-height: 258px;
            padding: 12px;
        }

        .products.products-compact .part-image {
            height: 84px;
            border: 1px solid #edf2f8;
            background: #fff;
        }

        .products.products-compact .product h4 {
            min-height: 42px;
            font-size: 13px;
            font-weight: 900;
        }

        .products.products-compact .price b {
            font-size: 16px;
            color: var(--red);
        }

        .products.products-large {
            grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
        }

        .product {
            border-radius: 8px;
            transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
        }

        .product:hover {
            transform: translateY(-2px);
            border-color: #fecdd3;
            box-shadow: 0 18px 36px rgba(15, 23, 42, .08);
        }

        .part-image {
            background: #fff;
        }

        .variant-chip.active {
            outline-color: var(--red);
        }

        .status,
        .stock-tag,
        .badge.success {
            background: var(--soft-green);
            color: #047857;
        }

        .price b,
        .cart-line-total,
        .cart-total,
        .checkout-pay-amount,
        .order-amount,
        .part-page-price b {
            color: var(--red);
        }

        .rail-card .btn,
        .rail-full-button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            border-radius: 8px;
        }

        .upload-rail-card {
            border-color: #dbeafe;
        }

        .upload-rail-card .btn {
            background: var(--red);
        }

        .rail-trust span {
            display: grid;
            gap: 4px;
        }

        .account-stat-icon {
            display: grid;
            place-items: center;
            font-size: 0;
        }

        .account-stat-icon .kwc-icon {
            width: 26px;
            height: 26px;
        }

        .address-card-line .kwc-icon {
            color: #111827;
            margin-right: 6px;
        }

        .cart-icon-button {
            display: inline-grid;
            place-items: center;
            color: #334155;
            font-size: 0;
        }

        .cart-icon-button .kwc-icon {
            width: 22px;
            height: 22px;
        }

        /* Final public UI consolidation: keep every page on one spacing, icon, and state system. */
        .side {
            position: relative;
            top: auto;
            z-index: 30;
            box-shadow: 0 1px 0 rgba(15, 23, 42, .06);
        }

        .store-head-main {
            padding-top: 14px;
            padding-bottom: 12px;
        }

        .store-rainbow {
            position: relative;
            z-index: 1;
        }

        .content {
            padding-top: 24px;
            padding-bottom: 44px;
        }

        .content.workflow-mode {
            padding-top: 18px;
        }

        .view {
            scroll-margin-top: 16px;
        }

        .cart-page,
        .checkout-page,
        .orders-page,
        .order-detail-page,
        .account-grid,
        .addresses-page,
        .upload-workspace {
            margin-top: 0;
        }

        .cart-title-row,
        .checkout-topbar,
        .orders-title-row,
        .order-detail-title-row,
        .account-hero,
        .addresses-title-row {
            margin-top: 0;
            margin-bottom: 14px;
        }

        .cart-title-row h2,
        .checkout-topbar h2,
        .orders-title-row h2,
        .order-detail-title-row h2,
        .account-hero h2,
        .addresses-title-row h2 {
            font-size: clamp(26px, 2.5vw, 34px);
            line-height: 1.12;
            letter-spacing: 0;
        }

        .cart-title-row p,
        .checkout-topbar p,
        .orders-title-row p,
        .account-hero p,
        .addresses-title-row p {
            margin-top: 8px;
            color: var(--muted);
        }

        .cart-panel,
        .checkout-side-panel,
        .orders-card,
        .order-detail-card,
        .account-card,
        .address-card,
        .upload-panel,
        .upload-side-card,
        .catalog-main,
        .filter-panel,
        .rail-card,
        .product {
            border-radius: 8px;
            border-color: #e4ebf5;
            box-shadow: 0 10px 24px rgba(15, 23, 42, .04);
        }

        .empty,
        .orders-empty,
        .catalog-loading,
        .upload-empty {
            border-radius: 8px;
            background: #f8fafc;
            color: #475569;
        }

        .btn.primary,
        .btn.buy-now,
        .product-actions .btn:not(.ghost),
        .upload-primary-button,
        #checkoutSubmitButton {
            background: var(--red);
            color: #fff;
        }

        .btn.ghost,
        .btn.secondary,
        .cart-group-button,
        .checkout-link-button {
            background: #f6f8fc;
            color: #1f2937;
            border: 1px solid #dfe7f2;
        }

        .badge,
        .stock-tag,
        .status,
        .order-status-tag,
        .address-default-badge {
            border-radius: 999px;
            font-weight: 800;
        }

        .products.products-compact {
            grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
            gap: 10px;
        }

        .products.products-compact .product {
            min-height: 206px;
            padding: 8px;
            gap: 6px;
        }

        .products.products-compact .catalog-skeleton-card {
            min-height: 206px;
            padding: 8px;
            gap: 6px;
        }

        .products.products-compact .part-image {
            height: 56px;
            min-height: 56px;
        }

        .products.products-compact .catalog-skeleton-image {
            height: 56px;
            flex-basis: 56px;
        }

        .products.products-compact .catalog-skeleton-swatches {
            min-height: 26px;
            gap: 3px;
        }

        .products.products-compact .catalog-skeleton-chip {
            width: 12px;
            height: 12px;
        }

        .products.products-compact .catalog-skeleton-button {
            height: 28px;
        }

        .products.products-compact .product h4 {
            min-height: 32px;
            font-size: 12px;
            line-height: 1.32;
        }

        .products.products-compact .variant-strip {
            min-height: 26px;
            gap: 3px;
        }

        .products.products-compact .variant-chip {
            width: 32px;
            height: 32px;
            min-width: 32px;
            min-height: 32px;
        }

        .products.products-compact .meta {
            font-size: 12px;
            gap: 3px;
        }

        .products.products-compact .meta span {
            min-width: 0;
        }

        .products.products-compact .price {
            gap: 4px;
        }

        .products.products-compact .price b {
            font-size: 14px;
        }

        .products.products-compact .product-actions .btn {
            height: 28px;
            min-height: 28px;
            font-size: 12px;
            padding: 0 5px;
        }

        .products.products-large {
            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        }

        .catalog-pager,
        .cart-list-actions,
        .match-pagination,
        .orders-pagination {
            margin-top: 16px;
        }

        .cart-summary {
            align-items: start;
        }

        .cart-summary .checkout-box,
        .checkout-box,
        .order-detail-side-card {
            top: 16px;
        }

        .cart-panel .empty {
            min-height: 180px;
            display: grid;
            place-items: center;
            text-align: center;
            padding: 28px;
        }

        .match-table-price,
        .cart-total,
        .checkout-pay-amount,
        .order-amount {
            color: var(--red);
        }

        .faq-grid .panel,
        .feedback-modal,
        .login-modal,
        .payment-panel {
            border-radius: 8px;
        }

        /* Catalog launch polish: prevent overflow and keep cards/header compact on real desktop widths. */
        html,
        body {
            max-width: 100%;
        }

        body {
            overflow-x: hidden;
        }

        .store-head-main {
            width: min(100%, 1360px);
            max-width: 1360px;
            grid-template-columns: minmax(200px, 230px) minmax(240px, 1fr) auto auto auto auto;
            gap: 12px;
            padding: 14px clamp(18px, 2vw, 28px) 12px;
            box-sizing: border-box;
        }

        .brand {
            display: grid;
            grid-template-columns: 52px minmax(0, 1fr);
            grid-template-rows: auto auto;
            align-items: center;
            column-gap: 10px;
            min-width: 0;
        }

        .brand-home {
            display: contents;
        }

        .brand-logo {
            grid-column: 1;
            grid-row: 1 / span 2;
            width: 48px;
            height: 48px;
        }

        .brand-home span {
            grid-column: 2;
            grid-row: 1;
            min-width: 0;
            color: #111827;
            font-size: 22px;
            font-weight: 900;
            line-height: 1.05;
            white-space: nowrap;
        }

        .brand-home-arrow {
            margin-left: 2px;
            color: #2563eb;
            font-size: .62em;
            font-style: normal;
            vertical-align: .18em;
        }

        .brand-home:hover span,
        .brand-home:focus-visible span {
            color: #1d4ed8;
        }

        .brand-parts {
            grid-column: 2;
            grid-row: 2;
            margin: 4px 0 0;
            min-height: 0;
            min-width: 0;
            color: #111827;
            font-size: 15px;
            font-weight: 800;
            line-height: 1.15;
            white-space: nowrap;
        }

        .store-search {
            min-width: 0;
            height: 50px;
        }

        .store-primary-links,
        .store-upload-button,
        .store-account-wrap {
            min-width: 0;
        }

        .store-primary-link,
        .store-upload-button,
        .store-account-button {
            min-height: 48px;
            padding-inline: 14px;
            white-space: nowrap;
        }

        .content {
            width: min(100%, 1360px);
            max-width: 1360px;
            padding: 24px clamp(18px, 2vw, 28px) 44px;
            box-sizing: border-box;
        }

        .catalog-layout {
            grid-template-columns: minmax(230px, 250px) minmax(0, 1fr) minmax(240px, 270px);
            gap: 18px;
        }

        .filter-panel,
        .catalog-main,
        .catalog-rail,
        .rail-card,
        .product {
            min-width: 0;
        }

        .catalog-main,
        .filter-panel,
        .rail-card {
            padding: 18px;
        }

        .filter-panel {
            overflow: visible;
        }

        .filter-panel input,
        .filter-panel select,
        .filter-panel button {
            max-width: 100%;
        }

        .catalog-toolbar {
            gap: 14px;
        }

        .catalog-toolbar h3 {
            font-size: clamp(24px, 2.1vw, 30px);
        }

        .catalog-toolbar-actions {
            flex-wrap: wrap;
            justify-content: flex-end;
        }

        .products.products-compact {
            grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
            gap: 10px;
        }

        .products.products-compact .product {
            min-height: 228px;
            padding: 9px;
            overflow: hidden;
        }

        .products.products-compact .part-image {
            height: 70px;
            min-height: 70px;
            flex-basis: 70px;
        }

        .products.products-compact .product h4 {
            min-height: 38px;
            margin-bottom: 0;
        }

        .product-title {
            word-break: break-word;
            overflow-wrap: anywhere;
        }

        .products.products-compact .product-title {
            -webkit-line-clamp: 2;
        }

        .products.products-compact .product-part-no {
            display: none;
        }

        .products.products-compact .variant-strip {
            min-height: 46px;
            max-height: 46px;
        }

        .products.products-compact .meta {
            display: grid;
            grid-template-columns: 1fr;
            line-height: 1.25;
        }

        .products.products-compact .meta span {
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .products.products-compact .product-actions {
            margin-top: auto;
        }

        .products.products-compact .product-actions .btn {
            width: 100%;
            min-width: 0;
        }

        .category-subfilters {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 10px;
        }

        .category-subfilters[hidden] {
            display: none;
        }

        .category-subfilters button {
            border: 1px solid var(--line);
            background: #fff;
            color: var(--muted);
            border-radius: 999px;
            min-height: 32px;
            padding: 7px 12px;
            font-size: 12px;
            font-weight: 800;
            cursor: pointer;
            transition: all .18s ease;
        }

        .category-subfilters button:hover,
        .category-subfilters button.active {
            border-color: var(--primary);
            background: #eff6ff;
            color: var(--primary);
        }

        .catalog-subcategory-strip {
            padding-top: 2px;
        }

        .products.products-compact {
            grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
            align-items: stretch;
        }

        .products.products-compact .product {
            min-height: 218px;
            display: flex;
            flex-direction: column;
        }

        .products.products-compact .part-image {
            height: 66px;
            min-height: 66px;
            flex-basis: 66px;
        }

        .products.products-compact .variant-strip {
            min-height: 34px;
            max-height: 34px;
            overflow: hidden;
        }

        .products.products-compact .variant-dot {
            width: 11px;
            height: 11px;
        }

        .products.products-compact .product-actions .btn,
        .products.products-large .product-actions .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            white-space: nowrap;
        }

        .cart-rail-card {
            display: grid;
            gap: 12px;
        }

        .cart-summary-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 8px;
        }

        .cart-summary-metric {
            padding: 10px;
            border-radius: 12px;
            background: #f8fafc;
            border: 1px solid var(--line);
        }

        .cart-summary-metric b {
            display: block;
            font-size: 18px;
            color: var(--ink);
            line-height: 1.1;
        }

        .cart-summary-metric small {
            display: block;
            color: var(--muted);
            margin-top: 4px;
            font-size: 12px;
        }

        .cart-summary-groups {
            display: grid;
            gap: 7px;
        }

        .cart-summary-group {
            display: flex;
            justify-content: space-between;
            gap: 8px;
            padding: 8px 10px;
            border-radius: 10px;
            background: #fff;
            border: 1px solid var(--line);
            font-size: 12px;
            color: var(--muted);
        }

        .cart-summary-group b {
            color: var(--ink);
            max-width: 130px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .cart-summary-warning {
            border: 1px solid #fed7aa;
            background: #fff7ed;
            color: #9a3412;
            border-radius: 12px;
            padding: 9px 10px;
            font-size: 12px;
            line-height: 1.45;
        }

        .cart-summary-empty {
            color: var(--muted);
            font-size: 13px;
            line-height: 1.55;
            padding: 8px 0;
        }

        .cart-summary-actions {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 8px;
        }

        .cart-summary-actions .btn {
            width: 100%;
            min-width: 0;
        }

        @media (max-width: 1320px) {
            .store-head-main {
                grid-template-columns: minmax(190px, 220px) minmax(220px, 1fr) auto auto auto;
            }

            .store-primary-links {
                display: none;
            }

            .catalog-layout {
                grid-template-columns: minmax(220px, 240px) minmax(0, 1fr) minmax(220px, 250px);
                gap: 16px;
            }

            .products.products-compact {
                grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
            }
        }

        @media (max-width: 1160px) {
            .catalog-layout {
                grid-template-columns: minmax(220px, 240px) minmax(0, 1fr);
            }

            .catalog-rail {
                grid-column: 1 / -1;
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

        @media (max-width: 960px) {
            body {
                overflow-x: hidden;
            }

            .test-notice {
                grid-template-columns: auto minmax(0, 1fr);
                min-height: 36px;
                padding: 0 14px;
                gap: 8px;
            }

            .test-notice-label {
                height: 22px;
                padding: 0 8px;
                font-size: 12px;
            }

            .test-notice-track {
                gap: 28px;
                animation-duration: 26s;
            }

            .test-notice-message {
                gap: 12px;
                font-size: 12px;
            }

            .side {
                position: static;
                align-items: flex-start;
                flex-direction: column;
            }

            .store-head-main {
                grid-template-columns: 1fr;
                width: 100%;
                padding: 16px;
                gap: 12px;
            }

            .brand-parts {
                margin-left: 0;
                font-size: 16px;
            }

            .store-search {
                width: 100%;
            }

            .store-upload-button {
                width: 100%;
                justify-content: center;
            }

            .category-subfilters {
                flex-wrap: nowrap;
                overflow-x: auto;
                padding-bottom: 2px;
            }

            .category-subfilters button {
                flex: 0 0 auto;
            }

            .cart-rail-card {
                display: none;
            }

            .color-guide-toolbar,
            .color-guide-results {
                grid-template-columns: 1fr;
            }

            .store-primary-links {
                width: 100%;
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .store-primary-link {
                width: 100%;
            }

            .store-account-wrap {
                width: 100%;
            }

            .store-cart-button,
            .store-account-button {
                width: 100%;
                border: 1px solid #e6edf6;
                border-radius: 10px;
            }

            .store-account-menu {
                left: 0;
                right: 0;
                width: auto;
            }

            .cart-mark {
                left: calc(50% - 36px);
            }

            #cartCountBadge {
                right: calc(50% - 40px);
            }

            .nav {
                width: 100%;
                max-width: none;
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 0;
                padding: 4px 16px 0;
            }

            .nav button,
            .nav a {
                width: 100%;
            }

            .content {
                padding: 20px 16px 36px;
            }

            .cart-title-row,
            .cart-title-row > div {
                display: grid;
                grid-template-columns: 1fr;
                align-items: start;
            }

            .products,
            .catalog-category-strip,
            .part-page-layout,
            .part-info-grid,
            .part-recommend-list,
            .cart-recommend-grid,
            .cart-summary,
            .hero,
            .catalog-layout,
            .orders-page,
            .order-card-body,
            .orders-filter-bar,
            .account-grid,
            .account-stats-grid,
            .account-orders-grid,
            .account-shortage-list,
            .account-address-layout,
            .account-placeholder-row,
            .order-detail-page,
            .order-status-hero,
            .addresses-page,
            .addresses-layout,
            .address-summary-grid,
            .checkout-layout,
            .checkout-steps,
            .checkout-trust-strip,
            .site-footer-inner {
                grid-template-columns: 1fr;
            }

            .search-box {
                grid-template-columns: 1fr;
            }

            .filter-panel {
                position: static;
            }

            .account-sidebar {
                position: static;
            }

            .orders-sidebar {
                position: static;
            }

            .account-side-menu {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .orders-side-menu {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .addresses-title-row {
                flex-direction: column;
            }

            .address-editor-card {
                padding: 18px;
            }

            .addresses-list-view .address-list {
                grid-template-columns: 1fr;
            }

            .address-card.modern {
                min-height: 0;
                padding: 22px;
            }

            .address-card-contact {
                grid-template-columns: 1fr;
                padding-right: 0;
            }

            .address-default-badge {
                position: static;
                width: fit-content;
            }

            .address-card.modern .row-actions {
                align-items: stretch;
                flex-wrap: wrap;
            }

            .address-default-action {
                width: 100%;
                margin-left: 0;
            }

            .account-hero {
                flex-direction: column;
            }

            .orders-title-row {
                flex-direction: column;
            }

            .checkout-topbar,
            .checkout-section-head,
            .checkout-side-head,
            .checkout-address-card {
                grid-template-columns: 1fr;
                flex-direction: column;
                align-items: stretch;
            }

            .checkout-step:not(:last-child):after {
                display: none;
            }

            .checkout-steps {
                grid-template-columns: repeat(3, minmax(0, 1fr));
                gap: 6px;
            }

            .checkout-step {
                display: grid;
                justify-items: center;
                gap: 5px;
                text-align: center;
                font-size: 12px;
                line-height: 1.25;
            }

            .checkout-step-icon {
                width: 32px;
                height: 32px;
                font-size: 14px;
            }

            .checkout-item {
                grid-template-columns: 64px minmax(0, 1fr);
            }

            .checkout-item-price {
                grid-column: 2;
                text-align: left;
            }

            .order-card-summary {
                border-left: 0;
                border-top: 1px solid #edf1f7;
                padding-left: 0;
                padding-top: 14px;
            }

            .order-item-strip {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .order-item-image {
                height: 78px;
            }

            .spec-table.is-grid {
                grid-template-columns: 1fr;
            }

            .part-info-tabs {
                gap: 18px;
            }

            .order-detail-title-row,
            .order-detail-card-head {
                flex-direction: column;
                align-items: flex-start;
            }

            .order-detail-side-card {
                position: static;
            }

            .order-goods-head {
                display: none;
            }

            .order-goods-row {
                grid-template-columns: 1fr;
                gap: 8px;
            }

            .order-goods-product {
                grid-template-columns: 76px minmax(0, 1fr);
            }

            .logistics-node {
                grid-template-columns: 86px 20px minmax(0, 1fr);
            }

            .orders-payment-box {
                grid-template-columns: 1fr;
            }

            .catalog-main,
            .filter-panel,
            .part-buy-card,
            .part-info-card,
            .part-recommend-card,
            .rail-card,
            .upload-panel,
            .upload-side-card {
                padding: 20px;
            }

            .upload-workspace {
                grid-template-columns: 1fr;
            }

            .upload-zone {
                grid-template-columns: 1fr;
                padding: 22px;
            }

            .upload-file-actions {
                justify-content: flex-start;
            }

            .part-main-image {
                min-height: 320px;
            }

            .part-main-image img {
                max-height: 300px;
            }

            .cart-list-head {
                display: none;
            }

            .cart-group-tabs {
                padding: 10px 12px;
            }

            .cart-group-tab {
                min-width: 150px;
            }

            .cart-issue-notice {
                grid-template-columns: 1fr;
                margin: 10px 12px 0;
            }

            .cart-issue-actions {
                justify-content: stretch;
            }

            .cart-issue-actions button {
                flex: 1 1 140px;
            }

            .cart-group-head {
                grid-template-columns: 34px minmax(0, 1fr);
            }

            .cart-group-pill,
            .cart-group-button {
                grid-column: 2;
                width: fit-content;
            }

            .cart-item-row {
                grid-template-columns: 34px 1fr;
                gap: 12px;
            }

            .cart-product-cell {
                grid-template-columns: 96px minmax(0, 1fr);
            }

            .cart-product-image {
                width: 96px;
            }

            .cart-unit-price,
            .cart-qty-stepper,
            .cart-line-total,
            .cart-item-actions {
                grid-column: 2;
            }

            .cart-list-actions {
                grid-template-columns: 34px 1fr;
            }

            .checkout-box {
                position: static;
            }

            .part-thumb-strip {
                grid-template-columns: repeat(3, minmax(0, 1fr));
            }

            .part-page-title {
                font-size: 26px;
            }

            .part-page-price b {
                font-size: 34px;
            }

            .part-color-grid {
                grid-template-columns: repeat(3, minmax(0, 1fr));
            }

            .part-trust-row {
                grid-template-columns: 1fr;
            }

            .catalog-toolbar {
                align-items: flex-start;
                flex-direction: column;
            }

            .catalog-toolbar-actions {
                width: 100%;
            }

            .catalog-toolbar-actions select {
                flex: 1;
            }

            .upload-zone {
                grid-template-columns: 1fr;
            }

            .upload-file-actions {
                justify-content: flex-start;
            }

            .topbar {
                align-items: flex-start;
                flex-direction: column;
            }

            .detail-variant-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .detail-buy {
                grid-template-columns: 84px 1fr;
            }

            .shortage-summary,
            .upload-total-summary,
            .match-toolbar,
            .match-filter-row,
            .upload-flow,
            .profile-strip,
            .faq-grid,
            .help-section-grid,
            .help-steps,
            .help-hero,
            .support-entry-card,
            .feedback-contact-panel {
                grid-template-columns: 1fr;
            }

            .help-hero-actions {
                justify-content: flex-start;
            }

            .support-qr.compact {
                grid-template-columns: 80px minmax(0, 1fr);
            }

            .address-form {
                grid-template-columns: 1fr;
            }
        }

        #matchTableWrap table {
            min-width: 1040px;
        }

        @media (max-width: 760px) {
            .upload-panel.has-result .upload-zone {
                grid-template-columns: 1fr;
                justify-items: stretch;
            }

            .upload-panel.has-result .upload-file-actions {
                justify-content: flex-start;
            }

            #matchTableWrap {
                display: none !important;
            }

            #matchGrid {
                display: grid;
            }

            .match-grid {
                grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
            }

            .match-card {
                min-height: 420px;
            }
        }

        @media (max-width: 640px) {
            .side {
                position: sticky;
                top: 0;
                z-index: 35;
                background: #fff;
                box-shadow: 0 1px 0 rgba(15, 23, 42, .08), 0 8px 18px rgba(15, 23, 42, .05);
                will-change: transform;
            }

            .side .test-notice,
            .side .store-head-main,
            .side .store-rainbow {
                opacity: 1;
                visibility: visible;
                overflow: hidden;
                transform: translateY(0);
                transition: max-height .24s ease, opacity .2s ease, transform .24s ease, padding .24s ease, border-width .24s ease, height .24s ease;
            }

            .side .test-notice {
                max-height: 48px;
            }

            .side .store-head-main {
                max-height: 270px;
            }

            .side .store-rainbow {
                max-height: 3px;
            }

            .store-head-main {
                grid-template-columns: repeat(4, minmax(0, 1fr));
                gap: 8px;
                padding: 11px 14px 10px;
            }

            .brand {
                grid-column: 1 / -1;
                grid-template-columns: 44px minmax(0, 1fr);
                column-gap: 10px;
            }

            .brand-logo {
                width: 44px;
                height: 44px;
                border-radius: 9px;
            }

            .brand-home span {
                font-size: 20px;
            }

            .brand-parts {
                font-size: 13px;
                margin-top: 2px;
            }

            .store-search {
                grid-column: 1 / -1;
                height: 44px;
                grid-template-columns: minmax(0, 1fr) 48px;
                border-radius: 10px;
            }

            .store-search input {
                padding: 0 14px;
                font-size: 14px;
            }

            .store-search-button:before {
                width: 13px;
                height: 13px;
                border-width: 2px;
                left: 15px;
                top: 12px;
            }

            .store-search-button:after {
                width: 9px;
                height: 2px;
                left: 27px;
                top: 27px;
            }

            .store-primary-links {
                grid-column: 1 / -1;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 8px;
                order: 4;
            }

            .store-primary-link,
            .store-cart-button,
            .store-account-button {
                height: 40px;
                min-height: 40px;
                border-radius: 10px;
                font-size: 13px;
                padding: 0 10px;
                background: #f8fbff;
            }

            .store-primary-link {
                justify-content: center;
            }

            .store-upload-button {
                grid-column: 1 / -1;
                order: 3;
                width: 100%;
                height: 44px;
                min-height: 44px;
                border-color: rgba(230, 0, 18, .18);
                background: #fff1f2;
                color: #e60012;
                box-shadow: 0 10px 20px rgba(230, 0, 18, .08);
                justify-content: center;
            }

            .store-cart-button {
                grid-column: 1 / 3;
                order: 5;
                width: 100%;
                min-width: 0;
                border: 1px solid #e6edf6;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .store-account-wrap {
                grid-column: 3 / 5;
                order: 5;
                width: 100%;
            }

            .store-account-button {
                width: 100%;
                min-width: 0;
                justify-content: center;
                gap: 5px;
            }

            .store-primary-link,
            .store-cart-button,
            .store-account-button {
                color: #475569;
                font-weight: 800;
            }

            .store-account-button #authStatus {
                max-width: none;
                font-size: 12px;
            }

            .account-caret {
                width: 7px;
                height: 7px;
                margin-left: 0;
            }

            .store-account-menu {
                top: calc(100% + 6px);
                left: auto;
                right: 0;
                width: min(180px, calc(100vw - 28px));
            }

            .cart-mark {
                position: relative;
                left: auto;
                top: auto;
                width: 23px;
                height: 17px;
                border-width: 2px;
            }

            .cart-mark:before,
            .cart-mark:after {
                bottom: -7px;
                width: 5px;
                height: 5px;
            }

            #cartCountBadge {
                top: 5px;
                right: calc(50% - 26px);
                min-width: 18px;
                height: 18px;
                font-size: 12px;
                line-height: 18px;
            }

            .nav {
                display: flex;
                flex-wrap: nowrap;
                justify-content: flex-start;
                gap: 8px;
                max-width: none;
                width: 100%;
                padding: 8px 14px 10px;
                overflow-x: auto;
                border-top: 1px solid #edf2f7;
                scrollbar-width: none;
            }

            .nav::-webkit-scrollbar {
                display: none;
            }

            .nav button,
            .nav a {
                flex: 0 0 auto;
                width: auto;
                height: 36px;
                min-height: 36px;
                padding: 0 12px;
                border: 1px solid #e3ebf6;
                border-radius: 999px;
                background: #fff;
                font-size: 13px;
                gap: 5px;
            }

            .nav button.active,
            .nav button:hover,
            .nav a.active,
            .nav a:hover {
                border-color: #fecdd3;
                background: #fff1f2;
                color: #e60012;
            }

            .nav button.active:after,
            .nav a.active:after {
                display: none;
            }

            .nav .kwc-icon {
                width: 15px;
                height: 15px;
            }

            .store-rainbow {
                height: 3px;
            }

            body.mobile-header-condensed .side {
                box-shadow: 0 1px 0 rgba(15, 23, 42, .08), 0 10px 20px rgba(15, 23, 42, .08);
            }

            body.mobile-header-condensed .side .test-notice {
                display: none;
                max-height: 0;
                opacity: 0;
                visibility: hidden;
                pointer-events: none;
            }

            body.mobile-header-condensed .side .store-head-main {
                display: none;
                max-height: 0;
                opacity: 0;
                visibility: hidden;
                pointer-events: none;
            }

            body.mobile-header-condensed .side .store-rainbow {
                display: none;
                max-height: 0;
                opacity: 0;
                visibility: hidden;
                pointer-events: none;
            }

            body.mobile-header-condensed .side .nav {
                border-top: 0;
                padding-top: 7px;
                padding-bottom: 8px;
                background: rgba(255, 255, 255, .98);
                box-shadow: 0 8px 18px rgba(15, 23, 42, .07);
            }

            .catalog-layout {
                gap: 14px;
            }

            .filter-panel {
                margin-top: 0;
                padding: 14px;
                border-radius: 12px;
            }

            .filter-panel .panel-head {
                margin-bottom: 12px;
            }

            .filter-panel .panel-head h3 {
                font-size: 18px;
            }

            .filter-panel .panel-head .btn {
                min-height: 38px;
                padding: 0 14px;
            }

            .filter-head-actions {
                gap: 6px;
            }

            .filter-toggle {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                min-width: 56px;
            }

            .mobile-filter-summary {
                margin-top: 10px;
                color: #64748b;
                font-size: 12px;
                font-weight: 800;
                line-height: 1.45;
            }

            .filter-panel.is-mobile-collapsed .panel-head {
                margin-bottom: 0;
            }

            .filter-panel.is-mobile-collapsed .filters {
                display: none;
            }

            .filter-panel.is-mobile-collapsed .mobile-filter-summary {
                display: block;
            }

            .filter-panel .filters {
                gap: 12px;
            }

            .filter-panel .filter-group {
                gap: 7px;
            }

            .filter-panel .filter-group label {
                font-size: 13px;
            }

            .filter-panel .filter-group:first-child {
                grid-template-columns: 92px minmax(0, 1fr);
            }

            .filter-panel .filter-group:first-child label {
                grid-column: 1 / -1;
            }

            .filter-panel input,
            .filter-panel select {
                height: 42px;
                font-size: 14px;
            }

            .category-grid,
            .side-category-subfilters,
            .color-grid {
                margin-left: -14px;
                margin-right: -14px;
                padding-left: 14px;
                padding-right: 14px;
                overflow-x: auto;
                scrollbar-width: none;
            }

            .category-grid::-webkit-scrollbar,
            .side-category-subfilters::-webkit-scrollbar,
            .color-grid::-webkit-scrollbar {
                display: none;
            }

            .category-grid {
                display: flex;
                gap: 8px;
                padding-bottom: 4px;
            }

            .category-grid button {
                flex: 0 0 auto;
                min-height: 40px;
                padding: 0 12px;
                display: inline-flex;
                gap: 6px;
                font-size: 13px;
                border-radius: 999px;
            }

            .category-grid .kwc-icon {
                width: 18px;
                height: 18px;
            }

            .side-category-subfilters {
                flex-wrap: nowrap;
                padding-bottom: 4px;
            }

            .color-grid {
                display: flex;
                gap: 10px;
                width: auto;
                max-width: none;
                padding-top: 2px;
                padding-bottom: 6px;
            }

            .color-grid button {
                flex: 0 0 40px;
                width: 40px;
                height: 40px;
                min-width: 40px;
                min-height: 40px;
                aspect-ratio: auto;
                border-radius: 8px;
            }

            .color-guide-entry {
                margin-top: 2px;
                padding: 8px 10px;
                border-radius: 10px;
            }

            .color-guide-entry small {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .stock-toggle-row {
                display: flex;
                gap: 8px;
                overflow-x: auto;
                padding-bottom: 2px;
                scrollbar-width: none;
            }

            .stock-toggle-row::-webkit-scrollbar {
                display: none;
            }

            .stock-toggle-row button {
                flex: 1 0 128px;
                height: 38px;
            }

            .filter-mini-option,
            #searchBtn {
                height: 42px;
            }

            .content.workflow-mode {
                padding: 14px 14px 34px;
            }

            .seo-intro {
                max-height: 86px;
                margin-bottom: 12px;
                padding: 10px 44px 10px 12px;
                border-radius: 12px;
                overflow: hidden;
                font-size: 13px;
                line-height: 1.45;
                box-shadow: none;
            }

            .seo-intro-dismiss {
                top: 8px;
                right: 8px;
                width: 32px;
                height: 32px;
                font-size: 19px;
            }

            .seo-points {
                display: none;
            }

            .upload-workspace {
                gap: 12px;
            }

            .upload-panel {
                padding: 14px;
                border-radius: 12px;
            }

            .upload-panel .panel-head {
                display: grid;
                gap: 10px;
                margin-bottom: 12px;
            }

            .upload-panel .panel-head h3 {
                font-size: 22px;
                line-height: 1.2;
            }

            .upload-panel .panel-head p {
                font-size: 12px;
                line-height: 1.5;
                display: -webkit-box;
                overflow: hidden;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
            }

            .upload-panel .panel-head > .upload-file-actions {
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 8px;
            }

            .upload-panel .panel-head > .upload-file-actions .badge {
                grid-column: 1 / -1;
                justify-content: center;
                min-height: 30px;
                font-size: 12px;
            }

            .upload-panel .panel-head > .upload-file-actions .btn {
                width: 100%;
                min-height: 38px;
                padding: 0 10px;
                font-size: 12px;
            }

            .upload-zone {
                padding: 16px;
                gap: 14px;
                border-radius: 12px;
            }

            .upload-zone strong {
                margin-bottom: 4px;
                font-size: 18px;
                line-height: 1.3;
            }

            .upload-zone span,
            .upload-note,
            .upload-file-meta {
                font-size: 12px;
                line-height: 1.45;
            }

            .upload-drop-icon {
                width: 58px;
                height: 58px;
                border-radius: 16px;
                margin-bottom: 8px;
                font-size: 30px;
            }

            .upload-format-hint {
                justify-content: center;
                gap: 6px;
                margin-top: 8px;
                font-size: 12px;
            }

            .upload-format-hint span {
                padding: 4px 7px;
                border-radius: 999px;
                background: #f1f5f9;
            }

            .upload-file-actions {
                width: 100%;
            }

            .upload-primary-file-button {
                width: 100%;
                min-width: 0;
                height: 48px;
                border-radius: 12px;
                font-size: 15px;
            }

            .upload-progress {
                margin-top: 10px;
                padding: 10px;
                border-radius: 12px;
            }

            .progress-meta {
                font-size: 12px;
                line-height: 1.45;
            }

            .upload-side {
                display: grid;
                gap: 10px;
            }

            .upload-side-card {
                padding: 14px;
                border-radius: 12px;
                box-shadow: 0 8px 18px rgba(15, 23, 42, .035);
            }

            .upload-side-card + .upload-side-card {
                margin-top: 0;
            }

            .upload-side-card h4 {
                margin-bottom: 10px;
                font-size: 18px;
                line-height: 1.25;
            }

            .upload-workspace:not(:has(.upload-panel.has-result)) .upload-side-card:nth-of-type(1),
            .upload-workspace:not(:has(.upload-panel.has-result)) .upload-side-card:nth-of-type(2),
            .upload-workspace:not(:has(.upload-panel.has-result)) .upload-side-card:nth-of-type(3),
            .upload-workspace:not(:has(.upload-panel.has-result)) .upload-side-card:nth-of-type(4),
            .upload-side-card:nth-of-type(6) {
                display: none;
            }

            .upload-stat-list {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 8px;
            }

            .upload-stat-item {
                display: grid;
                gap: 5px;
                align-content: start;
                min-height: 70px;
                padding: 9px;
                border: 1px solid #e2e8f0;
                border-radius: 10px;
                background: #fff !important;
                font-size: 12px;
            }

            .upload-stat-item:last-child {
                border-bottom: 1px solid #e2e8f0;
                padding-bottom: 9px;
            }

            .upload-stat-item span {
                gap: 6px;
                min-width: 0;
            }

            .upload-stat-item span:before {
                content: none;
                display: none;
                width: 7px;
                height: 7px;
                box-shadow: 0 0 0 3px #f1f5f9;
            }

            .upload-stat-item b,
            .upload-stat-item.primary b {
                font-size: 16px;
                line-height: 1.25;
            }

            .upload-side-actions {
                gap: 8px;
            }

            .upload-side-actions .btn {
                min-height: 40px;
                font-size: 12px;
            }

            .upload-side-summary {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 8px;
            }

            .upload-side-summary-row {
                display: grid;
                gap: 5px;
                min-height: 64px;
                padding: 9px;
                border: 1px solid #e2e8f0;
                border-radius: 10px;
                background: #fff;
                font-size: 12px;
            }

            .upload-side-summary-row:last-child {
                border-bottom: 1px solid #e2e8f0;
                padding-bottom: 9px;
            }

            .upload-side-summary-row b {
                font-size: 15px;
                line-height: 1.25;
            }

            .upload-side-summary-row.total b {
                font-size: 16px;
            }

            .upload-history-privacy {
                display: none;
            }

            .upload-history-list {
                gap: 8px;
            }

            .upload-history-item {
                padding: 10px;
                border-radius: 10px;
            }

            .upload-history-title b {
                font-size: 12px;
                display: -webkit-box;
                overflow: hidden;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
            }

            .upload-history-actions {
                gap: 8px 12px;
            }

            .upload-result-head {
                display: grid;
                grid-template-columns: 1fr;
            }

            .upload-panel.has-result {
                padding: 12px;
            }

            .upload-panel.has-result > .panel-head,
            .upload-panel.has-result .upload-zone,
            .upload-panel.has-result .upload-preview-steps {
                display: none;
            }

            .upload-panel.has-result .upload-progress {
                margin-top: 0;
                padding: 9px 10px;
                border-radius: 10px;
            }

            .upload-panel.has-result .progress-meta {
                margin-top: 7px;
                font-size: 12px;
            }

            .upload-panel.has-result .upload-file-meta {
                display: none;
            }

            .upload-result-head {
                margin: 0 0 10px;
                padding: 12px;
                gap: 10px;
                border-radius: 12px;
            }

            .upload-result-head h3 {
                font-size: 20px;
                line-height: 1.25;
            }

            .upload-result-head p {
                font-size: 12px;
                line-height: 1.45;
                display: -webkit-box;
                overflow: hidden;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
            }

            .upload-result-actions {
                display: grid;
                grid-template-columns: repeat(3, minmax(0, 1fr));
                gap: 7px;
            }

            .upload-result-actions .btn {
                min-height: 36px;
                padding: 0 8px;
                font-size: 12px;
            }

            .upload-total-summary {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 8px;
                margin: 10px 0 8px;
            }

            .upload-total-card {
                padding: 10px;
                border-radius: 10px;
                box-shadow: none;
            }

            .upload-total-card b {
                font-size: 18px;
            }

            .upload-total-card span {
                font-size: 12px;
                line-height: 1.35;
                display: -webkit-box;
                overflow: hidden;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
            }

            .upload-total-card .summary-kicker {
                margin-bottom: 5px;
                font-size: 12px;
            }

            .tabs {
                display: flex;
                flex-wrap: nowrap;
                gap: 8px;
                margin: 8px -12px 10px;
                padding: 0 12px 4px;
                overflow-x: auto;
                scrollbar-width: none;
            }

            .tabs::-webkit-scrollbar {
                display: none;
            }

            .tabs .tab {
                flex: 0 0 auto;
                min-height: 34px;
                padding: 0 12px;
                border-radius: 999px;
                font-size: 12px;
                white-space: nowrap;
            }

            .match-toolbar {
                margin: 8px 0 10px;
                padding: 10px;
                border-radius: 12px;
                gap: 8px;
            }

            .match-search-block {
                gap: 4px;
            }

            .match-search-block small {
                display: none;
            }

            .match-filter-row {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 8px;
            }

            .match-toolbar input,
            .match-toolbar select,
            .upload-pager input,
            .upload-pager select {
                height: 38px;
                font-size: 12px;
            }

            .match-view-toggle {
                grid-column: 1 / -1;
            }

            .upload-actions {
                display: grid;
                gap: 8px;
                margin: 8px 0 10px;
            }

            .upload-actions .left-actions,
            .upload-actions .right-actions {
                width: 100%;
            }

            .upload-actions .left-actions {
                font-size: 12px;
                line-height: 1.45;
            }

            .upload-actions .right-actions {
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 8px;
            }

            .upload-actions .right-actions .btn {
                min-height: 38px;
                padding: 0 8px;
                font-size: 12px;
            }

            .upload-actions .right-actions #addMatchedToCartButton {
                grid-column: 1 / -1;
            }

            .shortage-summary {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 8px;
                margin: 10px 0;
            }

            .shortage-card {
                padding: 9px;
                border-radius: 10px;
            }

            .shortage-card b {
                font-size: 16px;
            }

            .shortage-card span {
                font-size: 12px;
            }

            .upload-result-actions,
            .upload-actions .right-actions,
            .upload-bottom-actions,
            .match-card-footer,
            .replacement-dialog-actions,
            .replacement-sticky-actions {
                justify-content: stretch;
            }

            .upload-result-actions .btn,
            .upload-actions .btn,
            .upload-bottom-actions .btn,
            .match-card-footer .btn,
            .replacement-dialog-actions .btn,
            .replacement-sticky-actions .btn,
            .replacement-actions .btn {
                width: 100%;
            }

            .match-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 10px;
                margin-top: 10px;
            }

            .match-grid.match-grid-mobile-list {
                grid-template-columns: 1fr;
                gap: 8px;
            }

            .match-card-facts {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .match-card {
                min-height: 0;
                grid-template-rows: auto 108px auto auto minmax(38px, auto) auto;
                gap: 8px;
                padding: 10px;
                border-radius: 12px;
            }

            .match-card > .match-image.large {
                height: 108px;
            }

            .match-card h4 {
                font-size: 13px;
            }

            .match-card .meta {
                font-size: 12px;
                -webkit-line-clamp: 1;
            }

            .match-card-main {
                min-height: 76px;
            }

            .match-fact {
                padding: 5px 6px;
            }

            .match-card-stock-note {
                min-height: 38px;
                padding: 7px 8px;
                font-size: 12px;
            }

            .match-grid-mobile-list .match-card {
                grid-template-columns: 74px minmax(0, 1fr);
                grid-template-rows: auto auto auto auto;
                min-height: 0;
                gap: 6px 8px;
                padding: 8px;
            }

            .match-grid-mobile-list .match-card-select {
                grid-column: 1 / -1;
                min-height: 22px;
                font-size: 12px;
            }

            .match-grid-mobile-list .match-card > .match-image.large {
                grid-column: 1;
                grid-row: 2 / 5;
                height: 74px;
            }

            .match-grid-mobile-list .match-card-main {
                grid-column: 2;
                min-height: 0;
                gap: 3px;
            }

            .match-grid-mobile-list .match-card h4 {
                font-size: 13px;
                -webkit-line-clamp: 1;
            }

            .match-grid-mobile-list .match-card .meta {
                font-size: 12px;
                line-height: 1.35;
                -webkit-line-clamp: 1;
            }

            .match-grid-mobile-list .match-card-facts {
                grid-column: 2;
                gap: 5px;
            }

            .match-grid-mobile-list .match-fact {
                padding: 4px 5px;
                font-size: 12px;
            }

            .match-grid-mobile-list .match-fact b {
                font-size: 12px;
            }

            .match-grid-mobile-list .match-card-stock-note,
            .match-grid-mobile-list .match-card > .meta {
                display: none;
            }

            .match-grid-mobile-list .match-card-footer {
                grid-column: 1 / -1;
                display: grid;
                grid-template-columns: auto minmax(0, 1fr);
                align-items: center;
                gap: 7px;
            }

            .match-grid-mobile-list .match-card-footer .status {
                width: fit-content;
                white-space: nowrap;
            }

            .match-grid-mobile-list .match-card-footer .replacement-actions {
                grid-template-columns: 1fr;
                gap: 5px;
            }

            .match-grid-mobile-list .match-card-footer .btn,
            .match-grid-mobile-list .replacement-actions .btn {
                min-height: 32px;
                padding: 6px 8px;
                font-size: 12px;
            }

            .match-grid-mobile-cards .match-card {
                grid-template-rows: auto 96px auto auto minmax(34px, auto) auto;
            }

            .match-grid-mobile-cards .match-card > .match-image.large {
                height: 96px;
            }

            .match-grid-mobile-cards .match-card-select {
                font-size: 12px;
            }

            .match-grid-mobile-cards .match-card-main {
                min-height: 64px;
            }

            .match-grid-mobile-cards .match-card h4 {
                font-size: 12.5px;
                -webkit-line-clamp: 1;
            }

            .match-grid-mobile-cards .match-card .meta {
                font-size: 12px;
                -webkit-line-clamp: 1;
            }

            .match-grid-mobile-cards .match-card-stock-note {
                min-height: 34px;
                -webkit-line-clamp: 1;
            }

            .match-grid-mobile-cards .match-card-footer .status {
                display: none;
            }

            .match-action-tip {
                margin: 8px 0;
                padding: 8px 10px;
                border-radius: 10px;
            }

            .upload-selection-bar {
                display: none;
            }

            .upload-bottom-bar {
                bottom: 8px;
                margin-top: 10px;
                padding: 9px 10px;
                border-radius: 12px;
                gap: 8px;
            }

            .upload-bottom-total {
                width: 100%;
                font-size: 12px;
                line-height: 1.35;
            }

            .upload-bottom-total b {
                font-size: 18px;
            }

            .upload-bottom-actions {
                display: grid;
                grid-template-columns: .85fr 1.15fr;
                width: 100%;
                gap: 8px;
            }

            .upload-bottom-actions .btn {
                min-height: 38px;
                padding: 0 8px;
                font-size: 12px;
            }

            .upload-pager {
                justify-content: center;
                gap: 8px;
                margin-top: 10px;
                font-size: 12px;
            }

            .upload-pager .pager-controls {
                width: 100%;
                justify-content: center;
                gap: 7px;
            }

            .upload-pager .pager-controls label:first-child,
            .upload-pager .pager-controls label:nth-of-type(2) {
                display: none;
            }

            .support-contact-points {
                grid-template-columns: 1fr;
            }

            .match-action-tip {
                align-items: flex-start;
                font-size: 12px;
            }

            .upload-guide-steps,
            .replacement-preview {
                grid-template-columns: 1fr;
            }

            .replacement-dialog {
                width: calc(100vw - 24px);
                max-height: calc(100dvh - 40px);
            }

            .auth-card.replacement-dialog {
                width: calc(100vw - 24px);
            }

            .replacement-dialog .detail-title,
            .replacement-body,
            .replacement-sticky-actions {
                padding-left: 14px;
                padding-right: 14px;
            }

            .replacement-preview {
                grid-template-columns: 72px minmax(0, 1fr);
            }

            .replacement-preview .match-image,
            .replacement-preview .match-image.large {
                width: 72px;
                height: 72px;
            }

            .replacement-summary-facts {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 4px 8px;
            }

            .replacement-summary-head {
                display: grid;
            }

            .replacement-pill {
                padding: 3px 0;
                background: transparent;
                border-radius: 0;
                border: 0;
            }

            .replacement-pill b {
                font-size: 12px;
            }

            .replacement-option-grid {
                grid-template-columns: 1fr;
            }

            .replacement-choice-panel {
                min-height: 0;
            }

            .replacement-option {
                grid-template-columns: 64px minmax(0, 1fr);
            }

            .replacement-option-media {
                height: 64px;
            }

            .replacement-meta-list .replacement-reason {
                display: none;
            }

            .replacement-sticky-actions {
                display: grid;
                grid-template-columns: 1fr;
            }

            .upload-primary-file-button {
                min-width: min(100%, 320px);
            }

            .upload-guide-dialog {
                width: min(420px, calc(100vw - 28px));
            }

            .upload-guide-check {
                align-items: center;
            }

            .upload-guide-dialog .replacement-dialog-actions .btn {
                width: 100%;
            }

            .site-footer {
                padding: 22px 18px 18px;
            }

            .site-footer:before,
            .site-footer:after {
                display: none;
            }

            .site-footer-inner {
                gap: 12px;
            }

            .site-footer-inner > div {
                min-width: 0;
            }

            .footer-brand {
                padding-bottom: 10px;
                border-bottom: 1px solid var(--line);
            }

            .site-footer b {
                margin-bottom: 4px;
                font-size: 15px;
                line-height: 1.35;
            }

            .site-footer p {
                margin-bottom: 4px;
                font-size: 12px;
                line-height: 1.55;
                overflow-wrap: anywhere;
            }

            .footer-brand p:first-of-type {
                display: -webkit-box;
                overflow: hidden;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
            }

            .footer-brand p:nth-of-type(2) {
                color: #94a3b8;
                font-size: 12px;
                line-height: 1.45;
            }

            .footer-links {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 8px 12px;
                padding-top: 2px;
            }

            .footer-guide {
                display: none;
            }

            .footer-service {
                display: grid;
                grid-template-columns: repeat(3, minmax(0, 1fr));
                gap: 8px;
            }

            .footer-service b,
            .footer-service button:nth-of-type(n+4) {
                display: none;
            }

            .footer-service button {
                justify-content: center;
                height: 36px;
                border: 1px solid #dbeafe;
                border-radius: 10px;
                background: #eff6ff;
                color: #1d4ed8;
                text-align: center;
                font-weight: 900;
            }

            .footer-about {
                display: flex;
                flex-wrap: wrap;
                gap: 6px 12px;
                padding-top: 0;
                border-top: 0;
            }

            .footer-legal {
                width: 100%;
                margin-top: 0;
                padding-top: 0;
                border-top: 0;
            }

            .footer-about b,
            .footer-about a:not([href*="beian"]),
            .footer-about button {
                display: none;
            }

            .footer-links a,
            .footer-links button,
            .footer-links span {
                min-height: 32px;
                align-items: center;
                min-width: 0;
                font-size: 13px;
                line-height: 1.45;
                overflow-wrap: anywhere;
            }

            .footer-links span,
            .footer-links a[href*="beian"] {
                font-size: 12px;
                color: var(--muted);
            }

            .footer-about span,
            .footer-about a[href*="beian"] {
                line-height: 1.5;
            }

            .detail-panel {
                width: 100vw;
                height: 100dvh;
                padding: 14px 14px 0;
                overflow: auto;
                overscroll-behavior: contain;
            }

            .detail-panel > .detail-title {
                top: -14px;
                margin: -14px -14px 10px;
                padding: 12px 14px 10px;
            }

            .detail-panel > .detail-title h3 {
                font-size: 20px;
                line-height: 1.25;
            }

            .detail-close-button {
                width: 40px;
                min-width: 40px;
                height: 40px;
                border-radius: 12px;
            }

            .detail-panel .viewer-box {
                min-height: 144px;
                margin-bottom: 10px;
                padding: 10px;
            }

            .detail-panel .viewer-box img {
                max-height: 132px;
            }

            .detail-panel > .panel {
                margin-left: -2px;
                margin-right: -2px;
                padding: 12px;
            }

            .part-variant-head {
                gap: 8px;
            }

            .part-variant-head h3 {
                font-size: 16px;
            }

            .part-variant-tools {
                gap: 6px;
            }

            .part-variant-tools .badge {
                max-width: 168px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .detail-panel .detail-variant-grid {
                padding-bottom: 12px;
            }

            .detail-buy {
                position: sticky;
                bottom: 0;
                z-index: 15;
                grid-template-columns: 84px 1fr;
                margin: 10px -14px 0;
                padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
                background: rgba(255, 255, 255, .96);
                border-top: 1px solid #e5eaf2;
                box-shadow: 0 -12px 28px rgba(15, 23, 42, .1);
                backdrop-filter: blur(12px);
            }

            .detail-buy input,
            .detail-buy .btn {
                min-height: 46px;
                font-size: 16px;
            }

            .catalog-rail {
                display: grid;
                grid-template-columns: 1fr;
                gap: 10px;
            }

            .catalog-rail > .rail-card:not(.mobile-rail-card),
            .catalog-rail > .rail-trust {
                display: none;
            }

            .catalog-rail.is-mobile-expanded > .rail-card:not(.mobile-rail-card),
            .catalog-rail.is-mobile-expanded > .rail-trust {
                display: grid;
            }

            .mobile-rail-card {
                display: grid;
                gap: 12px;
                padding: 14px;
                border-radius: 12px;
            }

            .mobile-rail-card b {
                margin: 0;
                font-size: 17px;
            }

            .mobile-rail-card p {
                margin: 0;
                font-size: 12px;
                line-height: 1.5;
            }

            .mobile-rail-actions {
                display: grid;
                grid-template-columns: repeat(3, minmax(0, 1fr));
                gap: 8px;
            }

            .mobile-rail-actions button {
                min-width: 0;
                height: 40px;
                border: 1px solid #dbeafe;
                border-radius: 10px;
                background: #eff6ff;
                color: #1d4ed8;
                font-size: 12px;
                font-weight: 900;
                cursor: pointer;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: 5px;
            }

            .mobile-rail-actions button:first-child {
                border-color: #fecdd3;
                background: #fff1f2;
                color: #e60012;
            }

            .mobile-rail-toggle {
                width: 100%;
                height: 38px;
                border: 1px solid #e2e8f0;
                border-radius: 10px;
                background: #fff;
                color: #334155;
                font-weight: 900;
                cursor: pointer;
            }

            .catalog-rail.is-mobile-expanded .mobile-rail-toggle {
                background: #f8fafc;
            }

            .catalog-rail.is-mobile-expanded .upload-rail-card,
            .catalog-rail.is-mobile-expanded .deal-card,
            .catalog-rail.is-mobile-expanded .help-card,
            .catalog-rail.is-mobile-expanded .co-create-card {
                padding: 14px;
            }

            .catalog-rail.is-mobile-expanded .upload-rail-card {
                min-height: 0;
            }

            .catalog-rail.is-mobile-expanded .rail-paper {
                display: none;
            }

            .catalog-rail.is-mobile-expanded .rail-trust {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

        .monthly-new-card {
            display: none !important;
        }

        .catalog-view-group {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            color: #64748b;
            font-size: 12px;
            font-weight: 900;
            white-space: nowrap;
        }

        .catalog-view-group .catalog-view-toggle {
            flex: 0 0 auto;
        }

        .products.products-compact,
        .products.products-detail {
            align-items: stretch;
        }

        .products.products-compact.products-image-small {
            grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
            gap: 10px;
        }

        .products.products-compact.products-image-large {
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            gap: 12px;
        }

        .products.products-detail.products-image-small {
            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
            gap: 16px;
        }

        .products.products-detail.products-image-large {
            grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
            gap: 18px;
        }

        .products.products-compact .product,
        .products.products-detail .product {
            display: flex;
            flex-direction: column;
            gap: 10px;
            border-radius: 8px;
            overflow: visible;
        }

        .products.products-compact.products-image-small .product {
            min-height: 218px;
            padding: 10px;
        }

        .products.products-compact.products-image-large .product {
            min-height: 266px;
            padding: 11px;
        }

        .products.products-detail.products-image-small .product {
            min-height: 372px;
            padding: 14px;
        }

        .products.products-detail.products-image-large .product {
            min-height: 456px;
            padding: 16px;
        }

        .products.products-compact.products-image-small .part-image {
            height: 70px;
            min-height: 70px;
            flex-basis: 70px;
        }

        .products.products-compact.products-image-large .part-image {
            height: 118px;
            min-height: 118px;
            flex-basis: 118px;
        }

        .products.products-detail.products-image-small .part-image {
            height: 122px;
            min-height: 122px;
            flex-basis: 122px;
        }

        .products.products-detail.products-image-large .part-image {
            height: 168px;
            min-height: 168px;
            flex-basis: 168px;
        }

        .products.products-compact .product h4,
        .products.products-detail .product h4 {
            margin: 0;
        }

        .products.products-compact .product h4 {
            min-height: 38px;
            font-size: 13px;
            line-height: 1.35;
        }

        .products.products-detail .product h4 {
            height: 44px;
            min-height: 44px;
            flex: 0 0 44px;
            font-size: 14px;
            line-height: 1.35;
            overflow: hidden;
        }

        .products.products-compact .product-title,
        .products.products-detail .product-title {
            display: -webkit-box;
            overflow: hidden;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
        }

        .products.products-compact .variant-strip,
        .products.products-compact .meta,
        .products.products-compact .price span,
        .products.products-compact .product-actions .btn.ghost {
            display: none;
        }

        .products.products-compact .product-part-no-compact {
            color: #64748b;
            font-size: 12px;
            font-weight: 800;
            line-height: 1.25;
            min-height: 14px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .products.products-detail .product-part-no-compact {
            display: none;
        }

        .products.products-detail .variant-strip {
            height: 50px;
            min-height: 50px;
            max-height: 50px;
            flex: 0 0 50px;
            overflow: visible;
            gap: 5px;
        }

        .products.products-detail .variant-chip-row {
            min-height: 32px;
            max-height: 32px;
            gap: 7px;
            padding: 4px 6px 0;
            margin: -4px -6px 0;
            flex-wrap: nowrap;
            overflow: visible;
        }

        .products.products-detail .variant-chip {
            width: 32px;
            height: 32px;
            min-width: 32px;
            min-height: 32px;
            flex: 0 0 32px;
        }

        .products.products-detail .variant-chip.active {
            outline: 0;
            box-shadow: 0 0 0 2px #fff, 0 0 0 4px #e60012, inset 0 0 0 2px rgba(255,255,255,.58);
        }

        .products.products-detail .variant-more {
            min-height: 32px;
            min-width: 32px;
            padding: 0 10px;
            font-size: 12px;
        }

        .products.products-detail .variant-count {
            font-size: 12px;
            line-height: 1.2;
            display: block;
            min-height: 14px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .products.products-detail .meta {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 6px 12px;
            font-size: 12px;
            line-height: 1.25;
            height: 54px;
            min-height: 54px;
            overflow: hidden;
        }

        .products.products-detail .meta span {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .products.products-detail .meta .catalog-meta-badge.stock,
        .products.products-detail .meta .catalog-meta-badge.warn {
            grid-column: 1 / -1;
            justify-self: start;
            max-width: 100%;
            padding-right: 10px;
        }

        .products.products-detail .meta .catalog-meta-badge:not(.stock):not(.warn) {
            display: none;
        }

        .products.products-compact .price,
        .products.products-detail .price {
            flex: 0 0 28px;
            min-height: 28px;
            margin-top: auto;
            overflow: hidden;
        }

        .products.products-compact .price .price-original,
        .products.products-detail .price .price-original {
            display: inline-flex;
        }

        .products.products-compact .price {
            flex: 0 0 36px;
            min-height: 36px;
            flex-direction: column;
            align-items: flex-start;
            justify-content: flex-start;
            gap: 1px;
            line-height: 1.08;
            overflow: visible;
        }

        .products.products-compact .price .price-original {
            font-size: 12px;
            line-height: 1.1;
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .products.products-compact .price b {
            font-size: 16px;
            line-height: 1.08;
        }

        .products.products-detail .price b {
            font-size: 18px;
        }

        .products.products-compact .discount-ribbon {
            left: 6px;
            top: 6px;
            height: 19px;
            padding: 0 7px;
            font-size: 12px;
        }

        .products.products-detail .discount-ribbon {
            left: 7px;
            top: 7px;
            height: 20px;
            padding: 0 8px;
            font-size: 12px;
        }

        .products.products-compact .product-actions,
        .products.products-detail .product-actions {
            flex: 0 0 38px;
            margin-top: 0;
            align-items: end;
        }

        .products.products-compact .product-actions {
            grid-template-columns: 1fr;
        }

        .products.products-compact .product-actions .btn,
        .products.products-detail .product-actions .btn {
            min-width: 0;
            width: 100%;
            height: 38px;
            font-size: 13px;
        }

        @media (max-width: 620px) {
            .catalog-main {
                padding: 12px;
                border-radius: 12px;
            }

            .catalog-toolbar {
                gap: 10px;
                margin-bottom: 10px;
            }

            .catalog-toolbar h3 {
                font-size: 22px;
                line-height: 1.18;
            }

            #catalogSummary {
                margin-top: 4px !important;
                font-size: 12px !important;
                line-height: 1.45;
                display: -webkit-box;
                overflow: hidden;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
            }

            .catalog-toolbar-actions {
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 8px;
                align-items: stretch;
            }

            .catalog-toolbar-actions .badge {
                display: none;
            }

            .catalog-toolbar-actions select {
                width: 100%;
                height: 38px;
                min-width: 0;
                font-size: 13px;
                padding-left: 10px;
                padding-right: 28px;
            }

            .catalog-view-group {
                width: 100%;
                justify-content: stretch;
                gap: 0;
            }

            .catalog-view-group > span {
                display: none;
            }

            .catalog-view-group .catalog-view-toggle {
                width: 100%;
                min-width: 0;
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .catalog-view-toggle button {
                height: 32px;
                padding: 0 8px;
                font-size: 12px;
            }

            .products {
                gap: 8px;
            }

            .products.products-compact.products-image-small {
                grid-template-columns: repeat(3, minmax(0, 1fr));
                gap: 8px;
            }

            .products.products-compact.products-image-small .product {
                min-height: 176px;
                padding: 8px;
                gap: 7px;
            }

            .products.products-compact.products-image-small .part-image {
                height: 58px;
                min-height: 58px;
                flex-basis: 58px;
            }

            .products.products-compact.products-image-small .product h4 {
                min-height: 32px;
                font-size: 12px;
                line-height: 1.32;
            }

            .products.products-compact .product-part-no-compact {
                font-size: 12px;
                min-height: 12px;
            }

            .products.products-compact .price {
                flex-basis: 32px;
                min-height: 32px;
            }

            .products.products-compact .price .price-original {
                font-size: 12px;
                line-height: 1.05;
            }

            .products.products-compact .price b {
                font-size: 14px;
            }

            .products.products-compact.products-image-small .product-actions,
            .products.products-compact.products-image-small .product-actions .btn {
                height: 32px;
                flex-basis: 32px;
                font-size: 12px;
            }

            .products.products-detail.products-image-small {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .products.products-compact.products-image-large,
            .products.products-detail.products-image-large {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 640px) and (prefers-reduced-motion: reduce) {
            .side .test-notice,
            .side .store-head-main,
            .side .store-rainbow {
                transition: none;
            }
        }

        @media (max-width: 1024px) {
            .cart-recommend-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .cart-recommend-card {
                grid-template-columns: 88px minmax(0, 1fr);
                align-items: center;
                gap: 6px 12px;
            }

            .cart-recommend-card img,
            .cart-recommend-card .image-fallback {
                grid-row: 1 / span 4;
                width: 88px;
                height: 88px;
                aspect-ratio: auto;
            }

            .cart-recommend-card b {
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
            }

            .cart-recommend-card .btn {
                grid-column: 2;
                min-height: 38px;
                padding: 0 12px;
            }
        }

        @media (max-width: 640px) {
            .cart-recommend-section {
                padding: 14px;
                border-radius: 12px;
            }

            .cart-recommend-head {
                margin-bottom: 12px;
            }

            .cart-recommend-head h3 {
                font-size: 20px;
            }

            .cart-recommend-grid {
                grid-template-columns: 1fr;
                gap: 10px;
            }

            .cart-recommend-card {
                grid-template-columns: 72px minmax(0, 1fr);
                padding: 10px;
            }

            .cart-recommend-card img,
            .cart-recommend-card .image-fallback {
                width: 72px;
                height: 72px;
                border-radius: 8px;
            }

            .cart-recommend-card b {
                font-size: 14px;
            }

            .cart-recommend-price {
                font-size: 16px;
            }
        }

        @media (max-width: 640px) {
            .store-head-main {
                background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
            }

            .store-primary-link,
            .store-upload-button,
            .store-cart-button,
            .store-account-button {
                border-color: #dbe5f2;
                box-shadow: 0 8px 18px rgba(15, 23, 42, .045);
            }

            .store-upload-button {
                border-color: rgba(230, 0, 18, .18);
                box-shadow: 0 10px 20px rgba(230, 0, 18, .08);
            }

            .store-account-button {
                padding: 0 7px;
            }

            .store-account-button .kwc-icon,
            .store-cart-button .kwc-icon {
                width: 19px;
                height: 19px;
            }

            .store-account-button #authStatus {
                overflow: visible;
                text-overflow: clip;
                white-space: nowrap;
            }

            .store-account-button .account-caret {
                display: none;
            }

            .checkout-page,
            .cart-page,
            .orders-page,
            .account-grid {
                gap: 14px;
            }

            .checkout-topbar {
                display: grid;
                grid-template-columns: minmax(0, 1fr);
                padding: 14px;
                border: 1px solid #dbe5f2;
                border-radius: 16px;
                background: linear-gradient(135deg, #fff 0%, #f7fbff 100%);
                box-shadow: 0 10px 24px rgba(15, 23, 42, .045);
            }

            .checkout-brand-logo {
                width: 40px;
                height: 40px;
                border-radius: 9px;
            }

            .checkout-safe {
                min-height: 44px;
                padding: 10px 12px;
                border-radius: 12px;
                background: #eff6ff;
                color: #1d4ed8;
            }

            .checkout-safe-icon {
                width: 34px;
                height: 34px;
                border-radius: 10px;
            }

            .checkout-section,
            .checkout-side-panel {
                padding: 16px;
                border-radius: 16px;
                box-shadow: 0 10px 24px rgba(15, 23, 42, .045);
            }

            .checkout-section-head h3,
            .checkout-side-head h3 {
                font-size: 19px;
            }

            .checkout-address-card,
            .checkout-delivery-option,
            .checkout-pay-option {
                border-radius: 14px;
                background: #fbfdff;
            }

            .checkout-pay-option {
                min-height: 64px;
                align-items: center;
            }

            .checkout-pay-option.active {
                background: #fff7f7;
                border-color: #e60012;
            }

            .checkout-submit {
                height: 52px;
                border-radius: 14px;
                box-shadow: 0 12px 26px rgba(230, 0, 18, .2);
            }

            .checkout-trust-strip {
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 8px;
                margin-top: 12px;
            }

            .checkout-trust-strip span {
                min-height: 32px;
                border-radius: 999px;
                background: #f1f5f9;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                color: #475569;
                font-size: 12px;
                font-weight: 800;
            }

            .payment-dialog {
                border-radius: 18px;
                box-shadow: 0 24px 70px rgba(15, 23, 42, .26);
            }

            .payment-dialog-head {
                align-items: center;
                padding-bottom: 12px;
            }

            .payment-dialog-head .btn {
                min-height: 40px;
                border-radius: 12px;
            }

            .payment-dialog-summary {
                gap: 8px;
                margin-top: 12px;
            }

            .payment-modal-status {
                font-size: 14px;
            }

            .payment-dialog-actions .btn,
            .payment-modal-fallback .btn {
                min-height: 44px;
                border-radius: 12px;
            }

            #paymentModalOrdersButton {
                background: #0068d9;
                color: #fff;
                border-color: #0068d9;
            }

            .account-sidebar {
                border-radius: 16px;
            }

            .account-user-card {
                display: grid;
                grid-template-columns: 66px minmax(0, 1fr);
                gap: 12px;
                align-items: center;
                padding: 16px;
                text-align: left;
            }

            .account-avatar {
                grid-row: 1 / span 3;
                width: 66px;
                height: 66px;
                margin: 0;
                border-radius: 18px;
                font-size: 17px;
            }

            .account-user-card h3,
            .account-member-badge,
            .account-user-card p {
                grid-column: 2;
            }

            .account-user-card h3 {
                margin-bottom: 6px;
                font-size: 21px;
                line-height: 1.15;
            }

            .account-user-card p {
                margin-top: 8px !important;
                font-size: 12px;
                line-height: 1.45;
            }

            .account-member-badge {
                width: fit-content;
                min-height: 26px;
                padding: 0 10px;
                font-size: 12px;
            }

            .account-side-menu {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 8px;
                padding: 10px;
            }

            .account-side-menu button {
                min-height: 42px;
                justify-content: center;
                padding: 0 8px;
                border: 1px solid #e2e8f0;
                background: #fff;
                text-align: center;
                font-size: 13px;
            }

            .account-stats-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 10px;
            }

            .account-stat-card {
                min-height: 104px;
                padding: 12px;
                border-radius: 14px;
                box-shadow: 0 8px 18px rgba(15, 23, 42, .04);
            }

            .account-stat-icon {
                width: 36px;
                height: 36px;
            }

            .account-stat-icon .kwc-icon {
                width: 21px;
                height: 21px;
            }

            .account-stat-card b {
                font-size: 24px;
            }

            .account-stat-card span {
                font-size: 12px;
            }

            .account-section-card,
            .support-entry-card {
                border-radius: 16px;
                padding: 16px;
            }

            .site-footer {
                background: linear-gradient(180deg, #fff 0%, #f8fbff 100%);
            }

            .footer-links button,
            .footer-links a,
            .footer-service button {
                box-shadow: 0 6px 14px rgba(15, 23, 42, .035);
            }
        }

        @media (max-width: 360px) {
            .products.products-compact.products-image-small {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }
    /* ---- parts-ui-20260905 ---- */
        .store-intro { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 18px; }
        .store-intro h2 { margin: 0; font-size: 23px; line-height: 1.4; letter-spacing: -.4px; }
        .store-intro p { margin: 5px 0 0; color: var(--muted); font-size: 13px; }
        .store-intro > a { flex: none; color: #475569; font-size: 13px; text-decoration: none; padding: 10px 0; }
        .seo-intro.shopping-guide { margin: 26px 0 0; padding: 0; max-height: none; overflow: visible; }
        .shopping-guide > summary { padding: 18px 22px; font-weight: 700; cursor: pointer; color: var(--ink); }
        .shopping-guide-body { padding: 4px 22px 22px; }
        .shopping-guide:not([open]) .seo-intro-dismiss { display: none; }
        .shopping-guide .seo-points { display: block; }
        .catalog-toolbar h3 { font-size: 26px; }
        .catalog-toolbar-actions { flex-wrap: nowrap; }
        .catalog-display-options { position: relative; flex: none; }
        .catalog-display-options > summary { list-style: none; cursor: pointer; border: 1px solid #dbe5f2; background: #fff; padding: 11px 13px; border-radius: 8px; font-size: 13px; white-space: nowrap; }
        .catalog-display-options > summary::-webkit-details-marker { display: none; }
        .catalog-display-options > summary:after { content: '⌄'; margin-left: 8px; }
        .catalog-display-options[open] > summary { border-color: #64748b; }
        .catalog-display-options > summary:focus-visible { outline: 3px solid #bfdbfe; outline-offset: 2px; }
        .catalog-display-popover { position: absolute; right: 0; top: calc(100% + 8px); width: min(310px, calc(100vw - 48px)); padding: 16px; display: grid; gap: 12px; background: #fff; border: 1px solid #dbe5f2; border-radius: 12px; box-shadow: 0 12px 28px rgba(15,23,42,.14); z-index: 45; }
        .catalog-display-popover .catalog-view-group { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
        .catalog-display-popover .catalog-view-group > span { display: inline; }
        .catalog-display-popover #pageSize { display: block; width: 100%; }
        .catalog-main { scroll-margin-top: 64px; }
        .products.products-compact.products-image-small { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
        .products.products-compact.products-image-small .part-image { height: 94px; }
        .product-part-no-compact { color: #334155; }
        .match-replacement-tip.hidden, .match-action-tip.hidden { display: none; }
        .upload-panel:not(.has-result) .match-action-tip { display: none; }
        .part-unit-price { color: #e60012; font-size: 20px; }
        .part-unit-price small { font-size: 12px; font-weight: 500; color: var(--muted); }
        @media (max-width: 1024px) {
            .side { position: sticky; top: 0; z-index: 35; display: block; width: 100%; background: #fff; }
            .side .store-head-main { display: grid; grid-template-columns: minmax(0, 1fr) 48px 92px; grid-template-rows: auto auto; align-items: center; gap: 9px; padding: 12px 16px; max-height: none; width: 100%; overflow: visible; transition: none; }
            .store-head-main .brand { grid-column: 1; grid-row: 1; grid-template-columns: 38px minmax(0, 1fr); column-gap: 9px; min-width: 0; }
            .brand .brand-logo { width: 38px; height: 38px; border-radius: 8px; }
            .brand .brand-home span { font-size: 17px; }
            .brand .brand-parts { margin: 0; font-size: 12px; }
            .store-head-main .store-search { grid-column: 1 / 3; grid-row: 2; order: 0; width: 100%; height: 44px; grid-template-columns: minmax(0, 1fr) 44px; }
            .store-head-main .store-search input { min-width: 0; font-size: 16px; padding: 0 12px; }
            .store-head-main .store-primary-links { display: none; }
            .store-head-main .store-upload-button { grid-column: 3; grid-row: 2; order: 0; width: 100%; min-width: 0; height: 44px; min-height: 44px; padding: 0 8px; border-radius: 9px; font-size: 13px; box-shadow: none; color: #e60012; border-color: #fecdd3; background: #fff5f5; }
            .store-upload-button .kwc-icon { display: none; }
            .store-head-main .store-cart-button { grid-column: 2; grid-row: 1; order: 0; display: flex; align-items: center; justify-content: center; width: 48px; min-width: 0; height: 42px; min-height: 42px; padding: 0; border: 0; background: #fff; }
            .store-head-main .store-account-wrap { grid-column: 3; grid-row: 1; order: 0; width: 100%; }
            .store-head-main .store-account-button { width: 100%; min-width: 0; min-height: 42px; height: 42px; padding: 0 8px; justify-content: center; font-size: 12px; gap: 5px; background: #fff; }
            .store-account-button .account-caret { display: none; }
            .side .nav { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-start; width: 100%; gap: 4px; overflow-x: auto; scrollbar-width: none; padding: 5px 12px; border-top: 1px solid #edf2f7; background: #fff; }
            .side .nav::-webkit-scrollbar { display: none; }
            .side .nav button, .side .nav a { flex: 0 0 auto; width: auto; min-width: 0; height: 38px; min-height: 38px; padding: 8px 11px; font-size: 13px; white-space: nowrap; border-radius: 8px; }
            .side .nav button:after, .side .nav a:after { display: none; }
            .side .nav button.active, .side .nav a.active { color: #e60012; background: #fff1f2; }
            .side .store-rainbow { height: 3px; }
            body.mobile-header-condensed .side .store-head-main,
            body.mobile-header-condensed .side .test-notice,
            body.mobile-header-condensed .side .store-rainbow { display: none; }
            body.mobile-header-condensed .side .nav { padding-top: 5px; padding-bottom: 5px; }
            .content { padding: 18px 16px 32px; }
            .catalog-layout { grid-template-columns: minmax(0, 1fr); gap: 12px; }
            .filter-panel { position: static; top: auto; padding: 12px 16px; }
            .filter-panel .panel-head { margin-bottom: 12px; }
            .filter-panel.is-mobile-collapsed .panel-head { margin: 0; }
            .filter-panel .panel-head h3 { font-size: 16px; }
            .filter-head-actions .btn { min-height: 38px; padding: 7px 12px; }
            .filter-toggle { display: inline-flex; }
            .filter-panel.is-mobile-collapsed .filters { display: none; }
            .mobile-filter-summary { display: none !important; }
            .catalog-main { padding: 16px; }
            .catalog-toolbar { flex-direction: row; justify-content: space-between; align-items: center; text-align: left; gap: 12px; padding-bottom: 14px; margin-bottom: 14px; }
            .catalog-toolbar > div:first-child { flex: 1; width: auto; }
            .catalog-toolbar h3 { font-size: 24px; }
            .catalog-toolbar-actions { display: flex; justify-content: flex-end; gap: 8px; width: auto; }
            .catalog-toolbar-actions > #sort { width: 130px; height: 42px; }
            .catalog-rail { grid-column: 1; }
            .shopping-guide .seo-static-products { display: block; }
        }
        /* iOS Safari zooms the page when a focused field is under 16px. */
        @media (max-width: 1024px) {
            input:not([type]),
            input[type="text"],
            input[type="search"],
            input[type="tel"],
            input[type="email"],
            input[type="password"],
            input[type="number"],
            select,
            textarea { font-size: 16px !important; }
        }
        @media (max-width: 640px) {
            .test-notice { min-height: 28px; height: 28px; }
            .side .store-head-main { grid-template-columns: minmax(0, 1fr) 42px 76px; gap: 8px; padding: 10px 12px; }
            .store-head-main .store-cart-button { width: 42px; }
            .store-head-main .store-account-button .kwc-icon { display: none; }
            .brand .brand-home span { font-size: 16px; }
            .brand .brand-home-arrow { display: none; }
            .store-intro { align-items: flex-start; margin-bottom: 14px; gap: 8px; }
            .store-intro h2 { font-size: 17px; line-height: 1.5; letter-spacing: 0; }
            .store-intro p { font-size: 12px; line-height: 1.6; }
            .store-intro > a { display: none; }
            .content { padding: 14px 12px 28px; }
            .filter-panel { padding: 9px 12px; }
            .filter-head-actions .btn { min-height: 36px; }
            .catalog-main { padding: 12px; }
            .catalog-toolbar { flex-direction: column; align-items: stretch; gap: 10px; }
            .catalog-toolbar > div:first-child { width: 100%; }
            .catalog-toolbar h3 { font-size: 22px; }
            .catalog-toolbar-actions { width: 100%; justify-content: space-between; }
            .catalog-toolbar-actions > #sort { flex: 1; width: auto; }
            .catalog-display-options > summary { padding: 10px 14px; }
            .products.products-compact.products-image-small,
            .products.products-detail.products-image-small,
            .products.products-compact.products-image-large,
            .products.products-detail.products-image-large { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
            .products.products-compact.products-image-small .product { padding: 10px; min-height: 0; }
            .products.products-compact.products-image-small .part-image { height: 100px; }
            .products.products-compact.products-image-large .part-image { height: 138px; }
            .products.products-compact.products-image-small .product h4 { font-size: 13px; line-height: 1.45; }
            .products.products-compact .product-part-no-compact { font-size: 13px; margin: 7px 0; }
            .products.products-compact .price b { font-size: 17px; }
            .products.products-compact.products-image-small .product-actions { display: grid; min-height: 38px; }
            .products.products-compact.products-image-small .product-actions .btn { display: flex; min-height: 38px; }
            .shopping-guide > summary { padding: 16px; font-size: 14px; }
            .shopping-guide-body { padding: 0 16px 18px; }
        }
    
/* ---- Compact card colour line + phone catalogue density (2026-10-12) ---- */
        .products.products-compact .product-part-no-compact {
            display: flex;
            align-items: center;
            gap: 5px;
            min-width: 0;
        }

        .products.products-compact .product-part-no-compact .swatch {
            flex: 0 0 12px;
            width: 12px;
            height: 12px;
            vertical-align: 0;
        }

        .products.products-compact .product-color-compact {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            color: #334155;
            font-weight: 800;
        }

        /* "其他颜色低至 ¥x" is the only hint left when a colour has no price; keep it visible in compact cards. */
        .products.products-compact .price .price-other-colors {
            display: inline;
        }

        .mobile-cart-fab {
            display: none;
        }

        @media (max-width: 640px) {
            /* First screen: products started ~490px down on a 375x812 phone. */
            .store-intro { display: none; }
            .content { padding-top: 10px; }
            .filter-panel { padding: 6px 12px; }
            .filter-panel .panel-head h3 { font-size: 15px; }
            .filter-head-actions .btn { min-height: 34px; padding: 5px 10px; }
            .catalog-layout { gap: 8px; }
            .catalog-main { padding: 0; border: 0; background: transparent; box-shadow: none; }
            .catalog-toolbar { padding: 2px 2px 10px; margin-bottom: 10px; gap: 8px; }
            .catalog-toolbar h3 { font-size: 18px; }
            #catalogSummary { margin-top: 2px !important; font-size: 12px !important; }
            .catalog-toolbar-actions > #sort { height: 38px; }

            .mobile-cart-fab.is-visible {
                position: fixed;
                right: 16px;
                bottom: calc(18px + env(safe-area-inset-bottom, 0px));
                z-index: 30;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 54px;
                height: 54px;
                border: 0;
                border-radius: 50%;
                background: #e60012;
                color: #fff;
                box-shadow: 0 8px 22px rgba(230, 0, 18, .32);
            }

            .mobile-cart-fab .kwc-icon { width: 24px; height: 24px; }

            .mobile-cart-fab b {
                position: absolute;
                top: -2px;
                right: -2px;
                min-width: 20px;
                height: 20px;
                padding: 0 5px;
                border-radius: 999px;
                background: #fff;
                color: #e60012;
                font-size: 12px;
                line-height: 20px;
                text-align: center;
                box-shadow: 0 0 0 2px #e60012;
            }

            .mobile-cart-fab b.hidden { display: none; }
            body.detail-scroll-locked .mobile-cart-fab { display: none; }
        }