<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <link rel="icon" href="{{ site_branding.favicon_url }}">
  <title>{{ title }} - {{ site_branding.browser_title }}</title>
  <style>
    * { box-sizing:border-box; }
    body { margin:0; font-family:Arial, "Microsoft YaHei", sans-serif; background:#f5f5f7; color:#222; }
    a { text-decoration:none; color:inherit; }

    .topbar { background:#111; color:#fff; padding:14px 24px; }
    .topbar-inner, .wrap { width:1200px; max-width:calc(100vw - 48px); margin:0 auto; }
    .topbar-inner { display:flex; justify-content:space-between; align-items:center; gap:24px; }
    .topbar-brand a { color:#fff; font-size:20px; font-weight:800; }

    .wrap { padding:40px 0 60px; }
    .card {
      background:#fff;
      border-radius:20px;
      box-shadow:0 2px 12px rgba(0,0,0,.05);
      padding:36px;
      max-width:760px;
      margin:24px auto 0;
      text-align:center;
    }
    .status {
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-width:96px;
      height:40px;
      padding:0 16px;
      border-radius:999px;
      background:#111;
      color:#fff;
      font-size:18px;
      font-weight:800;
      margin-bottom:18px;
    }
    h1 {
      margin:0 0 14px;
      font-size:34px;
      font-weight:800;
    }
    p {
      margin:0 auto;
      max-width:560px;
      color:#666;
      font-size:15px;
      line-height:1.9;
    }
    .btn-row {
      display:flex;
      justify-content:center;
      gap:12px;
      flex-wrap:wrap;
      margin-top:24px;
    }
    .btn {
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding:10px 16px;
      border-radius:10px;
      background:#111;
      color:#fff;
      font-size:14px;
    }
    .btn-light {
      background:#efefef;
      color:#222;
    }
  </style>
</head>
<body>
  <div class="topbar">
    <div class="topbar-inner">
      <div class="topbar-brand"><a href="/">{{ site_branding.site_name }}</a></div>
    </div>
  </div>

  <div class="wrap">
    <div class="card">
      <div class="status">{{ status_code }}</div>
      <h1>{{ title }}</h1>
      <p>{{ message }}</p>
      <div class="btn-row">
        <a class="btn" href="/">返回首页</a>
        <a class="btn btn-light" href="javascript:history.back()">返回上一页</a>
      </div>
    </div>
  </div>
</body>
</html>
