/* ==========================================================================
   林汐 · iOS 液态玻璃外观层 v2（Liquid Glass）
   --------------------------------------------------------------------------
   · 只做视觉：颜色 / 模糊 / 高光 / 圆角 / 动效
   · 不改任何结构、不动布局尺寸逻辑，出问题删这个文件的 <link> 即可全站回退
   · 加载顺序必须在 glass.css 之后
   ========================================================================== */

:root{
  --ios-blur: 30px;
  --ios-sat: 180%;
  --ios-r: 26px;
  --ios-r-sm: 16px;
  --ios-r-xs: 12px;

  /* 玻璃本体 */
  --ios-glass: rgba(255,255,255,.068);
  --ios-glass-2: rgba(255,255,255,.10);
  --ios-glass-3: rgba(255,255,255,.145);
  --ios-tint: rgba(120,190,255,.055);

  /* 描边：上亮下暗，模拟光线从上方掠过玻璃边缘 */
  --ios-edge-top: rgba(255,255,255,.42);
  --ios-edge-bot: rgba(255,255,255,.055);
  --ios-hair: rgba(255,255,255,.13);

  /* 阴影：一层柔光 + 一层实影，iOS 那种厚玻璃才有的分层感 */
  --ios-shadow:
    0 1px 0 0 rgba(255,255,255,.10) inset,
    0 -1px 0 0 rgba(0,0,0,.20) inset,
    0 24px 60px -28px rgba(0,0,0,.85),
    0 8px 24px -14px rgba(0,0,0,.65);
  --ios-shadow-lift:
    0 1px 0 0 rgba(255,255,255,.16) inset,
    0 -1px 0 0 rgba(0,0,0,.22) inset,
    0 34px 80px -30px rgba(0,0,0,.90),
    0 12px 30px -14px rgba(0,0,0,.70);

  --ios-ease: cubic-bezier(.22,1,.36,1);
  --ios-sheen: rgba(255,255,255,.16);
}

html[data-theme="light"]{
  --ios-glass: rgba(255,255,255,.66);
  --ios-glass-2: rgba(255,255,255,.80);
  --ios-glass-3: rgba(255,255,255,.92);
  --ios-tint: rgba(120,190,255,.10);
  --ios-edge-top: rgba(255,255,255,.98);
  --ios-edge-bot: rgba(12,26,44,.06);
  --ios-hair: rgba(12,26,44,.10);
  --ios-shadow:
    0 1px 0 0 rgba(255,255,255,.95) inset,
    0 20px 44px -26px rgba(18,42,70,.34),
    0 6px 18px -12px rgba(18,42,70,.20);
  --ios-shadow-lift:
    0 1px 0 0 rgba(255,255,255,1) inset,
    0 28px 60px -26px rgba(18,42,70,.42),
    0 10px 26px -12px rgba(18,42,70,.24);
}

