/* =========================================================================
 * 5xLiving Astro Sanctuary · Master Mobile UI
 * astro-master.css
 *
 * 统一 Astro Sanctuary 各计算器页面（八字 / 本命星盘 / 九星 / 未来页面）的
 * 视觉与交互语言。以 bazi.html 的移动端体验为基准抽取。
 *
 * 设计原则：
 *  - 移动优先，单列，卡片化
 *  - 结果摘要 + 折叠手风琴分区
 *  - 大字号、大点按区域、清晰层级
 *  - 统一圆角 / 边框 / 间距 / 图标 / 展开状态
 *
 * 页面只需引入本文件，并保留各自的“计算逻辑”脚本。
 * ========================================================================= */

/* ---------- 设计令牌 ---------- */
:root{
  --bg:#070a0f;
  --panel:rgba(14,20,31,.76);
  --panel2:rgba(255,255,255,.045);
  --line:rgba(212,175,55,.22);
  --line2:rgba(255,255,255,.10);
  --text:#eef3fb;
  --muted:#9aa7b8;
  --gold:#d4af37;
  --gold2:#f5d77d;
  --danger:#ffb4b4;
  --radius:22px;
  --radius-sm:16px;
  --shadow:0 22px 70px rgba(0,0,0,.42);

  /* 移动端排版基准 */
  --fs-body:17px;
  --fs-section:20px;
  --fs-h1:clamp(1.9rem,6vw,3.2rem);
  --lh-body:1.75;
  --tap-min:56px;
  --acc-min:60px;
  --page-pad:16px;
}

/* ---------- 基础 ---------- */
*{box-sizing:border-box}
html,body{min-height:100%}
html{overflow-x:hidden;overflow-x:clip;max-width:100%}
body{
  margin:0;
  color:var(--text);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans SC",Arial,sans-serif;
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  background:
    radial-gradient(900px 480px at 82% -10%, rgba(212,175,55,.18), transparent 62%),
    radial-gradient(680px 460px at 0% 28%, rgba(88,185,255,.12), transparent 58%),
    linear-gradient(180deg,#070a0f,#0b0f16 55%,#070a0f);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  overflow-x:clip;
  max-width:100%;
  width:100%;
  overscroll-behavior-x:none;
}
body::before{
  content:"";
  position:fixed;inset:0;z-index:-2;
  background:url("assets/images/gate.jpg") center/cover no-repeat;
  opacity:.18;filter:blur(1px) saturate(.8);
}
body::after{
  content:"";
  position:fixed;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(7,10,15,.70),rgba(7,10,15,.96));
  pointer-events:none;
}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit}
.wrap{width:min(760px,100%);margin:0 auto;padding:0 var(--page-pad)}

