/* =========================================================
   category.css —— 分类管理页（梦/梦呓/醒）
   瀑布流卡片 + 顶部搜索框；配色延续首页「星月夜→向日葵」。
   ========================================================= */
:root {
  --ink:      #eef3fb;
  --ink-dim:  rgba(238, 243, 251, 0.74);
  --serif:    "Songti SC", "STSong", "Noto Serif CJK SC",
              "Source Han Serif SC", "SimSun", serif;
  --sans:     -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
              "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --line:     rgba(255, 255, 255, 0.16);
  --dream:    #aecbff;
  --murmur:   #d9e4ff;
  --wake:     #ffd98a;
}
.cat-dream  { --accent: var(--dream); }
.cat-murmur { --accent: var(--murmur); }
.cat-awake  { --accent: var(--wake); }

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(255, 255, 255, 0.06), transparent 55%),
    linear-gradient(115deg,
      #081226 0%, #102a55 30%, #1f4474 55%,
      #6a5d74 72%, #c0803f 86%, #f2c457 100%);
  background-attachment: fixed;
}

/* ---------- 页头 ---------- */
.cat-head {
  max-width: 1080px;
  margin: 0 auto;
  padding: 4.5vh 20px 2vh;
  text-align: center;
}
.cat-back {
  display: inline-block;
  margin-bottom: 10px;
  font-size: 0.85rem;
  letter-spacing: 0.15em;
  color: var(--ink-dim);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  transition: color 0.25s ease, border-color 0.25s ease;
}
.cat-back:hover { color: var(--accent); border-color: var(--accent); }
.cat-title {
  margin: 4px 0 2px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2rem, 5vw, 3rem);
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  text-shadow: 0 2px 20px rgba(3, 10, 30, 0.6);
}
.cat-sub {
  margin: 4px 0 22px;
  color: var(--ink-dim);
  font-size: 0.92rem;
  letter-spacing: 0.25em;
}

/* ---------- 搜索框 ---------- */
.cat-search { position: relative; max-width: 560px; margin: 0 auto; }
.cat-search input {
  width: 100%;
  padding: 11px 16px;
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  outline: none;
  backdrop-filter: blur(6px);
  transition: border-color 0.25s ease, background 0.25s ease;
}
.cat-search input::placeholder { color: rgba(238, 243, 251, 0.55); }
.cat-search input:focus {
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.16);
}
.cat-count {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  letter-spacing: 0.15em;
  color: var(--ink-dim);
}

/* ---------- 瀑布流卡片 ---------- */
.cat-cards {
  max-width: 1080px;
  margin: 0 auto;
  padding: 1vh 20px 6vh;
  column-count: 1;
  column-gap: 18px;
}
@media (min-width: 640px)  { .cat-cards { column-count: 2; } }
@media (min-width: 1020px) { .cat-cards { column-count: 3; } }

.cat-card {
  display: block;
  break-inside: avoid;
  margin: 0 0 18px;
  padding: 16px 18px 14px;
  color: var(--ink);
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04));
  backdrop-filter: blur(8px);
  box-shadow: 0 14px 36px rgba(2, 8, 24, 0.24);
  transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.cat-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.06));
}
.cat-card .card-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.cat-card .card-date {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--accent);
  white-space: nowrap;
}
.cat-card h2 {
  margin: 0 0 6px;
  font-family: var(--serif);
  font-size: 1.28rem;
  line-height: 1.4;
  letter-spacing: 0.04em;
}
.cat-card .card-note {
  margin: 0 0 10px;
  color: var(--ink-dim);
  font-size: 0.88rem;
  line-height: 1.8;
}
.cat-card .card-go {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  color: var(--accent);
}
.cat-card:hover .card-go { text-decoration: underline; }

/* 空态 */
.cat-empty {
  width: 100%;
  padding: 60px 16px;
  text-align: center;
  color: var(--ink-dim);
  letter-spacing: 0.2em;
  font-size: 0.95rem;
}
.cat-empty em { font-style: normal; }

/* ---------- 页脚 ---------- */
.cat-foot {
  padding: 0 20px 36px;
  text-align: center;
}
.cat-foot a {
  color: var(--ink-dim);
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
.cat-foot a:hover { color: var(--accent); border-color: var(--accent); }

/* 手机竖排背景改为上蓝下暖 */
@media (max-width: 640px) {
  body {
    background:
      radial-gradient(120% 80% at 50% -6%, rgba(255, 255, 255, 0.05), transparent 50%),
      linear-gradient(180deg,
        #081226 0%, #102a55 26%, #1f4474 48%,
        #7a6459 66%, #c0803f 84%, #f2c457 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cat-card { transition: none; }
  .cat-card:hover { transform: none; }
}