/* Life Map · 移动端样式（视觉体系同 mockups v0.2：深色 data-art、组件色板、反玄学） */
/* 颜色令牌（技术债 P2-17）：语义命名集中定义，正文一律 var() 引用 */
:root {
  /* 底色与面板 */
  --bg:#10131c;
  --panel:#161a26;
  --panel-soft:#151b29;
  --panel-dim:#141824;
  --panel-raised:#1a1f2e;
  --panel-deep:#151226;
  --navy:#1a2030;
  --navy-deep:#12162a;

  /* 描边与分割线 */
  --line:#262c3d;
  --line-strong:#36405a;
  --border:#2a3042;

  /* 文字 */
  --text:#e6e9f0;
  --text-body:#dfe4ee;
  --text-mid:#aeb6c8;
  --text-dim:#8b93a7;
  --text-faint:#5d6579;
  --text-warm:#f3e7c8;

  /* 暖金主强调 */
  --accent:#FFB86B;
  --accent-ink:#1a130a;
  --accent-bg:#221b12;
  --accent-bg-deep:#1c1a12;
  --accent-line:#8a743a;
  --violet-bg:#221d33;
  --violet-line:#3a3354;

  /* 语义色 */
  --danger:#F5A9C4;
  --danger-line:#8a3a5e;
  --ok:#9FF0C8;
  --ok-line:#2f7a58;
  --ok-bg:#12271e;
  --info:#7DD3FC;

  /* 表单与胶囊 */
  --input-bg:#101622;
  --chip-bg:#232a3d;
  --chip-text:#cfd6e4;
}

* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { height:100%; width:100%; overflow-x:hidden; }
body { background:#07090f; font-family:"PingFang SC","Hiragino Sans GB",-apple-system,sans-serif; color:var(--text); }
#frame { position:fixed; top:0; bottom:0; left:50%; transform:translateX(-50%);
         width:100%; max-width:430px; background:var(--bg);
         display:flex; flex-direction:column; box-shadow:0 0 60px rgba(0,0,0,.6); }
#app { flex:1; overflow-y:auto; }
#tabbar { display:flex; border-top:1px solid var(--line); background:var(--bg); padding:6px 0 max(6px, env(safe-area-inset-bottom)); }
#tabbar[hidden] { display:none; }
#tabbar button { flex:1; background:none; border:none; color:var(--text-dim); font-size:14px; padding:10px 0; letter-spacing:2px; }
#tabbar button.on { color:var(--accent); font-weight:600; }
.timeTabs { display:flex; gap:8px; margin:16px 0 2px; }
.timeTab { flex:1; text-align:center; padding:9px 0; border:1px solid var(--line); border-radius:10px;
           color:var(--text-dim); font-size:13.5px; letter-spacing:1px; text-decoration:none; }
.timeTab.on { border-color:var(--accent); color:var(--accent); background:var(--accent-bg); }
.rehearseHint { color:var(--text-mid); font-size:12.5px; line-height:1.6; text-align:left; margin-top:7px; }
.rehearseWeeks { display:flex; gap:6px; overflow-x:auto; padding:2px 0 6px; }
.rehearseWeeks .chip { flex:0 0 auto; }

.scr { min-height:100%; padding:52px 24px 28px; display:flex; flex-direction:column; animation:fadein .35s ease; }
@keyframes fadein { from { opacity:0; transform:translateY(8px);} to { opacity:1; transform:none;} }

