/* ============================================================
   祈鸳的图书馆 — 完整样式表（第一阶段 + 第二阶段 + 西幻增强）
   Design: 深夜魔法图书馆 · Dark Arcane Library Theme
   Phase 2: 粒子动画 · 微光扫过 · 交错淡入 · 移动端全屏 Modal
   Phase 3: 西幻符文装饰 · 魔法光效 · 羊皮纸纹理 · 符文分隔线
   ============================================================ */


/* ══════════════════════════════════════════
   CSS 变量
   ══════════════════════════════════════════ */
:root {
  /* 背景色阶 */
  --bg-primary:    #0b0b12;
  --bg-secondary:  #111119;
  --bg-card:       #171722;
  --bg-card-hover: #1e1e2e;
  --bg-input:      #13131e;

  /* 强调色 */
  --accent:            #c9956b;
  --accent-light:      #e8c49a;
  --accent-dark:       #8b6914;
  --accent-glow:       rgba(201,149,107,0.15);
  --accent-glow-strong:rgba(201,149,107,0.30);

  /* 文字 */
  --text-primary:   #e8e0d8;
  --text-secondary: #8a8a9a;
  --text-muted:     #5a5a6a;

  /* 边框 */
  --border:       #252535;
  --border-light: #2e2e40;

  /* 功能色 */
  --success: #6bcb77;
  --warning: #ffd93d;
  --danger:  #ff6b6b;
  --info:    #64b5f6;

  /* 简报类型色 */
  --color-noon:    #d4954a;
  --color-close:   #9b3050;
  --color-evening: #3d7fc1;
  --color-weekend: #7c5cbf;

  /* 西幻增强色 */
  --rune-gold:         #d4a853;
  --rune-gold-dim:     rgba(212,168,83,0.25);
  --rune-gold-glow:    rgba(212,168,83,0.08);
  --parchment:         rgba(201,149,107,0.03);
  --magic-purple:      rgba(120,80,200,0.12);
  --magic-blue:        rgba(80,140,220,0.10);

  /* 字体 */
  --font-serif:  'Playfair Display', 'Noto Serif SC', serif;
  --font-sans:   'Noto Sans SC', sans-serif;

  /* 布局 */
  --sidebar-w: 240px;
  --topbar-h:  60px;
  --radius:    10px;
  --radius-sm: 6px;

  /* 阴影 */
  --shadow:    0 4px 24px rgba(0,0,0,0.30);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.50);

  /* 过渡 */
  --transition: 0.25s cubic-bezier(0.4,0,0.2,1);

  /* 字体 */
  --font-serif: 'Playfair Display','Noto Serif SC',Georgia,serif;
  --font-sans:  'Noto Sans SC','Inter',-apple-system,BlinkMacSystemFont,sans-serif;
}


/* ══════════════════════════════════════════
   基础重置
   ══════════════════════════════════════════ */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html  { font-size:15px; scroll-behavior:smooth }
body  {
  font-family: var(--font-sans);
  background:  var(--bg-primary);
  color:       var(--text-primary);
  line-height: 1.6;
  min-height:  100vh;
  overflow-x:  hidden;
  -webkit-font-smoothing: antialiased;
}
::-webkit-scrollbar       { width:6px }
::-webkit-scrollbar-track { background:var(--bg-secondary) }
::-webkit-scrollbar-thumb { background:var(--border-light); border-radius:3px }
::-webkit-scrollbar-thumb:hover { background:var(--accent-dark) }
a   { color:var(--accent); text-decoration:none; transition:color var(--transition) }
a:hover { color:var(--accent-light) }
img { max-width:100%; display:block }
.hidden { display:none !important }


/* ══════════════════════════════════════════
   全局关键帧（@keyframes）
   ══════════════════════════════════════════ */

/* 登录页背景大光圈脉冲 */
@keyframes glowPulse {
  0%,100% { opacity:.6; transform:translate(-50%,-50%) scale(1)   }
  50%      { opacity:1;  transform:translate(-50%,-50%) scale(1.1) }
}

/* 密码错误抖动 */
@keyframes shake {
  0%,100% { transform:translateX(0)  }
  20%,60% { transform:translateX(-6px) }
  40%,80% { transform:translateX(6px)  }
}

/* 粒子：原地闪烁（奇数粒子） */
@keyframes particleTwinkle {
  0%,100% { opacity:.08; transform:scale(.7)  }
  50%      { opacity:.85; transform:scale(1.3) }
}

/* 粒子：缓慢上浮消散（偶数粒子） */
@keyframes particleRise {
  0%   { opacity:0;   transform:translateY(0)    scale(1)   }
  15%  { opacity:.75; transform:translateY(-8px) scale(1.1) }
  85%  { opacity:.75; transform:translateY(-55px)scale(1.0) }
  100% { opacity:0;   transform:translateY(-70px)scale(.6)  }
}

/* 登录卡片入场 */
@keyframes cardEntrance {
  from { opacity:0; transform:translateY(24px) scale(.97) }
  to   { opacity:1; transform:translateY(0)    scale(1)   }
}

/* Modal 覆盖层：背景 + 模糊淡入 */
@keyframes overlayFadeIn {
  from { background:rgba(0,0,0,0);    backdrop-filter:blur(0px) }
  to   { background:rgba(0,0,0,.78);  backdrop-filter:blur(8px) }
}

/* Modal 内容框弹入（桌面端） */
@keyframes modalIn {
  from { opacity:0; transform:translateY(24px) scale(.96) }
  to   { opacity:1; transform:translateY(0)    scale(1)   }
}

/* Modal 内容框上滑（移动端） */
@keyframes modalInMobile {
  from { transform:translateY(100%) }
  to   { transform:translateY(0)    }
}

/* 视图切换淡入 */
@keyframes viewFadeIn {
  from { opacity:0; transform:translateY(10px) }
  to   { opacity:1; transform:translateY(0)    }
}

/* 列表项交错淡入 */
@keyframes itemFadeIn {
  from { opacity:0; transform:translateY(8px) }
  to   { opacity:1; transform:translateY(0)   }
}

/* 卡片 hover 微光扫过 */
@keyframes cardShimmer {
  to { left:160% }
}

/* 搜索框焦点边框脉冲 */
@keyframes searchGlowPulse {
  0%,100% { box-shadow:0 0 0 3px rgba(201,149,107,.18) }
  50%      { box-shadow:0 0 0 5px rgba(201,149,107,.32) }
}

/* 侧边栏遮罩淡入 */
@keyframes overlayShow {
  from { opacity:0 }
  to   { opacity:1 }
}


/* ══════════════════════════════════════════
   登录页 — 粒子背景
   ══════════════════════════════════════════ */
.gate-body {
  display:flex; align-items:center; justify-content:center;
  min-height:100vh;
  background: var(--bg-primary);
  background-image:
    radial-gradient(ellipse at 20% 50%, rgba(201,149,107,.06) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 50%, rgba(100,80,160,.04) 0%, transparent 50%);
}

/* 粒子容器 */
.gate-particles {
  position:fixed; inset:0;
  pointer-events:none; overflow:hidden;
  z-index:0;
}

/* 所有粒子共同基础：圆点 + 金色径向渐变 */
.gate-particles i {
  position:absolute;
  border-radius:50%;
  background: radial-gradient(circle at 40% 40%,
    rgba(232,196,154,.95) 0%,
    rgba(201,149,107,.50) 40%,
    transparent 70%
  );
  /* 奇数粒子默认用 twinkle，偶数粒子 override 为 rise */
  animation: particleTwinkle var(--d,14s) var(--delay,0s) ease-in-out infinite;
}

/* ── 奇数粒子：原地闪烁 ── */
.gate-particles i:nth-child(1)  { --d:13s; --delay:0s;   width:3px; height:3px; left:8%;  top:78% }
.gate-particles i:nth-child(3)  { --d:11s; --delay:1.2s; width:4px; height:4px; left:37%; top:62% }
.gate-particles i:nth-child(5)  { --d:16s; --delay:1.8s; width:3px; height:3px; left:66%; top:47% }
.gate-particles i:nth-child(7)  { --d:10s; --delay:.4s;  width:3px; height:3px; left:87%; top:34% }
.gate-particles i:nth-child(9)  { --d:15s; --delay:2.4s; width:4px; height:4px; left:14%; top:51% }
.gate-particles i:nth-child(11) { --d:12s; --delay:0s;   width:3px; height:3px; left:59%; top:11% }
.gate-particles i:nth-child(13) { --d:18s; --delay:3.8s; width:2px; height:2px; left:44%; top:32% }

/* ── 偶数粒子：缓慢上浮 ── */
.gate-particles i:nth-child(2)  { --d:17s; --delay:2.5s; width:2px; height:2px; left:22%; top:33%; animation-name:particleRise }
.gate-particles i:nth-child(4)  { --d:20s; --delay:4.0s; width:2px; height:2px; left:52%; top:19%; animation-name:particleRise }
.gate-particles i:nth-child(6)  { --d:14s; --delay:3.0s; width:2px; height:2px; left:78%; top:83%; animation-name:particleRise }
.gate-particles i:nth-child(8)  { --d:11s; --delay:5.2s; width:2px; height:2px; left:93%; top:64%; animation-name:particleRise }
.gate-particles i:nth-child(10) { --d:19s; --delay:3.5s; width:2px; height:2px; left:44%; top:90%; animation-name:particleRise }
.gate-particles i:nth-child(12) { --d:22s; --delay:6.0s; width:2px; height:2px; left:31%; top:45%; animation-name:particleRise }
.gate-particles i:nth-child(14) { --d:16s; --delay:1.5s; width:2px; height:2px; left:72%; top:72%; animation-name:particleRise }


