<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>{% block title %}注册审核智能体平台{% endblock %}</title>
  <style>
    :root {
      --bg: #f5f7fa;
      --surface: #ffffff;
      --surface-soft: #f8fafc;
      --border: #d8e0e8;
      --text: #1f2d3d;
      --muted: #6a7a8b;
      --primary: #2f6fec;
      --primary-soft: #eef4ff;
      --success: #1f8f5f;
      --success-soft: #ecfaf3;
      --warning: #c97a16;
      --warning-soft: #fff5e8;
      --danger: #cc4b3e;
      --danger-soft: #fff1ef;
      --shadow: 0 8px 24px rgba(31, 45, 61, 0.06);
      --radius: 14px;
      --radius-lg: 18px;
    }

    * { box-sizing: border-box; }
    body {
      margin: 0;
      font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
      color: var(--text);
      background: var(--bg);
    }
    a { color: inherit; text-decoration: none; }
    button, input, select, textarea { font: inherit; }

    .topbar {
      position: sticky;
      top: 0;
      z-index: 10;
      background: rgba(255, 255, 255, 0.95);
      border-bottom: 1px solid var(--border);
      backdrop-filter: blur(8px);
    }
    .topbar-inner {
      width: min(1680px, calc(100vw - 40px));
      margin: 0 auto;
      min-height: 64px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }
    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
    }
    .brand-mark {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      background: var(--primary);
      color: #fff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      flex: none;
    }
    .brand h1 {
      margin: 0;
      font-size: 1rem;
      line-height: 1.2;
    }
    .brand p {
      margin: 2px 0 0;
      color: var(--muted);
      font-size: 0.82rem;
    }
    .topnav {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }
    .topnav a {
      padding: 9px 12px;
      border-radius: 10px;
      color: var(--muted);
      font-size: 0.92rem;
    }
    .topnav a:hover {
      background: var(--surface-soft);
      color: var(--text);
    }

    .page {
      width: min(1680px, calc(100vw - 40px));
      margin: 24px auto 40px;
      display: grid;
      gap: 16px;
    }

    .page-header {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 22px 24px;
      box-shadow: var(--shadow);
      display: grid;
      gap: 10px;
    }
    .eyebrow {
      display: inline-flex;
      width: fit-content;
      padding: 4px 10px;
      border-radius: 999px;
      background: var(--primary-soft);
      color: var(--primary);
      font-size: 0.78rem;
      font-weight: 700;
    }
    .page-title {
      margin: 0;
      font-size: 1.9rem;
      line-height: 1.2;
    }
    .page-lead {
      margin: 0;
      color: var(--muted);
      line-height: 1.65;
    }

    .panel {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 18px;
      box-shadow: var(--shadow);
    }
    .section-heading {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 12px;
      margin-bottom: 14px;
    }
    .section-title {
      margin: 0;
      font-size: 1.08rem;
      line-height: 1.35;
    }
    .section-copy, .muted, .help-text {
      color: var(--muted);
      line-height: 1.6;
      font-size: 0.92rem;
    }

    .grid-2 {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
    }
    .grid-3 {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
    }
    .workspace-grid {
      display: grid;
      grid-template-columns: 360px minmax(0, 1fr);
      gap: 16px;
      align-items: start;
    }
    .workspace-grid-wide {
      display: grid;
      grid-template-columns: minmax(0, 1.45fr) minmax(420px, 0.85fr);
      gap: 16px;
      align-items: start;
    }
    .stack { display: grid; gap: 14px; }

    .metric-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
    }
    .metric-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 16px;
    }
    .metric-label {
      color: var(--muted);
      font-size: 0.8rem;
    }
    .metric-value {
      margin-top: 8px;
      font-size: 1.55rem;
      font-weight: 700;
    }
    .metric-note {
      margin-top: 6px;
      color: var(--muted);
      font-size: 0.86rem;
      line-height: 1.5;
    }

    .button-row, .badge-row, .meta-list {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .button, button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      min-height: 38px;
      padding: 0 14px;
      border-radius: 10px;
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--text);
      cursor: pointer;
    }
    .button-primary, button {
      background: var(--primary);
      color: #fff;
      border-color: var(--primary);
    }
    .pill, .meta-badge, .status {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 5px 10px;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: var(--surface-soft);
      font-size: 0.82rem;
    }
    .pill-accent { color: var(--primary); background: var(--primary-soft); border-color: #d8e5ff; }
    .pill-success, .status-success { color: var(--success); background: var(--success-soft); border-color: #ccebdc; }
    .pill-signal { color: var(--warning); background: var(--warning-soft); border-color: #f3dcc0; }
    .pill-danger, .status-failed { color: var(--danger); background: var(--danger-soft); border-color: #f2d3cf; }

    .simple-list, .detail-list, .risk-list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: grid;
      gap: 10px;
    }
    .detail-item, .risk-item {
      padding: 12px 14px;
      border: 1px solid var(--border);
      border-radius: 12px;
      background: var(--surface-soft);
      line-height: 1.6;
    }
    .detail-item strong, .risk-item strong { display: block; margin-bottom: 4px; }

    textarea, select, input[type="text"], input[type="file"] {
      width: 100%;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: #fff;
      padding: 11px 12px;
      color: var(--text);
    }
    textarea { min-height: 140px; resize: vertical; line-height: 1.6; }
    label { display: block; margin-bottom: 8px; font-weight: 600; }
    .checkbox-list { display: grid; gap: 8px; }
    .checkbox-item {
      display: grid;
      grid-template-columns: 20px minmax(0, 1fr);
      gap: 10px;
      padding: 10px 12px;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: var(--surface-soft);
    }

    .table-wrap { overflow-x: auto; }
    .data-table, .kv-table {
      width: 100%;
      border-collapse: collapse;
    }
    .data-table th, .data-table td, .kv-table th, .kv-table td {
      padding: 12px 10px;
      text-align: left;
      border-bottom: 1px solid #e9eef3;
      vertical-align: top;
      line-height: 1.55;
    }
    .data-table th, .kv-table th {
      color: var(--muted);
      font-size: 0.82rem;
      font-weight: 700;
      background: var(--surface-soft);
      white-space: nowrap;
    }
    .nowrap { white-space: nowrap; }
    .cell-min-220 { min-width: 220px; }
    .cell-min-280 { min-width: 280px; }

    .notice {
      padding: 12px 14px;
      border-radius: 10px;
      border: 1px solid #d8e5ff;
      background: var(--primary-soft);
      color: var(--text);
    }
    .notice-error {
      border-color: #f2d3cf;
      background: var(--danger-soft);
      color: var(--danger);
    }
    .code-block {
      margin: 0;
      padding: 12px;
      border-radius: 10px;
      background: #1f2937;
      color: #f9fafb;
      overflow-x: auto;
      font-size: 0.84rem;
      line-height: 1.55;
      white-space: pre-wrap;
      word-break: break-word;
    }
    .link-card {
      display: block;
      padding: 16px;
      border: 1px solid var(--border);
      border-radius: 12px;
      background: var(--surface);
    }
    .link-card h3 { margin: 0 0 6px; font-size: 1rem; }
    .link-card p { margin: 0; color: var(--muted); font-size: 0.9rem; line-height: 1.55; }

    @media (max-width: 1024px) {
      .metric-grid, .grid-2, .grid-3, .workspace-grid, .workspace-grid-wide { grid-template-columns: 1fr; }
      .topbar-inner { flex-direction: column; align-items: flex-start; padding: 12px 0; }
      .topnav { justify-content: flex-start; }
    }
  </style>
</head>
<body>
  <header class="topbar">
    <div class="topbar-inner">
      <div class="brand">
        <div class="brand-mark">RA</div>
        <div>
          <h1>注册审核智能体平台</h1>
          <p>极简后台原型</p>
        </div>
      </div>
      <nav class="topnav">
        <a href="{% url 'chat:index' %}">审核智能体</a>
        <a href="{% url 'documents:list' %}">资料包</a>
        <a href="{% url 'platform_ui:knowledge-base' %}">知识库</a>
        <a href="{% url 'audit:list' %}">处理历史</a>
      </nav>
    </div>
  </header>

  <main class="page">
    {% if messages %}
      <div class="stack">
        {% for message in messages %}
          <div class="notice{% if message.tags == 'error' %} notice-error{% endif %}">{{ message }}</div>
        {% endfor %}
      </div>
    {% endif %}
    {% block content %}{% endblock %}
  </main>
</body>
</html>
