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

html, body{
 overflow-x:hidden;
 max-width:100vw;
}

body{
 font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
 background:linear-gradient(135deg, #f5f7fa 0%, #e4e8ec 100%);
 min-height:100vh;
 padding:20px;
 color:#333;
 width:100%;
 font-weight:400;
 
 -webkit-font-smoothing:antialiased;
 -moz-osx-font-smoothing:grayscale;
 
 text-rendering:optimizeLegibility;
 
 letter-spacing:-0.011em;
}

.container{
 max-width:1200px;
 margin:0 auto;
 width:100%;
}

header{
 text-align:center;
 color:white;
 margin-bottom:30px;
 padding:20px;
 border-radius:12px;
 box-shadow:0 4px 12px rgba(102, 126, 234, 0.3);
 min-height:120px;
 height:120px;
}

header h1{
 font-size:1.75rem;
 margin-bottom:10px;
 text-shadow:2px 2px 4px rgba(0,0,0,0.3);
 font-weight:600;
 letter-spacing:-0.02em;
}

.subtitle{
 font-size:1.2rem;
 opacity:0.95;
 font-weight:400;
 letter-spacing:-0.01em;
}

.main-content{
 display:grid;
 gap:20px;
}

.card{
 background:#f8f9fa;
 border-radius:12px;
 padding:25px;
 box-shadow:0 4px 6px rgba(0,0,0,0.1);
}

.section-header{
 display:flex;
 justify-content:space-between;
 align-items:center;
 margin-bottom:20px;
 flex-wrap:wrap;
 gap:10px;
}

h2{
 color:#4a5fc1;
 font-size:1.5rem;
 margin-bottom:20px;
 font-weight:600;
 letter-spacing:-0.015em;
}


.form-group{
 margin-bottom:20px;
}

.form-group label{
 display:block;
 margin-bottom:8px;
 font-weight:600;
 color:#555;
 letter-spacing:-0.01em;
}

.form-group input{
 width:100%;
 padding:12px;
 border:2px solid #e0e0e0;
 border-radius:8px;
 font-size:1rem;
 transition:border-color 0.3s;
 font-family:'Inter', sans-serif;
 font-weight:400;
 letter-spacing:-0.011em;
}

.form-group input:focus{
 outline:none;
 border-color:#667eea;
}

.form-group textarea{
 width:100%;
 padding:12px;
 border:2px solid #e0e0e0;
 border-radius:8px;
 font-size:1rem;
 transition:border-color 0.3s;
 font-family:'Inter', sans-serif;
 font-weight:400;
 letter-spacing:-0.011em;
 resize:vertical;
 min-height:120px;
 line-height:1.5;
}

.form-group textarea:focus{
 outline:none;
 border-color:#667eea;
}

.form-group select{
 width:100%;
 padding:12px;
 border:2px solid #e0e0e0;
 border-radius:8px;
 font-size:1.2rem;
 font-weight:600;
 transition:border-color 0.3s;
 background:white;
 cursor:pointer;
 font-family:'Inter', sans-serif;
 letter-spacing:-0.011em;
}

.form-group select:focus{
 outline:none;
 border-color:#667eea;
}

.form-group select option{
 font-size:1.2rem;
 font-weight:600;
 padding:10px;
}


.btn{
 padding:12px 24px;
 border:none;
 border-radius:8px;
 font-size:1rem;
 font-weight:600;
 cursor:pointer;
 transition:all 0.3s;
 display:inline-flex;
 align-items:center;
 gap:8px;
 font-family:'Inter', sans-serif;
 letter-spacing:-0.011em;
}

.btn-primary{
 background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 color:white;
 width:100%;
}

.btn-primary:hover{
 transform:translateY(-2px);
 box-shadow:0 4px 12px rgba(102, 126, 234, 0.4);
}

.btn-secondary{
 background:#6c757d;
 color:white;
}

.btn-secondary:hover{
 background:#5a6268;
}

.btn-sm{
 padding:8px 16px;
 font-size:0.9rem;
 white-space:nowrap;
}

.header-actions .btn-sm{
 padding:6px 12px;
 font-size:0.85rem;
}

.btn-danger{
 background:#dc3545;
 color:white;
}

.btn-danger:hover{
 background:#c82333;
}

.btn-spin{
 background:linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
 color:white;
 font-size:1.1rem;
 padding:16px 32px;
}

.btn-spin:hover:not(:disabled){
 transform:scale(1.05);
 box-shadow:0 6px 20px rgba(245, 87, 108, 0.4);
}

.btn:disabled{
 opacity:0.6;
 cursor:not-allowed;
}


.table-container{
 overflow-x:auto;
}

table{
 width:100%;
 border-collapse:collapse;
 font-variant-numeric:tabular-nums;
}

thead{
 color:white;
}

th, td{
 padding:12px;
 text-align:left;
 font-weight:400;
 letter-spacing:-0.011em;
}

th{
 font-weight:600;
}

tbody tr{
 border-bottom:1px solid #e0e0e0;
 transition:background 0.2s;
}

tbody tr:hover:not(.empty-state){
 background:#f8f9fa;
}

.empty-state{
 text-align:center;
 color:#666;
 font-style:italic;
}

.btn-delete{
 background:#dc3545;
 color:white;
 padding:6px 12px;
 border:none;
 border-radius:6px;
 cursor:pointer;
 font-size:0.9rem;
}

.btn-delete:hover{
 background:#c82333;
}


.spinner-section{
 text-align:center;
}

.spinner-container{
 margin:30px 0;
 display:flex;
 flex-direction:column;
 align-items:center;
}

.wheel-wrapper{
 position:relative;
 width:600px;
 height:600px;
 max-width:90vw;
 max-height:90vw;
 margin:0 auto;
 aspect-ratio:1 / 1;
}

.wheel-pointer-container{
 position:absolute;
 top:0;
 left:50%;
 transform:translateX(-50%);
 z-index:10;
 display:flex;
 flex-direction:column;
 align-items:center;
 pointer-events:none;
}

.wheel-pointer{
 font-size:4rem;
 color:#ccc;
 filter:drop-shadow(2px 2px 4px rgba(0,0,0,0.2));
 line-height:1;
 margin-top:0;
 transform:translateY(-30%);
}

#wheelCanvas{
 width:100%;
 height:100%;
 border-radius:50%;
 position:relative;
 z-index:1;
 display:block;
 background:transparent;
 border:2px solid #333;
}

.wheel-center{
 position:absolute;
 top:50%;
 left:50%;
 transform:translate(-50%, -50%);
 width:23%;
 height:23%;
 aspect-ratio:1 / 1;
 background:white;
 border-radius:50%;
 display:flex;
 align-items:center;
 justify-content:center;
 box-shadow:0 4px 12px rgba(0,0,0,0.3);
 z-index:5;
 border:6px solid #667eea;
 cursor:pointer;
 transition:all 0.3s;
 overflow:hidden;
}

.wheel-center span{
 font-size:1rem;
 font-weight:600;
 color:#667eea;
 text-align:center;
 line-height:1;
 max-width:90%;
 word-wrap:break-word;
 letter-spacing:-0.011em;
}

.wheel-center:hover:not(:disabled){
 transform:translate(-50%, -50%) scale(1.1);
 box-shadow:0 6px 20px rgba(102, 126, 234, 0.5);
 border-color:#764ba2;
}

.wheel-center:active:not(:disabled){
 transform:translate(-50%, -50%) scale(0.95);
}

.wheel-center:disabled{
 opacity:0.7;
 cursor:not-allowed;
}

.wheel-center-disabled{
 cursor:default !important;
 opacity:0.9;
}

.wheel-center-disabled:hover{
 transform:translate(-50%, -50%) !important;
 box-shadow:0 4px 12px rgba(0,0,0,0.3) !important;
 border-color:#667eea !important;
}

#spinnerNumber{
 font-size:clamp(0.7rem, 1.2vw, 0.95rem);
 font-weight:600;
 color:#667eea;
 letter-spacing:0;
 text-align:center;
 line-height:1;
 padding:5px;
 word-break:break-word;
 max-width:90%;
 font-variant-numeric:tabular-nums;
}

.spinner-label{
 margin-top:15px;
 font-size:1.1rem;
 color:#666;
 font-weight:400;
 letter-spacing:-0.011em;
}

.spinner-controls{
 display:flex;
 gap:15px;
 justify-content:center;
 flex-wrap:wrap;
 margin-top:20px;
}

.spinning #wheelCanvas{
 animation:continuousSpin 0.1s linear infinite;
}

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


.winners-section{
 background:white;
}

.winners-list{
 display:grid;
 gap:15px;
}

.winner-card{
 background:linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
 color:white;
 padding:20px;
 border-radius:12px;
 display:flex;
 justify-content:space-between;
 align-items:center;
 box-shadow:0 4px 12px rgba(240, 147, 251, 0.3);
 transition:all 0.3s ease;
 animation:slideInRight 0.5s ease-out;
}

.winner-card:hover{
 transform:translateY(-3px);
 box-shadow:0 6px 20px rgba(240, 147, 251, 0.5);
}

@keyframes slideInRight{
 from{
 opacity:0;
 transform:translateX(30px);
}
 to{
 opacity:1;
 transform:translateX(0);
}
}

.winner-details{
 flex:1;
}

.winner-details h3{
 margin-bottom:8px;
 font-size:1.4rem;
 font-weight:600;
 color:white;
}

.winner-details p{
 opacity:0.95;
 font-size:1rem;
 margin:5px 0;
 color:white;
}

.winner-badge{
 background:rgba(255, 255, 255, 0.3);
 padding:15px 25px;
 border-radius:12px;
 font-size:1.8rem;
 font-weight:bold;
 color:white;
 text-align:center;
 min-width:80px;
 -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
 box-shadow:0 2px 8px rgba(0, 0, 0, 0.2);
}

.winner-time{
 font-size:0.9rem;
 opacity:0.9;
 margin-top:5px;
 color:white;
}

.winner-phone{
 font-size:1rem;
 opacity:0.95;
 color:white;
}


.winners-list .empty-state{
 text-align:center;
 padding:40px 20px;
 color:#999;
 font-size:1.1rem;
 font-style:italic;
}


@media (max-width:768px){
 .winner-card{
 flex-direction:column;
 text-align:center;
 gap:15px;
 padding:20px 15px;
}
 
 .winner-details h3{
 font-size:1.2rem;
}
 
 .winner-details p{
 font-size:0.95rem;
}
 
 .winner-badge{
 font-size:1.5rem;
 padding:12px 20px;
 width:100%;
}
}


.winner-display-section{
 border:none;
 animation:pulse 2s infinite;
}

@keyframes pulse{
 0%, 100%{transform:scale(1)}
 50%{transform:scale(1.02)}
}

.live-winner-card{
 text-align:center;
 color:white;
}

.winner-animation{
 display:flex;
 justify-content:center;
 align-items:center;
 gap:20px;
 font-size:3rem;
 margin-bottom:20px;
 animation:bounce 1s infinite;
}

