:root{
  --gold:#d4a84c; --gold-soft:#e8cd8a; --gold-bright:#f4e3b2;
  --gold-dim:rgba(212,168,76,.30); --gold-line:rgba(212,168,76,.16);
  --ink:#0b0a14; --ink-2:#12101f; --card:rgba(225,222,255,.045);
  --card-2:rgba(225,222,255,.07); --paper:#ece8f5; --paper-dim:#b3acc9; --paper-mute:#857ea0;
  --sun:#f0b13e; --moon:#9cc3ef; --asc:#d59be8; --mc:#7fd6b6;
  --serif:"Songti SC","Noto Serif CJK SC","Source Han Serif SC","SimSun","STSong",serif;
  --sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  --r:16px;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{min-height:100%}
body{background:var(--ink);color:var(--paper);font-family:var(--sans);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;line-height:1.6}
/* 夜空背景 */
.sky{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(60vmax 50vmax at 50% -12%,rgba(120,98,200,.22),transparent 60%),
    radial-gradient(46vmax 46vmax at 88% 110%,rgba(190,150,70,.14),transparent 60%),
    radial-gradient(40vmax 40vmax at 8% 96%,rgba(70,90,170,.16),transparent 62%),
    linear-gradient(180deg,#13112400 0%,var(--ink) 42%,#070611 100%);}
.sky::before{content:'';position:absolute;inset:0;opacity:.5;
  background-image:
    radial-gradient(1.4px 1.4px at 14% 22%,rgba(255,255,255,.9),transparent),
    radial-gradient(1.2px 1.2px at 32% 64%,rgba(255,255,255,.7),transparent),
    radial-gradient(1.6px 1.6px at 56% 18%,rgba(255,247,220,.9),transparent),
    radial-gradient(1.1px 1.1px at 72% 48%,rgba(255,255,255,.7),transparent),
    radial-gradient(1.5px 1.5px at 84% 78%,rgba(210,225,255,.8),transparent),
    radial-gradient(1.1px 1.1px at 24% 86%,rgba(255,255,255,.6),transparent),
    radial-gradient(1.3px 1.3px at 46% 92%,rgba(255,255,255,.7),transparent),
    radial-gradient(1.2px 1.2px at 92% 32%,rgba(255,255,255,.6),transparent);}
.sky::after{content:'';position:absolute;inset:0;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23n)'/%3E%3C/svg%3E");}

.app-shell{position:relative;z-index:1;max-width:560px;margin:0 auto;min-height:100vh;padding:14px 16px 48px}

/* topbar */
.topbar{display:flex;align-items:center;gap:12px;padding:10px 2px 4px;animation:rise .6s ease both}
.back{flex-shrink:0;width:40px;height:40px;border-radius:12px;border:1px solid var(--gold-line);
  background:var(--card);color:var(--gold-soft);font-size:26px;line-height:36px;text-align:center;text-decoration:none;transition:.25s}
.back:active{transform:scale(.94)}
.tb-title{flex:1;display:flex;flex-direction:column;line-height:1.2}
.tb-zh{font-family:var(--serif);font-size:23px;font-weight:700;letter-spacing:5px;
  background:linear-gradient(178deg,var(--gold-bright),var(--gold) 60%,#9a7330);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.tb-en{font-size:9px;letter-spacing:3px;color:var(--gold-dim);margin-top:3px}
.tb-flower{font-size:24px;color:var(--gold-dim);animation:spin 30s linear infinite}
.tb-sub{text-align:center;font-family:var(--serif);font-size:12px;letter-spacing:3px;color:var(--paper-mute);margin:4px 0 16px;animation:rise .6s .08s ease both}

/* cards & fields */
.card{position:relative;background:linear-gradient(155deg,var(--card-2),rgba(255,255,255,.012) 70%);
  border:1px solid var(--gold-line);border-radius:var(--r);padding:18px 16px;margin-bottom:16px;animation:rise .55s .06s ease both}
.fld{display:flex;flex-direction:column;gap:7px;margin-bottom:14px}
.fld.block{margin-bottom:16px}
.fld-l{font-size:12px;letter-spacing:1px;color:var(--paper-dim)}
.fld input,.fld select,.manual-grid input,.manual-grid select,.match-pick select,#dSign{
  width:100%;padding:12px 13px;border-radius:11px;border:1px solid var(--gold-line);
  background:rgba(0,0,0,.32);color:var(--paper);font-size:15px;font-family:var(--sans);transition:.2s}
.fld input:focus,.fld select:focus,select:focus{outline:none;border-color:var(--gold-dim);box-shadow:0 0 0 3px rgba(212,168,76,.12)}
input[type=date],input[type=time]{color-scheme:dark}
select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23d4a84c' stroke-width='1.6' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:34px}
.chk{display:flex;align-items:center;gap:9px;margin:-4px 0 14px;font-size:13px;color:var(--paper-dim);cursor:pointer}
.chk input{width:17px;height:17px;accent-color:var(--gold)}
.manual-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:6px}
.manual-grid .fld:last-child{grid-column:1 / -1}

/* segmented tabs */
.seg{display:grid;gap:6px;background:rgba(0,0,0,.3);border:1px solid var(--gold-line);border-radius:12px;padding:5px;margin-bottom:16px;animation:rise .55s .04s ease both}
.seg-4{grid-template-columns:repeat(4,1fr)}.seg-2{grid-template-columns:1fr 1fr}
.seg-btn{padding:9px 4px;border:none;border-radius:8px;background:transparent;color:var(--paper-dim);
  font-size:13px;font-family:var(--serif);letter-spacing:1px;cursor:pointer;transition:.22s}
.seg-btn.on{color:#241a0a;font-weight:700;background:linear-gradient(180deg,var(--gold-bright),var(--gold));box-shadow:0 3px 12px rgba(212,168,76,.32)}

/* cast button */
.cast-btn{width:100%;margin-top:4px;padding:15px;border:none;border-radius:13px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:12px;
  background:linear-gradient(110deg,var(--gold) 0%,var(--gold-bright) 50%,var(--gold) 100%);
  color:#241a0a;font-family:var(--serif);font-size:18px;font-weight:700;letter-spacing:6px;
  box-shadow:0 8px 26px rgba(212,168,76,.34);transition:.2s}
.cast-btn:active{transform:translateY(1px) scale(.99)}
.cast-star{font-size:16px;animation:spin 8s linear infinite}
.hint{font-size:11.5px;line-height:1.7;color:var(--paper-mute);margin-top:13px}
.note{font-size:11.5px;line-height:1.7;color:var(--paper-mute);margin-top:12px}
.note b{color:var(--paper-dim);font-weight:600}

/* section heading */
.sec-h{display:flex;align-items:center;gap:8px;font-family:var(--serif);font-size:15px;letter-spacing:2px;color:var(--gold-soft);margin-bottom:13px}
.sec-h i{width:3px;height:15px;border-radius:2px;background:linear-gradient(var(--gold-bright),var(--gold));display:inline-block}

/* history mini */
.hist-mini .hm-head{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--paper-dim);letter-spacing:1px;margin-bottom:8px}
.link-btn{background:none;border:none;color:var(--gold-dim);font-size:12px;cursor:pointer}
.hm-row{width:100%;display:flex;align-items:center;gap:11px;padding:10px 4px;border:none;border-top:1px solid var(--gold-line);background:none;color:var(--paper);cursor:pointer;text-align:left}
.hm-row:first-of-type{border-top:none}
.hm-sym{font-size:20px;color:var(--gold-soft)}
.hm-main{flex:1;font-size:13px}
.hm-sub{font-size:11px;color:var(--paper-mute)}

/* ===== 黄道轮盘 ===== */
.wheel-card{padding:10px 10px 14px}
.wheel{width:100%;height:auto;display:block;filter:drop-shadow(0 6px 22px rgba(0,0,0,.4))}
.w-ring{fill:none;stroke:var(--gold-line);stroke-width:1}
.w-ring-in{fill:rgba(10,8,20,.5);stroke:var(--gold-line);stroke-width:1}
.w-spoke{stroke:var(--gold-line);stroke-width:1}
.w-glyph{font-size:21px;text-anchor:middle;dominant-baseline:middle;opacity:.85}
.w-sect.on .w-glyph{opacity:1;font-size:24px}
.w-hl{fill:rgba(212,168,76,.14);stroke:var(--gold-dim);stroke-width:1}
.w-tick{stroke-width:2}
.w-tick.p-sun{stroke:var(--sun)}.w-tick.p-moon{stroke:var(--moon)}.w-tick.p-asc{stroke:var(--asc)}
.w-planet circle{stroke-width:1.5;fill:rgba(8,6,16,.92)}
.w-planet text{font-size:13px;text-anchor:middle;dominant-baseline:middle;font-weight:700}
.w-planet.p-sun circle{stroke:var(--sun)}.w-planet.p-sun text{fill:var(--sun)}
.w-planet.p-moon circle{stroke:var(--moon)}.w-planet.p-moon text{fill:var(--moon)}
.w-planet.p-asc circle{stroke:var(--asc)}.w-planet.p-asc text{fill:var(--asc);font-size:10px}
.w-center-1{font-family:"Songti SC",serif;font-size:15px;fill:var(--gold-soft);text-anchor:middle;letter-spacing:3px}
.w-center-2{font-size:8px;fill:var(--gold-dim);text-anchor:middle;letter-spacing:3px}
.legend{display:flex;justify-content:center;gap:16px;margin-top:6px;font-size:12px}
.legend .lg{letter-spacing:1px}
.legend .sun{color:var(--sun)}.legend .moon{color:var(--moon)}.legend .asc{color:var(--asc)}

/* big three */
.bt-wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:16px 12px}
.bt-card{text-align:center;padding:12px 6px;border-radius:13px;background:rgba(0,0,0,.25);border:1px solid var(--gold-line)}
.bt-label{font-size:12px;color:var(--paper-dim);letter-spacing:2px}
.bt-label i{font-style:normal;font-size:10px;color:var(--gold-dim)}
.bt-glyph{font-size:30px;margin:6px 0 2px;line-height:1}
.bt-sign{font-family:var(--serif);font-size:16px;font-weight:700;color:var(--paper)}
.bt-deg{font-size:11px;color:var(--paper-mute);margin-top:2px}
.bt-empty .bt-glyph,.bt-empty .bt-sign{color:var(--paper-mute);opacity:.55}
.chart-tagline{font-family:var(--serif);font-size:13.5px;line-height:1.9;color:var(--gold-soft);text-align:center;padding:0 6px;margin:-2px 0 4px;letter-spacing:.5px}

/* planet detail rows */
.pl-list{padding:6px 14px}
.pl-row{display:flex;gap:13px;padding:16px 0;border-top:1px solid var(--gold-line)}
.pl-row:first-child{border-top:none}
.pl-ico{flex-shrink:0;width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;border:1.5px solid}
.pl-ico.sun{color:var(--sun);border-color:var(--sun);background:rgba(240,177,62,.1)}
.pl-ico.moon{color:var(--moon);border-color:var(--moon);background:rgba(156,195,239,.1)}
.pl-ico.asc{color:var(--asc);border-color:var(--asc);background:rgba(213,155,232,.1);font-size:16px}
.pl-ico.mc{color:var(--mc);border-color:var(--mc);background:rgba(127,214,182,.1);font-size:13px}
.pl-body{flex:1;min-width:0}
.pl-top{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.pl-top b{font-family:var(--serif);font-size:15px}
.pl-deg{font-size:11px;color:var(--paper-mute);margin-left:auto}
.pl-role{font-size:11px;color:var(--gold-dim);margin:3px 0}
.pl-text{font-size:13px;line-height:1.75;color:var(--paper-dim);margin-top:4px}
.el-tag{display:inline-block;font-size:11px;padding:1px 8px;border-radius:20px;border:1px solid var(--gold-line);color:var(--paper-dim)}

/* element breakdown */
.eb-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.eb-title{font-size:12px;color:var(--paper-dim);letter-spacing:1px;margin-bottom:10px}
.eb-row{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.eb-k{width:30px;font-size:13px;font-weight:700}
.eb-track{flex:1;height:7px;border-radius:4px;background:rgba(0,0,0,.35);overflow:hidden}
.eb-track i{display:block;height:100%;border-radius:4px;transition:width .6s ease}
.eb-v{font-size:12px;color:var(--paper-mute);width:14px;text-align:right}

.advice-line{font-size:13.5px;line-height:1.85;color:var(--paper-dim);margin-bottom:10px}
.advice-line:last-child{margin-bottom:0}
.advice-line b{color:var(--gold-soft);font-weight:600}

/* result actions */
.result-actions{display:grid;grid-template-columns:1fr 1.3fr;gap:12px;margin-top:6px}
.ghost,.solid{padding:14px;border-radius:12px;font-family:var(--serif);font-size:15px;letter-spacing:2px;cursor:pointer;transition:.2s}
.ghost{background:var(--card);border:1px solid var(--gold-line);color:var(--gold-soft)}
.solid{border:none;background:linear-gradient(110deg,var(--gold),var(--gold-bright),var(--gold));color:#241a0a;font-weight:700;box-shadow:0 6px 20px rgba(212,168,76,.3)}
.ghost:active,.solid:active{transform:translateY(1px)}

/* ===== 配对合盘 ===== */
.match-pick{display:flex;align-items:flex-end;gap:10px}
.mp-col{flex:1;display:flex;flex-direction:column;gap:7px}
.mp-amp{font-size:24px;color:#e08aa8;padding-bottom:10px}
.match-result{text-align:center}
.mr-faces{display:flex;align-items:center;justify-content:center;gap:18px;margin-bottom:6px}
.mr-face{font-size:44px;line-height:1}
.mr-score-wrap{display:flex;flex-direction:column;align-items:center}
.mr-score{font-family:var(--serif);font-size:42px;font-weight:700;line-height:1;
  background:linear-gradient(178deg,var(--gold-bright),var(--gold));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.mr-score small{font-size:14px;-webkit-text-fill-color:var(--paper-mute)}
.mr-stars{font-size:14px;letter-spacing:2px;color:#3a3450;margin-top:3px}
.mr-stars .f{color:var(--gold)}
.mr-names{font-family:var(--serif);font-size:17px;letter-spacing:2px;color:var(--paper);margin:4px 0 12px}
.mr-bar{height:8px;border-radius:5px;background:rgba(0,0,0,.35);overflow:hidden;margin-bottom:12px}
.mr-bar i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,#e07a9a,var(--gold-bright));transition:width .7s ease}
.mr-summary{font-family:var(--serif);font-size:14px;line-height:1.85;color:var(--gold-soft);margin-bottom:14px}
.mr-rows{text-align:left;border-top:1px solid var(--gold-line);padding-top:12px}
.mr-li{display:flex;justify-content:space-between;gap:12px;font-size:13px;padding:6px 0}
.mr-li span{color:var(--paper-mute)}.mr-li b{color:var(--paper);font-weight:600;font-family:var(--serif)}
.mr-li.col{flex-direction:column;gap:4px}
.mr-li.col p{color:var(--paper-dim);line-height:1.7}
.duo-p{font-size:13.5px;line-height:1.85;color:var(--paper-dim);margin-bottom:11px}
.duo-p:last-child{margin-bottom:0}
.duo-p b{font-family:var(--serif);font-weight:700}

/* ===== 今日运势 ===== */
.dc-head{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.dc-sym{font-size:46px;line-height:1}
.dc-name{font-family:var(--serif);font-size:21px;font-weight:700;letter-spacing:2px}
.dc-date{font-size:12px;color:var(--paper-mute);margin-top:2px}
.dc-tone{font-family:var(--serif);font-size:14.5px;line-height:1.8;color:var(--gold-soft);padding:11px 13px;border-radius:11px;background:rgba(212,168,76,.07);border:1px solid var(--gold-line);margin-bottom:14px}
.ft-grid{display:flex;flex-direction:column;gap:11px;margin-bottom:14px}
.ft-row{display:flex;align-items:center;gap:11px}
.ft-k{width:34px;font-size:13px;color:var(--paper-dim)}
.ft-track{flex:1;height:9px;border-radius:5px;background:rgba(0,0,0,.35);overflow:hidden}
.ft-track i{display:block;height:100%;border-radius:5px;transition:width .6s ease}
.ft-track i.hi{background:linear-gradient(90deg,#5fbf7a,#a7e0b5)}
.ft-track i.mid{background:linear-gradient(90deg,var(--gold),var(--gold-bright))}
.ft-track i.lo{background:linear-gradient(90deg,#c2603f,#e0a07a)}
.ft-v{font-size:13px;color:var(--paper-mute);width:24px;text-align:right}
.dc-luck{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dc-luck .lk{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px;border-radius:11px;background:rgba(0,0,0,.25);border:1px solid var(--gold-line)}
.dc-luck .lk span{font-size:11px;color:var(--paper-mute)}
.dc-luck .lk b{font-family:var(--serif);font-size:18px;color:var(--gold-soft)}

/* ===== 星座百科 ===== */
.enc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.enc-cell{display:flex;flex-direction:column;align-items:center;gap:3px;padding:14px 6px;border-radius:13px;
  background:rgba(0,0,0,.25);border:1px solid var(--gold-line);color:var(--paper);cursor:pointer;transition:.2s}
.enc-cell:active{transform:scale(.96);border-color:var(--gold-dim)}
.enc-sym{font-size:27px;line-height:1}
.enc-nm{font-family:var(--serif);font-size:14px;font-weight:700;margin-top:2px}
.enc-date{font-size:10px;color:var(--paper-mute)}
.enc-el{font-size:10px}
.enc-back,.enc-hero{animation:rise .5s ease both}
.enc-back{background:var(--card);border:1px solid var(--gold-line);color:var(--gold-soft);
  padding:9px 14px;border-radius:11px;font-size:13px;cursor:pointer;margin-bottom:14px}
.enc-hero{text-align:center;padding:22px 16px}
.eh-sym{font-size:60px;line-height:1}
.eh-name{font-family:var(--serif);font-size:24px;font-weight:700;letter-spacing:3px;margin:8px 0 4px}
.eh-name span{display:block;font-size:11px;letter-spacing:3px;color:var(--gold-dim);font-family:var(--sans);font-weight:400;margin-top:3px}
.eh-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin:12px 0 10px}
.eh-kw{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.eh-kw span{font-size:12px;color:var(--gold-soft);padding:3px 11px;border-radius:20px;background:rgba(212,168,76,.1);border:1px solid var(--gold-line)}
.ed-p{font-size:14px;line-height:1.9;color:var(--paper-dim)}

.foot{text-align:center;font-size:11px;line-height:1.8;color:var(--paper-mute);margin-top:20px;padding-top:16px;border-top:1px solid var(--gold-line);letter-spacing:.5px}

/* toast */
.toast{position:fixed;left:50%;bottom:42px;transform:translateX(-50%) translateY(20px);z-index:50;
  background:rgba(20,16,34,.94);border:1px solid var(--gold-dim);color:var(--gold-soft);
  padding:11px 22px;border-radius:30px;font-size:13.5px;letter-spacing:1px;opacity:0;pointer-events:none;
  transition:.3s;backdrop-filter:blur(8px);box-shadow:0 8px 30px rgba(0,0,0,.5)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (max-width:380px){
  .tb-zh{font-size:21px;letter-spacing:3px}
  .seg-btn{font-size:12px}
  .bt-glyph{font-size:26px}.bt-sign{font-size:14px}
  .enc-grid,.bt-wrap{gap:8px}
  .mr-face{font-size:38px}.mr-score{font-size:36px}
}