/* =====================================================================
 * GetRemote - site styles
 * Uses design tokens from tokens.css (loaded first).
 * Organized by component, mobile-first.
 * ===================================================================== */

/* -------- 1. Base ---------------------------------------------------- */
body {
    background-color: var(--gr-bg);
    font-family: var(--gr-font-sans);
    color: var(--gr-text);
    font-size: var(--gr-text-base);
    line-height: var(--gr-leading-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Reset paragraph indent that was inherited from old global rule */
p { margin: 0 0 1rem; }

a {
    color: var(--gr-primary);
    text-decoration: none;
    transition: color var(--gr-transition-fast);
}
a:hover { color: var(--gr-primary-hover); }

/* -------- 2. Typography --------------------------------------------- */
h1, .h1 { font-size: var(--gr-text-3xl); font-weight: var(--gr-weight-bold);   line-height: var(--gr-leading-tight); color: var(--gr-text-strong); margin: 0 0 .75rem; letter-spacing: -0.015em; }
h2, .h2 { font-size: var(--gr-text-2xl); font-weight: var(--gr-weight-bold);   line-height: var(--gr-leading-tight); color: var(--gr-text-strong); margin: 0 0 .65rem; letter-spacing: -0.01em; }
h3, .h3 { font-size: var(--gr-text-xl);  font-weight: var(--gr-weight-semibold); line-height: var(--gr-leading-snug); color: var(--gr-text-strong); margin: 0 0 .5rem; }
h4, .h4 { font-size: var(--gr-text-lg);  font-weight: var(--gr-weight-semibold); line-height: var(--gr-leading-snug); color: var(--gr-text-strong); margin: 0 0 .5rem; }
h5, .h5 { font-size: var(--gr-text-base); font-weight: var(--gr-weight-semibold); line-height: var(--gr-leading-snug); color: var(--gr-text-strong); margin: 0 0 .4rem; }

.gr-section-heading {
    font-size: var(--gr-text-xl);
    font-weight: var(--gr-weight-semibold);
    color: var(--gr-text-strong);
    margin: var(--gr-space-6) 0 var(--gr-space-3);
    letter-spacing: -0.005em;
}

.gr-lead {
    font-size: var(--gr-text-md);
    color: var(--gr-text-muted);
    line-height: var(--gr-leading-relaxed);
}

.text-muted-2  { color: var(--gr-text-muted) !important; }
.text-subtle   { color: var(--gr-text-subtle) !important; }
.text-faint    { color: var(--gr-text-faint) !important; }

/* -------- 3. Buttons ------------------------------------------------- */
/* Shared button surface */
.btn-gr-primary,
.btn-gr-brand,
.btn-gr-outline,
.btn-gr-ghost,
.btn-gr-profile {
    --_pad-x: 1rem;
    --_pad-y: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: var(--_pad-y) var(--_pad-x);
    border-radius: var(--gr-radius-md);
    font-weight: var(--gr-weight-semibold);
    font-size: var(--gr-text-sm);
    line-height: 1.25;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color var(--gr-transition-fast),
                border-color var(--gr-transition-fast),
                color var(--gr-transition-fast),
                box-shadow var(--gr-transition-fast),
                transform 80ms ease;
    text-decoration: none;
    white-space: nowrap;
}
.btn-gr-primary:focus-visible,
.btn-gr-brand:focus-visible,
.btn-gr-outline:focus-visible,
.btn-gr-ghost:focus-visible,
.btn-gr-profile:focus-visible {
    outline: none;
    box-shadow: var(--gr-focus-ring);
}
.btn-gr-primary:active,
.btn-gr-brand:active,
.btn-gr-outline:active,
.btn-gr-ghost:active { transform: translateY(1px); }

/* Primary: dark slate - the default CTA */
.btn-gr-primary {
    background-color: var(--gr-primary);
    color: var(--gr-primary-on);
    border-color: var(--gr-primary);
}
.btn-gr-primary:hover {
    background-color: var(--gr-primary-hover);
    border-color: var(--gr-primary-hover);
    color: var(--gr-primary-on);
}

/* Brand: amber - reserved for premium/offer CTAs */
.btn-gr-brand {
    background-color: var(--gr-brand);
    color: var(--gr-brand-on);
    border-color: var(--gr-brand);
}
.btn-gr-brand:hover {
    background-color: var(--gr-brand-hover);
    border-color: var(--gr-brand-hover);
    color: var(--gr-brand-on);
}

/* Outline: secondary actions, navigation */
.btn-gr-outline {
    background-color: var(--gr-surface);
    color: var(--gr-text);
    border-color: var(--gr-border-strong);
}
.btn-gr-outline:hover {
    background-color: var(--gr-surface-alt);
    border-color: var(--gr-slate-400);
    color: var(--gr-text);
}

/* Ghost: tertiary, no fill */
.btn-gr-ghost {
    background-color: transparent;
    color: var(--gr-text-muted);
    border-color: transparent;
}
.btn-gr-ghost:hover {
    background-color: var(--gr-surface-alt);
    color: var(--gr-text);
}

/* Profile: navbar logged-in pill */
.btn-gr-profile {
    background-color: var(--gr-surface-alt);
    color: var(--gr-text);
    border-color: var(--gr-border);
    max-width: 160px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    line-height: 1.6;
}

/* Size variants */
.btn-gr-primary.btn-lg,
.btn-gr-brand.btn-lg,
.btn-gr-outline.btn-lg {
    --_pad-x: 1.25rem;
    --_pad-y: 0.7rem;
    font-size: var(--gr-text-base);
    border-radius: var(--gr-radius-md);
}
.btn-gr-primary.btn-sm,
.btn-gr-brand.btn-sm,
.btn-gr-outline.btn-sm {
    --_pad-x: 0.65rem;
    --_pad-y: 0.35rem;
    font-size: var(--gr-text-xs);
}

/* -------- 4. Cards --------------------------------------------------- */
.gr-card {
    background: var(--gr-surface);
    border: 1px solid var(--gr-border);
    border-radius: var(--gr-radius-lg);
    box-shadow: var(--gr-shadow-xs);
    padding: var(--gr-space-6);
}
@media (min-width: 768px) {
    .gr-card { padding: var(--gr-space-8); }
}

.gr-auth-card {
    max-width: 440px;
    margin: var(--gr-space-10) auto;
    background: var(--gr-surface);
    border: 1px solid var(--gr-border);
    border-radius: var(--gr-radius-lg);
    box-shadow: var(--gr-shadow-md);
    padding: var(--gr-space-6);
}
@media (min-width: 768px) {
    .gr-auth-card { padding: var(--gr-space-8); }
}
.gr-auth-card h1,
.gr-auth-card h2 {
    font-size: var(--gr-text-2xl);
    text-align: center;
    margin-bottom: var(--gr-space-2);
}
.gr-auth-card .gr-auth-sub {
    text-align: center;
    color: var(--gr-text-muted);
    font-size: var(--gr-text-sm);
    margin-bottom: var(--gr-space-6);
}
.gr-auth-card .form-label {
    font-weight: var(--gr-weight-medium);
    color: var(--gr-text);
    margin-bottom: 0.35rem;
    font-size: var(--gr-text-sm);
}
.gr-auth-card .form-control,
.gr-auth-card .form-select {
    padding: 0.65rem 0.85rem;
    border-radius: var(--gr-radius-md);
    border: 1px solid var(--gr-border-strong);
    background-color: var(--gr-surface);
    color: var(--gr-text);
    font-size: var(--gr-text-base);
    transition: border-color var(--gr-transition-fast), box-shadow var(--gr-transition-fast);
}
.gr-auth-card .form-control::placeholder { color: var(--gr-text-faint); }
.gr-auth-card .form-control:focus,
.gr-auth-card .form-select:focus {
    border-color: var(--gr-primary);
    box-shadow: var(--gr-focus-ring);
}
.gr-auth-card .gr-auth-foot {
    color: var(--gr-text-muted);
    font-size: var(--gr-text-sm);
    text-align: center;
    margin-top: var(--gr-space-4);
}
.gr-auth-card .gr-auth-foot a {
    color: var(--gr-text);
    font-weight: var(--gr-weight-medium);
}
.gr-auth-card .gr-auth-foot a:hover {
    color: var(--gr-primary);
    text-decoration: underline;
}

/* Page helper */
.gr-page {
    padding-top: var(--gr-space-6);
    padding-bottom: var(--gr-space-12);
}

/* -------- 5. Job cards (gr-job-card) -------------------------------- */
.gr-job-list { display: flex; flex-direction: column; gap: var(--gr-space-3); }

.gr-job-card {
    background-color: var(--gr-surface);
    border: 1px solid var(--gr-border);
    border-left: 3px solid var(--gr-priority-regular);
    border-radius: var(--gr-radius-lg);
    padding: var(--gr-space-5) var(--gr-space-6);
    box-shadow: var(--gr-shadow-xs);
    transition: box-shadow var(--gr-transition-base),
                border-color var(--gr-transition-base),
                transform var(--gr-transition-base);
    display: flex;
    flex-direction: column;
    gap: var(--gr-space-3);
}
.gr-job-card:hover {
    box-shadow: var(--gr-shadow-md);
    border-color: var(--gr-border-strong);
}

/* Priority - left-border accents (no pastel fills) */
.gr-job-card.priority-sponsor  { border-left-color: var(--gr-priority-sponsor); }
.gr-job-card.priority-featured { border-left-color: var(--gr-priority-featured); }
.gr-job-card.priority-regular  { border-left-color: var(--gr-priority-regular); }

/* Header row: avatar + title/byline + flags */
.gr-job-head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--gr-space-3);
}
.gr-job-avatar {
    width: 44px;
    height: 44px;
    border-radius: var(--gr-radius-md);
    color: #ffffff;
    font-weight: var(--gr-weight-bold);
    font-size: var(--gr-text-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    letter-spacing: -0.01em;
    box-shadow: var(--gr-shadow-xs);
}
.gr-job-head-main { min-width: 0; }   /* allow ellipsis */
.gr-job-title {
    font-size: var(--gr-text-lg);
    font-weight: var(--gr-weight-semibold);
    color: var(--gr-text-strong);
    line-height: var(--gr-leading-snug);
    margin: 0 0 2px;
    letter-spacing: -0.005em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    word-break: break-word;
}
.gr-job-byline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.3rem 0.45rem;
    font-size: var(--gr-text-sm);
    color: var(--gr-text-muted);
}
.gr-job-company { font-weight: var(--gr-weight-medium); color: var(--gr-text); }
.gr-job-time    { color: var(--gr-text-subtle); }
.gr-dot         { color: var(--gr-text-faint); }

