/* ===================================================
   叶子工作室 - 基础样式
   =================================================== */

:root{
  --primary:#2A86FF;
  --success:#00C897;
  --warning:#FF9A00;
  --bg1:#eef3ff;
  --bg2:#f7fbff;
  --text:#1f2937;
  --muted:#6b7280;
  --card: rgba(255,255,255,.40);
  --card-border: rgba(255,255,255,.32);
  --radius: 16px;
  --shadow: 0 10px 35px rgba(16,24,40,.10);
  --shadow-hover: 0 14px 45px rgba(16,24,40,.18);
  --ring: 0 0 0 4px rgba(42,134,255,.18);
  --btn-shadow:
    0 2px 4px rgba(0,0,0,.08),
    0 8px 20px rgba(16,24,40,.18),
    0 16px 40px rgba(16,24,40,.10);
  --btn-shadow-hover:
    0 4px 8px rgba(0,0,0,.10),
    0 14px 30px rgba(16,24,40,.24),
    0 24px 56px rgba(16,24,40,.14);
  --container: 1180px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --blur: blur(18px);
  --pad: clamp(12px, 3.6vw, 16px);
  --gap: clamp(8px, 2.4vw, 10px);
  --card-pad: clamp(14px, 3.8vw, 18px);
  --btn-radius: 14px;
  --btn-minh: 52px;
}

@media (prefers-color-scheme: dark) {
  :root{
    --bg1:#0b1020; --bg2:#0b1228;
    --text:#e5e7eb; --muted:#a1a1aa;
    --card: rgba(20,26,45,.36); --card-border: rgba(255,255,255,.10);
    --shadow: 0 14px 40px rgba(0,0,0,.35); --shadow-hover: 0 18px 55px rgba(0,0,0,.50);
    --ring: 0 0 0 4px rgba(42,134,255,.28);
    --btn-shadow:
      0 2px 4px rgba(0,0,0,.20),
      0 10px 24px rgba(0,0,0,.35),
      0 20px 48px rgba(0,0,0,.18);
    --btn-shadow-hover:
      0 4px 8px rgba(0,0,0,.25),
      0 16px 36px rgba(0,0,0,.42),
      0 28px 64px rgba(0,0,0,.22);
  }
}

*{ margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ 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;
  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; }

/* ===== 背景光斑 ===== */
.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:grid; grid-template-columns: 360px 1fr;
    gap: 16px; align-items: start;
  }
  .header{ position: sticky; top: 16px; }
  main{ margin-top: 0 !important; }
}

/* ===== 玻璃卡片 ===== */
.glass{
  background: var(--card); border: 1px solid var(--card-border);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  .glass{ -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
}

/* ===== 公告栏 ===== */
.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.02rem, 4.2vw, 1.18rem);
  display:flex; align-items:center; justify-content:space-between;
  gap: 10px; margin-bottom: 12px; padding-bottom: 10px;
  border-bottom: 1px dashed rgba(99,102,241,.25);
}
.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: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}
@media (min-width: 720px){ .button-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 980px){ .button-grid{ grid-template-columns: repeat(4, 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{
  position:relative; display:flex; align-items:center; justify-content:center;
  text-decoration:none; color:#fff !important;
  padding: 12px 10px; min-height: var(--btn-minh); border-radius: var(--btn-radius);
  font-size: clamp(12px, 3.1vw, 14px); font-weight: 500; line-height: 1.18;
  letter-spacing: .2px;
  box-shadow: var(--btn-shadow);
  transform: translateY(0) translateZ(0);
  transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease, filter .22s ease;
  user-select:none; overflow:hidden; text-align:center;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  white-space: normal; word-break: break-word; overflow-wrap: anywhere;
  border: 1px solid rgba(255,255,255,.15);
  border-top-color: rgba(255,255,255,.30);
  border-bottom-color: rgba(0,0,0,.08);
}
/* 顶部高光 - 玻璃质感 */
.btn::before{
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg,
    rgba(255,255,255,.28) 0%,
    rgba(255,255,255,.08) 40%,
    rgba(0,0,0,.02) 60%,
    rgba(0,0,0,.06) 100%
  );
  pointer-events: none;
  z-index: 1;
}
/* 底部反光条 */
.btn::after{
  content: '';
  position: absolute;
  bottom: 0; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.20), transparent);
  pointer-events: none;
  z-index: 1;
}