/* ------------------------------------------------------------------ 背景光 */
/* 在原有底色上再叠三层柔光，玻璃才有东西可以透，不然 blur 出来是一块死灰 */
body.lx-body,
body.gl-body{
  background-image:
    radial-gradient(1200px 700px at 8% -12%, rgba(56,189,248,.20), transparent 60%),
    radial-gradient(1000px 620px at 94% -4%, rgba(167,139,250,.18), transparent 62%),
    radial-gradient(820px 560px at 50% 106%, rgba(45,212,191,.13), transparent 66%),
    radial-gradient(680px 420px at 78% 62%, rgba(244,114,182,.085), transparent 70%) !important;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

html[data-theme="light"] body.lx-body,
html[data-theme="light"] body.gl-body{
  background-image:
    radial-gradient(1200px 700px at 6% -14%, rgba(88,176,255,.30), transparent 62%),
    radial-gradient(1000px 620px at 96% 0%, rgba(180,150,255,.26), transparent 64%),
    radial-gradient(820px 560px at 46% 108%, rgba(80,220,200,.20), transparent 66%) !important;
}

/* ------------------------------------------------------------------ 玻璃基类 */
.card,
.px-card,
.gl-card,
.menu-card,
.stat-card,
.admin main > .card,
.admin main > section,
.admin .side,
.drop-menu,
.topbar,
.nav,
table,
.px-hero,
.panel,
.list-item,
.box{
  background-color: var(--ios-glass) !important;
  background-image:
    linear-gradient(150deg, rgba(255,255,255,.14), rgba(255,255,255,.035) 34%, rgba(255,255,255,.015) 64%, rgba(255,255,255,.085)) !important;
  -webkit-backdrop-filter: blur(var(--ios-blur)) saturate(var(--ios-sat));
  backdrop-filter: blur(var(--ios-blur)) saturate(var(--ios-sat));
  border: 1px solid var(--ios-hair) !important;
  box-shadow: var(--ios-shadow);
  transition: transform .38s var(--ios-ease), box-shadow .38s var(--ios-ease),
              border-color .3s ease, background-color .3s ease;
}

/* 抬起来的时候边缘光更明显，像手指按下去玻璃微微凸起 */
.card:hover,
.px-card:hover,
.gl-card:hover,
.menu-card:hover,
.stat-card:hover{
  transform: translateY(-3px);
  border-color: rgba(255,255,255,.26) !important;
  box-shadow: var(--ios-shadow-lift);
  background-color: var(--ios-glass-2) !important;
}
html[data-theme="light"] .card:hover,
html[data-theme="light"] .px-card:hover,
html[data-theme="light"] .gl-card:hover{
  border-color: rgba(255,255,255,.95) !important;
}

/* ------------------------------------------------------------------ 顶栏 / 导航：悬浮胶囊 */
.topbar{
  border-radius: 0 0 22px 22px;
  border-top: 0 !important;
}
html[data-theme="light"] .topbar{ border-top: 0 !important; }

.nav{
  border-radius: 20px;
  margin: 8px auto 14px;
  padding: 6px 10px;
  max-width: calc(100% - 20px);
}

.nav .menu a{
  border-radius: 12px;
  transition: background .25s ease, transform .3s var(--ios-ease), color .2s ease;
}
.nav .menu a:hover{ background: rgba(255,255,255,.10); transform: translateY(-1px); }
.nav .menu a.on{
  background: linear-gradient(160deg, rgba(255,255,255,.30), rgba(255,255,255,.08));
  box-shadow: 0 1px 0 rgba(255,255,255,.45) inset, 0 6px 16px -10px rgba(0,0,0,.6);
}
html[data-theme="light"] .nav .menu a:hover{ background: rgba(255,255,255,.7); }

.drop-menu{
  border-radius: 20px;
  padding: 10px;
  box-shadow: var(--ios-shadow-lift);
}
.drop-menu a{
  border-radius: 12px;
  transition: background .2s ease, transform .25s var(--ios-ease);
}
.drop-menu a:hover{ background: rgba(255,255,255,.10); transform: translateX(2px); }
html[data-theme="light"] .drop-menu a:hover{ background: rgba(120,170,230,.14); }

/* ------------------------------------------------------------------ 按钮：玻璃胶囊 */
.btn,
button.btn,
a.btn,
input[type="submit"],
.px-acts .btn{
  border-radius: 999px !important;
  background-image: linear-gradient(160deg, rgba(255,255,255,.26), rgba(255,255,255,.06)) !important;
  background-color: var(--ios-glass-2) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  backdrop-filter: blur(18px) saturate(170%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.45) inset,
    0 -1px 0 rgba(0,0,0,.14) inset,
    0 10px 24px -16px rgba(0,0,0,.8);
  transition: transform .28s var(--ios-ease), box-shadow .28s var(--ios-ease),
              background-color .25s ease, filter .25s ease;
  will-change: transform;
}
.btn:hover,
button.btn:hover,
a.btn:hover,
input[type="submit"]:hover{
  transform: translateY(-2px);
  background-color: var(--ios-glass-3) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.55) inset,
    0 -1px 0 rgba(0,0,0,.14) inset,
    0 18px 34px -18px rgba(0,0,0,.85);
}
.btn:active,
button.btn:active,
a.btn:active,
input[type="submit"]:active{
  transform: translateY(0) scale(.985);
  box-shadow: 0 1px 0 rgba(255,255,255,.30) inset, 0 4px 12px -8px rgba(0,0,0,.7);
}
.btn.cy{
  background-image: linear-gradient(160deg, rgba(34,211,238,.55), rgba(34,211,238,.18)) !important;
  border-color: rgba(120,240,255,.48) !important;
  color: #041a1e !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.28);
}
html[data-theme="light"] .btn.cy{ color: #04303a !important; }
.btn.gold,
.btn.gold-ish{
  background-image: linear-gradient(160deg, rgba(250,204,21,.55), rgba(250,204,21,.18)) !important;
  border-color: rgba(255,224,130,.5) !important;
  color: #1b1200 !important;
}
.btn.ghost{
  background-image: none !important;
  background-color: rgba(255,255,255,.045) !important;
}
html[data-theme="light"] .btn,
html[data-theme="light"] button.btn,
html[data-theme="light"] a.btn{
  background-color: rgba(255,255,255,.78) !important;
  border-color: rgba(255,255,255,.95) !important;
}

/* ------------------------------------------------------------------ 表单：内嵌玻璃 */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
select,
textarea,
.input,
.form-control{
  border-radius: var(--ios-r-xs) !important;
  background-color: rgba(255,255,255,.055) !important;
  background-image: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02)) !important;
  border: 1px solid var(--ios-hair) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.20) inset,
    0 2px 6px -4px rgba(0,0,0,.6) inset;
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  backdrop-filter: blur(12px) saturate(150%);
  transition: box-shadow .28s ease, border-color .28s ease, background-color .28s ease;
}
html[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
html[data-theme="light"] select,
html[data-theme="light"] textarea{
  background-color: rgba(255,255,255,.86) !important;
  border-color: rgba(12,26,44,.12) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.95) inset, 0 2px 6px -5px rgba(18,42,70,.4) inset;
}
input:focus,
select:focus,
textarea:focus{
  outline: none !important;
  border-color: rgba(120,225,255,.62) !important;
  box-shadow:
    0 0 0 3px rgba(34,211,238,.16),
    0 1px 0 rgba(255,255,255,.28) inset !important;
}

