#useSmartRecommendation:checked + div > div:first-child {
 background-color: #10B981 !important;
}
#useSmartRecommendation:checked + div > div:last-child {
 transform: translateX(16px) !important;
 background-color: white !important;
}
#useSmartRecommendation:checked + div + span {
 color: #059669 !important;
 font-weight: 600 !important;
}
* {
 box-sizing: border-box;
}

/* 隱藏 date input 原生的日曆圖示 */
input[type="date"]::-webkit-calendar-picker-indicator {
 opacity: 0;
 cursor: pointer;
 position: absolute;
 right: 0;
 width: 40px;
 height: 100%;
}

/* Firefox 的日曆圖示 */
input[type="date"]::-moz-calendar-picker-indicator {
 opacity: 0;
}

/* 隱藏 select 原生的下拉箭頭 */
select::-ms-expand {
 display: none;
}

/* 確保 select 使用自訂箭頭 */
select {
 -webkit-appearance: none;
 -moz-appearance: none;
 appearance: none;
 background-image: none;
}

html {
 scroll-behavior: smooth;
}
body {
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}
#pageLoader {
 transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}
#pageLoader.hidden {
 opacity: 0;
 visibility: hidden;
}
@layer utilities {
 .form-group {
 @apply mb-6;
 }
 .form-label {
 @apply flex items-center text-sm font-semibold text-gray-700 mb-3;
 }
 .required {
 @apply text-red-500 ml-1;
 }
 .form-input, .form-select {
 @apply w-full px-4 py-3 border border-gray-300 rounded-xl bg-white/80 backdrop-blur-sm
 transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-primary/20 
 focus:border-primary hover:border-gray-400;
 }
 .form-input:focus, .form-select:focus {
 @apply bg-white shadow-md transform scale-[1.02];
 }
 .form-hint {
 @apply text-xs text-gray-500 mt-2 leading-relaxed;
 }
 .radio-label {
 @apply inline-flex items-center cursor-pointer px-4 py-2 rounded-lg 
 transition-all duration-300 hover:bg-gray-50;
 }
 .radio-input {
 @apply w-4 h-4 text-primary border-2 border-gray-300 focus:ring-primary/20 
 focus:ring-2 transition-all duration-300;
 }
 .radio-text {
 @apply ml-3 text-sm font-medium text-gray-700;
 }
 .submit-button {
 @apply w-full bg-gradient-to-r from-amber-600 via-orange-600 to-red-600 
 hover:from-amber-700 hover:via-orange-700 hover:to-red-700 
 text-white font-bold py-4 px-8 rounded-xl shadow-lg 
 transition-all duration-300 transform hover:scale-[1.02] 
 hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-orange-500/50 
 active:scale-[0.98];
 }
 .result-card {
 @apply bg-white rounded-3xl p-8 shadow-xl border border-gray-100 
 backdrop-blur-sm bg-white/95 transition-all duration-300 
 hover:shadow-2xl hover:-translate-y-1;
 }
 .result-card-header {
 @apply flex items-center justify-between mb-6 pb-4 border-b border-gray-100;
 }
 .result-card-title {
 @apply text-xl font-bold text-gray-800 flex items-center;
 }
 .result-card-badge {
 @apply text-xs font-medium px-3 py-1 bg-gray-100 text-gray-600 rounded-full;
 }
 .result-icon {
 @apply w-10 h-10 rounded-xl flex items-center justify-center mr-4 shadow-md;
 }
 .info-item {
 @apply p-4 bg-gray-50 rounded-xl border border-gray-100;
 }
 .info-label {
 @apply text-xs font-medium text-gray-500 uppercase tracking-wide mb-1;
 }
 .info-value {
 @apply text-lg font-bold;
 }
 .info-description {
 @apply text-gray-700 leading-relaxed p-4 bg-gray-50 rounded-xl border border-gray-100;
 }
 .priority-section {
 @apply mt-6 p-4 bg-gradient-to-r from-amber-50 to-orange-50 rounded-xl border border-amber-200;
 }
 .priority-title {
 @apply font-semibold text-purple-700 mb-3 text-sm flex items-center;
 }
 .priority-list {
 @apply flex flex-wrap gap-2;
 }
@layer utilities {
 .content-auto {
 content-visibility: auto;
 }
 .card-shadow {
 box-shadow: 0 10px 30px -5px rgba(22, 93, 255, 0.1);
 }
 .input-focus {
 @apply focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none;
 }
 .animate-fade-in {
 animation: fadeIn 0.5s ease-in-out;
 }
 .star-tag {
 @apply px-3 py-1 rounded-full text-sm transition-all duration-300 
 hover:shadow-md hover:-translate-y-0.5 cursor-pointer;
 }
 .triad-highlight {
 @apply bg-primary/5 border-l-4 border-primary p-3 rounded-r-md my-2;
 }
 .segment-box {
 @apply px-4 py-3 rounded-lg border transition-all duration-300 
 hover:shadow-md relative overflow-hidden;
 }
 .flow-arrow {
 @apply text-gray-400 mx-2 flex items-center justify-center;
 }
 .flow-arrow i {
 animation: pulse 2s infinite;
 }
 .tag {
 @apply inline-block px-2 py-0.5 text-xs rounded-full bg-gray-100 text-gray-700 mr-1 mb-1;
 }
 .recommendation-tag {
 @apply inline-block px-2 py-0.5 text-xs rounded-full mr-1 mb-1;
 }
 .match-indicator {
 @apply text-xs text-gray-500 mt-2 space-y-1;
 }
 .magnet-box {
 @apply px-4 py-3 rounded-lg min-w-[160px] text-center transition-all duration-300 border h-24 flex flex-col justify-center;
 }
 .magnet-container {
 @apply flex flex-col items-center justify-start min-w-max;
 }
 .magnet-node, .explanation-card {
 @apply mb-4 mt-0;
 }
 .magnet-relation-container {
 @apply flex flex-col items-center justify-center w-16 mb-0 mt-0 h-16 flex-shrink-0;
 }
 .magnet-relation-line {
 @apply hidden;
 }
 .magnet-relation-arrow {
 @apply my-1;
 }
 .magnet-relation-text {
 @apply text-xs font-medium;
 }
 .element-relation {
 @apply inline-flex items-center px-2 py-1 rounded-full text-xs font-medium;
 }
 .relation-sheng {
 @apply bg-green-100 text-green-700;
 }
 .relation-ke {
 @apply bg-red-100 text-red-700;
 }
 .relation-ping {
 @apply bg-gray-100 text-gray-700;
 }
 .relation-none {
 @apply bg-gray-100 text-gray-500;
 }
 .magnet-lucky {
 @apply bg-lucky/10 border-lucky/30 text-lucky;
 }
 .magnet-unlucky {
 @apply bg-unlucky/10 border-unlucky/30 text-unlucky;
 }
 .energy-flow-path {
 @apply my-6 relative;
 }
 .energy-summary {
 @apply p-4 rounded-lg mt-4;
 }
 .full-number-sequence {
 @apply text-xs opacity-80 mb-1;
 }
 .highlighted-pair {
 font-weight: bold;
 font-size: 1.1em;
 }
 .level-badge {
 @apply inline-block px-1.5 py-0.5 text-[10px] rounded font-medium ml-1;
 }
 .level-1 {
 @apply bg-red-100 text-red-700;
 }
 .level-2 {
 @apply bg-orange-100 text-orange-700;
 }
 .level-3 {
 @apply bg-yellow-100 text-yellow-700;
 }
 .level-4 {
 @apply bg-green-100 text-green-700;
 }
 .element-badge {
 @apply inline-block px-1.5 py-0.5 text-[10px] rounded font-medium;
 }
 .connection-line {
 position: absolute;
 z-index: -1;
 pointer-events: none;
 }
 .horizontal-scroll {
 overflow-x: auto;
 -webkit-overflow-scrolling: touch; 
 scrollbar-width: thin; 
 }
 .horizontal-scroll::-webkit-scrollbar {
 height: 6px;
 }
 .horizontal-scroll::-webkit-scrollbar-track {
 background: #f1f1f1;
 border-radius: 10px;
 }
 .horizontal-scroll::-webkit-scrollbar-thumb {
 background: #c1c1c1;
 border-radius: 10px;
 }
 .horizontal-scroll::-webkit-scrollbar-thumb:hover {
 background: #a1a1a1;
 }
 .flex.min-w-max.items-center.justify-center.mb-4 {
 align-items: flex-start !important;
 gap: 0;
 }
 .scroll-indicator {
 @apply text-center text-xs text-gray-400 mt-2 mb-4;
 }
 .license-section {
 @apply mb-4 p-3 rounded-lg bg-gray-50;
 }
 .license-section-title {
 @apply font-medium text-gray-800 mb-2 flex items-center;
 }
 .license-section-title i {
 @apply mr-2 text-primary;
 }
 .gradient-border {
 position: relative;
 border-radius: 0.5rem;
 z-index: 0;
 }
 .gradient-border::before {
 content: "";
 position: absolute;
 inset: -2px;
 z-index: -1;
 border-radius: 0.6rem;
 background: linear-gradient(90deg, var(--tw-gradient-stops));
 opacity: 0;
 transition: opacity 0.3s ease;
 }
 .gradient-border:hover::before {
 opacity: 1;
 }
}
@keyframes fadeIn {
 from { 
 opacity: 0; 
 transform: translateY(10px); 
 }
 to { 
 opacity: 1; 
 transform: translateY(0); 
 }
}
@keyframes pulse {
 0% { transform: scale(1); }
 50% { transform: scale(1.1); }
 100% { transform: scale(1); }
}
@keyframes flowAnimation {
 0% { background-position: 0% 50%; }
 50% { background-position: 100% 50%; }
 100% { background-position: 0% 50%; }
}
@keyframes flowAlongTrack {
 0% { 
   left: 0%;
   opacity: 0;
 }
 10% {
   opacity: 1;
 }
 90% {
   opacity: 1;
 }
 100% { 
   left: 100%;
   opacity: 0;
 }
}
@keyframes pulseArrow {
 0%, 100% {
   opacity: 1;
   transform: translateX(0);
 }
 50% {
   opacity: 0.6;
   transform: translateX(4px);
 }
}
@keyframes fadeInDelay {
 0% {
   opacity: 0;
   transform: translateY(5px);
 }
 100% {
   opacity: 1;
   transform: translateY(0);
 }
}
.animate-flow-along-track {
 animation: flowAlongTrack 2s ease-in-out infinite;
}
.animate-flow-along-track-delayed {
 animation: flowAlongTrack 2s ease-in-out infinite;
 animation-delay: 1s;
}
.animate-pulse-arrow {
 animation: pulseArrow 1.5s ease-in-out infinite;
}
.animate-fade-in-delay {
 animation: fadeInDelay 0.6s ease-out 0.3s both;
}
.level-indicator {
 display: inline-block;
 width: 4px;
 height: 4px;
 border-radius: 50%;
 margin: 0 6px;
}
.text-lucky { color: #10b981; }
.text-unlucky { color: #ef4444; }
.primary { color: #3b82f6; }
.secondary { color: #8b5cf6; }
.accent { color: #f59e0b; }
.tianyi { color: #10b981; }
.shengqi { color: #3b82f6; }
.yannian { color: #8b5cf6; }
.fugui { color: #6b7280; }
.jueming { color: #ef4444; }
.wugui { color: #f59e0b; }
.liusha { color: #ec4899; }
.huohai { color: #dc2626; }
.magnet-lucky { 
 border-color: #10b981; 
 background-color: #d1fae5; 
 color: #065f46; 
}
.magnet-unlucky { 
 border-color: #ef4444; 
 background-color: #fee2e2; 
 color: #991b1b; 
}
.explanation-card { 
 transition: all 0.3s ease; 
}
.explanation-card:hover { 
 transform: translateY(-2px); 
 box-shadow: 0 4px 12px rgba(0,0,0,0.1); 
}
.scroll-indicator { 
 text-align: center; 
 color: #6b7280; 
 font-size: 0.875rem; 
 margin-bottom: 1rem; 
}
.horizontal-scroll { 
 overflow-x: auto; 
 scrollbar-width: thin; 
}
.horizontal-scroll::-webkit-scrollbar { 
 height: 6px; 
}
.horizontal-scroll::-webkit-scrollbar-track { 
 background: #f1f5f9; 
}
.horizontal-scroll::-webkit-scrollbar-thumb { 
 background: #cbd5e1; 
 border-radius: 3px; 
}
.triad-highlight { 
 border: 2px solid #3b82f6; 
 background: #eff6ff; 
 padding: 1rem; 
 margin: 0.5rem 0; 
 border-radius: 0.5rem; 
}
.segment-box { 
 border: 2px solid; 
 padding: 1rem; 
 border-radius: 0.5rem; 
 text-align: center; 
 min-width: 120px; 
}
.flow-arrow { 
 display: flex; 
 align-items: center; 
 justify-content: center; 
 margin: 0 0.5rem; 
 color: #6b7280; 
}
.magnet-container { 
 position: relative;
 display: flex;
 flex-direction: column;
 align-items: center;
 min-width: 160px;
 margin: 0;
 flex-shrink: 0;
}
.magnet-box { 
 padding: 0.75rem; 
 border-radius: 0.5rem; 
 text-align: center; 
 min-width: 160px;
 width: 160px;
 height: 96px;
 margin: 0;
 display: flex;
 flex-direction: column;
 justify-content: center;
 flex-shrink: 0;
}
.magnet-relation-container { 
 display: flex; 
 flex-direction: column; 
 align-items: center; 
 justify-content: center;
 width: 64px;
 height: 64px;
 margin: 8px 0;
 flex-shrink: 0;
}
.magnet-relation-arrow { 
 margin-bottom: 0.25rem; 
}
.magnet-relation-text { 
 font-size: 0.75rem; 
 padding: 0.25rem 0.5rem; 
 border-radius: 0.25rem; 
}
.element-relation { 
 padding: 0.25rem 0.5rem; 
 border-radius: 0.25rem; 
 font-size: 0.75rem; 
}
.relation-sheng { 
 background-color: #dcfce7; 
 color: #166534; 
}
.relation-ke { 
 background-color: #fee2e2; 
 color: #991b1b; 
}
.relation-ping { 
 background-color: #f3f4f6; 
 color: #374151; 
}
.level-badge { 
 font-size: 0.6rem; 
 padding: 0.1rem 0.25rem; 
 border-radius: 0.2rem; 
 background-color: rgba(255,255,255,0.8); 
}
.level-1 { 
 background-color: #ef4444; 
 color: white; 
}
.level-2 { 
 background-color: #f97316; 
 color: white; 
}
.level-3 { 
 background-color: #eab308; 
 color: white; 
}
.level-4 { 
 background-color: #22c55e; 
 color: white; 
}
.recommendation-tag { 
 padding: 0.25rem 0.5rem; 
 border-radius: 0.25rem; 
 font-size: 0.75rem; 
 margin-right: 0.5rem; 
}
.star-tag { 
 padding: 0.25rem 0.5rem; 
 border-radius: 0.25rem; 
 font-size: 0.875rem; 
 margin-right: 0.5rem; 
 margin-bottom: 0.25rem; 
 display: inline-block; 
}
.energy-summary { 
 padding: 1rem; 
 border-radius: 0.5rem; 
 margin-top: 1rem; 
}

/* 全局文字大小和行距優化 - 適用所有螢幕 */
#resultContent p {
 line-height: 1.7 !important;
}

#resultContent .text-sm {
 font-size: 0.9375rem !important;
}

#resultContent .text-base {
 font-size: 1.0625rem !important;
}

/* CTA 卡片標籤文字不換行 - 適用所有螢幕 */
a.group span.px-3.py-1,
span.px-3.py-1.bg-white\/20 {
 white-space: nowrap !important;
}

/* CTA 按鈕文字不換行 - 適用所有螢幕 */
.bg-white.hover\:bg-yellow-50 span,
a.group .flex-shrink-0 span {
 white-space: nowrap !important;
}

/* 平板優化 (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
 /* CTA 卡片響應式優化 */
 a.p-8[href*="yijingcodes.com"] {
 padding: 1.5rem !important;
 }
 
 /* CTA 卡片內容改為垂直排列 + 置中 */
 a.p-8[href*="yijingcodes.com"] .relative.z-10.flex {
 flex-direction: column !important;
 align-items: center !important;
 text-align: center !important;
 gap: 1.5rem !important;
 }
 
 a.p-8[href*="yijingcodes.com"] .flex.items-center.space-x-6 {
 width: 100% !important;
 justify-content: center !important;
 }
 
 a.p-8[href*="yijingcodes.com"] .text-left {
 text-align: center !important;
 }
 
 a.p-8[href*="yijingcodes.com"] h3 {
 font-size: 1.5rem !important;
 text-align: center !important;
 }
 
 a.p-8[href*="yijingcodes.com"] p {
 text-align: center !important;
 }
 
 a.p-8[href*="yijingcodes.com"] .flex.items-center.space-x-4 {
 justify-content: center !important;
 flex-wrap: wrap !important;
 }
 
 a.p-8[href*="yijingcodes.com"] .flex-shrink-0 {
 width: 100% !important;
 display: flex !important;
 justify-content: center !important;
 align-items: center !important;
 }
 
 a.p-8[href*="yijingcodes.com"] .flex-shrink-0 > div {
 width: auto !important;
 margin: 0 auto !important;
 }
}

/* 位置段分析卡片 - 桌面版頂部對齊 */
@media (min-width: 768px) {
 .flex.flex-col.md\:flex-row.items-center.justify-center {
 align-items: flex-start !important;
 }
 
 div.flex.gap-4.w-full.items-center {
 align-items: flex-start !important;
 }
}

@media (max-width: 768px) {
 /* 主容器優化 */
 .container.mx-auto {
 padding-left: 1rem !important;
 padding-right: 1rem !important;
 }
 
 /* 主網格佈局優化 - 手機版改為單列 */
 main.grid.lg\:grid-cols-12 {
 display: block !important;
 }
 
 main.grid.lg\:grid-cols-12 > section {
 width: 100% !important;
 margin-bottom: 2rem !important;
 }
 
 /* Sticky 定位在手機版取消 */
 .sticky.top-8 {
 position: static !important;
 }
 
 /* 表單元素優化 */
 .form-input, .form-select {
 padding: 0.625rem 0.75rem !important;
 font-size: 1rem !important;
 }
 
 /* 手機號碼特殊處理 */
 input[type="tel"]#phone {
 padding-right: 3rem !important;
 }
 
 .form-group {
 margin-bottom: 1rem !important;
 }
 .form-label {
 font-size: 0.875rem !important;
 margin-bottom: 0.5rem !important;
 }
 .radio-label {
 padding: 0.5rem 0.75rem !important;
 }
 .submit-button {
 padding: 0.875rem 1.5rem !important;
 font-size: 1rem !important;
 }
 
 /* 分析結果區域所有 p-8 卡片優化 */
 #resultContent .p-8,
 #resultContent [class*="p-8"] {
 padding: 1rem !important;
 }
 
 /* 特定分析卡片優化 */
 .backdrop-blur-xl.bg-white\/80.p-8,
 .backdrop-blur-xl.bg-white\/90.p-8,
 .relative.backdrop-blur-xl.p-8 {
 padding: 1rem !important;
 }
 
 /* CTA 卡片特殊處理 */
 a.p-8[href*="yijingcodes.com"] {
 padding: 1.5rem !important;
 }
 
 /* 分析結果卡片優化 */
 .result-card {
 padding: 1rem !important;
 }
 .result-card-header {
 margin-bottom: 1rem !important;
 padding-bottom: 0.75rem !important;
 }
 .info-item {
 padding: 0.75rem !important;
 }
 .info-description {
 padding: 0.75rem !important;
 }
 .priority-section {
 padding: 0.75rem !important;
 margin-top: 1rem !important;
 }
 
 /* 磁場分析元素優化 */
 .segment-magnetic-card {
 margin-bottom: 1rem;
 padding: 0.75rem !important;
 }
 
 /* 磁場卡片內部 p-6 padding 優化 */
 .segment-magnetic-card .rounded-2xl.p-6,
 .segment-magnetic-card [class*="rounded-2xl"][class*="p-6"] {
 padding: 1rem !important;
 }
 
 /* Grid 容器確保對齊 - 頂部對齊 */
 .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3 {
 align-items: flex-start !important;
 }
 
 /* 確保所有卡片等高對齊 */
 .segment-magnetic-card > div {
 height: 100%;
 display: flex;
 flex-direction: column;
 }
 
 .segment-flow-node {
 min-width: 4rem;
 padding: 0.5rem !important;
 }
 .segment-tooltip {
 max-width: 250px;
 font-size: 0.75rem;
 }
 .magnet-box {
 min-width: 140px;
 width: 140px;
 height: 88px;
 padding: 0.5rem;
 font-size: 0.875rem;
 }
 .magnet-container {
 min-width: 140px;
 }
 .magnet-relation-container {
 width: 48px;
 height: 48px;
 margin: 4px 0;
 }
 .segment-box {
 padding: 0.75rem;
 }
 .card-shadow {
 box-shadow: 0 5px 15px -3px rgba(22, 93, 255, 0.1);
 }
 
 /* 頂部橫幅優化 */
 .bg-white\/90.backdrop-blur-xl.border.rounded-3xl {
 padding: 1rem !important;
 }
}

/* 小螢幕手機優化 (640px 以下) */
@media (max-width: 640px) {
 /* 主容器優化 */
 .container.mx-auto {
 padding-left: 0.75rem !important;
 padding-right: 0.75rem !important;
 }
 
 /* 表單元素優化 */
 .form-input, .form-select {
 padding: 0.5rem 0.625rem !important;
 font-size: 0.875rem !important;
 }
 .form-group {
 margin-bottom: 0.875rem !important;
 }
 .submit-button {
 padding: 0.75rem 1.25rem !important;
 }
 
 /* 手機號碼輸入框特殊優化 */
 input[type="tel"]#phone {
 font-size: 0.875rem !important;
 letter-spacing: 0.05em !important;
 padding-right: 2.5rem !important;
 }
 
 /* 分析結果區域所有 p-8/p-6 卡片優化 */
 #resultContent .p-8,
 #resultContent .p-6,
 #resultContent [class*="p-8"],
 #resultContent [class*="p-6"] {
 padding: 0.75rem !important;
 }
 
 /* 特定分析卡片優化 */
 .backdrop-blur-xl.bg-white\/80.p-8,
 .backdrop-blur-xl.bg-white\/90.p-8,
 .relative.backdrop-blur-xl.p-8 {
 padding: 0.75rem !important;
 }
 
 /* CTA 卡片進一步縮小 */
 a.p-8[href*="yijingcodes.com"],
 a.p-12[href*="yijingcodes.com"] {
 padding: 1rem !important;
 margin-left: 0 !important;
 margin-right: 0 !important;
 max-width: 100% !important;
 }
 
 /* 移除所有負 margin */
 #resultContent .space-x-6 > :not([hidden]) ~ :not([hidden]),
 .space-x-6 > :not([hidden]) ~ :not([hidden]) {
 margin-left: 0rem !important;
 }
 
 #resultContent .space-x-4 > :not([hidden]) ~ :not([hidden]),
 .space-x-4 > :not([hidden]) ~ :not([hidden]) {
 margin-left: 0.75rem !important;
 }
 
 /* 確保所有內容不超出頁面 */
 #resultContent *,
 a[href*="yijingcodes.com"] * {
 max-width: 100% !important;
 box-sizing: border-box !important;
 }
 
 /* CTA 卡片內容優化 */
 a.p-8[href*="yijingcodes.com"] .flex.items-center.space-x-6 {
 flex-direction: column !important;
 align-items: center !important;
 gap: 1rem !important;
 text-align: center !important;
 }
 
 a.p-8[href*="yijingcodes.com"] .text-left {
 width: 100% !important;
 text-align: center !important;
 }
 
 a.p-8[href*="yijingcodes.com"] h3 {
 font-size: 1.25rem !important;
 text-align: center !important;
 }
 
 a.p-8[href*="yijingcodes.com"] p {
 font-size: 0.875rem !important;
 text-align: center !important;
 }
 
 a.p-8[href*="yijingcodes.com"] .flex.items-center.space-x-4 {
 justify-content: center !important;
 flex-wrap: wrap !important;
 }
 
 a.p-8[href*="yijingcodes.com"] .flex-shrink-0 {
 width: 100% !important;
 display: flex !important;
 justify-content: center !important;
 }
 
 a.p-8[href*="yijingcodes.com"] .flex-shrink-0 > div {
 margin: 0 auto !important;
 }
 
 /* CTA 卡片邊框修復 - 防止移位 */
 a.group.relative.overflow-hidden {
 position: relative !important;
 overflow: hidden !important;
 border-radius: 1.5rem !important;
 }
 
 a.group.relative.overflow-hidden > .absolute.inset-0.rounded-3xl {
 position: absolute !important;
 top: 0 !important;
 right: 0 !important;
 bottom: 0 !important;
 left: 0 !important;
 border-radius: 1.5rem !important;
 }
 
 /* 防止內容溢出 */
 a.group.relative.overflow-hidden > .relative.z-10 {
 position: relative !important;
 z-index: 10 !important;
 }
 
 /* CTA 卡片標籤文字不換行 */
 a.group span.px-3.py-1 {
 white-space: nowrap !important;
 font-size: 0.875rem !important;
 }
 
 /* 標籤容器可橫向滾動 */
 a.group .flex.items-center.space-x-4 {
 overflow-x: auto !important;
 -webkit-overflow-scrolling: touch !important;
 scrollbar-width: none !important;
 }
 
 a.group .flex.items-center.space-x-4::-webkit-scrollbar {
 display: none !important;
 }
 
 /* 內部卡片 padding 也要縮小 */
 #resultContent .p-6 {
 padding: 0.625rem !important;
 }
 
 #resultContent .p-4 {
 padding: 0.5rem !important;
 }
 
 /* 分析結果卡片優化 */
 .result-card {
 padding: 0.75rem !important;
 border-radius: 1rem !important;
 }
 .result-card-title {
 font-size: 1rem !important;
 }
 .result-icon {
 width: 2rem !important;
 height: 2rem !important;
 margin-right: 0.5rem !important;
 }
 .info-item {
 padding: 0.5rem !important;
 }
 .info-value {
 font-size: 1rem !important;
 word-break: break-all !important;
 }
 .info-description {
 padding: 0.5rem !important;
 font-size: 0.875rem !important;
 }
 .priority-section {
 padding: 0.5rem !important;
 }
 
 /* 手機版文字大小優化 - 增加可讀性 */
 #resultContent {
 font-size: 1rem !important;
 }
 
 /* 只針對文字段落增加行距 */
 #resultContent p {
 font-size: 1rem !important;
 line-height: 1.8 !important;
 margin-bottom: 1rem !important;
 }
 
 /* 增加區塊內容間距 */
 #resultContent > div {
 margin-bottom: 1.5rem !important;
 }
 
 #resultContent .space-y-2 > * + * {
 margin-top: 1rem !important;
 }
 
 #resultContent .space-y-3 > * + * {
 margin-top: 1.25rem !important;
 }
 
 #resultContent .space-y-4 > * + * {
 margin-top: 1.5rem !important;
 }
 
 #resultContent .mb-2 {
 margin-bottom: 0.75rem !important;
 }
 
 #resultContent .mb-3 {
 margin-bottom: 1rem !important;
 }
 
 #resultContent .mb-4 {
 margin-bottom: 1.25rem !important;
 }
 
 /* 卡片內部內容間距 */
 #resultContent .bg-white > div,
 #resultContent [class*="bg-gradient"] > div {
 margin-bottom: 0.75rem !important;
 }
 
 /* 長文字內容區域增加行距 */
 #resultContent .text-gray-600,
 #resultContent .text-gray-700,
 #resultContent .text-slate-600,
 #resultContent .text-slate-700 {
 line-height: 1.8 !important;
 }
 
 #resultContent .text-xs {
 font-size: 0.875rem !important;
 }
 
 #resultContent .text-sm {
 font-size: 0.9375rem !important;
 }
 
 #resultContent .text-lg {
 font-size: 1.125rem !important;
 }
 
 #resultContent .text-xl {
 font-size: 1.25rem !important;
 }
 
 #resultContent .text-2xl {
 font-size: 1.5rem !important;
 }
 
 /* Grid 優化 */
 .grid-cols-3 {
 grid-template-columns: repeat(1, minmax(0, 1fr));
 }
 
 /* Grid 容器手機版單列 + 對齊優化 */
 .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3,
 [class*="grid"][class*="md:grid-cols-2"] {
 display: block !important;
 }
 
 .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3 > div,
 [class*="grid"][class*="md:grid-cols-2"] > div {
 margin-bottom: 1rem !important;
 }

 /* 磁場卡片優化 */
 .segment-magnetic-card {
 transform: none !important;
 margin-bottom: 1rem !important;
 }
 .segment-magnetic-card:hover {
 transform: translateY(-2px) !important;
 }
 
 /* 磁場卡片內部 p-6 padding 強制優化 */
 .segment-magnetic-card .rounded-2xl.p-6,
 .segment-magnetic-card [class*="rounded-2xl"][class*="p-6"],
 .backdrop-blur-xl.rounded-2xl.p-6 {
 padding: 0.75rem !important;
 min-height: auto !important;
 }
 
 /* 手機版取消 flex 布局，改為 block */
 .segment-magnetic-card > div,
 .segment-magnetic-card .backdrop-blur-xl {
 display: block !important;
 }
 
 /* 三數成象分析卡片 - 手機版垂直堆疊 */
 .triad-highlight {
 margin-bottom: 1rem !important;
 padding: 0 !important;
 }
 
 .triad-highlight .flex.items-center.justify-between,
 .triad-highlight .flex.items-start.justify-between {
 display: block !important;
 }
 
 .triad-highlight .flex.items-center.justify-between > div,
 .triad-highlight .flex.items-start.justify-between > div {
 width: 100% !important;
 max-width: 100% !important;
 margin-bottom: 1rem !important;
 }
 
 .triad-highlight .flex-1 {
 flex: none !important;
 width: 100% !important;
 }
 
 /* 位置段分析卡片 - 手機版垂直堆疊 (前3位/中3位/後2位) */
 .flex.flex-col.md\:flex-row.items-start.justify-center,
 .flex.flex-col.md\:flex-row.items-center.justify-center {
 display: flex !important;
 flex-direction: column !important;
 align-items: stretch !important;
 }
 
 .flex.flex-col.md\:flex-row.items-start.justify-center > .flex-1,
 .flex.flex-col.md\:flex-row.items-center.justify-center > .flex-1 {
 width: 100% !important;
 max-width: 100% !important;
 margin-bottom: 1rem !important;
 flex: none !important;
 }
 
 .flex.flex-col.md\:flex-row > .flex-1 > div {
 max-width: 100% !important;
 }
 
 /* 隱藏桌面版箭頭 */
 .flex.flex-col.md\:flex-row .hidden.md\:block {
 display: none !important;
 }
 
 /* 頂部橫幅優化 */
 .bg-white\/90.backdrop-blur-xl.border.rounded-3xl {
 padding: 0.75rem !important;
 }
 
 /* 標題文字優化 - 確保單行顯示 */
 h1.text-5xl {
 font-size: 1.75rem !important;
 white-space: nowrap !important;
 }
 
 /* 分析區標題不換行 */
 h3.text-2xl {
 font-size: 1.25rem !important;
 white-space: nowrap !important;
 }
 
 /* 功能特色標籤 - 手機版 2x2 網格平均分配 */
 header .flex.flex-wrap.justify-center.gap-4 {
 display: grid !important;
 grid-template-columns: repeat(2, 1fr) !important;
 gap: 0.75rem !important;
 }
 
 header .flex.flex-wrap.justify-center.gap-4 > div {
 width: 100% !important;
 padding: 0.75rem !important;
 margin: 0 !important;
 }
 
 header .flex.flex-wrap.justify-center.gap-4 > div .flex.items-center.space-x-3 {
 justify-content: center !important;
 }
 
 /* 確保長數字不被遮蓋 */
 .font-mono {
 letter-spacing: 0 !important;
 }
 
 /* 右側圖標預留空間 */
 .relative input + .absolute {
 right: 0.5rem !important;
 }
}

