:root {
      --bc-font-ui: var(--bc-host-light-font-ui, var(--font-sans, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif));
      --bc-text-base: var(--font-size-base, var(--font-text-md-size, var(--codex-chat-font-size, 14px)));
      --bc-text-md: var(--font-size-normal, var(--bc-text-base));
      --bc-text-sm: var(--font-size-small, max(11px, calc(var(--bc-text-base) - 2px)));
      --bc-text-body: var(--font-size-tooltip, max(11px, calc(var(--bc-text-base) - 1px)));
      --bc-text-caption: max(11px, calc(var(--bc-text-base) - 3px));
      --bc-text-xs: max(10px, calc(var(--bc-text-base) - 4px));
      --bc-text-2xs: max(9px, calc(var(--bc-text-base) - 5px));
      --bc-text-lg: calc(var(--bc-text-base) + 1px);
      --bc-text-xl: calc(var(--bc-text-base) + 5px);
      --bc-text-avatar: max(8px, calc(var(--bc-text-base) - 6px));
      --bc-text-icon: calc(var(--bc-text-base) + 2px);
      --bc-text-icon-lg: calc(var(--bc-text-base) + 3px);
      --bc-font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
      --bc-control-height: calc(var(--bc-text-base) * 2.285714);
      --bc-control-padding: calc(var(--bc-text-base) * 0.785714);
      --bc-row-height: calc(var(--bc-text-base) * 2.428571);
      --bc-toolbar-height: calc(var(--bc-text-base) * 4);
      --bc-page-toolbar-height: max(50px, calc(var(--bc-control-height) + var(--bc-space-2)));
      --bc-completion-notice-bottom: var(--bc-space-4);
      --bc-agent-inspector-width: min(32vw, 516px);
      --bc-dialog-fullscreen-top: 0;
      --bc-dialog-fullscreen-left: 0;
      --bc-dialog-fullscreen-width: 100vw;
      --bc-dialog-fullscreen-height: 100dvh;
      --bc-mobile-viewport-top: 0;
      --bc-mobile-viewport-bottom: 0px;
      --bc-mobile-viewport-height: 100dvh;
      --bc-icon-sm: var(--bc-text-base);
      --bc-icon-md: calc(var(--bc-text-base) + 2px);
      --bc-color-canvas: var(--bc-host-light-canvas, #ffffff);
      --bc-color-navigation: #f8f8f8;
      --bc-color-surface: var(--bc-host-light-surface, #f8f8f8);
      --bc-color-surface-raised: var(--bc-host-light-raised, #ededee);
      --bc-color-control: var(--bc-host-light-control, #f3f3f4);
      --bc-color-input: var(--bc-color-canvas);
      --bc-color-hover: var(--bc-host-light-hover, #eaeaeb);
      --bc-color-pressed: var(--bc-host-light-pressed, #e3e3e4);
      --bc-color-hairline: var(--bc-host-light-hairline, #e5e5e6);
      --bc-color-text: var(--bc-host-light-ink, #1a1c1f);
      --bc-color-text-muted: color-mix(in srgb, var(--bc-color-text) 62%, var(--bc-color-canvas));
      --bc-color-text-faint: color-mix(in srgb, var(--bc-color-text) 44%, var(--bc-color-canvas));
      --bc-color-focus: var(--bc-host-light-accent, #339cff);
      --bc-color-info: var(--bc-color-focus);
      --bc-color-primary: var(--bc-color-text);
      --bc-color-on-primary: var(--bc-color-canvas);
      --bc-color-on-avatar: #ffffff;
      --bc-color-danger: oklch(.59 .2 27);
      --bc-color-danger-soft: color-mix(in oklch, var(--bc-color-danger) 12%, var(--bc-color-surface));
      --bc-color-success: oklch(.55 .16 145);
      --bc-color-warning: oklch(.75 .16 85);
      --bc-color-online: var(--bc-color-success);
      --bc-color-star: var(--bc-color-warning);
      --bc-logo-gradient-start: #b1a7ff;
      --bc-logo-gradient-middle: #7a9dff;
      --bc-logo-gradient-end: #3941ff;
      --bc-color-scrim: rgb(18 18 20 / .28);
      --bc-priority-none: oklch(.62 .01 286);
      --bc-priority-low: oklch(.55 .1 250);
      --bc-priority-medium: oklch(.76 .15 95);
      --bc-priority-high: oklch(.68 .18 52);
      --bc-priority-urgent: var(--bc-color-danger);
      --bc-radius-xs: 7px;
      --bc-radius-sm: 10px;
      --bc-radius-md: 13px;
      --bc-radius-lg: 16px;
      --bc-radius-xl: 20px;
      --bc-radius-pill: 999px;
      --bc-dialog-agent-height: 400px;
      --bc-space-1: 4px;
      --bc-space-2: 8px;
      --bc-space-3: 12px;
      --bc-space-4: 16px;
      --bc-space-5: 20px;
      --bc-space-6: 24px;
      --bc-space-7: 28px;
      --bc-motion-fast: 120ms;
      --bc-motion-normal: 180ms;
      --bc-ease-out: cubic-bezier(.16, 1, .3, 1);
      --bc-focus-ring: 0 0 0 2px color-mix(in oklch, var(--bc-color-focus) 42%, transparent);
      --bc-inset-hairline: inset 0 0 0 1px var(--bc-color-hairline);
      --bc-elevation-float: 0 18px 52px rgb(15 15 18 / .16), 0 3px 12px rgb(15 15 18 / .08);
      --bc-elevation-menu: 0 12px 32px rgb(15 15 18 / .13), 0 2px 8px rgb(15 15 18 / .06);
      --bc-elevation-card: 0 1px 2px rgb(15 15 18 / .04), 0 2px 6px rgb(15 15 18 / .05);
      --bc-elevation-control: 0 1px 3px rgb(15 15 18 / .12);
      --bc-elevation-thumb: 0 1px 3px rgb(15 15 18 / .16);
      --bc-leading-tight: 1;
      --bc-leading-body: 1.5;
      --bc-leading-relaxed: 1.7;
      --bc-z-menu: 120;
      --bc-board-scroll-control-size: 32px;
      --bc-board-scroll-input-size: 22px;
      --bc-board-scroll-track-size: 5px;
      --bc-board-scroll-thumb-size: 13px;
      --bc-board-scroll-thumb-shadow: var(--bc-elevation-thumb);
      --bc-switch-outline: inset 0 0 0 1px var(--bc-color-text-muted);
      --bc-usage-value-size: 28px;
      --bc-usage-panel-width: 280px;
      -webkit-tap-highlight-color: transparent;
    }

    html.electron-dark, html.dark, html[data-theme="dark"] {
      --bc-font-ui: var(--bc-host-dark-font-ui, var(--font-sans, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif));
      --bc-color-canvas: var(--bc-host-dark-canvas, #1e1e1e);
      --bc-color-navigation: #181818;
      --bc-color-surface: var(--bc-host-dark-surface, #232323);
      --bc-color-surface-raised: var(--bc-host-dark-raised, #2c2c2c);
      --bc-color-control: var(--bc-host-dark-control, #272727);
      --bc-color-input: var(--bc-color-control);
      --bc-color-hover: var(--bc-host-dark-hover, #2f2f2f);
      --bc-color-pressed: var(--bc-host-dark-pressed, #343434);
      --bc-color-hairline: var(--bc-host-dark-hairline, #323232);
      --bc-color-text: var(--bc-host-dark-ink, #d4d4d4);
      --bc-color-focus: var(--bc-host-dark-accent, #007acc);
      --bc-color-primary: var(--bc-color-text);
      --bc-color-on-primary: var(--bc-color-canvas);
      --bc-color-danger: oklch(.68 .18 24);
      --bc-color-success: oklch(.65 .15 145);
      --bc-color-warning: oklch(.70 .16 85);
      --bc-color-scrim: rgb(0 0 0 / .56);
      --bc-priority-none: oklch(.68 .01 286);
      --bc-priority-low: oklch(.68 .1 250);
      --bc-priority-medium: oklch(.78 .14 95);
      --bc-priority-high: oklch(.74 .16 52);
      --bc-priority-urgent: var(--bc-color-danger);
      --bc-elevation-float: 0 22px 58px rgb(0 0 0 / .5), 0 4px 14px rgb(0 0 0 / .3);
      --bc-elevation-menu: 0 14px 34px rgb(0 0 0 / .38), 0 3px 10px rgb(0 0 0 / .22);
      --bc-elevation-card: 0 1px 2px rgb(0 0 0 / .2), 0 2px 8px rgb(0 0 0 / .22);
      --bc-elevation-control: 0 1px 3px rgb(0 0 0 / .22);
      --bc-elevation-thumb: 0 1px 3px rgb(0 0 0 / .3);
    }
  
:root {
  --color-background-surface: var(--bc-color-canvas);
  --color-text-foreground: var(--bc-color-text);
  --color-token-foreground: var(--bc-color-text);
  --color-token-bg-primary: var(--bc-color-canvas);
  --color-token-list-hover-background: var(--bc-color-hover);
  font-family: var(--bc-font-ui);
}
html, body { width: 100%; min-width: 320px; height: 100%; margin: 0; overflow: hidden; color: var(--bc-color-text); background: var(--bc-color-canvas); }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.web-skip-link, .web-sidebar, .web-sidebar *, .web-board-loading, .web-board-loading *, .web-connect, .web-connect *, .web-error-report, .web-error-report * { box-sizing: border-box; }
.web-sidebar button, .web-connect button, .web-connect input, .web-error-report button { font: inherit; }
.web-sidebar button, .web-connect button, .web-error-report button { color: inherit; touch-action: manipulation; }
.web-sidebar button:active, .web-connect button:active, .web-error-report button:active:not(:disabled) { transform: scale(.96); }
.web-sidebar button:focus-visible, .web-connect button:focus-visible, .web-connect input:focus-visible, .web-error-report button:focus-visible, .web-error-report pre:focus-visible { outline: 2px solid var(--bc-color-focus); outline-offset: 2px; }
.web-skip-link { position: fixed; z-index: 100; top: 8px; left: 8px; transform: translateY(-150%); border-radius: var(--bc-radius-xs); padding: 8px 12px; color: var(--bc-color-canvas); background: var(--bc-color-text); }
.web-skip-link:focus { transform: translateY(0); }
.web-shell { display: grid; grid-template-columns: 244px minmax(0, 1fr); width: 100%; height: 100%; }
.web-sidebar { display: flex; min-width: 0; flex-direction: column; padding: 10px; background: var(--bc-color-navigation); box-shadow: inset -1px 0 var(--bc-color-hairline); }
.web-brand { display: flex; min-height: 48px; align-items: center; gap: 10px; padding: 4px 6px 8px; }
.web-brand strong { margin-right: auto; font-size: 15px; font-weight: 650; }
.web-brand-logo { display: block; width: 30px; height: 30px; flex: 0 0 auto; border-radius: var(--bc-radius-sm); object-fit: contain; }
.web-brand-logo.is-large { width: 46px; height: 46px; margin-bottom: 24px; border-radius: var(--bc-radius-md); }
.web-icon-button { display: grid; width: 34px; height: 34px; border: 0; border-radius: var(--bc-radius-sm); padding: 8px; place-items: center; background: transparent; cursor: pointer; }
.web-icon-button[hidden] { display: none; }
.web-icon-button svg { width: 17px; height: 17px; }
.web-sidebar-expand { position: absolute; z-index: 40; top: 11px; left: 14px; display: none; box-sizing: border-box; width: 30px; height: 30px; border-radius: var(--bc-radius-xs); padding: 6px; background: var(--bc-color-navigation); box-shadow: var(--bc-elevation-control); }
.web-sidebar nav { min-height: 0; flex: 1; }
.web-sidebar-scroll { height: 100%; overflow: auto; }
.web-sidebar-section { display: grid; gap: 3px; margin-top: 10px; }
.web-nav-button { display: grid; grid-template-columns: 20px minmax(0, 1fr); width: 100%; min-height: 38px; align-items: center; gap: 8px; border: 0; border-radius: var(--bc-radius-sm); padding: 0 10px; background: transparent; text-align: left; cursor: pointer; transition: background-color var(--bc-motion-fast) var(--bc-ease-out), transform var(--bc-motion-fast) var(--bc-ease-out); }
.web-nav-button svg { width: 16px; height: 16px; }
.web-nav-auxiliary, .web-nav-more-menu { display: contents; }
.web-nav-more-entry { display: none; }
.web-nav-mobile-action { display: none; }
.text-fade-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.web-account { position: relative; border-radius: var(--bc-radius-md); background: transparent; }
.web-account:has(.web-account-usage[aria-expanded="true"]) { background: var(--bc-color-surface-raised); box-shadow: var(--bc-elevation-menu); width: var(--bc-usage-panel-width); max-width: calc(100vw - var(--bc-space-5)); z-index: var(--bc-z-menu); }
.web-profile { position: relative; z-index: 1; display: grid; grid-template-columns: 30px minmax(0, 1fr); width: 100%; min-height: 48px; align-items: center; gap: 9px; border: 0; border-radius: var(--bc-radius-sm); padding: 6px 70px 6px 6px; background: transparent; text-align: left; cursor: pointer; }
.web-account-theme { position: absolute; z-index: 2; top: 7px; right: 27px; }
.web-account-usage { position: absolute; z-index: 2; top: 7px; right: 0; color: var(--bc-color-text-muted); }
.web-avatar { position: relative; display: grid; width: 28px; height: 28px; place-items: center; border-radius: var(--bc-radius-pill); color: var(--bc-color-on-avatar); background: var(--bc-color-success) center / cover no-repeat; font-size: 9px; font-weight: 700; }
.web-profile > span:nth-child(2) { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.web-profile strong, .web-profile small { overflow: hidden; white-space: nowrap; }
.web-profile strong { font-size: 11px; font-weight: 620; }
.web-profile small { color: var(--bc-color-text-muted); font-size: 9px; }
.web-online { position: absolute; right: -1px; bottom: -1px; width: 7px; height: 7px; border: 2px solid var(--bc-color-navigation); border-radius: var(--bc-radius-pill); background: var(--bc-color-success); }
.web-account-usage svg { width: 14px; height: 14px; transition: transform var(--bc-motion-fast) var(--bc-ease-out); }
.web-account-usage[aria-expanded="true"] svg { transform: rotate(90deg); }
.web-usage { margin: 0; border-top: 1px solid var(--bc-color-hairline); padding: var(--bc-space-4); max-height: calc(100dvh - var(--bc-toolbar-height) * 2); overflow-y: auto; }
.web-usage[hidden] { display: none; }
.web-usage-heading { display: grid; grid-template-columns: minmax(0, 1fr) var(--bc-control-height) var(--bc-control-height); align-items: center; gap: var(--bc-space-1); color: var(--bc-color-text-muted); font-size: var(--bc-text-caption); }
.web-usage-refresh, .web-usage-pin { display: grid; width: var(--bc-control-height); height: var(--bc-control-height); border: 0; border-radius: var(--bc-radius-xs); padding: 0; place-items: center; color: inherit; background: transparent; cursor: pointer; }
.web-usage-refresh:hover, .web-usage-pin:hover { color: var(--bc-color-text); background: var(--bc-color-hover); }
.web-usage-refresh:disabled { cursor: wait; }
.web-usage-refresh svg, .web-usage-pin svg { width: 13px; height: 13px; }
.web-usage-pin[aria-pressed="true"] { color: var(--bc-color-text); background: var(--bc-color-pressed); }
.web-usage-refresh[aria-busy="true"] svg { animation: web-usage-refresh-spin calc(var(--bc-motion-normal) + var(--bc-motion-normal) + var(--bc-motion-normal) + var(--bc-motion-normal)) linear infinite; }
@keyframes web-usage-refresh-spin { to { transform: rotate(360deg); } }
.web-usage-heading strong { font-weight: 590; }
.web-usage-close { display: none; }
.web-usage-disclosure { margin-top: var(--bc-space-4); border-top: 1px solid var(--bc-color-hairline); padding-top: var(--bc-space-2); }
.web-usage .web-usage-activity-toggle { display: flex; align-items: center; gap: var(--bc-space-2); width: 100%; min-height: var(--bc-control-height); padding: 0; border: 0; border-radius: var(--bc-radius-xs); background: transparent; color: var(--bc-color-text-muted); font-size: var(--bc-text-caption); cursor: pointer; text-align: left; }
.web-usage-activity-toggle:hover { color: var(--bc-color-text); background: var(--bc-color-hover); }
.web-usage-activity-toggle svg { margin-left: auto; flex-shrink: 0; width: var(--bc-icon-sm); height: var(--bc-icon-sm); transition: transform var(--bc-motion-fast) var(--bc-ease-out); }
.web-usage-activity-toggle[aria-expanded="true"] svg { transform: rotate(90deg); }
.web-usage-activity-warning { color: var(--bc-color-danger); font-size: var(--bc-text-xs); }
.web-usage-activity { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bc-space-3) var(--bc-space-2); padding-top: var(--bc-space-2); }
.web-usage-activity[hidden], .web-usage-activity-warning[hidden], .web-usage-activity-retry[hidden] { display: none; }
.web-usage-activity > div { display: grid; min-width: 0; gap: var(--bc-space-1); }
.web-usage-activity span { color: var(--bc-color-text-muted); font-size: var(--bc-text-caption); }
.web-usage-activity strong { color: var(--bc-color-text); font-size: var(--bc-text-base); font-weight: 670; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.web-usage-activity small { grid-column: 1 / -1; color: var(--bc-color-text-muted); font-size: var(--bc-text-caption); line-height: var(--bc-leading-body); }
.web-usage .web-usage-activity-retry { grid-column: 1 / -1; justify-self: start; min-height: var(--bc-control-height); border: 0; border-radius: var(--bc-radius-xs); padding: 0 var(--bc-space-2); background: var(--bc-color-hover); color: var(--bc-color-text); font-size: var(--bc-text-caption); cursor: pointer; }
.web-usage button:focus-visible { box-shadow: var(--bc-focus-ring); }
.web-usage-body { display: grid; gap: var(--bc-space-4); margin-top: var(--bc-space-3); }
.web-usage-status { color: var(--bc-color-text-muted); font-size: var(--bc-text-caption); line-height: var(--bc-leading-body); }
.web-usage-window { display: grid; gap: var(--bc-space-2); }
.web-usage-row { display: flex; min-width: 0; align-items: baseline; justify-content: space-between; gap: var(--bc-space-2); font-size: var(--bc-text-caption); }
.web-usage-row > span:first-child { color: var(--bc-color-text-muted); }
.web-usage-value { color: var(--bc-color-text); font-size: var(--bc-usage-value-size); font-weight: 650; font-variant-numeric: tabular-nums; line-height: var(--bc-leading-tight); }
.web-usage-reset { color: var(--bc-color-text-muted); font-size: var(--bc-text-caption); line-height: var(--bc-leading-body); }
.web-usage-progress { width: 100%; height: var(--bc-space-1); border: 0; border-radius: var(--bc-radius-pill); overflow: hidden; background: var(--bc-color-hairline); appearance: none; }
.web-usage-progress::-webkit-progress-bar { border-radius: var(--bc-radius-pill); background: var(--bc-color-hairline); }
.web-usage-progress::-webkit-progress-value { border-radius: var(--bc-radius-pill); background: var(--bc-color-success); }
.web-usage-progress::-moz-progress-bar { border-radius: var(--bc-radius-pill); background: var(--bc-color-success); }
.web-main, .web-surface { min-width: 0; min-height: 0; height: 100%; }
.web-main { position: relative; }
.web-surface { position: relative; }
.web-native-layout, .app-shell-main-content-frame { width: 100%; height: 100%; }
.web-board-loading { display: flex; height: 100%; align-items: center; justify-content: center; flex-direction: column; gap: 12px; color: var(--bc-color-text-muted); font-size: 12px; }
.web-board-loading > span { width: 24px; height: 24px; border: 2px solid var(--bc-color-hairline); border-top-color: var(--bc-color-text); border-radius: var(--bc-radius-pill); animation: web-board-loading-spin .8s linear infinite; }
.web-board-loading strong { font-weight: 560; }
@keyframes web-board-loading-spin { to { transform: rotate(360deg); } }
.web-connect { width: min(410px, calc(100vw - 24px)); border: 0; border-radius: var(--bc-radius-xl); padding: 0; color: var(--bc-color-text); background: var(--bc-color-surface-raised); box-shadow: var(--bc-elevation-float); }
.web-connect::backdrop { background: var(--bc-color-scrim); }
.web-connect form { padding: 30px; }
.web-eyebrow { color: var(--bc-color-text-muted); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.web-connect h1 { margin: 7px 0 8px; font-size: 24px; font-weight: 620; letter-spacing: -.018em; }
.web-connect p { margin: 0 0 20px; color: var(--bc-color-text-muted); font-size: 12px; line-height: 1.7; }
.web-connect code { border-radius: var(--bc-radius-xs); padding: 2px 5px; color: var(--bc-color-text); background: var(--bc-color-hover); }
.web-connect label { display: grid; gap: 7px; color: var(--bc-color-text-muted); font-size: 10px; font-weight: 600; }
.web-connect label + label:not(.web-remember) { margin-top: 12px; }
.web-connect input { width: 100%; height: 39px; border: 0; border-radius: var(--bc-radius-sm); padding: 0 11px; color: var(--bc-color-text); background: var(--bc-color-hover); }
.web-connect label.web-remember { display: flex; min-height: 40px; align-items: center; gap: 9px; margin-top: 4px; color: var(--bc-color-text); font-size: 12px; font-weight: 560; cursor: pointer; }
.web-connect label.web-remember input { width: 16px; height: 16px; flex: 0 0 16px; margin: 0; padding: 0; accent-color: var(--bc-color-text); }
.web-connect output { display: block; margin-top: 9px; color: var(--bc-color-danger); font-size: 11px; }
.web-connect button { width: 100%; min-height: 38px; margin-top: 16px; border: 0; border-radius: var(--bc-radius-sm); color: var(--bc-color-canvas); background: var(--bc-color-text); cursor: pointer; }
.web-error-report { width: min(820px, calc(100vw - 48px)); height: min(82dvh, 760px); max-height: calc(100dvh - 48px); overflow: hidden; border: 0; border-radius: var(--bc-radius-xl); padding: 0; color: var(--bc-color-text); background: var(--bc-color-surface-raised); box-shadow: var(--bc-elevation-float); overscroll-behavior: contain; }
.web-error-report::backdrop { background: var(--bc-color-scrim); }
.web-error-report-shell { display: flex; height: 100%; min-height: 0; flex-direction: column; }
.web-error-report header { display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; gap: 12px; align-items: start; padding: 20px 20px 16px; }
.web-error-report-icon, .web-error-report header > button { display: grid; width: 40px; height: 40px; border: 0; border-radius: var(--bc-radius-md); padding: 0; place-items: center; }
.web-error-report-icon { color: var(--bc-color-danger); background: var(--bc-color-danger-soft); }
.web-error-report header > button { color: var(--bc-color-text-muted); background: transparent; cursor: pointer; }
.web-error-report svg { width: 18px; height: 18px; }
.web-error-report h2 { margin: 1px 0 0; font-size: 18px; font-weight: 650; line-height: 1.35; }
.web-error-report header p { max-width: 62ch; margin: 4px 0 0; color: var(--bc-color-text-muted); font-size: 11px; line-height: 1.65; }
.web-error-report-summary { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 0 20px 12px; }
.web-error-report-summary strong { min-width: 0; overflow-wrap: anywhere; color: var(--bc-color-danger); font-size: 12px; font-weight: 600; }
.web-error-report-summary span { flex: 0 0 auto; color: var(--bc-color-text-muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.web-error-report pre { min-height: 0; flex: 1; margin: 0 20px; overflow: auto; border: 0; border-radius: var(--bc-radius-md); padding: 14px; color: var(--bc-color-text); background: var(--bc-color-hover); box-shadow: inset 0 0 0 1px var(--bc-color-hairline); font: 12px/1.6 var(--bc-font-mono); overflow-wrap: anywhere; tab-size: 2; white-space: pre-wrap; }
.web-error-report footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px 20px; }
.web-error-report-navigation, .web-error-report-actions { display: flex; align-items: center; gap: 8px; }
.web-error-report-navigation output { min-width: 52px; color: var(--bc-color-text-muted); font-size: 11px; font-variant-numeric: tabular-nums; text-align: center; }
.web-error-report footer button { min-height: 40px; border: 0; border-radius: var(--bc-radius-sm); padding: 0 12px; background: var(--bc-color-hover); font-size: 11px; font-weight: 550; cursor: pointer; transition: transform var(--bc-motion-fast) var(--bc-ease-out), background-color var(--bc-motion-fast) var(--bc-ease-out); }
.web-error-report footer button.is-primary { color: var(--bc-color-canvas); background: var(--bc-color-text); }
.web-error-report footer button:disabled { cursor: default; opacity: .42; }
@media (hover:hover) { .web-nav-button:hover, .web-icon-button:hover, .web-profile:hover, .web-error-report button:hover:not(:disabled) { background: var(--bc-color-hover); } .web-error-report footer button.is-primary:hover:not(:disabled) { color: var(--bc-color-canvas); background: color-mix(in srgb, var(--bc-color-text) 86%, var(--bc-color-canvas)); } }
@media (min-width: 721px) {
  html[data-web-sidebar-collapsed="true"] .web-shell { grid-template-columns: minmax(0, 1fr); }
  html[data-web-sidebar-collapsed="true"] .web-sidebar { display: none; }
  html[data-web-sidebar-collapsed="true"] .web-sidebar-expand { display: grid; }
  html[data-web-sidebar-collapsed="true"] #better-codex-panel .better-codex-toolbar { padding-left: 58px; }
}
@media (max-width: 720px) {
  .web-shell { display: block; }
  .web-main { width: 100%; height: calc(100% - 58px); }
  .web-sidebar { position: fixed; z-index: 50; right: 0; bottom: 0; left: 0; width: 100%; height: 58px; flex-direction: row; align-items: center; justify-content: center; padding: 6px max(10px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); box-shadow: inset 0 1px var(--bc-color-hairline); }
  .web-brand, .web-account, .web-sidebar-expand { display: none; }
  .web-sidebar nav, .web-sidebar-scroll { width: 100%; height: auto; overflow: visible; }
  .web-sidebar-section { display: flex; justify-content: center; gap: 8px; margin: 0; }
  .web-sidebar-section > .web-nav-button:not(#better-codex-entry):not(#better-codex-agents-entry):not(#better-codex-projects-entry):not(#better-codex-more-entry) { display: none; }
  .web-nav-button { display: grid; grid-template-columns: 20px auto; min-height: 42px; justify-content: center; gap: 7px; padding: 0 12px; }
  #better-codex-entry, #better-codex-agents-entry { width: min(150px, calc((100vw - 82px) / 2)); }
  .web-nav-auxiliary { position: relative; display: block; flex: 0 0 46px; }
  .web-nav-more-entry { display: grid; width: 46px; grid-template-columns: 20px; padding: 0; }
  .web-nav-more-menu { position: absolute; right: 0; bottom: calc(100% + 10px); display: none; width: min(220px, calc(100vw - 20px)); border: 1px solid var(--bc-color-hairline); border-radius: var(--bc-radius-md); padding: 6px; background: var(--bc-color-surface-raised); box-shadow: var(--bc-elevation-menu); }
  .web-nav-more-menu[data-open="true"] { display: grid; }
  .web-nav-more-menu .web-nav-button { display: grid; width: 100%; min-height: 44px; grid-template-columns: 20px minmax(0, 1fr); justify-content: start; padding: 0 12px; text-align: left; }
  .web-nav-more-menu .web-nav-button[hidden] { display: none; }
  .web-nav-more-menu .web-nav-profile-entry { min-height: 58px; grid-template-columns: 32px minmax(0, 1fr) 16px; gap: 10px; padding: 0 10px; }
  .web-nav-profile-avatar { display: grid; width: 30px; height: 30px; place-items: center; overflow: hidden; border-radius: var(--bc-radius-pill); color: var(--bc-color-on-avatar); background: var(--bc-color-success) center / cover no-repeat; font-size: 9px; font-weight: 700; }
  .web-nav-profile-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .web-nav-profile-meta { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
  .web-nav-profile-meta strong, .web-nav-profile-meta small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .web-nav-profile-meta strong { font-size: 12px; font-weight: 620; }
  .web-nav-profile-meta small { color: var(--bc-color-text-muted); font-size: 10px; }
  .web-nav-profile-entry > svg { width: 14px; height: 14px; color: var(--bc-color-text-muted); }
  .web-account:has(.web-account-usage[aria-expanded="true"]) { position: fixed; z-index: 60; right: max(10px, env(safe-area-inset-right)); bottom: calc(68px + env(safe-area-inset-bottom)); display: block; width: min(280px, calc(100vw - 20px)); border: 1px solid var(--bc-color-hairline); border-radius: var(--bc-radius-md); padding: 6px; background: var(--bc-color-surface-raised); box-shadow: var(--bc-elevation-menu); }
  .web-account:has(.web-account-usage[aria-expanded="true"]) .web-profile, .web-account:has(.web-account-usage[aria-expanded="true"]) .web-account-theme, .web-account:has(.web-account-usage[aria-expanded="true"]) .web-account-usage { display: none; }
  .web-account:has(.web-account-usage[aria-expanded="true"]) .web-usage { margin: 0; border: 0; padding: var(--bc-space-4); }
  .web-account:has(.web-account-usage[aria-expanded="true"]) .web-usage-heading { grid-template-columns: minmax(0, 1fr) var(--bc-control-height) var(--bc-control-height) var(--bc-control-height); }
  .web-account:has(.web-account-usage[aria-expanded="true"]) .web-usage-close { display: grid; width: 28px; height: 28px; border: 0; border-radius: var(--bc-radius-xs); padding: 0; place-items: center; color: var(--bc-color-text-muted); background: transparent; cursor: pointer; }
  .web-account:has(.web-account-usage[aria-expanded="true"]) .web-usage-close svg { width: 15px; height: 15px; }
  .web-nav-button .text-fade-truncate { display: block; }
  #better-codex-more-entry .text-fade-truncate { display: none; }
  .web-error-report { width: calc(100vw - 20px); height: min(90dvh, 760px); max-height: calc(100dvh - 20px); }
  .web-error-report header { grid-template-columns: 36px minmax(0, 1fr) 36px; gap: 8px; padding: 16px; }
  .web-error-report-icon, .web-error-report header > button { width: 36px; height: 36px; }
  .web-error-report-summary { align-items: flex-start; flex-direction: column; gap: 4px; padding: 0 16px 12px; }
  .web-error-report pre { margin-inline: 16px; padding: 12px; font-size: 11px; }
  .web-error-report footer { align-items: stretch; flex-direction: column; padding: 12px 16px max(16px, env(safe-area-inset-bottom)); }
  .web-error-report-navigation, .web-error-report-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .web-error-report footer button { min-width: 0; padding-inline: 8px; }
}
@media (prefers-reduced-motion: reduce) { .web-sidebar *, .web-board-loading *, .web-connect *, .web-error-report * { transition-duration: .01ms !important; animation-duration: 1.6s !important; } }
html[data-better-codex-read-only] .better-codex-create-split,
html[data-better-codex-read-only] .better-codex-column-icon,
html[data-better-codex-read-only] [data-add-status],
html[data-better-codex-read-only] #better-codex-agents-entry,
html[data-better-codex-read-only] [data-pin],
html[data-better-codex-read-only] [data-card-more] { display: none !important; }