/* ---------- 顶栏（标准化移动端头部） ---------- */
.topbar{
  position:sticky;top:0;z-index:30;
  background:rgba(7,10,15,.86);
  backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.top-inner{
  min-height:76px;display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:nowrap;
}
.brand{display:flex;align-items:center;gap:12px;min-width:0;flex:1 1 auto}
.badge{
  width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  color:#151515;font-weight:900;font-size:1.05rem;
  background:linear-gradient(180deg,#fff8de,#d4af37);
  box-shadow:0 10px 30px rgba(212,175,55,.25);flex:0 0 auto;
}
.brand-text{min-width:0}
.brand-title{
  font-family:"Noto Serif SC",serif;font-weight:700;letter-spacing:.02em;
  font-size:1.15rem;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.brand-sub{font-size:.8rem;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-actions{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.mini-link{
  border:1px solid var(--line2);border-radius:999px;padding:9px 12px;color:var(--gold2);
  background:rgba(255,255,255,.035);font-size:.9rem;white-space:nowrap;
}
.lang-select{
  border:1px solid var(--line2);border-radius:999px;background:rgba(14,20,31,.86);
  color:var(--text);padding:9px 12px;outline:none;max-width:150px;flex:0 0 auto;
}
/* 移动端：标题可缩短（.title-rest 在窄屏隐藏） */
.title-rest{display:inline}
@media(max-width:620px){
  .top-inner{min-height:72px;gap:10px}
  .badge{width:44px;height:44px;border-radius:13px;font-size:1rem}
  .brand{gap:10px}
  .brand-title{font-size:1.05rem}
  .brand-sub{display:none}
  .title-rest{display:none}          /* 移动端只显示 "5xLiving ·" */
  .top-actions .mini-link{display:none} /* 头部不放 Soul Print / Home */
  .lang-select{max-width:118px;padding:8px 10px;font-size:.86rem}
}

/* ---------- Hero ---------- */
.hero{padding:34px 0 18px;text-align:center}
.crumb{color:var(--gold2);font-size:.9rem;margin-bottom:12px}
h1{margin:0 0 12px;font-family:"Noto Serif SC",serif;font-size:var(--fs-h1);line-height:1.1}
.lead{max-width:620px;color:#c6d0de;line-height:1.75;margin:0 auto}
/* Hero 下方的导航卡片（替代头部拥挤的链接） */
.hero-nav{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px}
.hero-nav-card{
  display:flex;flex-direction:column;gap:2px;text-align:left;
  border:1px solid rgba(212,175,55,.28);border-radius:14px;
  padding:12px 16px;background:rgba(255,255,255,.035);
  min-width:150px;transition:.16s ease;
}
.hero-nav-card:hover{border-color:rgba(212,175,55,.7);background:rgba(212,175,55,.08)}
.hero-nav-card .hnc-t{color:var(--gold2);font-weight:800;font-size:.98rem}
.hero-nav-card .hnc-s{color:var(--muted);font-size:.82rem}
@media(max-width:620px){
  .hero-nav{justify-content:stretch}
  .hero-nav-card{flex:1 1 100%;min-width:0;padding:14px 16px}
  .hero-nav-card .hnc-t{font-size:1.02rem}
  .hero-nav-card .hnc-s{font-size:.9rem}
}

/* ---------- 卡片 ---------- */
.card{
  border:1px solid var(--line);background:var(--panel);border-radius:var(--radius);
  box-shadow:var(--shadow);backdrop-filter:blur(18px);overflow:hidden;
}
.card-head{padding:16px;border-bottom:1px solid rgba(212,175,55,.16)}
.card-title{font-weight:900;color:var(--gold2);font-size:var(--fs-section)}
.card-sub{color:var(--muted);font-size:.9rem;margin-top:4px;line-height:1.55}
.card-body{padding:16px}

/* ---------- 表单 ---------- */
label{display:block;color:var(--muted);font-size:.9rem;margin:0 0 6px}
.field{
  width:100%;border:1px solid rgba(212,175,55,.24);border-radius:15px;
  background:rgba(7,10,15,.62);color:var(--text);padding:14px 12px;outline:none;margin-bottom:14px;
  min-height:52px;
}
.field:focus{border-color:var(--gold2);box-shadow:0 0 0 3px rgba(212,175,55,.13)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.checkrow{display:flex;align-items:flex-start;gap:8px;color:var(--muted);font-size:.92rem;margin:0 0 12px}
.checkrow input[type="radio"],
.checkrow input[type="checkbox"]{width:22px;height:22px;margin-top:1px;flex-shrink:0;accent-color:var(--gold)}
.checkrow label{cursor:pointer;margin:0}

/* ---------- 按钮 ---------- */
.btn{
  border:1px solid var(--line);border-radius:16px;padding:14px 16px;min-height:var(--tap-min);
  display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;
  font-weight:900;background:linear-gradient(180deg,#fff8de,#d9b544);color:#151515;
  box-shadow:0 12px 32px rgba(212,175,55,.20);
}
.btn.block{width:100%}
.btn.ghost{background:rgba(255,255,255,.04);color:var(--gold2);box-shadow:none;border-color:rgba(212,175,55,.35)}
.btn:disabled{opacity:.6;cursor:not-allowed}
.error{display:none;margin-top:10px;color:var(--danger);background:rgba(255,0,0,.08);border:1px solid rgba(255,0,0,.22);padding:10px 12px;border-radius:14px}

/* ---------- 结果摘要 ---------- */
.summary-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:8px}
.mini-box{background:rgba(255,255,255,.035);border:1px solid var(--line2);border-radius:var(--radius-sm);padding:13px}
.mini-label{color:var(--muted);font-size:.82rem;margin-bottom:5px}
.mini-value{font-weight:800;line-height:1.55}

/* 四柱 / 关键点大卡 */
.pillars-hero{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:6px 0 18px}
.pillar{
  background:linear-gradient(180deg,rgba(212,175,55,.14),rgba(255,255,255,.03));
  border:1px solid rgba(212,175,55,.30);border-radius:18px;padding:18px 8px;text-align:center;
}
.pillar .tit{color:var(--muted);font-size:.82rem;margin-bottom:8px}
.pillar .gz{font-size:clamp(1.5rem,7vw,2.1rem);font-weight:900;color:var(--gold2);font-family:"Noto Serif SC",serif;line-height:1.1}

/* ---------- 手风琴（核心交互） ---------- */
.acc{display:grid;gap:12px;margin-top:18px}
.acc-item{
  border:1px solid var(--line);background:var(--panel);border-radius:18px;
  overflow:hidden;box-shadow:var(--shadow);
}
.acc-head{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px;background:transparent;border:0;color:var(--text);cursor:pointer;text-align:left;
  min-height:var(--acc-min);
}
.acc-head:hover{background:rgba(212,175,55,.06)}
.acc-head .t{font-weight:900;color:var(--gold2);font-size:1.05rem}
.acc-head .s{color:var(--muted);font-size:.86rem;margin-top:3px;font-weight:400;line-height:1.5}
.acc-head .chev{color:var(--gold2);font-size:1.2rem;transition:transform .25s;flex:0 0 auto}
.acc-item.open .acc-head .chev{transform:rotate(180deg)}
.acc-body{display:none;padding:0 16px 16px}
.acc-item.open .acc-body{display:block}

/* ---------- 数据展示 ---------- */
.bar-row{display:grid;grid-template-columns:44px 1fr 48px;gap:10px;align-items:center;margin:10px 0}
.bar{height:12px;background:rgba(255,255,255,.06);border:1px solid var(--line2);border-radius:999px;overflow:hidden}
.bar i{display:block;height:100%;width:0%;background:linear-gradient(90deg,#f5d77d,#d4af37);transition:.4s}

.table-wrap{overflow:auto;max-width:100%;min-width:0;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;min-width:520px;background:rgba(255,255,255,.025);border-radius:16px;overflow:hidden}
th,td{border:1px solid rgba(255,255,255,.09);padding:11px;text-align:center}
th{color:var(--gold2);background:rgba(212,175,55,.08)}

.tag-list{display:flex;gap:8px;flex-wrap:wrap}
.tag{border:1px solid rgba(212,175,55,.26);background:rgba(212,175,55,.08);color:#ffe7a2;border-radius:999px;padding:7px 10px;font-size:.88rem}

.explain-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.explain-card{border:1px solid rgba(212,175,55,.18);background:rgba(255,255,255,.035);border-radius:var(--radius-sm);padding:13px;line-height:1.7}
.explain-card strong{color:var(--gold2)}
.explain-card .small{color:var(--muted);font-size:.92rem;margin-top:4px}

.analysis-list{display:grid;gap:10px;margin-top:12px}
.analysis-item{border:1px solid rgba(212,175,55,.18);background:rgba(255,255,255,.035);border-radius:var(--radius-sm);padding:13px;line-height:1.7}
.analysis-item strong{color:var(--gold2)}
.analysis-item .small{color:var(--muted);font-size:.94rem;margin-top:4px}

.note{color:var(--muted);font-size:.92rem;line-height:1.7}
.small{font-size:.94rem;line-height:1.7}

/* ---------- 会员 / 共享账户 ---------- */
.member-card{
  border:1px solid var(--line);background:var(--panel);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:18px;margin-top:18px;
}
.member-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.member-body{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.member-form .field{margin-bottom:10px}
.member-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.member-error{display:none;margin-top:10px;color:var(--danger);background:rgba(255,0,0,.08);border:1px solid rgba(255,0,0,.22);padding:10px 12px;border-radius:14px}
.member-price-card{border:1px solid rgba(212,175,55,.22);border-radius:var(--radius-sm);padding:16px;background:rgba(255,255,255,.035)}
.member-price{font-size:1.6rem;font-weight:900;color:var(--gold2);margin:6px 0 2px}
.mini-list{padding-left:18px;color:#c7d0dd;line-height:1.75;margin:12px 0 16px;font-size:.94rem}

/* ---------- 浮动问按钮 ---------- */
.ss-chat-fab{
  position:fixed;right:18px;bottom:18px;z-index:60;width:58px;height:58px;border-radius:50%;
  background:linear-gradient(180deg,#fff8de,#d4af37);color:#151515;display:grid;place-items:center;
  font-size:22px;font-weight:900;box-shadow:0 18px 40px rgba(0,0,0,.38);cursor:pointer;border:1px solid rgba(255,255,255,.35);
  transition:transform .18s ease, background .18s ease;
}
.ss-chat-fab.open{
  background:linear-gradient(180deg,#2a3446,#1a2230);
  color:var(--gold2);
  border-color:rgba(212,175,55,.6);
  transform:rotate(90deg);
}
/* 打开时：页面轻微压暗，突出聊天层 */
.ss-chat-scrim{
  position:fixed;inset:0;z-index:55;display:none;
  background:rgba(3,6,10,.55);
  backdrop-filter:blur(2px);
}
.ss-chat-scrim.show{display:block}

/* ---------- 聊天面板（与页面明显分层） ---------- */
.ss-chat-panel{
  position:fixed;right:18px;bottom:88px;z-index:60;
  width:min(440px,92vw);max-height:min(72vh,620px);
  display:none;flex-direction:column;
  /* 比页面更亮的炭蓝，形成独立层 */
  background:linear-gradient(180deg,#1b2433,#141b27);
  border:1px solid rgba(212,175,55,.55);
  border-radius:20px;
  box-shadow:0 30px 80px rgba(0,0,0,.65), 0 0 0 1px rgba(212,175,55,.12);
  overflow:hidden;
}
.ss-chat-panel[aria-hidden="false"]{display:flex}
.ss-chat-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 16px;
  background:linear-gradient(180deg,rgba(212,175,55,.18),rgba(212,175,55,.04));
  border-bottom:2px solid rgba(212,175,55,.55);
}
.ss-chat-title{font-weight:900;color:var(--gold2);font-size:1.05rem;display:flex;align-items:center;gap:8px}
.ss-chat-title::before{content:"✦";color:var(--gold2)}
.ss-close{
  cursor:pointer;color:var(--gold2);font-weight:900;font-size:1.1rem;
  width:36px;height:36px;border-radius:10px;display:grid;place-items:center;
  border:1px solid rgba(212,175,55,.45);background:rgba(0,0,0,.25);
}
.ss-close:hover{background:rgba(212,175,55,.18)}
.ss-chat-body{
  flex:1 1 auto;min-height:120px;max-height:46vh;overflow:auto;
  padding:14px;display:flex;flex-direction:column;gap:10px;
  background:rgba(0,0,0,.18);
}
.ss-msg{
  padding:11px 13px;border-radius:14px;max-width:86%;
  font-size:.96rem;line-height:1.65;white-space:pre-wrap;
  /* 助手气泡：深蓝灰 */
  background:#232f42;border:1px solid rgba(255,255,255,.10);color:#e6edf7;
}
.ss-msg.me{
  margin-left:auto;
  /* 用户气泡：暖金 */
  background:linear-gradient(180deg,rgba(212,175,55,.30),rgba(212,175,55,.18));
  border-color:rgba(212,175,55,.55);color:#fff6dd;
}
.ss-chat-input{
  display:flex;gap:8px;padding:12px;
  background:#1f2937;border-top:1px solid rgba(212,175,55,.30);
}
.ss-chat-input input{
  flex:1;min-width:0;border:1px solid rgba(255,255,255,.16);border-radius:14px;
  background:#0f1622;color:var(--text);padding:13px 12px;outline:none;font-size:1rem;
}
.ss-chat-input input:focus{border-color:var(--gold2);box-shadow:0 0 0 3px rgba(212,175,55,.15)}
.ss-chat-input .btn{padding:12px 16px;min-height:48px;border-radius:14px;font-size:1rem}
/* 不可用状态 */
.ss-chat-unavailable{
  padding:16px;border-radius:14px;text-align:center;
  background:rgba(212,175,55,.10);border:1px dashed rgba(212,175,55,.45);
  color:#f0dca0;font-size:.98rem;line-height:1.7;
}
.ss-chat-input.disabled{opacity:.55;pointer-events:none}

footer{text-align:center;color:#6f7c8c;padding:34px 0 100px;font-size:.88rem}

/* ---------- 移动端 ---------- */
@media(max-width:620px){
  :root{--page-pad:14px}
  .wrap{padding:0 var(--page-pad)}
  .hero{padding:26px 0 12px}
  .pillars-hero{grid-template-columns:repeat(2,1fr)}
  .summary-grid{grid-template-columns:1fr}
  .row2{grid-template-columns:1fr}
  .explain-grid{grid-template-columns:1fr}
  .member-body{grid-template-columns:1fr}
  .member-actions{grid-template-columns:1fr}
  .card-body,.card-head{padding:14px}
  /* 手风琴：移动端更大点按区域与字号 */
  .acc-head{padding:16px 14px;min-height:64px}
  .acc-head .t{font-size:1.12rem}
  .acc-head .s{font-size:.92rem}
  .acc-body{padding:0 14px 16px}
  .analysis-item,.explain-card{padding:14px;line-height:1.75}
  .small,.note{font-size:.98rem;line-height:1.75}
  /* 浮动问按钮：保持在卡片内，避免遮挡正文 */
  .ss-chat-fab{right:20px;bottom:20px;width:56px;height:56px}
  /* 聊天面板：移动端接近全宽，底部固定输入 */
  .ss-chat-panel{
    right:12px;left:12px;bottom:84px;width:auto;max-width:none;
    max-height:min(76vh,640px);
  }
  .ss-chat-body{max-height:52vh;font-size:1rem}
  .ss-msg{font-size:1.02rem;line-height:1.7}
  .ss-chat-input input{font-size:1.05rem;min-height:50px}
  .ss-chat-input .btn{min-height:50px;font-size:1.02rem}
  .ss-chat-title{font-size:1.1rem}
  main{padding-bottom:96px}
}