:root {
  color-scheme: light;
  --theme-page: #f8f9fa;
  --theme-surface: #ffffff;
  --theme-surface-soft: #f1f3f4;
  --theme-panel: #eef3f8;
  --theme-panel-alt: #f3f6f9;
  --theme-border: #dadce0;
  --theme-border-strong: #bdc1c6;
  --theme-text: #202124;
  --theme-text-soft: #3c4043;
  --theme-muted: #5f6368;
  --theme-faint: #80868b;
  --theme-accent: #1a73e8;
  --theme-accent-hover: #185abc;
  --theme-accent-soft: #e8f0fe;
  --theme-accent-text: #174ea6;
  --theme-editor: #cccccc;
  --theme-editor-text: #111111;
  --theme-danger: #d93025;
  --theme-danger-soft: #fce8e6;
  --theme-success: #188038;
  --theme-success-soft: #d9f2df;
  --theme-warning: #b45309;
  --theme-warning-soft: #fff7ed;
  --theme-shadow: rgba(60, 64, 67, 0.22);
}

:root[data-theme="cloud"] {
  --theme-page: #edf4fb; --theme-surface: #ffffff; --theme-surface-soft: #e3edf7;
  --theme-panel: #dce9f5; --theme-panel-alt: #e7f0f8; --theme-border: #bfd0df;
  --theme-border-strong: #91abc1; --theme-text: #162433; --theme-text-soft: #2d4357;
  --theme-muted: #50687d; --theme-faint: #71879a; --theme-accent: #2676b8;
  --theme-accent-hover: #1b609a; --theme-accent-soft: #d6eaff; --theme-accent-text: #15527f;
  --theme-editor: #dce7f0; --theme-editor-text: #142433;
}

:root[data-theme="sand"] {
  --theme-page: #f4efe5; --theme-surface: #fffaf0; --theme-surface-soft: #eee5d5;
  --theme-panel: #e8dcc7; --theme-panel-alt: #f1e8d8; --theme-border: #cdbd9f;
  --theme-border-strong: #aa9470; --theme-text: #30281e; --theme-text-soft: #514332;
  --theme-muted: #70604b; --theme-faint: #8d7c65; --theme-accent: #a45120;
  --theme-accent-hover: #843d15; --theme-accent-soft: #f5d9bd; --theme-accent-text: #773711;
  --theme-editor: #e5dac8; --theme-editor-text: #2f281f;
}

:root[data-theme="forest"] {
  --theme-page: #eaf2ec; --theme-surface: #f8fcf8; --theme-surface-soft: #ddeade;
  --theme-panel: #d4e4d7; --theme-panel-alt: #e2ede3; --theme-border: #b4cbb8;
  --theme-border-strong: #87a98e; --theme-text: #17301e; --theme-text-soft: #304e37;
  --theme-muted: #52705a; --theme-faint: #748e79; --theme-accent: #287a46;
  --theme-accent-hover: #1d6035; --theme-accent-soft: #cdebd5; --theme-accent-text: #18542e;
  --theme-editor: #d6e3d8; --theme-editor-text: #17301e;
}

:root[data-theme="ocean"] {
  --theme-page: #e7f3f5; --theme-surface: #f7fcfd; --theme-surface-soft: #dcecef;
  --theme-panel: #d0e6e9; --theme-panel-alt: #dff0f2; --theme-border: #acd0d5;
  --theme-border-strong: #78aeb6; --theme-text: #123239; --theme-text-soft: #28515a;
  --theme-muted: #48717a; --theme-faint: #6c9097; --theme-accent: #087f8c;
  --theme-accent-hover: #056570; --theme-accent-soft: #c5edf1; --theme-accent-text: #035b65;
  --theme-editor: #d2e5e8; --theme-editor-text: #123239;
}

:root[data-theme="lavender"] {
  --theme-page: #f2eef9; --theme-surface: #fcfaff; --theme-surface-soft: #e9e2f4;
  --theme-panel: #e2d9f0; --theme-panel-alt: #ece5f7; --theme-border: #c9b9df;
  --theme-border-strong: #a38bc2; --theme-text: #2d213f; --theme-text-soft: #4c3d62;
  --theme-muted: #6b5a81; --theme-faint: #88769d; --theme-accent: #7651b5;
  --theme-accent-hover: #5e3d96; --theme-accent-soft: #e2d4fa; --theme-accent-text: #51318a;
  --theme-editor: #ddd5e9; --theme-editor-text: #2d213f;
}

:root[data-theme="rose"] {
  --theme-page: #f8edef; --theme-surface: #fffafb; --theme-surface-soft: #f1e0e4;
  --theme-panel: #ead5da; --theme-panel-alt: #f4e3e7; --theme-border: #d6b5bd;
  --theme-border-strong: #b98491; --theme-text: #3c2028; --theme-text-soft: #5f3944;
  --theme-muted: #7d5661; --theme-faint: #98727c; --theme-accent: #b54564;
  --theme-accent-hover: #91344e; --theme-accent-soft: #f5d3dc; --theme-accent-text: #812c45;
  --theme-editor: #e6d4d8; --theme-editor-text: #3c2028;
}

:root[data-theme="slate"] {
  color-scheme: dark;
  --theme-page: #242a31; --theme-surface: #303740; --theme-surface-soft: #3a424c;
  --theme-panel: #2b333c; --theme-panel-alt: #343d47; --theme-border: #4c5763;
  --theme-border-strong: #667483; --theme-text: #f1f4f7; --theme-text-soft: #d9e0e7;
  --theme-muted: #b5c0ca; --theme-faint: #97a5b2; --theme-accent: #70aef2;
  --theme-accent-hover: #91c1f6; --theme-accent-soft: #294e73; --theme-accent-text: #a9d1ff;
  --theme-editor: #20262d; --theme-editor-text: #eef3f7; --theme-shadow: rgba(0, 0, 0, 0.42);
}

:root[data-theme="midnight"] {
  color-scheme: dark;
  --theme-page: #0d1624; --theme-surface: #152238; --theme-surface-soft: #1d2d47;
  --theme-panel: #111f34; --theme-panel-alt: #192942; --theme-border: #304766;
  --theme-border-strong: #496789; --theme-text: #edf5ff; --theme-text-soft: #ccdcf0;
  --theme-muted: #a5bad3; --theme-faint: #8099b7; --theme-accent: #5aa7ff;
  --theme-accent-hover: #82bdff; --theme-accent-soft: #173f6b; --theme-accent-text: #9bcbff;
  --theme-editor: #091321; --theme-editor-text: #edf5ff; --theme-shadow: rgba(0, 0, 0, 0.55);
}

:root[data-theme="solarized-dark"] {
  color-scheme: dark;
  --theme-page: #002b36; --theme-surface: #073642; --theme-surface-soft: #124552;
  --theme-panel: #06323d; --theme-panel-alt: #0d3c47; --theme-border: #315963;
  --theme-border-strong: #52747c; --theme-text: #fdf6e3; --theme-text-soft: #eee8d5;
  --theme-muted: #b7b09b; --theme-faint: #93a1a1; --theme-accent: #2aa198;
  --theme-accent-hover: #45beb4; --theme-accent-soft: #0a5255; --theme-accent-text: #6ed8cf;
  --theme-editor: #00252e; --theme-editor-text: #eee8d5; --theme-shadow: rgba(0, 0, 0, 0.5);
}

:root[data-theme="high-contrast-light"] {
  --theme-page: #ffffff; --theme-surface: #ffffff; --theme-surface-soft: #eeeeee;
  --theme-panel: #f3f3f3; --theme-panel-alt: #e7e7e7; --theme-border: #000000;
  --theme-border-strong: #000000; --theme-text: #000000; --theme-text-soft: #000000;
  --theme-muted: #242424; --theme-faint: #444444; --theme-accent: #0048cc;
  --theme-accent-hover: #002f88; --theme-accent-soft: #cfe2ff; --theme-accent-text: #002f88;
  --theme-editor: #ffffff; --theme-editor-text: #000000; --theme-shadow: rgba(0, 0, 0, 0.4);
}

:root[data-theme="high-contrast-dark"] {
  color-scheme: dark;
  --theme-page: #000000; --theme-surface: #000000; --theme-surface-soft: #161616;
  --theme-panel: #090909; --theme-panel-alt: #111111; --theme-border: #ffffff;
  --theme-border-strong: #ffffff; --theme-text: #ffffff; --theme-text-soft: #ffffff;
  --theme-muted: #f0f0f0; --theme-faint: #cccccc; --theme-accent: #54d8ff;
  --theme-accent-hover: #9ae9ff; --theme-accent-soft: #003b4d; --theme-accent-text: #9ae9ff;
  --theme-editor: #000000; --theme-editor-text: #ffffff; --theme-shadow: rgba(255, 255, 255, 0.25);
}

html,
body {
  margin: 0;
  height: 100%;
  background: #fff;
  font-family: Arial, sans-serif;
  overflow: auto;
}

#login-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  background: #f8f9fa;
}

#login-screen[hidden],
#workspace[hidden] {
  display: none;
}

.login-card {
  width: min(360px, 100%);
  padding: 28px;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid #dadce0;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(60, 64, 67, 0.15);
}

.login-card h1 {
  margin: 0 0 8px;
  color: #202124;
  font-size: 24px;
}

.login-card p {
  margin: 0 0 22px;
  color: #5f6368;
  font-size: 14px;
}

.login-card label {
  display: block;
  margin: 14px 0 6px;
  color: #3c4043;
  font-size: 13px;
  font-weight: 600;
}

.login-card input {
  width: 100%;
  padding: 10px 11px;
  box-sizing: border-box;
  color: #202124;
  border: 1px solid #bdc1c6;
  border-radius: 5px;
  font: 16px Arial, sans-serif;
}

.login-card input:focus {
  border-color: #1a73e8;
  outline: 2px solid rgba(26, 115, 232, 0.2);
}

.login-card button {
  color: #fff;
  background: #1a73e8;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  font: 14px Arial, sans-serif;
}

.login-card button {
  width: 100%;
  margin-top: 22px;
  padding: 11px 14px;
  font-weight: 600;
}

.login-card button:hover,
.login-card button:focus-visible {
  background: #185abc;
  outline: none;
}

.login-card .login-message {
  min-height: 18px;
  margin: 12px 0 0;
  color: #d93025;
  font-size: 13px;
}

#workspace {
  --top-region-size: 132px;
  --top-groups-region-size: 220px;
  --top-groups-collapsed-size: 18px;
  --top-groups-current-size: var(--top-groups-region-size);
  --bottom-region-size: 132px;
  --top-items-groups-size: 56%;
  --project-folders-pane-size: 33.333%;
  --project-folders-middle-pane-size: 33.333%;
  --project-folder-tree-size: 44%;
  --project-item-groups-size: 220px;
  display: grid;
  grid-template-areas:
    "top"
    "editor"
    "bottom";
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: 100%;
  min-width: 1100px;
  height: 100%;
  overflow: hidden;
  background: #f8f9fa;
  position: relative;
}

