<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{ title }}</title>
<style>
:root { color-scheme: light; }
* { box-sizing: border-box; }
body {
margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
background: #f4ede4; color: #2a2620; padding: 24px;
}
.card {
background: #fff; border: 1px solid #e7ded1; border-radius: 14px;
box-shadow: 0 10px 30px rgba(40, 30, 20, .08); padding: 40px; max-width: 460px; width: 100%; text-align: center;
}
h1 { font-size: 22px; margin: 0 0 8px; }
p { color: #6b6357; font-size: 14px; line-height: 1.5; margin: 0 0 24px; }
a.back {
display: inline-block; padding: 9px 18px; border-radius: 8px; text-decoration: none;
background: #2a2620; color: #f8f4ee; font-size: 13px; font-weight: 600;
}
pre.detail {
text-align: left; background: #faf6f0; border: 1px solid #e7ded1; border-radius: 8px;
padding: 12px; font-size: 12px; color: #7a2517; overflow-x: auto;
margin: 0 0 24px; white-space: pre-wrap; word-break: break-word;
}
</style>
</head>
<body>
<div class="card">
<h1>{{ title }}</h1>
<p>{{ message }}</p>
{% if let Some(detail) = detail %}<pre class="detail">{{ detail }}</pre>{% endif %}
<a class="back" href="#" onclick="history.back(); return false;">Go back</a>
</div>
</body>
</html>