@keyframes bounce{
 0%, 100%{transform:translateY(0)}
 50%{transform:translateY(-10px)}
}

.trophy{
 font-size:4rem;
 animation:rotate 2s linear infinite;
}

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

.live-winner-info h3{
 font-size:2.5rem;
 margin-bottom:15px;
 text-shadow:2px 2px 4px rgba(0,0,0,0.3);
}

.live-winner-ticket{
 font-size:2rem;
 font-weight:bold;
 margin-bottom:10px;
}

.live-winner-time{
 font-size:1.1rem;
 opacity:0.9;
}

.winner-card{
 color:white;
 padding:20px;
 border-radius:10px;
 display:flex;
 justify-content:space-between;
 align-items:center;
 box-shadow:0 4px 8px rgba(0,0,0,0.1);
}

.winner-details h3{
 margin-bottom:5px;
 font-size:1.3rem;
}

.winner-details p{
 opacity:0.9;
 font-size:0.9rem;
}

.winner-badge{
 padding:10px 20px;
 border-radius:8px;
 font-size:1.5rem;
 font-weight:bold;
}


.modal{
 display:none;
 position:fixed;
 z-index:1000;
 left:0;
 top:0;
 width:100%;
 height:100%;
 background:rgba(0,0,0,0.7);
 animation:fadeIn 0.3s;
}

@keyframes fadeIn{
 from{opacity:0}
 to{opacity:1}
}

.modal-content{
 background:white;
 margin:20px auto;
 padding:0;
 border-radius:16px;
 max-width:500px;
 animation:slideIn 0.3s;
 box-shadow:0 10px 40px rgba(0,0,0,0.3);
}

@keyframes slideIn{
 from{
 transform:translateY(-50px);
 opacity:0;
}
 to{
 transform:translateY(0);
 opacity:1;
}
}

.modal-header{
 color:white;
 padding:25px;
 border-radius:16px 16px 0 0;
 text-align:center;
}

.modal-body{
 padding:40px 25px;
 text-align:center;
}

.winner-info{
 margin:20px 0;
}

.winner-name{
 font-size:2rem;
 font-weight:600;
 color:#667eea;
 margin-bottom:15px;
 letter-spacing:-0.02em;
}

.winner-ticket{
 font-size:1.3rem;
 color:#666;
 font-weight:400;
 letter-spacing:-0.011em;
}

.winner-ticket span{
 font-weight:600;
 color:#f5576c;
}

.modal-footer{
 padding:20px 25px;
 text-align:center;
}


@media (max-width:768px){
 body{
 padding:10px;
 overflow-x:hidden;
}
 
 .container{
 padding:0;
 width:100%;
 overflow-x:hidden;
}
 
 header{
 padding:15px !important;
 margin-bottom:15px;
 overflow-x:hidden;
}
 
 header h1{
 font-size:1.5rem;
 word-break:break-word;
}
 
 .subtitle{
 font-size:0.9rem;
}
 
 .card{
 padding:15px;
 margin-bottom:15px;
 overflow-x:hidden;
 width:100%;
}
 
 .wheel-wrapper{
 width:90vw;
 height:90vw;
 max-width:400px;
 max-height:400px;
}
 
 #wheelCanvas{
 width:100% !important;
 height:100% !important;
 display:block !important;
}
 
 .wheel-center{
 width:23%;
 height:23%;
 aspect-ratio:1 / 1;
 border:4px solid #667eea;
}
 
 #spinnerNumber{
 font-size:clamp(0.6rem, 1.3vw, 0.95rem);
 letter-spacing:0;
 padding:3px;
}
 
 .wheel-pointer{
 font-size:2.5rem;
 transform:translateY(-30%);
}
 
 .winner-card{
 flex-direction:column;
 text-align:center;
 gap:15px;
}
 
 table{
  font-size:0.9rem;
  display:block;
  overflow-x:auto;
  white-space:nowrap;
}
 
 th, td{
 padding:8px 6px;
 font-size:0.85rem;
}
 
 
 .card > div[style*="grid"]{
 display:flex !important;
 flex-direction:column !important;
 gap:15px !important;
}
 
 
 .card > div[style*="display:flex"]{
 flex-wrap:wrap !important;
}
 
 
 .btn{
 width:100%;
 white-space:normal;
 word-break:break-word;
}
 
 .btn-sm{
 font-size:0.85rem;
 padding:8px 12px;
}
 
 
 input, select, textarea{
 width:100% !important;
 max-width:100% !important;
 font-size:16px !important;
}
}

@media (max-width:480px){
 body{
 padding:5px;
}
 
 .container{
 padding:0;
 width:100%;
}
 
 header{
 padding:10px !important;
}
 
 header h1{
 font-size:1.3rem;
}
 
 .subtitle{
 font-size:0.8rem;
}
 
 .card{
 padding:10px;
 margin-bottom:10px;
}
 
 .wheel-wrapper{
 width:85vw;
 height:85vw;
 max-width:320px;
 max-height:320px;
}
 
 .wheel-pointer{
 font-size:2rem;
 transform:translateY(-30%);
}
 
 .wheel-center span{
 font-size:0.9rem !important;
}
 
 #wheelCanvas{
 width:100% !important;
 height:100% !important;
 display:block !important;
}
 
 .wheel-center{
 border:3px solid #667eea;
 width:23%;
 height:23%;
 aspect-ratio:1 / 1;
}
 
 #spinnerNumber{
 font-size:clamp(0.5rem, 1.2vw, 0.85rem);
 letter-spacing:0;
 padding:2px;
}
 
 table{
 font-size:0.8rem;
}
 
 th, td{
 padding:6px 4px;
 font-size:0.75rem;
}
 
 .btn{
 font-size:0.9rem;
 padding:10px;
}
 
 .btn-sm{
 font-size:0.8rem;
 padding:6px 10px;
}
}



.form-control{
 width:100%;
 padding:10px 15px;
 border:1px solid #ddd;
 border-radius:5px;
 font-size:1rem;
 transition:border-color 0.3s;
}