/* ── 登录卡片 ── */
.gate-container {
  position:relative; text-align:center; padding:20px; z-index:1;
}
.gate-glow {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:400px; height:400px;
  background:radial-gradient(circle, rgba(201,149,107,.09) 0%, transparent 70%);
  border-radius:50%; pointer-events:none;
  animation:glowPulse 4s ease-in-out infinite;
}
.gate-card {
  position:relative;
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:16px; padding:48px 40px;
  width:380px; max-width:90vw;
  box-shadow:var(--shadow-lg);
  animation:cardEntrance .6s cubic-bezier(.34,1.56,.64,1) both;
}
.gate-icon   { font-size:3rem; margin-bottom:16px }
.gate-title  {
  font-family:var(--font-serif); font-size:1.8rem; font-weight:600;
  color:var(--accent-light); margin-bottom:8px;
}
.gate-subtitle { color:var(--text-secondary); font-size:.9rem; margin-bottom:28px }

.gate-input-wrap {
  position:relative; display:flex; align-items:center;
  background:var(--bg-input); border:1px solid var(--border);
  border-radius:var(--radius); overflow:hidden;
  transition:border-color var(--transition);
}
.gate-input-wrap:focus-within { border-color:var(--accent) }
.gate-input-wrap input {
  flex:1; background:none; border:none; outline:none;
  color:var(--text-primary); padding:14px 16px;
  font-size:1rem; font-family:var(--font-sans);
}
.gate-input-wrap input::placeholder { color:var(--text-muted) }
.gate-toggle {
  background:none; border:none; color:var(--text-muted);
  cursor:pointer; padding:8px 12px; transition:color var(--transition);
}
.gate-toggle:hover { color:var(--accent) }
.gate-error  { color:var(--danger); font-size:.85rem; margin:12px 0; text-align:left; padding-left:4px }
.gate-btn    {
  width:100%; margin-top:8px; padding:14px 24px;
  background:linear-gradient(135deg,var(--accent-dark),var(--accent));
  color:#fff; border:none; border-radius:var(--radius);
  font-size:1rem; font-family:var(--font-sans); font-weight:500;
  cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px;
  transition:all var(--transition);
}
.gate-btn:hover  { transform:translateY(-2px); box-shadow:0 6px 24px rgba(201,149,107,.35) }
.gate-btn:active { transform:translateY(0) }
.gate-footer { color:var(--text-muted); font-size:.8rem; margin-top:24px }
.shake       { animation:shake .4s ease }


/* ══════════════════════════════════════════
   顶栏
   ══════════════════════════════════════════ */
.topbar {
  position:fixed; top:0; left:0; right:0; height:var(--topbar-h);
  background:rgba(11,11,18,.92); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 20px; z-index:100;
}
.topbar-left,.topbar-right { display:flex; align-items:center; gap:12px }
.topbar-center             { display:flex; align-items:center; gap:20px }

.sidebar-toggle {
  display:none; background:none; border:none;
  color:var(--text-secondary); cursor:pointer;
  padding:6px; border-radius:var(--radius-sm);
  transition:all var(--transition);
}
.sidebar-toggle:hover { color:var(--accent); background:var(--accent-glow) }

.logo           { display:flex; align-items:center; gap:10px }
.logo-icon      { font-size:1.4rem }
.logo-text      {
  font-family:var(--font-serif); font-size:1.15rem; font-weight:600;
  color:var(--accent-light); letter-spacing:.5px;
}

.clock-widget   { text-align:center }
.clock-time     {
  font-family:var(--font-serif); font-size:1.3rem; font-weight:600;
  color:var(--text-primary); letter-spacing:1px;
}
.clock-date     { font-size:.75rem; color:var(--text-secondary) }

.weather-widget { display:flex; align-items:center; gap:8px }
.weather-icon   { font-size:1.5rem }
.weather-info   { display:flex; flex-direction:column }
.weather-temp   { font-size:.95rem; font-weight:500; color:var(--text-primary) }
.weather-desc   { font-size:.7rem;  color:var(--text-secondary) }

/* 搜索框 */
.search-box         { position:relative }
.search-icon        {
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  color:var(--text-muted); pointer-events:none;
}
.search-box input[type="text"] {
  background:var(--bg-input); border:1px solid var(--border);
  border-radius:20px; padding:8px 16px 8px 36px;
  color:var(--text-primary); font-size:.85rem; font-family:var(--font-sans);
  width:240px; outline:none; transition:all var(--transition);
}
/* 聚焦时边框发光脉冲 */
.search-box input[type="text"]:focus {
  border-color:var(--accent); width:300px;
  animation: searchGlowPulse 2s ease-in-out infinite;
}
.search-box input[type="text"]::placeholder { color:var(--text-muted) }

.search-filters {
  position:absolute; top:calc(100% + 8px); right:0;
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius); padding:16px; width:260px;
  box-shadow:var(--shadow); display:none; z-index:200;
}
.search-filters.open { display:block }
.search-filter-row   { margin-bottom:10px }
.search-filter-row:last-child { margin-bottom:0 }
.search-filter-row label {
  display:block; font-size:.75rem; color:var(--text-secondary); margin-bottom:4px;
}
.search-filter-row select,
.search-filter-row input[type="date"] {
  width:100%; background:var(--bg-input); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:6px 10px;
  color:var(--text-primary); font-size:.85rem; font-family:var(--font-sans); outline:none;
}
.search-filter-row select:focus,
.search-filter-row input[type="date"]:focus { border-color:var(--accent) }

.logout-btn {
  background:none; border:none; color:var(--text-muted);
  cursor:pointer; padding:8px; border-radius:var(--radius-sm);
  transition:all var(--transition);
}
.logout-btn:hover { color:var(--danger); background:rgba(255,107,107,.10) }


/* ══════════════════════════════════════════
   侧边栏（含纸质纹理 + 导航指示条动画）
   ══════════════════════════════════════════ */
.sidebar {
  position:fixed; top:var(--topbar-h); left:0; bottom:0;
  width:var(--sidebar-w);
  /* 基础背景 + 极淡纸质横线纹理 */
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0px,
      transparent 31px,
      rgba(201,149,107,.035) 31px,
      rgba(201,149,107,.035) 32px
    ),
    var(--bg-secondary);
  border-right:1px solid var(--border);
  display:flex; flex-direction:column;
  padding:20px 0; overflow-y:auto;
  transition:transform var(--transition); z-index:90;
}
.sidebar-section { padding:0 12px; flex:1 }
.sidebar-label   {
  font-size:.7rem; text-transform:uppercase; letter-spacing:1.5px;
  color:var(--text-muted); padding:0 12px; margin-bottom:8px;
}

/* 导航项：左侧指示条初始为缩放=0 */
.nav-item {
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:var(--radius-sm);
  color:var(--text-secondary); font-size:.9rem;
  transition: color var(--transition), background var(--transition);
  margin-bottom:2px; position:relative;
}
.nav-item:hover  { color:var(--text-primary);  background:var(--accent-glow) }
.nav-item.active { color:var(--accent-light);  background:var(--accent-glow) }

/* 指示条：用 scaleY 动画实现滑入效果 */
.nav-item::before {
  content:'';
  position:absolute; left:0; top:50%;
  width:3px; height:20px;
  background:var(--accent); border-radius:0 2px 2px 0;
  transform: translateY(-50%) scaleY(0);
  transform-origin: center;
  transition: transform .22s cubic-bezier(.34,1.56,.64,1), opacity .22s;
  opacity:0;
}
.nav-item:hover::before  { transform:translateY(-50%) scaleY(.75); opacity:.5 }
.nav-item.active::before { transform:translateY(-50%) scaleY(1);   opacity:1  }

.nav-icon  { font-size:1.1rem; width:24px; text-align:center }
.nav-text  { flex:1 }
.nav-badge {
  background:var(--accent-dark); color:var(--accent-light);
  font-size:.7rem; padding:2px 7px; border-radius:10px; font-weight:500;
}
.sidebar-footer {
  padding:16px 24px; border-top:1px solid var(--border); margin-top:auto;
}
.sidebar-credit { font-size:.75rem; color:var(--text-muted) }

/* 移动端侧边栏遮罩 */
.sidebar-overlay {
  display:none;
  position:fixed; inset:0;
  background:rgba(0,0,0,.65);
  backdrop-filter:blur(2px);
  z-index:80;
}
.sidebar-overlay.show {
  display:block;
  animation:overlayShow .25s ease;
}


/* ══════════════════════════════════════════
   主内容区
   ══════════════════════════════════════════ */
.main-layout { display:flex }
.content {
  margin-left:var(--sidebar-w); margin-top:var(--topbar-h);
  padding:28px 32px 48px; min-height:calc(100vh - var(--topbar-h));
  flex:1;
}
.view-header    { margin-bottom:24px; position:relative }
.view-header h1 {
  font-family:var(--font-serif); font-size:1.6rem; font-weight:600;
  color:var(--text-primary); margin-bottom:4px;
}
.view-subtitle  { color:var(--text-secondary); font-size:.9rem }
.empty-state    { text-align:center; color:var(--text-muted); padding:60px 20px; font-size:.95rem }

/* 视图切换淡入（移除 hidden 后立即播放） */
.view {
  animation: viewFadeIn .35s cubic-bezier(.4,0,.2,1) both;
}
.view.hidden { display:none !important }


