/* ============================================================
   链接卡片站 · 玻璃拟态样式
   自写实现：移动优先 / 系统字体 / 深色模式 / 无外部依赖
   ============================================================ */
:root{
  --bg1:#e9edf8; --bg2:#e2f0fb; --bg3:#f4f0fb;
  --shell:rgba(255,255,255,.68);
  --shell-strong:rgba(255,255,255,.9);
  --stroke:rgba(255,255,255,.62);
  --stroke-soft:rgba(255,255,255,.4);
  --ink:#14161a;
  --ink-soft:rgba(20,22,26,.56);
  --ink-faint:rgba(20,22,26,.34);
  --shadow-card:0 24px 60px rgba(20,30,60,.13), 0 4px 16px rgba(20,30,60,.07);
  --shadow-btn:0 8px 22px rgba(20,30,60,.10), 0 2px 8px rgba(20,30,60,.05);
  --inner-hi:inset 0 1px 0 rgba(255,255,255,.85);
  --radius-card:30px; --radius-btn:19px; --radius-sm:14px;
  --blue:#0a84ff; --green:#30c755; --purple:#af52de; --orange:#ff9500;
  --red:#ff3b30; --teal:#30b0c7; --indigo:#5e5ce6; --pink:#ff2d55;
  --ease:cubic-bezier(.34,1.3,.64,1);
}
@media (prefers-color-scheme:dark){
  :root{
    --bg1:#0d1017; --bg2:#0b131c; --bg3:#141020;
    --shell:rgba(40,44,54,.62);
    --shell-strong:rgba(48,52,64,.85);
    --stroke:rgba(255,255,255,.14);
    --stroke-soft:rgba(255,255,255,.08);
    --ink:#f2f4f8;
    --ink-soft:rgba(240,244,250,.6);
    --ink-faint:rgba(240,244,250,.36);
    --shadow-card:0 24px 60px rgba(0,0,0,.5), 0 4px 16px rgba(0,0,0,.35);
    --shadow-btn:0 8px 22px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.3);
    --inner-hi:inset 0 1px 0 rgba(255,255,255,.12);
  }
}
*{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:linear-gradient(165deg,var(--bg1) 0%,var(--bg2) 34%,var(--bg3) 68%,var(--bg1) 100%);
  background-attachment:fixed;
  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,body::after{
  content:"";position:fixed;pointer-events:none;z-index:0;
  width:62vmax;height:62vmax;border-radius:50%;
  filter:blur(30px);
  animation:drift 16s ease-in-out infinite alternate;
}
body::before{top:-26vmax;left:-22vmax;background:radial-gradient(circle,rgba(110,155,255,.30),transparent 62%)}
body::after{bottom:-28vmax;right:-20vmax;background:radial-gradient(circle,rgba(180,110,255,.22),transparent 62%);animation-duration:21s;animation-direction:alternate-reverse}
@keyframes drift{from{transform:translate(0,0) scale(1)}to{transform:translate(5%,4%) scale(1.08)}}

/* 进场只做位移，绝不碰 opacity —— 万一渲染引擎不推进动画时钟，
   页面也只会停在偏下 18px 的位置，而不是整页空白。 */
.shell{width:100%;max-width:430px;position:relative;z-index:1;
  animation:rise .5s var(--ease)}
@keyframes rise{from{transform:translateY(18px)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.shell{animation:none}body::before,body::after{animation:none}}

/* ── 主卡片 ───────────────────────────── */
.card{
  background:var(--shell);
  -webkit-backdrop-filter:blur(44px) saturate(185%);
  backdrop-filter:blur(44px) saturate(185%);
  border:1px solid var(--stroke);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-card),var(--inner-hi);
  padding:32px 26px 26px;
  position:relative;overflow:hidden;
}
.card::before{
  content:"";position:absolute;inset:0 0 auto;height:52%;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.4),transparent);
  border-radius:var(--radius-card) var(--radius-card) 0 0;
}
.card::after{
  content:"";position:absolute;top:-45%;right:-30%;width:85%;height:85%;pointer-events:none;
  background:radial-gradient(circle,rgba(120,150,255,.14),transparent 62%);
}

