/* =========================================================
 * 归档页 · 2.5D 档案海 —— 舞台与 HUD
 * 风格基准：暖灰白底、细线排字、暖杏金选中信号（RhineLabUI）
 * ========================================================= */

.a3d-stage {
    position: relative;
    width: 100%;
    height: calc(100vh - 64px);
    min-height: 480px;
    overflow: hidden;
    background: #edebe4;
}
.a3d-canvas { position: absolute; inset: 0; display: block; cursor: pointer; }

.a3d-hud {
    position: absolute; inset: 0;
    pointer-events: none;
    color: #1a1812;
    font-family: inherit;
    user-select: none;
}

/* --- 左上品牌 --- */
.a3d-brand { position: absolute; left: 28px; top: 24px; line-height: 1.35; }
.a3d-brand strong { display: block; font-size: 19px; font-weight: 700; letter-spacing: 1px; }
.a3d-brand span { display: block; font-size: 10px; letter-spacing: 3px; opacity: 0.55; }

/* --- 右上元信息 --- */
.a3d-topmeta {
    position: absolute; right: 28px; top: 26px;
    display: flex; align-items: center; gap: 14px;
    font-size: 11px; letter-spacing: 2px; opacity: 0.75;
    pointer-events: auto;
}
.a3d-topmeta b { font-weight: 600; }
.a3d-topmeta i { width: 1px; height: 12px; background: currentColor; opacity: 0.3; }
.a3d-topmeta a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(0,0,0,0.25); padding-bottom: 1px; cursor: pointer; }
.a3d-topmeta a:hover { opacity: 1; border-bottom-color: currentColor; }
/* 列表视图入口：从细线链接升级为毛玻璃按钮（☰ 图标 + 描边底色），进入方式更明显 */
.a3d-topmeta a.a3d-listbtn {
    border: 1px solid rgba(26,24,18,0.3);
    border-bottom: 1px solid rgba(26,24,18,0.3);
    padding: 7px 16px;
    border-radius: 10px;
    background: rgba(253,251,246,0.45);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease, opacity 0.45s ease;
}
.a3d-topmeta a.a3d-listbtn:hover {
    opacity: 1;
    color: #c08a1e;
    border-color: rgba(192,138,30,0.55);
    background: rgba(192,138,30,0.07);
}

