/* koichi 相册大图浏览 · 液态玻璃（2026-11-01）：相册（/photos）和文章里点开图片时的 Fancybox 浏览界面，改成与网站一致的液态玻璃——
   背景：原来主题给的底色变量写错（缺 hsl()）、实际是透明，只有模糊，浅色模式下浅灰图标压在浅色背景上看不清；
         现在浅色模式是带一点淡紫的磨砂白，深色模式是深色磨砂，图标颜色随之对比清楚。
   工具栏：三组按钮各是一条玻璃胶囊（与网站按钮排的玻璃底槽相同），鼠标在按钮之间移动时由液态玻璃脚本（v9f）画出流动的玻璃；
   左右箭头：单独的玻璃胶囊；缩略图条：一块玻璃托盘，当前这张用强调色描边 + 玻璃高光；大图四角轻微圆角。
   「弱视觉效果」下去掉所有模糊，改用更不透明的底色。只改外观，不改浏览功能。 */
.fancybox__container{--kpf-ink:#2A2350;--kpf-acc:#0a9e98;--kpf-glass:rgba(255,255,255,.38);--kpf-edge:rgba(0,0,0,.07);--kpf-hi:rgba(255,255,255,.85);--kpf-shadow:rgba(40,40,80,.22)}
html.dark .fancybox__container{--kpf-ink:#ECE8FF;--kpf-acc:#81d8d0;--kpf-glass:rgba(255,255,255,.07);--kpf-edge:rgba(255,255,255,.14);--kpf-hi:rgba(255,255,255,.16);--kpf-shadow:rgba(0,0,0,.6)}

/* 背景 */
.fancybox__container .fancybox__backdrop{background:rgba(244,242,250,.6)!important;-webkit-backdrop-filter:blur(28px) saturate(1.5)!important;backdrop-filter:blur(28px) saturate(1.5)!important}
html.dark .fancybox__container .fancybox__backdrop{background:rgba(14,13,22,.62)!important}

/* 工具栏：玻璃胶囊 */
.fancybox__container .fancybox__toolbar__column{padding:3px!important;gap:2px;background:var(--kpf-glass)!important;
  -webkit-backdrop-filter:blur(14px) saturate(1.8)!important;backdrop-filter:blur(14px) saturate(1.8)!important;
  box-shadow:inset 0 0 0 .6px var(--kpf-edge),inset 0 1px 1px var(--kpf-hi),0 6px 20px -8px var(--kpf-shadow)!important}
.fancybox__container .fancybox__toolbar .f-button,.fancybox__container .fancybox__nav .f-button{--f-button-color:var(--kpf-ink);--f-button-hover-color:var(--kpf-acc);--f-button-hover-bg:transparent;--f-button-active-bg:transparent;color:var(--kpf-ink)}
.fancybox__container .fancybox__toolbar .f-button:hover{color:var(--kpf-acc)}
.fancybox__container .fancybox__infobar{color:var(--kpf-ink)!important;font-family:var(--kx-ui,inherit);font-variant-numeric:tabular-nums;opacity:.85}

/* 左右箭头：单独的玻璃胶囊（悬浮在图片上，玻璃稍厚一点保证看得清） */
.fancybox__container .fancybox__nav .f-button{--f-button-width:2.75em;--f-button-height:2.75em;background:rgba(255,255,255,.42)!important;
  -webkit-backdrop-filter:blur(12px) saturate(1.8)!important;backdrop-filter:blur(12px) saturate(1.8)!important;
  box-shadow:inset 0 0 0 .6px var(--kpf-edge),inset 0 1px 1px var(--kpf-hi),inset 3px 0 5px -3px rgba(70,150,255,.45),inset -3px 0 5px -3px rgba(255,190,60,.4),0 6px 18px -6px var(--kpf-shadow)!important;
  transition:transform .25s cubic-bezier(.3,1.6,.5,1),color .2s}
html.dark .fancybox__container .fancybox__nav .f-button{background:rgba(30,28,44,.45)!important}
.fancybox__container .fancybox__nav .f-button:hover{transform:translateY(-50%) scale(1.08)}
.fancybox__container .fancybox__nav .f-button:active{transform:translateY(-50%) scale(.94)}

/* 大图：轻微圆角 + 柔和投影 */
.fancybox__container .fancybox__slide.has-image .fancybox__content{border-radius:14px;overflow:hidden;box-shadow:0 18px 50px -20px rgba(0,0,0,.45)}

/* 缩略图条：玻璃托盘 */
.fancybox__container .fancybox__footer{background:var(--kpf-glass)!important;-webkit-backdrop-filter:blur(16px) saturate(1.7)!important;backdrop-filter:blur(16px) saturate(1.7)!important;
  box-shadow:inset 0 0 0 .6px var(--kpf-edge),inset 0 1px 1px var(--kpf-hi),0 10px 30px -12px var(--kpf-shadow)!important;border-radius:22px!important;color:var(--kpf-ink)}
.fancybox__container .f-thumbs{--f-thumb-border-radius:10px;--f-thumb-outline:0;--f-thumb-opacity:.78;--f-thumb-hover-opacity:1;--f-thumb-selected-opacity:1}
.fancybox__container .f-thumbs .f-thumbs__slide__button{position:relative;border-radius:10px;overflow:hidden;transition:transform .25s cubic-bezier(.3,1.6,.5,1),opacity .2s}
.fancybox__container .f-thumbs .f-thumbs__slide__button:hover{transform:translateY(-2px)}
.fancybox__container .f-thumbs .f-thumbs__slide__button::after{content:"";position:absolute;inset:0;z-index:2;border-radius:10px;pointer-events:none;border:0 solid transparent!important;background:none!important;transition:box-shadow .25s}
.fancybox__container .f-thumbs .f-thumbs__slide.is-nav-selected .f-thumbs__slide__button::after{box-shadow:inset 0 0 0 2px var(--kpf-acc),inset 0 0 0 3.5px rgba(255,255,255,.75)}
.fancybox__container .fancybox__footer{margin:0 10px 10px!important}

/* 弱视觉效果 / 减少动态效果 */
html.kx-lite .fancybox__container .fancybox__backdrop{background:rgba(244,242,250,.94)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html.kx-lite.dark .fancybox__container .fancybox__backdrop{background:rgba(14,13,22,.94)!important}
html.kx-lite .fancybox__container :is(.fancybox__toolbar__column,.fancybox__footer,.fancybox__nav .f-button){-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html.kx-lite .fancybox__container :is(.fancybox__toolbar__column,.fancybox__footer){background:rgba(255,255,255,.9)!important}
html.kx-lite.dark .fancybox__container :is(.fancybox__toolbar__column,.fancybox__footer){background:rgba(32,30,44,.92)!important}
@media (prefers-reduced-motion:reduce){.fancybox__container :is(.f-button,.f-thumbs__slide__button){transition:none!important}}
/* 与液态玻璃脚本的配合：工具栏里单独一个的按钮（如「幻灯片」）不再另套一层胶囊；左右箭头用更厚一点的玻璃，压在亮图上也看得清 */
html .fancybox__container .fancybox__toolbar .f-button.kg.kg-solo{background-color:transparent!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html .fancybox__container .fancybox__nav .f-button.kg.kg{background-color:rgba(255,255,255,.42)!important;-webkit-backdrop-filter:blur(12px) saturate(1.8)!important;backdrop-filter:blur(12px) saturate(1.8)!important;
  box-shadow:inset 0 0 0 .6px var(--kpf-edge),inset 0 1px 1px var(--kpf-hi),inset 3px 0 5px -3px rgba(70,150,255,.45),inset -3px 0 5px -3px rgba(255,190,60,.4),0 6px 18px -6px var(--kpf-shadow)!important}
html.dark .fancybox__container .fancybox__nav .f-button.kg.kg{background-color:rgba(30,28,44,.45)!important}
html.kx-lite .fancybox__container .fancybox__nav .f-button.kg.kg{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background-color:rgba(255,255,255,.9)!important}
html.kx-lite.dark .fancybox__container .fancybox__nav .f-button.kg.kg{background-color:rgba(32,30,44,.92)!important}
/* c 版：缩略图条也用液态玻璃——缩略图保持 10px 圆角（液态玻璃默认把一排按钮改成胶囊形），不另加玻璃底槽（托盘本身已是玻璃） */
html .fancybox__container .f-thumbs__slide__button.kg.kg{border-radius:10px!important}
html .fancybox__container .fancybox__thumbs .kg-track{background:none!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}