:root {
  color-scheme: light;
  --fornax-purple: #6350ff;
  --fornax-text: #343947;
  --fornax-body: #545865;
  --fornax-muted: #9295a3;
  --fornax-border: #e7e8ef;
  --fornax-surface: #ffffff;
  --fornax-page: #fafafe;
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; color: var(--fornax-text); background: var(--fornax-page); }
button, input { font: inherit; }
button { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; gap: 5px; padding: 0; color: inherit; background: none; border: 0; cursor: default; white-space: nowrap; }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 2px solid var(--fornax-purple); outline-offset: 3px; }
a { color: inherit; text-decoration: none; }
.icon { display: block; flex: 0 0 auto; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.icon-definitions { position: absolute; width: 0; height: 0; overflow: hidden; }
.app-shell { display: grid; grid-template-columns: 240px minmax(0, 1fr); height: 100vh; height: 100dvh; min-height: 650px; border-top: 4px solid #eeefff; }

/* Application navigation. */
.sidebar { position: relative; min-height: 0; background: var(--fornax-surface); border-right: 1px solid #e9e9ef; }
.brand { display: flex; align-items: center; height: 49px; padding: 6px 15px 0; }
.brand img { width: 94px; height: 28px; object-fit: contain; }
.side-navigation { height: calc(100% - 49px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: #e6e6eb transparent; padding: 0 6px 8px; }
.side-navigation::-webkit-scrollbar { width: 6px; }
.side-navigation::-webkit-scrollbar-thumb { border-radius: 6px; background: #e6e6eb; }
.side-navigation::-webkit-scrollbar-track { background: transparent; }
.nav-section { margin: 0; }
.nav-group { display: flex; align-items: center; gap: 16px; height: 44px; padding: 0 12px; font-weight: 600; color: #474951; white-space: nowrap; }
.nav-group > .icon:first-child { width: 14px; height: 14px; color: #8b8b93; }
.nav-group .chevron { margin-left: auto; width: 14px; color: #92939c; stroke-width: 1.5; }
.nav-item { display: flex; align-items: center; height: 44px; padding: 0 12px 0 44px; color: #53535e; white-space: nowrap; }
.nav-item.is-current { height: 36px; margin: 4px 0; border-radius: 8px; background: #f0efff; }
.nav-item[href], .nav-group[href] { cursor: pointer; }
.nav-item[href]:hover, .nav-group[href]:hover { background: #f3f2fd; border-radius: 8px; }
.workflow-nav.is-current { height: 38px; margin: 3px 0; border-radius: 8px; background: #f0efff; }
.workflow-nav.is-current > .icon:first-child { color: #6750f6; }
.nav-badge { margin-left: -8px; padding: 1px 5px; border-radius: 3px; background: #e4f7ee; color: #159b6c; font-size: 11px; font-weight: 500; line-height: 15px; }
.nav-badge.beta { margin-left: 8px; }
.insight-nav { margin-top: 0; }
.sidebar-scroll-indicator { position: absolute; right: 0; top: 40px; width: 6px; height: 47%; border-radius: 5px; background: #e9e9ec; pointer-events: none; }
.collapse-navigation { position: absolute; right: 8px; bottom: 16px; width: 20px; height: 20px; border: 1px solid var(--fornax-border); border-radius: 4px; background: #fff; color: #a0a2ae; }
.collapse-navigation .icon { width: 13px; height: 13px; }

/* Global header and the CLI announcement. */
.workspace { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.topbar { display: flex; align-items: center; justify-content: space-between; flex: 0 0 56px; gap: 20px; min-width: 0; padding: 0 24px; background: var(--fornax-surface); border-bottom: 1px solid var(--fornax-border); }
.breadcrumbs { display: flex; align-items: center; flex-shrink: 0; gap: 10px; color: #9498a8; }
.breadcrumbs .icon { width: 14px; height: 14px; color: #8c91a3; }
.breadcrumb-slash { color: #bcc0cc; font-size: 20px; font-weight: 300; }
.breadcrumbs strong { color: #343947; font-weight: 600; }
.home-link { display: inline-flex; }
.topbar-actions { display: flex; align-items: center; justify-content: flex-end; gap: 18px; min-width: 0; }
.workspace-picker { height: 32px; width: 160px; padding: 0 12px; gap: 6px; border: 1px solid #d5d8e4; border-radius: 8px; font-size: 13px; }
.workspace-picker > .icon:first-child { width: 13px; height: 13px; color: var(--fornax-purple); }
.workspace-picker .picker-chevron { width: 14px; height: 14px; margin-left: auto; color: #8e909a; }
.top-link { color: var(--fornax-purple); font-weight: 600; letter-spacing: .2px; }
.cli-link { gap: 6px; }
.fire { font-size: 15px; line-height: 1; }
.wish-link { gap: 4px; }
.wish-link .icon { width: 15px; height: 15px; }
.top-icon { position: relative; width: 18px; height: 28px; }
.top-icon .icon { width: 17px; height: 17px; }
.region-button { font-weight: 600; width: 25px; }
.top-icon .small-document { width: 14px; height: 14px; stroke-width: 2.5; }
.notification-count { position: absolute; top: -10px; right: -14px; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; color: #fff; background: #ef4150; font-size: 11px; font-weight: 500; line-height: 1; }
.support-button { margin-left: 0; color: var(--fornax-purple); }
.support-button .icon { width: 20px; height: 20px; stroke-width: 2; }
.user-avatar { display: grid; place-items: center; flex-shrink: 0; width: 25px; height: 25px; margin-left: 8px; border-radius: 50%; background: linear-gradient(135deg, #bf51d1, #d369d8); color: #fff; font-size: 9px; }
.announcement { display: flex; align-items: center; flex: 0 0 50px; min-width: 0; gap: 6px; padding: 0 12px; background: #edeeff; color: #424655; }
.announcement-check { display: grid; place-items: center; flex-shrink: 0; width: 14px; height: 14px; border-radius: 3px; background: linear-gradient(#64d952, #29b247); color: #fff; font-weight: 700; font-size: 14px; line-height: 1; }
.announcement-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: .1px; }
.announcement-link { flex-shrink: 0; padding: 4px 8px; margin-left: 4px; border-radius: 5px; background: #e3e1fa; color: #7962ff; font-size: 12px; font-weight: 600; }
.close-announcement { flex-shrink: 0; margin-left: auto; padding-left: 18px; }
.close-announcement .icon { width: 13px; height: 13px; }

/* Trace query page. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.nav-item.is-hovered { height: 36px; margin: 4px 0; border-radius: 8px; background: #f7f7f8; }
.page-content { display: flex; flex: 1; flex-direction: column; min-height: 0; min-width: 0; }
.page-heading { display: flex; align-items: center; flex: 0 0 65px; gap: 18px; padding: 4px 24px 0; }
h1 { margin: 0; font-size: 22px; font-weight: 600; line-height: 30px; letter-spacing: .1px; }
.reporting-help { height: 26px; gap: 5px; color: #505562; font-size: 13px; font-weight: 600; }
.reporting-help .icon { width: 12px; height: 12px; }
.trace-toolbar { display: flex; align-items: center; justify-content: space-between; flex: 0 0 57px; gap: 20px; min-width: 0; padding: 3px 24px 12px; }
.trace-search { display: flex; align-items: center; flex: 0 1 564px; gap: 8px; height: 42px; min-width: 0; padding: 4px; border: 1px solid #e1e2f0; border-radius: 12px; background: #f7f7fd; box-shadow: 0 0 0 1px #edecf72e; }
.id-type-selector { display: flex; flex: 0 0 218px; gap: 2px; height: 32px; padding: 4px; border-radius: 7px; background: #ebebf6; }
.id-type-selector button { flex: 1; height: 24px; padding: 0 11px; border-radius: 6px; color: #7d8399; font-size: 12px; font-weight: 600; line-height: 24px; }
.id-type-selector button.is-selected { background: #fff; color: #7560ff; box-shadow: 0 1px 3px #86829908; }
.trace-id-input { flex: 1 1 160px; width: 160px; height: 32px; min-width: 100px; padding: 0 9px; border: 1px solid #ccd0e3; border-radius: 8px; color: #555b6b; background: #fbfbfe; }
.trace-id-input::placeholder { color: #b3b8cc; }
.date-range { gap: 7px; width: 120px; height: 32px; padding: 0 8px; border: 1px solid #ccd0e3; border-radius: 8px; background: #fbfbfe; color: #4b5060; }
.date-range .range-info { width: 13px; height: 13px; color: #8d93a8; }
.date-range .range-chevron { width: 13px; height: 13px; color: #9297a7; }
.search-button { width: 32px; height: 32px; border-radius: 9px; background: #6350ff; color: #fff; }
.search-button .icon { width: 18px; height: 18px; stroke-width: 2.5; }
.trace-actions { display: flex; align-items: center; flex-shrink: 0; gap: 8px; }
.automation-entry, .batch-add-entry { position: relative; }
.automation-toggle, .batch-button { cursor: pointer; }
.automation-menu, .batch-add-menu { position: absolute; top: calc(100% + 7px); right: 0; z-index: 20; min-width: 185px; padding: 5px; border: 1px solid #e8e7f0; border-radius: 8px; background: #fff; box-shadow: 0 6px 22px #39334c20; }
.batch-add-option { display: flex; justify-content: flex-start; width: 100%; min-height: 36px; padding: 0 12px; border-radius: 5px; color: #55596a; font-size: 14px; font-weight: 400; text-align: left; cursor: pointer; }
.batch-add-option:hover, .batch-add-option:focus-visible { background: #f1efff; color: #6750f6; }
.automation-menu a { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 9px; border-radius: 5px; color: #55596a; font-size: 13px; white-space: nowrap; }
.automation-menu a:hover { background: #f1efff; color: #6750f6; }
.automation-menu .icon { width: 14px; height: 14px; color: #7665eb; }
.soft-button, .primary-button { height: 32px; border-radius: 8px; font-weight: 600; }
.soft-button { background: #efeff7; color: #363b48; }
.icon-button { width: 32px; }
.icon-button .icon { width: 17px; height: 17px; }
.action-divider { flex-shrink: 0; width: 1px; height: 18px; margin: 0 3px; background: #eeeef5; }
.batch-button { gap: 10px; padding: 0 12px; }
.batch-button .icon { width: 14px; height: 14px; }
.primary-button { gap: 6px; padding: 0 12px; background: #6347ff; color: #fff; }
.primary-button .icon { width: 13px; height: 13px; }
.primary-button .plus-icon { width: 14px; height: 14px; }
.trace-selection-summary { display: flex; align-items: center; flex-shrink: 0; gap: 6px; height: 32px; padding: 0 10px; border-radius: 8px; background: #efeff7; color: #737a8b; font-size: 13px; white-space: nowrap; }
.trace-selection-summary.has-selection { background: #e8e5ff; }
.selection-divider { width: 1px; height: 12px; background: #c7c8d8; }
.cancel-trace-selection { color: #7262eb; font-size: 13px; cursor: pointer; }
.single-step-add-button { cursor: pointer; }
.single-step-add-button:disabled { color: #fff; background: #d1cdff; cursor: not-allowed; }
.trace-table-region { position: relative; display: flex; flex: 1; min-height: 0; margin: 0 24px 28px; border: 1px solid #e7e8ef; border-radius: 7px; background: #fff; }
.trace-table-scroll { flex: 1; min-width: 0; overflow: auto; border-radius: inherit; scrollbar-width: none; }
.trace-table-scroll::-webkit-scrollbar { display: none; }
.trace-table { width: 100%; min-width: 1216px; border-collapse: separate; border-spacing: 0; table-layout: fixed; text-align: left; color: #515665; font-size: 14px; }
.trace-table.is-selecting { min-width: 1264px; }
.col-selection { width: 48px; }
.col-status { width: 64px; }.col-trace-id { width: 160px; }.col-input { width: 320px; }.col-output { width: 320px; }.col-agent { width: 120px; }.col-tokens { width: 108px; }.col-input-tokens { width: 124px; }
.trace-table th, .trace-table td { height: 42px; padding: 0 16px; white-space: nowrap; vertical-align: middle; border-bottom: 1px solid #e7e8f0; background: #fff; }
.trace-table th { position: sticky; top: 0; z-index: 2; height: 42px; color: #383d4a; background: #f6f6fb; font-weight: 500; }
.column-heading { display: flex; align-items: center; gap: 6px; }
.column-setting { color: #676e7f; }
.column-setting .icon { width: 12px; height: 12px; stroke-width: 1.5; }
.trace-table .status-cell { text-align: center; padding: 0; }
.trace-table .trace-select-cell { position: sticky; left: 0; z-index: 3; width: 48px; padding: 0; text-align: center; border-right: 1px solid #f0f0f6; }
.trace-table th.trace-select-cell { z-index: 4; }
.trace-checkbox { position: relative; display: inline-block; width: 16px; height: 16px; margin: 0; padding: 0; appearance: none; -webkit-appearance: none; border: 1px solid #c6c9d3; border-radius: 4px; background: #fff; vertical-align: middle; cursor: pointer; }
.trace-checkbox:checked, .trace-checkbox:indeterminate { border-color: #6a50f7; background: #6a50f7; }
.trace-checkbox:checked::after { position: absolute; top: 2px; left: 4px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(42deg); content: ''; }
.trace-checkbox:indeterminate::after { position: absolute; top: 6px; left: 3px; width: 8px; height: 2px; border: 0; background: #fff; transform: none; content: ''; }
.trace-table.is-selecting tbody tr:hover td { background: #fbfaff; }
.trace-status { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; vertical-align: middle; border-radius: 5px; background: #e4f6ed; color: #108967; }
.trace-status .icon { width: 13px; height: 13px; }
.trace-identifier { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.trace-identifier > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.copy-button { color: #969bad; }
.copy-button .icon { width: 14px; height: 14px; stroke-width: 1.6; }
.trace-table .numeric-cell { text-align: right; padding-right: 26px; font-variant-numeric: tabular-nums; }
.horizontal-scroll-indicator { position: absolute; right: 1px; bottom: 0; left: 1px; z-index: 4; height: 6px; border-radius: 0 0 6px 6px; background: #fafafe; pointer-events: none; }
.horizontal-scroll-indicator span { display: block; width: 36%; height: 6px; border-radius: 6px; background: #e1e2e8; }
.vertical-scroll-indicator { position: absolute; top: 42px; right: 0; bottom: 6px; z-index: 4; width: 6px; pointer-events: none; }
.vertical-scroll-indicator span { display: block; width: 6px; height: 88px; border-radius: 6px; background: #e1e2e8; }
.floating-assistant { position: absolute; top: 18px; right: -20px; z-index: 5; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; filter: drop-shadow(0 3px 4px #5a38831a); pointer-events: none; }

@media (max-width: 1400px) {
  .app-shell { grid-template-columns: 220px minmax(0, 1fr); }
  .topbar-actions { gap: 15px; }
  .trace-search { flex-basis: 540px; gap: 6px; }
  .trace-toolbar { gap: 14px; }
  .trace-actions { gap: 6px; }
  .action-divider { margin: 0 1px; }
  .batch-button, .primary-button { padding: 0 10px; font-size: 13px; }
}
@media (max-width: 1200px) {
  .app-shell { grid-template-columns: 196px minmax(0, 1fr); }
  .nav-group { gap: 11px; }
  .nav-item { padding-left: 39px; }
  .topbar { padding: 0 20px; }
  .topbar-actions { gap: 12px; }
  .utility-icon, .wish-link { display: none; }
  .page-heading { padding-right: 20px; padding-left: 20px; }
  .trace-toolbar { flex: 0 0 auto; flex-wrap: wrap; padding: 3px 20px 12px; row-gap: 12px; }
  .trace-search { flex-basis: 564px; max-width: 100%; }
  .trace-actions { margin-left: auto; }
  .trace-table-region { margin-right: 20px; margin-left: 20px; }
  .floating-assistant { right: -16px; }
  .announcement-text { font-size: 13px; }
}
@media (max-width: 800px) {
  .app-shell { grid-template-columns: 164px minmax(0, 1fr); }
  .nav-group { padding-left: 9px; gap: 8px; font-size: 12px; }
  .nav-group .chevron { width: 11px; }
  .nav-item { padding-left: 30px; font-size: 12px; }
  .nav-badge { margin-left: -4px; font-size: 9px; }
  .nav-badge.beta { margin-left: 5px; }
  .topbar { padding: 0 16px; gap: 12px; }
  .topbar-actions { gap: 10px; }
  .cli-link, .region-button, .support-button { display: none; }
  .workspace-picker { width: 147px; font-size: 12px; }
  .announcement-link { display: none; }
  .page-heading { padding: 4px 16px 0; }
  .trace-toolbar { padding-right: 16px; padding-left: 16px; }
  .trace-search { gap: 6px; }
  .id-type-selector { flex-basis: 178px; }
  .id-type-selector button { padding: 0 7px; font-size: 11px; }
  .trace-id-input { width: 135px; min-width: 90px; font-size: 12px; }
  .date-range { width: 82px; padding: 0 6px; gap: 4px; font-size: 12px; }
  .date-range .range-info { display: none; }
  .trace-table-region { margin-right: 16px; margin-left: 16px; margin-bottom: 24px; }
}
@media (max-width: 600px) {
  .app-shell { grid-template-columns: minmax(0, 1fr); min-height: 650px; }
  .sidebar { display: none; }
  .workspace-picker { width: 130px; }
  .workspace-picker .icon:first-child { display: none; }
  .notification-button { display: none; }
  .user-avatar { margin-left: 0; }
  .breadcrumbs { gap: 6px; font-size: 12px; }
  .topbar-actions { gap: 10px; }
  .trace-search { flex-wrap: wrap; height: auto; padding: 5px; }
  .id-type-selector { flex-basis: 100%; }
  .id-type-selector button { flex: 1; }
  .trace-id-input { flex: 1; }
  .trace-actions { flex-wrap: wrap; justify-content: flex-end; }
  .action-divider { margin: 0; }
  .trace-actions .soft-button, .trace-actions .primary-button { height: 30px; }
  .trace-actions .icon-button { width: 28px; }
  .batch-button, .primary-button { padding: 0 7px; font-size: 12px; gap: 4px; }
  .trace-table-region { min-height: 200px; }
}
@media (max-width: 390px) {
  .workspace-picker { width: 110px; padding: 0 6px; font-size: 11px; }
  .topbar-actions { gap: 7px; }
  .breadcrumbs { gap: 4px; }
  .breadcrumbs .icon { width: 12px; }
  .user-avatar { width: 23px; height: 23px; }
  .trace-actions { gap: 5px; }
  .action-divider { display: none; }
}