<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}rssume{% endblock %}</title>
    <style>
        :root {
            --canvas: #ffffff;
            --canvas-soft: #fafafa;
            --canvas-soft-2: #f5f5f5;
            --ink: #171717;
            --body: #4d4d4d;
            --mute: #888888;
            --hairline: #ebebeb;
            --hairline-strong: #a1a1a1;
            --primary: #171717;
            --on-primary: #ffffff;
            --link: #0070f3;
            --link-deep: #0761d1;
            --success: #0070f3;
            --error: #ee0000;
            --warning: #f5a623;
            --font-sans: Geist, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            --font-mono: "JetBrains Mono", "Fira Code", ui-monospace, monospace;
            --rounded-sm: 4px;
            --rounded-md: 6px;
            --rounded-lg: 8px;
            --rounded-xl: 12px;
        }

        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

        body {
            font-family: var(--font-sans);
            font-size: 16px;
            line-height: 1.5;
            color: var(--ink);
            background: var(--canvas);
            -webkit-font-smoothing: antialiased;
        }

        header {
            background: var(--canvas);
            border-bottom: 1px solid var(--hairline);
            padding: 0 24px;
            height: 56px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: sticky;
            top: 0;
            z-index: 100;
        }

        header .logo {
            font-size: 20px;
            font-weight: 600;
            color: var(--ink);
            text-decoration: none;
            letter-spacing: -0.5px;
        }

        header nav { display: flex; gap: 24px; align-items: center; }
        header nav a {
            color: var(--body);
            text-decoration: none;
            font-size: 14px;
            font-weight: 400;
            transition: color 0.15s;
        }
        header nav a:hover { color: var(--ink); }
        header nav a.active { color: var(--ink); font-weight: 500; }

        main {
            max-width: 1280px;
            margin: 0 auto;
            padding: 32px 24px;
        }

        h1 {
            font-size: 32px;
            font-weight: 600;
            line-height: 1.25;
            letter-spacing: -0.96px;
            margin-bottom: 8px;
        }

        h2 {
            font-size: 24px;
            font-weight: 600;
            line-height: 1.3;
            letter-spacing: -0.5px;
            margin-bottom: 16px;
        }

        h3 {
            font-size: 18px;
            font-weight: 500;
            line-height: 1.4;
            margin-bottom: 8px;
        }

        .subtitle { color: var(--mute); font-size: 16px; margin-bottom: 32px; }

        .card {
            background: var(--canvas);
            border: 1px solid var(--hairline);
            border-radius: var(--rounded-lg);
            padding: 24px;
            margin-bottom: 16px;
        }
        .card:hover { border-color: var(--hairline-strong); }

        .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
        .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

        .stats-bar {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 16px;
            margin-bottom: 32px;
        }
        .stat-card {
            background: var(--canvas-soft);
            border: 1px solid var(--hairline);
            border-radius: var(--rounded-lg);
            padding: 20px;
            text-align: center;
        }
        .stat-card .number {
            font-size: 32px;
            font-weight: 600;
            color: var(--ink);
            letter-spacing: -0.5px;
        }
        .stat-card .label {
            font-size: 14px;
            color: var(--mute);
            margin-top: 4px;
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            text-align: left;
            padding: 12px 16px;
            border-bottom: 1px solid var(--hairline);
            font-size: 14px;
        }
        th {
            font-weight: 500;
            color: var(--mute);
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        tr:hover { background: var(--canvas-soft); }

        .btn {
            display: inline-flex;
            align-items: center;
            padding: 8px 14px;
            font-family: var(--font-sans);
            font-size: 14px;
            font-weight: 500;
            line-height: 1.2;
            border-radius: var(--rounded-md);
            border: 1px solid var(--hairline);
            background: var(--canvas);
            color: var(--ink);
            cursor: pointer;
            text-decoration: none;
            transition: all 0.15s;
        }
        .btn:hover { border-color: var(--hairline-strong); background: var(--canvas-soft); }
        .btn-primary { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
        .btn-primary:hover { background: #333; border-color: #333; }

        .badge {
            display: inline-flex;
            padding: 2px 8px;
            font-size: 12px;
            font-weight: 400;
            border-radius: 9999px;
            background: var(--canvas-soft-2);
            color: var(--mute);
        }
        .badge-success { background: #d3e5ff; color: var(--link-deep); }
        .badge-warning { background: #ffefcf; color: #ab570a; }

        .article-item { margin-bottom: 12px; }
        .article-meta { font-size: 12px; color: var(--mute); margin-top: 4px; }

        .empty-state {
            text-align: center;
            padding: 64px 24px;
            color: var(--mute);
        }
        .empty-state h3 { color: var(--ink); margin-bottom: 8px; }

        @media (max-width: 768px) {
            .stats-bar, .grid-2, .grid-3 { grid-template-columns: 1fr; }
            main { padding: 16px; }
            h1 { font-size: 24px; }
        }
    </style>
    <script src="https://unpkg.com/htmx.org@2.0.4" defer></script>
</head>
<body>
    <header>
        <a href="/panel" class="logo">rssume</a>
        <nav>
            <a href="/panel" class="{% if title and 'Dashboard' in title %}active{% endif %}">Dashboard</a>
            <a href="/panel/monitor" class="{% if title and 'Monitor' in title %}active{% endif %}">Monitor</a>
            <a href="/panel/settings" class="{% if title and 'Settings' in title %}active{% endif %}">Settings</a>
        </nav>
    </header>
    <main>
        {% block content %}{% endblock %}
    </main>
</body>
</html>
