/* ========================================
   液态玻璃设计系统 · Liquid Glass
   参考 iOS 26 / macOS Tahoe：
   1. 双层材质 —— 白色高光层 叠在 色彩层 之上
   2. 上下边缘线 —— 顶部亮 1.5px + 底部暗 1px，制造厚度
   3. 斜向流光 —— 伪元素模拟玻璃折射
   4. 背景 blur + saturate，让壁纸色彩渗上来
   ======================================== */

:root{
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC",
          "Microsoft YaHei", system-ui, sans-serif;
  --serif: "SimSun", "Songti SC", serif;

  --ink: #1d1d1f;
  --ink-2: #48484d;
  --ink-3: #75757a;

  --blue: #007aff;
  --teal: #1fa8bd;
  --amber: #f5a524;

  --r-lg: 26px;
  --r-pill: 999px;

  --spring: cubic-bezier(.22, 1.2, .36, 1);

  /* 双层玻璃填充：上层白高光，下层微透明 */
  --glass-fill:
    linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.20) 46%, rgba(255,255,255,.34));

  --blur-lg: blur(30px) saturate(200%) brightness(1.04);
  --blur-md: blur(22px) saturate(190%);
  --blur-sm: blur(18px) saturate(180%);

  /* 边缘：顶部亮线 + 底部暗线 + 外投影 */
  --rim-lg:
    inset 0 1.5px 1px rgba(255,255,255,1),
    inset 0 -12px 20px -14px rgba(255,255,255,.65),
    inset 0 -1px 2px rgba(0,0,0,.07);
  --rim-md:
    inset 0 1.5px 1px rgba(255,255,255,1),
    inset 0 -1px 2px rgba(0,0,0,.08);
  --drop-lg: 0 20px 48px rgba(0,40,90,.20), 0 2px 8px rgba(0,40,90,.08);
  --drop-md: 0 16px 38px rgba(0,40,90,.22);
}

*{
  box-sizing: border-box;
  font-family: var(--font);
  -webkit-tap-highlight-color: transparent;
}

body{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- 玻璃面板 ---------- */
.glass{
  position: relative;
  overflow: hidden;
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--blur-lg);
  backdrop-filter: var(--blur-lg);
  border: 1px solid rgba(255,255,255,.72);
  box-shadow: var(--drop-lg), var(--rim-lg);
  border-radius: var(--r-lg);
}
.glass::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(112deg,
      rgba(255,255,255,0) 6%,
      rgba(255,255,255,.30) 26%,
      rgba(255,255,255,0) 50%),
    radial-gradient(130% 62% at 50% 0%, rgba(255,255,255,.42), rgba(255,255,255,0) 62%);
}
/* 底部反光：必须是铺满全宽（inset:0）的渐变。
   早先用 left/right 内缩 + height 写成矩形，会在胶囊内部留下两条硬直边，
   看起来就像"按钮两边有一块颜色和中间不一样"。 */
.glass::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(to top,
                rgba(255,255,255,.42), rgba(255,255,255,0) 40%);
}
.glass > *{
  position: relative;
  z-index: 1;
}

/* ---------- 玻璃胶囊按钮 ---------- */
.gbtn{
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 58px;
  border-radius: var(--r-pill);
  text-decoration: none;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .2px;
  color: var(--ink);
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--blur-md);
  backdrop-filter: var(--blur-md);
  border: 1px solid rgba(255,255,255,.75);
  box-shadow: var(--drop-md), var(--rim-md);
  transition: transform .32s var(--spring), box-shadow .32s ease, filter .32s ease;
}
.gbtn::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(112deg,
      rgba(255,255,255,0) 6%,
      rgba(255,255,255,.34) 28%,
      rgba(255,255,255,0) 54%),
    radial-gradient(140% 70% at 50% 0%, rgba(255,255,255,.40), rgba(255,255,255,0) 58%);
}
.gbtn::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(to top,
                rgba(255,255,255,.26), rgba(255,255,255,0) 38%);
}
.gbtn:hover{
  transform: translateY(-3px) scale(1.012);
  box-shadow: 0 26px 54px rgba(0,40,90,.26), var(--rim-md);
}
.gbtn:active{
  transform: scale(.972);
  transition-duration: .12s;
}

/* ---------- 彩色玻璃（色彩层 + 白高光层） ---------- */
.tint-blue{
  background:
    linear-gradient(180deg, rgba(255,255,255,.50), rgba(255,255,255,.02) 44%, rgba(255,255,255,.16)),
    linear-gradient(160deg, rgba(0,132,255,.84), rgba(0,88,200,.64));
  border-color: rgba(255,255,255,.62);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,30,80,.28);
}
.tint-teal{
  background:
    linear-gradient(180deg, rgba(255,255,255,.50), rgba(255,255,255,.02) 44%, rgba(255,255,255,.16)),
    linear-gradient(160deg, rgba(40,180,200,.82), rgba(12,130,155,.62));
  border-color: rgba(255,255,255,.62);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,40,50,.28);
}
.tint-amber{
  background:
    linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.04) 44%, rgba(255,255,255,.18)),
    linear-gradient(160deg, rgba(255,178,60,.88), rgba(238,132,26,.70));
  border-color: rgba(255,255,255,.68);
  color: #4a2500;
  text-shadow: 0 1px 1px rgba(255,255,255,.45);
}

/* ---------- 小号玻璃胶囊 ---------- */
.gpill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--r-pill);
  font-size: 13px;
  color: var(--ink-2);
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--blur-sm);
  backdrop-filter: var(--blur-sm);
  border: 1px solid rgba(255,255,255,.78);
  box-shadow: 0 10px 24px rgba(0,40,90,.14), var(--rim-md);
}

/* ---------- 无障碍与降级 ---------- */
@media (prefers-reduced-motion: reduce){
  *{
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .glass{ background: rgba(255,255,255,.88); }
  .gbtn{ background: rgba(255,255,255,.92); }
  .gpill{ background: rgba(255,255,255,.92); }
  .tint-blue{ background: #0a84ff; }
  .tint-teal{ background: #1fa8bd; }
  .tint-amber{ background: #f5a524; }
}