/* Public target snapshot: loveage page, observed 2026-10-19. Scope attributes removed for server-rendered HTML. */
html,body{margin:0;min-height:100%;}
body.la-page{min-height:100vh;}
body.la-page *{box-sizing:border-box;}
body.la-page a{text-decoration:none;}
body.la-page button{font:inherit;}

.la-home { padding: 18px 16px 40px;
}
.la-brand { display: flex; align-items: center; gap: 8px;
}
.la-brand__heart { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--la-primary); color: #FFF; font-size: 14px; box-shadow: 0 3px 0 var(--la-primary-deep);
}
.la-brand__t { font-size: 13px; font-weight: 800; color: var(--la-primary-deep); letter-spacing: 1px;
}
.la-head { margin-top: 22px;
}
.la-head__l1 { font-size: 34px; line-height: 1.25; font-weight: 900; color: var(--la-ink);
}
.la-head__l2 { font-size: 38px; line-height: 1.25; font-weight: 900; color: var(--la-primary);
}
.la-sub { margin-top: 10px; font-size: 15px; line-height: 1.7; color: var(--la-ink-2);
}
.la-home__hero { display: block; width: 88%; max-width: 380px; margin: 14px auto 0;
}
.la-meta { margin-top: 10px; text-align: center; font-size: 13px; font-weight: 700; color: var(--la-faint);
}
.la-link { margin-top: 10px; text-align: center; font-size: 13px; color: var(--la-primary-deep); cursor: pointer;
}
.la-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; padding: 18px 16px;
}
.la-pill { padding: 7px 14px; border-radius: 999px; border: 2px solid; font-size: 14px; font-weight: 800;
}
.la-pill.is-pink { color: var(--la-primary-deep); background: var(--la-primary-soft); border-color: var(--la-pink-line);
}
.la-pill.is-lilac { color: var(--la-lilac); background: var(--la-lilac-soft); border-color: var(--la-lilac-line);
}
.la-pill.is-mint { color: var(--la-mint); background: var(--la-mint-soft); border-color: var(--la-mint-line);
}
.la-dim { display: flex; gap: 14px; margin-top: 12px; padding: 16px 18px;
}
.la-dim__no { flex-shrink: 0; width: 28px; font-size: 18px; font-weight: 900;
}
.la-dim__no.is-adult { color: var(--la-mint);
}
.la-dim__no.is-kid { color: var(--la-primary-deep);
}
.la-dim__txt { flex: 1; min-width: 0;
}
.la-dim__n { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 800; color: var(--la-ink);
}
.la-dim__side { padding: 1px 8px; border-radius: 999px; background: var(--la-bg); color: var(--la-muted); font-size: 11.5px; font-weight: 700;
}
.la-dim__d { margin-top: 4px; font-size: 13.5px; color: var(--la-ink-2); line-height: 1.6;
}
.la-sec--tint { margin-left: -16px; margin-right: -16px; padding: 22px 16px 26px; background: var(--la-tint);
}
.la-center { text-align: center;
}
.la-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px;
}
.la-grid__item { min-width: 0; display: flex; flex-direction: column; align-items: center; padding: 10px 8px 12px; border-radius: 22px; background: var(--la-card); border: 2px solid var(--la-line); box-shadow: 0 5px 0 var(--la-shadow);
}
.la-grid__img { width: 100%; height: 110px;
}
.la-grid__tag { margin-top: 6px; padding: 5px 12px; border-radius: 999px; border: 2px solid; font-size: 13.5px; font-weight: 800; white-space: nowrap;
}
.la-grid__tag.is-pink { color: var(--la-primary-deep); background: var(--la-primary-soft); border-color: var(--la-pink-line);
}
.la-grid__tag.is-lilac { color: var(--la-lilac); background: var(--la-lilac-soft); border-color: var(--la-lilac-line);
}
.la-grid__tag.is-mint { color: var(--la-mint); background: var(--la-mint-soft); border-color: var(--la-mint-line);
}
.la-grid__tag.is-butter { color: var(--la-butter); background: var(--la-butter-soft); border-color: var(--la-butter-line);
}
.la-grid__age { margin-top: 4px; font-size: 12px; font-weight: 700; color: var(--la-faint);
}
.la-gain { display: flex; align-items: flex-start; gap: 10px; margin-top: 10px; font-size: 14.5px; line-height: 1.6; color: var(--la-ink-2);
}
.la-gain:first-child { margin-top: 0;
}
.la-gain__dot { flex-shrink: 0; width: 8px; height: 8px; margin-top: 8px; border-radius: 50%; background: var(--la-primary);
}
.la-faq { margin-top: 12px; padding: 16px 18px;
}
.la-faq__q { font-size: 15.5px; font-weight: 800; color: var(--la-ink);
}
.la-faq__a { margin-top: 6px; font-size: 14px; line-height: 1.75; color: var(--la-ink-2);
}
.la-end { margin-top: 30px; text-align: center;
}
.la-end__img { display: block; width: 52%; max-width: 220px; margin: 0 auto 8px;
}
.la-end__t { font-size: 22px; font-weight: 900; color: var(--la-ink); line-height: 1.4;
}
.la-end__t--pink { color: var(--la-primary);
}
.la-note--foot { margin-top: 16px;
}

