:root {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #c6c6c6;
  background: #1b1b1b;
  font-size: 13px;
  color-scheme: dark;
  --gold: #d8b45c;
  --line: #343434;
  --sidebar: 305px;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  overflow: hidden;
}
button,
input,
select,
textarea {
  font: inherit;
}
button {
  color: inherit;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 6px 10px;
  cursor: pointer;
}
button:hover {
  background: #2a2a2a;
  color: #eee;
}
button:disabled {
  opacity: 0.4;
  cursor: wait;
}
input,
textarea,
select {
  color: #d8d8d8;
  background: #202020;
  border: 1px solid #393939;
  border-radius: 4px;
  padding: 8px 10px;
  outline: none;
}
input:focus,
textarea:focus,
select:focus {
  border-color: #ad9250;
}
button:focus-visible {
  outline: 2px solid var(--gold);
}
textarea {
  width: 100%;
  min-height: 140px;
  resize: vertical;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12px;
  line-height: 1.8;
}
select {
  cursor: pointer;
}
.titlebar {
  height: 43px;
  border-bottom: 1px solid #252525;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px 0 88px;
  -webkit-app-region: drag;
  background: #191919;
}
.titlebar strong {
  font-size: 13px;
  font-weight: 600;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.workspace-title {
  font-weight: 600;
}
.title-end {
  font-size: 9px;
  letter-spacing: 1.5px;
  color: #696969;
}
.workspace {
  display: grid;
  grid-template-columns: var(--sidebar) 4px minmax(0, 1fr);
  height: calc(100vh - 71px);
}
aside {
  display: flex;
  flex-direction: column;
  background: #1c1c1c;
  overflow: hidden;
}
.sidebar-resizer {
  cursor: col-resize;
  border-left: 1px solid var(--line);
}
.sidebar-resizer:hover {
  background: var(--gold);
}
.sidebar-heading {
  display: flex;
  align-items: center;
  padding: 9px 10px;
  height: 39px;
  gap: 3px;
}
.sidebar-heading strong {
  margin-right: auto;
  font-weight: 500;
}
.sidebar-heading button {
  border: 0;
  padding: 1px 5px;
  font-size: 18px;
  color: #999;
}
.search-box {
  padding: 6px 10px 12px;
}
.search-box input {
  width: 100%;
  font-size: 11px;
  padding: 7px 9px;
  background: #191919;
}
nav {
  flex: 1;
  overflow: auto;
}
.tree-row {
  height: 29px;
  display: flex;
  align-items: center;
  padding-right: 6px;
  gap: 3px;
  white-space: nowrap;
}
.tree-row:hover {
  background: #252525;
}
.tree-row.selected {
  background: #2c2c2c;
  box-shadow: inset 2px 0 var(--gold);
}
.tree-row button {
  border: 0;
  border-radius: 0;
  padding: 4px 3px;
  line-height: 20px;
  background: none;
}
.tree-label {
  flex: 1;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tree-row .more {
  color: #999;
  width: 24px;
}
.tree-row .arrow {
  color: #a0a0a0;
  width: 18px;
}
.method {
  font-family: inherit;
  font-size: 10px;
  font-weight: 600;
  margin-right: 6px;
  color: #72c994;
}
.method.POST {
  color: #69afd0;
}
.method.PUT {
  color: #d9b85b;
}
.method.PATCH {
  color: #b7a0db;
}
.method.DELETE {
  color: #e38784;
}
.folder-row {
  color: #bdbdbd;
}
.sidebar-bottom {
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  padding: 12px;
  text-align: left;
  display: flex;
  justify-content: space-between;
}
main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.collection-toolbar {
  height: 50px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  gap: 10px;
}
.collection-title {
  font-weight: 600;
  border: 0;
  font-size: 14px;
  padding: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.toolbar-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}
.toolbar-actions button,
.toolbar-actions select {
  padding: 5px 8px;
  font-size: 11px;
}
.toolbar-actions select {
  max-width: 140px;
}
.work-tabs {
  display: flex;
  height: 40px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--line);
  gap: 3px;
  padding-left: 12px;
  overflow: auto;
}
.work-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid #303030;
  border-bottom: 0;
  border-radius: 7px 7px 0 0;
  background: #25282a;
  min-width: 115px;
  max-width: 235px;
  flex-shrink: 0;
  cursor: pointer;
}
.work-tab.active {
  background: #1b1b1b;
  border-color: #484848;
  position: relative;
  color: #e4e4e4;
}
.work-tab.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gold);
}
.work-tab .label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}
.work-tab .close {
  border: 0;
  margin-left: auto;
  padding: 2px;
  color: #888;
}
.dirty-dot {
  color: #d8a13d;
  font-size: 10px;
}
#view {
  flex: 1;
  overflow: auto;
  min-height: 0;
}
.view-inner {
  padding: 0 22px 24px;
}
.subtabs {
  display: flex;
  align-items: center;
  gap: 22px;
  border-bottom: 1px solid #303030;
  min-height: 52px;
  flex-shrink: 0;
  overflow-x: auto;
}
.subtabs button {
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 17px 0 13px;
  white-space: nowrap;
  font-size: 12px;
  color: #999;
}
.subtabs button.active {
  border-color: var(--gold);
  color: #dedede;
}
.subtabs .right {
  margin-left: auto;
  color: #b9b9b9;
}
.overview-grid {
  display: grid;
  grid-template-columns: minmax(250px, 0.9fr) minmax(320px, 1.3fr);
  gap: 45px;
  padding-top: 24px;
}
h1 {
  font-size: 21px;
  font-weight: 600;
  margin: 0 0 30px;
  color: #d0d0d0;
}
h2 {
  font-size: 19px;
  font-weight: 600;
  color: #d2d2d2;
  margin: 18px 0;
}
h3 {
  font-size: 15px;
  font-weight: 500;
}
.overview-item {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin: 26px 0;
}
.overview-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border: 1px solid #34404a;
  border-radius: 9px;
  background: #242a2e;
  color: #85badb;
  font-size: 22px;
}
.overview-item:nth-child(3n) .overview-icon {
  color: var(--gold);
  background: #2e2a20;
  border-color: #423b25;
}
.overview-item:nth-child(4n) .overview-icon {
  color: #71cb9b;
  background: #202e26;
  border-color: #2a4435;
}
.overview-item h3 {
  margin: 2px 0 9px;
  font-size: 13px;
  font-weight: 600;
}
.overview-item p {
  font-size: 12px;
  color: #a8a8a8;
  margin: 5px 0;
  line-height: 1.7;
  overflow-wrap: anywhere;
}
.text-button {
  border: 0;
  color: #88bce7;
  padding: 0;
  text-align: left;
}
.documentation {
  font-size: 13px;
  line-height: 1.85;
}
.documentation h2 {
  margin: 0 0 13px;
}
.documentation h3 {
  font-size: 20px;
  font-weight: 600;
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
  margin: 20px 0 10px;
}
.documentation ul {
  padding-left: 23px;
}
.documentation li {
  margin: 6px 0;
}
.documentation p {
  white-space: pre-wrap;
}
.muted {
  color: #888;
  font-size: 12px;
  line-height: 1.7;
}
.hint {
  padding: 12px 0;
  color: #888;
  font-size: 11px;
  line-height: 1.7;
}
.page-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 23px 0 16px;
  gap: 10px;
}
.page-heading h2 {
  margin: 0;
}
.primary {
  background: #b99642;
  border-color: #c2a34f;
  color: #171717;
  font-weight: 600;
}
.primary:hover {
  background: #d0ae58;
  color: #171717;
}
.danger {
  color: #dc8c82;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 18px 0;
  max-width: 650px;
  font-size: 12px;
}
.field > span {
  color: #a9a9a9;
}
.inline-fields {
  display: flex;
  gap: 16px;
}
.inline-fields .field {
  flex: 1;
}
.kv-wrap {
  overflow-x: auto;
  width: 100%;
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  table-layout: fixed;
}
th {
  text-align: left;
  color: #929292;
  font-weight: 400;
  padding: 10px 8px;
  border-bottom: 1px solid var(--line);
}
td {
  border-bottom: 1px solid #2e2e2e;
  padding: 3px 5px;
}
td input:not([type="checkbox"]),
td select {
  border: 1px solid transparent;
  background: transparent;
  width: 100%;
  padding: 7px 3px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
}
td input:focus {
  border-color: #675c3b;
  background: #202020;
}
.checkcell,
th:first-child,
th:last-child {
  width: 32px;
}
.checkcell input {
  accent-color: var(--gold);
}
.checkcell button {
  border: 0;
  padding: 1px 5px;
  color: #858585;
}
.add-row {
  padding: 13px 6px;
  font-size: 12px;
}
.request-view {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0 20px 16px;
  min-height: 0;
}
.request-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  color: #999;
  font-size: 11px;
}
.request-heading strong {
  color: #d0d0d0;
  font-weight: 500;
}
.request-heading button {
  border: 0;
  font-size: 11px;
  margin-left: auto;
  padding: 0;
}
.urlbar {
  display: flex;
  border: 1px solid #484848;
  border-radius: 5px;
  height: 42px;
  padding: 3px;
  gap: 3px;
  flex-shrink: 0;
}
.urlbar select {
  border: 0;
  background: transparent;
  color: #7dc798;
  padding: 0 5px;
  font-weight: 600;
  max-width: 95px;
}
.urlbar input {
  border: 0;
  flex: 1;
  min-width: 0;
  background: transparent;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12px;
}
.urlbar button {
  padding: 5px 18px;
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 2px;
  color: var(--gold);
}
.request-split {
  display: flex;
  flex: 1;
  min-height: 0;
  margin-top: 8px;
}
.request-split.vertical {
  flex-direction: column;
}
.request-split.horizontal {
  flex-direction: row;
}
.request-pane,
.response-pane {
  flex: 1;
  min-height: 100px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: auto;
}
.request-content {
  overflow: auto;
  padding-top: 14px;
  flex: 1;
}
.request-content textarea {
  min-height: 170px;
  height: 100%;
  border: 0;
  background: #1b1b1b;
  border-radius: 0;
}
.split-resizer {
  height: 5px;
  flex-shrink: 0;
  cursor: row-resize;
  border-top: 1px solid var(--line);
  margin-top: 10px;
}
.horizontal .split-resizer {
  height: auto;
  width: 5px;
  cursor: col-resize;
  border-top: 0;
  border-left: 1px solid var(--line);
  margin: 0 14px;
}
.response-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.response-toolbar .subtabs {
  gap: 15px;
  border: 0;
}
.response-tools {
  display: flex;
  gap: 9px;
  font-size: 10px;
  align-items: center;
  white-space: nowrap;
}
.response-tools button {
  font-size: 10px;
  padding: 3px 5px;
}
.metrics {
  color: #83c596;
  font-family: monospace;
  font-size: 10px;
}
.error {
  color: #df9385;
}
.response-body {
  flex: 1;
  overflow: auto;
  min-height: 70px;
  margin: 0;
  padding: 8px 4px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  line-height: 1.8;
  color: #b9c7be;
}
.empty-response {
  display: grid;
  place-items: center;
  height: 100%;
  min-height: 100px;
  color: #777;
  font-size: 12px;
}
.env-layout {
  display: grid;
  grid-template-columns: 175px 1fr;
  gap: 26px;
  margin-top: 24px;
}
.env-list {
  border-right: 1px solid var(--line);
  padding-right: 16px;
}
.env-list button {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  padding: 10px;
}
.env-list button.active {
  background: #2a2a2a;
  color: var(--gold);
}
.env-list h3 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #888;
}
.run-item {
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #303030;
  padding: 10px 5px;
  font-size: 12px;
}
.run-item .result {
  margin-left: auto;
  font-family: monospace;
  font-size: 11px;
}
.run-item input {
  accent-color: var(--gold);
}
.run-item button {
  border: 0;
  padding: 0 4px;
}
.pill {
  color: var(--gold);
  font-size: 10px;
  border: 1px solid #544728;
  border-radius: 4px;
  padding: 3px 6px;
}
.actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.code-block {
  background: #171717;
  border: 1px solid #303030;
  border-radius: 4px;
  padding: 16px;
  white-space: pre-wrap;
  overflow: auto;
  font-size: 11px;
  line-height: 1.8;
  max-height: 400px;
}
footer {
  height: 28px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  color: #818181;
  font-size: 10px;
}
footer > div {
  display: flex;
  align-items: center;
  gap: 18px;
}
footer button {
  border: 0;
  padding: 0;
  font-size: 10px;
}
#status {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 70%;
}
dialog {
  background: #222;
  border: 1px solid #454545;
  border-radius: 8px;
  color: #ccc;
  width: 460px;
  padding: 24px;
}
dialog::backdrop {
  background: #0008;
}
dialog h2 {
  margin: 0 0 20px;
  font-size: 18px;
}
.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 24px;
}
dialog input,
dialog select {
  width: 100%;
}
dialog p {
  font-size: 12px;
  line-height: 1.8;
}
.shortcut-list {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 15px;
  font-size: 12px;
}
.body-toolbar {
  display: flex;
  gap: 12px;
  margin-bottom: 10px;
  align-items: center;
}
.body-toolbar button,
.body-toolbar select {
  font-size: 11px;
}
.history-entry {
  padding: 8px;
  border-bottom: 1px solid #333;
  font-size: 11px;
}
.collection-description {
  min-height: 280px;
}
::-webkit-scrollbar {
  width: 7px;
  height: 5px;
}
::-webkit-scrollbar-thumb {
  background: #414141;
  border-radius: 5px;
}
@media (max-width: 1100px) {
  :root {
    --sidebar: 245px;
  }
  .overview-grid {
    gap: 25px;
    grid-template-columns: 1fr 1.15fr;
  }
  .toolbar-actions {
    gap: 4px;
  }
  .toolbar-actions button {
    padding: 5px;
  }
  .title-end {
    display: none;
  }
  .subtabs {
    gap: 15px;
  }
  .response-tools {
    gap: 5px;
  }
  .env-layout {
    grid-template-columns: 145px 1fr;
  }
}

