/* ==========================================================
   亮色主题 + 顶部「粉蓝渐变海面」头图
   该文件在模板自带 <style> 之后加载，用于覆盖深色配色
   ========================================================== */

:root {
  --ink:        #17293f;   /* 主文字 */
  --ink-soft:   #46617d;   /* 次文字 */
  --muted:      #6f8199;   /* 弱化文字 */
  --line:       rgba(120, 150, 190, .30);
  --card:       #ffffff;
  --bg:         #f4f7fc;
  --accent:     #2f6fed;   /* 蓝 */
  --accent-2:   #ff7bab;   /* 粉 */
  --shadow:     0 10px 28px rgba(60, 105, 170, .12);
  --shadow-lg:  0 18px 40px rgba(60, 105, 170, .18);
}

/* ---------- 页面底色 ---------- */
html, body {
  background: var(--bg);
}

body {
  position: relative;
  color: var(--ink);
  background:
    radial-gradient(1200px 520px at 12% -8%, rgba(255, 196, 220, .35), transparent 60%),
    radial-gradient(1100px 480px at 88% -12%, rgba(168, 208, 255, .40), transparent 62%),
    linear-gradient(180deg, #fbfdff 0%, var(--bg) 42%, #eef4fb 100%);
  background-attachment: fixed;
}

/* 鼠标氛围光：改成粉蓝调 */
body::after {
  background: radial-gradient(
    760px circle at var(--mx, 50vw) var(--my, 50vh),
    rgba(255, 168, 200, .14),
    transparent 46%
  ) !important;
}

/* ---------- 顶部海面头图 ---------- */
.sea-band {
  position: relative;
  z-index: 0;
  height: 260px;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(200px 200px at 20% 30%, rgba(255, 244, 248, .95), rgba(255, 244, 248, 0) 70%),
    radial-gradient(120% 90% at 8% 4%, rgba(255, 186, 214, .95), rgba(255, 186, 214, 0) 58%),
    radial-gradient(95% 85% at 86% -6%, rgba(176, 210, 255, .92), rgba(176, 210, 255, 0) 62%),
    linear-gradient(180deg, #ffe6f1 0%, #ffd3e6 24%, #e6dcf7 44%, #bcd8fb 66%, #8fbdf2 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
}

body.is-home .sea-band { height: 360px; }

/* 海面：从地平线往下 44% 开始 */
.sea-band::before {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 44%;
  background:
    repeating-linear-gradient(180deg,
      rgba(255, 255, 255, .50) 0px,
      rgba(255, 255, 255, .50) 1px,
      rgba(255, 255, 255, 0) 1px,
      rgba(255, 255, 255, 0) 9px),
    radial-gradient(70% 130% at 26% 0%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 62%),
    linear-gradient(180deg, #aed6f9 0%, #82b7ef 40%, #4f8fdd 100%);
  background-size: 100% 100%, 100% 100%, 100% 100%;
  animation: sea-shimmer 7s linear infinite;
}

/* 地平线高光 + 水面反光带 */
.sea-band::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 46%;
  background:
    radial-gradient(14% 90% at 24% 0%, rgba(255, 255, 255, .92), rgba(255, 255, 255, 0) 72%),
    radial-gradient(10% 70% at 62% 0%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 72%),
    linear-gradient(180deg, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, 0) 6%);
  filter: blur(3px);
  opacity: .9;
  animation: sea-glint 9s ease-in-out infinite alternate;
}

@keyframes sea-shimmer {
  0%   { background-position: 0 0, 0 0, 0 0; }
  100% { background-position: 0 -180px, 0 0, 0 0; }
}

@keyframes sea-glint {
  0%   { transform: translateY(0) scaleX(1);        opacity: .75; }
  50%  { transform: translateY(-4px) scaleX(1.04);  opacity: .95; }
  100% { transform: translateY(2px) scaleX(.98);    opacity: .8; }
}

@media (prefers-reduced-motion: reduce) {
  .sea-band::before, .sea-band::after { animation: none; }
}

@media (max-width: 640px) {
  .sea-band { height: 170px; }
  body.is-home .sea-band { height: 230px; }
}

/* ---------- 导航栏：白玻璃 ---------- */
.navbar {
  background: rgba(255, 255, 255, .78) !important;
  border-bottom: 1px solid var(--line) !important;
  backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 4px 20px rgba(70, 110, 170, .08);
}

.logo a { color: var(--ink) !important; }
.logo a:hover { color: var(--accent) !important; }

.nav-links a { color: var(--ink-soft) !important; }
.nav-links a:hover { color: var(--accent) !important; background-size: 100% 2px; }

.avatar-btn {
  border-color: rgba(255, 255, 255, .9) !important;
  box-shadow: 0 3px 12px rgba(60, 105, 170, .22);
  background: #fff;
}
.avatar-btn:hover { border-color: var(--accent-2) !important; }

/* ---------- 正文文字 ---------- */
a { color: var(--accent); }
a:hover { color: var(--accent-2); }

.hero h1, .section-title, .article-title,
.article-content h2, .article-content h3,
.profile-header h1, .auth-header h1,
.article-content strong { color: var(--ink) !important; }

.hero p, .back-link, .article-meta, .footer, .hint,
.form-group label, .form-group .hint,
.user-info .username, .user-id, .username,
.comment-time, .char-count, .loading, .no-comments,
.no-notifications, .title-preview-label { color: var(--muted) !important; }

.back-link:hover { color: var(--accent) !important; }

.section-title { border-bottom-color: var(--line) !important; }

.article-content { color: var(--ink-soft) !important; }
.article-content p, .article-content li { color: var(--ink-soft); }
.article-header { border-bottom-color: var(--line) !important; }
.article-content h2 { border-bottom-color: var(--line) !important; }

.article-content blockquote {
  background: #eff6ff !important;
  border-left-color: var(--accent) !important;
  color: var(--ink-soft) !important;
}

.article-content code {
  background: #eef3fb !important;
  color: #1f5bc4 !important;
}

.article-content pre {
  background: #f7fafd !important;
  border-color: var(--line) !important;
}
.article-content pre code { color: var(--ink) !important; }

.article-content table { background: var(--card) !important; color: var(--ink-soft); }
.article-content th, .article-content td { border-color: var(--line) !important; }
.article-content thead th { background: #eef4fd !important; color: var(--ink) !important; }
.article-content tbody tr { background: var(--card) !important; }
.article-content tbody tr:nth-child(even) { background: #f7fafd !important; }
.article-content tbody tr:hover { background: #eef4fd !important; }
.article-content td:last-child { color: var(--accent) !important; }

.footer { border-top-color: var(--line) !important; }

/* ---------- 卡片 ---------- */
.post {
  border-color: var(--line) !important;
  box-shadow: var(--shadow) !important;
}
.post:hover {
  border-color: rgba(47, 111, 237, .35) !important;
  box-shadow: var(--shadow-lg) !important;
}

.comment-item,
.notification-item,
.reply-form,
.title-preview {
  background: var(--card) !important;
  border-color: var(--line) !important;
}
.notification-item.unread {
  background: #f2f8ff !important;
  border-left-color: var(--accent) !important;
}
.comment-username, .comments-title, .card-title { color: var(--ink) !important; }
.comment-content { color: var(--ink-soft) !important; }
.comment-actions-bar .comment-action-btn { color: var(--muted); }
.comments-section { border-top-color: var(--line) !important; }

.avatar { background: linear-gradient(135deg, #ffb3cf, #7fb2f0) !important;
          box-shadow: 0 10px 26px rgba(255, 150, 190, .35) !important; }

/* ---------- 表单 ---------- */
.form-group input,
.form-group textarea,
#comment-content,
.reply-form textarea,
.color-picker-group input[type="text"],
#newBio, #newTitle, #newDisplayName {
  background: #fff !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}
.form-group input::placeholder,
.form-group textarea::placeholder,
#comment-content::placeholder { color: #9aabc0 !important; }

.form-group input:focus,
.form-group textarea:focus,
#comment-content:focus,
.reply-form textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(47, 111, 237, .12) !important;
}

/* ---------- 按钮 ---------- */
.submit-btn,
.save-btn,
.submit-comment-btn,
.reply-submit-btn,
.register-btn {
  background: linear-gradient(135deg, #ff9dc0, #6aa8f0) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 6px 18px rgba(120, 150, 220, .30);
  background-image: linear-gradient(135deg, #ff9dc0, #6aa8f0) !important;
}
.submit-btn:hover,
.save-btn:hover,
.submit-comment-btn:hover,
.reply-submit-btn:hover,
.register-btn:hover {
  box-shadow: 0 10px 24px rgba(120, 150, 220, .40);
  transform: translateY(-2px);
}

.reply-cancel-btn {
  background: #eef3fb !important;
  color: var(--ink-soft) !important;
}

.logout-btn {
  background: #fff0f5 !important;
  border-color: rgba(255, 123, 171, .45) !important;
  color: #d94f7f !important;
}
.logout-btn:hover { background: #ffe4ee !important; }

/* ---------- 标签/徽章 ---------- */
.post-meta .tag,
.article-meta .tag,
.comment-user-role {
  backdrop-filter: blur(4px);
}
.article-meta .tag {
  background: rgba(47, 111, 237, .10) !important;
  color: var(--accent) !important;
  border-color: rgba(47, 111, 237, .28) !important;
}
.comment-user-role {
  background: rgba(255, 176, 70, .18) !important;
  color: #b06f00 !important;
  border-color: rgba(255, 176, 70, .45) !important;
}

/* ---------- 提示框 ---------- */
.alert-success {
  background: #eefaf3 !important;
  border-color: rgba(45, 180, 120, .35) !important;
  color: #17845a !important;
}
.alert-error {
  background: #fff0f4 !important;
  border-color: rgba(255, 123, 171, .45) !important;
  color: #d94f7f !important;
}
.login-prompt {
  background: #f2f8ff !important;
  border: 1px solid var(--line);
}
.login-prompt a { color: var(--accent) !important; }

/* ---------- 登录/资料页卡片 ---------- */
.auth-card, .profile-card {
  background: rgba(255, 255, 255, .92) !important;
  border-color: var(--line) !important;
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(12px);
}
.auth-header p, .display-name, .user-info .display-name { color: var(--ink) !important; }
.current-avatar { border-color: rgba(255, 255, 255, .95) !important;
                  box-shadow: 0 8px 24px rgba(255, 150, 190, .3); }
.bio {
  background: #f2f8ff !important;
  border-left-color: var(--accent) !important;
  color: var(--ink-soft) !important;
}
.role-badge {
  background: rgba(255, 196, 86, .22) !important;
  color: #a06a00 !important;
  border-color: rgba(255, 196, 86, .5) !important;
}
.unread-badge { background: var(--accent-2) !important; color: #fff; }

.form-section { border-bottom-color: var(--line) !important; }
.form-section h2 { color: var(--ink) !important; }
.title-preview { border: 1px dashed var(--line); }

/* ---------- 补充覆盖 ---------- */
.footer a { color: var(--accent) !important; }
.footer a:hover { color: var(--accent-2) !important; }
.auth-footer a { color: var(--accent) !important; }
.post:hover .post-content h2 { color: #ffd9e8 !important; }
.avatar-option.selected {
  border-color: var(--accent-2) !important;
  box-shadow: 0 0 0 4px rgba(255, 123, 171, .18) !important;
}
.preset-item.selected { border-color: var(--accent) !important; }
.article-content a { color: var(--accent); border-bottom: 1px solid rgba(47,111,237,.25); }
.article-content hr { border-color: var(--line); }
.navbar .avatar-btn { background: transparent !important; }

/* ==========================================================
   卡片比例统一（桌面 = 移动端观感）+ 淡蓝实心阴影
   ========================================================== */

:root {
  --shadow-solid:       8px 8px 0 #d3e5ff;
  --shadow-solid-hover: 11px 11px 0 #c2dbff;
  --shadow-solid-sm:    5px 5px 0 #e2eeff;
}

/* 文章列表：桌面两列、手机一列，卡片比例两边完全一致 */
.post-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin-bottom: 26px;
}

@media (max-width: 780px) {
  .post-grid { grid-template-columns: 1fr; gap: 18px; }
}

/* 卡片本体：用固定宽高比代替固定高度，任何屏宽都保持手机端那个方形观感 */
.post {
  height: auto !important;
  aspect-ratio: 16 / 11;
  margin: 0 !important;
  border-radius: 18px !important;
  border: 1px solid rgba(47, 111, 237, .18) !important;
  box-shadow: var(--shadow-solid) !important;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.post:hover {
  transform: translate(-3px, -3px) !important;
  box-shadow: var(--shadow-solid-hover) !important;
  border-color: rgba(47, 111, 237, .34) !important;
}

/* 卡片内文字随卡片变小收紧一点 */
.post-content { padding: 20px 18px !important; }
.post-content h2 { font-size: 19px !important; line-height: 1.45; }
.post-summary { font-size: 13px !important; }
.post-meta { font-size: 12.5px !important; }

@media (max-width: 480px) {
  .post-content h2 { font-size: 18px !important; }
  .post-summary { font-size: 12.5px !important; }
}

/* 其他卡片：统一成同一套实心阴影（更小一号） */
.comment-item,
.auth-card,
.profile-card,
.notification-item,
.login-prompt {
  box-shadow: var(--shadow-solid-sm) !important;
  border-radius: 16px !important;
  border: 1px solid rgba(47, 111, 237, .16) !important;
}

.auth-card, .profile-card { border-radius: 20px !important; }

.comment-item:hover { box-shadow: var(--shadow-solid) !important; }

/* hero 卡片也让阴影统一 */
.hero {
  box-shadow: var(--shadow-solid) !important;
  border-radius: 20px !important;
  border: 1px solid rgba(47, 111, 237, .16) !important;
}

/* ==========================================================
   移动端导航栏：单行不换行
   ========================================================== */
@media (max-width: 680px) {
  .navbar {
    padding: 8px 10px !important;
  }

  .navbar-inner {
    padding: 7px 10px !important;
    gap: 8px;
    flex-wrap: nowrap !important;
    align-items: center;
  }

  .nav-left {
    gap: 8px !important;
    min-width: 0;
    flex: 1 1 auto;
  }

  .avatar-btn {
    width: 28px !important;
    height: 28px !important;
    flex: 0 0 auto;
  }

  .logo { min-width: 0; }
  .logo a {
    font-size: 15px !important;
    white-space: nowrap;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 34vw;
  }

  .nav-links {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 0 0 auto;
  }

  .nav-links a {
    margin-left: 0 !important;
    padding: 4px 6px !important;
    font-size: 12.5px !important;
    line-height: 1.4;
    white-space: nowrap !important;
    background-image: none !important;
    max-width: 22vw;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
  }

  .nav-links a:hover { background-size: 0% 0 !important; }

  .nav-links .register-btn {
    padding: 5px 9px !important;
    font-size: 12px !important;
    max-width: none;
    flex: 0 0 auto;
  }
}

@media (max-width: 400px) {
  .logo a { font-size: 14px !important; max-width: 26vw; }
  .nav-links a { font-size: 12px !important; padding: 4px 4px !important; }
  .nav-links .register-btn { padding: 4px 7px !important; }
  .navbar-inner { padding: 6px 8px !important; gap: 6px; }
  .nav-left { gap: 6px !important; }
}

/* ==========================================================
   首页 Hero 卡片：收窄、缩小，标题单行不折
   ========================================================== */
.hero {
  max-width: 560px !important;
  margin: 10px auto 34px !important;
  padding: 26px 24px 24px !important;
  background: rgba(255, 255, 255, .86) !important;
  backdrop-filter: blur(12px);
  border: 1px solid rgba(47, 111, 237, .16) !important;
  border-radius: 20px !important;
  box-shadow: 6px 6px 0 #d9e8ff !important;
}

.hero .avatar {
  width: 82px !important;
  height: 82px !important;
  margin: 0 auto 14px !important;
  font-size: 32px !important;
}

.hero .avatar img {
  width: 82px !important;
  height: 82px !important;
  border-radius: 50%;
  object-fit: cover;
}

.hero h1 {
  font-size: clamp(19px, 4.4vw, 26px) !important;
  line-height: 1.3 !important;
  letter-spacing: -.2px;
  margin-bottom: 8px !important;
  white-space: nowrap !important;
}

.hero p {
  font-size: 13.5px !important;
  line-height: 1.6 !important;
}

@media (max-width: 640px) {
  .hero {
    max-width: 100% !important;
    margin: 4px auto 26px !important;
    padding: 20px 16px 18px !important;
    box-shadow: 5px 5px 0 #d9e8ff !important;
  }
  .hero .avatar,
  .hero .avatar img {
    width: 66px !important;
    height: 66px !important;
  }
  .hero .avatar { margin-bottom: 10px !important; }
  .hero h1 {
    font-size: clamp(17px, 5.2vw, 22px) !important;
    margin-bottom: 6px !important;
  }
  .hero p { font-size: 12.5px !important; }
}

/* Hero 标题兜底：万一以后标题变长也不会溢出卡片 */
.hero h1 {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ==========================================================
   Hero 卡片：再压扁一档、字号再减小（覆盖前面的取值）
   ========================================================== */
body.is-home .hero,
.hero {
  max-width: 520px !important;
  margin: 6px auto 26px !important;
  padding: 18px 20px 16px !important;
  border-radius: 18px !important;
  box-shadow: 5px 5px 0 #d9e8ff !important;
}

.hero .avatar,
.hero .avatar img {
  width: 62px !important;
  height: 62px !important;
}
.hero .avatar { margin: 0 auto 10px !important; font-size: 26px !important; }

.hero h1 {
  font-size: clamp(15px, 3.4vw, 20px) !important;
  line-height: 1.25 !important;
  margin: 0 0 6px !important;
  white-space: nowrap !important;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hero p {
  font-size: 12px !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

@media (max-width: 640px) {
  body.is-home .hero,
  .hero {
    max-width: 100% !important;
    margin: 2px auto 20px !important;
    padding: 16px 14px 14px !important;
    box-shadow: 4px 4px 0 #d9e8ff !important;
  }
  .hero .avatar,
  .hero .avatar img {
    width: 52px !important;
    height: 52px !important;
  }
  .hero .avatar { margin-bottom: 8px !important; }
  .hero h1 {
    font-size: clamp(14px, 4.2vw, 18px) !important;
    margin-bottom: 4px !important;
  }
  .hero p { font-size: 11.5px !important; }
}

/* ==========================================================
   首页 Hero 上移到「海平面」位置（贴合地平线）
   海面占海面头图下方 44%，地平线约在 56% 处：
     桌面 360px × 56% ≈ 202px  → 卡片顶部需上移 158px
     手机 230px × 56% ≈ 129px  → 上移 101px
   ========================================================== */
body.is-home .container {
  padding-top: 0 !important;
}

body.is-home .hero {
  position: relative;
  z-index: 2;
  margin-top: -158px !important;
}

@media (max-width: 640px) {
  body.is-home .hero {
    margin-top: -101px !important;
  }
}

/* ==========================================================
   Hero 位置：改用「头图高度百分比」计算，随屏宽自动贴合海平面
   再往上一点：系数 0.53（原来桌面是固定 -158px）
   ========================================================== */
body.is-home {
  --band-h: 360px;
}

body.is-home .sea-band {
  height: var(--band-h) !important;
}

body.is-home .container {
  padding-top: 0 !important;
}

body.is-home .hero {
  position: relative;
  z-index: 2;
  margin-top: calc(var(--band-h) * -0.53) !important;
}

/* 手机/平板统一走这一档（断点放宽到 768px，覆盖更多机型） */
@media (max-width: 768px) {
  body.is-home {
    --band-h: 230px;
  }
  body.is-home .hero {
    margin-top: calc(var(--band-h) * -0.53) !important;
  }
}