/*
 * Finance Expert brand on the website, the store and the portal (2026-10-07).
 *
 * The owner asked for one brand across the website, the portal and the app,
 * after buho.com (the favourite), SpaceX and Origin Financial: moving from one
 * to the other must not feel like a change. This sheet is loaded after the
 * site's own (website.css, space.css, commerce.css, account.css) and changes
 * no structure — every section, card and link stays — only the brand: buho's
 * light ground and one blue to act, the app's type (Plus Jakarta Sans for
 * headings, Inter for text, Roboto Mono for small capital labels), pill
 * buttons and a floating pill header, SpaceX's full-bleed cinematic hero and
 * dark bands, Origin's calm, borderless cards.
 */

@font-face {
    font-family: "Plus Jakarta Sans";
    font-weight: 500;
    font-display: swap;
    src: url(/finance_expert_bridge/static/src/fonts/plus-jakarta-sans-500.woff2) format("woff2");
}
@font-face {
    font-family: "Plus Jakarta Sans";
    font-weight: 600;
    font-display: swap;
    src: url(/finance_expert_bridge/static/src/fonts/plus-jakarta-sans-600.woff2) format("woff2");
}
@font-face {
    font-family: "Plus Jakarta Sans";
    font-weight: 700;
    font-display: swap;
    src: url(/finance_expert_bridge/static/src/fonts/plus-jakarta-sans-700.woff2) format("woff2");
}
@font-face {
    font-family: "Roboto Mono";
    font-weight: 500;
    font-display: swap;
    src: url(/finance_expert_bridge/static/src/fonts/roboto-mono-500.woff2) format("woff2");
}
@font-face {
    font-family: "FE Inter";
    font-weight: 400;
    font-display: swap;
    src: url(/finance_expert_bridge/static/src/fonts/inter-400.ttf) format("truetype");
}
@font-face {
    font-family: "FE Inter";
    font-weight: 500;
    font-display: swap;
    src: url(/finance_expert_bridge/static/src/fonts/inter-500.ttf) format("truetype");
}
@font-face {
    font-family: "FE Inter";
    font-weight: 600 700;
    font-display: swap;
    src: url(/finance_expert_bridge/static/src/fonts/inter-600.ttf) format("truetype");
}

/* From page to page the header stays and the page cross-fades (same origin). */
@view-transition {
    navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 200ms;
}

