/* ============================================================
   统一全局深色色彩规范（整套页面共用，无纯白底色）
   --bg        页面基底       深炭黑  #121419
   --surface   卡片次级底色   半透磨砂深色 #1C1F26
   --brand     品牌交互主色   哑光深绿 #1E5631
   --pos       利好标签       薄荷绿  #46D392
   --neg       利空标签       砖红    #E64A4A
   --neu       中性标签       浅灰    #9CA3AF
   --t1        大标题         纯白    #FFFFFF
   --t2        正文           浅灰    #D1D5DB
   --t3        辅助小字       淡灰    #6B7280
   --line      分割装饰线     低透明度深灰
   --accent    点缀色（刷新/提醒） 浅橙 #F59E0B
   统一圆角 10px（--radius）
   ============================================================ */
:root {
  --bg: #121419;
  --surface: rgba(28, 31, 38, 0.88);
  --surface-solid: #1C1F26;
  --brand: #1E5631;
  --brand-hover: #27703F;
  --pos: #46D392;
  --neg: #E64A4A;
  --neu: #9CA3AF;
  --t1: #FFFFFF;
  --t2: #D1D5DB;
  --t3: #6B7280;
  --line: rgba(107, 114, 128, 0.22);
  --accent: #F59E0B;
  --radius: 10px;
  --card-shadow: 0 4px 16px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

/* 「浅色」主题也保持深色规范，仅整体略微提亮（杜绝纯白底色） */
html[data-theme="light"] {
  --bg: #1A1D24;
  --surface: rgba(38, 42, 51, 0.9);
  --surface-solid: #262A33;
  --line: rgba(156, 163, 175, 0.22);
}

* { box-sizing: border-box; }

body {
  min-height: 100vh;
  margin: 0;
  padding-bottom: 80px; /* 为底部导航预留空间 */
  color: var(--t2);
  background: var(--bg);
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
  line-height: 1.65;
  animation: page-fade 0.35s ease; /* 页面切换渐变 */
}

@keyframes page-fade {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

h1, h2, h3 { color: var(--t1); }
a { color: var(--pos); text-underline-offset: 0.2rem; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--pos); outline-offset: 3px; }
button { font: inherit; cursor: pointer; }
.muted { color: var(--t3); }

/* ---------- 通用卡片：磨砂玻璃暗色质感 + 微弱内阴影 + hover 上浮 ---------- */
.card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  backdrop-filter: blur(10px);
  box-shadow: var(--card-shadow);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* ---------- 顶部全局栏 ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 1rem;
  background: rgba(18, 20, 25, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.logo {
  flex: none;
  width: 2.3rem;
  height: 2.3rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  color: var(--t1);
  background: var(--brand);
  font-weight: 800;
  text-decoration: none;
}

.topbar-search { flex: 1; }
.topbar-search input {
  width: 100%;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--t2);
  backdrop-filter: blur(8px);
}
.topbar-search input::placeholder { color: var(--t3); }

.topbar-actions { display: flex; align-items: center; gap: 0.4rem; }
.topbar-actions button, .topbar-actions a {
  position: relative;
  min-width: 2.3rem;
  height: 2.3rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--t2);
  text-decoration: none;
  font-weight: 700;
  transition: background 0.15s ease;
}
.topbar-actions button:hover, .topbar-actions a:hover { background: var(--brand); color: var(--t1); }
#bell-dot {
  position: absolute;
  top: 4px; right: 4px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent); /* 点缀橙：提醒标识 */
}

.user-strip {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.6rem;
  width: min(1000px, calc(100% - 2rem));
  margin: 0.4rem auto 0;
  color: var(--t3);
  font-size: 0.85rem;
}
.user-strip button { border: none; background: none; color: var(--pos); }

/* ---------- 主体 ---------- */
.page { width: min(1000px, calc(100% - 2rem)); margin: 0.8rem auto 0; }

.feed-head { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; }

