apiskill 0.1.0

package/src/styles.css

@@ -0,0 +1,2101 @@
+:root {
+  color-scheme: light;
+  font-family:
+    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  background: #eef1f4;
+  color: #18202a;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+button,
+input,
+select {
+  font: inherit;
+}
+
+button {
+  cursor: pointer;
+}
+
+.app-shell {
+  min-height: 100vh;
+  padding: 18px;
+}
+
+.topbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+  padding: 16px 20px;
+  border: 1px solid #d7dde4;
+  border-radius: 8px;
+  background: #ffffff;
+}
+
+.eyebrow {
+  margin: 0 0 4px;
+  color: #667282;
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0;
+  text-transform: uppercase;
+}
+
+h1,
+h2,
+h3,
+h4,
+p {
+  margin-top: 0;
+}
+
+.topbar h1 {
+  margin: 0;
+  font-size: 24px;
+  line-height: 1.2;
+}
+
+.topbar-actions {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+}
+
+.version-switcher {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  color: #647182;
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.version-switcher select {
+  width: min(320px, 32vw);
+  min-height: 36px;
+  padding: 0 10px;
+  border: 1px solid #cfd7e1;
+  border-radius: 6px;
+  outline: 0;
+  color: #15202c;
+  background: #fff;
+}
+
+.version-manager {
+  min-width: min(420px, 38vw);
+}
+
+.version-manager-trigger {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: center;
+  gap: 9px;
+  width: 100%;
+  min-height: 44px;
+  padding: 7px 10px;
+  border: 1px solid #cfd7e1;
+  border-radius: 7px;
+  color: #23303e;
+  background: #fff;
+  text-align: left;
+}
+
+.version-manager-trigger:disabled {
+  cursor: not-allowed;
+  opacity: 0.72;
+}
+
+.version-manager-trigger span {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+}
+
+.version-manager-trigger strong,
+.version-manager-trigger small {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.version-manager-trigger strong {
+  font-size: 13px;
+}
+
+.version-manager-trigger small {
+  color: #657181;
+  font-size: 11px;
+  font-weight: 800;
+}
+
+.version-manager-dialog {
+  width: min(900px, 100%);
+  max-height: calc(100vh - 40px);
+  overflow: auto;
+  border-radius: 8px;
+  border: 1px solid #d7dde4;
+  background: #fff;
+  box-shadow: 0 18px 60px rgba(18, 25, 35, 0.22);
+}
+
+.version-manager-body {
+  display: grid;
+  gap: 12px;
+  padding: 16px 20px 20px;
+  background: #f7f9fb;
+}
+
+.version-message {
+  padding: 9px 11px;
+  border: 1px solid #cbe5df;
+  border-radius: 7px;
+  color: #176b4f;
+  background: #eef9f5;
+  font-size: 13px;
+  font-weight: 800;
+}
+
+.version-message.error {
+  border-color: #f1c1bd;
+  color: #9a2d27;
+  background: #fff4f3;
+}
+
+.version-item {
+  display: grid;
+  gap: 12px;
+  padding: 13px;
+  border: 1px solid #dfe5eb;
+  border-radius: 8px;
+  background: #fff;
+}
+
+.version-item.active {
+  border-color: #7ab6ad;
+  box-shadow: inset 3px 0 0 #1b6b65;
+}
+
+.version-item-main {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 12px;
+  align-items: start;
+}
+
+.version-item-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.version-item-title strong {
+  overflow: hidden;
+  color: #202a36;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.version-item-title span {
+  padding: 3px 7px;
+  border-radius: 999px;
+  color: #176b4f;
+  background: #e5f6ef;
+  font-size: 11px;
+  font-weight: 900;
+}
+
+.version-item-main p {
+  margin: 4px 0 0;
+  overflow-wrap: anywhere;
+  color: #657181;
+  font-family: "SFMono-Regular", Consolas, monospace;
+  font-size: 12px;
+}
+
+.version-item-stats {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 6px;
+}
+
+.version-item-stats span,
+.version-env-summary span {
+  padding: 5px 7px;
+  border-radius: 6px;
+  color: #4d5b6c;
+  background: #eef2f6;
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.version-env-summary {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: center;
+  gap: 8px;
+}
+
+.version-env-summary code {
+  overflow: hidden;
+  padding: 7px 9px;
+  border: 1px solid #dfe5eb;
+  border-radius: 6px;
+  color: #2f3d4d;
+  background: #fbfcfd;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.version-env-editor {
+  display: grid;
+  grid-template-columns: minmax(160px, 0.5fr) minmax(0, 1fr);
+  gap: 10px;
+}
+
+.version-env-editor label {
+  display: grid;
+  gap: 5px;
+  min-width: 0;
+  color: #647182;
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.version-env-editor input {
+  width: 100%;
+  min-height: 36px;
+  padding: 0 10px;
+  border: 1px solid #cfd7e1;
+  border-radius: 6px;
+  outline: 0;
+  color: #15202c;
+  background: #fff;
+}
+
+.version-item-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  justify-content: flex-end;
+}
+
+.sync-meta {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 8px;
+  color: #5c6877;
+  font-size: 13px;
+}
+
+.sync-meta span {
+  padding: 5px 8px;
+  border: 1px solid #dce2e9;
+  border-radius: 6px;
+  background: #f7f9fb;
+}
+
+.primary-button,
+.copy-inline-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  min-height: 36px;
+  border: 0;
+  border-radius: 6px;
+  color: #fff;
+  background: #1b6b65;
+  font-weight: 700;
+  white-space: nowrap;
+}
+
+.primary-button {
+  padding: 0 14px;
+}
+
+.primary-button:disabled {
+  cursor: wait;
+  opacity: 0.72;
+}
+
+.copy-inline-button {
+  padding: 0 12px;
+  background: #202a36;
+}
+
+.secondary-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  min-height: 36px;
+  padding: 0 14px;
+  border: 1px solid #ccd5df;
+  border-radius: 6px;
+  color: #22303d;
+  background: #fff;
+  font-weight: 700;
+  white-space: nowrap;
+}
+
+.secondary-button:disabled {
+  cursor: wait;
+  opacity: 0.72;
+}
+
+.danger-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  min-height: 36px;
+  padding: 0 14px;
+  border: 1px solid #efcbc8;
+  border-radius: 6px;
+  color: #b63831;
+  background: #fff7f6;
+  font-weight: 700;
+  white-space: nowrap;
+}
+
+.icon-secondary-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  padding: 0;
+  border: 1px solid #ccd5df;
+  border-radius: 6px;
+  color: #22303d;
+  background: #fff;
+}
+
+.source-panel {
+  display: grid;
+  gap: 10px;
+  margin-top: 12px;
+  padding: 12px;
+  border: 1px solid #d7dde4;
+  border-radius: 8px;
+  background: #ffffff;
+}
+
+.source-panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.source-panel-actions {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  justify-content: flex-end;
+}
+
+.source-tabs {
+  display: inline-flex;
+  width: fit-content;
+  gap: 4px;
+  padding: 3px;
+  border: 1px solid #d4dce5;
+  border-radius: 7px;
+  background: #fff;
+}
+
+.source-tabs button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  min-height: 32px;
+  padding: 0 12px;
+  border: 0;
+  border-radius: 5px;
+  color: #566373;
+  background: transparent;
+  font-size: 13px;
+  font-weight: 800;
+}
+
+.source-tabs button.active {
+  color: #fff;
+  background: #1b6b65;
+}
+
+.source-form {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto auto;
+  gap: 10px;
+}
+
+.blank-document-dialog-body {
+  display: grid;
+  gap: 10px;
+  padding: 16px 20px 2px;
+}
+
+.source-input,
+.source-file-picker {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  min-height: 38px;
+  padding: 0 12px;
+  border: 1px solid #cfd7e1;
+  border-radius: 7px;
+  background: #f9fafb;
+}
+
+.source-file-picker {
+  cursor: pointer;
+}
+
+.source-file-picker input {
+  display: none;
+}
+
+.source-file-picker span {
+  overflow: hidden;
+  min-width: 0;
+  color: #15202c;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.source-input input {
+  width: 100%;
+  min-width: 0;
+  border: 0;
+  outline: 0;
+  background: transparent;
+  color: #15202c;
+}
+
+.source-input textarea {
+  width: 100%;
+  min-width: 0;
+  min-height: 118px;
+  resize: vertical;
+  border: 0;
+  outline: 0;
+  background: transparent;
+  color: #15202c;
+  font-family: "SFMono-Regular", Consolas, monospace;
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.source-input-multiline {
+  align-items: flex-start;
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
+.source-input-multiline svg {
+  margin-top: 2px;
+}
+
+.source-auth {
+  grid-column: 1 / -1;
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: center;
+  gap: 10px;
+}
+
+.source-auth-fields {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 220px));
+  gap: 8px;
+}
+
+.source-auth-fields label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  min-height: 36px;
+  padding: 0 10px;
+  border: 1px solid #cfd7e1;
+  border-radius: 7px;
+  background: #f9fafb;
+}
+
+.source-auth-fields input {
+  width: 100%;
+  min-width: 0;
+  border: 0;
+  outline: 0;
+  background: transparent;
+  color: #15202c;
+}
+
+.source-meta {
+  grid-column: 1 / -1;
+  overflow: hidden;
+  color: #657181;
+  font-size: 12px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.source-meta span {
+  color: #2f3d4d;
+  font-family: "SFMono-Regular", Consolas, monospace;
+}
+
+.source-meta small {
+  margin-left: 8px;
+  color: #728094;
+  font-weight: 800;
+}
+
+.workspace {
+  display: grid;
+  grid-template-columns: minmax(320px, 380px) minmax(0, 1fr);
+  gap: 16px;
+  min-height: 420px;
+  height: calc(100vh - 270px);
+  margin-top: 16px;
+}
+
+.sidebar,
+.detail-pane {
+  min-height: 0;
+  border: 1px solid #d7dde4;
+  border-radius: 8px;
+  background: #ffffff;
+}
+
+.sidebar {
+  display: flex;
+  flex-direction: column;
+  padding: 14px;
+}
+
+.search-box {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 42px;
+  padding: 0 12px;
+  border: 1px solid #cfd7e1;
+  border-radius: 7px;
+  background: #f9fafb;
+}
+
+.search-box input {
+  width: 100%;
+  min-width: 0;
+  border: 0;
+  outline: 0;
+  background: transparent;
+  color: #15202c;
+}
+
+.search-clear-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: 0;
+  border-radius: 5px;
+  color: #647182;
+  background: transparent;
+}
+
+.search-clear-button:hover {
+  color: #b63831;
+  background: #fff0ef;
+}
+
+.filters {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 10px;
+  margin-top: 12px;
+}
+
+.filters label:first-child {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  padding: 0 10px;
+  border: 1px solid #d5dce5;
+  border-radius: 7px;
+  background: #fff;
+}
+
+.filters select {
+  width: 100%;
+  min-height: 38px;
+  border: 0;
+  outline: 0;
+  background: transparent;
+}
+
+.checkbox-line {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  color: #566373;
+  font-size: 13px;
+  white-space: nowrap;
+}
+
+.method-tabs {
+  display: grid;
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+  gap: 6px;
+  margin-top: 12px;
+}
+
+.method-tabs button {
+  min-height: 32px;
+  border: 1px solid #d5dce5;
+  border-radius: 6px;
+  color: #536171;
+  background: #fff;
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.method-tabs button.active {
+  color: #fff;
+  border-color: #1b6b65;
+  background: #1b6b65;
+}
+
+.endpoint-count {
+  margin: 12px 2px 8px;
+  color: #6b7582;
+  font-size: 13px;
+}
+
+.endpoint-list {
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding-right: 4px;
+}
+
+.endpoint-item {
+  display: grid;
+  grid-template-columns: 64px minmax(0, 1fr);
+  align-items: start;
+  gap: 10px;
+  width: 100%;
+  min-height: 66px;
+  padding: 10px;
+  border: 1px solid transparent;
+  border-radius: 7px;
+  text-align: left;
+  background: #fff;
+}
+
+.endpoint-item:hover {
+  background: #f6f8fa;
+}
+
+.endpoint-item.selected {
+  border-color: #1b6b65;
+  background: #edf7f5;
+}
+
+.endpoint-main {
+  min-width: 0;
+}
+
+.endpoint-main strong,
+.endpoint-main small {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.endpoint-main strong {
+  margin-bottom: 4px;
+  color: #1d2732;
+  font-size: 14px;
+}
+
+.endpoint-main small {
+  color: #647182;
+  font-family: "SFMono-Regular", Consolas, monospace;
+  font-size: 12px;
+}
+
+.method {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 58px;
+  height: 24px;
+  border-radius: 5px;
+  color: #fff;
+  font-size: 11px;
+  font-weight: 900;
+}
+
+.method-get {
+  background: #246bce;
+}
+
+.method-post {
+  background: #168456;
+}
+
+.method-put {
+  background: #9a6200;
+}
+
+.method-delete {
+  background: #c23131;
+}
+
+.method-patch {
+  background: #7953b8;
+}
+
+.method-options,
+.method-head {
+  background: #52606f;
+}
+
+.detail-pane {
+  overflow: auto;
+}
+
+.opened-api-tabs {
+  position: sticky;
+  top: 0;
+  z-index: 5;
+  display: flex;
+  align-items: flex-end;
+  gap: 4px;
+  overflow-x: auto;
+  overflow-y: hidden;
+  min-height: 47px;
+  padding: 10px 12px 0;
+  border-bottom: 1px solid #dfe5eb;
+  background: #f7f9fb;
+}
+
+.opened-api-tab {
+  --tab-accent: #52606f;
+  --tab-soft: #eef2f6;
+  display: inline-grid;
+  grid-template-columns: auto minmax(100px, 210px) 20px;
+  align-items: center;
+  gap: 7px;
+  min-width: 180px;
+  max-width: 280px;
+  height: 36px;
+  padding: 7px 8px 8px;
+  border: 1px solid color-mix(in srgb, var(--tab-accent) 45%, #d5dce5);
+  border-bottom-color: #dfe5eb;
+  border-radius: 7px 7px 0 0;
+  text-align: left;
+  background: var(--tab-soft);
+  cursor: pointer;
+}
+
+.opened-api-tab-get {
+  --tab-accent: #246bce;
+  --tab-soft: #eef5ff;
+}
+
+.opened-api-tab-post {
+  --tab-accent: #168456;
+  --tab-soft: #edf8f2;
+}
+
+.opened-api-tab-put {
+  --tab-accent: #9a6200;
+  --tab-soft: #fff5e4;
+}
+
+.opened-api-tab-delete {
+  --tab-accent: #c23131;
+  --tab-soft: #fff0f0;
+}
+
+.opened-api-tab-patch {
+  --tab-accent: #7953b8;
+  --tab-soft: #f4efff;
+}
+
+.opened-api-tab-options,
+.opened-api-tab-head {
+  --tab-accent: #52606f;
+  --tab-soft: #f0f3f6;
+}
+
+.opened-api-tab.active {
+  position: relative;
+  margin-bottom: -1px;
+  border-color: var(--tab-accent);
+  border-bottom-color: #fff;
+  background: #fff;
+  box-shadow: inset 0 3px 0 var(--tab-accent);
+}
+
+.opened-api-tab-text {
+  min-width: 0;
+}
+
+.opened-api-tab-text strong {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.opened-api-tab-text strong {
+  color: #1d2732;
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.opened-api-tab-method {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 34px;
+  height: 18px;
+  padding: 0 5px;
+  border-radius: 4px;
+  color: #fff;
+  font-size: 9px;
+  font-weight: 900;
+  line-height: 1;
+}
+
+.opened-api-tab-close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  border: 0;
+  border-radius: 5px;
+  color: var(--tab-accent);
+  background: transparent;
+  cursor: pointer;
+}
+
+.opened-api-tab-close:hover {
+  color: #b63831;
+  background: #fff0ef;
+}
+
+.endpoint-detail {
+  padding: 22px;
+}
+
+.detail-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 18px;
+  padding-bottom: 18px;
+  border-bottom: 1px solid #e1e6ec;
+}
+
+.detail-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-left: auto;
+}
+
+.endpoint-title-line {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.endpoint-title-line h2 {
+  margin: 0;
+  color: #121923;
+  font-size: 22px;
+  line-height: 1.25;
+}
+
+.path-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  margin-top: 10px;
+}
+
+.path-line {
+  display: block;
+  min-width: 0;
+  color: #354253;
+  font-size: 13px;
+  white-space: normal;
+  word-break: break-all;
+}
+
+.path-copy-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  gap: 4px;
+  min-height: 28px;
+  padding: 0 8px;
+  border: 1px solid #d4dce5;
+  border-radius: 6px;
+  color: #415166;
+  background: #fff;
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.path-copy-button:hover {
+  border-color: #9fb0c1;
+  background: #f7f9fb;
+}
+
+.tag-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-top: 12px;
+}
+
+.tag-row span {
+  padding: 4px 8px;
+  border-radius: 5px;
+  color: #475364;
+  background: #edf1f5;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.description {
+  margin: 16px 0 0;
+  color: #4f5c6a;
+  line-height: 1.7;
+}
+
+.copy-preview {
+  margin-top: 18px;
+  border: 1px solid #d9e0e7;
+  border-radius: 8px;
+  background: #f8fafb;
+}
+
+.copy-preview-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 10px;
+  border-bottom: 1px solid #dfe5eb;
+}
+
+.copy-tabs {
+  display: inline-flex;
+  gap: 4px;
+  padding: 3px;
+  border: 1px solid #d4dce5;
+  border-radius: 7px;
+  background: #fff;
+}
+
+.copy-tabs button {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-height: 30px;
+  padding: 0 10px;
+  border: 0;
+  border-radius: 5px;
+  color: #566373;
+  background: transparent;
+  font-size: 13px;
+  font-weight: 800;
+}
+
+.copy-tabs button.active {
+  color: #fff;
+  background: #1b6b65;
+}
+
+.copy-preview-content {
+  overflow: auto;
+  min-height: calc(3 * 1.6em + 28px);
+  max-height: calc(16 * 1.6em + 28px);
+  margin: 0;
+  padding: 14px;
+  color: #e5edf6;
+  background: #111827;
+  font-family: "SFMono-Regular", Consolas, monospace;
+  font-size: 12px;
+  line-height: 1.6;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.request-tester {
+  display: grid;
+  gap: 14px;
+  padding: 14px;
+  background: #fff;
+}
+
+.endpoint-links-config {
+  display: grid;
+  gap: 12px;
+  padding: 14px;
+  background: #fff;
+}
+
+.links-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.links-actions,
+.link-editor-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  justify-content: flex-end;
+}
+
+.link-editor-panel {
+  min-width: 0;
+}
+
+.link-button {
+  text-decoration: none;
+}
+
+.request-line {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: end;
+  gap: 10px;
+}
+
+.request-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  justify-content: flex-end;
+}
+
+.request-line label,
+.tester-form-grid label,
+.param-editor label {
+  display: grid;
+  gap: 5px;
+  min-width: 0;
+  color: #647182;
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.request-line input,
+.tester-form-grid input,
+.tester-form-grid select,
+.param-editor input {
+  width: 100%;
+  min-height: 36px;
+  padding: 0 10px;
+  border: 1px solid #cfd7e1;
+  border-radius: 6px;
+  outline: 0;
+  color: #15202c;
+  background: #fff;
+}
+
+.request-preview {
+  display: block;
+  overflow: hidden;
+  padding: 9px 10px;
+  border: 1px solid #dfe5eb;
+  border-radius: 6px;
+  color: #334254;
+  background: #f7f9fb;
+  font-size: 12px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.tester-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.tester-panel {
+  min-width: 0;
+  padding: 12px;
+  border: 1px solid #dfe5eb;
+  border-radius: 7px;
+  background: #fbfcfd;
+}
+
+.tester-panel-title {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 10px;
+  color: #243242;
+  font-size: 13px;
+  font-weight: 900;
+}
+
+.tester-form-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.param-editor + .param-editor {
+  margin-top: 12px;
+}
+
+.param-editor h4 {
+  margin: 0 0 8px;
+  color: #516070;
+  font-size: 12px;
+}
+
+.param-editor label + label {
+  margin-top: 8px;
+}
+
+.param-editor span {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+}
+
+.param-editor b {
+  color: #c23131;
+}
+
+.tester-panel textarea {
+  width: 100%;
+  min-height: 168px;
+  resize: vertical;
+  padding: 10px;
+  border: 1px solid #cfd7e1;
+  border-radius: 6px;
+  outline: 0;
+  color: #1f2b38;
+  background: #fff;
+  font-family: "SFMono-Regular", Consolas, monospace;
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.tester-panel textarea:disabled {
+  color: #8792a1;
+  background: #f2f5f8;
+}
+
+.response-panel {
+  background: #fff;
+}
+
+.response-meta-line {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 10px;
+}
+
+.response-meta-line span {
+  padding: 5px 8px;
+  border-radius: 5px;
+  color: #536171;
+  background: #eef2f6;
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.response-meta-line .status-ok {
+  color: #176b4f;
+  background: #e5f6ef;
+}
+
+.response-meta-line .status-error {
+  color: #a8322b;
+  background: #fff0ef;
+}
+
+.response-panel pre {
+  overflow: auto;
+  max-height: 360px;
+  margin: 0;
+  padding: 12px;
+  border-radius: 6px;
+  color: #202a36;
+  background: #f7f9fb;
+  font-family: "SFMono-Regular", Consolas, monospace;
+  font-size: 12px;
+  line-height: 1.55;
+}
+
+.detail-section {
+  padding: 20px 0;
+  border-bottom: 1px solid #e8edf2;
+}
+
+.section-title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 10px;
+}
+
+.section-title h3 {
+  margin: 0;
+  font-size: 16px;
+}
+
+.section-title span {
+  min-width: 28px;
+  padding: 3px 8px;
+  border-radius: 999px;
+  color: #1b6b65;
+  background: #e7f4f2;
+  text-align: center;
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.media-block + .media-block,
+.response-block + .response-block {
+  margin-top: 18px;
+}
+
+.media-block h4 {
+  margin: 0 0 8px;
+  color: #516070;
+  font-family: "SFMono-Regular", Consolas, monospace;
+  font-size: 13px;
+}
+
+.response-heading {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 10px;
+}
+
+.response-heading strong {
+  padding: 4px 8px;
+  border-radius: 5px;
+  color: #fff;
+  background: #202a36;
+  font-size: 12px;
+}
+
+.response-heading span {
+  color: #657181;
+  font-size: 13px;
+}
+
+.table-wrap {
+  overflow: auto;
+  border: 1px solid #dfe5eb;
+  border-radius: 7px;
+}
+
+table {
+  width: 100%;
+  min-width: 920px;
+  border-collapse: collapse;
+  font-size: 13px;
+}
+
+th,
+td {
+  padding: 10px 12px;
+  border-bottom: 1px solid #edf1f4;
+  text-align: left;
+  vertical-align: top;
+}
+
+th {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  color: #526171;
+  background: #f7f9fb;
+  font-size: 12px;
+  font-weight: 800;
+}
+
+tr:last-child td {
+  border-bottom: 0;
+}
+
+td code {
+  color: #17202b;
+  font-family: "SFMono-Regular", Consolas, monospace;
+  font-size: 12px;
+}
+
+.muted {
+  margin: 0;
+  color: #798596;
+}
+
+.inline-error {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 12px;
+  padding: 10px 12px;
+  border: 1px solid #f1c1bd;
+  border-radius: 7px;
+  color: #9a2d27;
+  background: #fff4f3;
+}
+
+.modal-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 30;
+  display: grid;
+  place-items: center;
+  padding: 20px;
+  background: rgba(18, 25, 35, 0.48);
+}
+
+.import-dialog {
+  width: min(720px, 100%);
+  max-height: calc(100vh - 40px);
+  overflow: auto;
+  border-radius: 8px;
+  border: 1px solid #d7dde4;
+  background: #fff;
+  box-shadow: 0 18px 60px rgba(18, 25, 35, 0.22);
+}
+
+.auth-dialog {
+  width: min(560px, 100%);
+  max-height: calc(100vh - 40px);
+  overflow: auto;
+  border-radius: 8px;
+  border: 1px solid #d7dde4;
+  background: #fff;
+  box-shadow: 0 18px 60px rgba(18, 25, 35, 0.22);
+}
+
+.api-config-dialog {
+  width: 80vw;
+  min-width: 1000px;
+  max-width: 80vw;
+  max-height: calc(100vh - 40px);
+  overflow: auto;
+  border-radius: 8px;
+  border: 1px solid #d7dde4;
+  background: #fff;
+  box-shadow: 0 18px 60px rgba(18, 25, 35, 0.22);
+}
+
+.import-dialog-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 18px 20px 14px;
+  border-bottom: 1px solid #e5eaf0;
+}
+
+.import-dialog-header h2 {
+  margin: 0;
+  font-size: 20px;
+}
+
+.import-badge {
+  display: inline-flex;
+  align-items: center;
+  min-height: 28px;
+  padding: 0 10px;
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 800;
+  white-space: nowrap;
+}
+
+.import-badge.running {
+  color: #8a5b00;
+  background: #fff4d8;
+}
+
+.import-badge.success {
+  color: #176b4f;
+  background: #e5f6ef;
+}
+
+.import-badge.error {
+  color: #a8322b;
+  background: #fff0ef;
+}
+
+.progress-track {
+  height: 8px;
+  margin: 16px 20px 0;
+  overflow: hidden;
+  border-radius: 999px;
+  background: #e9eef3;
+}
+
+.progress-bar {
+  height: 100%;
+  border-radius: inherit;
+  background: #1b6b65;
+  transition: width 240ms ease;
+}
+
+.progress-bar.running {
+  background: linear-gradient(90deg, #1b6b65, #4f8fcb);
+}
+
+.progress-bar.success {
+  background: #168456;
+}
+
+.progress-bar.error {
+  background: #c23131;
+}
+
+.import-summary {
+  display: grid;
+  gap: 12px;
+  padding: 18px 20px;
+}
+
+.auth-dialog-body {
+  display: grid;
+  gap: 14px;
+  padding: 18px 20px;
+}
+
+.api-config-body {
+  display: grid;
+  gap: 14px;
+  padding: 18px 20px;
+  background: #f7f9fb;
+}
+
+.api-config-tabs {
+  display: inline-flex;
+  width: fit-content;
+  gap: 4px;
+  padding: 3px;
+  border: 1px solid #d4dce5;
+  border-radius: 7px;
+  background: #fff;
+}
+
+.api-config-tabs button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  min-height: 32px;
+  padding: 0 12px;
+  border: 0;
+  border-radius: 5px;
+  color: #566373;
+  background: transparent;
+  font-size: 13px;
+  font-weight: 800;
+}
+
+.api-config-tabs button.active {
+  color: #fff;
+  background: #1b6b65;
+}
+
+.api-config-errors {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 10px 12px;
+  border: 1px solid #efcbc8;
+  border-radius: 7px;
+  color: #8f2f29;
+  background: #fff7f6;
+}
+
+.api-config-errors strong {
+  display: block;
+  margin-bottom: 4px;
+  font-size: 13px;
+}
+
+.api-config-errors p {
+  margin: 0;
+  font-size: 12px;
+  line-height: 1.45;
+}
+
+.api-cli-editor {
+  width: 100%;
+  min-height: calc(3 * 1.55em + 24px);
+  max-height: calc(16 * 1.55em + 24px);
+  overflow-y: auto;
+  resize: vertical;
+  padding: 12px;
+  border: 1px solid #334155;
+  border-radius: 7px;
+  outline: 0;
+  color: #e5edf6;
+  background: #111827;
+  font-family: "SFMono-Regular", Consolas, monospace;
+  font-size: 12px;
+  line-height: 1.55;
+}
+
+.api-cli-editor::placeholder {
+  color: #94a3b8;
+}
+
+.api-cli-editor:focus {
+  border-color: #5aa69d;
+  box-shadow: 0 0 0 3px rgba(90, 166, 157, 0.22);
+}
+
+.api-config-section {
+  display: grid;
+  gap: 12px;
+  padding: 14px;
+  border: 1px solid #dfe5eb;
+  border-radius: 8px;
+  background: #fff;
+}
+
+.section-title-row {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.section-title-row h3 {
+  margin: 0;
+  color: #243242;
+  font-size: 15px;
+}
+
+.section-title-row p {
+  margin: 4px 0 0;
+  color: #657181;
+  font-size: 12px;
+}
+
+.section-title-row code {
+  max-width: 420px;
+  overflow: hidden;
+  padding: 5px 7px;
+  border: 1px solid #dce2e9;
+  border-radius: 6px;
+  color: #415166;
+  background: #f7f9fb;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.api-config-grid {
+  display: grid;
+  grid-template-columns: 140px repeat(2, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.api-config-grid.compact {
+  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
+}
+
+.api-config-grid label,
+.field-config-row label {
+  display: grid;
+  gap: 5px;
+  min-width: 0;
+  color: #647182;
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.api-config-grid input,
+.api-config-grid select,
+.api-config-grid textarea,
+.field-config-row input,
+.field-config-row select {
+  width: 100%;
+  min-height: 36px;
+  padding: 0 10px;
+  border: 1px solid #cfd7e1;
+  border-radius: 6px;
+  outline: 0;
+  color: #15202c;
+  background: #fff;
+}
+
+.api-config-grid textarea {
+  min-height: 82px;
+  padding: 10px;
+  resize: vertical;
+  line-height: 1.45;
+}
+
+.span-2 {
+  grid-column: span 2;
+}
+
+.span-all {
+  grid-column: 1 / -1;
+}
+
+.inline-check {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-height: 32px;
+  color: #415166;
+  font-size: 13px;
+  font-weight: 800;
+}
+
+.field-config-table {
+  display: grid;
+  gap: 8px;
+  overflow-x: auto;
+}
+
+.field-config-item {
+  display: grid;
+  gap: 8px;
+}
+
+.field-config-head,
+.field-config-row {
+  display: grid;
+  grid-template-columns: minmax(150px, 1.1fr) 120px 58px minmax(180px, 1.2fr) minmax(120px, 0.8fr) 38px;
+  gap: 8px;
+  align-items: center;
+  min-width: 760px;
+}
+
+.field-config-head.with-location,
+.field-config-row.with-location {
+  grid-template-columns: 98px minmax(150px, 1.1fr) 120px 58px minmax(180px, 1.2fr) minmax(120px, 0.8fr) 38px;
+}
+
+.field-config-head {
+  color: #657181;
+  font-size: 12px;
+  font-weight: 900;
+}
+
+.field-check {
+  place-items: center;
+}
+
+.field-check input,
+.inline-check input {
+  width: 16px;
+  min-height: 16px;
+}
+
+.icon-danger-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border: 1px solid #efcbc8;
+  border-radius: 6px;
+  color: #b63831;
+  background: #fff7f6;
+}
+
+.field-add-row {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  min-height: 34px;
+  border: 1px dashed #b8c4d0;
+  border-radius: 6px;
+  color: #415166;
+  background: #fbfcfd;
+  font-weight: 800;
+}
+
+.child-field-config {
+  display: grid;
+  gap: 8px;
+  margin-left: 18px;
+  padding: 10px;
+  border-left: 3px solid #b9d7d3;
+  border-radius: 0 7px 7px 0;
+  background: #f7fbfa;
+}
+
+.child-field-title {
+  color: #415166;
+  font-size: 12px;
+  font-weight: 900;
+}
+
+.response-config {
+  display: grid;
+  gap: 10px;
+  padding: 12px;
+  border: 1px solid #e3e8ee;
+  border-radius: 7px;
+  background: #fbfcfd;
+}
+
+.auth-message {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 10px 12px;
+  border: 1px solid #d9e0e7;
+  border-radius: 7px;
+  color: #2f3d4d;
+  background: #f7f9fb;
+}
+
+.auth-target {
+  display: grid;
+  gap: 4px;
+}
+
+.auth-target span,
+.auth-fields label {
+  color: #657181;
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.auth-target strong {
+  overflow-wrap: anywhere;
+  color: #1f2b38;
+  font-family: "SFMono-Regular", Consolas, monospace;
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.auth-fields {
+  display: grid;
+  gap: 10px;
+}
+
+.auth-fields label {
+  display: grid;
+  gap: 6px;
+}
+
+.auth-fields input {
+  width: 100%;
+  min-height: 38px;
+  padding: 0 10px;
+  border: 1px solid #cfd7e1;
+  border-radius: 6px;
+  outline: 0;
+  color: #15202c;
+  background: #fff;
+}
+
+.import-summary div:not(.import-counts):not(.import-error) {
+  display: grid;
+  gap: 4px;
+}
+
+.import-summary span {
+  color: #657181;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.import-summary strong {
+  overflow-wrap: anywhere;
+  color: #1f2b38;
+  font-family: "SFMono-Regular", Consolas, monospace;
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.import-counts {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.import-counts span {
+  padding: 6px 9px;
+  border-radius: 6px;
+  color: #1b6b65;
+  background: #e7f4f2;
+}
+
+.import-error {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 10px 12px;
+  border: 1px solid #f1c1bd;
+  border-radius: 7px;
+  color: #9a2d27;
+  background: #fff4f3;
+}
+
+.import-dialog-actions {
+  display: flex;
+  justify-content: flex-end;
+  padding: 0 20px 18px;
+}
+
+.state-screen,
+.empty-state {
+  display: grid;
+  place-items: center;
+  align-content: center;
+  min-height: 100vh;
+  padding: 24px;
+  text-align: center;
+}
+
+.empty-state {
+  min-height: 60vh;
+}
+
+.state-icon {
+  width: 42px;
+  height: 42px;
+  margin-bottom: 14px;
+  color: #1b6b65;
+}
+
+.state-icon.error {
+  color: #b8312d;
+}
+
+.state-screen h1,
+.empty-state h2 {
+  margin-bottom: 8px;
+}
+
+.spin {
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (max-width: 980px) {
+  .app-shell {
+    padding: 12px;
+  }
+
+  .topbar {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .topbar-actions {
+    width: 100%;
+    justify-content: space-between;
+  }
+
+  .version-switcher {
+    width: 100%;
+  }
+
+  .version-switcher select {
+    width: 100%;
+  }
+
+  .version-manager {
+    width: 100%;
+    min-width: 0;
+  }
+
+  .version-item-main,
+  .version-env-editor,
+  .version-env-summary {
+    grid-template-columns: 1fr;
+  }
+
+  .version-item-stats,
+  .version-item-actions {
+    justify-content: flex-start;
+  }
+
+  .source-panel {
+    grid-template-columns: 1fr;
+  }
+
+  .source-panel-header {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .source-panel-header > .secondary-button,
+  .source-panel-actions,
+  .source-tabs {
+    width: 100%;
+  }
+
+  .source-panel-actions {
+    justify-content: stretch;
+  }
+
+  .source-panel-actions .secondary-button {
+    flex: 1 1 180px;
+  }
+
+  .source-tabs {
+    flex-wrap: wrap;
+  }
+
+  .source-form {
+    grid-template-columns: 1fr;
+  }
+
+  .source-auth,
+  .source-auth-fields {
+    grid-template-columns: 1fr;
+  }
+
+  .api-config-grid,
+  .api-config-grid.compact {
+    grid-template-columns: 1fr;
+  }
+
+  .span-2,
+  .span-all {
+    grid-column: auto;
+  }
+
+  .workspace {
+    grid-template-columns: 1fr;
+    height: auto;
+  }
+
+  .sidebar {
+    max-height: 46vh;
+  }
+
+  .detail-pane {
+    min-height: 60vh;
+  }
+
+  .detail-header {
+    flex-direction: column;
+  }
+
+  .copy-preview-toolbar {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .copy-tabs,
+  .copy-inline-button {
+    width: 100%;
+  }
+
+  .copy-tabs button {
+    flex: 1;
+    justify-content: center;
+  }
+
+  .request-line,
+  .tester-grid,
+  .links-grid,
+  .tester-form-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 640px) {
+  .filters {
+    grid-template-columns: 1fr;
+  }
+
+  .method-tabs {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .topbar-actions,
+  .sync-meta {
+    align-items: stretch;
+    flex-direction: column;
+    width: 100%;
+  }
+
+  .primary-button,
+  .secondary-button,
+  .copy-inline-button {
+    width: 100%;
+  }
+
+  .source-tabs {
+    width: 100%;
+  }
+
+  .source-tabs button {
+    flex: 1;
+  }
+
+  .import-dialog-actions .secondary-button {
+    width: 100%;
+  }
+
+  .import-dialog-actions {
+    flex-direction: column-reverse;
+    gap: 8px;
+  }
+
+  .endpoint-title-line {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+}