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

        /* ===== Grade Detail Page Styles ===== */

        .grade-hero {

            position: relative;

            padding: 80px 0 60px;

            background: linear-gradient(160deg, #0a2140 0%, #0f2f5c 40%, #164479 100%);

            color: #fff;

            overflow: hidden;

        }

        .grade-hero::before {

            content: '';

            position: absolute;

            top: -200px;

            right: -200px;

            width: 600px;

            height: 600px;

            border-radius: 50%;

            background: radial-gradient(circle, rgba(15,47,92,0.18) 0%, transparent 70%);

            pointer-events: none;

        }

        .grade-hero-content {

            position: relative;

            z-index: 2;

            display: grid;

            grid-template-columns: 1fr 1fr;

            gap: 60px;

            align-items: center;

        }

        .grade-hero h1 {

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

            font-weight: 900;

            line-height: 1.1;

            margin: 0 0 16px;

            letter-spacing: -0.02em;

        }

        .grade-hero .grade-tag-pill {

            display: inline-flex;

            align-items: center;

            gap: 8px;

            padding: 6px 16px;

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

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

            font-weight: 600;

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

            border: 1px solid rgba(255,255,255,0.18);

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

            margin-bottom: 18px;

        }

        .grade-hero .grade-subtitle {

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

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

            line-height: 1.6;

            margin: 0 0 28px;

            max-width: 600px;

        }

        .grade-hero-badges {

            display: flex;

            gap: 10px;

            flex-wrap: wrap;

            margin-bottom: 24px;

        }

        .grade-hero-badges .mat-badge {

            display: inline-flex;

            align-items: center;

            gap: 6px;

            padding: 6px 14px;

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

            font-size: 12px;

            font-weight: 600;

            background: rgba(96,165,250,0.18);

            color: #fff;

            border: 1px solid rgba(96,165,250,0.35);

        }

        .grade-hero-cta {

            display: flex;

            gap: 12px;

            flex-wrap: wrap;

        }

        .grade-hero-stat-card {

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

            border: 1px solid rgba(255,255,255,0.12);

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

            padding: 28px;

            backdrop-filter: blur(10px);

        }

        .grade-hero-stat-card h3 {

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

            font-weight: 700;

            margin: 0 0 18px;

            padding-bottom: 14px;

            border-bottom: 1px solid rgba(255,255,255,0.1);

        }

        .grade-hero-stats {

            display: grid;

            grid-template-columns: 1fr 1fr;

            gap: 14px;

        }

        .grade-stat-cell {

            padding: 12px 14px;

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

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

            border: 1px solid rgba(255,255,255,0.06);

        }

        .grade-stat-cell-label {

            font-size: 11px;

            text-transform: uppercase;

            letter-spacing: 0.5px;

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

            font-weight: 600;

            margin-bottom: 4px;

        }

        .grade-stat-cell-value {

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

            font-weight: 700;

            color: #fff;

        }

        /* ===== Body layout ===== */

        .grade-body {

            display: grid;

            grid-template-columns: 280px 1fr;

            gap: 48px;

            padding: 80px 0;

        }

        .grade-sidebar {

            position: sticky;

            top: calc(var(--header-height) + 20px);

            align-self: start;

        }

        .grade-sidebar-card {

            background: #fff;

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

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

            padding: 20px;

            margin-bottom: 20px;

        }

        .grade-sidebar-card h4 {

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

            font-weight: 700;

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

            text-transform: uppercase;

            letter-spacing: 1px;

            margin: 0 0 14px;

        }

        .grade-sidebar-card ul {

            list-style: none;

            padding: 0;

            margin: 0;

        }

        .grade-sidebar-card li {

            margin-bottom: 2px;

        }

        .grade-sidebar-card a {

            display: flex;

            align-items: center;

            gap: 8px;

            padding: 8px 12px;

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

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

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

            text-decoration: none;

            transition: all 0.15s;

        }

        .grade-sidebar-card a:hover {

            background: #f4f7fa;

            color: var(--color-primary);

        }

        .grade-sidebar-card a.active {

            background: var(--color-primary);

            color: #fff;

            font-weight: 600;

        }

        .grade-sidebar-card .badge-count {

            display: inline-flex;

            align-items: center;

            justify-content: center;

            min-width: 22px;

            height: 22px;

            padding: 0 7px;

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

            font-size: 11px;

            font-weight: 700;

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

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

            margin-left: auto;

        }

        .grade-sidebar-card a.active .badge-count {

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

            color: #fff;

        }

        /* ===== Content sections ===== */

        .grade-content section {

            margin-bottom: 56px;

        }

        .grade-section-title {

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

            font-weight: 800;

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

            margin: 0 0 12px;

            letter-spacing: -0.02em;

        }

        .grade-section-desc {

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

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

            line-height: 1.7;

            margin-bottom: 28px;

            max-width: 700px;

        }

        /* Applications grid */

        .grade-apps-grid {

            display: grid;

            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));

            gap: 14px;

        }

        .grade-app-item {

            display: flex;

            align-items: flex-start;

            gap: 12px;

            padding: 16px;

            background: #fff;

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

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

            transition: all 0.2s;

        }

        .grade-app-item:hover {

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

            transform: translateY(-2px);

            box-shadow: 0 8px 18px rgba(15,47,92,0.08);

        }

        .grade-app-item svg {

            flex-shrink: 0;

            width: 20px;

            height: 20px;

            color: var(--color-primary);

            margin-top: 2px;

        }

        .grade-app-item span {

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

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

            font-weight: 500;

            line-height: 1.5;

        }

        /* Advantages grid */

        .grade-advantages {

            display: grid;

            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));

            gap: 14px;

        }

        .grade-advantage {

            display: flex;

            align-items: flex-start;

            gap: 12px;

            padding: 18px 16px;

            background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);

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

            border-left: 3px solid var(--color-primary);

        }

        .grade-advantage svg {

            flex-shrink: 0;

            width: 18px;

            height: 18px;

            color: #0c2a52;

            margin-top: 3px;

        }

        .grade-advantage span {

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

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

            font-weight: 500;

            line-height: 1.5;

        }

        /* Processing steps */

        .grade-process-list {

            display: grid;

            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));

            gap: 14px;

        }

        .grade-process-item {

            background: #fff;

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

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

            padding: 18px;

        }

        .grade-process-item h5 {

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

            font-weight: 700;

            color: var(--color-primary);

            margin: 0 0 8px;

            display: flex;

            align-items: center;

            gap: 8px;

        }

        .grade-process-item h5 .num {

            display: inline-flex;

            align-items: center;

            justify-content: center;

            width: 24px;

            height: 24px;

            border-radius: 50%;

            background: var(--color-primary);

            color: #fff;

            font-size: 11px;

            font-weight: 700;

        }

        .grade-process-item p {

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

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

            line-height: 1.6;

            margin: 0;

        }

        /* Related grades */

        .grade-related-grid {

            display: grid;

            grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));

            gap: 16px;

        }

        .grade-related-card {

            display: block;

            background: #fff;

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

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

            padding: 18px 20px;

            text-decoration: none;

            color: inherit;

            transition: all 0.2s;

        }

        .grade-related-card:hover {

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

            transform: translateY(-2px);

            box-shadow: 0 8px 18px rgba(15,47,92,0.08);

        }

        .grade-related-card .tag {

            display: inline-flex;

            align-items: center;

            padding: 3px 10px;

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

            font-size: 11px;

            font-weight: 600;

            background: #f4f7fa;

            color: var(--color-primary);

            margin-bottom: 10px;

        }

        .grade-related-card h4 {

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

            font-weight: 700;

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

            margin: 0 0 8px;

        }

        .grade-related-card p {

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

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

            line-height: 1.5;

            margin: 0;

            display: -webkit-box;

            -webkit-line-clamp: 2;

            -webkit-box-orient: vertical;

            overflow: hidden;

        }

        .grade-related-card.active {

            background: #f4f7fa;

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

        }

        /* Quick facts table on hero card */

        .grade-facts-table {

            display: grid;

            gap: 8px;

        }

        .grade-facts-table .row {

            display: flex;

            justify-content: space-between;

            align-items: center;

            padding: 8px 12px;

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

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

        }

        .grade-facts-table .label {

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

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

            font-weight: 600;

        }

        .grade-facts-table .value {

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

            color: #fff;

            font-weight: 700;

        }

        /* CTA banner */

        .grade-cta {

            background: linear-gradient(135deg,#0a2140 0%,#0f2f5c 55%,#164479 100%);

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

            padding: 48px;

            text-align: center;

            color: #fff;

            position: relative;

            overflow: hidden;

            margin-top: 40px;

        }

        .grade-cta::before {

            content: '';

            position: absolute;

            top: -50%;

            right: -20%;

            width: 400px;

            height: 400px;

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

            border-radius: 50%;

        }

        .grade-cta h2 {

            color: #fff;

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

            margin: 0 0 12px;

            position: relative;

            z-index: 1;

        }

        .grade-cta p {

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

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

            max-width: 640px;

            margin: 0 auto 24px;

            position: relative;

            z-index: 1;

        }

        .grade-cta .cta-buttons {

            display: flex;

            gap: 16px;

            justify-content: center;

            flex-wrap: wrap;

            position: relative;

            z-index: 1;

        }

        /* Responsive */

        @media (max-width: 1024px) {

            .grade-hero-content { grid-template-columns: 1fr; gap: 32px; }

            .grade-body { grid-template-columns: 1fr; padding: 48px 0; gap: 32px; }

            .grade-sidebar { position: static; }

        }

        @media (max-width: 768px) {

            .grade-hero { padding: 56px 0 40px; }

            .grade-hero h1 { font-size: var(--font-size-3xl); }

            .grade-cta { padding: 36px 24px; }

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

        }

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

@media (max-width: 1024px) {
    .grade-sidebar {
        position: static !important;
    }
}

@media (max-width: 768px) {
    .grade-hero-content {
        grid-template-columns: 1fr !important;
    }
    .grade-hero-stats {
        grid-template-columns: 1fr !important;
    }
    .grade-facts-table .row {
        flex-direction: column !important;
        gap: 24px !important;
    }
    .grade-hero {
        padding: 48px 0 !important;
    }
    .grade-body {
        padding: 48px 0 !important;
    }
    .grade-cta {
        padding: 24px !important;
    }
    .grade-body {
        padding: 24px !important;
    }
    .grade-hero h1 {
        font-size: var(--font-size-3xl) !important;
    }
    .grade-body {
        gap: 24px !important;
    }
}

@media (max-width: 480px) {
    .grade-hero-content {
        grid-template-columns: 1fr !important;
    }
    .grade-hero-stats {
        grid-template-columns: 1fr !important;
    }
    .grade-hero-stat-card {
        padding: 16px !important;
    }
    .grade-section-title {
        font-size: var(--font-size-2xl) !important;
    }
    .grade-cta h2 {
        font-size: var(--font-size-2xl) !important;
    }
    .grade-hero h1 {
        font-size: var(--font-size-2xl) !important;
    }
    .grade-hero-content {
        gap: 16px !important;
    }
    .grade-body {
        gap: 16px !important;
    }
}
/* ===== [STYLEATTR-FALLBACK-END] ===== */