.gr-job-flags {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-self: flex-start;
}

/* Meta strip: icon + value chips, inline */
.gr-job-meta {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 1rem;
    font-size: var(--gr-text-sm);
    color: var(--gr-text-muted);
}
.gr-job-meta li {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.gr-job-meta i {
    color: var(--gr-text-subtle);
    font-size: 0.9rem;
}
/* .gr-job-meta-salary span {
    color: var(--gr-text-strong);
    font-weight: var(--gr-weight-semibold);
} */
.gr-job-meta-salary i { color: var(--gr-success); }

/* Skill chips: compact, soft */
.gr-job-skills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}
.gr-skill {
    display: inline-flex;
    align-items: center;
    font-size: var(--gr-text-xs);
    font-weight: var(--gr-weight-medium);
    padding: 0.25rem 0.55rem;
    border-radius: var(--gr-radius-sm);
    background: var(--gr-slate-100);
    color: var(--gr-slate-700);
    border: 1px solid var(--gr-slate-200);
    line-height: 1.3;
}
.gr-skill-more {
    font-size: var(--gr-text-xs);
    font-weight: var(--gr-weight-medium);
    color: var(--gr-text-muted);
    padding: 0.25rem 0.4rem;
    line-height: 1.3;
}

/* Description: short lede, 2 lines max */
.gr-job-desc {
    font-size: var(--gr-text-sm);
    color: var(--gr-text-muted);
    line-height: var(--gr-leading-relaxed);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Apply CTA row */
.gr-job-foot {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    border-top: 1px solid var(--gr-border);
    padding-top: var(--gr-space-3);
    margin-top: var(--gr-space-1);
}
.gr-apply-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background-color: var(--gr-primary);
    color: var(--gr-primary-on);
    border: 1px solid var(--gr-primary);
    border-radius: var(--gr-radius-md);
    padding: 0.5rem 1rem;
    font-size: var(--gr-text-sm);
    font-weight: var(--gr-weight-semibold);
    cursor: pointer;
    transition: background-color var(--gr-transition-fast),
                border-color var(--gr-transition-fast),
                box-shadow var(--gr-transition-fast);
}
.gr-apply-btn:hover {
    background-color: var(--gr-primary-hover);
    border-color: var(--gr-primary-hover);
}
.gr-apply-btn:focus-visible {
    outline: none;
    box-shadow: var(--gr-focus-ring);
}
/* Locked variant for free users */
.gr-apply-btn-locked {
    background-color: var(--gr-brand);
    color: var(--gr-brand-on);
    border-color: var(--gr-brand);
}
.gr-apply-btn-locked:hover {
    background-color: var(--gr-brand-hover);
    border-color: var(--gr-brand-hover);
}

