html,
body {
   margin:0;
   padding:0;
   height:100%;
}

.navbar {
  background-color: #16708B;
}
.navbar .navbar-brand {
  color: #ecf0f1;
  background: #fff;
  border-radius: 14px;
}
.navbar .navbar-brand:hover,
.navbar .navbar-brand:focus {
  color: #d9d9d9;
}
.navbar .navbar-nav .nav-link {
  color: #ecf0f1;
  border-radius: .25rem;
  margin: 0 0.25em;
}
.navbar .navbar-nav .nav-link:not(.disabled):hover,
.navbar .navbar-nav .nav-link:not(.disabled):focus {
  color: #d9d9d9;
}
.navbar .navbar-nav .nav-item.active .nav-link,
.navbar .navbar-nav .nav-item.active .nav-link:hover,
.navbar .navbar-nav .nav-item.active .nav-link:focus,
.navbar .navbar-nav .nav-item.show .nav-link,
.navbar .navbar-nav .nav-item.show .nav-link:hover,
.navbar .navbar-nav .nav-item.show .nav-link:focus {
  color: #000000;
  background-color: #d9d9d9;
}
.navbar .navbar-toggle {
  border-color: #d9d9d9;
}
.navbar .navbar-toggle:hover,
.navbar .navbar-toggle:focus {
  background-color: #d9d9d9;
}
.navbar .navbar-toggle .navbar-toggler-icon {
  color: #ecf0f1;
}
.navbar .navbar-collapse,
.navbar .navbar-form {
  border-color: #ecf0f1;
}
.navbar .navbar-link {
  color: #ecf0f1;
}
.navbar .navbar-link:hover {
  color: #000000;
}

/* Module */
.website_block {
    background: #f5f5f5;
    overflow: hidden;
    position: relative;
    float: left;
    width: 250px;
    border: 2px solid #08546b;
    margin: 0 3px 6px 6px;
    padding: 2px 1px;
    text-align: center;
    color: #666;
    -webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}
.website_block .website_title {
	background: #08546b;
	color: #fff;
	padding: 2px;
	display: block;
	margin: -2px -1px 3px;
}
.website_block .website_bottom {
	background: #08546b;
	color: #fff;
	padding: 1px 3px;
	display: block;
	font-size: 12px;
	text-align: right;
	margin: 3px -2px -3px;
	-webkit-border-bottom-right-radius: 3px;
	-webkit-border-bottom-left-radius: 3px;
	-moz-border-radius-bottomright: 3px;
	-moz-border-radius-bottomleft: 3px;
	border-bottom-right-radius: 3px;
	border-bottom-left-radius: 3px;
}
.website_block img {
	max-width: 120px;
    height: 90px;
	margin-bottom:10px
}
.website_block .coins {
	margin: 10px auto; 
	display: block; 
	width: 126px; 
	padding: 2px 3px; 
	background: #fff; 
	color: #444;
	font-size: 13px;
    border: 1px solid #ccc;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
.website_block .coins span {
    color: #4c7d00;
}
.website_block .website_report {
	display: block;
	background: #fff;
	padding: 2px;
	text-align: right;
	font-size: 12px;
	margin: 5px -1px -2px;
}
.website_block .website_report a {
	color: #333;
}
.visit_button {
    background: #7fbf4d;
    background: -webkit-linear-gradient(top, #7fbf4d, #63a62f);
    background: -moz-linear-gradient(top, #7fbf4d, #63a62f);
    background: -ms-linear-gradient(top, #7fbf4d, #63a62f);
    background: -o-linear-gradient(top, #7fbf4d, #63a62f);
    background: linear-gradient(top, #7fbf4d, #63a62f);
    width: 92px;
    padding: 5px 5px 5px 1px;
    text-align: center;
    text-shadow: 0 -1px 0 #4c9021;
    margin-top: 5px;
    display: inline-block;
    text-decoration: none;
    font-weight: bold;
    font-size: 11px;
	color: #fff;
    border: 1px solid #63a62f;
    box-shadow: inset 0 1px 0 0 #96ca6d;
    -webkit-box-shadow: inset 0 1px 0 0 #96ca6d;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
.visit_button:hover {
    background: #76b347;
	color: #fff;
    box-shadow: inset 0 1px 0 0 #8dbf67;
    -webkit-box-shadow: inset 0 1px 0 0 #8dbf67;
    cursor: pointer
}
.skip_button {
	background: #7fbf4d;
    background: -webkit-linear-gradient(top, #4d9bbf, #2f72a6);
    background: -moz-linear-gradient(top, #4d9bbf, #2f72a6);
    background: -ms-linear-gradient(top, #4d9bbf, #2f72a6);
    background: -o-linear-gradient(top, #4d9bbf, #2f72a6);
    background: linear-gradient(top, #4d9bbf, #2f72a6);
    width: 92px;
    padding: 5px 1px 5px 7px;
    text-align: center;
    text-shadow: 0 -1px 0 #216590;
    margin-top: 5px;
    display: inline-block;
    text-decoration: none;
    font-weight: bold;
    font-size: 11px;
	color: #fff;
    border: 1px solid #2f72a6;
    box-shadow: inset 0 1px 0 0 #6da4ca;
    -webkit-box-shadow: inset 0 1px 0 0 #6da4ca;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
.skip_button:hover {
    background: #4781b3;
	color: #fff;
    box-shadow: inset 0 1px 0 0 #678ebf;
    -webkit-box-shadow: inset 0 1px 0 0 #678ebf;
    cursor: pointer
}
.x-small-circle-or {
	background: #fff;
	color: #333;
	display:inline-block;
	font-size:14px;
	font-weight:600;
	height:38px;
	width:38px;
	text-align:center;
	line-height:30px;
	margin: 0 -12px 1px -10px;
	vertical-align:middle;
	position:relative;
	border-top: 2px solid #7fbf4d;
	border-left: 2px solid #7fbf4d;
	border-bottom: 2px solid #4394b9;
	border-right: 2px solid #4394b9;
	border-radius:50%;
	-moz-border-radius:50%;
	-webkit-border-radius:50%;
}

/* Mining */
.price_block {
    display: block;
	background: #fff;
	padding: 10px;
	margin: 10px 0;
	font-size: 14px;
	color: #000;
	vertical-align: middle;
	border: 1px solid #08546b;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}

.price_block .text {
	display: inline-block;
	margin-top: 4px;
}

.pay_block {
	display:inline-block;
	margin:0;
	float:right
}

/* Module */
#tbl .tbl {
    background: url(images/header.png) repeat-x #0d55a3;
    border-color: #000;
    float: left;
    height: 75px;
    margin: 8px 8px 0 0;
    overflow: hidden;
    padding-top: 10px;
    position: relative;
    text-align: center;
    width: 127px;
    border-image: initial;
    color: #000
}
.title a {
    color: #fff !important;
    font-size: 70%
}
#tbl .tbl-content {
    background: url(images/header.png) repeat-x #0d55a3;
    border-color: #000
}
#tbl .tbl-content_vip {
    background: url(images/header.png) repeat-x #c0493c;
    border-color: #000;
    box-shadow: 0 0 2px #999
}
#tbl a.close {
    color: #999;
    font: bold 14px/14px Verdana, sans-serif;
    position: absolute;
    right: 5px;
    text-decoration: none;
    top: 5px;
    width: 10px
}
#tbl .points {
    margin-top: 5px
}
#tbl .tbl {
    text-align: center
}
.follow {
    background: #0d55a3;
    height: 150px;
    overflow: hidden;
    position: relative;
    float: left;
    width: 88px;
    border: 1px solid #fff;
    margin: 1px 0 2px 6px;
    padding-top: 20px;
    text-align: center;
    border-image: initial;
    color: #efefef;
    border-radius: 3px
}
.follow_vip {
    background: #c0493c;
    height: 150px;
    overflow: hidden;
    position: relative;
    float: left;
    width: 88px;
    border: 1px solid #fff;
    margin: 1px 0 2px 6px;
    padding-top: 20px;
    text-align: center;
    color: #fff;
    border-radius: 3px;
    box-shadow: 0 0 2px #999
}

/* Login Box */
#login-dp{
    min-width: 250px;
    padding: 14px 14px 0;
    overflow:hidden;
    background-color:rgba(255,255,255,.8);
}
#login-dp .help-block{
    font-size:12px    
}
#login-dp .bottom{
    background-color:rgba(255,255,255,.8);
    border-top:1px solid #ddd;
    clear:both;
    padding:14px;
}
#login-dp .social-buttons{
    margin:12px 0    
}
#login-dp .social-buttons a{
    width: 49%;
}
#login-dp .form-group {
    margin-bottom: 10px;
}
@media(max-width:768px){
    #login-dp{
        background-color: inherit;
        color: #fff;
    }
    #login-dp .bottom{
        background-color: inherit;
        border-top:0 none;
    }
}

/* Proofs */
#proof_wrapper {
    float:left;
    color:#fff;
    margin:0 5px 10px;
    background-color:#08546b;
    box-shadow:2px 2px 2px rgba(0,0,0,0.6);
    padding:5px;
    border-radius:3px
}
#proof_wrapper .imgwrapper{
    border:1px solid #b6b6b6;
    border-radius:3px
}
#proof_wrapper .imgwrapper img{
    border-radius:3px
}
#proof_wrapper .username{
    text-align:center;
    font-size:11px;
    margin-bottom:1px
}
#proof_wrapper .date{
    text-align:center;
    font-size:11px;
    margin:3px 0 5px
}
#proof_wrapper .amount{
    text-align:center;
    font-size:20px;
    font-family:arial
}
#proof_wrapper .upload_input{
    background:#efefef;
    padding:8px;
    color:#000;
    border-radius:3px;
    margin-top:-8px
}

/* Dashboard */
#dashboard-info {
    background: #16708B;
    border: 1px solid #ccc;
    padding: 10px;
	margin-bottom: 15px;
    color: #fff;
    font-size: 15px;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px
}
#dashboard-info .avatar {
    display:inline-block;
	width:120px
}
#dashboard-info .stats {
    display:inline-block;
	width:170px
}

.aff_url_block {
    width: 322px;
    background: url(images/back.png) repeat center center #292e31;
    color: #fff;
    padding: 6px 10px;
    margin: 0 auto;
    border: 1px solid #ccc;
	border-top: 0;
    -webkit-border-bottom-right-radius: 4px;
    -webkit-border-bottom-left-radius: 4px;
    -moz-border-radius-bottomright: 4px;
    -moz-border-radius-bottomleft: 4px;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    text-align: center
}

/* Content */
#blue-box {
	display: block;
	min-height: 90px;
	background: #16708B;
	color: #fff;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	margin-top: -18px;
}

#blue-box .title {
	background: #08546b;
	font-size: 18px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 1px;
	text-align: center;
	
	max-width: 50%;
	border-top: 1px solid #16708B;
	margin: 0 auto 10px;
	text-shadow: -1px 0 #16708B, 0 1px #16708B, 1px 0 #16708B, 0 -1px #16708B;
	-webkit-border-bottom-right-radius: 3px;
	-webkit-border-bottom-left-radius: 3px;
	-moz-border-radius-bottomright: 3px;
	-moz-border-radius-bottomleft: 3px;
	border-bottom-right-radius: 3px;
	border-bottom-left-radius: 3px;
}

#blue-box .infobox {
	background: #08546b;
    display: block;
    clear: both;
    padding: 8px 6px;
    width: 100%;
    font-size: 14px;
    color: #fff;
    margin-top: 5px;
	margin-bottom: 15px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

#blue-box .content {
	padding:1px;
	line-height: 22px;
}

#blue-box .content h1 {
	font-size: 26px;
	font-weight: normal;
	line-height: 32px;
	text-align: center;
	margin-top: 0px;
	margin-bottom: 5px;
}

/* Home Page */
#home-box {
	display: block;
	background: #16708B;
	color: #fff;
	-webkit-border-top-left-radius: 3px;
	-webkit-border-top-right-radius: 3px;
	-moz-border-radius-topleft: 3px;
	-moz-border-radius-topright: 3px;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
}

#home-box .content {
	padding: 4px 6px;
	line-height: 22px;
}

#home-box .content h1 {
font-size: 17px;

font-weight: bold;

line-height: 29px;

text-align: center;

margin-top: 0px;

margin-bottom: 0;
}

#home-statistics {
background: #3fbad8;

color: #fff;

padding: 9px 9px;

text-align: center;

font-size: 17px;

margin-left: -16px;

margin-right: -16px;

position: relative;

z-index: 1;

-webkit-box-shadow: 0px -3px 4px rgba(50, 50, 50, 0.5), 0px 3px 4px rgba(50, 50, 50, 0.5);

-moz-box-shadow: 0px -3px 4px rgba(50, 50, 50, 0.5), 0px 3px 4px rgba(50, 50, 50, 0.5);

box-shadow: 0px -3px 4px rgba(50, 50, 50, 0.5), 0px 3px 4px rgba(50, 50, 50, 0.5);

font-weight: 600;
}

#home-bottom-box {
	display: block;
	background: #16708B;
	color: #fff;
	-webkit-border-bottom-right-radius: 3px;
	-webkit-border-bottom-left-radius: 3px;
	-moz-border-radius-bottomright: 3px;
	-moz-border-radius-bottomleft: 3px;
	border-bottom-right-radius: 3px;
	border-bottom-left-radius: 3px;
}
#home-bottom-box .content {
	padding: 25px 30px;
}
#home-bottom-box .content h2 {
	font-size: 26px;
	font-weight: normal;
	line-height: 32px;
	text-align: center;
	margin-top: 0px;
	margin-bottom: 5px;
}
#home-exchange-box {
	display: block;
	margin: 25px 0 0;
	background: #16708B;
	color: #fff;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}
#home-exchange-box .content {
	padding: 25px 30px;
}
#home-exchange-box .content h2 {
	font-size: 20px;
	font-weight: bold;
	line-height: 29px;
	text-align: center;
	margin-top: 0px;
	margin-bottom: 5px;
}
.exchange_icon {
    margin: 8px 1px 0;
    max-width: 40px;
    border: 0
}
.exchange_icon:hover {
    opacity: .4
}


/* Home */
.homebox {
    background: #6d6d6d;
    display: block;
    clear: both;
    border: 1px solid #efefef;
    padding: 25px 12px;
    width: 98%;
    font-size: 14px;
    color: #efefef;
    margin-top: 20px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px
}
.homebox h2 {
    color: #93c52f;
    margin: 4px 2px 12px 2px;
    font-size: 22px;
    text-align: center;
    font-family: arial;
    text-shadow: 0 1px 0 rgba(12, 12, 12, 0.6)
}