/* 悬浮刷新按钮：点缀橙 + 加载旋转动画 */
#refresh-btn {
  padding: 0.5rem 1.1rem;
  border: none;
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--accent);
  font-weight: 800;
  border: 1px solid var(--line);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  transition: transform 0.15s ease, background 0.15s ease;
}
#refresh-btn:hover { transform: translateY(-2px); background: var(--surface-solid); }
#refresh-btn.loading .refresh-icon { display: inline-block; animation: spin 0.8s linear infinite; }
.refresh-icon { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* 加载骨架动画 */
.loading-hint { color: var(--t3); animation: pulse 1.1s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }

/* 分类胶囊：深色胶囊圆角按钮，选中态填充品牌绿 */
.category-tabs { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0.6rem 0; }
.category-tabs button {
  padding: 0.35rem 1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--t2);
  transition: background 0.15s ease, color 0.15s ease;
}
.category-tabs button:hover { border-color: var(--brand); }
.category-tabs button.active { background: var(--brand); border-color: var(--brand); color: var(--t1); }

/* 大数据榜单：独立磨砂卡片 */
.hot-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 0.9rem 0; }
.hot-panel > div {
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  backdrop-filter: blur(10px);
  box-shadow: var(--card-shadow);
}
.hot-panel h3 { margin: 0 0 0.4rem; font-size: 1rem; }
.hot-panel ol { margin: 0; padding-left: 1.2rem; }
.hot-panel li { margin: 0.25rem 0; font-size: 0.92rem; }
.hot-panel small { color: var(--t3); }

/* ---------- 新闻卡片 ---------- */
.news-card {
  margin: 0.85rem 0;
  padding: 1rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  backdrop-filter: blur(10px);
  box-shadow: var(--card-shadow);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.news-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
}
.news-title { display: block; color: var(--t1); font-size: 1.08rem; font-weight: 800; text-decoration: none; }
.news-title:hover { color: var(--pos); }
.news-meta { margin: 0.35rem 0; color: var(--t3); font-size: 0.85rem; }
.news-summary { margin: 0.3rem 0 0.6rem; color: var(--t2); }
.news-actions { display: flex; gap: 0.6rem; }
.news-actions button {
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: transparent;
  color: var(--t2);
  transition: background 0.15s ease;
}
.news-actions button:hover { background: var(--surface-solid); }
.news-actions button.on { background: var(--brand); border-color: var(--brand); color: var(--t1); font-weight: 700; }

/* 资讯情感标签 */
.tag { display: inline-block; padding: 0 0.55rem; border-radius: 6px; font-size: 0.8rem; font-weight: 700; }
.tag-利好 { color: #0B2818; background: var(--pos); }
.tag-利空 { color: var(--t1); background: var(--neg); }
.tag-中性 { color: #14161B; background: var(--neu); }
.chip { display: inline-block; padding: 0 0.5rem; border: 1px solid var(--line); border-radius: 6px; font-size: 0.8rem; color: var(--t3); }

.news-row { margin: 0.5rem 0; padding-bottom: 0.5rem; border-bottom: 1px solid var(--line); }
.news-row small { color: var(--t3); }

/* ---------- S 搜索页：左右固定分栏 ---------- */
.search-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 1.2rem;
  align-items: stretch;
}
.search-main { min-width: 0; }

.search-box { display: flex; gap: 0.6rem; margin: 0.4rem 0 1rem; }
.search-box input {
  flex: 1;
  padding: 0.6rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  backdrop-filter: blur(8px);
  color: var(--t2);
}
.search-box input::placeholder { color: var(--t3); }
.search-box button {
  padding: 0.6rem 1.5rem;
  border: none;
  border-radius: var(--radius);
  background: var(--brand);
  color: var(--t1);
  font-weight: 700;
  transition: background 0.15s ease;
}
.search-box button:hover { background: var(--brand-hover); }

.stock-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.8rem; }
.stock-card {
  padding: 0.8rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  backdrop-filter: blur(10px);
  box-shadow: var(--card-shadow);
  transition: transform 0.18s ease;
}
.stock-card:hover { transform: translateY(-3px); }
.stock-card b { color: var(--t1); }
.stock-card small { color: var(--t3); }
.stock-card-actions { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
.stock-card button {
  padding: 0.25rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: transparent;
  color: var(--t2);
  font-size: 0.85rem;
}
.stock-card button:hover { background: var(--brand); color: var(--t1); }

.mini-forum { margin-top: 0.6rem; padding-top: 0.5rem; border-top: 1px solid var(--line); font-size: 0.9rem; }

/* Subscribe 订阅博主侧边栏：细竖引导线分隔条目 */
.subscribe-panel {
  padding: 0.9rem 0.9rem 0.9rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  backdrop-filter: blur(10px);
  box-shadow: var(--card-shadow);
  align-self: stretch;
}
.subscribe-panel h3 { margin: 0 0 0.6rem; font-size: 1rem; }
.blogger-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0 0.55rem 0.9rem;
  border-left: 2px solid var(--line); /* 细竖引导线 */
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.blogger-item:hover, .blogger-item.active { border-left-color: var(--pos); background: rgba(70, 211, 146, 0.05); }
.blogger-avatar {
  flex: none;
  width: 2.4rem;
  height: 2.4rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface-solid);
  border: 1px solid var(--line);
  font-size: 1.2rem;
}
.blogger-meta { flex: 1; min-width: 0; }
.blogger-meta b { display: block; color: var(--t1); font-size: 0.92rem; }
.blogger-meta small { display: block; color: var(--t3); font-size: 0.76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.follow-btn {
  flex: none;
  padding: 0.2rem 0.7rem;
  border: 1px solid var(--brand);
  border-radius: 999px;
  background: transparent;
  color: var(--pos);
  font-size: 0.78rem;
}
.follow-btn.on { background: var(--brand); color: var(--t1); }

/* 博主文章流（点击头像后右侧/主区切换展示） */
.blogger-feed-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.6rem; }
.blogger-feed-head .back-btn { border: none; background: none; color: var(--pos); font-size: 0.9rem; }
.article-card {
  margin: 0.7rem 0;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--card-shadow);
}
.article-card h4 { margin: 0 0 0.3rem; color: var(--t1); }
.article-card p { margin: 0.2rem 0; font-size: 0.92rem; }