.form-control:focus{
 outline:none;
 border-color:#667eea;
 box-shadow:0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* ============================================
 EXTRACTED INLINE STYLES - ORGANIZED BY COMPONENT
 ============================================ */


.header-container{
 display:flex;
 justify-content:space-between;
 align-items:center;
 flex-wrap:wrap;
 gap:15px;
}

.header-flex-container{
 display:flex;
 align-items:center;
 gap:15px;
 flex:1;
 justify-content:space-between;
 width:100%;
}

.header-container > div:first-of-type{
 display:flex;
 align-items:center;
 gap:15px;
}

.header-actions{
 display:flex;
 gap:8px;
 align-items:center;
 flex-wrap:wrap;
}

.header-actions.desktop-menu{
 display:flex !important;
}

.user-badge{
 color:white;
 padding:8px 16px;
 border-radius:8px;
 font-size:14px;
 white-space:nowrap;
}


.banner-board{
 display:none;
 margin-bottom:20px;
}


.downtime-notice{
 display:none;
 padding:20px;
 border-radius:12px;
 margin-bottom:20px;
 text-align:center;
}

.downtime-notice h3{
 color:white;
 margin-bottom:10px;
}

.downtime-notice p{
 color:white;
 font-size:1.1rem;
 margin-bottom:10px;
}

.downtime-timer{
 color:white;
 font-size:1.5rem;
 font-weight:600;
}

.downtime-message{
 color:rgba(255,255,255,0.9);
 font-size:0.9rem;
 margin-top:10px;
}


.form-label-bold{
 font-size:16px;
 font-weight:bold;
 margin-bottom:8px;
 display:block;
}


.select-full-width{
 width:100%;
}


.btn-buy-ticket{
 background:linear-gradient(135deg, #28c76f 0%, #22c55e 100%);
 color:white;
 border:none;
 box-shadow:0 4px 12px rgba(40, 199, 111, 0.4);
}

.btn-buy-ticket .icon{
 font-size:20px;
}


.prize-pool-section{
 border:none;
 padding:30px;
}

.prize-pool-grid{
 display:grid;
 grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
 gap:20px;
 text-align:center;
}

.prize-pool-card{
 padding:25px;
 border-radius:12px;
}

.prize-pool-icon{
 font-size:3rem;
 margin-bottom:10px;
 display:block;
 text-align:center;
}

.prize-pool-label{
 color:white;
 font-size:0.9rem;
 opacity:0.9;
 margin-bottom:5px;
 display:block;
 text-align:center;
 width:100%;
 word-wrap:break-word;
}

.prize-pool-value{
 color:white;
 font-size:2.5rem;
 font-weight:600;
 text-shadow:2px 2px 4px rgba(0,0,0,0.3);
 font-variant-numeric:tabular-nums;
 letter-spacing:-0.02em;
 display:block;
 text-align:center;
 width:100%;
}


.live-stats-section{
 border:none;
 padding:25px;
}

.live-stats-section h2{
 color:white;
 margin-bottom:20px;
}

.live-stats-grid{
 display:grid;
 grid-template-columns:repeat(2, 1fr);
 gap:15px;
 max-width:600px;
 margin:0 auto;
}

.live-stat-item{
 padding:20px;
 border-radius:10px;
 text-align:center;
 display:flex;
 flex-direction:column;
 align-items:center;
 justify-content:center;
}

.live-stat-icon{
 font-size:2rem;
 margin-bottom:5px;
 display:block;
 text-align:center;
}

.live-stat-value{
 color:white;
 font-size:2rem;
 font-weight:600;
 font-variant-numeric:tabular-nums;
 letter-spacing:-0.02em;
 display:block;
 text-align:center;
 width:100%;
}

.live-stat-label{
 color:white;
 font-size:0.85rem;
 opacity:0.9;
 margin-top:5px;
 display:block;
 text-align:center;
 width:100%;
 word-wrap:break-word;
}

.live-stat-card{
 padding:20px;
 border-radius:10px;
 text-align:center;
}


.spinner-section-gray{
 background:#f8f9fa;
 border:1px solid #e0e0e0;
}

.spinner-section-gray h2{
 text-align:center;
 color:#666;
 font-weight:500;
 margin-bottom:20px;
}

.game-status{
 padding:15px;
 border-radius:10px;
 margin-bottom:30px;
 text-align:center;
}

.game-status p{
 color:white;
 font-size:1.1rem;
 font-weight:600;
 margin:0;
}

.spinner-container-white{
 background:white;
 padding:40px 20px;
 border-radius:12px;
}

.spinner-label-gray{
 text-align:center;
 color:#999;
 font-size:1rem;
 margin-top:30px;
 margin-bottom:20px;
}


.countdown-timer{
 max-width:600px;
 margin:0 auto;
 padding:20px;
 border-radius:12px;
 text-align:center;
}

.countdown-timer p{
 color:white;
 font-size:1rem;
 margin-bottom:10px;
 font-weight:600;
}

.countdown-display{
 display:flex;
 justify-content:center;
 gap:15px;
 flex-wrap:wrap;
}

.countdown-unit{
 padding:15px 20px;
 border-radius:8px;
 min-width:80px;
}

.countdown-number{
 font-size:2.5rem;
 font-weight:600;
 color:white;
 line-height:1;
 font-variant-numeric:tabular-nums;
 letter-spacing:-0.02em;
}

.countdown-label{
 font-size:0.85rem;
 color:rgba(255,255,255,0.9);
 margin-top:5px;
}

.countdown-separator{
 font-size:2.5rem;
 color:white;
 font-weight:bold;
 align-self:center;
}

.countdown-message{
 margin-top:15px;
 color:rgba(255,255,255,0.9);
 font-size:0.9rem;
}


.footer{
 color:white;
 padding:40px 20px;
 margin-top:50px;
}

.footer-container{
 max-width:1200px;
 margin:0 auto;
}

.footer-grid{
 display:grid;
 grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
 gap:30px;
 margin-bottom:30px;
}

.footer h3{
 margin-bottom:15px;
 font-size:1.3rem;
}

.footer p{
 opacity:0.9;
 line-height:1.6;
}

.footer ul{
 list-style:none;
 padding:0;
}

.footer li{
 margin-bottom:10px;
}

.footer a{
 color:white;
 text-decoration:none;
 opacity:0.9;
 transition:opacity 0.3s;
}

.footer a:hover{
 opacity:1;
}

.footer-contact-item{
 margin-bottom:12px;
 display:flex;
 align-items:center;
 gap:10px;
}

.footer-contact-icon{
 font-size:1.3rem;
}

.footer-copyright{
 border-top:1px solid rgba(255,255,255,0.2);
 padding-top:20px;
 text-align:center;
}

.footer-copyright p{
 opacity:0.9;
 margin:0;
}


.modal-header-winner{
 color:white;
 padding:25px;
 border-radius:16px 16px 0 0;
 text-align:center;
}

.modal-header-winner h2{
 color:white;
 margin:0;
}

.modal-body-winner{
 background:linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
 padding:40px 25px;
}
.modal-footer-gray{
 background:#f8f9fa;
 padding:20px 25px;
 text-align:center;
}

.btn-modal-close{
 background:#28a745;
 color:white;
 padding:12px 30px;
 font-size:1.1rem;
}


.modal-content-password{
 max-width:450px;
}

 .password-message{
 display:none;
 padding:12px;
 border-radius:8px;
 margin-bottom:15px;
}


.number-pills-container{
 display:flex;
 flex-wrap:wrap;
 gap:10px;
 padding:15px;
 border-radius:8px;
 min-height:60px;
}

.number-pill{
 position:relative;
 color:white;
 padding:12px 40px 12px 20px;
 border-radius:25px;
 font-size:16px;
 font-weight:600;
 display:inline-flex;
 align-items:center;
 gap:8px;
 box-shadow:0 4px 6px rgba(0,0,0,0.1);
 transition:all 0.3s;
 animation:slideIn 0.3s;
 letter-spacing:-0.011em;
 font-variant-numeric:tabular-nums;
}

.number-pill:hover{
 transform:translateY(-2px);
 box-shadow:0 6px 12px rgba(0,0,0,0.2);
}

.number-pill .remove-btn{
 position:absolute;
 right:8px;
 top:50%;
 transform:translateY(-50%);
 border:none;
 color:white;
 width:24px;
 height:24px;
 border-radius:50%;
 cursor:pointer;
 font-size:16px;
 line-height:1;
 display:flex;
 align-items:center;
 justify-content:center;
 transition:all 0.2s;
}

.number-pill .remove-btn:hover{
 background:rgba(255,255,255,0.5);
 transform:translateY(-50%) scale(1.1);
}


.spin-mode-container{
 display:flex;
 gap:20px;
 flex-wrap:wrap;
}

.spin-mode-label{
 display:flex;
 align-items:center;
 gap:10px;
 cursor:pointer;
 padding:15px 20px;
 border-radius:8px;
 border:2px solid transparent;
 transition:all 0.3s;
}

.spin-mode-label:hover{
 background:rgba(255,255,255,0.1);
}

.spin-mode-radio{
 width:20px;
 height:20px;
 cursor:pointer;
}

.spin-mode-text{
 font-weight:600;
 font-size:16px;
 letter-spacing:-0.011em;
}

.spin-mode-description{
 font-size:13px;
 color:#999;
 font-weight:400;
 letter-spacing:-0.011em;
}

.spin-mode-note{
 font-size:12px;
 color:#28a745;
 margin-top:4px;
 font-weight:400;
 letter-spacing:-0.011em;
}


.ticket-badge{
 display:inline-flex;
 align-items:center;
 justify-content:center;
 color:white;
 padding:10px 16px;
 border-radius:20px;
 font-size:15px;
 font-weight:600;
 box-shadow:0 2px 6px rgba(0,0,0,0.15);
 min-width:60px;
 letter-spacing:-0.011em;
 font-variant-numeric:tabular-nums;
}

.ticket-badge.taken{
 background:linear-gradient(135deg, #999 0%, #666 100%);
 opacity:0.5;
 text-decoration:line-through;
}

.settings-prize-grid{
 display:grid;
 grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
 gap:20px;
}

.settings-prize-card{
 padding:20px;
 border-radius:12px;
}

.settings-prize-card label{
 color:white;
 font-weight:600;
 margin-bottom:10px;
 display:block;
}

.settings-prize-card input{
 width:100%;
 padding:12px;
 border:none;
 border-radius:8px;
 font-size:16px;
 font-weight:600;
}

.btn-save-prize{
 margin-top:20px;
 background:white;
 color:#f5576c;
 font-weight:600;
}

.downtime-duration-card{
 padding:20px;
 border-radius:12px;
 margin-bottom:20px;
}

.downtime-duration-card label{
 color:white;
 font-weight:600;
 margin-bottom:10px;
 display:block;
}

.downtime-duration-grid{
 display:grid;
 grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
 gap:15px;
}

.downtime-duration-input label{
 color:white;
 font-size:0.9rem;
 margin-bottom:5px;
 display:block;
}

.downtime-duration-input input{
 width:100%;
 padding:12px;
 border:none;
 border-radius:8px;
 font-size:16px;
 font-weight:600;
}

.downtime-buttons{
 display:flex;
 gap:10px;
 flex-wrap:wrap;
}

.btn-start-downtime{
 background:white;
 color:#ff6b6b;
 font-weight:600;
}

.btn-stop-downtime{
 color:white;
 border:2px solid white;
}

.downtime-status-display{
 margin-top:20px;
 padding:15px;
 border-radius:8px;
 color:white;
 display:none;
}

.downtime-status-display p{
 margin:0;
 font-weight:600;
}

.downtime-status-display p:last-child{
 margin:5px 0 0 0;
}


.reset-message{
 margin-top:15px;
 padding:12px;
 border-radius:8px;
 display:none;
}

/* ============================================
 REUSABLE UTILITY CLASSES
 ============================================ */


.header-actions.desktop-menu{
 display:flex;
 gap:10px;
 align-items:center;
 flex-wrap:wrap;
}

.header-actions.desktop-menu .btn-sm{
 padding:6px 12px;
 font-size:0.85rem;
}

.user-badge{
 color:white;
 padding:8px 16px;
 border-radius:8px;
 font-size:14px;
 white-space:nowrap;
}

.header-flex-container{
 display:flex;
 align-items:center;
 gap:15px;
 flex:1;
 justify-content:space-between;
 width:100%;
}

.hamburger-menu{
 display:none;
 flex-direction:column;
 cursor:pointer;
 padding:8px;
 background:#fff;
 border-radius:8px;
 width:41px;
 height:41px;
 flex-shrink:0;
 z-index:100001;
 border:1px solid #ddd;
 justify-content:center;
 align-items:center;
 transition:all 0.3s ease;
}

.hamburger-menu:hover{
 background:#f0f0f0;
 border-color:#bbb;
}

.hamburger-menu span{
 width:25px;
 height:3px;
 background:#000;
 margin:3px 0;
 border-radius:2px;
 display:block;
 transition:all 0.3s ease;
}

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

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

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

.header-actions.mobile-menu{
 display:none;
 position:fixed;
 top:80px;
 left:20px;
 width:200px !important;
 height:250px !important;
 background:white !important;
 flex-direction:column;
 padding:15px;
 z-index:100000;
 border-radius:12px;
 box-shadow:0 8px 24px rgba(0,0,0,0.3);
 overflow-y:auto;
 transition:all 0.3s ease;
 transform:translateX(-100%);
 opacity:0;
}

.header-actions.mobile-menu.active{
 display:flex !important;
 transform:translateX(0);
 opacity:1;
}

.header-actions.mobile-menu{
 display:none;
 position:fixed;
 top:80px;
 left:20px;
 width:200px !important;
 height:250px !important;
 background:white !important;
 flex-direction:column;
 padding:20px;
 z-index:9999;
 border-radius:12px;
 box-shadow:0 8px 24px rgba(0,0,0,0.3);
 overflow-y:auto;
}

/* All pages mobile menu height - 230px for home/login/register, 220px for user/admin */
/* HOME PAGE SPECIFIC - Force 250px height */
.home-page .header-actions.mobile-menu,
body.home-page .header-actions.mobile-menu,
.home-header .header-actions.mobile-menu {
 height:250px !important;
 max-height:250px !important;
 min-height:250px !important;
}

.header-actions.mobile-menu.active{
 display:flex;
}

.header-actions.mobile-menu .nav-link,
.header-actions.mobile-menu *{
 color:black !important;
}

.header-actions.mobile-menu .nav-link{
 background:#f5f5f5;
 margin-bottom:2px;
}

.header-actions.mobile-menu .nav-link:hover{
 background:#e0e0e0;
}

.header-actions.mobile-menu .btn-sm,
.header-actions.mobile-menu button{
 background:#f5f5f5 !important;
 color:black !important;
 border:1px solid #ddd;
 margin-bottom:2px !important;
 padding:0 !important;
}

.header-actions.mobile-menu .btn-sm:hover,
.header-actions.mobile-menu button:hover{
 background:#e0e0e0 !important;
}

/* Logout button in mobile menu - RED text */
.header-actions.mobile-menu .btn-logout,
.header-actions.mobile-menu button.btn-logout{
 color:#dc3545 !important;
 background:#f5f5f5 !important;
 border:1px solid #dc3545 !important;
 font-weight:bold;
 padding:0 !important;
 margin:2px 0 !important;
}

.header-actions.mobile-menu .btn-logout:hover,
.header-actions.mobile-menu button.btn-logout:hover{
 background:#dc3545 !important;
 color:white !important;
}

.header-actions.mobile-menu .user-badge{
 background:#f5f5f5 !important;
 color:black !important;
 margin-bottom:2px;
 justify-content:center;
}

.header-actions.mobile-menu #mobileLanguageSwitcher select{
 background:#f5f5f5;
 color:black;
 border:1px solid #ddd;
 width:100%;
}

.header-actions.mobile-menu #mobileLanguageSwitcher select option{
 background:white;
 color:black;
}

.nav-link{
 display:flex;
 align-items:center;
 gap:8px;
 color:white;
 text-decoration:none;
 padding:8px 16px;
 border-radius:6px;
 transition:all 0.3s;
 background:rgba(255,255,255,0.15);
}

.nav-link:hover{
 background:rgba(255,255,255,0.25);
 transform:translateY(-2px);
}

/* Style buttons in desktop menu to look like nav-links */
.header-actions.desktop-menu .btn-sm{
 display:flex;
 align-items:center;
 gap:8px;
 color:white;
 background:rgba(255,255,255,0.15);
 border:none;
 padding:8px 16px;
 border-radius:6px;
 font-size:0.9rem;
 cursor:pointer;
 transition:all 0.3s ease;
}

.header-actions.desktop-menu .btn-sm:hover{
 background:rgba(255,255,255,0.25);
 transform:translateY(-2px);
}

/* Logout button RED styling */
.btn-logout,
.header-actions.desktop-menu .btn-logout{
 background:linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important;
}

.btn-logout:hover,
.header-actions.desktop-menu .btn-logout:hover{
 background:linear-gradient(135deg, #e04b59 0%, #d12d3f 100%) !important;
}

/* Login page specific RED styling */
.login-page header,
.login-page .header-actions.desktop-menu,
.login-page .nav-link,
.login-page .header-actions.desktop-menu .btn-sm{
 background:linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important;
}

.login-page .nav-link:hover,
.login-page .header-actions.desktop-menu .btn-sm:hover{
 background:rgba(255,255,255,0.3) !important;
}

.login-page .hamburger-menu{
 background:#dc3545 !important;
}

.login-page .hamburger-menu:hover{
 background:#c82333 !important;
}

.login-page .mobile-menu,
.login-page .header-actions.mobile-menu{
 background:white !important;
}

/* Style user badge to match */
.user-badge{
 display:flex;
 align-items:center;
 gap:8px;
 color:white;
 background:rgba(255,255,255,0.15);
 padding:8px 16px;
 border-radius:6px;
 font-size:14px;
 white-space:nowrap;
}

/* Language toggle button styling */
.language-toggle-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    color: white;
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 6px;
    background: rgba(255,255,255,0.15);
    transition: all 0.3s;
    font-weight: 600;
    font-size: 0.9rem;
    border: none;
    cursor: pointer;
    white-space: nowrap;
}

.language-toggle-btn:hover {
    background: rgba(255,255,255,0.25);
    transform: translateY(-2px);
}

.language-toggle-btn .flag {
    font-size: 1.2rem;
}

.language-toggle-btn .lang-text {
    font-size: 0.85rem;
}

/* Mobile menu language toggle styling */
.header-actions.mobile-menu .language-toggle-btn,
.mobile-menu .language-toggle-btn {
    width: 100% !important;
    height: 40px !important;
    color: black !important;
    background: #f5f5f5 !important;
    border: 1px solid #ddd !important;
    margin-bottom: 2px !important;
    margin-top: 0 !important;
    padding: 8px 12px !important;
    border-radius: 6px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    font-weight: 500;
    transition: all 0.2s ease;
    box-sizing: border-box;
    cursor: pointer;
}

.header-actions.mobile-menu .language-toggle-btn:hover,
.mobile-menu .language-toggle-btn:hover {
    background: #e0e0e0 !important;
    border-color: #ccc !important;
}

/* Force black text in mobile menu */
.header-actions.mobile-menu .language-toggle-btn,
.header-actions.mobile-menu .language-toggle-btn *,
.mobile-menu .language-toggle-btn,
.mobile-menu .language-toggle-btn * {
    color: black !important;
}

/* Style language switcher container to match */
#desktopLanguageSwitcher{
 display:flex;
 align-items:center;
}

