:root {
  --bg: #0d0f12;
  --panel: #161a20;
  --panel2: #1d232b;
  --line: #2a323d;
  --text: #e8e6e1;
  --dim: #8b95a1;
  --amber: #f5a623;
  --teal: #2dd4bf;
  --green: #25d366;
  --red: #ef5350;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Heebo', 'Rubik', sans-serif;
  min-height: 100vh;
}

header {
  padding: 24px 28px 0;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #12151a, var(--bg));
}

.logo { font-family: 'Rubik', sans-serif; font-size: 28px; font-weight: 800; }
.logo span { color: var(--amber); }
.sub { color: var(--dim); margin: 4px 0 16px; font-size: 14px; }

nav { display: flex; gap: 6px; }
.tab {
  background: none; border: none; color: var(--dim);
  font-family: inherit; font-size: 15px; font-weight: 600;
  padding: 10px 18px; cursor: pointer;
  border-bottom: 3px solid transparent;
}
.tab.active { color: var(--amber); border-bottom-color: var(--amber); }
.tab:hover { color: var(--text); }

main { padding: 24px 28px; max-width: 1100px; margin: 0 auto; }
.panel { display: none; }
.panel.active { display: block; }

.hint { color: var(--dim); font-size: 14px; margin-bottom: 12px; }
.hint code { color: var(--teal); background: var(--panel2); padding: 1px 6px; border-radius: 4px; }

/* Import */
#paste-box {
  width: 100%; height: 220px; resize: vertical;
  background: var(--panel); color: var(--text);
  border: 1px solid var(--line); border-radius: 10px;
  padding: 14px; font-family: inherit; font-size: 14px;
}
#paste-box:focus { outline: none; border-color: var(--teal); }

button.primary {
  margin-top: 12px; background: var(--amber); color: #1a1200;
  border: none; border-radius: 10px; padding: 12px 26px;
  font-family: inherit; font-size: 16px; font-weight: 700; cursor: pointer;
}
button.primary:hover { filter: brightness(1.1); }
button.secondary {
  background: var(--panel2); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 16px; font-family: inherit; font-size: 14px; cursor: pointer;
}
button.secondary:hover { border-color: var(--teal); }

#parse-preview { margin-top: 20px; }
.preview-summary { font-size: 15px; margin-bottom: 10px; }
.preview-summary b { color: var(--teal); }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: right; color: var(--dim); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--line); }
td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
tr.known td { opacity: 0.45; }
.badge { font-size: 12px; padding: 2px 8px; border-radius: 20px; white-space: nowrap; }
.badge.new { background: rgba(45, 212, 191, .15); color: var(--teal); }
.badge.known { background: var(--panel2); color: var(--dim); }

/* People cards */
.toolbar { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.toolbar select {
  background: var(--panel); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 12px; font-family: inherit; font-size: 14px;
}
.count { color: var(--dim); font-size: 14px; }

.person {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; padding: 16px 18px; margin-bottom: 12px;
}
.person-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.person-name { font-size: 18px; font-weight: 700; }
.person-meta { color: var(--dim); font-size: 13px; }
.person-meta .days { color: var(--amber); font-weight: 600; }
.person-bio { color: var(--dim); font-size: 13px; margin-top: 6px; white-space: pre-wrap; }

.status-pill {
  margin-inline-start: auto;
  border-radius: 20px; padding: 4px 12px; font-size: 13px; font-weight: 600;
  border: 1px solid var(--line); background: var(--panel2); color: var(--text);
  font-family: inherit; cursor: pointer;
}
.status-pending  { color: var(--amber); }
.status-contacted{ color: var(--teal); }
.status-approved { color: var(--green); }
.status-joined   { color: var(--green); }
.status-declined { color: var(--red); }

.person-actions { display: flex; gap: 10px; margin-top: 12px; align-items: center; flex-wrap: wrap; }
.person-actions select {
  background: var(--panel2); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 12px; font-family: inherit; font-size: 14px;
}
.wa-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--green); color: #06250f; text-decoration: none;
  border-radius: 10px; padding: 9px 18px; font-weight: 700; font-size: 15px;
}
.wa-btn:hover { filter: brightness(1.08); }
.msg-preview {
  margin-top: 10px; background: var(--panel2); border: 1px dashed var(--line);
  border-radius: 10px; padding: 12px; font-size: 13.5px; color: var(--text);
  white-space: pre-wrap;
}
.log-line { color: var(--dim); font-size: 12px; margin-top: 8px; }

/* Templates */
.template-card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; padding: 16px 18px; margin-bottom: 14px;
}
.template-card h3 { font-size: 16px; margin-bottom: 8px; color: var(--teal); }
.template-card textarea {
  width: 100%; height: 130px; resize: vertical;
  background: var(--panel2); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px;
  padding: 10px; font-family: inherit; font-size: 14px;
}
.template-card .saved { color: var(--green); font-size: 13px; margin-inline-start: 10px; }

.empty { color: var(--dim); text-align: center; padding: 40px 0; font-size: 15px; }