/* 文件说明：首页与指南页共享的效果展示组件样式 */
            .effect-showcase {
                margin: 60px 0 40px;
                background: #fff;
                border: 1px solid #e1e8ff;
                border-radius: 18px;
                padding: 24px 20px 28px;
                position: relative;
            }

            .effect-header {
                position: relative;
                z-index: 1;
                text-align: center;
                margin-bottom: 18px;
            }

            .effect-header h3 {
                font-size: 28px;
                margin: 10px 0 6px;
                color: #111827;
                letter-spacing: -0.01em;
            }

            .effect-header p {
                margin: 0;
                color: #475569;
                font-size: 14px;
            }

            .effect-summary {
                margin: 0 auto 20px;
                padding: 16px;
                border-radius: 16px;
                border: 1px solid rgba(79, 70, 229, 0.16);
                background: linear-gradient(135deg, rgba(79, 70, 229, 0.08), rgba(236, 72, 153, 0.08));
            }

            .effect-summary-header {
                display: flex;
                flex-direction: column;
                gap: 4px;
                margin-bottom: 12px;
            }

            .effect-summary-header strong {
                font-size: 18px;
                color: #1e1b4b;
            }

            .effect-summary-header span,
            .effect-summary-date {
                font-size: 13px;
                color: #475569;
                line-height: 1.6;
            }

            .effect-summary-grid {
                display: grid;
                grid-template-columns: repeat(3, minmax(0, 1fr));
                gap: 10px;
            }

            .effect-summary-card {
                border-radius: 12px;
                border: 1px solid rgba(99, 102, 241, 0.2);
                background: rgba(255, 255, 255, 0.88);
                padding: 10px 12px;
                display: flex;
                flex-direction: column;
                gap: 4px;
            }

            .effect-summary-value {
                font-size: 18px;
                font-weight: 700;
                color: #312e81;
                line-height: 1.3;
            }

            .effect-summary-label {
                font-size: 12px;
                color: #475569;
            }

            .effect-summary-distribution-wrap {
                margin-top: 12px;
                overflow-x: auto;
            }

            .effect-summary-distribution {
                width: 100%;
                min-width: 440px;
                border-collapse: collapse;
                border: 1px solid rgba(99, 102, 241, 0.16);
                background: rgba(255, 255, 255, 0.88);
                border-radius: 12px;
                overflow: hidden;
            }

            .effect-summary-distribution th,
            .effect-summary-distribution td {
                border: 1px solid rgba(99, 102, 241, 0.16);
                padding: 8px 10px;
                font-size: 12px;
                text-align: left;
                color: #334155;
            }

            .effect-summary-distribution th {
                color: #1e1b4b;
                background: rgba(99, 102, 241, 0.1);
                font-weight: 700;
            }

            .effect-summary-note {
                margin: 10px 0 0;
                color: #475569;
                font-size: 12px;
                line-height: 1.6;
            }

            .effect-tabs {
                position: relative;
                z-index: 1;
                display: flex;
                justify-content: center;
                gap: 10px;
                margin: 0 auto 18px;
                flex-wrap: wrap;
            }

            .effect-tab {
                min-width: 112px;
                padding: 8px 18px;
                font-size: 14px;
                font-weight: 600;
                border-radius: 999px;
                border: 1px solid rgba(99, 102, 241, 0.3);
                background: rgba(255, 255, 255, 0.72);
                color: #4338ca;
                transition: all 0.2s ease;
                box-shadow: 0 4px 12px rgba(99, 102, 241, 0.12);
            }

            .effect-tab:hover {
                border-color: rgba(79, 70, 229, 0.45);
                color: #312e81;
            }

            .effect-tab.is-active {
                background: #4f46e5;
                color: #fff;
                border-color: #4338ca;
                box-shadow: 0 10px 22px rgba(79, 70, 229, 0.24);
            }

            .effect-carousel {
                position: relative;
                z-index: 1;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 18px;
            }

            .effect-arrow {
                width: 44px;
                height: 44px;
                border-radius: 999px;
                border: 1px solid rgba(99, 102, 241, 0.2);
                background: rgba(255, 255, 255, 0.92);
                color: #4338ca;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                font-size: 18px;
                cursor: pointer;
                transition: all 0.18s ease;
                box-shadow: 0 10px 22px rgba(79, 70, 229, 0.18);
            }

            .effect-arrow:hover {
                background: #4338ca;
                color: #fff;
            }

            .effect-arrow:focus-visible {
                outline: 3px solid rgba(79, 70, 229, 0.4);
                outline-offset: 2px;
            }

            .effect-slide {
                width: min(100%, 960px);
                min-height: 320px;
            }

            .effect-card {
                background: #fff;
                border-radius: 24px;
                box-shadow: 0 24px 48px rgba(15, 23, 42, 0.12);
                padding: 24px 26px 26px;
                display: flex;
                flex-direction: column;
                gap: 18px;
                border: 1px solid rgba(226, 232, 240, 0.65);
                animation: effect-card-in 0.45s cubic-bezier(0.33, 1, 0.68, 1);
            }

            .effect-card-badge {
                align-self: center;
                display: inline-flex;
                align-items: center;
                gap: 6px;
                padding: 5px 16px;
                font-size: 12px;
                font-weight: 600;
                color: #b42318;
                background: rgba(244, 63, 94, 0.12);
                border: 1px solid rgba(244, 63, 94, 0.35);
                border-radius: 999px;
                letter-spacing: 0.02em;
                margin-top: -2px;
            }

            .effect-card-badge i {
                font-size: 12px;
            }

            .effect-card-header {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 14px;
                flex-wrap: wrap;
            }

            .effect-card-title {
                display: flex;
                flex-direction: column;
                gap: 4px;
            }

            .effect-card-title strong {
                font-size: 18px;
                color: #111827;
            }

            .effect-card-title span {
                font-size: 13px;
                color: #6b7280;
            }

            .effect-card-metric {
                display: flex;
                flex-direction: column;
                align-items: flex-end;
                gap: 4px;
            }

            .effect-card-metric .metric-value {
                font-size: 32px;
                font-weight: 700;
                color: #16a34a;
                letter-spacing: -0.02em;
            }

            .effect-card-metric .metric-caption {
                font-size: 12px;
                color: #15803d;
                background: rgba(34, 197, 94, 0.16);
                padding: 4px 10px;
                border-radius: 999px;
            }

            .effect-screens {
                display: grid;
                gap: 18px;
                width: 100%;
            }

            .effect-screens--pair {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .effect-screens--single {
                display: flex;
                justify-content: center;
            }

            .effect-screens--single .effect-shot {
                max-width: 620px;
                width: 100%;
            }

            .effect-screens--gallery {
                grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            }

            .effect-shot {
                position: relative;
                border-radius: 18px;
                border: 1px solid rgba(226, 232, 240, 0.75);
                background: linear-gradient(160deg, #f9fbff 0%, #ffffff 100%);
                padding: 18px 18px 16px;
                display: flex;
                flex-direction: column;
                gap: 12px;
                box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 18px 36px rgba(148, 163, 184, 0.24);
                min-height: 260px;
                justify-content: space-between;
            }

            .effect-shot img {
                width: 100%;
                height: auto;
                max-height: 360px;
                object-fit: contain;
                border-radius: 12px;
                background: #fff;
                box-shadow: 0 12px 28px rgba(148, 163, 184, 0.22);
            }

            .effect-shot-tag {
                position: absolute;
                top: 12px;
                left: 24px;
                padding: 5px 14px;
                font-size: 11px;
                font-weight: 600;
                border-radius: 999px;
                border: 1px solid transparent;
                color: #1f2937;
                background: rgba(255, 255, 255, 0.95);
                box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
            }

            .effect-shot--before .effect-shot-tag {
                background: #fee2e2;
                border-color: #fca5a5;
                color: #b91c1c;
            }

            .effect-shot--after .effect-shot-tag {
                background: #dcfce7;
                border-color: #86efac;
                color: #166534;
            }

            .effect-shot--extra .effect-shot-tag {
                background: #e0e7ff;
                border-color: #c7d2fe;
                color: #3730a3;
            }

            .effect-shot figcaption {
                font-size: 13px;
                color: #475569;
                text-align: center;
                margin-top: 6px;
            }

            .effect-card--text-only .effect-screens {
                display: flex;
                justify-content: center;
                align-items: center;
                min-height: 160px;
                font-size: 14px;
                color: #475569;
                background: linear-gradient(145deg, #eef2ff 0%, #fff 100%);
                border-radius: 18px;
                border: 1px dashed rgba(148, 163, 184, 0.5);
            }

            .effect-card--empty {
                align-items: center;
                text-align: center;
            }

            .effect-screens--placeholder {
                display: flex;
                justify-content: center;
                align-items: center;
                min-height: 160px;
                font-size: 14px;
                color: #475569;
                background: linear-gradient(135deg, #f8fafc 0%, #fff 100%);
                border-radius: 18px;
                border: 1px dashed rgba(148, 163, 184, 0.5);
            }

            .effect-notes {
                list-style: none;
                margin: 0;
                padding: 0;
                display: grid;
                gap: 8px;
                font-size: 13px;
                color: #4b5563;
            }

            .effect-notes li {
                position: relative;
                padding-left: 16px;
            }

            .effect-notes li::before {
                content: '•';
                position: absolute;
                left: 0;
                color: #6366f1;
            }

            .effect-note {
                position: relative;
                z-index: 1;
                margin-top: 18px;
                padding: 10px 12px;
                border-radius: 12px;
                border: 1px dashed rgba(148, 163, 184, 0.6);
                background: rgba(226, 232, 240, 0.35);
                font-size: 12px;
                color: #475569;
                display: flex;
                gap: 6px;
                align-items: flex-start;
            }

            .effect-note i {
                margin-top: 2px;
                color: #6366f1;
            }

            @keyframes effect-card-in {
                from {
                    opacity: 0;
                    transform: translateY(18px) scale(0.98);
                }

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

            @media (max-width: 900px) {
                .effect-showcase {
                    padding: 22px 16px 24px;
                    margin: 52px 0 34px;
                }

                .effect-card {
                    padding: 20px 20px 22px;
                    gap: 16px;
                }

                .effect-card-badge {
                    margin-top: -2px;
                }

                .effect-screens {
                    gap: 14px;
                }

                .effect-shot {
                    min-height: 240px;
                    padding: 16px 16px 14px;
                }

                .effect-shot img {
                    max-height: 300px;
                }
            }

            @media (max-width: 720px) {
                .effect-showcase {
                    margin: 44px 0 28px;
                }

                .effect-header h3 {
                    font-size: 24px;
                }

                .effect-summary {
                    padding: 14px;
                }

                .effect-summary-grid {
                    grid-template-columns: repeat(2, minmax(0, 1fr));
                }

                .effect-tabs {
                    gap: 8px;
                }

                .effect-tab {
                    min-width: unset;
                    padding: 8px 16px;
                    font-size: 13px;
                }

                .effect-slide {
                    min-height: 0;
                }

                .effect-card {
                    gap: 14px;
                    padding: 18px 16px 20px;
                }

                .effect-card-badge {
                    font-size: 11px;
                    padding: 3px 12px;
                }

                .effect-card-metric .metric-value {
                    font-size: 26px;
                }

                .effect-screens {
                    grid-template-columns: 1fr;
                }

                .effect-shot {
                    min-height: auto;
                }

                .effect-shot img {
                    max-height: 280px;
                }

                .effect-arrow {
                    display: none;
                }

                .effect-note {
                    flex-direction: column;
                    align-items: flex-start;
                }
            }

            @media (max-width: 480px) {
                .effect-header h3 {
                    font-size: 21px;
                }

                .effect-header p {
                    font-size: 13px;
                }

                .effect-summary-grid {
                    grid-template-columns: 1fr;
                }

                .effect-tab {
                    font-size: 12px;
                    padding: 6px 14px;
                }

                .effect-card {
                    border-radius: 16px;
                    padding: 16px 14px 18px;
                }

                .effect-card-title strong {
                    font-size: 16px;
                }

                .effect-card-metric {
                    align-items: flex-start;
                }

                .effect-card-metric .metric-value {
                    font-size: 24px;
                }

                .effect-shot img {
                    max-height: 260px;
                }
            }