:root{
    --card-bg:#191919;
    --footer-text:#e6e6e6;
    --muted-text:#98a0a8;
    --accent-yellow:#f2c94c;
    --gold-start: #f2c94c;
    --gold-end: #f2c94c;
    --blue-start: #5cc1ff;
    --blue-end: #2b9eff;
    --login-left: #e1342f;
    --login-right: #f17930;
    --header-gap: 10px;
  }

  /* base layout */
  html, body { min-height: 370px; }
  .site-container{ max-width:100%; margin:0 auto; padding:4px 6px; background: transparent; border-radius: 0; box-sizing: border-box; }

  /* header layout */
  .header-inner { display:flex; align-items:center; justify-content:space-between; height:54px; gap:16px; background: transparent; border-bottom: none; padding: 0 6px; box-sizing: border-box; }

  /* left and right groups */
  .header-left { display:flex; align-items:center; gap:12px; }
  .header-controls{display:flex;align-items:center;gap:var(--header-gap);padding-right:6px; margin:0;}

  /* button base */
  .header-btn{ background:transparent; padding:0; border-radius:10px; color:var(--footer-text); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; font-weight:800; transition:transform .18s ease, box-shadow .18s ease; border:0; box-sizing:border-box; }

  /* equalize all controls to same touch size */
  .header-controls .header-btn,
  .header-controls .gold-btn,
  .header-controls .blue-btn,
  .header-controls .search-btn,
  .header-controls .login-circle,
  .header-controls a.login-circle {
    width:36px;
    height:36px;
    min-width:36px;
    min-height:36px;
    padding:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:25px;
    box-sizing:border-box;
  }

  /* icons inside buttons */
  .header-controls .header-btn img,
  .header-controls .gold-btn img,
  .header-controls .blue-btn img {
    width:18px;
    height:18px;
    display:block;
    pointer-events:none;
  }

  /* avatar */
  .avatar-img { width: 38px !important; height: 38px !important; min-width: 38px !important; min-height: 38px !important; border-radius: 999px; border: 2px solid var(--accent-yellow); object-fit: cover; background: var(--card-bg); box-sizing: border-box;}

  .muted{color:var(--muted-text);font-size:13px}

  /* logo */
  .logo-wrap{display:flex;align-items:center;gap:10px;padding-left:6px}
  .logo-icon {width: 45px;height: 45px;object-fit: contain;display:inline-block;background: transparent; image-rendering: auto; transform: none; }

  .logo-text-wrapper{width: 180px; height: 36px; position:relative; display:inline-block; line-height:1; cursor:pointer; transform: translateY(2px); }
  .logo-text{ display:inline-block; font-weight:800; font-size:32px; color:#ffffff; letter-spacing:0.4px; margin-left:10px; transition: transform .12s ease, color .18s ease, background .18s ease; -webkit-font-smoothing:antialiased; white-space:nowrap; }
  .logo-text-wrapper:hover .logo-text{ color: transparent; background: linear-gradient(90deg, var(--login-left), var(--login-right)); -webkit-background-clip:text; background-clip:text; transform: translateX(5px); }

  @media (max-width:880px){
    .header-inner{height:50px}
    .logo-icon{ width:40px; height:40px; }
    .logo-text{ font-size:25px; }
  }

  /* HIDE logo text on mobile; keep logo icon visible */
  @media (max-width:640px) {
    .logo-text-wrapper, .logo-text { display: none !important; width: 0 !important; height: 0 !important; overflow: hidden !important; padding: 0 !important; margin: 0 !important; }
    .logo-icon { width: 38px !important; height: 38px !important; transform: none !important; margin: 0 !important; }
    .logo-wrap { padding-left: 0 !important; gap: 8px; }
  }
  /* friend / header controls visuals */
  #friendBtn { position: relative !important; z-index: 2001 !important; pointer-events: auto !important; }
  .header-btn img { filter: none !important; -webkit-filter: none !important; }

  /* small red dot on friend button */
  #friendBadgeHeaderDot { position: absolute; top: -6px; right: -6px; width: 16px; height: 16px; min-width: 12px; border-radius: 50%; background: #ff3b30; color: #fff; display: none; align-items:center; justify-content:center; font-weight:900; font-size:10px; padding:0; box-shadow: 0 0 6px rgba(255,59,48,0.28); z-index: 3000; pointer-events: none; }

  /* numeric badge */
  #friendBadge { display: none; margin-left:6px; font-weight:900; font-size:12px; background: rgba(255,59,48,0.12); color: #ffbdbb; padding: 2px 6px; border-radius: 999px; min-width: 20px; text-align:center; }

  header.site-header { z-index: 1200 !important; position: sticky; top: 0; }

  /* ===== SOLID LEADERBOARD BUTTON (no gradient, no animation) ===== */
  .gold-btn {
    background: #f2c94c;
    color: #111;
    border: none;
    padding:0;
    border-radius: 10px;
    box-shadow: none;
    transition: none;
    position: relative;
    overflow: visible;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-weight:900;
    text-decoration:none;
  }
  .gold-btn:hover { opacity: 0.92; transform: none; box-shadow: none; }

  /* ===== SOLID FRIENDS BUTTON (no gradient, no animation) ===== */
  .blue-btn {
    background: #0096ff;
    color: #fff;
    border: none;
    padding:0;
    border-radius: 10px;
    box-shadow: none;
    transition: none;
    position: relative;
    overflow: visible;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-weight:900;
    text-decoration:none;
  }
  .blue-btn:hover { opacity: 0.92; transform: none; box-shadow: none; }

  .login-btn {
    background: transparent;
    color: #ffffff;
    border: none;
    padding: 0;
    border-radius: 10px;
    transition: none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-weight:900;
    text-decoration:none;
  }
  .login-btn:hover { opacity: 0.9; transform: none; box-shadow: none; }

  .search-btn {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    padding: 0;
    border-radius:10px;
    box-shadow: 0 6px 10px rgba(0,0,0,0.10);
    transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .search-btn:hover { background: rgba(255,255,255,0.06); transform: translateY(-1px); box-shadow: 0 8px 12px rgba(0,0,0,0.20); }

  .btn-icon-black { filter: brightness(0) saturate(100%); -webkit-filter: brightness(0) saturate(100%); }

  /* login circle (icon-only) */
  .login-circle {
    width:40px;
    height:40px;
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background: linear-gradient(90deg, #ffffff0f, #ffffff06);
    border: 1px solid rgba(255,255,255,0.04);
    color: var(--footer-text);
    font-weight:900;
    text-decoration:none;
  }
  .login-circle:focus { outline: 3px solid rgba(92,193,255,0.12); outline-offset:2px; }

  /* mobile tweaks */
  @media (max-width:640px){
    .header-controls { gap:4px; padding-right:2px; }
    .search-btn, .header-btn, .gold-btn, .blue-btn, .login-btn { height:44px; width:44px; border-radius:10px; }
    .avatar-img { width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; }
    .header-controls .header-btn,
    .header-controls .gold-btn,
    .header-controls .blue-btn,
    .header-controls .search-btn,
    .header-controls .login-circle { width: 44px; height: 44px; }

    /* Mobile search: icon sits next to logo */
    .mobile-search-toggle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      border-radius: 14px;
      background: #232326;
      border: none;
      color: #71717a;
      cursor: pointer;
      margin-left: 8px;
      flex-shrink: 0;
    }
    /* Mobile search: icon sits next to logo */
    .mobile-search-toggle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      border-radius: 14px;
      background: #232326;
      border: none;
      color: #71717a;
      cursor: pointer;
      margin-left: 8px;
      flex-shrink: 0;
    }
    .header-center {
      display: none !important;
    }
    .header-center.search-open {
      display: flex !important;
      position: fixed;
      left: 12px;
      right: 12px;
      top: 8px;
      max-width: none;
      z-index: 9999;
      margin: 0;
    }
    .header-center.search-open .header-search-wrap {
      width: 100%;
    }
    .header-center.search-open #headerSearchInput {
      height: 44px;
      font-size: 16px;
    }
    .header-center.search-open .search-dropdown {
      z-index: 10000;
    }
    body.search-active .mobile-search-toggle {
      display: none;
    }
    body.search-active .header-controls {
      visibility: hidden;
      pointer-events: none;
    }
  }

  /* =====================================================
     CHAT & FRIENDS TOOLTIP
     ===================================================== */
  #friendTooltip {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    background: #ffffff;
    color: #1a1a1a;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.5px;
    padding: 7px 14px;
    border-radius: 999px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.35), 0 2px 8px rgba(0,0,0,0.18);
    pointer-events: none;
    z-index: 99999;
    display: none;
    animation: friendTooltipBounce 1.4s ease-in-out infinite;
  }
  #friendTooltip::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 7px solid transparent;
    border-bottom-color: #ffffff;
  }
  @keyframes friendTooltipBounce {
    0%   { transform: translateX(-50%) translateY(0px); }
    25%  { transform: translateX(-50%) translateY(-6px); }
    50%  { transform: translateX(-50%) translateY(0px); }
    75%  { transform: translateX(-50%) translateY(-4px); }
    100% { transform: translateX(-50%) translateY(0px); }
  }
  #friendBtnWrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  
  /* ===== CENTER SEARCH ===== */
  .header-center {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 320px;
    margin: 0 auto;
    position: relative;
    z-index: 1300;
    transition: max-width .3s ease;
  }
  .header-center.search-focus {
    max-width: 520px;
  }
  .header-search-wrap {
    position: relative;
    width: 100%;
  }
  .header-search-wrap .search-input-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #71717a;
    pointer-events: none;
    z-index: 2;
  }
  #headerSearchInput {
    width: 100%;
    padding: 0 14px 0 38px;
    border-radius: 14px;
    border: none;
    background: #232326;
    color: #fafafa;
    font-size: 14px;
    font-weight: 500;
    outline: none;
    transition: background .2s, box-shadow .2s;
    height: 36px;
    box-sizing: border-box;
  }
  #headerSearchInput::placeholder { color: #71717a; font-weight: 400; }
  #headerSearchInput:focus {
    background: #232326;
    box-shadow: 0 0 0 2px rgba(242,201,76,0.15);
  }

  /* Backdrop blur when search is active */
  body.search-active > *:not(.site-header) {
    filter: blur(8px) brightness(0.5);
    transition: filter .3s ease;
    pointer-events: none;
    user-select: none;
  }

  /* ===== CURRENCY BUTTON ===== */
  .currency-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 11px;
    height: 36px;
    min-height: 36px;
    border-radius: 14px;
    background: #232326;
    border: none;
    color: #f2c94c;
    font-weight: 800;
    font-size: 14px;
    cursor: default;
    transition: background .15s;
    text-decoration: none;
  }
  .currency-btn:hover {
    background: #2C2C30;
  }
  .coin-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #f2c94c;
  }
  .coin-icon svg { display: block; }

  /* ===== BUTTON RADIUS ===== */
  .gold-btn { border-radius: 14px !important; }
  .blue-btn { border-radius: 14px !important; }

  /* Mobile */
  @media (max-width: 640px) {
    #headerSearchInput { font-size: 13px; padding-left: 32px; }
    .header-search-wrap .search-input-icon { left: 10px; }
    .currency-btn { padding: 0 8px; font-size: 13px; gap: 4px; }
  }
  @media (max-width: 340px) {
    .header-center { display: none !important; }
    .header-center:not(.search-open) { display: none !important; }
  }
  
  @media (min-width: 641px) {
    .mobile-search-toggle { display: none; }
  }
  
  /* IMPORTANT: REMOVE THIS LINE WHEN WE ARE READY TO ROOL THE CURRENCY SYSTEM */
  #currencyBtn { display: none !important; }