/* ── 头像 ─────────────────────────────── */
.avatar{
  width:96px;height:96px;margin:0 auto 20px;border-radius:50%;
  position:relative;display:grid;place-items:center;
}
.avatar::before{
  content:"";position:absolute;inset:-3px;border-radius:50%;
  background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(160,190,255,.65) 48%,rgba(200,150,255,.65));
}
.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,.35),rgba(140,170,255,.35));
  display:grid;place-items:center;color:var(--ink-soft);
}
.avatar .ph svg{width:44%;height:44%}

.title{font-size:22px;font-weight:700;text-align:center;letter-spacing:-.3px;line-height:1.25;position:relative;z-index:1}
.subtitle{font-size:15px;color:var(--ink-soft);text-align:center;margin-top:6px;line-height:1.45;position:relative;z-index:1}
.rule{height:1px;margin:22px 0 4px;background:linear-gradient(90deg,transparent,var(--ink-faint) 22%,var(--ink-faint) 78%,transparent);opacity:.55}

/* ── 按钮 ─────────────────────────────── */
.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:var(--shell);border:1px solid var(--stroke);
  -webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);
  box-shadow:var(--shadow-btn),var(--inner-hi);
  color:var(--ink);font-size:16px;font-weight:600;letter-spacing:-.1px;
  text-decoration:none;cursor:pointer;font-family:inherit;
  transition:transform .18s var(--ease),box-shadow .18s ease,background .18s ease;
  overflow:hidden;-webkit-tap-highlight-color:transparent;
}
.btn::before{
  content:"";position:absolute;top:0;left:5px;right:5px;height:45%;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.55),transparent);
  border-radius:var(--radius-btn) var(--radius-btn) 50% 50%;
}
.btn:hover{background:var(--shell-strong);box-shadow:0 14px 30px rgba(20,30,60,.16),var(--inner-hi);transform:translateY(-1px)}
.btn:active{transform:scale(.965);background:var(--shell)}
.btn .ico{width:22px;height:22px;flex:0 0 22px;position:relative;z-index:1}
.btn .ico svg{width:100%;height:100%;display:block}
.btn .txt{flex:1;text-align:center;position:relative;z-index:1}
.btn .arrow{width:16px;height:16px;flex:0 0 16px;opacity:.28;position:relative;z-index:1}
.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:0}
@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,24,.28);
  -webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);
}
.mask.on{display:flex}
.sheet{
  width:100%;max-width:480px;padding:12px 0 calc(28px + env(safe-area-inset-bottom,0));
  background:var(--shell-strong);
  -webkit-backdrop-filter:blur(50px) saturate(200%);backdrop-filter:blur(50px) saturate(200%);
  border:1px solid var(--stroke);border-bottom:0;border-radius:26px 26px 0 0;
  box-shadow:0 -10px 40px rgba(10,20,40,.2);
  animation:slideUp .3s var(--ease);
}
@keyframes slideUp{from{transform:translateY(44px)}to{transform:none}}
.grip{width:36px;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{
  display:flex;align-items:center;justify-content:center;gap:9px;width:100%;
  padding:15px 18px;margin-bottom:10px;border-radius:17px;
  background:var(--shell);border:1px solid var(--stroke);box-shadow:var(--inner-hi);
  color:var(--ink);font-size:15px;font-weight:600;font-family:inherit;
  text-decoration:none;cursor:pointer;transition:transform .15s ease,background .15s ease;
  -webkit-tap-highlight-color:transparent;position:relative;overflow:hidden;
}
.sbtn:active{transform:scale(.975);background:var(--shell-strong)}
.sbtn.accent{color:var(--blue)}
.sbtn.plain{background:transparent;border-color:transparent;box-shadow:none;color:var(--ink-soft);font-weight:500}
.sbtn svg{width:17px;height:17px;flex:0 0 17px}

.pick{
  display:flex;align-items:flex-start;gap:12px;padding:13px 14px;margin-bottom:8px;
  border-radius:var(--radius-sm);background:var(--shell);border:1px solid var(--stroke-soft);
  cursor:pointer;transition:background .15s ease;
}
.pick:active{background:var(--shell-strong)}
.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}