/* ============================================================
   NFS LEADERBOARD — DARK HUD (NEW COMPLETE CSS)
   - No animations
   - No gradients (only subtle lighting / texture)
   - Muted red = state only
   - Background image preserved (html)
============================================================ */

/* ============================
   TOKENS
============================ */
:root{
  --bg-0:#000;
  --panel:rgba(12,12,12,.88);
  --panel-2:rgba(18,18,18,.92);
  --panel-3:rgba(255,255,255,.035);

  --text:#f2f2f2;
  --muted:#a9abb1;

  --red:#c23b3b;
  --red-weak:rgba(194,59,59,.14);

  --green:#3ddc84;

  --border:rgba(255,255,255,.16);
  --border-soft:rgba(255,255,255,.09);

  --radius-lg:18px;
  --radius-md:14px;
  --radius-sm:10px;
  --radius-pill:999px;

  --shadow-xl:0 34px 80px rgba(0,0,0,.86);
  --shadow-lg:0 22px 52px rgba(0,0,0,.78);
  --shadow-md:0 14px 30px rgba(0,0,0,.72);
  --shadow-in:inset 0 1px 0 rgba(255,255,255,.06), inset 0 -1px 0 rgba(0,0,0,.7);
}

/* ============================
   GLOBAL / RESET
============================ */
*,
*::before,
*::after{box-sizing:border-box;}

*{
  animation:none !important;
  transition:none !important;
}

html:focus-within{scroll-behavior:auto;}
@media (prefers-reduced-motion: reduce){
  *{transition:none !important;}
}


/* ============================
   BASE LAYOUT
============================ */
main.content{
  max-width:1150px;
  margin:0 auto 70px;
  padding:24px 16px 40px;
}

/* links */
a{color:var(--text);text-decoration:none;font-weight:700;}
a:hover{color:var(--red);}

/* ============================
   SHARED PANEL LOOK
============================ */
.hud-panel{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  position:relative;
  overflow:hidden;
}

/* top-light sheen + micro texture (not “gradienty”, more like lighting) */
.hud-panel::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;

  /* top light */
  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,.10),
      rgba(255,255,255,.03) 18%,
      rgba(255,255,255,0) 45%
    );
  opacity:.75;
}

.hud-panel::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;

  /* subtle scanline texture */
  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.012),
      rgba(255,255,255,.012) 1px,
      rgba(0,0,0,0) 1px,
      rgba(0,0,0,0) 3px
    );
  opacity:.33;
}

/* ============================
   PAGE TOP LINK
============================ */
.back-link-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:14px;
  margin-bottom:10px;
  font-size:13px;
}

.back-link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:var(--radius-pill);
  background:rgba(255,255,255,.05);
  border:1px solid var(--border);
  color:var(--text);
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:12px;
  box-shadow:var(--shadow-in), var(--shadow-md);
}

.back-link .arrow{font-size:12px;opacity:.85;}

.back-link:hover{
  border-color:rgba(255,255,255,.28);
  background:rgba(255,255,255,.06);
}

.page-tag{
  padding:6px 10px;
  border-radius:var(--radius-pill);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  background:rgba(255,255,255,.03);
  border:1px solid var(--border-soft);
  color:var(--muted);
}

/* ============================
   HEADER BOX
============================ */
.leaderboard-header-box{
  margin:6px auto 18px;
  padding:22px 22px 18px;
}
.leaderboard-header-box{ composes: hud-panel; } /* harmless if ignored */

.leaderboard-header-box{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-xl);
  position:relative;
  overflow:hidden;
}
.leaderboard-header-box::before,
.leaderboard-header-box::after{ /* inherit panel sheen/texture */
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  border-radius:inherit;
}
.leaderboard-header-box::before{
  background:linear-gradient(to bottom, rgba(255,255,255,.11), rgba(255,255,255,.03) 18%, rgba(255,255,255,0) 48%);
  opacity:.8;
}
.leaderboard-header-box::after{
  background-image:repeating-linear-gradient(0deg, rgba(255,255,255,.012), rgba(255,255,255,.012) 1px, rgba(0,0,0,0) 1px, rgba(0,0,0,0) 3px);
  opacity:.34;
}

.leaderboard-header-box h2{
  font-size:30px;
  letter-spacing:.42em;
  text-align:center;
  margin:0 0 6px;
  color:var(--text);
  text-transform:uppercase;
  font-weight:950;
  text-shadow:0 2px 2px rgba(0,0,0,.85);
  position:relative;
  z-index:1;
}

.leaderboard-header-box .subtitle{
  text-align:center;
  margin-bottom:16px;
  font-size:12px;
  color:var(--muted);
  letter-spacing:.18em;
  text-transform:uppercase;
  position:relative;
  z-index:1;
}

.header-controls-row{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
  justify-content:center;
  position:relative;
  z-index:1;
}

/* ============================
   SWITCHERS
============================ */
.tier-switcher,
.mode-switcher{
  display:inline-flex;
  gap:8px;
  flex-wrap:wrap;
}

.tier-switcher button,
.mode-switcher button{
  appearance:none;
  -webkit-appearance:none;
  min-width:64px;
  padding:10px 14px;
  border-radius:var(--radius-pill);
  border:1px solid var(--border);
  background:rgba(255,255,255,.045);
  color:var(--muted);
  font-weight:900;
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  cursor:pointer;
  line-height:1;

  box-shadow:var(--shadow-in), var(--shadow-md);
}

.tier-switcher button:hover,
.mode-switcher button:hover{
  color:var(--text);
  border-color:rgba(255,255,255,.28);
}

/* active = state only (red marker) */
.tier-switcher button.active,
.mode-switcher button.active{
  color:var(--text);
  border-color:rgba(194,59,59,.55);
  background:rgba(255,255,255,.05);
  box-shadow:inset 3px 0 0 var(--red), var(--shadow-in), var(--shadow-md);
}

/* ============================
   PLAYER SEARCH CTA
============================ */
.header-search-button-wrap{
  display:flex;
  justify-content:flex-end;
  flex:1;
}

.player-search-cta{
  border-radius:var(--radius-pill);
  padding:10px 18px;
  border:1px solid var(--border);
  font-weight:950;
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  cursor:pointer;
  background:rgba(255,255,255,.045);
  color:var(--text);
  line-height:1;
  box-shadow:var(--shadow-in), var(--shadow-md);
}

.player-search-cta:hover{
  border-color:rgba(255,255,255,.28);
  background:rgba(255,255,255,.06);
}

/* ============================
   HUD TOOLBAR
============================ */
.leaderboard-toolbar{
  margin:0 auto 12px;
  padding:12px 14px;
  border-radius:var(--radius-lg);
  background:var(--panel);
  border:1px solid var(--border);
  box-shadow:var(--shadow-lg);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  font-size:13px;
  position:relative;
  overflow:hidden;
}
.leaderboard-toolbar::before,
.leaderboard-toolbar::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  border-radius:inherit;
}
.leaderboard-toolbar::before{
  background:linear-gradient(to bottom, rgba(255,255,255,.10), rgba(255,255,255,.03) 18%, rgba(255,255,255,0) 45%);
  opacity:.75;
}
.leaderboard-toolbar::after{
  background-image:repeating-linear-gradient(0deg, rgba(255,255,255,.012), rgba(255,255,255,.012) 1px, rgba(0,0,0,0) 1px, rgba(0,0,0,0) 3px);
  opacity:.28;
}

.lb-toolbar-left,
.lb-toolbar-right{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  position:relative;
  z-index:1;
}

.lb-pill{
  padding:7px 10px;
  border-radius:var(--radius-pill);
  border:1px solid var(--border-soft);
  background:rgba(255,255,255,.03);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  display:inline-flex;
  align-items:center;
  gap:6px;
  box-shadow:var(--shadow-in);
}

