/* TESLA RAN ONLINE · Account, Transaction & Rules visual reset */
:root {
  --tp-navy: #020b16;
  --tp-panel: rgba(6, 25, 43, .92);
  --tp-panel-2: rgba(9, 38, 62, .92);
  --tp-cyan: #29dfff;
  --tp-blue: #168cff;
  --tp-white: #f5fbff;
  --tp-silver: #a9bed0;
  --tp-line: rgba(78, 207, 255, .26);
}

body.tr-public-body:has(.apv2-page),
body.tr-public-body:has(.transaction-page),
body.tr-public-body:has(.legal-page) {
  background: radial-gradient(circle at 50% 0, #0b3455 0, #041524 35%, #020a13 76%) fixed !important;
  color: var(--tp-white);
}

.apv2-page,
.transaction-page,
.legal-page {
  min-height: 100vh !important;
  background:
    linear-gradient(rgba(41,223,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(41,223,255,.035) 1px, transparent 1px),
    radial-gradient(circle at 50% 0, rgba(22,140,255,.18), transparent 43%),
    #020d19 !important;
  background-size: 72px 72px, 72px 72px, auto, auto !important;
  font-family: Inter, "Segoe UI", Arial, sans-serif !important;
}

.apv2-hero,
.transaction-header,
.legal-header {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate;
  border: 1px solid rgba(80,213,255,.32) !important;
  border-radius: 22px !important;
  box-shadow: 0 22px 70px rgba(0,0,0,.42), inset 0 0 42px rgba(0,174,255,.08) !important;
}

.apv2-hero {
  min-height: 380px !important;
  margin: 30px auto 0 !important;
  width: min(1320px, calc(100% - 40px)) !important;
  background:
    linear-gradient(90deg, rgba(2,10,20,.72), rgba(2,15,29,.36) 50%, rgba(2,10,20,.72)),
    url('/images/tesla-pages-v3/dashboard-command-center.png') center 48% / cover no-repeat !important;
}

.apv2-hero::before,
.apv2-hero::after { content: none !important; }
.apv2-hero-overlay { background: linear-gradient(180deg, rgba(1,9,18,.1), rgba(1,9,18,.62)) !important; }
.apv2-hero-content { min-height: 380px !important; display: flex !important; flex-direction: column; justify-content: center; align-items: center; }
.apv2-hero-content > span,
.transaction-kicker,
.legal-kicker { color: var(--tp-cyan) !important; font-size: 12px !important; letter-spacing: .32em !important; font-weight: 800 !important; }
.apv2-hero h1,
.transaction-header h1,
.legal-header h1 { color: var(--tp-white) !important; font-family: Inter, "Segoe UI", Arial, sans-serif !important; font-weight: 900 !important; letter-spacing: -.04em !important; text-shadow: 0 0 28px rgba(45,210,255,.35) !important; }
.apv2-hero h1 { font-size: clamp(42px, 6vw, 78px) !important; }
.apv2-hero p { color: #c9e7f7 !important; font-size: 13px !important; letter-spacing: .24em !important; }

.apv2-container { margin-top: -54px !important; position: relative; z-index: 3; }
.apv2-player-summary,
.apv2-page .account-box,
.apv2-page .account-section,
.apv2-page .security-card,
.apv2-page .account-action-card {
  background: linear-gradient(145deg, rgba(10,40,65,.96), rgba(4,18,32,.96)) !important;
  border: 1px solid var(--tp-line) !important;
  border-radius: 16px !important;
  box-shadow: 0 14px 40px rgba(0,0,0,.24) !important;
}
.apv2-player-summary { border-top: 2px solid var(--tp-cyan) !important; }
.apv2-player-summary > div { border-color: rgba(116,205,238,.16) !important; }
.apv2-avatar { background: linear-gradient(145deg, #dff8ff, #49cfff 48%, #086dc4) !important; color: #02101e !important; border-color: #a7efff !important; box-shadow: 0 0 24px rgba(41,223,255,.3) !important; }
.apv2-summary-stat strong.gold,
.apv2-summary-stat strong.blue { color: var(--tp-cyan) !important; }
.apv2-summary-stat strong.offline { color: #a8bccb !important; }
.apv2-page .account-title span,
.apv2-page .account-section-title span,
.apv2-page .account-action-label { color: var(--tp-cyan) !important; }
.apv2-page h1, .apv2-page h2, .apv2-page h3,
.apv2-page .account-title h2,
.apv2-page .account-section-title h2 { font-family: Inter, "Segoe UI", Arial, sans-serif !important; color: var(--tp-white) !important; }
.apv2-page .account-action-button,
.apv2-page button { border-radius: 10px !important; border-color: rgba(67,210,255,.42) !important; background: linear-gradient(135deg, #0b80d9, #19d5f6) !important; color: #fff !important; }

.transaction-page { padding: 34px 20px 100px !important; }
.transaction-container { max-width: 1320px !important; }
.transaction-header {
  min-height: 360px !important;
  padding: 54px 64px !important;
  display: flex !important;
  align-items: center !important;
  background:
    linear-gradient(90deg, rgba(1,10,20,.78), rgba(2,18,35,.42) 52%, rgba(1,10,20,.72)),
    url('/images/tesla-pages-v3/transaction-data-vault.png') center / cover no-repeat !important;
}
.transaction-header::before { background: linear-gradient(180deg, transparent 20%, rgba(1,10,20,.46)) !important; }
.transaction-header h1 { max-width: 780px; margin: 12px 0 !important; font-size: clamp(42px, 6vw, 76px) !important; line-height: .95 !important; }
.transaction-header p { color: #c4ddeb !important; font-size: 14px !important; }
.transaction-header p strong { color: var(--tp-cyan) !important; }
.transaction-back { border: 1px solid rgba(84,219,255,.5) !important; border-radius: 10px !important; background: rgba(2,24,41,.76) !important; color: #eafbff !important; font-size: 11px !important; }
.transaction-stats { gap: 12px !important; margin: 18px 0 !important; }
.transaction-stat,
.transaction-table-card {
  background: linear-gradient(145deg, rgba(10,40,65,.94), rgba(4,18,32,.96)) !important;
  border: 1px solid var(--tp-line) !important;
  border-radius: 14px !important;
}
.transaction-stat { padding: 20px !important; }
.transaction-stat span { color: var(--tp-silver) !important; font-size: 10px !important; }
.transaction-stat strong { color: var(--tp-white) !important; font-size: 28px !important; }
.transaction-filters { gap: 9px !important; }
.transaction-filters a { border-radius: 9px !important; border-color: var(--tp-line) !important; color: #bcd2df !important; font-size: 10px !important; }
.transaction-filters a.active,
.transaction-filters a:hover { background: linear-gradient(135deg, #087bc7, #22d9f8) !important; color: #fff !important; border-color: #7ceaff !important; }
.transaction-table th { background: #0b3553 !important; color: #72e8ff !important; font-size: 10px !important; }
.transaction-table td { color: #bfd0dc !important; border-color: rgba(97,201,238,.15) !important; font-size: 12px !important; }

.legal-page { padding: 34px 20px 100px !important; }
.legal-container { max-width: 1160px !important; }
.legal-header {
  min-height: 350px;
  margin-bottom: 18px !important;
  padding: 64px !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background:
    linear-gradient(90deg, rgba(1,10,20,.76), rgba(2,17,33,.4), rgba(1,10,20,.72)),
    url('/images/tesla-pages-v3/rules-code-chamber.png') center / cover no-repeat !important;
}
.legal-header h1 { margin: 12px 0 !important; font-size: clamp(44px, 6vw, 76px) !important; }
.legal-header p { max-width: 650px; color: #c3dce9 !important; font-size: 14px !important; }
.legal-card { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; border: 0 !important; background: transparent !important; }
.legal-section {
  padding: 26px !important;
  border: 1px solid var(--tp-line) !important;
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(10,40,65,.94), rgba(4,18,32,.96)) !important;
}
.legal-section h2 { color: var(--tp-white) !important; font-family: Inter, "Segoe UI", Arial, sans-serif !important; font-size: 16px !important; }
.legal-section p, .legal-section li { color: #aac0cf !important; font-size: 13px !important; }
.legal-highlight { color: var(--tp-cyan) !important; }
.legal-note { border: 1px solid rgba(71,214,255,.32) !important; border-radius: 12px; background: rgba(7,42,65,.82) !important; color: #c9e3ef !important; font-size: 12px !important; }

@media (max-width: 760px) {
  .apv2-hero { width: calc(100% - 24px) !important; min-height: 300px !important; }
  .apv2-hero-content { min-height: 300px !important; }
  .apv2-container { margin-top: -28px !important; }
  .transaction-page, .legal-page { padding-inline: 12px !important; }
  .transaction-header, .legal-header { min-height: 310px !important; padding: 32px 22px !important; }
  .transaction-header { align-items: flex-end !important; }
  .transaction-header h1, .legal-header h1 { font-size: 38px !important; }
  .transaction-header .transaction-back { position: static !important; margin-top: 20px !important; align-self: flex-start; }
  .transaction-stats { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .legal-card { grid-template-columns: 1fr; }
}