.qnum { color:var(--text-dim); font-size:13px; letter-spacing:1px; }
.progress { height:4px; background:#222839; border-radius:2px; margin:12px 0 4px; }
.progress i { display:block; height:100%; background:var(--accent); border-radius:2px; transition:width .3s; }
.q { font-size:24px; font-weight:600; line-height:1.5; margin:20px 0 26px; }
.opt { background:var(--panel); border:1.5px solid var(--border); border-radius:16px; padding:18px; font-size:16px;
       margin-bottom:13px; color:var(--text-body); text-align:left; width:100%; cursor:pointer; transition:border-color .15s; }
.opt:active { transform:scale(.985); }
.opt.on { border-color:var(--accent); background:var(--accent-bg); }
.hint { color:#6d7590; font-size:12.5px; text-align:center; margin-top:auto; padding-top:14px; }
.cta { display:block; width:100%; background:var(--accent); color:var(--accent-ink); font-size:17px; font-weight:600; text-align:center;
       border:none; border-radius:16px; padding:17px; margin-top:16px; cursor:pointer; }
.cta2 { display:block; width:100%; background:var(--panel); border:1.5px solid var(--accent); color:var(--accent); font-size:15.5px;
        font-weight:600; text-align:center; border-radius:16px; padding:15px; margin-top:12px; cursor:pointer; }
.title { font-size:24px; font-weight:600; letter-spacing:1px; }
.subtitle { color:var(--text-dim); font-size:13.5px; margin-top:8px; line-height:1.65; }
.field { background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:15px 16px; margin-bottom:12px;
         display:flex; justify-content:space-between; align-items:center; }
.field .k { color:var(--text-dim); font-size:14px; }
.field .v { font-size:16px; }
.field input { background:none; border:none; color:var(--text); font-size:16px; text-align:right; outline:none; width:60%; }
.field select { background:var(--input-bg); border:1px solid var(--line-strong); border-radius:9px; color:var(--text); font-size:14px; padding:6px 8px; outline:none; }
#relIdentity { max-width:64%; }
.field input.datePick { background:var(--input-bg); border:1px solid var(--line-strong); border-radius:9px; color:var(--text); font-size:14px; padding:8px 10px; outline:none; width:62%; text-align:left; min-height:40px; color-scheme: dark; }
.field input.datePick::-webkit-calendar-picker-indicator { filter: invert(0.85); opacity:1; cursor:pointer; }
.selectGroup { display:flex; align-items:center; gap:5px; color:var(--text-dim); font-size:13px; width:68%; }
.selectGroup select { flex:1; min-width:0; }
#fYear { flex:1.5; }
.field .link { color:var(--info); font-size:13px; }
.toggleRow { display:flex; align-items:center; justify-content:space-between; background:transparent;
             border:1px dashed var(--line-strong); border-radius:14px; padding:14px 16px; margin-bottom:12px; font-size:14px; color:var(--text-mid); }
.switch { width:46px; height:27px; border-radius:14px; background:var(--border); position:relative; transition:.2s; flex:none; }
.switch::after { content:""; position:absolute; top:3px; left:3px; width:21px; height:21px; border-radius:50%; background:var(--text-dim); transition:.2s; }
.switch.on { background:var(--accent); } .switch.on::after { left:22px; background:var(--accent-ink); }
.noteCard { background:var(--panel-soft); border:1px solid #26314a; border-radius:14px; padding:14px 16px; font-size:13px;
            color:var(--text-mid); line-height:1.7; margin-top:4px; }
.fine { color:var(--text-dim); font-size:11px; text-align:center; line-height:1.7; margin-top:10px; } /* a11y：--text-faint 对比度过低，见技术债 P2-16 */
.tagline { font-size:20px; font-weight:600; line-height:1.75; text-align:center; }
.taglineEn { color:var(--text-dim); font-size:12px; text-align:center; margin-top:8px; }
.row { display:flex; align-items:center; background:var(--panel); border:1px solid var(--line); border-radius:14px;
       padding:14px 16px; margin-bottom:10px; width:100%; color:var(--text); font-size:15.5px; cursor:pointer; text-align:left; }
.dot { width:12px; height:12px; border-radius:50%; margin-right:12px; flex:none; }
.row .var { color:var(--text-dim); font-size:13px; margin-left:8px; }
.row .go { margin-left:auto; color:var(--text-faint); border:none; }
.block { background:var(--panel); border-left:3px solid var(--accent); border-radius:12px; padding:13px 15px; margin-bottom:11px; }
.block .bt { font-size:12.5px; letter-spacing:1px; margin-bottom:5px; }
.block .bd { font-size:14.5px; line-height:1.65; color:var(--text-body); }
.quote { background:var(--panel-soft); border:1px dashed var(--line-strong); border-radius:12px; padding:13px 15px; font-size:13.5px;
         color:var(--text-mid); line-height:1.7; margin-bottom:11px; }
.gold { background:linear-gradient(135deg,var(--violet-bg),var(--panel-deep)); border:1px solid var(--violet-line); border-radius:14px;
        padding:18px; font-size:17px; font-weight:600; line-height:1.75; }
.nav { display:flex; align-items:center; color:var(--text-dim); font-size:14px; margin-bottom:6px; }
.nav button { background:none; border:none; color:var(--text-dim); font-size:15px; cursor:pointer; padding:0; }
.badge { background:var(--accent-bg); border:1px solid var(--accent); color:var(--accent); border-radius:999px; padding:4px 14px;
         font-size:13px; font-weight:600; margin-left:10px; }
.tl { position:relative; margin:18px 0 0 8px; padding-left:22px; border-left:2px solid var(--line); }
.tlItem { position:relative; margin-bottom:14px; }
.tlItem::before { content:""; position:absolute; left:-29px; top:6px; width:10px; height:10px; border-radius:50%; background:#3a4258; }
.tlItem.hot::before { background:var(--accent); box-shadow:0 0 10px var(--accent); }
.tlItem .yr { color:var(--text-dim); font-size:12.5px; }
.segHot { background:var(--accent-bg-deep); border:1px solid var(--accent-line); border-radius:12px; padding:12px 14px; font-size:13.5px; line-height:1.7; margin-top:5px; }
.segLock { background:var(--panel-dim); border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin-top:5px; color:var(--text-faint); font-size:13px; }
.segLock .blur { filter:blur(3px); display:block; }
.bandWrap { display:flex; gap:4px; margin:16px 0 6px; }
.wk { flex:1; height:52px; border-radius:8px; background:var(--navy); display:flex; align-items:center; justify-content:center;
      font-size:9.5px; color:var(--text-dim); padding:4px 2px; line-height:1.2; text-align:center; }
.bandWrap.mini .wk { height:34px; font-size:8.5px; border-radius:7px; }
.chartWrap { display:flex; align-items:flex-end; gap:8px; margin-top:12px; }
.chartCol { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; border:none; background:none; padding:0; cursor:pointer; color:inherit; }
.chartVal { color:var(--text-body); font-size:12px; font-weight:600; }
.chartBar { width:100%; border-radius:6px 6px 3px 3px; background:var(--border); }
.chartBar.lv1 { background:#3a3550; }
.chartBar.lv2 { background:#4a5568; }
.chartBar.lv3 { background:var(--accent); }
.chartDate { color:var(--text-dim); font-size:10px; }
.chartCol.now .chartVal { color:var(--accent); }
.chartCol.now .chartBar { outline:2px solid var(--accent); outline-offset:2px; }
.wk.prep { background:#2a2440; } .wk.act { background:#4a3416; } .wk.now { outline:2px solid var(--accent); }
.legend { display:flex; gap:14px; font-size:11.5px; color:var(--text-dim); margin-bottom:6px; }
.legend i { width:10px; height:10px; border-radius:3px; display:inline-block; margin-right:5px; }
.chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.chip { background:var(--chip-bg); border:1px solid var(--line-strong); color:var(--chip-text); border-radius:999px; padding:6px 14px; font-size:12.5px; }
.rel { border-radius:999px; padding:8px 14px; font-size:13px; margin-bottom:9px; display:inline-block; }
.relG { background:#2a2415; border:1px solid var(--accent-line); color:#FFD98A; }
.relN { background:var(--ok-bg); border:1px solid var(--ok-line); color:var(--ok); }
.relP { background:#271620; border:1px solid var(--danger-line); color:var(--danger); }

/* 双人关系雷达 */
.structFold { background:var(--panel-dim); border:1px solid var(--line); border-radius:12px; padding:10px 14px; margin:12px 0 6px; }
.structFold summary { color:var(--text-dim); font-size:13px; cursor:pointer; }
.radarWrap { margin:10px -6px 0; }
.radar { width:100%; display:block; }
.radarLegend { display:flex; justify-content:center; gap:22px; font-size:12.5px; color:var(--text-mid); margin:2px 0 10px; }
.radarLegend i { width:10px; height:10px; border-radius:50%; display:inline-block; margin-right:6px; }
.yearRow { display:flex; gap:12px; align-items:center; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:12px; margin-bottom:10px; }
.yearRadar { width:92px; flex:none; }
.yearRadar svg { width:100%; display:block; }
.yearBody { flex:1; min-width:0; }
.yearYear { color:var(--accent); font-size:11.5px; letter-spacing:1px; }
.yearTitle { font-size:14.5px; font-weight:600; margin:2px 0 4px; }
.yearText { font-size:12.5px; color:var(--text-mid); line-height:1.6; }
.yearAgree { font-size:12px; color:var(--ok); margin-top:4px; line-height:1.55; }

/* 关系档案 */
.relRow { align-items:center; }
.relAvatar { width:40px; height:40px; border-radius:50%; background:var(--chip-bg); border:1px solid var(--line-strong); display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:600; color:var(--accent); margin-right:12px; flex:none; }
.relMain { min-width:0; text-align:left; }
.relMain b { font-size:15.5px; }
.relMeta { color:var(--text-dim); font-size:12.5px; }
.relState { margin-left:auto; font-size:11.5px; color:var(--text-dim); border:1px solid var(--line-strong); border-radius:999px; padding:3px 9px; flex:none; }
.relState.ok { color:var(--ok); border-color:var(--ok-line); background:var(--ok-bg); }
.demoTag { font-size:10px; color:var(--text-dim); border:1px solid var(--line-strong); border-radius:999px; padding:1px 6px; margin-left:6px; vertical-align:1px; }
.relActions { margin-top:18px; display:flex; flex-direction:column; gap:10px; }

.mapHero { margin:4px -14px 0; display:flex; justify-content:center; }
.mapHero .mapsvg { width:auto; max-width:100%; max-height:44vh; }
.mapHero circle[data-comp] { cursor:pointer; }
.sheetMask { position:fixed; inset:0; background:rgba(4,6,10,.6); z-index:20; display:flex; align-items:flex-end; justify-content:center; animation:fadein .2s ease; }
.sheet { width:100%; max-width:430px; background:var(--panel-raised); border:1px solid var(--border); border-bottom:none; border-radius:22px 22px 0 0; padding:22px 24px 34px; animation:up .25s ease; }
@keyframes up { from { transform:translateY(60px); opacity:0; } to { transform:none; opacity:1; } }

.identityHero { color:var(--accent); font-size:27px; font-weight:700; letter-spacing:1px; line-height:1.35; margin:14px 0 6px; }
.identityMeaning { color:var(--text); font-size:17px; line-height:1.6; margin-bottom:8px; }
.identityWhy { color:var(--text-mid); font-size:14.5px; line-height:1.7; margin-bottom:12px; }

/* 公开身份展示：家族徽记 + 类型图 + 身份介绍 */
.identityShowcase { background:linear-gradient(150deg,var(--panel-raised),var(--panel-deep)); border:1px solid var(--border); border-radius:18px; padding:18px 16px 16px; margin:14px 0 12px; text-align:center; }
.showcaseTop { display:flex; gap:14px; align-items:center; }
.portraitWrap { position:relative; width:230px; height:230px; margin:0 auto 6px; flex:none; display:flex; align-items:center; justify-content:center; }
.identityPortrait { width:100%; height:100%; object-fit:contain; display:block; position:relative; z-index:1; }
.portraitFallback { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:64px; font-weight:700; color:var(--accent); opacity:.18; }
.familyEmblem { position:absolute; right:4px; bottom:4px; width:40px; height:40px; z-index:2; background:var(--bg); border:1px solid var(--border); border-radius:50%; padding:5px; }
.identityShowcaseText { min-width:0; }
.identityEyebrow { color:var(--text-dim); font-size:12px; letter-spacing:1px; }
.identityName { color:var(--accent); font-size:30px; font-weight:700; line-height:1.2; margin:4px 0; }
.identitySlogan { color:var(--text-warm); font-size:15px; line-height:1.6; }
.identityIntro { color:var(--text-mid); font-size:13.5px; line-height:1.75; margin-top:12px; text-align:left; }

.publicCard { background:linear-gradient(135deg,var(--accent-bg-deep),var(--panel-deep)); border:1px solid var(--accent-line); border-radius:14px; padding:15px 16px; margin-bottom:12px; }
.publicSentence { font-size:16.5px; line-height:1.75; color:var(--text-warm); margin:8px 0 10px; }
.shareCard { background:linear-gradient(160deg,var(--navy),var(--navy-deep)); border:1px solid var(--accent-line); border-radius:18px; padding:20px 18px 16px; margin:12px 0 18px; }
.sharePoster { background:linear-gradient(165deg,var(--accent-bg-deep),var(--navy-deep)); border:1px solid var(--accent-line); border-radius:20px; padding:22px 20px 18px; margin:12px 0 18px; }
.posterTop { display:flex; gap:14px; align-items:center; margin-bottom:12px; }
.posterEmblem { width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:29px; font-weight:700; color:var(--bg); flex:none; box-shadow:0 0 24px rgba(255,184,107,.22); }
.posterHero { display:flex; flex-direction:column; align-items:center; text-align:center; gap:0; }
.posterPortraitWrap { position:relative; width:220px; height:220px; margin-bottom:8px; flex:none; display:flex; align-items:center; justify-content:center; }
.posterPortrait { width:100%; height:100%; object-fit:contain; display:block; position:relative; z-index:1; }
.posterPortraitFallback { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:62px; font-weight:700; color:var(--accent); opacity:.18; }
.posterFamily { position:absolute; right:4px; bottom:4px; width:40px; height:40px; z-index:2; background:var(--bg); border:1px solid var(--border); border-radius:50%; padding:5px; }
.posterHeroText { min-width:0; }
.posterHero .posterTitle { font-size:26px; }
.posterQuote { background:var(--accent-bg); border-left:3px solid var(--accent); border-radius:10px; padding:10px 12px; color:var(--text-warm); font-size:14.5px; line-height:1.7; margin:14px 0 0; text-align:left; }
.posterIntro { color:var(--text-mid); font-size:13.5px; line-height:1.7; margin:12px 0 0; text-align:left; }
.posterKicker { color:var(--text-dim); font-size:13px; letter-spacing:1px; }
.posterTitle { color:var(--accent); font-size:22px; font-weight:700; line-height:1.45; margin:4px 0 2px; }
.posterSentence { color:var(--text-warm); font-size:16px; line-height:1.75; margin-bottom:6px; }
.posterIdentityLine { color:var(--text-dim); font-size:12.5px; margin-bottom:14px; }
.posterSection { color:var(--text); font-size:14.5px; font-weight:600; letter-spacing:1px; margin:14px 0 6px; }
.posterList { color:var(--text-mid); font-size:14px; line-height:1.8; }
.posterFooter { color:var(--text-dim); font-size:12.5px; text-align:right; margin-top:16px; }
.shareCard .mapsvg { margin:8px auto 12px; }
.smallBtns { display:flex; flex-wrap:wrap; gap:8px; }
.smallBtns button, .chipBtn { background:var(--chip-bg); border:1px solid var(--line-strong); color:var(--chip-text); border-radius:999px; padding:6px 13px; font-size:12.5px; cursor:pointer; }
.smallBtns button.on, .chipBtn.on { border-color:var(--accent); color:var(--accent); }
.textInput, .textArea { width:100%; background:var(--input-bg); border:1px solid var(--line-strong); border-radius:12px; color:var(--text); font-size:14.5px; line-height:1.65; padding:12px 14px; outline:none; }
.textArea { min-height:96px; resize:vertical; }
.danger { color:var(--danger) !important; border-color:var(--danger-line) !important; }
.stepLabel { color:var(--accent); font-size:12.5px; letter-spacing:1px; margin:14px 0 8px; }

/* 英雄时刻动画 */
.heroStage { position:relative; height:400px; }
.heroGrid { position:absolute; inset:0; display:grid; grid-template-columns:repeat(4,1fr); gap:10px; padding:40px 30px; align-content:start; }
.heroGrid i { height:56px; border-radius:10px; background:#242c42; border:1px solid #46507a;
              display:flex; align-items:center; justify-content:center; color:#5b6480; font-size:13px; font-style:normal;
              animation:dissolve 1.6s ease forwards; }
@keyframes dissolve { 55% { opacity:.5; transform:rotate(6deg) translateY(-6px);} 100% { opacity:0; transform:rotate(14deg) translateY(-26px) scale(.7);} }
.heroMap { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
           opacity:0; transform:scale(.85); animation:reveal 1.1s ease forwards; animation-delay:1.5s; }
@keyframes reveal { to { opacity:1; transform:scale(1);} }
.heroText { opacity:0; animation:fadein .8s ease forwards; animation-delay:2.2s; }

/* 演练 */
.rehearseCard { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:14px 16px; margin-bottom:11px; }
.rehearseCard .meta { color:var(--text-dim); font-size:12px; margin-top:4px; }
.rehearseCard .status { color:var(--accent); font-size:12px; }
.rehearseStep { display:flex; gap:6px; flex-wrap:wrap; margin:12px 0; }
.rehearseStep span { font-size:11.5px; color:var(--text-dim); border:1px solid var(--line); border-radius:999px; padding:5px 9px; }
.rehearseStep span.on { color:var(--accent); border-color:var(--accent); background:var(--accent-bg); }
.block .k { color:var(--text-mid); font-size:13.5px; line-height:1.6; }

/* 第 5 步：方向卡 */
.dirCard { background:linear-gradient(135deg,var(--violet-bg),var(--panel-deep)); border:1px solid var(--violet-line); border-radius:16px;
           padding:18px 16px; margin-bottom:12px; overflow-wrap:anywhere; }
.dirKicker { color:var(--accent); font-size:12.5px; letter-spacing:1px; margin-bottom:8px; }
.dirTitle { color:#FFD79A; font-size:22px; font-weight:600; line-height:1.45; }
.dirLine { color:var(--text-body); font-size:14.5px; line-height:1.75; margin-top:8px; }
.dirSay { font-size:15px; line-height:1.8; color:#f3e6cf; background:#1c1710;
          border-left:3px solid var(--accent); border-radius:10px; padding:10px 12px; margin:6px 0 4px; }
.dirLabel { color:var(--text-dim); font-size:12.5px; letter-spacing:1px; margin:16px 0 7px; }
.dirReason { display:flex; gap:8px; font-size:13.5px; line-height:1.7; color:var(--text-body); margin-bottom:7px; }
.dirReason b { color:var(--accent); font-weight:600; flex:none; }
.dirAction { background:var(--panel); border-left:3px solid var(--accent); border-radius:12px; padding:12px 14px;
             font-size:14.5px; line-height:1.7; color:var(--text-body); }
.dirWatch { background:var(--panel); border-left:3px solid #34D399; border-radius:12px; padding:12px 14px;
            font-size:14.5px; line-height:1.7; color:var(--text-body); }