.lb-pill-soft{background:rgba(255,255,255,.02);}

.tier-stat-number{
  font-weight:950;
  color:var(--text);
}

.sync-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 12px rgba(61,220,132,.28);
}

/* filter */
.track-filter{position:relative; min-width:220px;}
#trackFilterInput{
  width:100%;
  padding:10px 12px 10px 30px;
  border-radius:var(--radius-pill);
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  color:var(--text);
  font-size:12px;
  outline:none;
  box-shadow:var(--shadow-in);
}
#trackFilterInput::placeholder{color:rgba(255,255,255,.45);}

.track-filter-icon{
  position:absolute;
  left:10px;
  top:50%;
  transform:translateY(-50%);
  font-size:11px;
  opacity:.8;
  pointer-events:none;
}

/* favorites chip */
.fav-filter-chip{
  border-radius:var(--radius-pill);
  padding:10px 12px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  color:var(--muted);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.12em;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  line-height:1;
  box-shadow:var(--shadow-in), var(--shadow-md);
}

.fav-filter-chip .star{font-size:13px;color:rgba(255,255,255,.65);}

.fav-filter-chip:hover{
  color:var(--text);
  border-color:rgba(255,255,255,.28);
  background:rgba(255,255,255,.045);
}

.fav-filter-chip.active{
  color:var(--text);
  border-color:rgba(194,59,59,.55);
  background:rgba(255,255,255,.045);
  box-shadow:inset 3px 0 0 var(--red), var(--shadow-in), var(--shadow-md);
}
.fav-filter-chip.active .star{color:var(--red);}

/* ============================
   TRACK CARDS
============================ */
#leaderboards{position:relative;}

.track-card{
  margin:0 auto 18px;
  border-radius:var(--radius-lg);
  background:var(--panel);
  border:1px solid var(--border);
  box-shadow:var(--shadow-xl);
  overflow:hidden;
  position:relative;
}

/* top light + texture */
.track-card::before,
.track-card::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  border-radius:inherit;
}
.track-card::before{
  background:linear-gradient(to bottom, rgba(255,255,255,.10), rgba(255,255,255,.03) 18%, rgba(255,255,255,0) 48%);
  opacity:.8;
}
.track-card::after{
  background-image:repeating-linear-gradient(0deg, rgba(255,255,255,.012), rgba(255,255,255,.012) 1px, rgba(0,0,0,0) 1px, rgba(0,0,0,0) 3px);
  opacity:.26;
}

.track-inner{
  position:relative;
  padding:14px 16px 12px;
  z-index:1;
}

.track-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

.track-heading-left{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.track-icon{
  width:46px;
  height:46px;
  border-radius:var(--radius-sm);
  background:rgba(255,255,255,.05);
  border:1px solid var(--border-soft);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  overflow:hidden;
  box-shadow:var(--shadow-in), 0 12px 22px rgba(0,0,0,.75);
}

.track-icon img.mode-icon-img{
  width:34px;
  height:34px;
  object-fit:contain;
  display:block;
  opacity:.98;
}

.track-title-wrap{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}

.track-title{
  font-size:18px;
  font-weight:950;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text);
  white-space:nowrap;
  text-overflow:ellipsis;
  overflow:hidden;
  text-shadow:0 2px 2px rgba(0,0,0,.85);
}

.track-title a{color:var(--text);}
.track-title a:hover{color:var(--red);}

.track-sub{
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
}

/* meta chips */
.track-meta{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:8px;
}

.meta-chip{
  padding:7px 10px;
  border-radius:var(--radius-pill);
  background:rgba(255,255,255,.03);
  border:1px solid var(--border-soft);
  font-size:11px;
  letter-spacing:.10em;
  color:var(--muted);
  display:inline-flex;
  align-items:center;
  gap:6px;
  line-height:1;
  box-shadow:var(--shadow-in);
}

.meta-chip strong{
  color:var(--text);
  font-weight:950;
  letter-spacing:.02em;
}

/* WR badge: state only */
.wr-badge{
  padding:7px 10px;
  border-radius:var(--radius-pill);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.14em;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(194,59,59,.32);
  color:var(--text);
  box-shadow:inset 0 0 0 1px rgba(194,59,59,.18);
}

/* ============================
   TABLE WRAPPER + TABLE
============================ */
.track-table-wrapper{
  margin-top:10px;
  border-radius:var(--radius-md);
  overflow:hidden;
  background:rgba(255,255,255,.02);
  border:1px solid var(--border-soft);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), inset 0 -1px 0 rgba(0,0,0,.75);
}

.track-table{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
  color:var(--text);
}

.track-table th,
.track-table td{
  padding:10px 10px;
  text-align:left;
  vertical-align:middle;
  font-feature-settings:"tnum" 1;
}

.track-table thead{
  background:rgba(255,255,255,.03);
}

.track-table th{
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
  border-bottom:1px solid rgba(255,255,255,.10);
}

.track-table tbody td{
  border-bottom:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.01);
}

.track-table tbody tr:hover td{
  background:rgba(255,255,255,.04);
}

/* columns */
.rank-cell{width:44px; opacity:.92;}

.player-cell{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.player-avatar{
  width:30px;
  height:30px;
  border-radius:50%;
  object-fit:cover;
  border:1px solid rgba(255,255,255,.14);
  background:#101010;
  flex-shrink:0;
  box-shadow:0 8px 18px rgba(0,0,0,.78);
}

.player-name{
  color:var(--text);
  text-decoration:none;
  font-weight:900;
  white-space:nowrap;
  text-overflow:ellipsis;
  overflow:hidden;
  max-width:180px;
  text-shadow:0 1px 1px rgba(0,0,0,.8);
}

.player-name:hover{
  color:var(--red);
  text-decoration:underline;
}

.time-cell{font-feature-settings:"tnum" 1;}

.delta-cell{
  font-size:12px;
  font-feature-settings:"tnum" 1;
}

.delta-wr{color:var(--red); font-weight:950;}
.delta-plus{color:var(--muted);}

.car-cell{
  max-width:220px;
  white-space:nowrap;
  text-overflow:ellipsis;
  overflow:hidden;
}

/* media buttons */
.run-media-wrap{display:inline-flex; gap:10px; align-items:center;}

.run-media-btn,
.shot-trigger{
  background:none;
  border:none;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.run-media-btn img{
  display:block;
  width:18px;
  height:18px;
  opacity:.9;
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.75));
}
.run-media-btn:hover img{opacity:1;}

/* ============================
   FAVORITES
============================ */
.fav-cell{width:44px; text-align:right;}

.fav-toggle{
  width:28px;
  height:28px;
  border-radius:var(--radius-pill);
  background:rgba(255,255,255,.045);
  border:1px solid var(--border-soft);
  color:rgba(255,255,255,.64);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  cursor:pointer;
  box-shadow:var(--shadow-in), 0 10px 18px rgba(0,0,0,.75);
}

.fav-toggle:hover{
  border-color:rgba(255,255,255,.26);
  color:var(--text);
}

.fav-toggle.is-fav{
  border-color:rgba(194,59,59,.65);
  color:var(--red);
  background:var(--red-weak);
  box-shadow:inset 0 0 0 1px rgba(194,59,59,.22), 0 12px 24px rgba(0,0,0,.85);
}

.fav-row-highlight{
  box-shadow:inset 3px 0 0 var(--red);
}

/* ============================
   PLAYER SEARCH OVERLAY
============================ */
#playerSearchOverlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.84);
  display:none;
  align-items:flex-start;
  justify-content:center;
  padding:80px 20px 40px;
  z-index:2000;
}

