:root {
    --bg: #e5e7eb;
    --card: #ffffff;
    --text: #111827;
    --muted: #4b5563;
    --tag: #dbeafe;
    --tag-text: #1e3a8a;
    --warn: #fee2e2;
    --warn-text: #991b1b;
    --promo: #a855f7;
    --promo-bg: #f3e8ff;
    --lab: #ecfeff;
    --lab-text: #155e75;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
    color: var(--text);
    background: var(--bg);
}

.lab-banner {
    background: var(--lab);
    color: var(--lab-text);
    padding: 10px 24px;
    font-size: 13px;
    border-bottom: 1px solid #a5f3fc;
}

.page {
    min-height: calc(100vh - 40px);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 40px 24px 24px;
}

.stack {
    width: min(900px, 100%);
    display: grid;
    gap: 16px;
}

.card {
    background: var(--card);
    border-radius: 16px;
    padding: 28px;
    box-shadow: 0 12px 24px rgba(17, 24, 39, 0.08);
}

.tag {
    display: inline-block;
    margin: 0 8px 12px 0;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 13px;
    color: var(--tag-text);
    background: var(--tag);
}

.tag--warn { color: var(--warn-text); background: var(--warn); }
.tag--promo { color: #fff; background: var(--promo); }
.tag--pinned { color: #78350f; background: #fef3c7; }

h1 { margin: 0 0 12px; line-height: 1.45; font-size: clamp(24px, 4vw, 36px); }
h2 { margin: 0 0 14px; font-size: clamp(20px, 3vw, 28px); }

.path { margin: 0; color: var(--muted); font-size: 14px; }
.path code { padding: 2px 6px; border-radius: 6px; background: #f3f4f6; }

.project-list, .page-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.project-list li, .page-list li {
    padding: 14px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fafafa;
}

.project-meta { color: var(--muted); font-size: 13px; margin-top: 4px; }

.error { color: var(--warn-text); background: var(--warn); padding: 10px 14px; border-radius: 8px; }

a { color: #2563eb; text-decoration: none; }
a:hover { text-decoration: underline; }

.page-image { max-width: 100%; border-radius: 12px; margin-top: 16px; }
.page-desc { color: var(--muted); margin-top: 12px; line-height: 1.6; }

.page-image-stub {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 20px 0 4px;
    height: 240px;
    border-radius: 12px;
    background: repeating-linear-gradient(
        45deg,
        #e5e7eb,
        #e5e7eb 10px,
        #d1d5db 10px,
        #d1d5db 20px
    );
    color: #4b5563;
    font-size: 15px;
    border: 1px dashed #9ca3af;
}
.page-image-stub__icon { font-size: 28px; }
.page-image-stub__label { font-weight: 500; letter-spacing: 0.05em; }

.page-body {
    margin-top: 16px;
    color: var(--text);
    line-height: 1.75;
    font-size: 15px;
}
.page-body p { margin: 0 0 12px; }

.tag--group { color: #14532d; background: #d1fae5; }

.matcher-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.matcher-list li {
    padding: 14px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fafafa;
}
.kw-row { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.kw-chip {
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 6px;
    background: #f3f4f6;
    color: #374151;
}