/* ══════════════════════════════════════════
   仪表盘 — 2×2 网格
   ══════════════════════════════════════════ */
.dashboard-grid {
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
  margin-bottom:32px;
}

/* ── 卡片基础：含 shimmer 伪元素所需的 overflow:hidden ── */
.dash-card {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius); padding:24px;
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
  position:relative; overflow:hidden;
}
.dash-card:hover {
  border-color:var(--border-light);
  transform:translateY(-2px);
  box-shadow:var(--shadow);
}

/* 微光扫过：从左侧外部划过到右侧外部 */
.dash-card::after {
  content:'';
  position:absolute;
  top:-30px; bottom:-30px; left:-80%;
  width:55%;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(201,149,107,.045) 40%,
    rgba(232,196,154,.07)  50%,
    rgba(201,149,107,.045) 60%,
    transparent 100%
  );
  transform: skewX(-12deg);
  pointer-events:none;
  z-index:1;
}
.dash-card:hover::after {
  animation: cardShimmer .65s ease forwards;
}

/* 时钟卡 */
.dash-clock {
  text-align:center;
  background:linear-gradient(135deg, var(--bg-card), rgba(201,149,107,.05));
  border-color:rgba(201,149,107,.15);
}
.dash-clock-time {
  font-family:var(--font-serif); font-size:2.8rem; font-weight:700;
  color:var(--accent-light); letter-spacing:2px; line-height:1.2;
}
.dash-clock-date { font-size:.85rem; color:var(--text-secondary); margin-top:4px }

/* 天气卡 */
.dash-weather {
  text-align:center;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.dash-weather-icon { font-size:2.5rem; margin-bottom:8px }
.dash-weather-text { font-size:.9rem; color:var(--text-secondary) }

/* 统计卡 */
.dash-stat  { text-align:center }
.dash-stat-num   {
  font-family:var(--font-serif); font-size:2rem; font-weight:700;
  color:var(--accent-light);
}
.dash-stat-label { font-size:.85rem; color:var(--text-secondary); margin-top:4px }

/* 今日金价速览（横跨两列） */
.dash-gold {
  grid-column:1 / -1;
  background:linear-gradient(135deg, rgba(201,149,107,.07) 0%, rgba(139,105,20,.04) 100%);
  border-color:rgba(201,149,107,.22);
  display:flex; align-items:center; gap:32px;
  padding:20px 28px;
}
/* 右上角装饰光晕（调整为在卡片范围内） */
.dash-gold::before {
  content:''; position:absolute;
  right:20px; top:50%; transform:translateY(-50%);
  width:110px; height:110px;
  background:radial-gradient(circle, rgba(201,149,107,.09) 0%, transparent 70%);
  border-radius:50%; pointer-events:none; z-index:0;
}
.dash-gold-left  { flex-shrink:0; position:relative; z-index:2 }
.dash-gold-header {
  display:flex; align-items:center; gap:6px; margin-bottom:8px;
}
.dash-gold-icon  { font-size:1.1rem }
.dash-gold-label {
  font-size:.75rem; text-transform:uppercase; letter-spacing:1px; color:var(--text-muted);
}
.dash-gold-price {
  font-family:var(--font-serif); font-size:2rem; font-weight:700;
  color:var(--accent-light); line-height:1;
  display:flex; align-items:baseline; gap:8px;
}
.dash-gold-price .gold-trend     { font-size:1.1rem; font-family:var(--font-sans); font-weight:600 }
.dash-gold-price .gold-trend.up  { color:var(--success) }
.dash-gold-price .gold-trend.down{ color:var(--danger)  }
.dash-gold-right {
  flex:1; min-width:0; position:relative; z-index:2;
  border-left:1px solid var(--border); padding-left:28px;
}
.dash-gold-summary {
  font-size:.85rem; color:var(--text-secondary); line-height:1.6;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  margin-bottom:6px;
}
.dash-gold-source { font-size:.72rem; color:var(--text-muted) }

/* 最近更新区块 */
.dash-section       { margin-top:8px }
.dash-section-title {
  font-family:var(--font-serif); font-size:1.2rem; font-weight:600;
  color:var(--text-primary); margin-bottom:16px;
  padding-bottom:8px; border-bottom:1px solid var(--border);
}
.dash-recent-list { display:flex; flex-direction:column; gap:8px }


/* ══════════════════════════════════════════
   内容列表项（含交错淡入 + 微光扫过）
   ══════════════════════════════════════════ */
.content-list { display:flex; flex-direction:column; gap:8px }
.content-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px }

.content-item {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius); padding:16px 20px;
  display:flex; align-items:center; gap:16px;
  cursor:pointer;
  transition: border-color var(--transition), background var(--transition),
              transform var(--transition), box-shadow var(--transition);
  position:relative; overflow:hidden;
}
.content-item:hover {
  border-color:var(--accent-dark); background:var(--bg-card-hover);
  transform:translateX(4px); box-shadow:0 2px 12px rgba(0,0,0,.2);
}

/* 微光扫过（与 dash-card 相同逻辑） */
.content-item::after {
  content:'';
  position:absolute; top:-20px; bottom:-20px; left:-80%;
  width:50%;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(201,149,107,.04) 40%,
    rgba(232,196,154,.06) 50%,
    rgba(201,149,107,.04) 60%,
    transparent 100%
  );
  transform:skewX(-12deg);
  pointer-events:none; z-index:1;
}
.content-item:hover::after { animation:cardShimmer .55s ease forwards }

/* 交错淡入动画类（由 JS 动态赋予 animation-delay） */
.content-item.animate-in {
  animation: itemFadeIn .4s cubic-bezier(.4,0,.2,1) both;
}

