/* ============================================================
   GuardLink design system — refined corporate: gold on white
   Type: Manrope (single clean family — Upwork-clean system)
   Loaded globally after main.css; overrides template styles.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
    --gl-gold: #b8860b;
    --gl-gold-dark: #96690a;
    --gl-gold-strong: #7e5a08; /* AA-safe for white text & small text on white */
    --gl-gold-bright: #d8a32a;
    --gl-gold-tint: rgba(184, 134, 11, .08);
    --gl-ink: #1d2125;          /* near-black headings */
    --gl-ink-soft: #3a4150;     /* secondary text */
    --gl-muted: #5b6470;        /* muted labels */
    --gl-line: #e7e9ee;         /* visible hairline — Upwork-clean leans on borders */
    --gl-line-soft: #eef0f3;    /* softest divider */
    --gl-bg: #f4f5f6;           /* clean neutral canvas */
    --gl-card: #ffffff;
    --gl-danger: #b42318;
    --gl-danger-tint: #fef3f2;
    --gl-radius: 12px;
    --gl-radius-lg: 14px;
    /* restrained, near-flat shadows — Upwork-clean relies on borders, not float */
    --gl-shadow: 0 1px 2px rgba(16,24,40,.04);
    --gl-shadow-md: 0 1px 3px rgba(16,24,40,.07), 0 1px 2px rgba(16,24,40,.04);
    --gl-pop: 0 8px 24px -6px rgba(16,24,40,.12), 0 2px 6px rgba(16,24,40,.05);
    --gl-ease: cubic-bezier(.16,.84,.44,1);
    --gl-font-display: 'Manrope', 'Segoe UI', sans-serif;
    --gl-font-body: 'Manrope', -apple-system, 'Segoe UI', sans-serif;
}

body, .btn, input, select, textarea, label, p, a, span, li, td, th {
    font-family: var(--gl-font-body) !important;
}
h1, h2, h3, h4, h5, h6, .gl-title, .gl-tile .num, .profile-icon .name {
    font-family: var(--gl-font-display) !important;
    letter-spacing: -.015em;
}
body { color: var(--gl-ink); }

/* icon fonts must survive the body-font override */
.fa, .fas, .far, .fab, .fa-solid, .fa-regular, .fa-light, [class^="fa-"], [class*=" fa-"] {
    font-family: 'Font Awesome 6 Free' !important;
    font-weight: 900;
}
.fa-brands, .fab { font-family: 'Font Awesome 6 Brands' !important; }
.fa-regular, .far { font-weight: 400; }
.las, .la, [class^="la-"], [class*=" la-"] { font-family: 'Line Awesome Free' !important; font-weight: 900; }
.lab { font-family: 'Line Awesome Brands' !important; }

/* calm, branded focus — kills the black UA outline on sidebar/menu clicks */
a:focus, button:focus, .sidebar-menu-list__link:focus, .user-info__button:focus { outline: none; }
a:focus-visible, button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--gl-gold-tint), 0 0 0 1px var(--gl-gold);
    border-radius: 8px;
}