.la-part { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 88vh; padding: 30px 24px; box-sizing: border-box; text-align: center;
}
.la-part__img { width: 64%; max-width: 260px;
}
.la-part__no { margin-top: 18px; font-size: 13px; font-weight: 800; letter-spacing: 3px; color: var(--la-primary);
}
.la-part__name { margin-top: 10px; font-size: 34px; font-weight: 900; color: var(--la-ink);
}
.la-part__desc { margin-top: 10px; font-size: 15px; color: var(--la-ink-2);
}
.la-part__btn { width: 64%; max-width: 260px; margin-top: 30px;
}
.la-part__home { margin-top: 16px; font-size: 13px; color: var(--la-faint); cursor: pointer;
}

.la-quiz { padding: 14px 16px 40px;
}
.la-quiz__top { display: flex; align-items: center; gap: 12px; height: 48px;
}
.la-quiz__back { flex-shrink: 0; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--la-card); border: 2px solid var(--la-line); box-shadow: 0 4px 0 var(--la-shadow); color: var(--la-ink-2); font-size: 20px; font-weight: 800; cursor: pointer;
}
.la-quiz__track { flex: 1; height: 12px; border-radius: 999px; background: var(--la-card); border: 2px solid var(--la-line); overflow: hidden; box-sizing: border-box;
}
.la-quiz__fill { height: 100%; border-radius: 999px; background: var(--la-primary); transition: width 0.3s ease;
}
.la-quiz__count { flex-shrink: 0; display: flex; align-items: center; gap: 4px; font-size: 15px; font-weight: 900; color: var(--la-ink-2);
}
.la-quiz__heart { color: var(--la-primary); font-size: 16px;
}
.la-quiz__body { margin-top: 18px;
}
/* 题干区最小高度 = 24 题里最高的题干（带场景说明的聊天题，宽 320–414 实测 165px），短题干的留白放在上方，选项位置因此每题一致 */
.la-quiz__stem { min-height: 165px; display: flex; flex-direction: column; justify-content: flex-end;
}
.la-quiz__note { margin-bottom: 10px; font-size: 13px; font-weight: 700; color: var(--la-faint);
}
.la-quiz__from { display: flex; align-items: center; gap: 8px;
}
.la-quiz__ava { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--la-primary-soft); border: 2px solid var(--la-pink-line); color: var(--la-primary); font-size: 14px;
}
.la-quiz__who { font-size: 14px; font-weight: 800; color: var(--la-ink-2);
}
.la-quiz__time { font-size: 12px; color: var(--la-faint);
}
.la-bubble { position: relative; display: inline-block; align-self: flex-start; max-width: 86%; margin: 10px 0 0 14px; padding: 14px 18px; border-radius: 6px 22px 22px 22px; background: var(--la-card); border: 2px solid var(--la-line); box-shadow: 0 5px 0 var(--la-shadow); font-size: 17px; line-height: 1.6; color: var(--la-ink); font-weight: 600; box-sizing: border-box;
}
.la-quiz__q { padding: 16px 18px; border-radius: 20px; background: var(--la-butter-soft); border: 2px dashed var(--la-butter-line); box-shadow: none; font-size: 18px; line-height: 1.65; font-weight: 800; color: var(--la-ink);
}
.la-quiz__ask { margin-top: 18px; font-size: 14px; font-weight: 800; color: var(--la-faint);
}
.la-quiz__opts { display: flex; flex-direction: column; gap: 12px; margin-top: 12px;
}
.la-qopt { display: flex; align-items: center; gap: 12px; min-height: 76px; padding: 12px 16px; box-sizing: border-box; border-radius: 22px; background: var(--la-card); border: 2px solid var(--la-line); box-shadow: 0 5px 0 var(--la-shadow); cursor: pointer; transition: transform 0.1s, box-shadow 0.1s, border-color 0.15s;
}
.la-qopt:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--la-shadow);
}
.la-qopt__k { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; border: 2px solid; font-size: 14px; font-weight: 900; box-sizing: border-box;
}
.la-qopt.is-0 .la-qopt__k { color: var(--la-primary-deep); border-color: var(--la-primary);
}
.la-qopt.is-1 .la-qopt__k { color: var(--la-butter); border-color: var(--la-butter-line);
}
.la-qopt.is-2 .la-qopt__k { color: var(--la-mint); border-color: var(--la-mint-line);
}
.la-qopt.is-3 .la-qopt__k { color: var(--la-lilac); border-color: var(--la-lilac-line);
}
.la-qopt__t { flex: 1; min-width: 0; font-size: 15.5px; line-height: 1.55; color: var(--la-ink);
}
.la-qopt.is-on { border-color: var(--la-primary); background: var(--la-primary-soft); box-shadow: 0 5px 0 var(--la-pink-line);
}
.la-qopt.is-on .la-qopt__k { background: var(--la-primary); border-color: var(--la-primary); color: #FFF;
}
.la-quiz__hint { margin-top: 22px; text-align: center; font-size: 12.5px; color: var(--la-faint);
}

