* { margin:0; padding:0; box-sizing:border-box; }
body{
  min-height:100vh;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  color:#111;
  font-family:"PingFang SC","Microsoft YaHei",sans-serif;
  padding:1.5rem;
  background:url('http://api.yppp.net/api.php') center/cover no-repeat fixed;
}
h1{ font-size:clamp(2.2rem,8vw,4rem); font-weight:700; }
.sub{ margin-top:.9rem; color:#444; }

.glass{
  position:relative;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.30);
  -webkit-backdrop-filter:blur(10px) saturate(1.7) brightness(1.06);
  backdrop-filter:url(#liquid-lens) blur(4px) saturate(1.7) brightness(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(255,255,255,.18),
    0 0 18px rgba(255,255,255,.16),
    0 10px 30px rgba(0,0,0,.25);
}
.glass::before{
  content:''; position:absolute; inset:0;
  border-radius:inherit; pointer-events:none;
  background:
    linear-gradient(115deg, transparent 22%, rgba(255,255,255,.38) 42%, rgba(255,255,255,.06) 52%, transparent 64%),
    radial-gradient(120% 190% at 50% -60%, rgba(255,255,255,.30), transparent 55%);
}
.glass::after{
  content:''; position:absolute; inset:0;
  border-radius:inherit; pointer-events:none; padding:1px;
  background:linear-gradient(135deg, rgba(255,255,255,.75), rgba(255,255,255,.05) 45%, rgba(255,255,255,.45));
  -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;
  box-shadow:inset 0 0 12px rgba(255,255,255,.22);
}

.capsule{
  display:inline-flex; align-items:center; gap:.55rem;
  margin-top:2rem;
  padding:.55rem 1.35rem;
  border-radius:999px;
  font-family:ui-monospace,Consolas,monospace; font-size:.9rem;
  transition:box-shadow .35s ease;
}
.capsule:hover{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    inset 0 0 18px rgba(255,255,255,.3),
    0 0 26px rgba(255,255,255,.38),
    0 0 70px rgba(255,255,255,.15),
    0 10px 30px rgba(0,0,0,.3);
}
.capsule .label{ opacity:.8; }

.dock{
  position:fixed; bottom:1.4rem; left:50%;
  transform:translateX(-50%);
  transform-origin:50% 100%;
  z-index:10;
  padding:.45rem .6rem;
  border-radius:26px;
  transition:
    transform .4s cubic-bezier(.34,1.56,.64,1),
    box-shadow .35s ease;
}
.dock:hover{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75),
    inset 0 0 20px rgba(255,255,255,.3),
    0 0 30px rgba(255,255,255,.4),
    0 0 80px rgba(255,255,255,.16),
    0 12px 34px rgba(0,0,0,.32);
}
.dock.pressing{ transform:translateX(-50%) scale(1.05); }
.dock-inner{
  position:relative;
  display:flex; gap:.2rem;
  user-select:none; -webkit-user-select:none;
  touch-action:none;
}
.halo{
  position:absolute;
  left:var(--x,0px); top:var(--y,0px);
  width:var(--w,0px); height:var(--h,0px);
  border-radius:999px;
  pointer-events:none;
  background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.40);
  -webkit-backdrop-filter:blur(4px) saturate(1.8) brightness(1.08);
  backdrop-filter:url(#liquid-lens) blur(3px) saturate(1.8) brightness(1.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 0 12px rgba(255,255,255,.25),
    0 0 16px rgba(255,255,255,.35),
    0 0 40px rgba(255,255,255,.12);
  transition:
    left   .42s cubic-bezier(.34,1.56,.64,1),
    top    .42s cubic-bezier(.34,1.56,.64,1),
    width  .42s cubic-bezier(.34,1.56,.64,1),
    height .42s cubic-bezier(.34,1.56,.64,1),
    box-shadow .3s ease,
    background .3s ease;
}
.halo::before{
  content:''; position:absolute; inset:0;
  border-radius:inherit; pointer-events:none;
  background:
    linear-gradient(115deg, transparent 24%, rgba(255,255,255,.4) 44%, rgba(255,255,255,.06) 54%, transparent 66%),
    radial-gradient(120% 190% at 50% -60%, rgba(255,255,255,.32), transparent 55%);
}
.halo::after{
  content:''; position:absolute; inset:-1px;
  border-radius:inherit; pointer-events:none; padding:1.5px;
  background:conic-gradient(from 200deg,
    rgba(255,140,140,.45), rgba(255,235,170,.45), rgba(150,255,190,.40),
    rgba(150,210,255,.45), rgba(210,160,255,.40), rgba(255,140,140,.45));
  -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;
  opacity:0; transition:opacity .3s ease;
}
.halo.pressing{
  background:rgba(255,255,255,.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    inset 0 0 22px rgba(255,255,255,.35),
    0 0 28px rgba(255,255,255,.5),
    0 0 70px rgba(255,255,255,.18);
}
.halo.pressing::after{ opacity:1; }

.dock-item{
  position:relative;
  padding:.5rem 1.1rem;
  border-radius:18px;
  color:#111; text-decoration:none;
  font-size:.88rem; white-space:nowrap;
  cursor:pointer;
  transition:transform .4s cubic-bezier(.34,1.56,.64,1);
}
.dock-item.active{ font-weight:600; }
.dock-item.pressed{ transform:scale(1.15); }
.dock-item:active{ opacity:.8; }

footer{
  position:fixed; bottom:5.4rem; left:0; right:0;
  text-align:center;
  font-family:ui-monospace,Consolas,monospace;
  font-size:.75rem; color:#777;
}

/* ===== 通用弹窗：完全复用 glass 样式 ===== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
  padding: 1.5rem;
}
.modal-overlay.show {
  opacity: 1;
  visibility: visible;
}
.modal-box {
  position: relative;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.30);
  -webkit-backdrop-filter: blur(10px) saturate(1.7) brightness(1.06);
  backdrop-filter: url(#liquid-lens) blur(4px) saturate(1.7) brightness(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(255,255,255,.18),
    0 0 18px rgba(255,255,255,.16),
    0 10px 30px rgba(0,0,0,.25);
  border-radius: 26px;
  padding: 1.8rem 2rem 1.5rem;
  max-width: 360px;
  width: 100%;
  text-align: center;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  transform: scale(.92);
  transition: transform .35s cubic-bezier(.34,1.56,.64,1);
}
.modal-box::before{
  content:''; position:absolute; inset:0;
  border-radius:inherit; pointer-events:none;
  background:
    linear-gradient(115deg, transparent 22%, rgba(255,255,255,.38) 42%, rgba(255,255,255,.06) 52%, transparent 64%),
    radial-gradient(120% 190% at 50% -60%, rgba(255,255,255,.30), transparent 55%);
}
.modal-box::after{
  content:''; position:absolute; inset:0;
  border-radius:inherit; pointer-events:none; padding:1px;
  background:linear-gradient(135deg, rgba(255,255,255,.75), rgba(255,255,255,.05) 45%, rgba(255,255,255,.45));
  -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;
  box-shadow:inset 0 0 12px rgba(255,255,255,.22);
}
.modal-overlay.show .modal-box {
  transform: scale(1);
}
.modal-title {
  position: relative;
  font-size: 1.1rem;
  font-weight: 600;
  color: #111;
  margin-bottom: .5rem;
  z-index: 1;
}
.modal-desc {
  position: relative;
  font-size: .88rem;
  color: #333;
  line-height: 1.5;
  margin-bottom: 1.5rem;
  z-index: 1;
}
.modal-actions {
  position: relative;
  display: flex;
  gap: .7rem;
  justify-content: center;
  flex-wrap: wrap;
  z-index: 1;
}

/* ===== 通用无色玻璃按钮 ===== */
.modal-btn {
  padding: .5rem 1.3rem;
  border-radius: 14px;
  font-size: .88rem;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,.35);
  transition: all .2s ease;
  font-family: inherit;
  background: rgba(255,255,255,.12);
  color: #111;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    0 2px 8px rgba(0,0,0,.08);
}
.modal-btn:hover {
  background: rgba(255,255,255,.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.65),
    0 4px 14px rgba(0,0,0,.12);
}
.modal-btn:active {
  transform: scale(.96);
}
/* 当前语言高亮：无色玻璃加强 */
.modal-btn.active-lang {
  background: rgba(255,255,255,.30);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 0 14px rgba(255,255,255,.4),
    0 0 16px rgba(255,255,255,.5),
    0 4px 14px rgba(0,0,0,.12);
  font-weight: 600;
}

/* ===== 语言选择器：仿 Dock ===== */
.lang-picker {
  position: relative;
  display: flex;
  gap: .2rem;
  justify-content: center;
  user-select: none; -webkit-user-select: none;
  touch-action: none;
  padding: .35rem .4rem;
  border-radius: 22px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.20);
}
.lang-halo {
  position: absolute;
  left: var(--x,0px); top: var(--y,0px);
  width: var(--w,0px); height: var(--h,0px);
  border-radius: 999px;
  pointer-events: none;
  background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.40);
  -webkit-backdrop-filter: blur(4px) saturate(1.8) brightness(1.08);
  backdrop-filter: url(#liquid-lens) blur(3px) saturate(1.8) brightness(1.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 0 12px rgba(255,255,255,.25),
    0 0 16px rgba(255,255,255,.35),
    0 0 40px rgba(255,255,255,.12);
  transition:
    left   .42s cubic-bezier(.34,1.56,.64,1),
    top    .42s cubic-bezier(.34,1.56,.64,1),
    width  .42s cubic-bezier(.34,1.56,.64,1),
    height .42s cubic-bezier(.34,1.56,.64,1),
    box-shadow .3s ease,
    background .3s ease;
}
.lang-halo::before{
  content:''; position:absolute; inset:0;
  border-radius:inherit; pointer-events:none;
  background:
    linear-gradient(115deg, transparent 24%, rgba(255,255,255,.4) 44%, rgba(255,255,255,.06) 54%, transparent 66%),
    radial-gradient(120% 190% at 50% -60%, rgba(255,255,255,.32), transparent 55%);
}
.lang-halo::after{
  content:''; position:absolute; inset:-1px;
  border-radius:inherit; pointer-events:none; padding:1.5px;
  background:conic-gradient(from 200deg,
    rgba(255,140,140,.45), rgba(255,235,170,.45), rgba(150,255,190,.40),
    rgba(150,210,255,.45), rgba(210,160,255,.40), rgba(255,140,140,.45));
  -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;
  opacity:0; transition:opacity .3s ease;
}
.lang-halo.pressing{
  background:rgba(255,255,255,.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    inset 0 0 22px rgba(255,255,255,.35),
    0 0 28px rgba(255,255,255,.5),
    0 0 70px rgba(255,255,255,.18);
}
.lang-halo.pressing::after{ opacity:1; }

.lang-item {
  position: relative;
  padding: .5rem .9rem;
  border-radius: 18px;
  color: #111;
  font-size: .85rem;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .4s cubic-bezier(.34,1.56,.64,1);
  z-index: 1;
}
.lang-item.active{ font-weight: 600; }
.lang-item.pressed{ transform: scale(1.12); }

/* 底部操作按钮区域 */
.modal-footer {
  position: relative;
  display: flex;
  justify-content: center;
  margin-top: 1.2rem;
  z-index: 1;
}

@media (max-width:480px){
  .dock-item{ padding:.45rem .8rem; font-size:.8rem; }
  .lang-item{ padding:.45rem .65rem; font-size:.78rem; }
}