{% load static %}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
  <meta name="theme-color" content="#0b0b12">
  <title>{{ link.alias }} · 已执行</title>
  <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>⚡</text></svg>">
  <style>
    :root {
      --bg: #0b0b12; --card: #16161f; --text: #ececf1; --muted: #9a9aa8;
      --accent: #7c6cff; --accent-2: #4facfe; --danger: #ff6b6b;
    }
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      min-height: 100dvh; padding: 24px; text-align: center;
    }
    .card {
      background: var(--card); border: 1px solid rgba(255,255,255,.08); border-radius: 20px;
      padding: 40px 28px; max-width: 420px; width: 100%;
      animation: pop .3s ease;
    }
    @keyframes pop { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
    .icon { font-size: 52px; margin-bottom: 14px; }
    .title { font-size: 19px; font-weight: 700; margin-bottom: 8px; }
    .msg { color: var(--muted); font-size: 14px; line-height: 1.7; margin-bottom: 6px; word-break: break-word; }
    .query {
      display: inline-block; background: rgba(255,255,255,.07); border-radius: 10px;
      padding: 8px 14px; font-size: 13.5px; color: var(--text); margin: 12px 0 22px; max-width: 100%;
      word-break: break-word;
    }
    .btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      background: linear-gradient(135deg, #5865F2 0%, #7c6cff 100%); color: #fff;
      text-decoration: none; font-weight: 600; font-size: 15px;
      padding: 13px 24px; border-radius: 26px; width: 100%;
      box-shadow: 0 4px 16px rgba(88,101,242,.35); transition: transform .12s;
    }
    .btn:active { transform: scale(.96); }
    .btn.alt { background: rgba(255,255,255,.08); box-shadow: none; margin-top: 10px; color: var(--text); border: 1px solid rgba(255,255,255,.12); }
    .err { color: var(--danger); }
  </style>
</head>
<body>
  <div class="card">
    <div class="icon">{% if result.success %}✅{% else %}⚠️{% endif %}</div>
    <div class="title {% if not result.success %}err{% endif %}">{{ result.message }}</div>
    {% if query %}<div class="query">{{ query }}</div>{% endif %}
    {% if result.success and result.discord_deeplink %}
      <a class="btn" href="{{ result.discord_deeplink }}">📲 打开 Discord 看回复</a>
    {% endif %}
    <a class="btn alt" href="/">← 返回</a>
  </div>
</body>
</html>
