*{margin:0;padding:0;box-sizing:border-box}
body{font-family:"微软雅黑","PingFang SC","Microsoft YaHei",sans-serif;background:#f5f0eb;color:#333;min-height:100vh;font-size:15px;color:#2c2c2c}
input,select,button{outline:none;font-family:inherit}
a{text-decoration:none}

/* ===== Layout ===== */
.page-wrap{display:flex;min-height:100vh}
.sidebar{width:240px;background:#fff;border-right:1px solid #e8ddd0;padding:35px 24px;flex-shrink:0;position:sticky;top:0;height:100vh;overflow-y:auto}
.main{flex:1;padding:30px 50px 100px;min-width:0}

/* ===== 宽屏适配 ===== */
@media(min-width:1400px){
  .main{padding:40px 80px 100px}
  .banner{padding:55px 70px}
  .banner h1{font-size:36px}
}
@media(min-width:1800px){
  .main{padding:40px 120px 100px}
}

/* ===== Sidebar ===== */
.sidebar .logo{font-size:24px;color:#A51C1D;font-weight:700;margin-bottom:30px;display:flex;align-items:center;gap:10px;letter-spacing:1px}
.sidebar .logo span{font-size:28px}
.sidebar-nav{margin-bottom:25px}
.sidebar-nav a{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:10px;color:#555;font-size:15px;margin-bottom:6px;transition:all .2s;font-weight:500}
.sidebar-nav a:hover{background:#fef5e7;color:#A51C1D}
.sidebar-nav a.active{background:#fef5e7;color:#A51C1D;font-weight:600;border-left:3px solid #A51C1D}
.sidebar .badge{font-size:13px;color:#999;border-top:1px solid #f0e8e0;margin-top:20px;padding-top:20px;line-height:1.8}
.sidebar .badge span{display:flex;align-items:center;gap:6px;margin-bottom:6px}

/* ===== Tab Bar ===== */
.tab-bar{display:flex;background:#fff;border-radius:12px;overflow:hidden;margin-bottom:25px;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.tab-item{flex:1;text-align:center;padding:16px 10px;font-size:16px;color:#999;cursor:pointer;transition:all .25s;font-weight:500;letter-spacing:1px}
.tab-item:hover{background:#fef5e7;color:#A51C1D}
.tab-item.active{background:#A51C1D;color:#FFCD7E;font-weight:600}
.tab-item .tab-icon{margin-right:6px;font-size:18px;vertical-align:middle}

/* ===== Banner ===== */
.banner{
  background:linear-gradient(135deg,#8b1a1a 0%,#A51C1D 30%,#c0392b 70%,#A51C1D 100%);
  padding:45px 50px;border-radius:14px;color:#fff;margin-bottom:25px;position:relative;overflow:hidden;
}
.banner::before{content:'"福"';position:absolute;right:30px;top:-15px;font-size:100px;opacity:.08;font-family:'KaiTi',serif}
.banner h1{font-size:32px;color:#FFCD7E;font-weight:700;letter-spacing:3px}
.banner p{font-size:16px;opacity:.85;margin-top:10px;letter-spacing:1px}
.banner .badge{display:inline-block;margin-top:14px;padding:6px 20px;border-radius:20px;background:rgba(255,255,255,.12);font-size:14px;color:#FFCD7E;border:1px solid rgba(255,205,126,.25)}

/* ===== Card ===== */
.card{background:#fff;border-radius:14px;padding:30px;margin-bottom:25px;box-shadow:0 2px 10px rgba(0,0,0,.06)}
.card h3{font-size:18px;color:#A51C1D;margin-bottom:18px;padding-bottom:12px;border-bottom:2px solid #fef5e7;letter-spacing:1px}

/* ===== Form ===== */
.form-row{display:flex;align-items:center;margin-bottom:18px;gap:12px}
.form-row label{width:100px;font-size:14px;color:#555;font-weight:500;flex-shrink:0;text-align:right;letter-spacing:1px}
.form-row .field{flex:1}
.form-row input[type="text"],.form-row select,.form-row input[type="date"]{
  height:42px;border:1.5px solid #ddd;border-radius:8px;padding:0 14px;font-size:14px;color:#333;width:100%;background:#fff;transition:border-color .25s,box-shadow .25s;
}
.form-row input[type="text"]:focus,.form-row select:focus,.form-row input[type="date"]:focus{border-color:#A51C1D;box-shadow:0 0 0 3px rgba(165,28,29,.1)}
.form-row input[type="text"]{max-width:220px}
.form-row input[type="date"]{max-width:220px}
@media(min-width:1400px){.form-row input[type="text"]{max-width:420px}}

.btn-group{display:flex;gap:10px}
.btn-group label,.btn-group span[data-value]{
  display:flex;align-items:center;gap:8px;padding:8px 20px;border:1.5px solid #ddd;border-radius:8px;cursor:pointer;font-size:14px;color:#999;background:#faf8f6;transition:all .2s;letter-spacing:0.5px;user-select:none;
}
.btn-group label:hover,.btn-group span[data-value]:hover{border-color:#A51C1D;background:#fff}
.btn-group label.active,.btn-group span[data-value].active{border-color:#A51C1D;color:#A51C1D;background:#fef5e7;font-weight:600}
.btn-group label input,.btn-group span[data-value] input{display:none}

.fixed-char-wrap{display:flex;align-items:center;gap:10px}
.fixed-char-wrap input[type="text"]{width:56px!important;text-align:center;font-size:20px!important;font-weight:600}
.fixed-char-wrap span.txt{font-size:14px;color:#999}

.style-grid{display:flex;gap:10px;flex-wrap:wrap}
.style-btn{
  padding:8px 22px;border:1.5px solid #ddd;border-radius:8px;cursor:pointer;font-size:14px;color:#999;background:#faf8f6;transition:all .2s;letter-spacing:0.5px;
}
.style-btn:hover{border-color:#A51C1D;background:#fff}
.style-btn.active{border-color:#A51C1D;color:#A51C1D;background:#fef5e7;font-weight:600}

/* ===== Xing Grid (百家姓) ===== */
.xing-grid{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.xing-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:64px;height:42px;border:1.5px solid #ddd;border-radius:8px;
  cursor:pointer;font-size:16px;color:#A51C1D;background:#faf8f6;
  transition:all .2s;font-weight:600;letter-spacing:1px;
  text-decoration:none;
}
.xing-btn:hover{border-color:#A51C1D;background:#fef5e7;transform:translateY(-2px);box-shadow:0 3px 10px rgba(165,28,29,.15)}
.xing-section-title{font-size:16px;color:#A51C1D;font-weight:600;margin:20px 0 12px;padding-bottom:8px;border-bottom:2px solid #fef5e7}

.btn-wrap{text-align:center;margin-top:10px;padding-top:8px;border-top:1px solid #f5f0eb}
.btn-primary{
  padding:12px 50px;background:#A61C29;color:#FFCD7E;border:0;border-radius:10px;font-size:16px;font-weight:600;cursor:pointer;letter-spacing:2px;transition:all .3s;
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(166,28,41,.35)}
.btn-primary:active{transform:translateY(0)}

/* 统一按钮高度 */
.submit-btn{
  height:42px;padding:0 24px;background:linear-gradient(135deg,#A51C1D,#8b1a1a);color:#FFCD7E;border:none;border-radius:8px;font-size:15px;font-weight:600;cursor:pointer;letter-spacing:1.5px;transition:all .25s;white-space:nowrap;
}
.submit-btn:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(165,28,29,.3)}
.submit-btn:active{transform:translateY(0)}

/* ===== Results ===== */
.results{display:none}
.results.show,.results-section.show{display:block !important;margin-top:15px}
.result-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;padding:0 4px}
.result-header h2{font-size:22px;color:#A51C1D;font-weight:700}
.result-header .count{font-size:14px;color:#999;background:#f5f0eb;padding:4px 14px;border-radius:20px}
.results-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:900px){.results-grid{grid-template-columns:1fr}}
@media(min-width:1400px){.results-grid{grid-template-columns:1fr 1fr 1fr;gap:20px}}
@media(min-width:1800px){.results-grid{grid-template-columns:1fr 1fr 1fr 1fr;gap:22px}}

.name-card{
  background:#fff;border:1px solid #ede5d8;border-radius:12px;padding:24px;animation:fadeIn .4s ease;box-shadow:0 2px 12px rgba(165,28,29,.04);transition:box-shadow .3s;
}
.name-card:hover{box-shadow:0 4px 20px rgba(165,28,29,.1)}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.name-big{font-size:28px;font-weight:800;color:#A51C1D;letter-spacing:4px}
.score-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 14px;border-radius:20px;font-size:16px;font-weight:700;color:#fff;letter-spacing:0.5px}
.s-badge-s{background:linear-gradient(135deg,#e74c3c,#c0392b)}
.s-badge-a{background:linear-gradient(135deg,#ffa726,#f57c00)}
.s-badge-b{background:linear-gradient(135deg,#66bb6a,#43a047)}
.stars{color:#f5a623;font-size:13px;margin-left:4px;letter-spacing:1px}

.details{display:flex;gap:16px;margin-bottom:12px;font-size:13px;background:#fefcf9;border-radius:8px;padding:8px 12px}
.details .d-item{display:flex;align-items:center;gap:4px}
.details .d-item .lbl{color:#bbb;width:auto}
.details .d-item .val{color:#444;font-weight:600}

.meaning{font-size:14px;color:#555;line-height:1.8;margin-bottom:10px;padding-left:0}
.reason{font-size:13px;background:#fef5e7;border-radius:8px;padding:10px 12px;color:#A51C1D;line-height:1.6;margin-bottom:10px;border-left:3px solid #A51C1D}
.tags{display:flex;gap:6px;flex-wrap:wrap}
.tag{padding:3px 12px;border-radius:12px;font-size:12px;background:#f0e6da;color:#A51C1D;font-weight:600}

/* ===== AI Results ===== */
.ai-card{background:#fff;border:1px solid #ede5d8;border-radius:12px;padding:24px;margin-bottom:18px;animation:fadeIn .4s ease}
.ai-score-box{text-align:center;padding:20px}
.ai-circle{width:110px;height:110px;border-radius:50%;margin:0 auto 12px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:700}
.ai-circle .num{font-size:40px;color:#fff;line-height:1}
.ai-circle .lbl{font-size:13px;color:rgba(255,255,255,.8);margin-top:2px}
.se-excellent{background:linear-gradient(135deg,#e74c3c,#c0392b)}
.se-good{background:linear-gradient(135deg,#ffa726,#f57c00)}
.se-fair{background:linear-gradient(135deg,#66bb6a,#43a047)}
.se-poor{background:linear-gradient(135deg,#999,#777)}
.dim-grid{display:grid;grid-template-columns:1fr;gap:12px;margin-bottom:15px}
@media(min-width:1100px){.dim-grid{grid-template-columns:1fr 1fr}}
.dim-item{background:#fefcf9;border-radius:8px;padding:10px 12px;border-left:3px solid #A51C1D}
.dim-item .dn{font-size:14px;color:#A51C1D;font-weight:600}
.dim-item .ds{float:right;font-size:16px;font-weight:700;color:#A51C1D}
.dim-item .dd{font-size:14px;color:#555;margin-top:6px;line-height:1.7}
.ai-summary{font-size:14px;color:#333;line-height:1.9}
.ai-suggestion{background:#f0f4ff;border-radius:8px;padding:12px 14px;font-size:13px;color:#333;line-height:1.8}

/* ===== Bazi ===== */
.bazi-header{background:linear-gradient(135deg,#5d4037,#795548);color:#fff;padding:20px;border-radius:12px;margin-bottom:18px;text-align:center}
.bazi-header .bt{font-size:30px;letter-spacing:6px;font-weight:700;font-family:"KaiTi",serif}
.bazi-header .bd{font-size:13px;opacity:.85;margin-top:6px;line-height:1.6}
.wuxing-bar{display:flex;gap:10px;margin:15px 0}
.wuxing-item{flex:1;text-align:center;padding:10px;border-radius:10px;font-size:14px;color:#fff;font-weight:600;letter-spacing:1px}
.wx-jin{background:linear-gradient(135deg,#ffd54f,#ffb300);color:#5d4037}
.wx-mu{background:linear-gradient(135deg,#81c784,#43a047)}
.wx-shui{background:linear-gradient(135deg,#64b5f6,#1565c0)}
.wx-huo{background:linear-gradient(135deg,#e57373,#d32f2f)}
.wx-tu{background:linear-gradient(135deg,#a1887f,#5d4037)}

/* ===== Footer ===== */
.footer{text-align:center;padding:25px 0 10px;font-size:13px;color:#999;border-top:1px solid #e8ddd0;margin-top:40px;line-height:1.8}

/* ===== Bagua Loading ===== */
.bagua-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.65);z-index:999;backdrop-filter:blur(4px)}
.bagua-box{display:none;position:fixed;top:50%;left:50%;z-index:1000;transform:translate(-50%,-50%);text-align:center}
.bagua-compass{width:400px;height:400px;border-radius:50%;margin:0 auto;position:relative;animation:compassGlow 3s ease-in-out infinite}
.bagua-compass .ring-outer{position:absolute;width:400px;height:400px;border-radius:50%;border:3px solid rgba(255,205,126,.2);animation:ringSpin 25s linear infinite}
.bagua-compass .ring-dash{position:absolute;width:352px;height:352px;top:24px;left:24px;border-radius:50%;border:1.5px dashed rgba(255,205,126,.12);animation:ringSpin 35s linear infinite reverse}
.bagua-t{position:absolute;font-size:28px;color:#FFCD7E;opacity:.5;animation:triPulse 2.5s ease-in-out infinite}
.bagua-t:nth-child(1){top:-6px;left:50%;transform:translateX(-50%);animation-delay:0s}
.bagua-t:nth-child(2){top:40px;right:12px;animation-delay:.31s}
.bagua-t:nth-child(3){top:136px;right:-6px;animation-delay:.62s}
.bagua-t:nth-child(4){bottom:40px;right:12px;animation-delay:.94s}
.bagua-t:nth-child(5){bottom:-6px;left:50%;transform:translateX(-50%);animation-delay:1.25s}
.bagua-t:nth-child(6){bottom:40px;left:12px;animation-delay:1.56s}
.bagua-t:nth-child(7){top:136px;left:-6px;animation-delay:1.88s}
.bagua-t:nth-child(8){top:40px;left:12px;animation-delay:2.19s}
.bagua-taiji{position:absolute;width:260px;height:260px;top:70px;left:70px;border-radius:50%;background:linear-gradient(#A51C1D 50%,#FFCD7E 50%);animation:taijiSpin 7s linear infinite;box-shadow:0 0 30px rgba(165,28,29,.2),inset 0 0 10px rgba(0,0,0,.08);border:2px solid rgba(255,205,126,.25)}
.bagua-taiji .yd{position:absolute;width:44px;height:44px;top:44px;left:50%;transform:translateX(-50%);border-radius:50%;background:#FFCD7E;z-index:2}
.bagua-taiji .yd2{position:absolute;width:44px;height:44px;bottom:44px;left:50%;transform:translateX(-50%);border-radius:50%;background:#A51C1D;z-index:2}
.bagua-name{position:absolute;width:84px;height:84px;top:158px;left:158px;border-radius:50%;background:linear-gradient(135deg,#A51C1D,#8b1a1a);z-index:3;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700;color:#FFCD7E;letter-spacing:1px;box-shadow:0 0 24px rgba(255,205,126,.28);border:1.5px solid rgba(255,205,126,.35)
.bagua-dtext{color:#FFCD7E;font-size:28px;margin-top:40px;height:36px;line-height:36px;width:400px;text-align:center;text-shadow:0 1px 4px rgba(0,0,0,.3);transition:opacity .25s}
.bagua-dtext.fade{opacity:.35}
.bagua-sub{color:rgba(255,205,126,.4);font-size:20px;margin-top:16px}
@keyframes ringSpin{to{transform:rotate(360deg)}}
@keyframes taijiSpin{to{transform:rotate(360deg)}}
@keyframes triPulse{0%,100%{opacity:.5}50%{opacity:.95}}
@keyframes compassGlow{0%,100%{filter:drop-shadow(0 0 8px rgba(255,205,126,.15))}50%{filter:drop-shadow(0 0 20px rgba(255,205,126,.3))}}

/* 真太阳时显示 */
.solar-time-display{font-size:13px!important;color:#A51C1D;margin-left:8px;padding:4px 10px;border-radius:6px;background:#fefcf9;border:1px solid #f0e6da;display:inline-block;white-space:nowrap}
.solar-time-display.offset-warning{color:#e67e22;border-color:#f0c27a;background:#fff8f0}
.solar-time-display.shichen-change{color:#c0392b;border-color:#e74c3c;background:#fef0f0}

/* 百家姓详情弹窗 */

.xing-search-row{display:flex;gap:10px;margin-bottom:18px;align-items:center}
.xing-search-row input{flex:1;height:42px;padding:0 16px;border:1px solid #ddd;border-radius:8px;font-size:14px;background:#faf8f6}
.xing-search-row button{height:42px;padding:0 24px;background:#A51C1D;color:#FFCD7E;border:none;border-radius:8px;font-size:14px;cursor:pointer;font-weight:600}
.xing-search-row button:hover{background:#8b1a1a}
.xing-grid{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.xing-grid .xing-btn{display:inline-flex;align-items:center;justify-content:center;padding:6px 14px;border:1px solid #e8ddd0;border-radius:8px;font-size:15px;color:#A51C1D;background:#fefcf9;font-weight:500;transition:all .2s;text-decoration:none;cursor:pointer}
.xing-grid .xing-btn:hover{border-color:#A51C1D;background:#fef5e7}

/* ===== Responsive tweaks ===== */
@media(max-width:768px){
  .sidebar{display:none}
  .main{padding:20px 16px 90px;max-width:100%}
  .banner{padding:25px 20px;border-radius:10px}
  .banner h1{font-size:24px}
  .card{padding:20px}
  .form-row label{width:70px;font-size:13px}
}