#playerSearchPanel{
  width:100%;
  max-width:950px;
  max-height:72vh;
  border-radius:22px;
  background:var(--panel-2);
  border:1px solid var(--border);
  box-shadow:var(--shadow-xl);
  padding:18px 22px;
  display:flex;
  flex-direction:column;
  gap:10px;
  overflow:hidden;
  color:var(--text);
  position:relative;
}

#playerSearchPanel::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(to bottom, rgba(255,255,255,.10), rgba(255,255,255,.03) 18%, rgba(255,255,255,0) 45%);
  opacity:.75;
}

/* header */
.ps-header-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  position:relative;
  z-index:1;
}

.ps-title{
  font-size:18px;
  font-weight:950;
  letter-spacing:.16em;
  text-transform:uppercase;
  text-shadow:0 2px 2px rgba(0,0,0,.85);
}

.ps-sub{font-size:12px;color:var(--muted);}

.ps-close-btn{
  border-radius:var(--radius-pill);
  border:1px solid var(--border);
  background:rgba(255,255,255,.045);
  color:var(--text);
  padding:8px 14px;
  font-size:11px;
  cursor:pointer;
  text-transform:uppercase;
  letter-spacing:.16em;
  box-shadow:var(--shadow-in), 0 12px 22px rgba(0,0,0,.78);
}

.ps-close-btn:hover{
  border-color:rgba(255,255,255,.28);
  background:rgba(255,255,255,.06);
}

/* search row */
.ps-search-row{
  margin-top:10px;
  margin-bottom:6px;
  display:flex;
  gap:10px;
  align-items:center;
  position:relative;
  z-index:1;
}

.player-search-shell{
  flex:1;
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 14px;
  border-radius:var(--radius-pill);
  background:rgba(255,255,255,.03);
  border:1px solid var(--border);
  box-shadow:var(--shadow-in);
}

.player-search-icon{font-size:16px;opacity:.8;}

#playerSearch{
  flex:1;
  border:none;
  background:transparent;
  color:var(--text);
  font-size:14px;
  font-weight:850;
  outline:none;
  min-width:0;
}

#playerSearch::placeholder{color:rgba(255,255,255,.45);}

.player-search-clear{
  width:30px;
  height:30px;
  border-radius:var(--radius-pill);
  background:rgba(255,255,255,.045);
  border:1px solid var(--border-soft);
  color:var(--text);
  font-size:14px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow:var(--shadow-in);
}
.player-search-clear:hover{border-color:rgba(255,255,255,.26);}

.player-search-cta-small{
  border-radius:var(--radius-pill);
  padding:9px 16px;
  border:1px solid var(--border);
  font-weight:950;
  letter-spacing:.18em;
  cursor:pointer;
  background:rgba(255,255,255,.045);
  color:var(--text);
  font-size:10px;
  text-transform:uppercase;
  box-shadow:var(--shadow-in), 0 12px 22px rgba(0,0,0,.78);
}
.player-search-cta-small:hover{
  border-color:rgba(255,255,255,.28);
  background:rgba(255,255,255,.06);
}

/* results */
#playerSearchResults{
  margin-top:6px;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,.10);
  overflow-y:auto;
  padding-right:4px;
  position:relative;
  z-index:1;
}

.ps-empty{font-size:13px;padding:18px 4px;color:var(--muted);}

/* player card */
.player-result-card{
  display:flex;
  gap:14px;
  padding:12px 10px;
  border-radius:16px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.12);
  cursor:pointer;
  margin-bottom:8px;
  box-shadow:var(--shadow-in), 0 14px 28px rgba(0,0,0,.72);
}

.player-result-card:hover{
  border-color:rgba(255,255,255,.26);
  background:rgba(255,255,255,.045);
}

.pr-avatar-wrap{
  flex:0 0 64px;
  height:64px;
  border-radius:50%;
  overflow:hidden;
  background:#101010;
  border:1px solid rgba(255,255,255,.14);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 16px 28px rgba(0,0,0,.85);
}

.pr-avatar-wrap img{
  width:64px;
  height:64px;
  border-radius:50%;
  object-fit:cover;
}

.pr-main{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.pr-name-line{
  display:flex;
  justify-content:space-between;
  gap:8px;
  align-items:center;
}

.pr-name{font-weight:950;font-size:16px;color:var(--text);}
.pr-tag{
  font-size:11px;
  padding:5px 8px;
  border-radius:var(--radius-pill);
  background:rgba(255,255,255,.04);
  border:1px solid var(--border-soft);
  color:var(--muted);
  white-space:nowrap;
  box-shadow:var(--shadow-in);
}

.pr-sub{font-size:12px;color:var(--muted);}
.pr-sub span{color:var(--text);font-weight:900;}

.pr-footer{
  font-size:11px;
  color:var(--muted);
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.pr-social{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:5px 8px;
  border-radius:var(--radius-pill);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.7px;
  font-weight:950;
  text-decoration:none;
  color:var(--text);
  border:1px solid var(--border-soft);
  background:rgba(255,255,255,.03);
  box-shadow:var(--shadow-in);
}
.pr-social:hover{
  border-color:rgba(255,255,255,.28);
  background:rgba(255,255,255,.045);
}

/* ============================
   SCREENSHOT MODAL
============================ */
.screenshot-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.88);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
}

.screenshot-modal.hidden{display:none;}

.screenshot-modal-inner{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  max-width:95vw;
  max-height:95vh;
}

#screenshotModalImg{
  display:block;
  max-width:95vw;
  max-height:95vh;
  width:auto;
  height:auto;
  object-fit:contain;
  background:#000;
  border-radius:var(--radius-md);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 28px 80px rgba(0,0,0,.88);
}

.screenshot-modal-close{
  position:absolute;
  top:-42px;
  right:0;
  font-size:28px;
  background:none;
  border:none;
  color:#fff;
  cursor:pointer;
  opacity:.9;
}
.screenshot-modal-close:hover{opacity:1;}

/* ============================
   LOADER
============================ */
#loaderScreen{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.92);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
}

#loaderScreen.hidden{
  opacity:0;
  pointer-events:none;
}

.loader-box{
  width:360px;
  text-align:center;
  color:var(--text);
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.14);
  border-radius:16px;
  padding:18px 16px 16px;
  box-shadow:var(--shadow-xl);
  position:relative;
  overflow:hidden;
}

.loader-box::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(to bottom, rgba(255,255,255,.10), rgba(255,255,255,.02) 20%, rgba(255,255,255,0) 48%);
  opacity:.75;
}

.loader-title{
  font-size:18px;
  letter-spacing:.22em;
  margin-bottom:6px;
  text-transform:uppercase;
  font-weight:950;
  text-shadow:0 2px 2px rgba(0,0,0,.85);
  position:relative;
  z-index:1;
}

.loader-sub{
  font-size:13px;
  color:var(--muted);
  margin-bottom:18px;
  position:relative;
  z-index:1;
}

.loader-bar-wrap{
  width:100%;
  height:10px;
  background:rgba(255,255,255,.06);
  border-radius:var(--radius-pill);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:var(--shadow-in);
  position:relative;
  z-index:1;
}

.loader-bar{
  height:100%;
  width:0%;
  background:var(--red);
}

.loader-status{
  margin-top:14px;
  font-size:12px;
  letter-spacing:.08em;
  color:var(--muted);
  position:relative;
  z-index:1;
}

/* ============================
   TRACK EXPAND BUTTON
============================ */
.track-expand-btn{
  margin:10px auto 2px;
  padding:10px 18px;
  border-radius:var(--radius-pill);
  border:1px solid var(--border);
  background:rgba(255,255,255,.045);
  color:var(--text);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  cursor:pointer;
  display:block;
  box-shadow:var(--shadow-in), var(--shadow-md);
}
.track-expand-btn:hover{
  border-color:rgba(255,255,255,.28);
  background:rgba(255,255,255,.06);
}

/* ============================
   TRACK LINK CALLOUT
============================ */
.track-link{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:10px;
}

.track-callout{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 10px;
  border-radius:var(--radius-pill);
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  white-space:nowrap;
  background:rgba(255,255,255,.03);
  border:1px solid var(--border-soft);
  color:var(--muted);
  box-shadow:var(--shadow-in);
}
.track-callout.hide{display:none;}
.track-callout-arrow{opacity:.85;color:var(--red);}

/* ============================
   ACCESSIBILITY — FOCUS
============================ */
button:focus-visible,
a:focus-visible,
input:focus-visible{
  outline:2px solid rgba(194,59,59,.55);
  outline-offset:2px;
}

/* ============================
   RESPONSIVE
============================ */
@media (max-width:900px){
  .leaderboard-toolbar{
    flex-direction:column;
    align-items:flex-start;
  }
  .lb-toolbar-right{
    width:100%;
    justify-content:space-between;
  }
  .track-filter{flex:1;}
}

@media (max-width:768px){
  main.content{padding:18px 10px 34px;}

  .leaderboard-header-box{
    padding:18px 14px 16px;
    border-radius:18px;
  }

  .leaderboard-header-box h2{
    font-size:22px;
    letter-spacing:.30em;
  }

  .leaderboard-header-box .subtitle{
    font-size:11px;
    letter-spacing:.14em;
  }

  .header-controls-row{
    flex-direction:column;
    align-items:stretch;
  }

  .header-search-button-wrap{justify-content:center;}

  .track-card{border-radius:16px;}
  .track-inner{padding:12px 10px 10px;}
  .player-name{max-width:120px;}

  #playerSearchOverlay{padding-top:60px;}
  #playerSearchPanel{max-height:80vh;}
}

@media (max-width:520px){
  .back-link-row{
    flex-direction:column;
    align-items:flex-start;
  }

  .lb-toolbar-right{
    flex-direction:column;
    align-items:stretch;
    gap:6px;
  }

  .fav-filter-chip{justify-content:center;}

  .track-header{
    flex-wrap:wrap;
    align-items:flex-start;
    gap:8px;
  }

  .track-heading-left{
    flex:1 1 100%;
    min-width:0;
  }

  .track-title{
    white-space:normal;
    overflow:hidden;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
  }

  .track-meta{
    flex:1 1 100%;
    justify-content:flex-start;
  }
}

/* ============================
   HARD RULES
============================ */
*,
*::before,
*::after{
  animation:none !important;
  transition:none !important;
}
html{scroll-behavior:auto !important;}

/* ============================================================
   CREW MENU — FINAL FIX (NO OUTER BORDER, ACTIVE GLOW ONLY)
============================================================ */
#crewMenu {
  position: fixed;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  z-index: 1200;

  display: flex;
  flex-direction: column;
  gap: 14px;

  padding: 12px 10px;
  border-radius: 22px;

  background: rgba(12,12,12,.86);
  box-shadow: 0 18px 36px rgba(0,0,0,.85);

  border: none !important;
  outline: none !important;
}

.crew-btn {
  width: 60px;
  height: 60px;

  border: none;
  background: transparent;
  padding: 0;
  margin: 0;

  border-radius: 50%;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;
}

.crew-btn img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
  pointer-events: none;
  box-shadow: 0 10px 22px rgba(0,0,0,0.9);
}

.crew-btn.active img {
  box-shadow:
    0 0 26px rgba(194,59,59,0.75),
    0 14px 28px rgba(0,0,0,0.95);
}

.crew-btn.clear img {
  opacity: 0.75;
  filter: grayscale(0.4);
}

/* mobile dock */
@media (max-width: 768px) {
  #crewMenu {
    top: auto;
    bottom: 16px;
    left: 50%;
    right: auto;

    transform: translateX(-50%);
    flex-direction: row;

    padding: 10px 14px;
    border-radius: 999px;

    border: none !important;
  }

  .crew-btn {
    width: 52px;
    height: 52px;
  }
}

/* dismiss */
#crewMenu { transition: none !important; } /* keep rule */
#crewMenu.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) translateX(80px);
}

#crewMenu::before {
  content: "✕";
  position: absolute;
  top: 6px;
  right: 6px;

  width: 18px;
  height: 18px;
  border-radius: 50%;

  background: #c23b3b;
  color: #fff;

  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;

  cursor: pointer;
  opacity: 0;
}

#crewMenu:hover::before { opacity: 1; }

@media (max-width: 768px) {
  #crewMenu::before { opacity: 1; }
}

/* reopen dot */
#crewMenuReopen {
  position: fixed;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);

  width: 14px;
  height: 14px;
  border-radius: 50%;

  background: #c23b3b;
  box-shadow:
    0 0 10px rgba(194,59,59,.6),
    0 6px 16px rgba(0,0,0,.85);

  cursor: pointer;
  z-index: 1300;

  opacity: 0;
  pointer-events: none;
}

#crewMenu.is-hidden ~ #crewMenuReopen {
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 768px) {
  #crewMenu.is-hidden { transform: translateX(-50%) translateY(120px); }

  #crewMenuReopen {
    top: auto;
    bottom: 20px;
    right: 20px;
    transform: none;
  }
}
/* ============================================================
   LAPTIME.GG — CINEMATIC AAA LEADERBOARD
   FULL DROP-IN REPLACEMENT
============================================================ */


/* ============================================================
   RESET
============================================================ */

*,*::before,*::after{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html,body{
  height:100%;
}

body{
  font-family:system-ui,-apple-system,"Segoe UI",Inter,sans-serif;
  color:#f5f5f5;
  overflow-x:hidden;
  background:#000;
}


/* ============================================================
   DESIGN TOKENS (SYNC WITH HOMEPAGE)
============================================================ */

:root{

  --accent:#e03838;

  --bg-panel:rgba(18,18,18,.82);
  --bg-card:rgba(24,24,24,.9);

  --border:rgba(255,255,255,.10);

  --radius-lg:22px;
  --radius-md:16px;
  --radius-pill:999px;

}


/* ============================================================
   CINEMATIC BACKGROUND (AAA)
============================================================ */

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-4;

  background:url("/assets/NFSUNBOUND.jpg") center/cover no-repeat;
  transform:scale(1.05);
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-3;

  background:

    radial-gradient(
      1200px 900px at 15% 10%,
      rgba(224,56,56,.12),
      transparent 60%
    ),

    radial-gradient(
      1000px 700px at 85% 20%,
      rgba(255,255,255,.08),
      transparent 55%
    ),

    linear-gradient(
      to bottom,
      rgba(0,0,0,.65),
      rgba(0,0,0,.88)
    );
}


/* ============================================================
   LAYOUT
============================================================ */

main.content{
  max-width:1200px;
  margin:auto;
  padding:30px 18px;
  position:relative;
}

main.content::before{
  content:"";
  position:absolute;
  inset:-120px;
  z-index:-1;

  background:
    radial-gradient(900px 700px at center, rgba(0,0,0,.65), transparent 70%);
}


/* ============================================================
   SHARED PANEL STYLE (AAA)
============================================================ */

.hud-panel,
.leaderboard-header-box,
.leaderboard-toolbar,
.track-card{

  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);

  backdrop-filter:blur(6px);

  box-shadow:
    0 25px 80px rgba(0,0,0,.8),
    inset 0 1px 0 rgba(255,255,255,.04);

  background-image:
    linear-gradient(
      180deg,
      rgba(255,255,255,.04),
      rgba(255,255,255,0)
    );
}


/* ============================================================
   HEADER
============================================================ */

.leaderboard-header-box{
  padding:32px;
  margin-bottom:20px;
  text-align:center;
}

.leaderboard-header-box h2{
  font-size:34px;
  font-weight:900;
  letter-spacing:.25em;
}

.subtitle{
  margin-top:6px;
  opacity:.7;
}


/* ============================================================
   BUTTONS / SWITCHERS
============================================================ */

.tier-switcher button,
.mode-switcher button,
.player-search-cta{

  border-radius:var(--radius-pill);
  padding:10px 18px;

  border:1px solid var(--border);
  background:rgba(255,255,255,.05);

  color:#fff;
  font-weight:800;
  letter-spacing:.15em;
  text-transform:uppercase;
  cursor:pointer;

  transition:.2s;
}

.tier-switcher button:hover,
.mode-switcher button:hover{
  border-color:var(--accent);
}

.tier-switcher button.active,
.mode-switcher button.active{
  border-color:var(--accent);
  box-shadow:inset 3px 0 0 var(--accent);
}


/* ============================================================
   TOOLBAR
============================================================ */

.leaderboard-toolbar{
  padding:14px 18px;
  margin-bottom:20px;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
}

.lb-pill{
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  padding:6px 10px;
  border-radius:var(--radius-pill);
  font-size:12px;
}

.sync-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--accent);
}


/* ============================================================
   TRACK CARDS (BIG VISUAL UPGRADE)
============================================================ */

.track-card{
  margin-bottom:22px;
  overflow:hidden;
}

.track-inner{
  padding:18px;
}

.track-title{
  font-weight:900;
  letter-spacing:.12em;
}

.track-title a{
  color:#fff;
  text-decoration:none;
}

.track-title a:hover{
  color:var(--accent);
}

.meta-chip{
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  padding:6px 10px;
  border-radius:var(--radius-pill);
  font-size:12px;
}


/* ============================================================
   TABLE (AAA LOOK)
============================================================ */

.track-table{
  width:100%;
  border-collapse:collapse;
}

.track-table thead{
  background:rgba(255,255,255,.04);
}

.track-table th{
  text-transform:uppercase;
  font-size:11px;
  letter-spacing:.16em;
  opacity:.7;
}

.track-table td,
.track-table th{
  padding:12px;
}

.track-table tbody tr{
  transition:.2s;
}

.track-table tbody tr:hover{
  background:rgba(255,255,255,.06);
}

.player-avatar{
  border-radius:50%;
}

.delta-wr{
  color:var(--accent);
  font-weight:900;
}


/* ============================================================
   FAVORITE BUTTON
============================================================ */

.fav-toggle{
  border-radius:50%;
  border:1px solid var(--border);
  background:rgba(255,255,255,.05);
  cursor:pointer;
}

.fav-toggle.is-fav{
  border-color:var(--accent);
  color:var(--accent);
}


/* ============================================================
   RESPONSIVE
============================================================ */

@media(max-width:900px){

  .leaderboard-toolbar{
    flex-direction:column;
  }

}
/* ====================================
   ELITE HEADER REDESIGN
==================================== */

.header-controls-row{

  display:flex;
  flex-direction:column;
  align-items:center;

  gap:26px;

  margin-top:24px;

}


/* ------------------------------------
   TIER SELECTOR (PRIMARY CONTROL)
------------------------------------ */

.tier-switcher{

  display:flex;
  justify-content:center;
  gap:12px;

}


/* ------------------------------------
   TOOLBAR ROW
------------------------------------ */

.header-tools{

  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;

  margin-top:6px;

}


/* ------------------------------------
   MODE SWITCHER → SEGMENTED CONTROL
------------------------------------ */

.mode-switcher{

  display:flex;
  gap:6px;

  padding:6px;

  border-radius:14px;

  background:rgba(255,255,255,.03);
  border:1px solid var(--border-soft);

}


.mode-switcher button{

  border-radius:10px;

  background:transparent;
  border:none;

  padding:10px 14px;

  color:var(--muted);

  font-weight:900;
  letter-spacing:.12em;

}


/* active mode */
.mode-switcher button.active{

  background:rgba(255,255,255,.06);

  color:var(--text);

  box-shadow:inset 2px 0 0 var(--red);

}


/* ------------------------------------
   SEARCH BUTTON (UTILITY)
------------------------------------ */

.player-search-cta{

  border-radius:999px;

  background:rgba(255,255,255,.05);

  padding:10px 18px;

}
/* ============================
   ELITE HEADER COMPOSITION
============================ */

.lb-hero{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.lb-hero-top{
  display:flex;
  justify-content:center;
  text-align:center;
}

.lb-title{
  margin:0;
}

.lb-title-stack .subtitle{
  margin:6px 0 0;
}

/* Make tiers feel like the primary control */
.lb-tier-row{
  display:flex;
  justify-content:center;
}

/* One unified action bar = instant pro look */
.lb-actionbar{
  width:min(860px, 100%);
  margin: 0 auto;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;

  padding:10px 12px;
  border-radius: 999px;

  background: rgba(255,255,255,.03);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-in), var(--shadow-md);

  position:relative;
  overflow:hidden;
}

/* subtle top-light like your panels, but lighter */
.lb-actionbar::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: linear-gradient(to bottom, rgba(255,255,255,.08), rgba(255,255,255,0) 55%);
  opacity:.65;
}

/* Mode switch becomes clean segmented buttons (not one giant capsule) */
.lb-actionbar .mode-switcher{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  justify-content:flex-start;
  position:relative;
  z-index:1;
}

.lb-actionbar .mode-switcher button{
  border-radius: 12px;
  padding:10px 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.035);
  color: var(--muted);
  box-shadow: var(--shadow-in);

  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 900;
}

.lb-actionbar .mode-switcher button:hover{
  border-color: rgba(255,255,255,.28);
  color: var(--text);
  background: rgba(255,255,255,.05);
}

/* Active = red state marker only */
.lb-actionbar .mode-switcher button.active{
  color: var(--text);
  border-color: rgba(194,59,59,.55);
  background: rgba(255,255,255,.05);
  box-shadow: inset 3px 0 0 var(--red), var(--shadow-in);
}

/* Search sits right, same bar, no “floating random button” feeling */
.lb-actionbar .header-search-button-wrap{
  position:relative;
  z-index:1;
  flex: 0 0 auto;
  display:flex;
  justify-content:flex-end;
}

.lb-actionbar .player-search-cta{
  padding:10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.045);
  box-shadow: var(--shadow-in), var(--shadow-md);

  font-size: 11px;
  letter-spacing: .16em;
}

/* Responsive: stack action bar neatly */
@media (max-width: 820px){
  .lb-actionbar{
    border-radius: 18px;
    flex-direction:column;
    align-items:stretch;
    gap:10px;
  }

  .lb-actionbar .mode-switcher{
    justify-content:center;
  }

  .lb-actionbar .header-search-button-wrap{
    justify-content:center;
  }
}
/* ====================================
   AAA ACTION BAR UPGRADE
==================================== */

.lb-actionbar{

  position:relative;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.05),
      rgba(255,255,255,.01)
    );

  backdrop-filter:blur(10px);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(0,0,0,.6),
    0 20px 40px rgba(0,0,0,.75);

}


/* subtle cinematic edge lighting */
.lb-actionbar::before{

  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;

  background:
    radial-gradient(
      80% 120% at 20% 0%,
      rgba(255,255,255,.06),
      transparent 70%
    );

  opacity:.7;
}


/* ====================================
   MODE SEGMENTS — REAL BUTTONS
==================================== */

.lb-actionbar .mode-switcher button{

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.06),
      rgba(255,255,255,.02)
    );

  border:1px solid rgba(255,255,255,.14);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 4px 10px rgba(0,0,0,.7);

}


/* hover lift */
.lb-actionbar .mode-switcher button:hover{

  transform:translateY(-1px);

  border-color:rgba(255,255,255,.28);

}


/* active = elite highlight */
.lb-actionbar .mode-switcher button.active{

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.08),
      rgba(255,255,255,.03)
    );

  border-color:rgba(194,59,59,.7);

  box-shadow:
    inset 3px 0 0 var(--red),
    0 0 18px rgba(194,59,59,.25);

}


/* ====================================
   SEARCH BUTTON — INTEGRATED LOOK
==================================== */

.lb-actionbar .player-search-cta{

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.08),
      rgba(255,255,255,.03)
    );

  border:1px solid rgba(255,255,255,.2);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 8px 18px rgba(0,0,0,.8);

}


.lb-actionbar .player-search-cta:hover{

  border-color:rgba(255,255,255,.35);

}
/* ====================================
   REMOVE MODE CONTAINER BORDER
==================================== */

.lb-actionbar .mode-switcher{

  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;

}
/* ====================================
   CINEMATIC HERO COLOR MATCH
==================================== */

.leaderboard-header-box{

  position:relative;
  overflow:hidden;

  background:

    radial-gradient(
      1200px 600px at 20% 0%,
      rgba(255,60,60,.18),
      transparent 60%
    ),

    radial-gradient(
      900px 500px at 80% 10%,
      rgba(255,255,255,.06),
      transparent 60%
    ),

    rgba(12,12,12,.88);

}


/* soft cinematic lighting layer */
.leaderboard-header-box::before{

  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;

  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,.06),
      rgba(0,0,0,.4)
    );

  opacity:.6;

}
/* =========================================================
   CINEMATIC DARK SCROLLBAR — LAPTIME.GG STYLE
========================================================= */

/* Chrome / Edge / Safari */
::-webkit-scrollbar {

  width:12px;
  height:12px;

}

::-webkit-scrollbar-track {

  background:rgba(0,0,0,.55);

}

::-webkit-scrollbar-thumb {

  background:rgba(255,255,255,.12);

  border-radius:999px;

  border:3px solid rgba(0,0,0,.55);

  transition:.2s;

}

::-webkit-scrollbar-thumb:hover {

  background:rgba(224,56,56,.22);

}


/* Firefox support */
* {

  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.12) rgba(0,0,0,.55);

}


/* =========================================================
   NEO HERO HEADER (GO WILD) — DROP-IN OVERRIDES
   - keeps existing JS hooks (.mode-switcher / .tier-switcher / #playerSearchOpen)
   - no animations, but heavy cinematic lighting + texture
========================================================= */

.leaderboard-header-box{
  padding: 0;
}

.lb-hero--neo{
  padding: 22px 22px 24px;
}

.lb-hero--neo .lb-neo-grid{
  display:grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap:18px;
  align-items:stretch;
}

/* left: title + telemetry */
.lb-hero--neo .lb-neo-left{
  padding: 14px 14px 10px;
  border-radius: var(--radius-lg);

  /* FIX: was rgba(255,255,255,02) (invalid -> became white) */
  background: rgba(12,12,12,.88);

  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-in);
  position:relative;
  overflow:hidden;
}

/* subtle “laser cut” corners */
.lb-hero--neo .lb-neo-left::before{
  content:"";
  position:absolute;
  inset:-1px;
  pointer-events:none;
  border-radius: inherit;
  background:
    linear-gradient(90deg, rgba(194,59,59,0), rgba(194,59,59,.18), rgba(194,59,59,0)) top/100% 1px no-repeat,
    linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.12), rgba(255,255,255,0)) bottom/100% 1px no-repeat,
    linear-gradient(0deg, rgba(255,255,255,0), rgba(255,255,255,.10), rgba(255,255,255,0)) left/1px 100% no-repeat,
    linear-gradient(0deg, rgba(255,255,255,0), rgba(255,255,255,.06), rgba(255,255,255,0)) right/1px 100% no-repeat;
  opacity:.9;
}

/* glow blob */
.lb-hero--neo .lb-neo-left::after{
  content:"";
  position:absolute;
  width: 520px;
  height: 520px;
  left: -240px;
  top: -300px;
  pointer-events:none;
  border-radius: 50%;

  /* FIX: was rgba(194,59,59,10) */
  background: rgba(194,59,59,.10);

  filter: blur(0px);
  opacity:.9;
}

.lb-hero--neo .lb-kicker{
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  position:relative;
  z-index:1;
}

.lb-hero--neo .lb-title{
  margin: 10px 0 0;
  font-size: 34px;
  line-height: 1.05;
  letter-spacing: .34em;
  text-transform: uppercase;
  font-weight: 950;

  /* FIX: was rgba(0,0,0,85) */
  text-shadow: 0 2px 2px rgba(0,0,0,.85);

  position:relative;
  z-index:1;
}

.lb-hero--neo .lb-subline{
  margin-top: 10px;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  position:relative;
  z-index:1;
}

.lb-hero--neo .lb-subline strong{
  color: var(--text);
  font-weight: 950;
}

/* telemetry strip */
.lb-hero--neo .lb-telemetry{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap:10px;
  position:relative;
  z-index:1;
}

.lb-hero--neo .telemetry-card{
  border-radius: 14px;
  border: 1px solid var(--border-soft);

  /* FIX: was rgba(0,0,0,22) */
  background: rgba(0,0,0,.22);

  box-shadow: var(--shadow-in);
  padding: 10px 10px 9px;
  min-width: 0;
}

.lb-hero--neo .telemetry-card .t-label{
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.lb-hero--neo .telemetry-card .t-value{
  margin-top: 6px;
  font-weight: 950;
  letter-spacing: .08em;
  color: var(--text);
  display:flex;
  align-items:center;
  gap:8px;
  min-height: 18px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.lb-hero--neo .telemetry-card--sync .t-value{
  letter-spacing: .12em;
}

/* right: control panel */
.lb-hero--neo .lb-neo-panel{
  height: 100%;
  border-radius: var(--radius-lg);

  /* FIX: was rgba(255,255,255,02) (invalid -> became white) */
  background: rgba(12,12,12,.88);

  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-in);
  padding: 14px 14px 12px;
  position:relative;
  overflow:hidden;
}

.lb-hero--neo .lb-neo-panel::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.10),
      rgba(255,255,255,.10) 1px,
      rgba(0,0,0,0) 1px,
      rgba(0,0,0,0) 8px
    );
  opacity:.18;
}

.lb-hero--neo .lb-panel-title{
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 950;
  margin-bottom: 10px;
  position:relative;
  z-index:1;
}

.lb-hero--neo .lb-panel-title--spaced{
  margin-top: 14px;
}

/* mode icons */
.lb-hero--neo .mode-switcher--icons{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:10px;
  position:relative;
  z-index:1;
}

.lb-hero--neo .mode-switcher--icons button{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  padding: 12px 12px;
  border-radius: 16px;

  /* FIX: was rgba(255,255,255,14) */
  border: 1px solid rgba(255,255,255,.14);

  /* FIX: was rgba(0,0,0,26) */
  background: rgba(0,0,0,.26);

  color: var(--text);
  cursor:pointer;

  /* FIX: was rgba(0,0,0,70) */
  box-shadow: var(--shadow-in), 0 12px 22px rgba(0,0,0,.70);

  font-weight: 950;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 11px;
  min-width: 0;
}

.lb-hero--neo .mode-switcher--icons button span{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.lb-hero--neo .mode-switcher--icons button:hover{
  /* FIX: was rgba(255,255,255,26) */
  border-color: rgba(255,255,255,.26);
}

.lb-hero--neo .mode-switcher--icons button.active{
  /* FIX: was rgba(194,59,59,65) and rgba(194,59,59,18) */
  border-color: rgba(194,59,59,.65);
  box-shadow: inset 3px 0 0 var(--red), var(--shadow-in), 0 0 18px rgba(194,59,59,.18);
}

.lb-hero--neo .mode-mini-icon{
  width: 26px;
  height: 26px;
  object-fit: contain;
  opacity: .98;
  flex: 0 0 auto;

  /* FIX: was rgba(0,0,0,85) */
  filter: drop-shadow(0 10px 14px rgba(0,0,0,.85));
}

/* tier cards */
.lb-hero--neo .tier-switcher--cards{
  display:grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap:10px;
  position:relative;
  z-index:1;
}

.lb-hero--neo .tier-switcher--cards button{
  padding: 12px 10px 10px;
  border-radius: 16px;

  /* FIX: was rgba(255,255,255,14) */
  border: 1px solid rgba(255,255,255,.14);

  /* FIX: was rgba(0,0,0,22) */
  background: rgba(0,0,0,.22);

  color: var(--text);
  cursor:pointer;

  /* FIX: was rgba(0,0,0,70) */
  box-shadow: var(--shadow-in), 0 12px 22px rgba(0,0,0,.70);

  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:center;
  justify-content:center;
  min-width: 0;
}

.lb-hero--neo .tier-switcher--cards .tier-letter{
  font-size: 16px;
  font-weight: 950;
  letter-spacing: .14em;
  text-transform: uppercase;

  /* FIX: was rgba(0,0,0,85) */
  text-shadow: 0 2px 2px rgba(0,0,0,.85);

  line-height: 1;
}

.lb-hero--neo .tier-switcher--cards .tier-hint{
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width: 100%;
}

.lb-hero--neo .tier-switcher--cards button:hover{
  /* FIX: was rgba(255,255,255,26) */
  border-color: rgba(255,255,255,.26);
}

.lb-hero--neo .tier-switcher--cards button.active{
  /* FIX: was rgba(194,59,59,65) and rgba(194,59,59,16) */
  border-color: rgba(194,59,59,.65);
  box-shadow: inset 3px 0 0 var(--red), var(--shadow-in), 0 0 18px rgba(194,59,59,.16);
}

/* hero actions */
.lb-hero--neo .lb-neo-actions{
  margin-top: 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  position:relative;
  z-index:1;
}

.lb-hero--neo .player-search-cta--hero{
  flex: 1 1 auto;
  justify-content:center;
  display:flex;
  align-items:center;
  gap:10px;
  border-radius: 999px;
  padding: 12px 14px;
}

.lb-hero--neo .lb-quick-link{
  flex: 0 0 auto;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 10px 10px;
  border-radius: 999px;
  border: 1px solid var(--border-soft);

  /* FIX: was rgba(255,255,255,02) */
  background: rgba(12,12,12,.88);

  box-shadow: var(--shadow-in);
}

.lb-hero--neo .lb-quick-link:hover{
  color: var(--text);

  /* FIX: was rgba(255,255,255,22) */
  border-color: rgba(255,255,255,.22);
}

/* responsive */
@media (max-width: 980px){
  .lb-hero--neo .lb-neo-grid{
    grid-template-columns: 1fr;
  }
  .lb-hero--neo .lb-telemetry{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
  .lb-hero--neo .tier-switcher--cards{
    grid-template-columns: repeat(3, minmax(0,1fr));
  }
}

@media (max-width: 520px){
  .lb-hero--neo{
    padding: 18px 14px 20px;
  }
  .lb-hero--neo .lb-title{
    font-size: 28px;
    letter-spacing: .26em;
  }
  .lb-hero--neo .mode-switcher--icons{
    grid-template-columns: 1fr;
  }
  .lb-hero--neo .lb-neo-actions{
    flex-direction:column;
    align-items:stretch;
  }
}
/* tier icon */

.tier-switcher--cards button{

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;

}

.tier-icon{

  width:32px;
  height:32px;

  object-fit:contain;

  filter: drop-shadow(0 6px 10px rgba(0,0,0,.6));

}
/* ============================
   HERO LOGO — PRO SCALE
============================ */

.jn-logo-single{

  display:block;

  width:340px;      /* 👈 bigger visual weight */
  max-width:100%;

  height:auto;

  margin-bottom:8px;

  filter:
    drop-shadow(0 14px 24px rgba(0,0,0,.85));

}
/* remove icon box — icon only */

.track-icon {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  width: auto !important;
  height: auto !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.track-icon img {
  width: 32px;   /* adjust size if needed */
  height: 32px;
  object-fit: contain;
}
.t-value-with-icon{
  display:flex;
  align-items:center;
  gap:8px;
}

.telemetry-icon{
  width:20px;
  height:20px;
  object-fit:contain;
  filter: drop-shadow(0 0 6px rgba(255,40,40,.35));
}
.submit-panel{
  max-width:720px;
  margin:20px auto 0;
  display:flex;
  flex-direction:column;
  gap:18px;
}

.submit-drop-zone{
  height:280px;
  border:1px dashed var(--border);
  border-radius:var(--radius-lg);
  background:rgba(255,255,255,.02);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  cursor:pointer;
  position:relative;
}

.submit-drop-zone:hover{
  border-color:rgba(194,59,59,.5);
}

.drop-text{
  font-size:14px;
  letter-spacing:.14em;
  color:var(--muted);
  text-transform:uppercase;
}

.drop-sub{
  display:block;
  font-size:11px;
  opacity:.6;
  margin-top:6px;
}

.submit-preview{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
}

.submit-row{
  display:flex;
  gap:14px;
}

.submit-select,
.submit-input{
  flex:1;
  padding:12px 14px;
  border-radius:var(--radius-pill);
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  color:var(--text);
}

.submit-status{
  font-size:12px;
  letter-spacing:.08em;
  color:var(--muted);
  text-align:center;
}
/* ======================================
   DROP ZONE UPGRADE (KEEP YOUR STYLE)
====================================== */

.submit-drop-zone {

  position: relative;
  overflow: hidden;

  transition:
    border-color 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

/* subtle glow always */

.submit-drop-zone::after {

  content:"";
  position:absolute;
  inset:0;

  border-radius:inherit;

  background: radial-gradient(
    circle at center,
    rgba(255,60,0,0.08),
    transparent 70%
  );

  opacity:.6;
  pointer-events:none;
}

/* hover */

.submit-drop-zone:hover {

  transform: translateY(-2px);

  box-shadow:
    0 0 20px rgba(255,80,0,0.15),
    inset 0 0 20px rgba(255,80,0,0.08);
}

/* drag active (JS will add class) */

.submit-drop-zone.dragging {

  border-color:#ff3300;

  box-shadow:
    0 0 30px rgba(255,50,0,0.35),
    inset 0 0 25px rgba(255,50,0,0.15);

  transform: scale(1.01);
}
/* ============================================================
   WEB SUBMIT — DARK HUD LAYOUT (DROP-IN)
   - Keeps your style
   - Fixes broken image in dropzone
   - Keeps header/footer flow
============================================================ */

/* Ensure hidden actually hides (prevents broken image icon) */
.hidden{ display:none !important; }

/* page wrapper */
.submit-page{
  padding-top: 10px;
}

/* hero tweaks (same panel family) */
.submit-hero{
  padding: 18px 18px 20px;
}

/* top row: title + discord CTA */
.submit-hero-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom: 14px;
  position:relative;
  z-index: 1;
}

.submit-hero-title{
  min-width:0;
}

.submit-hero .subtitle{
  margin-top: 8px;
}

/* discord CTA in your style */
.submit-discord-cta{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius: 999px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.045);
  color: var(--text);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  box-shadow: var(--shadow-in), var(--shadow-md);
}

.submit-discord-cta:hover{
  border-color: rgba(255,255,255,.28);
  background: rgba(255,255,255,.06);
  color: var(--text);
}

.dc-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background: var(--red);
  box-shadow: 0 0 14px rgba(194,59,59,.35);
}

/* main grid */
.submit-shell{
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 14px;
  align-items:start;
  position:relative;
  z-index: 1;
}

/* left/right panels share your hud look */
.submit-left,
.submit-right{
  padding: 14px;
}

/* section title */
.submit-section-title{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  margin-bottom: 10px;
}

.submit-section-kicker{
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
}

.submit-section-name{
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text);
  font-weight: 950;
  opacity: .92;
}

