@font-face { font-family:'TriangleDigits'; src:url(data:font/woff2;base64,d09GMgABAAAAAAUAAA4AAAAACHwAAASsAAIZmQAAAAAAAAAAAAAAAAAAAAAAAAAAGhYbbBxIBmAANBEQCocshhEBNgIkAxoLGAAEIAWDIgcgG9QGKC4G7Ib6hm2MRajDYhGiDhrol2EQYF1VSXrYswJPkJb83g+eA7l2QeKDmZzBKY+S2Y6GNNvdREZSoL/sv5IIQxUu06If+FX4/z+X49/WsztrTAw5kRt099ubOm5NXEAFHuBcGvAGSjDAgLDn2bZk6fIVBBISV5n1GLNAADYApcVbCydXozYtkTdtbu8OvEOS0PEgPgIdEQfiY0OwiSCOBmAPsl4AYswwdCJQA1FoSBQqZkProGuMIFPAPhuoa8oSVYX8YAQSAZpDCmDZcIkm/ZAjI0LR3A1KzY56XmlDxUYMYNhtcBARzR51kKE7KkxKozJobFeXdNJlKY3czMCYMrUMa/83F2mmEHEHkFJnDXn9YBwBCSjAHYUA3NEIBjQ0BFDLHki2t3+KqVZYkbggAFQ26ho8RWcQ3tl/htql/UbHN70BAoXUbXpAnK4F+eoWL5vNxzpnKT0L1CrUld9zyZWVebLzdRVOGASMYohloBiiuziLHrm5uQI5VmbV7EqrcnVlszArq2tWV6c5C0+s7O5L1+3WqS7Q2737TCeTufqRH9o1O3uOtCpHMUc36sxupMOcNaesYEbpnGdwwlHmrs8VKBTmstgNaLvfBrx5PQ/wj1yzJd01+3LOm+/CzOY4zhHWtXYr5PbIyREYwJnHeFm4pXu2IcxByHzZVWJ3Er3bMQkX9snibM6Y1aTyc3rkXNUJPXpz8SR3SFeH84FFWYV9bzibJvHlL0bRde6KYc9cmiIKk5+FN+NThqtvc8aBGfnF6WzIqLk1ON06sNXy3bLFuIJ8DQT/QGhPY9JrsRk3RddPID33rzz9cLGnXZjvNNQR4659v7m7f0qW1qex/MqwciHDfdsqBnOLCispr6nWU0/DmAXZBdjkTA0M/4LXawb7VDhbjduWNPaWsM25jxyH1ENRUmejPPOk33dOKZ+v4BRLNZQeriawC/Nzxb0nr7/lPdzfGvGf3kgW0N6/tXYq1Si9RA/v58kV3DTY5DgaxwV1Uw5++lzxouLrgNYX82rdHtlWXSn61Di0UAxfhc2HeamcDnfrnVra3xecFNc61xtZhSxqUlFZFQ62rTQ+w3YS4S9Z4bNHHUB7y/fxoxt9pVAyqdOZ66cPKs7Oz8sYj5f2lIpvQPQfX3t4++1V80/rnFtRkIspHBjC5WXnpReTvuTiMVkJsZFp5SVhxARkdDKQhx19XV78vjqr1UAXlvCfnhUiz41CK/6P8dI6eIab2nlH17ap48+X3P/67iJUpWdlq6vNFAQABCB9dmU3fPxwgFPdb2YhMwAvzT++ByhOmZz+3/9vizVMBYAZOVthCvnfDK9OI6rfpSMQ1O8ljbVAg/Zm6S2UNDN4K6A9UySALjrjrgTjPKoUNdG7bdIswFkQgyCYswaJI28NikwKujXQYMBXOC8yEihiaSpGlAKsZbII4YSJENhVwgyBgJQEXSDaUphohpCxTCWZFJKhBY+AiHgRfBMjhobUGOI+OYREilhp4gmpjs63SFuCvHUricIo0nYoVERiSqyLCF+MnFdHwYlnbI0JjLBYonBsPGESCHYCTx5NXJ+7DhJpNTCDOrOPjGrLzlAAAAA) format('woff2'); }
        * { box-sizing: border-box; margin: 0; padding: 0; }
        /* legacy body → scoped */
