.topbar{
    display: grid !important;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    margin-bottom: 16px;
}
.topbar > :first-child{
    justify-self: start;
}

.topbar > h1{
    justify-self: center;
    margin: 0;
    font-size: 22px;
}
.topbar-actions{
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}


.topbar .btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    padding: 10px 14px;
    border-radius: 10px;
    cursor: pointer;
}
.topbar .btn.primary{
    background: var(--accent);
    color: #fff;
}
.topbar .btn.ghost{
    background: transparent;
    border: 1px solid rgba(255,255,255,.15);
    color: var(--text);
}


.card{
    background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
    backdrop-filter: blur(6px);
}


.task-link:visited{
    color: var(--text);
}
.topbar{
    display: grid !important;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    margin-bottom: 16px;
}

.topbar-left{ justify-self: start; }
.topbar > h1{ justify-self: center; margin: 0; font-size: 22px; line-height: 1; }
.topbar-actions{
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 8px;
}


.topbar .btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    padding: 10px 14px;
    border-radius: 10px;
    cursor: pointer;
    white-space: nowrap;
}
.topbar .btn.primary{ background: var(--accent); color:#fff; }
.topbar .btn.ghost{ background: transparent; border:1px solid rgba(255,255,255,.15); color: var(--text); }


@media (max-width: 560px){
    .topbar{ grid-template-columns: 1fr; row-gap: 8px; }
    .topbar-left, .topbar-actions{ justify-self: center; }
}
/* Title perfectly centered between left & right buttons */
.topbar{
    display: grid !important;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    margin-bottom: 16px;
}

.topbar-left{ justify-self: start; }
.topbar-actions{
    justify-self: end;
    display: flex;
    gap: 8px;
}

.topbar > h1{
    justify-self: center;
    margin: 0;
    line-height: 1;
    text-align: center;
}