feat: multi-tier agent hierarchy, wallet ledger, and player UX polish

Add configurable agent max level and default sub-agent credit ratio, per-agent block direct player login on suspend, admin/agent wallet transaction views, and match detail my-bets section with refreshed player card styling.

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/player/src/components/parlay/ParlayPanel.vue

@@ -8,8 +8,10 @@ import { PARLAY_MARKET_TYPES, PARLAY_SELECTION_KEYS, PARLAY_MARKET_GROUPS } from
 import BetGuideHelp from '../BetGuideHelp.vue';
 import GoldSpinner from '../GoldSpinner.vue';
 import TeamEmblem from '../TeamEmblem.vue';
-import StatusWatermark from '../StatusWatermark.vue';
-import { matchPhaseLabel, matchPhaseVariant, type MatchPhase } from '../../utils/matchPhase';
+import cardBg from '../../assets/images/card-bg.png';
+import { matchPhaseLabel, type MatchPhase } from '../../utils/matchPhase';
+
+const matchCardBg = `url(${cardBg})`;
 import { useOnLocaleChange } from '../../composables/useOnLocaleChange';
 
 type TimeFilter = 'all' | 'today';
@@ -301,18 +303,22 @@ function toggleCollapse(id: string) {
         }"
       >
         <button type="button" class="match-head" @click="toggleCollapse(match.id)">
-          <StatusWatermark
-            v-if="(match.matchPhase ?? (match.bettingOpen === false ? 'closed_pending' : 'open')) !== 'open'"
-            :label="matchPhaseLabel(t, match.matchPhase ?? 'closed_pending')"
-            :variant="matchPhaseVariant(match.matchPhase ?? 'closed_pending')"
-            size="sm"
-          />
+          <span
+            v-if="(match.matchPhase ?? (match.bettingOpen === false ? 'closed_pending' : 'open')) === 'settled'"
+            class="status-tag status-tag--settled"
+          >{{ matchPhaseLabel(t, 'settled') }}</span>
+          <span
+            v-else-if="(match.matchPhase ?? (match.bettingOpen === false ? 'closed_pending' : 'open')) === 'closed_pending'"
+            class="status-tag status-tag--pending"
+          >{{ matchPhaseLabel(t, 'closed_pending') }}</span>
+
           <div class="match-head-top">
-            <span class="m-league">{{ match.leagueName }}</span>
-            <span class="toggle-dot" :class="{ open: !collapsed.has(match.id) }">
-              {{ collapsed.has(match.id) ? '+' : '−' }}
+            <span class="toggle-icon" :class="{ open: !collapsed.has(match.id) }" aria-hidden="true">
+              <span class="toggle-mark">{{ collapsed.has(match.id) ? '+' : '−' }}</span>
             </span>
+            <span class="m-league">{{ match.leagueName }}</span>
           </div>
+
           <div class="match-head-teams">
             <div class="m-team home">
               <TeamEmblem