/* ── Tokens ─────────────────────────────────────────────────────────── */
.fe-site,
.fe-brand-site {
    --fe-ink: #171717;
    --fe-muted: #4b5160;
    --fe-subtle: #5e6470;
    --fe-paper: #f8f8f8;
    --fe-line: rgba(23, 23, 23, 0.08);
    --fe-line-strong: rgba(23, 23, 23, 0.16);
    --fe-blue: #005aff;
    --fe-blue-text: #0050e0;
    --fe-blue-display: #006eff;
    --fe-tint: #e3eeff;
    --fe-night: #07090f;
    --fe-green: #005aff;
    --fe-display: "Plus Jakarta Sans", "FE Inter", system-ui, sans-serif;
    --fe-text: "FE Inter", system-ui, sans-serif;
    --fe-label: "Roboto Mono", ui-monospace, monospace;
    --fe-ease: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.fe-site {
    color: var(--fe-ink);
    background: var(--fe-paper);
    font-family: var(--fe-text);
}
.fe-brand-site {
    --bs-primary: #005aff;
    --bs-primary-rgb: 0, 90, 255;
    --primary: #005aff;
    --bs-link-color: #0050e0;
    --bs-link-color-rgb: 0, 80, 224;
    --bs-link-hover-color: #171717;
    background: var(--fe-paper);
    color: var(--fe-ink);
    font-family: var(--fe-text);
}
.fe-site ::selection {
    background: var(--fe-tint);
    color: var(--fe-ink);
}
.fe-site :focus-visible,
.fe-brand-site a:focus-visible,
.fe-account-page :focus-visible {
    outline: 3px solid var(--fe-blue);
    outline-offset: 3px;
}

/* ── Type ───────────────────────────────────────────────────────────── */
.fe-site h1,
.fe-site h2,
.fe-site h3,
.fe-brand-site h1,
.fe-brand-site h2,
.fe-brand-site h3 {
    font-family: var(--fe-display);
    font-weight: 500;
    letter-spacing: -0.035em;
}
.fe-brand-site h1,
.fe-brand-site h2,
.fe-brand-site h3 {
    color: var(--fe-ink);
}
/* The emphasised words: the display face, bold and blue — never italic serif. */
.fe-site .fe-serif,
.fe-site h1 em,
.fe-account-intro h1 em {
    font-family: var(--fe-display);
    font-style: normal;
    font-weight: 700;
    color: var(--fe-blue-display);
    letter-spacing: inherit;
}
.fe-site .fe-kicker,
.fe-site .fe-demo-tag,
.fe-feature-links small,
.fe-hero-bottom,
.fe-site .fe-test-banner {
    font-family: var(--fe-label);
    font-weight: 500;
    letter-spacing: 0.06em;
}
.fe-site .fe-kicker {
    font-size: 12px;
    color: var(--fe-muted);
}

/* ── Icons and the mark ─────────────────────────────────────────────── */
.fe-icon,
.fe-logo {
    display: inline-block;
    flex-shrink: 0;
    vertical-align: middle;
}
.fe-site .fe-brand {
    font-family: var(--fe-display);
    font-weight: 700;
    letter-spacing: -0.03em;
    font-size: 20px;
    gap: 10px;
}
.fe-site .fe-brand .fe-logo {
    width: 28px;
    height: 28px;
}
/* A link's arrow slides toward where it leads. */
.fe-site a .fe-icon-arrow,
.fe-site button .fe-icon-arrow,
.fe-brand-site a .fe-icon-arrow {
    transition: transform 200ms var(--fe-ease);
}
.fe-site a:hover .fe-icon-arrow,
.fe-site button:hover .fe-icon-arrow,
.fe-brand-site a:hover .fe-icon-arrow {
    transform: translateX(3px);
}

/* ── Buttons: the app's pill ────────────────────────────────────────── */
.fe-site .fe-btn {
    gap: 10px;
    min-height: 48px;
    padding: 12px 24px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--fe-blue);
    color: #fff;
    font-family: var(--fe-text);
    font-size: 15px;
    font-weight: 600;
    transition:
        background 200ms var(--fe-ease),
        color 200ms var(--fe-ease),
        border-color 200ms var(--fe-ease);
}
.fe-site .fe-btn:hover {
    background: var(--fe-ink);
    color: #fff;
    transform: none;
}
.fe-site .fe-btn-dark {
    background: var(--fe-blue);
    color: #fff;
}
.fe-site .fe-btn-dark:hover {
    background: var(--fe-ink);
}
.fe-site .fe-btn-outline {
    background: transparent;
    border-color: var(--fe-line-strong);
    color: inherit;
}
.fe-site .fe-btn-outline:hover {
    background: rgba(127, 127, 127, 0.12);
    color: inherit;
}
.fe-site .fe-text-link {
    gap: 8px;
    border-bottom: 0;
    padding-bottom: 0;
    color: var(--fe-blue-text);
    font-size: 15px;
    font-weight: 500;
}
.fe-site .fe-text-link:hover {
    color: var(--fe-ink);
}
/* On the dark bands a button turns white when pointed at, a link stays white. */
.fe-site :is(.fe-hero, .fe-close, .fe-auth-art) .fe-btn:hover {
    background: #fff;
    color: #171717;
}
.fe-site :is(.fe-hero, .fe-close) .fe-text-link {
    color: #fff;
}
.fe-site :is(.fe-hero, .fe-close) .fe-text-link:hover {
    color: rgba(255, 255, 255, 0.75);
}

