/* ============================================================
   AIRA - staff pages (sign-in, OTP, choose password, Hub)
   Poppins, the Aira logo's navy and royal blue, quiet white cards. All colours are the tokens below.
   Loaded last on those pages; admin pages do not use this file.
   ============================================================ */
:root, [data-bs-theme="light"] {
    --staff-accent: #1d4ed8;
    --staff-accent-dark: #1e40af;
    --staff-accent-text: #1d4ed8;
    --staff-tint: #e8efff;
    --staff-border: #e8ebf3;
    --staff-page: #f6f7fb;
    --staff-card: #ffffff;
    --staff-text: #1f2937;
    --staff-muted: #667085;
    --staff-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 6px 18px rgba(15, 23, 42, .04);
    --staff-shadow-hover: 0 2px 4px rgba(15, 23, 42, .05), 0 14px 30px rgba(15, 23, 42, .08);
    --aira-primary: #1d4ed8;
    --aira-primary-soft: #60a5fa;
    --aira-navy-1: #0b2a5b;
    --aira-navy-2: #143a80;
    --aira-ring: rgba(29, 78, 216, .28);
    --phoenix-primary: #1d4ed8;
    --phoenix-primary-rgb: 29, 78, 216;
    --phoenix-link-color: #1d4ed8;
    --phoenix-link-color-rgb: 29, 78, 216;
    --phoenix-link-hover-color: #1e40af;
    --phoenix-link-hover-color-rgb: 30, 64, 175;
    --phoenix-primary-bg-subtle: #e8efff;
    --phoenix-body-font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
}

[data-bs-theme="dark"] {
    --staff-accent: #2563eb;
    --staff-accent-dark: #1e40af;
    --staff-accent-text: #93c5fd;
    --staff-tint: rgba(96, 165, 250, .16);
    --staff-border: #2b3245;
    --staff-page: #10141f;
    --staff-card: #171c2a;
    --staff-text: #e6e9f2;
    --staff-muted: #9aa3b8;
    --staff-shadow: 0 1px 2px rgba(0, 0, 0, .3);
    --staff-shadow-hover: 0 8px 24px rgba(0, 0, 0, .4);
    --aira-primary: #60a5fa;
    --aira-primary-soft: #93c5fd;
    --aira-navy-1: #0a1f44;
    --aira-navy-2: #12346f;
    --aira-ring: rgba(96, 165, 250, .3);
    --phoenix-primary: #60a5fa;
    --phoenix-primary-rgb: 96, 165, 250;
    --phoenix-link-color: #93c5fd;
    --phoenix-link-color-rgb: 147, 197, 253;
    --phoenix-link-hover-color: #bfdbfe;
    --phoenix-link-hover-color-rgb: 191, 219, 254;
    --phoenix-primary-bg-subtle: rgba(96, 165, 250, .16);
    --phoenix-body-font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
}

body, button, input, select, textarea, .btn, .form-control, .form-label,
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
}

body { background: var(--staff-page); color: var(--staff-text); }

/* ---------- sign-in, OTP and choose password ---------- */
.aira-viewport {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    background: var(--staff-page);
    background-image: none;
}

.aira-card {
    display: flex;
    width: 100%;
    max-width: 920px;
    min-height: 540px;
    overflow: hidden;
    background: var(--staff-card);
    border: 1px solid var(--staff-border);
    border-radius: 14px;
    box-shadow: var(--staff-shadow);
}

.aira-brand {
    position: relative;
    flex: 0 0 42%;
    flex-direction: column;
    justify-content: space-between;
    padding: 36px;
    color: #fff;
    background: linear-gradient(165deg, var(--aira-navy-1) 0%, var(--aira-navy-2) 100%);
}

    .aira-brand::before, .aira-brand::after { display: none; }

.aira-logo-chip {
    display: inline-flex;
    align-self: flex-start;
    padding: 10px 14px;
    background: #fff;
    border-radius: 10px;
}

    .aira-logo-chip img { display: block; width: 84px; height: auto; }

.aira-wordmark .kicker {
    display: block;
    margin-bottom: 10px;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .72);
}

    .aira-wordmark .kicker::before { display: none; }

