*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;font-family:'Inter',sans-serif;overflow:hidden;}
canvas{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1;pointer-events:none;}

body{
display:flex;
justify-content:center;
align-items:center;
padding:20px;
background:linear-gradient(120deg,#6C3335,#D56363,#955B55);
background-size:400% 400%;
animation:bg 15s infinite;
color:#fff;
}

@keyframes bg{
0%{background-position:0% 50%;}
50%{background-position:100% 50%;}
100%{background-position:0% 50%;}
}

.bubble{
position:absolute;
bottom:-150px;
border-radius:50%;
pointer-events:none;
display:flex;
justify-content:center;
align-items:center;
text-align:center;
font-weight:600;
padding:10px;
animation-name:rise;
animation-timing-function:linear;
animation-fill-mode:forwards;
box-shadow:0 0 20px rgba(255,255,255,0.5);
}

@keyframes rise{
0%{transform:translateY(0) scale(.9);opacity:0;}
10%{opacity:1;}
100%{transform:translateY(-120vh) scale(1.1);opacity:0;}
}

.container{
max-width:720px;width:100%;
background:rgba(245,221,201,0.95);
padding:60px 50px;
border-radius:32px;
text-align:center;
box-shadow:0 35px 70px #0006;
color:#5b2628;
position:relative;
z-index:2;
}

.title{
font-family:'Playfair Display',serif;
font-size:52px;
margin-bottom:10px;
color:#E8B89C;
text-shadow:4px 4px 0 #6C3335;
}

.subtitle{
letter-spacing:3px;
margin:15px 0 10px;
font-size:20px;
color:#955B55;
}

.direction{
font-size:18px;
margin-bottom:20px;
}

.theme{
font-size:24px;
margin-bottom:15px;
}

.description{
font-size:17px;
margin-bottom:40px;
}

.vote-row{
display:flex;
justify-content:center;
gap:10px;
flex-wrap:wrap;
}

.vote-row input{
flex:1;
min-width:200px;
padding:16px;
border-radius:50px;
border:none;
font-size:15px;
}

.vote-row button{
padding:16px 25px;
border:none;
border-radius:50px;
background:#D56363;
color:#fff;
font-size:16px;
cursor:pointer;
}

.note{
margin-top:15px;
font-size:13px;
opacity:.7;
}

.admin{
position:fixed;
top:15px;
right:15px;
background:linear-gradient(135deg,#f5ddc9,#d56363);
padding:20px 25px;
border-radius:20px;
z-index:10000;
display:none;
color:#6C3335;
box-shadow:0 10px 25px rgba(0,0,0,0.3);
font-family:'Inter',sans-serif;
transition:all 0.3s ease;
width:250px;
}

.admin input{
width:100%;
padding:10px 12px;
margin-bottom:10px;
border-radius:10px;
border:1px solid #955b55;
outline:none;
font-size:14px;
}

.admin input:focus{
border-color:#d56363;
}

.admin button{
width:100%;
padding:12px;
border:none;
border-radius:12px;
background:#6c3335;
color:#fff;
font-weight:600;
cursor:pointer;
transition:all 0.2s ease;
}

.admin button:hover{
background:#955b55;
}

.password-container{
position:relative;
}

.password-container .toggle-eye{
position:absolute;
right:10px;
top:50%;
transform:translateY(-50%);
cursor:pointer;
color:#955b55;
font-size:16px;
}

.admin-trigger{
position:fixed;
top:10px;
right:10px;
width:40px;
height:40px;
z-index:10001;
cursor:pointer;
opacity:0;
background:transparent;
border:none;
padding:0;
}

.vote-message-overlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background-color:rgba(0,0,0,0.85);
display:flex;
justify-content:center;
align-items:center;
z-index:99999;
opacity:0;
pointer-events:none;
transition:opacity 0.4s ease;
}

.vote-message-overlay.active{
opacity:1;
pointer-events:auto;
}

.vote-message-box{
background:linear-gradient(135deg,#ff5858,#ffb347);
padding:40px 30px;
border-radius:25px;
max-width:600px;
text-align:center;
border:3px solid #fff3;
box-shadow:0 10px 30px rgba(0,0,0,0.4);
transform:scale(0.8);
opacity:0;
transition:all 0.4s ease;
}

.vote-message-overlay.active .vote-message-box{
transform:scale(1);
opacity:1;
}

.vote-message-box h2{
font-size:28px;
margin-bottom:15px;
color:#fff;
text-shadow:2px 2px 4px #6c3335;
}

.vote-message-box p{
font-size:17px;
line-height:1.5;
color:#fff;
margin-bottom:20px;
}

.vote-message-box button{
padding:14px 30px;
border:none;
border-radius:50px;
background:#6C3335;
color:#fff;
font-size:16px;
font-weight:600;
cursor:pointer;
transition:all 0.2s ease;
box-shadow:0 5px 15px rgba(0,0,0,0.3);
}

.vote-message-box button:hover{
background:#955b55;
transform:scale(1.05);
}

@media (max-width: 600px) {
  .container { padding: 30px 20px; border-radius: 20px; }
  .title { font-size: 36px; }
  .subtitle { font-size: 18px; }
  .direction, .theme, .description { font-size: 14px; }
  .vote-row { flex-direction: column; gap: 12px; }
  .vote-row input, .vote-row button { font-size: 16px; padding: 12px; }
  .note { font-size: 12px; }
  .bubble { font-size: 12px !important; padding: 6px !important; }
  .vote-message-box { padding: 25px 20px; }
  .vote-message-box h2 { font-size: 22px; }
  .vote-message-box p { font-size: 15px; }
  .vote-message-box button { padding: 12px 25px; font-size: 15px; }
  .admin { width: 200px; padding: 15px 20px; }
  .admin input { font-size: 13px; padding: 8px 10px; }
  .admin button { font-size: 14px; padding: 10px; }
}