@@ -331,7 +337,6 @@ function toggleCollapse(id: string) {
                 {{ match.score.ftHome }} - {{ match.score.ftAway }}
               </span>
               <span v-else class="m-time">{{ formatKickoff(match.startTime) }}</span>
-              <span class="m-vs">VS</span>
             </div>
             <div class="m-team away">
               <span class="m-name">{{ match.awayTeamName }}</span>
@@ -491,25 +496,36 @@ function toggleCollapse(id: string) {
 }
 
 .match-card {
-  background: #141414;
-  border: 1px solid #2a2a2a;
+  position: relative;
+  background: linear-gradient(180deg, #1a1a1a 0%, #0d0d0d 100%);
+  border: 1px solid rgba(140, 140, 140, 0.35);
   border-radius: 8px;
   overflow: hidden;
 }
 
+.match-card::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(135deg, rgba(100, 100, 100, 0.08) 0%, transparent 50%, rgba(80, 80, 80, 0.05) 100%);
+  pointer-events: none;
+  z-index: 0;
+}
+
 .match-card.collapsed {
   border-color: #222;
 }
 
 .match-head {
   position: relative;
+  z-index: 1;
   overflow: hidden;
   width: 100%;
   display: flex;
   flex-direction: column;
   align-items: stretch;
-  gap: 4px;
-  padding: 8px 10px;
+  gap: 8px;
+  padding: 10px 12px 12px;
   background: none;
   border: none;
   color: inherit;
@@ -518,6 +534,16 @@ function toggleCollapse(id: string) {
   text-align: left;
 }
 
+.match-head::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: v-bind(matchCardBg) center top / 100% auto no-repeat;
+  opacity: 0.25;
+  z-index: -1;
+  pointer-events: none;
+}
+
 .match-head:active {
   background: rgba(255, 255, 255, 0.015);
 }
@@ -525,22 +551,22 @@ function toggleCollapse(id: string) {
 .match-head-top {
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  gap: 8px;
   min-width: 0;
 }
 
-.match-head-teams {
+.toggle-icon {
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 6px;
+  gap: 8px;
   min-width: 0;
 }
 
 .m-team {
   display: flex;
   align-items: center;
-  gap: 4px;
+  gap: 6px;
   flex: 1;
   min-width: 0;
 }
@@ -553,15 +579,15 @@ function toggleCollapse(id: string) {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 1px;
   flex-shrink: 0;
-  padding: 0 4px;
+  min-width: 50px;
+  padding: 0 2px;
 }
 
 .m-name {
-  font-size: 12px;
+  font-size: 13px;
   font-weight: 800;
-  color: var(--primary-light);
+  color: #fff;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -575,40 +601,45 @@ function toggleCollapse(id: string) {
 }
 
 .m-time {
-  font-size: 10px;
+  font-size: 11px;
+  font-weight: 600;
   color: var(--text-muted);
 }
 
-.toggle-dot {
+.toggle-icon {
   flex-shrink: 0;
-  width: 20px;
-  height: 20px;
+  width: 26px;
+  height: 26px;
   border-radius: 50%;
-  background: #1a1a1a;
-  border: 1px solid #333;
+  background: #141414;
+  border: 1px solid var(--border-gold-soft);
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 13px;
-  font-weight: 900;
-  color: #666;
-  line-height: 1;
-  transition: all 0.15s;
 }
 
-.toggle-dot.open {
+.toggle-icon.open {
   border-color: var(--border-gold-soft);
+}
+
+.toggle-mark {
   color: var(--primary-light);
+  font-size: 17px;
+  font-weight: 900;
+  line-height: 1;
+  margin-top: -1px;
 }
 
 .m-league {
-  font-size: 10px;
+  flex: 1;
+  font-size: 11px;
   color: var(--text-muted);
   font-weight: 600;
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  text-align: center;
 }
 
 .match-head :deep(.team-emblem) {
@@ -618,11 +649,13 @@ function toggleCollapse(id: string) {
 }
 
 .market-blocks {
+  position: relative;
+  z-index: 1;
   display: flex;
   flex-direction: column;
   gap: 8px;
   padding: 8px 10px 10px;
-  border-top: 1px solid #1e1e1e;
+  border-top: 1px solid rgba(140, 140, 140, 0.15);
 }
 
 .market-group {
@@ -699,10 +732,39 @@ function toggleCollapse(id: string) {
   opacity: 0.94;
 }
 
-.m-score {
-  font-size: 12px;
+.status-tag {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 5;
+  font-size: 10px;
   font-weight: 800;
+  padding: 3px 10px;
+  border-radius: 0 6px 0 8px;
+  line-height: 1.3;
+  white-space: nowrap;
+  letter-spacing: 0.02em;
+}
+
+.status-tag--settled {
+  background: linear-gradient(180deg, #2a2a3a 0%, #1a1a28 100%);
+  color: #8a9ab8;
+  border-bottom: 1px solid rgba(120, 140, 180, 0.3);
+  border-left: 1px solid rgba(120, 140, 180, 0.3);
+}
+
+.status-tag--pending {
+  background: linear-gradient(180deg, #3a3a2a 0%, #28251a 100%);
+  color: #c8a84e;
+  border-bottom: 1px solid rgba(200, 168, 78, 0.3);
+  border-left: 1px solid rgba(200, 168, 78, 0.3);
+}
+
+.m-score {
+  font-size: 15px;
+  font-weight: 900;
   color: #fff;
+  letter-spacing: 0.04em;
 }
 
 .odd-label {