#desktopLanguageSwitcher select{
 background:rgba(255,255,255,0.15);
 color:white;
 border:none;
 padding:8px 12px;
 border-radius:6px;
 font-size:0.9rem;
 cursor:pointer;
}

#desktopLanguageSwitcher select option{
 background:#667eea;
 color:white;
}

@media (max-width:768px){
 .hamburger-menu{
 display:flex !important;
 }
 
 .header-actions.desktop-menu{
 display:none !important;
 }
 
 .header-actions.mobile-menu{
 position:fixed !important;
 top:80px !important;
 left:20px !important;
 z-index:100000 !important;
 }
 
 header{
 position:relative;
 }
}

@media (min-width:769px){
 .hamburger-menu{
 display:none !important;
 }
 
 .header-actions.mobile-menu{
 display:none !important;
 }
 
 .header-actions.desktop-menu{
 display:flex !important;
 }
}

@media (max-width:480px){
 .header-actions.mobile-menu{
 left:10px !important;
 width:calc(100vw - 20px) !important;
 max-width:250px !important;
 }
}
 
header{
 position:relative;
}

.opacity-90{
 opacity:0.9;
}

.opacity-95{
 opacity:0.95;
}

/* ============================================
 PAGE-SPECIFIC STYLES (Extracted from inline)
 ============================================ */


#userBannerBoard{
 display:none;
 margin-bottom:20px;
}

/* Force banner visibility on mobile when enabled via JavaScript */
@media (max-width: 768px) {
 #userBannerBoard[style*="display: block"] {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 15px !important;
  margin: 0 0 20px 0 !important;
  box-sizing: border-box !important;
 }
}


#downtimeNotice{
 display:none;
 padding:20px;
 border-radius:12px;
 margin-bottom:20px;
 text-align:center;
}

#downtimeNotice h3{
 color:white;
 margin-bottom:10px;
}

#downtimeNotice p{
 color:white;
 font-size:1.1rem;
 margin-bottom:10px;
}

.downtime-timer-display{
 color:white;
 font-size:1.5rem;
 font-weight:600;
}

.downtime-message-text{
 color:rgba(255,255,255,0.9);
 font-size:0.9rem;
 margin-top:10px;
}


.form-label-large{
 font-size:16px;
 font-weight:600;
 margin-bottom:8px;
 display:block;
}


.select-full{
 width:100%;
}


.btn-icon-large{
 font-size:20px;
}


.prize-pool-item{
 padding:25px;
 border-radius:12px;
 display:flex;
 flex-direction:column;
 align-items:center;
 justify-content:center;
 text-align:center;
}


.spinner-section-title,
.spinner-section-title-gray{
 text-align:center;
 color:#666;
 font-weight:500;
 margin-bottom:20px;
}

.game-status-banner{
 padding:15px;
 border-radius:10px;
 margin-bottom:30px;
 text-align:center;
}

.game-status-text{
 color:white;
 font-size:1.1rem;
 font-weight:600;
 margin:0;
}

.spinner-label{
 text-align:center;
 color:#999;
 font-size:1rem;
 margin-top:30px;
 margin-bottom:20px;
}

.wheel-pointer-gray{
 color:#999;
}

.countdown-timer-container{
 max-width:270px;
 width:270px;
 height:120px;
 margin:0 auto 30px;
 padding:10px;
 border-radius:12px;
 text-align:center;
 display:flex;
 flex-direction:column;
 justify-content:center;
}

.countdown-timer-text{
 color:white;
 font-size:14px;
 margin-bottom:8px;
 font-weight:600;
}

.countdown-display-flex{
 display:flex;
 justify-content:center;
 align-items:center;
 gap:5px;
 flex-wrap:nowrap;
}

.countdown-unit-box{
 padding:0;
 border-radius:6px;
 min-width:auto;
 display:flex;
 flex-direction:column;
 align-items:center;
}

.countdown-number-large{
 font-size:24px;
 font-weight:bold;
 color:white;
 line-height:1;
}

.countdown-label-small{
 font-size:12px;
 color:rgba(255,255,255,0.9);
 margin-top:2px;
}

.countdown-separator-large{
 font-size:20px;
 color:white;
 font-weight:bold;
 align-self:flex-start;
 margin:0 3px;
 opacity:0.7;
 padding-top:2px;
}

.countdown-message-small{
 margin-top:8px;
 color:rgba(255,255,255,0.9);
 font-size:12px;
}


.participant-card{
 background:white;
 border-radius:12px;
 padding:15px;
 margin-bottom:15px;
 box-shadow:0 2px 8px rgba(0,0,0,0.1);
}

.participant-card.winner{
 background:linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
 color:white;
}

.participant-card-header{
 display:flex;
 justify-content:space-between;
 align-items:center;
 margin-bottom:10px;
}

.participant-name{
 font-weight:600;
 font-size:1.1rem;
}

.participant-ticket{
 font-size:1.3rem;
 font-weight:600;
 color:#667eea;
}

.participant-card.winner .participant-ticket{
 color:white;
}

.participant-info{
 font-size:0.9rem;
 color:#666;
}

.participant-card.winner .participant-info{
 color:rgba(255,255,255,0.9);
}


.modal-content-narrow{
 max-width:450px;
}

.modal-btn-success{
 background:#28a745;
 color:white;
 padding:12px 30px;
 font-size:1.1rem;
}

.modal-btn-close{
 background:#28a745;
 color:white;
 padding:12px 30px;
 font-size:1.1rem;
}

#passwordChangeMessage{
 display:none;
 padding:12px;
 border-radius:8px;
 margin-bottom:15px;
}

.modal-winner-border{
 border:5px solid #28a745;
}

.modal-body-success{
 background:linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
}

.winner-name-large,
.winner-name-display{
 color:#155724;
 font-size:2rem;
 font-weight:600;
 margin-bottom:10px;
}

.winner-phone-display,
.winner-phone-large{
 color:#155724;
 font-size:1.3rem;
 margin-bottom:15px;
}

.winner-ticket-display,
.winner-ticket-large{
 color:#155724;
 font-size:1.5rem;
}

.winner-ticket-number{
 font-weight:600;
 color:#f5576c;
}


