:root {
      --bg: #f7f7f7;
      --header: #1f2937;
      --menu: #374151;
      --text: #111827;
      --accent: #2563eb;
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
                   Roboto, Helvetica, Arial, "PingFang SC",
                   "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      background: var(--bg);
      color: var(--text);
    }

    /* =====================
       顶部区域
    ====================== */

    header {
      background: var(--header);
      color: #fff;
    }

    .top-row {
      display: flex;
      align-items: center;
      padding: 12px 16px;
      font-size: 20px;
      font-weight: 600;
    }

    .logo {
      width: 36px;
      height: 36px;
      margin-right: 12px;
      background: var(--accent);
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
    }

    .nav-row {
      display: flex;
      align-items: center;
      padding: 8px 12px;
      background: var(--menu);
      gap: 8px;
      flex-wrap: wrap;
    }

    .nav-row button {
      background: #111827;
      color: #fff;
      border: none;
      padding: 6px 10px;
      border-radius: 4px;
      cursor: pointer;
    }

    .nav-row button:hover {
      background: var(--accent);
    }

    #menu {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }

    .menu-item {
      color: #fff;
      cursor: pointer;
      padding: 4px 8px;
      border-radius: 4px;
      white-space: nowrap;
    }

    .menu-item:hover {
      background: rgba(255,255,255,0.15);
    }

    /* =====================
       主内容区
    ====================== */

    main {
      padding: 12px;
      height: calc(100vh - 165px);
      overflow: hidden;
    }

    #content {
      height: 100%;
      background: #fff;
      border-radius: 8px;
      padding: 12px;
      overflow: auto;
    }

    .file-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .file-list li {
      padding: 8px;
      border-bottom: 1px solid #eee;
      display: flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
    }

    .file-list li:hover {
      background: #f1f5f9;
    }

    .link {
      color: var(--accent);
      cursor: pointer;
    }

    .file-item {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .file-item button {
      padding: 4px 8px;
      border: 1px solid #ccc;
      background: #fff;
      border-radius: 4px;
      cursor: pointer;
    }

    .file-item button:hover {
      background: #e5e7eb;
    }

    /* =====================
       查看器
    ====================== */

    .viewer {
      width: 100%;
      height: 100%;
      border: none;
    }

    .breadcrumb {
      padding: 6px 12px;
      font-size: 14px;
      color: #555;
    }

    .breadcrumb-link {
      cursor: pointer;
      color: #0066cc;
    }

    .breadcrumb-link:hover {
      text-decoration: underline;
    }

    .breadcrumb-current {
      font-weight: bold;
      color: #000;
    }

    #breadcrumb {
      font-size: 14px;
      color: #555;
    }

    .breadcrumb-item {
      cursor: pointer;
      color: #007acc;
    }

    .breadcrumb-item:hover {
      text-decoration: underline;
    }



    /* =====================
       页脚（备案信息）
    ====================== */

    .site-footer {
      padding: 8px 16px 10px;
      text-align: center;
      font-size: 13px;
      color: #9ca3af;
    }

    .beian-link {
      color: #9ca3af;
      text-decoration: none;
    }

    .beian-link:hover {
      color: var(--accent);
      text-decoration: underline;
    }

    /* =====================
       响应式
    ====================== */

    @media (max-width: 768px) {
      .top-row {
        font-size: 18px;
      }

      main {
        height: calc(100vh - 185px);
        padding: 8px;
      }

      .file-list li {
        flex-direction: column;
        align-items: flex-start;
      }
    }