/* Ehna Reputation (profile card, trait picker, leaderboard) — theme tokens only, light & dark */
.ehna-rep-card { position: relative; overflow: hidden; border-radius: 1.75rem; padding: 1.1rem 1.15rem 1rem; margin-bottom: 1.25rem; background: linear-gradient(140deg, color-mix(in oklab, var(--lv) 16%, var(--color-base-100)), var(--color-base-100) 60%); border: 1px solid color-mix(in oklab, var(--lv) 22%, transparent); }
.ehna-rep-card-top { display: flex; align-items: center; gap: .8rem; }
.ehna-rep-badge { display: inline-flex; align-items: center; justify-content: center; width: 3.2rem; height: 3.2rem; flex: none; border-radius: 1.1rem; font-size: 1.8rem; background: color-mix(in oklab, var(--lv) 18%, var(--color-base-100)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--lv) 35%, transparent); }
.ehna-rep-card-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ehna-rep-card-kicker { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: color-mix(in oklab, var(--color-base-content) 55%, transparent); }
.ehna-rep-card-level { font-size: 1.2rem; font-weight: 800; color: var(--lv); line-height: 1.2; }
.ehna-rep-card-rank { font-size: .8rem; color: color-mix(in oklab, var(--color-base-content) 65%, transparent); }
.ehna-rep-card-rank b { color: var(--color-base-content); }
.is-up { color: var(--color-success); font-weight: 700; }
.ehna-rep-ring { --p: 100; width: 3.1rem; height: 3.1rem; flex: none; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--color-success) calc(var(--p) * 1%), color-mix(in oklab, var(--color-error) 70%, transparent) 0); }
.ehna-rep-ring span { width: 2.45rem; height: 2.45rem; border-radius: 50%; display: grid; place-items: center; font-size: .7rem; font-weight: 800; background: var(--color-base-100); }
.ehna-rep-bar { height: .5rem; margin-top: .9rem; border-radius: 99px; background: color-mix(in oklab, var(--color-base-content) 9%, transparent); overflow: hidden; }
.ehna-rep-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--lv), var(--color-primary)); transition: width .5s ease; }
.ehna-rep-next { margin-top: .4rem; font-size: .75rem; color: color-mix(in oklab, var(--color-base-content) 60%, transparent); }
.ehna-rep-known { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-top: .75rem; font-size: .75rem; color: color-mix(in oklab, var(--color-base-content) 60%, transparent); }
.ehna-rep-chip { display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .55rem; border-radius: 99px; font-size: .75rem; font-weight: 600; color: var(--color-base-content); background: color-mix(in oklab, var(--tc) 14%, var(--color-base-100)); border: 1px solid color-mix(in oklab, var(--tc) 30%, transparent); }
.ehna-rep-chip b { color: var(--tc); }
.ehna-rep-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }
.ehna-rep-btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .5rem .9rem; border-radius: .85rem; font-size: .82rem; font-weight: 700; background: color-mix(in oklab, var(--color-base-content) 6%, var(--color-base-100)); border: 1px solid color-mix(in oklab, var(--color-base-content) 10%, transparent); color: var(--color-base-content) !important; cursor: pointer; }
.ehna-rep-btn.is-primary { background: var(--color-primary); border-color: transparent; color: var(--color-primary-content) !important; }
.ehna-rep-btn b { padding: 0 .4rem; border-radius: 99px; background: var(--color-error); color: #fff; font-size: .7rem; }

/* picker */
.ehna-rep-who { display: flex; align-items: center; gap: .75rem; padding: .75rem; border-radius: 1.1rem; background: color-mix(in oklab, var(--color-base-content) 4%, var(--color-base-100)); }
.ehna-rep-who img { width: 2.8rem; height: 2.8rem; border-radius: 50%; object-fit: cover; }
.ehna-rep-who-main { display: flex; flex-direction: column; gap: .2rem; flex: 1; min-width: 0; }
.ehna-rep-level { align-self: flex-start; padding: .1rem .5rem; border-radius: 99px; font-size: .72rem; font-weight: 700; color: var(--lv); background: color-mix(in oklab, var(--lv) 14%, transparent); }
.ehna-rep-who-score { display: flex; flex-direction: column; align-items: center; }
.ehna-rep-who-score b { font-size: 1.35rem; font-weight: 800; line-height: 1; }
.ehna-rep-who-score small { font-size: .7rem; opacity: .6; }
.ehna-rep-quota { margin: .6rem 0 .2rem; font-size: .78rem; color: color-mix(in oklab, var(--color-base-content) 65%, transparent); }
.ehna-rep-sec { display: flex; align-items: center; gap: .4rem; margin: .9rem 0 .5rem; font-size: .85rem; font-weight: 800; }
.ehna-rep-sec small { font-weight: 500; font-size: .72rem; opacity: .6; }
.ehna-rep-sec.is-pos { color: var(--color-success); }
.ehna-rep-sec.is-neg { color: var(--color-error); }
.ehna-rep-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .45rem; }
@media (max-width: 520px) { .ehna-rep-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ehna-rep-trait { position: relative; display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: .6rem .3rem .45rem; border-radius: 1rem; background: color-mix(in oklab, var(--tc) 9%, var(--color-base-100)); border: 1px solid color-mix(in oklab, var(--tc) 25%, transparent); cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
.ehna-rep-trait:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px 16px -8px var(--tc); }
.ehna-rep-trait:disabled { opacity: .38; cursor: not-allowed; }
.ehna-rep-trait.is-busy { opacity: .6; pointer-events: none; }
.ehna-rep-trait.is-done { outline: 2px solid var(--tc); }
.ehna-rep-emoji { font-size: 1.6rem; line-height: 1; }
.ehna-rep-label { font-size: .72rem; font-weight: 700; text-align: center; line-height: 1.15; color: var(--color-base-content); }
.ehna-rep-pts { font-size: .65rem; font-weight: 800; color: var(--tc); }
.ehna-rep-fine { margin-top: .9rem; font-size: .72rem; color: color-mix(in oklab, var(--color-base-content) 55%, transparent); }

/* negatives / appeals */
.ehna-rep-negrow { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; padding: .6rem 0; border-bottom: 1px solid color-mix(in oklab, var(--color-base-content) 8%, transparent); }
.ehna-rep-negmain { display: flex; flex-direction: column; flex: 1; min-width: 6rem; }
.ehna-rep-negmain small { opacity: .6; font-size: .72rem; }
.ehna-rep-dispute { display: flex; gap: .4rem; flex: 1 1 14rem; }
.ehna-rep-dispute input { flex: 1; min-width: 0; padding: .45rem .7rem; border-radius: .7rem; font-size: .8rem; background: var(--color-base-100); border: 1px solid color-mix(in oklab, var(--color-base-content) 15%, transparent); color: inherit; }
.ehna-rep-tag { padding: .2rem .55rem; border-radius: 99px; font-size: .7rem; font-weight: 700; background: color-mix(in oklab, var(--color-warning) 20%, transparent); }

/* leaderboard */
.ehna-rep-board { border-radius: 1.75rem; padding: 1.1rem; margin-bottom: 1.5rem; background: var(--color-base-100); }
.ehna-rep-board-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .8rem; }
.ehna-rep-board-head h2 { font-size: 1.1rem; font-weight: 800; display: flex; align-items: center; gap: .45rem; }
.ehna-rep-tabs { display: inline-flex; padding: .2rem; border-radius: .9rem; background: color-mix(in oklab, var(--color-base-content) 6%, var(--color-base-100)); }
.ehna-rep-tabs a { padding: .35rem .8rem; border-radius: .7rem; font-size: .8rem; font-weight: 700; color: color-mix(in oklab, var(--color-base-content) 65%, transparent) !important; }
.ehna-rep-tabs a.is-active { background: var(--color-base-100); color: var(--color-base-content) !important; box-shadow: 0 1px 4px rgba(0, 0, 0, .12); }
.ehna-rep-filters { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .6rem; }
.ehna-rep-filters a { flex: none; display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .65rem; border-radius: 99px; font-size: .75rem; font-weight: 600; border: 1px solid color-mix(in oklab, var(--color-base-content) 12%, transparent); color: var(--color-base-content) !important; }
.ehna-rep-filters a.is-active { background: var(--color-primary); border-color: transparent; color: var(--color-primary-content) !important; }
.ehna-rep-row { display: flex; align-items: center; gap: .7rem; padding: .55rem .4rem; border-radius: 1rem; }
.ehna-rep-row:hover { background: color-mix(in oklab, var(--color-base-content) 4%, transparent); }
.ehna-rep-pos { width: 1.8rem; text-align: center; font-weight: 800; font-size: .9rem; color: color-mix(in oklab, var(--color-base-content) 55%, transparent); }
.ehna-rep-row:nth-child(1) .ehna-rep-pos, .ehna-rep-row:nth-child(2) .ehna-rep-pos, .ehna-rep-row:nth-child(3) .ehna-rep-pos { font-size: 1.25rem; }
.ehna-rep-row img { width: 2.5rem; height: 2.5rem; border-radius: 50%; object-fit: cover; }
.ehna-rep-row-main { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.ehna-rep-row-main strong { font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--color-base-content); }
.ehna-rep-row-main small { font-size: .72rem; color: color-mix(in oklab, var(--color-base-content) 55%, transparent); }
.ehna-rep-row-pts { font-weight: 800; font-size: .95rem; color: var(--color-primary); white-space: nowrap; }
.ehna-rep-levels { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .8rem; }
.ehna-rep-levels span { display: inline-flex; align-items: center; gap: .25rem; padding: .25rem .55rem; border-radius: 99px; font-size: .72rem; font-weight: 700; color: var(--lv); background: color-mix(in oklab, var(--lv) 12%, transparent); }

