:root {
  --green: #06c755;
  --green-dark: #05a948;
  --amber: #e8a33d;
  --red: #de3b3b;
  --grey: #8b95a1;

  --bg: #f4f6f8;
  --surface: #ffffff;
  --surface-2: #f0f2f5;
  --border: #e3e7ec;
  --text: #1f2328;
  --text-dim: #5f6368;
  --text-faint: #9aa0a6;
  --shadow: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04);
  --radius: 14px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14171a;
    --surface: #1e2226;
    --surface-2: #262b30;
    --border: #333a41;
    --text: #e8eaed;
    --text-dim: #b0b6bd;
    --text-faint: #7d858d;
    --shadow: none;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0 0 40px;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC",
    "PingFang TC", "Microsoft JhengHei", sans-serif;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: 560px;
  margin: 0 auto;
  padding: 16px;
}

/* ── 區塊 ─────────────────────────────────────────── */

.card {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
  margin-bottom: 14px;
  border: 1px solid var(--border);
}

.card--accent {
  border-top: 4px solid var(--green);
}
.card--accent.is-full {
  border-top-color: var(--amber);
}
.card--accent.is-closed {
  border-top-color: var(--grey);
}
.card--accent.is-cancelled {
  border-top-color: var(--red);
}

h1 {
  font-size: 21px;
  line-height: 1.35;
  margin: 0 0 4px;
  font-weight: 700;
}

h2 {
  font-size: 15px;
  margin: 0 0 12px;
  font-weight: 700;
  color: var(--text-dim);
}

.muted {
  color: var(--text-dim);
}
.faint {
  color: var(--text-faint);
  font-size: 13px;
}

/* ── 狀態標籤 ─────────────────────────────────────── */

.pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: var(--green);
  vertical-align: middle;
}
.pill.is-full {
  background: var(--amber);
}
.pill.is-closed {
  background: var(--grey);
}
.pill.is-cancelled {
  background: var(--red);
}
.pill.is-waitlist {
  background: var(--amber);
}

/* ── 資訊列 ───────────────────────────────────────── */

.info {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-top: 8px;
  font-size: 14px;
}
.info .ico {
  width: 20px;
  flex: 0 0 20px;
  text-align: center;
}

/* ── 計數 ─────────────────────────────────────────── */

.counts {
  display: flex;
  margin-top: 16px;
  border-top: 1px solid var(--border);
  padding-top: 14px;
}
.counts div {
  flex: 1;
  text-align: center;
}
.counts b {
  display: block;
  font-size: 22px;
  line-height: 1.2;
}
.counts span {
  font-size: 12px;
  color: var(--text-faint);
}

/* ── 名單 ─────────────────────────────────────────── */

.list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
}
.list li:last-child {
  border-bottom: none;
}
.list .n {
  flex: 0 0 24px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}
.list .nm {
  flex: 1;
  min-width: 0;
}
.list .nm small {
  display: block;
  color: var(--text-faint);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 帶來的朋友：淡一階，一眼看得出是附屬於上一列的人 */
.list li.guest .nm {
  color: var(--text-dim);
}
.list li.guest .n {
  opacity: 0.55;
}
.list .me {
  font-weight: 700;
  color: var(--green);
}
.list .rm {
  flex: 0 0 auto;
  background: none;
  border: none;
  color: var(--text-faint);
  font-size: 18px;
  cursor: pointer;
  padding: 0 4px;
}

/* ── 表單 ─────────────────────────────────────────── */

label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
  margin: 14px 0 5px;
}
label:first-of-type {
  margin-top: 0;
}

input,
select,
textarea {
  width: 100%;
  padding: 11px 12px;
  font: inherit;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  appearance: none;
}
input:focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--green);
  outline-offset: -1px;
}
textarea {
  min-height: 78px;
  resize: vertical;
}

.row {
  display: flex;
  gap: 10px;
}
.row > * {
  flex: 1;
  min-width: 0;
}

.hint {
  font-size: 12px;
  color: var(--text-faint);
  margin-top: 5px;
}

/* 選了「拿到連結的人都可以」時的那段說明 —— 那是要人讀完才選的代價，
   用跟 .tip.warn 同一組琥珀色，不能跟旁邊的灰字說明混成一片 */
.hint.warn-text {
  color: #8a5a12;
}

/* ── 按鈕 ─────────────────────────────────────────── */

.btn {
  display: block;
  width: 100%;
  padding: 13px;
  margin-top: 10px;
  font: inherit;
  font-weight: 700;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--green);
  color: #fff;
  cursor: pointer;
}
.btn:active {
  background: var(--green-dark);
}
.btn[disabled] {
  opacity: 0.5;
  cursor: default;
}
.btn.secondary {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--border);
}
.btn.danger {
  background: transparent;
  color: var(--red);
  border-color: var(--border);
}

/* ── 群組選擇 ─────────────────────────────────────── */