/* ---------- A 个人主页 ---------- */
.profile-hero {
  position: relative;
  min-height: 220px;
  margin: 0.4rem 0 1rem;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface-solid);
  background-size: cover;
  background-position: center;
  box-shadow: var(--card-shadow);
}
.profile-hero::before { /* 半透明深色遮罩，避免背景遮挡文字 */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(18, 20, 25, 0.35), rgba(18, 20, 25, 0.78));
}
.profile-hero-inner {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1.1rem 1.2rem;
  min-height: 220px;
}
.profile-id h2 { margin: 0.4rem 0 0.1rem; }
.profile-id p { margin: 0; color: var(--t2); font-size: 0.88rem; }
.profile-corner { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.profile-corner .avatar {
  width: 4rem;
  height: 4rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--line);
  font-size: 1.8rem;
  backdrop-filter: blur(8px);
}
.profile-corner .logout-link { border: none; background: none; color: var(--t2); font-size: 0.82rem; text-decoration: underline; }
.profile-corner .logout-link:hover { color: var(--neg); }
.bg-upload-btn {
  position: absolute;
  left: 1rem;
  bottom: 0.9rem;
  padding: 0.3rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(28, 31, 38, 0.75);
  color: var(--t2);
  font-size: 0.8rem;
}
.bg-upload-btn:hover { background: var(--brand); color: var(--t1); }

.profile-section {
  margin: 0.9rem 0;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  backdrop-filter: blur(10px);
  box-shadow: var(--card-shadow);
}
.profile-section h3 { margin: 0 0 0.6rem; font-size: 1rem; }

/* 互动记录：三个横向功能按钮 */
.record-tabs { display: flex; gap: 0.6rem; margin-bottom: 0.6rem; }
.record-tabs button {
  flex: 1;
  padding: 0.55rem 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: transparent;
  color: var(--t2);
  font-weight: 700;
  transition: background 0.15s ease;
}
.record-tabs button:hover { background: var(--surface-solid); }
.record-tabs button.active { background: var(--brand); border-color: var(--brand); color: var(--t1); }

/* 综合功能菜单 */
.menu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.7rem; }
.menu-grid a, .menu-grid button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 0.85rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: transparent;
  color: var(--t2);
  text-decoration: none;
  font-size: 0.88rem;
  transition: transform 0.15s ease, background 0.15s ease;
}
.menu-grid a:hover, .menu-grid button:hover { transform: translateY(-2px); background: var(--surface-solid); }
.menu-grid .icon { font-size: 1.3rem; }

