:root {
            --primary: #6366f1;
            --secondary: #2dd4bf;
            --accent: #f43f5e;
            --bg: #030712;
            --card: rgba(17, 24, 39, 0.95);
            --border: rgba(255, 255, 255, 0.1);
        }

        * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Plus Jakarta Sans', sans-serif; }
        body { background: var(--bg); color: #fff; overflow-x: hidden; scroll-behavior: smooth; }

        /* Dynamic Navbar */
        #portal-nav {
            position: fixed; top: 0; width: 100%; height: 75px;
            background: rgba(3, 7, 18, 0.95); backdrop-filter: blur(20px);
            border-bottom: 1px solid var(--border);
            display: flex; align-items: center; padding: 0 2%; z-index: 1000;
            overflow-x: auto; scrollbar-width: none;
        }
        #portal-nav::-webkit-scrollbar { display: none; }
        .nav-pill {
            padding: 8px 16px; margin-right: 10px; background: rgba(255,255,255,0.05);
            border-radius: 8px; font-size: 0.8rem; font-weight: 600; color: #94a3b8;
            text-decoration: none; white-space: nowrap; transition: 0.3s;
            border: 1px solid transparent;
        }
        .nav-pill:hover { border-color: var(--secondary); color: var(--secondary); }

        /* Statistics Header */
        header { padding: 140px 10% 40px; text-align: center; }
        .dashboard-stats {
            display: inline-flex; gap: 40px; margin-bottom: 30px;
            background: var(--card); padding: 20px 50px; border-radius: 15px;
            border: 1px solid var(--border);
        }
        .stat-box { text-align: center; }
        .stat-num { font-size: 2rem; font-weight: 800; color: var(--secondary); display: block; }
        .stat-label { font-size: 0.75rem; color: #64748b; text-transform: uppercase; letter-spacing: 1px; }

        /* Search Section */
        .search-wrapper { position: relative; max-width: 850px; margin: 0 auto 60px; }
        #portalSearch {
            width: 100%; padding: 22px 30px 22px 70px; border-radius: 15px;
            background: var(--card); border: 1px solid var(--border);
            color: white; font-size: 1.1rem; outline: none; transition: 0.4s;
        }
        #portalSearch:focus { border-color: var(--primary); box-shadow: 0 0 40px rgba(99, 102, 241, 0.2); }
        .search-icon { position: absolute; left: 25px; top: 25px; color: #64748b; font-size: 1.5rem; }

        /* Accordion Grid */
        .directory-container { padding: 0 5% 100px; }
        .category-group {
            background: var(--card); border: 1px solid var(--border);
            border-radius: 12px; margin-bottom: 20px; transition: 0.3s;
        }
        .category-trigger {
            padding: 25px 35px; cursor: pointer; display: flex;
            justify-content: space-between; align-items: center;
        }
        .category-title { font-weight: 700; font-size: 1.1rem; color: var(--secondary); text-transform: uppercase; }
        .badge-count { background: var(--primary); padding: 4px 12px; border-radius: 20px; font-size: 0.75rem; }

        .category-body { max-height: 0; overflow: hidden; transition: 0.5s ease-out; background: rgba(0,0,0,0.2); }
        .category-group.active .category-body { max-height: 20000px; padding-bottom: 30px; }
        .category-group.active { border-color: var(--primary); }

        .links-layout {
            display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
            gap: 15px; padding: 25px;
        }
        .link-card {
            background: rgba(255,255,255,0.02); padding: 18px; border-radius: 10px;
            text-decoration: none; border: 1px solid var(--border); transition: 0.3s;
        }
        .link-card:hover { background: rgba(99, 102, 241, 0.1); border-color: var(--primary); transform: translateY(-3px); }
        .link-text { color: #fff; font-weight: 600; display: block; margin-bottom: 5px; }
        .link-path { color: #4b5563; font-size: 0.75rem; font-family: monospace; word-break: break-all; }

        .chevron { transition: 0.4s; color: #4b5563; }
        .category-group.active .chevron { transform: rotate(180deg); color: var(--primary); }

        footer { padding: 60px; text-align: center; border-top: 1px solid var(--border); color: #4b5563; }