.content-item-icon  { font-size:1.5rem; width:36px; text-align:center; flex-shrink:0; position:relative; z-index:2 }
.content-item-body  { flex:1; min-width:0; position:relative; z-index:2 }
.content-item-title {
  font-weight:500; color:var(--text-primary); font-size:.95rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.content-item-summary {
  font-size:.8rem; color:var(--text-secondary); margin-top:2px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.content-item-date  {
  font-size:.75rem; color:var(--text-muted); white-space:nowrap;
  flex-shrink:0; min-width:80px; text-align:right; position:relative; z-index:2;
}
.content-item-tags  { display:flex; gap:4px; flex-wrap:wrap; margin-top:6px }
.tag {
  font-size:.7rem; padding:2px 8px; border-radius:10px;
  background:var(--accent-glow); color:var(--accent);
  border:1px solid rgba(201,149,107,.15);
}

/* 网格布局下的列表项 */
.content-grid .content-item {
  flex-direction:column; align-items:flex-start; gap:10px; padding:20px;
}
.content-grid .content-item:hover { transform:translateY(-2px) }

/* 简报类型左侧色带 */
.briefing-item {
  border-left:3px solid var(--briefing-color, var(--accent));
  padding-left:17px; /* 20px - 3px border */
}
.briefing-item:hover { transform:translateX(2px) }

/* 简报类型小徽章 */
.briefing-type-badge {
  display:inline-flex; align-items:center; gap:4px;
  font-size:.68rem; padding:2px 8px; border-radius:10px;
  font-weight:500; margin-top:3px; margin-bottom:2px;
  background: var(--badge-bg,    rgba(201,149,107,.10));
  color:       var(--badge-color, var(--accent));
  border:1px solid var(--badge-border, rgba(201,149,107,.20));
}


/* ══════════════════════════════════════════
   Modal 弹窗
   ══════════════════════════════════════════ */

/* 覆盖层：隐藏时 display:none，显示时播放模糊淡入动画 */
.modal-overlay {
  position:fixed; inset:0;
  z-index:500;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  /* 动画结束后保持终态（blur 8px + 半透明黑） */
  animation: overlayFadeIn .35s ease forwards;
}
.modal-overlay.hidden { display:none !important }

/* 弹窗内容框 */
.modal {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:16px; width:100%; max-width:760px; max-height:88vh;
  display:flex; flex-direction:column;
  box-shadow:var(--shadow-lg);
  animation: modalIn .3s cubic-bezier(.34,1.56,.64,1) both;
  /* 确保 modal 内容在覆盖层之上 */
  position:relative; z-index:1;
}

.modal-header {
  display:flex; align-items:flex-start; justify-content:space-between;
  padding:22px 26px 0; gap:12px;
}
.modal-header h2 {
  font-family:var(--font-serif); font-size:1.3rem; font-weight:600;
  color:var(--accent-light); flex:1; line-height:1.4;
}
.modal-close {
  background:none; border:none; color:var(--text-muted);
  font-size:1.8rem; cursor:pointer; padding:0 4px;
  border-radius:var(--radius-sm);
  transition:all var(--transition); line-height:1; flex-shrink:0;
}
.modal-close:hover { color:var(--danger); background:rgba(255,107,107,.1) }

.modal-meta {
  padding:10px 26px 0; font-size:.8rem; color:var(--text-secondary);
  display:flex; gap:14px; flex-wrap:wrap; align-items:center;
}
.modal-meta .tag { margin-right:2px }

/* ── Modal 阅读正文 ── */
.modal-body {
  padding:20px 26px 28px;
  overflow-y:auto; flex:1;
  font-size:.96rem; line-height:1.95;
  color:var(--text-secondary);
  border-top:1px solid var(--border); margin-top:12px;
}

/* h1 隐藏（标题已在 modal-header 显示） */
.modal-body h1 { display:none }

/* h2：金色左竖线 + 底部分隔 */
.modal-body h2 {
  font-family:var(--font-serif); font-size:1.1rem; font-weight:600;
  color:var(--text-primary); margin:26px 0 12px;
  padding-left:14px; padding-bottom:9px;
  border-left:3px solid var(--accent);
  border-bottom:1px solid var(--border);
  line-height:1.5;
}
.modal-body h3 {
  font-family:var(--font-serif); font-size:1rem; font-weight:600;
  color:var(--text-primary); margin:20px 0 10px;
}
.modal-body p            { margin-bottom:14px }
.modal-body ul,.modal-body ol { padding-left:22px; margin-bottom:14px }
.modal-body li           { margin-bottom:6px }
.modal-body li::marker   { color:var(--accent) }

/* blockquote：优雅竖线 + 半透明底 + 斜体 */
.modal-body blockquote {
  border-left:3px solid var(--accent);
  padding:14px 18px 14px 20px;
  background:rgba(201,149,107,.05);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  color:var(--text-secondary); margin:18px 0;
  font-style:italic; font-size:.93rem; line-height:1.85;
  position:relative;
}
.modal-body blockquote::before {
  content:'"';
  position:absolute; top:-4px; left:12px;
  font-size:2.4rem; color:var(--accent-dark);
  font-family:var(--font-serif); line-height:1; opacity:.5;
}
.modal-body blockquote p { margin-bottom:0; color:inherit }

/* 行内代码 */
.modal-body code {
  background:rgba(0,0,0,.30); border:1px solid var(--border-light);
  padding:1px 6px; border-radius:4px;
  font-size:.85em; color:var(--accent-light);
  font-family:'Courier New',Courier,monospace;
}
/* 代码块 */
.modal-body pre {
  background:#0c0c14; border:1px solid var(--border-light);
  border-radius:var(--radius-sm); padding:16px 18px;
  overflow-x:auto; margin:16px 0; -webkit-overflow-scrolling:touch;
}
.modal-body pre code {
  background:none; border:none; padding:0;
  font-size:.875rem; color:var(--text-primary);
}
.modal-body hr      { border:none; border-top:1px solid var(--border); margin:20px 0 }
.modal-body strong  { color:var(--accent-light) }
.modal-body em      { color:var(--text-secondary) }

/* 表格：外层容器横向滚动 */
.modal-body .table-wrap {
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  margin:14px 0; border-radius:var(--radius-sm);
  border:1px solid var(--border);
}
.modal-body table {
  width:100%; border-collapse:collapse; font-size:.875rem; min-width:400px;
}
.modal-body th,.modal-body td { padding:9px 14px; border:1px solid var(--border); text-align:left; white-space:nowrap }
.modal-body th {
  background:var(--bg-input); color:var(--accent-light);
  font-weight:600; font-family:var(--font-serif); font-size:.85rem;
}
.modal-body td { color:var(--text-secondary) }
.modal-body tr:hover td { background:rgba(255,255,255,.02) }

/* 搜索高亮 */
mark {
  background:rgba(201,149,107,.30); color:var(--accent-light);
  padding:1px 3px; border-radius:2px;
}


/* ══════════════════════════════════════════
   功能一：简报百叶帘（Accordion）
   ══════════════════════════════════════════ */

/* 分组容器 */
.accordion-group {
  margin-bottom: 8px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
}

/* 标题栏：深色背景 + 左侧金色竖线 */
.accordion-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: var(--bg-secondary);
  border-left: 3px solid var(--accent);
  cursor: pointer;
  user-select: none;
  transition: background var(--transition), border-color var(--transition);
  outline: none;
}
.accordion-header:hover {
  background: var(--bg-card);
  border-left-color: var(--accent-light);
}
.accordion-group.open .accordion-header {
  background: var(--bg-card);
  border-left-color: var(--accent-light);
}

/* 展开箭头 */
.accordion-arrow {
  font-size: .75rem;
  color: var(--accent);
  flex-shrink: 0;
  transition: transform var(--transition);
  width: 14px;
  text-align: center;
}

/* 日期文字（居左） */
.accordion-date {
  flex: 1;
  font-family: var(--font-serif);
  font-size: .95rem;
  font-weight: 600;
  color: var(--text-primary);
}

/* 右侧元信息（金价 + 数量） */
.accordion-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.accordion-price {
  font-family: var(--font-serif);
  font-size: .88rem;
  font-weight: 600;
  color: var(--accent-light);
  background: var(--accent-glow);
  padding: 2px 10px;
  border-radius: 10px;
  border: 1px solid rgba(201,149,107,.18);
}
.accordion-count {
  font-size: .78rem;
  color: var(--text-muted);
  background: rgba(255,255,255,.04);
  padding: 2px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
}

/* 折叠内容区：max-height 动画 */
.accordion-body {
  max-height: none;
  overflow: hidden;
  transition: max-height 0.3s ease;
  background: var(--bg-primary);
}

/* 内容区内边距 */
.accordion-content {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 折叠状态下内容区不可见 */
.accordion-group:not(.open) .accordion-body {
  max-height: 0 !important;
}


/* ══════════════════════════════════════════
   功能二：文件上传与管理
   ══════════════════════════════════════════ */

/* ── 面包屑导航 ── */
.file-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.breadcrumb-item {
  font-size: .85rem;
  color: var(--accent);
  cursor: pointer;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  transition: background var(--transition), color var(--transition);
}
.breadcrumb-item:hover {
  background: var(--accent-glow);
  color: var(--accent-light);
}
.breadcrumb-root {
  font-weight: 500;
}
.breadcrumb-current {
  color: var(--text-primary);
  cursor: default;
  font-weight: 500;
}
.breadcrumb-current:hover {
  background: none;
  color: var(--text-primary);
}
.breadcrumb-sep {
  color: var(--text-muted);
  font-size: .9rem;
}

/* ── 上传区域 ── */
.file-upload-zone {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 20px;
}

/* 拖拽区 */
.upload-drop-area {
  border: 2px dashed var(--border-light);
  border-radius: var(--radius);
  padding: 32px 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
  margin-bottom: 16px;
}
.upload-drop-area:hover,
.upload-drop-area.drag-over {
  border-color: var(--accent);
  background: var(--accent-glow);
}
.upload-drop-icon {
  font-size: 2.2rem;
  margin-bottom: 8px;
}
.upload-drop-text {
  font-size: .95rem;
  color: var(--text-primary);
  font-weight: 500;
  margin-bottom: 4px;
}
.upload-drop-hint {
  font-size: .8rem;
  color: var(--text-muted);
}

/* 控制栏（按钮 + 下拉 + 新建文件夹） */
.upload-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* 选择文件按钮 */
.upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: linear-gradient(135deg, var(--accent-dark), var(--accent));
  color: #fff;
  border-radius: var(--radius-sm);
  font-size: .85rem;
  font-family: var(--font-sans);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
  border: none;
  white-space: nowrap;
}
.upload-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(201,149,107,.30);
}

/* 文件夹下拉 */
.upload-folder-select {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  color: var(--text-primary);
  font-size: .85rem;
  font-family: var(--font-sans);
  outline: none;
  cursor: pointer;
  transition: border-color var(--transition);
  flex: 1;
  min-width: 160px;
  max-width: 260px;
}
.upload-folder-select:focus {
  border-color: var(--accent);
}

/* 新建文件夹按钮 */
.upload-mkdir-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: .85rem;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
}
.upload-mkdir-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-glow);
}

/* 进度条 */
.upload-progress-wrap {
  margin-top: 14px;
}
.upload-progress-label {
  font-size: .82rem;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.upload-progress-bar {
  height: 6px;
  background: var(--bg-input);
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.upload-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-dark), var(--accent));
  border-radius: 3px;
  transition: width 0.2s ease;
}

/* ── 文件管理区 ── */
.file-manager {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.file-manager-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-secondary);
}
.file-manager-title {
  font-size: .9rem;
  font-weight: 600;
  color: var(--text-primary);
}
.file-refresh-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: .8rem;
  font-family: var(--font-sans);
  padding: 5px 10px;
  cursor: pointer;
  transition: all var(--transition);
}
.file-refresh-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* 文件表格容器（横向滚动） */
.file-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* 文件表格 */
.file-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .85rem;
  min-width: 560px;
}
.file-table thead th {
  background: var(--bg-input);
  color: var(--text-muted);
  font-weight: 500;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.file-table tbody .file-row {
  border-bottom: 1px solid var(--border);
  transition: background var(--transition);
}
.file-table tbody .file-row:last-child {
  border-bottom: none;
}
.file-table tbody .file-row:hover {
  background: var(--bg-card-hover);
}
.file-table tbody td {
  padding: 10px 14px;
  color: var(--text-secondary);
  vertical-align: middle;
}

/* 文件夹行高亮 */
.folder-row td {
  color: var(--text-primary);
}

/* 文件名单元格 */
.file-name-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 180px;
}
.file-icon {
  font-size: 1.1rem;
  flex-shrink: 0;
}
.file-name {
  flex: 1;
  color: var(--text-primary);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220px;
}
.folder-link {
  cursor: pointer;
  color: var(--accent);
  transition: color var(--transition);
}
.folder-link:hover {
  color: var(--accent-light);
  text-decoration: underline;
}

/* 重命名按钮（内联） */
.file-rename-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: .85rem;
  padding: 2px 4px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity var(--transition), background var(--transition);
  flex-shrink: 0;
}
.file-row:hover .file-rename-btn {
  opacity: 1;
}
.file-rename-btn:hover {
  background: var(--accent-glow);
}

