/* ============================================================
   链接卡片站 · 液态玻璃 (Liquid Glass)
   思路：背景铺四团彩色流体光斑 + 细噪点，玻璃层才有东西可透。
        卡片刻出真实边缘（渐变描边）、顶光、多层投影。
   ============================================================ */
:root{
  /* ── 背景底色 + 四团光斑 ── */
  --base:#e9eefb;
  --g1:rgba(96,140,255,.90);
  --g2:rgba(178,120,255,.85);
  --g3:rgba(80,220,200,.75);
  --g4:rgba(255,150,205,.75);

  /* ── 玻璃透明度梯度（四个停靠点，深浅模式各自给值） ── */
  --gl-a:.62; --gl-b:.28; --gl-c:.20; --gl-d:.46;   /* 卡片 */
  --bg-a:.58; --bg-b:.26; --bg-c:.38;               /* 按钮 */

  /* ── 边缘 / 高光 ── */
  --edge-1:rgba(255,255,255,.95);
  --edge-2:rgba(255,255,255,.18);
  --edge-3:rgba(255,255,255,.06);
  --edge-4:rgba(255,255,255,.55);
  --edge-5:rgba(255,255,255,.90);
  --hi-1:rgba(255,255,255,.92);
  --hi-2:rgba(255,255,255,.22);

  /* ── 文字 ── */
  --ink:#12141a;
  --ink-soft:rgba(18,20,26,.58);
  --ink-faint:rgba(18,20,26,.34);

  /* ── 投影：大投影拉开层次，小投影贴边 ── */
  --sh-card:0 34px 68px -24px rgba(18,26,58,.36), 0 12px 30px -16px rgba(18,26,58,.22);
  --sh-btn:0 12px 26px -14px rgba(18,26,58,.30), 0 3px 10px -6px rgba(18,26,58,.16);
  --sh-sheet:0 -18px 56px -18px rgba(18,26,58,.34);

  --radius-card:32px; --radius-btn:20px; --radius-sm:15px;
  --blue:#0a84ff; --green:#1fbd52; --purple:#a855f7; --orange:#ff9500;
  --red:#ff3b30; --teal:#0fb5c9; --indigo:#5856d6; --pink:#ff2d55;
  --ease:cubic-bezier(.34,1.3,.64,1);
}

/* ══════════════ 六套光色方案（浅色） ══════════════
   故意都做成「多色融合」而不是单色 —— 单色背景配玻璃一定廉价。 */
[data-theme="horizon"]{--base:#fdf1e9;
  --g1:rgba(255,140,70,.90);--g2:rgba(255,90,130,.80);--g3:rgba(180,110,255,.75);--g4:rgba(255,205,90,.85)}
[data-theme="abyss"]{--base:#e7eefa;
  --g1:rgba(60,110,255,.85);--g2:rgba(30,190,215,.80);--g3:rgba(100,90,255,.80);--g4:rgba(60,210,170,.70)}
[data-theme="blossom"]{--base:#fdeff6;
  --g1:rgba(255,150,195,.85);--g2:rgba(200,150,255,.80);--g3:rgba(255,185,155,.80);--g4:rgba(150,195,255,.75)}
[data-theme="frost"]{--base:#eaf6f3;
  --g1:rgba(70,215,175,.85);--g2:rgba(100,195,245,.80);--g3:rgba(165,230,160,.75);--g4:rgba(120,165,255,.75)}
[data-theme="neon"]{--base:#eeeefc;
  --g1:rgba(120,90,255,.88);--g2:rgba(255,85,200,.80);--g3:rgba(70,205,255,.80);--g4:rgba(255,140,90,.78)}