/* ===== CENTER SEARCH ===== */
  .header-center {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 320px;
    margin: 0 auto;
    position: relative;
    z-index: 1300;
    transition: max-width .3s ease;
  }
  .header-center.search-focus {
    max-width: 520px;
  }
  .header-search-wrap {
    position: relative;
    width: 100%;
  }
  .header-search-wrap .search-input-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #71717a;
    pointer-events: none;
    z-index: 2;
  }
  #headerSearchInput {
    width: 100%;
    padding: 0 14px 0 38px;
    border-radius: 14px;
    border: none;
    background: #232326;
    color: #fafafa;
    font-size: 14px;
    font-weight: 500;
    outline: none;
    transition: background .2s, box-shadow .2s;
    height: 36px;
    box-sizing: border-box;
  }
  #headerSearchInput::placeholder { color: #71717a; font-weight: 400; }
  #headerSearchInput:focus {
    background: #232326;
    box-shadow: 0 0 0 2px rgba(242,201,76,0.15);
  }

  /* Backdrop blur when search is active */
  body.search-active > *:not(.site-header) {
    filter: blur(8px) brightness(0.5);
    transition: filter .3s ease;
    pointer-events: none;
    user-select: none;
  }

  /* Search Dropdown — COMPLETELY TRANSPARENT */
  .search-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    background: transparent;
    border: none;
    border-radius: 16px;
    padding: 14px 0;
    box-shadow: none;
    z-index: 1300;
    display: none;
    overflow: visible;
  }
  .search-dropdown.open { display: block; }
  .search-dropdown-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: transparent;
  }

  /* Search Results — transparent, no borders, no badges */
  .search-dropdown-results {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: transparent;
  }
  .search-result-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    border-radius: 12px;
    background: transparent;
    border: none;
    text-decoration: none;
    color: inherit;
    transition: background .15s, transform .15s;
  }
  .search-result-item:hover,
  .search-result-item:focus {
    background: rgba(255,255,255,0.06);
    transform: translateX(2px);
  }
  .search-result-thumb {
    width: 52px;
    height: 52px;
    min-width: 52px;
    border-radius: 10px;
    overflow: hidden;
    background: #232326;
  }
  .search-result-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .search-result-name {
    font-size: 14px;
    font-weight: 700;
    color: #fafafa;
    line-height: 1.2;
  }
  .search-dropdown-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    background: transparent;
    margin-bottom: 6px;
  }
  .search-empty,
  .search-loading {
    padding: 18px;
    text-align: center;
    color: #71717a;
    font-size: 13px;
    font-weight: 500;
    background: transparent;
  }

  /* Section titles inside dropdown */
  .search-section-title {
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: #ebebeb;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent;
  }

  /* Categories — transparent bg, borderline only */
  .search-cat-pill {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 999px;
    background: transparent;
    color: #ebebeb;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: all .15s ease;
    border: 1px solid rgba(255,255,255,0.12);
    line-height: 1;
  }
  .search-cat-pill:hover,
  .search-cat-pill:focus {
    border-color: #f2c94c;
    color: #f2c94c;
    transform: translateY(-1px);
  }

  /* Mobile dropdown full-width so games are fully visible */
  @media (max-width: 640px) {
    .header-center { max-width: 200px; }
    .header-center.search-focus { max-width: 100%; }
    #headerSearchInput { font-size: 13px; padding-left: 32px; }
    .header-search-wrap .search-input-icon { left: 10px; }
    .search-result-thumb { width: 56px; height: 56px; min-width: 56px; }
    .search-dropdown {
      position: fixed;
      left: 12px;
      right: 12px;
      top: 62px;
      padding: 14px;
    }
  }

  /* Hide search on very small screens (<340px), keep logo visible */
  @media (max-width: 340px) {
    .header-center { display: none !important; }
  }