/* 操作按钮列 */
.file-actions-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.file-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  font-size: .82rem;
  cursor: pointer;
  text-decoration: none;
  color: var(--text-secondary);
  transition: all var(--transition);
}
.file-download-btn:hover {
  border-color: var(--info);
  color: var(--info);
  background: rgba(100,181,246,.08);
}
.file-delete-btn:hover {
  border-color: var(--danger);
  color: var(--danger);
  background: rgba(255,107,107,.08);
}

/* ── Toast 提示 ── */
.file-toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 20px;
  font-size: .88rem;
  color: var(--text-primary);
  box-shadow: var(--shadow-lg);
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  white-space: nowrap;
}
.file-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.file-toast-success { border-color: var(--success); }
.file-toast-error   { border-color: var(--danger);  }


/* ══════════════════════════════════════════
   Phase 3 — 西幻魔法增强
   ══════════════════════════════════════════ */

/* ── 符文装饰关键帧 ── */
@keyframes runeGlow {
  0%,100% { opacity:.25 }
  50%      { opacity:.55 }
}
@keyframes runeFloat {
  0%,100% { transform:translateY(0) }
  50%      { transform:translateY(-3px) }
}
@keyframes magicPulse {
  0%,100% { box-shadow:0 0 8px var(--rune-gold-dim) }
  50%      { box-shadow:0 0 20px var(--rune-gold-dim), 0 0 40px var(--rune-gold-glow) }
}
@keyframes runeRotate {
  from { transform:rotate(0deg) }
  to   { transform:rotate(360deg) }
}

/* ── 1. Logo 魔法光晕 ── */
.logo {
  position:relative;
  padding:4px 12px 4px 8px;
  border-radius:var(--radius-sm);
  transition:all var(--transition);
}
.logo::before {
  content:'';
  position:absolute; inset:-2px;
  border-radius:calc(var(--radius-sm) + 2px);
  background:linear-gradient(135deg, var(--rune-gold-dim), transparent 40%, transparent 60%, var(--rune-gold-dim));
  opacity:0;
  transition:opacity var(--transition);
  z-index:-1;
}
.logo:hover::before { opacity:1 }
.logo:hover .logo-text { text-shadow:0 0 12px var(--rune-gold-dim) }

/* ── 2. 侧边栏羊皮纸纹理增强 ── */
.sidebar {
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0px,
      transparent 31px,
      rgba(212,168,83,.025) 31px,
      rgba(212,168,83,.025) 32px
    ),
    radial-gradient(ellipse at 50% 0%, rgba(212,168,83,.04) 0%, transparent 60%),
    var(--bg-secondary);
}

/* 侧边栏底部符文装饰线 */
.sidebar-footer {
  position:relative;
}
.sidebar-footer::before {
  content:'◆  ◇  ◆';
  display:block;
  text-align:center;
  font-size:.55rem;
  color:var(--rune-gold);
  opacity:.3;
  letter-spacing:4px;
  margin-bottom:10px;
  animation:runeGlow 4s ease-in-out infinite;
}

/* ── 3. 导航项符文指示条升级 ── */
.nav-item::before {
  background:linear-gradient(180deg, var(--rune-gold), var(--accent-dark));
  box-shadow:0 0 6px var(--rune-gold-dim);
}
.nav-item.active::before {
  box-shadow:0 0 10px var(--rune-gold-dim);
}

/* ── 4. 仪表盘卡片符文边角装饰 ── */
.dash-card {
  border-color:rgba(212,168,83,.12);
}
/* 四角符文装饰 */
.dash-card::before {
  content:'';
  position:absolute;
  top:6px; left:6px; right:6px; bottom:6px;
  border:1px solid rgba(212,168,83,.06);
  border-radius:calc(var(--radius) - 4px);
  pointer-events:none;
  z-index:0;
  transition:border-color var(--transition);
}
.dash-card:hover::before {
  border-color:rgba(212,168,83,.15);
}

/* ── 5. 金价卡魔法水晶球装饰 ── */
.dash-gold {
  border-color:rgba(212,168,83,.25);
  position:relative;
}
.dash-gold::before {
  /* 水晶球光晕 - 增强版 */
  width:130px; height:130px;
  background:
    radial-gradient(circle, rgba(212,168,83,.12) 0%, transparent 60%),
    radial-gradient(circle at 40% 40%, rgba(255,255,255,.04) 0%, transparent 50%);
  animation:runeGlow 3s ease-in-out infinite;
}
/* 金价卡左侧符文装饰 */
.dash-gold-left::after {
  content:'✦';
  position:absolute;
  left:-20px; top:50%;
  transform:translateY(-50%);
  font-size:.7rem;
  color:var(--rune-gold);
  opacity:.35;
  animation:runeFloat 3s ease-in-out infinite;
}

/* ── 6. Modal 符文边框 ── */
.modal {
  border-color:rgba(212,168,83,.18);
}
.modal::before {
  content:'';
  position:absolute;
  top:8px; left:8px; right:8px; bottom:8px;
  border:1px solid rgba(212,168,83,.06);
  border-radius:12px;
  pointer-events:none;
  z-index:0;
}
/* Modal 标题符文装饰 */
.modal-header h2 {
  position:relative;
}
.modal-header h2::after {
  content:'◇';
  position:absolute;
  right:-16px; top:50%;
  transform:translateY(-50%);
  font-size:.6rem;
  color:var(--rune-gold);
  opacity:.4;
  animation:runeGlow 3s ease-in-out infinite 1s;
}

/* ── 7. 内容列表项魔法hover增强 ── */
.content-item {
  border-color:rgba(212,168,83,.08);
}
.content-item:hover {
  border-color:rgba(212,168,83,.25);
  box-shadow:0 2px 16px rgba(212,168,83,.08), 0 2px 12px rgba(0,0,0,.2);
}

/* ── 8. 符文分隔线 ── */
.modal-body hr {
  border:none;
  height:1px;
  background:linear-gradient(
    90deg,
    transparent 0%,
    var(--rune-gold-dim) 20%,
    var(--rune-gold) 50%,
    var(--rune-gold-dim) 80%,
    transparent 100%
  );
  margin:24px 0;
  position:relative;
}
.modal-body hr::after {
  content:'◆';
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  font-size:.5rem;
  color:var(--rune-gold);
  background:var(--bg-card);
  padding:0 8px;
  opacity:.5;
}

/* ── 9. 区块标题符文装饰 ── */
.dash-section-title {
  position:relative;
}
.dash-section-title::after {
  content:'';
  position:absolute;
  bottom:-1px; left:0;
  width:60px; height:2px;
  background:linear-gradient(90deg, var(--rune-gold), transparent);
  border-radius:1px;
}

/* ── 10. 搜索框魔法聚焦 ── */
.search-box input[type="text"]:focus {
  border-color:var(--rune-gold);
  box-shadow:0 0 0 3px rgba(212,168,83,.12), 0 0 20px rgba(212,168,83,.06);
}

/* ── 11. 登录页西幻增强 ── */
.gate-card {
  border-color:rgba(212,168,83,.15);
}
.gate-card::before {
  content:'';
  position:absolute;
  top:10px; left:10px; right:10px; bottom:10px;
  border:1px solid rgba(212,168,83,.06);
  border-radius:12px;
  pointer-events:none;
}
.gate-title {
  text-shadow:0 0 20px rgba(212,168,83,.15);
}
.gate-btn {
  background:linear-gradient(135deg, rgba(139,105,20,.9), var(--rune-gold));
  position:relative;
  overflow:hidden;
}
.gate-btn::after {
  content:'';
  position:absolute;
  top:-50%; left:-50%;
  width:200%; height:200%;
  background:linear-gradient(
    45deg,
    transparent 40%,
    rgba(255,255,255,.06) 50%,
    transparent 60%
  );
  animation:runeRotate 6s linear infinite;
}
.gate-glow {
  background:radial-gradient(circle, rgba(212,168,83,.10) 0%, transparent 70%);
}

/* ── 12. 粒子升级为魔法萤火 ── */
.gate-particles i {
  box-shadow:0 0 4px rgba(212,168,83,.3);
}
.gate-particles i:nth-child(odd) {
  box-shadow:0 0 6px rgba(212,168,83,.4), 0 0 12px rgba(212,168,83,.15);
}

/* ── 13. 顶栏底部符文光线 ── */
.topbar::after {
  content:'';
  position:absolute;
  bottom:-1px; left:10%; right:10%;
  height:1px;
  background:linear-gradient(
    90deg,
    transparent 0%,
    var(--rune-gold-dim) 30%,
    var(--rune-gold) 50%,
    var(--rune-gold-dim) 70%,
    transparent 100%
  );
  opacity:.4;
}

/* ── 14. 滚动条西幻化 ── */
::-webkit-scrollbar-thumb {
  background:linear-gradient(180deg, var(--rune-gold-dim), var(--accent-dark));
  border-radius:3px;
}
::-webkit-scrollbar-thumb:hover {
  background:linear-gradient(180deg, var(--rune-gold), var(--accent));
}

/* ── 15. 简报百叶帘符文增强 ── */
.accordion-header {
  border-left-color:var(--rune-gold);
}
.accordion-header:hover,
.accordion-group.open .accordion-header {
  border-left-color:var(--accent-light);
  box-shadow:inset 3px 0 8px -2px var(--rune-gold-dim);
}
.accordion-price {
  border-color:rgba(212,168,83,.22);
  background:rgba(212,168,83,.08);
}

/* ── 16. 文件上传区域魔法边框 ── */
.upload-drop-area {
  border-color:rgba(212,168,83,.15);
}
.upload-drop-area:hover,
.upload-drop-area.drag-over {
  border-color:var(--rune-gold);
  box-shadow:0 0 20px var(--rune-gold-glow);
}

