/* materials.css —— 由模板内联样式外置，15 语种共用 */

        /* ===== Materials Page Specific Styles ===== */

        /* -- Category Navigation Tabs (sticky quick nav) -- */

        .cat-nav {

            display: flex;

            gap: 12px;

            flex-wrap: wrap;

            justify-content: center;

            margin-bottom: 0;

            position: sticky;

            top: var(--header-height);

            z-index: 90;

            background: var(--color-white);

            padding: 16px 0;

            border-bottom: 1px solid var(--color-gray-200);

            box-shadow: 0 2px 8px rgba(0,0,0,0.04);

        }

        .cat-nav a {

            display: inline-flex;

            align-items: center;

            gap: 8px;

            padding: 10px 24px;

            border-radius: var(--radius-full);

            font-size: var(--font-size-sm);

            font-weight: 600;

            color: var(--color-gray-600);

            background: var(--color-gray-100);

            border: 1px solid var(--color-gray-200);

            transition: all 0.2s ease;

            text-decoration: none;

            cursor: pointer;

        }

        .cat-nav a:hover,

        .cat-nav a.active {

            background: var(--color-primary);

            color: var(--color-white);

            border-color: var(--color-primary);

        }

        .cat-nav a svg {

            width: 18px;

            height: 18px;

        }

        /* ===== Material Selector Tools (4 process cards) ===== */

        .selector-grid {

            display: grid;

            grid-template-columns: repeat(4, 1fr);

            gap: 24px;

        }

        .selector-card {

            background: var(--color-white);

            border: 1px solid var(--color-gray-200);

            border-radius: var(--radius-lg);

            padding: 32px 28px;

            text-align: center;

            transition: all 0.3s ease;

            position: relative;

            overflow: hidden;

            display: flex;

            flex-direction: column;

        }

        .selector-card::before {

            content: "";

            position: absolute;

            top: 0;

            left: 0;

            right: 0;

            height: 4px;

            background: var(--color-primary);

            transform: scaleX(0);

            transform-origin: left;

            transition: transform 0.3s ease;

        }

        .selector-card:hover {

            transform: translateY(-6px);

            box-shadow: var(--shadow-xl);

            border-color: var(--color-primary-light);

        }

        .selector-card:hover::before {

            transform: scaleX(1);

        }

        .selector-card .selector-icon {

            width: 64px;

            height: 64px;

            margin: 0 auto 20px;

            border-radius: var(--radius-lg);

            background: linear-gradient(135deg, rgba(37,99,235,0.1) 0%, rgba(37,99,235,0.04) 100%);

            display: flex;

            align-items: center;

            justify-content: center;

            transition: all 0.3s ease;

        }

        .selector-card:hover .selector-icon {

            background: linear-gradient(135deg, rgba(37,99,235,0.18) 0%, rgba(37,99,235,0.08) 100%);

            transform: scale(1.08);

        }

        .selector-card .selector-icon svg {

            width: 32px;

            height: 32px;

            color: var(--color-primary);

        }

        .selector-card h3 {

            font-size: var(--font-size-lg);

            font-weight: 700;

            color: var(--color-gray-900);

            margin-bottom: 8px;

        }

        .selector-card p {

            font-size: var(--font-size-sm);

            color: var(--color-gray-500);

            line-height: var(--line-height-relaxed);

            margin-bottom: 20px;

            flex: 1;

        }

        .selector-card .selector-count {

            display: inline-flex;

            align-items: center;

            gap: 6px;

            padding: 6px 16px;

            border-radius: var(--radius-full);

            font-size: var(--font-size-xs);

            font-weight: 600;

            color: var(--color-primary);

            background: #EEF2FF;

            margin-bottom: 16px;

        }

        .selector-card .selector-link {

            display: inline-flex;

            align-items: center;

            gap: 6px;

            font-size: var(--font-size-sm);

            font-weight: 600;

            color: var(--color-primary);

            text-decoration: none;

            transition: gap 0.2s ease;

        }

        .selector-card .selector-link:hover {

            gap: 10px;

        }

        /* ===== Material Options by Service (Tabbed Table) ===== */

        .mat-options-tabs {

            display: flex;

            gap: 8px;

            flex-wrap: wrap;

            justify-content: center;

            margin-bottom: 40px;

        }

        .mat-options-tab {

            display: inline-flex;

            align-items: center;

            gap: 8px;

            padding: 14px 28px;

            background: var(--color-gray-100);

            color: var(--color-gray-600);

            font-weight: 600;

            font-size: var(--font-size-sm);

            border-radius: var(--radius-full);

            border: 2px solid transparent;

            cursor: pointer;

            transition: all 0.2s ease;

            text-transform: uppercase;

            letter-spacing: 0.5px;

        }

        .mat-options-tab:hover {

            background: var(--color-gray-200);

        }

        .mat-options-tab.active {

            background: var(--color-primary);

            color: var(--color-white);

            border-color: var(--color-primary);

            box-shadow: var(--shadow-md);

        }

        .mat-options-tab svg {

            width: 18px;

            height: 18px;

        }

        .mat-options-panel {

            display: none;

            animation: fadeInUp 0.4s ease;

        }

        .mat-options-panel.active {

            display: block;

        }

        @keyframes fadeInUp {

            from { opacity: 0; transform: translateY(12px); }

            to { opacity: 1; transform: translateY(0); }

        }

        /* -- Process Capability Badges -- */

        .process-capability {

            display: flex;

            gap: 16px;

            flex-wrap: wrap;

            margin-bottom: 28px;

            padding: 24px 28px;

            background: var(--color-gray-50);

            border-radius: var(--radius-lg);

            border: 1px solid var(--color-gray-200);

        }

        .cap-item {

            flex: 1;

            min-width: 160px;

        }

        .cap-label {

            display: block;

            font-size: 11px;

            text-transform: uppercase;

            letter-spacing: 0.5px;

            color: var(--color-gray-400);

            font-weight: 600;

            margin-bottom: 4px;

        }

        .cap-value {

            display: block;

            font-size: var(--font-size-base);

            font-weight: 700;

            color: var(--color-gray-900);

        }

        .cap-desc {

            flex: 2;

            min-width: 280px;

            font-size: var(--font-size-sm);

            color: var(--color-gray-600);

            line-height: var(--line-height-relaxed);

        }

        /* -- Material Options Table -- */

        .mat-table-wrap {

            overflow-x: auto;

            border-radius: var(--radius-lg);

            border: 1px solid var(--color-gray-200);

        }

        .mat-options-table {

            width: 100%;

            border-collapse: collapse;

            font-size: var(--font-size-sm);

            min-width: 600px;

        }

        .mat-options-table thead {

            background: var(--color-gray-900);

            color: var(--color-white);

        }

        .mat-options-table thead th {

            padding: 16px 20px;

            text-align: left;

            font-weight: 600;

            font-size: var(--font-size-xs);

            text-transform: uppercase;

            letter-spacing: 0.5px;

            white-space: nowrap;

        }

        .mat-options-table tbody tr:nth-child(even) {

            background: var(--color-gray-50);

        }

        .mat-options-table tbody tr:hover {

            background: #EEF2FF;

        }

        .mat-options-table tbody td {

            padding: 16px 20px;

            border-bottom: 1px solid var(--color-gray-100);

            color: var(--color-gray-700);

            vertical-align: middle;

        }

        .mat-options-table tbody td:first-child {

            font-weight: 600;

            color: var(--color-gray-900);

        }

        .mat-options-table tbody td a {

            color: var(--color-primary);

            font-weight: 600;

            text-decoration: none;

            transition: color 0.2s ease;

        }

        .mat-options-table tbody td a:hover {

            color: var(--color-primary-dark);

        }

        .mat-type-badge {

            display: inline-flex;

            align-items: center;

            padding: 4px 12px;

            border-radius: var(--radius-full);

            font-size: 11px;

            font-weight: 600;

            text-transform: uppercase;

            letter-spacing: 0.5px;

        }

        .mat-type-badge.metal {

            background: #EEF2FF;

            color: #4338CA;

        }

        .mat-type-badge.plastic {

            background: #ECFDF5;

            color: #065F46;

        }

        .mat-view-link {

            display: inline-flex;

            align-items: center;

            gap: 4px;

            font-size: var(--font-size-sm);

            font-weight: 600;

            color: var(--color-primary);

            text-decoration: none;

            transition: gap 0.2s ease;

            white-space: nowrap;

        }

        .mat-view-link:hover {

            gap: 8px;

        }

        /* ===== Material Guides Grid (dynamic from DB) ===== */

        .mat-guide-grid {

            display: grid;

            grid-template-columns: repeat(5, 1fr);

            gap: 24px;

        }

        .mat-guide-card {

            background: var(--color-white);

            border: 1px solid var(--color-gray-200);

            border-radius: var(--radius-lg);

            overflow: hidden;

            transition: all 0.3s ease;

            text-decoration: none;

            display: flex;

            flex-direction: column;

        }

        .mat-guide-card:hover {

            transform: translateY(-4px);

            box-shadow: var(--shadow-xl);

            border-color: var(--color-primary-light);

        }

        .mat-guide-img {

            width: 100%;

            aspect-ratio: 4/3;

            background: linear-gradient(135deg, #f0f4ff 0%, #e0e7ff 100%);

            overflow: hidden;

            position: relative;

            display: flex;

            align-items: center;

            justify-content: center;

        }

        .mat-guide-img img {

            width: 100%;

            height: 100%;

            object-fit: cover;

            transition: transform 0.4s ease;

        }

        .mat-guide-card:hover .mat-guide-img img {

            transform: scale(1.06);

        }

        .mat-guide-img-fallback {

            display: flex;

            align-items: center;

            justify-content: center;

            width: 100%;

            height: 100%;

        }

        .mat-guide-img-fallback svg {

            width: 48px;

            height: 48px;

            color: var(--color-primary);

            opacity: 0.5;

        }

        .mat-guide-body {

            padding: 20px 20px 24px;

            flex: 1;

            display: flex;

            flex-direction: column;

        }

        .mat-guide-body h4 {

            font-size: var(--font-size-base);

            font-weight: 700;

            color: var(--color-gray-900);

            margin-bottom: 6px;

        }

        .mat-guide-body p {

            font-size: var(--font-size-xs);

            color: var(--color-gray-500);

            line-height: var(--line-height-normal);

            margin-bottom: 14px;

            flex: 1;

        }

        .mat-guide-link {

            display: inline-flex;

            align-items: center;

            gap: 4px;

            font-size: var(--font-size-xs);

            font-weight: 600;

            color: var(--color-primary);

            transition: gap 0.2s ease;

        }

        .mat-guide-card:hover .mat-guide-link {

            gap: 8px;

        }

        /* ===== Find the Right Material (by property) ===== */

        .find-mat-grid {

            display: grid;

            grid-template-columns: repeat(4, 1fr);

            gap: 24px;

        }

        .find-mat-card {

            background: var(--color-white);

            border-radius: var(--radius-lg);

            padding: 32px 28px;

            border: 1px solid var(--color-gray-200);

            transition: all 0.3s ease;

            position: relative;

            overflow: hidden;

        }

        .find-mat-card:hover {

            transform: translateY(-4px);

            box-shadow: var(--shadow-lg);

            border-color: var(--color-primary-light);

        }

        .find-mat-card .find-icon {

            width: 56px;

            height: 56px;

            border-radius: var(--radius-lg);

            display: flex;

            align-items: center;

            justify-content: center;

            margin-bottom: 20px;

        }

        .find-mat-card .find-icon svg {

            width: 28px;

            height: 28px;

        }

        .find-mat-card h4 {

            font-size: var(--font-size-lg);

            font-weight: 700;

            color: var(--color-gray-900);

            margin-bottom: 8px;

        }

        .find-mat-card p {

            font-size: var(--font-size-sm);

            color: var(--color-gray-500);

            line-height: var(--line-height-relaxed);

            margin-bottom: 16px;

        }

        .find-mat-recs {

            display: flex;

            flex-wrap: wrap;

            gap: 8px;

        }

        .find-mat-rec {

            display: inline-flex;

            align-items: center;

            padding: 6px 14px;

            border-radius: var(--radius-full);

            font-size: 11px;

            font-weight: 600;

            background: #EEF2FF;

            color: var(--color-primary);

            text-decoration: none;

            transition: all 0.2s ease;

        }

        .find-mat-rec:hover {

            background: var(--color-primary);

            color: var(--color-white);

        }

        /* ===== Custom Material CTA ===== */

        .custom-mat-cta {

            background: linear-gradient(135deg, #1E40AF 0%, #3B82F6 50%, #60A5FA 100%);

            border-radius: var(--radius-xl);

            padding: 56px 48px;

            text-align: center;

            color: var(--color-white);

            position: relative;

            overflow: hidden;

        }

        .custom-mat-cta::before {

            content: "";

            position: absolute;

            top: -50%;

            right: -20%;

            width: 400px;

            height: 400px;

            background: rgba(255,255,255,0.06);

            border-radius: 50%;

        }

        .custom-mat-cta::after {

            content: "";

            position: absolute;

            bottom: -40%;

            left: -10%;

            width: 300px;

            height: 300px;

            background: rgba(255,255,255,0.04);

            border-radius: 50%;

        }

        .custom-mat-cta h2 {

            color: var(--color-white);

            font-size: var(--font-size-3xl);

            margin-bottom: 12px;

            position: relative;

            z-index: 1;

        }

        .custom-mat-cta p {

            color: rgba(255,255,255,0.85);

            font-size: var(--font-size-lg);

            max-width: 600px;

            margin: 0 auto 28px;

            position: relative;

            z-index: 1;

        }

        .custom-mat-cta .cta-btns {

            display: flex;

            gap: 16px;

            justify-content: center;

            flex-wrap: wrap;

            position: relative;

            z-index: 1;

        }

        .btn-white {

            display: inline-flex;

            align-items: center;

            gap: 8px;

            padding: 14px 32px;

            background: var(--color-white);

            color: var(--color-primary);

            font-weight: 700;

            font-size: var(--font-size-sm);

            border-radius: var(--radius-md);

            border: none;

            cursor: pointer;

            transition: all 0.2s ease;

            text-transform: uppercase;

            letter-spacing: 0.5px;

            text-decoration: none;

        }

        .btn-white:hover {

            transform: translateY(-2px);

            box-shadow: 0 8px 24px rgba(0,0,0,0.15);

        }

        .btn-outline-white {

            display: inline-flex;

            align-items: center;

            gap: 8px;

            padding: 14px 32px;

            background: transparent;

            color: var(--color-white);

            font-weight: 600;

            font-size: var(--font-size-sm);

            border-radius: var(--radius-md);

            border: 2px solid rgba(255,255,255,0.5);

            cursor: pointer;

            transition: all 0.2s ease;

            text-transform: uppercase;

            letter-spacing: 0.5px;

            text-decoration: none;

        }

        .btn-outline-white:hover {

            background: rgba(255,255,255,0.1);

            border-color: var(--color-white);

        }

        /* ===== Responsive ===== */

        @media (max-width: 1200px) {

            .mat-guide-grid { grid-template-columns: repeat(4, 1fr); }

        }

        @media (max-width: 1024px) {

            .selector-grid { grid-template-columns: repeat(2, 1fr); }

            .find-mat-grid { grid-template-columns: repeat(2, 1fr); }

            .mat-guide-grid { grid-template-columns: repeat(3, 1fr); }

        }

        @media (max-width: 768px) {

            .cat-nav { gap: 8px; padding: 12px 0; }

            .cat-nav a { padding: 8px 16px; font-size: var(--font-size-xs); }

            .selector-grid { grid-template-columns: 1fr; }

            .find-mat-grid { grid-template-columns: 1fr; }

            .mat-guide-grid { grid-template-columns: repeat(2, 1fr); }

            .mat-options-tabs { gap: 6px; }

            .mat-options-tab { padding: 10px 18px; font-size: var(--font-size-xs); }

            .process-capability { flex-direction: column; gap: 12px; padding: 20px; }

            .cap-item, .cap-desc { min-width: 100%; }

            .custom-mat-cta { padding: 40px 24px; }

            .custom-mat-cta h2 { font-size: var(--font-size-2xl); }

        }

        @media (max-width: 480px) {

            .mat-guide-grid { grid-template-columns: 1fr; }

        }

/* ===== [STYLEATTR-FALLBACK-BEGIN] 由 _tools/_t_styleattr_responsive.js 生成，勿手改 =====
   原机制：protolabs-style.css 用 [style*="…"] 命中行内样式串做移动端降级；
   这些元素的内联样式外置后属性选择器不再命中，移动端会退回桌面尺寸。
   下面按类名重绘同样的降级，声明与 protolabs 逐字一致（含 !important）。 ===== */

@media (max-width: 1024px) {
    .selector-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .find-mat-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .mat-guide-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .cat-nav {
        position: static !important;
    }
}

@media (max-width: 768px) {
    .mat-guide-grid {
        grid-template-columns: 1fr !important;
    }
    .mat-guide-img {
        width: 100% !important;
        max-width: 100% !important;
    }
}

@media (max-width: 480px) {
    .selector-grid {
        grid-template-columns: 1fr !important;
    }
    .find-mat-grid {
        grid-template-columns: 1fr !important;
    }
    .mat-guide-grid {
        grid-template-columns: 1fr !important;
    }
    .process-capability {
        padding: 16px !important;
    }
    .custom-mat-cta h2 {
        font-size: var(--font-size-2xl) !important;
    }
    .selector-grid {
        gap: 16px !important;
    }
    .mat-guide-grid {
        gap: 16px !important;
    }
    .find-mat-grid {
        gap: 16px !important;
    }
}
.mat-guide-img {
    aspect-ratio: 16 / 9 !important;
    width: 460px !important;
    max-width: 100% !important;
    margin-left: auto;
    margin-right: auto;
}
/* ===== [STYLEATTR-FALLBACK-END] ===== */