@php
    use App\Support\DberpProductBranding;

    $statusCode = (string) ($statusCode ?? '404');
    $pageTitle = (string) ($title ?? '');
    $pageMessage = (string) ($message ?? '');
    $brandName = app(DberpProductBranding::class)->displayName();
@endphp
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="robots" content="noindex, nofollow">
    <title>{{ $pageTitle }} — {{ $brandName }}</title>
    <style>
        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
        :root {
            color-scheme: light;
            /* 与 Filament 管理端 theme.css / AdminPanelProvider primary 对齐 */
            --primary-500: #2f67e3;
            --primary-600: #1d4ed8;
            --primary-700: #1e3a8a;
            --primary-soft: #eef4ff;
            --accent: #0ea5e9;
            --surface: #f9fafb;
            --card: #ffffff;
            --border: #e5e7eb;
            --text-main: #1f2937;
            --text-secondary: #6b7280;
            --text-muted: #9ca3af;
            --shadow: 0 25px 50px -12px rgba(29, 78, 216, 0.15);
        }
        body {
            min-height: 100vh;
            font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
            color: var(--text-main);
            line-height: 1.65;
            background:
                radial-gradient(ellipse 80% 60% at 50% -10%, rgba(37, 99, 235, 0.18), transparent),
                linear-gradient(180deg, #f8fafc 0%, #eef2ff 45%, #f1f5f9 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 2rem 1.25rem;
        }
        .shell {
            width: min(32rem, 100%);
        }
        .brand {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.625rem;
            margin-bottom: 1.5rem;
            color: var(--primary-600);
        }
        .brand svg { width: 2rem; height: 2rem; }
        .brand-name {
            font-size: 1rem;
            font-weight: 700;
            letter-spacing: 0.02em;
            color: var(--text-main);
        }
        .card {
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: 1.25rem;
            padding: 2rem 1.75rem;
            box-shadow: var(--shadow);
        }
        .code {
            display: inline-flex;
            align-items: center;
            padding: 0.35rem 0.85rem;
            border-radius: 999px;
            background: var(--primary-soft);
            color: var(--primary-700);
            font-size: 0.8125rem;
            font-weight: 600;
            letter-spacing: 0.08em;
            margin-bottom: 1.25rem;
        }
        h1 {
            font-size: 1.375rem;
            font-weight: 700;
            line-height: 1.4;
            margin-bottom: 0.75rem;
            color: var(--text-main);
        }
        .lead {
            font-size: 0.9375rem;
            color: var(--text-secondary);
            margin: 0;
        }
        .actions {
            display: flex;
            gap: 0.75rem;
            margin-top: 1.75rem;
            flex-wrap: wrap;
        }
        .button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 8.75rem;
            padding: 0.75rem 1.125rem;
            border-radius: 0.75rem;
            text-decoration: none;
            font-size: 0.875rem;
            font-weight: 600;
            border: 1px solid transparent;
            transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
        }
        .button-primary {
            background: var(--primary-600);
            color: #ffffff;
        }
        .button-primary:hover {
            background: var(--primary-700);
        }
        .button-secondary {
            background: transparent;
            color: var(--primary-700);
            border-color: rgba(29, 78, 216, 0.24);
        }
        .button-secondary:hover {
            background: var(--primary-soft);
        }
    </style>
</head>
<body>
    <div class="shell">
        <div class="brand" aria-hidden="true">
            @include('partials.dberp-brand-cube-mark', ['class' => ''])
            <span class="brand-name">{{ $brandName }}</span>
        </div>

        <main class="card" role="main">
            <span class="code">{{ $statusCode }}</span>
            <h1>{{ $pageTitle }}</h1>
            <p class="lead">{{ $pageMessage }}</p>
            <div class="actions">
                <a class="button button-primary" href="#" onclick="event.preventDefault(); history.back();">{{ __('dberp.actions.back_to_previous_page') }}</a>
                <a class="button button-secondary" href="{{ url('/') }}">{{ __('dberp.actions.back_to_system_home') }}</a>
            </div>
        </main>
    </div>
</body>
</html>
