:root { --app-nav-h: 51px; } 

.mobile-search-sheet{
  position: fixed; inset: 0;
  left: 0; right: 0; top: 0; bottom: var(--app-nav-h); /* <- важно */
  background: var(--base);
  z-index: 1045;
  display: none;
  flex-direction: column;
}
.mobile-search-head{
  display: grid; grid-template-columns: 44px 1fr; align-items: center;
  gap: 8px; padding: 10px;
  border-bottom: 1px solid var(--card-border);
}
.mobile-search-close{
  background: transparent; border: none; color: var(--light); font-size: 22px;
  display: inline-flex; align-items: center; justify-content: center;
}
.mobile-search-inputwrap{
  display: flex; align-items: center; gap: 8px;
  background: var(--base-search);
  border-radius: 8px; padding: 8px 12px;
}
.mobile-search-inputwrap i{ opacity: .8; }
#mobileSearchInput{
  background: transparent; border: 0; outline: none; color: var(--light);
  width: 100%;
}

.mobile-search-results{
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 8px 10px 16px;
}

.mobile-search-results .head{
  display: grid;
  grid-template-columns: 28px 1fr 70px;
  gap: 10px; padding: 8px 6px;
  font-size: 12px; color: #889bb1; text-transform: uppercase;
  letter-spacing: .06em; border-bottom: 1px solid rgba(255,255,255,.08);
}

