/* ============================================================
   瓷都取名算命 & AI 网 - 首页样式
   原 index.php 内联 <style>，2026-10-23 按标准写法外提
   Web4.0：Aurora / Glassmorphism / Neon / #ff9600 / 日·夜双主题
   ============================================================ */

/* ============================================================
   Web4.0 设计体系 —— Aurora / Glassmorphism / Neon / 微动效
   主色 #ff9600 · 日/夜双主题（与 chaziwuhang.php 同一套 token）
   ============================================================ */
:root{
  --brand:#ff9600; --brand-2:#ff5f00; --brand-3:#ffc247;
  --cyan:#22d3ee; --magenta:#f472b6; --violet:#8b5cf6;
  /* 「& AI」用蓝色实色（与橙色主色区分）；日/夜两套明度由下面的主题块覆盖 */
  --r-lg:24px; --r-md:16px; --r-sm:11px;
  --maxw:1080px;
  --ease:cubic-bezier(.22,1,.36,1);
  --font:"Noto Sans SC","Source Han Sans SC","思源黑体","PingFang SC","Microsoft YaHei","Hiragino Sans GB","Helvetica Neue",Arial,sans-serif;
  --font-num:"Bahnschrift","DIN Alternate","Segoe UI",Consolas,monospace;
  --font-cn:"Noto Sans SC","Source Han Sans SC","思源黑体","PingFang SC","HarmonyOS Sans SC","Microsoft YaHei","微软雅黑",system-ui,sans-serif;
}
html[data-theme="dark"]{
  --bg:#05060a; --text:#f3f4f8; --text-2:#a9afc0; --text-3:#6d7486;
  --glass:rgba(255,255,255,.055); --glass-2:rgba(255,255,255,.09);
  --stroke:rgba(255,255,255,.13); --stroke-2:rgba(255,255,255,.06);
  --shadow:0 26px 64px rgba(0,0,0,.6);
  --glow:0 0 0 1px rgba(255,150,0,.28),0 20px 54px -16px rgba(255,150,0,.42);
  --field:rgba(255,255,255,.045); --blob-o:.55; --grid:rgba(255,255,255,.035);
  --warn:#ffb4b4; --blue:#5aa9ff;   /* 夜间：亮蓝，深色底上才看得清 */
}
html[data-theme="light"]{
  --bg:#f2f4fa; --text:#131620; --text-2:#4e5567; --text-3:#878ea1;
  --glass:rgba(255,255,255,.72); --glass-2:rgba(255,255,255,.92);
  --stroke:rgba(18,22,45,.10); --stroke-2:rgba(18,22,45,.05);
  --shadow:0 20px 48px rgba(22,28,56,.12);
  --glow:0 0 0 1px rgba(255,150,0,.34),0 18px 44px -18px rgba(255,150,0,.5);
  --field:rgba(255,255,255,.86); --blob-o:.42; --grid:rgba(18,22,45,.045);
  --warn:#c0392b; --blue:#1677ff;   /* 日间：标准蓝，白底上对比度足够 */
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font);font-size:15px;line-height:1.75;color:var(--text);background:var(--bg);overflow-x:hidden;
  min-height:100vh;overflow-x:hidden;transition:background .5s var(--ease),color .5s var(--ease)}
img{border:0;max-width:100%;display:block}
a{color:inherit;text-decoration:none;transition:color .25s var(--ease)}
input,button,select{font-family:inherit;outline:none;border:0}
ul{list-style:none}

/* ---------- Aurora 背景 ---------- */
.aurora{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:var(--blob-o);transition:opacity .5s var(--ease)}
.blob.b1{width:52vw;height:52vw;left:-14vw;top:-16vw;background:radial-gradient(circle at 35% 35%,#ff9600,transparent 62%);animation:drift1 26s ease-in-out infinite}
.blob.b2{width:46vw;height:46vw;right:-12vw;top:6vh;background:radial-gradient(circle at 50% 50%,#f472b6,transparent 62%);animation:drift2 31s ease-in-out infinite}
.blob.b3{width:48vw;height:48vw;left:22vw;bottom:-22vw;background:radial-gradient(circle at 50% 50%,#22d3ee,transparent 62%);animation:drift3 35s ease-in-out infinite}
.blob.b4{width:30vw;height:30vw;right:14vw;bottom:-10vw;background:radial-gradient(circle at 50% 50%,#8b5cf6,transparent 65%);animation:drift1 29s ease-in-out infinite reverse}
@keyframes drift1{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(6vw,4vh,0) scale(1.14)}}
@keyframes drift2{0%,100%{transform:translate3d(0,0,0) scale(1.06)}50%{transform:translate3d(-5vw,7vh,0) scale(.94)}}
@keyframes drift3{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-7vw,-5vh,0) scale(1.12)}}
.grid-bg{position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 90% 60% at 50% 0%,#000 20%,transparent 78%);
  mask-image:radial-gradient(ellipse 90% 60% at 50% 0%,#000 20%,transparent 78%)}

.wrap{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;padding:0 20px}

/* ---------- 顶栏 ---------- */
.topbar{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--bg) 78%,transparent);
  backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);
  border-bottom:1px solid var(--stroke-2);transition:background .4s var(--ease),border-color .4s var(--ease)}
.topbar .wrap{display:flex;align-items:center;gap:16px;height:64px}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:16px;letter-spacing:.3px;white-space:nowrap}
.logo{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;flex:0 0 auto;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));box-shadow:0 8px 22px -8px rgba(255,150,0,.9);
  color:#fff;font-size:17px;font-weight:800;font-family:var(--font-cn)}
.brand small{display:block;font-size:11px;font-weight:500;color:var(--text-3);letter-spacing:1.4px;line-height:1.1}
.nav{display:flex;align-items:center;gap:4px;margin-left:auto;flex-wrap:wrap}
.nav a{padding:7px 13px;border-radius:30px;font-size:13.5px;color:var(--text-2);white-space:nowrap;
  border:1px solid transparent;transition:all .3s var(--ease)}
.nav a:hover{color:var(--text);background:var(--glass-2);border-color:var(--stroke)}
.nav a.on{color:#fff;background:linear-gradient(135deg,var(--brand),var(--brand-2));box-shadow:0 8px 20px -10px rgba(255,150,0,.95)}
.tgl{width:64px;height:32px;border-radius:30px;border:1px solid var(--stroke);background:var(--glass);
  position:relative;cursor:pointer;flex:0 0 auto;backdrop-filter:blur(10px);transition:all .35s var(--ease)}
.tgl:hover{border-color:var(--brand);box-shadow:0 0 0 4px rgba(255,150,0,.12)}
.tgl .knob{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));box-shadow:0 4px 12px -3px rgba(255,150,0,.95);
  display:grid;place-items:center;font-size:12px;line-height:1;color:#fff;transition:transform .42s var(--ease)}
html[data-theme="light"] .tgl .knob{transform:translateX(32px)}
.tgl .i{position:absolute;top:50%;transform:translateY(-50%);font-size:12px;opacity:.5;transition:opacity .3s}
.tgl .i.moon{left:9px} .tgl .i.sun{right:9px}
html[data-theme="dark"] .tgl .i.moon{opacity:0}
html[data-theme="light"] .tgl .i.sun{opacity:0}

/* ---------- 顶栏快捷菜单（伸缩下拉） ---------- */
.tact{position:relative;display:flex;align-items:center;flex:0 0 auto}
.mst{width:34px;height:32px;border-radius:30px;border:1px solid var(--stroke);background:var(--glass);
  cursor:pointer;color:var(--text-2);font-size:14px;line-height:1;display:grid;place-items:center;
  backdrop-filter:blur(10px);transition:all .35s var(--ease)}
.mst:hover{border-color:var(--brand);color:var(--brand);box-shadow:0 0 0 4px rgba(255,150,0,.12)}
.mst .bar{display:block;width:14px;height:1.6px;border-radius:2px;background:currentColor;position:relative;transition:transform .35s var(--ease)}
.mst .bar::before,.mst .bar::after{content:"";position:absolute;left:0;width:14px;height:1.6px;border-radius:2px;background:currentColor;transition:transform .35s var(--ease),top .35s var(--ease)}
.mst .bar::before{top:-4.5px}.mst .bar::after{top:4.5px}
.tact.open .mst{border-color:var(--brand);color:var(--brand);box-shadow:0 0 0 4px rgba(255,150,0,.14)}
.tact.open .mst .bar{transform:rotate(45deg)}
.tact.open .mst .bar::before{top:0;transform:rotate(-90deg)}
.tact.open .mst .bar::after{top:0;opacity:0}
.mmenu{position:absolute;top:calc(100% + 12px);right:0;min-width:186px;padding:8px;z-index:70;
  border-radius:16px;border:1px solid var(--stroke);background:var(--glass);
  backdrop-filter:blur(24px) saturate(150%);-webkit-backdrop-filter:blur(24px) saturate(150%);
  box-shadow:0 24px 48px -18px rgba(0,0,0,.55);
  opacity:0;visibility:hidden;transform:translateY(-10px) scale(.94);transform-origin:top right;
  transition:opacity .32s var(--ease),transform .32s var(--ease),visibility .32s}
.tact.open .mmenu{opacity:1;visibility:visible;transform:none}
.mmenu::before{content:"";position:absolute;top:-5px;right:22px;width:9px;height:9px;transform:rotate(45deg);
  background:var(--glass);border-left:1px solid var(--stroke);border-top:1px solid var(--stroke)}
.mmenu a{display:flex;align-items:center;gap:10px;padding:10px 13px;border-radius:11px;
  font-size:13.5px;color:var(--text-2);text-decoration:none;white-space:nowrap;
  transition:all .25s var(--ease)}
.mmenu a:hover{color:var(--brand);background:color-mix(in srgb,var(--brand) 13%,transparent);transform:translateX(3px)}
.mmenu a .mi{font-size:14px;width:18px;text-align:center;flex:0 0 auto}
.mmenu .mdiv{height:1px;margin:6px 10px;background:var(--stroke)}

/* ---------- Hero ---------- */
.hero{padding:60px 0 26px;text-align:center}
.badge{display:inline-flex;align-items:center;gap:9px;padding:7px 16px;border-radius:30px;
  background:var(--glass);border:1px solid var(--stroke);backdrop-filter:blur(14px);
  font-size:12px;letter-spacing:2px;color:var(--text-2);text-transform:uppercase;animation:up .8s var(--ease) both}
.badge .dot{width:7px;height:7px;border-radius:50%;background:var(--brand);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,150,0,.65)}70%{box-shadow:0 0 0 12px rgba(255,150,0,0)}100%{box-shadow:0 0 0 0 rgba(255,150,0,0)}}
.hero h1{margin:22px 0 14px;font-size:clamp(28px,5.2vw,50px);line-height:1.22;font-weight:800;letter-spacing:-.5px;animation:up .9s .06s var(--ease) both}
.hero h1 em{font-style:normal;background:linear-gradient(100deg,var(--brand),var(--brand-3) 45%,var(--magenta));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--brand)}
/* 「& AI」：蓝色实色字体（不用渐变）。必须同时清掉 background 与 background-clip，
   否则会继承上面 em 的「渐变裁字 + 透明填充」，设 color 是看不见的 */
.hero h1 em.blue{background:none;-webkit-background-clip:border-box;background-clip:border-box;
  -webkit-text-fill-color:var(--blue);color:var(--blue)}
.hero p{max-width:680px;margin:0 auto;color:var(--text-2);font-size:15.5px;animation:up .9s .12s var(--ease) both}
@keyframes up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ---------- 玻璃卡片 ---------- */
.card{position:relative;border-radius:var(--r-lg);padding:30px;background:var(--glass);border:1px solid var(--stroke);
  backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%);
  box-shadow:var(--shadow);transition:border-color .4s var(--ease),box-shadow .4s var(--ease),background .4s var(--ease)}
.card.neon::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;z-index:-1;
  background:conic-gradient(from var(--ang,0deg),transparent 0deg,var(--brand) 70deg,var(--magenta) 130deg,var(--cyan) 190deg,transparent 260deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;animation:spin 7s linear infinite;opacity:.85}
@keyframes spin{to{--ang:360deg}}
@property --ang{syntax:'<angle>';inherits:false;initial-value:0deg}

/* ---------- 测算表单 ---------- */
/* ---------- 出生时间选择器（公历/农历 · 年月日时分滚轮） ---------- */
.bt-f{display:flex;align-items:center;gap:10px;width:100%;height:52px;padding:0 14px;border-radius:var(--r-md);
  background:var(--field);border:1px solid var(--stroke);cursor:pointer;transition:all .3s var(--ease)}
.bt-f:hover,.bt-f:focus-visible{border-color:var(--brand);box-shadow:0 0 0 4px rgba(255,150,0,.13);outline:0}
.bt-f-tag{flex:0 0 auto;font-size:11.5px;font-weight:800;letter-spacing:1px;color:#fff;padding:3px 11px;border-radius:20px;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));box-shadow:0 6px 16px -8px rgba(255,150,0,.9)}
.bt-f-tag.nl{background:linear-gradient(135deg,#a78bfa,#6d28d9);box-shadow:0 6px 16px -8px rgba(139,92,246,.9)}
.bt-f-inp{flex:1;min-width:0;height:auto!important;border:0!important;background:transparent!important;box-shadow:none!important;
  padding:0!important;font-size:15px;font-weight:700;color:var(--text);cursor:pointer;text-overflow:ellipsis}
.bt-f-ar{flex:0 0 auto;color:var(--text-3);font-size:12px}
.bt-f-hint{font-size:12px;color:var(--text-3)}

.bt-wrap{position:fixed;inset:0;z-index:220;display:flex;align-items:center;justify-content:center;padding:20px}
.bt-wrap[hidden]{display:none}
.bt-mask{position:absolute;inset:0;background:rgba(4,6,14,.55);backdrop-filter:blur(7px) saturate(120%);animation:gwFade .26s var(--ease)}
.bt-dlg{position:relative;width:min(452px,100%);border-radius:22px;overflow:hidden;
  background:color-mix(in srgb,var(--bg) 94%,transparent);border:1px solid var(--stroke);
  backdrop-filter:blur(22px) saturate(150%);box-shadow:0 44px 96px -34px rgba(0,0,0,.8);animation:gwPop .3s var(--ease)}
html[data-theme="light"] .bt-dlg{background:rgba(255,255,255,.97)}
@keyframes gwFade{from{opacity:0}to{opacity:1}}
@keyframes gwPop{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
.bt-h{display:flex;align-items:center;gap:10px;padding:16px 18px 0}
.bt-tabs{display:inline-flex;gap:4px;padding:4px;border-radius:30px;background:var(--field);border:1px solid var(--stroke)}
.bt-tabs .bt-gt{border:0;cursor:pointer;font-family:inherit;font-size:13.5px;font-weight:700;color:var(--text-2);
  background:transparent;padding:7px 20px;border-radius:30px;transition:all .28s var(--ease)}
.bt-tabs .bt-gt.on{color:#fff;background:linear-gradient(135deg,var(--brand),var(--brand-2));box-shadow:0 8px 20px -10px rgba(255,150,0,.95)}
.bt-x{margin-left:auto;width:34px;height:34px;border-radius:50%;border:1px solid var(--stroke);background:var(--glass-2);
  color:var(--text-2);cursor:pointer;font-size:13px;line-height:1;transition:all .25s var(--ease)}
.bt-x:hover{color:var(--brand);border-color:var(--brand)}
.bt-info{margin:12px 18px 0;padding:9px 14px;border-radius:12px;font-size:12.5px;line-height:1.6;color:var(--text-2);
  background:color-mix(in srgb,var(--brand) 9%,transparent);border:1px solid color-mix(in srgb,var(--brand) 26%,transparent);
  min-height:38px;display:flex;align-items:center}
.bt-info.err{background:color-mix(in srgb,var(--err,#ef4444) 12%,transparent);
  border-color:color-mix(in srgb,var(--err,#ef4444) 40%,transparent);color:#f87171}
.bt-rolls{position:relative;display:flex;padding:10px 12px 0;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 24%,#000 76%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 24%,#000 76%,transparent)}
.bt-rolls::after{content:"";position:absolute;left:10px;right:10px;top:86px;height:38px;border-radius:12px;pointer-events:none;
  background:color-mix(in srgb,var(--brand) 11%,transparent);
  border-top:1px solid color-mix(in srgb,var(--brand) 48%,transparent);
  border-bottom:1px solid color-mix(in srgb,var(--brand) 48%,transparent)}
.bt-rw{flex:1;min-width:0;height:210px;padding:86px 0;overflow-y:scroll;overflow-x:hidden;position:relative;z-index:1;
  scroll-snap-type:y mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior:contain;outline:0}
.bt-rw::-webkit-scrollbar{display:none;width:0;height:0}
.bt-rw .bt-it{height:38px;line-height:38px;text-align:center;font-size:15px;color:var(--text-3);white-space:nowrap;
  scroll-snap-align:center;cursor:pointer;transition:color .2s var(--ease),font-size .2s var(--ease);overflow:hidden;text-overflow:ellipsis}
.bt-rw .bt-it.on{color:var(--text);font-weight:800;font-size:16.5px}
.bt-rw .bt-it.on.unk{color:var(--text-2);font-size:14px}
.bt-rw .bt-it.unk{font-size:13.5px}
.bt-rw:focus-visible .bt-it.on{color:var(--brand)}
.bt-b{display:flex;gap:12px;padding:16px 18px 18px}
.bt-b .btn,.bt-b .btn2{flex:1;height:50px;padding:0;font-size:15px;letter-spacing:1px}

.frow{display:flex;flex-direction:column;gap:8px;margin-top:18px}
.frow:first-child{margin-top:0}
.fl{font-size:13px;font-weight:700;color:var(--text-2);letter-spacing:.4px;display:flex;align-items:center;gap:8px}
.fl .tip{font-weight:400;color:var(--text-3);font-size:11.5px}
.fc{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.inp{height:52px;border-radius:var(--r-md);background:var(--field);border:1px solid var(--stroke);
  padding:0 15px;color:var(--text);font-size:15px;transition:all .3s var(--ease);width:100%}
.inp:focus{border-color:var(--brand);box-shadow:var(--glow);background:var(--glass-2)}
.inp.han{font-family:var(--font-cn);font-size:22px;font-weight:800;letter-spacing:4px;text-align:center;width:150px;flex:0 0 auto}
.inp.slim{width:auto;flex:1 1 150px;min-width:130px}
.inp::placeholder{color:var(--text-3);font-weight:500;font-size:15px;letter-spacing:.5px;font-family:var(--font)}
select.inp{cursor:pointer;padding:0 10px}
select.inp option{color:#131620;background:#fff}
select.inp.year{font-family:var(--font-num);font-weight:600}
.btn{flex:0 0 auto;height:60px;padding:0 34px;border-radius:var(--r-md);cursor:pointer;font-size:16px;font-weight:800;
  letter-spacing:2px;color:#fff;position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));box-shadow:0 14px 34px -14px rgba(255,120,0,.95);
  transition:transform .25s var(--ease),box-shadow .3s var(--ease),filter .3s}
.btn:hover{transform:translateY(-2px);box-shadow:0 20px 42px -14px rgba(255,120,0,1);filter:saturate(1.15)}
.btn:active{transform:translateY(0) scale(.985)}
.btn2{flex:0 0 auto;height:60px;padding:0 26px;border-radius:var(--r-md);cursor:pointer;font-size:15px;font-weight:800;letter-spacing:1.5px;
  color:var(--brand);background:var(--glass-2);border:1px solid var(--stroke);transition:all .3s var(--ease)}
.btn2:hover{border-color:var(--brand);box-shadow:0 12px 28px -14px rgba(255,150,0,.9);transform:translateY(-2px)}

/* ---------- AI 智能测算：按钮 + 结果面板 ---------- */
.btnai{flex:0 0 auto;height:60px;padding:0 30px;border-radius:var(--r-md);cursor:pointer;font-size:15.5px;font-weight:800;
  letter-spacing:1.5px;color:#fff;position:relative;overflow:hidden;white-space:nowrap;
  background:linear-gradient(120deg,#8b5cf6,#22d3ee 55%,#f472b6);background-size:220% 220%;background-position:0 50%;
  box-shadow:0 14px 34px -14px rgba(139,92,246,.95);
  transition:transform .25s var(--ease),box-shadow .3s var(--ease),background-position .7s var(--ease)}
.btnai:hover{transform:translateY(-2px);box-shadow:0 20px 42px -14px rgba(139,92,246,1);background-position:100% 50%}
.btnai:active{transform:translateY(0) scale(.985)}
.btnai[disabled]{opacity:.6;cursor:not-allowed;transform:none;box-shadow:none}
.btnai .sp{display:inline-block;width:14px;height:14px;margin-right:9px;vertical-align:-2px;border-radius:50%;
  border:2px solid rgba(255,255,255,.42);border-top-color:#fff;animation:aispin .8s linear infinite}
@keyframes aispin{to{transform:rotate(360deg)}}

.aipanel{margin-top:18px;border-radius:var(--r-md);border:1px solid var(--stroke);background:var(--glass);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);overflow:hidden;display:none}
.aipanel.show{display:block;animation:aiIn .35s var(--ease)}
@keyframes aiIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.aipanel .ah{display:flex;align-items:center;gap:10px;padding:13px 18px;border-bottom:1px solid var(--stroke-2);
  font-size:14px;font-weight:800;letter-spacing:.5px;color:var(--text);
  background:linear-gradient(90deg,rgba(139,92,246,.18),rgba(34,211,238,.10) 62%,transparent)}
.aipanel .ah .lg{width:26px;height:26px;border-radius:9px;display:grid;place-items:center;font-size:14px;color:#fff;
  background:linear-gradient(135deg,#8b5cf6,#22d3ee);box-shadow:0 8px 18px -8px rgba(139,92,246,.9)}
.aipanel .ah .tm{margin-left:auto;font-size:12px;font-weight:600;color:var(--text-3);font-family:var(--font-num)}
.aipanel .ab{padding:18px 20px 4px;font-size:14.5px;line-height:1.95;color:var(--text-2);
  white-space:pre-wrap;word-break:break-word;font-family:var(--font-cn)}
.aipanel .af{padding:12px 20px 16px;font-size:12px;color:var(--text-3)}
.aipanel.err .ah{background:linear-gradient(90deg,rgba(255,90,90,.20),transparent)}
.aipanel.err .ab{color:var(--warn)}
/* 命主资料卡：姓名 / 性别 / 公历 + 农历 / 八字 / 五行 / 生肖 / 星座 / 时辰 / 血型 */
.aipro{padding:16px 20px 2px}
.aipro-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px}
.aipro-i{display:flex;align-items:baseline;gap:9px;padding:9px 13px;border-radius:12px;
  border:1px solid var(--stroke-2);background:var(--glass-2)}
.aipro-k{flex:0 0 auto;font-size:12px;color:var(--text-3);letter-spacing:.3px}
.aipro-v{font-size:14px;font-weight:700;color:var(--text);font-family:var(--font-cn);
  word-break:break-word;line-height:1.6}
.aipro-v.bazi{font-family:var(--font-cn);letter-spacing:1.2px;color:var(--brand)}
.aipro[hidden]{display:none}
/* 小标题：把资料卡与 AI 解读正文分开 */
.aisec{display:flex;align-items:center;gap:9px;padding:16px 20px 0;font-size:14px;font-weight:800;
  letter-spacing:.5px;color:var(--text)}
.aisec::before{content:"";flex:0 0 auto;width:4px;height:15px;border-radius:3px;
  background:linear-gradient(180deg,#8b5cf6,#22d3ee);box-shadow:0 0 10px -2px rgba(139,92,246,.9)}
.aisec[hidden]{display:none}
/* 骨架屏（等待大模型返回时） */
.aisk{padding:6px 0 16px}
.aisk i{display:block;height:13px;border-radius:8px;margin-bottom:11px;
  background:linear-gradient(90deg,var(--field),var(--glass-2),var(--field));background-size:200% 100%;
  animation:aiShine 1.2s ease-in-out infinite}
.aisk i:nth-child(2){width:92%}
.aisk i:nth-child(3){width:80%}
.aisk i:nth-child(4){width:88%}
.aisk i:nth-child(5){width:62%}
@keyframes aiShine{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ---------- AI 付费解锁卡（免费只看前半段） ---------- */
.ailock{position:relative;margin:8px 20px 20px;border-radius:var(--r-md);overflow:hidden;
  border:1px solid var(--stroke);background:var(--glass)}
.ailock-msk{padding:0 20px;pointer-events:none;user-select:none}
.ailock-msk i{display:block;height:11px;border-radius:6px;margin:13px 0;
  background:linear-gradient(90deg,var(--field),var(--glass-2),var(--field));
  filter:blur(2.5px);opacity:.85}
.ailock-msk i:nth-child(1){width:100%}
.ailock-msk i:nth-child(2){width:88%}
.ailock-msk i:nth-child(3){width:94%}
.ailock-msk i:nth-child(4){width:56%}
.ailock::after{content:"";position:absolute;left:0;right:0;top:0;height:88px;pointer-events:none;
  background:linear-gradient(180deg,var(--bg),transparent);opacity:.55}
.ailock-box{position:relative;z-index:1;text-align:center;padding:6px 20px 18px}
.ailock-t{font-size:15px;font-weight:800;color:var(--text);letter-spacing:.3px}
.ailock-t b{color:var(--brand);font-family:var(--font-num)}
.ailock-d{margin-top:6px;font-size:12.5px;color:var(--text-3);line-height:1.8}
.ailock-btn{margin-top:14px;height:52px;padding:0 34px;border-radius:var(--r-md);cursor:pointer;
  font-size:16px;font-weight:800;letter-spacing:1px;color:#fff;
  background:linear-gradient(120deg,#8b5cf6,#22d3ee 55%,#f472b6);background-size:220% 220%;background-position:0 50%;
  box-shadow:0 14px 34px -14px rgba(139,92,246,.95);transition:transform .25s var(--ease),background-position .7s var(--ease)}
.ailock-btn:hover{transform:translateY(-2px);background-position:100% 50%}
.ailock-btn[disabled]{opacity:.6;cursor:not-allowed;transform:none}
.ailock-n{margin-top:9px;font-size:12px;color:var(--text-3)}
.aipanel.paid{border-color:rgba(82,196,26,.5)}
.aipanel.paid .ah{background:linear-gradient(90deg,rgba(82,196,26,.18),transparent)}
.aipanel.paid .ah .lg{background:linear-gradient(135deg,#52c41a,#22d3ee)}

/* ---------- 支付弹窗 ---------- */
.aipay{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:20px}
.aipay[hidden]{display:none}
.aipay-mask{position:absolute;inset:0;background:rgba(4,6,12,.66);backdrop-filter:blur(6px)}
.aipay-box{position:relative;width:100%;max-width:400px;border-radius:var(--r-lg);padding:26px 24px 22px;text-align:center;
  background:var(--glass-2);border:1px solid var(--stroke);box-shadow:var(--shadow);backdrop-filter:blur(20px);
  animation:aiIn .3s var(--ease)}
.aipay-x{position:absolute;top:12px;right:14px;width:30px;height:30px;border-radius:9px;cursor:pointer;
  color:var(--text-3);background:transparent;font-size:15px}
.aipay-x:hover{color:var(--text);background:var(--glass)}
.aipay-h{font-size:17px;font-weight:800;color:var(--text)}
.aipay-amt{margin:6px 0 14px;font-size:34px;font-weight:800;color:var(--brand);font-family:var(--font-num)}
.aipay-amt small{font-size:16px;color:var(--text-3);font-weight:400;margin-right:2px}
.aipay-tabs{display:flex;gap:10px;justify-content:center;margin-bottom:14px;flex-wrap:wrap}
.aipay-tab{flex:1 1 120px;height:42px;border-radius:12px;cursor:pointer;font-size:14px;font-weight:700;
  color:var(--text-2);background:var(--glass);border:1px solid var(--stroke);transition:all .28s var(--ease)}
.aipay-tab:hover{color:var(--text);border-color:var(--brand)}
.aipay-tab.on{color:#fff;border-color:transparent;background:linear-gradient(135deg,#1677ff,#22d3ee)}
.aipay-tab.on[data-m="wechat"]{background:linear-gradient(135deg,#22c55e,#52c41a)}
.aipay-qr{display:inline-block;padding:12px;border-radius:14px;background:#fff;box-shadow:0 10px 30px -14px rgba(0,0,0,.5)}
.aipay-qr img{display:block;width:200px;height:200px}
.aipay-qr:empty,.aipay-qr img[src=""]{display:none}
.aipay-st{margin-top:14px;font-size:13.5px;line-height:1.7}
.aipay-st.wait{color:var(--text-2)}
.aipay-st.ok{color:#52c41a;font-weight:800}
.aipay-st.err{color:var(--warn)}
.aipay-st .dt{animation:aiDot 1.4s infinite}
.aipay-st .dt:nth-child(2){animation-delay:.2s}
.aipay-st .dt:nth-child(3){animation-delay:.4s}
@keyframes aiDot{0%,100%{opacity:.2}50%{opacity:1}}
.aipay-no{margin-top:10px;font-size:12px;color:var(--text-3);font-family:var(--font-num)}
.aipay-tip{margin-top:6px;font-size:12px;color:var(--text-3)}

/* 性别 pills */
.seg{display:inline-flex;gap:6px;padding:5px;border-radius:14px;background:var(--field);border:1px solid var(--stroke)}
.seg label{cursor:pointer;position:relative}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg span{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:60px;height:38px;padding:0 14px;
  border-radius:10px;font-size:14px;font-weight:700;color:var(--text-2);transition:all .3s var(--ease);white-space:nowrap}
.seg label:hover span{color:var(--text)}
.seg input:checked + span{color:#fff;background:linear-gradient(135deg,var(--brand),var(--brand-2));
  box-shadow:0 10px 22px -12px rgba(255,150,0,.95)}
.seg.pink input[value="女"]:checked + span{background:linear-gradient(135deg,#f472b6,#db2777)}

/* ---------- 区块标题 ---------- */
.sect{margin-top:54px}
.sh{display:flex;align-items:center;gap:13px;margin-bottom:20px}
.sh .no{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;flex:0 0 auto;
  font-family:var(--font-num);font-weight:800;font-size:15px;color:var(--brand);background:var(--glass-2);border:1px solid var(--stroke)}
.sh h2{font-size:clamp(17px,2.4vw,21px);font-weight:800;letter-spacing:-.2px}
.sh h2 span{color:var(--text-3);font-weight:500;font-size:13.5px}

/* ---------- 快捷入口 pill ---------- */
.qgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.qlink{display:flex;align-items:center;gap:11px;border-radius:var(--r-md);padding:14px 16px;background:var(--glass);
  border:1px solid var(--stroke);transition:all .3s var(--ease);cursor:pointer;min-height:58px}
.qlink:hover{transform:translateY(-3px);border-color:var(--brand);box-shadow:0 16px 34px -20px rgba(255,150,0,.9)}
.qlink .ic{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;flex:0 0 auto;font-size:16px;color:#fff;
  background:linear-gradient(135deg,var(--c1,#ff9600),var(--c2,#ff5f00))}
.qlink .tx{font-size:14px;font-weight:700;color:var(--text);line-height:1.35}
.qlink .tx small{display:block;font-size:11.5px;font-weight:400;color:var(--text-3)}
/* 灵签：紧凑 pill */
.zgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.zq{display:flex;align-items:center;justify-content:center;gap:8px;height:52px;border-radius:14px;font-family:var(--font-cn);
  font-size:14.5px;font-weight:700;color:var(--text-2);background:var(--glass);border:1px solid var(--stroke);transition:all .3s var(--ease)}
.zq i{font-style:normal;font-size:17px}
.zq:hover{color:var(--text);border-color:var(--brand);transform:translateY(-3px);box-shadow:0 14px 30px -18px rgba(255,150,0,.9)}
/* 付费详批 */
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.pq{display:flex;align-items:center;gap:10px;border-radius:var(--r-md);padding:13px 15px;background:var(--glass);
  border:1px solid var(--stroke);font-size:13.5px;font-weight:700;color:var(--text-2);transition:all .3s var(--ease)}
.pq::before{content:"";width:7px;height:7px;border-radius:50%;flex:0 0 auto;background:var(--magenta);box-shadow:0 0 8px var(--magenta)}
.pq:hover{color:var(--text);border-color:var(--magenta);transform:translateY(-3px);box-shadow:0 14px 30px -18px rgba(244,114,182,.8)}

/* ---------- 说明 ---------- */
.note{border-radius:var(--r-md);padding:22px 26px;background:var(--glass);border:1px solid var(--stroke);
  border-left:3px solid var(--brand);color:var(--text-2);font-size:14.5px;line-height:2;backdrop-filter:blur(14px)}
.note strong{color:var(--text);font-weight:700}
.note p+p{margin-top:12px}
.note a{color:var(--brand)}
.note a:hover{text-decoration:underline}

/* ---------- 工具网格 ---------- */
.tools{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.tool{display:flex;align-items:center;gap:12px;border-radius:var(--r-md);padding:15px 16px;background:var(--glass);
  border:1px solid var(--stroke);transition:all .3s var(--ease)}
.tool:hover{transform:translateY(-3px);border-color:var(--brand);box-shadow:0 16px 34px -20px rgba(255,150,0,.9)}
.tool .ti{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:0 0 auto;font-family:var(--font-cn);
  font-size:17px;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--brand),var(--brand-2));
  box-shadow:0 8px 18px -8px rgba(255,150,0,.9)}
.tool .tn{font-size:14px;font-weight:700;color:var(--text);line-height:1.35}
.tool .tn small{display:block;font-size:11.5px;font-weight:400;color:var(--text-3)}

/* ---------- 起名文章板块 ---------- */
.arts{margin-top:34px}
.arts .agrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.arts .acard{display:flex;flex-direction:column;border-radius:var(--r-md);overflow:hidden;background:var(--glass);
  border:1px solid var(--stroke);backdrop-filter:blur(18px) saturate(140%);
  transition:transform .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease)}
.arts .acard:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--brand) 55%,transparent);box-shadow:0 22px 48px -22px rgba(255,150,0,.38)}
.arts .acover{height:130px;background:var(--glass-2);border-bottom:1px solid var(--stroke-2);display:flex;align-items:center;justify-content:center;
  font-size:34px;color:var(--text-3);overflow:hidden}
.arts .acover img{width:100%;height:100%;object-fit:cover}
.arts .abody{padding:14px 16px 16px;display:flex;flex-direction:column;gap:7px;flex:1}
.arts .atit{font-size:14.5px;font-weight:700;line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.arts .acard:hover .atit{color:var(--brand)}
.arts .adesc{font-size:12.5px;color:var(--text-3);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.arts .ameta{margin-top:auto;padding-top:8px;display:flex;gap:10px;font-size:11.5px;color:var(--text-3)}
.arts .ameta .cat{color:var(--brand);font-weight:600}
.arts .more{text-align:center;margin-top:18px}
.arts .more a{display:inline-flex;align-items:center;gap:8px;padding:10px 30px;border-radius:30px;font-size:14px;
  border:1px solid var(--stroke);background:var(--glass);transition:all .3s var(--ease)}
.arts .more a:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-2px);box-shadow:var(--glow)}

/* ---------- 广告位 ---------- */
.ads{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:34px;align-items:stretch}
.ads .box{border-radius:var(--r-md);padding:14px;background:var(--glass);border:1px solid var(--stroke);
  display:grid;place-items:center;min-height:110px;backdrop-filter:blur(14px);overflow:hidden}
.ads .box img{max-height:110px;object-fit:contain}
.ads .box.union{font-size:12.5px;color:var(--text-3)}

/* ---------- 淘宝客好物推荐 ---------- */
.tbkgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:20px}
@media(max-width:960px){.tbkgrid{grid-template-columns:repeat(2,1fr)}}
.tbkcard{position:relative;display:flex;flex-direction:column;gap:9px;padding:12px;border-radius:var(--r-md);
  background:var(--glass);border:1px solid var(--stroke);backdrop-filter:blur(14px);
  transition:transform .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease);overflow:hidden}
.tbkcard:hover{transform:translateY(-4px);border-color:var(--brand);box-shadow:var(--glow)}
.tbkcard .tp{display:block;aspect-ratio:1/1;border-radius:12px;overflow:hidden;background:var(--field)}
.tbkcard .tp img{width:100%;height:100%;object-fit:cover;display:block}
.tbkcard .tt{font-size:13.5px;font-weight:600;color:var(--text);line-height:1.5;height:2.95em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tbkcard .pr{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-top:auto}
.tbkcard .pr b{font-size:19px;color:var(--brand);letter-spacing:-.3px}
.tbkcard .pr .zk{font-size:12px;color:var(--text-3);text-decoration:line-through}
.tbkcard .cp{font-size:11px;font-weight:800;color:#fff;padding:2px 8px;border-radius:8px;white-space:nowrap;
  background:linear-gradient(135deg,#ff6a3d,#e23a2e);box-shadow:0 4px 12px -6px rgba(226,58,46,.8)}
.tbkcard .vol{font-size:11.5px;color:var(--text-3)}
.tbkcard .tg{position:absolute;top:10px;left:10px;font-size:10.5px;font-weight:800;letter-spacing:1px;color:#fff;
  padding:3px 9px;border-radius:16px;background:linear-gradient(135deg,var(--brand),var(--brand-2));opacity:.94;
  box-shadow:0 4px 12px -6px rgba(255,150,0,.9)}
.more-row{text-align:center;margin-top:18px}
.more-link{display:inline-flex;align-items:center;gap:8px;padding:10px 30px;border-radius:30px;font-size:14px;
  border:1px solid var(--stroke);background:var(--glass);transition:all .3s var(--ease)}
.more-link:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-2px);box-shadow:var(--glow)}
/* 京东好物：局部覆盖品牌色为京东红，复用 .tbkgrid/.tbkcard/.more-link */
.jdk-sec{--brand:#e1251b;--brand-2:#c81623;--brand-3:#ff6a60;--glow:0 12px 40px -12px rgba(225,37,27,.5)}
.ads .wide{grid-column:1/-1}

/* ---------- 友情链接 / 页脚 ---------- */
.flink{border-radius:var(--r-md);padding:20px 24px;background:var(--glass);border:1px solid var(--stroke);
  backdrop-filter:blur(14px);display:flex;flex-wrap:wrap;gap:8px 18px;font-size:13px;color:var(--text-3)}
.flink a{color:var(--text-2)}
.flink a:hover{color:var(--brand)}
footer{margin-top:70px;padding:34px 0 46px;border-top:1px solid var(--stroke);position:relative;z-index:1}
footer .wrap{text-align:center;color:var(--text-3);font-size:13.5px;line-height:2.1}
footer a{color:var(--text-2);margin:0 4px}
footer a:hover{color:var(--brand)}
footer .links{margin-bottom:12px;display:flex;gap:6px 14px;justify-content:center;flex-wrap:wrap}
.beian{display:inline-block;margin-top:8px;padding:5px 14px;border-radius:30px;background:var(--glass);
  border:1px solid var(--stroke);font-size:12.5px;font-family:var(--font-num)}

/* ---------- 回到顶部 ---------- */
.totop{position:fixed;right:20px;bottom:22px;z-index:50;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  cursor:pointer;color:#fff;background:linear-gradient(135deg,var(--brand),var(--brand-2));
  box-shadow:0 14px 30px -12px rgba(255,120,0,1);opacity:0;visibility:hidden;transform:translateY(14px);
  transition:all .4s var(--ease)}
.totop.show{opacity:1;visibility:visible;transform:none}
.totop:hover{transform:translateY(-3px)}

/* ---------- 响应式 ---------- */
@media (max-width:900px){
  .qgrid,.zgrid,.pgrid,.tools{grid-template-columns:repeat(2,1fr)}
  .arts .agrid{grid-template-columns:repeat(2,1fr)}
  .ads{grid-template-columns:1fr}
}
@media (max-width:720px){
  .topbar .wrap{height:auto;padding-top:10px;padding-bottom:10px;flex-wrap:wrap;gap:10px}
  .nav{margin-left:0;width:100%;justify-content:flex-start;overflow-x:auto;padding-bottom:2px}
  .nav::-webkit-scrollbar{display:none}
  .tact{margin-left:auto}
  .hero{padding:40px 0 20px}
  .card{padding:22px 18px;border-radius:20px}
  .inp.han{width:100%}
  .inp.slim{width:100%;flex:1 1 100%}
  select.inp{width:100%}
  select.inp[style]{width:100%!important;flex:1 1 100%!important}
  .fc .btn,.fc .btn2,.fc .btnai{width:100%}
  .aipanel .ab{font-size:14px;padding:16px 16px 4px}
  .aipro{padding:14px 16px 2px}
  .aipro-g{grid-template-columns:1fr;gap:9px}
  .aisec{padding:14px 16px 0}
  .ailock{margin:8px 0 16px;border-radius:14px}
  .ailock-msk{padding:0 14px}
  .ailock-box{padding:6px 14px 16px}
  .ailock-btn{width:100%;padding:0 18px}
  .aipay{padding:12px}
  .aipay-box{padding:22px 16px 18px;border-radius:20px}
  .aipay-qr img{width:170px;height:170px}
  .qgrid,.zgrid,.pgrid,.tools{grid-template-columns:1fr}
  .arts .agrid{grid-template-columns:1fr}
  .note{padding:16px 18px;font-size:13.5px}
  .ads .box img{max-height:none;width:100%;height:auto}
  /* 出生时间选择器：小屏改为底部抽屉 */
  .bt-wrap{align-items:flex-end;padding:0}
  .bt-dlg{width:100%;border-radius:22px 22px 0 0;animation:gwSheet .3s var(--ease)}
  .bt-rolls{padding-left:6px;padding-right:6px}
  .bt-rolls::after{left:4px;right:4px;top:89px}
  .bt-rw{height:196px;padding:79px 0}
  .bt-rw .bt-it{height:38px;line-height:38px;font-size:14px}
  .bt-rw .bt-it.on{font-size:15.5px}
  .bt-b{padding-bottom:calc(18px + env(safe-area-inset-bottom))}
  @keyframes gwSheet{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:none}}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
}