/* ── The header: a pill that floats over the page ───────────────────── */
.fe-site .fe-header {
    height: 64px;
    margin-top: 16px;
    padding: 0 10px 0 22px;
    gap: 24px;
    border: 1px solid var(--fe-line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(16px);
    color: var(--fe-ink);
    view-transition-name: fe-header;
}
.fe-site .fe-header nav a {
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--fe-ink);
}
.fe-site .fe-header nav a:hover,
.fe-site .fe-header nav a[aria-current="page"] {
    color: var(--fe-blue-text);
}
.fe-site .fe-header a.fe-header-cta {
    min-height: 44px;
    padding: 0 20px;
    border-color: transparent;
    background: var(--fe-blue);
    color: #fff;
    font-size: 15px;
}
.fe-site .fe-header a.fe-header-cta:hover {
    background: var(--fe-ink);
    color: #fff;
}
.fe-brand-site .fe-commerce-header {
    background: transparent;
    color: var(--fe-ink);
}
.fe-site .fe-interior-header {
    background: transparent;
    color: var(--fe-ink);
}

/* The person's menu: who is signed in, and four places. */
.fe-account-menu summary.fe-account-summary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 4px 14px 4px 4px;
    border: 0;
    border-radius: 999px;
    background: #f0f2f6;
    color: var(--fe-ink);
    font-size: 14px;
    font-weight: 500;
}
.fe-account-menu summary.fe-account-summary:hover,
.fe-account-menu[open] summary.fe-account-summary {
    background: #e7eaf0;
}
.fe-account-menu .fe-menu-avatar {
    width: 36px;
    height: 36px;
    margin: 0;
    border: 0;
    border-radius: 50%;
    object-fit: cover;
    background: var(--fe-tint);
}
.fe-account-menu[open] summary .fe-icon-chevron-down {
    transform: rotate(180deg);
}
.fe-site .fe-account-menu > div,
.fe-brand-site .fe-account-menu > div {
    top: 54px;
    width: 280px;
    padding: 6px !important;
    border: 1px solid var(--fe-line) !important;
    border-radius: 16px !important;
    background: #fff !important;
    color: var(--fe-ink);
    box-shadow:
        0 16px 40px -12px rgba(0, 36, 118, 0.25),
        0 2px 6px rgba(0, 36, 118, 0.08) !important;
}
.fe-account-menu .fe-menu-person {
    display: grid;
    gap: 2px;
    padding: 12px 12px 14px;
    margin: 0 0 4px;
    border-bottom: 1px solid var(--fe-line);
}
.fe-account-menu .fe-menu-person strong {
    font-size: 14px;
}
.fe-account-menu .fe-menu-person small {
    color: var(--fe-subtle);
    font-size: 12px;
}
.fe-account-menu > div > a,
.fe-account-menu .fe-menu-signout button {
    display: flex !important;
    align-items: center;
    justify-content: flex-start !important;
    gap: 12px;
    min-height: 40px;
    padding: 0 12px !important;
    border: 0;
    border-radius: 10px !important;
    background: transparent;
    color: var(--fe-ink) !important;
    font-family: var(--fe-text);
    font-size: 14px !important;
    font-weight: 500;
    text-align: left;
    width: 100%;
}
.fe-account-menu > div > a:hover,
.fe-account-menu .fe-menu-signout button:hover {
    background: #f0f2f6 !important;
}
.fe-account-menu .fe-icon {
    width: 18px;
    height: 18px;
}
.fe-account-menu .fe-menu-signout {
    margin: 4px 0 0;
    padding: 4px 0 0;
    border-top: 1px solid var(--fe-line);
}
.fe-account-menu .fe-menu-signout button {
    color: var(--fe-muted) !important;
    cursor: pointer;
}

