/* =========================================================================
   MODERN REFRESH – homepage (sextasks.com / erotickahra.cz)
   Additive overrides loaded AFTER bootstrap-theme.min.css. 2026-10-23.
   ========================================================================= */

:root{
  --brand:#9c02a7;
  --brand-2:#d6249f;
  --brand-3:#f7a8ff;
  --brand-grad:linear-gradient(135deg,#9c02a7 0%,#d6249f 100%);
}

/* ---------- Navbar: glassmorphism ---------- */
.navbar-inverse.navbar-fixed-top{
  background:rgba(14,13,16,.60)!important;
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  backdrop-filter:saturate(160%) blur(14px);
  border:0!important;
  border-bottom:1px solid rgba(255,255,255,.08)!important;
  box-shadow:0 6px 24px rgba(0,0,0,.35);
  transition:background .3s ease;
}
.navbar-inverse .navbar-nav>li>a{
  font-weight:600; letter-spacing:.3px;
  transition:color .2s ease, transform .2s ease;
}
.navbar-inverse .navbar-nav>li>a:hover{ color:#fff!important; transform:translateY(-1px); }
.navbar-inverse .navbar-nav>.active>a,
.navbar-inverse .navbar-nav>.active>a:focus,
.navbar-inverse .navbar-nav>.active>a:hover{
  background:transparent!important; color:var(--brand-3)!important;
  box-shadow:inset 0 -2px 0 var(--brand-2);
}

/* ---------- Buttons: pill + gradient + motion ---------- */
.btn{ border-radius:10px!important;
  transition:transform .15s ease, box-shadow .25s ease, filter .2s ease!important; }
.btn:active{ transform:translateY(1px); }
.btn-primary,.btn-primary:focus{
  background-image:var(--brand-grad)!important;
  background-color:#9c02a7!important; border:none!important;
  box-shadow:0 6px 18px rgba(156,2,167,.32);
}
.btn-primary:hover{ filter:brightness(1.08);
  transform:translateY(-2px); box-shadow:0 12px 28px rgba(214,36,159,.45); }
.btn-success{ border:none!important; border-radius:10px!important; }

/* ---------- Hero ---------- */
.intro-header{ position:relative; }
.intro-header:before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(130% 120% at 50% 15%,
            rgba(0,0,0,.10) 0%, rgba(0,0,0,.50) 55%, rgba(0,0,0,.82) 100%);
}
.intro-header .container{ position:relative; z-index:1; }
.homepage-h1{
  font-family:'Poppins','Raleway',sans-serif!important;
  font-weight:800!important; letter-spacing:-1.5px; line-height:1.04;
  text-shadow:0 6px 34px rgba(0,0,0,.65);
  animation:hpFade .9s cubic-bezier(.2,.7,.2,1) both;
}
.homepage-h1 strong{
  background:linear-gradient(135deg,var(--brand-3),var(--brand-2));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.subtitle .subtitle-container{ letter-spacing:.4px;
  animation:hpFade 1.2s cubic-bezier(.2,.7,.2,1) both; }
.intro-button{
  border-radius:50px!important; padding:15px 46px!important;
  font-weight:600!important; font-size:20px!important;
  background-image:var(--brand-grad)!important; background-color:#9c02a7!important;
  border:none!important; box-shadow:0 12px 34px rgba(156,2,167,.5);
  animation:hpFade 1.5s cubic-bezier(.2,.7,.2,1) both;
}
.intro-button:hover{ transform:translateY(-3px) scale(1.03); filter:brightness(1.1);
  box-shadow:0 18px 44px rgba(214,36,159,.55); }
@keyframes hpFade{ from{opacity:0; transform:translateY(20px);} to{opacity:1; transform:none;} }

/* ---------- Section headings ---------- */
.h1big,.section-heading{
  font-family:'Poppins','Century Gothic',sans-serif!important;
  font-weight:800!important; letter-spacing:-.5px;
}
.h1color{
  background:linear-gradient(135deg,var(--brand) 0%,var(--brand-2) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}

/* ---------- Image cards (packages / tools / community) ---------- */
.hp_image_container{
  border-radius:16px!important; overflow:hidden; position:relative;
  box-shadow:0 14px 34px rgba(0,0,0,.28);
  transition:transform .3s ease, box-shadow .3s ease;
}
.hp_image_container:hover{ transform:translateY(-6px);
  box-shadow:0 22px 50px rgba(0,0,0,.38); }
.hp_extra_image{ display:block; width:100%; transition:transform .5s ease; }
.hp_image_container:hover .hp_extra_image{ transform:scale(1.06); }
.hp_image_title{
  background:linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.35) 70%, transparent 100%)!important;
}

/* ---------- Stat / practice pills ---------- */
.practice_item{
  display:inline-block; margin:5px; padding:8px 18px; border-radius:50px;
  background:rgba(255,255,255,.08); color:#fff; font-weight:600;
  border:1px solid rgba(255,255,255,.14);
}

/* ---------- Content sections: a touch more air ---------- */
.content-section-a,.content-section-b{ padding-top:56px; padding-bottom:56px; }

/* ---------- Scroll-down arrow ---------- */
.hp-arrow-down{ opacity:.85; transition:transform .3s ease, opacity .3s ease; }
.hp-arrow-down:hover{ transform:translateY(5px); opacity:1; }

/* ---------- Respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .homepage-h1,.subtitle .subtitle-container,.intro-button{ animation:none!important; }
  .btn,.hp_image_container,.hp_extra_image{ transition:none!important; }
}

/* =========================================================================
   Forms & cards (registration / login / account) — added 2026-10-23
   ========================================================================= */
.panel.gamecard, .panel-default{
  border:none!important; border-radius:18px!important;
  box-shadow:0 18px 44px rgba(0,0,0,.10)!important;
}
/* NOTE: no overflow:hidden (would clip tooltips/popovers) and no forced
   background on headings (many headings use inline colored bg + light text). */
.panel.gamecard>.panel-heading{
  border-bottom:1px solid rgba(0,0,0,.06)!important; padding:16px 22px;
}
.panel-heading,.panel-title{
  font-family:'Poppins','Raleway',sans-serif!important; font-weight:700!important;
}
.form-control{
  border-radius:12px!important; border:1.5px solid #e7e7ec!important;
  box-shadow:none!important; padding:11px 16px!important; height:auto!important;
  transition:border-color .2s ease, box-shadow .2s ease!important;
}
.form-control:focus{
  border-color:var(--brand-2)!important;
  box-shadow:0 0 0 4px rgba(214,36,159,.15)!important;
}
.captcha_image,.captcha_image img{ border-radius:12px!important; }
.checkbox label{ padding-left:4px; }
.form-horizontal .control-label{ font-weight:600; color:#555; }

/* =========================================================================
   Showroom / ukázky — added 2026-10-23
   ========================================================================= */
.h1-showroom{
  font-family:'Poppins','Raleway',sans-serif!important; font-weight:800!important;
  letter-spacing:-.5px;
  background:linear-gradient(135deg,var(--brand) 0%,var(--brand-2) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.img-thumbnail{
  border:none!important; border-radius:16px!important; padding:0!important;
  background:transparent!important;
  box-shadow:0 16px 40px rgba(0,0,0,.14)!important;
  transition:transform .3s ease, box-shadow .3s ease!important;
}
.img-thumbnail:hover{ transform:translateY(-4px); box-shadow:0 24px 54px rgba(0,0,0,.2)!important; }
.list-showroom li{ margin-bottom:12px; line-height:1.55; }
.row-section h3{ font-family:'Poppins','Raleway',sans-serif!important; font-weight:700!important; color:#333; }

/* =========================================================================
   Play / task detail page — added 2026-10-24
   ========================================================================= */
.gamecard img.img-responsive, .gamecard .task_image img, .gamecard .full-width{ border-radius:12px; }
.panel.panel-primary.gamecard{ border:none!important; }
/* reward/like/comment row spacing */
.ion-trophy{ font-size:20px; }

/* =========================================================================
   Game list — state badges + cozy table — added 2026-10-24
   ========================================================================= */
.game-state{
  display:inline-block; padding:5px 14px; border-radius:50px;
  font-size:12px; font-weight:700; letter-spacing:.3px; line-height:1;
  text-transform:uppercase;
}
.game-state-0{ background:#e7f3fb; color:#1b86c9; }   /* Nová hra */
.game-state-1{ background:#e6f8ee; color:#1f9d57; }   /* Rozehraná */
.game-state-2{ background:#efedf1; color:#6d6d75; }   /* Ukončená */

.gamecard .table{ margin-bottom:0; }
.gamecard .table>tbody>tr>td{
  padding:16px 16px!important; vertical-align:middle!important;
  border-top:1px solid #f1eef3!important;
}
.gamecard .table>tbody>tr{ transition:background-color .15s ease; cursor:pointer; }
.gamecard .table>tbody>tr:hover{ background-color:#faf6fc; }
.gamecard .table>tbody>tr>td:first-child{ font-weight:700; color:#3a3340; }
.gamecard .table>tbody>tr>td:nth-child(2){ color:#9a94a0; font-size:13px; }

/* Game list — keep action buttons on one line (fix wrapping) */
.gamecard .table>tbody>tr>td:last-child{
  white-space:nowrap!important; text-align:right!important;
  padding-left:6px!important; padding-right:10px!important;
}
.gamecard .table>tbody>tr>td:last-child .btn{ display:inline-block; float:none!important; }

/* Game list — uniform action buttons (same shadow/radius; color differs only) */
.gamecard .table .btn{
  box-shadow:0 2px 6px rgba(0,0,0,.14)!important;
  border-radius:10px!important;
  margin:0 2px!important;
}
.gamecard .table .btn:hover{ transform:translateY(-1px); box-shadow:0 5px 12px rgba(0,0,0,.2)!important; }

/* Navbar brand/logo — vertically center so the whole logo is visible (was clipped) */
.navbar-inverse.navbar-fixed-top .navbar-brand{
  display:inline-flex!important; align-items:center!important;
  height:51px!important; padding-top:0!important; padding-bottom:0!important;
}
.navbar-inverse.navbar-fixed-top .navbar-brand img{
  max-height:40px!important; width:auto!important; vertical-align:middle;
}

/* =========================================================================
   Page background — subtle romantic gradient + faint hearts — 2026-10-24
   ========================================================================= */
body{
  background-color:#eeecf1 !important;
  background-image:
    radial-gradient(900px 520px at 12% -8%, rgba(214,36,159,.07), transparent 60%),
    radial-gradient(820px 480px at 100% 2%, rgba(156,2,167,.06), transparent 55%),
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='96'%20height='96'%20viewBox='0%200%2096%2096'%3E%3Ctext%20x='10'%20y='36'%20font-size='26'%20fill='rgba(156,2,167,0.05)'%3E%E2%99%A5%3C/text%3E%3Ctext%20x='56'%20y='84'%20font-size='26'%20fill='rgba(214,36,159,0.05)'%3E%E2%99%A5%3C/text%3E%3C/svg%3E") !important;
  background-repeat:no-repeat,no-repeat,repeat !important;
  background-attachment:fixed,fixed,scroll !important;
}

/* =========================================================================
   Rounded group headings + modern headings everywhere — 2026-10-24
   ========================================================================= */
.panel>.panel-heading{ border-radius:18px 18px 0 0 !important; }
.panel{ border-radius:18px !important; }
h1,h2,h3,h4,h5,.panel-title,.panel-heading,.section-heading,.h1big,.h1-showroom,.homepage-h1{
  font-family:'Poppins','Raleway',sans-serif!important; font-weight:700!important;
  letter-spacing:-.2px;
}

/* Flat uniform purple action button in game list (was gradient+glow, mismatched) */
.gamecard .table .btn-primary{
  background-image:none!important; background-color:#bf179e!important;
  box-shadow:0 2px 6px rgba(0,0,0,.14)!important;
}
.gamecard .table .btn-primary:hover{
  background-color:#a8158c!important; box-shadow:0 5px 12px rgba(0,0,0,.2)!important;
}

/* =========================================================================
   User profile cards (users list / dating) — 2026-10-24
   ========================================================================= */
.user-profile-card{ transition:transform .2s ease, box-shadow .2s ease; }
.user-profile-card:hover{ transform:translateY(-5px); box-shadow:0 24px 50px rgba(156,2,167,.18)!important; }
.user-profile-card .panel-body{ overflow:hidden; }
.user-profile-card .panel-body img.img-responsive{ transition:transform .45s ease; border-radius:8px; }
.user-profile-card:hover .panel-body img.img-responsive{ transform:scale(1.05); }
.user-profile-card .panel-footer{
  background:#fff!important; border-top:1px solid #f1eef3!important;
  border-radius:0 0 18px 18px!important; padding:12px 16px!important;
  font-weight:600; color:#555;
}

/* =========================================================================
   Game-list action buttons — truly uniform (same size + bevel) — 2026-10-24
   ========================================================================= */
.gamecard .table .btn{
  min-width:54px!important; height:44px!important; padding:0!important;
  display:inline-flex!important; align-items:center!important; justify-content:center!important;
  box-sizing:border-box!important; border-radius:12px!important; font-size:16px!important;
  box-shadow:0 3px 7px rgba(0,0,0,.16)!important;
}
.gamecard .table .btn-primary{
  background-color:#bf179e!important; background-image:none!important;
  border:none!important; border-bottom:4px solid #8e1274!important; color:#fff!important;
}
/* logo a touch larger (and fully visible) */
.navbar-inverse.navbar-fixed-top .navbar-brand img{ max-height:44px!important; }

/* =========================================================================
   Bolder romantic background (stronger gradient + denser hearts/sparkles) — 2026-10-24
   ========================================================================= */
body{
  background-color:#efe6f4 !important;
  background-image:
    radial-gradient(1000px 620px at 6% -6%, rgba(214,36,159,.15), transparent 55%),
    radial-gradient(900px 560px at 100% -2%, rgba(124,58,205,.13), transparent 52%),
    radial-gradient(760px 760px at 50% 118%, rgba(255,110,170,.11), transparent 55%),
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='74'%20height='74'%20viewBox='0%200%2074%2074'%3E%3Ctext%20x='6'%20y='28'%20font-size='22'%20fill='rgba(156,2,167,0.11)'%3E%E2%99%A5%3C/text%3E%3Ctext%20x='46'%20y='66'%20font-size='16'%20fill='rgba(214,36,159,0.075)'%3E%E2%99%A5%3C/text%3E%3Ccircle%20cx='58'%20cy='18'%20r='2'%20fill='rgba(124,58,205,0.09)'/%3E%3Ccircle%20cx='22'%20cy='58'%20r='1.6'%20fill='rgba(214,36,159,0.09)'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat,no-repeat,no-repeat,repeat !important;
  background-attachment:fixed,fixed,fixed,scroll !important;
}

/* =========================================================================
   Play / task page — modern polish — 2026-10-24
   ========================================================================= */
.panel-primary>.panel-heading{ background:linear-gradient(135deg,#9c02a7 0%,#d6249f 100%)!important; border:none!important; color:#fff!important; }
#content{ font-size:17px!important; line-height:1.6!important; color:#353036; }
#answer_column .panel-body{ padding:18px!important; }
#Done .btn, #play_right .btn.full-width{
  border-radius:14px!important; font-weight:700!important; padding:15px!important; border:none!important;
  box-shadow:0 6px 16px rgba(0,0,0,.12)!important; transition:transform .15s ease, filter .2s ease!important;
}
#Done .btn-success, #play_right .btn-success.full-width{ background-image:linear-gradient(135deg,#46c86d,#27ae60)!important; color:#fff!important; }
#Done .btn-default, #play_right .btn-default.full-width{ background:#ecedf0!important; color:#5a5a5a!important; }
#Done .btn:hover, #play_right .btn.full-width:hover{ transform:translateY(-2px); filter:brightness(1.04); }
#game_results_icon,#like_content,#user_comments{ border-radius:14px!important; box-shadow:0 3px 8px rgba(0,0,0,.14)!important; }

/* =========================================================================
   Background pattern -> subtle repeating GAME icons (replaces hearts) — 2026-10-24
   ========================================================================= */
body{
  background-color:#efe6f4 !important;
  background-image:
    radial-gradient(1000px 620px at 6% -6%, rgba(214,36,159,.15), transparent 55%),
    radial-gradient(900px 560px at 100% -2%, rgba(124,58,205,.13), transparent 52%),
    radial-gradient(760px 760px at 50% 118%, rgba(255,110,170,.11), transparent 55%),
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='112'%20height='112'%20viewBox='0%200%20112%20112'%3E%3Cg%20font-family='Arial,sans-serif'%3E%3Ctext%20x='8'%20y='30'%20font-size='18'%20fill='rgba(156,2,167,0.11)'%3E%E2%99%A0%3C/text%3E%3Ctext%20x='62'%20y='26'%20font-size='15'%20fill='rgba(214,36,159,0.11)'%3E%E2%99%A6%3C/text%3E%3Ctext%20x='32'%20y='66'%20font-size='17'%20fill='rgba(124,58,205,0.11)'%3E%E2%98%85%3C/text%3E%3Ctext%20x='88'%20y='72'%20font-size='13'%20fill='rgba(214,36,159,0.11)'%3E%E2%96%B6%3C/text%3E%3Ctext%20x='14'%20y='100'%20font-size='15'%20fill='rgba(156,2,167,0.11)'%3E%E2%99%A3%3C/text%3E%3Ctext%20x='74'%20y='104'%20font-size='16'%20fill='rgba(124,58,205,0.10)'%3E%E2%99%A0%3C/text%3E%3C/g%3E%3C/svg%3E") !important;
  background-repeat:no-repeat,no-repeat,no-repeat,repeat !important;
  background-attachment:fixed,fixed,fixed,scroll !important;
}

/* =========================================================================
   Play task card = inviting "paper" card + modern progress — 2026-10-24
   ========================================================================= */
.panel.panel-primary.gamecard{
  border-radius:20px!important;
  box-shadow:0 2px 6px rgba(0,0,0,.06), 0 26px 60px rgba(124,20,120,.20)!important;
  overflow:hidden;
}
.panel.panel-primary.gamecard>.panel-heading{
  padding:18px 26px!important; font-size:18px!important; border-radius:20px 20px 0 0!important;
}
.panel.panel-primary.gamecard>.panel-body{ padding:30px!important; }
.panel.panel-primary.gamecard .panel-body img.img-thumbnail,
.panel.panel-primary.gamecard .panel-body img.img-responsive{
  border-radius:16px!important; box-shadow:0 14px 34px rgba(0,0,0,.22)!important; border:none!important;
}
.panel.panel-primary.gamecard #content{ font-size:20px!important; line-height:1.55!important; color:#2f2a30!important; }
.panel.panel-primary.gamecard>.panel-footer{
  background:#faf7fb!important; border-top:1px solid #efe9f1!important;
  border-radius:0 0 20px 20px!important; font-size:14px; color:#6a6370;
}

/* Modern progress bar */
.progress.full-width{
  height:18px!important; border-radius:50px!important; background:#e9e5ee!important;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.10)!important; overflow:hidden!important; border:none!important;
}
.progress.full-width .progress-bar{
  background-image:linear-gradient(90deg,#9c02a7 0%,#d6249f 100%)!important;
  border-radius:50px!important; line-height:18px!important; font-size:11px!important;
  font-weight:700!important; box-shadow:none!important; transition:width .6s ease!important;
}

/* =========================================================================
   Packages list — compact modern rows; purchased faded — 2026-10-24
   ========================================================================= */
.package-row{
  border:1px solid #eee!important; border-radius:14px!important;
  margin:10px 0!important; padding:8px 12px 4px!important;
  box-shadow:0 4px 12px rgba(0,0,0,.05)!important;
  transition:box-shadow .2s ease, transform .2s ease, opacity .2s ease!important;
}
.package-row:hover{ box-shadow:0 12px 26px rgba(156,2,167,.12)!important; transform:translateY(-2px); }
.package-row img.img-thumbnail{
  height:88px!important; width:100%!important; object-fit:cover!important;
  border-radius:10px!important; border:none!important; box-shadow:0 3px 8px rgba(0,0,0,.12)!important;
}
.package-row .pull-left.margin-top{ font-size:18px; font-weight:700; color:#3a3340; }
.package-purchased{ opacity:.5; filter:grayscale(.35); }
.package-purchased:hover{ opacity:.72; transform:none; }
.label-purchased{ color:#27ae60!important; font-weight:700!important; }

/* =========================================================================
   Background pattern -> tiny cute repeating game icons — 2026-10-24
   ========================================================================= */
body{
  background-color:#efe6f4 !important;
  background-image:
    radial-gradient(1000px 620px at 6% -6%, rgba(214,36,159,.14), transparent 55%),
    radial-gradient(900px 560px at 100% -2%, rgba(124,58,205,.12), transparent 52%),
    radial-gradient(760px 760px at 50% 118%, rgba(255,110,170,.10), transparent 55%),
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='60'%20height='60'%20viewBox='0%200%2060%2060'%3E%3Cg%20font-family='Arial,sans-serif'%3E%3Ctext%20x='6'%20y='16'%20font-size='9'%20fill='rgba(156,2,167,0.08)'%3E%E2%99%A0%3C/text%3E%3Ctext%20x='40'%20y='30'%20font-size='8'%20fill='rgba(124,58,205,0.08)'%3E%E2%98%85%3C/text%3E%3Ctext%20x='22'%20y='50'%20font-size='9'%20fill='rgba(214,36,159,0.08)'%3E%E2%99%A6%3C/text%3E%3C/g%3E%3C/svg%3E") !important;
  background-repeat:no-repeat,no-repeat,no-repeat,repeat !important;
  background-attachment:fixed,fixed,fixed,scroll !important;
}

/* Background tiny pattern — slightly stronger so the cute repeat is visible — 2026-10-24 */
body{
  background-color:#efe6f4 !important;
  background-image:
    radial-gradient(1000px 620px at 6% -6%, rgba(214,36,159,.13), transparent 55%),
    radial-gradient(900px 560px at 100% -2%, rgba(124,58,205,.11), transparent 52%),
    radial-gradient(760px 760px at 50% 118%, rgba(255,110,170,.09), transparent 55%),
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='56'%20height='56'%20viewBox='0%200%2056%2056'%3E%3Cg%20font-family='Arial,sans-serif'%3E%3Ctext%20x='5'%20y='15'%20font-size='10'%20fill='rgba(140,20,150,0.13)'%3E%E2%99%A0%3C/text%3E%3Ctext%20x='36'%20y='28'%20font-size='9'%20fill='rgba(124,58,205,0.13)'%3E%E2%98%85%3C/text%3E%3Ctext%20x='20'%20y='46'%20font-size='10'%20fill='rgba(200,30,150,0.13)'%3E%E2%99%A6%3C/text%3E%3C/g%3E%3C/svg%3E") !important;
  background-repeat:no-repeat,no-repeat,no-repeat,repeat !important;
  background-attachment:fixed,fixed,fixed,scroll !important;
}

/* Finished-game state badge gets a checkmark */
.game-state-2::before{ content:"\2713\00a0"; font-weight:900; }

/* =========================================================================
   Taller progress bars + modern results page — 2026-10-24
   ========================================================================= */
.progress, .progress.full-width{
  height:26px!important; border-radius:50px!important; background:#e8e4ee!important;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.10)!important; overflow:hidden!important; border:none!important;
}
.progress .progress-bar, .progress.full-width .progress-bar{
  background-image:linear-gradient(90deg,#9c02a7 0%,#d6249f 100%)!important;
  border-radius:50px!important; line-height:26px!important; font-size:13px!important;
  font-weight:700!important; box-shadow:none!important; transition:width .6s ease!important;
}

/* Results table (page_complete) */
#gamelist.table>thead>tr>th{
  border:none!important; border-bottom:2px solid #efe9f1!important;
  font-family:'Poppins','Raleway',sans-serif!important; font-weight:700!important;
  color:#6a6370!important; padding:14px 10px!important;
}
#gamelist.table>tbody>tr>td{
  border-top:1px solid #f3eff5!important; padding:16px 10px!important;
  vertical-align:middle!important; font-size:16px;
}
#gamelist .bg-success{ background:#e9f8ef!important; }
#gamelist .bg-warning{ background:#fff6e6!important; }
#gamelist>tbody>tr:first-child td{ font-weight:700; }
.result.badge{
  font-size:15px!important; padding:8px 16px!important; border-radius:50px!important;
  font-weight:700!important; min-width:44px;
}
.badge.bg-success{ background:#27ae60!important; color:#fff!important; }
.badge.bg-warning{ background:#f0ad2e!important; color:#fff!important; }
.panel-success.gamecard>.panel-footer{ background:#faf7fb!important; border-radius:0 0 20px 20px!important; }

/* =========================================================================
   Darker top navbar (logo contrast) — 2026-10-24
   ========================================================================= */
.navbar-inverse.navbar-fixed-top{
  background:rgba(32,24,38,.90)!important;
  -webkit-backdrop-filter:saturate(160%) blur(12px); backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid rgba(255,255,255,.07)!important;
}

/* =========================================================================
   Users: compact profile cards (more per row) + modern filter — 2026-10-24
   ========================================================================= */
.user-profile-card{ margin-bottom:16px; }
.user-profile-card .panel-heading{ font-size:13px!important; padding:8px 10px!important; }
.user-profile-card .panel-heading .user_list_flag{ height:16px; }
.user-profile-card .panel-body{ min-height:0!important; padding:0!important; }
.user-profile-card .panel-body img.img-responsive{ height:150px!important; width:100%!important; object-fit:cover!important; border-radius:0!important; }
.user-profile-card .panel-footer{ padding:8px 10px!important; font-size:12px!important; }
.user-profile-card .panel-footer .btn{ padding:4px 12px!important; font-size:12px!important; }

/* Users filter bar */
.gamecard select, select[name='country_code'], #country_code{
  border-radius:12px!important; border:1.5px solid #e7e7ec!important; padding:9px 14px!important; height:auto!important;
}
.user_type_box_short{
  border-radius:12px!important; padding:8px 14px!important; border:2px solid #ece8f0!important;
  transition:all .15s ease; margin:0 3px;
}

/* =========================================================================
   Modern filter (users & dating): select2 + gender toggle pills — 2026-10-24
   ========================================================================= */
.select2-container{ max-width:100%!important; }
.select2-container--default .select2-selection--single{
  border-radius:12px!important; border:1.5px solid #e2dce8!important; height:46px!important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{ line-height:44px!important; padding-left:14px!important; }
.select2-container--default .select2-selection--single .select2-selection__arrow{ height:44px!important; }
.select2-dropdown{ border:1.5px solid #cdbdd6!important; border-radius:12px!important; overflow:hidden; }
.select2-container--default .select2-results__option--highlighted[aria-selected]{ background:#9c02a7!important; }
.select2-search--dropdown .select2-search__field{ border-radius:8px!important; border:1.5px solid #e2dce8!important; padding:6px 10px!important; }

.user_type_box_short{
  display:inline-flex!important; align-items:center!important; justify-content:center!important;
  min-width:64px; min-height:48px; margin:4px!important; padding:8px 16px!important;
  border-radius:14px!important; background:#fff!important; border:2px solid #e8e2ee!important;
  cursor:pointer; transition:all .15s ease!important; box-shadow:0 2px 6px rgba(0,0,0,.05)!important;
}
.user_type_box_short input[type=checkbox]{ display:none!important; }
.user_type_box_short:hover{ border-color:#d6249f!important; transform:translateY(-1px); }
.user_type_box_short.active{
  background:linear-gradient(135deg,#9c02a7,#d6249f)!important; border-color:transparent!important;
  box-shadow:0 6px 16px rgba(156,2,167,.32)!important;
}
.user_type_box_short.active, .user_type_box_short.active *{ color:#fff!important; }
.user_type_box_short img{ height:22px; width:auto; }

/* User profile card heading: smaller + ellipsis (no overflow) */
.user-profile-card .panel-heading{ font-size:13px!important; padding:8px 10px!important; white-space:nowrap; overflow:hidden; }
.user-profile-card .panel-heading a{ display:inline-block; max-width:72%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:middle; font-size:13px!important; }

/* Global responsive safety */
img{ max-width:100%; height:auto; }
@media (max-width:767px){
  .homepage-h1{ font-size:40px!important; letter-spacing:-1px; }
  .h1big{ font-size:28px!important; }
  .intro-button{ padding:12px 30px!important; font-size:17px!important; }
  .gamecard .table>tbody>tr>td{ padding:10px 6px!important; }
  .panel>.panel-heading{ font-size:16px!important; }
}

/* =========================================================================
   Game tables — more compact (name + state on one line) — 2026-10-24
   ========================================================================= */
.gamecard .table>tbody>tr>td{ padding:9px 8px!important; }
.gamecard .table>tbody>tr>td:first-child{ white-space:nowrap!important; font-size:15px!important; }
.gamecard .table>tbody>tr>td:nth-child(2){ white-space:nowrap!important; }
.game-state{ white-space:nowrap!important; font-size:11px!important; padding:4px 10px!important; }
.gamecard .table .btn{ height:40px!important; min-width:46px!important; }

/* =========================================================================
   Game info tooltip stats + airier state badges — 2026-10-24
   ========================================================================= */
.content_tooltip .tooltip-stats{ text-align:center; margin-bottom:10px; }
.content_tooltip .tooltip-stats-num{ font-size:22px; font-weight:800; color:#9c02a7; font-family:'Poppins','Raleway',sans-serif; line-height:1.1; }
.content_tooltip .tooltip-stats-label{ font-size:11px; color:#8a8a8a; text-transform:uppercase; letter-spacing:.5px; margin-bottom:6px; }
.content_tooltip .tooltip-progress{ height:14px; border-radius:50px; background:#ececf0; overflow:hidden; }
.content_tooltip .tooltip-progress-bar{ height:100%; background:linear-gradient(90deg,#9c02a7,#d6249f); color:#fff; font-size:10px; line-height:14px; text-align:center; border-radius:50px; min-width:22px; }

/* State badges airier (still single line) */
.game-state{ white-space:nowrap!important; font-size:11px!important; padding:7px 16px!important; }
.gamecard .table>tbody>tr>td{ padding:12px 8px!important; }

/* =========================================================================
   RULES / how-to-play page — modern redesign — 2026-10-24
   ========================================================================= */
.rules-page{ padding-bottom:40px; }
.rules-hero{
  text-align:center; color:#fff; border-radius:24px; padding:46px 24px 40px;
  margin:18px 0 30px;
  background:linear-gradient(135deg,#9c02a7 0%,#d6249f 60%,#ff6ea8 120%);
  box-shadow:0 20px 50px rgba(156,2,167,.30); position:relative; overflow:hidden;
}
.rules-hero:before{ content:""; position:absolute; inset:0;
  background:radial-gradient(400px 200px at 80% -10%, rgba(255,255,255,.18), transparent 60%); }
.rules-hero-badge{ width:84px; height:84px; margin:0 auto 18px; border-radius:50%;
  background:rgba(255,255,255,.18); display:flex; align-items:center; justify-content:center;
  font-size:38px; backdrop-filter:blur(4px); position:relative; }
.rules-hero-title{ font-family:'Poppins','Raleway',sans-serif; font-weight:800; font-size:38px;
  letter-spacing:-1px; margin:0 0 12px; text-shadow:0 4px 20px rgba(0,0,0,.25); position:relative; }
.rules-hero-sub{ font-size:17px; max-width:720px; margin:0 auto 22px; opacity:.95; position:relative; line-height:1.5; }
.rules-hero-btn{ position:relative; background:#fff!important; color:#9c02a7!important; background-image:none!important;
  border:none!important; border-radius:50px!important; padding:14px 40px!important; font-weight:700!important;
  box-shadow:0 10px 26px rgba(0,0,0,.22)!important; }
.rules-hero-btn:hover{ transform:translateY(-2px); color:#8a0d8f!important; }

.rules-block{ margin-bottom:34px; }
.rules-h2{ font-family:'Poppins','Raleway',sans-serif!important; font-weight:800!important;
  font-size:26px; color:#3a2a40; display:flex; align-items:center; gap:12px; margin:0 0 18px; letter-spacing:-.3px; }
.rules-h2-ico{ width:44px; height:44px; flex:0 0 44px; border-radius:12px; display:inline-flex;
  align-items:center; justify-content:center; color:#fff; font-size:20px;
  background:linear-gradient(135deg,#9c02a7,#d6249f); box-shadow:0 6px 16px rgba(156,2,167,.30); }

.rules-list{ list-style:none; padding:0; margin:0; }
.rules-list li{ position:relative; padding:10px 0 10px 32px; line-height:1.55; color:#3f3845;
  border-bottom:1px solid #efeaf2; font-size:15.5px; }
.rules-list li:last-child{ border-bottom:none; }
.rules-list li:before{ content:"\2713"; position:absolute; left:0; top:10px; width:20px; height:20px;
  border-radius:50%; background:rgba(156,2,167,.12); color:#9c02a7; font-size:11px; font-weight:900;
  display:flex; align-items:center; justify-content:center; }

/* what you need cards */
.rules-need-grid{ display:flex; flex-wrap:wrap; gap:16px; }
.rules-need-card{ flex:1 1 220px; background:#fff; border-radius:18px; padding:22px;
  box-shadow:0 12px 30px rgba(0,0,0,.08); display:flex; gap:14px; align-items:center;
  font-size:15.5px; color:#3f3845; transition:transform .2s, box-shadow .2s; }
.rules-need-card:hover{ transform:translateY(-4px); box-shadow:0 20px 44px rgba(156,2,167,.14); }
.rules-need-ico{ width:52px; height:52px; flex:0 0 52px; border-radius:14px; color:#fff; font-size:22px;
  display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#9c02a7,#d6249f); }

/* numbered steps */
.rules-step{ display:flex; gap:20px; background:#fff; border-radius:20px; padding:24px;
  box-shadow:0 14px 36px rgba(0,0,0,.08); margin-bottom:20px; }
.rules-step-num{ flex:0 0 54px; width:54px; height:54px; border-radius:50%; color:#fff;
  font-family:'Poppins',sans-serif; font-weight:800; font-size:24px; display:flex; align-items:center;
  justify-content:center; background:linear-gradient(135deg,#9c02a7,#d6249f);
  box-shadow:0 8px 20px rgba(156,2,167,.32); }
.rules-step-body{ flex:1 1 auto; min-width:0; }
.rules-step-title{ font-family:'Poppins','Raleway',sans-serif!important; font-weight:700!important;
  font-size:20px; color:#3a2a40; margin:4px 0 10px; }
.rules-gallery{ display:flex; flex-wrap:wrap; gap:12px; margin-top:14px; }
.rules-gallery .rules-shot{ flex:1 1 150px; max-width:220px; display:block; }
.rules-gallery .rules-shot img{ width:100%; border-radius:12px; box-shadow:0 8px 20px rgba(0,0,0,.16);
  transition:transform .3s, box-shadow .3s; }
.rules-gallery .rules-shot:hover img{ transform:translateY(-3px) scale(1.02); box-shadow:0 16px 34px rgba(0,0,0,.24); }

/* info cards grid */
.rules-info-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.rules-info-card{ background:#fff; border-radius:18px; padding:22px 24px;
  box-shadow:0 12px 30px rgba(0,0,0,.07); }
.rules-info-card h3{ font-family:'Poppins','Raleway',sans-serif!important; font-weight:700!important;
  font-size:18px; color:#9c02a7; margin:0 0 8px; }

.rules-cta{ text-align:center; margin-top:10px; }
.rules-cta .btn{ border-radius:50px!important; padding:16px 48px!important; font-size:19px!important; font-weight:700!important; }

@media (max-width:767px){
  .rules-hero-title{ font-size:28px; }
  .rules-h2{ font-size:21px; }
  .rules-step{ flex-direction:column; gap:12px; padding:18px; }
  .rules-step-num{ width:44px; height:44px; flex-basis:44px; font-size:20px; }
  .rules-info-grid{ grid-template-columns:1fr; }
  .rules-gallery .rules-shot{ flex-basis:46%; }
}

/* =========================================================================
   Games page + right panel + user cards — cohesive premium polish — 2026-10-24
   ========================================================================= */
/* Right-panel info cards: gradient heading (match games sections) */
.panel-info.gamecard{ border:none!important; box-shadow:0 14px 36px rgba(0,0,0,.09)!important; }
.panel-info.gamecard>.panel-heading{
  background:linear-gradient(135deg,#9c02a7 0%,#d6249f 100%)!important; color:#fff!important;
  border:none!important; border-radius:18px 18px 0 0!important;
  font-family:'Poppins','Raleway',sans-serif!important; font-weight:700!important; font-size:16px!important;
  padding:16px 20px!important;
}
.panel-info.gamecard>.panel-heading i,
.panel-info.gamecard>.panel-heading .glyphicon{ color:#fff!important; opacity:.9; }

/* Games section cards (panel-primary) — soft premium shadow */
.panel-primary.gamecard{ border:none!important; box-shadow:0 16px 40px rgba(124,20,120,.12)!important; }
.panel-primary.gamecard>.panel-heading{
  font-family:'Poppins','Raleway',sans-serif!important; font-weight:800!important;
  padding:16px 22px!important;
}

/* Membership (green) card heading polish */
.panel-success.gamecard>.panel-heading{
  border-radius:18px 18px 0 0!important; font-family:'Poppins','Raleway',sans-serif!important;
  font-weight:700!important; padding:16px 20px!important;
}

/* User profile cards: gradient heading (cohesive) */
.user-profile-card .panel-heading{
  background:linear-gradient(135deg,#7c1b8c 0%,#c0208f 100%)!important; border:none!important;
}
.user-profile-card .panel-heading, .user-profile-card .panel-heading a, .user-profile-card .panel-heading *{ color:#fff!important; }

/* =========================================================================
   Animated "New game" button — 2026-10-25
   ========================================================================= */
a[href*="a=AddGame"].btn{
  background:linear-gradient(135deg,#5bbf2e 0%,#3fa21f 100%)!important; border:none!important;
  border-radius:50px!important; font-weight:700!important; color:#fff!important;
  box-shadow:0 8px 22px rgba(79,162,31,.40)!important; position:relative; overflow:hidden;
  animation:ng-pulse 2.6s ease-in-out infinite;
  transition:transform .18s ease, box-shadow .25s ease, filter .2s ease!important;
}
a[href*="a=AddGame"].btn:hover{ transform:translateY(-3px) scale(1.02); filter:brightness(1.07);
  box-shadow:0 14px 34px rgba(79,162,31,.55)!important; }
a[href*="a=AddGame"].btn:active{ transform:translateY(-1px) scale(.99); }
a[href*="a=AddGame"].btn:before{
  content:""; position:absolute; top:0; left:-130%; width:55%; height:100%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,.5), transparent);
  transform:skewX(-20deg); animation:ng-shine 3.4s ease-in-out infinite; pointer-events:none;
}
a[href*="a=AddGame"].btn .fa-plus{ display:inline-block; transition:transform .4s cubic-bezier(.2,.8,.2,1); }
a[href*="a=AddGame"].btn:hover .fa-plus{ transform:rotate(90deg) scale(1.25); }
@keyframes ng-pulse{ 0%,100%{ box-shadow:0 8px 22px rgba(79,162,31,.40); } 50%{ box-shadow:0 10px 30px rgba(79,162,31,.62); } }
@keyframes ng-shine{ 0%{ left:-130%; } 55%,100%{ left:150%; } }
@media (prefers-reduced-motion: reduce){
  a[href*="a=AddGame"].btn{ animation:none!important; }
  a[href*="a=AddGame"].btn:before{ animation:none!important; display:none; }
}

/* =========================================================================
   User cards — gradient heading color-coded by gender — 2026-10-25
   ========================================================================= */
.user-profile-card.user-gender-MAN .panel-heading{ background:linear-gradient(135deg,#1668b0 0%,#37b0e2 100%)!important; }
.user-profile-card.user-gender-WOMAN .panel-heading{ background:linear-gradient(135deg,#c0208f 0%,#ff6ea8 100%)!important; }
.user-profile-card.user-gender-COUPLE .panel-heading{ background:linear-gradient(135deg,#7b1b8d 0%,#d6249f 100%)!important; }

/* New game button — taller */
a[href*="a=AddGame"].btn{ padding:20px 30px!important; font-size:19px!important; line-height:1.1!important; }
a[href*="a=AddGame"].btn .fa-plus{ font-size:20px; }

/* ===== ADD GAME PAGE (add_game) — gender picker, add-player, modernization ===== */
.add-game-page .panel.gamecard{ border-radius:16px!important; overflow:hidden; }
.add-game-page .add-player-well{
  background:linear-gradient(135deg,#ffffff 0%,#fdf2fb 100%)!important;
  border:1px solid #f0d9ef!important; border-radius:18px!important;
  box-shadow:0 6px 20px rgba(156,2,167,.07)!important; padding:24px 20px!important;
}
.add-game-page #PlayerName{ border-radius:50px!important; min-width:210px; border:2px solid #ececec!important; }
.add-game-page #PlayerName:focus{ border-color:var(--brand-2)!important; box-shadow:0 0 0 3px rgba(214,36,159,.15)!important; }

/* Gender toggle — distinct colours so the selected one is obvious */
.add-game-page .gender-picker{ display:inline-flex; gap:10px; background:none!important; box-shadow:none!important; }
.add-game-page .gender-picker .gender-opt{
  position:relative; float:none; margin:0!important; min-width:122px;
  padding:12px 22px!important; border-radius:50px!important; font-weight:700; font-size:16px;
  background:#fff!important; color:#9a9a9a!important; border:2px solid #e2e2e2!important;
  box-shadow:none!important; transition:all .18s ease;
}
.add-game-page .gender-picker .gender-opt i{ font-size:18px; }
.add-game-page .gender-picker .gender-opt:hover{ transform:translateY(-2px); border-color:#cfcfcf!important; }
.add-game-page .gender-picker .gender-woman.active,
.add-game-page .gender-picker .gender-woman.active:hover{
  background:linear-gradient(135deg,#c0208f 0%,#ff6ea8 100%)!important; color:#fff!important;
  border-color:transparent!important; box-shadow:0 8px 20px rgba(192,32,143,.40)!important;
  transform:translateY(-2px) scale(1.05); }
.add-game-page .gender-picker .gender-man.active,
.add-game-page .gender-picker .gender-man.active:hover{
  background:linear-gradient(135deg,#1668b0 0%,#37b0e2 100%)!important; color:#fff!important;
  border-color:transparent!important; box-shadow:0 8px 20px rgba(22,104,176,.40)!important;
  transform:translateY(-2px) scale(1.05); }
.add-game-page .gender-picker .gender-opt.active::after{
  content:"\2713"; position:absolute; top:-8px; right:-8px;
  width:23px; height:23px; line-height:23px; text-align:center; border-radius:50%;
  background:#fff; color:#27ae60; font-size:13px; font-weight:900;
  box-shadow:0 2px 6px rgba(0,0,0,.25); }

/* Add player button — green & animated */
.add-game-page .btn-add-player{
  position:relative; overflow:hidden; border:none!important; border-radius:50px!important;
  background:linear-gradient(135deg,#5bbf2e 0%,#3fa21f 100%)!important; color:#fff!important;
  font-weight:800; letter-spacing:.3px; padding:14px 34px!important;
  box-shadow:0 8px 22px rgba(79,162,31,.40); animation:ng-pulse 2s ease-in-out infinite; }
.add-game-page .btn-add-player:hover,.add-game-page .btn-add-player:focus{ color:#fff!important; transform:translateY(-2px); }
.add-game-page .btn-add-player::after{
  content:""; position:absolute; top:0; left:-130%; width:60%; height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-20deg); animation:ng-shine 3.2s ease-in-out infinite; }

/* Start game CTA */
.add-game-page #button_start{
  background:linear-gradient(135deg,var(--brand) 0%,var(--brand-2) 100%)!important;
  border:none!important; border-radius:50px!important; color:#fff!important;
  box-shadow:0 10px 26px rgba(156,2,167,.35); padding:16px!important; transition:all .18s ease; }
.add-game-page #button_start:hover{ transform:translateY(-2px); color:#fff!important; }

@media(max-width:767px){
  .add-game-page .add-player-well .form-group{ display:block!important; margin:9px 0!important; }
  .add-game-page #PlayerName{ width:100%; min-width:0; }
  .add-game-page .gender-picker{ display:flex; width:100%; }
  .add-game-page .gender-picker .gender-opt{ flex:1; min-width:0; }
  .add-game-page .btn-add-player{ width:100%; }
}

/* ===== PLAY CARD (page_play_new) — compact + visible "my task" + modern hot tip ===== */
.play-card .panel-heading{ padding:9px 15px!important; font-size:15px; }
.play-card .panel-body{ padding:12px 15px!important; }
.play-card .panel-body img.img-thumbnail{ margin-bottom:6px!important; padding:3px; border-radius:12px; }
.play-card .panel-footer{ padding:8px 15px!important; }

/* "my task" badge — readable on the magenta header */
.play-card .panel-heading .mytask-badge{
  display:inline-flex; align-items:center; gap:5px; margin-top:-1px;
  background:rgba(255,255,255,.22); color:#fff!important; font-weight:700; font-size:12px;
  padding:3px 12px; border-radius:50px; text-decoration:none!important;
  border:1px solid rgba(255,255,255,.5); transition:all .15s ease; }
.play-card .panel-heading .mytask-badge:hover,
.play-card .panel-heading .mytask-badge:focus{ background:rgba(255,255,255,.38); color:#fff!important; }
.play-card .panel-heading .mytask-badge i{ font-size:13px; }

/* Hot tip — modern animated pill */
.hot-tip{
  display:inline-flex; align-items:center; gap:8px; cursor:help; user-select:none;
  padding:8px 18px; border-radius:50px; font-weight:800; font-size:14px; letter-spacing:.2px;
  color:#fff; background:linear-gradient(135deg,#ff8a00 0%,#ff5e3a 100%);
  box-shadow:0 6px 16px rgba(255,94,58,.35); border:none;
  animation:hot-pulse 2.4s ease-in-out infinite; transition:transform .15s ease; }
.hot-tip:hover{ transform:translateY(-2px); }
.hot-tip .hot-tip-ico .glyphicon{ font-size:16px; animation:hot-flicker 1.2s ease-in-out infinite; transform-origin:center bottom; }
@keyframes hot-pulse{ 0%,100%{ box-shadow:0 6px 16px rgba(255,94,58,.35);} 50%{ box-shadow:0 9px 24px rgba(255,94,58,.62);} }
@keyframes hot-flicker{ 0%,100%{ transform:scale(1) rotate(-3deg);} 50%{ transform:scale(1.18) rotate(3deg);} }

/* Modern tooltips (incl. hot-tip content) */
.tooltip.in{ opacity:1!important; }
.tooltip-inner{
  max-width:290px; padding:11px 14px; font-size:13.5px; line-height:1.5; text-align:left;
  color:#fff!important; background:linear-gradient(135deg,#2b2b3a 0%,#44314e 100%)!important;
  border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.08); }
.tooltip.top .tooltip-arrow,.tooltip.top-left .tooltip-arrow,.tooltip.top-right .tooltip-arrow{ border-top-color:#3a2c44!important; }
.tooltip.bottom .tooltip-arrow,.tooltip.bottom-left .tooltip-arrow,.tooltip.bottom-right .tooltip-arrow{ border-bottom-color:#2b2b3a!important; }
.tooltip.left .tooltip-arrow{ border-left-color:#3a2c44!important; }
.tooltip.right .tooltip-arrow{ border-right-color:#44314e!important; }

@media(max-width:767px){
  .play-card .panel-body img.img-thumbnail{ margin-bottom:8px!important; }
  .hot-tip{ width:100%; justify-content:center; }
}

/* =========================================================================
   HOMEPAGE REDESIGN — hero + new logo mark + section polish — 2026-10-24
   ========================================================================= */
.hx-hero .hx-hero-inner{ padding-top:6px; }
.hx-logo-mark{
  width:94px; height:94px; margin:0 auto 20px;
  filter:drop-shadow(0 14px 32px rgba(0,0,0,.5));
  animation:hpFade .7s cubic-bezier(.2,.7,.2,1) both; }
.hx-logo-mark svg{ display:block; width:100%; height:100%; }
.hx-title{ margin-top:0; }
.hx-sub{ margin-top:14px; }

.hx-cta{ display:flex; gap:14px; justify-content:center; align-items:center; flex-wrap:wrap; margin-top:26px; }
.hx-cta .intro-button{ animation:hpFade 1.3s cubic-bezier(.2,.7,.2,1) both; }
.hx-btn-ghost{
  border-radius:50px!important; padding:15px 32px!important; font-weight:600!important; font-size:18px!important;
  color:#fff!important; background:rgba(255,255,255,.12)!important;
  border:2px solid rgba(255,255,255,.55)!important; -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  transition:all .18s ease; animation:hpFade 1.5s cubic-bezier(.2,.7,.2,1) both; }
.hx-btn-ghost:hover,.hx-btn-ghost:focus{ background:rgba(255,255,255,.24)!important; color:#fff!important; transform:translateY(-2px); }

.hx-stats{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:38px;
  animation:hpFade 1.7s cubic-bezier(.2,.7,.2,1) both; }
.hx-stat{ min-width:124px; padding:15px 20px; border-radius:16px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2);
  -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); transition:transform .2s ease, background .2s ease; }
.hx-stat:hover{ transform:translateY(-4px); background:rgba(255,255,255,.17); }
.hx-stat-num{ display:block; font-family:'Poppins','Raleway',sans-serif; font-weight:800; font-size:27px; color:#fff; line-height:1; text-shadow:0 2px 12px rgba(0,0,0,.35); }
.hx-stat-lbl{ display:block; margin-top:7px; font-size:12px; letter-spacing:.6px; text-transform:uppercase; color:rgba(255,255,255,.82); font-weight:600; }

/* section polish */
.content-section-a .hp_list{ list-style:none; padding:0; margin:0; }
.content-section-a .hp_list li{
  background:#fff; border:1px solid #f0e7f3; border-radius:14px; padding:14px 18px; margin-bottom:12px;
  font-size:17px; color:#4a4453; box-shadow:0 8px 22px rgba(156,2,167,.06);
  display:flex; align-items:center; transition:transform .18s ease, box-shadow .18s ease; }
.content-section-a .hp_list li:hover{ transform:translateX(4px); box-shadow:0 12px 28px rgba(156,2,167,.12); }
.content-section-a .hp_list li .glyphicon{
  width:40px; height:40px; line-height:40px; text-align:center; border-radius:50%; flex:0 0 40px;
  background:linear-gradient(135deg,#9c02a7,#d6249f); color:#fff!important; font-size:17px; margin-right:14px; }
.content-section-a .hp_list li strong{ color:#9c02a7; font-weight:800; }

/* navbar logo mark — rounded + a little breathing room */
.navbar-inverse.navbar-fixed-top .navbar-brand img{ border-radius:10px; margin-right:9px; }

@media(max-width:767px){
  .hx-logo-mark{ width:74px; height:74px; margin-bottom:14px; }
  .hx-cta{ margin-top:20px; gap:10px; }
  .hx-cta .btn{ width:100%; }
  .hx-stats{ gap:8px; margin-top:26px; }
  .hx-stat{ min-width:0; flex:1 1 42%; padding:12px 10px; }
  .hx-stat-num{ font-size:22px; }
  .hx-stat-lbl{ font-size:10.5px; }
}

/* Hero highlighted word — brighter & glowing (was too dark on dark bg) — 2026-10-24 */
.homepage-h1 strong, .hx-title strong{
  background:linear-gradient(135deg,#ff9ede 0%, #ff5cc0 52%, #ffb6ea 100%)!important;
  -webkit-background-clip:text!important; background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
  filter:drop-shadow(0 3px 16px rgba(255,92,192,.55));
}
/* logo mark now tile-less gradient heart — keep soft shadow */
.hx-logo-mark{ filter:drop-shadow(0 12px 26px rgba(214,36,159,.45)); }
.navbar-inverse.navbar-fixed-top .navbar-brand img{ border-radius:0!important; }

/* =========================================================================
   NEW HOMEPAGE (nh-) — full rebuild of every section — 2026-10-24
   ========================================================================= */
.nh-section{ position:relative; padding:88px 0; }
.nh-h2{ font-family:'Poppins','Raleway',sans-serif!important; font-weight:800!important; font-size:40px; letter-spacing:-1px; line-height:1.12; margin:0 0 14px; color:#2a1f33; }
.nh-head{ text-align:center; margin-bottom:46px; }
.nh-head .nh-h2{ background:linear-gradient(135deg,#9c02a7,#d6249f); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.nh-sub{ font-size:18px; line-height:1.6; color:#6b6275; max-width:660px; margin:0 auto; }
.nh-eyebrow{ display:inline-flex; align-items:center; gap:7px; padding:6px 14px; margin-bottom:16px; border-radius:50px;
  background:rgba(156,2,167,.09); color:#9c02a7; font-weight:700; font-size:12.5px; letter-spacing:.6px; text-transform:uppercase; }
.nh-lead{ font-size:18px; line-height:1.75; color:#4d4557; }
.nh-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
.nh-btn{ border-radius:50px!important; padding:14px 30px!important; font-weight:700!important; border:none!important;
  background-image:var(--brand-grad)!important; box-shadow:0 10px 26px rgba(156,2,167,.35); }
.nh-btn:hover{ transform:translateY(-2px); }
.nh-btn-soft{ border-radius:50px!important; padding:14px 28px!important; font-weight:700!important;
  background:#fff!important; color:#9c02a7!important; border:2px solid #ead6ef!important; }
.nh-btn-soft:hover{ border-color:#d6249f!important; color:#d6249f!important; }
.nh-grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }

/* 1 — what is */
.nh-intro-grid{ display:grid; grid-template-columns:1.15fr 1fr; gap:56px; align-items:center; }
.nh-inside{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.nh-inside-card{ display:flex; flex-direction:column; gap:14px; padding:24px 20px; border-radius:20px; background:#fff;
  border:1px solid #f1e6f4; box-shadow:0 14px 36px rgba(156,2,167,.10); color:#2a1f33!important; font-weight:700; font-size:16px;
  line-height:1.35; text-decoration:none!important; transition:transform .2s ease, box-shadow .2s ease; }
.nh-inside-card:hover{ transform:translateY(-5px); box-shadow:0 20px 44px rgba(156,2,167,.18); }
.nh-inside-ico{ width:48px; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  background:var(--brand-grad); color:#fff; font-size:20px; }
.nh-inside-card:nth-child(2) .nh-inside-ico{ background:linear-gradient(135deg,#ff8a00,#ff5e3a); }
.nh-inside-card:nth-child(3) .nh-inside-ico{ background:linear-gradient(135deg,#1668b0,#37b0e2); }
.nh-inside-card:nth-child(4) .nh-inside-ico{ background:linear-gradient(135deg,#3fa21f,#5bbf2e); }

/* 2 — tools (dark band over collage) */
.nh-dark{ background-color:#1d1424; background-size:cover; background-position:center; color:#fff; }
.nh-dark:before{ content:""; position:absolute; inset:0; background:linear-gradient(160deg,rgba(29,12,38,.94) 0%,rgba(84,10,94,.87) 100%); }
.nh-dark>.container{ position:relative; z-index:1; }
.nh-dark .nh-head .nh-h2{ background:none; -webkit-text-fill-color:#fff; color:#fff; }
.nh-dark .nh-sub{ color:rgba(255,255,255,.8); }
.nh-tool{ display:block; overflow:hidden; border-radius:22px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14);
  color:#fff!important; text-decoration:none!important; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  transition:transform .25s ease, background .25s ease; }
.nh-tool:hover{ transform:translateY(-8px); background:rgba(255,255,255,.12); }
.nh-tool-img{ overflow:hidden; aspect-ratio:4/3; }
.nh-tool-img img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.nh-tool:hover .nh-tool-img img{ transform:scale(1.07); }
.nh-tool-body{ padding:20px 22px 24px; }
.nh-tool-body h3{ margin:0 0 8px; font-size:20px; font-weight:800; color:#fff; }
.nh-tool-body p{ margin:0; font-size:15px; line-height:1.55; color:rgba(255,255,255,.78); }

/* 3 — packages (magazine cards) */
.nh-pack{ position:relative; display:block; overflow:hidden; aspect-ratio:3/4; border-radius:24px;
  box-shadow:0 20px 44px rgba(60,10,70,.22); text-decoration:none!important; }
.nh-pack img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.nh-pack:hover img{ transform:scale(1.08); }
.nh-pack-badge{ position:absolute; top:16px; left:16px; z-index:2; padding:6px 13px; border-radius:50px; background:var(--brand-grad);
  color:#fff; font-size:12px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; box-shadow:0 6px 16px rgba(156,2,167,.4); }
.nh-pack-overlay{ position:absolute; left:0; right:0; bottom:0; z-index:1; padding:70px 22px 22px; color:#fff;
  background:linear-gradient(to top,rgba(20,6,26,.93) 0%,rgba(20,6,26,.55) 55%,transparent 100%); }
.nh-pack-overlay h3{ margin:0 0 6px; font-size:22px; font-weight:800; color:#fff; }
.nh-pack-overlay p{ margin:0; font-size:14.5px; line-height:1.5; color:rgba(255,255,255,.86); }

/* 4 — community (light, round photos) */
.nh-community{ background:linear-gradient(180deg,#fbf3fd 0%,#f4e7f8 100%); }
.nh-comm{ display:block; text-align:center; padding:34px 26px 30px; border-radius:24px; background:#fff; color:#2a1f33!important;
  box-shadow:0 16px 40px rgba(156,2,167,.10); text-decoration:none!important; transition:transform .25s ease, box-shadow .25s ease; }
.nh-comm:hover{ transform:translateY(-6px); box-shadow:0 24px 50px rgba(156,2,167,.18); }
.nh-comm-img{ width:150px; height:150px; margin:0 auto 20px; padding:5px; border-radius:50%; overflow:hidden; background:var(--brand-grad); }
.nh-comm-img img{ display:block; width:100%; height:100%; object-fit:cover; border-radius:50%; border:4px solid #fff; }
.nh-comm h3{ margin:0 0 8px; font-size:21px; font-weight:800; color:#2a1f33; }
.nh-comm p{ margin:0; font-size:15px; line-height:1.6; color:#6b6275; }

/* 5 — task designer */
.nh-split{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.nh-designer-img{ display:block; overflow:hidden; border-radius:24px; background:#fff; transform:rotate(-1.5deg);
  box-shadow:0 30px 60px rgba(60,10,70,.25); transition:transform .35s ease; }
.nh-designer-img:hover{ transform:rotate(0) scale(1.02); }
.nh-designer-img img{ display:block; width:100%; }
.nh-checks{ list-style:none; padding:0; margin:20px 0 28px; }
.nh-checks li{ display:flex; align-items:flex-start; gap:14px; margin-bottom:14px; font-size:17px; line-height:1.5; color:#4d4557; }
.nh-checks li i{ flex:0 0 28px; height:28px; margin-top:1px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--brand-grad); color:#fff; font-size:13px; }

/* 6 — testimonials */
.nh-testi{ background:#fff; }
.nh-quote{ margin:0; display:flex; flex-direction:column; padding:34px 28px 26px; border-radius:24px;
  background:linear-gradient(180deg,#fff 0%,#fcf4fd 100%); border:1px solid #f1e3f5; box-shadow:0 14px 36px rgba(156,2,167,.08); }
.nh-quote-ico{ margin-bottom:12px; font-size:34px; background:var(--brand-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.nh-quote blockquote{ flex:1; margin:0 0 20px; padding:0; border:none; font-size:16px; font-style:italic; line-height:1.7; color:#4d4557; }
.nh-quote figcaption{ display:flex; align-items:center; gap:10px; font-weight:800; color:#2a1f33; }
.nh-avatar{ width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--brand-grad); color:#fff; font-size:15px; }

/* 7 — in-game activities */
.nh-activities{ padding-top:24px; }
.nh-act-card{ display:grid; grid-template-columns:220px 1fr; gap:40px; align-items:center; padding:44px; border-radius:30px; color:#fff;
  background:linear-gradient(135deg,#2a0f35 0%,#6d0c78 60%,#b0168f 100%); box-shadow:0 30px 60px rgba(80,10,90,.3); }
.nh-act-hearts{ width:100%; border-radius:50%; box-shadow:0 0 0 8px rgba(255,255,255,.12); }
.nh-act-card .nh-h2{ color:#fff; font-size:34px; }
.nh-pills{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.nh-pill{ padding:9px 18px; border-radius:50px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22);
  color:#fff; font-weight:600; font-size:14.5px; transition:background .2s ease, transform .2s ease; }
.nh-pill:hover{ background:rgba(255,255,255,.24); transform:translateY(-2px); }

/* 8 — final CTA */
.nh-cta-band{ position:relative; overflow:hidden; padding:130px 0; text-align:center; color:#fff; background-size:cover; background-position:center; }
.nh-cta-band:before{ content:""; position:absolute; inset:0; background:linear-gradient(135deg,rgba(80,4,90,.88) 0%,rgba(214,36,159,.72) 100%); }
.nh-cta-band>.container{ position:relative; z-index:1; }
.nh-cta-title{ margin:0 0 14px; font-family:'Poppins',sans-serif!important; font-weight:800!important; font-size:46px; letter-spacing:-1px; color:#fff; }
.nh-cta-sub{ max-width:680px; margin:0 auto 30px; font-size:19px; line-height:1.6; color:rgba(255,255,255,.9); }
.nh-cta-band .intro-button{ background:#fff!important; background-image:none!important; color:#9c02a7!important; }
.nh-top{ position:absolute; right:24px; bottom:24px; z-index:2; width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.4); color:#fff!important; font-size:22px; text-decoration:none!important; }
.nh-top:hover{ background:rgba(255,255,255,.3); }

@media(min-width:992px){ .nh-dark,.nh-cta-band{ background-attachment:fixed; } }
@media(max-width:991px){
  .nh-intro-grid,.nh-split{ grid-template-columns:1fr; gap:36px; }
  .nh-grid3{ grid-template-columns:1fr 1fr; }
  .nh-act-card{ grid-template-columns:1fr; text-align:center; }
  .nh-act-hearts{ width:160px; margin:0 auto; }
  .nh-pills{ justify-content:center; }
}
@media(max-width:767px){
  .nh-section{ padding:56px 0; }
  .nh-h2{ font-size:29px; }
  .nh-head{ margin-bottom:30px; }
  .nh-sub,.nh-lead{ font-size:16px; }
  .nh-grid3{ grid-template-columns:1fr; gap:20px; }
  .nh-pack{ aspect-ratio:4/3; }
  .nh-inside{ gap:12px; }
  .nh-inside-card{ padding:18px 14px; font-size:14.5px; }
  .nh-actions .btn{ width:100%; }
  .nh-designer-img{ transform:none; }
  .nh-act-card{ padding:30px 22px; border-radius:24px; }
  .nh-act-card .nh-h2{ font-size:26px; }
  .nh-cta-band{ padding:80px 0; }
  .nh-cta-title{ font-size:31px; }
}

/* Hero highlighted word — flat brand gradient (same as buttons), no 3D shadow, keep soft glow — 2026-10-24 */
.homepage-h1 strong, .hx-title strong{
  background:linear-gradient(135deg,#9c02a7 0%,#d6249f 100%)!important;
  -webkit-background-clip:text!important; background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
  text-shadow:none!important;
  filter:drop-shadow(0 0 16px rgba(214,36,159,.6));
}

/* "What is" feature boxes — rich cards (photo band, number, icon, text, arrow) — 2026-10-24 */
.nh-intro-grid{ grid-template-columns:1fr 1.05fr; }
.nh-inside{ display:grid; grid-template-columns:1fr 1fr; gap:20px; padding-bottom:30px; }
.nh-feat{ --c1:#9c02a7; --c2:#d6249f;
  position:relative; display:flex; flex-direction:column; border-radius:22px; background:#fff;
  border:1px solid rgba(156,2,167,.08); box-shadow:0 16px 40px rgba(60,10,70,.10);
  color:#2a1f33!important; text-decoration:none!important;
  transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease; }
.nh-feat-packs{ --c1:#ff8a00; --c2:#ff3d6e; }
.nh-feat-comm{ --c1:#1668b0; --c2:#37b0e2; }
.nh-feat-design{ --c1:#2f9418; --c2:#6fd03a; }
.nh-feat:nth-child(even){ transform:translateY(30px); }
.nh-feat:hover{ transform:translateY(-6px); box-shadow:0 26px 56px rgba(60,10,70,.20); }
.nh-feat:nth-child(even):hover{ transform:translateY(24px); }
.nh-feat:before{ content:""; position:absolute; left:22px; right:22px; bottom:-1px; height:3px; border-radius:3px;
  background:linear-gradient(90deg,var(--c1),var(--c2)); opacity:0; transition:opacity .3s ease; }
.nh-feat:hover:before{ opacity:1; }
.nh-feat-media{ position:relative; display:block; height:118px; overflow:hidden; border-radius:22px 22px 0 0; }
.nh-feat-media img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.nh-feat-media:after{ content:""; position:absolute; inset:0; background:linear-gradient(135deg,var(--c1),var(--c2));
  opacity:.68; mix-blend-mode:multiply; transition:opacity .3s ease; }
.nh-feat:hover .nh-feat-media img{ transform:scale(1.08); }
.nh-feat:hover .nh-feat-media:after{ opacity:.5; }
.nh-feat-num{ position:absolute; top:12px; right:14px; z-index:1; padding:3px 10px; border-radius:50px;
  font-family:'Poppins',sans-serif; font-weight:800; font-size:12px; letter-spacing:1px; color:#fff;
  background:rgba(255,255,255,.2); border:1px solid rgba(255,255,255,.4); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.nh-feat-ico{ position:absolute; top:93px; left:18px; z-index:2; width:50px; height:50px; border-radius:15px;
  display:flex; align-items:center; justify-content:center; font-size:21px; color:#fff;
  background:linear-gradient(135deg,var(--c1),var(--c2)); box-shadow:0 10px 22px rgba(0,0,0,.18), 0 0 0 4px #fff;
  transition:transform .3s ease; }
.nh-feat:hover .nh-feat-ico{ transform:rotate(-8deg) scale(1.06); }
.nh-feat-body{ display:block; padding:38px 20px 56px; }
.nh-feat-title{ display:block; margin-bottom:7px; font-family:'Poppins',sans-serif; font-weight:800; font-size:14.5px;
  line-height:1.3; letter-spacing:.4px; text-transform:uppercase; color:#2a1f33; }
.nh-feat-sub{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  font-size:14px; line-height:1.5; color:#756c80; }
.nh-feat-go{ position:absolute; right:16px; bottom:16px; width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:13px; color:var(--c1); background:#f4eef7;
  transition:all .3s ease; }
.nh-feat:hover .nh-feat-go{ color:#fff; background:linear-gradient(135deg,var(--c1),var(--c2)); transform:translateX(4px); }
@media(max-width:991px){ .nh-intro-grid{ grid-template-columns:1fr; } }
@media(max-width:767px){
  .nh-inside{ gap:12px; padding-bottom:0; }
  .nh-feat:nth-child(even),.nh-feat:nth-child(even):hover{ transform:none; }
  .nh-feat:hover{ transform:none; }
  .nh-feat-media{ height:86px; border-radius:18px 18px 0 0; }
  .nh-feat{ border-radius:18px; }
  .nh-feat-ico{ top:64px; left:12px; width:42px; height:42px; border-radius:13px; font-size:17px; box-shadow:0 8px 18px rgba(0,0,0,.18), 0 0 0 3px #fff; }
  .nh-feat-body{ padding:30px 13px 48px; }
  .nh-feat-title{ font-size:12.5px; letter-spacing:.2px; }
  .nh-feat-sub{ font-size:12.5px; }
  .nh-feat-go{ right:12px; bottom:12px; width:30px; height:30px; }
}

/* =========================================================================
   PREVIEW / SHOWROOM (pv-) — level "heat" timeline — 2026-10-24
   ========================================================================= */
.pv-heat-1{ --h1:#e04bb3; --h2:#ff7ac0; }
.pv-heat-2{ --h1:#9c02a7; --h2:#d6249f; }
.pv-heat-3{ --h1:#e0115f; --h2:#ff7a1a; }

.pv-hero{ padding:56px 0 30px; text-align:center; }
.pv-title{ max-width:840px; margin:0 auto 30px; font-family:'Poppins',sans-serif!important; font-weight:800!important;
  font-size:44px; line-height:1.12; letter-spacing:-1px;
  background:linear-gradient(135deg,#9c02a7,#d6249f); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.pv-steps{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:10px; }
.pv-step{ display:flex; align-items:center; gap:10px; max-width:310px; padding:10px 18px 10px 10px; border-radius:50px; text-align:left;
  background:#fff; border:1px solid #f1e6f4; box-shadow:0 10px 26px rgba(156,2,167,.10);
  color:#2a1f33!important; font-weight:700; font-size:14px; text-decoration:none!important; transition:transform .2s ease, box-shadow .2s ease; }
.pv-step:hover{ transform:translateY(-3px); box-shadow:0 16px 34px rgba(156,2,167,.18); }
.pv-step-num{ flex:0 0 34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800; background:linear-gradient(135deg,var(--h1),var(--h2)); }
.pv-step-txt{ line-height:1.25; }
.pv-flames{ font-size:12px; white-space:nowrap; color:var(--h2); }
.pv-step-arrow{ font-size:20px; color:#c9b6d1; }

.pv-levels{ padding:34px 0 20px; }
.pv-levels .container{ position:relative; }
.pv-levels .container:before{ content:""; position:absolute; top:60px; bottom:60px; left:50%; width:3px; margin-left:-1.5px; border-radius:3px;
  background:linear-gradient(180deg,#ff7ac0 0%,#d6249f 50%,#ff7a1a 100%); opacity:.35; }
.pv-level{ position:relative; display:grid; grid-template-columns:1fr 84px 1fr; align-items:center; margin-bottom:72px; }
.pv-level-media{ grid-column:1; grid-row:1; }
.pv-level-axis{ grid-column:2; grid-row:1; display:flex; justify-content:center; }
.pv-level-card{ grid-column:3; grid-row:1; }
.pv-level-rev .pv-level-media{ grid-column:3; }
.pv-level-rev .pv-level-card{ grid-column:1; }
.pv-level-media img{ display:block; width:100%; border-radius:24px; box-shadow:0 26px 56px rgba(60,10,70,.25); transform:rotate(-1.5deg); transition:transform .4s ease; }
.pv-level-rev .pv-level-media img{ transform:rotate(1.5deg); }
.pv-level:hover .pv-level-media img{ transform:rotate(0) scale(1.02); }
.pv-level-badge{ position:relative; z-index:1; width:58px; height:58px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:'Poppins',sans-serif; font-weight:800; font-size:24px; color:#fff; background:linear-gradient(135deg,var(--h1),var(--h2));
  box-shadow:0 0 0 7px #f3e8f6, 0 12px 26px rgba(156,2,167,.35); }
.pv-level-card{ padding:30px 30px 26px; border-radius:24px; background:#fff; border:1px solid #f1e6f4; box-shadow:0 18px 44px rgba(60,10,70,.10); }
.pv-level-top{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:12px; }
.pv-level-label{ font-family:'Poppins',sans-serif; font-weight:800; font-size:13px; letter-spacing:1px; text-transform:uppercase;
  background:linear-gradient(135deg,var(--h1),var(--h2)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.pv-heatbar{ flex:0 0 120px; height:8px; border-radius:8px; overflow:hidden; background:#f3e8f6; }
.pv-heatbar span{ display:block; height:100%; border-radius:8px; background:linear-gradient(90deg,var(--h1),var(--h2)); }
.pv-level-h{ margin:0 0 16px; font-family:'Poppins',sans-serif!important; font-weight:800!important; font-size:26px; line-height:1.2; letter-spacing:-.4px; color:#2a1f33; }
.pv-checks{ list-style:none; margin:0; padding:0; }
.pv-checks li{ display:flex; align-items:flex-start; gap:12px; margin-bottom:12px; font-size:16px; line-height:1.55; color:#4d4557; }
.pv-checks li i{ flex:0 0 26px; height:26px; margin-top:1px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:11px; color:#fff; background:linear-gradient(135deg,var(--h1),var(--h2)); }
.pv-level-text{ font-size:16px; line-height:1.7; color:#4d4557; }

.pv-cta{ padding:10px 0 80px; }
.pv-cta-card{ position:relative; overflow:hidden; padding:56px 30px; border-radius:32px; text-align:center; color:#fff;
  background:linear-gradient(135deg,#2a0f35 0%,#6d0c78 55%,#d6249f 100%); box-shadow:0 30px 60px rgba(80,10,90,.3); }
.pv-cta-card:before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(420px 260px at 15% 0%, rgba(255,122,192,.35), transparent 60%), radial-gradient(380px 260px at 100% 100%, rgba(255,122,26,.25), transparent 60%); }
.pv-cta-card>*{ position:relative; }
.pv-cta-mark{ width:74px; height:74px; margin:0 auto 18px; filter:drop-shadow(0 10px 24px rgba(0,0,0,.35)); }
.pv-cta-mark svg{ display:block; width:100%; height:100%; }
.pv-cta-title{ margin:0 0 10px; font-family:'Poppins',sans-serif!important; font-weight:800!important; font-size:38px; letter-spacing:-1px; color:#fff; }
.pv-cta-sub{ max-width:600px; margin:0 auto 26px; font-size:18px; color:rgba(255,255,255,.88); }
.pv-cta-btn{ border:none!important; border-radius:50px!important; padding:16px 40px!important; font-weight:800!important; font-size:19px!important;
  background:#fff!important; color:#9c02a7!important; box-shadow:0 14px 34px rgba(0,0,0,.25); transition:transform .2s ease; }
.pv-cta-btn:hover,.pv-cta-btn:focus{ transform:translateY(-3px) scale(1.03); color:#d6249f!important; }

@media(max-width:991px){
  .pv-levels .container:before{ display:none; }
  .pv-level,.pv-level-rev{ grid-template-columns:1fr; margin-bottom:50px; }
  .pv-level-axis{ grid-column:1; grid-row:1; margin-bottom:-29px; z-index:2; }
  .pv-level-media,.pv-level-rev .pv-level-media{ grid-column:1; grid-row:2; }
  .pv-level-card,.pv-level-rev .pv-level-card{ grid-column:1; grid-row:3; position:relative; z-index:1; margin:-30px 14px 0; }
  .pv-level-media img,.pv-level-rev .pv-level-media img{ transform:none; }
}
@media(max-width:767px){
  .pv-hero{ padding:34px 0 18px; }
  .pv-title{ font-size:29px; }
  .pv-steps{ flex-direction:column; align-items:stretch; }
  .pv-step{ max-width:none; }
  .pv-step-arrow{ display:none; }
  .pv-flames{ margin-left:auto; }
  .pv-level-card,.pv-level-rev .pv-level-card{ padding:24px 20px 20px; margin:-26px 8px 0; }
  .pv-level-h{ font-size:21px; }
  .pv-heatbar{ flex-basis:80px; }
  .pv-cta-card{ padding:40px 20px; border-radius:24px; }
  .pv-cta-title{ font-size:27px; }
  .pv-cta-btn{ width:100%; }
}

/* =========================================================================
   AUTH + CONTACT (au- / ct-) — login, registration, lost password, contact — 2026-10-24
   ========================================================================= */
.au-hero{ padding:40px 0 24px; text-align:center; }
.au-hero .nh-eyebrow{ margin-bottom:14px; }
.au-title{ max-width:760px; margin:0 auto 6px; font-family:'Poppins',sans-serif!important; font-weight:800!important; font-size:40px;
  line-height:1.12; letter-spacing:-1px; background:linear-gradient(135deg,#9c02a7,#d6249f); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.au-switch{ display:inline-flex; gap:4px; padding:5px; border-radius:50px; background:#fff; border:1px solid #f1e6f4; box-shadow:0 10px 26px rgba(156,2,167,.12); }
.au-switch a{ padding:10px 22px; border-radius:50px; font-weight:700; font-size:14.5px; color:#6b6275!important; text-decoration:none!important; transition:all .2s ease; }
.au-switch a:hover{ color:#9c02a7!important; }
.au-switch a.active{ background:var(--brand-grad); color:#fff!important; box-shadow:0 6px 16px rgba(156,2,167,.35); }

.au-wrap{ padding-bottom:34px; }
.au-card{ display:grid; grid-template-columns:.9fr 1.1fr; overflow:hidden; border-radius:28px; background:#fff;
  border:1px solid #f1e6f4; box-shadow:0 26px 60px rgba(60,10,70,.14); }
.au-card-rev{ grid-template-columns:1.1fr .9fr; }
.au-card-rev .au-side{ order:2; }
.au-side{ position:relative; display:flex; align-items:flex-end; min-height:100%; padding:40px 36px; color:#fff;
  background-color:#3a1046; background-size:cover; background-position:center; }
.au-side:before{ content:""; position:absolute; inset:0; background:linear-gradient(165deg,rgba(42,15,53,.45) 0%,rgba(109,12,120,.78) 55%,rgba(214,36,159,.9) 100%); }
.au-side-collage:before{ background:linear-gradient(165deg,rgba(156,2,167,.78) 0%,rgba(109,12,120,.84) 50%,rgba(214,36,159,.9) 100%); }
.au-side-inner{ position:relative; }
.au-side-mark{ display:block; width:60px; height:60px; margin-bottom:18px; filter:drop-shadow(0 8px 20px rgba(0,0,0,.35)); }
.au-side-mark svg{ display:block; width:100%; height:100%; }
.au-side-title{ margin:0 0 8px; font-family:'Poppins',sans-serif!important; font-weight:800!important; font-size:30px; letter-spacing:-.5px; color:#fff!important; }
.au-side-sub{ max-width:340px; margin:0; font-size:16px; line-height:1.6; color:rgba(255,255,255,.9); }

.au-main{ padding:42px 46px 38px; }
.au-head{ display:flex; align-items:center; gap:14px; margin-bottom:26px; }
.au-head-ico{ flex:0 0 48px; height:48px; border-radius:15px; display:flex; align-items:center; justify-content:center;
  font-size:20px; color:#fff; background:var(--brand-grad); box-shadow:0 10px 22px rgba(156,2,167,.3); }
.au-h2{ margin:0; font-family:'Poppins',sans-serif!important; font-weight:800!important; font-size:24px; line-height:1.2; letter-spacing:-.4px; color:#2a1f33; }

.au-form .form-group{ margin-bottom:16px; }
.au-row2{ display:grid; grid-template-columns:1fr 1fr; gap:0 14px; }
.au-label{ display:block; margin:0 0 7px; font-size:13px; font-weight:700; letter-spacing:.3px; color:#5a5164; }
.au-field{ position:relative; }
.au-field-ico{ position:absolute; left:17px; top:0; z-index:2; height:50px; line-height:50px; font-size:15px; color:#b49cc0; pointer-events:none; transition:color .2s ease; }
.au-form .form-control{ height:50px; padding:10px 42px 10px 46px; border-radius:14px!important; border:2px solid #ece4ef!important;
  background-color:#faf7fb!important; box-shadow:none!important; font-size:15.5px; color:#2a1f33;
  transition:border-color .2s ease, background-color .2s ease, box-shadow .2s ease; }
.au-form textarea.form-control{ height:auto; min-height:160px; padding:14px 16px; resize:vertical; }
.au-form select.form-control{ -webkit-appearance:none; -moz-appearance:none; appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%239c02a7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 18px center; }
.au-form .form-control:focus{ border-color:#d6249f!important; background-color:#fff!important; box-shadow:0 0 0 4px rgba(214,36,159,.12)!important; }
.au-field:focus-within .au-field-ico{ color:#d6249f; }
.au-form .has-warning .form-control{ border-color:#f0ad4e!important; background-color:#fffaf2!important; }
.au-form .has-success .form-control{ border-color:#5bbf2e!important; }
.au-form .has-warning .au-field-ico{ color:#f0ad4e; }
.au-form .has-success .au-field-ico{ color:#5bbf2e; }
.au-form .form-control-feedback{ top:0; right:8px; width:34px; height:50px; line-height:50px; }
.au-form .au-field-area .form-control-feedback{ top:6px; height:34px; line-height:34px; }
.au-form .help-block{ margin:6px 0 0 4px; font-size:13px; }

.au-captcha{ display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start; }
.au-captcha .captcha_image{ display:block; height:50px; border-radius:14px; border:2px solid #ece4ef; background:#fff; }
.au-checks{ margin:6px 0 10px; }
.au-check{ display:flex; align-items:flex-start; gap:12px; margin:0 0 12px; font-size:14.5px; font-weight:500; line-height:1.5; color:#4d4557; cursor:pointer; }
.au-check input{ flex:0 0 20px; width:20px; height:20px; margin:1px 0 0!important; accent-color:#c4148f; cursor:pointer; }
.au-check a{ color:#9c02a7!important; font-weight:700; }
.au-form .alert{ border-radius:14px; }

.au-submit{ display:block; width:100%; margin-top:8px; padding:15px 20px!important; border:none!important; border-radius:50px!important;
  background-image:var(--brand-grad)!important; color:#fff!important; font-weight:800!important; font-size:17px!important; letter-spacing:.3px;
  box-shadow:0 12px 28px rgba(156,2,167,.35); transition:transform .2s ease, box-shadow .2s ease; }
.au-submit:hover,.au-submit:focus{ transform:translateY(-2px); box-shadow:0 16px 34px rgba(214,36,159,.45); }
.au-links{ display:flex; justify-content:flex-end; margin:-4px 0 14px; font-size:14px; }
.au-links-center{ justify-content:center; margin:16px 0 0; }
.au-links a{ color:#9c02a7!important; font-weight:600; }
.au-or{ display:flex; align-items:center; gap:14px; margin:24px 0 18px; font-size:12.5px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:#a99bb3; }
.au-or:before,.au-or:after{ content:""; flex:1; height:1px; background:#ece4ef; }
.au-form .google-button{ display:flex!important; align-items:center; justify-content:center; gap:12px; width:100%; height:52px; margin:0 0 12px; padding:0 18px!important;
  border-radius:50px!important; border:2px solid #ece4ef!important; background:#fff!important; color:#2a1f33!important;
  font-weight:700; font-size:15px; text-decoration:none!important; box-shadow:none!important; transition:border-color .2s ease, box-shadow .2s ease; }
.au-form .google-button:hover{ border-color:#d6249f!important; box-shadow:0 8px 20px rgba(156,2,167,.12)!important; }
.au-form .google-button__icon{ position:static!important; display:inline-flex!important; width:auto!important; height:auto!important; margin:0!important; padding:0!important; background:none!important; border:none!important; }
.au-form .google-button__icon svg{ display:block; width:20px; height:20px; }
.au-form .google-button__text{ margin:0!important; padding:0!important; }

/* contact */
.ct-grid{ display:grid; grid-template-columns:1.6fr 1fr; gap:28px; align-items:start; }
.ct-card{ display:block; }
.ct-info{ overflow:hidden; border-radius:28px; background:#fff; border:1px solid #f1e6f4; box-shadow:0 26px 60px rgba(60,10,70,.14); }
.ct-info-top{ position:relative; padding:34px 30px 30px; color:#fff; background:linear-gradient(135deg,#2a0f35 0%,#6d0c78 55%,#d6249f 100%); }
.ct-info-eyebrow{ display:block; margin-bottom:4px; font-size:12px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:rgba(255,255,255,.75); }
.ct-info-list{ padding:16px 16px 20px; }
.ct-row{ display:flex; align-items:center; gap:14px; padding:14px; border-radius:16px; color:#2a1f33!important; text-decoration:none!important; transition:background .2s ease; }
a.ct-row:hover{ background:#faf3fc; }
.ct-row-ico{ flex:0 0 44px; height:44px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:17px; color:#fff; background:var(--brand-grad); }
.ct-ico-2{ background:linear-gradient(135deg,#ff8a00,#ff3d6e); }
.ct-ico-3{ background:linear-gradient(135deg,#1668b0,#37b0e2); }
.ct-row-txt{ display:flex; flex-direction:column; min-width:0; flex:1; }
.ct-row-txt small{ font-size:12px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:#a99bb3; }
.ct-row-txt strong{ font-size:15px; font-weight:700; line-height:1.4; overflow-wrap:anywhere; }
.ct-row-go{ color:#c9b6d1; font-size:20px; transition:transform .2s ease, color .2s ease; }
a.ct-row:hover .ct-row-go{ color:#d6249f; transform:translateX(3px); }

@media(max-width:991px){
  .au-card,.au-card-rev{ grid-template-columns:1fr; }
  .au-card-rev .au-side{ order:0; }
  .au-side{ min-height:190px; padding:28px; }
  .ct-grid{ grid-template-columns:1fr; }
}
@media(max-width:767px){
  .au-hero{ padding:26px 0 18px; }
  .au-title{ font-size:28px; }
  .au-switch{ display:flex; }
  .au-switch a{ flex:1; padding:10px 12px; font-size:13.5px; text-align:center; }
  .au-card,.ct-info{ border-radius:22px; }
  .au-side{ min-height:140px; padding:22px; }
  .au-side-mark{ width:44px; height:44px; margin-bottom:10px; }
  .au-side-title{ font-size:22px; }
  .au-side-sub{ font-size:14px; }
  .au-main{ padding:26px 20px 24px; }
  .au-head{ margin-bottom:20px; }
  .au-head-ico{ flex-basis:42px; height:42px; font-size:17px; }
  .au-h2{ font-size:20px; }
  .au-row2{ grid-template-columns:1fr; }
  .ct-info-top{ padding:26px 22px 22px; }
}
/* auth/contact fixes: beat global .form-control !important padding; eyebrow on its own line */
.au-form .form-control{ height:50px!important; padding:10px 42px 10px 46px!important; }
.au-form textarea.form-control{ height:auto!important; padding:14px 16px!important; }
.au-hero .nh-eyebrow{ display:table; margin:0 auto 14px; }

/* =========================================================================
   CHAT / MESSAGES (ch-) — conversations + thread — 2026-10-24
   ========================================================================= */
.ch-wrap{ padding-top:10px; padding-bottom:30px; }
.ch-app{ display:grid; grid-template-columns:340px 1fr; height:calc(100vh - 150px); min-height:540px; max-height:900px;
  overflow:hidden; border-radius:28px; background:#fff; border:1px solid #f1e6f4; box-shadow:0 26px 60px rgba(60,10,70,.14); }

/* sidebar */
.ch-side{ display:flex; flex-direction:column; min-height:0; border-right:1px solid #f1e8f4; background:linear-gradient(180deg,#fdf8fe 0%,#faf3fc 100%); }
.ch-side-head{ display:flex; align-items:center; justify-content:space-between; padding:22px 20px 14px; }
.ch-title{ margin:0; font-family:'Poppins',sans-serif!important; font-weight:800!important; font-size:23px; letter-spacing:-.4px; color:#2a1f33; }
.ch-title i{ background:var(--brand-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.ch-new{ width:42px; height:42px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:17px;
  color:#fff!important; background:var(--brand-grad); box-shadow:0 8px 20px rgba(156,2,167,.32); transition:transform .2s ease; text-decoration:none!important; }
.ch-new:hover{ transform:translateY(-2px) rotate(-6deg); }
.ch-search{ position:relative; margin:0 16px 12px; }
.ch-search i{ position:absolute; left:15px; top:0; height:42px; line-height:42px; color:#b49cc0; font-size:14px; pointer-events:none; }
.ch-search input{ width:100%; height:42px; padding:0 14px 0 40px; border-radius:50px; border:2px solid #ece4ef; background:#fff; font-size:14.5px; color:#2a1f33; outline:none; transition:border-color .2s ease, box-shadow .2s ease; }
.ch-search input:focus{ border-color:#d6249f; box-shadow:0 0 0 4px rgba(214,36,159,.12); }
.ch-list{ flex:1; min-height:0; overflow-y:auto; padding:4px 10px 14px; }
.ch-conv{ position:relative; display:flex; align-items:center; gap:12px; padding:11px 12px; margin-bottom:2px; border-radius:18px;
  color:#2a1f33!important; text-decoration:none!important; transition:background .15s ease; }
.ch-conv:hover{ background:rgba(156,2,167,.06); }
.ch-conv.active{ background:#fff; box-shadow:0 8px 22px rgba(156,2,167,.12); }
.ch-conv.active:before{ content:""; position:absolute; left:0; top:14px; bottom:14px; width:4px; border-radius:4px; background:var(--brand-grad); }
.ch-conv-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.ch-conv-top,.ch-conv-bottom{ display:flex; align-items:center; gap:8px; min-width:0; }
.ch-conv-name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:15px; font-weight:700; color:#2a1f33; }
.ch-conv-time{ flex:0 0 auto; font-size:12px; color:#a99bb3; }
.ch-conv-prev{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13.5px; color:#857a8f; }
.ch-conv.unread .ch-conv-name{ color:#1d1424; }
.ch-conv.unread .ch-conv-prev{ color:#2a1f33; font-weight:600; }
.ch-conv.unread .ch-conv-time{ color:#c4148f; font-weight:700; }
.ch-badge{ flex:0 0 auto; min-width:22px; height:22px; padding:0 7px; border-radius:11px; display:inline-flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:800; color:#fff; background:var(--brand-grad); box-shadow:0 4px 10px rgba(156,2,167,.3); }
.ch-list-empty{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:40px 18px; text-align:center; color:#857a8f; font-size:14px; }
.ch-list-empty strong{ color:#2a1f33; font-size:15px; }
.ch-list-empty-ico{ width:62px; height:62px; border-radius:20px; display:flex; align-items:center; justify-content:center; font-size:28px; color:#c4148f; background:rgba(214,36,159,.1); }

/* avatars with gender ring */
.ch-avatar{ position:relative; flex:0 0 48px; width:48px; height:48px; padding:2px; border-radius:50%; background:linear-gradient(135deg,#9c02a7,#d6249f); }
.ch-avatar img{ display:block; width:100%; height:100%; object-fit:cover; border-radius:50%; border:2px solid #fff; background:#f4eef7; }
.ch-g-MAN{ background:linear-gradient(135deg,#1668b0,#37b0e2); }
.ch-g-WOMAN{ background:linear-gradient(135deg,#c0208f,#ff6ea8); }
.ch-g-COUPLE{ background:linear-gradient(135deg,#7b1b8d,#d6249f); }
.ch-avatar-xl{ flex-basis:88px; width:88px; height:88px; padding:3px; }

/* main / thread */
.ch-main{ display:flex; flex-direction:column; min-width:0; min-height:0; background:#fff; }
.ch-head{ display:flex; align-items:center; gap:12px; padding:14px 20px; border-bottom:1px solid #f1e8f4; background:rgba(255,255,255,.92); }
.ch-back{ display:none; width:38px; height:38px; border-radius:50%; align-items:center; justify-content:center; font-size:24px; color:#9c02a7!important; text-decoration:none!important; }
.ch-head-user{ flex:1; min-width:0; display:flex; align-items:center; gap:12px; color:#2a1f33!important; text-decoration:none!important; }
.ch-head-user .ch-avatar{ flex-basis:44px; width:44px; height:44px; }
.ch-head-txt{ min-width:0; display:flex; flex-direction:column; }
.ch-head-txt strong{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:'Poppins',sans-serif; font-weight:800; font-size:17px; color:#2a1f33; }
.ch-head-txt small{ font-size:12.5px; font-weight:600; color:#9c02a7; }
.ch-head-ico{ width:44px; height:44px; border-radius:14px; display:flex; align-items:center; justify-content:center; color:#fff; background:var(--brand-grad); font-size:18px; }
.ch-head-btn{ width:40px; height:40px; border-radius:12px; border:none; display:flex; align-items:center; justify-content:center; font-size:17px;
  color:#a99bb3; background:transparent; transition:all .2s ease; }
.ch-head-btn:hover{ color:#e0115f; background:rgba(224,17,95,.08); }

.ch-thread{ flex:1; min-height:0; overflow-y:auto; padding:20px 22px 10px;
  background-color:#fbf7fc;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath d='M20 26c-3-3-8-1-8 3 0 4 8 9 8 9s8-5 8-9c0-4-5-6-8-3z' fill='%23d6249f' fill-opacity='.045'/%3E%3Cpath d='M60 66c-2-2-6-1-6 2 0 3 6 7 6 7s6-4 6-7c0-3-4-4-6-2z' fill='%239c02a7' fill-opacity='.04'/%3E%3C/svg%3E"); }
.ch-day{ display:flex; justify-content:center; margin:14px 0 10px; }
.ch-day span{ padding:5px 14px; border-radius:50px; font-size:12px; font-weight:700; letter-spacing:.3px; color:#857a8f; background:#fff; box-shadow:0 3px 10px rgba(60,10,70,.06); }
.ch-msg{ display:flex; margin:3px 0; }
.ch-out{ justify-content:flex-end; }
.ch-bubble{ position:relative; max-width:72%; padding:10px 14px 7px; border-radius:20px; font-size:15px; line-height:1.5; overflow-wrap:anywhere; box-shadow:0 4px 12px rgba(60,10,70,.06); }
.ch-in .ch-bubble{ color:#2a1f33; background:#fff; border:1px solid #f1e6f4; border-bottom-left-radius:6px; }
.ch-out .ch-bubble{ color:#fff; background:linear-gradient(135deg,#9c02a7 0%,#d6249f 100%); border-bottom-right-radius:6px; box-shadow:0 8px 18px rgba(156,2,167,.22); }
.ch-out + .ch-out .ch-bubble{ border-top-right-radius:8px; }
.ch-in + .ch-in .ch-bubble{ border-top-left-radius:8px; }
.ch-text a{ color:inherit!important; text-decoration:underline!important; }
.ch-meta{ display:flex; justify-content:flex-end; align-items:center; gap:4px; margin-top:2px; font-size:11px; opacity:.7; }
.ch-status{ display:inline-flex; font-size:10px; }
.ch-status .fa + .fa{ margin-left:-4px; }
.ch-status.ch-read{ opacity:1; color:#ffe1f5; }
.ch-appear{ animation:chIn .28s cubic-bezier(.2,.7,.2,1) both; }
@keyframes chIn{ from{ opacity:0; transform:translateY(8px) scale(.98); } to{ opacity:1; transform:none; } }
.ch-thread-empty{ display:flex; flex-direction:column; align-items:center; gap:8px; margin:40px auto; text-align:center; color:#857a8f; font-size:14.5px; }
.ch-thread-empty strong{ font-family:'Poppins',sans-serif; font-weight:800; font-size:19px; color:#2a1f33; }

/* composer */
.ch-composer{ display:flex; align-items:flex-end; gap:10px; padding:14px 18px 8px; border-top:1px solid #f1e8f4; background:#fff; }
.ch-composer textarea{ flex:1; min-height:48px; max-height:160px; padding:12px 18px; resize:none; border-radius:24px; border:2px solid #ece4ef;
  background:#faf7fb; font-size:15px; line-height:1.45; color:#2a1f33; outline:none; transition:border-color .2s ease, background-color .2s ease, box-shadow .2s ease; }
.ch-composer textarea:focus{ border-color:#d6249f; background:#fff; box-shadow:0 0 0 4px rgba(214,36,159,.12); }
.ch-send{ flex:0 0 48px; width:48px; height:48px; border:none; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:18px; color:#fff; background:var(--brand-grad); box-shadow:0 10px 22px rgba(156,2,167,.35); transition:transform .2s ease, opacity .2s ease; }
.ch-send:hover{ transform:translateY(-2px) rotate(-8deg); }
.ch-send.is-sending{ opacity:.6; transform:none; }
.ch-send.is-sending i{ animation:chPulse .8s ease-in-out infinite; }
@keyframes chPulse{ 50%{ transform:translateX(3px); opacity:.5; } }
.ch-hint{ padding:0 20px 12px 26px; font-size:11.5px; color:#b2a6bc; background:#fff; }
.ch-upsell{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px; margin:14px; padding:16px 18px; border-radius:18px; text-align:center;
  font-size:14.5px; font-weight:600; color:#5a5164; background:#fbf3fd; border:1px dashed #e6cdef; }
.ch-upsell .btn{ border-radius:50px!important; background-image:var(--brand-grad)!important; border:none!important; font-weight:700; }

/* new conversation + placeholder */
.ch-newpick{ flex:1; padding:34px 28px; background:#fbf7fc; }
.ch-search-big{ max-width:520px; margin:0 0 10px; }
.ch-search-big i{ height:52px; line-height:52px; font-size:16px; left:18px; }
.ch-search-big input{ height:52px; padding-left:46px; font-size:16px; box-shadow:0 10px 26px rgba(156,2,167,.08); }
.ch-muted{ margin:0; font-size:13.5px; color:#a99bb3; }
.ch-placeholder{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:40px; text-align:center; background:#fbf7fc; }
.ch-placeholder-mark{ width:96px; height:96px; margin-bottom:18px; filter:drop-shadow(0 14px 26px rgba(214,36,159,.35)); animation:chFloat 3.2s ease-in-out infinite; }
.ch-placeholder-mark svg{ display:block; width:100%; height:100%; }
@keyframes chFloat{ 50%{ transform:translateY(-8px); } }
.ch-placeholder h2{ margin:0 0 6px; font-family:'Poppins',sans-serif!important; font-weight:800!important; font-size:24px; color:#2a1f33; }
.ch-placeholder p{ margin:0 0 22px; color:#857a8f; font-size:15px; }
.ch-cta{ border-radius:50px!important; padding:13px 28px!important; border:none!important; background-image:var(--brand-grad)!important; font-weight:700!important; box-shadow:0 12px 26px rgba(156,2,167,.32); }
.ui-autocomplete.ch-ac{ padding:6px; border:none!important; border-radius:16px; box-shadow:0 18px 40px rgba(60,10,70,.18); z-index:1050!important; }
.ui-autocomplete.ch-ac .ui-menu-item a,.ui-autocomplete.ch-ac .ui-menu-item-wrapper{ padding:10px 14px!important; border-radius:12px; border:none!important; font-weight:600; }
.ui-autocomplete.ch-ac .ui-state-focus,.ui-autocomplete.ch-ac .ui-state-active{ background:rgba(214,36,159,.1)!important; color:#9c02a7!important; margin:0!important; }

/* mobile: one pane at a time */
@media(max-width:767px){
  .ch-wrap{ padding-left:0; padding-right:0; padding-bottom:0; padding-top:0; }
  .ch-app{ display:block; height:calc(100vh - 56px); height:calc(100dvh - 56px); min-height:0; max-height:none; border-radius:0; border:none; box-shadow:none; }
  .ch-side,.ch-main{ height:100%; }
  .ch-app .ch-main{ display:none; }
  .ch-app.ch-has-thread .ch-side{ display:none; }
  .ch-app.ch-has-thread .ch-main{ display:flex; }
  .ch-side{ border-right:none; }
  .ch-back{ display:flex; margin-left:-8px; }
  .ch-head{ padding:10px 12px; }
  .ch-thread{ padding:14px 12px 8px; }
  .ch-bubble{ max-width:84%; }
  .ch-composer{ padding:10px 10px calc(10px + env(safe-area-inset-bottom)); }
  .ch-newpick{ padding:24px 16px; }
}

/* Logo variant 3 — flame emblem + uppercase wordmark with tagline (navbar) — 2026-10-24 */
.navbar-inverse.navbar-fixed-top .navbar-brand img{ width:40px!important; height:40px!important; max-height:40px!important; margin-right:10px; border-radius:50%!important; }
.navbar-brand .lg-text{ display:inline-flex; flex-direction:column; justify-content:center; line-height:1; }
.navbar-brand .lg-name{ font-family:'Poppins',sans-serif; font-weight:800; font-size:17px; letter-spacing:2.6px; color:#fff; }
.navbar-brand .lg-tag{ margin-top:4px; font-family:'Poppins',sans-serif; font-weight:600; font-size:9px; letter-spacing:2.8px; color:#ff8fd6; }
.navbar-brand:hover .lg-name{ color:#ffe1f5; }
@media(max-width:767px){
  .navbar-inverse.navbar-fixed-top .navbar-brand img{ width:36px!important; height:36px!important; margin-right:8px; }
  .navbar-brand .lg-name{ font-size:15px; letter-spacing:2px; }
  .navbar-brand .lg-tag{ font-size:8px; letter-spacing:2.2px; }
}
/* two-colour wordmark: name white + accent pink, tagline softened */
.navbar-brand .lg-name .lg-accent{ color:#ff8fd6; }
.navbar-brand .lg-tag{ color:#c9a5d6; }
.navbar-brand:hover .lg-name .lg-accent{ color:#ffb3e6; }

/* countdown track inside #play_right must keep zero padding (bar was collapsed to 0 height) */
#play_right .progress.full-width{ padding:0!important; margin:14px 0 16px!important; }

/* Play page — results / like / comments action bar: equal, aligned, modern — 2026-10-25 */
.pl-actions{ display:flex!important; gap:10px; padding:14px!important; }
.pl-actions:before,.pl-actions:after{ display:none!important; }
.pl-actions .btn{ flex:1 1 0; min-width:0; height:60px; display:flex!important; align-items:center; justify-content:center; gap:10px;
  margin:0!important; padding:0 12px!important; border:none!important; border-radius:18px!important; font-size:21px!important; line-height:1!important;
  text-shadow:none!important; transition:transform .15s ease, box-shadow .2s ease, background-color .2s ease!important; }
.pl-actions .btn:hover,.pl-actions .btn:focus{ transform:translateY(-2px); outline:none; }
.pl-actions .btn .glyphicon,.pl-actions .btn i{ top:0; font-size:21px; line-height:1; }
.pl-actions .btn .badge{ min-width:30px; height:26px; padding:0 9px; border-radius:50px; display:inline-flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:800; line-height:1; top:0; }
.pl-actions #game_results_icon{ background-image:linear-gradient(135deg,#ffb300 0%,#ff7a1a 100%)!important; background-color:#ff9a0a!important; color:#fff!important;
  box-shadow:0 8px 18px rgba(255,122,26,.32)!important; }
.pl-actions #like_content.btn-default,.pl-actions #user_comments.btn-default{ background:#f6f2f9!important; color:#8a7f95!important; box-shadow:inset 0 0 0 1.5px #ece4ef!important; }
.pl-actions #like_content.btn-default .badge,.pl-actions #user_comments.btn-default .badge{ background:#fff!important; color:#8a7f95!important; box-shadow:0 1px 3px rgba(60,10,70,.08); }
.pl-actions #like_content.btn-default:hover,.pl-actions #user_comments.btn-default:hover{ color:#9c02a7!important; box-shadow:inset 0 0 0 1.5px #e3c6ee!important; }
.pl-actions #like_content.btn-primary,.pl-actions #user_comments.btn-primary{ background-image:var(--brand-grad)!important; background-color:#9c02a7!important; color:#fff!important;
  box-shadow:0 8px 18px rgba(156,2,167,.30)!important; }
.pl-actions #like_content.btn-primary .badge,.pl-actions #user_comments.btn-primary .badge{ background:rgba(255,255,255,.24)!important; color:#fff!important; }
@media(max-width:767px){ .pl-actions{ gap:8px; padding:12px!important; } .pl-actions .btn{ height:54px; font-size:19px!important; } }

/* smooth gradient on striped progress bars (stripe tile size was chopping the gradient into blocks) */
.progress .progress-bar{ background-size:100% 100%!important; }

/* =========================================================================
   Modals / dialogs (Bootstrap modals, incl. js/jquery.dialog.js: undress, level intro, help, results…) — 2026-10-26
   ========================================================================= */
.modal-backdrop{ background-color:#1a0a20!important; }
.modal-backdrop.in{ opacity:.62!important; }
.modal .modal-content{ overflow:hidden; border:none!important; border-radius:24px!important; box-shadow:0 30px 80px rgba(20,4,28,.45)!important; }
.modal .modal-header{ position:relative; padding:20px 66px 18px 26px!important; border:none!important; background:linear-gradient(135deg,#9c02a7 0%,#d6249f 100%)!important; color:#fff!important; }
.modal .modal-title{ margin:0; font-family:'Poppins',sans-serif!important; font-weight:800!important; font-size:21px!important; line-height:1.25; letter-spacing:-.3px; color:#fff!important; }
.modal .modal-header .close{ position:absolute; top:50%; right:18px; float:none; width:36px; height:36px; margin:-18px 0 0!important; padding:0!important;
  border-radius:50%; background:rgba(255,255,255,.18)!important; color:#fff!important; opacity:1!important; text-shadow:none!important;
  font-size:26px; font-weight:300; line-height:36px; text-align:center; transition:background .2s ease, transform .2s ease; }
.modal .modal-header .close:hover,.modal .modal-header .close:focus{ background:rgba(255,255,255,.32)!important; transform:rotate(90deg); outline:none; }
.modal .modal-body{ padding:24px 26px!important; font-size:16px; line-height:1.6; color:#3b3343; }
.modal .modal-body .img-responsive{ border-radius:16px; }
.modal .modal-body .alert{ margin-bottom:14px; padding:16px 18px; border:none!important; border-radius:16px!important; font-size:16px; line-height:1.6; box-shadow:none!important; }
.modal .modal-body .alert-success{ background:linear-gradient(135deg,#f3fbf5 0%,#e8f7ec 100%)!important; color:#24563a!important; box-shadow:inset 4px 0 0 #3fa21f!important; }
.modal .modal-body .alert-info{ background:#f6f1fb!important; color:#5a4b78!important; font-size:14.5px; }
.modal .modal-body .alert-info i{ color:#9c02a7; }
.modal .modal-footer{ padding:14px 22px 20px!important; border-top:1px solid #f1e8f4!important; background:#fff; }
.modal .modal-footer .btn{ padding:12px 30px!important; border:none!important; border-radius:50px!important; font-family:'Poppins',sans-serif; font-weight:700!important; font-size:16px!important;
  background-image:var(--brand-grad)!important; background-color:#9c02a7!important; color:#fff!important; text-shadow:none!important;
  box-shadow:0 10px 22px rgba(156,2,167,.32)!important; transition:transform .2s ease, box-shadow .2s ease; }
.modal .modal-footer .btn-success{ background-image:linear-gradient(135deg,#5bbf2e 0%,#3fa21f 100%)!important; background-color:#3fa21f!important; box-shadow:0 10px 22px rgba(63,162,31,.32)!important; }
.modal .modal-footer .btn-default{ background-image:none!important; background-color:#f4eef7!important; color:#5a5164!important; box-shadow:none!important; }
.modal .modal-footer .btn:hover{ transform:translateY(-2px); }
@media(min-width:768px){ .dialog.modal .modal-dialog{ width:720px; margin-top:80px; } }
@media(max-width:767px){
  .modal .modal-dialog{ margin:70px 12px 12px!important; }
  .modal .modal-content{ border-radius:20px!important; }
  .modal .modal-header{ padding:16px 58px 14px 18px!important; }
  .modal .modal-title{ font-size:18px!important; }
  .modal .modal-body{ padding:18px!important; }
  .modal .modal-footer{ display:flex; gap:8px; }
  .modal .modal-footer .btn{ flex:1; margin:0!important; }
}

/* =========================================================================
   MY PROFILE (pf-) — sidebar user card + nav, cards, settings, edit form — 2026-10-26
   ========================================================================= */
.pf-page{ padding-top:10px; padding-bottom:40px; }
.pf-layout{ display:grid; grid-template-columns:290px minmax(0,1fr); gap:28px; align-items:start; }
.pf-side{ position:sticky; top:76px; display:flex; flex-direction:column; gap:16px; }
.pf-user{ position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:center; text-align:center; padding:26px 20px 20px;
  border-radius:24px; background:#fff; border:1px solid #f1e6f4; box-shadow:0 18px 44px rgba(60,10,70,.10); }
.pf-user:before{ content:""; position:absolute; left:0; right:0; top:0; height:72px; background:linear-gradient(135deg,#9c02a7 0%,#d6249f 100%); }
.pf-user-avatar{ position:relative; display:block; width:100px; height:100px; padding:4px; margin-top:6px; border-radius:50%;
  background:linear-gradient(135deg,#9c02a7,#d6249f); box-shadow:0 12px 26px rgba(60,10,70,.22); }
.pf-user-avatar img{ display:block; width:100%; height:100%; object-fit:cover; border-radius:50%; border:3px solid #fff; background:#f4eef7; }
.pf-g-MAN{ background:linear-gradient(135deg,#1668b0,#37b0e2); }
.pf-g-WOMAN{ background:linear-gradient(135deg,#c0208f,#ff6ea8); }
.pf-g-COUPLE{ background:linear-gradient(135deg,#7b1b8d,#d6249f); }
.pf-user-txt{ display:flex; flex-direction:column; align-items:center; gap:8px; margin-top:12px; min-width:0; }
.pf-user-name{ font-family:'Poppins',sans-serif; font-weight:800; font-size:20px; line-height:1.2; color:#2a1f33; overflow-wrap:anywhere; }
.pf-badge{ display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:50px; font-size:12.5px; font-weight:800; letter-spacing:.3px; text-decoration:none!important; }
.pf-badge-vip{ color:#7a4a00; background:linear-gradient(135deg,#ffe08a,#ffb300); box-shadow:0 4px 12px rgba(255,179,0,.3); }
.pf-badge-get{ color:#9c02a7!important; background:rgba(156,2,167,.09); }
.pf-badge-get:hover{ background:rgba(156,2,167,.16); }
.pf-user-view{ display:inline-flex; align-items:center; gap:8px; margin-top:14px; font-size:13.5px; font-weight:700; color:#9c02a7!important; text-decoration:none!important; }
.pf-user-view:hover span{ text-decoration:underline; }

.pf-nav{ display:flex; flex-direction:column; gap:4px; padding:10px; border-radius:24px; background:#fff; border:1px solid #f1e6f4; box-shadow:0 18px 44px rgba(60,10,70,.10); }
.pf-nav-item{ display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:16px; font-weight:700; font-size:15px; color:#4d4557!important; text-decoration:none!important; transition:background .15s ease, color .15s ease; }
.pf-nav-item:hover{ background:#faf3fc; color:#9c02a7!important; }
.pf-nav-ico{ flex:0 0 38px; height:38px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:16px; color:#9c02a7; background:rgba(156,2,167,.08); transition:all .15s ease; }
.pf-nav-pay .pf-nav-ico{ color:#ff7a1a; background:rgba(255,122,26,.10); }
.pf-nav-photos .pf-nav-ico{ color:#1668b0; background:rgba(22,104,176,.10); }
.pf-nav-dating .pf-nav-ico{ color:#e0115f; background:rgba(224,17,95,.10); }
.pf-nav-settings .pf-nav-ico{ color:#5a5164; background:rgba(90,81,100,.10); }
.pf-nav-txt{ flex:1; min-width:0; }
.pf-nav-go{ color:#c9b6d1; transition:transform .15s ease, color .15s ease; }
.pf-nav-item:hover .pf-nav-go{ transform:translateX(3px); color:#d6249f; }
.pf-nav-item.active{ background:linear-gradient(135deg,#9c02a7 0%,#d6249f 100%); color:#fff!important; box-shadow:0 10px 22px rgba(156,2,167,.30); }
.pf-nav-item.active .pf-nav-ico{ background:rgba(255,255,255,.2); color:#fff; }
.pf-nav-item.active .pf-nav-go{ color:#fff; }

/* cards (new pf-card + existing panels inside the profile content) */
.pf-content{ min-width:0; }
.pf-card,.pf-content .panel.gamecard{ margin-bottom:22px; overflow:hidden; border-radius:24px!important; border:1px solid #f1e6f4!important; background:#fff; box-shadow:0 18px 44px rgba(60,10,70,.10)!important; }
.pf-card-head,.pf-content .panel.gamecard>.panel-heading{ display:flex; align-items:center; flex-wrap:wrap; gap:12px; padding:18px 22px!important; border:none!important; border-bottom:1px solid #f4edf6!important; border-radius:0!important;
  background:#fff!important; background-image:none!important; color:#2a1f33!important; font-family:'Poppins',sans-serif!important; font-weight:800!important; font-size:17px!important; }
.pf-content .panel.gamecard>.panel-heading>.fa:first-child{ width:36px; height:36px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; font-size:15px; color:#9c02a7; background:rgba(156,2,167,.09); }
.pf-content .panel.gamecard>.panel-heading .pull-left,.pf-content .panel.gamecard>.panel-heading .pull-right{ float:none!important; }
.pf-content .panel.gamecard>.panel-heading .pull-right{ margin-left:auto; }
.pf-content .panel.gamecard>.panel-heading .clearfix{ display:none; }
.pf-card-ico{ flex:0 0 40px; height:40px; border-radius:13px; display:flex; align-items:center; justify-content:center; font-size:17px; color:#fff; background:var(--brand-grad); box-shadow:0 8px 18px rgba(156,2,167,.25); }
.pf-ico-blue{ background:linear-gradient(135deg,#1668b0,#37b0e2); box-shadow:0 8px 18px rgba(22,104,176,.25); }
.pf-ico-orange{ background:linear-gradient(135deg,#ff8a00,#ff5e3a); box-shadow:0 8px 18px rgba(255,94,58,.25); }
.pf-ico-red{ background:linear-gradient(135deg,#e0115f,#ff6ea8); box-shadow:0 8px 18px rgba(224,17,95,.25); }
.pf-card-title{ flex:1; min-width:0; margin:0; font-family:'Poppins',sans-serif!important; font-weight:800!important; font-size:18px; line-height:1.25; color:#2a1f33; }
.pf-card-body,.pf-content .panel.gamecard>.panel-body{ padding:22px!important; }
.pf-actions{ display:flex; align-items:center; justify-content:flex-end; gap:12px; margin-top:8px; }
.pf-btn,.pf-content .panel .btn-primary,.pf-content .panel .btn-success{ border:none!important; border-radius:50px!important; font-weight:700!important; color:#fff!important; text-shadow:none!important; transition:transform .2s ease, box-shadow .2s ease; }
.pf-btn{ padding:13px 26px!important; font-size:15.5px!important; }
.pf-btn,.pf-content .panel .btn-primary{ background-image:var(--brand-grad)!important; background-color:#9c02a7!important; box-shadow:0 10px 22px rgba(156,2,167,.28)!important; }
.pf-content .panel .btn-success{ background-image:linear-gradient(135deg,#5bbf2e 0%,#3fa21f 100%)!important; background-color:#3fa21f!important; box-shadow:0 8px 18px rgba(63,162,31,.28)!important; }
.pf-btn:hover,.pf-content .panel .btn-primary:hover,.pf-content .panel .btn-success:hover{ transform:translateY(-2px); }
.pf-btn-danger{ background-image:linear-gradient(135deg,#e0115f,#ff4d6d)!important; background-color:#e0115f!important; box-shadow:0 10px 22px rgba(224,17,95,.28)!important; }
.pf-loader img,img.pf-loader{ width:24px; height:24px; }
.pf-alert{ margin:14px 0 0; border:none!important; border-radius:14px!important; }
.pf-inline{ display:flex; align-items:center; flex-wrap:wrap; gap:12px; }
.pf-inline-main{ flex:1; min-width:220px; }
.pf-select select,.pf-content .form-horizontal select.form-control{ height:50px!important; padding:0 42px 0 16px!important; border-radius:14px!important; border:2px solid #ece4ef!important;
  background-color:#faf7fb!important; box-shadow:none!important; font-size:15px; -webkit-appearance:none; -moz-appearance:none; appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%239c02a7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important; background-position:right 16px center!important; }

/* settings: notification toggles */
.pf-toggles{ padding-top:6px!important; padding-bottom:6px!important; }
.pf-toggle-row{ display:flex; align-items:center; gap:16px; margin:0; padding:14px 0; border-bottom:1px solid #f4edf6; font-weight:500; cursor:pointer; }
.pf-toggle-row:last-child{ border-bottom:none; }
.pf-toggle-txt{ flex:1; font-size:15px; line-height:1.5; color:#3b3343; }
.pf-switch{ position:relative; flex:0 0 52px; width:52px; height:30px; }
.pf-switch input{ position:absolute; inset:0; z-index:2; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
.pf-slider{ position:absolute; inset:0; border-radius:30px; background:#e3dbe8; transition:background .2s ease; }
.pf-slider:before{ content:""; position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.2); transition:transform .2s ease; }
.pf-switch input:checked + .pf-slider{ background:linear-gradient(135deg,#9c02a7,#d6249f); }
.pf-switch input:checked + .pf-slider:before{ transform:translateX(22px); }
.pf-switch input:focus-visible + .pf-slider{ box-shadow:0 0 0 4px rgba(214,36,159,.2); }
.pf-switch .checkbox_loader{ position:absolute; top:5px; left:16px; z-index:3; width:20px!important; height:20px!important; }
.pf-card-danger{ border-color:#ffd6e0!important; }
.pf-card-danger .pf-card-head{ background:#fff7f9!important; }

/* profile edit form (existing markup) */
.pf-content .form-horizontal .form-group{ display:flex; flex-wrap:wrap; align-items:center; margin:0; padding:12px 0; border-bottom:1px solid #f6f0f8; }
.pf-content .form-horizontal .form-group:last-child{ border-bottom:none; }
.pf-content .form-horizontal .form-group>[class*="col-"]:first-child{ font-size:14px; font-weight:700; color:#5a5164; }
.pf-content .form-horizontal .form-control{ height:46px!important; border-radius:12px!important; border:2px solid #ece4ef!important; background-color:#faf7fb!important; box-shadow:none!important; font-size:15px; }
.pf-content .form-horizontal textarea.form-control{ height:auto!important; min-height:130px; }
.pf-content .form-horizontal .form-control:focus{ border-color:#d6249f!important; background-color:#fff!important; box-shadow:0 0 0 4px rgba(214,36,159,.12)!important; }
.pf-content .profile_photo{ margin-bottom:14px; border-radius:20px; }
.pf-content .well.well-sm{ margin:0 0 14px; padding:10px 14px; border:none; border-radius:14px; background:#f8f3fa; box-shadow:none; font-weight:800; font-size:16px; color:#2a1f33; }
.pf-content .searching_for_box{ position:relative; float:none!important; display:inline-flex!important; align-items:center; gap:8px; width:auto!important; height:auto!important; margin:0 8px 8px 0!important;
  padding:10px 16px!important; border-radius:50px!important; border:2px solid #ece4ef!important; background:#fff!important; color:#5a5164!important; font-weight:700; cursor:pointer; transition:all .15s ease; }
.pf-content .searching_for_box input{ position:absolute; opacity:0; pointer-events:none; }
.pf-content .searching_for_box:hover{ border-color:#e3c6ee!important; }
.pf-content .searching_for_box.active{ border-color:transparent!important; color:#fff!important; background:var(--brand-grad)!important; box-shadow:0 8px 18px rgba(156,2,167,.25); }
.pf-content #sf_box_MAN.active{ background:linear-gradient(135deg,#1668b0,#37b0e2)!important; }
.pf-content #sf_box_WOMAN.active{ background:linear-gradient(135deg,#c0208f,#ff6ea8)!important; }
.pf-content .searching_for_box.active i,.pf-content .searching_for_box.active img{ filter:brightness(10); }
.pf-content .interest_checkbox{ display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:50px; border:2px solid #ece4ef; background:#fff; color:#5a5164; font-weight:600; font-size:14.5px; user-select:none; transition:all .15s ease; }
.pf-content .interest_checkbox:before{ content:"\f08a"; font-family:FontAwesome; font-size:15px; color:#c9b6d1; }
.pf-content .interest_checkbox:hover{ border-color:#e3c6ee; }
.pf-content .interest_checkbox.active{ border-color:transparent; color:#fff; background:var(--brand-grad); box-shadow:0 6px 14px rgba(156,2,167,.22); }
.pf-content .interest_checkbox.active:before{ content:"\f004"; color:#fff; }
.pf-content .interest_checkbox img{ display:none; }
.pf-content .interest_checkbox img[src*="loading"]{ display:inline-block; width:16px!important; height:16px!important; }
.pf-content .bordered-row{ margin:0 0 16px; padding:14px; border:1px solid #f1e8f4; border-radius:18px; }
.pf-content .pho_list_photos img{ border-radius:14px; }

@media(max-width:991px){
  .pf-layout{ grid-template-columns:minmax(0,1fr); gap:16px; } /* minmax: the scrolling tab row must not widen the page */
  .pf-side{ position:static; }
  .pf-user{ flex-direction:row; align-items:center; gap:14px; padding:14px 16px; text-align:left; }
  .pf-user:before{ display:none; }
  .pf-user-avatar{ flex:0 0 64px; width:64px; height:64px; margin:0; padding:3px; }
  .pf-user-txt{ flex:1; align-items:flex-start; gap:6px; margin:0; }
  .pf-user-name{ font-size:18px; }
  .pf-user-view{ flex:0 0 42px; width:42px; height:42px; margin:0; justify-content:center; border-radius:14px; background:rgba(156,2,167,.08); }
  .pf-user-view span{ display:none; }
  .pf-nav{ flex-direction:row; gap:8px; padding:8px; overflow-x:auto; border-radius:20px; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .pf-nav::-webkit-scrollbar{ display:none; }
  .pf-nav-item{ flex:0 0 auto; padding:8px 14px 8px 8px; }
  .pf-nav-ico{ flex-basis:32px; height:32px; font-size:14px; }
  .pf-nav-txt{ white-space:nowrap; font-size:14px; }
  .pf-nav-go{ display:none; }
}
@media(max-width:767px){
  .pf-card-head,.pf-content .panel.gamecard>.panel-heading{ padding:14px 16px!important; font-size:16px!important; }
  .pf-card-title{ font-size:16.5px; }
  .pf-card-body,.pf-content .panel.gamecard>.panel-body{ padding:16px!important; }
  .pf-actions{ flex-direction:column; align-items:stretch; }
  .pf-btn,.pf-inline .pf-btn{ width:100%; text-align:center; }
}

/* =========================================================================
   MEMBER PROFILE (ud-) — public profile page — 2026-10-26
   ========================================================================= */
.ud-page{ padding-top:10px; padding-bottom:40px; }
.ud-hero{ position:relative; overflow:hidden; margin-bottom:22px; border-radius:28px; background:#fff; border:1px solid #f1e6f4; box-shadow:0 26px 60px rgba(60,10,70,.14); }
.ud-cover{ position:relative; height:150px; background:linear-gradient(135deg,#2a0f35 0%,#6d0c78 55%,#d6249f 100%); }
.ud-cover:after{ content:""; position:absolute; inset:0; opacity:.6;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath d='M20 26c-3-3-8-1-8 3 0 4 8 9 8 9s8-5 8-9c0-4-5-6-8-3z' fill='%23fff' fill-opacity='.12'/%3E%3Cpath d='M60 62c-2-2-6-1-6 2 0 3 6 7 6 7s6-4 6-7c0-3-4-4-6-2z' fill='%23fff' fill-opacity='.09'/%3E%3C/svg%3E"); }
.ud-g-MAN .ud-cover{ background:linear-gradient(135deg,#0d2f57 0%,#1668b0 55%,#37b0e2 100%); }
.ud-g-WOMAN .ud-cover{ background:linear-gradient(135deg,#4a0c3a 0%,#c0208f 55%,#ff6ea8 100%); }
.ud-hero-body{ position:relative; display:flex; align-items:flex-end; flex-wrap:wrap; gap:22px; margin-top:-64px; padding:0 30px 26px; }
.ud-avatar{ flex:0 0 150px; width:150px; height:150px; padding:5px; border-radius:50%; background:linear-gradient(135deg,#9c02a7,#d6249f); box-shadow:0 16px 36px rgba(60,10,70,.25); }
.ud-g-MAN .ud-avatar{ background:linear-gradient(135deg,#1668b0,#37b0e2); }
.ud-g-WOMAN .ud-avatar{ background:linear-gradient(135deg,#c0208f,#ff6ea8); }
.ud-avatar img{ display:block; width:100%; height:100%; object-fit:cover; border-radius:50%; border:4px solid #fff; background:#f4eef7; }
.ud-id{ flex:1; min-width:220px; padding-bottom:6px; }
.ud-name{ margin:0 0 10px; font-family:'Poppins',sans-serif!important; font-weight:800!important; font-size:32px; line-height:1.15; letter-spacing:-.6px; color:#2a1f33; overflow-wrap:anywhere; }
.ud-meta{ display:flex; flex-wrap:wrap; gap:8px; }
.ud-chip{ display:inline-flex; align-items:center; gap:7px; padding:7px 13px; border-radius:50px; background:#f6f1f9; color:#5a5164; font-size:14px; font-weight:600; }
.ud-chip img{ height:14px; border-radius:2px; }
.ud-chip>i{ color:#9c02a7; }
.ud-actions{ display:flex; gap:10px; padding-bottom:8px; }
.ud-btn{ border:none!important; border-radius:50px!important; padding:13px 24px!important; font-weight:700!important; font-size:15px!important; transition:transform .2s ease; }
.ud-btn:hover{ transform:translateY(-2px); }
.ud-btn-primary{ background-image:var(--brand-grad)!important; background-color:#9c02a7!important; color:#fff!important; box-shadow:0 10px 22px rgba(156,2,167,.30)!important; }
.ud-btn-soft{ background:#f4eef7!important; color:#9c02a7!important; }
.ud-btn-sm{ margin-left:auto; padding:8px 16px!important; font-size:13.5px!important; }
.ud-stats{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-bottom:22px; }
.ud-stat{ min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding:18px; border-radius:20px; background:#fff; border:1px solid #f1e6f4; box-shadow:0 12px 30px rgba(60,10,70,.08); }
.ud-stat-ico{ width:36px; height:36px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:15px; color:#fff; background:var(--brand-grad); }
.ud-ico-blue{ background:linear-gradient(135deg,#1668b0,#37b0e2); }
.ud-ico-orange{ background:linear-gradient(135deg,#ff8a00,#ff5e3a); }
.ud-ico-green{ background:linear-gradient(135deg,#3fa21f,#5bbf2e); }
.ud-stat-val{ font-family:'Poppins',sans-serif; font-weight:800; font-size:17px; line-height:1.25; color:#2a1f33; overflow-wrap:anywhere; }
.ud-stat-lbl{ font-size:12.5px; font-weight:600; color:#857a8f; }
.ud-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 22px; align-items:start; }
.ud-grid>.ud-interests:first-child,.ud-grid .ud-photos{ grid-column:1 / -1; }
.ud-about-text{ margin:0; font-size:16px; line-height:1.75; color:#3b3343; white-space:pre-line; }
.ud-interest-list{ display:flex; flex-wrap:wrap; gap:8px; }
.ud-interest{ display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius:50px; background:#fbf3fd; border:1px solid #f1dcf5; color:#6d0c78; font-weight:600; font-size:14px; }
.ud-interest i{ color:#d6249f; font-size:12px; }
.ud-count{ display:inline-block; margin-left:6px; padding:2px 9px; border-radius:50px; background:#f4eef7; color:#9c02a7; font-size:13px; vertical-align:middle; }
.ud-photo-grid{ display:grid!important; grid-template-columns:repeat(3,1fr); gap:12px; }
.ud-photo{ display:block; aspect-ratio:1 / 1; overflow:hidden; border-radius:16px; }
.ud-photo img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.ud-photo:hover img{ transform:scale(1.06); }
@media(max-width:991px){ .ud-stats{ grid-template-columns:repeat(3,1fr); } .ud-grid{ grid-template-columns:1fr; } }
@media(max-width:767px){
  .ud-cover{ height:110px; }
  .ud-hero-body{ flex-direction:column; align-items:center; gap:12px; margin-top:-60px; padding:0 18px 22px; text-align:center; }
  .ud-avatar{ flex-basis:120px; width:120px; height:120px; }
  .ud-id{ min-width:0; padding:0; }
  .ud-name{ font-size:25px; }
  .ud-meta{ justify-content:center; }
  .ud-actions{ width:100%; }
  .ud-actions .ud-btn{ flex:1; }
  .ud-stats{ grid-template-columns:1fr 1fr; gap:10px; }
  .ud-stat{ padding:14px; }
  .ud-photo-grid{ grid-template-columns:repeat(2,1fr); }
}

/* profile edit: below 1200px the photo/stats column is too narrow next to the form — put photo + stats side by side above it */
@media(max-width:1199px){
  .pf-section-profile>.row>.col-lg-4,.pf-section-profile>.row>.col-lg-8{ float:none; width:100%; }
  .pf-section-profile>.row>.col-lg-4{ display:grid; grid-template-columns:1fr 1fr; gap:0 22px; align-items:start; }
}
@media(max-width:767px){ .pf-section-profile>.row>.col-lg-4{ grid-template-columns:1fr; } }

/* Hero stats — flat neutral icons + hover (lift, gradient icon pop, light sweep) — 2026-10-27 */
.hx-stat{ position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:center;
  transition:transform .25s cubic-bezier(.2,.7,.2,1), background .25s ease, border-color .25s ease, box-shadow .25s ease; }
.hx-stat-ico{ display:flex; align-items:center; justify-content:center; width:42px; height:42px; margin:0 auto 11px; border-radius:50%;
  font-size:17px; color:rgba(255,255,255,.78); background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.18);
  transition:background .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
.hx-stat:after{ content:""; position:absolute; top:0; left:-120%; width:60%; height:100%; pointer-events:none;
  background:linear-gradient(115deg,transparent,rgba(255,255,255,.14),transparent); transform:skewX(-18deg); }
.hx-stat:hover{ transform:translateY(-5px); border-color:rgba(255,255,255,.34); background:rgba(255,255,255,.15);
  box-shadow:0 14px 34px rgba(0,0,0,.35), 0 0 0 1px rgba(214,36,159,.25); }
.hx-stat:hover:after{ left:150%; transition:left .8s ease; }
.hx-stat:hover .hx-stat-ico{ color:#fff; border-color:transparent; background:var(--brand-grad); box-shadow:0 8px 20px rgba(214,36,159,.45);
  animation:hxIcoPop .45s cubic-bezier(.2,.9,.3,1.4); }
@keyframes hxIcoPop{ 0%{ transform:scale(1); } 45%{ transform:scale(1.18) rotate(-6deg); } 100%{ transform:scale(1.08); } }
.hx-stat:hover .hx-stat-ico{ transform:scale(1.08); }
@media(max-width:767px){ .hx-stat-ico{ width:34px; height:34px; margin-bottom:8px; font-size:14px; } }
@media(prefers-reduced-motion: reduce){ .hx-stat,.hx-stat-ico{ transition:none; } .hx-stat:hover .hx-stat-ico{ animation:none; } .hx-stat:after{ display:none; } }