/* Modal styles */
.modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.3);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.modal-overlay[style*="display: flex"] {
  display: flex !important;
}
.modal-box {
  background: #fff;
  padding: 24px 20px 16px 20px;
  border-radius: 8px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.15);
  min-width: 260px;
  max-width: 90vw;
}
.modal-actions {
  margin-top: 18px;
  text-align: right;
}
.modal-actions button {
  margin-left: 8px;
}
#modalCancelBtn {
  display: none;
}
#modalMessage { white-space: pre-line; }
/* --- Added custom styles --- */
:root {
        --cm: 38px; /* ~1cm on most displays */
        --gap: 12px;
        --radius: 14px;
        --card: #ffffff;
        --muted: #6b7280; /* slate-500 */
        --line: #e5e7eb; /* gray-200 */
      }
      html,
      body {
        margin: 0;
        padding: 0;
        background: #f8fafc;
        font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
        color: #0f172a;
      }
      .wrap {
        max-width: 1100px;
        margin: 28px auto 60px;
        padding: 0 16px;
      }
      h1 {
        font-size: clamp(20px, 2.2vw, 28px);
        margin: 0 0 14px;
        font-weight: 650;
        letter-spacing: -0.01em;
      }
      .card {
        background: var(--card);
        border: 1px solid var(--line);
        border-radius: var(--radius);
        box-shadow: 0 5px 18px rgba(2, 6, 23, 0.06);
      }
      .table-card {
        padding: 12px;
      }
      table {
        width: 100%;
        border-collapse: collapse;
        table-layout: fixed;
      }
      thead th {
        position: sticky;
        top: 0;
        background: #f8fafc;
        z-index: 1;
      }
      th,
      td {
        border-bottom: 1px solid var(--line);
        padding: 10px 10px;
        text-align: left;
        font-size: 14px;
        vertical-align: middle;
      }
      th:nth-child(1),
      td:nth-child(1) {
        width: 20%;
      }
      th:nth-child(2),
      td:nth-child(2) {
        width: 12%;
        text-align: center;
      }
      th:nth-child(3),
      td:nth-child(3) {
        width: 28%;
      }
      th:nth-child(4),
      td:nth-child(4) {
        width: 13%;
      }
      th:nth-child(5),
      td:nth-child(5) {
        width: 13%;
      }
      th:nth-child(6),
      td:nth-child(6) {
        width: 14%;
      }
      tbody tr:hover {
        background: #f9fafb;
      }
      .emoji {
        font-size: 18px;
      }

      .controls {
        margin-top: var(--cm);
      }
      .row {
        display: grid;
        grid-template-columns: 1.2fr 1fr 1.6fr 1.1fr 1.1fr 1.2fr auto;
        gap: 20px;
        align-items: end;
      }
      .row > div {
        display: flex;
        flex-direction: column;
        gap: 6px;
      }
      label {
        font-size: 12px;
        color: var(--muted);
      }
      select,
      input,
      button {
        height: 38px;
        border-radius: 10px;
        border: 1px solid var(--line);
        padding: 0 10px;
        font-size: 14px;
        background: #fff;
      }
      select {
        padding-right: 28px;
      }
      button.primary {
        background: #111827;
        color: #fff;
        border-color: #111827;
        cursor: pointer;
      }
      button.ghost {
        background: #fff;
        color: #111827;
        border-color: var(--line);
        cursor: pointer;
      }
      .tiny {
        font-size: 12px;
        color: var(--muted);
      }
      .muted {
        color: var(--muted);
      }
      a.story {
        color: #0ea5e9;
        text-decoration: none;
      }
      a.story:hover {
        text-decoration: underline;
      }
      .topbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;
      }
      .topbar .rhs {
        display: flex;
        gap: 10px;
        align-items: center;
      }
      .tag {
        font-size: 12px;
        color: #475569;
      }
      .reset {
        font-size: 12px;
        color: #ef4444;
        text-decoration: underline;
        cursor: pointer;
      }

      .admin {
        margin-top: var(--cm);
        display: grid;
        grid-template-columns: 1fr;
        gap: 16px;
      }
      .form-card {
        padding: 14px;
      }
      .form-grid {
        display: grid;
        grid-template-columns: 1fr 1.2fr 0.8fr auto;
        gap: 20px;
        align-items: end;
      }
      .inline {
        display: flex;
        gap: 8px;
        align-items: end;
      }
      ul.list {
        list-style: none;
        padding: 0;
        margin: 10px 0 0;
      }
      ul.list li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border: 1px solid var(--line);
        border-radius: 10px;
        padding: 6px 10px;
        margin-bottom: 6px;
        background: #fff;
      }
      ul.list li .actions {
        display: flex;
        gap: 6px;
      }

      @media (max-width: 960px) {
        .row {
          grid-template-columns: 1fr;
        }
        .form-grid {
          grid-template-columns: 1fr;
        }
        th:nth-child(1),
        td:nth-child(1),
        th:nth-child(2),
        td:nth-child(2),
        th:nth-child(3),
        td:nth-child(3),
        th:nth-child(4),
        td:nth-child(4),
        th:nth-child(5),
        td:nth-child(5),
        th:nth-child(6),
        td:nth-child(6) {
          width: auto;
        }
      }
