/* ============================================================
   线下舞台 · 皮肤「青山有思」（适配小手机）
   ------------------------------------------------------------
   参考：酒馆主题《青山有思》（作者 吃一口月亮）的视觉语言，
   不是复刻它的 DOM，而是把这套语言重写到 .vn-stage 的类名上：

     · 宋体 / 全直角 / 纸质底
     · 三重环状阴影：1px 墨线 + 2px 白缝 + 3px 暖色投影
     · 头像像贴在纸上的方片，固定 -4deg 倾斜
     · 名字前置竖条 ▎，时间戳右对齐、灰绿
     · 正文两端对齐，行距 1.9

   启用：.vn-layer 上 data-vn-skin="qingshan"（默认已是这套）。
   换图只改下面 5 个 URL 变量即可。
   ============================================================ */

.vn-layer[data-vn-skin="qingshan"] {
  /* —— 色板 —— */
  --vn-bg: #eef3ef;
  --vn-bg-url: none;
  --vn-tint: rgba(238, 243, 239, .55);
  --vn-vignette: radial-gradient(120% 80% at 50% 0%, transparent 55%, rgba(33, 55, 61, .10) 100%);
  --vn-grain-opacity: .30;

  --vn-text: #2a3a30;
  --vn-text-soft: rgba(42, 58, 48, .80);
  --vn-text-dim: rgba(42, 58, 48, .48);
  --vn-accent: #5a7a68;
  --vn-line: rgba(33, 55, 61, .18);

  /* —— 字体：全局宋体 —— */
  --vn-font-ui: "Songti SC", "Noto Serif SC", "Source Han Serif SC", Georgia, serif;
  --vn-font-text: "Songti SC", "Noto Serif SC", "Source Han Serif SC", Georgia, serif;
  --vn-size-text: 14.5px;
  --vn-lh-text: 1.92;
  --vn-size-name: 13px;
  --vn-size-time: 9.5px;

  /* —— 纸面 —— */
  --vn-bubble-bg: rgba(252, 253, 251, .94);
  --vn-bubble-bg-url: none;
  --vn-bubble-border: rgba(33, 55, 61, .55);
  --vn-bubble-radius: 0;
  --vn-bubble-blur: 0px;
  --vn-bubble-pad: 14px 16px 16px;
  --vn-bubble-max: 92%;
  --vn-bubble-shadow:
    0 0 0 1px #21373d,
    0 0 0 2px #ffffff,
    0 4px 7px rgba(92, 61, 30, .26);

  /* —— 卡片：同款环状阴影 —— */
  --vn-card-bg: rgba(252, 253, 251, .96);
  --vn-card-border: rgba(33, 55, 61, .55);
  --vn-card-radius: 0;
  --vn-card-blur: 0px;
  --vn-card-shadow:
    0 0 0 1px #21373d,
    0 0 0 2px #ffffff,
    0 4px 7px rgba(92, 61, 30, .26);

  /* —— 头像：贴纸方片 —— */
  --vn-avatar-size: 46px;
  --vn-avatar-radius: 0;
  --vn-avatar-rotate: -4deg;
  --vn-avatar-x: 0px;
  --vn-avatar-y: 2px;
  --vn-avatar-space: 58px;
  --vn-avatar-shadow:
    0 0 0 1px #21373d,
    0 0 0 2px #ffffff,
    0 3px 6px rgba(92, 61, 30, .30);
  --vn-avatar-user-filter: saturate(.85) brightness(1.02);

  background: var(--vn-bg);
  color: var(--vn-text);
}