/* ------------------------------------------------------------------ 表格 */
table{
  border-radius: var(--ios-r-sm);
  overflow: hidden;
  border-collapse: separate;
  border-spacing: 0;
}
table thead th{
  background-color: rgba(255,255,255,.075) !important;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  font-weight: 600;
  letter-spacing: .3px;
}
table tbody tr{ transition: background .2s ease; }
table tbody tr:hover{ background: rgba(255,255,255,.055); }
html[data-theme="light"] table tbody tr:hover{ background: rgba(120,170,230,.10); }

/* ------------------------------------------------------------------ 后台侧栏 */
.admin .side{
  border-radius: 0 26px 26px 0;
  border-left: 0 !important;
  box-shadow: var(--ios-shadow);
}
.admin .side a{
  border-radius: 12px;
  transition: background .22s ease, transform .26s var(--ios-ease), color .2s ease;
}
.admin .side a:hover{ background: rgba(255,255,255,.085); transform: translateX(3px); }
.admin .side a.on{
  background: linear-gradient(160deg, rgba(34,211,238,.26), rgba(34,211,238,.07)) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.30) inset, 0 8px 20px -14px rgba(0,0,0,.8);
  border: 1px solid rgba(120,240,255,.22);
}
.admin .side .shead{
  border-bottom: 1px solid var(--ios-hair);
  letter-spacing: .5px;
}

/* ------------------------------------------------------------------ 徽章 / 标签 */
.badge,
.chip,
.px-tag,
.tag,
.gl-stat{
  border-radius: 999px !important;
  background-image: linear-gradient(160deg, rgba(255,255,255,.20), rgba(255,255,255,.05)) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.30) inset;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.px-tag.gold,
.badge.gold,
.chip.gold{
  background-image: linear-gradient(160deg, rgba(250,204,21,.42), rgba(250,204,21,.10)) !important;
  border-color: rgba(255,224,130,.44) !important;
  color: #ffe9a3 !important;
}
html[data-theme="light"] .px-tag.gold,
html[data-theme="light"] .badge.gold{ color: #6b4a00 !important; }

/* ------------------------------------------------------------------ 提示条 */
.tip{
  border-radius: var(--ios-r-sm) !important;
  background-color: rgba(255,255,255,.06) !important;
  background-image: linear-gradient(160deg, rgba(255,255,255,.12), rgba(255,255,255,.03)) !important;
  border: 1px solid var(--ios-hair) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.24) inset;
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
}