/* --- 右中信息卡 --- */
.a3d-info {
    position: absolute; right: 10%; top: 34%;
    width: min(340px, 44%);
    opacity: 1;
}
.a3d-info.swap { animation: a3dSwap 0.34s ease both; }
@keyframes a3dSwap {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}
/* 空白档案：整卡降调 */
.a3d-info.is-empty h2 { opacity: 0.55; }
.a3d-info.is-empty .a3d-info-num s { background: transparent; border: 1px solid #c08a1e; }
/* 点击空白档案时的"NO RECORD"提示抖动 */
.a3d-info.deny { animation: a3dDeny 0.36s ease both; }
@keyframes a3dDeny {
    0%   { opacity: 1; transform: translateX(0); }
    25%  { opacity: 0.45; transform: translateX(-3px); }
    55%  { opacity: 0.45; transform: translateX(3px); }
    100% { opacity: 1; transform: translateX(0); }
}
.a3d-info-eyebrow { font-size: 10px; letter-spacing: 2.5px; opacity: 0.5; margin-bottom: 10px; }
.a3d-info-eyebrow em { font-style: normal; margin: 0 4px; opacity: 0.5; }
.a3d-info-num { display: flex; align-items: center; gap: 10px; font-size: 15px; letter-spacing: 1px; }
.a3d-info-num s { width: 8px; height: 8px; background: #c08a1e; text-decoration: none; flex: none; }
.a3d-info-num b { font-size: 22px; font-weight: 600; }
.a3d-info hr { border: 0; border-top: 1px solid rgba(26,24,18,0.28); margin: 12px 0 14px; }
.a3d-info h2 {
    margin: 0 0 8px;
    font-size: 21px; font-weight: 600; line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.a3d-info-meta { font-size: 12px; letter-spacing: 1px; opacity: 0.6; margin-bottom: 18px; }
.a3d-access {
    display: inline-flex; align-items: center; gap: 26px;
    font-size: 13px; letter-spacing: 2.5px;
    color: inherit; text-decoration: none;
    border-bottom: 1px solid rgba(26,24,18,0.3);
    padding-bottom: 5px; cursor: pointer; pointer-events: auto;
    transition: gap 0.25s ease, border-color 0.25s ease, opacity 0.25s ease;
}
.a3d-access:hover { gap: 38px; border-bottom-color: #c08a1e; }
.a3d-access em { font-style: normal; font-size: 15px; }
.a3d-access.is-empty { opacity: 0.5; gap: 14px; border-bottom-style: dashed; }
.a3d-access.is-empty:hover { gap: 14px; border-bottom-color: rgba(26,24,18,0.3); }
.a3d-info-ref { text-align: right; font-size: 9px; letter-spacing: 2px; opacity: 0.4; margin-top: 4px; }

/* --- 左下计数 --- */
.a3d-footleft { position: absolute; left: 28px; bottom: 30px; }
.a3d-footleft > span { display: block; font-size: 9px; letter-spacing: 2.5px; opacity: 0.5; margin-bottom: 6px; }
.a3d-count { display: flex; align-items: baseline; gap: 6px; }
.a3d-count b { font-size: 44px; font-weight: 300; line-height: 1; }
.a3d-count em { font-style: normal; opacity: 0.45; font-size: 20px; }
.a3d-count span { font-size: 15px; opacity: 0.65; }

/* --- 中下导航：刻度尺 + 切列 --- */
.a3d-footcenter {
    position: absolute; left: 50%; bottom: 26px;
    transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.a3d-ruler { display: flex; align-items: center; gap: 14px; }
/* 定位标：10 档刻度一一对应列内档案，琥珀光标横向滑动 */
.a3d-ticks {
    position: relative; width: 162px; height: 18px;
    background-image: linear-gradient(90deg, currentColor 0 2px, transparent 2px);
    background-size: calc(100%/9) 100%;
    background-repeat: repeat-x;
    opacity: 0.55;
}
.a3d-ticks i {
    position: absolute; top: -3px; left: 0;
    width: 4px; height: 24px; margin-left: -2px;
    background: #c08a1e;
    transition: left 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
/* 切列导航：玻璃感大箭头 */
.a3d-colnav { display: flex; align-items: center; gap: 22px; }
.a3d-colinfo {
    display: flex; align-items: baseline; gap: 12px;
    font-size: 12px; letter-spacing: 2px; min-width: 250px; justify-content: center;
    white-space: nowrap;
}
.a3d-colinfo span { opacity: 0.65; }
.a3d-colinfo b { font-size: 17px; font-weight: 600; letter-spacing: 1px; font-variant-numeric: tabular-nums; }
.a3d-colinfo #a3dColName { font-weight: 500; opacity: 0.9; }
.a3d-arrow {
    pointer-events: auto; cursor: pointer;
    color: inherit; text-decoration: none;
    width: 60px; height: 60px;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; line-height: 1;
    border: 1px solid rgba(26,24,18,0.28);
    border-radius: 14px;
    background: transparent;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.a3d-arrow:hover {
    color: #c08a1e; border-color: rgba(192,138,30,0.55);
    background: rgba(192,138,30,0.06);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
}
.a3d-arrow:active { transform: scale(0.93); }
.a3d-navglyph {
    pointer-events: auto; cursor: pointer;
    color: inherit; text-decoration: none;
    font-size: 14px; line-height: 1; padding: 6px 8px;
    opacity: 0.65; transition: opacity 0.2s ease, color 0.2s ease;
}
.a3d-navglyph:hover { opacity: 1; color: #c08a1e; }

/* --- 右下署名 --- */
.a3d-footright {
    position: absolute; right: 28px; bottom: 32px;
    font-size: 9px; letter-spacing: 2.5px; opacity: 0.45;
}
.a3d-footright em { font-style: normal; }

/* ===== 墙视位（侧视索引列表）===== */
.a3d-wallpanel {
    position: absolute; inset: 0;
    pointer-events: none;
    opacity: 0; visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}
.a3d-wallpanel.show { opacity: 1; visibility: visible; }
/* 转墙后：海视位的 HUD 退场，只留品牌与墙面板 */
.a3d-stage.is-wall .a3d-topmeta,
.a3d-stage.is-wall .a3d-info,
.a3d-stage.is-wall .a3d-footleft,
.a3d-stage.is-wall .a3d-footcenter,
.a3d-stage.is-wall .a3d-footright { opacity: 0; pointer-events: none; transition: opacity 0.4s ease; }
.a3d-topmeta, .a3d-info, .a3d-footleft, .a3d-footcenter, .a3d-footright, .a3d-brand { transition: opacity 0.4s ease; }

.a3d-wallhead {
    position: absolute; left: 6%; right: 6%; top: 4.5%;
    display: flex; align-items: baseline; justify-content: space-between;
    pointer-events: auto;
    transition: opacity 0.3s ease;
}
.a3d-wallhead span { font-size: 11px; letter-spacing: 3px; opacity: 0.6; }
.a3d-wallhead em { font-style: normal; margin: 0 4px; opacity: 0.5; }
.a3d-wallhead a { color: inherit; text-decoration: none; font-size: 12px; letter-spacing: 2px; border-bottom: 1px solid rgba(26,24,18,0.3); padding-bottom: 2px; }
.a3d-wallhead a:hover { color: #c08a1e; border-bottom-color: #c08a1e; }
/* 左上角品牌区独占：墙视位下 wallhead 左标题退场（避免与 brand 文字重叠） */
.a3d-stage.is-wall .a3d-wallhead span { opacity: 0; transition: opacity 0.3s ease; }

/* ===== 取出聚焦态：四周 HUD 元素照常保留（与档案海同一套框架），
   仅退场功能上不适配的两处——中下导航（刻度尺 + 切列箭头）与右上角「列表视图」链接 ===== */
.a3d-stage.is-focus .a3d-footcenter,
.a3d-stage.is-focus .a3d-topmeta a,
.a3d-stage.is-focus .a3d-topmeta i {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.45s ease;
}

/* 打开放大态：文档即将占满窗口，四周组件以合适的节奏整体渐隐，
   把视线让给放大的文档纸面（放大尾声由画布纸面渐满接管过渡进详情页） */
.a3d-stage.is-open .a3d-info,
.a3d-stage.is-open .a3d-topmeta,
.a3d-stage.is-open .a3d-footleft,
.a3d-stage.is-open .a3d-footright,
.a3d-stage.is-open .a3d-brand {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.55s ease;
}

/* 归档页为全屏画布体验：隐藏全站页脚（版权信息仍保留于 HTML 源码中，仅展示层隐藏） */
.site-footer { display: none !important; }

/* 左侧索引列表：整体一块白色毛玻璃面板（与背景档案隔离，保证可读），详情展开时保持原位可交互 */
.a3d-walllist {
    position: absolute; left: 5%; top: 13%; bottom: 10%; width: min(340px, 36%);
    overflow-y: auto; pointer-events: auto;
    background: rgba(253, 251, 246, 0.6);
    -webkit-backdrop-filter: blur(20px) saturate(1.1);
    backdrop-filter: blur(20px) saturate(1.1);
    border: 1px solid rgba(26, 24, 18, 0.08);
    border-radius: 16px;
    box-shadow: 0 10px 34px rgba(26, 24, 18, 0.08);
    padding: 16px 14px;
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease;
}
/* Firefox：细滚动条（标准属性 scrollbar-width/color 会让 Chromium 忽略全部
   ::-webkit-* 定制并回退原生样式，因此只限定在 Firefox 应用） */
@-moz-document url-prefix() {
    .a3d-walllist { scrollbar-width: thin; scrollbar-color: rgba(192, 138, 30, 0.3) transparent; }
}
/* 索引条滚动条：6px 细圆条、琥珀拇指、透明轨道，贴合暖纸细线风格；
   隐藏原生上下箭头按钮，轨道上下内缩 34px 避开容器圆角（radius 16px），拇指不触碰圆角 */
.a3d-walllist::-webkit-scrollbar { width: 6px; }
.a3d-walllist::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
.a3d-walllist::-webkit-scrollbar-corner { background: transparent; }
.a3d-walllist::-webkit-scrollbar-track {
    background: transparent;
    margin: 34px 0;
}
.a3d-walllist::-webkit-scrollbar-thumb {
    background: rgba(192, 138, 30, 0.30);
    border-radius: 3px;
}
.a3d-walllist::-webkit-scrollbar-thumb:hover { background: rgba(192, 138, 30, 0.5); }
.a3d-wallbar {
    display: flex; align-items: center; justify-content: flex-end; gap: 16px;
    height: 44px; padding: 0 16px; margin-bottom: 10px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    color: inherit; text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.a3d-wallbar span {
    flex: 1; text-align: left;
    font-size: 14px; letter-spacing: 1px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.a3d-wallbar em { font-style: normal; font-size: 10px; letter-spacing: 1.5px; opacity: 0.55; flex: none; font-variant-numeric: tabular-nums; }
.a3d-wallbar:hover { background: rgba(192, 138, 30, 0.14); border-color: rgba(192, 138, 30, 0.3); transform: translateX(-4px); }
.a3d-wallbar.is-cur { background: rgba(192, 138, 30, 0.85); border-color: rgba(192, 138, 30, 0.9); color: #fdfbf6; }
.a3d-wallbar.is-cur em { opacity: 0.8; }
.a3d-wallbar.is-empty { opacity: 0.5; border-style: dashed; border-color: rgba(26, 24, 18, 0.14); }

/* 右侧推文详情面板：纸面，滑入；《/阅读全文时向左扩展至全屏后转场进详情页 */
.a3d-wardetail {
    position: absolute; right: 0; top: 0; bottom: 0;
    width: min(720px, 58%);
    background: #f3f0e7;
    border-left: 1px solid rgba(90, 78, 58, 0.2);
    box-shadow: -18px 0 50px rgba(26, 24, 18, 0.12);
    padding: 7% 5%;
    overflow-y: auto;
    pointer-events: auto;
    transform: translateX(110%);
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), width 0.6s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.6s ease;
}
.a3d-wallpanel.detail-open .a3d-wardetail { transform: translateX(0); }
.a3d-wallpanel.fullscreen .a3d-wardetail { width: 100%; box-shadow: -40px 0 90px rgba(26, 24, 18, 0.2); }
.a3d-wallpanel.fullscreen .a3d-wallhead,
.a3d-wallpanel.fullscreen .a3d-walllist { opacity: 0; pointer-events: none; }
/* 全屏展开过半时内容渐隐，跳转前画面收为干净纸面，减轻跨页割裂感 */
.a3d-wallpanel.fullscreen .a3d-wardetail > * {
    opacity: 0;
    transition: opacity 0.35s ease 0.4s;
}
.a3d-wd-back {
    position: absolute; right: 26px; top: 22px;
    color: inherit; text-decoration: none;
    font-size: 26px; line-height: 1; opacity: 0.55;
    transition: opacity 0.2s ease, color 0.2s ease;
}
.a3d-wd-back:hover { opacity: 1; color: #c08a1e; }
.a3d-wd-eyebrow { font-size: 10px; letter-spacing: 2.5px; opacity: 0.5; margin-bottom: 14px; }
.a3d-wd-eyebrow em { font-style: normal; margin: 0 4px; opacity: 0.5; }
.a3d-wardetail h2 { margin: 0 0 10px; font-size: 24px; font-weight: 600; line-height: 1.45; }
.a3d-wd-meta { font-size: 12px; letter-spacing: 1px; opacity: 0.6; }
.a3d-wardetail hr { border: 0; border-top: 1px solid rgba(26,24,18,0.22); margin: 16px 0 18px; }
.a3d-wd-body { font-size: 14px; line-height: 1.9; opacity: 0.88; word-break: break-word; }
.a3d-wd-body p { margin: 0 0 12px; }
.a3d-wd-body img { max-width: 100%; }
.a3d-wd-empty { opacity: 0.55; font-style: italic; }
.a3d-wd-more {
    display: inline-block; margin-top: 18px;
    color: inherit; text-decoration: none;
    font-size: 13px; letter-spacing: 2px;
    border-bottom: 1px solid rgba(26,24,18,0.35); padding-bottom: 4px;
    transition: color 0.2s ease, border-color 0.2s ease;
}
.a3d-wd-more:hover { color: #c08a1e; border-bottom-color: #c08a1e; }
.a3d-wd-more em { font-style: normal; }

/* ===== 暗色模式 ===== */
[data-theme="dark"] .a3d-stage { background: #17181a; }
[data-theme="dark"] .a3d-hud { color: #ece9e2; }
[data-theme="dark"] .a3d-topmeta a { border-bottom-color: rgba(255,255,255,0.3); }
[data-theme="dark"] .a3d-topmeta a.a3d-listbtn {
    border-color: rgba(255,255,255,0.22);
    border-bottom-color: rgba(255,255,255,0.22);
    background: rgba(30,32,36,0.45);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
}
[data-theme="dark"] .a3d-topmeta a.a3d-listbtn:hover {
    color: #d4a94a;
    border-color: rgba(212,169,74,0.5);
    background: rgba(212,169,74,0.08);
}
[data-theme="dark"] .a3d-info hr { border-top-color: rgba(236,233,226,0.3); }
[data-theme="dark"] .a3d-info-num s { background: #d4a94a; }
[data-theme="dark"] .a3d-info.is-empty .a3d-info-num s { background: transparent; border-color: #d4a94a; }
[data-theme="dark"] .a3d-ticks i { background: #d4a94a; }
[data-theme="dark"] .a3d-access { border-bottom-color: rgba(236,233,226,0.3); }
[data-theme="dark"] .a3d-access:hover { border-bottom-color: #d4a94a; }
[data-theme="dark"] .a3d-access.is-empty:hover { border-bottom-color: rgba(236,233,226,0.3); }
[data-theme="dark"] .a3d-navglyph:hover { color: #d4a94a; }
[data-theme="dark"] .a3d-arrow {
    border-color: rgba(255,255,255,0.22);
    background: transparent;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
}
[data-theme="dark"] .a3d-arrow:hover {
    color: #d4a94a; border-color: rgba(212,169,74,0.5);
    background: rgba(212,169,74,0.08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
}
[data-theme="dark"] .a3d-wallhead a { border-bottom-color: rgba(236,233,226,0.3); }
[data-theme="dark"] .a3d-wallhead a:hover { color: #d4a94a; border-bottom-color: #d4a94a; }
[data-theme="dark"] .a3d-walllist {
    background: rgba(30, 32, 36, 0.62);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.4);
}
@-moz-document url-prefix() {
    [data-theme="dark"] .a3d-walllist { scrollbar-color: rgba(212, 169, 74, 0.28) transparent; }
}
[data-theme="dark"] .a3d-walllist::-webkit-scrollbar-thumb { background: rgba(212, 169, 74, 0.28); }
[data-theme="dark"] .a3d-walllist::-webkit-scrollbar-thumb:hover { background: rgba(212, 169, 74, 0.45); }
[data-theme="dark"] .a3d-wallbar:hover { background: rgba(212, 169, 74, 0.16); border-color: rgba(212, 169, 74, 0.4); }
[data-theme="dark"] .a3d-wallbar.is-empty { border-color: rgba(236, 233, 226, 0.16); }
[data-theme="dark"] .a3d-wallbar.is-cur { background: rgba(212, 169, 74, 0.85); border-color: rgba(212, 169, 74, 0.95); color: #17181a; }
[data-theme="dark"] .a3d-wardetail {
    background: #202226;
    border-left-color: rgba(255, 255, 255, 0.1);
    box-shadow: -18px 0 50px rgba(0, 0, 0, 0.45);
}
[data-theme="dark"] .a3d-wallpanel.fullscreen .a3d-wardetail { box-shadow: -40px 0 90px rgba(0, 0, 0, 0.6); }
[data-theme="dark"] .a3d-wardetail hr { border-top-color: rgba(236, 233, 226, 0.22); }
[data-theme="dark"] .a3d-wd-more { border-bottom-color: rgba(236, 233, 226, 0.35); }
[data-theme="dark"] .a3d-wd-more:hover { color: #d4a94a; border-bottom-color: #d4a94a; }

/* ===== 减少动态 ===== */
@media (prefers-reduced-motion: reduce) {
    .a3d-info.swap { animation: none; }
    .a3d-info.deny { animation: none; }
    .a3d-ticks i { transition: none; }
}

/* ===== 窄屏适配 ===== */
@media (max-width: 720px) {
    .a3d-stage { height: calc(100vh - 150px); min-height: 420px; }
    .a3d-brand { left: 16px; top: 14px; }
    .a3d-brand strong { font-size: 15px; }
    .a3d-brand span { font-size: 9px; letter-spacing: 2px; }
    .a3d-topmeta { right: 16px; top: 16px; gap: 10px; }
    .a3d-info { right: 16px; left: 16px; top: 30%; width: auto; }
    .a3d-info h2 { font-size: 17px; }
    .a3d-info-num b { font-size: 18px; }
    .a3d-footleft { left: 16px; bottom: 18px; }
    .a3d-count b { font-size: 32px; }
    .a3d-footcenter { left: auto; right: 16px; bottom: 18px; transform: none; align-items: flex-end; }
    .a3d-ticks { width: 90px; }
    .a3d-arrow { width: 46px; height: 46px; font-size: 19px; }
    .a3d-colinfo { min-width: 0; flex-wrap: wrap; }
    .a3d-footright { display: none; }
    .a3d-wallhead { left: 16px; right: 16px; top: 3.5%; }
    .a3d-walllist { left: 16px; width: min(360px, 82%); top: 12%; bottom: 8%; }
    .a3d-wallbar { height: 42px; padding: 0 16px; }
    .a3d-wardetail { width: 100%; padding: 9% 7%; }
}