/* feature-runway main styles */
:root {
  --cm: 38px;
  --gap: 12px;
  --radius: 14px;
  --card: #ffffff;
  --muted: #6b7280;
  --line: #e5e7eb;
}
html, body {
  margin: 0;
  padding: 0;
  background: #f8fafc;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: #0f172a;
}
.wrap {
  max-width: 1100px;
  margin: 28px auto 60px;
  padding: 0 16px;
}
h1 {
  font-size: clamp(20px, 2.2vw, 28px);
  margin: 0 0 14px;
  font-weight: 650;
  letter-spacing: -0.01em;
}
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 5px 18px rgba(2, 6, 23, 0.06);
}
.table-card {
  padding: 12px;
}
table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
thead th {
  position: sticky;
  top: 0;
  background: #f8fafc;
  z-index: 1;
}
th, td {
  border-bottom: 1px solid var(--line);
  padding: 10px 10px;
  text-align: left;
  font-size: 14px;
  vertical-align: middle;
}
th:nth-child(1), td:nth-child(1) { width: 20%; }
th:nth-child(2), td:nth-child(2) { width: 12%; text-align: left; }
th:nth-child(3), td:nth-child(3) { width: 28%; }
th:nth-child(4), td:nth-child(4) { width: 13%; }
th:nth-child(5), td:nth-child(5) { width: 13%; }
th:nth-child(6), td:nth-child(6) { width: 14%; }
tbody tr:hover { background: #f9fafb; }
.emoji { font-size: 18px; }
.controls { margin-top: var(--cm); }
.row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1.6fr 1.1fr 1.1fr 1.2fr auto;
  gap: var(--gap);
  align-items: end;
}
.row > div { display: flex; flex-direction: column; gap: 6px; }
label { font-size: 12px; color: var(--muted); }
select, input, button {
  height: 38px;
  border-radius: 10px;
  border: 1px solid var(--line);
  padding: 0 10px;
  font-size: 14px;
  background: #fff;
}
select { padding-right: 28px; }
button.primary {
  background: #111827;
  color: #fff;
  border-color: #111827;
  cursor: pointer;
}
button.ghost {
  background: #fff;
  color: #111827;
  border-color: var(--line);
  cursor: pointer;
}
.tiny { font-size: 12px; color: var(--muted); }
.muted { color: var(--muted); }
a.story { color: #0ea5e9; text-decoration: none; }
a.story:hover { text-decoration: underline; }
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.topbar .rhs { display: flex; gap: 10px; align-items: center; }
.tag { font-size: 12px; color: #475569; }
.reset { font-size: 12px; color: #ef4444; text-decoration: underline; cursor: pointer; }
.admin { margin-top: var(--cm); display: grid; grid-template-columns: 1fr; gap: 16px; }
.form-card { padding: 14px; }
.form-grid { display: grid; grid-template-columns: 1fr 1.2fr 0.8fr auto; gap: 10px; align-items: end; }
.inline { display: flex; gap: 8px; align-items: end; }
ul.list { list-style: none; padding: 0; margin: 10px 0 0; }
ul.list li { display: flex; justify-content: space-between; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; margin-bottom: 6px; background: #fff; }
ul.list li .actions { display: flex; gap: 6px; }
@media (max-width: 960px) {
  .row, .form-grid { grid-template-columns: 1fr; }
  th, td { width: auto !important; }
}
/* Custom for edit.html */
.edit-link { margin-left: 16px; font-size: 13px; text-decoration: underline; }
.mb-8 { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; }
.flex-1 { flex: 1; }
.block { display: block; }
.gap-20 { gap: 20px; }