.sitemap-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

        .search-box { display: flex; gap: 12px; margin: 16px 0 20px 0; flex-wrap: wrap; }
        .search-box input { flex: 1; padding: 12px 18px; border: 2px solid #e8ddd0; border-radius: 8px; font-size: 15px; outline: none; background: #fcf9f5; color: #3d2c1e; min-width: 200px; }
        .search-box input:focus { border-color: #b87333; }
        .search-box input::placeholder { color: #b09580; }
        .search-box .btn { padding: 10px 20px; border: none; border-radius: 6px; font-size: 14px; cursor: pointer; transition: all 0.2s; font-weight: 500; background: #f0e8e0; color: #6a5a4a; }
        .search-box .btn:hover { background: #e0d8d0; }

        .stats { font-size: 14px; color: #8a7a6a; margin-bottom: 16px; padding: 8px 0; border-bottom: 1px solid #eee8e0; }

        .nav-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 4px; padding: 12px 16px; background: #faf3eb; border-radius: 8px; margin-bottom: 20px; }
        .nav-breadcrumb .crumb { display: inline-flex; align-items: center; gap: 4px; font-size: 15px; }
        .nav-breadcrumb .crumb a { color: #b87333; text-decoration: none; padding: 4px 8px; border-radius: 4px; transition: background 0.2s; }
        .nav-breadcrumb .crumb a:hover { background: #e8ddd0; }
        .nav-breadcrumb .crumb .sep { color: #c4b09a; margin: 0 2px; }
        .nav-breadcrumb .crumb.current { color: #3d2c1e; font-weight: 600; padding: 4px 8px; }

        .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
        .grid .card { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: #fcf9f5; border: 1px solid #e8e0d5; border-radius: 10px; transition: all 0.25s ease; text-decoration: none; color: #3d2c1e; min-height: 56px; }
        .grid .card:hover { background: #f5efe8; border-color: #c4b09a; transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
        .grid .card .icon { font-size: 20px; color: #c4a87a; flex-shrink: 0; width: 28px; text-align: center; }
        .grid .card .name { font-size: 15px; color: #3d2c1e; flex: 1; }
        .grid .card .badge { font-size: 12px; color: #b09580; background: #f0e8e0; padding: 1px 12px; border-radius: 12px; flex-shrink: 0; }
        .grid .card.leaf-card .icon { color: #c4a87a; }

        .result-link { display: flex; align-items: center; padding: 10px 14px; border-bottom: 1px solid #f5efe8; gap: 12px; text-decoration: none; color: #3d2c1e; }
        .result-link:hover { background: #f5efe8; }
        .result-link .icon { font-size: 18px; width: 28px; text-align: center; flex-shrink: 0; color: #c4a87a; }
        .result-link .name { font-size: 15px; flex: 1; color: #3d2c1e; }
        .result-link .cat { font-size: 13px; color: #b09580; }

        .highlight { background: #f5d8b0; padding: 0 4px; border-radius: 2px; }
        .loading, .no-result { text-align: center; padding: 60px 20px; color: #a08070; font-size: 16px; }
        .loading i, .no-result i { font-size: 32px; display: block; margin-bottom: 16px; color: #d5c8bc; }
        @keyframes spin { 100% { transform: rotate(360deg); } }
        .loading i { animation: spin 1s linear infinite; }

        body.dark .search-box input { background: #2a2520; border-color: #3d352e; color: #d4ccc4; }
        body.dark .search-box input::placeholder { color: #6a5a4a; }
        body.dark .search-box .btn { background: #2a2520; color: #8a7a6a; }
        body.dark .search-box .btn:hover { background: #3d352e; }
        body.dark .nav-breadcrumb { background: #2a2520; }
        body.dark .nav-breadcrumb .crumb a { color: #b87333; }
        body.dark .nav-breadcrumb .crumb a:hover { background: #3d352e; }
        body.dark .nav-breadcrumb .crumb.current { color: #d4ccc4; }
        body.dark .grid .card { background: #2a2520; border-color: #3d352e; color: #d4ccc4; }
        body.dark .grid .card:hover { background: #35302a; border-color: #5a4a3a; }
        body.dark .grid .card .name { color: #d4ccc4; }
        body.dark .grid .card .icon { color: #c4a87a; }
        body.dark .stats { border-color: #2a2520; color: #6a5a4a; }
        body.dark .result-link { border-color: #2a2520; color: #d4ccc4; }
        body.dark .result-link:hover { background: #2a2520; }
        body.dark .result-link .name { color: #d4ccc4; }
        body.dark .highlight { background: #5a4a2a; color: #f5e8d0; }

        @media (max-width: 768px) {
            .sitemap-container { padding: 0 16px; }
            .search-box { flex-direction: column; }
            .search-box .btn { text-align: center; padding: 8px 12px; font-size: 13px; }
            .grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
            .grid .card { padding: 12px 14px; min-height: 48px; }
            .grid .card .icon { font-size: 18px; width: 24px; }
            .grid .card .name { font-size: 14px; }
            .nav-breadcrumb .crumb { font-size: 13px; }
        }
        @media (max-width: 480px) {
            .sitemap-container { padding: 0 10px; }
            .grid { grid-template-columns: 1fr 1fr; gap: 8px; }
            .grid .card { padding: 10px 12px; min-height: 42px; }
            .grid .card .icon { font-size: 16px; width: 20px; }
            .grid .card .name { font-size: 13px; }
            .grid .card .badge { font-size: 10px; padding: 0 8px; }
            .nav-breadcrumb { padding: 8px 12px; }
            .nav-breadcrumb .crumb { font-size: 12px; }
        }