/* The phone's menu. */
.fe-site .fe-mobile-nav summary {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #f0f2f6;
    color: var(--fe-ink);
}
.fe-site .fe-mobile-nav nav {
    top: 60px;
    min-width: 260px;
    padding: 6px;
    gap: 0;
    border: 1px solid var(--fe-line);
    border-radius: 16px;
    background: #fff;
    color: var(--fe-ink);
    box-shadow:
        0 16px 40px -12px rgba(0, 36, 118, 0.25),
        0 2px 6px rgba(0, 36, 118, 0.08);
}
.fe-site .fe-mobile-nav nav a,
.fe-site .fe-mobile-nav nav button {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 12px;
    border-radius: 10px;
    font-size: 15px;
    text-align: left;
    width: 100%;
}
.fe-site .fe-mobile-nav nav a:hover,
.fe-site .fe-mobile-nav nav button:hover {
    background: #f0f2f6;
}
.fe-site .fe-mobile-nav nav a[aria-current="page"] {
    color: var(--fe-blue-text);
    font-weight: 600;
}
.fe-site .fe-mobile-nav nav .fe-mobile-primary {
    background: var(--fe-blue);
    color: #fff;
    font-weight: 600;
    margin: 6px 0;
}
.fe-site .fe-mobile-nav nav .fe-mobile-primary:hover {
    background: var(--fe-ink);
}

/* ── The hero: SpaceX's full-bleed horizon, in the brand's blue ─────── */
.fe-site .fe-hero {
    background-color: #001240;
}
.fe-site .fe-hero:before {
    background:
        linear-gradient(90deg, rgba(0, 14, 52, 0.9) 0%, rgba(0, 36, 118, 0.55) 55%, rgba(0, 36, 118, 0.06) 100%),
        linear-gradient(0deg, rgba(0, 10, 36, 0.88), transparent 58%);
}
.fe-site .fe-hero h1 {
    font-family: var(--fe-display);
    font-weight: 600;
    letter-spacing: -0.045em;
}
.fe-site .fe-hero .fe-serif {
    color: #8fb3ff;
}
.fe-site .fe-hero .fe-kicker {
    color: rgba(255, 255, 255, 0.72);
}
.fe-site .fe-hero-main {
    padding-top: 104px;
}
.fe-site .fe-hero-bottom {
    font-size: 11px;
}
.fe-site .fe-orbit-card {
    border-radius: 22px;
    border-color: rgba(255, 255, 255, 0.24);
    background: rgba(255, 255, 255, 0.1);
}
.fe-site .fe-orbit-card path {
    stroke: #8fb3ff;
}
.fe-site .fe-orbit-card .fe-dot {
    background: #8fb3ff;
}

