MainWindow.xaml

<Window x:Class="SystemMonitorApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:shell="clr-namespace:System.Windows.Shell;assembly=PresentationFramework"
        Title="SystemFlow Pro"
        Width="1400" Height="900" MinWidth="1100" MinHeight="750"
        Icon="app.ico"
        WindowStartupLocation="CenterScreen"
        Background="{DynamicResource BackgroundBrush}">

    <!-- WindowChrome preserves Aero Snap / Snap Layouts / maximize-double-click
         while allowing a custom title bar. CaptionHeight matches our header height. -->
    <shell:WindowChrome.WindowChrome>
        <shell:WindowChrome
            CaptionHeight="48"
            GlassFrameThickness="0"
            ResizeBorderThickness="6"
            UseAeroCaptionButtons="False"
            CornerRadius="0"/>
    </shell:WindowChrome.WindowChrome>

    <Window.Resources>
        <!-- Ultra Modern Color Palette (single source of truth) -->
        <SolidColorBrush x:Key="BackgroundBrush" Color="#0D0E13"/>
        <SolidColorBrush x:Key="CardBrush" Color="#191B23"/>
        <SolidColorBrush x:Key="AccentBrush" Color="#00E5C7"/>
        <SolidColorBrush x:Key="SecondaryBrush" Color="#7C3AED"/>
        <SolidColorBrush x:Key="WarnBrush" Color="#FFA726"/>
        <SolidColorBrush x:Key="ErrorBrush" Color="#FF5252"/>
        <SolidColorBrush x:Key="SuccessBrush" Color="#26C6DA"/>
        <SolidColorBrush x:Key="TextPrimaryBrush" Color="#FFFFFF"/>
        <SolidColorBrush x:Key="TextSecondaryBrush" Color="#F1F5F9"/>
        <SolidColorBrush x:Key="TextMutedBrush" Color="#A8B2C0"/>
        <SolidColorBrush x:Key="BorderBrush" Color="#2A2D36"/>
        <SolidColorBrush x:Key="HighlightBrush" Color="#252730"/>

        <!-- Accessible focus visual — visible outline on keyboard focus -->
        <Style x:Key="AccessibleFocusVisual">
            <Setter Property="Control.Template">
                <Setter.Value>
                    <ControlTemplate>
                        <Rectangle StrokeThickness="2"
                                   Stroke="{DynamicResource AccentBrush}"
                                   StrokeDashArray="1 2"
                                   Margin="-2"
                                   SnapsToDevicePixels="True"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <!-- Fluent icon base style (Segoe Fluent Icons with MDL2 Assets fallback for Win10) -->
        <Style x:Key="FluentIcon" TargetType="TextBlock">
            <Setter Property="FontFamily" Value="Segoe Fluent Icons, Segoe MDL2 Assets"/>
            <Setter Property="FontSize" Value="18"/>
            <Setter Property="HorizontalAlignment" Value="Center"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
        </Style>

        <!-- Chrome button style -->
        <Style x:Key="ChromeButton" TargetType="Button">
            <Setter Property="Width" Value="46"/>
            <Setter Property="Height" Value="32"/>
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="Foreground" Value="{DynamicResource TextMutedBrush}"/>
            <Setter Property="BorderThickness" Value="0"/>
            <Setter Property="FontFamily" Value="Segoe Fluent Icons, Segoe MDL2 Assets"/>
            <Setter Property="FontSize" Value="10"/>
            <Setter Property="Cursor" Value="Hand"/>
            <Setter Property="FocusVisualStyle" Value="{StaticResource AccessibleFocusVisual}"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Border x:Name="root" Background="{TemplateBinding Background}">
                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter TargetName="root" Property="Background" Value="#22FFFFFF"/>
                            </Trigger>
                            <Trigger Property="IsPressed" Value="True">
                                <Setter TargetName="root" Property="Background" Value="#44FFFFFF"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <!-- Close chrome button (red hover) -->
        <Style x:Key="CloseChromeButton" TargetType="Button" BasedOn="{StaticResource ChromeButton}">
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="{DynamicResource ErrorBrush}"/>
                    <Setter Property="Foreground" Value="White"/>
                </Trigger>
            </Style.Triggers>
        </Style>

        <!-- Modern Card Style -->
        <Style x:Key="ModernCard" TargetType="Border">
            <Setter Property="Background" Value="{StaticResource CardBrush}"/>
            <Setter Property="BorderBrush" Value="{StaticResource BorderBrush}"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="CornerRadius" Value="16"/>
            <Setter Property="Effect">
                <Setter.Value>
                    <DropShadowEffect Color="#000000" BlurRadius="24" ShadowDepth="8" Opacity="0.25"/>
                </Setter.Value>
            </Setter>
        </Style>

        <!-- Hero Card Style -->
        <Style x:Key="HeroCard" TargetType="Border">
            <Setter Property="Background">
                <Setter.Value>
                    <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                        <GradientStop Color="#191B23" Offset="0"/>
                        <GradientStop Color="#1E212A" Offset="1"/>
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
            <Setter Property="BorderBrush">
                <Setter.Value>
                    <LinearGradientBrush StartPoint="0,0" EndPoint="1,1" Opacity="0.6">
                        <GradientStop Color="#00E5C7" Offset="0"/>
                        <GradientStop Color="#7C3AED" Offset="1"/>
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
            <Setter Property="BorderThickness" Value="2"/>
            <Setter Property="CornerRadius" Value="20"/>
            <Setter Property="Effect">
                <Setter.Value>
                    <DropShadowEffect Color="#00E5C7" BlurRadius="20" ShadowDepth="0" Opacity="0.15"/>
                </Setter.Value>
            </Setter>
        </Style>

        <Style x:Key="HeroValue" TargetType="TextBlock">
            <Setter Property="FontFamily" Value="Segoe UI Variable Display"/>
            <Setter Property="FontSize" Value="42"/>
            <Setter Property="FontWeight" Value="SemiBold"/>
            <Setter Property="HorizontalAlignment" Value="Center"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
        </Style>

        <Style x:Key="HeroLabel" TargetType="TextBlock">
            <Setter Property="FontFamily" Value="Segoe UI Variable"/>
            <Setter Property="FontSize" Value="14"/>
            <Setter Property="FontWeight" Value="Medium"/>
            <Setter Property="Foreground" Value="{StaticResource TextSecondaryBrush}"/>
            <Setter Property="HorizontalAlignment" Value="Center"/>
            <Setter Property="Margin" Value="0,8,0,0"/>
        </Style>

        <Style x:Key="SectionHeader" TargetType="TextBlock">
            <Setter Property="FontFamily" Value="Segoe UI Variable Display"/>
            <Setter Property="FontSize" Value="16"/>
            <Setter Property="FontWeight" Value="SemiBold"/>
            <Setter Property="Foreground" Value="{StaticResource TextPrimaryBrush}"/>
            <Setter Property="Margin" Value="0,0,0,12"/>
        </Style>

        <Style x:Key="DataText" TargetType="TextBlock">
            <Setter Property="FontFamily" Value="Consolas"/>
            <Setter Property="FontSize" Value="13"/>
            <Setter Property="FontWeight" Value="Medium"/>
            <Setter Property="Foreground" Value="{StaticResource TextSecondaryBrush}"/>
            <Setter Property="Margin" Value="0,2"/>
            <Setter Property="TextTrimming" Value="CharacterEllipsis"/>
            <Setter Property="TextWrapping" Value="NoWrap"/>
        </Style>

        <!-- Pulsing Animation -->
        <Storyboard x:Key="PulseAnimation" RepeatBehavior="Forever">
            <DoubleAnimation Storyboard.TargetProperty="Opacity" From="0.7" To="1.0" Duration="0:0:2" AutoReverse="True"/>
        </Storyboard>
    </Window.Resources>

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!-- Title bar / header -->
        <Border Grid.Row="0"
                Background="#0A0B0F"
                Height="48"
                BorderBrush="{StaticResource BorderBrush}"
                BorderThickness="0,0,0,1">
            <Grid Margin="24,0,0,0">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>

                <!-- Brand -->
                <StackPanel Grid.Column="0" Orientation="Horizontal" VerticalAlignment="Center">
                    <Border Width="24" Height="24" Margin="0,0,10,0"
                            Background="{StaticResource AccentBrush}" CornerRadius="6">
                        <TextBlock Text="S" FontFamily="Segoe UI Variable Display"
                                   FontSize="14" FontWeight="Bold"
                                   Foreground="White"
                                   HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    </Border>
                    <TextBlock Text="SystemFlow" FontFamily="Segoe UI Variable Display"
                               FontSize="18" FontWeight="Bold"
                               Foreground="{StaticResource TextPrimaryBrush}"
                               VerticalAlignment="Center"/>
                    <TextBlock Text="PRO" FontFamily="Segoe UI Variable"
                               FontSize="10" FontWeight="Bold"
                               Foreground="{StaticResource AccentBrush}"
                               VerticalAlignment="Center" Margin="6,0,0,0"/>
                    <TextBlock Text="v1.1.0" FontFamily="Segoe UI Variable"
                               FontSize="11" FontWeight="Medium"
                               Foreground="{StaticResource TextMutedBrush}"
                               VerticalAlignment="Center" Margin="8,0,0,0"/>
                </StackPanel>

                <!-- Live Status -->
                <StackPanel Grid.Column="2" Orientation="Horizontal"
                            VerticalAlignment="Center" Margin="0,0,16,0">
                    <Ellipse Width="8" Height="8" Fill="{StaticResource AccentBrush}" x:Name="LiveIndicator">
                        <Ellipse.Triggers>
                            <EventTrigger RoutedEvent="Ellipse.Loaded">
                                <BeginStoryboard Storyboard="{StaticResource PulseAnimation}"/>
                            </EventTrigger>
                        </Ellipse.Triggers>
                    </Ellipse>
                    <TextBlock Text="LIVE" FontFamily="Segoe UI Variable"
                               FontSize="11" FontWeight="Bold"
                               Foreground="{StaticResource AccentBrush}"
                               VerticalAlignment="Center" Margin="8,0,0,0"/>
                </StackPanel>

                <!-- App actions (Settings, About) + Window Controls -->
                <StackPanel Grid.Column="3" Orientation="Horizontal"
                            VerticalAlignment="Center"
                            shell:WindowChrome.IsHitTestVisibleInChrome="True">

                    <Button x:Name="SettingsButton"
                            Style="{StaticResource ChromeButton}"
                            Content="&#xE713;"
                            ToolTip="Settings"
                            AutomationProperties.Name="Open settings"
                            AutomationProperties.HelpText="Change polling interval, temperature unit and startup behavior"
                            TabIndex="101"
                            Click="SettingsButton_Click"/>

                    <Button x:Name="AboutButton"
                            Style="{StaticResource ChromeButton}"
                            Content="&#xE946;"
                            ToolTip="About SystemFlow Pro"
                            AutomationProperties.Name="About SystemFlow Pro"
                            AutomationProperties.HelpText="Show version, license and third-party libraries"
                            TabIndex="102"
                            Click="AboutButton_Click"/>

                    <Rectangle Width="1" Height="20" Fill="{StaticResource BorderBrush}" Margin="8,0"/>

                    <Button x:Name="MinimizeButton"
                            Style="{StaticResource ChromeButton}"
                            Content="&#xE921;"
                            ToolTip="Minimize (Win+Down)"
                            AutomationProperties.Name="Minimize window"
                            TabIndex="103"
                            Click="MinimizeButton_Click"/>

                    <Button x:Name="MaximizeButton"
                            Style="{StaticResource ChromeButton}"
                            Content="&#xE922;"
                            ToolTip="Maximize (Win+Up)"
                            AutomationProperties.Name="Maximize window"
                            TabIndex="104"
                            Click="MaximizeButton_Click"/>

                    <Button x:Name="CloseButton"
                            Style="{StaticResource CloseChromeButton}"
                            Content="&#xE8BB;"
                            ToolTip="Close (Alt+F4)"
                            AutomationProperties.Name="Close application"
                            TabIndex="105"
                            Click="CloseButton_Click"/>
                </StackPanel>
            </Grid>
        </Border>

        <!-- Hero Metrics -->
        <Grid Grid.Row="1" Margin="24,16,24,8" MinHeight="180">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>

            <!-- CPU Hero Card -->
            <Border Grid.Column="0" Style="{StaticResource HeroCard}" Margin="8"
                    AutomationProperties.Name="CPU load">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>

                    <TextBlock Grid.Row="0" Style="{StaticResource FluentIcon}"
                               Text="&#xE945;" FontSize="22"
                               HorizontalAlignment="Right" Margin="16,16,16,0"
                               Opacity="0.5">
                        <TextBlock.Foreground>
                            <LinearGradientBrush>
                                <GradientStop Color="#00E5C7" Offset="0"/>
                                <GradientStop Color="#26C6DA" Offset="1"/>
                            </LinearGradientBrush>
                        </TextBlock.Foreground>
                    </TextBlock>

                    <TextBlock Grid.Row="2" x:Name="CpuValueText" Text="0%"
                               Style="{StaticResource HeroValue}" Margin="0,12"
                               ToolTip="CPU total load. Warning at 80%."
                               AutomationProperties.Name="CPU load current value"
                               AutomationProperties.LiveSetting="Polite">
                        <TextBlock.Foreground>
                            <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                                <GradientStop Color="#00E5C7" Offset="0"/>
                                <GradientStop Color="#26C6DA" Offset="1"/>
                            </LinearGradientBrush>
                        </TextBlock.Foreground>
                    </TextBlock>

                    <TextBlock Grid.Row="3" Text="CPU LOAD"
                               Style="{StaticResource HeroLabel}" Margin="0,0,0,12"/>
                </Grid>
            </Border>

            <!-- GPU Hero Card -->
            <Border Grid.Column="1" Style="{StaticResource HeroCard}" Margin="8"
                    AutomationProperties.Name="GPU load">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>

                    <TextBlock Grid.Row="0" Style="{StaticResource FluentIcon}"
                               Text="&#xE7FC;" FontSize="22"
                               HorizontalAlignment="Right" Margin="16,16,16,0"
                               Opacity="0.5">
                        <TextBlock.Foreground>
                            <LinearGradientBrush>
                                <GradientStop Color="#7C3AED" Offset="0"/>
                                <GradientStop Color="#A855F7" Offset="1"/>
                            </LinearGradientBrush>
                        </TextBlock.Foreground>
                    </TextBlock>

                    <TextBlock Grid.Row="2" x:Name="GpuValueText" Text="0%"
                               Style="{StaticResource HeroValue}" Margin="0,12"
                               ToolTip="GPU total load. Used by 3D and compute workloads."
                               AutomationProperties.Name="GPU load current value"
                               AutomationProperties.LiveSetting="Polite">
                        <TextBlock.Foreground>
                            <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                                <GradientStop Color="#7C3AED" Offset="0"/>
                                <GradientStop Color="#A855F7" Offset="1"/>
                            </LinearGradientBrush>
                        </TextBlock.Foreground>
                    </TextBlock>

                    <TextBlock Grid.Row="3" Text="GPU LOAD"
                               Style="{StaticResource HeroLabel}" Margin="0,0,0,12"/>
                </Grid>
            </Border>

            <!-- Memory Hero Card -->
            <Border Grid.Column="2" Style="{StaticResource HeroCard}" Margin="8"
                    AutomationProperties.Name="Memory usage">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>

                    <TextBlock Grid.Row="0" Style="{StaticResource FluentIcon}"
                               Text="&#xE977;" FontSize="22"
                               HorizontalAlignment="Right" Margin="16,16,16,0"
                               Opacity="0.5">
                        <TextBlock.Foreground>
                            <LinearGradientBrush>
                                <GradientStop Color="#FFA726" Offset="0"/>
                                <GradientStop Color="#FFB74D" Offset="1"/>
                            </LinearGradientBrush>
                        </TextBlock.Foreground>
                    </TextBlock>

                    <TextBlock Grid.Row="2" x:Name="MemoryValueText" Text="0%"
                               Style="{StaticResource HeroValue}" Margin="0,12"
                               ToolTip="Memory usage in percent. Warning at 85%."
                               AutomationProperties.Name="Memory usage current value"
                               AutomationProperties.LiveSetting="Polite">
                        <TextBlock.Foreground>
                            <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                                <GradientStop Color="#FFA726" Offset="0"/>
                                <GradientStop Color="#FFB74D" Offset="1"/>
                            </LinearGradientBrush>
                        </TextBlock.Foreground>
                    </TextBlock>

                    <TextBlock Grid.Row="3" Text="MEMORY USAGE"
                               Style="{StaticResource HeroLabel}" Margin="0,0,0,12"/>
                </Grid>
            </Border>

            <!-- Temperature Hero Card -->
            <Border Grid.Column="3" Style="{StaticResource HeroCard}" Margin="8"
                    AutomationProperties.Name="Average temperature">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>

                    <TextBlock Grid.Row="0" Style="{StaticResource FluentIcon}"
                               Text="&#xE9CA;" FontSize="22"
                               HorizontalAlignment="Right" Margin="16,16,16,0"
                               Opacity="0.5">
                        <TextBlock.Foreground>
                            <LinearGradientBrush>
                                <GradientStop Color="#FF5252" Offset="0"/>
                                <GradientStop Color="#FF7043" Offset="1"/>
                            </LinearGradientBrush>
                        </TextBlock.Foreground>
                    </TextBlock>

                    <TextBlock Grid.Row="2" x:Name="TempValueText" Text="0°C"
                               Style="{StaticResource HeroValue}" Margin="0,12"
                               ToolTip="Average of all available temperature sensors. Warning at 75°C."
                               AutomationProperties.Name="Average temperature current value"
                               AutomationProperties.LiveSetting="Polite">
                        <TextBlock.Foreground>
                            <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                                <GradientStop Color="#FF5252" Offset="0"/>
                                <GradientStop Color="#FF7043" Offset="1"/>
                            </LinearGradientBrush>
                        </TextBlock.Foreground>
                    </TextBlock>

                    <TextBlock Grid.Row="3" Text="TEMPERATURE"
                               Style="{StaticResource HeroLabel}" Margin="0,0,0,12"/>
                </Grid>
            </Border>
        </Grid>

        <!-- Main Content Area -->
        <Grid Grid.Row="2" Margin="24,0,24,24">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>

            <Border Grid.Column="0" Style="{StaticResource ModernCard}" Margin="8"
                    AutomationProperties.Name="CPU cores and fans">
                <StackPanel Margin="20">
                    <TextBlock Text="CPU CORES" Style="{StaticResource SectionHeader}"/>
                    <ScrollViewer MaxHeight="420" VerticalScrollBarVisibility="Auto">
                        <StackPanel x:Name="CpuCoresPanel" Margin="0,0,0,12"/>
                    </ScrollViewer>

                    <TextBlock Text="CPU COOLING" Style="{StaticResource SectionHeader}" Margin="0,16,0,0"/>
                    <ScrollViewer MaxHeight="220" VerticalScrollBarVisibility="Auto">
                        <StackPanel x:Name="CpuFansPanel"/>
                    </ScrollViewer>
                </StackPanel>
            </Border>

            <Border Grid.Column="1" Style="{StaticResource ModernCard}" Margin="8"
                    AutomationProperties.Name="GPU information and fans">
                <StackPanel Margin="20">
                    <TextBlock Text="GPU INFORMATION" Style="{StaticResource SectionHeader}"/>
                    <ScrollViewer MaxHeight="500" VerticalScrollBarVisibility="Auto">
                        <StackPanel x:Name="GpuInfoPanel" Margin="0,0,0,12"/>
                    </ScrollViewer>

                    <TextBlock Text="GPU COOLING" Style="{StaticResource SectionHeader}" Margin="0,16,0,0"/>
                    <ScrollViewer MaxHeight="260" VerticalScrollBarVisibility="Auto">
                        <StackPanel x:Name="SystemFansPanel"/>
                    </ScrollViewer>
                </StackPanel>
            </Border>

            <Border Grid.Column="2" Style="{StaticResource ModernCard}" Margin="8"
                    AutomationProperties.Name="Memory and thermal sensors">
                <StackPanel Margin="20">
                    <TextBlock Text="MEMORY STATUS" Style="{StaticResource SectionHeader}"/>
                    <StackPanel x:Name="MemoryPanel" Margin="0,0,0,16"/>

                    <ProgressBar x:Name="MemoryProgressBar" Height="8"
                                 Background="{StaticResource HighlightBrush}"
                                 BorderThickness="0" Margin="0,4,0,16"
                                 AutomationProperties.Name="Memory usage progress indicator">
                        <ProgressBar.Foreground>
                            <LinearGradientBrush>
                                <GradientStop Color="#FFA726" Offset="0"/>
                                <GradientStop Color="#FFB74D" Offset="1"/>
                            </LinearGradientBrush>
                        </ProgressBar.Foreground>
                    </ProgressBar>

                    <TextBlock Text="TEMPERATURE SENSORS" Style="{StaticResource SectionHeader}" Margin="0,12,0,0"/>
                    <ScrollViewer MaxHeight="340" VerticalScrollBarVisibility="Auto">
                        <StackPanel x:Name="ThermalPanel"/>
                    </ScrollViewer>
                </StackPanel>
            </Border>

            <Border Grid.Column="3" Style="{StaticResource ModernCard}" Margin="8"
                    AutomationProperties.Name="System status and hardware information">
                <StackPanel Margin="20">
                    <TextBlock Text="SYSTEM STATUS" Style="{StaticResource SectionHeader}"/>
                    <StackPanel x:Name="SystemPanel" Margin="0,0,0,16"/>

                    <TextBlock Text="HARDWARE INFO" Style="{StaticResource SectionHeader}" Margin="0,12,0,0"/>
                    <ScrollViewer MaxHeight="300" VerticalScrollBarVisibility="Auto">
                        <StackPanel x:Name="HardwarePanel"/>
                    </ScrollViewer>
                </StackPanel>
            </Border>
        </Grid>
    </Grid>
</Window>