:root {
  --paper: #faf7f1;
  --ink: #26221d;
  --muted: #857c70;
  --line: #e7e0d4;
  --accent: #e5603b;       /* 番茄橙：主按钮 */
  --accent-ink: #fff;
  --soft: #f3ede3;

  /* 四种形式各一个颜色 */
  --look: #2f8f83;
  --move: #e5603b;
  --guess: #c39a1c;
  --live: #8a5ba8;
  --mode: var(--accent);

  --radius: 14px;
  --font: -apple-system, "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", sans-serif;
}

body[data-mode="look"]  { --mode: var(--look); }
body[data-mode="move"]  { --mode: var(--move); }
body[data-mode="guess"] { --mode: var(--guess); }
body[data-mode="live"]  { --mode: var(--live); }

* { box-sizing: border-box; }

html { font-size: clamp(16px, 0.6vw + 13px, 21px); }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

.wrap {
  max-width: 40rem;
  margin: 0 auto;
  padding: 12vh 1rem 4rem;
}

.view[hidden] { display: none; }

/* ---------- 首页 ---------- */
.brand {
  font-size: 3rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  margin: 0;
  display: inline-block;
  position: relative;
}
.brand::after {            /* 一笔“抓痕” */
  content: "";
  position: absolute;
  left: 0.1em; right: -0.2em; bottom: 0.05em;
  height: 0.28em;
  background: var(--accent);
  opacity: 0.22;
  border-radius: 0.3em;
  transform: rotate(-1.5deg);
  z-index: -1;
}
.lead { font-size: 1.15rem; margin: 0.6rem 0 1.6rem; }

.big-input, textarea, input {
  width: 100%;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  padding: 0.9rem 1rem;
  resize: vertical;
  outline: none;
  transition: border-color 0.15s;
}
.big-input { font-size: 1.1rem; min-height: 8rem; }
textarea:focus, input:focus { border-color: var(--accent); }

.row { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1rem; }

