/* ===================================================
   会创工作室 - 基础样式
   =================================================== */

:root{
  --primary:#2A86FF;
  --success:#00C897;
  --warning:#FF9A00;
  --bg1:#eef3ff;
  --bg2:#f7fbff;
  --text:#1f2937;
  --muted:#6b7280;
  /* iOS Dock 同款玻璃 ——
     秘诀：低不透明度 + 大 blur + saturate + brightness，让背景颜色"透"过来
     不要堆白色，玻璃靠的是"看到背景"，不是"白色蒙版" */
  --card: rgba(255,255,255,.22);
  --card-border: rgba(255,255,255,.25);  /* 降低基础边框 alpha 让顶部 inset 高光更突出 */
  --radius: 18px;
  --shadow:
    0 4px 14px rgba(16,24,40,.08),
    0 24px 60px -16px rgba(16,24,40,.14);
  --shadow-hover:
    0 6px 20px rgba(16,24,40,.10),
    0 28px 70px -16px rgba(16,24,40,.20);
  --ring: 0 0 0 4px rgba(42,134,255,.18);
  --btn-shadow:
    0 1px 3px rgba(0,0,0,.06),
    0 4px 12px rgba(16,24,40,.12);
  --btn-shadow-hover:
    0 2px 6px rgba(0,0,0,.08),
    0 8px 20px rgba(16,24,40,.16);
  --container: 1600px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --mobile-tab-bar-height: 102px;
  --mobile-tab-bottom-clearance: 144px;
  /* iOS Dock 同款 backdrop：50px blur + 180% saturate + 1.08 brightness
     ↑ brightness 是关键！Apple Material 隐藏配方，让玻璃下面看着发亮 */
  --blur: blur(50px) saturate(180%) brightness(1.08);
  --pad: clamp(12px, 3.6vw, 16px);
  --gap: clamp(8px, 2.4vw, 10px);
  --card-pad: clamp(14px, 3.8vw, 18px);
  --btn-radius: 18px;
  --btn-minh: 40px;
}

@media (prefers-color-scheme: dark) {
  :root{
    --bg1:#0b1020; --bg2:#0b1228;
    --text:#e5e7eb; --muted:#a1a1aa;
    --card: rgba(20,26,45,.30); --card-border: rgba(255,255,255,.14);
    --shadow:
      0 4px 16px rgba(0,0,0,.25),
      0 28px 70px -16px rgba(0,0,0,.40);
    --shadow-hover:
      0 6px 20px rgba(0,0,0,.30),
      0 32px 80px -16px rgba(0,0,0,.55);
    --ring: 0 0 0 4px rgba(42,134,255,.28);
    --btn-shadow:
      0 1px 3px rgba(0,0,0,.15),
      0 4px 14px rgba(0,0,0,.22);
    --btn-shadow-hover:
      0 2px 6px rgba(0,0,0,.18),
      0 8px 22px rgba(0,0,0,.28);
  }
}

*{ margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ min-height:100%; }

body{
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--text);
  overflow-x:hidden;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  min-height: 100dvh;
  padding-bottom: calc(14px + var(--safe-bottom));
}

@media (min-width: 1024px){
  body{ background-attachment: scroll, fixed, scroll, scroll, scroll, scroll; }
}

main{ -webkit-overflow-scrolling: touch; }
.dock-filter-defs{ position:absolute; width:0; height:0; overflow:hidden; }

/* ===== 背景光斑 ===== */
.bg-blobs{ position: fixed; inset: 0; pointer-events:none; z-index: -1; overflow:hidden; }
.blob{
  position:absolute; filter: blur(35px); opacity: .55;
  transform: translateZ(0); animation: floaty 10s ease-in-out infinite; will-change: transform;
}
.blob.b1{ width: 420px; height: 420px; left: -120px; top: -120px; background: radial-gradient(circle at 30% 30%, rgba(42,134,255,.55), transparent 60%); }
.blob.b2{ width: 460px; height: 460px; right: -160px; top: 120px; background: radial-gradient(circle at 50% 40%, rgba(0,200,151,.45), transparent 60%); animation-delay: 1.2s; }
.blob.b3{ width: 520px; height: 520px; left: 20%; bottom: -220px; background: radial-gradient(circle at 50% 50%, rgba(255,154,0,.40), transparent 60%); animation-delay: 2.2s; }
@keyframes floaty{ 0%,100%{ transform: translate3d(0,0,0) scale(1); } 50%{ transform: translate3d(0,-14px,0) scale(1.03); } }
@media (prefers-reduced-motion: reduce){ .blob{ animation: none; } *{ transition:none !important; } }

/* ===== 容器布局 ===== */
.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: calc(var(--pad) + var(--safe-top)) var(--pad) var(--pad);
}

.layout{ display:block; }
@media (min-width: 1024px){
  .layout{
    display:block;
  }
  .header{
    display:grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(320px, 520px);
    grid-template-areas:
      "logo title contacts"
      "logo subtitle contacts";
    align-items: center;
    gap: 12px 18px;
    padding: 22px 24px;
    text-align: left;
  }
  .logo-wrap{
    grid-area: logo;
    width: 72px;
    height: 72px;
    margin: 0;
  }
  .header h1{
    grid-area: title;
    margin-bottom: 0;
  }
  .subtitle{
    grid-area: subtitle;
    margin-bottom: 0;
  }
  .contact-group{
    grid-area: contacts;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    max-width: none;
    margin: 0;
  }
  .contact-item{
    justify-content: flex-start;
  }
  main{ margin-top: 0 !important; }
}

/* ===== 玻璃卡片 — iOS "Liquid Glass" 同款 =====
   核心：非对称边缘光（asymmetric rim lighting）
   - 顶部亮白边（像水杯弯月面）+ 底部暗细线（光从上方）
   - 极淡的顶部白渐变（"湿润"质感）
   - 低不透明度 + 强 backdrop-filter（透出真实背景色）
   ============================================ */
.glass{
  background-color: var(--card);
  /* 极淡的顶部白渐变，模拟"光从上方打下来"的湿润感（不要再加多） */
  background-image: linear-gradient(180deg,
    rgba(255,255,255,.10) 0%,
    rgba(255,255,255,0)   40%);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  box-shadow:
    var(--shadow),
    inset 0 1.2px 0 rgba(255,255,255,.65),  /* ⭐ 顶部亮白线（弯月面）*/
    inset 0 -1px 0 rgba(0,0,0,.06);         /* 底部暗细线（光从上方逻辑）*/
}
/* backdrop-filter 必须在 .glass 上，且祖先元素不能有 transform/filter，
   否则浏览器会把 backdrop-filter 静默失效 */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  .glass{
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
  }
}
@media (prefers-color-scheme: dark){
  .glass{
    background-image: linear-gradient(180deg,
      rgba(255,255,255,.06) 0%,
      rgba(255,255,255,0)   40%);
    box-shadow:
      var(--shadow),
      inset 0 1.2px 0 rgba(255,255,255,.22),  /* 暗色顶部高光柔和点 */
      inset 0 -1px 0 rgba(0,0,0,.20);          /* 底部暗线更深 */
  }
}

/* ===== 公告栏 ===== */
.announcement{
  padding: 10px 36px 10px 14px;
  border-radius: var(--radius);
  background: rgba(42,134,255,.08);
  border: 1px solid rgba(42,134,255,.15);
  font-size: 13px; line-height: 1.5;
  color: var(--primary);
  margin-bottom: 12px;
  position: relative;
  animation: fadeUp .6s ease both;
}
.announcement-close{
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--muted); font-size: 18px;
  cursor: pointer; padding: 4px 6px; line-height: 1; opacity: .6;
}
.announcement-close:hover{ opacity: 1; }

/* ===== 头部 ===== */
.header{
  padding: clamp(18px, 4.2vw, 24px) clamp(14px, 3.4vw, 18px);
  text-align:center; position: relative; overflow:hidden;
  animation: fadeUp .75s ease both;
}
.header::before{
  content:""; position:absolute; inset:-2px;
  background: linear-gradient(120deg, rgba(42,134,255,.18), rgba(0,200,151,.12), rgba(255,154,0,.12));
  opacity:.22; filter: blur(18px); z-index:0;
}
.header > *{ position:relative; z-index:1; }

@keyframes fadeUp{ from{ opacity:0; transform: translateY(10px); } to{ opacity:1; transform: translateY(0); } }

.logo-wrap{
  width: 84px; height: 84px; border-radius: 50%; margin: 0 auto 10px;
  display:grid; place-items:center;
  background: rgba(255,255,255,.40); border: 1px solid rgba(255,255,255,.45);
  box-shadow: 0 12px 25px rgba(16,24,40,.14); overflow:hidden;
}
.logo{ width:100%; height:100%; object-fit: cover; display:block; }

h1{ font-size: clamp(1.20rem, 5vw, 1.65rem); letter-spacing: .3px; margin-bottom: 6px; }
.subtitle{ color: var(--muted); font-size: clamp(.84rem, 3.4vw, .98rem); margin-bottom: 12px; }

/* ===== 联系方式 ===== */
.contact-group{ display:grid; gap: 10px; max-width: 560px; margin: 0 auto; }
.contact-item{
  display:flex; align-items:flex-start; justify-content:center; gap: 10px;
  padding: 10px 12px; border-radius: 12px;
  background: rgba(255,255,255,.30); border: 1px solid rgba(255,255,255,.28);
  font-size: clamp(.80rem, 3.2vw, .92rem); line-height: 1.35; text-align:left;
  white-space: normal; word-break: break-word; overflow-wrap: anywhere;
}
.contact-item span{ flex: none; margin-top: 1px; }
@media (prefers-color-scheme: dark){
  .contact-item{ background: rgba(20,26,45,.28); border-color: rgba(255,255,255,.10); }
  .logo-wrap{ background: rgba(20,26,45,.30); border-color: rgba(255,255,255,.12); }
}

/* ===== 内容区 ===== */
main{ margin-top: 16px; }

.card{
  margin-top: 16px; padding: var(--card-pad);
  animation: fadeUp .75s ease both;
}
.card.glass:hover{ box-shadow: var(--shadow-hover); }

.card-title{
  font-size: clamp(1.08rem, 4.2vw, 1.28rem);
  font-weight: 700;
  display:flex; align-items:center; justify-content:space-between;
  gap: 10px; margin-bottom: 14px; padding-bottom: 12px;
  border-bottom: 2px solid rgba(42,134,255,.15);
  position: relative;
}
/* 标题左侧彩色竖条 */
.card-title > span:first-child{
  display: flex; align-items: center; gap: 6px;
  padding-left: 12px;
  position: relative;
}
.card-title > span:first-child::before{
  content: ''; position: absolute; left: 0; top: 50%;
  transform: translateY(-50%);
  width: 4px; height: 1.2em; border-radius: 99px;
  background: linear-gradient(180deg, var(--primary), rgba(0,200,151,.85));
}
.card-title .bar{
  width: 54px; height: 6px; border-radius: 99px;
  background: linear-gradient(90deg, var(--primary), rgba(0,200,151,.75));
  opacity:.9; flex:none;
}

/* ===== 按钮网格 ===== */
.button-grid{
  display:grid; gap: var(--gap);
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: max-content;
  align-items: start;
  align-content: start;
  perspective: 1600px;
}
@media (min-width: 720px){ .button-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1120px){ .button-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px){ .button-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.divider{
  grid-column: 1 / -1; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(34,197,94,.35), transparent);
  margin: 6px 0; border-radius: 99px;
}

/* ===== 按钮 - 高级3D深度效果 ===== */
.btn{
  --btn-hover-x: 50%;
  --btn-hover-y: 45%;
  --btn-glow-rgb: var(--c-rgb, 42,134,255);
  --btn-tilt-x: 0deg;
  --btn-tilt-y: 0deg;
  --btn-lift: 0px;
  --btn-copy-x: 0px;
  --btn-copy-y: 0px;
  position:relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;        /* 标题 + 描述竖排 */
  gap: 2px;
  text-decoration:none; color:#fff !important;
  cursor: pointer;
  padding: 8px 8px; min-height: 0; border-radius: var(--btn-radius);
  height: calc(var(--btn-minh) + 10px);
  font-size: clamp(11px, 2.8vw, 13px); font-weight: 500; line-height: 1.2;
  letter-spacing: .1px;
  box-shadow: var(--btn-shadow);
  transform: perspective(960px) translate3d(0, var(--btn-lift), 0) rotateX(var(--btn-tilt-x)) rotateY(var(--btn-tilt-y));
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    background-color .22s ease,
    background-position .24s ease,
    border-color .22s ease,
    opacity .22s ease;
  align-self: start;
  user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; -webkit-user-drag:none;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  outline:none; overflow:hidden; text-align:center;
  white-space: normal; word-break: break-word; overflow-wrap: anywhere;
  border: 1px solid rgba(255,255,255,.12);
  border-top-color: rgba(255,255,255,.22);
  border-bottom-color: rgba(0,0,0,.06);
  isolation: isolate;
  transform-style: preserve-3d;
  will-change: transform, box-shadow;
  backface-visibility: hidden;
}
.btn.btn-with-desc{
  height: calc(var(--btn-minh) + 24px);
}
.btn.btn-has-badge{
  padding-top: 12px;
  height: calc(var(--btn-minh) + 10px);
}
.btn.btn-with-desc.btn-has-badge{
  height: calc(var(--btn-minh) + 24px);
}
.btn:focus,
.btn:active{ outline:none; }
.btn .btn-title,
.btn .btn-desc{
  transition: transform .18s ease, text-shadow .18s ease, opacity .18s ease;
  transform: translate3d(var(--btn-copy-x), var(--btn-copy-y), 0);
}
.btn .btn-badge{
  transition: transform .18s ease, text-shadow .18s ease, opacity .18s ease;
  transform: translate3d(var(--btn-copy-x), var(--btn-copy-y), 0) rotate(45deg);
}
/* 标题文字：最多 2 行，溢出省略，居中对齐
   注意：line-clamp 必须在内层 span 上，不能放在 .btn 上，否则会
   把 .btn 自身的 display:flex 居中冲掉 */
.btn .btn-title{
  position: relative;
  z-index: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.2;
  width: 100%;
  text-align: center;
}
.btn.btn-has-badge .btn-title,
.btn.btn-has-badge .btn-desc{
  padding-left: 4px;
  padding-right: 12px;
}
.btn .btn-badge{
  position: absolute;
  top: 7px;
  right: -18px;
  z-index: 3;
  width: 68px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 0;
  background: var(--recommended-badge-color, #43c7ab);
  color: #ffffff !important;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .2px;
  box-shadow: 0 6px 14px rgba(67,199,171,.28);
  white-space: nowrap;
  pointer-events: none;
  transform: rotate(45deg);
  transform-origin: center;
  text-shadow: 0 1px 2px rgba(0,0,0,.14);
}
@media (max-width: 768px){
  .btn{
    height: auto;
    min-height: calc(var(--btn-minh) - 2px);
    padding: 8px 8px 7px;
  }
  .btn.btn-with-desc,
  .btn.btn-has-badge,
  .btn.btn-with-desc.btn-has-badge{
    height: auto;
  }
  .btn.btn-has-badge{
    padding-top: 15px;
  }
  .btn.btn-has-badge .btn-title,
  .btn.btn-has-badge .btn-desc{
    padding-left: 4px;
    padding-right: 12px;
  }
  .btn .btn-title{
    -webkit-line-clamp: 3;
    line-height: 1.15;
  }
  .btn .btn-badge{
    top: 5px;
    right: -19px;
    width: 62px;
    height: 17px;
    font-size: 10px;
  }
}
.btn .btn-desc{
  font-size: .82em;
  font-weight: 400;
  opacity: .82;
  -webkit-line-clamp: 1;
}
/* 顶部高光 - 柔和玻璃质感 */
.btn::before{
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at var(--btn-hover-x) var(--btn-hover-y),
      rgba(255,255,255,.34) 0%,
      rgba(255,255,255,.13) 28%,
      rgba(255,255,255,0) 56%),
    linear-gradient(180deg,
      rgba(255,255,255,.20) 0%,
      rgba(255,255,255,.05) 45%,
      rgba(0,0,0,.02) 65%,
      rgba(0,0,0,.04) 100%
    );
  pointer-events: none;
  z-index: 1;
  opacity: .78;
  transition: opacity .18s ease, background .18s ease;
}
/* 底部反光条 */
.btn::after{
  content: '';
  position: absolute;
  bottom: 0; left: 15%; right: 15%; height: 1px;
  background:
    linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  pointer-events: none;
  z-index: 1;
  opacity: .8;
  transition: opacity .18s ease, left .18s ease, right .18s ease;
}

@media (hover:none){
  .btn:hover{ transform:none; box-shadow: var(--btn-shadow); filter:none; }
  .btn:active,
  .btn.is-pressing{
    --btn-lift: 1px;
    box-shadow:
      0 2px 8px rgba(16,24,40,.12),
      inset 0 1px 0 rgba(255,255,255,.22),
      inset 0 -2px 0 rgba(0,0,0,.08);
    filter:none;
    opacity:1;
    border-top-color: rgba(255,255,255,.18);
    border-bottom-color: rgba(0,0,0,.12);
  }
  .btn:active::before,
  .btn.is-pressing::before{ opacity: .90; }
  .btn:active::after,
  .btn.is-pressing::after{ opacity: .45; }
  .btn .ripple{ display: none; }
}
@media (hover:hover){
  .btn:hover{
    --btn-lift: -3px;
    box-shadow:
      var(--btn-shadow-hover),
      0 0 0 1px rgba(255,255,255,.16),
      0 10px 22px rgba(var(--btn-glow-rgb), .20);
    filter:none;
    border-top-color: rgba(255,255,255,.34);
    border-bottom-color: rgba(0,0,0,.04);
  }
  .btn:hover::before{
    opacity: 1;
    background:
      radial-gradient(circle at var(--btn-hover-x) var(--btn-hover-y),
        rgba(255,255,255,.54) 0%,
        rgba(255,255,255,.20) 26%,
        rgba(255,255,255,0) 58%),
      linear-gradient(180deg,
        rgba(255,255,255,.30) 0%,
        rgba(255,255,255,.11) 42%,
        rgba(0,0,0,.02) 68%,
        rgba(0,0,0,.04) 100%
      );
  }
  .btn:hover::after{
    left: 10%;
    right: 10%;
    opacity: 1;
  }
  .btn:hover .btn-title,
  .btn:hover .btn-desc{
    transform: translate3d(var(--btn-copy-x), calc(var(--btn-copy-y) - 1px), 0);
    text-shadow: 0 1px 10px rgba(255,255,255,.16);
  }
  .btn:hover .btn-badge{
    transform: translate3d(var(--btn-copy-x), calc(var(--btn-copy-y) - 1px), 0) rotate(45deg);
    text-shadow: 0 1px 10px rgba(255,255,255,.16);
  }
  .btn:active,
  .btn.is-pressing{
    --btn-lift: 1px;
    box-shadow:
      0 2px 8px rgba(16,24,40,.12),
      0 4px 12px rgba(var(--btn-glow-rgb), .16),
      inset 0 1px 0 rgba(255,255,255,.20),
      inset 0 2px 8px rgba(0,0,0,.18),
      inset 0 -1px 0 rgba(255,255,255,.14);
    filter:none;
    opacity:1;
    border-top-color: rgba(0,0,0,.10);
    border-bottom-color: rgba(255,255,255,.20);
}
.btn:active::before,
.btn.is-pressing::before{ opacity: .88; }
.btn:active::after,
.btn.is-pressing::after{ opacity: .42; }
  .btn:active .btn-title,
  .btn:active .btn-desc,
  .btn.is-pressing .btn-title,
  .btn.is-pressing .btn-desc{
    transform: translate3d(var(--btn-copy-x), calc(var(--btn-copy-y) + 1px), 0);
    text-shadow: none;
  }
  .btn:active .btn-badge,
  .btn.is-pressing .btn-badge{
    transform: translate3d(var(--btn-copy-x), calc(var(--btn-copy-y) + 1px), 0) rotate(45deg);
    text-shadow: none;
  }
}
.btn:focus-visible{ outline:none; box-shadow: var(--btn-shadow); }