/* ---- 背景：宣纸底 + 远山淡影 ---- */
.vn-layer[data-vn-skin="qingshan"] .vn-stage-bg,
.vn-layer[data-vn-skin="qingshan"] .vn-bg-tint {
  background:
    radial-gradient(90% 55% at 50% 0%, rgba(140, 169, 155, .32) 0%, rgba(140, 169, 155, 0) 62%),
    radial-gradient(70% 40% at 12% 8%, rgba(90, 122, 104, .16) 0%, transparent 60%),
    linear-gradient(180deg, #f5f8f5 0%, #e9f0ec 46%, #e3ebe6 100%);
}
.vn-layer[data-vn-skin="qingshan"] .vn-bg-grain {
  mix-blend-mode: multiply;
  opacity: .22;
}
.vn-layer[data-vn-skin="qingshan"] .vn-bg-image { opacity: .9; }

/* ---- HUD ---- */
.vn-layer[data-vn-skin="qingshan"] .vn-hud {
  background: linear-gradient(180deg, rgba(245, 248, 245, .96), rgba(245, 248, 245, 0));
  border-bottom: 1px solid rgba(33, 55, 61, .16);
}
.vn-layer[data-vn-skin="qingshan"] .vn-hud-title {
  font-size: 14px;
  letter-spacing: .22em;
  color: #21373d;
}
.vn-layer[data-vn-skin="qingshan"] .vn-hud-meta { color: rgba(33, 55, 61, .52); letter-spacing: .24em; }
.vn-layer[data-vn-skin="qingshan"] .vn-btn {
  color: #4e6a60;
  border: 1px solid rgba(33, 55, 61, .22);
  border-radius: 50%;
  background: rgba(255, 255, 255, .6);
}
.vn-layer[data-vn-skin="qingshan"] .vn-btn:hover { background: #21373d; color: #f5f8f5; }

/* ---- 行 ---- */
.vn-layer[data-vn-skin="qingshan"] .vn-row { margin-bottom: 4px; }
.vn-layer[data-vn-skin="qingshan"] .vn-row--user .vn-avatar { transform: rotate(3.2deg); }

/* ---- 气泡：纸页 ---- */
.vn-layer[data-vn-skin="qingshan"] .vn-bubble {
  background-color: var(--vn-bubble-bg);
  background-image:
    repeating-linear-gradient(0deg, rgba(33, 55, 61, .022) 0 1px, transparent 1px 4px),
    radial-gradient(120% 80% at 20% 0%, rgba(255, 255, 255, .8), rgba(255, 255, 255, 0) 70%);
  border: 0;
  box-shadow: var(--vn-bubble-shadow);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.vn-layer[data-vn-skin="qingshan"] .vn-row--user .vn-bubble {
  background-color: rgba(240, 246, 242, .96);
  box-shadow: inset 0 0 0 1px rgba(90, 122, 104, .22), var(--vn-bubble-shadow);
}

/* ---- 名字 / 时间 ---- */
.vn-layer[data-vn-skin="qingshan"] .vn-name {
  font-size: var(--vn-size-name);
  color: #35544a;
  letter-spacing: .12em;
}
.vn-layer[data-vn-skin="qingshan"] .vn-name::before {
  content: "▎";
  color: #5a7a68;
  font-size: .9em;
  margin-right: 1px;
}
.vn-layer[data-vn-skin="qingshan"] .vn-time { color: #7a8b83; letter-spacing: .1em; }

/* ---- 正文：两端对齐 ---- */
.vn-layer[data-vn-skin="qingshan"] .vn-text {
  text-align: justify;
  color: #2a3a30;
}
.vn-layer[data-vn-skin="qingshan"] .vn-para { text-indent: 0; }

/* ---- 卡片 ---- */
.vn-layer[data-vn-skin="qingshan"] .vn-card {
  background: var(--vn-card-bg);
  border: 0;
  box-shadow: var(--vn-card-shadow);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.vn-layer[data-vn-skin="qingshan"] .vn-card-head { border-bottom: 1px solid rgba(33, 55, 61, .22); }
.vn-layer[data-vn-skin="qingshan"] .vn-card-kicker { color: #7a8b83; letter-spacing: .34em; }
.vn-layer[data-vn-skin="qingshan"] .vn-card-title { font-size: 16px; color: #21373d; letter-spacing: .06em; }
.vn-layer[data-vn-skin="qingshan"] .vn-card-sub { color: #6b7f76; font-style: italic; }
.vn-layer[data-vn-skin="qingshan"] .vn-fact-key { color: #7a8b83; letter-spacing: .28em; }
.vn-layer[data-vn-skin="qingshan"] .vn-fact-val { color: #2a3a30; }
.vn-layer[data-vn-skin="qingshan"] .vn-fact + .vn-fact { border-top: 1px dashed rgba(33, 55, 61, .18); }

.vn-layer[data-vn-skin="qingshan"] .vn-card--note { background-color: #fbf8e9; }
.vn-layer[data-vn-skin="qingshan"] .vn-note-text { color: #3a352a; }
.vn-layer[data-vn-skin="qingshan"] .vn-ticket-notch { background: #e9f0ec; }
.vn-layer[data-vn-skin="qingshan"] .vn-photo-tape { background: rgba(140, 169, 155, .45); }

/* ---- 底部提示 ---- */
.vn-layer[data-vn-skin="qingshan"] .vn-tools-hint { color: rgba(33, 55, 61, .38); letter-spacing: .26em; }