@media (prefers-color-scheme:dark){
  :root{
    --base:#080a11;
    --g1:rgba(80,120,255,.58);
    --g2:rgba(152,92,255,.52);
    --g3:rgba(45,208,186,.46);
    --g4:rgba(232,102,182,.46);

    --gl-a:.18; --gl-b:.07; --gl-c:.05; --gl-d:.14;
    --bg-a:.17; --bg-b:.07; --bg-c:.12;

    --edge-1:rgba(255,255,255,.34);
    --edge-2:rgba(255,255,255,.06);
    --edge-3:rgba(255,255,255,.02);
    --edge-4:rgba(255,255,255,.16);
    --edge-5:rgba(255,255,255,.30);
    --hi-1:rgba(255,255,255,.22);
    --hi-2:rgba(255,255,255,.05);

    --ink:#f3f5fa;
    --ink-soft:rgba(240,244,250,.60);
    --ink-faint:rgba(240,244,250,.34);

    --sh-card:0 34px 68px -24px rgba(0,0,0,.72), 0 12px 30px -16px rgba(0,0,0,.5);
    --sh-btn:0 12px 26px -14px rgba(0,0,0,.6), 0 3px 10px -6px rgba(0,0,0,.4);
    --sh-sheet:0 -18px 56px -18px rgba(0,0,0,.7);
  }
  [data-theme="horizon"]{--base:#120b08;
    --g1:rgba(238,108,42,.58);--g2:rgba(238,64,106,.50);--g3:rgba(148,76,238,.50);--g4:rgba(228,168,54,.48)}
  [data-theme="abyss"]{--base:#060b17;
    --g1:rgba(44,96,246,.60);--g2:rgba(22,170,200,.50);--g3:rgba(86,74,238,.54);--g4:rgba(32,190,152,.45)}
  [data-theme="blossom"]{--base:#12090f;
    --g1:rgba(238,116,172,.56);--g2:rgba(168,116,242,.50);--g3:rgba(238,146,116,.46);--g4:rgba(116,156,242,.44)}
  [data-theme="frost"]{--base:#06110f;
    --g1:rgba(44,190,152,.56);--g2:rgba(64,164,220,.50);--g3:rgba(126,204,126,.45);--g4:rgba(84,132,236,.47)}
  [data-theme="neon"]{--base:#0a0811;
    --g1:rgba(106,74,250,.62);--g2:rgba(242,64,186,.50);--g3:rgba(54,182,242,.50);--g4:rgba(242,120,64,.48)}
}

*{box-sizing:border-box;-webkit-font-smoothing:antialiased;touch-action:manipulation}
html{height:100%}

body{
  margin:0;min-height:100%;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  background:var(--base);
  color:var(--ink);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:28px 16px calc(36px + env(safe-area-inset-bottom,0));
  position:relative;overflow-x:hidden;
  -webkit-user-select:none;user-select:none;
}

/* ── 四团彩色流体光斑：玻璃的背景内容 ── */
body::before{
  content:"";position:fixed;inset:-10%;z-index:0;pointer-events:none;
  background:
    radial-gradient(58% 52% at 16% 12%, var(--g1) 0%, 26%, transparent 74%),
    radial-gradient(62% 56% at 86% 18%, var(--g2) 0%, 26%, transparent 74%),
    radial-gradient(64% 58% at 78% 86%, var(--g3) 0%, 26%, transparent 74%),
    radial-gradient(58% 54% at 10% 78%, var(--g4) 0%, 26%, transparent 74%),
    radial-gradient(72% 62% at 50% 52%, var(--g2) 0%, 30%, transparent 78%);
  transform:translateZ(0);          /* 提升为合成层，动画期间不触发重绘 */
  animation:drift 26s ease-in-out infinite alternate;
  will-change:transform;
  backface-visibility:hidden;
}
@keyframes drift{
  0%  {transform:translate3d(0,0,0) scale(1.04) rotate(0deg)}
  50% {transform:translate3d(2.5%,-2%,0) scale(1.10) rotate(2.5deg)}
  100%{transform:translate3d(-2.5%,2.5%,0) scale(1.05) rotate(-2.5deg)}
}

/* ── 细噪点：消掉塑料感，这才是"材质" ── */
body::after{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  opacity:.42;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;
}

/* 进场只做位移，绝不碰 opacity —— 渲染引擎不推进动画时钟时也只会偏下一点，
   而不是整页空白。（这个坑踩过两次，写死在这儿。） */
.shell{width:100%;max-width:430px;position:relative;z-index:1;
  animation:rise .55s var(--ease)}
@keyframes rise{from{transform:translateY(18px)}to{transform:none}}
@media (prefers-reduced-motion:reduce){
  .shell{animation:none}
  body::before{animation:none}
}