html[data-button-fx="2"] .btn,
body[data-button-fx="2"] .btn{
  transition-timing-function:cubic-bezier(.22,1,.36,1);
}
html[data-button-fx="2"] .btn:hover,
body[data-button-fx="2"] .btn:hover{
  box-shadow:
    0 16px 34px rgba(var(--btn-glow-rgb), .24),
    0 18px 36px -20px rgba(15,23,42,.34),
    inset 0 1px 0 rgba(255,255,255,.34),
    0 0 0 1px rgba(255,255,255,.18) !important;
}
html[data-button-fx="2"] .btn:hover::before,
body[data-button-fx="2"] .btn:hover::before{
  opacity:1;
  background:
    radial-gradient(circle at var(--btn-hover-x) var(--btn-hover-y),
      rgba(255,255,255,.68) 0%,
      rgba(255,255,255,.24) 24%,
      rgba(255,255,255,0) 58%),
    linear-gradient(180deg,
      rgba(255,255,255,.34) 0%,
      rgba(255,255,255,.13) 40%,
      rgba(0,0,0,.03) 70%,
      rgba(0,0,0,.05) 100%);
}

html[data-button-fx="3"] .btn::after,
body[data-button-fx="3"] .btn::after{
  top:-18%;
  bottom:-18%;
  left:var(--btn-sweep-x, 50%);
  right:auto;
  width:34%;
  height:auto;
  opacity:.12;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.95), transparent);
  transform:translateX(-50%) skewX(-22deg);
  transition:opacity .18s ease, left .18s ease;
}
html[data-button-fx="3"] .btn:hover::after,
body[data-button-fx="3"] .btn:hover::after{
  opacity:.42;
}

html[data-button-fx="4"] .btn,
body[data-button-fx="4"] .btn{
  transition-duration:.30s;
  transition-timing-function:cubic-bezier(.34,1.56,.64,1);
}
html[data-button-fx="4"] .btn:hover,
body[data-button-fx="4"] .btn:hover{
  filter:saturate(1.06) brightness(1.02);
}

html[data-button-fx="5"] .btn:hover,
body[data-button-fx="5"] .btn:hover{
  box-shadow:
    0 12px 24px rgba(var(--btn-glow-rgb), .18),
    0 20px 42px -24px rgba(15,23,42,.28),
    0 0 0 1px rgba(255,255,255,.14) !important;
}
html[data-button-fx="5"] .btn:hover::before,
body[data-button-fx="5"] .btn:hover::before{
  background:
    radial-gradient(circle at var(--btn-hover-x) var(--btn-hover-y),
      rgba(255,255,255,.46) 0%,
      rgba(255,255,255,.18) 34%,
      rgba(255,255,255,0) 68%),
    linear-gradient(180deg,
      rgba(255,255,255,.22) 0%,
      rgba(255,255,255,.05) 48%,
      rgba(0,0,0,.03) 100%);
}

html[data-button-fx="6"] .btn:hover > span,
html[data-button-fx="6"] .btn:hover .btn-desc,
body[data-button-fx="6"] .btn:hover > span,
body[data-button-fx="6"] .btn:hover .btn-desc{
  text-shadow:0 2px 12px rgba(255,255,255,.22), 0 1px 1px rgba(0,0,0,.08);
}
html[data-button-fx="6"] .btn:hover::before,
body[data-button-fx="6"] .btn:hover::before{
  opacity:1;
  background:
    radial-gradient(circle at var(--btn-hover-x) var(--btn-hover-y),
      rgba(255,255,255,.62) 0%,
      rgba(255,255,255,.18) 22%,
      rgba(255,255,255,0) 60%),
    linear-gradient(180deg,
      rgba(255,255,255,.28) 0%,
      rgba(255,255,255,.10) 42%,
      rgba(0,0,0,.03) 100%);
}

html[data-button-fx="7"] .btn:hover,
body[data-button-fx="7"] .btn:hover{
  box-shadow:
    0 0 0 1px rgba(255,255,255,.22),
    0 0 20px rgba(var(--btn-glow-rgb), .22),
    0 14px 32px rgba(var(--btn-glow-rgb), .18),
    0 18px 36px -24px rgba(15,23,42,.34) !important;
}
html[data-button-fx="7"] .btn:hover::after,
body[data-button-fx="7"] .btn:hover::after{
  left:6%;
  right:6%;
  height:2px;
  opacity:.92;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.85), rgba(var(--btn-glow-rgb), .66), transparent);
}
html[data-button-fx="7"] .btn:hover::before,
body[data-button-fx="7"] .btn:hover::before{
  opacity:1;
  background:
    radial-gradient(circle at var(--btn-hover-x) var(--btn-hover-y),
      rgba(255,255,255,.50) 0%,
      rgba(255,255,255,.18) 26%,
      rgba(255,255,255,0) 58%),
    linear-gradient(180deg,
      rgba(255,255,255,.26) 0%,
      rgba(255,255,255,.10) 40%,
      rgba(0,0,0,.04) 100%);
}

html[data-button-fx="8"] .btn,
body[data-button-fx="8"] .btn{
  transition-timing-function:cubic-bezier(.19,1,.22,1);
}
html[data-button-fx="8"] .btn::after,
body[data-button-fx="8"] .btn::after{
  top:-12%;
  bottom:-12%;
  left:var(--btn-sweep-x, 50%);
  right:auto;
  width:28%;
  height:auto;
  opacity:.18;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.82), rgba(var(--btn-glow-rgb), .38), transparent);
  transform:translateX(-50%) skewX(-18deg);
  transition:opacity .22s ease, left .18s ease;
}
html[data-button-fx="8"] .btn:hover,
body[data-button-fx="8"] .btn:hover{
  box-shadow:
    0 18px 36px rgba(var(--btn-glow-rgb), .18),
    0 22px 40px -24px rgba(15,23,42,.34),
    inset 0 1px 0 rgba(255,255,255,.34),
    0 0 0 1px rgba(255,255,255,.18) !important;
}
html[data-button-fx="8"] .btn:hover::before,
body[data-button-fx="8"] .btn:hover::before{
  opacity:1;
  background:
    radial-gradient(circle at var(--btn-hover-x) var(--btn-hover-y),
      rgba(255,255,255,.62) 0%,
      rgba(255,255,255,.18) 22%,
      rgba(255,255,255,0) 54%),
    linear-gradient(120deg,
      rgba(255,255,255,.16) 0%,
      rgba(255,255,255,.36) 36%,
      rgba(var(--btn-glow-rgb), .20) 58%,
      rgba(0,0,0,.03) 100%);
}
html[data-button-fx="8"] .btn:hover::after,
body[data-button-fx="8"] .btn:hover::after{
  opacity:.62;
}

html[data-button-fx="9"] .btn:hover,
body[data-button-fx="9"] .btn:hover{
  box-shadow:
    0 0 0 1px rgba(255,255,255,.20),
    0 0 0 6px rgba(var(--btn-glow-rgb), .10),
    0 0 26px rgba(var(--btn-glow-rgb), .20),
    0 20px 36px -26px rgba(15,23,42,.34) !important;
}
html[data-button-fx="9"] .btn::after,
body[data-button-fx="9"] .btn::after{
  top:-2px;
  right:-2px;
  bottom:-2px;
  left:-2px;
  height:auto;
  border-radius:inherit;
  opacity:0;
  background:
    radial-gradient(circle at var(--btn-hover-x) var(--btn-hover-y),
      rgba(var(--btn-glow-rgb), 0) 18%,
      rgba(var(--btn-glow-rgb), .58) 28%,
      rgba(var(--btn-glow-rgb), 0) 44%);
  transition:opacity .18s ease;
}
html[data-button-fx="9"] .btn:hover::before,
body[data-button-fx="9"] .btn:hover::before{
  opacity:1;
  background:
    radial-gradient(circle at var(--btn-hover-x) var(--btn-hover-y),
      rgba(255,255,255,.52) 0%,
      rgba(255,255,255,.20) 24%,
      rgba(255,255,255,0) 58%),
    linear-gradient(180deg,
      rgba(255,255,255,.24) 0%,
      rgba(255,255,255,.08) 46%,
      rgba(0,0,0,.03) 100%);
}
html[data-button-fx="9"] .btn:hover::after,
body[data-button-fx="9"] .btn:hover::after{
  opacity:.88;
  animation:btn-fx-orbit-pulse 1.1s ease-in-out infinite alternate;
}

html[data-button-fx="10"] .btn,
body[data-button-fx="10"] .btn{
  transition-timing-function:cubic-bezier(.22,1,.36,1);
}
html[data-button-fx="10"] .btn:hover{
  box-shadow:
    0 14px 30px rgba(var(--btn-glow-rgb), .16),
    12px 12px 0 rgba(255,255,255,.08),
    0 24px 44px -28px rgba(15,23,42,.34) !important;
}
html[data-button-fx="10"] .btn:hover::before,
body[data-button-fx="10"] .btn:hover::before{
  opacity:1;
  background:
    radial-gradient(circle at var(--btn-hover-x) var(--btn-hover-y),
      rgba(255,255,255,.48) 0%,
      rgba(255,255,255,.14) 24%,
      rgba(255,255,255,0) 58%),
    linear-gradient(150deg,
      rgba(255,255,255,.26) 0%,
      rgba(255,255,255,.05) 45%,
      rgba(var(--btn-glow-rgb), .12) 78%,
      rgba(0,0,0,.04) 100%);
}
html[data-button-fx="10"] .btn:hover .btn-title,
body[data-button-fx="10"] .btn:hover .btn-title{
  transform:translate3d(calc(var(--btn-copy-x) * 1.7), calc((var(--btn-copy-y) * 1.7) - 1px), 0);
  text-shadow:0 1px 12px rgba(255,255,255,.20);
}
html[data-button-fx="10"] .btn:hover .btn-desc,
body[data-button-fx="10"] .btn:hover .btn-desc{
  transform:translate3d(calc(var(--btn-copy-x) * -0.45), calc(var(--btn-copy-y) * -0.45), 0);
  opacity:.94;
}
html[data-button-fx="10"] .btn:hover .btn-badge,
body[data-button-fx="10"] .btn:hover .btn-badge{
  transform:translate3d(calc(var(--btn-copy-x) * 2.1), calc((var(--btn-copy-y) * 2.1) - 1px), 0) rotate(45deg);
}

@keyframes btn-fx-orbit-pulse{
  from{ opacity:.56; }
  to{ opacity:.94; }
}

/* ===== 14种按钮颜色 - 更深渐变更立体 ===== */
.btn-primary{
  background: linear-gradient(145deg, #5BA3FF 0%, #2A86FF 45%, #1a6ce0 100%);
  box-shadow: var(--btn-shadow), 0 3px 10px rgba(42,134,255,.20);
}
.btn-primary:hover{ box-shadow: var(--btn-shadow-hover), 0 6px 18px rgba(42,134,255,.25); }

.btn-success{
  background: linear-gradient(145deg, #34E0AE 0%, #00C897 45%, #0aa87e 100%);
  box-shadow: var(--btn-shadow), 0 3px 10px rgba(0,200,151,.20);
}
.btn-success:hover{ box-shadow: var(--btn-shadow-hover), 0 6px 18px rgba(0,200,151,.25); }

.btn-warning{
  background: linear-gradient(145deg, #FFB840 0%, #FF9A00 45%, #e08600 100%);
  box-shadow: var(--btn-shadow), 0 3px 10px rgba(255,154,0,.20);
}
.btn-warning:hover{ box-shadow: var(--btn-shadow-hover), 0 6px 18px rgba(255,154,0,.25); }

.btn-red{
  background: linear-gradient(145deg, #f87171 0%, #ef4444 45%, #dc2626 100%);
  box-shadow: var(--btn-shadow), 0 3px 10px rgba(239,68,68,.20);
}
.btn-red:hover{ box-shadow: var(--btn-shadow-hover), 0 6px 18px rgba(239,68,68,.25); }

.btn-rose{
  background: linear-gradient(145deg, #fb7185 0%, #f43f5e 45%, #e11d48 100%);
  box-shadow: var(--btn-shadow), 0 3px 10px rgba(244,63,94,.20);
}
.btn-rose:hover{ box-shadow: var(--btn-shadow-hover), 0 6px 18px rgba(244,63,94,.25); }

.btn-pink{
  background: linear-gradient(145deg, #f472b6 0%, #ec4899 45%, #db2777 100%);
  box-shadow: var(--btn-shadow), 0 3px 10px rgba(236,72,153,.20);
}
.btn-pink:hover{ box-shadow: var(--btn-shadow-hover), 0 6px 18px rgba(236,72,153,.25); }

.btn-purple{
  background: linear-gradient(145deg, #c084fc 0%, #a855f7 45%, #9333ea 100%);
  box-shadow: var(--btn-shadow), 0 3px 10px rgba(168,85,247,.20);
}
.btn-purple:hover{ box-shadow: var(--btn-shadow-hover), 0 6px 18px rgba(168,85,247,.25); }

.btn-indigo{
  background: linear-gradient(145deg, #818cf8 0%, #6366f1 45%, #4f46e5 100%);
  box-shadow: var(--btn-shadow), 0 3px 10px rgba(99,102,241,.20);
}
.btn-indigo:hover{ box-shadow: var(--btn-shadow-hover), 0 6px 18px rgba(99,102,241,.25); }

.btn-cyan{
  background: linear-gradient(145deg, #22d3ee 0%, #06b6d4 45%, #0891b2 100%);
  box-shadow: var(--btn-shadow), 0 3px 10px rgba(6,182,212,.20);
}
.btn-cyan:hover{ box-shadow: var(--btn-shadow-hover), 0 6px 18px rgba(6,182,212,.25); }

.btn-teal{
  background: linear-gradient(145deg, #2dd4bf 0%, #14b8a6 45%, #0d9488 100%);
  box-shadow: var(--btn-shadow), 0 3px 10px rgba(20,184,166,.20);
}
.btn-teal:hover{ box-shadow: var(--btn-shadow-hover), 0 6px 18px rgba(20,184,166,.25); }

.btn-lime{
  background: linear-gradient(145deg, #a3e635 0%, #84cc16 45%, #65a30d 100%);
  box-shadow: var(--btn-shadow), 0 3px 10px rgba(132,204,22,.20);
}
.btn-lime:hover{ box-shadow: var(--btn-shadow-hover), 0 6px 18px rgba(132,204,22,.25); }

.btn-amber{
  background: linear-gradient(145deg, #fbbf24 0%, #f59e0b 45%, #d97706 100%);
  box-shadow: var(--btn-shadow), 0 3px 10px rgba(245,158,11,.20);
}
.btn-amber:hover{ box-shadow: var(--btn-shadow-hover), 0 6px 18px rgba(245,158,11,.25); }

.btn-brown{
  background: linear-gradient(145deg, #ca8a04 0%, #a16207 45%, #854d0e 100%);
  box-shadow: var(--btn-shadow), 0 3px 10px rgba(161,98,7,.18);
}
.btn-brown:hover{ box-shadow: var(--btn-shadow-hover), 0 6px 18px rgba(161,98,7,.22); }

.btn-gray{
  background: linear-gradient(145deg, #9ca3af 0%, #6b7280 45%, #4b5563 100%);
  box-shadow: var(--btn-shadow), 0 3px 10px rgba(107,114,128,.18);
}
.btn-gray:hover{ box-shadow: var(--btn-shadow-hover), 0 6px 18px rgba(107,114,128,.22); }

.btn-sky{
  background: linear-gradient(145deg, #7dd3fc 0%, #0ea5e9 45%, #0284c7 100%);
  box-shadow: var(--btn-shadow), 0 3px 10px rgba(14,165,233,.20);
}
.btn-sky:hover{ box-shadow: var(--btn-shadow-hover), 0 6px 18px rgba(14,165,233,.25); }

.btn-emerald{
  background: linear-gradient(145deg, #6ee7b7 0%, #10b981 45%, #059669 100%);
  box-shadow: var(--btn-shadow), 0 3px 10px rgba(16,185,129,.20);
}
.btn-emerald:hover{ box-shadow: var(--btn-shadow-hover), 0 6px 18px rgba(16,185,129,.25); }

.btn-violet{
  background: linear-gradient(145deg, #a78bfa 0%, #8b5cf6 45%, #7c3aed 100%);
  box-shadow: var(--btn-shadow), 0 3px 10px rgba(139,92,246,.20);
}
.btn-violet:hover{ box-shadow: var(--btn-shadow-hover), 0 6px 18px rgba(139,92,246,.25); }

.btn-fuchsia{
  background: linear-gradient(145deg, #e879f9 0%, #d946ef 45%, #c026d3 100%);
  box-shadow: var(--btn-shadow), 0 3px 10px rgba(217,70,239,.20);
}
.btn-fuchsia:hover{ box-shadow: var(--btn-shadow-hover), 0 6px 18px rgba(217,70,239,.25); }

.btn-orange{
  background: linear-gradient(145deg, #fb923c 0%, #f97316 45%, #ea580c 100%);
  box-shadow: var(--btn-shadow), 0 3px 10px rgba(249,115,22,.20);
}
.btn-orange:hover{ box-shadow: var(--btn-shadow-hover), 0 6px 18px rgba(249,115,22,.25); }

.btn-slate{
  background: linear-gradient(145deg, #94a3b8 0%, #64748b 45%, #475569 100%);
  box-shadow: var(--btn-shadow), 0 3px 10px rgba(100,116,139,.18);
}
.btn-slate:hover{ box-shadow: var(--btn-shadow-hover), 0 6px 18px rgba(100,116,139,.22); }

/* ===== 扩展 10 色 ===== */
.btn-coral{
  background: linear-gradient(145deg, #ff9e8a 0%, #ff6b5b 45%, #e54a3d 100%);
  box-shadow: var(--btn-shadow), 0 3px 10px rgba(255,107,91,.20);
}
.btn-coral:hover{ box-shadow: var(--btn-shadow-hover), 0 6px 18px rgba(255,107,91,.25); }

.btn-gold{
  background: linear-gradient(145deg, #fde047 0%, #eab308 45%, #a16207 100%);
  box-shadow: var(--btn-shadow), 0 3px 10px rgba(234,179,8,.20);
}
.btn-gold:hover{ box-shadow: var(--btn-shadow-hover), 0 6px 18px rgba(234,179,8,.25); }

.btn-mint{
  background: linear-gradient(145deg, #a7f3d0 0%, #5eead4 45%, #2dd4bf 100%);
  box-shadow: var(--btn-shadow), 0 3px 10px rgba(94,234,212,.20);
  color: #0f3a33 !important;
}
.btn-mint:hover{ box-shadow: var(--btn-shadow-hover), 0 6px 18px rgba(94,234,212,.25); }

.btn-navy{
  background: linear-gradient(145deg, #3b5bdb 0%, #1e3a8a 45%, #0f2566 100%);
  box-shadow: var(--btn-shadow), 0 3px 10px rgba(30,58,138,.25);
}
.btn-navy:hover{ box-shadow: var(--btn-shadow-hover), 0 6px 18px rgba(30,58,138,.30); }

.btn-wine{
  background: linear-gradient(145deg, #be123c 0%, #881337 45%, #4c0519 100%);
  box-shadow: var(--btn-shadow), 0 3px 10px rgba(136,19,55,.25);
}
.btn-wine:hover{ box-shadow: var(--btn-shadow-hover), 0 6px 18px rgba(136,19,55,.30); }

.btn-olive{
  background: linear-gradient(145deg, #a3e635 0%, #65a30d 45%, #3f6212 100%);
  box-shadow: var(--btn-shadow), 0 3px 10px rgba(101,163,13,.20);
}
.btn-olive:hover{ box-shadow: var(--btn-shadow-hover), 0 6px 18px rgba(101,163,13,.25); }

.btn-peach{
  background: linear-gradient(145deg, #fed7aa 0%, #fdba74 45%, #fb923c 100%);
  box-shadow: var(--btn-shadow), 0 3px 10px rgba(253,186,116,.22);
  color: #7c2d12 !important;
}
.btn-peach:hover{ box-shadow: var(--btn-shadow-hover), 0 6px 18px rgba(253,186,116,.28); }

.btn-steel{
  background: linear-gradient(145deg, #64748b 0%, #334155 45%, #1e293b 100%);
  box-shadow: var(--btn-shadow), 0 3px 10px rgba(51,65,85,.25);
}
.btn-steel:hover{ box-shadow: var(--btn-shadow-hover), 0 6px 18px rgba(51,65,85,.30); }

.btn-lavender{
  background: linear-gradient(145deg, #ddd6fe 0%, #c4b5fd 45%, #a78bfa 100%);
  box-shadow: var(--btn-shadow), 0 3px 10px rgba(196,181,253,.25);
  color: #3b0764 !important;
}
.btn-lavender:hover{ box-shadow: var(--btn-shadow-hover), 0 6px 18px rgba(196,181,253,.30); }

.btn-black{
  background: linear-gradient(145deg, #1e293b 0%, #0f172a 45%, #020617 100%);
  box-shadow: var(--btn-shadow), 0 3px 10px rgba(15,23,42,.35);
}
.btn-black:hover{ box-shadow: var(--btn-shadow-hover), 0 6px 18px rgba(15,23,42,.40); }

.btn-primary{ --btn-glow-rgb: 42,134,255; }
.btn-success{ --btn-glow-rgb: 0,200,151; }
.btn-warning{ --btn-glow-rgb: 255,154,0; }
.btn-red{ --btn-glow-rgb: 239,68,68; }
.btn-rose{ --btn-glow-rgb: 244,63,94; }
.btn-pink{ --btn-glow-rgb: 236,72,153; }
.btn-purple{ --btn-glow-rgb: 168,85,247; }
.btn-indigo{ --btn-glow-rgb: 99,102,241; }
.btn-cyan{ --btn-glow-rgb: 6,182,212; }
.btn-teal{ --btn-glow-rgb: 20,184,166; }
.btn-lime{ --btn-glow-rgb: 132,204,22; }
.btn-amber{ --btn-glow-rgb: 245,158,11; }
.btn-brown{ --btn-glow-rgb: 161,98,7; }
.btn-gray{ --btn-glow-rgb: 107,114,128; }
.btn-sky{ --btn-glow-rgb: 14,165,233; }
.btn-emerald{ --btn-glow-rgb: 16,185,129; }
.btn-violet{ --btn-glow-rgb: 139,92,246; }
.btn-fuchsia{ --btn-glow-rgb: 217,70,239; }
.btn-orange{ --btn-glow-rgb: 249,115,22; }
.btn-slate{ --btn-glow-rgb: 100,116,139; }
.btn-coral{ --btn-glow-rgb: 255,107,91; }
.btn-gold{ --btn-glow-rgb: 234,179,8; }
.btn-mint{ --btn-glow-rgb: 94,234,212; }
.btn-navy{ --btn-glow-rgb: 30,58,138; }
.btn-wine{ --btn-glow-rgb: 136,19,55; }
.btn-olive{ --btn-glow-rgb: 101,163,13; }
.btn-peach{ --btn-glow-rgb: 253,186,116; }
.btn-steel{ --btn-glow-rgb: 51,65,85; }
.btn-lavender{ --btn-glow-rgb: 196,181,253; }
.btn-black{ --btn-glow-rgb: 15,23,42; }

/* 默认玻璃主题：只动光影和内部文字，不改变按钮外框尺寸 */
html[data-theme="glass"] .btn{
  background-size: 122% 122%;
  background-position: 50% 54%;
}
html[data-theme="glass"] .btn:hover{
  background-position: 50% 38%;
  box-shadow:
    0 2px 5px rgba(0,0,0,.08),
    0 11px 22px rgba(var(--btn-glow-rgb), .30),
    0 18px 36px -18px rgba(15,23,42,.42),
    inset 0 1px 0 rgba(255,255,255,.42),
    0 0 0 1px rgba(255,255,255,.16);
  border-top-color: rgba(255,255,255,.38);
  border-bottom-color: rgba(0,0,0,.04);
}
html[data-theme="glass"] .btn:hover::before{
  opacity: 1;
  background:
    radial-gradient(circle at var(--btn-hover-x) var(--btn-hover-y),
      rgba(255,255,255,.58) 0%,
      rgba(255,255,255,.22) 27%,
      rgba(255,255,255,0) 58%),
    linear-gradient(180deg,
      rgba(255,255,255,.34) 0%,
      rgba(255,255,255,.13) 38%,
      rgba(255,255,255,.02) 64%,
      rgba(0,0,0,.04) 100%),
    radial-gradient(120% 90% at 20% 0%, rgba(255,255,255,.22), transparent 52%);
}
html[data-theme="glass"] .btn:hover::after{
  left: 8%;
  right: 8%;
  opacity: 1;
  height: 2px;
}
html[data-theme="glass"] .btn:hover > span,
html[data-theme="glass"] .btn:hover .btn-desc{
  transform: translateY(-1px);
  text-shadow: 0 1px 10px rgba(255,255,255,.20), 0 1px 2px rgba(0,0,0,.08);
}
html[data-theme="glass"] .btn:active{
  background-position: 50% 66%;
  box-shadow:
    0 1px 3px rgba(0,0,0,.10),
    0 4px 10px rgba(var(--btn-glow-rgb), .18),
    inset 0 2px 5px rgba(0,0,0,.16),
    inset 0 -1px 0 rgba(255,255,255,.18);
  border-top-color: rgba(0,0,0,.08);
  border-bottom-color: rgba(255,255,255,.20);
  opacity: 1;
}
html[data-theme="glass"] .btn.is-pressing{
  background-position: 50% 66%;
  box-shadow:
    0 1px 3px rgba(0,0,0,.10),
    0 4px 10px rgba(var(--btn-glow-rgb), .18),
    inset 0 2px 5px rgba(0,0,0,.16),
    inset 0 -1px 0 rgba(255,255,255,.18);
  border-top-color: rgba(0,0,0,.08);
  border-bottom-color: rgba(255,255,255,.20);
  opacity: 1;
}
html[data-theme="glass"] .btn:active::before{
  opacity: .68;
  background: linear-gradient(180deg,
    rgba(0,0,0,.08) 0%,
    rgba(255,255,255,.04) 46%,
    rgba(255,255,255,.08) 100%);
}
html[data-theme="glass"] .btn.is-pressing::before{
  opacity: .72;
  background:
    radial-gradient(circle at var(--btn-hover-x) var(--btn-hover-y),
      rgba(255,255,255,.18) 0%,
      rgba(255,255,255,.08) 34%,
      rgba(0,0,0,.10) 72%),
    linear-gradient(180deg,
      rgba(0,0,0,.08) 0%,
      rgba(255,255,255,.04) 46%,
      rgba(255,255,255,.08) 100%);
}
html[data-theme="glass"] .btn:active::after{
  left: 18%;
  right: 18%;
  opacity: .30;
  height: 1px;
}
html[data-theme="glass"] .btn:active > span,
html[data-theme="glass"] .btn:active .btn-desc,
html[data-theme="glass"] .btn.is-pressing > span,
html[data-theme="glass"] .btn.is-pressing .btn-desc{
  transform: translateY(1px);
  opacity: .92;
  text-shadow: 0 1px 1px rgba(0,0,0,.10);
}

/* ===== 波纹效果 ===== */
.ripple{
  position:absolute; border-radius:999px; transform: scale(0);
  animation: ripple .62s ease-out forwards;
  background: rgba(255,255,255,.50); pointer-events:none; mix-blend-mode: screen;
  z-index: 3;
}
@keyframes ripple{ to{ transform: scale(12); opacity:0; } }

/* ===== 小屏适配 ===== */
@media (max-width: 360px){
  :root{ --btn-minh: 36px; }
  .logo-wrap{ width: 48px; height: 48px; }
  .card{ margin-top: 10px; }
}

/* ===== 手机端 ===== */
@media (max-width: 768px){
  :root{
    --card: rgba(255,255,255,.25); --card-border: rgba(255,255,255,.25); --blur: blur(40px) saturate(180%) brightness(1.08);
    --btn-minh: 38px; --btn-radius: 16px;
    --gap: clamp(6px, 2vw, 8px);
    --card-pad: clamp(10px, 3vw, 14px);
    --pad: clamp(10px, 3vw, 14px);
    --mobile-tab-bar-height: 94px;
    --mobile-tab-bottom-clearance: 132px;
  }

  /* 紧凑横向 header */
  .header{
    padding: 10px 12px;
    text-align: left;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 10px;
  }
  .header::before{ opacity: .12; }
  .logo-wrap{
    width: 44px; height: 44px;
    margin: 0; flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(16,24,40,.10);
  }
  .header h1{
    font-size: 1rem; margin-bottom: 0;
    flex: 1; min-width: 0;
  }
  .header .subtitle{
    width: 100%; margin-bottom: 4px;
    font-size: .74rem; line-height: 1.45; margin-top: 1px;
    order: 3;
  }
  .contact-group{
    width: 100%; order: 4;
    gap: 6px;
    margin-top: 4px;
  }
  .contact-item{
    justify-content: flex-start;
    background: rgba(255,255,255,.20); border-color: rgba(255,255,255,.15);
    padding: 8px 10px; font-size: .74rem;
    border-radius: 12px;
    line-height: 1.4;
  }

  .blob{ opacity: .35; }
  body{ padding-bottom: calc(88px + var(--safe-bottom)); }

  /* 卡片更紧凑 */
  .card{ margin-top: 8px; }
  .card-title{
    font-size: .95rem; font-weight: 700;
    margin-bottom: 8px; padding-bottom: 8px;
    border-bottom-width: 2px;
  }
  .card-title > span:first-child{
    padding-left: 10px;
  }
  .card-title > span:first-child::before{
    width: 3px; height: 1em;
  }
  .card-title .bar{ width: 36px; height: 4px; }

  /* 按钮网格移动端 */
  .button-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .btn{ padding: 8px 8px 7px; font-size: clamp(11px, 2.8vw, 12.5px); }

  .divider{ margin: 4px 0; }

  main{ margin-top: 8px; }
}

@media (prefers-color-scheme: dark) and (max-width: 768px){
  :root{
    --card: rgba(20,26,45,.30); --card-border: rgba(255,255,255,.14); --blur: blur(40px) saturate(180%) brightness(1.08);
  }
  .header::before{ opacity:.14; }
  .contact-item{ background: rgba(20,26,45,.28); border-color: rgba(255,255,255,.08); }
}

/* ===== 移动端状态栏 — 底部 / 侧边两种模式 ===== */
.mobile-tab-bar{
  display: none;
  position: fixed !important;
  z-index: 9997;
  pointer-events: none;
  -webkit-transform: translateZ(0);
  transform: translateZ(0) !important;
}
@media (max-width: 768px){
  body.front-mobile-tab-bottom{
    height: 100vh;
    height: 100svh;
    min-height: 100vh;
    min-height: 100svh;
    overflow: hidden;
    padding-left: 0;
    padding-bottom: 0;
  }
  body.front-mobile-tab-bottom .container{
    height: 100%;
    max-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(var(--pad) + var(--mobile-tab-bottom-clearance, 144px) + var(--safe-bottom));
  }
  body.front-mobile-tab-side{
    padding-left: 0;
    padding-bottom: calc(14px + var(--safe-bottom));
  }
  body.front-mobile-tab-bottom main{
    padding-bottom: max(10px, calc(var(--mobile-tab-bottom-clearance, 144px) - 28px));
  }
  body.front-mobile-tab-side .layout{
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    column-gap: 8px;
    align-items: start;
  }
  body.front-mobile-tab-side .header{
    grid-column: 1 / -1;
    width: 100%;
  }
  body.front-mobile-tab-side main{
    grid-column: 2;
    min-width: 0;
    margin-top: 10px;
  }
  .mobile-tab-bar{
    display: flex;
  }
  .mobile-tab-bar.mobile-tab-bottom{
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: 0 !important;
    justify-content: center;
    padding: 0 20px calc(10px + var(--safe-bottom)) 20px;
    contain: layout paint style;
    will-change: auto;
  }
  .mobile-tab-bar.mobile-tab-bottom.is-visual-pinned{
    top: auto !important;
    bottom: 0 !important;
  }
  .mobile-tab-bar.mobile-tab-side{
    left: max(8px, env(safe-area-inset-left, 0px) + 2px) !important;
    right: auto !important;
    top: 50% !important;
    bottom: auto !important;
    padding: 0;
    align-items: center;
    justify-content: flex-start;
    transform: translateY(-50%) translateZ(0) !important;
  }
  .mobile-tab-bar.mobile-tab-side.is-visual-pinned{
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) translateZ(0) !important;
  }
  .category-section{
    scroll-margin-top: 12px;
  }
  body.front-mobile-tab-bottom .category-section:last-of-type{
    margin-bottom: max(16px, calc(var(--mobile-tab-bottom-clearance, 144px) - 40px));
  }
}
.tab-dock{
  display: flex; align-items: center; justify-content: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  pointer-events: auto;
  background:
    linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.055) 45%, rgba(0,0,0,.16)),
    rgba(255,255,255,.08);
  -webkit-backdrop-filter: blur(44px) saturate(180%) brightness(1.04) contrast(.92);
  backdrop-filter: blur(44px) saturate(180%) brightness(1.04) contrast(.92);
  border: 1px solid rgba(255,255,255,.36);
  outline: none;
  box-shadow:
    0 18px 42px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.58),
    inset 0 -1px 0 rgba(0,0,0,.22);
}
.mobile-tab-bottom .tab-dock{
  flex-direction: row;
  gap: 4px;
  width: 100%;
  max-width: 720px;
  min-height: 92px;
  padding: 8px 8px 6px;
  border-radius: var(--mobile-dock-radius, 30px);
  clip-path: inset(0 round var(--mobile-dock-radius, 30px));
}
.mobile-tab-side .tab-dock{
  flex-direction: column;
  justify-content: flex-start;
  gap: 8px;
  width: 64px;
  max-width: 64px;
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  min-height: 0;
  padding: 10px 6px;
  border-radius: 24px;
  overflow: auto;
  clip-path: inset(0 round 24px);
  scrollbar-width: none;
}
.mobile-tab-side .tab-dock::-webkit-scrollbar{ display: none; }
.tab-glass-sample,
.tab-glass-frost,
.tab-glass-caustics,
.tab-glass-edge,
.tab-dock::before,
.tab-dock::after{
  content: "";
  position: absolute;
  border-radius: inherit;
  pointer-events: none;
}
.tab-glass-sample{
  display: none;
}
.tab-glass-frost{
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.16) 0%,
      rgba(255,255,255,0) 34%,
      rgba(0,0,0,.08) 100%),
    radial-gradient(90% 86% at 18% 0%, rgba(255,255,255,.14), rgba(255,255,255,0) 56%);
  -webkit-backdrop-filter: blur(8px) saturate(125%) brightness(1.02) contrast(.94);
  backdrop-filter: blur(8px) saturate(125%) brightness(1.02) contrast(.94);
  opacity: .38;
}
.tab-glass-caustics{
  display: none;
}
.tab-glass-edge{
  display: none;
}
.tab-dock::before{
  z-index: 4;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.52) 0,
      rgba(255,255,255,.18) 1px,
      rgba(255,255,255,0) 9px),
    radial-gradient(130% 56% at 50% -20%, rgba(255,255,255,.22), rgba(255,255,255,.05) 36%, rgba(255,255,255,0) 70%);
  mix-blend-mode: screen;
  opacity: .56;
}
.tab-dock::after{
  z-index: 5;
  inset: 0;
  box-shadow:
    inset 0 0 0 .5px rgba(255,255,255,.58),
    inset 0 1.5px 0 rgba(255,255,255,.66),
    inset 0 8px 14px rgba(255,255,255,.08),
    inset 0 -10px 18px rgba(0,0,0,.10),
    inset 0 -1px 0 rgba(255,255,255,.12);
}
@media (prefers-color-scheme: dark){
  .tab-dock{
    background:
      linear-gradient(180deg, rgba(120,132,154,.14) 0%, rgba(44,52,68,.12) 44%, rgba(18,24,35,.22) 100%),
      rgba(22,28,40,.12);
    border-color: rgba(255,255,255,.20);
    box-shadow:
      0 18px 54px rgba(0,0,0,.48),
      0 2px 8px rgba(255,255,255,.06) inset,
      inset 0 1.5px 0 rgba(255,255,255,.28),
      inset 1px 0 0 rgba(255,255,255,.10),
      inset -1px 0 0 rgba(255,255,255,.08),
      inset 0 -1.5px 0 rgba(0,0,0,.45);
  }
  .tab-glass-sample{
    filter: blur(22px) saturate(85%) brightness(.92) contrast(.98);
    opacity: .92;
  }
  .tab-glass-frost{
    background:
      linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.035) 40%, rgba(0,0,0,.18) 100%),
      radial-gradient(95% 92% at 18% 0%, rgba(255,255,255,.11), rgba(255,255,255,0) 52%),
      radial-gradient(120% 96% at 88% 118%, rgba(0,0,0,.28), rgba(0,0,0,0) 58%);
    opacity: .82;
  }
  .tab-dock::before{ opacity: .44; }
  .tab-dock::after{
    box-shadow:
      inset 0 0 0 .5px rgba(255,255,255,.30),
      inset 0 10px 18px rgba(255,255,255,.08),
      inset 0 -18px 26px rgba(0,0,0,.26);
  }
}

/* 移动端左侧状态栏适配：只增强玻璃效果，不改尺寸 */
.mobile-tab-side .tab-dock{
  background:
    radial-gradient(138% 148% at 0% 12%, rgba(255,255,255,.18) 0%, rgba(255,255,255,.06) 30%, rgba(255,255,255,.008) 62%, rgba(8,14,24,.035) 100%),
    linear-gradient(180deg, rgba(255,255,255,.034), rgba(255,255,255,.012) 42%, rgba(8,15,30,.022));
  background-color: rgba(112,116,126,.098);
  -webkit-backdrop-filter: blur(26px) saturate(108%) brightness(1.04) contrast(.91);
  backdrop-filter: blur(26px) saturate(108%) brightness(1.04) contrast(.91);
  border-color: rgba(255,255,255,.16);
  box-shadow:
    0 14px 26px rgba(8,15,30,.07),
    0 2px 6px rgba(255,255,255,.018) inset,
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -8px 12px rgba(8,15,30,.018),
    inset 0 -1px 0 rgba(8,15,30,.05);
}
.mobile-tab-side .tab-glass-sample{
  z-index: 0;
  inset: -18%;
  display: block;
  background-image:
    var(--dock-bg-image),
    radial-gradient(54% 62% at 10% 12%, rgba(255,255,255,.16), transparent 74%),
    radial-gradient(48% 52% at 100% 84%, rgba(95,128,255,.09), transparent 76%);
  background-position:
    left center,
    0 0,
    100% 100%;
  background-repeat: no-repeat;
  background-size:
    cover,
    auto,
    auto;
  background-attachment:
    scroll,
    scroll,
    scroll;
  filter: url(#dock-refraction) blur(4.8px) saturate(60%) brightness(.95) contrast(1.00) grayscale(.10);
  opacity: .48;
  mix-blend-mode: normal;
  transform: scale(1.045) translate3d(0, 0, 0);
}
.mobile-tab-side .tab-glass-frost{
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.078) 0%,
      rgba(255,255,255,.028) 24%,
      rgba(255,255,255,.010) 48%,
      rgba(7,14,28,.022) 100%),
    radial-gradient(92% 84% at 18% 0%, rgba(255,255,255,.088), rgba(255,255,255,0) 56%);
  -webkit-backdrop-filter: blur(7px) saturate(104%) brightness(1.01) contrast(.96);
  backdrop-filter: blur(7px) saturate(104%) brightness(1.01) contrast(.96);
  opacity: .09;
}
.mobile-tab-side .tab-glass-caustics{
  display: block;
  z-index: 2;
  inset: -2px;
  background:
    radial-gradient(42% 34% at 18% 8%, rgba(255,255,255,.10), rgba(255,255,255,0) 72%),
    radial-gradient(46% 44% at 60% 96%, rgba(95,128,255,.014), rgba(95,128,255,0) 74%);
  mix-blend-mode: screen;
  opacity: .018;
}
.mobile-tab-side .tab-glass-edge{
  z-index: 3;
  inset: .5px;
  display: block;
  border-radius: inherit;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.010),
    inset 0 6px 8px rgba(255,255,255,.014),
    inset 0 -8px 12px rgba(8,15,30,.018);
  opacity: 1;
}
.mobile-tab-side .tab-dock::before{
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.58) 0,
      rgba(255,255,255,.10) 1px,
      rgba(255,255,255,.008) 7px,
      rgba(255,255,255,0) 14px),
    radial-gradient(120% 48% at 50% -12%, rgba(255,255,255,.06), rgba(255,255,255,.012) 38%, rgba(255,255,255,0) 72%);
  opacity: .18;
}
.mobile-tab-side .tab-dock::after{
  box-shadow:
    inset 0 0 0 .5px rgba(255,255,255,.10),
    inset 0 1.5px 0 rgba(255,255,255,.12),
    inset 0 6px 10px rgba(255,255,255,.010),
    inset 0 -8px 12px rgba(8,15,30,.012),
    inset 0 -1px 0 rgba(255,255,255,.010);
}
@media (prefers-color-scheme: dark){
  .mobile-tab-side .tab-dock{
    background:
      radial-gradient(138% 148% at 0% 12%, rgba(180,195,232,.064) 0%, rgba(70,82,112,.038) 30%, rgba(18,24,35,.038) 60%, rgba(8,12,20,.13) 100%),
      linear-gradient(180deg, rgba(90,100,124,.034) 0%, rgba(26,34,48,.028) 44%, rgba(10,15,24,.11) 100%);
    background-color: rgba(40,44,54,.086);
    border-color: rgba(255,255,255,.052);
    box-shadow:
      0 14px 28px rgba(0,0,0,.18),
      0 2px 6px rgba(255,255,255,.010) inset,
      inset 0 1.5px 0 rgba(255,255,255,.05),
      inset 0 -8px 12px rgba(0,0,0,.08),
      inset 0 -1.5px 0 rgba(0,0,0,.14);
  }
  .mobile-tab-side .tab-glass-sample{
    filter: url(#dock-refraction) blur(4.8px) saturate(46%) brightness(.81) contrast(.99) grayscale(.16);
    opacity: .44;
  }
  .mobile-tab-side .tab-glass-frost{
    background:
      linear-gradient(180deg, rgba(255,255,255,.032) 0%, rgba(255,255,255,.012) 40%, rgba(0,0,0,.058) 100%),
      radial-gradient(95% 92% at 18% 0%, rgba(255,255,255,.026), rgba(255,255,255,0) 52%);
    opacity: .055;
  }
  .mobile-tab-side .tab-glass-caustics{
    opacity: .010;
  }
  .mobile-tab-side .tab-glass-edge{
    border-color: rgba(255,255,255,.040);
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.006),
      inset 0 6px 8px rgba(255,255,255,.008),
      inset 0 -8px 12px rgba(0,0,0,.07);
  }
  .mobile-tab-side .tab-dock::before{ opacity: .10; }
  .mobile-tab-side .tab-dock::after{
    box-shadow:
      inset 0 0 0 .5px rgba(255,255,255,.040),
      inset 0 6px 10px rgba(255,255,255,.006),
      inset 0 -8px 12px rgba(0,0,0,.06);
  }
}

/* 仅增强移动端底部状态栏：做更像 iOS 的液态玻璃层次 */
.mobile-tab-bottom .tab-dock{
  min-height: 84px;
  padding: 5px 12px 6px;
  background:
    radial-gradient(140% 164% at 50% -52%, rgba(255,255,255,.18) 0%, rgba(255,255,255,.06) 24%, rgba(255,255,255,.008) 48%, rgba(8,14,24,.035) 100%),
    linear-gradient(180deg, rgba(255,255,255,.034), rgba(255,255,255,.012) 42%, rgba(8,15,30,.022));
  background-color: rgba(112,116,126,.098);
  -webkit-backdrop-filter: blur(26px) saturate(108%) brightness(1.04) contrast(.91);
  backdrop-filter: blur(26px) saturate(108%) brightness(1.04) contrast(.91);
  border-color: rgba(255,255,255,.16);
  box-shadow:
    0 16px 30px rgba(8,15,30,.07),
    0 2px 6px rgba(255,255,255,.018) inset,
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -8px 12px rgba(8,15,30,.018),
    inset 0 -1px 0 rgba(8,15,30,.05);
}
.mobile-tab-bottom .tab-glass-sample{
  z-index: 0;
  inset: -24%;
  display: block;
  background-image:
    var(--dock-bg-image),
    radial-gradient(58% 64% at 18% 12%, rgba(255,255,255,.20), transparent 72%),
    radial-gradient(52% 58% at 82% 10%, rgba(102,217,255,.16), transparent 74%),
    radial-gradient(78% 76% at 50% 112%, rgba(74,102,255,.12), transparent 80%);
  background-position:
    var(--dock-bg-position, 50% 38%),
    0 0,
    100% 0,
    50% 100%;
  background-repeat: no-repeat;
  background-size:
    cover,
    auto,
    auto,
    auto;
  background-attachment:
    scroll,
    scroll,
    scroll,
    scroll;
  filter: url(#dock-refraction) blur(4.8px) saturate(60%) brightness(.95) contrast(1.00) grayscale(.10);
  opacity: .48;
  mix-blend-mode: normal;
  transform: scale(1.045) translate3d(0, 0, 0);
}
.mobile-tab-bottom .tab-glass-frost{
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.078) 0%,
      rgba(255,255,255,.028) 22%,
      rgba(255,255,255,.010) 48%,
      rgba(7,14,28,.022) 100%),
    radial-gradient(92% 84% at 18% 0%, rgba(255,255,255,.088), rgba(255,255,255,0) 56%),
    radial-gradient(88% 96% at 82% 112%, rgba(62,96,176,.028), rgba(62,96,176,0) 64%);
  -webkit-backdrop-filter: blur(7px) saturate(104%) brightness(1.01) contrast(.96);
  backdrop-filter: blur(7px) saturate(104%) brightness(1.01) contrast(.96);
  opacity: .09;
}
.mobile-tab-bottom .tab-glass-caustics{
  z-index: 2;
  inset: -2px;
  display: block;
  background:
    radial-gradient(46% 40% at 20% 4%, rgba(255,255,255,.12), rgba(255,255,255,0) 72%),
    radial-gradient(30% 24% at 72% 12%, rgba(255,255,255,.04), rgba(255,255,255,0) 76%),
    radial-gradient(44% 42% at 54% 118%, rgba(95,128,255,.015), rgba(95,128,255,0) 74%);
  mix-blend-mode: screen;
  opacity: .018;
}
.mobile-tab-bottom .tab-glass-edge{
  z-index: 3;
  inset: .5px;
  display: block;
  border-radius: inherit;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.010),
    inset 0 6px 10px rgba(255,255,255,.014),
    inset 0 -8px 12px rgba(8,15,30,.018);
  opacity: 1;
}
.mobile-tab-bottom .tab-dock::before{
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.62) 0,
      rgba(255,255,255,.11) 1px,
      rgba(255,255,255,.010) 7px,
      rgba(255,255,255,0) 16px),
    radial-gradient(128% 58% at 50% -18%, rgba(255,255,255,.08), rgba(255,255,255,.014) 38%, rgba(255,255,255,0) 72%);
  opacity: .20;
}
.mobile-tab-bottom .tab-dock::after{
  box-shadow:
    inset 0 0 0 .5px rgba(255,255,255,.10),
    inset 0 1.5px 0 rgba(255,255,255,.12),
    inset 0 6px 10px rgba(255,255,255,.010),
    inset 0 -8px 12px rgba(8,15,30,.012),
    inset 0 -1px 0 rgba(255,255,255,.010);
}
@media (prefers-color-scheme: dark){
  .mobile-tab-bottom .tab-dock{
    background:
      radial-gradient(140% 160% at 50% -42%, rgba(180,195,232,.064) 0%, rgba(70,82,112,.038) 28%, rgba(18,24,35,.038) 56%, rgba(8,12,20,.13) 100%),
      linear-gradient(180deg, rgba(90,100,124,.034) 0%, rgba(26,34,48,.028) 44%, rgba(10,15,24,.11) 100%);
    background-color: rgba(40,44,54,.086);
    border-color: rgba(255,255,255,.052);
    box-shadow:
      0 16px 34px rgba(0,0,0,.18),
      0 2px 6px rgba(255,255,255,.010) inset,
      inset 0 1.5px 0 rgba(255,255,255,.05),
      inset 0 -10px 16px rgba(0,0,0,.08),
      inset 0 -1.5px 0 rgba(0,0,0,.14);
  }
  .mobile-tab-bottom .tab-glass-sample{
    background-size:
      cover,
      auto,
      auto,
      auto;
    background-position:
      var(--dock-bg-position, 50% 38%),
      0 0,
      100% 0,
      50% 100%;
    background-attachment:
      scroll,
      scroll,
      scroll,
      scroll;
    filter: url(#dock-refraction) blur(4.8px) saturate(46%) brightness(.81) contrast(.99) grayscale(.16);
    opacity: .44;
  }
  .mobile-tab-bottom .tab-glass-frost{
    background:
      linear-gradient(180deg, rgba(255,255,255,.032) 0%, rgba(255,255,255,.012) 40%, rgba(0,0,0,.06) 100%),
      radial-gradient(95% 92% at 18% 0%, rgba(255,255,255,.026), rgba(255,255,255,0) 52%),
      radial-gradient(120% 96% at 88% 118%, rgba(0,0,0,.06), rgba(0,0,0,0) 58%);
    opacity: .055;
  }
  .mobile-tab-bottom .tab-glass-caustics{
    opacity: .010;
  }
  .mobile-tab-bottom .tab-glass-edge{
    border-color: rgba(255,255,255,.040);
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.006),
      inset 0 6px 8px rgba(255,255,255,.008),
      inset 0 -8px 12px rgba(0,0,0,.07);
  }
  .mobile-tab-bottom .tab-dock::before{ opacity: .10; }
  .mobile-tab-bottom .tab-dock::after{
    box-shadow:
      inset 0 0 0 .5px rgba(255,255,255,.040),
      inset 0 6px 10px rgba(255,255,255,.006),
      inset 0 -10px 14px rgba(0,0,0,.06);
  }
}

/* ============================================================
   移动端底部 Dock —— iOS 26 液态玻璃（高透 · 高亮 · 真折射）
   ① 真折射：backdrop-filter: url(#liquid-glass) 让玻璃背后内容
            产生真实光学扭曲（Chrome / 新版 iOS 生效）；
            不支持的浏览器自动走前面的纯 CSS 兜底（blur+saturate）。
   ② 高透高亮：低白色占比 + 高亮度高饱和，通透发光、不发灰。
   ③ 中性亮边/镜面高光：只用白色，不抽背景色（不再有青色卷边）。
   仅作用于底部 Dock，不动图标/文字/侧边栏/其它功能。
   ============================================================ */
.mobile-tab-bottom .tab-dock{
  /* —— 纯 CSS 兜底（所有浏览器，含 iOS Safari）：通透磨砂 —— */
  -webkit-backdrop-filter: blur(var(--mobile-dock-blur, 16px)) saturate(185%) brightness(var(--mobile-dock-brightness, 1.18));
  backdrop-filter: blur(var(--mobile-dock-blur, 16px)) saturate(185%) brightness(var(--mobile-dock-brightness, 1.18));
  /* 极低白色占比，越透越像 iOS26；靠亮度/饱和提“通透发光”，而非靠白色发灰 */
  background:
    linear-gradient(180deg,
      rgba(255,255,255,var(--mobile-dock-gradient-top-alpha, .22)) 0%,
      rgba(255,255,255,var(--mobile-dock-gradient-mid-alpha, .08)) 46%,
      rgba(255,255,255,var(--mobile-dock-gradient-bottom-alpha, .13)) 100%);
  background-color: rgba(255,255,255,var(--mobile-dock-bg-alpha, .10));
  border: 1px solid rgba(255,255,255,var(--mobile-dock-border-alpha, .60));
  /* 柔投影抬升 + 顶/底镜面亮线 + 顶部内透镜高光 + 底部厚度暗影 */
  box-shadow:
    0 16px 38px rgba(15,23,42,.20),
    0 4px 10px rgba(15,23,42,.10),
    inset 0 1.5px 0.5px rgba(255,255,255,.95),
    inset 0 -1.5px 1px rgba(255,255,255,.32),
    inset 0 8px 16px rgba(255,255,255,.10),
    inset 0 -13px 22px rgba(15,23,42,.05);
}
/* 折射纹理层（稳定版）：自包含的柔和光纹，用 filter:url() 折射成流动的液态玻璃光晕。
   不依赖背景对齐 —— iPhone / 安卓 / 电脑长一个样、不会错位。
   开关：--mobile-dock-refraction-display（block/none，后台“折射纹理”开关控制）。
   扭曲深度：由 #liquid-glass 的位移 scale 控制（后台“折射深度”滑块，PHP 输出）。 */
.mobile-tab-bottom .tab-glass-sample{
  display: var(--mobile-dock-refraction-display, block);
  inset: -25%;
  z-index: 0;
  background:
    radial-gradient(38% 60% at 20% 12%, rgba(255,255,255,.55), rgba(255,255,255,0) 60%),
    radial-gradient(34% 54% at 76% 22%, rgba(255,255,255,.38), rgba(255,255,255,0) 64%),
    radial-gradient(48% 72% at 52% 112%, rgba(255,255,255,.30), rgba(255,255,255,0) 66%),
    linear-gradient(118deg, rgba(255,255,255,0) 28%, rgba(255,255,255,.26) 47%, rgba(255,255,255,0) 60%);
  filter: url(#liquid-glass) brightness(1.04);
  opacity: .55;
  mix-blend-mode: screen;
  transform: none;
}
/* 多余的柔光/焦散层全部关掉，保持最大通透 */
.mobile-tab-bottom .tab-glass-frost{
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: none;
  opacity: 0;
}
.mobile-tab-bottom .tab-glass-caustics{
  display: none;
}
/* 边缘透镜高光（iOS 稳定生效，替代 url() 折射）：
   四周纯白光带——边沿最亮、向内快速淡出，叠加内圈亮环 + 柔光，
   模拟厚玻璃边沿对背景的“折射提亮”。全程纯白，绝不抽背景色（不会有青边）。
   强度由 --mobile-dock-lens-alpha 控制（后台“边缘光”滑块可调）。*/
.mobile-tab-bottom .tab-glass-edge{
  display: block;
  inset: 0;
  padding: 0;
  border: none;
  border-radius: inherit;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  -webkit-mask: none;
  mask: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,var(--mobile-dock-lens-alpha, .50)), rgba(255,255,255,0) 16px),
    linear-gradient(0deg,   rgba(255,255,255,calc(var(--mobile-dock-lens-alpha, .50) * .55)), rgba(255,255,255,0) 13px),
    linear-gradient(90deg,  rgba(255,255,255,calc(var(--mobile-dock-lens-alpha, .50) * .62)), rgba(255,255,255,0) 12px),
    linear-gradient(270deg, rgba(255,255,255,calc(var(--mobile-dock-lens-alpha, .50) * .62)), rgba(255,255,255,0) 12px);
  mix-blend-mode: screen;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,var(--mobile-dock-edge-alpha, .55)),
    inset 0 0 10px rgba(255,255,255,var(--mobile-dock-edge-glow-alpha, .22));
  opacity: 1;
}
/* 顶沿一条锐利镜面高光细线 */
.mobile-tab-bottom .tab-dock::before{
  background:
    linear-gradient(180deg, rgba(255,255,255,var(--mobile-dock-topline-alpha, .90)) 0, rgba(255,255,255,.20) 2px, rgba(255,255,255,0) 9px);
  mix-blend-mode: screen;
  opacity: var(--mobile-dock-topline-opacity, .8);
}
/* 整体一圈细中性内描边 */
.mobile-tab-bottom .tab-dock::after{
  box-shadow:
    inset 0 0 0 .5px rgba(255,255,255,.38);
}
@media (prefers-color-scheme: dark){
  .mobile-tab-bottom .tab-dock{
    -webkit-backdrop-filter: blur(var(--mobile-dock-blur, 16px)) saturate(165%) brightness(1.02);
    backdrop-filter: blur(var(--mobile-dock-blur, 16px)) saturate(165%) brightness(1.02);
    background:
      linear-gradient(180deg,
        rgba(54,62,82,var(--mobile-dock-dark-gradient-top-alpha, .30)) 0%,
        rgba(20,26,40,var(--mobile-dock-dark-gradient-mid-alpha, .20)) 46%,
        rgba(20,26,40,var(--mobile-dock-dark-gradient-bottom-alpha, .28)) 100%);
    background-color: rgba(20,26,40,var(--mobile-dock-dark-bg-alpha, .20));
    border-color: rgba(255,255,255,var(--mobile-dock-dark-border-alpha, .18));
    box-shadow:
      0 16px 38px rgba(0,0,0,.46),
      0 4px 10px rgba(0,0,0,.24),
      inset 0 1.5px 0.5px rgba(255,255,255,.28),
      inset 0 -1.5px 1px rgba(255,255,255,.10),
      inset 0 8px 16px rgba(255,255,255,.06),
      inset 0 -13px 22px rgba(0,0,0,.22);
  }
  .mobile-tab-bottom .tab-glass-sample{
    background:
      radial-gradient(38% 60% at 20% 12%, rgba(255,255,255,.30), rgba(255,255,255,0) 60%),
      radial-gradient(34% 54% at 76% 22%, rgba(255,255,255,.20), rgba(255,255,255,0) 64%),
      radial-gradient(48% 72% at 52% 112%, rgba(255,255,255,.16), rgba(255,255,255,0) 66%),
      linear-gradient(118deg, rgba(255,255,255,0) 28%, rgba(255,255,255,.14) 47%, rgba(255,255,255,0) 60%);
    filter: url(#liquid-glass) brightness(.96);
    opacity: .42;
  }
  .mobile-tab-bottom .tab-glass-edge{
    background:
      linear-gradient(180deg, rgba(255,255,255,calc(var(--mobile-dock-lens-alpha, .50) * .50)), rgba(255,255,255,0) 16px),
      linear-gradient(0deg,   rgba(255,255,255,calc(var(--mobile-dock-lens-alpha, .50) * .26)), rgba(255,255,255,0) 13px),
      linear-gradient(90deg,  rgba(255,255,255,calc(var(--mobile-dock-lens-alpha, .50) * .32)), rgba(255,255,255,0) 12px),
      linear-gradient(270deg, rgba(255,255,255,calc(var(--mobile-dock-lens-alpha, .50) * .32)), rgba(255,255,255,0) 12px);
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,var(--mobile-dock-dark-edge-alpha, .22)),
      inset 0 0 10px rgba(255,255,255,var(--mobile-dock-dark-edge-glow-alpha, .10));
  }
  .mobile-tab-bottom .tab-dock::before{ opacity: var(--mobile-dock-dark-topline-alpha, .42); }
  .mobile-tab-bottom .tab-dock::after{
    box-shadow: inset 0 0 0 .5px rgba(255,255,255,.16);
  }
}

.tab-item{
  display: flex; flex-direction: column; align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  z-index: 6;
  transition: transform .15s ease;
}
.mobile-tab-bottom .tab-item{
  flex: 1;
  width: auto;
  gap: 3px;
  padding: 4px 3px;
  border-radius: 18px;
  transform-origin: center bottom;
}
.mobile-tab-side .tab-item{
  flex: 0 0 auto;
  width: 100%;
  min-height: 72px;
}
.tab-item:active{ transform: scale(.88); }

/* 图标容器 — 圆角方块 */
.tab-icon-wrap{
  width: 52px; height: 52px;
  border-radius: 15px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(145deg, rgba(255,255,255,.60), rgba(255,255,255,.30));
  border: 1px solid rgba(255,255,255,.40);
  box-shadow:
    0 2px 8px rgba(0,0,0,.06),
    inset 0 1px 0 rgba(255,255,255,.50);
  overflow: hidden;
  transition: all .2s ease;
  position: relative;
  flex-shrink: 0;
}
@media (prefers-color-scheme: dark){
  .tab-icon-wrap{
    background: linear-gradient(145deg, rgba(80,80,90,.65), rgba(50,50,58,.50));
    border-color: rgba(255,255,255,.12);
    box-shadow:
      0 2px 8px rgba(0,0,0,.25),
      inset 0 1px 0 rgba(255,255,255,.08);
  }
}
.tab-icon-wrap img{
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 14px;
}
.tab-icon-wrap .tab-emoji{
  font-size: 27px; line-height: 1;
}
.mobile-tab-side .tab-icon-wrap{
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.030), rgba(255,255,255,.006)),
    rgba(255,255,255,0);
  border-color: rgba(255,255,255,.035);
  box-shadow:
    0 2px 6px rgba(8,15,30,.014),
    inset 0 1px 0 rgba(255,255,255,.05);
}
.mobile-tab-side .tab-icon-wrap img{
  border-radius: 12px;
}
.mobile-tab-side .tab-icon-wrap .tab-emoji{
  font-size: 23px;
}
@media (prefers-color-scheme: dark){
  .mobile-tab-side .tab-icon-wrap{
    background: linear-gradient(145deg, rgba(88,96,112,.028), rgba(34,38,48,.012));
    border-color: rgba(255,255,255,.012);
    box-shadow:
      0 2px 6px rgba(0,0,0,.05),
      inset 0 1px 0 rgba(255,255,255,.018);
  }
}

/* 选中态 — 高亮光圈 */
.tab-item.active .tab-icon-wrap{
  box-shadow:
    0 0 0 2px rgba(59,130,246,.75),
    0 4px 14px rgba(59,130,246,.25);
  border-color: rgba(59,130,246,.60);
}
.mobile-tab-bottom .tab-icon-wrap{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.030), rgba(255,255,255,.006)),
    rgba(255,255,255,0);
  border-color: rgba(255,255,255,.035);
  box-shadow:
    0 2px 6px rgba(8,15,30,.014),
    inset 0 1px 0 rgba(255,255,255,.05);
}
.mobile-tab-bottom .tab-icon-wrap img{
  border-radius: 11px;
}
.mobile-tab-bottom .tab-icon-wrap .tab-emoji{
  font-size: 20px;
}
@media (prefers-color-scheme: dark){
  .mobile-tab-bottom .tab-icon-wrap{
    background: linear-gradient(145deg, rgba(88,96,112,.028), rgba(34,38,48,.012));
    border-color: rgba(255,255,255,.012);
    box-shadow:
      0 2px 6px rgba(0,0,0,.05),
      inset 0 1px 0 rgba(255,255,255,.018);
  }
}
.mobile-tab-bottom .tab-item::before{
  content: "";
  position: absolute;
  inset: 0 0 0;
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.022), rgba(255,255,255,.004) 46%, rgba(255,255,255,0)),
    rgba(255,255,255,0);
  border: 1px solid rgba(255,255,255,.072);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -8px 12px rgba(8,15,30,.008),
    0 6px 12px rgba(8,15,30,.010);
  opacity: 0;
  transform: scale(.84) translateY(4px);
  transform-origin: center bottom;
  transition: opacity .22s ease, transform .22s ease, box-shadow .22s ease;
  pointer-events: none;
  z-index: -1;
}
.mobile-tab-bottom .tab-item.active::before{
  opacity: 1;
  transform: scale(1) translateY(0);
}
.mobile-tab-bottom .tab-item.active{
  transform: translateY(-1px);
}
.mobile-tab-bottom .tab-item.active .tab-icon-wrap{
  box-shadow:
    0 3px 8px rgba(255,255,255,.012),
    inset 0 1px 0 rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.072);
}

/* 名称 */
.tab-label{
  font-size: 10px; font-weight: 600;
  color: rgba(31,41,55,.74);
  width: 100%; text-align: center;
  line-height: 1.12;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-all;
}
.mobile-tab-side .tab-label{
  font-size: 9.5px;
  line-height: 1.08;
  color: rgba(255,255,255,.50);
  text-shadow: 0 1px 5px rgba(8,15,30,.20);
}
.mobile-tab-side .tab-item::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,.004) 46%, rgba(255,255,255,0)),
    rgba(255,255,255,0);
  border: 1px solid rgba(255,255,255,.060);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -6px 10px rgba(8,15,30,.008),
    0 4px 8px rgba(8,15,30,.010);
  opacity: 0;
  transform: scale(.90);
  transition: opacity .22s ease, transform .22s ease;
  pointer-events: none;
  z-index: -1;
}
.mobile-tab-side .tab-item.active::before{
  opacity: 1;
  transform: scale(1);
}
.mobile-tab-side .tab-item.active .tab-icon-wrap{
  box-shadow:
    0 3px 8px rgba(255,255,255,.012),
    inset 0 1px 0 rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.070);
}
.mobile-tab-bottom .tab-label{
  color: rgba(255,255,255,.50);
  text-shadow: 0 1px 6px rgba(8,15,30,.24);
  font-weight: 600;
  font-size: 9px;
  line-height: 1.08;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
@media (prefers-color-scheme: dark){
  .tab-label{ color: rgba(255,255,255,.70); }
  .mobile-tab-bottom .tab-label{ color: rgba(255,255,255,.46); }
  .mobile-tab-side .tab-label{ color: rgba(255,255,255,.44); }
}
.tab-item.active .tab-label{
  color: #2563eb; font-weight: 700;
}
.mobile-tab-bottom .tab-item.active .tab-label{
  color: rgba(255,255,255,.84);
  text-shadow:
    0 1px 8px rgba(8,15,30,.12),
    0 0 8px rgba(255,255,255,.05);
}
.mobile-tab-side .tab-item.active .tab-label{
  color: rgba(255,255,255,.80);
  text-shadow:
    0 1px 7px rgba(8,15,30,.12),
    0 0 6px rgba(255,255,255,.04);
}
@media (prefers-color-scheme: dark){
  .tab-item.active .tab-label{ color: #60a5fa; }
  .mobile-tab-bottom .tab-item::before{
    background:
      linear-gradient(180deg, rgba(255,255,255,.016), rgba(255,255,255,.004) 46%, rgba(255,255,255,0)),
      rgba(255,255,255,0);
    border-color: rgba(255,255,255,.032);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.07),
      inset 0 -8px 12px rgba(0,0,0,.06),
      0 6px 12px rgba(0,0,0,.06);
  }
  .mobile-tab-bottom .tab-item.active .tab-label{
    color: rgba(255,255,255,.78);
  }
  .mobile-tab-bottom .tab-item.active .tab-icon-wrap{
    box-shadow:
      0 3px 8px rgba(0,0,0,.07),
      inset 0 1px 0 rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.042);
  }
  .mobile-tab-side .tab-item::before{
    background:
      linear-gradient(180deg, rgba(255,255,255,.014), rgba(255,255,255,.003) 46%, rgba(255,255,255,0)),
      rgba(255,255,255,0);
    border-color: rgba(255,255,255,.028);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.05),
      inset 0 -6px 10px rgba(0,0,0,.05),
      0 4px 8px rgba(0,0,0,.05);
  }
  .mobile-tab-side .tab-item.active .tab-label{
    color: rgba(255,255,255,.74);
  }
  .mobile-tab-side .tab-item.active .tab-icon-wrap{
    box-shadow:
      0 3px 8px rgba(0,0,0,.06),
      inset 0 1px 0 rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.038);
  }
}

/* 数量角标 */
.tab-badge{
  display: none !important;
  position: absolute; top: -4px; right: 50%; margin-right: -26px;
  font-size: 9px; font-weight: 700; line-height: 1;
  color: #fff;
  background: #ef4444;
  padding: 2px 5px; border-radius: 8px;
  min-width: 18px; text-align: center;
  box-shadow: 0 1px 4px rgba(239,68,68,.40);
  z-index: 2;
}
.tab-item .tab-badge{ display: none !important; }
.tab-dock .tab-badge{
  display: none !important;
}

@media (max-width: 768px){
  .category-section{ display: none; }
  .category-section.active{ display: block; }
}

/* ===== 模板发现区 ===== */
.discover-shell{
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at top right, rgba(42,134,255,.14), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.08));
}
.discover-mobile-brand{
  display: none;
}
.discover-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}
.discover-eyebrow{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(42,134,255,.88);
  margin-bottom: 8px;
}
.discover-title{
  font-size: clamp(1.4rem, 3.8vw, 2rem);
  line-height: 1.08;
  margin-bottom: 8px;
}
.discover-subtitle{
  max-width: 720px;
  color: var(--muted);
  line-height: 1.7;
}
.discover-stats{
  display: grid;
  grid-template-columns: repeat(3, minmax(84px, 1fr));
  gap: 10px;
  min-width: min(100%, 290px);
}
.discover-stat{
  padding: 14px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.26);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.20);
  text-align: center;
}
.discover-stat strong{
  display: block;
  font-size: clamp(1.18rem, 3vw, 1.55rem);
  line-height: 1;
}
.discover-stat span{
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
}
.discover-toolbar{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: stretch;
  margin-bottom: 14px;
}
.discover-toolbar.is-search-box-disabled{
  display: flex;
  justify-content: flex-start;
}
.discover-search{
  display: block;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.20);
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
}
.discover-search-label{
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}
.discover-search-row{
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.discover-search input{
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-size: 16px;
  line-height: 1.2;
}
.discover-search input::placeholder{
  color: rgba(107,114,128,.85);
}
.discover-search-submit{
  flex: 0 0 auto;
  min-width: 54px;
  height: 32px;
  padding: 0 14px;
  border: 1px solid rgba(37,99,235,.16);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0)) border-box,
    linear-gradient(135deg, #177cff, #35a6ff) padding-box;
  color: #fff;
  box-shadow:
    0 9px 18px rgba(37,131,255,.22),
    inset 0 1px 0 rgba(255,255,255,.34);
  font: 900 13px/1 inherit;
  letter-spacing: .02em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.discover-search-submit:hover{
  filter: saturate(1.05);
  box-shadow:
    0 12px 24px rgba(37,131,255,.27),
    inset 0 1px 0 rgba(255,255,255,.38);
}
.discover-search-submit:focus{
  outline: 0;
}
.discover-search-submit:focus-visible{
  outline: 2px solid rgba(37,131,255,.28);
  outline-offset: 2px;
}
.discover-search-submit:active{
  transform: translateY(1px);
  box-shadow:
    0 6px 14px rgba(37,131,255,.20),
    inset 0 1px 3px rgba(15,23,42,.13);
}
.discover-modes{
  display: inline-flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.discover-mode,
.discover-category,
.discover-reset{
  appearance: none;
  border: 0;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
}
.discover-mode{
  min-height: 100%;
  padding: 0 16px;
  border-radius: 16px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.28);
  color: var(--text);
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.20);
}
.discover-mode.is-active,
.discover-category.is-active,
.discover-reset{
  background: linear-gradient(135deg, rgba(42,134,255,.95), rgba(0,200,151,.92));
  color: #fff;
  box-shadow: 0 12px 24px rgba(42,134,255,.18);
}
.discover-categories{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.discover-category{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 13px;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.25);
  color: var(--text);
  font-size: 13px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}