/* drop zone */
.submit-drop-zone{
  position:relative;
  height: 320px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.02);
  box-shadow: var(--shadow-in), 0 18px 36px rgba(0,0,0,.78);
  overflow:hidden;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}

/* subtle top-light like your panels */
.submit-drop-zone::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,.08),
    rgba(255,255,255,.02) 18%,
    rgba(255,255,255,0) 55%
  );
  opacity:.75;
}

/* micro texture */
.submit-drop-zone::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.012),
      rgba(255,255,255,.012) 1px,
      rgba(0,0,0,0) 1px,
      rgba(0,0,0,0) 3px
    );
  opacity:.22;
}

.drop-text{
  position:relative;
  z-index:1;
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}

.drop-sub{
  display:block;
  margin-top: 6px;
  font-size: 11px;
  letter-spacing: .14em;
  opacity: .7;
}

/* preview image (NO broken image ever) */
.submit-preview{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: contain;
  background: rgba(0,0,0,.45);
  border-radius: inherit;
  border: none;
  display:block;
}

/* drag state (your JS can toggle .dragging) */
.submit-drop-zone.dragging{
  border-color: rgba(194,59,59,.55);
  box-shadow:
    inset 0 0 0 1px rgba(194,59,59,.18),
    0 0 22px rgba(194,59,59,.18),
    0 18px 36px rgba(0,0,0,.82);
}

/* form layout */
.submit-form-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.submit-field{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.submit-field-wide{
  grid-column: 1 / -1;
}

.submit-label{
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
}

.submit-select,
.submit-input{
  width:100%;
  padding: 12px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.03);
  color: var(--text);
  font-size: 13px;
  box-shadow: var(--shadow-in);
  outline:none;
}

.submit-select:focus,
.submit-input:focus{
  outline:2px solid rgba(194,59,59,.45);
  outline-offset:2px;
}

/* submit button */
.submit-btn{
  width:100%;
  padding: 12px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.045);
  color: var(--text);
  font-weight: 950;
  letter-spacing: .22em;
  text-transform: uppercase;
  box-shadow: var(--shadow-in), var(--shadow-md);
  cursor:pointer;
}

.submit-btn:hover{
  border-color: rgba(255,255,255,.28);
  background: rgba(255,255,255,.06);
}

.submit-actions{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.submit-status{
  font-size: 12px;
  letter-spacing: .10em;
  color: var(--muted);
  text-align:center;
  min-height: 18px;
}

/* small hint */
.submit-hint{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.10);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

.submit-hint strong{
  color: var(--text);
  font-weight: 950;
}

/* OCR panel */
.submit-ocr{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.10);
}

.ocr-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
  margin-top: 10px;
}

.ocr-card{
  border-radius: var(--radius-md);
  border: 1px solid var(--border-soft);
  background: rgba(255,255,255,.02);
  box-shadow: var(--shadow-in);
  padding: 10px 10px 9px;
  min-width:0;
}

.ocr-label{
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.ocr-value{
  margin-top: 6px;
  font-weight: 950;
  letter-spacing: .08em;
  color: var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* responsive */
@media (max-width: 980px){
  .submit-shell{
    grid-template-columns: 1fr;
  }
  .submit-drop-zone{
    height: 280px;
  }
}

@media (max-width: 520px){
  .submit-hero-top{
    flex-direction:column;
    align-items:flex-start;
  }
  .submit-form-grid{
    grid-template-columns: 1fr;
  }
  .ocr-grid{
    grid-template-columns: 1fr;
  }
}

/* =========================================
   PROPER SELECT NORMALIZATION
========================================= */

.submit-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  background-color: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  padding: 12px 40px 12px 14px;
  color: #f2f2f2;
  font-size: 13px;

  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,.7) 50%),
    linear-gradient(135deg, rgba(255,255,255,.7) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 12px) calc(50% - 3px);
  background-size: 6px 6px;
  background-repeat: no-repeat;
}

.submit-select:focus {
  outline: none;
  border-color: rgba(255,255,255,.3);
}

/* Force dark options where browser allows */
.submit-select option {
  background-color: #0b0b0b;
  color: #f2f2f2;
}
/* =========================================================
   CAR DROPDOWN — FIXED PROPERLY
========================================================= */

.car-input-wrapper{
  position:relative;
}

.car-dropdown{
  position:absolute;
  top: calc(100% + 6px);
  left:0;
  width:100%;

  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);

  background:#0b0b0b;

  box-shadow:
    0 24px 60px rgba(0,0,0,.85),
    inset 0 1px 0 rgba(255,255,255,.05);

  max-height:260px;
  overflow-y:auto;

  z-index:9999;
}

/* IMPORTANT FIXES HERE */

.car-dropdown-item{
  display:block;          /* makes hover area full width */
  width:100%;
  text-align:left;        /* match other dropdown style */

  padding:12px 14px;
  cursor:pointer;

  color:rgba(255,255,255,.75);

  transition:background .12s ease, color .12s ease;
}

.car-dropdown-item:hover{
  background: rgba(255,255,255,.06);
  color:#fff;
}
/* ============================================================
   SUBMIT PANEL LOCK (CLEAN VERSION)
   - Locks only submit page content
   - Header/footer remain clickable
============================================================ */

/* Anchor overlay to submit page only */
.submit-page{
  position:relative;
}

/* Overlay container */
.submit-lock{
  position:absolute;
  inset:0;
  z-index:100;

  display:flex;
  align-items:center;
  justify-content:center;

  background:rgba(0,0,0,.9);
}

/* Hidden state */
.submit-lock.hidden{
  display:none !important;
}

/* Center card */
.submit-lock-inner{
  width:min(460px, 92%);
  padding:36px 32px;

  border-radius:16px;

  background:linear-gradient(
    145deg,
    rgba(20,10,10,.96),
    rgba(10,10,10,.96)
  );

  border:1px solid rgba(255,0,0,.18);

  box-shadow:
    0 25px 60px rgba(0,0,0,.85);

  text-align:center;
}

/* Top label */
.submit-lock-kicker{
  font-size:11px;
  letter-spacing:.25em;
  text-transform:uppercase;
  color:rgba(255,255,255,.4);
  margin-bottom:14px;
}

/* Main title */
.submit-lock-title{
  font-size:24px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#fff;
  margin:0 0 14px;
}

/* Description */
.submit-lock-text{
  font-size:14px;
  line-height:1.6;
  color:rgba(255,255,255,.6);
  margin-bottom:26px;
}

/* Discord icon */
.dc-btn-logo{
  width:22px;
  height:auto;
}

/* Button */
.submit-lock-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  padding:14px 28px;
  border-radius:999px;

  background:#c01717;
  color:#fff;

  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:13px;

  text-decoration:none;

  box-shadow:
    0 12px 30px rgba(192,23,23,.35);

  transition:all .15s ease;
}

.submit-lock-btn:hover{
  background:#ff2a2a;
  transform:translateY(-2px);
}
/* ============================================================
   LOGOUT BUTTON — SMALL LEFT PILL (REAL FIX)
============================================================ */

#logoutBtn.submit-btn{

  width: auto !important;     /* stop full width */
  display: inline-flex;       /* shrink to content */

  align-self: flex-start;     /* left align inside layout */

  padding: 6px 14px;

  font-size: 10px;
  letter-spacing: .18em;

  border-radius: 999px;

  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.14);

  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);

  margin-top: 14px;
}