/* Login */
.main-section{
	margin: 0 auto;
	margin-top:100px;
	background-color: #fff;
	border-radius: 5px;
	padding: 0px;
}
.user-img{
	margin-top:-50px;
}
.user-img img{
	height: 100px;
	width: 100px;
}
.user-name{
	margin:10px 0px;
}
.user-name h1{
	font-size:30px;
	color:#676363;
}
.user-name button{
	position: absolute;	
	top:-50px;
	right:20px;
	font-size:30px;
}
.form-input button{
	width: 100%;
	margin-bottom: 20px;
}
.form-input .form-group.text-left,
.form-input .form-check,
.form-input .form-check-label {
    color: #16345f;
}
.form-input .form-check-input {
    border-color: rgba(22, 52, 95, 0.22);
}
.form-input .form-check-input:checked {
    background-color: #1d7fe2;
    border-color: #1d7fe2;
}
.link-part{
	border-radius:0px 0px 5px 5px;
	background-color: #ECF0F1;
	padding:15px;
	border-top:1px solid #c2c2c2;
}
.open-modal{
	margin-top:100px !important;
}

/* Buy Coins */
#purchase-coins {
    width: 230px;
    height: 140px;
    text-align: center;
    margin-top: 10px;
    background: #efefef;
    float: left;
    margin: 0 5px 10px;
    border-radius: 5px
}
#purchase-coins .header {
    background: #08546b;
    color: #fff !important;
    display: block;
    font-size: 14px !important;
    font-weight: normal;
    margin-bottom: 25px;
    font-weight: bold;
    padding: 4px 20px;
    text-align: center;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px
}
#user_pack {
    width: 174px;
    height: 138px;
    text-align: center;
    background: #efefef;
	color: #666;
    float: left;
    margin: 0 3px 6px;
    border-radius: 5px
}
#user_pack .hdr {
    background: #08546b;
    color: #fff !important;
    display: block;
    font-size: 14px !important;
    font-weight: normal;
    margin-bottom: 8px;
    font-weight: bold;
    padding: 4px 5px;
    text-align: center;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px
}
#user_pack .seller {
    font-size: 13px !important;
	display: block;
	margin-bottom: 8px;
}

.site-buy-hero {
    background: linear-gradient(180deg, #f7fbff, #eef4ff) !important;
}

.site-buy-packages,
.site-funding-grid,
.site-buy-grid {
    display: grid;
    gap: 18px;
}

.site-buy-grid,
.site-funding-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.site-buy-grid-market {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.site-buy-pack-card,
.site-funding-option {
    padding: 20px;
    border-radius: 20px;
    background: linear-gradient(180deg, #ffffff, #f7fbff);
    border: 1px solid rgba(37, 162, 255, 0.08);
    box-shadow: 0 18px 38px rgba(10, 19, 39, 0.08);
}

.site-buy-pack-card-market {
    padding: 18px;
}

.site-buy-pack-top,
.site-funding-option-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}

.site-buy-pack-top strong,
.site-funding-option h3 {
    color: #132248;
    font-size: 1.05rem;
    font-weight: 800;
    margin: 0;
}

.site-buy-pack-top span,
.site-funding-option-head span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 999px;
    background: #eaf3ff;
    color: #2b5688;
    font-size: 0.82rem;
    font-weight: 700;
}

.site-buy-pack-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid rgba(37, 162, 255, 0.08);
    color: #5b6885;
}

.site-buy-pack-meta strong {
    color: #132248;
}

.site-buy-pack-meta em {
    color: #117a54;
    font-style: normal;
    font-weight: 700;
}

.site-buy-pack-form {
    margin-top: 10px;
}

.site-buy-pack-form .site-primary-btn,
.site-funding-option .site-primary-btn,
.site-funding-option .site-ghost-btn {
    width: 100%;
    justify-content: center;
}

.site-funding-callout {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
    margin-top: 18px;
    padding: 22px 24px;
    border-radius: 22px;
    background: linear-gradient(135deg, #102040, #1c3565);
    color: #fff;
    box-shadow: 0 24px 48px rgba(10, 19, 39, 0.2);
}

.site-funding-callout h3 {
    margin: 6px 0 8px;
    font-size: 1.35rem;
    font-weight: 800;
}

.site-funding-callout p {
    margin: 0;
    color: rgba(255, 255, 255, 0.84);
    line-height: 1.7;
}

.site-funding-callout-meta {
    min-width: 180px;
    padding: 16px 18px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.08);
    text-align: center;
}

.site-funding-callout-meta span {
    display: block;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.88rem;
    margin-bottom: 6px;
}

.site-funding-callout-meta strong {
    font-size: 1.2rem;
    font-weight: 800;
}

.site-funding-option p {
    color: #556680;
    line-height: 1.7;
    min-height: 76px;
}

.site-funding-option small {
    display: block;
    color: #6c7d98;
}

.site-funding-option.is-active {
    border-color: rgba(25, 195, 125, 0.35);
    box-shadow: 0 20px 44px rgba(25, 195, 125, 0.16);
}

.site-dashboard-buy-banner {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
    padding: 22px 24px;
    border-radius: 22px;
    background: linear-gradient(135deg, #f7fbff, #eef4ff);
    border: 1px solid rgba(37, 162, 255, 0.08);
    margin-bottom: 18px;
}

.site-dashboard-buy-banner h3 {
    margin: 6px 0 8px;
    color: #102040;
    font-size: 1.35rem;
    font-weight: 800;
}

.site-dashboard-buy-banner p {
    margin: 0;
    color: #5b6885;
}

/* Footer */
.static-bottom {
  right: 0;
  bottom: 0;
  left: 0;
  position: relative;
  border-width: 1px 1px 0;
}
.footer_copyright {
	text-decoration: none;
	color: #ecf0f1;
}
.footer_copyright:hover, .footer_copyright:focus {
	text-decoration: none;
	color: #d9d9d9;
}

.text-white-50 { color: rgba(255, 255, 255, .5); }
.bg-purple { background-color: #6f42c1; }
.border-bottom { border-bottom: 1px solid #e5e5e5; }
.box-shadow { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .1); }
.box-style { border: 1px solid #ccc }

.lh-100 { line-height: 1; }
.lh-125 { line-height: 1.25; }
.lh-150 { line-height: 1.5; }

.copyright {font-size: 14px;
  color: #fff;
  font-weight: 672;

} 
.membership-option { background: #212529;color: #fff; }
.membership-block {
	font-weight: 300;
	margin: 0 2px 10px;
	padding: 3px 2px;
	font-size: 21px;
	color: #fff;
	padding: 8px 6px;
	display:inline-block;
	background-color: #08546b;
	-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;
}
.membership-block b {font-weight: 600;}

/* Affiliates */
#aff-block {
    margin: 5px 0 20px;
    display: block;
    padding: 8px 10px 5px;
    background-color: #fff;
    color: #0e6083;
    font-size: 13px;
    text-align: left;
    border: 1px solid #08546b;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px
}
#aff-block .title {
    display: block;
    font-weight: bold;
    text-align: center;
    font-size: 18px;
    padding: 0 8px;
    background-color: #08546b;
    color: #fff;
    margin: -23px auto 0;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px
}
#aff-block .aff_block_p {
    margin-bottom: 0;
    margin-top: 10px;
    display: block;
    text-align: center;
    font-size: 11px
}
#aff-block .aff_content_bottom {
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    margin-top: 14px
}
#aff-block .aff_block_p2 {
    display: block;
    background-color: #bedee2;
    margin: 9px 5px 0 5px;
    padding: 4px 0 4px 0;
    text-align: center;
    color: #0d5675;
    font-size: 18px;
    border: 1px solid #84afba;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    text-decoration: none
}
#aff-block .aff_block_p2 a {
	color:#0b516f
}
#aff-block .aff_block_p2:hover {
    background-color: #c2e2e6;
    border-color: #93c2cf
}
#aff-banner {
    padding: 4px 10px;
    background-color: #fff;
    color: #0e6083;
    border: 1px solid #08546b;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px
}
#aff-banner .title {
    display: block;
    margin: -16px auto 0;
    font-weight: bold;
    text-align: center;
    font-size: 18px;
    padding: 1px 8px;
    background-color: #08546b;
    color: #fff;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px
}

/* Sidebar */
#sidebar-block {
    background: #16708B;
    padding: 0 5px 0 5px;
	width: 100%;
    border: 1px solid #08546b;
}
#sidebar-block hr {
    border: 0;
    height: 1px;
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0));
    background: -moz-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0));
    background: -ms-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0));
    background: -o-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0))
}
#sidebar-block .inner {
    padding:8px 3px 1px;margin-bottom:5px;-webkit-border-bottom-right-radius:4px;-webkit-border-bottom-left-radius:4px;-moz-border-radius-bottomright:4px;-moz-border-radius-bottomleft:4px;border-bottom-right-radius:4px;border-bottom-left-radius:4px
}
#sidebar-block .manager {
    display: block;
    margin: 1px 2px 8px
}

#sidebar-block .data{width:100%;padding: 2px 3px 5px;font-size:14px;line-height:14px;text-decoration:none;color:#fff}
#sidebar-block .title {
    background: #08546b;
    margin: 0 -5px 2px -5px;
    padding: 5px;
    color: #fff;
	font-weight: bold;
    -webkit-border-top-left-radius: 3px;
    -webkit-border-top-right-radius: 3px;
    -moz-border-radius-topleft: 3px;
    -moz-border-radius-topright: 3px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px
}
#sidebar-block .block{width:100%;background:#f8f9fa;border-radius:3px;padding: 2px 3px 5px;color:#505050}
#sidebar-block .block .data{width:100%;padding: 2px 3px 6px;font-size:14px;line-height:14px;text-decoration:none;color:#505050}
#sidebar-block .level{width:100%;background:#f8f9fa;border-radius:3px;margin-top:5px;padding: 4px;font-size:14px;line-height:14px;text-decoration:none;color:#505050}

/* Blog */
.blog_comment{
    margin:10px auto;
    background:#efefef;
    border:solid 1px #08546b;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    color:#696969
}
.com_title{
    width:100%;
    text-align:center;
    font-size:12px;
    color:#fff;
    padding:5px;
    background:#08546b;
    border-bottom:solid 1px #1d1d1d;
    -webkit-border-top-left-radius:4px;
    -webkit-border-top-right-radius:4px;
    -moz-border-radius-topleft:4px;
    -moz-border-radius-topright:4px;
    border-top-left-radius:4px;
    border-top-right-radius:4px
}
.comments_wrap{
    overflow:hidden;
    margin:5px auto;
    background:#efefef;
    border:1px solid #08546b;
    border-radius:3px
}
.comments_wrap .content_text{
    padding:10px 5px;
    overflow:hidden;
    text-align:justify;
    color:#464646
}
.comments_wrap .content_top{
    padding:1px 5px 4px;
    background:#08546b;
    color:#fff;
    border-bottom:1px dotted #fff
}

.image-row {
    display: flex;
    justify-content: space-around;
    width: 100%;
}

.image-container {
    width: 95%;
}

.earn-box-rating {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 5px; /* Add spacing between image and rating */
}

.earn-box-star-container {
    display: flex;
    align-items: center;
}

.earn-box-star {
    width: 15px;
    height: 20px;
    background-image: url('/template/default/common/img/star-yellow.svg');
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: 2px;
}


.earn-box-star-dark {
    opacity: 0.5; /* Adjust opacity as needed */
}

.ticker-container {
    overflow: hidden;
    white-space: nowrap;
    position: relative;
}

.ticker-content {
    display: inline-block;
    animation: tickerMove 50s linear infinite;

}

/* 2026 responsive redesign */
:root {
    --site-bg: #0b1020;
    --site-surface: #10172d;
    --site-surface-soft: #161f3d;
    --site-surface-alt: #edf3ff;
    --site-card: rgba(255, 255, 255, 0.96);
    --site-text: #e7eefc;
    --site-text-dark: #0d1730;
    --site-muted: #91a1c4;
    --site-primary: #19c37d;
    --site-primary-dark: #0d9b61;
    --site-accent: #25a2ff;
    --site-warning: #f6c445;
    --site-border: rgba(147, 167, 207, 0.18);
    --site-shadow: 0 24px 60px rgba(4, 10, 24, 0.38);
    --site-radius: 24px;

    /* Social brand tokens (single source of truth — used by .site-social-tile
       and .site-footer-social-link variants below). */
    --brand-telegram:       #0088cc;
    --brand-telegram-soft:  #e8f4ff;
    --brand-youtube:        #ff0000;
    --brand-youtube-soft:   #ffe9e9;
    --brand-playstore:      #0f9d58;
    --brand-playstore-soft: #e6f7ec;
    --brand-facebook:       #1877f2;
    --brand-facebook-soft:  #e7efff;
}

