/* ============================================================
   牧院圈 前台 · 质感增强层 (Premium Layer)
   设计语言参考：Aceternity UI / React Bits / Motion / Anime.js / Universe
   纯 CSS 实现 · 零依赖 · 不破坏原有功能
   ============================================================ */

:root{
  --pq-grad-a:linear-gradient(135deg,#5aa2ff 0%,#3f7de0 55%,#64d2ff 100%);
  --pq-grad-b:linear-gradient(120deg,#4facfe 0%,#00f2fe 100%);
  --pq-grad-c:linear-gradient(135deg,#43e97b 0%,#38f9d7 100%);
  --pq-grad-d:linear-gradient(135deg,#fa709a 0%,#fee140 100%);
  --pq-ease:cubic-bezier(.22,1,.36,1);
  --pq-spring:cubic-bezier(.34,1.56,.64,1);
}

/* ---------- 噪点纹理（高级感关键） ---------- */
body::after{
  content:''; position:fixed; inset:0; z-index:9998; pointer-events:none; opacity:.028;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 网格叠层 ---------- */
.mq-aurora::after{
  content:''; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(46,124,246,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(46,124,246,.055) 1px,transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 0%,#000 10%,transparent 72%);
  mask-image:radial-gradient(ellipse at 50% 0%,#000 10%,transparent 72%);
}
html[data-theme="dark"] .mq-aurora::after{opacity:.5;}

/* ============================================================
   品牌 Hero 区
   ============================================================ */
.mq-hero{
  position:relative; margin:16px 16px 0; padding:24px 20px 20px;
  border-radius:var(--mq-radius-lg); overflow:hidden;
  background:
    linear-gradient(115deg,rgba(255,255,255,0) 42%,rgba(255,255,255,.5) 50%,rgba(255,255,255,0) 58%),
    radial-gradient(120% 90% at 88% 0%,rgba(120,170,255,.22),rgba(120,170,255,0) 55%),
    radial-gradient(110% 80% at 8% 100%,rgba(90,205,250,.16),rgba(90,205,250,0) 60%),
    linear-gradient(158deg,rgba(255,255,255,.92) 0%,rgba(244,248,255,.8) 52%,rgba(236,243,252,.74) 100%);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 1px 2px rgba(16,24,40,.03),0 14px 44px rgba(31,64,140,.10),inset 0 1px 0 rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(22px) saturate(170%);
  backdrop-filter:blur(22px) saturate(170%);
  color:var(--mq-text);
}
.mq-hero::before{
  content:''; position:absolute; width:260px; height:260px; border-radius:50%;
  top:-110px; right:-70px; background:radial-gradient(circle,rgba(150,195,255,.38),transparent 68%);
}
.mq-hero::after{
  content:''; position:absolute; width:200px; height:200px; border-radius:50%;
  bottom:-90px; left:-60px; background:radial-gradient(circle,rgba(120,210,255,.20),transparent 68%);
}
.mq-hero-in{position:relative; z-index:2;}
.mq-hero-hi{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11.5px; font-weight:700; letter-spacing:.4px;
  background:rgba(10,132,255,.10); border:1px solid rgba(10,132,255,.22);
  color:#0a66c2;
  padding:4px 11px; border-radius:20px; margin-bottom:12px;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.mq-hero-hi em{width:6px; height:6px; border-radius:50%; background:#4ade80; font-style:normal;
  box-shadow:0 0 0 0 rgba(74,222,128,.7); animation:mqPulse 2s infinite;}
.mq-hero-title{
  font-size:24px; font-weight:800; line-height:1.25; letter-spacing:-.4px;
  margin:0 0 8px; color:var(--mq-text); text-shadow:none;
}
.mq-hero-title b{
  background:linear-gradient(110deg,#0a84ff 15%,#63b3ff 42%,#0a84ff 65%);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:mqShine 3.6s linear infinite;
}
.mq-hero-sub{font-size:13px; color:var(--mq-text-2); line-height:1.6; margin:0 0 18px; max-width:88%;}
.mq-hero-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:10px;}
.mq-hero-stat{
  background:rgba(255,255,255,.62); border:1px solid rgba(255,255,255,.9);
  border-radius:14px; padding:11px 8px; text-align:center;
  box-shadow:0 1px 2px rgba(16,24,40,.03),inset 0 1px 0 rgba(255,255,255,.7);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  transition:transform .3s var(--pq-spring),background .3s;
}
.mq-hero-stat:active{transform:scale(.95); background:rgba(255,255,255,.85);}
.mq-hero-stat b{display:block; font-size:19px; font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:-.3px; color:var(--mq-text);}
.mq-hero-stat span{font-size:10.5px; color:var(--mq-text-3);}
@keyframes mqShine{0%{background-position:0% 50%}100%{background-position:200% 50%}}

/* ============================================================
   信息卡片 · 高级质感
   ============================================================ */
.mq-card{
  position:relative; overflow:hidden;
  border:1px solid rgba(16,24,40,.055) !important;
  box-shadow:0 1px 2px rgba(16,24,40,.04),0 10px 28px rgba(16,24,40,.07) !important;
  transition:transform .34s var(--pq-ease),box-shadow .34s var(--pq-ease) !important;
}
/* 鼠标跟随光晕 */
.mq-card::after{
  content:''; position:absolute; width:360px; height:360px; border-radius:50%;
  left:var(--mx,50%); top:var(--my,50%); transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(46,124,246,.13),transparent 62%);
  opacity:0; transition:opacity .45s ease; pointer-events:none; z-index:0;
}
@media(hover:hover){ .mq-card:hover::after{opacity:1;} }
/* 顶部渐变细线 */
.mq-card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:2px; z-index:1;
  background:var(--pq-grad-a); opacity:0; transition:opacity .35s ease;
}
@media(hover:hover){
  .mq-card:hover{transform:translateY(-3px); box-shadow:0 4px 8px rgba(16,24,40,.05),0 18px 44px rgba(16,24,40,.13) !important;}
  .mq-card:hover::before{opacity:.85;}
}
.mq-card>*{position:relative; z-index:1;}

/* 头像光环 */
.mq-avatar{transition:transform .3s var(--pq-spring),box-shadow .3s;}
.mq-card:hover .mq-avatar{transform:scale(1.06); box-shadow:0 4px 14px rgba(46,124,246,.28);}

/* 图片网格微交互 */
.mq-imgs img{transition:transform .38s var(--pq-ease),filter .38s;}
.mq-imgs img:active{transform:scale(.965);}
@media(hover:hover){ .mq-imgs img:hover{transform:scale(1.035); filter:brightness(1.06);} }

/* 标签微光 */
.mq-tag{position:relative; overflow:hidden;}
.mq-tag::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);
  background-size:250% 100%; animation:mqShine 3.4s linear infinite;
}

/* ============================================================
   轮播图 · Ken Burns 缓动
   ============================================================ */
.mq-banner-slide img{transition:transform 7s var(--pq-ease);}
.mq-banner-slide.is-on img{transform:scale(1.07);}
.mq-banner{box-shadow:0 14px 40px rgba(16,24,40,.2) !important;}

/* ============================================================
   分类图标 · 增强
   ============================================================ */
.mq-cat-ico{
  position:relative; overflow:hidden;
  box-shadow:0 1px 3px rgba(16,24,40,.05) !important;
  transition:transform .34s var(--pq-spring),box-shadow .34s !important;
}
@media(hover:hover){
  .mq-cat:hover .mq-cat-ico{transform:translateY(-3px) rotate(-7deg) scale(1.09);
    box-shadow:0 10px 22px rgba(16,24,40,.14) !important;}
}
.mq-cats{box-shadow:0 1px 2px rgba(16,24,40,.05),0 12px 32px rgba(16,24,40,.08) !important;}

/* ============================================================
   滚动入场（Anime.js 风格 stagger）
   ============================================================ */
.mq-reveal{opacity:0; transform:translateY(18px) scale(.99);}
.mq-reveal.in{
  opacity:1; transform:none;
  transition:opacity .6s var(--pq-ease),transform .6s var(--pq-ease);
}

/* ============================================================
   点击涟漪
   ============================================================ */
.mq-ripple{position:relative; overflow:hidden;}
.mq-ripple-ink{
  position:absolute; border-radius:50%; pointer-events:none;
  background:rgba(46,124,246,.26); transform:scale(0);
  animation:mqRipple .68s var(--pq-ease) forwards;
}
@keyframes mqRipple{to{transform:scale(2.6); opacity:0;}}

/* ============================================================
   骨架屏 · 流光
   ============================================================ */
.mq-skeleton{box-shadow:0 1px 2px rgba(16,24,40,.04),0 8px 22px rgba(16,24,40,.06) !important;}

/* ============================================================
   底部导航 · 悬浮胶囊
   ============================================================ */
.mq-tabbar{
  border-top:1px solid rgba(255,255,255,.55) !important;
  background:rgba(255,255,255,.52) !important;
  -webkit-backdrop-filter:saturate(170%) blur(12px);
  backdrop-filter:saturate(170%) blur(12px);
  backdrop-filter:url(#mqLiquid) saturate(170%) blur(3px);
  box-shadow:0 -1px 0 rgba(16,24,40,.04),0 -12px 36px rgba(31,64,140,.10),inset 0 1px 0 rgba(255,255,255,.6) !important;
}
.mq-tab.on::before{
  box-shadow:0 0 12px rgba(46,124,246,.7);
  animation:mqTabIn .34s var(--pq-spring);
}
@keyframes mqTabIn{from{transform:scaleX(.3); opacity:0}to{transform:none; opacity:1}}
.mq-tab:active svg{transform:scale(.86);}

/* ============================================================
   按钮 · 光泽扫过
   ============================================================ */
.mq-btn-primary{position:relative; overflow:hidden;}
.mq-btn-primary::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(110deg,transparent 32%,rgba(255,255,255,.32) 50%,transparent 68%);
  background-size:250% 100%; animation:mqShine 3.8s linear infinite;
}
.mq-fab{box-shadow:0 12px 30px rgba(16,24,40,.16),inset 0 1px 0 rgba(255,255,255,.7) !important;}

/* ============================================================
   统计条
   ============================================================ */
.mq-stat{
  transition:transform .3s var(--pq-spring),box-shadow .3s;
  border:1px solid rgba(16,24,40,.045);
}
@media(hover:hover){ .mq-stat:hover{transform:translateY(-2px); box-shadow:0 10px 26px rgba(16,24,40,.1);} }

/* ============================================================
   深色模式适配
   ============================================================ */
html[data-theme="dark"] .mq-card{border-color:rgba(255,255,255,.07) !important;}
html[data-theme="dark"] .mq-card::before{opacity:.5;}
html[data-theme="dark"] .mq-cat-ico::after{background:linear-gradient(135deg,rgba(255,255,255,.14),transparent 55%);}
html[data-theme="dark"] body::after{opacity:.045;}

/* ---------- 液态玻璃 Hero · 暗色模式 ---------- */
html[data-theme="dark"] .mq-hero{
  background:
    radial-gradient(120% 90% at 88% 0%,rgba(80,140,255,.18),rgba(80,140,255,0) 55%),
    linear-gradient(158deg,rgba(32,38,58,.88) 0%,rgba(22,27,42,.82) 100%);
  border-color:rgba(255,255,255,.10);
  box-shadow:0 1px 2px rgba(0,0,0,.3),0 14px 44px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.06);
}
html[data-theme="dark"] .mq-hero-stat{background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.10); box-shadow:none;}
html[data-theme="dark"] .mq-hero-hi{background:rgba(10,132,255,.16); border-color:rgba(10,132,255,.32); color:#5ab0ff;}

/* liquid glass tabbar dark */
html[data-theme="dark"] .mq-tabbar{
  background:rgba(21,24,36,.5) !important;
  border-top-color:rgba(255,255,255,.08) !important;
  box-shadow:0 -1px 0 rgba(0,0,0,.35),0 -12px 36px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.05) !important;
}


/* ============ 公告通知弹窗 · 液态玻璃 ============ */
.mq-noti-mask{position:fixed;inset:0;z-index:260;background:rgba(15,20,30,.42);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transition:opacity .28s ease;pointer-events:none;}
.mq-noti-mask.on{opacity:1;pointer-events:auto;}
.mq-noti-card{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%) scale(.94);width:min(330px,88vw);z-index:261;box-sizing:border-box;padding:18px 16px 14px;border-radius:22px;background:linear-gradient(158deg,rgba(255,255,255,.97) 0%,rgba(244,248,255,.94) 100%);border:1px solid rgba(255,255,255,.9);box-shadow:0 24px 64px rgba(31,64,140,.24),inset 0 1px 0 rgba(255,255,255,.9);-webkit-backdrop-filter:blur(24px) saturate(1.6);backdrop-filter:blur(24px) saturate(1.6);opacity:0;transition:opacity .28s ease,transform .34s cubic-bezier(.34,1.56,.64,1);pointer-events:none;}
.mq-noti-card.on{opacity:1;transform:translate(-50%,-50%) scale(1);pointer-events:auto;}
.mq-noti-head{display:flex;align-items:center;gap:8px;margin:0 0 10px;}
.mq-noti-badge{display:inline-flex;align-items:center;font-size:12px;font-weight:800;letter-spacing:.5px;color:#0a66c2;background:rgba(10,132,255,.12);border:1px solid rgba(10,132,255,.24);padding:3px 10px;border-radius:999px;}
.mq-noti-sub{font-size:11.5px;color:var(--mq-text-3);}
.mq-noti-body{max-height:42vh;overflow-y:auto;-webkit-overflow-scrolling:touch;}
.mq-noti-text{font-size:13.5px;line-height:1.65;color:var(--mq-text);white-space:pre-line;word-break:break-word;}
.mq-noti-ok{display:block;width:100%;margin:14px 0 0;height:44px;border:0;border-radius:14px;background:linear-gradient(135deg,#5aa2ff 0%,#2e7cf6 100%);color:#fff;font-size:15px;font-weight:700;letter-spacing:2px;box-shadow:0 8px 22px rgba(46,124,246,.35);transition:transform .25s var(--mq-spring);}
.mq-noti-ok:active{transform:scale(.96);}
html[data-theme="dark"] .mq-noti-card{background:linear-gradient(158deg,rgba(30,36,54,.97) 0%,rgba(22,27,42,.95) 100%);border-color:rgba(255,255,255,.1);box-shadow:0 24px 64px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.06);}
html[data-theme="dark"] .mq-noti-mask{background:rgba(5,8,14,.55);}