/* ------------------------------------------------------------------ 分段控件 / 选项卡 */
.gl-seg{
  border-radius: 999px;
  background-color: rgba(255,255,255,.055);
  border: 1px solid var(--ios-hair);
  box-shadow: 0 1px 0 rgba(255,255,255,.20) inset;
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  backdrop-filter: blur(18px) saturate(170%);
  padding: 4px;
}
.gl-seg a{
  border-radius: 999px;
  transition: background .25s var(--ios-ease), box-shadow .25s var(--ios-ease), color .2s ease;
}
.gl-seg a.on{
  background-image: linear-gradient(160deg, rgba(255,255,255,.34), rgba(255,255,255,.10)) !important;
  color: #fff !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 8px 18px -12px rgba(0,0,0,.9);
}
html[data-theme="light"] .gl-seg a.on{
  background-image: linear-gradient(160deg, #fff, #eef5ff) !important;
  color: #0b2136 !important;
}

/* 通用 tab 条（后台/工具箱里的 a 标签页） */
.px-tabs a,
.tabs a,
.tab-bar a{
  border-radius: 999px !important;
  transition: background .22s ease, transform .26s var(--ios-ease), border-color .22s ease;
}
.px-tabs a:hover,
.tabs a:hover{ transform: translateY(-1px); background: rgba(255,255,255,.09); }
.px-tabs a.on,
.tabs a.on{
  background-image: linear-gradient(160deg, rgba(255,255,255,.28), rgba(255,255,255,.08)) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.42) inset;
}

/* ------------------------------------------------------------------ 滚动条 */
::-webkit-scrollbar{ width: 10px; height: 10px; }
::-webkit-scrollbar-track{ background: transparent; }
::-webkit-scrollbar-thumb{
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,.10));
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,.16));
  background-clip: padding-box;
}

/* ------------------------------------------------------------------ 动效细节 */
@keyframes ios-float-in{
  from{ opacity: 0; transform: translateY(10px) scale(.985); }
  to  { opacity: 1; transform: translateY(0) scale(1); }
}
.card,
.px-card,
.gl-card,
.admin main > .card{
  animation: ios-float-in .5s var(--ios-ease) both;
}
/* 只给首屏几个元素加，避免长列表一路闪 */
.card:nth-child(n+13){ animation-delay: .02s; }

@keyframes ios-hi{
  0%,100%{ box-shadow: 0 1px 0 rgba(255,255,255,.42) inset, var(--ios-shadow); }
  50%    { box-shadow: 0 1px 0 rgba(255,255,255,.62) inset, var(--ios-shadow); }
}

/* 首页大 banner / hero：加一层缓慢流动的高光 */
.px-hero,
.hero,
.banner{
  border-radius: var(--ios-r);
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce){
  .card, .px-card, .gl-card, .admin main > .card{ animation: none !important; }
  .card:hover, .px-card:hover, .gl-card:hover, .btn:hover{ transform: none !important; }
}

/* ------------------------------------------------------------------ 移动端 */
@media (max-width: 720px){
  :root{ --ios-blur: 22px; --ios-r: 20px; --ios-r-sm: 14px; }
  .card, .px-card, .gl-card{ border-radius: var(--ios-r) !important; }
  .nav{ margin: 6px 8px 12px; padding: 5px 8px; border-radius: 18px; }
  .btn, a.btn, button.btn{ padding-left: 15px; padding-right: 15px; }
  /* 底部安全区，iPhone 刘海屏不被挡住 */
  body.lx-body{ padding-bottom: env(safe-area-inset-bottom); }
}

/* 支持 backdrop-filter 差的老内核：退回不透明一点，别糊成一团 */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  .card, .px-card, .gl-card, .topbar, .nav, .drop-menu, table,
  .admin .side, .admin main > .card{
    background-color: rgba(14,20,32,.90) !important;
  }
  html[data-theme="light"] .card,
  html[data-theme="light"] .px-card,
  html[data-theme="light"] .gl-card,
  html[data-theme="light"] .topbar,
  html[data-theme="light"] .nav,
  html[data-theme="light"] table,
  html[data-theme="light"] .admin .side{ background-color: rgba(252,253,255,.96) !important; }
}

/* ------------------------------------------------------------------ 关掉 */
html[data-noglass="1"] body.lx-body{
  background-image: none !important;
}