@media (hover:none){
  .btn:hover{ transform:none; box-shadow: var(--btn-shadow); }
  .btn:active{ transform: scale(.97) translateY(2px); box-shadow: 0 2px 8px rgba(0,0,0,.15); }
}
@media (hover:hover){
  .btn:hover{
    transform: translateY(-4px);
    box-shadow: var(--btn-shadow-hover);
    filter: brightness(1.06) saturate(1.08);
  }
  .btn:active{
    transform: translateY(1px);
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
    filter: brightness(.97);
  }
}
.btn:focus-visible{ outline:none; box-shadow: var(--btn-shadow), var(--ring); }

/* ===== 14种按钮颜色 - 更深渐变更立体 ===== */
.btn-primary{
  background: linear-gradient(145deg, #5BA3FF 0%, #2A86FF 40%, #1a6ce0 100%);
  box-shadow: var(--btn-shadow), 0 4px 16px rgba(42,134,255,.30);
}
.btn-primary:hover{ box-shadow: var(--btn-shadow-hover), 0 8px 28px rgba(42,134,255,.35); }

.btn-success{
  background: linear-gradient(145deg, #34E0AE 0%, #00C897 40%, #0aa87e 100%);
  box-shadow: var(--btn-shadow), 0 4px 16px rgba(0,200,151,.30);
}
.btn-success:hover{ box-shadow: var(--btn-shadow-hover), 0 8px 28px rgba(0,200,151,.35); }

.btn-warning{
  background: linear-gradient(145deg, #FFB840 0%, #FF9A00 40%, #e08600 100%);
  box-shadow: var(--btn-shadow), 0 4px 16px rgba(255,154,0,.30);
}
.btn-warning:hover{ box-shadow: var(--btn-shadow-hover), 0 8px 28px rgba(255,154,0,.35); }

.btn-red{
  background: linear-gradient(145deg, #f87171 0%, #ef4444 40%, #dc2626 100%);
  box-shadow: var(--btn-shadow), 0 4px 16px rgba(239,68,68,.30);
}
.btn-red:hover{ box-shadow: var(--btn-shadow-hover), 0 8px 28px rgba(239,68,68,.35); }

.btn-rose{
  background: linear-gradient(145deg, #fb7185 0%, #f43f5e 40%, #e11d48 100%);
  box-shadow: var(--btn-shadow), 0 4px 16px rgba(244,63,94,.30);
}
.btn-rose:hover{ box-shadow: var(--btn-shadow-hover), 0 8px 28px rgba(244,63,94,.35); }

.btn-pink{
  background: linear-gradient(145deg, #f472b6 0%, #ec4899 40%, #db2777 100%);
  box-shadow: var(--btn-shadow), 0 4px 16px rgba(236,72,153,.30);
}
.btn-pink:hover{ box-shadow: var(--btn-shadow-hover), 0 8px 28px rgba(236,72,153,.35); }

.btn-purple{
  background: linear-gradient(145deg, #c084fc 0%, #a855f7 40%, #9333ea 100%);
  box-shadow: var(--btn-shadow), 0 4px 16px rgba(168,85,247,.30);
}
.btn-purple:hover{ box-shadow: var(--btn-shadow-hover), 0 8px 28px rgba(168,85,247,.35); }

.btn-indigo{
  background: linear-gradient(145deg, #818cf8 0%, #6366f1 40%, #4f46e5 100%);
  box-shadow: var(--btn-shadow), 0 4px 16px rgba(99,102,241,.30);
}
.btn-indigo:hover{ box-shadow: var(--btn-shadow-hover), 0 8px 28px rgba(99,102,241,.35); }

.btn-cyan{
  background: linear-gradient(145deg, #22d3ee 0%, #06b6d4 40%, #0891b2 100%);
  box-shadow: var(--btn-shadow), 0 4px 16px rgba(6,182,212,.30);
}
.btn-cyan:hover{ box-shadow: var(--btn-shadow-hover), 0 8px 28px rgba(6,182,212,.35); }

.btn-teal{
  background: linear-gradient(145deg, #2dd4bf 0%, #14b8a6 40%, #0d9488 100%);
  box-shadow: var(--btn-shadow), 0 4px 16px rgba(20,184,166,.30);
}
.btn-teal:hover{ box-shadow: var(--btn-shadow-hover), 0 8px 28px rgba(20,184,166,.35); }

.btn-lime{
  background: linear-gradient(145deg, #a3e635 0%, #84cc16 40%, #65a30d 100%);
  box-shadow: var(--btn-shadow), 0 4px 16px rgba(132,204,22,.30);
}
.btn-lime:hover{ box-shadow: var(--btn-shadow-hover), 0 8px 28px rgba(132,204,22,.35); }

.btn-amber{
  background: linear-gradient(145deg, #fbbf24 0%, #f59e0b 40%, #d97706 100%);
  box-shadow: var(--btn-shadow), 0 4px 16px rgba(245,158,11,.30);
}
.btn-amber:hover{ box-shadow: var(--btn-shadow-hover), 0 8px 28px rgba(245,158,11,.35); }

.btn-brown{
  background: linear-gradient(145deg, #ca8a04 0%, #a16207 40%, #854d0e 100%);
  box-shadow: var(--btn-shadow), 0 4px 16px rgba(161,98,7,.28);
}
.btn-brown:hover{ box-shadow: var(--btn-shadow-hover), 0 8px 28px rgba(161,98,7,.32); }

.btn-gray{
  background: linear-gradient(145deg, #9ca3af 0%, #6b7280 40%, #4b5563 100%);
  box-shadow: var(--btn-shadow), 0 4px 16px rgba(107,114,128,.28);
}
.btn-gray:hover{ box-shadow: var(--btn-shadow-hover), 0 8px 28px rgba(107,114,128,.32); }

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

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

/* ===== 手机端 ===== */
@media (max-width: 768px){
  :root{
    --card: rgba(255,255,255,.22); --card-border: rgba(255,255,255,.22); --blur: blur(14px);
  }
  .header::before{ opacity: .16; }
  .contact-item{ background: rgba(255,255,255,.20); border-color: rgba(255,255,255,.18); }
  .blob{ opacity: .45; }
  body{ padding-bottom: calc(64px + var(--safe-bottom)); }
}

@media (prefers-color-scheme: dark) and (max-width: 768px){
  :root{
    --card: rgba(20,26,45,.26); --card-border: rgba(255,255,255,.10); --blur: blur(14px);
  }
  .header::before{ opacity:.18; }
  .contact-item{ background: rgba(20,26,45,.22); }
}

/* ===== 手机底部Tab ===== */
.mobile-tab-bar{
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 999;
  background: rgba(255,255,255,.82);
  border-top: 1px solid rgba(255,255,255,.45);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  backdrop-filter: blur(20px) saturate(1.6);
  padding: 6px 0 calc(6px + var(--safe-bottom));
  box-shadow: 0 -4px 20px rgba(16,24,40,.08);
}
@media (prefers-color-scheme: dark){
  .mobile-tab-bar{
    background: rgba(15,20,40,.82);
    border-top-color: rgba(255,255,255,.08);
    box-shadow: 0 -4px 20px rgba(0,0,0,.3);
  }
}
@media (max-width: 768px){
  .mobile-tab-bar{ display: flex; justify-content: space-around; align-items: center; }
}
.tab-item{
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: 4px 8px; border-radius: 10px;
  text-decoration: none; color: var(--muted);
  font-size: 10px; line-height: 1.2;
  transition: color .2s, background .2s;
  min-width: 60px; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tab-item .tab-icon{ font-size: 20px; line-height: 1; }
.tab-item .tab-label{ font-weight: 500; white-space: nowrap; }
.tab-item.active{ color: var(--primary); background: rgba(42,134,255,.10); }
.tab-item:active{ transform: scale(.95); }

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

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