.la-load { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 90vh; padding: 30px 24px; box-sizing: border-box; text-align: center;
}
.la-load__img { width: 66%; max-width: 280px;
}
.la-load__age { display: flex; align-items: baseline; gap: 6px; margin-top: 16px;
}
.la-load__n { min-width: 120px; font-size: 76px; line-height: 1; font-weight: 900; color: var(--la-primary); text-shadow: 4px 4px 0 var(--la-shadow); font-family: 'Avenir Next', 'Helvetica Neue', Arial, sans-serif;
}
.la-load__u { font-size: 24px; font-weight: 800; color: var(--la-ink-2);
}
.la-load__t { margin-top: 14px; font-size: 15px; font-weight: 700; color: var(--la-ink-2);
}
.la-load__bar { width: 66%; max-width: 260px; height: 12px; margin-top: 18px; border-radius: 999px; background: var(--la-card); border: 2px solid var(--la-line); overflow: hidden; box-sizing: border-box;
}
.la-load__fill { width: 100%; height: 100%; border-radius: 999px; background: var(--la-primary); transform-origin: left; animation: la-grow-6274bbe6 2.6s ease-out forwards;
}
@keyframes la-grow-6274bbe6 {
from { transform: scaleX(0.04);
}
to { transform: scaleX(1);
}
}

.la-unlock { box-sizing: border-box; width: 100%; max-width: 520px; margin: 0 auto; padding: 28px 16px 34px; text-align: center;
}
.la-unlock__kick { font-size: 13px; font-weight: 800; letter-spacing: 2px; color: var(--la-primary-deep);
}
.la-unlock__h1 { margin-top: 10px; font-size: 30px; line-height: 1.4; font-weight: 900; color: var(--la-ink);
}
.la-unlock__lead { margin-top: 8px; font-size: 15px; font-weight: 700; color: var(--la-muted);
}
.la-secret { margin-top: 22px; padding: 18px 18px 20px;
}
.la-secret__img { display: block; width: 62%; max-width: 240px; margin: 0 auto;
}
.la-secret__age { display: flex; align-items: baseline; justify-content: center; gap: 6px; margin-top: 8px;
}
.la-secret__q { font-size: 64px; line-height: 1; font-weight: 900; color: var(--la-primary); letter-spacing: 4px; font-family: 'Avenir Next', 'Helvetica Neue', Arial, sans-serif;
}
.la-secret__u { font-size: 24px; font-weight: 900; color: var(--la-ink-2);
}
.la-secret__meta { margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--la-muted);
}
.la-pulse { display: inline-block; animation: la-breathe-08367dbd 1.8s ease-in-out infinite;
}
@keyframes la-breathe-08367dbd {
0%, 100% { transform: scale(1);
}
50% { transform: scale(1.06);
}
}
@media (prefers-reduced-motion: reduce) {
.la-pulse { animation: none;
}
}
.la-ulist { margin-top: 26px; padding: 18px 16px 6px; text-align: left;
}
.la-ulist__h { font-size: 19px; font-weight: 900; color: var(--la-ink); text-align: center;
}
.la-urow { display: flex; gap: 12px; align-items: flex-start; padding: 13px 0; border-bottom: 2px dashed var(--la-line);
}
.la-urow:last-child { border-bottom: none;
}
.la-urow__no { flex: none; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--la-primary-soft); color: var(--la-primary-deep); font-size: 12px; font-weight: 900;
}
.la-urow__main { flex: 1; min-width: 0;
}
.la-urow__t { font-size: 15.5px; font-weight: 800; color: var(--la-ink);
}
.la-urow__d { margin-top: 3px; font-size: 13px; color: var(--la-muted); line-height: 1.55;
}
.la-urow__tier { flex: none; font-size: 11.5px; font-weight: 800; color: var(--la-primary-deep); white-space: nowrap;
}
.la-uterms { margin-top: 16px; padding: 14px 16px; border-radius: 18px; background: var(--la-butter-soft); text-align: left;
}
.la-uterms__t { font-size: 13px; font-weight: 900; color: var(--la-primary-deep);
}
.la-uterms__p { margin-top: 4px; font-size: 12.5px; color: var(--la-ink-2); line-height: 1.8;
}

