/* App – Levelweg (Design: App-Level.dc.html) */
.lw-hero { background: var(--ap-card-grad); border: 1px solid var(--ap-gold); border-radius: 24px; padding: 16px; }
.lw-hero__top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.lw-hero__xp { font-weight: 600; font-size: 26px; }
.lw-hero__xp span { font-size: 13px; color: var(--ap-muted); }
.lw-hero__in { font-size: 13px; }
.lw-hero__bar { height: 12px; border-radius: 999px; background: var(--ap-line); overflow: hidden; margin-top: 10px; }
.lw-hero__bar span { display: block; height: 100%; background: linear-gradient(90deg, #B7791F, #E3B341); border-radius: 999px; }
.lw-hero__next { font-size: 14px; margin-top: 10px; }
.lw-hero__next strong { color: var(--ap-gold-t); }

.lw-tro { background: var(--ap-card); border: 1px solid var(--ap-line); border-radius: 22px; padding: 12px 14px; display: flex; gap: 12px; align-items: center; }
.lw-tro svg { flex: none; }
.lw-tro__t { flex: 1; min-width: 0; }
.lw-tro__t .ap-mono { font-size: 10px; color: var(--ap-muted); }
.lw-tro__t strong { font-size: 16px; }

.lw-list { background: var(--ap-card); border: 1px solid var(--ap-line); border-radius: 22px; padding: 6px 14px; }
.lw-row { display: flex; gap: 12px; align-items: center; padding: 9px 0; }
.lw-row + .lw-row, .lw-ord + .lw-ord { border-top: 1px solid var(--ap-line); }
.lw-num { width: 34px; height: 34px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--ap-head); font-stretch: 125%; font-weight: 900; font-size: 14px; background: var(--ap-card2); color: var(--ap-muted); border: 1.5px solid var(--ap-line); }
.lw-t { flex: 1; min-width: 0; font-size: 14px; font-weight: 500; color: var(--ap-muted); }
.lw-tr { font-size: 11px; color: var(--ap-gold-t); font-weight: 600; }
.lw-here { font-size: 10px; color: var(--ap-gold-t); font-weight: 600; letter-spacing: .04em; }
.lw-beer { display: flex; color: var(--ap-gold-t); flex: none; }
.lw-xp { font-size: 11px; color: var(--ap-muted); flex: none; min-width: 42px; text-align: right; }
.lw-row.is-done .lw-num { background: rgba(34,197,94,.16); color: var(--ap-green-t); border-color: var(--ap-green); }
.lw-row.is-done .lw-t { color: var(--ap-text); }
.lw-row.is-cur .lw-num { background: var(--ap-gold); color: var(--ap-on-gold); border-color: var(--ap-gold); }
.lw-row.is-cur .lw-t { font-weight: 700; color: var(--ap-text); }

.lw-all { align-self: center; background: none; border: 0; color: var(--ap-gold-t); font-size: 13px; font-weight: 600; padding: 4px 12px; min-height: 44px; cursor: pointer; }
.lw-all:hover { color: var(--ap-text); }
.lw-alle { display: flex; flex-direction: column; gap: 12px; }
.lw-alle[hidden] { display: none; }
.lw-h { margin: 10px 2px 0; scroll-margin-top: 16px; }
.lw-intro { margin: -4px 2px 0; line-height: 1.45; }
.lw-rank { display: flex; flex-direction: column; gap: 8px; }
.lw-rank__h { display: flex; flex-direction: column; padding: 4px 2px 0; }
.lw-rank__h .ap-mono { font-size: 10px; color: var(--ap-gold-t); letter-spacing: .04em; }
.lw-rank__h strong { font-size: 16px; }
.lw-rank.is-cur .lw-list { border-color: rgba(227,179,65,.5); }
.lw-cups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.lw-cup { background: var(--ap-card); border: 1px solid var(--ap-line); border-radius: 18px; padding: 10px 8px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; }
.lw-cup strong { font-size: 13px; line-height: 1.2; }
.lw-cup .ap-mono { font-size: 10px; color: var(--ap-muted); }
.lw-cup.is-off svg { opacity: .35; }
.lw-cup.is-off strong { color: var(--ap-muted); }
.lw-ord { display: flex; gap: 12px; align-items: center; padding: 10px 0; }
.lw-ord svg { flex: none; }
.lw-ord__t { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 14px; }
.lw-ord__s { font-size: 12px; color: var(--ap-soft); line-height: 1.35; margin-top: 2px; }
.lw-ord__v { font-size: 11px; color: var(--ap-muted); margin-top: 2px; }
.lw-ord__xp { flex: none; font-size: 11px; font-weight: 600; color: var(--ap-gold-t); text-align: right; }
.lw-ord__ok { color: var(--ap-green-t); font-size: 9px; }
.lw-ord:not(.is-on) .lw-ord__t strong { color: var(--ap-soft); }