/* ============================================================
   侯庆新 · 个人主页 · 果味高级版
   基于 DESIGN.md：单电压珊瑚 + 奶油底 + 大圆角 + 大图留白
   ============================================================ */
:root {
  /* 品牌电压 */
  --brand: #ff6b5c;
  --brand-deep: #f43f3f;
  --brand-soft: #ffe8e4;
  /* 果味辅助（语义标记，禁止大面积） */
  --mango: #ffb020;
  --mango-soft: #fff4e0;
  --mint: #2dd4a7;
  --mint-soft: #e6fbf5;
  --berry: #f472b6;
  --berry-soft: #fdeef7;
  --grape: #8b5cf6;
  --grape-soft: #f0eafe;
  --sky: #38bdf8;
  /* 暖中性 */
  --ink: #292524;
  --body: #57534e;
  --muted: #a8a29e;
  --hairline: #f1ece6;
  --canvas: #fff9f5;
  --surface: #ffffff;
  --surface-soft: #fdf6f0;
  /* 语义 */
  --success: #16a34a;
  --warn: #d97706;
  --danger: #dc2626;
  --info: #2563eb;
  /* 暖阴影 */
  --shadow-sm: 0 2px 8px rgba(41,37,36,0.05);
  --shadow-md: 0 6px 20px rgba(41,37,36,0.08);
  --shadow-lg: 0 16px 48px rgba(255,107,92,0.14);
  --shadow-fruit: 0 8px 28px rgba(255,107,92,0.22);
  /* 圆角 */
  --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 20px; --r-full: 9999px;
  --grad-brand: linear-gradient(90deg, #ff6b5c, #ff8a5c);
  --grad-head: linear-gradient(90deg, rgba(255,107,92,.5), rgba(255,176,32,.5), rgba(45,212,167,.5), rgba(244,114,182,.5));
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { font-family: -apple-system, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', sans-serif; background: var(--canvas); color: var(--body); line-height: 1.7; }

/* ============ 顶栏（毛玻璃 + 渐变底线） ============ */
.site-header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,0.88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 2px solid transparent; border-image: var(--grad-head) 1; }
.header-inner { max-width: 960px; margin: 0 auto; display: flex; align-items: center; gap: 20px; padding: 14px 20px; }
.site-logo { font-size: 1.35rem; font-weight: 800; text-decoration: none; background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: 0.5px; }
.site-nav { display: flex; gap: 6px; flex: 1; overflow-x: auto; scrollbar-width: none; }
.site-nav::-webkit-scrollbar { display: none; }
.site-nav a { position: relative; font-size: 0.875rem; color: var(--muted); text-decoration: none; white-space: nowrap; padding: 6px 12px; border-radius: var(--r-full); transition: all 0.18s var(--ease); }
.site-nav a:hover { color: var(--ink); background: var(--surface-soft); }
.site-nav a.active { color: var(--brand); font-weight: 700; background: var(--brand-soft); }
.site-nav a.active::after { content: ''; position: absolute; left: 50%; bottom: 1px; transform: translateX(-50%); width: 5px; height: 5px; border-radius: 50%; background: var(--brand); }
.admin-btn { border: none; background: none; font-size: 1rem; cursor: pointer; color: var(--muted); padding: 6px 10px; border-radius: var(--r-full); transition: all 0.15s; }
.admin-btn:hover { background: var(--surface-soft); color: var(--berry); }

/* ============ 主体 ============ */
.site-main { max-width: 960px; margin: 0 auto; padding: 28px 20px 70px; min-height: 62vh; }
.view { animation: fadeUp 0.3s var(--ease); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ============ 首页 hero ============ */
.hero { text-align: center; padding: 56px 0 40px; }
.hero-fruits { font-size: 2rem; letter-spacing: 10px; display: block; margin-bottom: 16px; animation: floatY 3.5s ease-in-out infinite; }
@keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.hero h1 { font-size: 2.4rem; font-weight: 800; line-height: 1.25; letter-spacing: -1px; background: linear-gradient(90deg, var(--brand), var(--berry), var(--grape)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero-sub { color: var(--mango); font-weight: 700; margin-top: 12px; font-size: 1.05rem; }
.hero-desc { color: var(--muted); margin-top: 18px; font-size: 0.9375rem; }
.hero-desc b { color: var(--brand); font-weight: 600; }

.home-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
@media (max-width: 640px) { .home-grid { grid-template-columns: 1fr; gap: 20px; } }
.sec-title { font-size: 1.05rem; font-weight: 700; color: var(--ink); margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--hairline); display: flex; align-items: center; gap: 8px; }
.sec-title::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--brand); box-shadow: 16px 0 0 var(--mango), 32px 0 0 var(--mint); }

.mini-list { display: flex; flex-direction: column; gap: 10px; }
.mini-post { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: 13px 16px; font-size: 0.875rem; box-shadow: var(--shadow-sm); transition: box-shadow 0.2s var(--ease), transform 0.2s var(--ease); }
.mini-post:hover { box-shadow: var(--shadow-fruit); transform: translateY(-2px); }
.mini-post .date { font-size: 0.75rem; color: var(--muted); margin-top: 5px; }
.home-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.home-photos img { width: 100%; height: 140px; object-fit: cover; border-radius: var(--r-md); transition: transform 0.25s var(--ease), box-shadow 0.25s; cursor: pointer; }
.home-photos img:hover { transform: scale(1.04); box-shadow: var(--shadow-md); }
.mini-essay { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: 13px 16px; cursor: pointer; border-left: 4px solid var(--mint); transition: box-shadow 0.2s var(--ease), transform 0.2s var(--ease); }
.mini-essay:hover { box-shadow: 0 8px 24px rgba(45,212,167,0.2); transform: translateY(-2px); }
.mini-essay .t { font-weight: 700; font-size: 0.9rem; color: var(--ink); }
.mini-essay .date { font-size: 0.75rem; color: var(--muted); }

/* ============ 通用 ============ */
.page-title { font-size: 1.6rem; font-weight: 800; color: var(--ink); margin-bottom: 24px; letter-spacing: -0.5px; display: flex; align-items: center; gap: 10px; }
.page-title::after { content: ''; flex: 1; height: 2px; background: linear-gradient(90deg, var(--brand), transparent); }
.loading, .empty { text-align: center; color: var(--muted); padding: 44px 0; font-size: 0.875rem; }
.date-badge { font-size: 0.75rem; color: var(--muted); }

/* ============ 动态 feed ============ */
.feed { display: flex; flex-direction: column; gap: 16px; max-width: 640px; margin: 0 auto; }
.feed-item { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: 18px 20px; box-shadow: var(--shadow-sm); border-left: 4px solid var(--brand); transition: box-shadow 0.2s var(--ease), transform 0.2s var(--ease); }
.feed-item:hover { box-shadow: var(--shadow-fruit); transform: translateY(-2px); }
.feed-item .meta { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.feed-item .content { font-size: 0.94rem; color: var(--ink); white-space: pre-wrap; font-weight: 500; }
.feed-item .imgs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.feed-item .imgs img { max-height: 240px; max-width: 100%; border-radius: var(--r-sm); box-shadow: var(--shadow-sm); }
.feed-del { color: var(--danger); background: none; border: none; font-size: 0.75rem; cursor: pointer; margin-left: auto; opacity: 0.7; }
.feed-del:hover { opacity: 1; }

/* ============ 随笔 ============ */
.essay-list { display: flex; flex-direction: column; gap: 14px; max-width: 720px; margin: 0 auto; }
.essay-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: 20px 22px; cursor: pointer; border-left: 4px solid var(--mint); transition: box-shadow 0.2s var(--ease), transform 0.2s var(--ease); }
.essay-card:hover { box-shadow: 0 10px 28px rgba(45,212,167,0.2); transform: translateY(-2px); }
.essay-card h3 { font-size: 1.05rem; color: var(--ink); }
.essay-card .excerpt { color: var(--muted); font-size: 0.85rem; margin-top: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#essayDetailBody { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: 32px; max-width: 720px; margin: 0 auto; box-shadow: var(--shadow-sm); }
#essayDetailBody h2 { color: var(--ink); margin-bottom: 14px; }
#essayDetailBody .essay-content { white-space: pre-wrap; font-size: 0.95rem; line-height: 1.9; }
.back-btn { border: 1px solid var(--hairline); background: var(--surface); border-radius: var(--r-full); padding: 7px 16px; font-size: 0.8rem; cursor: pointer; margin-bottom: 14px; color: var(--muted); transition: all 0.15s; }
.back-btn:hover { color: var(--mint); border-color: var(--mint); }

/* ============ 摄影 ============ */
.photos-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (min-width: 768px) { .photos-grid { grid-template-columns: repeat(3, 1fr); } }
.photo-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-lg); overflow: hidden; transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease); }
.photo-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(139,92,246,0.18); }
.photo-card img { width: 100%; aspect-ratio: 3/2; object-fit: cover; display: block; transition: transform 0.35s var(--ease); }
.photo-card:hover img { transform: scale(1.04); }
.photo-card .info { padding: 12px 14px; }
.photo-card .info .t { font-size: 0.875rem; font-weight: 700; color: var(--ink); }
.photo-card .info .d { font-size: 0.75rem; color: var(--muted); margin-top: 2px; }