.la-hero { text-align: center;
}
.la-hero__label { font-size: 13px; letter-spacing: 3px; color: var(--la-muted); font-weight: 700;
}
.la-hero__img { display: block; width: 72%; max-width: 300px; margin: 10px auto 0;
}
.la-hero__lead { margin-top: 10px; font-size: 15px; font-weight: 700; color: var(--la-ink-2);
}
.la-hero__age { display: flex; align-items: baseline; justify-content: center; gap: 6px; margin-top: 2px;
}
.la-hero__num { font-size: 92px; line-height: 1; font-weight: 900; color: var(--la-primary); text-shadow: 4px 4px 0 var(--la-shadow); font-family: 'Avenir Next', 'Helvetica Neue', Arial, sans-serif;
}
.la-hero__unit { font-size: 30px; font-weight: 800; color: var(--la-ink-2);
}
.la-hero__stage { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 26px; font-weight: 900; color: var(--la-ink);
}
.la-hero__flavor { padding: 3px 10px; border-radius: 999px; background: var(--la-primary-soft); color: var(--la-primary-deep); font-size: 14px; font-weight: 800;
}
.la-hero__line { margin: 10px auto 0; max-width: 340px; font-size: 15px; line-height: 1.8; color: var(--la-ink-2);
}
.la-hero__tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px;
}
.la-hero__tag { padding: 6px 12px; border-radius: 999px; border: 2px solid var(--la-pink-line); background: var(--la-primary-soft); color: var(--la-primary-deep); font-size: 13.5px; font-weight: 800;
}
.la-hero__stat { margin: 16px auto 0; padding: 12px 14px; border-radius: 18px; border: 2px solid var(--la-line); background: var(--la-card); color: var(--la-ink-2); font-size: 13.5px; line-height: 1.7;
}

.la-parts { margin-top: 18px; padding: 16px 14px;
}
.la-parts__h { font-size: 15px; font-weight: 900; color: var(--la-ink-2); text-align: center;
}
.la-parts__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 12px;
}
.la-parts__cell { min-width: 0; padding: 10px 4px; border-radius: 16px; background: var(--la-bg); border: 2px solid transparent; text-align: center;
}
.la-parts__cell.is-max { border-color: var(--la-mint-line); background: var(--la-mint-soft);
}
.la-parts__cell.is-min { border-color: var(--la-pink-line); background: var(--la-primary-soft);
}
.la-parts__k { font-size: 12px; font-weight: 800; color: var(--la-muted); white-space: nowrap;
}
.la-parts__v { margin-top: 4px;
}
.la-parts__n { font-size: 24px; font-weight: 900; color: var(--la-ink); font-family: 'Avenir Next', 'Helvetica Neue', Arial, sans-serif;
}
.la-parts__u { margin-left: 2px; font-size: 12px; font-weight: 800; color: var(--la-ink-2);
}
.la-parts__line { margin-top: 12px; font-size: 13.5px; line-height: 1.7; color: var(--la-ink-2); text-align: center;
}

.la-radar { width: 100%;
}
.la-radar__box { position: relative; width: 100%; max-width: 330px; margin: 6px auto 0;
}
.la-radar__svg { display: block; width: 100%;
}
.la-radar__ring { fill: none; stroke: var(--la-line); stroke-width: 2;
}
.la-radar__axis { stroke: var(--la-line); stroke-width: 1.5;
}
.la-radar__you { fill: var(--la-primary); fill-opacity: 0.22; stroke: var(--la-primary); stroke-width: 3; stroke-linejoin: round;
}
.la-radar__dot { fill: #FFF; stroke: var(--la-primary); stroke-width: 3;
}
.la-radar__label { position: absolute; text-align: center; white-space: nowrap;
}
.la-radar__name { font-size: 13px; font-weight: 800; color: var(--la-ink-2); line-height: 1.2;
}
.la-radar__val { font-size: 14px; font-weight: 900; color: var(--la-primary-deep); line-height: 1.2;
}

