:root{--gold:#c9a84c;--gold-l:#e8d5a3;--paper:#f5f0e8;--ink:#0a0a0f;}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
body{background:var(--ink);color:var(--paper);font-family:'Noto Serif SC',serif;min-height:100vh;overflow-x:hidden;}
.bg{position:fixed;inset:0;z-index:0;
  background:radial-gradient(ellipse 55% 45% at 10% 10%,rgba(110,50,170,.09) 0%,transparent 60%),
             radial-gradient(ellipse 50% 55% at 90% 90%,rgba(20,80,40,.1) 0%,transparent 60%),
             var(--ink);}
.bg::after{content:'';position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg width='80' height='80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23c9a84c' fill-opacity='.025'%3E%3Cpath d='M40 38v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zM40 8V4h-2v4h-4v2h4v4h2V8h4V6h-4zM8 38v-4H6v4H2v2h4v4h2v-4h4v-2H8zM8 8V4H6v4H2v2h4v4h2V8h4V6H8z'/%3E%3C/g%3E%3C/svg%3E");}
.wrap{position:relative;z-index:1;max-width:460px;margin:0 auto;padding:0 18px 80px;}

/* header */
.hd{text-align:center;padding:44px 0 20px;animation:fu .7s both;}
.hd-badge{display:inline-block;border:1px solid rgba(201,168,76,.4);color:var(--gold);font-size:10px;letter-spacing:4px;padding:3px 14px;border-radius:20px;margin-bottom:18px;opacity:.85;}
.hd h1{font-family:'ZCOOL XiaoWei',serif;font-size:36px;font-weight:400;letter-spacing:8px;line-height:1.2;text-shadow:0 0 40px rgba(201,168,76,.22);}
.hd h1 em{color:var(--gold);font-style:normal;}
.hd p{margin-top:12px;font-size:12px;color:rgba(245,240,232,.42);letter-spacing:1.5px;line-height:2;}

/* wx row */
.wx-row{display:flex;justify-content:center;gap:6px;margin:16px 0 26px;animation:fu .7s .12s both;}
.wxp{padding:7px 12px;border-radius:7px;font-family:'ZCOOL XiaoWei',serif;font-size:15px;border:1px solid;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:44px;}
.wxd{width:5px;height:5px;border-radius:50%;}
.wxp.mu{color:#4db87a;border-color:rgba(77,184,122,.2);background:rgba(77,184,122,.05);}
.wxp.mu .wxd{background:#4db87a;}
.wxp.huo{color:#e8614a;border-color:rgba(232,97,74,.2);background:rgba(232,97,74,.05);}
.wxp.huo .wxd{background:#e8614a;}
.wxp.tu{color:#d4a84b;border-color:rgba(212,168,75,.2);background:rgba(212,168,75,.05);}
.wxp.tu .wxd{background:#d4a84b;}
.wxp.jin{color:#b8c0cc;border-color:rgba(184,192,204,.2);background:rgba(184,192,204,.05);}
.wxp.jin .wxd{background:#b8c0cc;}
.wxp.shui{color:#5ba3d9;border-color:rgba(91,163,217,.2);background:rgba(91,163,217,.05);}
.wxp.shui .wxd{background:#5ba3d9;}

/* card */
.card{background:rgba(255,255,255,.04);border:1px solid rgba(201,168,76,.11);border-radius:14px;padding:20px 18px;margin-bottom:13px;backdrop-filter:blur(8px);}
.card:nth-of-type(1){animation:fu .7s .18s both;}
.card:nth-of-type(2){animation:fu .7s .26s both;}
.card:nth-of-type(3){animation:fu .7s .34s both;}
.card:nth-of-type(4){animation:fu .7s .42s both;}
.c-lbl{font-size:10px;letter-spacing:3px;color:var(--gold);opacity:.55;margin-bottom:16px;display:flex;align-items:center;gap:8px;}
.c-lbl::after{content:'';flex:1;height:1px;background:linear-gradient(to right,rgba(201,168,76,.25),transparent);}

/* form grids */
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:10px;}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px;}
.g1{margin-bottom:10px;}
.fl{display:block;font-size:10px;color:rgba(245,240,232,.35);letter-spacing:.6px;margin-bottom:5px;}
select,input[type=text]{width:100%;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.09);border-radius:8px;padding:11px 12px;color:var(--paper);font-size:14px;font-family:'Noto Serif SC',serif;outline:none;transition:border-color .2s,box-shadow .2s;-webkit-appearance:none;appearance:none;}
select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23c9a84c' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:30px;}
select:focus,input:focus{border-color:rgba(201,168,76,.4);box-shadow:0 0 0 3px rgba(201,168,76,.06);}
select option{background:#18181e;}


/* submit */
.btn-go{width:100%;padding:16px;background:linear-gradient(135deg,#c9a84c 0%,#e8d08a 50%,#c9a84c 100%);background-size:200% 100%;border:none;border-radius:10px;color:var(--ink);font-family:'ZCOOL XiaoWei',serif;font-size:17px;letter-spacing:5px;cursor:pointer;transition:all .25s;animation:fu .7s .5s both,sh 4s 2s infinite;margin-top:4px;position:relative;overflow:hidden;}
.btn-go::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);transform:translateX(-100%);transition:transform .5s;}
.btn-go:hover::before{transform:translateX(100%);}
.btn-go:hover{box-shadow:0 8px 28px rgba(201,168,76,.3);transform:translateY(-1px);}
.btn-go:active{transform:translateY(0);}
.btn-go:disabled{opacity:.4;cursor:not-allowed;transform:none;}
@keyframes sh{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}
.note{text-align:center;margin-top:13px;font-size:10px;color:rgba(255,255,255,.14);letter-spacing:1px;}

/* loading */
#loading{display:none;position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.88);backdrop-filter:blur(12px);flex-direction:column;align-items:center;justify-content:center;gap:18px;}
#loading.show{display:flex;}
.spin{width:48px;height:48px;border-radius:50%;border:2px solid rgba(201,168,76,.14);border-top-color:var(--gold);animation:spin .85s linear infinite;}
@keyframes spin{to{transform:rotate(360deg)}}
.spin-t{font-size:12px;letter-spacing:3px;color:var(--gold);opacity:.6;}

/* result */
#res{display:none;padding-top:8px;animation:fu .6s both;}
.r-hd{text-align:center;margin-bottom:24px;padding-top:38px;}
.r-hd .badge{display:inline-block;background:rgba(201,168,76,.1);border:1px solid rgba(201,168,76,.28);color:var(--gold);font-size:10px;letter-spacing:2px;padding:3px 14px;border-radius:20px;margin-bottom:14px;}
.r-hd h2{font-family:'ZCOOL XiaoWei',serif;font-size:26px;font-weight:400;letter-spacing:4px;}
.r-hd h2 em{color:var(--gold);font-style:normal;}

/* bazi */
.bz-box{background:rgba(0,0,0,.3);border:1px solid rgba(201,168,76,.11);border-radius:12px;padding:18px 14px;margin-bottom:13px;text-align:center;}
.bz-lbl{font-size:9px;letter-spacing:3px;color:rgba(201,168,76,.42);margin-bottom:14px;}
.bz-row{display:flex;justify-content:center;gap:6px;}
.bz-col{display:flex;flex-direction:column;align-items:center;gap:3px;}
.bz-pl{font-size:9px;color:rgba(255,255,255,.26);letter-spacing:.3px;margin-bottom:2px;}
.bz-c{width:46px;height:46px;display:flex;align-items:center;justify-content:center;font-family:'ZCOOL XiaoWei',serif;font-size:22px;border:1px solid rgba(255,255,255,.09);border-radius:7px;background:rgba(255,255,255,.03);}
.bz-c.tian{color:var(--gold-l);}
.bz-c.di{color:rgba(245,240,232,.62);}
.bz-wx{font-size:9px;color:rgba(255,255,255,.28);margin-top:3px;display:flex;flex-direction:column;align-items:center;gap:1px;}

/* verdict */
.verdict{background:linear-gradient(135deg,rgba(201,168,76,.07),rgba(201,168,76,.02));border:1px solid rgba(201,168,76,.2);border-radius:12px;padding:20px 18px;margin-bottom:13px;position:relative;overflow:hidden;}
.verdict::after{content:'命';position:absolute;right:-10px;bottom:-24px;font-family:'ZCOOL XiaoWei',serif;font-size:110px;color:rgba(201,168,76,.04);line-height:1;pointer-events:none;}
.v-lbl{font-size:9px;letter-spacing:3px;color:var(--gold);opacity:.52;margin-bottom:14px;}
.v-text{font-size:15px;line-height:2;letter-spacing:.7px;}
.vhi{color:var(--gold);font-weight:600;}
.vlack{color:#e8886a;font-weight:600;}

/* bars */
.el-bars{margin-top:16px;display:flex;flex-direction:column;gap:9px;}
.el-row{display:flex;align-items:center;gap:10px;}
.el-n{width:26px;font-size:13px;font-family:'ZCOOL XiaoWei',serif;flex-shrink:0;}
.el-t{flex:1;height:7px;background:rgba(255,255,255,.06);border-radius:4px;overflow:hidden;}
.el-f{height:100%;border-radius:4px;transition:width 1.4s cubic-bezier(.22,1,.36,1);width:0;}
.el-v{width:36px;text-align:right;font-size:11px;color:rgba(255,255,255,.32);flex-shrink:0;}

/* cta */
.cta{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:12px;padding:22px 18px;text-align:center;margin-top:13px;}
.cta p{font-size:13px;color:rgba(245,240,232,.46);line-height:1.95;margin-bottom:16px;}
#wx-qr{box-shadow:0 4px 20px rgba(0,0,0,.4);border:1px solid rgba(201,168,76,.2);}
.cta p strong{color:rgba(245,240,232,.8);}
.btn-cta{display:inline-block;padding:11px 30px;background:transparent;border:1px solid var(--gold);color:var(--gold);font-family:'Noto Serif SC',serif;font-size:13px;letter-spacing:2px;border-radius:7px;cursor:pointer;transition:all .2s;text-decoration:none;}
.btn-cta:hover{background:rgba(201,168,76,.1);}
#wxinfo{display:block;margin-top:14px;padding:14px;background:rgba(201,168,76,.05);border:1px solid rgba(201,168,76,.17);border-radius:8px;}
#wxinfo .wl{font-size:10px;color:rgba(255,255,255,.32);letter-spacing:1px;margin-bottom:5px;}
#wxinfo .wn{font-size:19px;color:var(--gold);letter-spacing:2px;font-family:'ZCOOL XiaoWei',serif;}
#wxinfo .wt{font-size:10px;color:rgba(255,255,255,.24);margin-top:7px;}
.divider{height:1px;background:linear-gradient(to right,transparent,rgba(201,168,76,.17),transparent);margin:22px 0;}
.btn-reset{display:block;margin:0 auto;background:none;border:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.3);padding:10px 26px;border-radius:7px;font-size:11px;letter-spacing:2px;cursor:pointer;font-family:'Noto Serif SC',serif;transition:all .2s;}
.btn-reset:hover{border-color:rgba(255,255,255,.15);color:rgba(255,255,255,.5);}

/* toast */
#toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(16px);background:rgba(24,24,28,.96);border:1px solid rgba(201,168,76,.18);color:var(--paper);font-size:12px;letter-spacing:1px;padding:10px 22px;border-radius:24px;z-index:300;opacity:0;transition:all .28s;pointer-events:none;white-space:nowrap;}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

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