/* ----- Page Top Bar ("/") ----- */
:root{ --tb-h:56px; }

.home-topbar{
    position: sticky; top: 0; z-index: 30;
    height: var(--tb-h);
    padding: 0 12px;
    background: rgba(15,20,45,.70);
    backdrop-filter: blur(8px);
    border: 1px solid var(--border);
    border-radius: 12px;
    display: grid;
    grid-template-columns: 1fr auto; /* center title + right actions */
    align-items: center;
    margin-bottom: 12px;
}

.home-topbar .tb-center{
    justify-self: center;
    color: var(--text);
    font-weight: 800;
    letter-spacing: .4px;
    font-size: 1.05rem;
}

.home-topbar .tb-actions{
    justify-self: end;
    display: flex; gap: 10px; align-items: center;
}

.tb-help{
    display: grid; place-items: center;
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: rgba(255,255,255,.06);
    color: var(--text);
}
.tb-help .rz-icon{ font-size: 1.15rem; }
.tb-help:hover{ filter: brightness(.95); }
.tb-help:active{ filter: brightness(.88) contrast(1.05); }

.tb-avatar{
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: linear-gradient(135deg, rgba(0,212,255,.14), rgba(0,168,204,.10));
    color: var(--text);
    font-weight: 700;
    display: grid; place-items: center;
}
.tb-avatar:hover{ filter: brightness(.95); }
.tb-avatar:active{ filter: brightness(.88) contrast(1.05); }

/* Make the page's sticky toolbar sit below the new top bar */
.home-shell .toolbar{
    top: calc(var(--tb-h) + 8px);
}

/* Center icon/text inside the two top-bar buttons */
.home-topbar .tb-actions button{
    display: inline-flex;          /* flex to center */
    align-items: center;
    justify-content: center;
    padding: 0;                    /* remove default button padding */
    line-height: 1;                /* avoid baseline shift */
    text-align: center;
    box-sizing: border-box;
}

/* Explicit sizing stays here so centering is perfect */
.tb-help,
.tb-avatar{
    width: 36px;
    height: 36px;
}

/* Tidy the help icon's metrics */
.tb-help .rz-icon{
    display: inline-block;
    line-height: 1;
    font-size: 1.15rem;
}

/* Tidy the avatar initials */
.tb-avatar{
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: .3px;
}

/* ---- Top-bar button colors ---- */
:root{
    --tb-btn-bg: rgba(255,255,255,.06);
    --tb-btn-bg-hover: rgba(0,212,255,.18);   /* from --accent */
    --tb-btn-bg-active: rgba(0,212,255,.26);
    --tb-icon: #e7eaf3;                        /* near your text */
    --tb-icon-dark: #0a0e27;                   /* page bg for inversion */
}

/* Help: accent-forward */
.tb-help{
    background: var(--tb-btn-bg);
    border: 1px solid var(--border);
    color: var(--accent);                      /* icon color */
}
.tb-help:hover{
    background: var(--tb-btn-bg-hover);
    color: var(--tb-icon-dark);                /* invert on hover */
    box-shadow: 0 0 0 2px rgba(0,212,255,.18) inset;
}
.tb-help:active{ background: var(--tb-btn-bg-active); }
.tb-help:focus-visible{
    outline: none;
    box-shadow: 0 0 0 2px rgba(0,212,255,.55);
}

/* Avatar: subtle accent, white initials */
.tb-avatar{
    border: 1px solid var(--border);
    background: linear-gradient(135deg, rgba(0,212,255,.14), rgba(0,168,204,.10));
    color: var(--text);                        /* initials */
}
.tb-avatar:hover{
    background: linear-gradient(135deg, rgba(0,212,255,.20), rgba(0,168,204,.16));
}
.tb-avatar:active{ filter: brightness(.92); }
/* CaterCrew title: subtle brand gradient */
:root{
    /* CaterCrew title gradient (azure-cyan) */
    --title-grad-from:#7EE8FF;  /* ~195° */
    --title-grad-mid:#38CFFF;   /* ~198° */
   --title-grad-to:#6FA8FF;  /* cyan → indigo */

}


.home-topbar .tb-center{
    background-image: linear-gradient(90deg,
    var(--title-grad-from),
    var(--title-grad-mid) 55%,
    var(--title-grad-to)
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
    letter-spacing: .4px;
font-size: x-large;
    /* crisp edges on dark glass without glow */
    filter: drop-shadow(0 1px 0 rgba(0,0,0,.28));
}

/* Fallback for older browsers that don't support text clipping */
@supports not (-webkit-background-clip: text){
    .home-topbar .tb-center{ color:#D9F4FF; } /* soft off-white instead of pure white */
}