/* RoPlays v20 public core: local-first rounded typography.
   IMPORTANT: no global Tailwind-like utility classes live here. Shared components
   are scoped to their own roots so they cannot override responsive page CSS. */
:root{--rp-font:'Varela Round',ui-rounded,'Arial Rounded MT Bold','Segoe UI',Arial,sans-serif}
html{font-family:var(--rp-font)}body{font-family:var(--rp-font);margin:0}*,*:before,*:after{box-sizing:border-box}
/* Login modal must remain fully styled on pages that no longer load Tailwind. */
#loginModal{font-family:var(--rp-font)}#loginModal:not(.hidden){display:flex!important}#loginModal button,#loginModal input{font:inherit}#loginModal button{border:0;cursor:pointer}#loginModal img{max-width:100%;height:auto}#loginModal input{min-height:44px}#loginModal #loginModalError:not(.hidden){display:block!important}
#loginModal #authRegisterPanel:not(.hidden){display:block!important}
/* Small shared icon SVG helpers. */
.rp-icon{width:1em;height:1em;display:inline-block;vertical-align:-.125em;fill:currentColor;flex:0 0 auto}.rp-icon-btn{display:inline-flex;align-items:center;justify-content:center}


/* ==========================================================================\n   RoPlays v18 shared-header regression guard\n   Explicitly styles assets/components that previously inherited Tailwind's\n   preflight/utilities. This keeps public pages independent of Tailwind.\n   ========================================================================== */
.site-header .logo-text-wrapper{
  width:180px!important;height:36px!important;overflow:hidden!important;
  display:inline-flex!important;align-items:center!important;position:relative!important;
  flex:0 0 180px!important;line-height:1!important;
}
.site-header .logo-img-container{
  width:180px!important;height:36px!important;overflow:hidden!important;
  display:flex!important;align-items:center!important;justify-content:flex-start!important;
}
.site-header img.logo-text{
  width:170px!important;max-width:170px!important;height:32px!important;max-height:32px!important;
  object-fit:contain!important;object-position:left center!important;display:block!important;
  margin:0!important;padding:0!important;transform:none!important;
}
.site-header .logo-text-wrapper:hover img.logo-text{transform:translateX(4px)!important}
.site-header img.logo-icon{max-width:45px!important;max-height:45px!important}
@media(max-width:880px){
  .site-header .logo-text-wrapper,.site-header .logo-img-container{width:150px!important;flex-basis:150px!important}
  .site-header img.logo-text{width:145px!important;max-width:145px!important;height:28px!important;max-height:28px!important}
}
@media(max-width:640px){
  .site-header .logo-text-wrapper,.site-header .logo-img-container,.site-header img.logo-text{
    display:none!important;width:0!important;height:0!important;max-width:0!important;max-height:0!important;
    flex-basis:0!important;margin:0!important;padding:0!important;overflow:hidden!important;
  }
}