.watch-remove { margin-top: 0.4rem; }

/* ---------- 详情页 ---------- */
.detail h1 { margin: 0.4rem 0; font-size: 1.5rem; }
.detail-content {
  margin: 0.8rem 0;
  padding: 1rem 1.2rem;
  border-left: 3px solid var(--brand);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--surface);
  box-shadow: var(--card-shadow);
}

.ai-panel, .forum-panel .forum-block {
  margin: 1rem 0;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  backdrop-filter: blur(10px);
  box-shadow: var(--card-shadow);
}
.ai-panel h3, .forum-block h3 { margin: 0 0 0.5rem; font-size: 1.05rem; }

.comment { margin: 0.4rem 0; padding-bottom: 0.4rem; border-bottom: 1px solid var(--line); }
.comment b { color: var(--t1); }
.comment small { color: var(--t3); }
.comment-like { border: none; background: none; color: var(--pos); }
.comment-form { display: flex; gap: 0.5rem; margin-top: 0.6rem; }
.comment-form input {
  flex: 1;
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-solid);
  color: var(--t2);
}
.comment-form .comment-send {
  padding: 0.45rem 1rem;
  border: none;
  border-radius: var(--radius);
  background: var(--brand);
  color: var(--t1);
}
.comment-form .comment-send:hover { background: var(--brand-hover); }

/* ---------- 设置页 ---------- */
.settings-form { margin: 1rem 0; }
.settings-form fieldset {
  margin: 0 0 1rem;
  padding: 0.8rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  backdrop-filter: blur(10px);
  box-shadow: var(--card-shadow);
}
.settings-form legend { padding: 0 0.4rem; font-weight: 800; color: var(--t1); }
.settings-form label { display: block; margin: 0.5rem 0; }
.settings-form label.row { display: inline-flex; align-items: center; gap: 0.4rem; margin-right: 1rem; }
.settings-form select, .settings-form input[type="email"] {
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-solid);
  color: var(--t2);
}
.settings-form button[type="submit"] {
  padding: 0.55rem 1.5rem;
  border: none;
  border-radius: var(--radius);
  background: var(--brand);
  color: var(--t1);
  font-weight: 800;
}
.settings-form button[type="submit"]:hover { background: var(--brand-hover); }

/* ---------- 弹层 ---------- */
dialog {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-solid);
  color: var(--t2);
  max-width: 480px;
  width: calc(100% - 3rem);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
}
dialog::backdrop { background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(3px); }
dialog h2 { margin-top: 0; }
dialog label { display: block; margin: 0.6rem 0; }
dialog input {
  width: 100%;
  padding: 0.5rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--t2);
}
.dialog-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.8rem; }
.dialog-actions button {
  padding: 0.45rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: transparent;
  color: var(--t2);
}
.dialog-actions button:first-child { background: var(--brand); border-color: var(--brand); color: var(--t1); }
.dialog-actions button.danger { background: var(--neg); border-color: var(--neg); color: var(--t1); }
.form-error { min-height: 1.2rem; margin: 0.3rem 0 0; color: var(--neg); font-size: 0.85rem; }

/* ---------- 底部三大导航：深色渐变底色，选中品牌绿高亮 ---------- */
.bottom-nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 10;
  display: flex;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(28, 31, 38, 0.92), rgba(15, 17, 21, 0.98));
  backdrop-filter: blur(12px);
}
.bottom-nav a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.45rem 0 0.55rem;
  color: var(--t3);
  font-size: 0.8rem;
  text-decoration: none;
  transition: color 0.15s ease;
}
.bottom-nav a span {
  width: 1.7rem;
  height: 1.7rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  font-weight: 800;
  transition: background 0.15s ease;
}
.bottom-nav a.active { color: var(--pos); }
.bottom-nav a.active span { background: var(--brand); color: var(--t1); }

@media (max-width: 780px) {
  .hot-panel { grid-template-columns: 1fr; }
  .search-layout { grid-template-columns: 1fr; }
  .subscribe-panel { order: -1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}