.control-region {
  display: flex;
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  color: #3c4043;
  background: #f8f9fa;
  transition: none;
}

.top-region {
  grid-area: top;
  flex-direction: column;
  height: var(--top-region-size);
  border-bottom: 1px solid #dadce0;
  overflow: visible;
  z-index: 5;
}

.top-region .region-toggle {
  order: 10;
}

.top-region > .region-content {
  padding: 0;
  overflow: hidden;
}

.top-items-split {
  display: flex;
  min-width: 0;
  min-height: 0;
}

.top-items-pane {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  padding: 6px;
  overflow: hidden;
  box-sizing: border-box;
}

.top-primary-pane {
  flex: 0 0 calc(var(--top-items-groups-size) - var(--top-groups-current-size));
}

.top-groups-slot {
  flex: 0 0 var(--top-groups-current-size);
  min-width: 0;
}

.top-common-pane {
  background: #f3f6f9;
}

.top-groups-region {
  position: absolute;
  z-index: 6;
  top: 38px;
  right: calc(100% - var(--top-items-groups-size));
  flex-direction: column;
  width: var(--top-groups-current-size);
  height: calc(var(--top-region-size) - 38px);
  box-sizing: border-box;
  background: #eef3f8;
  border-right: 1px solid #dadce0;
  border-bottom: 1px solid #dadce0;
}

.top-groups-region .region-header,
.bottom-project-groups-pane .bottom-pane-heading {
  background: #e1ebf7;
}

.top-items-wrap-toggle {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  margin-left: 10px;
  color: #3c4043;
  cursor: pointer;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: normal;
  white-space: nowrap;
}

.top-items-wrap-toggle input {
  width: 14px;
  height: 14px;
  margin: 0;
  cursor: pointer;
}

.top-groups-region .region-header .region-toggle,
.bottom-project-groups-pane .bottom-pane-heading .region-toggle {
  box-sizing: border-box;
  color: #3c5f91;
  background: #d4e4fb;
  border: 1px solid #8eafe0;
}

.top-groups-region .region-header .region-toggle:hover,
.top-groups-region .region-header .region-toggle:focus-visible,
.bottom-project-groups-pane .bottom-pane-heading .region-toggle:hover,
.bottom-project-groups-pane .bottom-pane-heading .region-toggle:focus-visible {
  color: #274b7c;
  background: #c5daf7;
}

.bottom-region {
  grid-area: bottom;
  flex-direction: column;
  height: var(--bottom-region-size);
  border-top: 1px solid #dadce0;
  overflow: visible;
  z-index: 4;
}

.bottom-region .region-content {
  padding: 0;
  overflow: hidden;
}

.bottom-split {
  display: flex;
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 6px;
  background: #eef1f4;
  box-sizing: border-box;
}

.bottom-pane {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.bottom-project-pane {
  position: relative;
  background: #fff;
}

.bottom-folders-pane {
  flex-direction: column;
  flex: 0 0 var(--project-folders-pane-size);
  background: #fff;
}

.project-folder-picker {
  container-type: inline-size;
  border: 1px solid #bdc1c6;
  border-radius: 5px;
  box-sizing: border-box;
}

.project-folder-picker[data-picker-id="third"] {
  flex: 1 1 auto;
}

.project-folder-picker[data-picker-id="right"] {
  flex: 0 0 var(--project-folders-middle-pane-size);
}

.project-folder-picker.is-collapsed {
  flex: 0 0 18px !important;
  min-width: 18px;
}

.bottom-split:has(.project-folder-picker[data-picker-id="third"].is-collapsed)
  .project-folder-picker[data-picker-id="right"]:not(.is-collapsed) {
  flex: 1 1 auto;
}

.bottom-split:has(.project-folder-picker[data-picker-id="right"].is-collapsed)
  :is(.project-folder-picker[data-picker-id="left"]:not(.is-collapsed)) {
  flex-grow: 1;
}

.project-folder-browser-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  position: relative;
  flex: 0 0 auto;
  align-items: center;
  min-width: 0;
  padding: 3px 0;
  border-bottom: 1px solid #dadce0;
  box-sizing: border-box;
  background: #f8f9fa;
}

.project-folder-browser-body {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.project-folder-toolbar-left {
  grid-column: 1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px;
  min-width: 0;
  margin-left: 6px;
}

.project-folder-view-toggle {
  display: inline-flex;
  flex: 0 0 auto;
  border: 1px solid #bdc1c6;
  border-radius: 4px;
  overflow: hidden;
}

.project-folder-view-toggle button {
  min-width: 32px;
  height: 22px;
  padding: 2px;
  border: 0;
  border-right: 1px solid #bdc1c6;
  color: #3c4043;
  background: #fff;
  cursor: pointer;
  font: 11px Arial, sans-serif;
}

.project-folder-view-toggle button:last-child {
  border-right: 0;
}

.project-folder-view-toggle button[aria-pressed="true"] {
  color: #fff;
  background: #1a73e8;
}

.project-folder-view-toggle button:focus-visible {
  position: relative;
  outline: 2px solid #174ea6;
  outline-offset: -2px;
}

.project-folder-picker[data-picker-id="third"] .project-folder-view-toggle button {
  min-width: 30px;
  padding-right: 1px;
  padding-left: 1px;
}

.project-folder-activity-controls {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 3px;
}

.project-folder-activity-toggle,
.project-folder-complexity-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 22px;
  padding: 2px 3px;
  color: #3c4043;
  background: #fff;
  border: 1px solid #bdc1c6;
  border-radius: 4px;
  cursor: pointer;
  font: 9px Arial, sans-serif;
}

.project-folder-picker[data-picker-id="third"] .project-folder-activity-toggle,
.project-folder-picker[data-picker-id="third"] .project-folder-complexity-toggle {
  padding-right: 1px;
  padding-left: 1px;
}

.project-folder-activity-minutes {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  color: #5f6368;
  font: 9px Arial, sans-serif;
}

.project-folder-activity-minutes input {
  width: 26px;
  height: 22px;
  padding: 1px 2px;
  border: 1px solid #bdc1c6;
  border-radius: 4px;
  box-sizing: border-box;
  font: 9px Arial, sans-serif;
}

.project-folder-activity-toggle[aria-pressed="false"],
.project-folder-complexity-toggle[aria-pressed="false"] {
  color: #202124;
  background: #d5d9de;
  border-color: #8b929a;
  box-shadow: inset 0 1px 2px rgba(60, 64, 67, 0.18);
}

.project-folder-activity-toggle[aria-pressed="true"],
.project-folder-complexity-toggle[aria-pressed="true"] {
  color: #fff;
  background: #0b57d0;
  border-color: #063e9b;
  box-shadow: 0 0 0 1px #063e9b, 0 1px 3px rgba(11, 87, 208, 0.45);
  font-weight: 700;
}

.project-folder-activity-toggle:focus-visible,
.project-folder-complexity-toggle:focus-visible {
  outline: 2px solid #1a73e8;
  outline-offset: 1px;
}

.project-folder-home {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  padding: 3px;
  color: #174ea6;
  background: #fff;
  border: 1px solid #bdc1c6;
  border-radius: 4px;
  cursor: pointer;
}

.project-folder-home svg {
  display: block;
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.project-folder-home:hover:not(:disabled),
.project-folder-home:focus-visible {
  background: #e8f0fe;
  outline: 2px solid #1a73e8;
  outline-offset: -2px;
}

.project-folder-home:disabled {
  color: #9aa0a6;
  background: #f1f3f4;
  cursor: default;
}

.project-folder-activity-legend {
  display: inline-flex;
  gap: 1px;
}

.project-folder-activity-toggle[aria-pressed="false"] .project-folder-activity-legend {
  opacity: 0.45;
}

.project-folder-activity-legend i {
  width: 1px;
  height: 12px;
  background: #7aa7d9;
  border-radius: 1px;
}

.project-folder-activity-legend i:nth-child(2) { background: #53b7c6; }
.project-folder-activity-legend i:nth-child(3) { background: #f9d65c; }
.project-folder-activity-legend i:nth-child(4) { background: #f59e42; }
.project-folder-activity-legend i:nth-child(5) { background: #d93025; }

.project-folder-activity-minutes[hidden] {
  display: none;
}

.project-folder-file-tools {
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: 4px;
  justify-self: end;
  min-width: 0;
  margin-right: 20px;
}

@container (max-width: 500px) {
  .project-folder-activity-controls {
    flex-basis: 100%;
    margin-left: 25px;
  }

  .project-folder-file-tools {
    gap: 2px;
  }

  .project-folder-file-tools .add-external-focus-file {
    padding-inline: 3px;
    font-size: 10px;
  }

  .project-folder-file-tools .project-items-backticks-caption {
    display: none;
  }

  .project-folder-picker[data-picker-id="third"] .project-folder-file-tools {
    margin-right: 18px;
  }
}

.project-folder-picker[data-picker-id="third"] .project-folder-file-tools {
  margin-right: 58px;
}

.project-folder-collapse-toggle {
  display: grid;
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  width: 18px;
  height: 28px;
  padding: 0;
  place-items: center;
  color: #5f6368;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.project-folder-picker[data-picker-id="third"] .project-folder-collapse-toggle {
  right: 38px;
}

.project-folder-collapse-toggle:hover,
.project-folder-collapse-toggle:focus-visible {
  color: var(--theme-accent-text);
  background: var(--theme-accent-soft);
  outline: 2px solid var(--theme-accent);
  outline-offset: -2px;
}

.project-folder-collapse-toggle .material-symbols-outlined {
  width: 16px;
  overflow: hidden;
  font-size: 18px;
}

.project-folder-picker.is-collapsed .project-folder-browser-toolbar {
  display: block;
  flex: 1 1 auto;
  padding: 0;
  border-bottom: 0;
}

.project-folder-picker.is-collapsed .project-folder-toolbar-left,
.project-folder-picker.is-collapsed .project-folder-file-tools,
.project-folder-picker.is-collapsed .project-folder-browser-body {
  display: none;
}

.project-folder-picker.is-collapsed .project-folder-collapse-toggle {
  top: 34px;
  right: 0;
}

.project-folder-picker.is-collapsed + .project-folders-divider,
.project-folders-divider:has(+ .project-folder-picker.is-collapsed) {
  display: none;
}

.add-external-focus-file {
  height: 22px;
  padding: 2px 6px;
  color: #174ea6;
  background: #fff;
  border: 1px solid #bdc1c6;
  border-radius: 4px;
  cursor: pointer;
  font: 11px Arial, sans-serif;
  white-space: nowrap;
}

.add-external-focus-file:hover,
.add-external-focus-file:focus-visible {
  background: #e8f0fe;
  outline: 2px solid #1a73e8;
  outline-offset: -2px;
}

.add-external-focus-file:disabled {
  color: #9aa0a6;
  background: #f1f3f4;
  cursor: default;
}

.project-folder-file-tools .project-items-backticks-caption {
  font-size: 10px;
}

.project-folder-tree-pane {
  display: flex;
  flex: 0 0 var(--project-folder-tree-size);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.project-folder-files-pane {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #fff;
}

.project-folder-file-action-status {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 4;
  max-width: calc(100% - 16px);
  padding: 5px 8px;
  overflow: hidden;
  color: #174ea6;
  background: #e8f0fe;
  border: 1px solid #aecbfa;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(60, 64, 67, 0.2);
  box-sizing: border-box;
  font: 11px/1.3 Arial, sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}

.project-folder-file-action-status.is-error {
  color: #8b1e1e;
  background: #fce8e6;
  border-color: #f28b82;
}

.project-folder-file-action-status[hidden] {
  display: none;
}

.bottom-project-groups-pane {
  position: relative;
  flex: 0 0 var(--project-item-groups-size);
  background: #eef3f8;
  border-left: 1px solid #dadce0;
  box-sizing: border-box;
}

.bottom-project-groups-pane.is-collapsed {
  flex-basis: 38px;
}

.bottom-project-groups-pane.is-collapsed .bottom-pane-content,
.bottom-project-groups-pane.is-collapsed .region-label,
.bottom-project-groups-pane.is-collapsed .add-item-button {
  display: none;
}

.bottom-project-groups-pane.is-collapsed .bottom-pane-heading {
  padding: 0 5px;
  justify-content: center;
}

#workspace.project-items-tall:has(.bottom-region:not(.is-collapsed)) #container {
  width: var(--project-items-editor-width, 50%);
}

#workspace.project-items-tall .bottom-region:not(.is-collapsed) > .region-content {
  overflow: visible;
}

#workspace.project-items-tall .bottom-region:not(.is-collapsed) .bottom-project-pane {
  position: absolute;
  z-index: 5;
  right: calc(var(--project-item-groups-size) + 8px);
  bottom: 0;
  left: var(--project-items-editor-width, 50%);
  width: auto;
  height: var(--project-items-tall-height, calc(100dvh - var(--top-region-size)));
  border-left: 1px solid #dadce0;
  box-sizing: border-box;
}

#workspace.project-items-tall:has(.bottom-project-groups-pane.is-collapsed)
  .bottom-region:not(.is-collapsed) .bottom-project-pane {
  right: 38px;
}

#workspace.project-items-tall .bottom-region:not(.is-collapsed) .bottom-project-groups-pane {
  position: absolute;
  z-index: 5;
  right: 0;
  bottom: 0;
  width: var(--project-item-groups-size);
  height: var(--project-items-tall-height, calc(100dvh - var(--top-region-size)));
}

#workspace.project-items-tall .bottom-region:not(.is-collapsed)
  .bottom-project-groups-pane.is-collapsed {
  width: 38px;
}

#workspace.project-items-tall .bottom-region:not(.is-collapsed) .project-folders-divider {
  position: absolute;
  z-index: 6;
  top: calc(100% - var(--project-items-tall-height, 100%));
  bottom: 0;
  left: calc(var(--project-items-editor-width, 50%) - 8px);
  width: 8px;
}

#workspace.project-items-tall .bottom-region:not(.is-collapsed) .project-item-groups-divider {
  position: absolute;
  z-index: 6;
  top: calc(100% - var(--project-items-tall-height, 100%));
  right: var(--project-item-groups-size);
  bottom: 0;
  width: 8px;
}

.bottom-pane-heading {
  flex: 0 0 30px;
  padding: 7px 10px 0;
  color: #5f6368;
  background: #fff;
  border-bottom: 1px solid #e8eaed;
  box-sizing: border-box;
  font-size: 12px;
  font-weight: 600;
}

.bottom-pane-heading.is-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 0;
}

.bottom-pane-heading.is-toolbar > span {
  flex: 1 1 auto;
  min-width: 0;
}

.project-items-heading-label {
  display: flex;
  align-items: center;
  gap: 5px;
}

.project-items-heading-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.svg-checkbox-toggle {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  color: #5f6368;
  background: transparent;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
}

.svg-checkbox-toggle:hover {
  background: #f1f3f4;
}

.svg-checkbox-toggle:focus-visible {
  outline: 2px solid #1a73e8;
  outline-offset: 1px;
}

.svg-checkbox-toggle svg {
  width: 16px;
  height: 16px;
}

.project-items-backticks-toggle {
  width: auto;
  height: 22px;
  gap: 4px;
  padding: 2px 4px;
  font: inherit;
}

.project-items-backticks-caption {
  white-space: nowrap;
}

.svg-checkbox-box {
  fill: #fff;
  stroke: currentColor;
  stroke-width: 1.5;
}

.svg-checkbox-check {
  fill: none;
  stroke: #fff;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  opacity: 0;
}

.svg-checkbox-toggle[aria-checked="true"] {
  color: #1a73e8;
}

.svg-checkbox-toggle[aria-checked="true"] .svg-checkbox-box {
  fill: currentColor;
}

.svg-checkbox-toggle[aria-checked="true"] .svg-checkbox-check {
  opacity: 1;
}

.project-items-expansion-controls {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 2px;
}

.add-item-button {
  flex: 0 0 auto;
  padding: 3px 6px;
  color: #1a73e8;
  background: #fff;
  border: 1px solid #dadce0;
  border-radius: 4px;
  cursor: pointer;
  font: 12px Arial, sans-serif;
}

.project-folder-pane-content {
  flex: 1 1 auto;
  padding: 6px;
  overflow: auto;
  color: #202124;
  box-sizing: border-box;
  font: 12px/1.4 Arial, sans-serif;
}

.project-folder-status {
  padding: 8px 9px;
  color: #5f6368;
}

.project-folder-files-content {
  padding-right: 38px;
  overflow: auto;
  color: #202124;
  box-sizing: border-box;
  font: 12px/1.4 Arial, sans-serif;
}

.project-folder-file {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  min-height: 26px;
  padding: 4px 8px;
  overflow: hidden;
  border: 0;
  border-radius: 4px;
  box-sizing: border-box;
  color: #3c4043;
  background: transparent;
  cursor: pointer;
  font: inherit;
  text-align: left;
  white-space: nowrap;
}

.project-folder-activity-marker {
  position: absolute;
  z-index: 1;
  top: 4px;
  bottom: 4px;
  left: 1px;
  width: 3px;
  background: var(--project-folder-activity-color);
  border-radius: 2px;
  pointer-events: none;
}

.project-folder-complexity-score {
  flex: 0 0 auto;
  min-width: 22px;
  padding: 1px 3px;
  color: #3c4043;
  border-radius: 3px;
  font: 600 10px Arial, sans-serif;
  text-align: right;
}

.project-folder-complexity-score[hidden] {
  display: none;
}

.project-folder-file-name {
  width: 100%;
  min-width: 0;
  min-height: 1em;
  padding: 2px 4px;
  overflow: hidden;
  border-radius: 4px;
  box-sizing: border-box;
  text-overflow: ellipsis;
}

.project-folder-file-name[data-restricted-label]::before {
  content: attr(data-restricted-label);
  margin-right: 4px;
  padding: 0 3px;
  color: #7a4b00;
  background: #fff1c9;
  border: 1px solid #e3c677;
  border-radius: 3px;
  font: 600 9px Arial, sans-serif;
  vertical-align: 1px;
}

.project-folder-file-drag-handle {
  display: grid;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  place-items: center;
  color: #80868b;
  cursor: grab;
  user-select: none;
}

.project-folder-file-drag-handle::before {
  content: "\283f";
  font: 18px/1 Arial, sans-serif;
}

.project-folder-file-drag-handle:active {
  cursor: grabbing;
}

.project-folder-file.is-drag-over-before::after,
.project-folder-file.is-drag-over-after::after {
  position: absolute;
  right: 2px;
  left: 2px;
  height: 3px;
  background: #1a73e8;
  border-radius: 2px;
  content: "";
}

.project-folder-file.is-drag-over-before::after {
  top: 0;
}

.project-folder-file.is-drag-over-after::after {
  bottom: 0;
}

.project-folder-file:hover {
  background: #e8f0fe;
}

.project-folder-file.is-selected {
  color: #174ea6;
  background: #d2e3fc;
  box-shadow: inset 0 0 0 2px #1a73e8;
  font-weight: 700;
}

.project-folder-file-list .project-folder-file.is-selected {
  color: inherit;
  background: transparent;
  box-shadow: none;
  font-weight: inherit;
}

.project-folder-file-list .project-folder-file.is-selected .project-folder-file-name {
  box-shadow: inset 0 0 0 2px #1a73e8;
  color: #174ea6 !important;
  background: #d2e3fc !important;
  font-weight: 700;
}

.project-folder-file.is-stale-worklog:not(.is-selected) {
  color: #8b1e1e;
  background: #fce8e6;
}

.project-folder-file.is-stale-worklog.is-selected {
  color: #8b1e1e;
  background: #fce8e6;
  box-shadow: inset 0 0 0 2px #1a73e8;
}

.project-folder-file-list .project-folder-file.is-stale-worklog.is-selected {
  color: #8b1e1e;
  background: #fce8e6;
  box-shadow: none;
}

.project-folder-file-list .project-folder-file.is-stale-worklog.is-selected .project-folder-file-name {
  color: #8b1e1e !important;
  background: #fce8e6 !important;
}

.project-folder-file-list.is-focus-mode .project-folder-file.is-folder-match-flash .project-folder-file-name {
  animation: project-folder-file-match-flash 900ms ease-out;
}

@keyframes project-folder-file-match-flash {
  0%, 28% {
    color: #5f4500;
    background: #fef3c0;
    box-shadow: inset 0 0 0 2px #f9ab00;
  }

  100% {
    color: inherit;
    background: transparent;
    box-shadow: inset 0 0 0 2px transparent;
  }
}

.project-folder-file:focus-visible {
  outline: 2px solid #1a73e8;
  outline-offset: -2px;
}

.project-folder-file-description-popup {
  position: fixed;
  z-index: 1002;
  width: min(380px, calc(100vw - 16px));
  max-height: min(420px, calc(100vh - 16px));
  padding: 12px;
  overflow: auto;
  color: #202124;
  background: #fff;
  border: 1px solid #bdc1c6;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(60, 64, 67, 0.24);
  box-sizing: border-box;
  font: 13px/1.45 Arial, sans-serif;
}

.project-folder-file-description-popup[hidden] {
  display: none;
}

.project-folder-file-description-preview {
  display: block;
  width: 100%;
  min-height: 42px;
  padding: 8px;
  overflow-wrap: anywhere;
  color: #202124;
  background: #f8f9fa;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: text;
  font: inherit;
  text-align: left;
  white-space: pre-wrap;
}