/* ── Light sections: Origin's calm cards on buho's ground ───────────── */
.fe-site .fe-principles b {
    color: var(--fe-blue);
}
.fe-site .fe-principles span {
    font-size: 14px;
}
.fe-site .fe-section-heading > p {
    font-size: 16px;
    color: var(--fe-muted);
}
.fe-site .fe-dashboard {
    border: 0;
    border-radius: 30px;
    box-shadow: none;
}
.fe-site .fe-sidebar {
    background: #f8f8f8;
    border-right: 1px solid var(--fe-line);
}
.fe-site .fe-sidebar-menu span {
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 10px;
}
.fe-site .fe-sidebar-menu span:first-child {
    background: var(--fe-tint);
    color: var(--fe-blue-text);
}
.fe-site .fe-stat {
    border-color: var(--fe-line);
    border-radius: 16px;
}
.fe-site .fe-stat:first-child {
    background: var(--fe-tint);
}
.fe-site .fe-stat em {
    color: var(--fe-blue-text);
}
.fe-site .fe-chart {
    border-color: var(--fe-line);
    border-radius: 16px;
}
.fe-site .fe-chart path[stroke="#739659"] {
    stroke: var(--fe-blue);
}
.fe-site .fe-chart stop {
    stop-color: var(--fe-blue);
}
.fe-site .fe-chart path[stroke="#e8ede5"] {
    stroke: #eef0f4;
}
.fe-site .fe-chart .fe-track {
    background: #eef0f4;
}
.fe-site .fe-chart > .fe-track span {
    background: var(--fe-blue) !important;
}
.fe-site .fe-chart > .fe-track:nth-child(5) span {
    background: #7fa8ff !important;
}
.fe-site .fe-chart > .fe-track:nth-child(7) span {
    background: #b8cdf6 !important;
}
.fe-site .fe-demo-tag {
    background: #f0f2f6;
    color: var(--fe-subtle);
    border-radius: 999px;
}
.fe-site .fe-feature-links article {
    border-top-color: var(--fe-line-strong);
}
.fe-site .fe-feature-links small {
    color: var(--fe-blue-text);
}
.fe-site .fe-feature-links p,
.fe-site .fe-story p {
    font-size: 15px;
}
.fe-site .fe-story {
    background: var(--fe-tint);
}
.fe-site .fe-calendar {
    background: #fff;
    border-radius: 22px;
    box-shadow: 0 24px 60px -24px rgba(0, 36, 118, 0.25);
}
.fe-site .fe-calendar-row {
    border-top-color: var(--fe-line);
}
.fe-site .fe-calendar-date {
    background: var(--fe-tint);
    color: var(--fe-blue-text);
    border-radius: 10px;
}
.fe-site .fe-calendar-foot {
    background: var(--fe-tint);
    color: var(--fe-blue-text);
    border-radius: 12px;
}
.fe-site .fe-detail-card {
    background: #fff;
    border-radius: 22px;
}
.fe-site .fe-detail-card .fe-account-row {
    border-bottom-color: var(--fe-line);
}
.fe-site .fe-feature-detail {
    border-top-color: var(--fe-line);
}

/* ── Plans ──────────────────────────────────────────────────────────── */
.fe-site .fe-test-banner {
    background: #fef4d6;
    border-color: #f8e3a1;
    color: #8a5a00;
    border-radius: 12px;
}
.fe-site .fe-commerce-plan {
    border: 0;
    border-radius: 30px;
    box-shadow: none;
}
.fe-site .fe-commerce-plan:first-child {
    outline: 2px solid var(--fe-blue);
}
.fe-site .fe-commerce-plan:nth-child(2) {
    background: var(--fe-night);
    border-color: var(--fe-night);
}
.fe-site .fe-commerce-plan h3,
.fe-site .fe-price {
    font-family: var(--fe-display);
    font-weight: 600;
}
.fe-site .fe-commerce-plan .fe-btn {
    border-radius: 999px;
    justify-content: center;
}
.fe-site .fe-commerce-plan .fe-btn:first-of-type {
    background: var(--fe-blue);
    border-color: var(--fe-blue);
    color: #fff;
}
.fe-site .fe-commerce-plan .fe-btn:hover {
    background: var(--fe-ink);
    border-color: var(--fe-ink);
    color: #fff;
}
.fe-site .fe-commerce-note {
    font-size: 13px;
    color: var(--fe-subtle);
}

/* ── Dark bands: SpaceX ─────────────────────────────────────────────── */
.fe-site .fe-close {
    background: var(--fe-night);
}
.fe-site .fe-close .fe-serif {
    color: #8fb3ff;
}
.fe-site .fe-footer {
    background: var(--fe-night);
    color: rgba(240, 240, 250, 0.72);
}
.fe-site .fe-footer p,
.fe-site .fe-footer-bottom {
    color: rgba(240, 240, 250, 0.6);
}
.fe-site .fe-footer-top,
.fe-site .fe-footer-bottom {
    border-color: rgba(255, 255, 255, 0.1);
}
.fe-site .fe-footer-links a:hover {
    color: #fff;
}

