/*!************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./node_modules/@marketforge/ui/src/styles/tokens.css ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************/
@layer tokens {
  :root {
    --mf-popover-padding: var(--mf-space-text);
    --mf-popover-row-gap: var(--mf-space-text);
    --mf-popover-row-height: 34px;
    --mf-popover-icon-size: 14px;
    --mf-radius-hero: var(--mf-border-radius);
    --mf-radius-hero-icon: var(--mf-border-radius);
    --mf-radius-brand-mark: var(--mf-border-radius);
    --mf-radius-tile: var(--mf-border-radius);
    --mf-radius-notification-card: var(--mf-border-radius);
    --mf-radius-notification-control: var(--mf-border-radius);
    --mf-radius-notification-switch: var(--mf-border-radius);
    --mf-radius-resource-icon: var(--mf-border-radius);
    --mf-color-icon-green-start: #34c759;
    --mf-color-icon-green-end: #248a3d;
    --mf-color-icon-red-start: #ff6961;
    --mf-color-icon-red-end: #ff3b30;
    --mf-color-icon-blue-end: #0a84ff;
    --mf-color-icon-violet-end: #5e5ce6;
    --mf-color-icon-gray-start: #8e8e93;
    --mf-color-icon-gray-end: #636366;
    --mf-color-icon-navigation-background: var(--mf-color-bg);
    --mf-color-icon-navigation-symbol: var(--mf-color-muted);

    --mf-color-brand-highlight: #64d2ff;
    --mf-border-radius: 18px;
    --mf-surface-product-radius: var(--mf-border-radius);
    --mf-button-public-compact-height: 34px;
    --mf-button-ghost-height: 42px;
    --mf-button-ghost-padding: var(--mf-button-padding-inline);
    --mf-button-content-gap: var(--mf-space-inline);
    --mf-button-padding-inline: var(--mf-space-group);
    --mf-field-padding-inline: var(--mf-space-3);
    --mf-widget-heading-gap: var(--mf-space-inline);
    --mf-widget-content-gap: var(--mf-space-group);
    --mf-segmented-track-gap: 1px;
    --mf-segmented-track-padding: 1px;
    --mf-segmented-content-gap: var(--mf-space-inline);
    --mf-segmented-padding-inline: var(--mf-space-inline);
    --mf-control-compact-primary-foreground: #ffffff;
    --mf-button-public-secondary-background: rgb(255 255 255 / 78%);
    --mf-button-product-secondary-background: color-mix(in srgb, var(--mf-color-panel-raised) 82%, transparent);
    --mf-control-disabled-opacity: 0.52;
    --mf-button-compact-pressed-brightness: 0.96;
    --mf-button-compact-transition-duration: 150ms;
    --mf-control-product-height: 36px;
    --mf-field-height: var(--mf-control-product-height);
    --mf-field-icon-size: 15px;
    --mf-control-product-padding: var(--mf-button-padding-inline);
    --mf-control-product-gap: var(--mf-button-content-gap);

    color-scheme: dark;

    --accent: #0a84ff;
    --accent-strong: #64d2ff;
    --accent-rgb: 10, 132, 255;

    /* Product hierarchy: content, grouped surfaces, functional chrome. */
    --mf-color-bg: #000000;
    --mf-color-sidebar: #161617;
    --mf-color-bg-elevated: #161617;
    --mf-color-panel: #101012;
    --mf-color-panel-raised: #18181a;
    --mf-color-input: #232325;
    --mf-border-width: 1px;
    --mf-border-style: solid;
    --mf-border-rule: var(--mf-border-width) var(--mf-border-style) var(--mf-color-border);
    --mf-color-border-light: #e8e8e8;
    --mf-color-border-dark: #323234;
    --mf-color-sidebar-divider: var(--mf-color-border-dark);
    --mf-color-border: var(--mf-color-border-dark);
    --mf-color-border-subtle: var(--mf-color-border);

    /* One visual contract for separators in the product's mobile layouts. */
    --mf-section-divider-color: var(--mf-color-border);
    --mf-divider-rule: var(--mf-border-width) var(--mf-border-style) var(--mf-section-divider-color);
    --mf-divider-width: var(--mf-border-width);
    --mf-color-border-strong: rgb(var(--accent-rgb, 126, 207, 152), 0.38);
    --mf-color-primary: var(--mf-color-accent);
    --mf-color-text: #f5f5f7;
    --mf-color-muted: #a1a1a6;
    --mf-color-subtle: #86868b;
    --mf-color-control-selected: var(--mf-color-text);
    --mf-color-on-control-selected: #1d1d1f;
    --mf-segmented-background: #2c2c2e;
    --mf-segmented-border: #545458;
    --mf-segmented-hover: #3a3a3c;
    --mf-segmented-text: var(--mf-color-muted);
    --mf-segmented-selected: var(--mf-color-control-selected);
    --mf-segmented-selected-text: var(--mf-color-on-control-selected);
    --mf-color-highlight: rgb(255 255 255 / 8%);
    --mf-blur-control-light-background: rgb(255 255 255 / 78%);
    --mf-blur-control-light-border: rgb(0 0 0 / 12%);
    --mf-blur-control-light-shadow: 0 8px 28px rgb(0 0 0 / 14%), 0 2px 6px rgb(0 0 0 / 6%);
    --mf-blur-control-light-filter: blur(12px);
    --mf-blur-control-light-ink: #1d1d1f;
    --mf-blur-control-light-opaque: #ffffff;
    --mf-blur-control-dark-background: rgb(28 28 30 / 78%);
    --mf-blur-control-dark-border: rgb(255 255 255 / 20%);
    --mf-blur-control-dark-shadow: 0 0 transparent;
    --mf-blur-control-dark-filter: blur(12px);
    --mf-blur-control-dark-ink: #ffffff;
    --mf-blur-control-dark-opaque: #1c1c1e;
    --mf-blur-control-background: var(--mf-blur-control-dark-background);
    --mf-blur-control-border: var(--mf-blur-control-dark-border);
    --mf-blur-control-shadow: var(--mf-blur-control-dark-shadow);
    --mf-blur-control-filter: var(--mf-blur-control-dark-filter);
    --mf-chrome-background: var(--mf-blur-control-background);
    --mf-chrome-background-strong: var(--mf-blur-control-background);
    --mf-chrome-border: var(--mf-blur-control-border);
    --mf-chrome-highlight: transparent;
    --mf-auth-accent: #0071e3;
    --mf-auth-ink: #1d1d1f;
    --mf-auth-muted: #6e6e73;
    --mf-auth-page: #f5f5f7;
    --mf-auth-page-start: #ffffff;
    --mf-auth-page-end: #ececf1;
    --mf-auth-surface: #ffffff;
    --mf-auth-logo-background: #1d1d1f;
    --mf-auth-logo-mark: #a7d8ff;
    --mf-auth-brand-shadow: none;
    --mf-auth-logo-shadow: none;
    --mf-auth-header-surface: #111318;
    --mf-auth-header-surface-deep: #050608;
    --mf-auth-header-ink: #f5f5f7;
    --mf-auth-header-muted: #a1a1a6;
    --mf-mask-opaque: #000000;
    --mf-auth-header-accent: #64d2ff;
    --mf-auth-card-shadow: inset 0 1px 0 rgb(255 255 255 / 90%), 0 36px 100px rgb(22 40 70 / 18%);
    --mf-color-accent: var(--accent);
    --mf-color-accent-strong: var(--accent-strong);
    --mf-color-on-accent: #ffffff;
    --mf-color-avatar-text: #ffffff;
    --mf-color-on-danger: #ffffff;
    --mf-control-danger-foreground: light-dark(var(--mf-color-on-danger), #071009);
    --mf-color-danger-light: #d70015;
    --mf-color-danger: #ff453a;
    --mf-color-danger-rgb: 255 69 58;
    --mf-color-warning: #e5b96f;
    --mf-color-warning-rgb: 229 185 111;
    --mf-color-info: #64d2ff;
    --mf-color-info-rgb: 100 210 255;
    --mf-color-success: #30d158;
    --mf-color-success-rgb: 48 209 88;

    /* BEGIN generated accent references — npm run generate:colors */
    --mf-accent-teal: #56c7bd;
    --mf-accent-blue: #7ba7e8;
    --mf-accent-green: #7ecf98;
    --mf-accent-pink: #df8ab2;
    --mf-accent-violet: #a695e6;

    /* END generated accent references */

    /* Additional chart series, independent of the selected appearance accent. */
    --mf-accent-orange: #e5a66f;
    --mf-accent-purple: #aa8be8;
    --mf-color-exchange-binance: #f0b90b;
    --mf-color-exchange-bybit: #f6a500;
    --mf-color-exchange-kraken: #5741d9;
    --mf-color-exchange-coinbase: #0052ff;
    --mf-color-exchange-bitget: #00f0ff;
    --mf-color-asset-btc: #f7931a;
    --mf-color-asset-eth: #627eea;
    --mf-color-asset-eur-background: #165bb8;
    --mf-color-asset-eur-mark: #ffdd00;
    --mf-color-asset-xrp: #0b0b0b;
    --mf-color-asset-bnb: #f3ba2f;
    --mf-color-asset-bnb-mark: #181a20;
    --mf-color-asset-usdt: #26a17b;
    --mf-color-asset-usdc: #2775ca;
    --mf-color-asset-ada: #0033ad;
    --mf-color-asset-sol: #14f195;
    --mf-color-asset-sol-mark: #111111;
    --mf-color-asset-doge: #c2a633;
    --mf-color-asset-ltc: #345d9d;
    --mf-color-asset-link: #2a5ada;
    --mf-color-asset-mark-light: #ffffff;
    --mf-space-1: 4px;
    --mf-space-2: 8px;
    --mf-space-3: 12px;
    --mf-space-4: 16px;
    --mf-space-5: 20px;
    --mf-space-6: 24px;
    --mf-space-8: 32px;

    /* Relationships, shared by Web and mobile. Numeric tokens are references. */
    --mf-space-text: var(--mf-space-1);
    --mf-space-inline: var(--mf-space-2);
    --mf-space-group: var(--mf-space-4);
    --mf-space-section: var(--mf-space-6);
    --mf-space-display: var(--mf-space-8);
    --mf-space-surface: var(--mf-space-group);
    --mf-space-page: var(--mf-space-group);

    /* Public editorial composition has its own common, fluid rhythm. */
    --mf-space-marketing-block: clamp(32px, 4vw, 64px);
    --mf-space-marketing-section: clamp(64px, 8vw, 128px);
    --mf-radius-card: var(--mf-border-radius);
    --mf-radius-record: var(--mf-border-radius);
    --mf-radius-compact: var(--mf-border-radius);
    --mf-radius-control: var(--mf-border-radius);
    --mf-radius-popover: var(--mf-border-radius);
    --mf-radius-shell: var(--mf-border-radius);
    --mf-radius-pill: 999px;
    --mf-radius-exchange-card: var(--mf-border-radius);
    --mf-radius-exchange-focus: var(--mf-border-radius);
    --mf-control-h-mobile: 36px;
    --mf-mobile-title-size: var(--mf-type-title);
    --mf-mobile-title-space: 52px;
    --mf-control-h-sm: 32px;
    --mf-control-h-md: 40px;
    --mf-action-card-max-width: 360px;
    --mf-row-h: 44px;
    --mf-kpi-h: 104px;
    --mf-sidebar-w: clamp(212px, 15.5vw, 252px);
    --mf-sidebar-rail-w: 72px;
    --mf-shell-inset: var(--mf-space-page);
    --mf-shell-inset-compact: var(--mf-space-page);
    --mf-topbar-h: 56px;
    --mf-page-max: 2020px;
    --mf-page-gap: var(--mf-space-group);
    --mf-page-pad-x: var(--mf-space-page);
    --mf-page-pad-top: var(--mf-space-page);
    --mf-page-pad-bottom: var(--mf-space-page);
    --mf-panel-pad: var(--mf-space-surface);

    /* Shared notices also render in marketing and authentication documents. */

    /* Inter: five compact product sizes and two public display sizes. */
    --mf-font-family: Inter, sans-serif;
    --mf-text-xs: 11px;
    --mf-text-sm: 12px;
    --mf-text-base: 14px;
    --mf-text-metric: 20px;
    --mf-text-page-title: 28px;
    --mf-text-display: 48px;
    --mf-text-hero: 96px;
    --mf-leading-xs: 16px;
    --mf-leading-sm: 18px;
    --mf-leading-base: 20px;
    --mf-leading-metric: 26px;
    --mf-leading-page-title: 34px;
    --mf-leading-display: 52px;
    --mf-leading-hero: 104px;
    --mf-type-regular-weight: 400;
    --mf-type-medium-weight: 500;
    --mf-type-heading-weight: 600;
    --mf-type-secondary: var(--mf-text-xs);
    --mf-type-label: var(--mf-text-xs);
    --mf-type-body: var(--mf-text-sm);
    --mf-type-list: var(--mf-text-sm);
    --mf-type-value: var(--mf-text-sm);
    --mf-type-control: var(--mf-text-sm);
    --mf-type-field: var(--mf-text-base);
    --mf-type-heading: var(--mf-text-base);
    --mf-type-section: var(--mf-text-metric);
    --mf-type-metric: var(--mf-text-metric);
    --mf-type-title: var(--mf-text-page-title);
    --mf-type-public-section: var(--mf-text-display);
    --mf-type-hero: var(--mf-text-hero);
    --mf-leading-public-section: var(--mf-leading-display);
    --mf-leading-public-title: var(--mf-leading-hero);
    --mf-shadow-panel: none;
    --mf-shadow-shell: none;
    --mf-shadow-nav-active: none;
    --mf-shadow-control-highlight: none;
    --mf-shadow-progress-active: none;
    --mf-shadow-progress-dot: none;
    --mf-shadow-accent-edge: none;
    --mf-shadow-notification-pulse: none;
    --mf-shadow-success-pulse: none;
    --mf-shadow-control-active: none;
    --mf-shadow-sticky-column: none;
    --mf-shadow-card: none;
    --mf-shadow-card-hover: none;
    --mf-shadow-panel-hover: none;
    --mf-shadow-exchange-card: none;
    --mf-shadow-exchange-card-hover: none;
    --mf-shadow-card-accent: none;
    --mf-shadow-logo: none;
    --mf-shadow-resource-hover: none;
    --mf-shadow-avatar: none;
    --mf-shadow-popover: none;
    --mf-surface-card-background: var(--mf-color-panel);
    --mf-widget-border: var(--mf-border-rule);
    --mf-widget-border-light: var(--mf-border-rule);
    --mf-widget-border-dark: var(--mf-border-rule);
    --mf-surface-card-border: var(--mf-border-rule);
    --mf-surface-card-radius: var(--mf-border-radius);
    --mf-surface-card-shadow: var(--mf-shadow-panel);
    --mf-surface-card-padding: var(--mf-panel-pad);
    --mf-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --mf-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --mf-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --mf-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
    --mf-overlay-gutter: var(--mf-space-page);

    /* Shared light surface tokens used by the public marketing variant. */
    --mf-marketing-page: #f5f5f7;
    --mf-marketing-surface: #ffffff;
    --mf-marketing-surface-raised: #fbfbfd;
    --mf-marketing-line: var(--mf-color-border-light);
    --mf-marketing-border: var(--mf-color-border-light);
    --mf-marketing-border-strong: rgb(0 113 227 / 32%);
    --mf-marketing-ink: #1d1d1f;
    --mf-marketing-muted: #6e6e73;
    --mf-marketing-accent: #0071e3;
    --mf-marketing-accent-strong: #0058b0;
    --mf-marketing-accent-bright: #2997ff;
    --mf-marketing-accent-soft: #e8f2ff;
    --mf-marketing-blue-soft: #edf6ff;
    --mf-marketing-on-accent: #ffffff;
    --mf-marketing-menu-surface-light: rgb(248 250 252 / 90%);
    --mf-marketing-menu-surface-dark: rgb(28 34 41 / 94%);
    --mf-marketing-success-rgb: 13 114 83;
    --mf-marketing-card-background: #ffffff;
    --mf-marketing-card-border: var(--mf-widget-border-light);
    --mf-marketing-card-shadow: 0 1px 2px rgb(0 0 0 / 4%), 0 8px 24px rgb(0 0 0 / 6%);
    --mf-marketing-card-shadow-strong: none;
    --mf-marketing-card-radius: var(--mf-border-radius);
    --mf-marketing-card-padding: var(--mf-space-display);
    --mf-marketing-card-padding-compact: var(--mf-marketing-card-padding);
    --mf-marketing-card-padding-hero: var(--mf-space-marketing-block);
    --mf-marketing-dialog-shadow: var(--mf-marketing-card-shadow);
    --mf-marketing-border-rule: var(--mf-border-rule);
    --mf-marketing-dark-surface: #000000;
    --mf-marketing-dark-line: var(--mf-color-border-dark);
    --mf-marketing-dark-border-rule: var(--mf-border-rule);
    --mf-marketing-dark-ink: #f5f5f7;
  }

  :is(.marketing-site, .auth-site) {
    --mf-color-accent: var(--mf-marketing-accent);
    --mf-color-accent-strong: var(--mf-marketing-accent-strong);
  }

  :is(html[data-theme="light"], html:has(.marketing-site), .marketing-site .marketing-dashboard-browser:not(.marketing-dashboard-browser--dark), .marketing-site .marketing-dashboard-preview-canvas) {
    color-scheme: light;
    --mf-color-avatar-text: #ffffff;

    /* Neutral grouped surfaces shared with the public product edition. */
    --mf-color-bg: #f5f5f7;
    --mf-color-sidebar: #ffffff;
    --mf-color-bg-elevated: #e8e8ed;
    --mf-color-panel: #ffffff;
    --mf-color-panel-raised: #f5f5f7;
    --mf-color-input: #f5f5f7;
    --mf-color-sidebar-divider: var(--mf-color-border-light);
    --mf-color-border: var(--mf-color-border-light);
    --mf-color-border-subtle: var(--mf-color-border);
    --mf-color-border-strong: rgb(var(--accent-rgb, 63, 112, 77), 0.24);
    --mf-color-text: #1d1d1f;
    --mf-color-muted: #6e6e73;
    --mf-color-subtle: #86868b;
    --mf-color-icon-navigation-background: var(--mf-color-bg);
    --mf-color-icon-navigation-symbol: var(--mf-color-muted);
    --mf-color-control-selected: var(--mf-color-bg-elevated);
    --mf-color-on-control-selected: var(--mf-color-text);
    --mf-segmented-background: var(--mf-color-bg-elevated);
    --mf-segmented-border: #c7c7cc;
    --mf-segmented-hover: #dedee3;
    --mf-segmented-text: #636366;
    --mf-segmented-selected: var(--mf-color-panel);
    --mf-segmented-selected-text: var(--mf-color-on-control-selected);
    --mf-color-highlight: rgb(255 255 255 / 92%);
    --mf-blur-control-background: var(--mf-blur-control-light-background);
    --mf-blur-control-border: var(--mf-blur-control-light-border);
    --mf-blur-control-shadow: var(--mf-blur-control-light-shadow);
    --mf-blur-control-filter: var(--mf-blur-control-light-filter);
    --mf-color-danger: var(--mf-color-danger-light);
    --mf-color-danger-rgb: 215 0 21;
    --mf-color-warning: #8a611f;
    --mf-color-warning-rgb: 138 97 31;
    --mf-color-info: #496fae;
    --mf-color-info-rgb: 73 111 174;
    --mf-color-success: #248a3d;
    --mf-color-success-rgb: 36 138 61;

    /* Chart-series light variants: preserve their identity independently of appearance contrast. */
    --mf-accent-teal: #2f7f79;
    --mf-accent-blue: #496fae;
    --mf-accent-green: #4f7d5b;
    --mf-accent-pink: #a95d82;
    --mf-accent-violet: #7161ad;
    --mf-shadow-panel: none;
    --mf-shadow-shell: none;
    --mf-shadow-control-active: none;
    --mf-shadow-card: none;
    --mf-shadow-card-hover: none;
    --mf-shadow-panel-hover: none;
    --mf-shadow-popover: none;
    --mf-surface-card-background: var(--mf-color-panel);
    --mf-surface-card-border: var(--mf-border-rule);
  }

  @media (max-width: 680px), (pointer: coarse) {
    :root {
      --mf-button-ghost-height: 44px;
      --mf-control-h-sm: 44px;
      --mf-control-h-md: 44px;
    }
  }
}

/*!*************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./node_modules/@marketforge/ui/src/styles/components/surfaces.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************************/
@layer components {
  .mf-section-divider {
    --mf-section-divider-inset: 0px;

    background: var(--mf-section-divider-color);
    border: 0;
    height: var(--mf-divider-width);
    margin: 0;
    margin-inline: var(--mf-section-divider-inset);
    width: calc(100% - 2 * var(--mf-section-divider-inset));
  }

  .mf-page {
    container-name: product-page;
    container-type: inline-size;
    display: grid;
    gap: var(--mf-page-gap);
    margin: 0 auto;
    max-width: var(--mf-page-max);
    min-width: 0;
    width: 100%;
  }

  .mf-page-header,
  .mf-panel-header {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: var(--mf-space-group);
    justify-content: space-between;
    min-width: 0;
  }

  .mf-page-header > :first-child,
  .mf-panel-header > :first-child {
    flex: 1 1 min(24rem, 100%);
    min-width: 0;
  }

  .mf-page-header h2,
  .mf-panel-header h2 {
    color: var(--mf-color-text);
  }

  .mf-page-header p,
  .mf-panel-header p {
    color: var(--mf-color-muted);
    margin-top: var(--mf-space-text);
  }

  .mf-page-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    flex: 0 1 auto;
    gap: var(--mf-space-group) var(--mf-space-inline);
    justify-content: flex-end;
    max-width: 100%;
  }

  .mf-panel {
    --mf-border-inset-space: 0px;

    background:
      linear-gradient(180deg, color-mix(in srgb, var(--mf-color-highlight) 40%, transparent), transparent 34%),
      var(--mf-surface-card-background);
    border: var(--mf-border-rule);
    border-radius: var(--mf-border-radius);
    display: flex;
    flex-direction: column;
    gap: var(--mf-page-gap);
    min-width: 0;
    padding: calc(var(--mf-surface-card-padding) + var(--mf-border-inset-space, 0px));
    transition:
      border-color 180ms var(--mf-ease-out),
      box-shadow 180ms var(--mf-ease-out),
      transform 180ms var(--mf-ease-out);
  }

  .mf-panel-header > svg {
    color: var(--mf-color-accent);
  }

  .muted-line {
    color: var(--mf-color-muted);
    margin-top: var(--mf-space-text);
  }

  .positive {
    color: var(--mf-color-success) !important;
  }
  .negative {
    color: var(--mf-color-danger) !important;
  }

  .mf-panel-compact {
    min-height: 120px;
  }

  .mf-panel-standard {
    min-height: 220px;
  }

  .mf-panel-tall {
    min-height: 420px;
  }

  .mf-layout-two-up {
    display: grid;
    gap: var(--mf-page-gap);
    grid-template-columns: repeat(auto-fit, minmax(min(26rem, 100%), 1fr));
  }

  .mf-layout-stack {
    align-content: start;
    display: grid;
    gap: var(--mf-page-gap);
  }

  .mf-layout-section {
    align-content: start;
    display: grid;
    gap: var(--mf-space-section);
    min-width: 0;
  }

  .mf-tabs {
    --mf-border-inset-space: 0px;

    align-items: center;
    background: var(--mf-color-input);
    border: var(--mf-border-rule);
    border-radius: var(--mf-radius-pill);
    display: flex;
    gap: var(--mf-space-text);
    overflow-x: auto;
    padding: var(--mf-space-text);
  }

  .mf-tabs-vertical {
    align-items: stretch;
    flex-direction: column;
  }

  .mf-actions,
  .mf-dialog-actions,
  .mf-status-notice-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    max-width: 100%;
    gap: var(--mf-space-group) var(--mf-space-inline);
  }

  .mf-detail-list {
    display: grid;
    margin: 0;
  }

  .mf-detail-list > div {
    align-items: center;
    border-bottom: var(--mf-divider-rule);
    display: flex;
    gap: var(--mf-space-group);
    justify-content: space-between;
    min-height: var(--mf-row-h);
    transition: background-color 160ms var(--mf-ease-out);
  }
  .mf-detail-list > div:last-child {
    border-bottom: 0;
  }

  .mf-detail-list dt {
    color: var(--mf-color-muted);
  }
  .mf-detail-list dd {
    margin: 0;
    text-align: right;
  }

  @container product-page (max-width: 860px) {
    .mf-page-actions {
      justify-content: flex-start;
    }
  }

  @container product-page (max-width: 520px) {
    .mf-panel {
      padding: calc(var(--mf-space-surface) + var(--mf-border-inset-space, 0px));
    }
  }
}