.project-folder-file-description-preview.is-empty {
  color: #5f6368;
  font-style: italic;
}

.project-folder-file-description-preview[hidden] {
  display: none;
}

.project-folder-file-description-preview:hover,
.project-folder-file-description-preview:focus-visible {
  border-color: #1a73e8;
  outline: none;
}

.project-folder-file-description-popup textarea {
  display: block;
  width: 100%;
  min-height: 130px;
  max-height: 260px;
  padding: 8px;
  resize: vertical;
  color: #202124;
  background: #fff;
  border: 1px solid #bdc1c6;
  border-radius: 4px;
  box-sizing: border-box;
  font: inherit;
}

.project-folder-file-description-popup textarea:focus {
  border-color: #1a73e8;
  outline: 2px solid rgba(26, 115, 232, 0.2);
}

.project-folder-file-description-popup textarea[hidden] {
  display: none;
}

.project-folder-file-description-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}

.project-folder-file-description-actions[hidden] {
  display: none;
}

.project-folder-file-description-actions button {
  min-width: 64px;
  padding: 6px 10px;
  color: #3c4043;
  background: #f1f3f4;
  border: 1px solid #dadce0;
  border-radius: 4px;
  cursor: pointer;
  font: 13px Arial, sans-serif;
}

.project-folder-file-description-actions .primary-button {
  color: #fff;
  background: #1a73e8;
  border-color: #1a73e8;
}

.project-folder-tree-root,
.project-folder-tree-folder {
  min-width: 0;
}

.project-folder-tree-row {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 26px;
}

.project-folder-expander,
.project-folder-expander-placeholder {
  flex: 0 0 20px;
  width: 20px;
  height: 26px;
}

.project-folder-expander {
  position: relative;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.project-folder-expander::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 9px;
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 6px solid currentColor;
  transform-origin: 3px 4px;
  transition: transform 140ms ease;
}

.project-folder-tree-root.is-expanded > .project-folder-tree-row > .project-folder-expander::before,
.project-folder-tree-folder.is-expanded > .project-folder-tree-row > .project-folder-expander::before {
  transform: rotate(90deg);
}

.project-folder-expander:hover,
.project-folder-expander:focus-visible {
  color: #174ea6;
  background: #e8f0fe;
}

.project-folder-tree-name {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 26px;
  padding: 3px 8px;
  overflow: hidden;
  border: 0;
  border-radius: 4px;
  box-sizing: border-box;
  color: #3c4043;
  background: transparent;
  cursor: pointer;
  font: inherit;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-folder-tree-root > .project-folder-tree-row > .project-folder-tree-name {
  font-weight: 600;
}

.project-folder-tree-name:hover {
  background: #e8f0fe;
}

.project-folder-tree-name.is-selected {
  color: #174ea6;
  background: #d2e3fc;
  box-shadow: inset 0 0 0 2px #1a73e8;
}

.project-folder-tree-name:focus-visible,
.project-folder-expander:focus-visible {
  outline: 2px solid #1a73e8;
  outline-offset: -2px;
}

.project-folder-tree-children {
  min-width: 0;
  margin-left: 16px;
}

@media (prefers-reduced-motion: reduce) {
  .project-folder-expander::before {
    transition: none;
  }

}

@media (forced-colors: active) {
  .bottom-folders-pane {
    color: CanvasText;
    background: Canvas;
    border-color: CanvasText;
    box-shadow: none;
  }

  .project-folder-tree-name:hover,
  .project-folder-tree-name:focus-visible,
  .project-folder-expander:hover,
  .project-folder-expander:focus-visible {
    color: HighlightText;
    background: Highlight;
  }
}

.control-region.is-collapsed .add-item-button {
  display: none;
}

.project-item-grid {
  --project-item-name-column-width: max(110px, 34%);
  display: flex;
  flex-direction: column;
  position: relative;
  height: 100%;
  min-height: 0;
  overflow: auto;
}

.project-item-row {
  display: grid;
  grid-template-columns: var(--project-item-name-column-width) minmax(180px, 1fr);
  min-width: 0;
}

.project-item-row > span {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 24px;
  padding: 1px 7px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-item-row span + span {
  border-left: 1px solid #e8eaed;
}

.project-item-column-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--project-item-name-column-width);
  z-index: 2;
  width: 9px;
  transform: translateX(-4px);
  cursor: col-resize;
  touch-action: none;
}

.project-item-column-divider::after {
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 4px;
  width: 1px;
  background: #dadce0;
  content: '';
  opacity: 0;
}

.project-item-column-divider:hover::after,
.project-item-column-divider:focus-visible::after,
.project-item-grid.is-resizing-columns .project-item-column-divider::after {
  opacity: 1;
}

.project-item-column-divider:focus-visible {
  outline: none;
}

.project-item-row {
  background: #fff;
  border-bottom: 1px solid #e8eaed;
  color: #202124;
  cursor: copy;
  font-size: 12px;
  -webkit-user-select: none;
  user-select: none;
}

.project-item-row.is-invalid .project-item-path {
  color: #8b1e1e;
  background: #fce8e6;
}

.project-item-row.is-pending-sync .project-item-path {
  background: #fff8d6;
}

.project-item-sync-status {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 5px;
  color: #7a4f00;
  background: #fce8b2;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.project-item-name {
  display: flex;
  align-items: center;
  gap: 4px;
}

.project-item-drag-handle {
  flex: 0 0 auto;
  color: #80868b;
  cursor: grab;
  font: 18px/1 Arial, sans-serif;
  user-select: none;
}

.project-item-drag-handle:active { cursor: grabbing; }

.project-item-row.is-drag-over-before { border-top: 3px solid #1a73e8; }
.project-item-row.is-drag-over-after { border-bottom: 3px solid #1a73e8; }

.top-item-row.is-hidden { opacity: 0.62; }

.project-item-row .project-item-path.is-selected {
  background: #ffe2a7;
}

.project-item-row.is-invalid .project-item-path.is-selected {
  background: #fce8e6;
}

.project-item-empty {
  padding: 8px 4px;
  color: #5f6368;
  font-size: 12px;
}

.bottom-pane-content {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  padding: 6px;
  overflow: hidden;
}

.bottom-pane-content.project-folder-pane-content,
.bottom-pane-content.project-folder-files-content {
  overflow: auto;
}

.top-item-pane-divider,
.project-folder-files-divider,
.project-folders-divider,
.project-item-groups-divider {
  position: relative;
  flex: 0 0 8px;
  cursor: col-resize;
  touch-action: none;
}

.top-item-pane-divider::after,
.project-folder-files-divider::after,
.project-folders-divider::after,
.project-item-groups-divider::after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 3px;
  width: 2px;
  background: #c7cdd1;
  content: '';
  opacity: 0.45;
  transition: opacity 120ms ease;
}

.top-item-pane-divider:hover::after,
.project-folder-files-divider:hover::after,
.project-folders-divider:hover::after,
.project-item-groups-divider:hover::after,
.top-items-split.is-resizing .top-item-pane-divider::after,
.bottom-folders-pane.is-resizing .project-folder-files-divider::after,
.bottom-split.is-resizing .project-folders-divider::after,
.bottom-split.is-resizing .project-item-groups-divider::after {
  opacity: 1;
}

#workspace:has(.bottom-project-groups-pane.is-collapsed) .project-item-groups-divider {
  display: none;
}

.region-header {
  display: flex;
  flex: 0 0 38px;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  padding: 0 6px 0 12px;
  color: #5f6368;
  background: #fff;
  border-bottom: 1px solid #e8eaed;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.region-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.region-toggle {
  display: grid;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  padding: 0;
  place-items: center;
  color: #5f6368;
  background: transparent;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  font: 20px/1 Arial, sans-serif;
}

.region-toggle:hover,
.region-toggle:focus-visible {
  color: #202124;
  background: #f1f3f4;
  outline: none;
}

.region-toggle .material-symbols-outlined {
  display: block;
  width: 24px;
  height: 24px;
  overflow: hidden;
  line-height: 24px;
  font-size: 21px;
  white-space: nowrap;
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

.region-content {
  flex: 1 1 auto;
  min-height: 0;
  padding: 12px;
  overflow: auto;
}

.region-resize-handle {
  position: absolute;
  z-index: 3;
  background: transparent;
  touch-action: none;
}

.region-resize-handle::after {
  position: absolute;
  content: '';
  background: #c7cdd1;
  opacity: 0.45;
  transition: opacity 120ms ease;
}

.region-resize-handle:hover::after,
.region-resize-handle.is-resizing::after {
  opacity: 1;
}

.top-region .region-resize-handle,
.bottom-region .region-resize-handle {
  right: 0;
  left: 0;
  height: 8px;
  cursor: row-resize;
}

.top-region .region-resize-handle {
  bottom: -4px;
}

.bottom-region .region-resize-handle {
  top: -4px;
}

.top-groups-region .region-resize-handle {
  top: 0;
  bottom: 0;
  width: 8px;
  cursor: col-resize;
}

.top-groups-region .region-resize-handle {
  left: 0;
}

.top-region .region-resize-handle::after,
.bottom-region .region-resize-handle::after {
  right: 0;
  bottom: 3px;
  left: 0;
  height: 2px;
}

.bottom-region .region-resize-handle::after {
  top: 3px;
  bottom: auto;
}

.top-groups-region .region-resize-handle::after {
  top: 0;
  bottom: 0;
  width: 2px;
}

.top-groups-region .region-resize-handle::after {
  left: 0;
}

.region-placeholder {
  display: grid;
  min-height: 100%;
  place-items: center;
  box-sizing: border-box;
  color: #80868b;
  border: 1px dashed #c7cdd1;
  border-radius: 6px;
  font-size: 13px;
  text-align: center;
}

.project-row button {
  color: #1a73e8;
  background: #fff;
  border: 1px solid #dadce0;
  border-radius: 4px;
  cursor: pointer;
  font: 12px Arial, sans-serif;
}

.top-item-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  height: 100%;
  min-height: 0;
  overflow: auto;
}

.top-item-empty {
  display: grid;
  flex: 1 1 auto;
  min-height: 0;
  place-items: center;
  color: #80868b;
  font-size: 13px;
  text-align: center;
}

.top-item-row {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 23px;
  padding: 1px 4px;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid #dadce0;
  border-radius: 4px;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

.top-item-drag-handle {
  flex: 0 0 auto;
  width: 16px;
  color: #80868b;
  cursor: grab;
  font-size: 18px;
  line-height: 1;
  text-align: center;
  user-select: none;
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 20;
}

.top-item-drag-handle:active {
  cursor: grabbing;
}

.top-item-row.is-drag-over-before {
  border-top: 3px solid #1a73e8;
}

.top-item-row.is-drag-over-after {
  border-bottom: 3px solid #1a73e8;
}

.top-item-checkbox {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin: 0;
  cursor: pointer;
}

.top-item-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 13px;
}

