:root { --gap: 12px; --radius: 10px; --border: #e5e7eb; --fg: #111827; --muted: #6b7280; }
* { box-sizing: border-box; }
body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif; color: var(--fg); margin: 0; }
.container { max-width: 820px; margin: 40px auto; padding: 0 16px; }
h1 { margin: 0 0 20px; font-size: 24px; }
.label { display: block; margin: 16px 0 6px; color: var(--muted); font-size: 13px; }
.input, .textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); font: inherit; }
.textarea { white-space: pre-wrap; }
.row { display: flex; gap: var(--gap); align-items: center; margin-top: 12px; flex-wrap: wrap; }
.btn { padding: 8px 14px; border: 1px solid var(--border); background: #fff; border-radius: 8px; cursor: pointer; }
.btn.primary { background: #111827; color: #fff; border-color: #111827; }
.hint { color: var(--muted); font-size: 12px; }
.list { margin-top: 24px; display: grid; gap: var(--gap); }
.item { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; background: #fff; }
.meta { display: flex; gap: 8px; font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.content { margin: 0; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }