/* ============================================================
   texture.css — 铁影工坊 · 质感增强层 v1.0
   在 components.css 之后加载，只做加法：玻璃层 / 分层阴影 / 微渐变
   不改布局、不改尺寸、不改任何组件的结构假设
   ============================================================ */

/* ── 顶栏：半透明玻璃 ─────────────────────────────────────── */
.site-header{
  position:relative;
  z-index:60;
  background:var(--glass);
  -webkit-backdrop-filter:blur(14px) saturate(1.25);
  backdrop-filter:blur(14px) saturate(1.25);
  box-shadow:0 1px 0 var(--line), 0 8px 24px -18px rgba(0,0,0,.55);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .site-header{background:var(--bg)}
}

/* 粘性区块导航也走玻璃，滚动时内容不会硬切 */
.section-nav{
  background:var(--glass);
  -webkit-backdrop-filter:blur(12px) saturate(1.2);
  backdrop-filter:blur(12px) saturate(1.2);
  box-shadow:0 1px 0 var(--line);
}

/* ── 卡片：从"空心描边"变成有体积的面 ─────────────────────── */
.station-card{
  background:var(--card-bg);
  box-shadow:var(--card-shadow);
  border-color:var(--line);
  transition:border-color .25s var(--ease), transform .25s var(--ease),
             box-shadow .3s var(--ease);
}
.station-card:hover{
  box-shadow:var(--card-shadow-hover);
  border-color:var(--line-strong);
  transform:translateY(-3px);
}
/* 缩略图上的年份标签：跟着主题走，不再写死深色 */
.station-card .year{
  background:var(--glass);
  border-color:var(--line-strong);
  -webkit-backdrop-filter:blur(8px) saturate(1.2);
  backdrop-filter:blur(8px) saturate(1.2);
}

/* ── 下拉面板：玻璃 + 更柔的投影 ─────────────────────────── */
.tp-list{
  background:var(--glass);
  -webkit-backdrop-filter:blur(20px) saturate(1.3);
  backdrop-filter:blur(20px) saturate(1.3);
  box-shadow:0 2px 8px rgba(0,0,0,.22), 0 18px 44px -18px rgba(0,0,0,.55);
}

/* ── 筛选条与分段控件：薄玻璃底 ───────────────────────────── */
.filter-item{
  transition:color .2s var(--ease), background .2s var(--ease);
  border-radius:2px;
}
.filter-item:hover{background:var(--ghost)}
.filter-item[aria-pressed="true"]{background:var(--hl)}

.seg{
  background:var(--ghost);
  box-shadow:inset 0 0 0 1px var(--line);
}
.seg button,.seg a{transition:color .2s var(--ease), background .2s var(--ease)}
.seg button:hover,.seg a:hover{background:var(--ghost)}

/* ── 按钮：一点点纵向渐变 + 投影，不再纯平 ───────────────── */
.btn-solid{
  background-image:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0));
  box-shadow:0 1px 2px rgba(0,0,0,.20), 0 8px 20px -12px rgba(0,0,0,.55);
  transition:transform .2s var(--ease), box-shadow .25s var(--ease), filter .2s var(--ease);
}
.btn-solid:hover{
  transform:translateY(-1px);
  box-shadow:0 2px 6px rgba(0,0,0,.22), 0 14px 30px -14px rgba(0,0,0,.6);
  filter:brightness(1.06);
}
.btn-line{
  background:var(--ghost);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}
.btn-line:hover{background:var(--hl)}

/* ── 移动端菜单：投影按主题走 ─────────────────────────────── */
@media (max-width:1024px){
  .site-nav{
    background:var(--glass);
    -webkit-backdrop-filter:blur(20px) saturate(1.2);
    backdrop-filter:blur(20px) saturate(1.2);
    box-shadow:0 24px 48px -20px rgba(0,0,0,.55);
  }
}

/* ── 亮色主题（曙光白）微调：深色投影收敛 ─────────────────── */
:root[data-theme="dawn"] .site-header{
  box-shadow:0 1px 0 var(--line), 0 8px 24px -20px rgba(24,28,33,.22);
}
:root[data-theme="dawn"] .tp-list{
  box-shadow:0 2px 8px rgba(24,28,33,.08), 0 18px 44px -20px rgba(24,28,33,.22);
}
:root[data-theme="dawn"] .btn-solid{
  box-shadow:0 1px 2px rgba(24,28,33,.10), 0 8px 20px -12px rgba(24,28,33,.28);
}
:root[data-theme="dawn"] .station-card .thumb::after{
  box-shadow:inset 0 0 0 1px rgba(24,28,33,.06);
}

/* ── 语言切换：做成胶囊分段，不再挤成"中EN" ───────────────── */
.prefs #segLang{
  display:inline-flex;align-items:center;
  margin-left:12px;padding-left:0;
  border:1px solid var(--line-strong);border-radius:2px;
  overflow:hidden;
}
.prefs #segLang a{
  min-width:36px;padding:6px 11px;
  font-size:11.5px;letter-spacing:.06em;
  color:var(--text-mute);background:transparent;
}
.prefs #segLang a + a{border-left:1px solid var(--line-strong)}
.prefs #segLang a:hover{color:var(--text);background:var(--ghost)}
.prefs #segLang a[aria-current="true"]{
  color:var(--text);
  background:var(--hl);
}
.prefs #segLang a[aria-current="true"]::after{display:none}

/* 窄屏：配色下拉贴右边缘展开，避免越界 */
@media (max-width:1180px){
  .prefs .tp-list{right:0;left:auto}
}