#workspace:not(.is-top-item-text-wrapped) .top-item-text {
  overflow: hidden;
  overflow-wrap: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.top-groups-content {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 4px;
}

#project-item-groups-content {
  overflow-y: auto;
}

.top-groups-content .region-placeholder {
  flex: 1 1 auto;
  width: 100%;
}

.top-groups-content .top-item-group-row {
  flex: 0 0 auto;
  padding: 3px 4px;
}

.top-groups-content .top-item-group-select {
  padding: 4px 6px;
}

.top-groups-content .top-item-group-rename,
.top-groups-content .top-item-group-remove {
  padding: 3px 6px;
}

.top-groups-region.is-collapsed .region-label,
.top-groups-region.is-collapsed .add-item-button {
  display: none;
}

.top-groups-region.is-collapsed .region-header {
  padding: 0 2px;
  justify-content: center;
}

.top-item-text:focus-visible {
  outline: 2px solid #1a73e8;
  outline-offset: 1px;
}

.top-item-row.is-checked .top-item-text {
  font-weight: 700;
}

#project-list {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 4px;
  min-height: 0;
  overflow: auto;
}

.project-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px;
  background: #fff;
  border: 1px solid #dadce0;
  border-radius: 4px;
}

.project-row.is-active {
  border-color: #1a73e8;
  background: #e8f0fe;
}

.project-row.is-drag-over-before {
  border-top: 3px solid #1a73e8;
}

.project-row.is-drag-over-after {
  border-bottom: 3px solid #1a73e8;
}

.project-drag-handle {
  flex: 0 0 auto;
  color: #80868b;
  cursor: grab;
  font-size: 18px;
  user-select: none;
}

.project-drag-handle:active {
  cursor: grabbing;
}

.project-open-button {
  display: grid;
  flex: 1 1 auto;
  min-width: 0;
  padding: 7px 8px;
  color: #202124 !important;
  overflow: hidden;
  background: transparent !important;
  border: 0 !important;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-open-name,
.project-computer-label {
  overflow: hidden;
  text-overflow: ellipsis;
}

.project-computer-label {
  margin-top: 2px;
  color: #5f6368;
  font-size: 11px;
  font-weight: 400;
}

.project-rename-button {
  flex: 0 0 auto;
  padding: 6px 8px;
}

.project-computer-button {
  flex: 0 0 auto;
  max-width: 145px;
  padding: 6px 8px;
}

.project-remove-button {
  flex: 0 0 auto;
  padding: 6px 8px;
  color: #b3261e !important;
}

.project-list-empty {
  display: grid;
  flex: 1 1 auto;
  min-height: 180px;
  place-items: center;
  color: #80868b;
  font-size: 13px;
  text-align: center;
}

.project-list-heading {
  padding: 6px 4px 2px;
  color: #5f6368;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.project-section-empty {
  padding: 12px 8px;
  color: #80868b;
  font-size: 13px;
}

.other-projects-section {
  margin-top: 6px;
  padding-top: 4px;
  border-top: 1px solid #dadce0;
}

.other-projects-section > summary {
  padding: 7px 4px;
  color: #5f6368;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
}

.other-projects-section > .project-row {
  margin-top: 4px;
}

.project-switcher-container {
  position: relative;
  align-self: center;
}

.project-switcher-control {
  display: flex;
  min-width: 0;
  max-width: min(42vw, 520px);
}

.current-project-name-button,
.project-switcher-button {
  color: #202124;
  background: #f1f3f4;
  border: 1px solid #dadce0;
  cursor: pointer;
  font: 600 12px Arial, sans-serif;
}

.current-project-name-button {
  min-width: 0;
  padding: 4px 7px 4px 10px;
  overflow: hidden;
  border-radius: 14px 0 0 14px;
}

.current-project-name-button:disabled {
  cursor: default;
}

.project-switcher-button {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  padding: 3px 5px 3px 4px;
  border-left: 0;
  border-radius: 0 14px 14px 0;
}

.current-project-name-button:hover:not(:disabled),
.current-project-name-button:focus-visible,
.project-switcher-button:hover,
.project-switcher-button:focus-visible {
  background: #e8f0fe;
  border-color: #a8c7fa;
  outline: none;
}

.current-project-name-button #current-project-name {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: #202124;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.project-switcher-chevron {
  flex: 0 0 auto;
  font-size: 18px;
}

.project-switcher-menu {
  position: absolute;
  z-index: 10;
  top: calc(100% + 5px);
  left: 0;
  width: min(280px, calc(100vw - 24px));
  padding: 4px;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid #dadce0;
  border-radius: 6px;
  box-shadow: 0 3px 12px rgba(60, 64, 67, 0.24);
}

.project-switcher-menu[hidden] {
  display: none;
}

.project-switcher-search {
  width: calc(100% - 8px);
  margin: 0 4px 4px;
  padding: 7px 8px;
  box-sizing: border-box;
  color: #202124;
  background: #fff;
  border: 1px solid #dadce0;
  border-radius: 4px;
  font: 13px Arial, sans-serif;
}

.project-switcher-search:focus {
  border-color: #1a73e8;
  outline: 2px solid rgba(26, 115, 232, 0.18);
}

.project-switcher-computer {
  margin: 0 4px 6px;
}

.project-switcher-computer[hidden] {
  display: none;
}

.project-switcher-companion-note {
  padding: 2px 4px 5px;
  color: var(--theme-warning);
  font-size: 12px;
}

.project-switcher-computer-select {
  width: 100%;
  padding: 6px 8px;
  box-sizing: border-box;
  color: #202124;
  background: #fff;
  border: 1px solid #dadce0;
  border-radius: 4px;
  font: 13px Arial, sans-serif;
}

.project-switcher-project-list {
  display: flex;
  flex-direction: column;
  max-height: min(280px, calc(100dvh - 110px));
  overflow-y: auto;
}

.project-switcher-project-list > * {
  flex-shrink: 0;
}

.project-switcher-list-label {
  padding: 5px 9px 3px;
  color: #5f6368;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.project-switcher-project-button,
.project-switcher-manage-button {
  width: 100%;
  padding: 8px 9px;
  color: #3c4043;
  background: transparent;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  font: 13px Arial, sans-serif;
  text-align: left;
}

.project-switcher-project-button {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-switcher-project-button.is-active {
  color: #174ea6;
  background: #e8f0fe;
  font-weight: 600;
}

.project-switcher-project-button:hover,
.project-switcher-project-button:focus-visible,
.project-switcher-manage-button:hover,
.project-switcher-manage-button:focus-visible {
  background: #f1f3f4;
  outline: none;
}

.project-switcher-project-button.is-active:hover,
.project-switcher-project-button.is-active:focus-visible {
  background: #dbe8fd;
}

.project-switcher-divider {
  height: 1px;
  margin: 4px 2px;
  background: #dadce0;
}

.project-switcher-manage-button {
  color: #1967d2;
  font-weight: 600;
}

.project-switcher-empty {
  padding: 8px 9px;
  color: #5f6368;
  font-size: 13px;
}

.account-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  color: #3c4043;
  font-size: 12px;
  white-space: nowrap;
}

.companion-status-container {
  position: relative;
}

.companion-status-button {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 4px 8px;
  color: #3c4043;
  background: #f8f9fa;
  border: 1px solid #dadce0;
  border-radius: 14px;
  cursor: pointer;
  font: 600 12px Arial, sans-serif;
}

.companion-status-button:hover,
.companion-status-button:focus-visible {
  background: #f1f3f4;
  outline: 2px solid rgba(26, 115, 232, 0.18);
}

.companion-status-dot {
  width: 9px;
  height: 9px;
  background: #9aa0a6;
  border-radius: 50%;
}

.companion-status-button.status-checking .companion-status-dot {
  background: #1a73e8;
}

.companion-status-button.status-connected .companion-status-dot {
  background: #188038;
}

.companion-status-button.status-action .companion-status-dot {
  background: #f9ab00;
}

.companion-status-button.status-error .companion-status-dot {
  background: #d93025;
}

.companion-status-panel {
  position: absolute;
  z-index: 12;
  top: calc(100% + 6px);
  right: 0;
  width: 300px;
  padding: 12px;
  box-sizing: border-box;
  color: #3c4043;
  white-space: normal;
  background: #fff;
  border: 1px solid #dadce0;
  border-radius: 8px;
  box-shadow: 0 3px 12px rgba(60, 64, 67, 0.24);
}

.companion-status-panel[hidden] {
  display: none;
}

.companion-status-panel strong {
  display: block;
  color: #202124;
  font-size: 14px;
}

.companion-status-panel p {
  margin: 6px 0 10px;
  color: #5f6368;
  font: 12px/1.4 Arial, sans-serif;
}

.companion-status-meta {
  min-height: 18px;
  margin-bottom: 10px;
  color: #5f6368;
  font: 11px/1.4 Arial, sans-serif;
}

.companion-status-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.companion-status-actions button,
.companion-status-actions a {
  width: auto;
  margin: 0;
  padding: 6px 9px;
  color: #174ea6;
  background: #e8f0fe;
  border: 1px solid #aecbfa;
  border-radius: 4px;
  cursor: pointer;
  font: 12px Arial, sans-serif;
  text-decoration: none;
}

.companion-status-actions button:disabled {
  color: #80868b;
  background: #f1f3f4;
  border-color: #dadce0;
  cursor: default;
}

.account-menu-container {
  position: relative;
}

.account-menu-button {
  display: grid;
  width: 30px;
  height: 30px;
  padding: 0;
  place-items: center;
  color: #5f6368;
  background: transparent;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}

.account-menu-button:hover,
.account-menu-button:focus-visible {
  color: #202124;
  background: #f1f3f4;
  outline: none;
}

.account-menu-button .material-symbols-outlined {
  font-size: 22px;
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

.account-menu {
  position: absolute;
  z-index: 10;
  top: calc(100% + 6px);
  right: 0;
  width: 190px;
  padding: 6px;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid #dadce0;
  border-radius: 6px;
  box-shadow: 0 3px 10px rgba(60, 64, 67, 0.2);
}

.account-menu[hidden] {
  display: none;
}

.account-menu-identity {
  padding: 7px 9px 8px;
  color: #5f6368;
  overflow: hidden;
  border-bottom: 1px solid #e8eaed;
  font-size: 12px;
  font-weight: 400;
  text-overflow: ellipsis;
}

.account-menu button,
.account-menu a {
  display: block;
  width: 100%;
  padding: 8px 9px;
  box-sizing: border-box;
  color: #3c4043;
  background: transparent;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  font: 13px Arial, sans-serif;
  text-align: left;
  text-decoration: none;
}

.account-menu button:hover,
.account-menu button:focus-visible,
.account-menu a:hover,
.account-menu a:focus-visible {
  background: #f1f3f4;
  outline: none;
}

#change-password-dialog,
#project-item-dialog,
#project-manager-dialog,
#top-item-group-dialog,
#project-item-category-dialog {
  display: flex;
  position: fixed;
  z-index: 20;
  inset: 0;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
  background: rgba(32, 33, 36, 0.35);
}

#change-password-dialog[hidden],
#project-item-dialog[hidden],
#project-manager-dialog[hidden],
#top-item-group-dialog[hidden],
#project-item-category-dialog[hidden] {
  display: none;
}

