:root {
--primary:  #6a2392  ;
--pay:  #251c68  ;
--secondary: #5b0463;
--success: #00b894;
--danger: #ff7675;
--info:   #6a23920;
--dark: #d5a5e7;
--dark2: #6a2392;
--light: #ffffff;
--bg-gradient: linear-gradient(135deg,   #6a2392    0%, #860f7c  100%);
--glass: rgba(82, 10, 97, 0.95);
}
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', sans-serif; }
body {
background: var(--bg-gradient);
color: var(--dark);
min-height: 100vh;
display: flex;
flex-direction: column;
}
.container { max-width: 900px; margin: 0 auto; padding: 20px; width: 100%; flex: 1; }
.card-panel {
background: var(--glass);
border-radius: 16px;
padding: 25px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
margin-bottom: 25px;
animation: slideUp 0.5s ease-out;
}
.input-group { margin-bottom: 15px; position: relative; width: 100%; }
.input-group i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: #570468; }
input {
width: 100%; padding: 15px 15px 15px 45px;
border: 2px solid #b2bec3; border-radius: 10px;
font-size: 16px; outline: none; transition: 0.3s;
}
input:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(67, 97, 238, 0.1); }
button {
width: 100%; padding: 15px; border: none; border-radius: 10px;
font-size: 16px; font-weight: 700; cursor: pointer;
color: rgb(255, 255, 255); transition: 0.3s; display: flex; justify-content: center; align-items: center; gap: 10px;
}
.btn-primary { background: var(--primary); }
.btn-primary:hover { background: var(--secondary); transform: translateY(-2px); }
.btn-danger { background: var(--danger); }
.btn-success { background: var(--success); }
.btn-download {
background: linear-gradient(45deg, #ab36af, #520558);
color: rgb(255, 255, 255); padding: 15px; border-radius: 10px;
font-weight: 800; text-transform: uppercase; letter-spacing: 1px;
box-shadow: 0 10px 20px rgba(67, 97, 238, 0.3); border: none;
width: 100%; cursor: pointer; display: flex; justify-content: center; gap: 10px;
}
.btn-download:hover { transform: translateY(-3px); box-shadow: 0 15px 30px rgba(67, 97, 238, 0.5); }
.stats-container {
display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 15px; margin-bottom: 25px;
}
.stat-card {
background: white; padding: 15px; border-radius: 12px;
text-align: center; box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}
.stat-number { font-size: 2rem; font-weight: 800; color: var(--primary); }
.stat-label { font-size: 0.9rem; color: #eb8ef0 ; text-transform: uppercase; }
.bingo-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
gap: 8px; margin-top: 20px;
}
.grid-cell {
aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
border-radius: 8px; font-weight: bold; cursor: pointer;
transition: all 0.2s; position: relative; font-size: 0.9rem;
background:  #eb8ef0; color: #5c055c;
}
.grid-cell:hover { transform: scale(1.15); z-index: 2; box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
.cell-sold { background: var(--danger); color: white; }
.cell-paid { background: var(--success); color: white; box-shadow: 0 0 10px rgba(0, 184, 148, 0.4); }
.modal-overlay {
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
background: rgba(0,0,0,0.6); backdrop-filter: blur(5px);
z-index: 9999; display: none;
justify-content: center; align-items: center;
opacity: 0; transition: opacity 0.3s;
}
.modal-overlay.active { opacity: 1; }
.modal-content {
background: white; padding: 30px; border-radius: 20px;
width: 90%; max-width: 400px; text-align: center;
transform: translateY(20px); transition: transform 0.3s;
position: relative; box-shadow: 0 20px 50px rgba(0,0,0,0.3);
}
.modal-overlay.active .modal-content { transform: translateY(0); }
.modal-close {
position: absolute; top: 15px; right: 15px; background: none;
border: none; font-size: 1.5rem; cursor: pointer; color: #7e29af; width: auto; padding: 0;
}
.assignment-item {
background: rgb(56, 4, 63); border: 1px solid  #6f1674  ; padding: 15px;
border-radius: 10px; margin-bottom: 10px;
display: grid; grid-template-columns: auto 1fr auto auto;
gap: 15px; align-items: center;
}
.status-check { width: 20px; height: 20px; cursor: pointer; accent-color: var(--success); }
#toast-container { position: fixed; top: 20px; right: 20px; z-index: 10000; display: flex; flex-direction: column; gap: 10px; }
.toast {
background: rgb(62, 4, 100); padding: 15px 20px; border-radius: 10px;
box-shadow: 0 10px 30px rgba(0,0,0,0.15); display: flex; align-items: center; gap: 15px;
border-left: 5px solid #333; transform: translateX(120%); transition: 0.4s;
}
.toast.show { transform: translateX(0); }
.toast-success { border-color: var(--success); } .toast-success i { color: var(--success); }
.toast-error { border-color: var(--danger); } .toast-error i { color: var(--danger); }
@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.site-footer {
background: #1e272e;
color: #ecf0f1;
padding: 50px 0 20px;
margin-top: 60px;
border-top: 5px solid var(--primary);
width: 100%;
}
.footer-content {
max-width: 900px;
margin: 0 auto;
padding: 0 20px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 40px;
}
.footer-section h4 {
color: var(--primary);
margin-bottom: 20px;
font-size: 1.2rem;
text-transform: uppercase;
letter-spacing: 1px;
}
.footer-section p {
font-size: 0.95rem;
color: #bdc3c7;
line-height: 1.6;
margin-bottom: 15px;
}
.footer-section a {
color: #fff;
text-decoration: none;
transition: 0.3s;
}
.footer-section a:hover {
color: var(--success);
}
.whatsapp-btn {
display: inline-flex;
align-items: center;
gap: 10px;
background: #25D366;
color: white !important;
padding: 10px 20px;
border-radius: 30px;
font-weight: bold;
margin-top: 5px;
box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
}
.whatsapp-btn:hover {
background: #128C7E;
transform: translateY(-2px);
}
.footer-bottom {
text-align: center;
margin-top: 50px;
padding-top: 20px;
border-top: 1px solid #353b48;
font-size: 0.85rem;
color: #7f8c8d;
}
.developer-credit {
color: var(--success);
font-weight: 700;
}
.btn-whatsapp {
background: #22e752 ;
color: white;
padding: 15px;
border-radius: 10px;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
transition: 0.3s;
box-shadow: 0 5px 15px rgba(37, 211, 102, 0.3);
animation: pulse 2s infinite;
}
.btn-whatsapp:hover {
background: #128C7E;
transform: translateY(-2px);
animation: none;
}
.btn-reference {
background: var(--pay);
color: white;
padding: 15px;
border-radius: 10px;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
transition: 0.3s;
}
.btn-reference:hover {
background: var(--primary);
transform: translateY(-2px);
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); }
70% { box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); }
100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}
.info-panel {
background: rgba(255,255,255,0.1);
backdrop-filter: blur(5px);
border: 1px solid rgba(255,255,255,0.2);
}
.reference-thumb {
width: 100%;
aspect-ratio: 1;
object-fit: cover;
border-radius: 10px;
cursor: pointer;
transition: 0.3s;
border: 3px solid transparent;
}
.reference-thumb:hover {
transform: scale(1.05);
border-color: var(--primary);
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}