/* ============ 音乐 ============ */
.music-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (min-width: 768px) { .music-grid { grid-template-columns: repeat(3, 1fr); } }
.music-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: 16px; display: flex; gap: 14px; align-items: center; border-left: 4px solid var(--berry); transition: box-shadow 0.2s var(--ease), transform 0.2s var(--ease); }
.music-card:hover { box-shadow: 0 8px 26px rgba(244,114,182,0.18); transform: translateY(-2px); }
.music-card .cover { width: 54px; height: 54px; border-radius: var(--r-sm); object-fit: cover; flex-shrink: 0; background: var(--berry-soft); }
.music-card .m-title { font-size: 0.875rem; font-weight: 700; color: var(--ink); }
.music-card .m-artist { font-size: 0.75rem; color: var(--muted); margin-top: 2px; }
.music-card a { color: var(--berry); font-size: 0.75rem; text-decoration: none; font-weight: 600; }

/* ============ 工具 ============ */
.tool-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (min-width: 768px) { .tool-grid { grid-template-columns: repeat(3, 1fr); } }
.tool-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: 18px; text-decoration: none; color: var(--body); transition: box-shadow 0.2s var(--ease), transform 0.2s var(--ease); display: block; border-top: 4px solid var(--mango); }
.tool-card:hover { box-shadow: 0 10px 28px rgba(255,176,32,0.22); transform: translateY(-2px); }
.tool-card .t { font-weight: 800; font-size: 0.95rem; color: var(--ink); }
.tool-card .d { font-size: 0.8rem; color: var(--muted); margin-top: 5px; }