.project-manager-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(680px, 100%);
  max-height: min(720px, calc(100vh - 40px));
  padding: 22px;
  box-sizing: border-box;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 8px 28px rgba(32, 33, 36, 0.28);
}

.project-manager-card h2 {
  margin: 0;
  color: #202124;
  font-size: 22px;
}

.project-manager-card > p {
  margin: -5px 0 0;
  color: #5f6368;
  font-size: 13px;
}

.project-manager-card label {
  color: #3c4043;
  font-size: 13px;
  font-weight: 600;
}

.project-manager-card input {
  width: 100%;
  padding: 9px 10px;
  box-sizing: border-box;
  color: #202124;
  background: #fff;
  border: 1px solid #bdc1c6;
  border-radius: 4px;
  font: 14px Arial, sans-serif;
}

.project-manager-card input:focus {
  border-color: #1a73e8;
  outline: 1px solid #1a73e8;
}

.project-manager-card #project-list,
.project-manager-card #top-item-group-list,
.project-manager-card #project-item-category-list {
  min-height: 220px;
  padding: 4px;
  border: 1px solid #dadce0;
  border-radius: 5px;
}

.project-manager-window-card {
  position: fixed;
  width: min(680px, calc(100vw - 40px));
  height: min(520px, calc(100vh - 40px));
  min-width: min(460px, calc(100vw - 40px));
  min-height: min(360px, calc(100vh - 40px));
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 40px);
  overflow: auto;
  resize: none;
}

.project-manager-window-card h2 {
  cursor: move;
  touch-action: none;
  user-select: none;
}

.project-manager-window-card.is-dragging,
.project-manager-window-card.is-resizing {
  box-shadow: 0 8px 24px rgba(60, 64, 67, 0.28);
}

.project-manager-resize-handle {
  position: absolute;
  right: 3px;
  bottom: 3px;
  z-index: 2;
  width: 18px;
  height: 18px;
  cursor: nwse-resize;
  touch-action: none;
}

.project-manager-resize-handle::before {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 11px;
  height: 11px;
  content: '';
  opacity: 0.75;
  background: repeating-linear-gradient(135deg, transparent 0 2px, #5f6368 2px 3px);
}

#top-item-group-list,
#project-item-category-list {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 4px;
  overflow: auto;
}

.top-item-group-card {
  position: fixed;
  width: min(680px, calc(100vw - 40px));
  height: min(520px, calc(100vh - 40px));
  min-width: min(460px, calc(100vw - 40px));
  min-height: min(360px, calc(100vh - 40px));
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 40px);
  overflow: auto;
  resize: both;
}

.top-item-group-card h2 {
  cursor: move;
  touch-action: none;
  user-select: none;
}

.top-item-group-card.is-dragging {
  box-shadow: 0 8px 24px rgba(60, 64, 67, 0.28);
}

.top-item-group-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px;
  background: #fff;
  border: 1px solid #dadce0;
  border-radius: 4px;
}

.top-item-group-drag-handle {
  flex: 0 0 auto;
  color: #80868b;
  cursor: grab;
  font-size: 18px;
  user-select: none;
}

.top-item-group-drag-handle:active {
  cursor: grabbing;
}

.top-item-group-row.is-active {
  border-color: #1a73e8;
  background: #e8f0fe;
  box-shadow: inset 3px 0 0 #1a73e8;
}

.top-item-group-row.is-drag-over-before {
  border-top: 3px solid #1a73e8;
}

.top-item-group-row.is-drag-over-after {
  border-bottom: 3px solid #1a73e8;
}

.top-item-group-row button {
  color: #1a73e8;
  background: #fff;
  border: 1px solid #dadce0;
  border-radius: 4px;
  cursor: pointer;
  font: 12px Arial, sans-serif;
}

.top-item-group-select {
  flex: 1 1 auto;
  min-width: 0;
  padding: 7px 8px;
  overflow: hidden;
  color: #202124 !important;
  background: transparent !important;
  border-color: transparent !important;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.top-item-group-rename,
.top-item-group-remove {
  flex: 0 0 auto;
  padding: 6px 8px;
}

.top-item-group-remove {
  color: #b3261e !important;
}

.project-manager-message {
  min-height: 18px;
  margin: 0 !important;
  color: #b3261e !important;
  font-size: 12px !important;
}

.assist-error-reference {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 10000;
  max-width: min(420px, calc(100vw - 36px));
  margin: 0;
  padding: 10px 14px;
  border: 1px solid #b45309;
  border-radius: 6px;
  background: #fff7ed;
  color: #7c2d12;
  box-shadow: 0 4px 14px rgb(0 0 0 / 20%);
  font-size: 0.9rem;
}

.project-manager-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.project-manager-actions button {
  padding: 8px 11px;
  color: #1a73e8;
  background: #fff;
  border: 1px solid #dadce0;
  border-radius: 4px;
  cursor: pointer;
  font: 13px Arial, sans-serif;
}

.project-manager-actions .primary-button {
  color: #fff;
  background: #1a73e8;
  border-color: #1a73e8;
}

.project-manager-actions button:hover,
.project-manager-actions button:focus-visible {
  background: #f1f3f4;
  outline: none;
}

.project-manager-actions .primary-button:hover,
.project-manager-actions .primary-button:focus-visible {
  background: #185abc;
}

.project-item-card {
  display: flex;
  position: fixed;
  flex-direction: column;
  width: min(620px, calc(100vw - 40px));
  height: min(620px, calc(100vh - 40px));
  min-width: min(420px, calc(100vw - 40px));
  min-height: min(460px, calc(100vh - 40px));
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 40px);
  overflow: auto;
  resize: both;
}

.project-item-card h2 {
  cursor: move;
  touch-action: none;
  user-select: none;
}

.project-item-card.is-dragging {
  box-shadow: 0 8px 24px rgba(60, 64, 67, 0.28);
}

.project-item-card label {
  display: block;
  margin-top: 12px;
}

.project-item-card input {
  width: 100%;
  box-sizing: border-box;
}

.project-item-file-list {
  flex: 1 1 auto;
  min-height: 120px;
  max-height: none;
  margin-top: 6px;
  overflow: auto;
  border: 1px solid #dadce0;
  border-radius: 4px;
  background: #fff;
}

.project-item-file-list button {
  display: block;
  width: 100%;
  margin-top: 0;
  padding: 3px 9px;
  overflow: hidden;
  color: #202124;
  background: #fff;
  border: 0;
  border-bottom: 1px solid #f1f3f4;
  cursor: pointer;
  font: 12px Arial, sans-serif;
  font-weight: 400;
  line-height: 16px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-item-file-list button:hover,
.project-item-file-list button:focus-visible {
  background: #e8f0fe;
  outline: none;
}

.project-item-file-tree-root {
  border-bottom: 1px solid #e8eaed;
}

.project-item-file-tree-root:last-child {
  border-bottom: 0;
}

.project-item-file-tree-root > summary,
.project-item-file-tree-folder > summary {
  padding: 4px 8px;
  overflow: hidden;
  color: #3c4043;
  cursor: pointer;
  font: 600 12px Arial, sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-item-file-tree-folder {
  margin-left: 12px;
}

.project-item-file-tree-folder > summary {
  font-weight: 400;
}

.project-item-file-tree-folder > div,
.project-item-file-tree-root > div {
  min-width: 0;
}

.project-item-file-empty {
  padding: 8px 9px;
  color: #5f6368;
  font-size: 12px;
}

.top-item-context-menu {
  position: fixed;
  z-index: 1001;
  min-width: 132px;
  padding: 4px;
  background: #fff;
  border: 1px solid #dadce0;
  border-radius: 6px;
  box-shadow: 0 3px 10px rgba(60, 64, 67, 0.2);
}

.top-item-context-menu[hidden] {
  display: none;
}

.top-item-context-menu button {
  width: 100%;
  padding: 7px 9px;
  color: #3c4043;
  background: transparent;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  font: 13px Arial, sans-serif;
  text-align: left;
}

.top-item-context-menu button:hover,
.top-item-context-menu button:focus-visible {
  background: #f1f3f4;
  outline: none;
}

.project-folder-file-submenu {
  position: relative;
}

.project-folder-file-submenu-trigger::after {
  float: right;
  margin-left: 18px;
  content: '\203a';
}

.project-folder-file-submenu-panel {
  display: none;
  position: absolute;
  z-index: 1;
  top: -5px;
  left: calc(100% - 1px);
  min-width: 180px;
  padding: 4px;
  background: #fff;
  border: 1px solid #dadce0;
  border-radius: 6px;
  box-shadow: 0 3px 10px rgba(60, 64, 67, 0.2);
}

.top-item-context-menu.opens-submenus-left .project-folder-file-submenu-panel {
  right: calc(100% - 1px);
  left: auto;
}

.project-folder-file-submenu:hover > .project-folder-file-submenu-panel,
.project-folder-file-submenu:focus-within > .project-folder-file-submenu-panel,
.project-folder-file-submenu.is-open > .project-folder-file-submenu-panel {
  display: block;
}

.project-item-context-menu-divider {
  height: 1px;
  margin: 4px 5px;
  background: #dadce0;
}

.top-item-color-label {
  display: block;
  padding: 7px 9px 4px;
  color: #5f6368;
  font-size: 12px;
}

.top-item-color-palette {
  display: grid;
  grid-template-columns: repeat(6, 28px);
  gap: 5px;
  padding: 2px 6px 6px;
}

.top-item-context-menu .top-item-color-button {
  display: grid;
  position: relative;
  width: 28px;
  height: 28px;
  padding: 0;
  place-items: center;
  border: 1px solid #bdc1c6;
  border-radius: 5px;
  font: 700 11px/1 Arial, sans-serif;
}

.top-item-context-menu .top-item-color-button:hover,
.top-item-context-menu .top-item-color-button:focus-visible {
  border-color: #1a73e8;
  outline: 2px solid rgba(26, 115, 232, 0.2);
}

.top-item-context-menu .top-item-color-button.is-selected {
  border-color: #1a73e8;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1a73e8;
}

.top-item-context-menu .top-item-color-button.is-selected::after {
  position: absolute;
  right: -4px;
  bottom: -5px;
  display: grid;
  width: 12px;
  height: 12px;
  color: #fff;
  background: #1a73e8;
  border: 1px solid #fff;
  border-radius: 50%;
  content: '✓';
  font: 700 9px/11px Arial, sans-serif;
  place-items: center;
}

.color-theme-reset {
  margin-top: 0;
}

.project-folder-picker.has-picker-color,
.project-folder-picker.has-picker-color .project-folder-browser-toolbar,
.project-folder-picker.has-picker-color .project-folder-browser-body,
.project-folder-picker.has-picker-color .project-folder-tree-pane,
.project-folder-picker.has-picker-color .project-folder-files-pane,
.project-folder-picker.has-picker-color .project-folder-pane-content,
.project-folder-picker.has-picker-color .project-folder-files-content {
  color: var(--project-folder-picker-text);
  background-color: var(--project-folder-picker-background);
}

.project-folder-picker.has-picker-color .project-folder-tree-name,
.project-folder-picker.has-picker-color .project-folder-expander,
.project-folder-picker.has-picker-color .project-folder-file,
.project-folder-picker.has-picker-color .project-folder-file-name,
.project-folder-picker.has-picker-color .project-folder-status {
  color: var(--project-folder-picker-text);
}

.password-card h2 {
  margin: 0 0 8px;
  color: #202124;
  font-size: 22px;
}

.password-card .password-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 22px;
}

.password-card .password-actions button {
  width: auto;
  margin: 0;
}

.password-card .cancel-button {
  color: #3c4043;
  background: #f1f3f4;
}

.control-region.is-collapsed .region-content,
.control-region.is-collapsed .region-label,
.control-region.is-collapsed .region-resize-handle {
  display: none;
}

.control-region.is-collapsed .region-header {
  justify-content: center;
  padding: 0 5px;
  border-bottom: 0;
}

.top-region.is-collapsed .region-header {
  justify-content: flex-start;
}

.top-region.is-collapsed {
  height: 38px;
}

#workspace:has(.top-region.is-collapsed) .top-groups-region {
  height: 0;
  visibility: hidden;
}

.bottom-region.is-collapsed {
  height: 1px;
}

.bottom-region .region-header,
.bottom-region.is-collapsed .region-header {
  position: absolute;
  z-index: 6;
  right: 6px;
  flex: none;
  width: 30px;
  height: 30px;
  padding: 0;
  justify-content: center;
  background: #fff;
  border: 1px solid #dadce0;
  border-radius: 4px;
  box-sizing: border-box;
}

.bottom-region:not(.is-collapsed) .region-header {
  top: 6px;
}

.bottom-region.is-collapsed .region-header {
  top: -30px;
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
}

.bottom-region .region-header .region-toggle {
  width: 28px;
  height: 28px;
}

#workspace:has(.top-groups-region.is-collapsed) {
  --top-groups-current-size: var(--top-groups-collapsed-size);
}

#workspace .top-groups-region.is-collapsed .region-header {
  padding: 0;
}

.top-groups-region.is-collapsed .region-toggle {
  width: 18px;
  height: 28px;
  border-right: 0;
  border-left: 0;
  border-radius: 0;
}

.top-groups-region.is-collapsed .region-toggle .material-symbols-outlined {
  width: 16px;
  font-size: 18px;
}

#center-region {
  grid-area: editor;
  display: flex;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

#container {
  --editor-menu-height: 34px;
  flex: 1 1 auto;
  position: relative;
  width: auto;
  height: 100%;
  min-width: 0;
  min-height: 0;
  background: #ccc;
  overflow: hidden;
}

#project-notes-resizer {
  position: relative;
  z-index: 4;
  flex: 0 0 9px;
  width: 9px;
  margin-left: -4px;
  cursor: col-resize;
  touch-action: none;
}

#project-notes-resizer::after,
#project-notes-column-divider::after {
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 4px;
  width: 1px;
  background: #9aa0a6;
  content: '';
  opacity: 0;
}

#project-notes-resizer:hover::after,
#project-notes-resizer:focus-visible::after,
#center-region.is-resizing-project-notes #project-notes-resizer::after,
#project-notes-column-divider:hover::after,
#project-notes-column-divider:focus-visible::after,
#project-notes-list.is-resizing-columns #project-notes-column-divider::after {
  opacity: 1;
}

#project-notes-resizer:focus-visible,
#project-notes-column-divider:focus-visible {
  outline: none;
}

#project-notes-panel {
  --project-notes-name-column-width: 110px;
  display: flex;
  position: relative;
  flex: 0 0 320px;
  flex-direction: column;
  width: 320px;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
  overflow: hidden;
  color: #202124;
  background: #eef3f9;
  border-left: 1px solid #c8d2df;
}

#center-region.is-project-notes-collapsed #project-notes-resizer {
  display: none;
}

#center-region.is-project-notes-collapsed #project-notes-panel {
  flex-basis: 24px;
  width: 24px;
}

#project-notes-toolbar {
  display: flex;
  flex: 0 0 34px;
  align-items: center;
  justify-content: space-between;
  height: 34px;
  padding-left: 6px;
  box-sizing: border-box;
  background: #f8f9fa;
  border-bottom: 1px solid #dadce0;
}

#project-notes-toolbar button {
  min-height: 26px;
  border: 1px solid #c5c9ce;
  border-radius: 4px;
  color: #3c4043;
  background: #fff;
  cursor: pointer;
}

#toggle-project-notes-button {
  display: inline-flex;
  flex: 0 0 24px;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 28px;
  padding: 0;
  border-color: #8ab4f8 !important;
  color: #1967d2 !important;
}

#toggle-project-notes-button .material-symbols-outlined {
  font-size: 19px;
}

#center-region.is-project-notes-collapsed #project-notes-toolbar {
  width: 24px;
  padding: 0;
  border-bottom: 0;
}

#center-region.is-project-notes-collapsed #add-project-note-button,
#center-region.is-project-notes-collapsed #project-notes-list,
#center-region.is-project-notes-collapsed #project-notes-status {
  display: none;
}

#project-notes-list {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: auto;
}

#project-notes-column-divider {
  position: absolute;
  z-index: 3;
  top: 0;
  bottom: 0;
  left: var(--project-notes-name-column-width);
  width: 9px;
  transform: translateX(-4px);
  cursor: col-resize;
  touch-action: none;
}

.project-note-row {
  display: grid;
  grid-template-columns: var(--project-notes-name-column-width) minmax(80px, 1fr);
  min-width: 0;
  color: #202124;
  background: #fff;
  border-bottom: 1px solid #e8eaed;
  cursor: copy;
  font-size: 12px;
  user-select: none;
}

.project-note-cell {
  min-width: 0;
  min-height: 26px;
  padding: 4px 7px;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-note-name-cell {
  display: flex;
  align-items: center;
  gap: 3px;
}

.project-note-value-cell {
  border-left: 1px solid #e8eaed;
}

.project-note-value-cell.is-selected {
  background: #ffe2a7;
  box-shadow: inset 0 0 0 2px var(--theme-accent);
}

.project-note-drag-handle {
  flex: 0 0 auto;
  color: #80868b;
  cursor: grab;
  font: 18px/1 Arial, sans-serif;
}

.project-note-drag-handle:active { cursor: grabbing; }
.project-note-row.is-drag-over-before { border-top: 3px solid #1a73e8; }
.project-note-row.is-drag-over-after { border-bottom: 3px solid #1a73e8; }

#project-notes-status {
  position: absolute;
  z-index: 4;
  top: 34px;
  right: 0;
  left: 0;
  margin: 0;
  padding: 8px;
  color: #5f6368;
  background: #eef3f9;
  font-size: 12px;
}

#project-notes-status:empty { display: none; }

#project-note-dialog {
  position: fixed;
  z-index: 30;
  inset: 0;
  background: rgba(32, 33, 36, 0.42);
}

#project-note-dialog[hidden] { display: none; }

.project-note-dialog-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(440px, calc(100vw - 32px));
  padding: 18px;
  box-sizing: border-box;
  transform: translate(-50%, -50%);
  color: #202124;
  background: #fff;
  border: 1px solid #dadce0;
  border-radius: 8px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
}

.project-note-dialog-card h2 {
  margin: 0 0 14px;
  font-size: 18px;
}

#project-note-form {
  display: grid;
  gap: 7px;
}

#project-note-form input,
#project-note-form textarea {
  width: 100%;
  padding: 7px;
  box-sizing: border-box;
  border: 1px solid #bdc1c6;
  border-radius: 4px;
  font: 13px/1.4 Arial, sans-serif;
}

#project-note-form textarea {
  min-height: 120px;
  resize: vertical;
}

#project-note-dialog-message {
  min-height: 18px;
  margin: 0;
  color: #b3261e;
  font-size: 12px;
}

.project-note-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

#editor,
#overlay {
  position: absolute;
  top: var(--editor-menu-height);
  left: 0;
  margin: 0;
  padding: 12px;
  box-sizing: border-box;
  border: 0;
  font: 14px/1.5 Arial, sans-serif;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: break-word;
  tab-size: 8;
  -webkit-text-size-adjust: 100%;
}

#editor {
  z-index: 1;
  width: 100%;
  height: calc(100% - var(--editor-menu-height));
  resize: none;
  overflow: auto;
  outline: none;
  color: #111;
  background: #ccc;
  caret-color: #000;
}

#editor::placeholder {
  color: #777;
}

#editor-menu {
  display: flex;
  position: absolute;
  z-index: 3;
  top: 0;
  right: 0;
  left: 0;
  align-items: center;
  height: var(--editor-menu-height);
  padding: 0 6px;
  box-sizing: border-box;
  background: #f8f9fa;
  border-bottom: 1px solid #dadce0;
}

#editor-menu button {
  padding: 5px 9px;
  color: #3c4043;
  background: #fff;
  border: 1px solid #dadce0;
  border-radius: 4px;
  cursor: pointer;
  font: 12px Arial, sans-serif;
}

#editor-menu button:hover,
#editor-menu button:focus-visible {
  background: #f1f3f4;
  outline: none;
}

#editor-menu #editor-copy-button {
  color: #155724;
  background: var(--theme-success-soft);
  border-color: #8fc99e;
}

#editor-menu #editor-copy-button:hover,
#editor-menu #editor-copy-button:focus-visible {
  color: #0f4d20;
  background: #c7ebd0;
  border-color: var(--theme-success);
  outline: 2px solid var(--theme-success);
  outline-offset: -2px;
}

#editor-menu #editor-copy-button:active:not(:disabled) {
  background: #b4dfbf;
}

#editor-menu #editor-copy-button:disabled {
  color: var(--theme-faint);
  background: var(--theme-surface-soft);
  border-color: var(--theme-border);
  cursor: default;
}

#editor-copy-button.is-copy-success {
  animation: editor-copy-success 600ms ease-out;
}

@keyframes editor-copy-success {
  0% {
    color: var(--theme-accent-text);
    background: var(--theme-accent-soft);
    border-color: var(--theme-accent);
    box-shadow: inset 0 0 0 1px var(--theme-accent);
  }
  100% {
    box-shadow: inset 0 0 0 1px transparent;
  }
}