/* ── 主卡片：真正的多层玻璃 ── */
.card{
  position:relative;overflow:hidden;
  padding:32px 26px 26px;
  border-radius:var(--radius-card);
  background:linear-gradient(157deg,
    rgba(255,255,255,var(--gl-a)) 0%,
    rgba(255,255,255,var(--gl-b)) 38%,
    rgba(255,255,255,var(--gl-c)) 64%,
    rgba(255,255,255,var(--gl-d)) 100%);
  -webkit-backdrop-filter:blur(30px) saturate(175%);
  backdrop-filter:blur(30px) saturate(175%);
  box-shadow:var(--sh-card),
    inset 0 1px 0 var(--hi-1),
    inset 0 -1px 0 var(--hi-2);
}
/* 渐变描边：把玻璃边缘"切"出来，这是液态玻璃的命根子 */
.card::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.2px;
  pointer-events:none;z-index:2;
  background:linear-gradient(155deg,
    var(--edge-1) 0%, var(--edge-2) 26%, var(--edge-3) 52%,
    var(--edge-4) 80%, var(--edge-5) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
}
/* 顶部聚光弧 */
.card::after{
  content:"";position:absolute;top:0;left:6%;width:88%;height:46%;
  pointer-events:none;
  background:radial-gradient(58% 100% at 50% 0%, rgba(255,255,255,.42) 0%, transparent 72%);
}
@media (prefers-color-scheme:dark){
  .card::after{background:radial-gradient(58% 100% at 50% 0%, rgba(255,255,255,.15) 0%, transparent 72%)}
}

/* ── 头像 ─────────────────────────────── */
.avatar{
  width:98px;height:98px;margin:0 auto 20px;border-radius:50%;
  position:relative;display:grid;place-items:center;
  box-shadow:0 14px 30px -14px rgba(18,26,58,.42);
}
.avatar::before{
  content:"";position:absolute;inset:-3.5px;border-radius:50%;
  background:conic-gradient(from 210deg,
    rgba(255,255,255,.95), rgba(150,180,255,.85), rgba(210,150,255,.85),
    rgba(120,220,215,.85), rgba(255,255,255,.95));
}
@media (prefers-color-scheme:dark){
  .avatar::before{background:conic-gradient(from 210deg,
    rgba(255,255,255,.34), rgba(110,150,255,.55), rgba(170,110,255,.55),
    rgba(60,190,190,.5), rgba(255,255,255,.34))}
}
.avatar img,.avatar .ph{
  position:relative;width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;z-index:1;
}
.avatar .ph{
  background:linear-gradient(135deg, rgba(255,255,255,.34), rgba(140,170,255,.34));
  display:grid;place-items:center;color:var(--ink-soft);
}
.avatar .ph svg{width:44%;height:44%}

/* ── 文字 ─────────────────────────────── */
.title{
  position:relative;z-index:1;
  font-size:23px;font-weight:800;text-align:center;letter-spacing:-.4px;line-height:1.24;
}
.subtitle{
  position:relative;z-index:1;
  font-size:14.5px;color:var(--ink-soft);text-align:center;margin-top:7px;line-height:1.5;
}
.rule{
  height:1px;margin:22px 0 4px;opacity:.5;
  background:linear-gradient(90deg,transparent 0%,currentColor 24%,currentColor 76%,transparent 100%);
  color:var(--ink-faint);
}

/* ── 按钮：玻璃胶囊 ───────────────────── */
.card,.btn,.sbtn,.pick{backface-visibility:hidden}
.stack{margin-top:14px;display:flex;flex-direction:column;gap:11px;position:relative;z-index:1}
.btn{
  position:relative;display:flex;align-items:center;gap:12px;width:100%;
  padding:16px 18px;border-radius:var(--radius-btn);
  background:linear-gradient(160deg,
    rgba(255,255,255,var(--bg-a)) 0%,
    rgba(255,255,255,var(--bg-b)) 52%,
    rgba(255,255,255,var(--bg-c)) 100%);
  -webkit-backdrop-filter:blur(10px) saturate(165%);
  backdrop-filter:blur(10px) saturate(165%);
  box-shadow:var(--sh-btn), inset 0 1px 0 var(--hi-1), inset 0 -1px 0 var(--hi-2);
  color:var(--ink);font-size:16px;font-weight:650;letter-spacing:-.1px;
  text-decoration:none;cursor:pointer;font-family:inherit;
  transition:transform .18s var(--ease), box-shadow .18s ease;
  overflow:hidden;-webkit-tap-highlight-color:transparent;
}
.btn::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(160deg,
    var(--edge-1) 0%, var(--edge-2) 30%, var(--edge-3) 58%, var(--edge-4) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
  pointer-events:none;z-index:3;
}
.btn::after{
  content:"";position:absolute;top:0;left:7%;width:86%;height:54%;pointer-events:none;
  background:radial-gradient(60% 100% at 50% 0%, rgba(255,255,255,.44) 0%, transparent 76%);
}
@media (prefers-color-scheme:dark){
  .btn::after{background:radial-gradient(60% 100% at 50% 0%, rgba(255,255,255,.15) 0%, transparent 76%)}
}
.btn:hover{box-shadow:0 18px 34px -16px rgba(18,26,58,.4), inset 0 1px 0 var(--hi-1), inset 0 -1px 0 var(--hi-2);
  transform:translateY(-1px)}
.btn:active{transform:scale(.968)}
.btn .ico{width:22px;height:22px;flex:0 0 22px;position:relative;z-index:2}
.btn .ico svg{width:100%;height:100%;display:block;filter:drop-shadow(0 1px 1px rgba(0,0,0,.12))}
.btn .txt{flex:1;text-align:center;position:relative;z-index:2}
.btn .arrow{width:16px;height:16px;flex:0 0 16px;opacity:.3;position:relative;z-index:2}
.btn .arrow svg{width:100%;height:100%}
.c-blue   .ico{color:var(--blue)}   .c-green  .ico{color:var(--green)}
.c-purple .ico{color:var(--purple)} .c-orange .ico{color:var(--orange)}
.c-red    .ico{color:var(--red)}    .c-teal   .ico{color:var(--teal)}
.c-indigo .ico{color:var(--indigo)} .c-pink   .ico{color:var(--pink)}

.ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.55);
  transform:scale(0);animation:rp .6s ease-out;pointer-events:none;z-index:1}
@keyframes rp{to{transform:scale(4.5);opacity:0}}

.empty{text-align:center;color:var(--ink-faint);font-size:14px;padding:22px 0}

.icp{margin-top:20px;text-align:center;font-size:11.5px;color:var(--ink-faint);letter-spacing:.2px}
.icp a{color:inherit;text-decoration:none}

/* ── 底部弹层 ─────────────────────────── */
/* 显隐用 display 切换，淡入淡出不参与 —— 遮罩本身就半透明，
   直接出现几乎看不出差别；而只要不用 opacity 控制显隐，
   渲染引擎不推进动画时钟也不可能"点了没反应"。 */
.mask{
  position:fixed;inset:0;z-index:80;display:none;align-items:flex-end;justify-content:center;
  background:rgba(10,14,26,.30);
  -webkit-backdrop-filter:blur(12px) saturate(140%);backdrop-filter:blur(12px) saturate(140%);
}
.mask.on{display:flex}
.sheet{
  position:relative;
  width:100%;max-width:480px;padding:12px 0 calc(28px + env(safe-area-inset-bottom,0));
  border-radius:28px 28px 0 0;
  background:linear-gradient(178deg,
    rgba(255,255,255,var(--gl-a)) 0%,
    rgba(255,255,255,var(--gl-d)) 46%,
    rgba(255,255,255,var(--gl-a)) 100%);
  -webkit-backdrop-filter:blur(34px) saturate(180%);backdrop-filter:blur(34px) saturate(180%);
  box-shadow:var(--sh-sheet), inset 0 1px 0 var(--hi-1);
  animation:slideUp .3s var(--ease);
}
@keyframes slideUp{from{transform:translateY(44px)}to{transform:none}}
.grip{width:38px;height:4px;border-radius:2px;background:var(--ink-faint);margin:0 auto 16px;opacity:.5}
.sheet h3{margin:0 0 16px;font-size:17px;font-weight:700;text-align:center;letter-spacing:-.2px}
.sheet .body{padding:0 18px;max-height:62vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
.sbtn{
  position:relative;display:flex;align-items:center;justify-content:center;gap:9px;width:100%;
  padding:15px 18px;margin-bottom:10px;border-radius:17px;
  background:linear-gradient(160deg,
    rgba(255,255,255,var(--bg-a)) 0%,
    rgba(255,255,255,var(--bg-b)) 54%,
    rgba(255,255,255,var(--bg-c)) 100%);
  -webkit-backdrop-filter:blur(8px) saturate(160%);backdrop-filter:blur(8px) saturate(160%);
  box-shadow:var(--sh-btn), inset 0 1px 0 var(--hi-1);
  color:var(--ink);font-size:15px;font-weight:600;font-family:inherit;
  text-decoration:none;cursor:pointer;
  transition:transform .15s ease;
  -webkit-tap-highlight-color:transparent;overflow:hidden;
}
.sbtn::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(160deg, var(--edge-1), var(--edge-2) 34%, var(--edge-3) 60%, var(--edge-4) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
  pointer-events:none;
}
.sbtn:active{transform:scale(.975)}
.sbtn.accent{color:var(--blue)}
.sbtn.plain{background:none;box-shadow:none;color:var(--ink-soft);font-weight:500}
.sbtn.plain::before{display:none}
.sbtn svg{width:17px;height:17px;flex:0 0 17px;position:relative;z-index:1}

.pick{
  display:flex;align-items:flex-start;gap:12px;padding:13px 14px;margin-bottom:8px;
  border-radius:var(--radius-sm);
  background:linear-gradient(160deg, rgba(255,255,255,var(--bg-a)), rgba(255,255,255,var(--bg-b)));
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:inset 0 1px 0 var(--hi-1);
  cursor:pointer;transition:transform .15s ease;
}
.pick:active{transform:scale(.985)}
.pick input{width:20px;height:20px;margin:0;accent-color:var(--blue);flex:0 0 20px}
.pick span{flex:1;font-size:14px;line-height:1.4;word-break:break-all;color:var(--ink)}
.pick em{display:block;font-style:normal;font-size:12px;color:var(--ink-faint);margin-top:2px}

/* ── 公告条 ───────────────────────────── */
.notice{
  position:relative;z-index:1;
  display:flex;align-items:flex-start;gap:9px;
  margin:0 2px 12px;padding:11px 15px;border-radius:17px;
  background:linear-gradient(160deg, rgba(255,205,100,.34), rgba(255,175,70,.20));
  -webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 8px 20px -12px rgba(160,110,20,.4);
  color:#7a5200;font-size:13.5px;line-height:1.45;
}
@media (prefers-color-scheme:dark){
  .notice{background:linear-gradient(160deg, rgba(255,196,80,.20), rgba(255,176,60,.10));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.14);color:#ffd479}
}
.notice svg{width:17px;height:17px;flex:0 0 17px;margin-top:1px}
.notice span{flex:1}

/* ── 轻提示 ───────────────────────────── */
.toast-box{
  position:fixed;left:0;right:0;bottom:calc(28px + env(safe-area-inset-bottom,0));
  z-index:200;display:flex;flex-direction:column;align-items:center;gap:8px;
  pointer-events:none;padding:0 20px;
}
.toast{
  max-width:90%;padding:11px 18px;border-radius:15px;
  background:rgba(24,26,34,.86);color:#fff;font-size:14px;font-weight:500;
  box-shadow:0 12px 34px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);
  animation:toastIn .26s var(--ease);
}
.toast.out{opacity:0;transition:opacity .3s ease}
@keyframes toastIn{from{transform:translateY(14px)}to{transform:none}}

/* ── 微信引导条 ───────────────────────── */
.wxtip{
  position:fixed;left:12px;right:12px;top:calc(12px + env(safe-area-inset-top,0));
  z-index:150;display:flex;align-items:center;gap:9px;
  padding:12px 14px;border-radius:17px;
  background:rgba(24,26,34,.88);color:#fff;font-size:13px;line-height:1.4;
  box-shadow:0 16px 42px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);
  transform:translateY(-150%);        /* 只动 transform，不碰 opacity */
  transition:transform .3s var(--ease);
}
.wxtip.on{transform:none}
.wxtip svg{width:20px;height:20px;flex:0 0 20px;color:#ffd479}
.wxtip span{flex:1}
.wxtip b{color:#ffd479}
.wxtip button{
  flex:0 0 26px;width:26px;height:26px;border:0;border-radius:50%;
  background:rgba(255,255,255,.16);color:#fff;font-size:16px;line-height:1;
  cursor:pointer;padding:0;
}

/* ══════════════ 流畅度兜底 ══════════════
   1) 不支持 backdrop-filter 的浏览器：玻璃退化成实心，避免"半透明一堆文字看不清"
   2) 低端设备（JS 打上 .perf-low）：停掉背景漂移，静态背景一样好看，但绝不掉帧 */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .card{background:rgba(252,253,255,.94)}
  .btn,.sbtn,.pick{background:rgba(252,253,255,.90)}
  @media (prefers-color-scheme:dark){
    .card{background:rgba(22,24,32,.96)}
    .btn,.sbtn,.pick{background:rgba(30,33,42,.92)}
  }
}
html.perf-low body::before{animation:none}
html.perf-low body::after{opacity:.3}