.la-report { padding: 22px 16px 24px;
}
.la-report__share { margin-top: 16px;
}
.la-block { margin-top: 26px;
}
.la-block__h { margin-bottom: 12px; font-size: 16px; font-weight: 900; color: var(--la-ink-2);
}
.la-card + .la-card { margin-top: 12px;
}
.la-p { margin-top: 8px; font-size: 14.5px; line-height: 1.85; color: var(--la-ink-2);
}
.la-sub-h { margin-top: 14px; font-size: 13.5px; font-weight: 800; color: var(--la-muted);
}
.la-tip { margin-top: 12px; padding: 12px 14px; border-radius: 16px; border: 2px dashed var(--la-butter-line); background: var(--la-butter-soft); color: var(--la-ink-2); font-size: 14px; line-height: 1.75;
}
.la-idx { padding: 18px;
}
.la-idx__sum { display: flex; gap: 10px; margin-bottom: 6px;
}
.la-idx__half { flex: 1; display: flex; align-items: baseline; justify-content: space-between; padding: 10px 14px; border-radius: 16px; background: var(--la-bg);
}
.la-idx__k { font-size: 13px; font-weight: 800; color: var(--la-muted);
}
.la-idx__v { font-size: 24px; font-weight: 900;
}
.la-idx__v.is-adult { color: var(--la-mint);
}
.la-idx__v.is-kid { color: var(--la-primary-deep);
}
.la-idx__row { margin-top: 14px;
}
.la-idx__top { display: flex; align-items: center; gap: 8px;
}
.la-idx__name { font-size: 15px; font-weight: 800; color: var(--la-ink);
}
.la-idx__mine { padding: 1px 8px; border-radius: 999px; border: 2px solid var(--la-lilac-line); color: var(--la-lilac); font-size: 11.5px; font-weight: 800;
}
.la-idx__num { margin-left: auto; font-size: 18px; font-weight: 900; color: var(--la-ink-2);
}
.la-idx__bar { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 5px; margin-top: 8px;
}
.la-idx__seg { height: 14px; border-radius: 6px; border: 2px solid var(--la-line); background: var(--la-card); box-sizing: border-box;
}
.la-idx__seg.is-on.is-adult { background: var(--la-mint-mid); border-color: var(--la-mint-mid);
}
.la-idx__seg.is-on.is-kid { background: var(--la-primary); border-color: var(--la-primary);
}
.la-idx__lv { margin-top: 6px; font-size: 13px; color: var(--la-muted); line-height: 1.6;
}
.la-idx__foot { margin-top: 16px; padding-top: 12px; border-top: 2px solid var(--la-line); font-size: 12.5px; line-height: 1.7; color: var(--la-faint);
}
.la-radar-card { padding: 22px 10px 18px;
}
.la-dna__pair { font-size: 15px; font-weight: 800; color: var(--la-ink-2);
}
.la-dna__n { color: var(--la-primary-deep); font-size: 17px; font-weight: 900;
}
.la-dna__name { margin-top: 10px; font-size: 24px; font-weight: 900; color: var(--la-ink);
}
.la-dna__short { margin-top: 4px; font-size: 14px; font-weight: 800; color: var(--la-muted);
}
.la-pill-card { padding: 14px 18px; border-radius: 999px; font-size: 14.5px; line-height: 1.7; color: var(--la-ink-2);
}
.la-phase { padding: 14px 18px;
}
.la-phase__k { font-size: 15px; font-weight: 900; color: var(--la-primary-deep);
}
.la-phase__v { margin-top: 6px; font-size: 14.5px; line-height: 1.8; color: var(--la-ink-2);
}
.la-scene { padding: 16px 18px;
}
.la-scene__s { font-size: 15px; font-weight: 900; color: var(--la-primary-deep);
}
.la-scene__o, .la-scene__i { display: flex; align-items: baseline; gap: 8px; margin-top: 8px; font-size: 14.5px; line-height: 1.75; color: var(--la-ink);
}
.la-scene__o { font-weight: 800;
}
.la-scene__i { padding-top: 8px; border-top: 2px dashed var(--la-line); color: var(--la-ink-2);
}
.la-scene__k { flex-shrink: 0; padding: 0 8px; border-radius: 999px; background: var(--la-bg); color: var(--la-muted); font-size: 12px; font-weight: 800;
}
.la-scene__k.is-in { background: var(--la-primary-soft); color: var(--la-primary-deep);
}
.la-mis { font-size: 16px; font-weight: 900; color: var(--la-ink);
}
.la-mis__as { color: var(--la-primary-deep);
}
.la-blind { padding: 16px 18px;
}
.la-blind__what { display: flex; align-items: baseline; gap: 10px; font-size: 15px; font-weight: 800; color: var(--la-ink); line-height: 1.6;
}
.la-blind__no { flex-shrink: 0; color: var(--la-primary); font-size: 18px; font-weight: 900;
}
.la-blind__catch { margin-top: 10px; padding: 10px 12px; border-radius: 14px; border: 2px dashed var(--la-butter-line); background: var(--la-butter-soft); font-size: 13.5px; line-height: 1.7; color: var(--la-ink-2);
}
.la-blind__ck { display: block; margin-bottom: 2px; font-size: 12px; font-weight: 900; color: var(--la-butter);
}
.la-safe { display: flex; align-items: baseline; gap: 10px; margin-top: 10px;
}
.la-safe:first-child { margin-top: 0;
}
.la-safe__k { flex-shrink: 0; width: 96px; font-size: 13px; font-weight: 900;
}
.la-safe__k.is-calm { color: var(--la-mint);
}
.la-safe__k.is-upset { color: var(--la-primary-deep);
}
.la-safe__k.is-soothe { color: var(--la-lilac);
}
.la-safe__v { flex: 1; min-width: 0; font-size: 14.5px; line-height: 1.7; color: var(--la-ink-2);
}
.la-match { display: flex; gap: 12px; padding: 14px 16px;
}
.la-match__img { flex-shrink: 0; width: 82px; height: 70px;
}
.la-match__txt { flex: 1; min-width: 0;
}
.la-match__top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px;
}
.la-match__tag { padding: 1px 8px; border-radius: 999px; color: #FFF; font-size: 12px; font-weight: 800;
}
.la-match__tag.is-best { background: var(--la-mint-mid);
}
.la-match__tag.is-hard { background: var(--la-lilac);
}
.la-match__name { font-size: 16px; font-weight: 900; color: var(--la-ink);
}
.la-match__range { font-size: 12px; color: var(--la-faint);
}
.la-match__why { margin-top: 6px; font-size: 13.5px; line-height: 1.75; color: var(--la-ink-2);
}
.la-lure { font-size: 17px; font-weight: 900; color: var(--la-primary-deep);
}
.la-unsaid { padding: 26px 20px; text-align: center; font-size: 18px; font-weight: 900; line-height: 1.75; color: var(--la-ink);
}
.la-replay { padding: 8px 14px;
}
.la-replay__row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 2px dashed var(--la-line);
}
.la-replay__row:last-child { border-bottom: none;
}
.la-replay__no { flex-shrink: 0; width: 22px; font-size: 13px; font-weight: 900; color: var(--la-faint);
}
.la-replay__t { flex: 1; min-width: 0; font-size: 13.5px; line-height: 1.5; color: var(--la-ink-2);
}
.la-replay__age { flex-shrink: 0; padding: 2px 8px; border-radius: 999px; font-size: 12.5px; font-weight: 900;
}
.la-replay__age.is-kid { background: var(--la-primary-soft); color: var(--la-primary-deep);
}
.la-replay__age.is-adult { background: var(--la-mint-soft); color: var(--la-mint);
}
.la-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px;
}
.la-chip { padding: 7px 12px; border-radius: 999px; border: 2px solid var(--la-line); background: var(--la-card); font-size: 13px; font-weight: 800; color: var(--la-ink-2); cursor: pointer;
}
.la-chip.is-me { border-style: dashed;
}
.la-chip.is-on { border-color: var(--la-primary); background: var(--la-primary); color: #FFF;
}
.la-pair { margin-top: 14px; padding: 14px; border-radius: 16px; background: var(--la-bg);
}
.la-pair__h { font-size: 16px; font-weight: 900; color: var(--la-primary-deep);
}
.la-up { margin-top: 26px; padding: 18px;
}
.la-up__h { font-size: 17px; font-weight: 900; color: var(--la-ink);
}
.la-up__item { margin-top: 8px; font-size: 13.5px; line-height: 1.6; color: var(--la-ink-2);
}
.la-up__btn { margin-top: 16px;
}
.la-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 26px;
}
.la-say { margin-top: 18px; padding: 16px 18px;
}
.la-say__row { display: flex; align-items: baseline; gap: 12px;
}
.la-say__row + .la-say__row { margin-top: 10px; padding-top: 10px; border-top: 2px dashed var(--la-line);
}
.la-say__k { flex-shrink: 0; padding: 2px 10px; border-radius: 999px; background: var(--la-bg); color: var(--la-muted); font-size: 12.5px; font-weight: 800;
}
.la-say__row.is-think .la-say__k { background: var(--la-primary-soft); color: var(--la-primary-deep);
}
.la-say__v { font-size: 16px; font-weight: 800; color: var(--la-ink); line-height: 1.6;
}