/* Auth modal: semantic, self-contained styling. Never relies on Tailwind. */
#loginModal.rp-auth-modal{
  position:fixed!important;inset:0!important;z-index:5000!important;
  align-items:center!important;justify-content:center!important;
  padding:24px 16px!important;overflow:auto!important;
  font-family:var(--rp-font)!important;color:#f8fafc!important;
}
#loginModal.rp-auth-modal.hidden{display:none!important}
#loginModal.rp-auth-modal:not(.hidden){display:flex!important}
#loginModal .rp-auth-backdrop{
  position:absolute!important;inset:0!important;background:rgba(0,0,0,.78)!important;
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
}
#loginModal .rp-auth-card{
  position:relative!important;z-index:1!important;width:min(100%,440px)!important;max-width:440px!important;
  max-height:calc(100vh - 48px)!important;overflow:auto!important;
  margin:auto!important;padding:26px!important;background:#18181b!important;
  border:1px solid rgba(255,255,255,.10)!important;border-radius:24px!important;
  box-shadow:0 28px 80px rgba(0,0,0,.58)!important;color:#f8fafc!important;
  scrollbar-width:thin;scrollbar-color:#3f3f46 transparent;
}
#loginModal .rp-auth-card::-webkit-scrollbar{width:7px}
#loginModal .rp-auth-card::-webkit-scrollbar-track{background:transparent}
#loginModal .rp-auth-card::-webkit-scrollbar-thumb{background:#3f3f46;border-radius:999px}
#loginModal .rp-auth-close{
  position:absolute!important;right:14px!important;top:14px!important;width:36px!important;height:36px!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  border:1px solid rgba(255,255,255,.08)!important;border-radius:999px!important;
  background:#27272a!important;color:#e4e4e7!important;z-index:2!important;
}
#loginModal .rp-auth-close:hover{background:#333338!important;color:#fff!important}
#loginModal .rp-auth-thumb-wrap{display:flex!important;justify-content:center!important;margin:0 0 16px!important;padding:0 38px 0!important}
#loginModal .rp-auth-thumb{
  display:block!important;width:auto!important;height:auto!important;max-width:100%!important;max-height:190px!important;
  object-fit:contain!important;border-radius:18px!important;margin:0 auto!important;
}
#loginModal .rp-auth-copy{margin:0 34px 18px!important;text-align:center!important}
#loginModal .rp-auth-copy h2{margin:0!important;color:#fff!important;font-size:24px!important;line-height:1.2!important;font-weight:800!important}
#loginModal .rp-auth-copy p{margin:7px 0 0!important;color:#a1a1aa!important;font-size:13px!important;line-height:1.45!important}
#loginModal .rp-auth-google,
#loginModal #registerModalMount a[href*="google-login"]{
  width:100%!important;min-height:46px!important;display:flex!important;align-items:center!important;justify-content:center!important;
  gap:10px!important;padding:11px 15px!important;border:1px solid rgba(255,255,255,.08)!important;
  border-radius:999px!important;background:#242427!important;color:#fff!important;text-decoration:none!important;
  font-weight:700!important;box-sizing:border-box!important;
}
#loginModal .rp-auth-google:hover,#loginModal #registerModalMount a[href*="google-login"]:hover{background:#2f2f33!important}
#loginModal .rp-auth-google img,#loginModal #registerModalMount a[href*="google-login"] img{width:20px!important;height:20px!important;display:block!important;flex:0 0 20px!important}
#loginModal .rp-auth-separator,#loginModal #registerModalMount .mt-4.flex.items-center.gap-3{
  display:flex!important;align-items:center!important;gap:12px!important;margin:16px 0!important;color:#71717a!important;
  font-size:11px!important;text-transform:uppercase!important;letter-spacing:.12em!important;
}
#loginModal .rp-auth-separator .h-px,#loginModal #registerModalMount .h-px{height:1px!important;flex:1 1 0%!important;background:rgba(255,255,255,.10)!important}
#loginModal .rp-auth-form,#loginModal #registerModalForm{display:block!important;width:100%!important;margin:0!important}
#loginModal .rp-auth-form>*+*,#loginModal #registerModalForm>*+*{margin-top:12px!important}
#loginModal input:not([type="hidden"]),#loginModal select{
  display:block!important;width:100%!important;min-width:0!important;min-height:46px!important;
  padding:11px 15px!important;margin:0!important;border:1px solid rgba(148,163,184,.28)!important;
  border-radius:14px!important;background:#fff!important;color:#18181b!important;
  font:inherit!important;font-size:14px!important;line-height:1.3!important;outline:none!important;
  box-shadow:none!important;box-sizing:border-box!important;
}
#loginModal input::placeholder{color:#71717a!important;opacity:1!important}
#loginModal input:focus,#loginModal select:focus{border-color:#f2c94c!important;box-shadow:0 0 0 3px rgba(242,201,76,.15)!important}
#loginModal select{appearance:auto!important}
#loginModal .rp-auth-submit,#loginModal #registerModalForm button[type="submit"]{
  width:100%!important;min-height:45px!important;padding:10px 16px!important;border:0!important;border-radius:999px!important;
  background:#f2c94c!important;color:#151515!important;font:inherit!important;font-weight:800!important;cursor:pointer!important;
  box-shadow:none!important;
}
#loginModal .rp-auth-submit:hover,#loginModal #registerModalForm button[type="submit"]:hover{background:#ffd85b!important}
#loginModal .rp-auth-secondary,#loginModal #backToLoginBtn{
  width:100%!important;min-height:45px!important;display:flex!important;align-items:center!important;justify-content:center!important;
  padding:10px 16px!important;border:1px solid rgba(255,255,255,.09)!important;border-radius:999px!important;
  background:#27272a!important;color:#fff!important;font:inherit!important;font-weight:700!important;cursor:pointer!important;
}
#loginModal .rp-auth-secondary:hover,#loginModal #backToLoginBtn:hover{background:#323238!important}
#loginModal #loginModalError,#loginModal #registerModalError{
  width:100%!important;padding:11px 13px!important;margin:0 0 12px!important;border:1px solid rgba(248,113,113,.20)!important;
  border-radius:12px!important;background:rgba(127,29,29,.28)!important;color:#fecaca!important;font-size:13px!important;line-height:1.4!important;
}
#loginModal #loginModalError.hidden,#loginModal #registerModalError.hidden{display:none!important}
#loginModal .rp-auth-register-panel>div:first-child{margin:0 38px 16px 0!important}
#loginModal .rp-auth-register-panel h2{margin:0!important;color:#fff!important;font-size:24px!important;line-height:1.2!important}
#loginModal .rp-auth-register-panel p{margin:6px 0 0!important;color:#a1a1aa!important;font-size:13px!important}
#loginModal #registerModalLoader{padding:12px 14px!important;margin-bottom:12px!important;border-radius:12px!important;background:#242427!important;color:#c4c4cc!important;font-size:13px!important}
#loginModal #registerModalMount>.w-full{width:100%!important;background:transparent!important}
#loginModal #registerModalMount .grid{display:grid!important}
#loginModal #registerModalMount .grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))!important}
#loginModal #registerModalMount .grid-cols-1{grid-template-columns:minmax(0,1fr)!important}
#loginModal #registerModalMount .gap-2{gap:8px!important}
#loginModal #registerModalMount .gap-3{gap:12px!important}
#loginModal #registerModalMount .mt-4{margin-top:16px!important}
#loginModal #registerModalMount .border-0{border:0!important}
#loginModal button:disabled{opacity:.65!important;cursor:wait!important}
@media(max-width:520px){
  #loginModal.rp-auth-modal{padding:12px!important;align-items:flex-end!important}
  #loginModal .rp-auth-card{width:100%!important;max-width:none!important;max-height:92vh!important;border-radius:22px 22px 16px 16px!important;padding:22px 16px 18px!important}
  #loginModal .rp-auth-thumb-wrap{padding:0 34px!important;margin-bottom:12px!important}
  #loginModal .rp-auth-copy{margin:0 28px 16px!important}
  #loginModal #registerModalMount .grid-cols-3{gap:6px!important}
  #loginModal input:not([type="hidden"]),#loginModal select{padding-left:12px!important;padding-right:12px!important}
}