.bg-gradient-primary{
 background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.bg-gradient-pink{
 background:linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.bg-gradient-success{
 background:linear-gradient(135deg, #28a745 0%, #20c997 100%);
}

.bg-gradient-danger{
 background:linear-gradient(135deg, #dc3545 0%, #c82333 100%);
}

.bg-gradient-red{
 background:linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
}

.bg-gradient-green{
 background:linear-gradient(135deg, #28c76f 0%, #22c55e 100%);
}




.settings-prize-pool-card{
 background:linear-gradient(135deg, #dd94e6 0%, #f5576c 100%);
 border:none;
}

.settings-prize-pool-title{
 color:white;
 margin-bottom:20px;
}

.settings-prize-pool-grid{
 display:grid;
 grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
 gap:20px;
}

.settings-prize-pool-item{
 background:rgba(255,255,255,0.2);
 padding:20px;
 border-radius:12px;
 -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}

.settings-prize-pool-label{
 color:white;
 font-weight:600;
 margin-bottom:10px;
 display:block;
}

.settings-prize-pool-input{
 width:100%;
 padding:12px;
 border:none;
 border-radius:8px;
 font-size:16px;
 font-weight:bold;
}

.settings-prize-pool-save{
 margin-top:20px;
 background:white;
 color:#f5576c;
 font-weight:bold;
}

.settings-banner-desc{
 color:#666;
 margin-bottom:20px;
}


.settings-downtime-card{
 background:linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
 border:none;
}

.settings-downtime-title{
 color:white;
}

.settings-downtime-desc{
 color:rgba(255,255,255,0.9);
 margin-bottom:20px;
}

.settings-downtime-box{
 background:rgba(255,255,255,0.2);
 padding:20px;
 border-radius:12px;
 -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
 margin-bottom:20px;
}

.settings-downtime-label{
 color:white;
 font-weight:600;
 margin-bottom:10px;
 display:block;
}

.settings-downtime-grid{
 display:grid;
 grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
 gap:15px;
}

.settings-downtime-input-label{
 color:white;
 font-size:0.9rem;
 margin-bottom:5px;
 display:block;
}

.settings-downtime-input{
 width:100%;
 padding:12px;
 border:none;
 border-radius:8px;
 font-size:16px;
 font-weight:bold;
}

.settings-downtime-buttons{
 display:flex;
 gap:10px;
 flex-wrap:wrap;
}

.settings-downtime-start{
 background:white;
 color:#ff6b6b;
 font-weight:bold;
}

.settings-downtime-stop{
 background:white;
 color:#ff6b6b;
 border:2px solid white;
 font-weight:bold;
}

.settings-downtime-status{
 margin-top:20px;
 padding:15px;
 background:rgba(255,255,255,0.2);
 border-radius:8px;
 color:white;
 display:none;
}

.settings-downtime-status p{
 margin:0;
 font-weight:600;
}

.settings-downtime-status p:last-child{
 margin:5px 0 0 0;
}


.form-group-spin-mode{
 margin-bottom:25px;
}

.spin-mode-label{
 font-size:18px;
 font-weight:bold;
 margin-bottom:15px;
 display:block;
}

.spin-mode-options{
 display:flex;
 gap:20px;
 flex-wrap:wrap;
}

.spin-mode-radio-label{
 display:flex;
 align-items:center;
 gap:10px;
 cursor:pointer;
 padding:15px 20px;
 background:rgba(255,255,255,0.05);
 border-radius:8px;
 border:2px solid transparent;
 transition:all 0.3s;
}

.spin-mode-radio{
 width:20px;
 height:20px;
 cursor:pointer;
}

.spin-mode-title{
 font-weight:bold;
 font-size:16px;
}

.spin-mode-desc{
 font-size:13px;
 color:#999;
}

.spin-mode-note{
 font-size:12px;
 color:#28a745;
 margin-top:4px;
}

.number-input-flex{
 display:flex;
 gap:15px;
 align-items:center;
 width:100%;
}

.number-input-field{
 flex:3;
 padding:12px 16px;
 font-size:16px;
 height:48px;
 border:2px solid #e0e0e0;
 border-radius:8px;
 transition:border-color 0.3s;
}

.number-input-flex .btn{
 flex:1;
 min-width:120px;
 max-width:180px;
 height:48px;
 padding:12px 20px;
 font-size:0.95rem;
 white-space:nowrap;
}


@media (max-width:768px){
 .number-input-field{
 font-size:16px !important;
 padding:12px !important;
 height:50px !important;
}
 
 .number-input-flex .btn{
 font-size:14px !important;
 padding:12px 16px !important;
 min-width:100px;
}
}


.section-header-actions{
 display:flex;
 gap:10px;
}


.countdown-control-box,
.admin-countdown-control{
 margin-bottom:30px;
 padding:20px;
 border-radius:12px;
}

.countdown-control-flex,
.admin-countdown-header{
 display:flex;
 justify-content:space-between;
 align-items:center;
 flex-wrap:wrap;
 gap:15px;
}

.countdown-control-info,
.admin-countdown-info{
 color:white;
}

.countdown-control-label,
.admin-countdown-info > div:first-child{
 font-size:0.9rem;
 opacity:0.9;
 margin-bottom:5px;
}

.countdown-control-time,
.admin-countdown-time{
 font-size:2rem;
 font-weight:bold;
}

.countdown-control-buttons,
.admin-countdown-buttons{
 display:flex;
 gap:10px;
 flex-wrap:wrap;
}

.btn-countdown-start{
 background:white;
 color:#667eea;
 font-weight:bold;
 padding:12px 24px;
}

.btn-countdown-stop{
 background:linear-gradient(135deg, #dc3545 0%, #c82333 100%);
 color:white;
 padding:12px 24px;
}

.countdown-status-text{
 margin-top:10px;
 color:white;
 font-size:0.9rem;
 opacity:0.9;
}

.spinner-info-box{
 max-width:600px;
 margin:0 auto;
 padding:15px;
 background:#e8f5e9;
 border-radius:8px;
 border-left:4px solid #4caf50;
}

.spinner-info-title{
 color:#2e7d32;
 font-size:0.95rem;
 margin:0;
 font-weight:600;
}

.spinner-info-desc{
 color:#666;
 font-size:0.9rem;
 margin:5px 0 0 0;
}

.spinner-controls-center{
 text-align:center;
 margin-top:30px;
}


.modal-header-success-important{
 background:linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
}

.modal-admin-password-width{
 max-width:500px;
}

.modal-header-primary{
 background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.modal-header-primary h2{
 color:white;
}

.admin-password-message-hidden{
 display:none;
}



.modal-footer-light{
 background:#f8f9fa;
}

.btn-success{
 background:#28a745;
 color:white;
}

.btn-success:hover{
 background:#218838;
}

.modal-password-width{
 max-width:450px;
}

.password-message-hidden{
 display:none;
 padding:12px;
 border-radius:8px;
 margin-bottom:15px;
}







.hero-section{
 background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 padding:80px 20px;
 text-align:center;
 margin-bottom:50px;
 position:relative;
 overflow:hidden;
 max-width:1200px;
 height:608px;
 margin-left:auto;
 margin-right:auto;
 display:flex;
 align-items:center;
 justify-content:center;
 border-radius:16px;
}

.hero-section::before{
 content:'';
 position:absolute;
 top:0;
 left:0;
 right:0;
 bottom:0;
 background:url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="2" fill="rgba(255,255,255,0.1)"/></svg>');
 opacity:0.3;
 animation:float 20s linear infinite;
}

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

.hero-content{
 max-width:1200px;
 margin:0 auto;
 position:relative;
 z-index:1;
}

.hero-section h1{
 color:white;
 font-size:3rem;
 margin-bottom:20px;
 text-shadow:2px 2px 8px rgba(0,0,0,0.3);
 animation:fadeInDown 1s ease-out;
}

.hero-section p{
 color:white;
 font-size:1.3rem;
 line-height:1.8;
 margin-bottom:40px;
 opacity:0.95;
 max-width:800px;
 margin-left:auto;
 margin-right:auto;
 animation:fadeInUp 1s ease-out 0.2s both;
}

.hero-image-container{
 display:grid;
 grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
 gap:30px;
 max-width:900px;
 margin:0 auto;
 animation:fadeInUp 1s ease-out 0.4s both;
}

.hero-image{
 position:relative;
 border-radius:20px;
 overflow:hidden;
 box-shadow:0 15px 40px rgba(0,0,0,0.3);
 transition:all 0.4s ease;
 aspect-ratio:16/10;
}

.hero-image:hover{
 transform:translateY(-10px) scale(1.02);
 box-shadow:0 20px 50px rgba(0,0,0,0.4);
}

.hero-image img{
 width:100%;
 height:100%;
 object-fit:cover;
 border-radius:20px;
 transition:transform 0.4s ease;
}

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

@keyframes fadeInDown{
 from{
 opacity:0;
 transform:translateY(-30px);
}
 to{
 opacity:1;
 transform:translateY(0);
}
}

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


.about-section{
 background:white;
 padding:40px;
 border-radius:16px;
 box-shadow:0 4px 15px rgba(0, 0, 0, 0.08);
 margin-bottom:40px;
}

.about-section h2{
 color:#4a5fc1;
 font-size:2rem;
 margin-bottom:20px;
 text-align:center;
}

.about-section p{
 color:#666;
 font-size:1.1rem;
 line-height:1.8;
 margin-bottom:15px;
 text-align:center;
}


.how-to-play-section{
 background:white;
 padding:40px;
 margin-bottom:40px;
}

.how-to-play-section h2{
 color:#4a5fc1;
 font-size:2rem;
 margin-bottom:30px;
 text-align:center;
}

.how-to-play-steps{
 display:grid;
 gap:25px;
 margin-bottom:40px;
}

.play-step{
 display:flex;
 gap:20px;
 align-items:flex-start;
 padding:25px;
 background:linear-gradient(135deg, #f5f7fa 0%, #e4e8ec 100%);
 border-radius:12px;
 transition:all 0.3s ease;
 border-left:4px solid #667eea;
}

.play-step:hover{
 transform:translateX(5px);
 box-shadow:0 4px 15px rgba(102, 126, 234, 0.2);
}

.step-number{
 background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 color:white;
 width:50px;
 height:50px;
 border-radius:50%;
 display:flex;
 align-items:center;
 justify-content:center;
 font-size:1.5rem;
 font-weight:bold;
 flex-shrink:0;
 box-shadow:0 4px 12px rgba(102, 126, 234, 0.3);
}

.step-content h3{
 color:#667eea;
 font-size:1.3rem;
 margin-bottom:10px;
}

.step-content p{
 color:#666;
 font-size:1rem;
 line-height:1.6;
}

.telegram-cta{
 text-align:center;
 padding:30px;
 background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 border-radius:12px;
 color:white;
}

.telegram-cta p{
 font-size:1.2rem;
 margin-bottom:20px;
 color:white;
}

.telegram-cta .btn{
 background:white;
 color:#667eea;
 font-weight:600;
 padding:15px 40px;
 font-size:1.1rem;
}

.telegram-cta .btn:hover{
 transform:translateY(-3px);
 box-shadow:0 6px 20px rgba(0, 0, 0, 0.3);
}


@media (max-width:768px){
 .how-to-play-section{
 padding:25px;
}
 
 .play-step{
 flex-direction:column;
 text-align:center;
 align-items:center;
}
 
 .step-number{
 margin-bottom:15px;
}
 
 .telegram-cta{
 padding:20px;
}
 
 .telegram-cta p{
 font-size:1rem;
}
}


@media (max-width:768px){
 .hero-section{
 padding:50px 15px;
 max-width:100%;
 height:auto;
 min-height:400px;
}
 
 .hero-section h1{
 font-size:2rem;
}
 
 .hero-section p{
 font-size:1.1rem;
 margin-bottom:30px;
}
 
 .hero-image-container{
 grid-template-columns:1fr;
 gap:20px;
}
 
 .about-section{
 padding:25px;
}
 
 .about-section h2{
 font-size:1.5rem;
}
 
 .about-section p{
 font-size:1rem;
}
}

@media (max-width:480px){
 .hero-section{
 padding:40px 10px;
 max-width:100%;
 height:auto;
 min-height:350px;
}
 
 .hero-section h1{
 font-size:1.6rem;
}
 
 .hero-section p{
 font-size:1rem;
}
 
 .hero-image-container{
 gap:15px;
}
}


.features-grid{
 display:grid;
 grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
 gap:25px;
 margin-bottom:40px;
}

.feature-card{
 background:white;
 padding:30px;
 border-radius:16px;
 text-align:center;
 transition:all 0.3s;
 box-shadow:0 4px 15px rgba(0, 0, 0, 0.08);
 border:2px solid transparent;
}

.feature-card:hover{
 transform:translateY(-5px);
 box-shadow:0 8px 25px rgba(102, 126, 234, 0.15);
 border-color:#667eea;
}

.feature-icon{
 font-size:3rem;
 display:block;
 margin-bottom:15px;
}

.feature-card h3{
 color:#667eea;
 font-size:1.4rem;
 margin-bottom:12px;
 font-weight:600;
}

.feature-card p{
 color:#666;
 line-height:1.6;
 font-size:0.95rem;
}


.index-footer-grid{
 display:grid;
 grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
 gap:30px;
 margin-bottom:30px;
}

.index-footer-title{
 margin-bottom:15px;
 font-size:1.3rem;
}

.index-footer-text{
 opacity:0.9;
 line-height:1.6;
}

.index-footer-list{
 list-style:none;
 padding:0;
}

.index-footer-list-item{
 margin-bottom:10px;
}

.index-footer-link{
 color:white;
 text-decoration:none;
 opacity:0.9;
 transition:opacity 0.3s;
}

.index-footer-link:hover{
 opacity:1;
}

.index-footer-contact-item{
 margin-bottom:12px;
 display:flex;
 align-items:center;
 gap:10px;
}

.index-footer-contact-icon{
 font-size:1.3rem;
}

.index-footer-copyright{
 border-top:1px solid rgba(255,255,255,0.2);
 padding-top:20px;
 text-align:center;
}

.index-footer-copyright-text{
 opacity:0.9;
 margin:0;
}


.login-link-container{
 text-align:center;
 margin-top:15px;
}

.login-forgot-link{
 color:#667eea;
 text-decoration:none;
 font-size:1rem;
 font-weight:600;
 display:inline-block;
 padding:8px 16px;
 border-radius:6px;
 transition:all 0.3s;
}

.login-forgot-link:hover{
 background:rgba(102, 126, 234, 0.1);
}

.login-demo-box{
 margin-top:20px;
 padding:15px;
 background:#f8f9fa;
 border-radius:8px;
 font-size:0.9rem;
}

.login-register-box{
 margin-top:20px;
 text-align:center;
 padding:15px;
 background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 border-radius:8px;
}

.login-register-text{
 color:white;
 margin:0 0 10px 0;
 font-size:0.95rem;
}

.login-register-link{
 display:inline-block;
 padding:10px 30px;
 background:white;
 color:#667eea;
 text-decoration:none;
 font-weight:600;
 border-radius:8px;
 transition:all 0.3s;
}


.register-header{
 text-align:center;
 margin-bottom:30px;
}

.register-header h1{
 color:#667eea;
 font-size:1.75rem;
 margin-bottom:10px;
}

.register-header p{
 color:#666;
 font-size:0.95rem;
}

.password-hint{
 font-size:0.85rem;
 color:#999;
 margin-top:5px;
}

.btn-register{
 width:100%;
 padding:14px;
 background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 color:white;
 border:none;
 border-radius:8px;
 font-size:1.1rem;
 font-weight:600;
 cursor:pointer;
 transition:all 0.3s;
 margin-top:10px;
}

.btn-register:hover{
 transform:translateY(-2px);
 box-shadow:0 6px 20px rgba(102, 126, 234, 0.4);
}

.btn-register:disabled{
 opacity:0.6;
 cursor:not-allowed;
 transform:none;
}

.login-link{
 text-align:center;
 margin-top:20px;
 color:#666;
 font-size:0.95rem;
}

.login-link a{
 color:#667eea;
 text-decoration:none;
 font-weight:600;
}

.login-link a:hover{
 text-decoration:underline;
}

.error-message{
 background:#fee;
 color:#c33;
 padding:12px;
 border-radius:8px;
 margin-bottom:20px;
 font-size:0.9rem;
 display:none;
}

.success-message{
 background:#efe;
 color:#3c3;
 padding:12px;
 border-radius:8px;
 margin-bottom:20px;
 font-size:0.9rem;
 display:none;
}


.settings-checkbox-label{
 display:flex;
 align-items:center;
 gap:10px;
 cursor:pointer;
}

.settings-reset-message{
 margin-top:15px;
 padding:12px;
 border-radius:8px;
 display:none;
}

.settings-banner-buttons{
 display:flex;
 gap:10px;
 flex-wrap:wrap;
}


.stat-card-purple{
 border-color:#667eea;
}

.stat-number-purple{
 background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 -webkit-background-clip:text;
 -webkit-text-fill-color:transparent;
 background-clip:text;
}

.stat-card-yellow{
 border-color:#ffc107;
}

.stat-number-yellow{
 background:linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
 -webkit-background-clip:text;
 -webkit-text-fill-color:transparent;
 background-clip:text;
}

.stat-card-green{
 border-color:#28c76f;
}

.stat-number-green{
 background:linear-gradient(135deg, #28c76f 0%, #22c55e 100%);
 -webkit-background-clip:text;
 -webkit-text-fill-color:transparent;
 background-clip:text;
}

.stat-card-red{
 border-color:#ea5455;
}

.stat-number-red{
 background:linear-gradient(135deg, #ea5455 0%, #ef4444 100%);
 -webkit-background-clip:text;
 -webkit-text-fill-color:transparent;
 background-clip:text;
}


.logs-container-scroll{
 max-height:600px;
 overflow-y:auto;
}

/* ========================================
 PAGE-SPECIFIC STYLES FROM HTML FILES
 ======================================== */






input[type="radio"]:checked + div{
 color:#667eea;
}

input[type="radio"]:checked{
 accent-color:#667eea;
}

label:has(input[type="radio"]:checked){
 border-color:#667eea !important;
 background:rgba(102, 126, 234, 0.1) !important;
}




.mobile-card-view{
 display:none;
}


.mode-tabs{
 display:flex;
 gap:10px;
 margin-bottom:20px;
 border-bottom:2px solid #e0e0e0;
}

.mode-tab{
 padding:15px 30px;
 background:white;
 border:2px solid #e0e0e0;
 color:#333;
 cursor:pointer;
 font-size:16px;
 font-weight:bold;
 border-radius:8px 8px 0 0;
 transition:all 0.3s;
}

.mode-tab:hover{
 background:#f5f7fa;
 border-color:#667eea;
}

.mode-tab.active{
 background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 color:white;
 border-color:#667eea;
 box-shadow:0 4px 12px rgba(102, 126, 234, 0.3);
}

.stats-cards{
 display:grid;
 grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
 gap:20px;
 margin-bottom:30px;
}

.stat-card{
 background:white;
 padding:25px;
 border-radius:12px;
 text-align:center;
 border:2px solid #e0e0e0;
 transition:all 0.3s;
 box-shadow:0 2px 8px rgba(0,0,0,0.08);
}

.stat-card:hover{
 transform:translateY(-5px);
 box-shadow:0 8px 20px rgba(0,0,0,0.12);
}

.stat-number{
 font-size:42px;
 font-weight:bold;
 margin-bottom:8px;
}

.stat-label{
 font-size:15px;
 color:#666;
 font-weight:500;
}

.filter-section{
 display:flex;
 gap:15px;
 margin-bottom:20px;
 flex-wrap:wrap;
}

.filter-btn{
 padding:12px 24px;
 background:white;
 border:2px solid #e0e0e0;
 color:#333;
 cursor:pointer;
 border-radius:8px;
 font-size:15px;
 font-weight:600;
 transition:all 0.3s;
 box-shadow:0 2px 4px rgba(0,0,0,0.05);
}

.filter-btn:hover{
 background:#f5f7fa;
 border-color:#667eea;
 transform:translateY(-2px);
 box-shadow:0 4px 8px rgba(0,0,0,0.1);
}

.filter-btn.active{
 background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 border-color:#667eea;
 color:white;
 box-shadow:0 4px 12px rgba(102, 126, 234, 0.4);
}


.log-entry{
 background:white;
 padding:15px;
 margin-bottom:10px;
 border-radius:8px;
 border-left:4px solid #667eea;
}

.log-entry.reset{
 border-left-color:#ffc107;
}

.log-entry.winner{
 border-left-color:#28c76f;
}

.log-header{
 display:flex;
 justify-content:space-between;
 align-items:center;
 margin-bottom:10px;
}

.log-badge{
 padding:5px 12px;
 border-radius:20px;
 font-size:12px;
 font-weight:bold;
}

.log-badge.single{
 background:#667eea;
 color:white;
}

.log-badge.double{
 background:#764ba2;
 color:white;
}

.log-details{
 color:#666;
 font-size:14px;
}

.filter-tabs{
 display:flex;
 gap:10px;
 margin-bottom:20px;
}

.filter-tab{
 padding:10px 20px;
 background:white;
 border:2px solid #e0e0e0;
 border-radius:8px;
 cursor:pointer;
 transition:all 0.3s;
}

.filter-tab.active{
 background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 color:white;
 border-color:#667eea;
}


.login-container{
 min-height:100vh;
 display:flex;
 align-items:center;
 justify-content:center;
 padding:20px;
}

.login-card{
 background:white;
 border-radius:16px;
 padding:40px;
 max-width:400px;
 width:100%;
 box-shadow:0 10px 40px rgba(0,0,0,0.2);
}

.login-header{
 text-align:center;
 margin-bottom:30px;
}

.login-header h1{
 color:#3d4fa3;
 font-size:1.75rem;
 margin-bottom:10px;
}

.role-selector{
 display:flex;
 gap:10px;
 margin-bottom:30px;
}

.role-btn{
 flex:1;
 padding:15px;
 border:2px solid #e0e0e0;
 background:white;
 border-radius:8px;
 cursor:pointer;
 transition:all 0.3s;
 font-weight:600;
}

.role-btn.active{
 border-color:#667eea;
 background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 color:white;
}


.register-container{
 background:white;
 padding:40px;
 border-radius:16px;
 box-shadow:0 10px 40px rgba(0,0,0,0.3);
 width:100%;
 max-width:450px;
}


.top-nav{
 background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 padding:20px 0;
 box-shadow:0 2px 10px rgba(0,0,0,0.1);
 position:sticky;
 top:0;
 z-index:1000;
 margin-bottom:0;
}

.top-nav .container{
 display:flex;
 justify-content:space-between;
 align-items:center;
 flex-wrap:wrap;
 gap:20px;
 padding:0 20px;
 max-width:1400px;
 margin:0 auto;
}

.top-nav .container > div:first-child{
 display:flex;
 align-items:center;
 gap:15px;
}

.nav-logo{
 display:flex;
 align-items:center;
 gap:12px;
 color:white;
 font-size:1.8rem;
 font-weight:bold;
 text-decoration:none;
 transition:transform 0.3s;
}

.nav-logo:hover{
 transform:scale(1.05);
}

.nav-links{
 display:flex;
 gap:12px;
 flex-wrap:wrap;
 align-items:center;
}

.prize-pool-item{
 padding:25px;
 border-radius:12px;
 background:rgba(255,255,255,0.2);
 display:flex;
 flex-direction:column;
 align-items:center;
 justify-content:center;
 min-height:160px;
}

.nav-link{
 color:white;
 text-decoration:none;
 padding:12px 24px;
 border-radius:8px;
 background:rgba(255,255,255,0.15);
 transition:all 0.3s;
 font-weight:600;
 display:flex;
 align-items:center;
 gap:8px;
 font-size:1rem;
 border:2px solid transparent;
}

.nav-link:hover{
 background:rgba(255,255,255,0.3);
 transform:translateY(-2px);
 border-color:rgba(255,255,255,0.5);
 box-shadow:0 4px 12px rgba(0,0,0,0.2);
}

/* ========================================
 RESPONSIVE STYLES
 ======================================== */


@media (max-width:768px){
 body{
 padding:10px;
}
 
 .container{
 max-width:100%;
}
 
 header{
 padding:15px !important;
 margin-bottom:15px !important;
}
 
 header h1{
 font-size:1.5rem !important;
}
 
 .subtitle{
 font-size:0.9rem !important;
}
 
 header > div{
 flex-direction:column;
 gap:10px !important;
}
 
 .card{
 padding:15px !important;
 margin-bottom:15px !important;
}
 
 .card h2{
 font-size:1.3rem !important;
}
 
 
 input, select, button{
 min-height:50px !important;
 font-size:16px !important;
 padding:12px !important;
}
 
 .btn{
 width:100%;
 padding:15px !important;
 font-size:18px !important;
 margin-top:10px;
}
 
 .btn-sm{
 min-height:40px !important;
 padding:10px 15px !important;
 font-size:14px !important;
 width:auto;
}
 
 
 .spinner-section{
 display:block;
}
 
 .wheel-wrapper{
 width:300px !important;
 height:300px !important;
 max-width:100%;
 margin:0 auto;
 position:relative;
}
 
 #wheelCanvas{
 width:300px !important;
 height:300px !important;
 display:block;
}
 
 .wheel-center{
 width:80px !important;
 height:80px !important;
 border:4px solid #667eea !important;
 position:absolute !important;
 top:150px !important;
 left:150px !important;
 transform:translate(-50%, -50%) !important;
}
 
 .wheel-center span{
 font-size:1.2rem !important;
}
 
 .wheel-pointer{
 font-size:2rem !important;
 transform:translateY(-30%) !important;
}
 
 
 table{
 font-size:14px !important;
}
 
 table th, table td{
 padding:10px 5px !important;
 font-size:13px !important;
}
 
 
 .section-header{
 flex-direction:column !important;
 align-items:flex-start !important;
 gap:10px !important;
}
 
 .section-header h2{
 margin-bottom:0 !important;
}
 
 
 .winner-card{
 padding:15px !important;
}
 
 .live-winner-card{
 padding:20px !important;
}
 
 
 .modal-content{
 width:95% !important;
 margin:10% auto !important;
}
 
 .nav-links{
 width:100%;
 justify-content:center;
}
 
 .nav-link{
 flex:1;
 justify-content:center;
 min-width:120px;
}
}


@media (max-width:480px){
 .table-container table{
 display:none;
}
 
 .mobile-card-view{
 display:block !important;
}
 
 
 .wheel-wrapper{
 width:250px !important;
 height:250px !important;
}
 
 #wheelCanvas{
 width:250px !important;
 height:250px !important;
}
 
 .wheel-center{
 width:70px !important;
 height:70px !important;
 top:125px !important;
 left:125px !important;
}
 
 .wheel-center span{
 font-size:1rem !important;
}
}


@media (min-width:769px){
 .mobile-only{
 display:none;
}
}


/* ========================================
 MOBILE MENU TEXT COLOR FIX
 ======================================== */

/* Force all text in mobile menu to be black */
.header-actions.mobile-menu,
.header-actions.mobile-menu *,
.nav-links.mobile-menu,
.nav-links.mobile-menu *,
.mobile-menu,
.mobile-menu *{
 color:#000 !important;
}

.header-actions.mobile-menu .btn,
.nav-links.mobile-menu .nav-link,
.mobile-menu .nav-link,
.mobile-menu .btn{
 color:#000 !important;
 padding:0 !important;
 margin:2px 0 !important;
}

.header-actions.mobile-menu .user-badge,
.header-actions.mobile-menu .user-badge *{
 color:#000 !important;
}

/* Home page mobile menu - force black text */
.home-header .mobile-menu,
.home-header .mobile-menu *,
.home-header .mobile-menu .nav-link,
.home-header .mobile-menu .nav-link span,
.home-header .header-actions.mobile-menu,
.home-header .header-actions.mobile-menu *,
.home-header .header-actions.mobile-menu .nav-link,
.home-header .header-actions.mobile-menu .nav-link span{
 color:#000 !important;
}

/* Language switcher in mobile menu */
.mobile-menu .language-switcher,
.mobile-menu .language-switcher *,
.mobile-menu .language-current,
.mobile-menu .language-current *,
.mobile-menu .language-dropdown,
.mobile-menu .language-dropdown *{
 color:#000 !important;
}

/* Mobile menu language buttons */
.mobile-menu .language-btn:not(.active){
 color:#000 !important;
 padding:0 !important;
 margin:2px 0 !important;
}

.mobile-menu .language-btn:not(.active) .lang-text{
 color:#000 !important;
}

/* Active button keeps white text */
.mobile-menu .language-btn.active{
 color:#fff !important;
 padding:0 !important;
 margin:2px 0 !important;
}

.mobile-menu .language-btn.active .lang-text{
 color:#fff !important;
}

/* Language Dropdown Styles */
.mobile-language-dropdown {
    position: relative;
    width: 100%;
    margin-top: 5px;
}

.language-dropdown-btn {
    width: 100% !important;
    height: 40px !important;
    background: #f5f5f5 !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
    color: black !important;
    font-size: 14px !important;
    cursor: pointer !important;
    transition: background-color 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 8px 12px !important;
    box-sizing: border-box !important;
}

.language-dropdown-btn:hover {
    background: #e0e0e0 !important;
}

.language-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 1000;
    margin-top: 2px;
    display: none;
}

.language-dropdown-menu.show {
    display: block !important;
}

.language-option {
    width: 100% !important;
    height: 35px !important;
    background: white !important;
    border: none !important;
    color: black !important;
    font-size: 14px !important;
    cursor: pointer !important;
    transition: background-color 0.3s ease !important;
    border-radius: 6px !important;
    margin: 2px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 12px !important;
    box-sizing: border-box !important;
}

.language-option:hover {
    background: #f0f0f0 !important;
}

.language-option:first-child {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.language-option:last-child {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.dropdown-arrow {
    font-size: 12px;
    transition: transform 0.3s ease;
}

/* Language Dropdown Styles */
.mobile-language-dropdown {
    position: relative;
    width: 100%;
    margin-top: 5px;
}

.language-dropdown-btn {
    width: 100% !important;
    height: 40px !important;
    background: #f5f5f5 !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
    color: black !important;
    font-size: 14px !important;
    cursor: pointer !important;
    transition: background-color 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 8px 12px !important;
    box-sizing: border-box !important;
}

.language-dropdown-btn:hover {
    background: #e0e0e0 !important;
}

.language-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 1000;
    margin-top: 2px;
    display: none;
}

.language-dropdown-menu.show {
    display: block !important;
}

.language-option {
    width: 100% !important;
    height: 35px !important;
    background: white !important;
    border: none !important;
    color: black !important;
    font-size: 14px !important;
    cursor: pointer !important;
    transition: background-color 0.3s ease !important;
    border-radius: 6px !important;
    margin: 2px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 12px !important;
    box-sizing: border-box !important;
}

.language-option:hover {
    background: #f0f0f0 !important;
}

.language-option:first-child {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.language-option:last-child {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.dropdown-arrow {
    font-size: 12px;
    transition: transform 0.3s ease;
}

/* Mobile Menu - EXACT 200×250px dimensions for HOME PAGE */
@media (max-width: 768px) {
    .home-header .mobile-menu,
    .home-page .mobile-menu,
    body.home-page .mobile-menu {
        display: none;
        position: fixed;
        top: 80px;
        left: 20px;
        width: 200px !important;
        height: 250px !important;
        max-height: 250px !important;
        min-height: 250px !important;
        background: white !important;
        flex-direction: column;
        padding: 10px !important;
        border-radius: 12px;
        box-shadow: 0 8px 24px rgba(0,0,0,0.3);
        overflow-y: auto;
        z-index: 9999;
        box-sizing: border-box !important;
    }
    
    .home-header .mobile-menu.active,
    .home-page .mobile-menu.active,
    body.home-page .mobile-menu.active {
        display: flex !important;
    }
    
    .home-header .mobile-menu .nav-link,
    .home-page .mobile-menu .nav-link,
    body.home-page .mobile-menu .nav-link {
        width: 100% !important;
        height: 35px !important;
        background: #f5f5f5 !important;
        color: black !important;
        margin-bottom: 5px !important;
        padding: 8px 12px !important;
        font-size: 14px !important;
        text-align: left !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        box-sizing: border-box !important;
        border-radius: 8px !important;
        text-decoration: none !important;
        line-height: 1 !important;
        border: 1px solid #e0e0e0 !important;
        gap: 8px !important;
    }
    
    .home-header .mobile-menu .nav-link:hover,
    .home-page .mobile-menu .nav-link:hover,
    body.home-page .mobile-menu .nav-link:hover {
        background: #e0e0e0 !important;
    }
    
    .home-header .mobile-menu .nav-link span:first-child,
    .home-page .mobile-menu .nav-link span:first-child,
    body.home-page .mobile-menu .nav-link span:first-child {
        font-size: 16px !important;
    }
}

/* Desktop Language Toggle Button */
.language-toggle-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.2);
    color: white;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 8px;
    padding: 8px 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
    font-weight: 500;
}

.language-toggle-btn:hover {
    background: rgba(255,255,255,0.3);
    border-color: rgba(255,255,255,0.5);
}

.language-toggle-btn .flag {
    font-size: 16px;
}

.language-toggle-btn .lang-text {
    font-size: 13px;
}

/* Language Switcher Buttons */
.language-switcher-buttons {
    display: flex;
    gap: 8px;
    align-items: center;
}

.language-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.2);
    color: white;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 6px;
    padding: 6px 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 12px;
}

.language-btn:hover {
    background: rgba(255,255,255,0.3);
}

.language-btn.active {
    background: rgba(255,255,255,0.4);
    border-color: rgba(255,255,255,0.6);
    font-weight: 600;
}

.language-btn .flag {
    font-size: 14px;
}

.language-btn .lang-text {
    font-size: 11px;
}

@media (max-width: 768px) {
    .language-switcher-buttons {
        display: none;
    }
    
    .language-toggle-btn {
        display: none;
    }
}

/* ULTIMATE OVERRIDE FOR HOME PAGE MOBILE MENU - 250PX HEIGHT */
html body.home-page .mobile-menu,
html body.home-page .header-actions.mobile-menu,
html .home-header .mobile-menu,
html .home-header .header-actions.mobile-menu,
body.home-page .mobile-menu,
body.home-page .header-actions.mobile-menu {
    height: 250px !important;
    max-height: 250px !important;
    min-height: 250px !important;
    width: 200px !important;
}
/* Cancel/Close Button Styling for Mobile Menu */
.mobile-menu .btn-cancel,
.header-actions.mobile-menu .btn-cancel {
    background: #dc3545 !important;
    color: white !important;
    border: 1px solid #dc3545 !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

.mobile-menu .btn-cancel:hover,
.header-actions.mobile-menu .btn-cancel:hover {
    background: #c82333 !important;
    border-color: #bd2130 !important;
    transform: scale(1.02) !important;
    box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3) !important;
}

.mobile-menu .btn-cancel:active,
.header-actions.mobile-menu .btn-cancel:active {
    transform: scale(0.98) !important;
}
/* Enhanced Language Dropdown for Login/Register Pages */
.login-mobile-menu .language-dropdown-menu,
.register-mobile-menu .language-dropdown-menu {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: #f8f9fa !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1) !important;
    z-index: 1000 !important;
    margin-top: 5px !important;
    padding: 5px !important;
}

.login-mobile-menu .language-dropdown-menu.show,
.register-mobile-menu .language-dropdown-menu.show {
    display: block !important;
    margin-top: 1px !important;
}

.login-mobile-menu .language-option,
.register-mobile-menu .language-option {
    width: 100% !important;
    height: 35px !important;
    background: white !important;
    border: 1px solid #ddd !important;
    color: black !important;
    font-size: 13px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 12px !important;
    box-sizing: border-box !important;
    border-radius: 6px !important;
    margin-bottom: 3px !important;
    transition: all 0.2s ease !important;
}

.login-mobile-menu .language-option:hover,
.register-mobile-menu .language-option:hover {
    background: #e9ecef !important;
    border-color: #adb5bd !important;
    transform: translateX(2px) !important;
}

.login-mobile-menu .language-option:last-child,
.register-mobile-menu .language-option:last-child {
    margin-bottom: 0 !important;
}

/* Prevent dropdown from closing mobile menu */
.mobile-language-dropdown {
    position: relative !important;
}

.mobile-language-dropdown * {
    pointer-events: auto !important;
}

/* HOME PAGE MOBILE MENU - EXACT 200×250px DIMENSIONS */
.home-page .header-actions.mobile-menu,
.home-header .mobile-menu {
    width: 200px !important;
    height: 250px !important;
    max-height: 250px !important;
    min-height: 250px !important;
    padding: 10px !important;
    box-sizing: border-box !important;
}

/* HOME PAGE MOBILE MENU BUTTONS */
.home-page .mobile-menu .nav-link {
    width: 100% !important;
    height: 40px !important;
    background: #f5f5f5 !important;
    color: black !important;
    margin-bottom: 5px !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
    text-align: left !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    line-height: 1 !important;
    border: 1px solid #e0e0e0 !important;
}

.home-page .mobile-menu .nav-link:hover {
    background: #e0e0e0 !important;
}

.home-page .mobile-menu .nav-link span:first-child {
    margin-right: 10px !important;
    font-size: 16px !important;
}

/* HOME PAGE LANGUAGE DROPDOWN IN MOBILE MENU */
.home-page .mobile-language-dropdown {
    margin-top: 10px !important;
    width: 100% !important;
}

.home-page .language-dropdown-btn {
    width: 100% !important;
    height: 40px !important;
    background: #e6f3ff !important;
    color: #0066cc !important;
    border: 1px solid #b3d9ff !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
}

.home-page .language-dropdown-menu {
    position: absolute !important;
    background: white !important;
    border: 1px solid #ddd !important;
    width: 100% !important;
    z-index: 10001 !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    margin-top: 2px !important;
}

.home-page .language-option {
    width: 100% !important;
    height: 35px !important;
    background: white !important;
    border: none !important;
    border-bottom: 1px solid #eee !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 8px 20px !important;
    font-size: 13px !important;
    box-sizing: border-box !important;
}

.home-page .language-option:last-child {
    border-bottom: none !important;
    border-radius: 0 0 8px 8px !important;
}

.home-page .language-option:first-child {
    border-radius: 8px 8px 0 0 !important;
}

.home-page .language-option:hover {
    background: #f8f9fa !important;
}
/* USER PAGE HEADER - 120px height with proper responsive navigation */
.user-page header {
    height: 120px !important;
    min-height: 120px !important;
    max-height: 120px !important;
}

/* Desktop navigation - show by default, hide on mobile */
.user-page .desktop-nav {
    display: flex !important;
}

.user-page .hamburger-menu {
    display: none;
    z-index: 10001 !important;
    position: relative !important;
    cursor: pointer !important;
    pointer-events: auto !important;
}

.user-page .mobile-sidebar {
    display: none !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 10000 !important;
    visibility: hidden !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
}

.user-page .mobile-sidebar.active {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.user-page .sidebar-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0,0,0,0.5) !important;
    cursor: pointer !important;
}

.user-page .sidebar-content {
    position: absolute !important;
    top: 0 !important;
    left: -198px !important;
    width: 198px !important;
    height: 400px !important;
    background: white !important;
    box-shadow: 2px 0 10px rgba(0,0,0,0.3) !important;
    transition: left 0.3s ease !important;
    overflow-y: auto !important;
    z-index: 10001 !important;
}

.user-page .sidebar-content.open {
    left: 0 !important;
}

.user-page .sidebar-header {
    padding: 20px !important;
    border-bottom: 1px solid #eee !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    background: #f8f9fa !important;
}

.user-page .sidebar-header h3 {
    margin: 0 !important;
    color: #333 !important;
    font-size: 1.2rem !important;
}

.user-page .sidebar-close {
    background: none !important;
    border: none !important;
    font-size: 24px !important;
    cursor: pointer !important;
    color: #dc3545 !important;
    padding: 5px !important;
    border-radius: 4px !important;
    transition: color 0.3s ease !important;
}

.user-page .sidebar-close:hover {
    color: #c82333 !important;
    background: #ffebee !important;
}

.user-page .sidebar-menu {
    padding: 0 !important;
}

.user-page .sidebar-item {
    width: 190px !important;
    height: 40px !important;
    background: transparent !important;
    color: black !important;
    margin: 1px !important;
    padding: 10px 15px !important;
    font-size: 14px !important;
    text-align: left !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
    gap: 8px !important;
    border: none !important;
    cursor: pointer !important;
    border-bottom: 1px solid #f0f0f0 !important;
    transition: background 0.2s ease !important;
}

.user-page .sidebar-item-left {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 1 !important;
    justify-content: flex-start !important;
}

.user-page .sidebar-item:hover {
    background: #f8f9fa !important;
}

.user-page .sidebar-button {
    justify-content: space-between !important;
}

.user-page .sidebar-item-left {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.user-page .sidebar-icon {
    font-size: 18px !important;
    width: 20px !important;
    text-align: center !important;
}

.user-page .wallet-balance {
    font-weight: bold !important;
    font-size: 14px !important;
    color: #28a745 !important;
}

.user-page .logout-button {
    color: #dc3545 !important;
}

.user-page .sidebar-toggle {
    justify-content: space-between !important;
}

.user-page .toggle-checkbox {
    width: 18px !important;
    height: 18px !important;
    cursor: pointer !important;
}

.user-page .mobile-language-dropdown {
    background: #f8f9fa !important;
    border-top: 1px solid #eee !important;
    margin: 0 !important;
}

.user-page .language-option {
    width: 100% !important;
    height: 45px !important;
    background: transparent !important;
    color: black !important;
    padding: 12px 40px !important;
    font-size: 15px !important;
    text-align: left !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
    border: none !important;
    cursor: pointer !important;
    gap: 12px !important;
    border-bottom: 1px solid #eee !important;
    transition: background 0.2s ease !important;
}

.user-page .language-option:hover {
    background: #e9ecef !important;
}

.user-page .language-option:last-child {
    border-bottom: none !important;
}

.user-page .sidebar-content {
    position: absolute !important;
    top: 0 !important;
    left: -250px !important;
    width: 250px !important;
    height: 100% !important;
    background: white !important;
    box-shadow: 2px 0 10px rgba(0,0,0,0.3) !important;
    transition: left 0.3s ease !important;
    overflow-y: auto !important;
}

/* Mobile responsive - hide desktop nav, show hamburger */
@media (max-width: 768px) {
    .user-page .desktop-nav {
        display: none !important;
    }
    
    .user-page .hamburger-menu {
        display: flex !important;
        z-index: 10001 !important;
        position: relative !important;
        cursor: pointer !important;
        pointer-events: auto !important;
        background: #fff !important;
        border: 1px solid #ddd !important;
        border-radius: 8px !important;
        width: 41px !important;
        height: 41px !important;
        justify-content: center !important;
        align-items: center !important;
        flex-direction: column !important;
        padding: 8px !important;
    }
    
    .user-page .mobile-sidebar {
        display: block !important;
    }
    
    .user-page header h1 {
        font-size: 1.4rem !important;
    }
    
    .user-page header p {
        font-size: 0.9rem !important;
    }
}

/* Hamburger animation */
.user-page .hamburger-menu.active span:nth-child(1) {
    transform: rotate(-45deg) translate(-5px, 6px) !important;
}

.user-page .hamburger-menu.active span:nth-child(2) {
    opacity: 0 !important;
}

.user-page .hamburger-menu.active span:nth-child(3) {
    transform: rotate(45deg) translate(-5px, -6px) !important;
}

/* Ensure hamburger is clickable */
.user-page .hamburger-menu {
    pointer-events: auto !important;
    z-index: 10002 !important;
    position: relative !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
}

.user-page .hamburger-menu span {
    pointer-events: none !important;
    width: 25px !important;
    height: 3px !important;
    background: #000 !important;
    margin: 3px 0 !important;
    border-radius: 2px !important;
    display: block !important;
    transition: all 0.3s ease !important;
}

/* Force hamburger to be above everything */
@media (max-width: 768px) {
    .user-page .hamburger-menu {
        z-index: 10002 !important;
        position: relative !important;
        pointer-events: auto !important;
        cursor: pointer !important;
        touch-action: manipulation !important;
    }
}

@media (max-width: 480px) {
    .user-page header {
        padding: 0 10px !important;
    }
    
    .user-page header h1 {
        font-size: 1.2rem !important;
    }
    
    .user-page header p {
        font-size: 0.8rem !important;
    }
}