/* 10/14 反馈：卡片图按屏宽铺满时比手机屏还高，弹层居中溢出，关闭键（原在卡片上方 42px）被挤出屏幕、一滑动跟着走，关不掉。
   现在：关闭键固定在屏幕右上角；卡片图按屏幕高度限高，整张卡一屏放得下；面板用 margin:auto 居中（内容超高时从顶部开始、可滚动，不会被裁掉顶部）。 */
.la-share { position: fixed; inset: 0; z-index: 9990; display: flex; flex-direction: column; padding: 60px 16px 20px; background: rgba(40, 24, 30, 0.72); box-sizing: border-box; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
.la-share__panel { position: relative; width: 100%; max-width: 360px; margin: auto; display: flex; flex-direction: column; align-items: center;
}
.la-share__close { position: fixed; right: 14px; top: 14px; top: calc(env(safe-area-inset-top) + 14px); z-index: 9991; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, 0.22); color: #FFF; font-size: 26px; line-height: 1; cursor: pointer;
}
.la-share__box { max-width: 100%; display: flex; justify-content: center;
}
.la-share__img { display: block; width: auto; max-width: 100%; height: auto; max-height: calc(100vh - 150px); max-height: calc(100dvh - 150px); border-radius: 16px; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35); -webkit-touch-callout: default;
}
.la-share__loading { padding: 60px 0; text-align: center; color: #FFF7F2; font-size: 14px;
}
.la-share__tip { margin-top: 14px; text-align: center; color: #FFF7F2; font-size: 14px;
}

