:root {
            --bg: #f7f1e8;
            --paper: #fffdf8;
            --ink: #2c241b;
            --muted: #7a6a58;
            --line: #e4d6c3;
            --accent: #8b4513;
            --accent-soft: #f0e2d0;
        }
        * { box-sizing: border-box; }
        body {
            margin: 0;
            font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
            background: linear-gradient(180deg, #f3e8d8 0%, var(--bg) 180px);
            color: var(--ink);
            min-height: 100vh;
        }
        a { color: var(--accent); text-decoration: none; }
        a:hover { text-decoration: underline; }
        .wrap { max-width: 1100px; margin: 0 auto; padding: 24px 20px 48px; }
        header.site {
            display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 24px;
            margin-bottom: 18px;
        }
        header.site h1 { margin: 0; font-size: 1.6rem; letter-spacing: 0.08em; }
        header.site p { margin: 0; color: var(--muted); font-size: 0.95rem; }
        nav.tabs {
            display: flex; flex-wrap: wrap; gap: 8px;
            border-bottom: 1px solid var(--line);
            padding-bottom: 12px; margin-bottom: 20px;
        }
        nav.tabs a {
            padding: 8px 14px; border-radius: 999px;
            background: transparent; color: var(--muted); font-weight: 600;
        }
        nav.tabs a.active {
            background: var(--accent); color: #fff; text-decoration: none;
        }
        nav.tabs a:hover { background: var(--accent-soft); text-decoration: none; color: var(--ink); }
        nav.tabs a.active:hover { background: var(--accent); color: #fff; }
        .crumbs { color: var(--muted); font-size: 0.9rem; margin-bottom: 16px; }
        .crumbs a { color: var(--muted); }
        .panel {
            background: var(--paper);
            border: 1px solid var(--line);
            border-radius: 16px;
            padding: 18px 20px;
            box-shadow: 0 8px 24px rgba(74, 48, 20, 0.05);
        }
        .grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
            gap: 12px;
        }
        .card {
            display: block;
            border: 1px solid var(--line);
            border-radius: 12px;
            padding: 14px;
            background: #fff;
            color: inherit;
        }
        .card:hover { border-color: var(--accent); text-decoration: none; }
        .card .label { font-weight: 600; word-break: break-all; }
        .card .meta { color: var(--muted); font-size: 0.8rem; margin-top: 6px; }
        .section-title { margin: 8px 0 12px; font-size: 1.05rem; }
        .file-list { list-style: none; padding: 0; margin: 0; }
        .file-list li {
            display: flex; gap: 12px; align-items: center; justify-content: space-between;
            padding: 10px 0; border-bottom: 1px solid var(--line);
        }
        .file-list li:last-child { border-bottom: 0; }
        .badge {
            display: inline-block; font-size: 0.72rem; padding: 2px 8px;
            border-radius: 999px; background: var(--accent-soft); color: var(--accent);
            text-transform: uppercase;
        }
        .preview {
            margin-top: 16px; text-align: center;
            background: #faf6f0; border-radius: 12px; padding: 12px;
            border: 1px dashed var(--line);
        }
        .preview img, .preview iframe, .preview embed {
            max-width: 100%; max-height: 75vh; border: 0; border-radius: 8px;
        }
        .actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
        .btn {
            display: inline-block; padding: 8px 14px; border-radius: 10px;
            background: var(--accent); color: #fff; font-weight: 600;
        }
        .btn.secondary { background: #fff; color: var(--accent); border: 1px solid var(--line); }
        .btn:hover { text-decoration: none; opacity: 0.92; }
        .empty { color: var(--muted); padding: 24px 8px; }
        footer { margin-top: 28px; color: var(--muted); font-size: 0.85rem; }
        .photo-gallery {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
            gap: 14px;
        }
        .photo-card {
            margin: 0;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 12px;
            overflow: hidden;
        }
        .photo-thumb {
            display: block; width: 100%; padding: 0; border: 0; background: #f3ebe0; cursor: zoom-in;
        }
        .photo-thumb img {
            display: block; width: 100%; height: 160px; object-fit: cover;
        }
        .photo-card figcaption {
            padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 2px;
        }
        .photo-card figcaption strong {
            font-size: 0.92rem; word-break: break-all;
        }
        .photo-card figcaption .meta {
            font-size: 0.75rem; color: var(--muted); word-break: break-all;
        }
        .lightbox[hidden] { display: none !important; }
        .lightbox {
            position: fixed; inset: 0; z-index: 50;
            background: rgba(20, 14, 8, 0.86);
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            padding: 24px;
        }
        .lightbox img {
            max-width: min(96vw, 1200px); max-height: 82vh;
            border-radius: 8px; box-shadow: 0 12px 40px rgba(0,0,0,0.35);
        }
        .lightbox-caption {
            color: #f7f1e8; margin: 12px 0 0; text-align: center;
        }
        .lightbox-close {
            position: absolute; top: 16px; right: 20px;
            border: 0; background: transparent; color: #fff;
            font-size: 2rem; line-height: 1; cursor: pointer;
        }
        .fname { opacity: 0.75; }
        .category-pill {
            display: inline-block; margin: 0 0 8px; padding: 4px 10px;
            border-radius: 999px; background: var(--accent-soft); color: var(--accent);
            font-size: 0.8rem; font-weight: 600;
        }
        .subtitle { color: var(--muted); margin: 0 0 8px; font-size: 1.05rem; }
        .meta-line { color: var(--muted); margin-top: 0; }
        .preview-full { text-align: left; }
        .preview-full img { display: block; margin: 0 auto; }
        .doc-html {
            font-size: 1.02rem; line-height: 1.75; color: var(--ink);
            max-width: 52rem; margin: 0 auto;
        }
        .doc-html p { margin: 0.7em 0; }
        .doc-html table { border-collapse: collapse; width: 100%; margin: 1em 0; }
        .doc-html td, .doc-html th { border: 1px solid var(--line); padding: 6px 8px; }
        .text-preview {
            text-align: left; white-space: pre-wrap; max-height: 75vh; overflow: auto;
            background: #fff; padding: 12px; border-radius: 8px;
        }
        .sheet-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
        .sheet-tab {
            border: 1px solid var(--line); background: #fff; color: var(--muted);
            border-radius: 999px; padding: 6px 12px; cursor: pointer; font-weight: 600;
        }
        .sheet-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); }
        .sheet-pane { display: none; }
        .sheet-pane.active { display: block; }
        .sheet-scroll { overflow: auto; max-height: 75vh; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
        .sheet-table { border-collapse: collapse; min-width: 100%; font-size: 0.92rem; }
        .sheet-table th, .sheet-table td {
            border: 1px solid var(--line); padding: 6px 10px; white-space: nowrap;
        }
        .sheet-table th { background: var(--accent-soft); position: sticky; top: 0; }