/* love-compatibility-calculator (RT-FUN-093) — tool styles. Card system in share-card.css. */

.lc-tool { display: flex; flex-direction: column; gap: 16px; }
.lc-inputs { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.lc-field { display: flex; flex-direction: column; gap: 6px; font-size: .85rem; font-weight: 600; color: var(--t2, #6b6760); flex: 1; min-width: 160px; }
.lc-field input {
    font: inherit; font-size: 1.1rem; padding: 11px 13px; border: 1.5px solid var(--border, #ebebeb);
    border-radius: 10px; background: var(--card-bg, #fff); color: var(--t1, #1a1814);
}
.lc-field input:focus-visible { outline: 3px solid #e8622a; outline-offset: 1px; border-color: #e8622a; }
.lc-heart { align-self: center; font-size: 1.5rem; color: #e8622a; padding-bottom: 8px; }
.lc-go { font: inherit; font-weight: 700; padding: 11px 24px; border: none; border-radius: 999px; background: #e8622a; color: #fff; cursor: pointer; }
.lc-go:focus-visible { outline: 3px solid #1a1814; outline-offset: 2px; }

.lc-stage { background: #0c1827; border-radius: 16px; }
.lc-disc { font-size: .82rem; color: var(--t2, #6b6760); margin: 0; }

/* Card (1080×1350 coords) */
.lc-card {
    align-items: center; text-align: center; justify-content: center;
    background: radial-gradient(130% 100% at 50% 0%, #3a1530 0%, #1a0f22 60%, #0c0a16 100%);
    color: #fbeef2;
}
.lc-card .sc-eyebrow { font-size: 28px; letter-spacing: 8px; color: #ff8aa6; }
.lc-card-names { font-family: var(--sc-font-serif, serif); font-size: 64px; font-weight: 700; margin: 18px 0 6px; line-height: 1.15; }
.lc-card-pct { font-family: var(--sc-font-serif, serif); font-size: 260px; font-weight: 700; line-height: 1; color: #ff5d7e; margin: 6px 0; text-shadow: 0 4px 30px rgba(255,93,126,.45); }
.lc-card-verdict { font-size: 38px; line-height: 1.35; max-width: 860px; margin: 0 auto 30px; opacity: .92; }
.lc-card-bars { width: 760px; max-width: 86%; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }

.lc-bar { display: grid; grid-template-columns: 220px 1fr 64px; align-items: center; gap: 16px; font-size: 30px; }
.lc-bar-l { text-align: left; opacity: .9; }
.lc-bar-t { height: 22px; background: rgba(255,255,255,.16); border-radius: 999px; overflow: hidden; }
.lc-bar-t i { display: block; height: 100%; background: linear-gradient(90deg, #ff8aa6, #ff5d7e); border-radius: 999px; }
.lc-bar-v { text-align: right; font-weight: 700; }