/* Reviewed prototype: charcoal surfaces, compact navigation and gold selection. */
:root { --gold:#dfbb6b; --line:#34363a; --sidebar:240px; background:#202124; color:#e4e4e7; }
.titlebar, aside { background:#1b1c1f; }
main, .work-tab.active { background:#202124; }
.titlebar { border-bottom:1px solid var(--line); }
.work-tabs { padding-left:0; gap:0; height:43px; background:#1b1c1f; }
.work-tab { border-radius:0; border:0; border-right:1px solid var(--line); background:transparent; }
.work-tab.active::after { top:0; bottom:auto; }
.tree-row { height:33px; }
.tree-row.selected { background:#343027; }
.view-inner { padding:20px 28px 28px; }
.request-view { padding:12px 28px 24px; }
.request-heading { flex-wrap:wrap; padding:8px 0 20px; gap:8px; }
.request-heading > span:first-child { flex-basis:100%; color:#92949b; }
.request-heading strong { font-size:22px; font-weight:600; color:#ededf0; }
.urlbar { border:0; padding:0; gap:8px; height:40px; }
.urlbar input { border:1px solid var(--line); border-radius:5px; background:#1b1c1f; }
.urlbar #httpMethod { flex:0 0 110px; width:110px; color:#7dcea0; font-weight:700; }
.method-picker { position:relative; flex:0 0 110px; }
.method-options { position:absolute; top:calc(100% + 5px); left:0; z-index:20; min-width:140px; max-height:300px; overflow:auto; padding:5px; border:1px solid var(--line); border-radius:6px; background:#25262a; box-shadow:0 8px 24px #0006; }
.method-option { padding:7px 10px; border-radius:3px; color:#d4d4d8; cursor:pointer; font:12px/1.4 ui-monospace,Menlo,monospace; }
.method-option.is-match { color:#aff0c5; background:#2a3930; font-weight:700; }
.method-option.is-muted { color:#92949c; }
.method-option:hover, .method-option[aria-selected="true"] { outline:1px solid var(--gold); outline-offset:-1px; background:#3b3c40; color:#fff; }
.urlbar button { background:var(--gold); color:#201d17; border-radius:5px; font-weight:600; }
.subtabs { min-height:45px; }
.subtabs button { padding:13px 0; }
.primary { background:var(--gold); }
button:disabled { cursor:not-allowed; }

.work-tabs .new-request-tab {
  flex: 0 0 44px;
  min-width: 44px;
  align-self: stretch;
  display: grid;
  place-items: center;
  padding: 10px 14px;
  margin: 0 4px;
  border: 0;
  border-radius: 0;
  font-size: 18px;
  color: var(--gold);
}
.work-tabs .new-request-tab:hover { background: #343027; }
.work-tabs .new-request-tab:focus-visible { outline-offset: -3px; }

.collection-switcher { display:flex; align-items:center; gap:4px; min-width:0; }
#collectionSwitch { border:0; min-width:36px; min-height:36px; }
#collectionPicker { position:fixed; margin:0; padding:6px; width:240px; max-height:360px; overflow:auto; border:1px solid var(--line); border-radius:6px; background:#25262a; color:inherit; box-shadow:0 8px 24px #0006; }
#collectionPicker button { display:block; width:100%; text-align:left; border:0; padding:10px 12px; overflow-wrap:anywhere; }
#collectionPicker button[aria-current="true"] { color:var(--gold); background:#343027; }

#collectionActions { position:fixed; margin:0; padding:6px; width:230px; border:1px solid var(--line); border-radius:6px; background:#25262a; color:inherit; box-shadow:0 8px 24px #0006; }
.sidebar-heading #collectionActions button { display:block; width:100%; text-align:left; padding:11px 12px; font-size:12px; color:inherit; }
.sidebar-heading #openCollection { min-width:32px; min-height:32px; }

.execution-log { padding:9px 12px; border-bottom:1px solid var(--line); font:12px/1.7 ui-monospace,Menlo,monospace; white-space:pre-wrap; overflow-wrap:anywhere; }
.execution-log.error { color:#ed9a98; }
.clear-console { align-self:flex-end; margin:8px; }

.sync-row { display:flex; align-items:flex-start; gap:12px; border:1px solid var(--line); margin:8px 0; padding:14px; border-radius:5px; }
.sync-row > input { margin-top:5px; accent-color:var(--gold); }
.sync-change { flex:1; min-width:0; }
.sync-change summary { cursor:pointer; padding:3px 0; }
.sync-conflict { color:#ed9a98; margin-left:16px; }
.sync-field { border-top:1px solid var(--line); padding:14px 0; margin-top:12px; }
.sync-values { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:12px; }
.sync-review pre { white-space:pre-wrap; overflow-wrap:anywhere; max-height:280px; overflow:auto; font:12px/1.6 ui-monospace,Menlo,monospace; }
.sync-values > div { background:#1b1c1f; padding:12px; }

.git-create-form {
  display: grid;
  gap: 12px;
  min-width: 0;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.git-create-form p,
.git-create-form .field,
.git-create-form .actions { margin: 0; }
.git-create-form .field { min-width: 0; }
.git-create-path { display: grid; gap: 6px; min-width: 0; }
.git-create-path code { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-all; }