.discover-category-label-mobile{
  display: none;
}
.discover-category strong{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(15,23,42,.08);
  font-size: 11px;
}
.discover-category.is-active strong{
  background: rgba(255,255,255,.16);
}
.discover-feedback{
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 13px;
}
.discover-reset{
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 700;
}
.discover-flow-hint{
  display: none;
}
.discover-mode:hover,
.discover-category:hover,
.discover-reset:hover{
  transform: translateY(-1px);
}
.card-title-meta{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.card-count{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 62px;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(42,134,255,.10);
  color: #2563eb;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
  letter-spacing: -.01em;
}
.template-link-card{
  position: relative;
  justify-content: flex-start;
  align-items: stretch;
  gap: 12px;
  padding: 18px 18px 16px;
  min-height: 302px;
  height: auto;
  text-align: left;
  background:
    linear-gradient(180deg, rgba(255,255,255,.84), rgba(255,255,255,.58)),
    linear-gradient(135deg, rgba(var(--btn-glow-rgb), .10), rgba(255,255,255,.12) 62%);
  border-color: rgba(255,255,255,.58);
  backdrop-filter: blur(16px);
  box-shadow:
    0 20px 34px rgba(15,23,42,.08),
    inset 0 1px 0 rgba(255,255,255,.82);
}
.template-link-card[hidden],
.template-section[hidden],
.category-section[hidden],
.template-empty-state[hidden],
[data-template-divider][hidden]{
  display: none !important;
}
.template-recommend-corner{
  position: absolute;
  top: 14px;
  left: 14px;
  right: auto;
  z-index: 8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  height: 34px;
  padding: 0 16px;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 999px;
  background: var(--recommended-badge-color, #43c7ab);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .06em;
  box-shadow: 0 8px 18px rgba(15,23,42,.18);
  pointer-events: none;
}
.template-link-card.is-recommended{
  box-shadow:
    0 24px 40px rgba(15,23,42,.10),
    0 12px 24px rgba(67,199,171,.08),
    inset 0 1px 0 rgba(255,255,255,.86);
}
.template-link-card.has-template-poster{
  min-height: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  overflow: visible;
}
.template-link-card.has-template-poster.is-recommended{
  box-shadow: none;
}
.template-preview-poster{
  display: block;
  width: 100%;
  line-height: 0;
}
.template-link-card.has-template-poster .template-recommend-corner{
  top: 0;
  left: 0;
  right: auto;
  z-index: 9;
  width: 68px;
  height: 68px;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 12px 0 0 0;
  background: transparent;
  color: transparent;
  font-size: 0;
  letter-spacing: 0;
  box-shadow: none;
  overflow: hidden;
}
.template-link-card.has-template-poster .template-recommend-corner::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-top: 68px solid var(--recommended-badge-color, #43c7ab);
  border-right: 68px solid transparent;
  filter: drop-shadow(0 6px 10px rgba(15,23,42,.16));
}
.template-link-card.has-template-poster .template-recommend-corner::after{
  content: "推荐";
  position: absolute;
  top: 13px;
  left: 2px;
  width: 56px;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  letter-spacing: .08em;
  text-shadow: 0 1px 2px rgba(15,23,42,.18);
  transform: rotate(-45deg);
  transform-origin: center;
}
.template-preview-poster img{
  width: 100%;
  height: auto;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}
.template-link-top,
.template-link-main,
.template-link-meta{
  width: 100%;
}
.template-link-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.template-pill-group{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.template-link-index{
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  color: rgba(255,255,255,.82);
  white-space: nowrap;
}
.template-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
}
.template-pill-recommended{
  background: rgba(67,199,171,.20);
  color: #f4fffb;
  border: 1px solid rgba(67,199,171,.30);
}
.template-pill-preview{
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.82);
  border: 1px solid rgba(255,255,255,.16);
}
.template-preview-stage{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 104px;
  grid-template-areas:
    "desktop mobile"
    "title title";
  column-gap: 16px;
  row-gap: 12px;
  align-items: stretch;
  width: 100%;
  min-height: 0;
}
.template-preview-device{
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}
.template-preview-device-desktop{
  grid-area: desktop;
  align-self: start;
}
.template-preview-device-mobile{
  grid-area: mobile;
  align-self: stretch;
  justify-self: end;
  width: 104px;
  min-height: 0;
}
.template-preview-device-mobile::before{
  content: none;
}
.template-preview-device-mobile::after{
  content: none;
}
.template-preview-caption{
  display: inline-flex;
  align-items: center;
  justify-self: start;
  min-height: 0;
  padding: 0 0 0 4px;
  border-radius: 0;
  background: transparent;
  border: none;
  color: rgba(71,85,105,.80);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
  text-align: left;
  white-space: nowrap;
}
.template-preview-media{
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: visible;
  min-height: 0;
  width: 100%;
  margin-top: auto;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}
.template-preview-frame{
  position: relative;
  display: block;
  width: 100%;
  background: transparent;
}
.template-preview-frame::after{
  content: '';
  position: absolute;
  inset: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
  z-index: 2;
}
.template-preview-frame-laptop{
  aspect-ratio: 780 / 440;
  filter: drop-shadow(0 16px 28px rgba(15,23,42,.12));
}
.template-preview-frame-laptop::after{
  background-image: url("../devices/laptop-frame.svg");
}
.template-preview-frame-phone{
  aspect-ratio: 320 / 688;
  filter: drop-shadow(0 16px 22px rgba(15,23,42,.16));
}
.template-preview-frame-phone::after{
  background-image: url("../devices/phone-frame.svg");
}
.template-preview-screen{
  position: absolute;
  z-index: 1;
  display: block;
  width: auto;
  height: auto;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 12px 22px rgba(15,23,42,.08);
}
.template-preview-frame-laptop .template-preview-screen{
  left: 14.23%;
  top: 11.14%;
  width: 71.54%;
  height: 71.14%;
  border-radius: 14px;
}
.template-preview-frame-phone .template-preview-screen{
  left: 10.94%;
  top: 3.78%;
  width: 78.13%;
  height: 92.44%;
  border-radius: 38px;
}
.template-preview-media img{
  width: 100%;
  height: 100%;
  display: block;
  background: #fff;
}
.template-preview-screen-desktop img{
  object-fit: cover;
  object-position: center top;
  transform: scale(1.08);
  transform-origin: center top;
}
.template-preview-screen-mobile img{
  object-fit: cover;
  object-position: center top;
  transform: scale(1.02);
  transform-origin: center top;
}
.template-preview-empty{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 100%;
  padding: 8px;
  text-align: center;
  color: #64748b;
  font-size: 11px;
  line-height: 1.45;
  font-weight: 700;
  background:
    linear-gradient(135deg, rgba(255,255,255,.92), rgba(241,245,249,.98)),
    repeating-linear-gradient(45deg, rgba(148,163,184,.08) 0 10px, rgba(255,255,255,.12) 10px 20px);
}
.template-link-main{
  grid-area: title;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  min-width: 0;
  min-height: 0;
  padding: 2px 2px 0 0;
}
.template-link-copy{
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.template-link-copy-simple{
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
}
.template-link-card .btn-title,
.template-link-card .btn-desc{
  width: auto;
  text-align: left;
  transform: translate3d(var(--btn-copy-x), var(--btn-copy-y), 0);
}
.template-link-card .btn-title{
  font-size: 1.02rem;
  font-weight: 800;
  line-height: 1.32;
  color: rgba(255,255,255,.98);
  text-shadow: 0 6px 18px rgba(15,23,42,.20);
  -webkit-line-clamp: 2;
}
.template-link-card .btn-desc{
  display: none;
}
.template-link-meta{
  display: none;
}
.template-chip{
  display: inline-flex;
  align-items: center;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.78);
  font-size: 11px;
  line-height: 1;
}
.template-chip-ghost{
  background: rgba(15,23,42,.12);
}
.template-empty-state{
  text-align: center;
  padding: 36px 20px;
}
.template-empty-eyebrow{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(42,134,255,.86);
  margin-bottom: 8px;
}
.template-empty-state h2{
  font-size: clamp(1.25rem, 3.8vw, 1.65rem);
  margin-bottom: 10px;
}
.template-empty-state p{
  color: var(--muted);
}

/* ===== 搜索状态下的移动端处理 ===== */
body.is-search-active .mobile-tab-bar{
  opacity: 0;
  pointer-events: none;
}
body.is-search-active.front-mobile-tab-bottom{
  padding-bottom: calc(14px + var(--safe-bottom));
}
body.is-search-active.front-mobile-tab-bottom main{
  padding-bottom: 0;
}
body.is-search-active .mobile-tab-bar .tab-badge{
  display: none !important;
}
.mobile-tab-bar .tab-badge{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -2px;
  right: 50%;
  margin-right: -28px;
  min-width: 20px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ef4444, #fb7185);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 8px 14px rgba(239,68,68,.26);
}

@media (max-width: 768px){
  body.is-search-active .category-section{
    display: block;
  }
  body.front-mobile-tab-side.is-search-active .layout{
    display: block;
  }
  body.front-mobile-tab-side.is-search-active main{
    grid-column: auto;
    margin-top: 0;
  }
  .discover-head,
  .discover-toolbar,
  .discover-feedback{
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: stretch;
  }
  .discover-shell{
    padding: 12px;
  }
  .discover-head{
    gap: 10px;
    margin-bottom: 12px;
  }
  .discover-eyebrow{
    display: none;
  }
  .discover-title{
    font-size: 1.18rem;
    line-height: 1.18;
    margin-bottom: 6px;
  }
  .discover-subtitle{
    max-width: none;
    font-size: .82rem;
    line-height: 1.55;
  }
  .discover-stats{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  .discover-stat{
    padding: 10px 8px;
    border-radius: 14px;
  }
  .discover-stat strong{
    font-size: 1.02rem;
  }
  .discover-stat span{
    margin-top: 4px;
    font-size: 11px;
  }
  .discover-toolbar{
    gap: 10px;
    margin-bottom: 10px;
  }
  .discover-search{
    padding: 10px 12px;
    border-radius: 16px;
  }
  .discover-search-label{
    display: none;
  }
  .template-search-input{
    font-size: 16px;
  }
  .discover-search input{
    font-size: 16px;
  }
  .discover-search-submit{
    min-width: 48px;
    height: 30px;
    padding: 0 11px;
    border-radius: 11px;
    font-size: 12px;
  }
  .discover-modes{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }
  .discover-mode{
    min-height: 40px;
    padding: 0 10px;
    font-size: 13px;
    border-radius: 14px;
  }
  .discover-categories{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(138px, 1fr));
    flex-wrap: initial;
    overflow: visible;
    -webkit-overflow-scrolling: auto;
    scrollbar-width: none;
    gap: 8px;
    padding: 2px 0 4px;
    margin: 0;
    scroll-snap-type: none;
  }
  .discover-categories::-webkit-scrollbar{
    display: none;
  }
  .discover-category{
    width: 100%;
    min-width: 0;
    justify-content: space-between;
    white-space: normal;
    padding: 9px 12px;
    font-size: 12px;
    scroll-snap-align: none;
  }
  .discover-category strong{
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    font-size: 10px;
  }
  .discover-feedback{
    margin-top: 10px;
    font-size: 12px;
    align-items: flex-start;
  }
  .discover-feedback p{
    line-height: 1.45;
  }
  .discover-reset{
    padding: 8px 12px;
  }
  .template-link-card{
    min-height: 0;
    padding: 14px 14px 15px;
  }
  .template-link-card.has-template-poster{
    padding: 0;
  }
  .template-preview-stage{
    grid-template-columns: minmax(0, 1fr) 88px;
    grid-template-areas:
      "desktop mobile"
      "title title";
    column-gap: 12px;
    row-gap: 10px;
  }
  .template-preview-device{
    gap: 8px;
  }
  .template-preview-caption{
    min-height: 0;
    padding: 0 0 0 2px;
    font-size: 11px;
  }
  .template-preview-device-mobile{
    width: 88px;
    justify-self: end;
    align-self: stretch;
  }
  .template-preview-frame-laptop .template-preview-screen{
    border-radius: 12px;
  }
  .template-preview-frame-phone .template-preview-screen{
    border-radius: 30px;
  }
  .template-link-main{
    min-height: 0;
    padding: 2px 0 0;
    justify-content: flex-start;
    align-items: flex-start;
  }
  .template-link-copy-simple{
    align-items: flex-start;
    justify-content: flex-start;
  }
  .template-link-card .btn-title,
  .template-link-card .btn-desc{
    text-align: left;
  }
  .template-link-card .btn-title{
    font-size: 1rem;
    line-height: 1.32;
    -webkit-line-clamp: 2;
  }
  .button-grid{
    grid-template-columns: 1fr;
  }
}

@media (prefers-color-scheme: dark){
  .discover-shell{
    background:
      radial-gradient(circle at top right, rgba(96,165,250,.12), transparent 32%),
      linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  }
  .discover-search,
  .discover-mode,
  .discover-category,
  .discover-stat{
    background: rgba(15,23,42,.22);
    border-color: rgba(255,255,255,.12);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  }
  .discover-category strong{
    background: rgba(255,255,255,.10);
  }
  .card-count{
    background: rgba(96,165,250,.16);
    color: #bfdbfe;
  }
}

/* ===== 页脚 ===== */
.footer{
  text-align: center; color: var(--muted);
  font-size: 12px; padding: 20px 0 6px; opacity: .7;
}

/* ===================================================
   FAB（悬浮按钮）：返回顶部 + 主题切换
   =================================================== */
.fab-group{
  position: fixed;
  right: 16px;
  bottom: calc(16px + var(--safe-bottom));
  z-index: 998;
  display: flex; flex-direction: column-reverse; gap: 10px;
  pointer-events: none;
}
.fab-group > .fab{ pointer-events: auto; }

.fab{
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.45);
  background: rgba(255,255,255,.55);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  backdrop-filter: blur(20px) saturate(1.6);
  color: var(--text);
  box-shadow: 0 8px 20px rgba(16,24,40,.18), inset 0 1px 0 rgba(255,255,255,.45);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), opacity .25s ease, background .2s;
}
.fab:hover{
  transform: translateY(-2px) scale(1.04);
  background: rgba(255,255,255,.75);
}
.fab:active{ transform: translateY(0) scale(.96); }

