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

body {
  font-family: 'Segoe UI', 'Microsoft YaHei', 'PingFang SC', sans-serif;
  background: #f5f6f8;
  min-height: 100vh;
  color: #33333c;
}

/* ---------- top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 22px;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid #e6e8ec;
}
.topbar .brand { font-size: 1.05rem; font-weight: 600; color: #1a1a22; letter-spacing: 1px; text-decoration: none; }
.topbar nav { display: flex; gap: 6px; }
.topbar nav a {
  color: #5a5a66; text-decoration: none; font-size: 0.85rem;
  padding: 6px 12px; border-radius: 8px; transition: all .2s;
}
.topbar nav a:hover { color: #1a1a22; background: #eef0f4; }

main { max-width: 860px; margin: 0 auto; padding: 26px 20px 60px; }

/* ---------- search ---------- */
.searchbox { display: flex; gap: 10px; margin-bottom: 16px; }
.searchbox input {
  flex: 1; padding: 12px 16px; font-size: 1rem;
  background: #fff; border: 1px solid #d9dce2;
  border-radius: 12px; color: #1a1a22; outline: none; transition: border .2s;
}
.searchbox input:focus { border-color: #6ea8ff; box-shadow: 0 0 0 3px rgba(110,168,255,0.15); }
.searchbox input::placeholder { color: #a0a3ad; }

/* ---------- tags ---------- */
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.tag {
  font-size: 0.8rem; padding: 5px 12px; border-radius: 999px;
  background: #fff; border: 1px solid #d9dce2;
  color: #5a5a66; cursor: pointer; user-select: none; transition: all .2s;
}
.tag:hover { color: #1a1a22; border-color: #6ea8ff; }
.tag.active { background: #e8f1ff; border-color: #6ea8ff; color: #1c5fd0; font-weight: 500; }
.tag .cnt { opacity: .5; margin-left: 3px; font-size: 0.72rem; }

/* ---------- list ---------- */
.list { display: flex; flex-direction: column; gap: 12px; }
.card {
  display: block; text-decoration: none; color: inherit;
  background: #fff; border: 1px solid #e6e8ec;
  border-radius: 14px; padding: 18px 20px; transition: all .2s;
}
.card:hover { border-color: #6ea8ff; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(30,60,120,0.08); }
.card h3 { font-size: 1.05rem; font-weight: 600; color: #1a1a22; margin-bottom: 8px; line-height: 1.45; }
.card h3 mark { background: #ffe9a8; color: #7a5a00; border-radius: 3px; padding: 0 2px; }
.card .meta { font-size: 0.78rem; color: #8a8d98; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.card .meta .src { color: #1c5fd0; }
.card .snippet { font-size: 0.85rem; color: #6a6d78; margin-top: 8px; line-height: 1.6; }
.card .snippet mark { background: #ffe9a8; color: #7a5a00; border-radius: 3px; padding: 0 1px; }

.empty {
  text-align: center; color: #a0a3ad; padding: 70px 20px; font-size: 0.95rem; line-height: 2;
}

/* ---------- article detail ---------- */
.back { display: inline-block; color: #1c5fd0; text-decoration: none; font-size: 0.9rem; margin-bottom: 18px; }
.back:hover { text-decoration: underline; }

.article {
  background: #fff; border: 1px solid #e6e8ec; border-radius: 16px; padding: 34px 38px;
  box-shadow: 0 2px 12px rgba(30,60,120,0.04);
}
.article h1 { font-size: 1.5rem; font-weight: 700; color: #16161d; line-height: 1.4; margin-bottom: 14px; }
.article .meta {
  font-size: 0.82rem; color: #8a8d98; display: flex; gap: 14px; flex-wrap: wrap;
  align-items: center; margin-bottom: 26px; padding-bottom: 18px; border-bottom: 1px solid #eef0f4;
}
.article .meta a { color: #1c5fd0; text-decoration: none; }
.article .meta a:hover { text-decoration: underline; }
.article .tags-row { display: flex; gap: 6px; flex-wrap: wrap; }
.article .tags-row .tag { cursor: default; }

.article .content { font-size: 1.02rem; line-height: 1.9; color: #33333c; word-break: break-word; }
.article .content p { margin-bottom: 1.1em; }
.article .content h1, .article .content h2, .article .content h3 { color: #16161d; margin: 1.4em 0 0.6em; line-height: 1.4; }
.article .content h2 { font-size: 1.25rem; }
.article .content h3 { font-size: 1.1rem; }
.article .content img {
  max-width: 100%; height: auto; border-radius: 10px; margin: 0.6em 0;
  display: block; border: 1px solid #eef0f4;
}
.article .content blockquote {
  border-left: 3px solid #6ea8ff; padding: 4px 14px;
  color: #5a5a66; background: #f7f9fc; border-radius: 0 8px 8px 0; margin: 1em 0;
}
.article .content a { color: #1c5fd0; }
.article .content ul, .article .content ol { margin: 0.6em 0 1em 1.6em; }
.article .content li { margin-bottom: 0.35em; }
.article .content pre {
  background: #f2f3f7; border: 1px solid #e6e8ec;
  border-radius: 10px; padding: 14px; overflow-x: auto; font-size: 0.88rem; margin: 1em 0;
}
.article .content .table-wrap { overflow-x: auto; margin: 1em 0; -webkit-overflow-scrolling: touch; }
.article .content table {
  width: 100%; border-collapse: collapse; font-size: 0.88rem; line-height: 1.55;
}
.article .content th, .article .content td {
  border: 1px solid #c3c9d4; padding: 8px 10px; text-align: left; vertical-align: top;
}
.article .content th {
  background: #eef2f8; color: #16161d; font-weight: 600; white-space: nowrap;
}
.article .content tr:nth-child(even) td { background: #fafbfd; }
.article .content code { background: #eef0f4; border-radius: 4px; padding: 1px 6px; font-size: 0.9em; }
.article .content pre code { background: none; padding: 0; }

.del-area {
  margin-top: 28px; padding-top: 20px; border-top: 1px solid #eef0f4;
}
.del-title { font-size: 0.95rem; font-weight: 600; color: #c0392b; margin-bottom: 6px; }
.del-hint { font-size: 0.8rem; color: #8a8d98; margin-bottom: 10px; }
.del-hint b { color: #c0392b; }
.del-row { display: flex; gap: 10px; align-items: center; }
.del-row input {
  width: 110px; padding: 8px 12px; font-size: 0.95rem; text-align: center;
  background: #fafbfc; border: 1px solid #d9dce2; border-radius: 10px; outline: none; color: #1a1a22;
}
.del-row input:focus { border-color: #e08a8a; }
.del-btn {
  background: #fff; border: 1px solid #f0b6b6; color: #c0392b;
  padding: 8px 18px; border-radius: 10px; cursor: pointer; font-size: 0.85rem; transition: all .2s;
}
.del-btn:hover:not(:disabled) { background: #fdf0f0; border-color: #e08a8a; }
.del-btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* ---------- add form ---------- */
.form {
  background: #fff; border: 1px solid #e6e8ec; border-radius: 16px; padding: 30px 34px;
  box-shadow: 0 2px 12px rgba(30,60,120,0.04);
}
.form h2 { color: #1a1a22; font-weight: 600; font-size: 1.2rem; margin-bottom: 22px; }
.form label { display: block; font-size: 0.85rem; color: #6a6d78; margin: 16px 0 6px; }
.form input[type=text], .form textarea {
  width: 100%; padding: 11px 14px; font-size: 0.95rem; color: #1a1a22;
  background: #fafbfc; border: 1px solid #d9dce2;
  border-radius: 10px; outline: none; font-family: inherit; transition: border .2s;
}
.form input:focus, .form textarea:focus { border-color: #6ea8ff; background: #fff; box-shadow: 0 0 0 3px rgba(110,168,255,0.12); }
.form textarea { min-height: 280px; line-height: 1.7; resize: vertical; }
.form .hint { font-size: 0.75rem; color: #a0a3ad; margin-top: 4px; }
.form .submit {
  margin-top: 20px; padding: 11px 34px; font-size: 0.95rem; border: none; cursor: pointer;
  background: linear-gradient(135deg, #3a7bd5, #2b5ea7); color: #fff; border-radius: 10px; transition: opacity .2s;
}
.form .submit:hover { opacity: 0.88; }
.form .submit:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------- toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 34px; transform: translateX(-50%);
  background: #1a1a22; border: 1px solid #33333c;
  color: #fff; padding: 10px 22px; border-radius: 10px; font-size: 0.88rem;
  z-index: 99; transition: opacity .25s; box-shadow: 0 6px 20px rgba(0,0,0,0.18);
}
.toast.hidden { opacity: 0; pointer-events: none; }

/* ---------- footer ---------- */
.footer { text-align: center; font-size: 0.75rem; color: #a0a3ad; padding: 30px 0 40px; letter-spacing: 1px; }

@media (max-width: 600px) {
  .article { padding: 22px 18px; }
  .form { padding: 22px 18px; }
  main { padding: 18px 14px 50px; }
}