/* ---------------- Sidebar (both portals) ---------------- */
.sidebar-menu {
    background: #fff !important;
    border-right: 1px solid var(--gl-line);
}
.sidebar-menu__inner { background: #fff !important; }
.sidebar-logo { padding: 18px 16px 10px !important; }
.sidebar-menu__top {
    background: #fff !important;
    border: 1px solid var(--gl-line);
    border-radius: 10px;
    margin: 8px 14px 14px !important;
    padding: 12px 14px !important;
}
.sidebar-menu__top .shape { display: none !important; }
.sidebar-menu__top .icon {
    background: var(--gl-gold-tint) !important;
    color: var(--gl-gold) !important;
    border-radius: 8px;
}
.sidebar-menu__top .title { color: var(--gl-muted) !important; font-size: .75rem !important; text-transform: uppercase; letter-spacing: .04em; }
.sidebar-menu__top .number { color: var(--gl-ink) !important; font-weight: 700 !important; }
.sidebar-menu-list__item { margin: 2px 10px !important; border-radius: 8px !important; }
.sidebar-menu-list__link, .sidebar-submenu-list__link {
    color: var(--gl-muted) !important;
    font-weight: 500 !important;
    border-radius: 8px !important;
    transition: .12s;
}
.sidebar-menu-list__link .icon { color: var(--gl-muted) !important; }
.sidebar-menu-list__item:hover > .sidebar-menu-list__link,
.sidebar-menu-list__item:hover > .sidebar-menu-list__link .icon { color: var(--gl-ink) !important; background: transparent; }
.sidebar-menu-list__item.active {
    background: var(--gl-gold-tint) !important;
}
.sidebar-menu-list__item.active > .sidebar-menu-list__link,
.sidebar-menu-list__item.active > .sidebar-menu-list__link .icon,
.sidebar-menu-list__item.active > .sidebar-menu-list__link .text {
    background: transparent !important;
    color: var(--gl-gold) !important;
    font-weight: 600 !important;
}
/* hide the template's left indicator, keep the dropdown chevron */
.sidebar-menu-list__item.active > .sidebar-menu-list__link::before { display: none !important; }
.sidebar-menu-list__item:not(.has-dropdown).active > .sidebar-menu-list__link::after { display: none !important; }
.dashboard .sidebar-menu-list__item.has-dropdown > a::after { color: var(--gl-muted); }
.dashboard .sidebar-menu-list__item.has-dropdown.active > a::after { color: var(--gl-gold) !important; }
/* template forces the dropdown chevron white on hover -> invisible on the white sidebar. keep it visible. */
.dashboard .sidebar-menu-list__link:hover::after { color: var(--gl-ink) !important; }
.dashboard .sidebar-menu-list__item.has-dropdown.active > a:hover::after { color: var(--gl-gold) !important; }

/* submenu: tinted states, never solid gold */
.sidebar-submenu { background: transparent !important; }
.dashboard .sidebar-submenu-list__link {
    color: var(--gl-muted) !important;
    border-radius: 8px !important;
}
.dashboard .sidebar-submenu-list__link::before { border-color: rgba(94, 100, 112, .45) !important; background: transparent !important; }
.dashboard .sidebar-submenu-list__link:hover {
    background: var(--gl-gold-tint) !important;
    color: var(--gl-ink) !important;
}
.dashboard .sidebar-submenu-list__link:hover::before { border-color: var(--gl-gold) !important; }
.sidebar-submenu-list__item.active .sidebar-submenu-list__link,
.sidebar-submenu-list__item .sidebar-submenu-list__link.active {
    background: var(--gl-gold-tint) !important;
    color: var(--gl-gold) !important;
    font-weight: 600 !important;
}
.sidebar-submenu-list__item.active .sidebar-submenu-list__link::before {
    border-color: var(--gl-gold) !important;
    background: var(--gl-gold) !important;
}

/* dashboard content area */
.dashboard, .dashboard-wrapper, .dashboard-body, body.dashboard, .body-wrapper { background: var(--gl-bg) !important; }

/* ---------------- Topbar ---------------- */
.dashboard .dashboard-header {
    margin: 0 !important;
    padding: 0 30px !important;
    background: #fff !important;
    border-radius: 0 !important;
    border-bottom: 1px solid var(--gl-line);
}
.dashboard .dashboard-header__inner { padding: 13px 0 !important; }
.dashboard .dashboard-header__left .title {
    font-family: var(--gl-font-display) !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: var(--gl-ink) !important;
    letter-spacing: -.01em;
}
.dashboard .user-info__right { gap: 18px !important; align-items: center; }
.dashboard .user-info__right .notification-link {
    width: 38px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    color: var(--gl-muted) !important;
    font-size: 19px !important;
    transition: .12s;
}
.dashboard .user-info__right .notification-link:hover { background: var(--gl-gold-tint); color: var(--gl-gold) !important; }
.dashboard .user-info__right .notification-link .notification-number { top: 1px; right: 1px; }
.dashboard .user-info__thumb { box-shadow: 0 0 0 1px var(--gl-line); }
.dashboard .user-info__button::before { border-color: #fff !important; }

/* ---------------- User dropdown ---------------- */
.dashboard .user-info .user-info-dropdown {
    background: #fff !important;
    width: 268px !important;
    border-radius: 14px !important;
    border: 1px solid var(--gl-line) !important;
    box-shadow: var(--gl-pop) !important;
    padding: 8px !important;
    overflow: hidden;
}
.user-info-dropdown .profile-icon {
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px;
    text-align: left;
    padding: 10px 12px 12px;
    border-bottom: 1px solid var(--gl-line);
    margin-bottom: 6px;
}
.user-info-dropdown .profile-icon img {
    width: 40px !important; height: 40px !important;
    border-radius: 50% !important;
    object-fit: cover;
    margin: 0 !important;
    box-shadow: 0 0 0 1px var(--gl-line);
}
.user-info-dropdown .profile-icon .name {
    margin: 0 !important;
    font-size: .95rem !important;
    font-weight: 700 !important;
    color: var(--gl-ink);
    line-height: 1.25;
}
.user-info-dropdown .profile-icon .role {
    font-size: .7rem !important;
    font-weight: 600;
    color: var(--gl-gold-strong) !important;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.dashboard .user-info .user-info-dropdown__link {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 9px 12px !important;
    border-radius: 8px !important;
    color: var(--gl-ink) !important;
    font-weight: 500 !important;
    font-size: .9rem;
    transition: .12s;
}
.dashboard .user-info .user-info-dropdown__link .icon {
    color: var(--gl-muted);
    font-size: 1.1rem;
    line-height: 1;
    display: inline-flex;
}
.dashboard .user-info .user-info-dropdown__link:hover,
.dashboard .user-info .user-info-dropdown__link.active {
    background: var(--gl-gold-tint) !important;
    color: var(--gl-ink) !important;
}
.dashboard .user-info .user-info-dropdown__link:hover .icon,
.dashboard .user-info .user-info-dropdown__link.active .icon { color: var(--gl-gold); }
.dashboard .user-info .user-info-dropdown__link.logout { color: var(--gl-danger) !important; }
.dashboard .user-info .user-info-dropdown__link.logout .icon { color: var(--gl-danger); }
.dashboard .user-info .user-info-dropdown__link.logout:hover {
    background: var(--gl-danger-tint) !important;
    color: var(--gl-danger) !important;
}
.dashboard .user-info .user-info-dropdown__link.logout:hover .icon { color: var(--gl-danger); }

/* ---------------- Cards / tiles (gl-dash) ---------------- */
.gl-dash { color: var(--gl-ink); }
.gl-dash .gl-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }
.gl-dash .gl-head h4 { margin: 0; font-weight: 800; letter-spacing: -.02em; }
.gl-dash .gl-head p { margin: 4px 0 0; color: var(--gl-muted); font-size: .9rem; }
.gl-dash .gl-cta {
    background: var(--gl-gold-strong); color: #fff; border: none; border-radius: 8px;
    padding: 11px 20px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; transition: .12s;
}
.gl-dash .gl-cta:hover { background: #634706; color: #fff; }
.gl-dash .gl-cta.ghost { background: #fff; color: var(--gl-ink); border: 1px solid var(--gl-line); }
.gl-dash .gl-cta.ghost:hover { border-color: var(--gl-ink); }

.gl-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 24px; }
@media (max-width: 991px) { .gl-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .gl-tiles { grid-template-columns: 1fr; } }
.gl-tile {
    background: var(--gl-card); border: 1px solid var(--gl-line); border-radius: var(--gl-radius);
    padding: 18px; box-shadow: var(--gl-shadow); display: flex; align-items: center; gap: 14px;
    text-decoration: none; color: inherit; transition: .12s;
}
.gl-tile:hover { border-color: #d7d9de; color: inherit; }
.gl-tile .ico {
    width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem; background: var(--gl-gold-tint); color: var(--gl-gold); flex: 0 0 42px;
}
.gl-tile.navy .ico { background: #f1f2f4; color: var(--gl-ink); }
.gl-tile .num { font-size: 1.25rem; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }
.gl-tile .lbl { color: var(--gl-muted); font-size: .8rem; }

.gl-card { background: var(--gl-card); border: 1px solid var(--gl-line); border-radius: var(--gl-radius-lg); box-shadow: var(--gl-shadow); margin-bottom: 22px; }
.gl-card .gl-card-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 24px; border-bottom: 1px solid var(--gl-line-soft); }
.gl-card .gl-card-head h6 { margin: 0; font-weight: 700; font-size: 1rem; letter-spacing: -.02em; color: var(--gl-ink); }
.gl-card .gl-card-head a { font-size: .82rem; color: var(--gl-gold-strong); text-decoration: none; font-weight: 600; }
.gl-card .gl-card-head a:hover { text-decoration: underline; }
.gl-card .gl-card-body { padding: 20px 24px; }

.gl-list { list-style: none; margin: 0; padding: 0; }
.gl-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--gl-line-soft); }
.gl-list li:last-child { border-bottom: 0; }
.gl-list .t { font-weight: 600; font-size: .9rem; }
.gl-list .s { color: var(--gl-muted); font-size: .8rem; }
.gl-list a.t { color: var(--gl-ink); text-decoration: none; }
.gl-list a.t:hover { color: var(--gl-gold); }
.gl-empty { text-align: center; color: var(--gl-muted); padding: 26px 0; font-size: .9rem; }
.gl-chart-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 240px; text-align: center; color: var(--gl-muted); }
.gl-chart-empty i { font-size: 2.4rem; color: #d7d9de; }
.gl-chart-empty span { font-size: .9rem; max-width: 340px; }

/* ---------------- Premium dashboard: hero + stat cards ---------------- */
/* Upwork-clean light header: title sits on the page, balances are clean cards */
.gl-hero {
    position: relative;
    background: transparent; border: 0; box-shadow: none; border-radius: 0;
    padding: 10px 2px 2px; margin-bottom: 28px;
    display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; flex-wrap: wrap;
}
.gl-hero__glow { display: none !important; }
.gl-hero__left { flex: 1 1 340px; }
.gl-hero__eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gl-gold-strong); }
.gl-hero__left h3 { font-family: var(--gl-font-display); color: var(--gl-ink); font-weight: 800; letter-spacing: -.04em; margin: 11px 0 7px; font-size: 2.25rem; line-height: 1.04; }
.gl-hero__left p { color: var(--gl-muted); margin: 0 0 20px; font-size: .98rem; }
.gl-hero__cta { display: flex; gap: 11px; flex-wrap: wrap; }
.gl-hero__btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: 12px; font-weight: 600; font-size: .89rem; text-decoration: none; transition: transform .35s var(--gl-ease), box-shadow .35s var(--gl-ease), background .2s; background: var(--gl-gold-strong); color: #fff; border: 1px solid transparent; box-shadow: 0 1px 2px rgba(126,90,8,.22), 0 7px 18px -5px rgba(126,90,8,.4); }
.gl-hero__btn:hover { background: #6b4d07; color: #fff; transform: translateY(-2px); box-shadow: 0 2px 5px rgba(126,90,8,.22), 0 12px 26px -6px rgba(126,90,8,.46); }
.gl-hero__btn:active { transform: translateY(0) scale(.99); }
.gl-hero__btn.ghost { background: #fff; color: var(--gl-ink); border-color: var(--gl-line); box-shadow: var(--gl-shadow); }
.gl-hero__btn.ghost:hover { color: var(--gl-ink); background: #fff; transform: translateY(-2px); box-shadow: var(--gl-shadow-md); }
.gl-hero__figures { display: flex; gap: 14px; flex-wrap: wrap; }
.gl-hero__fig { display: block; background: var(--gl-card); border: 1px solid var(--gl-line); border-radius: var(--gl-radius-lg); padding: 16px 22px; text-decoration: none; transition: transform .45s var(--gl-ease), box-shadow .45s var(--gl-ease); min-width: 170px; box-shadow: var(--gl-shadow); }
.gl-hero__fig:hover { transform: translateY(-4px); box-shadow: var(--gl-shadow-md); }
.gl-hero__fig .lbl { display: block; color: var(--gl-muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .09em; margin-bottom: 8px; font-weight: 600; }
.gl-hero__fig .val { font-family: var(--gl-font-display); color: var(--gl-ink); font-weight: 800; font-size: 1.65rem; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.gl-hero__fig.gold { background: linear-gradient(140deg, rgba(184,134,11,.11), rgba(184,134,11,.035)); border-color: rgba(184,134,11,.22); }
.gl-hero__fig.gold .val { color: var(--gl-gold-strong); }

.gl-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 22px; }
@media (max-width: 767px) { .gl-stats { grid-template-columns: 1fr; } }
.gl-stat { display: block; background: var(--gl-card); border: 1px solid var(--gl-line); border-radius: var(--gl-radius-lg); padding: 24px; text-decoration: none; color: inherit; transition: transform .45s var(--gl-ease), box-shadow .45s var(--gl-ease); position: relative; box-shadow: var(--gl-shadow); }
.gl-stat:hover { color: inherit; transform: translateY(-4px); box-shadow: var(--gl-shadow-md); }
.gl-stat__ico { position: absolute; top: 20px; right: 20px; width: 44px; height: 44px; border-radius: 13px; background: linear-gradient(140deg, rgba(184,134,11,.14), rgba(184,134,11,.04)); color: var(--gl-gold-strong); display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; box-shadow: inset 0 0 0 1px rgba(184,134,11,.14), inset 0 1px 0 rgba(255,255,255,.5); }
.gl-stat__num { display: block; font-family: var(--gl-font-display); font-size: 2.5rem; font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--gl-ink); margin-top: 6px; font-variant-numeric: tabular-nums; }
.gl-stat__lbl { display: block; color: var(--gl-muted); font-size: .82rem; font-weight: 600; letter-spacing: .005em; margin-top: 7px; }

.gl-quick { display: grid; grid-template-columns: repeat(2, 1fr); gap: 11px; }
.gl-quick a {
    display: flex; align-items: center; gap: 11px; padding: 13px 15px; border: 1px solid var(--gl-line);
    border-radius: 13px; color: var(--gl-ink); text-decoration: none; font-weight: 600; font-size: .87rem;
    background: var(--gl-card); box-shadow: var(--gl-shadow);
    transition: transform .35s var(--gl-ease), box-shadow .35s var(--gl-ease), border-color .2s;
}
.gl-quick a:hover { color: var(--gl-ink); border-color: rgba(184,134,11,.3); transform: translateY(-2px); box-shadow: var(--gl-shadow-md); }
.gl-quick a i { color: var(--gl-gold-strong); font-size: 1.05rem; width: 30px; height: 30px; flex: 0 0 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(140deg, rgba(184,134,11,.13), rgba(184,134,11,.04)); box-shadow: inset 0 0 0 1px rgba(184,134,11,.12); }

/* ---------------- Auth (login + register) ---------------- */
.gl-auth {
    min-height: 100vh; background: #fff; display: flex; flex-direction: column;
}
.gl-auth .gl-topbar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 20px 40px; border-bottom: 1px solid var(--gl-line);
}
.gl-auth .gl-topbar img { max-height: 38px; }
.gl-auth .gl-topbar a.alt { color: var(--gl-muted); font-size: .9rem; text-decoration: none; }
.gl-auth .gl-topbar a.alt b { color: var(--gl-gold-strong); }
.gl-auth .gl-authwrap { flex: 1; display: flex; align-items: center; justify-content: center; padding: 48px 16px; background: var(--gl-bg); }
.gl-auth .gl-formbox { width: 100%; max-width: 480px; }
.gl-auth .gl-formcard {
    background: #fff; border: 1px solid var(--gl-line); border-radius: 16px;
    box-shadow: var(--gl-shadow); padding: 36px;
}
.gl-auth h3.gl-title { font-weight: 800; letter-spacing: -.02em; text-align: center; margin-bottom: 6px; }
.gl-auth .gl-sub { color: var(--gl-muted); font-size: .92rem; text-align: center; margin-bottom: 24px; }
.gl-auth .gl-switch { display: flex; background: #f1f2f4; border-radius: 10px; padding: 4px; margin-bottom: 26px; }
.gl-auth .gl-switch a {
    flex: 1; text-align: center; padding: 10px 6px; border-radius: 8px; font-weight: 600;
    font-size: .88rem; color: var(--gl-muted); text-decoration: none; transition: .12s;
}
.gl-auth .gl-switch a.on { background: #fff; color: var(--gl-ink); box-shadow: 0 1px 3px rgba(17,20,24,.12); }
.gl-auth .form--label, .gl-auth .form-label { font-weight: 600; font-size: .85rem; margin-bottom: 6px; color: var(--gl-ink); }
.gl-auth .form--control, .gl-auth .form-control, .gl-auth .form-select {
    min-height: 48px; border-radius: 9px; border: 1px solid #d7d9de; font-size: .95rem;
}
.gl-auth .form--control:focus, .gl-auth .form-control:focus, .gl-auth .form-select:focus {
    border-color: var(--gl-gold); box-shadow: 0 0 0 3px var(--gl-gold-tint);
}
.gl-auth .gl-submit {
    width: 100%; background: var(--gl-gold); border: none; color: #fff; min-height: 50px;
    border-radius: 9px; font-weight: 700; font-size: 1rem; margin-top: 8px; transition: .12s;
}
.gl-auth .gl-submit:hover { background: var(--gl-gold-dark); }
.gl-auth .gl-meta { display: flex; justify-content: space-between; align-items: center; font-size: .86rem; margin: 10px 0 2px; }
.gl-auth .gl-meta a { color: var(--gl-gold-strong); text-decoration: none; font-weight: 600; }
.gl-auth .gl-bottom { text-align: center; color: var(--gl-muted); font-size: .9rem; margin-top: 20px; }
.gl-auth .gl-bottom a { color: var(--gl-gold-strong); font-weight: 700; text-decoration: none; }
.gl-auth .gl-trust { display: flex; justify-content: center; gap: 22px; margin-top: 26px; color: var(--gl-muted); font-size: .8rem; flex-wrap: wrap; }
.gl-auth .gl-trust span { display: inline-flex; align-items: center; gap: 6px; }
.gl-auth .gl-trust i { color: var(--gl-gold); }
.gl-auth .form--check .form-check-input:checked,
.gl-auth .form-check-input:checked { background-color: var(--gl-gold); border-color: var(--gl-gold); }

/* agree checkbox row: checkbox + text on one line, text wraps beside it */
.gl-auth .form--check { display: flex; align-items: flex-start; }
.gl-auth .form--check .form-check-input {
    flex: 0 0 17px; width: 17px; height: 17px; margin-top: 2px; border-radius: 4px;
    border: 1.5px solid #c9ccd3;
}
.gl-auth .form--check .form-check-label {
    width: auto; flex: 1; padding-left: 10px; margin: 0;
    font-weight: 500; font-size: .86rem; color: var(--gl-muted); line-height: 1.5;
}
.gl-auth .form--check .form-check-label a { color: var(--gl-gold-strong); font-weight: 600; text-decoration: none; }

@media (max-width: 575px) {
    .gl-auth .gl-topbar { padding: 14px 16px; gap: 10px; }
    .gl-auth .gl-topbar img { max-height: 30px; }
    .gl-auth .gl-formcard { padding: 24px 18px; }
    .gl-auth .gl-authwrap { padding: 28px 12px; }
    .dashboard .dashboard-header { padding: 0 16px !important; }
}

/* ---------------- Auth: premium split-screen ---------------- */
.gl-auth--split { display: grid; grid-template-columns: 1.04fr 1fr; min-height: 100vh; }

/* LEFT: branded panel */
.gl-brandpanel {
    position: relative; overflow: hidden; color: #fff;
    background: linear-gradient(155deg, #14161a 0%, #1f242c 60%, #2a2117 100%);
    padding: 52px 56px; display: flex; flex-direction: column; justify-content: space-between;
}
.gl-brandpanel__glow {
    position: absolute; width: 520px; height: 520px; border-radius: 50%;
    top: -160px; right: -160px; pointer-events: none;
    background: radial-gradient(circle, rgba(184,134,11,.40) 0%, rgba(184,134,11,0) 70%);
}
.gl-brandpanel > *:not(.gl-brandpanel__glow) { position: relative; z-index: 1; }
.gl-brandmark {
    display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none;
    font-family: var(--gl-font-display); font-weight: 800; font-size: 1.3rem; letter-spacing: -.01em;
}
.gl-brandmark i { color: var(--gl-gold); font-size: 1.5rem; }
.gl-brandpanel__mid { max-width: 460px; }
.gl-brandpanel__mid h2 {
    font-family: var(--gl-font-display); font-weight: 800; font-size: 2.3rem; line-height: 1.12;
    letter-spacing: -.025em; margin: 0 0 14px; color: #fff;
}
.gl-brandpanel__mid .lead { color: rgba(255,255,255,.66); font-size: 1.02rem; line-height: 1.6; margin: 0 0 30px; }
.gl-featlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.gl-featlist li { display: flex; align-items: flex-start; gap: 14px; }
.gl-featlist .ic {
    flex: 0 0 40px; width: 40px; height: 40px; border-radius: 11px;
    background: rgba(184,134,11,.16); color: var(--gl-gold);
    display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem;
}
.gl-featlist .tx { font-size: .9rem; color: rgba(255,255,255,.62); line-height: 1.45; }
.gl-featlist .tx b { display: block; color: #fff; font-weight: 700; font-size: .96rem; margin-bottom: 1px; }
.gl-brandpanel__bottom { color: rgba(255,255,255,.5); font-size: .82rem; }
.gl-brandpanel__bottom i { color: var(--gl-gold); }

/* RIGHT: form side */
.gl-auth__form { display: flex; flex-direction: column; padding: 26px 40px; background: #fff; }
.gl-auth__formtop { display: flex; justify-content: flex-end; align-items: center; gap: 12px; }
.gl-auth__formtop .gl-auth__logo { margin-right: auto; display: none; }
.gl-auth__formtop .gl-auth__logo img { max-height: 32px; }
.gl-auth__formtop .alt { color: var(--gl-muted); font-size: .88rem; text-decoration: none; }
.gl-auth__formtop .alt b { color: var(--gl-gold-strong); }
.gl-auth__form .gl-formbox { margin: auto; width: 100%; max-width: 430px; padding: 22px 0; }
.gl-auth--split .gl-formcard { border: none; box-shadow: none; padding: 0; background: transparent; }
.gl-auth--split .gl-title { text-align: left; font-size: 1.7rem; }
.gl-auth--split .gl-sub { text-align: left; }

@media (max-width: 991px) {
    .gl-auth--split { grid-template-columns: 1fr; }
    .gl-brandpanel { display: none; }
    .gl-auth__formtop .gl-auth__logo { display: inline-flex; }
    .gl-auth__form { padding: 18px 16px 32px; }
}

/* buttons elsewhere keep brand (AA-safe fill, white text) */
.btn--base, .dashboard .cmn-btn, .dashboard .site-btn { background: var(--gl-gold) !important; color: #fff !important; border: none !important; border-radius: 9px !important; font-weight: 700 !important; padding: 11px 22px !important; transition: background .15s ease !important; }
.btn--base:hover, .dashboard .cmn-btn:hover, .dashboard .site-btn:hover { background: var(--gl-gold-dark) !important; color: #fff !important; }
/* file-input button + hint text (KYC, uploads, etc.) — kill the brown native button and the monospace <pre> hint */
.dashboard input[type="file"]::file-selector-button { background: var(--gl-gold-tint) !important; color: var(--gl-gold-strong) !important; border: none !important; border-radius: 7px !important; font-weight: 600 !important; padding: 8px 14px !important; margin-right: 12px !important; cursor: pointer; transition: background .15s ease; }
.dashboard input[type="file"]::file-selector-button:hover { background: rgba(184,134,11,.16) !important; }
.dashboard .custom--card pre, .dashboard .form-group pre, .dashboard small pre, .dashboard pre { font-family: var(--gl-font-body) !important; color: var(--gl-muted) !important; font-size: .8rem !important; background: transparent !important; border: none !important; padding: 0 !important; margin: 7px 0 0 !important; white-space: normal !important; }

/* chat bubbles: own = gold tint, other = neutral. Override the template's
   light-blue ::after/::before tails so no blue artifact remains. */
.single-message.message--right .message-content { background: var(--gl-gold-tint) !important; }
.single-message.message--right .message-content::after,
.single-message.message--right .message-content::before { background: var(--gl-gold-tint) !important; }
.single-message.message--left .message-content { background: #f1f2f4 !important; }
.single-message.message--left .message-content::after,
.single-message.message--left .message-content::before { background: #f1f2f4 !important; }
.single-message.message--left.escrow .message-content { background: var(--gl-gold-tint) !important; border-left: 3px solid var(--gl-gold); }

/* withdraw method icon chip (replaces blank method image) */
.glf-paychip {
    width: 46px; height: 46px; flex: 0 0 46px;
    border-radius: 10px; background: var(--gl-gold-tint) !important;
    display: inline-flex !important; align-items: center; justify-content: center;
    overflow: visible;
}
.glf-paychip i { color: var(--gl-gold); font-size: 1.4rem; line-height: 1; }
.payment-item-left { display: flex; align-items: center; gap: 12px; }

/* quick-amount preset buttons */
.glf-quickamt { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.glf-quickamt button {
    flex: 1 1 auto; min-width: 52px;
    padding: 8px 12px; border-radius: 8px;
    border: 1px solid var(--gl-line); background: #fff;
    color: var(--gl-ink); font-weight: 600; font-size: .85rem;
    font-family: var(--gl-font-body, inherit); transition: .12s; cursor: pointer;
}
.glf-quickamt button:hover {
    border-color: var(--gl-gold); color: var(--gl-gold-strong);
    background: var(--gl-gold-tint);
}

/* no blue: primary -> gold; info -> neutral slate (keep semantic distinction) */
.badge--info, .badge.badge--info { background: rgba(71,84,103,.12) !important; color: #475467 !important; }
.badge--primary, .badge.badge--primary { background: var(--gl-gold-tint) !important; color: var(--gl-gold-strong) !important; }
.text--info { color: #475467 !important; }
.text--primary { color: var(--gl-gold-strong) !important; }
.text-primary { color: var(--gl-gold-strong) !important; }

/* on-brand alerts: kill the template blue (--info) and purple (--primary) */
.alert--info, .alert--primary {
    border-color: rgba(184, 134, 11, .35) !important;
    background-color: var(--gl-gold-tint) !important;
}
.alert--info .alert__icon, .alert--info .alert__title,
.alert--primary .alert__icon, .alert--primary .alert__title { color: var(--gl-gold-strong) !important; }
.alert--info a, .alert--primary a { color: var(--gl-gold-strong) !important; font-weight: 700; text-decoration: underline; }

/* dashboard alerts: stack title above description (template makes .alert a flex row) */
.gl-dash .alert { display: block; border: 1px solid var(--gl-line); border-radius: var(--gl-radius); padding: 14px 18px; margin-bottom: 22px; }
.gl-dash .alert--info, .gl-dash .alert--primary { border-color: rgba(184, 134, 11, .35); }
.gl-dash .alert--warning { border-color: rgba(186, 117, 23, .35); }
.gl-dash .alert--danger { border-color: rgba(180, 35, 24, .3); }
.gl-dash .alert__title { display: block; margin-bottom: 3px; font-size: .95rem; font-weight: 700; }
.gl-dash .alert__desc { display: block; line-height: 1.5; }
.gl-dash .alert__desc a { font-weight: 700; text-decoration: underline; }

/* Bootstrap-native alerts (single-dash) also rendered blue — bring on-brand */
.alert-primary { background-color: var(--gl-gold-tint) !important; border-color: rgba(184, 134, 11, .35) !important; color: var(--gl-gold-strong) !important; }
.alert-primary a, .alert-primary .alert-link { color: #634706 !important; font-weight: 700; }
.alert-info { background-color: rgba(71, 84, 103, .10) !important; border-color: rgba(71, 84, 103, .28) !important; color: #475467 !important; }
.alert-info a, .alert-info .alert-link { color: #344054 !important; font-weight: 700; }

/* ============================================================
   Portal form system — premium, aligned inputs (Phase 2)
   Scoped to .dashboard so the public site (gl-front) and auth
   (gl-auth) keep their own styles. Mirrors the auth input look.
   ============================================================ */
.dashboard .form--control,
.dashboard .form-control,
.dashboard .form-select,
.dashboard select,
.dashboard input[type="text"],
.dashboard input[type="email"],
.dashboard input[type="number"],
.dashboard input[type="password"],
.dashboard input[type="search"],
.dashboard input[type="tel"],
.dashboard input[type="url"],
.dashboard input[type="date"],
.dashboard input[type="time"],
.dashboard textarea {
    min-height: 46px;
    border: 2px solid transparent;
    border-radius: 12px;
    background-color: #f4f4f6;
    color: var(--gl-ink);
    font-size: .92rem;
    padding: 10px 13px;
    box-shadow: none;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.dashboard input[type="text"]:hover:not(:focus):not(:disabled),
.dashboard input[type="email"]:hover:not(:focus):not(:disabled),
.dashboard input[type="number"]:hover:not(:focus):not(:disabled),
.dashboard input[type="date"]:hover:not(:focus):not(:disabled),
.dashboard input[type="time"]:hover:not(:focus):not(:disabled) { background-color: #eceef1; }
.dashboard input[type="text"]:focus,
.dashboard input[type="email"]:focus,
.dashboard input[type="number"]:focus,
.dashboard input[type="password"]:focus,
.dashboard input[type="search"]:focus,
.dashboard input[type="tel"]:focus,
.dashboard input[type="url"]:focus,
.dashboard input[type="date"]:focus,
.dashboard input[type="time"]:focus {
    background-color: #fff;
    border-color: var(--gl-gold);
    box-shadow: 0 0 0 4px var(--gl-gold-tint);
    outline: none;
}
.dashboard textarea { min-height: 116px; line-height: 1.55; resize: vertical; }
/* file inputs were missing from the control system -> mismatched height. Bring them to parity. */
.dashboard input[type="file"],
.dashboard input[type="file"].form-control,
.dashboard input[type="file"].form--control {
    min-height: 46px; width: 100%; border: 1px solid #d7d9de; border-radius: 10px; background: #fff;
    display: inline-flex; align-items: center; padding: 0 8px; font-size: .9rem; color: var(--gl-muted);
    box-shadow: 0 1px 2px rgba(17, 20, 24, .03);
}
/* topbar identity (name + role beside avatar) to match the design */
.dashboard .user-info__meta { text-align: right; line-height: 1.2; }
.dashboard .user-info__name { display: block; font-size: .82rem; font-weight: 700; color: var(--gl-ink); }
.dashboard .user-info__role { display: block; font-size: .68rem; font-weight: 600; color: var(--gl-muted); text-transform: uppercase; letter-spacing: .05em; }
.dashboard .form--control:focus,
.dashboard .form-control:focus,
.dashboard .form-select:focus,
.dashboard select:focus,
.dashboard textarea:focus {
    border-color: var(--gl-gold);
    box-shadow: 0 0 0 3px var(--gl-gold-tint);
    outline: none;
}
.dashboard .form--control::placeholder,
.dashboard .form-control::placeholder,
.dashboard textarea::placeholder { color: #9aa0ab; opacity: 1; }
.dashboard .form--control:disabled,
.dashboard .form-control:disabled,
.dashboard input:disabled,
.dashboard textarea:disabled { background: #f4f5f7; color: var(--gl-muted); cursor: not-allowed; }

/* labels — consistent weight + spacing kills the ragged look */
.dashboard .form--label,
.dashboard .form-label {
    font-weight: 600; font-size: .85rem; color: var(--gl-ink);
    margin-bottom: 7px; display: inline-block;
}

/* selects: custom chevron, same height as inputs */
.dashboard select.form--control,
.dashboard select.form-control,
.dashboard .form-select,
.dashboard select {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235e6470' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center; background-size: 13px;
    padding-right: 38px;
}

/* input groups: cohesive control + addon, single shared focus ring */
.dashboard .input-group-text {
    background: #f6f7f9; border: 1px solid #d7d9de; color: var(--gl-muted);
    font-weight: 600; font-size: .88rem;
}
.dashboard .input-group > .form--control,
.dashboard .input-group > .form-control { box-shadow: none; }
.dashboard .input-group:focus-within > .form--control,
.dashboard .input-group:focus-within > .form-control,
.dashboard .input-group:focus-within > .input-group-text { border-color: var(--gl-gold); }

/* vertical rhythm so stacked fields read calm, not cluttered.
   NOTE: zero-margin only for a form's own last group — NOT `.form-group:last-child`,
   which nuked the margin of every grid-column-wrapped field (each is its col's last child). */
.dashboard .form-group { margin-bottom: 18px; }
.dashboard form > .form-group:last-child,
.dashboard form > div:last-child > .form-group:last-child { margin-bottom: 0; }
.dashboard form > .form-group:last-child .btn { margin-top: 6px; }

/* opt-in aligned two-column field grid */
.gl-fieldgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }

/* content column always fills the viewport — kills the dead band under short pages */
.dashboard { min-height: 100vh; }
.dashboard__inner { min-height: 100vh; align-items: stretch; }
.dashboard__right { display: flex; flex-direction: column; min-height: 100vh; }
.dashboard__right .dashboard-body { flex: 1 1 auto; }
/* main.css gives .custom--card height:100% (equal-height util); with the flexed body that
   stretches a lone card to fill the page — cards size to content instead */
.dashboard .custom--card { height: auto; }

/* post-a-job form: numbered step headers give the long form a guided, premium read */
.job-post-content { counter-reset: glstep; }
.job-post-content .inner-content > h6 {
    counter-increment: glstep;
    display: flex; align-items: center; gap: 11px;
    font-size: 1.02rem; font-weight: 700; color: var(--gl-ink);
    margin-bottom: 18px;
}
.job-post-content .inner-content > h6::before {
    content: counter(glstep);
    flex: 0 0 26px; width: 26px; height: 26px; border-radius: 8px;
    background: var(--gl-gold); color: #fff;
    font-size: .8rem; font-weight: 700; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
}
.gl-fieldgrid .gl-col-full { grid-column: 1 / -1; }
@media (max-width: 600px) { .gl-fieldgrid { grid-template-columns: 1fr; } }

/* validation */
.dashboard .form--control.is-invalid,
.dashboard .form-control.is-invalid { border-color: var(--gl-danger); }
.dashboard .invalid-feedback { color: var(--gl-danger); font-size: .8rem; margin-top: 5px; }

/* reusable card-style form container for settings / profile / forms */
.gl-formpanel {
    background: var(--gl-card); border: 1px solid var(--gl-line);
    border-radius: 14px; box-shadow: var(--gl-shadow); padding: 22px 24px; margin-bottom: 20px;
}
.gl-formpanel > h6 { font-weight: 700; margin: 0 0 16px; font-size: .98rem; letter-spacing: -.01em; }

/* ============================================================
   Dashboard premium polish (Phase 3) — shared by both portals
   ============================================================ */
/* stat cards: animated gold accent + deeper lift on hover */
.gl-stat { overflow: hidden; }
.gl-stat__ico { transition: transform .18s ease; }
.gl-stat:hover .gl-stat__ico { transform: scale(1.04); }
/* Upwork-calm: removed the animated gold sweep, solid-gold icon flip and heavy pop */

/* hero is light now — no dark-mode top sheen */
.gl-hero::before { display: none !important; }

/* tasteful staggered entrance — restrained, reduced-motion safe */
@media (prefers-reduced-motion: no-preference) {
    .gl-dash > .gl-hero,
    .gl-dash > .gl-stats > *,
    .gl-dash > .row,
    .gl-dash > .gl-card { animation: glFadeUp .5s cubic-bezier(.16,.84,.44,1) both; }
    .gl-dash > .gl-stats > *:nth-child(2) { animation-delay: .06s; }
    .gl-dash > .gl-stats > *:nth-child(3) { animation-delay: .12s; }
    .gl-dash > .row { animation-delay: .14s; }
    .gl-dash > .gl-card:last-child { animation-delay: .2s; }
}
@keyframes glFadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* card hover lift — quiet, premium */
.gl-card { transition: transform .45s var(--gl-ease), box-shadow .45s var(--gl-ease); }
.gl-dash .row .gl-card:hover { transform: translateY(-3px); box-shadow: var(--gl-shadow-md); }

/* ============================================================
   Portal page primitives (Phase B) — reusable premium building
   blocks for every guard-company / customer portal page.
   ============================================================ */
:root { --gl-gold-bright: #e7c878; }

/* Root-cause fix for off-brand colour leaks: ViserLab's --primary is blue
   (211 100% 50%) and --info is cyan (190 90% 50%). They leak through
   hsl(var(--primary/--info)) on button outlines, hovers, and .input-note-text
   help text — bypassing the class-level remaps. Unify --primary to brand gold
   and --info to a calm slate so nothing renders blue. */
:root {
    --primary-h: 43;
    --primary-s: 89%;
    --primary-l: 38%;
    --info-h: 215;
    --info-s: 16%;
    --info-l: 47%;
}

/* page header: eyebrow + display title + subtitle + action slot */
.gl-page { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 26px; }
.gl-page__eyebrow { display: none !important; }
.gl-page__title { font-family: var(--gl-font-display); font-weight: 800; letter-spacing: -.02em; font-size: 1.6rem; margin: 0 0 5px; line-height: 1.15; }
.gl-page__sub { color: var(--gl-muted); margin: 0; font-size: .95rem; max-width: 60ch; }

/* double-bezel panel: outer shell + concentric inner core */
.gl-panel { background: #f1f2f4; border: 1px solid var(--gl-line); border-radius: 18px; padding: 6px; margin-bottom: 22px; box-shadow: var(--gl-shadow); }
.gl-panel__inner { background: #fff; border-radius: 13px; box-shadow: inset 0 1px 1px rgba(255, 255, 255, .7); overflow: hidden; }
.gl-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 17px 22px; border-bottom: 1px solid var(--gl-line); }
.gl-panel__head h5 { margin: 0; font-weight: 700; font-size: 1.04rem; letter-spacing: -.01em; }
.gl-panel__head .gl-panel__hint { color: var(--gl-muted); font-size: .85rem; }
.gl-panel__body { padding: 22px; }

/* premium status banner (replaces stock .alert on portal pages) */
.gl-statusbar { display: flex; gap: 14px; align-items: flex-start; border-radius: 14px; padding: 16px 20px; margin-bottom: 24px; border: 1px solid; }
.gl-statusbar__ic { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.3rem; }
.gl-statusbar h6 { margin: 0 0 3px; font-weight: 700; font-size: 1rem; }
.gl-statusbar p { margin: 0; font-size: .9rem; line-height: 1.5; color: var(--gl-ink); }
.gl-statusbar--ok { background: rgba(46,160,67,.08); border-color: rgba(46,160,67,.3); }
.gl-statusbar--ok .gl-statusbar__ic { background: rgba(46,160,67,.14); color: #1c6b2c; } .gl-statusbar--ok h6 { color: #1c6b2c; }
.gl-statusbar--warn { background: rgba(186,117,23,.08); border-color: rgba(186,117,23,.32); }
.gl-statusbar--warn .gl-statusbar__ic { background: rgba(186,117,23,.14); color: #8a5a06; } .gl-statusbar--warn h6 { color: #8a5a06; }
.gl-statusbar--bad { background: var(--gl-danger-tint); border-color: rgba(180,35,24,.3); }
.gl-statusbar--bad .gl-statusbar__ic { background: rgba(180,35,24,.12); color: var(--gl-danger); } .gl-statusbar--bad h6 { color: var(--gl-danger); }
.gl-statusbar--info { background: var(--gl-gold-tint); border-color: rgba(184,134,11,.32); }
.gl-statusbar--info .gl-statusbar__ic { background: rgba(184,134,11,.16); color: var(--gl-gold-strong); } .gl-statusbar--info h6 { color: var(--gl-gold-strong); }

/* document rows */
.gl-docrow { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--gl-line); }
.gl-docrow:first-child { padding-top: 0; } .gl-docrow:last-child { border-bottom: 0; padding-bottom: 0; }
.gl-docrow__ic { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 11px; background: var(--gl-gold-tint); color: var(--gl-gold); display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; }
.gl-docrow__main { flex: 1; min-width: 0; }
.gl-docrow__main b { display: block; font-weight: 600; font-size: .95rem; }
.gl-docrow__main span { color: var(--gl-muted); font-size: .83rem; }
.gl-docrow__act a { font-weight: 600; color: var(--gl-gold-strong); font-size: .85rem; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.gl-docrow__act a:hover { text-decoration: underline; }

/* capability toggle chips */
.gl-caps { display: flex; gap: 10px; flex-wrap: wrap; }
.gl-caps label { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid var(--gl-line); border-radius: 10px; cursor: pointer; font-weight: 600; font-size: .88rem; transition: .14s; margin: 0; }
.gl-caps input { accent-color: var(--gl-gold); width: 16px; height: 16px; }
.gl-caps label:has(input:checked) { border-color: var(--gl-gold); background: var(--gl-gold-tint); color: var(--gl-gold-strong); }

/* premium empty state */
.gl-empty2 { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 44px 20px; color: var(--gl-muted); }
.gl-empty2 .ic { width: 58px; height: 58px; border-radius: 16px; background: var(--gl-gold-tint); color: var(--gl-gold); display: inline-flex; align-items: center; justify-content: center; font-size: 1.7rem; margin-bottom: 14px; }
.gl-empty2 b { color: var(--gl-ink); font-size: 1.02rem; font-weight: 700; }
.gl-empty2 p { margin: 4px 0 16px; font-size: .9rem; max-width: 42ch; }

/* entrance for non-dashboard pages */
@media (prefers-reduced-motion: no-preference) {
    .gl-rise { animation: glFadeUp .5s cubic-bezier(.16,.84,.44,1) both; }
    .gl-rise:nth-of-type(2) { animation-delay: .05s; }
    .gl-rise:nth-of-type(3) { animation-delay: .1s; }
    .gl-rise:nth-of-type(4) { animation-delay: .15s; }
}

/* premium portal tables + filter cards — covers EVERY .dashboard table page
   (projects, bids, transactions, withdraw log, support, guards) at once */
.dashboard .table-wrapper { background: var(--gl-card); border: 1px solid var(--gl-line); border-radius: 16px; box-shadow: var(--gl-shadow); padding: 10px 12px 6px; }
.dashboard .responsive-filter-card { padding: 6px 6px 0; }
.dashboard .dashboard-table { overflow-x: auto; }
.dashboard .dashboard-table table, .dashboard table.table { width: 100%; margin: 0; }
.dashboard .dashboard-table thead th, .dashboard table.table thead th { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--gl-line) !important; color: var(--gl-muted); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 12px 16px; white-space: nowrap; }
.dashboard .dashboard-table tbody td, .dashboard table.table tbody td { border: 0 !important; border-bottom: 1px solid #eef0f3 !important; padding: 14px 16px; font-size: .9rem; vertical-align: middle; background: transparent !important; }
.dashboard .dashboard-table tbody tr:last-child td { border-bottom: 0 !important; }
.dashboard .dashboard-table tbody tr { transition: background .12s; }
.dashboard .dashboard-table tbody tr:hover td { background: var(--gl-gold-tint) !important; }
.dashboard .card-footer { background: transparent !important; border: 0 !important; padding: 16px 6px 6px !important; }
.dashboard .table-wrapper .show-filter .btn { border-radius: 9px; }
.dashboard .clamping { font-weight: 600; }

/* premium treatment for stock portal cards (covers every form page using
   .custom--card — profile, password, 2FA, KYC, guards, etc.) */
.dashboard .card.custom--card, .dashboard .custom--card { background: var(--gl-card); border: 1px solid var(--gl-line); border-radius: 16px; box-shadow: var(--gl-shadow); }
.dashboard .custom--card > .card-header { background: transparent; border-bottom: 1px solid var(--gl-line); padding: 16px 22px; }
.dashboard .custom--card > .card-header .card-title { font-weight: 700; font-size: 1.04rem; letter-spacing: -.01em; margin: 0; }
.dashboard .custom--card > .card-body { padding: 22px; }

/* ============================================================================
   ATELIER-PRO  —  clean professional dashboard system (Upwork-clean, 2026-07)
   Flat hairline-bordered cards, restrained type, gold used sparingly. Bids as
   data tables, modest metrics, a calm two-column layout. Scoped under .gl-dash.
   ============================================================================ */
.gl-dash{ --gold-d:#7e5a08; --green:#1f9d57; --green-bg:#e8f6ee; --red:#c0492f; --red-bg:#fbede9; --grey-bg:#eef0f3; --gold-bg:#fbf4e4; color:var(--gl-ink); }

/* greeting / hero row */
.gl-greet{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:22px; }
.gl-greet h1{ font-size:1.5rem; font-weight:800; letter-spacing:-.02em; margin:0; color:var(--gl-ink); }
.gl-greet p{ font-size:.9rem; color:var(--gl-muted); margin:4px 0 0; }
.gl-greet__actions{ display:flex; gap:9px; flex-shrink:0; }

/* buttons */
.gl-btn{ display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 17px; border-radius:9px; font-weight:700; font-size:.86rem; border:1px solid transparent; cursor:pointer; text-decoration:none; transition:.15s; white-space:nowrap; }
.gl-btn i{ font-size:1.05rem; }
.gl-btn--gold{ background:var(--gl-gold); color:#fff !important; }
.gl-btn--gold:hover{ background:var(--gold-d); color:#fff !important; }
.gl-btn--ghost{ background:#fff; color:var(--gl-ink) !important; border-color:var(--gl-line); }
.gl-btn--ghost:hover{ border-color:#cfd4dc; }
.gl-btn--block{ width:100%; justify-content:center; }

/* grid */
.gl-grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:18px; }
.gl-c3{ grid-column:span 3; } .gl-c4{ grid-column:span 4; } .gl-c6{ grid-column:span 6; } .gl-c8{ grid-column:span 8; } .gl-c12{ grid-column:span 12; }
.gl-stack{ display:flex; flex-direction:column; gap:18px; }

/* flat card */
.gl-box{ background:#fff; border:1px solid var(--gl-line); border-radius:var(--gl-radius); box-shadow:var(--gl-shadow); }
.gl-box__head{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:15px 18px; border-bottom:1px solid var(--gl-line-soft); }
.gl-box__head h3{ font-size:.95rem; font-weight:700; letter-spacing:-.01em; margin:0; color:var(--gl-ink); }
.gl-box__head a{ font-size:.78rem; font-weight:700; color:var(--gold-d); text-decoration:none; }
.gl-box__head a:hover{ color:#634706; }
.gl-pad{ padding:18px; }

/* stat tile */
.gl-stile{ padding:20px; display:block; text-decoration:none; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
a.gl-stile:hover{ border-color:#cfd3da; box-shadow:0 5px 16px -5px rgba(16,24,40,.13); transform:translateY(-2px); }
a.gl-stile:hover .gl-stile__ic{ background:var(--gl-gold); color:#fff; }
.gl-stile__ic{ transition:background .18s ease, color .18s ease; }
.gl-stile__top{ display:flex; align-items:flex-start; justify-content:space-between; }
.gl-stile__lbl{ font-size:.8rem; color:var(--gl-muted); font-weight:500; }
.gl-stile__ic{ width:32px; height:32px; border-radius:9px; background:var(--gl-gold-tint); display:grid; place-items:center; color:var(--gl-gold-strong); flex:0 0 32px; }
.gl-stile__ic i{ font-size:1.05rem; }
.gl-stile__n{ font-size:1.95rem; font-weight:700; margin-top:13px; letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--gl-ink); line-height:1.05; }
.gl-stile__sub{ font-size:.8rem; color:var(--gl-muted); margin-top:8px; }
.gl-stile__sub b{ color:var(--green); }

/* table */
.gl-table{ width:100%; border-collapse:collapse; }
.gl-table thead th{ text-align:left; font-size:.66rem; letter-spacing:.05em; text-transform:uppercase; color:var(--gl-muted); font-weight:700; padding:11px 18px; border-bottom:1px solid var(--gl-line-soft); white-space:nowrap; }
.gl-table thead th.r, .gl-table tbody td.r{ text-align:right; }
.gl-table tbody td{ padding:13px 18px; border-bottom:1px solid var(--gl-line-soft); font-size:.85rem; vertical-align:middle; }
.gl-table tbody tr:last-child td{ border-bottom:0; }
.gl-table tbody tr{ transition:background .12s; }
.gl-table tbody tr:hover{ background:#fafbfc; }
.gl-table .ttl{ font-weight:700; color:var(--gl-ink); text-decoration:none; }
.gl-table a.ttl:hover{ color:var(--gold-d); }
.gl-table .sub{ font-size:.74rem; color:var(--gl-muted); margin-top:1px; }
.gl-table .amt{ font-weight:700; font-variant-numeric:tabular-nums; }
.gl-empty2{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; padding:38px 18px; text-align:center; color:var(--gl-muted); font-size:.88rem; }
.gl-empty2 i{ font-size:1.9rem; opacity:.35; }
.gl-empty2 span{ display:block; max-width:34ch; line-height:1.5; }

/* status pills (also recolor the template badges that print inside the table) */
.gl-pill, .gl-dash .gl-table .badge{ display:inline-block; font-size:.7rem; font-weight:700; padding:3px 10px; border-radius:20px; line-height:1.5; }
.gl-pill--hired, .gl-dash .gl-table .badge--success{ color:var(--green) !important; background:var(--green-bg) !important; }
.gl-pill--done, .gl-dash .gl-table .badge--secondary, .gl-dash .gl-table .badge--dark, .gl-dash .gl-table .badge--info{ color:var(--gl-muted) !important; background:var(--grey-bg) !important; }
.gl-pill--warn, .gl-dash .gl-table .badge--warning, .gl-dash .gl-table .badge--primary{ color:var(--gold-d) !important; background:var(--gold-bg) !important; }
.gl-pill--reject, .gl-dash .gl-table .badge--danger{ color:var(--red) !important; background:var(--red-bg) !important; }

/* balance card */
.gl-bal__lbl{ font-size:.7rem; color:var(--gl-muted); font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.gl-bal__n{ font-size:1.7rem; font-weight:800; margin:8px 0 2px; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.gl-bal__esc{ font-size:.8rem; color:var(--gl-muted); margin-bottom:15px; }
.gl-bal__row{ display:flex; gap:9px; }
.gl-bal__row .gl-btn{ flex:1; height:38px; }

/* progress (profile completeness) */
.gl-prog__top{ display:flex; align-items:center; justify-content:space-between; }
.gl-prog__lbl{ font-size:.85rem; font-weight:700; }
.gl-prog__pct{ font-size:.85rem; font-weight:800; }
.gl-prog__bar{ height:7px; border-radius:5px; background:#eef0f3; overflow:hidden; margin:11px 0; }
.gl-prog__bar i{ display:block; height:100%; background:var(--gl-gold); border-radius:5px; }
.gl-prog p{ font-size:.78rem; color:var(--gl-muted); line-height:1.45; margin:0 0 9px; }
.gl-prog a{ font-size:.78rem; font-weight:700; color:var(--gold-d); text-decoration:none; }

/* quick links list */
.gl-links a{ display:flex; align-items:center; gap:11px; padding:11px 18px; border-bottom:1px solid var(--gl-line-soft); font-size:.85rem; font-weight:600; color:var(--gl-ink); text-decoration:none; }
.gl-links a:last-child{ border-bottom:0; }
.gl-links a:hover{ background:#fafbfc; color:var(--gold-d); }
.gl-links a > i{ width:18px; text-align:center; color:var(--gl-muted); font-size:1.05rem; }
.gl-links a .ch{ margin-left:auto; color:var(--gl-muted); font-size:.9rem; }

/* chart */
.gl-chart{ padding:8px 12px 12px; min-height:150px; }
.gl-chart .apexcharts-canvas{ margin:0 auto; }
.gl-chart-empty{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; min-height:170px; color:var(--gl-muted); text-align:center; font-size:.82rem; padding:14px; }
.gl-chart-empty i{ font-size:1.7rem; opacity:.45; }
.gl-chart-legend{ display:flex; align-items:center; gap:7px; font-size:.76rem; color:var(--gl-muted); padding:14px 18px 0; }
.gl-chart-legend i{ width:9px; height:9px; border-radius:3px; background:var(--gl-gold); display:inline-block; }

/* responsive */
@media (max-width:1200px){ .gl-c3{ grid-column:span 6; } }
@media (max-width:992px){ .gl-c8, .gl-c4{ grid-column:span 12; } }
@media (max-width:680px){ .gl-c3, .gl-c6{ grid-column:span 12; } .gl-greet{ flex-direction:column; align-items:flex-start; } }

/* ---- trust strip inside single-form cards (KYC, uploads) ---- */
.gl-formtrust{ display:flex; flex-wrap:wrap; justify-content:center; gap:20px; padding:14px 22px; border-top:1px solid var(--gl-line-soft); background:#fafbfc; border-radius:0 0 var(--gl-radius) var(--gl-radius); }
.gl-formtrust span{ display:inline-flex; align-items:center; gap:6px; font-size:.76rem; color:var(--gl-muted); font-weight:600; }
.gl-formtrust i{ color:var(--gl-gold-strong); font-size:.95rem; }

/* ============================================================
   Verification / focused single-task page (KYC) — constrained,
   centered, balanced. No sprawl, one primary action.
   ============================================================ */
.gl-dash:has(> .gl-verify) { display: flex; justify-content: center; align-items: flex-start; }
.gl-verify { width: 100%; max-width: 496px; margin: 22px auto 40px; }
.gl-verify__card {
    background: #fff; border: 1px solid var(--gl-line); border-radius: 18px;
    box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 14px 34px -14px rgba(16,24,40,.14);
    padding: 34px 32px 28px;
}
.gl-verify__head { text-align: center; margin-bottom: 24px; }
.gl-verify__icon {
    width: 54px; height: 54px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.65rem; color: var(--gl-gold-strong); background: var(--gl-gold-tint);
    box-shadow: inset 0 0 0 1px rgba(184,134,11,.18); margin-bottom: 15px;
}
.gl-verify__head h1 { font-family: var(--gl-font-display); font-size: 1.4rem; font-weight: 800; letter-spacing: -.02em; margin: 0 0 7px; color: var(--gl-ink); }
.gl-verify__head p { font-size: .88rem; line-height: 1.55; color: var(--gl-muted); margin: 0 auto; max-width: 40ch; }

/* stack the dynamic form fields, tighten the rhythm */
.gl-verify .row { --bs-gutter-x: 0; margin: 0; }
.gl-verify .row > [class*="col-"] { width: 100%; max-width: 100%; flex: 0 0 100%; padding: 0; }
.gl-verify .form-group { margin-bottom: 16px; }
.gl-verify .form-group:last-of-type { margin-bottom: 10px; }
.gl-verify label, .gl-verify .form--label, .gl-verify .form-label { font-weight: 600; font-size: .82rem; margin-bottom: 6px; color: var(--gl-ink); display: inline-block; }

/* refined upload field — reads as a drop zone, not a raw file input */
.gl-verify input[type="file"] {
    min-height: 92px !important; width: 100% !important; border: 1.5px dashed #d3d6dd !important; border-radius: 12px !important; background: #fbfbfc !important;
    display: flex !important; align-items: center !important; justify-content: center !important; padding: 12px !important; cursor: pointer;
    font-size: .84rem; color: var(--gl-muted); transition: border-color .15s ease, background .15s ease;
}
.gl-verify input[type="file"]:hover { border-color: var(--gl-gold); background: var(--gl-gold-tint); }
.gl-verify input[type="file"]::file-selector-button {
    background: #fff; color: var(--gl-gold-strong); border: 1px solid var(--gl-line); border-radius: 9px;
    font-weight: 600; padding: 9px 15px; margin-right: 13px; cursor: pointer; transition: border-color .15s ease;
}
.gl-verify input[type="file"]:hover::file-selector-button { border-color: rgba(184,134,11,.4); }

/* one primary action — proportionate */
.gl-verify__submit {
    width: 100%; height: 48px; border: none; border-radius: 11px; background: var(--gl-gold); color: #fff;
    font-weight: 700; font-size: .94rem; margin-top: 4px; cursor: pointer; transition: background .15s ease;
}
.gl-verify__submit:hover { background: var(--gl-gold-dark); }

/* trust row, subtle, below the card */
.gl-verify__trust { display: flex; justify-content: center; gap: 22px; margin-top: 16px; flex-wrap: wrap; }
.gl-verify__trust span { display: inline-flex; align-items: center; gap: 6px; font-size: .75rem; color: var(--gl-muted); font-weight: 600; }
.gl-verify__trust i { color: var(--gl-gold-strong); font-size: .9rem; }

/* ============================================================
   QA council remediation (2026-07) — a11y, motion, touch, mobile
   ============================================================ */
/* S4: gold icon glyphs on gold-tint fail the 3:1 graphical floor -> AA-safe gold-strong */
.gl-tile .ico, .gl-docrow__ic { color: var(--gl-gold-strong); }
/* active sidebar nav text+icon: #b8860b on gold-tint ~3:1 fails AA text -> gold-strong (~5.6:1) */
.sidebar-menu-list__item.active > .sidebar-menu-list__link,
.sidebar-menu-list__item.active > .sidebar-menu-list__link .icon,
.sidebar-menu-list__item.active > .sidebar-menu-list__link .text { color: var(--gl-gold-strong) !important; }
/* S6: balance-card label should match the KPI label (not uppercase) */
.gl-bal__lbl { text-transform: none !important; letter-spacing: 0 !important; font-size: .8rem; font-weight: 500; }
/* S5: no persistent hover-lift for reduced-motion users */
@media (prefers-reduced-motion: reduce) {
    a.gl-stile:hover, .gl-stat:hover, .gl-hero__fig:hover, .gl-hero__btn:hover,
    .gl-quick a:hover, .gl-dash .row .gl-card:hover, .gl-shell:hover,
    a.gl-stile:hover .gl-stile__ic { transform: none !important; transition: border-color .15s ease, box-shadow .15s ease !important; }
}
/* S8: 44px touch targets for primary CTAs on mobile */
@media (max-width: 767px) {
    .gl-btn { height: 44px; }
    .gl-bal__row .gl-btn { height: 44px; }
}
/* S2: dashboard tables scroll within their card on small screens (no page-level horizontal scroll) */
@media (max-width: 767px) {
    .gl-box:has(> .gl-table) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .gl-box > .gl-table { min-width: 480px; }
}

/* ============================================================
   HeroUI-inspired skin (gold theme) — filled inputs, soft-shadow
   rounded cards, pill chips, press-scale buttons. CSS-only port
   of the HeroUI visual language for the Blade portals.
   ============================================================ */
/* inputs: HeroUI "filled" variant */
.dashboard .form--control,
.dashboard .form-control,
.dashboard .form-select,
.dashboard select,
.dashboard textarea {
    background-color: #f4f4f6;
    border: 2px solid transparent;
    border-radius: 12px;
    box-shadow: none;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.dashboard .form--control:hover:not(:focus):not(:disabled),
.dashboard .form-control:hover:not(:focus):not(:disabled),
.dashboard .form-select:hover:not(:focus):not(:disabled),
.dashboard select:hover:not(:focus):not(:disabled),
.dashboard textarea:hover:not(:focus):not(:disabled) { background-color: #eceef1; }
.dashboard .form--control:focus,
.dashboard .form-control:focus,
.dashboard .form-select:focus,
.dashboard select:focus,
.dashboard textarea:focus {
    background-color: #fff;
    border-color: var(--gl-gold);
    box-shadow: 0 0 0 4px var(--gl-gold-tint);
}
.dashboard input[type="file"],
.dashboard input[type="file"].form-control,
.dashboard input[type="file"].form--control {
    background-color: #f4f4f6; border: 2px solid transparent; border-radius: 12px; box-shadow: none;
}
.dashboard .input-group-text {
    background-color: #e9ebee; border: 2px solid transparent; border-radius: 12px;
}
.dashboard .input-group:focus-within > .input-group-text { border-color: var(--gl-gold); }

/* cards: soft layered shadow, 16px radius */
.dashboard .gl-box,
.dashboard .custom--card,
.dashboard .card:not(.alert) {
    border-radius: 16px;
    border-color: #eceef2;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 16px -6px rgba(16, 24, 40, .08);
}

/* buttons: 12px radius + HeroUI press scale */
.dashboard .btn,
.dashboard .gl-btn { border-radius: 12px; transition: transform .1s ease, background-color .15s ease, box-shadow .15s ease; }
.dashboard .btn:active,
.dashboard .gl-btn:active { transform: scale(.97); }

/* status chips: full pill */
.dashboard .badge { border-radius: 999px; font-weight: 600; }

/* table rows: quiet hover */
.dashboard table tbody tr { transition: background-color .12s ease; }
.dashboard table tbody tr:hover > td { background-color: #f7f8fa; }

/* modals match card language */
.modal-content { border-radius: 16px; border: 1px solid #eceef2; }

@media (prefers-reduced-motion: reduce) {
    .dashboard .btn:active, .dashboard .gl-btn:active { transform: none; }
}

/* ============ Long-term contract UI ============ */
.gl-btn--sm{ padding:6px 12px; font-size:.78rem; }
.gl-kv{ display:flex; flex-direction:column; gap:2px; }
.gl-kv span{ font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--gl-muted); font-weight:600; }
.gl-kv strong{ font-size:.95rem; color:var(--gl-ink); font-weight:700; }
.gl-sign-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.gl-sign{ border:1px solid var(--gl-line); border-radius:var(--gl-radius); padding:14px; display:flex; flex-direction:column; gap:3px; background:#fff; }
.gl-sign.is-signed{ border-color:var(--gl-gold); background:var(--gl-gold-tint); }
.gl-sign__role{ font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--gl-muted); font-weight:700; }
.gl-sign strong{ color:var(--gl-ink); }
.gl-sign small{ color:var(--gl-muted); font-size:.76rem; }
.gl-signform{ border:1px dashed var(--gl-line); border-radius:var(--gl-radius); padding:16px; background:#fbfbfc; }
.gl-agreement{ border-left:3px solid var(--gl-gold); padding:4px 0 4px 16px; }
.gl-agreement h6{ font-size:.82rem; font-weight:700; color:var(--gl-ink); margin:12px 0 3px; }
.gl-agreement h6:first-child{ margin-top:0; }
.gl-agreement p{ font-size:.9rem; color:var(--gl-ink-soft); margin:0; white-space:pre-line; }
.gl-timeline{ display:flex; flex-direction:column; gap:0; }
.gl-timeline__row{ display:flex; align-items:center; gap:10px; padding:7px 0; color:var(--gl-muted); font-size:.9rem; position:relative; }
.gl-timeline__row .dot{ width:11px; height:11px; border-radius:50%; border:2px solid var(--gl-line); background:#fff; flex:0 0 11px; }
.gl-timeline__row.done{ color:var(--gl-ink); font-weight:600; }
.gl-timeline__row.done .dot{ border-color:var(--gl-gold); background:var(--gl-gold); }
@media (max-width:575px){ .gl-sign-grid{ grid-template-columns:1fr; } }