@media print {
 .animate-fade-in,
 .card-shadow,
 .gradient-border {
 animation: none;
 box-shadow: none;
 }
 .bg-gradient-to-br {
 background: white !important;
 }
}
@media (prefers-color-scheme: dark) {
}
@media (prefers-contrast: high) {
 .card-shadow {
 box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.3);
 }
 .border-gray-300 {
 border-color: #000 !important;
 }
}
}
.segment-magnetic-card {
 position: relative;
 cursor: pointer;
 will-change: transform;
 transform-origin: center;
}
.segment-magnetic-card::before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
 border-radius: 1rem;
 opacity: 0;
 transition: opacity 0.3s ease;
}
.segment-magnetic-card:hover::before {
 opacity: 1;
}
@keyframes float {
 0%, 100% { transform: translateY(0px); }
 50% { transform: translateY(-6px); }
}
@keyframes shimmer {
 0% { background-position: -200% 0; }
 100% { background-position: 200% 0; }
}
@keyframes pulse-glow {
 0%, 100% { box-shadow: 0 0 5px rgba(99, 102, 241, 0.3); }
 50% { box-shadow: 0 0 20px rgba(99, 102, 241, 0.6), 0 0 30px rgba(99, 102, 241, 0.4); }
}
.segment-magnetic-card .animate-float {
 animation: float 3s ease-in-out infinite;
}
.segment-magnetic-card:nth-child(even) .animate-float {
 animation-delay: -1.5s;
}
.segment-magnetic-card .h-2 > div {
 background-size: 200% auto;
 animation: shimmer 2s linear infinite;
}
.energy-indicator {
 position: relative;
 overflow: hidden;
}
.energy-indicator::after {
 content: '';
 position: absolute;
 top: 0;
 left: -100%;
 width: 100%;
 height: 100%;
 background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
 animation: sweep 2s ease-in-out infinite;
}
@keyframes sweep {
 0% { left: -100%; }
 50% { left: 100%; }
 100% { left: 100%; }
}
.segment-flow-node {
 position: relative;
}
.segment-flow-node::before {
 content: '';
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: 120%;
 height: 120%;
 background: radial-gradient(circle, rgba(99, 102, 241, 0.1), transparent);
 border-radius: 50%;
 opacity: 0;
 transition: opacity 0.3s ease;
}
.segment-flow-node:hover::before {
 opacity: 1;
}
.segment-tooltip {
 pointer-events: none;
 animation: tooltipFadeIn 0.2s ease-out;
}
@keyframes tooltipFadeIn {
 from { opacity: 0; transform: translateY(5px); }
 to { opacity: 1; transform: translateY(0); }
}
.segment-tooltip::after {
 content: '';
 position: absolute;
 top: 100%;
 left: 50%;
 transform: translateX(-50%);
 border: 6px solid transparent;
 border-top-color: rgba(0, 0, 0, 0.9);
}
.segment-modal {
 backdrop-filter: blur(10px);
 animation: modalFadeIn 0.3s ease-out;
}
@keyframes modalFadeIn {
 from { opacity: 0; }
 to { opacity: 1; }
}
.segment-modal > div {
 animation: modalSlideIn 0.3s ease-out;
}
@keyframes modalSlideIn {
 from { 
 opacity: 0; 
 transform: scale(0.9) translateY(-20px); 
 }
 to { 
 opacity: 1; 
 transform: scale(1) translateY(0); 
 }
}
.magnetic-field-tag {
 position: relative;
 overflow: hidden;
 transition: all 0.3s ease;
}
.magnetic-field-tag::before {
 content: '';
 position: absolute;
 top: 0;
 left: -100%;
 width: 100%;
 height: 100%;
 background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
 transition: left 0.5s ease;
}
.magnetic-field-tag:hover::before {
 left: 100%;
}
.energy-excellent {
 box-shadow: 0 0 30px rgba(16, 185, 129, 0.4);
}
.energy-strong {
 box-shadow: 0 0 25px rgba(59, 130, 246, 0.4);
}
.energy-balanced {
 box-shadow: 0 0 20px rgba(245, 158, 11, 0.4);
}
.energy-weak {
 box-shadow: 0 0 15px rgba(107, 114, 128, 0.4);
}
.energy-negative {
 box-shadow: 0 0 25px rgba(239, 68, 68, 0.4);
}
.premium-glass {
 background: rgba(255, 255, 255, 0.25);
 backdrop-filter: blur(20px);
 border: 1px solid rgba(255, 255, 255, 0.18);
 box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
}
.magnetic-strength-visualization {
 position: relative;
 overflow: hidden;
}
.magnetic-strength-visualization::before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background: linear-gradient(45deg, transparent 49%, rgba(255,255,255,0.1) 50%, transparent 51%);
 background-size: 20px 20px;
 animation: diagonalMove 2s linear infinite;
}
@keyframes diagonalMove {
 0% { background-position: 0 0; }
 100% { background-position: 20px 20px; }
}
.number-sequence {
 font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
 letter-spacing: 0.1em;
 position: relative;
}
.number-sequence::after {
 content: '';
 position: absolute;
 bottom: -2px;
 left: 0;
 right: 0;
 height: 2px;
 background: linear-gradient(90deg, transparent, currentColor, transparent);
 opacity: 0;
 transition: opacity 0.3s ease;
}
.number-sequence:hover::after {
 opacity: 0.5;
}
.segment-detail-btn {
 position: relative;
 overflow: hidden;
}
.segment-detail-btn::before {
 content: '';
 position: absolute;
 top: 50%;
 left: 50%;
 width: 0;
 height: 0;
 background: rgba(255, 255, 255, 0.3);
 border-radius: 50%;
 transform: translate(-50%, -50%);
 transition: width 0.6s ease, height 0.6s ease;
}
.segment-detail-btn:hover::before {
 width: 300px;
 height: 300px;
}
@media (prefers-reduced-motion: reduce) {
 .animate-fade-in,
 .transition-all,
 .flow-arrow i,
 .segment-magnetic-card,
 .animate-float,
 .energy-indicator::after,
 .segment-tooltip,
 .segment-modal,
 .segment-modal > div,
 .magnetic-field-tag::before,
 .magnetic-strength-visualization::before,
 .segment-detail-btn::before {
 animation: none;
 transition: none;
 }
}
.star-tag {
 @apply inline-flex items-center px-2 py-1 rounded-full text-xs font-medium border;
}
.level-badge {
 @apply text-xs font-bold;
}
.level-1 {
 @apply text-green-600;
}
.level-2 {
 @apply text-blue-600;
}
.level-3 {
 @apply text-yellow-600;
}
.level-4 {
 @apply text-red-600;
}
.recommendation-tag {
 @apply inline-flex items-center px-2 py-1 rounded-full text-xs font-medium border;
}
.bg-tianyi\/10 { background-color: rgba(34, 197, 94, 0.1); }
.bg-tianyi\/20 { background-color: rgba(34, 197, 94, 0.2); }
.text-tianyi { color: rgb(34, 197, 94); }
.border-tianyi\/30 { border-color: rgba(34, 197, 94, 0.3); }
.bg-yannian\/10 { background-color: rgba(59, 130, 246, 0.1); }
.bg-yannian\/20 { background-color: rgba(59, 130, 246, 0.2); }
.text-yannian { color: rgb(59, 130, 246); }
.border-yannian\/30 { border-color: rgba(59, 130, 246, 0.3); }
.bg-shengqi\/10 { background-color: rgba(168, 85, 247, 0.1); }
.bg-shengqi\/20 { background-color: rgba(168, 85, 247, 0.2); }
.text-shengqi { color: rgb(168, 85, 247); }
.border-shengqi\/30 { border-color: rgba(168, 85, 247, 0.3); }
.bg-fuwei\/10 { background-color: rgba(107, 114, 128, 0.1); }
.bg-fuwei\/20 { background-color: rgba(107, 114, 128, 0.2); }
.text-fuwei { color: rgb(107, 114, 128); }
.border-fuwei\/30 { border-color: rgba(107, 114, 128, 0.3); }
.bg-liusha\/10 { background-color: rgba(245, 158, 11, 0.1); }
.bg-liusha\/20 { background-color: rgba(245, 158, 11, 0.2); }
.text-liusha { color: rgb(245, 158, 11); }
.border-liusha\/30 { border-color: rgba(245, 158, 11, 0.3); }
.bg-huohai\/10 { background-color: rgba(239, 68, 68, 0.1); }
.bg-huohai\/20 { background-color: rgba(239, 68, 68, 0.2); }
.text-huohai { color: rgb(239, 68, 68); }
.border-huohai\/30 { border-color: rgba(239, 68, 68, 0.3); }
.bg-wugui\/10 { background-color: rgba(249, 115, 22, 0.1); }
.bg-wugui\/20 { background-color: rgba(249, 115, 22, 0.2); }
.text-wugui { color: rgb(249, 115, 22); }
.border-wugui\/30 { border-color: rgba(249, 115, 22, 0.3); }
.bg-jueming\/10 { background-color: rgba(220, 38, 127, 0.1); }
.bg-jueming\/20 { background-color: rgba(220, 38, 127, 0.2); }
.text-jueming { color: rgb(220, 38, 127); }
.border-jueming\/30 { border-color: rgba(220, 38, 127, 0.3); }