:root{font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;color:#241f18;background:#eee6da;font-synthesis:none;--ink:#241f18;--muted:#81786b;--line:#d8cec0;--paper:#fffdf9;--gold:#9a6b2f;--gold-soft:#f2e5cf;--red:#a24f3d;--green:#496a4f;--shadow:0 18px 48px rgba(61,45,25,.08)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px;min-height:100vh;background:radial-gradient(circle at 22% 0,#fbf7ef 0,#f0e9de 42%,#e8dfd2 100%);background-attachment:fixed}button,input,select,textarea{font:inherit}button{cursor:pointer}.app-shell{width:min(1120px,calc(100% - 32px));margin:0 auto;padding:44px 0 72px}.hero{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;padding:0 4px 28px}.hero h1{font-family:"Noto Serif TC","Songti TC",Georgia,serif;font-size:clamp(40px,6vw,68px);font-weight:700;margin:5px 0 8px;letter-spacing:.08em}.hero p{margin:0;color:var(--muted);letter-spacing:.04em}.eyebrow{color:var(--gold);font-size:11px;font-weight:900;letter-spacing:.18em;text-transform:uppercase}.stepper{display:flex;align-items:center;gap:9px;color:#aaa094;font-size:12px;font-weight:800}.stepper span{display:flex;align-items:center;gap:6px}.stepper span b{display:grid;place-items:center;width:22px;height:22px;border:1px solid #c9beaf;border-radius:50%;font-size:10px}.stepper i{width:30px;height:1px;background:#cfc6b8}.stepper .active{color:#493a27}.stepper .active b{background:#2c251d;color:white;border-color:#2c251d}.card{background:rgba(255,253,249,.88);border:1px solid rgba(116,91,56,.14);box-shadow:var(--shadow);border-radius:22px;padding:28px;margin-bottom:18px;backdrop-filter:blur(10px)}.section-title h2,.section-head h2{margin:5px 0 5px;font-size:26px}.section-title p,.section-head p{margin:0 0 24px;color:var(--muted);font-size:13px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.field{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}.field>span,fieldset legend{font-weight:850;font-size:14px}.field em{color:var(--red);font-style:normal;font-size:11px;margin-left:6px}.field span i{font-style:normal;font-size:11px;color:#9b9184;margin-left:4px}.field small{color:#8c8377;font-size:12px}.field.full small{text-align:right}textarea,select,input[type=datetime-local]{width:100%;border:1px solid var(--line);background:#fff;border-radius:12px;padding:13px 14px;color:#29231c;outline:none;transition:.15s}textarea:focus,select:focus,input:focus{border-color:#aa7a39;box-shadow:0 0 0 3px rgba(170,122,57,.1)}textarea{min-height:138px;resize:vertical;line-height:1.65}.time-field{border:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}.time-field legend{margin-bottom:10px}.time-field input[type=datetime-local],.rule-note{grid-column:1/-1}.radio-card{border:1px solid var(--line);background:#fff;border-radius:13px;padding:14px;display:flex;gap:10px;align-items:flex-start}.radio-card.selected{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold);background:#fffaf1}.radio-card span{display:flex;flex-direction:column;gap:2px}.radio-card strong{font-size:14px}.radio-card small{font-size:11px}.rule-note{padding:10px 12px;border-radius:10px;background:#f5efe6;color:#786a57;font-size:11px}.actions{display:flex;justify-content:flex-end;gap:12px;margin:20px 2px}.primary,.secondary,.text-btn{border:0;border-radius:999px;padding:12px 22px;font-weight:850;transition:.15s}.primary{background:#292118;color:white;box-shadow:0 8px 20px rgba(41,33,24,.16)}.primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 11px 24px rgba(41,33,24,.22)}.primary:disabled{opacity:.36;cursor:not-allowed}.secondary{background:#fff;color:#4a3a27;border:1px solid #d3cabd}.text-btn{background:transparent;color:#8a6531;padding-inline:8px}.section-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}.method-switch{display:grid;grid-template-columns:1fr 1fr;gap:14px}.method-switch button{text-align:left;border:1px solid #d9d0c3;border-radius:16px;background:#fff;padding:18px;display:flex;gap:14px;align-items:center;color:#51483e}.method-switch button>span:last-child{display:flex;flex-direction:column;gap:5px}.method-switch button strong{font-size:18px;color:#2c241b}.method-switch button small{color:#8a8175}.method-switch button.selected{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold);background:#fffaf0}.method-icon{width:44px;height:44px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;background:#efe5d6;color:#6e4f29;font-family:serif;font-weight:900}.coin-mini{border:3px solid #c59a5b;box-shadow:inset 0 0 0 3px #f7d995;font-size:10px}.notice{display:flex;gap:12px;align-items:center;background:#f6efe2;border-radius:12px;padding:13px 15px;color:#685438;margin-bottom:18px}.notice span{font-size:10px;background:#8e6b3b;color:white;border-radius:999px;padding:4px 8px;font-weight:800}.manual-lines{display:grid;gap:4px}.stack-legend{display:flex;justify-content:space-between;align-items:center;margin:10px 0 8px;color:#8b7c68;font-size:12px}.stack-legend b{font-size:14px;color:#6f542f}.stack-legend span{color:#9a8d7e}.stack-legend.bottom{margin:10px 0 0}.manual-line{display:grid;grid-template-columns:90px 180px 1fr;align-items:center;gap:16px;padding:10px 0;border-bottom:1px solid #eee8df}.line-name{font-weight:850;display:flex;gap:8px;align-items:center}.line-name b,.coin-history span b{display:grid;place-items:center;width:23px;height:23px;border-radius:50%;background:#eee5d7;color:#72572f;font-size:11px}.empty-line{color:#b0a79a;font-size:13px}.line-glyph{width:165px;min-height:28px;display:flex;align-items:center;gap:10px}.yang-line{display:block;width:112px;height:8px;border-radius:3px;background:#28221a}.yin-line{display:flex;width:112px;justify-content:space-between}.yin-line b{display:block;width:48px;height:8px;border-radius:3px;background:#28221a}.moving-mark{font-family:Georgia,serif;color:#a56d2b;font-size:20px;font-style:normal;font-weight:800}.coin-card{text-align:center}.coin-progress>span{display:block;color:#8f8374;font-size:11px;font-weight:800;letter-spacing:.12em}.coin-progress>strong{display:block;font-family:Georgia,serif;font-size:36px;margin:3px 0}.coin-progress>strong b{font-size:16px;color:#9b9184}.coin-progress p{margin:0;color:#736959;font-size:13px}.coins{display:flex;justify-content:center;gap:24px;margin:28px 0 20px;perspective:600px}.coin{width:108px;aspect-ratio:1;display:grid;place-items:center;position:relative;transform-style:preserve-3d}.coin img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 10px 18px rgba(80,54,23,.18))}.coin-face-label{position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);padding:3px 10px;border-radius:999px;background:rgba(255,249,238,.95);border:1px solid #d8c5a8;color:#76572d;font-weight:900;font-size:12px;letter-spacing:.15em}.coin.spinning{animation:coin-spin .65s cubic-bezier(.3,.7,.2,1) both;animation-delay:var(--delay)}@keyframes coin-spin{0%{transform:rotateY(0) translateY(0)}35%{transform:rotateY(540deg) translateY(-34px)}100%{transform:rotateY(1080deg) translateY(0)}}.coin-result{min-height:46px;display:flex;justify-content:center;gap:14px;align-items:center;color:#827667}.coin-result strong{color:#372c20}.coin-result .line-glyph{width:140px;transform:scale(.85);transform-origin:left center}.toss{min-width:160px;margin-top:10px}.done{color:#7b643f;font-weight:850}.coin-history{margin:16px auto 0;max-width:690px;text-align:left;display:grid;gap:2px}.coin-history>div{display:grid;grid-template-columns:90px 155px 1fr;align-items:center;padding:8px 0;border-top:1px solid #eee7dc}.coin-history>div>span{display:flex;gap:8px;align-items:center}.coin-history>div>strong{font-size:13px;color:#806944}.coin-history .line-glyph{transform:scale(.8);transform-origin:left center}.question-summary{display:flex;justify-content:space-between;gap:28px;align-items:flex-end}.question-summary h2{margin:5px 0 5px;max-width:760px;font-size:25px}.question-summary p{margin:0;color:#867b6d;font-size:12px}.calendar-card{padding-bottom:22px}.calendar-main{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:1px solid #ebe2d7;padding-bottom:18px}.calendar-main h2{margin:5px 0 4px;font-size:22px}.calendar-main p{margin:0;color:#817667;font-size:13px}.tz-badge{font-size:10px;background:#eee6da;border-radius:999px;padding:7px 10px;color:#705c42;font-weight:800}.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#e7ded2;border:1px solid #e7ded2;border-radius:14px;overflow:hidden;margin-top:18px}.pillars>div{background:#fffdf9;padding:16px 14px;text-align:center;display:flex;flex-direction:column;gap:6px;justify-content:center}.pillars span{font-size:11px;color:#988c7d;font-weight:800}.pillars strong{font-size:24px;font-family:"Noto Serif TC",serif;letter-spacing:.08em}.calendar-note{text-align:right;margin-top:8px;color:#9b9184;font-size:10px}.hex-headings{display:grid;grid-template-columns:1fr 1fr;gap:20px;border-bottom:1px solid #e9e1d5;padding-bottom:20px;margin-bottom:12px}.hex-headings h2{margin:6px 0 4px;font-size:34px;font-family:"Noto Serif TC",serif}.hex-headings p{margin:0;color:#897e70;font-size:15px}.chart-wrap{overflow-x:auto}.chart-row{min-width:1040px;display:grid;grid-template-columns:92px 170px 230px 60px 210px 230px;gap:12px;align-items:center;min-height:72px;border-bottom:1px solid #eee8df;padding:2px 6px}.chart-labels{color:#9a9083;font-size:13px;font-weight:850;min-height:42px}.moving-row{background:linear-gradient(90deg,transparent,#fff7e9 24%,#fff7e9 77%,transparent)}.chart-row .line-glyph{width:200px}.beast{font-weight:900;color:#765d3c;font-size:20px}.fushen{display:grid;color:#9c7650}.fushen small{font-size:14px}.original-line,.changed-line{font-size:18px;display:grid;grid-template-columns:auto auto auto 1fr;gap:8px;align-items:center}.original-line strong,.changed-line strong{font-size:18px}.original-line b,.changed-line b{font-weight:800;font-size:19px}.original-line small,.changed-line small{color:#a09180;font-size:14px}.shi-ying{font-weight:900;color:#a4543f;font-size:24px}.void-badge{display:inline-flex;align-items:center;justify-content:center;padding:3px 8px;border-radius:999px;background:#f8eadc;border:1px solid #e0c2a1;color:#9d5d37;font-size:12px;font-weight:900;letter-spacing:.08em}.interpretation-card{text-align:center;padding-top:34px;padding-bottom:34px}.section-head.centered{justify-content:center}.section-head.centered p{margin-bottom:16px}.reading-btn{min-width:180px}.interpretation-result{max-width:760px;margin:0 auto;text-align:left;background:#fff9ef;border:1px solid #ead8bc;border-radius:18px;padding:22px}.reading-result-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}.reading-result-head>span{font-size:11px;color:#8c7f70}.fortune{display:grid;place-items:center;width:45px;height:45px;border-radius:50%;color:white;font-family:"Noto Serif TC",serif;font-size:20px}.fortune.good{background:var(--green)}.fortune.bad{background:var(--red)}.interpretation-result p{margin:4px 0 8px;line-height:1.85}.interpretation-result>small{color:#95897a;font-size:10px}.error{color:#b14d3a;font-size:13px;margin-top:12px}footer{display:flex;justify-content:space-between;color:#9b9184;font-size:10px;padding:18px 8px 0}@media(max-width:760px){.app-shell{width:min(100% - 20px,1120px);padding-top:24px}.hero{align-items:flex-start;flex-direction:column}.form-grid,.method-switch,.hex-headings{grid-template-columns:1fr}.time-field{grid-template-columns:1fr}.time-field input[type=datetime-local],.rule-note{grid-column:auto}.manual-line{grid-template-columns:68px 128px 1fr;gap:8px}.manual-line .line-glyph{transform:scale(.72);transform-origin:left center;width:115px}.question-summary{align-items:flex-start;flex-direction:column}.pillars{grid-template-columns:1fr 1fr}.calendar-main{gap:12px}.tz-badge{white-space:nowrap}.coins{gap:12px}.coin{width:84px}.coin-result{flex-wrap:wrap}.stepper{font-size:10px;gap:5px}.stepper i{width:16px}.stepper span b{width:19px;height:19px}.coin-history>div{grid-template-columns:78px 125px 1fr}.chart-row{min-width:920px}.original-line,.changed-line{font-size:16px}.original-line strong,.changed-line strong{font-size:16px}.original-line b,.changed-line b{font-size:17px}.fushen small{font-size:13px}.beast{font-size:18px}.actions{flex-wrap:wrap}.actions button{flex:1 1 auto}footer{flex-direction:column;gap:4px;text-align:center}}

/* v0.2.3 — responsive layout + compact typography */
.app-shell{width:min(1080px,calc(100% - 36px));padding-top:36px}
.hero h1{font-size:clamp(36px,5vw,58px)}
.section-title h2,.section-head h2{font-size:24px}
.question-summary h2{font-size:23px}
.calendar-main h2{font-size:20px}
.pillars strong{font-size:22px}
.hex-headings h2{font-size:30px}
.hex-headings p{font-size:13px}
.chart-row{min-width:0;grid-template-columns:78px 145px 205px 48px 190px 205px;gap:10px;min-height:66px}
.chart-labels{font-size:12px;min-height:38px}
.beast{font-size:17px}
.fushen small{font-size:12px}
.original-line,.changed-line{font-size:15px;gap:6px}
.original-line strong,.changed-line strong{font-size:15px}
.original-line b,.changed-line b{font-size:16px}
.original-line small,.changed-line small{font-size:12px}
.shi-ying{font-size:20px}
.void-badge{padding:2px 7px;font-size:10px}
.chart-row .line-glyph{width:180px}

@media (max-width:1024px){
  .app-shell{width:min(100% - 28px,980px);padding-top:28px}
  .card{padding:24px;border-radius:18px}
  .hero{padding-bottom:22px}
  .hero h1{font-size:clamp(34px,5vw,50px)}
  .chart-row{grid-template-columns:68px 128px 178px 42px 168px 178px;gap:8px}
  .chart-row .line-glyph{width:160px}
  .yang-line,.yin-line{width:104px}
  .yin-line b{width:44px}
  .original-line,.changed-line{font-size:14px}
  .original-line strong,.changed-line strong{font-size:14px}
  .original-line b,.changed-line b{font-size:15px}
  .beast{font-size:16px}
}

@media (max-width:820px){
  .app-shell{width:min(100% - 22px,760px);padding:24px 0 52px}
  .hero{align-items:flex-start;flex-direction:column;gap:18px}
  .stepper{width:100%;justify-content:space-between}
  .stepper i{flex:1;max-width:70px}
  .form-grid{grid-template-columns:1fr}
  .time-field{grid-template-columns:1fr 1fr}
  .method-switch{grid-template-columns:1fr 1fr}
  .question-summary{align-items:flex-start;flex-direction:column;gap:14px}
  .calendar-main{gap:12px}
  .pillars{grid-template-columns:repeat(2,1fr)}
  .hex-headings{gap:14px}
  .hex-headings h2{font-size:27px}

  /* 卦象在平板與手機改為逐爻卡片，避免橫向表格 */
  .chart-wrap{overflow:visible}
  .chart-labels{display:none}
  .chart-row:not(.chart-labels){
    min-width:0;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px 14px;
    min-height:0;
    padding:14px 16px;
    margin-bottom:10px;
    border:1px solid #e9dfd2;
    border-radius:14px;
    background:#fffdf9;
  }
  .chart-row.moving-row{background:#fff8ec;border-color:#e8d5b6}
  .chart-row [data-label]{min-width:0}
  .chart-row [data-label]::before{
    content:attr(data-label);
    display:block;
    margin-bottom:5px;
    color:#9a9083;
    font-size:10px;
    line-height:1.2;
    font-weight:850;
    letter-spacing:.04em;
  }
  .beast,.fushen,.shi-ying,.glyph-cell{display:block}
  .beast{font-size:16px}
  .fushen small{font-size:12px}
  .original-line,.changed-line{
    grid-column:1/-1;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:6px 8px;
  }
  .original-line::before,.changed-line::before{flex-basis:100%}
  .original-line strong,.changed-line strong{font-size:15px}
  .original-line b,.changed-line b{font-size:16px}
  .original-line small,.changed-line small{font-size:12px}
  .shi-ying{font-size:18px}
  .glyph-cell .line-glyph{width:150px;max-width:100%}
  .glyph-cell .yang-line,.glyph-cell .yin-line{width:102px}
  .glyph-cell .yin-line b{width:43px}
}

@media (max-width:640px){
  .app-shell{width:calc(100% - 16px);padding-top:18px}
  .card{padding:18px;border-radius:16px;margin-bottom:12px}
  .hero{padding:0 2px 18px}
  .hero h1{font-size:36px;margin-top:3px}
  .hero p{font-size:12px}
  .eyebrow{font-size:10px}
  .stepper{font-size:10px}
  .stepper i{max-width:38px}
  .section-title h2,.section-head h2{font-size:21px}
  .section-title p,.section-head p{font-size:12px;margin-bottom:18px}
  textarea{min-height:118px}
  .time-field,.method-switch{grid-template-columns:1fr}
  .time-field input[type=datetime-local],.rule-note{grid-column:auto}
  .method-switch button{padding:14px}
  .method-switch button strong{font-size:16px}
  .method-icon{width:40px;height:40px}

  .notice{align-items:flex-start;font-size:12px;padding:11px 12px}
  .stack-legend{font-size:10px}
  .stack-legend b{font-size:12px}
  .manual-line{grid-template-columns:70px minmax(0,1fr);gap:8px 10px;padding:10px 0}
  .manual-line .glyph-area{grid-column:1/-1;padding-left:80px}
  .manual-line .line-glyph{transform:none;width:150px}
  .line-name{font-size:13px}
  .line-select{min-width:0}

  .coins{gap:8px;margin:22px 0 18px}
  .coin{width:min(28vw,86px)}
  .coin-face-label{font-size:10px;padding:2px 8px;bottom:-3px}
  .coin-progress>strong{font-size:32px}
  .coin-result{gap:8px;font-size:12px}
  .coin-result .line-glyph{transform:scale(.75);width:118px}
  .coin-history>div{grid-template-columns:70px minmax(0,1fr);gap:6px 8px;padding:8px 0}
  .coin-history>div>strong{font-size:12px}
  .coin-history .line-glyph{grid-column:1/-1;margin-left:78px;transform:none;width:145px}

  .calendar-main{flex-direction:column}
  .tz-badge{align-self:flex-start}
  .pillars{grid-template-columns:repeat(2,1fr)}
  .pillars>div{padding:13px 10px}
  .pillars strong{font-size:20px}
  .question-summary h2{font-size:20px;line-height:1.45}
  .hex-headings{grid-template-columns:1fr 1fr}
  .hex-headings h2{font-size:24px}
  .hex-headings p{font-size:11px}

  .chart-row:not(.chart-labels){padding:12px;gap:9px 12px}
  .chart-row [data-label]::before{font-size:9px}
  .original-line strong,.changed-line strong{font-size:14px}
  .original-line b,.changed-line b{font-size:15px}
  .original-line small,.changed-line small{font-size:11px}
  .beast{font-size:15px}
  .shi-ying{font-size:17px}
  .void-badge{font-size:9px;padding:2px 6px}
  .glyph-cell .line-glyph{width:138px}
  .glyph-cell .yang-line,.glyph-cell .yin-line{width:92px}
  .glyph-cell .yin-line b{width:39px}
  .moving-mark{font-size:18px}

  .actions{gap:8px;margin:14px 0}
  .actions button{flex:1 1 100%;width:100%}
  .primary,.secondary,.text-btn{padding:11px 16px;font-size:13px}
  .interpretation-card{padding-top:24px;padding-bottom:24px}
  .interpretation-result{padding:17px}
  footer{font-size:9px;padding-top:12px}
}

@media (max-width:420px){
  .app-shell{width:calc(100% - 12px)}
  .card{padding:15px}
  .hero h1{font-size:32px}
  .stepper span{gap:4px}
  .stepper i{max-width:20px}
  .radio-card{padding:12px}
  .coins{gap:5px}
  .coin{width:min(29vw,78px)}
  .hex-headings{gap:10px}
  .hex-headings h2{font-size:21px}
  .hex-headings p{font-size:10px}
  .chart-row:not(.chart-labels){grid-template-columns:84px minmax(0,1fr)}
  .original-line,.changed-line{grid-column:1/-1}
  .glyph-cell .line-glyph{width:128px}
  .glyph-cell .yang-line,.glyph-cell .yin-line{width:86px}
  .glyph-cell .yin-line b{width:36px}
  .manual-line .glyph-area{padding-left:0;display:flex;justify-content:center}
  .coin-history .line-glyph{margin-left:0;justify-self:center}
}

/* v0.2.4：手機版改為整體表格排盤，參考傳統六爻 APP 版面 */
.mobile-chart{display:none}

@media (max-width:820px){
  .desktop-chart{display:none!important}
  .mobile-chart{
    display:block;
    width:100%;
    overflow:hidden;
    border:1px solid #d9d4cc;
    background:#fff;
  }
  .result-card{padding-left:14px;padding-right:14px}
  .mobile-chart-row{
    display:grid;
    grid-template-columns:.78fr .78fr .82fr .82fr .94fr .88fr .88fr .82fr;
    min-height:64px;
    border-bottom:1px solid #dedbd5;
  }
  .mobile-chart-row:last-child{border-bottom:0}
  .mobile-chart-row>span{
    min-width:0;
    padding:6px 3px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    border-right:1px solid #e0ddd7;
    line-height:1.18;
    word-break:keep-all;
  }
  .mobile-chart-row>span:last-child{border-right:0}
  .mobile-chart-head{
    min-height:38px;
    color:#26211b;
    font-size:11px;
    font-weight:850;
    border-bottom:2px solid #2e2924;
    background:#fbfaf8;
  }
  .mobile-chart-head>span{padding:6px 2px}
  .mobile-chart-row.moving-row{background:#fffaf1}

  .m-fushen,.m-najia,.m-change{
    flex-direction:column;
    gap:1px;
    position:relative;
  }
  .m-fushen b,.m-najia b,.m-change b{
    font-size:17px;
    font-weight:800;
    line-height:1;
  }
  .m-fushen small,.m-najia small,.m-change small{
    font-size:11px;
    color:#74695c;
    font-weight:700;
  }
  .m-fushen-relative,.m-relative,.m-change-relative{
    font-size:14px;
    font-weight:750;
  }
  .m-beast{font-size:14px;font-weight:850;color:#755b39}
  .m-fushen i,.m-najia i,.m-change i{
    position:absolute;
    right:1px;
    bottom:2px;
    display:grid;
    place-items:center;
    width:17px;
    height:17px;
    border-radius:2px;
    background:#f0d95a;
    color:#7a6532;
    font-size:10px;
    line-height:1;
    font-style:normal;
    font-weight:900;
  }
  .m-glyph{padding-left:1px!important;padding-right:1px!important}
  .mobile-line-glyph{
    width:100%;
    min-height:48px;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .mobile-line-glyph .mobile-yang{
    display:block;
    width:82%;
    height:7px;
    border-radius:1px;
    background:#171512;
  }
  .mobile-line-glyph .mobile-yin{
    width:82%;
    display:flex;
    justify-content:space-between;
  }
  .mobile-line-glyph .mobile-yin b{
    display:block;
    width:42%;
    height:7px;
    border-radius:1px;
    background:#171512;
  }
  .mobile-line-glyph em{
    position:absolute;
    right:1px;
    top:1px;
    color:#df251b;
    font-size:22px;
    line-height:1;
    font-style:normal;
    font-weight:900;
  }
  .mobile-line-glyph small{
    position:absolute;
    left:50%;
    bottom:0;
    transform:translateX(-50%);
    color:#7b3db7;
    font-size:14px;
    line-height:1;
    font-weight:900;
  }
}

@media (max-width:640px){
  .result-card{padding-left:10px;padding-right:10px}
  .mobile-chart-row{
    grid-template-columns:.7fr .75fr .78fr .78fr .9fr .82fr .82fr .75fr;
    min-height:60px;
  }
  .mobile-chart-head{font-size:10px;min-height:35px}
  .m-fushen b,.m-najia b,.m-change b{font-size:16px}
  .m-fushen small,.m-najia small,.m-change small{font-size:10px}
  .m-fushen-relative,.m-relative,.m-change-relative{font-size:12px}
  .m-beast{font-size:12px}
  .mobile-line-glyph .mobile-yang,.mobile-line-glyph .mobile-yin{width:78%}
  .mobile-line-glyph .mobile-yang,.mobile-line-glyph .mobile-yin b{height:6px}
  .mobile-line-glyph em{font-size:19px}
  .mobile-line-glyph small{font-size:13px}
}

@media (max-width:420px){
  .result-card{padding-left:7px;padding-right:7px}
  .mobile-chart-row{
    grid-template-columns:.68fr .7fr .74fr .74fr .88fr .8fr .8fr .72fr;
    min-height:57px;
  }
  .mobile-chart-row>span{padding-left:1px;padding-right:1px}
  .mobile-chart-head{font-size:9px;letter-spacing:-.02em}
  .m-fushen b,.m-najia b,.m-change b{font-size:15px}
  .m-fushen small,.m-najia small,.m-change small{font-size:9px}
  .m-fushen-relative,.m-relative,.m-change-relative,.m-beast{font-size:11px}
  .mobile-line-glyph .mobile-yang,.mobile-line-glyph .mobile-yin{width:75%}
  .mobile-line-glyph em{right:0;font-size:18px}
  .mobile-line-glyph small{font-size:12px}
  .m-fushen i,.m-fushen i,.m-najia i,.m-change i{width:15px;height:15px;font-size:9px;right:0;bottom:1px}
}

/* v0.2.5：納支五行同字級、五行配色；四柱地支依五行著色 */
.element-wood{color:#2f7d32!important}
.element-fire{color:#d83228!important}
.element-earth{color:#9a5b24!important}
.element-metal{color:#e47b16!important}
.element-water{color:#183b8f!important}

.pillar-value{display:inline-flex;align-items:baseline;justify-content:center;gap:0}
.pillar-value i{font-style:normal;font-family:inherit;font-size:inherit;font-weight:inherit;letter-spacing:inherit}
.pillar-stem{color:#2a241d}

.najia-value{display:inline-flex;align-items:center;gap:2px;font-size:18px;font-weight:800;line-height:1}
.najia-value b,.najia-value small{font-size:inherit!important;font-weight:inherit!important;color:inherit!important;line-height:inherit}
.fushen-branch{font-style:normal;font-weight:800}

@media (max-width:820px){
  .m-fushen,.m-najia,.m-change{gap:1px}
  .m-fushen b,.m-fushen small,.m-najia b,.m-najia small,.m-change b,.m-change small{
    font-size:16px!important;
    font-weight:800!important;
    color:inherit!important;
    line-height:1!important;
  }
}
@media (max-width:640px){
  .m-fushen b,.m-fushen small,.m-najia b,.m-najia small,.m-change b,.m-change small{font-size:15px!important}
}
@media (max-width:420px){
  .m-fushen b,.m-fushen small,.m-najia b,.m-najia small,.m-change b,.m-change small{font-size:14px!important}
}

/* v0.2.6：伏神若落入日空亡，同步標示空亡 */
.fushen .void-badge{margin-left:5px;vertical-align:middle}

/* v0.2.7：伏神欄位與其他六親／納支欄一致，不再顯示「伏」字 */
.fushen{display:flex;flex-direction:column;gap:4px}
.fushen-item{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.fushen-item>strong{font-size:15px;color:#2a241d}
.fushen-item .najia-value{font-size:16px}
.fushen-item .void-badge{margin-left:0}

/* 聯繫表單與社群連結 */
.connect-panel{margin:24px 2px 6px;display:flex;flex-direction:column;align-items:center;gap:14px}
.detail-contact{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:260px;padding:14px 26px;border-radius:999px;background:#8d642f;color:#fff;text-decoration:none;font-weight:900;box-shadow:0 10px 24px rgba(91,63,30,.18);transition:.18s}
.detail-contact:hover{transform:translateY(-1px);background:#7b5527;box-shadow:0 12px 28px rgba(91,63,30,.22)}
.detail-contact span{font-size:18px;line-height:1}
.social-links{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.social-link{display:inline-flex;align-items:center;justify-content:center;min-width:112px;padding:9px 18px;border:1px solid #d8cec0;border-radius:999px;background:rgba(255,253,249,.9);color:#4b4034;text-decoration:none;font-size:13px;font-weight:850;transition:.15s}
a.social-link:hover{border-color:#9a6b2f;color:#7f592a;background:#fffaf1}
.social-link.is-disabled{opacity:.45;cursor:not-allowed}

@media(max-width:820px){
  .fushen-item{gap:4px}
  .fushen-item>strong{font-size:13px}
  .fushen-item .najia-value{font-size:14px}
  .connect-panel{margin-top:20px}
}
@media(max-width:640px){
  .detail-contact{width:min(100%,320px);min-width:0;padding:13px 20px}
  .social-links{width:100%}
  .social-link{flex:1 1 120px;max-width:180px}
}


/* v0.3.1 — branding, icon, share image metadata, AI warning */
.brand-title-row{display:flex;align-items:center;gap:16px}.brand-title-row>div{min-width:0}.hero-icon{width:64px;height:64px;border-radius:16px;object-fit:cover;box-shadow:0 10px 24px rgba(41,33,24,.14)}
.ai-warning{margin-top:14px;padding:13px 14px;border-radius:14px;background:#fff6ea;border:1px solid #ead0ab;color:#7b5731;font-size:13px;line-height:1.8}
@media (max-width:820px){.brand-title-row{align-items:flex-start}.hero-icon{width:54px;height:54px;border-radius:14px}}
@media (max-width:640px){.brand-title-row{gap:12px}.hero-icon{width:46px;height:46px;border-radius:12px}.ai-warning{font-size:12px;line-height:1.75;padding:11px 12px}.hero h1{font-size:30px;line-height:1.25}.hero p{line-height:1.6}}

/* v0.3.3 — question guidance + AI export dialog */
.question-guide{margin-top:10px;padding:14px 16px;border:1px solid #eadfcf;border-radius:14px;background:#fbf7f0;color:#675b4e;font-size:13px;line-height:1.75}
.question-guide strong{display:block;margin-bottom:6px;color:#4c3a27;font-size:13px}
.question-guide ol{margin:0;padding-left:1.45em}.question-guide li+li{margin-top:4px}
.export-ai-card{text-align:center;padding-top:24px;padding-bottom:22px}.export-ai-button{min-width:210px;font-size:14px}.export-ai-card>p{max-width:760px;margin:12px auto 0;color:#827667;font-size:12px;line-height:1.75}
.export-modal-backdrop{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:24px;background:rgba(28,22,16,.62);backdrop-filter:blur(6px)}
.export-modal{width:min(860px,100%);max-height:min(88vh,900px);display:flex;flex-direction:column;background:#fffdf9;border:1px solid rgba(116,91,56,.18);border-radius:22px;box-shadow:0 28px 90px rgba(24,17,10,.3);padding:24px}
.export-modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.export-modal-head h2{margin:5px 0 0;font-size:26px}.modal-close{width:38px;height:38px;display:grid;place-items:center;flex:0 0 auto;border:1px solid #ddd2c4;border-radius:50%;background:#fff;color:#665747;font-size:25px;line-height:1;cursor:pointer}
.export-modal-note{margin:14px 0 12px;color:#817568;font-size:12px;line-height:1.7}.export-output{width:100%;min-height:420px;flex:1 1 auto;resize:none;border:1px solid #d8cec0;border-radius:14px;background:#faf8f4;color:#2c251d;padding:16px;font-family:"Noto Sans Mono CJK TC","Microsoft JhengHei",ui-monospace,SFMono-Regular,Consolas,monospace;font-size:13px;line-height:1.75;white-space:pre-wrap;outline:none}.export-output:focus{border-color:#aa7a39;box-shadow:0 0 0 3px rgba(170,122,57,.1)}
.export-modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:14px}.export-modal-actions button{min-width:120px}
@media(max-width:640px){.question-guide{padding:12px 13px;font-size:12px}.question-guide strong{font-size:12px}.export-ai-card{padding-top:18px;padding-bottom:18px}.export-ai-button{width:100%;min-width:0}.export-ai-card>p{font-size:11px}.export-modal-backdrop{padding:10px}.export-modal{max-height:94vh;padding:16px;border-radius:16px}.export-modal-head h2{font-size:21px}.modal-close{width:34px;height:34px}.export-modal-note{font-size:11px}.export-output{min-height:55vh;padding:12px;font-size:12px;line-height:1.65}.export-modal-actions{display:grid;grid-template-columns:1fr 1fr}.export-modal-actions button{width:100%;min-width:0}}