.pick {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.pick:last-child {
  border-bottom: none;
}
/* 取消後列出「發佈過哪些群組」：夾在說明文字底下，要跟上面那段拉開一點 */
.pick-list {
  margin-top: 10px;
  border-top: 1px solid var(--border);
}
/* 已發佈的群組：不是可勾的選項，是狀態列 */
.pick.done {
  color: var(--text-dim);
  cursor: default;
}
.pick.done .ico {
  flex: 0 0 20px;
  text-align: center;
}
/* 剛被收回的那一列：❌ + 兩顆鈕，名字要讓得出位置給它們 */
.pick.off .nm {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 「設成群組公告」教學 —— LINE 沒有置頂 API，只能教使用者自己設。
   放在卡片裡當一個區塊，所以不再自帶外距與陰影。 */
.tip {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 14px 0 0;
}

/* 發佈成功頁 */
.done-mark {
  margin: 8px 0 10px;
  font-size: 38px;
  line-height: 1;
  text-align: center;
}
.done-title {
  text-align: center;
}
.done-sub {
  margin: 0;
  text-align: center;
  font-size: 14px;
}
.tip .tip-h {
  display: block;
  margin-bottom: 6px;
  font-size: 15px;
  color: var(--text);
}
.tip p {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-dim);
}
/*
 * 上面的 `input { appearance: none }` 是給文字框用的，但它也會把 checkbox 的
 * 原生打勾一起吃掉 —— 勾了跟沒勾長得一模一樣。所以這裡自己畫一個。
 */
.pick input[type='checkbox'] {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  padding: 0;
  border: 2px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  position: relative;
  cursor: pointer;
}
.pick input[type='checkbox']:checked {
  background: var(--green);
  border-color: var(--green);
}
.pick input[type='checkbox']:checked::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}
/* 勾起來的那一列整列反白，在小螢幕上比只看 22px 的方框清楚得多 */
.pick.on {
  color: var(--green);
  font-weight: 600;
}
.pick .nm {
  flex: 1;
  min-width: 0;
}
/* 已發佈那一列右側的「取消發佈」：是次要動作，做成一顆小小的文字鈕 */
.pick .rm {
  flex: 0 0 auto;
  padding: 5px 10px;
  font: inherit;
  font-size: 12px;
  color: var(--text-faint);
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
}
.pick .rm[data-armed='1'] {
  color: var(--red);
  border-color: var(--red);
}
/* 收回之後那一列的「通知該群組」：同一個位置、同一顆小鈕，但它是要人去按的下一步 */
.pick .rm.go {
  color: var(--green);
  border-color: var(--green);
  font-weight: 600;
}
.pick .rm[disabled] {
  opacity: 0.5;
}

/* ── 其他 ─────────────────────────────────────────── */

.link-row {
  display: block;
  padding: 13px 0;
  border-bottom: 1px solid var(--border);
  color: inherit;
  text-decoration: none;
}
.link-row:last-child {
  border-bottom: none;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  background: #1f2328;
  color: #fff;
  padding: 11px 18px;
  border-radius: 999px;
  font-size: 14px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  z-index: 50;
  max-width: 90vw;
  text-align: center;
}
.toast.err {
  background: var(--red);
}

.center {
  text-align: center;
  padding: 48px 16px;
  color: var(--text-dim);
}

/* 剪貼簿被 LINE 內建瀏覽器擋掉時，攤開網址讓人長按複製 */
.link-out {
  width: 100%;
  margin-top: 8px;
  font-size: 12px;
  word-break: break-all;
}

/*
 * 重點提示（沒把 bot 加進群組會少掉哪些功能）。
 * 這是最容易踩的坑，跟一般的 .tip 用同一個版型但換成琥珀色，
 * 才不會跟旁邊的說明混成一片、被整段略過。
 */
.tip.warn {
  background: #fdf6e9;
  border-color: var(--amber);
}
.tip.warn .tip-h {
  color: #8a5a12;
}

/* ── 把人直接放進名單 ─────────────────────────────── */

/* 勾選列沿用群組選擇的 .pick，只多一個右側的「帶幾位」 */
.seed-plus-box {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--text-faint);
  white-space: nowrap;
}
.seed-plus {
  width: 3.6em;
  padding: 7px 8px;
  margin: 0 0 0 4px;
  text-align: center;
}

/* 「複製」跟活動標題同一列，所以不能撐滿寬度 */
.btn-sm {
  flex: none;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 14px;
  color: inherit;
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

/* 我的活動：標題吃掉剩下的寬度，「複製」靠右 */
.evt-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.evt-main {
  flex: 1;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

/* 偶爾才用的動作收起來放，主辦面板已經夠長了 */
.fold {
  margin-top: 14px;
}
.fold > summary {
  padding: 11px 0;
  font-weight: 500;
  cursor: pointer;
}