/* ── Forms: contact, sign-in, the portal ────────────────────────────── */
.fe-site .fe-contact-form {
    border: 0;
    border-radius: 30px;
}
.fe-site .fe-contact-form :is(input, textarea, select),
.fe-site .fe-account-form :is(input, textarea),
.fe-brand-site :is(.form-control, .form-select) {
    border: 1px solid var(--fe-line-strong);
    border-radius: 12px;
    background: #fff;
    color: var(--fe-ink);
    min-height: 46px;
}
.fe-site .fe-contact-form :is(input, textarea, select):focus,
.fe-site .fe-account-form :is(input, textarea):focus,
.fe-brand-site :is(.form-control, .form-select):focus {
    border-color: var(--fe-blue);
    box-shadow: 0 0 0 3px rgba(0, 90, 255, 0.15);
    outline: none;
}
.fe-site .fe-auth-entry h1 {
    font-weight: 500;
}
.fe-site .fe-auth-art {
    border-radius: 30px;
    background:
        linear-gradient(180deg, rgba(11, 76, 224, 0.92), rgba(0, 36, 118, 0.96)),
        url("/web/image/finance_expert_website.hero_image") center/cover;
}
.fe-site .fe-auth-art .fe-serif {
    color: #8fb3ff;
}
.fe-site .fe-auth-art-card {
    border-radius: 22px;
}
.fe-site .fe-auth-bars i {
    background: rgba(255, 255, 255, 0.3);
}
.fe-site .fe-auth-bars i:nth-child(8) {
    background: #fff;
}
.fe-site .fe-auth-links a {
    color: var(--fe-blue-text);
    text-decoration: none;
}

/* ── Bootstrap pages of the store and the portal ────────────────────── */
.fe-brand-site .btn-primary {
    --bs-btn-bg: #005aff;
    --bs-btn-border-color: #005aff;
    --bs-btn-hover-bg: #171717;
    --bs-btn-hover-border-color: #171717;
    --bs-btn-active-bg: #171717;
    background: #005aff;
    border-color: #005aff;
    border-radius: 999px;
}
.fe-brand-site :is(.btn-secondary, .btn-light) {
    background: #f0f2f6;
    border-color: #f0f2f6;
    color: var(--fe-ink);
    border-radius: 999px;
}
.fe-brand-site .btn-outline-primary {
    color: var(--fe-blue-text);
    border-color: var(--fe-blue);
    border-radius: 999px;
}
.fe-brand-site .btn-outline-primary:hover {
    background: var(--fe-blue);
    color: #fff;
}
.fe-brand-site .card {
    border: 0;
    border-radius: 22px;
    box-shadow: none;
}
.fe-brand-site :is(.text-primary, .text-primary-emphasis) {
    color: var(--fe-blue-text) !important;
}
.fe-brand-site .bg-primary {
    background-color: var(--fe-blue) !important;
}
.fe-brand-site .alert-info {
    background: var(--fe-tint);
    border-color: var(--fe-tint);
    color: #002476;
}
.fe-brand-site > main,
.fe-brand-site .o_portal_wrap {
    background: var(--fe-paper);
    color: var(--fe-ink);
}