/* ── 17. Tag 标签微调 ── */
.tag {
  border-color:rgba(212,168,83,.18);
  background:rgba(212,168,83,.08);
}

/* ── 18. 登录页副标题（西幻格言） ── */
.gate-subtitle {
  position:relative;
  font-style:italic;
  color:var(--text-secondary);
}
.gate-subtitle::before,
.gate-subtitle::after {
  content:'—';
  margin:0 6px;
  color:var(--rune-gold);
  opacity:.4;
}

/* ── 19. 侧边栏导航图标hover微光 ── */
.nav-item:hover .nav-icon {
  text-shadow:0 0 8px var(--rune-gold-dim);
  transition:text-shadow var(--transition);
}
.nav-item.active .nav-icon {
  text-shadow:0 0 10px var(--rune-gold-dim);
}

/* ── 20. 内容区背景微调（极淡魔法氛围） ── */
.content {
  background:
    radial-gradient(ellipse at 80% 20%, rgba(212,168,83,.02) 0%, transparent 50%),
    radial-gradient(ellipse at 20% 80%, rgba(120,80,200,.015) 0%, transparent 50%);
}


/* ══════════════════════════════════════════
   响应式 — 平板（≤900px）
   ══════════════════════════════════════════ */
@media (max-width:900px) {
  /* 侧边栏滑入/滑出 */
  .sidebar       { transform:translateX(-100%) }
  .sidebar.open  { transform:translateX(0); box-shadow:var(--shadow-lg) }
  .sidebar-toggle{ display:block }

  .content       { margin-left:0; padding:20px 16px 48px }
  .topbar-center { display:none }  /* 顶栏隐藏时钟天气（仪表盘仍显示） */

  .search-box input[type="text"]       { width:180px }
  .search-box input[type="text"]:focus { width:220px }

  /* 仪表盘保持 2 列，只有 dash-clock 字号略小 */
  .dash-clock-time { font-size:2.2rem }
  .content-grid    { grid-template-columns:1fr }

  /* 金价卡移动端竖向堆叠 */
  .dash-gold       { flex-direction:column; gap:16px; align-items:flex-start }
  .dash-gold-right {
    border-left:none; border-top:1px solid var(--border);
    padding-left:0; padding-top:14px; width:100%;
  }
}


/* ══════════════════════════════════════════
   响应式 — 手机（≤600px）
   ══════════════════════════════════════════ */
@media (max-width:600px) {
  .topbar    { padding:0 12px }
  .logo-text { display:none }
  .search-box input[type="text"]       { width:140px; font-size:.8rem }
  .search-box input[type="text"]:focus { width:180px }

  /* ── 仪表盘：保持 2 列（时钟 + 天气各占一列，紧凑展示） ── */
  .dashboard-grid  { grid-template-columns:1fr 1fr }
  .dash-clock-time { font-size:1.8rem }
  .dash-clock-date { font-size:.72rem }

  /* ── 列表项：竖向排列 ── */
  .content-item      { flex-direction:column; gap:8px }
  .content-item-date { min-width:auto; text-align:left }

  /* ── Modal 移动端全屏 ── */
  .modal-overlay {
    padding:0;
    align-items:stretch;   /* 让 modal 撑满高度 */
  }
  .modal {
    width:100vw;
    max-width:100vw;
    height:100dvh;         /* 使用 dvh 避免地址栏遮挡 */
    max-height:100dvh;
    border-radius:0;
    border:none;
    animation: modalInMobile .32s cubic-bezier(.4,0,.2,1) both;
  }
  .modal-header { padding:18px 18px 0 }
  .modal-meta   { padding:8px  18px 0 }
  .modal-body   { padding:16px }
}


/* ══════════════════════════════════════════
   Phase 4 — 烛台装饰
   ══════════════════════════════════════════ */

/* 火焰跳动动画（左烛台） */
@keyframes flameLeft {
  0%,100% { transform: scaleX(1)   scaleY(1)    translateX(0);   opacity: .95 }
  25%      { transform: scaleX(.88) scaleY(1.08) translateX(-1px); opacity: 1   }
  50%      { transform: scaleX(1.06) scaleY(.94) translateX(1px);  opacity: .9  }
  75%      { transform: scaleX(.92) scaleY(1.05) translateX(-1px); opacity: 1   }
}

/* 火焰跳动动画（右烛台，节奏错开） */
@keyframes flameRight {
  0%,100% { transform: scaleX(1)    scaleY(1)    translateX(0);   opacity: .9  }
  30%      { transform: scaleX(1.07) scaleY(.92) translateX(1px);  opacity: 1   }
  60%      { transform: scaleX(.9)  scaleY(1.07) translateX(-1px); opacity: .95 }
  80%      { transform: scaleX(1.04) scaleY(.96) translateX(1px);  opacity: 1   }
}

/* 光晕脉冲 */
@keyframes glowPulseCandle {
  0%,100% { opacity: .55; transform: scale(1)    }
  50%      { opacity: .85; transform: scale(1.12) }
}

/* ── 烛台公共基础 ── */
.candle-left,
.candle-right {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}

.candle-left  { left: 8% }
.candle-right { right: 8%; transform: translateY(-50%) scaleX(-1) }

/* 光晕：火焰周围暖色扩散 */
.candle-glow {
  width: 80px;
  height: 120px;
  background: radial-gradient(ellipse at 50% 80%,
    rgba(212,168,83,.13) 0%,
    rgba(212,168,83,.06) 40%,
    transparent 70%
  );
  border-radius: 50%;
  margin-bottom: -60px; /* 与火焰重叠 */
  animation: glowPulseCandle 3s ease-in-out infinite;
}
.candle-right .candle-glow {
  animation-duration: 3.7s; /* 右侧节奏略不同 */
}

/* 火焰 */
.candle-flame {
  width: 12px;
  height: 22px;
  background: radial-gradient(ellipse at 50% 70%,
    #fff        0%,
    #ffe066     20%,
    #ffaa00     50%,
    #ff6600     75%,
    transparent 100%
  );
  border-radius: 50% 50% 30% 30% / 60% 60% 40% 40%;
  box-shadow:
    0 0 6px  2px rgba(255,180,0,.55),
    0 0 14px 4px rgba(212,168,83,.30),
    0 0 28px 8px rgba(212,168,83,.12);
  transform-origin: 50% 90%;
  animation: flameLeft 2.4s ease-in-out infinite;
  position: relative;
  z-index: 2;
}
.candle-right .candle-flame {
  animation-name: flameRight;
  animation-duration: 2.9s;
}

/* 蜡烛本体（白色短柱） */
.candle-body {
  width: 14px;
  height: 36px;
  background: linear-gradient(to right, #d8d4cc, #f0ece4, #d8d4cc);
  border-radius: 3px 3px 2px 2px;
  box-shadow: inset -2px 0 4px rgba(0,0,0,.15);
  margin-top: -2px; /* 与火焰底部衔接 */
}

/* 烛台柱（细长，深色金属） */
.candle-holder {
  width: 8px;
  height: 48px;
  background: linear-gradient(to right, #1a1a28, #2e2e42, #1a1a28);
  border-radius: 2px;
}

/* 底座（梯形效果用 border trick） */
.candle-base {
  width: 32px;
  height: 10px;
  background: linear-gradient(to right, #1a1a28, #2e2e42, #1a1a28);
  border-radius: 3px 3px 4px 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,.4);
  /* 梯形：顶部略窄 */
  clip-path: polygon(10% 0%, 90% 0%, 100% 100%, 0% 100%);
}

/* 响应式：900px 以下隐藏烛台 */
@media (max-width: 900px) {
  .candle-left,
  .candle-right { display: none }
}


/* ══════════════════════════════════════════
   Phase 4 — 图书馆守则
   ══════════════════════════════════════════ */

/* 守则整体容器 */
.gate-rules {
  margin-top: 16px;
  text-align: center;
}

/* 勾选行：flex 居中 */
.gate-rules-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .75rem;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
}

/* 自定义 checkbox */
.gate-rules-check input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--rune-gold-dim);
  border-radius: 3px;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color var(--transition), background var(--transition);
  position: relative;
}
.gate-rules-check input[type="checkbox"]:checked {
  background: var(--rune-gold);
  border-color: var(--rune-gold);
}
.gate-rules-check input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 3px; top: 1px;
  width: 5px; height: 8px;
  border: 1.5px solid #0b0b12;
  border-top: none; border-left: none;
  transform: rotate(45deg);
}

/* 守则链接 */
.gate-rules-check a {
  color: var(--rune-gold);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-size: .75rem;
  transition: color var(--transition), opacity var(--transition);
}
.gate-rules-check a:hover {
  color: var(--accent-light);
  opacity: 1;
}

/* 守则展开内容 */
.gate-rules-content {
  margin-top: 10px;
  text-align: left;
  font-size: .72rem;
  color: var(--text-secondary);
  line-height: 1.8;
  border-left: 2px solid var(--rune-gold-dim);
  padding-left: 12px;
}
.gate-rules-content p {
  margin: 4px 0;
}


/* ══════════════════════════════════════════
   Phase 4 — 管理员专属欢迎动画
   ══════════════════════════════════════════ */

.welcome-overlay {
  position: fixed;
  inset: 0;
  background: #0b0b12;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s ease;
}
.welcome-overlay.active {
  opacity: 1;
  pointer-events: all;
}

