.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;margin-bottom:16px}.main-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch}.main-grid>.card{margin-bottom:0;display:flex;flex-direction:column}#resultArea{display:flex;flex-direction:column;min-height:0}#resultArea .result-card,#resultArea .result-empty,#resultArea .quip-card{flex:1;margin-bottom:0;display:flex;flex-direction:column;justify-content:center}.section-label{display:flex;align-items:center;justify-content:space-between;font-size:11px;font-weight:700;color:var(--sub);text-transform:uppercase;letter-spacing:.8px;margin-bottom:10px}.reset-link{font-size:12px;font-weight:500;color:var(--sub);background:none;border:none;cursor:pointer;text-transform:none;letter-spacing:0;padding:2px 6px;border-radius:6px;transition:color .15s}.reset-link:hover{color:#f44336}.gender-row{display:flex;gap:8px;margin-bottom:20px}.gender-btn{flex:1;padding:10px 8px;border:2px solid var(--border);border-radius:12px;background:var(--card);color:var(--sub);font-size:15px;font-weight:600;cursor:pointer;transition:all .2s;text-align:center}.gender-btn.active{border-color:var(--primary);color:var(--primary);background:var(--primary-muted)}.chain-wrap{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-bottom:16px;min-height:30px}.chain-node{padding:4px 12px;border-radius:20px;font-size:13px;font-weight:500}.chain-node.start{background:var(--primary);color:#fff}.chain-node.step{background:var(--card-alt);color:var(--text);cursor:pointer;border:1.5px solid var(--border);transition:all .15s}.chain-node.step:hover{border-color:var(--primary);color:var(--primary)}.chain-arrow{color:var(--sub);font-size:13px;user-select:none}.step-label{font-size:12px;color:var(--sub);margin-bottom:10px}.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.rel-btn{padding:13px 6px;border-radius:12px;border:1.5px solid var(--border);background:var(--card-alt);color:var(--text);font-size:14px;font-weight:600;cursor:pointer;transition:all .15s;text-align:center;line-height:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}.rel-btn .rel-icon{font-size:18px}.rel-btn:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-muted);transform:translateY(-1px);box-shadow:0 4px 12px #6c63ff26}.rel-btn:active{transform:translateY(0)}.del-btn{margin-top:12px;width:100%;padding:9px;border-radius:10px;border:1.5px dashed var(--border);background:transparent;color:var(--sub);font-size:13px;cursor:pointer;transition:all .15s}.del-btn:hover{border-color:#f44336;color:#f44336}.result-card{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-end) 100%);border-radius:var(--radius);padding:28px 24px;color:#fff;text-align:center;margin-bottom:16px}.result-empty{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:32px 24px;text-align:center;color:var(--sub);margin-bottom:16px}.result-row-label{font-size:12px;opacity:.75;margin-bottom:4px}.result-main{font-size:38px;font-weight:800;letter-spacing:-1px;margin-bottom:4px}.result-alt{font-size:13px;opacity:.7;margin-bottom:16px}.result-divider{height:1px;background:#ffffff40;margin:16px 0}.result-reverse-label{font-size:13px;opacity:.8;margin-bottom:6px}.result-reverse-name{font-size:26px;font-weight:700;letter-spacing:-.5px}.result-path{margin-top:16px;font-size:12px;opacity:.6;word-break:break-all;line-height:1.6}.result-quip{margin-top:16px;padding:10px 14px;background:#ffffff26;border-radius:10px;font-size:12px;opacity:.85;line-height:1.6}.quip-card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:28px 24px;text-align:center;margin-bottom:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1}@media(max-width:600px){.main-grid{grid-template-columns:1fr}.gender-btn{min-height:52px;font-size:16px}.rel-btn{padding:14px 4px;font-size:14px;min-height:64px}.rel-btn .rel-icon{font-size:20px}}:is([data-theme=dark]) .rel-btn{background:var(--card-alt)}@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .rel-btn{background:var(--card-alt)}}