/* ============================================================================
 * site.css — 站点基础样式（原 index.html 里的内联 <style>，原样搬出来）
 * ----------------------------------------------------------------------------
 * 为什么搬出来：树洞要独立成页（treehole.html），它必须复用同一套基础样式
 * （导航 / 区块头 / 表单 / 卡片 / 页脚），否则两个页面会长得不一样。
 * 加载顺序与原来完全一致：site.css → tokens.css → depth3d.css → home-flagship.css
 * （原来内联样式也在那几个 <link> 之前，所以层叠结果不变）。
 * ========================================================================== */
    /* ============ 明暗主题变量 ============ */
    :root {
      /* 亮色主题（默认） */
      --bg: #f4f5f9;
      --ink: #171a22;
      --text: #2a2e3a;
      --muted: #8a91a0;
      --accent: #6c8cff;
      --accent-2: #9d7bff;
      --glass-bg: rgba(255, 255, 255, .58);
      --glass-border: rgba(255, 255, 255, .7);
      --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, .9);
      --glass-shadow: 0 12px 40px -18px rgba(40, 50, 90, .22);
      --card-hover: rgba(255, 255, 255, .8);
      --btn-border: rgba(255, 255, 255, .7);
      --blob-a: .7;
      --blob-b: .55;
      --nav-bg: rgba(255, 255, 255, .6);
      --radius: 18px;
      --blur: 20px;
    }
    :root[data-theme="dark"] {
      /* 暗色主题 */
      --bg: #0f1117;
      --ink: #eef1f6;
      --text: #d5dae3;
      --muted: #8b93a5;
      --accent: #8aa8ff;
      --accent-2: #b79aff;
      --glass-bg: rgba(28, 32, 42, .55);
      --glass-border: rgba(255, 255, 255, .12);
      --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, .16);
      --glass-shadow: 0 12px 40px -18px rgba(0, 0, 0, .6);
      --card-hover: rgba(36, 41, 54, .72);
      --btn-border: rgba(255, 255, 255, .14);
      --blob-a: .38;
      --blob-b: .3;
      --nav-bg: rgba(15, 17, 23, .6);
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
      background: var(--bg);
      color: var(--text);
      line-height: 1.7;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
      transition: background .4s ease, color .4s ease;
    }

    /* 背景光斑（明暗主题呈现不同画面） */
    .bg-blobs { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
    .bg-blobs i {
      position: absolute; border-radius: 50%; filter: blur(70px);
      transition: opacity .5s ease, transform .5s ease;
    }
    .bg-blobs .b1 { width: 460px; height: 460px; left: -80px; top: -60px; background: radial-gradient(circle, #b9c8ff, transparent 70%); opacity: var(--blob-a); }
    .bg-blobs .b2 { width: 420px; height: 420px; right: -100px; top: 6%; background: radial-gradient(circle, #d9c4ff, transparent 70%); opacity: var(--blob-b); }
    .bg-blobs .b3 { width: 380px; height: 380px; left: 30%; bottom: -120px; background: radial-gradient(circle, #b9d8ff, transparent 70%); opacity: var(--blob-a); }

    .wrap { max-width: 980px; margin: 0 auto; padding: 0 24px; }

    /* 全局柔光 */
    #cursor-glow {
      position: fixed; width: 560px; height: 560px; border-radius: 50%;
      pointer-events: none; z-index: 1; left: 0; top: 0;
      background: radial-gradient(circle, rgba(108,140,255,.08), rgba(157,123,255,.05) 45%, transparent 70%);
      transform: translate(-50%, -50%); opacity: 0; transition: opacity .4s ease;
    }
    body.glow-on #cursor-glow { opacity: 1; }

    /* 导航：磨砂玻璃 + 状态栏元素 */
    body > nav {
      position: sticky; top: 0; z-index: 30;
      backdrop-filter: blur(var(--blur)) saturate(180%);
      -webkit-backdrop-filter: blur(var(--blur)) saturate(180%);
      background: var(--nav-bg);
      border-bottom: 1px solid var(--glass-border);
    }
    .nav-inner {
      max-width: 980px; margin: 0 auto; padding: 0 24px;
      height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
    }
    /* 触摸目标：品牌链接只包着一行文字（高 28px），手机/平板上偏小；
       补上下内边距撑到 44px，靠 nav-inner 的 flex 居中，导航栏高度不受影响。 */
    .brand { font-weight: 700; font-size: 16px; line-height: 1; color: var(--ink); white-space: nowrap; padding: 8px 0; }
    .nav-right { display: flex; align-items: center; gap: 12px; }
    .nav-time { font-size: 13px; line-height: 1; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
    .slogan {
      flex: 1; text-align: center; white-space: nowrap; overflow: hidden;
      font-size: 14px; font-weight: 400; line-height: 1;
      color: var(--muted); user-select: none;
    }
    .theme-btn {
      width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--btn-border);
      background: var(--glass-bg); color: var(--ink); cursor: pointer;
      backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
      box-shadow: var(--glass-highlight); font-size: 16px; line-height: 1;
      display: grid; place-items: center; transition: background .2s ease, transform .15s ease;
    }
    .theme-btn:hover { background: var(--card-hover); transform: translateY(-1px); }
    .nav-links { display: flex; gap: 20px; }
    .nav-links a { color: var(--muted); text-decoration: none; font-size: 14px; line-height: 1; transition: color .2s; }
    .nav-links a:hover { color: var(--ink); }

    /* Hero */
    .hero { position: relative; padding: 118px 0 40px; }
    .hero-inner {
      position: relative; z-index: 2; text-align: center;
      transform-origin: center top; will-change: transform, opacity;
    }
    .hero .hi { font-size: 15px; line-height: 1.5; color: var(--muted); margin-bottom: 14px; }
    .hero h1 {
      font-size: clamp(38px, 8vw, 68px); font-weight: 800; letter-spacing: 1px; line-height: 1.1;
      margin-bottom: 18px;
      color: var(--ink);
      cursor: default;
    }
    .hero .sub { color: var(--muted); font-size: 16.5px; line-height: 1.6; max-width: 440px; margin: 0 auto 34px; }
    .hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
    .btn {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 13px 26px; border-radius: 12px; text-decoration: none;
      font-size: 15px; font-weight: 600; color: var(--ink);
      background: var(--glass-bg);
      backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
      border: 1px solid var(--btn-border); box-shadow: var(--glass-highlight);
      transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
    }
    .btn:hover { transform: translateY(-2px); background: var(--card-hover); }

    /* 区块 */
    section { padding: 76px 0; }
    #works { margin-top: 40px; }
    #treehole { margin-top: 40px; }
    #social { margin-top: 40px; }
    .sec-head { margin-bottom: 28px; }
    .sec-tag { font-size: 12px; letter-spacing: 3px; color: var(--accent); text-transform: uppercase; font-weight: 700; }
    .sec-title { font-size: clamp(24px, 4vw, 32px); font-weight: 800; margin-top: 8px; letter-spacing: -.5px; color: var(--ink); }
    .sec-desc { color: var(--muted); font-size: 14px; margin-top: 6px; }

    .about { max-width: 100%; }
    .about-card {
      background: var(--glass-bg); backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur));
      border: 1px solid var(--glass-border); border-radius: var(--radius);
      padding: 32px 30px; box-shadow: var(--glass-shadow), var(--glass-highlight);
    }
    .about p { color: var(--muted); font-size: 15.5px; line-height: 1.8; }
    .about p b { color: var(--text); }
    .about p + p { margin-top: 14px; }

    .list { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .item {
      display: flex; align-items: center; gap: 20px;
      background: var(--glass-bg); backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur));
      border: 1px solid var(--glass-border); border-radius: var(--radius);
      padding: 24px 26px; text-decoration: none; color: inherit;
      box-shadow: var(--glass-highlight), 0 4px 18px -10px rgba(40,50,90,.1);
      transition: transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s ease, background .22s ease, border-color .22s ease;
    }
    .item:hover { transform: translateY(-3px); background: var(--card-hover); border-color: var(--glass-border); box-shadow: var(--glass-highlight), var(--glass-shadow); }
    .item-no { font-size: 20px; font-weight: 800; color: var(--accent); min-width: 34px; font-variant-numeric: tabular-nums; }
    .item-main { flex: 1; min-width: 0; }
    .item-title { font-size: 17px; font-weight: 700; color: var(--ink); }
    .item-desc { color: var(--muted); font-size: 13.5px; margin-top: 2px; }
    .item-arrow { color: var(--muted); font-size: 20px; flex-shrink: 0; transition: transform .2s ease, color .2s ease; }
    .item:hover .item-arrow { transform: translateX(4px); color: var(--accent); }
    .item-tag {
      flex-shrink: 0; font-size: 12px; padding: 4px 11px; border-radius: 999px;
      background: rgba(108,140,255,.12); color: var(--accent); border: 1px solid rgba(108,140,255,.22);
    }
    .item.dim { opacity: .55; }
    .item.dim:hover { transform: none; opacity: .78; }

    /* 鼠标移到单个卡片时，该卡片单独浮空 */
    .item:hover { animation: itemBob 1.2s ease-in-out infinite; }
    @keyframes itemBob {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-6px); }
    }

    .social-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
    .social {
      display: flex; gap: 18px; align-items: flex-start;
      background: var(--glass-bg); backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur));
      border: 1px solid var(--glass-border); border-radius: var(--radius);
      padding: 26px; text-decoration: none; color: inherit;
      box-shadow: var(--glass-highlight), 0 4px 18px -10px rgba(40,50,90,.1);
      transition: transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s ease, background .22s ease;
    }
    .social:hover { transform: translateY(-4px); background: var(--card-hover); box-shadow: var(--glass-highlight), var(--glass-shadow); }
    .social-icon {
      width: 52px; height: 52px; border-radius: 14px; flex-shrink: 0;
      display: grid; place-items: center; font-size: 26px;
      background: var(--glass-bg); border: 1px solid var(--glass-border);
      backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    }
    .social-name { font-weight: 700; font-size: 16px; color: var(--ink); }
    .social-handle { color: var(--accent); font-size: 13.5px; font-weight: 600; margin: 3px 0 8px; }
    .social-desc { color: var(--muted); font-size: 13.5px; }

    /* 树洞动态风格 */
    #treehole { position: relative; overflow: hidden; }
    /* 原版在树洞上叠了一层蓝紫渐变（两团径向光晕，不透明度 .08 / .07）。
       它把整块区域的明度抬高一档，与页面暗底形成两种色调 —— 已移除，
       让树洞与全站共用同一个底色。 */
    .treehole-leaf {
      position: absolute; top: -24px; pointer-events: none; z-index: 0;
      width: 9px; height: 9px; border-radius: 50% 0 50% 50%;
      background: linear-gradient(135deg, var(--accent), var(--accent-2));
      opacity: 0;
      animation: leafFall linear infinite;
    }
    @keyframes leafFall {
      0% { transform: translateY(0) rotate(0deg) translateX(0); opacity: 0; }
      /* 峰值透明度从 .65 降到 .3：落叶原来是整个树洞里最亮的元素，
         在暗底上显得跳，也会让这一块整体偏亮。降下来后只作为隐约的氛围。 */
      12% { opacity: .3; }
      100% { transform: translateY(65vh) rotate(340deg) translateX(40px); opacity: 0; }
    }

    /* 发布留言区：只加边框，不改变底色。
       注意 background 必须保持透明 ——
       之前给这一层填了 var(--glass-bg)，半透明色叠在页面底上会整体偏亮
       （深色下 rgba(28,32,42,.55) 叠 #0f1117 ≈ #161922，比页面底色亮一档），
       与主体产生色差。这里只保留边框，背景完全透出页面底色。 */
    .treehole-form {
      display: flex; flex-direction: column; gap: 12px;
      margin-bottom: 26px; position: relative; z-index: 1;
      background: transparent;
      border: 1px solid var(--glass-border); border-radius: var(--radius);
      padding: 20px 22px;
    }
    .treehole-form input, .treehole-form textarea {
      width: 100%; padding: 14px 16px; border-radius: 14px;
      border: 1px solid var(--glass-border); background: var(--glass-bg);
      color: var(--text); font-size: 15px; font-family: inherit; outline: none; resize: vertical;
    }
    .treehole-form textarea { min-height: 92px; }
    .treehole-form input:focus, .treehole-form textarea:focus { border-color: var(--accent); }
    .treehole-form button {
      align-self: flex-end; padding: 11px 30px; border: none; border-radius: 12px;
      background: linear-gradient(135deg, var(--accent), var(--accent-2));
      color: #fff; font-size: 15px; font-weight: 700; cursor: pointer; transition: transform .15s;
    }
    .treehole-form button:hover { transform: translateY(-2px); }
    .treehole-item {
      background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius);
      padding: 18px 20px; margin-bottom: 16px; position: relative; z-index: 1;
      box-shadow: 0 1px 2px rgba(0, 0, 0, .18), 0 4px 12px rgba(0, 0, 0, .14), 0 12px 28px rgba(0, 0, 0, .12);
      transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
      /* 关键：网格子项默认 min-width:auto，会被内容的 min-content 顶宽。
         归零 + 溢出裁剪后，卡片宽度恒等于所在轨道宽度，不随选中/展开变化 */
      min-width: 0; max-width: 100%; overflow: hidden;
    }
    .treehole-item:hover {
      transform: translateY(-4px);
      border-color: color-mix(in srgb, var(--accent) 40%, transparent);
      box-shadow: 0 2px 4px rgba(0, 0, 0, .22), 0 8px 20px rgba(0, 0, 0, .2), 0 22px 50px rgba(0, 0, 0, .2);
    }
    /* 选中（展开）高亮：只改边框色，不参与尺寸计算，不影响布局 */
    .treehole-item.active { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }

    /* ============ 卡片流布局（PC 两列 / 手机单列） ============
       1) 用 flex 两条独立列，取代 grid 共享行高 —— grid 里任一卡片展开会让整行变高，
          导致同行另一张卡下方空出大片空白、下方卡片整体下移；
       2) 每列 flex:1 1 0 + min-width:0，宽度恒为 50%，不被长文本/回复表单的 min-content 顶宽；
       3) 卡片自身 overflow 收在内部，不参与父级尺寸计算 */
    #treehole-list {
      position: relative; z-index: 1; display: flex; align-items: flex-start;
      gap: 16px; width: 100%; max-width: 100%; min-width: 0;
    }
    .th-col {
      flex: 1 1 0; min-width: 0; max-width: 100%;
      display: flex; flex-direction: column; gap: 16px;
    }
    .treehole-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; min-width: 0; flex-wrap: wrap; }
    .treehole-nick { font-weight: 700; font-size: 14px; color: var(--ink); }
    .treehole-time { font-size: 12px; color: var(--muted); margin-left: auto; }
    .treehole-del { font-size: 12px; color: var(--muted); cursor: pointer; border: none; background: none; padding: 2px 6px; border-radius: 6px; }
    .treehole-del:hover { color: #ff7a7a; background: rgba(255, 90, 90, .1); }
    .treehole-content { color: var(--text); font-size: 15px; line-height: 1.8; white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; min-width: 0; }
    .treehole-content.collapsed { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; }
    /* 展开全文后：高度封顶 + 卡片内部滚动，避免长留言把卡片/整行撑高造成重排 */
    .treehole-content:not(.collapsed) {
      max-height: 360px; overflow-y: auto; overscroll-behavior: contain; padding-right: 4px;
      scrollbar-width: thin;
      scrollbar-color: color-mix(in srgb, var(--accent) 45%, transparent) transparent;
    }
    .treehole-content:not(.collapsed)::-webkit-scrollbar { width: 6px; }
    .treehole-content:not(.collapsed)::-webkit-scrollbar-track { background: transparent; }
    .treehole-content:not(.collapsed)::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 3px; }
    .treehole-content .content-more { color: var(--accent); font-size: 13px; cursor: pointer; margin-top: 4px; display: block; }
    .treehole-content .content-more:hover { text-decoration: underline; }
    .treehole-empty { color: var(--muted); text-align: center; padding: 30px 0; font-size: 14px; }
    .treehole-more { display: block; margin: 8px auto 0; padding: 10px 28px; border-radius: 12px; border: 1px solid var(--glass-border); background: var(--glass-bg); color: var(--text); cursor: pointer; font-size: 14px; }
    .treehole-reply-btn { font-size: 13px; color: var(--muted); background: none; border: none; cursor: pointer; padding: 4px 0; margin-top: 6px; }
    .treehole-reply-btn:hover { color: var(--accent); }
    .treehole-replies-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s cubic-bezier(.4, 0, .2, 1); }
    .treehole-replies-wrap.open { grid-template-rows: 1fr; }
    .treehole-replies-inner { overflow: hidden; min-height: 0; min-width: 0; }
    .treehole-replies { border-top: 1px dashed var(--glass-border); margin-top: 10px; padding-top: 10px; min-width: 0; }
    /* 回复列表独立滚动：内容再多也只在卡片内部滚动，不再撑高卡片、不再拉高整行 */
    .reply-tree {
      max-height: 300px; overflow-y: auto; overscroll-behavior: contain;
      min-width: 0; padding-right: 4px;
      scrollbar-width: thin;
      scrollbar-color: color-mix(in srgb, var(--accent) 45%, transparent) transparent;
    }
    .reply-tree::-webkit-scrollbar { width: 6px; }
    .reply-tree::-webkit-scrollbar-track { background: transparent; }
    .reply-tree::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 3px; }
    .reply-item { padding: 7px 0; min-width: 0; }
    .reply-item .reply-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    .reply-item .reply-nick { font-weight: 600; font-size: 13px; color: var(--ink); }
    .reply-item .reply-to { font-size: 12px; color: var(--muted); }
    .reply-item .reply-to b { color: var(--accent); font-weight: 600; }
    .reply-item .reply-time { font-size: 11px; color: var(--muted); }
    .reply-item .reply-edited { font-size: 11px; color: var(--muted); }
    .reply-item .reply-content { color: var(--text); font-size: 14px; line-height: 1.7; margin-top: 4px; white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; min-width: 0; }
    .reply-item .reply-actions { margin-top: 4px; display: flex; gap: 12px; }
    .reply-item .reply-actions button { font-size: 12px; color: var(--muted); background: none; border: none; cursor: pointer; padding: 0; }
    .reply-item .reply-actions button:hover { color: var(--accent); }
    .reply-item .reply-actions button.danger:hover { color: #ff7a7a; }
    .reply-form { margin-top: 8px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
    .reply-form input { padding: 9px 12px; border-radius: 10px; border: 1px solid var(--glass-border); background: var(--glass-bg); color: var(--text); font-size: 14px; outline: none; min-width: 0; max-width: 100%; }
    .reply-form input:focus { border-color: var(--accent); }
    /* 输入框可收缩（flex-shrink:1 + min-width:0），不再用固定宽度顶开卡片 */
    .reply-form .reply-nick-input { flex: 0 1 110px; min-width: 0; }
    .reply-form .reply-content-input { flex: 1 1 150px; min-width: 0; }
    .reply-form button { padding: 9px 16px; border: none; border-radius: 10px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; font-size: 13px; cursor: pointer; white-space: nowrap; }

    footer {
      border-top: 1px solid var(--glass-border); padding: 28px 24px;
      text-align: center; color: var(--muted); font-size: 13px;
    }

    .reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; }
    .reveal.visible { opacity: 1; transform: none; }

    @media (max-width: 720px) {
      .hero { padding: 76px 0 32px; }
      .social-grid { grid-template-columns: 1fr; }
      .list { grid-template-columns: 1fr; }
      /* 手机：两列合并为一列，卡片依次堆叠 */
      #treehole-list { flex-direction: column; gap: 16px; }
      .th-col { width: 100%; flex: 1 1 auto; }
      .nav-links { display: none; }
      .nav-time { display: none; }
      .item { padding: 20px 18px; gap: 16px; }
      .slogan { font-size: 12px; }
    }

    /* 触摸设备（手机/平板）：禁用毛玻璃模糊，避免滚动掉帧；改用半透明纯色 */
    @media (hover: none) {
      body > nav, .btn, .theme-btn, .about-card, .item, .social, .social-icon,
      .treehole-item, .treehole-form input, .treehole-form textarea,
      .reply-form input, .treehole-more {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
      }
      /* 禁用模糊后，靠提高不透明度保证可读性不下降 */
      .treehole-item { background: rgba(28, 32, 42, .88); }
      :root[data-theme="light"] .treehole-item { background: rgba(255, 255, 255, .88); }
      body > nav { background: rgba(20, 24, 34, .92); }
      :root[data-theme="light"] body > nav { background: rgba(255, 255, 255, .92); }
    }

    /* ========================================================================
       树洞板块：毛玻璃对齐上方板块
       ------------------------------------------------------------------------
       原先 .treehole-item 只继承了 --glass-bg / --glass-border 两个变量，
       漏掉了 backdrop-filter —— 结果是「看着像玻璃，但背景不会被模糊」，
       与上方「关于我 / 作品 / 关注」三块放在同一屏时会明显露馅。

       此处严格复用上方同一套写法，不引入任何新数值：
         模糊半径  blur(var(--blur))     ← 与 .about-card / .item / .social 一致
         半透明度  var(--glass-bg)       ← 原本就已一致
         边框      var(--glass-border)   ← 原本就已一致
         内高光    var(--glass-highlight) ← 原本缺失，是玻璃边缘的关键细节
       小尺寸玻璃元素（输入框/按钮）对齐 .social-icon 的 blur(10px)。
       ======================================================================== */
    .treehole-item {
      backdrop-filter: blur(var(--blur));
      -webkit-backdrop-filter: blur(var(--blur));
      box-shadow: var(--glass-highlight), 0 4px 18px -10px rgba(40, 50, 90, .1);
    }
    .treehole-item:hover {
      box-shadow: var(--glass-highlight), var(--glass-shadow);
    }
    /* 固定高度场景下位移动画保持不变，仅补玻璃质感 */

    .treehole-form input,
    .treehole-form textarea,
    .reply-form input,
    .treehole-more {
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }
    .treehole-more { box-shadow: var(--glass-highlight); }

    /* ========================================================================
       树洞毛玻璃（真正可见版）
       ======================================================================== */

    /* ④ 手机端：毛玻璃会掉帧，退回不透明实色（可读性优先） */
    @media (hover: none) {
      .treehole-item { background: rgba(28, 32, 42, .90); border-color: rgba(255, 255, 255, .16); }
      :root[data-theme="light"] .treehole-item { background: rgba(255, 255, 255, .92); border-color: rgba(0, 0, 0, .08); }
      .treehole-form input, .treehole-form textarea, .reply-form input { background: rgba(28, 32, 42, .90); }
      :root[data-theme="light"] .treehole-form input,
      :root[data-theme="light"] .treehole-form textarea,
      :root[data-theme="light"] .reply-form input { background: rgba(255, 255, 255, .92); }
    }

    /* ========================================================================
       树洞：底色、边框、模糊全部对齐上方板块
       ------------------------------------------------------------------------
       一律使用与 .about-card / .item / .social 相同的 token，
       不引入任何自定义色值：
         background  var(--glass-bg)
         border      1px solid var(--glass-border)
         blur        blur(var(--blur))
         shadow      var(--glass-highlight) + 同一档柔和投影
       ======================================================================== */
    .treehole-item {
      background: var(--glass-bg);
      backdrop-filter: blur(var(--blur));
      -webkit-backdrop-filter: blur(var(--blur));
      border: 1px solid var(--glass-border);
      box-shadow: var(--glass-highlight), 0 4px 18px -10px rgba(40, 50, 90, .1);
    }
    .treehole-item:hover {
      background: var(--card-hover);
      border-color: var(--glass-border);
      box-shadow: var(--glass-highlight), var(--glass-shadow);
    }
    .treehole-form input,
    .treehole-form textarea,
    .reply-form input {
      background: var(--glass-bg);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1px solid var(--glass-border);
    }
    .treehole-more {
      background: var(--glass-bg);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1px solid var(--glass-border);
      box-shadow: var(--glass-highlight);
    }
    /* 手机端：禁用模糊后退回半透明实色（保持可读性） */
    @media (hover: none) {
      .treehole-item { background: rgba(28, 32, 42, .88); }
      :root[data-theme="light"] .treehole-item { background: rgba(255, 255, 255, .88); }
    }