/* Mobile tuning */
@media (max-width: 575.98px) {
    .gr-job-card { padding: var(--gr-space-4); gap: var(--gr-space-3); }
    .gr-job-head { grid-template-columns: auto 1fr; gap: var(--gr-space-3); }
    .gr-job-flags {
        grid-column: 1 / -1;
        justify-content: flex-start;
        order: 3;
    }
    .gr-job-avatar { width: 38px; height: 38px; font-size: var(--gr-text-base); }
    .gr-job-title { font-size: var(--gr-text-md); }
    .gr-job-meta { gap: 0.3rem 0.75rem; font-size: var(--gr-text-xs); }
    .gr-job-foot { justify-content: stretch; }
    .gr-apply-btn { width: 100%; justify-content: center; }
}

/* Active-filter chips (shown when filters are applied) */
.gr-active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    margin: var(--gr-space-2) 0 var(--gr-space-3);
    font-size: var(--gr-text-sm);
}
.gr-active-filters-label {
    color: var(--gr-text-muted);
    font-weight: var(--gr-weight-medium);
    margin-right: 0.15rem;
}
.gr-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: var(--gr-primary-soft);
    color: var(--gr-primary);
    border: 1px solid #c7d2fe;
    border-radius: var(--gr-radius-pill);
    padding: 0.2rem 0.65rem;
    font-size: var(--gr-text-xs);
    font-weight: var(--gr-weight-semibold);
    max-width: 100%;
    overflow: hidden;
}
.gr-filter-chip > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 60vw;
}
.gr-filter-chip button {
    background: transparent;
    border: none;
    color: inherit;
    padding: 0;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity var(--gr-transition-fast);
}
.gr-filter-chip button:hover { opacity: 1; }
.gr-filter-chip button:focus-visible { outline: none; opacity: 1; }
.gr-clear-all-link {
    color: var(--gr-text-muted);
    font-size: var(--gr-text-xs);
    font-weight: var(--gr-weight-medium);
    background: transparent;
    border: none;
    padding: 0.2rem 0.4rem;
    cursor: pointer;
}
.gr-clear-all-link:hover { color: var(--gr-text); text-decoration: underline; }

/* -------- 6. Status pills ------------------------------------------- */
.gr-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: var(--gr-text-xs);
    font-weight: var(--gr-weight-semibold);
    padding: 0.25rem 0.6rem;
    border-radius: var(--gr-radius-pill);
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.gr-pill-sponsor  { background: var(--gr-brand-soft);      color: #92400e; }
.gr-pill-featured { background: var(--gr-secondary-soft);  color: #0e7490; }
.gr-pill-success  { background: var(--gr-success-soft);    color: var(--gr-success); }
.gr-pill-info     { background: var(--gr-info-soft);       color: var(--gr-info); }

/* -------- 7. Navbar -------------------------------------------------- */
.gr-navbar {
    background-color: var(--gr-surface);
    border-bottom: 1px solid var(--gr-border);
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
    backdrop-filter: saturate(140%) blur(8px);
}
.gr-navbar .navbar-brand {
    color: var(--gr-text-strong);
    font-size: var(--gr-text-md);
    font-weight: var(--gr-weight-semibold);
    letter-spacing: -0.01em;
}
.gr-navbar .nav-link {
    color: var(--gr-text-muted);
    font-weight: var(--gr-weight-medium);
    font-size: var(--gr-text-sm);
    padding: 0.45rem 0.75rem;
    border-radius: var(--gr-radius-sm);
    transition: color var(--gr-transition-fast), background-color var(--gr-transition-fast);
}
.gr-navbar .nav-link:hover,
.gr-navbar .nav-link:focus,
.gr-navbar .nav-link.active,
.gr-navbar .dropdown-toggle.show {
    color: var(--gr-text-strong);
    background-color: var(--gr-surface-alt);
}
.gr-navbar .dropdown-menu {
    border: 1px solid var(--gr-border);
    border-radius: var(--gr-radius-md);
    box-shadow: var(--gr-shadow-md);
    padding: 0.4rem;
    margin-top: 0.5rem;
    font-size: var(--gr-text-sm);
}
.gr-navbar .dropdown-item {
    border-radius: var(--gr-radius-sm);
    padding: 0.45rem 0.7rem;
    color: var(--gr-text-muted);
}
.gr-navbar .dropdown-item:hover,
.gr-navbar .dropdown-item:focus {
    background-color: var(--gr-surface-alt);
    color: var(--gr-text-strong);
}
.gr-navbar .navbar-toggler {
    padding: 0.35rem 0.55rem;
    border-radius: var(--gr-radius-sm);
}
.gr-navbar .navbar-toggler:focus {
    box-shadow: var(--gr-focus-ring);
}

/* -------- 8. Footer -------------------------------------------------- */
.gr-footer {
    background-color: var(--gr-slate-900);
    color: var(--gr-slate-300);
    margin-top: var(--gr-space-12);
}
.gr-footer .text-light { color: var(--gr-slate-300) !important; }
.gr-footer .text-muted-2 { color: var(--gr-slate-400) !important; }
.gr-footer .gr-footer-link {
    color: var(--gr-slate-300);
    text-decoration: none;
    margin: 0 0.3rem;
    transition: color var(--gr-transition-fast);
}
.gr-footer .gr-footer-link:hover { color: #ffffff; }
.gr-footer .gr-footer-sep { color: var(--gr-slate-600); }
.gr-footer .fw-semibold { color: #ffffff; }

/* -------- 9. Filter bar --------------------------------------------- */
.gr-filter-bar {
    background-color: var(--gr-surface);
    border: 1px solid var(--gr-border);
    border-radius: var(--gr-radius-lg);
    padding: var(--gr-space-3);
    box-shadow: var(--gr-shadow-xs);
    margin: var(--gr-space-4) 0 var(--gr-space-5);
}
.gr-filter-bar .form-select,
.gr-filter-bar .form-control {
    border-radius: var(--gr-radius-md);
    border: 1px solid var(--gr-border-strong);
    color: var(--gr-text);
    background-color: var(--gr-surface);
    padding: 0.55rem 0.85rem;
    font-size: var(--gr-text-sm);
    height: auto;
}
.gr-filter-bar .form-select:focus,
.gr-filter-bar .form-control:focus {
    border-color: var(--gr-primary);
    box-shadow: var(--gr-focus-ring);
}
.gr-filter-bar .input-group { flex-wrap: nowrap; }
.gr-filter-bar .input-group-text {
    background-color: var(--gr-surface);
    border: 1px solid var(--gr-border-strong);
    border-right: none;
    color: var(--gr-text-subtle);
    font-size: var(--gr-text-sm);
    padding-left: 0.85rem;
    padding-right: 0.65rem;
}
.gr-filter-bar .input-group .form-select { border-left: none; padding-left: 0.5rem; }

.gr-filter-bar .btn-clear {
    background-color: transparent;
    color: var(--gr-text-muted);
    border: 1px solid var(--gr-border-strong);
    border-radius: var(--gr-radius-md);
    padding: 0.55rem 1rem;
    font-weight: var(--gr-weight-medium);
    font-size: var(--gr-text-sm);
    transition: background-color var(--gr-transition-fast),
                color var(--gr-transition-fast),
                border-color var(--gr-transition-fast);
    cursor: pointer;
    width: 100%;
}
.gr-filter-bar .btn-clear:hover {
    background-color: var(--gr-surface-alt);
    border-color: var(--gr-slate-400);
    color: var(--gr-text);
}

/* -------- 10. Empty state ----------------------------------------- */
.gr-empty-state {
    text-align: center;
    padding: var(--gr-space-10) var(--gr-space-4);
    color: var(--gr-text-muted);
}
.gr-empty-state img { max-width: 140px; height: auto; opacity: 0.7; margin-bottom: var(--gr-space-3); }
.gr-empty-state h4 { color: var(--gr-text-strong); font-weight: var(--gr-weight-semibold); margin-bottom: var(--gr-space-1); }
.gr-empty-state p { font-size: var(--gr-text-sm); }

/* -------- 12. Forms (global polish) -------------------------------- */
.form-control,
.form-select {
    border-color: var(--gr-border-strong);
    border-radius: var(--gr-radius-md);
}
.form-control:focus,
.form-select:focus {
    border-color: var(--gr-primary);
    box-shadow: var(--gr-focus-ring);
}

/* -------- 11. Pagination ------------------------------------------- */
.pagination { gap: 0.25rem; }
.pagination .page-link {
    border-radius: var(--gr-radius-md);
    color: var(--gr-text);
    border: 1px solid var(--gr-border);
    font-size: var(--gr-text-sm);
    font-weight: var(--gr-weight-medium);
    padding: 0.4rem 0.75rem;
}
.pagination .page-link:hover {
    background-color: var(--gr-surface-alt);
    border-color: var(--gr-border-strong);
    color: var(--gr-text);
}
.pagination .active .page-link {
    background-color: var(--gr-primary);
    border-color: var(--gr-primary);
    color: var(--gr-primary-on);
}

/* -------- 15. Alerts (polish) -------------------------------------- */
.alert {
    border-radius: var(--gr-radius-md);
    border-width: 1px;
    font-size: var(--gr-text-sm);
    padding: 0.7rem 1rem;
}

/* ---------------------------------------------------------------
 * Header profile dropdown - clicking the username opens a menu
 * (History, Log out). Bootstrap 5 supplies the dropdown JS; we
 * just realign the existing .btn-gr-profile pill to work as a
 * <button> + caret instead of a static <span>.
 * --------------------------------------------------------------- */
.gr-profile-dropdown .btn-gr-profile {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    line-height: 1.25;
}
.gr-profile-dropdown .btn-gr-profile.dropdown-toggle::after {
    margin-left: 0.1rem;
    vertical-align: 0.15em;
    border-top-color: currentColor;
    opacity: 0.7;
}
.gr-profile-menu {
    --_radius: 12px;
    min-width: 11rem;
    border-radius: var(--_radius);
    border: 1px solid var(--gr-border);
    box-shadow: 0 14px 30px -18px rgba(15, 23, 42, 0.30);
    padding: 0.45rem;
    margin-top: 0.45rem !important;
}
.gr-profile-menu .dropdown-item {
    border-radius: 8px;
    padding: 0.55rem 0.7rem;
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--gr-text);
}
.gr-profile-menu .dropdown-item:hover,
.gr-profile-menu .dropdown-item:focus {
    background-color: var(--gr-surface-alt);
    color: var(--gr-text);
}
.gr-profile-menu .dropdown-item.text-danger:hover,
.gr-profile-menu .dropdown-item.text-danger:focus {
    background-color: rgba(220, 38, 38, 0.08);
    color: #b91c1c !important;
}
.gr-profile-menu .dropdown-divider {
    margin: 0.25rem 0;
}