.relationship-page{min-height:100vh;background:var(--bg-color,var(--canvas,#f6f0eb))}.relationship-page .content{padding:calc(24 * 100cqw / 750);padding-bottom:calc(calc(24 * 100cqw / 750) + env(safe-area-inset-bottom));box-sizing:border-box}.relationship-page .mode-card{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(10 * 100cqw / 750);margin-bottom:calc(14 * 100cqw / 750)}.relationship-page .mode-item{padding:calc(18 * 100cqw / 750) calc(10 * 100cqw / 750);text-align:center;font-size:calc(22 * 100cqw / 750);color:var(--text-secondary,#777);background:var(--card-bg,#fff);border:calc(1 * 100cqw / 750) solid var(--border-color,#e9dccd);border-radius:calc(14 * 100cqw / 750)}.relationship-page .mode-item-active{color:#fff;background:linear-gradient(135deg,var(--gradient-start,var(--sky)),var(--gradient-end,var(--primary-light)));border-color:transparent}.relationship-page .card{width:100%;box-sizing:border-box;background:var(--card-bg,#fff);border-radius:calc(20 * 100cqw / 750);padding:calc(24 * 100cqw / 750);box-shadow:0 calc(4 * 100cqw / 750) calc(16 * 100cqw / 750) rgba(204,146,77,.12);border:calc(1 * 100cqw / 750) solid var(--border-color,#f0dfc4)}.relationship-page .title{font-size:calc(32 * 100cqw / 750);font-weight:700;color:var(--text-primary,#333)}.relationship-page .subtitle{margin-top:calc(8 * 100cqw / 750);font-size:calc(24 * 100cqw / 750);color:var(--text-secondary,#888)}.relationship-page .relation-input{margin-top:calc(16 * 100cqw / 750);height:calc(84 * 100cqw / 750);border:calc(1 * 100cqw / 750) solid var(--border-color,#e4d3bc);border-radius:calc(14 * 100cqw / 750);padding:0 calc(20 * 100cqw / 750);font-size:calc(28 * 100cqw / 750);background:#fffdf9;color:var(--text-primary,#333);box-sizing:border-box;width:100%}.relationship-page .pair-row{margin-top:calc(16 * 100cqw / 750);display:flex;align-items:center;gap:calc(12 * 100cqw / 750)}.relationship-page .pair-input{margin-top:0;flex:1;min-width:0}.relationship-page .swap-btn{flex-shrink:0;height:calc(64 * 100cqw / 750);line-height:calc(64 * 100cqw / 750);padding:0 calc(18 * 100cqw / 750);border-radius:calc(999 * 100cqw / 750);font-size:calc(24 * 100cqw / 750);color:var(--primary-dark,#d43a2f);background:#fff2ef;border:calc(1 * 100cqw / 750) solid #f5c7c1}.relationship-page .example-label{margin-top:calc(18 * 100cqw / 750);font-size:calc(24 * 100cqw / 750);color:var(--text-secondary,#999)}.relationship-page .example-list{display:flex;flex-wrap:wrap;gap:calc(12 * 100cqw / 750);margin-top:calc(10 * 100cqw / 750)}.relationship-page .example-item{padding:calc(10 * 100cqw / 750) calc(16 * 100cqw / 750);background:#fff6ed;border:calc(1 * 100cqw / 750) solid #f3d9bf;border-radius:calc(999 * 100cqw / 750);font-size:calc(24 * 100cqw / 750);color:var(--accent-color,#a86d2b)}.relationship-page .action-row{display:grid;grid-template-columns:repeat(2,1fr);gap:calc(12 * 100cqw / 750);margin-top:calc(18 * 100cqw / 750)}.relationship-page .action-btn{height:calc(72 * 100cqw / 750);line-height:calc(72 * 100cqw / 750);text-align:center;border-radius:calc(12 * 100cqw / 750);font-size:calc(28 * 100cqw / 750)}.relationship-page .action-light{color:#666;background:#f9f2ea;border:calc(1 * 100cqw / 750) solid #ebdccb}.relationship-page .action-main{color:#fff;background:linear-gradient(135deg,var(--gradient-start,var(--sky)) 0,var(--gradient-end,var(--primary-light)) 100%);box-shadow:0 calc(8 * 100cqw / 750) calc(20 * 100cqw / 750) var(--sky-soft);font-weight:600}.relationship-page .result-card{margin-top:calc(18 * 100cqw / 750)}.relationship-page .relation-text{margin-top:calc(14 * 100cqw / 750);font-size:calc(26 * 100cqw / 750);color:#666}.relationship-page .result-list{margin-top:calc(14 * 100cqw / 750);display:flex;flex-direction:column;gap:calc(10 * 100cqw / 750)}.relationship-page .result-item{display:flex;align-items:center;gap:calc(12 * 100cqw / 750);padding:calc(14 * 100cqw / 750) calc(16 * 100cqw / 750);background:var(--sky-soft);border-radius:calc(12 * 100cqw / 750)}.relationship-page .result-label{flex-shrink:0;font-size:calc(22 * 100cqw / 750);color:var(--accent);background:var(--accent-soft);border:calc(1 * 100cqw / 750) solid var(--accent-border);border-radius:calc(999 * 100cqw / 750);padding:calc(4 * 100cqw / 750) calc(12 * 100cqw / 750)}.relationship-page .result-value{font-size:calc(28 * 100cqw / 750);font-weight:600;color:var(--sky)}.relationship-page .error-text{margin-top:calc(16 * 100cqw / 750);font-size:calc(26 * 100cqw / 750);color:var(--primary-dark,#d13f2f);line-height:1.5}.relationship-page .placeholder{margin-top:calc(16 * 100cqw / 750);font-size:calc(26 * 100cqw / 750);color:#999}.relationship-page .intro-card{margin-top:calc(18 * 100cqw / 750)}.relationship-page .intro-text{margin-top:calc(14 * 100cqw / 750);font-size:calc(24 * 100cqw / 750);line-height:1.75;color:#666}.relationship-page .intro-subtitle{margin-top:calc(16 * 100cqw / 750);font-size:calc(26 * 100cqw / 750);font-weight:700;color:var(--text-primary,#333)}.relationship-page .intro-item{margin-top:calc(10 * 100cqw / 750);font-size:calc(24 * 100cqw / 750);line-height:1.7;color:#666}