/* ========== 全局重置 ========== */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      background: radial-gradient(circle at 50% 30%, #2A4A3A 0%, #1A3324 100%);
      background-attachment: fixed;
      font-family: 'Inter', -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
      min-height: 100vh;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      padding: 8rem 2rem 3rem 2rem;
      transition: background 0.4s ease;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      font-weight: 350;
    }

    body.night-mode {
      background: radial-gradient(circle at 50% 30%, #1A2A1E 0%, #0F231A 100%);
      background-attachment: fixed;
    }

    .app {
      width: 100%;
      max-width: 920px;
      margin: 0 auto;
      position: relative;
      z-index: 20;
    }

    /* ========== 标题与署名 ========== */
    .isle-title {
      font-family: 'Times New Roman', 'Cormorant Garamond', serif;
      font-weight: 500;
      font-size: 2.6rem;
      font-style: italic;
      letter-spacing: 5px;
      color: #D4CFB8;
      margin-bottom: 5rem;
      padding-left: 0.8rem;
      text-transform: uppercase;
      text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 0 40px rgba(184, 174, 124, 0.15);
      opacity: 0.95;
    }

    /* ========== 三叠纸容器 ========== */
    .paper-stack {
      position: relative;
      margin: 0 auto;
      width: 100%;
      min-height: 720px;
    }

    /*
     * 画像页紧裹：激活纸改为 relative，由内容撑开 stack；
     * 底层纸 absolute + inset:0 跟着同高（不再依赖 720 保底）。
     */
    .paper-stack.paper-stack--portrait-hug {
      min-height: 0 !important;
      height: auto !important;
    }

    .paper-stack.paper-stack--portrait-hug > .paper-sheet.active {
      position: relative;
      min-height: 0 !important;
      height: auto !important;
    }

    /* 底层叠纸铺满 stack，偏移量与首页 ghost 一致，避免短纸/宽纸观感不一致 */
    .paper-stack.paper-stack--portrait-hug > .paper-sheet:not(.active),
    .paper-stack.paper-stack--portrait-hug > .paper-sheet--ghost {
      position: absolute !important;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: auto !important;
      height: auto !important;
      min-height: 0 !important;
    }

    .paper-sheet {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      min-height: 720px;
      border-radius: 4px 20px 20px 4px;
      padding: 3.5rem 6rem 2rem 6rem;
      display: flex;
      flex-direction: column;
      /* 去掉 opacity 过渡，避免切页时透出底层文集/草稿内容 */
      transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        box-shadow 0.4s ease;
      background: #FCFAF4;
      background-image:
        linear-gradient(rgba(180, 170, 140, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(180, 170, 140, 0.03) 1px, transparent 1px);
      background-size: 28px 28px;
      box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.15),
        inset 0 0 0 1px rgba(210, 190, 160, 0.35);
      border: 1px solid rgba(140, 120, 90, 0.12);
      overflow: hidden;
    }

    .paper-sheet--portrait {
      overflow: visible;
      padding: 2rem 3rem 1.6rem;
    }

    .about-view {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 420px;
    }

    .about-inner {
      width: 100%;
      max-width: 520px;
      text-align: center;
      transform: translateY(-2.5rem);
    }

    .about-content p {
      margin: 0 0 1em;
      color: #4A5A4A;
      line-height: 1.9;
      font-size: 0.95rem;
      letter-spacing: 0.02em;
    }

    .about-links {
      display: flex;
      justify-content: center;
      gap: 1.5rem;
      margin-top: 1.5rem;
    }

    .about-link {
      color: #6E7F4E;
      text-decoration: none;
      font-size: 1rem;
      letter-spacing: 0.04em;
      border-bottom: 1px solid transparent;
      transition: border-color 0.2s;
    }

    .about-link:hover {
      border-color: #6E7F4E;
    }

    /* ========== 共享标题区（各展示页通用） ========== */
    .title-wrap {
      margin-top: 1.2rem;
      margin-bottom: 2.8rem;
      border-bottom: 1px dashed rgba(100, 90, 60, 0.18);
      padding-bottom: 1rem;
    }

    .page-title {
      margin: 0;
      font-size: 2.2rem;
      font-weight: 340;
      color: #1F2E1F;
      font-family: 'Inter', 'Times New Roman', serif;
      letter-spacing: 0.5px;
      padding: 0.3rem 0;
    }

    /* ========== 文章详情（只读） ========== */
    .article-view {
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    .article-date,
    .article-tags {
      margin: 0.4rem 0 0;
      font-size: 0.85rem;
      color: #8A9184;
      letter-spacing: 0.04em;
      font-family: -apple-system, 'PingFang SC', 'Helvetica Neue', sans-serif;
    }

    .article-meta {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.85rem 1.25rem;
      margin: 0.55rem 0 0;
      font-size: 0.82rem;
      color: #8A9184;
      letter-spacing: 0.03em;
      font-family: -apple-system, 'PingFang SC', 'Helvetica Neue', sans-serif;
    }

    .article-meta-item {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      min-height: 1.2em;
    }

    .article-meta-item:empty {
      display: none;
    }

    .article-meta-icon {
      flex-shrink: 0;
      opacity: 0.85;
    }

    .article-meta-text {
      line-height: 1.2;
    }

    .article-body {
      font-family: 'Inter', 'Georgia', 'Times New Roman', serif;
      font-size: 16px;
      line-height: 2.0;
      color: #1F2E1F;
      padding: 0.3rem 0 2rem 0;
      word-break: break-word;
      font-weight: 340;
      letter-spacing: 0.8px;
    }

    .article-body p {
      margin: 0 0 1em;
    }

    .article-body blockquote {
      margin: 1em 0;
      padding: 0.85em 1.15em;
      background: rgba(74, 110, 78, 0.09);
      border-left: 4px solid #5A7A5E;
      color: inherit;
      font-style: normal;
      font-weight: inherit;
      letter-spacing: inherit;
    }

    .article-body blockquote > *:first-child {
      margin-top: 0;
    }

    .article-body blockquote > *:last-child {
      margin-bottom: 0;
    }

    .article-body blockquote p,
    .article-body blockquote div {
      margin: 0 0 0.65em;
    }

    .article-body blockquote p:last-child,
    .article-body blockquote div:last-child {
      margin-bottom: 0;
    }

    /* ========== 假叠纸（空白装饰纸，垫在 active 纸后） ========== */
    .paper-sheet--ghost {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      min-height: 0 !important;
      height: auto !important;
      pointer-events: none;
      z-index: 10;
      filter: brightness(0.97);
    }

    .paper-sheet--ghost-1 {
      transform: translateY(4px) translateX(-6px);
    }

    .paper-sheet--ghost-2 {
      transform: translateY(8px) translateX(-12px);
    }

    .paper-sheet:not(.active) {
      pointer-events: none;
      z-index: 10;
      /* 底层只保留空白纸边，不透内容 */
      filter: brightness(0.97);
    }

    /* 非当前页：隐藏所有业务内容，杜绝文件夹 UI 一闪而过 */
    .paper-sheet:not(.active) .archive-view,
    .paper-sheet:not(.active) .home-view,
    .paper-sheet:not(.active) .search-view,
    .paper-sheet:not(.active) .portrait-view,
    .paper-sheet:not(.active) .about-view,
    .paper-sheet:not(.active) .writing-area,
    .paper-sheet:not(.active) .draft-view,
    .paper-sheet:not(.active) .collection-view,
    .paper-sheet:not(.active) .collection-badge,
    .paper-sheet:not(.active) .collection-detail-panel,
    .paper-sheet:not(.active) .collection-footer {
      visibility: hidden;
      opacity: 0;
      pointer-events: none;
    }

    .paper-sheet.active {
      position: relative;
      opacity: 1;
      filter: brightness(1);
      pointer-events: all;
      z-index: 30;
      transform: translateY(-2px) translateX(0);
      box-shadow: 0 28px 42px -12px rgba(0, 0, 0, 0.2),
        0 0 0 1px rgba(210, 190, 160, 0.2),
        inset 0 0 0 1px rgba(255, 250, 240, 0.6);
    }

    /* 底部只略微探出一截；左侧仍用不同 translateX 保持参差 */
    #homePaper:not(.active) {
      transform: translateY(3px) translateX(-4px);
    }

    #archivePaper:not(.active) {
      transform: translateY(4px) translateX(-6px);
    }

    #searchPaper:not(.active) {
      transform: translateY(4.5px) translateX(-7px);
    }

    #writePaper:not(.active) {
      transform: translateY(5px) translateX(-8px);
    }

    #draftPaper:not(.active) {
      transform: translateY(6px) translateX(-10px);
    }

    body.night-mode .paper-sheet {
      background: #E8E2D4;
      background-image:
        linear-gradient(rgba(140, 130, 100, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(140, 130, 100, 0.04) 1px, transparent 1px);
      background-size: 28px 28px;
    }

    /* ========== 右侧装饰签 ========== */
    .paper-tabs {
      position: absolute;
      right: -2px;
      top: 44px;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 12px;
      z-index: 50;
      pointer-events: none;
    }

    .tab-deco {
      display: block;
      border: none;
      padding: 0;
      height: 36px;
      min-width: 90px;
      border-radius: 40px 0 0 40px;
      box-shadow: -6px 8px 14px rgba(0, 0, 0, 0.08);
      border: 0.5px solid rgba(255, 250, 230, 0.3);
      pointer-events: none;
      user-select: none;
    }

    .tab-deco--1 {
      background-color: rgba(200, 195, 130, 0.85);
      transform: translateX(-14px) translateY(-3px);
      border-right: 2px solid rgba(255, 250, 220, 0.6);
      box-shadow: -10px 12px 18px rgba(0, 0, 0, 0.1);
    }

    .tab-deco--2 {
      background-color: rgba(110, 127, 78, 0.8);
    }

    .tab-deco--3 {
      background-color: rgba(62, 94, 68, 0.82);
    }
    /* ========== 右下角：日夜 + 专注 ========== */
    .chrome-dock {
      position: fixed;
      bottom: 30px;
      right: 30px;
      z-index: 100;
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 0.5rem;
    }

    .theme-toggle,
    .focus-toggle {
      position: static;
      background: rgba(45, 65, 45, 0.5);
      backdrop-filter: blur(10px);
      padding: 6px 18px;
      border-radius: 50px;
      color: #F1EFDD;
      font-size: 0.75rem;
      font-weight: 300;
      border: 0.5px solid #B8AE7C;
      cursor: pointer;
      line-height: 1.2;
      font-family: inherit;
    }

    /* 未包进 dock 时的回退（如登录页仅日夜） */
    body > .theme-toggle {
      position: fixed;
      bottom: 30px;
      right: 30px;
      z-index: 100;
    }

    .focus-toggle.is-active {
      background: rgba(70, 95, 55, 0.72);
      border-color: #D4CFB8;
      color: #fffef0;
    }

    body.focus-mode .flower-garden,
    body.focus-mode .sprite-nav,
    html.focus-mode .flower-garden,
    html.focus-mode .sprite-nav {
      display: none !important;
    }

    /* ========== 小精灵 + Canvas 魔法光雾导航 ========== */
    .sprite-nav {
      position: fixed;
      top: 2.6rem;
      right: 10rem;
      z-index: 85;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 220px;
    }

    .sprite-mascot {
      position: relative;
      display: block;
      width: 100%;
      padding: 0;
      border: none;
      background: transparent;
      cursor: pointer;
      z-index: 2;
      filter: drop-shadow(0 0 16px rgba(170, 220, 140, 0.4))
        drop-shadow(0 8px 18px rgba(0, 0, 0, 0.25));
      animation: sprite-float 4.2s ease-in-out infinite;
      will-change: transform;
    }

    .sprite-mascot img {
      display: block;
      width: 100%;
      height: auto;
      user-select: none;
      pointer-events: none;
    }

    .sprite-mascot:focus-visible {
      outline: none;
      filter: drop-shadow(0 0 22px rgba(200, 255, 170, 0.6));
    }

    .sprite-nav.is-open .sprite-mascot {
      filter: drop-shadow(0 0 24px rgba(190, 255, 160, 0.55))
        drop-shadow(0 0 40px rgba(140, 210, 120, 0.28));
    }

    @keyframes sprite-float {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-10px); }
    }

    .sprite-light-beam {
      position: relative;
      width: 230px;
      height: min(60vh, 520px);
      margin-top: -58px;
      pointer-events: none;
      z-index: 1;
    }

    .sprite-nav.is-open .sprite-light-beam {
      pointer-events: auto;
    }

    .sprite-nav-close {
      display: none;
    }

    .beam-canvas {
      position: absolute;
      top: -10%;
      bottom: -8%;
      left: 50%;
      width: 190%;
      height: 118%;
      transform: translateX(-50%);
      display: block;
      pointer-events: none;
      /* 轻模糊抹掉矩形硬边；主体已稳定，不致闪烁 */
      filter: blur(5px);
      opacity: 0.92;
      mix-blend-mode: normal;
    }

    .sprite-nav-list {
      position: absolute;
      /* 首条与小精灵留出一点距离 */
      top: 12%;
      bottom: auto;
      left: 0;
      right: 0;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      gap: 1.3rem;
      margin: 0;
      padding: 0.35rem 0 0;
      pointer-events: none;
      text-align: center;
    }

    .sprite-nav.is-open .sprite-nav-list {
      pointer-events: auto;
    }

    .sprite-nav-link {
      color: rgba(240, 255, 230, 0.72);
      text-decoration: none;
      font-family: -apple-system, 'PingFang SC', 'Helvetica Neue', sans-serif;
      font-size: 0.9rem;
      font-weight: 300;
      letter-spacing: 0.28em;
      /* 抵消 letter-spacing 造成的视觉右偏 */
      margin-right: -0.28em;
      text-indent: 0;
      text-align: center;
      text-shadow:
        0 0 10px rgba(180, 240, 170, 0.45),
        0 0 22px rgba(255, 230, 150, 0.25);
      mix-blend-mode: screen;
      opacity: 0;
      transform: translateY(-10px);
      transition:
        opacity 0.35s ease,
        transform 0.35s ease,
        color 0.12s ease,
        text-shadow 0.12s ease;
    }

    .sprite-nav.is-open .sprite-nav-link {
      opacity: 0.82;
      transform: translateY(0);
    }

    /* 仅开合错峰延迟 opacity/transform；颜色悬停立即响应（预留到 8 项） */
    .sprite-nav.is-open .sprite-nav-link:nth-child(1) { transition-delay: 0.08s, 0.08s, 0s, 0s; }
    .sprite-nav.is-open .sprite-nav-link:nth-child(2) { transition-delay: 0.14s, 0.14s, 0s, 0s; }
    .sprite-nav.is-open .sprite-nav-link:nth-child(3) { transition-delay: 0.2s, 0.2s, 0s, 0s; }
    .sprite-nav.is-open .sprite-nav-link:nth-child(4) { transition-delay: 0.26s, 0.26s, 0s, 0s; }
    .sprite-nav.is-open .sprite-nav-link:nth-child(5) { transition-delay: 0.32s, 0.32s, 0s, 0s; }
    .sprite-nav.is-open .sprite-nav-link:nth-child(6) { transition-delay: 0.38s, 0.38s, 0s, 0s; }
    .sprite-nav.is-open .sprite-nav-link:nth-child(7) { transition-delay: 0.44s, 0.44s, 0s, 0s; }
    .sprite-nav.is-open .sprite-nav-link:nth-child(8) { transition-delay: 0.5s, 0.5s, 0s, 0s; }

    .sprite-nav:not(.is-open) .sprite-nav-link:nth-child(1) { transition-delay: 0.28s, 0.28s, 0s, 0s; }
    .sprite-nav:not(.is-open) .sprite-nav-link:nth-child(2) { transition-delay: 0.24s, 0.24s, 0s, 0s; }
    .sprite-nav:not(.is-open) .sprite-nav-link:nth-child(3) { transition-delay: 0.2s, 0.2s, 0s, 0s; }
    .sprite-nav:not(.is-open) .sprite-nav-link:nth-child(4) { transition-delay: 0.16s, 0.16s, 0s, 0s; }
    .sprite-nav:not(.is-open) .sprite-nav-link:nth-child(5) { transition-delay: 0.12s, 0.12s, 0s, 0s; }
    .sprite-nav:not(.is-open) .sprite-nav-link:nth-child(6) { transition-delay: 0.08s, 0.08s, 0s, 0s; }
    .sprite-nav:not(.is-open) .sprite-nav-link:nth-child(7) { transition-delay: 0.04s, 0.04s, 0s, 0s; }
    .sprite-nav:not(.is-open) .sprite-nav-link:nth-child(8) { transition-delay: 0s, 0s, 0s, 0s; }

    .sprite-nav.is-open .sprite-nav-link:hover {
      color: #fffef0;
      opacity: 1;
      transition-delay: 0s, 0s, 0s, 0s;
      text-shadow:
        0 0 8px rgba(255, 255, 220, 0.95),
        0 0 18px rgba(220, 255, 190, 0.85),
        0 0 36px rgba(255, 236, 160, 0.55);
    }

    /* ========== 窄屏：浮层菜单（≤900）/ 纸面收缩；正文不再为精灵让位 ========== */
    @media (max-width: 1100px) {
      body {
        padding: 6.5rem 1.5rem 2.5rem;
      }

      .sprite-nav {
        width: 150px;
        top: 1.8rem;
        right: 1.5rem;
      }

      .sprite-light-beam {
        width: 145px;
        height: min(52vh, 420px);
      }
    }

    @media (max-width: 900px) {
      body {
        padding: 5rem 1.1rem 2rem;
      }

      .isle-title {
        font-size: 1.85rem;
        letter-spacing: 0.18em;
        margin-bottom: 2.5rem;
        padding-left: 0.2rem;
      }

      .paper-sheet {
        padding: 2.25rem 2rem 1.5rem;
        min-height: 0;
      }

      .paper-sheet--portrait {
        padding: 1.6rem 1.4rem 1.3rem;
      }

      /* 仅留小精灵入口；导航在标题上方展开，不悬浮遮罩 */
      .sprite-nav {
        width: 72px;
        top: 1rem;
        right: 0.85rem;
      }

      .sprite-light-beam {
        display: none !important;
      }

      .sprite-nav-inline {
        display: none;
        width: 100%;
        box-sizing: border-box;
        margin: 0 0 1.35rem;
        padding: 2.4rem 0.85rem 0.85rem;
        position: relative;
        background: #f7f3e8;
        border: 0.5px solid rgba(90, 110, 70, 0.22);
        border-radius: 14px;
        box-shadow: 0 8px 22px rgba(20, 40, 28, 0.1);
      }

      .sprite-nav-inline.is-open {
        display: block;
      }

      .sprite-nav-inline .sprite-nav-close {
        display: flex;
        position: absolute;
        top: 0.55rem;
        right: 0.55rem;
        z-index: 2;
        width: 2rem;
        height: 2rem;
        align-items: center;
        justify-content: center;
        border: none;
        border-radius: 8px;
        background: transparent;
        color: #5A6A58;
        font-size: 1.35rem;
        line-height: 1;
        cursor: pointer;
      }

      .sprite-nav-inline .sprite-nav-close:hover {
        background: rgba(74, 110, 78, 0.1);
        color: #2A3A28;
      }

      .sprite-nav-inline-list {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin: 0;
        padding: 0;
      }

      .sprite-nav-inline-list .sprite-nav-link {
        display: flex;
        align-items: center;
        gap: 0.85rem;
        width: 100%;
        box-sizing: border-box;
        margin: 0;
        padding: 0.9rem 0.75rem;
        border-bottom: 1px solid rgba(90, 110, 70, 0.14);
        color: #2A3A28;
        font-size: 0.95rem;
        font-weight: 350;
        letter-spacing: 0.16em;
        text-decoration: none;
        text-shadow: none;
        mix-blend-mode: normal;
        opacity: 1;
        transform: none;
        text-align: left;
      }

      .sprite-nav-inline-list .sprite-nav-link:last-child {
        border-bottom: none;
      }

      .sprite-nav-inline-list .sprite-nav-icon {
        flex: 0 0 1.25rem;
        display: inline-flex;
        width: 1.25rem;
        height: 1.25rem;
        color: #5A6A58;
      }

      .sprite-nav-inline-list .sprite-nav-icon svg {
        width: 100%;
        height: 100%;
        display: block;
      }

      .sprite-nav-inline-list .sprite-nav-label {
        flex: 1;
        min-width: 0;
      }

      .sprite-nav-inline-list .sprite-nav-link:hover {
        color: #1A2818;
        background: rgba(74, 110, 78, 0.08);
        border-radius: 8px;
        text-shadow: none;
      }

      .sprite-nav-inline-list .sprite-nav-link:hover .sprite-nav-icon {
        color: #3A5A3E;
      }
    }

    @media (max-width: 640px) {
      body {
        padding: 4.25rem 0.85rem 1.75rem;
      }

      .isle-title {
        font-size: 1.45rem;
        letter-spacing: 0.12em;
        margin-bottom: 1.75rem;
      }

      .paper-sheet {
        padding: 1.5rem 1.15rem 1.25rem;
        border-radius: 4px 14px 14px 4px;
      }

      .paper-sheet--portrait {
        padding: 1.25rem 1rem 1.1rem;
      }

      .sprite-nav {
        width: 64px;
        top: 0.75rem;
        right: 0.55rem;
      }

      .sprite-nav-inline {
        margin-bottom: 1.1rem;
        padding: 2.2rem 0.7rem 0.75rem;
      }

      .sprite-nav-inline-list .sprite-nav-link {
        font-size: 0.9rem;
        letter-spacing: 0.12em;
        padding: 0.82rem 0.55rem;
      }

      .chrome-dock {
        bottom: 16px;
        right: 16px;
      }

      body > .theme-toggle {
        bottom: 16px;
        right: 16px;
        padding: 5px 14px;
      }

      .theme-toggle,
      .focus-toggle {
        padding: 5px 14px;
      }
    }

    /* 宽屏隐藏内联菜单占位 */
    @media (min-width: 901px) {
      .sprite-nav-inline {
        display: none !important;
      }
    }