:root {
  --kc-bg: #f6f9f8;
  --kc-panel: #ffffff;
  --kc-ink: #183238;
  --kc-muted: #5d7274;
  --kc-line: #d9e4e1;
  --kc-brand: #087d75;
  --kc-brand-dark: #19525a;
  --kc-warn: #a86200;
  --kc-error: #b3261e;
  --kc-ok: #287d3c;
  --kc-shadow: 0 12px 28px rgba(24, 50, 56, 0.08);
}

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  margin: 0;
  background: var(--kc-bg);
  color: var(--kc-ink);
  font-family: "Invention", Arial, system-ui, sans-serif;
  font-size: 16px;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  border: 1px solid var(--kc-brand);
  border-radius: 8px;
  background: var(--kc-brand);
  color: #ffffff;
  cursor: pointer;
  font-weight: 700;
  min-height: 2.5rem;
  padding: 0.55rem 0.85rem;
}

button[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}

button:not([disabled]):hover {
  background: var(--kc-brand-dark);
  border-color: var(--kc-brand-dark);
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--kc-line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--kc-ink);
  min-height: 2.4rem;
  padding: 0.55rem 0.65rem;
}

textarea {
  min-height: 6rem;
  resize: vertical;
}

label {
  display: grid;
  gap: 0.35rem;
  color: var(--kc-muted);
  font-size: 0.9rem;
  font-weight: 700;
}

label:has(input[type="checkbox"]) {
  align-items: center;
  display: flex;
  gap: 0.5rem;
}

input[type="checkbox"] {
  width: 1.1rem;
  min-height: 1.1rem;
}

.kc-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: #ffffff;
  border-bottom: 1px solid var(--kc-line);
  position: sticky;
  top: 0;
  z-index: 10;
}

.kc-topbar h1,
.kc-toolbar h2 {
  margin: 0;
  font-family: "Invention Extra", "Invention", Arial, system-ui, sans-serif;
  font-size: 1.6rem;
}

.kc-eyebrow,
.kc-label {
  margin: 0 0 0.25rem;
  color: var(--kc-muted);
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
}

.kc-auth,
.kc-actions,
.kc-side-actions,
.kc-card-head > div {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.kc-auth span,
.kc-draft,
.kc-panel p,
#workspaceHint {
  color: var(--kc-muted);
}

.kc-layout {
  display: grid;
  grid-template-columns: 19rem minmax(0, 1fr);
  gap: 1rem;
  padding: 1rem;
}

.kc-sidebar,
.kc-workspace,
.kc-panel,
.kc-card-editor {
  border: 1px solid var(--kc-line);
  border-radius: 8px;
  background: var(--kc-panel);
  box-shadow: var(--kc-shadow);
}

.kc-sidebar {
  align-self: start;
  display: grid;
  gap: 1rem;
  padding: 1rem;
  position: sticky;
  top: 5rem;
}

.kc-workspace {
  min-width: 0;
  padding: 1rem;
}

.kc-toolbar,
.kc-section-head,
.kc-card-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 1rem;
}

.kc-toolbar {
  border-bottom: 1px solid var(--kc-line);
  margin-bottom: 1rem;
  padding-bottom: 1rem;
}

.kc-nav {
  display: grid;
  gap: 0.4rem;
}

.kc-nav button,
.kc-side-actions button,
.kc-card-head button {
  background: #ffffff;
  color: var(--kc-brand-dark);
  border-color: var(--kc-line);
}

.kc-nav button.is-active {
  background: #e4f3ef;
  border-color: var(--kc-brand);
}

.kc-draft {
  border: 1px dashed var(--kc-line);
  border-radius: 8px;
  padding: 0.75rem;
}

.kc-draft a {
  color: var(--kc-brand);
  display: inline-block;
  font-weight: 700;
  margin-top: 0.5rem;
}

.kc-section {
  display: none;
}

.kc-section.is-active {
  display: block;
}

.kc-grid {
  display: grid;
  gap: 1rem;
}

.kc-grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.kc-panel,
.kc-card-editor {
  padding: 1rem;
}

.kc-panel h3,
.kc-panel h4 {
  margin: 0 0 1rem;
}

.kc-fields {
  display: grid;
  gap: 0.8rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.kc-fields.compact,
.kc-fields.card-fields {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.kc-fields label:has(textarea),
.kc-fields label:has(input[data-field="title"]),
.kc-fields label:has(input[data-field="source"]) {
  grid-column: span 2;
}

.kc-content-editor {
  display: grid;
  gap: 1rem;
  grid-template-columns: 16rem minmax(0, 1fr);
}

.kc-product-list,
.kc-card-list,
.kc-list {
  display: grid;
  gap: 0.5rem;
}

.kc-product-list button,
.kc-list button {
  background: #ffffff;
  border-color: var(--kc-line);
  color: var(--kc-ink);
  text-align: left;
}

.kc-product-list button.is-active {
  background: #e4f3ef;
  border-color: var(--kc-brand);
}

.kc-card-list {
  margin-top: 1rem;
}

.kc-card-editor {
  box-shadow: none;
}

.kc-card-head {
  border-bottom: 1px solid var(--kc-line);
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
}

.kc-list {
  margin-top: 1rem;
}

.kc-list.tall {
  max-height: 32rem;
  overflow: auto;
}

.kc-list-item {
  border: 1px solid var(--kc-line);
  border-radius: 8px;
  padding: 0.75rem;
  background: #fbfdfc;
  overflow-wrap: anywhere;
}

.kc-list-item strong {
  display: block;
}

.kc-list-item small {
  color: var(--kc-muted);
  display: block;
  margin-top: 0.25rem;
}

.kc-list-item .kc-actions {
  margin-top: 0.65rem;
}

.kc-json-label {
  color: var(--kc-ink);
}

.kc-json-label textarea {
  min-height: 22rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85rem;
  line-height: 1.45;
}

.kc-validation {
  display: grid;
  gap: 0.5rem;
}

.kc-validation .ok {
  color: var(--kc-ok);
}

.kc-validation .warn {
  color: var(--kc-warn);
}

.kc-validation .error {
  color: var(--kc-error);
}

@media (max-width: 1080px) {
  .kc-layout,
  .kc-grid.two,
  .kc-content-editor {
    grid-template-columns: 1fr;
  }

  .kc-sidebar {
    position: static;
  }

  .kc-fields,
  .kc-fields.compact,
  .kc-fields.card-fields {
    grid-template-columns: 1fr;
  }

  .kc-fields label:has(textarea),
  .kc-fields label:has(input[data-field="title"]),
  .kc-fields label:has(input[data-field="source"]) {
    grid-column: span 1;
  }
}

@media (max-width: 680px) {
  .kc-topbar,
  .kc-toolbar,
  .kc-section-head,
  .kc-card-head {
    align-items: stretch;
    flex-direction: column;
  }

  .kc-actions,
  .kc-auth,
  .kc-side-actions {
    align-items: stretch;
    flex-direction: column;
  }
}