/* ============ 收藏 ============ */
.bookmark-list { display: flex; flex-direction: column; gap: 10px; max-width: 720px; margin: 0 auto; }
.bm-group-title { font-weight: 800; font-size: 0.9rem; color: var(--grape); margin: 16px 0 6px; }
.bm-item { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-sm); padding: 11px 16px; display: flex; gap: 10px; align-items: center; transition: box-shadow 0.15s; }
.bm-item:hover { box-shadow: var(--shadow-sm); }
.bm-item a { color: var(--ink); text-decoration: none; font-size: 0.875rem; font-weight: 600; }
.bm-item a:hover { color: var(--grape); }
.bm-item .d { font-size: 0.75rem; color: var(--muted); margin-left: auto; }

/* ============ 弹窗 ============ */
.modal-overlay { position: fixed; inset: 0; background: rgba(41,37,36,0.45); backdrop-filter: blur(4px); z-index: 200; display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal { background: var(--surface); border-radius: 18px; width: 100%; max-width: 480px; max-height: 85vh; overflow-y: auto; box-shadow: var(--shadow-lg); animation: modalIn 0.22s var(--ease); }
@keyframes modalIn { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }
.modal-head { font-size: 1rem; font-weight: 800; color: var(--ink); padding: 18px 20px; border-bottom: 1px solid var(--hairline); }
.modal-body { padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.modal-foot { padding: 14px 20px; border-top: 1px solid var(--hairline); display: flex; justify-content: flex-end; gap: 8px; }
.modal input, .modal textarea, .modal select { width: 100%; padding: 11px 13px; border: 1.5px solid var(--hairline); background: var(--surface-soft); border-radius: var(--r-sm); font-size: 0.875rem; font-family: inherit; box-sizing: border-box; outline: none; transition: border-color 0.15s, box-shadow 0.15s; }
.modal input:focus, .modal textarea:focus, .modal select:focus { border-color: var(--brand); background: var(--surface); box-shadow: 0 0 0 3px rgba(255,107,92,0.15); }
.modal textarea { min-height: 90px; resize: vertical; }
.modal label { font-size: 0.8rem; color: var(--muted); }

/* ============ 按钮 ============ */
.btn { padding: 9px 20px; border: 1.5px solid var(--hairline); background: var(--surface); border-radius: var(--r-full); font-size: 0.85rem; cursor: pointer; color: var(--muted); transition: all 0.16s var(--ease); }
.btn:hover { color: var(--ink); border-color: var(--brand); }
.btn.primary { background: var(--grad-brand); border: none; color: #fff; font-weight: 700; box-shadow: var(--shadow-fruit); }
.btn.primary:hover { filter: brightness(1.06); transform: translateY(-1px); }
.btn.primary:active { transform: translateY(0); }

/* ============ 管理浮动栏 ============ */
.admin-bar { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; border-radius: var(--r-full); padding: 10px 14px; display: flex; gap: 8px; align-items: center; z-index: 150; box-shadow: 0 12px 36px rgba(41,37,36,0.35); }
.admin-bar select { padding: 7px 10px; border-radius: var(--r-full); border: none; font-size: 0.8rem; }
.admin-bar .btn { background: transparent; border: 1px solid rgba(255,255,255,0.35); color: #fff; }
.admin-bar .btn.primary { background: var(--grad-brand); border: none; }

/* ============ 页脚 ============ */
.site-footer { text-align: center; padding: 28px; color: var(--muted); font-size: 0.8rem; border-top: 1px solid var(--hairline); }

/* ============ 响应式 ============ */
@media (max-width: 640px) {
  .site-main { padding: 20px 16px 80px; }
  .hero { padding: 40px 0 30px; }
  .hero-fruits { font-size: 1.6rem; }
  .hero h1 { font-size: 1.9rem; }
  .page-title { font-size: 1.3rem; }
  .btn, .admin-bar .btn, .site-nav a { min-height: 40px; }
}