/* The parent owns sibling spacing. A child does not add another vertical margin.
   Padding inside a surface and space on each side of a divider remain explicit. */
:where(.mf-page, .mf-layout-stack, .mf-layout-section, .mf-form-grid, .mf-actions, .mf-dialog-actions, .mf-status-notice-actions, .mf-dialog-body, .mf-detail-sections, .mf-detail-main, .mf-detail-rail, .mf-widget-content-grid, .mf-widget-content-contents) > * {
  margin-block: 0;
}

/* Opt-in work-area chain shared by plans, tax and account performance. */
.app-shell .page-content:has(.mf-widget-fill) {
  display: flex;
  flex-direction: column;
}

.app-shell .page-content:has(.mf-widget-fill) .mf-workspace-fill {
  align-content: stretch;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  height: auto;
  min-height: 0;
}

.mf-workspace-fill > :not(.mf-workspace-fill, .mf-widget-fill) {
  flex-shrink: 0;
}

/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./node_modules/@marketforge/ui/src/styles/components/card-metrics.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************************/
@layer components {
  .mf-card-metrics {
    align-items: stretch;
    align-self: stretch;
    border-top: 0;
    display: grid;
    gap: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto 1fr;
    min-width: 0;
    padding-block: calc(var(--mf-space-surface) + var(--mf-divider-width)) 0;
    --mf-divider-inline-inset: 0px;
    --mf-divider-before-image: linear-gradient(var(--mf-section-divider-color), var(--mf-section-divider-color));
    --mf-divider-before-content: "";
  }

  .mf-card-metrics > * {
    align-content: start;
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
    gap: var(--mf-space-text);
    justify-items: center;
    min-height: 44px;
    min-width: 0;
    padding-inline: var(--mf-space-inline);
    text-align: center;
    --mf-divider-inline-inset: var(--mf-space-inline);
  }

  .mf-card-metrics > * + * {
    border-left: var(--mf-divider-rule);
  }

  @container widget (max-width: 230px) {
    .mf-card-metrics {
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: none;
      padding-block: 0;
    }

    .mf-card-metrics > * {
      align-items: center;
      grid-row: auto;
      grid-template-rows: auto;
      gap: var(--mf-space-inline);
      grid-template-columns: minmax(0, 1fr) auto;
      justify-items: initial;
      padding-block: calc(var(--mf-space-surface) + var(--mf-divider-width)) var(--mf-space-surface);
      text-align: left;
    }

    .mf-card-metrics > * + * {
      border-left: 0;
      --mf-divider-before-image: linear-gradient(var(--mf-section-divider-color), var(--mf-section-divider-color));
      --mf-divider-before-content: "";
    }

    .mf-card-metrics > :last-child {
      padding-block-end: 0;
    }

    .mf-card-metrics :is(dt, dd, small, strong, dd > span) {
      overflow: visible;
      text-overflow: clip;
      white-space: normal;
    }

    .mf-card-metrics > * > :last-child {
      justify-items: end;
      text-align: right;
    }
  }
}

/*!********************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./node_modules/@marketforge/ui/src/styles/components/navigation-rows.css ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************/
/* NavigationRow also hosts native actions such as SettingsLogoutAction. */
@layer components {
  .mf-navigation-icon {
    --mf-icon-tile-color: var(--mf-color-icon-navigation-background);
    --mf-icon-tile-symbol-color: var(--mf-color-icon-navigation-symbol);

    align-items: center;
    background: transparent;
    border: 0;
    display: inline-flex;
    flex: 0 0 auto;
    height: 28px;
    justify-content: center;
    padding: 0;
    width: 28px;
  }

  button.mf-navigation-row {
    appearance: none;
    background: transparent;
    border: 0;
    cursor: pointer;
    font: inherit;
    text-align: start;
    width: 100%;
    --mf-divider-before-image: none;
    --mf-divider-before-content: none;
    --mf-divider-after-image: none;
    --mf-divider-after-content: none;
    --mf-divider-underlay-image: none;
  }
}

/*!**********************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./node_modules/@marketforge/ui/src/styles/components/forms.css ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************/
@layer components {
  .eyebrow {
    color: var(--mf-color-accent);
    margin-bottom: var(--mf-space-text);
    text-transform: uppercase;
  }

  .icon-button {
    padding: 0 !important;
    width: var(--mf-control-h-md);
  }

  .mf-button {
    align-items: center;
    border: 0;
    border-radius: var(--mf-button-radius, var(--mf-radius-pill));
    display: inline-flex;
    flex: 0 0 auto;
    gap: var(--mf-button-content-gap);
    justify-content: center;
    max-width: 100%;
    min-height: var(--mf-control-h-md);
    padding: 0 var(--mf-button-padding-inline);
    transition:
      background-color 160ms var(--mf-ease-out),
      border-color 160ms var(--mf-ease-out),
      box-shadow 160ms var(--mf-ease-out),
      color 160ms var(--mf-ease-out),
      transform 160ms var(--mf-ease-out);
  }

  .mf-button-rounded {
    --mf-button-radius: var(--mf-radius-control);
  }

  .mf-icon-button {
    align-items: center;
    background: transparent;
    color: var(--mf-color-muted);
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    justify-content: center;
    padding: 0;
    transition:
      background-color 120ms var(--mf-ease-out),
      border-color 120ms var(--mf-ease-out),
      color 120ms var(--mf-ease-out),
      transform 120ms var(--mf-ease-out);
  }

  .mf-icon-button-compact {
    border: 0;
    border-radius: var(--mf-border-radius);
    height: 30px;
    width: 30px;
  }

  .mf-icon-button-bare {
    border: 0;
  }

  .mf-icon-button:active:not(:disabled) {
    transform: scale(0.97);
  }

  .mf-icon-button[data-press-feedback="none"]:active:not(:disabled) {
    transform: none;
  }

  .mf-icon-button.is-active {
    background: rgb(var(--accent-rgb, 126, 207, 152), 0.12);
    border-color: var(--mf-color-border);
    color: var(--mf-color-accent);
  }

  .mf-icon-button:disabled {
    cursor: not-allowed;
    opacity: 0.38;
  }

  .mf-info-tile {
    align-items: center;
    background: color-mix(in srgb, var(--mf-color-panel-raised) 76%, transparent);
    border: var(--mf-border-rule);
    border-radius: var(--mf-border-radius);
    display: grid;
    gap: var(--mf-space-group);
    grid-template-columns: auto minmax(0, 1fr);
    padding: var(--mf-space-surface) var(--mf-space-surface);
  }

  .mf-info-tile-icon {
    align-items: center;
    background: transparent;
    display: inline-flex;
    height: 32px;
    justify-content: center;
    width: 32px;
  }

  .mf-info-tile-compact {
    background: color-mix(in srgb, var(--mf-color-panel-raised) 72%, transparent);
    min-height: 70px;
    padding: var(--mf-space-surface);
  }

  .mf-info-tile-compact .mf-info-tile-icon {
    height: 34px;
    width: 34px;
  }

  .mf-button:active:not(:disabled) {
    transform: scale(0.98);
  }

  .mf-button-sm {
    min-height: var(--mf-control-h-sm);
    padding-inline: var(--mf-field-padding-inline);
  }

  .mf-button-primary {
    background: var(--mf-color-accent);
    color: var(--mf-color-on-accent);
  }

  .mf-button-secondary {
    background: color-mix(in srgb, var(--mf-color-panel-raised) 88%, transparent);
    border-color: var(--mf-color-border);
    color: var(--mf-color-text);
  }

  .mf-button-ghost {
    background: transparent;
    color: var(--mf-color-muted);
  }

  .mf-button-text {
    background: transparent;
    border: 0;
    color: var(--mf-color-muted);
    min-height: auto;
    padding: 0;
  }

  .mf-button-danger {
    background: rgb(var(--mf-color-danger-rgb) / 12%);
    border-color: var(--mf-color-border);
    color: var(--mf-color-danger);
  }

  .mf-button-marketing-primary,
  .mf-button-marketing-secondary,
  .mf-button-marketing-ghost {
    border-radius: var(--mf-button-radius, var(--mf-radius-pill));
    gap: var(--mf-button-content-gap);
    min-height: 42px;
    padding: 0 var(--mf-space-section);
    transition:
      filter 150ms ease,
      transform 150ms ease,
      background-color 150ms ease;
  }

  .mf-button-marketing-primary {
    background: var(--mf-marketing-accent);
    border: var(--mf-border-rule);
    color: var(--mf-marketing-on-accent);
  }

  :is(.mf-button-marketing-primary, .mf-button-marketing-secondary).mf-button-compact {
    min-height: var(--mf-button-public-compact-height);
    padding-inline: var(--mf-button-padding-inline);
    position: relative;
  }

  .mf-button-marketing-secondary {
    background: var(--mf-button-public-secondary-background);
    border: var(--mf-border-rule);
    color: var(--mf-marketing-ink);
  }

  .mf-button-marketing-ghost {
    background: transparent;
    border: 0;
    color: var(--mf-marketing-accent);
  }

  :is(.mf-button-marketing-primary, .mf-button-marketing-secondary, .mf-button-marketing-ghost):active:not(:disabled) {
    filter: brightness(0.96);
    transform: scale(0.97);
  }

  .mf-tabs button {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: var(--mf-radius-pill);
    color: var(--mf-color-muted);
    display: inline-flex;
    flex: 0 0 auto;
    gap: var(--mf-space-inline);
    min-height: var(--mf-control-h-sm);
    min-width: var(--mf-control-h-sm);
    padding-inline: var(--mf-field-padding-inline);
    white-space: nowrap;
    transition:
      background-color 160ms var(--mf-ease-out),
      box-shadow 160ms var(--mf-ease-out),
      color 160ms var(--mf-ease-out),
      transform 160ms var(--mf-ease-out);
  }

  .mf-tabs button[aria-selected="true"] {
    background: var(--mf-color-control-selected);
    color: var(--mf-color-on-control-selected);
  }

  .mf-tabs button:active {
    transform: scale(0.97);
  }

  @media (max-width: 680px), (pointer: coarse) {
    .mf-tabs button {
      min-height: 44px;
    }
  }

  .mf-field {
    align-content: start;
    color: var(--mf-color-muted);
    display: grid;
    gap: var(--mf-space-inline);
    min-width: 0;
  }

  .mf-field small {
    color: var(--mf-color-subtle);
  }

  .mf-field-error {
    color: var(--mf-color-danger) !important;
  }

  .mf-choice-group {
    border: 0;
    display: grid;
    gap: var(--mf-space-inline);
    margin: 0;
    min-width: 0;
    padding: 0;
  }

  .mf-choice-group legend {
    color: var(--mf-color-muted);
  }

  .mf-choice-group:has(> legend:not(.sr-only)) {
    /* Native legends sit outside the fieldset's grid and do not receive its gap. */
    padding-block-start: var(--mf-space-inline);
  }

  .mf-choice-grid {
    display: grid;
    gap: var(--mf-space-inline);
    grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr));
  }

  .mf-choice-card {
    align-items: flex-start;
    background: var(--mf-color-bg-elevated);
    border: var(--mf-border-rule);
    border-radius: var(--mf-border-radius);
    display: flex;
    gap: var(--mf-space-inline);
    padding: var(--mf-space-surface);
    transition:
      background-color 160ms var(--mf-ease-out),
      border-color 160ms var(--mf-ease-out),
      transform 160ms var(--mf-ease-out);
  }

  .mf-choice-card:has(input:checked),
  .marketing-site .public-plan-card[aria-current="true"] {
    background: color-mix(in srgb, var(--mf-color-accent) 8%, var(--mf-color-bg-elevated));
    border-color: var(--mf-color-border);
  }
  .mf-choice-card input {
    accent-color: var(--mf-color-accent);
    margin-top: var(--mf-space-text);
  }
  .mf-choice-card span,
  .mf-choice-card small {
    display: grid;
    gap: var(--mf-space-text);
  }

  .mf-choice-card-visual {
    cursor: pointer;
  }

  .mf-choice-card-appearance {
    color: var(--mf-color-muted);
    cursor: pointer;
    display: grid;
    gap: var(--mf-space-text);
    grid-template-columns: 1fr;
    min-height: 68px;
    padding: var(--mf-space-inline);
    place-items: center;
    position: relative;
    text-align: center;
  }

  .mf-choice-card-appearance:active {
    transform: scale(0.98);
  }

  .mf-choice-card-appearance:has(input:checked) {
    background: color-mix(in srgb, var(--mf-color-accent) 12%, var(--mf-color-panel));
    border-color: var(--mf-color-border);
    color: var(--mf-color-text);
  }

  .mf-choice-card-appearance:has(input:checked) > svg {
    color: var(--mf-color-accent);
  }

  .mf-choice-card-appearance > svg:last-child {
    position: absolute;
    right: 7px;
    top: 7px;
  }

  .mf-secret-control input::-ms-clear,
  .mf-secret-control input::-ms-reveal {
    display: none;
  }

  .mf-switch {
    align-items: center;
    display: inline-flex;
    gap: var(--mf-space-inline);
  }

  .mf-switch input {
    height: 1px;
    opacity: 0;
    position: absolute;
    width: 1px;
  }

  .mf-switch > span {
    --mf-switch-height: 22px;
    --mf-switch-width: 38px;
    --mf-switch-padding: 2px;
    --mf-switch-thumb-size: 16px;
    --mf-switch-thumb-travel: calc(var(--mf-switch-width) - var(--mf-switch-height));

    background: color-mix(in srgb, var(--mf-color-subtle) 72%, var(--mf-color-panel-raised));
    border: var(--mf-border-rule);
    border-radius: var(--mf-radius-pill);
    display: inline-flex;
    flex: 0 0 var(--mf-switch-width);
    height: var(--mf-switch-height);
    padding: var(--mf-switch-padding);
    transition:
      background-color 160ms var(--mf-ease-out),
      border-color 160ms var(--mf-ease-out);
    width: var(--mf-switch-width);
  }

  .mf-switch > span::after {
    background: #fff;
    border-radius: 50%;
    content: "";
    height: var(--mf-switch-thumb-size);
    transition: transform 160ms var(--mf-ease-out);
    width: var(--mf-switch-thumb-size);
  }

  .mf-switch input:checked + span {
    background: var(--mf-color-accent);
    border-color: var(--mf-color-border);
  }

  .mf-switch input:checked + span::after {
    transform: translateX(var(--mf-switch-thumb-travel));
  }

  .mf-switch em {
    color: var(--mf-color-muted);
    font-style: normal;
  }

  .mf-form-grid {
    display: grid;
    gap: var(--mf-space-group);
  }

  .mf-form-grid-2 {
    grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  }

  @media (max-width: 680px), (pointer: coarse) {
    .mf-button:not(.mf-button-text, .mf-button-compact),
    .mf-icon-button-compact {
      min-height: 44px;
    }

    .mf-icon-button-compact {
      width: 44px;
    }
  }
}