/* v19 frontend shell: Profile.php-inspired surfaces, no decorative border outlines. */
#loginModal .rp-auth-card{background:#111113!important;border:0!important;box-shadow:0 28px 80px rgba(0,0,0,.56)!important;border-radius:24px!important}
#loginModal .rp-auth-close{border:0!important;background:#232326!important;color:#e4e4e7!important}
#loginModal .rp-auth-google,#loginModal #registerModalMount a[href*="google-login"]{border:0!important;background:#18181b!important}
#loginModal .rp-auth-google:hover,#loginModal #registerModalMount a[href*="google-login"]:hover{background:#232326!important}
#loginModal input:not([type="hidden"]),#loginModal select{border:0!important;background:#18181b!important;color:#fff!important;box-shadow:none!important}
#loginModal input::placeholder{color:#8f8f98!important}
#loginModal input:focus,#loginModal select:focus{border:0!important;background:#232326!important;box-shadow:0 0 0 3px rgba(242,201,76,.12)!important}
#loginModal .rp-auth-secondary,#loginModal #backToLoginBtn{border:0!important;background:#232326!important}
#loginModal #loginModalError,#loginModal #registerModalError{border:0!important;background:rgba(127,29,29,.30)!important}
#loginModal .rp-auth-separator .h-px,#loginModal #registerModalMount .h-px{background:rgba(255,255,255,.055)!important}