/* ── Mi cuenta (the portal's own pages) ─────────────────────────────── */
.fe-site.fe-account-page {
    background: var(--fe-paper);
    color: var(--fe-ink);
}
.fe-account-intro h1 {
    letter-spacing: -0.035em;
}
.fe-account-intro p {
    color: var(--fe-muted);
}
.fe-account-tabs {
    width: fit-content;
    max-width: 100%;
    gap: 4px;
    padding: 4px;
    border: 0;
    border-radius: 999px;
    background: rgba(23, 23, 23, 0.05);
}
.fe-account-tabs a {
    display: inline-flex;
    align-items: center;
    padding: 10px 18px;
    border-radius: 999px;
    color: var(--fe-muted);
    font-weight: 500;
}
.fe-account-tabs a:hover {
    color: var(--fe-ink);
}
.fe-account-tabs a[aria-current] {
    border-bottom: 0;
    background: #fff;
    color: var(--fe-ink);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(23, 23, 23, 0.08);
}
.fe-account-card,
.fe-account-plan {
    border: 0;
    border-radius: 30px;
}
.fe-account-card p {
    color: var(--fe-muted);
}
.fe-account-card a {
    color: var(--fe-blue-text);
}
.fe-account-card a:hover {
    color: var(--fe-ink);
}
.fe-account-plan {
    background: linear-gradient(180deg, #0b4ce0, #002476);
}
.fe-site.fe-account-page .fe-account-plan h2 {
    color: #fff;
}
.fe-site.fe-account-page .fe-account-plan .fe-btn {
    background: #fff;
    color: #171717;
}
.fe-site.fe-account-page .fe-account-plan .fe-btn:hover {
    background: #171717;
    color: #fff;
}
.fe-site.fe-account-page .fe-plan-status {
    border-color: rgba(255, 255, 255, 0.4);
    font-family: var(--fe-label);
}
.fe-account-caption {
    color: rgba(255, 255, 255, 0.72);
}
.fe-account-test {
    color: #fff;
}
.fe-account-shortcuts > a {
    color: var(--fe-ink);
}
.fe-shortcut-icon {
    background: var(--fe-tint);
    color: var(--fe-blue);
    border-radius: 14px;
}
.fe-account-shortcuts h2 {
    display: flex;
    align-items: center;
    gap: 8px;
}
.fe-order-row,
.fe-ticket-row {
    border-color: var(--fe-line);
}
.fe-order-actions button {
    border-color: var(--fe-line-strong);
    background: #fff;
    color: var(--fe-ink);
    border-radius: 999px;
}
.fe-order-actions button:hover {
    background: #f0f2f6;
}
.fe-ticket-message {
    background: #f0f2f6;
    border-radius: 16px;
}
.fe-account-help {
    border-top-color: var(--fe-line);
    color: var(--fe-muted);
}
.fe-account-help a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--fe-blue-text);
}
.fe-account-text-button {
    color: var(--fe-blue-text);
}
.fe-account-photo {
    background: var(--fe-tint);
}

/* ── The loader: the app's, on the website and the portal ───────────── */
.fe-loader {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 16px;
    background: #f8f8f8;
    color: #171717;
    font-family: "FE Inter", system-ui, sans-serif;
    opacity: 0;
    transition: opacity 200ms ease;
}
.fe-loader[hidden] {
    display: none;
}
.fe-loader.is-on {
    opacity: 1;
    transition-delay: 300ms;
}
.fe-loader-orbit {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    animation: fe-loader-pulse 1.6s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}
.fe-loader-message {
    margin: 0;
    color: #4b5160;
    font-size: 15px;
    font-weight: 500;
}
.fe-loader-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 8%;
    background: #005aff;
}
.fe-loader.is-on .fe-loader-progress {
    animation: fe-loader-progress 8s cubic-bezier(0.08, 0.6, 0.2, 1) forwards;
}
@keyframes fe-loader-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 90, 255, 0.35);
    }
    70% {
        box-shadow: 0 0 0 14px rgba(0, 90, 255, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(0, 90, 255, 0);
    }
}
@keyframes fe-loader-progress {
    to {
        width: 88%;
    }
}

@media (max-width: 800px) {
    .fe-site .fe-header {
        height: 60px;
        margin-top: 10px;
        padding-left: 16px;
    }
    .fe-account-tabs {
        border-radius: 16px;
        overflow-x: auto;
    }
}
@media (prefers-reduced-motion: reduce) {
    .fe-loader-orbit,
    .fe-loader.is-on .fe-loader-progress {
        animation: none;
    }
    .fe-site a .fe-icon-arrow,
    .fe-site button .fe-icon-arrow,
    .fe-brand-site a .fe-icon-arrow {
        transition: none;
    }
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none;
    }
}