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

html {
font-size:16px;
-webkit-text-size-adjust:100%;
scroll-behavior:smooth
}

body {
font-family:'Inter','Segoe UI',Roboto,Helvetica,Arial,sans-serif;
line-height:1.6;
background:linear-gradient(135deg,#000 0%,#1a0000 25%,#0a0a0a 50%,#1a0000 75%,#000 100%);
background-attachment:fixed;
color:#fff;
overflow-x:hidden;
min-height:100vh;
position:relative
}

.heading,h1.heading,h2.heading,h3.heading,h4.heading,h5.heading,h6.heading {
font-family:'Inter',sans-serif;
font-weight:700;
line-height:1.2;
margin:0 0 1.5rem;
text-align:center;
position:relative;
background:linear-gradient(135deg,#d4af37 0%,#f9f295 50%,#d4af37 100%);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
text-shadow:0 4px 20px #d4af374d;
animation:headingGlow 3s ease-in-out infinite alternate;
background-color:#8b000033;
backdrop-filter:blur(20px);
border:1px solid #d4af374d;
border-radius:15px;
margin:1.5rem auto;
max-width:90%;
box-shadow:0 8px 32px #0006 inset 0 1px 0 #d4af374d;
transition:all .3s ease
}

h1.heading {
font-size:clamp(1.8rem,5vw,4rem);
padding:clamp(1.2rem,3vw,2rem) clamp(1.5rem,4vw,3rem);
border-radius:20px;
margin:2rem auto
}

h2.heading {
font-size:clamp(1.5rem,4.5vw,3.5rem);
padding:clamp(1rem,2.8vw,1.8rem) clamp(1.3rem,3.5vw,2.5rem);
border-radius:18px;
margin:1.8rem auto
}

h3.heading {
font-size:clamp(1.3rem,4vw,3rem);
padding:clamp(0.9rem,2.5vw,1.6rem) clamp(1.2rem,3vw,2.2rem);
border-radius:16px;
margin:1.6rem auto
}

h4.heading {
font-size:clamp(1.1rem,3.5vw,2.5rem);
padding:clamp(0.8rem,2.3vw,1.4rem) clamp(1.1rem,2.8vw,2rem);
border-radius:14px;
margin:1.4rem auto
}

h5.heading {
font-size:clamp(1rem,3vw,2rem);
padding:clamp(0.7rem,2vw,1.2rem) clamp(1rem,2.5vw,1.8rem);
border-radius:12px;
margin:1.2rem auto
}

h6.heading {
font-size:clamp(0.9rem,2.5vw,1.5rem);
padding:clamp(0.6rem,1.8vw,1rem) clamp(0.9rem,2.2vw,1.5rem);
border-radius:10px;
margin:1rem auto
}

.heading:hover,h1.heading:hover,h2.heading:hover,h3.heading:hover,h4.heading:hover,h5.heading:hover,h6.heading:hover {
transform:translateY(-3px) scale(1.02);
box-shadow:0 12px 40px #d4af3766 inset 0 1px 0 #d4af3780;
text-shadow:0 5px 25px #d4af3799
}

.heading::before,h1.heading::before,h2.heading::before,h3.heading::before,h4.heading::before,h5.heading::before,h6.heading::before {
content:'';
position:absolute;
top:-2px;
left:-2px;
right:-2px;
bottom:-2px;
background:linear-gradient(135deg,#d4af37,#8b0000,#d4af37);
border-radius:inherit;
z-index:-1;
opacity:0;
transition:opacity .3s ease
}

.heading:hover::before,h1.heading:hover::before,h2.heading:hover::before,h3.heading:hover::before,h4.heading:hover::before,h5.heading:hover::before,h6.heading:hover::before {
opacity:.7;
animation:borderGlow 2s infinite
}

@media (min-width: 1440px) {
h1.heading {
font-size:1.8rem;
padding:1.5rem 2rem;
max-width:95%
}

h2.heading {
font-size:1.1rem;
padding:1.3rem 1.8rem;
max-width:95%
}

h3.heading {
font-size:1.1rem;
padding:1.2rem 1.6rem;
max-width:95%
}

h4.heading {
font-size:1.1rem;
padding:1rem 1.4rem;
max-width:95%
}

h5.heading {
font-size:1.1rem;
padding:.9rem 1.2rem;
max-width:95%
}

h6.heading {
font-size:1.1rem;
padding:.7rem 1rem;
max-width:95%
}
}

@media (min-width: 1024px) and (max-width: 1439px) {
h1.heading {
font-size:1.8rem;
padding:1.5rem 2rem;
max-width:95%
}

h2.heading {
font-size:1.1rem;
padding:1.3rem 1.8rem;
max-width:95%
}

h3.heading {
font-size:1.1rem;
padding:1.2rem 1.6rem;
max-width:95%
}

h4.heading {
font-size:1.1rem;
padding:1rem 1.4rem;
max-width:95%
}

h5.heading {
font-size:1.1rem;
padding:.9rem 1.2rem;
max-width:95%
}

h6.heading {
font-size:1.1rem;
padding:.7rem 1rem;
max-width:95%
}
}

@media (min-width: 768px) and (max-width: 1023px) {
h1.heading {
font-size:1.8rem;
padding:1.5rem 2rem;
max-width:95%
}

h2.heading {
font-size:1.1rem;
padding:1.3rem 1.8rem;
max-width:95%
}

h3.heading {
font-size:1.1rem;
padding:1.2rem 1.6rem;
max-width:95%
}

h4.heading {
font-size:1.1rem;
padding:1rem 1.4rem;
max-width:95%
}

h5.heading {
font-size:1.1rem;
padding:.9rem 1.2rem;
max-width:95%
}

h6.heading {
font-size:1.1rem;
padding:.7rem 1rem;
max-width:95%
}
}

@media (min-width: 480px) and (max-width: 767px) {
h1.heading {
font-size:2.1rem;
padding:1.2rem 1.5rem;
border-radius:15px
}

h2.heading {
font-size:1.1rem;
padding:1.1rem 1.4rem;
border-radius:13px
}

h3.heading {
font-size:1.1rem;
padding:1rem 1.3rem;
border-radius:12px
}

h4.heading {
font-size:1.1rem;
padding:.9rem 1.2rem;
border-radius:11px
}

h5.heading {
font-size:1.1rem;
padding:.8rem 1.1rem;
border-radius:10px
}

h6.heading {
font-size:1.1rem;
padding:.7rem 1rem;
border-radius:9px
}
}

@media (max-width: 479px) {
h1.heading {
font-size:1.8rem;
padding:1rem 1.2rem;
border-radius:12px;
max-width:98%
}

h2.heading {
font-size:1.1rem;
padding:.9rem 1.1rem;
border-radius:11px;
max-width:98%
}

h3.heading {
font-size:1.1rem;
padding:.8rem 1rem;
border-radius:10px;
max-width:98%
}

h4.heading {
font-size:1.1rem;
padding:.7rem .9rem;
border-radius:9px;
max-width:98%
}

h5.heading {
font-size:1.1rem;
padding:.6rem .8rem;
border-radius:8px;
max-width:98%
}

h6.heading {
font-size:1.1rem;
padding:.5rem .7rem;
border-radius:7px;
max-width:98%
}
}

h1:not(.no-style),h2:not(.no-style),h3:not(.no-style),h4:not(.no-style),h5:not(.no-style),h6:not(.no-style) {
font-family:'Inter',sans-serif;
font-weight:700;
line-height:1.2;
text-align:center;
background:linear-gradient(135deg,#d4af37 0%,#f9f295 50%,#d4af37 100%);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
text-shadow:0 3px 15px #d4af374d
}

.heading-xl {
font-size:clamp(2rem,6vw,5rem)!important
}

.heading-lg {
font-size:clamp(1.5rem,5vw,4rem)!important
}

.heading-md {
font-size:clamp(1.2rem,4vw,3rem)!important
}

.heading-sm {
font-size:clamp(1rem,3vw,2rem)!important
}

.heading-xs {
font-size:clamp(0.9rem,2.5vw,1.5rem)!important
}

.heading-gold {
background:linear-gradient(135deg,#d4af37 0%,#f9f295 100%)!important;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent
}

.heading-red {
background:linear-gradient(135deg,#8b0000 0%,#dc143c 100%)!important;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent
}

.heading-green {
background:linear-gradient(135deg,#0d5f0d 0%,#228b22 100%)!important;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent
}

@keyframes headingGlow {
from {
filter:brightness(1) contrast(1);
text-shadow:0 4px 20px #d4af374d
}

to {
filter:brightness(1.1) contrast(1.1);
text-shadow:0 4px 20px #d4af3799 0 0 30px #d4af3766
}
}

@keyframes borderGlow {
0%,100% {
opacity:.7;
transform:scale(1)
}

50% {
opacity:1;
transform:scale(1.01)
}
}

@media (prefers-reduced-motion: reduce) {
.heading,h1.heading,h2.heading,h3.heading,h4.heading,h5.heading,h6.heading {
animation:none;
transition:none
}
}

.header {
background:linear-gradient(135deg,#1a0000 0%,#300 50%,#0a0a0a 100%);
padding:12px 16px;
display:flex;
justify-content:space-between;
align-items:center;
position:sticky;
top:0;
z-index:1000;
border-bottom:2px solid #d4af37;
box-shadow:0 2px 20px #d4af3726;
backdrop-filter:blur(10px);
min-height:64px
}

.brand {
color:#fff;
text-decoration:none;
font-size:18px;
font-weight:600;
display:flex;
align-items:center;
transition:all .3s ease;
padding:8px 12px;
border-radius:8px;
background:#d4af371a;
border:1px solid #d4af3733;
flex-shrink:0
}

.brand b {
color:#d4af37;
margin-left:4px
}

.brand:hover,.brand:active {
background:#d4af3733;
transform:scale(1.02);
text-decoration:none;
color:#fff
}

.menu-toggle {
display:none;
background:none;
border:none;
color:#fff;
font-size:24px;
cursor:pointer;
padding:8px;
border-radius:6px;
transition:all .3s ease;
min-width:44px;
min-height:44px;
justify-content:center;
align-items:center
}

.menu-toggle:hover {
background:#d4af3726;
color:#d4af37
}

.menu-toggle span {
display:block;
width:25px;
height:3px;
background:currentColor;
margin:5px 0;
transition:all .3s ease;
border-radius:2px
}

.menu-toggle.active span:nth-child(1) {
transform:rotate(45deg) translate(6px,6px)
}

.menu-toggle.active span:nth-child(2) {
opacity:0
}

.menu-toggle.active span:nth-child(3) {
transform:rotate(-45deg) translate(7px,-6px)
}

.nav {
display:flex;
align-items:center;
gap:8px;
flex-wrap:wrap;
justify-content:flex-end
}

.nav a {
color:#e0e0e0;
text-decoration:none;
padding:10px 12px;
border-radius:6px;
font-size:14px;
font-weight:500;
transition:all .3s ease;
display:flex;
align-items:center;
gap:6px;
min-height:44px;
min-width:44px;
justify-content:center;
background:#ffffff0d;
border:1px solid #ffffff1a;
white-space:nowrap
}

.nav a:hover,.nav a:active {
background:#d4af3726;
color:#d4af37;
border-color:#d4af374d;
transform:translateY(-1px);
text-decoration:none
}

.side-drawer {
position:fixed;
top:0;
right:-100%;
width:280px;
height:100vh;
background:linear-gradient(180deg,#1a0000 0%,#300 50%,#0a0a0a 100%);
transition:right .3s ease;
z-index:1001;
border-left:2px solid #d4af37;
box-shadow:-5px 0 25px #d4af3733;
overflow-y:auto
}

.side-drawer.open {
right:0
}

.drawer-header {
padding:20px;
border-bottom:1px solid #d4af3733;
display:flex;
justify-content:space-between;
align-items:center
}

.drawer-title {
color:#fff;
font-size:20px;
font-weight:600
}

.drawer-title span {
color:#d4af37
}

.drawer-close {
background:none;
border:none;
color:#fff;
font-size:28px;
cursor:pointer;
padding:4px;
border-radius:4px;
transition:all .3s ease;
width:40px;
height:40px;
display:flex;
align-items:center;
justify-content:center
}

.drawer-close:hover {
background:#ffffff1a;
color:#d4af37
}

.drawer-nav {
padding:20px 0
}

.drawer-nav a {
display:flex;
align-items:center;
gap:12px;
padding:15px 20px;
color:#e0e0e0;
text-decoration:none;
font-size:16px;
font-weight:500;
transition:all .3s ease;
border-left:4px solid transparent
}

.drawer-nav a:hover {
background:#d4af371a;
color:#d4af37;
border-left-color:#d4af37
}

.drawer-nav a.active {
background:#d4af3726;
color:#d4af37;
border-left-color:#d4af37
}

.drawer-overlay {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:#00000080;
opacity:0;
visibility:hidden;
transition:all .3s ease;
z-index:1000
}

.drawer-overlay.open {
opacity:1;
visibility:visible
}

.nav a[href="user-profile.php"] {
background:#8b000026;
border-color:#d4af374d;
flex-direction:column;
gap:2px;
padding:6px 10px;
min-width:auto
}

.nav a[href="user-profile.php"]:hover {
background:#8b000040;
border-color:#d4af3780
}

.drawer-nav .profile-link {
background:#8b000026;
border-left-color:#d4af37!important;
color:#d4af37
}

.drawer-nav .profile-link:hover {
background:#8b000040;
color:#d4af37
}

.small {
font-size:15px;
color:#d4af37;
font-weight:400;
line-height:1.2
}

.avatar-mini {
width:24px;
height:24px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background:linear-gradient(45deg,#d4af37,#8b0000);
border:2px solid #d4af374d;
overflow:hidden;
flex-shrink:0
}

.avatar-mini img {
width:100%;
height:100%;
object-fit:cover;
border-radius:50%
}

.avatar-initial {
color:#fff;
font-size:10px;
font-weight:700;
text-transform:uppercase
}

.nav a[href="admin.php"] {
background:#8b000026;
border-color:#8b00004d;
color:#dc143c
}

.nav a[href="admin.php"]:hover {
background:#8b000040;
border-color:#8b000080;
color:#8b0000
}

.drawer-nav a[href="admin.php"] {
color:#dc143c
}

.drawer-nav a[href="admin.php"]:hover {
color:#8b0000;
border-left-color:#dc143c
}

.nav a[href="user-logout.php"] {
background:#8b00001a;
border-color:#8b000033;
color:#ff6b6b
}

.nav a[href="user-logout.php"]:hover {
background:#8b000033;
border-color:#8b000066;
color:#ff4757
}

.drawer-nav a[href="user-logout.php"] {
color:#ff6b6b
}

.drawer-nav a[href="user-logout.php"]:hover {
color:#ff4757;
border-left-color:#ff6b6b
}

.nav a[href="user-login.php"] {
background:#0d5f0d26;
border-color:#0d5f0d4d;
color:#4ade80
}

.nav a[href="user-login.php"]:hover {
background:#0d5f0d40;
border-color:#0d5f0d80;
color:#22c55e
}

.drawer-nav a[href="user-login.php"] {
color:#4ade80
}

.drawer-nav a[href="user-login.php"]:hover {
color:#22c55e;
border-left-color:#4ade80
}

.nav a[href="user-register.php"] {
background:#8b000026;
border-color:#8b00004d;
color:#d4af37
}

.nav a[href="user-register.php"]:hover {
background:#8b000040;
border-color:#8b000080;
color:#f9f295
}

.drawer-nav a[href="user-register.php"] {
color:#d4af37
}

.drawer-nav a[href="user-register.php"]:hover {
color:#f9f295;
border-left-color:#d4af37
}

@media (max-width: 768px) {
.menu-toggle {
display:flex
}

.nav {
display:none
}

.brand {
font-size:16px;
padding:6px 10px
}
}

@media (max-width: 480px) {
.header {
padding:10px 12px
}

.brand {
font-size:15px;
padding:5px 8px
}

.side-drawer {
width:100%;
right:-100%
}

.drawer-title {
font-size:18px
}
}

.header a:focus,.menu-toggle:focus,.drawer-close:focus {
outline:2px solid #d4af37;
outline-offset:2px
}

.header a:active,.menu-toggle:active {
transform:scale(0.98)
}

@media (min-width: 769px) {
.side-drawer,.drawer-overlay {
display:none
}
}

.logo-section {
background:linear-gradient(135deg,#1a0000 0%,#300 50%,#0a0a0a 100%);
border-bottom:2px solid #d4af374d;
padding:20px 16px;
text-align:center;
position:relative;
overflow:hidden
}

.logo-section::before {
content:'';
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:radial-gradient(circle at 50% 50%,#d4af371a 0%,transparent 70%);
pointer-events:none
}

.logo-container {
max-width:100%;
margin:0 auto;
position:relative;
z-index:1
}

.site-logo {
margin-bottom:12px
}

.logo-image {
position:relative;
display:inline-block
}

.logo-img {
max-width:256px;
max-height:256px;
width:auto;
height:auto;
border-radius:8px;
box-shadow:0 4px 15px #d4af374d;
transition:all .3s ease;
border:2px solid #d4af3733
}

.logo-img:hover {
transform:scale(1.05);
box-shadow:0 6px 20px #d4af3766;
border-color:#d4af3766
}

.logo-text-fallback {
display:none;
font-size:24px;
font-weight:700;
line-height:1.2;
text-transform:uppercase;
letter-spacing:1px;
background:linear-gradient(45deg,#d4af37,#dc143c);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
text-shadow:0 2px 10px #d4af374d
}

.logo-primary {
color:#d4af37
}

.logo-accent {
color:#dc143c;
margin-left:4px
}

.logo-img[src=""],.logo-img:not([src]),.logo-img[src="assets/logo.png"]:not([src$=".png"]),.logo-img[style*="display: none"] + .logo-text-fallback {
display:inline-block
}

.logo-tagline {
margin-bottom:10px
}

.tagline-text {
color:#e0e0e0;
font-size:13px;
font-weight:500;
margin:0;
background:#ffffff0d;
padding:6px 12px;
border-radius:15px;
display:inline-block;
border:1px solid #ffffff1a;
animation:glow-pulse 3s ease-in-out infinite
}

@keyframes glow-pulse {
0%,100% {
box-shadow:0 2px 8px #d4af3733
}

50% {
box-shadow:0 2px 15px #d4af3766
}
}

.logo-badge {
margin-top:8px
}

.badge-text {
color:#d4af37;
font-size:11px;
font-weight:600;
background:#d4af371a;
padding:4px 10px;
border-radius:12px;
border:1px solid #d4af374d;
display:inline-block;
text-transform:uppercase;
letter-spacing:.5px;
animation:sparkle 4s ease-in-out infinite
}

@keyframes sparkle {
0%,100% {
background:#d4af371a;
border-color:#d4af374d
}

50% {
background:#d4af3733;
border-color:#d4af3780
}
}

@media (max-width: 390px) {
.logo-section {
padding:16px 12px
}

.logo-img {
max-width:100px;
max-height:50px
}

.logo-text-fallback {
font-size:20px
}

.tagline-text {
font-size:12px;
padding:5px 10px
}

.badge-text {
font-size:10px;
padding:3px 8px
}
}

@media (max-width: 320px) {
.logo-section {
padding:14px 10px
}

.logo-img {
max-width:80px;
max-height:40px
}

.logo-text-fallback {
font-size:18px
}

.tagline-text {
font-size:11px;
padding:4px 8px
}

.badge-text {
font-size:9px;
padding:2px 6px
}
}

@media (max-height: 500px) and (orientation: landscape) {
.logo-section {
padding:12px 16px
}

.logo-img {
max-height:40px
}

.tagline-text {
font-size:11px
}

.badge-text {
font-size:10px
}
}

.logo-img[alt]:empty::after {
content:attr(alt);
display:block;
padding:20px;
background:#8b00001a;
border:1px solid #8b00004d;
border-radius:8px;
color:#ff6b6b;
font-size:12px;
text-align:center
}

.logo-section:hover .tagline-text {
color:#d4af37;
transform:translateY(-1px)
}

.logo-section:hover .badge-text {
color:#fff;
background:#d4af374d
}

.games-grid {
display:grid;
grid-template-columns:1fr;
gap:16px;
padding:16px;
max-width:100%
}

.game-card {
background:linear-gradient(135deg,#1a0000 0%,#300 100%);
border:1px solid #d4af3733;
border-radius:12px;
padding:16px;
box-shadow:0 4px 20px #0000004d;
transition:all .3s ease;
overflow:hidden;
position:relative
}

.game-card::before {
content:'';
position:absolute;
top:0;
left:0;
right:0;
height:2px;
background:linear-gradient(90deg,#d4af37,#dc143c,#d4af37);
opacity:.6
}

.game-card:hover {
border-color:#d4af3766;
transform:translateY(-2px);
box-shadow:0 6px 25px #d4af3726
}

.game-header {
text-align:center;
margin-bottom:16px;
padding-bottom:12px;
border-bottom:1px solid #ffffff1a
}

.game-name {
color:#fff;
font-size:25px;
font-weight:600;
margin:0 0 6px;
line-height:1.3
}

.game-time {
color:#d4af37;
font-size:13px;
font-weight:500;
margin-bottom:10px;
background:#d4af371a;
padding:4px 12px;
border-radius:12px;
display:inline-block
}

.chart-btn {
background:linear-gradient(135deg,#dc143c 0%,#8b0000 100%);
color:#fff;
text-decoration:none;
padding:8px 15px;
border-radius:20px;
font-size:13px;
font-weight:600;
display:inline-block;
transition:all .3s ease;
border:1px solid #d4af374d;
text-transform:uppercase;
letter-spacing:.5px
}

.chart-btn:hover {
background:linear-gradient(45deg,#dc143c,#8b0000);
transform:scale(1.05);
box-shadow:0 4px 15px #dc143c4d;
text-decoration:none;
color:#fff
}

.results-row {
display:grid;
grid-template-columns:repeat(3,1fr);
gap:10px
}

.result-box {
background:#ffffff0d;
border-radius:8px;
padding:12px 8px;
text-align:center;
border:1px solid #ffffff1a;
transition:all .3s ease
}

.result-label {
font-size:11px;
color:#bbb;
margin-bottom:6px;
font-weight:500;
text-transform:uppercase;
letter-spacing:.5px
}

.result-value {
font-size:14px;
font-weight:600
}

.result-box.yesterday {
border-left:3px solid #6b7280
}

.result-box.today {
border-left:3px solid #d4af37
}

.result-box.status {
border-left:3px solid #dc143c
}

.badge {
padding:4px 8px;
border-radius:6px;
font-size:12px;
font-weight:700;
display:inline-block;
min-width:30px;
text-align:center
}

.badge.ok {
background:linear-gradient(45deg,#0d5f0d,#228b22);
color:#fff;
box-shadow:0 2px 8px #0d5f0d4d
}

.badge.pending {
background:linear-gradient(45deg,#d4af37,#b8941f);
color:#1a1a1a;
box-shadow:0 2px 8px #d4af374d
}

.badge.empty {
background:#6b72804d;
color:#9ca3af;
border:1px solid #6b72804d
}

.badge.live {
background:linear-gradient(45deg,#dc143c,#8b0000);
color:#fff;
box-shadow:0 2px 8px #dc143c4d;
animation:pulse-live 2s infinite
}

.badge.ready {
background:linear-gradient(45deg,#8b0000,#600);
color:#fff;
box-shadow:0 2px 8px #8b00004d
}

.badge.wait {
background:#9ca3af4d;
color:#9ca3af;
border:1px solid #9ca3af4d
}

@keyframes pulse-live {
0%,100% {
box-shadow:0 2px 8px #dc143c4d
}

50% {
box-shadow:0 2px 15px #dc143c99
}
}

@media (min-width: 500px) {
.games-grid {
grid-template-columns:repeat(2,1fr);
gap:20px;
padding:20px
}
}

@media (min-width: 768px) {
.games-grid {
grid-template-columns:repeat(3,1fr)
}

.game-card {
padding:20px
}

.game-name {
font-size:25px
}

.chart-btn {
padding:10px 20px;
font-size:14px
}
}

@media (max-width: 350px) {
.games-grid {
padding:12px;
gap:12px
}

.game-card {
padding:12px
}

.game-name {
font-size:25px
}

.game-time {
font-size:12px;
padding:3px 10px
}

.chart-btn {
padding:6px 11px;
font-size:12px
}

.results-row {
gap:8px
}

.result-box {
padding:10px 6px
}

.result-label {
font-size:10px
}

.result-value {
font-size:13px
}

.badge {
font-size:11px;
padding:3px 6px
}
}

@media (max-height: 500px) and (orientation: landscape) {
.games-grid {
grid-template-columns:repeat(2,1fr);
gap:12px;
padding:12px
}

.game-card {
padding:12px
}

.game-header {
margin-bottom:10px;
padding-bottom:8px
}

.results-row {
gap:8px
}

.result-box {
padding:8px 6px
}
}

@media (hover: hover) {
.result-box:hover {
background:#ffffff14;
border-color:#d4af374d
}
}

.chart-btn:focus {
outline:2px solid #d4af37;
outline-offset:2px
}

.game-card.loading {
opacity:.7;
pointer-events:none
}

.game-card.loading::after {
content:'';
position:absolute;
top:50%;
left:50%;
width:20px;
height:20px;
margin:-10px 0 0 -10px;
border:2px solid #d4af374d;
border-top-color:#d4af37;
border-radius:50%;
animation:spin 1s linear infinite
}

@keyframes spin {
to {
transform:rotate(360deg)
}
}

.hero {
background:linear-gradient(135deg,#1a0000 0%,#300 100%);
border:1px solid #d4af3733;
border-radius:12px;
padding:16px;
margin:16px;
text-align:center
}

.hero form {
display:flex;
flex-direction:column;
gap:12px;
align-items:center
}

.hero form > div {
width:100%;
max-width:280px
}

.hero label {
color:#bbb;
font-size:12px;
font-weight:500;
text-transform:uppercase;
letter-spacing:.5px;
margin-bottom:6px;
display:block
}

.hero input {
width:100%;
background:#ffffff1a;
border:1px solid #d4af374d;
border-radius:8px;
padding:12px 16px;
color:#fff;
font-size:14px;
text-align:center
}

.hero input:focus {
outline:none;
border-color:#d4af37;
box-shadow:0 0 0 2px #d4af3733;
background:#ffffff26
}

.hero .btn {
background:linear-gradient(45deg,#d4af37,#b8941f);
color:#fff;
border:none;
padding:12px 24px;
border-radius:8px;
font-size:14px;
font-weight:600;
text-transform:uppercase;
letter-spacing:.5px;
transition:all .3s ease;
min-height:44px;
min-width:100px
}

.hero .btn:hover {
background:linear-gradient(45deg,#dc143c,#8b0000);
transform:translateY(-2px);
box-shadow:0 4px 15px #dc143c4d
}

.hero .small {
color:#888;
font-size:11px;
margin-top:8px
}

.hero .small b {
color:#d4af37
}

.marq {
background:#d4af371a;
border:1px solid #d4af3733;
border-radius:8px;
margin:16px;
padding:12px 0;
overflow:hidden;
white-space:nowrap;
position:relative
}

.marq::before,.marq::after {
content:'';
position:absolute;
top:0;
bottom:0;
width:20px;
z-index:2;
pointer-events:none
}

.marq::before {
left:0;
background:linear-gradient(to right,#1a0000,transparent)
}

.marq::after {
right:0;
background:linear-gradient(to left,#1a0000,transparent)
}

.marq .track {
color:#d4af37;
font-size:13px;
font-weight:600;
animation:scroll-left 20s linear infinite;
padding:0 20px;
text-transform:uppercase;
letter-spacing:1px
}

@keyframes scroll-left {
0% {
transform:translateX(100%)
}

100% {
transform:translateX(-100%)
}
}

.table-wrap {
margin:16px;
border-radius:12px;
text-align:center;
overflow:hidden;
box-shadow:0 4px 20px #0000004d;
border:1px solid #d4af3733;
background:#1a0000;
position:relative
}

.table {
width:100%;
border-collapse:collapse;
font-size:13px;
background:transparent
}

.table-month {
min-width:100%;
overflow-x:auto;
display:block;
white-space:nowrap
}

.table-month thead,.table-month tbody,.table-month tr {
display:table;
width:100%;
table-layout:fixed;
color:#fff
}

.table thead {
background:linear-gradient(135deg,#d4af37 0%,#b8941f 100%)
}

.table th {
padding:12px 8px;
color:#000;
font-weight:600;
font-size:12px;
text-align:center;
border-right:1px solid #0003;
text-transform:uppercase;
letter-spacing:.5px
}

.table th:first-child {
width:80px;
background:#0003;
position:sticky;
left:0;
z-index:10
}

.table th:last-child {
border-right:none
}

.nick-only {
display:block;
font-size:11px;
line-height:1.2;
max-width:50px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap
}

.table tbody tr {
background:#ffffff05;
transition:background-color .2s ease
}

.table tbody tr:hover {
background:#d4af370d
}

.table.zebra tbody tr:nth-child(even) {
background:#ffffff0d
}

.table.zebra tbody tr:nth-child(even):hover {
background:#d4af3714
}

.table td {
padding:10px 8px;
text-align:center;
border-right:1px solid #ffffff1a;
border-bottom:1px solid #ffffff0d;
color:#fff;
font-weight:500;
font-size:13px
}

.table td:first-child {
background:#0003;
color:#d4af37;
font-weight:600;
font-size:11px;
width:80px;
position:sticky;
left:0;
z-index:5;
border-right:2px solid #d4af374d
}

.table td:last-child {
border-right:none
}

.table td:not(:first-child) {
font-family:'Courier New',monospace;
font-weight:700;
color:#fff;
text-shadow:0 0 4px #4ade804d
}

.table td:not(:first-child):empty,.table td:not(:first-child):contains(—) {
color:#6b7280;
opacity:.7
}

@media (max-width: 390px) {
.hero {
margin:12px;
padding:12px
}

.hero input {
padding:10px 12px;
font-size:13px
}

.hero .btn {
padding:10px 20px;
font-size:13px
}

.marq {
margin:12px;
padding:10px 0
}

.marq .track {
font-size:12px
}

.table-wrap {
margin:12px 8px
}

.table {
font-size:12px
}

.table th {
padding:10px 6px;
font-size:10px
}

.table th:first-child {
width:70px
}

.table td {
padding:8px 6px;
font-size:12px
}

.table td:first-child {
width:70px;
font-size:10px
}

.nick-only {
font-size:10px;
max-width:40px
}
}

@media (max-width: 320px) {
.hero {
margin:8px;
padding:10px
}

.marq {
margin:8px
}

.table-wrap {
margin:8px 4px
}

.table th:first-child,.table td:first-child {
width:60px
}

.table th {
padding:8px 4px;
font-size:9px
}

.table td {
padding:6px 4px;
font-size:11px
}

.nick-only {
font-size:9px;
max-width:35px
}
}

@media (max-height: 500px) and (orientation: landscape) {
.hero {
margin:8px 16px;
padding:12px
}

.hero form {
flex-direction:row;
justify-content:center;
align-items:end;
gap:16px
}

.hero form > div {
max-width:200px
}

.marq {
margin:8px 16px;
padding:8px 0
}

.table-wrap {
margin:8px 16px
}
}

.hist-section {
padding:30px 20px;
margin:20px 0;
background:#1a0000;
border-radius:20px;
box-shadow:0 10px 40px #0000001a;
max-width:100%;
overflow-x:auto
}

.hist-grid {
display:grid;
grid-template-columns:1fr auto;
gap:25px;
align-items:start;
margin-bottom:25px
}

.hist-small {
color:#7f8c8d;
font-size:14px;
margin:8px 0;
line-height:1.4
}

.hist-marquee {
margin:15px 0 0;
background:linear-gradient(135deg,#d4af371a 0%,#dc143c1a 100%);
border-radius:12px;
padding:12px;
border:2px solid #d4af3733;
overflow:hidden
}

.hist-marquee marquee {
color:#d4af37;
font-weight:600;
font-size:15px;
font-family:'Arial',sans-serif
}

.hist-form {
background:linear-gradient(135deg,#d4af371a 0%,#dc143c1a 100%);
padding:20px;
border-radius:15px;
border:2px solid #d4af3733;
text-align:center;
min-width:200px
}

.hist-form label {
color:#fff;
font-weight:600;
font-size:14px;
margin-bottom:10px;
display:block
}

.hist-form select {
padding:12px 16px;
border:2px solid #d4af374d;
border-radius:12px;
font-size:15px;
background:#0000004d;
margin:10px 5px;
min-width:120px;
transition:all .3s ease;
color:#fff;
font-weight:500
}

.hist-form select:focus {
outline:none;
border-color:#d4af37;
box-shadow:0 0 0 3px #d4af371a
}

.hist-btn {
background:linear-gradient(135deg,#d4af37 0%,#b8941f 100%);
color:#000;
border:none;
padding:12px 24px;
border-radius:12px;
font-size:15px;
font-weight:600;
cursor:pointer;
transition:all .3s ease;
margin:5px
}

.hist-btn:hover {
transform:translateY(-2px);
box-shadow:0 8px 25px #d4af3766;
background:linear-gradient(135deg,#dc143c 0%,#8b0000 100%);
color:#fff
}

.hist-section h1 {
color:#fff;
font-size:2.2rem;
font-weight:700;
margin:0 0 15px;
background:linear-gradient(135deg,#d4af37 0%,#dc143c 100%);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
line-height:1.2
}

.hist-section h2 {
color:#fff;
font-size:1.6rem;
font-weight:600;
margin:0 0 20px;
padding-bottom:10px;
border-bottom:3px solid #d4af374d
}

.hist-table {
width:100%;
border-collapse:collapse;
margin-top:20px;
background:#0003;
border-radius:15px;
overflow:hidden;
box-shadow:0 5px 20px #00000014
}

.hist-table.hist-zebra tbody tr:nth-child(even) {
background:#d4af370d
}

.hist-table.hist-zebra tbody tr:hover {
background:linear-gradient(135deg,#d4af371a 0%,#dc143c1a 100%);
transform:translateX(3px);
transition:all .3s ease
}

.hist-header th {
background:linear-gradient(135deg,#d4af37 0%,#b8941f 100%);
color:#000;
font-weight:600;
text-transform:uppercase;
font-size:13px;
letter-spacing:.8px;
padding:18px 15px;
text-align:center;
position:relative;
font-family:'Arial',sans-serif
}

.hist-header th:first-child {
text-align:left;
padding-left:20px
}

.hist-table td {
padding:15px;
text-align:center;
border-bottom:1px solid #d4af371a;
font-size:14px;
color:#fff;
transition:all .3s ease
}

.hist-table td:first-child {
text-align:left;
font-weight:600;
color:#d4af37;
padding-left:20px
}

.hist-badge {
background:linear-gradient(135deg,#d4af37 0%,#b8941f 100%);
color:#000;
padding:8px 16px;
border-radius:25px;
font-weight:700;
font-size:15px;
display:inline-block;
min-width:50px;
text-align:center;
box-shadow:0 4px 15px #d4af374d;
letter-spacing:.5px
}

.hist-link {
color:#d4af37;
text-decoration:none;
font-weight:600;
padding:10px 18px;
border-radius:20px;
background:linear-gradient(135deg,#d4af371a 0%,#dc143c1a 100%);
border:2px solid #d4af3733;
transition:all .3s ease;
display:inline-block;
font-size:14px
}

.hist-link:hover {
background:linear-gradient(135deg,#d4af37 0%,#dc143c 100%);
color:#fff;
border-color:#d4af37;
transform:translateY(-2px);
text-decoration:none;
box-shadow:0 6px 20px #d4af3766
}

@media (max-width: 1024px) {
.hist-section {
padding:25px 15px;
margin:15px 0
}

.hist-grid {
grid-template-columns:1fr;
gap:20px
}

.hist-form {
min-width:auto;
max-width:100%
}
}

@media (max-width: 768px) {
.hist-section {
padding:20px 12px;
border-radius:15px
}

.hist-section h1 {
font-size:1.8rem
}

.hist-section h2 {
font-size:1.4rem
}

.hist-table {
font-size:12px
}

.hist-table th,.hist-table td {
padding:10px 8px
}

.hist-table td:first-child,.hist-header th:first-child {
padding-left:12px
}

.hist-badge {
font-size:13px;
padding:6px 12px;
min-width:40px
}

.hist-link {
font-size:12px;
padding:8px 14px
}

.hist-marquee {
padding:8px
}

.hist-marquee marquee {
font-size:13px
}
}

@media (max-width: 480px) {
.hist-section {
padding:15px 8px;
margin:10px 0
}

.hist-section h1 {
font-size:1.5rem;
line-height:1.3
}

.hist-section h2 {
font-size:1.2rem
}

.hist-table {
font-size:11px
}

.hist-table th,.hist-table td {
padding:8px 4px
}

.hist-form select {
min-width:100px;
font-size:14px
}

.hist-btn {
font-size:14px;
padding:10px 20px
}

.hist-badge {
font-size:12px;
padding:5px 10px;
min-width:35px
}

.hist-link {
font-size:11px;
padding:6px 12px
}

.hist-table thead {
display:none
}

.hist-table,.hist-table tbody,.hist-table tr,.hist-table td {
display:block;
width:100%
}

.hist-table tr {
border:2px solid #d4af3733;
border-radius:12px;
margin-bottom:15px;
padding:15px;
background:#0003
}

.hist-table td {
text-align:left!important;
padding:8px 0;
border:none;
border-bottom:1px solid #d4af371a;
position:relative;
padding-left:50%!important
}

.hist-table td:before {
content:attr(data-label);
position:absolute;
left:0;
width:45%;
font-weight:600;
color:#d4af37;
text-transform:uppercase;
font-size:11px
}
}

* {
transition:all .3s ease
}

.hist-form select:focus,.hist-btn:focus,.hist-link:focus {
outline:2px solid #d4af37;
outline-offset:2px
}

.table-wrap::after {
content:'🔗';
position:absolute;
bottom:8px;
right:12px;
background:#d4af37cc;
color:#000;
padding:4px 8px;
border-radius:12px;
font-size:10px;
font-weight:600;
opacity:.7;
pointer-events:none
}

.table th:focus,.table td:focus {
outline:2px solid #d4af37;
outline-offset:-1px
}

.table-wrap.loading {
opacity:.6;
pointer-events:none
}

.table-wrap.loading::before {
content:'';
position:absolute;
top:50%;
left:50%;
width:24px;
height:24px;
margin:-12px 0 0 -12px;
border:3px solid #d4af374d;
border-top-color:#d4af37;
border-radius:50%;
animation:spin 1s linear infinite;
z-index:100
}

.forum-entry {
margin:20px 16px
}

.forum-card {
background:linear-gradient(135deg,#1a0000 0%,#300 100%);
border:1px solid #d4af374d;
border-radius:16px;
padding:20px;
text-align:center;
position:relative;
overflow:hidden;
box-shadow:0 4px 20px #0000004d;
transition:all .3s ease
}

.forum-card::before {
content:'';
position:absolute;
top:0;
left:0;
right:0;
height:2px;
background:linear-gradient(90deg,#d4af37,#dc143c,#d4af37);
animation:shimmer 3s ease-in-out infinite
}

@keyframes shimmer {
0%,100% {
opacity:.5
}

50% {
opacity:1
}
}

.forum-card:hover {
transform:translateY(-3px);
border-color:#d4af3780;
box-shadow:0 8px 30px #d4af3733
}

.forum-header {
margin-bottom:16px
}

.forum-icon {
font-size:32px;
margin-bottom:8px;
animation:bounce 2s ease-in-out infinite
}

@keyframes bounce {
0%,100% {
transform:translateY(0)
}

50% {
transform:translateY(-5px)
}
}

.forum-title {
color:#fff;
font-size:18px;
font-weight:600;
margin:0 0 4px;
background:linear-gradient(45deg,#d4af37,#dc143c);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text
}

.forum-subtitle {
color:#bbb;
font-size:13px;
margin:0
}

.forum-features {
display:flex;
justify-content:space-around;
margin:16px 0;
padding:12px 0;
border-top:1px solid #ffffff1a;
border-bottom:1px solid #ffffff1a
}

.feature-item {
display:flex;
flex-direction:column;
align-items:center;
gap:4px;
flex:1
}

.feature-emoji {
font-size:20px
}

.feature-text {
color:#d4af37;
font-size:11px;
font-weight:500;
text-align:center
}

.forum-cta {
margin-top:16px
}

.forum-button {
background:linear-gradient(45deg,#d4af37,#b8941f);
color:#000;
text-decoration:none;
padding:12px 24px;
border-radius:20px;
font-size:14px;
font-weight:600;
display:inline-flex;
align-items:center;
gap:6px;
transition:all .3s ease;
border:2px solid transparent;
animation:pulse-glow 2s ease-in-out infinite
}

@keyframes pulse-glow {
0%,100% {
box-shadow:0 4px 15px #d4af374d
}

50% {
box-shadow:0 4px 25px #d4af3799
}
}

.forum-button:hover {
background:linear-gradient(45deg,#dc143c,#8b0000);
transform:translateY(-2px);
box-shadow:0 6px 20px #dc143c66;
text-decoration:none;
color:#fff
}

.button-icon {
font-size:16px
}

.forum-note {
color:#888;
font-size:11px;
margin:8px 0 0
}

@media (max-width: 390px) {
.forum-entry {
margin:16px 12px
}

.forum-card {
padding:16px
}

.forum-icon {
font-size:28px
}

.forum-title {
font-size:16px
}

.forum-subtitle {
font-size:12px
}

.feature-emoji {
font-size:18px
}

.feature-text {
font-size:10px
}

.forum-button {
padding:10px 20px;
font-size:13px
}
}

@media (max-width: 320px) {
.forum-features {
flex-direction:column;
gap:8px
}

.feature-item {
flex-direction:row;
justify-content:center;
gap:8px
}

.feature-text {
font-size:11px
}
}

.section {
    background: linear-gradient(135deg, #1a0000 0%, #300 100%);
    border: 1px solid #d4af3733;
    border-radius: 12px;
    padding: 20px;
    margin: 20px 16px;
    position: relative;
    overflow: hidden;
    width: auto;
    min-width: 0;
}

.section::before {
    content: '🔗';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #d4af37, #dc143c, #d4af37);
    opacity: .7;
}

/* Header container - CRITICAL FIX */
.section > div:first-child {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #ffffff1a;
    gap: 8px;
    width: 100%;
    min-width: 0;
}

.section h2 {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    background: linear-gradient(45deg, #d4af37, #dc143c);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    flex: 1;
    min-width: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

/* Header "View all" link - CRITICAL FIX */
.section > div:first-child > .link {
    color: #d4af37;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: 15px;
    border: 1px solid #d4af374d;
    background: #d4af371a;
    transition: all .3s ease;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: fit-content;
    max-width: none;
}

.section > div:first-child > .link:hover {
    background: #d4af3733;
    border-color: #d4af3780;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px #d4af3733;
    text-decoration: none;
    color: #fff;
}

.section .small:only-child {
    color: #888;
    font-size: 14px;
    text-align: center;
    padding: 20px;
    font-style: italic;
}

.section ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    min-width: 0;
}

.section li {
    background: #ffffff08;
    border: 1px solid #ffffff1a;
    border-radius: 8px;
    padding: 14px;
    transition: all .3s ease;
    position: relative;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.section li::before {
    content: '🔗';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(to bottom, #d4af37, #dc143c);
    border-radius: 0 0 0 8px;
    transform: scaleY(0);
    transition: transform .3s ease;
}

.section li:hover::before {
    transform: scaleY(1);
}

.section li:hover {
    background: #d4af370d;
    border-color: #d4af374d;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px #0003;
}

/* Article title links - CRITICAL FIX */
.section li > .link {
    color: #fff;
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    display: block;
    margin-bottom: 6px;
    transition: color .3s ease;
    border: none;
    background: none;
    padding: 0;
    border-radius: 0;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.section li > .link:hover {
    color: #d4af37;
    text-decoration: none;
    transform: none;
    box-shadow: none;
    background: none;
    border: none;
}

.section li .small {
    color: #888;
    font-size: 12px;
    line-height: 1.3;
    margin-bottom: 4px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.section li .small:last-child {
    margin-bottom: 0;
    color: #bbb;
    font-size: 13px;
    line-height: 1.4;
}

.section li .small:first-of-type {
    color: #d4af37;
    font-weight: 500;
}

.section .small:last-child {
    color: #666;
    font-size: 11px;
    margin-top: 16px;
    padding: 8px;
    background: #8b00001a;
    border-radius: 4px;
    border: 1px solid #8b000033;
    font-family: 'Courier New', monospace;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* MOBILE FIXES - MOST IMPORTANT */
@media (max-width: 768px) {
    .section {
        margin: 16px 8px;
        padding: 16px;
        width: calc(100% - 16px);
        max-width: calc(100vw - 16px);
        box-sizing: border-box;
    }

    .section > div:first-child {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        text-align: left;
    }

    .section h2 {
        font-size: 16px;
        text-align: center;
        width: 100%;
        order: 1;
    }

    .section > div:first-child > .link {
        font-size: 12px;
        padding: 8px 16px;
        text-align: center;
        order: 2;
        align-self: center;
        white-space: normal;
        word-wrap: break-word;
        overflow-wrap: break-word;
        max-width: 80%;
        width: auto;
    }

    .section li {
        padding: 12px;
        width: 100%;
    }

    .section li > .link {
        font-size: 14px;
        line-height: 1.5;
        width: 100%;
    }

    .section li .small {
        font-size: 11px;
        width: 100%;
    }
}

@media (max-width: 480px) {
    .section {
        margin: 12px 6px;
        padding: 12px;
        width: calc(100% - 12px);
        max-width: calc(100vw - 12px);
    }

    .section h2 {
        font-size: 15px;
    }

    .section > div:first-child > .link {
        font-size: 11px;
        padding: 6px 12px;
        max-width: 70%;
    }

    .section li {
        padding: 10px;
    }

    .section li > .link {
        font-size: 13px;
    }

    .section li .small {
        font-size: 10px;
    }
}

@media (max-width: 360px) {
    .section {
        margin: 8px 4px;
        padding: 10px;
        width: calc(100% - 8px);
        max-width: calc(100vw - 8px);
    }

    .section h2 {
        font-size: 14px;
    }

    .section > div:first-child {
        gap: 8px;
    }

    .section > div:first-child > .link {
        font-size: 10px;
        padding: 5px 10px;
        max-width: 60%;
    }

    .section li {
        padding: 8px;
    }

    .section li > .link {
        font-size: 12px;
    }
}

@media (max-width: 320px) {
    .section {
        margin: 6px 2px;
        padding: 8px;
        width: calc(100% - 4px);
        max-width: calc(100vw - 4px);
    }

    .section h2 {
        font-size: 13px;
    }

    .section > div:first-child > .link {
        font-size: 9px;
        padding: 4px 8px;
        max-width: 50%;
    }

    .section li {
        padding: 6px;
    }

    .section li > .link {
        font-size: 11px;
        line-height: 1.4;
    }
}

/* Universal text overflow prevention */
.section * {
    max-width: 100%;
    box-sizing: border-box;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto;
}

/* Animations */
.section.loading {
    opacity: .7;
    pointer-events: none;
}

.section.loading::after {
    content: '🔗';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid #d4af374d;
    border-top-color: #d4af37;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.section .link:focus {
    outline: 2px solid #d4af37;
    outline-offset: 2px;
}

.section li:active {
    transform: scale(0.98);
}

.section .link:active {
    color: #dc143c;
}

.section {
    animation: fadeInUp .6s ease forwards;
}

.section li {
    animation: slideInLeft .4s ease forwards;
    animation-delay: calc(var(--item-index, 0) * 0.1s);
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Global text overflow prevention */
.section * {
    max-width: 100%;
    box-sizing: border-box;
}

.section p, .section span, .section div {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

.disclaimer-section {
background:linear-gradient(135deg,#d4af371a 0%,#dc143c1a 100%);
border:1px solid #d4af374d;
border-radius:8px;
margin:20px 16px;
padding:16px;
position:relative;
overflow:hidden
}

.disclaimer-section::before {
content:'🔗';
position:absolute;
top:0;
left:0;
right:0;
height:2px;
background:linear-gradient(90deg,#d4af37,#dc143c,#d4af37);
opacity:.8
}

.disclaimer-container {
display:flex;
align-items:flex-start;
gap:12px;
max-width:100%
}

.disclaimer-icon {
font-size:20px;
flex-shrink:0;
margin-top:2px;
filter:drop-shadow(0 2px 4px #d4af374d)
}

.disclaimer-content {
flex:1
}

.disclaimer-title {
color:#d4af37;
font-size:14px;
font-weight:600;
margin:0 0 6px;
text-transform:uppercase;
letter-spacing:.5px
}

.disclaimer-text {
color:#e0e0e0;
font-size:12px;
line-height:1.4;
margin:0 0 8px
}

.disclaimer-text strong {
color:#dc143c;
font-weight:700
}

.disclaimer-links {
display:flex;
align-items:center;
gap:8px;
flex-wrap:wrap
}

.disclaimer-link {
color:#d4af37;
text-decoration:none;
font-size:11px;
font-weight:500;
padding:2px 6px;
border-radius:3px;
transition:all .2s ease;
border:1px solid #d4af3733;
background:#d4af370d
}

.disclaimer-link:hover {
background:#d4af371a;
border-color:#d4af3766;
text-decoration:none;
color:#fff
}

.separator {
color:#666;
font-size:10px
}

@media (max-width: 390px) {
.disclaimer-section {
margin:16px 12px;
padding:12px
}

.disclaimer-container {
gap:10px
}

.disclaimer-icon {
font-size:18px
}

.disclaimer-title {
font-size:13px
}

.disclaimer-text {
font-size:11px
}

.disclaimer-links {
flex-direction:column;
align-items:flex-start;
gap:4px
}

.disclaimer-link {
font-size:10px
}

.separator {
display:none
}
}

@media (max-width: 320px) {
.disclaimer-section {
margin:12px 8px;
padding:10px
}

.disclaimer-container {
flex-direction:column;
align-items:center;
text-align:center;
gap:8px
}

.disclaimer-title {
font-size:12px
}

.disclaimer-text {
font-size:10px
}
}

@media (max-height: 500px) and (orientation: landscape) {
.disclaimer-section {
margin:12px 16px;
padding:10px 16px
}

.disclaimer-title {
font-size:12px
}

.disclaimer-text {
font-size:11px
}
}

.footer {
background:#0a0a0ae6;
border-top:1px solid #d4af374d;
padding:16px;
margin-top:40px
}

.footer-content {
text-align:center;
max-width:100%
}

.foot-copyright {
color:#888;
font-size:12px;
margin-bottom:12px;
font-weight:400
}

.footer-links {
list-style:none;
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:6px
}

.footer-links a {
color:#bbb;
text-decoration:none;
font-size:13px;
padding:6px 10px;
border-radius:4px;
transition:color .2s ease
}

.footer-links a:hover {
color:#d4af37;
text-decoration:none
}

@media (max-width: 390px) {
.footer {
padding:14px 12px 24px
}

.foot-copyright {
font-size:11px;
margin-bottom:10px
}

.footer-links {
gap:4px
}

.footer-links a {
font-size:12px;
padding:5px 8px
}
}

.wrap {
min-height:100vh;
max-width:100%;
margin:0 auto
}

.note {
color:#888;
font-size:12px;
text-align:center;
font-style:italic
}

@keyframes spin {
to {
transform:rotate(360deg)
}
}

::-webkit-scrollbar {
width:8px;
height:8px
}

::-webkit-scrollbar-track {
background:#1a0000
}

::-webkit-scrollbar-thumb {
background:#d4af374d;
border-radius:4px
}

::-webkit-scrollbar-thumb:hover {
background:#d4af3780
}

.bell-wrap {
position:relative;
display:inline-block
}

.bell-btn {
display:inline-flex;
align-items:center;
gap:8px;
background:linear-gradient(135deg,#d4af37 0%,#b8941f 100%);
border:none;
border-radius:25px;
padding:10px 16px;
color:#000;
font-size:14px;
font-weight:500;
cursor:pointer;
transition:all .3s ease;
box-shadow:0 2px 8px #d4af374d;
position:relative;
min-height:44px
}

.bell-btn:hover {
transform:translateY(-2px);
box-shadow:0 4px 15px #d4af3766;
background:linear-gradient(135deg,#dc143c 0%,#8b0000 100%);
color:#fff
}

.bell-btn:active {
transform:translateY(0)
}

.bell-btn svg {
flex-shrink:0;
transition:transform .3s ease
}

.bell-btn:hover svg {
transform:rotate(15deg)
}

.bell-badge {
display:none;
align-items:center;
justify-content:center;
background:linear-gradient(135deg,#dc143c 0%,#8b0000 100%);
color:#fff;
font-size:11px;
font-weight:700;
border-radius:50%;
min-width:18px;
height:18px;
padding:0 4px;
position:absolute;
top:-8px;
right:-8px;
border:2px solid #fff;
box-shadow:0 2px 4px #0003;
animation:pulse 2s infinite
}

.bell-badge:not(:empty) {
display:inline-flex
}

.notify-modal-back {
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:#0009;
z-index:998;
backdrop-filter:blur(4px);
animation:fadeIn .3s ease
}

.notify-modal {
display:none;
position:fixed;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:90%;
max-width:500px;
max-height:80vh;
background:linear-gradient(145deg,#1a0000 0%,#300 100%);
border-radius:16px;
box-shadow:0 20px 40px #0009 0 0 0 1px #d4af3733;
z-index:999;
overflow:hidden;
animation:modalSlideIn .3s cubic-bezier(0.34,1.56,0.64,1)
}

.notify-head {
display:flex;
justify-content:space-between;
align-items:center;
padding:20px 24px;
border-bottom:1px solid #d4af3733;
background:linear-gradient(135deg,#d4af371a 0%,#dc143c0d 100%)
}

.notify-head h3 {
margin:0;
font-size:18px;
font-weight:600;
color:#d4af37;
text-shadow:0 1px 2px #0003
}

.notify-head div {
display:flex;
gap:8px
}

.btn-mini {
background:#ffffff1a;
color:#e0e0e0;
border:1px solid #ffffff26;
border-radius:8px;
padding:8px 12px;
font-size:12px;
font-weight:500;
cursor:pointer;
transition:all .2s ease
}

.btn-mini:hover {
background:#fff3;
border-color:#ffffff4d;
transform:translateY(-1px)
}

.btn-mini:first-child {
background:linear-gradient(135deg,#0d5f0d 0%,#228b22 100%);
border-color:#0d5f0d4d;
color:#fff
}

.btn-mini:first-child:hover {
background:linear-gradient(135deg,#228b22 0%,#37b24d 100%);
box-shadow:0 2px 8px #0d5f0d4d
}

.notify-list {
max-height:450px;
overflow-y:auto;
padding:12px
}

.notify-list::-webkit-scrollbar {
width:6px
}

.notify-list::-webkit-scrollbar-track {
background:#ffffff0d;
border-radius:3px
}

.notify-list::-webkit-scrollbar-thumb {
background:#d4af3766;
border-radius:3px
}

.notify-list::-webkit-scrollbar-thumb:hover {
background:#d4af3799
}

.n-card {
background:#ffffff0d;
border:1px solid #d4af371a;
border-radius:12px;
padding:16px;
margin-bottom:12px;
transition:all .3s ease;
position:relative;
overflow:hidden
}

.n-card::before {
content:'🔗';
position:absolute;
top:0;
left:0;
right:0;
height:3px;
background:linear-gradient(90deg,#d4af37,#dc143c);
opacity:0;
transition:opacity .3s ease
}

.n-card:hover {
border-color:#d4af37;
box-shadow:0 4px 16px #d4af3733;
transform:translateY(-2px)
}

.n-card:hover::before {
opacity:1
}

.n-card:last-child {
margin-bottom:0
}

.n-title {
font-size:15px;
font-weight:600;
color:#fff;
margin-bottom:6px;
line-height:1.4
}

.n-meta {
font-size:11px;
color:#adb5bd;
margin-bottom:8px;
text-transform:uppercase;
letter-spacing:.5px;
opacity:.8
}

.n-body {
font-size:13px;
color:#e0e0e0;
line-height:1.5;
margin-bottom:12px
}

.n-body:last-child {
margin-bottom:0
}

.n-actions {
display:flex;
gap:8px;
flex-wrap:wrap;
margin-top:12px
}

.n-btn {
display:inline-flex;
align-items:center;
gap:6px;
padding:8px 12px;
border-radius:8px;
font-size:12px;
font-weight:600;
text-decoration:none;
transition:all .2s ease;
border:1px solid transparent;
min-height:32px;
cursor:pointer
}

.n-btn.wa {
background:linear-gradient(135deg,#0d5f0d 0%,#228b22 100%);
color:#fff;
border-color:#0d5f0d4d
}

.n-btn.wa::before {
content:'📱';
font-size:14px
}

.n-btn.wa:hover {
background:linear-gradient(135deg,#228b22 0%,#37b24d 100%);
transform:translateY(-1px);
box-shadow:0 3px 10px #0d5f0d66;
text-decoration:none;
color:#fff
}

.n-btn.call {
background:linear-gradient(135deg,#d4af37 0%,#b8941f 100%);
color:#000;
border-color:#d4af374d
}

.n-btn.call::before {
content:'📞';
font-size:14px
}

.n-btn.call:hover {
background:linear-gradient(135deg,#dc143c 0%,#8b0000 100%);
transform:translateY(-1px);
box-shadow:0 3px 10px #dc143c66;
text-decoration:none;
color:#fff
}

.n-btn.link {
background:linear-gradient(135deg,#d4af37 0%,#b8941f 100%);
color:#000;
border-color:#d4af374d
}

.n-btn.link::before {
content:'🔗';
font-size:14px
}

.n-btn.link:hover {
background:linear-gradient(135deg,#dc143c 0%,#8b0000 100%);
transform:translateY(-1px);
box-shadow:0 3px 10px #dc143c66;
text-decoration:none;
color:#fff
}

.n-card .n-meta:only-child {
text-align:center;
padding:20px 0;
font-style:italic;
color:#6c757d;
text-transform:none;
letter-spacing:normal
}

@media (max-width: 480px) {
.notify-modal {
width:95%;
max-height:85vh;
border-radius:12px
}

.notify-head {
padding:16px 20px;
flex-direction:column;
gap:12px;
align-items:stretch
}

.notify-head div {
justify-content:center
}

.bell-btn span:not(.bell-badge) {
display:none
}

.bell-btn {
padding:10px;
border-radius:50%;
width:44px;
height:44px;
justify-content:center
}

.n-card {
padding:14px
}

.n-actions {
flex-direction:column
}

.n-btn {
justify-content:center;
min-height:40px
}

.notify-list {
max-height:400px;
padding:8px
}
}

@keyframes pulse {
0% {
transform:scale(1);
opacity:1
}

50% {
transform:scale(1.1);
opacity:.8
}

100% {
transform:scale(1);
opacity:1
}
}

@keyframes fadeIn {
from {
opacity:0
}

to {
opacity:1
}
}

@keyframes modalSlideIn {
from {
opacity:0;
transform:translate(-50%,-60%) scale(0.9)
}

to {
opacity:1;
transform:translate(-50%,-50%) scale(1)
}
}

.bell-btn:focus,.btn-mini:focus,.n-btn:focus {
outline:2px solid #d4af37;
outline-offset:2px
}

@media (prefers-contrast: high) {
.n-card {
border-color:#fff
}

.n-title {
color:#fff
}

.n-body {
color:#fff
}
}

@media (prefers-reduced-motion: reduce) {
.bell-badge {
animation:none
}

.notify-modal {
animation:none
}

.bell-btn,.n-card,.n-btn {
transition:none
}
}

@media (prefers-color-scheme: dark) {
.notify-modal {
background:linear-gradient(145deg,#0a0a0a 0%,#1a0000 100%);
box-shadow:0 20px 40px #000c 0 0 0 1px #d4af374d
}

.n-card {
background:#ffffff08;
border-color:#d4af3726
}
}

.nbell {
position:relative;
display:inline-block
}

.nbell.open .ndd {
display:block;
opacity:1;
transform:translateY(0);
pointer-events:all
}

.nbtn {
background:linear-gradient(135deg,#d4af37 0%,#b8941f 100%);
border:none;
border-radius:50%;
width:44px;
height:44px;
color:#000;
font-size:18px;
cursor:pointer;
transition:all .3s ease;
display:flex;
align-items:center;
justify-content:center;
box-shadow:0 2px 8px #d4af374d;
position:relative
}

.nbtn:hover {
transform:translateY(-2px);
box-shadow:0 4px 15px #d4af3766;
background:linear-gradient(135deg,#dc143c 0%,#8b0000 100%);
color:#fff
}

.nbtn:active {
transform:translateY(0)
}

.count {
position:absolute;
top:-8px;
right:-8px;
background:linear-gradient(135deg,#dc143c 0%,#8b0000 100%);
color:#fff;
font-size:11px;
font-weight:700;
border-radius:50%;
min-width:18px;
height:18px;
display:flex;
align-items:center;
justify-content:center;
border:2px solid #fff;
box-shadow:0 2px 4px #0000004d;
animation:pulse 2s infinite
}

.count:empty,.count[data-count="0"] {
display:none
}

.ndd {
position:absolute;
top:calc(100% + 12px);
right:0;
width:350px;
max-width:90vw;
background:linear-gradient(145deg,#1a0000 0%,#300 100%);
border:1px solid #d4af37;
border-radius:12px;
box-shadow:0 8px 25px #0006 0 0 0 1px #d4af3733;
z-index:1001;
max-height:400px;
overflow-y:auto;
display:none;
opacity:0;
transform:translateY(-10px);
transition:all .3s cubic-bezier(0.34,1.56,0.64,1);
backdrop-filter:blur(10px);
pointer-events:none
}

.ndd::before {
content:'🔗';
position:absolute;
top:-6px;
right:20px;
width:12px;
height:12px;
background:#1a0000;
border:1px solid #d4af37;
border-bottom:none;
border-right:none;
transform:rotate(45deg);
z-index:1002
}

.ndd::-webkit-scrollbar {
width:6px
}

.ndd::-webkit-scrollbar-track {
background:#ffffff0d;
border-radius:3px
}

.ndd::-webkit-scrollbar-thumb {
background:#d4af3766;
border-radius:3px
}

.ndd::-webkit-scrollbar-thumb:hover {
background:#d4af3799
}

.nitem {
padding:16px 20px;
border-bottom:1px solid #d4af371a;
transition:all .2s ease;
position:relative;
background:#ffffff05
}

.nitem:first-child {
border-radius:12px 12px 0 0
}

.nitem:last-child {
border-bottom:none;
border-radius:0 0 12px 12px
}

.nitem:only-child {
border-radius:12px
}

.nitem:hover {
background:#d4af371a;
transform:translateX(4px)
}

.nitem::before {
content:'🔗';
position:absolute;
left:0;
top:0;
bottom:0;
width:3px;
background:linear-gradient(135deg,#d4af37,#dc143c);
opacity:0;
transition:opacity .3s ease
}

.nitem:hover::before {
opacity:1
}

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

.nrow b {
color:#fff;
font-size:14px;
font-weight:600;
line-height:1.4;
flex:1
}

.nitem .nbtn {
width:auto;
height:auto;
padding:6px 10px;
border-radius:6px;
font-size:11px;
background:linear-gradient(135deg,#0d5f0d 0%,#228b22 100%);
margin-left:auto;
min-width:auto;
box-shadow:0 2px 4px #0d5f0d4d
}

.nitem .nbtn:hover {
background:linear-gradient(135deg,#228b22 0%,#37b24d 100%);
transform:translateY(-1px);
box-shadow:0 3px 8px #0d5f0d66
}

.small {
font-size:12px;
color:#adb5bd;
line-height:1.4;
margin-bottom:4px
}

.small:last-child {
margin-bottom:0;
opacity:.7
}

.nitem:only-child {
text-align:center;
padding:30px 20px;
color:#6c757d;
font-style:italic;
background:#ffffff08
}

.nitem:only-child:hover {
transform:none;
background:#ffffff08
}

.nitem:only-child::before {
display:none
}

@media (max-width: 480px) {
.ndd {
width:320px;
right:-10px;
max-height:350px
}

.ndd::before {
right:30px
}

.nitem {
padding:14px 16px
}

.nrow {
flex-direction:column;
align-items:flex-start;
gap:8px
}

.nrow b {
font-size:13px
}

.small {
font-size:11px
}

.nitem .nbtn {
padding:5px 8px;
font-size:10px;
align-self:flex-end
}

.nbtn {
width:42px;
height:42px;
font-size:16px
}

.count {
min-width:16px;
height:16px;
font-size:10px;
top:-6px;
right:-6px
}
}

@media (max-width: 768px) and (min-width: 481px) {
.ndd {
width:300px
}

.nitem {
padding:15px 18px
}
}

@keyframes pulse {
0% {
transform:scale(1);
opacity:1
}

50% {
transform:scale(1.1);
opacity:.8
}

100% {
transform:scale(1);
opacity:1
}
}

.nbtn:focus {
outline:2px solid #d4af37;
outline-offset:2px
}

@media (prefers-contrast: high) {
.nitem {
border-color:#fff
}

.nrow b {
color:#fff
}

.small {
color:#fff
}
}

@media (prefers-reduced-motion: reduce) {
.count {
animation:none
}

.ndd {
transition:opacity .2s ease
}

.nbtn,.nitem {
transition:none
}
}

@media (prefers-color-scheme: dark) {
.ndd {
background:linear-gradient(145deg,#0a0a0a 0%,#1a0000 100%);
border-color:#d4af37;
box-shadow:0 8px 25px #0009 0 0 0 1px #d4af374d
}

.ndd::before {
background:#0a0a0a;
border-color:#d4af37
}

.nitem {
background:#ffffff03
}
}

@media (pointer: coarse) {
.nbell {
-webkit-tap-highlight-color:transparent
}
}

@media print {
.nbell {
display:none
}
}

.nbell-wrap {
position:relative;
display:inline-flex;
align-items:center;
cursor:pointer
}

.nbell-wrap .nbtn {
background:linear-gradient(135deg,#d4af37 0%,#b8941f 100%);
border:none;
border-radius:50%;
width:48px;
height:48px;
display:flex;
align-items:center;
justify-content:center;
font-size:20px;
color:#000;
cursor:pointer;
transition:all .3s ease;
box-shadow:0 4px 15px #d4af374d;
position:relative;
overflow:hidden
}

.nbell-wrap .nbtn:hover {
transform:translateY(-2px);
box-shadow:0 6px 20px #d4af3766;
background:linear-gradient(135deg,#dc143c 0%,#8b0000 100%);
color:#fff
}

.nbell-wrap .nbtn:active {
transform:translateY(0)
}

.nbell-wrap .nbtn::before {
content:'🔗';
position:absolute;
top:0;
left:-100%;
width:100%;
height:100%;
background:linear-gradient(90deg,transparent,#fff3,transparent);
transition:left .5s
}

.nbell-wrap .nbtn:hover::before {
left:100%
}

.ncount {
position:absolute;
top:-8px;
right:-8px;
background:linear-gradient(135deg,#dc143c,#8b0000);
color:#fff;
border-radius:50%;
min-width:20px;
height:20px;
display:flex;
align-items:center;
justify-content:center;
font-size:11px;
font-weight:600;
font-family:'Arial',sans-serif;
border:2px solid #fff;
box-shadow:0 2px 8px #dc143c4d;
animation:pulse 2s infinite
}

@keyframes pulse {
0% {
transform:scale(1)
}

50% {
transform:scale(1.1)
}

100% {
transform:scale(1)
}
}

.nmodal-overlay {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:#0009;
backdrop-filter:blur(5px);
z-index:9998;
opacity:0;
visibility:hidden;
transition:all .3s ease
}

.nmodal-overlay.show {
opacity:1;
visibility:visible
}

.nmodal {
position:fixed;
top:50%;
left:50%;
transform:translate(-50%,-50%) scale(0.8);
background:linear-gradient(145deg,#1a0000 0%,#300 100%);
border-radius:20px;
box-shadow:0 20px 60px #0000004d;
z-index:9999;
max-width:480px;
width:90vw;
max-height:80vh;
opacity:0;
visibility:hidden;
transition:all .3s cubic-bezier(0.34,1.56,0.64,1);
overflow:hidden;
border:1px solid #d4af374d
}

.nmodal.show {
opacity:1;
visibility:visible;
transform:translate(-50%,-50%) scale(1)
}

.nbox {
display:flex;
flex-direction:column;
height:100%;
max-height:80vh
}

.nhdr {
background:linear-gradient(135deg,#d4af37 0%,#b8941f 100%);
color:#000;
padding:20px;
display:flex;
justify-content:space-between;
align-items:center;
position:relative;
overflow:hidden
}

.nhdr::before {
content:'🔗';
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23000000' fill-opacity='0.05'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
pointer-events:none
}

.nhdr h3 {
margin:0;
font-size:18px;
font-weight:600;
font-family:'Arial',sans-serif;
position:relative;
z-index:1
}

.nact {
display:flex;
gap:10px;
position:relative;
z-index:1
}

.nact .nbtn {
background:#0003;
border:1px solid #0000004d;
color:#000;
padding:8px 16px;
border-radius:25px;
font-size:12px;
font-weight:500;
cursor:pointer;
transition:all .3s ease;
backdrop-filter:blur(10px)
}

.nact .nbtn:hover {
background:#0000004d;
border-color:#00000080;
transform:translateY(-1px)
}

.nlist {
flex:1;
overflow-y:auto;
padding:0;
max-height:calc(80vh - 80px)
}

.nlist::-webkit-scrollbar {
width:6px
}

.nlist::-webkit-scrollbar-track {
background:#0000001a
}

.nlist::-webkit-scrollbar-thumb {
background:linear-gradient(135deg,#d4af37,#dc143c);
border-radius:3px
}

.nitem {
padding:20px;
border-bottom:1px solid #d4af371a;
transition:all .3s ease;
position:relative;
background:#ffffff05
}

.nitem:hover {
background:linear-gradient(135deg,#d4af371a 0%,#dc143c1a 100%);
transform:translateX(5px)
}

.nitem:last-child {
border-bottom:none
}

.nrow {
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:8px
}

.nrow:last-child {
margin-bottom:0
}

.nrow b {
color:#fff;
font-size:14px;
font-weight:600;
font-family:'Arial',sans-serif;
flex:1;
margin-right:10px
}

.nsmall {
color:#adb5bd;
font-size:12px;
line-height:1.4;
font-family:'Arial',sans-serif
}

.npill {
display:inline-block;
padding:4px 12px;
border-radius:12px;
font-size:10px;
font-weight:600;
text-transform:uppercase;
letter-spacing:.5px;
font-family:'Arial',sans-serif
}

.npill-message {
background:#d4af3733;
color:#d4af37
}

.npill-order {
background:#dc143c33;
color:#dc143c
}

.npill-payment {
background:#0d5f0d33;
color:#0d5f0d
}

.npill-system {
background:#8b000033;
color:#8b0000
}

.npill-alert {
background:#dc143c33;
color:#dc143c
}

.nlink {
color:#d4af37;
text-decoration:none;
font-size:12px;
font-weight:500;
padding:6px 12px;
border-radius:15px;
background:linear-gradient(135deg,#d4af371a 0%,#dc143c1a 100%);
border:1px solid #d4af3733;
transition:all .3s ease;
display:inline-block
}

.nlink:hover {
background:linear-gradient(135deg,#d4af37 0%,#dc143c 100%);
color:#fff;
border-color:#d4af37;
transform:translateY(-1px);
text-decoration:none
}

.nMark {
background:linear-gradient(135deg,#dc143c,#8b0000);
border:none;
color:#fff;
padding:6px 12px;
border-radius:15px;
font-size:10px;
font-weight:500;
cursor:pointer;
transition:all .3s ease;
text-transform:uppercase;
letter-spacing:.5px
}

.nMark:hover {
background:linear-gradient(135deg,#8b0000,#dc143c);
transform:translateY(-1px);
box-shadow:0 4px 12px #dc143c4d
}

.nlist .nsmall {
text-align:center;
padding:40px 20px;
color:#6c757d;
font-style:italic
}

@media (max-width: 768px) {
.nmodal {
width:95vw;
max-height:90vh;
margin:20px
}

.nhdr {
padding:15px;
flex-direction:column;
gap:10px;
text-align:center
}

.nact {
width:100%;
justify-content:center
}

.nitem {
padding:15px
}

.nrow {
flex-direction:column;
align-items:flex-start;
gap:8px
}

.nrow b {
margin-right:0
}
}

@media (max-width: 480px) {
.nbell-wrap .nbtn {
width:42px;
height:42px;
font-size:18px
}

.ncount {
min-width:18px;
height:18px;
font-size:10px;
top:-6px;
right:-6px
}

.nmodal {
width:100vw;
height:100vh;
max-height:100vh;
border-radius:0;
margin:0
}

.nbox {
height:100vh;
max-height:100vh
}

.nlist {
max-height:calc(100vh - 100px)
}
}

@keyframes modalSlideIn {
from {
opacity:0;
transform:translate(-50%,-60%) scale(0.8)
}

to {
opacity:1;
transform:translate(-50%,-50%) scale(1)
}
}

.nbtn:focus,.nlink:focus,.nMark:focus {
outline:2px solid #d4af37;
outline-offset:2px
}

.nlist .nsmall:contains(Loading) {
position:relative
}

.nlist .nsmall:contains(Loading)::after {
content:'';
display:inline-block;
width:12px;
height:12px;
margin-left:8px;
border:2px solid #ddd;
border-top:2px solid #d4af37;
border-radius:50%;
animation:spin 1s linear infinite
}

@keyframes spin {
0% {
transform:rotate(0deg)
}

100% {
transform:rotate(360deg)
}
}

.latest-wrap {
background:transparent;
padding:2rem 0;
text-align:center;
position:relative;
z-index:1
}

.latest-wrap > div:first-child {
margin-bottom:2rem;
text-align:center
}

.latest-wrap h2 {
font-size:2.2rem;
font-weight:700;
color:#fff;
margin-bottom:.5rem;
background:linear-gradient(135deg,#d4af37 0%,#dc143c 100%);
background-clip:text;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
text-shadow:0 4px 8px #0000004d;
animation:float 3s ease-in-out infinite;
text-align:center
}

.latest-wrap small {
color:#94a3b8;
font-size:.9rem;
font-weight:400;
display:block;
text-align:center
}

.latest-grid {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:1.5rem;
max-width:1200px;
margin:0 auto;
padding:0 1rem
}

.latest-item {
background:#1a0000f2;
backdrop-filter:blur(15px);
border:2px solid #d4af374d;
border-radius:20px;
padding:2rem;
text-align:center;
transition:all .4s cubic-bezier(0.175,0.885,0.32,1.275);
position:relative;
overflow:hidden;
box-shadow:0 8px 32px #0000004d;
animation:slideInUp .6s ease-out
}

.latest-item::before {
content:'🔗';
position:absolute;
top:0;
left:-100%;
width:100%;
height:100%;
background:linear-gradient(90deg,transparent,#d4af371a,transparent);
transition:left .6s ease
}

.latest-item:hover::before {
left:100%
}

.latest-item:hover {
transform:translateY(-10px) scale(1.02);
border-color:#d4af37;
box-shadow:0 20px 40px #d4af374d
}

.latest-name {
font-size:25px;
font-weight:700;
color:#fff;
margin-bottom:1.5rem;
text-align:center;
background:linear-gradient(135deg,#fff 0%,#d4af37 100%);
background-clip:text;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
animation:glow 2s ease-in-out infinite alternate
}

.latest-pend {
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
margin:1.5rem 0;
text-align:center
}

.spin {
width:60px;
height:60px;
border:4px solid #d4af3733;
border-top:4px solid #d4af37;
border-radius:50%;
animation:spin 1s linear infinite;
margin-bottom:1rem;
position:relative
}

.spin::after {
content:'';
position:absolute;
top:50%;
left:50%;
width:20px;
height:20px;
background:linear-gradient(135deg,#d4af37,#dc143c);
border-radius:50%;
transform:translate(-50%,-50%);
animation:innerPulse 1.5s ease-in-out infinite
}

.sr-only {
position:absolute;
width:1px;
height:1px;
padding:0;
margin:-1px;
overflow:hidden;
clip:rect(0,0,0,0);
white-space:nowrap;
border:0
}

.latest-val {
display:flex;
align-items:center;
justify-content:center;
width:120px;
height:120px;
margin:1.5rem auto;
font-size:3rem;
font-weight:900;
color:#FD1D1D;
text-align:center;
background:linear-gradient(135deg,#1a0000e6 0%,#330000e6 100%);
border:3px solid #d4af37;
border-radius:50%;
box-shadow:0 8px 25px #0006 inset 0 0 15px #d4af3733 0 0 20px #d4af374d;
text-shadow:0 2px 4px #00000080;
background-clip:text;
-webkit-background-clip:text;
-webkit-text-fill-color:#d4af37;
animation:resultPop .8s cubic-bezier(0.68,-0.55,0.265,1.55);
position:relative;
transition:all .3s ease
}

.latest-val:hover {
transform:scale(1.05);
box-shadow:0 12px 30px #00000080 inset 0 0 20px #d4af374d 0 0 30px #d4af3780;
border-color:#f9f295
}

.latest-val::before {
content:'';
position:absolute;
top:10px;
left:10px;
right:10px;
bottom:10px;
border-radius:50%;
background:radial-gradient(circle at center,#d4af371a 0%,transparent 70%);
pointer-events:none
}

.latest-item {
display:flex;
flex-direction:column;
align-items:center;
justify-content:center
}

@media (max-width: 768px) {
.latest-val {
width:100px;
height:100px;
font-size:2.5rem;
margin-left:auto;
margin-right:auto
}

.latest-item {
text-align:center
}
}

@media (max-width: 480px) {
.latest-val {
width:80px;
height:80px;
font-size:2rem;
margin-left:auto;
margin-right:auto
}
}

@media (max-width: 360px) {
.latest-val {
width:70px;
height:70px;
font-size:1.8rem;
margin-left:auto;
margin-right:auto
}
}

@media (max-width: 768px) and (orientation: landscape) {
.latest-val {
width:90px;
height:90px;
font-size:2.2rem;
margin-left:auto;
margin-right:auto
}
}

/* container ko relative kar do */
.latest-val {
  position: relative;
}

/* emoji ki jagah GIF icon */
.latest-val::before {
  content: "";
  position: absolute;
  top: -45px;
  left: -40px;
  width: 120px;           /* apni need ke hisaab se size */
  height: 80px;
  display: block;
  background-image: url("icon/live.gif"); /* <-- apna GIF path */
  background-repeat: no-repeat;
  background-size: contain;   /* image ko fit rakhega */
  pointer-events: none;       /* click pass-through */
  animation: bounce 2s infinite; /* agar tumhara bounce keyframes defined hai */
}


.latest-actions {
margin-top:1.5rem;
text-align:center
}

.latest-actions a {
display:inline-flex;
align-items:center;
justify-content:center;
gap:.5rem;
padding:1rem 2rem;
background:linear-gradient(135deg,#dc143c 0%,#8b0000 100%);
color:#fff;
text-decoration:none;
border-radius:50px;
font-weight:600;
font-size:1rem;
transition:all .3s cubic-bezier(0.175,0.885,0.32,1.275);
box-shadow:0 8px 16px #dc143c4d;
border:2px solid transparent;
position:relative;
overflow:hidden
}

.latest-actions a::before {
content:'🔗';
font-size:1.2rem
}

.latest-actions a::after {
content:'';
position:absolute;
top:0;
left:-100%;
width:100%;
height:100%;
background:linear-gradient(90deg,transparent,#fff3,transparent);
transition:left .6s
}

.latest-actions a:hover::after {
left:100%
}

.latest-actions a:hover {
transform:translateY(-3px) scale(1.05);
box-shadow:0 15px 30px #dc143c66;
border-color:#ffffff4d
}

@keyframes float {
0%,100% {
transform:translateY(0px)
}

50% {
transform:translateY(-10px)
}
}

@keyframes slideInUp {
from {
opacity:0;
transform:translateY(50px)
}

to {
opacity:1;
transform:translateY(0)
}
}

@keyframes spin {
0% {
transform:rotate(0deg)
}

100% {
transform:rotate(360deg)
}
}

@keyframes innerPulse {
0%,100% {
transform:translate(-50%,-50%) scale(1);
opacity:1
}

50% {
transform:translate(-50%,-50%) scale(1.5);
opacity:.7
}
}

@keyframes resultPop {
0% {
transform:scale(0);
opacity:0
}

70% {
transform:scale(1.2);
opacity:1
}

100% {
transform:scale(1);
opacity:1
}
}

@keyframes bounce {
0%,20%,50%,80%,100% {
transform:translateY(0)
}

40% {
transform:translateY(-10px)
}

60% {
transform:translateY(-5px)
}
}

@keyframes glow {
0% {
filter:drop-shadow(0 0 5px #d4af374d)
}

100% {
filter:drop-shadow(0 0 20px #d4af3799)
}
}

@media (max-width: 768px) {
.latest-wrap {
padding:1.5rem 0
}

.latest-wrap h2 {
font-size:1.8rem
}

.latest-grid {
grid-template-columns:1fr;
gap:1rem;
padding:0 .5rem
}

.latest-item {
padding:1.5rem
}

.latest-name {
font-size:25px;
margin-bottom:1rem
}

.latest-val {
font-size:2.5rem;
margin:1rem 0
}

.latest-actions a {
padding:.8rem 1.5rem;
font-size:.9rem
}

.spin {
width:50px;
height:50px
}
}

@media (max-width: 480px) {
.latest-wrap h2 {
font-size:1.6rem
}

.latest-item {
padding:1rem;
border-radius:15px
}

.latest-name {
font-size:25px
}

.latest-val {
font-size:2rem
}

.latest-actions a {
padding:.7rem 1.2rem;
font-size:.85rem
}

.spin {
width:40px;
height:40px
}
}

@media (prefers-reduced-motion: reduce) {
.latest-item,.spin,.latest-val,.latest-name,.latest-wrap h2 {
animation:none!important;
transition:none!important
}

.latest-item:hover {
transform:none!important
}
}

@media (prefers-contrast: high) {
.latest-item {
border-width:3px;
border-color:#d4af37
}

.latest-name {
color:#fff
}

.latest-val {
color:#d4af37
}
}

@media print {
.latest-wrap {
background:#fff!important
}

.latest-item {
background:#fff!important;
border:2px solid #000!important;
box-shadow:none!important;
page-break-inside:avoid
}

.latest-actions {
display:none
}

.spin {
display:none
}
}

.latest-item.loading {
position:relative;
overflow:hidden
}

.latest-item.loading::after {
content:'';
position:absolute;
top:0;
left:-100%;
width:100%;
height:100%;
background:linear-gradient(90deg,transparent,#d4af3766,transparent);
animation:shimmer 2s infinite
}

@keyframes shimmer {
0% {
left:-100%
}

100% {
left:100%
}
}

.latest-actions a:focus {
outline:3px solid #d4af37;
outline-offset:2px
}

@media (prefers-color-scheme: dark) {
.latest-item {
background:#1a0000e6;
border-color:#d4af374d;
color:#e2e8f0
}

.latest-name {
background:linear-gradient(135deg,#e2e8f0 0%,#d4af37 100%);
background-clip:text;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent
}

.spin {
border-color:#d4af3733;
border-top-color:#d4af37
}
}

/* Optional: small flash highlight on update */
@keyframes flashPulse { 0%{box-shadow:0 0 0 rgba(255,215,0,0)} 50%{box-shadow:0 0 24px rgba(255,215,0,.35)} 100%{box-shadow:0 0 0 rgba(255,215,0,0)} }
.latest-item.flash { animation: flashPulse 700ms ease-in-out; border-radius:12px; }

.board-list {
max-width:600px;
margin:2rem auto;
padding:0 1rem
}

.board {
background:linear-gradient(135deg,#1a0000 0%,#300 100%);
border-radius:20px;
overflow:hidden;
box-shadow:0 15px 35px #00000080;
position:relative;
animation:slideInUp .8s ease-out;
border:3px solid #d4af374d
}

.board::before {
content:'🔗';
position:absolute;
top:0;
left:0;
right:0;
height:4px;
background:linear-gradient(90deg,#d4af37,#dc143c,#0d5f0d,#d4af37);
animation:colorShift 3s ease-in-out infinite
}

.board header {
background:#0000004d;
padding:1.5rem;
text-align:center;
position:relative
}

.board header::before {
content:'🔗';
font-size:12px;
display:block;
margin-bottom:.5rem;
animation:bounce 2s infinite
}

.board header h2 {
color:#d4af37;
font-size:18px;
font-weight:700;
margin:0;
text-shadow:0 2px 4px #0000004d;
line-height:1.3
}

.board-content {
background:#0003;
padding:2rem;
text-align:center;
color:#fff;
font-size:1.1rem;
line-height:1.7;
font-weight:700;
position:relative;
border-left:5px solid #d4af37;
box-shadow:inset 0 0 20px #d4af371a
}

.board-content::before {
content:'🔗';
position:absolute;
top:1rem;
right:1rem;
font-size:1.5rem;
animation:pulse 2s infinite
}

.board-image {
margin:0;
position:relative;
overflow:hidden
}

.board-image img {
width:100%;
margin:auto;
height:auto;
display:block;
transition:transform .3s ease
}

.board-image:hover img {
transform:scale(1.05)
}

.board-image figcaption {
position:absolute;
bottom:0;
left:0;
right:0;
background:linear-gradient(transparent,#000c);
color:#fff;
padding:1rem;
font-size:.9rem;
text-align:center
}

.board-btns {
background:#0003;
padding:2rem;
display:flex;
flex-direction:column;
gap:1rem;
align-items:center
}

.btn-call {
background:linear-gradient(135deg,#d4af37 0%,#b8941f 100%);
color:#000;
border:none;
padding:1.2rem 3rem;
border-radius:50px;
font-size:1.2rem;
font-weight:700;
cursor:pointer;
transition:all .3s ease;
box-shadow:0 8px 25px #d4af3766;
position:relative;
overflow:hidden;
text-transform:uppercase;
letter-spacing:1px;
animation:callPulse 2s infinite;
width:100%;
max-width:300px
}

.btn-call::before {
content:'🔗';
margin-right:.75rem;
font-size:1.3rem;
animation:ring 1.5s ease-in-out infinite
}

.btn-call::after {
content:'';
position:absolute;
top:0;
left:-100%;
width:100%;
height:100%;
background:linear-gradient(90deg,transparent,#ffffff4d,transparent);
transition:left .6s
}

.btn-call:hover::after {
left:100%
}

.btn-call:hover {
transform:translateY(-3px) scale(1.05);
box-shadow:0 15px 35px #d4af3799
}

.btn-whatsapp {
background:linear-gradient(135deg,#0d5f0d 0%,#228b22 100%);
color:#fff;
border:none;
padding:1rem 2.5rem;
border-radius:50px;
font-size:1.1rem;
font-weight:600;
cursor:pointer;
transition:all .3s ease;
box-shadow:0 6px 20px #0d5f0d66;
position:relative;
overflow:hidden;
width:100%;
max-width:300px
}

.btn-whatsapp::before {
content:'🔗';
margin-right:.75rem;
font-size:1.2rem
}

.btn-whatsapp::after {
content:'';
position:absolute;
top:0;
left:-100%;
width:100%;
height:100%;
background:linear-gradient(90deg,transparent,#ffffff4d,transparent);
transition:left .6s
}

.btn-whatsapp:hover::after {
left:100%
}

.btn-whatsapp:hover {
transform:translateY(-3px) scale(1.05);
box-shadow:0 12px 30px #0d5f0d99
}

.btn-telegram {
background:linear-gradient(135deg,#1a0000 0%,#300 100%);
color:#d4af37;
border:2px solid #d4af37;
padding:.9rem 2rem;
border-radius:50px;
font-size:1rem;
font-weight:600;
cursor:pointer;
transition:all .3s ease;
box-shadow:0 4px 15px #d4af374d;
position:relative;
overflow:hidden;
width:100%;
max-width:300px
}

.btn-telegram::before {
content:'🔗';
margin-right:.75rem;
font-size:1.1rem
}

.btn-telegram::after {
content:'';
position:absolute;
top:0;
left:-100%;
width:100%;
height:100%;
background:linear-gradient(90deg,transparent,#d4af374d,transparent);
transition:left .6s
}

.btn-telegram:hover::after {
left:100%
}

.btn-telegram:hover {
transform:translateY(-3px) scale(1.05);
box-shadow:0 10px 25px #d4af3780;
background:linear-gradient(135deg,#300 0%,#1a0000 100%)
}

.board-user {
margin-top:1.5rem;
text-align:center;
color:#ffffffe6;
font-size:.95rem;
padding:.75rem 1.5rem;
background:#0003;
border-radius:25px;
backdrop-filter:blur(10px)
}

.board-user span {
font-weight:600;
color:#d4af37
}

.board-footer {
margin-top:1rem;
text-align:center;
color:#ffffffb3;
font-size:.85rem;
padding:1rem;
border-top:1px solid #d4af3733
}

.cdate-label {
margin-right:.5rem
}

.cdate {
font-weight:600;
color:#ffffffe6
}

.notice {
display:block;
text-align:center;
padding:3rem;
background:linear-gradient(135deg,#1a0000 0%,#300 100%);
color:#d4af37;
border-radius:15px;
font-size:1.1rem;
font-weight:500;
margin:2rem auto;
max-width:400px;
box-shadow:0 8px 25px #0000004d;
border:2px solid #d4af374d
}

@keyframes slideInUp {
from {
opacity:0;
transform:translateY(50px)
}

to {
opacity:1;
transform:translateY(0)
}
}

@keyframes bounce {
0%,20%,50%,80%,100% {
transform:translateY(0)
}

40% {
transform:translateY(-10px)
}

60% {
transform:translateY(-5px)
}
}

@keyframes pulse {
0%,100% {
transform:scale(1);
opacity:1
}

50% {
transform:scale(1.1);
opacity:.7
}
}

@keyframes callPulse {
0%,100% {
box-shadow:0 8px 25px #d4af3766
}

50% {
box-shadow:0 8px 25px #d4af37cc 0 0 0 10px #d4af371a
}
}

@keyframes ring {
0%,100% {
transform:rotate(0deg)
}

25% {
transform:rotate(-10deg)
}

75% {
transform:rotate(10deg)
}
}

@keyframes colorShift {
0% {
background-position:0 50%
}

50% {
background-position:100% 50%
}

100% {
background-position:0 50%
}
}

@media (max-width: 768px) {
.board-list {
margin:1rem auto;
padding:0 .5rem
}

.board {
border-radius:15px
}

.board header {
padding:1rem
}

.board header h2 {
font-size:18px
}

.board-content {
padding:1.5rem;
font-size:1rem
}

.board-btns {
padding:1.5rem;
gap:.75rem
}

.btn-call {
padding:1rem 2rem;
font-size:1.1rem
}

.btn-whatsapp {
padding:.9rem 1.8rem;
font-size:1rem
}

.btn-telegram {
padding:.8rem 1.5rem;
font-size:.95rem
}
}

@media (max-width: 480px) {
.board header h2 {
font-size:18px
}

.board-content {
padding:1rem;
font-size:.95rem
}

.board-btns {
padding:1rem
}

.btn-call {
padding:.9rem 1.5rem;
font-size:1rem
}

.btn-whatsapp {
padding:.8rem 1.3rem;
font-size:.95rem
}

.btn-telegram {
padding:.7rem 1.2rem;
font-size:.9rem
}
}

@media (prefers-reduced-motion: reduce) {
.board,.btn-call,.btn-whatsapp,.btn-telegram {
animation:none!important
}

.board::before {
animation:none!important
}
}

@media (prefers-contrast: high) {
.board {
border-width:4px;
border-color:#d4af37
}

.btn-call,.btn-whatsapp,.btn-telegram {
border:2px solid #d4af37
}
}

.btn-call:focus,.btn-whatsapp:focus,.btn-telegram:focus {
outline:3px solid #d4af37;
outline-offset:3px
}

@media (hover: hover) {
.board:hover {
transform:translateY(-5px);
box-shadow:0 20px 40px #00000080
}

.board:hover .board-content {
background:#0000004d
}
}

@media print {
.board {
background:#fff!important;
color:#000!important;
box-shadow:none!important;
border:2px solid #000!important
}

.board-btns {
display:none
}

.board-content {
background:#fff!important;
color:#000!important
}
}

.section {
background:#1a0000e6;
backdrop-filter:blur(20px);
border:1px solid #d4af374d;
border-radius:20px;
padding:2rem;
margin:2rem auto;
max-width:90%;
width:100%;
animation:sectionSlideIn .8s ease-out;
box-shadow:0 10px 40px #0006 inset 0 1px 0 #d4af374d;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center
}

.grid2 {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:2rem;
margin:2rem auto;
padding:1rem 0;
width:100%;
max-width:800px;
justify-content:center;
align-items:center
}

.cardMini {
background:linear-gradient(135deg,#1a0000e6 0%,#300c 100%);
backdrop-filter:blur(25px);
border:1px solid #d4af374d;
border-radius:20px;
padding:2.5rem 2rem;
text-align:center;
position:relative;
overflow:hidden;
margin:0 auto;
box-shadow:0 15px 45px #0006 inset 0 1px 0 #d4af374d 0 0 0 1px #d4af371a;
transition:all .4s cubic-bezier(0.4,0,0.2,1);
animation:cardFadeInUp .8s ease-out;
animation-fill-mode:both;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center
}

.cardMini:hover {
transform:translateY(-8px) scale(1.03);
box-shadow:0 25px 60px #d4af3766 inset 0 1px 0 #d4af3780 0 0 0 2px #d4af374d 0 0 30px #d4af3733;
background:linear-gradient(135deg,#330000e6 0%,#1a0000cc 100%)
}

.cardMini::before {
content:'🔗';
position:absolute;
top:-50%;
left:-50%;
width:200%;
height:200%;
background:linear-gradient(45deg,transparent,#d4af371a,transparent);
transform:rotate(45deg);
transition:all .6s ease;
opacity:0
}

.cardMini:hover::before {
animation:cardShine 1.5s ease-in-out;
opacity:1
}

.cardMini .date {
font-family:'Inter',sans-serif;
font-size:clamp(0.9rem,2vw,1.1rem);
font-weight:600;
letter-spacing:.5px;
text-transform:uppercase;
text-align:center;
color:#ffffffe6;
text-shadow:0 2px 8px #0000004d;
margin:0 auto 1.5rem;
padding:.5rem 1rem;
width:fit-content;
background:#0003;
border:1px solid #d4af3733;
border-radius:25px;
backdrop-filter:blur(10px);
transition:all .3s ease
}

.cardMini:hover .date {
color:#d4af37;
background:#d4af371a;
border-color:#d4af374d;
text-shadow:0 2px 12px #d4af3780
}

.cardMini .val {
font-family:'Inter',sans-serif;
font-size:clamp(2.5rem,6vw,4rem);
font-weight:800;
line-height:1;
text-align:center;
background:linear-gradient(135deg,#d4af37 0%,#dc143c 50%,#d4af37 100%);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
text-shadow:0 5px 20px #d4af3766;
filter:drop-shadow(0 3px 6px #0000004d);
margin:0 auto;
padding:1rem 0;
width:fit-content;
animation:valueGlow 3s ease-in-out infinite alternate;
transition:all .3s ease
}

.cardMini:hover .val {
transform:scale(1.1);
text-shadow:0 5px 25px #d4af37cc 0 0 40px #d4af3766;
animation:valueIntensePulse 1.5s ease-in-out infinite
}

@media (min-width: 1440px) {
.section {
max-width:1200px;
margin:3rem auto
}

.grid2 {
gap:3rem;
margin:3rem auto;
max-width:900px
}

.cardMini {
padding:3rem 2.5rem
}

.cardMini .val {
font-size:4rem
}
}

@media (min-width: 1024px) and (max-width: 1439px) {
.section {
max-width:1000px;
margin:2.5rem auto
}

.grid2 {
gap:2.5rem;
max-width:800px;
margin:2.5rem auto
}

.cardMini {
padding:2.5rem 2rem
}
}

@media (min-width: 768px) and (max-width: 1023px) {
.section {
max-width:95%;
margin:2rem auto
}

.grid2 {
grid-template-columns:repeat(2,1fr);
gap:2rem;
margin:2rem auto;
max-width:700px
}

.cardMini {
padding:2rem 1.5rem
}

.cardMini .val {
font-size:3rem
}
}

@media (min-width: 480px) and (max-width: 767px) {
.section {
max-width:98%;
margin:1.5rem auto;
padding:1.5rem
}

.grid2 {
grid-template-columns:1fr;
gap:1.5rem;
margin:1.5rem auto;
max-width:400px
}

.cardMini {
padding:2rem 1.5rem;
border-radius:15px;
margin:0 auto
}

.cardMini .val {
font-size:2.8rem
}
}

@media (max-width: 479px) {
.section {
padding:1.5rem;
margin:1rem auto;
max-width:98%
}

.grid2 {
grid-template-columns:1fr;
gap:1rem;
margin:1rem auto;
max-width:350px
}

.cardMini {
padding:1.5rem 1rem;
border-radius:12px;
margin:0 auto
}

.cardMini .date {
font-size:.8rem;
margin-bottom:1rem;
padding:.4rem .8rem
}

.cardMini .val {
font-size:2.2rem
}

.cardMini:hover {
transform:translateY(-4px) scale(1.02)
}
}

.center-container {
display:flex;
justify-content:center;
align-items:center;
width:100%;
margin:0 auto
}

.center-text {
text-align:center!important
}

.center-block {
margin-left:auto!important;
margin-right:auto!important
}

@keyframes sectionSlideIn {
from {
opacity:0;
transform:translateY(30px)
}

to {
opacity:1;
transform:translateY(0)
}
}

@keyframes cardFadeInUp {
from {
opacity:0;
transform:translateY(40px) scale(0.95)
}

to {
opacity:1;
transform:translateY(0) scale(1)
}
}

@keyframes cardShine {
0% {
transform:translateX(-100%) translateY(-100%) rotate(45deg)
}

100% {
transform:translateX(100%) translateY(100%) rotate(45deg)
}
}

@keyframes valueGlow {
from {
text-shadow:0 5px 20px #d4af3766;
filter:drop-shadow(0 3px 6px #0000004d)
}

to {
text-shadow:0 5px 25px #d4af3799 0 0 30px #d4af374d;
filter:drop-shadow(0 5px 10px #0006)
}
}

@keyframes valueIntensePulse {
0%,100% {
transform:scale(1.1)
}

50% {
transform:scale(1.15)
}
}

.satta-btn-container {
display:flex;
justify-content:center;
align-items:center;
margin:2rem auto;
padding:0 1rem;
max-width:100%
}

.satta-btn-box {
display:flex;
flex-direction:column;
width:100%;
max-width:400px;
background:linear-gradient(135deg,#1a0000f2 0%,#330000f2 100%);
border:2px solid #d4af374d;
border-radius:20px;
padding:1.5rem;
box-shadow:0 15px 35px #0006 inset 0 1px 0 #d4af3733;
position:relative;
overflow:hidden;
animation:boxFadeIn .8s ease-out;
transition:all .3s ease
}

.satta-btn-box::before {
content:'';
position:absolute;
top:0;
left:0;
right:0;
height:4px;
background:linear-gradient(90deg,#d4af37,#dc143c,#d4af37);
animation:colorShift 3s ease-in-out infinite
}

.satta-btn-box:hover {
transform:translateY(-5px);
box-shadow:0 20px 40px #00000080 inset 0 1px 0 #d4af374d 0 0 20px #d4af3733;
border-color:#d4af3780
}

.satta-btn {
display:flex;
align-items:center;
justify-content:center;
gap:.75rem;
width:100%;
padding:1.2rem 2rem;
background:linear-gradient(135deg,#d4af37 0%,#b8941f 50%,#d4af37 100%);
color:#000;
font-family:'Inter','Segoe UI',Roboto,sans-serif;
font-size:1.2rem;
font-weight:700;
text-decoration:none;
text-transform:uppercase;
letter-spacing:.5px;
border-radius:50px;
border:2px solid #d4af3780;
box-shadow:0 8px 25px #d4af3766 inset 0 1px 0 #fff3;
position:relative;
overflow:hidden;
transition:all .3s cubic-bezier(0.175,0.885,0.32,1.275);
transform:translateY(0);
z-index:1;
margin-bottom:1rem
}

.satta-btn .icon {
font-size:1.5rem;
filter:drop-shadow(0 2px 4px #0003);
animation:iconFloat 3s ease-in-out infinite
}

.satta-btn .btn-glow {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:linear-gradient(135deg,#dc143ccc 0%,#8b0000cc 100%);
border-radius:50px;
opacity:0;
transition:opacity .3s ease;
z-index:-1
}

.satta-btn:hover {
transform:translateY(-3px) scale(1.02);
background:linear-gradient(135deg,#dc143c 0%,#8b0000 50%,#dc143c 100%);
color:#fff;
border-color:#dc143ccc;
box-shadow:0 15px 35px #dc143c80 inset 0 1px 0 #fff3 0 0 20px #dc143c4d
}

.satta-btn:hover .btn-glow {
opacity:1
}

.satta-btn:hover .icon {
animation:iconSpin .6s ease-in-out
}

.satta-btn:active {
transform:translateY(-1px) scale(1.01);
box-shadow:0 8px 20px #dc143c66 inset 0 1px 0 #ffffff1a
}

.satta-btn::before {
content:'';
position:absolute;
top:0;
left:-100%;
width:100%;
height:100%;
background:linear-gradient(90deg,transparent,#ffffff4d,transparent);
transition:left .6s ease;
z-index:2
}

.satta-btn:hover::before {
left:100%
}

.satta-tooltip {
display:flex;
align-items:center;
gap:.75rem;
color:#fff;
font-size:.9rem;
line-height:1.4;
text-align:center;
padding:.5rem;
background:#0003;
border-radius:10px;
border:1px solid #d4af3733;
margin-top:.5rem;
animation:tooltipFadeIn .8s ease-out .3s both
}

.tooltip-icon {
font-size:1.2rem;
flex-shrink:0;
animation:tooltipIconPulse 2s ease-in-out infinite
}

@keyframes boxFadeIn {
from {
opacity:0;
transform:translateY(20px)
}

to {
opacity:1;
transform:translateY(0)
}
}

@keyframes iconFloat {
0%,100% {
transform:translateY(0)
}

50% {
transform:translateY(-3px)
}
}

@keyframes iconSpin {
0% {
transform:rotate(0deg)
}

100% {
transform:rotate(360deg)
}
}

@keyframes tooltipFadeIn {
from {
opacity:0;
transform:translateY(10px)
}

to {
opacity:1;
transform:translateY(0)
}
}

@keyframes tooltipIconPulse {
0%,100% {
transform:scale(1)
}

50% {
transform:scale(1.1)
}
}

@keyframes colorShift {
0% {
background-position:0 50%
}

50% {
background-position:100% 50%
}

100% {
background-position:0 50%
}
}

@media (max-width: 768px) {
.satta-btn-container {
margin:1.5rem auto
}

.satta-btn-box {
padding:1.2rem;
max-width:350px
}

.satta-btn {
padding:1rem 1.5rem;
font-size:1.1rem;
margin-bottom:.8rem
}

.satta-btn .icon {
font-size:1.3rem
}

.satta-tooltip {
font-size:.85rem;
padding:.4rem
}
}

@media (max-width: 480px) {
.satta-btn-container {
margin:1rem auto;
padding:0 .5rem
}

.satta-btn-box {
padding:1rem;
max-width:300px;
border-radius:15px
}

.satta-btn {
padding:.9rem 1.2rem;
font-size:1rem;
border-radius:40px;
margin-bottom:.6rem
}

.satta-btn .icon {
font-size:1.2rem
}

.satta-tooltip {
font-size:.8rem;
flex-direction:column;
text-align:center;
gap:.5rem;
padding:.3rem
}
}

@media (prefers-reduced-motion: reduce) {
.satta-btn-box,.satta-btn,.satta-btn .icon,.satta-tooltip,.tooltip-icon {
animation:none!important;
transition:none!important
}

.satta-btn:hover,.satta-btn-box:hover {
transform:none!important
}
}

.satta-btn:focus {
outline:3px solid #d4af37;
outline-offset:3px
}

.satta-btn.loading {
pointer-events:none;
opacity:.7
}

.satta-btn.loading::after {
content:'';
position:absolute;
width:20px;
height:20px;
top:50%;
left:50%;
margin-left:-10px;
margin-top:-10px;
border:2px solid #0003;
border-top:2px solid #fff;
border-radius:50%;
animation:spin 1s linear infinite
}

@keyframes spin {
to {
transform:rotate(360deg)
}
}

.sticky-app-link {
position:fixed;
bottom:20px;
left:20px;
z-index:1000;
animation:slideInUp .8s ease-out
}

.sticky-link {
display:flex;
align-items:center;
gap:.5rem;
background:linear-gradient(135deg,#dc143c 0%,#8b0000 50%,#dc143c 100%);
color:#fff;
text-decoration:none;
padding:.8rem 1.2rem;
border-radius:50px;
border:2px solid #dc143c80;
box-shadow:0 8px 25px #dc143c66 inset 0 1px 0 #fff3;
font-family:'Inter','Segoe UI',Roboto,sans-serif;
font-size:.85rem;
font-weight:600;
text-transform:uppercase;
letter-spacing:.3px;
position:relative;
overflow:hidden;
transition:all .3s cubic-bezier(0.175,0.885,0.32,1.275);
white-space:nowrap;
max-width:250px
}

.sticky-icon {
font-size:1rem;
flex-shrink:0;
animation:stickyIconBounce 2s ease-in-out infinite
}

.sticky-text {
line-height:1.2
}

.sticky-glow {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:linear-gradient(135deg,#d4af37cc 0%,#8b0000cc 100%);
border-radius:50px;
opacity:0;
transition:opacity .3s ease;
z-index:-1
}

.sticky-link:hover {
transform:translateY(-3px) scale(1.05);
background:linear-gradient(135deg,#d4af37 0%,#b8941f 50%,#d4af37 100%);
color:#000;
border-color:#d4af37cc;
box-shadow:0 15px 35px #d4af3780 inset 0 1px 0 #fff3 0 0 20px #d4af374d;
max-width:280px
}

.sticky-link:hover .sticky-glow {
opacity:1
}

.sticky-link:hover .sticky-icon {
animation:stickyIconSpin .6s ease-in-out
}

.sticky-link:active {
transform:translateY(-1px) scale(1.02);
box-shadow:0 8px 20px #dc143c66 inset 0 1px 0 #ffffff1a
}

.sticky-link::before {
content:'';
position:absolute;
top:0;
left:-100%;
width:100%;
height:100%;
background:linear-gradient(90deg,transparent,#ffffff4d,transparent);
transition:left .6s ease;
z-index:2
}

.sticky-link:hover::before {
left:100%
}

.sticky-link::after {
content:'';
position:absolute;
top:-4px;
left:-4px;
right:-4px;
bottom:-4px;
background:linear-gradient(135deg,#dc143c,#8b0000,#dc143c);
border-radius:50px;
opacity:0;
z-index:-2;
animation:stickyPulse 3s ease-in-out infinite
}

.sticky-link:hover::after {
opacity:.6
}

@keyframes slideInUp {
from {
opacity:0;
transform:translateY(100px)
}

to {
opacity:1;
transform:translateY(0)
}
}

@keyframes stickyIconBounce {
0%,20%,50%,80%,100% {
transform:translateY(0)
}

40% {
transform:translateY(-3px)
}

60% {
transform:translateY(-1px)
}
}

@keyframes stickyIconSpin {
0% {
transform:rotate(0deg)
}

100% {
transform:rotate(360deg)
}
}

@keyframes stickyPulse {
0%,100% {
opacity:0;
transform:scale(1)
}

50% {
opacity:.3;
transform:scale(1.05)
}
}

@media (max-width: 768px) {
.sticky-app-link {
bottom:15px;
left:15px
}

.sticky-link {
padding:.7rem 1rem;
font-size:.75rem;
max-width:220px
}

.sticky-link:hover {
max-width:240px
}

.sticky-icon {
font-size:.9rem
}

.sticky-text {
display:inline
}
}

@media (max-width: 480px) {
.sticky-app-link {
bottom:10px;
left:10px
}

.sticky-link {
padding:.6rem .8rem;
font-size:.7rem;
max-width:180px;
border-radius:40px
}

.sticky-link:hover {
max-width:200px
}

.sticky-icon {
font-size:.8rem
}

.sticky-text {
display:inline
}
}

@media (max-width: 360px) {
.sticky-app-link {
bottom:8px;
left:8px
}

.sticky-link {
padding:.5rem .7rem;
font-size:.65rem;
max-width:160px
}

.sticky-link:hover {
max-width:180px
}

.sticky-text {
display:inline
}
}

@media (max-width: 768px) {
.sticky-app-link {
bottom:15px
}
}

@media (prefers-reduced-motion: reduce) {
.sticky-app-link,.sticky-link,.sticky-icon {
animation:none!important;
transition:none!important
}

.sticky-link:hover {
transform:none!important
}
}

.sticky-link:focus {
outline:3px solid #d4af37;
outline-offset:2px
}

@media print {
.sticky-app-link {
display:none
}
}

@media (max-width: 480px) {
.sticky-app-link.scrolled {
transform:scale(0.9);
opacity:.9
}

.sticky-app-link.scrolled:hover {
transform:scale(1);
opacity:1
}
}
/* ===== CHART SECTIONS (BOTH MONTHLY AND YEARLY) ===== */
div:has(> h2) {
    background: linear-gradient(135deg, rgba(26, 0, 0, 0.95) 0%, rgba(51, 0, 0, 0.95) 100%);
    border: 2px solid rgba(212, 175, 55, 0.3);
    border-radius: 15px;
    padding: 1.5rem;
    margin: 1.5rem auto;
    max-width: 500px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
    position: relative;
    overflow: hidden;
}

div:has(> h2)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #d4af37, #dc143c, #d4af37);
}

/* ===== HEADING ===== */
div:has(> h2) h2 {
    color: #ffffff;
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
    margin: 0 0 1.5rem 0;
    padding: 0.8rem;
    background: rgba(212, 175, 55, 0.1);
    border-radius: 10px;
    border: 1px solid rgba(212, 175, 55, 0.2);
}

/* ===== FORM ===== */
.form {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    align-items: center;
}

.form > div {
    width: 100%;
    max-width: 280px;
    text-align: center;
}

/* ===== LABEL ===== */
.small {
    display: block;
    color: #d4af37;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
}

/* ===== INPUTS ===== */
input[type="month"],
select {
    width: 100%;
    padding: 0.8rem 1rem;
    background: rgba(0, 0, 0, 0.4);
    border: 2px solid rgba(212, 175, 55, 0.3);
    border-radius: 10px;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Select dropdown specific styling */
select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23d4af37' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 3rem;
}

/* Option styling */
select option {
    background: #1a0000;
    color: #ffffff;
    padding: 0.5rem;
}

/* Input hover and focus states */
input[type="month"]:hover,
select:hover {
    border-color: rgba(212, 175, 55, 0.5);
    background: rgba(0, 0, 0, 0.5);
}

input[type="month"]:focus,
select:focus {
    outline: none;
    border-color: #d4af37;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2);
}

/* ===== BUTTON ===== */
.btn {
    background: linear-gradient(135deg, #d4af37 0%, #b8941f 50%, #d4af37 100%);
    color: #000000;
    border: none;
    padding: 0.8rem 2rem;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4);
    min-width: 120px;
}

.btn:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, #dc143c 0%, #8b0000 50%, #dc143c 100%);
    color: #ffffff;
    box-shadow: 0 10px 25px rgba(220, 20, 60, 0.5);
}

.btn:active {
    transform: translateY(0);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    div:has(> h2) {
        padding: 1.2rem;
        margin: 1.2rem auto;
    }
    
    div:has(> h2) h2 {
        font-size: 1.3rem;
        padding: 0.6rem;
    }
    
    .form {
        gap: 1rem;
    }
    
    input[type="month"],
    select {
        padding: 0.7rem 0.9rem;
        font-size: 0.95rem;
    }
    
    select {
        padding-right: 2.5rem;
    }
    
    .btn {
        padding: 0.7rem 1.8rem;
        font-size: 0.95rem;
    }
}

@media (max-width: 480px) {
    div:has(> h2) {
        padding: 1rem;
        margin: 1rem auto;
        border-radius: 12px;
    }
    
    div:has(> h2) h2 {
        font-size: 1.2rem;
        padding: 0.5rem;
    }
    
    .form > div {
        max-width: 240px;
    }
    
    input[type="month"],
    select {
        padding: 0.6rem 0.8rem;
        font-size: 0.9rem;
    }
    
    select {
        padding-right: 2.2rem;
    }
    
    .btn {
        padding: 0.6rem 1.5rem;
        font-size: 0.9rem;
        min-width: 100px;
    }
}

/* ===== Fancy Footer Links (same dark theme) ===== */
.footer-charts{margin-top:16px}
.footer-charts h4{
  margin:0 0 10px;
  font-size:1.05rem;
  color:#ffe999;
  letter-spacing:.2px;
}

/* grid */
.footer-charts .links{
  display:grid; gap:10px;
  grid-template-columns:repeat(4,minmax(0,1fr));
}
@media (max-width:1200px){ .footer-charts .links{grid-template-columns:repeat(3,1fr);} }
@media (max-width:800px){ .footer-charts .links{grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){ .footer-charts .links{grid-template-columns:1fr;} }

/* link chip */
.link-chip{
  --brand1:#ffd600; --brand2:#ff9a00;
  display:flex; align-items:center; gap:.55rem;
  padding:.62rem .75rem;
  border:1px solid var(--line, #24263a);
  border-radius:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00));
  text-decoration:none; color:#e8edf6;
  position:relative; overflow:hidden;
  transition:border-color .18s ease, box-shadow .18s ease, transform .12s ease, background .18s ease;
}
.link-chip .ico{
  width:14px; height:14px; flex:0 0 14px;
  color:#cbd5e1;
  display:inline-block;
}
.link-chip .ico svg{ display:block; width:100%; height:100%; fill:currentColor }

/* animated underline only on text */
.link-chip .txt{
  line-height:1.25;
  background:linear-gradient(90deg, var(--brand1), var(--brand2)) 0 100% / 0 2px no-repeat;
  transition:background-size .28s ease, color .18s ease;
}
.link-chip .nick{ color:var(--muted, #9aa0ad); }

/* hover / focus */
.link-chip:hover,
.link-chip:focus-visible{
  border-color:color-mix(in oklab, var(--brand1) 55%, #ffffff 0%);
  box-shadow:0 0 0 1px rgba(255,214,0,.25) inset,
             0 0 16px rgba(255,154,0,.10);
  transform:translateY(-1px);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  outline:none;
}
.link-chip:hover .ico,
.link-chip:focus-visible .ico{ color:var(--brand1); }
.link-chip:hover .txt,
.link-chip:focus-visible .txt{ background-size:100% 2px; }

/* subtle dotted baseline for non-hover state (optional) */
.link-chip .txt{ text-decoration:none; }

/* make it denser inside dark footer columns */
.footer-charts .links .link-chip{ padding:.58rem .7rem }
/* ========= THEME TOKENS ========= */
:root{
  --bg: #0b1220;           /* page bg (dark) */
  --panel: #0f172a;        /* card bg */
  --panel-2: #0b1220;      /* alt panel */
  --border: rgba(148,163,184,.18);
  --text: #e5e7eb;
  --muted: #9aa4b2;
  --accent: #22d3ee;       /* cyan */
  --accent-2: #d4af37;     /* gold */
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#ffffff; --panel:#f8fafc; --panel-2:#ffffff;
    --border:rgba(2,6,23,.12);
    --text:#0f172a; --muted:#475569;
    --accent:#0891b2; --accent-2:#946400;
    --shadow: 0 10px 24px rgba(2,6,23,.10);
  }
}

/* ========= BOOKMARK WIDGET ========= */
.sk-bm{
  display:flex; align-items:center; gap:14px;
  background: linear-gradient(180deg, rgba(34,211,238,.07), rgba(34,211,238,.03)) , var(--panel);
  border:1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: var(--shadow);
}
.sk-bm .sk-bm-title{
  font-weight:600; color:var(--text);
}
.sk-bm .sk-bm-tip{
  font-size:.9rem; color:var(--muted);
}
.sk-kbd{
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 8px; border-radius:8px;
  border:1px solid var(--border);
  background: rgba(2,6,23,.18);
  font: 500 .85rem ui-monospace, Menlo, Consolas, monospace;
  color: var(--text);
}
.sk-bm .sk-bm-spacer{ flex:1; }

.sk-bm-btn{
  appearance:none; cursor:pointer;
  padding:10px 14px; border-radius:999px;
  border:1px solid rgba(34,211,238,.4);
  background: radial-gradient(120% 120% at 10% 10%, rgba(34,211,238,.25), transparent 60%) , var(--panel-2);
  color: var(--text); font-weight:600;
  transition: transform .12s ease, box-shadow .12s ease, background .2s ease;
}
.sk-bm-btn:hover{ transform: translateY(-1px); box-shadow: 0 6px 18px rgba(34,211,238,.18); }
.sk-bm-btn:active{ transform: translateY(0); }
.sk-bm-btn:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px rgba(34,211,238,.18);
}

/* Bookmark toast (shown by JS via .show) */
.sk-bm-toast{
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%) translateY(16px);
  background: var(--panel); color:var(--text);
  border:1px solid var(--border);
  padding:10px 14px; border-radius: 12px;
  box-shadow: var(--shadow);
  opacity:0; pointer-events:none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 9999;
}
.sk-bm-toast.show{
  opacity:1; transform: translateX(-50%) translateY(0);
  pointer-events:auto;
}

/* ========= PWA INSTALL BANNER ========= */
.sk-pwa{
  position: fixed; inset-inline:0; bottom: 16px;
  display:flex; justify-content:center; z-index: 9998;
  pointer-events:none; /* container transparent to clicks except banner */
}
.sk-pwa-banner{
  width: min(100% - 24px, 880px);
  display:flex; align-items:center; gap:12px;
  background: linear-gradient(180deg, rgba(212,175,55,.12), rgba(212,175,55,.04)), var(--panel);
  border:1px solid var(--border);
  border-radius: 16px; padding:12px 14px;
  box-shadow: var(--shadow);
  pointer-events:auto; /* clickable */
  animation: skSlideUp .35s ease both;
}
.sk-pwa-banner.hide{ animation: skSlideDown .25s ease both; }
.sk-pwa-logo{
  width:42px; height:42px; border-radius: 10px; flex:0 0 auto;
  background-size: cover; background-position: center;
  border:1px solid var(--border);
  /* Optionally set via inline style to your icon:
     style="background-image:url('/icon/android-chrome-192x192.png')" */
}
.sk-pwa-title{
  font-weight:700; color:var(--text); line-height:1.2;
}
.sk-pwa-sub{ font-size:.92rem; color:var(--muted); }
.sk-pwa-actions{ margin-inline-start:auto; display:flex; gap:8px; }

.sk-btn{
  appearance:none; cursor:pointer; user-select:none;
  padding:10px 14px; border-radius: 999px; border:1px solid var(--border);
  background: var(--panel-2); color: var(--text); font-weight:600;
  transition: transform .12s ease, box-shadow .12s ease, background .2s ease, border-color .2s ease;
}
.sk-btn:hover{ transform: translateY(-1px); }
.sk-btn:active{ transform: translateY(0); }
.sk-btn:focus-visible{
  outline: 2px solid var(--accent); outline-offset: 2px;
  box-shadow: 0 0 0 6px rgba(34,211,238,.18);
}
.sk-btn-primary{
  border-color: rgba(212,175,55,.55);
  background: radial-gradient(120% 120% at 15% 10%, rgba(212,175,55,.25), transparent 60%), var(--panel-2);
}
.sk-btn-primary:hover{
  box-shadow: 0 6px 18px rgba(212,175,55,.18);
}
.sk-btn-ghost{
  background: transparent;
}

/* Animations */
@keyframes skSlideUp{
  from{ transform: translateY(16px); opacity:0; }
  to{ transform: translateY(0); opacity:1; }
}
@keyframes skSlideDown{
  from{ transform: translateY(0); opacity:1; }
  to{ transform: translateY(16px); opacity:0; }
}

/* Responsive stack */
@media (max-width: 600px){
  .sk-bm{ flex-wrap:wrap; align-items:flex-start; }
  .sk-bm .sk-bm-spacer{ display:none; }
  .sk-pwa-banner{ align-items:flex-start; }
  .sk-pwa-actions{ width:100%; justify-content:flex-end; }
}

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce){
  .sk-bm-btn, .sk-btn{ transition:none; }
  .sk-bm-toast, .sk-pwa-banner{ animation:none; }
}
/* ===== SOCIAL SHARE BOX ===== */
         .sharebox {
         background: var(--c-card, #232323);
         border: 1px solid var(--c-line, #2a2a2a);
         border-radius: 12px;
         padding: 16px;
         margin: 20px 0;
         box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
         text-align: left;
         max-width: 100%;
         }
         .sharebox__title {
         margin: 0 0 12px 0;
         font-size: var(--fs-l, 16px);
         font-weight: 700;
         color: var(--c-accent, #ffd600);
         display: flex;
         align-items: center;
         gap: 8px;
         }
         .sharebox__title::before {
         content: "🔗";
         font-size: 1.2em;
         }
         .sharebox__row {
         display: flex;
         flex-wrap: wrap;
         gap: 10px;
         margin-bottom: 12px;
         align-items: flex-start;
         justify-content: flex-start;
         }
         .sharebtn {
         display: inline-flex;
         align-items: center;
         justify-content: center;
         width: 44px;
         height: 44px;
         background: var(--c-head, #181818);
         border: 1px solid var(--c-line, #2a2a2a);
         border-radius: 8px;
         color: var(--c-text, #ffffff);
         text-decoration: none;
         transition: all 0.2s ease;
         position: relative;
         overflow: hidden;
         }
         .sharebtn:hover {
         transform: translateY(-2px);
         box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
         }
         .sharebtn:focus {
         outline: 2px dashed var(--c-accent, #ffd600);
         outline-offset: 2px;
         }
         .sharebtn svg {
         width: 20px;
         height: 20px;
         fill: currentColor;
         }
         /* Individual social network button colors */
         .sharebtn[data-net="x"]:hover {
         background: #000;
         color: #fff;
         }
         .sharebtn[data-net="facebook"]:hover {
         background: #1877f2;
         color: #fff;
         }
         .sharebtn[data-net="whatsapp"]:hover {
         background: #25d366;
         color: #fff;
         }
         .sharebtn[data-net="telegram"]:hover {
         background: #0088cc;
         color: #fff;
         }
         .sharebtn[data-net="linkedin"]:hover {
         background: #0077b5;
         color: #fff;
         }
         .sharebtn[data-net="reddit"]:hover {
         background: #ff4500;
         color: #fff;
         }
         .sharebtn[data-net="pinterest"]:hover {
         background: #e60023;
         color: #fff;
         }
         .sharebtn[data-net="email"]:hover {
         background: #ea4335;
         color: #fff;
         }
         .sharebtn--native {
         background: linear-gradient(135deg, var(--c-accent, #ffd600), #ffea00);
         color: #000;
         width: auto;
         padding: 0 12px;
         gap: 6px;
         }
         .sharebtn--native span:not(.sr-only) {
         font-weight: 600;
         font-size: var(--fs-s, 14px);
         }
         .sharebtn--copy {
         position: relative;
         }
         .sharebtn--copy.ok {
         background: var(--c-green, #00e676);
         color: var(--c-head, #181818);
         }
         .sharebox__note {
         margin: 0;
         font-size: var(--fs-xxs, 13px);
         color: var(--c-dim, #d1d1d1);
         text-align: left;
         padding-top: 8px;
         border-top: 1px solid var(--c-line, #2a2a2a);
         }
         /* Screen reader only text */
         .sr-only {
         position: absolute;
         width: 1px;
         height: 1px;
         padding: 0;
         margin: -1px;
         overflow: hidden;
         clip: rect(0, 0, 0, 0);
         white-space: nowrap;
         border: 0;
         }
         /* Mobile Responsive */
         @media (max-width: 768px) {
         .sharebox {
         padding: 14px;
         margin: 16px 0;
         }
         .sharebox__title {
         font-size: var(--fs-m, 15px);
         margin-bottom: 10px;
         }
         .sharebox__row {
         gap: 8px;
         margin-bottom: 10px;
         }
         .sharebtn {
         width: 40px;
         height: 40px;
         }
         .sharebtn svg {
         width: 18px;
         height: 18px;
         }
         .sharebtn--native {
         padding: 0 10px;
         }
         .sharebtn--native span:not(.sr-only) {
         font-size: var(--fs-xxs, 13px);
         }
         }
         @media (max-width: 480px) {
         .sharebox {
         padding: 12px;
         margin: 14px 0;
         }
         .sharebox__title {
         font-size: var(--fs-s, 14px);
         }
         .sharebox__row {
         gap: 6px;
         }
         .sharebtn {
         width: 38px;
         height: 38px;
         }
         .sharebtn svg {
         width: 16px;
         height: 16px;
         }
         .sharebtn--native {
         padding: 0 8px;
         }
         .sharebox__note {
         font-size: 11px;
         }
         }
         /* Animation for copy button */
         @keyframes copySuccess {
         0% { transform: scale(1); }
         50% { transform: scale(1.1); }
         100% { transform: scale(1); }
         }
         .sharebtn--copy.ok {
         animation: copySuccess 0.3s ease;
         }
         /* Dark theme adjustments for better contrast */
         .sharebtn:hover svg {
         filter: brightness(1.2);
         }
         .sharebtn--native:hover {
         background: linear-gradient(135deg, #fff176, var(--c-accent, #ffd600));
         }
         /* Focus visible for better accessibility */
         .sharebtn:focus-visible {
         outline: 2px solid var(--c-accent, #ffd600);
         outline-offset: 2px;
         }
         /* ========== Advice Widget Styles (self-contained) ========== */
    .adw {
      margin: 14px 0 10px; padding: 12px; border-radius: 16px;
      background: rgba(2,6,23,.35); border: 1px solid rgba(148,163,184,.22);
    }
    .adw .adw-content h2, .adw .adw-content h6 { margin: 4px 0 8px; }
    .adw-window { display:inline-block; margin-top:6px; opacity:.85; }

    .adw-vote {
      display:flex; align-items:center; gap:10px; margin-top:10px;
    }
    .adw-btn {
      display:inline-flex; align-items:center; gap:8px;
      padding:8px 12px; border-radius:999px; border:1px solid rgba(148,163,184,.22);
      background: rgba(2,6,23,.45); color:#e5e7eb; cursor:pointer;
      font-size: .95rem; line-height:1; user-select:none;
      transition: transform .06s ease, box-shadow .12s ease, border-color .12s ease;
    }
    .adw-btn:hover { box-shadow:0 6px 18px rgba(0,0,0,.25); transform:translateY(-1px); }
    .adw-btn.active.high { border-color:#d4af37; box-shadow:0 0 0 2px rgba(212,175,55,.25) inset; }
    .adw-btn.active.low  { border-color:#22d3ee; box-shadow:0 0 0 2px rgba(34,211,238,.25) inset; }
    .adw-btn .cnt { font-weight:700; opacity:.95; }

    /* Tug-of-war track */
    .tug {
      position: relative; flex:1 1 auto; height: 34px; overflow: visible;
    }
    .rope {
      position:absolute; top:14px; height:6px; width:50%;
      background: repeating-linear-gradient(45deg, #d2b48c 0 6px, #a98248 6px 12px);
      border-radius: 6px;
      box-shadow: inset 0 1px 2px rgba(0,0,0,.35);
    }
    .rope.left { left:0; border-top-right-radius:0; border-bottom-right-radius:0; }
    .rope.right { right:0; border-top-left-radius:0; border-bottom-left-radius:0; }

    .knot {
      --left: 50%;
      position:absolute; top:6px; left: var(--left);
      width:22px; height:22px; border-radius:50%;
      background: radial-gradient(ellipse at 30% 30%, #f7e7a6, #d4af37 60%, #8f6b00 100%);
      border: 1px solid rgba(0,0,0,.35);
      transform: translateX(-50%);
      transition: left 450ms cubic-bezier(.2,.8,.2,1);
      box-shadow: 0 2px 6px rgba(0,0,0,.35), inset 0 1px 2px rgba(255,255,255,.35);
      z-index: 2;
    }

    /* Jiggle animations while “pulling” */
    .tug.tugging-left  .rope.left  { animation: jiggle-left 300ms ease-in-out 4; }
    .tug.tugging-right .rope.right { animation: jiggle-right 300ms ease-in-out 4; }
    @keyframes jiggle-left  { 0%,100%{transform:translateX(0)} 50%{transform:translateX(-2px)} }
    @keyframes jiggle-right { 0%,100%{transform:translateX(0)} 50%{transform:translateX(2px)} }

    /* Emoji bursts */
    .burst { position:absolute; left:50%; top:-4px; width:0; height:0; pointer-events:none; z-index:3; }
    .burst span {
      position:absolute; font-size:18px; opacity:0; transform:translate(-50%,0) scale(.6);
      animation: floatUp 900ms ease-out forwards;
    }
    @keyframes floatUp {
      0%   { opacity:0; transform:translate(-50%, 6px)  scale(.6); }
      30%  { opacity:1; transform:translate(-50%, -6px) scale(1); }
      100% { opacity:0; transform:translate(-50%, -28px) scale(.9); }
    }
    /* ========== Advice Widget Styles (self-contained) ========== */
    .adw {
      margin: 14px 0 10px; padding: 12px; border-radius: 16px;
      background: rgba(2,6,23,.35); border: 1px solid rgba(148,163,184,.22);
    }
    .adw .adw-content h2, .adw .adw-content h6 { margin: 4px 0 8px; }
    .adw-window { display:inline-block; margin-top:6px; opacity:.85; }

    .adw-vote {
      display:flex; align-items:center; gap:10px; margin-top:10px;
    }
    .adw-btn {
      display:inline-flex; align-items:center; gap:8px;
      padding:8px 12px; border-radius:999px; border:1px solid rgba(148,163,184,.22);
      background: rgba(2,6,23,.45); color:#e5e7eb; cursor:pointer;
      font-size: .95rem; line-height:1; user-select:none;
      transition: transform .06s ease, box-shadow .12s ease, border-color .12s ease;
    }
    .adw-btn:hover { box-shadow:0 6px 18px rgba(0,0,0,.25); transform:translateY(-1px); }
    .adw-btn.active.high { border-color:#d4af37; box-shadow:0 0 0 2px rgba(212,175,55,.25) inset; }
    .adw-btn.active.low  { border-color:#22d3ee; box-shadow:0 0 0 2px rgba(34,211,238,.25) inset; }
    .adw-btn .cnt { font-weight:700; opacity:.95; }

    /* Tug-of-war track */
    .tug {
      position: relative; flex:1 1 auto; height: 34px; overflow: visible;
    }
    .rope {
      position:absolute; top:14px; height:6px; width:50%;
      background: repeating-linear-gradient(45deg, #d2b48c 0 6px, #a98248 6px 12px);
      border-radius: 6px;
      box-shadow: inset 0 1px 2px rgba(0,0,0,.35);
    }
    .rope.left { left:0; border-top-right-radius:0; border-bottom-right-radius:0; }
    .rope.right { right:0; border-top-left-radius:0; border-bottom-left-radius:0; }

    .knot {
      --left: 50%;
      position:absolute; top:6px; left: var(--left);
      width:22px; height:22px; border-radius:50%;
      background: radial-gradient(ellipse at 30% 30%, #f7e7a6, #d4af37 60%, #8f6b00 100%);
      border: 1px solid rgba(0,0,0,.35);
      transform: translateX(-50%);
      transition: left 450ms cubic-bezier(.2,.8,.2,1);
      box-shadow: 0 2px 6px rgba(0,0,0,.35), inset 0 1px 2px rgba(255,255,255,.35);
      z-index: 2;
    }

    /* Jiggle animations while “pulling” */
    .tug.tugging-left  .rope.left  { animation: jiggle-left 300ms ease-in-out 4; }
    .tug.tugging-right .rope.right { animation: jiggle-right 300ms ease-in-out 4; }
    @keyframes jiggle-left  { 0%,100%{transform:translateX(0)} 50%{transform:translateX(-2px)} }
    @keyframes jiggle-right { 0%,100%{transform:translateX(0)} 50%{transform:translateX(2px)} }

    /* Emoji bursts */
    .burst { position:absolute; left:50%; top:-4px; width:0; height:0; pointer-events:none; z-index:3; }
    .burst span {
      position:absolute; font-size:18px; opacity:0; transform:translate(-50%,0) scale(.6);
      animation: floatUp 900ms ease-out forwards;
    }
    @keyframes floatUp {
      0%   { opacity:0; transform:translate(-50%, 6px)  scale(.6); }
      30%  { opacity:1; transform:translate(-50%, -6px) scale(1); }
      100% { opacity:0; transform:translate(-50%, -28px) scale(.9); }
    }