.aira-wordmark .product {
    margin-bottom: 10px;
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
}

    .aira-wordmark .product .one {
        background: none;
        -webkit-background-clip: initial;
        background-clip: initial;
        -webkit-text-fill-color: #bfdbfe;
        color: #bfdbfe;
    }

.aira-wordmark .tagline { margin: 0; font-size: .9rem; line-height: 1.6; color: rgba(255, 255, 255, .8); }

.aira-brand-footer { font-size: .75rem; color: rgba(255, 255, 255, .6); }

.aira-panel {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px;
}

.aira-head { margin-bottom: 24px; }

    .aira-head h3 { margin-bottom: 6px; font-size: 1.45rem; font-weight: 600; color: var(--staff-text); }

    .aira-head p { margin: 0; font-size: .9rem; color: var(--staff-muted); }

.aira-field { margin-bottom: 16px; }

    .aira-field .form-label {
        display: block;
        margin-bottom: 6px;
        padding: 0;
        font-size: .82rem;
        font-weight: 500;
        letter-spacing: 0;
        text-transform: none;
        color: var(--staff-text);
    }

    .aira-field .form-control { min-height: 44px; font-size: .92rem; border-radius: 8px; }

        .aira-field .form-control:focus, .otp-digit:focus {
            border-color: var(--staff-accent);
            box-shadow: 0 0 0 3px var(--aira-ring);
        }

.aira-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }

    .aira-meta .aira-forgot { font-size: .78rem; color: var(--staff-muted); }

.aira-btn, .aira-btn:hover, .aira-btn:focus {
    min-height: 44px;
    font-size: .92rem;
    font-weight: 600;
    color: #fff;
    background: var(--staff-accent);
    border: 0;
    border-radius: 8px;
    box-shadow: none;
    transform: none;
}

    .aira-btn:hover { background: var(--staff-accent-dark); }

    .aira-btn:disabled { color: #fff; background: var(--staff-accent); opacity: .65; }

    .aira-btn::after { display: none; }

.aira-otp-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 14px;
    font-size: 1.5rem;
    color: var(--staff-accent-text);
    background: var(--staff-tint);
    border-radius: 12px;
    animation: none;
}

.otp-digit { width: 46px; height: 50px; font-size: 1.15rem; font-weight: 600; border-radius: 8px; }

    .otp-digit.filled { color: var(--staff-accent-text); border-color: var(--staff-accent); background: var(--staff-tint); }