/* 返回顶部默认隐藏，滚动后显示 */
.fab-top{
  opacity: 0; pointer-events: none;
  transform: translateY(8px) scale(.9);
}
.fab-group.show-top .fab-top{
  opacity: 1; pointer-events: auto;
  transform: translateY(0) scale(1);
}

@media (prefers-color-scheme: dark){
  .fab{
    background: rgba(20,26,45,.55);
    border-color: rgba(255,255,255,.12);
    box-shadow: 0 8px 24px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.08);
  }
  .fab:hover{ background: rgba(30,40,66,.72); }
}

/* 手机端避开底部 Tab Dock */
@media (max-width: 768px){
  .fab-group{
    bottom: calc(96px + var(--safe-bottom));
    right: 12px;
  }
  .fab{ width: 40px; height: 40px; }
}

/* ===================================================
   💬 客服悬浮按钮（PC / 移动端通用，可自由拖动）
   关键：用 display:contents 避免 transform 创建 containing-block，
         保证子元素的 position:fixed 以视窗（viewport）为基准定位。
   =================================================== */
.yz-svc{
  display: contents;
  --yz-svc-bg: linear-gradient(135deg,#8b5cf6,#6366f1);
  --yz-svc-shadow: 0 12px 30px rgba(99,102,241,.35);
  --yz-svc-offset: 0px;
  --yz-svc-size: 58px;
}
.yz-svc-color-purple { --yz-svc-bg: linear-gradient(135deg,#8b5cf6,#6366f1); --yz-svc-shadow: 0 12px 30px rgba(99,102,241,.38); }
.yz-svc-color-blue   { --yz-svc-bg: linear-gradient(135deg,#3b82f6,#06b6d4); --yz-svc-shadow: 0 12px 30px rgba(59,130,246,.38); }
.yz-svc-color-green  { --yz-svc-bg: linear-gradient(135deg,#10b981,#059669); --yz-svc-shadow: 0 12px 30px rgba(16,185,129,.38); }
.yz-svc-color-pink   { --yz-svc-bg: linear-gradient(135deg,#ec4899,#f43f5e); --yz-svc-shadow: 0 12px 30px rgba(236,72,153,.38); }
.yz-svc-color-orange { --yz-svc-bg: linear-gradient(135deg,#f59e0b,#ef4444); --yz-svc-shadow: 0 12px 30px rgba(245,158,11,.38); }
.yz-svc-color-dark   { --yz-svc-bg: linear-gradient(135deg,#1f2937,#374151); --yz-svc-shadow: 0 12px 30px rgba(31,41,55,.45); }

.yz-svc-btn{
  /* 直接使用 fixed 定位，相对视窗（无 transform 祖先） */
  position: fixed;
  top: 50%;
  right: 14px;
  margin-top: var(--yz-svc-offset);
  z-index: 9999; /* 高于 festivalCanvas(9998) 与 fab-group(998) */
  width: var(--yz-svc-size); height: var(--yz-svc-size);
  border-radius: 50%;
  border: none;
  background: var(--yz-svc-bg);
  color: #fff;
  cursor: grab;
  box-shadow: var(--yz-svc-shadow);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 22px; line-height: 1;
  transform: translateY(-50%);
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;                  /* 拖动时不触发页面滚动 */
  user-select: none; -webkit-user-select: none;
  appearance: none; -webkit-appearance: none;
  outline: none;
  padding: 0;
  gap: 1px;
}
.yz-svc-btn:hover{ transform: translateY(-50%) scale(1.08); }
.yz-svc-btn:active{ transform: translateY(-50%) scale(.94); }
.yz-svc-btn:focus,
.yz-svc-btn:focus-visible{ outline: none; }

/* 拖动中：跟随指针，禁用过渡 */
.yz-svc.is-dragging .yz-svc-btn{
  transition: none !important;
  cursor: grabbing;
  transform: none;
}
/* 用户拖动后：使用精确 top/left 定位 */
.yz-svc.is-positioned .yz-svc-btn{
  top: var(--yz-svc-top, 50%);
  left: var(--yz-svc-left, auto);
  right: auto;
  margin-top: 0;
  transform: none;
}
.yz-svc.is-positioned .yz-svc-btn:hover{ transform: scale(1.08); }
.yz-svc.is-positioned .yz-svc-btn:active{ transform: scale(.94); }
.yz-svc.is-positioned .yz-svc-btn:focus,
.yz-svc.is-positioned .yz-svc-btn:focus-visible{ outline: none; }
.yz-svc-btn-icon{
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.22));
  pointer-events: none;
  font-size: 22px; line-height: 1;
}
.yz-svc-btn-label{
  pointer-events: none;
  font-size: 10px; line-height: 1; font-weight: 700;
  letter-spacing: 1px;
  text-shadow: 0 1px 1px rgba(0,0,0,.28);
  margin-top: 2px;
  white-space: nowrap;
  max-width: calc(var(--yz-svc-size) - 8px);
  overflow: hidden;
  text-align: center;
}
.yz-svc-btn-ring{
  position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid currentColor; opacity: 0; pointer-events: none;
}
.yz-svc-pulse .yz-svc-btn-ring{
  animation: yzSvcPulse 2s infinite;
  opacity: 1;
}
@keyframes yzSvcPulse {
  0%   { transform: scale(1);   opacity: .55; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}
@keyframes yzSvcMobileHalo {
  0%, 100% {
    opacity: .52;
    transform: scale(1);
  }
  50% {
    opacity: .9;
    transform: scale(1.08);
  }
}
@keyframes yzSvcMobileRing {
  0% {
    opacity: .72;
    transform: scale(1);
  }
  75%,
  100% {
    opacity: 0;
    transform: scale(1.34);
  }
}
@keyframes yzSvcMobileBreath {
  0%, 100% {
    box-shadow:
      0 8px 18px rgba(109,96,232,.20),
      0 0 0 5px rgba(150,130,255,.06);
  }
  50% {
    box-shadow:
      0 11px 22px rgba(109,96,232,.25),
      0 0 0 8px rgba(150,130,255,.09);
  }
}
/* 按钮打开状态：切换图标为 × */
.yz-svc.is-open .yz-svc-btn-icon{ transform: rotate(45deg); transition: transform .25s; }
.yz-svc.is-open .yz-svc-btn{ box-shadow: 0 8px 18px rgba(0,0,0,.2); }

/* 展开面板 — 桌面默认贴在按钮右侧；JS 在拖动后会动态写入 left/top 覆盖 */
.yz-svc-panel{
  position: fixed;
  right: calc(14px + var(--yz-svc-size) + 10px);  /* 默认 = 按钮左侧 */
  top: 50%;
  transform: translateY(-50%) translateX(10px);
  z-index: 9999;  /* 高于 festivalCanvas */
  width: 280px;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(18px) saturate(1.6);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(16,24,40,.22), 0 2px 6px rgba(16,24,40,.08);
  overflow: hidden;
  opacity: 0; visibility: hidden;
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
}
.yz-svc.is-open .yz-svc-panel{
  opacity: 1; visibility: visible;
  pointer-events: auto;
  transform: translateY(-50%) translateX(0);
}
.yz-svc-head{
  background: var(--yz-svc-bg);
  color: #fff;
  padding: 14px 16px;
  display: flex; align-items: flex-start; gap: 8px;
}
.yz-svc-head-text{ flex: 1; min-width: 0; }
.yz-svc-title{ font-size: 15px; font-weight: 700; letter-spacing: .3px; }
.yz-svc-sub{ font-size: 12px; opacity: .88; margin-top: 2px; }
.yz-svc-close{
  background: rgba(255,255,255,.2); color: #fff; border: none;
  width: 24px; height: 24px; border-radius: 50%;
  font-size: 16px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s;
}
.yz-svc-close:hover{ background: rgba(255,255,255,.35); }
.yz-svc-body{ padding: 8px; max-height: 60vh; overflow-y: auto; }
.yz-svc-item{
  display: flex; align-items: center; gap: 10px;
  padding: 10px 8px;
  border-radius: 10px;
  transition: background .18s;
}
.yz-svc-item + .yz-svc-item{ border-top: 1px dashed rgba(0,0,0,.06); }
.yz-svc-item:hover{ background: rgba(99,102,241,.06); }
.yz-svc-item-ico{
  flex: 0 0 32px; width: 32px; height: 32px; border-radius: 10px;
  background: rgba(99,102,241,.1);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px;
}
.yz-svc-item-main{ flex: 1; min-width: 0; }
.yz-svc-item-label{ font-size: 13px; font-weight: 600; color: #1f2937; }
.yz-svc-item-value{
  font-size: 12px; color: #6b7280; margin-top: 2px;
  word-break: break-all; overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
}
.yz-svc-item-value.is-mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "PingFang SC", monospace;
  letter-spacing: .5px;
  color: #374151;
  font-weight: 600;
  font-size: 13px;
}
.yz-svc-item-value[data-copy]{
  cursor: pointer;
  transition: color .15s, background .15s;
  display: inline-block;
  padding: 1px 4px;
  margin-left: -4px;
  border-radius: 4px;
}
.yz-svc-item-value[data-copy]:hover{
  color: var(--yz-svc-bg);
  background: rgba(0,0,0,.04);
}
.yz-svc-item-act{ flex-shrink: 0; }
.yz-svc-act{
  display: inline-block;
  padding: 5px 10px;
  font-size: 12px; font-weight: 600;
  border-radius: 8px; border: none; cursor: pointer;
  background: var(--yz-svc-bg); color: #fff;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .15s, opacity .15s;
}
.yz-svc-act:hover{ transform: translateY(-1px); opacity: .92; }
.yz-svc-act:active{ transform: translateY(0); }
.yz-svc-foot{
  text-align: center; padding: 8px 6px;
  font-size: 11px; color: #9ca3af;
  border-top: 1px solid rgba(0,0,0,.05);
}

/* 弹层（二维码 / QQ 提示）— 比 panel 高一层，确保盖在面板和遮罩之上 */
.yz-svc-modal{
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
}
.yz-svc-modal[hidden]{ display: none; }
.yz-svc-modal-mask{
  position: absolute; inset: 0;
  background: rgba(15,23,42,.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: yzSvcFade .22s ease;
}
@keyframes yzSvcFade { from { opacity: 0; } to { opacity: 1; } }
.yz-svc-modal-box{
  position: relative;
  min-width: 280px; max-width: 92vw;
  background: #fff; border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
  padding: 22px 24px 20px;
  animation: yzSvcPop .26s cubic-bezier(.34,1.56,.64,1);
}
@keyframes yzSvcPop {
  from { opacity: 0; transform: scale(.9) translateY(12px); }
  to   { opacity: 1; transform: scale(1)  translateY(0); }
}
.yz-svc-modal-close{
  position: absolute; right: 10px; top: 10px;
  width: 30px; height: 30px; border-radius: 50%;
  border: none; background: rgba(0,0,0,.06); color: #374151;
  font-size: 18px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s;
}
.yz-svc-modal-close:hover{ background: rgba(0,0,0,.12); }
.yz-svc-qr-title{ font-weight: 700; font-size: 15px; color: #1f2937; text-align: center; margin-bottom: 4px; }
.yz-svc-qr-sub{ font-size: 12px; color: #6b7280; text-align: center; margin-bottom: 14px; }
.yz-svc-qr-img{
  width: 220px; height: 220px; object-fit: contain;
  display: block; margin: 0 auto;
  border-radius: 10px;
  background: #f3f4f6;
}
.yz-svc-qr-hint{ font-size: 12px; color: #9ca3af; text-align: center; margin-top: 12px; }
.yz-svc-qr-value{
  margin-top: 10px; text-align: center;
  font-size: 13px; color: #374151; font-weight: 600;
  background: #f3f4f6; padding: 6px 10px; border-radius: 8px;
  word-break: break-all;
}

/* 吐司 */
.yz-svc-toast{
  position: fixed; left: 50%; bottom: 40px; transform: translateX(-50%);
  background: rgba(15,23,42,.9); color: #fff;
  padding: 10px 18px; border-radius: 10px; font-size: 13px;
  z-index: 10001;
  box-shadow: 0 8px 22px rgba(0,0,0,.25);
  animation: yzSvcToast .3s ease;
}
@keyframes yzSvcToast {
  from { opacity: 0; transform: translate(-50%, 12px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* 深色模式 */
@media (prefers-color-scheme: dark){
  .yz-svc-panel{ background: rgba(20,26,45,.95); border-color: rgba(255,255,255,.08); }
  .yz-svc-item-label{ color: #e5e7eb; }
  .yz-svc-item-value{ color: #9ca3af; }
  .yz-svc-item-value.is-mono{ color: #e5e7eb; }
  .yz-svc-item-value[data-copy]:hover{ background: rgba(255,255,255,.06); }
  .yz-svc-foot{ color: #6b7280; border-top-color: rgba(255,255,255,.06); }
  .yz-svc-item:hover{ background: rgba(255,255,255,.04); }
  .yz-svc-modal-box{ background: #1f2937; color: #e5e7eb; }
  .yz-svc-qr-title{ color: #f3f4f6; }
  .yz-svc-qr-sub{ color: #9ca3af; }
  .yz-svc-qr-value{ background: rgba(255,255,255,.06); color: #e5e7eb; }
  .yz-svc-modal-close{ background: rgba(255,255,255,.08); color: #e5e7eb; }
}

/* ===== 移动端适配 ===== */
@media (max-width: 768px){
  .yz-svc{ --yz-svc-size: 52px; }
  .yz-svc-btn{
    right: 12px;
    gap: 1px;
    overflow: visible;
    background: linear-gradient(180deg, #8f7af6 0%, #7465ec 100%);
    box-shadow:
      0 8px 18px rgba(109,96,232,.20),
      0 0 0 5px rgba(150,130,255,.06);
    animation: yzSvcMobileBreath 2.8s ease-in-out infinite;
  }
  .yz-svc-btn::before{
    content: "";
    position: absolute;
    inset: -7px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(145,124,246,.18) 0%, rgba(145,124,246,.06) 50%, rgba(145,124,246,0) 74%);
    z-index: -1;
    animation: yzSvcMobileHalo 2.8s ease-in-out infinite;
    pointer-events: none;
  }
  .yz-svc-btn-icon{
    display: block;
    width: auto;
    height: auto;
    border-radius: 0;
    background: transparent;
    color: inherit;
    box-shadow: none;
    font-size: 20px;
  }
  .yz-svc-btn-label{
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .5px;
    margin-top: 0;
    max-width: none;
    text-shadow: 0 1px 2px rgba(48,35,124,.14);
  }
  .yz-svc-btn-ring{
    display: none;
  }
  .yz-svc-pulse .yz-svc-btn-ring{
    display: none;
  }

  /* 打开时锁定页面滚动 + 全屏遮罩 */
  body.yz-svc-open{ overflow: hidden; position: relative; }
  body.yz-svc-open::before{
    content: ""; position: fixed; inset: 0;
    background: rgba(15,23,42,.5);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 9997;
    animation: yzSvcFade .22s ease;
  }

  /* 面板：屏幕正中弹层，强制覆盖 PC 端的右侧定位 */
  .yz-svc-panel{
    position: fixed !important;
    inset: auto !important;
    left: 50% !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -46%) scale(.96) !important;
    width: min(86vw, 340px) !important;
    max-width: none !important;
    max-height: 72vh;
    border-radius: 18px;
    z-index: 9999;
  }
  .yz-svc.is-open .yz-svc-panel{
    transform: translate(-50%, -50%) scale(1) !important;
  }
  .yz-svc-body{ max-height: 52vh; }
  .yz-svc-item{ padding: 12px 10px; }
  .yz-svc-item-ico{ flex: 0 0 36px; width: 36px; height: 36px; font-size: 18px; }
  .yz-svc-item-label{ font-size: 14px; }
  .yz-svc-item-value{ font-size: 13px; }
  .yz-svc-item-value.is-mono{ font-size: 14px; }
  .yz-svc-act{ padding: 7px 12px; font-size: 13px; }
  .yz-svc-qr-img{ width: 200px; height: 200px; }

  /* 移动端模态框尺寸优化 */
  .yz-svc-modal-box{ min-width: 240px; padding: 18px 16px 16px; }
  .yz-svc-modal-box{ width: min(86vw, 340px); }
}
@media (max-width: 360px){
  .yz-svc-panel{ width: 92vw !important; }
  .yz-svc-modal-box{ width: 92vw; }
}

/* ===================================================
   Glass theme visual reset
   Keep the real photo backdrop and liquid Dock, while giving the page
   an opaque reading plane so screenshots and copy remain crisp.
   =================================================== */
html[data-theme="glass"]{
  --container: 1240px;
  --radius: 14px;
  --card: rgba(248, 250, 252, .84);
  --card-border: rgba(255, 255, 255, .68);
  --blur: blur(24px) saturate(135%) brightness(1.03);
  --shadow: 0 16px 42px rgba(15, 23, 42, .12);
  --shadow-hover: 0 20px 50px rgba(15, 23, 42, .16);
  --text: #172033;
  --muted: #5f6b7d;
}
html[data-theme="glass"] .bg-blobs{
  display: none;
}
html[data-theme="glass"] .container{
  padding-left: clamp(18px, 2.4vw, 30px);
  padding-right: clamp(18px, 2.4vw, 30px);
}
html[data-theme="glass"] .glass{
  background-color: var(--card);
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.52), rgba(255,255,255,.14) 44%, rgba(241,245,249,.14));
  border-color: var(--card-border);
  box-shadow:
    var(--shadow),
    inset 0 1px 0 rgba(255,255,255,.92),
    inset 0 -1px 0 rgba(15,23,42,.045);
}
html[data-theme="glass"] .header{
  min-height: 112px;
  grid-template-columns: 68px minmax(0, 1fr) minmax(280px, 380px);
  gap: 4px 18px;
  padding: 18px 22px;
  overflow: visible;
}
html[data-theme="glass"] .header::before{
  opacity: .08;
}
html[data-theme="glass"] .logo-wrap{
  width: 64px;
  height: 64px;
  border-radius: 18px;
  box-shadow: 0 8px 20px rgba(15,23,42,.13);
}
html[data-theme="glass"] .header h1{
  font-size: 1.55rem;
  font-weight: 800;
  color: #111827;
}
html[data-theme="glass"] .header .subtitle{
  font-size: .92rem;
  color: #64748b;
}
html[data-theme="glass"] .contact-group{
  grid-template-columns: 1fr;
}
html[data-theme="glass"] .contact-item{
  min-height: 54px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,.58);
  border-color: rgba(148,163,184,.20);
  color: #1676d2 !important;
  font-size: .86rem;
}
html[data-theme="glass"] .discover-shell{
  margin-top: 14px;
  padding: 22px;
  background:
    radial-gradient(circle at 95% 0%, rgba(14,165,233,.13), transparent 28%),
    linear-gradient(135deg, rgba(255,255,255,.90), rgba(241,245,249,.80));
}
html[data-theme="glass"] .discover-head{
  align-items: center;
  margin-bottom: 14px;
}
html[data-theme="glass"] .discover-eyebrow{
  display: none;
}
html[data-theme="glass"] .discover-title{
  font-size: clamp(1.55rem, 2.4vw, 2rem);
  letter-spacing: 0;
}
html[data-theme="glass"] .discover-subtitle{
  line-height: 1.55;
}
html[data-theme="glass"] .discover-stat,
html[data-theme="glass"] .discover-search,
html[data-theme="glass"] .discover-mode,
html[data-theme="glass"] .discover-category{
  background: rgba(255,255,255,.78);
  border-color: rgba(148,163,184,.24);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92);
}
html[data-theme="glass"] .discover-stat{
  border-radius: 10px;
  padding: 11px 10px;
}
html[data-theme="glass"] .discover-toolbar{
  margin-bottom: 12px;
}
html[data-theme="glass"] .discover-search{
  border-radius: 12px;
  padding: 10px 13px;
}
html[data-theme="glass"] .discover-search-label{
  margin-bottom: 4px;
}
html[data-theme="glass"] .discover-mode{
  border-radius: 11px;
}
html[data-theme="glass"] .discover-mode.is-active,
html[data-theme="glass"] .discover-category.is-active,
html[data-theme="glass"] .discover-reset{
  background: #1677ff;
  box-shadow: 0 8px 18px rgba(22,119,255,.20);
}
html[data-theme="glass"] .discover-category{
  border-radius: 10px;
  padding: 9px 12px;
}
html[data-theme="glass"] .category-section{
  margin-top: 14px;
  padding: 18px;
  background-color: rgba(248,250,252,.90);
}
html[data-theme="glass"] .category-section .card-title{
  margin-bottom: 14px;
  padding-bottom: 11px;
  color: #172033;
}
html[data-theme="glass"] .category-section .card-title > span:first-child{
  color: #172033 !important;
}
html[data-theme="glass"] .category-section .button-grid{
  gap: 14px;
}
html[data-theme="glass"] .template-link-card.has-template-poster{
  border: 1px solid rgba(148,163,184,.20);
  border-radius: 12px;
  background: #fff !important;
  box-shadow: 0 10px 26px rgba(15,23,42,.10);
}
html[data-theme="glass"] .template-preview-poster img{
  width: 100%;
  height: auto;
  display: block;
}
@media (min-width: 1120px){
  html[data-theme="glass"] .button-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 768px){
  html[data-theme="glass"]{
    --card: rgba(248,250,252,.91);
    --card-border: rgba(255,255,255,.76);
    --blur: blur(20px) saturate(130%) brightness(1.02);
    --mobile-tab-bottom-clearance: 120px;
  }
  html[data-theme="glass"] .container{
    padding: max(10px, var(--safe-top)) 10px calc(10px + var(--mobile-tab-bottom-clearance));
  }
  html[data-theme="glass"] .header{
    display: none;
  }
  html[data-theme="glass"] main{
    margin-top: 0;
  }
  html[data-theme="glass"] .discover-shell{
    margin-top: 0;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: 11px;
    border-radius: 20px;
    background:
      linear-gradient(180deg, rgba(255,255,255,.94), rgba(248,252,255,.88)) padding-box,
      linear-gradient(145deg, rgba(255,255,255,.96), rgba(37,131,255,.20), rgba(20,184,166,.14)) border-box;
    border: 1px solid transparent;
    box-shadow:
      0 18px 38px rgba(15,23,42,.09),
      inset 0 1px 0 rgba(255,255,255,.86);
  }
  html[data-theme="glass"] .discover-shell::before{
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at 12% 0%, rgba(37,131,255,.12), transparent 30%),
      radial-gradient(circle at 100% 12%, rgba(20,184,166,.10), transparent 32%),
      linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,0) 42%);
    pointer-events: none;
    z-index: 0;
  }
  html[data-theme="glass"] .discover-shell::after{
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    top: 8px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.92), transparent);
    pointer-events: none;
    z-index: 1;
  }
  html[data-theme="glass"] .discover-shell > *{
    position: relative;
    z-index: 2;
  }
  html[data-theme="glass"] .discover-mobile-brand{
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    margin: 0 0 7px;
    padding: 2px 2px 8px;
    border-bottom: 1px solid rgba(148,163,184,.12);
  }
  html[data-theme="glass"] .discover-mobile-logo{
    width: 44px;
    height: 44px;
    overflow: hidden;
    border-radius: 50%;
    background:
      linear-gradient(#d7e7fa, #d7e7fa) padding-box,
      linear-gradient(145deg, rgba(255,255,255,.96), rgba(37,131,255,.42)) border-box;
    border: 1px solid transparent;
    box-shadow:
      0 8px 18px rgba(37,131,255,.10),
      inset 0 1px 0 rgba(255,255,255,.88);
    flex: 0 0 auto;
  }
  html[data-theme="glass"] .discover-mobile-logo img{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
  }
  html[data-theme="glass"] .discover-mobile-copy{
    min-width: 0;
    display: grid;
    gap: 2px;
  }
  html[data-theme="glass"] .discover-mobile-copy strong{
    color: #111827;
    font-size: 1.06rem;
    line-height: 1.15;
    font-weight: 900;
    letter-spacing: -.02em;
  }
  html[data-theme="glass"] .discover-mobile-copy span{
    color: #64748b;
    font-size: .72rem;
    line-height: 1.25;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  html[data-theme="glass"] .discover-mobile-modes{
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px;
    border-radius: 999px;
    background: rgba(241,245,249,.82);
    border: 1px solid rgba(15,23,42,.08);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.90),
      0 6px 14px rgba(15,23,42,.035);
  }
  html[data-theme="glass"] .discover-mobile-modes .discover-mode{
    min-height: 28px;
    padding: 0 11px;
    border-radius: 999px;
    background: transparent;
    border: 0;
    color: #111827;
    font-size: 12.5px;
    font-weight: 800;
    box-shadow: none;
  }
  html[data-theme="glass"] .discover-mobile-modes .discover-mode.is-active{
    background: linear-gradient(135deg, #2583ff, #4aa5ff);
    color: #fff;
    box-shadow:
      0 7px 14px rgba(37,131,255,.22),
      inset 0 1px 0 rgba(255,255,255,.24);
  }
  html[data-theme="glass"] .discover-head{
    display: block;
    margin: 0 0 7px;
  }
  html[data-theme="glass"] .discover-eyebrow,
  html[data-theme="glass"] .discover-title{
    display: none;
  }
  html[data-theme="glass"] .discover-subtitle{
    color: #52627a;
    font-size: .715rem;
    line-height: 1.32;
    margin: 0;
    padding: 7px 8px;
    border-radius: 12px;
    background: rgba(248,251,255,.76);
    border: 1px solid rgba(37,131,255,.10);
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  html[data-theme="glass"] .discover-stats{
    display: none;
  }
  html[data-theme="glass"] .discover-toolbar{
    display: block;
    margin-bottom: 7px;
  }
  html[data-theme="glass"] .discover-toolbar.is-search-box-disabled{
    display: none;
  }
  html[data-theme="glass"] .discover-search{
    display: flex;
    align-items: center;
    gap: 0;
    min-height: 39px;
    padding: 0 10px;
    border-radius: 13px;
    background:
      linear-gradient(#fff, #fff) padding-box,
      linear-gradient(135deg, rgba(15,23,42,.18), rgba(37,131,255,.17), rgba(255,255,255,.76)) border-box;
    border: 1px solid transparent;
    box-shadow:
      0 7px 18px rgba(15,23,42,.035),
      inset 0 1px 0 rgba(255,255,255,.92);
  }
  html[data-theme="glass"] .discover-search:focus-within{
    border-color: transparent;
    background:
      linear-gradient(#fff, #fff) padding-box,
      linear-gradient(135deg, rgba(37,131,255,.55), rgba(20,184,166,.36)) border-box;
    box-shadow:
      0 8px 20px rgba(37,131,255,.10),
      inset 0 1px 0 rgba(255,255,255,.92);
  }
  html[data-theme="glass"] .discover-search::before{
    content: "\2315";
    flex: 0 0 auto;
    margin-right: 9px;
    color: #4b5563;
    font-size: 16px;
    line-height: 1;
    transform: none;
  }
  html[data-theme="glass"] .discover-search-row{
    flex: 1 1 auto;
    min-width: 0;
    gap: 7px;
  }
  html[data-theme="glass"] .discover-search input{
    min-width: 0;
    color: #111827;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -.04em;
  }
  html[data-theme="glass"] .discover-search input::placeholder{
    color: #6b7280;
  }
  html[data-theme="glass"] .discover-search-submit{
    min-width: 46px;
    height: 29px;
    padding: 0 10px;
    border-radius: 10px;
    border-color: rgba(37,131,255,.10);
    background:
      linear-gradient(180deg, rgba(255,255,255,.46), rgba(255,255,255,.06)) border-box,
      linear-gradient(135deg, #187bff, #31a9ff) padding-box;
    font-size: 12px;
    box-shadow:
      0 8px 15px rgba(37,131,255,.18),
      inset 0 1px 0 rgba(255,255,255,.44);
  }
  html[data-theme="glass"] .discover-search-submit:focus-visible{
    outline-color: rgba(37,131,255,.32);
    box-shadow:
      0 8px 15px rgba(37,131,255,.18),
      0 0 0 3px rgba(37,131,255,.10),
      inset 0 1px 0 rgba(255,255,255,.44);
  }
  html[data-theme="glass"] .discover-toolbar > .discover-modes{
    display: none;
  }
  html[data-theme="glass"] .discover-flow-hint{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 26px;
    margin: 0 0 8px;
    padding: 3px 7px;
    border-radius: 999px;
    background:
      linear-gradient(180deg, rgba(255,255,255,.92), rgba(244,249,255,.78));
    border: 1px solid rgba(37,131,255,.10);
    color: #526174;
    font-size: 11.5px;
    font-weight: 760;
    letter-spacing: -.01em;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.86),
      0 5px 12px rgba(15,23,42,.025);
  }
  html[data-theme="glass"] .discover-flow-hint span{
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
  }
  html[data-theme="glass"] .discover-flow-hint b{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: linear-gradient(180deg, #eef7ff, #e4f0ff);
    color: #1677ff;
    font-size: 10.5px;
    font-weight: 900;
  }
  html[data-theme="glass"] .discover-flow-hint i{
    flex: 1 1 auto;
    height: 1px;
    min-width: 18px;
    background: linear-gradient(90deg, rgba(37,131,255,.08), rgba(37,131,255,.34), rgba(37,131,255,.08));
  }
  html[data-theme="glass"] .discover-modes{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    padding: 4px;
    border-radius: 13px;
    background: rgba(255,255,255,.56);
    border: 1px solid rgba(255,255,255,.72);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.36);
  }
  html[data-theme="glass"] .discover-mode{
    min-height: 34px;
    padding: 0 12px;
    border-radius: 10px;
    background: transparent;
    border-color: transparent;
    color: #64748b;
    font-size: 12px;
    box-shadow: none;
  }
  html[data-theme="glass"] .discover-mode.is-active{
    background: linear-gradient(135deg, #2a86ff, #5ba8ff);
    color: #fff;
    box-shadow: 0 10px 18px rgba(42,134,255,.22);
  }
  html[data-theme="glass"] .discover-categories{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px 8px;
    padding: 0;
    margin: 0;
  }
  html[data-theme="glass"] .discover-category[data-filter-cat=""]{
    display: none;
  }
  html[data-theme="glass"] .discover-category{
    width: 100%;
    min-width: 0;
    min-height: 37px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 5px;
    justify-content: initial;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: 5px 7px;
    border-radius: 12px;
    color: #111827;
    background:
      linear-gradient(180deg, rgba(255,255,255,.98), rgba(250,252,255,.94)) padding-box,
      linear-gradient(145deg, rgba(255,255,255,.96), rgba(148,163,184,.20), rgba(37,131,255,.10)) border-box;
    border: 1px solid transparent;
    box-shadow:
      0 6px 14px rgba(15,23,42,.036),
      inset 2px 0 0 rgba(37,131,255,0),
      inset 0 1px 0 rgba(255,255,255,.95),
      inset 0 -8px 14px rgba(15,23,42,.012);
  }
  html[data-theme="glass"] .discover-category::before{
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
      radial-gradient(circle at 14% 18%, rgba(37,131,255,.07), transparent 28%),
      radial-gradient(circle at 92% 0%, rgba(14,165,233,.08), transparent 32%);
    opacity: .38;
    pointer-events: none;
    z-index: -2;
  }
  html[data-theme="glass"] .discover-category::after{
    content: "";
    position: absolute;
    inset: 1px 1px auto;
    height: 36%;
    border-radius: 11px 11px 8px 8px;
    background: linear-gradient(180deg, rgba(255,255,255,.52), rgba(255,255,255,0));
    pointer-events: none;
    z-index: -1;
  }
  html[data-theme="glass"] .discover-category-icon{
    width: 18px;
    height: 18px;
    min-width: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: linear-gradient(180deg, rgba(248,250,252,.96), rgba(235,240,247,.82));
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.9),
      0 2px 6px rgba(15,23,42,.035);
    font-size: 0;
    line-height: 1;
    text-align: center;
  }
  html[data-theme="glass"] .discover-category-icon::before{
    content: "\25cc";
    color: #1f2937;
    font-size: 11.5px;
    line-height: 1;
  }
  html[data-theme="glass"] .discover-category[data-filter-cat="huichuang"] .discover-category-icon::before{
    content: "\2727";
  }
  html[data-theme="glass"] .discover-category[data-filter-cat="gaoduan"] .discover-category-icon::before{
    content: "\2655";
  }
  html[data-theme="glass"] .discover-category[data-filter-cat="qijian"] .discover-category-icon::before{
    content: "\27a4";
  }
  html[data-theme="glass"] .discover-category[data-filter-cat="qiye"] .discover-category-icon::before{
    content: "\25c9";
  }
  html[data-theme="glass"] .discover-category-label{
    min-width: 0;
    overflow: visible;
    white-space: normal;
    text-overflow: clip;
    font-size: 12.8px;
    font-weight: 850;
    letter-spacing: -.01em;
    line-height: 1.12;
    text-align: left;
  }
  html[data-theme="glass"] .discover-category strong{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 19px;
    padding: 0 5px;
    border-radius: 999px;
    background:
      linear-gradient(180deg, rgba(255,255,255,.94), rgba(235,240,247,.78));
    color: #111827;
    font-size: 11.5px;
    font-weight: 900;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
  }
  html[data-theme="glass"] .discover-category.is-active{
    background:
      linear-gradient(180deg, rgba(249,253,255,.99), rgba(238,247,255,.98)) padding-box,
      linear-gradient(135deg, rgba(37,131,255,.62), rgba(20,184,166,.32)) border-box;
    border-color: transparent;
    color: #111827;
    box-shadow:
      0 8px 18px rgba(37,131,255,.105),
      inset 2px 0 0 rgba(37,131,255,.48),
      inset 0 0 0 1px rgba(37,131,255,.08),
      inset 0 1px 0 rgba(255,255,255,.96);
  }
  html[data-theme="glass"] .discover-category.is-active::before{
    opacity: .92;
  }
  html[data-theme="glass"] .discover-category.is-active .discover-category-icon{
    background: linear-gradient(180deg, #eaf4ff, #dff7ff);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.96),
      0 4px 10px rgba(37,131,255,.10);
  }
  html[data-theme="glass"] .discover-category.is-active .discover-category-icon::before{
    color: #0f6be8;
  }
  html[data-theme="glass"] .discover-category:focus-visible{
    outline: 2px solid rgba(37,131,255,.26);
    outline-offset: 2px;
  }
  html[data-theme="glass"] .discover-category:active{
    transform: translateY(1px) scale(.992);
  }
  html[data-theme="glass"] .discover-category.is-active strong{
    background: linear-gradient(180deg, #e8f3ff, #dff0ff);
    color: #0f6be8;
  }
  html[data-theme="glass"] .discover-category:last-child:nth-child(odd){
    grid-column: auto;
  }
  html[data-theme="glass"] .discover-feedback{
    display: none;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
    margin-top: 8px;
    min-height: 31px;
    padding: 4px 5px 4px 9px;
    border-radius: 12px;
    background:
      linear-gradient(180deg, rgba(255,255,255,.88), rgba(243,248,255,.74));
    border: 1px solid rgba(37,131,255,.10);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.88),
      0 5px 14px rgba(15,23,42,.03);
    font-size: 12px;
  }
  html[data-theme="glass"] body.is-search-active .discover-feedback{
    display: grid;
  }
  html[data-theme="glass"] .discover-feedback p{
    display: flex;
    align-items: center;
    gap: 6px;
    color: #526174;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 11.5px;
    font-weight: 760;
  }
  html[data-theme="glass"] .discover-feedback p::before{
    content: "";
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(135deg, #2388ff, #31d2ad);
    box-shadow: 0 0 0 3px rgba(37,131,255,.08);
  }
  html[data-theme="glass"] .discover-reset{
    flex: 0 0 auto;
    height: 24px;
    padding: 0 9px;
    border-radius: 9px;
    background: rgba(37,131,255,.08);
    border: 1px solid rgba(37,131,255,.12);
    color: #1769d8;
    font-size: 11.5px;
    font-weight: 820;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.74);
  }
  html[data-theme="glass"] .category-section{
    margin-top: 10px;
    padding: 12px;
    border-radius: 16px;
    background:
      linear-gradient(180deg, rgba(255,255,255,.94), rgba(248,251,255,.90));
    border: 1px solid rgba(15,23,42,.075);
    box-shadow:
      0 12px 28px rgba(15,23,42,.07),
      inset 0 1px 0 rgba(255,255,255,.86);
  }
  html[data-theme="glass"] .category-section .card-title{
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 8px;
    margin-bottom: 9px;
    padding-bottom: 9px;
    border-bottom: 1px solid rgba(37,131,255,.12);
    font-size: .92rem;
    line-height: 1.24;
  }
  html[data-theme="glass"] .category-section .card-title > span:first-child{
    min-width: 0;
    display: block;
    padding-left: 13px;
    word-break: break-word;
  }
  html[data-theme="glass"] .category-section .card-title > span:first-child::before{
    width: 4px;
    height: 22px;
    box-shadow: 0 0 0 4px rgba(37,131,255,.06);
  }
  html[data-theme="glass"] .category-section .card-title-meta{
    gap: 0;
    justify-self: end;
    align-items: center;
    padding-top: 1px;
  }
  html[data-theme="glass"] .category-section .card-count{
    min-width: 64px;
    height: 29px;
    padding: 0 9px;
    border-radius: 999px;
    background:
      linear-gradient(180deg, #eaf4ff, #dfeeff);
    color: #1677ff;
    font-size: 11.5px;
    font-weight: 900;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.92),
      0 6px 14px rgba(37,131,255,.08);
  }
  html[data-theme="glass"] .category-section .card-title .bar{
    display: none;
  }
  html[data-theme="glass"] .category-section .button-grid{
    gap: 10px;
  }
  html[data-theme="glass"] .template-link-card.has-template-poster{
    border-radius: 10px;
    box-shadow: 0 8px 22px rgba(15,23,42,.12);
  }
  html[data-theme="glass"] .yz-svc{
    --yz-svc-size: 38px;
  }
  html[data-theme="glass"] .yz-svc-btn{
    top: calc(max(10px, var(--safe-top)) + 18px);
    right: 20px;
    margin-top: 0;
    transform: none;
    box-shadow: 0 8px 20px rgba(79,70,229,.25);
  }
  html[data-theme="glass"] .yz-svc-btn:hover,
  html[data-theme="glass"] .yz-svc-btn:active{
    transform: none;
  }
  html[data-theme="glass"] .header h1,
  html[data-theme="glass"] .header .subtitle{
    padding-right: 42px;
  }
html[data-theme="glass"] .yz-svc-btn-label{
  display: none;
}
html[data-theme="glass"] .yz-svc-btn-ring{
  display: none;
  }
html[data-theme="glass"] .yz-svc-btn-icon{
  font-size: 17px;
}
@media (max-width: 768px){
  html[data-theme="glass"] .yz-svc{
    --yz-svc-size: 44px;
  }
  html[data-theme="glass"] .yz-svc-btn{
    top: 50%;
    right: 12px;
    margin-top: var(--yz-svc-offset);
    transform: translateY(-50%);
    background: linear-gradient(180deg, #8f7af6 0%, #7465ec 100%);
    box-shadow:
      0 8px 18px rgba(109,96,232,.22),
      0 0 0 5px rgba(150,130,255,.06);
  }
  html[data-theme="glass"] .yz-svc.is-auto-positioned .yz-svc-btn{
    box-shadow:
      0 7px 16px rgba(109,96,232,.20),
      0 0 0 4px rgba(150,130,255,.055);
  }
  html[data-theme="glass"] .yz-svc-btn:hover,
  html[data-theme="glass"] .yz-svc-btn:active{
    transform: translateY(-50%);
  }
  html[data-theme="glass"] .yz-svc.is-positioned .yz-svc-btn:hover,
  html[data-theme="glass"] .yz-svc.is-positioned .yz-svc-btn:active{
    transform: none;
  }
  html[data-theme="glass"] .yz-svc-btn-label{
    display: block;
  }
  html[data-theme="glass"] .yz-svc-btn-ring{
    display: none;
  }
  html[data-theme="glass"] .yz-svc-btn-icon{
    font-size: 19px;
  }
}
html[data-theme="glass"] .mobile-tab-bar.mobile-tab-bottom{
  padding: 0 14px calc(8px + var(--safe-bottom));
}
  html[data-theme="glass"] .mobile-tab-bottom .tab-dock{
    min-height: 78px;
    padding: 6px 8px 5px;
    border-radius: var(--mobile-dock-radius, 34px);
    clip-path: inset(0 round var(--mobile-dock-radius, 34px));
  }
  html[data-theme="glass"] .mobile-tab-bottom .tab-icon-wrap{
    width: 38px;
    height: 38px;
  }
  html[data-theme="glass"] .mobile-tab-bottom .tab-label{
    color: rgba(30,41,59,.72);
    text-shadow: 0 1px 3px rgba(255,255,255,.36);
    font-size: 9.5px;
  }
  html[data-theme="glass"] .mobile-tab-bottom .tab-badge{
    display: none !important;
  }
  html[data-theme="glass"] .mobile-tab-bottom .tab-item.active::before{
    background: linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,.10));
    border-color: rgba(255,255,255,.42);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.64),
      0 5px 14px rgba(15,23,42,.06);
  }
  html[data-theme="glass"] .mobile-tab-bottom .tab-item.active .tab-label{
    color: #175fbe;
    text-shadow: 0 1px 2px rgba(255,255,255,.56);
  }
  html[data-theme="glass"] .discover-search::before{
    content: "";
    width: 13px;
    height: 13px;
    margin-right: 10px;
    border: 1.7px solid #64748b;
    border-radius: 50%;
    box-shadow: 6px 6px 0 -5px #64748b;
    transform: none;
  }
}

/* ===== 空状态提示 ===== */
.empty-state{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:120px;
  padding:24px;
  color:var(--muted);
  font-size:14px;
  text-align:center;
  grid-column:1/-1;
}
.empty-state p{
  margin:0;
  opacity:.7;
}

/* ===== Logo占位符 ===== */
.logo-placeholder{
  width:64px;
  height:64px;
  border-radius:50%;
  background:linear-gradient(135deg, #2A86FF, #00C897);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:24px;
  font-weight:900;
  box-shadow:0 8px 20px rgba(42,134,255,.25);
}
.logo-placeholder-sm{
  width:42px;
  height:42px;
  border-radius:50%;
  background:linear-gradient(135deg, #2A86FF, #00C897);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:16px;
  font-weight:900;
  box-shadow:0 4px 12px rgba(42,134,255,.2);
}