@once
    <style>
        .install-wizard-header {
            background: #fff;
            border-bottom: 1px solid var(--s200, #e2e8f0);
            padding: .875rem 1.5rem;
            position: sticky;
            top: 0;
            z-index: 20;
            box-shadow: 0 1px 4px rgba(0, 0, 0, .07), 0 2px 8px -2px rgba(37, 99, 235, .06);
        }
        .install-wizard-header::after {
            content: '';
            position: absolute;
            bottom: 0; left: 0; right: 0;
            height: 2px;
            background: linear-gradient(90deg, #2563eb 0%, #6366f1 50%, #2563eb 100%);
            opacity: .35;
        }
        .install-wizard-header .iw-inner {
            display: flex;
            align-items: center;
            gap: .75rem;
            max-width: 100%;
        }
        .install-wizard-header .iw-actions {
            margin-left: auto;
            flex-shrink: 0;
        }
        .install-wizard-header .iw-feedback-link {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: .35rem;
            font-size: .8125rem;
            font-weight: 600;
            color: #2563eb;
            text-decoration: none;
            white-space: nowrap;
            padding: .35rem .65rem;
            border-radius: .5rem;
            border: 1px solid rgba(37, 99, 235, .22);
            background: rgba(239, 246, 255, .85);
            flex-shrink: 0;
            max-width: 100%;
        }
        .install-wizard-header .iw-feedback-link:hover {
            background: #eff6ff;
            text-decoration: underline;
        }
        .install-wizard-header .iw-feedback-icon {
            width: 1rem;
            height: 1rem;
            flex-shrink: 0;
        }
        @media (max-width: 639px) {
            .install-wizard-header {
                padding: .75rem 1rem;
            }
            .install-wizard-header .iw-inner {
                flex-wrap: wrap;
                row-gap: .5rem;
            }
            .install-wizard-header .iw-body {
                flex: 1 1 auto;
                min-width: 0;
            }
            .install-wizard-header .iw-brandline {
                flex-wrap: wrap;
                row-gap: .25rem;
            }
            .install-wizard-header .iw-ver {
                display: none;
            }
            .install-wizard-header .iw-actions {
                margin-left: 0;
                width: 100%;
                display: flex;
                justify-content: flex-end;
            }
            .install-wizard-header .iw-feedback-link {
                padding-inline: 0.5rem;
            }
        }
        .install-wizard-header .iw-mark {
            width: 38px;
            height: 38px;
            background: linear-gradient(135deg, #2563eb, #4f46e5);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            box-shadow: 0 2px 8px rgba(29, 78, 216, 0.32), 0 1px 2px rgba(29, 78, 216, 0.2);
        }
        .install-wizard-header .iw-mark .install-brand-cube-ph {
            width: 19px;
            height: 19px;
            color: #fff;
            display: block;
        }
        /* 竖分割线 */
        .install-wizard-header .iw-divider {
            width: 1px;
            height: 28px;
            background: linear-gradient(to bottom, transparent, var(--s200, #e2e8f0), transparent);
            flex-shrink: 0;
        }
        .install-wizard-header .iw-body {
            flex: 1;
            min-width: 0;
        }
        .install-wizard-header .iw-brandline {
            display: flex;
            align-items: center;
            gap: .5rem;
            line-height: 1;
        }
        .install-wizard-header .iw-name {
            font-size: 1.1875rem;
            font-weight: 800;
            color: var(--s900, #0f172a);
            letter-spacing: -.035em;
            line-height: 1;
        }
        /* "安装向导" 小胶囊徽章 */
        .install-wizard-header .iw-badge {
            display: inline-flex;
            align-items: center;
            font-size: .75rem;
            font-weight: 600;
            color: #3b46cf;
            background: rgba(99, 102, 241, .1);
            border: 1px solid rgba(99, 102, 241, .22);
            border-radius: 100px;
            padding: .2rem .6rem;
            letter-spacing: .02em;
            white-space: nowrap;
            line-height: 1.5;
        }
        /* 版本号等宽小标签 */
        .install-wizard-header .iw-ver {
            font-family: ui-monospace, "Cascadia Code", "Fira Code", Menlo, monospace;
            font-size: .6875rem;
            font-weight: 500;
            color: var(--s400, #94a3b8);
            letter-spacing: .025em;
            white-space: nowrap;
            line-height: 1;
        }
    </style>
@endonce
<header class="install-wizard-header">
    <div class="iw-inner">
        <div class="iw-mark" aria-hidden="true">
            @include('partials.dberp-brand-cube-mark', ['class' => 'install-brand-cube-ph'])
        </div>
        <div class="iw-divider" aria-hidden="true"></div>
        <div class="iw-body">
            <div class="iw-brandline">
                <span class="iw-name">DBErp</span>
                <span class="iw-badge">安装向导</span>
                <span class="iw-ver">v{{ $dberpProductVersion->displayVersion() }}</span>
            </div>
        </div>
        <div class="iw-actions">
            <a
                class="iw-feedback-link"
                href="{{ app(\App\Support\DberpOfficialFeedback::class)->url() }}"
                target="_blank"
                rel="noopener noreferrer"
                title="{{ __('dberp.feedback.admin.title') }}"
                aria-label="{{ __('dberp.feedback.install.header_link') }}"
            >
                <svg class="iw-feedback-icon" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                    <path fill-rule="evenodd" d="M10 2c-2.236 0-4.332.737-6.001 1.978A8.96 8.96 0 0 0 2 10c0 1.933.52 3.747 1.43 5.307L2.22 17.78a.75.75 0 0 0 .53 1.28l2.472-.473A8.96 8.96 0 0 0 10 18c4.97 0 9-4.03 9-9s-4.03-9-9-9Zm-1.25 4.5a.75.75 0 0 1 1.5 0v3.25a.75.75 0 0 1-1.5 0V6.5Zm.75 6.25a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" clip-rule="evenodd"/>
                </svg>
                <span class="iw-feedback-label">{{ __('dberp.feedback.install.header_link') }}</span>
            </a>
        </div>
    </div>
</header>