.editor-copy-status {
  min-width: 0;
  margin-left: 6px;
  color: var(--theme-muted);
  font: 11px Arial, sans-serif;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  #editor-copy-button.is-copy-success {
    animation: none;
    color: var(--theme-accent-text);
    background: var(--theme-accent-soft);
    border-color: var(--theme-accent);
  }
}

.editor-format-tools {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  align-items: center;
  gap: 3px;
  margin-left: 6px;
}

.editor-format-group {
  display: flex;
  align-items: center;
  gap: 2px;
  padding-left: 4px;
  border-left: 1px solid #dadce0;
}

.editor-format-spacer-tools {
  margin-left: auto;
}

#editor-menu .editor-format-button {
  display: grid;
  width: 27px;
  height: 27px;
  padding: 0;
  place-items: center;
}

.editor-format-button svg {
  width: 17px;
  height: 17px;
  overflow: visible;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

#overlay {
  z-index: 2;
  overflow: hidden;
  color: transparent;
  background: transparent;
  pointer-events: none;
  user-select: none;
}

.misspelled {
  color: transparent;
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: #d93025;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
}

#popup {
  position: fixed;
  z-index: 1000;
  min-width: 180px;
  max-width: min(320px, calc(100vw - 16px));
  padding: 4px 0;
  overflow: hidden;
  color: #202124;
  background: #fff;
  border: 1px solid #dadce0;
  border-radius: 8px;
  box-shadow:
    0 2px 6px rgba(60, 64, 67, 0.16),
    0 8px 24px rgba(60, 64, 67, 0.16);
  font: 13px/1.4 Arial, sans-serif;
}

#popup[hidden] {
  display: none;
}

.popup-primary {
  display: flex;
  align-items: center;
  min-height: 34px;
  padding: 2px 5px 2px 0;
}

.suggestion {
  flex: 1;
  align-self: stretch;
  min-width: 0;
  padding: 7px 12px;
  overflow: hidden;
  color: #202124;
  background: transparent;
  border: 0;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  font: 14px/1.4 Arial, sans-serif;
}

.suggestion:hover,
.suggestion:focus-visible,
.ignore-button:hover,
.ignore-button:focus-visible,
.dictionary-button:hover,
.dictionary-button:focus-visible {
  background: #f1f3f4;
  outline: none;
}

.no-suggestion {
  flex: 1;
  padding: 7px 12px;
  color: #777;
  font-size: 13px;
}

.ignore-button {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  padding: 0;
  color: #5f6368;
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  font: 18px/1 Arial, sans-serif;
}

.dictionary-button {
  display: block;
  width: 100%;
  padding: 8px 12px;
  color: #3c4043;
  background: transparent;
  border: 0;
  border-top: 1px solid #eee;
  text-align: left;
  cursor: pointer;
  font: 13px/1.4 Arial, sans-serif;
}

/* Shared page themes. Component-specific saved colors remain authoritative. */
body {
  color: var(--theme-text-soft);
  background: var(--theme-surface);
}

#login-screen,
#workspace {
  background: var(--theme-page);
}

.login-card,
.control-region,
.bottom-project-pane,
.bottom-folders-pane,
.project-folder-picker,
.top-item-row,
.project-row,
.project-note-row,
#project-notes-panel,
#project-notes-status {
  color: var(--theme-text-soft);
  background: var(--theme-surface);
  border-color: var(--theme-border);
}

.login-card h1,
.login-card input,
.top-item-text,
.current-project-name-button,
.project-switcher-button,
.current-project-name-button #current-project-name,
.project-note-dialog-card,
.project-note-dialog-card input,
.project-note-dialog-card textarea {
  color: var(--theme-text);
}

.login-card p,
.region-header,
.region-label,
.project-list-heading,
.project-computer-label,
.account-menu-identity {
  color: var(--theme-muted);
}

.login-card label,
.project-switcher-project-button,
.project-switcher-manage-button,
.account-menu button,
.account-menu a,
#editor-menu button,
#project-notes-toolbar button,
.top-item-context-menu button {
  color: var(--theme-text-soft);
}

.login-card,
.login-card input,
.project-switcher-menu,
.project-switcher-search,
.account-menu,
.companion-status-panel,
.top-item-context-menu,
.project-folder-file-submenu-panel,
.project-folder-file-description-popup,
#popup,
.project-note-dialog-card,
.project-item-card,
.project-manager-card,
.top-item-group-card {
  background: var(--theme-surface);
  border-color: var(--theme-border);
  box-shadow: 0 3px 12px var(--theme-shadow);
}

.login-card input,
.project-note-dialog-card input,
.project-note-dialog-card textarea,
.project-switcher-search,
.project-switcher-computer-select,
.project-folder-file-description-popup textarea,
.account-menu-theme select,
.project-item-card input,
.project-item-card textarea,
.project-item-card select,
.project-manager-card input,
.top-item-group-card input,
.top-item-group-card textarea {
  color: var(--theme-text);
  background: var(--theme-surface);
  border-color: var(--theme-border-strong);
}

.login-card input:focus,
.project-switcher-search:focus,
.project-folder-file-description-popup textarea:focus,
.account-menu-theme select:focus {
  border-color: var(--theme-accent);
  outline-color: color-mix(in srgb, var(--theme-accent) 28%, transparent);
}

.login-card button,
.primary-button,
.project-folder-file-description-actions .primary-button {
  color: #ffffff;
  background: var(--theme-accent);
  border-color: var(--theme-accent);
}

.login-card button:hover,
.login-card button:focus-visible,
.primary-button:hover,
.primary-button:focus-visible {
  background: var(--theme-accent-hover);
}

.top-region,
.top-groups-region,
.bottom-region,
.region-header,
.project-folder-browser-toolbar,
#editor-menu,
#project-notes-toolbar,
#project-notes-panel,
.project-note-row,
.project-note-value-cell {
  border-color: var(--theme-border);
}

.region-header,
.project-folder-browser-toolbar,
#editor-menu,
#project-notes-toolbar {
  background: var(--theme-surface);
}

#project-notes-panel,
#project-notes-status {
  background: var(--theme-panel);
}

.project-note-row {
  background: var(--theme-surface);
}

#project-notes-toolbar button {
  background: var(--theme-surface-soft);
}

.top-common-pane,
.top-groups-region,
.bottom-project-groups-pane {
  background: var(--theme-panel);
}

.top-groups-region .region-header,
.bottom-project-groups-pane .bottom-pane-heading {
  background: var(--theme-panel-alt);
}

.bottom-split {
  background: var(--theme-panel);
}

.current-project-name-button,
.project-switcher-button,
.project-folder-view-toggle button,
#editor-menu button,
.project-folder-file-description-actions button {
  background: var(--theme-surface-soft);
  border-color: var(--theme-border);
}

.region-toggle,
.project-folder-collapse-toggle,
.account-menu-button,
.project-folder-expander,
.project-folder-file-drag-handle,
.top-item-drag-handle {
  color: var(--theme-muted);
}

.region-toggle:hover,
.region-toggle:focus-visible,
.project-folder-collapse-toggle:hover,
.project-folder-collapse-toggle:focus-visible,
.account-menu-button:hover,
.account-menu-button:focus-visible,
.project-switcher-project-button:hover,
.project-switcher-project-button:focus-visible,
.project-switcher-manage-button:hover,
.project-switcher-manage-button:focus-visible,
.account-menu button:hover,
.account-menu button:focus-visible,
.account-menu a:hover,
.account-menu a:focus-visible,
#editor-menu button:hover,
#editor-menu button:focus-visible,
.top-item-context-menu button:hover,
.top-item-context-menu button:focus-visible,
.suggestion:hover,
.suggestion:focus-visible,
.ignore-button:hover,
.ignore-button:focus-visible,
.dictionary-button:hover,
.dictionary-button:focus-visible {
  color: var(--theme-text);
  background: var(--theme-surface-soft);
}

.current-project-name-button:hover:not(:disabled),
.current-project-name-button:focus-visible,
.project-switcher-button:hover,
.project-switcher-button:focus-visible,
.project-switcher-project-button.is-active,
.project-folder-view-toggle button[aria-pressed="true"],
.project-folder-tree-name.is-selected,
.project-folder-file.is-selected,
.project-row.is-active {
  color: var(--theme-accent-text);
  background: var(--theme-accent-soft);
  border-color: var(--theme-accent);
}

.project-folder-tree-name,
.project-folder-file,
.project-folder-file-name,

.project-folder-file-description-preview {
  color: var(--theme-text-soft);
}

.project-folder-tree-pane,
.project-folder-files-pane,
.project-folder-pane-content,
.project-folder-files-content {
  background: var(--theme-surface);
}

.project-folder-view-toggle button:disabled,
.add-external-focus-file:disabled,
.project-folder-home:disabled,
.project-items-backticks-toggle:disabled {
  color: var(--theme-faint);
  background: var(--theme-surface-soft);
}

.project-folder-tree-name:hover,
.project-folder-file:hover,
.project-folder-file-description-preview:hover,
.project-folder-file-description-preview:focus-visible {
  background: var(--theme-surface-soft);
}

.top-item-pane-divider::after,
.project-folder-files-divider::after,
.project-folders-divider::after,
.project-item-groups-divider::after,
.region-resize-handle::after,
#project-notes-resizer::after,
#project-notes-column-divider::after {
  background: var(--theme-border-strong);
}

#container,
#editor {
  color: var(--theme-editor-text);
  background: var(--theme-editor);
  caret-color: var(--theme-editor-text);
}

#editor::placeholder,
.no-suggestion {
  color: var(--theme-faint);
}

#popup,
.dictionary-button,
.project-folder-file-description-popup,
.project-folder-file-description-popup textarea {
  color: var(--theme-text);
}

.dictionary-button,
.account-menu-identity,
.account-menu-theme {
  border-color: var(--theme-border);
}

.project-folder-file-action-status {
  color: var(--theme-accent-text);
  background: var(--theme-accent-soft);
  border-color: var(--theme-accent);
}

.project-folder-file-action-status.is-error,
.login-card .login-message {
  color: var(--theme-danger);
  background: var(--theme-danger-soft);
  border-color: var(--theme-danger);
}

.account-menu {
  width: 230px;
}

.account-menu-theme {
  display: block;
  padding: 8px 9px 10px;
  color: var(--theme-muted);
  border-bottom: 1px solid var(--theme-border);
  font-size: 11px;
  font-weight: 600;
}

.account-menu-theme span {
  display: block;
  margin-bottom: 5px;
}

.account-menu-theme select {
  width: 100%;
  padding: 6px 7px;
  box-sizing: border-box;
  border: 1px solid var(--theme-border-strong);
  border-radius: 4px;
  font: 12px Arial, sans-serif;
}