/* ==========================================================================
   班级期刊 · 外观样式（稳定版）
   —— 没有 SVG 滤镜、没有 z-index 负值层、没有重复定义。
   —— 用最朴素的半透明 + 模糊 + 高光，观感接近玻璃，但绝不挡内容。
   ========================================================================== */

/* ---------- 字体 ---------- */
:root {
  --bg: #faf9f6;
  --text: #2c2c2c;
  --muted: #6b6b6b;
  --card: #fff;
  --accent: #c0392b;
  --accent-light: #f9eae8;
  --border: #e8e4dd;
  --glass-brd: rgba(255, 255, 255, .72);
  --glass-shadow: 0 8px 26px rgba(31, 27, 22, .09), 0 1px 0 rgba(255,255,255,.85) inset;
}

/* 页面底色：直接给 body 一个固定渐变（不额外加层，避免遮挡） */
html { background: var(--bg); }
body {
  background-color: #f6f4ef;
  background-image:
    radial-gradient(900px 520px at 8% -6%,   rgba(192, 57, 43, .10), transparent 62%),
    radial-gradient(740px 470px at 108% 2%,  rgba(41, 128, 185, .10), transparent 60%),
    radial-gradient(700px 460px at 50% 108%, rgba(39, 174, 96, .08),  transparent 62%);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* ---------- 玻璃容器 ---------- */
.card-box, .issue-bar, #work-form, .form-card {
  background: rgba(255, 255, 255, .62);
  border: 1px solid var(--glass-brd);
  border-radius: 16px;
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  backdrop-filter: blur(10px) saturate(160%);
  position: relative;
}
.sidebar {
  background: rgba(255, 255, 255, .78);
  border-right: 1px solid var(--glass-brd);
  box-shadow: 6px 0 24px rgba(31, 27, 22, .06);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  backdrop-filter: blur(10px) saturate(160%);
}
.topbar {
  background: rgba(255, 255, 255, .8);
  border-bottom: 1px solid var(--glass-brd);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  backdrop-filter: blur(10px) saturate(160%);
}

/* 边缘高光（纯背景渐变，不影响内容层级） */
.card-box, .issue-bar, #work-form, .form-card {
  background-image: linear-gradient(160deg, rgba(255,255,255,.5), rgba(255,255,255,0) 40%);
}

/* ---------- 列表里的小卡片 ---------- */
.gb-item, .quote-item, .comment, .empty-article, .school-photo.missing {
  background: rgba(255, 255, 255, .6);
  border: 1px solid var(--glass-brd);
  border-radius: 14px;
  box-shadow: 0 5px 16px rgba(31, 27, 22, .06), 0 1px 0 rgba(255,255,255,.8) inset;
}

/* ---------- 按钮 ---------- */
button, .btn, .action-btn, .board-chip, .issue-pick, .section-tab, .tab {
  background: rgba(255, 255, 255, .62);
  border: 1px solid var(--glass-brd);
  border-radius: 12px;
  box-shadow: 0 3px 12px rgba(31, 27, 22, .07), 0 1px 0 rgba(255,255,255,.85) inset;
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
}
button:hover:not([disabled]), .action-btn:hover, .board-chip:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, .85);
  box-shadow: 0 7px 18px rgba(31, 27, 22, .11), 0 1px 0 rgba(255,255,255,.9) inset;
}
button:active:not([disabled]) { transform: translateY(0) scale(.985); }

.btn-main, .issue-pick.on, .section-tab.on, .tab.on, .mode-btn.on {
  background: linear-gradient(160deg, #c0392b, #962820) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, .35) !important;
  box-shadow: 0 6px 18px rgba(192, 57, 43, .26), 0 1px 0 rgba(255,255,255,.4) inset !important;
}
.btn-ghost { background: rgba(255, 255, 255, .6); color: var(--text); }

/* ---------- 输入框 ---------- */
input[type="text"], input[type="password"], textarea {
  background: rgba(255, 255, 255, .78) !important;
  border: 1px solid var(--glass-brd) !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 2px 8px rgba(31,27,22,.05);
}
input:focus, textarea:focus {
  border-color: rgba(192, 57, 43, .55) !important;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, .14), 0 1px 0 rgba(255,255,255,.9) inset;
  outline: none;
}

/* ---------- 看大图遮罩 / 侧边栏遮罩 ---------- */
.lb { background: rgba(24, 20, 18, .84); }
.lb-bar { background: rgba(255, 255, 255, .1); border-bottom: 1px solid rgba(255, 255, 255, .14); }
.lb-btns button { background: rgba(255,255,255,.16) !important; color: #fff !important; border-color: rgba(255,255,255,.22) !important; }
.lb-btns button:hover { background: rgba(255,255,255,.28) !important; }
.mask { background: rgba(24, 20, 18, .42); }

.sidebar .brand img { filter: drop-shadow(0 3px 8px rgba(31, 27, 22, .16)); }

/* ==========================================================================
   全站字体：统一 Google Sans
   —— GoogleSans-Bold.ttf 只含西文/数字（684 个码位，0 个汉字），
      汉字自动回落到系统黑体，这是字体本身决定的，无法绕过。
   —— 只有 700 一个字重，所以全部用 700，避免浏览器合成假细体发虚。
   ========================================================================== */
@font-face {
  font-family: 'Google Sans';
  src: url('./fonts/GoogleSans-Bold.ttf') format('truetype');
  font-weight: 100 900;      /* 声明区间，让浏览器直接用真字形，不合成 */
  font-style: normal;
  font-display: swap;
}

/* 用 * 兜底，任何元素都不会漏掉 */
*,
*::before,
*::after {
  font-family: 'Google Sans', -apple-system, "PingFang SC", "HarmonyOS Sans SC",
               "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
}

/* 代码类保留等宽（只有中转站那个工具页用得到） */
code, pre, kbd, samp, .mono {
  font-family: ui-monospace, Menlo, Consolas, "Courier New", monospace;
}

/* 全部统一为 Bold：西文用真字形，中文用系统粗体 */
body, button, input, textarea, select, label, legend,
h1, h2, h3, h4, h5, h6, p, span, div, a, li, ul, ol, dl, dt, dd,
table, thead, tbody, tr, td, th, b, strong, em, i, small, sub, sup,
blockquote, figure, figcaption, article, section, header, footer, nav, aside, main,
.gb-content, .gb-reply-content, .article-body, .comment-body, .content {
  font-weight: 700;
}

/* 少数需要轻一点的地方（避免整页太闷） */
input::placeholder, textarea::placeholder {
  font-weight: 700;
  opacity: .55;
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }