/* ==========================================================================
   液态玻璃 · iOS 风格统一外观层（全站 + 管理后台）
   只做外观：不改结构、不动布局逻辑，本文件最后加载，负责盖掉默认配色
   ========================================================================== */

:root{
  --gl-blur: 22px;
  --gl-bg: rgba(255,255,255,.055);
  --gl-bg-2: rgba(255,255,255,.085);
  --gl-line: rgba(255,255,255,.13);
  --gl-line-2: rgba(255,255,255,.22);
  --gl-hi: rgba(255,255,255,.42);
  --gl-shadow: 0 18px 50px -18px rgba(0,0,0,.75), 0 2px 10px -4px rgba(0,0,0,.5);
  --gl-shadow-sm: 0 8px 24px -12px rgba(0,0,0,.7);
  --gl-r: 22px;
  --gl-r-sm: 14px;
  --gl-ease: cubic-bezier(.22,1,.36,1);
  --gl-tint: 34,211,238;
  --gl-gold: 250,204,21;
}
html[data-theme="light"]{
  --gl-bg: rgba(255,255,255,.62);
  --gl-bg-2: rgba(255,255,255,.78);
  --gl-line: rgba(12,26,44,.10);
  --gl-line-2: rgba(12,26,44,.16);
  --gl-hi: rgba(255,255,255,.9);
  --gl-shadow: 0 20px 45px -22px rgba(18,42,70,.38), 0 2px 10px -4px rgba(18,42,70,.16);
  --gl-shadow-sm: 0 10px 24px -16px rgba(18,42,70,.35);
}

/* ---------- 底噪：一层很淡的暖冷混合光，让玻璃有东西可以"透" ---------- */
body.lx-body{
  background-image:
    radial-gradient(1100px 620px at 12% -8%, rgba(56,189,248,.14), transparent 62%),
    radial-gradient(980px 560px at 92% 4%, rgba(167,139,250,.13), transparent 60%),
    radial-gradient(760px 520px at 50% 108%, rgba(45,212,191,.10), transparent 65%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: .1px;
}
html[data-theme="light"] body.lx-body{
  background-image:
    radial-gradient(1100px 620px at 10% -10%, rgba(56,189,248,.22), transparent 62%),
    radial-gradient(900px 520px at 94% 2%, rgba(167,139,250,.20), transparent 60%),
    radial-gradient(760px 520px at 50% 110%, rgba(45,212,191,.16), transparent 65%);
}

/* ---------- 通用玻璃基类 ---------- */
.card,
.px-card,
.px-hero,
.px-steps,
.admin .side,
.admin main > .card,
.sec-h,
.tip,
.modal-box,
.pop,
.drop-menu{
  -webkit-backdrop-filter: blur(var(--gl-blur)) saturate(180%);
  backdrop-filter: blur(var(--gl-blur)) saturate(180%);
}

.card{
  background:
    linear-gradient(180deg, var(--gl-bg-2), var(--gl-bg)) padding-box,
    linear-gradient(180deg, var(--gl-line-2), var(--gl-line)) border-box;
  border: 1px solid transparent;
  border-radius: var(--gl-r);
  box-shadow: var(--gl-shadow), inset 0 1px 0 var(--gl-hi), inset 0 -1px 0 rgba(0,0,0,.12);
  transition: transform .35s var(--gl-ease), box-shadow .35s var(--gl-ease), border-color .35s var(--gl-ease);
}
.card:hover{ box-shadow: var(--gl-shadow), 0 0 0 1px rgba(var(--gl-tint),.16), inset 0 1px 0 var(--gl-hi); }

/* ---------- 顶栏 / 导航 ---------- */
.topbar{
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  background: linear-gradient(180deg, rgba(8,12,20,.55), rgba(8,12,20,.28));
  border-bottom: 1px solid var(--gl-line);
}
html[data-theme="light"] .topbar{ background: linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.42)); }

.nav{
  -webkit-backdrop-filter: blur(26px) saturate(190%);
  backdrop-filter: blur(26px) saturate(190%);
  background: linear-gradient(180deg, rgba(10,16,26,.62), rgba(10,16,26,.34));
  border: 1px solid var(--gl-line);
  border-radius: 0 0 var(--gl-r) var(--gl-r);
  box-shadow: 0 14px 34px -22px rgba(0,0,0,.9), inset 0 1px 0 var(--gl-hi);
}
html[data-theme="light"] .nav{ background: linear-gradient(180deg, rgba(255,255,255,.8), rgba(255,255,255,.55)); }

.nav .menu a{
  border-radius: 12px;
  transition: background .25s var(--gl-ease), transform .25s var(--gl-ease), color .25s var(--gl-ease);
}
.nav .menu a:hover{ background: rgba(255,255,255,.08); transform: translateY(-1px); }
.nav .menu a.on{
  background: linear-gradient(180deg, rgba(var(--gl-tint),.22), rgba(var(--gl-tint),.08));
  border: 1px solid rgba(var(--gl-tint),.34);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 6px 18px -12px rgba(var(--gl-tint),.8);
}

/* ---------- 按钮：胶囊 + 高光 ---------- */
.btn{
  border-radius: 999px;
  padding: 9px 17px;
  font-weight: 600;
  letter-spacing: .2px;
  border: 1px solid var(--gl-line-2);
  background: linear-gradient(180deg, var(--gl-bg-2), var(--gl-bg));
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  box-shadow: inset 0 1px 0 var(--gl-hi), var(--gl-shadow-sm);
  transition: transform .18s var(--gl-ease), box-shadow .25s var(--gl-ease), filter .25s var(--gl-ease);
}
.btn:hover{ transform: translateY(-1px); filter: brightness(1.06); }
.btn:active{ transform: translateY(0) scale(.975); }
.btn.cy{
  background: linear-gradient(180deg, rgba(var(--gl-tint),.92), rgba(var(--gl-tint),.62));
  border-color: rgba(var(--gl-tint),.55);
  color: #03181c;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 10px 26px -14px rgba(var(--gl-tint),.95);
}
.btn.ghost{ background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.03)); }
.btn.sm{ padding: 6px 12px; font-size: 12.5px; }

/* ---------- 输入控件：内凹玻璃 ---------- */
.inp,
input[type=text], input[type=password], input[type=number], input[type=email], input[type=search], input[type=url],
select, textarea{
  border-radius: var(--gl-r-sm);
  border: 1px solid var(--gl-line);
  background: rgba(255,255,255,.05);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.06);
  transition: border-color .2s var(--gl-ease), box-shadow .2s var(--gl-ease), background .2s var(--gl-ease);
}
html[data-theme="light"] .inp,
html[data-theme="light"] input[type=text],
html[data-theme="light"] input[type=password],
html[data-theme="light"] input[type=number],
html[data-theme="light"] select,
html[data-theme="light"] textarea{ background: rgba(255,255,255,.85); box-shadow: inset 0 2px 6px rgba(18,42,70,.07); }

.inp:focus,
input:focus, select:focus, textarea:focus{
  outline: none;
  border-color: rgba(var(--gl-tint),.55);
  box-shadow: 0 0 0 4px rgba(var(--gl-tint),.14), inset 0 2px 6px rgba(0,0,0,.18);
}

/* ---------- 表格：悬浮玻璃行 ---------- */
table{ border-collapse: separate; border-spacing: 0; }
table thead th{
  font-weight: 600;
  color: var(--mu2, #93a4bd);
  background: rgba(255,255,255,.03);
  border-bottom: 1px solid var(--gl-line);
}
table tbody tr{ transition: background .2s var(--gl-ease); }
table tbody tr:hover{ background: rgba(255,255,255,.05); }
table tbody tr td{ border-bottom: 1px solid rgba(255,255,255,.05); }

/* ---------- 管理后台：悬浮侧栏 ---------- */
.admin{ gap: 18px; }
.admin .side{
  border-radius: var(--gl-r);
  border: 1px solid var(--gl-line);
  background: linear-gradient(180deg, var(--gl-bg-2), var(--gl-bg));
  box-shadow: var(--gl-shadow), inset 0 1px 0 var(--gl-hi);
  padding: 14px 12px;
  height: fit-content;
  position: sticky;
  top: 14px;
}
.admin .side .shead{
  padding: 10px 10px 14px;
  border-bottom: 1px solid var(--gl-line);
  margin-bottom: 10px;
}
.admin .side a{
  border-radius: 12px;
  padding: 9px 11px;
  margin: 2px 0;
  transition: background .22s var(--gl-ease), transform .22s var(--gl-ease), color .22s var(--gl-ease);
}
.admin .side a:hover{ background: rgba(255,255,255,.07); transform: translateX(2px); }
.admin .side a.on{
  background: linear-gradient(180deg, rgba(var(--gl-tint),.20), rgba(var(--gl-tint),.06));
  border: 1px solid rgba(var(--gl-tint),.30);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28);
  color: #d9fbff;
}
html[data-theme="light"] .admin .side a.on{ color: #0a6b7d; }

/* 后台主区卡片 */
.admin main > .card{ border-radius: var(--gl-r); }
.sec-h{ border-radius: var(--gl-r-sm); }

/* ---------- 提示条 ---------- */
.tip{
  border-radius: var(--gl-r-sm);
  border: 1px solid var(--gl-line);
  box-shadow: inset 0 1px 0 var(--gl-hi), var(--gl-shadow-sm);
}
.tip.ok{ background: linear-gradient(180deg, rgba(34,211,238,.16), rgba(34,211,238,.07)); border-color: rgba(34,211,238,.34); }
.tip.bad{ background: linear-gradient(180deg, rgba(248,113,113,.16), rgba(248,113,113,.07)); border-color: rgba(248,113,113,.34); }

/* ---------- 代理节点页（前台）也吃这套 ---------- */
.px-hero{
  border-radius: 26px;
  border: 1px solid var(--gl-line);
  background:
    radial-gradient(600px 240px at 8% -20%, rgba(var(--gl-tint),.24), transparent 70%),
    radial-gradient(520px 240px at 96% 0%, rgba(167,139,250,.22), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  box-shadow: var(--gl-shadow), inset 0 1px 0 var(--gl-hi);
  position: relative;
  overflow: hidden;
}
.px-hero::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.10) 46%, transparent 62%);
  transform: translateX(-60%);
  animation: gl-sheen 9s var(--gl-ease) infinite;
  pointer-events: none;
}
@keyframes gl-sheen{ 0%,65%{ transform: translateX(-70%);} 100%{ transform: translateX(90%);} }

.px-card{
  border-radius: 20px;
  border: 1px solid var(--gl-line);
  background: linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.035));
  box-shadow: var(--gl-shadow-sm), inset 0 1px 0 var(--gl-hi);
  transition: transform .35s var(--gl-ease), box-shadow .35s var(--gl-ease);
}
.px-card:hover{ transform: translateY(-2px); box-shadow: var(--gl-shadow), 0 0 0 1px rgba(var(--gl-tint),.14); }
.px-card.vip{
  border-color: rgba(var(--gl-gold),.30);
  background:
    radial-gradient(420px 200px at 100% -10%, rgba(var(--gl-gold),.16), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.035));
}

/* 玻璃小标签 */
.px-tag, .badge, .chip{
  border-radius: 999px;
  border: 1px solid var(--gl-line-2);
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
  box-shadow: inset 0 1px 0 var(--gl-hi);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* ---------- 滚动条 / 选中 ---------- */
::-webkit-scrollbar{ width: 10px; height: 10px; }
::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.08));
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,.28); background-clip: padding-box; }
::selection{ background: rgba(var(--gl-tint),.30); }

/* ---------- 后台内部小卡（探针式信息块） ---------- */
.gl-stat{
  border-radius: 18px;
  border: 1px solid var(--gl-line);
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.03));
  box-shadow: inset 0 1px 0 var(--gl-hi), var(--gl-shadow-sm);
  padding: 14px 15px;
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  backdrop-filter: blur(16px) saturate(170%);
}
.gl-stat .k{ font-size: 12.5px; color: var(--mu2, #93a4bd); }
.gl-stat .v{ font-size: 22px; font-weight: 700; letter-spacing: -.4px; }

/* 分段控件（iOS segmented） */
.gl-seg{
  display: inline-flex;
  padding: 4px;
  gap: 4px;
  border-radius: 999px;
  border: 1px solid var(--gl-line);
  background: rgba(255,255,255,.05);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.2);
}
.gl-seg a{
  padding: 7px 15px;
  border-radius: 999px;
  font-size: 13px;
  color: var(--mu2, #93a4bd);
  transition: all .25s var(--gl-ease);
}
.gl-seg a:hover{ color: inherit; background: rgba(255,255,255,.06); }
.gl-seg a.on{
  background: linear-gradient(180deg, rgba(var(--gl-tint),.92), rgba(var(--gl-tint),.6));
  color: #04181c;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 8px 18px -12px rgba(var(--gl-tint),.9);
}

/* 系统偏好：减少动态 */
@media (prefers-reduced-motion: reduce){
  .px-hero::after{ animation: none; }
  .card, .btn, .px-card, .admin .side a{ transition: none; }
}

/* 手机上把玻璃调薄一点，省性能 */
@media (max-width: 720px){
  :root{ --gl-blur: 16px; --gl-r: 18px; }
  .card{ border-radius: 18px; }
  .admin .side{ position: static; }
}