:root {
  --corn: #f7c948;
  --corn-deep: #b7791f;
  --husk: #2f855a;
  --husk-dark: #22543d;
  --ink: #1f2933;
  --muted: #617080;
  --cream: #fff8df;
  --field: #f3ead0;
  --panel: #fffdf5;
  --line: #ded2aa;
  --shadow: 0 18px 45px rgba(74, 50, 12, .14);
  --radius: 8px;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

body {
  margin: 0;
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 18% 10%, rgba(247, 201, 72, .28), transparent 26rem),
    linear-gradient(135deg, #fffaf0 0%, #f4edd5 45%, #edf7ed 100%);
  min-height: 100vh;
}

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

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
a:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid rgba(247, 201, 72, .7);
  outline-offset: 2px;
}

/* ---------- Header ---------- */

.app-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .65rem 1rem;
  padding: .7rem clamp(1rem, 3vw, 2rem);
  background: rgba(255, 253, 245, .92);
  border-bottom: 1px solid rgba(183, 121, 31, .25);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  color: inherit;
  text-decoration: none;
}

.brand-mark {
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  border-radius: 50%;
  color: #233d21;
  font-weight: 900;
  background:
    linear-gradient(90deg, transparent 44%, rgba(255, 255, 255, .42) 44% 56%, transparent 56%),
    var(--corn);
  border: 2px solid var(--husk);
}

.brand strong,
.brand small { display: block; }

.brand small,
.hint,
.page-footer { color: var(--muted); }

.header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

/* ---------- Stage: preview first, config beside it when open ---------- */

.stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
  width: min(1180px, calc(100% - 2rem));
  margin: 1.25rem auto 1.5rem;
}

.preview-shell {
  width: 100%;
  max-width: 36rem;
  margin: 0 auto;
}

body.is-editing .stage {
  grid-template-columns: minmax(19rem, 26rem) minmax(0, 1fr);
}

body.is-editing .config-panel { grid-column: 1; grid-row: 1; }
body.is-editing .preview-shell { grid-column: 2; grid-row: 1; }

.config-panel {
  position: sticky;
  top: .75rem;
  max-height: calc(100vh - 1.5rem);
  overflow: auto;
  padding: .25rem .25rem .5rem;
  overscroll-behavior: contain;
}

.config-panel .card { box-shadow: 0 2px 10px rgba(74, 50, 12, .08); }

.config-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin: 0 0 .75rem;
}

.config-head h2 {
  margin: 0;
  font-size: 1.2rem;
}

/* Phone: preview stays on top, config becomes a bottom sheet. */
@media (max-width: 820px) {
  body.is-editing .stage {
    grid-template-columns: minmax(0, 1fr);
    padding-bottom: 60vh;
  }
  body.is-editing .preview-shell { grid-column: 1; }

  .config-panel {
    position: fixed;
    z-index: 30;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    max-height: 55vh;
    padding: .85rem .85rem 1.25rem;
    background: #fbf5e1;
    border-top: 2px solid var(--husk);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -16px 40px rgba(74, 50, 12, .22);
  }
}

/* ---------- Cards / accordion ---------- */

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
}

.acc + .acc { margin-top: .65rem; }

.acc.open { border-color: rgba(47, 133, 90, .55); }

.acc-heading {
  margin: 0;
  font-size: 1.05rem;
}

.acc-trigger {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  min-height: 3.1rem;
  padding: .75rem 1.1rem;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-radius: 16px;
  font-size: 1.05rem;
  font-weight: 800;
  text-align: left;
}

.acc-trigger:hover { background: rgba(247, 201, 72, .14); }

.acc-chevron {
  width: .65rem;
  height: .65rem;
  border-right: 2.5px solid var(--husk);
  border-bottom: 2.5px solid var(--husk);
  margin-top: -.3rem;
  transform: rotate(45deg);
  transition: transform .15s ease, margin .15s ease;
}

