.foxy-ui .fx-settings-surface:not([data-settings-group="integrations"]) .fx-traffix-host { display: none; }
.foxy-ui .fx-settings-surface [data-settings-section="integrations"].fx-traffix-native { display: none !important; }
.foxy-ui .fx-traffix-host { margin: 18px 0 24px; }
.foxy-ui .fx-traffix { position: relative; overflow: hidden; border: 1px solid var(--fx-line, #e4e8ee); border-radius: 22px; background: var(--fx-surface, #fff); color: var(--fx-text, #121a23); box-shadow: 0 18px 48px rgba(18, 26, 35, .07); }
.foxy-ui .fx-traffix::before { content: ""; position: absolute; width: 340px; height: 340px; right: -180px; top: -220px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--fx-accent, #f7770d) 20%, transparent), transparent 70%); pointer-events: none; }
.foxy-ui .fx-traffix-head { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 28px 26px 22px; }
.foxy-ui .fx-traffix-brand { display: flex; align-items: center; gap: 16px; min-width: 0; }
.foxy-ui .fx-traffix-mark { flex: none; width: 64px; height: 64px; display: grid; place-items: center; border-radius: 18px; background: #151c27; box-shadow: 0 10px 24px rgba(15, 23, 42, .2); }
.foxy-ui .fx-traffix-mark img { display: block; width: 58px; height: 58px; }
.foxy-ui .fx-traffix-kicker { display: block; color: var(--fx-accent, #f7770d); font-size: 10px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.foxy-ui .fx-traffix h3 { margin: 4px 0 5px; font-size: 28px; line-height: 1.1; letter-spacing: -.03em; }
.foxy-ui .fx-traffix-head p { max-width: 620px; margin: 0; color: var(--fx-muted, #647083); font-size: 13px; line-height: 1.5; }
.foxy-ui .fx-traffix-available { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border: 1px solid color-mix(in srgb, var(--fx-accent, #f7770d) 35%, var(--fx-line, #e4e8ee)); border-radius: 999px; background: color-mix(in srgb, var(--fx-accent, #f7770d) 9%, transparent); color: var(--fx-accent-ink, #b85000); font-size: 11px; font-weight: 700; white-space: nowrap; }
.foxy-ui .fx-traffix-available i, .foxy-ui .fx-traffix-verified i { width: 7px; height: 7px; border-radius: 50%; background: #1dbf73; box-shadow: 0 0 0 3px rgba(29,191,115,.14); }
.foxy-ui .fx-traffix-platforms { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; padding: 0 22px 22px; }
.foxy-ui .fx-traffix-platform { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 15px; border: 1px solid var(--fx-line, #e4e8ee); border-radius: 16px; background: var(--fx-subtle, #f7f9fb); }
.foxy-ui .fx-traffix-platform-icon { flex: none; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: var(--fx-surface, #fff); color: var(--fx-accent, #f7770d); border: 1px solid var(--fx-line, #e4e8ee); }
.foxy-ui .fx-traffix-platform-icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.foxy-ui .fx-traffix-platform-copy { flex: 1; min-width: 0; }
.foxy-ui .fx-traffix-platform-copy > span { display: block; color: var(--fx-muted, #647083); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.foxy-ui .fx-traffix-platform-copy h4 { margin: 2px 0; font-size: 16px; line-height: 1.2; }
.foxy-ui .fx-traffix-platform-copy p { margin: 0; color: var(--fx-muted, #647083); font-size: 11px; }
.foxy-ui .fx-traffix-download { flex: none; display: inline-flex; flex-direction: column; align-items: center; gap: 2px; min-height: 44px; padding: 8px 13px; border-radius: 12px; background: var(--fx-accent, #f7770d); color: #fff; font-size: 12px; font-weight: 800; line-height: 1.25; text-decoration: none; box-shadow: 0 8px 18px color-mix(in srgb, var(--fx-accent, #f7770d) 24%, transparent); transition: transform .16s ease, box-shadow .16s ease; }
.foxy-ui .fx-traffix-download span { font-size: 9px; font-weight: 700; letter-spacing: .12em; opacity: .8; }
.foxy-ui .fx-traffix-download:hover { transform: translateY(-1px); box-shadow: 0 12px 22px color-mix(in srgb, var(--fx-accent, #f7770d) 32%, transparent); }

.foxy-ui .fx-traffix-docs { margin: 0 22px; padding: 18px 0 12px; border-top: 1px solid var(--fx-line, #e4e8ee); }
.foxy-ui .fx-traffix-docs-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.foxy-ui .fx-traffix-docs-head h4 { margin: 0; font-size: 13px; }
.foxy-ui .fx-traffix-docs-head a { display: inline-flex; align-items: center; gap: 5px; color: var(--fx-muted, #647083); font-size: 11px; font-weight: 700; text-decoration: none; }
.foxy-ui .fx-traffix-docs-head a:hover { color: var(--fx-accent, #f7770d); }
.foxy-ui .fx-traffix-docs-head svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.foxy-ui .fx-traffix-docs-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.foxy-ui .fx-traffix-docs-grid > .fx-traffix-doc:last-child:nth-child(odd) { grid-column: 1 / -1; }
.foxy-ui .fx-traffix-doc { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 11px; border: 1px solid var(--fx-line, #e4e8ee); border-radius: 12px; background: var(--fx-surface, #fff); color: var(--fx-text, #121a23); text-decoration: none; transition: border-color .16s ease, background .16s ease; }
.foxy-ui .fx-traffix-doc:hover { border-color: color-mix(in srgb, var(--fx-accent, #f7770d) 40%, var(--fx-line, #e4e8ee)); background: var(--fx-subtle, #f7f9fb); }
.foxy-ui .fx-traffix-doc-icon { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: color-mix(in srgb, #ff5b2a 10%, var(--fx-surface, #fff)); color: #ff5b2a; }
.foxy-ui .fx-traffix-doc-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.foxy-ui .fx-traffix-doc-copy { flex: 1; min-width: 0; }
.foxy-ui .fx-traffix-doc-copy strong, .foxy-ui .fx-traffix-doc-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.foxy-ui .fx-traffix-doc-copy strong { font-size: 12px; }
.foxy-ui .fx-traffix-doc-copy small { margin-top: 2px; color: var(--fx-muted, #647083); font-size: 10px; }
.foxy-ui .fx-traffix-doc-badge { flex: none; padding: 3px 5px; border-radius: 5px; background: #ff5b2a; color: #fff; font-size: 8px; font-weight: 800; letter-spacing: .08em; }
.foxy-ui .fx-traffix-doc > svg { flex: none; width: 14px; height: 14px; fill: none; stroke: var(--fx-muted, #647083); stroke-width: 1.6; }
.foxy-ui .fx-traffix-foot { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 20px; padding: 14px 26px 20px; color: var(--fx-muted, #647083); font-size: 10px; }
.foxy-ui .fx-traffix-verified { display: inline-flex; align-items: center; gap: 6px; color: #16784b; font-weight: 700; }
.foxy-ui .fx-traffix-note { flex: 0 1 auto; margin-left: auto; max-width: min(100%, 520px); text-align: right; }
@media (max-width: 900px) { .foxy-ui .fx-traffix-platforms, .foxy-ui .fx-traffix-docs-grid { grid-template-columns: 1fr; } .foxy-ui .fx-traffix-docs-grid > .fx-traffix-doc:last-child:nth-child(odd) { grid-column: auto; } }
@media (max-width: 600px) { .foxy-ui .fx-traffix-head { flex-direction: column; padding: 18px; } .foxy-ui .fx-traffix h3 { font-size: 23px; } .foxy-ui .fx-traffix-platforms { padding: 0 12px 12px; } .foxy-ui .fx-traffix-docs { margin: 0 12px; } .foxy-ui .fx-traffix-platform { align-items: flex-start; flex-wrap: wrap; } .foxy-ui .fx-traffix-download { width: 100%; } .foxy-ui .fx-traffix-foot { padding: 12px 18px 15px; } .foxy-ui .fx-traffix-note { flex: 1 1 100%; margin-left: 0; text-align: left; } }
/* Branded PDF/SVG records in Pages. */
.foxy-ui #root .fx-file-card .redirect-info-title-label { gap: 12px; }
.foxy-ui #root .fx-file-brand { flex: none; width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; }
.foxy-ui #root .fx-file-brand img { display: block; width: 46px; height: 46px; }
.foxy-ui #root .fx-file-card { border-color: color-mix(in srgb, var(--fx-accent, #f7770d) 16%, var(--fx-line, #e4e8ee)); }
.foxy-ui #root .fx-file-card[data-fx-file-kind="svg"] { border-color: color-mix(in srgb, #12a9ca 22%, var(--fx-line, #e4e8ee)); }
.foxy-ui #root .fx-file-action { display: inline-flex !important; align-items: center; gap: 7px; }
.foxy-ui #root .fx-file-card[data-fx-file-kind="pdf"] .fx-file-action::before,
.foxy-ui #root .fx-file-card[data-fx-file-kind="svg"] .fx-file-action::before { content: ""; width: 18px; height: 18px; flex: none; background: center/contain no-repeat; }
.foxy-ui #root .fx-file-card[data-fx-file-kind="pdf"] .fx-file-action::before { background-image: url("/lab/foxy-file-pdf.svg"); }
.foxy-ui #root .fx-file-card[data-fx-file-kind="svg"] .fx-file-action::before { background-image: url("/lab/foxy-file-svg.svg"); }
.foxy-ui .fxo-overview .fxo-metric { min-height: 198px; }
.foxy-ui .fxo-overview .fxa-chart { min-height: 280px; }
.foxy-ui .fxo-overview .fxa-charts { min-height: 327px; }
@media (max-width: 700px) { .foxy-ui .fxo-overview .fxo-metric { min-height: 64px; } .foxy-ui .fxo-overview .fxa-chart { min-height: 220px; } .foxy-ui .fxo-overview .fxa-charts { min-height: 0; } }