.listing-quality { display: grid; gap: 1rem; }
.listing-quality__header { max-width: 920px; }
.listing-quality__form, .listing-quality__result { display: grid; gap: .8rem; min-width: 0; }
.listing-quality__panel, .listing-result__panel, .listing-result__hero, .listing-result__details {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  min-width: 0;
  padding: clamp(.85rem, 2vw, 1.15rem);
}
.listing-quality__panel h2, .listing-result__panel h2 { color: var(--navy-dark); font-size: 1rem; margin: 0 0 .75rem; }
.listing-quality__notice { background: color-mix(in srgb, var(--primary) 7%, var(--surface)); border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--border)); border-radius: var(--radius-sm); padding: .75rem .85rem; }
.listing-quality__notice strong { color: var(--navy-dark); font-size: .9rem; }
.listing-quality__notice p { color: var(--text-secondary); font-size: .8rem; line-height: 1.45; margin: .2rem 0 0; }
.listing-quality__field-grid { display: grid; gap: .65rem; grid-template-columns: 1fr; }
.listing-quality__field > .field__label { display: block; font-size: .82rem; font-weight: 750; margin-bottom: .25rem; }
.listing-quality__field textarea { min-height: 132px; }
.listing-quality__type-status { color: var(--text-secondary); font-size: .78rem; margin: .55rem 0 0; }
.listing-quality__details { border: 1px solid var(--border); border-radius: var(--radius-sm); margin-top: .65rem; }
.listing-quality__details > summary { cursor: pointer; font-size: .84rem; font-weight: 800; padding: .7rem .8rem; }
.listing-quality__feature-fields { border-top: 1px solid var(--border); padding: .8rem; }
.listing-quality__photo-list { display: grid; gap: .5rem; grid-template-columns: 1fr; margin-top: .65rem; }
.listing-quality__photo { align-items: center; border: 1px solid var(--border); border-radius: var(--radius-sm); display: grid; gap: .55rem; grid-template-columns: 58px minmax(0, 1fr) auto; padding: .45rem; }
.listing-quality__photo img { border-radius: .45rem; height: 52px; object-fit: cover; width: 58px; }
.listing-quality__photo-copy { display: grid; min-width: 0; }
.listing-quality__photo-copy strong { font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.listing-quality__photo-copy span { color: var(--text-secondary); font-size: .7rem; }
.listing-quality__photo .button { font-size: .72rem; min-height: 38px; padding: .35rem .55rem; }
.listing-quality__errors { background: var(--danger-soft); border: 1px solid color-mix(in srgb, var(--danger) 28%, var(--border)); border-radius: var(--radius-sm); color: var(--danger-text); font-size: .82rem; padding: .65rem .8rem; }
.listing-quality__errors p { margin: .2rem 0; }
.listing-quality__progress { align-items: start; background: color-mix(in srgb, var(--primary) 8%, var(--surface)); border-radius: var(--radius-sm); display: grid; font-size: .82rem; gap: .15rem; padding: .7rem .8rem; }
.listing-quality__progress span { color: var(--text-secondary); }
.listing-result__hero { align-items: center; background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 10%, var(--surface)), var(--surface)); display: flex; gap: 1rem; }
.listing-result__score { align-items: baseline; background: var(--primary); border-radius: 50%; color: white; display: flex; flex: 0 0 94px; height: 94px; justify-content: center; padding-top: 25px; }
.listing-result__score span { font-size: 2rem; font-weight: 900; line-height: 1; }
.listing-result__score small { font-size: .72rem; font-weight: 700; }
.listing-result__summary { min-width: 0; }
.listing-result__summary .eyebrow { margin-bottom: .15rem; }
.listing-result__summary h2 { color: var(--navy-dark); font-size: clamp(1.35rem, 4vw, 1.8rem); margin: 0 0 .35rem; }
.listing-result__status, .severity { border-radius: 99px; display: inline-flex; font-size: .7rem; font-weight: 800; padding: .28rem .5rem; }
.listing-result__status { background: var(--accent-soft); color: var(--primary); }
.score-difference { font-size: .75rem; font-weight: 750; margin: .45rem 0 0; }
.score-difference--positive { color: var(--success-text); }
.score-difference--negative { color: var(--danger-text); }
.score-row { display: grid; gap: .3rem; margin-top: .65rem; }
.score-row__label { display: flex; font-size: .8rem; justify-content: space-between; }
.score-row__track { background: var(--background); border-radius: 99px; height: 7px; overflow: hidden; }
.score-row__fill { background: linear-gradient(90deg, var(--primary), var(--success)); border-radius: inherit; display: block; height: 100%; }
.listing-result__strengths ul, .listing-result__detail-block ul { margin: .2rem 0 0; padding-left: 1.15rem; }
.listing-result__strengths li, .listing-result__detail-block li { font-size: .82rem; line-height: 1.45; margin: .3rem 0; }
.action-list { display: grid; gap: .55rem; list-style: none; margin: 0; padding: 0; }
.action-list li { align-items: flex-start; display: flex; font-size: .82rem; gap: .5rem; line-height: 1.4; }
.severity { flex: 0 0 auto; }
.severity--critical { background: var(--danger-soft); color: var(--danger-text); }
.severity--important { background: color-mix(in srgb, #f59e0b 14%, var(--surface)); color: #9a5b00; }
.severity--improvement { background: var(--accent-soft); color: var(--primary); }
.listing-result__suggestions { display: grid; gap: .55rem; }
.listing-result__suggestion { background: var(--background); border: 1px solid var(--border); border-radius: var(--radius-sm); display: grid; gap: .35rem; padding: .7rem; }
.listing-result__suggestion > span { color: var(--text-secondary); font-size: .7rem; font-weight: 750; text-transform: uppercase; }
.listing-result__suggestion > strong { color: var(--navy-dark); font-size: .86rem; line-height: 1.4; }
.listing-result__inline-actions, .listing-result__footer-actions { display: flex; flex-wrap: wrap; gap: .45rem; }
.listing-result__inline-actions .button { font-size: .72rem; min-height: 38px; padding: .4rem .65rem; }
.listing-result__rewritten { border-top: 1px solid var(--border); margin-top: .8rem; padding-top: .8rem; }
.listing-result__rewritten h3 { font-size: .9rem; margin: 0 0 .45rem; }
.listing-result__rewritten p { background: var(--background); border-radius: var(--radius-sm); font-size: .82rem; line-height: 1.55; margin: 0 0 .65rem; padding: .75rem; white-space: pre-wrap; }
.listing-result__details > summary { cursor: pointer; font-size: .88rem; font-weight: 800; }
.listing-result__detail-grid { display: grid; gap: .65rem; margin-top: .8rem; }
.listing-result__detail-block { background: var(--background); border-radius: var(--radius-sm); padding: .7rem; }
.listing-result__detail-block h3 { font-size: .85rem; margin: 0; }
.listing-result__detail-block p { color: var(--text-secondary); font-size: .78rem; margin: .4rem 0 0; }
.listing-result__footer-actions .button { flex: 1 1 190px; }
.listing-result__legal { color: var(--text-secondary); font-size: .7rem; line-height: 1.45; margin: 0; text-align: center; }
.listing-ai { border-color: color-mix(in srgb, var(--primary) 32%, var(--border)); background: linear-gradient(145deg, color-mix(in srgb, var(--primary) 5%, var(--surface)), var(--surface)); }
.listing-ai__intro { color: var(--text-secondary); font-size: .82rem; line-height: 1.5; margin: 0 0 .7rem; }
.listing-ai__actions { display: flex; }
.listing-ai__actions .button { min-height: 44px; width: 100%; }
.listing-ai__status { color: var(--text-secondary); font-size: .78rem; min-height: 1.2rem; padding-top: .5rem; }
.listing-ai__output { display: grid; gap: .7rem; margin-top: .7rem; }
.listing-ai__titles { display: grid; gap: .55rem; grid-template-columns: 1fr; }
.listing-ai__title-card { background: var(--background); border: 1px solid var(--border); border-radius: var(--radius-sm); display: grid; gap: .4rem; padding: .7rem; }
.listing-ai__title-card > span { color: var(--primary); font-size: .7rem; font-weight: 850; letter-spacing: .03em; text-transform: uppercase; }
.listing-ai__title-card > strong { color: var(--navy-dark); font-size: .86rem; line-height: 1.4; }
.listing-ai__description, .listing-ai__missing { border-top: 1px solid var(--border); padding-top: .7rem; }
.listing-ai__description h3, .listing-ai__missing h3 { color: var(--navy-dark); font-size: .88rem; margin: 0 0 .45rem; }
.listing-ai__description > p { background: var(--background); border-radius: var(--radius-sm); font-size: .82rem; line-height: 1.6; margin: 0 0 .65rem; padding: .75rem; white-space: pre-wrap; }
.listing-ai__missing p, .listing-ai__missing li { color: var(--text-secondary); font-size: .78rem; line-height: 1.45; }
.listing-ai__missing ul { margin: 0; padding-left: 1.15rem; }
.listing-ai__legal { color: var(--text-secondary); font-size: .7rem; line-height: 1.45; margin: .7rem 0 0; }
.listing-membership-gate { background: color-mix(in srgb, var(--primary) 7%, var(--surface)); border: 1px dashed color-mix(in srgb, var(--primary) 38%, var(--border)); border-radius: var(--radius-sm); padding: .8rem; }
.listing-membership-gate--prominent { border-style: solid; box-shadow: var(--shadow-sm); padding: 1rem; }
.listing-membership-gate strong { color: var(--navy-dark); font-size: .9rem; }
.listing-membership-gate p { color: var(--text-secondary); font-size: .8rem; line-height: 1.45; margin: .25rem 0 .7rem; }
.listing-membership-gate__actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.listing-membership-gate__actions .button { flex: 1 1 125px; justify-content: center; min-height: 42px; text-decoration: none; }

@media (min-width: 600px) {
  .listing-quality__field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .listing-quality__panel > .listing-quality__field:first-of-type { grid-column: 1 / -1; }
  .listing-quality__photo-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .listing-result__detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .listing-ai__titles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 992px) {
  .listing-quality { grid-template-columns: minmax(390px, .9fr) minmax(420px, 1.1fr); }
  .listing-quality__result { align-self: start; position: sticky; top: calc(var(--header-height) + 1rem); }
}

@media (max-width: 374px) {
  .listing-result__hero { align-items: flex-start; }
  .listing-result__score { flex-basis: 76px; height: 76px; padding-top: 20px; }
  .listing-result__score span { font-size: 1.55rem; }
}