.acc-trigger[aria-expanded="true"] .acc-chevron {
  margin-top: .3rem;
  transform: rotate(-135deg);
}

.acc-panel {
  padding: .1rem 1.1rem 1.1rem;
}

/* ---------- Form controls ---------- */

.field { margin-bottom: .85rem; }
.field:last-child { margin-bottom: 0; }

label,
.field-label {
  display: block;
  margin-bottom: .35rem;
  font-weight: 700;
}

.hint {
  margin: .25rem 0 0;
  font-size: .88rem;
  line-height: 1.4;
}

.list-hint { margin: 0 0 .75rem; }

input[type="text"],
input[type="url"],
input[type="color"],
textarea,
select {
  width: 100%;
  min-height: 2.75rem;
  padding: .55rem .75rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

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

input[type="color"] {
  padding: .25rem;
  cursor: pointer;
}

input[type="file"] {
  width: 100%;
  min-height: 2.75rem;
  padding: .45rem 0;
}

.toggles {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem .9rem;
}

.check {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 2.75rem;
  margin: 0;
  font-weight: 600;
  cursor: pointer;
}

.check input {
  width: 1.15rem;
  height: 1.15rem;
  accent-color: var(--husk);
}

.segmented {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .4rem;
}

.segmented label {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: 2.75rem;
  margin: 0;
  padding: .35rem .75rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-weight: 600;
  cursor: pointer;
}

.segmented input { accent-color: var(--husk); }

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-top: .85rem;
}

button {
  min-height: 2.75rem;
  padding: .55rem .9rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  font-weight: 700;
}

button:hover { border-color: var(--corn-deep); }

button:disabled {
  cursor: not-allowed;
  opacity: .45;
}

button.primary {
  color: #233d21;
  background: var(--corn);
  border-color: var(--husk);
}

