*,
*::before,
*::after{
box-sizing:border-box;
}

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

body{
font-family: Arial, Helvetica, sans-serif;
background:#f5f5f5;
display:flex;
flex-direction:column;
}

/* HEADER */

header{
position:fixed;
top:0;
left:0;
width:100%;
background:#34495e;
z-index:1000;
box-shadow:0 2px 10px rgba(0,0,0,0.2);
}

.main-header{
display:flex;
align-items:center;
justify-content:space-between;
padding:8px 25px;
}

.header-left,
.header-center,
.header-right{
display:flex;
align-items:center;
gap:12px;
}

.header-stats{
background:#2c3e50;
color:#d0d7de;
font-size:13px;
display:flex;
gap:20px;
padding:6px 12px;
border-radius:5px;
}

.logo img{
height:45px;
display:block;
}

.menu-btn{
background:#3c8dc5;
color:white;
padding:8px 14px;
border-radius:6px;
text-decoration:none;
font-weight:600;
font-size:14px;
transition:0.2s;
}

.menu-btn:hover{
background:#2f7ab0;
}

.logout{
background:#e74c3c;
}

.logout:hover{
background:#c0392b;
}

.user-name{
color:white;
font-weight:600;
}

/* CONTAINER */

.container{
width:1000px;
margin:auto;
margin-top:80px;
background:white;
border-radius:5px;
flex:1;
}

/* CARD */

.card{
border:1px solid #ddd;
padding:15px;
margin-bottom:15px;
border-radius:5px;
}

/* BUTTONS */

button{
background:#3498db;
color:white;
border:none;
padding:8px 15px;
cursor:pointer;
border-radius:4px;
}

button:hover{
background:#2980b9;
}

/* INPUT */

input, textarea{
padding:8px;
margin-bottom:10px;
width:100%;
}

/* QUESTION */

.question-block{
display:flex;
gap:20px;
align-items:flex-start;
}

.question-text{
flex:1;
}

.question-image{
width:500px;
height:500px;
object-fit:cover;
border-radius:6px;
border:1px solid #ddd;
}

/* TITLES */

.question-text h2{
font-size:26px;
margin-bottom:10px;
border-bottom:2px solid #e3eaf3;
padding-bottom:6px;
}

.question-text h3{
margin-top:25px;
margin-bottom:10px;
font-size:18px;
border-left:4px solid #3c8dc5;
padding-left:8px;
}

/* VOTE */

.vote-option{
margin-bottom:8px;
}

.vote-btn{
background:#eef6ff;
border:1px solid #cddff7;
padding:12px 14px;
border-radius:6px;
cursor:pointer;
font-size:15px;
width:260px;
text-align:left;
color:#1a1a1a;
font-weight:500;
}

.vote-btn:hover{
background:#dfefff;
color:#000;
}

/* RESULTS */

.result{
margin-bottom:10px;
}

.bar{
height:8px;
background:#3c8dc5;
transition:width 0.6s ease;
}

/* SHARE */

.share-facebook{
display:inline-flex;
align-items:center;
gap:8px;
background:#1877f2;
color:white;
padding:8px 14px;
border-radius:6px;
text-decoration:none;
font-weight:500;
font-size:14px;
margin:10px 0;
}

.share-facebook:hover{
background:#166fe5;
}

.share-icon{
width:16px;
height:16px;
}

/* TIMER */

.question-timer,
.card-timer{
font-size:13px;
color:#e67e22;
font-weight:600;
margin-top:6px;
}

/* CLOSED QUESTION */

.question-closed{
background:#ffeaea;
border-left:4px solid #e74c3c;
padding:10px;
margin:10px 0;
border-radius:6px;
}

/* ADMIN */

.admin-stats{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
margin-top:15px;
}

.stat-card{
background:#f4f7fb;
border:1px solid #d9e3f2;
border-radius:8px;
padding:20px;
text-align:center;
}

.stat-number{
font-size:26px;
font-weight:bold;
color:#3c8dc5;
}

.stat-label{
font-size:14px;
color:#555;
margin-top:5px;
}

.admin-links{
margin-top:20px;
display:flex;
gap:15px;
}

.admin-btn{
background:#3c8dc5;
color:white;
padding:10px 16px;
border-radius:6px;
text-decoration:none;
font-weight:500;
}

.admin-btn:hover{
background:#2f74a7;
}

/* ADD ANSWER */

.add-answer-form{
margin-top:15px;
display:flex;
gap:10px;
}

.answer-input{
flex:1;
padding:10px;
border:1px solid #ccc;
border-radius:6px;
font-size:14px;
}

/* USER VOTE */

.user-vote{
margin:10px 0;
padding:10px 14px;
background:#e8f3ff;
border-left:4px solid #3c8dc5;
border-radius:6px;
font-weight:500;
color:#2c3e50;
}

/* SUCCESS */

.success-msg{
background:#e8f7e8;
border:1px solid #b7e3b7;
padding:12px;
margin-bottom:15px;
border-radius:6px;
color:#2f7a2f;
}

/* RANKING */

.rank-item{
display:flex;
justify-content:space-between;
padding:10px;
border-bottom:1px solid #eee;
}

.rank-item a{
font-weight:600;
text-decoration:none;
color:#333;
}

/* FOOTER BANNER */

.footer-ads{
position:sticky;
bottom:0;
background:#34495e;
display:flex;
justify-content:center;
gap:20px;
padding:12px;
margin-top:40px;
box-shadow:0 -2px 10px rgba(0,0,0,0.2);
}

.footer-ads img{
width:300px;
height:100px;
object-fit:cover;
border-radius:6px;
}

/* PAGE BOX (contact/help ecc) */

.page-box{
background:white;
padding:40px;
border-radius:8px;
max-width:700px;
width:100%;
margin:40px auto;
box-shadow:0 3px 10px rgba(0,0,0,0.08);
}

.contact-box{
margin-top:20px;
background:#eef3f8;
padding:20px;
border-radius:6px;
font-size:18px;
display:flex;
align-items:center;
gap:10px;
}