.la-pair { box-sizing: border-box; width: 100%; max-width: 520px; margin: 0 auto; padding: 28px 16px 34px; text-align: center;
}
.la-unlock__kick { font-size: 13px; font-weight: 800; letter-spacing: 2px; color: var(--la-primary-deep);
}
.la-unlock__h1 { margin-top: 10px; font-size: 28px; line-height: 1.4; font-weight: 900; color: var(--la-ink);
}
.la-unlock__lead { margin-top: 8px; font-size: 15px; font-weight: 700; color: var(--la-muted);
}
.la-pair__cover { margin-top: 22px; padding: 22px 18px;
}
.la-pair__duo { display: flex; align-items: center; justify-content: center; gap: 18px;
}
.la-pair__who { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 96px; height: 116px; border-radius: 20px; background: var(--la-soft, #fff3e6);
}
.la-pair__q { font-size: 44px; line-height: 1; font-weight: 900; color: var(--la-primary);
}
.la-pair__name { margin-top: 8px; font-size: 14px; font-weight: 800; color: var(--la-ink-2);
}
.la-pair__x { font-size: 26px; font-weight: 900; color: var(--la-muted);
}
.la-pair__meta { margin-top: 14px; font-size: 13px; font-weight: 700; color: var(--la-muted);
}
/* 「解锁后，你们会读到」目录：与单人解锁页（UnlockView）同一套样式（那边是私有样式，这里用不到） */
.la-ulist { margin-top: 26px; padding: 18px 16px 6px; text-align: left;
}
.la-ulist__h { font-size: 19px; font-weight: 900; color: var(--la-ink); text-align: center;
}
.la-urow { display: flex; gap: 12px; align-items: flex-start; padding: 13px 0; border-bottom: 2px dashed var(--la-line);
}
.la-urow:last-child { border-bottom: none;
}
.la-urow__no { flex: none; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--la-primary-soft); color: var(--la-primary-deep); font-size: 12px; font-weight: 900;
}
.la-urow__main { flex: 1; min-width: 0;
}
.la-urow__t { font-size: 15.5px; font-weight: 800; color: var(--la-ink);
}
.la-urow__d { margin-top: 3px; font-size: 13px; color: var(--la-muted); line-height: 1.55;
}
.la-pulse { display: inline-block; animation: la-breathe-33f2ff62 1.8s ease-in-out infinite;
}
@keyframes la-breathe-33f2ff62 {
0%, 100% { transform: scale(1);
}
50% { transform: scale(1.06);
}
}
@media (prefers-reduced-motion: reduce) {
.la-pulse { animation: none;
}
}
.la-pair__head { padding: 22px 18px;
}
.la-pair__label { font-size: 13px; font-weight: 800; letter-spacing: 2px; color: var(--la-primary-deep);
}
.la-pair__combo { margin-top: 8px; font-size: 26px; font-weight: 900; color: var(--la-ink);
}
.la-pair__ages { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; font-size: 13px; font-weight: 700; color: var(--la-muted);
}
.la-pair__score { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin-top: 14px;
}
.la-pair__num { font-size: 56px; line-height: 1; font-weight: 900; color: var(--la-primary); font-family: 'Avenir Next', 'Helvetica Neue', Arial, sans-serif;
}
.la-pair__unit { font-size: 14px; font-weight: 800; color: var(--la-ink-2);
}
.la-pair__sum { margin-top: 10px; font-size: 15px; line-height: 1.7; font-weight: 700; color: var(--la-ink);
}
.la-pair__sec { margin-top: 14px; padding: 18px; text-align: left;
}
.la-pair__h { font-size: 17px; font-weight: 900; color: var(--la-ink);
}
.la-pair__p { margin-top: 8px; font-size: 14px; line-height: 1.75; color: var(--la-ink-2);
}
.la-pair__p.is-good { color: var(--la-primary-deep);
}
.la-pair__p.is-hard { color: #b05a3c;
}
.la-pair__tag { display: inline-block; margin-right: 6px; padding: 0 8px; border-radius: 999px; background: var(--la-soft, #fff3e6); font-size: 12px; font-weight: 800; color: var(--la-primary-deep);
}
.la-pair__dim { margin-top: 12px;
}
.la-pair__dimname { font-size: 13px; font-weight: 800; color: var(--la-ink);
}
.la-pair__bar { position: relative; height: 20px; margin-top: 4px; border-radius: 10px; background: rgba(0, 0, 0, 0.05); overflow: hidden;
}
.la-pair__fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 10px;
}
.la-pair__fill.is-a { background: var(--la-primary); opacity: 0.55;
}
.la-pair__fill.is-b { background: #f2a46b; opacity: 0.55;
}
.la-pair__v { position: relative; padding-left: 8px; font-size: 12px; line-height: 20px; font-weight: 800; color: var(--la-ink);
}
.la-pair__scene { margin-top: 12px;
}
.la-pair__who2 { font-size: 14px; font-weight: 800; color: var(--la-ink);
}

