:root {
    --bg: #0b1020;
    --card: rgba(255,255,255,0.08);
    --card2: rgba(255,255,255,0.06);
    --stroke: rgba(255,255,255,0.14);
    --text: #f3f6ff;
    --muted: rgba(243,246,255,0.72);
    --shadow: 0 12px 32px rgba(0,0,0,0.35);
    --radius: 18px;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: system-ui,-apple-system,"Segoe UI",Roboto,Arial,"Noto Sans Hebrew",sans-serif;
    color: var(--text);
    background: radial-gradient(1200px 700px at 10% 10%, rgba(108,92,231,0.25), transparent 50%), radial-gradient(900px 600px at 90% 15%, rgba(29,209,161,0.18), transparent 55%), radial-gradient(1000px 700px at 50% 95%, rgba(255,159,67,0.14), transparent 55%), var(--bg);
    min-height: 100vh;
}

.wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 28px 18px 42px;
}

header {
    display: flex;
    gap: 14px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.title {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

h1 {
    margin: 0;
    font-size: 22px;
    letter-spacing: .2px;
}

.subtitle {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}

.toolbar {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: rgba(255,255,255,0.08);
    border: 1px solid var(--stroke);
    border-radius: 999px;
    box-shadow: var(--shadow);
    backdrop-filter: blur(10px);
}

    .search input {
        width: 320px;
        max-width: 70vw;
        border: 0;
        outline: none;
        background: transparent;
        color: var(--text);
        font-size: 14px;
    }

        .search input::placeholder {
            color: rgba(243,246,255,0.55);
        }

.chip {
    padding: 10px 12px;
    border-radius: 999px;
    border: 1px solid var(--stroke);
    background: rgba(255,255,255,0.06);
    color: var(--text);
    font-size: 13px;
    cursor: pointer;
    user-select: none;
}

    .chip:hover {
        background: rgba(255,255,255,0.10);
    }

.grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 14px;
}

/* 2 columns on medium */
@media (max-width:980px) {
    .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .search input {
        width: 240px;
    }
}

/* 1 column on small */
@media (max-width:640px) {
    .grid {
        grid-template-columns: 1fr;
    }

    .search input {
        width: 200px;
    }
}

.pillar {
    background: linear-gradient(180deg,var(--card),var(--card2));
    border: 1px solid var(--stroke);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    backdrop-filter: blur(10px);
}

.pillar-head {
    padding: 14px 14px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.10);
}

    .pillar-head h2 {
        margin: 0;
        font-size: 15px;
    }

.count {
    font-size: 12px;
    color: var(--muted);
    padding: 6px 10px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 999px;
    background: rgba(0,0,0,0.12);
}

.list {
    padding: 10px;
    display: grid;
    gap: 10px;
}

/* --- Row: main link + open-path icon --- */
.item-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

/* main clickable card */
.item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.06);
    text-decoration: none;
    color: var(--text);
    transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
}

    .item:hover {
        transform: translateY(-1px);
        background: rgba(255,255,255,0.10);
        border-color: rgba(255,255,255,0.16);
    }

    /* main item inside row expands */
    .item.main {
        flex: 1;
    }

/* ===== Icon system via CSS (no emoji inside HTML) ===== */
.icon {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(0,0,0,0.22);
    border: 1px solid rgba(255,255,255,0.12);
    flex: 0 0 auto;
    font-size: 18px;
}

    /* Default icon if no type provided */
    /* .icon::before {content: "📌";} */
        /* File/Folder types */
    .icon.dir::before {content: "📁";}
    /* folder */
    .icon.doc::before {content: "📄";}
    /* doc */
    .icon.sheet::before {content: "📊";}
    /* xlsx / sheet */
    .icon.pdf::before {content: "🧾";}
    /* pdf */
    .icon.img::before {content: "🖼️";}
    /* image */
    .icon.ppt::before {content: "📽️";}
    /* presentation */

    /* Requested */
    .icon.kb::before {content: "🎓";}
    /* knowledge base */
    .icon.link::before {content: "🔗";}
    /* web link */
    .icon.more::before {content: "⋯";}
    /* Code */
    .icon.code::before {content: "💻";}
    /* passwords */
    .icon.password::before {content: "🔑";}
    /* Images */
    .icon.image::before { content: "🖼️"; }
    /* airplane */
    .icon.flight::before { content: "✈️"; }
    /* vacation/holiday */
    .icon.vacation::before { content: "🏖️"; }
    /* more */

    /* Optional nice look for 'more' */
    .icon.more {
        font-size: 20px;
    }


.meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.name {
    font-weight: 650;
    font-size: 13.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.desc {
    font-size: 12px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* open-path small button (📂) */
.open-path {
    width: 44px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.05);
    text-decoration: none;
    font-size: 18px;
    color: var(--text);
}

    .open-path:hover {
        background: rgba(255,255,255,0.12);
    }

.hidden {
    display: none !important;
}

footer {
    margin-top: 18px;
    color: rgba(243,246,255,0.60);
    font-size: 12px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

kbd {
    font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    font-size: 11px;
    padding: 2px 6px;
    border: 1px solid rgba(255,255,255,0.18);
    border-bottom-width: 2px;
    border-radius: 6px;
    background: rgba(0,0,0,0.18);
    color: rgba(243,246,255,0.85);
}