button.primary:hover { background: #f0bc2e; }

button.danger {
  color: #7b341e;
  border-color: #e8b4a0;
  background: #fff5f2;
}

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

/* ---------- Links & text editor rows ---------- */

.item-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.item-empty {
  padding: .85rem;
  color: var(--muted);
  border: 1px dashed var(--line);
  border-radius: 12px;
  text-align: center;
}

.item-row {
  position: relative;
  min-width: 0;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.item-row.is-text { background: #f4f9f1; }

.item-row.expanded {
  border-color: var(--husk);
  box-shadow: 0 0 0 2px rgba(47, 133, 90, .16);
}

.item-head {
  display: flex;
  align-items: center;
  gap: .45rem;
  min-height: 3.4rem;
  padding: .45rem 9.6rem .45rem .3rem;
}

.item-badge {
  flex: none;
  padding: .12rem .45rem;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #233d21;
  background: var(--corn);
  border-radius: 999px;
}

.item-row.is-text .item-badge {
  color: #fff;
  background: var(--husk);
}

.item-summary {
  min-width: 0;
  flex: 1;
}

.item-summary strong,
.item-summary small {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.item-summary small {
  color: var(--muted);
  font-size: .8rem;
}

.item-body {
  padding: .1rem .85rem .85rem;
}

/* Overlay control clusters (editor rows + preview items) */

.item-overlay {
  display: flex;
  align-items: center;
  gap: .25rem;
}

.row-tools {
  position: absolute;
  top: .5rem;
  right: .45rem;
  padding: .15rem;
  background: rgba(255, 253, 245, .92);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.ov-btn {
  display: inline-grid;
  place-items: center;
  width: 2.15rem;
  min-height: 2.15rem;
  height: 2.15rem;
  padding: 0;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 50%;
}

.ov-btn.active {
  color: #fff;
  background: var(--husk);
  border-color: var(--husk-dark);
}

.ov-btn.danger { color: #9b2c2c; }

.drag-handle {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 2rem;
  height: 2.4rem;
  color: var(--muted);
  border-radius: 8px;
  cursor: grab;
  touch-action: none;
}

.drag-handle:hover { color: var(--husk-dark); background: rgba(47, 133, 90, .1); }
.drag-handle:active { cursor: grabbing; }

/* Drag-and-drop feedback */
.sortable { position: relative; }
.sortable.dragging { opacity: .4; }

.sortable.drop-before::before,
.sortable.drop-after::after {
  content: "";
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--husk);
  border-radius: 4px;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .8);
}

.sortable.drop-before::before { top: -.4rem; }
.sortable.drop-after::after { bottom: -.4rem; }

/* ---------- Preview ---------- */

.preview-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .25rem 1rem;
  margin: 0 0 .5rem;
}

.preview-label {
  margin: 0;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}

.preview-label span {
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.status {
  min-height: 1.2rem;
  margin: 0;
  color: var(--husk-dark);
  font-size: .88rem;
}

.preview-frame {
  position: relative;
  padding: 1rem;
  border-radius: 22px;
  background:
    repeating-linear-gradient(-45deg, rgba(247, 201, 72, .1), rgba(247, 201, 72, .1) 8px, transparent 8px, transparent 16px),
    var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

body.is-editing .preview-frame {
  border-color: rgba(47, 133, 90, .55);
}

.edit-toggle {
  position: absolute;
  z-index: 5;
  top: .7rem;
  right: .7rem;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  color: #233d21;
  background: var(--corn);
  border: 2px solid var(--husk);
  border-radius: 50%;
  box-shadow: 0 6px 16px rgba(74, 50, 12, .22);
}

.edit-toggle:hover { background: #f0bc2e; border-color: var(--husk-dark); }

.edit-toggle.active {
  color: #fff;
  background: var(--husk);
  border-color: var(--husk-dark);
}

/* Live preview mirrors export structure */
.export-page {
  width: 100%;
  max-width: 28rem;
  min-height: 30rem;
  margin: 0 auto;
  padding: 2rem 1.1rem 2rem;
  border-radius: 18px;
  text-align: center;
}

.export-profile { position: relative; }

.export-avatar {
  display: grid;
  place-items: center;
  width: 5.5rem;
  height: 5.5rem;
  margin: 0 auto .85rem;
  border-radius: 50%;
  overflow: hidden;
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1;
  background: rgba(255, 255, 255, .18);
}

.export-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.export-name {
  margin: 0 0 .35rem;
  font-size: 1.45rem;
  line-height: 1.2;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.export-bio {
  margin: 0 0 1.15rem;
  font-size: .98rem;
  line-height: 1.45;
  opacity: .92;
  overflow-wrap: anywhere;
}

.export-links {
  display: grid;
  gap: .7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.export-page.layout-tighter .export-links { gap: .45rem; }

.export-link {
  display: block;
  width: 100%;
  padding: .9rem 1rem;
  text-decoration: none;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
  border: 2px solid transparent;
  transition: transform .12s ease, opacity .12s ease;
}

.export-page.shape-rounded .export-link { border-radius: 999px; }
.export-page.shape-square .export-link { border-radius: 8px; }

.export-link:hover {
  transform: translateY(-1px);
  opacity: .94;
}

.export-link .sub {
  display: block;
  margin-top: .2rem;
  font-size: .85rem;
  font-weight: 500;
  opacity: .85;
}

.export-text {
  margin: 0;
  padding: .3rem .5rem;
  font-size: .98rem;
  line-height: 1.5;
  white-space: pre-line;
  overflow-wrap: anywhere;
  opacity: .92;
}

.export-item.is-empty { display: none; }

.export-footer {
  margin: 1.35rem 0 0;
  font-size: .82rem;
  opacity: .75;
}

/* Preview while editing: overlays on items */
.preview-root.editing .export-item.is-empty { display: block; }

.preview-root.editing .export-item.is-empty .export-text {
  min-height: 2.6rem;
  border: 2px dashed currentColor;
  border-radius: 10px;
  opacity: .45;
}

.preview-root.editing .export-item.is-empty .export-text::before { content: "Empty text block"; }

.preview-root.editing .export-link { padding-left: 3rem; padding-right: 5.4rem; cursor: pointer; }
.preview-root.editing .export-link:hover { transform: none; }
.preview-root.editing .export-text { padding: .6rem 5.4rem .6rem 3rem; cursor: pointer; }

.preview-root.editing .export-item,
.preview-root.editing .export-profile {
  border-radius: 14px;
  outline: 2px dashed transparent;
  outline-offset: 3px;
}

.preview-root.editing .export-item:hover,
.preview-root.editing .export-item:focus-within,
.preview-root.editing .export-profile:hover {
  outline-color: rgba(47, 133, 90, .55);
}

.preview-root.editing .export-profile { cursor: pointer; padding: .25rem 0; }

.export-item .item-overlay {
  position: absolute;
  z-index: 2;
  top: 50%;
  transform: translateY(-50%);
}

.export-item .item-overlay-start { left: .4rem; }
.export-item .item-overlay-end { right: .45rem; }

.export-item .drag-handle,
.export-item .ov-btn,
.profile-overlay .ov-btn {
  color: var(--ink);
  background: rgba(255, 253, 245, .95);
  border: 1px solid var(--line);
  box-shadow: 0 2px 6px rgba(31, 41, 51, .18);
}

.export-item .drag-handle { width: 2.15rem; height: 2.15rem; border-radius: 50%; }
.export-item .ov-btn.danger { color: #9b2c2c; }

.profile-overlay {
  position: absolute;
  z-index: 2;
  top: .25rem;
  left: calc(50% + 2.4rem);
}

/* ---------- Footer ---------- */

.page-footer {
  width: min(1180px, calc(100% - 2rem));
  margin: 0 auto 2rem;
  font-size: .92rem;
  line-height: 1.45;
  text-align: center;
}

@media (max-width: 520px) {
  .stage { width: calc(100% - 1rem); margin-top: .75rem; }
  .preview-frame { padding: .5rem; border-radius: 18px; }
  .edit-toggle { top: .5rem; right: .5rem; }
  .export-page { min-height: 0; padding: 1.75rem .85rem 1.5rem; }
  .color-grid { grid-template-columns: 1fr; }
  .header-actions button { min-height: 2.5rem; padding: .45rem .7rem; font-size: .92rem; }
  .brand small { display: none; }
  .item-badge { display: none; }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ---------- Import dialog (CobKit-style) ---------- */

.cob-dialog {
  width: min(36rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  margin: auto;
  padding: 1.35rem 1.4rem 1.25rem;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
  overflow: auto;
}

.cob-dialog::backdrop {
  background: rgba(31, 41, 51, .45);
  backdrop-filter: blur(2px);
}

.dialog-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .55rem;
}

.dialog-eyebrow {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .14em;
  color: var(--husk-dark);
}

.dialog-close {
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  font-size: 1.35rem;
  line-height: 1;
  color: var(--ink);
  background: var(--field);
  cursor: pointer;
}

.dialog-close:hover { background: rgba(247, 201, 72, .35); }

.cob-dialog h2 {
  margin: 0 0 .4rem;
  font-size: 1.45rem;
  letter-spacing: -.02em;
}

.dialog-lead {
  margin: 0 0 1rem;
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.45;
}

.dialog-error {
  margin: 0 0 .85rem;
  padding: .55rem .7rem;
  color: #9b2c2c;
  background: #fff5f5;
  border: 1px solid #feb2b2;
  border-radius: var(--radius);
  font-size: .92rem;
}

.dialog-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .5rem;
  margin-top: .25rem;
}

#importHtmlText {
  min-height: 12rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .85rem;
  line-height: 1.4;
}