.aira-error { min-height: 20px; margin-bottom: 12px; font-size: .82rem; color: #d92d20; }

[data-bs-theme="dark"] .aira-error { color: #fda29b; }

.aira-quiet-link { display: block; margin-top: 14px; font-size: .82rem; text-align: center; color: var(--staff-muted); }

@media (max-width: 767.98px) {
    .aira-card { min-height: 0; }
    .aira-panel { padding: 28px 20px; }
    .otp-digit { width: 40px; height: 46px; }
}

/* ---------- Hub: top bar ---------- */
.navbar-top {
    background: linear-gradient(120deg, var(--aira-navy-1), var(--aira-navy-2));
    border-bottom: 0;
    box-shadow: none;
}

    .navbar-top .navbar-brand img { padding: 5px 8px; background: #fff; border-radius: 8px; box-sizing: content-box; width: 70px; }

    .navbar-top .fw-semibold { color: #fff; }

    .navbar-top .theme-control-toggle-label { color: #fff; background: rgba(255, 255, 255, .14); }

    .navbar-top .btn-phoenix-secondary { color: #fff; background: rgba(255, 255, 255, .14); border-color: transparent; box-shadow: none; }

        .navbar-top .btn-phoenix-secondary:hover { color: #fff; background: rgba(255, 255, 255, .24); }

/* ---------- Hub: page ---------- */
.hub-content { padding-top: 4.75rem; }

.hub-inner { max-width: 1240px; margin: 0 auto; }

.hub-page-head {
    align-items: center !important;
    margin-bottom: 12px;
    padding: 14px 18px;
    background: var(--staff-card);
    border: 1px solid var(--staff-border);
    border-radius: 12px;
    box-shadow: var(--staff-shadow);
}

.hub-title { display: flex; align-items: center; gap: 12px; min-width: 0; }

.hub-title-icon {
    flex: 0 0 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    font-size: 1.1rem;
    color: #fff;
    background: linear-gradient(135deg, var(--aira-navy-1), var(--aira-navy-2));
    border-radius: 10px;
}

.hub-page-head h2 { margin: 0 0 2px; font-size: 1.2rem; font-weight: 600; color: var(--staff-text); }

.hub-page-head p { margin: 0; font-size: .85rem; color: var(--staff-muted); }

.hub-banner {
    margin-bottom: 12px;
    padding: 14px 18px;
    background: var(--staff-card);
    border: 1px solid var(--staff-border);
    border-radius: 12px;
    box-shadow: var(--staff-shadow);
}

.hub-banner-icon { color: var(--staff-accent-text); background: var(--staff-tint); box-shadow: none; }

.hub-banner-title { color: var(--staff-text); font-weight: 600; }

.hub-banner-sub { color: var(--staff-muted); }

.hub-count-num { color: var(--staff-accent-text); font-weight: 700; }

.hub-section-head { margin: 18px 0 10px; }

.hub-section-title { font-size: .78rem; font-weight: 600; letter-spacing: .05em; color: var(--staff-muted); }

.hub-section-line { background: var(--staff-border); }

.hub-tile {
    background: var(--staff-card);
    border-color: var(--staff-border);
    box-shadow: var(--staff-shadow);
}

    .hub-tile:hover { border-color: var(--staff-accent); box-shadow: var(--staff-shadow-hover); }

.hub-tile-name { color: var(--staff-text); font-weight: 600; }

.hub-empty {
    padding: 44px 20px;
    background: var(--staff-card);
    border: 1px solid var(--staff-border);
    border-radius: 12px;
    box-shadow: var(--staff-shadow);
}

.hub-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 12px;
    font-size: 1.35rem;
    color: var(--staff-accent-text);
    background: var(--staff-tint);
    border-radius: 12px;
}

.hub-empty-title { display: block; font-size: 1rem; font-weight: 600; color: var(--staff-text); }

.hub-empty-hint { max-width: 460px; margin: 6px auto 0; font-size: .85rem; color: var(--staff-muted); }

a.hub-foot-tip {
    margin-top: 12px;
    color: var(--staff-muted);
    background: var(--staff-card);
    border: 1px solid var(--staff-border);
    border-radius: 12px;
}

    a.hub-foot-tip:hover { background: var(--staff-tint); }

.hub-foot-link { color: var(--staff-accent-text); }

@media (prefers-reduced-motion: reduce) {
    .aira-card, .aira-step, .aira-step > * { animation: none !important; }
}

/* ---------- small fixes shared by the sign-in pages ---------- */
.form-check-input:checked { background-color: var(--staff-accent); border-color: var(--staff-accent); }

.aira-field .form-control::placeholder { font-weight: 400; }

.aira-btn { height: auto; padding: 11px 16px; line-height: 1.3; }

@media (max-width: 479.98px) {
    .aira-meta { flex-direction: column; align-items: flex-start; gap: 6px; }
}

.aira-panel .text-body-quaternary, .aira-panel .text-body-tertiary { color: var(--staff-muted) !important; }

.verification-form, #otpInputs { width: 100%; }

@media (max-width: 479.98px) {
    #otpInputs { gap: 4px !important; }
    .otp-digit { width: 36px; }
}

/* the Hub uses the full width of the screen */
.hub-content .hub-inner { max-width: none; padding: 0; }

/* an empty grid must not pull the empty-state card up over the "Your apps" heading */
#hubGrid:empty { margin: 0; }

/* ---------- the sign-in panel's picture: one ID, one lock, every app (follows the form, js/aira-access.js) ---------- */
.aira-art { display: block; width: 100%; max-width: 340px; height: auto; margin: 14px auto; overflow: visible; }

.aira-wordmark .tagline { font-weight: 400; }

.ac-pill { fill: rgba(255, 255, 255, .12); stroke: rgba(255, 255, 255, .35); stroke-width: 1.5; }

.ac-led { fill: #fbbf24; transition: fill .4s ease; }

.ac-word { fill: #fff; font-family: "Poppins", system-ui, sans-serif; font-size: 14px; font-weight: 600; }

.ac-line, .ac-line path { fill: none; stroke: rgba(255, 255, 255, .2); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

.ac-flow, .ac-flow path { fill: none; stroke: #bfdbfe; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 4 12; animation: ac-flow .9s linear infinite; }

.ac-flow-card, .ac-flow-apps { opacity: 0; transition: opacity .5s ease; }

/* the card */
.ac-card { fill: rgba(255, 255, 255, .1); stroke: rgba(255, 255, 255, .4); stroke-width: 1.5; transition: fill .45s ease; }

.ac-clip { fill: rgba(255, 255, 255, .4); }

.ac-person { fill: rgba(255, 255, 255, .22); transition: fill .45s ease; }

.ac-bar-empty { fill: rgba(255, 255, 255, .16); }

.ac-bar-fill { fill: #bfdbfe; transform: scaleX(0); transform-box: fill-box; transform-origin: left center; transition: transform .5s cubic-bezier(.22, .8, .3, 1); }

.ac-bar-2 { transition-delay: .12s; }

/* the lock */
.ac-ring { fill: none; stroke: rgba(255, 255, 255, .5); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }

.ac-shield { fill: #fff; transition: fill .4s ease; }

.ac-lock rect { fill: #1e40af; }

.ac-lock { transition: opacity .25s ease; }

.ac-shackle { fill: none; stroke: #1e40af; stroke-width: 3.5; stroke-linecap: round; }

.ac-tick { fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .45s ease .15s; }

/* the apps */
.ac-apps rect { fill: rgba(255, 255, 255, .08); stroke: rgba(255, 255, 255, .25); stroke-width: 1.5; transition: fill .4s ease, stroke .4s ease; transition-delay: var(--d, 0s); }

.ac-apps path { fill: none; stroke: rgba(255, 255, 255, .3); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; transition: stroke .4s ease; transition-delay: var(--d, 0s); }

/* employee code typed: the card is theirs */
.aira-art:not([data-access="0"]) .ac-card { fill: rgba(255, 255, 255, .18); }

.aira-art:not([data-access="0"]) .ac-person { fill: #fff; }

.aira-art:not([data-access="0"]) .ac-bar-fill { transform: scaleX(1); }

.aira-art:not([data-access="0"]) .ac-flow-card { opacity: 1; }

/* password typed too: unlocked, and every app lights up */
.aira-art[data-access="2"] .ac-led { fill: #4ade80; }

.aira-art[data-access="2"] .ac-shield { fill: #22a06b; }

.aira-art[data-access="2"] .ac-lock { opacity: 0; }

.aira-art[data-access="2"] .ac-tick { stroke-dashoffset: 0; }

.aira-art[data-access="2"] .ac-ring { animation: ac-ring 2.6s ease-out infinite; }

.aira-art[data-access="2"] .ac-flow-apps { opacity: 1; }

.aira-art[data-access="2"] .ac-apps rect { fill: #fff; stroke: #fff; }

.aira-art[data-access="2"] .ac-apps path { stroke: #1e40af; }

@keyframes ac-flow { to { stroke-dashoffset: -16; } }

@keyframes ac-ring { 0% { opacity: .8; transform: scale(.9); } 100% { opacity: 0; transform: scale(1.35); } }

@media (max-height: 640px) { .aira-art { max-width: 230px; margin: 6px auto; } }

@media (prefers-reduced-motion: reduce) {
    .ac-flow, .ac-flow path, .aira-art[data-access="2"] .ac-ring { animation: none; }
    .ac-led, .ac-flow-card, .ac-flow-apps, .ac-card, .ac-person, .ac-bar-fill, .ac-shield, .ac-lock, .ac-tick, .ac-apps rect, .ac-apps path { transition: none; }
}

/* ---------- scrollbars in the app's style, on every page that loads this file ---------- */
:root { --staff-scroll: rgba(29, 78, 216, .32); --staff-scroll-hover: rgba(29, 78, 216, .6); }

[data-bs-theme="dark"] { --staff-scroll: rgba(147, 197, 253, .3); --staff-scroll-hover: rgba(147, 197, 253, .55); }

::-webkit-scrollbar { width: 8px; height: 8px; }

::-webkit-scrollbar-track { background: transparent; }

::-webkit-scrollbar-corner { background: transparent; }

::-webkit-scrollbar-thumb { background: var(--staff-scroll); background-clip: padding-box; border: 2px solid transparent; border-radius: 8px; }

    ::-webkit-scrollbar-thumb:hover { background: var(--staff-scroll-hover); background-clip: padding-box; border: 2px solid transparent; }

/* no arrow buttons */
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }

/* on the navy side menu */
    .navbar-vertical ::-webkit-scrollbar-thumb, .navbar-vertical::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .25); background-clip: padding-box; border: 2px solid transparent; }

        .navbar-vertical ::-webkit-scrollbar-thumb:hover, .navbar-vertical::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .45); background-clip: padding-box; border: 2px solid transparent; }

/* a browser without the custom shape (Firefox): thin and coloured. Chrome and Edge must not see this, or they ignore the shape above. */
@supports not selector(::-webkit-scrollbar) {
    * { scrollbar-width: thin; scrollbar-color: var(--staff-scroll) transparent; }
    .navbar-vertical, .navbar-vertical * { scrollbar-color: rgba(255, 255, 255, .25) transparent; }
}

/* the Hub: the same even gap under the top bar and between its blocks */
.hub-content { padding-top: calc(var(--phoenix-navbar-top-height, 4rem) + 14px); padding-left: 14px; padding-right: 14px; }

.hub-page-head, .hub-banner { margin-bottom: 14px; }

/* ---------- alerts: a white card, the colour only in its round icon ---------- */
#alertContainer { display: flex; flex-direction: column; gap: 8px; width: min(400px, calc(100vw - 32px)); top: 72px !important; right: 16px !important; padding: 0 !important; pointer-events: none; }

.aira-alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 12px 12px 14px;
    color: var(--staff-text);
    pointer-events: auto;
    background: var(--staff-card);
    border: 1px solid var(--staff-border);
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .06), 0 14px 34px rgba(15, 23, 42, .14);
    animation: aira-alert-in .2s ease-out backwards;
}

    .aira-alert.is-leaving { opacity: 0; transform: translateX(10px); transition: opacity .16s ease, transform .16s ease; }

@keyframes aira-alert-in { from { opacity: 0; transform: translateX(14px); } }

.aira-alert-icon { flex: 0 0 32px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; }

.aira-alert.is-success .aira-alert-icon { color: #067647; background: #dcfae6; }

.aira-alert.is-danger .aira-alert-icon { color: #b42318; background: #fee4e2; }

.aira-alert.is-warning .aira-alert-icon { color: #b54708; background: #fef0c7; }

.aira-alert.is-info .aira-alert-icon { color: var(--staff-accent-text); background: var(--staff-tint); }

[data-bs-theme="dark"] .aira-alert.is-success .aira-alert-icon { color: #75e0a7; background: rgba(23, 178, 106, .16); }

[data-bs-theme="dark"] .aira-alert.is-danger .aira-alert-icon { color: #fda29b; background: rgba(240, 68, 56, .16); }

[data-bs-theme="dark"] .aira-alert.is-warning .aira-alert-icon { color: #fec84b; background: rgba(247, 144, 9, .16); }

.aira-alert-text { flex: 1; min-width: 0; padding-top: 1px; overflow-wrap: anywhere; }

    .aira-alert-text b { display: block; font-size: .86rem; font-weight: 600; }

.aira-alert-msg { margin-top: 1px; font-size: .82rem; line-height: 1.4; color: var(--staff-muted); }

.aira-alert-close { flex: none; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; color: var(--staff-muted); background: transparent; border: 0; border-radius: 7px; transition: background-color .14s ease, color .14s ease; }

    .aira-alert-close:hover { color: var(--staff-text); background: var(--staff-page); }

@media (prefers-reduced-motion: reduce) {
    .aira-alert { animation: none; }
    .aira-alert.is-leaving, .aira-alert-close { transition: none; }
}

/* ---------- the Hub: a launchpad ---------- */
.hx-page { max-width: none !important; margin: 0; }

/* the details in the navy top bar */
.hx-nav-me { display: none; flex: 1 1 0; min-width: 0; gap: 0; align-items: center; margin: 0 16px; }

    /* long names shorten here; the logo and Sign out always keep their room */
    #navbarDefault .navbar-collapse { min-width: 0; }

    #navbarDefault .navbar-logo, #navbarDefault .navbar-nav { flex: 0 0 auto; }

    .hx-nav-me > div { flex: 0 1 auto; min-width: 0; padding: 0 18px; border-left: 1px solid rgba(255, 255, 255, .18); }

    .hx-nav-me dt { margin: 0; font-size: .68rem; font-weight: 500; line-height: 1.3; color: rgba(255, 255, 255, .72); }

    .hx-nav-me dd { margin: 0; overflow: hidden; font-size: .84rem; font-weight: 500; line-height: 1.35; color: #fff; text-overflow: ellipsis; white-space: nowrap; }

@media (min-width: 1200px) {
    .hx-nav-me:not(.d-none) { display: flex; }
    .hx-hero .hx-me { display: none !important; }
}

/* the banner */
.hx-hero { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding: 28px 32px 56px; overflow: hidden; color: #fff; background: radial-gradient(70% 140% at 100% 0, rgba(96, 165, 250, .4), transparent 62%), linear-gradient(115deg, #0b2a5b, #143a80 58%, #1d4ed8); border-radius: 20px; box-shadow: 0 16px 36px rgba(11, 42, 91, .2); }

    .hx-hero::after { content: ""; position: absolute; top: -130px; right: -70px; width: 340px; height: 340px; pointer-events: none; border: 44px solid rgba(255, 255, 255, .05); border-radius: 50%; }

.hx-hero-main, .hx-stats { position: relative; z-index: 1; }

.hx-hero-main { flex: 1 1 380px; min-width: 0; }

.hx-date { display: block; margin-bottom: 6px; font-size: .78rem; font-weight: 500; color: #bfdbfe; }

.hx-hero h1 { margin: 0 0 4px; font-size: 1.85rem; font-weight: 600; line-height: 1.2; color: #fff; }

.hx-hero p { margin: 0; font-size: .92rem; color: rgba(255, 255, 255, .85); }

.hx-me { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 14px 0 0; }

    .hx-me dt { margin: 0; font-size: .72rem; font-weight: 500; color: rgba(255, 255, 255, .72); }

    .hx-me dd { margin: 0; font-size: .88rem; font-weight: 500; color: #fff; overflow-wrap: anywhere; }

.hx-top-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }

.hx-btn { display: inline-flex; align-items: center; justify-content: center; padding: 9px 16px; font-size: .84rem; font-weight: 500; color: #fff; text-decoration: none; cursor: pointer; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .28); border-radius: 10px; transition: background-color .15s ease, border-color .15s ease; }

    .hx-btn:hover { color: #fff; background: rgba(255, 255, 255, .22); border-color: rgba(255, 255, 255, .45); }

    .hx-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.hx-stats { display: flex; gap: 10px; }

.hx-stat { min-width: 112px; padding: 14px 18px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); border-radius: 14px; }

    .hx-stat b { display: block; font-size: 1.7rem; font-weight: 600; line-height: 1.15; color: #fff; }

    .hx-stat span { display: block; margin-top: 2px; font-size: .74rem; color: rgba(255, 255, 255, .8); }

/* the search floats over the banner's edge */
.hx-find { position: relative; z-index: 2; margin: -30px 28px 26px; }

    .hx-find > .fas, .hx-find > svg { position: absolute; top: 50%; left: 22px; z-index: 1; font-size: 1rem; color: var(--staff-accent-text); transform: translateY(-50%); }

    .hx-find input { width: 100%; height: 60px; padding: 0 56px 0 54px; font-size: 1rem; color: var(--staff-text); background: var(--staff-card); border: 1px solid var(--staff-border); border-radius: 16px; outline: 0; box-shadow: 0 10px 30px rgba(15, 23, 42, .12); transition: border-color .15s ease, box-shadow .15s ease; }

        .hx-find input:focus { border-color: var(--staff-accent); box-shadow: 0 0 0 4px var(--aira-ring), 0 10px 30px rgba(15, 23, 42, .12); }

        .hx-find input::placeholder { color: var(--staff-muted); }

        .hx-find input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

    .hx-find kbd { position: absolute; top: 50%; right: 18px; padding: 2px 9px; font-family: inherit; font-size: .78rem; color: var(--staff-muted); background: var(--staff-page); border: 1px solid var(--staff-border); border-radius: 6px; box-shadow: none; transform: translateY(-50%); }

    .hx-find input:focus ~ kbd, .hx-find input:not(:placeholder-shown) ~ kbd { display: none; }

/* sections and cards */
.hx-block { margin-bottom: 26px; }

.hx-block-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }

    .hx-block-head h2 { margin: 0; font-size: 1rem; font-weight: 600; color: var(--staff-text); }

        .hx-block-head h2 .fas, .hx-block-head h2 svg { color: #d97706; }

.hx-count { font-size: .8rem; color: var(--staff-muted); }

.hx-filter { display: inline-flex; margin-left: auto; padding: 3px; background: var(--staff-card); border: 1px solid var(--staff-border); border-radius: 10px; }

    .hx-filter button { padding: 4px 14px; font-size: .78rem; color: var(--staff-muted); background: transparent; border: 0; border-radius: 7px; transition: background-color .15s ease, color .15s ease; }

        .hx-filter button.is-on { font-weight: 500; color: var(--staff-accent-text); background: var(--staff-tint); }

.hx-pad { display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: 12px; }

    .hx-pad:empty { display: none; }

.hx-app { position: relative; min-width: 0; }

    .hx-app.is-loading { pointer-events: none; opacity: .55; }

.hx-open { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: center; width: 100%; min-height: 80px; padding: 14px 38px 14px 14px; text-align: left; cursor: pointer; background: var(--staff-card); border: 1px solid var(--staff-border); border-radius: 14px; box-shadow: var(--staff-shadow); transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }

    .hx-open:hover { border-color: var(--staff-accent); box-shadow: var(--staff-shadow-hover); transform: translateY(-2px); }

    .hx-open:active { transform: none; }

    .hx-open:focus-visible { outline: 2px solid var(--staff-accent); outline-offset: 2px; }

.hx-icon { position: relative; grid-row: 1 / span 2; display: grid; place-items: center; width: 50px; height: 50px; font-size: .98rem; font-weight: 600; letter-spacing: .02em; color: #fff; background: linear-gradient(145deg, color-mix(in srgb, var(--app, #1d4ed8) 82%, #fff), var(--app, #1d4ed8)); border-radius: 14px; }

.hx-live { position: absolute; right: -3px; bottom: -3px; width: 15px; height: 15px; background: #17b26a; border: 3px solid var(--staff-card); border-radius: 50%; }

.hx-name { display: block; align-self: end; width: 100%; overflow: hidden; font-size: .88rem; font-weight: 500; line-height: 1.3; color: var(--staff-text); text-overflow: ellipsis; white-space: nowrap; }

.hx-when { display: block; align-self: start; width: 100%; margin-top: 2px; overflow: hidden; font-size: .74rem; color: var(--staff-muted); text-overflow: ellipsis; white-space: nowrap; }

.hx-pin { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; color: var(--staff-muted); background: var(--staff-card); border: 0; border-radius: 7px; opacity: 0; transition: opacity .12s ease, color .12s ease; }

    .hx-pin.is-on { color: #d97706; background: transparent; opacity: 1; }

    .hx-pin:hover { color: #d97706; }

.hx-app:hover .hx-pin, .hx-pin:focus-visible { opacity: 1; }

.hx-app-skel { display: grid; grid-template-columns: 50px 1fr; column-gap: 14px; align-items: center; min-height: 80px; padding: 14px; background: var(--staff-card); border: 1px solid var(--staff-border); border-radius: 14px; }

    .hx-app-skel .skel:first-child { width: 50px; height: 50px; border-radius: 14px; }

    .hx-app-skel .skel:last-child { width: 70%; height: 10px; }

@media (hover: none) {
    .hx-pin { opacity: 1; background: transparent; }
}

@media (max-width: 767.98px) {
    .hx-hero { padding: 22px 20px 50px; border-radius: 16px; }
    .hx-hero h1 { font-size: 1.4rem; }
    .hx-stats { flex: 1 1 100%; }
    .hx-stat { flex: 1 1 0; min-width: 0; padding: 10px 12px; }
    .hx-stat b { font-size: 1.3rem; }
    .hx-btn { flex: 1 1 100%; }
    .hx-find { margin: -26px 12px 22px; }
    .hx-find input { height: 52px; font-size: .9rem; }
    .hx-find kbd { display: none; }
    .hx-pad { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .hx-find input, .hx-open, .hx-btn, .hx-pin, .hx-filter button { transition: none; }
    .hx-open:hover { transform: none; }
}