.welcome-text {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  color: var(--rune-gold);
  text-align: center;
  line-height: 2;
  max-width: 500px;
  padding: 0 24px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.2s ease, transform 1.2s ease;
}
.welcome-overlay.active .welcome-text {
  opacity: 1;
  transform: translateY(0);
}


/* ══════════════════════════════════════════
   外部链接 — 杂志封面风格卡片
   Phase 4.1
   ══════════════════════════════════════════ */

/* ── 添加按钮 ── */
/* ══════════════════════════════════════════
   外部链接 — 奥术杂志摊 / 图书馆报刊柜
   目标：还原设计图中的书架布局、品牌封面、像素西幻质感
   ══════════════════════════════════════════ */

.links-add-btn {
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  width:38px;
  height:38px;
  border-radius:50%;
  border:1px solid rgba(212,168,83,.55);
  background:
    radial-gradient(circle at 35% 30%, rgba(232,196,154,.25), transparent 42%),
    linear-gradient(180deg, rgba(62,38,13,.95), rgba(18,14,18,.95));
  color:var(--accent-light);
  font-size:1.35rem;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  box-shadow:0 0 18px rgba(212,168,83,.14), inset 0 0 0 1px rgba(0,0,0,.5);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.links-add-btn:hover {
  transform:translateY(-50%) scale(1.06) rotate(90deg);
  border-color:var(--accent-light);
  box-shadow:0 0 24px rgba(212,168,83,.32), inset 0 0 0 1px rgba(255,255,255,.08);
}

.links-grid {
  position:relative;
  display:grid;
  grid-template-columns:repeat(4, minmax(175px, 1fr));
  gap:42px 48px;
  padding:42px 54px 54px;
  margin:10px auto 24px;
  max-width:1180px;
  min-height:560px;
  isolation:isolate;
  background:
    linear-gradient(90deg, rgba(212,168,83,.12), transparent 12%, transparent 88%, rgba(212,168,83,.12)),
    repeating-linear-gradient(0deg, transparent 0 178px, rgba(61,35,15,.85) 178px 190px, rgba(24,15,9,.98) 190px 198px),
    linear-gradient(180deg, rgba(22,17,19,.9), rgba(9,9,15,.86));
  border:1px solid rgba(212,168,83,.36);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.75),
    inset 0 28px 50px rgba(0,0,0,.28),
    0 22px 50px rgba(0,0,0,.38);
}
.links-grid::before,
.links-grid::after {
  content:'';
  position:absolute;
  pointer-events:none;
  z-index:-1;
}
.links-grid::before {
  inset:-14px -18px -22px;
  background:
    linear-gradient(90deg, #3a2312 0 10px, transparent 10px calc(100% - 10px), #3a2312 calc(100% - 10px)),
    linear-gradient(180deg, #4a2c14 0 10px, transparent 10px calc(100% - 16px), #25160c calc(100% - 16px));
  border:1px solid rgba(212,168,83,.32);
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.45), 0 0 0 1px rgba(0,0,0,.8);
}
.links-grid::after {
  top:-25px;
  left:50%;
  width:126px;
  height:46px;
  transform:translateX(-50%);
  background:
    radial-gradient(circle at 50% 48%, #237c9f 0 7px, #0a3448 8px 12px, transparent 13px),
    linear-gradient(135deg, transparent 18%, rgba(212,168,83,.8) 18% 26%, transparent 26% 74%, rgba(212,168,83,.8) 74% 82%, transparent 82%),
    linear-gradient(180deg, transparent 42%, rgba(212,168,83,.45) 42% 48%, transparent 48%);
  filter:drop-shadow(0 0 10px rgba(35,124,159,.42));
}

.link-card {
  --cover-h:252px;
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  min-height:calc(var(--cover-h) + 42px);
  text-decoration:none;
  color:var(--text-primary);
  animation:itemFadeIn .48s cubic-bezier(.4,0,.2,1) var(--delay,0ms) both;
  transform-origin:50% 100%;
  transition:transform .28s ease, filter .28s ease;
}
.link-card:hover {
  transform:translateY(-8px) rotate(-.6deg);
  filter:drop-shadow(0 18px 22px rgba(0,0,0,.48));
}
.link-card:nth-child(2n):hover { transform:translateY(-8px) rotate(.6deg) }

.link-cover {
  position:relative;
  height:var(--cover-h);
  border:1px solid rgba(212,168,83,.44);
  overflow:hidden;
  background:var(--bg-card);
  box-shadow:
    inset 0 0 0 2px rgba(0,0,0,.55),
    inset 0 0 26px rgba(255,255,255,.025),
    0 10px 0 rgba(12,8,5,.94),
    0 14px 16px rgba(0,0,0,.34);
}
.link-cover::before {
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.34;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.18) 0 1px, transparent 1px 5px);
  mix-blend-mode:screen;
}
.link-cover::after {
  content:'';
  position:absolute;
  inset:6px;
  border:1px solid rgba(232,196,154,.18);
  pointer-events:none;
}