body.site-body {
    background:
        radial-gradient(circle at top left, rgba(37, 162, 255, 0.18), transparent 28%),
        radial-gradient(circle at top right, rgba(25, 195, 125, 0.12), transparent 22%),
        linear-gradient(180deg, #09101f 0%, #0c1326 40%, #0f1730 100%);
    color: var(--site-text);
    font-family: "Barlow", "Segoe UI", sans-serif;
    min-height: 100%;
}

.site-frame {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.site-header {
    padding: 18px 0 8px;
    position: sticky;
    top: 0;
    z-index: 1040;
    background: linear-gradient(180deg, rgba(9, 16, 31, 0.94), rgba(9, 16, 31, 0.7), transparent);
    backdrop-filter: blur(12px);
}

.site-topbar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 20px;
    background: rgba(16, 23, 45, 0.78);
    border: 1px solid var(--site-border);
    border-radius: 22px;
    box-shadow: var(--site-shadow);
}

.site-brand,
.site-brand:hover {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: #fff;
}

.site-brand-mark {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: linear-gradient(135deg, #21b573, #1f86ff);
    color: #ffffff;
    font-size: 20px;
    box-shadow: 0 12px 30px rgba(31, 134, 255, 0.25);
}

.site-brand-wordmark {
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.site-brand-wordmark span {
    transform: translateY(1px);
}

.site-brand-copy {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.site-brand-copy strong {
    font-size: 1.05rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.site-brand-copy small {
    color: var(--site-muted);
    font-size: 0.78rem;
}

.site-nav-toggle {
    margin-left: auto;
    border: 1px solid var(--site-border);
    border-radius: 14px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.04);
}

.site-nav-toggle .navbar-toggler-icon {
    display: block;
    width: 22px;
    height: 16px;
    background-image:
        linear-gradient(#ffffff, #ffffff),
        linear-gradient(#ffffff, #ffffff),
        linear-gradient(#ffffff, #ffffff) !important;
    background-size: 100% 2px, 100% 2px, 100% 2px;
    background-position: center top, center center, center bottom;
    background-repeat: no-repeat;
}

.site-nav-shell {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    justify-content: space-between;
}

.site-nav-links,
.site-nav-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    overflow: visible;
}

.site-dropdown {
    position: relative;
}

.site-nav-link,
.site-ghost-btn,
.site-primary-btn,
.site-balance-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 14px;
    padding: 10px 14px;
    text-decoration: none;
    transition: 0.2s ease;
    font-weight: 600;
}

.site-nav-link {
    color: #dce7ff;
    background: rgba(255, 255, 255, 0.03);
}

.site-nav-link:hover,
.site-nav-link.is-active {
    color: #fff;
    background: rgba(37, 162, 255, 0.18);
    text-decoration: none;
}

.site-ghost-btn {
    color: #e5eeff;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--site-border);
}

.site-ghost-btn:hover {
    color: #fff;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.1);
}

.site-primary-btn {
    color: #042315;
    background: linear-gradient(135deg, var(--site-primary), #5af0b1);
    box-shadow: 0 12px 30px rgba(25, 195, 125, 0.22);
}

.site-primary-btn:hover {
    color: #042315;
    text-decoration: none;
    transform: translateY(-1px);
}

.site-muted-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 14px;
    padding: 10px 14px;
    font-weight: 600;
    color: #617390;
    background: #edf2fb;
    border: 1px solid rgba(19, 34, 72, 0.08);
    box-shadow: none;
    cursor: not-allowed;
    text-decoration: none;
}

.site-muted-btn:hover {
    color: #617390;
    text-decoration: none;
    transform: none;
}

.site-primary-btn.is-compact,
.site-ghost-btn.is-compact,
.site-muted-btn.is-compact {
    min-height: 38px;
    padding: 8px 12px;
    font-size: 0.9rem;
}

.site-lg-btn {
    padding: 14px 20px;
    font-size: 1rem;
}

.site-balance-pill {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--site-border);
    color: #fff;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
}

.site-balance-pill:hover {
    color: #fff;
    text-decoration: none;
}

.container,
.container-fluid {
    position: relative;
    z-index: 1;
}

.box-style,
#blue-box,
#home-box,
#home-exchange-box,
#sidebar-block {
    border: 1px solid var(--site-border) !important;
    border-radius: var(--site-radius) !important;
    box-shadow: var(--site-shadow) !important;
    overflow: hidden;
}

.bg-white,
.site-surface-card,
.site-showcase-text,
.site-showcase-logos,
.site-offers-header,
.site-offer-frame-wrap,
.site-hero-card,
.site-stat-band,
.site-dashboard-shell,
.site-sidebar-card {
    background: var(--site-card) !important;
    color: var(--site-text-dark);
}

.site-landing,
.site-offers-shell {
    display: grid;
    gap: 22px;
}

.site-hero-card {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(320px, 0.7fr);
    gap: 28px;
    padding: 36px;
    background:
        radial-gradient(circle at top right, rgba(37, 162, 255, 0.12), transparent 28%),
        linear-gradient(180deg, #f8fbff 0%, #edf4ff 100%) !important;
    animation: site-rise 0.55s ease;
}

.site-section-kicker {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(37, 162, 255, 0.12);
    color: #0b63b6;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 12px;
}

.site-hero-copy h1,
.site-offers-header h1,
.site-dashboard-hero h1 {
    font-size: clamp(1.7rem, 2.5vw, 2.8rem);
    line-height: 1.12;
    margin-bottom: 14px;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.site-hero-copy p,
.site-offers-header p,
.site-dashboard-hero p,
.site-surface-card p,
.site-showcase-text p {
    font-size: 0.96rem;
    line-height: 1.65;
    color: #506180;
}

.site-hero-copy p {
    margin-bottom: 22px;
}

.site-hero-card .site-ghost-btn,
.site-page-hero .site-ghost-btn,
.site-surface-card .site-ghost-btn,
.site-offers-header .site-ghost-btn,
.site-offer-focus .site-ghost-btn,
.site-funding-option .site-ghost-btn,
.site-showcase-text .site-ghost-btn,
.site-showcase-logos .site-ghost-btn {
    color: #16345f;
    background: #ffffff;
    border-color: rgba(22, 52, 95, 0.14);
}

.site-hero-card .site-ghost-btn:hover,
.site-page-hero .site-ghost-btn:hover,
.site-surface-card .site-ghost-btn:hover,
.site-offers-header .site-ghost-btn:hover,
.site-offer-focus .site-ghost-btn:hover,
.site-funding-option .site-ghost-btn:hover,
.site-showcase-text .site-ghost-btn:hover,
.site-showcase-logos .site-ghost-btn:hover {
    color: #102849;
    background: #f4f8ff;
}

.site-hero-actions,
.site-inline-stats,
.site-chip-row,
.site-connect-strip,
.site-dashboard-stats,
.site-dashboard-top,
.site-action-grid,
.site-footer-bar {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.site-hero-actions {
    gap: 18px;
}

.site-inline-stats {
    margin-top: 26px;
    gap: 18px;
}

.site-inline-stats div {
    min-width: 140px;
    padding: 16px 18px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid rgba(37, 162, 255, 0.08);
}

.site-inline-stats strong {
    display: block;
    font-size: 1.05rem;
    color: var(--site-text-dark);
    margin-bottom: 4px;
}

.site-inline-stats span {
    font-size: 0.88rem;
    color: #5b6885;
}

.site-hero-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

.site-phone-mockup {
    width: min(100%, 320px);
    padding: 16px;
    border-radius: 36px;
    background: linear-gradient(180deg, #0e1630, #091120);
    box-shadow: 0 28px 64px rgba(8, 18, 36, 0.28);
    transform: rotate(4deg);
}

.site-phone-top {
    width: 88px;
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    margin: 4px auto 18px;
}

.site-phone-screen {
    display: grid;
    gap: 14px;
    padding: 10px;
    border-radius: 26px;
    background: linear-gradient(180deg, #111b37, #0b1327);
}

.site-mock-earn-card {
    padding: 18px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}

.site-mock-earn-card span {
    display: block;
    font-size: 0.82rem;
    color: #b1c1e3;
    margin-bottom: 6px;
}

.site-mock-earn-card strong {
    font-size: 1.05rem;
    font-weight: 700;
}

.site-mock-earn-card.is-highlight {
    background: linear-gradient(135deg, rgba(25, 195, 125, 0.32), rgba(37, 162, 255, 0.24));
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.site-marketing-grid,
.site-task-board,
.site-dashboard-grid,
.site-showcase-grid,
.site-footer-grid,
.site-offer-card-grid {
    display: grid;
    gap: 20px;
}

.site-marketing-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.site-surface-card,
.site-showcase-text,
.site-showcase-logos,
.site-offers-header,
.site-offer-frame-wrap,
.site-page-hero,
.site-table-card {
    padding: 24px;
    animation: site-rise 0.6s ease;
}

.site-chip-row span,
.site-footer-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    background: #eff4ff;
    color: #32507e;
    font-size: 0.88rem;
    margin-right: 8px;
    margin-top: 8px;
}

.site-stat-band {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding: 18px;
    background: linear-gradient(135deg, #0f1a35, #132248) !important;
    color: #fff;
}

.site-stat-band div {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.05);
}

.site-stat-band i {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: rgba(25, 195, 125, 0.18);
    color: #88f0c1;
}

.site-showcase-grid {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.72fr);
}

.site-check-list {
    margin: 18px 0 0;
    padding-left: 18px;
    color: #22314f;
}

.site-check-list li {
    margin-bottom: 10px;
    line-height: 1.5;
}

.site-showcase-logos {
    display: grid;
    align-items: center;
    gap: 18px;
    background: linear-gradient(180deg, #f7fbff, #eef4ff) !important;
}

.site-showcase-logo {
    padding: 14px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid rgba(37, 162, 255, 0.08);
    text-align: center;
}

.site-sidebar-card {
    background: linear-gradient(180deg, #f8fbff, #edf4ff) !important;
    padding: 0;
}

.site-avatar-badge {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--site-primary), #48e0a0);
    color: #042315;
    font-weight: 800;
    margin-right: 12px;
}

.site-profile-name {
    font-size: 1rem;
    font-weight: 800;
    color: #132248;
}

.site-profile-type {
    color: #617390;
}

.site-progress-caption {
    margin: auto;
    color: #152341;
    font-weight: 700;
    width: -webkit-fill-available;
    text-align: center;
}

.site-balance-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 14px !important;
}

.site-balance-cell {
    padding: 14px 10px;
    border-radius: 16px;
    background: #fff;
    text-align: center;
    border: 1px solid rgba(37, 162, 255, 0.08);
}

.site-mini-offer {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    text-decoration: none;
    color: #16233f;
    padding: 10px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid rgba(37, 162, 255, 0.1);
}

.site-mini-offer:hover {
    text-decoration: none;
    color: #16233f;
    transform: translateY(-1px);
}

.site-mini-offer img {
    border-radius: 14px;
}

.site-mini-offer strong,
.site-offer-card strong,
.site-dashboard-stat strong,
.site-footer-brand strong {
    display: block;
    font-weight: 800;
}

.site-mini-offer small,
.site-offer-card small {
    color: #5b6885;
    line-height: 1.5;
}

.site-dashboard-shell {
    padding: 18px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.site-dashboard-hero {
    padding: 28px;
    background: linear-gradient(135deg, #f8fbff, #eef4ff) !important;
}

.site-dashboard-top {
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 18px;
}

.site-dashboard-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.site-dashboard-stats {
    margin-top: 18px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    align-items: stretch;
}

.site-dashboard-stat {
    min-width: 0;
    padding: 16px 14px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid rgba(37, 162, 255, 0.08);
}

.site-dashboard-stat span {
    display: block;
    font-size: 0.8rem;
    color: #617390;
    margin-bottom: 4px;
    white-space: nowrap;
}

.site-dashboard-stat strong {
    font-size: clamp(1.1rem, 1.8vw, 1.45rem);
    line-height: 1.1;
    white-space: nowrap;
}

.site-dashboard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 18px;
}

.site-task-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 18px;
}

.site-task-card,
.site-page-shell {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.site-task-card {
    background: #f8fbff !important;
    border: 1px solid rgba(37, 162, 255, 0.08) !important;
    box-shadow: 0 16px 36px rgba(9, 21, 43, 0.07) !important;
    padding: 20px !important;
    border-radius: 22px;
}

.site-task-card .site-table-head h3,
.site-task-card .site-inline-note,
.site-task-card p,
.site-task-card strong {
    color: #132248;
}

.site-task-card .site-table-head p,
.site-task-card small {
    color: #5b6885;
}

.site-page-hero h1 {
    font-size: clamp(1.9rem, 3vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    margin-bottom: 10px;
}

.site-summary-strip,
.site-data-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.site-metric-card {
    padding: 16px 18px;
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid rgba(37, 162, 255, 0.08);
    box-shadow: 0 12px 28px rgba(10, 19, 39, 0.08);
}

.site-metric-card span {
    display: block;
    font-size: 0.88rem;
    color: #617390;
    margin-bottom: 6px;
}

.site-metric-card strong {
    font-size: 1.1rem;
    color: #11203e;
}

.site-table-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 16px;
}

.site-table-head h3 {
    margin: 0 0 6px;
    font-size: 1.15rem;
    font-weight: 800;
    color: #132248;
}

.site-table-head p,
.site-inline-note {
    color: #5b6885;
    line-height: 1.6;
}

.site-task-list,
.site-leaderboard-list {
    display: grid;
    gap: 12px;
}

.site-task-item,
.site-leaderboard-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: #ffffff;
    border: 1px solid rgba(37, 162, 255, 0.08);
    border-radius: 18px;
}

.site-task-item strong,
.site-leaderboard-user strong {
    display: block;
    color: #11203e;
    font-weight: 800;
}

.site-task-item small,
.site-leaderboard-user small,
.site-leaderboard-metrics small {
    color: #617390;
    line-height: 1.5;
}

.site-activity-table {
    table-layout: fixed;
}

.site-activity-table td,
.site-activity-table th {
    vertical-align: middle;
}

.site-activity-table td:first-child,
.site-activity-table th:first-child {
    text-align: left;
}

.site-activity-table .site-leaderboard-user {
    min-width: 0;
}

.site-activity-table .site-leaderboard-user > div {
    min-width: 0;
}

.site-activity-table .site-leaderboard-user strong {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.site-activity-source,
.site-activity-country {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.site-activity-country {
    max-width: 140px;
}

.site-task-item span,
.site-rank-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 999px;
    background: #eff4ff;
    color: #21477a;
    font-weight: 700;
    white-space: nowrap;
}

.site-task-item.is-complete span,
.site-rank-pill {
    background: rgba(25, 195, 125, 0.14);
    color: #0d7d4f;
}

.site-streak-track {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.site-streak-day {
    padding: 14px 8px;
    border-radius: 16px;
    text-align: center;
    background: #eef4ff;
    color: #4e6186;
    border: 1px solid rgba(37, 162, 255, 0.08);
}

.site-streak-day strong {
    display: block;
    font-size: 0.8rem;
    margin-bottom: 4px;
}

.site-streak-day span {
    font-weight: 800;
    color: #16284b;
}

.site-streak-day.is-active {
    background: linear-gradient(135deg, rgba(25, 195, 125, 0.16), rgba(37, 162, 255, 0.14));
    border-color: rgba(25, 195, 125, 0.22);
}

.site-leaderboard-user,
.site-leaderboard-metrics {
    display: flex;
    align-items: center;
    gap: 12px;
}

.site-leaderboard-metrics {
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.2;
}

.site-avatar-dot {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: linear-gradient(135deg, #21b573, #1f86ff);
    color: #fff;
    font-weight: 800;
    flex: 0 0 40px;
}

.site-leaderboard-row.is-current {
    border-color: rgba(25, 195, 125, 0.22);
    box-shadow: 0 12px 24px rgba(25, 195, 125, 0.08);
}

.site-account-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.site-gift-preview {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 16px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid rgba(37, 162, 255, 0.08);
    margin-bottom: 18px;
}

.site-gift-logo {
    width: 112px;
    height: 72px;
    object-fit: contain;
    border-radius: 14px;
    background: #fff;
    padding: 10px;
    border: 1px solid rgba(37, 162, 255, 0.08);
    flex: 0 0 112px;
}

.site-race-hero {
    background: linear-gradient(135deg, #f8fbff, #eef4ff) !important;
}

.site-race-nav {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 18px;
}

.site-race-shell {
    display: grid;
    gap: 18px;
}

.site-race-guide {
    display: grid;
    gap: 12px;
}

.site-race-guide-step {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 14px;
    padding: 14px 16px;
    border-radius: 18px;
    background: #f8fbff;
    border: 1px solid rgba(37, 162, 255, 0.08);
}

.site-race-guide-step strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #132248;
    color: #fff;
    font-size: 1rem;
    font-weight: 800;
}

.site-race-guide-step h4 {
    margin: 0 0 4px;
    font-size: 1rem;
    font-weight: 800;
    color: #132248;
}

.site-race-guide-step p {
    margin: 0;
    color: #617390;
    line-height: 1.7;
}

.site-race-summary-card {
    background: linear-gradient(180deg, #f8fbff, #eef4ff) !important;
}

.site-race-grid,
.site-race-history-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.site-race-card,
.site-race-history-card {
    padding: 18px;
    border-radius: 22px;
    background: #fff;
    border: 1px solid rgba(37, 162, 255, 0.08);
    box-shadow: 0 12px 28px rgba(10, 19, 39, 0.08);
}

.site-race-card-top,
.site-race-order-item,
.site-race-history-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.site-race-card-top img,
.site-race-order-item img {
    max-width: 110px;
    height: auto;
}

.site-race-card h3 {
    margin: 0 0 6px;
    font-size: 1.2rem;
    font-weight: 800;
    color: #132248;
}

.site-race-card p,
.site-race-history-head span,
.site-race-order-item small {
    margin: 0;
    color: #617390;
    line-height: 1.6;
}

.site-race-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 18px 0;
}

.site-race-metrics div {
    padding: 12px;
    border-radius: 16px;
    background: #eff4ff;
    text-align: center;
}

.site-race-metrics span {
    display: block;
    font-size: 0.82rem;
    color: #617390;
    margin-bottom: 4px;
}

.site-race-metrics strong {
    color: #132248;
    font-weight: 800;
}

.site-race-bet-row label {
    display: block;
    margin-bottom: 8px;
}

.site-race-bet-row input {
    width: 100%;
}

.site-race-meta-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    background: #f8fbff;
    margin-bottom: 14px;
}

.site-race-meta-line span {
    color: #617390;
    font-size: 0.86rem;
}

.site-race-meta-line strong {
    color: #132248;
    font-weight: 800;
    text-align: right;
}

.site-race-card-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
}

.site-race-card-actions small {
    color: #617390;
    line-height: 1.5;
}

.site-race-order {
    display: grid;
    gap: 12px;
    margin-top: 16px;
}

.site-race-order-item {
    justify-content: flex-start;
    padding: 10px 12px;
    background: #f8fbff;
    border-radius: 16px;
}

.site-race-order-item div strong {
    display: block;
    color: #132248;
    font-weight: 800;
}

.site-rewards-hero {
    background: linear-gradient(135deg, #f8fbff, #edf9ff) !important;
}

.site-rewards-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    align-items: stretch;
}

.site-reward-focus {
    margin: 0 0 12px;
    font-size: 1.8rem;
    font-weight: 800;
    color: #132248;
}

.site-progress-rail {
    height: 14px;
    border-radius: 999px;
    background: #e7eefc;
    overflow: hidden;
}

.site-reward-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 16px;
    background: #f5f8ff;
    border: 1px solid rgba(37, 162, 255, 0.08);
}

.site-reward-meta span {
    color: #617390;
    font-size: 0.88rem;
}

.site-reward-meta strong {
    color: #132248;
    font-weight: 800;
    text-align: right;
}

.site-wheel-card {
    overflow: hidden;
}

.site-wheel-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
    align-items: center;
}

.site-reward-wheel-wrap {
    position: relative;
    width: min(100%, 360px);
    margin: 0 auto;
    padding-top: 18px;
}

.site-reward-wheel-pointer {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
    border-top: 26px solid #132248;
    z-index: 3;
}

.site-reward-wheel {
    position: relative;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 12px solid rgba(255, 255, 255, 0.92);
    box-shadow: 0 18px 45px rgba(10, 19, 39, 0.14);
    transition: transform 4.5s cubic-bezier(0.18, 0.89, 0.32, 1.15);
    overflow: hidden;
    background: linear-gradient(135deg, #eef4ff, #dbe8ff);
}

.site-reward-wheel-labels {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.site-reward-wheel-label {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 94px;
    max-width: 94px;
    transform-origin: center center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #132248;
    font-size: 0.58rem;
    line-height: 1;
    pointer-events: none;
}

.site-reward-wheel-label strong {
    display: block;
    min-width: 48px;
    max-width: 100%;
    padding: 0.3rem 0.45rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 6px 14px rgba(11, 22, 46, 0.12);
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.site-reward-wheel-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 36px;
    color: #617390;
    font-weight: 700;
}

.site-reward-wheel-core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: #132248;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    letter-spacing: 0.04em;
    box-shadow: 0 10px 25px rgba(10, 19, 39, 0.28);
    border: 6px solid rgba(255, 255, 255, 0.88);
    z-index: 2;
}

.site-wheel-copy h3 {
    margin: 0 0 10px;
    font-size: 1.3rem;
    font-weight: 800;
    color: #132248;
    line-height: 1.25;
}

.site-wheel-copy p {
    margin: 0;
    color: #617390;
    line-height: 1.75;
}

.site-wheel-copy {
    min-width: 0;
    max-width: 760px;
    margin: 0 auto;
}

.site-wheel-prizes {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

.site-wheel-prizes-label {
    color: #617390;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.site-wheel-prize-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.site-wheel-prize-chip {
    display: inline-flex;
    flex-direction: column;
    gap: 3px;
    min-width: 120px;
    padding: 10px 12px;
    border: 1px solid rgba(37, 162, 255, 0.14);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(240, 246, 255, 0.96));
}

.site-wheel-prize-chip strong {
    color: #132248;
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1.2;
}

.site-wheel-prize-chip small {
    color: #617390;
    font-size: 0.78rem;
    line-height: 1.3;
}

.site-wheel-prize-chip.is-empty {
    color: #617390;
    font-weight: 700;
}

.site-wheel-celebration {
    position: relative;
    height: 0;
    overflow: visible;
    pointer-events: none;
}

.site-wheel-confetti {
    position: absolute;
    top: -8px;
    width: 10px;
    height: 18px;
    border-radius: 4px;
    animation: site-confetti-fall 2.4s cubic-bezier(0.19, 1, 0.22, 1) forwards;
    box-shadow: 0 8px 18px rgba(10, 19, 39, 0.12);
}

.site-reward-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
}

.site-reward-card {
    padding: 18px;
    border-radius: 22px;
    background: #fff;
    border: 1px solid rgba(37, 162, 255, 0.08);
    box-shadow: 0 12px 28px rgba(10, 19, 39, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.site-reward-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 34px rgba(10, 19, 39, 0.11);
}

.site-reward-card.is-unlocked {
    border-color: rgba(12, 195, 165, 0.32);
    background: linear-gradient(180deg, #fbfffe, #f3fffb);
}

.site-reward-card.is-claimed {
    border-color: rgba(31, 53, 94, 0.18);
    background: linear-gradient(180deg, #fbfcff, #f4f7fd);
}

.site-reward-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
}

.site-reward-card-head > div {
	min-width: 0;
	flex: 1 1 220px;
}

.site-reward-card-head span {
    display: block;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #617390;
    margin-bottom: 6px;
}

.site-reward-card-head h4 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 800;
    color: #132248;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.site-reward-card p {
    margin: 0;
    color: #617390;
    line-height: 1.7;
}

.site-reward-status {
    padding: 8px 12px;
    border-radius: 999px;
    background: #eef4ff;
    color: #1f355e;
    font-size: 0.78rem;
    font-weight: 800;
    white-space: normal;
    text-align: center;
}

.site-job-list {
    display: grid;
    gap: 18px;
}

.site-job-guide {
    padding: 22px;
    border-radius: 24px;
    background: linear-gradient(135deg, #132248, #1f3b6f);
    box-shadow: 0 18px 40px rgba(10, 19, 39, 0.16);
}

.site-job-guide-head h2 {
    margin: 0;
    color: #f8fbff;
    font-size: 1.7rem;
    font-weight: 800;
}

.site-job-guide-head p {
    margin: 10px 0 0;
    color: rgba(238, 244, 255, 0.82);
    line-height: 1.75;
}

.site-job-guide-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 18px;
}

.site-job-card {
    padding: 20px;
    border-radius: 22px;
    background: linear-gradient(180deg, #f8fbff, #eef4ff);
    border: 1px solid rgba(37, 162, 255, 0.08);
    box-shadow: 0 12px 28px rgba(10, 19, 39, 0.08);
}

.site-job-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.site-job-head span {
    display: block;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #617390;
    margin-bottom: 6px;
}

.site-job-head h3 {
    margin: 0;
    font-size: 1.3rem;
    line-height: 1.3;
    font-weight: 800;
    color: #132248;
}

.site-job-head strong {
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(12, 195, 165, 0.14);
    color: #0e8f79;
    font-size: 0.95rem;
    font-weight: 800;
    white-space: nowrap;
}

.site-job-body {
    color: #344564;
    line-height: 1.75;
    word-break: break-word;
}

.site-job-card-guide {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(240, 246, 255, 0.96));
}

.site-job-impact {
    margin: 14px 0 0;
    padding-top: 14px;
    border-top: 1px solid rgba(19, 34, 72, 0.08);
}

.site-job-impact strong {
    color: #132248;
}

.site-job-empty {
    padding: 18px;
    border-radius: 18px;
    background: rgba(37, 162, 255, 0.08);
    border: 1px dashed rgba(37, 162, 255, 0.28);
    color: #1f355e;
    line-height: 1.7;
}

.site-faq-guide-grid,
.site-blog-topic-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.site-faq-guide-card,
.site-blog-topic-card,
.site-blog-post-card {
    border-radius: 22px;
    border: 1px solid rgba(37, 162, 255, 0.08);
    box-shadow: 0 12px 28px rgba(10, 19, 39, 0.08);
}

.site-faq-guide-card,
.site-blog-topic-card {
    padding: 20px;
    background: linear-gradient(180deg, #f8fbff, #eef4ff);
}

.site-faq-guide-card h3,
.site-blog-topic-card h3 {
    margin: 0 0 8px;
    font-size: 1.08rem;
    font-weight: 800;
    color: #132248;
}

.site-faq-guide-card p,
.site-blog-topic-card p {
    margin: 0;
    color: #5b6885;
    line-height: 1.7;
}

.site-faq-accordion .card,
.site-blog-post-card {
    overflow: hidden;
    background: #fff;
}

.site-faq-accordion .card {
    border-radius: 20px;
    border: 1px solid rgba(37, 162, 255, 0.08);
    box-shadow: 0 12px 28px rgba(10, 19, 39, 0.08);
    margin-bottom: 14px;
}

.site-faq-accordion .card-header,
.site-blog-post-card .card-header {
    background: linear-gradient(180deg, #f8fbff, #eef4ff);
    border-bottom: 1px solid rgba(37, 162, 255, 0.08);
}

.site-faq-accordion .btn-link {
    width: 100%;
    text-align: left;
    color: #132248;
    font-weight: 800;
    text-decoration: none;
    white-space: normal;
}

.site-faq-accordion .btn-link:hover,
.site-faq-accordion .btn-link:focus {
    text-decoration: none;
}

.site-blog-post-card .card-body {
    background: #fff;
}

.site-blog-post-card .blockquote-footer {
    margin-top: 14px;
    color: #617390;
}

#blue-box .content .input-group-text,
#blue-box .content .custom-select,
#blue-box .content .form-control,
.site-form-card .input-group-text,
.site-form-card .custom-select,
.site-form-card .form-control {
    color: #22314f;
}

#blue-box,
#blue-box .content,
#blue-box .content p,
#blue-box .content li,
#blue-box .content label,
#blue-box .content small,
#blue-box .content .text-dark,
#blue-box .content .site-inline-note,
.site-form-card,
.site-form-card .content,
.site-table-card,
.site-table-card .content,
.site-job-card .text-dark,
.site-faq-accordion .card-body,
.site-faq-accordion .card-body.text-dark,
.site-blog-post-card,
.site-blog-post-card .card-body,
.site-blog-post-card .text-dark,
.table-primary.text-dark,
.table-secondary.text-dark,
tbody.table-primary,
tbody.table-secondary {
    color: #22314f !important;
}

#blue-box .content a.text-dark,
.site-blog-post-card a.text-dark,
.table-primary.text-dark a,
.table-secondary.text-dark a,
tbody.table-primary a,
tbody.table-secondary a {
    color: #163150 !important;
}

#blue-box .content .blockquote-footer,
.site-blog-post-card .blockquote-footer,
#blue-box .content .text-muted,
.site-form-card .form-text,
.site-form-card .form-text.text-white,
.site-table-card .form-text,
.table-primary.text-dark .text-muted,
.table-secondary.text-dark .text-muted {
    color: #617390 !important;
}

#blue-box .btn-primary,
#blue-box .btn-danger,
.site-form-card .btn-primary,
.site-form-card .btn-danger,
.site-table-card .btn-primary,
.site-table-card .btn-danger,
#blue-box input[type="submit"].btn,
.site-form-card input[type="submit"].btn,
.site-table-card input[type="submit"].btn {
    border: 0;
    border-radius: 999px;
    padding: 0.78rem 1.35rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    box-shadow: 0 12px 24px rgba(10, 19, 39, 0.12);
}

#blue-box .btn-primary,
.site-form-card .btn-primary,
.site-table-card .btn-primary,
#blue-box input[type="submit"].btn-primary,
.site-form-card input[type="submit"].btn-primary,
.site-table-card input[type="submit"].btn-primary {
    background: linear-gradient(135deg, #19c37d, #0fb86a);
    color: #081325;
}

#blue-box .btn-primary:hover,
.site-form-card .btn-primary:hover,
.site-table-card .btn-primary:hover,
#blue-box input[type="submit"].btn-primary:hover,
.site-form-card input[type="submit"].btn-primary:hover,
.site-table-card input[type="submit"].btn-primary:hover {
    background: linear-gradient(135deg, #26cf89, #14c176);
    color: #081325;
}

#blue-box .btn-danger,
.site-form-card .btn-danger,
.site-table-card .btn-danger,
#blue-box input[type="submit"].btn-danger,
.site-form-card input[type="submit"].btn-danger,
.site-table-card input[type="submit"].btn-danger {
    background: linear-gradient(135deg, #ff8d7a, #f05e52);
    color: #fff;
}

.site-table-card .pagination {
    margin-top: 18px;
}

.site-table-card .page-link,
#blue-box .page-link {
    color: #163150;
    border-color: rgba(22, 49, 80, 0.12);
    background: #fff;
}

.site-table-card .page-item.active .page-link,
#blue-box .page-item.active .page-link {
    background: #132248;
    border-color: #132248;
    color: #fff;
}

.site-table-card .page-item.disabled .page-link,
#blue-box .page-item.disabled .page-link {
    color: #8190ab;
    background: #f6f9ff;
}

@keyframes site-confetti-fall {
    0% {
        opacity: 0;
        transform: translate3d(0, -10px, 0) rotate(0deg);
    }
    15% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate3d(0, 180px, 0) rotate(540deg);
    }
}

.site-reward-status.is-unlocked {
    background: rgba(12, 195, 165, 0.16);
    color: #0e8f79;
}

.site-reward-status.is-claimed {
    background: rgba(19, 34, 72, 0.1);
    color: #132248;
}

.site-form-card {
    height: 100%;
}

.site-danger-card {
    background: linear-gradient(180deg, #fff7f7, #fff1f1) !important;
}

.site-danger-card .title {
    color: #8a2222 !important;
}

.site-action-grid {
    margin-top: 14px;
    gap: 12px;
}

.site-action-tile,
.site-social-tile {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 18px;
    text-decoration: none;
    transition: 0.2s ease;
}

.site-action-tile {
    background: #eff4ff;
    color: #16305d;
    border: 1px solid rgba(37, 162, 255, 0.08);
    flex: 1 1 calc(50% - 12px);
    justify-content: center;
}

.site-action-tile:hover,
.site-social-tile:hover {
    text-decoration: none;
    transform: translateY(-1px);
}

.site-connect-strip {
    margin-top: 18px;
    gap: 16px;
}

.site-social-tile {
    background: #fff;
    color: #16305d;
    border: 1px solid rgba(37, 162, 255, 0.08);
    flex: 1 1 220px;
}

.site-social-tile .site-social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f2f6ff;
    color: #16305d;
    font-size: 1.15rem;
    flex: 0 0 40px;
    transition: background 0.2s ease, color 0.2s ease;
}

.site-social-tile.is-telegram .site-social-icon   { background: var(--brand-telegram-soft);  color: var(--brand-telegram); }
.site-social-tile.is-youtube .site-social-icon    { background: var(--brand-youtube-soft);   color: var(--brand-youtube); }
.site-social-tile.is-playstore .site-social-icon  { background: var(--brand-playstore-soft); color: var(--brand-playstore); }
.site-social-tile.is-facebook .site-social-icon   { background: var(--brand-facebook-soft);  color: var(--brand-facebook); }

.site-social-tile:hover .site-social-icon {
    filter: brightness(0.96);
}

/* Inline SVG brand icons — inherit color from the surrounding tile/link so the
   brand tokens above remain the single color source. */
.site-social-tile .site-social-icon .ow-social-svg,
.site-footer-social-link .ow-social-svg {
    display: block;
    width: 60%;
    height: 60%;
    fill: currentColor;
    transition: transform 0.18s ease;
}
.site-footer-social-link .ow-social-svg {
    width: 20px;
    height: 20px;
}
.site-footer-social-link:hover .ow-social-svg {
    transform: scale(1.05);
}

.site-footer-social {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    padding: 18px 24px 4px;
}

.site-footer-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #dce7ff;
    font-size: 1.05rem;
    text-decoration: none;
    transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.site-footer-social-link:hover,
.site-footer-social-link:focus {
    text-decoration: none;
    transform: translateY(-2px);
    color: #fff;
}

.site-footer-social-link.is-telegram:hover  { background: var(--brand-telegram);  border-color: var(--brand-telegram); }
.site-footer-social-link.is-youtube:hover   { background: var(--brand-youtube);   border-color: var(--brand-youtube); }
.site-footer-social-link.is-playstore:hover { background: var(--brand-playstore); border-color: var(--brand-playstore); }
.site-footer-social-link.is-facebook:hover  { background: var(--brand-facebook);  border-color: var(--brand-facebook); }

/* Phase 5 — Daily Check-in + Games & Rewards */
.site-checkin-card {
    background: linear-gradient(135deg, #fff7ea 0%, #ffffff 70%);
    border: 1px solid #ffe0b2;
}
.site-checkin-ladder {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 10px;
    margin: 18px 0 14px;
}
.site-checkin-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 12px 6px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    background: #fafafa;
    color: #6b7280;
    text-align: center;
    transition: all .2s ease;
    min-height: 84px;
}
.site-checkin-day-label { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; font-weight: 600; }
.site-checkin-day-amount { font-size: 14px; color: #111827; }
.site-checkin-day-icon { font-size: 18px; opacity: .6; }
.site-checkin-day.is-claimed {
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
    border-color: #10b981;
    color: #065f46;
}
.site-checkin-day.is-claimed .site-checkin-day-amount { color: #065f46; }
.site-checkin-day.is-claimed .site-checkin-day-icon { color: #10b981; opacity: 1; }
.site-checkin-day.is-active {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border-color: #f59e0b;
    color: #92400e;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(245, 158, 11, .25);
}
.site-checkin-day.is-active .site-checkin-day-amount { color: #92400e; font-weight: 700; }
.site-checkin-day.is-active .site-checkin-day-icon { color: #f59e0b; opacity: 1; }
.site-checkin-action {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.site-checkin-action .site-primary-btn[disabled] {
    opacity: .55;
    cursor: not-allowed;
    pointer-events: none;
}
.site-checkin-action .site-inline-note { margin: 0; }

.site-games-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-top: 14px;
}
.site-game-tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 18px;
    border-radius: 14px;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #111827;
    text-decoration: none;
    transition: all .2s ease;
    min-height: 120px;
}
.site-game-tile:hover {
    text-decoration: none;
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(17, 24, 39, .08);
    border-color: transparent;
}
.site-game-tile strong { font-size: 15px; }
.site-game-tile small { color: #6b7280; font-size: 12px; line-height: 1.4; }
.site-game-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    font-size: 18px;
    margin-bottom: 4px;
}
.site-game-tile.is-wheel  .site-game-icon { background: #fef3c7; color: #d97706; }
.site-game-tile.is-horse  .site-game-icon { background: #fee2e2; color: #dc2626; }
.site-game-tile.is-mining .site-game-icon { background: #dbeafe; color: #2563eb; }
.site-game-tile.is-wheel:hover  { background: linear-gradient(135deg, #fffbeb, #fef3c7); }
.site-game-tile.is-horse:hover  { background: linear-gradient(135deg, #fef2f2, #fee2e2); }
.site-game-tile.is-mining:hover { background: linear-gradient(135deg, #eff6ff, #dbeafe); }

@media (max-width: 575px) {
    .site-checkin-ladder {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .site-checkin-day { min-height: 76px; padding: 10px 4px; }
    .site-checkin-day-amount { font-size: 13px; }
}

.site-offers-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.site-offer-card-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.site-offer-card-grid.is-single-wall {
    grid-template-columns: minmax(0, 340px);
    justify-content: start;
}

.site-offer-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(147, 167, 207, 0.16);
    box-shadow: 0 20px 40px rgba(10, 19, 39, 0.18);
    text-decoration: none;
    color: #122140;
    transition: 0.22s ease;
    animation: site-rise 0.6s ease;
}

.site-offer-card:hover,
.site-offer-card.is-active {
    text-decoration: none;
    color: #122140;
    transform: translateY(-3px);
    border-color: rgba(25, 195, 125, 0.34);
    box-shadow: 0 26px 50px rgba(10, 19, 39, 0.22);
}

.site-offer-card img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    border-radius: 16px;
}

.site-offer-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(11, 19, 39, 0.82);
    color: #fff;
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-weight: 700;
}

.site-offer-frame-wrap {
    padding: 16px;
    background: linear-gradient(180deg, #0f1a35, #132248) !important;
}

.site-offer-frame-wrap .content {
    padding: 0 !important;
    background: transparent !important;
}

.site-offer-frame-wrap iframe {
    min-height: 78vh;
    background-color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.site-footer {
    margin-top: auto;
    padding: 12px 0 28px;
}

.site-footer .container {
    padding-top: 12px;
    padding-bottom: 12px;
    background: rgba(16, 23, 45, 0.72);
    border: 1px solid var(--site-border);
    border-radius: 24px;
    box-shadow: var(--site-shadow);
    backdrop-filter: blur(12px);
}

.site-footer-grid {
    grid-template-columns: 1.3fr 1fr 1fr 1fr;
    padding: 24px;
    color: #dce7ff;
}

.site-footer-brand {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}

.site-footer-copy,
.site-footer-grid small,
.site-footer-grid a,
.site-footer-bar {
    color: #91a1c4;
}

.site-footer-grid h6 {
    color: #fff;
    font-weight: 700;
    margin-bottom: 14px;
}

.site-footer-grid a {
    display: block;
    text-decoration: none;
    margin-bottom: 10px;
}

.site-footer-grid a:hover {
    color: #fff;
    text-decoration: none;
}

.site-footer-bar {
    justify-content: space-between;
    padding: 0 24px 16px;
    border-top: 1px solid rgba(147, 167, 207, 0.16);
    padding-top: 16px;
    font-size: 0.9rem;
}

.box-shadow.box-style > #blue-box,
.box-shadow.box-style > #home-box,
.box-shadow.box-style > #home-exchange-box,
.box-shadow.box-style > #home-bottom-box {
    margin-top: 0;
}

#blue-box {
    background: linear-gradient(180deg, #f8fbff, #eef4ff) !important;
    color: var(--site-text-dark) !important;
}

#blue-box .title,
#home-exchange-box .title,
#home-bottom-box .title {
    background: transparent !important;
    color: #16284b !important;
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    text-transform: none !important;
    text-shadow: none !important;
    letter-spacing: -0.01em !important;
    max-width: none !important;
    border: 0 !important;
    margin: 0 0 14px !important;
    padding: 0 8px !important;
    box-sizing: border-box !important;
    text-align: left !important;
}

#blue-box .content,
#home-box .content,
#home-exchange-box .content,
#home-bottom-box .content {
    padding: 22px !important;
    color: #344564;
    line-height: 1.7;
}

.form-control,
.custom-select,
.input-group-text,
select.form-control {
    min-height: 48px;
    border-radius: 14px !important;
    border: 1px solid rgba(104, 127, 171, 0.22) !important;
    box-shadow: none !important;
}

.form-control,
.custom-select,
select.form-control {
    background: rgba(255, 255, 255, 0.92) !important;
    color: #11203e !important;
    padding-left: 14px;
    padding-right: 14px;
}

.form-control:focus,
.custom-select:focus,
select.form-control:focus {
    border-color: rgba(31, 134, 255, 0.42) !important;
    box-shadow: 0 0 0 4px rgba(31, 134, 255, 0.12) !important;
}

.input-group-text {
    background: #eff4ff !important;
    color: #3a5d92 !important;
    padding: 0 14px;
}

label {
    font-weight: 700;
    color: #22314f;
    margin-bottom: 8px;
}

.btn,
input[type="submit"],
button[type="submit"] {
    border-radius: 14px !important;
    font-weight: 700;
    padding: 10px 18px;
    border: 0;
    box-shadow: none;
}

.btn-primary,
input.btn-primary,
.btn-success,
input.btn-success {
    background: linear-gradient(135deg, var(--site-primary), #58efb0) !important;
    color: #062817 !important;
}

.btn-secondary {
    background: #edf3ff !important;
    color: #18345e !important;
    border: 1px solid rgba(31, 134, 255, 0.12) !important;
}

.alert {
    border: 0 !important;
    border-radius: 16px !important;
    padding: 14px 16px;
    box-shadow: none !important;
}

.site-page-shell > .alert:first-child,
.site-dashboard-shell > .alert:first-child {
    margin-bottom: 16px;
}

.site-mobile-alert-toast {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 1085;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 12px 12px 14px;
    box-shadow: 0 18px 34px rgba(12, 24, 44, 0.2) !important;
}

.site-mobile-alert-toast__body,
.site-mobile-alert-toast__close {
    border: 0;
    background: transparent;
    padding: 0;
    color: inherit;
}

.site-mobile-alert-toast__body {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
    font: inherit;
}

.site-mobile-alert-toast__body strong,
.site-mobile-alert-toast__body b {
    color: inherit;
}

.site-mobile-alert-toast__body .alert {
    margin: 0;
    padding: 0;
    background: transparent !important;
    box-shadow: none !important;
}

.site-mobile-alert-source-hidden {
    display: none !important;
}

.site-mobile-alert-toast__close {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    font-size: 1.25rem;
    line-height: 1;
    opacity: 0.72;
}

.site-mobile-alert-toast__close:hover,
.site-mobile-alert-toast__close:focus,
.site-mobile-alert-toast__body:hover,
.site-mobile-alert-toast__body:focus {
    opacity: 1;
    outline: none;
}

.table {
    border-radius: 18px;
    overflow: hidden;
    background: #fff;
}

.table thead th,
.table tfoot th {
    background: #132248 !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    font-weight: 700;
    vertical-align: middle;
}

.table tbody tr {
    background: transparent;
    transition: background-color 0.2s ease;
}

.table tbody tr:hover {
    background: #f6f9ff;
}

.table td,
.table th {
    padding: 12px 14px;
    border-top-color: rgba(104, 127, 171, 0.14) !important;
}

.table-primary,
.table-primary > td,
.table-primary > th {
    background: #f8fbff !important;
    color: #132248 !important;
}

.modal-content {
    border: 1px solid rgba(147, 167, 207, 0.18);
    border-radius: 24px;
    box-shadow: 0 30px 60px rgba(9, 16, 31, 0.35);
}

.navbar,
.footer .navbar {
    background-color: transparent;
}

@keyframes site-rise {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 1199px) {
    .site-marketing-grid,
    .site-offer-card-grid,
    .site-footer-grid,
    .site-account-grid,
    .site-race-grid,
    .site-race-history-grid,
    .site-reward-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

	.site-reward-wheel-wrap {
		width: min(100%, 340px);
	}
}

@media (max-width: 991px) {
    .site-topbar,
    .site-nav-shell,
    .site-offers-header,
    .site-dashboard-top,
    .site-hero-card,
    .site-task-board,
    .site-showcase-grid,
    .site-stat-band,
    .site-dashboard-grid {
        display: grid;
        grid-template-columns: 1fr;
    }

    .site-nav-shell {
        margin-top: 14px;
    }

    .site-nav-links,
    .site-nav-actions {
        width: 100%;
    }

    .site-offer-card-grid,
    .site-marketing-grid,
    .site-footer-grid,
    .site-summary-strip,
    .site-account-grid,
    .site-rewards-grid {
        grid-template-columns: 1fr 1fr;
    }

    .site-dashboard-stat {
        min-width: 0;
        flex: 1 1 180px;
    }
}

@media (max-width: 767px) {
    body.site-body {
        padding: 0 0 14px;
    }

    .site-header {
        padding-top: 8px;
    }

    .site-topbar {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: 12px;
        padding: 10px 14px;
        border-radius: 18px;
    }

    .site-brand {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        grid-column: 1 / 3;
        align-items: center;
        gap: 10px;
        min-width: 0;
    }

    .site-brand-copy {
        min-width: 0;
        align-items: center;
        text-align: center;
    }

    .site-brand-mark {
        width: 40px;
        height: 40px;
        border-radius: 14px;
        font-size: 17px;
    }

    .site-brand-copy strong {
        font-size: 0.94rem;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .site-brand-copy small {
        font-size: 0.72rem;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .site-nav-toggle {
        grid-column: 3;
        grid-row: 1;
        margin-left: 0;
        justify-self: end;
        padding: 7px 9px;
        border-radius: 12px;
    }

    .site-topbar > .navbar-collapse {
        grid-column: 1 / -1;
    }

    .site-topbar,
    .site-footer .container,
    .site-hero-card,
    .site-surface-card,
    .site-showcase-text,
    .site-showcase-logos,
    .site-offers-header,
    .site-offer-frame-wrap,
    .site-dashboard-hero {
        padding: 18px;
    }

    .main-section {
        max-width: 100%;
    }

    .site-marketing-grid,
    .site-offer-card-grid,
    .site-footer-grid,
    .site-stat-band,
    .site-summary-strip,
    .site-buy-grid,
    .site-funding-grid,
    .site-rewards-grid,
    .site-account-grid,
    .site-race-grid,
    .site-race-history-grid,
    .site-race-metrics,
    .site-faq-guide-grid,
    .site-blog-topic-grid,
    .site-job-guide-grid,
    .site-reward-card-grid {
        grid-template-columns: 1fr;
    }

    .site-gift-preview,
    .site-funding-callout,
    .site-dashboard-buy-banner,
    .site-race-guide-step,
    .site-race-card-top,
    .site-race-history-head,
    .site-race-nav,
    .site-job-head,
    .site-race-meta-line,
    .site-race-card-actions,
    .site-reward-card-head,
    .site-reward-meta {
        flex-direction: column;
        align-items: flex-start;
    }

	.site-wheel-layout {
		grid-template-columns: 1fr;
	}

	.site-reward-wheel-wrap {
		width: min(100%, 280px);
	}

	.site-reward-wheel-label strong {
        min-width: 24px;
        font-size: 0.56rem;
        max-width: 72px;
	}

    .site-task-item,
    .site-leaderboard-row,
    .site-table-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .site-leaderboard-metrics {
        align-items: flex-start;
    }

    .site-nav-link,
    .site-ghost-btn,
    .site-primary-btn,
    .site-balance-pill,
    .site-social-tile {
        width: 100%;
        justify-content: center;
    }

    .site-balance-pill {
        align-items: center;
    }

    .site-dashboard-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .site-sidebar-actions {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .site-sidebar-action {
        min-height: 76px;
        padding: 12px 8px;
    }

    .site-sidebar-action span {
        font-size: 0.74rem;
    }

    .site-streak-track {
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        overflow-x: auto;
        padding-bottom: 4px;
        scrollbar-width: thin;
    }

    .site-streak-day {
        flex: 0 0 min(58px, calc((100vw - 72px) / 5.4));
        padding: 10px 4px;
        border-radius: 14px;
    }

    .site-streak-day strong {
        font-size: 0.72rem;
    }

    .site-streak-day span {
        font-size: 0.95rem;
    }

    .site-action-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .site-content-page,
    .site-offers-page {
        padding-left: 8px;
        padding-right: 8px;
    }

    .site-action-tile {
        width: auto;
        min-height: 74px;
        padding: 14px 12px;
    }

    .site-action-tile span {
        text-align: center;
    }

    .site-phone-mockup {
        transform: none;
    }

    .site-mini-offer {
        grid-template-columns: 1fr;
    }

    #offer {
        height: 78vh !important;
    }

    .site-footer-bar {
        flex-direction: column;
        gap: 10px;
    }

    .site-page-shell,
    .site-dashboard-shell {
        padding: 14px !important;
    }

    .site-page-hero .content,
    .site-form-card .content,
    .site-table-card .content {
        padding: 16px;
    }

    .site-sidebar-card,
    .site-profile-card,
    .site-offer-spotlight {
        padding: 16px;
    }

    .site-dashboard-stat strong,
    .site-affiliate-metric strong {
        font-size: 1.45rem;
    }

    .site-offers-summary,
    .site-funding-callout-meta,
    .site-hero-highlight {
        padding: 14px 16px;
    }

    .site-buy-pack-card,
    .site-affiliate-metric,
    .site-offer-focus-copy,
    .site-offer-focus-points div,
    .site-task-item,
    .site-leaderboard-row,
    .site-tip-item {
        padding: 14px;
    }

    .site-hero-actions,
    .site-affiliate-actions,
    .site-sidebar-actions {
        gap: 12px;
    }

    .site-inline-stats,
    .site-summary-strip,
    .site-affiliate-metrics,
    .site-spotlight-meta {
        gap: 14px;
    }

    .site-inline-stats {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
        margin-top: 22px;
    }

    .site-inline-stats div {
        min-width: 0;
    }

    .site-action-tile,
    .site-social-tile,
    .site-primary-btn,
    .site-ghost-btn {
        min-height: 46px;
    }
}

@media (max-width: 575px) {
    .site-topbar,
    .site-footer .container,
    .site-hero-card,
    .site-surface-card,
    .site-showcase-text,
    .site-showcase-logos,
    .site-offers-header,
    .site-offer-frame-wrap,
    .site-dashboard-hero {
        padding: 15px;
    }

    .site-page-shell,
    .site-dashboard-shell {
        padding: 12px !important;
    }

    .site-page-hero h1,
    .site-dashboard-hero h1,
    .site-hero-copy h1 {
        font-size: 1.5rem;
        line-height: 1.2;
    }

    .site-dashboard-stat,
    .site-affiliate-metric,
    .site-metric-card {
        padding: 14px;
    }

    .site-phone-screen {
        padding: 14px;
    }

    .site-mock-earn-card {
        padding: 12px;
    }
}

@keyframes tickerMove {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
    }
}
 
.ticker-news {
    display: inline-block;
    margin-right: 20px;
    vertical-align: middle;
}

.ticker-avatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin-right: 5px;
}

/* Add this CSS to your stylesheet */
.table {
    width: 100%;
    margin-bottom: 1rem;
    color: #212529;
    border-collapse: collapse;
    font-size: 0.875rem;
}
.table th,
.table td {
    padding: 0.75rem;
    vertical-align: top;
    border-top: 1px solid #dee2e6;
}
.table thead th {
    vertical-align: bottom;
    border-bottom: 2px solid #dee2e6;
    background-color: #f8f9fa;
}
.table tbody+tbody {
    border-top: 2px solid #dee2e6;
}

.site-offers-header-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
}

.site-offers-summary {
    min-width: 250px;
    padding: 16px 18px;
    border-radius: 20px;
    background: rgba(9, 17, 35, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.site-offers-summary span,
.site-offers-summary strong,
.site-offers-summary small {
    display: block;
}

.site-offers-summary span {
    color: #9ad2ff;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.site-offers-summary strong {
    margin: 8px 0 6px;
    color: #ffffff;
    font-size: 1rem;
}

.site-offers-summary small {
    color: rgba(255, 255, 255, 0.76);
    line-height: 1.55;
}

.site-offer-focus {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.8fr);
    gap: 18px;
    padding: 22px;
    margin-top: 22px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(242, 248, 255, 0.96));
}

.site-offer-focus-copy {
    position: relative;
    padding: 18px 20px 18px 24px;
    border-radius: 22px;
    background: #ffffff;
    border: 1px solid rgba(104, 138, 181, 0.14);
}

.site-offer-focus-copy .site-offer-badge {
    position: static;
    display: inline-flex;
    margin-bottom: 14px;
}

.site-offer-focus-copy h2 {
    margin: 0 0 10px;
    color: #163150;
    font-size: 1.45rem;
}

.site-offer-focus-copy p {
    margin: 0;
    color: #65748b;
    line-height: 1.7;
}

.site-offer-focus-points {
    display: grid;
    gap: 14px;
}

.site-offer-focus-points div {
    padding: 18px;
    border-radius: 20px;
    background: linear-gradient(135deg, #102445, #173764);
    color: #ffffff;
}

.site-offer-focus-points strong,
.site-offer-focus-points span {
    display: block;
}

.site-offer-focus-points strong {
    margin-bottom: 6px;
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8ec9ff;
}

.site-offer-focus-points span {
    line-height: 1.55;
}

.site-earning-tips {
    display: grid;
    gap: 12px;
}

.site-tip-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 16px;
    background: #f4f8fd;
    color: #173353;
}

.site-tip-item i {
    margin-top: 3px;
    color: #2d8ae1;
}

.site-tip-item span {
    line-height: 1.55;
    color: #66758b;
}

@media (max-width: 991px) {
    .site-offers-header,
    .site-offer-focus {
        flex-direction: column;
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .site-offers-header-side {
        align-items: stretch;
    }

    .site-offers-summary {
        min-width: 0;
    }
}

@media (max-width: 767px) {
    .site-affiliate-banner-preview,
    .site-offer-focus,
    .site-withdraw-history,
    .site-form-card {
        padding-left: 16px;
        padding-right: 16px;
    }

    .site-offers-page {
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    .site-offers-page > .row {
        margin-left: 0;
        margin-right: 0;
    }

    .site-offers-main-column {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .site-offers-header,
    .site-offer-frame-wrap,
    .site-offer-focus {
        padding: 12px;
    }

    .site-offers-main-column .site-offers-shell {
        gap: 14px;
    }

    .site-offers-main-column .site-offer-card-grid {
        padding-left: 10px;
        padding-right: 10px;
    }

    .site-offer-frame-wrap {
        padding: 8px;
    }

    .site-offers-main-column .site-offer-frame-wrap {
        border-left: 0 !important;
        border-radius: 0 !important;
        border-right: 0 !important;
        padding: 0;
    }

    .site-offer-frame-wrap iframe {
        min-height: 74vh;
        border-radius: 16px;
    }

    .site-offers-main-column .site-offer-frame-wrap iframe {
        border-radius: 0;
        display: block;
        min-height: 82vh;
        width: 100% !important;
    }
}

.site-dropdown-menu {
    min-width: 280px;
    padding: 14px;
    border: 1px solid rgba(28, 65, 111, 0.12);
    border-radius: 18px;
    box-shadow: 0 24px 44px rgba(17, 38, 68, 0.18);
    z-index: 1090;
    top: calc(100% + 10px) !important;
    bottom: auto !important;
    left: auto !important;
    right: 0 !important;
    margin-top: 0;
    transform: none !important;
    will-change: auto;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
}

.site-dropdown-header {
    padding: 4px 4px 12px;
}

.site-dropdown-header strong {
    display: block;
    font-size: 0.95rem;
    color: #163150;
}

.site-dropdown-header small {
    display: block;
    margin-top: 4px;
    color: #6b7a90;
    line-height: 1.5;
}

.site-dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    margin-bottom: 6px;
    border-radius: 14px;
    color: #1b3554;
    font-weight: 600;
}

.site-dropdown-item:last-child {
    margin-bottom: 0;
}

.site-dropdown-item i {
    width: 18px;
    color: #2d8ae1;
}

.site-dropdown-item span {
    flex: 1;
}

.site-dropdown-item:hover,
.site-dropdown-item:focus {
    background: #edf5ff;
    color: #163150;
}

.site-dropdown-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    border-radius: 999px;
    background: #d9ecff;
    color: #16508d;
    font-size: 0.78rem;
}

.site-dropdown-divider {
    margin: 8px 0;
}

.site-sidebar-intro {
    margin: 14px 0 16px;
    padding: 12px 14px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(24, 78, 138, 0.08), rgba(85, 162, 217, 0.14));
}

.site-sidebar-intro strong,
.site-sidebar-intro small {
    display: block;
}

.site-sidebar-intro strong {
    color: #163150;
    font-size: 0.92rem;
}

.site-sidebar-intro small {
    margin-top: 4px;
    color: #66758b;
    line-height: 1.5;
}

.site-balance-cell small {
    display: block;
    margin: 8px 0 4px;
    color: #6d7b90;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.site-sidebar-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 16px;
}

.site-sidebar-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 86px;
    padding: 12px 10px;
    border-radius: 16px;
    background: #f4f8fd;
    color: #183657;
    font-weight: 700;
    text-align: center;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.site-sidebar-action:hover {
    background: #e6f1ff;
    color: #173a60;
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(28, 57, 94, 0.1);
}

@media (max-width: 991.98px) {
    .site-dashboard-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .site-dashboard-stat span,
    .site-dashboard-stat strong {
        white-space: normal;
    }
}

.site-sidebar-action i {
    font-size: 1.1rem;
    color: #2d8ae1;
}

.site-sidebar-action span {
    font-size: 0.8rem;
    line-height: 1.35;
}

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

.site-spotlight-meta div {
    padding: 10px 12px;
    border-radius: 14px;
    background: #f3f7fc;
}

.site-spotlight-meta strong,
.site-spotlight-meta span {
    display: block;
}

.site-spotlight-meta strong {
    margin-bottom: 4px;
    color: #163150;
    font-size: 0.8rem;
}

.site-spotlight-meta span {
    color: #6b7890;
    font-size: 0.8rem;
}

.site-affiliate-hero {
    align-items: stretch;
}

.site-affiliate-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.site-affiliate-metric {
    padding: 20px 22px;
    border: 1px solid rgba(34, 84, 140, 0.12);
    border-radius: 22px;
    background: linear-gradient(180deg, #ffffff, #f6faff);
    box-shadow: 0 18px 34px rgba(21, 47, 81, 0.08);
}

.site-affiliate-metric span,
.site-affiliate-metric strong,
.site-affiliate-metric small {
    display: block;
}

.site-affiliate-metric span {
    color: #6b7b91;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.site-affiliate-metric strong {
    margin: 10px 0 8px;
    color: #17385d;
    font-size: 1.8rem;
    line-height: 1.1;
}

.site-affiliate-metric small {
    color: #718096;
    line-height: 1.5;
}

.site-affiliate-grid {
    align-items: stretch;
}

.site-affiliate-card,
.site-affiliate-banner-card {
    border-radius: 24px;
}

.site-affiliate-list {
    margin: 0;
    padding-left: 20px;
    color: #4e5e75;
}

.site-affiliate-list li {
    margin-bottom: 10px;
    line-height: 1.6;
}

.site-note {
    color: #6f7d92;
    line-height: 1.6;
}

.site-inline-input {
    min-height: 52px;
    border-radius: 16px;
}

.site-affiliate-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.site-affiliate-actions .site-primary-btn,
.site-affiliate-actions .site-ghost-btn {
    min-height: 48px;
}

.site-affiliate-actions .site-primary-btn i,
.site-affiliate-actions .site-ghost-btn i {
    margin-right: 8px;
}

.site-affiliate-banner-preview {
    display: flex;
    justify-content: center;
    padding: 24px;
    margin: 18px 0;
    border-radius: 20px;
    background: linear-gradient(135deg, #eff6ff, #f8fbff);
}

.site-affiliate-code-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.site-affiliate-code-grid label {
    display: block;
    margin-bottom: 8px;
    color: #163150;
    font-weight: 700;
}

.site-affiliate-code-grid textarea {
    min-height: 126px;
    border-radius: 16px;
}

.site-withdraw-stack {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.site-withdraw-stack > * {
    margin-top: 0 !important;
}

.site-withdraw-grid {
    align-items: stretch;
}

.site-withdraw-grid > * {
    min-width: 0;
}

.site-withdraw-grid > #blue-box,
.site-withdraw-history#blue-box {
    margin-top: 0;
    min-height: 0;
}

.site-withdraw-history {
    overflow: visible;
}

@media (max-width: 1199px) {
    .site-affiliate-metrics,
    .site-affiliate-code-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 991px) {
    .site-spotlight-meta,
    .site-affiliate-metrics {
        grid-template-columns: 1fr;
    }

    .site-sidebar-actions {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .site-page-shell > .alert:first-child,
    .site-dashboard-shell > .alert:first-child {
        margin-bottom: 14px;
    }

    .site-mobile-alert-toast {
        left: 10px;
        right: 10px;
        bottom: 10px;
        padding: 12px;
        font-size: 0.92rem;
    }

    .site-table-card,
    .site-withdraw-history {
        overflow: visible;
    }

    .site-page-shell .table,
    .site-dashboard-shell .table,
    .site-table-card .table {
        width: 100%;
        table-layout: fixed;
    }

    .site-page-shell .table-responsive-sm,
    .site-dashboard-shell .table-responsive-sm,
    .site-table-card .table-responsive-sm {
        display: block;
        width: 100%;
        overflow-x: visible;
    }

    .site-page-shell .table th,
    .site-page-shell .table td,
    .site-dashboard-shell .table th,
    .site-dashboard-shell .table td,
    .site-table-card .table th,
    .site-table-card .table td {
        padding: 10px 8px;
        font-size: 0.76rem;
        white-space: normal;
        word-break: break-word;
        overflow-wrap: anywhere;
        hyphens: auto;
        line-height: 1.35;
        text-align: center;
    }

    .site-page-shell .table thead th,
    .site-page-shell .table tfoot th,
    .site-dashboard-shell .table thead th,
    .site-dashboard-shell .table tfoot th,
    .site-table-card .table thead th,
    .site-table-card .table tfoot th {
        font-size: 0.7rem;
    }

    .site-page-shell .table tfoot,
    .site-dashboard-shell .table tfoot,
    .site-table-card .table tfoot {
        display: none;
    }

    .site-dropdown-menu {
        min-width: 240px;
        max-width: min(320px, calc(100vw - 32px));
        top: calc(100% + 8px) !important;
        right: 0 !important;
        left: auto !important;
    }

    .site-affiliate-actions {
        flex-direction: column;
    }

    .site-affiliate-actions .site-primary-btn,
    .site-affiliate-actions .site-ghost-btn {
        width: 100%;
        justify-content: center;
    }

    .site-activity-table {
        table-layout: auto;
    }

    .site-activity-table .site-leaderboard-user {
        align-items: flex-start;
        justify-content: flex-start !important;
    }
}

@media (max-width: 575px) {
    .site-nav-actions {
        position: relative;
    }

    .site-dashboard-stats,
    .site-action-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .site-content-page,
    .site-offers-page {
        padding-left: 6px;
        padding-right: 6px;
    }

    .site-header {
        padding-top: 6px;
    }

    .site-topbar {
        padding: 9px 12px;
        gap: 10px;
        border-radius: 16px;
    }

    .site-brand-copy strong {
        font-size: 0.88rem;
    }

    .site-brand-copy small {
        font-size: 0.68rem;
    }

    .site-dropdown,
    .site-dropdown.show {
        width: 100%;
    }

    .site-dropdown > .site-ghost-btn {
        width: 100%;
        justify-content: center;
    }

    .site-dropdown-menu {
        position: fixed !important;
        width: auto;
        min-width: 0;
        max-width: none;
        top: 78px !important;
        bottom: auto !important;
        right: 12px !important;
        left: 12px !important;
        margin-top: 0;
        max-height: calc(100vh - 96px);
        overflow-y: auto;
        box-shadow: 0 18px 32px rgba(17, 38, 68, 0.14);
        overscroll-behavior: contain;
    }
}

@media (max-width: 389px) {
    .site-dashboard-stats,
    .site-action-grid,
    .site-sidebar-actions {
        grid-template-columns: 1fr;
    }

    .site-streak-track {
        gap: 6px;
    }

    .site-streak-day {
        flex-basis: 52px;
    }
}

.table .thead-dark th {
    color: #fff;
    background-color: #343a40;
    border-color: #454d55;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.05);
}

.table-hover tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.075);
}

.table-primary,
.table-primary > th,
.table-primary > td {
    background-color: #fff;
}

.table-primary th,
.table-primary td,
.table-primary thead th,
.table-primary tbody+tbody {
    border-color: #7abaff;
}

.table-secondary,
.table-secondary > th,
.table-secondary > td {
    background-color: #d6d8db;
}

.table-secondary th,
.table-secondary td,
.table-secondary thead th,
.table-secondary tbody+tbody {
    border-color: #b3b7bb;
}




/* ============================================
   Phase 5 polish — Wheel hero, theme toggle, dark mode
   ============================================ */

.site-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.25);
    background: rgba(255,255,255,.08);
    color: #fff;
    cursor: pointer;
    transition: all .2s ease;
    margin-right: 8px;
}
.site-theme-toggle:hover { background: rgba(255,255,255,.18); transform: translateY(-1px); }
.site-theme-toggle i { font-size: 16px; }

.site-wheel-hero {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 20px 24px;
    border-radius: 16px;
    margin-bottom: 18px;
    background: linear-gradient(135deg, #fff7ea 0%, #ffe8c2 100%);
    border: 1px solid #fcd9a3;
    overflow: hidden;
    position: relative;
}
.site-wheel-hero.is-ready {
    background: linear-gradient(135deg, #fef3c7 0%, #fbbf24 100%);
    border-color: #f59e0b;
    box-shadow: 0 10px 30px rgba(245, 158, 11, .25);
}
.site-wheel-hero-visual {
    flex: 0 0 auto;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.site-wheel-hero-disc {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: conic-gradient(#f59e0b 0 25%, #ef4444 25% 50%, #10b981 50% 75%, #3b82f6 75% 100%);
    position: relative;
    box-shadow: inset 0 0 0 4px #fff, 0 6px 18px rgba(0,0,0,.15);
    animation: owWheelSpin 14s linear infinite;
}
.site-wheel-hero.is-ready .site-wheel-hero-disc { animation-duration: 4s; }
.site-wheel-hero-disc-pin {
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 0; height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 12px solid #111;
}
@keyframes owWheelSpin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.site-wheel-hero-body { flex: 1; min-width: 0; }
.site-wheel-hero-body h3 { margin: 4px 0 6px; font-size: 20px; color: #111827; }
.site-wheel-hero-body p { margin: 0 0 10px; color: #4b5563; }
.site-wheel-hero-body .site-primary-btn,
.site-wheel-hero-body .site-ghost-btn { margin-top: 2px; }

@media (max-width: 575px) {
    .site-wheel-hero { flex-direction: column; text-align: center; padding: 18px; }
    .site-wheel-hero-body { width: 100%; }
}

/* --- Dark mode overlay ---
   Applied when html[data-theme='dark']. Keeps existing light theme as default.
   Strategy: override background + text on surfaces and cards; leave brand-coloured
   accents (wheel, check-in active day, social tiles) intact for contrast. */
html[data-theme='dark'] body.site-body,
html[data-theme='dark'] body {
    background: #0f172a !important;
    color: #e2e8f0;
}
html[data-theme='dark'] .bg-white,
html[data-theme='dark'] .site-surface-card,
html[data-theme='dark'] .site-task-card,
html[data-theme='dark'] .box-style {
    background: #1e293b !important;
    color: #e2e8f0;
    border-color: #334155 !important;
}
html[data-theme='dark'] .site-surface-card h3,
html[data-theme='dark'] .site-surface-card h2,
html[data-theme='dark'] .site-surface-card strong,
html[data-theme='dark'] .site-table-head h3 { color: #f1f5f9; }
html[data-theme='dark'] .site-surface-card p,
html[data-theme='dark'] .site-surface-card small,
html[data-theme='dark'] .site-inline-note,
html[data-theme='dark'] .site-leaderboard-row small,
html[data-theme='dark'] .site-game-tile small { color: #94a3b8; }
html[data-theme='dark'] .site-dashboard-shell { background: #1e293b !important; }
html[data-theme='dark'] .site-dashboard-hero { background: linear-gradient(135deg,#1e3a8a 0%,#312e81 100%); }
html[data-theme='dark'] .site-dashboard-stat { background: rgba(255,255,255,.06); color: #e2e8f0; }
html[data-theme='dark'] .site-task-item,
html[data-theme='dark'] .site-streak-day,
html[data-theme='dark'] .site-checkin-day {
    background: #0f172a;
    border-color: #334155;
    color: #cbd5e1;
}
html[data-theme='dark'] .site-checkin-day.is-claimed {
    background: linear-gradient(135deg,#064e3b,#065f46);
    border-color: #10b981;
    color: #d1fae5;
}
html[data-theme='dark'] .site-checkin-day.is-active {
    background: linear-gradient(135deg,#78350f,#92400e);
    border-color: #f59e0b;
    color: #fef3c7;
}
html[data-theme='dark'] .site-game-tile { background: #0f172a; border-color: #334155; color: #e2e8f0; }
html[data-theme='dark'] .site-action-tile { background: #0f172a; color: #e2e8f0; border-color: #334155; }
html[data-theme='dark'] .site-action-tile:hover { background: #1e293b; }
html[data-theme='dark'] .form-control { background: #0f172a; border-color: #334155; color: #e2e8f0; }
html[data-theme='dark'] .site-leaderboard-row { border-color: #334155; }
html[data-theme='dark'] .site-leaderboard-row.is-current { background: rgba(59,130,246,.15); }
html[data-theme='dark'] .site-section-kicker { color: #93c5fd; }
html[data-theme='dark'] .site-rank-pill { background: rgba(255,255,255,.1); color: #fde68a; }
html[data-theme='dark'] .site-wheel-hero { background: linear-gradient(135deg,#1e293b 0%,#334155 100%); border-color: #475569; }
html[data-theme='dark'] .site-wheel-hero.is-ready { background: linear-gradient(135deg,#78350f 0%,#f59e0b 100%); }
html[data-theme='dark'] .site-wheel-hero-body h3 { color: #fef3c7; }
html[data-theme='dark'] .site-wheel-hero-body p { color: #e2e8f0; }
html[data-theme='dark'] .site-primary-btn { background: #f59e0b; color: #111827; }
html[data-theme='dark'] .site-ghost-btn { border-color: #64748b; color: #e2e8f0; }
html[data-theme='dark'] .site-ghost-btn:hover { background: rgba(255,255,255,.08); color: #fff; }
html[data-theme='dark'] .alert-info { background: #1e3a8a; border-color: #3b82f6; color: #dbeafe; }
html[data-theme='dark'] .alert-danger { background: #7f1d1d; border-color: #ef4444; color: #fecaca; }
html[data-theme='dark'] footer,
html[data-theme='dark'] .site-footer,
html[data-theme='dark'] .site-footer-layout { background: #0b1120 !important; color: #cbd5e1; }
html[data-theme='dark'] a { color: #93c5fd; }
html[data-theme='dark'] a:hover { color: #bfdbfe; }

/* ============================================
   Phase 6 — Gamification (XP bar, Quests, Badges)
   ============================================ */
.site-level-card { background: linear-gradient(135deg,#eef2ff 0%,#ffffff 70%); border: 1px solid #c7d2fe; }
.site-level-multiplier { color: #4f46e5; font-size: 13px; font-weight: 600; }
.site-xp-bar {
    position: relative;
    width: 100%;
    height: 12px;
    background: #e5e7eb;
    border-radius: 999px;
    overflow: hidden;
    margin-top: 8px;
}
.site-xp-bar.is-slim { height: 6px; }
.site-xp-bar-fill {
    height: 100%;
    background: linear-gradient(90deg,#6366f1,#8b5cf6,#ec4899);
    border-radius: inherit;
    transition: width .4s ease;
}
.site-level-bonus { font-size: 14px; }

.site-quests-card { }
.site-quest-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.site-quest-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    background: #fafafa;
    transition: all .2s ease;
}
.site-quest-item.is-ready { border-color: #10b981; background: linear-gradient(135deg,#ecfdf5,#ffffff); }
.site-quest-item.is-claimed { opacity: .7; background: #f3f4f6; }
.site-quest-info { flex: 1; min-width: 0; }
.site-quest-info strong { display: block; font-size: 14px; color: #111827; }
.site-quest-info small { color: #6b7280; font-size: 12px; }
.site-quest-period { color: #9ca3af; }
.site-quest-action { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.site-quest-reward { color: #d97706; font-size: 14px; }
.site-quest-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #e5e7eb;
    color: #4b5563;
    font-size: 12px;
    font-weight: 600;
}
.site-quest-badge.is-claimed { background: #d1fae5; color: #065f46; }
.site-quest-claim { padding: 6px 14px; font-size: 13px; }

.site-badges-card { }
.site-badges-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
    margin-top: 12px;
}
.site-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 14px 8px;
    border-radius: 12px;
    background: #fafafa;
    border: 1px solid #e5e7eb;
    text-align: center;
    min-height: 110px;
}
.site-badge strong { font-size: 12px; color: #111827; line-height: 1.2; }
.site-badge small { color: #6b7280; font-size: 11px; }
.site-badge-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #e5e7eb;
    color: #9ca3af;
    font-size: 18px;
}
.site-badge.is-unlocked {
    background: linear-gradient(135deg,#fef3c7,#fde68a);
    border-color: #f59e0b;
    box-shadow: 0 6px 18px rgba(245,158,11,.18);
}
.site-badge.is-unlocked .site-badge-icon { background: #f59e0b; color: #fff; }
.site-badge.is-unlocked strong { color: #78350f; }
.site-badge.is-locked { opacity: .75; }

@media (max-width: 575px) {
    .site-quest-item { flex-direction: column; align-items: stretch; }
    .site-quest-action { flex-direction: row; align-items: center; justify-content: space-between; }
    .site-badges-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Dark mode additions */
html[data-theme='dark'] .site-level-card { background: linear-gradient(135deg,#1e1b4b 0%,#312e81 100%); border-color: #4338ca; }
html[data-theme='dark'] .site-level-multiplier { color: #a5b4fc; }
html[data-theme='dark'] .site-xp-bar { background: #334155; }
html[data-theme='dark'] .site-quest-item { background: #0f172a; border-color: #334155; }
html[data-theme='dark'] .site-quest-item.is-ready { background: linear-gradient(135deg,#064e3b,#1e293b); border-color: #10b981; }
html[data-theme='dark'] .site-quest-item.is-claimed { background: #1e293b; opacity: .55; }
html[data-theme='dark'] .site-quest-info strong { color: #f1f5f9; }
html[data-theme='dark'] .site-quest-info small,
html[data-theme='dark'] .site-quest-period { color: #94a3b8; }
html[data-theme='dark'] .site-quest-badge { background: #334155; color: #cbd5e1; }
html[data-theme='dark'] .site-quest-badge.is-claimed { background: #064e3b; color: #a7f3d0; }
html[data-theme='dark'] .site-badge { background: #0f172a; border-color: #334155; }
html[data-theme='dark'] .site-badge strong { color: #f1f5f9; }
html[data-theme='dark'] .site-badge small { color: #94a3b8; }
html[data-theme='dark'] .site-badge-icon { background: #1e293b; color: #64748b; }
html[data-theme='dark'] .site-badge.is-unlocked { background: linear-gradient(135deg,#78350f,#92400e); border-color: #f59e0b; }
html[data-theme='dark'] .site-badge.is-unlocked strong { color: #fef3c7; }

/* === Phase 7 — Social Proof === */
.site-proof-ticker{display:flex;align-items:center;gap:12px;background:linear-gradient(90deg,#ecfeff,#eef2ff);border:1px solid #c7d2fe;border-radius:12px;padding:8px 12px;margin-bottom:14px;overflow:hidden;position:relative;min-width:0}
.site-proof-ticker-label{display:flex;align-items:center;gap:6px;font-weight:600;color:#4338ca;white-space:nowrap;font-size:13px;flex:0 0 auto;z-index:2;background:linear-gradient(90deg,#ecfeff 70%,rgba(238,242,255,0));padding-right:14px}
.site-proof-ticker-label .fa{color:#f59e0b}
.site-proof-ticker-track{display:flex;gap:18px;white-space:nowrap;animation:siteProofTicker 45s linear infinite;will-change:transform;flex:1 1 0;min-width:0}
.site-proof-ticker:hover .site-proof-ticker-track{animation-play-state:paused}
.site-proof-ticker-item{display:inline-flex;align-items:center;gap:6px;color:#334155;font-size:13px}
.site-proof-ticker-item strong{color:#0f172a}
.site-proof-ticker-item b{color:#059669;font-weight:700}
.site-proof-ticker-item em{font-style:normal;color:#64748b;font-size:12px;background:#fff;padding:1px 6px;border-radius:8px;border:1px solid #e2e8f0}
.site-proof-flag{width:18px;height:12px;border-radius:2px;object-fit:cover}
@keyframes siteProofTicker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
[dir=rtl] .site-proof-ticker-track{animation-direction:reverse}

.site-proof-card .site-proof-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.site-proof-stat{text-align:center;padding:14px;background:linear-gradient(135deg,#f0fdf4,#ecfdf5);border:1px solid #bbf7d0;border-radius:12px}
.site-proof-stat span{display:block;font-size:12px;color:#047857;font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}
.site-proof-stat strong{display:block;font-size:22px;color:#064e3b;font-weight:700}
@media(max-width:640px){.site-proof-card .site-proof-stats{grid-template-columns:1fr}}

.site-weekly-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.site-weekly-row{display:flex;align-items:center;gap:12px;padding:10px 12px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;transition:all .2s}
.site-weekly-row:hover{background:#f1f5f9}
.site-weekly-row.is-gold{background:linear-gradient(90deg,#fef3c7,#fde68a);border-color:#fbbf24}
.site-weekly-row.is-silver{background:linear-gradient(90deg,#f1f5f9,#e2e8f0);border-color:#94a3b8}
.site-weekly-row.is-bronze{background:linear-gradient(90deg,#fed7aa,#fdba74);border-color:#fb923c}
.site-weekly-rank{font-weight:700;color:#64748b;min-width:34px;font-size:15px}
.site-weekly-row.is-gold .site-weekly-rank{color:#92400e}
.site-weekly-row.is-silver .site-weekly-rank{color:#475569}
.site-weekly-row.is-bronze .site-weekly-rank{color:#9a3412}
.site-weekly-user{flex:1;display:flex;flex-direction:column}
.site-weekly-user strong{color:#0f172a;font-size:14px}
.site-weekly-user small{color:#64748b;font-size:12px}
.site-weekly-coins{font-weight:700;color:#059669;font-size:15px;white-space:nowrap}
.site-weekly-coins small{color:#64748b;font-weight:500;font-size:11px;margin-left:2px}

html[data-theme='dark'] .site-proof-ticker{background:linear-gradient(90deg,#1e293b,#0f172a);border-color:#334155}
html[data-theme='dark'] .site-proof-ticker-label{color:#a5b4fc}
html[data-theme='dark'] .site-proof-ticker-item{color:#cbd5e1}
html[data-theme='dark'] .site-proof-ticker-item strong{color:#f1f5f9}
html[data-theme='dark'] .site-proof-ticker-item em{background:#0f172a;color:#94a3b8;border-color:#334155}
html[data-theme='dark'] .site-proof-stat{background:linear-gradient(135deg,#064e3b,#065f46);border-color:#047857}
html[data-theme='dark'] .site-proof-stat span{color:#6ee7b7}
html[data-theme='dark'] .site-proof-stat strong{color:#ecfdf5}
html[data-theme='dark'] .site-weekly-row{background:#1e293b;border-color:#334155}
html[data-theme='dark'] .site-weekly-row:hover{background:#0f172a}
html[data-theme='dark'] .site-weekly-user strong{color:#f1f5f9}
html[data-theme='dark'] .site-weekly-user small,html[data-theme='dark'] .site-weekly-coins small{color:#94a3b8}

/* === R4 — Explore card / clean up === */
.site-action-grid-wide{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.site-action-grid-wide .site-action-tile{position:relative;padding:14px 12px}
.site-action-grid-wide .site-action-tile i{font-size:18px;margin-bottom:6px;display:block;color:#6366f1}
.site-action-grid-wide .site-action-tile:hover i{color:#4338ca}
.site-action-badge{position:absolute;top:6px;right:6px;background:#ef4444;color:#fff;font-size:10px;font-weight:700;padding:2px 6px;border-radius:10px;font-style:normal;min-width:18px;text-align:center}
[dir=rtl] .site-action-badge{right:auto;left:6px}
.site-ref-collapsible{margin-top:14px;border-top:1px dashed #e2e8f0;padding-top:12px}
.site-ref-collapsible summary{cursor:pointer;font-weight:600;color:#4338ca;list-style:none;font-size:13px;display:flex;align-items:center;gap:6px}
.site-ref-collapsible summary::-webkit-details-marker{display:none}
.site-ref-collapsible[open] summary{margin-bottom:6px}
html[data-theme='dark'] .site-ref-collapsible{border-top-color:#334155}
html[data-theme='dark'] .site-ref-collapsible summary{color:#a5b4fc}
html[data-theme='dark'] .site-action-grid-wide .site-action-tile i{color:#a5b4fc}


/* === R5 — Affiliates page polish + missing hero/card styles === */
.site-page-hero{display:flex;flex-wrap:wrap;align-items:center;gap:24px}
.site-page-hero > *{min-width:0}
.site-page-hero > div:first-child{flex:1 1 320px}
.site-page-hero p{line-height:1.6;margin:0}

.site-eyebrow{display:inline-block;padding:5px 12px;border-radius:999px;background:linear-gradient(135deg,#dbe7ff,#eff4ff);color:#2454a3;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;margin-bottom:10px;border:1px solid rgba(37,84,163,.18)}

.site-hero-highlight{flex:0 1 360px;display:flex;flex-direction:column;gap:6px;padding:18px 20px;border-radius:18px;background:linear-gradient(135deg,#0f1a35,#1f3a78);color:#e6edff;border:1px solid rgba(15,26,53,.2);box-shadow:0 18px 34px rgba(15,26,53,.18)}
.site-hero-highlight strong{display:block;color:#fff;font-size:1.05rem;word-break:break-all;line-height:1.4}
.site-hero-highlight small{color:rgba(231,237,255,.78);line-height:1.5}
.site-hero-highlight-label{display:inline-block;color:#cfe0ff;font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;margin-bottom:2px}

.site-card-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid rgba(34,84,140,.1)}
.site-card-heading > div{min-width:0;flex:1}
.site-card-heading h3{margin:0;color:#17385d;font-size:1.15rem;font-weight:700;line-height:1.35}
.site-card-kicker{display:inline-block;color:#2563eb;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;margin-bottom:6px}

.site-affiliate-hero{align-items:stretch}
.site-affiliate-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:stretch}
.site-affiliate-code-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:14px}
.site-affiliate-code-grid label{display:block;color:#17385d;font-size:.85rem;font-weight:600;margin-bottom:6px}
.site-affiliate-code-grid textarea{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.78rem;line-height:1.5;background:#f6faff;border-color:rgba(34,84,140,.15)}
.site-affiliate-banner-preview{display:flex;justify-content:center;padding:18px;background:linear-gradient(135deg,#eef4ff,#f8fbff);border:1px dashed rgba(34,84,140,.18);border-radius:16px;margin:6px 0 4px}
.site-affiliate-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.site-affiliate-list{margin:0;padding-left:1.2em;color:#4e5e75}
[dir=rtl] .site-affiliate-list{padding-left:0;padding-right:1.2em}

@media(max-width:991px){
  .site-page-hero{padding:22px;gap:18px}
  .site-affiliate-grid,.site-affiliate-code-grid{grid-template-columns:1fr}
  .site-hero-highlight{flex:1 1 100%}
}

/* RTL polish for the new hero/card primitives */
[dir=rtl] .site-card-heading{text-align:right}
[dir=rtl] .site-affiliate-code-grid textarea{direction:ltr;text-align:left}

/* Dark mode overrides */
html[data-theme='dark'] .site-eyebrow{background:linear-gradient(135deg,#1e293b,#0f172a);color:#93c5fd;border-color:#334155}
html[data-theme='dark'] .site-hero-highlight{background:linear-gradient(135deg,#0b1226,#1e3a8a)}
html[data-theme='dark'] .site-card-heading{border-bottom-color:#334155}
html[data-theme='dark'] .site-card-heading h3{color:#f1f5f9}
html[data-theme='dark'] .site-card-kicker{color:#93c5fd}
html[data-theme='dark'] .site-affiliate-code-grid label{color:#e2e8f0}
html[data-theme='dark'] .site-affiliate-code-grid textarea{background:#0f172a;border-color:#334155;color:#e2e8f0}
html[data-theme='dark'] .site-affiliate-banner-preview{background:linear-gradient(135deg,#0f172a,#1e293b);border-color:#334155}
html[data-theme='dark'] .site-affiliate-list{color:#cbd5e1}

/* Targeted: dashboard-hero stat tiles need stronger contrast in dark mode.
   The existing rgba(255,255,255,.06) on a blue gradient hero made the
   numbers hard to read. Brighten tile background + strong color only. */
html[data-theme='dark'] .site-dashboard-hero{
  background:linear-gradient(135deg,#1e3a8a 0%,#312e81 100%) !important;
}
html[data-theme='dark'] .site-dashboard-hero h1{color:#f8fafc !important}
html[data-theme='dark'] .site-dashboard-hero .site-section-kicker{color:#bfdbfe !important}
html[data-theme='dark'] .site-dashboard-stat{
  background:rgba(15,23,42,.55) !important;
  border-color:rgba(148,163,184,.25) !important;
}
html[data-theme='dark'] .site-dashboard-stat span{color:#cbd5e1 !important}
html[data-theme='dark'] .site-dashboard-stat strong{color:#fef3c7 !important}