/* 海阔天空 - 老站风格（2005 复古 + 响应式） */
/* 外观变量（可在管理后台"外观"中调整） */
:root {
  --body-font-size: 14px;
  --content-top: 182px;
  --content-bottom: 150px;
  --content-bg: transparent;
  --title-color: #2d6a6a;
  --bg-about: url('/assets/bg/about.jpg');
  --bg-photos: url('/assets/bg/photos.jpg');
  --bg-articles: url('/assets/bg/articles.jpg');
  --bg-diary: url('/assets/bg/diary.jpg');
  --bg-guestbook: url('/assets/bg/guestbook.jpg');
  --bg-wish: url('/assets/bg/wish.jpg');
  --bg-links: url('/assets/bg/links.jpg');
  --bg-music: url('/assets/bg/music.jpg');
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: "SimSun", "宋体", -apple-system, "Microsoft YaHei", sans-serif;
  background: #fff;
  color: #333;
  line-height: 1.7;
  font-size: var(--body-font-size);
}
a { text-decoration: none; }
a:hover { text-decoration: underline; }

.layout {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0 auto;
  min-height: 100vh;
}
.main-row {
  display: flex;
  flex: 1 0 auto;
  align-items: stretch;
  justify-content: center;
}

/* ===== 左栏（老站风格） ===== */
.sidebar {
  width: 112px;
  flex-shrink: 0;
  background: #3d5c1f url('/assets/img/left1.jpg') no-repeat top left;
  background-size: 100% 100%;
  color: #fff;
  padding: 16px 6px;
  position: sticky;
  top: 0;
  height: auto;
  overflow-y: auto;
}
.sidebar .logo {
  font-size: 20px;
  letter-spacing: 3px;
  text-align: center;
  color: #fff;
  padding: 8px 0 4px;
  border-bottom: 1px dashed rgba(255,255,255,.5);
  margin-bottom: 14px;
  text-shadow: 1px 1px 2px rgba(0,0,0,.6);
}
.sidebar .logo-sub { text-align: center; font-size: 11px; color: #9fc; margin-bottom: 16px; }
.sidebar nav a {
  display: block;
  color: #fff;
  font-size: 13px;
  padding: 6px 8px;
  margin: 1px 0;
  border-radius: 4px;
  letter-spacing: 0;
  text-shadow: 1px 1px 1px rgba(0,0,0,.5);
}
.sidebar nav a:hover {
  background: rgba(0,0,0,.25);
  color: #fff;
  text-decoration: none;
}
.sidebar nav a.active {
  background: rgba(0,0,0,.25);
  color: #ffd98a;
}
.sidebar .site-info {
  margin-top: 20px;
  font-size: 11px;
  color: #9fc;
  text-align: center;
  border-top: 1px dashed #4a7a6a;
  padding-top: 12px;
  line-height: 1.9;
}

/* ===== 主区 ===== */
.content {
  flex: 0 0 auto;
  width: 100%;
  background: #fff;
  padding: 0;
  position: relative;
}
/* 首页：内容区只包动画（居中） */
body[data-page="/"] .content {
  flex: 0 0 auto;
  width: fit-content;
  max-width: 100%;
  background: transparent;
}
/* 各页面背景图（内容显示在背景图白色区，内部滚动） */
body[data-page="/about.html"] .content { background-image: var(--bg-about); }
body[data-page="/photos.html"] .content { background-image: var(--bg-photos); }
body[data-page="/articles.html"] .content { background-image: var(--bg-articles); }
body[data-page="/diary.html"] .content { background-image: var(--bg-diary); }
body[data-page="/guestbook.html"] .content { background-image: var(--bg-guestbook); }
body[data-page="/wish.html"] .content { background-image: var(--bg-wish); }
body[data-page="/links.html"] .content { background-image: var(--bg-links); }
body[data-page="/music.html"] .content { background-image: var(--bg-music); }
body[data-page^="/"] .content {
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}
/* 非首页：内容容器 = 背景图白色区，顶部与导航栏"精美文章"平齐，内部滚动 */
body[data-page="/about.html"] .inner,
body[data-page="/photos.html"] .inner,
body[data-page="/articles.html"] .inner,
body[data-page="/diary.html"] .inner,
body[data-page="/guestbook.html"] .inner,
body[data-page="/wish.html"] .inner,
body[data-page="/links.html"] .inner,
body[data-page="/music.html"] .inner {
  position: absolute;
  left: 8.7%;
  top: var(--content-top);
  bottom: var(--content-bottom);
  width: 79%;
  overflow-y: auto;
  padding: 10px 14px;
  max-width: none;
  margin: 0;
  background: var(--content-bg);
  border-radius: 4px;
}
body[data-page="/"] .inner {
  max-width: none;
  margin: 0;
}
.card {
  background: rgba(255, 255, 255, .93);
  border: 1px solid #d9d2c4;
  border-radius: 6px;
  padding: 20px 22px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.card h2 {
  font-size: 17px;
  color: #0d2626;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 2px solid #ccff99;
}
.muted { color: #888; font-size: 12px; }
.meta { color: #999; font-size: 12px; margin-top: 3px; }
.tag { display: inline-block; background: #e6f2e6; color: #2d6a2d; border-radius: 10px; padding: 1px 8px; font-size: 11px; margin-right: 6px; }

/* 欢迎区（深绿，与导航一致） */
.hero-card {
  background: linear-gradient(135deg, #0d2626 0%, #144a3a 100%);
  color: #e8f5e9;
  border: 1px solid #2d6a4f;
  border-radius: 6px;
  padding: 18px 22px;
  margin: 0 auto 16px;
  max-width: 621px;
}
.hero-card h2 { color: #ccff99; font-size: 18px; margin-bottom: 8px; }
.hero-card p { font-size: 14px; line-height: 1.8; }
.hero-card .hero-sub { margin-top: 8px; font-size: 12px; color: #a8d5b8; }

/* ===== Flash 播放区（Ruffle 播放原动画） ===== */
.flash-stage {
  background: #000;
  border: 1px solid #0d2626;
  border-radius: 6px;
  overflow: hidden;
  text-align: center;
  margin: 0;
  width: fit-content;
  max-width: 100%;
}
.flash-stage ruffle-player {
  display: block;
  margin: 0;
}
.flash-fallback {
  color: #ccc;
  padding: 40px 10px;
  font-size: 13px;
}

/* ===== 列表/内容 ===== */
.list-item { padding: 10px 2px; border-bottom: 1px dashed #e3ddd0; }
.list-item:last-child { border-bottom: none; }
.list-item .title { font-size: 15px; color: var(--title-color); font-weight: 500; }
.list-item p { color: #666; font-size: 13px; margin-top: 3px; }
.article-content { white-space: pre-wrap; font-size: 14px; color: #444; margin-top: 12px; line-height: 2; }
.hidden-detail { display: none; }

/* 相册 */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.photo-card { background: #fff; border: 1px solid #d9d2c4; border-radius: 6px; overflow: hidden; cursor: pointer; }
.photo-card img { width: 100%; height: 140px; object-fit: cover; display: block; }
.photo-card .cap { padding: 6px 10px; font-size: 12px; }
.photo-card .cap .name { font-weight: 500; color: #2d6a6a; }
.photo-card .cap .desc { color: #888; font-size: 11px; }

/* 留言/许愿 */
.msg-item { padding: 12px 2px; border-bottom: 1px dashed #e3ddd0; }
.msg-item:last-child { border-bottom: none; }
.msg-item .head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.msg-item .name { font-weight: 600; color: #2d6a6a; }
.msg-item .reply { margin-top: 8px; padding: 8px 12px; background: #f0f5f0; border-left: 3px solid #339933; border-radius: 4px; font-size: 13px; color: #555; }

/* 表单 */
form .row { margin-bottom: 10px; }
form label { display: block; font-size: 12px; color: #666; margin-bottom: 4px; }
form input, form textarea {
  width: 100%; padding: 8px 10px; border: 1px solid #c0c0c0;
  border-radius: 4px; font-size: 13px; font-family: inherit;
}
form textarea { min-height: 80px; resize: vertical; }
form button {
  background: #339933; color: #fff; border: none;
  padding: 9px 24px; border-radius: 4px; font-size: 13px; cursor: pointer;
}
form button:hover { background: #2d7a2d; }

/* 统计 */
.stats { display: flex; gap: 22px; flex-wrap: wrap; justify-content: center; padding: 4px 0; }
.stats .num { font-size: 24px; font-weight: 700; color: #2d6a6a; }
.stats .lbl { font-size: 12px; color: #888; }

/* 时间线 */
.timeline { border-left: 2px solid #b8d4c0; margin-left: 4px; padding-left: 16px; }
.timeline .tl-item { position: relative; padding-bottom: 14px; }
.timeline .tl-item::before {
  content: ""; position: absolute; left: -22px; top: 6px;
  width: 8px; height: 8px; border-radius: 50%; background: #339933;
}
.tl-item .date { font-size: 11px; color: #999; }
.tl-item .subject { font-weight: 500; }
.tl-item .content { font-size: 13px; color: #555; margin-top: 3px; white-space: pre-wrap; }

/* 音乐播放条 */
.music-bar {
  position: fixed; right: 14px; bottom: 14px; z-index: 50;
  background: rgba(13,38,38,.92); border: 1px solid #4a7a6a; border-radius: 8px;
  padding: 8px 12px; width: 260px;
}
.music-bar .mb-title { font-size: 11px; color: #ccff99; margin-bottom: 4px; }
.music-bar audio { width: 100%; height: 30px; }

/* 管理按钮 */
.admin-btn {
  display: inline-block; margin-top: 12px; font-size: 12px; color: #2d6a6a;
  border: 1px solid #b8d4c0; border-radius: 4px; padding: 4px 12px;
}
.admin-btn:hover { background: #e6f2e6; text-decoration: none; }

/* 页脚 */
footer {
  text-align: center;
  padding: 16px;
  color: #888;
  font-size: 12px;
  width: 100%;
  margin-top: auto;
  background: #fff;
  border-top: 1px solid #eee;
}

/* ===== 响应式：手机左栏变顶栏 ===== */
@media (max-width: 768px) {
  .layout { width: 100%; flex-direction: column; flex-wrap: nowrap; }
  .main-row { flex-direction: column; }
  .sidebar {
    width: 100%; height: auto; position: static;
    padding: 10px 8px 6px;
  }
  .sidebar .logo { font-size: 17px; padding: 2px 0; margin-bottom: 6px; }
  .sidebar .logo-sub { margin-bottom: 6px; }
  .sidebar nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; }
  .sidebar nav a { padding: 5px 10px; font-size: 13px; margin: 0; }
  .sidebar .site-info { display: none; }
  .content { padding: 0; }
  .music-bar { width: calc(100% - 24px); right: 12px; bottom: 10px; }
  /* 首页：动画铺满宽度，等比缩放 */
  body[data-page="/"] .content { width: 100%; max-width: none; }
  body[data-page="/"] .flash-stage { width: 100%; }
  body[data-page="/"] .flash-stage ruffle-player {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 621 / 467;
  }
  /* 其他页面：内容区正常流（不绝对定位），背景图在顶部显示 */
  body[data-page="/about.html"] .inner,
  body[data-page="/photos.html"] .inner,
  body[data-page="/articles.html"] .inner,
  body[data-page="/diary.html"] .inner,
  body[data-page="/guestbook.html"] .inner,
  body[data-page="/wish.html"] .inner,
  body[data-page="/links.html"] .inner,
  body[data-page="/music.html"] .inner {
    position: static;
    left: auto;
    top: auto;
    bottom: auto;
    width: 100%;
    height: auto;
    overflow: visible;
    padding: 10px 12px;
    margin: 0;
  }
  body[data-page^="/"] .content {
    height: auto;
    background-size: 100% auto;
  }
}