.link-card-caption {
  position:relative;
  min-height:38px;
  margin:0 9px;
  padding:7px 9px 8px;
  text-align:center;
  background:
    linear-gradient(180deg, rgba(40,25,13,.96), rgba(20,14,12,.96));
  border:1px solid rgba(212,168,83,.45);
  border-top:none;
  color:var(--accent-light);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.45);
}
.link-card-caption::before,
.link-card-caption::after {
  content:'✦';
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  color:rgba(212,168,83,.42);
  font-size:.58rem;
}
.link-card-caption::before { left:7px }
.link-card-caption::after  { right:7px }
.link-card-name {
  display:block;
  max-width:100%;
  padding:0 8px;
  font-family:var(--font-serif);
  font-size:.86rem;
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  letter-spacing:.2px;
}
.link-card-subtitle {
  display:block;
  margin-top:1px;
  color:rgba(232,224,216,.58);
  font-size:.68rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.link-card-delete {
  position:absolute;
  top:9px;
  right:9px;
  z-index:6;
  width:24px;
  height:24px;
  border-radius:50%;
  border:1px solid rgba(232,196,154,.18);
  background:rgba(5,5,8,.72);
  color:rgba(232,224,216,.72);
  cursor:pointer;
  opacity:0;
  transition:opacity .2s ease, background .2s ease, color .2s ease, transform .2s ease;
}
.link-card:hover .link-card-delete { opacity:1 }
.link-card-delete:hover {
  background:rgba(120,26,30,.92);
  color:#fff;
  transform:scale(1.08);
}

/* 杂志封面 */
.link-cover-magazine {
  display:flex;
  flex-direction:column;
  padding:18px 18px 16px;
  background:
    radial-gradient(circle at 62% 42%, color-mix(in srgb, var(--card-accent) 35%, transparent), transparent 34%),
    linear-gradient(160deg, rgba(5,9,19,.95), rgba(17,18,28,.98));
}
.link-mag-kicker {
  font-family:var(--font-sans);
  font-size:.56rem;
  letter-spacing:.16em;
  color:rgba(232,224,216,.68);
  text-transform:uppercase;
}
.link-mag-name {
  margin-top:3px;
  font-family:var(--font-serif);
  font-size:1.38rem;
  line-height:1;
  font-weight:700;
  color:var(--card-accent);
  text-shadow:0 0 14px color-mix(in srgb, var(--card-accent) 45%, transparent);
}
.link-time .link-mag-name { font-size:2.28rem; letter-spacing:.04em; color:#e5342c }
.link-economist .link-mag-name {
  align-self:flex-start;
  padding:3px 6px 5px;
  background:#c82020;
  color:#fff;
  font-size:1.02rem;
}
.link-tech .link-mag-name { font-size:1.05rem; color:#f4f5f7 }
.link-mag-art {
  position:relative;
  flex:1;
  min-height:86px;
  margin:16px 0 10px;
  display:grid;
  place-items:center;
}
.link-mag-art span {
  width:96px;
  height:96px;
  border-radius:50%;
  border:1px solid rgba(232,196,154,.16);
  background:
    radial-gradient(circle at 65% 30%, rgba(232,196,154,.22) 0 2px, transparent 3px),
    radial-gradient(circle at 40% 64%, rgba(30,113,160,.9), rgba(12,36,70,.85) 44%, rgba(3,8,15,.95) 70%);
  box-shadow:0 0 26px color-mix(in srgb, var(--card-accent) 30%, transparent);
}
.link-economist .link-mag-art span {
  border-radius:6px;
  transform:rotate(45deg);
  background:
    linear-gradient(45deg, rgba(255,255,255,.08) 25%, transparent 25% 50%, rgba(255,255,255,.08) 50% 75%, transparent 75%),
    linear-gradient(135deg, #1b1b1b 0 50%, #b88b37 50%);
  background-size:24px 24px, 100% 100%;
}
.link-tech .link-mag-art span {
  width:92px;
  height:92px;
  border-radius:8px;
  background:
    linear-gradient(90deg, transparent 46%, rgba(57,219,255,.38) 47% 53%, transparent 54%),
    linear-gradient(0deg, transparent 46%, rgba(57,219,255,.38) 47% 53%, transparent 54%),
    linear-gradient(135deg, rgba(34,184,207,.22), rgba(12,22,34,.98));
  box-shadow:0 0 28px rgba(34,184,207,.36);
}
.link-mag-art i {
  position:absolute;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--accent-light);
  box-shadow:34px 16px 0 rgba(232,196,154,.7), -26px 22px 0 rgba(232,196,154,.45), 12px -20px 0 rgba(232,196,154,.5);
}
.link-mag-headline {
  color:#fff;
  font-family:var(--font-serif);
  font-size:1.02rem;
  font-weight:700;
  line-height:1.12;
}
.link-mag-label {
  margin-top:6px;
  color:rgba(232,224,216,.68);
  font-size:.62rem;
  line-height:1.35;
}

/* 报纸封面 */
.link-cover-paper {
  padding:13px 14px;
  color:#21140c;
  background:
    repeating-linear-gradient(0deg, rgba(84,52,23,.045) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, #e8d4ad, #c7ab7b);
  border-color:rgba(105,70,32,.85);
}
.link-paper-masthead {
  font-family:Georgia, var(--font-serif);
  font-size:1.02rem;
  font-weight:700;
  line-height:1.05;
  color:#1c120a;
  text-transform:uppercase;
}
.link-paper-rule {
  height:4px;
  margin:7px 0;
  border-top:2px solid rgba(42,29,16,.74);
  border-bottom:1px solid rgba(42,29,16,.42);
}
.link-paper-headline {
  font-family:Georgia, var(--font-serif);
  font-size:1.04rem;
  font-weight:700;
  line-height:1.12;
}
.link-paper-layout {
  display:grid;
  grid-template-columns:1fr 72px;
  gap:9px;
  margin-top:12px;
  min-height:92px;
}
.link-paper-columns span {
  display:block;
  height:6px;
  margin-bottom:6px;
  background:rgba(35,24,14,.28);
  box-shadow:0 12px 0 rgba(35,24,14,.24), 0 24px 0 rgba(35,24,14,.20), 0 36px 0 rgba(35,24,14,.18), 0 48px 0 rgba(35,24,14,.16);
}
.link-paper-illustration {
  position:relative;
  border:1px solid rgba(35,24,14,.34);
  background:rgba(255,255,255,.17);
  overflow:hidden;
}
.link-paper-illustration span {
  position:absolute;
  inset:12px;
  border-bottom:2px solid rgba(35,24,14,.45);
  background:linear-gradient(135deg, transparent 50%, rgba(35,24,14,.32) 51%);
}
.link-science .link-paper-illustration span {
  inset:11px 24px 16px;
  border:none;
  clip-path:polygon(50% 0, 70% 58%, 100% 100%, 50% 78%, 0 100%, 30% 58%);
  background:linear-gradient(180deg, #e9f1ff, #335d82);
  box-shadow:0 0 10px rgba(40,80,140,.35);
}

/* 水晶屏 / 复古终端 */
.link-cover-screen,
.link-cover-tv {
  display:grid;
  place-items:center;
  padding:18px;
  background:
    radial-gradient(circle at 50% 18%, color-mix(in srgb, var(--card-accent) 18%, transparent), transparent 42%),
    linear-gradient(180deg, rgba(20,17,17,.98), rgba(8,8,13,.98));
}
.link-screen-bezel,
.link-tv-frame {
  position:relative;
  width:100%;
  height:178px;
  border:2px solid rgba(97,60,27,.86);
  background:#111;
  box-shadow:inset 0 0 0 5px rgba(0,0,0,.35), 0 10px 0 rgba(23,13,8,.85);
}
.link-screen-bezel {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.link-youtube-logo {
  width:86px;
  height:60px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:#d92525;
  box-shadow:0 0 30px rgba(255,49,49,.28);
}
.link-play-triangle {
  width:0;
  height:0;
  border-top:14px solid transparent;
  border-bottom:14px solid transparent;
  border-left:23px solid #fff;
  margin-left:5px;
}
.link-screen-title {
  margin-top:16px;
  font-family:Arial, sans-serif;
  font-size:1.24rem;
  font-weight:700;
  color:#fff;
}
.link-screen-controls {
  position:absolute;
  left:10px;
  right:10px;
  bottom:9px;
  display:flex;
  align-items:center;
  gap:7px;
  opacity:.48;
}
.link-screen-controls span { width:8px; height:8px; border:1px solid rgba(232,196,154,.65) }
.link-screen-controls i { flex:1; height:2px; background:rgba(232,196,154,.55) }

.link-tv-frame {
  height:184px;
  display:grid;
  grid-template-columns:1fr 30px;
  gap:7px;
  padding:8px;
  border-color:rgba(218,143,174,.75);
  background:linear-gradient(180deg, #6e4457, #2a1a23);
}
.link-tv-screen {
  display:grid;
  place-items:center;
  align-content:center;
  background:
    radial-gradient(circle at 50% 50%, rgba(251,114,183,.22), transparent 55%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 4px),
    #17132b;
  border:1px solid rgba(255,255,255,.15);
}
.link-bili-word {
  font-family:var(--font-serif);
  font-size:1.55rem;
  font-weight:700;
  color:#fb72b7;
  letter-spacing:.04em;
  text-shadow:0 0 18px rgba(251,114,183,.45);
}
.link-bili-face {
  color:#fb72b7;
  font-size:2.1rem;
  line-height:1;
}
.link-tv-knobs { display:flex; flex-direction:column; gap:10px; padding-top:8px }
.link-tv-knobs span { width:18px; height:18px; border-radius:50%; background:linear-gradient(135deg, #d49fae, #4c2e39); border:1px solid rgba(255,255,255,.2) }

/* 书籍 */
.link-cover-book {
  padding:20px 18px;
  background:
    radial-gradient(circle at 50% 58%, rgba(212,168,83,.12), transparent 30%),
    linear-gradient(90deg, rgba(255,255,255,.04) 0 6px, transparent 6px),
    linear-gradient(180deg, #1b1a25, #08090f);
}
.link-book-title {
  font-family:var(--font-serif);
  font-size:1.1rem;
  font-weight:700;
  color:#e6bd70;
  line-height:1.12;
}
.link-book-window {
  margin:28px auto 18px;
  width:86px;
  height:108px;
  border:1px solid rgba(212,168,83,.32);
  display:grid;
  place-items:center;
  background:linear-gradient(180deg, rgba(212,168,83,.04), rgba(0,0,0,.28));
}
.link-book-window span {
  width:58px;
  height:72px;
  border-radius:46% 46% 0 0;
  border:1px solid rgba(212,168,83,.44);
  background:radial-gradient(circle at 50% 80%, rgba(212,168,83,.78), transparent 22%), linear-gradient(180deg, transparent, rgba(212,168,83,.12));
  box-shadow:0 0 22px rgba(212,168,83,.18);
}
.link-book-kicker {
  color:rgba(232,224,216,.68);
  font-size:.68rem;
  line-height:1.45;
}

.links-hint {
  position:relative;
  width:min(540px, 90%);
  margin:20px auto 0;
  padding:11px 20px;
  text-align:center;
  color:var(--accent);
  font-family:var(--font-serif);
  font-size:.9rem;
  letter-spacing:.5px;
  border:1px solid rgba(212,168,83,.28);
  background:linear-gradient(90deg, transparent, rgba(212,168,83,.055), transparent);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.42);
}
.links-hint::before,
.links-hint::after {
  content:'✧';
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  color:rgba(212,168,83,.58);
}
.links-hint::before { left:12px }
.links-hint::after { right:12px }

/* ── 添加链接 Modal ── */
.link-modal { max-width:420px; width:90% }
.link-modal-body { display:flex; flex-direction:column; gap:16px; padding:20px 24px }
.link-field { display:flex; flex-direction:column; gap:6px }
.link-field span { font-size:.82rem; color:var(--text-secondary); font-weight:500 }
.link-field input {
  background:var(--bg-input);
  border:1px solid var(--border);
  border-radius:6px;
  padding:10px 12px;
  color:var(--text-primary);
  font-size:.9rem;
  outline:none;
  transition:border-color .2s ease;
}
.link-field input:focus { border-color:var(--accent) }
.link-field input::placeholder { color:var(--text-muted) }
.link-color-picker { display:flex; gap:8px; flex-wrap:wrap }
.color-swatch {
  width:28px;
  height:28px;
  border-radius:50%;
  border:2px solid transparent;
  cursor:pointer;
  transition:transform .15s ease, border-color .15s ease;
}
.color-swatch:hover { transform:scale(1.15) }
.color-swatch.active { border-color:#fff; box-shadow:0 0 0 2px var(--accent) }
.link-modal-footer {
  display:flex;
  justify-content:flex-end;
  gap:10px;
  padding:16px 24px 20px;
  border-top:1px solid var(--border);
}
.link-modal-cancel,
.link-modal-save {
  padding:8px 20px;
  border-radius:6px;
  border:none;
  font-size:.88rem;
  cursor:pointer;
  transition:background .2s ease;
}
.link-modal-cancel { background:var(--bg-input); color:var(--text-secondary); border:1px solid var(--border) }
.link-modal-cancel:hover { background:var(--bg-card-hover) }
.link-modal-save { background:var(--accent); color:var(--bg-primary); font-weight:600 }
.link-modal-save:hover { background:var(--accent-light) }

@media (max-width:1180px) {
  .links-grid { grid-template-columns:repeat(3, minmax(165px, 1fr)); gap:36px 38px; padding:38px 42px 50px }
}
@media (max-width:900px) {
  .links-grid { grid-template-columns:repeat(2, minmax(150px, 1fr)); gap:32px 28px; padding:34px 28px 44px }
  .link-card { --cover-h:220px }
}
@media (max-width:600px) {
  .links-add-btn { top:0; transform:none }
  .links-add-btn:hover { transform:scale(1.05) rotate(90deg) }
  .links-grid { grid-template-columns:1fr; gap:26px; padding:28px 24px 38px; min-height:auto }
  .link-card { --cover-h:235px; max-width:240px; width:100%; margin:0 auto }
  .link-card-delete { opacity:1 }
}