/* One field contract across product, access, public forms and Admin.
   The panel token is also the unselected surface of capsule selectors. */
.mf-field :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="button"], [type="submit"], [type="reset"], [type="hidden"], [type="image"]), select, textarea),
.scratch-name-field input,
.mf-search-field,
.mf-prefixed-control,
html:root .mf-field :is(.mf-secret-control, .mf-field-action-control) {
  background: var(--mf-color-panel);
  border: var(--mf-border-rule);
  border-radius: var(--mf-radius-pill);
  box-sizing: border-box;
  color: var(--mf-color-text);
  font-style: normal;
  font-feature-settings: normal;
  font-variant: normal;
  height: var(--mf-field-height);
  min-height: var(--mf-field-height);
  min-width: 0;
  padding: 0 var(--mf-field-padding-inline);
  text-align: start;
  text-transform: none;
  transition: border-color 160ms var(--mf-ease-out);
}

.mf-field :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="button"], [type="submit"], [type="reset"], [type="hidden"], [type="image"]), select, textarea),
.scratch-name-field input {
  width: 100%;
}

.mf-field :where(textarea, select[multiple]) {
  border-radius: var(--mf-border-radius);
  height: auto;
  padding-block: var(--mf-space-inline);
}

/* Offset the host border so the native button keeps its full compact height. */

.mf-field textarea {
  resize: vertical;
}

.mf-field :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="button"], [type="submit"], [type="reset"], [type="hidden"], [type="image"]), textarea)::placeholder,
.scratch-name-field input::placeholder {
  color: var(--mf-color-subtle);
  font: inherit;
  opacity: 1;
}

.mf-search-field,
.mf-secret-control,
.mf-prefixed-control,
.mf-field-action-control {
  align-items: center;
  display: flex;
  gap: var(--mf-space-inline);
}

/* Compound controls have one border and surface, including their icons. */
:is(.mf-search-field, .mf-secret-control, .mf-prefixed-control, .mf-field-action-control) :is(input, select) {
  background: transparent;
  border: 0;
  border-radius: inherit;
  flex: 1 1 auto;
  height: calc(var(--mf-field-height) - 2px);
  min-height: 0;
  outline: none;
  padding: 0;
}

/* Compound field errors belong to the host; the inner input stays unpainted. */
.mf-field :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="button"], [type="submit"], [type="reset"], [type="hidden"], [type="image"]), select, textarea):not(:where(.mf-search-field *, .mf-secret-control *, .mf-prefixed-control *, .mf-field-action-control *))[aria-invalid="true"],
:is(.mf-search-field, .mf-prefixed-control):has([aria-invalid="true"]),
html:root .mf-field :is(.mf-secret-control, .mf-field-action-control):has([aria-invalid="true"]) {
  border-color: var(--mf-color-border);
  outline: var(--mf-border-width) var(--mf-border-style) var(--mf-color-danger) !important;
  outline-offset: var(--mf-border-width);
}

.mf-field :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="button"], [type="submit"], [type="reset"], [type="hidden"], [type="image"]), select, textarea):disabled,
.scratch-name-field input:disabled,
.mf-prefixed-control:has(:disabled),
.mf-search-field:has(input:disabled),
html:root .mf-field :is(.mf-secret-control, .mf-field-action-control):has(input:disabled) {
  color: var(--mf-color-subtle);
  cursor: not-allowed;
}

.mf-field :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="button"], [type="submit"], [type="reset"], [type="hidden"], [type="image"]), textarea)[readonly]:not(:disabled) {
  color: var(--mf-color-text);
  cursor: text;
}

html:root .mf-search-field > svg,
html:root .mf-field:is(.mf-field-stacked, .mf-field-inline)
  :is(.mf-secret-control, .mf-field-action-control) svg {
  color: inherit;
  flex: 0 0 auto;
  height: var(--mf-field-icon-size);
  width: var(--mf-field-icon-size);
}

/* Actions are part of the field, rather than a separately painted button. */
html:root .mf-field:is(.mf-field-stacked, .mf-field-inline)
  :is(.mf-secret-control, .mf-field-action-control) > button {
  align-items: center;
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  filter: none;
  flex: 0 0 auto;
  font: inherit;
  gap: var(--mf-space-inline);
  height: 100%;
  inset: auto;
  justify-content: center;
  max-height: 100%;
  min-height: 0;
  min-width: 0;
  opacity: 1;
  padding: 0;
  position: relative;
  transform: none;
  width: auto;
}

html:root .mf-field:is(.mf-field-stacked, .mf-field-inline)
  :is(.mf-secret-control, .mf-field-action-control) > button .mf-button-content-visible {
  color: inherit;
  font: inherit;
  gap: var(--mf-button-content-gap);
}

html:root .mf-field:is(.mf-field-stacked, .mf-field-inline)
  :is(.mf-secret-control, .mf-field-action-control) > button:active {
  background: transparent;
  color: inherit;
  filter: none;
  transform: none;
}

html:root .mf-field:is(.mf-field-stacked, .mf-field-inline)
  :is(.mf-secret-control, .mf-field-action-control) > button:disabled {
  color: var(--mf-color-subtle);
  cursor: not-allowed;
}

/* Blockly anchors its editing overlay to a canvas field. Keep its measured
   dimensions; use the same field material and text despite its inline font. */
/* stylelint-disable selector-class-pattern -- Blockly owns this editing class. */
.blocklyHtmlInput {
  background: var(--mf-color-panel) !important;
  border: var(--mf-border-rule) !important;
  border-radius: var(--mf-radius-pill) !important;
  color: var(--mf-color-text) !important;
  font-style: normal !important;
  box-sizing: border-box !important;
  padding: 0 max(0px, calc(var(--mf-space-3) * var(--mf-block-field-scale, 1) - var(--mf-border-width)));
}

/* The native editor reports rejected values without painting a second surface. */
html:root .blocklyHtmlInput[aria-invalid="true"] {
  /* Blockly reserves 2/3 of the warning width. Reserve its full scaled box;
     content sizing also includes that box, padding and both borders. */
  field-sizing: content;
  min-width: 100%;
  padding-inline-start: calc(var(--mf-field-height) * var(--mf-block-field-scale, 1)) !important;
  width: auto;
  border-color: var(--mf-color-border) !important;
  outline: var(--mf-border-width) var(--mf-border-style) var(--mf-color-danger) !important;
  outline-offset: var(--mf-border-width);
}

/* stylelint-enable selector-class-pattern */

@media (prefers-contrast: more) {
  .mf-field :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="button"], [type="submit"], [type="reset"], [type="hidden"], [type="image"]), select, textarea),
  .scratch-name-field input,
  .mf-search-field,
  .mf-prefixed-control,
  html:root .mf-field :is(.mf-secret-control, .mf-field-action-control) {
    border-color: var(--mf-color-border);
  }
}

/* Public dialog and Auth ghost actions share the compact marketing text role. */
/* stylelint-disable selector-class-pattern -- Blockly owns these field classes. */
:is(.scratch-blockly-host, .scratch-block-preview-svg) .blocklyInputField > .blocklyFieldRect {fill:var(--mf-color-panel) !important;stroke:var(--mf-color-border) !important;stroke-width:1px;vector-effect:non-scaling-stroke;}
.scratch-blockly-host .blocklyInputField.blocklyActiveFocus > .blocklyFieldRect {stroke:var(--mf-color-border) !important;}
.scratch-blockly-host .blocklyInputField.blocklyActiveFocus {outline:var(--mf-border-width) var(--mf-border-style) var(--mf-color-muted);outline-offset:var(--mf-border-width);  .mf-choice-grid > :is(.mf-loading, .mf-async-state-embedded) {
    grid-column: 1 / -1;
  }
}
/* stylelint-enable selector-class-pattern */

/*!***************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./node_modules/@marketforge/ui/src/styles/platform/mobile/forms.css ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************/
/* Solid mobile selectors share geometry and theme without background sampling. */
@media (max-width: 760px), (max-width: 1024px) and (max-height: 500px) {
  /* Safari's native date appearance adds its padding outside the field width. */
  html:root[data-mobile-device="true"] .mf-field input:is([type="date"], [type="datetime-local"], [type="time"]) {
    appearance: none;
  }

  /* Dark product fields use the application surface; public palettes stay clear. */
  html:root[data-mobile-device="true"]:not([data-theme="light"])
    :is(
      .mf-field:not(:where(.mf-search-field *)) > input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="button"], [type="submit"], [type="reset"], [type="hidden"], [type="image"]),
      .mf-field > textarea,
      .mf-field > select:not([multiple]),
      .mf-prefixed-control:has(select),
      .mf-search-field,
      .mf-secret-control,
      .mf-field-action-control,
      .scratch-name-field input
    ):not(:where(:is(.marketing-site, .auth-site, .support-report-portal, .mf-dialog-marketing, .mf-popover-marketing) *)) {
    background-color: var(--mf-color-bg);
  }

  /* Native SelectField keeps Web's 16 px chevron and 12 px end inset. */
  html:root[data-mobile-device="true"] .mf-field select:not([multiple]) {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231d1d1f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-position: right var(--mf-space-3) center;
    background-repeat: no-repeat;
    background-size: 16px 16px;
    padding-inline-end: calc(var(--mf-field-padding-inline) + var(--mf-space-surface) + var(--mf-space-inline));
  }

  html:root[data-mobile-device="true"] .mf-prefixed-control select:not([multiple]) {
    /* The compound container already supplies the 12 px exterior inset. */
    background-position: right center;
    padding-inline-end: calc(var(--mf-space-surface) + var(--mf-space-inline));
  }

  html:root[data-mobile-device="true"]:not([data-theme="light"])
    .mf-field select:not([multiple], :disabled, :where(:is(.marketing-site, .auth-site, .support-report-portal, .mf-dialog-marketing, .mf-popover-marketing) *)) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  }

  html:root[data-mobile-device="true"] .mf-field select:not([multiple]):disabled {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2386868b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  }

  @media (forced-colors: active) {
    html:root[data-mobile-device="true"] .mf-field:is(.mf-field-stacked, .mf-field-inline) select:not([multiple]) {
      appearance: auto;
      background-image: none;
    }
  }

  /* Blockly's native editing overlay is attached outside the product shell. */
  /* stylelint-disable-next-line selector-class-pattern -- Blockly owns this editing class. */
  html:root[data-mobile-device="true"]:not([data-theme="light"]) .blocklyHtmlInput {
    background-color: var(--mf-color-bg) !important;
  }

  html:root[data-mobile-device="true"] .mf-button-product-text,
  html:root[data-mobile-device="true"] .mf-button-marketing-ghost.mf-button-sm {
    --mf-button-ghost-height: 44px;
  }

  /* Keep the public compact control's visual size and extend its touch area. */
  html[data-mobile-device="true"] :is(.mf-button-marketing-primary, .mf-button-marketing-secondary).mf-button-compact::after,
  html[data-mobile-device="true"] :is(.mf-button-public-secondary, .mf-button-product-primary, .mf-button-product-danger)::after {
    content: "";
    height: 44px;
    inset-inline: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }

  /* Integrated actions keep the field geometry and a 44 px touch target. */
  html:root[data-mobile-device="true"] .mf-field:is(.mf-field-stacked, .mf-field-inline)
    :is(.mf-secret-control, .mf-field-action-control) > button::after {
    content: "";
    height: 44px;
    inset-inline: auto;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: max(100%, 44px);
  }
  /* stylelint-disable-next-line selector-class-pattern -- Blockly owns this editing class. */

  html:root[data-mobile-device="true"] .mf-selector-surface {
    --mf-floating-border: var(--mf-color-border);
    --mf-floating-ink: var(--mf-color-text);
    --mf-floating-opaque: var(--mf-color-panel);
    --mf-floating-background: var(--mf-color-panel);
    --mf-floating-filter: none;

    --mf-segmented-text: var(--mf-floating-ink);
    --mf-segmented-selected-text: var(--mf-floating-ink);
    --mf-segmented-selected: color-mix(
      in srgb,
      var(--mf-floating-ink) 12%,
      transparent
    );
    --mf-segmented-hover: var(--mf-segmented-selected);

    position: relative;
    isolation: isolate;
    overflow: var(--mf-selector-overflow, clip);
    background: var(--mf-floating-background);
    border: var(--mf-border-rule);
    border-radius: var(--mf-radius-pill);
    box-shadow: none;
    color: var(--mf-floating-ink);
    transition: none;
    /* stylelint-disable property-no-vendor-prefix -- Same material on iOS Safari. */
    -webkit-backdrop-filter: var(--mf-floating-filter);
    /* stylelint-enable property-no-vendor-prefix */
    backdrop-filter: var(--mf-floating-filter);
  }

  html:root[data-mobile-device="true"]
    .mf-selector-surface
    > :is(
      button.mf-segmented-button,
      button.mf-tab-button,
      .mf-segmented-trailing
    ) {
    position: relative;
    z-index: 2;
  }

  @media (prefers-contrast: more) {
    html:root[data-mobile-device="true"] .mf-selector-surface {
      background: var(--mf-floating-opaque);
      border-color: var(--mf-color-border);
      box-shadow: none;
      /* stylelint-disable property-no-vendor-prefix -- Accessible iOS fallback. */
      -webkit-backdrop-filter: none;
      /* stylelint-enable property-no-vendor-prefix */
      backdrop-filter: none;
    }
  }

  @media (prefers-contrast: more) {
    html:root[data-mobile-device="true"]
      .mf-selector-surface
      > :is(.is-selected, [aria-selected="true"]) {
      outline: 2px solid currentColor;
      outline-offset: -2px;
    }
  }
}

@media (max-width: 760px) and (prefers-contrast: more),
  (max-width: 1024px) and (max-height: 500px) and (prefers-contrast: more),
  (max-width: 760px) and (forced-colors: active),
  (max-width: 1024px) and (max-height: 500px) and (forced-colors: active) {
  html:root[data-mobile-device="true"] .mf-segmented-control.mf-segmented-billing > .mf-selector-surface.mf-segmented-billing-surface {
    border-color: var(--mf-color-border);
  }

  html:root[data-mobile-device="true"] .mf-selector-surface {
    background: var(--mf-floating-opaque);
    border-color: var(--mf-color-border);
    box-shadow: none;
    /* stylelint-disable property-no-vendor-prefix -- Accessible iOS fallback. */
    -webkit-backdrop-filter: none;
    /* stylelint-enable property-no-vendor-prefix */
    backdrop-filter: none;
  }

  html:root[data-mobile-device="true"]
    .mf-selector-surface
    > :is(.is-selected, [aria-selected="true"]) {
    outline: 2px solid currentColor;
    outline-offset: -2px;
  }
}

@supports not (
  ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) or (-webkit-backdrop-filter: blur(1px))
) {
  @media (max-width: 760px), (max-width: 1024px) and (max-height: 500px) {
    html:root[data-mobile-device="true"] .mf-selector-surface {
      background: var(--mf-floating-opaque);
    }
  }
}

/* Product segmented tracks match the dark page. Keep the previous material
   backdrop inside the selected option so its composed color stays unchanged. */
@media (max-width: 760px), (max-width: 1024px) and (max-height: 500px) {
  html:root[data-mobile-device="true"]:not([data-theme="light"])
    .mf-segmented-control > .mf-selector-surface:not(:where(:is(.marketing-site, .auth-site, .mf-dialog-marketing, .mf-popover-marketing) .mf-selector-surface)) {
    background: var(--mf-color-bg);
  }

  html:root[data-mobile-device="true"]:not([data-theme="light"])
    .mf-segmented-control > .mf-selector-surface:not(:where(:is(.marketing-site, .auth-site, .mf-dialog-marketing, .mf-popover-marketing) .mf-selector-surface))
    > .mf-segmented-button:is(.is-selected, [aria-pressed="true"]) {
    background:
      linear-gradient(var(--mf-segmented-billing-selected, var(--mf-segmented-selected)), var(--mf-segmented-billing-selected, var(--mf-segmented-selected))),
      var(--mf-floating-background);
  }
}

/*!***********************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./node_modules/@marketforge/ui/src/styles/components/tables.css ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************/
@layer components {
  :where(.bot-ops-layout, .mf-dashboard) button:not(.mf-button, .mf-table-link, .mf-tab-button, .mf-segmented-button) {
    align-items: center;
    background: var(--mf-color-accent);
    border: 0;
    border-radius: var(--mf-border-radius);
    color: var(--mf-color-on-accent);
    display: inline-flex;
    gap: var(--mf-button-content-gap);
    justify-content: center;
    min-height: var(--mf-control-h-md);
    padding: 0 var(--mf-segmented-padding-inline);
  }

  .mf-panel-table,
  .mf-panel-chart {
    min-height: 300px;
  }

  .mf-table-scroll {
    -webkit-overflow-scrolling: touch;
    min-width: 0;
    overscroll-behavior-inline: contain;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--mf-color-muted) 30%, transparent) transparent;
  }

  .mf-table {
    border-collapse: collapse;
    table-layout: auto;
    width: 100%;
  }

  .mf-table th,
  .mf-table td {
    border-bottom: 0;
    height: var(--mf-row-h);
    padding: var(--mf-space-inline) var(--mf-space-surface);
    text-align: start;
    vertical-align: middle;
    --mf-divider-after-image: linear-gradient(var(--mf-section-divider-color), var(--mf-section-divider-color));
    --mf-divider-after-content: "";

    padding-block-end: calc(var(--mf-space-inline) + var(--mf-divider-width));
    --mf-divider-inline-inset: var(--mf-space-surface);
    --mf-divider-inline-start: 0px;
    --mf-divider-inline-end: 0px;
  }

  .mf-table :is(th, td):first-child {
    --mf-divider-inline-start: var(--mf-divider-inline-inset);
  }

  .mf-table :is(th, td)[data-column-type="number"] {
    text-align: end;
  }

  .mf-table :is(th, td)[data-column-type="status"],
  .mf-table :is(th, td)[data-column-type="action"] {
    text-align: center;
  }

  .mf-table :is(th, td):last-child {
    --mf-divider-inline-end: var(--mf-divider-inline-inset);
  }

  .mf-table tbody tr:last-child td {
    border-bottom: 0;
    --mf-divider-after-image: none;
    --mf-divider-after-content: none;
  }

  .mf-table-compact {
    height: auto;
    min-width: 0;
  }

  .mf-table-compact thead tr {
    height: var(--mf-table-head-h, var(--mf-control-h-sm));
  }

  .mf-table-compact tbody tr {
    height: var(--mf-table-row-h, var(--mf-row-h));
  }

  .mf-table.mf-table-compact :where(th, td) {
    height: auto;
    overflow: hidden;
    padding: var(--mf-space-inline);
    text-overflow: ellipsis;
    white-space: nowrap;
    --mf-divider-inline-inset: var(--mf-space-inline);
  }

  .mf-table.mf-table-wrap :where(th, td) {
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .mf-table th {
    color: var(--mf-color-subtle);
    text-transform: uppercase;
  }

  .mf-table tbody tr {
    transition: background-color 140ms var(--mf-ease-out);
  }

  .mf-table-link {
    align-items: center;
    background: transparent;
    border: 0;
    color: inherit;
    display: inline-flex;
    gap: var(--mf-space-inline);
    padding: 0;
    text-align: inherit;
    transition:
      color 160ms var(--mf-ease-out),
      transform 160ms var(--mf-ease-out);
  }

  .mf-table-link:active {
    transform: scale(0.985);
  }

  .mf-table-link small {
    color: var(--mf-color-muted);
    display: block;
    margin-top: var(--mf-space-text);
  }

  .mf-table-actions {
    align-items: center;
    display: inline-flex;
    gap: var(--mf-space-text);
  }

  .mf-table-empty {
    color: var(--mf-color-muted);
    padding-block: var(--mf-space-display) !important;
    text-align: center !important;
  }
}