/* 奶油底 + 粉色点阵 + 莓果粉主色。App 内由 styles/app-skin/loveage.css 换成 App 色板 */
.la-page {
  --la-bg: #FFF7F2;
  --la-tint: #FFEFEA;
  --la-dot: #F6D9CF;
  --la-card: #FFFFFF;
  --la-line: #F5DED6;
  --la-shadow: #FADCD3;
  --la-ink: #43303A;
  --la-ink-2: #6B5560;
  --la-muted: #9A7F89;
  --la-faint: #BBA3AC;
  --la-primary: #FF6F91;
  --la-primary-deep: #E5527A;
  --la-primary-soft: #FFE8EE;
  --la-pink-line: #FFB8C9;
  --la-lilac: #8B6CEF;
  --la-lilac-soft: #F1ECFF;
  --la-lilac-line: #D3C4FF;
  --la-mint: #2E9D74;
  --la-mint-mid: #5CC9A0;
  --la-mint-soft: #E3F6EE;
  --la-mint-line: #A6E0C8;
  --la-butter: #C98A10;
  --la-butter-soft: #FFF5DE;
  --la-butter-line: #FFCD6E;
  --la-btn-shadow: #E04F74;
  min-height: 100vh;
  background-color: var(--la-bg);
  background-image: radial-gradient(var(--la-dot) 1.6px, transparent 1.7px);
  background-size: 22px 22px;
  color: var(--la-ink);
  font-family: -apple-system, 'PingFang SC', 'HarmonyOS Sans SC', 'Microsoft YaHei', sans-serif;
}
.la-screen { display: flex; flex-direction: column; min-height: 100vh; padding-bottom: 34px;
}
/* 电脑宽屏：各屏内容限宽居中，行不会拉得太长（手机宽度不受影响） */
.la-page .la-home,
.la-page .la-part,
.la-page .la-quiz,
.la-page .la-unlock,
.la-page .la-report { box-sizing: border-box; width: 100%; max-width: 520px; margin-left: auto; margin-right: auto;
}
/* 各屏共用的卡片、按钮、分节与说明文字 */
.la-page .la-card { box-sizing: border-box; padding: 18px; border-radius: 26px; background: var(--la-card); border: 2px solid var(--la-line); box-shadow: 0 6px 0 var(--la-shadow);
}
.la-page .la-btn { display: flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box; width: 100%; height: 56px; margin: 22px auto 0; max-width: 380px; border-radius: 999px; background: var(--la-primary); color: #FFF; font-size: 18px; font-weight: 900; letter-spacing: 1px; box-shadow: 0 5px 0 var(--la-btn-shadow); cursor: pointer; transition: transform 0.1s, box-shadow 0.1s;
}
.la-page .la-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--la-btn-shadow);
}
.la-page .la-btn.busy { opacity: 0.6;
}
.la-page .la-btn--ghost { background: var(--la-card); color: var(--la-primary-deep); border: 2px solid var(--la-pink-line); box-shadow: 0 5px 0 var(--la-shadow);
}
.la-page .la-btn__heart { font-size: 16px;
}
.la-page .la-press { opacity: 0.88;
}
.la-page .la-sec { margin-top: 34px;
}
.la-page .la-sec__h { font-size: 23px; font-weight: 900; color: var(--la-ink);
}
.la-page .la-sec__p { margin-top: 10px; font-size: 15px; line-height: 1.85; color: var(--la-ink-2);
}
.la-page .la-note { margin-top: 12px; text-align: center; font-size: 12px; color: var(--la-faint); line-height: 1.7;
}
.la-page .la-link { margin-top: 16px; text-align: center; font-size: 13px; font-weight: 700; color: var(--la-primary-deep); cursor: pointer;
}
/* 公共隐私行默认是淡紫色，这里换成本测试的白底与主色链接（只作用于本页） */
.la-page .optional-privacy { background: #FFFFFF; border-color: var(--la-line); color: var(--la-muted);
}
.la-page .optional-privacy__link { color: var(--la-primary-deep);
}
.la-keep { box-sizing: border-box; width: calc(100% - 32px); max-width: 390px; margin: 20px auto 0; padding: 22px 18px; border-radius: 26px; background: var(--la-card); border: 2px solid var(--la-line); box-shadow: 0 6px 0 var(--la-shadow); text-align: center;
}
.la-keep__title { font-size: 17px; font-weight: 900; color: var(--la-ink);
}
.la-keep__qr { display: flex; align-items: center; justify-content: center; width: 168px; height: 168px; margin: 14px auto 0; border-radius: 16px; background: #fff; border: 2px solid var(--la-line);
}
.la-keep__img { width: 156px; height: 156px;
}
.la-keep__tip { color: var(--la-faint); font-size: 12px;
}
.la-keep__desc { margin-top: 12px; color: var(--la-muted); font-size: 12.5px; line-height: 1.8;
}
.la-keep__copy { display: inline-flex; align-items: center; justify-content: center; margin-top: 12px; padding: 9px 22px; border-radius: 99px; border: 2px solid var(--la-primary); color: var(--la-primary-deep); font-size: 13.5px; font-weight: 800; cursor: pointer;
}
.la-keep__feedback { display: block; margin-top: 8px; color: var(--la-primary-deep); font-size: 12px;
}
.la-pair-wait { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 60vh; padding: 0 24px; text-align: center;
}
.la-pair-wait__t { font-size: 15px; font-weight: 700; color: var(--la-muted); line-height: 1.7;
}
.la-fatal { position: fixed; inset: 0; z-index: 99999; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: rgba(255, 247, 242, 0.98); text-align: center;
}
.la-fatal__title { font-size: 20px; font-weight: 900; color: var(--la-ink);
}
.la-fatal__p { color: var(--la-muted); font-size: 13px;
}
.la-fatal__btn { margin-top: 8px; padding: 11px 26px; border-radius: 30px; color: #FFF; background: var(--la-primary); font-weight: 800; cursor: pointer; box-shadow: 0 4px 0 var(--la-btn-shadow);
}