/* podium (top 3) */
.ehna-rep-podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: .6rem; margin: 1rem 0 .4rem; }
.ehna-rep-pod { position: relative; display: flex; flex-direction: column; align-items: center; gap: .3rem; min-width: 0; padding: 1rem .5rem .9rem; border-radius: 1.4rem; text-align: center; color: var(--color-base-content) !important; background: linear-gradient(180deg, color-mix(in oklab, var(--pod) 22%, var(--color-base-100)), var(--color-base-100)); border: 1px solid color-mix(in oklab, var(--pod) 35%, transparent); transition: transform .15s ease; }
.ehna-rep-pod:hover { transform: translateY(-3px); }
.ehna-rep-pod.is-p1 { --pod: #f5b301; padding-top: 1.6rem; padding-bottom: 1.3rem; box-shadow: 0 18px 40px -22px #f5b301; }
.ehna-rep-pod.is-p2 { --pod: #94a3b8; }
.ehna-rep-pod.is-p3 { --pod: #c2733c; }
.ehna-rep-crown { position: absolute; top: -1.05rem; font-size: 1.6rem; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .2)); }
.ehna-rep-pod-av { position: relative; display: inline-flex; }
.ehna-rep-pod-av img { width: 4.2rem; height: 4.2rem; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--color-base-100), 0 0 0 6px var(--pod); }
.ehna-rep-pod.is-p1 .ehna-rep-pod-av img { width: 5.4rem; height: 5.4rem; }
.ehna-rep-pod-av b { position: absolute; bottom: -.35rem; left: 50%; transform: translateX(-50%); min-width: 1.6rem; height: 1.6rem; display: grid; place-items: center; border-radius: 999px; font-size: .8rem; color: #fff; background: var(--pod); box-shadow: 0 0 0 2px var(--color-base-100); }
.ehna-rep-pod strong { margin-top: .45rem; max-width: 100%; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ehna-rep-pod small { font-size: .72rem; font-weight: 700; }
.ehna-rep-pod-pts { margin-top: .15rem; font-size: 1.15rem; font-weight: 900; color: var(--color-base-content); }
.ehna-rep-pod-pts i { font-style: normal; font-size: .7rem; font-weight: 600; opacity: .55; }
@media (max-width: 480px) { .ehna-rep-pod-av img { width: 3.3rem; height: 3.3rem; } .ehna-rep-pod.is-p1 .ehna-rep-pod-av img { width: 4.2rem; height: 4.2rem; } .ehna-rep-pod-pts { font-size: .95rem; } }
/* the rest: compact rows with a bar against the leader */
.ehna-rep-list { display: flex; flex-direction: column; gap: .15rem; margin-top: .5rem; }
.ehna-rep-row { display: grid; grid-template-columns: 2rem 2.5rem minmax(0, 1fr) auto; align-items: center; gap: .65rem; }
.ehna-rep-row .ehna-rep-pos { width: auto; font-size: .9rem !important; }
.ehna-rep-row small em { font-style: normal; opacity: .75; }
.ehna-rep-meter { display: block; height: 4px; margin-top: .3rem; border-radius: 99px; background: color-mix(in oklab, var(--color-base-content) 8%, transparent); overflow: hidden; }
.ehna-rep-meter span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--color-primary), color-mix(in oklab, var(--color-primary) 55%, #fff)); }
.ehna-rep-row-pts { padding: .25rem .6rem; border-radius: 999px; font-size: .82rem; background: color-mix(in oklab, var(--color-primary) 12%, transparent); }
.ehna-rep-row.is-more { display: none; }
.ehna-rep-board.show-all .ehna-rep-row.is-more { display: grid; }
.ehna-rep-more { width: 100%; margin-top: .6rem; }