/*!*************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./node_modules/@marketforge/ui/src/styles/components/feedback.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************************/
@layer components {
  .mf-status-notice-group {
    display: grid;
    gap: var(--mf-space-group);
    min-width: 0;
  }

  .mf-status-notice {
    align-items: flex-start;
    background: rgb(var(--mf-color-info-rgb) / 7%);
    border: var(--mf-border-rule);
    border-radius: var(--mf-border-radius);
    color: var(--mf-color-info);
    display: flex;
    flex-wrap: wrap;
    gap: var(--mf-space-group);
    min-width: 0;
    padding: var(--mf-space-surface);
  }

  .mf-status-notice-success {
    background: rgb(var(--mf-color-success-rgb) / 7%);
    color: var(--mf-color-success);
  }

  .mf-status-notice-accent {
    background: color-mix(in srgb, var(--mf-color-accent) 7%, transparent);
    color: var(--mf-color-accent);
  }

  .mf-status-notice-warning {
    background: rgb(var(--mf-color-warning-rgb) / 7%);
    color: var(--mf-color-warning);
  }

  .mf-status-notice-danger {
    background: rgb(var(--mf-color-danger-rgb) / 7%);
    color: var(--mf-color-danger);
  }

  .mf-status-notice-neutral {
    background: color-mix(in srgb, var(--mf-color-muted) 7%, transparent);
    color: var(--mf-color-muted);
  }

  .mf-status-notice-copy {
    display: grid;
    flex: 1 1 24ch;
    gap: var(--mf-space-text);
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .mf-status-notice-title {
    color: var(--mf-color-text);
    margin: 0;
  }

  .mf-status-notice-body,
  .mf-status-notice-metadata {
    color: var(--mf-color-muted);
    min-width: 0;
  }

  .mf-status-notice-body > :is(p, ul, ol) {
    margin-block: 0;
  }

  .mf-status-notice-actions {
    align-self: center;
    flex: 0 1 auto;
    justify-content: flex-end;
    margin-inline-start: auto;
    max-width: 100%;
    min-width: 0;
  }

  .empty-state {
    align-items: center;
    color: var(--mf-color-muted);
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--mf-space-inline);
    justify-content: center;
    min-height: 130px;
    padding: var(--mf-space-section);
    text-align: center;
  }

  .mf-state-page {
    box-sizing: border-box;
    display: grid;
    min-height: 100dvh;
    padding: max(var(--mf-space-page), env(safe-area-inset-top)) max(var(--mf-space-page), env(safe-area-inset-right)) max(var(--mf-space-page), env(safe-area-inset-bottom)) max(var(--mf-space-page), env(safe-area-inset-left));
    place-items: center;
  }

  .empty-state > svg {
    background: color-mix(in srgb, var(--mf-color-accent) 10%, var(--mf-color-panel-raised));
    border: var(--mf-border-rule);
    border-radius: var(--mf-border-radius);
    box-sizing: content-box;
    color: var(--mf-color-accent);
    padding: var(--mf-space-inline);
  }

  .empty-state strong {
    color: var(--mf-color-text);
  }
  .empty-state a {
    color: var(--mf-color-accent);
  }
  .empty-state-compact {
    min-height: 80px;
  }

  .mf-async-state {
    align-self: stretch;
  }

  :is(.mf-async-state-empty, .mf-async-state-embedded) {
    align-items: center;
    align-self: stretch;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-sizing: border-box;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--mf-space-group);
    height: 100%;
    justify-content: center;
    min-height: 160px;
    padding: var(--mf-space-section);
    text-align: center;
    transform: none;
    width: 100%;
  }

  .mf-async-state-compact:is(.mf-async-state-empty, .mf-async-state-embedded) {
    min-height: 120px;
  }

  :is(.mf-async-state-empty-content, .mf-async-state-embedded-content) {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    flex: 0 1 auto;
    flex-direction: column;
    gap: var(--mf-space-inline);
    justify-content: center;
    max-width: 36rem;
    max-height: 100%;
    overflow-wrap: anywhere;
    text-align: center;
    width: 100%;
  }

  :is(.mf-async-state-empty-content, .mf-async-state-embedded-content) h2,
  :is(.mf-async-state-empty-content, .mf-async-state-embedded-content) p,
  .mf-async-state-embedded-content > [role="alert"] {
    margin: 0;
  }

  :is(.mf-async-state-empty-content, .mf-async-state-embedded-content) h2 {
    color: var(--mf-color-text);
  }

  :is(.mf-async-state-empty-content, .mf-async-state-embedded-content) p,
  .mf-async-state-embedded-content > [role="alert"] {
    color: var(--mf-color-muted);
    max-width: 32rem;
  }

  :is(.mf-async-state-empty, .mf-async-state-embedded) .mf-async-state-actions {
    justify-content: center;
    margin-top: var(--mf-space-text);
    width: 100%;
  }

  .mf-async-state-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--mf-space-inline);
  }

  .mf-badge {
    align-items: center;
    border: var(--mf-border-rule);
    border-radius: var(--mf-radius-pill);
    color: var(--mf-color-muted);
    display: inline-flex;
    gap: var(--mf-space-text);
    min-height: 24px;
    padding: 0 var(--mf-space-inline);
    white-space: nowrap;
  }

  .mf-badge-success {
    background: rgb(var(--mf-color-success-rgb) / 10%);
    border-color: var(--mf-color-border);
    color: var(--mf-color-success);
  }
  .mf-badge-warning {
    background: rgb(229 185 111 / 10%);
    border-color: var(--mf-color-border);
    color: var(--mf-color-warning);
  }
  .mf-badge-danger {
    background: rgb(var(--mf-color-danger-rgb) / 10%);
    border-color: var(--mf-color-border);
    color: var(--mf-color-danger);
  }
  .mf-badge-info {
    background: rgb(123 167 232 / 10%);
    border-color: var(--mf-color-border);
    color: var(--mf-color-info);
  }
  .mf-badge-accent {
    background: rgb(var(--accent-rgb, 126, 207, 152), 0.1);
    border-color: var(--mf-color-border);
    color: var(--mf-color-accent);
  }

  .mf-badge-marketing {
    border-radius: var(--mf-radius-pill);
    min-height: 28px;
    padding-inline: var(--mf-space-inline);
    text-transform: uppercase;
  }

  .mf-badge-icon {
    border-radius: 50%;
    justify-content: center;
    min-height: 28px;
    min-width: 28px;
    padding: 0;
    width: 28px;
  }

  .mf-badge-icon svg {
    flex: 0 0 auto;
  }

  .mf-badge-indicator,
  .mf-badge-text {
    background: transparent;
    border: 0;
    border-radius: 0;
    justify-content: flex-start;
    min-height: auto;
    padding: 0;
  }

  .mf-badge-indicator::before {
    background: currentColor;
    border-radius: 50%;
    content: "";
    height: 6px;
    width: 6px;
  }

}

/* Trailing actions retain their button material and minimum height. Long labels
   wrap instead of inheriting the compact button's single-line clipping. */
html:root .mf-status-notice-group > .mf-status-notice-actions .mf-button {
  height: auto;
  max-width: 100%;
  padding-block: var(--mf-space-inline);
  white-space: normal;
}

html:root .mf-status-notice-group > .mf-status-notice-actions .mf-button > .mf-button-content-visible,
html:root .mf-status-notice-group > .mf-status-notice-actions .mf-button > .mf-button-content-visible > :not(svg, img) {
  overflow: visible;
  overflow-wrap: anywhere;
  white-space: normal;
}