.btn {
  border: 1.5px solid var(--ink);
  background: transparent;
  border-radius: 999px;
  padding: 0.7rem 1.6rem;
  font-weight: 600;
  transition: transform 0.1s, background 0.15s;
}
.btn:active { transform: scale(0.97); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { filter: brightness(1.05); }
.btn.ghost { border-color: transparent; color: var(--muted); }
.btn:disabled { opacity: 0.5; }

.link {
  border: 0;
  background: none;
  padding: 0.2rem 0;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 0.3em;
  text-decoration-thickness: 2px;
}
.link:hover { text-decoration-color: var(--mode); }

.muted { color: var(--muted); }

.examples { margin-top: 3rem; font-size: 0.92rem; }
.examples .muted { display: block; margin-bottom: 0.3rem; }
.example {
  display: block;
  border: 0;
  background: none;
  padding: 0.25rem 0;
  color: var(--muted);
  text-align: left;
}
.example:hover { color: var(--ink); }
.example::before { content: "→ "; opacity: 0.5; }

/* ---------- 追问 ---------- */
.quote {
  color: var(--muted);
  border-left: 3px solid var(--line);
  padding-left: 0.8rem;
  margin: 0 0 2rem;
}
.step-title { font-size: 1.5rem; margin: 0 0 1rem; }
.q { display: block; margin-bottom: 1.2rem; }
.q span { display: block; margin-bottom: 0.4rem; }

/* ---------- 正在抓 ---------- */
.loading { text-align: center; padding-top: 10vh; color: var(--muted); font-size: 1.1rem; }
.claw { display: inline-flex; gap: 0.4rem; margin-bottom: 0.8rem; }
.claw span {
  width: 0.7rem; height: 0.7rem;
  border-radius: 50%;
  background: var(--accent);
  animation: hop 0.9s infinite ease-in-out;
}
.claw span:nth-child(2) { animation-delay: 0.15s; }
.claw span:nth-child(3) { animation-delay: 0.3s; }
@keyframes hop {
  0%, 100% { transform: translateY(0); opacity: 0.4; }
  50% { transform: translateY(-0.6rem); opacity: 1; }
}

/* ---------- 结果 ---------- */
.mode-head { display: flex; gap: 0.9rem; align-items: flex-start; }
.mode-icon {
  flex: none;
  width: 2.8rem; height: 2.8rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--mode) 14%, transparent);
  color: var(--mode);
  display: grid; place-items: center;
}
.mode-icon svg {
  width: 58%; height: 58%;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.mode-icon.small { width: 1.9rem; height: 1.9rem; }
.mode-label { margin: 0; font-weight: 700; font-size: 1.15rem; color: var(--mode); }
.mode-reason { margin: 0.1rem 0 0; }

.idea-title { font-size: 1.6rem; line-height: 1.45; margin: 2.2rem 0 0.4rem; }
.shape { color: var(--muted); font-size: 0.9rem; margin: 0 0 1.5rem; }
.shape:empty { display: none; }

.block { padding: 1.1rem 0; border-top: 1px solid var(--line); }
.block h3 { font-size: 0.85rem; color: var(--muted); font-weight: 600; margin: 0 0 0.3rem; letter-spacing: 0.04em; }
.block p { margin: 0; }
.block.attract {
  border-top: 0;
  background: color-mix(in srgb, var(--mode) 9%, transparent);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem;
  margin: 0.4rem 0;
}
.block.attract h3 { color: var(--mode); }

.steps { margin: 0; padding-left: 1.3rem; }
.steps li { margin: 0.15rem 0; }
.steps li::marker { color: var(--mode); font-weight: 700; }

.tweak { margin-top: 1.8rem; display: flex; gap: 0.6rem; align-items: center; }
.dot { color: var(--line); }

.switch-panel { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.8rem; }
.switch-panel[hidden] { display: none; }
.mode-chip {
  display: inline-flex; align-items: center; gap: 0.5rem;
  border: 1.5px solid var(--line);
  background: #fff;
  border-radius: 999px;
  padding: 0.3rem 1rem 0.3rem 0.35rem;
}
.mode-chip[data-mode="look"]  { --mode: var(--look); }
.mode-chip[data-mode="move"]  { --mode: var(--move); }
.mode-chip[data-mode="guess"] { --mode: var(--guess); }
.mode-chip[data-mode="live"]  { --mode: var(--live); }
.mode-chip:hover { border-color: var(--mode); }

.actions { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 2rem; }
.actions[hidden], .note-box[hidden], .support[hidden] { display: none; }

.note-box { margin-top: 2rem; padding: 1.2rem 0; }
.note-box p { margin: 0 0 0.3rem; }
.note-box .big { font-size: 1.3rem; font-weight: 700; }

.support { margin-top: 2rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.support-title { font-size: 1.3rem; margin: 0 0 1rem; }
.support label { display: block; margin-bottom: 0.9rem; font-size: 0.92rem; color: var(--muted); }
.support input, .support textarea { margin-top: 0.3rem; color: var(--ink); font-size: 1rem; }

.restart { margin-top: 3rem; font-size: 0.9rem; }

/* ---------- 带走这个点子 ---------- */
.handoff-idea { color: var(--muted); font-size: 0.92rem; margin: -0.4rem 0 1.2rem; overflow-wrap: anywhere; }
.copy-fail { color: var(--accent); font-size: 0.92rem; margin: 0.6rem 0 0; }
.copy-fail[hidden] { display: none; }
.handoff-toggle { margin: 1.2rem 0 0.6rem; font-size: 0.95rem; }
.prompt-box {
  display: block;
  height: 22rem;
  max-height: 60vh;
  resize: vertical;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--ink);
  background: #fff;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.prompt-box[hidden] { display: none; }
.handoff-tips { margin-top: 2.4rem; padding-top: 1.2rem; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.92rem; }
.handoff-tips p { margin: 0 0 0.6rem; }

.toast {
  position: fixed; left: 50%; bottom: 2rem; transform: translateX(-50%);
  background: var(--ink); color: var(--paper);
  padding: 0.6rem 1.2rem; border-radius: 999px;
  font-size: 0.92rem; max-width: calc(100% - 2rem);
}
.toast[hidden] { display: none; }
.toast-retry {
  margin-left: 0.8rem; border: 0; background: none; padding: 0;
  color: var(--paper); font-weight: 700; text-decoration: underline; text-underline-offset: 0.25em;
}
.toast-retry[hidden] { display: none; }

@media (max-width: 520px) {
  .wrap { padding-top: 7vh; }
  .brand { font-size: 2.4rem; }
  .idea-title { font-size: 1.35rem; }
  .actions .btn { flex: 1; }
}

/* ---------- 后台 ---------- */
.admin .wrap { max-width: 72rem; padding-top: 3rem; }
.admin h1 { font-size: 1.5rem; margin: 0; }
.admin-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
.admin table { width: 100%; border-collapse: collapse; font-size: 0.88rem; background: #fff; border-radius: var(--radius); overflow: hidden; }
.admin th, .admin td { padding: 0.7rem 0.8rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.admin th { background: var(--soft); font-weight: 600; white-space: nowrap; }
.admin td.nowrap { white-space: nowrap; }
.admin select { font: inherit; padding: 0.2rem 0.4rem; border-radius: 8px; border: 1px solid var(--line); background: #fff; }
.admin details summary { cursor: pointer; color: var(--muted); }
.admin details dl { margin: 0.5rem 0 0; }
.admin details dt { color: var(--muted); font-size: 0.8rem; margin-top: 0.5rem; }
.admin details dd { margin: 0; }
.admin .empty { color: var(--muted); padding: 3rem 0; text-align: center; }
.admin .table-scroll { overflow-x: auto; }
.login { max-width: 22rem; }
.login .error { color: var(--accent); }
.admin .shape-rows div { margin: 0.15rem 0; }
.admin .shape-rows ul { margin: 0.1rem 0 0.3rem; padding-left: 1.2rem; }