:root{
    --bg:#050816;
    --panel:rgba(255,255,255,0.06);
    --border:rgba(255,255,255,0.08);
    --text:#f4f7ff;
    --muted:#96a0c2;
    --hover:rgba(255,255,255,0.10);
    --radius:26px;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:'Inter',sans-serif;
    background:var(--bg);
    color:var(--text);
    min-height:100vh;
    overflow-x:hidden;
}

.background-glow{
    position:fixed;
    inset:0;

    background:
        radial-gradient(circle at top left,#203a8f 0%,transparent 30%),
        radial-gradient(circle at bottom right,#101f52 0%,transparent 25%),
        radial-gradient(circle at center,#0a1029 0%,transparent 45%);

    z-index:-1;
}

.container{
    max-width:1600px;
    margin:auto;
    padding:40px 22px 100px;
}

.topbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    margin-bottom:30px;
    flex-wrap:wrap;
}

.title-area h1{
    font-size:4rem;
    font-weight:700;
    letter-spacing:-3px;
}

.title-area p{
    color:var(--muted);
    margin-top:6px;
}

.search-box{
    width:400px;
    max-width:100%;
}

.search-box input{
    width:100%;

    padding:18px 22px;

    border:none;
    outline:none;

    border-radius:20px;

    background:var(--panel);

    border:1px solid var(--border);

    color:white;

    font-size:1rem;

    backdrop-filter:blur(20px);
}

.search-box input::placeholder{
    color:#8e98bc;
}

.tabs{
    display:flex;
    gap:12px;
    margin-bottom:35px;
}

.tab{
    padding:14px 24px;

    border:none;

    border-radius:18px;

    background:rgba(255,255,255,0.05);

    border:1px solid rgba(255,255,255,0.08);

    color:white;

    font-weight:600;

    cursor:pointer;

    transition:0.2s ease;
}

.tab:hover{
    background:rgba(255,255,255,0.12);
}

.tab.active{
    background:white;
    color:black;
}

.section{
    margin-bottom:24px;

    background:rgba(255,255,255,0.05);

    border:1px solid rgba(255,255,255,0.08);

    border-radius:26px;

    overflow:hidden;

    backdrop-filter:blur(20px);
}

.section-header{
    padding:22px 24px;

    display:flex;
    justify-content:space-between;
    align-items:center;

    cursor:pointer;

    user-select:none;
}

.section-header h2{
    font-size:1rem;
    letter-spacing:0.5px;
}

.chevron{
    transition:0.2s ease;
    color:#aab3d3;
}

.section.collapsed .chevron{
    transform:rotate(-90deg);
}

.bookmarks{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
    gap:16px;

    padding:0 22px 22px;
}

.section.collapsed .bookmarks{
    display:none;
}

.card{
    display:flex;
    align-items:center;
    gap:14px;

    text-decoration:none;

    color:white;

    background:rgba(255,255,255,0.04);

    border:1px solid rgba(255,255,255,0.04);

    border-radius:20px;

    padding:16px;

    transition:0.2s ease;
}

.card:hover{
    transform:translateY(-2px);
    background:var(--hover);
}

.icon{
    width:44px;
    height:44px;

    border-radius:14px;

    background:rgba(255,255,255,0.08);

    display:flex;
    align-items:center;
    justify-content:center;

    flex-shrink:0;
}

.icon img{
    width:24px;
    height:24px;
}

.info h3{
    font-size:0.95rem;
    margin-bottom:4px;
}

.info p{
    font-size:0.8rem;
    color:var(--muted);
}

#addBookmarkBtn{
    position:fixed;

    right:28px;
    bottom:28px;

    width:68px;
    height:68px;

    border:none;

    border-radius:50%;

    background:white;

    color:black;

    font-size:2rem;

    cursor:pointer;

    box-shadow:0 10px 30px rgba(0,0,0,0.4);

    transition:0.2s ease;
}

#addBookmarkBtn:hover{
    transform:scale(1.05);
}

.modal{
    position:fixed;
    inset:0;

    background:rgba(0,0,0,0.65);

    display:flex;
    justify-content:center;
    align-items:center;

    padding:20px;
}

.hidden{
    display:none;
}

.modal-content{
    width:100%;
    max-width:500px;

    background:#101528;

    border:1px solid rgba(255,255,255,0.08);

    border-radius:28px;

    padding:28px;
}

.modal-content h2{
    margin-bottom:20px;
}

.modal-content input,
.modal-content textarea{
    width:100%;

    margin-bottom:14px;

    padding:16px 18px;

    border:none;
    outline:none;

    border-radius:16px;

    background:rgba(255,255,255,0.06);

    color:white;

    font-family:inherit;
}

.modal-content textarea{
    min-height:100px;
    resize:vertical;
}

.modal-buttons{
    display:flex;
    justify-content:flex-end;
    gap:12px;
    margin-top:10px;
}

.modal-buttons button{
    border:none;

    padding:14px 20px;

    border-radius:14px;

    cursor:pointer;

    font-weight:600;
}

#cancelBtn{
    background:rgba(255,255,255,0.08);
    color:white;
}

#saveBtn{
    background:white;
    color:black;
}

@media(max-width:700px){

    .title-area h1{
        font-size:2.8rem;
    }

    .bookmarks{
        grid-template-columns:1fr;
    }

}