/*!*************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./node_modules/@marketforge/ui/src/styles/components/overlays.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************************/
@layer components {
  /* Native hosts use the same backdrop/surface slots, with browser focus trapping. */
  dialog.mf-dialog-backdrop::backdrop {
    background: transparent;
  }

  .mf-dialog-backdrop {
    align-items: center;
    -webkit-backdrop-filter: blur(22px) saturate(0.9);
            backdrop-filter: blur(22px) saturate(0.9);
    background: rgb(0 0 0 / 52%);
    border: 0;
    display: flex;
    inset: 0;
    justify-content: center;
    height: 100dvh;
    margin: 0;
    max-width: none;
    max-height: none;
    min-height: 0;
    overflow: auto;
    padding: var(--mf-overlay-gutter);
    position: fixed;
    transition: opacity 180ms var(--mf-ease-out);
    width: 100%;
    z-index: 100;
  }

  .mf-dialog {
    background: var(--mf-chrome-background);
    border: var(--mf-border-rule);
    border-radius: var(--mf-border-radius);
    color: var(--mf-color-text);
    display: grid;
    gap: var(--mf-space-group);
    margin: 0;
    max-width: 520px;
    max-height: min(calc(100dvh - var(--mf-overlay-gutter) - var(--mf-overlay-gutter)), 860px);
    overflow-y: auto;
    padding: var(--mf-space-surface);
    position: relative;
    transform: translateY(0) scale(1);
    transition:
      opacity 180ms var(--mf-ease-out),
      transform 180ms var(--mf-ease-out);
    width: 100%;
  }

  .mf-dialog-backdrop-end {
    background: rgb(0 0 0 / 28%);
    -webkit-backdrop-filter: blur(6px) saturate(0.9);
            backdrop-filter: blur(6px) saturate(0.9);
  }

  .mf-dialog-placement-end {
    border-radius: var(--mf-border-radius);
    height: min(720px, calc(100dvh - var(--mf-overlay-gutter) - var(--mf-overlay-gutter)));
    max-height: calc(100dvh - var(--mf-overlay-gutter) - var(--mf-overlay-gutter));
    max-width: min(440px, calc(100vw - var(--mf-overlay-gutter) - var(--mf-overlay-gutter)));
    overflow: hidden;
  }

  .mf-dialog-sm {
    max-width: 420px;
  }
  .mf-dialog-lg {
    max-height: min(calc(100dvh - var(--mf-overlay-gutter) - var(--mf-overlay-gutter)), 860px);
    max-width: 680px;
    overflow-y: auto;
  }
  .mf-dialog-danger {
    border-color: var(--mf-color-border);
  }

  .mf-dialog-backdrop-fullscreen {
    padding: 0;
  }

  .mf-dialog-fullscreen {
    display: flex;
    flex-direction: column;
    gap: 0;
    height: 100dvh;
    max-height: none;
    max-width: none;
    overflow: hidden;
    padding: env(safe-area-inset-top) env(safe-area-inset-right)
      env(safe-area-inset-bottom) env(safe-area-inset-left);
  }

  .mf-dialog-fullscreen > .mf-dialog-header:not(.sr-only) {
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding: var(--mf-space-inline) var(--mf-space-surface);
  }

  .mf-dialog-fullscreen > .mf-dialog-header .mf-dialog-close {
    min-height: 44px;
    min-width: 44px;
  }

  .mf-dialog-fullscreen > .mf-dialog-body {
    flex: 1 1;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
  }

  .mf-dialog-marketing {
    background: var(--mf-marketing-surface);
    border: var(--mf-border-rule);
    border-radius: var(--mf-border-radius);
    color: var(--mf-marketing-ink);
  }
  .mf-dialog-body {
    align-content: start;
    display: grid;
    gap: var(--mf-space-group);
    min-width: 0;
  }

  .mf-dialog-body-unavailable {
    align-content: stretch;
    block-size: var(--mf-dialog-body-block-size, auto);
    display: grid;
    max-block-size: 100%;
    min-block-size: 0;
    place-items: center;
  }

  .mf-popover-anchor {
    position: relative;
  }
  .mf-popover {
    background: var(--mf-chrome-background);
    border: var(--mf-border-rule);
    border-radius: var(--mf-border-radius);
    color: var(--mf-color-text);
    max-height: calc(100dvh - var(--mf-overlay-gutter) - var(--mf-overlay-gutter));
    max-width: calc(100vw - var(--mf-overlay-gutter) - var(--mf-overlay-gutter));
    overflow: auto;
    position: absolute;
    right: 0;
    top: calc(100% + var(--mf-space-2));
    transform: translateY(0) scale(1);
    transform-origin: top right;
    transition:
      opacity 160ms var(--mf-ease-out),
      transform 160ms var(--mf-ease-out);
    z-index: 90;
  }

  :where(.mf-dialog, .mf-popover) {
    -webkit-backdrop-filter: var(--mf-blur-control-filter);
            backdrop-filter: var(--mf-blur-control-filter);
  }

  .mf-popover[data-placement="top"] {
    transform-origin: bottom right;
  }

  .mf-popover-compact {
    background: var(--mf-color-panel-raised);
    border-radius: var(--mf-border-radius);
    display: grid;
    gap: var(--mf-space-text);
    min-width: min(176px, calc(100vw - var(--mf-overlay-gutter) - var(--mf-overlay-gutter)));
    padding: var(--mf-popover-padding);
    top: calc(100% + 7px);
    z-index: 30;
  }


  .mf-popover-compact > [role="group"] {
    display: grid;
    gap: var(--mf-space-text);
  }

  .mf-popover-compact > button,
  .mf-popover-compact > [role="group"] > button {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: var(--mf-border-radius);
    color: var(--mf-color-muted);
    display: flex;
    gap: var(--mf-space-inline);
    min-height: max(34px, var(--mf-control-h-sm));
    min-width: 0;
    overflow: hidden;
    padding: 0 var(--mf-space-inline);
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mf-popover-compact > button[aria-checked="true"],
  .mf-popover-compact > [role="group"] > button[aria-checked="true"] {
    background: rgb(var(--accent-rgb, 126, 207, 152), 0.1);
    color: var(--mf-color-accent);
  }

  .mf-dialog > header {
    align-items: flex-start;
    display: flex;
    gap: var(--mf-space-group);
    justify-content: space-between;
  }
  .mf-dialog p {
    color: var(--mf-color-muted);
    margin-top: var(--mf-space-text);
  }
  .mf-dialog-actions {
    justify-content: flex-end;
  }

  .mf-dialog-actions > .mf-button {
    flex: 0 0 auto;
    max-width: 100%;
  }

  @starting-style {
    .mf-dialog-backdrop {
      opacity: 0;
    }

    .mf-dialog {
      opacity: 0;
      transform: translateY(8px) scale(0.985);
    }

    .mf-popover {
      opacity: 0;
      transform: translateY(-4px) scale(0.97);
    }
  }

  .mf-dialog-backdrop-modeless {
    align-items: initial;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    background: transparent;
    overflow: visible;
    padding: 0;
    pointer-events: none;
  }

  .mf-dialog-backdrop-modeless .mf-dialog {
    border: var(--mf-border-rule);
    border-radius: var(--mf-border-radius);
    max-height: calc(100dvh - var(--mf-overlay-gutter) - var(--mf-overlay-gutter));
    max-width: calc(100vw - var(--mf-overlay-gutter) - var(--mf-overlay-gutter));
    pointer-events: auto;
  }
}

/* A form popover has a surface inset; a compact menu uses its menu recipe. */
html:root .mf-popover.mf-popover-padding-default {
  padding: var(--mf-space-surface);
}

/*!**************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./node_modules/@marketforge/ui/src/styles/components/exchanges.css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************/
@layer components {
  .exchange-brand-mark {
    color: var(--mf-color-muted);
    display: inline-grid;
    place-items: center;
  }

  .exchange-brand-mark svg,
  .exchange-brand-mark img {
    display: block;
    height: 100%;
    overflow: visible;
    width: 100%;
    object-fit: contain;
  }

  .exchange-brand-avatar {
    align-items: center;
    background: color-mix(in srgb, var(--exchange-brand, var(--mf-color-text)) 10%, var(--mf-color-panel));
    border: var(--mf-border-rule);
    border-radius: 50%;
    color: var(--exchange-brand, var(--mf-color-text));
    display: inline-flex;
    flex: 0 0 48px;
    height: 48px;
    justify-content: center;
    width: 48px;
  }

  .exchange-brand-stack {
    position: relative;
    display: inline-block;
    flex: 0 0 76px;
    width: 76px;
    height: 48px;
  }

  .exchange-brand-stack > .exchange-brand-avatar {
    position: absolute;
  }

  .exchange-brand-stack > [data-slot="1"] {
    inset: 0 auto auto 0;
    z-index: 1;
  }

  .exchange-brand-stack > [data-slot="2"] {
    inset: 0 0 auto auto;
  }

  .exchange-brand-avatar > .exchange-brand-mark {
    display: inline-grid;
    height: 25px;
    place-items: center;
    width: 25px;
  }

  .exchange-brand-avatar > .exchange-brand-mark svg {
    display: block;
    height: 100%;
    width: 100%;
  }

  .exchange-brand-mark.exchange-brand-binance {
    color: var(--mf-color-exchange-binance);
  }

  .exchange-brand-mark.exchange-brand-okx {
    color: var(--mf-color-text);
  }

  .exchange-brand-mark.exchange-brand-bybit {
    color: var(--mf-color-text);
  }

  .exchange-brand-mark.exchange-brand-kraken {
    color: var(--mf-color-exchange-kraken);
  }

  .exchange-brand-mark.exchange-brand-coinbase {
    color: var(--mf-color-exchange-coinbase);
  }

  .exchange-brand-mark.exchange-brand-bitget {
    color: var(--mf-color-exchange-bitget);
  }
}

@layer components {
  .mf-exchange-context {
    --exchange-brand: var(--mf-color-text);
  }
  .mf-exchange-context:has(.exchange-brand-binance) {
    --exchange-brand: var(--mf-color-exchange-binance);
    --mf-exchange-brand-rgb: 240, 185, 11;
  }
  .mf-exchange-context:has(.exchange-brand-okx) {
    --exchange-brand: var(--mf-color-text);
    --mf-exchange-brand-rgb: 255, 255, 255;
  }
  .mf-exchange-context:has(.exchange-brand-bybit) {
    --exchange-brand: var(--mf-color-exchange-bybit);
    --mf-exchange-brand-rgb: 246, 165, 0;
  }
  .mf-exchange-context:has(.exchange-brand-kraken) {
    --exchange-brand: var(--mf-color-exchange-kraken);
    --mf-exchange-brand-rgb: 87, 65, 217;
  }
  .mf-exchange-context:has(.exchange-brand-coinbase) {
    --exchange-brand: var(--mf-color-exchange-coinbase);
    --mf-exchange-brand-rgb: 0, 82, 255;
  }
  .mf-exchange-context:has(.exchange-brand-bitget) {
    --exchange-brand: var(--mf-color-exchange-bitget);
    --mf-exchange-brand-rgb: 0, 240, 255;
  }
}

/*!****************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./node_modules/@marketforge/ui/src/styles/components.css ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************/


/*!*************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./node_modules/@marketforge/ui/src/components/widgets/widgets.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************************/
@layer components {
  .mf-widget {
    background: var(--mf-color-panel);
    container-name: widget;
    container-type: inline-size;
    position: relative;
  }

  .mf-widget-section {
    --mf-border-inset-space:
      0px;

    background: var(--mf-surface-card-background);
    border: var(--mf-border-rule);
    border-radius: var(--mf-border-radius);
    display: grid;
    gap: var(--mf-space-group);
    min-height: 0;
    padding: calc(var(--mf-space-surface) + var(--mf-border-inset-space, 0px));
  }

  .mf-widget-record {
    display: grid;
    gap: var(--mf-space-group);
    min-height: 0;
    padding: calc(var(--mf-space-surface) + var(--mf-border-inset-space, 0px));
  }

  .mf-widget-record .mf-widget-heading {
    overflow-wrap: anywhere;
  }

  .mf-widget-record > .mf-widget-footer {
    border-top: 0;
    margin: 0 calc(var(--mf-space-group) * -1) calc(var(--mf-space-group) * -1);
    padding-block: calc(var(--mf-space-text) + var(--mf-divider-width)) var(--mf-space-text);
    --mf-divider-before-image: linear-gradient(var(--mf-section-divider-color), var(--mf-section-divider-color));
    --mf-divider-before-content:
      "";
    --mf-divider-inline-inset: var(--mf-space-surface);
  }

  .mf-widget-record-actions {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
  }

  .mf-widget-inset {
    background: color-mix(in srgb, var(--mf-color-bg) 86%, var(--mf-color-panel));
  }

  .mf-widget-accented {
    background: linear-gradient(135deg, color-mix(in srgb, var(--mf-color-accent) 7%, transparent), transparent 42%), var(--mf-color-panel);
  }

  .mf-widget-borderless {
    border: 0;
  }

  .mf-widget-borderless > .mf-widget-footer {
    border-top: 0;
  }

  .mf-widget-bot {
    background: var(--mf-color-panel);
  }

  .mf-attribute-badge {
    background: var(--mf-color-panel-raised);
    border: var(--mf-border-rule);
    border-radius: var(--mf-radius-pill);
    color: var(--mf-color-muted);
    display: inline-flex;
    padding: var(--mf-space-text) var(--mf-space-inline);
  }

  .mf-widget-brand {
    background: radial-gradient(circle at 0 0, rgb(var(--exchange-brand-rgb, 91, 96, 109), 0.12), transparent 34%), var(--mf-color-panel);
  }

  .mf-widget-danger {
    background: var(--mf-surface-card-background);
  }

  .mf-widget-asset,
  .mf-widget-exchange {
    --mf-border-inset-space:
      0px;

    background: var(--mf-color-panel);
    border: var(--mf-border-rule);
    border-radius: var(--mf-border-radius);
  }

  .mf-widget-preview {
    --mf-border-inset-space:
      0px;

    background: var(--mf-color-panel);
    border: var(--mf-border-rule);
    border-radius: var(--mf-border-radius);
    padding: calc(var(--mf-panel-pad) + var(--mf-border-inset-space, 0px));
  }

  .mf-widget-resource {
    --mf-border-inset-space:
      0px;

    background: color-mix(in srgb, var(--mf-color-panel-raised) 72%, transparent);
    border: var(--mf-border-rule);
    border-radius: var(--mf-border-radius);
    padding: calc(var(--mf-space-surface) + var(--mf-border-inset-space, 0px));
  }

  .mf-widget-resource:active {
    transform: scale(0.98);
  }

  .mf-widget-summary {
    padding: calc(var(--mf-space-surface) + var(--mf-border-inset-space, 0px));
  }

  .mf-widget-workspace {
    --mf-border-inset-space:
      0px;

    background: var(--mf-color-panel);
    border: var(--mf-border-rule);
    border-radius: var(--mf-border-radius);
    gap: 0;
    padding: calc(0px + var(--mf-border-inset-space, 0px));
  }

  .mf-widget-workspace:fullscreen {
    border: 0;
    border-radius: 0;
  }

  .mf-widget-padding-hero {
    padding: calc(var(--mf-space-section) + var(--mf-border-inset-space, 0px));
  }

  .mf-widget-padding-none {
    padding: calc(0px + var(--mf-border-inset-space, 0px));
  }

  .mf-widget-padding-spacious {
    padding: calc(var(--mf-space-section) + var(--mf-border-inset-space, 0px));
  }

  .mf-widget-click-target {
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    font: inherit;
    height: 100%;
    min-height: inherit;
    padding: calc(0px + var(--mf-border-inset-space, 0px));
    position: relative;
    text-align: left;
    text-decoration: none;
    width: 100%;
    z-index: 1;
  }

  .mf-widget-marketing,
  .mf-widget-marketing-dark {
    --mf-border-inset-space:
      0px;

    background: var(--mf-marketing-card-background);
    border: var(--mf-border-rule);
    border-radius: var(--mf-border-radius);
    color: var(--mf-marketing-ink);
    min-height: 0;
    padding: calc(var(--mf-marketing-card-padding) + var(--mf-border-inset-space, 0px));
  }

  .mf-widget-marketing-dark {
    --mf-color-border: var(--mf-marketing-dark-line);
    --mf-color-border-subtle: var(--mf-color-border);
    --mf-border-rule: var(--mf-border-width) var(--mf-border-style) var(--mf-color-border);
    --mf-divider-rule: var(--mf-border-rule);
    --mf-section-divider-color: var(--mf-color-border);

    background: var(--mf-marketing-dark-surface);
    border-color: var(--mf-color-border);
    color: var(--mf-marketing-dark-ink);
  }

  :is(.mf-widget-marketing, .mf-widget-marketing-dark).mf-widget-padding-none {
    padding: 0;
  }

  :is(.mf-widget-marketing, .mf-widget-marketing-dark).mf-panel-compact {
    padding: var(--mf-marketing-card-padding-compact);
  }

  :is(.mf-widget-marketing, .mf-widget-marketing-dark).mf-panel-tall {
    padding: var(--mf-marketing-card-padding-hero);
  }

  :is(.mf-widget-marketing, .mf-widget-marketing-dark) > .mf-widget-content {
    min-height: 0;
  }

  /* Public story surfaces stay owned by the marketing Widget variants. */
  .mf-widget.market-card {
    padding: calc(var(--mf-marketing-card-padding) + var(--mf-border-inset-space, 0px));
    background: radial-gradient(circle at 72% 16%, rgb(0 113 227 / 0.2), transparent 34%), linear-gradient(145deg, #ffffff, #edf5ff);
    border-radius: var(--mf-border-radius);
  }

  .mf-widget.market-card:nth-child(2) {
    background: radial-gradient(circle at 72% 16%, rgb(191 90 242 / 0.2), transparent 34%), linear-gradient(145deg, #ffffff, #f5efff);
  }

  .mf-widget.market-card:nth-child(3) {
    background: radial-gradient(circle at 72% 16%, rgb(255 159 10 / 0.18), transparent 34%), linear-gradient(145deg, #ffffff, #fff7e9);
  }

  .mf-widget.platform-card {
    padding: calc(var(--mf-marketing-card-padding) + var(--mf-border-inset-space, 0px));
    background: radial-gradient(circle at 72% 16%, rgb(0 113 227 / 0.24), transparent 42%), linear-gradient(145deg, #1d2b3b, #1c1c1e 68%);
    border-radius: var(--mf-border-radius);
  }

  .platform-card-link:nth-child(2) > .mf-widget.platform-card {
    background: radial-gradient(circle at 72% 16%, rgb(94 92 230 / 0.24), transparent 42%), linear-gradient(145deg, #2a2235, #1c1c1e 68%);
  }

  .platform-card-link:nth-child(3) > .mf-widget.platform-card {
    background: radial-gradient(circle at 72% 16%, rgb(255 159 10 / 0.2), transparent 42%), linear-gradient(145deg, #332b1d, #1c1c1e 68%);
  }

  .mf-widget.detail-card,
  .mf-widget.public-plan-card {
    padding: calc(var(--mf-marketing-card-padding) + var(--mf-border-inset-space, 0px));
  }

  .mf-widget.detail-card {
    background: radial-gradient(circle at 78% 12%, rgb(0 113 227 / 0.22), transparent 38%), linear-gradient(145deg, #1d2b3b, #1c1c1e 68%);
  }

  .mf-widget.detail-card:nth-child(2) {
    background: radial-gradient(circle at 78% 12%, rgb(94 92 230 / 0.24), transparent 38%), linear-gradient(145deg, #2a2235, #1c1c1e 68%);
  }

  .mf-widget.detail-card:nth-child(3) {
    background: radial-gradient(circle at 78% 12%, rgb(52 199 89 / 0.2), transparent 38%), linear-gradient(145deg, #1d3025, #1c1c1e 68%);
  }

  .mf-widget.detail-card:nth-child(4) {
    background: radial-gradient(circle at 78% 12%, rgb(255 159 10 / 0.2), transparent 38%), linear-gradient(145deg, #332b1d, #1c1c1e 68%);
  }

  .mf-widget-marketing.detail-card {
    color: var(--mf-marketing-ink);
    background: radial-gradient(circle at 78% 12%, rgb(0 113 227 / 0.14), transparent 38%), linear-gradient(145deg, #ffffff, #edf5ff);
    border-color: var(--mf-color-border);
  }

  .mf-widget-marketing.detail-card:nth-child(2) {
    background: radial-gradient(circle at 78% 12%, rgb(94 92 230 / 0.14), transparent 38%), linear-gradient(145deg, #ffffff, #f5f1ff);
  }

  .mf-widget-marketing.detail-card:nth-child(3) {
    background: radial-gradient(circle at 78% 12%, rgb(52 199 89 / 0.13), transparent 38%), linear-gradient(145deg, #ffffff, #edf9f0);
  }

  .mf-widget.pricing-faq-list {
    background: radial-gradient(circle at 100% 0%, rgb(0 113 227 / 0.16), transparent 42%), linear-gradient(145deg, #111820, #1c1c1e 72%);
  }

  .mf-widget.public-plan-card-featured {
    background: radial-gradient(circle at 100% 0%, rgb(0 113 227 / 0.17), transparent 38%), #fff;
    border-color: var(--mf-color-border);
  }

  .mf-widget.resource-action {
    padding: calc(var(--mf-space-section) + var(--mf-border-inset-space, 0px));
    background: #eef6ff;
    border-color: var(--mf-color-border);
  }

  .mf-widget.resource-document {
    padding: calc(var(--mf-marketing-card-padding) + var(--mf-border-inset-space, 0px));
  }

  .mf-widget.shared-profile-hero,
  .mf-widget.shared-profile-status {
    background: radial-gradient(circle at 50% 0%, rgb(0 113 227 / 0.16), transparent 42%), linear-gradient(145deg, #ffffff, #f4f8ff);
  }

  @media (max-width: 680px) {
    .mf-widget:is(.market-card, .platform-card, .detail-card) {
      border-radius: var(--mf-border-radius);
    }

    .mf-widget.resource-document {
      padding: calc(var(--mf-marketing-card-padding) + var(--mf-border-inset-space, 0px));
      border-radius: var(--mf-border-radius);
    }
  }

  .mf-widget-auth {
    --mf-border-inset-space:
      0px;

    overflow: hidden;
    background: var(--auth-surface, var(--mf-auth-surface));
    border: var(--mf-border-rule);
    border-radius: var(--mf-border-radius);
    gap: 0;
    min-height: 0;
    padding: calc(0px + var(--mf-border-inset-space, 0px));
  }

  .mf-widget-auth::before {
    content: none;
  }

  .mf-widget-auth .auth-page-heading {
    position: relative;
    display: grid;
    gap: 0;
    overflow: hidden;
    padding: var(--mf-space-display);
    text-align: center;
    background:
      radial-gradient(circle at 50% -15%, rgb(41 151 255 / 0.34), transparent 14rem),
      linear-gradient(145deg, var(--mf-auth-header-surface), var(--mf-auth-header-surface-deep));
  }

  .mf-widget-auth .auth-page-heading::before,
  .mf-widget-auth .auth-page-heading::after {
    --mf-border-inset-space:
      0px;

    position: absolute;
    width: 8rem;
    aspect-ratio: 1;
    border: var(--mf-border-rule);
    border-radius: 50%;
    content: "";
  }

  .mf-widget-auth .auth-page-heading::before {
    top: -4.5rem;
    left: -2rem;
  }

  .mf-widget-auth .auth-page-heading::after {
    right: -2rem;
    bottom: -4.5rem;
  }

  .mf-widget-auth .auth-page-heading > * {
    margin: 0;
  }

  .mf-widget-auth .auth-page-heading .eyebrow {
    color: var(--mf-auth-header-accent);
    margin-bottom: var(--mf-space-group);
    text-transform: none;
  }

  .mf-widget-auth .auth-page-heading h1 {
    color: var(--mf-auth-header-ink);
    text-wrap: balance;
  }

  .mf-widget-auth .auth-page-heading > p:last-child {
    max-width: 23rem;
    margin: var(--mf-space-group) auto 0;
    color: var(--mf-auth-header-muted);
    text-wrap: pretty;
  }

  .mf-widget-auth > .mf-widget-content {
    display: grid;
    gap: 0;
    padding: 0;
  }

  .mf-widget-auth .mf-form-grid {
    display: grid;
    gap: var(--mf-space-group);
  }

  .mf-widget-auth > .mf-widget-content > .auth-form {
    padding: var(--mf-space-display);
  }

  .mf-widget-auth .mf-field {
    color: #3a3a3c;
    gap: var(--mf-space-inline);
  }

  .mf-widget-auth .mf-secret-control button {
    background: transparent;
    border: 0;
    border-radius: 50%;
    color: var(--auth-muted, var(--mf-color-muted));
    height: 2.625rem;
    right: 0.1875rem;
    width: 2.625rem;
  }

  .mf-widget-auth .mf-button:not(:where(.mf-button-marketing-primary.mf-button-compact, .mf-button-marketing-ghost.mf-button-sm)) {
    min-height: 3rem;
    border-radius: var(--mf-radius-pill);
  }

  .mf-widget-auth .mf-button:is(.mf-button-public-secondary, .mf-button-product-primary, .mf-button-product-danger, .mf-button-marketing-primary.mf-button-compact, .mf-button-marketing-secondary.mf-button-compact) {
    width: 100%;
  }

  .mf-widget-auth .mf-button-primary {
    --mf-border-inset-space:
      0px;

    background: var(--auth-accent, var(--mf-auth-accent));
    border: var(--mf-border-rule);
    border-radius: var(--mf-radius-pill);
    color: #ffffff;
    width: 100%;
  }

  .mf-widget-auth .mf-button-marketing-primary.mf-button-compact {
    width: 100%;
  }

  .mf-widget-auth .mf-button-secondary {
    --mf-border-inset-space:
      0px;

    width: 100%;
    color: var(--auth-ink, var(--mf-auth-ink));
    background: rgb(255 255 255 / 0.76);
    border: var(--mf-border-rule);
  }

  .mf-widget-auth .mf-button-ghost {
    width: 100%;
    min-height: 2.375rem;
    justify-self: stretch;
    padding-inline: var(--mf-space-inline);
    color: var(--auth-accent, var(--mf-auth-accent));
    background: transparent;
    border: 0;
  }

  @media (max-width: 560px) {
    .mf-widget-auth .auth-page-heading {
      padding: var(--mf-space-section);
    }

    .mf-widget-auth .mf-button-ghost {
      min-height: 2.75rem;
    }

    .mf-widget-auth > .mf-widget-content > .auth-form {
      padding: var(--mf-space-section);
    }
  }

  @media (prefers-reduced-transparency: reduce) {
    .mf-widget-auth {
      background: #fff;
      -webkit-backdrop-filter: none;
              backdrop-filter: none;
    }
  }

  @media (prefers-contrast: more) {
    .mf-widget-auth {
      border-color: var(--mf-color-border);
    }
  }

  .mf-widget-header,
  .mf-widget-heading,
  .mf-widget-actions,
  .mf-widget-toolbar {
    align-items: center;
    display: flex;
  }

  .mf-widget-header {
    flex-wrap: wrap;
    gap: var(--mf-space-group);
    justify-content: space-between;
    min-height: var(--mf-widget-header-min-height, var(--mf-control-h-md));
    place-self: stretch;
    text-align: left;
    width: 100%;
  }

  .mf-widget-header-inline {
    flex-wrap: nowrap;
    gap: var(--mf-space-inline);
  }

  .mf-widget-header-inline .mf-widget-heading {
    flex-basis: auto;
  }

  .mf-widget-header-inline .mf-widget-actions {
    flex-wrap: nowrap;
  }

  .mf-widget-heading {
    flex: 1 1 min(20rem, 100%);
    gap: var(--mf-widget-heading-gap);
    justify-content: flex-start;
    margin: 0;
    min-width: 0;
    text-align: left;
  }

  .mf-widget-heading > div {
    min-width: 0;
    text-align: left;
  }

  .mf-widget-heading > svg {
    color: var(--mf-color-accent);
    flex: 0 0 auto;
    filter: none;
  }

  .mf-widget-header-centered .mf-widget-heading {
    align-items: center;
    flex-direction: column;
    gap: var(--mf-space-inline);
    text-align: center;
  }

  .mf-widget-header-centered .mf-widget-heading > div {
    display: grid;
    gap: var(--mf-space-inline);
    text-align: center;
    width: 100%;
  }

  .mf-widget-header-centered .mf-widget-heading p {
    margin: 0;
  }

  .mf-widget-navigation-grid {
    align-self: start;
    display: grid;
    gap: var(--mf-space-group);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    grid-template-rows: auto auto auto 1fr;
    min-height: min-content;
    width: 100%;
  }

  .mf-widget-navigation-grid > .mf-widget {
    container-type: normal;
    grid-row: span 4;
    grid-template-rows: subgrid;
    row-gap: var(--mf-space-inline);
  }

  .mf-widget-navigation-grid .mf-widget-header-centered,
  .mf-widget-navigation-grid .mf-widget-heading,
  .mf-widget-navigation-grid .mf-widget-heading > div {
    display: contents;
  }

  .mf-widget-navigation-grid .mf-widget-heading > svg {
    justify-self: center;
  }

  .mf-widget-navigation-grid .mf-widget-heading > svg,
  .mf-widget-navigation-grid .mf-widget-heading > div > * {
    align-self: start;
  }

  .mf-widget-navigation-grid .mf-widget-heading p {
    margin-block-start: var(--mf-space-inline);
  }

  @container widget (min-width: 75rem) {
    .mf-widget-navigation-grid {
      height: calc((100% - var(--mf-space-3)) / 2);
    }
  }

  .mf-widget-actions {
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: var(--mf-space-group) var(--mf-space-inline);
    justify-content: flex-end;
    max-width: 100%;
  }

  .mf-widget-toolbar {
    flex-wrap: wrap;
    gap: var(--mf-space-inline);
  }

  .mf-widget-content {
    display: grid;
    gap: var(--mf-widget-content-gap);
    min-height: 0;
    min-width: 0;
  }

  .mf-widget-content-contents {
    display: contents;
  }

  .mf-widget-footer {
    border-top: var(--mf-divider-rule);
    padding-top: var(--mf-space-surface);
  }

  .mf-table-widget > .mf-widget-content,
  .mf-table-widget .mf-table-scroll {
    min-height: 0;
  }

  .mf-table-widget {
    container-name: widget table-widget;
    container-type: inline-size;
  }

  .mf-table-widget > .mf-widget-content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
  }

  .mf-table-widget .mf-table-scroll {
    flex: 1 1 auto;
  }

  .mf-table-widget-mobile-content {
    display: none;
  }

  .mf-table-widget-standard-content {
    display: contents;
  }

  .mf-table-toolbar,
  .mf-table-toolbar-actions,
  .mf-table-toolbar-filters {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--mf-space-inline);
  }

  .mf-table-toolbar {
    width: 100%;
  }

  .mf-table-toolbar > * {
    min-width: 0;
  }

  .mf-table-toolbar-filters {
    max-width: 100%;
  }

  .mf-table-toolbar-actions {
    margin-left: auto;
  }

  .mf-search-field {
    align-items: center;
    display: flex;
    min-width: min(100%, 220px);
    transition:
      background-color 160ms var(--mf-ease-out),
      border-color 160ms var(--mf-ease-out),
      box-shadow 160ms var(--mf-ease-out);
  }

  .mf-search-field > svg {
    flex: 0 0 auto;
  }

  .mf-search-field .mf-field {
    flex: 1 1 auto;
    gap: 0;
  }

  .mf-search-label-hidden .mf-field > span:first-child {
    border: 0;
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }

  .mf-search-field .mf-field input[type="search"]::-webkit-search-cancel-button {
    appearance: none;
    display: none;
  }

  .mf-search-field .mf-field input[type="search"]::-ms-clear {
    display: none;
  }

  .mf-segmented-control {
    border: 0;
    margin: 0;
    min-width: 0;
    padding: 0;
  }

  .mf-segmented-control > div {
    --mf-border-inset-space:
      0px;

    background: var(--mf-segmented-background, #2c2c2e);
    border: var(--mf-border-rule);
    border-radius: var(--mf-radius-pill);
    display: inline-flex;
    gap: var(--mf-space-text);
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    padding: var(--mf-segmented-track-padding);
  }

  .mf-segmented-control > div:has(.mf-segmented-trailing) {
    overflow: visible;
  }

  .mf-segmented-trailing {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
  }

  .mf-segmented-control > div::-webkit-scrollbar {
    display: none;
  }

  .mf-segmented-control .mf-segmented-button {
    appearance: none;
    background: transparent;
    border: 0;
    border-radius: var(--mf-radius-pill);
    color: var(--mf-segmented-text, #a1a1a6);
    cursor: pointer;
    flex: 0 0 auto;
    min-height: var(--mf-control-h-sm);
    min-width: var(--mf-control-h-sm);
    padding: 0 var(--mf-segmented-padding-inline);
    white-space: nowrap;
    transition:
      background-color 160ms var(--mf-ease-out),
      color 160ms var(--mf-ease-out),
      transform 160ms var(--mf-ease-out);
  }

  .mf-segmented-control .mf-segmented-button:active {
    transform: scale(0.97);
  }

  .mf-segmented-control .mf-segmented-button:is(.is-selected, [aria-pressed="true"]) {
    background: var(--mf-segmented-selected, #f5f5f7);
    color: var(--mf-segmented-selected-text, #1d1d1f);
  }

  @media (max-width: 520px) {
    .mf-widget-workspace {
      border-radius: var(--mf-border-radius);
    }
  }

  .mf-entity-cell {
    align-items: center;
    color: inherit;
    display: inline-flex;
    gap: var(--mf-space-group);
    min-width: 0;
    text-decoration: none;
  }

  .mf-entity-avatar {
    --mf-border-inset-space:
      0px;

    align-items: center;
    background: var(--mf-color-input);
    border: var(--mf-border-rule);
    border-radius: 50%;
    display: inline-flex;
    flex: 0 0 auto;
    height: 34px;
    justify-content: center;
    width: 34px;
  }

  .mf-entity-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .mf-entity-copy small {
    color: var(--mf-color-muted);
  }

  .mf-pagination,
  .mf-pagination-pages {
    align-items: center;
    display: flex;
    gap: var(--mf-space-text);
  }

  .mf-pagination {
    flex-wrap: nowrap;
    justify-content: center;
    width: 100%;
  }

  .mf-pagination .mf-button {
    min-width: var(--mf-control-h-sm);
  }

  .mf-pagination-pages {
    flex-wrap: nowrap;
    justify-content: center;
  }

  .mf-detail-page {
    container-name: detail-page;
    container-type: inline-size;
    display: grid;
    gap: var(--mf-page-gap);
    margin: 0 auto;
    max-width: var(--mf-page-max);
    min-width: 0;
    overflow-x: clip;
    width: 100%;
  }

  .mf-detail-page-actions,
  .mf-detail-page-summary,
  .mf-detail-sections,
  .mf-detail-main,
  .mf-detail-rail {
    display: grid;
    gap: var(--mf-page-gap);
    min-width: 0;
  }

  .mf-detail-grid {
    align-items: stretch;
    display: grid;
    gap: var(--mf-page-gap);
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
  }

  .mf-detail-grid[data-has-rail="true"] {
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  }

  .mf-description-list {
    display: grid;
    gap: var(--mf-space-inline);
    grid-template-columns: repeat(var(--mf-description-columns, 3), minmax(0, 1fr));
    margin: 0;
  }

  .mf-description-list[data-columns="1"] {
    --mf-description-columns: 1;
  }

  .mf-description-list[data-columns="2"] {
    --mf-description-columns: 2;
  }

  .mf-description-list[data-columns="3"] {
    --mf-description-columns: 3;
  }

  .mf-description-list[data-columns="4"] {
    --mf-description-columns: 4;
  }

  .mf-description-item {
    --mf-border-inset-space:
      0px;

    background: var(--mf-color-input);
    border: var(--mf-border-rule);
    border-radius: var(--mf-border-radius);
    display: grid;
    gap: var(--mf-space-text);
    min-width: 0;
    padding: var(--mf-space-surface);
    transition:
      background-color 160ms var(--mf-ease-out),
      border-color 160ms var(--mf-ease-out);
  }

  .mf-description-item dt,
  .mf-description-item small {
    color: var(--mf-color-muted);
  }

  .mf-description-item dd {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--mf-space-inline);
    justify-content: space-between;
    margin: 0;
    min-width: 0;
  }

  .mf-description-item dd small {
    flex-basis: 100%;
  }

  .mf-description-value {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .mf-description-action {
    flex: 0 0 auto;
  }

  .mf-table-notice {
    margin-bottom: var(--mf-space-group);
  }

  .mf-table-error {
    color: var(--mf-color-danger);
  }

  .mf-metric {
    container-name: widget metric-widget;
    container-type: inline-size;
    display: block;
    height: auto;
    min-height: var(--mf-kpi-h);
    overflow: hidden;
    position: relative;
  }

  .mf-metric::before {
    background: none;
    content: "";
    height: 150px;
    pointer-events: none;
    position: absolute;
    right: -58px;
    top: -82px;
    width: 150px;
    --mf-divider-underlay-image:
      none;
  }

  .mf-metric > .mf-widget-content,
  .mf-metric-link {
    align-items: center;
    display: grid;
    gap: var(--mf-space-inline) var(--mf-space-group);
    grid-template-columns: minmax(0, 1fr) auto;
    height: 100%;
    min-width: 0;
  }

  .mf-metric > .mf-widget-content:has(> .mf-metric-link) {
    display: block;
  }

  .mf-metric-link {
    color: inherit;
    text-decoration: none;
  }

  .mf-metric-trend > .mf-widget-content,
  .mf-metric-trend .mf-metric-link,
  .mf-metric-radial > .mf-widget-content,
  .mf-metric-radial .mf-metric-link {
    grid-template-columns: minmax(0, 1fr) clamp(52px, 24cqi, 86px);
  }

  .mf-metric-trend > .mf-widget-content,
  .mf-metric-trend .mf-metric-link {
    grid-template-columns: minmax(0, 1fr) clamp(76px, 38cqi, 132px);
  }

  .mf-metric-summary > .mf-widget-content,
  .mf-metric-summary .mf-metric-link {
    grid-template-columns: minmax(0, 1fr) clamp(66px, 24cqi, 86px);
  }

  .mf-metric-accent {
    border-color: var(--mf-color-border);
  }

  .mf-metric-positive .mf-metric-copy > strong {
    color: var(--mf-color-success);
  }

  .mf-metric-negative .mf-metric-copy > strong {
    color: var(--mf-color-danger);
  }

  .mf-metric-warning .mf-metric-copy > strong {
    color: var(--mf-color-warning);
  }

  .mf-metric-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
    z-index: 1;
  }

  .mf-metric-copy > span {
    color: var(--mf-color-muted);
  }

  .mf-metric-copy > strong {
    margin-top: var(--mf-space-text);
    min-width: 0;
    overflow-wrap: normal;
    word-break: normal;
  }

  .mf-metric-detail {
    color: var(--mf-color-muted);
    display: grid;
    gap: var(--mf-space-text);
    margin-top: var(--mf-space-inline);
  }

  .mf-metric-trailing,
  .mf-metric-action {
    align-items: center;
    display: inline-flex;
    justify-content: center;
  }

  .mf-metric-action {
    grid-column: 1 / -1;
  }

  .mf-metric-summary-icon {
    align-items: center;
    align-self: stretch;
    background: transparent;
    border: 0;
    border-radius: 0;
    color: var(--mf-color-accent);
    display: inline-flex;
    justify-content: center;
    min-height: 0;
    overflow: hidden;
    position: relative;
    width: 100%;
  }

  .mf-metric-summary-icon svg {
    height: clamp(34px, 16cqi, 42px);
    width: clamp(34px, 16cqi, 42px);
    filter: none;
    position: relative;
    z-index: 1;
  }

  .mf-metric-summary .mf-metric-copy {
    justify-content: center;
  }

  .mf-metric > .mf-widget-content > svg,
  .mf-metric-link > svg {
    color: var(--mf-color-muted);
  }

  .mf-metric-default > .mf-widget-content > svg,
  .mf-metric-default .mf-metric-link > svg {
    position: absolute;
    right: var(--mf-panel-pad);
    top: var(--mf-panel-pad);
  }

  .mf-metric-trend > .mf-widget-content > svg,
  .mf-metric-trend .mf-metric-link > svg,
  .mf-metric-radial > .mf-widget-content > svg,
  .mf-metric-radial .mf-metric-link > svg {
    display: none;
  }

  .mf-metric-visual {
    align-items: center;
    align-self: center;
    display: flex;
    height: clamp(46px, 18cqi, 72px);
    justify-content: center;
    min-width: 0;
    width: 100%;
  }

  .mf-metric-trend .mf-metric-visual {
    --mf-border-inset-space:
      0px;

    background: var(--mf-color-input);
    border: var(--mf-border-rule);
    border-radius: var(--mf-border-radius);
    overflow: hidden;
    padding: var(--mf-space-text);
    position: relative;
  }

  .mf-metric-trend .mf-metric-visual::before {
    background: rgb(255 255 255 / 8%);
    bottom: 11px;
    content: "";
    height: 1px;
    left: 2px;
    position: absolute;
    right: 2px;
  }

  .mf-metric-radial .mf-metric-visual {
    aspect-ratio: 1 / 1;
    height: auto;
    justify-self: center;
    max-height: calc(var(--mf-kpi-h) - var(--mf-surface-card-padding) * 2 - 2px);
    max-width: calc(var(--mf-kpi-h) - var(--mf-surface-card-padding) * 2 - 2px);
  }

  .mf-radial-progress {
    align-items: center;
    display: flex;
    height: var(--mf-radial-size, 100%);
    justify-content: center;
    max-height: 100%;
    max-width: 100%;
    min-height: 42px;
    min-width: 42px;
    position: relative;
    width: var(--mf-radial-size, 100%);
  }

  .mf-radial-progress[data-size="sm"] {
    --mf-radial-size: 42px;
  }

  .mf-radial-progress[data-size="lg"] {
    --mf-radial-size: 88px;
  }

  .mf-radial-progress progress {
    appearance: none;
    background: var(
      --mf-radial-background,
      conic-gradient(var(--mf-radial-color, var(--mf-color-accent)) var(--mf-radial-progress, 0%), var(--mf-color-border) 0)
    );
    border: 0;
    border-radius: 50%;
    height: 100%;
    inset: 0;
    position: absolute;
    width: 100%;
    animation: mf-radial-enter 480ms var(--mf-ease-out) both;
    filter: none;
    transform-origin: center;
  }

  .mf-radial-progress progress::-webkit-progress-bar,
  .mf-radial-progress progress::-webkit-progress-value {
    background: transparent;
  }

  .mf-radial-progress::after {
    background: var(--mf-color-panel);
    border-radius: 50%;
    content: "";
    height: 74%;
    position: absolute;
    width: 74%;
  }

  .mf-radial-progress[data-thickness="thick"]::after {
    height: 64%;
    width: 64%;
  }

  .mf-radial-progress > span {
    color: var(--mf-color-text);
    position: relative;
    z-index: 1;
  }

  .mf-radial-progress[data-tone="danger"] {
    --mf-radial-color: var(--mf-color-danger);
  }

  .mf-radial-progress[data-tone="success"] {
    --mf-radial-color: var(--mf-color-success);
  }

  .mf-radial-progress[data-tone="warning"] {
    --mf-radial-color: var(--mf-color-warning);
  }

  .mf-radial-progress[data-tone="neutral"] {
    --mf-radial-color: var(--mf-color-muted);
  }

  .mf-sparkline {
    height: 100%;
    overflow: visible;
    width: 100%;
  }

  .mf-sparkline-line {
    fill: none;
    filter: none;
    stroke: var(--mf-sparkline-color, var(--mf-color-accent));
    stroke-width: 2;
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
    vector-effect: non-scaling-stroke;
    animation: mf-sparkline-draw 360ms var(--mf-ease-out) both;
  }

  .mf-sparkline-area {
    fill: color-mix(in srgb, var(--mf-sparkline-color, var(--mf-color-accent)) 16%, transparent);
    stroke: none;
    animation: mf-chart-area-enter 320ms var(--mf-ease-out) 40ms both;
  }

  .mf-sparkline-empty {
    stroke: var(--mf-color-border);
    stroke-width: 1;
  }

  .mf-sparkline-point {
    fill: var(--mf-sparkline-color, var(--mf-color-accent));
    animation: mf-chart-point-enter 220ms var(--mf-ease-out) 180ms both;
    transform-box: fill-box;
    transform-origin: center;
  }

  .mf-sparkline[data-tone="danger"] {
    --mf-sparkline-color: var(--mf-color-danger);
  }

  .mf-sparkline[data-tone="neutral"] {
    --mf-sparkline-color: var(--mf-color-muted);
  }

  .mf-sparkline[data-tone="success"] {
    --mf-sparkline-color: var(--mf-color-success);
  }

  @keyframes mf-radial-enter {
    from {
      opacity: 0;
      transform: scale(0.94) rotate(-8deg);
    }
    to {
      opacity: 1;
      transform: scale(1) rotate(0);
    }
  }

  @keyframes mf-sparkline-draw {
    from {
      opacity: 0.35;
      stroke-dashoffset: 1;
    }
    to {
      opacity: 1;
      stroke-dashoffset: 0;
    }
  }

  @keyframes mf-chart-area-enter {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @keyframes mf-chart-point-enter {
    from {
      opacity: 0;
      transform: scale(0.86);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .mf-radial-progress progress,
    .mf-sparkline-area,
    .mf-sparkline-line,
    .mf-sparkline-point {
      animation: none;
    }
  }

  @container metric-widget (min-width: 281px) {
    :is(.mf-metric-trend, .mf-metric-radial) .mf-metric-detail {
      align-items: center;
      display: flex;
      gap: 0;
      margin-top: var(--mf-space-text);
      min-width: 0;
      white-space: nowrap;
    }

    :is(.mf-metric-trend, .mf-metric-radial) .mf-metric-detail > span {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    :is(.mf-metric-trend, .mf-metric-radial) .mf-metric-detail > small {
      flex: 0 0 auto;
      margin-left: var(--mf-space-text);
      white-space: nowrap;
    }

    :is(.mf-metric-trend, .mf-metric-radial) .mf-metric-detail > small::before {
      color: var(--mf-color-subtle);
      content: "\00b7";
      margin-right: var(--mf-space-text);
    }
  }

  @container detail-page (max-width: 1100px) {
    .mf-detail-grid[data-has-rail="true"] {
      grid-template-columns: minmax(0, 1fr);
    }

    .mf-description-list[data-columns="3"],
    .mf-description-list[data-columns="4"] {
      --mf-description-columns: 2;
    }
  }

  @container widget (max-width: 800px) {
    .mf-description-list[data-columns="3"],
    .mf-description-list[data-columns="4"] {
      --mf-description-columns: 2;
    }
  }

  @container widget (max-width: 680px) {

    .mf-widget-actions,
    .mf-widget-toolbar {
      justify-content: flex-start;
    }

    .mf-table-toolbar-search,
    .mf-table-toolbar-search .mf-search-field {
      width: 100%;
    }

    .mf-table-toolbar-actions {
      margin-left: 0;
    }
  }

  @container widget (max-width: 440px) {
    .mf-description-list {
      --mf-description-columns: 1 !important;
    }

    .mf-widget-header {
      gap: var(--mf-space-group);
    }
  }

  @container metric-widget (max-width: 280px) {
    .mf-metric-trend > .mf-widget-content,
    .mf-metric-trend .mf-metric-link {
      gap: var(--mf-space-inline);
      grid-template-columns: minmax(0, 1fr) minmax(48px, 62px);
    }

    .mf-metric-radial > .mf-widget-content,
    .mf-metric-radial .mf-metric-link,
    .mf-metric-summary > .mf-widget-content,
    .mf-metric-summary .mf-metric-link {
      gap: var(--mf-space-inline);
      grid-template-columns: minmax(0, 1fr) 44px;
    }

    .mf-metric-detail {
      margin-top: var(--mf-space-text);
    }

    :is(.mf-metric-trend, .mf-metric-radial) .mf-metric-detail {
      align-items: start;
      display: grid;
      white-space: normal;
    }

    :is(.mf-metric-trend, .mf-metric-radial) .mf-metric-detail > small {
      margin-left: 0;
      white-space: normal;
    }

    :is(.mf-metric-trend, .mf-metric-radial) .mf-metric-detail > small::before {
      content: none;
    }

    .mf-metric-summary-icon {
      --mf-summary-icon-underline-offset: 8px;
    }

    .mf-metric-visual {
      height: 52px;
    }
  }
}

/* Neighbour labels use the native disabled opacity while their buttons stay enabled. */
.mf-pagination-pages .mf-button:not(.is-current, :disabled) > .mf-button-ghost-label {
  opacity: var(--mf-control-disabled-opacity);
}

.mf-scroll-pagination {
  min-height: var(--mf-space-1);
}

/* Paged tables retain horizontal scrolling; complete rows are distributed by the shared controller. */
.mf-table-paginated {
  overflow-y: hidden;
}

.mf-scroll-loading {
  align-items: center;
  display: flex;
  justify-content: center;
}

.mf-scroll-loading-icon {
  cursor: default;
  pointer-events: none;
}

.mf-scroll-loading-icon > svg {
  animation: mf-scroll-loading-rotate 800ms linear infinite;
  animation-play-state: paused;
  transform-box: fill-box;
  transform-origin: center;
}

@keyframes mf-scroll-loading-rotate {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mf-scroll-loading-icon > svg {
    animation: none;
  }
}

/* Full-height surfaces keep chrome fixed and scroll only overflowing real content. */
.mf-widget.mf-widget-fill {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  min-height: min-content;
}

.mf-widget-fill > :is(.mf-widget-header, .mf-widget-toolbar, .mf-widget-footer) {
  flex: 0 0 auto;
}

.mf-widget-fill > .mf-widget-content-grid {
  align-content: stretch;
  flex: 1 1 auto;
  min-height: min-content;
  overflow: auto;
}

/* Flat comparison columns live inside a single shared surface. */

/* A resource state occupies the same body area without data or content controls. */
.mf-widget > .mf-widget-content-pending {
  align-items: stretch;
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
}

/*!***************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./node_modules/@marketforge/ui/src/styles/components/typography.css ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************/
/* The same recipes apply to product, public, auth, Admin and catalog documents. */
html:root body {
  font-family: var(--mf-font-family);
  font-size: var(--mf-type-body);
  font-weight: var(--mf-type-regular-weight);
  line-height: var(--mf-leading-sm);
  letter-spacing: normal;
}
html:root :is(h1, h2, h3, h4, h5, h6, p, button, a, input, select, textarea, code, pre) {
  letter-spacing: normal;
}
html:root :is(code, pre, kbd, samp) {
  font-family: var(--mf-font-family);
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}
html:root h1 {
  font-size: var(--mf-type-title);
  font-weight: var(--mf-type-heading-weight);
  line-height: var(--mf-leading-page-title);
}
html:root h2 {
  font-size: var(--mf-type-section);
  font-weight: var(--mf-type-heading-weight);
  line-height: var(--mf-leading-metric);
}
html:root :is(h3, h4, h5, h6) {
  font-size: var(--mf-type-heading);
  font-weight: var(--mf-type-heading-weight);
  line-height: var(--mf-leading-base);
}
html:root :is(button, summary, [role="button"], [role="option"], [role^="menuitem"], .mf-button, .mf-tab-button, .mf-segmented-button, .mobile-tabbar-item, .nav-link, .nav-child-link) {
  font-family: var(--mf-font-family);
  font-size: var(--mf-type-control);
  font-weight: var(--mf-type-medium-weight);
  line-height: var(--mf-leading-sm);
}
html:root :is(input, select, textarea, .mf-desktop-select-trigger) {
  font-family: var(--mf-font-family);
  font-size: var(--mf-type-field);
  font-weight: var(--mf-type-regular-weight);
  line-height: var(--mf-leading-base);
}
html:root small {
  font-size: var(--mf-type-secondary);
  font-weight: var(--mf-type-regular-weight);
  line-height: var(--mf-leading-xs);
}
html:root :is(dd, td, p, .mf-description-value) {
  font-size: var(--mf-type-body);
  font-weight: var(--mf-type-regular-weight);
  line-height: var(--mf-leading-sm);
}
html:root :is(strong, b) {
  font-weight: var(--mf-type-heading-weight);
}


/* Product, dialogs and portalled menus use the same inherited body recipe. */
html:root :is(.app-shell, .mf-dialog, .mf-popover) {
  font-family: var(--mf-font-family);
  font-size: var(--mf-type-body);
  font-weight: var(--mf-type-regular-weight);
  line-height: var(--mf-leading-sm);
}

/* Inline text follows its parent's role instead of restarting a local scale. */
html:root :where(.app-shell, .mf-dialog, .mf-popover) :is(span, strong, b, em) {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
}

html:root :is(.app-shell, .mf-dialog, .mf-popover) :is(strong, b) {
  font-weight: var(--mf-type-heading-weight);
}

/* Inline emphasis in a control follows the control's weight. Entity headings
   and read-only records retain their more specific functional recipes. */
html:root :is(button, summary, [role="button"], [role="option"], [role^="menuitem"], .mf-button) :is(strong, b) {
  font-weight: inherit;
}

/* Block headings and standalone entity names share one hierarchy. */
html:root :is(.app-shell, .mf-dialog) :is(h2, h3, h4, h5),
html:root :is(.app-shell, .mf-dialog, .mf-popover, .mf-widget) :is(
  .mf-widget-heading h2,
  .mf-widget-heading h3,
  .mf-panel-header h2,
  .mf-navigation-copy strong,
  .mf-entity-name,
  .mf-table-link strong,
  .connection-fee-market-row h4,
  .charts-symbol-control strong,
  .bot-fleet-card-name,
  .asset-card-heading h3,
  .asset-market-identity strong,
  .connection-card-identity h3,
  .connection-fees-heading h3,
  .connection-fee-market h4,
  .connection-credential-set > legend,
  .admin-form-group > legend,
  .admin-capabilities > legend,
  .settings-security-mobile-list-heading strong,
  .settings-security-event-list strong,
  .notification-center-item-heading strong,
  .notification-inbox-header strong
) {
  font-family: var(--mf-font-family);
  font-size: var(--mf-type-heading);
  font-weight: var(--mf-type-heading-weight);
  letter-spacing: normal;
  line-height: var(--mf-leading-base);
}

/* Page identity has a larger role than the sections below it. */
html:root :is(.app-shell, .mf-dialog) h1,
html:root .app-shell :is(
  .app-topbar h1,
  .notifications-overview h2,
  .notification-detail-message h1,
  .profile-identity h2,
  .asset-history-heading h2,
  .charts-empty-heading h2
) {
  font-family: var(--mf-font-family);
  font-size: var(--mf-type-title);
  font-weight: var(--mf-type-heading-weight);
  line-height: var(--mf-leading-page-title);
}

/* Quiet metadata has low specificity so its functional role takes precedence. */
html:root :is(.app-shell, .mf-dialog) :is(dt, small),
html:root :is(.app-shell, .mf-dialog, .mf-popover, .mf-widget) :where(
  .mf-widget-heading p,
  .mf-panel-header p,
  .mf-page-header p,
  .mf-entity-copy small,
  .mf-description-item dt,
  .mf-description-item small,
  .mf-field > span:first-child,
  .mf-field small:not(.mf-field-error),
  .mf-choice-group legend,
  .mf-navigation-copy > span,
  .navigation-index-group > h2,
  .mf-metric-copy > span,
  .mf-metric-detail,
  .mf-status-notice-body,
  .mf-status-notice-body :is(p, span, small),
  .mf-status-notice-metadata,
  :is(.mf-async-state-empty-content, .mf-async-state-embedded-content) p,
  .mf-async-state-embedded-content > [role="alert"],
  .empty-state,
  .muted-line,
  .page-subtitle,
  .mf-pagination-summary,
  .mf-table th,
  .mf-table-link small,
  .eyebrow,
  .profile-eyebrow,
  .notification-inbox-header span,
  .notification-severity-label,
  .bot-creation-note,
  .connection-fee-group-label,
  .connection-fee-group-rate dt,
  .notification-detail-page-section h3,
  .mf-mobile-record-message,
  .bot-history-activity-message > span,
  .mf-mobile-record-day-header,
  .bot-history-activity-record-message,
  .bot-history-records dt,
  .mf-mobile-record-list dt,
  .bot-management-mobile-values dt,
  .bot-fleet-card-market,
  .bot-fleet-card-strategy,
  .bot-fleet-card-stats dt,
  .bot-fleet-card-stats dd > small,
  .bot-management-section-heading p,
  .bot-management-mobile-delete p,
  .dashboard-mobile-balance h2,
  .dashboard-mobile-record-details dt,
  .dashboard-mobile-record-time,
  .asset-movement-copy time,
  .asset-card-heading p,
  .asset-card-balance :is(span, small),
  .asset-location-empty,
  .asset-market-identity small,
  .asset-history-more-filters label > span,
  .connection-environment-facts dt,
  .connection-card-meta small,
  .connection-environment-note,
  .connection-add-environment-copy small,
  .connection-page-description,
  .connection-diagnostic-copy,
  .connection-fees-rates dt,
  .connection-fees-note,
  .settings-security-mobile-metadata dt,
  .settings-security-mobile-list-heading > div > span,
  .settings-security-event-list :is(time, div > span),
  .settings-security-mobile-empty,
  .settings-appearance-control-group header p,
  .profile-accent-setting header p,
  .profile-details-card dt,
  .profile-form-grid label > span:first-child,
  .profile-share-created label > span:first-child,
  .profile-identity > div span,
  .billing-checkout-summary dt,
  .billing-checkout-security-note,
  .notification-row-description,
  .notification-center-item-copy time,
  .notification-detail-page-section dt,
  .notification-detail-page-section h2,
  .notifications-overview-copy > span,
  .charts-mobile-stats dt,
  .charts-mobile-price-block small,
  .charts-mobile-control-label,
  .charts-symbol-control small,
  .charts-tab small,
  .charts-instrument-result small,
  .charts-instrument-ticks,
  .charts-quote-strip small,
  .oauth-security-note
) {
  color: var(--mf-color-muted);
  font-family: var(--mf-font-family);
  font-size: var(--mf-type-secondary);
  font-weight: var(--mf-type-regular-weight);
  letter-spacing: normal;
  line-height: var(--mf-leading-xs);
}

/* Values and timestamps share a single role, without making labels bold. */
html:root :is(.app-shell, .mf-dialog) dd,
html:root :is(.app-shell, .mf-dialog, .mf-popover, .mf-widget) :is(
  .mf-description-value,
  .mf-detail-list dd,
  .bot-history-records dd,
  .bot-history-mobile-record-header time,
  .mf-mobile-record-list dd,
  .mf-mobile-record-header,
  .mf-mobile-record-header time,
  .bot-management-mobile-values dd,
  .bot-fleet-card-stats dd,
  .bot-creation-fixed-field strong,
  .dashboard-mobile-record-details dd,
  .asset-movement-amount,
  .asset-card-balance strong,
  .asset-card-market-value,
  .asset-location-quantity,
  .asset-market-row > span:not(.asset-market-identity, .asset-market-action),
  .asset-market-row time,
  .connection-environment-facts dd,
  .connection-card-meta strong,
  .connection-fees-rates dd,
  .connection-fee-group-rate dd,
  .settings-security-mobile-metadata dd,
  .profile-details-card dd,
  .billing-checkout-summary dd,
  .charts-mobile-stats dd,
  .charts-quote-strip strong,
  .tax-counts strong
) {
  color: var(--mf-color-text);
  font-family: var(--mf-font-family);
  font-size: var(--mf-type-value);
  font-weight: var(--mf-type-regular-weight);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  line-height: var(--mf-leading-sm);
}

html:root :where(.app-shell, .mf-dialog) p:not(:where(.mf-status-notice-copy *, .mf-status-notice-body)),
html:root :is(.app-shell, .mf-dialog, .mf-popover, .mf-widget) :is(.notification-detail-message p, .scratch-block-library-list) {
  font-size: var(--mf-type-body);
  font-weight: var(--mf-type-regular-weight);
  line-height: var(--mf-leading-sm);
}

html:root :is(.app-shell, .mf-dialog, .mf-popover, .mf-widget) :is(.mf-status-notice-title, :is(.mf-async-state-empty-content, .mf-async-state-embedded-content) h2) {
  font-size: var(--mf-type-heading);
  font-weight: var(--mf-type-heading-weight);
  line-height: var(--mf-leading-base);
}

/* Notices have the same typography in public, access and product contexts. */
html:root .mf-status-notice-group .mf-status-notice {
  font-family: var(--mf-font-family);
  text-align: left;
}

html:root .mf-status-notice-group .mf-status-notice .mf-status-notice-title,
html:root :is(.mf-async-state-empty-content, .mf-async-state-embedded-content) h2 {
  font-family: var(--mf-font-family);
  font-size: var(--mf-type-heading);
  font-weight: var(--mf-type-heading-weight);
  line-height: var(--mf-leading-base);
}

html:root .mf-status-notice-group .mf-status-notice .mf-status-notice-body,
html:root .mf-status-notice-group .mf-status-notice .mf-status-notice-body :is(p, span, small),
html:root .mf-status-notice-group > .mf-status-notice-metadata,
html:root :is(.mf-async-state-empty-content, .mf-async-state-embedded-content) > :is(p, [role="alert"]) {
  font-family: var(--mf-font-family);
  font-size: var(--mf-type-body);
  font-weight: var(--mf-type-regular-weight);
  line-height: var(--mf-leading-sm);
}

html:root :is(.app-shell, .mf-dialog, .mf-popover, .mf-widget) .bot-history-alert-message > strong {
  font-weight: var(--mf-type-heading-weight);
}

/* Execution references use Inter with the auxiliary text recipe. */
html:root :is(.app-shell, .mf-dialog, .mf-popover, .mf-widget) .bot-history-execution-reference code {
  font-family: var(--mf-font-family);
  font-size: var(--mf-type-secondary);
  font-weight: var(--mf-type-regular-weight);
  line-height: var(--mf-leading-xs);
}

/* Controls retain their geometry, touch targets, disabled states and tones. */
html:root :is(.app-shell, .mf-dialog, .mf-popover, .mf-widget) :is(
  .mf-button,
  .mf-tab-button,
  .mf-segmented-button,
  .mf-widget-more-action:not(:where(html.web-desktop .mf-widget-more-action)),
  .mf-popover-compact > button,
  .mf-choice-card-appearance,
  .mf-switch em,
  .connection-setup-environment-label,
  .connection-detail-environments > span,
  .connection-environment-panel-plain-header > span,
  .charts-symbol-control,
  .charts-tab,
  .charts-instrument-result,
  .settings-appearance-color-option,
  .connection-add-environment-copy strong,
  .asset-market-action
) {
  font-family: var(--mf-font-family);
  font-size: var(--mf-type-control);
  font-weight: var(--mf-type-medium-weight);
  line-height: var(--mf-leading-sm);
}


html:root :is(.app-shell, .mf-dialog, .mf-popover, .mf-widget) .mf-table {
  font-size: var(--mf-type-list);
  font-weight: var(--mf-type-regular-weight);
  line-height: var(--mf-leading-sm);
}

html:root :is(.app-shell, .mf-dialog, .mf-popover, .mf-widget) .mf-field-error {
  font-size: var(--mf-type-secondary);
  font-weight: var(--mf-type-regular-weight);
  line-height: var(--mf-leading-xs);
}

html:root :is(.app-shell, .mf-dialog, .mf-popover, .mf-widget) :is(
  .dashboard-mobile-pnl > strong,
  .charts-mobile-price-block > span,
  .charts-quote-strip > span
) {
  font-family: var(--mf-font-family);
  font-size: var(--mf-type-value);
  font-weight: var(--mf-type-regular-weight);
  line-height: var(--mf-leading-sm);
}

html:root :is(.app-shell, .mf-dialog, .mf-popover, .mf-widget) :is(.mf-badge, .mf-attribute-badge, .connection-vip-badge, .connection-environment-pills span) {
  font-family: var(--mf-font-family);
  font-size: var(--mf-type-secondary);
  font-weight: var(--mf-type-medium-weight);
  line-height: var(--mf-leading-xs);
}

/* Financial headline metrics remain a distinct, larger numeric hierarchy. */
html:root :is(.app-shell, .mf-dialog, .mf-popover, .mf-widget) :is(
  .mf-metric-copy > strong,
  .dashboard-mobile-balance-value,
  .charts-mobile-price-block > strong,
  .connection-fee-rate-primary dd
) {
  font-family: var(--mf-font-family);
  font-size: var(--mf-type-metric);
  font-weight: var(--mf-type-heading-weight);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  line-height: var(--mf-leading-metric);
}

/* Editable text keeps its own role; field geometry belongs to forms.css. */
html:root :is(.app-shell, .mf-dialog, .mf-popover, .mf-widget) :is(.mf-field, .mf-search-field, .scratch-name-field)
  :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"]), select, textarea) {
  font-family: var(--mf-font-family);
  font-size: var(--mf-type-field);
  font-weight: var(--mf-type-regular-weight);
  line-height: var(--mf-leading-base);
}

/* Product dropdown options share the More menu's control role. */
html:root .mf-popover.mf-popover-product :is([role="option"], [role^="menuitem"]),
html:root .mf-popover.mf-popover-product > button,
html:root:has(.app-shell) [class~="blocklyMenuItem"] {
  font-family: var(--mf-font-family);
  font-size: var(--mf-type-control);
  font-weight: var(--mf-type-medium-weight);
  letter-spacing: normal;
  line-height: var(--mf-leading-sm);
  text-rendering: auto;
}

/* Descriptions are reading text; secondary metadata stays on its own role. */
html:root :is(.app-shell, .mf-dialog, .mf-popover, .mf-widget) :is(
  .mf-widget-heading p, .mf-panel-header p, .mf-page-header p, .page-subtitle,
  .mf-status-notice-body, .mf-status-notice-body :is(p, span, small),
  .mf-async-state-empty-content p, .mf-async-state-embedded-content p,
  .bot-management-section-heading p, .bot-management-mobile-delete p,
  .settings-appearance-control-group header p,
  .profile-accent-setting header p,
  .notification-row-description, .connection-diagnostic-copy, .connection-page-description
) {
  font-size: var(--mf-type-body);
  font-weight: var(--mf-type-regular-weight);
  line-height: var(--mf-leading-sm);
}
html:root :is(dt, th, .mf-field),
html:root :is(.app-shell, .auth-site, .marketing-site, .mf-dialog, .mf-popover, .mf-widget) :where(
  dt, th, .eyebrow, .profile-eyebrow, .mf-metric-copy > span,
  .dashboard-mobile-balance h2, .mf-mobile-record-day-header,
  .navigation-index-group > h2, .notification-severity-label,
  .connection-fee-group-label, .charts-mobile-control-label,
  .mf-field > span:first-child, .mf-choice-group legend, .mf-badge, .mf-attribute-badge,
  .connection-vip-badge, .connection-environment-pills span, .notification-badge, .connection-permission
) {
  font-size: var(--mf-type-label);
  font-weight: var(--mf-type-medium-weight);
  line-height: var(--mf-leading-xs);
}
html:root :is(.mf-metric-copy > strong, .public-plan-price > strong, .paywall-total strong) {
  font-size: var(--mf-type-metric);
  font-weight: var(--mf-type-heading-weight);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  line-height: var(--mf-leading-metric);
}
html:root :is(.marketing-site, .auth-site) :is(
  .site-brand, .auth-brand, .public-plan-name, .market-card h3, .platform-card h3,
  .detail-card h3, .trading-feature-list dt, .marketing-strategy-operation h3,
  .footer-column strong, .resource-toc strong,
  .marketing-mobile-footer-group > h3, .shared-profile-performance h2
) {
  font-size: var(--mf-type-heading);
  font-weight: var(--mf-type-heading-weight);
  line-height: var(--mf-leading-base);
}
html:root :is(.marketing-site, .auth-site) :is(h1, .auth-page-heading h1, .paywall-step-heading h1, .marketing-dashboard-heading h2) {
  font-size: var(--mf-type-title);
  font-weight: var(--mf-type-heading-weight);
  line-height: var(--mf-leading-page-title);
}
html:root .marketing-site :is(.marketing-hero, .subpage-hero, .pricing-hero, .resource-hero) h1 {
  font-size: var(--mf-type-hero);
  font-weight: var(--mf-type-heading-weight);
  line-height: var(--mf-leading-public-title);
  overflow-wrap: anywhere;
  text-wrap: balance;
}
html:root .marketing-site :is(.section-heading > h2, .section > h2, .trading-context-copy > h2, .pricing-faq h2, .resource-section > h2, .support-report-heading h2, .footer-statement) {
  font-size: var(--mf-type-public-section);
  font-weight: var(--mf-type-heading-weight);
  line-height: var(--mf-leading-public-section);
}
html:root .marketing-site :is(.site-nav-links > a, .footer-column a, .resource-toc a, .card-link, .marketing-mobile-navigation-group-links > a, .marketing-mobile-footer-group a, .marketing-mobile-footer-closing a) {
  font-size: var(--mf-type-control);
  font-weight: var(--mf-type-medium-weight);
  line-height: var(--mf-leading-sm);
}
html:root :is(.marketing-site, .auth-site) :is(.resource-document-meta, .footer-bottom, .shared-profile-kicker, .shared-profile-expiry, .auth-inline-note, .paywall-status, .paywall-footer, .public-plan-price-period, .public-plan-annual-total) {
  font-size: var(--mf-type-secondary);
  font-weight: var(--mf-type-regular-weight);
  line-height: var(--mf-leading-xs);
}
html:root :is(.marketing-site, .auth-site) .paywall-selection-label {
  font-size: var(--mf-type-label);
  font-weight: var(--mf-type-medium-weight);
  line-height: var(--mf-leading-xs);
}

/* Buttons keep exactly the same text recipe, including compact content slots. */
html:root .mf-button,
html:root .mf-button .mf-button-content-visible,
html:root .mf-button > .mf-button-ghost-label,
html:root .mf-choice-card strong {
  font-family: var(--mf-font-family);
  font-size: var(--mf-type-control);
  font-weight: var(--mf-type-medium-weight);
  line-height: var(--mf-leading-sm);
}
html:root :is(.mf-field, .mf-search-field, .scratch-name-field) :is(input, select, textarea),
html:root .mf-desktop-select-trigger {
  font-size: var(--mf-type-field);
  font-weight: var(--mf-type-regular-weight);
  line-height: var(--mf-leading-base);
}

/* Blockly supplies inline point sizes. These fields use the common editable role. */
/* stylelint-disable selector-class-pattern -- Blockly owns SVG and native field classes. */
html:root .blocklyInputField > .blocklyFieldText {
  font-family: var(--mf-font-family) !important;
  font-size: var(--mf-type-field) !important;
  font-weight: var(--mf-type-regular-weight) !important;
  letter-spacing: normal;
}
html:root .blocklyHtmlInput {
  font-family: var(--mf-font-family) !important;
  font-size: calc(var(--mf-type-field) * var(--mf-block-field-scale, 1)) !important;
  font-weight: var(--mf-type-regular-weight) !important;
  line-height: var(--mf-leading-base) !important;
  letter-spacing: normal;
}
html:root :is(.blocklyTooltipDiv, .blocklyMenu, .blocklyMenuItem, .blocklyToolboxCategoryLabel) {
  font-family: var(--mf-font-family) !important;
  font-size: var(--mf-type-control);
  font-weight: var(--mf-type-medium-weight);
  line-height: var(--mf-leading-sm);
}
/* stylelint-enable selector-class-pattern */

/* Explicit recipes are also the catalog's standard specimens. */
html:root .mf-text-secondary { font-size: var(--mf-type-secondary); font-weight: var(--mf-type-regular-weight); line-height: var(--mf-leading-xs); }
html:root .mf-text-label { font-size: var(--mf-type-label); font-weight: var(--mf-type-medium-weight); line-height: var(--mf-leading-xs); }
html:root .mf-text-body { font-size: var(--mf-type-body); font-weight: var(--mf-type-regular-weight); line-height: var(--mf-leading-sm); }
html:root .mf-text-list { font-size: var(--mf-type-list); font-weight: var(--mf-type-regular-weight); line-height: var(--mf-leading-sm); }
html:root .mf-text-control { font-size: var(--mf-type-control); font-weight: var(--mf-type-medium-weight); line-height: var(--mf-leading-sm); }
html:root .mf-text-field { font-size: var(--mf-type-field); font-weight: var(--mf-type-regular-weight); line-height: var(--mf-leading-base); }
html:root .mf-text-heading { font-size: var(--mf-type-heading); font-weight: var(--mf-type-heading-weight); line-height: var(--mf-leading-base); }
html:root .mf-text-section { font-size: var(--mf-type-section); font-weight: var(--mf-type-heading-weight); line-height: var(--mf-leading-metric); }
html:root .mf-text-title { font-size: var(--mf-type-title); font-weight: var(--mf-type-heading-weight); line-height: var(--mf-leading-page-title); }
html:root .mf-text-public-section { font-size: var(--mf-type-public-section); font-weight: var(--mf-type-heading-weight); line-height: var(--mf-leading-public-section); }
html:root .mf-text-hero { font-size: var(--mf-type-hero); font-weight: var(--mf-type-heading-weight); line-height: var(--mf-leading-public-title); }

html:root .studio-workspace :is(.scratch-studio-panel h2, .scratch-block-library-group-heading h4) { font-size: var(--mf-type-heading); font-weight: var(--mf-type-heading-weight); line-height: var(--mf-leading-base); }
html:root .studio-workspace :is(.scratch-block-library-list small, .scratch-save-status, .scratch-panel-empty) { font-size: var(--mf-type-secondary); font-weight: var(--mf-type-regular-weight); line-height: var(--mf-leading-xs); }
html:root .studio-workspace :is(.scratch-block-library-group-heading > span:last-child, .scratch-minimap-count) { font-size: var(--mf-type-label); font-weight: var(--mf-type-medium-weight); line-height: var(--mf-leading-xs); }

/* The isolated Admin viewer embeds this same owner and the same Inter assets. */
html:root[data-architecture-viewer="true"] :is(
  .semantic-lens-title, .route-probe-title, .relationship-lens-title,
  .diagram-guide-title, .node-finder-head strong, .overview-map-copy strong,
  .share-chapter-copy strong, .guided-view-copy strong, .guided-story-caption strong
) {
  font-size: var(--mf-type-heading);
  font-weight: var(--mf-type-heading-weight);
  line-height: var(--mf-leading-base);
}
html:root[data-architecture-viewer="true"] :is(
  .share-chapter-state, .share-chapter-count, .share-chapter-route,
  .semantic-lens-eyebrow, .route-probe-eyebrow, .relationship-lens-eyebrow,
  .diagram-guide-eyebrow, .guided-view-meta, .guided-story-caption-index,
  .guided-view-chapter-index, .guided-view-chapter-count, .guided-view-chapter-delta,
  .semantic-passport-meta, .semantic-passport-evidence-status,
  .semantic-passport-reach-label, .relationship-lens-group-title,
  .relationship-lens-direction, .diagram-guide-index,
  .preset-menu-heading, .export-menu-heading, .node-finder-search > span
) {
  font-size: var(--mf-type-label);
  font-weight: var(--mf-type-medium-weight);
  line-height: var(--mf-leading-xs);
}
html:root[data-architecture-viewer="true"] :is(
  kbd, .diagram-nav-detail, .diagram-nav-percent, .overview-map-hint,
  .semantic-passport-repository, .diagram-guide-stats, .diagram-guide-shortcuts,
  .export-menu-header > span, .hint
) {
  font-size: var(--mf-type-secondary);
  font-weight: var(--mf-type-regular-weight);
  line-height: var(--mf-leading-xs);
}
html:root[data-architecture-viewer="true"] button strong {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

/* Read-only records share one recipe, including column labels and metadata.
   Keep this after the general roles: names and inline emphasis in a record
   do not become headings. Colors and control geometry stay with their owners. */
html:root :is(
  .mf-table,
  .mf-data-list,
  .mf-card-grid,
  .mf-mobile-collection,
  .mf-mobile-record-list,
  .mf-mobile-record-days,
  .mf-description-list,
  dl.mf-detail-list,
  .app-shell dl,
  .dashboard-mobile-record-list,
  .bot-history-records,
  .asset-card-grid,
  .asset-market-list,
  .asset-movement-list,
  .asset-locations,
  .allocation-list,
  .settings-security-mobile-list,
  .profile-share-rows,
  .billing-promotions-list,
  .notification-center-list,
  .tax-issue-list,
  .backtest-study-list,
  .scratch-strategy-list,
  .charts-instrument-results,
  .charts-data-table-wrap
) :is(
  thead, tbody, tr, th, td, ul, ol, li, dl, dt, dd, div, span, p, a, button,
  strong, b, em, small, time, code, pre, h2, h3, h4, h5, h6, label, output, summary,
  .mf-entity-name, .mf-table-link, .mf-badge, .mf-attribute-badge
):not(:where(
  .mf-table-empty, .mf-table-empty *, .mf-async-state *, .mf-field, .mf-field *,
  .mf-search-field, .mf-search-field *, .mf-choice-group, .mf-choice-group *
)) {
  font-size: var(--mf-type-list);
  font-weight: var(--mf-type-regular-weight);
  font-style: normal;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  line-height: var(--mf-leading-sm);
}

/* Numeric atoms may move to another line, but never split digits or a percent sign. */
.mf-number-text {
  overflow-wrap: normal;
  white-space: nowrap;
  word-break: normal;
}

/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./node_modules/@marketforge/ui/src/styles/components/public-secondary.css ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************************/
/* Compact primary, secondary and danger actions share one content geometry. */
html:root .mf-button:is(.mf-button-public-secondary, .mf-button-product-primary, .mf-button-product-danger, .mf-button-marketing-primary.mf-button-compact, .mf-button-marketing-secondary.mf-button-compact, :where(html.web-desktop) .mf-widget-more-action) {
  --mf-control-product-height: var(--mf-button-public-compact-height);
  --mf-field-height: var(--mf-button-public-compact-height);
  --mf-control-h-mobile: var(--mf-button-public-compact-height);

  align-items: center;
  border-style: var(--mf-border-style);
  border-width: var(--mf-border-width);
  border-radius: var(--mf-radius-pill);
  box-sizing: border-box;
  display: inline-flex;
  gap: var(--mf-button-content-gap);
  height: var(--mf-button-public-compact-height);
  justify-content: center;
  min-height: var(--mf-button-public-compact-height);
  min-width: 0;
  padding: 0 var(--mf-button-padding-inline);
  position: relative;
  white-space: nowrap;
}

html:root .mf-button:is(.mf-button-public-secondary, :where(html.web-desktop) .mf-widget-more-action) {
  background: var(--mf-button-public-secondary-background);
  border-color: var(--mf-color-border);
  color: var(--mf-marketing-ink);
  transition:
    filter var(--mf-button-compact-transition-duration) ease,
    transform var(--mf-button-compact-transition-duration) ease,
    background-color var(--mf-button-compact-transition-duration) ease;
}

html:root :is(.mf-button-public-secondary, .mf-button-product-primary, .mf-button-product-danger, .mf-button-marketing-primary.mf-button-compact, .mf-button-marketing-secondary.mf-button-compact, :where(html.web-desktop) .mf-widget-more-action) > .mf-button-content-visible {
  align-items: center;
  display: inline-flex;
  gap: var(--mf-button-content-gap);
  min-width: 0;
  overflow: hidden;
  justify-content: center;
  position: static;
  white-space: nowrap;
}

html:root :is(.mf-button-public-secondary, .mf-button-product-primary, .mf-button-product-danger, .mf-button-marketing-primary.mf-button-compact, .mf-button-marketing-secondary.mf-button-compact, :where(html.web-desktop) .mf-widget-more-action) > .mf-button-content-visible > :not(svg, img) {
  font: inherit;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html:root :is(.mf-button-public-secondary, .mf-button-product-primary, .mf-button-product-danger, .mf-button-marketing-primary.mf-button-compact, .mf-button-marketing-secondary.mf-button-compact, :where(html.web-desktop) .mf-widget-more-action) :is(svg, img) {
  flex: 0 0 auto;
  height: 1em;
  width: 1em;
}

html:root .mf-button:is(.mf-button-public-secondary, .mf-button-product-primary, .mf-button-product-danger, .mf-button-marketing-primary.mf-button-compact, .mf-button-marketing-secondary.mf-button-compact, :where(html.web-desktop) .mf-widget-more-action):active:not(:disabled) {
  filter: brightness(var(--mf-button-compact-pressed-brightness));
  transform: scale(0.97);
}

/*!********************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./node_modules/@marketforge/ui/src/styles/components/product-primary.css ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************/
/* Semantic palettes reuse the compact geometry in public-secondary.css. */
html:root .mf-button:is(.mf-button-product-primary, .mf-button-product-danger) {
  background: var(--mf-product-action-background, var(--mf-color-accent));
  border: 0;
  color: var(--mf-product-action-foreground, var(--mf-color-on-accent));
  cursor: pointer;
  transition:
    filter 150ms ease,
    transform 150ms ease,
    background-color 150ms ease;
}

/* Filled actions have no separate perimeter; keep the former spacer in padding. */
html:root .mf-button:is(.mf-button-product-primary, .mf-button-product-danger, .mf-button-marketing-primary.mf-button-compact) {
  border: 0;
  padding-inline: calc(var(--mf-button-padding-inline) + var(--mf-border-width));
}

html:root .mf-button.mf-button-primary:not(.mf-button-icon-only, .mf-button-product-primary, .mf-button-product-danger) {
  border: 0;
  padding-inline: calc(var(--mf-control-product-padding) + var(--mf-border-width));
}

html:root .mf-button.mf-button-product-danger {
  --mf-product-action-background: var(--mf-color-danger-light);
  --mf-product-action-foreground: var(--mf-color-on-danger);
}

/* Primary actions keep their contextual accent and fixed light foreground. */
html:root .mf-button:is(.mf-button-product-primary, .mf-button-marketing-primary.mf-button-compact) {
  color: var(--mf-control-compact-primary-foreground);
}

/*!********************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./node_modules/@marketforge/ui/src/styles/platform/mobile/typography.css ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************/
/* Same text roles on both platforms; navigation changes role when compact. */
@media (max-width: 760px), (max-width: 1024px) and (max-height: 500px) {
  html:root[data-mobile-device="true"] {
    --mf-type-hero: var(--mf-text-display);
    --mf-type-public-section: var(--mf-text-page-title);
    --mf-leading-public-title: var(--mf-leading-display);
    --mf-leading-public-section: var(--mf-leading-page-title);

    /* Inter's x-height keeps a 14 px appearance with Safari's 16 px focus layout. */
    --mf-field-focus-layout-size: 16px;
    --mf-field-font-aspect: calc(1118 / 2048);
    --mf-field-font-adjust: calc(var(--mf-field-font-aspect) * 0.875);
  }

  @supports (font-size-adjust: calc(1px / 1px)) {
    html:root[data-mobile-device="true"] {
      --mf-field-font-adjust: calc(var(--mf-field-font-aspect) * var(--mf-type-field) / var(--mf-field-focus-layout-size));
    }
  }

  html:root[data-mobile-device="true"] .app-shell .app-page-header h1 {
    font-size: var(--mf-type-title);
    font-weight: var(--mf-type-heading-weight);
    line-height: var(--mf-leading-page-title);
  }
  html:root[data-mobile-device="true"] .app-shell .app-topbar-compact-title {
    font-size: var(--mf-type-heading);
    font-weight: var(--mf-type-heading-weight);
    line-height: var(--mf-leading-base);
  }

  html:root[data-mobile-device="true"] .mf-navigation-row .mf-navigation-copy strong {
    font-size: var(--mf-type-field);
    font-weight: var(--mf-type-regular-weight);
    line-height: var(--mf-leading-base);
  }

  html:root[data-mobile-device="true"] .app-shell .mobile-tabbar-item {
    font-size: var(--mf-type-secondary);
    font-weight: var(--mf-type-regular-weight);
    line-height: var(--mf-leading-xs);
  }

  html:root[data-mobile-device="true"] :is(input, select, textarea, .mf-desktop-select-trigger),
  html:root[data-mobile-device="true"] :is(
    .mf-field, .mf-search-field, .scratch-name-field,
    .app-shell, .auth-site, .marketing-site, .mf-dialog, .mf-popover, .mf-widget
  ) :is(input, select, textarea, .mf-desktop-select-trigger) {
    font-size: var(--mf-field-focus-layout-size);
    font-size-adjust: var(--mf-field-font-adjust);
  }

  /* Blockly's native overlay also follows the workspace zoom when painting. */
  /* stylelint-disable-next-line selector-class-pattern -- Blockly owns the editing overlay. */
  html:root[data-mobile-device="true"] .blocklyHtmlInput {
    font-size: var(--mf-field-focus-layout-size) !important;
    font-size-adjust: calc(var(--mf-field-font-adjust) * var(--mf-block-field-scale, 1)) !important;
  }
}

/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[3].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[15].oneOf[3].use[2]!./node_modules/next/font/local/target.css?{"path":"src/lib/fonts.ts","import":"","arguments":[{"src":[{"path":"../../node_modules/@marketforge/ui/src/fonts/InterVariable.woff2","weight":"100 900","style":"normal"},{"path":"../../node_modules/@marketforge/ui/src/fonts/InterVariable-Italic.woff2","weight":"100 900","style":"italic"}],"variable":"--mf-font-family","display":"swap","preload":true,"fallback":[],"adjustFontFallback":false}],"variableName":"inter"} ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@font-face {
font-family: 'inter';
src: url(/_next/static/media/0336a89fb4e7fc1d.p.woff2) format('woff2');
font-display: swap;
font-weight: 100 900;
font-style: normal;
}

@font-face {
font-family: 'inter';
src: url(/_next/static/media/c91adde9f78caceb.p.woff2) format('woff2');
font-display: swap;
font-weight: 100 900;
font-style: italic;
}.__className_553cd3 {font-family: 'inter'
}.__variable_553cd3 {--mf-font-family: 'inter'
}