/* Lumorra – Kompatibilitás-riport (app.css + styles.css tokenekre építve) */

.back-link { display: inline-block; margin-bottom: 1rem; font-weight: 600; color: var(--brand-dark); }
.back-link:hover { text-decoration: underline; }

/* Fejléc: pontszám-gyűrű + partner adatai */
.report-hero {
  display: flex; align-items: center; gap: 1.4rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-soft); padding: 1.4rem 1.5rem; margin-bottom: 1.2rem;
}
.ring {
  --val: 0; flex: 0 0 auto; width: 104px; height: 104px; border-radius: 50%;
  background: conic-gradient(var(--brand) calc(var(--val) * 1%), var(--line) 0);
  display: grid; place-items: center; position: relative;
}
.ring::before { content: ""; position: absolute; inset: 9px; background: #fff; border-radius: 50%; }
.ring span { position: relative; font-size: 1.9rem; font-weight: 800; color: var(--brand-dark); line-height: 1; }
.ring span small { font-size: .9rem; }
.hero-meta h1 { margin: 0 0 .2rem; font-size: 1.6rem; color: var(--ink); }
.hero-city { margin: 0 0 .5rem; font-size: .92rem; }
.hero-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; }
.hero-tags span { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 999px; padding: .25rem .7rem; font-size: .8rem; color: var(--ink-soft); }

.report-ai { background: var(--brand-light); border-radius: 12px; padding: 1rem 1.1rem; font-size: .96rem; color: var(--ink); margin-bottom: 1.2rem; line-height: 1.55; }

.rcapped { background: #fff7ec; border: 1px solid #f0c987; border-radius: 12px; padding: .85rem 1rem; font-size: .9rem; color: #8a5a1a; margin-bottom: 1.2rem; }

/* Dimenzió-bontás */
.report-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-bottom: 1.2rem; }
.dim-group { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-soft); padding: 1.1rem 1.2rem; }
.dim-group h2 { font-size: 1.02rem; color: var(--ink); margin: 0 0 .9rem; }
.dim-group-full { grid-column: 1 / -1; }

.dim { margin-bottom: 1rem; }
.dim:last-child { margin-bottom: 0; }
.dim-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .35rem; }
.dim-name { font-weight: 600; font-size: .92rem; color: var(--ink); }
.dim-eq { font-weight: 800; font-size: .82rem; white-space: nowrap; }

.bar { display: grid; grid-template-columns: 24px 1fr 40px; align-items: center; gap: .5rem; margin-top: .3rem; }
.bar-lbl { font-size: .74rem; color: var(--ink-soft); font-weight: 600; }
.bar-val { font-size: .74rem; color: var(--ink-soft); text-align: right; }
.track { height: 8px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.track i { display: block; height: 100%; border-radius: 999px; }

.att-row { display: flex; gap: 1.2rem; font-size: .9rem; color: var(--ink); }
.att-row b { color: var(--ink-soft); font-weight: 700; }

/* Miért / Mire figyelj */
.rblock { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-soft); padding: 1.1rem 1.2rem; margin-bottom: 1.2rem; }
.rblock h2 { font-size: 1.02rem; margin: 0 0 .7rem; color: var(--ink); }
.rchips { display: flex; flex-wrap: wrap; gap: .5rem; }
.rchips span { border-radius: 999px; padding: .3rem .8rem; font-size: .82rem; font-weight: 600; }
.rblock-why .rchips span { background: var(--brand-light); border: 1px solid var(--brand-mint); color: var(--brand-darker); }
.rblock-watch .rchips span { background: #fff7ec; border: 1px solid #f0c987; color: #8a5a1a; }

.report-legend { font-size: .82rem; color: var(--ink-soft); display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.report-legend span { display: inline-block; padding: .1rem .5rem; border-radius: 999px; font-weight: 700; color: #fff; }
.lg-te { background: var(--brand); }
.lg-o { background: var(--brand-mint); }

.report-empty { text-align: center; padding: 3rem 1rem; }
.report-empty h1 { color: var(--ink); }
.report-empty .btn { margin-top: .6rem; }

@media (max-width: 720px) {
  .report-cols { grid-template-columns: 1fr; }
  .dim-group:first-child { grid-column: auto; }
  .report-hero { flex-direction: column; text-align: center; }
}