.app-page{ background:linear-gradient(160deg,#FFD1C7,#FFC8B5); font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif; display:flex; flex-direction:column; justify-content:center; align-items:center; min-height:100vh; color:#333; padding:10px 10px 20px; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
        .container { position:relative; width:600px; max-width:95%; padding:12px 40px 40px; display:flex; flex-direction:column; align-items:center; background:#fff; border-radius:18px; box-shadow:0 8px 30px rgba(0,0,0,.08); margin-bottom:30px; }
        .input-row { display:flex; gap:5px; align-items:center; margin-bottom:24px; font-family:sans-serif; }
        .input-row input { width:56px; padding:6px 4px; border:1px solid #d9ccb6; border-radius:3px; font-size:14px; text-align:center; color:#6b5b4e; background:#fff; outline:none; }
        .input-row input:focus { border-color:#a89580; }
        .input-row .lbl { font-size:0.75em; color:#9b8a78; }
        .btn-gen { padding:6px 12px; background:#8b7a68; color:#fff; border:none; border-radius:3px; font-size:0.75em; cursor:pointer; margin-left:2px; }
        .btn-gen:active { opacity:0.8; }
        .top-numbers { display:flex; flex-direction:column; align-items:center; margin-bottom:-20px; z-index:2; font-family:'TriangleDigits','Georgia','Times New Roman',serif; }
        .top-numbers .num-top { font-size:2.2rem; font-weight:normal; }
        .top-numbers .num-mid-row { display:flex; gap:60px; font-size:2.2rem; font-weight:normal; }
        .triangle-wrapper { position:relative; width:300px; height:260px; margin:20px 0; display:flex; justify-content:center; align-items:center; overflow:visible; }
        .triangle-svg { position:absolute; top:0; left:0; width:100%; height:100%; z-index:0; }
        .triangle-path { fill:#f2ebdd; stroke:#d9ccb6; stroke-width:2; }
        .divider-line { stroke:#d9ccb6; stroke-width:2; }
        .inner-number { position:absolute; z-index:1; font-size:2.2rem; font-weight:bold; cursor:pointer; font-family:'TriangleDigits','Georgia','Times New Roman',serif; color:#5a4636; }
        .red-num { color:#c47a78; top:25%; }
        .mid-left { top:55%; left:30%; } .mid-right { top:55%; right:30%; }
        .bot-1 { bottom:10%; left:18%; } .bot-2 { bottom:10%; left:38%; }
        .bot-3 { bottom:10%; right:38%; } .bot-4 { bottom:10%; right:18%; }
        .side-decorations { position:absolute; width:100%; height:100%; top:0; left:0; font-family:'TriangleDigits','Georgia','Times New Roman',serif; }
        .side-num { position:absolute; font-size:2.2rem; opacity:0.65; cursor:pointer; font-family:'TriangleDigits','Georgia','Times New Roman',serif; font-weight:normal; color:#8b7e6e; }
        .left-group { top:30%; left:-40px; text-align:right; line-height:1.5; }
        .right-group { top:30%; right:-40px; text-align:left; line-height:1.5; }
        .footer-date { margin-top:0; display:flex; gap:40px; font-size:1.8rem; letter-spacing:2px; color:#5a4636; font-family:'TriangleDigits','Georgia','Times New Roman',serif; }
        .sections { width:100%; max-width:360px; margin-top:24px; font-family:sans-serif; font-size:1em; color:#6b5b4e; }
        .divider { border:none; border-top:1px solid #e0d5c4; margin:12px 0; opacity:0.6; }
        .codes .r { display:flex; justify-content:space-between; border-bottom:1px dotted rgba(168,144,112,0.15); padding:2px 4px; }
        .codes .k { color:#9b8a78; } .codes .v { color:#6b5b4e; }
        .joint-age { font-size:0.9em; color:#a89070; font-weight:600; text-align:center; margin:8px 0 2px; border-bottom:1px solid rgba(168,144,112,0.2); padding-bottom:2px; }
        .joint-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:2px 10px; }
        .joint-grid .jc { font-weight:700; color:#5a4636; } .joint-grid .jm { color:#9b8a78; }
        .tooltip { position:fixed; padding:5px 10px; background:#6b5b4e; color:#fff; border-radius:4px; font-size:0.7em; pointer-events:none; opacity:0; transition:opacity 0.12s; z-index:999; max-width:200px; line-height:1.5; font-family:sans-serif; }
        .tooltip.on { opacity:1; }
        .footer { text-align:center; font-size:0.6em; color:#9b8a78; margin-top:10px; }
        /* 付费墙 */
        .shuzi-lock { position:relative; border-radius:10px; overflow:hidden; border:1px solid #f2e6d0; }
        .shuzi-lock > .blur { filter:blur(10px); opacity:0.35; pointer-events:none; user-select:none; }
        .shuzi-lock .cover { position:absolute; inset:0; z-index:2; background:linear-gradient(180deg, rgba(250,247,242,.5), rgba(250,247,242,.95)); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:20px; }
        .shuzi-lock .cover .lk-t { font-size:1.05em; font-weight:700; color:#c47a78; }
        .shuzi-lock .cover .lk-d { font-size:0.75em; color:#9b8a78; margin:8px 0 14px; }
        .shuzi-lock .cover .lk-btn { background:#c47a78; color:#fff; border:none; padding:10px 28px; border-radius:20px; font-size:0.85em; font-weight:600; cursor:pointer; }
        .shuzi-lock.unlocked .cover { display:none; }
        .shuzi-lock.unlocked .blur { filter:none; pointer-events:auto; user-select:auto; }
        .scene-3d { position:relative; display:flex; justify-content:center; margin:8px 0; cursor:grab; }
        .scene-3d:active { cursor:grabbing; }
        .scene-3d canvas { display:block; touch-action:none; }
        .scene-hint { position:absolute; bottom:2px; left:50%; transform:translateX(-50%); font-size:0.55em; color:#b8a898; pointer-events:none; opacity:0.7; }
        .freq-label { text-align:center; font-size:0.7em; color:#6b5b4e; margin-top:2px; line-height:1.8; }
        .tabs-nav { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:18px; justify-content:center; padding:0 4px; }
        .tab-btn { padding:5px 10px; border:1px solid #d9ccb6; border-radius:3px; background:#fff; color:#9b8a78; font-size:0.7em; cursor:pointer; font-family:sans-serif; transition:all 0.15s; white-space:nowrap; }
        .tab-btn:hover { border-color:#c47a78; color:#c47a78; }
        .tab-btn.active { background:#c47a78; color:#fff; border-color:#c47a78; }
        .tab-panel { display:none; }
        .tab-panel.active { display:block; }
        .tab-panel .module-title { font-size:0.82em; font-weight:600; color:#5a4636; text-align:center; margin-bottom:8px; }
        .tab-panel .module-desc { font-size:0.68em; color:#9b8a78; text-align:center; margin-bottom:10px; line-height:1.6; }
        .tab-panel .module-section { font-size:0.72em; color:#6b5b4e; line-height:1.75; padding:0 4px; margin-bottom:10px; }
        .tab-panel .module-section b { color:#5a4636; }
        .bagua-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; text-align:center; margin:8px 0; }
        .bagua-cell { padding:6px 4px; border-radius:4px; font-size:0.68em; line-height:1.5; }
        @media (max-width:600px) {
            .triangle-wrapper { width:220px; height:190px; margin:10px auto 0; }
            .triangle-wrapper svg { width:220px; height:190px; }
            .inner-number { font-size:1.6rem; }
            .red-num { top:22%; }
            .mid-left { top:52%; left:28%; } .mid-right { top:52%; right:28%; }
            .bot-1 { bottom:10%; left:14%; } .bot-2 { bottom:10%; left:35%; }
            .bot-3 { bottom:10%; right:35%; } .bot-4 { bottom:10%; right:14%; }
            .side-num { font-size:1.6rem; }
            .left-group { left:-32px; top:26%; } .right-group { right:-32px; top:26%; }
            .top-numbers .num-top { font-size:1.6rem; }
            .top-numbers .num-mid-row { font-size:1.6rem; gap:40px; }
            .footer-date { gap:14px; font-size:1.2rem; letter-spacing:0; }
        }