.mobile-search-results .item{
  display: grid;
  grid-template-columns: 28px 1fr 80px;
  gap: 10px; align-items: center;
  padding: 10px 6px; text-decoration: none; color: var(--light);
}
.mobile-search-results .item:hover{ background: rgba(255,255,255,.04); }
.mobile-search-results .thumb{ width: 28px; height: 28px; border-radius: 6px; object-fit: cover; }
.mobile-search-results .title{ font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mobile-search-results .pct-right{ justify-self: end; font-size: 18px; font-weight: 800; }
.mobile-search-results .empty{ padding: 10px 6px; color: #889bb1; }

@media (max-width: 991.98px){
  /* keep popper inside a safe inset and avoid side bleed */
  .dropdown-menu{
    max-width: calc(100vw - 16px);
    /* Popper positions via transform; margins create a safe viewport gutter */
    margin-left: 8px;
    margin-right: 8px;
    border-radius: 8px;
  }

  /* optional: when very narrow, reduce min-width so it never pushes off-screen */
  .dropdown-menu { min-width: 220px; }
}

/* ensure the app background matches so no white shows through anywhere */
html, body { background: var(--base); }




/* Search-only styles (scoped) */
.nav-search { position: relative; flex: 0 0 auto; }  /* <- prevents flex grow pushing other items */
.nav-search .search-bar {
  display: flex;
  align-items: center;
  background: var(--base-search);
  border-radius: 8px;
  padding: 6px 12px;
  gap: 6px;
}
.nav-search .search-icon { width: 16px; height: 16px; color: #889bb1; flex-shrink: 0; }
.nav-search input[type="text"] { background: transparent; border: none; outline: none; color: #889bb1; font-size: 14px; width: 220px; }
.nav-search input[type="text"]::placeholder { color: #889bb1; }

.nav-search .search-dropdown {
  position: absolute; top: 100%; left: 0;
  margin-top: 6px;
  background: var(--base-search);
  border-radius: 8px;
  min-width: 320px; max-width: 480px;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  z-index: 9999; overflow: hidden;
}
.nav-search .search-dropdown .item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; text-decoration: none; color: var(--light); }
.nav-search .search-dropdown .item:hover {filter: brightness(1.2);}
.nav-search .search-dropdown .thumb { width: 28px; height: 28px; border-radius: 6px; object-fit: cover; flex-shrink: 0; }
.nav-search .search-dropdown .title { color: var(--light); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px; }
.nav-search .search-dropdown .empty { padding: 10px 12px; color: #889bb1; }
.nav-search .search-dropdown .item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  text-decoration: none;
  color: var(--light);
}

.nav-search .search-dropdown .title {
  color: var(--light);
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 320px;
}

.nav-search .search-dropdown .pct {
  display: inline-block;
  font-size: 18px;      /* big */
  font-weight: 800;     /* heavy */
  color: var(--light);          /* white */
  line-height: 1;
}
/* Header row inside dropdown */
.nav-search .search-dropdown .head {
  display: grid;
  grid-template-columns: 28px 1fr 70px; /* thumb | MARKET | CHANCE % */
  column-gap: 10px;
  padding: 8px 12px;
  font-size: 12px;
  color: #889bb1;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* Items use the same grid to align with header */
.nav-search .search-dropdown .item {
  display: grid;
  grid-template-columns: 28px 1fr 80px; /* thumb | title | % */
  column-gap: 10px;
  align-items: center;
  padding: 10px 12px;
  text-decoration: none;
  color: var(--light);
}

.nav-search .search-dropdown .item:hover { background: rgba(255,255,255,.04); }

.nav-search .search-dropdown .thumb {
  width: 28px; height: 28px; border-radius: 6px; object-fit: cover; flex-shrink: 0;
}

.nav-search .search-dropdown .title {
  color: var(--light);
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-search .search-dropdown .pct-right {
  justify-self: end;
  font-size: 18px;
  font-weight: 800;
  color: var(--light);
  line-height: 1;
  min-width: 60px;  /* reserve space for % */
  text-align: right;
}

/* Keep "no results" row readable with the new layout */
.nav-search .search-dropdown .empty {
  padding: 10px 12px; color: #889bb1;
}
/* === Header KPI pills (Cash / Portfolio) === */
.kpi-pill{
  display:flex; flex-direction:column; align-items:center;
  padding:6px 10px; border-radius:3px;
  background: transparent;
  transition: background .18s ease, box-shadow .18s ease;
  cursor: default;
}
.kpi-pill:hover{
  background: var(--header-item-hover);
  border-radius: 3px;
  box-shadow: 0 8px 16px rgba(0,0,0,.18);
}
.kpi-title{
  font-size: 12px; line-height: 1; margin-bottom: 4px;
  letter-spacing: .02em;
}
.kpi-value{
  font-weight: 800; font-size: 16px; line-height: 1;
}

/* Map to theme vars without risking global `.text-light` overrides */
.text-light-custom { color: var(--light); }
.text-yes-custom   { color: var(--yes-color); }

/* Avatar-only profile trigger */
.user-avatar-btn{
  padding: 4px 8px;              /* small target with room for hover bg */
  gap: 6px;                      /* space before caret (Bootstrap ::after) */
  border-radius: 3px;            /* match dropdown radius */
}

.user-avatar-32{
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

/* Reuse your hover style from earlier for consistency */
.dropdown-toggle.user-profile-btn:hover,
.dropdown.show > .dropdown-toggle.user-profile-btn,
.dropdown-toggle.user-profile-btn:focus-visible {
  background: var(--base-search) !important;
  box-shadow: 0 8px 16px rgba(0,0,0,.12);
}

/* Optional: tighten Bootstrap caret so it sits closer to the avatar */
.dropdown-toggle.user-avatar-btn::after{
  margin-left: .35rem; /* default is .255em; a bit wider for clarity */
}

.user-profile-dropdown .dropdown-menu{
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
}

.user-profile-dropdown__identity{
  border-bottom: 1px solid var(--card-border);
}

.user-profile-dropdown__identity-link{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  color: var(--light);
  text-decoration: none;
}

.user-profile-dropdown__identity-link:hover{
  background: var(--base-search);
  color: var(--light);
}

.user-profile-dropdown__identity-avatar{
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
}

.user-profile-dropdown__identity-text{
  display: grid;
  min-width: 0;
}

.user-profile-dropdown__identity-label{
  color: #889bb1;
  font-size: 11px;
  line-height: 1.2;
}

.user-profile-dropdown__identity-name{
  color: var(--light);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.25;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-profile-dropdown .dropdown-item{
  padding-top: 9px;
  padding-bottom: 9px;
}
/* === Notifications dropdown === */
.notifications-dropdown { position: relative; }

/* Bell trigger (icon-only) */
.notif-btn{
  background: transparent !important;
  border: none !important;
  color: hsl(var(--white));
  padding: 6px 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.notif-btn:hover,
.dropdown.show > .notif-btn,
.notif-btn:focus-visible{
  background: var(--base-search) !important;
  box-shadow: 0 8px 16px rgba(0,0,0,.12);
}
/* Hide Bootstrap caret for icon-only button */
.notif-btn::after{ display: none !important; }

/* Dropdown panel */
.notif-menu{
  background: var(--base);
  border: 1px solid var(--card-border);
  border-radius: 3px;           /* requested 3px radius */
  min-width: 320px;
  overflow: hidden;
  box-shadow: 0 12px 24px rgba(0,0,0,.25);
  z-index: 1001;
}

/* Title row */
.notif-head{
  padding: 10px 12px;
  font-weight: 700;
  color: var(--light);
  border-bottom: 1px solid var(--card-border);  /* separator under title */
  letter-spacing: .01em;
}

/* Body / empty state */
.notif-body{
  background: var(--base);
  /* was: align-items:center; justify-content:center; padding:18px 16px; */
  display: flex;
  flex-direction: column;
  align-items: stretch;         /* <— key */
  justify-content: flex-start;  /* <— key */
  padding: 0;                   /* padding moves to .notif-list */
  min-height: 140px;
}
.notif-sleepy{
  display: block;
  color: #889bb1;        /* muted */
  opacity: .9;
}
/* Empty state wrapper: center contents only when no notifications */
.notif-empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:18px 16px;
  min-height:140px; /* matches .notif-body min height */
}

.notif-empty-text{
  color: #9fb0c6;        /* light text against var(--base) */
  font-size: 14px;
}
.notif-bell{
  display:block;
  color: var(--light);
}
/* === Trade notifications list === */
.notif-list{
  display: flex;
  flex-direction: column;
  width: 100%;             /* <— full width inside dropdown */
  box-sizing: border-box;
}
.notif-item{
  width: 100%;             /* <— stretch card to container width */
  margin: 0;
  display: grid;
  grid-template-columns: 48px 1fr;
  column-gap: 10px;
  background: var(--base);
  border-radius: 6px;
  padding: 8px;
}
.notif-content{ width: 100%; }
.notif-thumb {
  width: 48px; height: 48px; border-radius: 6px; object-fit: cover; background: #1f2b37;
}
.notif-content { display: grid; grid-template-rows: auto auto auto; row-gap: 2px; align-content: center; }
.notif-toprow { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.notif-label { font-weight: 800; color: var(--light); font-size: 14px; line-height: 1.1; }
.notif-ago   { color: var(--light); font-size: 12px; white-space: nowrap; }
.notif-title { color: var(--light); font-size: 13px; line-height: 1.2; }
.notif-meta  { color: var(--light); font-size: 12px; }
/* clickable cards */
.notif-item{
  display: grid;
  grid-template-columns: 48px 1fr;
  column-gap: 10px;
  background: var(--base);
  border-radius: 6px;
  padding: 8px;
  text-decoration: none;
  color: inherit;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .02s ease-in-out;
  cursor: pointer;
}
.notif-item:hover{
  background: var(--card-border);
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 6px 14px rgba(0,0,0,.22);
}
.notif-item:active{ transform: translateY(0.5px); }

/* tiny unread dot on bell */
.notif-dot{
  position: absolute;
  top: 2px;               /* fine-tune to your header */
  right: 2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff4d4f;    /* or var(--danger) if you have it */
  box-shadow: 0 0 0 2px rgba(0,0,0,.25);
}

/* Lay out the two ULs in one row */
.primary-menu-container{
  display:flex;
  align-items:center;
  gap:12px;                 /* space between left and right groups */
}

/* Let the left group take remaining space */
.primary-menu-container .left-menu{
  flex:1 1 auto;
  min-width:0;              /* allows child to shrink nicely */
}

/* Make the search expand but leave some space before language */
.nav-search{
  flex:1 1 auto;            /* grow to fill */
  max-width:720px;          /* optional ceiling */
  margin-right:12px;        /* breathing room before the right-side language/user */
}

/* Make the input actually fill the bar */
.nav-search .search-bar{ width:100%; }
.nav-search input[type="text"]{ width:100%; }

/* Dropdown should match the bar width by default */
.nav-search .search-dropdown{
  min-width:100%;
  max-width:100%;
}

/* Mobile tweaks */
@media (max-width: 991.98px){
  /* keep everything in one row on mobile too */
  .primary-menu-container{ gap:8px; }

  /* tighter input padding so it fits small screens */
  .nav-search .search-bar{ padding:6px 10px; }

  /* ensure dropdown anchors to bar width on small screens */
  .nav-search .search-dropdown{
    width:100%;
  }
}
/* === Header Deposit button === */
.btn-deposit-header{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  background: #2c9cdb;                 /* requested blue */
  color: #ffffff !important;
  font-weight: 800;
  font-size: 14px;
  line-height: 1;
  border: 1px solid #1f7fb3;           /* slight darker border */
  border-radius: 7px;                /* rounded / pill edges */
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 6px 12px rgba(44,156,219,.18);
  transition: transform .12s ease, filter .18s ease, box-shadow .18s ease;
}

.btn-deposit-header:hover,
.btn-deposit-header:focus{
  filter: brightness(1.08);
  box-shadow: 0 8px 16px rgba(44,156,219,.28), 0 0 0 2px rgba(44,156,219,.15) inset;
}

/* light “flash” while hovering */
@keyframes depositPulse {
  0%   { box-shadow: 0 8px 16px rgba(44,156,219,.24); }
  100% { box-shadow: 0 10px 20px rgba(44,156,219,.34); }
}
.btn-deposit-header:hover{
  animation: depositPulse .9s ease-in-out infinite alternate;
}

.btn-deposit-header:active{
  transform: translateY(0.5px);
}

.btn-deposit-header:focus-visible{
  outline: 2px solid rgba(44,156,219,.55);
  outline-offset: 2px;
}

.bet-now-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 16px;
  background:#ef4444;
  color:#ffffff !important;
  font-weight:800;
  font-size:14px;
  line-height:1;
  border:1px solid #b91c1c;
  border-radius:7px;
  text-decoration:none;
  white-space:nowrap;
  box-shadow:0 6px 12px rgba(239,68,68,.18);
  transition:transform .12s ease, filter .18s ease, box-shadow .18s ease;
}

.bet-now-btn:hover,
.bet-now-btn:focus{
  filter:brightness(1.06);
  box-shadow:0 8px 16px rgba(239,68,68,.28), 0 0 0 2px rgba(239,68,68,.15) inset;
}

.bet-now-btn:active{
  transform:translateY(.5px);
}

.bet-now-btn:focus-visible{
  outline:2px solid rgba(239,68,68,.55);
  outline-offset:2px;
}

/* keep layout tidy in the header row */
.primary-menu-container .btn-deposit-header,
.primary-menu-container .bet-now-btn{
  flex: 0 0 auto;
}

/* responsive tweak so it doesn’t squeeze other items */
@media (max-width: 991.98px){
  .primary-menu-container .btn-deposit-header,
  .primary-menu-container .bet-now-btn{
    padding: 9px 14px;
    font-size: 13px;
  }
}
/* Animated theme slider */
.theme-switch {
  --w: 46px; --h: 26px; --pad: 3px;
  position: relative; display: inline-flex; align-items: center; cursor: pointer;
}
.theme-switch input { position: absolute; opacity: 0; pointer-events: none; }
.theme-switch .track {
  width: var(--w); height: var(--h);
  background: #9fb0c6;            /* off */
  border-radius: var(--h);
  display: inline-block; position: relative;
  transition: background .22s ease, box-shadow .22s ease;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);
}
.theme-switch .knob {
  position: absolute; top: var(--pad); left: var(--pad);
  width: calc(var(--h) - var(--pad) * 2); height: calc(var(--h) - var(--pad)*2);
  border-radius: 50%;
  background: #ffffff;
  transition: transform .22s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
}

/* ON state */
.theme-switch input:checked + .track {
  background: #1f7fb3; /* your blue hue when ON */
}
.theme-switch input:checked + .track .knob {
  transform: translateX(calc(var(--w) - var(--h)));
}

/* Dark header variants stay readable */
.dropdown-menu .theme-switch .track { background: #9fb0c6; }
.dropdown-menu .theme-switch input:checked + .track { background: #2c9cdb; }
/* Smaller theme slider */
.theme-switch-sm {
  --w: 34px;   /* width */
  --h: 18px;   /* height */
  --pad: 2px;  /* padding for knob */
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.theme-switch-sm input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.theme-switch-sm .track {
  width: var(--w);
  height: var(--h);
  background: #9fb0c6;
  border-radius: var(--h);
  display: inline-block;
  position: relative;
  transition: background .22s ease, box-shadow .22s ease;
}
.theme-switch-sm .knob {
  position: absolute;
  top: var(--pad); left: var(--pad);
  width: calc(var(--h) - var(--pad) * 2);
  height: calc(var(--h) - var(--pad) * 2);
  border-radius: 50%;
  background: #fff;
  transition: transform .22s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.theme-switch-sm input:checked + .track {
  background: #2c9cdb;
}
.theme-switch-sm input:checked + .track .knob {
  transform: translateX(calc(var(--w) - var(--h)));
}
/* Put this near the end of your CSS (or in the same <style> block) */
.brand__img { 
  display: none !important;   /* start hidden */
}

html.dark .brand__img--dark { 
  display: inline-block !important; 
  transform: scale(1.3);
  padding-left: 10px;
}

html:not(.dark) .brand__img--light { 
  display: inline-block !important; 
}
/* === Mobile header constraints === */
@media (max-width: 991.98px){
  /* Only logo (left) + lang + notifications + user (right) */
  .nav-search,
  .kpi-pill,
  .btn-deposit-header {
    display: none !important;
  }

  .header-fluid-custom-parent { 
    position: sticky; top: 0;
    background: var(--base);
    max-width: 100%;
    overflow: hidden;
  }

  .primary-menu-container{
    width: 100%;
    overflow: hidden;
  }

  /* Ensure flex items don't force overflow */
  .primary-menu-container > ul { min-width: 0; }
  .primary-menu-container .left-menu { min-width: 0; }
}

/* Make category bars always visible and scrollable under header on mobile */
@media (max-width: 991.98px){
  .sports-category{
    position: sticky;
    top: var(--header-h, 56px);
    z-index: 1029;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background: var(--base);
  }
  .sports-sub-category{
    position: sticky;
    top: calc(var(--header-h, 56px) + 42px); /* adjust second bar height if different */
    z-index: 1028;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background: var(--base);
  }
}
/* Let dropdowns escape the header on mobile */
@media (max-width: 991.98px){
  .header-fluid-custom-parent,
  .primary-menu-container{
    overflow: visible !important;   /* was hidden; caused clipping */
  }
}
@media (max-width: 991.98px){
  .hide-mobile{ display:none !important; }
}

.gap-3 { gap: 0.5rem !important;}

/* === Wallet auth modal === */
.wallet-auth-tabs{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:6px;
  margin:10px 0 14px;
}

.wallet-auth-tab{
  border:0;
  background:var(--base-search);
  color:var(--light);
  border-radius:7px;
  padding:9px 8px;
  font-size:13px;
  font-weight:800;
  box-shadow:0 -3px 0 0 rgba(0,0,0,.14) inset, 0 5px 12px rgba(0,0,0,.12);
  transition:transform .12s cubic-bezier(.4,0,.2,1), box-shadow .12s ease, filter .17s, background-color .17s, color .17s;
}

.wallet-auth-tab:hover,
.wallet-auth-tab:focus{
  filter:brightness(1.08);
  transform:translateY(-1px);
  box-shadow:0 -3px 0 0 rgba(0,0,0,.17) inset, 0 7px 15px rgba(0,0,0,.16);
}

.wallet-auth-tab:active{
  transform:translateY(1px);
  box-shadow:0 -2px 0 0 rgba(0,0,0,.14) inset, 0 3px 8px rgba(0,0,0,.12);
}

.wallet-auth-tab.is-active{
  background:#2c9cdb;
  color:#fff;
  box-shadow:0 -3px 0 0 rgba(0,0,0,.18) inset, 0 7px 16px rgba(44,156,219,.24);
}

.wallet-auth-modal .btn--base{
  border:0;
  border-radius:8px;
  background:#2c9cdb;
  color:#fff;
  font-weight:900;
  box-shadow:0 -4px 0 0 rgba(0,0,0,.17) inset, 0 8px 18px rgba(44,156,219,.24);
  transition:transform .12s cubic-bezier(.4,0,.2,1), box-shadow .12s ease, filter .17s;
}

.wallet-auth-modal .btn--base:hover,
.wallet-auth-modal .btn--base:focus{
  background:#2c9cdb;
  color:#fff;
  filter:brightness(1.07);
  transform:translateY(-1px);
  box-shadow:0 -4px 0 0 rgba(0,0,0,.2) inset, 0 10px 22px rgba(44,156,219,.3);
}

.wallet-auth-modal .btn--base:active{
  transform:translateY(1px);
  box-shadow:0 -2px 0 0 rgba(0,0,0,.16) inset, 0 4px 10px rgba(44,156,219,.2);
}

.wallet-auth-step-copy{
  color:#9fb0c6;
  font-size:13px;
  line-height:1.45;
  margin:4px 0 12px;
}

.wallet-auth-step-copy strong{
  color:var(--light);
  overflow-wrap:anywhere;
}

.wallet-auth-link-button{
  width:100%;
  border:0;
  background:transparent;
  color:#2c9cdb;
  font-size:13px;
  font-weight:800;
  padding:5px 0;
}

.wallet-auth-link-button:hover,
.wallet-auth-link-button:focus{
  color:#6cc8ff;
}

.wallet-auth-inline-link{
  border:0;
  background:transparent;
  color:#2c9cdb;
  font:inherit;
  font-weight:800;
  padding:0;
}

.wallet-auth-inline-link:hover,
.wallet-auth-inline-link:focus{
  color:#6cc8ff;
}

.wallet-auth-flow [data-registration-step-panel],
.wallet-auth-flow [data-password-step-panel]{
  display:none;
}

.wallet-auth-flow[data-registration-step="email"] [data-registration-step-panel="email"],
.wallet-auth-flow[data-registration-step="code"] [data-registration-step-panel="code"],
.wallet-auth-flow[data-registration-step="complete"] [data-registration-step-panel="complete"],
.wallet-auth-flow[data-password-step="request"] [data-password-step-panel="request"],
.wallet-auth-flow[data-password-step="code"] [data-password-step-panel="code"],
.wallet-auth-flow[data-password-step="reset"] [data-password-step-panel="reset"]{
  display:block;
}

.wallet-auth-panel{ display:none; }
.wallet-auth-panel.is-active{ display:block; }

.wallet-auth-label-register{ display:none; }
.wallet-auth-modal[data-wallet-auth-mode="register"] .wallet-auth-label-login{ display:none; }
.wallet-auth-modal[data-wallet-auth-mode="register"] .wallet-auth-label-register{ display:inline; }

.wallet-auth-provider-label{
  margin:2px 0 8px;
  color:#9fb0c6;
  font-size:13px;
  font-weight:700;
}

.wallet-auth-provider-list{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:8px;
}

.wallet-auth-provider{
  width:100%;
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border:0;
  background:#d96f21;
  color:#111;
  font-weight:900;
  border-radius:7px;
  padding:12px 14px;
  box-shadow:0 -4px 0 0 rgba(0,0,0,.16) inset, 0 7px 16px rgba(0,0,0,.16);
  transition:transform .12s cubic-bezier(.4,0,.2,1), box-shadow .12s ease, filter .17s;
}

.wallet-auth-provider:hover,
.wallet-auth-provider:focus{
  filter:brightness(1.06);
  transform:translateY(-1px);
  box-shadow:0 -4px 0 0 rgba(0,0,0,.19) inset, 0 10px 20px rgba(0,0,0,.2);
}

.wallet-auth-provider:active{
  transform:translateY(1px);
  box-shadow:0 -2px 0 0 rgba(0,0,0,.16) inset, 0 4px 10px rgba(0,0,0,.14);
}

.wallet-auth-provider:disabled{
  opacity:.72;
  cursor:wait;
  transform:none;
  filter:none;
}

.wallet-auth-provider--metamask{
  background:#d96f21;
  color:#111;
}

.wallet-auth-provider--coinbase{
  background:#0a3ea8;
  color:#fff;
}

.wallet-auth-provider--bybit{
  background:#d08a00;
  color:#111;
}

.wallet-auth-provider__icon{
  width:28px;
  height:28px;
  display:block;
  object-fit:contain;
  flex:0 0 auto;
}

.wallet-auth-message{
  min-height:22px;
  margin-top:10px;
  color:#9fb0c6;
  font-size:13px;
}

.wallet-auth-message.is-error{ color:#ff6b6b; }
.wallet-auth-message.is-success{ color:#35d08f; }

.wallet-auth-note{
  margin-top:6px;
  color:#9fb0c6;
  font-size:12px;
  line-height:1.4;
}

@media (max-width: 540px){
  .wallet-auth-tabs{
    grid-template-columns: 1fr;
  }

  .wallet-auth-provider-list{
    grid-template-columns: 1fr;
  }
}