/* v21 frontend consistency: tighter header, rounded site font, restored legacy auth styling. */
:root{--rp-font:'Arial Rounded MT Bold','Trebuchet MS','Segoe UI',Arial,sans-serif}
html,body,button,input,select,textarea{font-family:var(--rp-font)!important}
.site-container{padding-left:2px!important;padding-right:2px!important}
.site-header .header-inner{padding-left:2px!important;padding-right:2px!important}
.site-header .logo-wrap{padding-left:0!important}
.site-header .header-controls{padding-right:0!important}
@media(max-width:640px){.site-container{padding-left:2px!important;padding-right:2px!important}.site-header .header-inner{padding-left:2px!important;padding-right:2px!important}.site-header .header-controls{padding-right:0!important}}

/* Restore the pre-optimization login composition while keeping it self-contained. */
#loginModal.rp-auth-modal{font-family:var(--rp-font)!important}
#loginModal .rp-auth-card{width:min(100%,448px)!important;max-width:448px!important;background:#121212!important;padding:28px!important;border:0!important;border-radius:28px!important;box-shadow:0 28px 80px rgba(0,0,0,.58)!important}
#loginModal .rp-auth-backdrop{background:rgba(0,0,0,.70)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
#loginModal .rp-auth-close{right:16px!important;top:16px!important;width:36px!important;height:36px!important;background:rgba(255,255,255,.05)!important;color:#e2e8f0!important;border:0!important}
#loginModal .rp-auth-thumb-wrap{padding:0!important;margin:0 0 20px!important}
#loginModal .rp-auth-thumb{max-width:350px!important;max-height:none!important;width:auto!important;border-radius:22px!important}
#loginModal .rp-auth-copy{margin:0 40px 20px!important;text-align:center!important}
#loginModal .rp-auth-copy h2{display:none!important}
#loginModal .rp-auth-copy p{margin:0!important;color:#94a3b8!important;font-size:14px!important}
#loginModal .rp-auth-google{min-height:50px!important;background:#202020!important;border-radius:999px!important;color:#fff!important;border:0!important;font-size:14px!important}
#loginModal .rp-auth-separator{margin:16px 0!important;color:#94a3b8!important}
#loginModal input:not([type=hidden]),#loginModal select{min-height:44px!important;background:#fff!important;color:#0f172a!important;border:1px solid rgba(100,116,139,.25)!important;border-radius:16px!important;padding:10px 16px!important;box-shadow:none!important}
#loginModal input::placeholder{color:#64748b!important}
#loginModal input:focus,#loginModal select:focus{background:#fff!important;border-color:#ffb800!important;box-shadow:0 0 0 3px rgba(255,184,0,.15)!important}
#loginModal .rp-auth-submit{min-height:44px!important;background:linear-gradient(90deg,#ffd86b,#ffb800)!important;color:#111!important;border-radius:999px!important;box-shadow:0 10px 24px rgba(255,184,0,.22)!important}
#loginModal .rp-auth-submit:hover{background:#ffc93d!important}
#loginModal .rp-auth-secondary,#loginModal #backToLoginBtn{min-height:44px!important;background:#212121!important;color:#fff!important;border:0!important;border-radius:999px!important}
#loginModal .rp-auth-secondary:hover,#loginModal #backToLoginBtn:hover{background:#2b2b2b!important}
#loginModal #loginModalError,#loginModal #registerModalError{background:rgba(239,68,68,.13)!important;color:#fee2e2!important;border:0!important;border-radius:16px!important}
@media(max-width:520px){#loginModal.rp-auth-modal{align-items:center!important;padding:16px!important}#loginModal .rp-auth-card{border-radius:28px!important;padding:22px 18px!important;max-height:92vh!important}#loginModal .rp-auth-thumb{max-width:300px!important}#loginModal .rp-auth-copy{margin:0 30px 18px!important}}


/* v24 shared frontend consistency. */
:root{--rp-font:'Varela Round',Arial,sans-serif}
html,body,button,input,select,textarea{font-family:var(--rp-font)!important}
/* One balanced header gutter everywhere. */
.site-container{padding-left:12px!important;padding-right:12px!important}
.site-header .header-inner{padding-left:0!important;padding-right:0!important}
.site-header .logo-wrap{padding-left:0!important}
.site-header .header-controls{padding-right:0!important}
@media(max-width:640px){.site-container{padding-left:8px!important;padding-right:8px!important}.site-header .header-inner{padding-left:0!important;padding-right:0!important}.site-header .header-controls{padding-right:0!important}}
/* Login and registration are mutually exclusive. Do not depend on Tailwind's .hidden. */
#loginModal #authLoginPanel.hidden,#loginModal #authRegisterPanel.hidden,#loginModal #authLoginPanel[hidden],#loginModal #authRegisterPanel[hidden]{display:none!important}
#loginModal #authLoginPanel:not(.hidden):not([hidden]),#loginModal #authRegisterPanel:not(.hidden):not([hidden]){display:block!important}